@threadlabs/looma 0.1.5 → 0.1.6

package/README.md

@@ -10,12 +10,13 @@ pnpm add @threadlabs/looma
 ```ts
 import { openOverlay } from "@threadlabs/looma";
 import { TopBar } from "@threadlabs/looma/vue";
-import { EditorToolbar, getDefaultEditorExtensions } from "@threadlabs/looma/vue/editor";
+import { LoomaEditor } from "@threadlabs/looma/vue/editor";
 ```
 
 Vue and Tiptap are optional to the package as a whole. `/vue` needs only Vue 3.5
 or newer. Looma's `/editor` and `/vue/editor` surfaces are Tiptap-backed and
-ship Looma's concrete extension set within those subpaths; `/vue/editor` consumers
-must also install `@tiptap/vue-3@^2.11.5` for `useEditor`, `EditorContent`, and a
-compatible Tiptap core. `/editor/ui` is the low-level UI-only boundary. See the
+ship Looma's concrete extension set within those subpaths. `/vue/editor` consumers
+must also install `@tiptap/vue-3@^2.11.5`; `LoomaEditor` owns the Tiptap lifecycle,
+formatting toolbar, slash menu, image insertion, and table editing. `/editor/ui`
+is the low-level UI-only boundary. See the
 repository getting-started guide for the full CSS and adapter setup.

package/editor/chunk-CX4QDKSV.js

@@ -0,0 +1,22 @@
+// src/table-backgrounds.ts
+var TABLE_CELL_BACKGROUND_PRESETS = {
+  none: null,
+  gray: "#f3f4f6",
+  yellow: "#fef3c7",
+  blue: "#dbeafe",
+  green: "#dcfce7",
+  red: "#fee2e2"
+};
+var TABLE_CELL_BACKGROUND_OPTIONS = [
+  { action: "background-none", label: "Default", value: TABLE_CELL_BACKGROUND_PRESETS.none, swatch: null },
+  { action: "background-gray", label: "Gray", value: TABLE_CELL_BACKGROUND_PRESETS.gray, swatch: TABLE_CELL_BACKGROUND_PRESETS.gray },
+  { action: "background-yellow", label: "Yellow", value: TABLE_CELL_BACKGROUND_PRESETS.yellow, swatch: TABLE_CELL_BACKGROUND_PRESETS.yellow },
+  { action: "background-blue", label: "Blue", value: TABLE_CELL_BACKGROUND_PRESETS.blue, swatch: TABLE_CELL_BACKGROUND_PRESETS.blue },
+  { action: "background-green", label: "Green", value: TABLE_CELL_BACKGROUND_PRESETS.green, swatch: TABLE_CELL_BACKGROUND_PRESETS.green },
+  { action: "background-red", label: "Red", value: TABLE_CELL_BACKGROUND_PRESETS.red, swatch: TABLE_CELL_BACKGROUND_PRESETS.red }
+];
+
+export {
+  TABLE_CELL_BACKGROUND_PRESETS,
+  TABLE_CELL_BACKGROUND_OPTIONS
+};

package/editor/{chunk-CWCXYQMT.js → chunk-KQQTYVRW.js}

