feat(block-editor): Introduce Bubble Menu Component for enhanced text… (dotCMS#32500)

## Video


https://github.com/user-attachments/assets/9bb58d6f-b5f9-4883-a71c-22e4881c96b6

This pull request introduces a new `BubbleMenuComponent` to replace the
deprecated `BubbleMenuDirective` in the block editor module. The changes
include adding the new component, its styling, and integration into the
existing editor workflow, while removing the old directive and related
references.

### New Bubble Menu Implementation:
* Added `BubbleMenuComponent` with a rich set of formatting options such
as bold, italic, underline, text alignment, and list controls. It uses
`ngx-tiptap` for integration with the editor and includes dropdown
options for node types like headings, paragraphs, and lists
(`bubble-menu.component.ts`, `bubble-menu.component.html`,
`bubble-menu.component.scss`).
[[1]](diffhunk://#diff-d23b993f9fd90e0ad768747dd7f3a2a779754b32eaf6552646b15bb551a38ee5R1-R147)
[[2]](diffhunk://#diff-5504fc3eee34cc6dbd0f0655db4f54a85962c319cb0779196b003183a32924b5R1-R120)
[[3]](diffhunk://#diff-7e27151d3ff92b9fe01d3ce1e6265a02eb4cabba8837ddf503fa101476dad397R1-R122)
* Integrated the new `BubbleMenuComponent` into the block editor module,
replacing the old directive. Updated imports and declarations in
`block-editor.module.ts` accordingly.
[[1]](diffhunk://#diff-8baf52e51d62118783206bb31ceefa1afcd8a4b9400cfb935614e5a1171d5cf4R1-R2)
[[2]](diffhunk://#diff-8baf52e51d62118783206bb31ceefa1afcd8a4b9400cfb935614e5a1171d5cf4R36-L38)
[[3]](diffhunk://#diff-8baf52e51d62118783206bb31ceefa1afcd8a4b9400cfb935614e5a1171d5cf4L72-L78)

### Removal of Deprecated Directive:
* Removed the deprecated `BubbleMenuDirective` and its associated files,
including tests, from the shared directives directory.
[[1]](diffhunk://#diff-5eda86f5c86367b5c85f7846a4d9af5815ac282565b9b26379e8797559743522L1-L37)
[[2]](diffhunk://#diff-658a47db818d027990396ebc51d202f4d5c7cb0969ccf67e616ff35ee60b7902L1-L59)
[[3]](diffhunk://#diff-285bbf72928fbaf78d936f3fd7d43ff9ec25d32bd7e28d1324390afb5a514735L1)

### Updates to Existing Components:
* Updated `DotBlockEditorComponent` to include the new
`BubbleMenuComponent` and removed references to the old directive.
Adjusted the HTML template to integrate the new bubble menu.
[[1]](diffhunk://#diff-3628abb3effc8518bbbe60d68908f090cefdff11a43139a2c76f1abf2a8644c3L16-R24)
[[2]](diffhunk://#diff-266eab162f8661e695c3e40956692fa3696fbd4e8cd3e0352ea9e01f90b13609L51-L54)
[[3]](diffhunk://#diff-266eab162f8661e695c3e40956692fa3696fbd4e8cd3e0352ea9e01f90b13609L452-R451)

### Testing:
* Added unit tests for `BubbleMenuComponent` to ensure it initializes
correctly and behaves as expected.

These changes modernize the block editor's bubble menu functionality,
improving maintainability and aligning with updated libraries.

Author: rjvelazco

core-web/libs/block-editor/src/lib/block-editor.module.ts

@@ -1,3 +1,5 @@
+import { TiptapBubbleMenuDirective } from 'ngx-tiptap';
+
 import { CommonModule } from '@angular/common';
 import { APP_INITIALIZER, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -31,15 +33,11 @@ import {
 //Editor
 import { DotBlockEditorComponent } from './components/dot-block-editor/dot-block-editor.component';
 import { DotEditorCountBarComponent } from './components/dot-editor-count-bar/dot-editor-count-bar.component';
+import { DotBubbleMenuComponent } from './elements/dot-bubble-menu/dot-bubble-menu.component';
 import {
     BubbleFormComponent,
-    BubbleLinkFormComponent,
-    BubbleMenuButtonComponent,
-    BubbleMenuComponent,
     DragHandlerComponent,
     FloatingButtonComponent,
-    FormActionsComponent,
-    SuggestionPageComponent,
     UploadPlaceholderComponent
 } from './extensions';
 import { AssetFormModule } from './extensions/asset-form/asset-form.module';
@@ -69,18 +67,15 @@ const initTranslations = (dotMessageService: DotMessageService) => {
         DialogModule,
         InputTextareaModule,
         PaginatorModule,
-        DotSpinnerModule
+        DotSpinnerModule,
+        DotBubbleMenuComponent,
+        TiptapBubbleMenuDirective
     ],
     declarations: [
         EditorDirective,
         ContentletBlockComponent,
         DragHandlerComponent,
-        BubbleMenuComponent,
-        BubbleMenuButtonComponent,
-        BubbleLinkFormComponent,
-        FormActionsComponent,
         BubbleFormComponent,
-        SuggestionPageComponent,
         DotBlockEditorComponent,
         DotEditorCountBarComponent,
         FloatingButtonComponent
@@ -106,8 +101,7 @@ const initTranslations = (dotMessageService: DotMessageService) => {
     ],
     exports: [
         EditorDirective,
-        BubbleMenuComponent,
-        BubbleLinkFormComponent,
+        DotBubbleMenuComponent,
         ReactiveFormsModule,
         SharedModule,
         BubbleFormComponent,

core-web/libs/block-editor/src/lib/components/dot-block-editor/dot-block-editor.component.html

@@ -13,6 +13,9 @@
             [ngClass]="{ 'overflow-hidden': freezeScroll }"
             [ngModel]="content" />
     </div>
+
+    <dot-bubble-menu [editor]="editor" />
+
     @if (showCharData) {
         <dot-editor-count-bar
             [charLimit]="charLimit"

core-web/libs/block-editor/src/lib/components/dot-block-editor/dot-block-editor.component.scss

@@ -44,11 +44,37 @@
             padding: $dot-editor-size (4 * $dot-editor-size);
             font: $dot-editor-size;
 
+            .ProseMirror-selectednode {
+                &.dot-image,
+                .dot-image {
+                    outline: 1px solid $color-palette-primary;
+                }
+            }
+
+            a:has(img) {
+                display: block;
+                width: 50%;
+                position: relative;
+
+                img.dot-image {
+                    max-width: 100%;
+                    position: relative;
+                }
+            }
+
             img {
                 max-width: 100%;
                 max-height: 100%;
                 position: relative;
 
+                &.dot-image {
+                    display: block;
+                    width: auto;
+                    max-height: 300px;
+                    max-width: 50%;
+                    padding: $spacing-1;
+                }
+
                 &:before {
                     align-items: center;
                     background: $color-palette-gray-200;
@@ -289,6 +315,18 @@
                 border: 1px solid $color-palette-gray-400;
                 color: $color-palette-primary;
             }
+
+            .dot-node-center {
+                margin: 0 auto;
+            }
+
+            .dot-node-right {
+                margin-left: auto;
+            }
+
+            .dot-node-left {
+                margin-right: auto;
+            }
         }
 
         .video-container {
@@ -302,22 +340,6 @@
             }
         }
 
-        .image-container {
-            margin-bottom: $spacing-3;
-
-            img {
-                width: auto;
-                max-height: 300px;
-                max-width: 50%;
-                padding: $spacing-1;
-            }
-            &.ProseMirror-selectednode {
-                img {
-                    outline: 1px solid $color-palette-primary;
-                }
-            }
-        }
-
         .ai-content-container {
             &.ProseMirror-selectednode {
                 background-color: $color-palette-primary-op-20;

core-web/libs/block-editor/src/lib/components/dot-block-editor/dot-block-editor.component.ts

@@ -50,9 +50,6 @@ import {
     AssetUploader,
     BubbleAssetFormExtension,
     BubbleFormExtension,
-    BubbleLinkFormExtension,
-    DEFAULT_LANG_ID,
-    DotBubbleMenuExtension,
     DotComands,
     DotConfigExtension,
     DotFloatingButton,
@@ -71,7 +68,8 @@ import {
     formatHTML,
     removeInvalidNodes,
     RestoreDefaultDOMAttrs,
-    SetDocAttrStep
+    SetDocAttrStep,
+    DEFAULT_LANG_ID
 } from '../../shared';
 
 @Component({
@@ -448,8 +446,6 @@ export class DotBlockEditorComponent implements OnInit, OnDestroy, ControlValueA
                 shouldShowAIExtensions: isAIPluginInstalled
             }),
             DragHandler(this.viewContainerRef),
-            BubbleLinkFormExtension(this.viewContainerRef, this.languageId),
-            DotBubbleMenuExtension(this.#injector, this.viewContainerRef),
             BubbleFormExtension(this.viewContainerRef),
             DotFloatingButton(this.#injector, this.viewContainerRef),
             DotTableCellExtension(this.viewContainerRef),

core-web/libs/block-editor/src/lib/directive/editor-modal.directive.ts

@@ -0,0 +1,98 @@
+import tippy, { Instance } from 'tippy.js';
+
+import { Directive, ElementRef, OnDestroy, OnInit, inject, input } from '@angular/core';
+
+import { Editor, isNodeSelection, posToDOMRect } from '@tiptap/core';
+import { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu';
+
+@Directive({
+    selector: 'dot-editor-modal[editor], [dotEditorModal][editor]',
+    standalone: true,
+    exportAs: 'dotEditorModal'
+})
+export class EditorModalDirective implements OnInit, OnDestroy {
+    readonly editor = input.required<Editor>();
+    readonly tippyOptions = input<BubbleMenuPluginProps['tippyOptions']>({});
+
+    private elRef = inject<ElementRef<HTMLElement>>(ElementRef);
+    private tippy: Instance;
+
+    private editorElement: HTMLElement;
+
+    ngOnInit(): void {
+        const { element: editorElement } = this.editor().options;
+        const editorIsAttached = !!editorElement.parentElement;
+
+        if (!editorIsAttached) {
+            return;
+        }
+
+        this.editorElement = editorElement as HTMLElement;
+        this.tippy = tippy(editorElement, {
+            duration: 0,
+            content: this.elRef.nativeElement,
+            interactive: true,
+            trigger: 'manual',
+            placement: 'bottom-start',
+            hideOnClick: 'toggle',
+            getReferenceClientRect: this.getReferenceClientRect.bind(this),
+            ...this.tippyOptions()
+        });
+
+        editorElement.addEventListener('mousedown', () => this.hide());
+    }
+
+    ngOnDestroy(): void {
+        this.tippy?.destroy();
+        this.editorElement.removeEventListener('mousedown', () => this.hide());
+    }
+
+    show() {
+        this.tippy.show();
+    }
+
+    hide() {
+        this.tippy.hide();
+    }
+
+    toggle() {
+        this.tippy.state.isVisible ? this.hide() : this.show();
+    }
+
+    private getReferenceClientRect() {
+        const { state, view } = this.editor();
+        const { from, to } = state.selection;
+
+        // Handle node selections (like images, tables, etc.)
+        if (isNodeSelection(state.selection)) {
+            const node = this.getNodeElement(view, from);
+            if (node) {
+                // If the node has a bubble menu, return its bounding client rect
+                const bubbleMenu = document.querySelector('[tiptapbubblemenu]');
+
+                if (bubbleMenu) {
+                    return bubbleMenu.getBoundingClientRect();
+                }
+
+                // Otherwise, return the node's bounding client rect
+                return node.getBoundingClientRect();
+            }
+        }
+
+        // Handle text selections
+        return posToDOMRect(view, from, to);
+    }
+
+    private getNodeElement(view: Editor['view'], pos: number): HTMLElement | null {
+        const node = view.nodeDOM(pos) as HTMLElement;
+
+        if (!node) return null;
+
+        // Look for node view wrapper and get its first child
+        const nodeViewWrapper = node.dataset.nodeViewWrapper
+            ? node
+            : node.querySelector('[data-node-view-wrapper]');
+
+        return (nodeViewWrapper?.firstChild as HTMLElement) || node;
+    }
+}

core-web/libs/block-editor/src/lib/elements/dot-bubble-menu/components/dot-image-editor-popover/dot-image-editor-popover.component.html

@@ -0,0 +1,60 @@
+<div dotEditorModal #popover [tippyOptions]="tippyOptions" [editor]="editor()">
+    <form class="form" (ngSubmit)="saveImageChanges()" [formGroup]="imageForm">
+        <div class="form-group">
+            <label for="src">
+                Image URL
+                <span class="required">*</span>
+            </label>
+            <input
+                #input
+                id="src"
+                name="src"
+                type="text"
+                pInputText
+                formControlName="src"
+                autocomplete="off"
+                aria-label="Image URL" />
+        </div>
+
+        <div class="form-group">
+            <label for="title">Title</label>
+            <input
+                id="title"
+                name="title"
+                type="text"
+                pInputText
+                formControlName="title"
+                autocomplete="off"
+                aria-label="Image title" />
+        </div>
+
+        <div class="form-group">
+            <label for="alt">Alt Text</label>
+            <input
+                id="alt"
+                name="alt"
+                type="text"
+                pInputText
+                formControlName="alt"
+                autocomplete="off"
+                aria-label="Alternative text for the image" />
+        </div>
+
+        <div class="bubble-menu-actions">
+            <button
+                type="button"
+                pButton
+                class="bubble-menu-button p-button-outlined"
+                (click)="cancelImageEditing()"
+                label="Cancel"
+                aria-label="Cancel editing"></button>
+            <button
+                type="submit"
+                pButton
+                class="bubble-menu-button bubble-menu-button--primary"
+                label="Apply"
+                [disabled]="!imageForm.valid"
+                aria-label="Apply changes"></button>
+        </div>
+    </form>
+</div>

core-web/libs/block-editor/src/lib/elements/dot-bubble-menu/components/dot-image-editor-popover/dot-image-editor-popover.component.scss

@@ -0,0 +1,44 @@
+@use "variables" as *;
+
+.form {
+    display: flex;
+    flex-direction: column;
+    width: 18.75rem;
+    gap: $spacing-4;
+    background-color: $white;
+    border-radius: $border-radius-md;
+    padding: $spacing-3;
+    box-shadow: $shadow-m;
+
+    .form-group {
+        display: flex;
+        flex-direction: column;
+        gap: $spacing-1;
+
+        label {
+            font-weight: $font-weight-semi-bold;
+            margin-bottom: $spacing-0;
+
+            .required {
+                color: $color-palette-red;
+            }
+        }
+
+        input[pInputText] {
+            border-radius: $border-radius-md;
+            border: 1px solid $color-palette-gray-300;
+            padding: $spacing-1 $spacing-2;
+            font-size: $font-size-lmd;
+
+            &.ng-invalid {
+                border-color: $color-palette-red;
+            }
+        }
+    }
+
+    .bubble-menu-actions {
+        display: flex;
+        justify-content: flex-end;
+        gap: $spacing-1;
+    }
+}