编辑markdown

component/options/custom.tsx

@@ -1,4 +1,4 @@
-import { DownloadOutlined, StarTwoTone } from "@ant-design/icons"
+import { DownloadOutlined, EditOutlined, StarTwoTone } from "@ant-design/icons"
 import { Input } from "antd"
 import { useEffect, useState } from "react"
 
@@ -25,6 +25,12 @@ export default function Custom() {
     sendToContentScript({ name: `custom-scrollIntoViewCode`, body: { index } })
   }
 
+  function editMarkdown() {
+    sendToContentScript({
+      name: "custom-editMarkdown"
+    })
+  }
+
   function downloadMarkdown() {
     sendToContentScript({
       name: "custom-downloadMarkdown"
@@ -86,6 +92,13 @@ export default function Custom() {
           onChange={(e) => setRenderValue(e.target.value)}
           onBlur={(e) => setStoreValue()}></Input.TextArea>
       </div>
+      <div className="item download" onClick={editMarkdown}>
+        <span>
+          <StarTwoTone twoToneColor="#eb2f96" style={{ marginRight: "5px" }} />
+          {i18n("editMarkdown")}
+        </span>
+        <EditOutlined style={{ color: "#52c41a", fontSize: "16px" }} />
+      </div>
       <div className="item download" onClick={downloadMarkdown}>
         <span>
           <StarTwoTone twoToneColor="#eb2f96" style={{ marginRight: "5px" }} />

component/options/juejin.tsx

@@ -1,10 +1,16 @@
-import { DownloadOutlined, StarTwoTone } from "@ant-design/icons"
+import { DownloadOutlined, EditOutlined, StarTwoTone } from "@ant-design/icons"
 
 import { sendToContentScript } from "@plasmohq/messaging"
 
 import { i18n } from "~tools"
 
 export default function Juejin() {
+  function editMarkdown() {
+    sendToContentScript({
+      name: "juejin-editMarkdown"
+    })
+  }
+
   function downloadMarkdown() {
     sendToContentScript({
       name: "juejin-downloadMarkdown"
@@ -20,6 +26,13 @@ export default function Juejin() {
   return (
     <fieldset>
       <legend>{i18n("juejinConfig")}</legend>
+      <div className="item download" onClick={editMarkdown}>
+        <span>
+          <StarTwoTone twoToneColor="#eb2f96" style={{ marginRight: "5px" }} />
+          {i18n("editMarkdown")}
+        </span>
+        <EditOutlined style={{ color: "#52c41a", fontSize: "16px" }} />
+      </div>
       <div className="item download" onClick={downloadMarkdown}>
         <span>
           <StarTwoTone twoToneColor="#eb2f96" style={{ marginRight: "5px" }} />

contents/custom.tsx

@@ -12,6 +12,7 @@ import { useEffect, useRef, useState } from "react"
 
 import { sendToBackground } from "@plasmohq/messaging"
 import { useMessage } from "@plasmohq/messaging/hook"
+import { Storage } from "@plasmohq/storage"
 import { useStorage } from "@plasmohq/storage/hook"
 
 import { ThemeProvider } from "~theme"
@@ -45,6 +46,12 @@ export default function CustomOverlay() {
   const [closeLog] = useStorage("config-closeLog", true)
   const [codesDom, setCodesDom] = useState([])
   const [codes, setCodes] = useStorage("app-codes", [])
+  const [content, setContent] = useStorage({
+    key: "md-content",
+    instance: new Storage({
+      area: "local"
+    })
+  })
   const [isCurrentDom, setIsCurrentDom] = useState<boolean>(false)
   const [rect, setRect] = useState<any>(() => {
     return { top: 0, right: 0 }
@@ -79,7 +86,7 @@ export default function CustomOverlay() {
     if (req.name == "custom-downloadMarkdown") {
       isReady = true
       isSelect = false
-      isDownloadType = "markdown"
+      isDownloadType = "downloadMarkdown"
       messageApi.info("请在页面选择要下载区域！")
     }
     if (req.name == "custom-downloadPdf") {
@@ -94,6 +101,12 @@ export default function CustomOverlay() {
       isDownloadType = "img"
       messageApi.info("请在页面选择要下载区域！")
     }
+    if (req.name == "custom-editMarkdown") {
+      isReady = true
+      isSelect = false
+      isDownloadType = "editMarkdown"
+      messageApi.info("请在页面选择要下载区域！")
+    }
     if (req.name == "app-full-page-screenshot") {
       const { scrollHeight, clientHeight } = document.documentElement
       const devicePixelRatio = window.devicePixelRatio || 1
@@ -170,7 +183,8 @@ export default function CustomOverlay() {
     document.addEventListener("click", (event) => {
       const target = event.target as HTMLElement
       const tooltip = target.closest("#codebox-csui")
-      if (isReady && target && !tooltip) {
+      const modal = target.closest(".ant-modal")
+      if (isReady && target && !tooltip && !modal) {
         isSelect = true
         setIsCurrentDom(true)
         removeCurrentDom()
@@ -209,6 +223,12 @@ export default function CustomOverlay() {
     saveMarkdown(markdown, articleTitle)
   }
 
+  function editMarkdown(currentDom) {
+    const markdown = turndownService.turndown(currentDom)
+    setContent(markdown)
+    window.open("https://md.randbox.top", "_blank")
+  }
+
   function downloadPdf(currentDom) {
     const pdf = new Dom2Pdf(currentDom, articleTitle)
     pdf.downloadPdf()
@@ -224,8 +244,10 @@ export default function CustomOverlay() {
     removeCurrentDom()
     if (isDownloadType == "html") {
       downloadHtml(currentDom)
-    } else if (isDownloadType == "markdown") {
+    } else if (isDownloadType == "downloadMarkdown") {
       downloadMarkdown(currentDom)
+    } else if (isDownloadType == "editMarkdown") {
+      editMarkdown(currentDom)
     } else if (isDownloadType == "pdf") {
       downloadPdf(currentDom)
     } else if (isDownloadType == "img") {
@@ -243,7 +265,7 @@ export default function CustomOverlay() {
         <>
           <div style={{ fontSize: "18px" }}>是否保存？</div>
           <div style={{ fontSize: "14px", color: "red" }}>
-            此功能限时免费免登录，预计10月份以后需要注册，后续可能收费...
+            此功能限时免费免登录，预计需要注册，后续可能收费...
           </div>
         </>
       ),

contents/juejin.tsx

@@ -1,7 +1,9 @@
 import type { PlasmoCSConfig } from "plasmo"
-import { useEffect } from "react"
+import { useEffect, useState } from "react"
 
 import { useMessage } from "@plasmohq/messaging/hook"
+import { Storage } from "@plasmohq/storage"
+import { useStorage } from "@plasmohq/storage/dist/hook"
 
 import { saveHtml, saveMarkdown, setIcon } from "~tools"
 import Turndown from "~utils/turndown"
@@ -14,6 +16,13 @@ const turndownService = Turndown()
 const articleTitle = document.querySelector<HTMLElement>("head title").innerText
 
 export default function Juejin() {
+  const [content, setContent] = useStorage({
+    key: "md-content",
+    instance: new Storage({
+      area: "local"
+    })
+  })
+
   useEffect(() => {
     setIcon(true)
   }, [])
@@ -22,6 +31,9 @@ export default function Juejin() {
     if (req.name == "juejin-isShow") {
       res.send({ isShow: true })
     }
+    if (req.name == "juejin-editMarkdown") {
+      editMarkdown()
+    }
     if (req.name == "juejin-downloadMarkdown") {
       downloadMarkdown()
     }
@@ -30,6 +42,13 @@ export default function Juejin() {
     }
   })
 
+  function editMarkdown() {
+    const html = document.querySelector("article.article")
+    const markdown = turndownService.turndown(html)
+    setContent(markdown)
+    window.open("https://md.randbox.top", "_blank")
+  }
+
   function downloadMarkdown() {
     const html = document.querySelector("article.article")
     const markdown = turndownService.turndown(html)

contents/md.tsx

@@ -0,0 +1,29 @@
+import type { PlasmoCSConfig } from "plasmo"
+import { useEffect } from "react"
+
+import { Storage } from "@plasmohq/storage"
+import { useStorage } from "@plasmohq/storage/dist/hook"
+
+export const config: PlasmoCSConfig = {
+  matches: ["https://md.randbox.top/*"]
+}
+
+export default function Markdown() {
+  const [content] = useStorage({
+    key: "md-content",
+    instance: new Storage({
+      area: "local"
+    })
+  })
+
+  useEffect(() => {
+    if (content) {
+      if (window.localStorage.getItem("__editor_content") != content) {
+        window.localStorage.setItem("__editor_content", content)
+        location.reload()
+      }
+    }
+  }, [content])
+
+  return <div style={{ display: "none" }}></div>
+}

locales/en/messages.json

@@ -128,6 +128,9 @@
   "zhihuAutoOpenCode": {
     "message": "Auto Open Code"
   },
+  "editMarkdown": {
+    "message": "Edit Markdown"
+  },
   "downloadMarkdown": {
     "message": "Download Markdown"
   },

locales/zh_CN/messages.json

@@ -128,6 +128,9 @@
   "zhihuAutoOpenCode": {
     "message": "自动展开全文"
   },
+  "editMarkdown": {
+    "message": "编辑 Markdown"
+  },
   "downloadMarkdown": {
     "message": "下载 Markdown"
   },

package.json

@@ -1,7 +1,7 @@
 {
   "name": "code-box",
   "displayName": "__MSG_extensionName__",
-  "version": "0.7.6",
+  "version": "0.7.7",
   "description": "__MSG_extensionDescription__",
   "author": "027xiguapi. <458813868@qq.com>",
   "scripts": {