Fix tools panel icon sizes, added save and open link actions, taskbone image size normalization

src/menu/ActionIcons.tsx

@@ -210,6 +210,41 @@ export const ICONS = {
       </g>
     </svg>
   ),
+  openLink: (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="var(--icon-fill-color)"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M4 22h14a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v7"/>
+      <polyline points="14 2 14 8 20 8"/>
+      <path d="m10 18 3-3-3-3"/>
+      <path d="M4 18v-1a2 2 0 0 1 2-2h6"/>
+    </svg>
+  ),
+  openLinkProperties: (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="var(--icon-fill-color)"
+      strokeWidth="3"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M4 22h14a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v7"/>
+      <polyline 
+        points="14 2 14 8 20 8"
+        fill="var(--icon-fill-color)"
+      />
+      <path d="m10 18 3-3-3-3"/>
+      <path d="M4 18v-1a2 2 0 0 1 2-2h6"/>
+    </svg>
+  ),
   //fa-brands fa-markdown
   switchToMarkdown: (
     <svg
@@ -409,12 +444,30 @@ export const ICONS = {
   )
 };
 
+export const saveIcon = (isDirty: boolean) => {
+  return (
+    <svg 
+      xmlns="http://www.w3.org/2000/svg" 
+      viewBox="0 0 24 24"
+      fill="none" 
+      stroke={isDirty?"var(--color-accent)":"var(--icon-fill-color)"}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
+      <polyline points="17 21 17 13 7 13 7 21"/>
+      <polyline points="7 3 7 8 15 8"/>
+    </svg>
+  )
+}
+
 export const stringToSVG = (svg: string) => {
   svg = svg
     .replace(/stroke\s*=\s*['"][^"']*['"]/g,"")
     .replace(/width\s*=\s*['"][^"']*['"]/g,"")
     .replace(/height\s*=\s*['"][^"']*['"]/g,"")
-    .replace("<svg ",`<svg style="stroke:var(--icon-fill-color);color:var(--icon-fill-color);fill:var(--icon-fill-color)" `)
+    .replace("<svg ",`<svg style="stroke:var(--icon-fill-color);color:var(--icon-fill-color);fill:var(--icon-fill-color);stroke-width:6;" `)
     
     return (
       <div dangerouslySetInnerHTML={{__html: svg}}></div>

src/menu/ToolsPanel.tsx

@@ -2,7 +2,7 @@ import clsx from "clsx";
 import { Notice, TFile } from "obsidian";
 import * as React from "react";
 import { ActionButton } from "./ActionButton";
-import { ICONS, stringToSVG } from "./ActionIcons";
+import { ICONS, saveIcon, stringToSVG } from "./ActionIcons";
 import { SCRIPT_INSTALL_FOLDER, CTRL_OR_CMD } from "../Constants";
 import { insertLaTeXToView, search } from "../ExcalidrawAutomate";
 import ExcalidrawView, { TextMode } from "../ExcalidrawView";
@@ -29,6 +29,7 @@ export type PanelState = {
   theme: "dark" | "light";
   excalidrawViewMode: boolean;
   minimized: boolean;
+  isDirty: boolean;
   isFullscreen: boolean;
   isPreviewMode: boolean;
   scriptIconMap: ScriptIconMap;
@@ -60,6 +61,7 @@ export class ToolsPanel extends React.Component<PanelProps, PanelState> {
       theme: "dark",
       excalidrawViewMode: false,
       minimized: false,
+      isDirty: false,
       isFullscreen: false,
       isPreviewMode: true,
       scriptIconMap: {},
@@ -88,6 +90,14 @@ export class ToolsPanel extends React.Component<PanelProps, PanelState> {
     });
   }
 
+  setDirty(isDirty: boolean) {
+    this.setState(()=> {
+      return {
+        isDirty,
+      };
+    });
+  }
+
   setExcalidrawViewMode(isViewModeEnabled: boolean) {
     this.setState(() => {
       return {
@@ -277,15 +287,6 @@ export class ToolsPanel extends React.Component<PanelProps, PanelState> {
                     icon={ICONS.scriptEngine}
                     view={this.props.view}
                   />
-                  <ActionButton
-                    key={"search"}
-                    title={t("SEARCH")}
-                    action={() => {
-                      search(this.props.view);
-                    }}
-                    icon={ICONS.search}
-                    view={this.props.view}
-                  />
                   <ActionButton
                     key={"release-notes"}
                     title={t("READ_RELEASE_NOTES")}
@@ -358,6 +359,15 @@ export class ToolsPanel extends React.Component<PanelProps, PanelState> {
                     }
                     view={this.props.view}
                   />
+                  <ActionButton
+                    key={"search"}
+                    title={t("SEARCH")}
+                    action={() => {
+                      search(this.props.view);
+                    }}
+                    icon={ICONS.search}
+                    view={this.props.view}
+                  />
                   <ActionButton
                     key={"ocr"}
                     title={t("RUN_OCR")}
@@ -371,6 +381,45 @@ export class ToolsPanel extends React.Component<PanelProps, PanelState> {
                     icon={ICONS.ocr}
                     view={this.props.view}
                   />
+                  <ActionButton
+                    key={"openLink"}
+                    title={t("OPEN_LINK_CLICK")}
+                    action={() => {
+                      const event = new MouseEvent("click", {
+                        ctrlKey: true,
+                        metaKey: false,
+                        shiftKey: false,
+                        altKey: false,
+                      });
+                      this.props.view.handleLinkClick(this.props.view, event);
+                    }}
+                    icon={ICONS.openLink}
+                    view={this.props.view}
+                  />
+                  <ActionButton
+                    key={"openLinkProperties"}
+                    title={t("OPEN_LINK_PROPS")}
+                    action={() => {
+                      const event = new MouseEvent("click", {
+                        ctrlKey: true,
+                        metaKey: false,
+                        shiftKey: true,
+                        altKey: true,
+                      });
+                      this.props.view.handleLinkClick(this.props.view, event);
+                    }}
+                    icon={ICONS.openLinkProperties}
+                    view={this.props.view}
+                  />
+                  <ActionButton
+                    key={"save"}
+                    title={t("FORCE_SAVE")}
+                    action={() => {
+                      this.props.view.forceSave();
+                    }}
+                    icon={saveIcon(this.state.isDirty)}
+                    view={this.props.view}
+                  />
                 </div>
               </fieldset>
               <fieldset>