fable-editor 1.1.0 → 1.2.0

package/dist/angular/fesm2022/fable-editor.mjs

@@ -1,6 +1,5 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, Output, Input, ViewChild, Component, NgModule } from '@angular/core';
-import katex from 'katex';
 
 const I18N = {
     en: {
@@ -42,9 +41,14 @@ const I18N = {
         rowabove: 'Insert row before',
         rowbelow: 'Insert row after',
         delrow: 'Delete row',
+        moverowup: 'Move row up',
+        moverowdown: 'Move row down',
         colbefore: 'Insert column before',
         colafter: 'Insert column after',
         delcol: 'Delete column',
+        movecolleft: 'Move column left',
+        movecolright: 'Move column right',
+        cellbg: 'Cell background',
         deltable: 'Delete table',
         ltr: 'Left to right',
         rtl: 'Right to left',
@@ -91,6 +95,9 @@ const I18N = {
         tblcellpadding: 'Cell padding',
         tblborder: 'Border width',
         tblalign: 'Alignment',
+        tblalignleft: 'Align table left',
+        tblaligncenter: 'Center table',
+        tblalignright: 'Align table right',
         alignnone: 'None',
         quote: 'Blockquote',
         link: 'Link…',
@@ -99,6 +106,7 @@ const I18N = {
         unlink: 'Remove link',
         lineheight: 'Line height',
         wordspacing: 'Word spacing',
+        letterspacing: 'Letter spacing',
         changecase: 'Change case',
         lowercase: 'Lowercase',
         uppercase: 'Uppercase',
@@ -152,12 +160,6 @@ const I18N = {
         videourlph: 'Paste video URL…',
         insertvideo: 'Insert',
         dropvideo: 'Drop video here',
-        mathformula: 'Insert math formula',
-        mathdlgttl: 'Insert Math Formula',
-        mathderivation: 'Multi-line derivation',
-        mathlatex: 'LaTeX',
-        editmath: 'Edit formula',
-        deletemath: 'Delete formula',
         videodlgttl: 'Insert/edit video',
         vidgeneral: 'General',
         vidembed: 'Embed',
@@ -167,6 +169,13 @@ const I18N = {
         vidaltsource: 'Alternative source URL',
         vidposter: 'Media poster (Image URL)',
         emoji: 'Emojis…',
+        code: 'Inline code',
+        codesample: 'Code sample…',
+        codedlgttl: 'Insert/edit code sample',
+        codelang: 'Language',
+        editcode: 'Edit code sample',
+        deletecode: 'Delete code sample',
+        copycode: 'Copy code',
         chcat_currency: 'Currency',
         chcat_text: 'Text & punctuation',
         chcat_math: 'Mathematical',
@@ -223,9 +232,14 @@ const I18N = {
         rowabove: 'إدراج صف قبل',
         rowbelow: 'إدراج صف بعد',
         delrow: 'حذف الصف',
+        moverowup: 'نقل الصف لأعلى',
+        moverowdown: 'نقل الصف لأسفل',
         colbefore: 'إدراج عمود قبل',
         colafter: 'إدراج عمود بعد',
         delcol: 'حذف العمود',
+        movecolleft: 'نقل العمود لليسار',
+        movecolright: 'نقل العمود لليمين',
+        cellbg: 'خلفية الخلية',
         deltable: 'حذف الجدول',
         ltr: 'من اليسار إلى اليمين',
         rtl: 'من اليمين إلى اليسار',
@@ -272,6 +286,9 @@ const I18N = {
         tblcellpadding: 'حشو الخلايا',
         tblborder: 'عرض الحدود',
         tblalign: 'المحاذاة',
+        tblalignleft: 'محاذاة الجدول لليسار',
+        tblaligncenter: 'توسيط الجدول',
+        tblalignright: 'محاذاة الجدول لليمين',
         alignnone: 'بدون',
         quote: 'اقتباس',
         link: 'رابط…',
@@ -280,6 +297,7 @@ const I18N = {
         unlink: 'إزالة الرابط',
         lineheight: 'تباعد الأسطر',
         wordspacing: 'تباعد الكلمات',
+        letterspacing: 'تباعد الأحرف',
         changecase: 'تغيير حالة الأحرف',
         lowercase: 'أحرف صغيرة',
         uppercase: 'أحرف كبيرة',
@@ -333,12 +351,6 @@ const I18N = {
         videourlph: 'الصق رابط الفيديو…',
         insertvideo: 'إدراج',
         dropvideo: 'أسقط الفيديو هنا',
-        mathformula: 'إدراج معادلة رياضية',
-        mathdlgttl: 'إدراج معادلة رياضية',
-        mathderivation: 'اشتقاق متعدد الأسطر',
-        mathlatex: 'LaTeX',
-        editmath: 'تعديل المعادلة',
-        deletemath: 'حذف المعادلة',
         videodlgttl: 'إدراج/تعديل فيديو',
         vidgeneral: 'عام',
         vidembed: 'تضمين',
@@ -348,6 +360,13 @@ const I18N = {
         vidaltsource: 'رابط مصدر بديل',
         vidposter: 'صورة الغلاف (رابط الصورة)',
         emoji: 'رموز تعبيرية…',
+        code: 'كود مضمّن',
+        codesample: 'عينة كود…',
+        codedlgttl: 'إدراج/تعديل عينة كود',
+        codelang: 'اللغة',
+        editcode: 'تعديل عينة الكود',
+        deletecode: 'حذف عينة الكود',
+        copycode: 'نسخ الكود',
         chcat_currency: 'عملات',
         chcat_text: 'نص وعلامات ترقيم',
         chcat_math: 'رموز رياضية',
@@ -374,8 +393,8 @@ function getStrings(lang) {
  *  `toolbar: true` (the default) renders identically to the hard-coded original. */
 const DEFAULT_TOOLBAR = 'undo redo | preview print | importword revhistory | fontfamily fontsize | fontsizeincrease fontsizedecrease | ' +
     'bold italic underline strikethrough | forecolor backcolor | alignleft aligncenter alignright alignjustify | ' +
-    'bullist numlist | outdent indent | link blockquote changecase lineheight wordspacing | removeformat | blocks | ' +
-    'ltr rtl | quickimage quickvideo quicktable mathformula template charmap emoji | fullscreen sourcecode';
+    'bullist numlist | outdent indent | link blockquote code changecase lineheight wordspacing letterspacing | removeformat | blocks | ' +
+    'ltr rtl | quickimage quickvideo quicktable codesample template charmap emoji | fullscreen sourcecode';
 /** Transcribed from the editor's built-in menu keys so that `menubar: true` (the
  *  default) renders identically to the hard-coded original. */
 const DEFAULT_MENUBAR = 'file edit view insert format tools table help';
@@ -405,6 +424,26 @@ const MIN_FONT_PX = 1;
 const MAX_FONT_PX = 100;
 const LINE_HEIGHTS = ['1', '1.15', '1.4', '1.5', '1.75', '2', '2.5', '3'];
 const WORD_SPACINGS = ['1px', '2px', '4px', '6px', '8px', '12px'];
+const LETTER_SPACINGS = ['0.5px', '1px', '1.5px', '2px', '3px', '4px'];
+/** Languages offered by the code-sample dialog: [value stored in data-lang, label]. */
+const CODE_LANGS = [
+    ['plain', 'Plain text'],
+    ['html', 'HTML/XML'],
+    ['css', 'CSS'],
+    ['javascript', 'JavaScript'],
+    ['typescript', 'TypeScript'],
+    ['json', 'JSON'],
+    ['python', 'Python'],
+    ['java', 'Java'],
+    ['csharp', 'C#'],
+    ['cpp', 'C/C++'],
+    ['php', 'PHP'],
+    ['ruby', 'Ruby'],
+    ['go', 'Go'],
+    ['rust', 'Rust'],
+    ['sql', 'SQL'],
+    ['bash', 'Bash/Shell']
+];
 const BLOCKS = [
     ['p', 'para'],
     ['h1', 'heading1'],
@@ -417,75 +456,105 @@ const BLOCKS = [
 ];
 /** Quick-access text color chips shown directly in the toolbar. */
 const QUICK_COLORS = ['#F76707', '#4263EB', '#CC5DE8'];
+/** 25 swatches — a 5×5 grid in the picker (pastels, brights, darks, grays,
+ *  then pink/brown/cyan + black/white). Shared by fore/back color and cell fill. */
 const COLORS = [
-    '#BFEDD2',
-    '#FBEEB8',
-    '#F8CAC6',
-    '#ECCAFA',
-    '#C2E0F4',
-    '#2DC26B',
-    '#F1C40F',
-    '#E03E2D',
-    '#B96AD9',
-    '#3598DB',
-    '#169179',
-    '#E67E23',
-    '#BA372A',
-    '#843FA1',
-    '#236FA1',
-    '#ECF0F1',
-    '#CED4D9',
-    '#95A5A6',
-    '#7E8C8D',
-    '#34495E',
+    '#FFFFFF',
+    '#F4F4F4',
+    '#E8EAED',
+    '#DADCE0',
     '#000000',
-    '#FFFFFF'
+    '#F28B82',
+    '#FBBC04',
+    '#FFF475',
+    '#CCFF90',
+    '#A7FFEB',
+    '#CBF0F8',
+    '#AECBFA',
+    '#D7AEFB',
+    '#FDCFE8',
+    '#E6C9A8',
+    '#EA4335',
+    '#FB8C00',
+    '#FDD835',
+    '#34A853',
+    '#00ACC1',
+    '#4285F4',
+    '#5E35B1',
+    '#8E24AA',
+    '#C2185B',
+    '#6D4C41'
 ];
 /** Special-character map, grouped for the two-pane picker (tabs left, glyphs right).
  *  `CHARS` below is the legacy flat list and is kept exported for back-compat. */
 const CHAR_CATEGORIES = [
     {
         key: 'chcat_currency',
-        chars: ['€', '£', '¥', '¢', '$', '₹', '₽', '₩', '₺', '₴', '₦', '฿', '₫', '₪', '﷼', '¤']
+        chars: [
+            '€', '£', '¥', '¢', '$', '₹', '₽', '₩', '₺', '₴', '₦', '฿', '₫', '₪', '﷼', '¤',
+            '₡', '₱', '₲', '₵', '₭', '₮', '₸', '₼', '₾', '₿'
+        ]
     },
     {
         key: 'chcat_text',
         chars: [
-            '§', '¶', '†', '‡', '•', '…', '′', '″', '‰', '–', '—', '¡', '¿', '·',
-            '‹', '›', '«', '»', '“', '”', '‘', '’', '„', '‚', '¦', 'ª', 'º'
+            '§', '¶', '†', '‡', '•', '…', '′', '″', '‰', '‱', '–', '—', '―', '¡', '¿', '·',
+            '‹', '›', '«', '»', '“', '”', '‘', '’', '„', '‚', '¦', 'ª', 'º',
+            '‽', '※', '❝', '❞', '❮', '❯'
         ]
     },
     {
         key: 'chcat_math',
         chars: [
             '°', '±', '×', '÷', '≈', '≠', '≤', '≥', '∞', 'µ', '√', '∑', '∫', '∂', '∆', '∏',
-            'π', 'Ω', 'α', 'β', 'γ', 'θ', 'λ', 'σ', 'φ', 'ω', '∈', '∉', '∪', '∩', '⊂', '⊃',
-            '∀', '∃', '∅', '∝', '∴', '¬', '½', '⅓', '¼', '¾', '⅔', '⅛', '⅜', '⅝', '⅞', '¹', '²', '³'
+            'π', 'Ω', 'α', 'β', 'γ', 'δ', 'ε', 'θ', 'λ', 'σ', 'φ', 'ψ', 'ω',
+            '∈', '∉', '∪', '∩', '⊂', '⊃', '⊆', '⊇', '∀', '∃', '∅', '∝', '∴', '∵', '¬', '∧', '∨',
+            '½', '⅓', '¼', '¾', '⅔', '⅛', '⅜', '⅝', '⅞',
+            '¹', '²', '³', '⁴', '⁵', '⁶', '⁷', '⁸', '⁹', '⁰',
+            '₁', '₂', '₃', '₄', '₅', '₆', '₇', '₈', '₉', '₀'
         ]
     },
     {
         key: 'chcat_arrows',
-        chars: ['←', '→', '↑', '↓', '↔', '↕', '⇐', '⇒', '⇑', '⇓', '⇔', '↖', '↗', '↘', '↙', '↩', '↪', '⤴', '⤵']
+        chars: [
+            '←', '→', '↑', '↓', '↔', '↕', '⇐', '⇒', '⇑', '⇓', '⇔',
+            '↖', '↗', '↘', '↙', '↩', '↪', '↺', '↻',
+            '⤴', '⤵', '➜', '➝', '➞', '➟', '⇦', '⇨', '⇧', '⇩'
+        ]
     },
     {
         key: 'chcat_symbols',
         chars: [
-            '©', '®', '™', '℠', '№', '℮', '✓', '✗', '★', '☆', '✦', '♠', '♣', '♥', '♦',
-            '♪', '♫', '☀', '☁', '☂', '☾', '☹', '☺', '✉', '✂', '✎', '☞', '☜'
+            '©', '®', '™', '℠', '№', '℮',
+            '✓', '✔', '✗', '✘',
+            '★', '☆', '✦', '✪',
+            '♠', '♣', '♥', '♦',
+            '♪', '♫', '♬',
+            '☀', '☁', '☂', '☃', '☾',
+            '☹', '☺', '☻',
+            '✉', '✂', '✎', '✏',
+            '☎', '☏', '⌛', '⌚',
+            '☞', '☜', '☝', '☟'
         ]
     },
     {
         key: 'chcat_latin',
         chars: [
             'À', 'Á', 'Â', 'Ã', 'Ä', 'Å', 'Æ', 'Ç', 'È', 'É', 'Ê', 'Ë', 'Ì', 'Í', 'Î', 'Ï',
-            'Ñ', 'Ò', 'Ó', 'Ô', 'Õ', 'Ö', 'Ø', 'Ù', 'Ú', 'Û', 'Ü', 'Ý', 'ß',
+            'Ð', 'Ñ', 'Ò', 'Ó', 'Ô', 'Õ', 'Ö', 'Ø', 'Ù', 'Ú', 'Û', 'Ü', 'Ý', 'Þ', 'ß',
             'à', 'á', 'â', 'ã', 'ä', 'å', 'æ', 'ç', 'è', 'é', 'ê', 'ë', 'ì', 'í', 'î', 'ï',
-            'ñ', 'ò', 'ó', 'ô', 'õ', 'ö', 'ø', 'ù', 'ú', 'û', 'ü', 'ý', 'ÿ'
+            'ð', 'ñ', 'ò', 'ó', 'ô', 'õ', 'ö', 'ø', 'ù', 'ú', 'û', 'ü', 'ý', 'þ', 'ÿ',
+            'Œ', 'œ', 'Š', 'š', 'Ž', 'ž', 'Ł', 'ł'
         ]
     },
     {
         key: 'chcat_arabic',
-        chars: ['؟', '،', '؛', '٪', '٭', 'ـ', '٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩', '﴾', '﴿', '۞', '؎']
+        chars: [
+            '؟', '،', '؛', '٪', '٭', 'ـ',
+            '٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩',
+            '﴾', '﴿', '۞', '؎',
+            'ء', 'آ', 'أ', 'ؤ', 'إ', 'ئ', 'ى', 'ة'
+        ]
     }
 ];
 /** Emoji map for the emoji picker — same two-pane dialog as the character map. */
@@ -726,8 +795,14 @@ const IC = {
     ol_romanu: LIST(['I', 'II', 'III'], 6.5),
     video: S('<rect x="3" y="6" width="13" height="12" rx="1.5"/><path d="M16 10l5-3v10l-5-3z"/>'),
     editic: S('<path d="M4 20l1-4.5L15.5 5 19 8.5 8.5 19 4 20z"/><path d="M13.5 6.5l4 4"/>'),
-    mathic: S('<text x="2" y="18" font-size="17" stroke="none" fill="#222f3e" font-family="Georgia, \'Times New Roman\', serif" font-style="italic">&#8721;</text>'),
-    emojiic: S('<circle cx="12" cy="12" r="8.5"/><path d="M8.6 14.3a4.6 4.6 0 0 0 6.8 0"/><path d="M9.2 9.6v.7M14.8 9.6v.7"/>')
+    letterspacing: S('<text x="2.5" y="13" font-size="12" stroke="none" fill="#222f3e" font-family="Arial" font-weight="bold">A</text><text x="13" y="13" font-size="12" stroke="none" fill="#222f3e" font-family="Arial" font-weight="bold">B</text><path d="M7 18.5h10"/><path class="f" d="M7.5 18.5 4.5 16.6v3.8z"/><path class="f" d="M16.5 18.5l3-1.9v3.8z"/>'),
+    emojiic: S('<circle cx="12" cy="12" r="8.5"/><path d="M8.6 14.3a4.6 4.6 0 0 0 6.8 0"/><path d="M9.2 9.6v.7M14.8 9.6v.7"/>'),
+    inlinecodeic: S('<path d="M8.5 8 4.5 12l4 4M15.5 8l4 4-4 4"/><path d="M13 6l-2 12"/>'),
+    moverowup: S('<rect x="4" y="15.5" width="16" height="5" rx="1"/><path d="M12 12.5V4M8.5 7.5 12 4l3.5 3.5"/>'),
+    moverowdown: S('<rect x="4" y="3.5" width="16" height="5" rx="1"/><path d="M12 11.5V20M8.5 16.5 12 20l3.5-3.5"/>'),
+    movecolleft: S('<rect x="15.5" y="4" width="5" height="16" rx="1"/><path d="M12.5 12H4M7.5 8.5 4 12l3.5 3.5"/>'),
+    movecolright: S('<rect x="3.5" y="4" width="5" height="16" rx="1"/><path d="M11.5 12H20M16.5 8.5 20 12l-3.5 3.5"/>'),
+    codesampleic: S('<rect x="3.5" y="4" width="17" height="16" rx="2"/><path d="M3.5 8.5h17"/><path d="M9.5 12 7 14.25l2.5 2.25M14.5 12l2.5 2.25-2.5 2.25"/>')
 };
 const TXT = (html) => `<span class="txt">${html}</span>`;
 
@@ -1618,6 +1693,82 @@ const TPL_ICON = {
     'img-top': IC.tpltop,
     'img-center': IC.tplcenter
 };
+/* ---------------------------------------------------------- tooltips
+   One shared bubble + one delegated document listener restyles every native
+   `title` tooltip in the editor UI (toolbar, menus, popups, context toolbars,
+   dialogs) without extra wrapper markup per control. Titles inside the
+   editable area are user content and keep the browser default. */
+const TIP_SCOPE = '.tox,.pop,.tblctx,.imgctx,.selctx,.dlg';
+let tipEl = null;
+let tipTarget = null;
+let tipTimer = 0;
+let tipsInstalled = false;
+function hideTip() {
+    clearTimeout(tipTimer);
+    tipTarget = null;
+    if (tipEl)
+        tipEl.classList.remove('show');
+}
+function showTip(el) {
+    const text = el.dataset.tip;
+    if (!text)
+        return;
+    tipTarget = el;
+    clearTimeout(tipTimer);
+    // moving along a toolbar re-anchors an already-visible tip almost instantly
+    const delay = tipEl && tipEl.classList.contains('show') ? 60 : 350;
+    tipTimer = window.setTimeout(() => {
+        if (tipTarget !== el || !document.contains(el))
+            return;
+        if (!tipEl) {
+            tipEl = document.createElement('div');
+            tipEl.className = 'etip';
+            document.body.appendChild(tipEl);
+        }
+        tipEl.textContent = text;
+        tipEl.classList.add('show');
+        const r = el.getBoundingClientRect();
+        const w = tipEl.offsetWidth;
+        const h = tipEl.offsetHeight;
+        let x = r.left + r.width / 2 - w / 2;
+        x = Math.max(6, Math.min(x, innerWidth - w - 6));
+        let y = r.bottom + 7;
+        if (y + h > innerHeight - 6)
+            y = r.top - h - 7;
+        tipEl.style.left = x + 'px';
+        tipEl.style.top = y + 'px';
+    }, delay);
+}
+function installTooltips() {
+    if (tipsInstalled)
+        return;
+    tipsInstalled = true;
+    document.addEventListener('mouseover', (e) => {
+        const raw = e.target;
+        const el = raw.closest ? raw.closest('[title],[data-tip]') : null;
+        if (!el || !el.closest(TIP_SCOPE) || el.closest('.earea')) {
+            if (el !== tipTarget)
+                hideTip();
+            return;
+        }
+        const title = el.getAttribute('title');
+        if (title) {
+            // hand the text to the custom bubble and disarm the native one
+            el.dataset.tip = title;
+            el.removeAttribute('title');
+            if (!el.getAttribute('aria-label'))
+                el.setAttribute('aria-label', title);
+        }
+        if (el !== tipTarget)
+            showTip(el);
+    });
+    document.addEventListener('mouseout', (e) => {
+        if (tipTarget && !tipTarget.contains(e.relatedTarget))
+            hideTip();
+    });
+    document.addEventListener('mousedown', hideTip, true);
+    addEventListener('scroll', hideTip, true);
+}
 class FableEditor {
     static instanceCounter = 0;
     options;
@@ -1667,9 +1818,11 @@ class FableEditor {
     vphUploadTarget = null;
     videoUploadHandler;
     onVideoUploadError;
-    mathActive = null;
-    mathCtx = null;
     selCtx = null;
+    tbrMore = null;
+    tbrExpanded = false;
+    codeActive = null;
+    codeCtx = null;
     tplActive = null;
     tplCtx = null;
     docInput;
@@ -1701,6 +1854,7 @@ class FableEditor {
         this.videoUploadHandler = options.videoUploadHandler;
         this.onVideoUploadError = options.onVideoUploadError;
         this.contentStyle = options.contentStyle;
+        this.applyTheme(options);
         this.lang = this.options.language;
         this.draftStorageKey = 'tmclone-draft:' + this.options.draftKey;
         this.initDOM();
@@ -1759,6 +1913,7 @@ class FableEditor {
             this.shell.appendChild(this.contentStyleEl);
         }
         target.appendChild(this.shell);
+        installTooltips();
         if (!this.options.statusbar)
             this.statusbar.style.display = 'none';
         this.imgInput = document.createElement('input');
@@ -1777,6 +1932,18 @@ class FableEditor {
         this.docInput.style.display = 'none';
         target.appendChild(this.docInput);
     }
+    /** Theme options land as CSS variables on the document root rather than the editor
+     *  shell, because dialogs, popups and floating context toolbars are appended to
+     *  document.body and would not inherit variables scoped to the shell. */
+    applyTheme(options) {
+        const root = document.documentElement;
+        if (options.primaryColor)
+            root.style.setProperty('--fable-primary', options.primaryColor);
+        if (options.toolbarGroupBackground)
+            root.style.setProperty('--fable-tgrp-bg', options.toolbarGroupBackground);
+        if (options.uiFontFamily)
+            root.style.setProperty('--fable-ui-font', options.uiFontFamily);
+    }
     /** Rewrites the literal word `body` in a user-supplied `contentStyle` string to a
      *  selector scoped to this instance's content div. Everything else passes through
      *  verbatim, since `.ed` is a plain div in the host page (not an iframe) and an
@@ -1841,7 +2008,7 @@ class FableEditor {
             this.positionTplCtx();
             this.positionVphCtx();
             this.positionVidCtx();
-            this.positionMathCtx();
+            this.positionCodeCtx();
         });
         this.on(this.ed, 'keydown', (e) => {
             if (e.altKey && e.key === '0') {
@@ -1856,8 +2023,8 @@ class FableEditor {
                 e.preventDefault();
                 this.removeVphPlaceholder();
             }
-            if (e.key === '$' && !e.ctrlKey && !e.metaKey && !e.altKey)
-                this.tryMathTyping(e);
+            if (e.key === '`' && !e.ctrlKey && !e.metaKey && !e.altKey)
+                this.tryCodeTyping(e);
         });
         this.on(this.ed, 'paste', (e) => this.handlePaste(e));
         this.on(this.ed, 'drop', (e) => {
@@ -1910,6 +2077,14 @@ class FableEditor {
                 this.selectTemplate(tpl);
             else
                 this.clearTplSel();
+            const codeBlk = target.closest?.('pre.code-block');
+            if (codeBlk && this.ed.contains(codeBlk) && !this.options.readonly) {
+                e.preventDefault();
+                this.selectCodeEl(codeBlk);
+            }
+            else {
+                this.clearCodeSel();
+            }
             const img = target.closest?.('img');
             if (img && this.ed.contains(img) && !this.options.readonly) {
                 e.preventDefault();
@@ -1926,14 +2101,6 @@ class FableEditor {
             else {
                 this.clearVidHandles();
             }
-            const mathEl = target.closest?.('.math-fable');
-            if (mathEl && this.ed.contains(mathEl) && !this.options.readonly) {
-                e.preventDefault();
-                this.selectMathEl(mathEl);
-            }
-            else {
-                this.clearMathSel();
-            }
         });
         this.on(this.ed, 'mouseover', (e) => {
             if (this.options.readonly)
@@ -1963,7 +2130,7 @@ class FableEditor {
             this.positionTplCtx();
             this.positionVphCtx();
             this.positionVidCtx();
-            this.positionMathCtx();
+            this.positionCodeCtx();
         });
         this.onWin('scroll', () => {
             this.positionTableHandles();
@@ -1972,7 +2139,7 @@ class FableEditor {
             this.positionTplCtx();
             this.positionVphCtx();
             this.positionVidCtx();
-            this.positionMathCtx();
+            this.positionCodeCtx();
             this.repositionSelToolbar();
         }, true);
         this.onWin('resize', () => {
@@ -1982,9 +2149,17 @@ class FableEditor {
             this.positionTplCtx();
             this.positionVphCtx();
             this.positionVidCtx();
-            this.positionMathCtx();
+            this.positionCodeCtx();
             this.repositionSelToolbar();
+            this.updateToolbarOverflow();
         });
+        /* container-driven, not just viewport-driven: an editor inside a resizable
+           panel collapses/expands its toolbar as its own width changes */
+        if (typeof ResizeObserver !== 'undefined') {
+            const ro = new ResizeObserver(() => this.updateToolbarOverflow());
+            ro.observe(this.shell);
+            this.listeners.push(() => ro.disconnect());
+        }
         this.on(this.imgInput, 'change', () => {
             const file = this.imgInput.files?.[0];
             if (!file)
@@ -2039,7 +2214,7 @@ class FableEditor {
                 (this.selCtx && this.selCtx.contains(e.target)) ||
                 (this.vphCtx && this.vphCtx.contains(e.target)) ||
                 (this.vidCtx && this.vidCtx.contains(e.target)) ||
-                (this.mathCtx && this.mathCtx.contains(e.target)) ||
+                (this.codeCtx && this.codeCtx.contains(e.target)) ||
                 (this.openPop && this.openPop.contains(e.target)) ||
                 (this.openSubEl && this.openSubEl.contains(e.target)))
                 return;
@@ -2049,7 +2224,7 @@ class FableEditor {
             this.clearTplSel();
             this.clearVphPlaceholderSel();
             this.clearVidHandles();
-            this.clearMathSel();
+            this.clearCodeSel();
             this.clearSelToolbar();
         });
     }
@@ -2078,7 +2253,7 @@ class FableEditor {
         this.clearTplSel();
         this.clearVphPlaceholderSel();
         this.clearVidHandles();
-        this.clearMathSel();
+        this.clearCodeSel();
         this.clearSelToolbar();
         this.onChange();
     }
@@ -2143,7 +2318,7 @@ class FableEditor {
         this.clearTplSel();
         this.clearVphPlaceholderSel();
         this.clearVidHandles();
-        this.clearMathSel();
+        this.clearCodeSel();
         this.clearSelToolbar();
         this.listeners.forEach((fn) => fn());
         this.listeners = [];
@@ -2343,14 +2518,14 @@ class FableEditor {
         sub.style.top = y + 'px';
         this.openSubEl = sub;
     }
-    popup(anchor, build) {
+    popup(anchor, build, cls) {
         if (this.openPop && this.popAnchor === anchor) {
             this.closePop();
             return;
         }
         this.closePop();
         const el = document.createElement('div');
-        el.className = 'pop';
+        el.className = 'pop' + (cls ? ' ' + cls : '');
         el.dir = this.dir();
         build(el);
         document.body.appendChild(el);
@@ -2532,53 +2707,61 @@ class FableEditor {
             el.appendChild(grid);
         });
     }
-    colorMenu(anchor, kind) {
-        this.popup(anchor, (el) => {
-            const grid = document.createElement('div');
-            grid.className = 'cpal';
-            COLORS.forEach((c) => {
-                const b = document.createElement('button');
-                b.style.background = c;
-                b.title = c;
-                b.addEventListener('click', () => {
-                    this.closePop();
-                    this.applyColor(kind, c);
-                });
-                grid.appendChild(b);
-            });
-            el.appendChild(grid);
-            el.insertAdjacentHTML('beforeend', '<div class="sep"></div>');
-            const foot = document.createElement('div');
-            foot.className = 'cfoot';
-            const cur = document.createElement('div');
-            cur.className = 'cswatch cur';
-            cur.title = this.t('currentcolor');
-            const curColor = kind === 'fore' ? this.foreColor : this.backColor;
-            cur.style.background = /^#[0-9a-f]{6}$/i.test(curColor) ? curColor : '#000000';
-            cur.innerHTML = IC.check;
-            const nocolor = document.createElement('button');
-            nocolor.type = 'button';
-            nocolor.className = 'cswatch nocolor';
-            nocolor.title = this.t('removecolor');
-            nocolor.addEventListener('click', () => {
-                this.closePop();
-                this.applyColor(kind, null);
-            });
-            const wheel = document.createElement('label');
-            wheel.className = 'cswatch cwheel';
-            wheel.title = this.t('customcolor');
-            wheel.innerHTML = IC.palette;
-            const picker = document.createElement('input');
-            picker.type = 'color';
-            picker.value = /^#[0-9a-f]{6}$/i.test(curColor) ? curColor : '#000000';
-            picker.addEventListener('change', () => {
+    /** Shared color-picker popup body — swatch grid plus the current-color /
+     *  no-color / custom-picker footer — so the fore/back toolbar menus and the
+     *  table cell-background menu all show the identical popup. */
+    buildPaletteInto(el, curColor, apply) {
+        const grid = document.createElement('div');
+        grid.className = 'cpal';
+        COLORS.forEach((c) => {
+            const b = document.createElement('button');
+            b.type = 'button';
+            b.style.background = c;
+            b.title = c;
+            b.addEventListener('click', () => {
                 this.closePop();
-                this.applyColor(kind, picker.value);
+                apply(c);
             });
-            wheel.appendChild(picker);
-            foot.append(cur, nocolor, wheel);
-            el.appendChild(foot);
+            grid.appendChild(b);
+        });
+        el.appendChild(grid);
+        el.insertAdjacentHTML('beforeend', '<div class="sep"></div>');
+        const foot = document.createElement('div');
+        foot.className = 'cfoot';
+        const hex = /^#[0-9a-f]{6}$/i.test(curColor) ? curColor : '#000000';
+        const cur = document.createElement('div');
+        cur.className = 'cswatch cur';
+        cur.title = this.t('currentcolor');
+        cur.style.background = hex;
+        cur.innerHTML = IC.check;
+        const nocolor = document.createElement('button');
+        nocolor.type = 'button';
+        nocolor.className = 'cswatch nocolor';
+        nocolor.title = this.t('removecolor');
+        nocolor.addEventListener('click', () => {
+            this.closePop();
+            apply(null);
+        });
+        const wheel = document.createElement('label');
+        wheel.className = 'cswatch cwheel';
+        wheel.title = this.t('customcolor');
+        wheel.innerHTML = IC.palette;
+        const picker = document.createElement('input');
+        picker.type = 'color';
+        picker.value = hex;
+        picker.addEventListener('change', () => {
+            this.closePop();
+            apply(picker.value);
         });
+        wheel.appendChild(picker);
+        foot.append(cur, nocolor, wheel);
+        el.appendChild(foot);
+    }
+    colorMenu(anchor, kind) {
+        this.popup(anchor, (el) => {
+            const curColor = kind === 'fore' ? this.foreColor : this.backColor;
+            this.buildPaletteInto(el, curColor, (c) => this.applyColor(kind, c));
+        }, kind === 'fore' ? 'pop-forecolor' : 'pop-backcolor');
     }
     applyColor(kind, c) {
         if (kind === 'fore') {
@@ -2741,11 +2924,12 @@ class FableEditor {
     applyBlockStyle(prop, value) {
         this.restoreSel();
         const blocks = this.selectedBlocks();
+        const cssProp = prop === 'lineHeight' ? 'line-height' : prop === 'wordSpacing' ? 'word-spacing' : 'letter-spacing';
         blocks.forEach((b) => {
             if (value)
                 b.style[prop] = value;
             else
-                b.style.removeProperty(prop === 'lineHeight' ? 'line-height' : 'word-spacing');
+                b.style.removeProperty(cssProp);
         });
         this.saveSel();
         this.onChange();
@@ -2781,6 +2965,19 @@ class FableEditor {
             ]);
         });
     }
+    letterSpacingMenu(anchor) {
+        const cur = this.currentBlockStyle('letterSpacing');
+        this.popup(anchor, (el) => {
+            this.menuItems(el, [
+                { label: this.t('normal'), on: !cur, action: () => this.applyBlockStyle('letterSpacing', '') },
+                ...LETTER_SPACINGS.map((v) => ({
+                    label: v,
+                    on: cur === v,
+                    action: () => this.applyBlockStyle('letterSpacing', v)
+                }))
+            ]);
+        });
+    }
     closestAnchor() {
         const s = window.getSelection();
         let node = s && this.ed.contains(s.anchorNode) ? s.anchorNode : null;
@@ -2981,16 +3178,18 @@ class FableEditor {
             indent: () => this.tbtn(IC.indent, this.t('indent'), () => this.exec('indent')),
             link: () => this.tbtn(IC.link, this.t('linkttl'), () => this.linkDlg()),
             blockquote: () => this.tbtn(IC.quote, this.t('quote'), () => this.toggleBlock('blockquote'), 'blockquote'),
+            code: () => this.tbtn(IC.inlinecodeic, this.t('code'), () => this.toggleInlineCode(), 'code'),
+            codesample: () => this.tbtn(IC.codesampleic, this.t('codesample'), () => this.codeDlg()),
             changecase: () => this.menuTbtn(IC.caseic, this.t('changecase'), (b) => this.caseMenu(b)),
             lineheight: () => this.menuTbtn(IC.lineheight, this.t('lineheight'), (b) => this.lineHeightMenu(b)),
             wordspacing: () => this.menuTbtn(IC.wordspacing, this.t('wordspacing'), (b) => this.wordSpacingMenu(b)),
+            letterspacing: () => this.menuTbtn(IC.letterspacing, this.t('letterspacing'), (b) => this.letterSpacingMenu(b)),
             removeformat: () => this.tbtn(IC.clearformatic, this.t('removeformat'), () => this.exec('removeFormat')),
             blocks: () => this.tsel('w-block', 'blocksel', this.t('para'), (b) => this.blocksMenu(b)),
             ltr: () => this.tbtn(IC.ltr, this.t('ltr'), () => this.setDir('ltr'), 'ltr'),
             rtl: () => this.tbtn(IC.rtl, this.t('rtl'), () => this.setDir('rtl'), 'rtl'),
             quickimage: () => this.tbtn(IC.image, this.t('quickimage'), () => this.insertImagePlaceholder()),
             quickvideo: () => this.tbtn(IC.video, this.t('quickvideo'), () => this.videoDlg()),
-            mathformula: () => this.tbtn(IC.mathic, this.t('mathformula'), () => this.mathDlg()),
             quicktable: () => tableBtn,
             template: () => this.menuTbtn(IC.templateic, this.t('template'), (b) => this.templateMenu(b)),
             charmap: () => this.tbtn(IC.charic, this.t('charmap'), () => this.charMap()),
@@ -3027,7 +3226,40 @@ class FableEditor {
             if (elements.length)
                 this.toolbar.appendChild(this.group(...elements));
         });
+        this.tbrMore = this.tbtn(IC.more, this.t('more'), () => {
+            this.tbrExpanded = !this.tbrExpanded;
+            this.updateToolbarOverflow();
+        });
+        this.tbrMore.classList.add('tbr-more');
+        this.toolbar.appendChild(this.tbrMore);
         this.syncColorSwatches(this.toolbar);
+        this.updateToolbarOverflow();
+    }
+    /** xs/sm/md editors (< 992px wide) collapse an overflowing toolbar to one row +
+     *  "…" expander; at lg widths and up the toolbar wraps to multiple rows as before. */
+    static TBR_COLLAPSE_MAX = 992;
+    /** Responsive one-line toolbar: on mobile/tablet widths (or a narrow host
+     *  container) a toolbar that can't fit on a single row collapses to one
+     *  clipped row plus a trailing "…" button that expands/collapses the full
+     *  set. Driven by the editor's own width, so it also applies to narrow
+     *  panels on desktop. */
+    updateToolbarOverflow() {
+        const tb = this.toolbar;
+        if (!this.tbrMore)
+            return;
+        tb.classList.add('tbr-measure');
+        const overflows = tb.scrollWidth > tb.clientWidth + 1;
+        tb.classList.remove('tbr-measure');
+        const narrow = this.shell.offsetWidth < FableEditor.TBR_COLLAPSE_MAX;
+        if (!overflows || !narrow) {
+            this.tbrExpanded = false;
+            tb.classList.remove('collapsible', 'expanded');
+            this.tbrMore.classList.remove('on');
+            return;
+        }
+        tb.classList.add('collapsible');
+        tb.classList.toggle('expanded', this.tbrExpanded);
+        this.tbrMore.classList.toggle('on', this.tbrExpanded);
     }
     /* ---------------------------------------------------------- menubar */
     mItem(label, icon, action, shortcut) {
@@ -3072,8 +3304,8 @@ class FableEditor {
                 this.mItem('link', IC.link, () => this.linkDlg()),
                 this.mItem('image', IC.image, () => this.insertImagePlaceholder()),
                 this.mItem('video', IC.video, () => this.videoDlg()),
-                this.mItem('mathformula', IC.mathic, () => this.mathDlg()),
                 { label: this.t('inserttable'), icon: IC.tableic, action: () => this.tableGrid(this.menubar.querySelector('[data-menu-key="table"]') || this.menubar) },
+                this.mItem('codesample', IC.codesampleic, () => this.codeDlg()),
                 { label: this.t('template'), icon: IC.templateic, subBuild: (el) => this.buildTemplatePickInto(el) },
                 this.mItem('hr', IC.hric, () => this.exec('insertHorizontalRule')),
                 '|',
@@ -3099,6 +3331,7 @@ class FableEditor {
                 this.mItem('strikethrough', IC.strikethrough, () => this.exec('strikeThrough')),
                 this.mItem('superscript', IC.superscriptic, () => this.exec('superscript')),
                 this.mItem('subscript', IC.subscriptic, () => this.exec('subscript')),
+                this.mItem('code', IC.inlinecodeic, () => this.toggleInlineCode()),
                 '|',
                 this.mItem('lowercase', IC.lowercaseic, () => this.transformCase('lower')),
                 this.mItem('uppercase', IC.uppercaseic, () => this.transformCase('upper')),
@@ -3112,7 +3345,10 @@ class FableEditor {
                 '|',
                 {
                     label: this.t('cell'),
-                    sub: [{ label: this.t('cellprops'), icon: IC.tableic, action: () => this.cellPropsDlg() }]
+                    sub: [
+                        { label: this.t('cellprops'), icon: IC.tableic, action: () => this.cellPropsDlg() },
+                        { label: this.t('cellbg'), icon: IC.palette, subBuild: (el) => this.buildCellFillInto(el) }
+                    ]
                 },
                 {
                     label: this.t('row'),
@@ -3121,6 +3357,9 @@ class FableEditor {
                         { label: this.t('rowbelow'), icon: IC.rowafter, action: () => this.tableOp('rowbelow'), hover: (on) => this.setOpTarget(on ? 'row' : null) },
                         { label: this.t('delrow'), icon: IC.rowdelete, action: () => this.tableOp('delrow'), hover: (on) => this.setOpTarget(on ? 'row' : null) },
                         '|',
+                        { label: this.t('moverowup'), icon: IC.moverowup, action: () => this.tableMove('rowup'), hover: (on) => this.setOpTarget(on ? 'row' : null) },
+                        { label: this.t('moverowdown'), icon: IC.moverowdown, action: () => this.tableMove('rowdown'), hover: (on) => this.setOpTarget(on ? 'row' : null) },
+                        '|',
                         { label: this.t('rowprops'), icon: IC.tableic, action: () => this.rowPropsDlg(), hover: (on) => this.setOpTarget(on ? 'row' : null) }
                     ]
                 },
@@ -3131,6 +3370,9 @@ class FableEditor {
                         { label: this.t('colafter'), icon: IC.colafter, action: () => this.tableOp('colafter'), hover: (on) => this.setOpTarget(on ? 'col' : null) },
                         { label: this.t('delcol'), icon: IC.coldelete, action: () => this.tableOp('delcol'), hover: (on) => this.setOpTarget(on ? 'col' : null) },
                         '|',
+                        { label: this.t('movecolleft'), icon: IC.movecolleft, action: () => this.tableMove('colleft'), hover: (on) => this.setOpTarget(on ? 'col' : null) },
+                        { label: this.t('movecolright'), icon: IC.movecolright, action: () => this.tableMove('colright'), hover: (on) => this.setOpTarget(on ? 'col' : null) },
+                        '|',
                         { label: this.t('colprops'), icon: IC.tableic, action: () => this.colPropsDlg(), hover: (on) => this.setOpTarget(on ? 'col' : null) }
                     ]
                 },
@@ -3241,6 +3483,93 @@ class FableEditor {
         this.onChange();
         this.positionTableHandles();
     }
+    /** Reorders the current row/column: 'rowup'/'rowdown' swap the caret's row with
+     *  its neighbour, 'colleft'/'colright' move the caret's column one position in
+     *  DOM order across every row. The caret travels with the moved cell. */
+    tableMove(op) {
+        this.restoreSel();
+        const cell = this.currentCell();
+        if (!cell)
+            return;
+        const row = cell.parentElement;
+        const table = cell.closest('table');
+        const idx = Array.from(row.children).indexOf(cell);
+        if (op === 'rowup') {
+            const prev = row.previousElementSibling;
+            if (prev)
+                prev.before(row);
+        }
+        if (op === 'rowdown') {
+            const next = row.nextElementSibling;
+            if (next)
+                next.after(row);
+        }
+        if (op === 'colleft' && idx > 0) {
+            table.querySelectorAll('tr').forEach((tr) => {
+                const c = tr.children[idx];
+                const prev = tr.children[idx - 1];
+                if (c && prev)
+                    prev.before(c);
+            });
+        }
+        if (op === 'colright') {
+            table.querySelectorAll('tr').forEach((tr) => {
+                const c = tr.children[idx];
+                const next = tr.children[idx + 1];
+                if (c && next)
+                    next.after(c);
+            });
+        }
+        /* moving a node resets live ranges inside it (they collapse to the old
+           parent), so put the caret back into the moved cell explicitly — this is
+           what lets the user click "move" repeatedly to walk a row/column along */
+        const range = document.createRange();
+        range.selectNodeContents(cell);
+        range.collapse(true);
+        const s = window.getSelection();
+        if (s) {
+            s.removeAllRanges();
+            s.addRange(range);
+        }
+        this.saveSel();
+        this.onChange();
+        this.positionTableHandles();
+        this.positionCellMarker();
+    }
+    /** Align the whole table via auto margins — same semantics as the align
+     *  field in the table-properties dialog. */
+    alignTable(align) {
+        const table = this.tblActive;
+        if (!table)
+            return;
+        table.style.marginLeft = align === 'left' ? '0' : 'auto';
+        table.style.marginRight = align === 'right' ? '0' : 'auto';
+        this.onChange();
+        this.positionTableHandles();
+    }
+    /** Color grid applying a background to the caret's cell — the direct way to
+     *  build header rows (the toolbar's backcolor highlights text, not cells). */
+    buildCellFillInto(el) {
+        const apply = (c) => {
+            const cell = this.currentCell();
+            if (!cell) {
+                alert(this.t('nocell'));
+                return;
+            }
+            this.setOrClear(cell, 'background-color', c || '');
+            this.onChange();
+        };
+        const cell = this.currentCell();
+        this.buildPaletteInto(el, this.cssToHex(cell ? cell.style.backgroundColor : ''), apply);
+    }
+    /** style.backgroundColor reads back as rgb(...) — normalise to #rrggbb for the picker. */
+    cssToHex(c) {
+        const m = c.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+        return m ? '#' + m.slice(1, 4).map((n) => (+n).toString(16).padStart(2, '0')).join('') : c;
+    }
+    cellFillMenu(anchor) {
+        this.popup(anchor, (el) => this.buildCellFillInto(el), 'pop-cellbg');
+    }
     applyTableProps(table, vals) {
         if (vals.width)
             table.style.width = /^\d+$/.test(vals.width) ? vals.width + 'px' : vals.width;
@@ -4391,215 +4720,260 @@ class FableEditor {
             }
         ]);
     }
-    /* ---------------------------------------------------------- math / LaTeX formulas */
-    renderMathHTML(latex, block) {
-        try {
-            return katex.renderToString(latex, { throwOnError: false, displayMode: block, strict: 'ignore' });
-        }
-        catch {
-            return '';
-        }
+    escapeAttr(s) {
+        return s.replace(/&/g, '&amp;').replace(/"/g, '&quot;');
     }
-    /** Shared by the math dialog, math paste, and math typing: renders `src` with
-     *  KaTeX and inserts it at the caret as the standard math element (inline span /
-     *  block div carrying its LaTeX source in data-latex). Block formulas get the
-     *  same \begin{aligned} wrapping the dialog applies, so pasted derivations align
-     *  their steps and re-open correctly in the edit dialog. */
-    insertMathElement(src, block) {
-        const latex = block ? `\\begin{aligned}${src}\\end{aligned}` : src;
-        const rendered = this.renderMathHTML(latex, block);
-        const tag = block ? 'div' : 'span';
-        document.execCommand('insertHTML', false, `<${tag} class="math-fable${block ? ' math-fable-block' : ''}" contenteditable="false" data-latex="${this.escapeAttr(src)}">${rendered}</${tag}>`);
-    }
-    /** Recognizes a plain-text clipboard payload that is entirely one math formula:
-     *  $$…$$ / \[…\] (block), \(…\) (inline), a \begin{…}…\end{…} environment (block),
-     *  or $…$ (inline — only when the inside looks like LaTeX, so "$50" stays text).
-     *  Multi-line block content (a derivation pasted as separate lines) gets its lines
-     *  joined with \\ so each step lands on its own line. Returns null for anything
-     *  else, letting the normal paste pipeline run unchanged. */
-    mathFromClipboard(text) {
-        const t = text.trim();
-        if (!t)
+    escHtml(s) {
+        return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    }
+    /* ---------------------------------------------------------- inline code & code samples */
+    /** The inline <code> run the caret sits in, if any (code blocks don't count). */
+    closestInlineCode() {
+        const s = window.getSelection();
+        const node = s && this.ed.contains(s.anchorNode) ? s.anchorNode : null;
+        if (!node)
             return null;
-        const block = t.match(/^\$\$([\s\S]+)\$\$$/) || t.match(/^\\\[([\s\S]+)\\\]$/);
-        if (block) {
-            const src = block[1].trim();
-            if (!src || src.includes('$'))
-                return null;
-            return { latex: this.joinDerivationLines(src), block: true };
-        }
-        if (/^\\begin\{[a-zA-Z*]+\}[\s\S]+\\end\{[a-zA-Z*]+\}$/.test(t)) {
-            return { latex: this.joinDerivationLines(t), block: true };
+        const el = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
+        const code = el?.closest('code');
+        return code && this.ed.contains(code) && !code.closest('pre') ? code : null;
+    }
+    /** Wraps the selection in an inline <code> run, or unwraps the run the caret is
+     *  in. Selections spanning multiple blocks are left alone (a <code> can't wrap
+     *  across paragraphs without producing invalid markup). */
+    toggleInlineCode() {
+        this.restoreSel();
+        const sel = window.getSelection();
+        if (!sel || !sel.rangeCount)
+            return;
+        const existing = this.closestInlineCode();
+        if (existing) {
+            const first = existing.firstChild;
+            const last = existing.lastChild;
+            while (existing.firstChild)
+                existing.parentNode.insertBefore(existing.firstChild, existing);
+            existing.remove();
+            if (first && last) {
+                const r = document.createRange();
+                r.setStartBefore(first);
+                r.setEndAfter(last);
+                sel.removeAllRanges();
+                sel.addRange(r);
+            }
         }
-        const inline = t.match(/^\\\(([\s\S]+)\\\)$/) || t.match(/^\$([^$\n]+)\$$/);
-        if (inline) {
-            const src = inline[1].trim();
-            if (!src || src.includes('$'))
-                return null;
-            if (t.startsWith('$') && !/[\\^_{}=]/.test(src))
-                return null;
-            return { latex: src, block: false };
+        else {
+            const range = sel.getRangeAt(0);
+            if (range.collapsed)
+                return;
+            if (this.closestBlock(range.startContainer) !== this.closestBlock(range.endContainer))
+                return;
+            const code = document.createElement('code');
+            code.appendChild(range.extractContents());
+            range.insertNode(code);
+            const r = document.createRange();
+            r.selectNodeContents(code);
+            sel.removeAllRanges();
+            sel.addRange(r);
         }
-        return null;
-    }
-    /** A derivation pasted as separate lines has no explicit \\ row breaks — add them.
-     *  Content that already breaks rows itself (\\ present, or a \begin environment
-     *  managing its own layout) only has its newlines collapsed to spaces. */
-    joinDerivationLines(src) {
-        if (!/\n/.test(src))
-            return src;
-        if (/\\\\/.test(src) || /\\begin\{/.test(src))
-            return src.replace(/\s*\n\s*/g, ' ');
-        return src
-            .split(/\n+/)
-            .map((l) => l.trim())
-            .filter(Boolean)
-            .join(' \\\\ ');
+        this.saveSel();
+        this.refreshState();
+        this.onChange();
     }
-    /** Typing "$…$" converts to an inline formula the moment the closing "$" is typed,
-     *  so math can be written in place without opening the dialog. Only kicks in when
-     *  the run since the opening "$" parses as valid LaTeX and contains LaTeX-ish
-     *  syntax (\ ^ _ { } =) — a literal "$5 and 3$" stays plain text. */
-    tryMathTyping(e) {
+    /** Typing `snippet` converts to an inline <code> run the moment the closing
+     *  backtick is typed, so code can be marked up without reaching for the toolbar. */
+    tryCodeTyping(e) {
         const sel = window.getSelection();
         if (!sel || !sel.isCollapsed || !sel.anchorNode)
             return;
         const node = sel.anchorNode;
         if (node.nodeType !== Node.TEXT_NODE || !this.ed.contains(node))
             return;
-        if (node.parentElement?.closest('.math-fable, pre, code'))
+        if (node.parentElement?.closest('code, pre'))
             return;
         const before = (node.textContent || '').slice(0, sel.anchorOffset);
-        const m = before.match(/(?:^|[^\\$])\$([^$]+)$/);
+        const m = before.match(/(?:^|[^`])`([^`]+)$/);
         if (!m)
             return;
         const src = m[1];
-        if (/^\s|\s$/.test(src) || !/[\\^_{}=]/.test(src))
-            return;
-        const rendered = this.renderMathHTML(src, false);
-        if (!rendered || rendered.includes('katex-error'))
+        if (/^\s|\s$/.test(src))
             return;
         e.preventDefault();
         const range = document.createRange();
         range.setStart(node, sel.anchorOffset - src.length - 1);
         range.setEnd(node, sel.anchorOffset);
+        /* direct DOM instead of execCommand('insertHTML') — with styleWithCSS
+           active the browser rewrites a pasted <code> into a styled <span>,
+           losing the semantic tag */
+        range.deleteContents();
+        const code = document.createElement('code');
+        code.textContent = src;
+        range.insertNode(code);
+        const after = document.createRange();
+        after.setStartAfter(code);
+        after.collapse(true);
         sel.removeAllRanges();
-        sel.addRange(range);
-        this.insertMathElement(src, false);
+        sel.addRange(after);
+        this.saveSel();
         this.onChange();
     }
-    mathDlg(existing) {
+    /** Custom dropdown for dialog fields (a native <select> popup can't be styled):
+     *  a field-styled button showing the current choice that opens a floating,
+     *  scrollable option list. Read the current choice via `.value()`. */
+    dlgSelect(options, selected) {
+        let value = selected;
+        const el = document.createElement('div');
+        el.className = 'dsel';
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = 'dsel-btn';
+        const lbl = document.createElement('span');
+        lbl.className = 'lbl';
+        lbl.textContent = options.find(([v]) => v === selected)?.[1] || '';
+        btn.append(lbl);
+        btn.insertAdjacentHTML('beforeend', IC.chev);
+        const list = document.createElement('div');
+        list.className = 'dsel-list';
+        options.forEach(([v, label]) => {
+            const o = document.createElement('button');
+            o.type = 'button';
+            o.textContent = label;
+            o.classList.toggle('on', v === value);
+            o.addEventListener('click', () => {
+                value = v;
+                lbl.textContent = label;
+                list.querySelectorAll('button').forEach((b) => b.classList.toggle('on', b === o));
+                el.classList.remove('open');
+                btn.focus();
+            });
+            list.appendChild(o);
+        });
+        btn.addEventListener('click', () => {
+            el.classList.toggle('open');
+            if (el.classList.contains('open'))
+                list.querySelector('.on')?.scrollIntoView({ block: 'nearest' });
+        });
+        el.addEventListener('focusout', (e) => {
+            if (!el.contains(e.relatedTarget))
+                el.classList.remove('open');
+        });
+        el.addEventListener('keydown', (e) => {
+            /* Escape closes the open list without closing the whole dialog */
+            if (e.key === 'Escape' && el.classList.contains('open')) {
+                e.stopPropagation();
+                el.classList.remove('open');
+                btn.focus();
+            }
+        });
+        el.append(btn, list);
+        return { el, value: () => value };
+    }
+    /** Insert/edit-code-sample dialog: language dropdown + monospace textarea to
+     *  paste or type code into. Inserts a non-editable <pre class="code-block">
+     *  whose header shows the language; click the block to edit / copy / delete. */
+    codeDlg(existing) {
         this.saveSel();
-        const isBlock = existing?.classList.contains('math-fable-block') ?? false;
-        const initialLatex = existing?.dataset.latex ? this.unescapeAttr(existing.dataset.latex) : '';
+        let langDd;
         let ta;
-        let derivChk;
-        let preview;
-        const updatePreview = () => {
-            const src = ta.value || '';
-            const block = derivChk.checked;
-            const latex = block ? `\\begin{aligned}${src}\\end{aligned}` : src;
-            preview.innerHTML = this.renderMathHTML(latex, block);
-        };
-        this.dialog(this.t('mathdlgttl'), (body) => {
+        this.dialog(this.t('codedlgttl'), (body) => {
+            const f = document.createElement('div');
+            f.className = 'dfield';
+            const l = document.createElement('label');
+            l.textContent = this.t('codelang');
+            langDd = this.dlgSelect(CODE_LANGS, existing?.dataset.lang || 'plain');
+            f.append(l, langDd.el);
             ta = document.createElement('textarea');
-            ta.value = initialLatex;
-            ta.placeholder = 'e.g. x = \\frac{-b \\pm \\sqrt{b^2-4ac}}{2a}';
-            ta.style.cssText = 'width:360px;max-width:100%;min-height:80px;font-family:monospace;font-size:13px';
-            const chkRow = document.createElement('label');
-            chkRow.style.cssText = 'display:flex;align-items:center;gap:6px;margin:8px 0;font-size:13.5px;color:#445';
-            derivChk = document.createElement('input');
-            derivChk.type = 'checkbox';
-            derivChk.checked = isBlock;
-            chkRow.append(derivChk, document.createTextNode(this.t('mathderivation')));
-            preview = document.createElement('div');
-            preview.className = 'math-preview';
-            preview.style.cssText = 'min-height:40px;margin-top:8px;padding:10px;border:1px solid #e1e5ea;border-radius:6px;overflow:auto';
-            ta.addEventListener('input', updatePreview);
-            derivChk.addEventListener('change', updatePreview);
-            body.append(ta, chkRow, preview);
-            setTimeout(() => {
-                ta.focus();
-                updatePreview();
-            }, 0);
+            ta.className = 'code-input';
+            ta.spellcheck = false;
+            ta.value = existing?.querySelector('code')?.textContent || '';
+            ta.placeholder = 'const answer = 42;';
+            body.append(f, ta);
+            setTimeout(() => ta.focus(), 0);
         }, [
             { label: this.t('cancel'), action: () => this.closeDlg() },
             {
                 label: this.t('save'),
                 primary: true,
                 action: () => {
-                    const src = ta.value.trim();
+                    const src = ta.value.replace(/\s+$/, '');
+                    const lang = langDd.value();
+                    const label = CODE_LANGS.find(([v]) => v === lang)?.[1] || lang;
                     this.closeDlg();
-                    if (!src)
+                    if (!src.trim())
                         return;
-                    const block = derivChk.checked;
                     if (existing) {
-                        const latex = block ? `\\begin{aligned}${src}\\end{aligned}` : src;
-                        existing.className = block ? 'math-fable math-fable-block' : 'math-fable';
-                        existing.dataset.latex = this.escapeAttr(src);
-                        existing.innerHTML = this.renderMathHTML(latex, block);
-                        this.clearMathSel();
+                        existing.dataset.lang = lang;
+                        existing.setAttribute('data-lang-label', label);
+                        const codeEl = existing.querySelector('code') || existing;
+                        codeEl.textContent = src;
+                        this.clearCodeSel();
                         this.onChange();
                         return;
                     }
                     this.restoreSel();
-                    this.insertMathElement(src, block);
+                    document.execCommand('insertHTML', false, `<pre class="code-block" contenteditable="false" data-lang="${lang}" data-lang-label="${this.escapeAttr(label)}">` +
+                        `<code>${this.escHtml(src)}</code></pre><p><br></p>`);
                     this.onChange();
                 }
             }
         ]);
     }
-    escapeAttr(s) {
-        return s.replace(/&/g, '&amp;').replace(/"/g, '&quot;');
-    }
-    unescapeAttr(s) {
-        return s.replace(/&quot;/g, '"').replace(/&amp;/g, '&');
-    }
-    clearMathSel() {
-        this.mathCtx?.remove();
-        this.mathCtx = null;
-        this.mathActive?.classList.remove('math-selected');
-        this.mathActive = null;
+    clearCodeSel() {
+        this.codeCtx?.remove();
+        this.codeCtx = null;
+        this.codeActive?.classList.remove('code-selected');
+        this.codeActive = null;
     }
-    selectMathEl(el) {
-        if (this.mathActive === el)
+    selectCodeEl(el) {
+        if (this.codeActive === el)
             return;
-        this.clearMathSel();
-        this.mathActive = el;
-        el.classList.add('math-selected');
-        this.mathCtx = this.buildMathCtxToolbar(el);
-        this.positionMathCtx();
+        this.clearCodeSel();
+        this.codeActive = el;
+        el.classList.add('code-selected');
+        this.codeCtx = this.buildCodeCtxToolbar(el);
+        this.positionCodeCtx();
     }
-    buildMathCtxToolbar(el) {
+    buildCodeCtxToolbar(el) {
         const ctx = document.createElement('div');
         ctx.className = 'imgctx';
         ctx.dir = this.dir();
-        ctx.append(this.ctxBtn(IC.editic, this.t('editmath'), () => this.mathDlg(el)), this.ctxSep(), this.ctxBtn(IC.trash, this.t('deletemath'), () => {
+        ctx.append(this.ctxBtn(IC.editic, this.t('editcode'), () => this.codeDlg(el)), this.ctxBtn(IC.copyic, this.t('copycode'), () => this.copyCodeBlock(el)), this.ctxSep(), this.ctxBtn(IC.trash, this.t('deletecode'), () => {
             el.remove();
-            this.clearMathSel();
+            this.clearCodeSel();
             this.onChange();
         }));
         ctx.addEventListener('mousedown', (e) => e.preventDefault());
         document.body.appendChild(ctx);
         return ctx;
     }
-    positionMathCtx() {
-        if (!this.mathActive || !document.body.contains(this.mathActive)) {
-            this.clearMathSel();
+    copyCodeBlock(el) {
+        const text = el.querySelector('code')?.textContent ?? el.textContent ?? '';
+        if (navigator.clipboard?.writeText) {
+            navigator.clipboard.writeText(text).catch(() => { });
             return;
         }
-        const r = this.mathActive.getBoundingClientRect();
-        if (!this.mathCtx)
+        const ta = document.createElement('textarea');
+        ta.value = text;
+        document.body.appendChild(ta);
+        ta.select();
+        document.execCommand('copy');
+        ta.remove();
+    }
+    positionCodeCtx() {
+        if (!this.codeActive || !document.body.contains(this.codeActive)) {
+            this.clearCodeSel();
             return;
-        const cw = this.mathCtx.offsetWidth;
-        const ch = this.mathCtx.offsetHeight;
+        }
+        const r = this.codeActive.getBoundingClientRect();
+        if (!this.codeCtx)
+            return;
+        const cw = this.codeCtx.offsetWidth;
+        const ch = this.codeCtx.offsetHeight;
         let cx = r.left + scrollX + (r.width - cw) / 2;
         cx = Math.max(8 + scrollX, Math.min(cx, scrollX + innerWidth - cw - 8));
         let cy = r.top + scrollY - ch - 8;
         if (cy < this.ctxMinTop())
             cy = r.bottom + scrollY + 8;
-        this.mathCtx.style.left = cx + 'px';
-        this.mathCtx.style.top = cy + 'px';
+        this.codeCtx.style.left = cx + 'px';
+        this.codeCtx.style.top = cy + 'px';
     }
     /* ---------------------------------------------------------- templates */
     templateMenu(anchor) {
@@ -4840,7 +5214,8 @@ class FableEditor {
             b.addEventListener('mouseleave', () => this.setOpTarget(null));
             return b;
         };
-        el.append(hl(this.ctxBtn(IC.rowbefore, this.t('rowabove'), () => this.tableOp('rowabove')), 'row'), hl(this.ctxBtn(IC.rowafter, this.t('rowbelow'), () => this.tableOp('rowbelow')), 'row'), hl(this.ctxBtn(IC.rowdelete, this.t('delrow'), () => this.tableOp('delrow')), 'row'), this.ctxSep(), hl(this.ctxBtn(IC.colbefore, this.t('colbefore'), () => this.tableOp('colbefore')), 'col'), hl(this.ctxBtn(IC.colafter, this.t('colafter'), () => this.tableOp('colafter')), 'col'), hl(this.ctxBtn(IC.coldelete, this.t('delcol'), () => this.tableOp('delcol')), 'col'), this.ctxSep(), this.ctxBtn(IC.trash, this.t('deltable'), () => this.tableOp('deltable')), this.ctxBtn(IC.tableic, this.t('tablepropsttl'), () => this.tablePropsDlg()));
+        const fillBtn = this.ctxBtn(IC.palette, this.t('cellbg'), () => this.cellFillMenu(fillBtn));
+        el.append(hl(this.ctxBtn(IC.rowbefore, this.t('rowabove'), () => this.tableOp('rowabove')), 'row'), hl(this.ctxBtn(IC.rowafter, this.t('rowbelow'), () => this.tableOp('rowbelow')), 'row'), hl(this.ctxBtn(IC.moverowup, this.t('moverowup'), () => this.tableMove('rowup')), 'row'), hl(this.ctxBtn(IC.moverowdown, this.t('moverowdown'), () => this.tableMove('rowdown')), 'row'), hl(this.ctxBtn(IC.rowdelete, this.t('delrow'), () => this.tableOp('delrow')), 'row'), this.ctxSep(), hl(this.ctxBtn(IC.colbefore, this.t('colbefore'), () => this.tableOp('colbefore')), 'col'), hl(this.ctxBtn(IC.colafter, this.t('colafter'), () => this.tableOp('colafter')), 'col'), hl(this.ctxBtn(IC.movecolleft, this.t('movecolleft'), () => this.tableMove('colleft')), 'col'), hl(this.ctxBtn(IC.movecolright, this.t('movecolright'), () => this.tableMove('colright')), 'col'), hl(this.ctxBtn(IC.coldelete, this.t('delcol'), () => this.tableOp('delcol')), 'col'), this.ctxSep(), this.ctxBtn(IC.alignleft, this.t('tblalignleft'), () => this.alignTable('left')), this.ctxBtn(IC.aligncenter, this.t('tblaligncenter'), () => this.alignTable('center')), this.ctxBtn(IC.alignright, this.t('tblalignright'), () => this.alignTable('right')), this.ctxSep(), fillBtn, this.ctxBtn(IC.trash, this.t('deltable'), () => this.tableOp('deltable')), this.ctxBtn(IC.tableic, this.t('tablepropsttl'), () => this.tablePropsDlg()));
         document.body.appendChild(el);
         return el;
     }
@@ -5197,7 +5572,7 @@ class FableEditor {
         const caseBtn = this.ctxBtn(IC.caseic, this.t('changecase'), () => this.caseMenu(caseBtn));
         const lhBtn = this.ctxBtn(IC.lineheight, this.t('lineheight'), () => this.lineHeightMenu(lhBtn));
         const wsBtn = this.ctxBtn(IC.wordspacing, this.t('wordspacing'), () => this.wordSpacingMenu(wsBtn));
-        el.append(this.ctxBtn(IC.bold, this.t('bold'), () => this.exec('bold'), 'bold'), this.ctxBtn(IC.italic, this.t('italic'), () => this.exec('italic'), 'italic'), foreBtn, backBtn, this.ctxSep(), this.ctxBtn(IC.quote, this.t('quote'), () => this.toggleBlock('blockquote'), 'blockquote'), this.ctxBtn('<b style="font:700 12px/1 Arial,sans-serif">H2</b>', this.blockLabel('h2'), () => this.toggleBlock('h2'), 'h2'), this.ctxBtn('<b style="font:700 12px/1 Arial,sans-serif">H3</b>', this.blockLabel('h3'), () => this.toggleBlock('h3'), 'h3'), this.ctxSep(), this.ctxBtn(IC.link, this.t('linkttl'), () => this.linkDlg()), caseBtn, lhBtn, wsBtn);
+        el.append(this.ctxBtn(IC.bold, this.t('bold'), () => this.exec('bold'), 'bold'), this.ctxBtn(IC.italic, this.t('italic'), () => this.exec('italic'), 'italic'), foreBtn, backBtn, this.ctxSep(), this.ctxBtn(IC.quote, this.t('quote'), () => this.toggleBlock('blockquote'), 'blockquote'), this.ctxBtn(IC.inlinecodeic, this.t('code'), () => this.toggleInlineCode(), 'code'), this.ctxBtn('<b style="font:700 12px/1 Arial,sans-serif">H2</b>', this.blockLabel('h2'), () => this.toggleBlock('h2'), 'h2'), this.ctxBtn('<b style="font:700 12px/1 Arial,sans-serif">H3</b>', this.blockLabel('h3'), () => this.toggleBlock('h3'), 'h3'), this.ctxSep(), this.ctxBtn(IC.link, this.t('linkttl'), () => this.linkDlg()), caseBtn, lhBtn, wsBtn);
         el.addEventListener('mousedown', (e) => e.preventDefault());
         document.body.appendChild(el);
         this.syncColorSwatches(el);
@@ -5280,6 +5655,9 @@ class FableEditor {
                 if (b)
                     b.classList.toggle('on', inEd && blkTag === tag);
             });
+            const codeB = container.querySelector('[data-id=code]');
+            if (codeB)
+                codeB.classList.toggle('on', inEd && !!this.closestInlineCode());
         });
         const blk = s ? this.closestBlock(s.anchorNode) : null;
         const dir = blk?.closest('[dir]')?.getAttribute('dir') || this.ed.getAttribute('dir') || this.dir();
@@ -5321,18 +5699,10 @@ class FableEditor {
             return;
         }
         if (!html) {
-            /* plain-text pastes get two additive pre-checks before the normal text
-               pipeline runs (the paste engine itself is untouched): a clipboard that
-               is entirely one LaTeX formula/derivation becomes a rendered math
-               element, and a bare video page URL (YouTube & co.) becomes an
-               embedded player. Anything else falls through unchanged. */
+            /* additive pre-check before the normal text pipeline runs (the paste
+               engine itself is untouched): a bare video page URL (YouTube & co.)
+               becomes an embedded player. Anything else falls through unchanged. */
             const text = cd.getData('text/plain');
-            const math = this.mathFromClipboard(text);
-            if (math) {
-                this.insertMathElement(math.latex, math.block);
-                this.onChange();
-                return;
-            }
             const embed = /^\S+$/.test(text.trim()) ? this.videoEmbedUrl(text.trim()) : null;
             if (embed) {
                 document.execCommand('insertHTML', false, this.videoEmbedHTML(embed));
@@ -5356,7 +5726,7 @@ class FableEditor {
         this.clearImgPlaceholderSel();
         this.clearVphPlaceholderSel();
         this.clearVidHandles();
-        this.clearMathSel();
+        this.clearCodeSel();
         this.shell.dir = this.dir();
         this.ed.dir = this.dir();
         if (this.options.menubar)
@@ -5380,6 +5750,9 @@ class FableEditorComponent {
     toolbar = true;
     statusbar = true;
     readonly = false;
+    primaryColor;
+    toolbarGroupBackground;
+    uiFontFamily;
     init = {};
     value = '';
     editorChange = new EventEmitter();
@@ -5396,6 +5769,9 @@ class FableEditorComponent {
             toolbar: this.toolbar,
             statusbar: this.statusbar,
             readonly: this.readonly,
+            primaryColor: this.primaryColor,
+            toolbarGroupBackground: this.toolbarGroupBackground,
+            uiFontFamily: this.uiFontFamily,
             initialContent: this.value,
             ...this.init,
             onChange: (content) => {
@@ -5440,7 +5816,7 @@ class FableEditorComponent {
         this.editor?.setContent(value ?? '');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FableEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FableEditorComponent, isStandalone: true, selector: "fable-editor", inputs: { language: "language", height: "height", menubar: "menubar", toolbar: "toolbar", statusbar: "statusbar", readonly: "readonly", init: "init", value: "value" }, outputs: { editorChange: "editorChange", editorReady: "editorReady" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `<div #container></div>`, isInline: true, styles: [":host{display:block}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FableEditorComponent, isStandalone: true, selector: "fable-editor", inputs: { language: "language", height: "height", menubar: "menubar", toolbar: "toolbar", statusbar: "statusbar", readonly: "readonly", primaryColor: "primaryColor", toolbarGroupBackground: "toolbarGroupBackground", uiFontFamily: "uiFontFamily", init: "init", value: "value" }, outputs: { editorChange: "editorChange", editorReady: "editorReady" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `<div #container></div>`, isInline: true, styles: [":host{display:block}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FableEditorComponent, decorators: [{
             type: Component,
@@ -5460,6 +5836,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], readonly: [{
                 type: Input
+            }], primaryColor: [{
+                type: Input
+            }], toolbarGroupBackground: [{
+                type: Input
+            }], uiFontFamily: [{
+                type: Input
             }], init: [{
                 type: Input
             }], value: [{