@threadlabs/looma 0.29.6 → 0.29.7

package/editor/code-language-picker.d.ts

@@ -0,0 +1,29 @@
+import type { Editor } from "@tiptap/core";
+/** The code block the selection lies in: its position, saved language (`auto` when none), text, and element. */
+export interface LoomaCodeBlockAtSelection {
+    readonly pos: number;
+    readonly language: string;
+    readonly text: string;
+    readonly element: HTMLElement;
+}
+/** The code block holding the whole selection, or null when the selection is elsewhere or spans blocks. */
+export declare function codeBlockAtSelection(editor: Editor): LoomaCodeBlockAtSelection | null;
+/**
+ * The picker's choices: Auto, naming the detected language when there is one; a saved language the
+ * catalog lacks, marked unavailable, so it stays selected; then every catalog language.
+ */
+export declare function codeLanguageChoices(language: string, detected: string | null, names: readonly string[]): Array<{
+    value: string;
+    label: string;
+}>;
+/** Centers the picker over the code block, above it when there is room and below it otherwise. */
+export declare function codeLanguagePickerPlacement(block: DOMRect): {
+    top: string;
+    left: string;
+    transform: string;
+};
+/**
+ * Saves `value` as the language of the code block at `pos`, as its own undo step; `auto` clears it.
+ * @failure Returns false, and changes nothing, for a language outside `names` or no code block at `pos`.
+ */
+export declare function setCodeBlockLanguage(editor: Editor, pos: number, value: string, names: readonly string[]): boolean;

package/editor/extensions/table-commands.d.ts

@@ -53,6 +53,7 @@ export interface ActiveTableUiState {
     headerColumn: boolean;
     capabilities: TableActionCapabilities;
 }
+export declare const NO_TABLE_CAPABILITIES: TableActionCapabilities;
 /**
  * Text formatting belongs to actual text selections, not table CellSelections.
  *

package/editor/table-ui.d.ts

@@ -0,0 +1,35 @@
+import { type ActiveTableUiState, type TableActionCapabilities } from "./extensions/table-commands.js";
+import type { TableCellAlignment, TableCellBackground } from "./extensions/table-formatting.js";
+/** What the table's controls show: the toolbar and overlay, and the selected cells' formatting and actions. */
+export interface LoomaTableControls {
+    readonly toolbarOpen: boolean;
+    readonly overlayOpen: boolean;
+    readonly alignment: TableCellAlignment;
+    readonly background: TableCellBackground;
+    readonly headerRow: boolean;
+    readonly headerColumn: boolean;
+    readonly capabilities: TableActionCapabilities;
+}
+export declare const LOOMA_TABLE_CONTROLS_CLOSED: LoomaTableControls;
+/**
+ * The controls for the table shown: its overlay on wider screens, and the toolbar and the selection's
+ * formatting only while the selection is in that table. A table that is only hovered shows its overlay
+ * with nothing selected; narrow screens use the editing dock instead of the toolbar and overlay.
+ */
+export declare function tableControls(state: ActiveTableUiState, selectionInTable: boolean, narrow: boolean): LoomaTableControls;
+/**
+ * Centers the table toolbar on the table, at most 420px wide and 12px inside the viewport's sides,
+ * above the table when there is room and below it otherwise.
+ */
+export declare function tableToolbarPlacement(table: DOMRect, viewportWidth: number): {
+    top: string;
+    left: string;
+    maxWidth: string;
+};
+/** The overlay covers the table exactly. */
+export declare const tableOverlayPlacement: (table: DOMRect) => {
+    top: string;
+    left: string;
+    width: string;
+    height: string;
+};

package/package.json

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

package/vue/editor/LoomaEditor.d.ts

@@ -384,6 +384,7 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
     linkBaseUrl: string;
     disableHighlight: boolean;
     codeLanguages: Readonly<Record<string, import("highlight.js").LanguageFn>> | null;
