@threadlabs/looma 0.7.0 → 0.7.2

package/editor/chunks/extensions.js

@@ -1,14 +1,79 @@
 import { n as TABLE_CELL_BACKGROUND_PRESETS } from "./table-backgrounds.js";
 import { Extension, Mark, Node, callOrReturn, canInsertNode, combineTransactionSteps, escapeForRegEx, findChildren, findChildrenInRange, findParentNodeClosestToPos, getAttributes, getChangedRanges, getExtensionField, getMarksBetween, isNodeEmpty, isNodeSelection, markInputRule, markPasteRule, mergeAttributes, nodeInputRule, textInputRule, textblockTypeInputRule, wrappingInputRule } from "@tiptap/core";
 import { NodeSelection, Plugin, PluginKey, Selection, TextSelection } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
 import { history, redo, undo } from "@tiptap/pm/history";
 import { dropCursor } from "@tiptap/pm/dropcursor";
 import { gapCursor } from "@tiptap/pm/gapcursor";
-import { Decoration, DecorationSet } from "@tiptap/pm/view";
 import { common, createLowlight } from "lowlight";
 import { DOMParser, Node as Node$1 } 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, setCellAttr, splitCell, tableEditing, toggleHeader, toggleHeaderCell } from "@tiptap/pm/tables";
+//#region src/editor/extensions/active-block.ts
+/**
+* Marks the top-level block holding the caret so a stylesheet can show where
+* editing is happening without drawing chrome inside the reading column.
+*
+* The decoration lands on the document's direct child, not on the textblock the
+* caret sits in: a marker that tracked the caret's own line would move on every
+* wrap and every arrow key, and one that tracked a nested list item would step
+* in and out of the list's inset. The outermost block is the stable answer to
+* "where am I", which is the question the marker exists to answer.
+*/
+/** Class applied to the decorated block; `looma-editor.css` owns its appearance. */
+var LOOMA_ACTIVE_BLOCK_CLASS = "looma-active-block";
+/** Plugin state is the editor's focus, so the marker is absent while reading. */
+var LoomaActiveBlockPluginKey = new PluginKey("loomaActiveBlock");
+/**
+* Decorates the outermost block containing the selection head while the editor
+* has focus.
+*
+* @contract Adds `LOOMA_ACTIVE_BLOCK_CLASS` to at most one top-level block, and
+* nothing at all when the editor is unfocused or not editable. The document is
+* never modified.
+* @invariant Focus is tracked in plugin state rather than read from the editor,
+* so the decoration recomputes on focus and blur even when neither changes the
+* selection.
+* @ownership The consuming stylesheet owns every visual property; this extension
+* owns only which block carries the class.
+*/
+var LoomaActiveBlock = Extension.create({
+	name: "loomaActiveBlock",
+	addProseMirrorPlugins() {
+		return [new Plugin({
+			key: LoomaActiveBlockPluginKey,
+			state: {
+				init: () => false,
+				apply: (transaction, focused) => {
+					const next = transaction.getMeta(LoomaActiveBlockPluginKey);
+					return typeof next === "boolean" ? next : focused;
+				}
+			},
+			props: {
+				handleDOMEvents: {
+					focus: (view) => {
+						view.dispatch(view.state.tr.setMeta(LoomaActiveBlockPluginKey, true));
+						return false;
+					},
+					blur: (view) => {
+						view.dispatch(view.state.tr.setMeta(LoomaActiveBlockPluginKey, false));
+						return false;
+					}
+				},
+				decorations: (state) => {
+					if (!LoomaActiveBlockPluginKey.getState(state)) return null;
+					const { $head } = state.selection;
+					if ($head.depth === 0) return null;
+					const from = $head.before(1);
+					const block = state.doc.nodeAt(from);
+					if (!block) return null;
+					return DecorationSet.create(state.doc, [Decoration.node(from, from + block.nodeSize, { class: LOOMA_ACTIVE_BLOCK_CLASS })]);
+				}
+			}
+		})];
+	}
+});
+//#endregion
 //#region src/editor/extensions/callout.ts
 /** Canonical tone values that may be persisted in a Looma callout node. */
 var LOOMA_CALLOUT_TONES = [
@@ -6631,7 +6696,8 @@ function getDefaultEditorExtensions(options = {}) {
 		}),
 		...mention ? [mention] : [],
 		LoomaTableKit,
-		LoomaListBehavior
+		LoomaListBehavior,
+		LoomaActiveBlock
 	];
 }
 //#endregion
