Lexical: Added basic list button/support

diff --git a/package-lock.json b/package-lock.json
index 2cddccb590075472f29009692f48f59ca420f919..0757e786873c06a69a5625191fc0aace5e2d06fd 100644 (file)
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
         "@lexical/history": "^0.15.0",
         "@lexical/html": "^0.15.0",
         "@lexical/link": "^0.15.0",
         "@lexical/history": "^0.15.0",
         "@lexical/html": "^0.15.0",
         "@lexical/link": "^0.15.0",

+        "@lexical/list": "^0.15.0",

         "@lexical/rich-text": "^0.15.0",
         "@lexical/selection": "^0.15.0",
         "@lexical/utils": "^0.15.0",
         "@lexical/rich-text": "^0.15.0",
         "@lexical/selection": "^0.15.0",
         "@lexical/utils": "^0.15.0",

diff --git a/package.json b/package.json
index d9fa89c186a578e6ccd9fcfa9e16f530c7e8006e..732bb1759806f3c31ca2d1382002271eea6cc5d4 100644 (file)
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "@lexical/history": "^0.15.0",
     "@lexical/html": "^0.15.0",
     "@lexical/link": "^0.15.0",
     "@lexical/history": "^0.15.0",
     "@lexical/html": "^0.15.0",
     "@lexical/link": "^0.15.0",

+    "@lexical/list": "^0.15.0",

     "@lexical/rich-text": "^0.15.0",
     "@lexical/selection": "^0.15.0",
     "@lexical/utils": "^0.15.0",
     "@lexical/rich-text": "^0.15.0",
     "@lexical/selection": "^0.15.0",
     "@lexical/utils": "^0.15.0",

diff --git a/resources/js/wysiwyg/nodes/index.ts b/resources/js/wysiwyg/nodes/index.ts
index f47575bc5f615bb25ed84c57e8978910768ecc11..03fcd33a5b3e6606ae36aac7be90b5e4a7994679 100644 (file)
--- a/resources/js/wysiwyg/nodes/index.ts
+++ b/resources/js/wysiwyg/nodes/index.ts
@@ -5,6 +5,7 @@ import {CustomParagraphNode} from "./custom-paragraph";
 import {LinkNode} from "@lexical/link";
 import {ImageNode} from "./image";
 import {DetailsNode, SummaryNode} from "./details";
 import {LinkNode} from "@lexical/link";
 import {ImageNode} from "./image";
 import {DetailsNode, SummaryNode} from "./details";

