@ckeditor/ckeditor5-editor-classic 36.0.1 → 37.0.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-editor-classic",
-  "version": "36.0.1",
+  "version": "37.0.0-alpha.0",
   "description": "Classic editor implementation for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -11,23 +11,23 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "ckeditor5": "^36.0.1",
+    "ckeditor5": "^37.0.0-alpha.0",
     "lodash-es": "^4.17.15"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^36.0.1",
-    "@ckeditor/ckeditor5-core": "^36.0.1",
-    "@ckeditor/ckeditor5-dev-utils": "^32.0.0",
-    "@ckeditor/ckeditor5-engine": "^36.0.1",
-    "@ckeditor/ckeditor5-enter": "^36.0.1",
-    "@ckeditor/ckeditor5-heading": "^36.0.1",
-    "@ckeditor/ckeditor5-image": "^36.0.1",
-    "@ckeditor/ckeditor5-paragraph": "^36.0.1",
-    "@ckeditor/ckeditor5-theme-lark": "^36.0.1",
-    "@ckeditor/ckeditor5-typing": "^36.0.1",
-    "@ckeditor/ckeditor5-ui": "^36.0.1",
-    "@ckeditor/ckeditor5-undo": "^36.0.1",
-    "@ckeditor/ckeditor5-utils": "^36.0.1",
+    "@ckeditor/ckeditor5-basic-styles": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-core": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-dev-utils": "^34.0.0",
+    "@ckeditor/ckeditor5-engine": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-enter": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-heading": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-image": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-paragraph": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-theme-lark": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-typing": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-ui": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-undo": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-utils": "^37.0.0-alpha.0",
     "typescript": "^4.8.4",
     "webpack": "^5.58.1",
     "webpack-cli": "^4.9.0"
@@ -58,5 +58,6 @@
     "dll:build": "webpack",
     "build": "tsc -p ./tsconfig.release.json",
     "postversion": "npm run build"
-  }
+  },
+  "types": "src/index.d.ts"
 }

package/src/classiceditor.d.ts

