support edit

oeyoews · Mar 22, 2024 · 72d982e · 72d982e
1 parent a9574d7
commit 72d982e
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 93 deletions.
diff --git a/README.md b/README.md
@@ -11,7 +11,6 @@ This template should help get you started developing with Vue 3 in WXT.
 ## TODO
 
 * darkmode
-* 支持编辑
 * 支持保存到 tiddlywiki
 * 支持保存到 github
 * 右键菜单

diff --git a/entrypoints/popup/Popup.vue b/entrypoints/popup/Popup.vue
@@ -9,110 +9,51 @@ import FaFileTextO from '~icons/fa/file-text-o';
 import FaRegularSave from '~icons/fa-regular/save';
 import { ElMessage, ElNotification } from 'element-plus'
 import { ref, } from 'vue';
-import { html2md, md2html } from '@/composables/parser';
-
-
-const article = ref<Partial<IArticle>>({
-  title: '',
-  content: '',
-  excerpt: ''
-})
+import saveMarkdown from '@/utils/saveMarkdown'
+import { html2md, md2html } from '@/utils/parser'
 
+const html = ref('')
 const md = ref('')
 const link = ref('')
 const faviconUrl = ref('')
+const title = ref('')
 
 function getArticle() {
   chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
     const tab = tabs[0]
     link.value = tab.url!;
     faviconUrl.value = tab.favIconUrl!
     // @ts-ignore
-    chrome.tabs.sendMessage(tab.id, '', async function (response) {
-      article.value = response
-      const content = await html2md(response.content);
-      md.value = content.toString()
+    chrome.tabs.sendMessage(tab.id, '', async function (response: IArticle) {
+      html.value = response.content
+      title.value = response.title
+      md.value = await html2md(response.content);
     })
 
   })
 }
 
 getArticle()
 
-// watch(md, () => {
-//   ElMessage({
-//     message: '修改成功'
-//   })
-//   article.value.content = md.value
-// })
-
-
-function saveMarkdownFile() {
-
-  const blob = new Blob([md.value], { type: 'text/markdown' });
-  const link = document.createElement('a');
-  link.href = URL.createObjectURL(blob);
-  link.download = `${article.value.title}.md`
-
-  document.body.appendChild(link);
-  link.click();
-
-
-  URL.revokeObjectURL(link.href);
-
-  ElMessage({
-    message: '保存成功',
-    type: 'success'
-  })
-
-}
-
-function saveMarkdownFile2() {
-  // 创建一个 Blob 对象，包含新的 Markdown 内容
-  const blob = new Blob([md.value], { type: 'text/markdown' });
-
-  async function saveFile(blob: Blob) {
-    try {
-      const options = {
-        suggestedName: article.value.title + '.md',// 设置默认文件名
-        types: [
-          {
-            description: 'Markdown 文件 (.md)',
-            accept: {
-              'text/markdown': ['.md']
-            }
-          }
-        ]
-      };
-      // @ts-ignore
-      const handle = await window.showSaveFilePicker(options);
-      const writable = await handle.createWritable();
-      await writable.write(blob);
-      await writable.close();
-      console.log('文件已保存');
-    } catch (err) {
-      console.error('保存文件时出错：', err);
-    }
-  }
-
-  // 调用 saveFile 函数并传入 Blob 对象
-  saveFile(blob);
-
-}
+watch(md, async () => {
+  // ElMessage({
+  //   message: '修改成功'
+  // })
+  html.value = (await md2html(md.value))
+})
 
-// function save2TiddlyWiki() { }
 
 </script>
 
 <template>
   <div class="app">
     <!-- version -->
-    <div class="fixedright0 top2 sticky top-0">
+    <div class="sticky top-0 backdrop-blur-sm mb-2">
       <div class="flex justify-end">
         <ElButton>
           Home
         </ElButton>
-        <el-button @click="saveMarkdownFile">
+        <el-button @click="saveMarkdown(md, title!)">
           <el-icon>
             <FaRegularSave />
           </el-icon>
