@alitons/ckeditor5 0.0.4 → 0.0.6

package/build/components/list/listitemview.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The list item view class.
+ */
+export default class ListItemView extends View<HTMLElement> {
+    /**
+     * @inheritDoc
+     */
+    constructor(locale: any);
+    children: import("@ckeditor/ckeditor5-ui").ViewCollection<View<HTMLElement>>;
+    /**
+     * Focuses the list item.
+     */
+    focus(): void;
+}
+import View from "@ckeditor/ckeditor5-ui/src/view";

package/build/components/list/listseparatorview.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The list separator view class.
+ */
+export default class ListSeparatorView {
+    /**
+     * @inheritDoc
+     */
+    constructor(locale: any);
+}

package/build/components/list/listview.d.ts

@@ -0,0 +1,25 @@
+/**
+ * The list view class.
+ */
+export default class ListView extends View<HTMLElement> {
+    /**
+     * @inheritDoc
+     */
+    constructor(locale: any);
+    items: import("@ckeditor/ckeditor5-ui").ViewCollection<View<HTMLElement>>;
+    focusTracker: FocusTracker;
+    keystrokes: KeystrokeHandler;
+    _focusCycler: FocusCycler;
+    /**
+     * Focuses the first focusable in {@link #items}.
+     */
+    focus(): void;
+    /**
+     * Focuses the last focusable in {@link #items}.
+     */
+    focusLast(): void;
+}
+import View from "@ckeditor/ckeditor5-ui/src/view";
+import { FocusTracker } from "@ckeditor/ckeditor5-utils";
+import { KeystrokeHandler } from "@ckeditor/ckeditor5-utils";
+import FocusCycler from "@ckeditor/ckeditor5-ui/src/focuscycler";

package/build/plugins/NumberedDivListSplit.d.ts

@@ -0,0 +1,6 @@
+import { Plugin } from '@ckeditor/ckeditor5-core';
+export default class NumberedDivListSplit extends Plugin {
+    static get requires(): never[];
+    static get pluginName(): "NumberedDivListSplit";
+    init(): void;
+}

package/build/plugins/listaNumerada-bkp.d.ts

@@ -0,0 +1,5 @@
+import { Plugin } from '@ckeditor/ckeditor5-core';
+export default class NumberedDivList extends Plugin {
+    static get pluginName(): string;
+    init(): void;
+}

package/build/plugins/listaNumerada.d.ts

@@ -0,0 +1,5 @@
+import { Plugin } from '@ckeditor/ckeditor5-core';
+export default class NumberedDivList extends Plugin {
+    static get pluginName(): string;
+    init(): void;
+}

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.4",
+  "description": "Ckeditor 5 Personalizado adicionados campos para atender as demandas da SEAD/AC",
+  "version": "0.0.6",
   "license": "SEE LICENSE IN LICENSE.md",
   "private": false,
   "main": "./build/ckeditor.js",
@@ -25,6 +25,7 @@
     "@ckeditor/ckeditor5-horizontal-line": "39.0.1",
     "@ckeditor/ckeditor5-html-embed": "39.0.1",
     "@ckeditor/ckeditor5-html-support": "39.0.1",
+    "@ckeditor/ckeditor5-icons": "^47.1.0",
     "@ckeditor/ckeditor5-image": "39.0.1",
     "@ckeditor/ckeditor5-indent": "39.0.1",
     "@ckeditor/ckeditor5-language": "39.0.1",

package/sample/index.html

@@ -14,16 +14,26 @@
 		<div data-editor="DecoupledEditor" data-collaboration="true" data-revision-history="true">
 			<div class="centered">
 				<div class="row">
-					<div class="col-12">
+					<div class="col-12 p-0">
 						<div class="document-editor__toolbar"></div>
 					</div>
 					<div class="col-12  row-editor">
 						<div class="editor-container">
 							<div class="editor" ready="initEditorPage">
-								
+								<p>a</p>
 							</div>
 						</div>
 					</div>
+					<div class="col-12">
+						<button id="get-html">Obter conteúdo HTML</button>
+					</div>
+				</div>
+
+				<div class="row">
+					<div class="col-12 html">
+						<h3>Conteúdo HTML gerado:</h3>
+						<textarea class="form-control" rows="10" readonly></textarea>
+					</div>
 				</div>
 			</div>
 		</div>

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: 'https://compras.test/api/documento-modelo/categoria',
+					url: 'http://10.10.18.10/compras/api/teste',
 					method: 'GET',
 					data: {
 						usuario: 'usuario',
 					},
 					results: {
-						id: 'id_categoria_autotexto',
-						value: 'descricao'
+						autotexto: 'autotexto',
+						titulo: 'titulo'
 					}
 				}
 			},
