support bullet and numbered lists

cloverich · Jun 8, 2024 · 2b9037c · 2b9037c
1 parent 10c721e
commit 2b9037c
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 33 deletions.
diff --git a/src/markdown/remark-slate-transformer/transformers/mdast-to-slate.ts b/src/markdown/remark-slate-transformer/transformers/mdast-to-slate.ts
@@ -176,8 +176,10 @@ export type List = ReturnType<typeof createList>;
 
 function createList(node: mdast.List, deco: Decoration) {
   const { type, children, ordered, start, spread } = node;
+
   return {
-    type: ordered ? ELEMENT_OL : ELEMENT_UL, // todo: support check list items? No, support those via different function
+    // type is "list" in mdast, but slate expects "ol" or "ul"
+    type: ordered ? ELEMENT_OL : ELEMENT_UL,
     children: convertNodes(children, deco),
     ordered,
     start,

diff --git a/src/markdown/remark-slate-transformer/transformers/slate-to-mdast.ts b/src/markdown/remark-slate-transformer/transformers/slate-to-mdast.ts
@@ -327,9 +327,11 @@ function createBlockquote(node: SlateNodes.Blockquote): mdast.Blockquote {
 
 function createList(node: SlateNodes.List): mdast.List {
   const { type, ordered, start, spread, children } = node;
+
   return {
-    type: "list",
-    ordered,
+    // type is "ol" or "ul" in plate, but mdast expects "list"
+    type: "list", // type: ol, ul
+    ordered: type === "ol",
     start,
     spread,
     children: convertNodes(children) as any as mdast.List["children"],

diff --git a/src/views/edit/editor/elements/List.tsx b/src/views/edit/editor/elements/List.tsx
@@ -1,13 +1,14 @@
 import React from "react";
+
 import { withRef, withVariants } from "@udecode/cn";
-import { PlateElement } from "@udecode/plate";
+import { PlateElement } from "@udecode/plate-common";
 import { cva } from "class-variance-authority";
 
 const listVariants = cva("m-0 ps-6", {
   variants: {
     variant: {
-      ul: "list-disc [&_ul]:list-[circle] [&_ul_ul]:list-[square]",
       ol: "list-decimal",
+      ul: "list-disc [&_ul]:list-[circle] [&_ul_ul]:list-[square]",
     },
   },
 });
@@ -16,13 +17,12 @@ const ListElementVariants = withVariants(PlateElement, listVariants, [
   "variant",
 ]);
 
-// https://github.com/udecode/plate/blob/main/apps/www/src/registry/default/plate-ui/list-element.tsx
 export const ListElement = withRef<typeof ListElementVariants>(
-  ({ className, children, variant = "ul", ...props }, ref) => {
+  ({ children, variant = "ul", ...props }, ref) => {
     const Component = variant!;
 
     return (
-      <ListElementVariants ref={ref} asChild {...props}>
+      <ListElementVariants asChild ref={ref} variant={variant} {...props}>
         <Component>{children}</Component>
       </ListElementVariants>
     );

diff --git a/src/views/edit/editor/index.tsx b/src/views/edit/editor/index.tsx
@@ -291,8 +291,8 @@ export default observer(
           // [ELEMENT_MEDIA_EMBED]: MediaEmbedElement,
           // [ELEMENT_MENTION]: MentionElement,
           // [ELEMENT_MENTION_INPUT]: MentionInputElement,
-          [ELEMENT_LI]: withProps(PlateElement, { as: "li" }),
           [ELEMENT_UL]: withProps(ListElement, { variant: "ul" }),
+          [ELEMENT_LI]: withProps(PlateElement, { as: "li" }),
           [ELEMENT_OL]: withProps(ListElement, { variant: "ol" }),
           [ELEMENT_PARAGRAPH]: ParagraphElement,
           // [ELEMENT_TABLE]: TableElement,

diff --git a/src/views/edit/editor/toolbar/components/ChangeBlockDropdown.tsx b/src/views/edit/editor/toolbar/components/ChangeBlockDropdown.tsx
@@ -72,18 +72,18 @@ const items = [
     label: "Code",
     value: ELEMENT_CODE_BLOCK,
   },
-  // {
-  //   value: 'ul',
-  //   label: 'Bulleted list',
-  //   description: 'Bulleted list',
-  //   icon: Icons.ul,
-  // },
-  // {
-  //   value: 'ol',
-  //   label: 'Numbered list',
-  //   description: 'Numbered list',
-  //   icon: Icons.ol,
-  // },
+  {
+    value: "ul",
+    label: "Bulleted list",
+    description: "Bulleted list",
+    icon: Icons.ul,
+  },
+  {
+    value: "ol",
+    label: "Numbered list",
+    description: "Numbered list",
+    icon: Icons.ol,
+  },
 ];
 
 const defaultItem = items.find((item) => item.value === ELEMENT_PARAGRAPH)!;

diff --git a/src/views/edit/editor/toolbar/components/InsertBlockDropdown.tsx b/src/views/edit/editor/toolbar/components/InsertBlockDropdown.tsx
@@ -95,18 +95,18 @@ const items = [
       //   label: "Table",
       //   value: ELEMENT_TABLE,
       // },
-      // {
-      //   description: "Bulleted list",
-      //   icon: Icons.ul,
-      //   label: "Bulleted list",
-      //   value: "ul",
-      // },
-      // {
-      //   description: "Numbered list",
-      //   icon: Icons.ol,
-      //   label: "Numbered list",
-      //   value: "ol",
-      // },
+      {
+        description: "Bulleted list",
+        icon: Icons.ul,
+        label: "Bulleted list",
+        value: "ul",
+      },
+      {
+        description: "Numbered list",
+        icon: Icons.ol,
+        label: "Numbered list",
+        value: "ol",
+      },
       {
         description: "Quote (⌘+⇧+.)",
         icon: Icons.blockquote,