+import {ListItemNode, ListNode} from "@lexical/list";

 
 /**
  * Load the nodes for lexical.
 
 /**
  * Load the nodes for lexical.


@@ -14,6 +15,8 @@ export function getNodesForPageEditor(): (KlassConstructor<typeof LexicalNode> |
         CalloutNode, // Todo - Create custom
         HeadingNode, // Todo - Create custom
         QuoteNode, // Todo - Create custom
         CalloutNode, // Todo - Create custom
         HeadingNode, // Todo - Create custom
         QuoteNode, // Todo - Create custom

+        ListNode, // Todo - Create custom
+        ListItemNode,

         ImageNode,
         DetailsNode, SummaryNode,
         CustomParagraphNode,
         ImageNode,
         DetailsNode, SummaryNode,
         CustomParagraphNode,

diff --git a/resources/js/wysiwyg/ui/defaults/button-definitions.ts b/resources/js/wysiwyg/ui/defaults/button-definitions.ts
index d8c7f515cca7c2855ed750869f98545bfd67b900..57460ef60eda9a37cb4a96b02898fc86f25d9bb2 100644 (file)
--- a/resources/js/wysiwyg/ui/defaults/button-definitions.ts
+++ b/resources/js/wysiwyg/ui/defaults/button-definitions.ts
@@ -1,11 +1,11 @@
 import {EditorBasicButtonDefinition, EditorButtonDefinition} from "../framework/buttons";
 import {
     $createNodeSelection,
 import {EditorBasicButtonDefinition, EditorButtonDefinition} from "../framework/buttons";
 import {
     $createNodeSelection,

-    $createParagraphNode, $getRoot, $getSelection, $insertNodes,
+    $createParagraphNode, $getRoot, $getSelection,

     $isParagraphNode, $isTextNode, $setSelection,
     BaseSelection, ElementNode, FORMAT_TEXT_COMMAND,
     LexicalNode,
     $isParagraphNode, $isTextNode, $setSelection,
     BaseSelection, ElementNode, FORMAT_TEXT_COMMAND,
     LexicalNode,

-    REDO_COMMAND, TextFormatType, TextNode,
+    REDO_COMMAND, TextFormatType,

     UNDO_COMMAND
 } from "lexical";
 import {
     UNDO_COMMAND
 } from "lexical";
 import {


@@ -23,12 +23,12 @@ import {
     HeadingNode,
     HeadingTagType
 } from "@lexical/rich-text";
     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 {EditorUiContext} from "../framework/core";
 import {$isImageNode, ImageNode} from "../../nodes/image";
 import {$createDetailsNode, $isDetailsNode} from "../../nodes/details";

-import {$insertNodeToNearestRoot} from "@lexical/utils";

 import {getEditorContentAsHtml} from "../../actions";
 import {getEditorContentAsHtml} from "../../actions";

+import {$isListNode, insertList, ListNode, ListType, removeList} from "@lexical/list";

 
 export const undo: EditorButtonDefinition = {
     label: 'Undo',
 
 export const undo: EditorButtonDefinition = {
     label: 'Undo',


@@ -155,6 +155,31 @@ export const clearFormating: EditorButtonDefinition = {
     }
 };
 
     }
 };
 

+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 = {
     label: 'Insert/edit link',
 
 export const link: EditorButtonDefinition = {
     label: 'Insert/edit link',

diff --git a/resources/js/wysiwyg/ui/toolbars.ts b/resources/js/wysiwyg/ui/toolbars.ts
index de90a1d70b338bc0bc91bf00a39c4285772c224d..fe19b94ed7a95e666a11f43b956291ec8cf8c0a2 100644 (file)
--- a/resources/js/wysiwyg/ui/toolbars.ts
+++ b/resources/js/wysiwyg/ui/toolbars.ts
@@ -1,11 +1,11 @@
 import {EditorButton} from "./framework/buttons";
 import {
 import {EditorButton} from "./framework/buttons";
 import {

-    blockquote, bold, clearFormating, code,
+    blockquote, bold, bulletList, clearFormating, code,

     dangerCallout, details,
     h2, h3, h4, h5, highlightColor, image,
     dangerCallout, details,
     h2, h3, h4, h5, highlightColor, image,

-    infoCallout, italic, link, paragraph,
+    infoCallout, italic, link, numberList, paragraph,

     redo, source, strikethrough, subscript,
     redo, source, strikethrough, subscript,

-    successCallout, superscript, textColor, underline,
+    successCallout, superscript, taskList, textColor, underline,

     undo,
     warningCallout
 } from "./defaults/button-definitions";
     undo,
     warningCallout
 } from "./defaults/button-definitions";


@@ -53,6 +53,11 @@ export function getMainEditorFullToolbar(): EditorContainerUiElement {
         new EditorButton(code),
         new EditorButton(clearFormating),
 
         new EditorButton(code),
         new EditorButton(clearFormating),
 

+        // Lists
+        new EditorButton(bulletList),
+        new EditorButton(numberList),
+        new EditorButton(taskList),
+

         // Insert types
         new EditorButton(link),
         new EditorButton(image),
         // Insert types
         new EditorButton(link),
         new EditorButton(image),

diff --git a/resources/sass/_editor.scss b/resources/sass/_editor.scss
index b98e624bdf3f0fd92ceec1945ce0266a0187ec97..13d8e96f98bec14e3f195c460d1b5501bd6884f3 100644 (file)
--- a/resources/sass/_editor.scss
+++ b/resources/sass/_editor.scss
@@ -6,6 +6,7 @@
 // Main UI elements
 .editor-toolbar-main {
   display: flex;
 // Main UI elements
 .editor-toolbar-main {
   display: flex;

+  flex-wrap: wrap;

 }
 
 // Buttons
 }
 
 // Buttons