@ckeditor/ckeditor5-editor-inline 38.1.1 → 38.2.0-alpha.1

Sign up to get free protection for your applications and to get access to all the features.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ckeditor/ckeditor5-editor-inline",
3
- "version": "38.1.1",
3
+ "version": "38.2.0-alpha.1",
4
4
  "description": "Inline editor implementation for CKEditor 5.",
5
5
  "keywords": [
6
6
  "ckeditor",
@@ -10,8 +10,9 @@
10
10
  "ckeditor5-dll"
11
11
  ],
12
12
  "main": "src/index.js",
13
+ "type": "module",
13
14
  "dependencies": {
14
- "ckeditor5": "38.1.1",
15
+ "ckeditor5": "38.2.0-alpha.1",
15
16
  "lodash-es": "^4.17.15"
16
17
  },
17
18
  "engines": {
package/src/index.d.ts CHANGED
@@ -1,8 +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-inline
7
- */
8
- export { default as InlineEditor } from './inlineeditor';
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-inline
7
+ */
8
+ export { default as InlineEditor } from './inlineeditor.js';
package/src/index.js CHANGED
@@ -1,8 +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-inline
7
- */
8
- export { default as InlineEditor } from './inlineeditor';
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-inline
7
+ */
8
+ export { default as InlineEditor } from './inlineeditor.js';
@@ -1,176 +1,176 @@
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-inline/inlineeditor
7
- */
8
- import { Editor, Context, type EditorConfig } from 'ckeditor5/src/core';
9
- import { ContextWatchdog, EditorWatchdog } from 'ckeditor5/src/watchdog';
10
- import InlineEditorUI from './inlineeditorui';
11
- declare const InlineEditor_base: import("ckeditor5/src/utils").Mixed<import("ckeditor5/src/utils").Mixed<typeof Editor, import("ckeditor5/src/core").ElementApi>, import("ckeditor5/src/core").DataApi>;
12
- /**
13
- * The {@glink installation/getting-started/predefined-builds#inline-editor inline editor} implementation.
14
- * It uses an inline editable and a floating toolbar.
15
- * See the {@glink examples/builds/inline-editor demo}.
16
- *
17
- * In order to create a inline editor instance, use the static
18
- * {@link module:editor-inline/inlineeditor~InlineEditor.create `InlineEditor.create()`} method.
19
- *
20
- * # Inline editor and inline build
21
- *
22
- * The inline editor can be used directly from source (if you installed the
23
- * [`@ckeditor/ckeditor5-editor-inline`](https://www.npmjs.com/package/@ckeditor/ckeditor5-editor-inline) package)
24
- * but it is also available in the {@glink installation/getting-started/predefined-builds#inline-editor inline 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-inline/inlineeditor~InlineEditor.create `InlineEditor.create()`}.
34
- */
35
- export default class InlineEditor extends InlineEditor_base {
36
- /**
37
- * @inheritDoc
38
- */
39
- readonly ui: InlineEditorUI;
40
- /**
41
- * Creates an instance of the inline editor.
42
- *
43
- * **Note:** Do not use the constructor to create editor instances. Use the static
44
- * {@link module:editor-inline/inlineeditor~InlineEditor.create `InlineEditor.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-inline/inlineeditor~InlineEditor.create `InlineEditor.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 inline 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
- * InlineEditor
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
- * InlineEditor
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
- * InlineEditor
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-inline`).
135
- *
136
- * If you want to use the inline editor from source (`@ckeditor/ckeditor5-editor-inline/src/inlineeditor`),
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-inline/inlineeditorui~InlineEditorUI#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<InlineEditor>;
157
- /**
158
- * The {@link module:core/context~Context} class.
159
- *
160
- * Exposed as static editor field for easier access in editor builds.
161
- */
162
- static Context: typeof Context;
163
- /**
164
- * The {@link module:watchdog/editorwatchdog~EditorWatchdog} class.
165
- *
166
- * Exposed as static editor field for easier access in editor builds.
167
- */
168
- static EditorWatchdog: typeof EditorWatchdog;
169
- /**
170
- * The {@link module:watchdog/contextwatchdog~ContextWatchdog} class.
171
- *
172
- * Exposed as static editor field for easier access in editor builds.
173
- */
174
- static ContextWatchdog: typeof ContextWatchdog;
175
- }
176
- export {};
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-inline/inlineeditor
7
+ */
8
+ import { Editor, Context, type EditorConfig } from 'ckeditor5/src/core.js';
9
+ import { ContextWatchdog, EditorWatchdog } from 'ckeditor5/src/watchdog.js';
10
+ import InlineEditorUI from './inlineeditorui.js';
11
+ declare const InlineEditor_base: import("ckeditor5/src/utils.js").Mixed<import("ckeditor5/src/utils.js").Mixed<typeof Editor, import("ckeditor5/src/core.js").ElementApi>, import("ckeditor5/src/core.js").DataApi>;
12
+ /**
13
+ * The {@glink installation/getting-started/predefined-builds#inline-editor inline editor} implementation.
14
+ * It uses an inline editable and a floating toolbar.
15
+ * See the {@glink examples/builds/inline-editor demo}.
16
+ *
17
+ * In order to create a inline editor instance, use the static
18
+ * {@link module:editor-inline/inlineeditor~InlineEditor.create `InlineEditor.create()`} method.
19
+ *
20
+ * # Inline editor and inline build
21
+ *
22
+ * The inline editor can be used directly from source (if you installed the
23
+ * [`@ckeditor/ckeditor5-editor-inline`](https://www.npmjs.com/package/@ckeditor/ckeditor5-editor-inline) package)
24
+ * but it is also available in the {@glink installation/getting-started/predefined-builds#inline-editor inline 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-inline/inlineeditor~InlineEditor.create `InlineEditor.create()`}.
34
+ */
35
+ export default class InlineEditor extends InlineEditor_base {
36
+ /**
37
+ * @inheritDoc
38
+ */
39
+ readonly ui: InlineEditorUI;
40
+ /**
41
+ * Creates an instance of the inline editor.
42
+ *
43
+ * **Note:** Do not use the constructor to create editor instances. Use the static
44
+ * {@link module:editor-inline/inlineeditor~InlineEditor.create `InlineEditor.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-inline/inlineeditor~InlineEditor.create `InlineEditor.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 inline 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
+ * InlineEditor
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
+ * InlineEditor
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
+ * InlineEditor
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-inline`).
135
+ *
136
+ * If you want to use the inline editor from source (`@ckeditor/ckeditor5-editor-inline/src/inlineeditor`),
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-inline/inlineeditorui~InlineEditorUI#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<InlineEditor>;
157
+ /**
158
+ * The {@link module:core/context~Context} class.
159
+ *
160
+ * Exposed as static editor field for easier access in editor builds.
161
+ */
162
+ static Context: typeof Context;
163
+ /**
164
+ * The {@link module:watchdog/editorwatchdog~EditorWatchdog} class.
165
+ *
166
+ * Exposed as static editor field for easier access in editor builds.
167
+ */
168
+ static EditorWatchdog: typeof EditorWatchdog;
169
+ /**
170
+ * The {@link module:watchdog/contextwatchdog~ContextWatchdog} class.
171
+ *
172
+ * Exposed as static editor field for easier access in editor builds.
173
+ */
174
+ static ContextWatchdog: typeof ContextWatchdog;
175
+ }
176
+ export {};