@alitons/ckeditor5 0.0.29 → 0.0.31

package/src/plugins/DocumentosPlugin.ts

@@ -0,0 +1,389 @@
+// @ts-nocheck
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import Command from '@ckeditor/ckeditor5-core/src/command';
+
+import Widget from '@ckeditor/ckeditor5-widget/src/widget';
+import { toWidget, viewToModelPositionOutsideModelElement } from '@ckeditor/ckeditor5-widget/src/utils';
+
+import Collection from '@ckeditor/ckeditor5-utils/src/collection';
+import Model from '@ckeditor/ckeditor5-ui/src/model';
+import { createDropdown, addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
+
+export default class DocumentosPlugin extends Plugin {
+    static get pluginName() {
+        return 'DocumentosPlugin';
+    }
+
+    static get requires() {
+        return [ Widget ];
+    }
+
+    async init() {
+        const editor = this.editor;
+
+        this._lastHtmlBySourceId = new Map();
+        this._pendingUpdates = new Set();
+        this._itemsBySourceId = new Map();
+        this._getHtmlBySourceId = new Map();
+
+        const cfg = editor.config.get('inserirDocumento') || {};
+        const dropdownLabel = cfg.dropdownLabel || 'Inserir Documento';
+        const loadingLabel = cfg.loadingLabel || 'Carregando...';
+        const getItems = typeof cfg.getItems === 'function' ? cfg.getItems : null;
+
+        editor.model.schema.register('inserirDocumento', {
+            isObject: true,
+            isBlock: true,
+            allowWhere: '$block',
+            allowAttributes: [ 'sourceId', 'htmlB64' ]
+        });
+
+        editor.editing.mapper.on(
+            'viewToModelPosition',
+            viewToModelPositionOutsideModelElement(
+                editor.model,
+                viewElement => viewElement.hasClass('ck-conteudo-dinamico')
+            )
+        );
+
+        editor.conversion.for('upcast').elementToElement({
+            view: {
+                name: 'div',
+                attributes: { 'data-conteudo-dinamico': '1' }
+            },
+            model: (viewElement, { writer }) => {
+                const sourceId = viewElement.getAttribute('data-source-id') || '';
+                const htmlB64 = viewElement.getAttribute('data-html') || '';
+
+                return writer.createElement('inserirDocumento', { sourceId, htmlB64 });
+            }
+        });
+
+        editor.conversion.for('dataDowncast').elementToElement({
+            model: 'inserirDocumento',
+            view: (modelItem, { writer }) => {
+                const sourceId = modelItem.getAttribute('sourceId') || '';
+                const htmlB64 = modelItem.getAttribute('htmlB64') || '';
+                const html = decodeHtml(htmlB64) || defaultHtml();
+
+                return writer.createRawElement(
+                    'div',
+                    {
+                        class: 'ck-conteudo-dinamico',
+                        'data-conteudo-dinamico': '1',
+                        'data-source-id': sourceId,
+                        'data-html': htmlB64
+                    },
+                    domElement => {
+                        domElement.innerHTML = html;
+                    }
+                );
+            }
+        });
+
+        editor.conversion.for('editingDowncast').elementToElement({
+            model: 'inserirDocumento',
+            view: (modelItem, { writer }) => {
+                const sourceId = modelItem.getAttribute('sourceId') || '';
+                const htmlB64 = modelItem.getAttribute('htmlB64') || '';
+                const html = decodeHtml(htmlB64) || defaultHtml();
+
+                const meta = this._itemsBySourceId.get(sourceId);
+                const widgetLabel = meta?.label || sourceId || 'Conteúdo dinâmico';
+
+                const container = writer.createContainerElement('div', {
+                    class: 'ck-conteudo-dinamico',
+                    'data-conteudo-dinamico': '1',
+                    'data-source-id': sourceId
+                });
+
+                if (meta?.showLabel !== false) {
+                    const header = writer.createContainerElement('div', {
+                        class: 'ck-conteudo-dinamico__header'
+                    });
+
+                    if (meta?.iconSvg) {
+                        const icon = writer.createRawElement(
+                            'span',
+                            { class: 'ck-conteudo-dinamico__icon' },
+                            domEl => {
+                                domEl.innerHTML = meta.iconSvg;
+                            }
+                        );
+                        writer.insert(writer.createPositionAt(header, 'end'), icon);
+                    }
+
+                    if (meta?.label) {
+                        const title = writer.createContainerElement('span', {
+                            class: 'ck-conteudo-dinamico__title'
+                        });
+                        writer.insert(writer.createPositionAt(title, 0), writer.createText(meta.label));
+                        writer.insert(writer.createPositionAt(header, 'end'), title);
+                    }
+
+                    writer.insert(writer.createPositionAt(container, 'end'), header);
+                }
+
+                const raw = writer.createRawElement(
+                    'div',
+                    { class: 'ck-conteudo-dinamico__inner' },
+                    domElement => {
+                        domElement.innerHTML = html;
+                    }
+                );
+
+                writer.insert(writer.createPositionAt(container, 'end'), raw);
+
+                return toWidget(container, writer, { label: widgetLabel });
+            }
+        });
+
+        editor.commands.add('insertInserirDocumento', new InsertInserirDocumentoCommand(editor));
+
+        editor.model.document.on('change:data', () => {
+            if (!this._lastHtmlBySourceId.size) return;
+
+            for (const [ sourceId ] of this._lastHtmlBySourceId.entries()) {
+                this._pendingUpdates.add(sourceId);
+            }
+
+            flushPendingUpdates(editor, this);
+        });
+
+        let initialItems = [];
+
+        try {
+            if (getItems) {
+                const result = await getItems();
+                initialItems = Array.isArray(result) ? result : [];
+            }
+        } catch (error) {
+            console.error('Erro ao carregar lista de documentos na inicialização', error);
+            initialItems = [];
+        }
+
+        for (const item of initialItems) {
+            if (!item?.id) continue;
+
+            const sourceId = String(item.id);
+
+            this._itemsBySourceId.set(sourceId, {
+                sourceId,
+                label: item.label || sourceId,
+                iconSvg: item.iconSvg,
+                showLabel: item.showLabel
+            });
+
+            if (typeof item.getHtml === 'function') {
+                this._getHtmlBySourceId.set(sourceId, item.getHtml);
+            } else if (typeof item.html === 'string') {
+                this._getHtmlBySourceId.set(sourceId, async () => item.html);
+            } else if (typeof item.text === 'string') {
+                this._getHtmlBySourceId.set(sourceId, async () => `<p>${escapeHtml(item.text)}</p>`);
+            }
+        }
+
+        editor.ui.componentFactory.add('insertDocumento', locale => {
+            const dropdown = createDropdown(locale);
+
+            dropdown.buttonView.set({
+                label: dropdownLabel,
+                tooltip: true,
+                withText: true,
+                isVisible: initialItems.length > 0
+            });
+
+            const listItems = new Collection();
+            addListToDropdown(dropdown, listItems);
+
+            for (const item of initialItems) {
+                if (!item?.id) continue;
+
+                const sourceId = String(item.id);
+
+                listItems.add({
+                    type: 'button',
+                    model: new Model({
+                        label: item.label || sourceId,
+                        withText: true,
+                        documentItemId: sourceId
+                    })
+                });
+            }
+
+            dropdown.on('execute', async evt => {
+                const baseSourceId = evt.source.documentItemId;
+
+                if (!baseSourceId) return;
+
+                const getHtmlFn = this._getHtmlBySourceId.get(baseSourceId);
+                if (!getHtmlFn) return;
+
+                const sourceId = createInstanceSourceId(baseSourceId);
+                const meta = this._itemsBySourceId.get(baseSourceId);
+
+                if (meta) {
+                    this._itemsBySourceId.set(sourceId, {
+                        ...meta,
+                        sourceId
+                    });
+                }
+
+                try {
+                    editor.execute('insertInserirDocumento', {
+                        sourceId,
+                        html: loadingDotsHtml('Aguarde...')
+                    });
+                    editor.editing.view.focus();
+
+                    const html = await getHtmlFn();
+
+                    this.updateBySourceId(sourceId, html);
+                } catch (error) {
+                    console.error('Erro ao carregar conteúdo do documento', error);
+
+                    this.updateBySourceId(
+                        sourceId,
+                        `
+                            <div class="ck-conteudo-dinamico__error" contenteditable="false">
+                                Não foi possível carregar o conteúdo.
+                            </div>
+                        `
+                    );
+                }
+            });
+
+            return dropdown;
+        });
+
+        this.updateBySourceId = (sourceId, html) => {
+            this._lastHtmlBySourceId.set(sourceId, html);
+            this._pendingUpdates.add(sourceId);
+            flushPendingUpdates(editor, this);
+        };
+
+        function flushPendingUpdates(editor, plugin) {
+            if (!plugin._pendingUpdates.size) return;
+
+            const ids = Array.from(plugin._pendingUpdates);
+            plugin._pendingUpdates.clear();
+
+            for (const sourceId of ids) {
+                const html = plugin._lastHtmlBySourceId.get(sourceId);
+                if (html == null) continue;
+                updateConteudo(editor, sourceId, html);
+            }
+        }
+    }
+}
+
+class InsertInserirDocumentoCommand extends Command {
+    execute({ sourceId, html }) {
+        const editor = this.editor;
+        const htmlB64 = encodeHtml(html);
+
+        editor.model.change(writer => {
+            const element = writer.createElement('inserirDocumento', {
+                sourceId,
+                htmlB64
+            });
+
+            editor.model.insertContent(element);
+            writer.setSelection(element, 'on');
+        });
+    }
+
+    refresh() {
+        const model = this.editor.model;
+        const selection = model.document.selection;
+        const allowedIn = model.schema.findAllowedParent(
+            selection.getFirstPosition(),
+            'inserirDocumento'
+        );
+
+        this.isEnabled = !!allowedIn;
+    }
+}
+
+function updateConteudo(editor, sourceId, html) {
+    const newHtmlB64 = encodeHtml(html);
+
+    editor.model.change(writer => {
+        const root = editor.model.document.getRoot();
+
+        const targets = [];
+        for (const item of editor.model.createRangeIn(root).getItems()) {
+            if (
+                item.is('element', 'inserirDocumento') &&
+                item.getAttribute('sourceId') === sourceId
+            ) {
+                targets.push(item);
+            }
+        }
+
+        for (const item of targets) {
+            const currentB64 = item.getAttribute('htmlB64') || '';
+            if (currentB64 === newHtmlB64) continue;
+
+            const wasSelected = editor.model.document.selection.getSelectedElement() === item;
+            const insertPos = writer.createPositionBefore(item);
+
+            const attrs = Object.fromEntries(item.getAttributes());
+            attrs.htmlB64 = newHtmlB64;
+
+            writer.remove(item);
+
+            const newElement = writer.createElement('inserirDocumento', attrs);
+            writer.insert(newElement, insertPos);
+
+            if (wasSelected) {
+                writer.setSelection(newElement, 'on');
+            }
+        }
+    });
+}
+
+function defaultHtml() {
+    return '';
+}
+
+function encodeHtml(str) {
+    try {
+        return btoa(unescape(encodeURIComponent(str)));
+    } catch {
+        return '';
+    }
+}
+
+function decodeHtml(b64) {
+    if (!b64) return '';
+    try {
+        return decodeURIComponent(escape(atob(b64)));
+    } catch {
+        return '';
+    }
+}
+
+function escapeHtml(str = '') {
+    return String(str)
+        .replaceAll('&', '&amp;')
+        .replaceAll('<', '&lt;')
+        .replaceAll('>', '&gt;')
+        .replaceAll('"', '&quot;')
+        .replaceAll("'", '&#39;');
+}
+
+function loadingDotsHtml(label = '') {
+    return `
+        <div class="ck-conteudo-dinamico__loading" contenteditable="false">
+            <span class="ck-conteudo-dinamico__dots" aria-hidden="true">
+                <span></span><span></span><span></span>
+            </span>
+            <span class="ck-conteudo-dinamico__loading-text">${escapeHtml(label)}</span>
+        </div>
+    `;
+}
+
+function createInstanceSourceId(baseId) {
+    return `${baseId}:${Date.now()}:${Math.random().toString(36).slice(2, 8)}`;
+}