@ckeditor/ckeditor5-widget 36.0.1 → 37.0.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-widget",
-  "version": "36.0.1",
+  "version": "37.0.0-alpha.0",
   "description": "Widget API for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -11,29 +11,29 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "^36.0.1",
-    "@ckeditor/ckeditor5-engine": "^36.0.1",
-    "@ckeditor/ckeditor5-enter": "^36.0.1",
-    "@ckeditor/ckeditor5-ui": "^36.0.1",
-    "@ckeditor/ckeditor5-utils": "^36.0.1",
-    "@ckeditor/ckeditor5-typing": "^36.0.1",
+    "@ckeditor/ckeditor5-core": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-engine": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-enter": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-ui": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-utils": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-typing": "^37.0.0-alpha.0",
     "lodash-es": "^4.17.15"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^36.0.1",
-    "@ckeditor/ckeditor5-block-quote": "^36.0.1",
-    "@ckeditor/ckeditor5-clipboard": "^36.0.1",
-    "@ckeditor/ckeditor5-editor-balloon": "^36.0.1",
-    "@ckeditor/ckeditor5-editor-classic": "^36.0.1",
-    "@ckeditor/ckeditor5-essentials": "^36.0.1",
-    "@ckeditor/ckeditor5-heading": "^36.0.1",
-    "@ckeditor/ckeditor5-horizontal-line": "^36.0.1",
-    "@ckeditor/ckeditor5-image": "^36.0.1",
-    "@ckeditor/ckeditor5-link": "^36.0.1",
-    "@ckeditor/ckeditor5-media-embed": "^36.0.1",
-    "@ckeditor/ckeditor5-paragraph": "^36.0.1",
-    "@ckeditor/ckeditor5-table": "^36.0.1",
-    "@ckeditor/ckeditor5-undo": "^36.0.1",
+    "@ckeditor/ckeditor5-basic-styles": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-block-quote": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-clipboard": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-editor-balloon": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-editor-classic": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-essentials": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-heading": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-horizontal-line": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-image": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-link": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-media-embed": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-paragraph": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-table": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-undo": "^37.0.0-alpha.0",
     "typescript": "^4.8.4",
     "webpack": "^5.58.1",
     "webpack-cli": "^4.9.0"
@@ -62,5 +62,6 @@
   "scripts": {
     "build": "tsc -p ./tsconfig.release.json",
     "postversion": "npm run build"
-  }
+  },
+  "types": "src/index.d.ts"
 }

package/src/highlightstack.d.ts

@@ -0,0 +1,74 @@
+/**
+ * @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
+ */
+import type { DowncastWriter, HighlightDescriptor } from '@ckeditor/ckeditor5-engine';
+declare const HighlightStack_base: {
+    new (): import("@ckeditor/ckeditor5-utils").Emitter;
+    prototype: import("@ckeditor/ckeditor5-utils").Emitter;
+};
+/**
+ * Class used to handle the correct order of highlights on elements.
+ *
+ * When different highlights are applied to same element the correct order should be preserved:
+ *
+ * * highlight with highest priority should be applied,
+ * * if two highlights have same priority - sort by CSS class provided in
+ * {@link module:engine/conversion/downcasthelpers~HighlightDescriptor}.
+ *
+ * This way, highlight will be applied with the same rules it is applied on texts.
+ */
+export default class HighlightStack extends HighlightStack_base {
+    private readonly _stack;
+    /**
+     * Adds highlight descriptor to the stack.
+     *
+     * @fires change:top
+     */
+    add(descriptor: HighlightDescriptor, writer: DowncastWriter): void;
+    /**
+     * Removes highlight descriptor from the stack.
+     *
+     * @fires change:top
+     * @param id Id of the descriptor to remove.
+     */
+    remove(id: string, writer: DowncastWriter): void;
+    /**
+     * Inserts a given descriptor in correct place in the stack. It also takes care about updating information
+     * when descriptor with same id is already present.
+     */
+    private _insertDescriptor;
+    /**
+     * Removes descriptor with given id from the stack.
+     *
+     * @param id Descriptor's id.
+     */
+    private _removeDescriptor;
+}
+/**
+ * Fired when top element on {@link module:widget/highlightstack~HighlightStack} has been changed
+ *
+ * @eventName change:top
+ */
+export type HighlightStackChangeEvent = {
+    name: 'change' | 'change:top';
+    args: [HighlightStackChangeEventData];
+};
+/**
+ * Additional information about the change.
+ */
+export type HighlightStackChangeEventData = {
+    /**
+     * Old highlight descriptor. It will be `undefined` when first descriptor is added to the stack.
+     */
+    oldDescriptor: HighlightDescriptor;
+    /**
+     * New highlight descriptor. It will be `undefined` when last descriptor is removed from the stack.
+     */
+    newDescriptor: HighlightDescriptor;
+    /**
+     * View writer that can be used to modify element.
+     */
+    writer: DowncastWriter;
+};
+export {};

