Lexical: Finished off baseline shortcut implementation

resources/js/wysiwyg/ui/defaults/buttons/lists.ts

@@ -1,11 +1,12 @@
-import {$isListNode, insertList, ListNode, ListType, removeList} from "@lexical/list";
+import {$isListNode, ListNode, ListType} from "@lexical/list";
 import {EditorButtonDefinition} from "../../framework/buttons";
 import {EditorUiContext} from "../../framework/core";
-import {$getSelection, BaseSelection, LexicalNode} from "lexical";
+import {BaseSelection, LexicalNode} from "lexical";
 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 {$selectionContainsNodeType} from "../../../utils/selection";
+import {toggleSelectionAsList} from "../../../utils/formats";
 
 
 function buildListButton(label: string, type: ListType, icon: string): EditorButtonDefinition {
@@ -13,14 +14,7 @@ function buildListButton(label: string, type: ListType, icon: string): EditorBut
         label,
         icon,
         action(context: EditorUiContext) {
-            context.editor.getEditorState().read(() => {
-                const selection = $getSelection();
-                if (this.isActive(selection, context)) {
-                    removeList(context.editor);
-                } else {
-                    insertList(context.editor, type);
-                }
-            });
+            toggleSelectionAsList(context.editor, type);
         },
         isActive(selection: BaseSelection|null): boolean {
             return $selectionContainsNodeType(selection, (node: LexicalNode | null | undefined): boolean => {

resources/js/wysiwyg/ui/defaults/buttons/objects.ts

@@ -2,11 +2,9 @@ import {EditorButtonDefinition} from "../../framework/buttons";
 import linkIcon from "@icons/editor/link.svg";
 import {EditorUiContext} from "../../framework/core";
 import {
-    $createNodeSelection,
     $createTextNode,
     $getRoot,
     $getSelection, $insertNodes,
-    $setSelection,
     BaseSelection,
     ElementNode
 } from "lexical";
@@ -17,7 +15,7 @@ import {$isImageNode, ImageNode} from "../../../nodes/image";
 import horizontalRuleIcon from "@icons/editor/horizontal-rule.svg";
 import {$createHorizontalRuleNode, $isHorizontalRuleNode} from "../../../nodes/horizontal-rule";
 import codeBlockIcon from "@icons/editor/code-block.svg";
-import {$createCodeBlockNode, $isCodeBlockNode, $openCodeEditorForNode, CodeBlockNode} from "../../../nodes/code-block";
+import {$isCodeBlockNode} from "../../../nodes/code-block";
 import editIcon from "@icons/edit.svg";
 import diagramIcon from "@icons/editor/diagram.svg";
 import {$createDiagramNode, DiagramNode} from "../../../nodes/diagram";
@@ -32,35 +30,16 @@ import {
 } from "../../../utils/selection";
 import {$isDiagramNode, $openDrawingEditorForNode, showDiagramManagerForInsert} from "../../../utils/diagrams";
 import {$createLinkedImageNodeFromImageData, showImageManager} from "../../../utils/images";
-import {$showImageForm} from "../forms/objects";
+import {$showImageForm, $showLinkForm} from "../forms/objects";
 import {formatCodeBlock} from "../../../utils/formats";
 
 export const link: EditorButtonDefinition = {
     label: 'Insert/edit link',
     icon: linkIcon,
     action(context: EditorUiContext) {
-        const linkModal = context.manager.createModal('link');
         context.editor.getEditorState().read(() => {
-            const selection = $getSelection();
-            const selectedLink = $getNodeFromSelection(selection, $isLinkNode) as LinkNode | null;
-
-            let formDefaults = {};
-            if (selectedLink) {
-                formDefaults = {
-                    url: selectedLink.getURL(),
-                    text: selectedLink.getTextContent(),
-                    title: selectedLink.getTitle(),
-                    target: selectedLink.getTarget(),
-                }
-
-                context.editor.update(() => {
-                    const selection = $createNodeSelection();
-                    selection.add(selectedLink.getKey());
-                    $setSelection(selection);
-                });
-            }
-
-            linkModal.show(formDefaults);
+            const selectedLink = $getNodeFromSelection($getSelection(), $isLinkNode) as LinkNode | null;
+            $showLinkForm(selectedLink, context);
         });
     },
     isActive(selection: BaseSelection | null): boolean {

resources/js/wysiwyg/ui/defaults/forms/objects.ts

@@ -5,9 +5,9 @@ import {
     EditorSelectFormFieldDefinition
 } from "../../framework/forms";
 import {EditorUiContext} from "../../framework/core";
-import {$createTextNode, $getSelection, $insertNodes} from "lexical";
+import {$createNodeSelection, $createTextNode, $getSelection, $insertNodes, $setSelection} from "lexical";
 import {$isImageNode, ImageNode} from "../../../nodes/image";
-import {$createLinkNode, $isLinkNode} from "@lexical/link";
+import {$createLinkNode, $isLinkNode, LinkNode} from "@lexical/link";
 import {$createMediaNodeFromHtml, $createMediaNodeFromSrc, $isMediaNode, MediaNode} from "../../../nodes/media";
 import {$insertNodeToNearestRoot} from "@lexical/utils";
 import {$getNodeFromSelection, getLastSelection} from "../../../utils/selection";
@@ -19,6 +19,7 @@ import searchImageIcon from "@icons/editor/image-search.svg";
 import searchIcon from "@icons/search.svg";
 import {showLinkSelector} from "../../../utils/links";
 import {LinkField} from "../../framework/blocks/link-field";
+import {insertOrUpdateLink} from "../../../utils/formats";
 
 export function $showImageForm(image: ImageNode, context: EditorUiContext) {
     const imageModal: EditorFormModal = context.manager.createModal('image');
@@ -96,37 +97,36 @@ export const image: EditorFormDefinition = {
     ],
 };
 
+export function $showLinkForm(link: LinkNode|null, context: EditorUiContext) {
+    const linkModal = context.manager.createModal('link');
+
+    let formDefaults = {};
+    if (link) {
+        formDefaults = {
+            url: link.getURL(),
+            text: link.getTextContent(),
+            title: link.getTitle(),
+            target: link.getTarget(),
+        }
+
+        context.editor.update(() => {
+            const selection = $createNodeSelection();
+            selection.add(link.getKey());
+            $setSelection(selection);
+        });
+    }
+
+    linkModal.show(formDefaults);
+}
+
 export const link: EditorFormDefinition = {
     submitText: 'Apply',
     async action(formData, context: EditorUiContext) {
-        context.editor.update(() => {
-
-            const url = formData.get('url')?.toString() || '';
-            const title = formData.get('title')?.toString() || ''
-            const target = formData.get('target')?.toString() || '';
-            const text = formData.get('text')?.toString() || '';
-
-            const selection = $getSelection();
-            let link = $getNodeFromSelection(selection, $isLinkNode);
-            if ($isLinkNode(link)) {
-                link.setURL(url);
-                link.setTarget(target);
-                link.setTitle(title);
-            } else {
-                link = $createLinkNode(url, {
-                    title: title,
-                    target: target,
-                });
-
-                $insertNodes([link]);
-            }
-
-            if ($isLinkNode(link)) {
-                for (const child of link.getChildren()) {
-                    child.remove(true);
-                }
-                link.append($createTextNode(text));
-            }
+        insertOrUpdateLink(context.editor, {
+            url: formData.get('url')?.toString() || '',
+            title: formData.get('title')?.toString() || '',
+            target: formData.get('target')?.toString() || '',
+            text: formData.get('text')?.toString() || '',
         });
         return true;
     },