fable-editor 1.0.0 → 1.0.2

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

@@ -136,7 +136,13 @@ const I18N = {
         insertimg: 'Insert',
         dropimage: 'Drop image here',
         uploading: 'Uploading…',
-        uploadfailed: 'Upload failed — click to retry'
+        uploadfailed: 'Upload failed — click to retry',
+        template: 'Templates',
+        tplimgleft: 'Image left, text right',
+        tplimgright: 'Image right, text left',
+        tplimgtop: 'Image top, text below',
+        tplimgcenter: 'Text top, image center',
+        deltemplate: 'Delete template'
     },
     ar: {
         dir: 'rtl',
@@ -272,7 +278,13 @@ const I18N = {
         insertimg: 'إدراج',
         dropimage: 'أسقط الصورة هنا',
         uploading: 'جارٍ الرفع…',
-        uploadfailed: 'فشل الرفع — انقر لإعادة المحاولة'
+        uploadfailed: 'فشل الرفع — انقر لإعادة المحاولة',
+        template: 'قوالب',
+        tplimgleft: 'صورة يسار، نص يمين',
+        tplimgright: 'صورة يمين، نص يسار',
+        tplimgtop: 'صورة أعلى، نص أسفل',
+        tplimgcenter: 'نص أعلى، صورة وسط',
+        deltemplate: 'حذف القالب'
     }
 };
 function getStrings(lang) {
@@ -284,7 +296,7 @@ function getStrings(lang) {
 const DEFAULT_TOOLBAR = 'undo redo | preview print | importword revhistory | fontfamily fontsize | fontsizeincrease fontsizedecrease | ' +
     'bold italic underline strikethrough | forecolor backcolor | alignleft aligncenter alignright alignjustify | ' +
     'bullist numlist | outdent indent | link blockquote changecase lineheight wordspacing | removeformat | blocks | ' +
-    'ltr rtl | quickimage quicktable charmap | fullscreen sourcecode';
+    'ltr rtl | quickimage quicktable template 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';
@@ -475,6 +487,11 @@ const IC = {
     wordic: S('<path d="M6 3h8l5 5v13H6z"/><path d="M14 3v5h5"/><text x="8" y="17" font-size="8.5" stroke="none" fill="#222f3e" font-family="Arial" font-weight="bold">W</text>'),
     draftic: G('M480-160q-134 0-227-93t-93-227q0-134 93-227t227-93q69 0 132 28.5T720-690v-110h80v280H520v-80h168q-32-56-87.5-88T480-720q-100 0-170 70t-70 170q0 100 70 170t170 70q77 0 139-44t87-116h84q-28 106-114 173t-196 67Z'),
     trash: S('<path d="M5 7h14M10 7V5h4v2M7.5 7l1 13h7l1-13"/>'),
+    templateic: S('<rect x="4" y="4" width="16" height="16" rx="1.5"/><rect x="6.5" y="6.5" width="5" height="5" rx=".5"/><path d="M14 7.5h3.5M14 10h3.5M6.5 14h11M6.5 17h11"/>'),
+    tplleft: S('<rect x="3" y="5" width="8" height="8" rx=".8"/><path d="M13.5 6.5H21M13.5 9.5H21M13.5 12.5H21M3 15.5h18M3 18.5h18"/>'),
+    tplright: S('<rect x="13" y="5" width="8" height="8" rx=".8"/><path d="M3 6.5h7.5M3 9.5h7.5M3 12.5h7.5M3 15.5h18M3 18.5h18"/>'),
+    tpltop: S('<rect x="5" y="3" width="14" height="9" rx=".8"/><path d="M3 15h18M3 18h18M3 21h12"/>'),
+    tplcenter: S('<path d="M3 4h18M3 7h18M3 10h12"/><rect x="5" y="12.5" width="14" height="9" rx=".8"/>'),
     rotateleft: S('<polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/>'),
     rotateright: S('<polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>'),
     fliphorizontal: S('<path d="M12 3v18"/><path d="M7 8l-4 4 4 4"/><path d="M17 8l4 4-4 4"/>'),
@@ -1364,6 +1381,19 @@ async function importDocxToHtml(input) {
 }
 
 const IMG_CORNERS = ['nw', 'ne', 'sw', 'se'];
+const TPL_LAYOUTS = ['img-left', 'img-right', 'img-top', 'img-center'];
+const TPL_LABEL = {
+    'img-left': 'tplimgleft',
+    'img-right': 'tplimgright',
+    'img-top': 'tplimgtop',
+    'img-center': 'tplimgcenter'
+};
+const TPL_ICON = {
+    'img-left': IC.tplleft,
+    'img-right': IC.tplright,
+    'img-top': IC.tpltop,
+    'img-center': IC.tplcenter
+};
 class FableEditor {
     static instanceCounter = 0;
     options;
@@ -1403,6 +1433,8 @@ class FableEditor {
     onImageUploadError;
     contentStyle;
     selCtx = null;
+    tplActive = null;
+    tplCtx = null;
     docInput;
     revisions = [];
     revTimer = null;
@@ -1561,12 +1593,17 @@ class FableEditor {
             this.positionTableHandles();
             this.positionImageHandles();
             this.positionImgPhCtx();
+            this.positionTplCtx();
         });
         this.on(this.ed, 'keydown', (e) => {
             if (e.altKey && e.key === '0') {
                 e.preventDefault();
                 this.helpDlg();
             }
+            if ((e.key === 'Delete' || e.key === 'Backspace') && this.phActive) {
+                e.preventDefault();
+                this.removeImgPlaceholder();
+            }
         });
         this.on(this.ed, 'paste', (e) => this.handlePaste(e));
         this.on(this.ed, 'drop', (e) => {
@@ -1591,11 +1628,17 @@ class FableEditor {
             const ph = target.closest?.('.img-ph');
             if (ph && this.ed.contains(ph) && !this.options.readonly) {
                 e.preventDefault();
+                this.ed.focus();
                 this.selectImgPlaceholder(ph);
             }
             else {
                 this.clearImgPlaceholderSel();
             }
+            const tpl = target.closest?.('.tpl');
+            if (tpl && this.ed.contains(tpl) && !this.options.readonly)
+                this.selectTemplate(tpl);
+            else
+                this.clearTplSel();
             const img = target.closest?.('img');
             if (img && this.ed.contains(img) && !this.options.readonly) {
                 e.preventDefault();
@@ -1630,17 +1673,20 @@ class FableEditor {
             this.positionTableHandles();
             this.positionImageHandles();
             this.positionImgPhCtx();
+            this.positionTplCtx();
         });
         this.onWin('scroll', () => {
             this.positionTableHandles();
             this.positionImageHandles();
             this.positionImgPhCtx();
+            this.positionTplCtx();
             this.repositionSelToolbar();
         }, true);
         this.onWin('resize', () => {
             this.positionTableHandles();
             this.positionImageHandles();
             this.positionImgPhCtx();
+            this.positionTplCtx();
             this.repositionSelToolbar();
         });
         this.on(this.imgInput, 'change', () => {
@@ -1675,6 +1721,7 @@ class FableEditor {
                 this.imgHandles.includes(e.target) ||
                 (this.imgCtx && this.imgCtx.contains(e.target)) ||
                 (this.phCtx && this.phCtx.contains(e.target)) ||
+                (this.tplCtx && this.tplCtx.contains(e.target)) ||
                 (this.selCtx && this.selCtx.contains(e.target)) ||
                 (this.openPop && this.openPop.contains(e.target)) ||
                 (this.openSubEl && this.openSubEl.contains(e.target)))
@@ -1682,6 +1729,7 @@ class FableEditor {
             this.clearTableHandles();
             this.clearImageHandles();
             this.clearImgPlaceholderSel();
+            this.clearTplSel();
             this.clearSelToolbar();
         });
     }
@@ -1707,6 +1755,7 @@ class FableEditor {
         this.clearTableHandles();
         this.clearImageHandles();
         this.clearImgPlaceholderSel();
+        this.clearTplSel();
         this.clearSelToolbar();
         this.onChange();
     }
@@ -1768,6 +1817,7 @@ class FableEditor {
         this.clearTableHandles();
         this.clearImageHandles();
         this.clearImgPlaceholderSel();
+        this.clearTplSel();
         this.clearSelToolbar();
         this.listeners.forEach((fn) => fn());
         this.listeners = [];
@@ -2612,6 +2662,7 @@ class FableEditor {
             rtl: () => this.tbtn(IC.rtl, this.t('rtl'), () => this.setDir('rtl'), 'rtl'),
             quickimage: () => this.tbtn(IC.image, this.t('quickimage'), () => this.insertImagePlaceholder()),
             quicktable: () => tableBtn,
+            template: () => this.menuTbtn(IC.templateic, this.t('template'), (b) => this.templateMenu(b)),
             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())
@@ -2683,6 +2734,7 @@ class FableEditor {
                 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) },
+                { label: this.t('template'), icon: IC.templateic, subBuild: (el) => this.buildTemplatePickInto(el) },
                 this.mItem('hr', IC.hric, () => this.exec('insertHorizontalRule')),
                 '|',
                 this.mItem('charmap', IC.charic, () => this.charMap()),
@@ -2755,7 +2807,7 @@ class FableEditor {
                         this.tablePropsDlg();
                     }
                 },
-                { label: this.t('deltable'), icon: IC.tabledelete, action: () => this.tableOp('deltable') }
+                { label: this.t('deltable'), icon: IC.trash, action: () => this.tableOp('deltable') }
             ],
             help: [this.mItem('helpttl', IC.helpic, () => this.helpDlg(), 'Alt+0')]
         };
@@ -3286,10 +3338,13 @@ class FableEditor {
         this.imgInput.click();
     }
     /* ---------------------------------------------- image upload placeholder */
+    imgPhHTML(id) {
+        return `<div class="img-ph"${id ? ` id="${id}"` : ''} contenteditable="false">${IC.image}<span>${this.t('dropimage')}</span></div>`;
+    }
     insertImagePlaceholder() {
         this.restoreSel();
         const id = 'img-ph-' + Date.now().toString(36) + Math.random().toString(36).slice(2, 6);
-        document.execCommand('insertHTML', false, `<div class="img-ph" id="${id}" contenteditable="false">${IC.image}<span>${this.t('dropimage')}</span></div>`);
+        document.execCommand('insertHTML', false, this.imgPhHTML(id));
         const ph = this.ed.querySelector('#' + id);
         if (ph) {
             ph.removeAttribute('id');
@@ -3303,6 +3358,17 @@ class FableEditor {
         this.phActive?.classList.remove('active');
         this.phActive = null;
     }
+    removeImgPlaceholder() {
+        const ph = this.phActive;
+        if (!ph)
+            return;
+        this.clearImgPlaceholderSel();
+        /* the placeholder inside a template block IS the media slot — deleting
+           it drops the slot entirely, leaving a text-only block */
+        (ph.closest('.tpl-media') || ph).remove();
+        this.refreshState();
+        this.onChange();
+    }
     selectImgPlaceholder(ph) {
         if (this.phActive === ph)
             return;
@@ -3323,7 +3389,7 @@ class FableEditor {
         el.append(this.ctxBtn(IC.uploadic, this.t('uploadimg'), () => {
             this.phUploadTarget = this.phActive;
             this.pickImage();
-        }), this.ctxBtn(IC.link, this.t('imagelink'), () => this.renderPhCtxUrlInput()));
+        }), this.ctxBtn(IC.link, this.t('imagelink'), () => this.renderPhCtxUrlInput()), this.ctxSep(), this.ctxBtn(IC.trash, this.t('deleteimg'), () => this.removeImgPlaceholder()));
         this.positionImgPhCtx();
     }
     renderPhCtxUrlInput() {
@@ -3448,6 +3514,139 @@ class FableEditor {
         this.phCtx.style.left = cx + 'px';
         this.phCtx.style.top = cy + 'px';
     }
+    /* ---------------------------------------------------------- templates */
+    templateMenu(anchor) {
+        this.popup(anchor, (el) => this.buildTemplatePickInto(el));
+    }
+    /** Miniature div-based mockup of a layout, mirroring what the block looks
+        like in the editor: grey box = image slot, bars = heading/paragraph. */
+    tplPreviewHTML(layout) {
+        const img = '<span class="pv-img"></span>';
+        const head = '<span class="pv-h"></span>';
+        const line = (w) => `<span class="pv-l" style="width:${w}%"></span>`;
+        const col = (inner) => `<span class="pv-col">${inner}</span>`;
+        const row = (inner) => `<span class="pv-row">${inner}</span>`;
+        const textCol = col(head + line(100) + line(88));
+        if (layout === 'img-left')
+            return `<span class="pv">${row(img + textCol)}${line(100)}${line(72)}</span>`;
+        if (layout === 'img-right')
+            return `<span class="pv">${row(textCol + img)}${line(100)}${line(72)}</span>`;
+        if (layout === 'img-top')
+            return `<span class="pv pv-c">${img}${head}${line(100)}${line(72)}</span>`;
+        return `<span class="pv pv-c">${head}${line(100)}${line(72)}${img}</span>`;
+    }
+    buildTemplatePickInto(el, after) {
+        const wrap = document.createElement('div');
+        wrap.className = 'tplpick';
+        TPL_LAYOUTS.forEach((layout) => {
+            const tile = document.createElement('button');
+            tile.type = 'button';
+            tile.className = 'tpltile';
+            tile.title = this.t(TPL_LABEL[layout]);
+            tile.innerHTML = this.tplPreviewHTML(layout) + `<span class="tpllbl">${this.t(TPL_LABEL[layout])}</span>`;
+            tile.addEventListener('click', () => {
+                this.closePop();
+                this.insertTemplate(layout);
+                after?.();
+            });
+            wrap.appendChild(tile);
+        });
+        el.appendChild(wrap);
+    }
+    insertTemplate(layout) {
+        this.restoreSel();
+        const media = `<div class="tpl-media" contenteditable="false">${this.imgPhHTML()}</div>`;
+        const text = `<div class="tpl-text"><h2>${this.t('heading')}</h2><p>${this.t('para')}</p></div>`;
+        /* text-above-image layout keeps DOM order = visual order so the caret
+           travels naturally; every other layout has the media slot first */
+        const inner = layout === 'img-center' ? text + media : media + text;
+        document.execCommand('insertHTML', false, `<div class="tpl tpl-${layout}">${inner}</div><p><br></p>`);
+        this.saveSel();
+        this.onChange();
+    }
+    clearTplSel() {
+        this.tplCtx?.remove();
+        this.tplCtx = null;
+        this.tplActive?.classList.remove('tpl-selected');
+        this.tplActive = null;
+    }
+    selectTemplate(tpl) {
+        if (this.tplActive === tpl)
+            return;
+        this.clearTplSel();
+        this.tplActive = tpl;
+        tpl.classList.add('tpl-selected');
+        this.tplCtx = document.createElement('div');
+        this.tplCtx.className = 'imgctx tplctx';
+        this.tplCtx.dir = this.dir();
+        document.body.appendChild(this.tplCtx);
+        this.renderTplCtxButtons();
+    }
+    renderTplCtxButtons() {
+        const el = this.tplCtx;
+        const tpl = this.tplActive;
+        if (!el || !tpl)
+            return;
+        el.innerHTML = '';
+        TPL_LAYOUTS.forEach((layout) => {
+            const b = this.ctxBtn(TPL_ICON[layout], this.t(TPL_LABEL[layout]), () => this.setTplLayout(layout));
+            b.classList.toggle('on', tpl.classList.contains('tpl-' + layout));
+            el.appendChild(b);
+        });
+        el.append(this.ctxSep(), this.ctxBtn(IC.trash, this.t('deltemplate'), () => this.removeTemplate()));
+        this.positionTplCtx();
+    }
+    setTplLayout(layout) {
+        const tpl = this.tplActive;
+        if (!tpl)
+            return;
+        TPL_LAYOUTS.forEach((l) => tpl.classList.remove('tpl-' + l));
+        tpl.classList.add('tpl-' + layout);
+        /* keep DOM order = visual order (see insertTemplate) */
+        const media = tpl.querySelector(':scope > .tpl-media');
+        const text = tpl.querySelector(':scope > .tpl-text');
+        if (media && text) {
+            if (layout === 'img-center')
+                tpl.appendChild(media);
+            else
+                tpl.insertBefore(media, text);
+        }
+        this.renderTplCtxButtons();
+        this.positionImgPhCtx();
+        this.positionImageHandles();
+        this.onChange();
+    }
+    removeTemplate() {
+        const tpl = this.tplActive;
+        if (!tpl)
+            return;
+        this.clearTplSel();
+        if (this.phActive && tpl.contains(this.phActive))
+            this.clearImgPlaceholderSel();
+        if (this.imgActive && tpl.contains(this.imgActive))
+            this.clearImageHandles();
+        tpl.remove();
+        this.refreshState();
+        this.onChange();
+    }
+    positionTplCtx() {
+        if (this.tplActive && !document.body.contains(this.tplActive)) {
+            this.clearTplSel();
+            return;
+        }
+        if (!this.tplActive || !this.tplCtx)
+            return;
+        const r = this.tplActive.getBoundingClientRect();
+        const cw = this.tplCtx.offsetWidth;
+        const ch = this.tplCtx.offsetHeight;
+        let cx = r.left + scrollX + (r.width - cw) / 2;
+        cx = Math.max(8 + scrollX, Math.min(cx, scrollX + innerWidth - cw - 8));
+        let cy = r.top + scrollY - ch - 8;
+        if (cy < this.ctxMinTop())
+            cy = r.bottom + scrollY + 8;
+        this.tplCtx.style.left = cx + 'px';
+        this.tplCtx.style.top = cy + 'px';
+    }
     pickWordDoc() {
         this.docInput.value = '';
         this.docInput.click();
@@ -3554,7 +3753,7 @@ class FableEditor {
             b.addEventListener('mouseleave', () => this.setOpTarget(null));
             return b;
         };
-        el.append(hl(this.ctxBtn(IC.rowbefore, this.t('rowabove'), () => this.tableOp('rowabove')), 'row'), hl(this.ctxBtn(IC.rowafter, this.t('rowbelow'), () => this.tableOp('rowbelow')), 'row'), hl(this.ctxBtn(IC.rowdelete, this.t('delrow'), () => this.tableOp('delrow')), 'row'), this.ctxSep(), hl(this.ctxBtn(IC.colbefore, this.t('colbefore'), () => this.tableOp('colbefore')), 'col'), hl(this.ctxBtn(IC.colafter, this.t('colafter'), () => this.tableOp('colafter')), 'col'), hl(this.ctxBtn(IC.coldelete, this.t('delcol'), () => this.tableOp('delcol')), 'col'), this.ctxSep(), this.ctxBtn(IC.tabledelete, this.t('deltable'), () => this.tableOp('deltable')), this.ctxBtn(IC.tableic, this.t('tablepropsttl'), () => this.tablePropsDlg()));
+        el.append(hl(this.ctxBtn(IC.rowbefore, this.t('rowabove'), () => this.tableOp('rowabove')), 'row'), hl(this.ctxBtn(IC.rowafter, this.t('rowbelow'), () => this.tableOp('rowbelow')), 'row'), hl(this.ctxBtn(IC.rowdelete, this.t('delrow'), () => this.tableOp('delrow')), 'row'), this.ctxSep(), hl(this.ctxBtn(IC.colbefore, this.t('colbefore'), () => this.tableOp('colbefore')), 'col'), hl(this.ctxBtn(IC.colafter, this.t('colafter'), () => this.tableOp('colafter')), 'col'), hl(this.ctxBtn(IC.coldelete, this.t('delcol'), () => this.tableOp('delcol')), 'col'), this.ctxSep(), this.ctxBtn(IC.trash, this.t('deltable'), () => this.tableOp('deltable')), this.ctxBtn(IC.tableic, this.t('tablepropsttl'), () => this.tablePropsDlg()));
         document.body.appendChild(el);
         return el;
     }
@@ -3761,7 +3960,13 @@ class FableEditor {
             this.flipImage(img, 'y');
             rebuild();
         }), this.ctxSep(), mkBtn(IC.trash, this.t('deleteimg'), false, () => {
-            img.remove();
+            /* inside a template media slot the image swaps back to an
+               upload placeholder so the slot is not lost */
+            const slot = img.closest('.tpl-media');
+            if (slot && this.ed.contains(slot))
+                img.outerHTML = this.imgPhHTML();
+            else
+                img.remove();
             this.clearImageHandles();
             this.onChange();
         }));