@alitons/ckeditor5 0.0.2 → 0.0.3

package/build/plugins/modelo.d.ts

@@ -1,8 +1,11 @@
 import { Plugin } from '@ckeditor/ckeditor5-core';
 import 'select2/dist/js/select2.full.min';
+import 'select2/dist/css/select2.css';
 export default class DocumentoModelo extends Plugin {
     options: any;
+    uid: string;
     init(): void;
+    createPopup(): void;
     openModalDocumentoModelo(): Promise<string | undefined>;
     parametrosDocumentoModeloCategoria(): {
         dropdownParent: any;

package/package.json

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

package/sample/script.js

@@ -34,32 +34,32 @@ watchdog.create( document.querySelector( '.editor' ), {
 		},
 		documentoModeloOptions: {
 			categoria: {
-				options: [
-					{
-						autotexto: 'teste 1',
-						titulo: 'Primeiro teste'
-					}
-				],
+				// options: [
+				// 	{
+				// 		autotexto: 'teste 1',
+				// 		titulo: 'Primeiro teste'
+				// 	}
+				// ],
 				ajax: {
-					url: 'http://10.10.18.10/compras/api/teste',
+					url: 'https://compras.test/api/documento-modelo/categoria',
 					method: 'GET',
 					data: {
 						usuario: 'usuario',
 					},
 					results: {
-						autotexto: 'autotexto',
-						titulo: 'titulo'
+						id: 'id_categoria_autotexto',
+						value: 'descricao'
 					}
 				}
 			},
-			options: [
-				{
-					autotexto: 'teste 1',
-					titulo: 'Primeiro teste'
-				}
-			],
+			// options: [
+			// 	{
+			// 		autotexto: 'teste 1',
+			// 		titulo: 'Primeiro teste'
+			// 	}
+			// ],
 			ajax: {
-				url: 'http://10.10.18.10/compras/api/teste',
+				url: 'https://compras.test/api/autotexto',
 				method: 'GET',
 				data: {
 					usuario: 'usuario',

package/src/ckeditor.ts

@@ -88,6 +88,7 @@ import AutoTexto from './plugins/autotexto';
 import DocumentoModelo from './plugins/modelo';
 import SalvarComo from './plugins/salvarcomo';
 
+import './css/custom.css';
 
 // You can read more about extending the build with additional plugins in the "Installing plugins" guide.
 // See https://ckeditor.com/docs/ckeditor5/latest/installation/plugins/installing-plugins.html for details.

package/src/css/custom.css

@@ -0,0 +1,3 @@
+.select2-container--open {
+    background-color: white !important;
+}

package/src/plugins/modelo.ts

@@ -2,22 +2,33 @@
 import Swal from 'sweetalert2'
 import { Plugin } from '@ckeditor/ckeditor5-core';
 import { ButtonView } from '@ckeditor/ckeditor5-ui';
+import { createDropdown } from '@ckeditor/ckeditor5-ui';
 import { HtmlDataProcessor } from '@ckeditor/ckeditor5-engine';
 import $ from "jquery"; 
 import 'select2/dist/js/select2.full.min'
-import * as css from 'select2/dist/css/select2.min.css'
+import 'select2/dist/css/select2.css'
+
+window.$ = $;
+window.jQuery = $;
 
 export default class DocumentoModelo extends Plugin {
-	options = [] as any
+	options = [] as any;
+    uid = Math.random().toString(36).substring(7);
     init() {
-        const editor = this.editor;
+        this.createPopup()
+        const toolbar = this.editor.config.get('toolbar') as any;
+        this.options = toolbar!.documentoModeloOptions
+    }
 
-        editor.ui.componentFactory.add( 'documentoModelo', () => {
-            const button = new ButtonView();
+    createPopup() {
+        this.editor.ui.componentFactory.add( 'documentoModelo', () => {
+            
+			const dropdown = createDropdown( this.editor.locale );
 
-            button.set( {
-                label: 'Documento Modelo',
-                icon: `<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="272px" height="272px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+			// Configure dropdown's button properties:
+			dropdown.buttonView.set( {
+				label: 'Modelos',
+				icon: `<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="272px" height="272px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
                 viewBox="0 0 272 272"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
@@ -57,55 +68,113 @@ export default class DocumentoModelo extends Plugin {
                   </g>
                  </g>
                 </svg>`,
-                withText: true,
+				withText: true,
 				tooltip: true
-            });
+			} );
+
+			dropdown.render();
 
 			//VERIFICA SE O EDITOR ESTÁ DESATIVADO
             setTimeout(() => {
-                if(editor.isReadOnly) button.isEnabled = false
+                if(this.editor.isReadOnly) dropdown.isEnabled = false
             }, 500)
 
             // DESABILITA O BOTÃO QUANDO O EDITOR ESTIVER DESABILITADO OU NÃO ESTIVER ATIVO
-            editor.model.document.on('change:data', () => {
-                if(editor.isReadOnly) button.isEnabled = false
-                else button.isEnabled = true
+            this.editor.model.document.on('change:data', () => {
+                if(this.editor.isReadOnly) dropdown.isEnabled = false
+                else dropdown.isEnabled = true
             })
 
-			const toolbar = editor.config.get('toolbar') as any;
+			const toolbar = this.editor.config.get('toolbar') as any;
 
-			if(!toolbar!.documentoModeloOptions || toolbar!.documentoModeloOptions === undefined || [null, undefined, ''].includes(toolbar!.documentoModeloOptions)) {
-				button.isEnabled = false
+			if(!toolbar!.seiOptions || toolbar!.seiOptions === undefined || [null, undefined, ''].includes(toolbar!.seiOptions?.url)) {
+				dropdown.isEnabled = false
 			}
+			
+			// CRIAR O ELEMENTO IGUAL AO ELEMENTO DE BUSCA
+			const input = document.createElement( 'div' );
+            input.classList.add('documento_modelo_container')
+			input.innerHTML = `<div class="ck ck-reset ck-dropdown__panel ck-dropdown__panel_se ck-dropdown__panel-visible ck-dropdown__panel_documento_modelo">
+				<form class="ck ck-find-and-replace-form">
+					<div class="ck ck-form__header">
+						<h2 class="ck ck-form__header__label">Documento Modelo</h2>
+					</div>
+					<fieldset class="ck ck-find-and-replace-form__find" style="margin-bottom: 0px; padding-bottom: 0px;">
+						<div class="ck ck-labeled-field-view ck-labeled-field-view_empty">
+                            <label>Categoria</label>
+							<div class="ck ck-labeled-field-view__input-wrapper">
+                                <select class="ck ck-input ck-input-text_empty ck-input-select categoriamodeloselect" id="search-input-categoria-document-modelo-${this.uid}">
+                                </select>
+							</div>
+							<div class="ck ck-labeled-field-view__status ck-labeled-field-view__status_error" id="search-error-sei-${this.uid}" role="alert"></div>
+						</div>
+					</fieldset>
+					<fieldset class="ck ck-find-and-replace-form__find">
+						<div class="ck ck-labeled-field-view ck-labeled-field-view_empty">
+                            <label>Modelo</label>
+							<div class="ck ck-labeled-field-view__input-wrapper">
+                                <select class="ck ck-input ck-input-text_empty ck-input-select documentomodeloselect" id="search-input-documento-modelo-${this.uid}">
+                                </select>
+							</div>
+							<div class="ck ck-labeled-field-view__status ck-labeled-field-view__status_error" id="search-error-sei-${this.uid}" role="alert"></div>
+						</div>
+					</fieldset>
+					<fieldset class="ck ck-find-and-replace-form__replace" id="search-actions-documento-modelo-${this.uid}" style="display: none">
+						<div class="ck ck-labeled-field-view ck-disabled ck-labeled-field-view_empty" style="background: #e9ecef; border: 1px solid #ced4da; padding: 5px; height: 200px; overflow: auto; text-align: initial;">
+							<div class="ck" id="search-result-documento-modelo-${this.uid}"></div>
+						</div>
+						<button class="ck ck-button ck-button-save ck-off ck-button_with-text" type="button" tabindex="-1" id="search-add-documento-modelo-${this.uid}">
+							<svg class="ck ck-icon ck-reset_all-excluded ck-icon_inherit-color ck-button__icon" viewBox="0 0 20 20"><path d="M6.972 16.615a.997.997 0 0 1-.744-.292l-4.596-4.596a1 1 0 1 1 1.414-1.414l3.926 3.926 9.937-9.937a1 1 0 0 1 1.414 1.415L7.717 16.323a.997.997 0 0 1-.745.292z"></path></svg>
+							<span class="ck ck-button__label">Importar</span>
+						</button>
+					</fieldset>
+				</form>
+			</div>`;
+			dropdown.panelView.element.appendChild( input );
 
+            const self = this;
 
-            // Execute a callback function when the button is clicked.
-            button.on( 'execute', async () => {
-
-				const toolbar = editor.config.get('toolbar') as any;
-
-				if(!toolbar!.documentoModeloOptions || toolbar!.documentoModeloOptions === undefined || [null, undefined, ''].includes(toolbar!.documentoModeloOptions)) {
-					button.isEnabled = false
-					return Swal.fire('Erro', 'Nenhum modelo foi encontrado', 'error')
-				}
-
-				this.options = toolbar!.documentoModeloOptions
-
-				let conteudo = await this.openModalDocumentoModelo() as any
+            // EXECUTAR APENAS QUANDO O DROPDOWN FOR ABERTO
+            dropdown.on( 'change:isOpen', ( evt, name, isOpen ) => {
+                if ( isOpen ) {
+                        $('.categoriamodeloselect')
+                        .select2(this.parametrosDocumentoModeloCategoria())
 
-				if(!conteudo || ['', null, undefined].includes(conteudo)) return
+                        $('.documentomodeloselect')
+                        .select2(this.parametrosDocumentoModelo())
+                        .on('select2:select', function (e) {
+                            console.log('selecionado', $(`#search-actions-documento-modelo-${self.uid}`));
+                            $(`#search-actions-documento-modelo-${self.uid}`).show()
+                            $(`#search-result-documento-modelo-${self.uid}`).html(e.target.value)
+                        })
+                }
+            });
 
+			$('body').on('keyup', `.ck-error`, function() {
+				$(this).removeClass('ck-error')
+				$(`#search-error-sei-${this.uid}`).html('')
+			});
 
-				const viewDocument = editor.editing.view.document;
+			$('body').on('click', `#search-add-documento-modelo-${this.uid}`, async function() {
+				const conteudo = $(`#search-result-documento-modelo-${self.uid}`).html()
+				const viewDocument = self.editor.editing.view.document;
 				const htmlDP = new HtmlDataProcessor( viewDocument  );
 				const viewFragment = htmlDP.toView( conteudo );
-				const modelFragment = editor.data.toModel( viewFragment ) as any;
+				const modelFragment = self.editor.data.toModel( viewFragment ) as any;
+
+				self.editor.model.change(writer => {
+					writer.remove(writer.createRangeIn(self.editor.model.document.getRoot()));
+					self.editor.model.insertContent(modelFragment);
+				});
+
+				// LIMPA O CAMPO DE BUSCA
+				$(`#search-input-documento-modelo-${self.uid}`).val('')
+				$(`#search-actions-documento-modelo-${self.uid}`).hide()
 
-				editor.model.insertContent( modelFragment );
-            } );
+			});
 
-            return button;
-        } );
+			return dropdown;
+        });
     }
 
 	async openModalDocumentoModelo(){
@@ -159,7 +228,7 @@ export default class DocumentoModelo extends Plugin {
     parametrosDocumentoModeloCategoria() {
         const self = this
         let parametros = {
-            dropdownParent: $('.swal2-popup'),
+            dropdownParent: $('.ck-dropdown__panel_documento_modelo'),
             placeholder: this.options?.categoria?.placeholder ?? 'Selecione uma categoria',
         }
 
@@ -205,7 +274,7 @@ export default class DocumentoModelo extends Plugin {
     parametrosDocumentoModelo() {
         const self = this
         let parametros = {
-            dropdownParent: $('.swal2-popup'),
+            dropdownParent: $('.ck-dropdown__panel_documento_modelo'),
             placeholder: this.options?.placeholder ?? 'Selecione uma opção',
         }