tosijs-styled-editor 0.4.2

package/dist/module.js

@@ -0,0 +1,3919 @@
+// src/dom-utils.ts
+function makeFilter(filter) {
+  if (typeof filter === "function") {
+    return filter;
+  }
+  if (typeof filter === "string") {
+    const selector = filter;
+    return (node) => node.nodeType === 1 && node.matches(selector);
+  }
+  return () => true;
+}
+function isBefore(a, b) {
+  return (a.compareDocumentPosition(b) & 4) !== 0;
+}
+function siblingOrder(node) {
+  const parent = node.parentNode;
+  if (!parent)
+    return -1;
+  const children = parent.childNodes;
+  for (let i = 0;i < children.length; i++) {
+    if (children[i] === node)
+      return i;
+  }
+  return -1;
+}
+function firstLeafNode(node) {
+  while (node.firstChild) {
+    node = node.firstChild;
+  }
+  return node;
+}
+function lastLeafNode(node) {
+  while (node.lastChild) {
+    node = node.lastChild;
+  }
+  return node;
+}
+function nextLeafNode(node, root, filter) {
+  const fn = filter !== undefined ? makeFilter(filter) : null;
+  let current = node;
+  while (current) {
+    if (current.nextSibling) {
+      const next = firstLeafNode(current.nextSibling);
+      if (!fn || fn(next))
+        return next;
+      current = next;
+      continue;
+    }
+    if (current.parentNode && current.parentNode !== (root || null)) {
+      current = current.parentNode;
+      continue;
+    }
+    break;
+  }
+  return null;
+}
+function previousLeafNode(node, root, filter) {
+  const fn = filter !== undefined ? makeFilter(filter) : null;
+  let current = node;
+  while (current) {
+    if (current.previousSibling) {
+      const prev = lastLeafNode(current.previousSibling);
+      if (!fn || fn(prev))
+        return prev;
+      current = prev;
+      continue;
+    }
+    if (current.parentNode && current.parentNode !== (root || null)) {
+      current = current.parentNode;
+      continue;
+    }
+    break;
+  }
+  return null;
+}
+function leafNodes(node, filter) {
+  const result = [];
+  const fn = filter !== undefined ? makeFilter(filter) : null;
+  function walk(n) {
+    if (!n.firstChild) {
+      if (!fn || fn(n)) {
+        result.push(n);
+      }
+    } else {
+      for (let i = 0;i < n.childNodes.length; i++) {
+        walk(n.childNodes[i]);
+      }
+    }
+  }
+  walk(node);
+  return result;
+}
+function topSingleParentAncestor(node, filter) {
+  const fn = makeFilter(filter);
+  while (node.parentNode && node.parentNode.childNodes.length === 1 && fn(node.parentNode)) {
+    node = node.parentNode;
+  }
+  return node;
+}
+function closestSingleParentAncestor(node, filter) {
+  const fn = makeFilter(filter);
+  let current = node.parentNode;
+  while (current) {
+    if (fn(current))
+      return current;
+    if (!current.parentNode || current.parentNode.childNodes.length !== 1)
+      break;
+    current = current.parentNode;
+  }
+  return null;
+}
+function allowSelection(element, allow) {
+  element.style.userSelect = allow ? "text" : "none";
+  element.style.webkitUserSelect = allow ? "text" : "none";
+}
+function isHitTestable(node) {
+  if (node.nodeType !== 3 || !node.textContent)
+    return false;
+  const parent = node.parentElement;
+  if (!parent)
+    return false;
+  return !parent.closest(".not-selectable, .do-not-spanify, .not-editable");
+}
+function characterAtPoint(root, x, y) {
+  const texts = [];
+  const walk = (node) => {
+    if (isHitTestable(node)) {
+      texts.push(node);
+      return;
+    }
+    for (const child of Array.from(node.childNodes))
+      walk(child);
+  };
+  walk(root);
+  if (texts.length === 0)
+    return null;
+  const range = document.createRange();
+  let nearestBand = Infinity;
+  const bands = [];
+  for (const node of texts) {
+    range.selectNodeContents(node);
+    const box = range.getBoundingClientRect();
+    if (box.width === 0 && box.height === 0)
+      continue;
+    const dy = y < box.top ? box.top - y : y > box.bottom ? y - box.bottom : 0;
+    bands.push({ node, dy });
+    if (dy < nearestBand)
+      nearestBand = dy;
+  }
+  if (bands.length === 0)
+    return null;
+  const candidates = bands.filter((entry) => entry.dy <= nearestBand + 2).map((entry) => entry.node);
+  let best = null;
+  let bestScore = Infinity;
+  const isRtl = (node) => {
+    const el = node.parentElement;
+    return !!el && getComputedStyle(el).direction === "rtl";
+  };
+  for (const node of candidates) {
+    const text = node.textContent || "";
+    const rtl = isRtl(node);
+    for (let i = 0;i < text.length; i++) {
+      range.setStart(node, i);
+      range.setEnd(node, i + 1);
+      const rect = range.getBoundingClientRect();
+      if (rect.width === 0 && rect.height === 0)
+        continue;
+      const dy = y < rect.top ? rect.top - y : y > rect.bottom ? y - rect.bottom : 0;
+      const dx = x < rect.left ? rect.left - x : x > rect.right ? x - rect.right : 0;
+      const centreDistance = Math.abs(x - (rect.left + rect.right) / 2);
+      const score = dy * 1000 + dx + centreDistance / 1000;
+      if (score < bestScore) {
+        bestScore = score;
+        best = {
+          node,
+          offset: i,
+          rect,
+          after: rtl ? x - rect.left < rect.width / 2 : x - rect.left >= rect.width / 2
+        };
+      }
+    }
+  }
+  return best;
+}
+function caretGeometryAt(marker, root) {
+  const nextText = (from) => {
+    let node = from;
+    while (node) {
+      if (node.nodeType === 3 && node.data.length > 0) {
+        return node;
+      }
+      node = nextLeafNode(node, root);
+    }
+    return null;
+  };
+  const prevText = (from) => {
+    let node = from;
+    while (node) {
+      if (node.nodeType === 3 && node.data.length > 0) {
+        return node;
+      }
+      node = previousLeafNode(node, root);
+    }
+    return null;
+  };
+  const caretAt = (node, offset) => {
+    const range2 = document.createRange();
+    range2.setStart(node, offset);
+    range2.collapse(true);
+    const rect = range2.getBoundingClientRect();
+    return rect.height ? { left: rect.left, top: rect.top, height: rect.height } : null;
+  };
+  const after = nextText(nextLeafNode(marker, root));
+  if (after) {
+    const geometry = caretAt(after, 0);
+    if (geometry)
+      return geometry;
+  }
+  const before = prevText(previousLeafNode(marker, root));
+  if (before) {
+    const geometry = caretAt(before, before.data.length);
+    if (geometry)
+      return geometry;
+  }
+  const rtl = getComputedStyle(marker.parentElement || marker).direction === "rtl";
+  const range = document.createRange();
+  if (after) {
+    range.setStart(after, 0);
+    range.setEnd(after, 1);
+    const rect = range.getBoundingClientRect();
+    if (rect.height) {
+      return {
+        left: rtl ? rect.right : rect.left,
+        top: rect.top,
+        height: rect.height
+      };
+    }
+  }
+  if (before) {
+    range.setStart(before, before.data.length - 1);
+    range.setEnd(before, before.data.length);
+    const rect = range.getBoundingClientRect();
+    if (rect.height) {
+      return {
+        left: rtl ? rect.left : rect.right,
+        top: rect.top,
+        height: rect.height
+      };
+    }
+  }
+  return null;
+}
+// src/selection.ts
+function characters(text) {
+  const Segmenter = Intl.Segmenter;
+  if (!Segmenter)
+    return Array.from(text);
+  const segmenter = new Segmenter(undefined, { granularity: "grapheme" });
+  return Array.from(segmenter.segment(text), (piece) => piece.segment);
+}
+function wordBoundsAt(text, offset) {
+  const Segmenter = Intl.Segmenter;
+  if (Segmenter) {
+    const segmenter = new Segmenter(undefined, { granularity: "word" });
+    for (const piece of segmenter.segment(text)) {
+      const end2 = piece.index + piece.segment.length;
+      if (offset >= piece.index && offset < end2) {
+        return { start: piece.index, end: end2 };
+      }
+    }
+    return { start: offset, end: offset };
+  }
+  let start = offset;
+  let end = offset;
+  while (start > 0 && !/\s/.test(text[start - 1]))
+    start--;
+  while (end < text.length && !/\s/.test(text[end]))
+    end++;
+  return { start, end };
+}
+function isSpanifiableText(node) {
+  return node.nodeType === 3 && !node.parentElement?.closest(".do-not-spanify");
+}
+function spanify(element, make, byWord = false) {
+  if (make) {
+    const textNodes = leafNodes(element, isSpanifiableText);
+    for (const textNode of textNodes) {
+      const text = textNode.textContent || "";
+      let pieces;
+      if (byWord) {
+        pieces = text.match(/\s+|\w+|[^\w\s]+/g) || [text];
+      } else {
+        pieces = characters(text);
+      }
+      if (pieces.length <= 1 && characters(text).length <= 1)
+        continue;
+      const parent = textNode.parentNode;
+      if (!parent)
+        continue;
+      if (parent instanceof Element) {
+        parent.classList.remove("spanified");
+      }
+      const fragment = document.createDocumentFragment();
+      for (const piece of pieces) {
+        if (/^\s+$/.test(piece)) {
+          fragment.appendChild(document.createTextNode(piece));
+          continue;
+        }
+        if (characters(piece).length > 1) {
+          const wordSpan = document.createElement("span");
+          wordSpan.className = "spanified-word";
+          wordSpan.textContent = piece;
+          spanify(wordSpan, true, false);
+          fragment.appendChild(wordSpan);
+        } else {
+          const charSpan = document.createElement("span");
+          charSpan.className = "spanified";
+          charSpan.textContent = piece;
+          fragment.appendChild(charSpan);
+        }
+      }
+      parent.replaceChild(fragment, textNode);
+    }
+  } else {
+    const wordSpans = Array.from(element.querySelectorAll(".spanified-word"));
+    for (const span of wordSpans) {
+      const parent = span.parentNode;
+      if (parent) {
+        while (span.firstChild) {
+          parent.insertBefore(span.firstChild, span);
+        }
+        parent.removeChild(span);
+      }
+    }
+    const charSpans = Array.from(element.querySelectorAll(".spanified"));
+    for (const span of charSpans) {
+      const parent = span.parentNode;
+      if (parent) {
+        while (span.firstChild) {
+          parent.insertBefore(span.firstChild, span);
+        }
+        parent.removeChild(span);
+      }
+    }
+    element.normalize();
+  }
+}
+
+class Selectable {
+  root;
+  selecting = false;
+  touchMode = false;
+  constructor(root) {
+    this.root = root;
+    this.setup();
+  }
+  lastHovered = null;
+  pendingCollapse = null;
+  setup() {
+    allowSelection(this.root, false);
+    this.root.addEventListener("mousemove", this.handleMouseMove);
+    this.root.addEventListener("mousedown", this.handleMouseDown);
+    this.root.addEventListener("mouseup", this.handleMouseUp);
+    this.root.addEventListener("mouseleave", this.handleMouseLeave);
+    this.root.addEventListener("touchstart", this.handleTouchStart, {
+      passive: false
+    });
+    this.root.addEventListener("touchmove", this.handleTouchMove, {
+      passive: false
+    });
+    this.root.addEventListener("touchend", this.handleTouchEnd, {
+      passive: false
+    });
+  }
+  destroy() {
+    this.root.removeEventListener("mousemove", this.handleMouseMove);
+    this.root.removeEventListener("mousedown", this.handleMouseDown);
+    this.root.removeEventListener("mouseup", this.handleMouseUp);
+    this.root.removeEventListener("mouseleave", this.handleMouseLeave);
+    this.root.removeEventListener("touchstart", this.handleTouchStart);
+    this.root.removeEventListener("touchmove", this.handleTouchMove);
+    this.root.removeEventListener("touchend", this.handleTouchEnd);
+  }
+  handleMouseMove = (evt) => {
+    const target = evt.target;
+    if (target.closest(".not-selectable") || target.classList.contains("not-selectable")) {
+      return;
+    }
+    if (this.lastHovered && this.lastHovered !== target) {
+      const prevBlock = this.topLevelAncestor(this.lastHovered);
+      const currBlock = this.topLevelAncestor(target);
+      if (prevBlock && prevBlock !== currBlock && !prevBlock.classList.contains("selected-block")) {
+        spanify(prevBlock, false);
+      }
+    }
+    if (target instanceof Element && target !== this.root) {
+      this.lastHovered = target;
+    }
+    if (this.selecting) {
+      const hit = characterAtPoint(this.root, evt.clientX, evt.clientY);
+      const selEnd = this.find(".sel-end");
+      if (hit && selEnd) {
+        const range = document.createRange();
+        range.setStart(hit.node, hit.after ? hit.offset + 1 : hit.offset);
+        range.collapse(true);
+        range.insertNode(selEnd);
+        this.root.normalize();
+        this.extendSelection();
+        this.onBoundsChanged?.();
+      }
+    }
+    evt.preventDefault();
+    evt.stopPropagation();
+  };
+  placeCaretAt(x, y) {
+    const hit = characterAtPoint(this.root, x, y);
+    if (!hit)
+      return;
+    this.removeBounds();
+    const range = document.createRange();
+    range.setStart(hit.node, hit.after ? hit.offset + 1 : hit.offset);
+    range.collapse(true);
+    range.insertNode(this.createBounds());
+    this.root.normalize();
+    this.onBoundsChanged?.();
+  }
+  selectWordAt(node, offset) {
+    const block = this.topLevelAncestor(node) || this.root;
+    const parts = [];
+    let text = "";
+    const walker = document.createTreeWalker(block, NodeFilter.SHOW_TEXT);
+    let current;
+    while (current = walker.nextNode()) {
+      const textNode = current;
+      parts.push({ node: textNode, start: text.length });
+      text += textNode.data;
+    }
+    const hitPart = parts.find((part) => part.node === node);
+    if (!hitPart)
+      return;
+    const { start, end } = wordBoundsAt(text, hitPart.start + offset);
+    const locate = (index) => {
+      for (let i = parts.length - 1;i >= 0; i--) {
+        if (index >= parts[i].start) {
+          return { node: parts[i].node, offset: index - parts[i].start };
+        }
+      }
+      return null;
+    };
+    const startPos = locate(start);
+    const endPos = locate(end);
+    if (!startPos || !endPos)
+      return;
+    this.removeBounds();
+    const startEl = document.createElement("span");
+    startEl.className = "sel-start";
+    const endEl = document.createElement("span");
+    endEl.className = "sel-end caret";
+    const endRange = document.createRange();
+    endRange.setStart(endPos.node, Math.min(endPos.offset, endPos.node.length));
+    endRange.collapse(true);
+    endRange.insertNode(endEl);
+    const startRange = document.createRange();
+    startRange.setStart(startPos.node, Math.min(startPos.offset, startPos.node.length));
+    startRange.collapse(true);
+    startRange.insertNode(startEl);
+    this.onBoundsChanged?.();
+  }
+  handleMouseDown = (evt) => {
+    this.touchMode = false;
+    let target = evt.target;
+    if (target.closest(".not-selectable") || target.classList.contains("not-selectable")) {
+      return;
+    }
+    if (evt.detail === 1 && !evt.shiftKey && target.closest?.(".selected") && !target.closest?.(".not-selectable")) {
+      this.pendingCollapse = { x: evt.clientX, y: evt.clientY, target };
+      return;
+    }
+    this.selecting = evt.detail;
+    const hit = characterAtPoint(this.root, evt.clientX, evt.clientY);
+    if (hit) {
+      if (evt.shiftKey) {
+        const selEnd = this.find(".sel-end");
+        if (selEnd) {
+          selEnd.remove();
+          const range = document.createRange();
+          range.setStart(hit.node, hit.after ? hit.offset + 1 : hit.offset);
+          range.collapse(true);
+          range.insertNode(selEnd);
+          this.root.normalize();
+          this.extendSelection();
+        }
+      } else if (this.selecting === 1) {
+        this.placeCaretAt(evt.clientX, evt.clientY);
+      } else if (this.selecting === 2) {
+        this.selectWordAt(hit.node, hit.offset);
+        this.extendSelection();
+      } else {
+        this.placeCaretAt(evt.clientX, evt.clientY);
+        this.extendSelection();
+      }
+    } else if (target instanceof HTMLElement && target.querySelectorAll(".spanified").length === 0 && target !== this.root) {
+      this.removeBounds();
+      const bounds = this.createBounds();
+      target.appendChild(bounds);
+    }
+    evt.preventDefault();
+    evt.stopPropagation();
+  };
+  handleMouseUp = (evt) => {
+    const pending = this.pendingCollapse;
+    this.pendingCollapse = null;
+    if (pending) {
+      const moved = Math.abs(evt.clientX - pending.x) + Math.abs(evt.clientY - pending.y);
+      if (moved < 4) {
+        this.unmark();
+        this.selecting = 1;
+        this.placeCaretAt(pending.x, pending.y);
+        this.selecting = false;
+        this.selectionChanged();
+      }
+      return;
+    }
+    const target = evt.target;
+    if (target.closest(".not-selectable") || target.classList.contains("not-selectable")) {
+      return;
+    }
+    if (this.selecting) {
+      const mode = this.selecting;
+      this.extendSelection();
+      if (mode !== 1)
+        this.resetBounds();
+      this.normalizeBoundsOrder();
+      this.selecting = false;
+    }
+    for (const child of Array.from(this.root.children)) {
+      if (!child.classList.contains("selected-block")) {
+        spanify(child, false);
+      }
+    }
+    this.lastHovered = null;
+    this.selectionChanged();
+    evt.preventDefault();
+    evt.stopPropagation();
+  };
+  handleMouseLeave = () => {
+    if (this.lastHovered) {
+      const block = this.topLevelAncestor(this.lastHovered);
+      if (block && !block.classList.contains("selected-block")) {
+        spanify(block, false);
+      }
+      this.lastHovered = null;
+    }
+  };
+  handleTouchStart = (evt) => {
+    if (evt.touches.length !== 1)
+      return;
+    this.touchMode = true;
+    const touch = evt.touches[0];
+    let target = evt.target;
+    if (target.closest(".not-selectable") || target.classList.contains("not-selectable")) {
+      return;
+    }
+    this.selecting = 1;
+    const hit = characterAtPoint(this.root, touch.clientX, touch.clientY);
+    if (hit) {
+      this.placeCaretAt(touch.clientX, touch.clientY);
+    } else if (target instanceof HTMLElement && target !== this.root) {
+      this.removeBounds();
+      const bounds = this.createBounds();
+      target.appendChild(bounds);
+    }
+    if (evt.cancelable)
+      evt.preventDefault();
+  };
+  handleTouchMove = (evt) => {
+    if (!this.selecting || evt.touches.length !== 1)
+      return;
+    const touch = evt.touches[0];
+    const rootNode = this.root.getRootNode();
+    let target = rootNode.elementFromPoint ? rootNode.elementFromPoint(touch.clientX, touch.clientY) : document.elementFromPoint(touch.clientX, touch.clientY);
+    if (!target || target.closest(".not-selectable") || target.classList.contains("not-selectable")) {
+      return;
+    }
+    const hit = characterAtPoint(this.root, touch.clientX, touch.clientY);
+    const selEnd = this.find(".sel-end");
+    if (hit && selEnd) {
+      const range = document.createRange();
+      range.setStart(hit.node, hit.after ? hit.offset + 1 : hit.offset);
+      range.collapse(true);
+      range.insertNode(selEnd);
+      this.root.normalize();
+      this.extendSelection();
+      this.onBoundsChanged?.();
+    }
+    if (evt.cancelable)
+      evt.preventDefault();
+  };
+  handleTouchEnd = (evt) => {
+    if (this.selecting) {
+      this.extendSelection();
+      this.normalizeBoundsOrder();
+      this.selecting = false;
+    }
+    for (const child of Array.from(this.root.children)) {
+      if (!child.classList.contains("selected-block")) {
+        spanify(child, false);
+      }
+    }
+    this.lastHovered = null;
+    this.selectionChanged();
+    if (evt.cancelable)
+      evt.preventDefault();
+  };
+  selectionChanged() {
+    this.focus();
+    this.root.dispatchEvent(new CustomEvent("selectionchanged", { bubbles: true }));
+  }
+  onBoundsChanged;
+  focusTarget;
+  focus() {
+    this.focusTarget?.focus();
+    this.onBoundsChanged?.();
+  }
+  createBounds() {
+    const fragment = document.createDocumentFragment();
+    const start = document.createElement("span");
+    start.className = "sel-start";
+    const end = document.createElement("span");
+    end.className = "sel-end caret";
+    fragment.appendChild(start);
+    fragment.appendChild(end);
+    return fragment;
+  }
+  normalizeBoundsOrder() {
+    const start = this.find(".sel-start");
+    const end = this.find(".sel-end");
+    if (!start || !end || start === end)
+      return;
+    if (isBefore(start, end))
+      return;
+    start.className = "sel-end caret";
+    end.className = "sel-start";
+    this.onBoundsChanged?.();
+  }
+  find(selector) {
+    return this.root.querySelector(selector);
+  }
+  findAll(selector) {
+    return Array.from(this.root.querySelectorAll(selector));
+  }
+  markBounds() {
+    const start = this.find(".sel-start");
+    const end = this.find(".sel-end");
+    if (start && end) {
+      this.markRange(start, end);
+    }
+    this.onBoundsChanged?.();
+  }
+  removeBounds() {
+    for (const el of this.findAll(".sel-start, .sel-end")) {
+      el.remove();
+    }
+    this.onBoundsChanged?.();
+  }
+  resetBounds() {
+    const selected = this.findAll(".selected");
+    if (selected.length === 0)
+      return this;
+    this.removeBounds();
+    const startMarker = document.createElement("span");
+    startMarker.className = "sel-start";
+    const endMarker = document.createElement("span");
+    endMarker.className = "sel-end caret";
+    const firstSelected = selected[0];
+    const lastSelected = selected[selected.length - 1];
+    const firstLeaf = firstLeafNode(firstSelected);
+    const lastLeaf = lastLeafNode(lastSelected);
+    firstLeaf.parentNode?.insertBefore(startMarker, firstLeaf);
+    lastLeaf.parentNode?.insertBefore(endMarker, lastLeaf.nextSibling);
+    this.onBoundsChanged?.();
+    return this;
+  }
+  extendSelection() {
+    const startEl = this.find(".sel-start");
+    const endEl = this.find(".sel-end");
+    if (!startEl || !endEl)
+      return;
+    let first = startEl;
+    let last = endEl;
+    switch (this.selecting) {
+      case 1:
+        break;
+      case 2:
+        if (first.closest(".spanified-word")) {
+          first = first.closest(".spanified-word");
+        }
+        if (last.closest(".spanified-word")) {
+          last = last.closest(".spanified-word");
+        }
+        break;
+      default:
+        first = this.topLevelAncestor(first) || first;
+        last = this.topLevelAncestor(last) || last;
+        break;
+    }
+    this.markRange(first, last);
+    this.onBoundsChanged?.();
+  }
+  topLevelAncestor(node) {
+    let current = node;
+    while (current && current.parentNode !== this.root) {
+      current = current.parentNode;
+    }
+    return current instanceof Element ? current : null;
+  }
+  unmark() {
+    for (const el of this.findAll(".selected")) {
+      el.classList.remove("selected");
+      el.removeAttribute("draggable");
+      el.removeAttribute("data-drag");
+      if (el instanceof HTMLElement && el.classList.length === 0 && el.getAttribute("class") !== null) {
+        el.removeAttribute("class");
+      }
+    }
+    for (const span of this.findAll("span")) {
+      if (span.attributes.length === 0) {
+        const parent = span.parentNode;
+        if (parent) {
+          while (span.firstChild) {
+            parent.insertBefore(span.firstChild, span);
+          }
+          parent.removeChild(span);
+        }
+      }
+    }
+    for (const el of this.findAll(".selected-block")) {
+      el.classList.remove("selected-block");
+    }
+    for (const el of this.findAll(".first-block")) {
+      el.classList.remove("first-block");
+    }
+    for (const el of this.findAll(".last-block")) {
+      el.classList.remove("last-block");
+    }
+  }
+  isBlock(node) {
+    return node.parentNode === this.root;
+  }
+  markRange(first, last) {
+    if (!first)
+      return;
+    if (!last)
+      last = first;
+    if (!isBefore(first, last) && first !== last) {
+      const temp = last;
+      last = first;
+      first = temp;
+    }
+    this.unmark();
+    const firstBlock = this.isBlock(first) ? first : this.topLevelAncestor(first);
+    const lastBlock = this.isBlock(last) ? last : this.topLevelAncestor(last);
+    if (!firstBlock || !lastBlock)
+      return;
+    firstBlock.classList.add("first-block");
+    lastBlock.classList.add("last-block");
+    const blocks = [firstBlock];
+    if (firstBlock !== lastBlock) {
+      let current = firstBlock.nextElementSibling;
+      while (current && current !== lastBlock) {
+        blocks.push(current);
+        current = current.nextElementSibling;
+      }
+      blocks.push(lastBlock);
+    }
+    for (const block of blocks) {
+      block.classList.add("selected-block");
+    }
+    for (const child of Array.from(this.root.children)) {
+      if (!child.classList.contains("selected-block")) {
+        spanify(child, false);
+      }
+    }
+    let firstNode = first.classList.contains("sel-start") || first.classList.contains("sel-end") ? nextLeafNode(first, this.root) : firstLeafNode(first);
+    let lastNode = last.classList.contains("sel-start") || last.classList.contains("sel-end") ? previousLeafNode(last, this.root) : lastLeafNode(last);
+    if (!firstNode || !lastNode)
+      return;
+    const allLeaves = [];
+    for (const block of blocks) {
+      allLeaves.push(...leafNodes(block));
+    }
+    const firstIdx = allLeaves.indexOf(firstNode);
+    const lastIdx = allLeaves.indexOf(lastNode);
+    if (firstIdx < 0 || lastIdx < 0)
+      return;
+    for (let i = firstIdx;i <= lastIdx; i++) {
+      this.markNode(allLeaves[i]);
+    }
+  }
+  static DRAG_TYPES = "text/html;text/plain";
+  makeDraggable(el) {
+    el.setAttribute("draggable", "true");
+    el.setAttribute("data-drag", Selectable.DRAG_TYPES);
+  }
+  markNode(node) {
+    if (node.nodeType === 3) {
+      const parent = node.parentNode;
+      if (parent && parent.childNodes.length === 1) {
+        parent.classList.add("selected");
+        this.makeDraggable(parent);
+      } else if (parent) {
+        const span = document.createElement("span");
+        span.className = "selected";
+        parent.insertBefore(span, node);
+        span.appendChild(node);
+        this.makeDraggable(span);
+      }
+    } else if (node instanceof Element) {
+      if (!node.classList.contains("sel-start") && !node.classList.contains("sel-end")) {
+        node.classList.add("selected");
+        this.makeDraggable(node);
+      }
+    }
+  }
+  despanify() {
+    for (const child of Array.from(this.root.children)) {
+      if (!child.classList.contains("selected-block")) {
+        spanify(child, false);
+      }
+    }
+    this.lastHovered = null;
+  }
+  normalize() {
+    const root = this.root;
+    for (let i = root.childNodes.length - 1;i >= 0; i--) {
+      const child = root.childNodes[i];
+      if (child.nodeType === 3 && /^\s*$/.test(child.textContent || "")) {
+        root.removeChild(child);
+      }
+    }
+    for (const table of Array.from(root.querySelectorAll(".editor-table"))) {
+      for (let i = table.childNodes.length - 1;i >= 0; i--) {
+        const child = table.childNodes[i];
+        if (child.nodeType === 3) {
+          table.removeChild(child);
+        }
+      }
+    }
+    root.normalize();
+    return this;
+  }
+}
+// src/table-utils.ts
+var TABLE_CLASS = "editor-table";
+function isLI(node) {
+  return node instanceof Element && node.tagName === "LI";
+}
+function isUL(node) {
+  return node instanceof Element && node.tagName === "UL";
+}
+function isTableCell(node) {
+  return cellOf(node) !== null;
+}
+function cellOf(node) {
+  let current = node;
+  while (current) {
+    if (isLI(current) && current.parentElement?.classList.contains(TABLE_CLASS)) {
+      return current;
+    }
+    current = current.parentNode;
+  }
+  return null;
+}
+function tableOf(node) {
+  let current = node;
+  while (current) {
+    if (isUL(current) && current.classList.contains(TABLE_CLASS)) {
+      return current;
+    }
+    current = current.parentNode;
+  }
+  return null;
+}
+function getColumnCount(table) {
+  const cols = table.style.gridTemplateColumns.trim();
+  if (!cols)
+    return 1;
+  return cols.split(/\s+/).length;
+}
+function getColumnWidths(table) {
+  const cols = table.style.gridTemplateColumns.trim();
+  if (!cols)
+    return ["1fr"];
+  return cols.split(/\s+/);
+}
+function setColumnWidths(table, widths) {
+  table.style.gridTemplateColumns = widths.join(" ");
+}
+function cellIndex(cell) {
+  const table = cell.parentElement;
+  if (!table)
+    return -1;
+  const cells = Array.from(table.querySelectorAll(":scope > li"));
+  return cells.indexOf(cell);
+}
+function rowOfCell(cell, colCount) {
+  return Math.floor(cellIndex(cell) / colCount);
+}
+function colOfCell(cell, colCount) {
+  return cellIndex(cell) % colCount;
+}
+function cellBelow(cell) {
+  const table = cell.parentElement;
+  if (!table)
+    return null;
+  const colCount = getColumnCount(table);
+  const idx = cellIndex(cell);
+  const targetIdx = idx + colCount;
+  const cells = Array.from(table.querySelectorAll(":scope > li"));
+  return targetIdx < cells.length ? cells[targetIdx] : null;
+}
+function cellAbove(cell) {
+  const table = cell.parentElement;
+  if (!table)
+    return null;
+  const colCount = getColumnCount(table);
+  const idx = cellIndex(cell);
+  const targetIdx = idx - colCount;
+  if (targetIdx < 0)
+    return null;
+  const cells = Array.from(table.querySelectorAll(":scope > li"));
+  return cells[targetIdx];
+}
+function nextCell(cell) {
+  const next = cell.nextElementSibling;
+  return next && isLI(next) ? next : null;
+}
+function prevCell(cell) {
+  const prev = cell.previousElementSibling;
+  return prev && isLI(prev) ? prev : null;
+}
+function isHeaderCell(cell) {
+  return cell.classList.contains("table-header");
+}
+function createCell(isHeader = false) {
+  const li = document.createElement("li");
+  if (isHeader) {
+    li.classList.add("table-header");
+  }
+  li.innerHTML = " ";
+  return li;
+}
+function getCellsInRow(table, row, colCount) {
+  const cells = Array.from(table.querySelectorAll(":scope > li"));
+  const start = row * colCount;
+  return cells.slice(start, start + colCount);
+}
+function getCellsInCol(table, col, colCount) {
+  const cells = Array.from(table.querySelectorAll(":scope > li"));
+  const result = [];
+  for (let i = col;i < cells.length; i += colCount) {
+    result.push(cells[i]);
+  }
+  return result;
+}
+function getRowCount(table) {
+  const cells = table.querySelectorAll(":scope > li");
+  const colCount = getColumnCount(table);
+  return Math.ceil(cells.length / colCount);
+}
+function createTable(cols, rows = 2, headerRows = 1) {
+  const ul = document.createElement("ul");
+  ul.className = TABLE_CLASS;
+  ul.style.gridTemplateColumns = Array(cols).fill("1fr").join(" ");
+  for (let r = 0;r < rows; r++) {
+    const isHeader = r < headerRows;
+    for (let c = 0;c < cols; c++) {
+      ul.appendChild(createCell(isHeader));
+    }
+  }
+  return ul;
+}
+
+// src/commands.ts
+function makeCSS(args) {
+  if (args.length % 2 !== 0) {
+    console.error("Error: expected even number of arguments", args);
+    return null;
+  }
+  const css = {};
+  for (let i = 0;i < args.length; i += 2) {
+    css[args[i]] = args[i + 1].replace(/\+/g, " ");
+  }
+  return css;
+}
+function applyCSS(element, css) {
+  for (const [key, value] of Object.entries(css)) {
+    element.style.setProperty(key, value);
+  }
+}
+function isListElement(el) {
+  return (el.tagName === "UL" || el.tagName === "OL") && !el.classList.contains("editor-table");
+}
+function unwrapList(list) {
+  const parent = list.parentNode;
+  if (!parent)
+    return;
+  for (const item of Array.from(list.children)) {
+    const paragraph = document.createElement("p");
+    while (item.firstChild)
+      paragraph.appendChild(item.firstChild);
+    paragraph.classList.add("selected-block");
+    parent.insertBefore(paragraph, list);
+  }
+  list.remove();
+}
+function mergeAdjacentLists(list) {
+  let survivor = list;
+  const previous = survivor.previousElementSibling;
+  if (previous && isListElement(previous) && previous.tagName === survivor.tagName) {
+    while (survivor.firstChild)
+      previous.appendChild(survivor.firstChild);
+    previous.classList.add("selected-block");
+    survivor.remove();
+    survivor = previous;
+  }
+  const next = survivor.nextElementSibling;
+  if (next && isListElement(next) && next.tagName === survivor.tagName) {
+    while (next.firstChild)
+      survivor.appendChild(next.firstChild);
+    next.remove();
+  }
+  return survivor;
+}
+function applyLinkTarget(link, target) {
+  if (!target || target === "_self") {
+    link.removeAttribute("target");
+    link.removeAttribute("rel");
+    return;
+  }
+  link.setAttribute("target", target);
+  link.setAttribute("rel", "noopener");
+}
+var footnoteSeq = 0;
+function footnoteKey() {
+  footnoteSeq += 1;
+  return `fn-${Date.now().toString(36)}-${footnoteSeq}`;
+}
+function renumberFootnotes(root) {
+  const refs = Array.from(root.querySelectorAll(".footnote-ref[data-footnote]")).filter((ref) => !ref.closest(".footnotes"));
+  let list = root.querySelector("ol.footnotes");
+  if (refs.length === 0) {
+    list?.remove();
+    return;
+  }
+  if (!list) {
+    list = document.createElement("ol");
+    list.className = "footnotes";
+    root.appendChild(list);
+  }
+  const existing = new Map;
+  for (const item of Array.from(list.children)) {
+    const key = item.getAttribute("data-footnote");
+    if (key)
+      existing.set(key, item);
+  }
+  refs.forEach((ref, index) => {
+    const key = ref.getAttribute("data-footnote");
+    const link = ref.querySelector("a");
+    if (link) {
+      link.textContent = String(index + 1);
+      link.setAttribute("href", `#${key}`);
+    }
+    let item = existing.get(key);
+    if (!item) {
+      item = document.createElement("li");
+      item.className = "footnote";
+      item.setAttribute("data-footnote", key);
+      item.textContent = "Footnote text";
+    }
+    item.id = key;
+    existing.delete(key);
+    list.appendChild(item);
+  });
+  for (const orphan of existing.values())
+    orphan.remove();
+}
+var commands = {
+  setText(ctx, ...args) {
+    const css = makeCSS(args);
+    if (!css)
+      return;
+    ctx.selectable.resetBounds();
+    spanify(ctx.root, false);
+    ctx.selectable.markBounds();
+    ctx.normalize();
+    const nodes = ctx.selectedLeafNodes();
+    ctx.selectable.removeBounds();
+    for (const node of nodes) {
+      if (node.nodeType === 3) {
+        const existing = closestSingleParentAncestor(node, ".setText");
+        if (existing && existing instanceof HTMLElement) {
+          applyCSS(existing, css);
+        } else {
+          const span = document.createElement("span");
+          span.className = "setText";
+          applyCSS(span, css);
+          node.parentNode?.insertBefore(span, node);
+          span.appendChild(node);
+        }
+      }
+    }
+    ctx.selectable.resetBounds();
+    ctx.focus();
+    ctx.updateUndo("new");
+  },
+  setBlockType(ctx, newNodeType) {
+    const blocks = ctx.selectedBlocks();
+    for (const block of blocks) {
+      const newBlock = document.createElement(newNodeType);
+      while (block.firstChild) {
+        newBlock.appendChild(block.firstChild);
+      }
+      newBlock.classList.add("selected-block");
+      block.parentNode?.replaceChild(newBlock, block);
+    }
+    ctx.updateUndo("new");
+  },
+  setList(ctx, listType = "ul") {
+    const wanted = listType.toLowerCase();
+    const blocks = ctx.selectedBlocks().filter((block) => !block.classList.contains("editor-table"));
+    if (blocks.length === 0)
+      return;
+    const alreadyWanted = blocks.every(isListElement) && blocks.every((block) => block.tagName.toLowerCase() === wanted);
+    if (wanted === "none" || alreadyWanted) {
+      for (const block of blocks) {
+        if (isListElement(block))
+          unwrapList(block);
+      }
+      ctx.updateUndo("new");
+      return;
+    }
+    const groups = [];
+    for (const block of blocks) {
+      const run = groups[groups.length - 1];
+      if (run && run[run.length - 1].nextElementSibling === block) {
+        run.push(block);
+      } else {
+        groups.push([block]);
+      }
+    }
+    for (const group of groups) {
+      const list = document.createElement(wanted);
+      list.classList.add("selected-block");
+      for (const block of group) {
+        if (isListElement(block)) {
+          while (block.firstChild)
+            list.appendChild(block.firstChild);
+        } else {
+          const item = document.createElement("li");
+          while (block.firstChild)
+            item.appendChild(block.firstChild);
+          list.appendChild(item);
+        }
+      }
+      group[0].parentNode?.insertBefore(list, group[0]);
+      for (const block of group)
+        block.remove();
+      mergeAdjacentLists(list);
+    }
+    ctx.updateUndo("new");
+  },
+  setLink(ctx, url, target = "_blank") {
+    if (!url)
+      return;
+    ctx.selectable.resetBounds();
+    spanify(ctx.root, false);
+    ctx.selectable.markBounds();
+    ctx.normalize();
+    const nodes = ctx.selectedLeafNodes();
+    ctx.selectable.removeBounds();
+    for (const node of nodes) {
+      if (node.nodeType !== 3)
+        continue;
+      const existing = closestSingleParentAncestor(node, "a");
+      if (existing instanceof Element) {
+        existing.setAttribute("href", url);
+        applyLinkTarget(existing, target);
+      } else {
+        const link = document.createElement("a");
+        link.setAttribute("href", url);
+        applyLinkTarget(link, target);
+        node.parentNode?.insertBefore(link, node);
+        link.appendChild(node);
+      }
+    }
+    ctx.selectable.resetBounds();
+    ctx.focus();
+    ctx.updateUndo("new");
+  },
+  removeLink(ctx) {
+    ctx.selectable.resetBounds();
+    spanify(ctx.root, false);
+    ctx.selectable.markBounds();
+    const nodes = ctx.selectedLeafNodes();
+    ctx.selectable.removeBounds();
+    const links = new Set;
+    for (const node of nodes) {
+      const link = node.parentElement?.closest("a") ?? (node instanceof Element ? node.closest("a") : null);
+      if (link && ctx.root.contains(link))
+        links.add(link);
+    }
+    for (const link of links) {
+      const parent = link.parentNode;
+      if (!parent)
+        continue;
+      while (link.firstChild)
+        parent.insertBefore(link.firstChild, link);
+      parent.removeChild(link);
+    }
+    ctx.selectable.resetBounds();
+    ctx.focus();
+    ctx.updateUndo("new");
+  },
+  insertImage(ctx, url, ...alt) {
+    const ip = ctx.insertionPoint();
+    if (!ip || !url)
+      return;
+    const image = document.createElement("img");
+    image.setAttribute("src", url);
+    image.setAttribute("alt", alt.join(" "));
+    ip.before(image);
+    ctx.normalize();
+    ctx.focus();
+    ctx.updateUndo("new");
+  },
+  insertFootnote(ctx, ...text) {
+    const ip = ctx.insertionPoint();
+    if (!ip)
+      return;
+    const key = footnoteKey();
+    const marker = document.createElement("sup");
+    marker.className = "footnote-ref";
+    marker.setAttribute("data-footnote", key);
+    const link = document.createElement("a");
+    link.setAttribute("href", `#${key}`);
+    link.textContent = "?";
+    marker.appendChild(link);
+    ip.before(marker);
+    let list = ctx.root.querySelector("ol.footnotes");
+    if (!list) {
+      list = document.createElement("ol");
+      list.className = "footnotes";
+      ctx.root.appendChild(list);
+    }
+    const item = document.createElement("li");
+    item.className = "footnote";
+    item.setAttribute("data-footnote", key);
+    item.id = key;
+    item.textContent = text.length ? text.join(" ") : "Footnote text";
+    list.appendChild(item);
+    renumberFootnotes(ctx.root);
+    ctx.normalize();
+    ctx.focus();
+    ctx.updateUndo("new");
+  },
+  renumberFootnotes(ctx) {
+    renumberFootnotes(ctx.root);
+    ctx.updateUndo("new");
+  },
+  setBlocks(ctx, ...args) {
+    const css = makeCSS(args);
+    if (!css)
+      return;
+    for (const block of ctx.selectedBlocks()) {
+      applyCSS(block, css);
+    }
+    ctx.updateUndo("new");
+  },
+  updateUndo(ctx, command) {
+    ctx.updateUndo(command);
+  },
+  setDebug(ctx) {
+    ctx.root.classList.toggle("debug");
+  },
+  annotate(ctx, type) {
+    const insertionPoint = ctx.insertionPoint();
+    if (!insertionPoint)
+      return;
+    const template = document.querySelector(`.annotation-template .${type}`);
+    if (!template)
+      return;
+    const span = document.createElement("span");
+    span.className = "annotation do-not-spanify not-selectable not-editable";
+    const body = template.cloneNode(true);
+    body.classList.add("annotation-body");
+    span.appendChild(body);
+    insertionPoint.after(span);
+    ctx.updateUndo("new");
+  },
+  insertTable(ctx, ...args) {
+    const cols = parseInt(args[0]) || 3;
+    const rows = parseInt(args[1]) || 2;
+    const headerRows = parseInt(args[2]) || 1;
+    const ip = ctx.insertionPoint();
+    if (!ip)
+      return;
+    const block = ctx.block(ip);
+    const table = createTable(cols, rows, headerRows);
+    if (block) {
+      block.after(table);
+    } else {
+      ctx.root.appendChild(table);
+    }
+    const firstCell = table.querySelector("li");
+    if (firstCell) {
+      firstCell.innerHTML = "";
+      firstCell.appendChild(ctx.selectable.createBounds());
+      ctx.selectable.normalize();
+      ctx.focus();
+    }
+    ctx.updateUndo("new");
+  },
+  insertTableRow(ctx, position = "after") {
+    const ip = ctx.insertionPoint();
+    if (!ip)
+      return;
+    const cell = cellOf(ip);
+    if (!cell)
+      return;
+    const table = tableOf(cell);
+    if (!table)
+      return;
+    const colCount = getColumnCount(table);
+    const row = rowOfCell(cell, colCount);
+    const isHeader = position === "before" && row === 0 && isHeaderCell(cell);
+    const rowCells = getCellsInRow(table, row, colCount);
+    const refCell = position === "before" ? rowCells[0] : rowCells[rowCells.length - 1];
+    for (let c = 0;c < colCount; c++) {
+      const newCell = createCell(isHeader);
+      if (position === "before") {
+        refCell.before(newCell);
+      } else {
+        refCell.after(newCell);
+      }
+    }
+    ctx.updateUndo("new");
+  },
+  insertTableCol(ctx, position = "after") {
+    const ip = ctx.insertionPoint();
+    if (!ip)
+      return;
+    const cell = cellOf(ip);
+    if (!cell)
+      return;
+    const table = tableOf(cell);
+    if (!table)
+      return;
+    const colCount = getColumnCount(table);
+    const col = colOfCell(cell, colCount);
+    const rowCount = getRowCount(table);
+    for (let r = rowCount - 1;r >= 0; r--) {
+      const rowCells = getCellsInRow(table, r, colCount);
+      const refCell = rowCells[col];
+      const isHeader = isHeaderCell(refCell);
+      const newCell = createCell(isHeader);
+      if (position === "before") {
+        refCell.before(newCell);
+      } else {
+        refCell.after(newCell);
+      }
+    }
+    const widths = getColumnWidths(table);
+    const insertAt = position === "before" ? col : col + 1;
+    widths.splice(insertAt, 0, "1fr");
+    setColumnWidths(table, widths);
+    ctx.updateUndo("new");
+  },
+  deleteTableRow(ctx) {
+    const ip = ctx.insertionPoint();
+    if (!ip)
+      return;
+    const cell = cellOf(ip);
+    if (!cell)
+      return;
+    const table = tableOf(cell);
+    if (!table)
+      return;
+    const colCount = getColumnCount(table);
+    const rowCount = getRowCount(table);
+    if (rowCount <= 1)
+      return;
+    const row = rowOfCell(cell, colCount);
+    const rowCells = getCellsInRow(table, row, colCount);
+    const targetRow = row > 0 ? row - 1 : 1;
+    const targetCells = getCellsInRow(table, targetRow, colCount);
+    if (targetCells.length > 0) {
+      const targetCell = targetCells[0];
+      targetCell.appendChild(ctx.selectable.createBounds());
+      ctx.selectable.normalize();
+      ctx.focus();
+    }
+    for (const c of rowCells) {
+      c.remove();
+    }
+    ctx.updateUndo("new");
+  },
+  deleteTableCol(ctx) {
+    const ip = ctx.insertionPoint();
+    if (!ip)
+      return;
+    const cell = cellOf(ip);
+    if (!cell)
+      return;
+    const table = tableOf(cell);
+    if (!table)
+      return;
+    const colCount = getColumnCount(table);
+    if (colCount <= 1)
+      return;
+    const col = colOfCell(cell, colCount);
+    const row = rowOfCell(cell, colCount);
+    const targetCol = col > 0 ? col - 1 : 1;
+    const targetCells = getCellsInRow(table, row, colCount);
+    if (targetCells[targetCol]) {
+      targetCells[targetCol].appendChild(ctx.selectable.createBounds());
+      ctx.selectable.normalize();
+      ctx.focus();
+    }
+    const colCells = getCellsInCol(table, col, colCount);
+    for (let i = colCells.length - 1;i >= 0; i--) {
+      colCells[i].remove();
+    }
+    const widths = getColumnWidths(table);
+    widths.splice(col, 1);
+    setColumnWidths(table, widths);
+    ctx.updateUndo("new");
+  },
+  toggleHeaderRow(ctx) {
+    const ip = ctx.insertionPoint();
+    if (!ip)
+      return;
+    const cell = cellOf(ip);
+    if (!cell)
+      return;
+    const table = tableOf(cell);
+    if (!table)
+      return;
+    const colCount = getColumnCount(table);
+    const row = rowOfCell(cell, colCount);
+    const rowCells = getCellsInRow(table, row, colCount);
+    const shouldBeHeader = !isHeaderCell(rowCells[0]);
+    for (const c of rowCells) {
+      c.classList.toggle("table-header", shouldBeHeader);
+    }
+    ctx.updateUndo("new");
+  }
+};
+function executeCommand(ctx, commandString) {
+  const registry = ctx.commands ?? commands;
+  const commandList = commandString.split(/;\s*/);
+  for (const cmd of commandList) {
+    const pieces = cmd.trim().split(/\s+/);
+    const name = pieces.shift();
+    if (!name)
+      continue;
+    const fn = registry[name];
+    if (fn) {
+      fn(ctx, ...pieces);
+    } else {
+      console.error("unrecognized command", name);
+    }
+  }
+}
+// src/tosijs-styled-editor.ts
+import {
+  Component as WebComponent,
+  elements as elements2
+} from "tosijs";
+import { icons as icons2 } from "tosijs-ui/icons";
+
+// src/toolbar.ts
+import { elements } from "tosijs";
+import { icons, defineIcons } from "tosijs-ui/icons";
+import { tosiMenu } from "tosijs-ui/menu";
+import { tosiLocalePicker, tosiLocalized } from "tosijs-ui/localize";
+var { button, span } = elements;
+defineIcons({
+  highlighter: '<svg class="stroked" viewBox="0 0 24 24">' + '<path d="m9 11-6 6v3h9l3-3"></path>' + '<path d="m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4"></path>' + "</svg>"
+});
+var MENU_CLASS = "tosijs-styled-editor-menu";
+function menuScopeMarker() {
+  return () => {
+    const marker = span({
+      style: { display: "none" }
+    });
+    queueMicrotask(() => {
+      marker.closest(".tosi-menu")?.classList.add(MENU_CLASS);
+    });
+    return marker;
+  };
+}
+function commandButton(title, command, icon, shortcut) {
+  const attrs = {
+    title,
+    value: command,
+    dataTosiLocalized: JSON.stringify({ title })
+  };
+  if (shortcut) {
+    attrs.dataShortcut = shortcut;
+  }
+  return button(attrs, icon);
+}
+function toolbarSpacer(width = "8px") {
+  return span({
+    style: { display: "inline-block", width }
+  });
+}
+function menuLabel(caption) {
+  return tosiLocalized({ refString: caption });
+}
+function localePickerWidget() {
+  return tosiLocalePicker({
+    slot: "menubar",
+    hideCaption: true
+  });
+}
+function editorMenuItem(editor, caption, command) {
+  return {
+    caption,
+    action() {
+      editor.doCommand(command);
+    }
+  };
+}
+function paragraphStyleMenu(editor) {
+  return tosiMenu({
+    slot: "menubar",
+    localized: true,
+    menuItems: [
+      menuScopeMarker(),
+      editorMenuItem(editor, "Title", "setBlockType h1"),
+      editorMenuItem(editor, "Heading", "setBlockType h2"),
+      editorMenuItem(editor, "Subheading", "setBlockType h3"),
+      editorMenuItem(editor, "Minor Heading", "setBlockType h4"),
+      null,
+      editorMenuItem(editor, "Body", "setBlockType p"),
+      editorMenuItem(editor, "Code Block", "setBlockType pre"),
+      editorMenuItem(editor, "Blockquote", "setBlockType blockquote"),
+      null,
+      editorMenuItem(editor, "Bulleted List", "setList ul"),
+      editorMenuItem(editor, "Numbered List", "setList ol"),
+      editorMenuItem(editor, "No List", "setList none")
+    ]
+  }, icons.type(), " ", menuLabel("Style"));
+}
+function justificationMenu(editor) {
+  return tosiMenu({
+    slot: "menubar",
+    localized: true,
+    menuItems: [
+      menuScopeMarker(),
+      editorMenuItem(editor, "Left", "setBlocks text-align left"),
+      editorMenuItem(editor, "Center", "setBlocks text-align center"),
+      editorMenuItem(editor, "Right", "setBlocks text-align right"),
+      editorMenuItem(editor, "Justify", "setBlocks text-align justify")
+    ]
+  }, icons.alignLeft(), " ", menuLabel("Align"));
+}
+function fontFamilyMenu(editor) {
+  return tosiMenu({
+    slot: "menubar",
+    localized: true,
+    menuItems: [
+      menuScopeMarker(),
+      editorMenuItem(editor, "Times New Roman", "setText font-family Times+New+Roman"),
+      editorMenuItem(editor, "Georgia", "setText font-family Georgia"),
+      editorMenuItem(editor, "Helvetica", "setText font-family Helvetica"),
+      editorMenuItem(editor, "Arial", "setText font-family Arial"),
+      null,
+      editorMenuItem(editor, "Serif", "setText font-family serif"),
+      editorMenuItem(editor, "Sans-serif", "setText font-family sans-serif"),
+      editorMenuItem(editor, "Monospace", "setText font-family monospace")
+    ]
+  }, icons.type(), " ", menuLabel("Font"));
+}
+function fontSizeMenu(editor) {
+  return tosiMenu({
+    slot: "menubar",
+    localized: true,
+    menuItems: [
+      menuScopeMarker(),
+      editorMenuItem(editor, "10", "setText font-size 10px"),
+      editorMenuItem(editor, "12", "setText font-size 12px"),
+      editorMenuItem(editor, "14", "setText font-size 14px"),
+      editorMenuItem(editor, "18", "setText font-size 18px"),
+      editorMenuItem(editor, "24", "setText font-size 24px"),
+      editorMenuItem(editor, "36", "setText font-size 36px")
+    ]
+  }, " ", menuLabel("Size"));
+}
+function lineSpacingMenu(editor) {
+  return tosiMenu({
+    slot: "menubar",
+    localized: true,
+    menuItems: [
+      menuScopeMarker(),
+      editorMenuItem(editor, "Single", "setBlocks line-height unset"),
+      editorMenuItem(editor, "1.5", "setBlocks line-height 1.875"),
+      editorMenuItem(editor, "Double", "setBlocks line-height 2.5")
+    ]
+  }, " ", menuLabel("Spacing"));
+}
+function characterStyleWidgets() {
+  return [
+    commandButton("Bold", "setText font-weight bold", icons.fontBold(), "ctrl+b"),
+    commandButton("Italic", "setText font-style italic", icons.fontItalic(), "ctrl+i"),
+    commandButton("Underline", "setText text-decoration underline", icons.underline(), "ctrl+u"),
+    commandButton("Highlight", "setText background-color rgba(255,255,64,0.5)", icons.highlighter())
+  ];
+}
+function paragraphStyleWidgets() {
+  return [
+    commandButton("Align Left", "setBlocks text-align left", icons.alignLeft()),
+    commandButton("Center", "setBlocks text-align center", icons.alignCenter()),
+    commandButton("Align Right", "setBlocks text-align right", icons.alignRight()),
+    commandButton("Justify", "setBlocks text-align justify", icons.alignJustify()),
+    toolbarSpacer(),
+    commandButton("Bulleted List", "setList ul", icons.listBullet()),
+    commandButton("Numbered List", "setList ol", icons.listNumber()),
+    toolbarSpacer(),
+    commandButton("Indent", "setBlocks margin-left 40px", icons.indent()),
+    commandButton("Outdent", "setBlocks margin-left 0px", icons.outdent())
+  ];
+}
+function undoRedoWidgets() {
+  return [
+    commandButton("Undo", "updateUndo undo", icons.rotateCcw(), "ctrl+z"),
+    commandButton("Redo", "updateUndo redo", icons.rotateCw(), "ctrl+y")
+  ];
+}
+function debugWidget() {
+  return commandButton("Toggle Debug", "setDebug", icons.bug());
+}
+function minimalToolbar() {
+  return [...characterStyleWidgets(), toolbarSpacer(), ...undoRedoWidgets()];
+}
+function defaultToolbar() {
+  return [
+    ...characterStyleWidgets(),
+    toolbarSpacer(),
+    ...paragraphStyleWidgets(),
+    toolbarSpacer(),
+    ...undoRedoWidgets(),
+    toolbarSpacer(),
+    debugWidget()
+  ];
+}
+function insertMenu(editor) {
+  return tosiMenu({
+    slot: "menubar",
+    localized: true,
+    menuItems: [
+      menuScopeMarker(),
+      {
+        caption: "Link…",
+        action() {
+          const url = prompt("Link URL");
+          if (!url)
+            return;
+          const target = prompt("Target (blank for a new tab)", "_blank");
+          editor.doCommand(`setLink ${url} ${target || "_blank"}`);
+        }
+      },
+      {
+        caption: "Remove Link",
+        action: () => editor.doCommand("removeLink")
+      },
+      null,
+      {
+        caption: "Image…",
+        action() {
+          const url = prompt("Image URL");
+          if (!url)
+            return;
+          const alt = prompt("Alt text (describe the image)") || "";
+          editor.doCommand(`insertImage ${url} ${alt}`);
+        }
+      },
+      null,
+      {
+        caption: "Footnote",
+        action: () => editor.doCommand("insertFootnote")
+      },
+      {
+        caption: "Renumber Footnotes",
+        action: () => editor.doCommand("renumberFootnotes")
+      }
+    ]
+  }, icons.link(), " ", menuLabel("Insert"));
+}
+function tableMenu(editor) {
+  return tosiMenu({
+    slot: "menubar",
+    localized: true,
+    menuItems: [
+      menuScopeMarker(),
+      {
+        caption: "Insert Table",
+        menuItems: [
+          editorMenuItem(editor, "2 Columns", "insertTable 2"),
+          editorMenuItem(editor, "3 Columns", "insertTable 3"),
+          editorMenuItem(editor, "4 Columns", "insertTable 4"),
+          editorMenuItem(editor, "5 Columns", "insertTable 5")
+        ]
+      },
+      null,
+      editorMenuItem(editor, "Insert Row After", "insertTableRow after"),
+      editorMenuItem(editor, "Insert Row Before", "insertTableRow before"),
+      editorMenuItem(editor, "Insert Column After", "insertTableCol after"),
+      editorMenuItem(editor, "Insert Column Before", "insertTableCol before"),
+      null,
+      editorMenuItem(editor, "Delete Row", "deleteTableRow"),
+      editorMenuItem(editor, "Delete Column", "deleteTableCol"),
+      null,
+      editorMenuItem(editor, "Toggle Header Row", "toggleHeaderRow")
+    ]
+  }, icons.grid(), " ", menuLabel("Table"));
+}
+function defaultMenubar(editor) {
+  return [
+    paragraphStyleMenu(editor),
+    insertMenu(editor),
+    justificationMenu(editor),
+    fontFamilyMenu(editor),
+    fontSizeMenu(editor),
+    lineSpacingMenu(editor),
+    tableMenu(editor)
+  ];
+}
+
+// src/tosijs-styled-editor.ts
+var { slot, div } = elements2;
+var RTL_STRONG = /[\u0591-\u07FF\u08A0-\u08FF\uFB1D-\uFDFF\uFE70-\uFEFF]/;
+var LTR_STRONG = /[A-Za-z\u00C0-\u024F\u0370-\u04FF]/;
+function strongDirection(text) {
+  if (RTL_STRONG.test(text))
+    return "rtl";
+  if (LTR_STRONG.test(text))
+    return "ltr";
+  return null;
+}
+function deletableFilter(node) {
+  if (node instanceof Element) {
+    return !node.classList.contains("sel-start") && !node.classList.contains("sel-end");
+  }
+  return node.nodeType !== 3 || node.textContent !== "";
+}
+
+class TosijsStyledEditor extends WebComponent {
+  static formAssociated = true;
+  static preferredTagName = "tosijs-styled-editor";
+  static initAttributes = {
+    widgets: "none",
+    localized: false,
+    name: "",
+    required: false
+  };
+  static shadowStyleSpec = {
+    ":host": {
+      display: "flex",
+      flexDirection: "column",
+      position: "relative",
+      "--editor-ink": "#27488c",
+      "--editor-surface": "Canvas",
+      "--editor-text": "CanvasText",
+      "--editor-menubar-bg": "color-mix(in oklab, var(--editor-ink) 14%, var(--editor-surface))",
+      "--editor-toolbar-bg": "color-mix(in oklab, var(--editor-ink) 6%, var(--editor-surface))",
+      "--editor-edge": "color-mix(in oklab, var(--editor-ink) 25%, transparent)",
+      "--editor-chrome-text": "color-mix(in oklab, var(--editor-ink) 30%, var(--editor-text))",
+      background: "var(--editor-surface)",
+      color: "var(--editor-text)",
+      colorScheme: "light dark"
+    },
+    ":host ::slotted(*)": {
+      flex: "0 0 auto"
+    },
+    ':host [part="menubar"]': {
+      flexShrink: "0",
+      padding: "0 2px",
+      display: "flex",
+      gap: "0",
+      flex: "0 0 auto",
+      flexWrap: "wrap",
+      alignItems: "center",
+      background: "var(--editor-menubar-bg)",
+      borderBottom: "1px solid var(--editor-edge)"
+    },
+    ':host(:not([has-menubar])) [part="menubar"]': {
+      display: "none"
+    },
+    ':host [part="toolbar"]': {
+      flexShrink: "0",
+      padding: "1px 3px",
+      display: "flex",
+      gap: "1px",
+      flex: "0 0 auto",
+      flexWrap: "wrap",
+      alignItems: "center",
+      background: "var(--editor-toolbar-bg)",
+      borderBottom: "1px solid var(--editor-edge)"
+    },
+    ':host(:not([has-toolbar])) [part="toolbar"]': {
+      display: "none"
+    },
+    ':host [part="doc"]': {
+      flex: "1 1 auto",
+      minHeight: "0",
+      background: "var(--editor-surface)",
+      padding: "8px",
+      cursor: "text",
+      overflowY: "auto",
+      position: "relative",
+      transition: "padding-top 0.15s ease-out, padding-bottom 0.15s ease-out"
+    },
+    ':host [part="doc"] > *': {
+      position: "relative",
+      padding: "4px 8px",
+      margin: "0"
+    },
+    ':host [part="doc"] > blockquote': {
+      padding: "4px 40px"
+    },
+    ':host [part="doc"] img': {
+      maxWidth: "100%",
+      height: "auto",
+      verticalAlign: "bottom"
+    },
+    ':host [part="doc"] a': {
+      color: "color-mix(in oklab, var(--editor-ink) 65%, var(--editor-text))",
+      textDecoration: "underline"
+    },
+    ':host [part="doc"] .footnote-ref': {
+      fontSize: "0.75em",
+      lineHeight: "0",
+      verticalAlign: "super"
+    },
+    ':host [part="doc"] .footnote-ref a': {
+      textDecoration: "none",
+      padding: "0 1px"
+    },
+    ':host [part="doc"] ol.footnotes': {
+      marginTop: "16px",
+      paddingTop: "8px",
+      borderTop: "1px solid var(--editor-edge)",
+      fontSize: "0.85em"
+    },
+    ':host [part="doc"] code:not([dir]), :host [part="doc"] kbd:not([dir]), :host [part="doc"] samp:not([dir])': {
+      direction: "ltr",
+      unicodeBidi: "isolate"
+    },
+    ":host .sel-start, :host .sel-end": {
+      display: "contents"
+    },
+    ':host [part="caret"]': {
+      position: "absolute",
+      display: "none",
+      width: "2px",
+      padding: "0",
+      margin: "0",
+      border: "0",
+      outline: "none",
+      background: "var(--editor-text)",
+      color: "transparent",
+      caretColor: "transparent",
+      pointerEvents: "none",
+      zIndex: "3"
+    },
+    ':host [part="caret"].-collapsed': {
+      animation: "blink 1s steps(2, start) infinite"
+    },
+    ":host .selection-edge": {
+      position: "absolute",
+      display: "none",
+      width: "2px",
+      pointerEvents: "none",
+      zIndex: "3"
+    },
+    ":host .selection-edge.-start": {
+      background: "color-mix(in oklab, green 70%, var(--editor-text))"
+    },
+    ":host .selection-edge.-end": {
+      background: "color-mix(in oklab, red 70%, var(--editor-text))"
+    },
+    ":host .selected": {
+      background: "color-mix(in oklab, var(--editor-ink) 42%, color-mix(in oklab, white 38%, var(--editor-surface)))"
+    },
+    ":host .selected-block": {
+      background: "color-mix(in oklab, var(--editor-ink) 12%, color-mix(in oklab, white 21%, var(--editor-surface)))"
+    },
+    ":host .first-block": {
+      position: "relative"
+    },
+    ":host .last-block": {
+      position: "relative"
+    },
+    ".debug .spanified": {
+      boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.15)"
+    },
+    ":host .spanified-word": {
+      display: "inline"
+    },
+    ":host .annotation::after": {
+      position: "relative",
+      top: "-4px",
+      content: '"\\2020"'
+    },
+    ":host .annotation > span": {
+      display: "block",
+      padding: "4px 8px",
+      fontWeight: "normal",
+      fontStyle: "normal",
+      fontSize: "12px",
+      background: "#ffc",
+      position: "absolute",
+      right: "0",
+      maxWidth: "200px"
+    },
+    ':host [part="doc"] *': {
+      userSelect: "none",
+      webkitUserSelect: "none"
+    },
+    ":host ul, :host ol": {
+      paddingLeft: "30px"
+    },
+    ".debug .sel-start": {
+      background: "green",
+      opacity: "0.5",
+      width: "2px",
+      minHeight: "1em",
+      display: "inline-block"
+    },
+    ".debug .sel-end": {
+      background: "red",
+      opacity: "0.5",
+      width: "2px",
+      minHeight: "1em",
+      display: "inline-block"
+    },
+    ".debug .selected-block": {
+      outline: "1px dashed blue"
+    },
+    ":host .editor-table": {
+      display: "grid",
+      listStyle: "none",
+      padding: "0",
+      margin: "8px 0",
+      border: "1px solid #ccc",
+      borderRadius: "2px"
+    },
+    ":host .editor-table > li": {
+      padding: "4px 8px",
+      borderRight: "1px solid #ddd",
+      borderBottom: "1px solid #ddd",
+      minHeight: "1.5em",
+      outline: "none"
+    },
+    ":host .editor-table > li.table-header": {
+      fontWeight: "bold",
+      background: "#f0f0f0"
+    },
+    ":host .touch-affordances": {
+      display: "none",
+      position: "absolute",
+      pointerEvents: "none",
+      zIndex: "1000",
+      top: "0",
+      left: "0",
+      width: "0",
+      height: "0",
+      transition: "opacity 0.1s ease-out"
+    },
+    ":host .touch-affordance": {
+      position: "absolute",
+      width: "44px",
+      height: "44px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      pointerEvents: "auto",
+      touchAction: "none",
+      background: "transparent",
+      transition: "left 0.1s ease-out, top 0.1s ease-out"
+    },
+    ":host .touch-affordances.dragging .touch-affordance": {
+      transition: "none"
+    },
+    ":host .touch-icon": {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "24px",
+      height: "24px",
+      background: "#0078ff",
+      color: "white",
+      fontSize: "13px",
+      fontWeight: "bold",
+      border: "2px solid white",
+      boxShadow: "0 1px 6px rgba(0,0,0,0.4)"
+    },
+    ":host .touch-icon svg": {
+      width: "16px",
+      height: "16px",
+      stroke: "white",
+      fill: "none"
+    },
+    ":host .touch-handle-start .touch-icon": {
+      borderRadius: "4px 4px 0 4px"
+    },
+    ":host .touch-handle-end .touch-icon": {
+      borderRadius: "0 4px 4px 4px"
+    },
+    ":host .touch-context-menu .touch-icon": {
+      borderRadius: "4px"
+    },
+    ":host .touch-menu": {
+      position: "absolute",
+      display: "flex",
+      gap: "0",
+      background: "rgba(0,0,0,0.85)",
+      borderRadius: "8px",
+      padding: "0",
+      zIndex: "1001",
+      boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
+      pointerEvents: "auto",
+      overflow: "hidden"
+    },
+    ":host .touch-menu-item": {
+      background: "transparent",
+      color: "white",
+      border: "none",
+      padding: "12px 16px",
+      fontSize: "15px",
+      borderRadius: "0",
+      whiteSpace: "nowrap",
+      margin: "0"
+    }
+  };
+  static lightStyleSpec = {
+    ".tosijs-styled-editor-menu": {
+      "--menu-item-height": "30px",
+      "--menu-item-padding": "0 16px",
+      "--menu-separator-margin": "4px 0",
+      "--menu-inset": "4px"
+    },
+    'tosijs-styled-editor button[slot="toolbar"]': {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "26px",
+      height: "26px",
+      padding: "0",
+      border: "0",
+      borderRadius: "4px",
+      background: "transparent",
+      boxShadow: "none",
+      color: "var(--editor-chrome-text) !important",
+      cursor: "pointer"
+    },
+    'tosijs-styled-editor button[slot="toolbar"]:hover:not([disabled])': {
+      background: "color-mix(in oklab, currentColor 16%, transparent)"
+    },
+    'tosijs-styled-editor button[slot="toolbar"]:active:not([disabled])': {
+      background: "color-mix(in oklab, currentColor 28%, transparent)"
+    },
+    'tosijs-styled-editor button[slot="toolbar"][disabled]': {
+      opacity: "0.35",
+      cursor: "default",
+      background: "transparent"
+    },
+    'tosijs-styled-editor button[slot="toolbar"] svg': {
+      width: "18px",
+      height: "18px"
+    },
+    'tosijs-styled-editor [slot="menubar"] button': {
+      background: "transparent",
+      border: "0",
+      boxShadow: "none",
+      borderRadius: "4px",
+      padding: "4px 10px",
+      color: "var(--editor-chrome-text) !important",
+      cursor: "pointer"
+    },
+    'tosijs-styled-editor [slot="menubar"] button:hover': {
+      background: "color-mix(in oklab, currentColor 16%, transparent)"
+    },
+    'tosijs-styled-editor [slot="menubar"] button svg': {
+      width: "16px",
+      height: "16px"
+    }
+  };
+  selectable;
+  active = true;
+  pastemode = "merge";
+  undo = [];
+  undoDepth = 0;
+  reasonForLastUndo;
+  lastKey = 0;
+  lastCursorX = 0;
+  isInitialized = false;
+  touchAffordances = null;
+  touchHandleStart = null;
+  touchContextMenu = null;
+  touchHandleEnd = null;
+  touchMenuEl = null;
+  isTouchInteraction = false;
+  touchDrags = new Map;
+  resizeTable = null;
+  resizeCol = -1;
+  resizeStartX = 0;
+  resizeStartWidths = [];
+  _value = "";
+  get docHTML() {
+    this.touchAffordances?.remove();
+    const html = this.parts.doc.innerHTML;
+    if (this.touchAffordances) {
+      this.parts.doc.appendChild(this.touchAffordances);
+    }
+    return html;
+  }
+  set docHTML(html) {
+    this.touchAffordances?.remove();
+    this.parts.doc.innerHTML = html;
+    if (this.touchAffordances) {
+      this.parts.doc.appendChild(this.touchAffordances);
+    }
+  }
+  get value() {
+    return this.isInitialized ? this.docHTML : this._value;
+  }
+  set value(html) {
+    const oldValue = this._value;
+    this._value = html;
+    if (this.isInitialized && this.docHTML !== html) {
+      this.docHTML = html;
+    }
+    if (oldValue !== html && this.internals) {
+      this.internals.setFormValue(html);
+    }
+  }
+  commands = { ...commands };
+  content = [
+    slot({
+      name: "menubar",
+      part: "menubar"
+    }),
+    slot({
+      name: "toolbar",
+      part: "toolbar"
+    }),
+    div({
+      part: "doc",
+      tabindex: "0"
+    }),
+    elements2.input({ part: "caret", class: "caret-paint" }),
+    div({ part: "edgeStart", class: "selection-edge -start" }),
+    div({ part: "edgeEnd", class: "selection-edge -end" })
+  ];
+  formResetCallback() {
+    this.value = "";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const { doc } = this.parts;
+    if (doc.innerHTML === "") {
+      if (this._value.trim() !== "") {
+        doc.innerHTML = this._value;
+      } else {
+        const lightChildren = Array.from(this.childNodes).filter((n) => !(n instanceof Element && n.hasAttribute("slot")));
+        if (lightChildren.length > 0) {
+          const frag = document.createDocumentFragment();
+          for (const child of lightChildren) {
+            frag.appendChild(child);
+          }
+          doc.appendChild(frag);
+        }
+      }
+    }
+    this.isInitialized = true;
+    this.selectable = new Selectable(doc);
+    const firstP = doc.querySelector("p,h1,h2,h3,h4,h5,h6,div,blockquote,pre") || doc.firstElementChild;
+    if (firstP) {
+      firstP.appendChild(this.selectable.createBounds());
+    }
+    this.selectable.normalize();
+    doc.addEventListener("keydown", this.handleKeydown, true);
+    doc.addEventListener("keypress", this.handleKeypress);
+    doc.addEventListener("copy", this.handleCopy);
+    doc.addEventListener("cut", this.handleCut);
+    doc.addEventListener("paste", this.handlePaste);
+    doc.addEventListener("pointerdown", this.handleResizePointerDown);
+    doc.addEventListener("pointermove", this.handleResizePointerMove);
+    doc.addEventListener("pointerup", this.handleResizePointerUp);
+    this.touchAffordances = document.createElement("div");
+    this.touchAffordances.className = "touch-affordances not-selectable do-not-spanify";
+    this.touchHandleStart = document.createElement("div");
+    this.touchHandleStart.className = "touch-affordance touch-handle-start not-selectable do-not-spanify";
+    const startIcon = document.createElement("span");
+    startIcon.className = "touch-icon";
+    startIcon.appendChild(icons2.chevronLeft());
+    this.touchHandleStart.appendChild(startIcon);
+    this.touchContextMenu = document.createElement("div");
+    this.touchContextMenu.className = "touch-affordance touch-context-menu not-selectable do-not-spanify";
+    const menuIcon = document.createElement("span");
+    menuIcon.className = "touch-icon";
+    menuIcon.innerHTML = "⋮";
+    this.touchContextMenu.appendChild(menuIcon);
+    this.touchHandleEnd = document.createElement("div");
+    this.touchHandleEnd.className = "touch-affordance touch-handle-end not-selectable do-not-spanify";
+    const endIcon = document.createElement("span");
+    endIcon.className = "touch-icon";
+    endIcon.appendChild(icons2.chevronRight());
+    this.touchHandleEnd.appendChild(endIcon);
+    this.touchAffordances.append(this.touchHandleStart, this.touchContextMenu, this.touchHandleEnd);
+    doc.appendChild(this.touchAffordances);
+    for (const handle of [this.touchHandleStart, this.touchHandleEnd]) {
+      handle.addEventListener("pointerdown", this.handleAffordanceDragStart);
+      handle.addEventListener("pointermove", this.handleAffordanceDragMove);
+      handle.addEventListener("pointerup", this.handleAffordanceDragEnd);
+    }
+    this.touchContextMenu.addEventListener("pointerdown", this.handleTouchContextMenu);
+    doc.addEventListener("selectionchanged", () => {
+      this.isTouchInteraction = this.selectable.touchMode;
+      if (!this.touchMenuEl) {
+        this.updateUndo("new", "selectionchanged");
+      }
+      this.updateTouchAffordances();
+    });
+    doc.addEventListener("click", this.handleDocClick);
+    doc.addEventListener("dragstart", this.handleDragStart);
+    doc.addEventListener("dragover", this.handleDragOver);
+    doc.addEventListener("drop", this.handleDrop);
+    doc.addEventListener("dragend", this.handleDragEnd);
+    doc.setAttribute("data-drop", "text/html;text/plain;Files;image/*");
+    this.addEventListener("click", this.handleToolbarClick);
+    this.addEventListener("change", this.handleToolbarChange);
+    this.selectable.focusTarget = this.parts.caret;
+    this.selectable.onBoundsChanged = () => this.syncCaret();
+    this.syncCaret();
+    this.applyWidgets();
+    this.trackBar(this.parts.menubar, "has-menubar");
+    this.trackBar(this.parts.toolbar, "has-toolbar");
+    this.updateUndo("init");
+    this.focus();
+  }
+  trackBar(slot2, attribute) {
+    const sync = () => this.toggleAttribute(attribute, slot2.assignedNodes({ flatten: true }).length > 0);
+    slot2.addEventListener("slotchange", sync);
+    sync();
+  }
+  applyWidgets() {
+    const preset = this.widgets;
+    if (preset !== "default" && preset !== "minimal")
+      return;
+    if (this.querySelector('[slot="toolbar"], [slot="menubar"]'))
+      return;
+    if (preset === "default") {
+      for (const menu of defaultMenubar(this)) {
+        this.appendChild(menu);
+      }
+      if (this.localized) {
+        this.appendChild(localePickerWidget());
+      }
+    }
+    for (const widget of preset === "minimal" ? minimalToolbar() : defaultToolbar()) {
+      widget.setAttribute("slot", "toolbar");
+      this.appendChild(widget);
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.selectable?.destroy();
+  }
+  markerRect(marker) {
+    const geometry = caretGeometryAt(marker, this.parts.doc);
+    if (geometry) {
+      return {
+        left: geometry.left,
+        top: geometry.top,
+        right: geometry.left,
+        bottom: geometry.top + geometry.height,
+        width: 0,
+        height: geometry.height
+      };
+    }
+    return marker.getBoundingClientRect();
+  }
+  syncCaret() {
+    const caret = this.parts.caret;
+    const startEdge = this.parts.edgeStart;
+    const endEdge = this.parts.edgeEnd;
+    const doc = this.parts.doc;
+    const start = doc.querySelector(".sel-start");
+    const end = doc.querySelector(".sel-end");
+    const anchor = end || start;
+    const collapsed = doc.querySelectorAll(".selected").length === 0;
+    const host = this.getBoundingClientRect();
+    const view = doc.getBoundingClientRect();
+    const hostStyle = getComputedStyle(this);
+    const insetTop = host.top + parseFloat(hostStyle.borderTopWidth || "0");
+    const insetLeft = host.left + parseFloat(hostStyle.borderLeftWidth || "0");
+    const place = (el, marker) => {
+      if (!marker) {
+        el.style.display = "none";
+        return;
+      }
+      const geometry = caretGeometryAt(marker, doc);
+      if (!geometry) {
+        el.style.display = "none";
+        return;
+      }
+      if (geometry.top + geometry.height < view.top || geometry.top > view.bottom) {
+        el.style.display = "none";
+        return;
+      }
+      el.style.display = "block";
+      el.style.left = `${geometry.left - insetLeft}px`;
+      el.style.top = `${geometry.top - insetTop}px`;
+      el.style.height = `${geometry.height}px`;
+    };
+    place(caret, anchor);
+    caret.classList.toggle("-collapsed", collapsed);
+    place(startEdge, collapsed ? null : start);
+    place(endEdge, collapsed ? null : end);
+  }
+  getContext() {
+    return {
+      root: this.parts.doc,
+      selectable: this.selectable,
+      commands: this.commands,
+      find: (sel) => this.parts.doc.querySelector(sel),
+      findAll: (sel) => Array.from(this.parts.doc.querySelectorAll(sel)),
+      selectedLeafNodes: () => this.selectedLeafNodes(),
+      selectedBlocks: () => this.selectedBlocks(),
+      insertionPoint: () => this.insertionPoint(),
+      block: (node) => this.block(node),
+      normalize: () => this.normalize(),
+      focus: () => this.focus(),
+      updateUndo: (cmd, reason) => this.updateUndo(cmd, reason)
+    };
+  }
+  doCommand(commandString) {
+    executeCommand(this.getContext(), commandString);
+  }
+  focus() {
+    this.selectable?.focus();
+  }
+  normalize() {
+    this.selectable?.normalize();
+  }
+  selectedLeafNodes() {
+    return leafNodes(this.parts.doc).filter((node) => {
+      const parent = node.parentElement;
+      return parent?.closest(".selected") !== null;
+    });
+  }
+  selectedBlocks() {
+    return Array.from(this.parts.doc.querySelectorAll(".selected-block"));
+  }
+  insertionPoint() {
+    return this.parts.doc.querySelector("input.caret");
+  }
+  block(node) {
+    let current = node;
+    while (current && current.parentNode !== this.parts.doc) {
+      current = current.parentNode;
+    }
+    return current instanceof Element ? current : null;
+  }
+  caretCell() {
+    const ip = this.insertionPoint();
+    return ip ? cellOf(ip) : null;
+  }
+  listItemOf(node) {
+    let current = node;
+    while (current && current !== this.parts.doc) {
+      if (current instanceof Element && current.tagName === "LI" && current.parentElement && (current.parentElement.tagName === "UL" || current.parentElement.tagName === "OL") && !current.parentElement.classList.contains("editor-table")) {
+        return current;
+      }
+      current = current.parentNode;
+    }
+    return null;
+  }
+  moveCaretToCell(cell) {
+    this.selectable.unmark();
+    this.selectable.removeBounds();
+    const start = document.createElement("input");
+    start.className = "sel-start";
+    const end = document.createElement("input");
+    end.className = "sel-end caret";
+    cell.insertBefore(start, cell.firstChild);
+    cell.appendChild(end);
+    this.selectable.normalize();
+    this.selectable.markBounds();
+    this.selectable.selectionChanged();
+  }
+  tableMoveUp(cell) {
+    const table = tableOf(cell);
+    if (!table)
+      return;
+    const colCount = getColumnCount(table);
+    const row = rowOfCell(cell, colCount);
+    const rowCells = getCellsInRow(table, row, colCount);
+    const firstRowCell = rowCells[0];
+    for (let c = 0;c < colCount; c++) {
+      firstRowCell.before(createCell());
+    }
+    const newAbove = cellAbove(cell);
+    if (newAbove)
+      this.moveCaretToCell(newAbove);
+    this.updateUndo("new");
+  }
+  tableMoveDown(cell) {
+    const table = tableOf(cell);
+    if (!table)
+      return;
+    const colCount = getColumnCount(table);
+    const row = rowOfCell(cell, colCount);
+    const rowCells = getCellsInRow(table, row, colCount);
+    const lastRowCell = rowCells[rowCells.length - 1];
+    for (let c = 0;c < colCount; c++) {
+      lastRowCell.after(createCell());
+    }
+    const newBelow = cellBelow(cell);
+    if (newBelow)
+      this.moveCaretToCell(newBelow);
+    this.updateUndo("new");
+  }
+  exitTable(cell, direction) {
+    const table = tableOf(cell);
+    if (!table)
+      return;
+    const tableBlock = this.block(table);
+    if (!tableBlock)
+      return;
+    const sibling = direction === "before" ? tableBlock.previousElementSibling : tableBlock.nextElementSibling;
+    if (sibling) {
+      this.selectable.unmark();
+      this.selectable.removeBounds();
+      if (direction === "before") {
+        sibling.appendChild(this.selectable.createBounds());
+      } else {
+        sibling.insertBefore(this.selectable.createBounds(), sibling.firstChild);
+      }
+      this.selectable.normalize();
+      this.selectable.markBounds();
+      this.selectable.selectionChanged();
+    } else {
+      const p = document.createElement("p");
+      p.textContent = " ";
+      if (direction === "before") {
+        tableBlock.before(p);
+      } else {
+        tableBlock.after(p);
+      }
+      this.selectable.unmark();
+      this.selectable.removeBounds();
+      p.appendChild(this.selectable.createBounds());
+      this.selectable.normalize();
+      this.selectable.markBounds();
+      this.selectable.selectionChanged();
+      this.updateUndo("new");
+    }
+  }
+  splitListItem(li) {
+    const ip = this.insertionPoint();
+    if (!ip)
+      return;
+    const list = li.parentElement;
+    if (!list)
+      return;
+    const textContent = li.textContent?.replace(/\u00A0/g, "").trim();
+    if (!textContent) {
+      const p = document.createElement("p");
+      p.textContent = " ";
+      this.selectable.removeBounds();
+      p.appendChild(this.selectable.createBounds());
+      if (list.children.length <= 1) {
+        list.after(p);
+        list.remove();
+      } else if (!li.previousElementSibling) {
+        list.before(p);
+        li.remove();
+      } else if (!li.nextElementSibling) {
+        list.after(p);
+        li.remove();
+      } else {
+        const newList = document.createElement(list.tagName);
+        let sibling = li.nextElementSibling;
+        while (sibling) {
+          const next = sibling.nextElementSibling;
+          newList.appendChild(sibling);
+          sibling = next;
+        }
+        list.after(p);
+        p.after(newList);
+        li.remove();
+      }
+      this.selectable.normalize();
+      this.selectable.markBounds();
+      this.updateUndo("new");
+      return;
+    }
+    const newLi = document.createElement("li");
+    let node = ip.nextSibling;
+    while (node) {
+      const next = node.nextSibling;
+      newLi.appendChild(node);
+      node = next;
+    }
+    const selStart = li.querySelector(".sel-start");
+    const selEnd = li.querySelector(".sel-end");
+    if (selEnd)
+      newLi.insertBefore(selEnd, newLi.firstChild);
+    if (selStart)
+      newLi.insertBefore(selStart, newLi.firstChild);
+    if (!newLi.textContent?.trim()) {
+      const placeholder = document.createTextNode(" ");
+      if (selStart)
+        selStart.before(placeholder);
+      else
+        newLi.appendChild(placeholder);
+    }
+    if (!li.textContent?.trim()) {
+      li.appendChild(document.createTextNode(" "));
+    }
+    li.after(newLi);
+    this.selectable.markBounds();
+    this.updateUndo("new");
+  }
+  isListItemEmpty(li) {
+    return !li.textContent?.replace(/\u00A0/g, "").trim();
+  }
+  removeListItem(li) {
+    const list = li.parentElement;
+    if (!list)
+      return;
+    const prevLi = li.previousElementSibling;
+    if (prevLi && prevLi.tagName === "LI") {
+      while (li.firstChild) {
+        prevLi.appendChild(li.firstChild);
+      }
+      li.remove();
+    } else {
+      const p = document.createElement("p");
+      while (li.firstChild) {
+        p.appendChild(li.firstChild);
+      }
+      list.before(p);
+      li.remove();
+      if (list.children.length === 0) {
+        list.remove();
+      }
+    }
+    this.normalize();
+    this.selectable.markBounds();
+    this.updateUndo("new");
+  }
+  listBackspace(li) {
+    if (!this.deleteSelection()) {
+      const ip = this.insertionPoint();
+      if (!ip)
+        return;
+      if (this.isListItemEmpty(li)) {
+        this.removeListItem(li);
+        return;
+      }
+      const prev = previousLeafNode(ip, li, deletableFilter);
+      if (prev) {
+        if (prev.nodeType === 3 && (prev.textContent || "").length > 1) {
+          prev.textContent = prev.textContent.slice(0, -1);
+        } else {
+          const top = topSingleParentAncestor(prev);
+          if (li.contains(top)) {
+            top.parentNode?.removeChild(top);
+          }
+        }
+        this.normalize();
+        this.updateUndo();
+      } else {
+        this.removeListItem(li);
+      }
+    }
+  }
+  listForwardDelete(li) {
+    if (!this.deleteSelection()) {
+      const ip = this.insertionPoint();
+      if (!ip)
+        return;
+      const next = nextLeafNode(ip, li, deletableFilter);
+      if (next) {
+        if (next.nodeType === 3 && (next.textContent || "").length > 1) {
+          next.textContent = next.textContent.slice(1);
+        } else {
+          const top = topSingleParentAncestor(next);
+          if (li.contains(top)) {
+            top.parentNode?.removeChild(top);
+          }
+        }
+        this.normalize();
+        this.updateUndo();
+      } else {
+        const nextLi = li.nextElementSibling;
+        if (nextLi && nextLi.tagName === "LI") {
+          while (nextLi.firstChild) {
+            li.appendChild(nextLi.firstChild);
+          }
+          nextLi.remove();
+          this.normalize();
+          this.selectable.markBounds();
+          this.updateUndo("new");
+        }
+      }
+    }
+  }
+  groupByLine(spans) {
+    const lineMap = new Map;
+    for (const span2 of spans) {
+      const rect = span2.getBoundingClientRect();
+      const top = Math.round(rect.top);
+      let line = lineMap.get(top);
+      if (!line) {
+        line = [];
+        lineMap.set(top, line);
+      }
+      line.push(span2);
+    }
+    const sortedKeys = Array.from(lineMap.keys()).sort((a, b) => a - b);
+    return sortedKeys.map((k) => lineMap.get(k));
+  }
+  closestCharOnLine(line, targetX) {
+    let best = line[0];
+    let bestDist = Infinity;
+    for (const span2 of line) {
+      const rect = span2.getBoundingClientRect();
+      const mid = rect.left + rect.width / 2;
+      const dist = Math.abs(mid - targetX);
+      if (dist < bestDist) {
+        bestDist = dist;
+        best = span2;
+      }
+    }
+    return best;
+  }
+  positionAtSpanChar(span2, targetX, extendSelection, blockToDespanify) {
+    const rect = span2.getBoundingClientRect();
+    const start = this.selectable.find(".sel-start");
+    const end = this.selectable.find(".sel-end");
+    if (!start || !end)
+      return;
+    if (targetX < rect.left + rect.width / 2) {
+      span2.before(end);
+    } else {
+      span2.after(end);
+    }
+    if (!extendSelection) {
+      end.parentNode?.insertBefore(start, end);
+    }
+    spanify(blockToDespanify, false);
+    this.selectable.markBounds();
+    this.focus();
+  }
+  moveVertical(direction, extendSelection) {
+    const ip = this.insertionPoint();
+    if (!ip)
+      return;
+    const currentBlock = this.block(ip);
+    if (!currentBlock)
+      return;
+    const isConsecutiveVertical = this.lastKey === 38 || this.lastKey === 40;
+    if (!isConsecutiveVertical) {
+      const caretRect = this.markerRect(ip);
+      this.lastCursorX = caretRect.left;
+    }
+    const targetX = this.lastCursorX;
+    const li = this.listItemOf(ip);
+    const container = li || currentBlock;
+    spanify(container, true);
+    const spans = Array.from(container.querySelectorAll(".spanified"));
+    if (spans.length > 0) {
+      const lines = this.groupByLine(spans);
+      const caretRect = this.markerRect(ip);
+      const caretTop = Math.round(caretRect.top);
+      let currentLineIdx = 0;
+      let bestDist = Infinity;
+      for (let i = 0;i < lines.length; i++) {
+        const lineTop = Math.round(lines[i][0].getBoundingClientRect().top);
+        const dist = Math.abs(lineTop - caretTop);
+        if (dist < bestDist) {
+          bestDist = dist;
+          currentLineIdx = i;
+        }
+      }
+      const targetLineIdx = direction === "up" ? currentLineIdx - 1 : currentLineIdx + 1;
+      if (targetLineIdx >= 0 && targetLineIdx < lines.length) {
+        const targetChar = this.closestCharOnLine(lines[targetLineIdx], targetX);
+        this.positionAtSpanChar(targetChar, targetX, extendSelection, container);
+        return;
+      }
+    }
+    spanify(container, false);
+    if (li) {
+      const siblingLi = direction === "up" ? li.previousElementSibling : li.nextElementSibling;
+      if (siblingLi && siblingLi.tagName === "LI") {
+        spanify(siblingLi, true);
+        const siblingSpans = Array.from(siblingLi.querySelectorAll(".spanified"));
+        if (siblingSpans.length === 0) {
+          spanify(siblingLi, false);
+          this.moveCaretToEmptyContainer(siblingLi, direction, extendSelection);
+          return;
+        }
+        const siblingLines = this.groupByLine(siblingSpans);
+        const targetLine = direction === "up" ? siblingLines[siblingLines.length - 1] : siblingLines[0];
+        const targetChar = this.closestCharOnLine(targetLine, targetX);
+        this.positionAtSpanChar(targetChar, targetX, extendSelection, siblingLi);
+        return;
+      }
+      const sibling2 = direction === "up" ? currentBlock.previousElementSibling : currentBlock.nextElementSibling;
+      if (!sibling2)
+        return;
+      this.moveVerticalToBlock(sibling2, direction, targetX, extendSelection);
+      return;
+    }
+    const sibling = direction === "up" ? currentBlock.previousElementSibling : currentBlock.nextElementSibling;
+    if (!sibling)
+      return;
+    this.moveVerticalToBlock(sibling, direction, targetX, extendSelection);
+  }
+  moveCaretToEmptyContainer(container, direction, extendSelection) {
+    const start = this.selectable.find(".sel-start");
+    const end = this.selectable.find(".sel-end");
+    if (!start || !end)
+      return;
+    if (direction === "up") {
+      container.appendChild(end);
+    } else {
+      container.insertBefore(end, container.firstChild);
+    }
+    if (!extendSelection) {
+      end.parentNode?.insertBefore(start, end);
+    }
+    this.selectable.markBounds();
+    this.focus();
+  }
+  moveVerticalToBlock(sibling, direction, targetX, extendSelection) {
+    const isList = (sibling.tagName === "UL" || sibling.tagName === "OL") && !sibling.classList.contains("editor-table");
+    const targetContainer = isList ? (direction === "up" ? sibling.querySelector(":scope > li:last-child") : sibling.querySelector(":scope > li:first-child")) || sibling : sibling;
+    spanify(targetContainer, true);
+    const siblingSpans = Array.from(targetContainer.querySelectorAll(".spanified"));
+    if (siblingSpans.length === 0) {
+      spanify(targetContainer, false);
+      this.moveCaretToEmptyContainer(targetContainer, direction, extendSelection);
+      return;
+    }
+    const siblingLines = this.groupByLine(siblingSpans);
+    const targetLine = direction === "up" ? siblingLines[siblingLines.length - 1] : siblingLines[0];
+    const targetChar = this.closestCharOnLine(targetLine, targetX);
+    this.positionAtSpanChar(targetChar, targetX, extendSelection, targetContainer);
+  }
+  contentKey(key) {
+    if (!this.insertionPoint())
+      return;
+    this.isolateForTyping(key);
+    const ip = this.insertionPoint();
+    if (ip) {
+      ip.before(document.createTextNode(key));
+      this.normalize();
+      this.updateUndo();
+    }
+  }
+  isolateForTyping(key) {
+    const ip = this.insertionPoint();
+    const keyDirection = strongDirection(key);
+    if (!ip || !keyDirection)
+      return null;
+    const block = this.block(ip);
+    if (!block)
+      return null;
+    const blockDirection = block.getAttribute("dir") ?? (getComputedStyle(block).direction || "ltr");
+    if (keyDirection === blockDirection)
+      return null;
+    const parent = ip.parentElement;
+    if (parent?.dataset.bidiRun === keyDirection)
+      return parent;
+    const isolate = document.createElement("span");
+    isolate.dataset.bidiRun = keyDirection;
+    isolate.setAttribute("dir", keyDirection);
+    ip.parentNode?.insertBefore(isolate, ip);
+    isolate.appendChild(ip);
+    return isolate;
+  }
+  backspace() {
+    if (!this.deleteSelection()) {
+      const ip = this.insertionPoint();
+      if (!ip)
+        return;
+      const node = previousLeafNode(ip, this.parts.doc, deletableFilter);
+      if (!node)
+        return;
+      const caretBlock = this.block(ip);
+      const deletionBlock = this.block(node);
+      if (node.nodeType === 3 && (node.textContent || "").length > 1) {
+        node.textContent = node.textContent.slice(0, -1);
+      } else {
+        const top = topSingleParentAncestor(node);
+        top.parentNode?.removeChild(top);
+        this.normalize();
+      }
+      if (deletionBlock && caretBlock && this.parts.doc.contains(deletionBlock) && deletionBlock !== caretBlock) {
+        while (caretBlock.firstChild) {
+          deletionBlock.appendChild(caretBlock.firstChild);
+        }
+        caretBlock.remove();
+      }
+      this.updateUndo();
+    }
+  }
+  forwardDelete() {
+    if (!this.deleteSelection()) {
+      const ip = this.insertionPoint();
+      if (!ip)
+        return;
+      const node = nextLeafNode(ip, this.parts.doc, deletableFilter);
+      if (!node)
+        return;
+      const caretBlock = this.block(ip);
+      const deletionBlock = this.block(node);
+      if (node.nodeType === 3 && (node.textContent || "").length > 1) {
+        node.textContent = node.textContent.slice(1);
+      } else {
+        const top = topSingleParentAncestor(node);
+        top.parentNode?.removeChild(top);
+        this.normalize();
+      }
+      if (deletionBlock && caretBlock && this.parts.doc.contains(deletionBlock) && deletionBlock !== caretBlock) {
+        while (deletionBlock.firstChild) {
+          caretBlock.appendChild(deletionBlock.firstChild);
+        }
+        deletionBlock.remove();
+      }
+      this.updateUndo();
+    }
+  }
+  deleteSelection() {
+    const blocks = this.selectedBlocks();
+    let wasAnythingDeleted = false;
+    for (const block of blocks) {
+      if (!block.classList.contains("first-block") && !block.classList.contains("last-block")) {
+        block.remove();
+      }
+    }
+    const keptCaret = this.insertionPoint();
+    const nodes = this.selectedLeafNodes().filter((node) => node !== keptCaret);
+    if (nodes.length) {
+      const firstTop = topSingleParentAncestor(nodes[0]);
+      if (keptCaret && firstTop.parentNode) {
+        firstTop.parentNode.insertBefore(keptCaret, firstTop);
+      }
+      for (const node of nodes) {
+        const top = topSingleParentAncestor(node);
+        top.parentNode?.removeChild(top);
+      }
+      wasAnythingDeleted = true;
+    }
+    const selStart = this.parts.doc.querySelector(".sel-start");
+    if (selStart && !selStart.classList.contains("caret")) {
+      selStart.remove();
+    }
+    this.selectable.unmark();
+    const caret = this.parts.doc.querySelector(".caret");
+    for (const block of blocks) {
+      if (this.parts.doc.contains(block) && (!caret || !block.contains(caret)) && !block.textContent?.trim()) {
+        block.remove();
+      }
+    }
+    if (blocks.length > 1) {
+      const firstBlock = blocks[0];
+      const lastBlock = blocks[blocks.length - 1];
+      if (this.parts.doc.contains(firstBlock) && this.parts.doc.contains(lastBlock) && !firstBlock.classList.contains("editor-table") && !lastBlock.classList.contains("editor-table")) {
+        while (firstBlock.firstChild) {
+          lastBlock.insertBefore(firstBlock.firstChild, lastBlock.firstChild);
+        }
+        firstBlock.remove();
+      }
+      this.selectable.markBounds();
+      this.focus();
+    } else if (wasAnythingDeleted) {
+      this.updateUndo();
+      this.selectable.selectionChanged();
+    }
+    return wasAnythingDeleted;
+  }
+  splitAtCaret() {
+    const ip = this.insertionPoint();
+    if (!ip)
+      return false;
+    const currentBlock = this.block(ip);
+    if (!currentBlock)
+      return false;
+    const newBlock = document.createElement(currentBlock.tagName);
+    let node = ip.nextSibling;
+    while (node) {
+      const next = node.nextSibling;
+      newBlock.appendChild(node);
+      node = next;
+    }
+    const selStart = currentBlock.querySelector(".sel-start");
+    const selEnd = currentBlock.querySelector(".sel-end");
+    if (selEnd) {
+      newBlock.insertBefore(selEnd, newBlock.firstChild);
+    }
+    if (selStart) {
+      newBlock.insertBefore(selStart, newBlock.firstChild);
+    }
+    if (!newBlock.textContent?.trim()) {
+      const br = document.createTextNode(" ");
+      if (selStart) {
+        selStart.before(br);
+      } else {
+        newBlock.appendChild(br);
+      }
+    }
+    if (!currentBlock.textContent?.trim()) {
+      currentBlock.appendChild(document.createTextNode(" "));
+    }
+    currentBlock.after(newBlock);
+    this.selectable.markBounds();
+    this.updateUndo("new");
+    return true;
+  }
+  arrowLeft(evt) {
+    const start = this.selectable.find(".sel-start");
+    if (!start)
+      return;
+    if (evt.altKey) {
+      this.moveWordLeft(evt.shiftKey);
+    } else {
+      const previous = previousLeafNode(start, this.parts.doc, deletableFilter);
+      if (previous) {
+        this.moveBoundsBefore(previous, evt.shiftKey);
+      }
+    }
+  }
+  arrowRight(evt) {
+    const end = this.selectable.find(".sel-end");
+    if (!end)
+      return;
+    if (evt.altKey) {
+      this.moveWordRight(evt.shiftKey);
+    } else {
+      const next = nextLeafNode(end, this.parts.doc, deletableFilter);
+      if (next) {
+        this.moveBoundsAfter(next, evt.shiftKey);
+      }
+    }
+  }
+  moveWordLeft(extendSelection) {
+    const marker = this.selectable.find(".sel-start");
+    if (!marker)
+      return;
+    const block = this.block(marker);
+    if (!block)
+      return;
+    spanify(block, true);
+    let node = previousLeafNode(marker, block, deletableFilter);
+    if (!node) {
+      spanify(block, false);
+      return;
+    }
+    while (node && node.nodeType === 3 && /^\s$/.test(node.textContent || "")) {
+      node = previousLeafNode(node, block, deletableFilter);
+    }
+    let last = node;
+    while (node && node.nodeType === 3 && /^\S$/.test(node.textContent || "")) {
+      last = node;
+      const prev = previousLeafNode(node, block, deletableFilter);
+      if (prev && prev.nodeType === 3 && /^\S$/.test(prev.textContent || "")) {
+        node = prev;
+      } else {
+        break;
+      }
+    }
+    if (last) {
+      const start = this.selectable.find(".sel-start");
+      const end = this.selectable.find(".sel-end");
+      if (start && end) {
+        last.parentNode?.insertBefore(start, last);
+        if (!extendSelection) {
+          start.after(end);
+        }
+      }
+    }
+    spanify(block, false);
+    this.selectable.markBounds();
+    this.focus();
+  }
+  moveWordRight(extendSelection) {
+    const marker = this.selectable.find(".sel-end");
+    if (!marker)
+      return;
+    const block = this.block(marker);
+    if (!block)
+      return;
+    spanify(block, true);
+    let node = nextLeafNode(marker, block, deletableFilter);
+    if (!node) {
+      spanify(block, false);
+      return;
+    }
+    while (node && node.nodeType === 3 && /^\s$/.test(node.textContent || "")) {
+      node = nextLeafNode(node, block, deletableFilter);
+    }
+    let last = node;
+    while (node && node.nodeType === 3 && /^\S$/.test(node.textContent || "")) {
+      last = node;
+      const next = nextLeafNode(node, block, deletableFilter);
+      if (next && next.nodeType === 3 && /^\S$/.test(next.textContent || "")) {
+        node = next;
+      } else {
+        break;
+      }
+    }
+    if (last) {
+      const start = this.selectable.find(".sel-start");
+      const end = this.selectable.find(".sel-end");
+      if (start && end) {
+        last.parentNode?.insertBefore(end, last.nextSibling);
+        if (!extendSelection) {
+          end.parentNode?.insertBefore(start, end);
+        }
+      }
+    }
+    spanify(block, false);
+    this.selectable.markBounds();
+    this.focus();
+  }
+  moveBoundsBefore(target, extendSelection) {
+    const start = this.selectable.find(".sel-start");
+    const end = this.selectable.find(".sel-end");
+    if (!start || !end)
+      return;
+    if (target.nodeType === 3 && (target.textContent || "").length > 1) {
+      const lastChar = target.splitText((target.textContent || "").length - 1);
+      lastChar.parentNode?.insertBefore(start, lastChar);
+    } else {
+      target.parentNode?.insertBefore(start, target);
+    }
+    if (!extendSelection) {
+      start.after(end);
+    }
+    this.selectable.markBounds();
+    this.focus();
+  }
+  moveBoundsAfter(target, extendSelection) {
+    const start = this.selectable.find(".sel-start");
+    const end = this.selectable.find(".sel-end");
+    if (!start || !end)
+      return;
+    if (target.nodeType === 3 && (target.textContent || "").length > 1) {
+      target.splitText(1);
+    }
+    target.parentNode?.insertBefore(end, target.nextSibling);
+    if (!extendSelection) {
+      end.parentNode?.insertBefore(start, end);
+    }
+    this.selectable.markBounds();
+    this.focus();
+  }
+  signatureOf(html) {
+    const scratch = document.createElement("div");
+    scratch.innerHTML = html;
+    for (const marker of Array.from(scratch.querySelectorAll(".sel-start, .sel-end"))) {
+      marker.remove();
+    }
+    for (const el of Array.from(scratch.querySelectorAll("[class], [draggable], [data-drag]"))) {
+      el.classList.remove("selected", "selected-block", "first-block", "last-block");
+      if (el.classList.length === 0)
+        el.removeAttribute("class");
+      el.removeAttribute("draggable");
+      el.removeAttribute("data-drag");
+    }
+    for (const span2 of Array.from(scratch.querySelectorAll("span"))) {
+      if (span2.attributes.length === 0) {
+        span2.replaceWith(...Array.from(span2.childNodes));
+      }
+    }
+    scratch.normalize();
+    return scratch.innerHTML;
+  }
+  updateUndo(command, reason) {
+    if (this.undo.length === 0) {
+      command = "init";
+    }
+    if (reason && this.reasonForLastUndo === reason) {
+      command = undefined;
+    }
+    this.reasonForLastUndo = reason;
+    const html = this.docHTML;
+    switch (command) {
+      case "init":
+        this.undo = [html];
+        this.undoDepth = 0;
+        break;
+      case "new":
+        if (this.undoDepth) {
+          this.undo = this.undo.slice(this.undoDepth);
+          this.undoDepth = 0;
+        }
+        if (this.undo.length && this.signatureOf(this.undo[0]) === this.signatureOf(html)) {
+          this.undo[0] = html;
+          break;
+        }
+        this.undo.unshift(html);
+        break;
+      case "undo":
+        if (this.undoDepth < this.undo.length - 1) {
+          this.undoDepth++;
+          this.docHTML = this.undo[this.undoDepth];
+          this.focus();
+        }
+        break;
+      case "redo":
+        if (this.undoDepth > 0) {
+          this.undoDepth--;
+          this.docHTML = this.undo[this.undoDepth];
+          this.focus();
+        }
+        break;
+      default:
+        if (this.undoDepth || this.undo.length === 1) {
+          if (this.undo.length && this.signatureOf(this.undo[0]) === this.signatureOf(html)) {
+            this.undo[0] = html;
+            break;
+          }
+          this.undo = this.undo.slice(this.undoDepth);
+          this.undoDepth = 0;
+          this.undo.unshift(html);
+        } else {
+          this.undo[0] = html;
+        }
+    }
+    this.selectable?.onBoundsChanged?.();
+    this.updateUndoButtons();
+    if (this.internals) {
+      this.internals.setFormValue(html);
+    }
+  }
+  updateUndoButtons() {
+    const toolbar = this.parts.toolbar;
+    const undoBtn = toolbar.querySelector('[value="updateUndo undo"]');
+    const redoBtn = toolbar.querySelector('[value="updateUndo redo"]');
+    if (undoBtn)
+      undoBtn.disabled = this.undoDepth >= this.undo.length - 1;
+    if (redoBtn)
+      redoBtn.disabled = this.undoDepth === 0;
+  }
+  handleDocClick = (evt) => {
+    if (!this.active)
+      return;
+    const link = evt.target?.closest?.("a");
+    if (!link || !this.parts.doc.contains(link))
+      return;
+    if (evt.metaKey || evt.ctrlKey) {
+      window.open(link.getAttribute("href") || "", link.getAttribute("target") || "_blank", "noopener");
+    }
+    evt.preventDefault();
+  };
+  handleShortcut(evt) {
+    const key = evt.key.toLowerCase();
+    const shortcutStr = `${evt.ctrlKey || evt.metaKey ? "ctrl+" : ""}${key}`;
+    const btn = this.parts.toolbar.querySelector(`[data-shortcut="${shortcutStr}"]`);
+    if (btn) {
+      const value = btn.getAttribute("value");
+      if (value) {
+        this.doCommand(value);
+        evt.preventDefault();
+        evt.stopPropagation();
+      }
+    }
+  }
+  handleKeydown = (evt) => {
+    if (!this.active)
+      return;
+    const target = evt.target;
+    if (target.closest(".not-editable"))
+      return;
+    const cell = this.caretCell();
+    const ip = this.insertionPoint();
+    const li = ip ? this.listItemOf(ip) : null;
+    switch (evt.key) {
+      case "Tab":
+        evt.preventDefault();
+        if (cell) {
+          if (evt.shiftKey) {
+            const prev = prevCell(cell);
+            if (prev)
+              this.moveCaretToCell(prev);
+          } else {
+            const next = nextCell(cell);
+            if (next) {
+              this.moveCaretToCell(next);
+            } else {
+              const table = tableOf(cell);
+              if (table) {
+                const colCount = getColumnCount(table);
+                for (let c = 0;c < colCount; c++) {
+                  table.appendChild(createCell());
+                }
+                const newFirst = nextCell(cell);
+                if (newFirst)
+                  this.moveCaretToCell(newFirst);
+                this.updateUndo("new");
+              }
+            }
+          }
+        }
+        break;
+      case "Backspace":
+        evt.preventDefault();
+        if (this.deleteSelection()) {
+          this.updateUndo("new");
+        } else if (cell) {
+          if (ip) {
+            const prev = previousLeafNode(ip, cell, deletableFilter);
+            if (prev) {
+              if (prev.nodeType === 3 && (prev.textContent || "").length > 1) {
+                prev.textContent = prev.textContent.slice(0, -1);
+              } else {
+                const top = topSingleParentAncestor(prev);
+                if (cell.contains(top)) {
+                  top.parentNode?.removeChild(top);
+                }
+              }
+              this.normalize();
+              this.updateUndo();
+            }
+          }
+        } else if (li) {
+          this.listBackspace(li);
+        } else {
+          this.backspace();
+        }
+        break;
+      case "Delete":
+        evt.preventDefault();
+        if (this.deleteSelection()) {
+          this.updateUndo("new");
+        } else if (cell) {
+          if (ip) {
+            const next = nextLeafNode(ip, cell, deletableFilter);
+            if (next) {
+              if (next.nodeType === 3 && (next.textContent || "").length > 1) {
+                next.textContent = next.textContent.slice(1);
+              } else {
+                const top = topSingleParentAncestor(next);
+                if (cell.contains(top)) {
+                  top.parentNode?.removeChild(top);
+                }
+              }
+              this.normalize();
+              this.updateUndo();
+            }
+          }
+        } else if (li) {
+          this.listForwardDelete(li);
+        } else {
+          this.forwardDelete();
+        }
+        break;
+      case "Enter":
+        evt.preventDefault();
+        if (cell) {
+          if (evt.shiftKey) {
+            this.tableMoveDown(cell);
+          } else {
+            if (ip) {
+              ip.before(document.createElement("br"));
+              this.normalize();
+              this.updateUndo();
+            }
+          }
+        } else if (li) {
+          this.deleteSelection();
+          this.splitListItem(li);
+        } else {
+          this.deleteSelection();
+          this.splitAtCaret();
+        }
+        break;
+      case "ArrowLeft":
+        evt.preventDefault();
+        this.arrowLeft(evt);
+        break;
+      case "ArrowRight":
+        evt.preventDefault();
+        this.arrowRight(evt);
+        break;
+      case "ArrowUp":
+        evt.preventDefault();
+        if (cell) {
+          if (evt.shiftKey) {
+            this.tableMoveUp(cell);
+          } else {
+            const above = cellAbove(cell);
+            if (above) {
+              this.moveCaretToCell(above);
+            } else {
+              this.exitTable(cell, "before");
+            }
+          }
+        } else {
+          this.moveVertical("up", evt.shiftKey);
+        }
+        break;
+      case "ArrowDown":
+        evt.preventDefault();
+        if (cell) {
+          if (evt.shiftKey) {
+            this.tableMoveDown(cell);
+          } else {
+            const below = cellBelow(cell);
+            if (below) {
+              this.moveCaretToCell(below);
+            } else {
+              this.exitTable(cell, "after");
+            }
+          }
+        } else {
+          this.moveVertical("down", evt.shiftKey);
+        }
+        break;
+    }
+    this.lastKey = evt.keyCode;
+  };
+  handleKeypress = (evt) => {
+    if (!this.active)
+      return;
+    const target = evt.target;
+    if (target.closest(".not-editable"))
+      return;
+    if (evt.ctrlKey || evt.metaKey) {
+      this.handleShortcut(evt);
+    } else {
+      this.deleteSelection();
+      if (evt.key.length === 1) {
+        this.contentKey(evt.key);
+      }
+    }
+    evt.preventDefault();
+    evt.stopPropagation();
+  };
+  handleCopy = (evt) => {
+    const selected = Array.from(this.parts.doc.querySelectorAll(".selected"));
+    if (selected.length === 0)
+      return;
+    let html = "";
+    let text = "";
+    for (const el of selected) {
+      html += el.outerHTML;
+      text += el.textContent;
+    }
+    evt.clipboardData?.setData("text/html", html);
+    evt.clipboardData?.setData("text/plain", text);
+    evt.preventDefault();
+  };
+  handleCut = (evt) => {
+    this.handleCopy(evt);
+    this.deleteSelection();
+  };
+  insertTransfer(html, text) {
+    const ip = this.insertionPoint();
+    if (!ip)
+      return false;
+    if (this.pastemode === "remove" || !html) {
+      if (!text)
+        return false;
+      ip.before(document.createTextNode(text));
+    } else {
+      const temp = document.createElement("div");
+      temp.innerHTML = html;
+      while (temp.firstChild) {
+        ip.before(temp.firstChild);
+      }
+    }
+    return true;
+  }
+  handlePaste = (evt) => {
+    if (!this.active)
+      return;
+    const html = evt.clipboardData?.getData("text/html");
+    const text = evt.clipboardData?.getData("text/plain");
+    this.deleteSelection();
+    this.insertTransfer(html, text);
+    this.normalize();
+    this.updateUndo("new");
+    evt.preventDefault();
+  };
+  draggingSelection = false;
+  handleDragStart = (evt) => {
+    if (!this.active || !evt.dataTransfer)
+      return;
+    const selected = this.selectable.findAll(".selected");
+    if (selected.length === 0)
+      return;
+    const container = document.createElement("div");
+    for (const el of selected)
+      container.appendChild(el.cloneNode(true));
+    evt.dataTransfer.setData("text/html", container.innerHTML);
+    evt.dataTransfer.setData("text/plain", container.textContent || "");
+    evt.dataTransfer.effectAllowed = "copyMove";
+    this.draggingSelection = true;
+  };
+  handleDragOver = (evt) => {
+    if (!this.active)
+      return;
+    evt.preventDefault();
+    if (evt.dataTransfer) {
+      evt.dataTransfer.dropEffect = evt.altKey ? "copy" : "move";
+    }
+    const target = evt.target;
+    if (target instanceof Element) {
+      this.selectable.placeCaretAt(evt.clientX, evt.clientY);
+    }
+  };
+  handleDrop = (evt) => {
+    if (!this.active || !evt.dataTransfer)
+      return;
+    evt.preventDefault();
+    const internal = this.draggingSelection;
+    this.draggingSelection = false;
+    const caret = this.insertionPoint();
+    if (internal && caret?.closest(".selected")) {
+      this.clearDraggable();
+      return;
+    }
+    const files = Array.from(evt.dataTransfer.files || []);
+    const images = files.filter((file) => file.type.startsWith("image/"));
+    if (images.length) {
+      this.insertDroppedImages(images);
+      this.clearDraggable();
+      return;
+    }
+    const html = evt.dataTransfer.getData("text/html");
+    const text = evt.dataTransfer.getData("text/plain");
+    if (internal && !evt.altKey) {
+      this.deleteSelection();
+    } else {
+      this.selectable.unmark();
+    }
+    this.clearDraggable();
+    this.insertTransfer(html, text);
+    this.normalize();
+    this.updateUndo("new");
+    this.focus();
+  };
+  handleDragEnd = () => {
+    this.draggingSelection = false;
+    this.clearDraggable();
+  };
+  clearDraggable() {
+    for (const el of Array.from(this.parts.doc.querySelectorAll("[draggable]"))) {
+      el.removeAttribute("draggable");
+      el.removeAttribute("data-drag");
+    }
+  }
+  async insertDroppedImages(images) {
+    for (const file of images) {
+      const url = await new Promise((resolve) => {
+        const reader = new FileReader;
+        reader.onload = () => resolve(String(reader.result || ""));
+        reader.readAsDataURL(file);
+      });
+      if (url)
+        this.doCommand(`insertImage ${url} ${file.name}`);
+    }
+  }
+  cellEdgeAt(evt) {
+    const target = evt.target;
+    const cell = target.closest(".editor-table > li");
+    if (!cell)
+      return null;
+    const table = cell.parentElement;
+    if (!table || !table.classList.contains("editor-table"))
+      return null;
+    const rect = cell.getBoundingClientRect();
+    const colCount = getColumnCount(table);
+    const col = colOfCell(cell, colCount);
+    const edgeThreshold = 4;
+    if (Math.abs(evt.clientX - rect.right) < edgeThreshold && col < colCount - 1) {
+      return [table, col];
+    }
+    if (Math.abs(evt.clientX - rect.left) < edgeThreshold && col > 0) {
+      return [table, col - 1];
+    }
+    return null;
+  }
+  updateTouchAffordances() {
+    if (!this.touchAffordances)
+      return;
+    if (!this.isTouchInteraction && !this.touchMenuEl) {
+      this.touchAffordances.style.display = "none";
+      this.parts.doc.style.paddingTop = "";
+      this.parts.doc.style.paddingBottom = "";
+      return;
+    }
+    const selStart = this.parts.doc.querySelector(".sel-start");
+    const selEnd = this.parts.doc.querySelector(".sel-end");
+    if (!selStart || !selEnd) {
+      this.touchAffordances.style.display = "none";
+      this.parts.doc.style.paddingTop = "";
+      this.parts.doc.style.paddingBottom = "";
+      return;
+    }
+    const docRect = this.parts.doc.getBoundingClientRect();
+    const startRect = this.markerRect(selStart);
+    const endRect = this.markerRect(selEnd);
+    let needsPaddingChange = false;
+    if (this.touchDrags.size === 0) {
+      const existingTopPad = parseFloat(this.parts.doc.style.paddingTop) || 0;
+      const existingBottomPad = parseFloat(this.parts.doc.style.paddingBottom) || 0;
+      const selTop = Math.min(startRect.top, endRect.top) - 48 - existingTopPad;
+      const selBottom = Math.max(startRect.bottom, endRect.bottom) + 48 + existingBottomPad;
+      const wantTop = selTop < docRect.top ? "52px" : "";
+      const wantBottom = selBottom > docRect.bottom ? "52px" : "";
+      const hadTop = this.parts.doc.style.paddingTop;
+      const hadBottom = this.parts.doc.style.paddingBottom;
+      if (wantTop !== hadTop || wantBottom !== hadBottom) {
+        needsPaddingChange = true;
+        this.parts.doc.style.paddingTop = wantTop;
+        this.parts.doc.style.paddingBottom = wantBottom;
+      }
+    }
+    if (needsPaddingChange) {
+      this.touchAffordances.style.opacity = "0";
+      this.touchAffordances.style.display = "block";
+      setTimeout(() => {
+        this.positionAffordances();
+        this.touchAffordances.style.opacity = "1";
+      }, 160);
+    } else {
+      this.positionAffordances();
+      this.touchAffordances.style.display = "block";
+      this.touchAffordances.style.opacity = "1";
+    }
+  }
+  positionAffordances() {
+    const selStart = this.parts.doc.querySelector(".sel-start");
+    const selEnd = this.parts.doc.querySelector(".sel-end");
+    if (!selStart || !selEnd)
+      return;
+    const docRect = this.parts.doc.getBoundingClientRect();
+    const startRect = this.markerRect(selStart);
+    const endRect = this.markerRect(selEnd);
+    const startX = startRect.left - docRect.left + this.parts.doc.scrollLeft;
+    const startY = startRect.top - docRect.top + this.parts.doc.scrollTop;
+    const endX = endRect.right - docRect.left + this.parts.doc.scrollLeft;
+    const endY = endRect.bottom - docRect.top + this.parts.doc.scrollTop;
+    const isCollapsed = selStart.nextElementSibling === selEnd;
+    if (isCollapsed) {
+      this.touchHandleStart.style.left = `${startX - 44}px`;
+      this.touchHandleStart.style.top = `${startY - 44}px`;
+      this.touchContextMenu.style.left = `${startX}px`;
+      this.touchContextMenu.style.top = `${startY - 44}px`;
+      this.touchHandleEnd.style.left = `${endX}px`;
+      this.touchHandleEnd.style.top = `${endY}px`;
+    } else {
+      this.touchHandleStart.style.left = `${startX - 44}px`;
+      this.touchHandleStart.style.top = `${startY - 44}px`;
+      this.touchHandleEnd.style.left = `${endX}px`;
+      this.touchHandleEnd.style.top = `${endY}px`;
+      const midX = (startX + endX) / 2 - 22;
+      const topY = Math.min(startY, endY) - 44;
+      this.touchContextMenu.style.left = `${midX}px`;
+      this.touchContextMenu.style.top = `${topY}px`;
+    }
+  }
+  handleAffordanceDragStart = (evt) => {
+    const handle = evt.currentTarget;
+    const which = handle === this.touchHandleStart ? "start" : "end";
+    handle.setPointerCapture(evt.pointerId);
+    const handleRect = handle.getBoundingClientRect();
+    const markerSelector = which === "start" ? ".sel-start" : ".sel-end";
+    const marker = this.parts.doc.querySelector(markerSelector);
+    const rawLineHeight = marker ? parseFloat(getComputedStyle(marker).lineHeight) : NaN;
+    const halfLine = isNaN(rawLineHeight) ? 10 : rawLineHeight / 2;
+    let offsetX;
+    let offsetY;
+    if (which === "start") {
+      offsetX = handleRect.right - evt.clientX;
+      offsetY = handleRect.bottom + halfLine - evt.clientY;
+    } else {
+      offsetX = handleRect.left - evt.clientX;
+      offsetY = handleRect.top - halfLine - evt.clientY;
+    }
+    this.touchDrags.set(evt.pointerId, {
+      target: which,
+      offsetX,
+      offsetY
+    });
+    this.hideTouchMenu();
+    this.touchAffordances.classList.add("dragging");
+    evt.preventDefault();
+    evt.stopPropagation();
+  };
+  handleAffordanceDragMove = (evt) => {
+    const drag = this.touchDrags.get(evt.pointerId);
+    if (!drag)
+      return;
+    const cursorX = evt.clientX + drag.offsetX;
+    const cursorY = evt.clientY + drag.offsetY;
+    const affordanceEl = evt.currentTarget;
+    affordanceEl.style.pointerEvents = "none";
+    this.touchAffordances.style.pointerEvents = "none";
+    const elementAtPoint = this.shadowRoot.elementFromPoint(cursorX, cursorY);
+    affordanceEl.style.pointerEvents = "auto";
+    this.touchAffordances.style.pointerEvents = "";
+    if (!elementAtPoint || elementAtPoint.closest(".not-selectable") || elementAtPoint.classList.contains("not-selectable")) {
+      return;
+    }
+    const hit = characterAtPoint(this.parts.doc, cursorX, cursorY);
+    if (!hit)
+      return;
+    const markerSelector = drag.target === "start" ? ".sel-start" : ".sel-end";
+    const marker = this.parts.doc.querySelector(markerSelector);
+    if (marker) {
+      const range = document.createRange();
+      range.setStart(hit.node, hit.after ? hit.offset + 1 : hit.offset);
+      range.collapse(true);
+      range.insertNode(marker);
+      this.parts.doc.normalize();
+      this.selectable.markBounds();
+      const docRect = this.parts.doc.getBoundingClientRect();
+      const handle = evt.currentTarget;
+      const handleX = evt.clientX - docRect.left + this.parts.doc.scrollLeft;
+      const handleY = evt.clientY - docRect.top + this.parts.doc.scrollTop;
+      handle.style.left = `${handleX - 22}px`;
+      handle.style.top = `${handleY - 22}px`;
+    }
+    evt.preventDefault();
+    evt.stopPropagation();
+  };
+  handleAffordanceDragEnd = (evt) => {
+    if (!this.touchDrags.has(evt.pointerId))
+      return;
+    const handle = evt.currentTarget;
+    handle.releasePointerCapture(evt.pointerId);
+    this.touchDrags.delete(evt.pointerId);
+    if (this.touchDrags.size === 0) {
+      this.selectable.despanify();
+      this.selectable.selectionChanged();
+      requestAnimationFrame(() => {
+        this.touchAffordances.classList.remove("dragging");
+      });
+    }
+    evt.preventDefault();
+    evt.stopPropagation();
+  };
+  handleTouchContextMenu = (evt) => {
+    evt.preventDefault();
+    evt.stopPropagation();
+    if (this.touchMenuEl) {
+      this.hideTouchMenu();
+      return;
+    }
+    this.showTouchMenu();
+  };
+  showTouchMenu() {
+    this.hideTouchMenu();
+    const menu = document.createElement("div");
+    menu.className = "touch-menu not-selectable do-not-spanify";
+    const selectedText = () => this.selectable.findAll(".selected").map((el) => el.textContent).join("");
+    const actions = [
+      {
+        label: "Cut",
+        action: () => {
+          const text = selectedText();
+          if (!text)
+            return;
+          navigator.clipboard.writeText(text);
+          this.deleteSelection();
+          this.updateUndo("new");
+        }
+      },
+      {
+        label: "Copy",
+        action: () => {
+          navigator.clipboard.writeText(selectedText());
+        }
+      },
+      {
+        label: "Paste",
+        action: () => {
+          navigator.clipboard.readText().then((text) => {
+            if (text) {
+              this.deleteSelection();
+              const ip = this.insertionPoint();
+              if (ip) {
+                ip.before(document.createTextNode(text));
+                this.normalize();
+                this.updateUndo("new");
+              }
+            }
+          });
+        }
+      },
+      {
+        label: "Delete",
+        action: () => {
+          this.deleteSelection();
+          this.updateUndo("new");
+        }
+      },
+      {
+        label: "Bold",
+        action: () => this.doCommand("setText font-weight bold")
+      },
+      {
+        label: "Italic",
+        action: () => this.doCommand("setText font-style italic")
+      },
+      {
+        label: "Plain",
+        action: () => this.doCommand("setText font-weight normal; setText font-style normal; setText text-decoration none")
+      }
+    ];
+    for (const { label, action } of actions) {
+      const btn = document.createElement("button");
+      btn.className = "touch-menu-item not-selectable";
+      btn.textContent = label;
+      btn.addEventListener("pointerdown", (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        action();
+        this.hideTouchMenu();
+      });
+      menu.appendChild(btn);
+    }
+    const closeBtn = document.createElement("button");
+    closeBtn.className = "touch-menu-item touch-menu-close not-selectable";
+    closeBtn.textContent = "×";
+    closeBtn.addEventListener("pointerdown", (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      this.hideTouchMenu();
+    });
+    menu.appendChild(closeBtn);
+    const bRect = this.touchContextMenu.getBoundingClientRect();
+    const docRect = this.parts.doc.getBoundingClientRect();
+    const menuWidth = (actions.length + 1) * 70;
+    let menuLeft = bRect.left - docRect.left + this.parts.doc.scrollLeft + 22 - menuWidth / 2;
+    if (menuLeft < 0)
+      menuLeft = 4;
+    if (menuLeft + menuWidth > docRect.width)
+      menuLeft = docRect.width - menuWidth - 4;
+    menu.style.left = `${menuLeft}px`;
+    let menuTop = bRect.top - docRect.top + this.parts.doc.scrollTop - 44;
+    if (menuTop < 0) {
+      menuTop = bRect.bottom - docRect.top + this.parts.doc.scrollTop + 4;
+    }
+    menu.style.top = `${menuTop}px`;
+    this.touchMenuEl = menu;
+    this.touchAffordances.appendChild(menu);
+    this.touchMenuDismiss = (e) => {
+      if (this.touchMenuEl && !this.touchMenuEl.contains(e.target)) {
+        this.hideTouchMenu();
+      }
+    };
+    setTimeout(() => {
+      this.parts.doc.addEventListener("pointerdown", this.touchMenuDismiss);
+    }, 0);
+  }
+  touchMenuDismiss = null;
+  hideTouchMenu() {
+    if (this.touchMenuDismiss) {
+      this.parts.doc.removeEventListener("pointerdown", this.touchMenuDismiss);
+      this.touchMenuDismiss = null;
+    }
+    if (this.touchMenuEl) {
+      this.touchMenuEl.remove();
+      this.touchMenuEl = null;
+    }
+  }
+  handleResizePointerDown = (evt) => {
+    const edge = this.cellEdgeAt(evt);
+    if (!edge)
+      return;
+    const [table, col] = edge;
+    this.resizeTable = table;
+    this.resizeCol = col;
+    this.resizeStartX = evt.clientX;
+    const firstRowCells = getCellsInRow(table, 0, getColumnCount(table));
+    this.resizeStartWidths = firstRowCells.map((c) => c.getBoundingClientRect().width);
+    evt.preventDefault();
+    evt.stopPropagation();
+    this.parts.doc.setPointerCapture(evt.pointerId);
+  };
+  handleResizePointerMove = (evt) => {
+    if (!this.resizeTable) {
+      const edge = this.cellEdgeAt(evt);
+      this.parts.doc.style.cursor = edge ? "col-resize" : "";
+      return;
+    }
+    const dx = evt.clientX - this.resizeStartX;
+    const newWidths = [...this.resizeStartWidths];
+    newWidths[this.resizeCol] = Math.max(30, newWidths[this.resizeCol] + dx);
+    newWidths[this.resizeCol + 1] = Math.max(30, newWidths[this.resizeCol + 1] - dx);
+    setColumnWidths(this.resizeTable, newWidths.map((w) => `${w}px`));
+  };
+  handleResizePointerUp = (evt) => {
+    if (this.resizeTable) {
+      this.updateUndo("new");
+      this.resizeTable = null;
+      this.resizeCol = -1;
+      this.parts.doc.style.cursor = "";
+      this.parts.doc.releasePointerCapture(evt.pointerId);
+    }
+  };
+  isToolbarEvent(target) {
+    return target.closest('[slot="toolbar"]') !== null || target.closest('[slot="menubar"]') !== null;
+  }
+  handleToolbarClick = (evt) => {
+    const target = evt.target;
+    if (!this.isToolbarEvent(target))
+      return;
+    const btn = target.closest("button");
+    if (!btn)
+      return;
+    const value = btn.getAttribute("value");
+    if (value) {
+      this.doCommand(value);
+    }
+  };
+  handleToolbarChange = (evt) => {
+    const target = evt.target;
+    if (!this.isToolbarEvent(target))
+      return;
+    const select = target.closest("select") || target.closest("tosi-select");
+    if (!select)
+      return;
+    const value = select.value;
+    if (value) {
+      this.doCommand(value);
+    }
+  };
+}
+var tosijsStyledEditor = TosijsStyledEditor.elementCreator();
+// src/version.ts
+var version = "0.4.2";
+export {
+  MENU_CLASS,
+  Selectable,
+  TosijsStyledEditor,
+  allowSelection,
+  caretGeometryAt,
+  cellAbove,
+  cellBelow,
+  cellIndex,
+  cellOf,
+  characterAtPoint,
+  characterStyleWidgets,
+  closestSingleParentAncestor,
+  colOfCell,
+  commandButton,
+  commands,
+  createCell,
+  createTable,
+  debugWidget,
+  defaultMenubar,
+  defaultToolbar,
+  executeCommand,
+  firstLeafNode,
+  fontFamilyMenu,
+  fontSizeMenu,
+  getCellsInCol,
+  getCellsInRow,
+  getColumnCount,
+  getColumnWidths,
+  getRowCount,
+  insertMenu,
+  isBefore,
+  isHeaderCell,
+  isTableCell,
+  justificationMenu,
+  lastLeafNode,
+  leafNodes,
+  lineSpacingMenu,
+  localePickerWidget,
+  makeCSS,
+  makeFilter,
+  minimalToolbar,
+  nextCell,
+  nextLeafNode,
+  paragraphStyleMenu,
+  paragraphStyleWidgets,
+  prevCell,
+  previousLeafNode,
+  renumberFootnotes,
+  rowOfCell,
+  setColumnWidths,
+  siblingOrder,
+  spanify,
+  tableMenu,
+  tableOf,
+  toolbarSpacer,
+  topSingleParentAncestor,
+  tosijsStyledEditor,
+  undoRedoWidgets,
+  version
+};