@ckeditor/ckeditor5-bookmark 44.3.0 → 45.0.0-alpha.0

package/src/bookmarkconfig.d.ts

@@ -45,4 +45,28 @@ export interface BookmarkConfig {
      * @default true
      */
     enableNonEmptyAnchorConversion?: boolean;
+    /**
+     * Items to be placed in the bookmark contextual toolbar.
+     *
+     * Assuming that you use the {@link module:bookmark/bookmarkui~BookmarkUI} feature, the following toolbar items will be available
+     * in {@link module:ui/componentfactory~ComponentFactory}:
+     *
+     * * `'bookmarkPreview'`,
+     * * `'editBookmark'`,
+     * * `'removeBookmark'`.
+     *
+     * The default configuration for bookmark toolbar is:
+     *
+     * ```ts
+     * const bookmarkConfig = {
+     * 	toolbar: [ 'bookmarkPreview', '|', 'editBookmark', 'removeBookmark' ]
+     * };
+     * ```
+     *
+     * Of course, the same buttons can also be used in the
+     * {@link module:core/editor/editorconfig~EditorConfig#toolbar main editor toolbar}.
+     *
+     * Read more about configuring the toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
+     */
+    toolbar?: Array<string>;
 }

package/src/bookmarkediting.d.ts

@@ -5,7 +5,7 @@
 /**
  * @module bookmark/bookmarkediting
  */
-import { Plugin } from 'ckeditor5/src/core.js';
+import { type Editor, Plugin } from 'ckeditor5/src/core.js';
 import type { Element } from 'ckeditor5/src/engine.js';
 import '../theme/bookmark.css';
 /**
@@ -24,6 +24,10 @@ export default class BookmarkEditing extends Plugin {
      * @inheritDoc
      */
     static get isOfficialPlugin(): true;
+    /**
+     * @inheritDoc
+     */
+    constructor(editor: Editor);
     /**
      * @inheritDoc
      */
