@seliseblocks/mailcraft 0.1.0 → 0.2.0

package/src/mailcraft-editor.js

@@ -8,6 +8,7 @@ import { renderField, renderFieldCards, typeCommit } from './render/fields.js';
 import { icon } from './core/icons.js';
 import { TOKEN } from './core/variables.js';
 import { hl, cssUrl } from './core/sanitize.js';
+import { decorateLogicTags } from './core/export.js';
 import { withFocusPreserved } from './render/focus-preserve.js';
 import { captureTemplatePng } from './render/screenshot.js';
 import { resolveToolbar, toolbarKey } from './core/toolbar.js';
@@ -310,7 +311,7 @@ export class MailCraftEditor extends ElementBase {
     this.core.emit();
   }
 
-  /** `dir` wins when the host sets it explicitly; otherwise it defaults from `isRtl(locale)` so `locale="ar"` gets RTL for free. Applied directly to `#mc` (not full state, since it never affects rendered content, only the CSS `dir`). */
+  /** `dir` wins when the host sets it explicitly; otherwise it defaults from `isRtl(locale)` so `locale="ar"` gets RTL for free. Applied directly to `#mc` (not full state, since it only mirrors the editor chrome). The email sheet, the code editor, and the value-shaped inspector fields pin their own `dir` so the document being built never flips with the chrome (see render/canvas.js renderDoc). */
   applyDir() {
     if (!this.mc) return;
     const explicit = this.getAttribute('dir');
@@ -417,10 +418,11 @@ export class MailCraftEditor extends ElementBase {
 
   /**
    * Host-supplied file storage -- see `core/storage.js` for the contract, and
-   * README.md for a worked example. Setting one replaces the seeded demo
-   * library with the backend's own: folders, paging,
-   * upload and delete all go through it, and nothing is written to
-   * localStorage. Set `null` to go back to the built-in behaviour.
+   * README.md for a worked example. The package ships no files of its own: with
+   * nothing set here the library opens empty and holds only what is dropped
+   * into it, in this browser, in this draft. Setting a provider hands the whole
+   * library to the backend -- folders, paging, upload and delete all go through
+   * it, and nothing is written to localStorage. Set `null` to go back.
    */
   get storageProvider() { return this.core.storageProvider; }
   set storageProvider(provider) { this.core.setStorageProvider(provider); }
@@ -1266,7 +1268,8 @@ export class MailCraftEditor extends ElementBase {
           line.addEventListener('click', () => this.core.select('block', b.id));
           const chip = elS('span', `width: 22px; height: 22px; flex: none; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: ${bSel ? 'var(--ed-accent)' : 'var(--ed-soft)'}; color: ${bSel ? 'var(--ed-accent-ink)' : 'var(--ed-accent)'};`);
           chip.appendChild(icon(b.type, 12));
-          line.append(chip, elS('span', 'font-family: var(--ed-font); font-size: 12px; font-weight: 500; color: var(--ed-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;', { text: text || typeName, class: 'mc-tree-title' }));
+          // dir=auto: this excerpt is the email's own copy, not chrome text.
+          line.append(chip, elS('span', 'font-family: var(--ed-font); font-size: 12px; font-weight: 500; color: var(--ed-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;', { text: text || typeName, class: 'mc-tree-title', dir: 'auto' }));
           if (text) {
             line.append(
               elS('span', 'flex: 1; min-width: 8px;'),
@@ -1305,7 +1308,7 @@ export class MailCraftEditor extends ElementBase {
     wrap.appendChild(this.sectionBar(t('vars.title'), t('vars.fromCode', { count: this.core.vars().length })));
     const card = this.sectionBody();
     card.appendChild(elS('p', 'margin: 0 0 12px; font-size: 11.5px; color: var(--ed-muted); line-height: 1.55;', { text: t('vars.declaredNote') }));
-    const search = elS('input', 'width: 100%; box-sizing: border-box; background: var(--ed-panel-2); border: 1px solid var(--ed-line); border-radius: 8px; color: var(--ed-text); font: inherit; font-size: 12.5px; padding: 7px 9px; margin-bottom: 8px;', { placeholder: t('vars.filterPlaceholder'), 'data-focus-key': 'var-query' });
+    const search = elS('input', 'width: 100%; box-sizing: border-box; background: var(--ed-panel-2); border: 1px solid var(--ed-line); border-radius: 8px; color: var(--ed-text); font: inherit; font-size: 12.5px; padding: 7px 9px; margin-bottom: 8px;', { placeholder: t('vars.filterPlaceholder'), 'data-focus-key': 'var-query', dir: 'auto' });
     search.value = s.varQuery || '';
     search.addEventListener('focus', () => { search.style.borderColor = 'var(--ed-accent)'; search.style.outline = 'none'; });
     search.addEventListener('blur', () => { search.style.borderColor = 'var(--ed-line)'; });
@@ -1326,7 +1329,8 @@ export class MailCraftEditor extends ElementBase {
       const textSpan = elS('span', 'flex: 1; min-width: 0;');
       textSpan.append(
         elS('span', 'display: block; font-family: var(--ed-font); font-weight: 600; font-size: 12.5px; line-height: 1.2;', { text: name }),
-        elS('span', 'display: block; font-family: ui-monospace, monospace; font-size: 10px; color: var(--ed-accent); margin-top: 2px;', { text: TOKEN(v) }),
+        // dir=ltr keeps the braces on the right ends of {{ token }} under RTL.
+        elS('span', 'display: block; font-family: ui-monospace, monospace; font-size: 10px; color: var(--ed-accent); margin-top: 2px;', { text: TOKEN(v), dir: 'ltr' }),
       );
       btn.append(textSpan, elS('span', 'font-family: var(--ed-font); font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ed-faint);', { text: t('vars.insert') }));
       grid.appendChild(btn);
@@ -1356,7 +1360,7 @@ export class MailCraftEditor extends ElementBase {
       elS('div', 'font-family: var(--ed-font); font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ed-muted);', { text: t('modal.fileManager'), 'data-i18n': 'modal.fileManager' }),
       (this.libraryTitleText = elS('div', 'font-family: var(--ed-font); font-weight: 600; font-size: 16px; line-height: 1.25;')),
     );
-    this.assetSearch = elS('input', 'width: 210px; box-sizing: border-box; background: var(--ed-panel-2); border: 1px solid var(--ed-line); color: var(--ed-text); font: inherit; font-size: 13px; padding: 7px 9px;', { placeholder: t('library.searchPlaceholder'), 'data-i18n-placeholder': 'library.searchPlaceholder', 'data-focus-key': 'asset-query' });
+    this.assetSearch = elS('input', 'width: 210px; box-sizing: border-box; background: var(--ed-panel-2); border: 1px solid var(--ed-line); color: var(--ed-text); font: inherit; font-size: 13px; padding: 7px 9px;', { placeholder: t('library.searchPlaceholder'), 'data-i18n-placeholder': 'library.searchPlaceholder', 'data-focus-key': 'asset-query', dir: 'auto' });
     this.assetSearch.addEventListener('focus', () => { this.assetSearch.style.borderColor = 'var(--ed-accent)'; this.assetSearch.style.outline = 'none'; });
     this.assetSearch.addEventListener('blur', () => { this.assetSearch.style.borderColor = 'var(--ed-line)'; });
     // Debounced re-render; setAssetQuery separately debounces the backend call.
@@ -1516,7 +1520,9 @@ export class MailCraftEditor extends ElementBase {
     head.append(headText, this.copyBtn, this.shotBtn, downloadBtn, closeBtn);
     modal.appendChild(head);
 
-    this.exportTextarea = elS('textarea', 'width: 100%; height: 100%; box-sizing: border-box; border: 0; background: var(--ed-work); color: var(--ed-text); font-family: ui-monospace, monospace; font-size: 11.5px; line-height: 1.55; padding: 18px 20px; resize: none;', { readonly: 'true' });
+    // dir=ltr: this holds HTML source, which bidi-scrambles under the RTL
+    // chrome (same reason as buildCodeEditor).
+    this.exportTextarea = elS('textarea', 'width: 100%; height: 100%; box-sizing: border-box; border: 0; background: var(--ed-work); color: var(--ed-text); font-family: ui-monospace, monospace; font-size: 11.5px; line-height: 1.55; padding: 18px 20px; resize: none;', { readonly: 'true', dir: 'ltr' });
     modal.appendChild(this.exportTextarea);
     this.exportMetaEl = elS('div', 'padding: 10px 20px; border-top: 1px solid var(--ed-line); font-family: ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0.06em; color: var(--ed-faint);');
     modal.appendChild(this.exportMetaEl);
@@ -1601,7 +1607,10 @@ export class MailCraftEditor extends ElementBase {
    * highlight or caret drifting away from the editable text. */
   buildCodeEditor() {
     const MONO = 'font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 20px; tab-size: 2;';
-    const root = elS('div', 'position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; background: var(--ed-work);');
+    // dir=ltr: HTML source is directional text; under an RTL chrome the
+    // inherited direction would bidi-scramble it and, worse, let the caret
+    // in the transparent textarea drift off the highlighted layer beneath.
+    const root = elS('div', 'position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; background: var(--ed-work);', { dir: 'ltr' });
     const inner = elS('div', 'position: relative; min-height: 100%; width: 100%; min-width: 0;');
     this.codePre = elS('pre', `${MONO} margin: 0; padding: 14px 0 80px; width: 100%; min-width: 0; min-height: 100%; white-space: normal; color: var(--ed-text); pointer-events: none; background: linear-gradient(to right, var(--ed-panel-2) 0 52px, var(--ed-work) 52px);`, { 'aria-hidden': 'true' });
     this.codeTextarea = elS('textarea', `${MONO} position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 14px 18px 80px 70px; border: 0; background: transparent; color: transparent; caret-color: var(--ed-accent); white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; overflow: hidden; resize: none; outline: none;`, { spellcheck: 'false', wrap: 'soft', 'data-focus-key': 'code-src' });
@@ -1645,7 +1654,10 @@ export class MailCraftEditor extends ElementBase {
     if (!s.codeOpen) return;
     this.refreshCodeSource();
     if (this._codeFrameSrc !== s.codeLive) {
-      this.codeFrame.srcdoc = s.codeLive;
+      // Display-only: the preview pane draws logic tags as the canvas's
+      // dashed bands; the source pane and everything exported keep the
+      // literal {{#if}}/{{#each}} text.
+      this.codeFrame.srcdoc = decorateLogicTags(s.codeLive);
       this._codeFrameSrc = s.codeLive;
     }
     this.syncCodePreviewScrollbar();
@@ -1730,7 +1742,7 @@ export class MailCraftEditor extends ElementBase {
 
     const briefWrap = elS('div');
     briefWrap.appendChild(elS('label', 'display: block; font-size: 11.5px; color: var(--ed-muted); margin-bottom: 4px;', { text: t('ai.briefLabel'), 'data-i18n': 'ai.briefLabel' }));
-    this.aiBriefInput = elS('textarea', 'width: 100%; min-height: 78px; box-sizing: border-box; background: var(--ed-panel-2); border: 1px solid var(--ed-line); color: var(--ed-text); font: inherit; font-size: 13px; padding: 9px; resize: vertical;', { placeholder: t('ai.briefPlaceholder'), 'data-i18n-placeholder': 'ai.briefPlaceholder', 'data-focus-key': 'ai-brief' });
+    this.aiBriefInput = elS('textarea', 'width: 100%; min-height: 78px; box-sizing: border-box; background: var(--ed-panel-2); border: 1px solid var(--ed-line); color: var(--ed-text); font: inherit; font-size: 13px; padding: 9px; resize: vertical;', { placeholder: t('ai.briefPlaceholder'), 'data-i18n-placeholder': 'ai.briefPlaceholder', 'data-focus-key': 'ai-brief', dir: 'auto' });
     this.aiBriefInput.addEventListener('focus', () => { this.aiBriefInput.style.borderColor = 'var(--ed-accent)'; this.aiBriefInput.style.outline = 'none'; });
     // Debounced with a blur flush: runAi reads state.aiBrief, and clicking
     // Generate blurs this field first -- the flush lands the last keystrokes
@@ -1772,7 +1784,7 @@ export class MailCraftEditor extends ElementBase {
     s.aiResults.forEach((r) => {
       const card = elS('div', 'position: relative; border: 1px solid var(--ed-line); border-radius: var(--ed-radius-sm); padding: 15px;');
       card.appendChild(elS('div', 'font-family: var(--ed-font); font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ed-accent); margin-bottom: 7px;', { text: r.kind }));
-      card.appendChild(elS('div', 'font-size: 14px; line-height: 1.55; white-space: pre-wrap;', { text: r.text }));
+      card.appendChild(elS('div', 'font-size: 14px; line-height: 1.55; white-space: pre-wrap;', { text: r.text, dir: 'auto' }));
       const useBtn = elS('button', 'margin-top: 12px; border: 1px solid var(--ed-line); background: transparent; color: var(--ed-text); cursor: pointer; padding: 6px 11px; font-family: ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; transition: background 0.16s, color 0.16s, border-color 0.16s;', { type: 'button', text: r.action });
       useBtn.addEventListener('mouseenter', () => { useBtn.style.background = 'var(--ed-accent)'; useBtn.style.color = 'var(--ed-accent-ink)'; useBtn.style.borderColor = 'var(--ed-accent)'; });
       useBtn.addEventListener('mouseleave', () => { useBtn.style.background = 'transparent'; useBtn.style.color = 'var(--ed-text)'; useBtn.style.borderColor = 'var(--ed-line)'; });

package/src/render/block-body.js

@@ -15,6 +15,30 @@ function el(tag, style, attrs) {
 
 function m(v) { return String(v == null ? '' : v); }
 
+/**
+ * Writing assistants (Grammarly, LanguageTool and friends) treat any
+ * `contenteditable` as a field of their own: they float a button over its
+ * bottom-right corner -- squarely on top of this editor's own block toolbar --
+ * and inject their highlight/overlay DOM into it, which `syncLiveEdit`
+ * (mailcraft-editor.js) then reads back as innerHTML and stores in the
+ * template, so their markup ends up in the exported email. Every one of them
+ * honours an opt-out attribute on the field itself, so each editable surface
+ * declares all of them here rather than repeating the list six times below.
+ * The `spellcheck="false"` that already rode along stays on every copy,
+ * editable or not, and `core/export.js` strips all of it back out on the way
+ * to the recipient.
+ */
+const NO_ASSIST = {
+  'data-gramm': 'false',
+  'data-gramm_editor': 'false',
+  'data-enable-grammarly': 'false',
+  'data-lt-active': 'false',
+};
+
+function editableAttrs(on) {
+  return on ? { contenteditable: 'true', spellcheck: 'false', ...NO_ASSIST } : { spellcheck: 'false' };
+}
+
 /** An explicit block font owns every rich descendant; an empty value deliberately leaves imported inline typography untouched. */
 function overrideRichFont(root, fontFamily) {
   if (!fontFamily) return;
@@ -38,7 +62,7 @@ export function blockBody(b, theme, live, ctx) {
       const edit = live;
       const content = el('div', {
         padding: pad(p), fontSize: p.size + 'px', lineHeight: p.lh, textAlign: p.align, fontWeight: p.weight, color: p.color || t.text, outline: 'none', fontFamily: p.fontFamily || t.font,
-      }, { ...attr, contenteditable: edit ? 'true' : undefined, spellcheck: 'false', html: m(p.html), 'data-focus-key': edit ? 'block:' + b.id : undefined });
+      }, { ...attr, ...editableAttrs(edit), html: m(p.html), 'data-focus-key': edit ? 'block:' + b.id : undefined });
       // Imported email HTML keeps inline font-family declarations so an
       // untouched block retains its source typography. Once the user chooses
       // a block font, however, those nested declarations outrank inheritance
@@ -76,7 +100,7 @@ export function blockBody(b, theme, live, ctx) {
         // email pattern; the color falls back to the label color so a bare
         // "outline thickness" bump looks right without a second step.
         border: p.borderW ? p.borderW + 'px ' + (p.borderStyle || 'solid') + ' ' + (p.borderColor || p.color) : '0',
-      }, { href: p.href, contenteditable: live ? 'true' : undefined, spellcheck: 'false', text: p.label });
+      }, { href: p.href, ...editableAttrs(live), text: p.label });
       a.addEventListener('click', (e) => e.preventDefault());
       // Button editing is deliberately plain: no focus-tracked `editing` state, no
       // paste handling, no floating RTE toolbar -- only its label commits on blur.
@@ -147,7 +171,7 @@ export function blockBody(b, theme, live, ctx) {
       const safe = live
         ? raw.replace(/<style([^>]*)>([\s\S]*?)<\/style>/gi, (mm, at, css) => '<style' + at + '>' + ctx.scopeCss(css, '[data-mc-sheet]') + '</style>')
         : raw;
-      const content = el('div', { padding: '6px 0', fontFamily: t.font, color: t.text, outline: 'none' }, { ...attr, contenteditable: edit ? 'true' : undefined, spellcheck: 'false', html: m(safe), 'data-focus-key': edit ? 'block:' + b.id : undefined });
+      const content = el('div', { padding: '6px 0', fontFamily: t.font, color: t.text, outline: 'none' }, { ...attr, ...editableAttrs(edit), html: m(safe), 'data-focus-key': edit ? 'block:' + b.id : undefined });
       if (edit) wireEditable(content, b, 'code', ctx, false);
       if (!live) return content;
       return wrapWithRte(b, ctx, edit && ctx.editingId === b.id, content);
@@ -187,7 +211,7 @@ export function blockBody(b, theme, live, ctx) {
         color: p.color || t.text, outline: 'none',
         // An explicit per-block font beats the Condensed/Body style toggle.
         fontFamily: p.fontFamily || (p.font === 'condensed' ? "'Arial Narrow', 'Helvetica Neue Condensed', Helvetica, Arial, sans-serif" : t.font),
-      }, { ...attr, contenteditable: edit ? 'true' : undefined, spellcheck: 'false', text: m(p.text), 'data-focus-key': edit ? 'block:' + b.id : undefined });
+      }, { ...attr, ...editableAttrs(edit), text: m(p.text), 'data-focus-key': edit ? 'block:' + b.id : undefined });
       if (edit) wireEditable(head, b, 'text', ctx, true);
       if (!live) return head;
       return wrapWithRte(b, ctx, ctx.editingId === b.id, head);
@@ -217,7 +241,7 @@ export function blockBody(b, theme, live, ctx) {
             fontWeight: isHead ? '600' : '400', outline: 'none',
             fontFamily: p.fontFamily || t.font,
             letterSpacing: isHead ? '0.06em' : 'normal', textTransform: isHead ? 'uppercase' : 'none', fontSize: isHead ? p.size + 1 + 'px' : p.size + 'px',
-          }, { contenteditable: edit ? 'true' : undefined, spellcheck: 'false', text: m(cell), 'data-focus-key': edit ? 'block:' + b.id + ':c' + ri + '-' + ci : undefined });
+          }, { ...editableAttrs(edit), text: m(cell), 'data-focus-key': edit ? 'block:' + b.id + ':c' + ri + '-' + ci : undefined });
           if (edit) {
             // stopPropagation is load-bearing (a bubbled click would select
             // via the block wrapper AND deselect via the workspace), but it
@@ -262,13 +286,32 @@ export function blockBody(b, theme, live, ctx) {
         minHeight: p.minH ? p.minH + 'px' : 'auto', maxWidth: p.maxW + '%', margin: p.align === 'center' ? '0 auto' : '0',
         boxShadow: p.shadow ? '0 10px 30px rgba(29,31,32,0.12)' : 'none',
         fontFamily: t.font, color: t.text, fontSize: '15px', lineHeight: '1.6',
-      }, { ...attr, contenteditable: edit ? 'true' : undefined, spellcheck: 'false', html: m(p.html), 'data-focus-key': edit ? 'block:' + b.id : undefined });
+      }, { ...attr, ...editableAttrs(edit), html: m(p.html), 'data-focus-key': edit ? 'block:' + b.id : undefined });
       if (edit) wireEditable(box, b, 'html', ctx, false);
       if (!live) return box;
       return wrapWithRte(b, ctx, ctx.editingId === b.id, box);
     }
     case 'svg':
       return el('div', { padding: p.py + 'px 0', textAlign: p.align }, { ...attr, html: '<span style="display:inline-block;width:' + p.width + '%">' + p.code + '</span>' });
+    // Dynamic-content markers. Editor furniture, never sent: the exporter
+    // emits the template tag itself at this position (core/export.js) and
+    // never reads this DOM back. The band renders in the preview too -- the
+    // preview shows the template the way it shows merge tokens, so the logic
+    // structure stays visible there rather than silently vanishing.
+    case 'condition':
+    case 'loop': {
+      const isLoop = b.type === 'loop';
+      const color = isLoop ? '#7c3aed' : '#0e7490';
+      const word = p.end ? (isLoop ? 'end loop' : 'end if') : (isLoop ? 'repeat each' : 'show if');
+      const band = el('div', {
+        display: 'flex', alignItems: 'center', gap: '8px', boxSizing: 'border-box',
+        border: '1.5px dashed ' + color, borderRadius: '7px', background: color + '14',
+        padding: '6px 12px', margin: '2px 0', color,
+      }, attr);
+      band.appendChild(el('span', { fontFamily: 'ui-monospace,monospace', fontSize: '9.5px', fontWeight: '700', letterSpacing: '0.12em', textTransform: 'uppercase', flex: 'none' }, { text: (p.end ? '⏶ ' : '⏷ ') + word }));
+      if (!p.end) band.appendChild(el('span', { fontFamily: 'ui-monospace,monospace', fontSize: '11.5px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, { text: '{{ ' + (p.expr || '…') + ' }}' }));
+      return band;
+    }
     case 'codeblock':
       return el('pre', { margin: '0', padding: p.pad + 'px', background: p.bg, color: p.color, fontFamily: 'ui-monospace, Menlo, monospace', fontSize: p.size + 'px', lineHeight: '1.6', overflowX: 'auto', whiteSpace: 'pre' }, { ...attr, text: m(p.code) });
     default:

package/src/render/canvas.js

@@ -169,10 +169,16 @@ export function renderDoc(core, live) {
   // Lives only for this render's drag gesture(s) -- no core state, no re-render.
   const rowDropTracker = { active: null };
 
+  // `dir="ltr"` pins the sheet to the document's own direction. The editor
+  // chrome mirrors under an RTL locale (`dir=rtl` on `#mc`), but the email
+  // being built is a separate document: exportHtml emits no `dir`, so mail
+  // clients render it LTR -- letting the chrome's direction cascade in here
+  // flipped bidi punctuation and default alignment on the canvas and made it
+  // disagree with the exported result.
   const root = el('div', {
     width: width + 'px', maxWidth: '100%', background: theme.contentBg, color: theme.text, fontFamily: theme.font,
     transition: 'width 0.28s cubic-bezier(0.22,0.61,0.36,1), background 0.2s',
-  }, { 'data-mc-sheet': '1' });
+  }, { 'data-mc-sheet': '1', dir: 'ltr' });
 
   const rowLines = [];
   if (live) {
@@ -229,8 +235,31 @@ export function renderDoc(core, live) {
           bWrap.addEventListener('dragstart', core.startDrag({ kind: 'move-block', id: b.id }));
           bWrap.addEventListener('dragend', () => { core.drag = null; hideActive(rowDropTracker); hideActive(colTracker); });
           bWrap.addEventListener('click', (e) => { e.stopPropagation(); core.select('block', b.id); });
+          // WebKit gives a `draggable="true"` ancestor priority over the
+          // selection machinery: a mousedown anywhere inside this wrapper is
+          // taken as the start of an element drag, so in Safari a double-click
+          // on block text never selects the word and pressing and sweeping
+          // across it never extends a selection. (Chromium and Gecko both
+          // special-case contenteditable descendants; WebKit does not.)
+          // Dropping the attribute for the length of a gesture that begins
+          // inside editable text hands those mousedowns back to the caret;
+          // restoring it on mouseup keeps drag-to-reorder working from every
+          // other part of the block -- including its padding, which is what a
+          // block is normally picked up by.
+          bWrap.addEventListener('mousedown', (e) => {
+            const target = e.target;
+            if (!target || target.nodeType !== 1 || !target.closest('[contenteditable="true"]')) return;
+            bWrap.draggable = false;
+            const view = bWrap.ownerDocument.defaultView;
+            if (view) view.addEventListener('mouseup', () => { bWrap.draggable = true; }, { once: true });
+          });
         }
-        if (bSel) bWrap.appendChild(toolbar(core, b.id, 'block', DEF(b.type).code));
+        // Not while this block is being inline-edited: the pill sits at the
+        // block's top-right, flush against the floating RTE toolbar's bottom
+        // edge -- visually colliding with it, and putting its Delete button a
+        // few pixels from the RTE's own controls. The RTE stands in for it for
+        // the duration of the edit; it comes back on blur (still selected).
+        if (bSel && ctx.editingId !== b.id) bWrap.appendChild(toolbar(core, b.id, 'block', DEF(b.type).code));
         bWrap.appendChild(blockBody(b, theme, live, ctx));
         items.push(bWrap);
       });