@alitons/ckeditor5 0.0.30 → 0.0.31

package/build/plugins/DocumentosPlugin.d.ts

@@ -0,0 +1,7 @@
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import Widget from '@ckeditor/ckeditor5-widget/src/widget';
+export default class DocumentosPlugin extends Plugin {
+    static get pluginName(): string;
+    static get requires(): (typeof Widget)[];
+    init(): Promise<void>;
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@alitons/ckeditor5",
   "author": "Aliton Silva",
   "description": "Ckeditor 5 Personalizado adicionados campos para atender as demandas da SEAD/AC",
-  "version": "0.0.30",
+  "version": "0.0.31",
   "license": "SEE LICENSE IN LICENSE.md",
   "private": false,
   "main": "./build/ckeditor.js",

package/sample/script.js

@@ -115,7 +115,9 @@ watchdog.create( document.querySelector( '.editor' ), {
 			'importarsei',
 			'documentoModelo',
 			'|',
-			'conteudoDinamico:produtos'
+			'conteudoDinamico:produtos',
+			'|',
+			'insertDocumento'
 		]
 	},
 	heading: {
@@ -132,10 +134,50 @@ watchdog.create( document.querySelector( '.editor' ), {
 			uiClass: 'ui-fancy' // isso é pra UI (dropdown)
 		}
 		]
-	}
+	},
+	inserirDocumento: {
+        dropdownLabel: 'Inserir Documento',
+        getItems: async () => {
+            const lista = await buscarLista();
+
+            return lista.map(item => ({
+                id: item.id,
+                label: item.nome,
+				showLabel: false,
+                getHtml: async () => {
+                    const result = await buscarConteudo(item.id);
+                    return result.html;
+                }
+            }));
+        }
+    }
 
 })
 
+async function buscarLista() {
+	// Simula uma chamada AJAX para buscar a lista de documentos
+	return new Promise(resolve => {
+		setTimeout(() => {
+			resolve([
+				{ id: 1, nome: 'Documento A' },
+				{ id: 2, nome: 'Documento B' },
+				{ id: 3, nome: 'Documento C' }
+			]);
+		}, 1500);
+	});
+}
+
+async function buscarConteudo(id) {
+	// Simula uma chamada AJAX para buscar o conteúdo do documento selecionado
+	return new Promise(resolve => {
+		setTimeout(() => {
+			resolve({
+				html: `<p>Conteúdo do Documento ${id}</p>`
+			});
+		}, 1500);
+	});
+}
+
 let prevState = watchdog.state;
 
 watchdog.on( 'stateChange', () => {
@@ -166,11 +208,24 @@ document.getElementById('get-html').addEventListener('click', () => {
 document.getElementById('update-content').addEventListener('click', () => {
 	const editor = watchdog.editor;
 	const conteudoDinamico = editor.plugins.get('ConteudoDinamicoPlugin');
-	conteudoDinamico.updateBySourceId('tabela:produtos', `<table border="1" cellpadding="5" cellspacing="0">
+	conteudoDinamico.updateBySourceId('tabela:produtos', `<table><thead>
 		<tr>
 			<th>Produto</th>
 			<th>Preço</th>
 			<th>Quantidade</th>
 		</tr>
+		</thead>
+		<tbody>
+			<tr>
+				<td>Caneta</td>
+				<td>R$ 2,50</td>
+				<td>${Math.floor(Math.random() * 100)}</td>
+			</tr>
+			<tr>
+				<td>Caderno</td>
+				<td>R$ 15,00</td>
+				<td>${Math.floor(Math.random() * 100)}</td>
+			</tr>
+		</tbody>
 	</table>`);
 });

package/src/ckeditor.ts

@@ -91,6 +91,7 @@ import HeadingUiClassPlugin from './plugins/HeadingUiClassPlugin';
 // import NumberedDivList from './plugins/listaNumerada';
 // import NumberedDivListSplit from './plugins/NumberedDivListSplit';
 import ConteudoDinamicoPlugin from './plugins/ConteudoDinamicoPlugin';
+import DocumentosPlugin from './plugins/DocumentosPlugin';
 
 import './css/custom.css';
 import './css/sei.css';
@@ -177,6 +178,7 @@ class Editor extends DecoupledEditor {
 		SalvarComo,
 		HeadingUiClassPlugin,
 		ConteudoDinamicoPlugin,
+		DocumentosPlugin,
 		// NumberedDivList,
 		// NumberedDivListSplit
 	];
@@ -258,7 +260,8 @@ class Editor extends DecoupledEditor {
 				'documentoModelo',
 				'salvarcomo',
 				// 'numberedDivListSplit'
-				'conteudoDinamico'
+				'conteudoDinamico',
+				'insertDocumento'
 			],
 			shouldNotGroupWhenFull: true
 		},
@@ -289,7 +292,22 @@ class Editor extends DecoupledEditor {
                 startIndex: true,
                 reversed: true
             }
-        }
+        },
+		inserirDocumento: {
+			dropdownLabel: 'Inserir Documento',
+			getItems: async () => {
+				const lista = await buscarListaDocumentos();
+
+				return lista.map(doc => ({
+					id: doc.id,
+					label: doc.nome,
+					getHtml: async () => {
+						const conteudo = await buscarConteudoDocumento(doc.id);
+						return conteudo.html;
+					}
+				}));
+			}
+		}
 	};
 }
 

package/src/css/custom.css

@@ -78,4 +78,51 @@
 .num-list,
 .num-list > .num-li {
   text-indent: 0px !important;
+}
+
+.ck-conteudo-dinamico__loading {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 14px;
+    border: 1px solid #dcdcdc;
+    border-radius: 6px;
+    background: #fafafa;
+    color: #555;
+    min-height: 44px;
+}
+
+.ck-conteudo-dinamico__dots {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    height: 16px;
+}
+
+.ck-conteudo-dinamico__dots span {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: #666;
+    display: inline-block;
+    animation: ck-dots-swing 1s infinite ease-in-out;
+}
+
+.ck-conteudo-dinamico__dots span:nth-child(2) {
+    animation-delay: 0.15s;
+}
+
+.ck-conteudo-dinamico__dots span:nth-child(3) {
+    animation-delay: 0.3s;
+}
+
+@keyframes ck-dots-swing {
+    0%, 80%, 100% {
+        transform: translateY(0);
+        opacity: 0.45;
+    }
+    40% {
+        transform: translateY(-4px);
+        opacity: 1;
+    }
 }

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)}`;
+}