[PE-193] feat: flat lists (ordered and unordered)

live/package.json

@@ -23,8 +23,8 @@
     "@plane/constants": "*",
     "@plane/editor": "*",
     "@plane/types": "*",
-    "@tiptap/core": "2.10.4",
-    "@tiptap/html": "2.11.0",
+    "@tiptap/core": "^2.22.3",
+    "@tiptap/html": "^2.22.3",
     "axios": "^1.8.3",
     "compression": "^1.7.4",
     "cors": "^2.8.5",

package.json

@@ -33,7 +33,8 @@
     "@babel/helpers": "7.26.10",
     "@babel/runtime": "7.26.10",
     "chokidar": "3.6.0",
-    "tar-fs": "3.0.9"
+    "tar-fs": "3.0.9",
+    "prosemirror-view": "1.40.0"
   },
   "packageManager": "[email protected]"
 }

packages/editor/package.json

@@ -39,32 +39,31 @@
     "@plane/types": "*",
     "@plane/ui": "*",
     "@plane/utils": "*",
-    "@tiptap/core": "2.10.4",
-    "@tiptap/extension-blockquote": "2.10.4",
-    "@tiptap/extension-character-count": "2.11.0",
-    "@tiptap/extension-collaboration": "2.11.0",
-    "@tiptap/extension-image": "2.11.0",
-    "@tiptap/extension-list-item": "2.11.0",
-    "@tiptap/extension-mention": "2.11.0",
-    "@tiptap/extension-placeholder": "2.11.0",
-    "@tiptap/extension-task-item": "2.11.0",
-    "@tiptap/extension-task-list": "2.11.0",
-    "@tiptap/extension-text-align": "2.11.0",
-    "@tiptap/extension-text-style": "2.11.0",
-    "@tiptap/extension-underline": "2.11.0",
-    "@tiptap/html": "2.11.0",
-    "@tiptap/pm": "2.11.0",
-    "@tiptap/react": "2.11.0",
-    "@tiptap/starter-kit": "2.11.0",
-    "@tiptap/suggestion": "2.11.0",
-    "class-variance-authority": "^0.7.0",
+    "@tiptap/core": "^2.22.3",
+    "@tiptap/extension-blockquote": "^2.22.3",
+    "@tiptap/extension-character-count": "^2.22.3",
+    "@tiptap/extension-collaboration": "^2.22.3",
+    "@tiptap/extension-image": "^2.22.3",
+    "@tiptap/extension-list-item": "^2.22.3",
+    "@tiptap/extension-mention": "^2.22.3",
+    "@tiptap/extension-placeholder": "^2.22.3",
+    "@tiptap/extension-task-item": "^2.22.3",
+    "@tiptap/extension-task-list": "^2.22.3",
+    "@tiptap/extension-text-align": "^2.22.3",
+    "@tiptap/extension-text-style": "^2.22.3",
+    "@tiptap/extension-underline": "^2.22.3",
+    "@tiptap/html": "^2.22.3",
+    "@tiptap/pm": "^2.22.3",
+    "@tiptap/react": "^2.22.3",
+    "@tiptap/starter-kit": "^2.22.3",
+    "@tiptap/suggestion": "^2.22.3",
     "highlight.js": "^11.8.0",
     "jsx-dom-cjs": "^8.0.3",
     "linkifyjs": "^4.1.3",
     "lowlight": "^3.0.0",
     "lucide-react": "^0.469.0",
     "prosemirror-codemark": "^0.4.2",
-    "prosemirror-utils": "^1.2.2",
+    "prosemirror-safari-ime-span": "^1.0.2",
     "tippy.js": "^6.3.7",
     "tiptap-markdown": "^0.8.10",
     "uuid": "^10.0.0",

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";
 // constants
 import { CORE_EXTENSIONS } from "@/constants/extension";
@@ -35,13 +36,14 @@ import {
   toggleBackgroundColor,
   toggleBlockquote,
   toggleBold,
-  toggleBulletList,
   toggleCodeBlock,
+  toggleFlatBulletList,
+  toggleFlatOrderedList,
+  toggleFlatTaskList,
+  toggleFlatToggleList,
   toggleHeading,
   toggleItalic,
-  toggleOrderedList,
   toggleStrike,
-  toggleTaskList,
   toggleTextColor,
   toggleUnderline,
 } from "@/helpers/editor-commands";
@@ -136,27 +138,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(CORE_EXTENSIONS.BULLET_LIST),
-  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(CORE_EXTENSIONS.ORDERED_LIST),
-  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(CORE_EXTENSIONS.TASK_ITEM),
-  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",
@@ -248,6 +258,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/constants/extension.ts

@@ -41,4 +41,5 @@ export enum CORE_EXTENSIONS {
   UNDERLINE = "underline",
   UTILITY = "utility",
   WORK_ITEM_EMBED = "issue-embed-component",
+  LIST = "list",
 }

packages/editor/src/core/extensions/callout/block.tsx

@@ -10,14 +10,14 @@ import { EAttributeNames, TCalloutBlockAttributes } from "./types";
 // utils
 import { updateStoredBackgroundColor } from "./utils";
 
-type Props = NodeViewProps & {
+export type CustomCalloutNodeViewProps = NodeViewProps & {
   node: NodeViewProps["node"] & {
     attrs: TCalloutBlockAttributes;
   };
   updateAttributes: (attrs: Partial<TCalloutBlockAttributes>) => void;
 };
 
-export const CustomCalloutBlock: React.FC<Props> = (props) => {
+export const CustomCalloutBlock: React.FC<CustomCalloutNodeViewProps> = (props) => {
   const { editor, node, updateAttributes } = props;
   // states
   const [isEmojiPickerOpen, setIsEmojiPickerOpen] = useState(false);

packages/editor/src/core/extensions/callout/extension.tsx

@@ -1,6 +1,6 @@
 import { findParentNodeClosestToPos, Predicate, ReactNodeViewRenderer } from "@tiptap/react";
 // extensions
-import { CustomCalloutBlock } from "@/extensions";
+import { CustomCalloutBlock, CustomCalloutNodeViewProps } from "@/extensions/callout";
 // helpers
 import { insertEmptyParagraphAtNodeBoundaries } from "@/helpers/insert-empty-paragraph-at-node-boundary";
 // config
@@ -63,6 +63,8 @@ export const CustomCalloutExtension = CustomCalloutExtensionConfig.extend({
   },
 
   addNodeView() {
-    return ReactNodeViewRenderer(CustomCalloutBlock);
+    return ReactNodeViewRenderer((props) => (
+      <CustomCalloutBlock {...props} node={props.node as CustomCalloutNodeViewProps["node"]} />
+    ));
   },
 });

packages/editor/src/core/extensions/callout/read-only-extension.tsx

@@ -1,6 +1,6 @@
 import { ReactNodeViewRenderer } from "@tiptap/react";
 // extensions
-import { CustomCalloutBlock } from "@/extensions";
+import { CustomCalloutBlock, CustomCalloutNodeViewProps } from "@/extensions/callout";
 // config
 import { CustomCalloutExtensionConfig } from "./extension-config";
 
@@ -9,6 +9,8 @@ export const CustomCalloutReadOnlyExtension = CustomCalloutExtensionConfig.exten
   draggable: false,
 
   addNodeView() {
-    return ReactNodeViewRenderer(CustomCalloutBlock);
+    return ReactNodeViewRenderer((props) => (
+      <CustomCalloutBlock {...props} node={props.node as CustomCalloutNodeViewProps["node"]} />
+    ));
   },
 });