@jxsuite/studio 0.28.2 → 0.28.4

package/src/editor/inline-format.ts

@@ -32,25 +32,40 @@ const FORMAT_TAGS = new Set([
  * @returns {boolean}
  */
 export function isTagActiveInSelection(tag: string, editableRoot: HTMLElement | null) {
-  if (!editableRoot) return false;
-  if (editableRoot.contentEditable === "plaintext-only") return false;
+  if (!editableRoot) {
+    return false;
+  }
+  if (editableRoot.contentEditable === "plaintext-only") {
+    return false;
+  }
   const sel = window.getSelection();
-  if (!sel || !sel.rangeCount) return false;
+  if (!sel || !sel.rangeCount) {
+    return false;
+  }
 
   const anchor = sel.anchorNode;
   const focus = sel.focusNode;
-  if (!anchor || !focus) return false;
-  if (!editableRoot.contains(anchor) || !editableRoot.contains(focus)) return false;
+  if (!anchor || !focus) {
+    return false;
+  }
+  if (!editableRoot.contains(anchor) || !editableRoot.contains(focus)) {
+    return false;
+  }
 
   /**
    * @param {Node | null} node
    * @returns {boolean}
    */
   const hasTag = (node: Node | null) => {
-    while (node && node !== editableRoot) {
-      if (node.nodeType === Node.ELEMENT_NODE && (node as Element).tagName.toLowerCase() === tag)
+    let current = node;
+    while (current && current !== editableRoot) {
+      if (
+        current.nodeType === Node.ELEMENT_NODE &&
+        (current as Element).tagName.toLowerCase() === tag
+      ) {
         return true;
-      node = node.parentNode;
+      }
+      current = current.parentNode;
     }
     return false;
   };
@@ -66,12 +81,20 @@ export function isTagActiveInSelection(tag: string, editableRoot: HTMLElement |
  * @param {HTMLElement | null} editableRoot
  */
 export function toggleInlineFormat(tag: string, editableRoot: HTMLElement | null) {
-  if (!editableRoot) return;
+  if (!editableRoot) {
+    return;
+  }
   const sel = window.getSelection();
-  if (!sel || !sel.rangeCount) return;
+  if (!sel || !sel.rangeCount) {
+    return;
+  }
   const range = sel.getRangeAt(0);
-  if (range.collapsed) return;
-  if (!editableRoot.contains(range.commonAncestorContainer)) return;
+  if (range.collapsed) {
+    return;
+  }
+  if (!editableRoot.contains(range.commonAncestorContainer)) {
+    return;
+  }
 
   // Expand selection to fully include any partially-selected ${...} expressions
   expandRangeToTemplateExpressions(range);
@@ -145,12 +168,14 @@ function unwrapTagInRange(
  */
 function unwrapElement(el: Element) {
   const parent = el.parentNode;
-  if (!parent) return;
+  if (!parent) {
+    return;
+  }
   const frag = document.createDocumentFragment();
   while (el.firstChild) {
-    frag.appendChild(el.firstChild);
+    frag.append(el.firstChild);
   }
-  parent.replaceChild(frag, el);
+  el.replaceWith(frag);
 }
 
 /**
@@ -171,7 +196,9 @@ function wrapRangeInTag(tag: string, range: Range, _editableRoot: HTMLElement) {
 
   // If nothing left after trimming, re-insert everything and bail
   if (!contents.hasChildNodes()) {
-    if (leadingWS) range.insertNode(document.createTextNode(leadingWS));
+    if (leadingWS) {
+      range.insertNode(document.createTextNode(leadingWS));
+    }
     if (trailingWS) {
       const t = document.createTextNode(trailingWS);
       range.collapse(false);
@@ -181,13 +208,17 @@ function wrapRangeInTag(tag: string, range: Range, _editableRoot: HTMLElement) {
   }
 
   const wrapper = document.createElement(tag);
-  wrapper.appendChild(contents);
+  wrapper.append(contents);
 
   // Build the insertion fragment: [leadingWS] [wrapper] [trailingWS]
   const frag = document.createDocumentFragment();
-  if (leadingWS) frag.appendChild(document.createTextNode(leadingWS));
-  frag.appendChild(wrapper);
-  if (trailingWS) frag.appendChild(document.createTextNode(trailingWS));
+  if (leadingWS) {
+    frag.append(document.createTextNode(leadingWS));
+  }
+  frag.append(wrapper);
+  if (trailingWS) {
+    frag.append(document.createTextNode(trailingWS));
+  }
 
   range.insertNode(frag);
 
@@ -210,14 +241,18 @@ function wrapRangeInTag(tag: string, range: Range, _editableRoot: HTMLElement) {
  */
 function trimLeadingWhitespace(frag: DocumentFragment) {
   const first = frag.firstChild;
-  if (!first || first.nodeType !== Node.TEXT_NODE) return null;
+  if (!first || first.nodeType !== Node.TEXT_NODE) {
+    return null;
+  }
   const text = first.textContent ?? "";
   const match = text.match(/^(\s+)/);
-  if (!match) return null;
-  const ws = match[1];
+  if (!match) {
+    return null;
+  }
+  const [, ws] = match;
   if (text.length === ws.length) {
     // Entire node is whitespace — remove it
-    frag.removeChild(first);
+    first.remove();
   } else {
     first.textContent = text.slice(ws.length);
   }
@@ -233,13 +268,17 @@ function trimLeadingWhitespace(frag: DocumentFragment) {
  */
 function trimTrailingWhitespace(frag: DocumentFragment) {
   const last = frag.lastChild;
-  if (!last || last.nodeType !== Node.TEXT_NODE) return null;
+  if (!last || last.nodeType !== Node.TEXT_NODE) {
+    return null;
+  }
   const text = last.textContent ?? "";
   const match = text.match(/(\s+)$/);
-  if (!match) return null;
-  const ws = match[1];
+  if (!match) {
+    return null;
+  }
+  const [, ws] = match;
   if (text.length === ws.length) {
-    frag.removeChild(last);
+    last.remove();
   } else {
     last.textContent = text.slice(0, -ws.length);
   }
@@ -256,30 +295,42 @@ function trimTrailingWhitespace(frag: DocumentFragment) {
  * @param {HTMLElement | null} root
  */
 export function normalizeInlineContent(root: HTMLElement | null) {
-  if (!root) return;
+  if (!root) {
+    return;
+  }
   let changed = true;
   let iterations = 0;
   while (changed && iterations < 10) {
     changed = false;
-    iterations++;
+    iterations += 1;
 
     // 1. Merge adjacent text nodes
     root.normalize();
 
     // 2. Merge adjacent same-tag siblings
-    if (mergeAdjacentSiblings(root)) changed = true;
+    if (mergeAdjacentSiblings(root)) {
+      changed = true;
+    }
 
     // 3. Collapse redundant nesting (strong > strong → strong)
-    if (collapseRedundantNesting(root)) changed = true;
+    if (collapseRedundantNesting(root)) {
+      changed = true;
+    }
 
     // 4. Remove empty inline elements
-    if (removeEmptyInlines(root)) changed = true;
+    if (removeEmptyInlines(root)) {
+      changed = true;
+    }
 
     // 5. Lift edge whitespace out of inline wrappers
-    if (liftEdgeWhitespace(root)) changed = true;
+    if (liftEdgeWhitespace(root)) {
+      changed = true;
+    }
 
     // 6. Unwrap bare <span> elements (no class, style, or attributes)
-    if (unwrapBareSpans(root)) changed = true;
+    if (unwrapBareSpans(root)) {
+      changed = true;
+    }
   }
 }
 
@@ -315,7 +366,7 @@ function mergeAdjacentSiblings(root: HTMLElement) {
     const [el, next] = toMerge[i];
     // Move all children from next into el
     while (next.firstChild) {
-      el.appendChild(next.firstChild);
+      el.append(next.firstChild);
     }
     next.remove();
     changed = true;
@@ -337,7 +388,9 @@ function collapseRedundantNesting(root: HTMLElement) {
 
   while (walker.nextNode()) {
     const el = walker.currentNode as Element;
-    if (!FORMAT_TAGS.has(el.tagName.toLowerCase())) continue;
+    if (!FORMAT_TAGS.has(el.tagName.toLowerCase())) {
+      continue;
+    }
     // Check if only child is an element with the same tag
     if (
       el.childNodes.length === 1 &&
@@ -353,9 +406,9 @@ function collapseRedundantNesting(root: HTMLElement) {
     const inner = el.firstChild as Element;
     // Replace outer with inner's children
     while (inner.firstChild) {
-      el.insertBefore(inner.firstChild, inner);
+      inner.before(inner.firstChild);
     }
-    el.removeChild(inner);
+    inner.remove();
     changed = true;
   }
   return changed;
@@ -374,7 +427,9 @@ function removeEmptyInlines(root: HTMLElement) {
 
   while (walker.nextNode()) {
     const el = walker.currentNode as Element;
-    if (!FORMAT_TAGS.has(el.tagName.toLowerCase())) continue;
+    if (!FORMAT_TAGS.has(el.tagName.toLowerCase())) {
+      continue;
+    }
     if (el.childNodes.length === 0 && !el.textContent) {
       toRemove.push(el);
     }
@@ -402,15 +457,19 @@ function liftEdgeWhitespace(root: HTMLElement) {
 
   while (walker.nextNode()) {
     const el = walker.currentNode as Element;
-    if (!FORMAT_TAGS.has(el.tagName.toLowerCase())) continue;
-    if (el === root) continue;
+    if (!FORMAT_TAGS.has(el.tagName.toLowerCase())) {
+      continue;
+    }
+    if (el === root) {
+      continue;
+    }
 
     const first = el.firstChild;
     if (first && first.nodeType === Node.TEXT_NODE) {
       const text = first.textContent ?? "";
       const m = text.match(/^(\s+)/);
       if (m && text.length > m[1].length) {
-        ops.push({ type: "lift-leading", el, ws: m[1] });
+        ops.push({ el, type: "lift-leading", ws: m[1] });
       }
     }
 
@@ -419,7 +478,7 @@ function liftEdgeWhitespace(root: HTMLElement) {
       const text = last.textContent ?? "";
       const m = text.match(/(\s+)$/);
       if (m && text.length > m[1].length) {
-        ops.push({ type: "lift-trailing", el, ws: m[1] });
+        ops.push({ el, type: "lift-trailing", ws: m[1] });
       }
     }
   }
@@ -454,10 +513,16 @@ function unwrapBareSpans(root: HTMLElement) {
 
   while (walker.nextNode()) {
     const el = walker.currentNode as Element;
-    if (el.tagName.toLowerCase() !== "span") continue;
-    if (el === root) continue;
+    if (el.tagName.toLowerCase() !== "span") {
+      continue;
+    }
+    if (el === root) {
+      continue;
+    }
     // Keep spans with class, style, or any attributes
-    if (el.attributes.length > 0) continue;
+    if (el.attributes.length > 0) {
+      continue;
+    }
     toUnwrap.push(el);
   }
 
@@ -498,8 +563,8 @@ function attributesMatch(a: Element, b: Element) {
  * @param {Range} range
  */
 export function expandRangeToTemplateExpressions(range: Range) {
-  expandBoundary(range, true); // start
-  expandBoundary(range, false); // end
+  expandBoundary(range, true); // Start
+  expandBoundary(range, false); // End
 }
 
 /**
@@ -512,24 +577,24 @@ export function expandRangeToTemplateExpressions(range: Range) {
 function expandBoundary(range: Range, isStart: boolean) {
   const node = isStart ? range.startContainer : range.endContainer;
   const offset = isStart ? range.startOffset : range.endOffset;
-  if (node.nodeType !== Node.TEXT_NODE) return;
+  if (node.nodeType !== Node.TEXT_NODE) {
+    return;
+  }
 
   const text = node.textContent ?? "";
 
   // Find all ${...} expression spans in this text node (supporting nested braces)
   const exprs = findTemplateExpressions(text);
   for (const expr of exprs) {
-    // expr = { start, end } — character indices of "$" and the closing "}" + 1
+    // Expr = { start, end } — character indices of "$" and the closing "}" + 1
     if (isStart) {
       // If the range starts inside this expression, move it to include the whole expr
       if (offset > expr.start && offset < expr.end) {
         range.setStart(node, expr.start);
       }
-    } else {
+    } else if (offset > expr.start && offset < expr.end) {
       // If the range ends inside this expression, expand to include the whole expr
-      if (offset > expr.start && offset < expr.end) {
-        range.setEnd(node, expr.end);
-      }
+      range.setEnd(node, expr.end);
     }
   }
 }
@@ -551,17 +616,20 @@ export function findTemplateExpressions(text: string) {
       let depth = 1;
       let j = i + 2;
       while (j < text.length && depth > 0) {
-        if (text[j] === "{") depth++;
-        else if (text[j] === "}") depth--;
-        j++;
+        if (text[j] === "{") {
+          depth += 1;
+        } else if (text[j] === "}") {
+          depth -= 1;
+        }
+        j += 1;
       }
       if (depth === 0) {
-        results.push({ start, end: j });
+        results.push({ end: j, start });
         i = j;
         continue;
       }
     }
-    i++;
+    i += 1;
   }
   return results;
 }

package/src/editor/insertion-helper.ts

@@ -8,14 +8,14 @@
 
 import { showSlashMenu } from "./slash-menu";
 import { activeTab } from "../workspace/workspace";
-import { transactDoc, mutateInsertNode } from "../tabs/transact";
+import { mutateInsertNode, transactDoc } from "../tabs/transact";
 import type { CanvasPanel } from "../types";
 import type { JxPath } from "../state";
 import type { JxMutableNode } from "@jxsuite/schema/types";
 
 interface ObservableSubscription {
-  subscribe(observer: { next: (e: Event) => void }): void;
-  subscribe(observer: { next: (e: MouseEvent) => void }): void;
+  subscribe: ((observer: { next: (e: Event) => void }) => void) &
+    ((observer: { next: (e: MouseEvent) => void }) => void);
 }
 
 interface ObservableElement {
@@ -26,7 +26,7 @@ interface InsertionHelperContext {
   getCanvasMode: () => string; // Returns the active canvas mode.
   withPanelPointerEvents: (fn: () => unknown) => unknown; // Executes fn with pointer-events
   effectiveZoom: () => number; // Returns the current zoom scale factor.
-  defaultDef: (tag: string) => object; // Creates a default element definition for a tag.
+  defaultDef: (tag: string) => JxMutableNode; // Creates a default element definition for a tag.
   parentElementPath: (path: JxPath) => JxPath | null; // Returns the parent element path,
   childIndex: (path: JxPath) => string | number; // Returns the child index within the
   getNodeAtPath: (doc: JxMutableNode, path: JxPath) => JxMutableNode | null; // Retrieves
@@ -82,7 +82,7 @@ export function mount(ctx: InsertionHelperContext) {
   _helper.addEventListener("mouseleave", () => {
     scheduleHide();
   });
-  panel.viewport.appendChild(_helper);
+  panel.viewport.append(_helper);
 
   _abort = new AbortController();
 
@@ -105,7 +105,9 @@ export function unmount() {
   _abort?.abort();
   _abort = null;
   cancelHide();
-  if (_helper?.parentElement) _helper.remove();
+  if (_helper?.parentElement) {
+    _helper.remove();
+  }
   clearAnchor();
   _helper = null;
   _ctx = null;
@@ -116,7 +118,9 @@ export function unmount() {
 
 /** @param {MouseEvent} e */
 function onMouseMove(e: MouseEvent) {
-  if (!_ctx || !_helper) return;
+  if (!_ctx || !_helper) {
+    return;
+  }
 
   const { getCanvasMode } = _ctx;
   const mode = getCanvasMode();
@@ -161,7 +165,7 @@ function onMouseMove(e: MouseEvent) {
   }
 
   const parentStyle = getComputedStyle(parent);
-  const display = parentStyle.display;
+  const { display } = parentStyle;
   const isFlex = display === "flex" || display === "inline-flex";
   const isGrid = display === "grid" || display === "inline-grid";
   const isRow =
@@ -208,7 +212,9 @@ function onMouseMove(e: MouseEvent) {
  * @param {number} idx
  */
 function showAt(el: HTMLElement, edge: string, path: JxPath, parentPath: JxPath, idx: number) {
-  if (!_helper) return;
+  if (!_helper) {
+    return;
+  }
 
   // Set CSS anchor on target element
   if (_currentAnchor !== el) {
@@ -219,7 +225,7 @@ function showAt(el: HTMLElement, edge: string, path: JxPath, parentPath: JxPath,
 
   _helper.dataset.edge = edge;
   _helper.classList.add("visible");
-  _insertionPoint = { edge, path, parentPath, idx };
+  _insertionPoint = { edge, idx, parentPath, path };
   cancelHide();
 }
 
@@ -241,7 +247,9 @@ function hide() {
 
 function hideNow() {
   _hideTimer = null;
-  if (!_helper) return;
+  if (!_helper) {
+    return;
+  }
   _helper.classList.remove("visible");
   clearAnchor();
   _insertionPoint = null;
@@ -260,12 +268,14 @@ function onHelperClick(e: MouseEvent) {
   e.stopPropagation();
   e.preventDefault();
 
-  if (!_ctx || !_helper || !_insertionPoint) return;
+  if (!_ctx || !_helper || !_insertionPoint) {
+    return;
+  }
 
   const captured = _insertionPoint;
   showSlashMenu(_helper, "", {
-    showFilter: true,
     onSelect: (cmd) => onSlashSelect(cmd, captured),
+    showFilter: true,
   });
 }
 
@@ -277,7 +287,9 @@ function onSlashSelect(
   cmd: { label: string; tag: string; description?: string },
   point: { edge: string; path: JxPath; parentPath: JxPath; idx: number },
 ) {
-  if (!_ctx) return;
+  if (!_ctx) {
+    return;
+  }
 
   const { defaultDef } = _ctx;
   const { parentPath, idx, edge } = point;