@alitons/ckeditor5 0.0.29 → 0.0.30

package/build/plugins/ConteudoDinamicoPlugin.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 ConteudoDinamicoPlugin extends Plugin {
+    static get pluginName(): string;
+    static get requires(): (typeof Widget)[];
+    init(): 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.29",
+  "version": "0.0.30",
   "license": "SEE LICENSE IN LICENSE.md",
   "private": false,
   "main": "./build/ckeditor.js",

package/sample/index.html

@@ -22,9 +22,12 @@
 							<div class="editor" ready="initEditorPage"></div>
 						</div>
 					</div>
-					<div class="col-12">
+					<div class="col-3">
 						<button id="get-html">Obter conteúdo HTML</button>
 					</div>
+					<div class="col-3">
+						<button id="update-content">UPDATE</button>
+					</div>
 				</div>
 
 				<p class="item1">conteudo 1</p><p class="item2">subconteudo</p>

package/sample/script.js

@@ -6,12 +6,20 @@ watchdog.setCreator( ( element, config ) => {
 	.then( editor => {
 		document.querySelector( '.document-editor__toolbar' ).appendChild( editor.ui.view.toolbar.element );
 		document.querySelector( '.ck-toolbar' ).classList.add( 'ck-reset_all' );
-		
 		return editor;
 	});
 });
 
 watchdog.create( document.querySelector( '.editor' ), {
+	conteudoDinamico: {
+		buttons: [
+			{
+				name: 'produtos',
+				label: 'Produtos',
+				sourceId: 'tabela:produtos',
+			}
+		]
+	},
 	toolbar: {
 		autoTextoOptions: {
 			ajax: {
@@ -95,7 +103,7 @@ watchdog.create( document.querySelector( '.editor' ), {
 			'link',
 			'bulletedList',
 			'numberedList',
-			'numberedDivListSplit',
+			// 'numberedDivListSplit',
 			'|',
 			'undo',
 			'redo',
@@ -105,7 +113,9 @@ watchdog.create( document.querySelector( '.editor' ), {
 			'|',
 			'autotexto',
 			'importarsei',
-			'documentoModelo'
+			'documentoModelo',
+			'|',
+			'conteudoDinamico:produtos'
 		]
 	},
 	heading: {
@@ -151,4 +161,16 @@ document.getElementById('get-html').addEventListener('click', () => {
 	const htmlContent = editor.getData();
 	const htmlTextarea = document.querySelector('.html textarea');
 	htmlTextarea.value = htmlContent;
+});
+
+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">
+		<tr>
+			<th>Produto</th>
+			<th>Preço</th>
+			<th>Quantidade</th>
+		</tr>
+	</table>`);
 });

package/src/ckeditor.ts

@@ -90,6 +90,7 @@ import SalvarComo from './plugins/salvarcomo';
 import HeadingUiClassPlugin from './plugins/HeadingUiClassPlugin';
 // import NumberedDivList from './plugins/listaNumerada';
 // import NumberedDivListSplit from './plugins/NumberedDivListSplit';
+import ConteudoDinamicoPlugin from './plugins/ConteudoDinamicoPlugin';
 
 import './css/custom.css';
 import './css/sei.css';
@@ -175,6 +176,7 @@ class Editor extends DecoupledEditor {
         DocumentoModelo,
 		SalvarComo,
 		HeadingUiClassPlugin,
+		ConteudoDinamicoPlugin,
 		// NumberedDivList,
 		// NumberedDivListSplit
 	];
@@ -256,6 +258,7 @@ class Editor extends DecoupledEditor {
 				'documentoModelo',
 				'salvarcomo',
 				// 'numberedDivListSplit'
+				'conteudoDinamico'
 			],
 			shouldNotGroupWhenFull: true
 		},

package/src/plugins/ConteudoDinamicoPlugin.ts

@@ -0,0 +1,332 @@
+// @ts-nocheck
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import Command from '@ckeditor/ckeditor5-core/src/command';
+
+import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+
+import Widget from '@ckeditor/ckeditor5-widget/src/widget';
+import { toWidget, viewToModelPositionOutsideModelElement } from '@ckeditor/ckeditor5-widget/src/utils';
+
+export default class ConteudoDinamicoPlugin extends Plugin {
+  static get pluginName() {
+    return 'ConteudoDinamicoPlugin';
+  }
+
+  static get requires() {
+    return [ Widget ];
+  }
+
+  init() {
+    const editor = this.editor;
+
+    this._lastHtmlBySourceId = new Map(); 
+    this._pendingUpdates = new Set();
+
+    /* ================= CONFIG ================= */
+    const cfg = editor.config.get('conteudoDinamico') || {};
+    const buttons = Array.isArray(cfg.buttons) ? cfg.buttons : [];
+
+    /* ================= SCHEMA ================= */
+    editor.model.schema.register('conteudoDinamico', {
+      isObject: true,
+      isBlock: true,
+      allowWhere: '$block',
+      allowAttributes: ['sourceId', 'htmlB64']
+    });
+
+    editor.editing.mapper.on(
+      'viewToModelPosition',
+      viewToModelPositionOutsideModelElement(editor.model, viewElement =>
+        viewElement.hasClass('ck-conteudo-dinamico')
+      )
+    );
+
+    /* ================= UPCAST ================= */
+    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('conteudoDinamico', { sourceId, htmlB64 });
+      }
+    });
+
+    /* ================= DATA DOWNCAST ================= */
+    editor.conversion.for('dataDowncast').elementToElement({
+      model: 'conteudoDinamico',
+      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;
+          }
+        );
+      }
+    });
+
+    /* ================= EDITING DOWNCAST ================= */
+    editor.conversion.for('editingDowncast').elementToElement({
+      model: 'conteudoDinamico',
+      view: (modelItem, { writer }) => {
+        const sourceId = modelItem.getAttribute('sourceId') || '';
+        const htmlB64 = modelItem.getAttribute('htmlB64') || '';
+        const html = decodeHtml(htmlB64) || defaultHtml();
+
+        // Label dinâmico por sourceId (usa config.buttons)
+        const meta = getButtonMetaBySourceId(buttons, sourceId);
+        const widgetLabel = meta?.label || sourceId || 'Conteúdo dinâmico';
+
+        // ContainerElement (widget)
+        const container = writer.createContainerElement('div', {
+          class: 'ck-conteudo-dinamico',
+          'data-conteudo-dinamico': '1',
+          'data-source-id': sourceId
+        });
+
+        // Header visual opcional (ícone + texto) — fica fora do raw, então não quebra toWidget
+        if ( meta?.showLabel ) {
+          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);
+        }
+
+        // Conteúdo travado
+        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 });
+      }
+    });
+
+    /* ================= COMMAND ================= */
+    editor.commands.add('insertConteudoDinamico', new InsertConteudoDinamicoCommand(editor));
+
+    editor.model.document.on('change:data', () => {
+      // Sempre que o doc muda, tenta reaplicar a versão mais recente
+      // para qualquer sourceId que esteja no cache.
+      if (!this._lastHtmlBySourceId.size) return;
+
+      for (const [sourceId] of this._lastHtmlBySourceId.entries()) {
+        this._pendingUpdates.add(sourceId);
+      }
+
+      flushPendingUpdates(editor, this);
+    });
+
+    /* ================= TOOLBAR BUTTONS (N) ================= */
+    // Cria 1 botão por item configurado: conteudoDinamico:<name>
+    for (const b of buttons) {
+      if (!b?.name) continue;
+
+      const componentName = `conteudoDinamico:${b.name}`;
+
+      editor.ui.componentFactory.add(componentName, locale => {
+        const view = new ButtonView(locale);
+
+        // ✅ Texto ou ícone
+        const label = b.label || '+';
+
+        view.set({
+          label,
+          tooltip: true,
+          withText: !b.iconSvg // se tem svg, não precisa mostrar texto
+        });
+
+        if (b.iconSvg) {
+          // ButtonView espera "icon" como string SVG
+          view.icon = b.iconSvg;
+        }
+
+        view.on('execute', () => {
+          const sourceId = String(b.sourceId || `api:${b.name}`);
+
+          // ✅ se já existe update da API, insere já atualizado
+          const cached = this._lastHtmlBySourceId.get(sourceId);
+          const html = cached ?? defaultHtml();
+
+          editor.execute('insertConteudoDinamico', { sourceId, html });
+          editor.editing.view.focus();
+        });
+
+        return view;
+      });
+    }
+
+    /* ================= API PÚBLICA ================= */
+    this.updateBySourceId = (sourceId, html) => {
+      // 1) sempre guarda a última versão
+      this._lastHtmlBySourceId.set(sourceId, html);
+
+      // 2) marca como pendente e tenta aplicar
+      this._pendingUpdates.add(sourceId);
+      flushPendingUpdates(editor, this);
+    };
+
+    function flushPendingUpdates(editor, plugin) {
+      // Só aplica quando o editor já tiver model pronto (no mínimo 1 change já aconteceu).
+      // Mesmo assim, pode chamar quantas vezes quiser que é idempotente.
+      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);
+      }
+    }
+
+  }
+}
+
+/* ================= COMMAND ================= */
+
+class InsertConteudoDinamicoCommand extends Command {
+  execute({ sourceId, html }) {
+    const editor = this.editor;
+
+    editor.model.change(writer => {
+      const htmlB64 = encodeHtml(html || '');
+
+      const element = writer.createElement('conteudoDinamico', {
+        sourceId: sourceId || '',
+        htmlB64
+      });
+
+      editor.model.insertContent(element);
+    });
+  }
+
+  refresh() {
+    this.isEnabled = true;
+  }
+}
+
+/* ================= UPDATE ================= */
+
+function updateConteudo(editor, sourceId, html) {
+  const newHtmlB64 = encodeHtml(html);
+
+  editor.model.change(writer => {
+    const root = editor.model.document.getRoot();
+
+    // Coleta primeiro para não bagunçar o iterator removendo/inserindo durante o loop.
+    const targets = [];
+    for (const item of editor.model.createRangeIn(root).getItems()) {
+      if (item.is('element', 'conteudoDinamico') && 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('conteudoDinamico', attrs);
+      writer.insert(newElement, insertPos);
+
+      if (wasSelected) {
+        writer.setSelection(newElement, 'on');
+      }
+    }
+  });
+}
+
+
+
+/* ================= HELPERS ================= */
+
+function getButtonMetaBySourceId(buttons, sourceId) {
+  return (buttons || []).find(b => String(b.sourceId || '') === String(sourceId || ''));
+}
+
+function defaultHtml() {
+  return `
+    <table border="1" style="width:100%; border-collapse:collapse;">
+      <tr><th>Exemplo</th><th>Conteúdo</th></tr>
+      <tr><td>A</td><td>B</td></tr>
+    </table>
+  `;
+}
+
+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 '';
+  }
+}
+
+/* ===== Opcional: impedir duplicar o mesmo sourceId ===== */
+
+// function findConteudoBySourceId(editor, sourceId) {
+//   const root = editor.model.document.getRoot();
+//   for (const item of editor.model.createRangeIn(root).getItems()) {
+//     if (item.is('element', 'conteudoDinamico') && item.getAttribute('sourceId') === sourceId) {
+//       return item;
+//     }
+//   }
+//   return null;
+// }
+
+// function selectModelElement(editor, element) {
+//   editor.model.change(writer => {
+//     writer.setSelection(element, 'on');
+//   });
+// }