@@ -7264,4 +7330,4 @@ function createLoomaSlashCommandExtension(options = {}) {
 	});
 }
 //#endregion
-export { DEFAULT_MENTION_RESULT_LIMIT as C, LOOMA_CALLOUT_TONES as D, normalizeMentionResultLimit as E, LoomaCallout as O, createLoomaMentionExtension as S, filterLoomaMentionItems as T, getActiveTableCellBackground as _, handleTableAction as a, LoomaSmartPaste as b, normalizeActiveTableColumnWidths as c, getDefaultEditorExtensions as d, getLoomaTableExtensions as f, getActiveTableCellAlignment as g, LoomaTableHeader as h, getActiveTableUiState as i, shouldShowTextFormattingToolbar as l, LoomaTableCell as m, createLoomaSlashCommandExtension as n, handleTableOverlayAction as o, LoomaTable as p, getDefaultSlashCommands as r, insertTableAtRange as s, LoomaSlashCommand as t, LoomaTableKit as u, setActiveTableCellAlignment as v, MAX_MENTION_RESULT_LIMIT as w, LoomaMentionSuggestionPluginKey as x, setActiveTableCellBackground as y };
+export { LoomaActiveBlock as A, DEFAULT_MENTION_RESULT_LIMIT as C, LOOMA_CALLOUT_TONES as D, normalizeMentionResultLimit as E, LoomaCallout as O, createLoomaMentionExtension as S, filterLoomaMentionItems as T, getActiveTableCellBackground as _, handleTableAction as a, LoomaSmartPaste as b, normalizeActiveTableColumnWidths as c, getDefaultEditorExtensions as d, getLoomaTableExtensions as f, getActiveTableCellAlignment as g, LoomaTableHeader as h, getActiveTableUiState as i, LoomaActiveBlockPluginKey as j, LOOMA_ACTIVE_BLOCK_CLASS as k, shouldShowTextFormattingToolbar as l, LoomaTableCell as m, createLoomaSlashCommandExtension as n, handleTableOverlayAction as o, LoomaTable as p, getDefaultSlashCommands as r, insertTableAtRange as s, LoomaSlashCommand as t, LoomaTableKit as u, setActiveTableCellAlignment as v, MAX_MENTION_RESULT_LIMIT as w, LoomaMentionSuggestionPluginKey as x, setActiveTableCellBackground as y };

package/editor/extensions/active-block.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Marks the top-level block holding the caret so a stylesheet can show where
+ * editing is happening without drawing chrome inside the reading column.
+ *
+ * The decoration lands on the document's direct child, not on the textblock the
+ * caret sits in: a marker that tracked the caret's own line would move on every
+ * wrap and every arrow key, and one that tracked a nested list item would step
+ * in and out of the list's inset. The outermost block is the stable answer to
+ * "where am I", which is the question the marker exists to answer.
+ */
+import { Extension } from "@tiptap/core";
+import { PluginKey } from "@tiptap/pm/state";
+/** Class applied to the decorated block; `looma-editor.css` owns its appearance. */
+export declare const LOOMA_ACTIVE_BLOCK_CLASS = "looma-active-block";
+/** Plugin state is the editor's focus, so the marker is absent while reading. */
+export declare const LoomaActiveBlockPluginKey: PluginKey<boolean>;
+/**
+ * Decorates the outermost block containing the selection head while the editor
+ * has focus.
+ *
+ * @contract Adds `LOOMA_ACTIVE_BLOCK_CLASS` to at most one top-level block, and
+ * nothing at all when the editor is unfocused or not editable. The document is
+ * never modified.
+ * @invariant Focus is tracked in plugin state rather than read from the editor,
+ * so the decoration recomputes on focus and blur even when neither changes the
+ * selection.
+ * @ownership The consuming stylesheet owns every visual property; this extension
+ * owns only which block carries the class.
+ */
+export declare const LoomaActiveBlock: Extension<any, any>;

package/editor/extensions/index.d.ts

@@ -6,6 +6,7 @@
  * application owns wiring and editor-instance lifetime. Tiptap remains a peer
  * dependency so Looma and the host execute against the same editor runtime.
  */
+export { LOOMA_ACTIVE_BLOCK_CLASS, LoomaActiveBlock, LoomaActiveBlockPluginKey, } from "./active-block.js";
 export { LoomaCallout, LOOMA_CALLOUT_TONES, type LoomaCalloutTone, } from "./callout.js";
 export { getDefaultEditorExtensions, getLoomaTableExtensions, LoomaTableKit, type DefaultEditorExtensionsOptions, } from "./preset.js";
 export { LoomaSmartPaste } from "./smart-paste.js";