@@ -121,43 +62,41 @@ function saveMarkdownFile2() {
     </div>
     <el-tabs type="border-card">
 
-      <el-tab-pane>
-        <template #label>
-          <FaRegularEdit />
-        </template>
-
-        <el-input placeholder="写点什么吧 ..." v-model="md" :autosize="{ minRows: 4, maxRows: 20 }" type="textarea"
-          spellcheck="false" class="w-full" />
-      </el-tab-pane>
-
       <el-tab-pane>
         <template #label>
           <el-icon>
             <FaFileTextO />
           </el-icon>
         </template>
-        <div v-if="article.title">
+        <div v-if="title">
           <div class="flex items-center justify-center gap-2">
             <h2>
               <a :href="link" target="_blank" v-if="link">
                 <img :src="faviconUrl" class="rounded-full size-4" />
               </a>
-              {{ article.title }}
+              {{ title }}
             </h2>
           </div>
           <hr>
           <article class="prose prose-gray max-w-none prose-sm dark:prose-invert">
-            <h2>摘要</h2>
-            <div v-html="article.excerpt"></div>
-            <h2>内容</h2>
-            <div v-html="article.content"></div>
+            <div v-html="html"></div>
           </article>
         </div>
         <div v-else>
           <h2>暂无内容</h2>
         </div>
       </el-tab-pane>
 
+      <ElTabPane>
+        <template #label>
+          <FaRegularEdit />
+        </template>
+
+        <el-input type="text" v-model="title" class="mb-1" />
+        <el-input placeholder="写点什么吧 ..." v-model="md" :autosize="{ minRows: 4, maxRows: 20 }" type="textarea"
+          spellcheck="false" class="w-full" />
+      </ElTabPane>
+
 
     </el-tabs>
 

diff --git a/composables/parser.ts → utils/parser.ts b/composables/parser.ts → utils/parser.ts
@@ -20,7 +20,7 @@ async function md2html(markdown: string) {
     .use(rehypeSanitize)
     .use(rehypeStringify);
 
-  return await md2htmlParser.process(markdown);
+  return (await md2htmlParser.process(markdown)).toString();
 }
 
 async function html2md(html: string) {
@@ -31,7 +31,7 @@ async function html2md(html: string) {
     .use(remarkStringify)
     // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
     .use(remarkPangu);
-  return await html2mdParser.process(html);
+  return (await html2mdParser.process(html)).toString();
 }
 
 export { md2html, html2md };
diff --git a/utils/saveMarkdown.ts b/utils/saveMarkdown.ts
@@ -0,0 +1,53 @@
+import { ElMessage } from 'element-plus';
+
+function saveMarkdown(markdown: string, title: string) {
+  const blob = new Blob([markdown], { type: 'text/markdown' });
+  const link = document.createElement('a');
+  link.href = URL.createObjectURL(blob);
+  link.download = `${title}.md`;
+
+  document.body.appendChild(link);
+  link.click();
+
+  URL.revokeObjectURL(link.href);
+
+  ElMessage({
+    message: '保存成功',
+    type: 'success',
+  });
+}
+
+export default saveMarkdown;
+
+/* function saveMarkdownFile2() {
+  // 创建一个 Blob 对象，包含新的 Markdown 内容
+  const blob = new Blob([md.value], { type: 'text/markdown' });
+
+  async function saveFile(blob: Blob) {
+    try {
+      const options = {
+        suggestedName: title + '.md', // 设置默认文件名
+        types: [
+          {
+            description: 'Markdown 文件 (.md)',
+            accept: {
+              'text/markdown': ['.md'],
+            },
+          },
+        ],
+      };
+      // @ts-ignore
+      const handle = await window.showSaveFilePicker(options);
+      const writable = await handle.createWritable();
+      await writable.write(blob);
+      await writable.close();
+      console.log('文件已保存');
+    } catch (err) {
+      console.error('保存文件时出错：', err);
+    }
+  }
+
+  // 调用 saveFile 函数并传入 Blob 对象
+  saveFile(blob);
+}
+ */