@seliseblocks/mailcraft 0.2.12 → 0.2.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seliseblocks/mailcraft",
-  "version": "0.2.12",
+  "version": "0.2.14",
   "description": "Framework-agnostic drag-and-drop email template editor, packaged as a zero-dependency Web Component.",
   "license": "MIT",
   "author": "SELISE Digital Platforms",
@@ -60,7 +60,7 @@
   },
   "scripts": {
     "build": "node build.js",
-    "test": "node test/storage.test.mjs && node test/export.test.mjs && node test/templates.test.mjs && node test/system.test.mjs && node test/toolbar.test.mjs && node test/editor-dom.test.mjs && node test/css-cascade.test.mjs && node test/render-dom.test.mjs && node test/import-html.test.mjs && node test/interaction.test.mjs && node test/focus-preserve.test.mjs && node test/shortcuts.test.mjs && node test/import-structure.test.mjs && node test/roundtrip.test.mjs",
+    "test": "node test/storage.test.mjs && node test/export.test.mjs && node test/templates.test.mjs && node test/system.test.mjs && node test/toolbar.test.mjs && node test/editor-dom.test.mjs && node test/css-cascade.test.mjs && node test/render-dom.test.mjs && node test/import-html.test.mjs && node test/interaction.test.mjs && node test/focus-preserve.test.mjs && node test/shortcuts.test.mjs && node test/import-structure.test.mjs && node test/roundtrip.test.mjs && node test/code-tools.test.mjs",
     "prepublishOnly": "npm run build && npm test",
     "coverage": "c8 --reporter=text --reporter=text-summary --src=src --all --exclude=\"test/**\" --exclude=\"examples/**\" --exclude=\"build.js\" npm test"
   },

package/src/core/code-tools.js