package/editor/extensions/index.js

@@ -1,3 +1,3 @@
 import { n as TABLE_CELL_BACKGROUND_PRESETS } from "../chunks/table-backgrounds.js";
-import { C as DEFAULT_MENTION_RESULT_LIMIT, D as LOOMA_CALLOUT_TONES, E as normalizeMentionResultLimit, O as LoomaCallout, S as createLoomaMentionExtension, T as filterLoomaMentionItems, _ as getActiveTableCellBackground, a as handleTableAction, b as LoomaSmartPaste, c as normalizeActiveTableColumnWidths, d as getDefaultEditorExtensions, f as getLoomaTableExtensions, g as getActiveTableCellAlignment, h as LoomaTableHeader, i as getActiveTableUiState, l as shouldShowTextFormattingToolbar, m as LoomaTableCell, n as createLoomaSlashCommandExtension, o as handleTableOverlayAction, p as LoomaTable, r as getDefaultSlashCommands, s as insertTableAtRange, t as LoomaSlashCommand, u as LoomaTableKit, v as setActiveTableCellAlignment, w as MAX_MENTION_RESULT_LIMIT, x as LoomaMentionSuggestionPluginKey, y as setActiveTableCellBackground } from "../chunks/extensions.js";
-export { DEFAULT_MENTION_RESULT_LIMIT, LOOMA_CALLOUT_TONES, LoomaCallout, LoomaMentionSuggestionPluginKey, LoomaSlashCommand, LoomaSmartPaste, LoomaTable, LoomaTableCell, LoomaTableHeader, LoomaTableKit, MAX_MENTION_RESULT_LIMIT, TABLE_CELL_BACKGROUND_PRESETS, createLoomaMentionExtension, createLoomaSlashCommandExtension, filterLoomaMentionItems, getActiveTableCellAlignment, getActiveTableCellBackground, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getLoomaTableExtensions, handleTableAction, handleTableOverlayAction, insertTableAtRange, normalizeActiveTableColumnWidths, normalizeMentionResultLimit, setActiveTableCellAlignment, setActiveTableCellBackground, shouldShowTextFormattingToolbar };
+import { A as LoomaActiveBlock, C as DEFAULT_MENTION_RESULT_LIMIT, D as LOOMA_CALLOUT_TONES, E as normalizeMentionResultLimit, O as LoomaCallout, S as createLoomaMentionExtension, T as filterLoomaMentionItems, _ as getActiveTableCellBackground, a as handleTableAction, b as LoomaSmartPaste, c as normalizeActiveTableColumnWidths, d as getDefaultEditorExtensions, f as getLoomaTableExtensions, g as getActiveTableCellAlignment, h as LoomaTableHeader, i as getActiveTableUiState, j as LoomaActiveBlockPluginKey, k as LOOMA_ACTIVE_BLOCK_CLASS, l as shouldShowTextFormattingToolbar, m as LoomaTableCell, n as createLoomaSlashCommandExtension, o as handleTableOverlayAction, p as LoomaTable, r as getDefaultSlashCommands, s as insertTableAtRange, t as LoomaSlashCommand, u as LoomaTableKit, v as setActiveTableCellAlignment, w as MAX_MENTION_RESULT_LIMIT, x as LoomaMentionSuggestionPluginKey, y as setActiveTableCellBackground } from "../chunks/extensions.js";
+export { DEFAULT_MENTION_RESULT_LIMIT, LOOMA_ACTIVE_BLOCK_CLASS, LOOMA_CALLOUT_TONES, LoomaActiveBlock, LoomaActiveBlockPluginKey, LoomaCallout, LoomaMentionSuggestionPluginKey, LoomaSlashCommand, LoomaSmartPaste, LoomaTable, LoomaTableCell, LoomaTableHeader, LoomaTableKit, MAX_MENTION_RESULT_LIMIT, TABLE_CELL_BACKGROUND_PRESETS, createLoomaMentionExtension, createLoomaSlashCommandExtension, filterLoomaMentionItems, getActiveTableCellAlignment, getActiveTableCellBackground, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getLoomaTableExtensions, handleTableAction, handleTableOverlayAction, insertTableAtRange, normalizeActiveTableColumnWidths, normalizeMentionResultLimit, setActiveTableCellAlignment, setActiveTableCellBackground, shouldShowTextFormattingToolbar };

