@threadlabs/looma 0.26.14 → 0.26.15

package/editor/chunks/extensions.js

@@ -3,7 +3,7 @@ import { Extension, Mark, Node as Node$1, callOrReturn, canInsertNode, combineTr
 import { NodeSelection, Plugin, PluginKey, Selection, TextSelection } from "@tiptap/pm/state";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
 import { DOMParser, DOMSerializer, Fragment, Node as Node$2, Slice } from "@tiptap/pm/model";
-import { history, redo, undo } from "@tiptap/pm/history";
+import { closeHistory, history, redo, undo } from "@tiptap/pm/history";
 import { dropCursor } from "@tiptap/pm/dropcursor";
 import { gapCursor } from "@tiptap/pm/gapcursor";
 import { createLowlight } from "lowlight";
@@ -662,6 +662,50 @@ var LoomaTableOfContents = Node$1.create({
 	}
 });
 //#endregion
+//#region src/editor/extensions/input-rule-history.ts
+/**
+* Keep the literal trigger in typing history before converting it. Tiptap's
+* usual input rule consumes the final character, so simply closing history
+* would restore an incomplete Markdown delimiter on Undo.
+* @invariant Conversion and subsequent typing are separate history events.
+* @lifecycle Tiptap clears its undoable input rule on typing or caret movement.
+*/
+var LoomaInputRuleHistory = Extension.create({
+	name: "loomaInputRuleHistory",
+	priority: 50,
+	onBeforeCreate() {
+		const props = this.editor.options.editorProps;
+		this.editor.setOptions({ editorProps: {
+			...props,
+			handleTextInput(view, from, to, text, defaultTransaction) {
+				if (props.handleTextInput?.call(props, view, from, to, text, defaultTransaction)) return true;
+				if (view.composing) return false;
+				const rules = view.state.plugins.find((plugin) => plugin.spec.isInputRules);
+				if (!rules?.props.handleTextInput) return false;
+				view.dispatch((defaultTransaction?.() ?? view.state.tr.insertText(text, from, to)).scrollIntoView());
+				const position = view.state.selection.from;
+				rules.props.handleTextInput.call(rules, view, position, position, "", defaultTransaction);
+				return true;
+			}
+		} });
+	},
+	addKeyboardShortcuts() {
+		return { Escape: () => this.editor.commands.undoInputRule() };
+	},
+	addProseMirrorPlugins() {
+		return [new Plugin({
+			filterTransaction(tr, state) {
+				if (state.plugins.some((plugin) => plugin.spec.isInputRules && tr.getMeta(plugin))) closeHistory(tr);
+				return true;
+			},
+			appendTransaction(transactions, _old, state) {
+				if (transactions.some((tr) => state.plugins.some((plugin) => plugin.spec.isInputRules && tr.getMeta(plugin)))) return closeHistory(state.tr);
+				return null;
+			}
+		})];
+	}
+});
+//#endregion
 //#region ../../node_modules/.pnpm/@tiptap+extension-document@2.27.2_@tiptap+core@2.27.2_@tiptap+pm@2.27.2_/node_modules/@tiptap/extension-document/dist/index.js
 /**
 * The default document node which represents the top level node of the editor.
@@ -9822,6 +9866,7 @@ function getDefaultEditorExtensions(options = {}) {
 		dividerNodeView ? HorizontalRule.extend({ addNodeView: () => dividerNodeView }) : HorizontalRule,
 		HardBreak,
 		History,
+		LoomaInputRuleHistory,
 		Dropcursor,
 		Gapcursor,
 		Link.configure({

package/editor/extensions/input-rule-history.d.ts

@@ -0,0 +1,9 @@
+import { Extension } from "@tiptap/core";
+/**
+ * Keep the literal trigger in typing history before converting it. Tiptap's
+ * usual input rule consumes the final character, so simply closing history
+ * would restore an incomplete Markdown delimiter on Undo.
+ * @invariant Conversion and subsequent typing are separate history events.
+ * @lifecycle Tiptap clears its undoable input rule on typing or caret movement.
+ */
+export declare const LoomaInputRuleHistory: Extension<any, any>;

package/package.json

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

package/vue/editor/LoomaEditor.d.ts

