Merge pull request #2222 from visuddhinanda/agile

add word-counter

dashboard/src/components/article/TypeArticleReaderToolbar.tsx

@@ -6,6 +6,7 @@ import {
   EditOutlined,
   FileOutlined,
   CopyOutlined,
+  InfoCircleOutlined,
 } from "@ant-design/icons";
 
 import { useAppSelector } from "../../hooks";
@@ -18,6 +19,7 @@ import AnthologiesAtArticle from "./AnthologiesAtArticle";
 import { TRole } from "../api/Auth";
 import { useIntl } from "react-intl";
 import { TabIcon } from "../../assets/icon";
+import WordCount from "./WordCount";
 
 interface IWidget {
   articleId?: string;
@@ -41,6 +43,7 @@ const TypeArticleReaderToolbarWidget = ({
   const user = useAppSelector(currentUser);
   const [addToAnthologyOpen, setAddToAnthologyOpen] = useState(false);
   const [tplOpen, setTplOpen] = useState(false);
+  const [wordCountOpen, setWordCountOpen] = useState(false);
 
   const editable = role === "owner" || role === "manager" || role === "editor";
 
@@ -131,6 +134,11 @@ const TypeArticleReaderToolbarWidget = ({
                   icon: <CopyOutlined />,
                   disabled: user ? false : true,
                 },
+                {
+                  label: "字数统计",
+                  key: "word-count",
+                  icon: <InfoCircleOutlined />,
+                },
               ],
               onClick: ({ key }) => {
                 console.log(`Click on item ${key}`);
@@ -151,6 +159,9 @@ const TypeArticleReaderToolbarWidget = ({
                   case "tpl":
                     setTplOpen(true);
                     break;
+                  case "word-count":
+                    setWordCountOpen(true);
+                    break;
                   case "edit":
                     if (typeof onEdit !== "undefined") {
                       onEdit();
@@ -185,6 +196,11 @@ const TypeArticleReaderToolbarWidget = ({
         open={tplOpen}
         onOpenChange={(visible: boolean) => setTplOpen(visible)}
       />
+      <WordCount
+        open={wordCountOpen}
+        articleId={articleId}
+        onClose={() => setWordCountOpen(false)}
+      />
     </div>
   );
 };

dashboard/src/components/article/WordCount.tsx

@@ -0,0 +1,64 @@
+import { Descriptions, Modal } from "antd";
+import { LoadingOutlined } from "@ant-design/icons";
+import { useEffect, useState } from "react";
+
+import { get } from "../../request";
+import { IArticleResponse } from "../api/Article";
+
+interface IWidget {
+  open?: boolean;
+  articleId?: string;
+  onClose?: Function;
+}
+const WordCount = ({ open = false, articleId, onClose }: IWidget) => {
+  const [loading, setLoading] = useState(false);
+  const [wordAll, setWordAll] = useState(0);
+  useEffect(() => {
+    if (!articleId) {
+      return;
+    }
+    const url = `/v2/article/${articleId}?format=text&origin=true`;
+    console.info("url", url);
+    setLoading(true);
+    get<IArticleResponse>(url)
+      .then((json) => {
+        console.info("api response", json);
+        if (json.ok) {
+          if (json.data.html) {
+            setWordAll(json.data.html.length);
+          }
+        }
+      })
+      .finally(() => setLoading(false));
+  }, [articleId]);
+
+  return (
+    <Modal
+      destroyOnClose={true}
+      width={700}
+      title={"字数统计"}
+      open={open}
+      footer={false}
+      onOk={() => {
+        if (typeof onClose !== "undefined") {
+          onClose();
+        }
+      }}
+      onCancel={() => {
+        if (typeof onClose !== "undefined") {
+          onClose();
+        }
+      }}
+    >
+      {loading ? (
+        <LoadingOutlined />
+      ) : (
+        <Descriptions title="字数">
+          <Descriptions.Item label="全部字符">{wordAll}</Descriptions.Item>
+        </Descriptions>
+      )}
+    </Modal>
+  );
+};
+
+export default WordCount;