Lexical: Added context toolbar placement, added link toolbar

Also added some basic context toolbar styling

resources/js/wysiwyg/ui/defaults/button-definitions.ts

@@ -1,7 +1,7 @@
 import {EditorBasicButtonDefinition, EditorButton, EditorButtonDefinition} from "../framework/buttons";
 import {
     $createNodeSelection,
-    $createParagraphNode, $getRoot, $getSelection,
+    $createParagraphNode, $createTextNode, $getRoot, $getSelection,
     $isParagraphNode, $isTextNode, $setSelection,
     BaseSelection, CAN_REDO_COMMAND, CAN_UNDO_COMMAND, COMMAND_PRIORITY_LOW, ElementNode, FORMAT_TEXT_COMMAND,
     LexicalNode,
@@ -45,12 +45,13 @@ import listBulletIcon from "@icons/editor/list-bullet.svg"
 import listNumberedIcon from "@icons/editor/list-numbered.svg"
 import listCheckIcon from "@icons/editor/list-check.svg"
 import linkIcon from "@icons/editor/link.svg"
+import unlinkIcon from "@icons/editor/unlink.svg"
 import tableIcon from "@icons/editor/table.svg"
 import imageIcon from "@icons/editor/image.svg"
 import horizontalRuleIcon from "@icons/editor/horizontal-rule.svg"
 import detailsIcon from "@icons/editor/details.svg"
 import sourceIcon from "@icons/editor/source-view.svg"
-import {$createHorizontalRuleNode, $isHorizontalRuleNode, HorizontalRuleNode} from "../../nodes/horizontal-rule";
+import {$createHorizontalRuleNode, $isHorizontalRuleNode} from "../../nodes/horizontal-rule";
 
 export const undo: EditorButtonDefinition = {
     label: 'Undo',
@@ -258,6 +259,31 @@ export const link: EditorButtonDefinition = {
     }
 };
 
+export const unlink: EditorButtonDefinition = {
+    label: 'Remove link',
+    icon: unlinkIcon,
+    action(context: EditorUiContext) {
+        context.editor.update(() => {
+            const selection = context.lastSelection;
+            const selectedLink = getNodeFromSelection(selection, $isLinkNode) as LinkNode|null;
+            const selectionPoints = selection?.getStartEndPoints();
+
+            if (selectedLink) {
+                const newNode = $createTextNode(selectedLink.getTextContent());
+                selectedLink.replace(newNode);
+                if (selectionPoints?.length === 2) {
+                    newNode.select(selectionPoints[0].offset, selectionPoints[1].offset);
+                } else {
+                    newNode.select();
+                }
+            }
+        });
+    },
+    isActive(selection: BaseSelection|null): boolean {
+        return false;
+    }
+};
+
 export const table: EditorBasicButtonDefinition = {
     label: 'Table',
     icon: tableIcon,

resources/js/wysiwyg/ui/framework/manager.ts

@@ -94,6 +94,7 @@ export class EditorUIManager {
         for (const toolbar of this.activeContextToolbars) {
             toolbar.updateState(update);
         }
+        // console.log('selection update', update.selection);
     }
 
     protected updateContextToolbars(update: EditorUiStateUpdate): void {

resources/js/wysiwyg/ui/framework/toolbars.ts

@@ -16,8 +16,14 @@ export class EditorContextToolbar extends EditorContainerUiElement {
     }
 
     attachTo(target: HTMLElement) {
-        // Todo - attach to target position
-        console.log('attaching context toolbar to', target);
+        const targetBounds = target.getBoundingClientRect();
+        const dom = this.getDOMElement();
+        const domBounds = dom.getBoundingClientRect();
+
+        const targetMid = targetBounds.left + (targetBounds.width / 2);
+        const targetLeft = targetMid - (domBounds.width / 2);
+        dom.style.top = (targetBounds.bottom + 6) + 'px';
+        dom.style.left = targetLeft + 'px';
     }
 
     insert(children: EditorUiElement[]) {

resources/js/wysiwyg/ui/index.ts

@@ -1,5 +1,5 @@
 import {LexicalEditor} from "lexical";
-import {getImageToolbarContent, getMainEditorFullToolbar} from "./toolbars";
+import {getImageToolbarContent, getLinkToolbarContent, getMainEditorFullToolbar} from "./toolbars";
 import {EditorUIManager} from "./framework/manager";
 import {image as imageFormDefinition, link as linkFormDefinition, source as sourceFormDefinition} from "./defaults/form-definitions";
 import {ImageDecorator} from "./decorators/image";
@@ -41,6 +41,10 @@ export function buildEditorUI(element: HTMLElement, editor: LexicalEditor) {
             return originalTarget.closest('a') || originalTarget;
         }
     });
+    manager.registerContextToolbar('link', {
+        selector: 'a',
+        content: getLinkToolbarContent(),
+    });
 
     // Register image decorator listener
     manager.registerDecoratorType('image', ImageDecorator);

resources/js/wysiwyg/ui/toolbars.ts

@@ -6,7 +6,7 @@ import {
     infoCallout, italic, link, numberList, paragraph,
     redo, source, strikethrough, subscript,
     successCallout, superscript, table, taskList, textColor, underline,
-    undo,
+    undo, unlink,
     warningCallout
 } from "./defaults/button-definitions";
 import {EditorContainerUiElement, EditorSimpleClassContainer, EditorUiContext, EditorUiElement} from "./framework/core";
@@ -91,4 +91,11 @@ export function getMainEditorFullToolbar(): EditorContainerUiElement {
 
 export function getImageToolbarContent(): EditorUiElement[] {
     return [new EditorButton(image)];
+}
+
+export function getLinkToolbarContent(): EditorUiElement[] {
+    return [
+        new EditorButton(link),
+        new EditorButton(unlink),
+    ];
 }