package/editor/index.js

@@ -1,6 +1,6 @@
 import { n as TABLE_CELL_BACKGROUND_PRESETS, t as TABLE_CELL_BACKGROUND_OPTIONS } from "./chunks/table-backgrounds.js";
 import { n as resolveTableCellAt, t as measureTableOverlayGeometry } from "./chunks/ui.js";
-import { C as DEFAULT_MENTION_RESULT_LIMIT, D as LOOMA_CALLOUT_TONES, E as normalizeMentionResultLimit, O as LoomaCallout, S as createLoomaMentionExtension, T as filterLoomaMentionItems, _ as getActiveTableCellBackground, a as handleTableAction, b as LoomaSmartPaste, c as normalizeActiveTableColumnWidths, d as getDefaultEditorExtensions, f as getLoomaTableExtensions, g as getActiveTableCellAlignment, h as LoomaTableHeader, i as getActiveTableUiState, l as shouldShowTextFormattingToolbar, m as LoomaTableCell, n as createLoomaSlashCommandExtension, o as handleTableOverlayAction, p as LoomaTable, r as getDefaultSlashCommands, s as insertTableAtRange, t as LoomaSlashCommand, u as LoomaTableKit, v as setActiveTableCellAlignment, w as MAX_MENTION_RESULT_LIMIT, x as LoomaMentionSuggestionPluginKey, y as setActiveTableCellBackground } from "./chunks/extensions.js";
+import { A as LoomaActiveBlock, C as DEFAULT_MENTION_RESULT_LIMIT, D as LOOMA_CALLOUT_TONES, E as normalizeMentionResultLimit, O as LoomaCallout, S as createLoomaMentionExtension, T as filterLoomaMentionItems, _ as getActiveTableCellBackground, a as handleTableAction, b as LoomaSmartPaste, c as normalizeActiveTableColumnWidths, d as getDefaultEditorExtensions, f as getLoomaTableExtensions, g as getActiveTableCellAlignment, h as LoomaTableHeader, i as getActiveTableUiState, j as LoomaActiveBlockPluginKey, k as LOOMA_ACTIVE_BLOCK_CLASS, l as shouldShowTextFormattingToolbar, m as LoomaTableCell, n as createLoomaSlashCommandExtension, o as handleTableOverlayAction, p as LoomaTable, r as getDefaultSlashCommands, s as insertTableAtRange, t as LoomaSlashCommand, u as LoomaTableKit, v as setActiveTableCellAlignment, w as MAX_MENTION_RESULT_LIMIT, x as LoomaMentionSuggestionPluginKey, y as setActiveTableCellBackground } from "./chunks/extensions.js";
 import { AlignCenter, AlignLeft, AlignRight, Bold, Braces, ChevronDown, ChevronLeft, CircleCheck, CircleX, CodeXml, Columns3, Ellipsis, Eraser, GripHorizontal, GripVertical, Heading1, Heading2, Heading3, Highlighter, Image, Info, Italic, List, ListOrdered, ListTodo, Merge, Minus, NotebookPen, PaintBucket, PanelBottom, PanelLeft, PanelRight, PanelTop, Pilcrow, Plus, Quote, Redo2, Rows3, Split, Strikethrough, Table2, Trash2, TriangleAlert, Underline, Undo2 } from "lucide";
 //#region src/editor/icons.ts
 /** The opinionated Lucide set used by Looma's shipped interaction surfaces. */
@@ -94,4 +94,4 @@ function getVisualViewportRect(owner = window) {
 	};
 }
 //#endregion
