@threadlabs/looma 0.17.1 → 0.17.2

package/editor/chunks/extensions.js

@@ -9200,6 +9200,12 @@ 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 StoredOnlyHighlight = Highlight.extend({
 	parseHTML: () => [],
 	addKeyboardShortcuts: () => ({}),
@@ -9243,9 +9249,13 @@ function getLoomaTableExtensions() {
 * can be replaced without coupling UI chrome to an application directory.
 * Use with `new Editor({ extensions: getDefaultEditorExtensions(), ... })` or a
 * framework's Tiptap editor hook.
+* @contract Code blocks accept three backticks in an empty paragraph as an
+* immediate typing shortcut. An optional node view changes presentation only;
+* the code and explicit language stay in the document schema.
 */
 function getDefaultEditorExtensions(options = {}) {
-	const { placeholder = "Type “/” for commands, or start writing…", linkOpenOnClick = false, imageInline = false, mention = createLoomaMentionExtension(), disableHighlight = false, codeLanguages } = options;
+	const { placeholder = "Type “/” for commands, or start writing…", linkOpenOnClick = false, imageInline = false, mention = createLoomaMentionExtension(), disableHighlight = false, codeLanguages, codeBlockNodeView } = options;
+	const codeBlock = LoomaCodeBlock.configure({ lowlight: createLowlight(codeLanguages) });
 	return [
 		Document,
 		Paragraph,
@@ -9283,7 +9293,7 @@ function getDefaultEditorExtensions(options = {}) {
 		(disableHighlight ? StoredOnlyHighlight : Highlight).configure({ multicolor: false }),
 		Code,
 		LoomaSmartPaste,
-		CodeBlockLowlight.configure({ lowlight: createLowlight(codeLanguages) }),
+		codeBlockNodeView ? codeBlock.extend({ addNodeView: () => codeBlockNodeView }) : codeBlock,
 		Typography,
 		Placeholder.configure({
 			placeholder: ({ node }) => node.type.name === "paragraph" ? placeholder : "",

package/editor/extensions/preset.d.ts

@@ -2,7 +2,7 @@
  * Default Tiptap extension preset for Looma editor.
  * Uses the Vanilla JS Tiptap API; apps provide @tiptap/core and Looma ships the preset extensions.
  */
-import { type AnyExtension } from "@tiptap/core";
+import { type AnyExtension, type NodeViewRenderer } from "@tiptap/core";
 import { createLowlight } from "lowlight";
 /** Grammars supplied by the host; importing a language remains the host's choice. */
 export type LoomaCodeLanguages = NonNullable<Parameters<typeof createLowlight>[0]>;
@@ -29,6 +29,8 @@ export interface DefaultEditorExtensionsOptions {
     disableHighlight?: boolean;
     /** Code block grammars to register. None are loaded by default. */
     codeLanguages?: LoomaCodeLanguages;
+    /** Optional presentation for a code block; the Vue editor supplies its language control. */
+    codeBlockNodeView?: NodeViewRenderer;
 }
 /**
  * Complete Looma table schema as one Tiptap extension.
@@ -50,5 +52,8 @@ export declare function getLoomaTableExtensions(): AnyExtension[];
  * can be replaced without coupling UI chrome to an application directory.
  * Use with `new Editor({ extensions: getDefaultEditorExtensions(), ... })` or a
  * framework's Tiptap editor hook.
+ * @contract Code blocks accept three backticks in an empty paragraph as an
+ * immediate typing shortcut. An optional node view changes presentation only;
+ * the code and explicit language stay in the document schema.
  */
 export declare function getDefaultEditorExtensions(options?: DefaultEditorExtensionsOptions): AnyExtension[];

package/package.json

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

package/vue/components.css

@@ -8661,6 +8661,20 @@ 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);
+}
+
+.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;
+  font-family: var(--ui-font-family-sans, sans-serif);
+}
+
 .looma-editor .ProseMirror code {
   padding: 0.1em 0.3em;
   border-radius: var(--ui-radius-sm);

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,