New linking experience.

packages/ckeditor5-bookmark/docs/features/bookmarks.md

@@ -18,7 +18,7 @@ To use the bookmark as an anchor in the content, add a link {@icon @ckeditor/cke
 
 <info-box info>
 	The Bookmarks feature is production-ready but does not include integration with the linking experience yet (see [#17230](https://github.com/ckeditor/ckeditor5/issues/17230)).
-	
+
 	Integrators should guide their users on linking to bookmarks using the `#` anchors.
 </info-box>
 
@@ -33,12 +33,19 @@ To use the bookmark as an anchor in the content, add a link {@icon @ckeditor/cke
 Do not worry about setting a bookmark inside an empty paragraph. The block with the `a` tag will not be rendered in the final content (for example for printing).
 
 The feature converts anchors into bookmarks during the {@link getting-started/setup/getting-and-setting-data#initializing-the-editor-with-data initialization of the editor} or while {@link getting-started/setup/getting-and-setting-data#replacing-the-editor-data-with-setdata replacing the editor data with `setData()`}. The notation based on the `id` attribute in an `a` HTML element without a `href` attribute is converted. Similar notations meet the conditions, too:
+
 * an `a` HTML element with a `name` attribute,
 * an `a` HTML element with the same `name` and `id` attributes,
 * an `a` HTML element with different `name` and `id` attributes.
 
 By default, all bookmarks created in the editor only have the `id="..."` attribute in the {@link getting-started/setup/getting-and-setting-data#getting-the-editor-data-with-getdata editor data}.
 
+## Integration with the link feature
+
+Bookmarks integrate with {@link features/link links}, providing a smooth linking experience. If you have any bookmarks in your content, you can access the "Bookmarks" panel available during link creation. It will display all bookmarks available in the edited content. Choose one of the anchors from the list and use it as a link target.
+
+{@img assets/img/bookmarks-panel.png 600 The bookmarks panel displayed during link creation}
+
 ## Installation
 
 <info-box info>
@@ -107,6 +114,7 @@ Here are some other CKEditor&nbsp;5 features that you can use similarly to the b
 ## Common API
 
 The {@link module:bookmark/bookmark~Bookmark} plugin registers the `'bookmark'` UI button component implemented by the {@link module:bookmark/bookmarkui~BookmarkUI bookmark UI feature}, and the following commands:
+
 * the `'insertBookmark'` command implemented by the {@link module:bookmark/insertbookmarkcommand~InsertBookmarkCommand editing feature}.
 * the `'updateBookmark'` command implemented by the {@link module:bookmark/updatebookmarkcommand~UpdateBookmarkCommand editing feature}.
 

packages/ckeditor5-bookmark/lang/contexts.json

@@ -1,13 +1,15 @@
 {
 	"Bookmark": "The label of the bookmark toolbar button. Also, a bookmark form header.",
-	"Insert": "The button in the bookmark insert form.",
-	"Update": "The button in the bookmark update form.",
 	"Edit bookmark": "Button opening the Bookmark editing balloon.",
 	"Remove bookmark": "Toolbar button tooltip for bookmark remove button.",
 	"Bookmark name": "The label of the input in the bookmark insert and update form. Also, the tooltip for the bookmark name in the bookmark preview.",
 	"Enter the bookmark name without spaces.": "The description of bookmark input in the bookmark insert form.",
 	"Bookmark must not be empty.": "The error message. Displayed when the bookmark name is empty.",
 	"Bookmark name cannot contain space characters.": "The error message. Displayed when provided name includes spaces.",
 	"Bookmark name already exists.": "The error message. Displayed when provided name already exists.",
-	"bookmark widget": "The label for the bookmark widget."
+	"bookmark widget": "The label for the bookmark widget.",
+	"Bookmark toolbar": "The label used by assistive technologies describing an bookmark toolbar attached to a bookmark widget.",
+	"Bookmarks": "Title for a feature displaying a list of bookmarks.",
+	"No bookmarks available.": "A message displayed instead of a list of bookmarks if it is empty.",
+	"Scroll to bookmark": "Tooltip shown after hovering the bookmark link preview."
 }

packages/ckeditor5-bookmark/package.json

@@ -15,7 +15,6 @@
   "dependencies": {
     "ckeditor5": "44.1.0",
     "@ckeditor/ckeditor5-core": "44.1.0",
-    "@ckeditor/ckeditor5-engine": "44.1.0",
     "@ckeditor/ckeditor5-widget": "44.1.0",
     "@ckeditor/ckeditor5-utils": "44.1.0",
     "@ckeditor/ckeditor5-ui": "44.1.0"
@@ -39,6 +38,7 @@
     "@ckeditor/ckeditor5-paste-from-office": "44.1.0",
     "@ckeditor/ckeditor5-table": "44.1.0",
     "@ckeditor/ckeditor5-theme-lark": "44.1.0",
+    "@ckeditor/ckeditor5-engine": "44.1.0",
     "typescript": "5.0.4",
     "webpack": "^5.94.0",
     "webpack-cli": "^5.1.4"

packages/ckeditor5-bookmark/src/bookmarkconfig.ts

@@ -48,4 +48,29 @@ 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>;
 }

packages/ckeditor5-bookmark/src/bookmarkediting.ts

@@ -7,7 +7,7 @@
  * @module bookmark/bookmarkediting
  */
 
-import { type Editor, Plugin, icons } from 'ckeditor5/src/core.js';
+import { Plugin, icons, type Editor } from 'ckeditor5/src/core.js';
 import { toWidget } from 'ckeditor5/src/widget.js';
 import { IconView } from 'ckeditor5/src/ui.js';
 import type { EventInfo } from 'ckeditor5/src/utils.js';
@@ -51,6 +51,17 @@ export default class BookmarkEditing extends Plugin {
 		return true;
 	}
 
+	/**
+	 * @inheritDoc
+	 */
+	constructor( editor: Editor ) {
+		super( editor );
+
+		editor.config.define( 'bookmark', {
+			toolbar: [ 'bookmarkPreview', '|', 'editBookmark', 'removeBookmark' ]
+		} );
+	}
+
 	/**
 	 * @inheritDoc
 	 */
@@ -81,6 +92,13 @@ export default class BookmarkEditing extends Plugin {
 		return null;
 	}
 
+	/**
+	 * Returns all unique bookmark names existing in the content.
+	 */
+	public getAllBookmarkNames(): Set<string> {
+		return new Set( this._bookmarkElements.values() );
+	}
+
 	/**
 	 * Defines the schema for the bookmark feature.
 	 */
@@ -135,6 +153,7 @@ export default class BookmarkEditing extends Plugin {
 					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.