@alitons/ckeditor5 0.0.16 → 0.0.17

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.16",
+  "version": "0.0.17",
   "license": "SEE LICENSE IN LICENSE.md",
   "private": false,
   "main": "./build/ckeditor.js",

package/sample/index.html

@@ -20,7 +20,6 @@
 					<div class="col-12  row-editor">
 						<div class="editor-container">
 							<div class="editor" ready="initEditorPage">
-								<p>a</p>
 							</div>
 						</div>
 					</div>
@@ -29,6 +28,8 @@
 					</div>
 				</div>
 
+				<p class="item1">conteudo 1</p><p class="item2">subconteudo</p>
+
 				<div class="row">
 					<div class="col-12 html">
 						<h3>Conteúdo HTML gerado:</h3>

package/src/ckeditor.js

@@ -122,7 +122,29 @@ Editor.builtinPlugins = [
     Timestamp
 ];
 Editor.defaultConfig = {
-    extraAllowedContent: 'div[dir,id,lang,title](*){*}',
+    extraAllowedContent: 'div[dir,id,lang,title](*){*};p[dir,id,lang,title](*){*}',
+    htmlSupport: {
+        allow: [
+            {
+                name: 'p',
+                classes: true,
+                attributes: true,
+                styles: true
+            },
+            {
+                name: 'div',
+                classes: true,
+                attributes: true,
+                styles: true
+            },
+            {
+                name: 'span',
+                classes: true,
+                attributes: true,
+                styles: true
+            }
+        ]
+    },
     toolbar: {
         items: [
             'fontSize',

package/src/ckeditor.ts

@@ -91,6 +91,7 @@ import NumberedDivList from './plugins/listaNumerada';
 import NumberedDivListSplit from './plugins/NumberedDivListSplit';
 
 import './css/custom.css';
+import './css/sei.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.
@@ -177,6 +178,17 @@ class Editor extends DecoupledEditor {
 	];
 
 	public static override defaultConfig = {
+		extraAllowedContent: 'div[dir,id,lang,title](*){*};p[dir,id,lang,title](*){*}',
+		htmlSupport: {
+			allow: [
+				{
+					name: 'p',
+					classes: true, // permite todas as classes em <p>
+					attributes: true, // permite todos os atributos
+					styles: true // permite todos os estilos
+				}
+			]
+		},
 		toolbar: {
 			items: [
 				'undo',

package/src/css/sei.css

@@ -0,0 +1,7 @@
+figure {
+    max-width: 100%;
+}
+
+table p {
+    margin: 0;
+}

package/src/plugins/listaNumerada.ts

@@ -8,6 +8,7 @@ export default class NumberedDivList extends Plugin {
   }
 
   init() {
+        
     const editor = this.editor;
     const toolbar = editor.config.get('toolbar') as any;
     const config = toolbar!.listaNumeradaOptions || {};
@@ -21,7 +22,8 @@ export default class NumberedDivList extends Plugin {
     });
 
     editor.model.schema.register('numItem', {
-      allowIn: 'numList',
+      // allowIn: 'numList',
+      allowWhere: '$block',
       allowContentOf: '$root',
       allowAttributesOf: '$block',
       isLimit: true,
@@ -128,6 +130,67 @@ export default class NumberedDivList extends Plugin {
       model: (viewElement, { writer }) => writer.createElement('numItem')
     });
 
+    let firstConversion = true;
+    let nivelAtual = 1;
+    let lastItemAdded = {} as any;
+    editor.conversion.for('upcast').add( dispatcher => {
+      dispatcher.on( 'element:p', async ( evt, data, conversionApi ) => {
+        const viewElement = data.viewItem;
+        const classAttr = viewElement.getAttribute('class');
+        const {
+          consumable,
+          writer,
+          safeInsert,
+          convertChildren,
+          updateConversionResult
+        } = conversionApi;
+        const { viewItem } = data;
+
+        if(classAttr && (classAttr.match(/Item_Nivel(\d+)/) || classAttr.match(/Paragrafo_Numerado_Nivel(\d+)/))) {
+          const nivelLocal = parseInt(classAttr.replace(/\D/g, '') ?? 0);
+          console.log(nivelLocal);
+          
+          if ( !consumable.test( viewItem, { name: true } ) ) {
+            return;
+          }
+          evt.stop();
+          
+          consumable.consume( viewItem, { name: true } );
+
+          if(!config?.forceList || nivelLocal > nivelAtual) {
+            const numList = writer.createElement('numList', { 'dataBlock': 'true' });
+            let children = null;
+
+            if(nivelLocal > 2) {
+              children = lastItemAdded[nivelLocal - 1].parent ?? null;
+            }
+
+            const numItem = writer.createElement('numItem');
+            writer.insert( numItem, writer.createPositionAt( numList, 'end' ) );
+            safeInsert( numList, !firstConversion ? writer.createPositionAt(children ?? data.modelCursor.parent, 'end') : data.modelCursor );
+            convertChildren( viewItem, numItem );
+            updateConversionResult( numList, data );
+          
+            firstConversion = false;
+            nivelAtual = nivelLocal;
+            lastItemAdded[nivelLocal] = numItem;
+
+          } else {
+            console.log(data.modelCursor);
+            const numItem = writer.createElement('numItem');
+            safeInsert( numItem, lastItemAdded[nivelLocal]?.parent ? writer.createPositionAt(lastItemAdded[nivelLocal]?.parent, 'end') : data.modelCursor );
+            convertChildren( viewItem, numItem );
+            updateConversionResult( numItem, data );
+          
+            nivelAtual = nivelLocal;
+            lastItemAdded[nivelLocal] = numItem;
+          }
+          
+        }
+      }, { priority: 'high' } );
+    });
+
+
     const viewDoc = editor.editing.view.document;
 
     const selectionSpansBlocks = (model: any) => {
@@ -217,6 +280,9 @@ export default class NumberedDivList extends Plugin {
     viewDoc.on(
       'keydown',
       (evt, data) => {
+        firstConversion = true;
+        nivelAtual = 1;
+        lastItemAdded = {} as any;
         const isBackspace = data.keyCode === keyCodes.backspace;
         const isDelete    = data.keyCode === keyCodes.delete;
         if (!isBackspace && !isDelete) return;
@@ -306,10 +372,10 @@ export default class NumberedDivList extends Plugin {
       },
       { priority: 'high' }
     );
-
     
     editor.model.document.on('change:data', () => {
-          executeForceList(editor, config);
+      // ajusteSeiContent(editor);
+      executeForceList(editor, config);
     });
 
     
@@ -501,18 +567,16 @@ function executeForceList(editor: any, config: any) {
   const model = editor.model;
   const firstElement = editor.model.document.getRoot().getChild(0) as any;
   if(config?.forceList && firstElement && firstElement.name !== 'numList') {
-    const numList = model.change( (writer: any) => {
-      const insertPos = writer.createPositionAt(model.document.getRoot(), 0);
+    // cria um num list e move todo o conteudo para dento dele
+    model.change( (writer: any) => {
+      const root = model.document.getRoot();
       const numList = writer.createElement('numList', {
         'data-block': 'true',
         'start': config?.forceList ? config.forceList + 1 : null
       });
-      writer.insert(numList, insertPos);
-      return numList;
-    });
-
-    model.change( (writer: any) => {
-      const root = model.document.getRoot();
+      writer.insert(numList, writer.createPositionAt(root, 0));
+      const secondNumList = writer.createElement('numList');
+      writer.insert(secondNumList, writer.createPositionAt(numList, 0));
       const itemsToMove = [];
       for ( const child of root.getChildren() ) {
         if ( child !== numList ) {
@@ -520,10 +584,35 @@ function executeForceList(editor: any, config: any) {
         }
       }
       for ( const item of itemsToMove ) {
-        const numItem = writer.createElement('numList');
-        writer.insert( numItem, writer.createPositionAt( numList, 'end' ) );
-        writer.move( writer.createRangeOn( item ), writer.createPositionAt( numItem, 0 ) );
+        writer.move( writer.createRangeOn( item ), writer.createPositionAt( secondNumList, 0 ) );
       }
     });
+
+
+
+    // const numList = model.change( (writer: any) => {
+    //   const insertPos = writer.createPositionAt(model.document.getRoot(), 0);
+    //   const numList = writer.createElement('numList', {
+    //     'data-block': 'true',
+    //     'start': config?.forceList ? config.forceList + 1 : null
+    //   });
+    //   writer.insert(numList, insertPos);
+    //   return numList;
+    // });
+
+    // model.change( (writer: any) => {
+    //   const root = model.document.getRoot();
+    //   const itemsToMove = [];
+    //   for ( const child of root.getChildren() ) {
+    //     if ( child !== numList ) {
+    //       itemsToMove.push(child);
+    //     }
+    //   }
+    //   for ( const item of itemsToMove ) {
+    //     const numItem = writer.createElement('numList');
+    //     writer.insert( numItem, writer.createPositionAt( numList, 'end' ) );
+    //     writer.move( writer.createRangeOn( item ), writer.createPositionAt( numItem, 0 ) );
+    //   }
+    // });
   }
 }