fable-editor 1.0.2 → 1.2.0

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

@@ -41,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',
@@ -90,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…',
@@ -98,6 +106,7 @@ const I18N = {
         unlink: 'Remove link',
         lineheight: 'Line height',
         wordspacing: 'Word spacing',
+        letterspacing: 'Letter spacing',
         changecase: 'Change case',
         lowercase: 'Lowercase',
         uppercase: 'Uppercase',
@@ -142,7 +151,47 @@ const I18N = {
         tplimgright: 'Image right, text left',
         tplimgtop: 'Image top, text below',
         tplimgcenter: 'Text top, image center',
-        deltemplate: 'Delete template'
+        deltemplate: 'Delete template',
+        video: 'Video',
+        quickvideo: 'Insert video',
+        deletevideo: 'Delete video',
+        uploadvideo: 'Upload from computer',
+        videolink: 'Insert from URL',
+        videourlph: 'Paste video URL…',
+        insertvideo: 'Insert',
+        dropvideo: 'Drop video here',
+        videodlgttl: 'Insert/edit video',
+        vidgeneral: 'General',
+        vidembed: 'Embed',
+        vidadvanced: 'Advanced',
+        vidsource: 'Source',
+        vidembedhint: 'Paste your embed code below:',
+        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',
+        chcat_arrows: 'Arrows',
+        chcat_symbols: 'Symbols',
+        chcat_latin: 'Extended Latin',
+        chcat_arabic: 'Arabic',
+        emcat_smileys: 'Smileys & emotion',
+        emcat_people: 'People & body',
+        emcat_animals: 'Animals & nature',
+        emcat_food: 'Food & drink',
+        emcat_travel: 'Travel & places',
+        emcat_activities: 'Activities',
+        emcat_objects: 'Objects',
+        emcat_symbols: 'Symbols',
+        emcat_flags: 'Flags'
     },
     ar: {
         dir: 'rtl',
@@ -183,9 +232,14 @@ const I18N = {
         rowabove: 'إدراج صف قبل',
         rowbelow: 'إدراج صف بعد',
         delrow: 'حذف الصف',
+        moverowup: 'نقل الصف لأعلى',
+        moverowdown: 'نقل الصف لأسفل',
         colbefore: 'إدراج عمود قبل',
         colafter: 'إدراج عمود بعد',
         delcol: 'حذف العمود',
+        movecolleft: 'نقل العمود لليسار',
+        movecolright: 'نقل العمود لليمين',
+        cellbg: 'خلفية الخلية',
         deltable: 'حذف الجدول',
         ltr: 'من اليسار إلى اليمين',
         rtl: 'من اليمين إلى اليسار',
@@ -232,6 +286,9 @@ const I18N = {
         tblcellpadding: 'حشو الخلايا',
         tblborder: 'عرض الحدود',
         tblalign: 'المحاذاة',
+        tblalignleft: 'محاذاة الجدول لليسار',
+        tblaligncenter: 'توسيط الجدول',
+        tblalignright: 'محاذاة الجدول لليمين',
         alignnone: 'بدون',
         quote: 'اقتباس',
         link: 'رابط…',
@@ -240,6 +297,7 @@ const I18N = {
         unlink: 'إزالة الرابط',
         lineheight: 'تباعد الأسطر',
         wordspacing: 'تباعد الكلمات',
+        letterspacing: 'تباعد الأحرف',
         changecase: 'تغيير حالة الأحرف',
         lowercase: 'أحرف صغيرة',
         uppercase: 'أحرف كبيرة',
@@ -284,7 +342,47 @@ const I18N = {
         tplimgright: 'صورة يمين، نص يسار',
         tplimgtop: 'صورة أعلى، نص أسفل',
         tplimgcenter: 'نص أعلى، صورة وسط',
-        deltemplate: 'حذف القالب'
+        deltemplate: 'حذف القالب',
+        video: 'فيديو',
+        quickvideo: 'إدراج فيديو',
+        deletevideo: 'حذف الفيديو',
+        uploadvideo: 'رفع من الجهاز',
+        videolink: 'إدراج من رابط',
+        videourlph: 'الصق رابط الفيديو…',
+        insertvideo: 'إدراج',
+        dropvideo: 'أسقط الفيديو هنا',
+        videodlgttl: 'إدراج/تعديل فيديو',
+        vidgeneral: 'عام',
+        vidembed: 'تضمين',
+        vidadvanced: 'متقدم',
+        vidsource: 'المصدر',
+        vidembedhint: 'الصق كود التضمين أدناه:',
+        vidaltsource: 'رابط مصدر بديل',
+        vidposter: 'صورة الغلاف (رابط الصورة)',
+        emoji: 'رموز تعبيرية…',
+        code: 'كود مضمّن',
+        codesample: 'عينة كود…',
+        codedlgttl: 'إدراج/تعديل عينة كود',
+        codelang: 'اللغة',
+        editcode: 'تعديل عينة الكود',
+        deletecode: 'حذف عينة الكود',
+        copycode: 'نسخ الكود',
+        chcat_currency: 'عملات',
+        chcat_text: 'نص وعلامات ترقيم',
+        chcat_math: 'رموز رياضية',
+        chcat_arrows: 'أسهم',
+        chcat_symbols: 'رموز',
+        chcat_latin: 'لاتينية موسعة',
+        chcat_arabic: 'عربية',
+        emcat_smileys: 'وجوه ومشاعر',
+        emcat_people: 'أشخاص وإيماءات',
+        emcat_animals: 'حيوانات وطبيعة',
+        emcat_food: 'طعام وشراب',
+        emcat_travel: 'سفر وأماكن',
+        emcat_activities: 'أنشطة',
+        emcat_objects: 'أشياء',
+        emcat_symbols: 'رموز',
+        emcat_flags: 'أعلام'
     }
 };
 function getStrings(lang) {
@@ -295,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 quicktable template charmap | 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';
@@ -326,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'],
@@ -338,29 +456,200 @@ 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: [
+            '€', '£', '¥', '¢', '$', '₹', '₽', '₩', '₺', '₴', '₦', '฿', '₫', '₪', '﷼', '¤',
+            '₡', '₱', '₲', '₵', '₭', '₮', '₸', '₼', '₾', '₿'
+        ]
+    },
+    {
+        key: 'chcat_text',
+        chars: [
+            '§', '¶', '†', '‡', '•', '…', '′', '″', '‰', '‱', '–', '—', '―', '¡', '¿', '·',
+            '‹', '›', '«', '»', '“', '”', '‘', '’', '„', '‚', '¦', 'ª', 'º',
+            '‽', '※', '❝', '❞', '❮', '❯'
+        ]
+    },
+    {
+        key: 'chcat_math',
+        chars: [
+            '°', '±', '×', '÷', '≈', '≠', '≤', '≥', '∞', 'µ', '√', '∑', '∫', '∂', '∆', '∏',
+            'π', 'Ω', 'α', 'β', 'γ', 'δ', 'ε', 'θ', 'λ', 'σ', 'φ', 'ψ', 'ω',
+            '∈', '∉', '∪', '∩', '⊂', '⊃', '⊆', '⊇', '∀', '∃', '∅', '∝', '∴', '∵', '¬', '∧', '∨',
+            '½', '⅓', '¼', '¾', '⅔', '⅛', '⅜', '⅝', '⅞',
+            '¹', '²', '³', '⁴', '⁵', '⁶', '⁷', '⁸', '⁹', '⁰',
+            '₁', '₂', '₃', '₄', '₅', '₆', '₇', '₈', '₉', '₀'
+        ]
+    },
+    {
+        key: 'chcat_arrows',
+        chars: [
+            '←', '→', '↑', '↓', '↔', '↕', '⇐', '⇒', '⇑', '⇓', '⇔',
+            '↖', '↗', '↘', '↙', '↩', '↪', '↺', '↻',
+            '⤴', '⤵', '➜', '➝', '➞', '➟', '⇦', '⇨', '⇧', '⇩'
+        ]
+    },
+    {
+        key: 'chcat_symbols',
+        chars: [
+            '©', '®', '™', '℠', '№', '℮',
+            '✓', '✔', '✗', '✘',
+            '★', '☆', '✦', '✪',
+            '♠', '♣', '♥', '♦',
+            '♪', '♫', '♬',
+            '☀', '☁', '☂', '☃', '☾',
+            '☹', '☺', '☻',
+            '✉', '✂', '✎', '✏',
+            '☎', '☏', '⌛', '⌚',
+            '☞', '☜', '☝', '☟'
+        ]
+    },
+    {
+        key: 'chcat_latin',
+        chars: [
+            'À', 'Á', 'Â', 'Ã', 'Ä', 'Å', 'Æ', 'Ç', 'È', 'É', 'Ê', 'Ë', 'Ì', 'Í', 'Î', 'Ï',
+            'Ð', 'Ñ', 'Ò', 'Ó', 'Ô', 'Õ', 'Ö', 'Ø', 'Ù', 'Ú', 'Û', 'Ü', 'Ý', 'Þ', 'ß',
+            'à', 'á', 'â', 'ã', 'ä', 'å', 'æ', 'ç', 'è', 'é', 'ê', 'ë', 'ì', 'í', 'î', 'ï',
+            'ð', 'ñ', 'ò', 'ó', 'ô', 'õ', 'ö', 'ø', 'ù', 'ú', 'û', 'ü', 'ý', 'þ', 'ÿ',
+            'Œ', 'œ', 'Š', 'š', 'Ž', 'ž', 'Ł', 'ł'
+        ]
+    },
+    {
+        key: 'chcat_arabic',
+        chars: [
+            '؟', '،', '؛', '٪', '٭', 'ـ',
+            '٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩',
+            '﴾', '﴿', '۞', '؎',
+            'ء', 'آ', 'أ', 'ؤ', 'إ', 'ئ', 'ى', 'ة'
+        ]
+    }
+];
+/** Emoji map for the emoji picker — same two-pane dialog as the character map. */
+const EMOJI_CATEGORIES = [
+    {
+        key: 'emcat_smileys',
+        chars: [
+            '😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣', '😊', '😇', '🙂', '🙃', '😉', '😌', '😍', '🥰',
+            '😘', '😋', '😛', '😜', '🤪', '🤨', '🧐', '🤓', '😎', '🥳', '😏', '😒', '😞', '😔', '😟', '😕',
+            '🙁', '😣', '😫', '😩', '🥺', '😢', '😭', '😤', '😠', '😡', '🤯', '😳', '🥵', '🥶', '😱', '😨',
+            '😥', '🤗', '🤔', '🤭', '🤫', '😐', '😑', '😬', '🙄', '😯', '😴', '😪', '😷', '🤒', '🤕', '🤢',
+            '🤧', '😈', '💀', '👻', '👽', '🤖', '💩', '😺', '😸', '😹', '😻', '🙀'
+        ]
+    },
+    {
+        key: 'emcat_people',
+        chars: [
+            '👋', '🤚', '✋', '🖖', '👌', '🤏', '✌', '🤞', '🤟', '🤘', '🤙', '👈', '👉', '👆', '👇', '☝',
+            '👍', '👎', '✊', '👊', '👏', '🙌', '👐', '🤲', '🤝', '🙏', '💪', '✍', '💅', '🤳', '👂', '👃',
+            '👀', '👁', '🧠', '👶', '🧒', '👦', '👧', '🧑', '👨', '👩', '🧓', '👴', '👵', '👮', '👷', '💂',
+            '🕵', '👸', '🤴', '👰', '🤵', '🤰', '👼', '🎅', '🦸', '🦹', '🧙', '🧚', '🧛', '🧟', '💃', '🕺',
+            '🚶', '🏃', '🧘'
+        ]
+    },
+    {
+        key: 'emcat_animals',
+        chars: [
+            '🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼', '🐨', '🐯', '🦁', '🐮', '🐷', '🐸', '🐵', '🐔',
+            '🐧', '🐦', '🐤', '🦆', '🦅', '🦉', '🐺', '🐗', '🐴', '🦄', '🐝', '🐛', '🦋', '🐌', '🐞', '🐢',
+            '🐍', '🦎', '🦖', '🐙', '🦑', '🦀', '🐠', '🐟', '🐬', '🐳', '🦈', '🐊', '🐅', '🦓', '🦍', '🐘',
+            '🦏', '🐪', '🦒', '🦘', '🐄', '🐎', '🐖', '🐑', '🐐', '🦌', '🐕', '🐈', '🐓', '🦃', '🦚', '🦜',
+            '🦢', '🕊', '🐇', '🦔', '🌵', '🌲', '🌴', '🌱', '🌿', '☘', '🍀', '🍁', '🌸', '🌺', '🌻', '🌹',
+            '🌷', '💐'
+        ]
+    },
+    {
+        key: 'emcat_food',
+        chars: [
+            '🍏', '🍎', '🍐', '🍊', '🍋', '🍌', '🍉', '🍇', '🍓', '🍈', '🍒', '🍑', '🥭', '🍍', '🥥', '🥝',
+            '🍅', '🍆', '🥑', '🥦', '🥒', '🌶', '🌽', '🥕', '🥔', '🥐', '🍞', '🥖', '🥨', '🧀', '🥚', '🍳',
+            '🥞', '🥓', '🥩', '🍗', '🍖', '🌭', '🍔', '🍟', '🍕', '🥪', '🌮', '🌯', '🥗', '🍝', '🍜', '🍲',
+            '🍛', '🍣', '🍱', '🥟', '🍤', '🍚', '🍧', '🍨', '🍦', '🥧', '🧁', '🍰', '🎂', '🍮', '🍭', '🍬',
+            '🍫', '🍿', '🍩', '🍪', '🥜', '🍯', '🥛', '☕', '🍵', '🥤', '🍺', '🥂', '🍷', '🍸', '🍹'
+        ]
+    },
+    {
+        key: 'emcat_travel',
+        chars: [
+            '🚗', '🚕', '🚙', '🚌', '🏎', '🚓', '🚑', '🚒', '🚚', '🚜', '🛵', '🏍', '🚲', '🛴', '🚔', '🚃',
+            '🚄', '🚅', '🚂', '🚆', '🚇', '🚉', '✈', '🛫', '🛬', '💺', '🚁', '🚀', '🛸', '🚢', '⛵', '🚤',
+            '⚓', '⛽', '🚧', '🗺', '🗿', '🗽', '🗼', '🏰', '🏯', '🎡', '🎢', '🎠', '⛲', '🏖', '🏝', '🌋',
+            '⛰', '🏔', '🗻', '🏕', '⛺', '🏠', '🏡', '🏢', '🏬', '🏥', '🏦', '🏨', '🏪', '🏫', '💒', '⛪',
+            '🕌', '🕍', '🕋', '⛩', '🌅', '🌄', '🌇', '🌆', '🌃', '🌉', '🌌', '🌠'
+        ]
+    },
+    {
+        key: 'emcat_activities',
+        chars: [
+            '⚽', '🏀', '🏈', '⚾', '🎾', '🏐', '🏉', '🎱', '🏓', '🏸', '🏒', '🏑', '🏏', '⛳', '🏹', '🎣',
+            '🥊', '🥋', '⛸', '🎿', '⛷', '🏂', '🏋', '🤸', '⛹', '🤺', '🏇', '🧗', '🏄', '🏊', '🚣', '🚵',
+            '🚴', '🏆', '🥇', '🥈', '🥉', '🏅', '🎖', '🎫', '🎪', '🤹', '🎭', '🎨', '🎬', '🎤', '🎧', '🎼',
+            '🎹', '🥁', '🎷', '🎺', '🎸', '🎻', '🎲', '🎯', '🎳', '🎮', '🎰', '🧩'
+        ]
+    },
+    {
+        key: 'emcat_objects',
+        chars: [
+            '⌚', '📱', '💻', '⌨', '🖥', '🖨', '🖱', '🕹', '💽', '💾', '💿', '📀', '📷', '📸', '📹', '🎥',
+            '📞', '☎', '📺', '📻', '🎙', '⏱', '⏰', '⌛', '⏳', '📡', '🔋', '🔌', '💡', '🔦', '🕯', '💸',
+            '💵', '💰', '💳', '💎', '⚖', '🔧', '🔨', '⚒', '🛠', '⛏', '🔩', '⚙', '🧲', '🔫', '💣', '🔪',
+            '🛡', '🔮', '🧿', '🔭', '🔬', '💊', '💉', '🌡', '🧬', '🧪', '🧹', '🧺', '🛁', '🔑', '🗝', '🚪',
+            '🛋', '🛏', '🧸', '🖼', '🛍', '🛒', '🎁', '🎈', '🎀', '🎊', '🎉', '✉', '📩', '📦', '📜', '📄',
+            '📊', '📈', '📉', '📅', '📋', '📁', '📰', '📓', '📚', '📖', '🔖', '🔗', '📎', '📐', '📏', '📌',
+            '📍', '✂', '🖊', '✒', '🖌', '🖍', '📝', '✏', '🔍', '🔒', '🔓'
+        ]
+    },
+    {
+        key: 'emcat_symbols',
+        chars: [
+            '❤', '🧡', '💛', '💚', '💙', '💜', '🖤', '💔', '❣', '💕', '💞', '💓', '💗', '💖', '💘', '💝',
+            '☮', '✝', '☪', '🕉', '☸', '✡', '☯', '♈', '♉', '♊', '♋', '♌', '♍', '♎', '♏', '♐',
+            '♑', '♒', '♓', '⚛', '❌', '⭕', '🛑', '⛔', '🚫', '💯', '💢', '⚠', '🚸', '🔱', '⚜', '🔰',
+            '♻', '✅', '❇', '✳', '❎', '🌐', '💠', '🌀', '💤', '🏧', '♿', '🚭', '❗', '❕', '❓', '❔',
+            '‼', '⁉', '💲', '🔅', '🔆', '〽', 'ℹ', '🆗', '🆕', '🆓', '🆒', '🆙', '🈯', '🈚'
+        ]
+    },
+    {
+        key: 'emcat_flags',
+        chars: [
+            '🏁', '🚩', '🎌', '🏴', '🏳', '🇦🇪', '🇸🇦', '🇶🇦', '🇰🇼', '🇧🇭', '🇴🇲', '🇪🇬', '🇯🇴', '🇱🇧', '🇮🇳', '🇵🇰',
+            '🇺🇸', '🇬🇧', '🇨🇦', '🇦🇺', '🇫🇷', '🇩🇪', '🇮🇹', '🇪🇸', '🇵🇹', '🇳🇱', '🇧🇪', '🇨🇭', '🇸🇪', '🇳🇴', '🇩🇰', '🇫🇮',
+            '🇮🇪', '🇬🇷', '🇹🇷', '🇷🇺', '🇺🇦', '🇵🇱', '🇯🇵', '🇰🇷', '🇨🇳', '🇸🇬', '🇲🇾', '🇮🇩', '🇹🇭', '🇵🇭', '🇻🇳', '🇧🇷',
+            '🇦🇷', '🇲🇽', '🇿🇦', '🇳🇬', '🇰🇪', '🇲🇦'
+        ]
+    }
 ];
 const CHARS = [
     '©',
@@ -503,7 +792,17 @@ const IC = {
     ol_alpha: LIST(['a', 'b', 'c']),
     ol_roman: LIST(['i', 'ii', 'iii'], 6.5),
     ol_alphau: LIST(['A', 'B', 'C']),
-    ol_romanu: LIST(['I', 'II', 'III'], 6.5)
+    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"/>'),
+    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>`;
 
@@ -1394,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;
@@ -1432,7 +1807,22 @@ class FableEditor {
     imageUploadHandler;
     onImageUploadError;
     contentStyle;
+    vidInput;
+    /* a <video> element or a .video-embed iframe wrapper — both share the
+       same selection outline + align/delete context toolbar */
+    vidActive = null;
+    vidCtx = null;
+    vidHideTimer = null;
+    vphActive = null;
+    vphCtx = null;
+    vphUploadTarget = null;
+    videoUploadHandler;
+    onVideoUploadError;
     selCtx = null;
+    tbrMore = null;
+    tbrExpanded = false;
+    codeActive = null;
+    codeCtx = null;
     tplActive = null;
     tplCtx = null;
     docInput;
@@ -1456,11 +1846,15 @@ class FableEditor {
             readonly: options.readonly ?? false,
             draftKey: options.draftKey ?? (typeof location !== 'undefined' ? location.pathname : 'default'),
             fontFamilyFormats: options.fontFamilyFormats ?? FONTS,
-            imageFileTypes: options.imageFileTypes ?? ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/bmp', 'image/webp']
+            imageFileTypes: options.imageFileTypes ?? ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/bmp', 'image/webp'],
+            videoFileTypes: options.videoFileTypes ?? ['video/mp4', 'video/webm', 'video/ogg']
         };
         this.imageUploadHandler = options.imageUploadHandler;
         this.onImageUploadError = options.onImageUploadError;
+        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();
@@ -1519,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');
@@ -1526,12 +1921,29 @@ class FableEditor {
         this.imgInput.accept = this.options.imageFileTypes.join(',');
         this.imgInput.style.display = 'none';
         target.appendChild(this.imgInput);
+        this.vidInput = document.createElement('input');
+        this.vidInput.type = 'file';
+        this.vidInput.accept = this.options.videoFileTypes.join(',');
+        this.vidInput.style.display = 'none';
+        target.appendChild(this.vidInput);
         this.docInput = document.createElement('input');
         this.docInput.type = 'file';
         this.docInput.accept = '.docx,application/vnd.openxmlformats-officedocument.wordprocessingml.document';
         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
@@ -1594,6 +2006,9 @@ class FableEditor {
             this.positionImageHandles();
             this.positionImgPhCtx();
             this.positionTplCtx();
+            this.positionVphCtx();
+            this.positionVidCtx();
+            this.positionCodeCtx();
         });
         this.on(this.ed, 'keydown', (e) => {
             if (e.altKey && e.key === '0') {
@@ -1604,18 +2019,32 @@ class FableEditor {
                 e.preventDefault();
                 this.removeImgPlaceholder();
             }
+            if ((e.key === 'Delete' || e.key === 'Backspace') && this.vphActive) {
+                e.preventDefault();
+                this.removeVphPlaceholder();
+            }
+            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) => {
             /* content drops stay blocked (powerpaste_block_drop) — only an
-               image file dropped onto an upload placeholder is consumed */
+               image/video file dropped onto its matching upload placeholder is consumed */
             e.preventDefault();
-            const ph = e.target.closest?.('.img-ph');
-            if (!ph || !this.ed.contains(ph) || this.options.readonly)
+            const target = e.target;
+            const ph = target.closest?.('.img-ph:not(.vid-ph)');
+            if (ph && this.ed.contains(ph) && !this.options.readonly) {
+                const file = Array.from(e.dataTransfer?.files || []).find((f) => f.type.startsWith('image/'));
+                if (file)
+                    this.readImageFileInto(file, ph);
                 return;
-            const file = Array.from(e.dataTransfer?.files || []).find((f) => f.type.startsWith('image/'));
-            if (file)
-                this.readImageFileInto(file, ph);
+            }
+            const vph = target.closest?.('.vid-ph');
+            if (vph && this.ed.contains(vph) && !this.options.readonly) {
+                const file = Array.from(e.dataTransfer?.files || []).find((f) => f.type.startsWith('video/'));
+                if (file)
+                    this.readVideoFileInto(file, vph);
+            }
         });
         this.on(this.ed, 'dragover', (e) => e.preventDefault());
         this.on(this.ed, 'mousedown', (e) => {
@@ -1625,7 +2054,7 @@ class FableEditor {
                 this.selectTableForResize(table);
             else
                 this.clearTableHandles();
-            const ph = target.closest?.('.img-ph');
+            const ph = target.closest?.('.img-ph:not(.vid-ph)');
             if (ph && this.ed.contains(ph) && !this.options.readonly) {
                 e.preventDefault();
                 this.ed.focus();
@@ -1634,11 +2063,28 @@ class FableEditor {
             else {
                 this.clearImgPlaceholderSel();
             }
+            const vph = target.closest?.('.vid-ph');
+            if (vph && this.ed.contains(vph) && !this.options.readonly) {
+                e.preventDefault();
+                this.ed.focus();
+                this.selectVphPlaceholder(vph);
+            }
+            else {
+                this.clearVphPlaceholderSel();
+            }
             const tpl = target.closest?.('.tpl');
             if (tpl && this.ed.contains(tpl) && !this.options.readonly)
                 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();
@@ -1647,6 +2093,14 @@ class FableEditor {
             else {
                 this.clearImageHandles();
             }
+            const vid = target.closest?.('video, .video-embed');
+            if (vid && this.ed.contains(vid) && !this.options.readonly) {
+                e.preventDefault();
+                this.selectVideo(vid);
+            }
+            else {
+                this.clearVidHandles();
+            }
         });
         this.on(this.ed, 'mouseover', (e) => {
             if (this.options.readonly)
@@ -1674,12 +2128,18 @@ class FableEditor {
             this.positionImageHandles();
             this.positionImgPhCtx();
             this.positionTplCtx();
+            this.positionVphCtx();
+            this.positionVidCtx();
+            this.positionCodeCtx();
         });
         this.onWin('scroll', () => {
             this.positionTableHandles();
             this.positionImageHandles();
             this.positionImgPhCtx();
             this.positionTplCtx();
+            this.positionVphCtx();
+            this.positionVidCtx();
+            this.positionCodeCtx();
             this.repositionSelToolbar();
         }, true);
         this.onWin('resize', () => {
@@ -1687,8 +2147,19 @@ class FableEditor {
             this.positionImageHandles();
             this.positionImgPhCtx();
             this.positionTplCtx();
+            this.positionVphCtx();
+            this.positionVidCtx();
+            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)
@@ -1707,6 +2178,24 @@ class FableEditor {
             };
             fr.readAsDataURL(file);
         });
+        this.on(this.vidInput, 'change', () => {
+            const file = this.vidInput.files?.[0];
+            if (!file)
+                return;
+            const vph = this.vphUploadTarget;
+            this.vphUploadTarget = null;
+            if (vph && this.ed.contains(vph)) {
+                this.readVideoFileInto(file, vph);
+                return;
+            }
+            const fr = new FileReader();
+            fr.onload = () => {
+                this.restoreSel();
+                document.execCommand('insertHTML', false, `<video controls src="${fr.result}" title="${file.name.replace(/"/g, '')}"></video>`);
+                this.onChange();
+            };
+            fr.readAsDataURL(file);
+        });
         this.on(this.docInput, 'change', () => {
             const file = this.docInput.files?.[0];
             if (!file)
@@ -1723,6 +2212,9 @@ class FableEditor {
                 (this.phCtx && this.phCtx.contains(e.target)) ||
                 (this.tplCtx && this.tplCtx.contains(e.target)) ||
                 (this.selCtx && this.selCtx.contains(e.target)) ||
+                (this.vphCtx && this.vphCtx.contains(e.target)) ||
+                (this.vidCtx && this.vidCtx.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;
@@ -1730,6 +2222,9 @@ class FableEditor {
             this.clearImageHandles();
             this.clearImgPlaceholderSel();
             this.clearTplSel();
+            this.clearVphPlaceholderSel();
+            this.clearVidHandles();
+            this.clearCodeSel();
             this.clearSelToolbar();
         });
     }
@@ -1756,6 +2251,9 @@ class FableEditor {
         this.clearImageHandles();
         this.clearImgPlaceholderSel();
         this.clearTplSel();
+        this.clearVphPlaceholderSel();
+        this.clearVidHandles();
+        this.clearCodeSel();
         this.clearSelToolbar();
         this.onChange();
     }
@@ -1818,6 +2316,9 @@ class FableEditor {
         this.clearImageHandles();
         this.clearImgPlaceholderSel();
         this.clearTplSel();
+        this.clearVphPlaceholderSel();
+        this.clearVidHandles();
+        this.clearCodeSel();
         this.clearSelToolbar();
         this.listeners.forEach((fn) => fn());
         this.listeners = [];
@@ -1825,6 +2326,8 @@ class FableEditor {
             this.shell.parentNode.removeChild(this.shell);
         if (this.imgInput && this.imgInput.parentNode)
             this.imgInput.parentNode.removeChild(this.imgInput);
+        if (this.vidInput && this.vidInput.parentNode)
+            this.vidInput.parentNode.removeChild(this.vidInput);
         if (this.docInput && this.docInput.parentNode)
             this.docInput.parentNode.removeChild(this.docInput);
         this.contentStyleEl = null;
@@ -2015,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);
@@ -2204,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') {
@@ -2413,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();
@@ -2453,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;
@@ -2626,7 +3151,7 @@ class FableEditor {
      *  (the quick color chips); everything else yields one. */
     buildToolbarRegistry() {
         const tableBtn = this.tbtn(IC.tableic, this.t('quicktable'), () => this.tableGrid(tableBtn));
-        return {
+        const registry = {
             undo: () => this.tbtn(IC.undo, this.t('undo'), () => this.exec('undo')),
             redo: () => this.tbtn(IC.redo, this.t('redo'), () => this.exec('redo')),
             preview: () => this.tbtn(IC.prevw, this.t('preview'), () => this.previewDlg()),
@@ -2653,20 +3178,32 @@ 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()),
             quicktable: () => tableBtn,
             template: () => this.menuTbtn(IC.templateic, this.t('template'), (b) => this.templateMenu(b)),
             charmap: () => this.tbtn(IC.charic, this.t('charmap'), () => this.charMap()),
+            emoji: () => this.tbtn(IC.emojiic, this.t('emoji'), () => this.emojiMap()),
             fullscreen: () => this.tbtn(IC.fullscreen, this.t('fullscreen'), () => this.toggleFullscreen(), 'fullscreen'),
             sourcecode: () => this.tbtn(IC.srcic, this.t('sourcecode'), () => this.sourceDlg())
         };
+        /* TinyMCE-compatible aliases so common TinyMCE toolbar strings
+           (e.g. "undo redo | styles | ... | link image media") work as-is */
+        registry.styles = registry.blocks;
+        registry.image = registry.quickimage;
+        registry.media = registry.quickvideo;
+        registry.table = registry.quicktable;
+        return registry;
     }
     buildToolbar() {
         this.toolbar.innerHTML = '';
@@ -2689,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) {
@@ -2733,11 +3303,14 @@ class FableEditor {
             insert: [
                 this.mItem('link', IC.link, () => this.linkDlg()),
                 this.mItem('image', IC.image, () => this.insertImagePlaceholder()),
+                this.mItem('video', IC.video, () => this.videoDlg()),
                 { 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')),
                 '|',
                 this.mItem('charmap', IC.charic, () => this.charMap()),
+                this.mItem('emoji', IC.emojiic, () => this.emojiMap()),
                 this.mItem('datetime', IC.dateic, () => this.exec('insertText', new Date().toLocaleString(this.lang === 'ar' ? 'ar-AE' : 'en-GB'))),
                 '|',
                 {
@@ -2758,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')),
@@ -2771,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'),
@@ -2780,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) }
                     ]
                 },
@@ -2790,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) }
                     ]
                 },
@@ -2900,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;
@@ -3308,22 +3978,53 @@ class FableEditor {
             body.appendChild(box);
         });
     }