-export { DEFAULT_MENTION_RESULT_LIMIT, LOOMA_CALLOUT_TONES, LOOMA_ICONS, LoomaCallout, LoomaMentionSuggestionPluginKey, LoomaSlashCommand, LoomaSmartPaste, LoomaTable, LoomaTableCell, LoomaTableHeader, LoomaTableKit, MAX_MENTION_RESULT_LIMIT, TABLE_CELL_BACKGROUND_OPTIONS, TABLE_CELL_BACKGROUND_PRESETS, createLoomaMentionExtension, createLoomaSlashCommandExtension, filterLoomaMentionItems, getActiveTableCellAlignment, getActiveTableCellBackground, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getLoomaTableExtensions, getVisualViewportRect, handleTableAction, handleTableOverlayAction, insertTableAtRange, loomaIconMarkup, measureTableOverlayGeometry, normalizeActiveTableColumnWidths, normalizeMentionResultLimit, resolveTableCellAt, setActiveTableCellAlignment, setActiveTableCellBackground, shouldShowTextFormattingToolbar };
+export { DEFAULT_MENTION_RESULT_LIMIT, LOOMA_ACTIVE_BLOCK_CLASS, LOOMA_CALLOUT_TONES, LOOMA_ICONS, LoomaActiveBlock, LoomaActiveBlockPluginKey, LoomaCallout, LoomaMentionSuggestionPluginKey, LoomaSlashCommand, LoomaSmartPaste, LoomaTable, LoomaTableCell, LoomaTableHeader, LoomaTableKit, MAX_MENTION_RESULT_LIMIT, TABLE_CELL_BACKGROUND_OPTIONS, TABLE_CELL_BACKGROUND_PRESETS, createLoomaMentionExtension, createLoomaSlashCommandExtension, filterLoomaMentionItems, getActiveTableCellAlignment, getActiveTableCellBackground, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getLoomaTableExtensions, getVisualViewportRect, handleTableAction, handleTableOverlayAction, insertTableAtRange, loomaIconMarkup, measureTableOverlayGeometry, normalizeActiveTableColumnWidths, normalizeMentionResultLimit, resolveTableCellAt, setActiveTableCellAlignment, setActiveTableCellBackground, shouldShowTextFormattingToolbar };

package/package.json

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

package/styles/ui-editor-table-context-menu.css

@@ -1,6 +1,8 @@
 /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-editor-table-context-menu"]) to ([data-component], [data-slotted]) {
 :scope {
+      /* The max-width is a promise about the menu's footprint, so it counts padding and border. */
+      box-sizing: border-box;
       min-width: 14rem;
       max-width: min(17rem, calc(100vw - 24px));
       max-height: min(28rem, calc(100vh - 24px));

package/vue/UiEditorTableContextMenu.vue

@@ -160,6 +160,8 @@ useComponentHost(controllerModule.default, {
 
 <style scoped>
 [data-component~="ui-editor-table-context-menu"] {
+  /* The max-width is a promise about the menu's footprint, so it counts padding and border. */
+  box-sizing: border-box;
   min-width: 14rem;
   max-width: min(17rem, calc(100vw - 24px));
   max-height: min(28rem, calc(100vh - 24px));

package/vue/chunks/UiEditorTableContextMenu.js

@@ -93,6 +93,6 @@ var UiEditorTableContextMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_d
 			}), 128))], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-a938b94a"]]);
+}), [["__scopeId", "data-v-ae062630"]]);
 //#endregion
 export { UiEditorTableContextMenu_default as t };

package/vue/components.css

@@ -1780,7 +1780,9 @@ svg[data-v-7b1048a0] {
   display: none;
 }
 
