@ckeditor/ckeditor5-editor-inline 32.0.0 → 34.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE.md +2 -2
- package/README.md +3 -2
- package/build/editor-inline.js +2 -2
- package/package.json +14 -14
- package/src/inlineeditor.js +22 -24
package/LICENSE.md
CHANGED
|
@@ -2,7 +2,7 @@ Software License Agreement
|
|
|
2
2
|
==========================
|
|
3
3
|
|
|
4
4
|
**Inline editor implementation** – https://github.com/ckeditor/ckeditor5-editor-inline <br>
|
|
5
|
-
Copyright (c) 2003-2022, [CKSource
|
|
5
|
+
Copyright (c) 2003-2022, [CKSource Holding sp. z o.o.](https://cksource.com) All rights reserved.
|
|
6
6
|
|
|
7
7
|
Licensed under the terms of [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.html).
|
|
8
8
|
|
|
@@ -14,4 +14,4 @@ Where not otherwise indicated, all CKEditor content is authored by CKSource engi
|
|
|
14
14
|
Trademarks
|
|
15
15
|
----------
|
|
16
16
|
|
|
17
|
-
**CKEditor** is a trademark of [CKSource
|
|
17
|
+
**CKEditor** is a trademark of [CKSource Holding sp. z o.o.](https://cksource.com) All other brand and product names are trademarks, registered trademarks or service marks of their respective holders.
|
package/README.md
CHANGED
|
@@ -3,13 +3,14 @@ CKEditor 5 inline editor implementation
|
|
|
3
3
|
|
|
4
4
|
[](https://www.npmjs.com/package/@ckeditor/ckeditor5-editor-inline)
|
|
5
5
|
[](https://coveralls.io/github/ckeditor/ckeditor5?branch=master)
|
|
6
|
-
[](https://travis-ci.com/ckeditor/ckeditor5)
|
|
6
|
+
[](https://app.travis-ci.com/github/ckeditor/ckeditor5)
|
|
7
|
+
|
|
7
8
|
|
|
8
9
|
The inline editor implementation for CKEditor 5.
|
|
9
10
|
|
|
10
11
|
This package exposes the [`InlineEditor`](https://ckeditor.com/docs/ckeditor5/latest/api/module_editor-inline_inlineeditor-InlineEditor.html) class. Follow there to learn more about this type of editor and how to initialize it.
|
|
11
12
|
|
|
12
|
-
This package contains the source version of the inline editor. This editor implementation is also available in the [inline build](https://www.npmjs.com/package/@ckeditor/ckeditor5-build-inline). Read more about [CKEditor 5 builds](https://ckeditor.com/docs/ckeditor5/latest/
|
|
13
|
+
This package contains the source version of the inline editor. This editor implementation is also available in the [inline build](https://www.npmjs.com/package/@ckeditor/ckeditor5-build-inline). Read more about [CKEditor 5 builds](https://ckeditor.com/docs/ckeditor5/latest/installation/index.html).
|
|
13
14
|
|
|
14
15
|
## Documentation
|
|
15
16
|
|
package/build/editor-inline.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* @license Copyright (c) 2003-2022, CKSource
|
|
2
|
+
* @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
3
|
* For licensing, see LICENSE.md.
|
|
4
|
-
*/(()=>{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(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,{InlineEditor:()=>
|
|
4
|
+
*/(()=>{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(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,{InlineEditor:()=>S});var t=o(704),e=o(209);const r=function(t){return null!=t&&"object"==typeof t};const n="object"==typeof global&&global&&global.Object===Object&&global;var s="object"==typeof self&&self&&self.Object===Object&&self;const l=(n||s||Function("return this")()).Symbol;var a=Object.prototype,c=a.hasOwnProperty,d=a.toString,h=l?l.toStringTag:void 0;const u=function(t){var e=c.call(t,h),o=t[h];try{t[h]=void 0;var i=!0}catch(t){}var r=d.call(t);return i&&(e?t[h]=o:delete t[h]),r};var p=Object.prototype.toString;const b=function(t){return p.call(t)};var f=l?l.toStringTag:void 0;const g=function(t){return null==t?void 0===t?"[object Undefined]":"[object Null]":f&&f in Object(t)?u(t):b(t)};const w=function(t,e){return function(o){return t(e(o))}}(Object.getPrototypeOf,Object);var v=Function.prototype,m=Object.prototype,y=v.toString,O=m.hasOwnProperty,T=y.call(Object);const j=function(t){if(!r(t)||"[object Object]"!=g(t))return!1;var e=w(t);if(null===e)return!0;var o=O.call(e,"constructor")&&e.constructor;return"function"==typeof o&&o instanceof o&&y.call(o)==T};const E=function(t){return r(t)&&1===t.nodeType&&!j(t)};var P=o(273),x=o(492);class _ extends t.EditorUI{constructor(t,e){super(t),this.view=e,this._toolbarConfig=(0,P.normalizeToolbarConfig)(t.config.get("toolbar"))}get element(){return this.view.editable.element}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),this.focusTracker.add(n),i.bind("isFocused").to(this.focusTracker),o.attachDomRoot(n),this._initPlaceholder(),this._initToolbar(),this.fire("ready")}destroy(){const t=this.view;this.editor.editing.view.detachDomRoot(t.editable.name),t.destroy(),super.destroy()}_initToolbar(){const t=this.editor,e=this.view,o=e.editable.element,i=t.editing.view,r=e.toolbar;e.panel.bind("isVisible").to(this.focusTracker,"isFocused"),e.bind("viewportTopOffset").to(this,"viewportOffset",(({top:t})=>t)),e.listenTo(t.ui,"update",(()=>{e.panel.isVisible&&e.panel.pin({target:o,positions:e.panelPositions})})),r.fillFromConfig(this._toolbarConfig,this.componentFactory),(0,P.enableToolbarKeyboardFocus)({origin:i,originFocusTracker:this.focusTracker,originKeystrokeHandler:t.keystrokes,toolbar:r})}_initPlaceholder(){const t=this.editor,e=t.editing.view,o=e.document.getRoot(),i=t.sourceElement,r=t.config.get("placeholder")||i&&"textarea"===i.tagName.toLowerCase()&&i.getAttribute("placeholder");r&&(0,x.enablePlaceholder)({view:e,element:o,text:r,isDirectHost:!1,keepOnFocus:!0})}}const F=(0,e.toUnit)("px");class D extends P.EditorUIView{constructor(t,e,o,i={}){super(t),this.toolbar=new P.ToolbarView(t,{shouldGroupWhenFull:i.shouldToolbarGroupWhenFull,isFloating:!0}),this.set("viewportTopOffset",0),this.panel=new P.BalloonPanelView(t),this.panelPositions=this._getPanelPositions(),this.panel.extendTemplate({attributes:{class:"ck-toolbar-container"}}),this.editable=new P.InlineEditableUIView(t,e,o),this._resizeObserver=null}render(){super.render(),this.body.add(this.panel),this.registerChild(this.editable),this.panel.content.add(this.toolbar);if(this.toolbar.options.shouldGroupWhenFull){const t=this.editable.element;this._resizeObserver=new e.ResizeObserver(t,(()=>{this.toolbar.maxWidth=F(new e.Rect(t).width)}))}}destroy(){super.destroy(),this._resizeObserver&&this._resizeObserver.destroy()}_getPanelPositionTop(t,e){let o;return o=t.top>e.height+this.viewportTopOffset?t.top-e.height:t.bottom>e.height+this.viewportTopOffset+50?this.viewportTopOffset:t.bottom,o}_getPanelPositions(){const t=[(t,e)=>({top:this._getPanelPositionTop(t,e),left:t.left,name:"toolbar_west",config:{withArrow:!1}}),(t,e)=>({top:this._getPanelPositionTop(t,e),left:t.left+t.width-e.width,name:"toolbar_east",config:{withArrow:!1}})];return"ltr"===this.locale.uiLanguageDirection?t:t.reverse()}}class S extends t.Editor{constructor(o,i={}){if(!E(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 E(t)?(0,e.getDataFromElement)(t):t}(o)),this.model.document.createRoot(),E(o)&&(this.sourceElement=o,(0,t.secureSourceElement)(this));const r=!this.config.get("toolbar.shouldNotGroupWhenFull"),n=new D(this.locale,this.editing.view,this.sourceElement,{shouldToolbarGroupWhenFull:r});this.ui=new _(this,n),(0,t.attachToForm)(this)}destroy(){const t=this.getData();return this.ui.destroy(),super.destroy().then((()=>{this.sourceElement&&(0,e.setDataInElement)(this.sourceElement,t)}))}static create(t,o={}){return new Promise((i=>{if(E(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)))}))}}(0,e.mix)(S,t.DataApiMixin),(0,e.mix)(S,t.ElementApiMixin)})(),(window.CKEditor5=window.CKEditor5||{}).editorInline=i})();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ckeditor/ckeditor5-editor-inline",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "34.1.0",
|
|
4
4
|
"description": "Inline editor implementation for CKEditor 5.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ckeditor",
|
|
@@ -11,22 +11,22 @@
|
|
|
11
11
|
],
|
|
12
12
|
"main": "src/index.js",
|
|
13
13
|
"dependencies": {
|
|
14
|
-
"ckeditor5": "^
|
|
14
|
+
"ckeditor5": "^34.1.0",
|
|
15
15
|
"lodash-es": "^4.17.15"
|
|
16
16
|
},
|
|
17
17
|
"devDependencies": {
|
|
18
|
-
"@ckeditor/ckeditor5-basic-styles": "^
|
|
19
|
-
"@ckeditor/ckeditor5-core": "^
|
|
20
|
-
"@ckeditor/ckeditor5-dev-utils": "^
|
|
21
|
-
"@ckeditor/ckeditor5-engine": "^
|
|
22
|
-
"@ckeditor/ckeditor5-enter": "^
|
|
23
|
-
"@ckeditor/ckeditor5-heading": "^
|
|
24
|
-
"@ckeditor/ckeditor5-paragraph": "^
|
|
25
|
-
"@ckeditor/ckeditor5-theme-lark": "^
|
|
26
|
-
"@ckeditor/ckeditor5-typing": "^
|
|
27
|
-
"@ckeditor/ckeditor5-ui": "^
|
|
28
|
-
"@ckeditor/ckeditor5-undo": "^
|
|
29
|
-
"@ckeditor/ckeditor5-utils": "^
|
|
18
|
+
"@ckeditor/ckeditor5-basic-styles": "^34.1.0",
|
|
19
|
+
"@ckeditor/ckeditor5-core": "^34.1.0",
|
|
20
|
+
"@ckeditor/ckeditor5-dev-utils": "^30.0.0",
|
|
21
|
+
"@ckeditor/ckeditor5-engine": "^34.1.0",
|
|
22
|
+
"@ckeditor/ckeditor5-enter": "^34.1.0",
|
|
23
|
+
"@ckeditor/ckeditor5-heading": "^34.1.0",
|
|
24
|
+
"@ckeditor/ckeditor5-paragraph": "^34.1.0",
|
|
25
|
+
"@ckeditor/ckeditor5-theme-lark": "^34.1.0",
|
|
26
|
+
"@ckeditor/ckeditor5-typing": "^34.1.0",
|
|
27
|
+
"@ckeditor/ckeditor5-ui": "^34.1.0",
|
|
28
|
+
"@ckeditor/ckeditor5-undo": "^34.1.0",
|
|
29
|
+
"@ckeditor/ckeditor5-utils": "^34.1.0",
|
|
30
30
|
"webpack": "^5.58.1",
|
|
31
31
|
"webpack-cli": "^4.9.0"
|
|
32
32
|
},
|
package/src/inlineeditor.js
CHANGED
|
@@ -16,7 +16,7 @@ import InlineEditorUI from './inlineeditorui';
|
|
|
16
16
|
import InlineEditorUIView from './inlineeditoruiview';
|
|
17
17
|
|
|
18
18
|
/**
|
|
19
|
-
* The {@glink
|
|
19
|
+
* The {@glink installation/advanced/alternative-setups/predefined-builds#inline-editor inline editor} implementation.
|
|
20
20
|
* It uses an inline editable and a floating toolbar.
|
|
21
21
|
* See the {@glink examples/builds/inline-editor demo}.
|
|
22
22
|
*
|
|
@@ -27,9 +27,10 @@ import InlineEditorUIView from './inlineeditoruiview';
|
|
|
27
27
|
*
|
|
28
28
|
* The inline editor can be used directly from source (if you installed the
|
|
29
29
|
* [`@ckeditor/ckeditor5-editor-inline`](https://www.npmjs.com/package/@ckeditor/ckeditor5-editor-inline) package)
|
|
30
|
-
* but it is also available in the {@glink
|
|
30
|
+
* but it is also available in the {@glink installation/advanced/alternative-setups/predefined-builds#inline-editor inline build}.
|
|
31
31
|
*
|
|
32
|
-
* {@glink
|
|
32
|
+
* {@glink installation/advanced/alternative-setups/predefined-builds Builds}
|
|
33
|
+
* are ready-to-use editors with plugins bundled in. When using the editor from
|
|
33
34
|
* source you need to take care of loading all plugins by yourself
|
|
34
35
|
* (through the {@link module:core/editor/editorconfig~EditorConfig#plugins `config.plugins`} option).
|
|
35
36
|
* Using the editor from source gives much better flexibility and allows easier customization.
|
|
@@ -53,11 +54,22 @@ export default class InlineEditor extends Editor {
|
|
|
53
54
|
* @param {HTMLElement|String} sourceElementOrData The DOM element that will be the source for the created editor
|
|
54
55
|
* (on which the editor will be initialized) or initial data for the editor. For more information see
|
|
55
56
|
* {@link module:editor-inline/inlineeditor~InlineEditor.create `InlineEditor.create()`}.
|
|
56
|
-
* @param {module:core/editor/editorconfig~EditorConfig} config The editor configuration.
|
|
57
|
+
* @param {module:core/editor/editorconfig~EditorConfig} [config] The editor configuration.
|
|
57
58
|
*/
|
|
58
|
-
constructor( sourceElementOrData, config ) {
|
|
59
|
+
constructor( sourceElementOrData, config = {} ) {
|
|
60
|
+
// If both `config.initialData` and initial data parameter in `create()` are set, then throw.
|
|
61
|
+
if ( !isElement( sourceElementOrData ) && config.initialData !== undefined ) {
|
|
62
|
+
// Documented in core/editor/editorconfig.jsdoc.
|
|
63
|
+
// eslint-disable-next-line ckeditor5-rules/ckeditor-error-message
|
|
64
|
+
throw new CKEditorError( 'editor-create-initial-data', null );
|
|
65
|
+
}
|
|
66
|
+
|
|
59
67
|
super( config );
|
|
60
68
|
|
|
69
|
+
if ( this.config.get( 'initialData' ) === undefined ) {
|
|
70
|
+
this.config.set( 'initialData', getInitialData( sourceElementOrData ) );
|
|
71
|
+
}
|
|
72
|
+
|
|
61
73
|
this.model.document.createRoot();
|
|
62
74
|
|
|
63
75
|
if ( isElement( sourceElementOrData ) ) {
|
|
@@ -165,13 +177,13 @@ export default class InlineEditor extends Editor {
|
|
|
165
177
|
* # Using the editor from source
|
|
166
178
|
*
|
|
167
179
|
* The code samples listed in the previous sections of this documentation assume that you are using an
|
|
168
|
-
* {@glink
|
|
180
|
+
* {@glink installation/advanced/alternative-setups/predefined-builds editor build} (for example – `@ckeditor/ckeditor5-build-inline`).
|
|
169
181
|
*
|
|
170
182
|
* If you want to use the inline editor from source (`@ckeditor/ckeditor5-editor-inline/src/inlineeditor`),
|
|
171
183
|
* you need to define the list of
|
|
172
184
|
* {@link module:core/editor/editorconfig~EditorConfig#plugins plugins to be initialized} and
|
|
173
185
|
* {@link module:core/editor/editorconfig~EditorConfig#toolbar toolbar items}. Read more about using the editor from
|
|
174
|
-
* source in the {@glink
|
|
186
|
+
* source in the {@glink installation/advanced/alternative-setups/integrating-from-source dedicated guide}.
|
|
175
187
|
*
|
|
176
188
|
* @param {HTMLElement|String} sourceElementOrData The DOM element that will be the source for the created editor
|
|
177
189
|
* or the editor's initial data.
|
|
@@ -187,9 +199,7 @@ export default class InlineEditor extends Editor {
|
|
|
187
199
|
*/
|
|
188
200
|
static create( sourceElementOrData, config = {} ) {
|
|
189
201
|
return new Promise( resolve => {
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
if ( isHTMLElement && sourceElementOrData.tagName === 'TEXTAREA' ) {
|
|
202
|
+
if ( isElement( sourceElementOrData ) && sourceElementOrData.tagName === 'TEXTAREA' ) {
|
|
193
203
|
// Documented in core/editor/editor.js
|
|
194
204
|
// eslint-disable-next-line ckeditor5-rules/ckeditor-error-message
|
|
195
205
|
throw new CKEditorError( 'editor-wrong-element', null );
|
|
@@ -199,20 +209,8 @@ export default class InlineEditor extends Editor {
|
|
|
199
209
|
|
|
200
210
|
resolve(
|
|
201
211
|
editor.initPlugins()
|
|
202
|
-
.then( () =>
|
|
203
|
-
|
|
204
|
-
} )
|
|
205
|
-
.then( () => {
|
|
206
|
-
if ( !isHTMLElement && config.initialData ) {
|
|
207
|
-
// Documented in core/editor/editorconfig.jdoc.
|
|
208
|
-
// eslint-disable-next-line ckeditor5-rules/ckeditor-error-message
|
|
209
|
-
throw new CKEditorError( 'editor-create-initial-data', null );
|
|
210
|
-
}
|
|
211
|
-
|
|
212
|
-
const initialData = config.initialData !== undefined ? config.initialData : getInitialData( sourceElementOrData );
|
|
213
|
-
|
|
214
|
-
return editor.data.init( initialData );
|
|
215
|
-
} )
|
|
212
|
+
.then( () => editor.ui.init() )
|
|
213
|
+
.then( () => editor.data.init( editor.config.get( 'initialData' ) ) )
|
|
216
214
|
.then( () => editor.fire( 'ready' ) )
|
|
217
215
|
.then( () => editor )
|
|
218
216
|
);
|