-    charMap() {
-        this.dialog(this.t('charmap').replace('…', ''), (body) => {
-            const g = document.createElement('div');
-            g.className = 'chgrid';
-            CHARS.forEach((ch) => {
+    /** Two-pane picker shared by the special-character map and the emoji map:
+     *  fixed category tabs on the left, the active category's glyphs on the right. */
+    glyphPickerDlg(title, cats, emoji) {
+        this.saveSel();
+        this.dialog(title, (body) => {
+            const wrap = document.createElement('div');
+            wrap.className = 'chmap';
+            const tabs = document.createElement('div');
+            tabs.className = 'chtabs';
+            const panel = document.createElement('div');
+            panel.className = 'chpanel';
+            const grid = document.createElement('div');
+            grid.className = 'chgrid' + (emoji ? ' emgrid' : '');
+            panel.appendChild(grid);
+            const show = (i) => {
+                tabs.querySelectorAll('button').forEach((b, bi) => b.classList.toggle('on', bi === i));
+                grid.innerHTML = '';
+                cats[i].chars.forEach((ch) => {
+                    const b = document.createElement('button');
+                    b.type = 'button';
+                    b.textContent = ch;
+                    b.onclick = () => {
+                        this.closeDlg();
+                        this.exec('insertText', ch);
+                    };
+                    grid.appendChild(b);
+                });
+                panel.scrollTop = 0;
+            };
+            cats.forEach((c, i) => {
                 const b = document.createElement('button');
-                b.textContent = ch;
-                b.onclick = () => {
-                    this.closeDlg();
-                    this.exec('insertText', ch);
-                };
-                g.appendChild(b);
+                b.type = 'button';
+                b.textContent = this.t(c.key);
+                b.addEventListener('click', () => show(i));
+                tabs.appendChild(b);
             });
-            body.appendChild(g);
+            wrap.append(tabs, panel);
+            body.appendChild(wrap);
+            show(0);
         });
     }
+    charMap() {
+        this.glyphPickerDlg(this.t('charmap').replace('…', ''), CHAR_CATEGORIES, false);
+    }
+    emojiMap() {
+        this.glyphPickerDlg(this.t('emoji').replace('…', ''), EMOJI_CATEGORIES, true);
+    }
     printDoc() {
         const w = window.open('', '_blank');
         if (!w)
@@ -3389,9 +4090,34 @@ class FableEditor {
         el.append(this.ctxBtn(IC.uploadic, this.t('uploadimg'), () => {
             this.phUploadTarget = this.phActive;
             this.pickImage();
-        }), this.ctxBtn(IC.link, this.t('imagelink'), () => this.renderPhCtxUrlInput()), this.ctxSep(), this.ctxBtn(IC.trash, this.t('deleteimg'), () => this.removeImgPlaceholder()));
+        }), this.ctxBtn(IC.link, this.t('imagelink'), () => this.renderPhCtxUrlInput()));
+        /* a template's media slot is image-first, but can host a video instead */
+        if (this.phActive?.closest('.tpl-media')) {
+            el.append(this.ctxBtn(IC.video, this.t('quickvideo'), () => this.swapPlaceholderKind('video')));
+        }
+        el.append(this.ctxSep(), this.ctxBtn(IC.trash, this.t('deleteimg'), () => this.removeImgPlaceholder()));
         this.positionImgPhCtx();
     }
+    /** Swaps a template slot's placeholder between image and video kinds, so the
+     *  same media slot can be filled with either. */
+    swapPlaceholderKind(to) {
+        const ph = to === 'video' ? this.phActive : this.vphActive;
+        if (!ph)
+            return;
+        const tmp = document.createElement('div');
+        tmp.innerHTML = to === 'video' ? this.vidPhHTML() : this.imgPhHTML();
+        const next = tmp.firstElementChild;
+        if (to === 'video')
+            this.clearImgPlaceholderSel();
+        else
+            this.clearVphPlaceholderSel();
+        ph.replaceWith(next);
+        if (to === 'video')
+            this.selectVphPlaceholder(next);
+        else
+            this.selectImgPlaceholder(next);
+        this.onChange();
+    }
     renderPhCtxUrlInput() {
         const el = this.phCtx;
         if (!el)
@@ -3514,6 +4240,741 @@ class FableEditor {
         this.phCtx.style.left = cx + 'px';
         this.phCtx.style.top = cy + 'px';
     }
+    /* ---------------------------------------------------------- video upload placeholder */
+    pickVideo() {
+        this.vidInput.value = '';
+        this.vidInput.click();
+    }
+    vidPhHTML(id) {
+        return `<div class="img-ph vid-ph"${id ? ` id="${id}"` : ''} contenteditable="false">${IC.video}<span>${this.t('dropvideo')}</span></div>`;
+    }
+    insertVideoPlaceholder() {
+        this.restoreSel();
+        const id = 'vid-ph-' + Date.now().toString(36) + Math.random().toString(36).slice(2, 6);
+        document.execCommand('insertHTML', false, this.vidPhHTML(id));
+        const ph = this.ed.querySelector('#' + id);
+        if (ph) {
+            ph.removeAttribute('id');
+            this.selectVphPlaceholder(ph);
+        }
+        this.onChange();
+    }
+    clearVphPlaceholderSel() {
+        this.vphCtx?.remove();
+        this.vphCtx = null;
+        this.vphActive?.classList.remove('active');
+        this.vphActive = null;
+    }
+    removeVphPlaceholder() {
+        const ph = this.vphActive;
+        if (!ph)
+            return;
+        this.clearVphPlaceholderSel();
+        /* like the image variant: a placeholder inside a template block IS the
+           media slot — deleting it drops the slot, leaving a text-only block */
+        (ph.closest('.tpl-media') || ph).remove();
+        this.refreshState();
+        this.onChange();
+    }
+    selectVphPlaceholder(ph) {
+        if (this.vphActive === ph)
+            return;
+        this.clearVphPlaceholderSel();
+        this.vphActive = ph;
+        ph.classList.add('active');
+        this.vphCtx = document.createElement('div');
+        this.vphCtx.className = 'imgctx img-ph-ctx';
+        this.vphCtx.dir = this.dir();
+        document.body.appendChild(this.vphCtx);
+        this.renderVphCtxButtons();
+    }
+    renderVphCtxButtons() {
+        const el = this.vphCtx;
+        if (!el)
+            return;
+        el.innerHTML = '';
+        el.append(this.ctxBtn(IC.uploadic, this.t('uploadvideo'), () => {
+            this.vphUploadTarget = this.vphActive;
+            this.pickVideo();
+        }), this.ctxBtn(IC.link, this.t('videolink'), () => this.renderVphCtxUrlInput()));
+        /* inside a template slot, offer switching the slot back to an image */
+        if (this.vphActive?.closest('.tpl-media')) {
+            el.append(this.ctxBtn(IC.image, this.t('quickimage'), () => this.swapPlaceholderKind('image')));
+        }
+        el.append(this.ctxSep(), this.ctxBtn(IC.trash, this.t('deletevideo'), () => this.removeVphPlaceholder()));
+        this.positionVphCtx();
+    }
+    renderVphCtxUrlInput() {
+        const el = this.vphCtx;
+        if (!el)
+            return;
+        el.innerHTML = '';
+        const inp = document.createElement('input');
+        inp.type = 'url';
+        inp.className = 'urlinp';
+        inp.placeholder = this.t('videourlph');
+        const ok = document.createElement('button');
+        ok.type = 'button';
+        ok.className = 'txtbtn';
+        ok.textContent = this.t('insertvideo');
+        const submit = () => {
+            const url = inp.value.trim();
+            const ph = this.vphActive;
+            if (!ph)
+                return;
+            if (!/^(https?:|data:video\/|blob:)/i.test(url)) {
+                inp.classList.add('err');
+                inp.focus();
+                return;
+            }
+            /* a page URL from a known video host can't play in a <video> tag —
+               swap in the host's iframe player instead of probing it */
+            const embed = this.videoEmbedUrl(url);
+            if (embed) {
+                this.replacePlaceholderWithEmbed(ph, embed);
+                return;
+            }
+            ok.disabled = true;
+            inp.disabled = true;
+            /* only place the video once its metadata actually loads, so the user
+               gets a working preview instead of a broken player */
+            const probe = document.createElement('video');
+            probe.preload = 'metadata';
+            probe.onloadedmetadata = () => this.replacePlaceholderWithVideo(ph, url, '');
+            probe.onerror = () => {
+                ok.disabled = false;
+                inp.disabled = false;
+                inp.classList.add('err');
+                inp.focus();
+            };
+            probe.src = url;
+        };
+        ok.addEventListener('click', submit);
+        inp.addEventListener('input', () => inp.classList.remove('err'));
+        inp.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                submit();
+            }
+            else if (e.key === 'Escape') {
+                e.stopPropagation();
+                this.renderVphCtxButtons();
+            }
+        });
+        el.append(inp, ok);
+        this.positionVphCtx();
+        inp.focus();
+    }
+    readVideoFileInto(file, ph) {
+        if (ph.classList.contains('uploading'))
+            return;
+        if (this.videoUploadHandler) {
+            this.uploadVideoFile(file, ph);
+            return;
+        }
+        const fr = new FileReader();
+        fr.onload = () => {
+            if (this.ed.contains(ph))
+                this.replacePlaceholderWithVideo(ph, fr.result, file.name.replace(/"/g, ''));
+        };
+        fr.readAsDataURL(file);
+    }
+    /** Runs the host-supplied videoUploadHandler instead of inlining base64,
+     *  so apps can route the file to S3 / Azure Blob / their own server. */
+    uploadVideoFile(file, ph) {
+        const title = file.name.replace(/"/g, '');
+        ph.classList.remove('upload-error');
+        ph.classList.add('uploading');
+        const span = ph.querySelector('span');
+        if (span)
+            span.textContent = this.t('uploading');
+        this.videoUploadHandler(file)
+            .then((url) => {
+            if (!this.ed.contains(ph))
+                return;
+            this.replacePlaceholderWithVideo(ph, url, title);
+        })
+            .catch((err) => {
+            if (!this.ed.contains(ph))
+                return;
+            ph.classList.remove('uploading');
+            ph.classList.add('upload-error');
+            if (span)
+                span.textContent = this.t('uploadfailed');
+            this.onVideoUploadError?.(err, file);
+        });
+    }
+    replacePlaceholderWithVideo(ph, src, title) {
+        const vid = document.createElement('video');
+        vid.controls = true;
+        vid.src = src;
+        if (title)
+            vid.title = title;
+        ph.replaceWith(vid);
+        if (this.vphActive === ph)
+            this.clearVphPlaceholderSel();
+        this.refreshState();
+        this.onChange();
+    }
+    /** Swaps a video placeholder for a hosted player iframe (YouTube & co.). */
+    replacePlaceholderWithEmbed(ph, embedUrl) {
+        const tmp = document.createElement('div');
+        tmp.innerHTML = this.videoEmbedHTML(embedUrl);
+        ph.replaceWith(tmp.firstElementChild);
+        if (this.vphActive === ph)
+            this.clearVphPlaceholderSel();
+        this.refreshState();
+        this.onChange();
+    }
+    positionVphCtx() {
+        if (this.vphActive && !document.body.contains(this.vphActive)) {
+            this.clearVphPlaceholderSel();
+            return;
+        }
+        if (!this.vphActive || !this.vphCtx)
+            return;
+        const r = this.vphActive.getBoundingClientRect();
+        const cw = this.vphCtx.offsetWidth;
+        const ch = this.vphCtx.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.bottom + scrollY + 8;
+        if (r.bottom + 8 + ch > innerHeight - 4)
+            cy = Math.max(this.ctxMinTop(), r.top + scrollY - ch - 8);
+        this.vphCtx.style.left = cx + 'px';
+        this.vphCtx.style.top = cy + 'px';
+    }
+    /* ---------------------------------------------------------- video toolbar (post-insert) */
+    cancelVidHide() {
+        if (this.vidHideTimer != null) {
+            window.clearTimeout(this.vidHideTimer);
+            this.vidHideTimer = null;
+        }
+    }
+    clearVidHandles() {
+        this.cancelVidHide();
+        this.vidCtx?.remove();
+        this.vidCtx = null;
+        this.vidActive?.classList.remove('vid-selected');
+        this.vidActive = null;
+    }
+    selectVideo(vid) {
+        if (this.vidActive === vid)
+            return;
+        this.clearVidHandles();
+        this.vidActive = vid;
+        vid.classList.add('vid-selected');
+        this.vidCtx = this.buildVideoCtxToolbar(vid);
+        this.positionVidCtx();
+    }
+    buildVideoCtxToolbar(vid) {
+        const el = document.createElement('div');
+        el.className = 'imgctx';
+        el.dir = this.dir();
+        const rebuild = () => {
+            const rebuilt = this.buildVideoCtxToolbar(vid);
+            this.vidCtx?.replaceWith(rebuilt);
+            this.vidCtx = rebuilt;
+            this.positionVidCtx();
+        };
+        const align = (a) => {
+            this.setVideoAlign(vid, a);
+            rebuild();
+        };
+        const isLeft = vid.style.float === 'left';
+        const isRight = vid.style.float === 'right';
+        const isCenter = !isLeft && !isRight && vid.style.marginLeft === 'auto' && vid.style.marginRight === 'auto';
+        const mkBtn = (icon, tip, on, fn) => {
+            const b = this.ctxBtn(icon, tip, fn);
+            b.classList.toggle('on', on);
+            return b;
+        };
+        el.append(mkBtn(IC.alignleft, this.t('alignleft'), isLeft, () => align('left')), mkBtn(IC.aligncenter, this.t('aligncenter'), isCenter, () => align('center')), mkBtn(IC.alignright, this.t('alignright'), isRight, () => align('right')), this.ctxSep(), mkBtn(IC.trash, this.t('deletevideo'), false, () => {
+            vid.remove();
+            this.clearVidHandles();
+            this.onChange();
+        }));
+        el.addEventListener('mousedown', (e) => e.preventDefault());
+        el.addEventListener('mouseenter', () => this.cancelVidHide());
+        el.addEventListener('mouseleave', () => {
+            this.cancelVidHide();
+            this.vidHideTimer = window.setTimeout(() => this.clearVidHandles(), 250);
+        });
+        document.body.appendChild(el);
+        return el;
+    }
+    setVideoAlign(vid, align) {
+        vid.style.float = '';
+        vid.style.display = '';
+        vid.style.marginLeft = '';
+        vid.style.marginRight = '';
+        vid.style.marginBottom = '';
+        if (align === 'left') {
+            vid.style.float = 'left';
+            vid.style.marginInlineEnd = '1em';
+            vid.style.marginBottom = '0.5em';
+        }
+        else if (align === 'right') {
+            vid.style.float = 'right';
+            vid.style.marginInlineStart = '1em';
+            vid.style.marginBottom = '0.5em';
+        }
+        else {
+            vid.style.display = 'block';
+            vid.style.marginLeft = 'auto';
+            vid.style.marginRight = 'auto';
+        }
+        this.onChange();
+    }
+    positionVidCtx() {
+        if (!this.vidActive || !document.body.contains(this.vidActive)) {
+            this.clearVidHandles();
+            return;
+        }
+        const r = this.vidActive.getBoundingClientRect();
+        if (!this.vidCtx)
+            return;
+        const cw = this.vidCtx.offsetWidth;
+        const ch = this.vidCtx.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.vidCtx.style.left = cx + 'px';
+        this.vidCtx.style.top = cy + 'px';
+    }
+    /* ---------------------------------------------------------- video dialog / embeds */
+    /** Maps a page URL from a known video host to its iframe player URL. Returns
+     *  null for anything else (e.g. direct .mp4 file URLs). */
+    videoEmbedUrl(url) {
+        let m = url.match(/^https?:\/\/(?:www\.|m\.)?youtube\.com\/watch\?(?:[^\s#]*[?&])?v=([\w-]{5,})/i);
+        if (!m)
+            m = url.match(/^https?:\/\/(?:www\.)?(?:youtu\.be|youtube\.com\/(?:embed|shorts|live))\/([\w-]{5,})/i);
+        if (m)
+            return 'https://www.youtube.com/embed/' + m[1];
+        m = url.match(/^https?:\/\/(?:www\.)?vimeo\.com\/(\d+)/i);
+        if (m)
+            return 'https://player.vimeo.com/video/' + m[1];
+        m = url.match(/^https?:\/\/(?:www\.)?dailymotion\.com\/video\/(\w+)/i);
+        if (m)
+            return 'https://www.dailymotion.com/embed/video/' + m[1];
+        return null;
+    }
+    videoEmbedHTML(src, w = 560, h = 314) {
+        return `<span class="video-embed" contenteditable="false"><iframe src="${src}" width="${w}" height="${h}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></span>`;
+    }
+    /** Insert/edit-video dialog with General (source/width/height), Embed (embed
+     *  code) and Advanced (alternative source, poster image) tabs. Hosted page
+     *  URLs (YouTube & co.) become iframe players; anything else becomes a
+     *  <video> tag. The General tab also offers the same upload path as before
+     *  (videoUploadHandler when configured, else inline base64). */
+    videoDlg() {
+        this.saveSel();
+        let srcInp;
+        let wInp;
+        let hInp;
+        let embedTa;
+        let altInp;
+        let posterInp;
+        const field = (labelKey, input) => {
+            const f = document.createElement('div');
+            f.className = 'dfield';
+            const l = document.createElement('label');
+            l.textContent = this.t(labelKey);
+            f.append(l, input);
+            return f;
+        };
+        const urlInput = () => {
+            const i = document.createElement('input');
+            i.type = 'url';
+            return i;
+        };
+        this.dialog(this.t('videodlgttl'), (body) => {
+            const tabs = document.createElement('div');
+            tabs.className = 'dtabs';
+            const panels = [];
+            const mkTab = (labelKey, build) => {
+                const b = document.createElement('button');
+                b.type = 'button';
+                b.textContent = this.t(labelKey);
+                const p = document.createElement('div');
+                p.className = 'dtabpanel';
+                build(p);
+                const i = panels.length;
+                panels.push(p);
+                b.addEventListener('click', () => show(i));
+                tabs.appendChild(b);
+            };
+            const show = (i) => {
+                tabs.querySelectorAll('button').forEach((x, xi) => x.classList.toggle('on', xi === i));
+                panels.forEach((x, xi) => (x.style.display = xi === i ? '' : 'none'));
+            };
+            mkTab('vidgeneral', (p) => {
+                srcInp = urlInput();
+                srcInp.placeholder = this.t('videourlph');
+                const srcRow = document.createElement('div');
+                srcRow.className = 'drow';
+                const upBtn = document.createElement('button');
+                upBtn.type = 'button';
+                upBtn.className = 'txtbtn';
+                upBtn.textContent = this.t('uploadvideo');
+                const file = document.createElement('input');
+                file.type = 'file';
+                file.accept = this.options.videoFileTypes.join(',');
+                file.style.display = 'none';
+                upBtn.addEventListener('click', () => {
+                    file.value = '';
+                    file.click();
+                });
+                file.addEventListener('change', () => {
+                    const f = file.files?.[0];
+                    if (!f)
+                        return;
+                    upBtn.disabled = true;
+                    upBtn.textContent = this.t('uploading');
+                    const done = (url) => {
+                        srcInp.value = url;
+                        upBtn.disabled = false;
+                        upBtn.textContent = this.t('uploadvideo');
+                    };
+                    if (this.videoUploadHandler) {
+                        this.videoUploadHandler(f)
+                            .then(done)
+                            .catch((err) => {
+                            upBtn.disabled = false;
+                            upBtn.textContent = this.t('uploadfailed');
+                            this.onVideoUploadError?.(err, f);
+                        });
+                    }
+                    else {
+                        const fr = new FileReader();
+                        fr.onload = () => done(fr.result);
+                        fr.readAsDataURL(f);
+                    }
+                });
+                srcRow.append(srcInp, upBtn, file);
+                srcInp.style.flex = '1';
+                p.appendChild(field('vidsource', srcRow));
+                const dims = document.createElement('div');
+                dims.className = 'drow';
+                wInp = document.createElement('input');
+                wInp.type = 'number';
+                wInp.value = '560';
+                hInp = document.createElement('input');
+                hInp.type = 'number';
+                hInp.value = '314';
+                dims.append(field('tblwidth', wInp), field('tblheight', hInp));
+                p.appendChild(dims);
+            });
+            mkTab('vidembed', (p) => {
+                const hint = document.createElement('p');
+                hint.textContent = this.t('vidembedhint');
+                hint.style.cssText = 'margin:0 0 8px;color:#556;font-size:13.5px';
+                embedTa = document.createElement('textarea');
+                embedTa.style.cssText = 'width:100%;box-sizing:border-box;height:160px';
+                p.append(hint, embedTa);
+            });
+            mkTab('vidadvanced', (p) => {
+                altInp = urlInput();
+                posterInp = urlInput();
+                p.append(field('vidaltsource', altInp), field('vidposter', posterInp));
+            });
+            const wrap = document.createElement('div');
+            wrap.className = 'dtabbody';
+            panels.forEach((p) => wrap.appendChild(p));
+            body.append(tabs, wrap);
+            show(0);
+            setTimeout(() => srcInp.focus(), 0);
+        }, [
+            { label: this.t('cancel'), action: () => this.closeDlg() },
+            {
+                label: this.t('save'),
+                primary: true,
+                action: () => {
+                    const embedCode = embedTa.value.trim();
+                    const src = srcInp.value.trim();
+                    const w = parseInt(wInp.value, 10) || 560;
+                    const h = parseInt(hInp.value, 10) || 314;
+                    this.closeDlg();
+                    if (!embedCode && !src)
+                        return;
+                    this.restoreSel();
+                    if (embedCode) {
+                        document.execCommand('insertHTML', false, `<span class="video-embed" contenteditable="false">${embedCode}</span>`);
+                        this.onChange();
+                        return;
+                    }
+                    const embed = this.videoEmbedUrl(src);
+                    if (embed) {
+                        document.execCommand('insertHTML', false, this.videoEmbedHTML(embed, w, h));
+                    }
+                    else {
+                        const alt = altInp.value.trim();
+                        const poster = posterInp.value.trim();
+                        document.execCommand('insertHTML', false, `<video controls width="${w}" height="${h}"${poster ? ` poster="${this.escapeAttr(poster)}"` : ''}>` +
+                            `<source src="${this.escapeAttr(src)}">${alt ? `<source src="${this.escapeAttr(alt)}">` : ''}</video>`);
+                    }
+                    this.onChange();
+                }
+            }
+        ]);
+    }
+    escapeAttr(s) {
+        return s.replace(/&/g, '&amp;').replace(/"/g, '&quot;');
+    }
+    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 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);
+            }
+        }
+        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);
+        }
+        this.saveSel();
+        this.refreshState();
+        this.onChange();
+    }
+    /** 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('code, pre'))
+            return;
+        const before = (node.textContent || '').slice(0, sel.anchorOffset);
+        const m = before.match(/(?:^|[^`])`([^`]+)$/);
+        if (!m)
+            return;
+        const src = m[1];
+        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(after);
+        this.saveSel();
+        this.onChange();
+    }
+    /** 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();
+        let langDd;
+        let ta;
+        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.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.replace(/\s+$/, '');
+                    const lang = langDd.value();
+                    const label = CODE_LANGS.find(([v]) => v === lang)?.[1] || lang;
+                    this.closeDlg();
+                    if (!src.trim())
+                        return;
+                    if (existing) {
+                        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();
+                    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();
+                }
+            }
+        ]);
+    }
+    clearCodeSel() {
+        this.codeCtx?.remove();
+        this.codeCtx = null;
+        this.codeActive?.classList.remove('code-selected');
+        this.codeActive = null;
+    }
+    selectCodeEl(el) {
+        if (this.codeActive === el)
+            return;
+        this.clearCodeSel();
+        this.codeActive = el;
+        el.classList.add('code-selected');
+        this.codeCtx = this.buildCodeCtxToolbar(el);
+        this.positionCodeCtx();
+    }
+    buildCodeCtxToolbar(el) {
+        const ctx = document.createElement('div');
+        ctx.className = 'imgctx';
+        ctx.dir = this.dir();
+        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.clearCodeSel();
+            this.onChange();
+        }));
+        ctx.addEventListener('mousedown', (e) => e.preventDefault());
+        document.body.appendChild(ctx);
+        return ctx;
+    }
+    copyCodeBlock(el) {
+        const text = el.querySelector('code')?.textContent ?? el.textContent ?? '';
+        if (navigator.clipboard?.writeText) {
+            navigator.clipboard.writeText(text).catch(() => { });
+            return;
+        }
+        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 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.codeCtx.style.left = cx + 'px';
+        this.codeCtx.style.top = cy + 'px';
+    }
     /* ---------------------------------------------------------- templates */
     templateMenu(anchor) {
         this.popup(anchor, (el) => this.buildTemplatePickInto(el));
@@ -3753,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;
     }
@@ -4110,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);
@@ -4193,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();
@@ -4233,6 +5698,18 @@ class FableEditor {
             fr.readAsDataURL(imgItem.getAsFile());
             return;
         }
+        if (!html) {
+            /* 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 embed = /^\S+$/.test(text.trim()) ? this.videoEmbedUrl(text.trim()) : null;
+            if (embed) {
+                document.execCommand('insertHTML', false, this.videoEmbedHTML(embed));
+                this.onChange();
+                return;
+            }
+        }
         if (html) {
             document.execCommand('insertHTML', false, cleanPastedHTML(html, this.dir()));
         }
@@ -4247,6 +5724,9 @@ class FableEditor {
         this.closeDlg();
         this.clearTableHandles();
         this.clearImgPlaceholderSel();
+        this.clearVphPlaceholderSel();
+        this.clearVidHandles();
+        this.clearCodeSel();
         this.shell.dir = this.dir();
         this.ed.dir = this.dir();
         if (this.options.menubar)
@@ -4270,6 +5750,9 @@ class FableEditorComponent {
     toolbar = true;
     statusbar = true;
     readonly = false;
+    primaryColor;
+    toolbarGroupBackground;
+    uiFontFamily;
     init = {};
     value = '';
     editorChange = new EventEmitter();
@@ -4286,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) => {
@@ -4330,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,
@@ -4350,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: [{