@ckeditor/ckeditor5-editor-inline 35.3.2 → 35.4.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/build/editor-inline.js +1 -1
- package/package.json +20 -16
- package/src/index.js +0 -2
- package/src/inlineeditor.js +172 -195
- package/src/inlineeditorui.js +107 -149
- package/src/inlineeditoruiview.js +116 -234
- package/build/editor-inline.js.map +0 -1
package/build/editor-inline.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
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:()=>C});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
|
|
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:()=>C});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),i.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,o=e.editable.element,i=e.toolbar;e.panel.bind("isVisible").to(this.focusTracker,"isFocused"),e.bind("viewportTopOffset").to(this,"viewportOffset",(({top:t})=>t||0)),e.listenTo(t.ui,"update",(()=>{e.panel.isVisible&&e.panel.pin({target:o,positions:e.panelPositions})})),i.fillFromConfig(this._toolbarConfig,this.componentFactory),this.addToolbar(i)}_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 S extends P.EditorUIView{constructor(t,e,o,i={}){super(t);const r=t.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,{label:t=>r("Rich Text Editor. Editing area: %0",t.name)}),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 C extends((0,t.DataApiMixin)((0,t.ElementApiMixin)(t.Editor))){constructor(o,i={}){if(!D(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 D(t)?(0,e.getDataFromElement)(t):t}(o)),this.model.document.createRoot(),D(o)&&(this.sourceElement=o,(0,t.secureSourceElement)(this));const r=!this.config.get("toolbar.shouldNotGroupWhenFull"),n=new S(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&&this.updateSourceElement(t)}))}static create(t,o={}){return new Promise((i=>{if(D(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)))}))}}function D(t){return E(t)}})(),(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": "35.
|
|
3
|
+
"version": "35.4.0",
|
|
4
4
|
"description": "Inline editor implementation for CKEditor 5.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ckeditor",
|
|
@@ -11,23 +11,24 @@
|
|
|
11
11
|
],
|
|
12
12
|
"main": "src/index.js",
|
|
13
13
|
"dependencies": {
|
|
14
|
-
"ckeditor5": "^35.
|
|
14
|
+
"ckeditor5": "^35.4.0",
|
|
15
15
|
"lodash-es": "^4.17.15"
|
|
16
16
|
},
|
|
17
17
|
"devDependencies": {
|
|
18
|
-
"@ckeditor/ckeditor5-basic-styles": "^35.
|
|
19
|
-
"@ckeditor/ckeditor5-core": "^35.
|
|
18
|
+
"@ckeditor/ckeditor5-basic-styles": "^35.4.0",
|
|
19
|
+
"@ckeditor/ckeditor5-core": "^35.4.0",
|
|
20
20
|
"@ckeditor/ckeditor5-dev-utils": "^31.0.0",
|
|
21
|
-
"@ckeditor/ckeditor5-engine": "^35.
|
|
22
|
-
"@ckeditor/ckeditor5-enter": "^35.
|
|
23
|
-
"@ckeditor/ckeditor5-heading": "^35.
|
|
24
|
-
"@ckeditor/ckeditor5-image": "^35.
|
|
25
|
-
"@ckeditor/ckeditor5-paragraph": "^35.
|
|
26
|
-
"@ckeditor/ckeditor5-theme-lark": "^35.
|
|
27
|
-
"@ckeditor/ckeditor5-typing": "^35.
|
|
28
|
-
"@ckeditor/ckeditor5-ui": "^35.
|
|
29
|
-
"@ckeditor/ckeditor5-undo": "^35.
|
|
30
|
-
"@ckeditor/ckeditor5-utils": "^35.
|
|
21
|
+
"@ckeditor/ckeditor5-engine": "^35.4.0",
|
|
22
|
+
"@ckeditor/ckeditor5-enter": "^35.4.0",
|
|
23
|
+
"@ckeditor/ckeditor5-heading": "^35.4.0",
|
|
24
|
+
"@ckeditor/ckeditor5-image": "^35.4.0",
|
|
25
|
+
"@ckeditor/ckeditor5-paragraph": "^35.4.0",
|
|
26
|
+
"@ckeditor/ckeditor5-theme-lark": "^35.4.0",
|
|
27
|
+
"@ckeditor/ckeditor5-typing": "^35.4.0",
|
|
28
|
+
"@ckeditor/ckeditor5-ui": "^35.4.0",
|
|
29
|
+
"@ckeditor/ckeditor5-undo": "^35.4.0",
|
|
30
|
+
"@ckeditor/ckeditor5-utils": "^35.4.0",
|
|
31
|
+
"typescript": "^4.8.4",
|
|
31
32
|
"webpack": "^5.58.1",
|
|
32
33
|
"webpack-cli": "^4.9.0"
|
|
33
34
|
},
|
|
@@ -46,13 +47,16 @@
|
|
|
46
47
|
},
|
|
47
48
|
"files": [
|
|
48
49
|
"lang",
|
|
49
|
-
"src",
|
|
50
|
+
"src/**/*.js",
|
|
51
|
+
"src/**/*.d.ts",
|
|
50
52
|
"theme",
|
|
51
53
|
"build",
|
|
52
54
|
"ckeditor5-metadata.json",
|
|
53
55
|
"CHANGELOG.md"
|
|
54
56
|
],
|
|
55
57
|
"scripts": {
|
|
56
|
-
"dll:build": "webpack"
|
|
58
|
+
"dll:build": "webpack",
|
|
59
|
+
"build": "tsc -p ./tsconfig.release.json",
|
|
60
|
+
"postversion": "npm run build"
|
|
57
61
|
}
|
|
58
62
|
}
|
package/src/index.js
CHANGED
|
@@ -2,9 +2,7 @@
|
|
|
2
2
|
* @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
3
|
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
|
4
4
|
*/
|
|
5
|
-
|
|
6
5
|
/**
|
|
7
6
|
* @module editor-inline
|
|
8
7
|
*/
|
|
9
|
-
|
|
10
8
|
export { default as InlineEditor } from './inlineeditor';
|
package/src/inlineeditor.js
CHANGED
|
@@ -2,19 +2,14 @@
|
|
|
2
2
|
* @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
3
|
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
|
4
4
|
*/
|
|
5
|
-
|
|
6
5
|
/**
|
|
7
6
|
* @module editor-inline/inlineeditor
|
|
8
7
|
*/
|
|
9
|
-
|
|
10
8
|
import { Editor, DataApiMixin, ElementApiMixin, attachToForm, secureSourceElement } from 'ckeditor5/src/core';
|
|
11
|
-
import {
|
|
12
|
-
|
|
13
|
-
import { isElement } from 'lodash-es';
|
|
14
|
-
|
|
9
|
+
import { getDataFromElement, CKEditorError } from 'ckeditor5/src/utils';
|
|
10
|
+
import { isElement as _isElement } from 'lodash-es';
|
|
15
11
|
import InlineEditorUI from './inlineeditorui';
|
|
16
12
|
import InlineEditorUIView from './inlineeditoruiview';
|
|
17
|
-
|
|
18
13
|
/**
|
|
19
14
|
* The {@glink installation/getting-started/predefined-builds#inline-editor inline editor} implementation.
|
|
20
15
|
* It uses an inline editable and a floating toolbar.
|
|
@@ -37,194 +32,176 @@ import InlineEditorUIView from './inlineeditoruiview';
|
|
|
37
32
|
*
|
|
38
33
|
* Read more about initializing the editor from source or as a build in
|
|
39
34
|
* {@link module:editor-inline/inlineeditor~InlineEditor.create `InlineEditor.create()`}.
|
|
40
|
-
*
|
|
41
|
-
* @mixes module:core/editor/utils/dataapimixin~DataApiMixin
|
|
42
|
-
* @mixes module:core/editor/utils/elementapimixin~ElementApiMixin
|
|
43
|
-
* @implements module:core/editor/editorwithui~EditorWithUI
|
|
44
|
-
* @extends module:core/editor/editor~Editor
|
|
45
35
|
*/
|
|
46
|
-
export default class InlineEditor extends Editor {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
resolve(
|
|
215
|
-
editor.initPlugins()
|
|
216
|
-
.then( () => editor.ui.init() )
|
|
217
|
-
.then( () => editor.data.init( editor.config.get( 'initialData' ) ) )
|
|
218
|
-
.then( () => editor.fire( 'ready' ) )
|
|
219
|
-
.then( () => editor )
|
|
220
|
-
);
|
|
221
|
-
} );
|
|
222
|
-
}
|
|
36
|
+
export default class InlineEditor extends DataApiMixin(ElementApiMixin(Editor)) {
|
|
37
|
+
/**
|
|
38
|
+
* Creates an instance of the inline editor.
|
|
39
|
+
*
|
|
40
|
+
* **Note:** Do not use the constructor to create editor instances. Use the static
|
|
41
|
+
* {@link module:editor-inline/inlineeditor~InlineEditor.create `InlineEditor.create()`} method instead.
|
|
42
|
+
*
|
|
43
|
+
* @param sourceElementOrData The DOM element that will be the source for the created editor
|
|
44
|
+
* (on which the editor will be initialized) or initial data for the editor. For more information see
|
|
45
|
+
* {@link module:editor-inline/inlineeditor~InlineEditor.create `InlineEditor.create()`}.
|
|
46
|
+
* @param config The editor configuration.
|
|
47
|
+
*/
|
|
48
|
+
constructor(sourceElementOrData, config = {}) {
|
|
49
|
+
// If both `config.initialData` and initial data parameter in `create()` are set, then throw.
|
|
50
|
+
if (!isElement(sourceElementOrData) && config.initialData !== undefined) {
|
|
51
|
+
// Documented in core/editor/editorconfig.jsdoc.
|
|
52
|
+
// eslint-disable-next-line ckeditor5-rules/ckeditor-error-message
|
|
53
|
+
throw new CKEditorError('editor-create-initial-data', null);
|
|
54
|
+
}
|
|
55
|
+
super(config);
|
|
56
|
+
if (this.config.get('initialData') === undefined) {
|
|
57
|
+
this.config.set('initialData', getInitialData(sourceElementOrData));
|
|
58
|
+
}
|
|
59
|
+
this.model.document.createRoot();
|
|
60
|
+
if (isElement(sourceElementOrData)) {
|
|
61
|
+
this.sourceElement = sourceElementOrData;
|
|
62
|
+
secureSourceElement(this);
|
|
63
|
+
}
|
|
64
|
+
const shouldToolbarGroupWhenFull = !this.config.get('toolbar.shouldNotGroupWhenFull');
|
|
65
|
+
const view = new InlineEditorUIView(this.locale, this.editing.view, this.sourceElement, {
|
|
66
|
+
shouldToolbarGroupWhenFull
|
|
67
|
+
});
|
|
68
|
+
this.ui = new InlineEditorUI(this, view);
|
|
69
|
+
attachToForm(this);
|
|
70
|
+
}
|
|
71
|
+
/**
|
|
72
|
+
* Destroys the editor instance, releasing all resources used by it.
|
|
73
|
+
*
|
|
74
|
+
* Updates the original editor element with the data if the
|
|
75
|
+
* {@link module:core/editor/editorconfig~EditorConfig#updateSourceElementOnDestroy `updateSourceElementOnDestroy`}
|
|
76
|
+
* configuration option is set to `true`.
|
|
77
|
+
*/
|
|
78
|
+
destroy() {
|
|
79
|
+
// Cache the data, then destroy.
|
|
80
|
+
// It's safe to assume that the model->view conversion will not work after super.destroy().
|
|
81
|
+
const data = this.getData();
|
|
82
|
+
this.ui.destroy();
|
|
83
|
+
return super.destroy()
|
|
84
|
+
.then(() => {
|
|
85
|
+
if (this.sourceElement) {
|
|
86
|
+
this.updateSourceElement(data);
|
|
87
|
+
}
|
|
88
|
+
});
|
|
89
|
+
}
|
|
90
|
+
/**
|
|
91
|
+
* Creates a new inline editor instance.
|
|
92
|
+
*
|
|
93
|
+
* There are three general ways how the editor can be initialized.
|
|
94
|
+
*
|
|
95
|
+
* # Using an existing DOM element (and loading data from it)
|
|
96
|
+
*
|
|
97
|
+
* You can initialize the editor using an existing DOM element:
|
|
98
|
+
*
|
|
99
|
+
* ```ts
|
|
100
|
+
* InlineEditor
|
|
101
|
+
* .create( document.querySelector( '#editor' ) )
|
|
102
|
+
* .then( editor => {
|
|
103
|
+
* console.log( 'Editor was initialized', editor );
|
|
104
|
+
* } )
|
|
105
|
+
* .catch( err => {
|
|
106
|
+
* console.error( err.stack );
|
|
107
|
+
* } );
|
|
108
|
+
* ```
|
|
109
|
+
*
|
|
110
|
+
* The element's content will be used as the editor data and the element will become the editable element.
|
|
111
|
+
*
|
|
112
|
+
* # Creating a detached editor
|
|
113
|
+
*
|
|
114
|
+
* Alternatively, you can initialize the editor by passing the initial data directly as a `String`.
|
|
115
|
+
* In this case, the editor will render an element that must be inserted into the DOM for the editor to work properly:
|
|
116
|
+
*
|
|
117
|
+
* ```ts
|
|
118
|
+
* InlineEditor
|
|
119
|
+
* .create( '<p>Hello world!</p>' )
|
|
120
|
+
* .then( editor => {
|
|
121
|
+
* console.log( 'Editor was initialized', editor );
|
|
122
|
+
*
|
|
123
|
+
* // Initial data was provided so the editor UI element needs to be added manually to the DOM.
|
|
124
|
+
* document.body.appendChild( editor.ui.element );
|
|
125
|
+
* } )
|
|
126
|
+
* .catch( err => {
|
|
127
|
+
* console.error( err.stack );
|
|
128
|
+
* } );
|
|
129
|
+
* ```
|
|
130
|
+
*
|
|
131
|
+
* This lets you dynamically append the editor to your web page whenever it is convenient for you. You may use this method if your
|
|
132
|
+
* web page content is generated on the client side and the DOM structure is not ready at the moment when you initialize the editor.
|
|
133
|
+
*
|
|
134
|
+
* # Using an existing DOM element (and data provided in `config.initialData`)
|
|
135
|
+
*
|
|
136
|
+
* You can also mix these two ways by providing a DOM element to be used and passing the initial data through the configuration:
|
|
137
|
+
*
|
|
138
|
+
* ```ts
|
|
139
|
+
* InlineEditor
|
|
140
|
+
* .create( document.querySelector( '#editor' ), {
|
|
141
|
+
* initialData: '<h2>Initial data</h2><p>Foo bar.</p>'
|
|
142
|
+
* } )
|
|
143
|
+
* .then( editor => {
|
|
144
|
+
* console.log( 'Editor was initialized', editor );
|
|
145
|
+
* } )
|
|
146
|
+
* .catch( err => {
|
|
147
|
+
* console.error( err.stack );
|
|
148
|
+
* } );
|
|
149
|
+
* ```
|
|
150
|
+
*
|
|
151
|
+
* This method can be used to initialize the editor on an existing element with the specified content in case if your integration
|
|
152
|
+
* makes it difficult to set the content of the source element.
|
|
153
|
+
*
|
|
154
|
+
* Note that an error will be thrown if you pass the initial data both as the first parameter and also in the configuration.
|
|
155
|
+
*
|
|
156
|
+
* # Configuring the editor
|
|
157
|
+
*
|
|
158
|
+
* See the {@link module:core/editor/editorconfig~EditorConfig editor configuration documentation} to learn more about
|
|
159
|
+
* customizing plugins, toolbar and more.
|
|
160
|
+
*
|
|
161
|
+
* # Using the editor from source
|
|
162
|
+
*
|
|
163
|
+
* The code samples listed in the previous sections of this documentation assume that you are using an
|
|
164
|
+
* {@glink installation/getting-started/predefined-builds editor build} (for example – `@ckeditor/ckeditor5-build-inline`).
|
|
165
|
+
*
|
|
166
|
+
* If you want to use the inline editor from source (`@ckeditor/ckeditor5-editor-inline/src/inlineeditor`),
|
|
167
|
+
* you need to define the list of
|
|
168
|
+
* {@link module:core/editor/editorconfig~EditorConfig#plugins plugins to be initialized} and
|
|
169
|
+
* {@link module:core/editor/editorconfig~EditorConfig#toolbar toolbar items}. Read more about using the editor from
|
|
170
|
+
* source in the {@glink installation/advanced/alternative-setups/integrating-from-source dedicated guide}.
|
|
171
|
+
*
|
|
172
|
+
* @param sourceElementOrData The DOM element that will be the source for the created editor
|
|
173
|
+
* or the editor's initial data.
|
|
174
|
+
*
|
|
175
|
+
* If a DOM element is passed, its content will be automatically loaded to the editor upon initialization.
|
|
176
|
+
* The editor data will be set back to the original element once the editor is destroyed only if the
|
|
177
|
+
* {@link module:core/editor/editorconfig~EditorConfig#updateSourceElementOnDestroy updateSourceElementOnDestroy}
|
|
178
|
+
* option is set to `true`.
|
|
179
|
+
*
|
|
180
|
+
* If the initial data is passed, a detached editor will be created. In this case you need to insert it into the DOM manually.
|
|
181
|
+
* It is available under the {@link module:editor-inline/inlineeditorui~InlineEditorUI#element `editor.ui.element`} property.
|
|
182
|
+
*
|
|
183
|
+
* @param config The editor configuration.
|
|
184
|
+
* @returns A promise resolved once the editor is ready. The promise resolves with the created editor instance.
|
|
185
|
+
*/
|
|
186
|
+
static create(sourceElementOrData, config = {}) {
|
|
187
|
+
return new Promise(resolve => {
|
|
188
|
+
if (isElement(sourceElementOrData) && sourceElementOrData.tagName === 'TEXTAREA') {
|
|
189
|
+
// Documented in core/editor/editor.js
|
|
190
|
+
// eslint-disable-next-line ckeditor5-rules/ckeditor-error-message
|
|
191
|
+
throw new CKEditorError('editor-wrong-element', null);
|
|
192
|
+
}
|
|
193
|
+
const editor = new this(sourceElementOrData, config);
|
|
194
|
+
resolve(editor.initPlugins()
|
|
195
|
+
.then(() => editor.ui.init())
|
|
196
|
+
.then(() => editor.data.init(editor.config.get('initialData')))
|
|
197
|
+
.then(() => editor.fire('ready'))
|
|
198
|
+
.then(() => editor));
|
|
199
|
+
});
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
function getInitialData(sourceElementOrData) {
|
|
203
|
+
return isElement(sourceElementOrData) ? getDataFromElement(sourceElementOrData) : sourceElementOrData;
|
|
223
204
|
}
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
mix( InlineEditor, ElementApiMixin );
|
|
227
|
-
|
|
228
|
-
function getInitialData( sourceElementOrData ) {
|
|
229
|
-
return isElement( sourceElementOrData ) ? getDataFromElement( sourceElementOrData ) : sourceElementOrData;
|
|
205
|
+
function isElement(value) {
|
|
206
|
+
return _isElement(value);
|
|
230
207
|
}
|
package/src/inlineeditorui.js
CHANGED
|
@@ -2,165 +2,123 @@
|
|
|
2
2
|
* @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
3
|
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
|
4
4
|
*/
|
|
5
|
-
|
|
6
5
|
/**
|
|
7
6
|
* @module editor-inline/inlineeditorui
|
|
8
7
|
*/
|
|
9
|
-
|
|
10
8
|
import { EditorUI } from 'ckeditor5/src/core';
|
|
11
9
|
import { normalizeToolbarConfig } from 'ckeditor5/src/ui';
|
|
12
10
|
import { enablePlaceholder } from 'ckeditor5/src/engine';
|
|
13
|
-
|
|
14
11
|
/**
|
|
15
12
|
* The inline editor UI class.
|
|
16
13
|
*
|
|
17
14
|
* @extends module:core/editor/editorui~EditorUI
|
|
18
15
|
*/
|
|
19
16
|
export default class InlineEditorUI extends EditorUI {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
// showing up when there's no focus in the UI.
|
|
128
|
-
if ( view.panel.isVisible ) {
|
|
129
|
-
view.panel.pin( {
|
|
130
|
-
target: editableElement,
|
|
131
|
-
positions: view.panelPositions
|
|
132
|
-
} );
|
|
133
|
-
}
|
|
134
|
-
} );
|
|
135
|
-
|
|
136
|
-
toolbar.fillFromConfig( this._toolbarConfig, this.componentFactory );
|
|
137
|
-
|
|
138
|
-
// Register the toolbar so it becomes available for Alt+F10 and Esc navigation.
|
|
139
|
-
this.addToolbar( toolbar );
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
/**
|
|
143
|
-
* Enable the placeholder text on the editing root, if any was configured.
|
|
144
|
-
*
|
|
145
|
-
* @private
|
|
146
|
-
*/
|
|
147
|
-
_initPlaceholder() {
|
|
148
|
-
const editor = this.editor;
|
|
149
|
-
const editingView = editor.editing.view;
|
|
150
|
-
const editingRoot = editingView.document.getRoot();
|
|
151
|
-
const sourceElement = editor.sourceElement;
|
|
152
|
-
|
|
153
|
-
const placeholderText = editor.config.get( 'placeholder' ) ||
|
|
154
|
-
sourceElement && sourceElement.tagName.toLowerCase() === 'textarea' && sourceElement.getAttribute( 'placeholder' );
|
|
155
|
-
|
|
156
|
-
if ( placeholderText ) {
|
|
157
|
-
enablePlaceholder( {
|
|
158
|
-
view: editingView,
|
|
159
|
-
element: editingRoot,
|
|
160
|
-
text: placeholderText,
|
|
161
|
-
isDirectHost: false,
|
|
162
|
-
keepOnFocus: true
|
|
163
|
-
} );
|
|
164
|
-
}
|
|
165
|
-
}
|
|
17
|
+
/**
|
|
18
|
+
* Creates an instance of the inline editor UI class.
|
|
19
|
+
*
|
|
20
|
+
* @param editor The editor instance.
|
|
21
|
+
* @param view The view of the UI.
|
|
22
|
+
*/
|
|
23
|
+
constructor(editor, view) {
|
|
24
|
+
super(editor);
|
|
25
|
+
this.view = view;
|
|
26
|
+
this._toolbarConfig = normalizeToolbarConfig(editor.config.get('toolbar'));
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* @inheritDoc
|
|
30
|
+
*/
|
|
31
|
+
get element() {
|
|
32
|
+
return this.view.editable.element;
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* Initializes the UI.
|
|
36
|
+
*/
|
|
37
|
+
init() {
|
|
38
|
+
const editor = this.editor;
|
|
39
|
+
const view = this.view;
|
|
40
|
+
const editingView = editor.editing.view;
|
|
41
|
+
const editable = view.editable;
|
|
42
|
+
const editingRoot = editingView.document.getRoot();
|
|
43
|
+
// The editable UI and editing root should share the same name. Then name is used
|
|
44
|
+
// to recognize the particular editable, for instance in ARIA attributes.
|
|
45
|
+
editable.name = editingRoot.rootName;
|
|
46
|
+
view.render();
|
|
47
|
+
// The editable UI element in DOM is available for sure only after the editor UI view has been rendered.
|
|
48
|
+
// But it can be available earlier if a DOM element has been passed to InlineEditor.create().
|
|
49
|
+
const editableElement = editable.element;
|
|
50
|
+
// Register the editable UI view in the editor. A single editor instance can aggregate multiple
|
|
51
|
+
// editable areas (roots) but the inline editor has only one.
|
|
52
|
+
this.setEditableElement(editable.name, editableElement);
|
|
53
|
+
// Let the editable UI element respond to the changes in the global editor focus
|
|
54
|
+
// tracker. It has been added to the same tracker a few lines above but, in reality, there are
|
|
55
|
+
// many focusable areas in the editor, like balloons, toolbars or dropdowns and as long
|
|
56
|
+
// as they have focus, the editable should act like it is focused too (although technically
|
|
57
|
+
// it isn't), e.g. by setting the proper CSS class, visually announcing focus to the user.
|
|
58
|
+
// Doing otherwise will result in editable focus styles disappearing, once e.g. the
|
|
59
|
+
// toolbar gets focused.
|
|
60
|
+
editable.bind('isFocused').to(this.focusTracker);
|
|
61
|
+
// Bind the editable UI element to the editing view, making it an end– and entry–point
|
|
62
|
+
// of the editor's engine. This is where the engine meets the UI.
|
|
63
|
+
editingView.attachDomRoot(editableElement);
|
|
64
|
+
this._initPlaceholder();
|
|
65
|
+
this._initToolbar();
|
|
66
|
+
this.fire('ready');
|
|
67
|
+
}
|
|
68
|
+
/**
|
|
69
|
+
* @inheritDoc
|
|
70
|
+
*/
|
|
71
|
+
destroy() {
|
|
72
|
+
super.destroy();
|
|
73
|
+
const view = this.view;
|
|
74
|
+
const editingView = this.editor.editing.view;
|
|
75
|
+
editingView.detachDomRoot(view.editable.name);
|
|
76
|
+
view.destroy();
|
|
77
|
+
}
|
|
78
|
+
/**
|
|
79
|
+
* Initializes the inline editor toolbar and its panel.
|
|
80
|
+
*/
|
|
81
|
+
_initToolbar() {
|
|
82
|
+
const editor = this.editor;
|
|
83
|
+
const view = this.view;
|
|
84
|
+
const editableElement = view.editable.element;
|
|
85
|
+
const toolbar = view.toolbar;
|
|
86
|
+
// Set–up the view#panel.
|
|
87
|
+
view.panel.bind('isVisible').to(this.focusTracker, 'isFocused');
|
|
88
|
+
view.bind('viewportTopOffset').to(this, 'viewportOffset', ({ top }) => top || 0);
|
|
89
|
+
// https://github.com/ckeditor/ckeditor5-editor-inline/issues/4
|
|
90
|
+
view.listenTo(editor.ui, 'update', () => {
|
|
91
|
+
// Don't pin if the panel is not already visible. It prevents the panel
|
|
92
|
+
// showing up when there's no focus in the UI.
|
|
93
|
+
if (view.panel.isVisible) {
|
|
94
|
+
view.panel.pin({
|
|
95
|
+
target: editableElement,
|
|
96
|
+
positions: view.panelPositions
|
|
97
|
+
});
|
|
98
|
+
}
|
|
99
|
+
});
|
|
100
|
+
toolbar.fillFromConfig(this._toolbarConfig, this.componentFactory);
|
|
101
|
+
// Register the toolbar so it becomes available for Alt+F10 and Esc navigation.
|
|
102
|
+
this.addToolbar(toolbar);
|
|
103
|
+
}
|
|
104
|
+
/**
|
|
105
|
+
* Enable the placeholder text on the editing root, if any was configured.
|
|
106
|
+
*/
|
|
107
|
+
_initPlaceholder() {
|
|
108
|
+
const editor = this.editor;
|
|
109
|
+
const editingView = editor.editing.view;
|
|
110
|
+
const editingRoot = editingView.document.getRoot();
|
|
111
|
+
const sourceElement = editor.sourceElement;
|
|
112
|
+
const placeholderText = editor.config.get('placeholder') ||
|
|
113
|
+
sourceElement && sourceElement.tagName.toLowerCase() === 'textarea' && sourceElement.getAttribute('placeholder');
|
|
114
|
+
if (placeholderText) {
|
|
115
|
+
enablePlaceholder({
|
|
116
|
+
view: editingView,
|
|
117
|
+
element: editingRoot,
|
|
118
|
+
text: placeholderText,
|
|
119
|
+
isDirectHost: false,
|
|
120
|
+
keepOnFocus: true
|
|
121
|
+
});
|
|
122
|
+
}
|
|
123
|
+
}
|
|
166
124
|
}
|
|
@@ -2,247 +2,129 @@
|
|
|
2
2
|
* @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
3
|
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
|
4
4
|
*/
|
|
5
|
-
|
|
6
5
|
/**
|
|
7
6
|
* @module editor-inline/inlineeditoruiview
|
|
8
7
|
*/
|
|
9
8
|
import { BalloonPanelView, EditorUIView, InlineEditableUIView, ToolbarView } from 'ckeditor5/src/ui';
|
|
10
9
|
import { Rect, ResizeObserver, toUnit } from 'ckeditor5/src/utils';
|
|
11
|
-
|
|
12
|
-
const toPx = toUnit( 'px' );
|
|
13
|
-
|
|
10
|
+
const toPx = toUnit('px');
|
|
14
11
|
/**
|
|
15
12
|
* Inline editor UI view. Uses an nline editable and a floating toolbar.
|
|
16
|
-
*
|
|
17
|
-
* @extends module:ui/editorui/editoruiview~EditorUIView
|
|
18
13
|
*/
|
|
19
14
|
export default class InlineEditorUIView extends EditorUIView {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
* @member {module:ui/editableui/inline/inlineeditableuiview~InlineEditableUIView}
|
|
136
|
-
*/
|
|
137
|
-
this.editable = new InlineEditableUIView( locale, editingView, editableElement, {
|
|
138
|
-
label: editableView => {
|
|
139
|
-
return t( 'Rich Text Editor. Editing area: %0', editableView.name );
|
|
140
|
-
}
|
|
141
|
-
} );
|
|
142
|
-
|
|
143
|
-
/**
|
|
144
|
-
* An instance of the resize observer that helps dynamically determine the geometry of the toolbar
|
|
145
|
-
* and manage items that do not fit into a single row.
|
|
146
|
-
*
|
|
147
|
-
* **Note:** Created in {@link #render}.
|
|
148
|
-
*
|
|
149
|
-
* @private
|
|
150
|
-
* @member {module:utils/dom/resizeobserver~ResizeObserver}
|
|
151
|
-
*/
|
|
152
|
-
this._resizeObserver = null;
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
/**
|
|
156
|
-
* @inheritDoc
|
|
157
|
-
*/
|
|
158
|
-
render() {
|
|
159
|
-
super.render();
|
|
160
|
-
|
|
161
|
-
this.body.add( this.panel );
|
|
162
|
-
this.registerChild( this.editable );
|
|
163
|
-
this.panel.content.add( this.toolbar );
|
|
164
|
-
|
|
165
|
-
const options = this.toolbar.options;
|
|
166
|
-
|
|
167
|
-
// Set toolbar's max-width on the initialization and update it on the editable resize,
|
|
168
|
-
// if 'shouldToolbarGroupWhenFull' in config is set to 'true'.
|
|
169
|
-
if ( options.shouldGroupWhenFull ) {
|
|
170
|
-
const editableElement = this.editable.element;
|
|
171
|
-
|
|
172
|
-
this._resizeObserver = new ResizeObserver( editableElement, () => {
|
|
173
|
-
this.toolbar.maxWidth = toPx( new Rect( editableElement ).width );
|
|
174
|
-
} );
|
|
175
|
-
}
|
|
176
|
-
}
|
|
177
|
-
|
|
178
|
-
/**
|
|
179
|
-
* @inheritDoc
|
|
180
|
-
*/
|
|
181
|
-
destroy() {
|
|
182
|
-
super.destroy();
|
|
183
|
-
|
|
184
|
-
if ( this._resizeObserver ) {
|
|
185
|
-
this._resizeObserver.destroy();
|
|
186
|
-
}
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
/**
|
|
190
|
-
* Determines the panel top position of the {@link #panel} in {@link #panelPositions}.
|
|
191
|
-
*
|
|
192
|
-
* @private
|
|
193
|
-
* @param {module:utils/dom/rect~Rect} editableRect Rect of the {@link #element}.
|
|
194
|
-
* @param {module:utils/dom/rect~Rect} panelRect Rect of the {@link #panel}.
|
|
195
|
-
*/
|
|
196
|
-
_getPanelPositionTop( editableRect, panelRect ) {
|
|
197
|
-
let top;
|
|
198
|
-
|
|
199
|
-
if ( editableRect.top > panelRect.height + this.viewportTopOffset ) {
|
|
200
|
-
top = editableRect.top - panelRect.height;
|
|
201
|
-
} else if ( editableRect.bottom > panelRect.height + this.viewportTopOffset + 50 ) {
|
|
202
|
-
top = this.viewportTopOffset;
|
|
203
|
-
} else {
|
|
204
|
-
top = editableRect.bottom;
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
return top;
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
/**
|
|
211
|
-
* Returns the positions for {@link #panelPositions}.
|
|
212
|
-
*
|
|
213
|
-
* See: {@link module:utils/dom/position~Options#positions}.
|
|
214
|
-
*
|
|
215
|
-
* @private
|
|
216
|
-
* @returns {Array.<module:utils/dom/position~PositioningFunction>}
|
|
217
|
-
*/
|
|
218
|
-
_getPanelPositions() {
|
|
219
|
-
const positions = [
|
|
220
|
-
( editableRect, panelRect ) => {
|
|
221
|
-
return {
|
|
222
|
-
top: this._getPanelPositionTop( editableRect, panelRect ),
|
|
223
|
-
left: editableRect.left,
|
|
224
|
-
name: 'toolbar_west',
|
|
225
|
-
config: {
|
|
226
|
-
withArrow: false
|
|
227
|
-
}
|
|
228
|
-
};
|
|
229
|
-
},
|
|
230
|
-
( editableRect, panelRect ) => {
|
|
231
|
-
return {
|
|
232
|
-
top: this._getPanelPositionTop( editableRect, panelRect ),
|
|
233
|
-
left: editableRect.left + editableRect.width - panelRect.width,
|
|
234
|
-
name: 'toolbar_east',
|
|
235
|
-
config: {
|
|
236
|
-
withArrow: false
|
|
237
|
-
}
|
|
238
|
-
};
|
|
239
|
-
}
|
|
240
|
-
];
|
|
241
|
-
|
|
242
|
-
if ( this.locale.uiLanguageDirection === 'ltr' ) {
|
|
243
|
-
return positions;
|
|
244
|
-
} else {
|
|
245
|
-
return positions.reverse();
|
|
246
|
-
}
|
|
247
|
-
}
|
|
15
|
+
/**
|
|
16
|
+
* Creates an instance of the inline editor UI view.
|
|
17
|
+
*
|
|
18
|
+
* @param locale The {@link module:core/editor/editor~Editor#locale} instance.
|
|
19
|
+
* @param editingView The editing view instance this view is related to.
|
|
20
|
+
* @param editableElement The editable element. If not specified, it will be automatically created by
|
|
21
|
+
* {@link module:ui/editableui/editableuiview~EditableUIView}. Otherwise, the given element will be used.
|
|
22
|
+
* @param options Configuration options for the view instance.
|
|
23
|
+
* @param options.shouldToolbarGroupWhenFull When set `true` enables automatic items grouping
|
|
24
|
+
* in the main {@link module:editor-inline/inlineeditoruiview~InlineEditorUIView#toolbar toolbar}.
|
|
25
|
+
* See {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull} to learn more.
|
|
26
|
+
*/
|
|
27
|
+
constructor(locale, editingView, editableElement, options = {}) {
|
|
28
|
+
super(locale);
|
|
29
|
+
const t = locale.t;
|
|
30
|
+
this.toolbar = new ToolbarView(locale, {
|
|
31
|
+
shouldGroupWhenFull: options.shouldToolbarGroupWhenFull,
|
|
32
|
+
isFloating: true
|
|
33
|
+
});
|
|
34
|
+
this.set('viewportTopOffset', 0);
|
|
35
|
+
this.panel = new BalloonPanelView(locale);
|
|
36
|
+
this.panelPositions = this._getPanelPositions();
|
|
37
|
+
this.panel.extendTemplate({
|
|
38
|
+
attributes: {
|
|
39
|
+
class: 'ck-toolbar-container'
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
this.editable = new InlineEditableUIView(locale, editingView, editableElement, {
|
|
43
|
+
label: editableView => {
|
|
44
|
+
return t('Rich Text Editor. Editing area: %0', editableView.name);
|
|
45
|
+
}
|
|
46
|
+
});
|
|
47
|
+
this._resizeObserver = null;
|
|
48
|
+
}
|
|
49
|
+
/**
|
|
50
|
+
* @inheritDoc
|
|
51
|
+
*/
|
|
52
|
+
render() {
|
|
53
|
+
super.render();
|
|
54
|
+
this.body.add(this.panel);
|
|
55
|
+
this.registerChild(this.editable);
|
|
56
|
+
this.panel.content.add(this.toolbar);
|
|
57
|
+
const options = this.toolbar.options;
|
|
58
|
+
// Set toolbar's max-width on the initialization and update it on the editable resize,
|
|
59
|
+
// if 'shouldToolbarGroupWhenFull' in config is set to 'true'.
|
|
60
|
+
if (options.shouldGroupWhenFull) {
|
|
61
|
+
const editableElement = this.editable.element;
|
|
62
|
+
this._resizeObserver = new ResizeObserver(editableElement, () => {
|
|
63
|
+
this.toolbar.maxWidth = toPx(new Rect(editableElement).width);
|
|
64
|
+
});
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
/**
|
|
68
|
+
* @inheritDoc
|
|
69
|
+
*/
|
|
70
|
+
destroy() {
|
|
71
|
+
super.destroy();
|
|
72
|
+
if (this._resizeObserver) {
|
|
73
|
+
this._resizeObserver.destroy();
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
/**
|
|
77
|
+
* Determines the panel top position of the {@link #panel} in {@link #panelPositions}.
|
|
78
|
+
*
|
|
79
|
+
* @param editableRect Rect of the {@link #element}.
|
|
80
|
+
* @param panelRect Rect of the {@link #panel}.
|
|
81
|
+
*/
|
|
82
|
+
_getPanelPositionTop(editableRect, panelRect) {
|
|
83
|
+
let top;
|
|
84
|
+
if (editableRect.top > panelRect.height + this.viewportTopOffset) {
|
|
85
|
+
top = editableRect.top - panelRect.height;
|
|
86
|
+
}
|
|
87
|
+
else if (editableRect.bottom > panelRect.height + this.viewportTopOffset + 50) {
|
|
88
|
+
top = this.viewportTopOffset;
|
|
89
|
+
}
|
|
90
|
+
else {
|
|
91
|
+
top = editableRect.bottom;
|
|
92
|
+
}
|
|
93
|
+
return top;
|
|
94
|
+
}
|
|
95
|
+
/**
|
|
96
|
+
* Returns the positions for {@link #panelPositions}.
|
|
97
|
+
*
|
|
98
|
+
* See: {@link module:utils/dom/position~Options#positions}.
|
|
99
|
+
*/
|
|
100
|
+
_getPanelPositions() {
|
|
101
|
+
const positions = [
|
|
102
|
+
(editableRect, panelRect) => {
|
|
103
|
+
return {
|
|
104
|
+
top: this._getPanelPositionTop(editableRect, panelRect),
|
|
105
|
+
left: editableRect.left,
|
|
106
|
+
name: 'toolbar_west',
|
|
107
|
+
config: {
|
|
108
|
+
withArrow: false
|
|
109
|
+
}
|
|
110
|
+
};
|
|
111
|
+
},
|
|
112
|
+
(editableRect, panelRect) => {
|
|
113
|
+
return {
|
|
114
|
+
top: this._getPanelPositionTop(editableRect, panelRect),
|
|
115
|
+
left: editableRect.left + editableRect.width - panelRect.width,
|
|
116
|
+
name: 'toolbar_east',
|
|
117
|
+
config: {
|
|
118
|
+
withArrow: false
|
|
119
|
+
}
|
|
120
|
+
};
|
|
121
|
+
}
|
|
122
|
+
];
|
|
123
|
+
if (this.locale.uiLanguageDirection === 'ltr') {
|
|
124
|
+
return positions;
|
|
125
|
+
}
|
|
126
|
+
else {
|
|
127
|
+
return positions.reverse();
|
|
128
|
+
}
|
|
129
|
+
}
|
|
248
130
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"editor-inline.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAE8G;AACjC;;AAEvC;;AAEQ;AACQ;;AAEtD;AACA,QAAQ,mFAAmF;AAC3F;AACA,YAAY,0CAA0C;AACtD;AACA;AACA,IAAI,qFAAqF;AACzF;AACA;AACA;AACA;AACA;AACA,oCAAoC,iFAAiF;AACrH;AACA,IAAI;AACJ;AACA;AACA,iBAAiB,6EAA6E;AAC9F;AACA;AACA;AACA,IAAI,oFAAoF;AACxF;AACA;AACA;AACA;AACA;AACA;AACe,2BAA2B,sDAAM;AAChD;AACA;AACA;AACA;AACA,KAAK,qFAAqF;AAC1F;AACA;AACA,YAAY,oBAAoB;AAChC;AACA,KAAK,oFAAoF;AACzF,YAAY,8CAA8C;AAC1D;AACA,+CAA+C;AAC/C;AACA,QAAQ,qDAAS;AACjB;AACA;AACA,aAAa,8DAAa;AAC1B;;AAEA;;AAEA;AACA;AACA;;AAEA;;AAEA,OAAO,qDAAS;AAChB;AACA,GAAG,uEAAmB;AACtB;;AAEA;;AAEA,mBAAmB,2DAAkB;AACrC;AACA,IAAI;AACJ,gBAAgB,uDAAc;;AAE9B,EAAE,gEAAY;AACd;;AAEA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA,cAAc;AACd;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQ;AACR;AACA;AACA,QAAQ;AACR;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQ;AACR;AACA;AACA,QAAQ;AACR;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQ;AACR;AACA;AACA,QAAQ;AACR;AACA;AACA,QAAQ;AACR;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,uFAAuF;AACpG;AACA;AACA;AACA;AACA;AACA,KAAK,oEAAoE;AACzE;AACA;AACA;AACA,KAAK,sFAAsF;AAC3F,KAAK,yEAAyE;AAC9E,mBAAmB,wFAAwF;AAC3G;AACA,YAAY,oBAAoB;AAChC;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA,+BAA+B,sFAAsF;AACrH;AACA,YAAY,8CAA8C;AAC1D,cAAc,SAAS;AACvB;AACA,iDAAiD;AACjD;AACA,QAAQ,qDAAS;AACjB;AACA;AACA,cAAc,8DAAa;AAC3B;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;;AAEA,wDAAG,gBAAgB,4DAAY;AAC/B,wDAAG,gBAAgB,+DAAe;;AAElC;AACA,QAAQ,qDAAS,0BAA0B,uEAAkB;AAC7D;;;;;;;;;;;;;;;;;;;ACrOA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAE8C;AACY;AACD;;AAEzD;AACA;AACA;AACA;AACA;AACe,6BAA6B,wDAAQ;AACpD;AACA;AACA;AACA,YAAY,kCAAkC;AAC9C,YAAY,8CAA8C;AAC1D;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,cAAc,8CAA8C;AAC5D;AACA;;AAEA;AACA;AACA;AACA,YAAY;AACZ;AACA;AACA,wBAAwB,wEAAsB;AAC9C;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA,mEAAmE,MAAM;;AAEzE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA,IAAI;;AAEJ;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA,GAAG,uEAAiB;AACpB;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;;;;;;;;;;ACrKA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACqG;AAClC;;AAEnE,aAAa,2DAAM;;AAEnB;AACA;AACA;AACA;AACA;AACe,iCAAiC,0DAAY;AAC5D;AACA;AACA;AACA,YAAY,4BAA4B,YAAY,+CAA+C;AACnG,YAAY,8BAA8B;AAC1C,YAAY,aAAa;AACzB,KAAK,yDAAyD;AAC9D,YAAY,QAAQ,WAAW;AAC/B,YAAY,SAAS;AACrB,iBAAiB,iFAAiF;AAClG,SAAS,wEAAwE;AACjF;AACA,iEAAiE;AACjE;;AAEA;;AAEA;AACA;AACA;AACA;AACA,cAAc;AACd;AACA,qBAAqB,yDAAW;AAChC;AACA;AACA,IAAI;;AAEJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,oFAAoF;AACnG;AACA,SAAS,4FAA4F;AACrG;AACA;AACA;AACA;AACA,cAAc,QAAQ;AACtB;AACA;;AAEA;AACA;AACA;AACA;AACA,cAAc;AACd;AACA,mBAAmB,8DAAgB;;AAEnC;AACA,iDAAiD,cAAc;AAC/D,MAAM,+BAA+B;AACrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,kDAAkD;AAC7D;AACA;AACA,YAAY;AACZ;AACA;;AAEA;AACA;AACA;AACA;AACA,IAAI;;AAEJ;AACA;AACA;AACA;AACA,cAAc;AACd;AACA,sBAAsB,kEAAoB;AAC1C;AACA;AACA;AACA,IAAI;;AAEJ;AACA;AACA;AACA;AACA,2BAA2B,cAAc;AACzC;AACA;AACA,cAAc;AACd;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA,8BAA8B,+DAAc;AAC5C,sCAAsC,qDAAI;AAC1C,KAAK;AACL;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA,8CAA8C,cAAc,IAAI,sBAAsB;AACtF;AACA;AACA,YAAY,4BAA4B,0BAA0B,eAAe;AACjF,YAAY,4BAA4B,uBAAuB,aAAa;AAC5E;AACA;AACA;;AAEA;AACA;AACA,IAAI;AACJ;AACA,IAAI;AACJ;AACA;;AAEA;AACA;;AAEA;AACA,+BAA+B,sBAAsB;AACrD;AACA,UAAU,kDAAkD;AAC5D;AACA;AACA,cAAc;AACd;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;;;;;;;;;;;ACvPA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;;ACAA;;;;;;;;;;;;;;;;ACA8B;;AAE9B;AACA,aAAa,uDAAW;;AAExB,iEAAe,MAAM,EAAC;;;;;;;;;;;;;;;;;;;ACLY;AACM;AACU;;AAElD;AACA;AACA;;AAEA;AACA,qBAAqB,kDAAM,GAAG,8DAAkB;;AAEhD;AACA;AACA;AACA;AACA,WAAW,GAAG;AACd,aAAa,QAAQ;AACrB;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,yDAAS;AACf,MAAM,8DAAc;AACpB;;AAEA,iEAAe,UAAU,EAAC;;;;;;;;;;;;;;;;AC3B1B;AACA;;AAEA,iEAAe,UAAU,EAAC;;;;;;;;;;;;;;;;;ACHU;;AAEpC;AACA,mBAAmB,uDAAO;;AAE1B,iEAAe,YAAY,EAAC;;;;;;;;;;;;;;;;;ACLM;;AAElC;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,qBAAqB,kDAAM,GAAG,8DAAkB;;AAEhD;AACA;AACA;AACA;AACA,WAAW,GAAG;AACd,aAAa,QAAQ;AACrB;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,IAAI;;AAEJ;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;;AAEA,iEAAe,SAAS,EAAC;;;;;;;;;;;;;;;;AC7CzB;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,WAAW,GAAG;AACd,aAAa,QAAQ;AACrB;AACA;AACA;AACA;;AAEA,iEAAe,cAAc,EAAC;;;;;;;;;;;;;;;;ACrB9B;AACA;AACA;AACA;AACA,WAAW,UAAU;AACrB,WAAW,UAAU;AACrB,aAAa,UAAU;AACvB;AACA;AACA;AACA;AACA;AACA;;AAEA,iEAAe,OAAO,EAAC;;;;;;;;;;;;;;;;;ACdmB;;AAE1C;AACA;;AAEA;AACA,WAAW,sDAAU;;AAErB,iEAAe,IAAI,EAAC;;;;;;;;;;;;;;;;;;ACRyB;AACE;;AAE/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,GAAG;AACd,aAAa,SAAS;AACtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS,4DAAY,oCAAoC,6DAAa;AACtE;;AAEA,iEAAe,SAAS,EAAC;;;;;;;;;;;;;;;;ACxBzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,GAAG;AACd,aAAa,SAAS;AACtB;AACA;AACA,oBAAoB;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,iEAAe,YAAY,EAAC;;;;;;;;;;;;;;;;;;;AC5Bc;AACI;AACD;;AAE7C;AACA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,GAAG;AACd,aAAa,SAAS;AACtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB,gBAAgB;AACrC;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,4DAAY,WAAW,0DAAU;AACxC;AACA;AACA,cAAc,4DAAY;AAC1B;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,iEAAe,aAAa,EAAC;;;;;;;UC7D7B;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;;WCtBA;WACA;WACA;WACA;WACA,yCAAyC,wCAAwC;WACjF;WACA;WACA;;;;;WCPA;;;;;WCAA;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D;;;;;;;;;;;;;;;;ACNA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEyD","sources":["webpack://CKEditor5.editorInline/./src/inlineeditor.js","webpack://CKEditor5.editorInline/./src/inlineeditorui.js","webpack://CKEditor5.editorInline/./src/inlineeditoruiview.js","webpack://CKEditor5.editorInline/delegated \"./src/core.js\" from dll-reference CKEditor5.dll","webpack://CKEditor5.editorInline/delegated \"./src/engine.js\" from dll-reference CKEditor5.dll","webpack://CKEditor5.editorInline/delegated \"./src/ui.js\" from dll-reference CKEditor5.dll","webpack://CKEditor5.editorInline/delegated \"./src/utils.js\" from dll-reference CKEditor5.dll","webpack://CKEditor5.editorInline/external var \"CKEditor5.dll\"","webpack://CKEditor5.editorInline/../../node_modules/lodash-es/_Symbol.js","webpack://CKEditor5.editorInline/../../node_modules/lodash-es/_baseGetTag.js","webpack://CKEditor5.editorInline/../../node_modules/lodash-es/_freeGlobal.js","webpack://CKEditor5.editorInline/../../node_modules/lodash-es/_getPrototype.js","webpack://CKEditor5.editorInline/../../node_modules/lodash-es/_getRawTag.js","webpack://CKEditor5.editorInline/../../node_modules/lodash-es/_objectToString.js","webpack://CKEditor5.editorInline/../../node_modules/lodash-es/_overArg.js","webpack://CKEditor5.editorInline/../../node_modules/lodash-es/_root.js","webpack://CKEditor5.editorInline/../../node_modules/lodash-es/isElement.js","webpack://CKEditor5.editorInline/../../node_modules/lodash-es/isObjectLike.js","webpack://CKEditor5.editorInline/../../node_modules/lodash-es/isPlainObject.js","webpack://CKEditor5.editorInline/webpack/bootstrap","webpack://CKEditor5.editorInline/webpack/runtime/define property getters","webpack://CKEditor5.editorInline/webpack/runtime/hasOwnProperty shorthand","webpack://CKEditor5.editorInline/webpack/runtime/make namespace object","webpack://CKEditor5.editorInline/./src/index.js"],"sourcesContent":["/**\n * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\n */\n\n/**\n * @module editor-inline/inlineeditor\n */\n\nimport { Editor, DataApiMixin, ElementApiMixin, attachToForm, secureSourceElement } from 'ckeditor5/src/core';\nimport { mix, getDataFromElement, CKEditorError } from 'ckeditor5/src/utils';\n\nimport { isElement } from 'lodash-es';\n\nimport InlineEditorUI from './inlineeditorui';\nimport InlineEditorUIView from './inlineeditoruiview';\n\n/**\n * The {@glink installation/getting-started/predefined-builds#inline-editor inline editor} implementation.\n * It uses an inline editable and a floating toolbar.\n * See the {@glink examples/builds/inline-editor demo}.\n *\n * In order to create a inline editor instance, use the static\n * {@link module:editor-inline/inlineeditor~InlineEditor.create `InlineEditor.create()`} method.\n *\n * # Inline editor and inline build\n *\n * The inline editor can be used directly from source (if you installed the\n * [`@ckeditor/ckeditor5-editor-inline`](https://www.npmjs.com/package/@ckeditor/ckeditor5-editor-inline) package)\n * but it is also available in the {@glink installation/getting-started/predefined-builds#inline-editor inline build}.\n *\n * {@glink installation/getting-started/predefined-builds Builds}\n * are ready-to-use editors with plugins bundled in. When using the editor from\n * source you need to take care of loading all plugins by yourself\n * (through the {@link module:core/editor/editorconfig~EditorConfig#plugins `config.plugins`} option).\n * Using the editor from source gives much better flexibility and allows easier customization.\n *\n * Read more about initializing the editor from source or as a build in\n * {@link module:editor-inline/inlineeditor~InlineEditor.create `InlineEditor.create()`}.\n *\n * @mixes module:core/editor/utils/dataapimixin~DataApiMixin\n * @mixes module:core/editor/utils/elementapimixin~ElementApiMixin\n * @implements module:core/editor/editorwithui~EditorWithUI\n * @extends module:core/editor/editor~Editor\n */\nexport default class InlineEditor extends Editor {\n\t/**\n\t * Creates an instance of the inline editor.\n\t *\n\t * **Note:** Do not use the constructor to create editor instances. Use the static\n\t * {@link module:editor-inline/inlineeditor~InlineEditor.create `InlineEditor.create()`} method instead.\n\t *\n\t * @protected\n\t * @param {HTMLElement|String} sourceElementOrData The DOM element that will be the source for the created editor\n\t * (on which the editor will be initialized) or initial data for the editor. For more information see\n\t * {@link module:editor-inline/inlineeditor~InlineEditor.create `InlineEditor.create()`}.\n\t * @param {module:core/editor/editorconfig~EditorConfig} [config] The editor configuration.\n\t */\n\tconstructor( sourceElementOrData, config = {} ) {\n\t\t// If both `config.initialData` and initial data parameter in `create()` are set, then throw.\n\t\tif ( !isElement( sourceElementOrData ) && config.initialData !== undefined ) {\n\t\t\t// Documented in core/editor/editorconfig.jsdoc.\n\t\t\t// eslint-disable-next-line ckeditor5-rules/ckeditor-error-message\n\t\t\tthrow new CKEditorError( 'editor-create-initial-data', null );\n\t\t}\n\n\t\tsuper( config );\n\n\t\tif ( this.config.get( 'initialData' ) === undefined ) {\n\t\t\tthis.config.set( 'initialData', getInitialData( sourceElementOrData ) );\n\t\t}\n\n\t\tthis.model.document.createRoot();\n\n\t\tif ( isElement( sourceElementOrData ) ) {\n\t\t\tthis.sourceElement = sourceElementOrData;\n\t\t\tsecureSourceElement( this );\n\t\t}\n\n\t\tconst shouldToolbarGroupWhenFull = !this.config.get( 'toolbar.shouldNotGroupWhenFull' );\n\n\t\tconst view = new InlineEditorUIView( this.locale, this.editing.view, this.sourceElement, {\n\t\t\tshouldToolbarGroupWhenFull\n\t\t} );\n\t\tthis.ui = new InlineEditorUI( this, view );\n\n\t\tattachToForm( this );\n\t}\n\n\t/**\n\t * Destroys the editor instance, releasing all resources used by it.\n\t *\n\t * Updates the original editor element with the data if the\n\t * {@link module:core/editor/editorconfig~EditorConfig#updateSourceElementOnDestroy `updateSourceElementOnDestroy`}\n\t * configuration option is set to `true`.\n\t *\n\t * @returns {Promise}\n\t */\n\tdestroy() {\n\t\t// Cache the data, then destroy.\n\t\t// It's safe to assume that the model->view conversion will not work after super.destroy().\n\t\tconst data = this.getData();\n\n\t\tthis.ui.destroy();\n\n\t\treturn super.destroy()\n\t\t\t.then( () => {\n\t\t\t\tif ( this.sourceElement ) {\n\t\t\t\t\tthis.updateSourceElement( data );\n\t\t\t\t}\n\t\t\t} );\n\t}\n\n\t/**\n\t * Creates a new inline editor instance.\n\t *\n\t * There are three general ways how the editor can be initialized.\n\t *\n\t * # Using an existing DOM element (and loading data from it)\n\t *\n\t * You can initialize the editor using an existing DOM element:\n\t *\n\t *\t\tInlineEditor\n\t *\t\t\t.create( document.querySelector( '#editor' ) )\n\t *\t\t\t.then( editor => {\n\t *\t\t\t\tconsole.log( 'Editor was initialized', editor );\n\t *\t\t\t} )\n\t *\t\t\t.catch( err => {\n\t *\t\t\t\tconsole.error( err.stack );\n\t *\t\t\t} );\n\t *\n\t * The element's content will be used as the editor data and the element will become the editable element.\n\t *\n\t * # Creating a detached editor\n\t *\n\t * Alternatively, you can initialize the editor by passing the initial data directly as a `String`.\n\t * In this case, the editor will render an element that must be inserted into the DOM for the editor to work properly:\n\t *\n\t *\t\tInlineEditor\n\t *\t\t\t.create( '<p>Hello world!</p>' )\n\t *\t\t\t.then( editor => {\n\t *\t\t\t\tconsole.log( 'Editor was initialized', editor );\n\t *\n\t *\t\t\t\t// Initial data was provided so the editor UI element needs to be added manually to the DOM.\n\t *\t\t\t\tdocument.body.appendChild( editor.ui.element );\n\t *\t\t\t} )\n\t *\t\t\t.catch( err => {\n\t *\t\t\t\tconsole.error( err.stack );\n\t *\t\t\t} );\n\t *\n\t * This lets you dynamically append the editor to your web page whenever it is convenient for you. You may use this method if your\n\t * web page content is generated on the client side and the DOM structure is not ready at the moment when you initialize the editor.\n\t *\n\t * # Using an existing DOM element (and data provided in `config.initialData`)\n\t *\n\t * You can also mix these two ways by providing a DOM element to be used and passing the initial data through the configuration:\n\t *\n\t *\t\tInlineEditor\n\t *\t\t\t.create( document.querySelector( '#editor' ), {\n\t *\t\t\t\tinitialData: '<h2>Initial data</h2><p>Foo bar.</p>'\n\t *\t\t\t} )\n\t *\t\t\t.then( editor => {\n\t *\t\t\t\tconsole.log( 'Editor was initialized', editor );\n\t *\t\t\t} )\n\t *\t\t\t.catch( err => {\n\t *\t\t\t\tconsole.error( err.stack );\n\t *\t\t\t} );\n\t *\n\t * This method can be used to initialize the editor on an existing element with the specified content in case if your integration\n\t * makes it difficult to set the content of the source element.\n\t *\n\t * Note that an error will be thrown if you pass the initial data both as the first parameter and also in the configuration.\n\t *\n\t * # Configuring the editor\n\t *\n\t * See the {@link module:core/editor/editorconfig~EditorConfig editor configuration documentation} to learn more about\n\t * customizing plugins, toolbar and more.\n\t *\n\t * # Using the editor from source\n\t *\n\t * The code samples listed in the previous sections of this documentation assume that you are using an\n\t * {@glink installation/getting-started/predefined-builds editor build} (for example – `@ckeditor/ckeditor5-build-inline`).\n\t *\n\t * If you want to use the inline editor from source (`@ckeditor/ckeditor5-editor-inline/src/inlineeditor`),\n\t * you need to define the list of\n\t * {@link module:core/editor/editorconfig~EditorConfig#plugins plugins to be initialized} and\n\t * {@link module:core/editor/editorconfig~EditorConfig#toolbar toolbar items}. Read more about using the editor from\n\t * source in the {@glink installation/advanced/alternative-setups/integrating-from-source dedicated guide}.\n\t *\n\t * @param {HTMLElement|String} sourceElementOrData The DOM element that will be the source for the created editor\n\t * or the editor's initial data.\n\t *\n\t * If a DOM element is passed, its content will be automatically loaded to the editor upon initialization.\n\t * The editor data will be set back to the original element once the editor is destroyed only if the\n\t * {@link module:core/editor/editorconfig~EditorConfig#updateSourceElementOnDestroy updateSourceElementOnDestroy}\n\t * option is set to `true`.\n\t *\n\t * If the initial data is passed, a detached editor will be created. In this case you need to insert it into the DOM manually.\n\t * It is available under the {@link module:editor-inline/inlineeditorui~InlineEditorUI#element `editor.ui.element`} property.\n\t *\n\t * @param {module:core/editor/editorconfig~EditorConfig} [config] The editor configuration.\n\t * @returns {Promise} A promise resolved once the editor is ready. The promise resolves with the created editor instance.\n\t */\n\tstatic create( sourceElementOrData, config = {} ) {\n\t\treturn new Promise( resolve => {\n\t\t\tif ( isElement( sourceElementOrData ) && sourceElementOrData.tagName === 'TEXTAREA' ) {\n\t\t\t\t// Documented in core/editor/editor.js\n\t\t\t\t// eslint-disable-next-line ckeditor5-rules/ckeditor-error-message\n\t\t\t\tthrow new CKEditorError( 'editor-wrong-element', null );\n\t\t\t}\n\n\t\t\tconst editor = new this( sourceElementOrData, config );\n\n\t\t\tresolve(\n\t\t\t\teditor.initPlugins()\n\t\t\t\t\t.then( () => editor.ui.init() )\n\t\t\t\t\t.then( () => editor.data.init( editor.config.get( 'initialData' ) ) )\n\t\t\t\t\t.then( () => editor.fire( 'ready' ) )\n\t\t\t\t\t.then( () => editor )\n\t\t\t);\n\t\t} );\n\t}\n}\n\nmix( InlineEditor, DataApiMixin );\nmix( InlineEditor, ElementApiMixin );\n\nfunction getInitialData( sourceElementOrData ) {\n\treturn isElement( sourceElementOrData ) ? getDataFromElement( sourceElementOrData ) : sourceElementOrData;\n}\n","/**\n * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\n */\n\n/**\n * @module editor-inline/inlineeditorui\n */\n\nimport { EditorUI } from 'ckeditor5/src/core';\nimport { normalizeToolbarConfig } from 'ckeditor5/src/ui';\nimport { enablePlaceholder } from 'ckeditor5/src/engine';\n\n/**\n * The inline editor UI class.\n *\n * @extends module:core/editor/editorui~EditorUI\n */\nexport default class InlineEditorUI extends EditorUI {\n\t/**\n\t * Creates an instance of the inline editor UI class.\n\t *\n\t * @param {module:core/editor/editor~Editor} editor The editor instance.\n\t * @param {module:ui/editorui/editoruiview~EditorUIView} view The view of the UI.\n\t */\n\tconstructor( editor, view ) {\n\t\tsuper( editor );\n\n\t\t/**\n\t\t * The main (top–most) view of the editor UI.\n\t\t *\n\t\t * @readonly\n\t\t * @member {module:ui/editorui/editoruiview~EditorUIView} #view\n\t\t */\n\t\tthis.view = view;\n\n\t\t/**\n\t\t * A normalized `config.toolbar` object.\n\t\t *\n\t\t * @type {Object}\n\t\t * @private\n\t\t */\n\t\tthis._toolbarConfig = normalizeToolbarConfig( editor.config.get( 'toolbar' ) );\n\t}\n\n\t/**\n\t * @inheritDoc\n\t */\n\tget element() {\n\t\treturn this.view.editable.element;\n\t}\n\n\t/**\n\t * Initializes the UI.\n\t */\n\tinit() {\n\t\tconst editor = this.editor;\n\t\tconst view = this.view;\n\t\tconst editingView = editor.editing.view;\n\t\tconst editable = view.editable;\n\t\tconst editingRoot = editingView.document.getRoot();\n\n\t\t// The editable UI and editing root should share the same name. Then name is used\n\t\t// to recognize the particular editable, for instance in ARIA attributes.\n\t\teditable.name = editingRoot.rootName;\n\n\t\tview.render();\n\n\t\t// The editable UI element in DOM is available for sure only after the editor UI view has been rendered.\n\t\t// But it can be available earlier if a DOM element has been passed to InlineEditor.create().\n\t\tconst editableElement = editable.element;\n\n\t\t// Register the editable UI view in the editor. A single editor instance can aggregate multiple\n\t\t// editable areas (roots) but the inline editor has only one.\n\t\tthis.setEditableElement( editable.name, editableElement );\n\n\t\t// Let the editable UI element respond to the changes in the global editor focus\n\t\t// tracker. It has been added to the same tracker a few lines above but, in reality, there are\n\t\t// many focusable areas in the editor, like balloons, toolbars or dropdowns and as long\n\t\t// as they have focus, the editable should act like it is focused too (although technically\n\t\t// it isn't), e.g. by setting the proper CSS class, visually announcing focus to the user.\n\t\t// Doing otherwise will result in editable focus styles disappearing, once e.g. the\n\t\t// toolbar gets focused.\n\t\teditable.bind( 'isFocused' ).to( this.focusTracker );\n\n\t\t// Bind the editable UI element to the editing view, making it an end– and entry–point\n\t\t// of the editor's engine. This is where the engine meets the UI.\n\t\teditingView.attachDomRoot( editableElement );\n\n\t\tthis._initPlaceholder();\n\t\tthis._initToolbar();\n\t\tthis.fire( 'ready' );\n\t}\n\n\t/**\n\t * @inheritDoc\n\t */\n\tdestroy() {\n\t\tsuper.destroy();\n\n\t\tconst view = this.view;\n\t\tconst editingView = this.editor.editing.view;\n\n\t\teditingView.detachDomRoot( view.editable.name );\n\t\tview.destroy();\n\t}\n\n\t/**\n\t * Initializes the inline editor toolbar and its panel.\n\t *\n\t * @private\n\t */\n\t_initToolbar() {\n\t\tconst editor = this.editor;\n\t\tconst view = this.view;\n\t\tconst editableElement = view.editable.element;\n\t\tconst toolbar = view.toolbar;\n\n\t\t// Set–up the view#panel.\n\t\tview.panel.bind( 'isVisible' ).to( this.focusTracker, 'isFocused' );\n\n\t\tview.bind( 'viewportTopOffset' ).to( this, 'viewportOffset', ( { top } ) => top );\n\n\t\t// https://github.com/ckeditor/ckeditor5-editor-inline/issues/4\n\t\tview.listenTo( editor.ui, 'update', () => {\n\t\t\t// Don't pin if the panel is not already visible. It prevents the panel\n\t\t\t// showing up when there's no focus in the UI.\n\t\t\tif ( view.panel.isVisible ) {\n\t\t\t\tview.panel.pin( {\n\t\t\t\t\ttarget: editableElement,\n\t\t\t\t\tpositions: view.panelPositions\n\t\t\t\t} );\n\t\t\t}\n\t\t} );\n\n\t\ttoolbar.fillFromConfig( this._toolbarConfig, this.componentFactory );\n\n\t\t// Register the toolbar so it becomes available for Alt+F10 and Esc navigation.\n\t\tthis.addToolbar( toolbar );\n\t}\n\n\t/**\n\t * Enable the placeholder text on the editing root, if any was configured.\n\t *\n\t * @private\n\t */\n\t_initPlaceholder() {\n\t\tconst editor = this.editor;\n\t\tconst editingView = editor.editing.view;\n\t\tconst editingRoot = editingView.document.getRoot();\n\t\tconst sourceElement = editor.sourceElement;\n\n\t\tconst placeholderText = editor.config.get( 'placeholder' ) ||\n\t\t\tsourceElement && sourceElement.tagName.toLowerCase() === 'textarea' && sourceElement.getAttribute( 'placeholder' );\n\n\t\tif ( placeholderText ) {\n\t\t\tenablePlaceholder( {\n\t\t\t\tview: editingView,\n\t\t\t\telement: editingRoot,\n\t\t\t\ttext: placeholderText,\n\t\t\t\tisDirectHost: false,\n\t\t\t\tkeepOnFocus: true\n\t\t\t} );\n\t\t}\n\t}\n}\n","/**\n * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\n */\n\n/**\n * @module editor-inline/inlineeditoruiview\n */\nimport { BalloonPanelView, EditorUIView, InlineEditableUIView, ToolbarView } from 'ckeditor5/src/ui';\nimport { Rect, ResizeObserver, toUnit } from 'ckeditor5/src/utils';\n\nconst toPx = toUnit( 'px' );\n\n/**\n * Inline editor UI view. Uses an nline editable and a floating toolbar.\n *\n * @extends module:ui/editorui/editoruiview~EditorUIView\n */\nexport default class InlineEditorUIView extends EditorUIView {\n\t/**\n\t * Creates an instance of the inline editor UI view.\n\t *\n\t * @param {module:utils/locale~Locale} locale The {@link module:core/editor/editor~Editor#locale} instance.\n\t * @param {module:engine/view/view~View} editingView The editing view instance this view is related to.\n\t * @param {HTMLElement} [editableElement] The editable element. If not specified, it will be automatically created by\n\t * {@link module:ui/editableui/editableuiview~EditableUIView}. Otherwise, the given element will be used.\n\t * @param {Object} [options={}] Configuration options for the view instance.\n\t * @param {Boolean} [options.shouldToolbarGroupWhenFull] When set `true` enables automatic items grouping\n\t * in the main {@link module:editor-inline/inlineeditoruiview~InlineEditorUIView#toolbar toolbar}.\n\t * See {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull} to learn more.\n\t */\n\tconstructor( locale, editingView, editableElement, options = {} ) {\n\t\tsuper( locale );\n\n\t\tconst t = locale.t;\n\n\t\t/**\n\t\t * A floating toolbar view instance.\n\t\t *\n\t\t * @readonly\n\t\t * @member {module:ui/toolbar/toolbarview~ToolbarView}\n\t\t */\n\t\tthis.toolbar = new ToolbarView( locale, {\n\t\t\tshouldGroupWhenFull: options.shouldToolbarGroupWhenFull,\n\t\t\tisFloating: true\n\t\t} );\n\n\t\t/**\n\t\t * The offset from the top edge of the web browser's viewport which makes the\n\t\t * UI become sticky. The default value is `0`, which means that the UI becomes\n\t\t * sticky when its upper edge touches the top of the page viewport.\n\t\t *\n\t\t * This attribute is useful when the web page has UI elements positioned to the top\n\t\t * either using `position: fixed` or `position: sticky`, which would cover the\n\t\t * UI or vice–versa (depending on the `z-index` hierarchy).\n\t\t *\n\t\t * Bound to {@link module:core/editor/editorui~EditorUI#viewportOffset `EditorUI#viewportOffset`}.\n\t\t *\n\t\t * If {@link module:core/editor/editorconfig~EditorConfig#ui `EditorConfig#ui.viewportOffset.top`} is defined, then\n\t\t * it will override the default value.\n\t\t *\n\t\t * @observable\n\t\t * @default 0\n\t\t * @member {Number} #viewportTopOffset\n\t\t */\n\t\tthis.set( 'viewportTopOffset', 0 );\n\n\t\t/**\n\t\t * A balloon panel view instance.\n\t\t *\n\t\t * @readonly\n\t\t * @member {module:ui/panel/balloon/balloonpanelview~BalloonPanelView}\n\t\t */\n\t\tthis.panel = new BalloonPanelView( locale );\n\n\t\t/**\n\t\t * A set of positioning functions used by the {@link #panel} to float around\n\t\t * {@link #element editableElement}.\n\t\t *\n\t\t * The positioning functions are as follows:\n\t\t *\n\t\t * * West:\n\t\t *\n\t\t *\t\t[ Panel ]\n\t\t *\t\t+------------------+\n\t\t *\t\t| #editableElement |\n\t\t *\t\t+------------------+\n\t\t *\n\t\t *\t\t+------------------+\n\t\t *\t\t| #editableElement |\n\t\t *\t\t|[ Panel ] |\n\t\t *\t\t| |\n\t\t *\t\t+------------------+\n\t\t *\n\t\t *\t\t+------------------+\n\t\t *\t\t| #editableElement |\n\t\t *\t\t+------------------+\n\t\t *\t\t[ Panel ]\n\t\t *\n\t\t * * East:\n\t\t *\n\t\t *\t\t [ Panel ]\n\t\t *\t\t+------------------+\n\t\t *\t\t| #editableElement |\n\t\t *\t\t+------------------+\n\t\t *\n\t\t *\t\t+------------------+\n\t\t *\t\t| #editableElement |\n\t\t *\t\t| [ Panel ]|\n\t\t *\t\t| |\n\t\t *\t\t+------------------+\n\t\t *\n\t\t *\t\t+------------------+\n\t\t *\t\t| #editableElement |\n\t\t *\t\t+------------------+\n\t\t *\t\t [ Panel ]\n\t\t *\n\t\t * See: {@link module:utils/dom/position~Options#positions}.\n\t\t *\n\t\t * @readonly\n\t\t * @type {Array.<module:utils/dom/position~PositioningFunction>}\n\t\t */\n\t\tthis.panelPositions = this._getPanelPositions();\n\n\t\tthis.panel.extendTemplate( {\n\t\t\tattributes: {\n\t\t\t\tclass: 'ck-toolbar-container'\n\t\t\t}\n\t\t} );\n\n\t\t/**\n\t\t * Editable UI view.\n\t\t *\n\t\t * @readonly\n\t\t * @member {module:ui/editableui/inline/inlineeditableuiview~InlineEditableUIView}\n\t\t */\n\t\tthis.editable = new InlineEditableUIView( locale, editingView, editableElement, {\n\t\t\tlabel: editableView => {\n\t\t\t\treturn t( 'Rich Text Editor. Editing area: %0', editableView.name );\n\t\t\t}\n\t\t} );\n\n\t\t/**\n\t\t * An instance of the resize observer that helps dynamically determine the geometry of the toolbar\n\t\t * and manage items that do not fit into a single row.\n\t\t *\n\t\t * **Note:** Created in {@link #render}.\n\t\t *\n\t\t * @private\n\t\t * @member {module:utils/dom/resizeobserver~ResizeObserver}\n\t\t */\n\t\tthis._resizeObserver = null;\n\t}\n\n\t/**\n\t * @inheritDoc\n\t */\n\trender() {\n\t\tsuper.render();\n\n\t\tthis.body.add( this.panel );\n\t\tthis.registerChild( this.editable );\n\t\tthis.panel.content.add( this.toolbar );\n\n\t\tconst options = this.toolbar.options;\n\n\t\t// Set toolbar's max-width on the initialization and update it on the editable resize,\n\t\t// if 'shouldToolbarGroupWhenFull' in config is set to 'true'.\n\t\tif ( options.shouldGroupWhenFull ) {\n\t\t\tconst editableElement = this.editable.element;\n\n\t\t\tthis._resizeObserver = new ResizeObserver( editableElement, () => {\n\t\t\t\tthis.toolbar.maxWidth = toPx( new Rect( editableElement ).width );\n\t\t\t} );\n\t\t}\n\t}\n\n\t/**\n\t * @inheritDoc\n\t */\n\tdestroy() {\n\t\tsuper.destroy();\n\n\t\tif ( this._resizeObserver ) {\n\t\t\tthis._resizeObserver.destroy();\n\t\t}\n\t}\n\n\t/**\n\t * Determines the panel top position of the {@link #panel} in {@link #panelPositions}.\n\t *\n\t * @private\n\t * @param {module:utils/dom/rect~Rect} editableRect Rect of the {@link #element}.\n\t * @param {module:utils/dom/rect~Rect} panelRect Rect of the {@link #panel}.\n\t */\n\t_getPanelPositionTop( editableRect, panelRect ) {\n\t\tlet top;\n\n\t\tif ( editableRect.top > panelRect.height + this.viewportTopOffset ) {\n\t\t\ttop = editableRect.top - panelRect.height;\n\t\t} else if ( editableRect.bottom > panelRect.height + this.viewportTopOffset + 50 ) {\n\t\t\ttop = this.viewportTopOffset;\n\t\t} else {\n\t\t\ttop = editableRect.bottom;\n\t\t}\n\n\t\treturn top;\n\t}\n\n\t/**\n\t * Returns the positions for {@link #panelPositions}.\n\t *\n\t * See: {@link module:utils/dom/position~Options#positions}.\n\t *\n\t * @private\n\t * @returns {Array.<module:utils/dom/position~PositioningFunction>}\n\t */\n\t_getPanelPositions() {\n\t\tconst positions = [\n\t\t\t( editableRect, panelRect ) => {\n\t\t\t\treturn {\n\t\t\t\t\ttop: this._getPanelPositionTop( editableRect, panelRect ),\n\t\t\t\t\tleft: editableRect.left,\n\t\t\t\t\tname: 'toolbar_west',\n\t\t\t\t\tconfig: {\n\t\t\t\t\t\twithArrow: false\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t},\n\t\t\t( editableRect, panelRect ) => {\n\t\t\t\treturn {\n\t\t\t\t\ttop: this._getPanelPositionTop( editableRect, panelRect ),\n\t\t\t\t\tleft: editableRect.left + editableRect.width - panelRect.width,\n\t\t\t\t\tname: 'toolbar_east',\n\t\t\t\t\tconfig: {\n\t\t\t\t\t\twithArrow: false\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t}\n\t\t];\n\n\t\tif ( this.locale.uiLanguageDirection === 'ltr' ) {\n\t\t\treturn positions;\n\t\t} else {\n\t\t\treturn positions.reverse();\n\t\t}\n\t}\n}\n","module.exports = (__webpack_require__(/*! dll-reference CKEditor5.dll */ \"dll-reference CKEditor5.dll\"))(\"./src/core.js\");","module.exports = (__webpack_require__(/*! dll-reference CKEditor5.dll */ \"dll-reference CKEditor5.dll\"))(\"./src/engine.js\");","module.exports = (__webpack_require__(/*! dll-reference CKEditor5.dll */ \"dll-reference CKEditor5.dll\"))(\"./src/ui.js\");","module.exports = (__webpack_require__(/*! dll-reference CKEditor5.dll */ \"dll-reference CKEditor5.dll\"))(\"./src/utils.js\");","module.exports = CKEditor5.dll;","import root from './_root.js';\n\n/** Built-in value references. */\nvar Symbol = root.Symbol;\n\nexport default Symbol;\n","import Symbol from './_Symbol.js';\nimport getRawTag from './_getRawTag.js';\nimport objectToString from './_objectToString.js';\n\n/** `Object#toString` result references. */\nvar nullTag = '[object Null]',\n undefinedTag = '[object Undefined]';\n\n/** Built-in value references. */\nvar symToStringTag = Symbol ? Symbol.toStringTag : undefined;\n\n/**\n * The base implementation of `getTag` without fallbacks for buggy environments.\n *\n * @private\n * @param {*} value The value to query.\n * @returns {string} Returns the `toStringTag`.\n */\nfunction baseGetTag(value) {\n if (value == null) {\n return value === undefined ? undefinedTag : nullTag;\n }\n return (symToStringTag && symToStringTag in Object(value))\n ? getRawTag(value)\n : objectToString(value);\n}\n\nexport default baseGetTag;\n","/** Detect free variable `global` from Node.js. */\nvar freeGlobal = typeof global == 'object' && global && global.Object === Object && global;\n\nexport default freeGlobal;\n","import overArg from './_overArg.js';\n\n/** Built-in value references. */\nvar getPrototype = overArg(Object.getPrototypeOf, Object);\n\nexport default getPrototype;\n","import Symbol from './_Symbol.js';\n\n/** Used for built-in method references. */\nvar objectProto = Object.prototype;\n\n/** Used to check objects for own properties. */\nvar hasOwnProperty = objectProto.hasOwnProperty;\n\n/**\n * Used to resolve the\n * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)\n * of values.\n */\nvar nativeObjectToString = objectProto.toString;\n\n/** Built-in value references. */\nvar symToStringTag = Symbol ? Symbol.toStringTag : undefined;\n\n/**\n * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.\n *\n * @private\n * @param {*} value The value to query.\n * @returns {string} Returns the raw `toStringTag`.\n */\nfunction getRawTag(value) {\n var isOwn = hasOwnProperty.call(value, symToStringTag),\n tag = value[symToStringTag];\n\n try {\n value[symToStringTag] = undefined;\n var unmasked = true;\n } catch (e) {}\n\n var result = nativeObjectToString.call(value);\n if (unmasked) {\n if (isOwn) {\n value[symToStringTag] = tag;\n } else {\n delete value[symToStringTag];\n }\n }\n return result;\n}\n\nexport default getRawTag;\n","/** Used for built-in method references. */\nvar objectProto = Object.prototype;\n\n/**\n * Used to resolve the\n * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)\n * of values.\n */\nvar nativeObjectToString = objectProto.toString;\n\n/**\n * Converts `value` to a string using `Object.prototype.toString`.\n *\n * @private\n * @param {*} value The value to convert.\n * @returns {string} Returns the converted string.\n */\nfunction objectToString(value) {\n return nativeObjectToString.call(value);\n}\n\nexport default objectToString;\n","/**\n * Creates a unary function that invokes `func` with its argument transformed.\n *\n * @private\n * @param {Function} func The function to wrap.\n * @param {Function} transform The argument transform.\n * @returns {Function} Returns the new function.\n */\nfunction overArg(func, transform) {\n return function(arg) {\n return func(transform(arg));\n };\n}\n\nexport default overArg;\n","import freeGlobal from './_freeGlobal.js';\n\n/** Detect free variable `self`. */\nvar freeSelf = typeof self == 'object' && self && self.Object === Object && self;\n\n/** Used as a reference to the global object. */\nvar root = freeGlobal || freeSelf || Function('return this')();\n\nexport default root;\n","import isObjectLike from './isObjectLike.js';\nimport isPlainObject from './isPlainObject.js';\n\n/**\n * Checks if `value` is likely a DOM element.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a DOM element, else `false`.\n * @example\n *\n * _.isElement(document.body);\n * // => true\n *\n * _.isElement('<body>');\n * // => false\n */\nfunction isElement(value) {\n return isObjectLike(value) && value.nodeType === 1 && !isPlainObject(value);\n}\n\nexport default isElement;\n","/**\n * Checks if `value` is object-like. A value is object-like if it's not `null`\n * and has a `typeof` result of \"object\".\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is object-like, else `false`.\n * @example\n *\n * _.isObjectLike({});\n * // => true\n *\n * _.isObjectLike([1, 2, 3]);\n * // => true\n *\n * _.isObjectLike(_.noop);\n * // => false\n *\n * _.isObjectLike(null);\n * // => false\n */\nfunction isObjectLike(value) {\n return value != null && typeof value == 'object';\n}\n\nexport default isObjectLike;\n","import baseGetTag from './_baseGetTag.js';\nimport getPrototype from './_getPrototype.js';\nimport isObjectLike from './isObjectLike.js';\n\n/** `Object#toString` result references. */\nvar objectTag = '[object Object]';\n\n/** Used for built-in method references. */\nvar funcProto = Function.prototype,\n objectProto = Object.prototype;\n\n/** Used to resolve the decompiled source of functions. */\nvar funcToString = funcProto.toString;\n\n/** Used to check objects for own properties. */\nvar hasOwnProperty = objectProto.hasOwnProperty;\n\n/** Used to infer the `Object` constructor. */\nvar objectCtorString = funcToString.call(Object);\n\n/**\n * Checks if `value` is a plain object, that is, an object created by the\n * `Object` constructor or one with a `[[Prototype]]` of `null`.\n *\n * @static\n * @memberOf _\n * @since 0.8.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a plain object, else `false`.\n * @example\n *\n * function Foo() {\n * this.a = 1;\n * }\n *\n * _.isPlainObject(new Foo);\n * // => false\n *\n * _.isPlainObject([1, 2, 3]);\n * // => false\n *\n * _.isPlainObject({ 'x': 0, 'y': 0 });\n * // => true\n *\n * _.isPlainObject(Object.create(null));\n * // => true\n */\nfunction isPlainObject(value) {\n if (!isObjectLike(value) || baseGetTag(value) != objectTag) {\n return false;\n }\n var proto = getPrototype(value);\n if (proto === null) {\n return true;\n }\n var Ctor = hasOwnProperty.call(proto, 'constructor') && proto.constructor;\n return typeof Ctor == 'function' && Ctor instanceof Ctor &&\n funcToString.call(Ctor) == objectCtorString;\n}\n\nexport default isPlainObject;\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","/**\n * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\n */\n\n/**\n * @module editor-inline\n */\n\nexport { default as InlineEditor } from './inlineeditor';\n"],"names":[],"sourceRoot":""}
|