@@ -1,3 +1,7 @@
+import {
+  TABLE_CELL_BACKGROUND_OPTIONS
+} from "./chunk-CX4QDKSV.js";
+
 // src/table-context-menu.ts
 var TAG = "ui-editor-table-context-menu";
 function dispatchTableAction(element, action) {
@@ -79,18 +83,10 @@ if (typeof HTMLElement !== "undefined") {
       this.hidden = !open;
       if (!open) return;
       const currentBackground = this.getAttribute("cell-background");
-      const backgroundActions = [
-        { action: "background-none", label: "Default", value: null, swatch: null },
-        { action: "background-gray", label: "Gray", value: "#f3f4f6", swatch: "#f3f4f6" },
-        { action: "background-yellow", label: "Yellow", value: "#fef3c7", swatch: "#fef3c7" },
-        { action: "background-blue", label: "Blue", value: "#dbeafe", swatch: "#dbeafe" },
-        { action: "background-green", label: "Green", value: "#dcfce7", swatch: "#dcfce7" },
-        { action: "background-red", label: "Red", value: "#fee2e2", swatch: "#fee2e2" }
-      ];
       const sections = [
         {
           heading: "Cell background",
-          backgrounds: backgroundActions
+          backgrounds: TABLE_CELL_BACKGROUND_OPTIONS
         },
         {
           heading: "Structure",
@@ -176,6 +172,7 @@ if (typeof HTMLElement !== "undefined") {
       return [
         "open",
         "cell-alignment",
+        "cell-background",
         "can-add-row-after",
         "can-add-column-after",
         "can-add-row-before",
@@ -252,6 +249,7 @@ if (typeof HTMLElement !== "undefined") {
         return;
       }
       const activeAlignment = this.getAlignmentAttr();
+      const currentBackground = this.getAttribute("cell-background");
       const alignmentActions = [
         { action: "align-left", label: "Left" },
         { action: "align-center", label: "Center" },
@@ -269,6 +267,13 @@ if (typeof HTMLElement !== "undefined") {
             { action: "add-column-before", label: "Add column left", can: "can-add-column-before" }
           ]
         },
+        {
+          heading: "Cells",
+          actions: [
+            { action: "merge-cells", label: "Merge selected cells", can: "can-merge-cells" },
+            { action: "split-cell", label: "Split merged cell", can: "can-split-cell" }
+          ]
+        },
         {
           heading: "Table",
           actions: [
@@ -295,14 +300,23 @@ if (typeof HTMLElement !== "undefined") {
           (action) => `<button type="button" data-action="${action.action}">${action.label}</button>`
         ).join(""),
         structuralActions.length > 0 ? "</div>" : "",
-        availableOverflowSections.length > 0 ? '<div class="ui-editor-table-toolbar__sep" aria-hidden="true"></div>' : "",
-        availableOverflowSections.length > 0 ? '<div class="ui-editor-table-toolbar__overflow">' : "",
-        availableOverflowSections.length > 0 ? `<button type="button" class="ui-editor-table-toolbar__more" data-action="toggle-overflow" aria-haspopup="menu" aria-expanded="${this.#overflowOpen ? "true" : "false"}">Table options</button>` : "",
-        availableOverflowSections.length > 0 && this.#overflowOpen ? [
+        '<div class="ui-editor-table-toolbar__sep" aria-hidden="true"></div>',
+        '<div class="ui-editor-table-toolbar__overflow">',
+        `<button type="button" class="ui-editor-table-toolbar__more" data-action="toggle-overflow" aria-haspopup="menu" aria-expanded="${this.#overflowOpen ? "true" : "false"}">Table options</button>`,
+        this.#overflowOpen ? [
           '<div class="ui-editor-table-toolbar__menu" role="menu" aria-label="More table actions">',
+          '<div class="ui-editor-table-toolbar__menu-section" role="none">',
+          '<div class="ui-editor-table-toolbar__menu-heading" role="presentation">Background</div>',
+          '<div class="ui-editor-table-toolbar__swatches" role="group" aria-label="Cell background">',
+          TABLE_CELL_BACKGROUND_OPTIONS.map((background) => {
+            const isSelected = (background.value ?? "") === (currentBackground ?? "");
+            return `<button type="button" class="ui-editor-table-toolbar__swatch-button" role="menuitemradio" aria-checked="${isSelected ? "true" : "false"}" data-action="${background.action}"${isSelected ? ' data-selected="true"' : ""}><span class="ui-editor-table-toolbar__swatch${background.swatch ? "" : " ui-editor-table-toolbar__swatch--default"}"${background.swatch ? ` style="--ui-editor-table-toolbar-swatch:${background.swatch}"` : ""}></span><span>${background.label}</span></button>`;
+          }).join(""),
+          "</div>",
+          "</div>",
           availableOverflowSections.map(
             (section) => [
-              '<div class="ui-editor-table-toolbar__menu-section" role="none">',
+              '<div class="ui-editor-table-toolbar__menu-section ui-editor-table-toolbar__menu-section--divided" role="none">',
               `<div class="ui-editor-table-toolbar__menu-heading" role="presentation">${section.heading}</div>`,
               section.actions.map((action) => {
                 const tone = "tone" in action ? action.tone : void 0;
@@ -313,7 +327,7 @@ if (typeof HTMLElement !== "undefined") {
           ).join(""),
           "</div>"
         ].join("") : "",
-        availableOverflowSections.length > 0 ? "</div>" : "",
+        "</div>",
         "</div>"
       ].join("");
     }