tosijs-styled-editor 0.5.2 → 0.6.0

package/dist/module.js

@@ -329,9 +329,10 @@ function wordBoundsAt(text, offset) {
     end++;
   return { start, end };
 }
-function stickySelectionBounds(text, anchor, head) {
+function stickySelectionBounds(text, anchor, head, leftTheAnchorWord) {
   const anchorWord = wordBoundsAt(text, anchor);
-  if (head >= anchorWord.start && head <= anchorWord.end) {
+  const stillInside = leftTheAnchorWord === undefined ? head >= anchorWord.start && head <= anchorWord.end : !leftTheAnchorWord;
+  if (stillInside) {
     return head < anchor ? { start: head, end: anchor } : { start: anchor, end: head };
   }
   const headWord = wordBoundsAt(text, head);
@@ -421,6 +422,7 @@ class Selectable {
   root;
   selecting = false;
   touchMode = false;
+  stickySelection = "touch";
   constructor(root) {
     this.root = root;
     this.setup();
@@ -469,19 +471,7 @@ class Selectable {
       this.lastHovered = target;
     }
     if (this.selecting) {
-      const hit = characterAtPoint(this.root, evt.clientX, evt.clientY);
-      const selEnd = this.find(".sel-end");
-      if (hit && selEnd) {
-        if (!this.extendSticky(hit)) {
-          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?.();
-      }
+      this.extendTo(evt.clientX, evt.clientY);
     }
     evt.preventDefault();
     evt.stopPropagation();
@@ -524,9 +514,65 @@ class Selectable {
       }
     };
   }
-  extendSticky(hit) {
+  setDragAnchor(hit) {
+    const block = hit && this.topLevelAncestor(hit.node);
+    this.dragAnchor = hit && block ? {
+      block,
+      index: this.textIndexOf(block).indexOf(hit.node, hit.after ? hit.offset + 1 : hit.offset) ?? 0
+    } : null;
+  }
+  extendTo(x, y, which = "end") {
+    const hit = characterAtPoint(this.root, x, y);
+    const marker = this.find(which === "start" ? ".sel-start" : ".sel-end");
+    if (!hit || !marker)
+      return;
+    if (!this.extendSticky(hit, x, y)) {
+      const range = document.createRange();
+      range.setStart(hit.node, hit.after ? hit.offset + 1 : hit.offset);
+      range.collapse(true);
+      range.insertNode(marker);
+      this.root.normalize();
+    }
+    this.extendSelection();
+    this.onBoundsChanged?.();
+  }
+  beginBoundDrag(which) {
+    const anchorEl = this.find(which === "start" ? ".sel-end" : ".sel-start");
+    const block = anchorEl && this.topLevelAncestor(anchorEl);
+    this.selecting = 1;
+    this.touchMode = true;
+    this.dragAnchor = anchorEl && block ? { block, index: this.textOffsetOf(block, anchorEl) } : null;
+  }
+  endBoundDrag() {
+    this.selecting = false;
+    this.dragAnchor = null;
+  }
+  pointerInAnchorWord(x, y) {
     const anchor = this.dragAnchor;
-    if (this.selecting !== 1 || !anchor)
+    if (!anchor?.word)
+      return false;
+    const index = this.textIndexOf(anchor.block);
+    const from = index.locate(anchor.word.start);
+    const to = index.locate(anchor.word.end);
+    if (!from || !to)
+      return false;
+    const range = document.createRange();
+    range.setStart(from.node, Math.min(from.offset, from.node.length));
+    range.setEnd(to.node, Math.min(to.offset, to.node.length));
+    const pad = 1;
+    for (const r of Array.from(range.getClientRects())) {
+      if (x >= r.left - pad && x <= r.right + pad && y >= r.top - pad && y <= r.bottom + pad) {
+        return true;
+      }
+    }
+    return false;
+  }
+  get stickyApplies() {
+    return this.stickySelection === "always" || this.stickySelection === "touch" && this.touchMode;
+  }
+  extendSticky(hit, x, y) {
+    const anchor = this.dragAnchor;
+    if (!this.stickyApplies || this.selecting !== 1 || !anchor)
       return false;
     const block = this.topLevelAncestor(hit.node);
     if (!block || block !== anchor.block)
@@ -535,7 +581,9 @@ class Selectable {
     const head = index.indexOf(hit.node, hit.after ? hit.offset + 1 : hit.offset);
     if (head === null)
       return false;
-    const { start, end } = stickySelectionBounds(index.text, anchor.index, head);
+    if (!anchor.word)
+      anchor.word = wordBoundsAt(index.text, anchor.index);
+    const { start, end } = stickySelectionBounds(index.text, anchor.index, head, !this.pointerInAnchorWord(x, y));
     const startPos = index.locate(start);
     const endPos = index.locate(end);
     if (!startPos || !endPos)
@@ -607,11 +655,7 @@ class Selectable {
           this.extendSelection();
         }
       } else if (this.selecting === 1) {
-        const block = this.topLevelAncestor(hit.node);
-        this.dragAnchor = block ? {
-          block,
-          index: this.textIndexOf(block).indexOf(hit.node, hit.after ? hit.offset + 1 : hit.offset) ?? 0
-        } : null;
+        this.setDragAnchor(hit);
         this.placeCaretAt(evt.clientX, evt.clientY);
       } else if (this.selecting === 2) {
         this.selectWordAt(hit.node, hit.offset);
@@ -686,8 +730,10 @@ class Selectable {
     this.selecting = 1;
     const hit = characterAtPoint(this.root, touch.clientX, touch.clientY);
     if (hit) {
+      this.setDragAnchor(hit);
       this.placeCaretAt(touch.clientX, touch.clientY);
     } else if (target instanceof HTMLElement && target !== this.root) {
+      this.setDragAnchor(null);
       this.removeBounds();
       const bounds = this.createBounds();
       target.appendChild(bounds);
@@ -704,17 +750,7 @@ class Selectable {
     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?.();
-    }
+    this.extendTo(touch.clientX, touch.clientY);
     if (evt.cancelable)
       evt.preventDefault();
   };
@@ -723,6 +759,7 @@ class Selectable {
       this.extendSelection();
       this.normalizeBoundsOrder();
       this.selecting = false;
+      this.dragAnchor = null;
     }
     for (const child of Array.from(this.root.children)) {
       if (!child.classList.contains("selected-block")) {
@@ -1254,6 +1291,8 @@ function footnoteKey() {
   footnoteSeq += 1;
   return `fn-${Date.now().toString(36)}-${footnoteSeq}`;
 }
+var PLACEHOLDER = "Footnote text";
+var isPlaceholder = (item) => (item.textContent ?? "").trim() === PLACEHOLDER;
 function renumberFootnotes(root) {
   const refs = Array.from(root.querySelectorAll(`${FOOTNOTE_TAG}[data-footnote], .footnote-ref[data-footnote]`)).filter((ref) => !ref.closest(".footnotes"));
   let list = root.querySelector("ol.footnotes");
@@ -1267,29 +1306,53 @@ function renumberFootnotes(root) {
     root.appendChild(list);
   }
   const existing = new Map;
+  const corrupt = [];
   for (const item of Array.from(list.children)) {
     const key = item.getAttribute("data-footnote");
-    if (key)
+    if (!key)
+      continue;
+    const held = existing.get(key);
+    if (!held) {
+      existing.set(key, item);
+      continue;
+    }
+    if (isPlaceholder(held) && !isPlaceholder(item)) {
       existing.set(key, item);
+      corrupt.push(held);
+    } else {
+      corrupt.push(item);
+    }
   }
-  refs.forEach((ref, index) => {
+  for (const duplicate of corrupt)
+    duplicate.remove();
+  const numbers = new Map;
+  const placed = new Set;
+  for (const ref of refs) {
     const key = ref.getAttribute("data-footnote");
+    let number = numbers.get(key);
+    if (number === undefined) {
+      number = numbers.size + 1;
+      numbers.set(key, number);
+    }
     const link = ref.querySelector("a");
     if (link) {
-      link.textContent = String(index + 1);
+      link.textContent = String(number);
       link.setAttribute("href", `#${key}`);
     }
+    if (placed.has(key))
+      continue;
+    placed.add(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.textContent = PLACEHOLDER;
     }
     item.id = key;
     existing.delete(key);
     list.appendChild(item);
-  });
+  }
   for (const orphan of existing.values())
     orphan.remove();
 }
@@ -1470,7 +1533,7 @@ var commands = {
     item.className = "footnote";
     item.setAttribute("data-footnote", key);
     item.id = key;
-    item.textContent = text.length ? text.join(" ") : "Footnote text";
+    item.textContent = text.length ? text.join(" ") : PLACEHOLDER;
     list.appendChild(item);
     renumberFootnotes(ctx.root);
     ctx.normalize();
@@ -1708,6 +1771,8 @@ import { icons as icons2 } from "tosijs-ui/icons";
 // src/changes.ts
 var INS_TAG = "tosi-ins";
 var DEL_TAG = "tosi-del";
+var BLOCK_DELETE_ATTR = "data-block-delete";
+var BLOCK_INSERT_ATTR = "data-block-insert";
 var changeSeq = 0;
 var changeId = () => `chg-${Date.now().toString(36)}-${(changeSeq++).toString(36)}`;
 
@@ -1727,14 +1792,20 @@ function defineChanges() {
 function safeAttributeValue(value) {
   return value.replace(/[<>]/g, "");
 }
-function mark(kind, text, author) {
-  const el = document.createElement(kind === "insert" ? INS_TAG : DEL_TAG);
-  el.setAttribute("data-change", changeId());
-  el.setAttribute("data-author", safeAttributeValue(author.id));
-  if (author.name) {
-    el.setAttribute("data-author-name", safeAttributeValue(author.name));
-  }
+function stampMark(el, attribution) {
+  const id = attribution.id ?? changeId();
+  el.setAttribute("data-change", id);
+  el.setAttribute("data-author", safeAttributeValue(attribution.author.id));
+  if (attribution.author.name) {
+    el.setAttribute("data-author-name", safeAttributeValue(attribution.author.name));
+  }
+  el.setAttribute("data-session", safeAttributeValue(attribution.session));
   el.setAttribute("data-time", new Date().toISOString());
+  return id;
+}
+function mark(kind, text, author, session) {
+  const el = document.createElement(kind === "insert" ? INS_TAG : DEL_TAG);
+  stampMark(el, { author, session });
   el.textContent = text;
   return el;
 }
@@ -1821,7 +1892,7 @@ function diffWords(before, after) {
     push("insert", b[j++]);
   return ops;
 }
-function applyRevision(node, revised, author) {
+function applyRevision(node, revised, author, session) {
   const ops = diffWords(node.data, revised);
   if (!ops.some((o) => o.op !== "same"))
     return 0;
@@ -1832,7 +1903,7 @@ function applyRevision(node, revised, author) {
     if (op.op === "same") {
       fragment.appendChild(document.createTextNode(op.text));
     } else {
-      fragment.appendChild(mark(op.op, op.text, author));
+      fragment.appendChild(mark(op.op, op.text, author, session));
       changes++;
     }
   }
@@ -2245,6 +2316,35 @@ function deletableFilter(node) {
   }
   return node.nodeType !== 3 || node.textContent !== "";
 }
+var MERGEABLE_BLOCKS = new Set([
+  "p",
+  "div",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "blockquote",
+  "pre",
+  "figure",
+  "figcaption",
+  "address",
+  "section",
+  "article",
+  "aside",
+  "main",
+  "header",
+  "footer"
+]);
+var AFFORDANCE_SIZE = 44;
+function menuAffordanceX(startX, endX, size, maxX) {
+  const centred = (startX + endX) / 2 - size / 2;
+  let x = Math.max(centred, startX);
+  if (x + size > maxX)
+    x = startX - size * 2;
+  return Math.max(x, 0);
+}
 
 class TosijsStyledEditor extends WebComponent {
   static formAssociated = true;
@@ -2491,8 +2591,8 @@ class TosijsStyledEditor extends WebComponent {
     },
     ":host .touch-affordance": {
       position: "absolute",
-      width: "44px",
-      height: "44px",
+      width: `${AFFORDANCE_SIZE}px`,
+      height: `${AFFORDANCE_SIZE}px`,
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
@@ -2699,7 +2799,7 @@ class TosijsStyledEditor extends WebComponent {
         const revised = await revise(text.data);
         if (typeof revised !== "string")
           continue;
-        total += applyRevision(text, revised, author);
+        total += applyRevision(text, revised, author, this.sessionId);
       }
     } finally {
       if (total > 0) {
@@ -2710,6 +2810,16 @@ class TosijsStyledEditor extends WebComponent {
     return total;
   }
   trackChanges = false;
+  trackStructuralEdits = false;
+  get stickySelection() {
+    return this.selectable?.stickySelection ?? this.pendingStickySelection;
+  }
+  set stickySelection(mode) {
+    this.pendingStickySelection = mode;
+    if (this.selectable)
+      this.selectable.stickySelection = mode;
+  }
+  pendingStickySelection = "touch";
   sessionId = `s-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
   currentInsertion() {
     const ip = this.insertionPoint();
@@ -2740,13 +2850,7 @@ class TosijsStyledEditor extends WebComponent {
       return null;
     defineChanges();
     const ins = document.createElement(INS_TAG);
-    ins.setAttribute("data-change", changeId());
-    ins.setAttribute("data-author", safeAttributeValue(this.changeAuthor.id));
-    if (this.changeAuthor.name) {
-      ins.setAttribute("data-author-name", safeAttributeValue(this.changeAuthor.name));
-    }
-    ins.setAttribute("data-session", this.sessionId);
-    ins.setAttribute("data-time", new Date().toISOString());
+    this.stamp(ins);
     const enclosing = ip.closest(INS_TAG);
     if (!enclosing?.parentNode) {
       ip.before(ins);
@@ -2782,19 +2886,12 @@ class TosijsStyledEditor extends WebComponent {
       const asBlock = node.nodeType === 1 && node.parentNode === this.parts.doc ? node : null;
       if (asBlock && !asBlock.firstChild)
         continue;
-      if (asBlock?.firstElementChild?.matches?.(DEL_TAG) && asBlock.children.length === 1) {
+      if (asBlock && this.isFullyStruck(asBlock))
         continue;
-      }
       const del = document.createElement(DEL_TAG);
-      del.setAttribute("data-change", id);
-      del.setAttribute("data-author", safeAttributeValue(this.changeAuthor.id));
-      if (this.changeAuthor.name) {
-        del.setAttribute("data-author-name", safeAttributeValue(this.changeAuthor.name));
-      }
-      del.setAttribute("data-session", this.sessionId);
-      del.setAttribute("data-time", new Date().toISOString());
+      this.stamp(del, id);
       if (asBlock) {
-        del.setAttribute("data-block-delete", "");
+        del.setAttribute(BLOCK_DELETE_ATTR, "");
         while (asBlock.firstChild)
           del.appendChild(asBlock.firstChild);
         asBlock.appendChild(del);
@@ -2838,15 +2935,78 @@ class TosijsStyledEditor extends WebComponent {
   get refusesStructuralDelete() {
     return this.trackChanges;
   }
-  asUntracked(fn) {
-    const was = this.trackChanges;
-    this.trackChanges = false;
-    try {
-      return fn();
-    } finally {
-      this.trackChanges = was;
+  rescueCaretFrom(block) {
+    const markers = Array.from(block.querySelectorAll(".sel-start, .sel-end, .caret"));
+    if (!markers.length)
+      return;
+    let top = block;
+    while (top.parentElement && top.parentElement !== this.parts.doc) {
+      top = top.parentElement;
+    }
+    const host = this.siblingBlock(top, "back") ?? this.siblingBlock(top, "forward");
+    for (const marker of markers) {
+      if (host)
+        host.appendChild(marker);
+      else
+        this.parts.doc.appendChild(marker);
     }
   }
+  isFullyStruck(block) {
+    const probe = document.createElement("div");
+    for (const child of Array.from(block.childNodes)) {
+      probe.appendChild(child.cloneNode(true));
+    }
+    for (const el of Array.from(probe.querySelectorAll(DEL_TAG)))
+      el.remove();
+    for (const el of Array.from(probe.querySelectorAll(".sel-start, .sel-end, .caret"))) {
+      el.remove();
+    }
+    return blockIsEmpty(probe);
+  }
+  resolvedClone(block) {
+    const frag = document.createDocumentFragment();
+    for (const child of Array.from(block.childNodes)) {
+      frag.appendChild(child.cloneNode(true));
+    }
+    for (const el of Array.from(frag.querySelectorAll(".sel-start, .sel-end, .caret"))) {
+      el.remove();
+    }
+    for (const del of Array.from(frag.querySelectorAll(DEL_TAG)))
+      del.remove();
+    for (const ins of Array.from(frag.querySelectorAll(INS_TAG)))
+      unwrap(ins);
+    return frag;
+  }
+  blockLike(model) {
+    const block = model.cloneNode(false);
+    block.classList.remove("selected-block", "first-block", "last-block", "selected");
+    if (!block.getAttribute("class"))
+      block.removeAttribute("class");
+    return block;
+  }
+  canMergeBlocks(blocks) {
+    return blocks.every((b) => !!b && MERGEABLE_BLOCKS.has(b.localName) && !b.classList.contains("editor-table"));
+  }
+  trackStructuralEdit(blocksOut, gestureId) {
+    defineChanges();
+    const id = gestureId ?? changeId();
+    const ins = document.createElement(INS_TAG);
+    this.stamp(ins, id);
+    ins.setAttribute(BLOCK_INSERT_ATTR, "");
+    const caret = this.selectable.createBounds();
+    const parts = blocksOut.map((b) => this.resolvedClone(b));
+    const merged = this.blockLike(blocksOut[0]);
+    parts.forEach((frag, i) => {
+      if (i === 1)
+        ins.appendChild(caret);
+      ins.appendChild(frag);
+    });
+    merged.appendChild(ins);
+    this.selectable.removeBounds();
+    this.trackDeletion(blocksOut, id);
+    blocksOut[blocksOut.length - 1].after(merged);
+    return { ins, caret };
+  }
   refuseStructural(reason) {
     const evt = new CustomEvent("structural-edit-refused", {
       bubbles: true,
@@ -2856,6 +3016,13 @@ class TosijsStyledEditor extends WebComponent {
     });
     return this.dispatchEvent(evt);
   }
+  stamp(el, id) {
+    return stampMark(el, {
+      id,
+      author: this.changeAuthor,
+      session: this.sessionId
+    });
+  }
   get changes() {
     return changesIn(this.parts.doc);
   }
@@ -2863,7 +3030,7 @@ class TosijsStyledEditor extends WebComponent {
     if (id === "")
       return;
     const targets = this.changes.filter((c) => !id || c.id === id);
-    const emptied = targets.filter((c) => c.kind === "delete" && c.element.hasAttribute("data-block-delete")).map((c) => c.element.parentElement).filter((el) => !!el && el.parentNode === this.parts.doc);
+    const emptied = this.blocksOwnedByMarks(targets, "delete", BLOCK_DELETE_ATTR);
     for (const change of targets)
       acceptChange(change.element);
     for (const block of emptied) {
@@ -2876,12 +3043,31 @@ class TosijsStyledEditor extends WebComponent {
       this.updateUndo("new", "accept-changes");
     }
   }
+  blocksOwnedByMarks(targets, kind, attr) {
+    const blocks = targets.filter((c) => c.kind === kind && c.element.hasAttribute(attr)).map((c) => this.block(c.element)).filter((el) => el instanceof HTMLElement);
+    return [...new Set(blocks)];
+  }
   rejectChanges(id) {
     if (id === "")
       return;
     const targets = this.changes.filter((c) => !id || c.id === id);
+    const proposed = this.blocksOwnedByMarks(targets, "insert", BLOCK_INSERT_ATTR);
+    for (const change of targets) {
+      if (change.kind !== "insert")
+        continue;
+      const mark = change.element;
+      for (const marker of Array.from(mark.querySelectorAll(".sel-start, .sel-end, .caret"))) {
+        mark.parentNode?.insertBefore(marker, mark);
+      }
+    }
     for (const change of targets)
       rejectChange(change.element);
+    for (const block of proposed) {
+      if (!block.isConnected || !blockIsEmpty(block))
+        continue;
+      this.rescueCaretFrom(block);
+      block.remove();
+    }
     if (targets.length) {
       this.normalize();
       this.updateUndo("new", "reject-changes");
@@ -2987,6 +3173,7 @@ class TosijsStyledEditor extends WebComponent {
     }
     this.isInitialized = true;
     this.selectable = new Selectable(doc);
+    this.selectable.stickySelection = this.pendingStickySelection;
     const firstP = doc.querySelector("p,h1,h2,h3,h4,h5,h6,div,blockquote,pre") || doc.firstElementChild;
     if (firstP) {
       firstP.appendChild(this.selectable.createBounds());
@@ -3627,6 +3814,42 @@ class TosijsStyledEditor extends WebComponent {
     isolate.appendChild(ip);
     return isolate;
   }
+  refuseIfUnmergeable(a, b) {
+    if (!a || !b || a === b)
+      return false;
+    if (this.canMergeBlocks([a, b]))
+      return false;
+    this.refuseMerge();
+    return true;
+  }
+  refuseMerge() {
+    this.refuseStructural("merge-blocks-not-mergeable");
+  }
+  mergeBlocksRaw(earlier, later) {
+    while (later.firstChild)
+      earlier.appendChild(later.firstChild);
+    later.remove();
+  }
+  mayTrackStructurally(reason) {
+    if (this.trackStructuralEdits)
+      return true;
+    this.refuseStructural(reason);
+    return false;
+  }
+  mergeBlocksTracked(earlier, later) {
+    this.trackStructuralEdit([earlier, later]);
+    this.normalize();
+    this.focus();
+    this.updateUndo("new", "merge-blocks");
+  }
+  siblingBlock(block, direction) {
+    const step = (el) => direction === "back" ? el.previousElementSibling : el.nextElementSibling;
+    let el = step(block);
+    while (el && (el.classList.contains("not-selectable") || el.classList.contains("do-not-spanify"))) {
+      el = step(el);
+    }
+    return el;
+  }
   backspace() {
     if (!this.deleteSelection()) {
       const ip = this.insertionPoint();
@@ -3638,25 +3861,22 @@ class TosijsStyledEditor extends WebComponent {
       const caretBlock = this.block(ip);
       const deletionBlock = this.block(node);
       const crossesBlocks = !!(deletionBlock && caretBlock && deletionBlock !== caretBlock);
-      if (this.refusesStructuralDelete && crossesBlocks && this.refuseStructural("merge-blocks-backward")) {
+      if (this.refuseIfUnmergeable(deletionBlock, caretBlock))
+        return;
+      if (this.trackChanges && crossesBlocks) {
+        if (!this.mayTrackStructurally("merge-blocks-backward"))
+          return;
+        this.mergeBlocksTracked(deletionBlock, caretBlock);
         return;
       }
-      const overridden = this.refusesStructuralDelete && crossesBlocks;
-      const run = (fn) => overridden ? this.asUntracked(fn) : fn();
-      run(() => {
-        if (node.nodeType === 3 && (node.textContent || "").length > 1) {
-          this.deleteEdgeCharacter(node, "end");
-        } else {
-          this.removeNode(topSingleParentAncestor(node));
-        }
-        this.normalize();
-        if (deletionBlock && caretBlock && this.parts.doc.contains(deletionBlock) && deletionBlock !== caretBlock) {
-          while (caretBlock.firstChild) {
-            deletionBlock.appendChild(caretBlock.firstChild);
-          }
-          caretBlock.remove();
-        }
-      });
+      if (crossesBlocks) {
+        this.mergeBlocksRaw(deletionBlock, caretBlock);
+      } else if (node.nodeType === 3 && (node.textContent || "").length > 1) {
+        this.deleteEdgeCharacter(node, "end");
+      } else {
+        this.removeNode(topSingleParentAncestor(node));
+      }
+      this.normalize();
       this.updateUndo();
     }
   }
@@ -3665,42 +3885,66 @@ class TosijsStyledEditor extends WebComponent {
       const ip = this.insertionPoint();
       if (!ip)
         return;
+      const emptyBlock = this.block(ip);
+      const intoPrevious = emptyBlock && blockIsEmpty(emptyBlock) ? this.siblingBlock(emptyBlock, "back") : null;
+      if (emptyBlock && intoPrevious) {
+        if (this.refuseIfUnmergeable(intoPrevious, emptyBlock))
+          return;
+        if (this.trackChanges) {
+          if (!this.mayTrackStructurally("merge-blocks-forward"))
+            return;
+          this.mergeBlocksTracked(intoPrevious, emptyBlock);
+        } else {
+          this.mergeBlocksRaw(intoPrevious, emptyBlock);
+          this.normalize();
+          this.updateUndo();
+        }
+        return;
+      }
       const node = this.deletionTarget(ip, this.parts.doc, "forward");
       if (!node)
         return;
       const caretBlock = this.block(ip);
       const deletionBlock = this.block(node);
+      if (this.refuseIfUnmergeable(caretBlock, deletionBlock))
+        return;
       const crossesBlocks = !!(deletionBlock && caretBlock && deletionBlock !== caretBlock);
-      if (this.refusesStructuralDelete && crossesBlocks && this.refuseStructural("merge-blocks-forward")) {
+      if (this.trackChanges && crossesBlocks) {
+        if (!this.mayTrackStructurally("merge-blocks-forward"))
+          return;
+        this.mergeBlocksTracked(caretBlock, deletionBlock);
         return;
       }
-      const overridden = this.refusesStructuralDelete && crossesBlocks;
-      const run = (fn) => overridden ? this.asUntracked(fn) : fn();
-      run(() => {
-        if (node.nodeType === 3 && (node.textContent || "").length > 1) {
-          this.deleteEdgeCharacter(node, "start");
-        } else {
-          this.removeNode(topSingleParentAncestor(node));
-        }
-        this.normalize();
-        if (deletionBlock && caretBlock && this.parts.doc.contains(deletionBlock) && deletionBlock !== caretBlock) {
-          while (deletionBlock.firstChild) {
-            caretBlock.appendChild(deletionBlock.firstChild);
-          }
-          deletionBlock.remove();
-        }
-      });
+      if (crossesBlocks) {
+        this.mergeBlocksRaw(caretBlock, deletionBlock);
+      } else if (node.nodeType === 3 && (node.textContent || "").length > 1) {
+        this.deleteEdgeCharacter(node, "start");
+      } else {
+        this.removeNode(topSingleParentAncestor(node));
+      }
+      this.normalize();
       this.updateUndo();
     }
   }
   deleteSelection() {
     const blocks = this.selectedBlocks();
     const crossesBlocks = blocks.length > 1;
-    const refusing = this.refusesStructuralDelete && crossesBlocks;
-    const overridden = refusing && !this.refuseStructural("merge-blocks-selection");
-    return overridden ? this.asUntracked(() => this.runDeleteSelection(blocks, true)) : this.runDeleteSelection(blocks, !refusing);
+    const ends = crossesBlocks ? [blocks[0], blocks[blocks.length - 1]] : null;
+    const unmergeable = !!ends && !this.canMergeBlocks(ends);
+    if (unmergeable)
+      this.refuseMerge();
+    if (!this.trackChanges || !crossesBlocks) {
+      return this.runDeleteSelection(blocks, "raw");
+    }
+    if (unmergeable) {
+      return this.runDeleteSelection(blocks, "none");
+    }
+    if (!this.mayTrackStructurally("merge-blocks-selection")) {
+      return this.runDeleteSelection(blocks, "none");
+    }
+    return this.runDeleteSelection(blocks, "tracked");
   }
-  runDeleteSelection(blocks, mayMerge) {
+  runDeleteSelection(blocks, merge) {
     let wasAnythingDeleted = false;
     const gesture = this.trackChanges ? changeId() : undefined;
     for (const block of blocks) {
@@ -3735,12 +3979,11 @@ class TosijsStyledEditor extends WebComponent {
     if (blocks.length > 1) {
       const firstBlock = blocks[0];
       const lastBlock = blocks[blocks.length - 1];
-      if (mayMerge && this.parts.doc.contains(firstBlock) && this.parts.doc.contains(lastBlock) && !firstBlock.classList.contains("editor-table") && !lastBlock.classList.contains("editor-table")) {
-        const anchor = lastBlock.firstChild;
-        for (const node of Array.from(firstBlock.childNodes)) {
-          lastBlock.insertBefore(node, anchor);
-        }
-        firstBlock.remove();
+      const mergeable = this.parts.doc.contains(firstBlock) && this.parts.doc.contains(lastBlock) && this.canMergeBlocks([firstBlock, lastBlock]);
+      if (mergeable && merge === "tracked") {
+        this.trackStructuralEdit([firstBlock, lastBlock], gesture);
+      } else if (mergeable && merge === "raw") {
+        this.mergeBlocksRaw(firstBlock, lastBlock);
       }
       this.selectable.markBounds();
       this.focus();
@@ -4266,16 +4509,11 @@ class TosijsStyledEditor extends WebComponent {
       return;
     const id = changeId();
     for (const mark of Array.from(marks)) {
-      mark.setAttribute("data-change", id);
-      mark.setAttribute("data-author", safeAttributeValue(this.changeAuthor.id));
-      if (this.changeAuthor.name) {
-        mark.setAttribute("data-author-name", safeAttributeValue(this.changeAuthor.name));
-      } else {
+      if (!this.changeAuthor.name)
         mark.removeAttribute("data-author-name");
-      }
-      mark.setAttribute("data-session", this.sessionId);
-      mark.setAttribute("data-time", new Date().toISOString());
-      mark.removeAttribute("data-block-delete");
+      this.stamp(mark, id);
+      mark.removeAttribute(BLOCK_DELETE_ATTR);
+      mark.removeAttribute(BLOCK_INSERT_ATTR);
     }
   }
   handlePaste = (evt) => {
@@ -4440,24 +4678,14 @@ class TosijsStyledEditor extends WebComponent {
     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`;
-    }
+    const size = AFFORDANCE_SIZE;
+    this.touchHandleStart.style.left = `${startX - size}px`;
+    this.touchHandleStart.style.top = `${startY - size}px`;
+    this.touchHandleEnd.style.left = `${endX}px`;
+    this.touchHandleEnd.style.top = `${endY}px`;
+    const maxX = this.parts.doc.clientWidth + this.parts.doc.scrollLeft;
+    this.touchContextMenu.style.left = `${menuAffordanceX(startX, endX, size, maxX)}px`;
+    this.touchContextMenu.style.top = `${Math.min(startY, endY) - size}px`;
   }
   handleAffordanceDragStart = (evt) => {
     const handle = evt.currentTarget;
@@ -4482,6 +4710,7 @@ class TosijsStyledEditor extends WebComponent {
       offsetX,
       offsetY
     });
+    this.selectable.beginBoundDrag(which);
     this.hideTouchMenu();
     this.touchAffordances.classList.add("dragging");
     evt.preventDefault();
@@ -4502,25 +4731,14 @@ class TosijsStyledEditor extends WebComponent {
     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`;
-    }
+    this.selectable.extendTo(cursorX, cursorY, drag.target);
+    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 - AFFORDANCE_SIZE / 2}px`;
+    handle.style.top = `${handleY - AFFORDANCE_SIZE / 2}px`;
     evt.preventDefault();
     evt.stopPropagation();
   };
@@ -4531,6 +4749,7 @@ class TosijsStyledEditor extends WebComponent {
     handle.releasePointerCapture(evt.pointerId);
     this.touchDrags.delete(evt.pointerId);
     if (this.touchDrags.size === 0) {
+      this.selectable.endBoundDrag();
       this.selectable.despanify();
       this.selectable.selectionChanged();
       requestAnimationFrame(() => {
@@ -4734,8 +4953,11 @@ class TosijsStyledEditor extends WebComponent {
 defineFootnote();
 var tosijsStyledEditor = TosijsStyledEditor.elementCreator();
 // src/version.ts
-var version = "0.5.2";
+var version = "0.6.0";
 export {
+  AFFORDANCE_SIZE,
+  BLOCK_DELETE_ATTR,
+  BLOCK_INSERT_ATTR,
   DEL_TAG,
   FOOTNOTE_TAG,
   INS_TAG,
@@ -4799,6 +5021,7 @@ export {
   localePickerWidget,
   makeCSS,
   makeFilter,
+  menuAffordanceX,
   minimalToolbar,
   nextCell,
   nextLeafNode,
@@ -4815,6 +5038,7 @@ export {
   setColumnWidths,
   siblingOrder,
   spanify,
+  stampMark,
   stickySelectionBounds,
   tableMenu,
   tableOf,
@@ -4823,6 +5047,7 @@ export {
   topSingleParentAncestor,
   tosijsStyledEditor,
   undoRedoWidgets,
+  unwrap,
   version,
   wordsIn
 };