@ckeditor/ckeditor5-editor-balloon 36.0.1 → 37.0.0-alpha.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,4 +1,4 @@
1
1
  /*!
2
2
  * @license Copyright (c) 2003-2023, 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,{BalloonEditor:()=>A});var t=o(704),e=o(273),r=o(209),n=o(492);class s extends e.EditorUI{constructor(t,e){super(t),this.view=e}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.fire("ready")}destroy(){super.destroy();const t=this.view;this.editor.editing.view.detachDomRoot(t.editable.name),t.destroy()}_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,n.enablePlaceholder)({view:e,element:o,text:r,isDirectHost:!1,keepOnFocus:!0})}}class c extends e.EditorUIView{constructor(t,o,i){super(t);const r=t.t;this.editable=new e.InlineEditableUIView(t,o,i,{label:t=>r("Rich Text Editor. Editing area: %0",t.name)})}render(){super.render(),this.registerChild(this.editable)}}const a=function(t){return null!=t&&"object"==typeof t};const l="object"==typeof global&&global&&global.Object===Object&&global;var d="object"==typeof self&&self&&self.Object===Object&&self;const u=(l||d||Function("return this")()).Symbol;var h=Object.prototype,g=h.hasOwnProperty,p=h.toString,b=u?u.toStringTag:void 0;const f=function(t){var e=g.call(t,b),o=t[b];try{t[b]=void 0;var i=!0}catch(t){}var r=p.call(t);return i&&(e?t[b]=o:delete t[b]),r};var m=Object.prototype.toString;const v=function(t){return m.call(t)};var y="[object Null]",w="[object Undefined]",j=u?u.toStringTag:void 0;const E=function(t){return null==t?void 0===t?w:y:j&&j in Object(t)?f(t):v(t)};const O=function(t,e){return function(o){return t(e(o))}}(Object.getPrototypeOf,Object);var x="[object Object]",S=Function.prototype,P=Object.prototype,T=S.toString,D=P.hasOwnProperty,C=T.call(Object);const R=function(t){if(!a(t)||E(t)!=x)return!1;var e=O(t);if(null===e)return!0;var o=D.call(e,"constructor")&&e.constructor;return"function"==typeof o&&o instanceof o&&T.call(o)==C};const F=function(t){return a(t)&&1===t.nodeType&&!R(t)};class A extends((0,t.DataApiMixin)((0,t.ElementApiMixin)(t.Editor))){constructor(o,i={}){if(!K(o)&&void 0!==i.initialData)throw new r.CKEditorError("editor-create-initial-data",null);super(i),void 0===this.config.get("initialData")&&this.config.set("initialData",function(t){return K(t)?(0,r.getDataFromElement)(t):t}(o)),K(o)&&(this.sourceElement=o,(0,t.secureSourceElement)(this));const n=this.config.get("plugins");n.push(e.BalloonToolbar),this.config.set("plugins",n),this.config.define("balloonToolbar",this.config.get("toolbar")),this.model.document.createRoot();const a=new c(this.locale,this.editing.view,this.sourceElement);this.ui=new s(this,a),(0,t.attachToForm)(this)}destroy(){const t=this.getData();return this.ui.destroy(),super.destroy().then((()=>{this.sourceElement&&this.updateSourceElement(t)}))}static create(t,e={}){return new Promise((o=>{if(K(t)&&"TEXTAREA"===t.tagName)throw new r.CKEditorError("editor-wrong-element",null);const i=new this(t,e);o(i.initPlugins().then((()=>i.ui.init())).then((()=>i.data.init(i.config.get("initialData")))).then((()=>i.fire("ready"))).then((()=>i)))}))}}function K(t){return F(t)}})(),(window.CKEditor5=window.CKEditor5||{}).editorBalloon=i})();
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,{BalloonEditor:()=>K});var t=o(704),e=o(273),r=o(209),n=o(492);class s extends e.EditorUI{constructor(t,e){super(t),this.view=e}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.fire("ready")}destroy(){super.destroy();const t=this.view;this.editor.editing.view.detachDomRoot(t.editable.name),t.destroy()}_initPlaceholder(){const t=this.editor,e=t.editing.view,o=e.document.getRoot(),i=(t.sourceElement,t.config.get("placeholder"));if(i){const t="string"==typeof i?i:i[o.rootName];t&&(0,n.enablePlaceholder)({view:e,element:o,text:t,isDirectHost:!1,keepOnFocus:!0})}}}class c extends e.EditorUIView{constructor(t,o,i){super(t);const r=t.t;this.editable=new e.InlineEditableUIView(t,o,i,{label:t=>r("Rich Text Editor. Editing area: %0",t.name)})}render(){super.render(),this.registerChild(this.editable)}}const l=function(t){return null!=t&&"object"==typeof t};const a="object"==typeof global&&global&&global.Object===Object&&global;var d="object"==typeof self&&self&&self.Object===Object&&self;const u=(a||d||Function("return this")()).Symbol;var h=Object.prototype,f=h.hasOwnProperty,g=h.toString,p=u?u.toStringTag:void 0;const b=function(t){var e=f.call(t,p),o=t[p];try{t[p]=void 0;var i=!0}catch(t){}var r=g.call(t);return i&&(e?t[p]=o:delete t[p]),r};var m=Object.prototype.toString;const v=function(t){return m.call(t)};var y="[object Null]",w="[object Undefined]",j=u?u.toStringTag:void 0;const E=function(t){return null==t?void 0===t?w:y:j&&j in Object(t)?b(t):v(t)};const O=function(t,e){return function(o){return t(e(o))}}(Object.getPrototypeOf,Object);var x="[object Object]",S=Function.prototype,P=Object.prototype,T=S.toString,D=P.hasOwnProperty,R=T.call(Object);const C=function(t){if(!l(t)||E(t)!=x)return!1;var e=O(t);if(null===e)return!0;var o=D.call(e,"constructor")&&e.constructor;return"function"==typeof o&&o instanceof o&&T.call(o)==R};const F=function(t){return l(t)&&1===t.nodeType&&!C(t)};class K extends((0,t.DataApiMixin)((0,t.ElementApiMixin)(t.Editor))){constructor(o,i={}){if(!A(o)&&void 0!==i.initialData)throw new r.CKEditorError("editor-create-initial-data",null);super(i),void 0===this.config.get("initialData")&&this.config.set("initialData",function(t){return A(t)?(0,r.getDataFromElement)(t):t}(o)),A(o)&&(this.sourceElement=o,(0,t.secureSourceElement)(this,o));const n=this.config.get("plugins");n.push(e.BalloonToolbar),this.config.set("plugins",n),this.config.define("balloonToolbar",this.config.get("toolbar")),this.model.document.createRoot();const l=new c(this.locale,this.editing.view,this.sourceElement);this.ui=new s(this,l),(0,t.attachToForm)(this)}destroy(){const t=this.getData();return this.ui.destroy(),super.destroy().then((()=>{this.sourceElement&&this.updateSourceElement(t)}))}static create(t,e={}){return new Promise((o=>{if(A(t)&&"TEXTAREA"===t.tagName)throw new r.CKEditorError("editor-wrong-element",null);const i=new this(t,e);o(i.initPlugins().then((()=>i.ui.init())).then((()=>i.data.init(i.config.get("initialData")))).then((()=>i.fire("ready"))).then((()=>i)))}))}}function A(t){return F(t)}})(),(window.CKEditor5=window.CKEditor5||{}).editorBalloon=i})();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ckeditor/ckeditor5-editor-balloon",
3
- "version": "36.0.1",
3
+ "version": "37.0.0-alpha.1",
4
4
  "description": "Balloon editor implementation for CKEditor 5.",
5
5
  "keywords": [
6
6
  "ckeditor",
@@ -11,23 +11,23 @@
11
11
  ],
12
12
  "main": "src/index.js",
13
13
  "dependencies": {
14
- "ckeditor5": "^36.0.1",
14
+ "ckeditor5": "^37.0.0-alpha.1",
15
15
  "lodash-es": "^4.17.15"
16
16
  },
17
17
  "devDependencies": {
18
- "@ckeditor/ckeditor5-basic-styles": "^36.0.1",
19
- "@ckeditor/ckeditor5-core": "^36.0.1",
20
- "@ckeditor/ckeditor5-dev-utils": "^32.0.0",
21
- "@ckeditor/ckeditor5-engine": "^36.0.1",
22
- "@ckeditor/ckeditor5-enter": "^36.0.1",
23
- "@ckeditor/ckeditor5-heading": "^36.0.1",
24
- "@ckeditor/ckeditor5-image": "^36.0.1",
25
- "@ckeditor/ckeditor5-paragraph": "^36.0.1",
26
- "@ckeditor/ckeditor5-theme-lark": "^36.0.1",
27
- "@ckeditor/ckeditor5-typing": "^36.0.1",
28
- "@ckeditor/ckeditor5-ui": "^36.0.1",
29
- "@ckeditor/ckeditor5-undo": "^36.0.1",
30
- "@ckeditor/ckeditor5-utils": "^36.0.1",
18
+ "@ckeditor/ckeditor5-basic-styles": "^37.0.0-alpha.1",
19
+ "@ckeditor/ckeditor5-core": "^37.0.0-alpha.1",
20
+ "@ckeditor/ckeditor5-dev-utils": "^35.0.0",
21
+ "@ckeditor/ckeditor5-engine": "^37.0.0-alpha.1",
22
+ "@ckeditor/ckeditor5-enter": "^37.0.0-alpha.1",
23
+ "@ckeditor/ckeditor5-heading": "^37.0.0-alpha.1",
24
+ "@ckeditor/ckeditor5-image": "^37.0.0-alpha.1",
25
+ "@ckeditor/ckeditor5-paragraph": "^37.0.0-alpha.1",
26
+ "@ckeditor/ckeditor5-theme-lark": "^37.0.0-alpha.1",
27
+ "@ckeditor/ckeditor5-typing": "^37.0.0-alpha.1",
28
+ "@ckeditor/ckeditor5-ui": "^37.0.0-alpha.1",
29
+ "@ckeditor/ckeditor5-undo": "^37.0.0-alpha.1",
30
+ "@ckeditor/ckeditor5-utils": "^37.0.0-alpha.1",
31
31
  "typescript": "^4.8.4",
32
32
  "webpack": "^5.58.1",
33
33
  "webpack-cli": "^4.9.0"
@@ -56,7 +56,8 @@
56
56
  ],
57
57
  "scripts": {
58
58
  "dll:build": "webpack",
59
- "build": "tsc -p ./tsconfig.release.json",
59
+ "build": "tsc -p ./tsconfig.json",
60
60
  "postversion": "npm run build"
61
- }
61
+ },
62
+ "types": "src/index.d.ts"
62
63
  }
@@ -0,0 +1,158 @@
1
+ /**
2
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
+ */
5
+ /**
6
+ * @module editor-balloon/ballooneditor
7
+ */
8
+ import { Editor, type EditorConfig } from 'ckeditor5/src/core';
9
+ import BalloonEditorUI from './ballooneditorui';
10
+ declare const BalloonEditor_base: import("ckeditor5/src/utils").Mixed<import("ckeditor5/src/utils").Mixed<typeof Editor, import("ckeditor5/src/core").ElementApi>, import("ckeditor5/src/core").DataApi>;
11
+ /**
12
+ * The {@glink installation/getting-started/predefined-builds#balloon-editor balloon editor}
13
+ * implementation (Medium-like editor).
14
+ * It uses an inline editable and a toolbar based on the {@link module:ui/toolbar/balloon/balloontoolbar~BalloonToolbar}.
15
+ * See the {@glink examples/builds/balloon-editor demo}.
16
+ *
17
+ * In order to create a balloon editor instance, use the static
18
+ * {@link module:editor-balloon/ballooneditor~BalloonEditor.create `BalloonEditor.create()`} method.
19
+ *
20
+ * # Balloon editor and balloon build
21
+ *
22
+ * The balloon editor can be used directly from source (if you installed the
23
+ * [`@ckeditor/ckeditor5-editor-balloon`](https://www.npmjs.com/package/@ckeditor/ckeditor5-editor-balloon) package)
24
+ * but it is also available in the {@glink installation/getting-started/predefined-builds#balloon-editor balloon build}.
25
+ *
26
+ * {@glink installation/getting-started/predefined-builds Builds}
27
+ * are ready-to-use editors with plugins bundled in. When using the editor from
28
+ * source you need to take care of loading all plugins by yourself
29
+ * (through the {@link module:core/editor/editorconfig~EditorConfig#plugins `config.plugins`} option).
30
+ * Using the editor from source gives much better flexibility and allows easier customization.
31
+ *
32
+ * Read more about initializing the editor from source or as a build in
33
+ * {@link module:editor-balloon/ballooneditor~BalloonEditor.create `BalloonEditor.create()`}.
34
+ */
35
+ export default class BalloonEditor extends BalloonEditor_base {
36
+ /**
37
+ * @inheritDoc
38
+ */
39
+ readonly ui: BalloonEditorUI;
40
+ /**
41
+ * Creates an instance of the balloon editor.
42
+ *
43
+ * **Note:** do not use the constructor to create editor instances. Use the static
44
+ * {@link module:editor-balloon/ballooneditor~BalloonEditor.create `BalloonEditor.create()`} method instead.
45
+ *
46
+ * @param sourceElementOrData The DOM element that will be the source for the created editor
47
+ * (on which the editor will be initialized) or initial data for the editor. For more information see
48
+ * {@link module:editor-balloon/ballooneditor~BalloonEditor.create `BalloonEditor.create()`}.
49
+ * @param config The editor configuration.
50
+ */
51
+ protected constructor(sourceElementOrData: HTMLElement | string, config?: EditorConfig);
52
+ /**
53
+ * Destroys the editor instance, releasing all resources used by it.
54
+ *
55
+ * Updates the original editor element with the data if the
56
+ * {@link module:core/editor/editorconfig~EditorConfig#updateSourceElementOnDestroy `updateSourceElementOnDestroy`}
57
+ * configuration option is set to `true`.
58
+ */
59
+ destroy(): Promise<unknown>;
60
+ /**
61
+ * Creates a new balloon editor instance.
62
+ *
63
+ * There are three general ways how the editor can be initialized.
64
+ *
65
+ * # Using an existing DOM element (and loading data from it)
66
+ *
67
+ * You can initialize the editor using an existing DOM element:
68
+ *
69
+ * ```ts
70
+ * BalloonEditor
71
+ * .create( document.querySelector( '#editor' ) )
72
+ * .then( editor => {
73
+ * console.log( 'Editor was initialized', editor );
74
+ * } )
75
+ * .catch( err => {
76
+ * console.error( err.stack );
77
+ * } );
78
+ * ```
79
+ *
80
+ * The element's content will be used as the editor data and the element will become the editable element.
81
+ *
82
+ * # Creating a detached editor
83
+ *
84
+ * Alternatively, you can initialize the editor by passing the initial data directly as a string.
85
+ * In this case, the editor will render an element that must be inserted into the DOM for the editor to work properly:
86
+ *
87
+ * ```ts
88
+ * BalloonEditor
89
+ * .create( '<p>Hello world!</p>' )
90
+ * .then( editor => {
91
+ * console.log( 'Editor was initialized', editor );
92
+ *
93
+ * // Initial data was provided so the editor UI element needs to be added manually to the DOM.
94
+ * document.body.appendChild( editor.ui.element );
95
+ * } )
96
+ * .catch( err => {
97
+ * console.error( err.stack );
98
+ * } );
99
+ * ```
100
+ *
101
+ * This lets you dynamically append the editor to your web page whenever it is convenient for you. You may use this method if your
102
+ * web page content is generated on the client side and the DOM structure is not ready at the moment when you initialize the editor.
103
+ *
104
+ * # Using an existing DOM element (and data provided in `config.initialData`)
105
+ *
106
+ * You can also mix these two ways by providing a DOM element to be used and passing the initial data through the configuration:
107
+ *
108
+ * ```ts
109
+ * BalloonEditor
110
+ * .create( document.querySelector( '#editor' ), {
111
+ * initialData: '<h2>Initial data</h2><p>Foo bar.</p>'
112
+ * } )
113
+ * .then( editor => {
114
+ * console.log( 'Editor was initialized', editor );
115
+ * } )
116
+ * .catch( err => {
117
+ * console.error( err.stack );
118
+ * } );
119
+ * ```
120
+ *
121
+ * This method can be used to initialize the editor on an existing element with the specified content in case if your integration
122
+ * makes it difficult to set the content of the source element.
123
+ *
124
+ * Note that an error will be thrown if you pass the initial data both as the first parameter and also in the configuration.
125
+ *
126
+ * # Configuring the editor
127
+ *
128
+ * See the {@link module:core/editor/editorconfig~EditorConfig editor configuration documentation} to learn more about
129
+ * customizing plugins, toolbar and more.
130
+ *
131
+ * # Using the editor from source
132
+ *
133
+ * The code samples listed in the previous sections of this documentation assume that you are using an
134
+ * {@glink installation/getting-started/predefined-builds editor build} (for example – `@ckeditor/ckeditor5-build-balloon`).
135
+ *
136
+ * If you want to use the balloon editor from source (`@ckeditor/ckeditor5-editor-balloon/src/ballooneditor`),
137
+ * you need to define the list of
138
+ * {@link module:core/editor/editorconfig~EditorConfig#plugins plugins to be initialized} and
139
+ * {@link module:core/editor/editorconfig~EditorConfig#toolbar toolbar items}. Read more about using the editor from
140
+ * source in the {@glink installation/advanced/alternative-setups/integrating-from-source-webpack dedicated guide}.
141
+ *
142
+ * @param sourceElementOrData The DOM element that will be the source for the created editor
143
+ * or the editor's initial data.
144
+ *
145
+ * If a DOM element is passed, its content will be automatically loaded to the editor upon initialization.
146
+ * The editor data will be set back to the original element once the editor is destroyed only if the
147
+ * {@link module:core/editor/editorconfig~EditorConfig#updateSourceElementOnDestroy updateSourceElementOnDestroy}
148
+ * option is set to `true`.
149
+ *
150
+ * If the initial data is passed, a detached editor will be created. In this case you need to insert it into the DOM manually.
151
+ * It is available under the {@link module:editor-balloon/ballooneditorui~BalloonEditorUI#element `editor.ui.element`} property.
152
+ *
153
+ * @param config The editor configuration.
154
+ * @returns A promise resolved once the editor is ready. The promise resolves with the created editor instance.
155
+ */
156
+ static create(sourceElementOrData: HTMLElement | string, config?: EditorConfig): Promise<BalloonEditor>;
157
+ }
158
+ export {};
@@ -60,7 +60,7 @@ export default class BalloonEditor extends DataApiMixin(ElementApiMixin(Editor))
60
60
  }
