@ckeditor/ckeditor5-editor-decoupled 0.0.0-nightly-20240402.0 → 0.0.0-nightly-20240403.1

package/build/editor-decoupled.js

@@ -1,4 +1,4 @@
 /*!
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md.
- */(()=>{var t={782:(t,e,o)=>{t.exports=o(237)("./src/core.js")},783:(t,e,o)=>{t.exports=o(237)("./src/engine.js")},311:(t,e,o)=>{t.exports=o(237)("./src/ui.js")},584:(t,e,o)=>{t.exports=o(237)("./src/utils.js")},602:(t,e,o)=>{t.exports=o(237)("./src/watchdog.js")},237:t=>{"use strict";t.exports=CKEditor5.dll}},e={};function o(r){var i=e[r];if(void 0!==i)return i.exports;var n=e[r]={exports:{}};return t[r](n,n.exports,o),n.exports}o.d=(t,e)=>{for(var r in e)o.o(e,r)&&!o.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:e[r]})},o.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),o.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var r={};(()=>{"use strict";o.r(r),o.d(r,{DecoupledEditor:()=>W});var t=o(782),e=o(584),i=o(602),n=o(311),s=o(783);class c extends n.EditorUI{constructor(t,e){super(t),this.view=e}init(){const t=this.editor,e=this.view,o=t.editing.view,r=e.editable,i=o.document.getRoot();r.name=i.rootName,e.render();const n=r.element;this.setEditableElement(r.name,n),e.editable.bind("isFocused").to(this.focusTracker),o.attachDomRoot(n),this._initPlaceholder(),this._initToolbar(),this.fire("ready")}destroy(){super.destroy();const t=this.view;this.editor.editing.view.detachDomRoot(t.editable.name),t.destroy()}_initToolbar(){const t=this.editor,e=this.view;e.toolbar.fillFromConfig(t.config.get("toolbar"),this.componentFactory),this.addToolbar(e.toolbar)}_initPlaceholder(){const t=this.editor,e=t.editing.view,o=e.document.getRoot(),r=t.config.get("placeholder");if(r){const t="string"==typeof r?r:r[o.rootName];t&&(o.placeholder=t)}(0,s.enablePlaceholder)({view:e,element:o,isDirectHost:!1,keepOnFocus:!0})}}class l extends n.EditorUIView{constructor(t,e,o={}){super(t);const r=t.t;this.toolbar=new n.ToolbarView(t,{shouldGroupWhenFull:o.shouldToolbarGroupWhenFull}),this.editable=new n.InlineEditableUIView(t,e,o.editableElement,{label:t=>r("Rich Text Editor. Editing area: %0",t.name)}),this.toolbar.extendTemplate({attributes:{class:["ck-reset_all","ck-rounded-corners"],dir:t.uiLanguageDirection}})}render(){super.render(),this.registerChild([this.toolbar,this.editable])}}const a=function(t){return null!=t&&"object"==typeof t};const d="object"==typeof global&&global&&global.Object===Object&&global;var u="object"==typeof self&&self&&self.Object===Object&&self;const h=(d||u||Function("return this")()).Symbol;var b=Object.prototype,p=b.hasOwnProperty,g=b.toString,f=h?h.toStringTag:void 0;const m=function(t){var e=p.call(t,f),o=t[f];try{t[f]=void 0;var r=!0}catch(t){}var i=g.call(t);return r&&(e?t[f]=o:delete t[f]),i};var v=Object.prototype.toString;const y=function(t){return v.call(t)};var w=h?h.toStringTag:void 0;const E=function(t){return null==t?void 0===t?"[object Undefined]":"[object Null]":w&&w in Object(t)?m(t):y(t)};const j=function(t,e){return function(o){return t(e(o))}}(Object.getPrototypeOf,Object);var O=Function.prototype,x=Object.prototype,T=O.toString,S=x.hasOwnProperty,D=T.call(Object);const P=function(t){if(!a(t)||"[object Object]"!=E(t))return!1;var e=j(t);if(null===e)return!0;var o=S.call(e,"constructor")&&e.constructor;return"function"==typeof o&&o instanceof o&&T.call(o)==D};const C=function(t){return a(t)&&1===t.nodeType&&!P(t)};class F extends((0,t.ElementApiMixin)(t.Editor)){constructor(o,r={}){if(!R(o)&&void 0!==r.initialData)throw new e.CKEditorError("editor-create-initial-data",null);super(r),void 0===this.config.get("initialData")&&this.config.set("initialData",function(t){return R(t)?(0,e.getDataFromElement)(t):t}(o)),R(o)&&(this.sourceElement=o,(0,t.secureSourceElement)(this,o)),this.model.document.createRoot();const i=!this.config.get("toolbar.shouldNotGroupWhenFull"),n=new l(this.locale,this.editing.view,{editableElement:this.sourceElement,shouldToolbarGroupWhenFull:i});this.ui=new c(this,n)}destroy(){const t=this.getData();return this.ui.destroy(),super.destroy().then((()=>{this.sourceElement&&this.updateSourceElement(t)}))}static create(t,o={}){return new Promise((r=>{if(R(t)&&"TEXTAREA"===t.tagName)throw new e.CKEditorError("editor-wrong-element",null);const i=new this(t,o);r(i.initPlugins().then((()=>i.ui.init())).then((()=>i.data.init(i.config.get("initialData")))).then((()=>i.fire("ready"))).then((()=>i)))}))}}F.Context=t.Context,F.EditorWatchdog=i.EditorWatchdog,F.ContextWatchdog=i.ContextWatchdog;const W=F;function R(t){return C(t)}})(),(window.CKEditor5=window.CKEditor5||{}).editorDecoupled=r})();
+ */(()=>{var t={782:(t,e,o)=>{t.exports=o(237)("./src/core.js")},783:(t,e,o)=>{t.exports=o(237)("./src/engine.js")},311:(t,e,o)=>{t.exports=o(237)("./src/ui.js")},584:(t,e,o)=>{t.exports=o(237)("./src/utils.js")},602:(t,e,o)=>{t.exports=o(237)("./src/watchdog.js")},237:t=>{"use strict";t.exports=CKEditor5.dll}},e={};function o(i){var r=e[i];if(void 0!==r)return r.exports;var n=e[i]={exports:{}};return t[i](n,n.exports,o),n.exports}o.d=(t,e)=>{for(var i in e)o.o(e,i)&&!o.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},o.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),o.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var i={};(()=>{"use strict";o.r(i),o.d(i,{DecoupledEditor:()=>P});var t=o(782),e=o(584),r=o(602),n=o(311),s=o(783);class c extends n.EditorUI{constructor(t,e){super(t),this.view=e}init(){const t=this.editor,e=this.view,o=t.editing.view,i=e.editable,r=o.document.getRoot();i.name=r.rootName,e.render();const n=i.element;this.setEditableElement(i.name,n),e.editable.bind("isFocused").to(this.focusTracker),o.attachDomRoot(n),this._initPlaceholder(),this._initToolbar(),this._initMenuBar(),this.fire("ready")}destroy(){super.destroy();const t=this.view;this.editor.editing.view.detachDomRoot(t.editable.name),t.destroy()}_initToolbar(){const t=this.editor,e=this.view;e.toolbar.fillFromConfig(t.config.get("toolbar"),this.componentFactory),this.addToolbar(e.toolbar)}_initMenuBar(){const t=this.editor,e=this.view.menuBarView.element,o=this.view;this.focusTracker.add(e),t.keystrokes.listenTo(e);const i=(0,n.normalizeMenuBarConfig)(t.config.get("menuBar")||{});o.menuBarView.fillFromConfig(i,this.componentFactory),t.keystrokes.set("Esc",((o,i)=>{e.contains(this.focusTracker.focusedElement)&&(t.editing.view.focus(),i())})),t.keystrokes.set("Alt+F9",((t,o)=>{e.contains(this.focusTracker.focusedElement)||(this.view.menuBarView.focus(),o())}))}_initPlaceholder(){const t=this.editor,e=t.editing.view,o=e.document.getRoot(),i=t.config.get("placeholder");if(i){const t="string"==typeof i?i:i[o.rootName];t&&(o.placeholder=t)}(0,s.enablePlaceholder)({view:e,element:o,isDirectHost:!1,keepOnFocus:!0})}}class a extends n.EditorUIView{constructor(t,e,o={}){super(t);const i=t.t;this.toolbar=new n.ToolbarView(t,{shouldGroupWhenFull:o.shouldToolbarGroupWhenFull}),this.menuBarView=new n.MenuBarView(t),this.editable=new n.InlineEditableUIView(t,e,o.editableElement,{label:t=>i("Rich Text Editor. Editing area: %0",t.name)}),this.toolbar.extendTemplate({attributes:{class:["ck-reset_all","ck-rounded-corners"],dir:t.uiLanguageDirection}}),this.menuBarView.extendTemplate({attributes:{class:["ck-reset_all","ck-rounded-corners"],dir:t.uiLanguageDirection}})}render(){super.render(),this.registerChild([this.menuBarView,this.toolbar,this.editable])}}const l=function(t){return null!=t&&"object"==typeof t};const u="object"==typeof global&&global&&global.Object===Object&&global;var d="object"==typeof self&&self&&self.Object===Object&&self;const h=(u||d||Function("return this")()).Symbol;var b=Object.prototype,f=b.hasOwnProperty,g=b.toString,p=h?h.toStringTag:void 0;const m=function(t){var e=f.call(t,p),o=t[p];try{t[p]=void 0;var i=!0}catch(t){}var r=g.call(t);return i&&(e?t[p]=o:delete t[p]),r};var w=Object.prototype.toString;const v=function(t){return w.call(t)};var y=h?h.toStringTag:void 0;const E=function(t){return null==t?void 0===t?"[object Undefined]":"[object Null]":y&&y in Object(t)?m(t):v(t)};const j=function(t,e){return function(o){return t(e(o))}}(Object.getPrototypeOf,Object);var x=Function.prototype,O=Object.prototype,T=x.toString,k=O.hasOwnProperty,F=T.call(Object);const C=function(t){if(!l(t)||"[object Object]"!=E(t))return!1;var e=j(t);if(null===e)return!0;var o=k.call(e,"constructor")&&e.constructor;return"function"==typeof o&&o instanceof o&&T.call(o)==F};const D=function(t){return l(t)&&1===t.nodeType&&!C(t)};class S extends((0,t.ElementApiMixin)(t.Editor)){constructor(o,i={}){if(!B(o)&&void 0!==i.initialData)throw new e.CKEditorError("editor-create-initial-data",null);super(i),void 0===this.config.get("initialData")&&this.config.set("initialData",function(t){return B(t)?(0,e.getDataFromElement)(t):t}(o)),B(o)&&(this.sourceElement=o,(0,t.secureSourceElement)(this,o)),this.model.document.createRoot();const r=!this.config.get("toolbar.shouldNotGroupWhenFull"),n=new a(this.locale,this.editing.view,{editableElement:this.sourceElement,shouldToolbarGroupWhenFull:r});this.ui=new c(this,n)}destroy(){const t=this.getData();return this.ui.destroy(),super.destroy().then((()=>{this.sourceElement&&this.updateSourceElement(t)}))}static create(t,o={}){return new Promise((i=>{if(B(t)&&"TEXTAREA"===t.tagName)throw new e.CKEditorError("editor-wrong-element",null);const r=new this(t,o);i(r.initPlugins().then((()=>r.ui.init())).then((()=>r.data.init(r.config.get("initialData")))).then((()=>r.fire("ready"))).then((()=>r)))}))}}S.Context=t.Context,S.EditorWatchdog=r.EditorWatchdog,S.ContextWatchdog=r.ContextWatchdog;const P=S;function B(t){return D(t)}})(),(window.CKEditor5=window.CKEditor5||{}).editorDecoupled=i})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-editor-decoupled",
-  "version": "0.0.0-nightly-20240402.0",
+  "version": "0.0.0-nightly-20240403.1",
   "description": "Decoupled editor implementation for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -12,7 +12,7 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "ckeditor5": "0.0.0-nightly-20240402.0",
