feat(): v3 markdown构件支持checkbox语法

Ref: POKEMON-583
easyops-cn · Jul 24, 2023 · a49eda5 · a49eda5
1 parent caa77ef
commit a49eda5
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 0 deletions.
diff --git a/bricks/markdown/src/markdown-editor/components/ListItem.tsx 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
@@ -20,6 +20,7 @@ import {
   wrapInOrderedListCommand,
   wrapInBlockquoteCommand,
   codeBlockSchema,
+  listItemSchema,
 } from "@milkdown/preset-commonmark";
 import { nord } from "@milkdown/theme-nord";
 import { history, redoCommand, undoCommand } from "@milkdown/plugin-history";
@@ -49,6 +50,7 @@ import {
   tableTooltipCtx,
 } from "./components/TableWidget.tsx";
 import { CodeBlock } from "./components/CodeBlock.tsx";
+import { ListItem } from "./components/ListItem.tsx";
 
 const WrappedIcon = wrapBrick<GeneralIcon, GeneralIconProps>("eo-icon");
 
@@ -281,6 +283,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
@@ -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;
+}