[PE-193] feat: flat lists

packages/editor/package.json

@@ -42,11 +42,13 @@
     "@plane/utils": "*",
     "@tiptap/core": "^2.1.13",
     "@tiptap/extension-blockquote": "^2.1.13",
+    "@tiptap/extension-bullet-list": "^2.10.3",
     "@tiptap/extension-character-count": "^2.6.5",
     "@tiptap/extension-collaboration": "^2.3.2",
     "@tiptap/extension-image": "^2.1.13",
-    "@tiptap/extension-list-item": "^2.1.13",
+    "@tiptap/extension-list-item": "^2.10.3",
     "@tiptap/extension-mention": "^2.1.13",
+    "@tiptap/extension-ordered-list": "^2.10.3",
     "@tiptap/extension-placeholder": "^2.3.0",
     "@tiptap/extension-task-item": "^2.1.13",
     "@tiptap/extension-task-list": "^2.1.13",
@@ -64,6 +66,7 @@
     "lowlight": "^3.0.0",
     "lucide-react": "^0.378.0",
     "prosemirror-codemark": "^0.4.2",
+    "prosemirror-safari-ime-span": "^1.0.2",
     "prosemirror-utils": "^1.2.2",
     "react-moveable": "^0.54.2",
     "tippy.js": "^6.3.7",

packages/editor/src/core/components/menus/bubble-menu/node-selector.tsx

@@ -18,6 +18,7 @@ import {
   HeadingFiveItem,
   HeadingSixItem,
   EditorMenuItem,
+  ToggleListItem,
 } from "@/components/menus";
 // types
 import { TEditorCommands } from "@/types";
@@ -42,6 +43,7 @@ export const BubbleMenuNodeSelector: FC<Props> = (props) => {
     BulletListItem(editor),
     NumberedListItem(editor),
     TodoListItem(editor),
+    ToggleListItem(editor),
     QuoteItem(editor),
     CodeItem(editor),
   ];

packages/editor/src/core/components/menus/menu-items.ts

@@ -22,6 +22,7 @@ import {
   MinusSquare,
   Palette,
   AlignCenter,
+  ListCollapse,
 } from "lucide-react";
 // helpers
 import {
@@ -33,18 +34,19 @@ import {
   toggleBackgroundColor,
   toggleBlockquote,
   toggleBold,
-  toggleBulletList,
   toggleCodeBlock,
+  toggleFlatBulletList,
+  toggleFlatOrderedList,
+  toggleFlatTaskList,
+  toggleFlatToggleList,
   toggleHeadingFive,
   toggleHeadingFour,
   toggleHeadingOne,
   toggleHeadingSix,
   toggleHeadingThree,
   toggleHeadingTwo,
   toggleItalic,
-  toggleOrderedList,
   toggleStrike,
-  toggleTaskList,
   toggleTextColor,
   toggleUnderline,
 } from "@/helpers/editor-commands";
@@ -153,27 +155,35 @@ export const StrikeThroughItem = (editor: Editor): EditorMenuItem<"strikethrough
 export const BulletListItem = (editor: Editor): EditorMenuItem<"bulleted-list"> => ({
   key: "bulleted-list",
   name: "Bulleted list",
-  isActive: () => editor?.isActive("bulletList"),
-  command: () => toggleBulletList(editor),
+  isActive: () => editor?.isActive("list", { kind: "bullet" }),
+  command: () => toggleFlatBulletList(editor),
   icon: ListIcon,
 });
 
 export const NumberedListItem = (editor: Editor): EditorMenuItem<"numbered-list"> => ({
   key: "numbered-list",
   name: "Numbered list",
-  isActive: () => editor?.isActive("orderedList"),
-  command: () => toggleOrderedList(editor),
+  isActive: () => editor?.isActive("list", { kind: "ordered" }),
+  command: () => toggleFlatOrderedList(editor),
   icon: ListOrderedIcon,
 });
 
 export const TodoListItem = (editor: Editor): EditorMenuItem<"to-do-list"> => ({
   key: "to-do-list",
   name: "To-do list",
-  isActive: () => editor.isActive("taskItem"),
-  command: () => toggleTaskList(editor),
+  isActive: () => editor?.isActive("list", { kind: "task" }),
+  command: () => toggleFlatTaskList(editor),
   icon: CheckSquare,
 });
 
+export const ToggleListItem = (editor: Editor): EditorMenuItem<"toggle-list"> => ({
+  key: "toggle-list",
+  name: "Toggle list",
+  isActive: () => editor?.isActive("list", { kind: "toggle" }),
+  command: () => toggleFlatToggleList(editor),
+  icon: ListCollapse,
+});
+
 export const QuoteItem = (editor: Editor): EditorMenuItem<"quote"> => ({
   key: "quote",
   name: "Quote",
@@ -257,6 +267,7 @@ export const getEditorMenuItems = (editor: Editor | null): EditorMenuItem<TEdito
     StrikeThroughItem(editor),
     BulletListItem(editor),
     TodoListItem(editor),
+    ToggleListItem(editor),
     CodeItem(editor),
     NumberedListItem(editor),
     QuoteItem(editor),

packages/editor/src/core/extensions/custom-list-keymap/list-keymap.ts

@@ -43,15 +43,15 @@ export const ListKeymap = ({ tabIndex }: { tabIndex?: number }) =>
           if (tabIndex !== undefined && tabIndex !== null) {
             return false;
           }
-          return true;
+          return false;
         },
         "Shift-Tab": () => {
           if (this.editor.commands.liftListItem("listItem")) {
             return true;
           } else if (this.editor.commands.liftListItem("taskItem")) {
             return true;
           }
-          return true;
+          return false;
         },
         Delete: ({ editor }) => {
           try {