@ckeditor/ckeditor5-editor-decoupled 37.0.0-alpha.0 → 37.0.0-alpha.2

package/build/editor-decoupled.js

@@ -1,4 +1,4 @@
 /*!
  * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md.
- */(()=>{var t={704:(t,e,o)=>{t.exports=o(79)("./src/core.js")},492:(t,e,o)=>{t.exports=o(79)("./src/engine.js")},273:(t,e,o)=>{t.exports=o(79)("./src/ui.js")},209:(t,e,o)=>{t.exports=o(79)("./src/utils.js")},79: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:()=>_});var t=o(704),e=o(209),i=o(273),n=o(492);class s extends i.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.sourceElement,i=t.config.get("placeholder")||r&&"textarea"===r.tagName.toLowerCase()&&r.getAttribute("placeholder");i&&(0,n.enablePlaceholder)({view:e,element:o,text:i,isDirectHost:!1,keepOnFocus:!0})}}class l extends i.EditorUIView{constructor(t,e,o={}){super(t);const r=t.t;this.toolbar=new i.ToolbarView(t,{shouldGroupWhenFull:o.shouldToolbarGroupWhenFull}),this.editable=new i.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 c="object"==typeof global&&global&&global.Object===Object&&global;var d="object"==typeof self&&self&&self.Object===Object&&self;const u=(c||d||Function("return this")()).Symbol;var h=Object.prototype,b=h.hasOwnProperty,p=h.toString,g=u?u.toStringTag:void 0;const f=function(t){var e=b.call(t,g),o=t[g];try{t[g]=void 0;var r=!0}catch(t){}var i=p.call(t);return r&&(e?t[g]=o:delete t[g]),i};var m=Object.prototype.toString;const v=function(t){return m.call(t)};var y="[object Null]",w="[object Undefined]",E=u?u.toStringTag:void 0;const j=function(t){return null==t?void 0===t?w:y:E&&E in Object(t)?f(t):v(t)};const O=function(t,e){return function(o){return t(e(o))}}(Object.getPrototypeOf,Object);var x="[object Object]",T=Function.prototype,D=Object.prototype,S=T.toString,P=D.hasOwnProperty,F=S.call(Object);const C=function(t){if(!a(t)||j(t)!=x)return!1;var e=O(t);if(null===e)return!0;var o=P.call(e,"constructor")&&e.constructor;return"function"==typeof o&&o instanceof o&&S.call(o)==F};const R=function(t){return a(t)&&1===t.nodeType&&!C(t)};class _ extends((0,t.DataApiMixin)((0,t.ElementApiMixin)(t.Editor))){constructor(o,r={}){if(!A(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 A(t)?(0,e.getDataFromElement)(t):t}(o)),A(o)&&(this.sourceElement=o,(0,t.secureSourceElement)(this)),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 s(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(A(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)))}))}}function A(t){return R(t)}})(),(window.CKEditor5=window.CKEditor5||{}).editorDecoupled=r})();
+ */(()=>{var t={704:(t,e,o)=>{t.exports=o(79)("./src/core.js")},492:(t,e,o)=>{t.exports=o(79)("./src/engine.js")},273:(t,e,o)=>{t.exports=o(79)("./src/ui.js")},209:(t,e,o)=>{t.exports=o(79)("./src/utils.js")},79: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:()=>_});var t=o(704),e=o(209),i=o(273),n=o(492);class s extends i.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.sourceElement,t.config.get("placeholder"));if(r){const t="string"==typeof r?r:r[o.rootName];t&&(0,n.enablePlaceholder)({view:e,element:o,text:t,isDirectHost:!1,keepOnFocus:!0})}}}class l extends i.EditorUIView{constructor(t,e,o={}){super(t);const r=t.t;this.toolbar=new i.ToolbarView(t,{shouldGroupWhenFull:o.shouldToolbarGroupWhenFull}),this.editable=new i.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 c=function(t){return null!=t&&"object"==typeof t};const a="object"==typeof global&&global&&global.Object===Object&&global;var d="object"==typeof self&&self&&self.Object===Object&&self;const u=(a||d||Function("return this")()).Symbol;var h=Object.prototype,b=h.hasOwnProperty,p=h.toString,f=u?u.toStringTag:void 0;const g=function(t){var e=b.call(t,f),o=t[f];try{t[f]=void 0;var r=!0}catch(t){}var i=p.call(t);return r&&(e?t[f]=o:delete t[f]),i};var m=Object.prototype.toString;const v=function(t){return m.call(t)};var y="[object Null]",w="[object Undefined]",E=u?u.toStringTag:void 0;const j=function(t){return null==t?void 0===t?w:y:E&&E in Object(t)?g(t):v(t)};const O=function(t,e){return function(o){return t(e(o))}}(Object.getPrototypeOf,Object);var x="[object Object]",T=Function.prototype,D=Object.prototype,S=T.toString,P=D.hasOwnProperty,F=S.call(Object);const C=function(t){if(!c(t)||j(t)!=x)return!1;var e=O(t);if(null===e)return!0;var o=P.call(e,"constructor")&&e.constructor;return"function"==typeof o&&o instanceof o&&S.call(o)==F};const R=function(t){return c(t)&&1===t.nodeType&&!C(t)};class _ extends((0,t.DataApiMixin)((0,t.ElementApiMixin)(t.Editor))){constructor(o,r={}){if(!K(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 K(t)?(0,e.getDataFromElement)(t):t}(o)),K(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 s(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(K(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)))}))}}function K(t){return R(t)}})(),(window.CKEditor5=window.CKEditor5||{}).editorDecoupled=r})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-editor-decoupled",
-  "version": "37.0.0-alpha.0",
+  "version": "37.0.0-alpha.2",
   "description": "Decoupled editor implementation for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -11,23 +11,23 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "ckeditor5": "^37.0.0-alpha.0",
