fable-editor 1.0.1 → 1.1.0

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

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, Output, Input, ViewChild, Component, NgModule } from '@angular/core';
+import katex from 'katex';
 
 const I18N = {
     en: {
@@ -136,7 +137,52 @@ const I18N = {
         insertimg: 'Insert',
         dropimage: 'Drop image here',
         uploading: 'Uploading…',
-        uploadfailed: 'Upload failed — click to retry'
+        uploadfailed: 'Upload failed — click to retry',
+        template: 'Templates',
+        tplimgleft: 'Image left, text right',
+        tplimgright: 'Image right, text left',
+        tplimgtop: 'Image top, text below',
+        tplimgcenter: 'Text top, image center',
+        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',
+        mathformula: 'Insert math formula',
+        mathdlgttl: 'Insert Math Formula',
+        mathderivation: 'Multi-line derivation',
+        mathlatex: 'LaTeX',
+        editmath: 'Edit formula',
+        deletemath: 'Delete formula',
+        videodlgttl: 'Insert/edit video',
+        vidgeneral: 'General',
+        vidembed: 'Embed',
+        vidadvanced: 'Advanced',
+        vidsource: 'Source',
+        vidembedhint: 'Paste your embed code below:',
+        vidaltsource: 'Alternative source URL',
+        vidposter: 'Media poster (Image URL)',
+        emoji: 'Emojis…',
+        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',
@@ -272,7 +318,52 @@ const I18N = {
         insertimg: 'إدراج',
         dropimage: 'أسقط الصورة هنا',
         uploading: 'جارٍ الرفع…',
-        uploadfailed: 'فشل الرفع — انقر لإعادة المحاولة'
+        uploadfailed: 'فشل الرفع — انقر لإعادة المحاولة',
+        template: 'قوالب',
+        tplimgleft: 'صورة يسار، نص يمين',
+        tplimgright: 'صورة يمين، نص يسار',
+        tplimgtop: 'صورة أعلى، نص أسفل',
+        tplimgcenter: 'نص أعلى، صورة وسط',
+        deltemplate: 'حذف القالب',
+        video: 'فيديو',
+        quickvideo: 'إدراج فيديو',
+        deletevideo: 'حذف الفيديو',
+        uploadvideo: 'رفع من الجهاز',
+        videolink: 'إدراج من رابط',
+        videourlph: 'الصق رابط الفيديو…',
+        insertvideo: 'إدراج',
+        dropvideo: 'أسقط الفيديو هنا',
+        mathformula: 'إدراج معادلة رياضية',
+        mathdlgttl: 'إدراج معادلة رياضية',
+        mathderivation: 'اشتقاق متعدد الأسطر',
+        mathlatex: 'LaTeX',
+        editmath: 'تعديل المعادلة',
+        deletemath: 'حذف المعادلة',
+        videodlgttl: 'إدراج/تعديل فيديو',
+        vidgeneral: 'عام',
+        vidembed: 'تضمين',
+        vidadvanced: 'متقدم',
+        vidsource: 'المصدر',
+        vidembedhint: 'الصق كود التضمين أدناه:',
+        vidaltsource: 'رابط مصدر بديل',
+        vidposter: 'صورة الغلاف (رابط الصورة)',
+        emoji: 'رموز تعبيرية…',
+        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) {
@@ -284,7 +375,7 @@ function getStrings(lang) {
 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 charmap | fullscreen sourcecode';
+    'ltr rtl | quickimage quickvideo quicktable mathformula 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';
@@ -350,6 +441,147 @@ const COLORS = [
     '#000000',
     '#FFFFFF'
 ];
+/** 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 = [
     '©',
     '®',
@@ -475,6 +707,11 @@ const IC = {
     wordic: S('<path d="M6 3h8l5 5v13H6z"/><path d="M14 3v5h5"/><text x="8" y="17" font-size="8.5" stroke="none" fill="#222f3e" font-family="Arial" font-weight="bold">W</text>'),
     draftic: G('M480-160q-134 0-227-93t-93-227q0-134 93-227t227-93q69 0 132 28.5T720-690v-110h80v280H520v-80h168q-32-56-87.5-88T480-720q-100 0-170 70t-70 170q0 100 70 170t170 70q77 0 139-44t87-116h84q-28 106-114 173t-196 67Z'),
     trash: S('<path d="M5 7h14M10 7V5h4v2M7.5 7l1 13h7l1-13"/>'),
+    templateic: S('<rect x="4" y="4" width="16" height="16" rx="1.5"/><rect x="6.5" y="6.5" width="5" height="5" rx=".5"/><path d="M14 7.5h3.5M14 10h3.5M6.5 14h11M6.5 17h11"/>'),
+    tplleft: S('<rect x="3" y="5" width="8" height="8" rx=".8"/><path d="M13.5 6.5H21M13.5 9.5H21M13.5 12.5H21M3 15.5h18M3 18.5h18"/>'),
+    tplright: S('<rect x="13" y="5" width="8" height="8" rx=".8"/><path d="M3 6.5h7.5M3 9.5h7.5M3 12.5h7.5M3 15.5h18M3 18.5h18"/>'),
+    tpltop: S('<rect x="5" y="3" width="14" height="9" rx=".8"/><path d="M3 15h18M3 18h18M3 21h12"/>'),
+    tplcenter: S('<path d="M3 4h18M3 7h18M3 10h12"/><rect x="5" y="12.5" width="14" height="9" rx=".8"/>'),
     rotateleft: S('<polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/>'),
     rotateright: S('<polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>'),
     fliphorizontal: S('<path d="M12 3v18"/><path d="M7 8l-4 4 4 4"/><path d="M17 8l4 4-4 4"/>'),
@@ -486,7 +723,11 @@ 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"/>'),
+    mathic: S('<text x="2" y="18" font-size="17" stroke="none" fill="#222f3e" font-family="Georgia, \'Times New Roman\', serif" font-style="italic">&#8721;</text>'),
+    emojiic: S('<circle cx="12" cy="12" r="8.5"/><path d="M8.6 14.3a4.6 4.6 0 0 0 6.8 0"/><path d="M9.2 9.6v.7M14.8 9.6v.7"/>')
 };
 const TXT = (html) => `<span class="txt">${html}</span>`;
 
@@ -1364,6 +1605,19 @@ async function importDocxToHtml(input) {
 }
 
 const IMG_CORNERS = ['nw', 'ne', 'sw', 'se'];
+const TPL_LAYOUTS = ['img-left', 'img-right', 'img-top', 'img-center'];
+const TPL_LABEL = {
+    'img-left': 'tplimgleft',
+    'img-right': 'tplimgright',
+    'img-top': 'tplimgtop',
+    'img-center': 'tplimgcenter'
+};
+const TPL_ICON = {
+    'img-left': IC.tplleft,
+    'img-right': IC.tplright,
+    'img-top': IC.tpltop,
+    'img-center': IC.tplcenter
+};
 class FableEditor {
     static instanceCounter = 0;
     options;
@@ -1402,7 +1656,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;
+    mathActive = null;
+    mathCtx = null;
     selCtx = null;
+    tplActive = null;
+    tplCtx = null;
     docInput;
     revisions = [];
     revTimer = null;
@@ -1424,10 +1693,13 @@ 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.lang = this.options.language;
         this.draftStorageKey = 'tmclone-draft:' + this.options.draftKey;
@@ -1494,6 +1766,11 @@ 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';
@@ -1561,24 +1838,46 @@ class FableEditor {
             this.positionTableHandles();
             this.positionImageHandles();
             this.positionImgPhCtx();
+            this.positionTplCtx();
+            this.positionVphCtx();
+            this.positionVidCtx();
+            this.positionMathCtx();
         });
         this.on(this.ed, 'keydown', (e) => {
             if (e.altKey && e.key === '0') {
                 e.preventDefault();
                 this.helpDlg();
             }
+            if ((e.key === 'Delete' || e.key === 'Backspace') && this.phActive) {
+                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.tryMathTyping(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) => {
@@ -1588,14 +1887,29 @@ 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();
                 this.selectImgPlaceholder(ph);
             }
             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 img = target.closest?.('img');
             if (img && this.ed.contains(img) && !this.options.readonly) {
                 e.preventDefault();
@@ -1604,6 +1918,22 @@ 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();
+            }
+            const mathEl = target.closest?.('.math-fable');
+            if (mathEl && this.ed.contains(mathEl) && !this.options.readonly) {
+                e.preventDefault();
+                this.selectMathEl(mathEl);
+            }
+            else {
+                this.clearMathSel();
+            }
         });
         this.on(this.ed, 'mouseover', (e) => {
             if (this.options.readonly)
@@ -1630,17 +1960,29 @@ class FableEditor {
             this.positionTableHandles();
             this.positionImageHandles();
             this.positionImgPhCtx();
+            this.positionTplCtx();
+            this.positionVphCtx();
+            this.positionVidCtx();
+            this.positionMathCtx();
         });
         this.onWin('scroll', () => {
             this.positionTableHandles();
             this.positionImageHandles();
             this.positionImgPhCtx();
+            this.positionTplCtx();
+            this.positionVphCtx();
+            this.positionVidCtx();
+            this.positionMathCtx();
             this.repositionSelToolbar();
         }, true);
         this.onWin('resize', () => {
             this.positionTableHandles();
             this.positionImageHandles();
             this.positionImgPhCtx();
+            this.positionTplCtx();
+            this.positionVphCtx();
+            this.positionVidCtx();
+            this.positionMathCtx();
             this.repositionSelToolbar();
         });
         this.on(this.imgInput, 'change', () => {
@@ -1661,6 +2003,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)
@@ -1675,13 +2035,21 @@ class FableEditor {
                 this.imgHandles.includes(e.target) ||
                 (this.imgCtx && this.imgCtx.contains(e.target)) ||
                 (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.mathCtx && this.mathCtx.contains(e.target)) ||
                 (this.openPop && this.openPop.contains(e.target)) ||
                 (this.openSubEl && this.openSubEl.contains(e.target)))
                 return;
             this.clearTableHandles();
             this.clearImageHandles();
             this.clearImgPlaceholderSel();
+            this.clearTplSel();
+            this.clearVphPlaceholderSel();
+            this.clearVidHandles();
+            this.clearMathSel();
             this.clearSelToolbar();
         });
     }
@@ -1707,6 +2075,10 @@ class FableEditor {
         this.clearTableHandles();
         this.clearImageHandles();
         this.clearImgPlaceholderSel();
+        this.clearTplSel();
+        this.clearVphPlaceholderSel();
+        this.clearVidHandles();
+        this.clearMathSel();
         this.clearSelToolbar();
         this.onChange();
     }
@@ -1768,6 +2140,10 @@ class FableEditor {
         this.clearTableHandles();
         this.clearImageHandles();
         this.clearImgPlaceholderSel();
+        this.clearTplSel();
+        this.clearVphPlaceholderSel();
+        this.clearVidHandles();
+        this.clearMathSel();
         this.clearSelToolbar();
         this.listeners.forEach((fn) => fn());
         this.listeners = [];
@@ -1775,6 +2151,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;
@@ -2576,7 +2954,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()),
@@ -2611,11 +2989,22 @@ class FableEditor {
             ltr: () => this.tbtn(IC.ltr, this.t('ltr'), () => this.setDir('ltr'), 'ltr'),
             rtl: () => this.tbtn(IC.rtl, this.t('rtl'), () => this.setDir('rtl'), 'rtl'),
             quickimage: () => this.tbtn(IC.image, this.t('quickimage'), () => this.insertImagePlaceholder()),
+            quickvideo: () => this.tbtn(IC.video, this.t('quickvideo'), () => this.videoDlg()),
+            mathformula: () => this.tbtn(IC.mathic, this.t('mathformula'), () => this.mathDlg()),
             quicktable: () => tableBtn,
+            template: () => this.menuTbtn(IC.templateic, this.t('template'), (b) => this.templateMenu(b)),
             charmap: () => this.tbtn(IC.charic, this.t('charmap'), () => this.charMap()),
+            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 = '';
@@ -2682,10 +3071,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()),
+                this.mItem('mathformula', IC.mathic, () => this.mathDlg()),
                 { label: this.t('inserttable'), icon: IC.tableic, action: () => this.tableGrid(this.menubar.querySelector('[data-menu-key="table"]') || this.menubar) },
+                { 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'))),
                 '|',
                 {
@@ -2755,7 +3148,7 @@ class FableEditor {
                         this.tablePropsDlg();
                     }
                 },
-                { label: this.t('deltable'), icon: IC.tabledelete, action: () => this.tableOp('deltable') }
+                { label: this.t('deltable'), icon: IC.trash, action: () => this.tableOp('deltable') }
             ],
             help: [this.mItem('helpttl', IC.helpic, () => this.helpDlg(), 'Alt+0')]
         };
@@ -3256,22 +3649,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)
@@ -3286,10 +3710,13 @@ class FableEditor {
         this.imgInput.click();
     }
     /* ---------------------------------------------- image upload placeholder */
+    imgPhHTML(id) {
+        return `<div class="img-ph"${id ? ` id="${id}"` : ''} contenteditable="false">${IC.image}<span>${this.t('dropimage')}</span></div>`;
+    }
     insertImagePlaceholder() {
         this.restoreSel();
         const id = 'img-ph-' + Date.now().toString(36) + Math.random().toString(36).slice(2, 6);
-        document.execCommand('insertHTML', false, `<div class="img-ph" id="${id}" contenteditable="false">${IC.image}<span>${this.t('dropimage')}</span></div>`);
+        document.execCommand('insertHTML', false, this.imgPhHTML(id));
         const ph = this.ed.querySelector('#' + id);
         if (ph) {
             ph.removeAttribute('id');
@@ -3303,6 +3730,17 @@ class FableEditor {
         this.phActive?.classList.remove('active');
         this.phActive = null;
     }
+    removeImgPlaceholder() {
+        const ph = this.phActive;
+        if (!ph)
+            return;
+        this.clearImgPlaceholderSel();
+        /* the placeholder inside a template block IS the media slot — deleting
+           it drops the slot entirely, leaving a text-only block */
+        (ph.closest('.tpl-media') || ph).remove();
+        this.refreshState();
+        this.onChange();
+    }
     selectImgPlaceholder(ph) {
         if (this.phActive === ph)
             return;
@@ -3324,8 +3762,33 @@ class FableEditor {
             this.phUploadTarget = this.phActive;
             this.pickImage();
         }), 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)
@@ -3448,6 +3911,829 @@ 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();
+                }
+            }
+        ]);
+    }
+    /* ---------------------------------------------------------- math / LaTeX formulas */
+    renderMathHTML(latex, block) {
+        try {
+            return katex.renderToString(latex, { throwOnError: false, displayMode: block, strict: 'ignore' });
+        }
+        catch {
+            return '';
+        }
+    }
+    /** Shared by the math dialog, math paste, and math typing: renders `src` with
+     *  KaTeX and inserts it at the caret as the standard math element (inline span /
+     *  block div carrying its LaTeX source in data-latex). Block formulas get the
+     *  same \begin{aligned} wrapping the dialog applies, so pasted derivations align
+     *  their steps and re-open correctly in the edit dialog. */
+    insertMathElement(src, block) {
+        const latex = block ? `\\begin{aligned}${src}\\end{aligned}` : src;
+        const rendered = this.renderMathHTML(latex, block);
+        const tag = block ? 'div' : 'span';
+        document.execCommand('insertHTML', false, `<${tag} class="math-fable${block ? ' math-fable-block' : ''}" contenteditable="false" data-latex="${this.escapeAttr(src)}">${rendered}</${tag}>`);
+    }
+    /** Recognizes a plain-text clipboard payload that is entirely one math formula:
+     *  $$…$$ / \[…\] (block), \(…\) (inline), a \begin{…}…\end{…} environment (block),
+     *  or $…$ (inline — only when the inside looks like LaTeX, so "$50" stays text).
+     *  Multi-line block content (a derivation pasted as separate lines) gets its lines
+     *  joined with \\ so each step lands on its own line. Returns null for anything
+     *  else, letting the normal paste pipeline run unchanged. */
+    mathFromClipboard(text) {
+        const t = text.trim();
+        if (!t)
+            return null;
+        const block = t.match(/^\$\$([\s\S]+)\$\$$/) || t.match(/^\\\[([\s\S]+)\\\]$/);
+        if (block) {
+            const src = block[1].trim();
+            if (!src || src.includes('$'))
+                return null;
+            return { latex: this.joinDerivationLines(src), block: true };
+        }
+        if (/^\\begin\{[a-zA-Z*]+\}[\s\S]+\\end\{[a-zA-Z*]+\}$/.test(t)) {
+            return { latex: this.joinDerivationLines(t), block: true };
+        }
+        const inline = t.match(/^\\\(([\s\S]+)\\\)$/) || t.match(/^\$([^$\n]+)\$$/);
+        if (inline) {
+            const src = inline[1].trim();
+            if (!src || src.includes('$'))
+                return null;
+            if (t.startsWith('$') && !/[\\^_{}=]/.test(src))
+                return null;
+            return { latex: src, block: false };
+        }
+        return null;
+    }
+    /** A derivation pasted as separate lines has no explicit \\ row breaks — add them.
+     *  Content that already breaks rows itself (\\ present, or a \begin environment
+     *  managing its own layout) only has its newlines collapsed to spaces. */
+    joinDerivationLines(src) {
+        if (!/\n/.test(src))
+            return src;
+        if (/\\\\/.test(src) || /\\begin\{/.test(src))
+            return src.replace(/\s*\n\s*/g, ' ');
+        return src
+            .split(/\n+/)
+            .map((l) => l.trim())
+            .filter(Boolean)
+            .join(' \\\\ ');
+    }
+    /** Typing "$…$" converts to an inline formula the moment the closing "$" is typed,
+     *  so math can be written in place without opening the dialog. Only kicks in when
+     *  the run since the opening "$" parses as valid LaTeX and contains LaTeX-ish
+     *  syntax (\ ^ _ { } =) — a literal "$5 and 3$" stays plain text. */
+    tryMathTyping(e) {
+        const sel = window.getSelection();
+        if (!sel || !sel.isCollapsed || !sel.anchorNode)
+            return;
+        const node = sel.anchorNode;
+        if (node.nodeType !== Node.TEXT_NODE || !this.ed.contains(node))
+            return;
+        if (node.parentElement?.closest('.math-fable, pre, code'))
+            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) || !/[\\^_{}=]/.test(src))
+            return;
+        const rendered = this.renderMathHTML(src, false);
+        if (!rendered || rendered.includes('katex-error'))
+            return;
+        e.preventDefault();
+        const range = document.createRange();
+        range.setStart(node, sel.anchorOffset - src.length - 1);
+        range.setEnd(node, sel.anchorOffset);
+        sel.removeAllRanges();
+        sel.addRange(range);
+        this.insertMathElement(src, false);
+        this.onChange();
+    }
+    mathDlg(existing) {
+        this.saveSel();
+        const isBlock = existing?.classList.contains('math-fable-block') ?? false;
+        const initialLatex = existing?.dataset.latex ? this.unescapeAttr(existing.dataset.latex) : '';
+        let ta;
+        let derivChk;
+        let preview;
+        const updatePreview = () => {
+            const src = ta.value || '';
+            const block = derivChk.checked;
+            const latex = block ? `\\begin{aligned}${src}\\end{aligned}` : src;
+            preview.innerHTML = this.renderMathHTML(latex, block);
+        };
+        this.dialog(this.t('mathdlgttl'), (body) => {
+            ta = document.createElement('textarea');
+            ta.value = initialLatex;
+            ta.placeholder = 'e.g. x = \\frac{-b \\pm \\sqrt{b^2-4ac}}{2a}';
+            ta.style.cssText = 'width:360px;max-width:100%;min-height:80px;font-family:monospace;font-size:13px';
+            const chkRow = document.createElement('label');
+            chkRow.style.cssText = 'display:flex;align-items:center;gap:6px;margin:8px 0;font-size:13.5px;color:#445';
+            derivChk = document.createElement('input');
+            derivChk.type = 'checkbox';
+            derivChk.checked = isBlock;
+            chkRow.append(derivChk, document.createTextNode(this.t('mathderivation')));
+            preview = document.createElement('div');
+            preview.className = 'math-preview';
+            preview.style.cssText = 'min-height:40px;margin-top:8px;padding:10px;border:1px solid #e1e5ea;border-radius:6px;overflow:auto';
+            ta.addEventListener('input', updatePreview);
+            derivChk.addEventListener('change', updatePreview);
+            body.append(ta, chkRow, preview);
+            setTimeout(() => {
+                ta.focus();
+                updatePreview();
+            }, 0);
+        }, [
+            { label: this.t('cancel'), action: () => this.closeDlg() },
+            {
+                label: this.t('save'),
+                primary: true,
+                action: () => {
+                    const src = ta.value.trim();
+                    this.closeDlg();
+                    if (!src)
+                        return;
+                    const block = derivChk.checked;
+                    if (existing) {
+                        const latex = block ? `\\begin{aligned}${src}\\end{aligned}` : src;
+                        existing.className = block ? 'math-fable math-fable-block' : 'math-fable';
+                        existing.dataset.latex = this.escapeAttr(src);
+                        existing.innerHTML = this.renderMathHTML(latex, block);
+                        this.clearMathSel();
+                        this.onChange();
+                        return;
+                    }
+                    this.restoreSel();
+                    this.insertMathElement(src, block);
+                    this.onChange();
+                }
+            }
+        ]);
+    }
+    escapeAttr(s) {
+        return s.replace(/&/g, '&amp;').replace(/"/g, '&quot;');
+    }
+    unescapeAttr(s) {
+        return s.replace(/&quot;/g, '"').replace(/&amp;/g, '&');
+    }
+    clearMathSel() {
+        this.mathCtx?.remove();
+        this.mathCtx = null;
+        this.mathActive?.classList.remove('math-selected');
+        this.mathActive = null;
+    }
+    selectMathEl(el) {
+        if (this.mathActive === el)
+            return;
+        this.clearMathSel();
+        this.mathActive = el;
+        el.classList.add('math-selected');
+        this.mathCtx = this.buildMathCtxToolbar(el);
+        this.positionMathCtx();
+    }
+    buildMathCtxToolbar(el) {
+        const ctx = document.createElement('div');
+        ctx.className = 'imgctx';
+        ctx.dir = this.dir();
+        ctx.append(this.ctxBtn(IC.editic, this.t('editmath'), () => this.mathDlg(el)), this.ctxSep(), this.ctxBtn(IC.trash, this.t('deletemath'), () => {
+            el.remove();
+            this.clearMathSel();
+            this.onChange();
+        }));
+        ctx.addEventListener('mousedown', (e) => e.preventDefault());
+        document.body.appendChild(ctx);
+        return ctx;
+    }
+    positionMathCtx() {
+        if (!this.mathActive || !document.body.contains(this.mathActive)) {
+            this.clearMathSel();
+            return;
+        }
+        const r = this.mathActive.getBoundingClientRect();
+        if (!this.mathCtx)
+            return;
+        const cw = this.mathCtx.offsetWidth;
+        const ch = this.mathCtx.offsetHeight;
+        let cx = r.left + scrollX + (r.width - cw) / 2;
+        cx = Math.max(8 + scrollX, Math.min(cx, scrollX + innerWidth - cw - 8));
+        let cy = r.top + scrollY - ch - 8;
+        if (cy < this.ctxMinTop())
+            cy = r.bottom + scrollY + 8;
+        this.mathCtx.style.left = cx + 'px';
+        this.mathCtx.style.top = cy + 'px';
+    }
+    /* ---------------------------------------------------------- templates */
+    templateMenu(anchor) {
+        this.popup(anchor, (el) => this.buildTemplatePickInto(el));
+    }
+    /** Miniature div-based mockup of a layout, mirroring what the block looks
+        like in the editor: grey box = image slot, bars = heading/paragraph. */
+    tplPreviewHTML(layout) {
+        const img = '<span class="pv-img"></span>';
+        const head = '<span class="pv-h"></span>';
+        const line = (w) => `<span class="pv-l" style="width:${w}%"></span>`;
+        const col = (inner) => `<span class="pv-col">${inner}</span>`;
+        const row = (inner) => `<span class="pv-row">${inner}</span>`;
+        const textCol = col(head + line(100) + line(88));
+        if (layout === 'img-left')
+            return `<span class="pv">${row(img + textCol)}${line(100)}${line(72)}</span>`;
+        if (layout === 'img-right')
+            return `<span class="pv">${row(textCol + img)}${line(100)}${line(72)}</span>`;
+        if (layout === 'img-top')
+            return `<span class="pv pv-c">${img}${head}${line(100)}${line(72)}</span>`;
+        return `<span class="pv pv-c">${head}${line(100)}${line(72)}${img}</span>`;
+    }
+    buildTemplatePickInto(el, after) {
+        const wrap = document.createElement('div');
+        wrap.className = 'tplpick';
+        TPL_LAYOUTS.forEach((layout) => {
+            const tile = document.createElement('button');
+            tile.type = 'button';
+            tile.className = 'tpltile';
+            tile.title = this.t(TPL_LABEL[layout]);
+            tile.innerHTML = this.tplPreviewHTML(layout) + `<span class="tpllbl">${this.t(TPL_LABEL[layout])}</span>`;
+            tile.addEventListener('click', () => {
+                this.closePop();
+                this.insertTemplate(layout);
+                after?.();
+            });
+            wrap.appendChild(tile);
+        });
+        el.appendChild(wrap);
+    }
+    insertTemplate(layout) {
+        this.restoreSel();
+        const media = `<div class="tpl-media" contenteditable="false">${this.imgPhHTML()}</div>`;
+        const text = `<div class="tpl-text"><h2>${this.t('heading')}</h2><p>${this.t('para')}</p></div>`;
+        /* text-above-image layout keeps DOM order = visual order so the caret
+           travels naturally; every other layout has the media slot first */
+        const inner = layout === 'img-center' ? text + media : media + text;
+        document.execCommand('insertHTML', false, `<div class="tpl tpl-${layout}">${inner}</div><p><br></p>`);
+        this.saveSel();
+        this.onChange();
+    }
+    clearTplSel() {
+        this.tplCtx?.remove();
+        this.tplCtx = null;
+        this.tplActive?.classList.remove('tpl-selected');
+        this.tplActive = null;
+    }
+    selectTemplate(tpl) {
+        if (this.tplActive === tpl)
+            return;
+        this.clearTplSel();
+        this.tplActive = tpl;
+        tpl.classList.add('tpl-selected');
+        this.tplCtx = document.createElement('div');
+        this.tplCtx.className = 'imgctx tplctx';
+        this.tplCtx.dir = this.dir();
+        document.body.appendChild(this.tplCtx);
+        this.renderTplCtxButtons();
+    }
+    renderTplCtxButtons() {
+        const el = this.tplCtx;
+        const tpl = this.tplActive;
+        if (!el || !tpl)
+            return;
+        el.innerHTML = '';
+        TPL_LAYOUTS.forEach((layout) => {
+            const b = this.ctxBtn(TPL_ICON[layout], this.t(TPL_LABEL[layout]), () => this.setTplLayout(layout));
+            b.classList.toggle('on', tpl.classList.contains('tpl-' + layout));
+            el.appendChild(b);
+        });
+        el.append(this.ctxSep(), this.ctxBtn(IC.trash, this.t('deltemplate'), () => this.removeTemplate()));
+        this.positionTplCtx();
+    }
+    setTplLayout(layout) {
+        const tpl = this.tplActive;
+        if (!tpl)
+            return;
+        TPL_LAYOUTS.forEach((l) => tpl.classList.remove('tpl-' + l));
+        tpl.classList.add('tpl-' + layout);
+        /* keep DOM order = visual order (see insertTemplate) */
+        const media = tpl.querySelector(':scope > .tpl-media');
+        const text = tpl.querySelector(':scope > .tpl-text');
+        if (media && text) {
+            if (layout === 'img-center')
+                tpl.appendChild(media);
+            else
+                tpl.insertBefore(media, text);
+        }
+        this.renderTplCtxButtons();
+        this.positionImgPhCtx();
+        this.positionImageHandles();
+        this.onChange();
+    }
+    removeTemplate() {
+        const tpl = this.tplActive;
+        if (!tpl)
+            return;
+        this.clearTplSel();
+        if (this.phActive && tpl.contains(this.phActive))
+            this.clearImgPlaceholderSel();
+        if (this.imgActive && tpl.contains(this.imgActive))
+            this.clearImageHandles();
+        tpl.remove();
+        this.refreshState();
+        this.onChange();
+    }
+    positionTplCtx() {
+        if (this.tplActive && !document.body.contains(this.tplActive)) {
+            this.clearTplSel();
+            return;
+        }
+        if (!this.tplActive || !this.tplCtx)
+            return;
+        const r = this.tplActive.getBoundingClientRect();
+        const cw = this.tplCtx.offsetWidth;
+        const ch = this.tplCtx.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.tplCtx.style.left = cx + 'px';
+        this.tplCtx.style.top = cy + 'px';
+    }
     pickWordDoc() {
         this.docInput.value = '';
         this.docInput.click();
@@ -3554,7 +4840,7 @@ 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.tabledelete, this.t('deltable'), () => this.tableOp('deltable')), this.ctxBtn(IC.tableic, this.t('tablepropsttl'), () => this.tablePropsDlg()));
+        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()));
         document.body.appendChild(el);
         return el;
     }