package/src/highlightstack.js

@@ -18,19 +18,14 @@ import { EmitterMixin } from '@ckeditor/ckeditor5-utils';
  * This way, highlight will be applied with the same rules it is applied on texts.
  */
 export default class HighlightStack extends EmitterMixin() {
-    /**
-     * Creates class instance.
-     */
     constructor() {
-        super();
+        super(...arguments);
         this._stack = [];
     }
     /**
      * Adds highlight descriptor to the stack.
      *
      * @fires change:top
-     * @param {module:engine/conversion/downcasthelpers~HighlightDescriptor} descriptor
-     * @param {module:engine/view/downcastwriter~DowncastWriter} writer
      */
     add(descriptor, writer) {
         const stack = this._stack;
@@ -51,8 +46,7 @@ export default class HighlightStack extends EmitterMixin() {
      * Removes highlight descriptor from the stack.
      *
      * @fires change:top
-     * @param {String} id Id of the descriptor to remove.
-     * @param {module:engine/view/downcastwriter~DowncastWriter} writer
+     * @param id Id of the descriptor to remove.
      */
     remove(id, writer) {
         const stack = this._stack;
@@ -71,9 +65,6 @@ export default class HighlightStack extends EmitterMixin() {
     /**
      * Inserts a given descriptor in correct place in the stack. It also takes care about updating information
      * when descriptor with same id is already present.
-     *
-     * @private
-     * @param {module:engine/conversion/downcasthelpers~HighlightDescriptor} descriptor
      */
     _insertDescriptor(descriptor) {
         const stack = this._stack;
@@ -97,8 +88,7 @@ export default class HighlightStack extends EmitterMixin() {
     /**
      * Removes descriptor with given id from the stack.
      *
-     * @private
-     * @param {String} id Descriptor's id.
+     * @param id Descriptor's id.
      */
     _removeDescriptor(id) {
         const stack = this._stack;
@@ -109,19 +99,17 @@ export default class HighlightStack extends EmitterMixin() {
         }
     }
 }
-// Compares two descriptors by checking their priority and class list.
-//
-// @param {module:engine/conversion/downcasthelpers~HighlightDescriptor} a
-// @param {module:engine/conversion/downcasthelpers~HighlightDescriptor} b
-// @returns {Boolean} Returns true if both descriptors are defined and have same priority and classes.
+/**
+ * Compares two descriptors by checking their priority and class list.
+ *
+ * @returns Returns true if both descriptors are defined and have same priority and classes.
+ */
 function compareDescriptors(a, b) {
     return a && b && a.priority == b.priority && classesToString(a.classes) == classesToString(b.classes);
 }
-// Checks whenever first descriptor should be placed in the stack before second one.
-//
-// @param {module:engine/conversion/downcasthelpers~HighlightDescriptor} a
-// @param {module:engine/conversion/downcasthelpers~HighlightDescriptor} b
-// @returns {Boolean}
+/**
+ * Checks whenever first descriptor should be placed in the stack before second one.
+ */
 function shouldABeBeforeB(a, b) {
     if (a.priority > b.priority) {
         return true;
@@ -132,11 +120,10 @@ function shouldABeBeforeB(a, b) {
     // When priorities are equal and names are different - use classes to compare.
     return classesToString(a.classes) > classesToString(b.classes);
 }
-// Converts CSS classes passed with {@link module:engine/conversion/downcasthelpers~HighlightDescriptor} to
-// sorted string.
-//
-// @param {String|Array<String>} descriptor
-// @returns {String}
+/**
+ * Converts CSS classes passed with {@link module:engine/conversion/downcasthelpers~HighlightDescriptor} to
+ * sorted string.
+ */
 function classesToString(classes) {
     return Array.isArray(classes) ? classes.sort().join(',') : classes;
 }

package/src/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @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
+ */
+export { default as Widget } from './widget';
+export { default as WidgetToolbarRepository } from './widgettoolbarrepository';
+export { default as WidgetResize } from './widgetresize';
+export { default as WidgetTypeAround } from './widgettypearound/widgettypearound';
+export * from './utils';

package/src/utils.d.ts

@@ -0,0 +1,198 @@
+/**
+ * @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 widget/utils
+ */
+import { type GetCallback } from '@ckeditor/ckeditor5-utils';
+import { type HighlightDescriptor, type MapperViewToModelPositionEvent, type DocumentSelection, type DowncastWriter, type Model, type Range, type Selection, type ViewEditableElement, type ViewElement, type ViewTypeCheckable } from '@ckeditor/ckeditor5-engine';
+/**
+ * CSS class added to each widget element.
+ */
+export declare const WIDGET_CLASS_NAME = "ck-widget";
+/**
+ * CSS class added to currently selected widget element.
+ */
+export declare const WIDGET_SELECTED_CLASS_NAME = "ck-widget_selected";
+/**
+ * Returns `true` if given {@link module:engine/view/node~Node} is an {@link module:engine/view/element~Element} and a widget.
+ */
+export declare function isWidget(node: ViewTypeCheckable): boolean;
+/**
+ * Converts the given {@link module:engine/view/element~Element} to a widget in the following way:
+ *
+ * * sets the `contenteditable` attribute to `"false"`,
+ * * adds the `ck-widget` CSS class,
+ * * adds a custom {@link module:engine/view/element~Element#getFillerOffset `getFillerOffset()`} method returning `null`,
+ * * adds a custom property allowing to recognize widget elements by using {@link ~isWidget `isWidget()`},
+ * * implements the {@link ~setHighlightHandling view highlight on widgets}.
+ *
+ * This function needs to be used in conjunction with
+ * {@link module:engine/conversion/downcasthelpers~DowncastHelpers downcast conversion helpers}
+ * like {@link module:engine/conversion/downcasthelpers~DowncastHelpers#elementToElement `elementToElement()`}.
+ * Moreover, typically you will want to use `toWidget()` only for `editingDowncast`, while keeping the `dataDowncast` clean.
+ *
+ * For example, in order to convert a `<widget>` model element to `<div class="widget">` in the view, you can define
+ * such converters:
+ *
+ * ```ts
+ * editor.conversion.for( 'editingDowncast' )
+ * 	.elementToElement( {
+ * 		model: 'widget',
+ * 		view: ( modelItem, { writer } ) => {
+ * 			const div = writer.createContainerElement( 'div', { class: 'widget' } );
+ *
+ * 			return toWidget( div, writer, { label: 'some widget' } );
+ * 		}
+ * 	} );
+ *
+ * editor.conversion.for( 'dataDowncast' )
+ * 	.elementToElement( {
+ * 		model: 'widget',
+ * 		view: ( modelItem, { writer } ) => {
+ * 			return writer.createContainerElement( 'div', { class: 'widget' } );
+ * 		}
+ * 	} );
+ * ```
+ *
+ * See the full source code of the widget (with a nested editable) schema definition and converters in
+ * [this sample](https://github.com/ckeditor/ckeditor5-widget/blob/master/tests/manual/widget-with-nestededitable.js).
+ *
+ * @param options Additional options.
+ * @param options.label Element's label provided to the {@link ~setLabel} function. It can be passed as
+ * a plain string or a function returning a string. It represents the widget for assistive technologies (like screen readers).
+ * @param options.hasSelectionHandle If `true`, the widget will have a selection handle added.
+ * @returns Returns the same element.
+ */
+export declare function toWidget(element: ViewElement, writer: DowncastWriter, options?: {
+    label?: string | (() => string);
+    hasSelectionHandle?: boolean;
+}): ViewElement;
+/**
+ * Sets highlight handling methods. Uses {@link module:widget/highlightstack~HighlightStack} to
+ * properly determine which highlight descriptor should be used at given time.
+ */
+export declare function setHighlightHandling(element: ViewElement, writer: DowncastWriter, add?: (element: ViewElement, descriptor: HighlightDescriptor, writer: DowncastWriter) => void, remove?: (element: ViewElement, descriptor: HighlightDescriptor, writer: DowncastWriter) => void): void;
+/**
+ * Sets label for given element.
+ * It can be passed as a plain string or a function returning a string. Function will be called each time label is retrieved by
+ * {@link ~getLabel `getLabel()`}.
+ */
+export declare function setLabel(element: ViewElement, labelOrCreator: string | (() => string)): void;
+/**
+ * Returns the label of the provided element.
+ */
+export declare function getLabel(element: ViewElement): string;
+/**
+ * Adds functionality to the provided {@link module:engine/view/editableelement~EditableElement} to act as a widget's editable:
+ *
+ * * sets the `contenteditable` attribute to `true` when {@link module:engine/view/editableelement~EditableElement#isReadOnly} is `false`,
+ * otherwise sets it to `false`,
+ * * adds the `ck-editor__editable` and `ck-editor__nested-editable` CSS classes,
+ * * adds the `ck-editor__nested-editable_focused` CSS class when the editable is focused and removes it when it is blurred.
+ * * implements the {@link ~setHighlightHandling view highlight on widget's editable}.
+ *
+ * Similarly to {@link ~toWidget `toWidget()`} this function should be used in `editingDowncast` only and it is usually
+ * used together with {@link module:engine/conversion/downcasthelpers~DowncastHelpers#elementToElement `elementToElement()`}.
+ *
+ * For example, in order to convert a `<nested>` model element to `<div class="nested">` in the view, you can define
+ * such converters:
+ *
+ * ```ts
+ * editor.conversion.for( 'editingDowncast' )
+ * 	.elementToElement( {
+ * 		model: 'nested',
+ * 		view: ( modelItem, { writer } ) => {
+ * 			const div = writer.createEditableElement( 'div', { class: 'nested' } );
+ *
+ * 			return toWidgetEditable( nested, writer, { label: 'label for editable' } );
+ * 		}
+ * 	} );
+ *
+ * editor.conversion.for( 'dataDowncast' )
+ * 	.elementToElement( {
+ * 		model: 'nested',
+ * 		view: ( modelItem, { writer } ) => {
+ * 			return writer.createContainerElement( 'div', { class: 'nested' } );
+ * 		}
+ * 	} );
+ * ```
+ *
+ * See the full source code of the widget (with nested editable) schema definition and converters in
+ * [this sample](https://github.com/ckeditor/ckeditor5-widget/blob/master/tests/manual/widget-with-nestededitable.js).
+ *
+ * @param options Additional options.
+ * @param options.label Editable's label used by assistive technologies (e.g. screen readers).
+ * @returns Returns the same element that was provided in the `editable` parameter
+ */
+export declare function toWidgetEditable(editable: ViewEditableElement, writer: DowncastWriter, options?: {
+    label?: string;
+}): ViewEditableElement;
+/**
+ * Returns a model range which is optimal (in terms of UX) for inserting a widget block.
+ *
+ * For instance, if a selection is in the middle of a paragraph, the collapsed range before this paragraph
+ * will be returned so that it is not split. If the selection is at the end of a paragraph,
+ * the collapsed range after this paragraph will be returned.
+ *
+ * Note: If the selection is placed in an empty block, the range in that block will be returned. If that range
+ * is then passed to {@link module:engine/model/model~Model#insertContent}, the block will be fully replaced
+ * by the inserted widget block.
+ *
+ * @param selection The selection based on which the insertion position should be calculated.
+ * @param model Model instance.
+ * @returns The optimal range.
+ */
+export declare function findOptimalInsertionRange(selection: Selection | DocumentSelection, model: Model): Range;
+/**
+ * A util to be used in order to map view positions to correct model positions when implementing a widget
+ * which renders non-empty view element for an empty model element.
+ *
+ * For example:
+ *
+ * ```
+ * // Model:
+ * <placeholder type="name"></placeholder>
+ *
+ * // View:
+ * <span class="placeholder">name</span>
+ * ```
+ *
+ * In such case, view positions inside `<span>` cannot be correctly mapped to the model (because the model element is empty).
+ * To handle mapping positions inside `<span class="placeholder">` to the model use this util as follows:
+ *
+ * ```ts
+ * editor.editing.mapper.on(
+ * 	'viewToModelPosition',
+ * 	viewToModelPositionOutsideModelElement( model, viewElement => viewElement.hasClass( 'placeholder' ) )
+ * );
+ * ```
+ *
+ * The callback will try to map the view offset of selection to an expected model position.
+ *
+ * 1. When the position is at the end (or in the middle) of the inline widget:
+ *
+ * ```
+ * // View:
+ * <p>foo <span class="placeholder">name|</span> bar</p>
+ *
+ * // Model:
+ * <paragraph>foo <placeholder type="name"></placeholder>| bar</paragraph>
+ * ```
+ *
+ * 2. When the position is at the beginning of the inline widget:
+ *
+ * ```
+ * // View:
+ * <p>foo <span class="placeholder">|name</span> bar</p>
+ *
+ * // Model:
+ * <paragraph>foo |<placeholder type="name"></placeholder> bar</paragraph>
+ * ```
+ *
+ * @param model Model instance on which the callback operates.
+ * @param viewElementMatcher Function that is passed a view element and should return `true` if the custom mapping
+ * should be applied to the given view element.
+ */
+export declare function viewToModelPositionOutsideModelElement(model: Model, viewElementMatcher: (element: ViewElement) => boolean): GetCallback<MapperViewToModelPositionEvent>;