@@ -0,0 +1,161 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module editor-classic/classiceditor
+ */
+import ClassicEditorUI from './classiceditorui';
+import { Editor, type EditorConfig } from 'ckeditor5/src/core';
+declare const ClassicEditor_base: import("ckeditor5/src/utils").Mixed<import("ckeditor5/src/utils").Mixed<typeof Editor, import("ckeditor5/src/core").ElementApi>, import("ckeditor5/src/core").DataApi>;
+/**
+ * The {@glink installation/getting-started/predefined-builds#classic-editor classic editor} implementation.
+ * It uses an inline editable and a sticky toolbar, all enclosed in a boxed UI.
+ * See the {@glink examples/builds/classic-editor demo}.
+ *
+ * In order to create a classic editor instance, use the static
+ * {@link module:editor-classic/classiceditor~ClassicEditor.create `ClassicEditor.create()`} method.
+ *
+ * # Classic editor and classic build
+ *
+ * The classic editor can be used directly from source (if you installed the
+ * [`@ckeditor/ckeditor5-editor-classic`](https://www.npmjs.com/package/@ckeditor/ckeditor5-editor-classic) package)
+ * but it is also available in the {@glink installation/getting-started/predefined-builds#classic-editor classic build}.
+ *
+ * {@glink installation/getting-started/predefined-builds Builds}
+ * are ready-to-use editors with plugins bundled in. When using the editor from
+ * source you need to take care of loading all plugins by yourself
+ * (through the {@link module:core/editor/editorconfig~EditorConfig#plugins `config.plugins`} option).
+ * Using the editor from source gives much better flexibility and allows easier customization.
+ *
+ * Read more about initializing the editor from source or as a build in
+ * {@link module:editor-classic/classiceditor~ClassicEditor.create `ClassicEditor.create()`}.
+ */
+export default class ClassicEditor extends ClassicEditor_base {
+    /**
+     * @inheritDoc
+     */
+    readonly ui: ClassicEditorUI;
+    /**
+     * Creates an instance of the classic editor.
+     *
+     * **Note:** do not use the constructor to create editor instances. Use the static
+     * {@link module:editor-classic/classiceditor~ClassicEditor.create `ClassicEditor.create()`} method instead.
+     *
+     * @param sourceElementOrData The DOM element that will be the source for the created editor
+     * or the editor's initial data. For more information see
+     * {@link module:editor-classic/classiceditor~ClassicEditor.create `ClassicEditor.create()`}.
+     * @param config The editor configuration.
+     */
+    protected constructor(sourceElementOrData: HTMLElement | string, config?: EditorConfig);
+    /**
+     * Destroys the editor instance, releasing all resources used by it.
+     *
+     * Updates the original editor element with the data if the
+     * {@link module:core/editor/editorconfig~EditorConfig#updateSourceElementOnDestroy `updateSourceElementOnDestroy`}
+     * configuration option is set to `true`.
+     */
+    destroy(): Promise<unknown>;
+    /**
+     * Creates a new classic editor instance.
+     *
+     * There are three ways how the editor can be initialized.
+     *
+     * # Replacing a DOM element (and loading data from it)
+     *
+     * You can initialize the editor using an existing DOM element:
+     *
+     * ```ts
+     * ClassicEditor
+     * 	.create( document.querySelector( '#editor' ) )
+     * 	.then( editor => {
+     * 		console.log( 'Editor was initialized', editor );
+     * 	} )
+     * 	.catch( err => {
+     * 		console.error( err.stack );
+     * 	} );
+     * ```
+     *
+     * The element's content will be used as the editor data and the element will be replaced by the editor UI.
+     *
+     * # Creating a detached editor
+     *
+     * Alternatively, you can initialize the editor by passing the initial data directly as a string.
+     * In this case, the editor will render an element that must be inserted into the DOM:
+     *
+     * ```ts
+     * ClassicEditor
+     * 	.create( '<p>Hello world!</p>' )
+     * 	.then( editor => {
+     * 		console.log( 'Editor was initialized', editor );
+     *
+     * 		// Initial data was provided so the editor UI element needs to be added manually to the DOM.
+     * 		document.body.appendChild( editor.ui.element );
+     * 	} )
+     * 	.catch( err => {
+     * 		console.error( err.stack );
+     * 	} );
+     * ```
+     *
+     * This lets you dynamically append the editor to your web page whenever it is convenient for you. You may use this method if your
+     * web page content is generated on the client side and the DOM structure is not ready at the moment when you initialize the editor.
+     *
+     * # Replacing a DOM element (and data provided in `config.initialData`)
+     *
+     * You can also mix these two ways by providing a DOM element to be used and passing the initial data through the configuration:
+     *
+     * ```ts
+     * ClassicEditor
+     * 	.create( document.querySelector( '#editor' ), {
+     * 		initialData: '<h2>Initial data</h2><p>Foo bar.</p>'
+     * 	} )
+     * 	.then( editor => {
+     * 		console.log( 'Editor was initialized', editor );
+     * 	} )
+     * 	.catch( err => {
+     * 		console.error( err.stack );
+     * 	} );
+     * ```
+     *
+     * This method can be used to initialize the editor on an existing element with the specified content in case if your integration
+     * makes it difficult to set the content of the source element.
+     *
+     * Note that an error will be thrown if you pass the initial data both as the first parameter and also in the configuration.
+     *
+     * # Configuring the editor
+     *
+     * See the {@link module:core/editor/editorconfig~EditorConfig editor configuration documentation} to learn more about
+     * customizing plugins, toolbar and more.
+     *
+     * # Using the editor from source
+     *
+     * The code samples listed in the previous sections of this documentation assume that you are using an
+     * {@glink installation/getting-started/predefined-builds editor build} (for example – `@ckeditor/ckeditor5-build-classic`).
+     *
+     * If you want to use the classic editor from source (`@ckeditor/ckeditor5-editor-classic/src/classiceditor`),
+     * you need to define the list of
+     * {@link module:core/editor/editorconfig~EditorConfig#plugins plugins to be initialized} and
+     * {@link module:core/editor/editorconfig~EditorConfig#toolbar toolbar items}. Read more about using the editor from
+     * source in the {@glink installation/advanced/alternative-setups/integrating-from-source-webpack dedicated guide}.
+     *
+     * @param sourceElementOrData The DOM element that will be the source for the created editor
+     * or the editor's initial data.
+     *
+     * If a DOM element is passed, its content will be automatically loaded to the editor upon initialization
+     * and the {@link module:editor-classic/classiceditorui~ClassicEditorUI#element editor element} will replace the passed element
+     * in the DOM (the original one will be hidden and the editor will be injected next to it).
+     *
+     * If the {@link module:core/editor/editorconfig~EditorConfig#updateSourceElementOnDestroy updateSourceElementOnDestroy}
+     * option is set to `true`, the editor data will be set back to the original element once the editor is destroyed and when a form,
+     * in which this element is contained, is submitted (if the original element is a `<textarea>`). This ensures seamless integration
+     * with native web forms.
+     *
+     * If the initial data is passed, a detached editor will be created. In this case you need to insert it into the DOM manually.
+     * It is available under the {@link module:editor-classic/classiceditorui~ClassicEditorUI#element `editor.ui.element`} property.
+     *
+     * @param config The editor configuration.
+     * @returns A promise resolved once the editor is ready. The promise resolves with the created editor instance.
+     */
+    static create(sourceElementOrData: HTMLElement | string, config?: EditorConfig): Promise<ClassicEditor>;
+}
+export {};