61
61
  if (isElement(sourceElementOrData)) {
62
62
  this.sourceElement = sourceElementOrData;
63
- secureSourceElement(this);
63
+ secureSourceElement(this, sourceElementOrData);
64
64
  }
65
65
  const plugins = this.config.get('plugins');
66
66
  plugins.push(BalloonToolbar);
@@ -170,7 +170,7 @@ export default class BalloonEditor extends DataApiMixin(ElementApiMixin(Editor))
170
170
  * you need to define the list of
171
171
  * {@link module:core/editor/editorconfig~EditorConfig#plugins plugins to be initialized} and
172
172
  * {@link module:core/editor/editorconfig~EditorConfig#toolbar toolbar items}. Read more about using the editor from
173
- * source in the {@glink installation/advanced/alternative-setups/integrating-from-source dedicated guide}.
173
+ * source in the {@glink installation/advanced/alternative-setups/integrating-from-source-webpack dedicated guide}.
174
174
  *
175
175
  * @param sourceElementOrData The DOM element that will be the source for the created editor
176
176
  * or the editor's initial data.
@@ -0,0 +1,42 @@
1
+ /**
2
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
+ */
5
+ /**
6
+ * @module editor-balloon/ballooneditorui
7
+ */
8
+ import { type Editor } from 'ckeditor5/src/core';
9
+ import { EditorUI } from 'ckeditor5/src/ui';
10
+ import type BalloonEditorUIView from './ballooneditoruiview';
11
+ /**
12
+ * The balloon editor UI class.
13
+ */
14
+ export default class BalloonEditorUI extends EditorUI {
15
+ /**
16
+ * The main (top–most) view of the editor UI.
17
+ */
18
+ readonly view: BalloonEditorUIView;
19
+ /**
20
+ * Creates an instance of the balloon editor UI class.
21
+ *
22
+ * @param editor The editor instance.
23
+ * @param view The view of the UI.
24
+ */
25
+ constructor(editor: Editor, view: BalloonEditorUIView);
26
+ /**
27
+ * @inheritDoc
28
+ */
29
+ get element(): HTMLElement | null;
30
+ /**
31
+ * Initializes the UI.
32
+ */
33
+ init(): void;
34
+ /**
35
+ * @inheritDoc
36
+ */
37
+ destroy(): void;
38
+ /**
39
+ * Enable the placeholder text on the editing root, if any was configured.
40
+ */
41
+ private _initPlaceholder;
42
+ }
@@ -75,16 +75,18 @@ export default class BalloonEditorUI extends EditorUI {
75
75
  const editingView = editor.editing.view;
76
76
  const editingRoot = editingView.document.getRoot();
77
77
  const sourceElement = editor.sourceElement;
78
- const placeholderText = editor.config.get('placeholder') ||
79
- sourceElement && sourceElement.tagName.toLowerCase() === 'textarea' && sourceElement.getAttribute('placeholder');
80
- if (placeholderText) {
81
- enablePlaceholder({
82
- view: editingView,
83
- element: editingRoot,
84
- text: placeholderText,
85
- isDirectHost: false,
86
- keepOnFocus: true
87
- });
78
+ const placeholder = editor.config.get('placeholder');
79
+ if (placeholder) {
80
+ const placeholderText = typeof placeholder === 'string' ? placeholder : placeholder[editingRoot.rootName];
81
+ if (placeholderText) {
82
+ enablePlaceholder({
83
+ view: editingView,
84
+ element: editingRoot,
85
+ text: placeholderText,
86
+ isDirectHost: false,
87
+ keepOnFocus: true
88
+ });
89
+ }
88
90
  }
89
91
  }
90
92
  }
@@ -0,0 +1,32 @@
1
+ /**
2
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
+ */
5
+ /**
6
+ * @module editor-balloon/ballooneditoruiview
7
+ */
8
+ import { EditorUIView, InlineEditableUIView } from 'ckeditor5/src/ui';
9
+ import type { Locale } from 'ckeditor5/src/utils';
10
+ import type { View } from 'ckeditor5/src/engine';
11
+ /**
12
+ * Contextual editor UI view. Uses the {@link module:ui/editableui/inline/inlineeditableuiview~InlineEditableUIView}.
13
+ */
14
+ export default class BalloonEditorUIView extends EditorUIView {
15
+ /**
16
+ * Editable UI view.
17
+ */
18
+ readonly editable: InlineEditableUIView;
19
+ /**
20
+ * Creates an instance of the balloon editor UI view.
21
+ *
22
+ * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
23
+ * @param editingView The editing view instance this view is related to.
24
+ * @param editableElement The editable element. If not specified, it will be automatically created by
25
+ * {@link module:ui/editableui/editableuiview~EditableUIView}. Otherwise, the given element will be used.
26
+ */
27
+ constructor(locale: Locale, editingView: View, editableElement?: HTMLElement);
28
+ /**
29
+ * @inheritDoc
30
+ */
31
+ render(): void;
32
+ }
package/src/index.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ /**
2
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
+ */
5
+ /**
6
+ * @module editor-balloon
7
+ */
8
+ export { default as BalloonEditor } from './ballooneditor';