BookStack Code Mirror - bookstack/blob - resources/js/wysiwyg/utils/formats.ts

   1 import {
   2     $createParagraphNode,
   3     $createTextNode,
   4     $getSelection,
   5     $insertNodes,
   6     $isParagraphNode,
   7     LexicalEditor,
   8     LexicalNode
   9 } from "lexical";
  10 import {
  11     $getBlockElementNodesInSelection,
  12     $getNodeFromSelection,
  13     $insertNewBlockNodeAtSelection, $selectionContainsNodeType, $selectSingleNode,
  14     $toggleSelectionBlockNodeType,
  15     getLastSelection
  16 } from "./selection";
  17 import {$createCodeBlockNode, $isCodeBlockNode, $openCodeEditorForNode, CodeBlockNode} from "@lexical/rich-text/LexicalCodeBlockNode";
  18 import {$createCalloutNode, $isCalloutNode, CalloutCategory} from "@lexical/rich-text/LexicalCalloutNode";
  19 import {$isListNode, insertList, ListNode, ListType, removeList} from "@lexical/list";
  20 import {$createLinkNode, $isLinkNode} from "@lexical/link";
  21 import {$createHeadingNode, $isHeadingNode, HeadingTagType} from "@lexical/rich-text/LexicalHeadingNode";
  22 import {$createQuoteNode, $isQuoteNode} from "@lexical/rich-text/LexicalQuoteNode";
  23
  24 const $isHeaderNodeOfTag = (node: LexicalNode | null | undefined, tag: HeadingTagType) => {
  25     return $isHeadingNode(node) && node.getTag() === tag;
  26 };
  27
  28 export function toggleSelectionAsHeading(editor: LexicalEditor, tag: HeadingTagType) {
  29     editor.update(() => {
  30         $toggleSelectionBlockNodeType(
  31             (node) => $isHeaderNodeOfTag(node, tag),
  32             () => $createHeadingNode(tag),
  33         )
  34     });
  35 }
  36
  37 export function toggleSelectionAsParagraph(editor: LexicalEditor) {
  38     editor.update(() => {
  39         $toggleSelectionBlockNodeType($isParagraphNode, $createParagraphNode);
  40     });
  41 }
  42
  43 export function toggleSelectionAsBlockquote(editor: LexicalEditor) {
  44     editor.update(() => {
  45         $toggleSelectionBlockNodeType($isQuoteNode, $createQuoteNode);
  46     });
  47 }
  48
  49 export function toggleSelectionAsList(editor: LexicalEditor, type: ListType) {
  50     editor.getEditorState().read(() => {
  51         const selection = $getSelection();
  52         const listSelected = $selectionContainsNodeType(selection, (node: LexicalNode | null | undefined): boolean => {
  53             return $isListNode(node) && (node as ListNode).getListType() === type;
  54         });
  55
  56         if (listSelected) {
  57             removeList(editor);
  58         } else {
  59             insertList(editor, type);
  60         }
  61     });
  62 }
  63
  64 export function formatCodeBlock(editor: LexicalEditor) {
  65     editor.getEditorState().read(() => {
  66         const selection = $getSelection();
  67         const lastSelection = getLastSelection(editor);
  68         const codeBlock = $getNodeFromSelection(lastSelection, $isCodeBlockNode) as (CodeBlockNode | null);
  69         if (codeBlock === null) {
  70             editor.update(() => {
  71                 const codeBlock = $createCodeBlockNode();
  72                 codeBlock.setCode(selection?.getTextContent() || '');
  73
  74                 const selectionNodes = $getBlockElementNodesInSelection(selection);
  75                 const firstSelectionNode = selectionNodes[0];
  76                 const extraNodes = selectionNodes.slice(1);
  77                 if (firstSelectionNode) {
  78                     firstSelectionNode.replace(codeBlock);
  79                     extraNodes.forEach(n => n.remove());
  80                 } else {
  81                     $insertNewBlockNodeAtSelection(codeBlock, true);
  82                 }
  83
  84                 $openCodeEditorForNode(editor, codeBlock);
  85                 $selectSingleNode(codeBlock);
  86             });
  87         } else {
  88             $openCodeEditorForNode(editor, codeBlock);
  89         }
  90     });
  91 }
  92
  93 export function cycleSelectionCalloutFormats(editor: LexicalEditor) {
  94     editor.update(() => {
  95         const selection = $getSelection();
  96         const blocks = $getBlockElementNodesInSelection(selection);
  97
  98         let created = false;
  99         for (const block of blocks) {
 100             if (!$isCalloutNode(block)) {
 101                 block.replace($createCalloutNode('info'), true);
 102                 created = true;
 103             }
 104         }
 105
 106         if (created) {
 107             return;
 108         }
 109
 110         const types: CalloutCategory[] = ['info', 'warning', 'danger', 'success'];
 111         for (const block of blocks) {
 112             if ($isCalloutNode(block)) {
 113                 const type = block.getCategory();
 114                 const typeIndex = types.indexOf(type);
 115                 const newIndex = (typeIndex + 1) % types.length;
 116                 const newType = types[newIndex];
 117                 block.setCategory(newType);
 118             }
 119         }
 120     });
 121 }
 122
 123 export function insertOrUpdateLink(editor: LexicalEditor, linkDetails: {text: string, title: string, target: string, url: string}) {
 124     editor.update(() => {
 125         const selection = $getSelection();
 126         let link = $getNodeFromSelection(selection, $isLinkNode);
 127         if ($isLinkNode(link)) {
 128             link.setURL(linkDetails.url);
 129             link.setTarget(linkDetails.target);
 130             link.setTitle(linkDetails.title);
 131         } else {
 132             link = $createLinkNode(linkDetails.url, {
 133                 title: linkDetails.title,
 134                 target: linkDetails.target,
 135             });
 136
 137             $insertNodes([link]);
 138         }
 139
 140         if ($isLinkNode(link)) {
 141             for (const child of link.getChildren()) {
 142                 child.remove(true);
 143             }
 144             link.append($createTextNode(linkDetails.text));
 145         }
 146     });
 147 }