feat(react/ribbon): port script tab

apps/client/src/entities/fnote.ts

@@ -1024,6 +1024,10 @@ class FNote {
         return this.mime === "text/x-sqlite;schema=trilium";
     }
 
+    isTriliumScript() {
+        return this.mime.startsWith("application/javascript");
+    }
+
     /**
      * Provides note's date metadata.
      */

apps/client/src/widgets/react/Button.tsx

@@ -2,6 +2,7 @@ import type { RefObject } from "preact";
 import type { CSSProperties } from "preact/compat";
 import { useRef, useMemo } from "preact/hooks";
 import { memo } from "preact/compat";
+import { CommandNames } from "../../components/app_context";
 
 interface ButtonProps {
     name?: string;
@@ -17,9 +18,10 @@ interface ButtonProps {
     disabled?: boolean;
     size?: "normal" | "small" | "micro";
     style?: CSSProperties;
+    triggerCommand?: CommandNames;
 }
 
-const Button = memo(({ name, buttonRef: _buttonRef, className, text, onClick, keyboardShortcut, icon, primary, disabled, size, style }: ButtonProps) => {
+const Button = memo(({ name, buttonRef: _buttonRef, className, text, onClick, keyboardShortcut, icon, primary, disabled, size, style, triggerCommand }: ButtonProps) => {
     // Memoize classes array to prevent recreation
     const classes = useMemo(() => {
         const classList: string[] = ["btn"];
@@ -57,11 +59,12 @@ const Button = memo(({ name, buttonRef: _buttonRef, className, text, onClick, ke
         <button
             name={name}
             className={classes}
-            type={onClick ? "button" : "submit"}
+            type={onClick || triggerCommand ? "button" : "submit"}
             onClick={onClick}
             ref={buttonRef}
             disabled={disabled}
             style={style}
+            data-trigger-command={triggerCommand}
         >
             {icon && <span className={`bx ${icon}`}></span>}
             {text} {shortcutElements}

apps/client/src/widgets/ribbon/Ribbon.tsx

@@ -10,6 +10,7 @@ import { TabContext } from "./ribbon-interface";
 import options from "../../services/options";
 import { CommandNames } from "../../components/app_context";
 import FNote from "../../entities/fnote";
+import ScriptTab from "./ScriptTab";
 
 interface TitleContext {
     note: FNote | null | undefined;
@@ -22,6 +23,7 @@ interface TabConfiguration {
     content?: (context: TabContext) => VNode;
     show?: (context: TitleContext) => boolean;
     toggleCommand?: CommandNames;
+    activate?: boolean;
     /**
      * By default the tab content will not be rendered unless the tab is active (i.e. selected by the user). Setting to `true` will ensure that the tab is rendered even when inactive, for cases where the tab needs to be accessible at all times (e.g. for the detached editor toolbar).
      */
@@ -39,8 +41,12 @@ const TAB_CONFIGURATION = numberObjectsInPlace<TabConfiguration>([
     },
     {        
         title: ({ note }) => note?.isTriliumSqlite() ? t("script_executor.query") : t("script_executor.script"),
-        icon: "bx bx-play"
-        // ScriptExecutorWidget
+        icon: "bx bx-play",
+        content: ScriptTab,
+        activate: true,
+        show: ({ note }) => !!note &&
+            (note.isTriliumScript() || note.isTriliumSqlite()) &&
+            (note.hasLabel("executeDescription") || note.hasLabel("executeButton"))
     },
     {
         // SearchDefinitionWidget

apps/client/src/widgets/ribbon/ScriptTab.tsx

@@ -0,0 +1,28 @@
+import { t } from "../../services/i18n";
+import Button from "../react/Button";
+import { useNoteLabel } from "../react/hooks";
+import { TabContext } from "./ribbon-interface";
+
+export default function ScriptTab({ note }: TabContext) {
+    const [ executeDescription ] = useNoteLabel(note, "executeDescription");
+    const executeTitle = useNoteLabel(note, "executeTitle")[0] ||
+        (note?.isTriliumSqlite() ? t("script_executor.execute_query") : t("script_executor.execute_script"));
+
+    return (
+        <div class="script-runner-widget">
+            {executeDescription && (
+                <div class="execute-description">
+                    {executeDescription}
+                </div>
+            )}
+
+            <div style={{ display: "flex", justifyContent: "space-around"}}>
+                <Button
+                    triggerCommand="runActiveNote"
+                    className="execute-button"
+                    text={executeTitle}
+                />
+            </div>
+        </div>
+    );
+}

apps/client/src/widgets/ribbon/style.css

@@ -147,4 +147,15 @@
     opacity: 0.3;
 }
 
+/* #endregion */
+
+/* #region Script Tab */
+.script-runner-widget {
+    padding: 12px;
+    color: var(--muted-text-color);
+}
+
+.execute-description {
+    margin-bottom: 10px;
+}
 /* #endregion */

apps/client/src/widgets/ribbon_widgets/script_executor.ts

@@ -1,70 +0,0 @@
-import NoteContextAwareWidget from "../note_context_aware_widget.js";
-import keyboardActionService from "../../services/keyboard_actions.js";
-import { t } from "../../services/i18n.js";
-import type FNote from "../../entities/fnote.js";
-
-const TPL = /*html*/`
-<div class="script-runner-widget">
-    <style>
-        .script-runner-widget {
-            padding: 12px;
-            color: var(--muted-text-color);
-        }
-
-        .execute-description {
-            margin-bottom: 10px;
-        }
-    </style>
-
-    <div class="execute-description"></div>
-
-    <div style="display: flex; justify-content: space-around">
-        <button data-trigger-command="runActiveNote" class="execute-button btn btn-sm"></button>
-    </div>
-</div>`;
-
-export default class ScriptExecutorWidget extends NoteContextAwareWidget {
-
-    private $executeButton!: JQuery<HTMLElement>;
-    private $executeDescription!: JQuery<HTMLElement>;
-
-    isEnabled() {
-        return (
-            super.isEnabled() &&
-            this.note &&
-            (this.note.mime.startsWith("application/javascript") || this.isTriliumSqlite()) &&
-            (this.note.hasLabel("executeDescription") || this.note.hasLabel("executeButton"))
-        );
-    }
-
-    getTitle() {
-        return {
-            show: this.isEnabled(),
-            activate: true
-        };
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.contentSized();
-
-        this.$executeButton = this.$widget.find(".execute-button");
-        this.$executeDescription = this.$widget.find(".execute-description");
-    }
-
-    async refreshWithNote(note: FNote) {
-        const executeTitle = note.getLabelValue("executeButton") || (this.isTriliumSqlite() ? t("script_executor.execute_query") : t("script_executor.execute_script"));
-
-        this.$executeButton.text(executeTitle);
-        this.$executeButton.attr("title", executeTitle);
-        keyboardActionService.updateDisplayedShortcuts(this.$widget);
-
-        const executeDescription = note.getLabelValue("executeDescription");
-
-        if (executeDescription) {
-            this.$executeDescription.show().html(executeDescription);
-        } else {
-            this.$executeDescription.empty().hide();
-        }
-    }
-}