-			// options: [
-			// 	{
-			// 		autotexto: 'teste 1',
-			// 		titulo: 'Primeiro teste'
-			// 	}
-			// ],
+			options: [
+				{
+					autotexto: 'teste 1',
+					titulo: 'Primeiro teste'
+				}
+			],
 			ajax: {
-				url: 'https://compras.test/api/autotexto',
+				url: 'http://10.10.18.10/compras/api/teste',
 				method: 'GET',
 				data: {
 					usuario: 'usuario',
@@ -90,6 +90,10 @@ watchdog.create( document.querySelector( '.editor' ), {
 				}
 			]
 		},
+		listaNumeradaOptions: {
+			disableEnter: true,
+			forceList: 3,
+		},
 		items: [
 			'salvarcomo',
 			'|',
@@ -100,10 +104,14 @@ watchdog.create( document.querySelector( '.editor' ), {
 			'link',
 			'bulletedList',
 			'numberedList',
+			'numberedDivListSplit',
 			'|',
 			'undo',
 			'redo',
 			'|',
+			'indent',
+			'outdent',
+			'|',
 			'autotexto',
 			'importarsei',
 			'documentoModelo'
@@ -111,10 +119,29 @@ watchdog.create( document.querySelector( '.editor' ), {
 	},
 })
 
+let prevState = watchdog.state;
+
+watchdog.on( 'stateChange', () => {
+	const currentState = watchdog.state;
+
+	if ( currentState === 'crashedPermanently' ) {
+		watchdog.editor.enableReadOnlyMode( 'crashed-editor' );
+	}
+
+	prevState = currentState;
+} );
+
 function initEditorPage(editor) {
 	console.log('Editor criado:', editor);
 	const toolbarContainer = document.querySelector('.document-editor__toolbar');
 	toolbarContainer.appendChild( editor.ui.view.toolbar.element );
 
 	editor.enableReadOnlyMode( true );
-}
+}
+
+document.getElementById('get-html').addEventListener('click', () => {
+	const editor = watchdog.editor;
+	const htmlContent = editor.getData();
+	const htmlTextarea = document.querySelector('.html textarea');
+	htmlTextarea.value = htmlContent;
+});

package/src/ckeditor.ts

@@ -87,6 +87,8 @@ import ImportarSei from './plugins/sei';
 import AutoTexto from './plugins/autotexto';
 import DocumentoModelo from './plugins/modelo';
 import SalvarComo from './plugins/salvarcomo';
+import NumberedDivList from './plugins/listaNumerada';
+import NumberedDivListSplit from './plugins/NumberedDivListSplit';
 
 import './css/custom.css';
 
@@ -169,7 +171,9 @@ class Editor extends DecoupledEditor {
 		AutoTexto,
 		ImportarSei,
         DocumentoModelo,
-		SalvarComo
+		SalvarComo,
+		NumberedDivList,
+		NumberedDivListSplit
 	];
 
 	public static override defaultConfig = {
@@ -218,7 +222,8 @@ class Editor extends DecoupledEditor {
 				'autotexto',
 				'importarsei',
 				'documentoModelo',
-				'salvarcomo'
+				'salvarcomo',
+				'numberedDivListSplit'
 			],
 			shouldNotGroupWhenFull: true
 		},

package/src/components/list/listitemview.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/list/listitemview
+ */
+import View from '@ckeditor/ckeditor5-ui/src/view';
+import type ViewCollection from '@ckeditor/ckeditor5-ui/src/viewcollection';
+import type { Locale } from '@ckeditor/ckeditor5-utils';
+/**
+ * The list item view class.
+ */
+export default class ListItemView extends View {
+    /**
+     * Collection of the child views inside of the list item {@link #element}.
+     */
+    readonly children: ViewCollection;
+    /**
+     * Controls whether the item view is visible. Visible by default, list items are hidden
+     * using a CSS class.
+     *
+     * @observable
+     * @default true
+     */
+    isVisible: boolean;
+    /**
+     * @inheritDoc
+     */
+    constructor(locale?: Locale);
+    /**
+     * Focuses the list item.
+     */
+    focus(): void;
+}

package/src/components/list/listitemview.js

@@ -0,0 +1,42 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/list/listitemview
+ */
+import View from '@ckeditor/ckeditor5-ui/src/view';
+/**
+ * The list item view class.
+ */
+export default class ListItemView extends View {
+    /**
+     * @inheritDoc
+     */
+    constructor(locale) {
+        super(locale);
+        const bind = this.bindTemplate;
+        this.set('isVisible', true);
+        this.children = this.createCollection();
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-list-properties',
+                    'ck-list-properties_with',
+                    'ck-list-numbered-properties',
+                    bind.if('isVisible', 'ck-hidden', value => !value)
+                ],
+                role: 'presentation'
+            },
+            children: this.children
+        });
+    }
+    /**
+     * Focuses the list item.
+     */
+    focus() {
+        this.children.first.focus();
+    }
+}