-[data-component~="ui-editor-table-context-menu"][data-v-a938b94a] {
+[data-component~="ui-editor-table-context-menu"][data-v-ae062630] {
+  /* The max-width is a promise about the menu's footprint, so it counts padding and border. */
+  box-sizing: border-box;
   min-width: 14rem;
   max-width: min(17rem, calc(100vw - 24px));
   max-height: min(28rem, calc(100vh - 24px));
@@ -1796,12 +1798,12 @@ svg[data-v-7b1048a0] {
   overscroll-behavior: contain;
   scrollbar-width: thin;
 }
-.section[data-v-a938b94a] {
+.section[data-v-ae062630] {
   display: flex;
   flex-direction: column;
   gap: 3px;
 }
-[data-component~="ui-editor-table-context-menu"] button[data-v-a938b94a] {
+[data-component~="ui-editor-table-context-menu"] button[data-v-ae062630] {
   display: flex;
   align-items: center;
   gap: var(--ui-space-2);
@@ -1816,30 +1818,30 @@ svg[data-v-7b1048a0] {
   cursor: pointer;
   color: var(--ui-text);
 }
-[data-component~="ui-editor-table-context-menu"] button[data-v-a938b94a] {
+[data-component~="ui-editor-table-context-menu"] button[data-v-ae062630] {
   --ui-icon-size: 1rem;
   --ui-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
 }
-[data-component~="ui-editor-table-context-menu"] button[data-v-a938b94a]:hover:not(:disabled) {
+[data-component~="ui-editor-table-context-menu"] button[data-v-ae062630]:hover:not(:disabled) {
   background: var(--ui-surface-hover);
 }
-[data-component~="ui-editor-table-context-menu"] button.selected[data-v-a938b94a] {
+[data-component~="ui-editor-table-context-menu"] button.selected[data-v-ae062630] {
   background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
 }
-[data-component~="ui-editor-table-context-menu"] button.danger[data-v-a938b94a] {
+[data-component~="ui-editor-table-context-menu"] button.danger[data-v-ae062630] {
   color: var(--ui-danger);
 }
-.swatches[data-v-a938b94a] {
+.swatches[data-v-ae062630] {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 3px;
 }
-.swatch-button[data-v-a938b94a] {
+.swatch-button[data-v-ae062630] {
   display: inline-flex;
   align-items: center;
   gap: var(--ui-space-2);
 }
-.swatch[data-v-a938b94a] {
+.swatch[data-v-ae062630] {
   display: inline-flex;
   width: 1rem;
   height: 1rem;
@@ -1849,7 +1851,7 @@ svg[data-v-7b1048a0] {
   box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35);
   flex-shrink: 0;
 }
-.swatch.default[data-v-a938b94a] {
+.swatch.default[data-v-ae062630] {
   position: relative;
   background:
     linear-gradient(
@@ -1861,11 +1863,11 @@ svg[data-v-7b1048a0] {
     ),
     var(--ui-surface);
 }
-.swatch-label[data-v-a938b94a] {
+.swatch-label[data-v-ae062630] {
   min-width: 0;
   white-space: nowrap;
 }
-.heading[data-v-a938b94a] {
+.heading[data-v-ae062630] {
   padding: var(--ui-space-1) var(--ui-space-2);
   font-size: 0.6875rem;
   font-weight: 700;
@@ -1873,12 +1875,12 @@ svg[data-v-7b1048a0] {
   text-transform: uppercase;
   color: var(--ui-text-muted);
 }
-.sep[data-v-a938b94a] {
+.sep[data-v-ae062630] {
   height: 1px;
   background: var(--ui-border);
   margin: var(--ui-space-1) 0;
 }
-[data-component~="ui-editor-table-context-menu"][hidden][data-v-a938b94a] {
+[data-component~="ui-editor-table-context-menu"][hidden][data-v-ae062630] {
   display: none;
 }
 
@@ -4370,6 +4372,28 @@ html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-hand
   }
 }
 
+/*
+ * Marker for the block being edited, drawn in the gutter beside the text rather
+ * than around it: a border or fill on the reading column reads as a form field.
+ * The bar sits outside the content box, so a consumer that zeroes
+ * --ui-editor-content-padding-inline must leave room on its own wrapper.
+ */
+.looma-editor .ProseMirror > .looma-active-block {
+  position: relative;
+}
+
+.looma-editor .ProseMirror > .looma-active-block::before {
+  position: absolute;
+  z-index: 1;
+  inset-block: 0;
+  inset-inline-start: calc(-1 * var(--ui-editor-active-block-offset, var(--ui-space-3)));
+  inline-size: var(--ui-editor-active-block-width, 2px);
+  border-radius: var(--ui-radius-round);
+  background: var(--ui-editor-active-block-color, var(--ui-border-strong));
+  content: "";
+  pointer-events: none;
+}
+
 .looma-editor .ProseMirror p {
   margin: 0 0 var(--ui-editor-paragraph-gap, var(--ui-space-3));
 }

package/vue/editor/index.js

@@ -868,10 +868,7 @@ var LoomaEditor = defineComponent({
 					onFocusin: () => showTool(tablePickerAnchorId, "Insert table", true),
 					onFocusout: hideTool,
 					variant: tablePickerOpen.value ? "solid" : "ghost",
-					"aria-expanded": tablePickerOpen.value ? "true" : "false",
-					onClick: () => {
-						tablePickerOpen.value = !tablePickerOpen.value;
-					}
+					"aria-expanded": tablePickerOpen.value ? "true" : "false"
 				}, () => loomaIcon("table")),
 				commandButton(uploading.value ? "Uploading image" : "Insert image", "image", false, uploading.value || !props.uploadImage, () => fileInput.value?.click()),
 				h("span", {
@@ -1022,6 +1019,9 @@ var LoomaEditor = defineComponent({
 					open: tablePickerOpen.value,
 					for: tablePickerAnchorId,
 					placement: mobile.value ? "top-start" : "bottom-start",
+					onOpen: () => {
+						tablePickerOpen.value = true;
+					},
 					onClose: () => {
 						tablePickerOpen.value = false;
 					}