@heartlandone/vega 2.100.0 → 2.102.0

package/dist/collection/components/vega-rich-text-editor/extensions/bookmark/anchor-to-bookmark-node-strategy.js

@@ -0,0 +1,79 @@
+import { generateUUID } from '../../../../utils/misc';
+import { ElementToDTOStrategy } from '../../slimmers/controllers/helper/element-to-dto-strategy/element-to-dto-strategy.abstract';
+/**
+ * Strategy to convert anchor elements into bookmark nodes.
+ *
+ * Supported inputs:
+ * - `<a id="Rights"></a>` — the CKEditor 5 bookmark contract.
+ * - `<a name="Rights"></a>` — the legacy CKEditor 4 anchor format.
+ *
+ * Only empty named anchors become bookmarks. Anchors with content, or anchors carrying an `href`,
+ * are left untouched so existing link/text handling is preserved.
+ */
+export class AnchorToBookmarkNodeStrategy extends ElementToDTOStrategy {
+  /**
+   * @inheritDoc
+   */
+  canHandle(elementsArray, currentIndex) {
+    const element = elementsArray[currentIndex];
+    return this.isBookmarkAnchor(element) ? 1 : 0;
+  }
+  /**
+   * @inheritDoc
+   */
+  handle(elementsArray) {
+    const element = elementsArray[0];
+    const name = this.resolveBookmarkName(element);
+    if (!name) {
+      return null;
+    }
+    return {
+      id: generateUUID(),
+      type: 'bookmark',
+      text: '',
+      name,
+    };
+  }
+  /**
+   * @inheritDoc
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * @inheritDoc
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+  /**
+   * Checks whether the element is an anchor that represents a bookmark target.
+   *
+   * @param {HTMLElement} element - The element to check.
+   * @returns {boolean} True when the element is a bookmark anchor.
+   */
+  isBookmarkAnchor(element) {
+    return (!!element &&
+      element.nodeName === 'A' &&
+      !element.hasAttribute('href') &&
+      this.isEmptyAnchor(element) &&
+      !!this.resolveBookmarkName(element));
+  }
+  /**
+   * Reads the bookmark name from the anchor, preferring `id` over the legacy `name` attribute.
+   *
+   * @param {HTMLElement} element - The anchor element.
+   * @returns {string} The bookmark name, or an empty string when absent.
+   */
+  resolveBookmarkName(element) {
+    return (element.getAttribute('id') || element.getAttribute('name') || '').trim();
+  }
+  /**
+   * Checks whether the anchor has no meaningful content.
+   *
+   * @param {HTMLElement} element - The anchor element.
+   * @returns {boolean} True when the anchor is effectively empty.
+   */
+  isEmptyAnchor(element) {
+    return (element.textContent || '').trim().length === 0 && element.children.length === 0;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/bookmark/assets/bookmark.js

@@ -0,0 +1,5 @@
+export const BOOKMARK_ICON_VIEW_BOX = '0 0 384 512';
+export const BOOKMARK_ICON_PATH = 'M0 48V487.7C0 501.1 10.9 512 24.3 512c5 0 9.9-1.5 14-4.4L192 400 345.7 507.6c4.1 2.9 9 4.4 14 4.4c13.4 0 24.3-10.9 24.3-24.3V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48z';
+export default {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${BOOKMARK_ICON_VIEW_BOX}"><path fill="currentColor" d="${BOOKMARK_ICON_PATH}"/></svg>`,
+};

package/dist/collection/components/vega-rich-text-editor/extensions/bookmark/bookmark-extension.js

@@ -0,0 +1,52 @@
+import { RTEListItemBlock } from '../../dto/blocks/list-item-block';
+import { RTETextBlock } from '../../dto/blocks/text-block';
+import { ModifyContentActionType } from '../../dto/actions/modify-content-action.abstract';
+import { VegaRTEExtension } from '../extension.abstract';
+import { DeleteBookmarkBeforeTextInterceptor } from './action-handler-interceptors/delete-bookmark-before-text-interceptor';
+import { UpdateBookmarkNameStrategy } from './action-handler-strategies/update-bookmark-name-strategy';
+import { InsertBookmarkNodeStrategy } from './action-handler-strategies/insert-bookmark-node-strategy';
+import { INSERT_BOOKMARK_NODE } from './actions/insert-bookmark-node-action';
+import { UPDATE_BOOKMARK_NAME } from './actions/update-bookmark-name-action';
+import { AnchorToBookmarkNodeStrategy } from './anchor-to-bookmark-node-strategy';
+import { RTEBookmarkNode } from './bookmark-node';
+import { RTEBookmarkNodeRenderer } from './renderers/bookmark-node-renderer';
+import { RTEBookmarkToolbarButtonRenderer } from './renderers/bookmark-toolbar-button-renderer';
+// Module scoped so repeated extension instances reuse the same strategy reference instead of registering duplicates.
+const anchorToBookmarkNodeStrategy = new AnchorToBookmarkNodeStrategy();
+/**
+ * Extension that adds bookmark (named anchor) support to the Vega Rich Text Editor.
+ *
+ * A bookmark is a zero-width, named marker that serializes to `<a id="name"></a>` so it can
+ * be used as a local link target.
+ */
+export class VegaRTEBookmarkExtension extends VegaRTEExtension {
+  constructor() {
+    super();
+    this.bookmarkRenderer = new RTEBookmarkNodeRenderer();
+    this.registerNode('bookmark', RTEBookmarkNode);
+    this.registerRenderer('bookmark', this.bookmarkRenderer);
+    this.registerElementToNodeDTOClassStrategy(anchorToBookmarkNodeStrategy);
+  }
+  /** @inheritDoc */
+  prepareBeforeLoad(host) {
+    this.registerToolbarButtonRenderer(VegaRTEBookmarkExtension.TOOLBAR_BUTTON_KEY, new RTEBookmarkToolbarButtonRenderer(), host);
+  }
+  /** Removes the per-host bookmark selection listener when the editor is destroyed. */
+  destroyExtension() {
+    var _a;
+    const host = (_a = this.extensionContext) === null || _a === void 0 ? void 0 : _a.host;
+    if (host) {
+      this.bookmarkRenderer.teardownRangeHighlight(host);
+    }
+  }
+}
+(() => {
+  const insertBookmarkNodeStrategy = new InsertBookmarkNodeStrategy();
+  VegaRTEExtension.registerActionHandleStrategy(RTETextBlock.typeName, INSERT_BOOKMARK_NODE, insertBookmarkNodeStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(RTEListItemBlock.typeName, INSERT_BOOKMARK_NODE, insertBookmarkNodeStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(RTEBookmarkNode.typeName, UPDATE_BOOKMARK_NAME, new UpdateBookmarkNameStrategy());
+  const deleteBookmarkBeforeTextInterceptor = new DeleteBookmarkBeforeTextInterceptor();
+  VegaRTEExtension.registerActionHandlerInterceptor(RTETextBlock.typeName, ModifyContentActionType.DELETE_BLOCK_CONTENT, deleteBookmarkBeforeTextInterceptor);
+  VegaRTEExtension.registerActionHandlerInterceptor(RTEListItemBlock.typeName, ModifyContentActionType.DELETE_BLOCK_CONTENT, deleteBookmarkBeforeTextInterceptor);
+})();
+VegaRTEBookmarkExtension.TOOLBAR_BUTTON_KEY = 'bookmark';

package/dist/collection/components/vega-rich-text-editor/extensions/bookmark/bookmark-node.js

@@ -0,0 +1,91 @@
+import { BoldAnnotationAction } from '../../dto/actions/bold-annotation-action';
+import { DeleteNodeAnnotationAction } from '../../dto/actions/delete-node-annotation-action';
+import { NodeAnnotationTypeEnum } from '../../dto/annotations/node-annotation.abstract';
+import { RTETextNode } from '../../dto/nodes/text-node';
+import { escapeHtmlAttribute } from '../../helpers/utils';
+/**
+ * Bookmark node for the Vega Rich Text Editor.
+ *
+ * A bookmark is a named, zero-width marker that can be used as a local link target.
+ * It carries no text content and is never directly editable by the user.
+ */
+export class RTEBookmarkNode extends RTETextNode {
+  constructor(id, name, parentBlock, annotations) {
+    super(id, '', parentBlock, annotations);
+    this.dtoName = RTEBookmarkNode.dtoName;
+    this.type = 'bookmark';
+    this.name = name;
+  }
+  /**
+   * @inheritDoc
+   */
+  static from(value, parent) {
+    const node = new RTEBookmarkNode(value.id, value.name, parent);
+    if (value.annotations) {
+      node.annotationMap = this.generateTextAnnotationMap(value.annotations);
+    }
+    return node;
+  }
+  /**
+   * Converts the bookmark node to a JSON representation.
+   *
+   * @returns {VegaRTEBookmarkNode} - The JSON representation of the bookmark node.
+   */
+  toJSON() {
+    const serializedNode = super.toJSON();
+    const annotations = serializedNode.annotations;
+    return Object.assign(Object.assign({ id: this.id }, (annotations ? { annotations } : {})), { type: this.type, text: '', name: this.name });
+  }
+  /**
+   * Bookmarks are markers only, so their content can never be edited directly.
+   *
+   * @returns {boolean} - Always returns false for bookmark nodes.
+   */
+  isContentEditable() {
+    return false;
+  }
+  /**
+   * Clones the bookmark node.
+   *
+   * @param {RTETextBlock} parent - The parent block for the cloned node.
+   * @returns {RTEBookmarkNode} - The cloned bookmark node.
+   */
+  clone(parent) {
+    return new RTEBookmarkNode(this.id, this.name, parent, super.cloneAnnotations());
+  }
+  /**
+   * Checks if a node is empty
+   *
+   * @returns {boolean}  It returns `true` if the node is empty
+   */
+  isEmpty() {
+    return false;
+  }
+  /**
+   * Converts the bookmark node to an HTML representation.
+   *
+   * The output matches the CKEditor 5 bookmark contract so the value stays
+   * compatible with other editors and remains a valid local link target.
+   *
+   * @returns {string} - The HTML representation of the bookmark node.
+   */
+  toHtml() {
+    return `<a id="${escapeHtmlAttribute(this.name)}"></a>`;
+  }
+  /**
+   * Bookmarks do not accept text formatting, but still process selection annotations.
+   *
+   * @param {AnnotationAction} action - The annotation action to apply.
+   */
+  doAnnotationActionApply(action) {
+    // BoldAnnotationAction has no annotationType; deletion identifies BOLD through its annotationType.
+    if (action instanceof BoldAnnotationAction ||
+      (action instanceof DeleteNodeAnnotationAction &&
+        action.annotationType === NodeAnnotationTypeEnum.BOLD)) {
+      return;
+    }
+    super.doAnnotationActionApply(action);
+  }
+}
+RTEBookmarkNode.typeName = 'RTEBookmarkNode';
+RTEBookmarkNode.dtoName = 'RTEBookmarkNode';

package/dist/collection/components/vega-rich-text-editor/extensions/bookmark/renderers/bookmark-node-renderer.js

@@ -0,0 +1,316 @@
+import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaChange } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+import { VegaInternalTranslation } from '../../../../../helpers/translation/internal-translation-controller';
+import { createEnterKeyHandlerToTriggerClick } from '../../../../../utils/accessibility';
+import { RemoveChildrenAction } from '../../../dto/actions/remove-child-action';
+import { UpdateCursorPositionAction } from '../../../dto/actions/update-cursor-position-action';
+import stateEntityRenderingRegistry from '../../../slimmers/controllers/state-entity-rendering-registry';
+import { debounce } from '../../../../../utils/timer';
+import { tryGetDocument } from '../../../../../utils/try-get-document';
+import { VegaRTEExtensionRenderer } from '../../base-extension-renderer';
+import { UpdateBookmarkNameAction } from '../actions/update-bookmark-name-action';
+import { BOOKMARK_ICON_PATH, BOOKMARK_ICON_VIEW_BOX } from '../assets/bookmark';
+import { RTEBookmarkNode } from '../bookmark-node';
+import { collectBookmarkNodes } from '../utils';
+/**
+ * Bookmark node renderer for the rich text editor.
+ *
+ * The bookmark always renders as an anchor so it stays a valid local link target. In editable mode
+ * the anchor also carries the marker icon and is wrapped by the bookmark editor popover.
+ */
+export class RTEBookmarkNodeRenderer extends VegaRTEExtensionRenderer {
+  constructor() {
+    super(...arguments);
+    this.rangeHighlightHandlers = new WeakMap();
+    this.openPopoverNode = null;
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    this.handleBalloonShow = (e) => {
+      const anchor = this.getBookmarkAnchor(e);
+      if (anchor) {
+        this.openPopoverNode = this.getBookmarkNodeByAnchor(anchor);
+        anchor.classList.add(RTEBookmarkNodeRenderer.SELECTED_CLASS);
+      }
+    };
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    this.handleBalloonHide = (e) => {
+      const anchor = this.getBookmarkAnchor(e);
+      if (anchor) {
+        if (this.getBookmarkNodeByAnchor(anchor) === this.openPopoverNode) {
+          this.openPopoverNode = null;
+        }
+        anchor.classList.remove(RTEBookmarkNodeRenderer.SELECTED_CLASS);
+      }
+    };
+  }
+  /**
+   * Renders the bookmark node.
+   *
+   * @param {VegaRTECreateElementFunction} createElement - The function to create a DOM element.
+   * @param {RTEBookmarkNode} node - The bookmark node to render.
+   * @param {RTERenderContext} editorContent - The editor content context.
+   * @returns {VegaRTERenderResult} - The rendered DOM element.
+   */
+  doRender(createElement, node, editorContent) {
+    if (!editorContent || editorContent.editable === false) {
+      return this.renderReadonlyBookmark(createElement, node);
+    }
+    return this.renderEditableBookmark(createElement, node, editorContent);
+  }
+  /**
+   * @inheritDoc
+   */
+  injectRTEScopeStyles() {
+    return [
+      `a.rte-bookmark{display: inline-block; vertical-align: middle; line-height: 0; cursor: pointer; padding: 0; margin: 0; border-radius: 2px}`,
+      `a.rte-bookmark.rte-bookmark-readonly{cursor: default}`,
+      `a.rte-bookmark > vega-rich-text-bookmark-editor{position: absolute; width: 0; height: 0}`,
+      // The bookmark is icon only, so it follows the inherited text size instead of a fixed icon size.
+      `a.rte-bookmark .rte-bookmark__icon{display: inline-block; position: relative; top: -0.125em; vertical-align: middle; line-height: 0; height: 1em; width: 1em}`,
+      `a.rte-bookmark svg{display: block; height: 100%; width: 100%}`,
+      // Text colors have no design token variable, so the on action foreground is a literal.
+      `a.rte-bookmark.${RTEBookmarkNodeRenderer.SELECTED_CLASS}{color: rgba(var(--v-bg-action, 19,98,226,1))}`,
+    ].join('\n');
+  }
+  /**
+   * Removes the per-host selection listener so a destroyed host is not retained by the document.
+   *
+   * @param {HTMLVegaRichTextEditorElement} host - The editor host being torn down.
+   */
+  teardownRangeHighlight(host) {
+    var _a, _b;
+    const syncHandler = (_a = this.rangeHighlightHandlers.get(host)) !== null && _a !== void 0 ? _a : null;
+    if (!syncHandler) {
+      return;
+    }
+    (_b = tryGetDocument()) === null || _b === void 0 ? void 0 : _b.removeEventListener('selectionchange', syncHandler);
+    this.rangeHighlightHandlers.delete(host);
+  }
+  /**
+   * Renders a visible bookmark target without editor interactions.
+   *
+   * @param {VegaRTECreateElementFunction} createElement - The function to create a DOM element.
+   * @param {RTEBookmarkNode} node - The bookmark node to render.
+   * @returns {VegaRTERenderResult} - The rendered bookmark element.
+   */
+  renderReadonlyBookmark(createElement, node) {
+    return createElement('a', {
+      key: node.id,
+      id: node.name,
+      class: 'rte-bookmark rte-bookmark-readonly',
+      title: node.name,
+    }, [this.renderIcon(createElement)]);
+  }
+  /**
+   * Renders the in-editor bookmark anchor wrapped by its editor popover.
+   *
+   *
+   * @param {VegaRTECreateElementFunction} createElement - The function to create a DOM element.
+   * @param {RTEBookmarkNode} node - The bookmark node to render.
+   * @param {RTERenderContext} editorContent - The editor content context.
+   * @returns {VegaRTERenderResult} - The rendered bookmark element.
+   */
+  renderEditableBookmark(createElement, node, editorContent) {
+    const registerRef = this.useRef(node);
+    let anchorRef = null;
+    let editorRef = null;
+    this.ensureRangeHighlight(editorContent.host);
+    return createElement('a', {
+      'key': node.id,
+      'id': node.name,
+      'class': 'rte-bookmark',
+      'contenteditable': 'false',
+      'role': 'button',
+      'tabIndex': 0,
+      'aria-label': `${VegaInternalTranslation.t('Bookmark')}: ${node.name}`,
+      'title': node.name,
+      'onKeyDown': createEnterKeyHandlerToTriggerClick(),
+      // Stops the browser from dropping its own caret before the editor moves it onto the bookmark.
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      'onMouseDown': (e) => e.preventDefault(),
+      // Refreshes the reserved names once the popover opens, mirroring the toolbar insert flow.
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      'onClick': () => {
+        if (editorRef) {
+          editorRef.reservedNames = this.getReservedNames(node, editorContent);
+        }
+        this.placeCaretAfterBookmark(node, editorContent);
+      },
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      'ref': (ref) => {
+        if (ref) {
+          anchorRef = ref;
+          registerRef(ref);
+        }
+        else {
+          void (editorRef === null || editorRef === void 0 ? void 0 : editorRef.hide());
+        }
+      },
+    }, [
+      this.renderIcon(createElement),
+      createElement('vega-rich-text-bookmark-editor', {
+        mode: 'preview',
+        name: node.name,
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        ref: (ref) => {
+          if (ref) {
+            editorRef = ref;
+            // Anchor the popover to the bookmark <a>, mirroring the link editor wiring.
+            if (anchorRef && ref.target !== anchorRef) {
+              ref.target = anchorRef;
+            }
+            this.bindSelectedStateToBalloon(ref);
+            DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, 
+            // eslint-disable-next-line jsdoc/require-jsdoc
+            (e) => {
+              this.handleChange(e, node, editorContent);
+            });
+          }
+        },
+      }),
+    ]);
+  }
+  /**
+   * Renders the bookmark icon as inline SVG so the browser paints the text selection over it.
+   *
+   * @param {VegaRTECreateElementFunction} createElement - The function to create a DOM element.
+   * @returns {VegaRTERenderResult} - The rendered icon.
+   */
+  renderIcon(createElement) {
+    return createElement('span', { class: 'rte-bookmark__icon' }, [
+      createElement('svg', { 'viewBox': BOOKMARK_ICON_VIEW_BOX, 'aria-hidden': 'true', 'focusable': 'false' }, [createElement('path', { fill: 'currentColor', d: BOOKMARK_ICON_PATH })]),
+    ]);
+  }
+  /**
+   * Places the caret right after the bookmark so typing appends text and Backspace removes the bookmark.
+   *
+   * @param {RTEBookmarkNode} node - The bookmark node.
+   * @param {RTERenderContext} editorContent - The editor content context.
+   */
+  placeCaretAfterBookmark(node, editorContent) {
+    var _a;
+    (_a = editorContent.host) === null || _a === void 0 ? void 0 : _a.value.apply(new UpdateCursorPositionAction(node, node.getRangeEndOffset(), true));
+  }
+  /**
+   * Shows the selected outline on the bookmark while its editor balloon is open.
+   *
+   * The popover lives in the editor shadow root, so its events only reach the editor element.
+   * Stencil reuses the element across renders, so the listeners are replaced instead of stacked.
+   *
+   * @param {HTMLElement} editor - The bookmark editor element.
+   */
+  bindSelectedStateToBalloon(editor) {
+    editor.removeEventListener('vegaPopoverShow', this.handleBalloonShow);
+    editor.removeEventListener('vegaPopoverHide', this.handleBalloonHide);
+    editor.addEventListener('vegaPopoverShow', this.handleBalloonShow);
+    editor.addEventListener('vegaPopoverHide', this.handleBalloonHide);
+  }
+  /**
+   * Binds a single debounced selection listener per host that keeps the range highlight in sync.
+   *
+   * @typedef HTMLVegaRichTextEditorElement - The rich text editor host element.
+   * @param {HTMLVegaRichTextEditorElement} [host] - The editor host owning the bookmarks.
+   */
+  ensureRangeHighlight(host) {
+    const ownerDocument = tryGetDocument();
+    if (!host || !ownerDocument || this.rangeHighlightHandlers.has(host)) {
+      return;
+    }
+    const syncHandler = debounce(() => this.syncRangeHighlight(host), 30, this);
+    this.rangeHighlightHandlers.set(host, syncHandler);
+    ownerDocument.addEventListener('selectionchange', syncHandler);
+  }
+  /**
+   * Highlights every bookmark the current non-collapsed selection crosses.
+   *
+   * @typedef HTMLVegaRichTextEditorElement - The rich text editor host element.
+   * @param {HTMLVegaRichTextEditorElement} host - The editor host owning the bookmarks.
+   */
+  syncRangeHighlight(host) {
+    var _a;
+    const selection = (_a = this.getExtensionContext(host)) === null || _a === void 0 ? void 0 : _a.getSelection();
+    const range = selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
+    collectBookmarkNodes(host.value).forEach((node) => {
+      const dom = stateEntityRenderingRegistry.getDOMByEntity(node);
+      if (dom) {
+        const rangeCrosses = !!range && !range.collapsed && range.intersectsNode(dom);
+        dom.classList.toggle(RTEBookmarkNodeRenderer.SELECTED_CLASS, rangeCrosses || node === this.openPopoverNode);
+      }
+    });
+  }
+  /**
+   * Resolves the bookmark anchor that owns the balloon which raised the event.
+   *
+   * @param {Event} e - The balloon event.
+   * @returns {Nullable<HTMLElement>} - The bookmark anchor element.
+   */
+  getBookmarkAnchor(e) {
+    var _a;
+    return (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.closest('a.rte-bookmark');
+  }
+  /**
+   * Resolves the bookmark node backing an anchor element.
+   *
+   * @param {HTMLElement} anchor - The bookmark anchor element.
+   * @returns {Nullable<RTEBookmarkNode>} - The backing bookmark node, or null when the anchor is not a bookmark.
+   */
+  getBookmarkNodeByAnchor(anchor) {
+    const entity = stateEntityRenderingRegistry.getEntityByDOM(anchor);
+    return entity instanceof RTEBookmarkNode ? entity : null;
+  }
+  /**
+   * Collects the bookmark names already used by other bookmarks in the same document.
+   *
+   * @param {RTEBookmarkNode} node - The bookmark node being edited.
+   * @param {RTERenderContext} editorContent - The editor content context.
+   * @returns {string[]} - The reserved bookmark names.
+   */
+  getReservedNames(node, editorContent) {
+    var _a;
+    return collectBookmarkNodes((_a = editorContent.host) === null || _a === void 0 ? void 0 : _a.value)
+      .filter((item) => item !== node)
+      .map((item) => item.name);
+  }
+  /**
+   * Applies rename and removal actions emitted by the bookmark editor.
+   *
+   * @param {CustomEvent<{ action: 'save'; name: string } | { action: 'remove' }>} e - The bookmark editor change event.
+   * @param {RTEBookmarkNode} node - The bookmark node being edited.
+   * @param {RTERenderContext} editorContent - The editor content context.
+   */
+  handleChange(e, node, editorContent) {
+    var _a;
+    const host = editorContent.host;
+    if (!host) {
+      return;
+    }
+    if (e.detail.action === 'save') {
+      node.apply(new UpdateBookmarkNameAction(e.detail.name));
+      (_a = this.getExtensionContext(host)) === null || _a === void 0 ? void 0 : _a.flushValue(host.value);
+      return;
+    }
+    this.removeBookmark(node, host);
+  }
+  /**
+   * Removes the bookmark and leaves the caret where the bookmark used to be.
+   *
+   * @param {RTEBookmarkNode} node - The bookmark node being removed.
+   * @param {HTMLVegaRichTextEditorElement} host - The rich text editor host element.
+   */
+  removeBookmark(node, host) {
+    var _a, _b, _c, _d;
+    const siblings = (_b = (_a = node.parent) === null || _a === void 0 ? void 0 : _a.children) !== null && _b !== void 0 ? _b : [];
+    const index = siblings.indexOf(node);
+    const nextNode = index >= 0 ? siblings[index + 1] : null;
+    const previousNode = index > 0 ? siblings[index - 1] : null;
+    (_c = node.parent) === null || _c === void 0 ? void 0 : _c.apply(new RemoveChildrenAction(node));
+    (_d = this.getExtensionContext(host)) === null || _d === void 0 ? void 0 : _d.flushValue(host.value);
+    if (nextNode) {
+      host.value.apply(new UpdateCursorPositionAction(nextNode, 0, true));
+    }
+    else if (previousNode) {
+      host.value.apply(new UpdateCursorPositionAction(previousNode, previousNode.getRangeEndOffset(), true));
+    }
+  }
+}
+RTEBookmarkNodeRenderer.typeName = 'RTEBookmarkNodeRenderer';
+RTEBookmarkNodeRenderer.SELECTED_CLASS = 'rte-bookmark-selected';

package/dist/collection/components/vega-rich-text-editor/extensions/bookmark/renderers/bookmark-toolbar-button-renderer.js

@@ -0,0 +1,137 @@
+import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaChange } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+import { VegaInternalIconManager } from '../../../../../helpers/icon/internal-icon-manager';
+import bookmarkIcon from '../assets/bookmark';
+import { ActionHandleStrategyRegistry } from '../../../dto/action-handle-strategies/action-handle-strategy-registry';
+import { VegaInternalTranslation } from '../../../../../helpers/translation/internal-translation-controller';
+import { VegaRTEToolbarButtonRenderer } from '../../base-toolbar-button-renderer';
+import { INSERT_BOOKMARK_NODE, InsertBookmarkNodeAction } from '../actions/insert-bookmark-node-action';
+import { collectBookmarkNames } from '../utils';
+/**
+ * Toolbar button renderer for the bookmark extension.
+ *
+ * The button hosts the bookmark editor in insert mode and inserts a bookmark
+ * at the caret position captured when the button was activated.
+ */
+export class RTEBookmarkToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
+  constructor() {
+    super(...arguments);
+    this.editorRef = null;
+    this.buttonWrapperRef = null;
+    this.pendingRange = null;
+  }
+  /**
+   * Renders the bookmark toolbar button wrapped in the bookmark editor.
+   *
+   * @param {VegaRTECreateElementFunction} h - Create element function.
+   * @param {VegaRTEToolbarRenderContext} editorContext - The render context for the editor.
+   * @returns {VegaRTERenderResult} - The toolbar button render result.
+   */
+  render(h, editorContext) {
+    return h('vega-rich-text-bookmark-editor', {
+      mode: 'insert',
+      name: '',
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      ref: (ref) => {
+        if (ref) {
+          this.editorRef = ref;
+          this.syncPopoverTarget();
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, 
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          (e) => {
+            this.handleEditorChange(e, editorContext);
+          });
+        }
+      },
+    }, [
+      // The base renderer owns the actual toolbar button ref, so this wrapper
+      // provides a stable external anchor for the insert popover.
+      h('div', {
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        ref: (ref) => {
+          if (ref) {
+            this.buttonWrapperRef = ref;
+            // The editor and wrapper refs can be assigned in either order.
+            this.syncPopoverTarget();
+          }
+        },
+      }, [
+        this.renderButton(h, editorContext, {
+          icon: 'rte-bookmark',
+          tooltip: { text: VegaInternalTranslation.t('Bookmark') },
+        }),
+      ]),
+    ]);
+  }
+  /**
+   * @inheritDoc
+   */
+  isDisabled(editorContext) {
+    let result = super.isDisabled(editorContext);
+    const context = this.getExtensionContext(editorContext.host);
+    if (context) {
+      const { getSelectedNodes } = context;
+      const [startNode] = getSelectedNodes();
+      if (startNode) {
+        result || (result = !ActionHandleStrategyRegistry.canHandle(INSERT_BOOKMARK_NODE, startNode.parent));
+      }
+    }
+    return result;
+  }
+  /**
+   * Captures the caret position and the reserved bookmark names before the editor opens.
+   *
+   * @param {VegaRTEToolbarRenderContext} editorContext - The render context for the editor.
+   */
+  handleButtonClick(editorContext) {
+    // The editor keeps mutating its live range, so the caret has to be copied before the editor popover takes focus.
+    this.pendingRange = editorContext.rteRange.clone();
+    if (this.editorRef) {
+      this.editorRef.reservedNames = collectBookmarkNames(editorContext.host.value);
+      void this.editorRef.show();
+    }
+  }
+  /* istanbul ignore next */
+  /**
+   * @inheritDoc
+   */
+  handleDropdownClick() {
+    // No dropdown used
+  }
+  /**
+   * Anchors the insert popover to the button, because a self anchored popover never opens.
+   */
+  syncPopoverTarget() {
+    // Ref callbacks are invoked independently; assigning only after both are ready
+    // keeps the target setup valid regardless of render callback order.
+    if (this.editorRef && this.buttonWrapperRef && this.editorRef.target !== this.buttonWrapperRef) {
+      this.editorRef.target = this.buttonWrapperRef;
+    }
+  }
+  /**
+   * Inserts the bookmark emitted by the bookmark editor at the captured caret position.
+   *
+   * @param {CustomEvent<{ action: 'save'; name: string } | { action: 'remove' }>} e - The bookmark editor change event.
+   * @param {VegaRTEToolbarRenderContext} editorContext - The render context for the editor.
+   */
+  handleEditorChange(e, editorContext) {
+    if (e.detail.action !== 'save') {
+      return;
+    }
+    const rteRange = this.pendingRange;
+    const startNode = rteRange === null || rteRange === void 0 ? void 0 : rteRange.startNode;
+    if (!(startNode === null || startNode === void 0 ? void 0 : startNode.parent)) {
+      return;
+    }
+    const action = new InsertBookmarkNodeAction(rteRange, e.detail.name);
+    startNode.parent.apply(action);
+    if (action.actionHandleResult) {
+      const context = this.getExtensionContext(editorContext.host);
+      context === null || context === void 0 ? void 0 : context.flushValue(context.host.value);
+    }
+    this.pendingRange = null;
+  }
+}
+(() => {
+  VegaInternalIconManager.register({ 'rte-bookmark': bookmarkIcon });
+})();