@@ -32,6 +36,10 @@ export default class BookmarkEditing extends Plugin {
      * Returns the model element for the given bookmark ID if it exists.
      */
     getElementForBookmarkId(bookmarkId: string): Element | null;
+    /**
+     * Returns all unique bookmark names existing in the content.
+     */
+    getAllBookmarkNames(): Set<string>;
     /**
      * Defines the schema for the bookmark feature.
      */

package/src/bookmarkediting.js

@@ -5,9 +5,10 @@
 /**
  * @module bookmark/bookmarkediting
  */
-import { Plugin, icons } from 'ckeditor5/src/core.js';
+import { Plugin } from 'ckeditor5/src/core.js';
 import { toWidget } from 'ckeditor5/src/widget.js';
 import { IconView } from 'ckeditor5/src/ui.js';
+import { IconBookmarkInline } from 'ckeditor5/src/icons.js';
 import InsertBookmarkCommand from './insertbookmarkcommand.js';
 import UpdateBookmarkCommand from './updatebookmarkcommand.js';
 import '../theme/bookmark.css';
@@ -15,13 +16,10 @@ import '../theme/bookmark.css';
  * The bookmark editing plugin.
  */
 export default class BookmarkEditing extends Plugin {
-    constructor() {
-        super(...arguments);
-        /**
-         * A collection of bookmarks elements in the document.
-         */
-        this._bookmarkElements = new Map();
-    }
+    /**
+     * A collection of bookmarks elements in the document.
+     */
+    _bookmarkElements = new Map();
     /**
      * @inheritDoc
      */
@@ -34,6 +32,15 @@ export default class BookmarkEditing extends Plugin {
     static get isOfficialPlugin() {
         return true;
     }
+    /**
+     * @inheritDoc
+     */
+    constructor(editor) {
+        super(editor);
+        editor.config.define('bookmark', {
+            toolbar: ['bookmarkPreview', '|', 'editBookmark', 'removeBookmark']
+        });
+    }
     /**
      * @inheritDoc
      */
@@ -58,6 +65,12 @@ export default class BookmarkEditing extends Plugin {
         }
         return null;
     }
+    /**
+     * Returns all unique bookmark names existing in the content.
+     */
+    getAllBookmarkNames() {
+        return new Set(this._bookmarkElements.values());
+    }
     /**
      * Defines the schema for the bookmark feature.
      */
@@ -103,6 +116,7 @@ export default class BookmarkEditing extends Plugin {
                     id,
                     class: 'ck-bookmark'
                 }, [this._createBookmarkUIElement(writer)]);
+                writer.setCustomProperty('bookmark', true, containerElement);
                 this._bookmarkElements.set(modelElement, id);
                 // `getFillerOffset` is not needed to set here, because `toWidget` has already covered it.
                 const labelCreator = () => `${id} ${t('bookmark widget')}`;
@@ -119,7 +133,7 @@ export default class BookmarkEditing extends Plugin {
             const domElement = this.toDomElement(domDocument);
             const icon = new IconView();
             icon.set({
-                content: icons.bookmarkInline,
+                content: IconBookmarkInline,
                 isColorInherited: false
             });
             icon.render();

package/src/bookmarkui.d.ts

@@ -2,14 +2,12 @@
  * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
-/**
- * @module bookmark/bookmarkui
- */
 import { Plugin } from 'ckeditor5/src/core.js';
 import { ContextualBalloon, type ViewWithCssTransitionDisabler } from 'ckeditor5/src/ui.js';
+import { WidgetToolbarRepository } from 'ckeditor5/src/widget.js';
 import BookmarkFormView from './ui/bookmarkformview.js';
-import BookmarkActionsView from './ui/bookmarkactionsview.js';
 import BookmarkEditing from './bookmarkediting.js';
+import '../theme/bookmarktoolbar.css';
 /**
  * The UI plugin of the bookmark feature.
  *
@@ -17,10 +15,6 @@ import BookmarkEditing from './bookmarkediting.js';
  * which inserts the `bookmark` element upon selection.
  */
 export default class BookmarkUI extends Plugin {
-    /**
-     * The actions view displayed inside of the balloon.
-     */
-    actionsView: BookmarkActionsView | null;
     /**
      * The form view displayed inside the balloon.
      */
@@ -32,7 +26,7 @@ export default class BookmarkUI extends Plugin {
     /**
      * @inheritDoc
      */
-    static get requires(): readonly [typeof BookmarkEditing, typeof ContextualBalloon];
+    static get requires(): readonly [typeof BookmarkEditing, typeof ContextualBalloon, typeof WidgetToolbarRepository];
     /**
      * @inheritDoc
      */
@@ -45,6 +39,10 @@ export default class BookmarkUI extends Plugin {
      * @inheritDoc
      */
     init(): void;
+    /**
+     * @inheritDoc
+     */
+    afterInit(): void;
     /**
      * @inheritDoc
      */
@@ -53,71 +51,54 @@ export default class BookmarkUI extends Plugin {
      * Creates views.
      */
     private _createViews;
-    /**
-     * Creates the {@link module:bookmark/ui/bookmarkactionsview~BookmarkActionsView} instance.
-     */
-    private _createActionsView;
     /**
      * Creates the {@link module:bookmark/ui/bookmarkformview~BookmarkFormView} instance.
      */
     private _createFormView;
+    /**
+     * Creates link form menu list entry, so it'll be possible to access
+     * the list of the bookmarks from the link form.
+     */
+    private _registerLinkProvider;
+    /**
+     * Scrolls the editor to the bookmark with the given id.
+     */
+    private _scrollToBookmark;
     /**
      * Creates a toolbar Bookmark button. Clicking this button will show
      * a {@link #_balloon} attached to the selection.
      */
-    private _createToolbarBookmarkButton;
+    private _registerComponents;
     /**
      * Creates a button for `bookmark` command to use either in toolbar or in menu bar.
      */
-    private _createButton;
-    /**
-     * Attaches actions that control whether the balloon panel containing the
-     * {@link #formView} should be displayed.
-     */
-    private _enableBalloonActivators;
+    private _createBookmarkButton;
     /**
      * Attaches actions that control whether the balloon panel containing the
      * {@link #formView} is visible or not.
      */
     private _enableUserBalloonInteractions;
-    /**
-     * Updates the button label. If bookmark is selected label is set to 'Update' otherwise
-     * it is 'Insert'.
-     */
-    private _updateFormButtonLabel;
-    /**
-     * Adds the {@link #actionsView} to the {@link #_balloon}.
-     *
-     * @internal
-     */
-    _addActionsView(): void;
     /**
      * Adds the {@link #formView} to the {@link #_balloon}.
      */
     private _addFormView;
-    /**
-     * Closes the form view. Decides whether the balloon should be hidden completely.
-     */
-    private _closeFormView;
     /**
      * Removes the {@link #formView} from the {@link #_balloon}.
      */
     private _removeFormView;
     /**
-     * Shows the correct UI type. It is either {@link #formView} or {@link #actionsView}.
+     * Shows the {@link #formView}.
      */
-    private _showUI;
+    private _showFormView;
     /**
      * Removes the {@link #formView} from the {@link #_balloon}.
-     *
-     * See {@link #_addFormView}, {@link #_addActionsView}.
      */
-    private _hideUI;
+    private _hideFormView;
     /**
      * Makes the UI react to the {@link module:ui/editorui/editorui~EditorUI#event:update} event to
      * reposition itself when the editor UI should be refreshed.
      *
-     * See: {@link #_hideUI} to learn when the UI stops reacting to the `update` event.
+     * See: {@link #_hideFormView} to learn when the UI stops reacting to the `update` event.
      */
     private _startUpdatingUI;
     /**
@@ -125,23 +106,9 @@ export default class BookmarkUI extends Plugin {
      */
     private get _isFormInPanel();
     /**
-     * Returns `true` when {@link #actionsView} is in the {@link #_balloon}.
-     */
-    private get _areActionsInPanel();
-    /**
-     * Returns `true` when {@link #actionsView} is in the {@link #_balloon} and it is
-     * currently visible.
-     */
-    private get _areActionsVisible();
-    /**
-     * Returns `true` when {@link #actionsView} or {@link #formView} is in the {@link #_balloon}.
-     */
-    private get _isUIInPanel();
-    /**
-     * Returns `true` when {@link #actionsView} or {@link #formView} is in the {@link #_balloon} and it is
-     * currently visible.
+     * Returns `true` when {@link #formView} is in the {@link #_balloon} and it is currently visible.
      */
-    private get _isUIVisible();
+    private get _isFormVisible();
     /**
      * Returns positioning options for the {@link #_balloon}. They control the way the balloon is attached
      * to the target element or selection.