refactor: the way to select images for post editing (#421)

Signed-off-by: Ryan Wang <i@ryanc.cc>

package.json

@@ -31,7 +31,7 @@
     "filepond": "^4.30.3",
     "filepond-plugin-file-validate-type": "^1.2.6",
     "filepond-plugin-image-preview": "^4.6.10",
-    "halo-editor": "^2.8.3",
+    "halo-editor": "^2.8.4",
     "marked": "^4.0.10",
     "md5.js": "^1.3.5",
     "nprogress": "^0.2.0",

pnpm-lock.yaml

@@ -22,7 +22,7 @@ specifiers:
   filepond: ^4.30.3
   filepond-plugin-file-validate-type: ^1.2.6
   filepond-plugin-image-preview: ^4.6.10
-  halo-editor: ^2.8.3
+  halo-editor: ^2.8.4
   husky: ^6.0.0
   less: ^3.13.1
   less-loader: ^5.0.0
@@ -57,7 +57,7 @@ dependencies:
   filepond: 4.30.3
   filepond-plugin-file-validate-type: 1.2.6_filepond@4.30.3
   filepond-plugin-image-preview: 4.6.10_filepond@4.30.3
-  halo-editor: 2.8.3
+  halo-editor: 2.8.4
   marked: 4.0.10
   md5.js: 1.3.5
   nprogress: 0.2.0
@@ -4317,6 +4317,10 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /github-markdown-css/4.0.0:
+    resolution: {integrity: sha512-mH0bcIKv4XAN0mQVokfTdKo2OD5K8WJE9+lbMdM32/q0Ie5tXgVN/2o+zvToRMxSTUuiTRcLg5hzkFfOyBYreg==}
+    dev: false
+
   /glob-parent/5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
@@ -4387,9 +4391,10 @@ packages:
       duplexer: 0.1.2
     dev: true
 
-  /halo-editor/2.8.3:
-    resolution: {integrity: sha512-5vzJdCJxuNNQl0qMgkjuEMXMdRoBLhMjl8NloPof/W7EFYvfoEp/vD8h2JzwXkDEugHM19SDmO5QNyH6oyr8rQ==}
+  /halo-editor/2.8.4:
+    resolution: {integrity: sha512-uRE3zRGgP9HujeU1dbIcGIDNHF2FJMvnuUGAnJx3wFXtqEEAzq+QK/zHqhngsOQa09AS0OJMYfDfWsjASqYXjg==}
     dependencies:
+      github-markdown-css: 4.0.0
       highlight.js: 9.18.5
       highlight.js-async-webpack: 1.0.4
     dev: false

src/components/Editor/MarkdownEditor.vue

@@ -1,14 +1,19 @@
 <template>
-  <halo-editor
-    ref="md"
-    v-model="originalContentData"
-    :boxShadow="false"
-    :ishljs="true"
-    :toolbars="toolbars"
-    autofocus
-    @imgAdd="handleAttachmentUpload"
-    @save="handleSaveDraft"
-  />
+  <div class="h-full">
+    <halo-editor
+      ref="md"
+      v-model="originalContentData"
+      :boxShadow="false"
+      :ishljs="true"
+      :toolbars="toolbars"
+      autofocus
+      @imgAdd="handleAttachmentUpload"
+      @openImagePicker="attachmentSelectVisible = true"
+      @save="handleSaveDraft"
+    />
+
+    <AttachmentSelectModal :visible.sync="attachmentSelectVisible" @confirm="handleSelectAttachment" />
+  </div>
 </template>
 <script>
 import { toolbars } from '@/core/const'
@@ -31,7 +36,8 @@ export default {
   data() {
     return {
       toolbars,
-      originalContentData: ''
+      originalContentData: '',
+      attachmentSelectVisible: false
     }
   },
   watch: {
@@ -53,6 +59,13 @@ export default {
         this.$log.error('update image error: ', e)
       }
     },
+    handleSelectAttachment({ markdown }) {
+      this.$refs.md.insertText(this.$refs.md.getTextareaDom(), {
+        prefix: '',
+        subfix: '',
+        str: markdown.join('\n')
+      })
+    },
     handleSaveDraft() {
       this.$emit('onSaveDraft')
     }

src/views/post/PostEdit.vue

@@ -14,7 +14,6 @@
         ></ReactiveButton>
         <a-button :loading="previewSaving" @click="handlePreview">预览</a-button>
         <a-button type="primary" @click="postSettingVisible = true">发布</a-button>
-        <a-button type="dashed" @click="attachmentSelectVisible = true">附件库</a-button>
       </a-space>
     </template>
     <a-row :gutter="12">
@@ -38,8 +37,6 @@
       :visible.sync="postSettingVisible"
       @onUpdate="onUpdateFromSetting"
     />
-
-    <AttachmentSelectModal :visible.sync="attachmentSelectVisible" @confirm="handleSelectAttachment" />
   </page-view>
 </template>
 
@@ -63,7 +60,6 @@ export default {
   },
   data() {
     return {
-      attachmentSelectVisible: false,
       postSettingVisible: false,
       postToStage: {},
       contentChanges: 0,
@@ -212,13 +208,6 @@ export default {
         })
       }
     },
-    handleSelectAttachment({ markdown }) {
-      this.$set(
-        this.postToStage,
-        'originalContent',
-        (this.postToStage.originalContent || '') + '\n' + markdown.join(`\n`)
-      )
-    },
     handleRestoreSavedStatus() {
       this.contentChanges = 0
     },

src/views/sheet/SheetEdit.vue

@@ -14,7 +14,6 @@
         ></ReactiveButton>
         <a-button :loading="previewSaving" @click="handlePreview">预览</a-button>
         <a-button type="primary" @click="sheetSettingVisible = true">发布</a-button>
-        <a-button type="dashed" @click="attachmentSelectVisible = true">附件库</a-button>
       </a-space>
     </template>
     <a-row :gutter="12">
@@ -39,8 +38,6 @@
       :visible.sync="sheetSettingVisible"
       @onUpdate="onUpdateFromSetting"
     />
-
-    <AttachmentSelectModal :visible.sync="attachmentSelectVisible" @confirm="handleSelectAttachment" />
   </page-view>
 </template>
 
@@ -61,7 +58,6 @@ export default {
   mixins: [mixin, mixinDevice, mixinPostEdit],
   data() {
     return {
-      attachmentSelectVisible: false,
       sheetSettingVisible: false,
       sheetToStage: {},
       contentChanges: 0,
@@ -207,13 +203,6 @@ export default {
         })
       }
     },
-    handleSelectAttachment({ markdown }) {
-      this.$set(
-        this.sheetToStage,
-        'originalContent',
-        (this.sheetToStage.originalContent || '') + '\n' + markdown.join(`\n`)
-      )
-    },
     handleRestoreSavedStatus() {
       this.contentChanges = 0
     },