@threadlabs/looma 0.15.4 → 0.15.6

package/editor/chunks/extensions.js

@@ -6,7 +6,7 @@ import { history, redo, undo } from "@tiptap/pm/history";
 import { dropCursor } from "@tiptap/pm/dropcursor";
 import { gapCursor } from "@tiptap/pm/gapcursor";
 import { common, createLowlight } from "lowlight";
-import { DOMParser, Node as Node$2 } from "@tiptap/pm/model";
+import { DOMParser, Node as Node$2, Slice } from "@tiptap/pm/model";
 import MarkdownIt from "markdown-it";
 import { CellSelection, TableMap, addColumn, addColumnAfter, addColumnBefore, addRow, addRowAfter, addRowBefore, cellAround, columnResizing, deleteCellSelection, deleteColumn, deleteRow, deleteTable, fixTables, goToNextCell, mergeCells, moveTableColumn, moveTableRow, setCellAttr, splitCell, tableEditing, toggleHeader, toggleHeaderCell } from "@tiptap/pm/tables";
 //#region src/editor/extensions/active-block.ts
@@ -8514,6 +8514,8 @@ function looksLikeMarkdown(value) {
 }
 function parseHtmlSlice(schema, value) {
 	const parsed = new globalThis.DOMParser().parseFromString(value, "text/html");
+	if (parsed.body.style.display === "none") return Slice.empty;
+	for (const element of parsed.body.querySelectorAll("[style]")) if (element.style.display === "none") element.remove();
 	const container = document.createElement("div");
 	container.append(purify.sanitize(parsed.body.innerHTML, {
 		USE_PROFILES: { html: true },
@@ -8528,7 +8530,7 @@ function parseHtmlSlice(schema, value) {
 		FORBID_ATTR: ["style"],
 		RETURN_DOM_FRAGMENT: true
 	}));
-	if (!container.textContent?.trim() && !container.querySelector("img, hr")) return null;
+	if (!container.textContent?.trim() && !container.querySelector("img, hr")) return Slice.empty;
 	return DOMParser.fromSchema(schema).parseSlice(container, { preserveWhitespace: false });
 }
 function documentSlice(schema, plainText) {
@@ -8558,6 +8560,7 @@ var LoomaSmartPaste = Extension.create({
 			if (!plainText.trim()) return false;
 			const slice = documentSlice(view.state.schema, plainText);
 			if (!slice) return false;
+			if (slice.size === 0) return true;
 			const transaction = view.state.tr.replaceSelection(slice).scrollIntoView().setMeta("paste", true).setMeta("uiEvent", "paste");
 			view.dispatch(transaction);
 			return true;
@@ -9062,6 +9065,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 StoredOnlyHighlight = Highlight.extend({
+	parseHTML: () => [],
+	addKeyboardShortcuts: () => ({}),
+	addInputRules: () => [],
+	addPasteRules: () => []
+});
 var lowlight = createLowlight(common);
 /**
 * Complete Looma table schema as one Tiptap extension.
@@ -9102,7 +9111,7 @@ function getLoomaTableExtensions() {
 * framework's Tiptap editor hook.
 */
 function getDefaultEditorExtensions(options = {}) {
-	const { placeholder = "Type “/” for commands, or start writing…", linkOpenOnClick = false, imageInline = false, mention = createLoomaMentionExtension() } = options;
+	const { placeholder = "Type “/” for commands, or start writing…", linkOpenOnClick = false, imageInline = false, mention = createLoomaMentionExtension(), disableHighlight = false } = options;
 	return [
 		Document,
 		Paragraph,
@@ -9136,7 +9145,7 @@ function getDefaultEditorExtensions(options = {}) {
 			}
 		}),
 		Image.configure({ inline: imageInline }),
-		Highlight.configure({ multicolor: false }),
+		(disableHighlight ? StoredOnlyHighlight : Highlight).configure({ multicolor: false }),
 		Code,
 		LoomaSmartPaste,
 		CodeBlockLowlight.configure({ lowlight }),

package/editor/extensions/preset.d.ts

@@ -17,6 +17,13 @@ export interface DefaultEditorExtensionsOptions {
     imageInline?: boolean;
     /** Custom mention extension, the Looma default, or false to omit mentions. */
     mention?: AnyExtension | false;
+    /**
+     * Removes every way for authors to apply the highlight mark: the Mod-Shift-H
+     * shortcut, `==text==` typing and paste rules, and `<mark>` parsing from
+     * pasted or HTML content. Highlights already stored in a document still load
+     * and render. Use it when the application reserves highlighting for itself.
+     */
+    disableHighlight?: boolean;
 }
 /**
  * Complete Looma table schema as one Tiptap extension.

package/package.json

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

package/vue/editor/LoomaEditor.d.ts

@@ -94,6 +94,14 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
         type: PropType<LoomaEditorToolbarMode>;
         default: string;
     };
+    /**
+     * 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.
+     */
+    disableHighlight: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -160,6 +168,14 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
         type: PropType<LoomaEditorToolbarMode>;
         default: string;
     };
+    /**
+     * 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.
+     */
+    disableHighlight: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((_value: JSONContent) => any) | undefined;
     onUpdate?: ((_value: JSONContent) => any) | undefined;
@@ -170,6 +186,7 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
 }>, {
     label: string;
     placeholder: string;
+    disableHighlight: boolean;
     modelValue: JSONContent;
     editable: boolean;
     extensions: AnyExtension[];

package/vue/editor/index.js

@@ -322,6 +322,14 @@ var LoomaEditor = defineComponent({
 		toolbarMode: {
 			type: String,
 			default: "bubble"
+		},
+		/**
+		* 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.
+		*/
+		disableHighlight: {
+			type: Boolean,
+			default: false
 		}
 	},
 	emits: {
@@ -457,11 +465,13 @@ var LoomaEditor = defineComponent({
 				text: selection instanceof TextSelection
 			};
 		};
+		const authorHighlight = !props.disableHighlight;
 		const editor = useEditor({
 			extensions: [
 				...getDefaultEditorExtensions({
 					placeholder: props.placeholder,
-					mention: mentionExtension ?? false
+					mention: mentionExtension ?? false,
+					disableHighlight: props.disableHighlight
 				}),
 				imageDelivery.extension,
 				slashExtension,
@@ -997,7 +1007,7 @@ var LoomaEditor = defineComponent({
 				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()),
-				commandButton("Highlight", "highlighter", instance.isActive("highlight"), !instance.can().toggleHighlight(), () => instance.chain().focus().toggleHighlight().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()),
 				h(IconButton, {
 					id: linkAnchorId,