@threadlabs/looma 0.18.2 → 0.18.4

package/editor/chunks/extensions.js

@@ -9205,12 +9205,28 @@ function setActiveTableCellBackground(editor, backgroundColor) {
 * Default Tiptap extension preset for Looma editor.
 * Uses the Vanilla JS Tiptap API; apps provide @tiptap/core and Looma ships the preset extensions.
 */
-var LoomaCodeBlock = CodeBlockLowlight.extend({ addInputRules() {
-	return [...this.parent?.() ?? [], textblockTypeInputRule({
-		find: /^```$/,
-		type: this.type
-	})];
-} });
+var LoomaCodeBlock = CodeBlockLowlight.extend({
+	renderHTML({ node, HTMLAttributes }) {
+		return [
+			"pre",
+			mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { spellcheck: "false" }),
+			[
+				"code",
+				{
+					class: node.attrs.language ? `${this.options.languageClassPrefix}${node.attrs.language}` : null,
+					spellcheck: "false"
+				},
+				0
+			]
+		];
+	},
+	addInputRules() {
+		return [...this.parent?.() ?? [], textblockTypeInputRule({
+			find: /^```$/,
+			type: this.type
+		})];
+	}
+});
 var StoredOnlyHighlight = Highlight.extend({
 	parseHTML: () => [],
 	addKeyboardShortcuts: () => ({}),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.18.2",
+  "version": "0.18.4",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/vue/editor/LoomaEditor.d.ts

@@ -21,10 +21,11 @@ export interface LoomaImageUploadResult extends Omit<LoomaImageDescriptor, "src"
  */
 export type LoomaImageUploader = (file: File) => Promise<string | LoomaImageUploadResult>;
 /**
- * Chooses whether formatting controls follow a selection or occupy persistent
- * editor chrome; it does not alter document commands or stored content.
+ * Chooses whether formatting controls follow a selection, occupy persistent
+ * editor chrome, or open from an app-owned button (`popover`, with a text-only
+ * bubble for selections); it does not alter document commands or stored content.
  */
-export type LoomaEditorToolbarMode = "bubble" | "sticky";
+export type LoomaEditorToolbarMode = "bubble" | "sticky" | "popover";
 /**
  * Turnkey Vue editor that composes Looma's framework-neutral Tiptap extensions
  * with declarative menus, image delivery, and table interaction chrome.
@@ -99,6 +100,19 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
         type: PropType<LoomaEditorToolbarMode>;
         default: string;
     };
+    /**
+     * In `popover` mode, the ID of the app's button that toggles the full toolbar and anchors it.
+     * The button needs no click handler of its own.
+     */
+    toolbarTriggerId: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** In `popover` mode, whether the full toolbar is open. Use with `v-model:toolbar-open`. */
+    toolbarOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /**
      * Authors can't highlight: no toolbar button, shortcut, `==text==` rule, or `<mark>` paste.
      * Highlights already in the document still show. Read once, when the editor is created.
@@ -111,6 +125,7 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
     [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (_value: JSONContent) => true;
+    "update:toolbarOpen": (_value: boolean) => true;
     update: (_value: JSONContent) => true;
     ready: (_editor: Editor) => true;
     uploadError: (_error: unknown, _file: File) => true;
@@ -178,6 +193,19 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
         type: PropType<LoomaEditorToolbarMode>;
         default: string;
     };
+    /**
+     * In `popover` mode, the ID of the app's button that toggles the full toolbar and anchors it.
+     * The button needs no click handler of its own.
+     */
+    toolbarTriggerId: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** In `popover` mode, whether the full toolbar is open. Use with `v-model:toolbar-open`. */
+    toolbarOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /**
      * Authors can't highlight: no toolbar button, shortcut, `==text==` rule, or `<mark>` paste.
      * Highlights already in the document still show. Read once, when the editor is created.
@@ -188,6 +216,7 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
     };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((_value: JSONContent) => any) | undefined;
+    "onUpdate:toolbarOpen"?: ((_value: boolean) => any) | undefined;
     onUpdate?: ((_value: JSONContent) => any) | undefined;
     onReady?: ((_editor: Editor) => any) | undefined;
     onUploadError?: ((_error: unknown, _file: File) => any) | undefined;
@@ -207,4 +236,6 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
     uploadImage: LoomaImageUploader | undefined;
     resolveImageAttributes: LoomaImageAttributeResolver | undefined;
     toolbarMode: LoomaEditorToolbarMode;
+    toolbarTriggerId: string;
+    toolbarOpen: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/vue/editor/index.js

@@ -331,6 +331,19 @@ var LoomaEditor = defineComponent({
 			default: "bubble"
 		},
 		/**
+		* In `popover` mode, the ID of the app's button that toggles the full toolbar and anchors it.
+		* The button needs no click handler of its own.
+		*/
+		toolbarTriggerId: {
+			type: String,
+			default: ""
+		},
+		/** In `popover` mode, whether the full toolbar is open. Use with `v-model:toolbar-open`. */
+		toolbarOpen: {
+			type: Boolean,
+			default: false
+		},
+		/**
 		* Authors can't highlight: no toolbar button, shortcut, `==text==` rule, or `<mark>` paste.
 		* Highlights already in the document still show. Read once, when the editor is created.
 		*/
@@ -341,6 +354,7 @@ var LoomaEditor = defineComponent({
 	},
 	emits: {
 		"update:modelValue": (_value) => true,
+		"update:toolbarOpen": (_value) => true,
 		update: (_value) => true,
 		ready: (_editor) => true,
 		uploadError: (_error, _file) => true,
@@ -1153,14 +1167,17 @@ var LoomaEditor = defineComponent({
 				onClick: run
 			}, () => loomaIcon(icon));
 		};
-		const renderToolbar = (instance, floating = true) => {
-			const buttons = [
+		const renderToolbar = (instance, floating = true, textOnly = false) => {
+			const textButtons = [
 				commandButton("Bold", "bold", instance.isActive("bold"), !instance.can().toggleBold(), () => instance.chain().focus().toggleBold().run()),
 				commandButton("Italic", "italic", instance.isActive("italic"), !instance.can().toggleItalic(), () => instance.chain().focus().toggleItalic().run()),
 				commandButton("Underline", "underline", instance.isActive("underline"), !instance.can().toggleUnderline(), () => instance.chain().focus().toggleUnderline().run()),
 				commandButton("Strike", "strikethrough", instance.isActive("strike"), !instance.can().toggleStrike(), () => instance.chain().focus().toggleStrike().run()),
 				...authorHighlight ? [commandButton("Highlight", "highlighter", instance.isActive("highlight"), !instance.can().toggleHighlight(), () => instance.chain().focus().toggleHighlight().run())] : [],
-				commandButton("Inline code", "code-xml", instance.isActive("code"), !instance.can().toggleCode(), () => instance.chain().focus().toggleCode().run()),
+				commandButton("Inline code", "code-xml", instance.isActive("code"), !instance.can().toggleCode(), () => instance.chain().focus().toggleCode().run())
+			];
+			const buttons = textOnly ? textButtons : [
+				...textButtons,
 				h(IconButton, {
 					id: linkAnchorId,
 					class: "looma-editor__toolbar-button",
@@ -1313,7 +1330,7 @@ var LoomaEditor = defineComponent({
 				onDblclick: onImageDoubleClick,
 				onKeydown: onImageKeyDown
 			}, [
-				instance && props.editable && !mobile.value && props.toolbarMode === "bubble" ? h(BubbleMenu, {
+				instance && props.editable && !mobile.value && (props.toolbarMode === "bubble" || props.toolbarMode === "popover" && !props.toolbarOpen) ? h(BubbleMenu, {
 					editor: instance,
 					pluginKey: "looma-text-formatting-menu",
 					shouldShow: ({ editor: menuEditor, from, to }) => shouldShowTextFormattingToolbar(menuEditor, from, to),
@@ -1323,7 +1340,17 @@ var LoomaEditor = defineComponent({
 						maxWidth: "none",
 						placement: "top"
 					}
-				}, { default: () => renderToolbar(instance) }) : null,
+				}, { default: () => renderToolbar(instance, true, props.toolbarMode === "popover") }) : null,
+				instance && props.editable && !mobile.value && props.toolbarMode === "popover" && props.toolbarTriggerId ? h(Popover, {
+					class: "looma-editor__formatting-popover",
+					role: "region",
+					"aria-label": "Formatting tools",
+					open: props.toolbarOpen,
+					for: props.toolbarTriggerId,
+					placement: "bottom-end",
+					onOpen: () => emit("update:toolbarOpen", true),
+					onClose: () => emit("update:toolbarOpen", false)
+				}, () => [renderToolbar(instance, false)]) : null,
 				instance && props.editable && !mobile.value && props.toolbarMode === "sticky" ? h("div", {
 					class: "looma-editor__sticky-toolbar-shell",
 					role: "toolbar",