添加锚点内容的逐词解析切换

dashboard/src/components/comment/AnchorCard.tsx

@@ -0,0 +1,56 @@
+import { useIntl } from "react-intl";
+import { useState } from "react";
+import { Card, Space, Segmented } from "antd";
+
+import store from "../../store";
+import { modeChange } from "../../reducers/article-mode";
+import { ArticleMode } from "../article/Article";
+
+interface IWidgetArticleCard {
+  children?: React.ReactNode;
+  onModeChange?: Function;
+}
+const Widget = ({ children, onModeChange }: IWidgetArticleCard) => {
+  const intl = useIntl();
+  const [mode, setMode] = useState<string>("read");
+
+  const modeSwitch = (
+    <Segmented
+      size="middle"
+      options={[
+        {
+          label: intl.formatMessage({ id: "buttons.translate" }),
+          value: "edit",
+        },
+        {
+          label: intl.formatMessage({ id: "buttons.wbw" }),
+          value: "wbw",
+        },
+      ]}
+      value={mode}
+      onChange={(value) => {
+        const newMode = value.toString();
+        if (typeof onModeChange !== "undefined") {
+          if (mode === "read" || newMode === "read") {
+            onModeChange(newMode);
+          }
+        }
+        setMode(newMode);
+        //发布mode变更
+        store.dispatch(modeChange(newMode as ArticleMode));
+      }}
+    />
+  );
+
+  return (
+    <Card
+      size="small"
+      title={<Space>{"title"}</Space>}
+      extra={<Space>{modeSwitch}</Space>}
+    >
+      {children}
+    </Card>
+  );
+};
+
+export default Widget;

dashboard/src/components/comment/CommentAnchor.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { get } from "../../request";
 import { ICommentAnchorResponse } from "../api/Comment";
 import MdView from "../template/MdView";
+import AnchorCard from "./AnchorCard";
 
 interface IWidget {
   id?: string;
@@ -22,7 +23,9 @@ const Widget = ({ id }: IWidget) => {
   }, [id]);
   return (
     <div>
-      <MdView html={content} />
+      <AnchorCard>
+        <MdView html={content} />
+      </AnchorCard>
     </div>
   );
 };