Lexical: Added basic list button/support

[bookstack] / resources / js / wysiwyg / ui / defaults / button-definitions.ts

diff --git a/resources/js/wysiwyg/ui/defaults/button-definitions.ts b/resources/js/wysiwyg/ui/defaults/button-definitions.ts
index 92f0cfc8120104751c1ae50cd931369c85e7601a..57460ef60eda9a37cb4a96b02898fc86f25d9bb2 100644 (file)
--- a/resources/js/wysiwyg/ui/defaults/button-definitions.ts
+++ b/resources/js/wysiwyg/ui/defaults/button-definitions.ts
@@ -1,9 +1,9 @@
-import {EditorButtonDefinition} from "../framework/buttons";
+import {EditorBasicButtonDefinition, EditorButtonDefinition} from "../framework/buttons";
 import {
     $createNodeSelection,
-    $createParagraphNode, $getSelection,
-    $isParagraphNode, $setSelection,
-    BaseSelection, FORMAT_TEXT_COMMAND,
+    $createParagraphNode, $getRoot, $getSelection,
+    $isParagraphNode, $isTextNode, $setSelection,
+    BaseSelection, ElementNode, FORMAT_TEXT_COMMAND,
     LexicalNode,
     REDO_COMMAND, TextFormatType,
     UNDO_COMMAND
@@ -23,9 +23,12 @@ import {
     HeadingNode,
     HeadingTagType
 } from "@lexical/rich-text";
-import {$isLinkNode, $toggleLink, LinkNode} from "@lexical/link";
+import {$isLinkNode, LinkNode} from "@lexical/link";
 import {EditorUiContext} from "../framework/core";
 import {$isImageNode, ImageNode} from "../../nodes/image";
+import {$createDetailsNode, $isDetailsNode} from "../../nodes/details";
+import {getEditorContentAsHtml} from "../../actions";
+import {$isListNode, insertList, ListNode, ListType, removeList} from "@lexical/list";
 
 export const undo: EditorButtonDefinition = {
     label: 'Undo',
@@ -128,13 +131,54 @@ function buildFormatButton(label: string, format: TextFormatType): EditorButtonD
 export const bold: EditorButtonDefinition = buildFormatButton('Bold', 'bold');
 export const italic: EditorButtonDefinition = buildFormatButton('Italic', 'italic');
 export const underline: EditorButtonDefinition = buildFormatButton('Underline', 'underline');
-// Todo - Text color
-// Todo - Highlight color
+export const textColor: EditorBasicButtonDefinition = {label: 'Text color'};
+export const highlightColor: EditorBasicButtonDefinition = {label: 'Highlight color'};
+
 export const strikethrough: EditorButtonDefinition = buildFormatButton('Strikethrough', 'strikethrough');
 export const superscript: EditorButtonDefinition = buildFormatButton('Superscript', 'superscript');
 export const subscript: EditorButtonDefinition = buildFormatButton('Subscript', 'subscript');
 export const code: EditorButtonDefinition = buildFormatButton('Inline Code', 'code');
-// Todo - Clear formatting
+export const clearFormating: EditorButtonDefinition = {
+    label: 'Clear formatting',
+    action(context: EditorUiContext) {
+        context.editor.update(() => {
+            const selection = $getSelection();
+            for (const node of selection?.getNodes() || []) {
+                if ($isTextNode(node)) {
+                    node.setFormat(0);
+                }
+            }
+        });
+    },
+    isActive() {
+        return false;
+    }
+};
+
+function buildListButton(label: string, type: ListType): EditorButtonDefinition {
+    return {
+        label,
+        action(context: EditorUiContext) {
+            context.editor.getEditorState().read(() => {
+                const selection = $getSelection();
+                if (this.isActive(selection)) {
+                    removeList(context.editor);
+                } else {
+                    insertList(context.editor, type);
+                }
+            });
+        },
+        isActive(selection: BaseSelection|null): boolean {
+            return selectionContainsNodeType(selection, (node: LexicalNode | null | undefined): boolean => {
+                return $isListNode(node) && (node as ListNode).getListType() === type;
+            });
+        }
+    };
+}
+
+export const bulletList: EditorButtonDefinition = buildListButton('Bullet list', 'bullet');
+export const numberList: EditorButtonDefinition = buildListButton('Numbered list', 'number');
+export const taskList: EditorButtonDefinition = buildListButton('Task list', 'check');
 
 
 export const link: EditorButtonDefinition = {
@@ -201,3 +245,41 @@ export const image: EditorButtonDefinition = {
     }
 };
 
+export const details: EditorButtonDefinition = {
+    label: 'Insert collapsible block',
+    action(context: EditorUiContext) {
+        context.editor.update(() => {
+            const selection = $getSelection();
+            const detailsNode = $createDetailsNode();
+            const selectionNodes = selection?.getNodes() || [];
+            const topLevels = selectionNodes.map(n => n.getTopLevelElement())
+                .filter(n => n !== null) as ElementNode[];
+            const uniqueTopLevels = [...new Set(topLevels)];
+
+            if (uniqueTopLevels.length > 0) {
+                uniqueTopLevels[0].insertAfter(detailsNode);
+            } else {
+                $getRoot().append(detailsNode);
+            }
+
+            for (const node of uniqueTopLevels) {
+                detailsNode.append(node);
+            }
+        });
+    },
+    isActive(selection: BaseSelection|null): boolean {
+        return selectionContainsNodeType(selection, $isDetailsNode);
+    }
+}
+
+export const source: EditorButtonDefinition = {
+    label: 'Source code',
+    async action(context: EditorUiContext) {
+        const modal = context.manager.createModal('source');
+        const source = await getEditorContentAsHtml(context.editor);
+        modal.show({source});
+    },
+    isActive() {
+        return false;
+    }
+};
\ No newline at end of file