@threadlabs/looma 0.17.0 → 0.17.2

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

@@ -0,0 +1,29 @@
+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>;

package/vue/editor/index.js

@@ -1,10 +1,12 @@
-import { defineComponent, h, nextTick, onBeforeUnmount, onMounted, reactive, ref, useId, watch } from "vue";
+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 { EditorInsertTableGrid, EditorMentionMenu, EditorSlashMenu, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, IconButton, Menu, MenuItem, Popover, Tooltip } from "@threadlabs/looma/vue";
-import { BubbleMenu, EditorContent, useEditor } from "@tiptap/vue-3";
+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 { 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. */
@@ -178,6 +180,69 @@ 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",
@@ -518,7 +583,8 @@ var LoomaEditor = defineComponent({
 					placeholder: props.placeholder,
 					mention: mentionExtension ?? false,
 					disableHighlight: props.disableHighlight,
-					codeLanguages: props.codeLanguages
+					codeLanguages: props.codeLanguages,
+					codeBlockNodeView: VueNodeViewRenderer(createCodeBlockView(props.codeLanguages, () => props.editable))
 				}),
 				imageDelivery.extension,
 				slashExtension,

package/vue/index.js

@@ -19,6 +19,7 @@ import { t as UiContextMenu_default } from "./chunks/UiContextMenu.js";
 import { t as UiCover_default } from "./chunks/UiCover.js";
 import { t as UiDescriptionItem_default } from "./chunks/UiDescriptionItem.js";
 import { t as UiDescriptionList_default } from "./chunks/UiDescriptionList.js";
+import { t as UiScrollArea_default } from "./chunks/UiScrollArea.js";
 import { t as UiDialog_default } from "./chunks/UiDialog.js";
 import { t as UiDisclosure_default } from "./chunks/UiDisclosure.js";
 import { t as UiEditable_default } from "./chunks/UiEditable.js";
@@ -51,7 +52,6 @@ import { t as UiPopover_default } from "./chunks/UiPopover.js";
 import { t as UiRadio_default } from "./chunks/UiRadio.js";
 import { t as UiRadioGroup_default } from "./chunks/UiRadioGroup.js";
 import { t as UiReel_default } from "./chunks/UiReel.js";
-import { t as UiScrollArea_default } from "./chunks/UiScrollArea.js";
 import { t as UiSearchResultRow_default } from "./chunks/UiSearchResultRow.js";
 import { t as UiSearchShell_default } from "./chunks/UiSearchShell.js";
 import { t as UiSection_default } from "./chunks/UiSection.js";