+    "ckeditor5": "0.0.0-nightly-20240403.1",
     "lodash-es": "4.17.21"
   },
   "author": "CKSource (http://cksource.com/)",

package/src/decouplededitor.d.ts

@@ -23,7 +23,8 @@ declare const DecoupledEditor_base: import("ckeditor5/src/utils.js").Mixed<typeo
  * In order to create a decoupled editor instance, use the static
  * {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create `DecoupledEditor.create()`} method.
  *
- * Note that you will need to attach the editor toolbar to your web page manually, in a desired place, after the editor is initialized.
+ * Note that you will need to attach the editor toolbar and menu bar to your web page manually, in a desired place,
+ * after the editor is initialized.
  *
  * # Decoupled editor and document editor build
  *

package/src/decouplededitor.js

@@ -25,7 +25,8 @@ import { isElement as _isElement } from 'lodash-es';
  * In order to create a decoupled editor instance, use the static
  * {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create `DecoupledEditor.create()`} method.
  *
- * Note that you will need to attach the editor toolbar to your web page manually, in a desired place, after the editor is initialized.
+ * Note that you will need to attach the editor toolbar and menu bar to your web page manually, in a desired place,
+ * after the editor is initialized.
  *
  * # Decoupled editor and document editor build
  *

package/src/decouplededitorui.d.ts