+    "ckeditor5": "^37.0.0-alpha.2",
     "lodash-es": "^4.17.15"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^37.0.0-alpha.0",
-    "@ckeditor/ckeditor5-core": "^37.0.0-alpha.0",
-    "@ckeditor/ckeditor5-dev-utils": "^34.0.0",
-    "@ckeditor/ckeditor5-engine": "^37.0.0-alpha.0",
-    "@ckeditor/ckeditor5-enter": "^37.0.0-alpha.0",
-    "@ckeditor/ckeditor5-heading": "^37.0.0-alpha.0",
-    "@ckeditor/ckeditor5-image": "^37.0.0-alpha.0",
-    "@ckeditor/ckeditor5-paragraph": "^37.0.0-alpha.0",
-    "@ckeditor/ckeditor5-theme-lark": "^37.0.0-alpha.0",
-    "@ckeditor/ckeditor5-typing": "^37.0.0-alpha.0",
-    "@ckeditor/ckeditor5-ui": "^37.0.0-alpha.0",
-    "@ckeditor/ckeditor5-undo": "^37.0.0-alpha.0",
-    "@ckeditor/ckeditor5-utils": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-basic-styles": "^37.0.0-alpha.2",
+    "@ckeditor/ckeditor5-core": "^37.0.0-alpha.2",
+    "@ckeditor/ckeditor5-dev-utils": "^35.0.0",
+    "@ckeditor/ckeditor5-engine": "^37.0.0-alpha.2",
+    "@ckeditor/ckeditor5-enter": "^37.0.0-alpha.2",
+    "@ckeditor/ckeditor5-heading": "^37.0.0-alpha.2",
+    "@ckeditor/ckeditor5-image": "^37.0.0-alpha.2",
+    "@ckeditor/ckeditor5-paragraph": "^37.0.0-alpha.2",
+    "@ckeditor/ckeditor5-theme-lark": "^37.0.0-alpha.2",
+    "@ckeditor/ckeditor5-typing": "^37.0.0-alpha.2",
+    "@ckeditor/ckeditor5-ui": "^37.0.0-alpha.2",
+    "@ckeditor/ckeditor5-undo": "^37.0.0-alpha.2",
+    "@ckeditor/ckeditor5-utils": "^37.0.0-alpha.2",
     "typescript": "^4.8.4",
     "webpack": "^5.58.1",
     "webpack-cli": "^4.9.0"
