Lexical: Started adding editor shortcuts

resources/js/wysiwyg/utils/diagrams.ts

@@ -5,7 +5,7 @@ import * as DrawIO from "../../services/drawio";
 import {$createDiagramNode, DiagramNode} from "../nodes/diagram";
 import {ImageManager} from "../../components";
 import {EditorImageData} from "./images";
-import {$getNodeFromSelection} from "./selection";
+import {$getNodeFromSelection, getLastSelection} from "./selection";
 
 export function $isDiagramNode(node: LexicalNode | null | undefined): node is DiagramNode {
     return node instanceof DiagramNode;
@@ -80,7 +80,7 @@ export function showDiagramManager(callback: (image: EditorImageData) => any) {
 }
 
 export function showDiagramManagerForInsert(context: EditorUiContext) {
-    const selection = context.lastSelection;
+    const selection = getLastSelection(context.editor);
     showDiagramManager((image: EditorImageData) => {
         context.editor.update(() => {
             const diagramNode = $createDiagramNode(image.id, image.url);

resources/js/wysiwyg/utils/formats.ts

@@ -0,0 +1,88 @@
+import {$isQuoteNode, HeadingNode, HeadingTagType} from "@lexical/rich-text";
+import {$getSelection, LexicalEditor, LexicalNode} from "lexical";
+import {
+    $getBlockElementNodesInSelection,
+    $getNodeFromSelection,
+    $insertNewBlockNodeAtSelection,
+    $toggleSelectionBlockNodeType,
+    getLastSelection
+} from "./selection";
+import {$createCustomHeadingNode, $isCustomHeadingNode} from "../nodes/custom-heading";
+import {$createCustomParagraphNode, $isCustomParagraphNode} from "../nodes/custom-paragraph";
+import {$createCustomQuoteNode} from "../nodes/custom-quote";
+import {$createCodeBlockNode, $isCodeBlockNode, $openCodeEditorForNode, CodeBlockNode} from "../nodes/code-block";
+import {$createCalloutNode, $isCalloutNode, CalloutCategory} from "../nodes/callout";
+
+const $isHeaderNodeOfTag = (node: LexicalNode | null | undefined, tag: HeadingTagType) => {
+    return $isCustomHeadingNode(node) && (node as HeadingNode).getTag() === tag;
+};
+
+export function toggleSelectionAsHeading(editor: LexicalEditor, tag: HeadingTagType) {
+    editor.update(() => {
+        $toggleSelectionBlockNodeType(
+            (node) => $isHeaderNodeOfTag(node, tag),
+            () => $createCustomHeadingNode(tag),
+        )
+    });
+}
+
+export function toggleSelectionAsParagraph(editor: LexicalEditor) {
+    editor.update(() => {
+        $toggleSelectionBlockNodeType($isCustomParagraphNode, $createCustomParagraphNode);
+    });
+}
+
+export function toggleSelectionAsBlockquote(editor: LexicalEditor) {
+    editor.update(() => {
+        $toggleSelectionBlockNodeType($isQuoteNode, $createCustomQuoteNode);
+    });
+}
+
+export function formatCodeBlock(editor: LexicalEditor) {
+    editor.getEditorState().read(() => {
+        const selection = $getSelection();
+        const lastSelection = getLastSelection(editor);
+        const codeBlock = $getNodeFromSelection(lastSelection, $isCodeBlockNode) as (CodeBlockNode | null);
+        if (codeBlock === null) {
+            editor.update(() => {
+                const codeBlock = $createCodeBlockNode();
+                codeBlock.setCode(selection?.getTextContent() || '');
+                $insertNewBlockNodeAtSelection(codeBlock, true);
+                $openCodeEditorForNode(editor, codeBlock);
+                codeBlock.selectStart();
+            });
+        } else {
+            $openCodeEditorForNode(editor, codeBlock);
+        }
+    });
+}
+
+export function cycleSelectionCalloutFormats(editor: LexicalEditor) {
+    editor.update(() => {
+        const selection = $getSelection();
+        const blocks = $getBlockElementNodesInSelection(selection);
+
+        let created = false;
+        for (const block of blocks) {
+            if (!$isCalloutNode(block)) {
+                block.replace($createCalloutNode('info'), true);
+                created = true;
+            }
+        }
+
+        if (created) {
+            return;
+        }
+
+        const types: CalloutCategory[] = ['info', 'warning', 'danger', 'success'];
+        for (const block of blocks) {
+            if ($isCalloutNode(block)) {
+                const type = block.getCategory();
+                const typeIndex = types.indexOf(type);
+                const newIndex = (typeIndex + 1) % types.length;
+                const newType = types[newIndex];
+                block.setCategory(newType);
+            }
+        }
+    });
+}

resources/js/wysiwyg/utils/selection.ts

@@ -8,7 +8,7 @@ import {
     $setSelection,
     BaseSelection,
     ElementFormatType,
-    ElementNode,
+    ElementNode, LexicalEditor,
     LexicalNode,
     TextFormatType
 } from "lexical";
@@ -17,6 +17,17 @@ import {LexicalElementNodeCreator, LexicalNodeMatcher} from "../nodes";
 import {$setBlocksType} from "@lexical/selection";
 
 import {$getParentOfType} from "./nodes";
+import {$createCustomParagraphNode} from "../nodes/custom-paragraph";
+
+const lastSelectionByEditor = new WeakMap<LexicalEditor, BaseSelection|null>;
+
+export function getLastSelection(editor: LexicalEditor): BaseSelection|null {
+    return lastSelectionByEditor.get(editor) || null;
+}
+
+export function setLastSelection(editor: LexicalEditor, selection: BaseSelection|null): void {
+    lastSelectionByEditor.set(editor, selection);
+}
 
 export function $selectionContainsNodeType(selection: BaseSelection | null, matcher: LexicalNodeMatcher): boolean {
     return $getNodeFromSelection(selection, matcher) !== null;
@@ -59,7 +70,7 @@ export function $toggleSelectionBlockNodeType(matcher: LexicalNodeMatcher, creat
     const selection = $getSelection();
     const blockElement = selection ? $getNearestBlockElementAncestorOrThrow(selection.getNodes()[0]) : null;
     if (selection && matcher(blockElement)) {
-        $setBlocksType(selection, $createParagraphNode);
+        $setBlocksType(selection, $createCustomParagraphNode);
     } else {
         $setBlocksType(selection, creator);
     }