@@ -3761,7 +5047,13 @@ class FableEditor {
             this.flipImage(img, 'y');
             rebuild();
         }), this.ctxSep(), mkBtn(IC.trash, this.t('deleteimg'), false, () => {
-            img.remove();
+            /* inside a template media slot the image swaps back to an
+               upload placeholder so the slot is not lost */
+            const slot = img.closest('.tpl-media');
+            if (slot && this.ed.contains(slot))
+                img.outerHTML = this.imgPhHTML();
+            else
+                img.remove();
             this.clearImageHandles();
             this.onChange();
         }));
@@ -4028,6 +5320,26 @@ class FableEditor {
             fr.readAsDataURL(imgItem.getAsFile());
             return;
         }
+        if (!html) {
+            /* plain-text pastes get two additive pre-checks before the normal text
+               pipeline runs (the paste engine itself is untouched): a clipboard that
+               is entirely one LaTeX formula/derivation becomes a rendered math
+               element, and a bare video page URL (YouTube & co.) becomes an
+               embedded player. Anything else falls through unchanged. */
+            const text = cd.getData('text/plain');
+            const math = this.mathFromClipboard(text);
+            if (math) {
+                this.insertMathElement(math.latex, math.block);
+                this.onChange();
+                return;
+            }
+            const embed = /^\S+$/.test(text.trim()) ? this.videoEmbedUrl(text.trim()) : null;
+            if (embed) {
+                document.execCommand('insertHTML', false, this.videoEmbedHTML(embed));
+                this.onChange();
+                return;
+            }
+        }
         if (html) {
             document.execCommand('insertHTML', false, cleanPastedHTML(html, this.dir()));
         }
@@ -4042,6 +5354,9 @@ class FableEditor {
         this.closeDlg();
         this.clearTableHandles();
         this.clearImgPlaceholderSel();
+        this.clearVphPlaceholderSel();
+        this.clearVidHandles();
+        this.clearMathSel();
         this.shell.dir = this.dir();
         this.ed.dir = this.dir();
         if (this.options.menubar)