package/src/classiceditor.js

@@ -161,7 +161,7 @@ export default class ClassicEditor extends DataApiMixin(ElementApiMixin(Editor))
      * you need to define the list of
      * {@link module:core/editor/editorconfig~EditorConfig#plugins plugins to be initialized} and
      * {@link module:core/editor/editorconfig~EditorConfig#toolbar toolbar items}. Read more about using the editor from
-     * source in the {@glink installation/advanced/alternative-setups/integrating-from-source dedicated guide}.
+     * source in the {@glink installation/advanced/alternative-setups/integrating-from-source-webpack dedicated guide}.
      *
      * @param sourceElementOrData The DOM element that will be the source for the created editor
      * or the editor's initial data.

package/src/classiceditorui.d.ts

@@ -0,0 +1,56 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module editor-classic/classiceditorui
+ */
+import type { Editor } from 'ckeditor5/src/core';
+import { EditorUI } from 'ckeditor5/src/ui';
+import type ClassicEditorUIView from './classiceditoruiview';
+/**
+ * The classic editor UI class.
+ */
+export default class ClassicEditorUI extends EditorUI {
+    /**
+     * The main (top–most) view of the editor UI.
+     */
+    readonly view: ClassicEditorUIView;
+    /**
+     * A normalized `config.toolbar` object.
+     */
+    private readonly _toolbarConfig;
+    /**
+     * The element replacer instance used to hide the editor's source element.
+     */
+    private readonly _elementReplacer;
+    /**
+     * Creates an instance of the classic editor UI class.
+     *
+     * @param editor The editor instance.
+     * @param view The view of the UI.
+     */
+    constructor(editor: Editor, view: ClassicEditorUIView);
+    /**
+     * @inheritDoc
+     */
+    get element(): HTMLElement | null;
+    /**
+     * Initializes the UI.
+     *
+     * @param replacementElement The DOM element that will be the source for the created editor.
+     */
+    init(replacementElement: HTMLElement | null): void;
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
+    /**
+     * Initializes the editor toolbar.
+     */
+    private _initToolbar;
+    /**
+     * Enable the placeholder text on the editing root, if any was configured.
+     */
+    private _initPlaceholder;
+}

package/src/classiceditoruiview.d.ts

@@ -0,0 +1,47 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module editor-classic/classiceditoruiview
+ */
+import { BoxedEditorUIView, InlineEditableUIView, StickyPanelView, ToolbarView } from 'ckeditor5/src/ui';
+import type { Locale } from 'ckeditor5/src/utils';
+import type { View } from 'ckeditor5/src/engine';
+import '../theme/classiceditor.css';
+/**
+ * Classic editor UI view. Uses an inline editable and a sticky toolbar, all
+ * enclosed in a boxed UI view.
+ */
+export default class ClassicEditorUIView extends BoxedEditorUIView {
+    /**
+     * Sticky panel view instance. This is a parent view of a {@link #toolbar}
+     * that makes toolbar sticky.
+     */
+    readonly stickyPanel: StickyPanelView;
+    /**
+     * Toolbar view instance.
+     */
+    readonly toolbar: ToolbarView;
+    /**
+     * Editable UI view.
+     */
+    readonly editable: InlineEditableUIView;
+    /**
+     * Creates an instance of the classic editor UI view.
+     *
+     * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
+     * @param editingView The editing view instance this view is related to.
+     * @param options Configuration options for the view instance.
+     * @param options.shouldToolbarGroupWhenFull When set `true` enables automatic items grouping
+     * in the main {@link module:editor-classic/classiceditoruiview~ClassicEditorUIView#toolbar toolbar}.
+     * See {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull} to learn more.
+     */
+    constructor(locale: Locale, editingView: View, options?: {
+        shouldToolbarGroupWhenFull?: boolean;
+    });
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+}

package/src/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module editor-classic
+ */
+export { default as ClassicEditor } from './classiceditor';