@threadlabs/looma 0.18.0 → 0.18.2

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",
@@ -459,6 +396,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 +521,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 +731,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 +848,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 +862,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 +871,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 +882,7 @@ var LoomaEditor = defineComponent({
 		const onViewportChange = () => {
 			updateMobileViewport();
 			updateTableUi();
+			updateCodeUi();
 			tableUi.menuOpen = false;
 		};
 		const onDocumentPointerDown = (event) => {
@@ -1317,6 +1330,20 @@ var LoomaEditor = defineComponent({
 					"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>;