fable-editor 1.0.0

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

@@ -0,0 +1,4176 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Output, Input, ViewChild, Component, NgModule } from '@angular/core';
+
+const I18N = {
+    en: {
+        dir: 'ltr',
+        file: 'File',
+        edit: 'Edit',
+        view: 'View',
+        insert: 'Insert',
+        format: 'Format',
+        tools: 'Tools',
+        table: 'Table',
+        help: 'Help',
+        newdoc: 'New document',
+        preview: 'Preview',
+        print: 'Print…',
+        undo: 'Undo',
+        redo: 'Redo',
+        cut: 'Cut',
+        copy: 'Copy',
+        paste: 'Paste',
+        selectall: 'Select all',
+        fullscreen: 'Fullscreen',
+        sourcecode: 'Source code',
+        wordcount: 'Word count',
+        image: 'Image…',
+        inserttable: 'Table',
+        hr: 'Horizontal line',
+        charmap: 'Special character…',
+        datetime: 'Date/time',
+        pagebreak: 'Page break',
+        nbsp: 'Nonbreaking space',
+        bold: 'Bold',
+        italic: 'Italic',
+        underline: 'Underline',
+        strikethrough: 'Strikethrough',
+        superscript: 'Superscript',
+        subscript: 'Subscript',
+        clearformat: 'Clear formatting',
+        rowabove: 'Insert row before',
+        rowbelow: 'Insert row after',
+        delrow: 'Delete row',
+        colbefore: 'Insert column before',
+        colafter: 'Insert column after',
+        delcol: 'Delete column',
+        deltable: 'Delete table',
+        ltr: 'Left to right',
+        rtl: 'Right to left',
+        alignleft: 'Align left',
+        aligncenter: 'Align center',
+        alignright: 'Align right',
+        alignjustify: 'Justify',
+        numlist: 'Numbered list',
+        bullist: 'Bullet list',
+        forecolor: 'Text color',
+        backcolor: 'Background color',
+        removeformat: 'Clear formatting',
+        outdent: 'Decrease indent',
+        indent: 'Increase indent',
+        fontfamily: 'Font family',
+        fontsize: 'Font size',
+        blocks: 'Blocks',
+        quickimage: 'Insert image',
+        quicktable: 'Insert table',
+        more: 'More…',
+        para: 'Paragraph',
+        heading: 'Heading',
+        pre: 'Preformatted',
+        removecolor: 'Remove color',
+        currentcolor: 'Current color',
+        statushelp: 'Press Alt+0 for help',
+        words: 'words',
+        helpttl: 'Help',
+        shortcuts: 'Handy shortcuts',
+        close: 'Close',
+        save: 'Save',
+        cancel: 'Cancel',
+        srcttl: 'Source code',
+        wcttl: 'Word count',
+        wcwords: 'Words',
+        wcchars: 'Characters',
+        pastehint: 'Use Ctrl+V / ⌘V to paste',
+        liststyles_ol: ['Default', 'Lower alpha', 'Lower roman', 'Upper alpha', 'Upper roman'],
+        liststyles_ul: ['Default', 'Circle', 'Square'],
+        previewttl: 'Preview',
+        tablepropsttl: 'Table properties',
+        tblwidth: 'Width',
+        tblcellspacing: 'Cell spacing',
+        tblcellpadding: 'Cell padding',
+        tblborder: 'Border width',
+        tblalign: 'Alignment',
+        alignnone: 'None',
+        quote: 'Blockquote',
+        link: 'Link…',
+        linkttl: 'Insert/edit link',
+        linkurl: 'URL',
+        unlink: 'Remove link',
+        lineheight: 'Line height',
+        wordspacing: 'Word spacing',
+        changecase: 'Change case',
+        lowercase: 'Lowercase',
+        uppercase: 'Uppercase',
+        capitalize: 'Capitalize Each Word',
+        customcolor: 'Custom color…',
+        normal: 'Normal',
+        revhistory: 'Revision history',
+        revempty: 'No revisions yet',
+        restore: 'Restore',
+        currentver: 'Current version',
+        importword: 'Import from Word…',
+        importfail: 'Could not import this file. Please choose a valid .docx document.',
+        restoredraft: 'Restore last draft',
+        draftempty: 'No saved draft found',
+        deleteimg: 'Delete image',
+        rotateleft: 'Rotate left',
+        rotateright: 'Rotate right',
+        fliphorizontal: 'Flip horizontal',
+        flipvertical: 'Flip vertical',
+        cell: 'Cell',
+        row: 'Row',
+        column: 'Column',
+        cellprops: 'Cell properties…',
+        rowprops: 'Row properties…',
+        colprops: 'Column properties…',
+        tblheight: 'Height',
+        valign: 'Vertical align',
+        valigntop: 'Top',
+        valignmiddle: 'Middle',
+        valignbottom: 'Bottom',
+        fill: 'Fill',
+        nocell: 'Click inside a table cell first',
+        uploadimg: 'Upload from computer',
+        imagelink: 'Insert from URL',
+        imageurlph: 'Paste image URL…',
+        insertimg: 'Insert',
+        dropimage: 'Drop image here',
+        uploading: 'Uploading…',
+        uploadfailed: 'Upload failed — click to retry'
+    },
+    ar: {
+        dir: 'rtl',
+        file: 'ملف',
+        edit: 'تحرير',
+        view: 'عرض',
+        insert: 'إدراج',
+        format: 'التنسيق',
+        tools: 'الأدوات',
+        table: 'جدول',
+        help: 'تعليمات',
+        newdoc: 'مستند جديد',
+        preview: 'معاينة',
+        print: 'طباعة…',
+        undo: 'تراجع',
+        redo: 'إعادة',
+        cut: 'قص',
+        copy: 'نسخ',
+        paste: 'لصق',
+        selectall: 'تحديد الكل',
+        fullscreen: 'ملء الشاشة',
+        sourcecode: 'الكود المصدري',
+        wordcount: 'عدد الكلمات',
+        image: 'صورة…',
+        inserttable: 'جدول',
+        hr: 'خط أفقي',
+        charmap: 'رمز خاص…',
+        datetime: 'التاريخ/الوقت',
+        pagebreak: 'فاصل الصفحة',
+        nbsp: 'مسافة غير فاصلة',
+        bold: 'غامق',
+        italic: 'مائل',
+        underline: 'تسطير',
+        strikethrough: 'يتوسطه خط',
+        superscript: 'نص مرتفع',
+        subscript: 'نص منخفض',
+        clearformat: 'مسح التنسيق',
+        rowabove: 'إدراج صف قبل',
+        rowbelow: 'إدراج صف بعد',
+        delrow: 'حذف الصف',
+        colbefore: 'إدراج عمود قبل',
+        colafter: 'إدراج عمود بعد',
+        delcol: 'حذف العمود',
+        deltable: 'حذف الجدول',
+        ltr: 'من اليسار إلى اليمين',
+        rtl: 'من اليمين إلى اليسار',
+        alignleft: 'محاذاة لليسار',
+        aligncenter: 'توسيط',
+        alignright: 'محاذاة لليمين',
+        alignjustify: 'ضبط',
+        numlist: 'قائمة رقمية',
+        bullist: 'قائمة نقطية',
+        forecolor: 'لون النص',
+        backcolor: 'لون الخلفية',
+        removeformat: 'مسح التنسيق',
+        outdent: 'إنقاص المسافة البادئة',
+        indent: 'زيادة المسافة البادئة',
+        fontfamily: 'عائلة الخط',
+        fontsize: 'حجم الخط',
+        blocks: 'الفقرات',
+        quickimage: 'إدراج صورة',
+        quicktable: 'إدراج جدول',
+        more: 'المزيد…',
+        para: 'الفقرة',
+        heading: 'العنوان',
+        pre: 'منسق مسبقاً',
+        removecolor: 'إزالة اللون',
+        currentcolor: 'اللون الحالي',
+        statushelp: 'اضغط على Alt+0 للحصول على مساعدة',
+        words: 'الكلمات',
+        helpttl: 'تعليمات',
+        shortcuts: 'اختصارات مفيدة',
+        close: 'إغلاق',
+        save: 'حفظ',
+        cancel: 'إلغاء',
+        srcttl: 'الكود المصدري',
+        wcttl: 'عدد الكلمات',
+        wcwords: 'الكلمات',
+        wcchars: 'الأحرف',
+        pastehint: 'استخدم Ctrl+V / ⌘V للصق',
+        liststyles_ol: ['افتراضي', 'أبجدي صغير', 'روماني صغير', 'أبجدي كبير', 'روماني كبير'],
+        liststyles_ul: ['افتراضي', 'دائرة', 'مربع'],
+        previewttl: 'معاينة',
+        tablepropsttl: 'خصائص الجدول',
+        tblwidth: 'العرض',
+        tblcellspacing: 'تباعد الخلايا',
+        tblcellpadding: 'حشو الخلايا',
+        tblborder: 'عرض الحدود',
+        tblalign: 'المحاذاة',
+        alignnone: 'بدون',
+        quote: 'اقتباس',
+        link: 'رابط…',
+        linkttl: 'إدراج/تعديل رابط',
+        linkurl: 'الرابط',
+        unlink: 'إزالة الرابط',
+        lineheight: 'تباعد الأسطر',
+        wordspacing: 'تباعد الكلمات',
+        changecase: 'تغيير حالة الأحرف',
+        lowercase: 'أحرف صغيرة',
+        uppercase: 'أحرف كبيرة',
+        capitalize: 'تكبير أول حرف',
+        customcolor: 'لون مخصص…',
+        normal: 'عادي',
+        revhistory: 'سجل المراجعات',
+        revempty: 'لا توجد مراجعات بعد',
+        restore: 'استعادة',
+        currentver: 'النسخة الحالية',
+        importword: 'استيراد من Word…',
+        importfail: 'تعذر استيراد هذا الملف. الرجاء اختيار مستند ‎.docx صالح.',
+        restoredraft: 'استعادة آخر مسودة',
+        draftempty: 'لا توجد مسودة محفوظة',
+        deleteimg: 'حذف الصورة',
+        rotateleft: 'تدوير لليسار',
+        rotateright: 'تدوير لليمين',
+        fliphorizontal: 'قلب أفقي',
+        flipvertical: 'قلب رأسي',
+        cell: 'خلية',
+        row: 'صف',
+        column: 'عمود',
+        cellprops: 'خصائص الخلية…',
+        rowprops: 'خصائص الصف…',
+        colprops: 'خصائص العمود…',
+        tblheight: 'الارتفاع',
+        valign: 'محاذاة عمودية',
+        valigntop: 'أعلى',
+        valignmiddle: 'وسط',
+        valignbottom: 'أسفل',
+        fill: 'تعبئة',
+        nocell: 'انقر داخل خلية جدول أولاً',
+        uploadimg: 'رفع من الجهاز',
+        imagelink: 'إدراج من رابط',
+        imageurlph: 'الصق رابط الصورة…',
+        insertimg: 'إدراج',
+        dropimage: 'أسقط الصورة هنا',
+        uploading: 'جارٍ الرفع…',
+        uploadfailed: 'فشل الرفع — انقر لإعادة المحاولة'
+    }
+};
+function getStrings(lang) {
+    return I18N[lang];
+}
+
+/** Transcribed group-by-group from the editor's built-in toolbar layout so that
+ *  `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 charmap | 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';
+const FONTS = [
+    ['Andale Mono', 'andale mono,times'],
+    ['Arial', 'arial,helvetica,sans-serif'],
+    ['Arial Black', 'arial black,avant garde'],
+    ['Book Antiqua', 'book antiqua,palatino'],
+    ['Comic Sans MS', 'comic sans ms,sans-serif'],
+    ['Courier New', 'courier new,courier'],
+    ['Georgia', 'georgia,palatino'],
+    ['Helvetica', 'helvetica'],
+    ['Impact', 'impact,chicago'],
+    ['Oswald', 'oswald'],
+    ['Sakkal Majalla', 'sakkal majalla'],
+    ['Symbol', 'symbol'],
+    ['Tahoma', 'tahoma,arial,helvetica,sans-serif'],
+    ['Terminal', 'terminal,monaco'],
+    ['Times New Roman', 'times new roman,times'],
+    ['Trebuchet MS', 'trebuchet ms,geneva'],
+    ['Verdana', 'verdana,geneva'],
+    ['Webdings', 'webdings'],
+    ['Wingdings', 'wingdings,zapf dingbats']
+];
+const SIZES = ['8px', '9px', '10px', '11px', '12px', '14px', '16px', '18px', '20px', '24px', '28px', '32px', '36px', '48px', '72px', '96px'];
+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 BLOCKS = [
+    ['p', 'para'],
+    ['h1', 'heading1'],
+    ['h2', 'heading2'],
+    ['h3', 'heading3'],
+    ['h4', 'heading4'],
+    ['h5', 'heading5'],
+    ['h6', 'heading6'],
+    ['pre', 'pre']
+];
+/** Quick-access text color chips shown directly in the toolbar. */
+const QUICK_COLORS = ['#F76707', '#4263EB', '#CC5DE8'];
+const COLORS = [
+    '#BFEDD2',
+    '#FBEEB8',
+    '#F8CAC6',
+    '#ECCAFA',
+    '#C2E0F4',
+    '#2DC26B',
+    '#F1C40F',
+    '#E03E2D',
+    '#B96AD9',
+    '#3598DB',
+    '#169179',
+    '#E67E23',
+    '#BA372A',
+    '#843FA1',
+    '#236FA1',
+    '#ECF0F1',
+    '#CED4D9',
+    '#95A5A6',
+    '#7E8C8D',
+    '#34495E',
+    '#000000',
+    '#FFFFFF'
+];
+const CHARS = [
+    '©',
+    '®',
+    '™',
+    '§',
+    '¶',
+    '†',
+    '‡',
+    '•',
+    '…',
+    '′',
+    '″',
+    '‰',
+    '°',
+    '±',
+    '×',
+    '÷',
+    '≈',
+    '≠',
+    '≤',
+    '≥',
+    '∞',
+    'µ',
+    '√',
+    '∑',
+    '€',
+    '£',
+    '¥',
+    '¢',
+    '←',
+    '→',
+    '↑',
+    '↓',
+    '«',
+    '»',
+    '“',
+    '”',
+    '‘',
+    '’',
+    '–',
+    '—',
+    '؟',
+    '،',
+    '؛',
+    '٪',
+    '٭',
+    'ـ',
+    '٠',
+    '١'
+];
+
+const S = (inner, vb) => `<svg viewBox="${vb || '0 0 24 24'}">${inner}</svg>`;
+/** Google Material Symbols icon: solid-fill path on the -960..0/0..960 grid those exports use. */
+const G = (path) => S(`<path class="f" d="${path}"/>`, '0 -960 960 960');
+/** Three-line list icon with custom markers (text glyphs) per line. */
+const LIST = (marks, fs = 7.5) => S('<path d="M10 6h10M10 12h10M10 18h10"/>' +
+    marks
+        .map((m, i) => `<text x="2.5" y="${8.4 + i * 6}" font-size="${fs}" stroke="none" fill="#222f3e" font-family="Arial">${m}</text>`)
+        .join(''));
+const IC = {
+    bold: G('M272-200v-560h221q65 0 120 40t55 111q0 51-23 78.5T602-491q25 11 55.5 41t30.5 90q0 89-65 124.5T501-200H272Zm121-112h104q48 0 58.5-24.5T566-372q0-11-10.5-35.5T494-432H393v120Zm0-228h93q33 0 48-17t15-38q0-24-17-39t-44-15h-95v109Z'),
+    italic: G('M200-200v-100h160l120-360H320v-100h400v100H580L460-300h140v100H200Z'),
+    underline: G('M200-120v-80h560v80H200Zm123-223q-56-63-56-167v-330h103v336q0 56 28 91t82 35q54 0 82-35t28-91v-336h103v330q0 104-56 167t-157 63q-101 0-157-63Z'),
+    strikethrough: G('M486-160q-76 0-135-45t-85-123l88-38q14 48 48.5 79t85.5 31q42 0 76-20t34-64q0-18-7-33t-19-27h112q5 14 7.5 28.5T694-340q0 86-61.5 133T486-160ZM80-480v-80h800v80H80Zm402-326q66 0 115.5 32.5T674-674l-88 39q-9-29-33.5-52T484-710q-41 0-68 18.5T386-640h-96q2-69 54.5-117.5T482-806Z'),
+    undo: G('M280-200v-80h284q63 0 109.5-40T720-420q0-60-46.5-100T564-560H312l104 104-56 56-200-200 200-200 56 56-104 104h252q97 0 166.5 63T800-420q0 94-69.5 157T564-200H280Z'),
+    redo: G('M396-200q-97 0-166.5-63T160-420q0-94 69.5-157T396-640h252L544-744l56-56 200 200-200 200-56-56 104-104H396q-63 0-109.5 40T240-420q0 60 46.5 100T396-280h284v80H396Z'),
+    ltr: G('M360-360v-200q-66 0-113-47t-47-113q0-66 47-113t113-47h320v80h-80v440h-80v-440h-80v440h-80Zm0-280v-160q-33 0-56.5 23.5T280-720q0 33 23.5 56.5T360-640Zm0-80ZM680-80l-56-56 64-64H120v-80h568l-64-64 56-56 160 160L680-80Z'),
+    rtl: G('M360-360v-200q-66 0-113-47t-47-113q0-66 47-113t113-47h320v80h-80v440h-80v-440h-80v440h-80Zm-88 160 64 64-56 56-160-160 160-160 56 56-64 64h568v80H272Zm88-440v-160q-33 0-56.5 23.5T280-720q0 33 23.5 56.5T360-640Zm0-80Z'),
+    alignleft: G('M120-120v-80h720v80H120Zm0-160v-80h480v80H120Zm0-160v-80h720v80H120Zm0-160v-80h480v80H120Zm0-160v-80h720v80H120Z'),
+    aligncenter: G('M120-120v-80h720v80H120Zm160-160v-80h400v80H280ZM120-440v-80h720v80H120Zm160-160v-80h400v80H280ZM120-760v-80h720v80H120Z'),
+    alignright: G('M120-760v-80h720v80H120Zm240 160v-80h480v80H360ZM120-440v-80h720v80H120Zm240 160v-80h480v80H360ZM120-120v-80h720v80H120Z'),
+    alignjustify: G('M120-120v-80h720v80H120Zm0-160v-80h720v80H120Zm0-160v-80h720v80H120Zm0-160v-80h720v80H120Zm0-160v-80h720v80H120Z'),
+    fullscreen: G('M120-120v-200h80v120h120v80H120Zm520 0v-80h120v-120h80v200H640ZM120-640v-200h200v80H200v120h-80Zm640 0v-120H640v-80h200v200h-80Z'),
+    clearformatic: G('m528-546-93-93-121-121h486v120H568l-40 94ZM792-56 460-388l-80 188H249l119-280L56-792l56-56 736 736-56 56Z'),
+    numlist: G('M120-80v-60h100v-30h-60v-60h60v-30H120v-60h120q17 0 28.5 11.5T280-280v40q0 17-11.5 28.5T240-200q17 0 28.5 11.5T280-160v40q0 17-11.5 28.5T240-80H120Zm0-280v-110q0-17 11.5-28.5T160-510h60v-30H120v-60h120q17 0 28.5 11.5T280-560v70q0 17-11.5 28.5T240-450h-60v30h100v60H120Zm60-280v-180h-60v-60h120v240h-60Zm180 440v-80h480v80H360Zm0-240v-80h480v80H360Zm0-240v-80h480v80H360Z'),
+    bullist: G('M360-200v-80h480v80H360Zm0-240v-80h480v80H360Zm0-240v-80h480v80H360ZM200-160q-33 0-56.5-23.5T120-240q0-33 23.5-56.5T200-320q33 0 56.5 23.5T280-240q0 33-23.5 56.5T200-160Zm0-240q-33 0-56.5-23.5T120-480q0-33 23.5-56.5T200-560q33 0 56.5 23.5T280-480q0 33-23.5 56.5T200-400Zm-56.5-263.5Q120-687 120-720t23.5-56.5Q167-800 200-800t56.5 23.5Q280-753 280-720t-23.5 56.5Q233-640 200-640t-56.5-23.5Z'),
+    chev: S('<path d="M2 3.5 6 7.5 10 3.5"/>', '0 0 12 11'),
+    backcolor: G('M440-80q-33 0-56.5-23.5T360-160v-160H240q-33 0-56.5-23.5T160-400v-280q0-66 47-113t113-47h480v440q0 33-23.5 56.5T720-320H600v160q0 33-23.5 56.5T520-80h-80ZM240-560h480v-200h-40v160h-80v-160h-40v80h-80v-80H320q-33 0-56.5 23.5T240-680v120Zm0 160h480v-80H240v80Zm0 0v-80 80Z'),
+    outdent: G('M120-120v-80h720v80H120Zm320-160v-80h400v80H440Zm0-160v-80h400v80H440Zm0-160v-80h400v80H440ZM120-760v-80h720v80H120Zm160 440L120-480l160-160v320Z'),
+    indent: G('M120-120v-80h720v80H120Zm320-160v-80h400v80H440Zm0-160v-80h400v80H440Zm0-160v-80h400v80H440ZM120-760v-80h720v80H120Zm0 440v-320l160 160-160 160Z'),
+    more: S('<circle class="f" cx="5" cy="12" r="1.7"/><circle class="f" cx="12" cy="12" r="1.7"/><circle class="f" cx="19" cy="12" r="1.7"/>'),
+    image: G('M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z'),
+    uploadic: G('M440-200v-326L336-422l-56-58 200-200 200 200-56 58-104-104v326h-80ZM240-80q-33 0-56.5-23.5T160-160v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-80H240Z'),
+    tableic: G('M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm240-240H200v160h240v-160Zm80 0v160h240v-160H520Zm-80-80v-160H200v160h240Zm80 0h240v-160H520v160ZM200-680h560v-80H200v80Z'),
+    hric: S('<path d="M4 12h16"/>'),
+    charic: G('M120-120v-120h200q-84-45-132-125t-48-175q0-142 99-241t241-99q142 0 241 99t99 241q0 95-48 175T640-240h200v120H520v-204q78-14 129-75t51-141q0-92-64-156t-156-64q-92 0-156 64t-64 156q0 80 51 141t129 75v204H120Z'),
+    dateic: S('<rect x="4" y="6" width="16" height="14" rx="1.5"/><path d="M4 10h16M8 4v4M16 4v4"/>'),
+    pbic: G('M240-80q-33 0-56.5-23.5T160-160v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-80H240Zm-80-440v-280q0-33 23.5-56.5T240-880h320l240 240v120h-80v-80H520v-200H240v280h-80Zm200 160v-80h240v80H360Zm320 0v-80h240v80H680Zm-640 0v-80h240v80H40Zm440-160Zm0 240Z'),
+    nbspic: S('<path d="M6 12v4h12v-4"/>'),
+    srcic: G('M240-280 40-480l200-200 56 56-143 144 143 144-56 56Zm178 132-76-24 200-640 76 24-200 640Zm302-132-56-56 143-144-143-144 56-56 200 200-200 200Z'),
+    prevw: G('M607.5-372.5Q660-425 660-500t-52.5-127.5Q555-680 480-680t-127.5 52.5Q300-575 300-500t52.5 127.5Q405-320 480-320t127.5-52.5Zm-204-51Q372-455 372-500t31.5-76.5Q435-608 480-608t76.5 31.5Q588-545 588-500t-31.5 76.5Q525-392 480-392t-76.5-31.5ZM214-281.5Q94-363 40-500q54-137 174-218.5T480-800q146 0 266 81.5T920-500q-54 137-174 218.5T480-200q-146 0-266-81.5ZM480-500Zm207.5 160.5Q782-399 832-500q-50-101-144.5-160.5T480-720q-113 0-207.5 59.5T128-500q50 101 144.5 160.5T480-280q113 0 207.5-59.5Z'),
+    printic: G('M640-640v-120H320v120h-80v-200h480v200h-80Zm-480 80h640-640Zm560 100q17 0 28.5-11.5T760-500q0-17-11.5-28.5T720-540q-17 0-28.5 11.5T680-500q0 17 11.5 28.5T720-460Zm-80 260v-160H320v160h320Zm80 80H240v-160H80v-240q0-51 35-85.5t85-34.5h560q51 0 85.5 34.5T880-520v240H720v160Zm80-240v-160q0-17-11.5-28.5T760-560H200q-17 0-28.5 11.5T160-520v160h80v-80h480v80h80Z'),
+    cutic: G('M760-120 480-400l-94 94q8 15 11 32t3 34q0 66-47 113T240-80q-66 0-113-47T80-240q0-66 47-113t113-47q17 0 34 3t32 11l94-94-94-94q-15 8-32 11t-34 3q-66 0-113-47T80-720q0-66 47-113t113-47q66 0 113 47t47 113q0 17-3 34t-11 32l494 494v40H760ZM600-520l-80-80 240-240h120v40L600-520ZM296.5-663.5Q320-687 320-720t-23.5-56.5Q273-800 240-800t-56.5 23.5Q160-753 160-720t23.5 56.5Q207-640 240-640t56.5-23.5ZM494-466q6-6 6-14t-6-14q-6-6-14-6t-14 6q-6 6-6 14t6 14q6 6 14 6t14-6ZM296.5-183.5Q320-207 320-240t-23.5-56.5Q273-320 240-320t-56.5 23.5Q160-273 160-240t23.5 56.5Q207-160 240-160t56.5-23.5Z'),
+    copyic: G('M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z'),
+    pasteic: G('M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h167q11-35 43-57.5t70-22.5q40 0 71.5 22.5T594-840h166q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560h-80v120H280v-120h-80v560Zm308.5-571.5Q520-783 520-800t-11.5-28.5Q497-840 480-840t-28.5 11.5Q440-817 440-800t11.5 28.5Q463-760 480-760t28.5-11.5Z'),
+    selall: G('M280-280v-400h400v400H280Zm80-80h240v-240H360v240ZM200-200v80q-33 0-56.5-23.5T120-200h80Zm-80-80v-80h80v80h-80Zm0-160v-80h80v80h-80Zm0-160v-80h80v80h-80Zm80-160h-80q0-33 23.5-56.5T200-840v80Zm80 640v-80h80v80h-80Zm0-640v-80h80v80h-80Zm160 640v-80h80v80h-80Zm0-640v-80h80v80h-80Zm160 640v-80h80v80h-80Zm0-640v-80h80v80h-80Zm160 640v-80h80q0 33-23.5 56.5T760-120Zm0-160v-80h80v80h-80Zm0-160v-80h80v80h-80Zm0-160v-80h80v80h-80Zm0-160v-80q33 0 56.5 23.5T840-760h-80Z'),
+    superscriptic: G('M760-600v-80q0-17 11.5-28.5T800-720h80v-40H760v-40h120q17 0 28.5 11.5T920-760v40q0 17-11.5 28.5T880-680h-80v40h120v40H760ZM235-160l185-291-172-269h106l124 200h4l123-200h107L539-451l186 291H618L482-377h-4L342-160H235Z'),
+    subscriptic: G('M760-160v-80q0-17 11.5-28.5T800-280h80v-40H760v-40h120q17 0 28.5 11.5T920-320v40q0 17-11.5 28.5T880-240h-80v40h120v40H760Zm-525-80 185-291-172-269h106l124 200h4l123-200h107L539-531l186 291H618L482-457h-4L342-240H235Z'),
+    newic: S('<path d="M6 3h8l5 5v13H6z"/><path d="M14 3v5h5"/>'),
+    helpic: S('<circle cx="12" cy="12" r="8.5"/><path d="M9.6 9.6a2.5 2.5 0 1 1 3.4 2.6c-.8.3-1 .9-1 1.8"/><circle class="f" cx="12" cy="16.6" r="1.1"/>'),
+    wcic: S('<path d="M4 6h16M4 10h16M4 14h9"/><path d="M15 17.5l2 2 3.6-4"/>'),
+    rowbefore: G('M200-160h560v-240H200v240Zm640 80H120v-720h160v80h-80v240h560v-240h-80v-80h160v720ZM480-480Zm0 80v-80 80Zm0 0Zm-40-240v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80Z'),
+    rowafter: G('M200-560h560v-240H200v240Zm-80 400v-720h720v720H680v-80h80v-240H200v240h80v80H120Zm360-320Zm0-80v80-80Zm0 0ZM440-80v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80Z'),
+    rowdelete: G('M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200ZM200-200h560v-560H200ZM200-400v-160h560v160H200ZM330-580l250 250 50-50-250-250ZM330-380l250-250 50 50-250 250Z'),
+    colbefore: G('M800-200v-560H560v560h240Zm-640 80v-160h80v80h240v-560H240v80h-80v-160h720v720H160Zm320-360Zm80 0h-80 80Zm0 0ZM160-360v-80H80v-80h80v-80h80v80h80v80h-80v80h-80Z'),
+    colafter: G('M160-760v560h240v-560H160ZM80-120v-720h720v160h-80v-80H480v560h240v-80h80v160H80Zm400-360Zm-80 0h80-80Zm0 0Zm320 120v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80Z'),
+    coldelete: G('M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200ZM200-200h560v-560H200ZM400-200v-560h160v560H400ZM330-580l250 250 50-50-250-250ZM330-380l250-250 50 50-250 250Z'),
+    tabledelete: S('<rect x="4" y="5" width="16" height="14" rx="1.5"/><path d="M4 10h16M4 14.5h16M9.5 5v14M14.5 5v14"/><path d="M6.5 6.5l11 11M17.5 6.5l-11 11" stroke-width="2.1"/>'),
+    quote: G('m228-240 92-160q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 23-5.5 42.5T458-480L320-240h-92Zm360 0 92-160q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 23-5.5 42.5T818-480L680-240h-92ZM362.5-517.5Q380-535 380-560t-17.5-42.5Q345-620 320-620t-42.5 17.5Q260-585 260-560t17.5 42.5Q295-500 320-500t42.5-17.5Zm360 0Q740-535 740-560t-17.5-42.5Q705-620 680-620t-42.5 17.5Q620-585 620-560t17.5 42.5Q655-500 680-500t42.5-17.5ZM680-560Zm-360 0Z'),
+    link: G('M440-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h160v80H280q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h320v80H320Zm200 160v-80h160q50 0 85-35t35-85q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H520Z'),
+    unlink: S('<path d="M13.5 6.5l1.7-1.7a4 4 0 0 1 5.6 5.6L19 12.2"/><path d="M10.5 17.5l-1.7 1.7a4 4 0 0 1-5.6-5.6L5 11.8"/><path d="M4 4l16 16"/>'),
+    lineheight: G('M240-160 80-320l56-56 64 62v-332l-64 62-56-56 160-160 160 160-56 56-64-62v332l64-62 56 56-160 160Zm240-40v-80h400v80H480Zm0-240v-80h400v80H480Zm0-240v-80h400v80H480Z'),
+    wordspacing: G('M320-80 160-240l160-160 57 56-64 64h334l-63-64 56-56 160 160L640-80l-57-56 64-64H313l63 64-56 56ZM200-480v-400h80v400h-80Zm240 0v-400h80v400h-80Zm240 0v-400h80v400h-80Z'),
+    caseic: G('m131-252 165-440h79l165 440h-76l-39-112H247l-40 112h-76Zm139-176h131l-64-182h-4l-63 182Zm395 186q-51 0-81-27.5T554-342q0-44 34.5-72.5T677-443q23 0 45 4t38 11v-12q0-29-20.5-47T685-505q-23 0-42 9.5T610-468l-47-35q24-29 54.5-43t68.5-14q69 0 103 32.5t34 97.5v178h-63v-37h-4q-14 23-38 35t-53 12Zm12-54q35 0 59.5-24t24.5-56q-14-8-33.5-12.5T689-393q-32 0-50 14t-18 37q0 20 16 33t40 13Z'),
+    uppercaseic: G('M660-240v-248l-64 64-56-56 160-160 160 160-56 56-64-64v248h-80Zm-540 0 165-440h79l165 440h-76l-39-113H236l-40 113h-76Zm139-177h131l-65-182h-4l-62 182Z'),
+    lowercaseic: G('M300-240q-51 0-81-27.5T189-340q0-44 34.5-72.5T312-441q23 0 45 4t38 11v-12q0-29-20.5-47T320-503q-23 0-42 9.5T245-466l-47-35q24-29 54.5-43t68.5-14q69 0 103 32.5t34 97.5v178h-63v-37h-4q-14 23-38 35t-53 12Zm12-54q35 0 59.5-24t24.5-56q-14-8-33.5-12.5T324-391q-32 0-50 14t-18 37q0 20 16 33t40 13Zm388 54L540-400l56-56 64 64v-248h80v248l64-64 56 56-160 160Z'),
+    capitalizeic: G('M344-250v-366H224v-64h308v64H412v366h-68Zm344 10q-44 0-69-25.5T594-336v-162h-54v-58h54v-87h66v87h74v58h-74v148q0 23 10.5 36t28.5 13q9 0 18.5-3.5T736-314v65q-10 5-22 7t-26 2Z'),
+    plus: S('<path d="M12 5.5v13M5.5 12h13"/>'),
+    minus: S('<path d="M5.5 12h13"/>'),
+    fontsizeup: G('m40-200 210-560h100l210 560h-96l-51-143H187l-51 143H40Zm176-224h168l-82-232h-4l-82 232Zm504 104v-120H600v-80h120v-120h80v120h120v80H800v120h-80Z'),
+    fontsizedown: G('m40-200 210-560h100l210 560h-96l-51-143H187l-51 143H40Zm176-224h168l-82-232h-4l-82 232Zm384-16v-80h320v80H600Z'),
+    historyic: G('M480-120q-138 0-240.5-91.5T122-440h82q14 104 92.5 172T480-200q117 0 198.5-81.5T760-480q0-117-81.5-198.5T480-760q-69 0-129 32t-101 88h110v80H120v-240h80v94q51-64 124.5-99T480-840q75 0 140.5 28.5t114 77q48.5 48.5 77 114T840-480q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T480-120Zm112-192L440-464v-216h80v184l128 128-56 56Z'),
+    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"/>'),
+    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"/>'),
+    flipvertical: S('<path d="M3 12h18"/><path d="M8 7l4-4 4 4"/><path d="M8 17l4 4 4-4"/>'),
+    check: S('<path d="M5 12.5 9.5 17 19 7"/>'),
+    palette: S('<path d="M12 3a9 9 0 1 0 0 18h1.2a2 2 0 0 0 2-2 2 2 0 0 1 2-2H18a3 3 0 0 0 3-3c0-6.1-4.5-11-9-11z"/><circle class="f" cx="7.8" cy="10.2" r="1.3"/><circle class="f" cx="11.6" cy="7.3" r="1.3"/><circle class="f" cx="15.8" cy="9.6" r="1.3"/><circle class="f" cx="9" cy="14.8" r="1.3"/>'),
+    ul_circle: G('M280-600v-80h560v80H280Zm0 160v-80h560v80H280Zm0 160v-80h560v80H280ZM160-600q-17 0-28.5-11.5T120-640q0-17 11.5-28.5T160-680q17 0 28.5 11.5T200-640q0 17-11.5 28.5T160-600Zm0 160q-17 0-28.5-11.5T120-480q0-17 11.5-28.5T160-520q17 0 28.5 11.5T200-480q0 17-11.5 28.5T160-440Zm0 160q-17 0-28.5-11.5T120-320q0-17 11.5-28.5T160-360q17 0 28.5 11.5T200-320q0 17-11.5 28.5T160-280Z'),
+    ul_square: G('M80-160v-160h160v160H80Zm240 0v-160h560v160H320ZM80-400v-160h160v160H80Zm240 0v-160h560v160H320ZM80-640v-160h160v160H80Zm240 0v-160h560v160H320Z'),
+    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)
+};
+const TXT = (html) => `<span class="txt">${html}</span>`;
+
+const ALLOWED_TAGS = new Set([
+    'p',
+    'div',
+    'span',
+    'br',
+    'hr',
+    'a',
+    'b',
+    'strong',
+    'i',
+    'em',
+    'u',
+    's',
+    'strike',
+    'sub',
+    'sup',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'blockquote',
+    'pre',
+    'code',
+    'ul',
+    'ol',
+    'li',
+    'table',
+    'thead',
+    'tbody',
+    'tfoot',
+    'tr',
+    'td',
+    'th',
+    'caption',
+    'colgroup',
+    'col',
+    'img',
+    'figure',
+    'figcaption',
+    'mark'
+]);
+const ALLOWED_STYLES = new Set([
+    'text-align',
+    'direction',
+    'unicode-bidi',
+    'font-weight',
+    'font-style',
+    'text-decoration',
+    'text-decoration-line',
+    'color',
+    'background-color',
+    'background',
+    'background-image',
+    'background-position',
+    'background-repeat',
+    'background-size',
+    'font-size',
+    'font-family',
+    'line-height',
+    'letter-spacing',
+    'vertical-align',
+    'text-indent',
+    'margin',
+    'margin-top',
+    'margin-bottom',
+    'margin-left',
+    'margin-right',
+    'margin-inline-start',
+    'margin-inline-end',
+    'padding',
+    'padding-top',
+    'padding-bottom',
+    'padding-left',
+    'padding-right',
+    'width',
+    'height',
+    'min-width',
+    'max-width',
+    'min-height',
+    'max-height',
+    'border',
+    'border-top',
+    'border-right',
+    'border-bottom',
+    'border-left',
+    'border-color',
+    'border-style',
+    'border-width',
+    'border-radius',
+    'border-collapse',
+    'border-spacing',
+    'table-layout',
+    'float',
+    'display',
+    'box-sizing',
+    'list-style-type',
+    'white-space'
+]);
+const ALLOWED_ATTRS = {
+    '*': ['dir', 'lang', 'colspan', 'rowspan'],
+    a: ['href', 'target', 'rel', 'title'],
+    img: ['src', 'alt', 'width', 'height', 'title'],
+    col: ['span', 'width'],
+    td: ['width', 'valign'],
+    th: ['width', 'valign'],
+    table: ['width', 'cellpadding', 'cellspacing']
+};
+function styleMap(el) {
+    const map = {};
+    const raw = el.getAttribute && el.getAttribute('style');
+    if (!raw)
+        return map;
+    raw.split(';').forEach((p) => {
+        const i = p.indexOf(':');
+        if (i < 1)
+            return;
+        map[p.slice(0, i).trim().toLowerCase()] = p.slice(i + 1).trim();
+    });
+    return map;
+}
+function preClean(html) {
+    return html
+        .replace(/<!--\[if !supportLists\]-->([\s\S]*?)<!--\[endif\]-->/gi, '$1')
+        .replace(/<!--\[if !supportLists\]>([\s\S]*?)<!\[endif\]-->/gi, '$1')
+        .replace(/<!\[if !supportLists\]>([\s\S]*?)<!\[endif\]>/gi, '$1')
+        .replace(/<!--\[if [\s\S]*?<!\[endif\]-->/gi, '')
+        .replace(/<!--[\s\S]*?-->/g, '')
+        .replace(/<(script|style|xml|title)[\s\S]*?<\/\1>/gi, '')
+        .replace(/<\/?(meta|link)[^>]*>/gi, '')
+        .replace(/<\?xml[\s\S]*?\?>/gi, '')
+        .replace(/<\/?(o|v|w|m|st1):[^>]*>/gi, '');
+}
+function markerType(mt) {
+    if (/^[0-9]+[\.\)،]/.test(mt))
+        return { ordered: true };
+    if (/^[٠-٩۰-۹]+/.test(mt))
+        return { ordered: true, style: 'arabic-indic' };
+    if (/^[ivxlc]{2,}[\.\)]/.test(mt))
+        return { ordered: true, style: 'lower-roman' };
+    if (/^[IVXLC]{2,}[\.\)]/.test(mt))
+        return { ordered: true, style: 'upper-roman' };
+    if (/^[a-z][\.\)]/.test(mt))
+        return { ordered: true, style: 'lower-alpha' };
+    if (/^[A-Z][\.\)]/.test(mt))
+        return { ordered: true, style: 'upper-alpha' };
+    if (/^[ء-ي][\.\)،-]/.test(mt))
+        return { ordered: true, style: 'arabic-indic' };
+    return { ordered: false };
+}
+function rebuildWordLists(doc) {
+    const isListP = (p) => {
+        const s = (p.getAttribute('style') || '') + ' ' + (p.className || '');
+        return /mso-list\s*:(?!\s*ignore)/i.test(s) || /MsoListParagraph/i.test(s);
+    };
+    const groups = [];
+    let cur = null;
+    Array.from(doc.body.querySelectorAll('p')).forEach((p) => {
+        if (!isListP(p)) {
+            cur = null;
+            return;
+        }
+        const prev = p.previousElementSibling;
+        if (cur && prev && cur[cur.length - 1] === prev)
+            cur.push(p);
+        else {
+            cur = [p];
+            groups.push(cur);
+        }
+    });
+    groups.forEach((group) => {
+        const stack = [];
+        const rootAnchor = group[0];
+        group.forEach((p) => {
+            const style = p.getAttribute('style') || '';
+            const level = +(style.match(/level(\d+)/i)?.[1] || 1);
+            const marker = Array.from(p.querySelectorAll('span')).find((sp) => /mso-list\s*:\s*ignore/i.test(sp.getAttribute('style') || ''));
+            const mt = marker
+                ? marker.textContent?.trim() || ''
+                : (p.textContent?.trim().match(/^\S{1,4}/) || [''])[0];
+            const { ordered, style: listStyle } = markerType(mt);
+            if (marker)
+                marker.remove();
+            while (stack.length && stack[stack.length - 1].level > level)
+                stack.pop();
+            if (!stack.length || stack[stack.length - 1].level < level) {
+                const list = doc.createElement(ordered ? 'ol' : 'ul');
+                if (ordered && listStyle)
+                    list.style.listStyleType = listStyle;
+                if (stack.length) {
+                    const par = stack[stack.length - 1].list;
+                    (par.lastElementChild || par).appendChild(list);
+                }
+                else {
+                    rootAnchor.parentNode.insertBefore(list, rootAnchor);
+                }
+                stack.push({ list, level });
+            }
+            const li = doc.createElement('li');
+            const keep = styleMap(p);
+            const kept = ['text-align', 'direction', 'unicode-bidi', 'color', 'font-size', 'font-family', 'background-color']
+                .filter((k) => keep[k])
+                .map((k) => k + ':' + keep[k])
+                .join(';');
+            if (kept)
+                li.setAttribute('style', kept);
+            if (p.getAttribute('dir'))
+                li.setAttribute('dir', p.getAttribute('dir'));
+            while (p.firstChild)
+                li.appendChild(p.firstChild);
+            stack[stack.length - 1].list.appendChild(li);
+            p.remove();
+        });
+    });
+}
+function fixGoogleDocs(doc) {
+    doc.querySelectorAll('b[id^="docs-internal-guid"]').forEach((b) => {
+        while (b.firstChild)
+            b.parentNode.insertBefore(b.firstChild, b);
+        b.remove();
+    });
+}
+function fixLegacyAttrs(doc) {
+    doc.querySelectorAll('table').forEach((tb) => {
+        const htmlTb = tb;
+        if (!styleMap(htmlTb)['border-collapse'])
+            htmlTb.style.borderCollapse = 'collapse';
+    });
+    doc.querySelectorAll('[align]').forEach((el) => {
+        const htmlEl = el;
+        const v = htmlEl.getAttribute('align').toLowerCase();
+        if (htmlEl.tagName.toLowerCase() === 'table') {
+            if (v === 'center') {
+                htmlEl.style.marginLeft = htmlEl.style.marginLeft || 'auto';
+                htmlEl.style.marginRight = htmlEl.style.marginRight || 'auto';
+            }
+            else if (v === 'right')
+                htmlEl.style.marginLeft = htmlEl.style.marginLeft || 'auto';
+            else if (v === 'left')
+                htmlEl.style.marginRight = htmlEl.style.marginRight || 'auto';
+        }
+        else if (['left', 'right', 'center', 'justify'].includes(v)) {
+            htmlEl.style.textAlign = htmlEl.style.textAlign || v;
+            // Word aligns tables by wrapping them in <div align=...>; text-align
+            // does not move a table box, so mirror the alignment onto the table.
+            Array.from(htmlEl.children).forEach((ch) => {
+                if (ch.tagName.toLowerCase() !== 'table')
+                    return;
+                const tb = ch;
+                if (v === 'center') {
+                    tb.style.marginLeft = tb.style.marginLeft || 'auto';
+                    tb.style.marginRight = tb.style.marginRight || 'auto';
+                }
+                else if (v === 'right')
+                    tb.style.marginLeft = tb.style.marginLeft || 'auto';
+                else if (v === 'left')
+                    tb.style.marginRight = tb.style.marginRight || 'auto';
+            });
+        }
+        htmlEl.removeAttribute('align');
+    });
+    doc.querySelectorAll('center table').forEach((tb) => {
+        const htmlTb = tb;
+        htmlTb.style.marginLeft = htmlTb.style.marginLeft || 'auto';
+        htmlTb.style.marginRight = htmlTb.style.marginRight || 'auto';
+    });
+    doc.querySelectorAll('[bgcolor]').forEach((el) => {
+        const htmlEl = el;
+        htmlEl.style.backgroundColor = htmlEl.style.backgroundColor || htmlEl.getAttribute('bgcolor');
+        htmlEl.removeAttribute('bgcolor');
+    });
+}
+function sanitize(node, doc) {
+    Array.from(node.childNodes).forEach((child) => {
+        if (child.nodeType === Node.COMMENT_NODE) {
+            child.remove();
+            return;
+        }
+        if (child.nodeType !== Node.ELEMENT_NODE)
+            return;
+        const el = child;
+        const tag = el.tagName.toLowerCase();
+        if (!ALLOWED_TAGS.has(tag)) {
+            if (tag === 'font') {
+                const span = doc.createElement('span');
+                if (el.getAttribute('style'))
+                    span.setAttribute('style', el.getAttribute('style'));
+                if (el.getAttribute('color'))
+                    span.style.color = el.getAttribute('color');
+                if (el.getAttribute('face'))
+                    span.style.fontFamily = el.getAttribute('face');
+                const sz = el.getAttribute('size');
+                if (sz && !span.style.fontSize) {
+                    const szMap = {
+                        '1': '8pt',
+                        '2': '10pt',
+                        '3': '12pt',
+                        '4': '14pt',
+                        '5': '18pt',
+                        '6': '24pt',
+                        '7': '36pt'
+                    };
+                    if (szMap[sz])
+                        span.style.fontSize = szMap[sz];
+                }
+                while (el.firstChild)
+                    span.appendChild(el.firstChild);
+                el.replaceWith(span);
+                sanitize(span, doc);
+                return;
+            }
+            sanitize(el, doc);
+            while (el.firstChild)
+                el.parentNode.insertBefore(el.firstChild, el);
+            el.remove();
+            return;
+        }
+        const allowed = new Set([...(ALLOWED_ATTRS['*'] || []), ...(ALLOWED_ATTRS[tag] || [])]);
+        Array.from(el.attributes).forEach((a) => {
+            const n = a.name.toLowerCase();
+            if (n !== 'style' && !allowed.has(n))
+                el.removeAttribute(a.name);
+        });
+        if (tag === 'a') {
+            const href = el.getAttribute('href') || '';
+            if (!/^(https?:|mailto:|tel:|#)/i.test(href))
+                el.removeAttribute('href');
+        }
+        if (tag === 'img') {
+            const src = el.getAttribute('src') || '';
+            if (!/^(https?:|data:image\/|blob:)/i.test(src)) {
+                const ph = doc.createElement('span');
+                ph.textContent = '[local image — paste it separately]';
+                ph.setAttribute('style', 'color:#a33;font-style:italic;font-size:12px');
+                el.replaceWith(ph);
+                return;
+            }
+        }
+        const styles = styleMap(el);
+        const kept = [];
+        for (const [k, v] of Object.entries(styles)) {
+            if (!ALLOWED_STYLES.has(k))
+                continue;
+            if (/expression|javascript|url\s*\(\s*['"]?\s*file:/i.test(v))
+                continue;
+            if (k === 'font-weight' && /^(400|normal)$/i.test(v))
+                continue;
+            if (k === 'font-style' && /^normal$/i.test(v))
+                continue;
+            if (k === 'text-decoration' && /^none$/i.test(v))
+                continue;
+            kept.push(k + ':' + v);
+        }
+        if (kept.length)
+            el.setAttribute('style', kept.join(';'));
+        else
+            el.removeAttribute('style');
+        el.removeAttribute('class');
+        sanitize(el, doc);
+        if (tag === 'span' && !el.attributes.length) {
+            while (el.firstChild)
+                el.parentNode.insertBefore(el.firstChild, el);
+            el.remove();
+        }
+    });
+}
+function extractStyleRules(raw) {
+    const rules = [];
+    const re = /<style[^>]*>([\s\S]*?)<\/style>/gi;
+    let m;
+    while ((m = re.exec(raw))) {
+        let css = m[1].replace(/<!--|-->/g, '').replace(/\/\*[\s\S]*?\*\//g, '');
+        css = css.replace(/@media[^{]*\{(?:[^{}]*\{[^{}]*\})*[^{}]*\}/gi, '');
+        css = css.replace(/@[\w-]+[^{]*\{[^{}]*\}/g, '');
+        let rm;
+        const rre = /([^{}]+)\{([^}]*)\}/g;
+        while ((rm = rre.exec(css))) {
+            const decls = rm[2]
+                .split(';')
+                .map((d) => {
+                const i = d.indexOf(':');
+                if (i < 1)
+                    return null;
+                return [d.slice(0, i).trim().toLowerCase(), d.slice(i + 1).trim()];
+            })
+                .filter((d) => !!d && !!d[1]);
+            if (!decls.length)
+                continue;
+            rm[1]
+                .split(',')
+                .map((s) => s.trim())
+                .filter((s) => s && !s.startsWith('@'))
+                .forEach((sel) => rules.push({ sel, decls }));
+        }
+    }
+    return rules;
+}
+function applyStyleRules(doc, rules) {
+    if (!rules.length)
+        return;
+    const addMap = new Map();
+    rules.forEach(({ sel, decls }) => {
+        let els;
+        try {
+            els = doc.querySelectorAll(sel);
+        }
+        catch (e) {
+            return;
+        }
+        els.forEach((el) => {
+            let m = addMap.get(el);
+            if (!m) {
+                m = {};
+                addMap.set(el, m);
+            }
+            decls.forEach(([k, v]) => {
+                m[k] = v;
+            });
+        });
+    });
+    addMap.forEach((m, el) => {
+        const have = styleMap(el);
+        const hasDir = el.hasAttribute('dir');
+        const hasAlign = el.hasAttribute('align');
+        const add = Object.entries(m).filter(([k]) => {
+            if (k in have)
+                return false;
+            if ((k === 'direction' || k === 'unicode-bidi') && hasDir)
+                return false;
+            if (k === 'text-align' && (hasAlign || hasDir))
+                return false;
+            if ((k === 'background' || k === 'background-color') && el.hasAttribute('bgcolor'))
+                return false;
+            return true;
+        });
+        if (!add.length)
+            return;
+        const prefix = add.map(([k, v]) => k + ':' + v).join(';');
+        const cur = el.getAttribute('style');
+        el.setAttribute('style', cur ? prefix + ';' + cur : prefix);
+    });
+}
+function normalizeArabicPresentation(s) {
+    return s.replace(/[ﭐ-﷿ﹰ-ﻼ]+/g, (m) => m.normalize('NFKC'));
+}
+function normalizeArabicText(doc) {
+    const w = doc.createTreeWalker(doc.body, NodeFilter.SHOW_TEXT, null);
+    let n;
+    while ((n = w.nextNode()))
+        if (/[ﭐ-﷿ﹰ-ﻼ]/.test(n.nodeValue || ''))
+            n.nodeValue = normalizeArabicPresentation(n.nodeValue || '');
+}
+function cleanPastedHTML(raw, editorDir = 'ltr') {
+    const cssRules = extractStyleRules(raw);
+    const doc = new DOMParser().parseFromString(preClean(raw), 'text/html');
+    applyStyleRules(doc, cssRules);
+    if (/class="?Mso|mso-|urn:schemas-microsoft-com/i.test(doc.body.innerHTML))
+        rebuildWordLists(doc);
+    fixGoogleDocs(doc);
+    fixLegacyAttrs(doc);
+    sanitize(doc.body, doc);
+    normalizeArabicText(doc);
+    const emptyP = (el) => el && el.tagName === 'P' && !el.textContent?.trim() && !el.querySelector('img,table');
+    while (emptyP(doc.body.firstElementChild))
+        doc.body.firstElementChild.remove();
+    while (emptyP(doc.body.lastElementChild))
+        doc.body.lastElementChild.remove();
+    return doc.body.innerHTML.trim();
+}
+function normalizeTextPaste(raw) {
+    const txt = normalizeArabicPresentation(raw).replace(/\r/g, '');
+    const esc = (s) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    if (/\n/.test(txt)) {
+        return txt
+            .split(/\n{2,}/)
+            .map((par) => `<p dir="auto">${esc(par).replace(/\n/g, '<br>') || '<br>'}</p>`)
+            .join('');
+    }
+    return esc(txt);
+}
+
+/* Minimal .docx → HTML converter with no dependencies.
+   Parses the ZIP container manually and inflates entries with the browser's
+   DecompressionStream, then maps WordprocessingML to editor-friendly HTML:
+   headings, run formatting, colors, hyperlinks, lists, tables and images. */
+function parseZip(buf) {
+    const d = new DataView(buf);
+    const entries = new Map();
+    // find End Of Central Directory record (sig 0x06054b50), scanning back over the comment
+    let eocd = -1;
+    for (let i = buf.byteLength - 22; i >= Math.max(0, buf.byteLength - 22 - 0xffff); i--) {
+        if (d.getUint32(i, true) === 0x06054b50) {
+            eocd = i;
+            break;
+        }
+    }
+    if (eocd < 0)
+        throw new Error('EOCD not found');
+    const count = d.getUint16(eocd + 10, true);
+    let p = d.getUint32(eocd + 16, true);
+    const utf8 = new TextDecoder();
+    for (let i = 0; i < count; i++) {
+        if (d.getUint32(p, true) !== 0x02014b50)
+            break;
+        const method = d.getUint16(p + 10, true);
+        const compSize = d.getUint32(p + 20, true);
+        const nameLen = d.getUint16(p + 28, true);
+        const extraLen = d.getUint16(p + 30, true);
+        const commentLen = d.getUint16(p + 32, true);
+        const localOffset = d.getUint32(p + 42, true);
+        const name = utf8.decode(new Uint8Array(buf, p + 46, nameLen));
+        entries.set(name, { name, method, compSize, localOffset });
+        p += 46 + nameLen + extraLen + commentLen;
+    }
+    return entries;
+}
+async function readEntry(buf, e) {
+    const d = new DataView(buf, e.localOffset);
+    if (d.getUint32(0, true) !== 0x04034b50)
+        throw new Error('Bad local header');
+    const nameLen = d.getUint16(26, true);
+    const extraLen = d.getUint16(28, true);
+    const start = e.localOffset + 30 + nameLen + extraLen;
+    const comp = new Uint8Array(buf.slice(start, start + e.compSize));
+    if (e.method === 0)
+        return comp;
+    if (e.method !== 8)
+        throw new Error('Unsupported compression method ' + e.method);
+    const stream = new Blob([comp]).stream().pipeThrough(new DecompressionStream('deflate-raw'));
+    return new Uint8Array(await new Response(stream).arrayBuffer());
+}
+/* ------------------------------------------------------------- helpers */
+const esc = (s) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+const kids = (el, name) => Array.from(el.children).filter((c) => c.localName === name);
+const kid = (el, ...path) => {
+    let cur = el;
+    for (const name of path) {
+        if (!cur)
+            return null;
+        cur = Array.from(cur.children).find((c) => c.localName === name) || null;
+    }
+    return cur;
+};
+const val = (el, attrName = 'val') => {
+    if (!el)
+        return '';
+    for (const a of Array.from(el.attributes)) {
+        if (a.localName === attrName)
+            return a.value;
+    }
+    return '';
+};
+/** A toggle property like <w:b/> is on unless val is explicitly false/0. */
+const flagOn = (rPr, name) => {
+    const el = rPr ? kid(rPr, name) : null;
+    if (!el)
+        return false;
+    const v = val(el);
+    return v !== 'false' && v !== '0';
+};
+const HIGHLIGHTS = {
+    yellow: '#FFFF00',
+    green: '#00FF00',
+    cyan: '#00FFFF',
+    magenta: '#FF00FF',
+    blue: '#0000FF',
+    red: '#FF0000',
+    darkBlue: '#00008B',
+    darkCyan: '#008B8B',
+    darkGreen: '#006400',
+    darkMagenta: '#8B008B',
+    darkRed: '#8B0000',
+    darkYellow: '#808000',
+    darkGray: '#A9A9A9',
+    lightGray: '#D3D3D3',
+    black: '#000000',
+    white: '#FFFFFF'
+};
+const IMG_MIME = {
+    png: 'image/png',
+    jpg: 'image/jpeg',
+    jpeg: 'image/jpeg',
+    gif: 'image/gif',
+    bmp: 'image/bmp',
+    webp: 'image/webp'
+};
+function toBase64(bytes) {
+    let bin = '';
+    for (let i = 0; i < bytes.length; i += 0x8000) {
+        bin += String.fromCharCode(...bytes.subarray(i, i + 0x8000));
+    }
+    return btoa(bin);
+}
+/* ------------------------------------------------------------- converter */
+class DocxConverter {
+    rels;
+    images;
+    numFmt;
+    constructor(rels, images, numFmt) {
+        this.rels = rels;
+        this.images = images;
+        this.numFmt = numFmt;
+    }
+    convertBody(body) {
+        let html = '';
+        // stack of open lists for nested numbering
+        let listStack = [];
+        const closeLists = (depth) => {
+            while (listStack.length > depth)
+                html += `</${listStack.pop()}>`;
+        };
+        for (const child of Array.from(body.children)) {
+            if (child.localName === 'p') {
+                const list = this.paraList(child);
+                if (list) {
+                    const depth = list.ilvl + 1;
+                    while (listStack.length > depth)
+                        html += `</${listStack.pop()}>`;
+                    if (listStack.length === depth && listStack[depth - 1] !== list.type) {
+                        html += `</${listStack.pop()}>`;
+                    }
+                    while (listStack.length < depth) {
+                        html += `<${list.type}>`;
+                        listStack.push(list.type);
+                    }
+                    html += `<li>${this.runsOf(child) || '<br>'}</li>`;
+                    continue;
+                }
+                closeLists(0);
+                html += this.convertPara(child);
+            }
+            else if (child.localName === 'tbl') {
+                closeLists(0);
+                html += this.convertTable(child);
+            }
+            else if (child.localName === 'sectPr') {
+                // section properties — no visual content
+            }
+        }
+        closeLists(0);
+        return html || '<p><br></p>';
+    }
+    paraList(p) {
+        const numPr = kid(p, 'pPr', 'numPr');
+        if (!numPr)
+            return null;
+        const numId = val(kid(numPr, 'numId'));
+        if (!numId || numId === '0')
+            return null;
+        const ilvl = parseInt(val(kid(numPr, 'ilvl')) || '0', 10) || 0;
+        return { type: this.numFmt.get(numId) || 'ul', ilvl: Math.min(ilvl, 8) };
+    }
+    convertPara(p) {
+        const pPr = kid(p, 'pPr');
+        const style = val(kid(p, 'pPr', 'pStyle'));
+        let tag = 'p';
+        const m = /^Heading([1-6])$/i.exec(style);
+        if (m)
+            tag = 'h' + m[1];
+        else if (/^Title$/i.test(style))
+            tag = 'h1';
+        const css = [];
+        const jc = val(kid(p, 'pPr', 'jc'));
+        if (jc === 'center')
+            css.push('text-align:center');
+        else if (jc === 'right' || jc === 'end')
+            css.push('text-align:right');
+        else if (jc === 'both' || jc === 'distribute')
+            css.push('text-align:justify');
+        if (pPr && kid(pPr, 'bidi'))
+            css.push('direction:rtl');
+        const inner = this.runsOf(p);
+        const attrs = css.length ? ` style="${css.join(';')}"` : '';
+        return `<${tag}${attrs}>${inner || '<br>'}</${tag}>`;
+    }
+    runsOf(el) {
+        let html = '';
+        for (const child of Array.from(el.children)) {
+            if (child.localName === 'r')
+                html += this.convertRun(child);
+            else if (child.localName === 'hyperlink') {
+                let href = this.rels.get(val(child, 'id')) || '';
+                const anchor = val(child, 'anchor');
+                if (!href && anchor)
+                    href = '#' + anchor;
+                const inner = this.runsOf(child);
+                html += href ? `<a href="${esc(href)}">${inner}</a>` : inner;
+            }
+            else if (child.localName === 'smartTag' || child.localName === 'ins') {
+                html += this.runsOf(child);
+            }
+        }
+        return html;
+    }
+    convertRun(r) {
+        const rPr = kid(r, 'rPr');
+        let text = '';
+        for (const child of Array.from(r.children)) {
+            if (child.localName === 't')
+                text += esc(child.textContent || '');
+            else if (child.localName === 'br' || child.localName === 'cr')
+                text += '<br>';
+            else if (child.localName === 'tab')
+                text += '&emsp;';
+            else if (child.localName === 'drawing' || child.localName === 'pict' || child.localName === 'object') {
+                text += this.convertImage(child);
+            }
+        }
+        if (!text)
+            return '';
+        const css = [];
+        const color = val(rPr ? kid(rPr, 'color') : null);
+        if (color && color !== 'auto')
+            css.push('color:#' + color);
+        const highlight = val(rPr ? kid(rPr, 'highlight') : null);
+        if (highlight && HIGHLIGHTS[highlight])
+            css.push('background-color:' + HIGHLIGHTS[highlight]);
+        const sz = parseFloat(val(rPr ? kid(rPr, 'sz') : null));
+        if (sz)
+            css.push('font-size:' + Math.round((sz / 2) * (4 / 3)) + 'px');
+        const font = rPr ? kid(rPr, 'rFonts') : null;
+        const fontName = val(font, 'ascii') || val(font, 'cs');
+        if (fontName)
+            css.push(`font-family:'${fontName}'`);
+        if (css.length)
+            text = `<span style="${css.join(';')}">${text}</span>`;
+        if (flagOn(rPr, 'b'))
+            text = `<strong>${text}</strong>`;
+        if (flagOn(rPr, 'i'))
+            text = `<em>${text}</em>`;
+        if (flagOn(rPr, 'u') && val(kid(rPr, 'u')) !== 'none')
+            text = `<u>${text}</u>`;
+        if (flagOn(rPr, 'strike'))
+            text = `<s>${text}</s>`;
+        const vert = val(rPr ? kid(rPr, 'vertAlign') : null);
+        if (vert === 'superscript')
+            text = `<sup>${text}</sup>`;
+        else if (vert === 'subscript')
+            text = `<sub>${text}</sub>`;
+        return text;
+    }
+    convertImage(holder) {
+        // find any blip (DrawingML) or imagedata (VML) descendant regardless of depth
+        let relId = '';
+        let widthPx = 0;
+        const walk = (el) => {
+            if (el.localName === 'blip')
+                relId = relId || val(el, 'embed') || val(el, 'link');
+            if (el.localName === 'imagedata')
+                relId = relId || val(el, 'id');
+            if (el.localName === 'extent') {
+                const cx = parseFloat(el.getAttribute('cx') || '0');
+                if (cx)
+                    widthPx = Math.round(cx / 9525); // EMU → px
+            }
+            for (const c of Array.from(el.children))
+                walk(c);
+        };
+        walk(holder);
+        if (!relId)
+            return '';
+        const src = this.images.get(relId);
+        if (!src)
+            return '';
+        const w = widthPx ? ` width="${widthPx}"` : '';
+        return `<img src="${src}" alt=""${w}>`;
+    }
+    convertTable(tbl) {
+        let html = '<table style="border-collapse:collapse;width:100%"><tbody>';
+        for (const tr of kids(tbl, 'tr')) {
+            html += '<tr>';
+            for (const tc of kids(tr, 'tc')) {
+                const span = parseInt(val(kid(tc, 'tcPr', 'gridSpan')) || '1', 10) || 1;
+                const spanAttr = span > 1 ? ` colspan="${span}"` : '';
+                let inner = '';
+                for (const child of Array.from(tc.children)) {
+                    if (child.localName === 'p')
+                        inner += this.convertPara(child);
+                    else if (child.localName === 'tbl')
+                        inner += this.convertTable(child);
+                }
+                html += `<td style="border:1px solid #b9c2cc"${spanAttr}>${inner || '<br>'}</td>`;
+            }
+            html += '</tr>';
+        }
+        return html + '</tbody></table>';
+    }
+}
+/* ------------------------------------------------------------- entry point */
+async function importDocxToHtml(input) {
+    const buf = input instanceof ArrayBuffer ? input : await input.arrayBuffer();
+    const entries = parseZip(buf);
+    const decoder = new TextDecoder();
+    const readXml = async (name) => {
+        const e = entries.get(name);
+        if (!e)
+            return null;
+        return new DOMParser().parseFromString(decoder.decode(await readEntry(buf, e)), 'application/xml');
+    };
+    const doc = await readXml('word/document.xml');
+    const body = doc?.getElementsByTagName('*');
+    let bodyEl = null;
+    if (body) {
+        for (const el of Array.from(body)) {
+            if (el.localName === 'body') {
+                bodyEl = el;
+                break;
+            }
+        }
+    }
+    if (!bodyEl)
+        throw new Error('word/document.xml missing or invalid');
+    // relationships: id → target (hyperlinks are absolute, images relative to word/)
+    const rels = new Map();
+    const imageTargets = new Map();
+    const relsDoc = await readXml('word/_rels/document.xml.rels');
+    if (relsDoc) {
+        for (const rel of Array.from(relsDoc.getElementsByTagName('*'))) {
+            if (rel.localName !== 'Relationship')
+                continue;
+            const id = rel.getAttribute('Id') || '';
+            const target = rel.getAttribute('Target') || '';
+            const type = rel.getAttribute('Type') || '';
+            if (/hyperlink/i.test(type))
+                rels.set(id, target);
+            else if (/image/i.test(type))
+                imageTargets.set(id, target);
+        }
+    }
+    // load referenced images as data URLs
+    const images = new Map();
+    for (const [id, target] of imageTargets) {
+        const path = target.startsWith('/') ? target.slice(1) : 'word/' + target.replace(/^\.\//, '');
+        const entry = entries.get(path);
+        if (!entry)
+            continue;
+        const ext = (path.split('.').pop() || '').toLowerCase();
+        const mime = IMG_MIME[ext];
+        if (!mime)
+            continue; // skip unsupported formats like emf/wmf
+        try {
+            images.set(id, `data:${mime};base64,${toBase64(await readEntry(buf, entry))}`);
+        }
+        catch {
+            /* skip broken image */
+        }
+    }
+    // numbering: numId → ul/ol (from level-0 numFmt of the abstract definition)
+    const numFmt = new Map();
+    const numDoc = await readXml('word/numbering.xml');
+    if (numDoc) {
+        const abstractFmt = new Map();
+        const all = Array.from(numDoc.getElementsByTagName('*'));
+        for (const el of all) {
+            if (el.localName !== 'abstractNum')
+                continue;
+            const id = val(el, 'abstractNumId');
+            const lvl0 = kids(el, 'lvl').find((l) => val(l, 'ilvl') === '0') || kids(el, 'lvl')[0];
+            const fmt = lvl0 ? val(kid(lvl0, 'numFmt')) : '';
+            abstractFmt.set(id, fmt === 'bullet' ? 'ul' : 'ol');
+        }
+        for (const el of all) {
+            if (el.localName !== 'num')
+                continue;
+            const numId = val(el, 'numId');
+            const absId = val(kid(el, 'abstractNumId'));
+            numFmt.set(numId, abstractFmt.get(absId) || 'ul');
+        }
+    }
+    return new DocxConverter(rels, images, numFmt).convertBody(bodyEl);
+}
+
+const IMG_CORNERS = ['nw', 'ne', 'sw', 'se'];
+class FableEditor {
+    static instanceCounter = 0;
+    options;
+    lang = 'en';
+    contentClass = 'fable-content-' + FableEditor.instanceCounter++;
+    contentStyleEl = null;
+    shell;
+    menubar;
+    toolbar;
+    ed;
+    statusbar;
+    sbHelp;
+    sbWords;
+    imgInput;
+    savedRange = null;
+    foreColor = '#000000';
+    backColor = '#FACC15';
+    openPop = null;
+    openSubEl = null;
+    popAnchor = null;
+    dlgOvl = null;
+    tblActive = null;
+    tblCorner = null;
+    tblColBars = [];
+    tblCtx = null;
+    tblCellMark = null;
+    tblOpMark = null;
+    tblOpMarkKind = null;
+    imgActive = null;
+    imgHandles = [];
+    imgCtx = null;
+    imgHideTimer = null;
+    phActive = null;
+    phCtx = null;
+    phUploadTarget = null;
+    imageUploadHandler;
+    onImageUploadError;
+    contentStyle;
+    selCtx = null;
+    docInput;
+    revisions = [];
+    revTimer = null;
+    draftTimer = null;
+    draftStorageKey = '';
+    listeners = [];
+    isDestroyed = false;
+    constructor(options) {
+        this.options = {
+            target: options.target,
+            language: options.language || 'en',
+            height: options.height ?? 302,
+            initialContent: options.initialContent ?? '<p><br></p>',
+            onChange: options.onChange || (() => { }),
+            onReady: options.onReady || (() => { }),
+            menubar: options.menubar ?? true,
+            toolbar: options.toolbar ?? true,
+            statusbar: options.statusbar ?? true,
+            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']
+        };
+        this.imageUploadHandler = options.imageUploadHandler;
+        this.onImageUploadError = options.onImageUploadError;
+        this.contentStyle = options.contentStyle;
+        this.lang = this.options.language;
+        this.draftStorageKey = 'tmclone-draft:' + this.options.draftKey;
+        this.initDOM();
+        this.bindEvents();
+        this.initUI();
+        this.recordRevision();
+        this.options.onReady(this);
+    }
+    t(key) {
+        const s = getStrings(this.lang)[key];
+        return typeof s === 'string' ? s : s.join(',');
+    }
+    tArr(key) {
+        return getStrings(this.lang)[key];
+    }
+    dir() {
+        return getStrings(this.lang).dir;
+    }
+    /* ---------------------------------------------------------- DOM setup */
+    initDOM() {
+        const target = this.options.target;
+        target.innerHTML = '';
+        target.classList.add('tox-root');
+        this.shell = document.createElement('div');
+        this.shell.className = 'tox';
+        this.menubar = document.createElement('div');
+        this.menubar.className = 'mnb';
+        this.toolbar = document.createElement('div');
+        this.toolbar.className = 'tbr';
+        this.ed = document.createElement('div');
+        this.ed.className = 'earea ' + this.contentClass;
+        this.ed.setAttribute('contenteditable', (!this.options.readonly).toString());
+        this.ed.spellcheck = true;
+        this.ed.innerHTML = this.options.initialContent;
+        this.ed.style.height = this.options.height + 'px';
+        this.statusbar = document.createElement('div');
+        this.statusbar.className = 'sbar';
+        this.statusbar.innerHTML = `
+      <span class="mid"></span>
+      <span class="words"></span>
+      <span class="grip">
+        <svg viewBox="0 0 12 12"><path d="M11 1 1 11M11 6 6 11M11 11h0"/></svg>
+      </span>
+    `;
+        this.sbHelp = this.statusbar.querySelector('.mid');
+        this.sbWords = this.statusbar.querySelector('.words');
+        const grip = this.statusbar.querySelector('.grip');
+        this.bindGrip(grip);
+        this.shell.appendChild(this.menubar);
+        this.shell.appendChild(this.toolbar);
+        this.shell.appendChild(this.ed);
+        this.shell.appendChild(this.statusbar);
+        if (this.contentStyle) {
+            this.contentStyleEl = document.createElement('style');
+            this.contentStyleEl.textContent = this.scopeContentStyle(this.contentStyle);
+            this.shell.appendChild(this.contentStyleEl);
+        }
+        target.appendChild(this.shell);
+        if (!this.options.statusbar)
+            this.statusbar.style.display = 'none';
+        this.imgInput = document.createElement('input');
+        this.imgInput.type = 'file';
+        this.imgInput.accept = this.options.imageFileTypes.join(',');
+        this.imgInput.style.display = 'none';
+        target.appendChild(this.imgInput);
+        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);
+    }
+    /** 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
+     *  unscoped `body { ... }` rule would otherwise leak onto the host page's body. */
+    scopeContentStyle(css) {
+        return css.replace(/\bbody\b/g, '.' + this.contentClass);
+    }
+    bindGrip(grip) {
+        let startY = 0;
+        let startH = 0;
+        const md = (e) => {
+            startY = e.clientY;
+            startH = this.ed.offsetHeight;
+            e.preventDefault();
+            const mv = (ev) => {
+                this.ed.style.height = Math.max(120, startH + ev.clientY - startY) + 'px';
+            };
+            const up = () => {
+                window.removeEventListener('mousemove', mv);
+                window.removeEventListener('mouseup', up);
+            };
+            window.addEventListener('mousemove', mv);
+            window.addEventListener('mouseup', up);
+        };
+        grip.addEventListener('mousedown', md);
+        this.listeners.push(() => grip.removeEventListener('mousedown', md));
+    }
+    /* ---------------------------------------------------------- event binding */
+    bindEvents() {
+        this.onDoc('mousedown', (e) => {
+            if (this.openPop &&
+                !this.openPop.contains(e.target) &&
+                !this.popAnchor.contains(e.target) &&
+                !(this.openSubEl && this.openSubEl.contains(e.target))) {
+                this.closePop();
+            }
+        });
+        this.onDoc('keydown', (e) => {
+            if (e.key === 'Escape') {
+                this.closePop();
+                this.closeDlg();
+            }
+        });
+        this.onDoc('selectionchange', () => {
+            const sel = window.getSelection();
+            if (sel && this.ed.contains(sel.anchorNode)) {
+                this.saveSel();
+                this.refreshState();
+                this.updateSelToolbar(sel);
+                this.positionCellMarker();
+            }
+            else {
+                this.clearSelToolbar();
+            }
+        });
+        this.on(this.ed, 'input', () => {
+            this.refreshState();
+            this.onChange();
+            this.positionTableHandles();
+            this.positionImageHandles();
+            this.positionImgPhCtx();
+        });
+        this.on(this.ed, 'keydown', (e) => {
+            if (e.altKey && e.key === '0') {
+                e.preventDefault();
+                this.helpDlg();
+            }
+        });
+        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 */
+            e.preventDefault();
+            const ph = e.target.closest?.('.img-ph');
+            if (!ph || !this.ed.contains(ph) || this.options.readonly)
+                return;
+            const file = Array.from(e.dataTransfer?.files || []).find((f) => f.type.startsWith('image/'));
+            if (file)
+                this.readImageFileInto(file, ph);
+        });
+        this.on(this.ed, 'dragover', (e) => e.preventDefault());
+        this.on(this.ed, 'mousedown', (e) => {
+            const target = e.target;
+            const table = target.closest?.('table');
+            if (table && this.ed.contains(table))
+                this.selectTableForResize(table);
+            else
+                this.clearTableHandles();
+            const ph = target.closest?.('.img-ph');
+            if (ph && this.ed.contains(ph) && !this.options.readonly) {
+                e.preventDefault();
+                this.selectImgPlaceholder(ph);
+            }
+            else {
+                this.clearImgPlaceholderSel();
+            }
+            const img = target.closest?.('img');
+            if (img && this.ed.contains(img) && !this.options.readonly) {
+                e.preventDefault();
+                this.selectImage(img);
+            }
+            else {
+                this.clearImageHandles();
+            }
+        });
+        this.on(this.ed, 'mouseover', (e) => {
+            if (this.options.readonly)
+                return;
+            const img = e.target.closest?.('img');
+            if (img && this.ed.contains(img)) {
+                this.cancelImgHide();
+                this.selectImage(img);
+            }
+        });
+        this.on(this.ed, 'mouseout', (e) => {
+            const img = e.target.closest?.('img');
+            if (!img)
+                return;
+            const to = e.relatedTarget;
+            if (to &&
+                (this.imgCtx?.contains(to) ||
+                    this.imgHandles.some((h) => h.contains(to)) ||
+                    to.closest?.('img') === img))
+                return;
+            this.scheduleImgHide();
+        });
+        this.on(this.ed, 'scroll', () => {
+            this.positionTableHandles();
+            this.positionImageHandles();
+            this.positionImgPhCtx();
+        });
+        this.onWin('scroll', () => {
+            this.positionTableHandles();
+            this.positionImageHandles();
+            this.positionImgPhCtx();
+            this.repositionSelToolbar();
+        }, true);
+        this.onWin('resize', () => {
+            this.positionTableHandles();
+            this.positionImageHandles();
+            this.positionImgPhCtx();
+            this.repositionSelToolbar();
+        });
+        this.on(this.imgInput, 'change', () => {
+            const file = this.imgInput.files?.[0];
+            if (!file)
+                return;
+            const ph = this.phUploadTarget;
+            this.phUploadTarget = null;
+            if (ph && this.ed.contains(ph)) {
+                this.readImageFileInto(file, ph);
+                return;
+            }
+            const fr = new FileReader();
+            fr.onload = () => {
+                this.restoreSel();
+                document.execCommand('insertHTML', false, `<img src="${fr.result}" title="${file.name.replace(/"/g, '')}" alt="">`);
+                this.onChange();
+            };
+            fr.readAsDataURL(file);
+        });
+        this.on(this.docInput, 'change', () => {
+            const file = this.docInput.files?.[0];
+            if (!file)
+                return;
+            this.importWordFile(file).catch(() => alert(this.t('importfail')));
+        });
+        this.onDoc('mousedown', (e) => {
+            if (this.ed.contains(e.target) ||
+                e.target === this.tblCorner ||
+                this.tblColBars.includes(e.target) ||
+                (this.tblCtx && this.tblCtx.contains(e.target)) ||
+                this.imgHandles.includes(e.target) ||
+                (this.imgCtx && this.imgCtx.contains(e.target)) ||
+                (this.phCtx && this.phCtx.contains(e.target)) ||
+                (this.selCtx && this.selCtx.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.clearSelToolbar();
+        });
+    }
+    on(target, event, handler) {
+        target.addEventListener(event, handler);
+        this.listeners.push(() => target.removeEventListener(event, handler));
+    }
+    onDoc(event, handler) {
+        document.addEventListener(event, handler);
+        this.listeners.push(() => document.removeEventListener(event, handler));
+    }
+    onWin(event, handler, capture) {
+        window.addEventListener(event, handler, capture);
+        this.listeners.push(() => window.removeEventListener(event, handler, capture));
+    }
+    /* ---------------------------------------------------------- public API */
+    getContent() {
+        return this.ed.innerHTML;
+    }
+    setContent(html) {
+        this.ed.innerHTML = html || '<p><br></p>';
+        this.refreshState();
+        this.clearTableHandles();
+        this.clearImageHandles();
+        this.clearImgPlaceholderSel();
+        this.clearSelToolbar();
+        this.onChange();
+    }
+    insertContent(html) {
+        this.restoreSel();
+        document.execCommand('insertHTML', false, html);
+        this.saveSel();
+        this.refreshState();
+        this.onChange();
+    }
+    setLanguage(lang) {
+        this.lang = lang;
+        this.initUI();
+    }
+    focus() {
+        this.ed.focus();
+    }
+    async importWordFile(file) {
+        const html = await importDocxToHtml(file);
+        this.recordRevision();
+        this.setContent(html);
+        this.recordRevision();
+    }
+    restoreDraft() {
+        let raw = null;
+        try {
+            raw = localStorage.getItem(this.draftStorageKey);
+        }
+        catch {
+            /* storage unavailable */
+        }
+        if (!raw)
+            return false;
+        try {
+            const draft = JSON.parse(raw);
+            if (!draft.html)
+                return false;
+            this.recordRevision();
+            this.setContent(draft.html);
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }
+    getRevisions() {
+        return this.revisions.slice();
+    }
+    destroy() {
+        if (this.isDestroyed)
+            return;
+        this.isDestroyed = true;
+        if (this.revTimer != null)
+            window.clearTimeout(this.revTimer);
+        if (this.draftTimer != null)
+            window.clearTimeout(this.draftTimer);
+        this.closePop();
+        this.closeDlg();
+        this.clearTableHandles();
+        this.clearImageHandles();
+        this.clearImgPlaceholderSel();
+        this.clearSelToolbar();
+        this.listeners.forEach((fn) => fn());
+        this.listeners = [];
+        if (this.shell && this.shell.parentNode)
+            this.shell.parentNode.removeChild(this.shell);
+        if (this.imgInput && this.imgInput.parentNode)
+            this.imgInput.parentNode.removeChild(this.imgInput);
+        if (this.docInput && this.docInput.parentNode)
+            this.docInput.parentNode.removeChild(this.docInput);
+        this.contentStyleEl = null;
+    }
+    /* ---------------------------------------------------------- selection */
+    saveSel() {
+        const s = window.getSelection();
+        if (s && s.rangeCount && this.ed.contains(s.anchorNode))
+            this.savedRange = s.getRangeAt(0).cloneRange();
+    }
+    restoreSel() {
+        if (!this.savedRange) {
+            this.ed.focus();
+            return;
+        }
+        this.ed.focus();
+        const s = window.getSelection();
+        if (!s)
+            return;
+        s.removeAllRanges();
+        s.addRange(this.savedRange);
+    }
+    exec(cmd, val) {
+        this.restoreSel();
+        document.execCommand('styleWithCSS', false, cmd !== 'fontSize' ? 'true' : 'false');
+        document.execCommand(cmd, false, val ?? undefined);
+        this.saveSel();
+        this.refreshState();
+        this.onChange();
+    }
+    closestBlock(node) {
+        while (node && node !== this.ed) {
+            if (node.nodeType === 1 && /^(P|DIV|H[1-6]|LI|PRE|BLOCKQUOTE|TD|TH)$/i.test(node.tagName)) {
+                return node;
+            }
+            node = node.parentNode;
+        }
+        return null;
+    }
+    selectedBlocks() {
+        const s = window.getSelection();
+        if (!s || !s.rangeCount || !this.ed.contains(s.anchorNode))
+            return [];
+        const r = s.getRangeAt(0);
+        const blocks = Array.from(this.ed.querySelectorAll('p,h1,h2,h3,h4,h5,h6,li,pre,blockquote,td,th')).filter((b) => r.intersectsNode(b));
+        if (!blocks.length) {
+            const b = this.closestBlock(s.anchorNode);
+            if (b)
+                return [b];
+        }
+        return blocks;
+    }
+    onChange() {
+        this.options.onChange(this.ed.innerHTML);
+        this.scheduleRevision();
+        this.scheduleDraftSave();
+    }
+    /* ---------------------------------------------------------- revisions / drafts */
+    recordRevision() {
+        const html = this.ed.innerHTML;
+        const last = this.revisions[this.revisions.length - 1];
+        if (last && last.html === html)
+            return;
+        this.revisions.push({ time: Date.now(), html });
+        if (this.revisions.length > 30)
+            this.revisions.shift();
+    }
+    scheduleRevision() {
+        if (this.revTimer != null)
+            window.clearTimeout(this.revTimer);
+        this.revTimer = window.setTimeout(() => {
+            this.revTimer = null;
+            this.recordRevision();
+        }, 1500);
+    }
+    scheduleDraftSave() {
+        if (this.draftTimer != null)
+            window.clearTimeout(this.draftTimer);
+        this.draftTimer = window.setTimeout(() => {
+            this.draftTimer = null;
+            try {
+                localStorage.setItem(this.draftStorageKey, JSON.stringify({ time: Date.now(), html: this.ed.innerHTML }));
+            }
+            catch {
+                /* storage unavailable or full */
+            }
+        }, 800);
+    }
+    revisionDlg() {
+        this.recordRevision();
+        this.dialog(this.t('revhistory'), (body) => {
+            if (!this.revisions.length) {
+                body.innerHTML = `<p style="color:#556">${this.t('revempty')}</p>`;
+                return;
+            }
+            const wrap = document.createElement('div');
+            wrap.className = 'revwrap';
+            const list = document.createElement('div');
+            list.className = 'revlist';
+            const prev = document.createElement('div');
+            prev.className = 'revprev';
+            const restoreBtn = document.createElement('button');
+            restoreBtn.type = 'button';
+            restoreBtn.className = 'revrestore';
+            restoreBtn.textContent = this.t('restore');
+            let selected = this.revisions.length - 1;
+            const fmt = new Intl.DateTimeFormat(this.lang === 'ar' ? 'ar-AE' : 'en-GB', {
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit',
+                second: '2-digit'
+            });
+            const items = {};
+            const show = (i) => {
+                selected = i;
+                this.revisions.forEach((_, j) => items[j]?.classList.toggle('on', j === i));
+                prev.innerHTML = this.revisions[i].html;
+                restoreBtn.disabled = i === this.revisions.length - 1;
+            };
+            for (let i = this.revisions.length - 1; i >= 0; i--) {
+                const rev = this.revisions[i];
+                const b = document.createElement('button');
+                b.type = 'button';
+                const words = (new DOMParser().parseFromString(rev.html, 'text/html').body.textContent || '').trim();
+                const wc = words ? words.split(/\s+/).length : 0;
+                const isCurrent = i === this.revisions.length - 1;
+                b.innerHTML = `<span>${isCurrent ? this.t('currentver') : fmt.format(new Date(rev.time))}</span><span class="wc">${wc} ${this.t('words')}</span>`;
+                b.addEventListener('click', () => show(i));
+                items[i] = b;
+                list.appendChild(b);
+            }
+            list.append(restoreBtn);
+            restoreBtn.addEventListener('click', () => {
+                const rev = this.revisions[selected];
+                if (!rev)
+                    return;
+                this.recordRevision();
+                this.setContent(rev.html);
+                this.recordRevision();
+                this.closeDlg();
+            });
+            wrap.append(list, prev);
+            body.appendChild(wrap);
+            show(selected);
+        });
+    }
+    /* ---------------------------------------------------------- popups / menus */
+    closeSub() {
+        this.openSubEl?.remove();
+        this.openSubEl = null;
+    }
+    closePop() {
+        this.closeSub();
+        if (this.openPop) {
+            this.openPop.remove();
+            this.openPop = null;
+            this.popAnchor?.classList.remove('open');
+            this.popAnchor = null;
+            /* a menu item's mouseleave never fires once the menu is removed,
+               so drop any row/column highlight it left behind */
+            this.setOpTarget(null);
+        }
+    }
+    openSubFor(item, anchor) {
+        this.closeSub();
+        const sub = document.createElement('div');
+        sub.className = 'pop sub';
+        sub.dir = this.dir();
+        if (item.subBuild)
+            item.subBuild(sub);
+        else if (item.sub)
+            this.menuItems(sub, item.sub);
+        sub.addEventListener('mousedown', (e) => {
+            if (e.target.tagName !== 'INPUT')
+                e.preventDefault();
+        });
+        document.body.appendChild(sub);
+        const r = anchor.getBoundingClientRect();
+        const isRtl = this.dir() === 'rtl';
+        // overlap the parent item slightly so the pointer can travel into the flyout
+        let x = isRtl ? r.left - sub.offsetWidth + 2 : r.right - 2;
+        x = Math.max(8, Math.min(x + scrollX, scrollX + innerWidth - sub.offsetWidth - 8));
+        let y = r.top + scrollY - 6;
+        y = Math.max(8 + scrollY, Math.min(y, scrollY + innerHeight - sub.offsetHeight - 8));
+        sub.style.left = x + 'px';
+        sub.style.top = y + 'px';
+        this.openSubEl = sub;
+    }
+    popup(anchor, build) {
+        if (this.openPop && this.popAnchor === anchor) {
+            this.closePop();
+            return;
+        }
+        this.closePop();
+        const el = document.createElement('div');
+        el.className = 'pop';
+        el.dir = this.dir();
+        build(el);
+        document.body.appendChild(el);
+        const r = anchor.getBoundingClientRect();
+        // align the menu with its control: at least as wide as the anchor
+        el.style.minWidth = Math.max(160, Math.round(r.width)) + 'px';
+        el.style.top = r.bottom + scrollY + 2 + 'px';
+        const isRtl = this.dir() === 'rtl';
+        let x = isRtl ? r.right - el.offsetWidth : r.left;
+        x = Math.max(8, Math.min(x + scrollX, scrollX + innerWidth - el.offsetWidth - 8));
+        el.style.left = x + 'px';
+        el.addEventListener('mousedown', (e) => {
+            if (e.target.tagName !== 'INPUT')
+                e.preventDefault();
+        });
+        this.openPop = el;
+        this.popAnchor = anchor;
+        anchor.classList.add('open');
+    }
+    menuItems(el, items) {
+        items.forEach((it) => {
+            if (it === '|') {
+                el.insertAdjacentHTML('beforeend', '<div class="sep"></div>');
+                return;
+            }
+            const hasSub = !!(it.sub || it.subBuild);
+            const b = document.createElement('button');
+            b.className = 'mi' + (it.on ? ' on' : '');
+            b.innerHTML = `<span class="ic">${it.icon || ''}</span><span class="prev" ${it.previewStyle ? `style="${it.previewStyle}"` : ''}>${it.label}</span>${it.shortcut ? `<span class="sc">${it.shortcut}</span>` : ''}${hasSub ? `<span class="subarrow">${IC.chev}</span>` : ''}`;
+            b.addEventListener('click', () => {
+                if (!it.action)
+                    return;
+                this.closePop();
+                it.action();
+            });
+            b.addEventListener('mouseenter', () => {
+                if (hasSub)
+                    this.openSubFor(it, b);
+                else if (this.openSubEl && el !== this.openSubEl)
+                    this.closeSub();
+                it.hover?.(true);
+            });
+            b.addEventListener('mouseleave', () => it.hover?.(false));
+            el.appendChild(b);
+        });
+    }
+    /* ---------------------------------------------------------- toolbar builders */
+    tbtn(icon, tip, fn, id) {
+        const b = document.createElement('button');
+        b.className = 'tbtn';
+        b.type = 'button';
+        b.title = tip;
+        b.innerHTML = icon;
+        if (id)
+            b.dataset.id = id;
+        b.addEventListener('mousedown', (e) => e.preventDefault());
+        b.addEventListener('click', fn);
+        return b;
+    }
+    /** Font-size increase / decrease step button. */
+    stepBtn(delta) {
+        const sign = delta > 0 ? '+' : '−';
+        const icon = delta > 0 ? IC.fontsizeup : IC.fontsizedown;
+        const b = this.tbtn(icon, this.t('fontsize') + ' ' + sign, () => this.stepFontSize(delta));
+        b.addEventListener('mousedown', () => this.saveSel());
+        return b;
+    }
+    /** Toolbar icon button that opens a popup menu anchored to itself. */
+    menuTbtn(icon, tip, menuFn, id) {
+        const b = this.tbtn(icon, tip, () => menuFn(b), id);
+        b.classList.add('hasmenu');
+        b.insertAdjacentHTML('beforeend', IC.chev);
+        b.addEventListener('mousedown', () => this.saveSel());
+        return b;
+    }
+    /** Quick text-color chips plus a "more" chip that opens the full palette. */
+    colorChips() {
+        const chip = (title) => {
+            const b = document.createElement('button');
+            b.type = 'button';
+            b.className = 'cchip';
+            b.title = title;
+            b.addEventListener('mousedown', (e) => {
+                e.preventDefault();
+                this.saveSel();
+            });
+            return b;
+        };
+        const chips = QUICK_COLORS.map((c) => {
+            const b = chip(this.t('forecolor'));
+            b.style.background = c;
+            b.addEventListener('click', () => this.applyColor('fore', c));
+            return b;
+        });
+        const more = chip(this.t('forecolor'));
+        more.classList.add('more');
+        more.dataset.cb = 'fore';
+        more.innerHTML = IC.chev;
+        more.addEventListener('click', () => this.colorMenu(more, 'fore'));
+        return [...chips, more];
+    }
+    group(...els) {
+        const g = document.createElement('div');
+        g.className = 'tgrp';
+        els.forEach((e) => {
+            e.classList.add('gbtn');
+            g.appendChild(e);
+        });
+        return g;
+    }
+    tsel(cls, id, defLabel, menuFn) {
+        const b = document.createElement('button');
+        b.className = 'tsel ' + cls;
+        b.type = 'button';
+        b.dataset.id = id;
+        b.innerHTML = `<span class="lbl empty">${defLabel || ''}</span>${IC.chev}`;
+        b.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            this.saveSel();
+        });
+        b.addEventListener('click', () => menuFn(b));
+        return b;
+    }
+    setListStyle(kind, style) {
+        this.restoreSel();
+        const s = window.getSelection();
+        if (!s)
+            return;
+        let list = this.closestBlock(s.anchorNode)?.closest(kind);
+        if (!list) {
+            this.exec(kind === 'ol' ? 'insertOrderedList' : 'insertUnorderedList');
+            list = this.closestBlock(s.anchorNode)?.closest(kind);
+        }
+        if (list)
+            list.style.listStyleType = style;
+        this.saveSel();
+        this.onChange();
+    }
+    listMenu(anchor, kind) {
+        const cmd = kind === 'ol' ? 'insertOrderedList' : 'insertUnorderedList';
+        // the toggle item creates the default style, so it is not repeated below
+        const styles = kind === 'ol'
+            ? [
+                ['lower-alpha', IC.ol_alpha],
+                ['lower-roman', IC.ol_roman],
+                ['upper-alpha', IC.ol_alphau],
+                ['upper-roman', IC.ol_romanu]
+            ]
+            : [
+                ['circle', IC.ul_circle],
+                ['square', IC.ul_square]
+            ];
+        const labels = this.tArr(kind === 'ol' ? 'liststyles_ol' : 'liststyles_ul').slice(1);
+        const sel = window.getSelection();
+        const listEl = sel ? this.closestBlock(sel.anchorNode)?.closest(kind) : null;
+        const curStyle = listEl ? listEl.style.listStyleType : '';
+        this.popup(anchor, (el) => {
+            this.menuItems(el, [
+                {
+                    label: this.t(kind === 'ol' ? 'numlist' : 'bullist'),
+                    icon: kind === 'ol' ? IC.numlist : IC.bullist,
+                    on: document.queryCommandState(cmd),
+                    action: () => this.exec(cmd)
+                }
+            ]);
+            el.insertAdjacentHTML('beforeend', '<div class="sep"></div>');
+            const grid = document.createElement('div');
+            grid.className = 'mi-grid';
+            styles.forEach(([s, icon], i) => {
+                const b = document.createElement('button');
+                b.className = 'mi' + (curStyle === s ? ' on' : '');
+                b.innerHTML = `<span class="ic">${icon}</span><span class="prev">${labels[i]}</span>`;
+                b.addEventListener('click', () => {
+                    this.closePop();
+                    this.setListStyle(kind, s);
+                });
+                grid.appendChild(b);
+            });
+            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', () => {
+                this.closePop();
+                this.applyColor(kind, picker.value);
+            });
+            wheel.appendChild(picker);
+            foot.append(cur, nocolor, wheel);
+            el.appendChild(foot);
+        });
+    }
+    applyColor(kind, c) {
+        if (kind === 'fore') {
+            this.foreColor = c || '#000000';
+            this.exec('foreColor', c || '#000000');
+        }
+        else {
+            this.backColor = c || 'transparent';
+            this.exec('hiliteColor', c || 'transparent');
+        }
+        this.syncColorSwatches(this.toolbar);
+        if (this.selCtx)
+            this.syncColorSwatches(this.selCtx);
+    }
+    syncColorSwatches(container) {
+        container.querySelectorAll(`[data-cb=fore]`).forEach((el) => (el.style.background = this.foreColor));
+        container.querySelectorAll(`[data-cb=back]`).forEach((el) => (el.style.background = this.backColor));
+    }
+    fontMenu(anchor) {
+        this.popup(anchor, (el) => {
+            this.menuItems(el, this.options.fontFamilyFormats.map(([name, val]) => ({
+                label: name,
+                previewStyle: `font-family:${val}`,
+                on: this.currentFont() === name,
+                action: () => this.exec('fontName', val)
+            })));
+        });
+    }
+    sizeMenu(anchor) {
+        this.popup(anchor, (el) => {
+            this.menuItems(el, SIZES.map((s) => ({
+                label: s,
+                on: this.currentSize() === s,
+                action: () => this.applyFontSize(s)
+            })));
+        });
+    }
+    /** Font sizing needs a non-collapsed range. With a bare caret, grow the
+        selection to the word under it; in an empty spot, select a zero-width
+        space so the new size applies to what gets typed next. */
+    ensureSizeTarget() {
+        const s = window.getSelection();
+        if (!s)
+            return;
+        if (!s.rangeCount) {
+            const r = document.createRange();
+            r.selectNodeContents(this.ed);
+            r.collapse(true);
+            s.addRange(r);
+        }
+        if (!s.isCollapsed)
+            return;
+        const r = s.getRangeAt(0);
+        const node = r.startContainer;
+        if (node.nodeType === 3) {
+            const text = node.data;
+            let a = r.startOffset;
+            let b = r.startOffset;
+            while (a > 0 && /\S/.test(text[a - 1]))
+                a--;
+            while (b < text.length && /\S/.test(text[b]))
+                b++;
+            if (b > a) {
+                const nr = document.createRange();
+                nr.setStart(node, a);
+                nr.setEnd(node, b);
+                s.removeAllRanges();
+                s.addRange(nr);
+                this.savedRange = nr.cloneRange();
+                return;
+            }
+        }
+        const zw = document.createTextNode(String.fromCharCode(0x200b));
+        r.insertNode(zw);
+        const nr = document.createRange();
+        nr.setStart(zw, 0);
+        nr.setEnd(zw, 1);
+        s.removeAllRanges();
+        s.addRange(nr);
+        this.savedRange = nr.cloneRange();
+    }
+    applyFontSize(px) {
+        this.restoreSel();
+        this.ensureSizeTarget();
+        document.execCommand('styleWithCSS', false, 'false');
+        document.execCommand('fontSize', false, '7');
+        const spans = [];
+        this.ed.querySelectorAll('font[size="7"]').forEach((f) => {
+            const span = document.createElement('span');
+            span.style.fontSize = px;
+            while (f.firstChild)
+                span.appendChild(f.firstChild);
+            f.replaceWith(span);
+            spans.push(span);
+        });
+        if (spans.length) {
+            // keep the selection anchored inside the new spans so the current
+            // size reads back correctly (e.g. for repeated +/- stepping)
+            const r = document.createRange();
+            r.setStart(spans[0], 0);
+            r.setEnd(spans[spans.length - 1], spans[spans.length - 1].childNodes.length);
+            const s = window.getSelection();
+            if (s) {
+                s.removeAllRanges();
+                s.addRange(r);
+            }
+        }
+        this.saveSel();
+        this.refreshState();
+        this.onChange();
+    }
+    stepFontSize(delta) {
+        const cur = parseInt(this.currentSize(), 10) || 14;
+        const next = Math.min(MAX_FONT_PX, Math.max(MIN_FONT_PX, cur + delta));
+        if (next === cur)
+            return;
+        this.applyFontSize(next + 'px');
+    }
+    /* ------------------------------------------------ case / spacing / link */
+    transformCase(kind) {
+        this.restoreSel();
+        const s = window.getSelection();
+        if (!s || !s.rangeCount || s.isCollapsed)
+            return;
+        const range = s.getRangeAt(0);
+        const walker = document.createTreeWalker(this.ed, NodeFilter.SHOW_TEXT);
+        const nodes = [];
+        let n;
+        while ((n = walker.nextNode()))
+            if (range.intersectsNode(n))
+                nodes.push(n);
+        nodes.forEach((t) => {
+            const start = t === range.startContainer ? range.startOffset : 0;
+            const end = t === range.endContainer ? range.endOffset : t.data.length;
+            if (end <= start)
+                return;
+            const mid = t.data.slice(start, end);
+            let out = mid;
+            if (kind === 'lower')
+                out = mid.toLowerCase();
+            else if (kind === 'upper')
+                out = mid.toUpperCase();
+            else
+                out = mid.replace(/(^|\s)(\S)/g, (m, sp, ch) => sp + ch.toUpperCase());
+            t.replaceData(start, end - start, out);
+        });
+        this.saveSel();
+        this.refreshState();
+        this.onChange();
+    }
+    caseMenu(anchor) {
+        this.popup(anchor, (el) => {
+            this.menuItems(el, [
+                { label: this.t('lowercase'), icon: IC.lowercaseic, action: () => this.transformCase('lower') },
+                { label: this.t('uppercase'), icon: IC.uppercaseic, action: () => this.transformCase('upper') },
+                { label: this.t('capitalize'), icon: IC.capitalizeic, action: () => this.transformCase('capitalize') }
+            ]);
+        });
+    }
+    applyBlockStyle(prop, value) {
+        this.restoreSel();
+        const blocks = this.selectedBlocks();
+        blocks.forEach((b) => {
+            if (value)
+                b.style[prop] = value;
+            else
+                b.style.removeProperty(prop === 'lineHeight' ? 'line-height' : 'word-spacing');
+        });
+        this.saveSel();
+        this.onChange();
+    }
+    currentBlockStyle(prop) {
+        const s = window.getSelection();
+        const b = s ? this.closestBlock(s.anchorNode) : null;
+        return b ? b.style[prop] || '' : '';
+    }
+    lineHeightMenu(anchor) {
+        const cur = this.currentBlockStyle('lineHeight');
+        this.popup(anchor, (el) => {
+            this.menuItems(el, [
+                { label: this.t('normal'), on: !cur, action: () => this.applyBlockStyle('lineHeight', '') },
+                ...LINE_HEIGHTS.map((v) => ({
+                    label: v,
+                    on: cur === v,
+                    action: () => this.applyBlockStyle('lineHeight', v)
+                }))
+            ]);
+        });
+    }
+    wordSpacingMenu(anchor) {
+        const cur = this.currentBlockStyle('wordSpacing');
+        this.popup(anchor, (el) => {
+            this.menuItems(el, [
+                { label: this.t('normal'), on: !cur, action: () => this.applyBlockStyle('wordSpacing', '') },
+                ...WORD_SPACINGS.map((v) => ({
+                    label: v,
+                    on: cur === v,
+                    action: () => this.applyBlockStyle('wordSpacing', v)
+                }))
+            ]);
+        });
+    }
+    closestAnchor() {
+        const s = window.getSelection();
+        let node = s && this.ed.contains(s.anchorNode) ? s.anchorNode : null;
+        while (node && node !== this.ed) {
+            if (node.nodeType === 1 && node.tagName === 'A')
+                return node;
+            node = node.parentNode;
+        }
+        return null;
+    }
+    linkDlg() {
+        this.saveSel();
+        const anchorEl = this.closestAnchor();
+        let urlIn;
+        const buttons = [];
+        if (anchorEl) {
+            buttons.push({
+                label: this.t('unlink'),
+                action: () => {
+                    const r = document.createRange();
+                    r.selectNodeContents(anchorEl);
+                    const s = window.getSelection();
+                    if (s) {
+                        s.removeAllRanges();
+                        s.addRange(r);
+                    }
+                    document.execCommand('unlink');
+                    this.closeDlg();
+                    this.onChange();
+                }
+            });
+        }
+        buttons.push({ label: this.t('cancel'), action: () => this.closeDlg() }, {
+            label: this.t('save'),
+            primary: true,
+            action: () => {
+                const url = urlIn.value.trim();
+                this.closeDlg();
+                if (!url)
+                    return;
+                if (anchorEl) {
+                    anchorEl.setAttribute('href', url);
+                    this.onChange();
+                    return;
+                }
+                this.restoreSel();
+                const s = window.getSelection();
+                if (!s || s.isCollapsed) {
+                    document.execCommand('insertHTML', false, `<a href="${url.replace(/"/g, '&quot;')}">${url
+                        .replace(/&/g, '&amp;')
+                        .replace(/</g, '&lt;')}</a>`);
+                }
+                else {
+                    document.execCommand('styleWithCSS', false, 'false');
+                    document.execCommand('createLink', false, url);
+                }
+                this.saveSel();
+                this.onChange();
+            }
+        });
+        this.dialog(this.t('linkttl'), (body) => {
+            const row = document.createElement('div');
+            row.style.cssText = 'display:flex;align-items:center;gap:10px;margin:10px 0;min-width:360px';
+            const lbl = document.createElement('span');
+            lbl.style.cssText = 'width:60px;color:#556;flex:none';
+            lbl.textContent = this.t('linkurl');
+            urlIn = document.createElement('input');
+            urlIn.type = 'url';
+            urlIn.placeholder = 'https://';
+            urlIn.style.cssText = 'flex:1;border:1px solid #cfd6df;border-radius:6px;padding:7px 9px;font:14px inherit';
+            urlIn.value = anchorEl?.getAttribute('href') || '';
+            row.append(lbl, urlIn);
+            body.appendChild(row);
+            setTimeout(() => urlIn.focus(), 0);
+        }, buttons);
+    }
+    blocksMenu(anchor) {
+        this.popup(anchor, (el) => {
+            this.menuItems(el, BLOCKS.map(([tag, key]) => ({
+                label: this.blockLabel(tag),
+                previewStyle: tag.startsWith('h')
+                    ? `font-weight:700;font-size:${22 - 2 * (+tag[1])}px`
+                    : tag === 'pre'
+                        ? 'font-family:monospace'
+                        : '',
+                on: this.currentBlock() === tag,
+                action: () => this.exec('formatBlock', '<' + tag + '>')
+            })));
+        });
+    }
+    blockLabel(tag) {
+        if (tag === 'p')
+            return this.t('para');
+        if (tag === 'pre')
+            return this.t('pre');
+        return this.t('heading') + ' ' + tag[1];
+    }
+    tableGrid(anchor, after) {
+        this.popup(anchor, (el) => this.buildTableGridInto(el, after));
+    }
+    buildTableGridInto(el, after) {
+        {
+            const wrap = document.createElement('div');
+            wrap.className = 'tgridwrap';
+            const grid = document.createElement('div');
+            grid.className = 'tgrid';
+            const lbl = document.createElement('div');
+            lbl.className = 'tgridlbl';
+            lbl.textContent = '1 × 1';
+            const cells = [];
+            for (let r = 0; r < 8; r++)
+                for (let c = 0; c < 10; c++) {
+                    const sp = document.createElement('span');
+                    sp.dataset.r = String(r);
+                    sp.dataset.c = String(c);
+                    sp.addEventListener('mouseenter', () => {
+                        cells.forEach((x) => x.classList.toggle('hot', +x.dataset.r <= r && +x.dataset.c <= c));
+                        lbl.textContent = c + 1 + ' × ' + (r + 1);
+                    });
+                    sp.addEventListener('click', () => {
+                        this.closePop();
+                        this.insertTable(r + 1, c + 1);
+                        after?.();
+                    });
+                    cells.push(sp);
+                    grid.appendChild(sp);
+                }
+            wrap.append(grid, lbl);
+            el.appendChild(wrap);
+        }
+    }
+    insertTable(rows, cols) {
+        this.restoreSel();
+        /* table-layout:fixed keeps the columns evenly sized while typing —
+           text wraps at the column edge instead of widening the column */
+        let html = '<table style="border-collapse:collapse;width:100%;table-layout:fixed"><tbody>';
+        for (let r = 0; r < rows; r++) {
+            html += '<tr>';
+            for (let c = 0; c < cols; c++)
+                html += '<td style="border:1px solid #b9c2cc"><br></td>';
+            html += '</tr>';
+        }
+        html += '</tbody></table><p><br></p>';
+        document.execCommand('insertHTML', false, html);
+        this.saveSel();
+        this.onChange();
+    }
+    setDir(dir) {
+        this.restoreSel();
+        const blocks = this.selectedBlocks();
+        if (blocks.length)
+            blocks.forEach((b) => b.setAttribute('dir', dir));
+        else
+            this.ed.setAttribute('dir', dir);
+        this.saveSel();
+        this.refreshState();
+        this.onChange();
+    }
+    /** Splits a toolbar layout string into groups of item names: `|` separates visual
+     *  groups, whitespace separates items within a group. Empty groups/tokens (e.g. from
+     *  leading/trailing/doubled separators) are dropped. Pure function. */
+    parseToolbarString(spec) {
+        return spec
+            .split('|')
+            .map((group) => group.trim().split(/\s+/).filter(Boolean))
+            .filter((group) => group.length > 0);
+    }
+    /** Maps every supported toolbar item name to a builder for that one control. Each
+     *  entry is a direct lift of what used to be an inline call in `buildToolbar()` — no
+     *  behavior changes, just named lookup. Only `forecolor` yields multiple elements
+     *  (the quick color chips); everything else yields one. */
+    buildToolbarRegistry() {
+        const tableBtn = this.tbtn(IC.tableic, this.t('quicktable'), () => this.tableGrid(tableBtn));
+        return {
+            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()),
+            print: () => this.tbtn(IC.printic, this.t('print'), () => this.printDoc()),
+            importword: () => this.tbtn(IC.wordic, this.t('importword'), () => this.pickWordDoc()),
+            revhistory: () => this.tbtn(IC.historyic, this.t('revhistory'), () => this.revisionDlg()),
+            fontfamily: () => this.tsel('w-font', 'fontsel', '', (b) => this.fontMenu(b)),
+            fontsize: () => this.tsel('w-size', 'sizesel', '', (b) => this.sizeMenu(b)),
+            fontsizeincrease: () => this.stepBtn(1),
+            fontsizedecrease: () => this.stepBtn(-1),
+            bold: () => this.tbtn(IC.bold, this.t('bold'), () => this.exec('bold'), 'bold'),
+            italic: () => this.tbtn(IC.italic, this.t('italic'), () => this.exec('italic'), 'italic'),
+            underline: () => this.tbtn(IC.underline, this.t('underline'), () => this.exec('underline'), 'underline'),
+            strikethrough: () => this.tbtn(IC.strikethrough, this.t('strikethrough'), () => this.exec('strikeThrough'), 'strikeThrough'),
+            forecolor: () => this.colorChips(),
+            backcolor: () => this.menuTbtn(IC.backcolor + '<span class="colorbar" data-cb="back"></span>', this.t('backcolor'), (b) => this.colorMenu(b, 'back')),
+            alignleft: () => this.tbtn(IC.alignleft, this.t('alignleft'), () => this.exec('justifyLeft'), 'justifyLeft'),
+            aligncenter: () => this.tbtn(IC.aligncenter, this.t('aligncenter'), () => this.exec('justifyCenter'), 'justifyCenter'),
+            alignright: () => this.tbtn(IC.alignright, this.t('alignright'), () => this.exec('justifyRight'), 'justifyRight'),
+            alignjustify: () => this.tbtn(IC.alignjustify, this.t('alignjustify'), () => this.exec('justifyFull'), 'justifyFull'),
+            bullist: () => this.menuTbtn(IC.bullist, this.t('bullist'), (b) => this.listMenu(b, 'ul'), 'insertUnorderedList'),
+            numlist: () => this.menuTbtn(IC.numlist, this.t('numlist'), (b) => this.listMenu(b, 'ol'), 'insertOrderedList'),
+            outdent: () => this.tbtn(IC.outdent, this.t('outdent'), () => this.exec('outdent')),
+            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'),
+            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)),
+            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()),
+            quicktable: () => tableBtn,
+            charmap: () => this.tbtn(IC.charic, this.t('charmap'), () => this.charMap()),
+            fullscreen: () => this.tbtn(IC.fullscreen, this.t('fullscreen'), () => this.toggleFullscreen(), 'fullscreen'),
+            sourcecode: () => this.tbtn(IC.srcic, this.t('sourcecode'), () => this.sourceDlg())
+        };
+    }
+    buildToolbar() {
+        this.toolbar.innerHTML = '';
+        const spec = this.options.toolbar === true ? DEFAULT_TOOLBAR : this.options.toolbar;
+        const registry = this.buildToolbarRegistry();
+        this.parseToolbarString(spec).forEach((tokens) => {
+            const elements = [];
+            tokens.forEach((token) => {
+                const builder = registry[token];
+                if (!builder) {
+                    console.warn(`FableEditor: unknown toolbar item "${token}"`);
+                    return;
+                }
+                const result = builder();
+                if (Array.isArray(result))
+                    elements.push(...result);
+                else
+                    elements.push(result);
+            });
+            if (elements.length)
+                this.toolbar.appendChild(this.group(...elements));
+        });
+        this.syncColorSwatches(this.toolbar);
+    }
+    /* ---------------------------------------------------------- menubar */
+    mItem(label, icon, action, shortcut) {
+        return { label: this.t(label), icon, action, shortcut };
+    }
+    buildMenubar() {
+        this.menubar.innerHTML = '';
+        const menus = {
+            file: [
+                this.mItem('newdoc', IC.newic, () => {
+                    this.recordRevision();
+                    this.ed.innerHTML = '<p><br></p>';
+                    this.onChange();
+                }),
+                '|',
+                this.mItem('importword', IC.wordic, () => this.pickWordDoc()),
+                this.mItem('restoredraft', IC.draftic, () => {
+                    if (!this.restoreDraft())
+                        alert(this.t('draftempty'));
+                }),
+                this.mItem('revhistory', IC.historyic, () => this.revisionDlg()),
+                '|',
+                this.mItem('preview', IC.prevw, () => this.previewDlg()),
+                this.mItem('print', IC.printic, () => this.printDoc(), 'Ctrl+P')
+            ],
+            edit: [
+                this.mItem('undo', IC.undo, () => this.exec('undo'), 'Ctrl+Z'),
+                this.mItem('redo', IC.redo, () => this.exec('redo'), 'Ctrl+Y'),
+                '|',
+                this.mItem('cut', IC.cutic, () => this.exec('cut'), 'Ctrl+X'),
+                this.mItem('copy', IC.copyic, () => this.exec('copy'), 'Ctrl+C'),
+                this.mItem('paste', IC.pasteic, () => alert(this.t('pastehint')), 'Ctrl+V'),
+                '|',
+                this.mItem('selectall', IC.selall, () => this.exec('selectAll'), 'Ctrl+A')
+            ],
+            view: [
+                this.mItem('fullscreen', IC.fullscreen, () => this.toggleFullscreen()),
+                this.mItem('preview', IC.prevw, () => this.previewDlg()),
+                this.mItem('sourcecode', IC.srcic, () => this.sourceDlg())
+            ],
+            insert: [
+                this.mItem('link', IC.link, () => this.linkDlg()),
+                this.mItem('image', IC.image, () => this.insertImagePlaceholder()),
+                { label: this.t('inserttable'), icon: IC.tableic, action: () => this.tableGrid(this.menubar.querySelector('[data-menu-key="table"]') || this.menubar) },
+                this.mItem('hr', IC.hric, () => this.exec('insertHorizontalRule')),
+                '|',
+                this.mItem('charmap', IC.charic, () => this.charMap()),
+                this.mItem('datetime', IC.dateic, () => this.exec('insertText', new Date().toLocaleString(this.lang === 'ar' ? 'ar-AE' : 'en-GB'))),
+                '|',
+                {
+                    label: this.t('pagebreak'),
+                    icon: IC.pbic,
+                    action: () => {
+                        this.restoreSel();
+                        document.execCommand('insertHTML', false, '<hr class="pagebreak"><p><br></p>');
+                        this.onChange();
+                    }
+                },
+                this.mItem('nbsp', IC.nbspic, () => this.exec('insertText', '\u00A0'))
+            ],
+            format: [
+                this.mItem('bold', IC.bold, () => this.exec('bold'), 'Ctrl+B'),
+                this.mItem('italic', IC.italic, () => this.exec('italic'), 'Ctrl+I'),
+                this.mItem('underline', IC.underline, () => this.exec('underline'), 'Ctrl+U'),
+                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('lowercase', IC.lowercaseic, () => this.transformCase('lower')),
+                this.mItem('uppercase', IC.uppercaseic, () => this.transformCase('upper')),
+                this.mItem('capitalize', IC.capitalizeic, () => this.transformCase('capitalize')),
+                '|',
+                this.mItem('clearformat', IC.clearformatic, () => this.exec('removeFormat'))
+            ],
+            tools: [this.mItem('sourcecode', IC.srcic, () => this.sourceDlg()), this.mItem('wordcount', IC.wcic, () => this.wordCountDlg())],
+            table: [
+                { label: this.t('inserttable'), icon: IC.tableic, subBuild: (el) => this.buildTableGridInto(el) },
+                '|',
+                {
+                    label: this.t('cell'),
+                    sub: [{ label: this.t('cellprops'), icon: IC.tableic, action: () => this.cellPropsDlg() }]
+                },
+                {
+                    label: this.t('row'),
+                    sub: [
+                        { label: this.t('rowabove'), icon: IC.rowbefore, action: () => this.tableOp('rowabove'), hover: (on) => this.setOpTarget(on ? 'row' : null) },
+                        { 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('rowprops'), icon: IC.tableic, action: () => this.rowPropsDlg(), hover: (on) => this.setOpTarget(on ? 'row' : null) }
+                    ]
+                },
+                {
+                    label: this.t('column'),
+                    sub: [
+                        { label: this.t('colbefore'), icon: IC.colbefore, action: () => this.tableOp('colbefore'), hover: (on) => this.setOpTarget(on ? 'col' : null) },
+                        { 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('colprops'), icon: IC.tableic, action: () => this.colPropsDlg(), hover: (on) => this.setOpTarget(on ? 'col' : null) }
+                    ]
+                },
+                '|',
+                {
+                    label: this.t('tablepropsttl'),
+                    icon: IC.tableic,
+                    action: () => {
+                        const cell = this.currentCell();
+                        if (!cell) {
+                            alert(this.t('nocell'));
+                            return;
+                        }
+                        this.tblActive = cell.closest('table');
+                        this.tablePropsDlg();
+                    }
+                },
+                { label: this.t('deltable'), icon: IC.tabledelete, action: () => this.tableOp('deltable') }
+            ],
+            help: [this.mItem('helpttl', IC.helpic, () => this.helpDlg(), 'Alt+0')]
+        };
+        const spec = this.options.menubar === true ? DEFAULT_MENUBAR : this.options.menubar;
+        const seen = new Set();
+        spec
+            .split(/\s+/)
+            .filter(Boolean)
+            .forEach((key) => {
+            if (seen.has(key))
+                return;
+            seen.add(key);
+            if (!menus[key]) {
+                console.warn(`FableEditor: unknown menubar item "${key}"`);
+                return;
+            }
+            const b = document.createElement('button');
+            b.type = 'button';
+            b.textContent = this.t(key);
+            b.dataset.menuKey = key;
+            b.addEventListener('mousedown', (e) => {
+                e.preventDefault();
+                this.saveSel();
+            });
+            b.addEventListener('click', () => this.popup(b, (el) => this.menuItems(el, menus[key])));
+            this.menubar.appendChild(b);
+        });
+    }
+    /* ---------------------------------------------------------- table ops */
+    tableOp(op) {
+        this.restoreSel();
+        const s = window.getSelection();
+        if (!s)
+            return;
+        const cell = this.closestBlock(s.anchorNode)?.closest('td,th') ||
+            (s.anchorNode && s.anchorNode.nodeType === 1 ? s.anchorNode.closest?.('td,th') : null);
+        if (!cell)
+            return;
+        const row = cell.parentElement;
+        const table = cell.closest('table');
+        const idx = Array.from(row.children).indexOf(cell);
+        const newRow = () => {
+            const r = row.cloneNode(false);
+            Array.from(row.children).forEach((src) => {
+                const td = document.createElement('td');
+                /* carry the source cell's inline style so borders / padding /
+                   column widths survive on inserted rows */
+                const st = src.getAttribute('style');
+                if (st)
+                    td.setAttribute('style', st);
+                td.style.removeProperty('background-color');
+                td.innerHTML = '<br>';
+                r.appendChild(td);
+            });
+            return r;
+        };
+        if (op === 'rowabove')
+            row.before(newRow());
+        if (op === 'rowbelow')
+            row.after(newRow());
+        if (op === 'delrow') {
+            const body = row.parentElement;
+            row.remove();
+            if (!body.querySelector('tr'))
+                table.remove();
+        }
+        if (op === 'colbefore' || op === 'colafter') {
+            table.querySelectorAll('tr').forEach((tr) => {
+                const ref = tr.children[Math.min(idx, tr.children.length - 1)];
+                const td = document.createElement('td');
+                /* carry the reference cell's inline style so borders / padding
+                   survive on inserted columns; width is dropped so the new
+                   column shares the table space instead of doubling it */
+                const st = ref.getAttribute('style');
+                if (st)
+                    td.setAttribute('style', st);
+                td.style.removeProperty('width');
+                td.style.removeProperty('background-color');
+                td.innerHTML = '<br>';
+                op === 'colbefore' ? ref.before(td) : ref.after(td);
+            });
+        }
+        if (op === 'delcol') {
+            table.querySelectorAll('tr').forEach((tr) => tr.children[idx]?.remove());
+            if (!table.querySelector('td,th'))
+                table.remove();
+        }
+        if (op === 'deltable')
+            table.remove();
+        this.onChange();
+        this.positionTableHandles();
+    }
+    applyTableProps(table, vals) {
+        if (vals.width)
+            table.style.width = /^\d+$/.test(vals.width) ? vals.width + 'px' : vals.width;
+        else
+            table.style.removeProperty('width');
+        const cells = Array.from(table.querySelectorAll('td,th'));
+        if (vals.cellpadding !== '')
+            cells.forEach((c) => (c.style.padding = vals.cellpadding + 'px'));
+        else
+            cells.forEach((c) => c.style.removeProperty('padding'));
+        if (vals.cellspacing !== '') {
+            table.style.borderCollapse = 'separate';
+            table.style.borderSpacing = vals.cellspacing + 'px';
+        }
+        else {
+            table.style.borderCollapse = 'collapse';
+            table.style.removeProperty('border-spacing');
+        }
+        if (vals.border !== '' && +vals.border > 0) {
+            table.style.border = vals.border + 'px solid #b9c2cc';
+            cells.forEach((c) => (c.style.border = vals.border + 'px solid #b9c2cc'));
+        }
+        else {
+            table.style.removeProperty('border');
+            cells.forEach((c) => c.style.removeProperty('border'));
+        }
+        table.style.removeProperty('margin-left');
+        table.style.removeProperty('margin-right');
+        if (vals.align === 'center') {
+            table.style.marginLeft = 'auto';
+            table.style.marginRight = 'auto';
+        }
+        else if (vals.align === 'right') {
+            table.style.marginLeft = 'auto';
+            table.style.marginRight = '0';
+        }
+        else if (vals.align === 'left') {
+            table.style.marginLeft = '0';
+            table.style.marginRight = 'auto';
+        }
+    }
+    tablePropsDlg() {
+        const table = this.tblActive;
+        if (!table)
+            return;
+        let wIn;
+        let padIn;
+        let spIn;
+        let bIn;
+        let alignSel;
+        const rowStyle = 'display:flex;align-items:center;gap:10px;margin:10px 0';
+        const lblStyle = 'width:120px;color:#556;flex:none';
+        const inputStyle = 'flex:1;border:1px solid #cfd6df;border-radius:6px;padding:7px 9px;font:14px inherit';
+        const firstCell = table.querySelector('td,th');
+        const curWidth = table.style.width || '';
+        const curPad = firstCell && firstCell.style.padding ? parseFloat(firstCell.style.padding) : '';
+        const curSp = table.style.borderSpacing ? parseFloat(table.style.borderSpacing) : '';
+        const curBorder = table.style.borderWidth ? parseFloat(table.style.borderWidth) : '';
+        const ml = table.style.marginLeft;
+        const mr = table.style.marginRight;
+        const curAlign = ml === 'auto' && mr === 'auto' ? 'center' : ml === 'auto' ? 'right' : mr === 'auto' && ml === '0' ? 'left' : '';
+        this.dialog(this.t('tablepropsttl'), (body) => {
+            const mk = (labelKey, el) => {
+                const row = document.createElement('div');
+                row.style.cssText = rowStyle;
+                const lbl = document.createElement('span');
+                lbl.style.cssText = lblStyle;
+                lbl.textContent = this.t(labelKey);
+                row.append(lbl, el);
+                body.appendChild(row);
+            };
+            wIn = document.createElement('input');
+            wIn.type = 'text';
+            wIn.style.cssText = inputStyle;
+            wIn.placeholder = 'e.g. 600px or 100%';
+            wIn.value = curWidth;
+            mk('tblwidth', wIn);
+            padIn = document.createElement('input');
+            padIn.type = 'number';
+            padIn.min = '0';
+            padIn.style.cssText = inputStyle;
+            padIn.value = String(curPad);
+            mk('tblcellpadding', padIn);
+            spIn = document.createElement('input');
+            spIn.type = 'number';
+            spIn.min = '0';
+            spIn.style.cssText = inputStyle;
+            spIn.value = String(curSp);
+            mk('tblcellspacing', spIn);
+            bIn = document.createElement('input');
+            bIn.type = 'number';
+            bIn.min = '0';
+            bIn.style.cssText = inputStyle;
+            bIn.value = String(curBorder);
+            mk('tblborder', bIn);
+            alignSel = document.createElement('select');
+            alignSel.style.cssText = inputStyle;
+            [
+                ['', 'alignnone'],
+                ['left', 'alignleft'],
+                ['center', 'aligncenter'],
+                ['right', 'alignright']
+            ].forEach(([v, k]) => {
+                const o = document.createElement('option');
+                o.value = v;
+                o.textContent = this.t(k);
+                if (v === curAlign)
+                    o.selected = true;
+                alignSel.appendChild(o);
+            });
+            mk('tblalign', alignSel);
+        }, [
+            { label: this.t('cancel'), action: () => this.closeDlg() },
+            {
+                label: this.t('save'),
+                primary: true,
+                action: () => {
+                    this.applyTableProps(table, {
+                        width: wIn.value.trim(),
+                        cellpadding: padIn.value.trim(),
+                        cellspacing: spIn.value.trim(),
+                        border: bIn.value.trim(),
+                        align: alignSel.value
+                    });
+                    this.closeDlg();
+                    this.onChange();
+                    this.positionTableHandles();
+                }
+            }
+        ]);
+    }
+    /* ------------------------------------------- cell / row / column props */
+    currentCell() {
+        let node = this.savedRange ? this.savedRange.startContainer : null;
+        if (!node || !this.ed.contains(node)) {
+            const s = window.getSelection();
+            node = s && this.ed.contains(s.anchorNode) ? s.anchorNode : null;
+        }
+        while (node && node !== this.ed) {
+            if (node.nodeType === 1 && /^(TD|TH)$/.test(node.tagName)) {
+                return node;
+            }
+            node = node.parentNode;
+        }
+        return null;
+    }
+    toHexColor(c) {
+        if (/^#[0-9a-fA-F]{6}$/.test(c))
+            return c;
+        const m = /rgba?\((\d+)[,\s]+(\d+)[,\s]+(\d+)/.exec(c);
+        if (!m)
+            return '';
+        return '#' + [m[1], m[2], m[3]].map((n) => (+n).toString(16).padStart(2, '0')).join('');
+    }
+    formRow(body, label, el) {
+        const row = document.createElement('div');
+        row.style.cssText = 'display:flex;align-items:center;gap:10px;margin:10px 0;min-width:360px';
+        const lbl = document.createElement('span');
+        lbl.style.cssText = 'width:120px;color:#556;flex:none';
+        lbl.textContent = label;
+        row.append(lbl, el);
+        body.appendChild(row);
+    }
+    formInput(value, placeholder = '') {
+        const i = document.createElement('input');
+        i.type = 'text';
+        i.style.cssText = 'flex:1;border:1px solid #cfd6df;border-radius:6px;padding:7px 9px;font:14px inherit;min-width:0';
+        i.value = value;
+        i.placeholder = placeholder;
+        return i;
+    }
+    formSelect(options, cur) {
+        const sel = document.createElement('select');
+        sel.style.cssText = 'flex:1;border:1px solid #cfd6df;border-radius:6px;padding:7px 9px;font:14px inherit;background:#fff';
+        options.forEach(([v, label]) => {
+            const o = document.createElement('option');
+            o.value = v;
+            o.textContent = label;
+            if (v === cur)
+                o.selected = true;
+            sel.appendChild(o);
+        });
+        return sel;
+    }
+    formBg(cur) {
+        const wrap = document.createElement('div');
+        wrap.style.cssText = 'flex:1;display:flex;align-items:center;gap:8px';
+        const hex = this.toHexColor(cur);
+        const color = document.createElement('input');
+        color.type = 'color';
+        color.value = hex || '#ffffff';
+        color.style.cssText = 'width:36px;height:29px;border:1px solid #cfd6df;border-radius:4px;padding:1px;background:none;cursor:pointer';
+        const lbl = document.createElement('label');
+        lbl.style.cssText = 'display:flex;align-items:center;gap:6px;cursor:pointer;color:#556';
+        const fill = document.createElement('input');
+        fill.type = 'checkbox';
+        fill.checked = !!hex;
+        lbl.append(fill, document.createTextNode(this.t('fill')));
+        color.addEventListener('input', () => (fill.checked = true));
+        wrap.append(color, lbl);
+        return { wrap, color, fill };
+    }
+    setOrClear(el, prop, val) {
+        if (val)
+            el.style.setProperty(prop, /^(width|height)$/.test(prop) && /^\d+$/.test(val) ? val + 'px' : val);
+        else
+            el.style.removeProperty(prop);
+    }
+    cellPropsDlg() {
+        const cell = this.currentCell();
+        if (!cell) {
+            alert(this.t('nocell'));
+            return;
+        }
+        let wIn;
+        let hIn;
+        let alignSel;
+        let vSel;
+        let bg;
+        this.dialog(this.t('cellprops').replace('…', ''), (body) => {
+            wIn = this.formInput(cell.style.width, 'e.g. 120px / 25%');
+            this.formRow(body, this.t('tblwidth'), wIn);
+            hIn = this.formInput(cell.style.height, 'e.g. 40px');
+            this.formRow(body, this.t('tblheight'), hIn);
+            alignSel = this.formSelect([
+                ['', this.t('alignnone')],
+                ['left', this.t('alignleft')],
+                ['center', this.t('aligncenter')],
+                ['right', this.t('alignright')]
+            ], cell.style.textAlign || '');
+            this.formRow(body, this.t('tblalign'), alignSel);
+            vSel = this.formSelect([
+                ['', this.t('alignnone')],
+                ['top', this.t('valigntop')],
+                ['middle', this.t('valignmiddle')],
+                ['bottom', this.t('valignbottom')]
+            ], cell.style.verticalAlign || '');
+            this.formRow(body, this.t('valign'), vSel);
+            bg = this.formBg(cell.style.backgroundColor || '');
+            this.formRow(body, this.t('backcolor'), bg.wrap);
+        }, [
+            { label: this.t('cancel'), action: () => this.closeDlg() },
+            {
+                label: this.t('save'),
+                primary: true,
+                action: () => {
+                    this.setOrClear(cell, 'width', wIn.value.trim());
+                    this.setOrClear(cell, 'height', hIn.value.trim());
+                    this.setOrClear(cell, 'text-align', alignSel.value);
+                    this.setOrClear(cell, 'vertical-align', vSel.value);
+                    this.setOrClear(cell, 'background-color', bg.fill.checked ? bg.color.value : '');
+                    this.closeDlg();
+                    this.onChange();
+                    this.positionTableHandles();
+                }
+            }
+        ]);
+    }
+    rowPropsDlg() {
+        const cell = this.currentCell();
+        if (!cell) {
+            alert(this.t('nocell'));
+            return;
+        }
+        const row = cell.parentElement;
+        let hIn;
+        let bg;
+        this.dialog(this.t('rowprops').replace('…', ''), (body) => {
+            hIn = this.formInput(row.style.height, 'e.g. 40px');
+            this.formRow(body, this.t('tblheight'), hIn);
+            bg = this.formBg(row.style.backgroundColor || '');
+            this.formRow(body, this.t('backcolor'), bg.wrap);
+        }, [
+            { label: this.t('cancel'), action: () => this.closeDlg() },
+            {
+                label: this.t('save'),
+                primary: true,
+                action: () => {
+                    this.setOrClear(row, 'height', hIn.value.trim());
+                    this.setOrClear(row, 'background-color', bg.fill.checked ? bg.color.value : '');
+                    this.closeDlg();
+                    this.onChange();
+                    this.positionTableHandles();
+                }
+            }
+        ]);
+    }
+    colPropsDlg() {
+        const cell = this.currentCell();
+        if (!cell) {
+            alert(this.t('nocell'));
+            return;
+        }
+        const row = cell.parentElement;
+        const table = cell.closest('table');
+        const idx = Array.from(row.children).indexOf(cell);
+        const colCells = Array.from(table.rows)
+            .map((r) => r.cells[idx])
+            .filter(Boolean);
+        let wIn;
+        let bg;
+        this.dialog(this.t('colprops').replace('…', ''), (body) => {
+            wIn = this.formInput(cell.style.width, 'e.g. 120px / 25%');
+            this.formRow(body, this.t('tblwidth'), wIn);
+            bg = this.formBg(cell.style.backgroundColor || '');
+            this.formRow(body, this.t('backcolor'), bg.wrap);
+        }, [
+            { label: this.t('cancel'), action: () => this.closeDlg() },
+            {
+                label: this.t('save'),
+                primary: true,
+                action: () => {
+                    colCells.forEach((c) => {
+                        this.setOrClear(c, 'width', wIn.value.trim());
+                        this.setOrClear(c, 'background-color', bg.fill.checked ? bg.color.value : '');
+                    });
+                    this.closeDlg();
+                    this.onChange();
+                    this.positionTableHandles();
+                }
+            }
+        ]);
+    }
+    /* ---------------------------------------------------------- dialogs */
+    closeDlg() {
+        if (this.dlgOvl) {
+            this.dlgOvl.remove();
+            this.dlgOvl = null;
+        }
+    }
+    dialog(title, bodyBuild, buttons) {
+        this.closeDlg();
+        this.closePop();
+        this.dlgOvl = document.createElement('div');
+        this.dlgOvl.className = 'ovl';
+        const d = document.createElement('div');
+        d.className = 'dlg';
+        d.dir = this.dir();
+        d.innerHTML = `<header><span>${title}</span><button type="button">×</button></header>
+                   <div class="body"></div><footer></footer>`;
+        d.querySelector('header button').onclick = () => this.closeDlg();
+        bodyBuild(d.querySelector('.body'));
+        (buttons || [{ label: this.t('close'), primary: true, action: () => this.closeDlg() }]).forEach((b) => {
+            const btn = document.createElement('button');
+            btn.type = 'button';
+            btn.textContent = b.label;
+            if (b.primary)
+                btn.className = 'pri';
+            btn.onclick = b.action;
+            d.querySelector('footer').appendChild(btn);
+        });
+        this.dlgOvl.appendChild(d);
+        this.dlgOvl.addEventListener('mousedown', (e) => {
+            if (e.target === this.dlgOvl)
+                this.closeDlg();
+        });
+        document.body.appendChild(this.dlgOvl);
+    }
+    sourceDlg() {
+        let ta;
+        this.dialog(this.t('srcttl'), (body) => {
+            ta = document.createElement('textarea');
+            ta.value = this.ed.innerHTML.replace(/></g, '>\n<');
+            body.appendChild(ta);
+        }, [
+            { label: this.t('cancel'), action: () => this.closeDlg() },
+            {
+                label: this.t('save'),
+                primary: true,
+                action: () => {
+                    this.ed.innerHTML = ta.value;
+                    this.closeDlg();
+                    this.onChange();
+                }
+            }
+        ]);
+    }
+    helpDlg() {
+        this.dialog(this.t('helpttl'), (body) => {
+            const rows = [
+                ['Ctrl+B', this.t('bold')],
+                ['Ctrl+I', this.t('italic')],
+                ['Ctrl+U', this.t('underline')],
+                ['Ctrl+Z', this.t('undo')],
+                ['Ctrl+Y', this.t('redo')],
+                ['Ctrl+A', this.t('selectall')],
+                ['Alt+0', this.t('helpttl')]
+            ];
+            body.innerHTML = `<p style="color:#556">${this.t('shortcuts')}</p>
+        <table class="kbd">${rows.map((r) => `<tr><td>${r[1]}</td><td><kbd>${r[0]}</kbd></td></tr>`).join('')}</table>`;
+        });
+    }
+    wordCountDlg() {
+        this.dialog(this.t('wcttl'), (body) => {
+            body.innerHTML = `<table class="kbd">
+        <tr><td>${this.t('wcwords')}</td><td>${this.countWords()}</td></tr>
+        <tr><td>${this.t('wcchars')}</td><td>${this.ed.textContent?.replace(/\s/g, '').length ?? 0}</td></tr></table>`;
+        });
+    }
+    previewDlg() {
+        this.dialog(this.t('previewttl'), (body) => {
+            const box = document.createElement('div');
+            box.style.cssText =
+                'width:640px;max-width:78vw;max-height:52vh;overflow:auto;border:1px solid #e3e3e3;border-radius:6px;padding:14px;font-family:Helvetica,Arial,sans-serif;font-size:14px';
+            box.innerHTML = this.ed.innerHTML;
+            body.appendChild(box);
+        });
+    }
+    charMap() {
+        this.dialog(this.t('charmap').replace('…', ''), (body) => {
+            const g = document.createElement('div');
+            g.className = 'chgrid';
+            CHARS.forEach((ch) => {
+                const b = document.createElement('button');
+                b.textContent = ch;
+                b.onclick = () => {
+                    this.closeDlg();
+                    this.exec('insertText', ch);
+                };
+                g.appendChild(b);
+            });
+            body.appendChild(g);
+        });
+    }
+    printDoc() {
+        const w = window.open('', '_blank');
+        if (!w)
+            return;
+        w.document.write(`<html dir="${this.dir()}"><body style="font-family:Helvetica,Arial,sans-serif;font-size:14px">${this.ed.innerHTML}</body></html>`);
+        w.document.close();
+        w.focus();
+        w.print();
+    }
+    pickImage() {
+        this.imgInput.value = '';
+        this.imgInput.click();
+    }
+    /* ---------------------------------------------- image upload placeholder */
+    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>`);
+        const ph = this.ed.querySelector('#' + id);
+        if (ph) {
+            ph.removeAttribute('id');
+            this.selectImgPlaceholder(ph);
+        }
+        this.onChange();
+    }
+    clearImgPlaceholderSel() {
+        this.phCtx?.remove();
+        this.phCtx = null;
+        this.phActive?.classList.remove('active');
+        this.phActive = null;
+    }
+    selectImgPlaceholder(ph) {
+        if (this.phActive === ph)
+            return;
+        this.clearImgPlaceholderSel();
+        this.phActive = ph;
+        ph.classList.add('active');
+        this.phCtx = document.createElement('div');
+        this.phCtx.className = 'imgctx img-ph-ctx';
+        this.phCtx.dir = this.dir();
+        document.body.appendChild(this.phCtx);
+        this.renderPhCtxButtons();
+    }
+    renderPhCtxButtons() {
+        const el = this.phCtx;
+        if (!el)
+            return;
+        el.innerHTML = '';
+        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.positionImgPhCtx();
+    }
+    renderPhCtxUrlInput() {
+        const el = this.phCtx;
+        if (!el)
+            return;
+        el.innerHTML = '';
+        const inp = document.createElement('input');
+        inp.type = 'url';
+        inp.className = 'urlinp';
+        inp.placeholder = this.t('imageurlph');
+        const ok = document.createElement('button');
+        ok.type = 'button';
+        ok.className = 'txtbtn';
+        ok.textContent = this.t('insertimg');
+        const submit = () => {
+            const url = inp.value.trim();
+            const ph = this.phActive;
+            if (!ph)
+                return;
+            if (!/^(https?:|data:image\/|blob:)/i.test(url)) {
+                inp.classList.add('err');
+                inp.focus();
+                return;
+            }
+            ok.disabled = true;
+            inp.disabled = true;
+            /* only place the image once the URL actually loads, so the user
+               gets a working preview instead of a broken-image icon */
+            const probe = new Image();
+            probe.onload = () => this.replacePlaceholderWithImage(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.renderPhCtxButtons();
+            }
+        });
+        el.append(inp, ok);
+        this.positionImgPhCtx();
+        inp.focus();
+    }
+    readImageFileInto(file, ph) {
+        if (ph.classList.contains('uploading'))
+            return;
+        if (this.imageUploadHandler) {
+            this.uploadImageFile(file, ph);
+            return;
+        }
+        const fr = new FileReader();
+        fr.onload = () => {
+            if (this.ed.contains(ph))
+                this.replacePlaceholderWithImage(ph, fr.result, file.name.replace(/"/g, ''));
+        };
+        fr.readAsDataURL(file);
+    }
+    /** Runs the host-supplied imageUploadHandler instead of inlining base64,
+     *  so apps can route the file to S3 / Azure Blob / their own server. */
+    uploadImageFile(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.imageUploadHandler(file)
+            .then((url) => {
+            if (!this.ed.contains(ph))
+                return;
+            this.replacePlaceholderWithImage(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.onImageUploadError?.(err, file);
+        });
+    }
+    replacePlaceholderWithImage(ph, src, title) {
+        const img = document.createElement('img');
+        img.src = src;
+        img.alt = '';
+        if (title)
+            img.title = title;
+        ph.replaceWith(img);
+        if (this.phActive === ph)
+            this.clearImgPlaceholderSel();
+        this.refreshState();
+        this.onChange();
+    }
+    positionImgPhCtx() {
+        if (this.phActive && !document.body.contains(this.phActive)) {
+            this.clearImgPlaceholderSel();
+            return;
+        }
+        if (!this.phActive || !this.phCtx)
+            return;
+        const r = this.phActive.getBoundingClientRect();
+        const cw = this.phCtx.offsetWidth;
+        const ch = this.phCtx.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.phCtx.style.left = cx + 'px';
+        this.phCtx.style.top = cy + 'px';
+    }
+    pickWordDoc() {
+        this.docInput.value = '';
+        this.docInput.click();
+    }
+    /* ---------------------------------------------------------- fullscreen */
+    toggleFullscreen() {
+        this.shell.classList.toggle('fullscreen');
+        const b = this.toolbar.querySelector('[data-id=fullscreen]');
+        b?.classList.toggle('on', this.shell.classList.contains('fullscreen'));
+        this.positionTableHandles();
+    }
+    /* ---------------------------------------------------------- table resize */
+    clearTableHandles() {
+        this.tblCorner?.remove();
+        this.tblCorner = null;
+        this.tblColBars.forEach((b) => b.remove());
+        this.tblColBars = [];
+        this.tblCtx?.remove();
+        this.tblCtx = null;
+        this.tblCellMark?.remove();
+        this.tblCellMark = null;
+        this.tblOpMark?.remove();
+        this.tblOpMark = null;
+        this.tblOpMarkKind = null;
+        this.tblActive?.classList.remove('tbl-selected');
+        this.tblActive = null;
+    }
+    /** Blue outline around the cell that holds the caret, so it is clear
+        which cell / row / column the table operations will target. */
+    positionCellMarker() {
+        if (!this.tblCellMark)
+            return;
+        const cell = this.currentCell();
+        if (!cell || !this.tblActive || cell.closest('table') !== this.tblActive) {
+            this.tblCellMark.style.display = 'none';
+            return;
+        }
+        const r = cell.getBoundingClientRect();
+        this.tblCellMark.style.display = 'block';
+        this.tblCellMark.style.left = r.left + scrollX + 'px';
+        this.tblCellMark.style.top = r.top + scrollY + 'px';
+        this.tblCellMark.style.width = r.width + 'px';
+        this.tblCellMark.style.height = r.height + 'px';
+    }
+    /** Dashed highlight over the whole row / column an operation targets,
+        shown while its button or menu item is hovered. */
+    setOpTarget(kind) {
+        this.tblOpMarkKind = kind;
+        this.positionOpMark();
+    }
+    positionOpMark() {
+        const kind = this.tblOpMarkKind;
+        const cell = kind ? this.currentCell() : null;
+        if (!kind || !cell || !this.tblActive || cell.closest('table') !== this.tblActive) {
+            this.tblOpMark?.remove();
+            this.tblOpMark = null;
+            return;
+        }
+        if (!this.tblOpMark) {
+            this.tblOpMark = document.createElement('div');
+            this.tblOpMark.className = 'tbl-opmark';
+            document.body.appendChild(this.tblOpMark);
+        }
+        const tr = this.tblActive.getBoundingClientRect();
+        const cr = cell.getBoundingClientRect();
+        const rr = cell.parentElement.getBoundingClientRect();
+        const left = kind === 'row' ? rr.left : cr.left;
+        const top = kind === 'row' ? rr.top : tr.top;
+        const width = kind === 'row' ? rr.width : cr.width;
+        const height = kind === 'row' ? rr.height : tr.height;
+        this.tblOpMark.style.left = left + scrollX + 'px';
+        this.tblOpMark.style.top = top + scrollY + 'px';
+        this.tblOpMark.style.width = width + 'px';
+        this.tblOpMark.style.height = height + 'px';
+    }
+    /** Lowest allowed top for floating context toolbars — keeps them from
+        covering the editor menubar/toolbar when the target sits on the first line. */
+    ctxMinTop() {
+        return Math.max(scrollY + 4, this.ed.getBoundingClientRect().top + scrollY - 2);
+    }
+    ctxBtn(icon, tip, fn, id) {
+        const b = document.createElement('button');
+        b.type = 'button';
+        b.title = tip;
+        b.innerHTML = icon;
+        if (id)
+            b.dataset.id = id;
+        b.addEventListener('mousedown', (e) => e.preventDefault());
+        b.addEventListener('click', fn);
+        return b;
+    }
+    ctxSep() {
+        const s = document.createElement('div');
+        s.className = 'sep';
+        return s;
+    }
+    buildTableCtxToolbar() {
+        const el = document.createElement('div');
+        el.className = 'tblctx';
+        el.dir = this.dir();
+        /* hovering a row/column button highlights the row/column it targets */
+        const hl = (b, kind) => {
+            b.addEventListener('mouseenter', () => this.setOpTarget(kind));
+            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()));
+        document.body.appendChild(el);
+        return el;
+    }
+    positionTableHandles() {
+        if (!this.tblActive || !document.body.contains(this.tblActive)) {
+            this.clearTableHandles();
+            return;
+        }
+        const rtl = this.ed.getAttribute('dir') === 'rtl';
+        const r = this.tblActive.getBoundingClientRect();
+        const top = r.top + scrollY;
+        const left = r.left + scrollX;
+        const right = r.right + scrollX;
+        const bottom = r.bottom + scrollY;
+        if (this.tblCorner) {
+            this.tblCorner.style.top = bottom - 5 + 'px';
+            this.tblCorner.style.left = (rtl ? left - 5 : right - 5) + 'px';
+            this.tblCorner.style.cursor = rtl ? 'nesw-resize' : 'nwse-resize';
+        }
+        if (this.tblCtx) {
+            const cw = this.tblCtx.offsetWidth;
+            const ch = this.tblCtx.offsetHeight;
+            let cx = left + (right - left) / 2 - cw / 2;
+            cx = Math.max(8 + scrollX, Math.min(cx, scrollX + innerWidth - cw - 8));
+            let cy = top - ch - 8;
+            if (cy < this.ctxMinTop())
+                cy = bottom + 8;
+            this.tblCtx.style.left = cx + 'px';
+            this.tblCtx.style.top = cy + 'px';
+        }
+        this.tblColBars.forEach((b) => b.remove());
+        this.tblColBars = [];
+        const row = this.tblActive.rows[0];
+        if (row) {
+            for (let i = 0; i < row.cells.length - 1; i++) {
+                const rA = row.cells[i].getBoundingClientRect();
+                const boundaryX = (rtl ? rA.left : rA.right) + scrollX;
+                const bar = document.createElement('div');
+                bar.className = 'tbl-colbar';
+                bar.style.top = top + 'px';
+                bar.style.left = boundaryX + 'px';
+                bar.style.height = bottom - top + 'px';
+                document.body.appendChild(bar);
+                bar.addEventListener('mousedown', (e) => this.startColBarDrag(e, i));
+                this.tblColBars.push(bar);
+            }
+        }
+        this.positionCellMarker();
+        this.positionOpMark();
+    }
+    selectTableForResize(table) {
+        if (this.tblActive === table)
+            return;
+        this.clearTableHandles();
+        this.tblActive = table;
+        table.classList.add('tbl-selected');
+        this.tblCorner = document.createElement('div');
+        this.tblCorner.className = 'tbl-handle';
+        document.body.appendChild(this.tblCorner);
+        this.tblCorner.addEventListener('mousedown', (e) => this.startTableCornerDrag(e));
+        this.tblCellMark = document.createElement('div');
+        this.tblCellMark.className = 'tbl-cellmark';
+        this.tblCellMark.style.display = 'none';
+        document.body.appendChild(this.tblCellMark);
+        this.tblCtx = this.buildTableCtxToolbar();
+        this.positionTableHandles();
+    }
+    withNoTextSelect(fn) {
+        const prev = document.body.style.userSelect;
+        document.body.style.userSelect = 'none';
+        fn(() => {
+            document.body.style.userSelect = prev;
+        });
+    }
+    startTableCornerDrag(e) {
+        e.preventDefault();
+        const table = this.tblActive;
+        if (!table)
+            return;
+        const rtl = this.ed.getAttribute('dir') === 'rtl';
+        const startX = e.clientX;
+        const startW = table.getBoundingClientRect().width;
+        table.style.tableLayout = table.style.tableLayout || 'fixed';
+        this.withNoTextSelect((restore) => {
+            const mv = (ev) => {
+                const dx = rtl ? -(ev.clientX - startX) : ev.clientX - startX;
+                table.style.width = Math.max(60, Math.round(startW + dx)) + 'px';
+                this.positionTableHandles();
+            };
+            const up = () => {
+                window.removeEventListener('mousemove', mv);
+                window.removeEventListener('mouseup', up);
+                restore();
+                this.onChange();
+            };
+            window.addEventListener('mousemove', mv);
+            window.addEventListener('mouseup', up);
+        });
+    }
+    startColBarDrag(e, i) {
+        e.preventDefault();
+        e.stopPropagation();
+        const table = this.tblActive;
+        if (!table)
+            return;
+        const rtl = this.ed.getAttribute('dir') === 'rtl';
+        const rows = Array.from(table.rows);
+        const colA = rows.map((r) => r.cells[i]).filter(Boolean);
+        const colB = rows.map((r) => r.cells[i + 1]).filter(Boolean);
+        if (!colA.length || !colB.length)
+            return;
+        const startX = e.clientX;
+        const wA = colA[0].getBoundingClientRect().width;
+        const wB = colB[0].getBoundingClientRect().width;
+        table.style.tableLayout = 'fixed';
+        this.withNoTextSelect((restore) => {
+            const mv = (ev) => {
+                const dx = (rtl ? -1 : 1) * (ev.clientX - startX);
+                colA.forEach((c) => (c.style.width = Math.max(24, Math.round(wA + dx)) + 'px'));
+                colB.forEach((c) => (c.style.width = Math.max(24, Math.round(wB - dx)) + 'px'));
+                this.positionTableHandles();
+            };
+            const up = () => {
+                window.removeEventListener('mousemove', mv);
+                window.removeEventListener('mouseup', up);
+                restore();
+                this.onChange();
+            };
+            window.addEventListener('mousemove', mv);
+            window.addEventListener('mouseup', up);
+        });
+    }
+    /* ---------------------------------------------------------- image toolbar / resize */
+    cancelImgHide() {
+        if (this.imgHideTimer != null) {
+            window.clearTimeout(this.imgHideTimer);
+            this.imgHideTimer = null;
+        }
+    }
+    scheduleImgHide() {
+        this.cancelImgHide();
+        this.imgHideTimer = window.setTimeout(() => this.clearImageHandles(), 250);
+    }
+    clearImageHandles() {
+        this.cancelImgHide();
+        this.imgHandles.forEach((h) => h.remove());
+        this.imgHandles = [];
+        this.imgCtx?.remove();
+        this.imgCtx = null;
+        this.imgActive?.classList.remove('img-selected');
+        this.imgActive = null;
+    }
+    selectImage(img) {
+        if (this.imgActive === img)
+            return;
+        this.clearImageHandles();
+        this.imgActive = img;
+        img.classList.add('img-selected');
+        this.imgHandles = IMG_CORNERS.map((corner) => {
+            const h = document.createElement('div');
+            h.className = 'img-handle img-handle-' + corner;
+            h.dataset.corner = corner;
+            h.addEventListener('mousedown', (e) => this.startImageResizeDrag(e, corner));
+            h.addEventListener('mouseenter', () => this.cancelImgHide());
+            h.addEventListener('mouseleave', () => this.scheduleImgHide());
+            document.body.appendChild(h);
+            return h;
+        });
+        this.imgCtx = this.buildImageCtxToolbar(img);
+        this.positionImageHandles();
+    }
+    buildImageCtxToolbar(img) {
+        const el = document.createElement('div');
+        el.className = 'imgctx';
+        el.dir = this.dir();
+        const rebuild = () => {
+            const rebuilt = this.buildImageCtxToolbar(img);
+            this.imgCtx?.replaceWith(rebuilt);
+            this.imgCtx = rebuilt;
+            this.positionImageHandles();
+        };
+        const align = (a) => {
+            this.setImageAlign(img, a);
+            rebuild();
+        };
+        const isLeft = img.style.float === 'left';
+        const isRight = img.style.float === 'right';
+        const isCenter = !isLeft && !isRight && img.style.marginLeft === 'auto' && img.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.rotateleft, this.t('rotateleft'), false, () => {
+            this.rotateImage(img, -90);
+            rebuild();
+        }), mkBtn(IC.rotateright, this.t('rotateright'), false, () => {
+            this.rotateImage(img, 90);
+            rebuild();
+        }), this.ctxSep(), mkBtn(IC.fliphorizontal, this.t('fliphorizontal'), img.dataset.flipx === '1', () => {
+            this.flipImage(img, 'x');
+            rebuild();
+        }), mkBtn(IC.flipvertical, this.t('flipvertical'), img.dataset.flipy === '1', () => {
+            this.flipImage(img, 'y');
+            rebuild();
+        }), this.ctxSep(), mkBtn(IC.trash, this.t('deleteimg'), false, () => {
+            img.remove();
+            this.clearImageHandles();
+            this.onChange();
+        }));
+        el.addEventListener('mousedown', (e) => e.preventDefault());
+        el.addEventListener('mouseenter', () => this.cancelImgHide());
+        el.addEventListener('mouseleave', () => this.scheduleImgHide());
+        document.body.appendChild(el);
+        return el;
+    }
+    setImageAlign(img, align) {
+        img.style.float = '';
+        img.style.display = '';
+        img.style.marginLeft = '';
+        img.style.marginRight = '';
+        img.style.marginBottom = '';
+        if (align === 'left') {
+            img.style.float = 'left';
+            img.style.marginInlineEnd = '1em';
+            img.style.marginBottom = '0.5em';
+        }
+        else if (align === 'right') {
+            img.style.float = 'right';
+            img.style.marginInlineStart = '1em';
+            img.style.marginBottom = '0.5em';
+        }
+        else {
+            img.style.display = 'block';
+            img.style.marginLeft = 'auto';
+            img.style.marginRight = 'auto';
+        }
+        this.onChange();
+    }
+    applyImgTransform(img) {
+        const rot = parseInt(img.dataset.rotate || '0', 10);
+        const fx = img.dataset.flipx === '1' ? -1 : 1;
+        const fy = img.dataset.flipy === '1' ? -1 : 1;
+        img.style.transform = rot || fx < 0 || fy < 0 ? `rotate(${rot}deg) scale(${fx}, ${fy})` : '';
+    }
+    rotateImage(img, delta) {
+        const rot = (((parseInt(img.dataset.rotate || '0', 10) + delta) % 360) + 360) % 360;
+        img.dataset.rotate = String(rot);
+        this.applyImgTransform(img);
+        this.positionImageHandles();
+        this.onChange();
+    }
+    flipImage(img, axis) {
+        const key = axis === 'x' ? 'flipx' : 'flipy';
+        img.dataset[key] = img.dataset[key] === '1' ? '' : '1';
+        this.applyImgTransform(img);
+        this.positionImageHandles();
+        this.onChange();
+    }
+    positionImageHandles() {
+        if (!this.imgActive || !document.body.contains(this.imgActive)) {
+            this.clearImageHandles();
+            return;
+        }
+        const r = this.imgActive.getBoundingClientRect();
+        const top = r.top + scrollY;
+        const left = r.left + scrollX;
+        const right = r.right + scrollX;
+        const bottom = r.bottom + scrollY;
+        const cornerPos = {
+            nw: [left, top],
+            ne: [right, top],
+            sw: [left, bottom],
+            se: [right, bottom]
+        };
+        this.imgHandles.forEach((h) => {
+            const [x, y] = cornerPos[h.dataset.corner];
+            h.style.left = x - 5 + 'px';
+            h.style.top = y - 5 + 'px';
+        });
+        if (this.imgCtx) {
+            const cw = this.imgCtx.offsetWidth;
+            const ch = this.imgCtx.offsetHeight;
+            let cx = left + (right - left) / 2 - cw / 2;
+            cx = Math.max(8 + scrollX, Math.min(cx, scrollX + innerWidth - cw - 8));
+            let cy = top - ch - 8;
+            if (cy < this.ctxMinTop())
+                cy = bottom + 8;
+            this.imgCtx.style.left = cx + 'px';
+            this.imgCtx.style.top = cy + 'px';
+        }
+    }
+    startImageResizeDrag(e, corner) {
+        e.preventDefault();
+        const img = this.imgActive;
+        if (!img)
+            return;
+        this.cancelImgHide();
+        const startX = e.clientX;
+        const startW = img.getBoundingClientRect().width;
+        const sign = corner === 'nw' || corner === 'sw' ? -1 : 1;
+        this.withNoTextSelect((restore) => {
+            const mv = (ev) => {
+                img.style.width = Math.max(24, Math.round(startW + sign * (ev.clientX - startX))) + 'px';
+                img.style.height = 'auto';
+                this.positionImageHandles();
+            };
+            const up = () => {
+                window.removeEventListener('mousemove', mv);
+                window.removeEventListener('mouseup', up);
+                restore();
+                this.onChange();
+            };
+            window.addEventListener('mousemove', mv);
+            window.addEventListener('mouseup', up);
+        });
+    }
+    /* ---------------------------------------------------------- selection bubble toolbar */
+    toggleBlock(tag) {
+        this.exec('formatBlock', this.currentBlock() === tag ? '<p>' : '<' + tag + '>');
+    }
+    clearSelToolbar() {
+        this.selCtx?.remove();
+        this.selCtx = null;
+    }
+    updateSelToolbar(sel) {
+        if (this.options.readonly || sel.isCollapsed || !sel.rangeCount) {
+            this.clearSelToolbar();
+            return;
+        }
+        const range = sel.getRangeAt(0);
+        const r = range.getBoundingClientRect();
+        if (!r.width && !r.height) {
+            this.clearSelToolbar();
+            return;
+        }
+        if (!this.selCtx)
+            this.selCtx = this.buildSelToolbar();
+        this.positionSelToolbar(range);
+    }
+    buildSelToolbar() {
+        const el = document.createElement('div');
+        el.className = 'selctx';
+        el.dir = this.dir();
+        const foreBtn = this.ctxBtn('<b style="font:600 15px/1 Georgia,serif">A</b><span class="colorbar" data-cb="fore"></span>', this.t('forecolor'), () => this.colorMenu(foreBtn, 'fore'));
+        const backBtn = this.ctxBtn(IC.backcolor, this.t('backcolor'), () => this.colorMenu(backBtn, 'back'));
+        backBtn.querySelector('svg')?.insertAdjacentHTML('afterend', '<span class="colorbar" data-cb="back"></span>');
+        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.addEventListener('mousedown', (e) => e.preventDefault());
+        document.body.appendChild(el);
+        this.syncColorSwatches(el);
+        return el;
+    }
+    positionSelToolbar(range) {
+        if (!this.selCtx)
+            return;
+        const r = range.getBoundingClientRect();
+        const top = r.top + scrollY;
+        const left = r.left + scrollX;
+        const right = r.right + scrollX;
+        const bottom = r.bottom + scrollY;
+        const cw = this.selCtx.offsetWidth;
+        const ch = this.selCtx.offsetHeight;
+        let cx = left + (right - left) / 2 - cw / 2;
+        cx = Math.max(8 + scrollX, Math.min(cx, scrollX + innerWidth - cw - 8));
+        let cy = top - ch - 8;
+        if (cy < this.ctxMinTop())
+            cy = bottom + 8;
+        this.selCtx.style.left = cx + 'px';
+        this.selCtx.style.top = cy + 'px';
+    }
+    repositionSelToolbar() {
+        if (!this.selCtx)
+            return;
+        const s = window.getSelection();
+        if (s && s.rangeCount && !s.isCollapsed && this.ed.contains(s.anchorNode))
+            this.positionSelToolbar(s.getRangeAt(0));
+    }
+    /* ---------------------------------------------------------- state sync */
+    currentBlock() {
+        const s = window.getSelection();
+        if (!s || !s.anchorNode || !this.ed.contains(s.anchorNode))
+            return 'p';
+        const b = this.closestBlock(s.anchorNode);
+        return b ? b.tagName.toLowerCase().replace('div', 'p') : 'p';
+    }
+    /** Element whose computed font reflects the current caret, falling back to the editor root before any selection lands inside it. */
+    fontRefEl() {
+        const s = window.getSelection();
+        if (s && s.anchorNode && this.ed.contains(s.anchorNode)) {
+            return s.anchorNode.nodeType === 1 ? s.anchorNode : s.anchorNode.parentElement;
+        }
+        return this.ed;
+    }
+    currentFont() {
+        const fam = getComputedStyle(this.fontRefEl()).fontFamily.toLowerCase();
+        const hit = this.options.fontFamilyFormats.find(([n, v]) => fam.includes(v.split(',')[0].toLowerCase()));
+        return hit ? hit[0] : '';
+    }
+    currentSize() {
+        const px = Math.round(parseFloat(getComputedStyle(this.fontRefEl()).fontSize));
+        return px > 0 ? px + 'px' : '';
+    }
+    refreshState() {
+        const s = window.getSelection();
+        const inEd = s ? this.ed.contains(s.anchorNode) : false;
+        const blkTag = this.currentBlock();
+        const containers = [this.toolbar, this.selCtx].filter(Boolean);
+        containers.forEach((container) => {
+            [
+                'bold',
+                'italic',
+                'underline',
+                'strikeThrough',
+                'justifyLeft',
+                'justifyCenter',
+                'justifyRight',
+                'justifyFull',
+                'insertOrderedList',
+                'insertUnorderedList'
+            ].forEach((c) => {
+                const b = container.querySelector(`[data-id=${c}]`);
+                if (b)
+                    b.classList.toggle('on', inEd && document.queryCommandState(c));
+            });
+            ['h2', 'h3', 'blockquote'].forEach((tag) => {
+                const b = container.querySelector(`[data-id=${tag}]`);
+                if (b)
+                    b.classList.toggle('on', inEd && blkTag === tag);
+            });
+        });
+        const blk = s ? this.closestBlock(s.anchorNode) : null;
+        const dir = blk?.closest('[dir]')?.getAttribute('dir') || this.ed.getAttribute('dir') || this.dir();
+        this.toolbar.querySelector('[data-id=ltr]')?.classList.toggle('on', inEd && dir === 'ltr');
+        this.toolbar.querySelector('[data-id=rtl]')?.classList.toggle('on', inEd && dir === 'rtl');
+        const setLbl = (id, val, def) => {
+            const l = this.toolbar.querySelector(`[data-id=${id}] .lbl`);
+            if (!l)
+                return;
+            l.textContent = val || def || '';
+            l.classList.toggle('empty', !val);
+        };
+        setLbl('fontsel', this.currentFont());
+        setLbl('sizesel', this.currentSize().replace('px', ''));
+        if (inEd) {
+            setLbl('blocksel', BLOCKS.some((b) => b[0] === blkTag) ? this.blockLabel(blkTag) : this.t('para'));
+        }
+        this.sbWords.textContent = this.countWords() + ' ' + this.t('words');
+    }
+    countWords() {
+        const txt = (this.ed.textContent || '').trim();
+        return txt ? txt.split(/\s+/).length : 0;
+    }
+    /* ---------------------------------------------------------- paste */
+    handlePaste(e) {
+        const cd = e.clipboardData;
+        if (!cd)
+            return;
+        e.preventDefault();
+        const html = cd.getData('text/html');
+        const imgItem = Array.from(cd.items).find((i) => i.type.startsWith('image/'));
+        if (imgItem && !html) {
+            const fr = new FileReader();
+            fr.onload = () => {
+                document.execCommand('insertHTML', false, `<img src="${fr.result}" alt="">`);
+                this.onChange();
+            };
+            fr.readAsDataURL(imgItem.getAsFile());
+            return;
+        }
+        if (html) {
+            document.execCommand('insertHTML', false, cleanPastedHTML(html, this.dir()));
+        }
+        else {
+            document.execCommand('insertHTML', false, normalizeTextPaste(cd.getData('text/plain')));
+        }
+        this.onChange();
+    }
+    /* ---------------------------------------------------------- init */
+    initUI() {
+        this.closePop();
+        this.closeDlg();
+        this.clearTableHandles();
+        this.clearImgPlaceholderSel();
+        this.shell.dir = this.dir();
+        this.ed.dir = this.dir();
+        if (this.options.menubar)
+            this.buildMenubar();
+        else
+            this.menubar.style.display = 'none';
+        if (this.options.toolbar)
+            this.buildToolbar();
+        else
+            this.toolbar.style.display = 'none';
+        this.sbHelp.textContent = this.t('statushelp');
+        this.refreshState();
+    }
+}
+
+class FableEditorComponent {
+    container;
+    language = 'en';
+    height = 302;
+    menubar = true;
+    toolbar = true;
+    statusbar = true;
+    readonly = false;
+    init = {};
+    value = '';
+    editorChange = new EventEmitter();
+    editorReady = new EventEmitter();
+    editor;
+    lastContent = '';
+    ngOnInit() {
+        this.lastContent = this.value;
+        this.editor = new FableEditor({
+            target: this.container.nativeElement,
+            language: this.language,
+            height: this.height,
+            menubar: this.menubar,
+            toolbar: this.toolbar,
+            statusbar: this.statusbar,
+            readonly: this.readonly,
+            initialContent: this.value,
+            ...this.init,
+            onChange: (content) => {
+                this.lastContent = content;
+                this.editorChange.emit(content);
+            },
+            onReady: (api) => this.editorReady.emit(api)
+        });
+    }
+    ngOnChanges(changes) {
+        if (!this.editor)
+            return;
+        if (changes['language'] && !changes['language'].firstChange) {
+            this.editor.setLanguage(this.language);
+        }
+        if (changes['value'] && !changes['value'].firstChange && this.value !== this.lastContent) {
+            this.lastContent = this.value;
+            this.editor.setContent(this.value ?? '');
+        }
+    }
+    ngOnDestroy() {
+        this.editor?.destroy();
+        this.editor = undefined;
+    }
+    getContent() {
+        return this.editor?.getContent() ?? '';
+    }
+    setContent(html) {
+        this.lastContent = html;
+        this.editor?.setContent(html ?? '');
+    }
+    insertContent(html) {
+        this.editor?.insertContent(html);
+    }
+    setLanguage(lang) {
+        this.editor?.setLanguage(lang);
+    }
+    focus() {
+        this.editor?.focus();
+    }
+    writeValue(value) {
+        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"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FableEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fable-editor', standalone: true, template: `<div #container></div>`, styles: [":host{display:block}\n"] }]
+        }], propDecorators: { container: [{
+                type: ViewChild,
+                args: ['container', { static: true }]
+            }], language: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], menubar: [{
+                type: Input
+            }], toolbar: [{
+                type: Input
+            }], statusbar: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], init: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], editorChange: [{
+                type: Output
+            }], editorReady: [{
+                type: Output
+            }] } });
+
+class FableEditorModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FableEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: FableEditorModule, imports: [FableEditorComponent], exports: [FableEditorComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FableEditorModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FableEditorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [FableEditorComponent],
+                    exports: [FableEditorComponent]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FableEditorComponent, FableEditorModule };
+//# sourceMappingURL=fable-editor.mjs.map