New actionButton.define command

Author: zefhemel

Library/Std/Action Button.md

@@ -0,0 +1,39 @@
+#meta
+
+APIs to more conveniently define action buttons (alternative to setting them via regular [[^Library/Std/Config]]).
+
+# API
+## actionButton.define(spec)
+Keys to define:
+
+* `icon`: [feather icon](https://feathericons.com) to use for your button
+* `run`: function to invoke once the button is pushed
+* `description` (optional): description of button (appears on hover)
+* `priority` (optional): determines priority of button (the higher, the earlier in the list)
+* `mobile`: when set to `true` this button will only appear on mobile devices
+
+# Example
+```lua
+-- Defines a new button that forces your UI into read-only mode
+actionButton.define {
+  icon = "eye",
+  -- Uncomment the following line to only make this button appear 
+  -- ONLY on mobile devices:
+  --   mobile = true,
+  run = function()
+    editor.setUiOption("forcedROMode", true)
+    editor.rebuildEditorState()
+  end
+}
+```
+# Implementation
+```space-lua
+-- priority: 100
+
+actionButton = actionButton or {}
+
+function actionButton.define(spec)
+  local actionButtonConfig = config.get("actionButtons", {})
+  table.insert(actionButtonConfig, spec)
+end
+```

Library/Std/Config.md

@@ -144,6 +144,10 @@ config.define("actionButtons", {
         type = "string",
         description = "Optional description of the action button"
       },
+      priority = {
+        type = "number",
+        description = "Optional priority: the higher the earlier the button will appear in the list"
+      },
       mobile = {
         type = "boolean",
         description = "Optional boolean indicating if the action button is applicable for mobile"
@@ -262,20 +266,23 @@ config.set {
     {
       icon = "home",
       description = "Go to the index page",
+      priority = 3,
       run = function()
         editor.invokeCommand("Navigate: Home")
       end
     },
     {
       icon = "book",
       description = "Open page",
+      priority = 2,
       run = function()
         editor.invokeCommand("Navigate: Page Picker")
       end
     },
     {
       icon = "terminal",
       description = "Run command",
+      priority = 1,
       run = function()
         editor.invokeCommand "Open Command Palette"
       end,

lib/space_lua/stdlib/table.ts

@@ -8,6 +8,7 @@ import {
   LuaRuntimeError,
   LuaTable,
   type LuaValue,
+  luaValueToJS,
 } from "../runtime.ts";
 import { asyncQuickSort } from "../util.ts";
 
@@ -42,12 +43,14 @@ export const tableApi = new LuaTable({
    * @param value - The value to insert.
    */
   insert: new LuaBuiltinFunction(
-    (_sf, tbl: LuaTable | any[], posOrValue: number | any, value?: any) => {
+    (sf, tbl: LuaTable | any[], posOrValue: number | any, value?: any) => {
       if (Array.isArray(tbl)) {
+        // Since we're inserting/appending to a native JS array, we'll also convert the value to a JS value on the fly
+        // this seems like a reasonable heuristic
         if (value === undefined) {
-          tbl.push(posOrValue);
+          tbl.push(luaValueToJS(posOrValue, sf));
         } else {
-          tbl.splice(posOrValue - 1, 0, value);
+          tbl.splice(posOrValue - 1, 0, luaValueToJS(value, sf));
         }
       } else if (tbl instanceof LuaTable) {
         if (value === undefined) {

web/client.ts

@@ -445,7 +445,6 @@ export class Client {
 
           if (
             !this.ui.viewState.unsavedChanges ||
-            this.ui.viewState.uiOptions.forcedROMode ||
             this.clientConfig.readOnly
           ) {
             // No unsaved changes, or read-only mode, not gonna save

web/editor_ui.tsx

@@ -130,7 +130,10 @@ export class MainUI {
       // Need to dispatch a resize event so that the top_bar can pick it up
       globalThis.dispatchEvent(new Event("resize"));
     }, [viewState.panels]);
-
+    const actionButtons = client.config.get<ActionButton[]>(
+      "actionButtons",
+      [],
+    );
     return (
       <>
         {viewState.showPageNavigator && (
@@ -335,15 +338,20 @@ export class MainUI {
               }]
               : [],
             // Custom action buttons
-            ...client.config.get<ActionButton[]>(
-              "actionButtons",
-              [],
-            ).filter((
+            ...actionButtons.filter(( // Filter out buttons without icons (invalid) and mobile buttons when not in mobile mode
               button,
             ) =>
-              (typeof button.mobile === "undefined") ||
-              (button.mobile === viewState.isMobile)
+              button.icon && (
+                (typeof button.mobile === "undefined") ||
+                (button.mobile === viewState.isMobile)
+              )
             )
+              // Then ensure all buttons have a priority set (by default based on array index)
+              .map((button, index) => ({
+                ...button,
+                priority: button.priority ?? actionButtons.length - index,
+              }))
+              .sort((a, b) => b.priority - a.priority)
               .map((button) => {
                 const mdiIcon = (mdi as any)[kebabToCamel(button.icon)];
                 let featherIcon =
@@ -356,7 +364,7 @@ export class MainUI {
                   description: button.description || "",
                   callback: button.run || (() => {
                     client.flashNotification(
-                      "Legacy actionButton definition detected, please define a run() callback",
+                      "actionButton did not specify a run() callback",
                       "error",
                     );
                   }),
@@ -427,6 +435,7 @@ type ActionButton = {
   icon: string;
   description?: string;
   mobile?: boolean;
+  priority?: number;
   run: () => void;
 };