From ed517c6e047f90143623e8e32da3748849a94a4e Mon Sep 17 00:00:00 2001
From: kehua <kehuaning@easyops.com>
Date: Mon, 24 Jul 2023 15:28:32 +0800
Subject: [PATCH] =?UTF-8?q?feat():=20v3=20markdown=E6=9E=84=E4=BB=B6?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81checkbox=E8=AF=AD=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ref: POKEMON-583
---
 .../markdown-editor/components/ListItem.tsx   | 41 +++++++++++++++++++
 bricks/markdown/src/markdown-editor/index.tsx |  8 ++++
 .../markdown-editor.shadow.css                | 13 ++++++
 3 files changed, 62 insertions(+)
 create mode 100644 bricks/markdown/src/markdown-editor/components/ListItem.tsx

diff --git a/bricks/markdown/src/markdown-editor/components/ListItem.tsx b/bricks/markdown/src/markdown-editor/components/ListItem.tsx
new file mode 100644
index 000000000..78986f870
--- /dev/null
+++ b/bricks/markdown/src/markdown-editor/components/ListItem.tsx
@@ -0,0 +1,41 @@
+import { useNodeViewContext } from "@prosemirror-adapter/react";
+import type { FC } from "react";
+import React from "react";
+import classNames from "classnames";
+
+export const ListItem: FC = () => {
+  const { contentRef, node, setAttrs, selected } = useNodeViewContext();
+  const { attrs } = node;
+  const checked = attrs?.checked;
+  const isBullet = attrs?.listType === "bullet";
+  return (
+    <li
+      className={classNames("checkboxLi", {
+        "ProseMirror-selectednode": selected,
+      })}
+    >
+      <span style={{ display: "flex", height: "1.5rem", alignItems: "center" }}>
+        {checked != null ? (
+          <input
+            style={{ borderRadius: "0.25rem" }}
+            onChange={() => setAttrs({ checked: !checked })}
+            type="checkbox"
+            checked={checked}
+          />
+        ) : isBullet ? (
+          <span
+            style={{
+              height: "0.5rem",
+              width: "0.5rem",
+              borderRadius: "9999px",
+              backgroundColor: "rgb(129,161,193)",
+            }}
+          />
+        ) : (
+          <span style={{ color: "rgb(136,192,208)" }}>{attrs?.label}</span>
+        )}
+      </span>
+      <div style={{ minWidth: "0" }} ref={contentRef} />
+    </li>
+  );
+};
diff --git a/bricks/markdown/src/markdown-editor/index.tsx b/bricks/markdown/src/markdown-editor/index.tsx
index 6bc6d8ae5..23eb309e4 100644
--- a/bricks/markdown/src/markdown-editor/index.tsx
+++ b/bricks/markdown/src/markdown-editor/index.tsx
@@ -19,6 +19,7 @@ import {
   wrapInOrderedListCommand,
   wrapInBlockquoteCommand,
   codeBlockSchema,
+  listItemSchema,
 } from "@milkdown/preset-commonmark";
 import { nord } from "@milkdown/theme-nord";
 import { history, redoCommand, undoCommand } from "@milkdown/plugin-history";
@@ -48,11 +49,13 @@ import {
   tableTooltipCtx,
 } from "./components/TableWidget.tsx";
 import { CodeBlock } from "./components/CodeBlock.tsx";
+import { ListItem } from "./components/ListItem.tsx";
 import type { FormItem, FormItemProps } from "@next-bricks/form/form-item";
 import { FormItemElementBase } from "@next-shared/form";
 
 const WrappedFormItem = wrapBrick<FormItem, FormItemProps>("eo-form-item");
 
+
 const WrappedIcon = wrapBrick<GeneralIcon, GeneralIconProps>("eo-icon");
 
 const MenuButton: FC<MenuButtonProps> = ({ icon, onClick, tooltip }) => {
@@ -308,6 +311,11 @@ export function MarkdownEditorComponent(props: MarkdownEditorProps) {
         $view(codeBlockSchema.node, () =>
           nodeViewFactory({ component: CodeBlock })
         )
+      )
+      .use(
+        $view(listItemSchema.node, () =>
+          nodeViewFactory({ component: ListItem })
+        )
       );
   }, []);
 
diff --git a/bricks/markdown/src/markdown-editor/markdown-editor.shadow.css b/bricks/markdown/src/markdown-editor/markdown-editor.shadow.css
index bffc8a426..6fdb6b09b 100644
--- a/bricks/markdown/src/markdown-editor/markdown-editor.shadow.css
+++ b/bricks/markdown/src/markdown-editor/markdown-editor.shadow.css
@@ -1988,3 +1988,16 @@ pre[class*="language-"] {
 .token.entity {
   cursor: help;
 }
+
+/* checkbox */
+
+.checkboxLi {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+}
+
+li p {
+  margin: 0 !important;
+  line-height: 1.5rem !important;
+}