+    toolbarOpen: boolean;
     modelValue: JSONContent;
     slashCommands: LoomaEditorSlashCommands | undefined;
     mentionQuery: LoomaMentionQuery | undefined;
@@ -401,5 +402,4 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
     selectionActions: LoomaEditorSelectionAction[];
     rangeActions: LoomaEditorRangeAction[];
     toolbarTriggerId: string;
-    toolbarOpen: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/vue/editor/compact/index.js

@@ -1,8 +1,8 @@
 import { defineComponent, h, onBeforeUnmount, onMounted, shallowRef, watch } from "vue";
 import { Extension, Mark, Node, markInputRule, markPasteRule, mergeAttributes } from "@tiptap/core";
 import { Editor as Editor$1, EditorContent } from "@tiptap/vue-3";
-import { closeHistory, history, redo, undo } from "@tiptap/pm/history";
 import { Plugin } from "@tiptap/pm/state";
+import { closeHistory, history, redo, undo } from "@tiptap/pm/history";
 //#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.

package/vue/editor/index.js

@@ -3,12 +3,12 @@ import { DEFAULT_MENTION_RESULT_LIMIT, LOOMA_ICONS, createLoomaMentionExtension,
 import { Button, Callout, Card, Checkbox, Cluster, Disclosure, EditorBlockActions, EditorChipEditor, EditorCodeLanguage, EditorImageToolbar, EditorInsertTableGrid, EditorLinkCard, EditorLinkForm, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorSurface, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, FormField, Icon, IconButton, Image, Input, List, Menu, MenuItem, Popover, Separator, Stack, StatusMessage, Text, Tooltip } from "@threadlabs/looma/vue";
 import { Editor, Extension, Node as Node$1, getText, getTextSerializersFromSchema, isNodeSelection, mergeAttributes, nodeInputRule, posToDOMRect } from "@tiptap/core";
 import { Editor as Editor$1 } from "@tiptap/vue-3";
-import { closeHistory } from "@tiptap/pm/history";
 import { AllSelection, NodeSelection, Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
 import { createLowlight } from "lowlight";
 import "@tiptap/pm/tables";
 import "@tiptap/pm/transform";
+import { closeHistory } from "@tiptap/pm/history";
 import { DOMParser, DOMSerializer, Fragment as Fragment$1 } from "@tiptap/pm/model";
 export * from "@threadlabs/looma/editor";
 //#region src/vue/editor/primitives.ts
@@ -1562,6 +1562,23 @@ function selectedTableCellElement(editor) {
 }
 //#endregion
 //#region src/editor/extensions/table-commands.ts
+var NO_TABLE_CAPABILITIES = {
+	canToggleHeaderRow: false,
+	canToggleHeaderColumn: false,
+	canMoveRowUp: false,
+	canMoveRowDown: false,
+	canMoveColumnLeft: false,
+	canMoveColumnRight: false,
+	canAddRowBefore: false,
+	canAddRowAfter: false,
+	canAddColumnBefore: false,
+	canAddColumnAfter: false,
+	canDeleteRow: false,
+	canDeleteColumn: false,
+	canDeleteTable: false,
+	canMergeCells: false,
+	canSplitCell: false
+};
 /**
 * Moves the caret to the cell an overlay action names when the action comes from a table other
 * than the selected one, so table commands act on that table. A cell menu also selects its cell,
@@ -1879,6 +1896,59 @@ function selectionActionDetail(state, id) {
 		after: doc.textBetween(to, Math.min(doc.content.size, to + CONTEXT), "\n")
 	};
 }
+//#endregion
+//#region src/editor/table-ui.ts
+var LOOMA_TABLE_CONTROLS_CLOSED = Object.freeze({
+	toolbarOpen: false,
+	overlayOpen: false,
+	alignment: "left",
+	background: null,
+	headerRow: false,
+	headerColumn: false,
+	capabilities: Object.freeze({ ...NO_TABLE_CAPABILITIES })
+});
+/**
+* The controls for the table shown: its overlay on wider screens, and the toolbar and the selection's
+* formatting only while the selection is in that table. A table that is only hovered shows its overlay
+* with nothing selected; narrow screens use the editing dock instead of the toolbar and overlay.
+*/
+function tableControls(state, selectionInTable, narrow) {
+	if (!selectionInTable) return {
+		...LOOMA_TABLE_CONTROLS_CLOSED,
+		overlayOpen: !narrow
+	};
+	return {
+		toolbarOpen: state.showToolbar && !narrow,
+		overlayOpen: !narrow,
+		alignment: state.cellAlignment,
+		background: state.cellBackground,
+		headerRow: state.headerRow,
+		headerColumn: state.headerColumn,
+		capabilities: state.capabilities
+	};
+}
+/** Space, in pixels, the toolbar needs above a table; with less it sits below. */
+var ROOM_ABOVE$1 = 76;
+/**
+* Centers the table toolbar on the table, at most 420px wide and 12px inside the viewport's sides,
+* above the table when there is room and below it otherwise.
+*/
+function tableToolbarPlacement(table, viewportWidth) {
+	const width = Math.min(420, viewportWidth - 24);
+	const left = Math.min(Math.max(12, table.left + (table.width - width) / 2), Math.max(12, viewportWidth - width - 12));
+	return {
+		top: `${table.top > ROOM_ABOVE$1 ? table.top - 52 : table.bottom + 12}px`,
+		left: `${left}px`,
+		maxWidth: `${width}px`
+	};
+}
+/** The overlay covers the table exactly. */
+var tableOverlayPlacement = (table) => ({
+	top: `${table.top}px`,
+	left: `${table.left}px`,
+	width: `${table.width}px`,
+	height: `${table.height}px`
+});
 /** Whether a viewport this wide gets the editing dock rather than floating tools. */
 var usesMobileDock = (viewportWidth) => viewportWidth <= 767;
 /**
@@ -2485,6 +2555,71 @@ function createToolbarTooltip(onChange) {
 	};
 }
 //#endregion
+//#region src/editor/code-language-picker.ts
+/** The code block holding the whole selection, or null when the selection is elsewhere or spans blocks. */
+function codeBlockAtSelection(editor) {
+	const { $from, $to } = editor.state.selection;
+	const block = $from.parent;
+	if (block.type.name !== "codeBlock" || !$from.sameParent($to)) return null;
+	const pos = $from.before();
+	const element = editor.view.nodeDOM(pos);
+	if (!(element instanceof HTMLElement)) return null;
+	return {
+		pos,
+		language: typeof block.attrs.language === "string" && block.attrs.language ? block.attrs.language : "auto",
+		text: block.textContent,
+		element
+	};
+}
+/**
+* The picker's choices: Auto, naming the detected language when there is one; a saved language the
+* catalog lacks, marked unavailable, so it stays selected; then every catalog language.
+*/
+function codeLanguageChoices(language, detected, names) {
+	return [
+		{
+			value: "auto",
+			label: detected ? `Auto (${detected.toUpperCase()})` : "Auto"
+		},
+		...language !== "auto" && !names.includes(language) ? [{
+			value: language,
+			label: `${language.toUpperCase()} (unavailable)`
+		}] : [],
+		...names.map((name) => ({
+			value: name,
+			label: name.toUpperCase()
+		}))
+	];
+}
+/** Space, in pixels, the picker needs above a code block; with less it sits below. */
+var ROOM_ABOVE = 76;
+/** Centers the picker over the code block, above it when there is room and below it otherwise. */
+function codeLanguagePickerPlacement(block) {
+	const above = block.top > ROOM_ABOVE;
+	return {
+		top: `${above ? block.top - 8 : block.bottom + 8}px`,
+		left: `${block.left + block.width / 2}px`,
+		transform: `translate(-50%, ${above ? "-100%" : "0"})`
+	};
+}
+/**
+* Saves `value` as the language of the code block at `pos`, as its own undo step; `auto` clears it.
+* @failure Returns false, and changes nothing, for a language outside `names` or no code block at `pos`.
+*/
+function setCodeBlockLanguage(editor, pos, value, names) {
+	const language = value === "auto" ? null : value;
+	if (language !== null && !names.includes(language)) return false;
+	const node = editor.state.doc.nodeAt(pos);
+	if (node?.type.name !== "codeBlock") return false;
+	editor.view.dispatch(closeHistory(editor.state.tr));
+	editor.view.dispatch(editor.state.tr.setNodeMarkup(pos, void 0, {
+		...node.attrs,
+		language
+	}));
+	editor.view.dispatch(closeHistory(editor.state.tr));
+	return true;
+}
+//#endregion
 //#region src/editor/extensions/expand.ts
 /**
 * Reveals collapsed ancestors before a host navigates to a document position.
@@ -3389,23 +3524,6 @@ var EMPTY_DOCUMENT = {
 };
 var uploadProgressText = (progress) => progress && progress.total > 0 ? `Uploading image… ${Math.round(Math.min(1, progress.loaded / progress.total) * 100)}%` : "Uploading image…";
 var editorInstanceSequence = 0;
-var EMPTY_CAPABILITIES = {
-	canToggleHeaderRow: false,
-	canToggleHeaderColumn: false,
-	canMoveRowUp: false,
-	canMoveRowDown: false,
-	canMoveColumnLeft: false,
-	canMoveColumnRight: false,
-	canAddRowBefore: false,
-	canAddRowAfter: false,
-	canAddColumnBefore: false,
-	canAddColumnAfter: false,
-	canDeleteRow: false,
-	canDeleteColumn: false,
-	canDeleteTable: false,
-	canMergeCells: false,
-	canSplitCell: false
-};
 function slashMenuRows(items) {
 	const groups = [];
 	for (const [index, item] of items.entries()) {
@@ -3695,7 +3813,7 @@ var LoomaEditor = defineComponent({
 			toolbarStyle: {},
 			overlayStyle: {},
 			menuStyle: {},
-			capabilities: { ...EMPTY_CAPABILITIES }
+			capabilities: LOOMA_TABLE_CONTROLS_CLOSED.capabilities
 		});
 		const openChipEditor = (_instance, position) => {
 			if (!chipEditing?.open(position)) return;
@@ -4114,16 +4232,10 @@ var LoomaEditor = defineComponent({
 			if (session.setContent(value, lastFocusedSelection) && wasFocused) rememberSelection(instance);
 		}, { deep: true });
 		const closeTableUi = () => {
-			tableUi.toolbarOpen = false;
-			tableUi.overlayOpen = false;
+			Object.assign(tableUi, LOOMA_TABLE_CONTROLS_CLOSED);
 			tableUi.menuOpen = false;
 			tableUi.menuScope = "cell";
-			tableUi.alignment = "left";
-			tableUi.background = null;
-			tableUi.headerRow = false;
-			tableUi.headerColumn = false;
 			tableUi.geometry = null;
-			tableUi.capabilities = { ...EMPTY_CAPABILITIES };
 			overlayTableElement = null;
 			mobileDock.tableInactive();
 		};
@@ -4145,63 +4257,31 @@ var LoomaEditor = defineComponent({
 		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)) {
+			const block = instance ? codeBlockAtSelection(instance) : null;
+			if (!instance || !props.editable || !codeLanguageNames.length || !block) {
 				codeUi.open = false;
 				return;
 			}
-			loadForCodeBlock(instance, block.attrs.language, block.textContent);
+			loadForCodeBlock(instance, block.language === "auto" ? null : block.language, block.text);
 			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"})`
-			};
+			codeUi.pos = block.pos;
+			codeUi.language = block.language;
+			codeUi.text = block.text;
+			codeUi.style = codeLanguagePickerPlacement(block.element.getBoundingClientRect());
 		};
 		const codeLanguageOptions = computed(() => {
 			codeUi.grammarVersion;
 			const detected = codeUi.open && codeUi.text.trim() ? codeHighlighting.lowlight.highlightAuto(codeUi.text).data?.language : null;
-			return [
-				{
-					value: "auto",
-					label: typeof detected === "string" ? `Auto (${detected.toUpperCase()})` : "Auto"
-				},
-				...codeUi.language !== "auto" && !codeLanguageNames.includes(codeUi.language) ? [{
-					value: codeUi.language,
-					label: `${codeUi.language.toUpperCase()} (unavailable)`
-				}] : [],
-				...codeLanguageNames.map((name) => ({
-					value: name,
-					label: name.toUpperCase()
-				}))
-			];
+			return codeLanguageChoices(codeUi.language, typeof detected === "string" ? detected : null, codeLanguageNames);
 		});
 		const chooseCodeLanguage = (value) => {
-			const instance = editor.value;
-			if (!instance) return;
-			const language = value === "auto" ? null : value;
-			if (language !== null && !codeLanguageNames.includes(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));
+			if (editor.value) setCodeBlockLanguage(editor.value, codeUi.pos, value, codeLanguageNames);
 		};
 		const onCodeTransaction = () => updateCodeUi();
 		watch(() => props.editable, () => nextTick(onCodeTransaction));
@@ -4230,31 +4310,14 @@ var LoomaEditor = defineComponent({
 			overlayTableElement = table;
 			if (selectedTableIsActive) mobileDock.tableActive();
 			const rect = table.getBoundingClientRect();
-			const maxToolbarWidth = Math.min(420, window.innerWidth - 24);
-			const toolbarLeft = Math.min(Math.max(12, rect.left + (rect.width - maxToolbarWidth) / 2), Math.max(12, window.innerWidth - maxToolbarWidth - 12));
-			tableUi.toolbarOpen = selectedTableIsActive && state.showToolbar && !mobile.value;
-			tableUi.overlayOpen = !mobile.value;
-			tableUi.alignment = selectedTableIsActive ? state.cellAlignment : "left";
-			tableUi.background = selectedTableIsActive ? state.cellBackground : null;
-			tableUi.headerRow = selectedTableIsActive && state.headerRow;
-			tableUi.headerColumn = selectedTableIsActive && state.headerColumn;
-			tableUi.capabilities = selectedTableIsActive ? state.capabilities : { ...EMPTY_CAPABILITIES };
+			Object.assign(tableUi, tableControls(state, selectedTableIsActive, mobile.value));
 			const selectedCell = selectedTableIsActive ? selectedTableCellElement(instance) : null;
 			const geometry = measureTableOverlayGeometry(table, selectedCell, hoveredTableCell && table.contains(hoveredTableCell) ? hoveredTableCell : null);
 			tableUi.rows = Math.max(0, geometry.rowBoundaries.length - 1);
 			tableUi.cols = Math.max(0, geometry.columnBoundaries.length - 1);
 			tableUi.geometry = geometry;
-			tableUi.toolbarStyle = {
-				top: `${rect.top > 76 ? rect.top - 52 : rect.bottom + 12}px`,
-				left: `${toolbarLeft}px`,
-				maxWidth: `${maxToolbarWidth}px`
-			};
-			tableUi.overlayStyle = {
-				top: `${rect.top}px`,
-				left: `${rect.left}px`,
-				width: `${rect.width}px`,
-				height: `${rect.height}px`
-			};
+			tableUi.toolbarStyle = tableToolbarPlacement(rect, window.innerWidth);
+			tableUi.overlayStyle = tableOverlayPlacement(rect);
 		};
 		const onEditorFocus = () => {
 			editorFocused.value = true;