@@ -370,13 +370,13 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
 }>, {
     label: string;
     placeholder: string;
+    extensions: AnyExtension[];
+    editable: boolean;
     linkBaseUrl: string;
     disableHighlight: boolean;
     codeLanguages: Readonly<Record<string, import("highlight.js").LanguageFn>> | null;
     modelValue: JSONContent;
-    editable: boolean;
     contentDensity: "compact" | "comfortable";
-    extensions: AnyExtension[];
     slashCommands: LoomaEditorSlashCommands;
     mentionItems: LoomaMentionItem[];
     mentionProvider: LoomaMentionProvider | undefined;

package/vue/editor/compact/index.d.ts

@@ -64,9 +64,9 @@ export declare const LoomaCompactEditor: import("vue").DefineComponent<import("v
 }>, {
     label: string;
     id: string;
-    modelValue: JSONContent;
-    editable: boolean;
     extensions: AnyExtension[];
+    editable: boolean;
+    modelValue: JSONContent;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 /** Renders basic compact JSON as escaped Vue nodes, including during SSR. */
 export declare const LoomaCompactContent: import("vue").DefineComponent<import("vue").ExtractPropTypes<{

package/vue/editor/compact/index.js

@@ -1,7 +1,8 @@
 import { defineComponent, h, onBeforeUnmount, onMounted, shallowRef, watch } from "vue";
 import { Extension, Mark, Node, markInputRule, markPasteRule, mergeAttributes } from "@tiptap/core";
 import { Editor, EditorContent } from "@tiptap/vue-3";
-import { history, redo, undo } from "@tiptap/pm/history";
+import { closeHistory, history, redo, undo } from "@tiptap/pm/history";
+import { Plugin } from "@tiptap/pm/state";
 //#region ../../node_modules/.pnpm/@tiptap+extension-document@2.27.2_@tiptap+core@2.27.2_@tiptap+pm@2.27.2_/node_modules/@tiptap/extension-document/dist/index.js
 /**
 * The default document node which represents the top level node of the editor.
@@ -392,6 +393,50 @@ var History = Extension.create({
 	}
 });
 //#endregion
+//#region src/editor/extensions/input-rule-history.ts
+/**
+* Keep the literal trigger in typing history before converting it. Tiptap's
+* usual input rule consumes the final character, so simply closing history
+* would restore an incomplete Markdown delimiter on Undo.
+* @invariant Conversion and subsequent typing are separate history events.
+* @lifecycle Tiptap clears its undoable input rule on typing or caret movement.
+*/
+var LoomaInputRuleHistory = Extension.create({
+	name: "loomaInputRuleHistory",
+	priority: 50,
+	onBeforeCreate() {
+		const props = this.editor.options.editorProps;
+		this.editor.setOptions({ editorProps: {
+			...props,
+			handleTextInput(view, from, to, text, defaultTransaction) {
+				if (props.handleTextInput?.call(props, view, from, to, text, defaultTransaction)) return true;
+				if (view.composing) return false;
+				const rules = view.state.plugins.find((plugin) => plugin.spec.isInputRules);
+				if (!rules?.props.handleTextInput) return false;
+				view.dispatch((defaultTransaction?.() ?? view.state.tr.insertText(text, from, to)).scrollIntoView());
+				const position = view.state.selection.from;
+				rules.props.handleTextInput.call(rules, view, position, position, "", defaultTransaction);
+				return true;
+			}
+		} });
+	},
+	addKeyboardShortcuts() {
+		return { Escape: () => this.editor.commands.undoInputRule() };
+	},
+	addProseMirrorPlugins() {
+		return [new Plugin({
+			filterTransaction(tr, state) {
+				if (state.plugins.some((plugin) => plugin.spec.isInputRules && tr.getMeta(plugin))) closeHistory(tr);
+				return true;
+			},
+			appendTransaction(transactions, _old, state) {
+				if (transactions.some((tr) => state.plugins.some((plugin) => plugin.spec.isInputRules && tr.getMeta(plugin)))) return closeHistory(state.tr);
+				return null;
+			}
+		})];
+	}
+});
+//#endregion
 //#region src/vue/editor/compact/extensions.ts
 /** Minimal short-form schema; additional consumer extensions are opt-in. */
 function getCompactEditorExtensions() {
@@ -403,7 +448,8 @@ function getCompactEditorExtensions() {
 		Italic,
 		Code,
 		HardBreak,
-		History
+		History,
+		LoomaInputRuleHistory
 	];
 }
 //#endregion

package/vue/editor/index.js

@@ -2026,11 +2026,14 @@ var LoomaEditor = defineComponent({
 			],
 			content: props.modelValue,
 			editable: props.editable,
-			editorProps: { attributes: {
-				role: "textbox",
-				"aria-multiline": "true",
-				"aria-label": props.label
-			} },
+			editorProps: {
+				attributes: {
+					role: "textbox",
+					"aria-multiline": "true",
+					"aria-label": props.label
+				},
+				handleKeyDown: (_view, event) => onFormattingKeyDown(event)
+			},
 			onCreate: ({ editor: instance }) => {
 				emit("ready", instance);
 				instance.state.doc.descendants((node) => {
@@ -2782,13 +2785,14 @@ var LoomaEditor = defineComponent({
 		};
 		const onFormattingKeyDown = (event) => {
 			cancelHeldPress();
-			if (event.key !== "Escape" || !floatingFormattingMode() || !(event.target instanceof Node) || !(root.value?.contains(event.target) || formattingPopup?.popper.contains(event.target))) return;
+			if (event.key !== "Escape" || !floatingFormattingMode() || !(event.target instanceof Node) || !(root.value?.contains(event.target) || formattingPopup?.popper.contains(event.target)) || !(formatOpen.value || formattingPopup?.popper.style.visibility === "visible")) return false;
 			const selection = editor.value?.state.selection;
 			dismissedFormattingSelection = selection instanceof TextSelection || selection instanceof AllSelection ? selection : null;
 			heldFormattingSelection = null;
 			formatOpen.value = false;
 			formattingPopup?.hide();
 			hideTool();
+			return true;
 		};
 		const onResizePointerDown = (event) => {
 			tableResizeActive = event.target instanceof HTMLElement && event.target.classList.contains("column-resize-handle");