@@ -0,0 +1,302 @@
+/**
+ * Pure string helpers behind the Code view's editor features: a conservative
+ * HTML pretty-printer (Format), a tag scanner that powers the code <-> preview
+ * inspect link, plain-text search, and <mark> insertion into already
+ * syntax-highlighted lines. No DOM anywhere -- everything here is
+ * string-in/string-out so it runs (and is tested) in bare Node.
+ */
+
+const VOID_TAGS = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr']);
+
+/** Raw-text elements: the parser treats their contents as text, so the scanner and formatter must never read tags inside them. */
+const RAW_TAGS = new Set(['style', 'script', 'textarea', 'title']);
+
+/**
+ * The only tags between which the formatter may *invent* a line break where
+ * the source had no whitespace at all. Chosen because whitespace-only text is
+ * invisible there: table internals (the parser lifts it out of the row grid),
+ * and metadata that never renders. Deliberately absent: div, span, a, img --
+ * whitespace between inline or inline-block elements paints as a visible gap,
+ * and hybrid email columns (inline-block divs) actually break on a stray
+ * space, so those boundaries only ever break where whitespace already existed.
+ */
+const SAFE_BREAK = new Set(['html', 'head', 'body', 'meta', 'title', 'link', 'style', 'script', 'table', 'thead', 'tbody', 'tfoot', 'tr', 'td', 'th', 'ul', 'ol', 'li']);
+
+/** whitespace-significant containers: everything inside is emitted verbatim. */
+const PRE_TAGS = new Set(['pre', 'textarea']);
+
+/** Index of the `>` closing the tag that starts before `from`, skipping quoted attribute values (`<img alt="a > b">`). -1 when the tag never closes. */
+function tagEnd(s, from) {
+  let quote = '';
+  for (let j = from; j < s.length; j++) {
+    const ch = s[j];
+    if (quote) { if (ch === quote) quote = ''; }
+    else if (ch === '"' || ch === "'") quote = ch;
+    else if (ch === '>') return j;
+  }
+  return -1;
+}
+
+const TAG_NAME = /^[a-zA-Z][a-zA-Z0-9-]*/;
+
+/**
+ * Lexes html into { kind, text, tag?, selfClose? } tokens: 'tag' (an open
+ * tag), 'close', 'comment' (whole comment, conditional comments included),
+ * 'decl' (doctype / CDATA / processing instruction), 'raw' (the verbatim
+ * contents of a raw-text element) and 'text'. Lenient by design -- a stray
+ * `<` stays part of the surrounding text.
+ */
+function tokenize(src) {
+  const s = String(src == null ? '' : src);
+  const lower = s.toLowerCase();
+  const n = s.length;
+  const tokens = [];
+  const pushText = (from, to) => { if (to > from) tokens.push({ kind: 'text', text: s.slice(from, to) }); };
+  let last = 0;
+  let i = 0;
+  while (i < n) {
+    const lt = s.indexOf('<', i);
+    if (lt === -1) break;
+    const c = s[lt + 1];
+    if (c === '!' || c === '?') {
+      let end; let kind = 'decl';
+      if (s.startsWith('<!--', lt)) { const at = s.indexOf('-->', lt + 4); end = at === -1 ? n : at + 3; kind = 'comment'; }
+      else { const at = tagEnd(s, lt + 1); end = at === -1 ? n : at + 1; }
+      pushText(last, lt);
+      tokens.push({ kind, text: s.slice(lt, end) });
+      last = i = end;
+      continue;
+    }
+    if (c === '/' && TAG_NAME.test(s.slice(lt + 2, lt + 3))) {
+      const at = tagEnd(s, lt + 2);
+      const end = at === -1 ? n : at + 1;
+      const tag = TAG_NAME.exec(lower.slice(lt + 2, lt + 32))[0];
+      pushText(last, lt);
+      tokens.push({ kind: 'close', tag, text: s.slice(lt, end) });
+      last = i = end;
+      continue;
+    }
+    if (c && TAG_NAME.test(c)) {
+      const at = tagEnd(s, lt + 1);
+      const end = at === -1 ? n : at + 1;
+      const tag = TAG_NAME.exec(lower.slice(lt + 1, lt + 32))[0];
+      const selfClose = s[end - 2] === '/';
+      pushText(last, lt);
+      tokens.push({ kind: 'tag', tag, text: s.slice(lt, end), selfClose });
+      last = i = end;
+      if (RAW_TAGS.has(tag) && !selfClose) {
+        const closeAt = lower.indexOf('</' + tag, end);
+        const stop = closeAt === -1 ? n : closeAt;
+        if (stop > end) tokens.push({ kind: 'raw', tag, text: s.slice(end, stop) });
+        last = i = stop;
+      }
+      continue;
+    }
+    i = lt + 1;
+  }
+  pushText(last, n);
+  return tokens;
+}
+
+/** A text run that is exactly one handlebars block tag ({{#if …}}, {{/each}}) -- worth its own line, like the structural rows it usually sits between. */
+const isLogicToken = (text) => /^\{\{[#/][^{}]*\}\}$/.test(text);
+
+/**
+ * Pretty-prints html without changing what it renders: two-space indentation,
+ * one structural tag per line. The rules that keep it rendering-identical:
+ *
+ * 1. Non-whitespace text is copied byte for byte -- never reflowed.
+ * 2. Whitespace between nodes is only *normalized* (to newline + indent)
+ *    where whitespace already existed; a break is *invented* only between
+ *    SAFE_BREAK tags, where whitespace-only text is invisible.
+ * 3. Raw-text contents (<style>, <script>) and everything inside <pre> /
+ *    <textarea> pass through verbatim.
+ * 4. Comments are atomic, so MSO conditionals survive whole.
+ *
+ * Idempotent: formatting formatted output returns it unchanged.
+ */
+export function formatHtml(src) {
+  const tokens = tokenize(src);
+  // Split text into whitespace gaps (formatting material) and content cores (untouchable).
+  const items = [];
+  for (const tk of tokens) {
+    if (tk.kind !== 'text') { items.push(tk); continue; }
+    const m = /^(\s*)([\s\S]*?)(\s*)$/.exec(tk.text);
+    if (m[2] === '') { items.push({ kind: 'gap', text: tk.text }); continue; }
+    if (m[1]) items.push({ kind: 'gap', text: m[1] });
+    items.push({ kind: 'text', text: m[2] });
+    if (m[3]) items.push({ kind: 'gap', text: m[3] });
+  }
+  const breaky = (it) => !!it && (
+    ((it.kind === 'tag' || it.kind === 'close') && SAFE_BREAK.has(it.tag))
+    || it.kind === 'decl'
+    || (it.kind === 'text' && isLogicToken(it.text))
+  );
+  let out = '';
+  let started = false;
+  const stack = [];
+  let prev = null;
+  let gap = null;
+  for (const it of items) {
+    if (it.kind === 'gap') { gap = (gap || '') + it.text; continue; }
+    if (it.kind === 'close') {
+      const at = stack.lastIndexOf(it.tag);
+      if (at !== -1) stack.length = at; // implicitly closes unclosed children too
+    }
+    const inPre = stack.some((tag) => PRE_TAGS.has(tag));
+    const brk = started && !inPre && (
+      (gap !== null && gap !== '')
+      || (breaky(prev) && breaky(it))
+      || (breaky(prev) && it.kind === 'comment')
+      || (prev && prev.kind === 'comment' && breaky(it))
+    );
+    if (started && brk) out += '\n' + '  '.repeat(stack.length);
+    else if (started && gap) out += gap; // an inline gap survives verbatim
+    out += it.text;
+    if (it.kind === 'tag' && !it.selfClose && !VOID_TAGS.has(it.tag) && !RAW_TAGS.has(it.tag)) stack.push(it.tag);
+    prev = it;
+    gap = null;
+    started = true;
+  }
+  if (!started) return String(src == null ? '' : src);
+  return out.endsWith('\n') ? out : out + '\n';
+}
+
+/**
+ * Scans html for elements without parsing it into a DOM. Returns
+ * `{ els, byTag }`: `els` in document order, each
+ * `{ tag, nth, openStart, openEnd, closeStart, closeEnd, parent }` where
+ * `nth` is its index among same-tag elements (the key the inspect link uses
+ * to find the same element in the preview document, immune to the parser's
+ * inserted <tbody>s), `parent` is an index into `els` (-1 at the root), and
+ * offsets are into the source string. Unclosed elements end where their
+ * parent closes (or at EOF); raw-text contents are skipped, so a `</td>`
+ * inside a style string is never mistaken for markup.
+ */
+export function scanElements(src) {
+  const s = String(src == null ? '' : src);
+  const lower = s.toLowerCase();
+  const n = s.length;
+  const els = [];
+  const byTag = Object.create(null);
+  const stack = [];
+  let i = 0;
+  while (i < n) {
+    const lt = s.indexOf('<', i);
+    if (lt === -1) break;
+    const c = s[lt + 1];
+    if (s.startsWith('<!--', lt)) { const at = s.indexOf('-->', lt + 4); i = at === -1 ? n : at + 3; continue; }
+    if (c === '!' || c === '?') { const at = tagEnd(s, lt + 1); i = at === -1 ? n : at + 1; continue; }
+    if (c === '/' && TAG_NAME.test(s.slice(lt + 2, lt + 3))) {
+      const at = tagEnd(s, lt + 2);
+      const end = at === -1 ? n : at + 1;
+      const tag = TAG_NAME.exec(lower.slice(lt + 2, lt + 32))[0];
+      for (let k = stack.length - 1; k >= 0; k--) {
+        if (els[stack[k]].tag !== tag) continue;
+        while (stack.length > k + 1) { const idx = stack.pop(); els[idx].closeStart = els[idx].closeEnd = lt; }
+        const idx = stack.pop();
+        els[idx].closeStart = lt;
+        els[idx].closeEnd = end;
+        break;
+      }
+      i = end;
+      continue;
+    }
+    if (c && TAG_NAME.test(c)) {
+      const at = tagEnd(s, lt + 1);
+      const end = at === -1 ? n : at + 1;
+      const tag = TAG_NAME.exec(lower.slice(lt + 1, lt + 32))[0];
+      const selfClose = s[end - 2] === '/';
+      const list = byTag[tag] || (byTag[tag] = []);
+      const el = { tag, nth: list.length, openStart: lt, openEnd: end, closeStart: end, closeEnd: end, parent: stack.length ? stack[stack.length - 1] : -1 };
+      els.push(el);
+      list.push(el);
+      i = end;
+      if (selfClose || VOID_TAGS.has(tag)) continue;
+      if (RAW_TAGS.has(tag)) {
+        const closeAt = lower.indexOf('</' + tag, end);
+        if (closeAt === -1) { el.closeStart = el.closeEnd = n; i = n; }
+        else {
+          const cgt = tagEnd(s, closeAt + 2);
+          el.closeStart = closeAt;
+          el.closeEnd = cgt === -1 ? n : cgt + 1;
+          i = el.closeEnd;
+        }
+        continue;
+      }
+      stack.push(els.length - 1);
+      continue;
+    }
+    i = lt + 1;
+  }
+  while (stack.length) { const idx = stack.pop(); els[idx].closeStart = els[idx].closeEnd = n; }
+  return { els, byTag };
+}
+
+/** The innermost element whose source range contains character `offset`, or null. */
+export function elementAtOffset(scan, offset) {
+  let best = null;
+  for (const e of scan.els) {
+    if (e.openStart > offset) break; // els are in openStart order
+    if (offset < Math.max(e.closeEnd, e.openEnd)) best = e;
+  }
+  return best;
+}
+
+/**
+ * Case-insensitive plain-text occurrences of `query` in `src`, capped so a
+ * one-letter query on a huge document cannot stall the repaint. Falls back to
+ * case-sensitive matching for the rare locale-sensitive strings whose
+ * lowercase form changes length (e.g. 'İ'), where offsets would drift.
+ */
+export function findMatches(src, query, cap = 5000) {
+  const out = [];
+  const raw = String(src == null ? '' : src);
+  const q0 = String(query == null ? '' : query);
+  if (!q0) return out;
+  let s = raw.toLowerCase();
+  let q = q0.toLowerCase();
+  if (s.length !== raw.length || q.length !== q0.length) { s = raw; q = q0; }
+  let i = 0;
+  while (out.length < cap) {
+    const at = s.indexOf(q, i);
+    if (at === -1) break;
+    out.push({ start: at, end: at + q.length });
+    i = at + q.length;
+  }
+  return out;
+}
+
+const MARK_CSS = 'background:rgba(245,158,11,0.28);border-radius:2px;color:inherit;padding:0;margin:0';
+const MARK_CUR_CSS = 'background:rgba(245,158,11,0.6);outline:1.5px solid rgba(180,83,9,0.85);border-radius:2px;color:inherit;padding:0;margin:0';
+
+/**
+ * Inserts <mark> around `ranges` (offsets into the *text* of one source line,
+ * `{ start, end, cur }`) into that line's already-highlighted html. Walks the
+ * html counting text positions -- an entity counts as the one source character
+ * it escapes, tags count as nothing -- and closes/reopens marks at tag
+ * boundaries so the highlighter's own spans stay properly nested.
+ */
+export function markRanges(html, ranges) {
+  if (!ranges || !ranges.length || !html) return html;
+  const token = /(<[^>]*>)|(&[a-zA-Z][a-zA-Z0-9]*;|&#[0-9]+;|&#x[0-9a-fA-F]+;)|([\s\S])/g;
+  let out = '';
+  let pos = 0;
+  let open = null;
+  let m;
+  while ((m = token.exec(html))) {
+    if (m[1]) {
+      if (open) { out += '</mark>'; open = null; }
+      out += m[1];
+      continue;
+    }
+    let r = null;
+    for (const range of ranges) { if (pos >= range.start && pos < range.end) { r = range; break; } }
+    if (open && open !== r) { out += '</mark>'; open = null; }
+    if (r && !open) { out += '<mark style="' + (r.cur ? MARK_CUR_CSS : MARK_CSS) + '">'; open = r; }
+    out += m[0];
+    pos += 1;
+  }
+  if (open) out += '</mark>';
+  return out;
+}

package/src/core/editor-core.js

@@ -580,7 +580,7 @@ export class EditorCore {
    * dragging through uniformly-formatted text rebuilds nothing at all.
    */
   formatFingerprint(b) {
-    let s = b.id + '|' + this.currentTag() + '|' + (b.props.size || 16) + '|' + (this.state.linkDraft ? 1 : 0) + '|';
+    let s = b.id + '|' + this.currentTag() + '|' + this.selSize(b) + '|' + (this.state.linkDraft ? 1 : 0) + '|';
     for (const cmd of ['bold', 'italic', 'underline', 'strikeThrough', 'superscript', 'subscript', 'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', 'insertUnorderedList', 'insertOrderedList']) {
       let on = false;
       try { on = document.queryCommandState(cmd); } catch { /* ignore */ }
@@ -622,6 +622,13 @@ export class EditorCore {
   };
 
   size(b, delta) {
+    // A non-collapsed selection inside a rich text block means the user is
+    // sizing a *run*, not the block -- every neighbouring control (bold,
+    // color, highlight) is selection-scoped, so a ± that rewrote the whole
+    // block's prop here read as broken. Only `text` can keep the resulting
+    // spans: a heading folds back through `textContent` (syncEdit), which
+    // would silently drop them, so it stays block-level.
+    if (b.type === 'text' && this.sizeSelection(b, delta)) return;
     // Uncommitted inline formatting is folded into props by `setProp` below
     // (`onFoldLiveEdit`), not here. This used to do its own fold, as a second
     // commit: that read `editEl.innerHTML` unconditionally, so a second click
@@ -639,6 +646,114 @@ export class EditorCore {
     this.setProp(b.id, 'size', Math.max(lo, Math.min(hi, cur + delta)));
   }
 
+  /** Nearest inline px font-size walking up from `node` to the edited block's wrapper -- null when no run declares one (the block prop then owns the size). */
+  inlineSizeAt(node) {
+    let n = node && node.nodeType === 1 ? node : (node ? node.parentElement : null);
+    while (n && n !== this.editEl) {
+      const m = /^([\d.]+)px$/.exec((n.style && n.style.fontSize) || '');
+      if (m) return parseFloat(m[1]);
+      n = n.parentElement;
+    }
+    return null;
+  }
+
+  /** What the ± readout should show: the inline size at the selection when the caret sits inside a sized run, else the block's own size. Also part of `formatFingerprint`, so moving the caret across differently-sized runs refreshes the toolbar. */
+  selSize(b) {
+    const live = this.find(this.state.doc, b.id).block || b;
+    const base = Number(live.props.size) || 16;
+    if (b.type !== 'text' || this.state.editing !== b.id || !this.editEl) return base;
+    const sel = this.getSelection();
+    const node = sel && sel.rangeCount && this.editEl.contains(sel.anchorNode)
+      ? sel.anchorNode
+      : (this.savedRange && this.editEl.contains(this.savedRange.startContainer) ? this.savedRange.startContainer : null);
+    const inline = node ? this.inlineSizeAt(node) : null;
+    return inline == null ? base : Math.round(inline);
+  }
+
+  /**
+   * Sizes just the selected run(s) of text by wrapping each selected text node
+   * in a `font-size` span (or restepping the span a previous click made --
+   * repeated ± must not nest one span per click). Wrapping happens at the text
+   * node, the innermost level, so the new size always outranks any inline size
+   * an imported ancestor carries. The change lives in the contenteditable like
+   * bold/italic do and folds into props through the same blur/commit path.
+   *
+   * Returns false when the click is not selection-scoped -- no live edit, a
+   * bare caret, or a selection covering the whole block. The last keeps
+   * select-all + ± behaving as the block-level master scale it always was
+   * (`syncRichContent` then *scales* mixed sizes instead of flattening them,
+   * and the saved `size` prop stays truthful).
+   */
+  sizeSelection(b, delta) {
+    const root = this.editEl;
+    if (!root || !root.isConnected || this.state.editing !== b.id) return false;
+    const sel = this.getSelection();
+    // Same fallback discipline as `exec`: the live selection wins when it is
+    // inside the edited block; `savedRange` covers focus stolen by a control.
+    let src = sel && sel.rangeCount && root.contains(sel.anchorNode) && root.contains(sel.focusNode) ? sel.getRangeAt(0) : null;
+    if (!src && this.savedRange && root.contains(this.savedRange.startContainer) && root.contains(this.savedRange.endContainer)) src = this.savedRange;
+    if (!src || src.collapsed) return false;
+    const range = src.cloneRange();
+    const total = root.textContent.length;
+    if (charOffset(root, range.startContainer, range.startOffset) === 0
+      && charOffset(root, range.endContainer, range.endOffset) === total) return false;
+
+    const [lo, hi] = SIZE_SPAN.text;
+    const live = this.find(this.state.doc, b.id).block || b;
+    const cur = this.inlineSizeAt(range.startContainer) || Number(live.props.size) || 16;
+    const next = Math.max(lo, Math.min(hi, Math.round(cur) + delta));
+
+    // Split the boundary text nodes so every text node intersecting the range
+    // is *fully* inside it; order matters when both ends share one node.
+    const endC = range.endContainer;
+    if (endC.nodeType === 3 && range.endOffset < endC.nodeValue.length) endC.splitText(range.endOffset);
+    const startC = range.startContainer;
+    if (startC.nodeType === 3 && range.startOffset > 0) {
+      const tail = startC.splitText(range.startOffset);
+      range.setStart(tail, 0);
+      if (endC === startC) range.setEnd(tail, tail.nodeValue.length);
+    }
+    const s = charOffset(root, range.startContainer, range.startOffset);
+    const e = charOffset(root, range.endContainer, range.endOffset);
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+    const hits = [];
+    let pos = 0; let tn;
+    while ((tn = walker.nextNode())) {
+      const len = tn.nodeValue.length;
+      if (len && pos >= s && pos + len <= e) hits.push(tn);
+      pos += len;
+      if (pos >= e) break;
+    }
+    // Something non-text was selected (an image, say): still handled -- the
+    // click must not fall through and resize the whole block.
+    if (!hits.length) return true;
+    const wraps = hits.map((node) => {
+      const parent = node.parentElement;
+      if (parent && parent !== root && parent.tagName === 'SPAN' && parent.childNodes.length === 1) {
+        parent.style.fontSize = next + 'px';
+        return parent;
+      }
+      const span = document.createElement('span');
+      span.style.fontSize = next + 'px';
+      node.replaceWith(span);
+      span.appendChild(node);
+      return span;
+    });
+    // Reselect the runs so the next ± click steps from here, and cache the
+    // range the way `exec` does for controls that steal focus. Boundaries go
+    // *inside* the first/last wrap (each holds exactly one text node), so the
+    // selection anchor sits under the new span and `selSize` reads it for the
+    // toolbar readout.
+    const first = wraps[0].firstChild;
+    const last = wraps[wraps.length - 1].lastChild;
+    const r2 = document.createRange();
+    r2.setStart(first, 0);
+    r2.setEnd(last, last.nodeValue.length);
+    if (sel) { sel.removeAllRanges(); sel.addRange(r2); }
+    this.savedRange = r2.cloneRange();
+    return true;
+  }
+
   hasCountdown() { return this.state.doc.rows.some((r) => r.cols.some((c) => c.blocks.some((b) => b.type === 'countdown'))); }
 
   persist(doc, assets, chrome) {

package/src/core/export.js

@@ -114,12 +114,15 @@ export function decorateLogicTags(html) {
   const chip = (kind, expr, end) => {
     const color = kind === 'each' ? '#7c3aed' : '#0e7490';
     const word = end ? (kind === 'each' ? 'END LOOP' : 'END IF') : (kind === 'each' ? 'REPEAT EACH' : 'SHOW IF');
-    return '<span style="display:inline-flex;align-items:center;gap:7px;box-sizing:border-box;border:1.5px dashed ' + color + ';border-radius:7px;background:' + color + '14;padding:4px 10px;margin:2px 0;color:' + color + ';font-family:ui-monospace,monospace;font-size:9.5px;font-weight:700;letter-spacing:0.12em;">'
+    // data-mc-deco marks decoration-only nodes so the code view's inspect
+    // link can skip them when counting elements (they exist only in the
+    // preview document, never in the source string being mapped).
+    return '<span data-mc-deco="" style="display:inline-flex;align-items:center;gap:7px;box-sizing:border-box;border:1.5px dashed ' + color + ';border-radius:7px;background:' + color + '14;padding:4px 10px;margin:2px 0;color:' + color + ';font-family:ui-monospace,monospace;font-size:9.5px;font-weight:700;letter-spacing:0.12em;">'
       + (end ? '⏶ ' : '⏷ ') + word
       + (expr ? ' <span style="font-weight:400;font-size:11px;letter-spacing:0;">{{ ' + esc(expr) + ' }}</span>' : '')
       + '</span>';
   };
-  const bandRow = (kind, expr, end) => '<tr><td colspan="99" style="padding:2px 8px;">' + chip(kind, expr, end) + '</td></tr>';
+  const bandRow = (kind, expr, end) => '<tr><td colspan="99" data-mc-deco="" style="padding:2px 8px;">' + chip(kind, expr, end) + '</td></tr>';
   let s = String(html || '');
   // Between-row tags first (adjacent to a <tr> or after a </tr>), looped for
   // the same adjacency reason as import-html's foldLogicWrappers.

package/src/core/i18n/ar.js

@@ -151,6 +151,14 @@ export const AR = {
   'code.applyNote':
     'يحلّل زر التطبيق كل صف جدول من المستوى الأعلى إلى صف لوحة يمكنك تحديده وإعادة ترتيبه وحذفه — الترميز المكتوب يدويًا يبقى سليمًا.',
   'code.meta': '{kb} كيلوبايت · {lines} أسطر',
+  'code.format': 'تنسيق المصدر (المسافات البادئة فقط)',
+  'code.wrap': 'التفاف النص',
+  'code.find': 'بحث',
+  'code.replace': 'استبدال',
+  'code.replaceAll': 'استبدال الكل',
+  'code.prevMatch': 'النتيجة السابقة',
+  'code.nextMatch': 'النتيجة التالية',
+  'code.goToLine': 'الانتقال إلى سطر',
   'toast.sourceReloaded': 'تمت إعادة تحميل المصدر من اللوحة',
   'toast.sourceAppliedOne': 'تم تطبيق المصدر — صف واحد على اللوحة',
   'toast.sourceAppliedMany': 'تم تطبيق المصدر — {rows} صفوف على اللوحة',

package/src/core/i18n/bg.js

@@ -131,6 +131,14 @@ export const BG = {
   'code.applyNote':
     'Прилагането анализира всеки ред на таблица от най-високо ниво в ред на платното, който все още можете да избирате, преподреждате и изтривате — ръчно написаната маркировка преминава непроменена.',
   'code.meta': '{kb} KB · {lines} реда',
+  'code.format': 'Форматиране на кода (само отстъпи)',
+  'code.wrap': 'Пренасяне на редове',
+  'code.find': 'Търсене',
+  'code.replace': 'Замяна',
+  'code.replaceAll': 'Замяна на всички',
+  'code.prevMatch': 'Предишно съвпадение',
+  'code.nextMatch': 'Следващо съвпадение',
+  'code.goToLine': 'Към ред',
   'toast.sourceReloaded': 'Изходният код е презареден от платното',
   'toast.sourceAppliedOne': 'Изходният код е приложен — 1 ред на платното',
   'toast.sourceAppliedMany': 'Изходният код е приложен — {rows} реда на платното',

package/src/core/i18n/bn.js

@@ -150,6 +150,14 @@ export const BN = {
   'code.applyNote':
     'প্রয়োগ করলে প্রতিটি টেবিল সারি একটি ক্যানভাস সারিতে পার্স হয় যা আপনি এখনও নির্বাচন, পুনর্বিন্যাস ও মুছতে পারবেন — হাতে-লেখা মার্কআপ অক্ষত থাকে।',
   'code.meta': '{kb} KB · {lines}টি লাইন',
+  'code.format': 'সোর্স ফরম্যাট করুন (শুধু ইন্ডেন্টেশন)',
+  'code.wrap': 'ওয়ার্ড র‍্যাপ',
+  'code.find': 'খুঁজুন',
+  'code.replace': 'প্রতিস্থাপন',
+  'code.replaceAll': 'সব প্রতিস্থাপন',
+  'code.prevMatch': 'আগের মিল',
+  'code.nextMatch': 'পরের মিল',
+  'code.goToLine': 'লাইনে যান',
   'toast.sourceReloaded': 'ক্যানভাস থেকে সোর্স পুনরায় লোড হয়েছে',
   'toast.sourceAppliedOne': 'সোর্স প্রয়োগ হয়েছে — ক্যানভাসে ১টি সারি',
   'toast.sourceAppliedMany': 'সোর্স প্রয়োগ হয়েছে — ক্যানভাসে {rows}টি সারি',

package/src/core/i18n/ca.js

@@ -131,6 +131,14 @@ export const CA = {
   'code.applyNote':
     'Aplicar analitza cada fila de taula de nivell superior en una fila de llenç que encara podeu seleccionar, reordenar i eliminar — el marcatge escrit a mà sobreviu al procés.',
   'code.meta': '{kb} KB · {lines} línies',
+  'code.format': 'Formata el codi font (només sagnat)',
+  'code.wrap': 'Ajustament de línia',
+  'code.find': 'Cerca',
+  'code.replace': 'Substitueix',
+  'code.replaceAll': 'Substitueix-ho tot',
+  'code.prevMatch': 'Coincidència anterior',
+  'code.nextMatch': 'Coincidència següent',
+  'code.goToLine': 'Vés a la línia',
   'toast.sourceReloaded': 'Font recarregada des del llenç',
   'toast.sourceAppliedOne': 'Font aplicada — 1 fila al llenç',
   'toast.sourceAppliedMany': 'Font aplicada — {rows} files al llenç',

package/src/core/i18n/cs.js

@@ -131,6 +131,14 @@ export const CS = {
   'code.applyNote':
     'Použití rozebere každý řádek tabulky nejvyšší úrovně do řádku plátna, který lze stále vybírat, přeuspořádávat a mazat — ručně psaný kód proces přežije beze změny.',
   'code.meta': '{kb} KB · {lines} řádků',
+  'code.format': 'Formátovat zdroj (pouze odsazení)',
+  'code.wrap': 'Zalamování řádků',
+  'code.find': 'Najít',
+  'code.replace': 'Nahradit',
+  'code.replaceAll': 'Nahradit vše',
+  'code.prevMatch': 'Předchozí shoda',
+  'code.nextMatch': 'Další shoda',
+  'code.goToLine': 'Přejít na řádek',
   'toast.sourceReloaded': 'Zdroj znovu načten z plátna',
   'toast.sourceAppliedOne': 'Zdroj použit — 1 řádek na plátně',
   'toast.sourceAppliedMany': 'Zdroj použit — {rows} řádků na plátně',

package/src/core/i18n/da.js

@@ -131,6 +131,14 @@ export const DA = {
   'code.applyNote':
     'Anvend fortolker hver tabelrække på øverste niveau til en lærredsrække, du stadig kan markere, omarrangere og slette — håndskrevet kode overlever processen uændret.',
   'code.meta': '{kb} KB · {lines} linjer',
+  'code.format': 'Formatér kilden (kun indrykning)',
+  'code.wrap': 'Tekstombrydning',
+  'code.find': 'Find',
+  'code.replace': 'Erstat',
+  'code.replaceAll': 'Erstat alle',
+  'code.prevMatch': 'Forrige match',
+  'code.nextMatch': 'Næste match',
+  'code.goToLine': 'Gå til linje',
   'toast.sourceReloaded': 'Kilde genindlæst fra lærredet',
   'toast.sourceAppliedOne': 'Kilde anvendt — 1 række på lærredet',
   'toast.sourceAppliedMany': 'Kilde anvendt — {rows} rækker på lærredet',

package/src/core/i18n/de-CH.js

@@ -131,6 +131,14 @@ export const DE_CH = {
   'code.applyNote':
     'Beim Anwenden wird jede oberste Tabellenzeile in eine Canvas-Zeile umgewandelt, die du weiterhin auswählen, neu anordnen und löschen kannst — handgeschriebenes Markup übersteht den Vorgang unverändert.',
   'code.meta': '{kb} KB · {lines} Zeilen',
+  'code.format': 'Quelltext formatieren (nur Einrückung)',
+  'code.wrap': 'Zeilenumbruch',
+  'code.find': 'Suchen',
+  'code.replace': 'Ersetzen',
+  'code.replaceAll': 'Alle ersetzen',
+  'code.prevMatch': 'Vorheriger Treffer',
+  'code.nextMatch': 'Nächster Treffer',
+  'code.goToLine': 'Gehe zu Zeile',
   'toast.sourceReloaded': 'Quelltext aus der Canvas neu geladen',
   'toast.sourceAppliedOne': 'Quelltext angewendet — 1 Zeile auf der Canvas',
   'toast.sourceAppliedMany': 'Quelltext angewendet — {rows} Zeilen auf der Canvas',

package/src/core/i18n/de.js

@@ -131,6 +131,14 @@ export const DE = {
   'code.applyNote':
     'Beim Anwenden wird jede oberste Tabellenzeile in eine Canvas-Zeile umgewandelt, die du weiterhin auswählen, neu anordnen und löschen kannst — handgeschriebenes Markup übersteht den Vorgang unverändert.',
   'code.meta': '{kb} KB · {lines} Zeilen',
+  'code.format': 'Quelltext formatieren (nur Einrückung)',
+  'code.wrap': 'Zeilenumbruch',
+  'code.find': 'Suchen',
+  'code.replace': 'Ersetzen',
+  'code.replaceAll': 'Alle ersetzen',
+  'code.prevMatch': 'Vorheriger Treffer',
+  'code.nextMatch': 'Nächster Treffer',
+  'code.goToLine': 'Gehe zu Zeile',
   'toast.sourceReloaded': 'Quelltext aus der Canvas neu geladen',
   'toast.sourceAppliedOne': 'Quelltext angewendet — 1 Zeile auf der Canvas',
   'toast.sourceAppliedMany': 'Quelltext angewendet — {rows} Zeilen auf der Canvas',

package/src/core/i18n/dz.js

@@ -153,6 +153,14 @@ export const DZ = {
   'code.applyNote':
     'ལག་ལེན་འཐབ་པའི་སྐབས་ཐིག་ཁྲམ་ཐིག་ཁྲམ་རེ་རེ་སེལ་འཐུ, གོ་རིམ་བསྒྱུར, ད་རུང་བསུབ་བཏུབ་པའི་ཐིག་ཁྲམ་ཅིག་ལུ་བཤད་བཤག — ལག་གིས་བྲིས་པའི་མཱརཀ་཮཮པ་ཧེ་མ་བཟུམ་ལུས་འོང༌།',
   'code.meta': '{kb} KB · ཐིག་ {lines}',
+  'code.format': 'རྩ་འཛིན་བཟོ་རྣམ་སྒྲིག་ནི (ནང་བསྐུམ་རྐྱངམ་གཅིག)',
+  'code.wrap': 'ཚིག་ཐིག་བསྒྱིར་ནི',
+  'code.find': 'འཚོལ་ཞིབ',
+  'code.replace': 'ཚབ་བཙུགས',
+  'code.replaceAll': 'ཆ་མཉམ་ཚབ་བཙུགས',
+  'code.prevMatch': 'ཧེ་མའི་མཐུན་པ',
+  'code.nextMatch': 'ཤུལ་མའི་མཐུན་པ',
+  'code.goToLine': 'ཐིག་ལུ་འགྱོ',
   'toast.sourceReloaded': 'ཐིག་ཁྲམ་ནང་ལས་རྩ་འཛིན་སླར་འདྲེན་བྱུང',
   'toast.sourceAppliedOne': 'རྩ་འཛིན་ལག་ལེན་འཐབ་ཡོད — ཐིག་ཁྲམ་ནང་ཐིག་ ༡',
   'toast.sourceAppliedMany': 'རྩ་འཛིན་ལག་ལེན་འཐབ་ཡོད — ཐིག་ཁྲམ་ནང་ཐིག་ {rows}',

package/src/core/i18n/el.js

@@ -131,6 +131,14 @@ export const EL = {
   'code.applyNote':
     'Η εφαρμογή αναλύει κάθε γραμμή πίνακα ανώτατου επιπέδου σε γραμμή καμβά που μπορείτε ακόμη να επιλέξετε, να αναδιατάξετε και να διαγράψετε — ο χειρόγραφος κώδικας επιβιώνει αναλλοίωτος.',
   'code.meta': '{kb} KB · {lines} γραμμές',
+  'code.format': 'Μορφοποίηση πηγαίου κώδικα (μόνο εσοχές)',
+  'code.wrap': 'Αναδίπλωση λέξεων',
+  'code.find': 'Εύρεση',
+  'code.replace': 'Αντικατάσταση',
+  'code.replaceAll': 'Αντικατάσταση όλων',
+  'code.prevMatch': 'Προηγούμενη αντιστοιχία',
+  'code.nextMatch': 'Επόμενη αντιστοιχία',
+  'code.goToLine': 'Μετάβαση στη γραμμή',
   'toast.sourceReloaded': 'Η πηγή επαναφορτώθηκε από τον καμβά',
   'toast.sourceAppliedOne': 'Η πηγή εφαρμόστηκε — 1 γραμμή στον καμβά',
   'toast.sourceAppliedMany': 'Η πηγή εφαρμόστηκε — {rows} γραμμές στον καμβά',