@threadlabs/looma 0.18.1 → 0.18.3

package/package.json

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

package/vue/components.css

@@ -8662,17 +8662,18 @@ html[data-ui-input-modality="touch"]
   font-size: var(--ui-font-size-sm);
 }
 
-.looma-editor .ProseMirror pre.looma-editor__code-block--has-language {
-  position: relative;
-  padding-block-start: calc(var(--ui-space-4) + 2rem);
-}
-
+/* Same surface as the floating formatting and table toolbars. */
 .looma-editor__code-language {
-  position: absolute;
-  inset-block-start: var(--ui-space-2);
-  inset-inline-end: var(--ui-space-2);
-  inline-size: min(8.5rem, calc(100% - 2 * var(--ui-space-2)));
-  z-index: 1;
+  position: fixed;
+  z-index: var(--ui-editor-popover-z-index, 300);
+  box-sizing: content-box;
+  inline-size: 8.5rem;
+  padding: var(--ui-editor-toolbar-floating-padding, 4px);
+  background: color-mix(in srgb, var(--ui-editor-toolbar-surface, var(--ui-surface)) 96%, transparent);
+  border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border-strong));
+  border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg));
+  box-shadow: var(--ui-editor-toolbar-floating-shadow, var(--ui-shadow-lg, 0 10px 24px rgb(0 0 0 / 0.12)));
+  backdrop-filter: blur(10px);
   font-family: var(--ui-font-family-sans, sans-serif);
 }
 

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

@@ -1,12 +1,12 @@
 import { computed, defineComponent, h, nextTick, onBeforeUnmount, onMounted, reactive, ref, useId, watch } from "vue";
 import { DEFAULT_MENTION_RESULT_LIMIT, LOOMA_CHIP_COLORS, LOOMA_ICONS, createLoomaMentionExtension, createLoomaSlashCommandExtension, getActiveTableUiState, getDefaultEditorExtensions, getVisualViewportRect, handleTableAction, handleTableOverlayAction, measureTableOverlayGeometry, normalizeActiveTableColumnWidths, normalizeLoomaChipColor, resolveTableCellAt, shouldShowTextFormattingToolbar } from "@threadlabs/looma/editor";
 import { Combobox, EditorInsertTableGrid, EditorMentionMenu, EditorSlashMenu, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, IconButton, Menu, MenuItem, Popover, Tooltip } from "@threadlabs/looma/vue";
-import { BubbleMenu, EditorContent, NodeViewContent, NodeViewWrapper, VueNodeViewRenderer, nodeViewProps, useEditor } from "@tiptap/vue-3";
+import { BubbleMenu, EditorContent, useEditor } from "@tiptap/vue-3";
+import { closeHistory } from "@tiptap/pm/history";
+import { createLowlight } from "lowlight";
 import { Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
 import { Extension } from "@tiptap/core";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
-import { closeHistory } from "@tiptap/pm/history";
-import { createLowlight } from "lowlight";
 export * from "@threadlabs/looma/editor";
 //#region src/vue/editor/primitives.ts
 /** Each Vue editor component's element tag, for tooling that enumerates them. */
@@ -180,69 +180,6 @@ function imageUploadContent(image) {
 	};
 }
 //#endregion
