@threadlabs/looma 0.26.18 → 0.26.20

package/vue/components.css

@@ -4041,39 +4041,39 @@ ul[data-v-516afff1] {
   display: none;
 }
 
-[data-component~="ui-editor-table-overlay"][data-v-57feae5c] {
+[data-component~="ui-editor-table-overlay"][data-v-0e632fe0] {
   display: block;
   width: 100%;
   height: 100%;
   overflow: visible;
   pointer-events: none;
 }
-[data-component~="ui-editor-table-overlay"][data-v-57feae5c] {
+[data-component~="ui-editor-table-overlay"][data-v-0e632fe0] {
   position: relative;
   width: 100%;
   height: 100%;
   overflow: visible;
   pointer-events: none;
 }
-.rows[data-v-57feae5c],
-.cols[data-v-57feae5c] {
+.rows[data-v-0e632fe0],
+.cols[data-v-0e632fe0] {
   pointer-events: none;
   position: absolute;
 }
-.rows[data-v-57feae5c] {
+.rows[data-v-0e632fe0] {
   inset: 0;
   width: 100%;
 }
-.cols[data-v-57feae5c] {
+.cols[data-v-0e632fe0] {
   inset: 0;
   height: 100%;
 }
-.control[data-v-57feae5c] {
+.control[data-v-0e632fe0] {
   position: absolute;
   z-index: 1;
   pointer-events: none;
 }
-.handle[data-v-57feae5c] {
+.handle[data-v-0e632fe0] {
   position: absolute;
   display: inline-flex;
   align-items: center;
@@ -4100,65 +4100,65 @@ ul[data-v-516afff1] {
   pointer-events: auto;
   cursor: pointer;
 }
-.handle[data-v-57feae5c] {
+.handle[data-v-0e632fe0] {
   --_ui-default-icon-size: 14px;
   --_ui-default-icon-stroke-width: 2;
 }
-.handle[data-ui-proximity="near"][data-v-57feae5c],
-.control.active .handle[data-v-57feae5c],
-.handle[data-v-57feae5c]:focus-visible {
+.handle[data-ui-proximity="near"][data-v-0e632fe0],
+.control.active .handle[data-v-0e632fe0],
+.handle[data-v-0e632fe0]:focus-visible {
   opacity: 1;
   scale: 1;
 }
-.control.active .handle[data-v-57feae5c],
-.handle[data-v-57feae5c]:focus-visible {
+.control.active .handle[data-v-0e632fe0],
+.handle[data-v-0e632fe0]:focus-visible {
   border-color: var(--ui-affordance-direct-color, var(--ui-accent-solid));
   background: var(--ui-affordance-direct-color, var(--ui-accent-solid));
   color: var(--ui-text-on-accent);
   box-shadow: var(--ui-shadow-sm, 0 1px 3px rgb(0 0 0 / 0.1));
 }
-.handle[data-v-57feae5c]:focus-visible,
-.selector[data-v-57feae5c]:focus-visible,
-.cell-menu[data-v-57feae5c]:focus-visible {
+.handle[data-v-0e632fe0]:focus-visible,
+.selector[data-v-0e632fe0]:focus-visible,
+.cell-menu[data-v-0e632fe0]:focus-visible {
   outline: var(--ui-focus-width) solid var(--ui-focus-ring);
   outline-offset: var(--ui-focus-width);
 }
-.control.row[data-v-57feae5c] {
+.control.row[data-v-0e632fe0] {
   left: 0;
   width: 100%;
   height: 0;
 }
-.control.row .handle[data-v-57feae5c] {
+.control.row .handle[data-v-0e632fe0] {
   top: -12px;
   left: -30px;
 }
-.control.col[data-v-57feae5c] {
+.control.col[data-v-0e632fe0] {
   top: 0;
   width: 0;
   height: 100%;
 }
-.control.col .handle[data-v-57feae5c] {
+.control.col .handle[data-v-0e632fe0] {
   top: -30px;
   left: -12px;
 }
-.line[data-v-57feae5c] {
+.line[data-v-0e632fe0] {
   position: absolute;
   background: var(--ui-affordance-direct-color, var(--ui-accent-solid));
   opacity: 0;
   transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
 }
-.control.row .line[data-v-57feae5c] {
+.control.row .line[data-v-0e632fe0] {
   inset: calc(-0.5 * var(--ui-accent-line-width)) 0 auto;
   height: var(--ui-accent-line-width);
 }
-.control.col .line[data-v-57feae5c] {
+.control.col .line[data-v-0e632fe0] {
   inset: 0 auto 0 calc(-0.5 * var(--ui-accent-line-width));
   width: var(--ui-accent-line-width);
 }
-.control.active .line[data-v-57feae5c] {
+.control.active .line[data-v-0e632fe0] {
   opacity: 0.8;
 }
-.guide[data-v-57feae5c] {
+.guide[data-v-0e632fe0] {
   position: absolute;
   width: var(--ui-affordance-guide-size);
   height: var(--ui-affordance-guide-size);
@@ -4167,19 +4167,19 @@ ul[data-v-516afff1] {
   opacity: calc(var(--ui-affordance-guide-opacity) * var(--ui-affordance-scope-guide, 1));
   transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
 }
-.control.row .guide[data-v-57feae5c] {
+.control.row .guide[data-v-0e632fe0] {
   left: -10px;
   top: -2px;
 }
-.control.col .guide[data-v-57feae5c] {
+.control.col .guide[data-v-0e632fe0] {
   left: -2px;
   top: -10px;
 }
-.control:has(.handle[data-ui-proximity="near"]) .guide[data-v-57feae5c],
-.control.active .guide[data-v-57feae5c] {
+.control:has(.handle[data-ui-proximity="near"]) .guide[data-v-0e632fe0],
+.control.active .guide[data-v-0e632fe0] {
   opacity: 0;
 }
-.tooltip[data-v-57feae5c] {
+.tooltip[data-v-0e632fe0] {
   position: absolute;
   z-index: 2;
   top: calc(100% + 6px);
@@ -4198,18 +4198,18 @@ ul[data-v-516afff1] {
   transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
   pointer-events: none;
 }
-.control.row .tooltip[data-v-57feae5c] {
+.control.row .tooltip[data-v-0e632fe0] {
   top: 50%;
   left: auto;
   right: calc(100% + 8px);
   transform: translateY(-50%);
 }
-.control.active .tooltip[data-v-57feae5c],
-.handle:focus-visible .tooltip[data-v-57feae5c] {
+.control.active .tooltip[data-v-0e632fe0],
+.handle:focus-visible .tooltip[data-v-0e632fe0] {
   opacity: 1;
 }
-.selector[data-v-57feae5c],
-.cell-menu[data-v-57feae5c] {
+.selector[data-v-0e632fe0],
+.cell-menu[data-v-0e632fe0] {
   position: absolute;
   z-index: 2;
   display: inline-flex;
@@ -4228,21 +4228,21 @@ ul[data-v-516afff1] {
     border-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
     box-shadow var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
 }
-.selector[data-v-57feae5c]:hover,
-.cell-menu[data-v-57feae5c]:hover {
+.selector[data-v-0e632fe0]:hover,
+.cell-menu[data-v-0e632fe0]:hover {
   background: var(--ui-surface-muted);
   color: var(--ui-text-primary);
   box-shadow: var(--ui-shadow-xs, 0 1px 2px rgb(0 0 0 / 0.05));
 }
-.selector[data-v-57feae5c] {
+.selector[data-v-0e632fe0] {
   border-radius: var(--ui-radius-round);
   touch-action: none;
   cursor: grab;
 }
-.selector[data-v-57feae5c]:active {
+.selector[data-v-0e632fe0]:active {
   cursor: grabbing;
 }
-.selector[data-v-57feae5c]::before {
+.selector[data-v-0e632fe0]::before {
   content: "";
   position: absolute;
   inset: 50% auto auto 50%;
@@ -4253,7 +4253,7 @@ ul[data-v-516afff1] {
   transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
   pointer-events: none;
 }
-.selector .glyph[data-v-57feae5c] {
+.selector .glyph[data-v-0e632fe0] {
   display: block;
   width: 14px;
   height: 14px;
@@ -4265,75 +4265,75 @@ ul[data-v-516afff1] {
     opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
     transform var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
 }
-.selector[data-v-57feae5c]:hover::before,
-.selector[data-v-57feae5c]:focus-visible::before {
+.selector[data-v-0e632fe0]:hover::before,
+.selector[data-v-0e632fe0]:focus-visible::before {
   opacity: 0;
 }
-.selector:hover .glyph[data-v-57feae5c],
-.selector:focus-visible .glyph[data-v-57feae5c] {
+.selector:hover .glyph[data-v-0e632fe0],
+.selector:focus-visible .glyph[data-v-0e632fe0] {
   opacity: 1;
   transform: scale(1);
 }
-.selector.row[data-v-57feae5c] {
+.selector.row[data-v-0e632fe0] {
   left: -9px;
   width: 18px;
   height: 32px;
   transform: translateY(-50%);
 }
-.selector.row[data-v-57feae5c]::before {
+.selector.row[data-v-0e632fe0]::before {
   width: 2px;
   height: 16px;
 }
-.selector.column[data-v-57feae5c] {
+.selector.column[data-v-0e632fe0] {
   top: -9px;
   width: 32px;
   height: 18px;
   transform: translateX(-50%);
 }
-.selector.column[data-v-57feae5c]::before {
+.selector.column[data-v-0e632fe0]::before {
   width: 16px;
   height: 2px;
 }
 @media (hover: none), (pointer: coarse) {
-.selector[data-v-57feae5c]::before {
+.selector[data-v-0e632fe0]::before {
     opacity: 0;
 }
-.selector .glyph[data-v-57feae5c] {
+.selector .glyph[data-v-0e632fe0] {
     opacity: 1;
     transform: none;
 }
 }
-.cell-menu[data-v-57feae5c] {
+.cell-menu[data-v-0e632fe0] {
   width: 24px;
   height: 24px;
   border-radius: var(--ui-radius-sm);
   background: color-mix(in srgb, var(--ui-surface-muted) 78%, transparent);
 }
-.cell-menu[data-v-57feae5c] {
+.cell-menu[data-v-0e632fe0] {
   --_ui-default-icon-size: 15px;
   --_ui-default-icon-stroke-width: 2;
 }
-.drop-indicator[data-v-57feae5c] {
+.drop-indicator[data-v-0e632fe0] {
   position: absolute;
   z-index: 3;
   background: var(--ui-accent-solid);
   box-shadow: 0 0 0 var(--ui-border-width) var(--ui-surface);
   pointer-events: none;
 }
-.drop-indicator.row[data-v-57feae5c] {
+.drop-indicator.row[data-v-0e632fe0] {
   left: 0;
   width: 100%;
   height: var(--ui-accent-line-width);
 }
-.drop-indicator.column[data-v-57feae5c] {
+.drop-indicator.column[data-v-0e632fe0] {
   top: 0;
   width: var(--ui-accent-line-width);
   height: 100%;
 }
-.drop-indicator[hidden][data-v-57feae5c] {
+.drop-indicator[hidden][data-v-0e632fe0] {
   display: none;
 }
-[data-component~="ui-editor-table-overlay"][hidden][data-v-57feae5c] {
+[data-component~="ui-editor-table-overlay"][hidden][data-v-0e632fe0] {
   display: none;
 }
 
@@ -10082,6 +10082,21 @@ html[data-ui-input-modality="touch"]
 
 [data-component~="ui-editor-surface"][data-density="compact"] .ProseMirror > :first-child { margin-block-start: 0; }
 [data-component~="ui-editor-surface"][data-density="compact"] .ProseMirror > :last-child { margin-block-end: 0; }
+
+/* List items own their small inter-item gap; paragraphs must not add another one. */
+.looma-editor .ProseMirror li > p:last-of-type,
+.looma-editor .ProseMirror li > div > p:last-of-type {
+  margin-block-end: 0;
+}
+
+/* A list ending a cell needs no document-level gap before the cell's padding. */
+.looma-editor .ProseMirror :is(th, td) > :is(ul, ol):not(:has(~ :not(.column-resize-handle))) {
+  margin-block-end: 0;
+}
+
+.looma-editor .ProseMirror li > :is(ul, ol) {
+  margin-block: var(--ui-space-1) 0;
+}
 /**
  * Looma editor styles (tokens-based).
  * Tables, context menu, insert-table grid, slash menu. Use with ProseMirror/Tiptap content.

package/vue/editor/index.js

@@ -2655,10 +2655,12 @@ var LoomaEditor = defineComponent({
 		onBeforeUnmount(() => clearTimeout(codeBlurTimer));
 		const updateTableUi = () => {
 			const instance = editor.value;
+			if (hoveredTableCell && (!instance || instance.isDestroyed || !instance.view.dom.contains(hoveredTableCell))) hoveredTableCell = null;
 			const focusInTableUi = [
 				tableToolbarShell.value,
 				tableOverlayShell.value,
-				tableMenuShell.value
+				tableMenuShell.value,
+				mobileToolbarShell.value
 			].some((shell) => shell?.contains(document.activeElement));
 			if (!instance || instance.isDestroyed || !props.editable || !instance.isFocused && !tableInteractionActive && !hoveredTableCell && !focusInTableUi) {
 				closeTableUi();
@@ -2712,7 +2714,7 @@ var LoomaEditor = defineComponent({
 			queueMicrotask(updateTableUi);
 			updateCodeUi();
 			setTimeout(() => {
-				if (!tableInteractionActive && !editor.value?.isFocused) editorFocused.value = false;
+				if (!tableInteractionActive && !editor.value?.isFocused && !mobileToolbarShell.value?.contains(document.activeElement)) editorFocused.value = false;
 				if (!editor.value?.isFocused && !formattingPickerOpen() && !formattingPopup?.popper.contains(document.activeElement)) heldFormattingSelection = null;
 			}, 0);
 		};