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