@@ -35,6 +35,10 @@ export default class DecoupledEditorUI extends EditorUI {
      * Initializes the inline editor toolbar and its panel.
      */
     private _initToolbar;
+    /**
+     * Initializes the editor menu bar.
+     */
+    private _initMenuBar;
     /**
      * Enable the placeholder text on the editing root.
      */

package/src/decouplededitorui.js

@@ -2,7 +2,7 @@
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-import { EditorUI } from 'ckeditor5/src/ui.js';
+import { EditorUI, normalizeMenuBarConfig } from 'ckeditor5/src/ui.js';
 import { enablePlaceholder } from 'ckeditor5/src/engine.js';
 /**
  * The decoupled editor UI class.
@@ -50,6 +50,7 @@ export default class DecoupledEditorUI extends EditorUI {
         editingView.attachDomRoot(editableElement);
         this._initPlaceholder();
         this._initToolbar();
+        this._initMenuBar();
         this.fire('ready');
     }
     /**
@@ -73,6 +74,30 @@ export default class DecoupledEditorUI extends EditorUI {
         // Register the toolbar so it becomes available for Alt+F10 and Esc navigation.
         this.addToolbar(view.toolbar);
     }
+    /**
+     * Initializes the editor menu bar.
+     */
+    _initMenuBar() {
+        const editor = this.editor;
+        const menuBarViewElement = this.view.menuBarView.element;
+        const view = this.view;
+        this.focusTracker.add(menuBarViewElement);
+        editor.keystrokes.listenTo(menuBarViewElement);
+        const normalizedMenuBarConfig = normalizeMenuBarConfig(editor.config.get('menuBar') || {});
+        view.menuBarView.fillFromConfig(normalizedMenuBarConfig, this.componentFactory);
+        editor.keystrokes.set('Esc', (data, cancel) => {
+            if (menuBarViewElement.contains(this.focusTracker.focusedElement)) {
+                editor.editing.view.focus();
+                cancel();
+            }
+        });
+        editor.keystrokes.set('Alt+F9', (data, cancel) => {
+            if (!menuBarViewElement.contains(this.focusTracker.focusedElement)) {
+                this.view.menuBarView.focus();
+                cancel();
+            }
+        });
+    }
     /**
      * Enable the placeholder text on the editing root.
      */

package/src/decouplededitoruiview.d.ts

@@ -5,13 +5,14 @@
 /**
  * @module editor-decoupled/decouplededitoruiview
  */
-import { EditorUIView, InlineEditableUIView, ToolbarView } from 'ckeditor5/src/ui.js';
+import { EditorUIView, InlineEditableUIView, MenuBarView, ToolbarView } from 'ckeditor5/src/ui.js';
 import type { Locale } from 'ckeditor5/src/utils.js';
 import type { EditingView } from 'ckeditor5/src/engine.js';
 /**
  * The decoupled editor UI view. It is a virtual view providing an inline
- * {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#editable} and a
- * {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#toolbar}, but without any
+ * {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#editable},
+ * {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#toolbar}, and a
+ * {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#menuBarView} but without any
  * specific arrangement of the components in the DOM.
  *
  * See {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create `DecoupledEditor.create()`}
@@ -22,6 +23,10 @@ export default class DecoupledEditorUIView extends EditorUIView {
      * The main toolbar of the decoupled editor UI.
      */
     readonly toolbar: ToolbarView;
+    /**
+     * Menu bar view instance.
+     */
+    readonly menuBarView: MenuBarView;
     /**
      * The editable of the decoupled editor UI.
      */

package/src/decouplededitoruiview.js

@@ -5,11 +5,12 @@
 /**
  * @module editor-decoupled/decouplededitoruiview
  */
-import { EditorUIView, InlineEditableUIView, ToolbarView } from 'ckeditor5/src/ui.js';
+import { EditorUIView, InlineEditableUIView, MenuBarView, ToolbarView } from 'ckeditor5/src/ui.js';
 /**
  * The decoupled editor UI view. It is a virtual view providing an inline
- * {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#editable} and a
- * {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#toolbar}, but without any
+ * {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#editable},
+ * {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#toolbar}, and a
+ * {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#menuBarView} but without any
  * specific arrangement of the components in the DOM.
  *
  * See {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create `DecoupledEditor.create()`}
@@ -34,6 +35,7 @@ export default class DecoupledEditorUIView extends EditorUIView {
         this.toolbar = new ToolbarView(locale, {
             shouldGroupWhenFull: options.shouldToolbarGroupWhenFull
         });
+        this.menuBarView = new MenuBarView(locale);
         this.editable = new InlineEditableUIView(locale, editingView, options.editableElement, {
             label: editableView => {
                 return t('Rich Text Editor. Editing area: %0', editableView.name);
@@ -52,12 +54,21 @@ export default class DecoupledEditorUIView extends EditorUIView {
                 dir: locale.uiLanguageDirection
             }
         });
+        this.menuBarView.extendTemplate({
+            attributes: {
+                class: [
+                    'ck-reset_all',
+                    'ck-rounded-corners'
+                ],
+                dir: locale.uiLanguageDirection
+            }
+        });
     }
     /**
      * @inheritDoc
      */
     render() {
         super.render();
-        this.registerChild([this.toolbar, this.editable]);
+        this.registerChild([this.menuBarView, this.toolbar, this.editable]);
     }
 }