-//#region src/vue/editor/code-block-view.ts
-/** Per-block language control; the document stores only the code and explicit language. */
-function createCodeBlockView(languages, isEditable) {
-	const lowlight = createLowlight(languages);
-	const names = Object.keys(languages).sort();
-	return defineComponent({
-		name: "LoomaCodeBlockView",
-		props: nodeViewProps,
-		setup(props) {
-			const selected = computed(() => {
-				const language = props.node.attrs.language;
-				return typeof language === "string" && language ? language : "auto";
-			});
-			const detected = computed(() => {
-				if (!props.node.textContent.trim()) return null;
-				const language = lowlight.highlightAuto(props.node.textContent).data?.language;
-				return typeof language === "string" ? language : null;
-			});
-			const options = computed(() => [
-				{
-					id: "auto",
-					value: "auto",
-					label: detected.value ? `Auto (${detected.value.toUpperCase()})` : "Auto"
-				},
-				...selected.value !== "auto" && !Object.hasOwn(languages, selected.value) ? [{
-					id: selected.value,
-					value: selected.value,
-					label: `${selected.value.toUpperCase()} (unavailable)`
-				}] : [],
-				...names.map((name) => ({
-					id: name,
-					value: name,
-					label: name.toUpperCase()
-				}))
-			]);
-			const choose = (detail) => {
-				if (detail.kind !== "selection" || !detail.value) return;
-				const language = detail.value === "auto" ? null : detail.value;
-				if (language !== null && !Object.hasOwn(languages, language)) return;
-				props.editor.view.dispatch(closeHistory(props.editor.state.tr));
-				props.updateAttributes({ language });
-				props.editor.view.dispatch(closeHistory(props.editor.state.tr));
-			};
-			const showControl = () => names.length > 0 && isEditable() && props.editor.isEditable;
-			return () => h(NodeViewWrapper, {
-				as: "pre",
-				class: showControl() ? "looma-editor__code-block--has-language" : void 0
-			}, () => [showControl() ? h("div", {
-				class: "looma-editor__code-language",
-				contenteditable: "false"
-			}, [h(Combobox, {
-				label: "Code language",
-				labelVisibility: "sr-only",
-				size: "sm",
-				disclosure: true,
-				filter: "label",
-				value: selected.value,
-				onValueChange: choose
-			}, () => options.value.map((option) => h("option", { value: option.value }, option.label)))]) : null, h(NodeViewContent, { as: "code" })]);
-		}
-	});
-}
-//#endregion
 //#region src/vue/editor/LoomaEditor.ts
 var EMPTY_DOCUMENT = {
 	type: "doc",
@@ -394,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.
 		*/
@@ -404,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,
@@ -459,6 +410,7 @@ var LoomaEditor = defineComponent({
 		const tableOverlayShell = ref(null);
 		const tableMenuShell = ref(null);
 		const mobileToolbarShell = ref(null);
+		const codeLanguageShell = ref(null);
 		const dragOver = ref(false);
 		const uploading = ref(false);
 		const failedUpload = ref(null);
@@ -583,8 +535,7 @@ var LoomaEditor = defineComponent({
 					placeholder: props.placeholder,
 					mention: mentionExtension ?? false,
 					disableHighlight: props.disableHighlight,
-					codeLanguages: props.codeLanguages,
-					codeBlockNodeView: VueNodeViewRenderer(createCodeBlockView(props.codeLanguages, () => props.editable))
+					codeLanguages: props.codeLanguages
 				}),
 				imageDelivery.extension,
 				slashExtension,
@@ -794,6 +745,77 @@ var LoomaEditor = defineComponent({
 				};
 			});
 		};
+		const codeLanguageNames = Object.keys(props.codeLanguages).sort();
+		const codeLowlight = createLowlight(props.codeLanguages);
+		const codeUi = reactive({
+			open: false,
+			pos: 0,
+			language: "auto",
+			text: "",
+			style: {}
+		});
+		let codeBlurTimer;
+		const updateCodeUi = (focusSettled = false) => {
+			const instance = editor.value?.isDestroyed ? void 0 : editor.value;
+			const selection = instance?.state.selection;
+			const block = selection?.$from.parent;
+			const dom = instance && block?.type.name === "codeBlock" && selection.$from.sameParent(selection.$to) ? instance.view.nodeDOM(selection.$from.before()) : null;
+			if (!instance || !props.editable || !codeLanguageNames.length || !(dom instanceof HTMLElement)) {
+				codeUi.open = false;
+				return;
+			}
+			if (!instance.isFocused && !codeLanguageShell.value?.contains(document.activeElement)) {
+				clearTimeout(codeBlurTimer);
+				if (codeUi.open && !focusSettled) codeBlurTimer = setTimeout(() => updateCodeUi(true), 0);
+				else codeUi.open = false;
+				return;
+			}
+			const rect = dom.getBoundingClientRect();
+			const above = rect.top > 76;
+			codeUi.open = true;
+			codeUi.pos = selection.$from.before();
+			codeUi.language = typeof block.attrs.language === "string" && block.attrs.language ? block.attrs.language : "auto";
+			codeUi.text = block.textContent;
+			codeUi.style = {
+				top: `${above ? rect.top - 8 : rect.bottom + 8}px`,
+				left: `${rect.left + rect.width / 2}px`,
+				transform: `translate(-50%, ${above ? "-100%" : "0"})`
+			};
+		};
+		const codeLanguageOptions = computed(() => {
+			const detected = codeUi.open && codeUi.text.trim() ? codeLowlight.highlightAuto(codeUi.text).data?.language : null;
+			return [
+				{
+					value: "auto",
+					label: typeof detected === "string" ? `Auto (${detected.toUpperCase()})` : "Auto"
+				},
+				...codeUi.language !== "auto" && !Object.hasOwn(props.codeLanguages, codeUi.language) ? [{
+					value: codeUi.language,
+					label: `${codeUi.language.toUpperCase()} (unavailable)`
+				}] : [],
+				...codeLanguageNames.map((name) => ({
+					value: name,
+					label: name.toUpperCase()
+				}))
+			];
+		});
+		const chooseCodeLanguage = (detail) => {
+			const instance = editor.value;
+			if (!instance || detail.kind !== "selection" || !detail.value) return;
+			const language = detail.value === "auto" ? null : detail.value;
+			if (language !== null && !Object.hasOwn(props.codeLanguages, language)) return;
+			const node = instance.state.doc.nodeAt(codeUi.pos);
+			if (node?.type.name !== "codeBlock") return;
+			instance.view.dispatch(closeHistory(instance.state.tr));
+			instance.view.dispatch(instance.state.tr.setNodeMarkup(codeUi.pos, void 0, {
+				...node.attrs,
+				language
+			}));
+			instance.view.dispatch(closeHistory(instance.state.tr));
+		};
+		const onCodeTransaction = () => updateCodeUi();
+		watch(() => props.editable, () => nextTick(onCodeTransaction));
+		onBeforeUnmount(() => clearTimeout(codeBlurTimer));
 		const updateTableUi = () => {
 			const instance = editor.value;
 			if (!instance || !props.editable || !instance.isFocused && !tableInteractionActive && !hoveredTableCell) {
@@ -840,10 +862,12 @@ var LoomaEditor = defineComponent({
 		const onEditorFocus = () => {
 			editorFocused.value = true;
 			updateTableUi();
+			updateCodeUi();
 			updateMobileViewport();
 		};
 		const onEditorBlur = () => {
 			updateTableUi();
+			updateCodeUi();
 			setTimeout(() => {
 				if (!tableInteractionActive && !editor.value?.isFocused) editorFocused.value = false;
 			}, 0);
@@ -852,6 +876,7 @@ var LoomaEditor = defineComponent({
 			if (!instance) return;
 			instance.on("selectionUpdate", updateTableUi);
 			instance.on("transaction", updateTableUi);
+			instance.on("transaction", onCodeTransaction);
 			instance.on("focus", onEditorFocus);
 			instance.on("blur", onEditorBlur);
 			nextTick(updateTableUi);
@@ -860,6 +885,7 @@ var LoomaEditor = defineComponent({
 			if (!instance) return;
 			instance.off("selectionUpdate", updateTableUi);
 			instance.off("transaction", updateTableUi);
+			instance.off("transaction", onCodeTransaction);
 			instance.off("focus", onEditorFocus);
 			instance.off("blur", onEditorBlur);
 		};
@@ -870,6 +896,7 @@ var LoomaEditor = defineComponent({
 		const onViewportChange = () => {
 			updateMobileViewport();
 			updateTableUi();
+			updateCodeUi();
 			tableUi.menuOpen = false;
 		};
 		const onDocumentPointerDown = (event) => {
@@ -1140,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",
@@ -1300,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),
@@ -1310,13 +1340,37 @@ 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",
 					"aria-label": "Editor tools"
 				}, [renderToolbar(instance, false)]) : null,
 				instance ? h(EditorContent, { editor: instance }) : null,
+				codeUi.open ? h("div", {
+					ref: codeLanguageShell,
+					class: "looma-editor__code-language",
+					style: codeUi.style,
+					onFocusout: () => updateCodeUi()
+				}, [h(Combobox, {
+					label: "Code language",
+					labelVisibility: "sr-only",
+					size: "sm",
+					disclosure: true,
+					filter: "label",
+					value: codeUi.language,
+					onValueChange: chooseCodeLanguage
+				}, () => codeLanguageOptions.value.map((option) => h("option", { value: option.value }, option.label)))]) : null,
 				instance && props.editable && mobile.value && editorFocused.value ? h("div", {
 					ref: mobileToolbarShell,
 					class: "looma-editor__mobile-toolbar-shell",

package/vue/editor/code-block-view.d.ts

@@ -1,29 +0,0 @@
-import type { LoomaCodeLanguages } from "@threadlabs/looma/editor";
-/** Per-block language control; the document stores only the code and explicit language. */
-export declare function createCodeBlockView(languages: LoomaCodeLanguages, isEditable: () => boolean): import("vue").DefineComponent<{
-    decorations: readonly import("@tiptap/core").DecorationWithType[];
-    selected: boolean;
-    updateAttributes: (attributes: Record<string, any>) => void;
-    deleteNode: () => void;
-    node: Parameters<import("@tiptap/pm/view").NodeViewConstructor>[0];
-    view: Parameters<import("@tiptap/pm/view").NodeViewConstructor>[1];
-    getPos: () => number;
-    innerDecorations: Parameters<import("@tiptap/pm/view").NodeViewConstructor>[4];
-    editor: import("@tiptap/core").Editor;
-    extension: import("@tiptap/core").Node;
-    HTMLAttributes: Record<string, any>;
-}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
-    decorations: readonly import("@tiptap/core").DecorationWithType[];
-    selected: boolean;
-    updateAttributes: (attributes: Record<string, any>) => void;
-    deleteNode: () => void;
-    node: Parameters<import("@tiptap/pm/view").NodeViewConstructor>[0];
-    view: Parameters<import("@tiptap/pm/view").NodeViewConstructor>[1];
-    getPos: () => number;
-    innerDecorations: Parameters<import("@tiptap/pm/view").NodeViewConstructor>[4];
-    editor: import("@tiptap/core").Editor;
-    extension: import("@tiptap/core").Node;
-    HTMLAttributes: Record<string, any>;
-}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;