@ckeditor/ckeditor5-editor-inline 32.0.0 → 34.1.0
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
);
|