package/src/components/list/listview.d.ts

@@ -0,0 +1,65 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/list/listview
+ */
+import View from '@ckeditor/ckeditor5-ui/src/view';
+import type DropdownPanelFocusable from '@ckeditor/ckeditor5-ui/src/dropdown/dropdownpanelfocusable';
+import type ViewCollection from '@ckeditor/ckeditor5-ui/src/viewcollection';
+import { FocusTracker, KeystrokeHandler, type Locale } from '@ckeditor/ckeditor5-utils';
+import '@ckeditor/ckeditor5-ui/theme/components/list/list.css';
+/**
+ * The list view class.
+ */
+export default class ListView extends View<HTMLUListElement> implements DropdownPanelFocusable {
+    /**
+     * Collection of the child list views.
+     */
+    readonly items: ViewCollection;
+    /**
+     * Tracks information about DOM focus in the list.
+     */
+    readonly focusTracker: FocusTracker;
+    /**
+     * Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+     */
+    readonly keystrokes: KeystrokeHandler;
+    /**
+     * Label used by assistive technologies to describe this list element.
+     *
+     * @observable
+     */
+    ariaLabel: string | undefined;
+    /**
+     * The property reflected by the `role` DOM attribute to be used by assistive technologies.
+     *
+     * @observable
+     */
+    role: string | undefined;
+    /**
+     * Helps cycling over focusable {@link #items} in the list.
+     */
+    private readonly _focusCycler;
+    /**
+     * @inheritDoc
+     */
+    constructor(locale?: Locale);
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
+    /**
+     * Focuses the first focusable in {@link #items}.
+     */
+    focus(): void;
+    /**
+     * Focuses the last focusable in {@link #items}.
+     */
+    focusLast(): void;
+}

package/src/components/list/listview.js

@@ -0,0 +1,92 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/list/listview
+ */
+import View from '@ckeditor/ckeditor5-ui/src/view';
+import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler';
+import { FocusTracker, KeystrokeHandler } from '@ckeditor/ckeditor5-utils';
+import '@ckeditor/ckeditor5-ui/theme/components/list/list.css';
+/**
+ * The list view class.
+ */
+export default class ListView extends View {
+    /**
+     * @inheritDoc
+     */
+    constructor(locale) {
+        super(locale);
+        const bind = this.bindTemplate;
+        this.items = this.createCollection();
+        this.focusTracker = new FocusTracker();
+        this.keystrokes = new KeystrokeHandler();
+        this._focusCycler = new FocusCycler({
+            focusables: this.items,
+            focusTracker: this.focusTracker,
+            keystrokeHandler: this.keystrokes,
+            actions: {
+                // Navigate list items backwards using the arrowup key.
+                focusPrevious: 'arrowup',
+                // Navigate toolbar items forwards using the arrowdown key.
+                focusNext: 'arrowdown'
+            }
+        });
+        this.set('ariaLabel', undefined);
+        this.set('role', undefined);
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: [
+                    //ck ck-list-styles-list
+                    'ck',
+                    //ck ck-reset ck-dropdown__panel ck-dropdown__panel_se
+                    'ck-list-styles-list',
+                    'ck-numlist-panel'
+                ],
+                role: bind.to('role'),
+                'aria-label': bind.to('ariaLabel')
+            },
+            children: this.items
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        // Items added before rendering should be known to the #focusTracker.
+        for (const item of this.items) {
+            this.focusTracker.add(item.element);
+        }
+        this.items.on('add', (evt, item) => {
+            this.focusTracker.add(item.element);
+        });
+        this.items.on('remove', (evt, item) => {
+            this.focusTracker.remove(item.element);
+        });
+        // Start listening for the keystrokes coming from #element.
+        this.keystrokes.listenTo(this.element);
+    }
+    /**
+     * @inheritDoc
+     */
+    destroy() {
+        super.destroy();
+        this.focusTracker.destroy();
+        this.keystrokes.destroy();
+    }
+    /**
+     * Focuses the first focusable in {@link #items}.
+     */
+    focus() {
+        this._focusCycler.focusFirst();
+    }
+    /**
+     * Focuses the last focusable in {@link #items}.
+     */
+    focusLast() {
+        this._focusCycler.focusLast();
+    }
+}