@@ -56,7 +56,7 @@
   ],
   "scripts": {
     "dll:build": "webpack",
-    "build": "tsc -p ./tsconfig.release.json",
+    "build": "tsc -p ./tsconfig.json",
     "postversion": "npm run build"
   },
   "types": "src/index.d.ts"

package/src/decouplededitor.d.ts

@@ -22,6 +22,8 @@ declare const DecoupledEditor_base: import("ckeditor5/src/utils").Mixed<import("
  * 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.
+ *
  * # Decoupled editor and document editor build
  *
  * The decoupled editor can be used directly from source (if you installed the
@@ -82,8 +84,8 @@ export default class DecoupledEditor extends DecoupledEditor_base {
     /**
      * Creates a new decoupled editor instance.
      *
-     * Remember that `DecoupledEditor` does not append the toolbar element to your web page so you have to do it manually after the editor
-     * has been initialized.
+     * **Note:** remember that `DecoupledEditor` does not append the toolbar element to your web page, so you have to do it manually
+     * after the editor has been initialized.
      *
      * There are two ways how the editor can be initialized.
      *

package/src/decouplededitor.js

@@ -24,6 +24,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.
+ *
  * # Decoupled editor and document editor build
  *
  * The decoupled editor can be used directly from source (if you installed the
@@ -65,7 +67,7 @@ export default class DecoupledEditor extends DataApiMixin(ElementApiMixin(Editor
         }
         if (isElement(sourceElementOrData)) {
             this.sourceElement = sourceElementOrData;
-            secureSourceElement(this);
+            secureSourceElement(this, sourceElementOrData);
         }
         this.model.document.createRoot();
         const shouldToolbarGroupWhenFull = !this.config.get('toolbar.shouldNotGroupWhenFull');
@@ -113,8 +115,8 @@ export default class DecoupledEditor extends DataApiMixin(ElementApiMixin(Editor
     /**
      * Creates a new decoupled editor instance.
      *
-     * Remember that `DecoupledEditor` does not append the toolbar element to your web page so you have to do it manually after the editor
-     * has been initialized.
+     * **Note:** remember that `DecoupledEditor` does not append the toolbar element to your web page, so you have to do it manually
+     * after the editor has been initialized.
      *
      * There are two ways how the editor can be initialized.
      *

package/src/decouplededitorui.js

@@ -81,16 +81,18 @@ export default class DecoupledEditorUI extends EditorUI {
         const editingView = editor.editing.view;
         const editingRoot = editingView.document.getRoot();
         const sourceElement = editor.sourceElement;
-        const placeholderText = editor.config.get('placeholder') ||
-            sourceElement && sourceElement.tagName.toLowerCase() === 'textarea' && sourceElement.getAttribute('placeholder');
-        if (placeholderText) {
-            enablePlaceholder({
-                view: editingView,
-                element: editingRoot,
-                text: placeholderText,
-                isDirectHost: false,
-                keepOnFocus: true
-            });
+        const placeholder = editor.config.get('placeholder');
+        if (placeholder) {
+            const placeholderText = typeof placeholder === 'string' ? placeholder : placeholder[editingRoot.rootName];
+            if (placeholderText) {
+                enablePlaceholder({
+                    view: editingView,
+                    element: editingRoot,
+                    text: placeholderText,
+                    isDirectHost: false,
+                    keepOnFocus: true
+                });
+            }
         }
     }
 }