package/src/css/custom.css

@@ -1,3 +1,90 @@
 .select2-container--open {
     background-color: white !important;
+}
+
+ul.select2-results__options {
+  padding: 10px !important;
+  background: #fff !important;
+}
+
+:root {
+  --depth: -1;
+}
+
+.num-list {
+  --_depth: calc(var(--depth, -1) + 1);
+  --depth: var(--_depth);   
+  counter-reset: numitem 0;
+  margin: 0;
+  padding: 0;
+}
+
+.num-list[start="2"] {counter-reset: numitem 1;}
+.num-list[start="3"] {counter-reset: numitem 2;}
+.num-list[start="4"] {counter-reset: numitem 3;}
+.num-list[start="5"] {counter-reset: numitem 4;}
+.num-list[start="6"] {counter-reset: numitem 5;}
+.num-list[start="7"] {counter-reset: numitem 6;}
+.num-list[start="8"] {counter-reset: numitem 7;}
+.num-list[start="9"] {counter-reset: numitem 8;}
+.num-list[start="10"] {counter-reset: numitem 9;}
+.num-list[start="11"] {counter-reset: numitem 10;}
+.num-list[start="12"] {counter-reset: numitem 11;}
+.num-list[start="13"] {counter-reset: numitem 12;}
+.num-list[start="14"] {counter-reset: numitem 13;}
+.num-list[start="15"] {counter-reset: numitem 14;}
+.num-list[start="16"] {counter-reset: numitem 15;}
+.num-list[start="17"] {counter-reset: numitem 16;}
+.num-list[start="18"] {counter-reset: numitem 17;}
+.num-list[start="19"] {counter-reset: numitem 18;}
+.num-list[start="20"] {counter-reset: numitem 19;}
+
+.num-list > .num-li {
+  --depth: var(--depth);
+  padding-inline-start: calc((var(--depth) + 1) * var(--indent));
+  counter-increment: numitem;
+  position: relative;
+}
+
+.num-list:not([data-style]) > .num-li::before,
+.num-list[data-style="decimal"] > .num-li::before {
+  content: counters(numitem, ".") ". ";
+}
+
+.num-list[data-style="lower-alpha"] > .num-li::before {
+  content: counter(numitem, lower-alpha) ") ";
+}
+
+.num-list[data-style="upper-alpha"] > .num-li::before {
+  content: counter(numitem, upper-alpha) ") ";
+}
+
+.num-list[data-style="lower-roman"] > .num-li::before {
+  content: counter(numitem, lower-roman) ". ";
+}
+
+.num-list[data-style="upper-roman"] > .num-li::before {
+  content: counter(numitem, upper-roman) ". ";
+}
+
+.num-list > .num-li::before {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.num-list > .num-li :first-child {text-indent: 20px;}
+.num-list .num-list > .num-li :first-child {text-indent: 35px;}
+.num-list .num-list .num-list > .num-li :first-child {text-indent: 50px;}
+.num-list .num-list .num-list .num-list > .num-li :first-child {text-indent: 65px;}
+.num-list .num-list .num-list .num-list .num-list > .num-li :first-child {text-indent: 80px;}
+
+.num-list[data-style="lower-alpha"] > .num-li :first-child,
+.num-list[data-style="upper-alpha"] > .num-li :first-child,
+.num-list[data-style="lower-roman"] > .num-li :first-child,
+.num-list[data-style="upper-roman"] > .num-li :first-child {text-indent: 20px !important; }
+
+.num-list,
+.num-list > .num-li {
+  text-indent: 0px !important;
 }