chore: use @halo-dev/editor instead of halo-editor (#447)

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

package.json

@@ -25,13 +25,13 @@
     "@codemirror/lang-html": "^0.19.4",
     "@codemirror/lang-java": "^0.19.1",
     "@halo-dev/admin-api": "^1.0.0-alpha.48",
+    "@halo-dev/editor": "^3.0.0-alpha.0",
     "ant-design-vue": "^1.7.8",
     "dayjs": "^1.10.7",
     "enquire.js": "^2.1.6",
     "filepond": "^4.30.3",
     "filepond-plugin-file-validate-type": "^1.2.6",
     "filepond-plugin-image-preview": "^4.6.10",
-    "halo-editor": "^2.8.4",
     "lodash.debounce": "^4.0.8",
     "marked": "^4.0.10",
     "md5.js": "^1.3.5",

src/components/Editor/MarkdownEditor.vue

@@ -1,30 +1,30 @@
 <template>
   <div class="h-full">
     <halo-editor
-      ref="md"
+      ref="editor"
       v-model="originalContentData"
       :boxShadow="false"
-      :ishljs="true"
-      :toolbars="toolbars"
+      :toolbars="markdownEditorToolbars"
+      :uploadRequest="handleAttachmentUpload"
       autofocus
-      @imgAdd="handleAttachmentUpload"
+      @change="handleChange"
       @openImagePicker="attachmentSelectVisible = true"
-      @save="handleSaveDraft"
+      @save="handleSave"
     />
 
     <AttachmentSelectModal :visible.sync="attachmentSelectVisible" @confirm="handleSelectAttachment" />
   </div>
 </template>
 <script>
-import { toolbars } from '@/core/const'
-import { haloEditor } from 'halo-editor'
-import 'halo-editor/dist/css/index.css'
+import haloEditor from '@halo-dev/editor'
+import '@halo-dev/editor/dist/lib/style.css'
 import apiClient from '@/utils/api-client'
+import { markdownEditorToolbars } from '@/core/constant'
 
 export default {
   name: 'MarkdownEditor',
   components: {
-    haloEditor
+    haloEditor: haloEditor.editor
   },
   props: {
     originalContent: {
@@ -35,39 +35,50 @@ export default {
   },
   data() {
     return {
-      toolbars,
-      originalContentData: '',
+      markdownEditorToolbars,
       attachmentSelectVisible: false
     }
   },
-  watch: {
-    originalContent(val) {
-      this.originalContentData = val
-    },
-    originalContentData(val) {
-      this.$emit('onContentChange', val)
+  computed: {
+    originalContentData: {
+      get() {
+        return this.originalContent
+      },
+      set(value) {
+        this.$emit('update:originalContent', value)
+      }
     }
   },
   methods: {
-    async handleAttachmentUpload(pos, $file) {
-      try {
-        const response = await apiClient.attachment.upload($file)
-        const responseObject = response.data
-        const HaloEditor = this.$refs.md
-        HaloEditor.$img2Url(pos, encodeURI(responseObject.path))
-      } catch (e) {
-        this.$log.error('update image error: ', e)
-      }
-    },
-    handleSelectAttachment({ markdown }) {
-      this.$refs.md.insertText(this.$refs.md.getTextareaDom(), {
-        prefix: '',
-        subfix: '',
-        str: markdown.join('\n')
+    handleAttachmentUpload(file) {
+      return new Promise((resolve, reject) => {
+        const hideLoading = this.$message.loading('上传中...', 0)
+        apiClient.attachment
+          .upload(file)
+          .then(response => {
+            const attachment = response.data
+            resolve({
+              name: attachment.name,
+              path: encodeURI(attachment.path)
+            })
+          })
+          .catch(e => {
+            this.$log.error('upload image error: ', e)
+            reject(e)
+          })
+          .finally(() => {
+            hideLoading()
+          })
       })
     },
-    handleSaveDraft() {
-      this.$emit('onSaveDraft')
+    handleSelectAttachment({ markdown }) {
+      this.$refs.editor.insetAtCursor(markdown.join('\n'))
+    },
+    handleSave() {
+      this.$emit('save')
+    },
+    handleChange({ originalContent, renderContent }) {
+      this.$emit('change', { originalContent, renderContent })
     }
   }
 }

src/core/const.js

@@ -1,25 +0,0 @@
-const toolbars = {
-  bold: true, // 粗体
-  italic: true, // 斜体
-  header: true, // 标题
-  underline: true, // 下划线
-  strikethrough: true, // 中划线
-  quote: true, // 引用
-  ol: true, // 有序列表
-  ul: true, // 无序列表
-  link: true, // 链接
-  code: true, // code
-  table: true, // 表格
-  fullscreen: true, // 全屏编辑
-  readmodel: true, // 沉浸式阅读
-  htmlcode: true, // 展示html源码
-  undo: true, // 上一步
-  redo: true, // 下一步
-  trash: true, // 清空
-  navigation: true, // 导航目录
-  subfield: true, // 单双栏模式
-  preview: true, // 预览
-  imagelink: true // 图片链接
-}
-
-export { toolbars }

src/core/constant.js

@@ -1,3 +1,29 @@
+export const markdownEditorToolbars = {
+  bold: true,
+  italic: true,
+  header: true,
+  underline: true,
+  strikethrough: true,
+  superscript: true,
+  subscript: true,
+  quote: true,
+  ol: true,
+  ul: true,
+  link: true,
+  imagelink: true,
+  code: true,
+  table: true,
+  undo: true,
+  redo: true,
+  save: true,
+  navigation: true,
+  subfield: true,
+  fullscreen: true,
+  readmodel: true,
+  htmlcode: true,
+  preview: true
+}
+
 export const actionLogTypes = {
   BLOG_INITIALIZED: {
     value: 0,

src/views/post/PostEdit.vue

@@ -1,7 +1,7 @@
 <template>
   <page-view
-    :title="postToStage.title ? postToStage.title : '新文章'"
     :sub-title="postToStage.inProgress ? '当前内容已保存，但还未发布。' : ''"
+    :title="postToStage.title ? postToStage.title : '新文章'"
     affix
   >
     <template slot="extra">
@@ -17,9 +17,9 @@
         </div>
         <div id="editor" :style="{ height: editorHeight }">
           <MarkdownEditor
-            :originalContent="postToStage.originalContent"
-            @onContentChange="onContentChange"
-            @onSaveDraft="handleSaveDraft()"
+            :originalContent.sync="postToStage.originalContent"
+            @change="onContentChange"
+            @save="handleSaveDraft()"
           />
         </div>
       </a-col>
@@ -101,7 +101,21 @@ export default {
       return '当前页面数据未保存，确定要离开吗？'
     }
   },
+  beforeMount() {
+    document.addEventListener('keydown', this.onRegisterSaveShortcut)
+  },
+  beforeDestroy() {
+    document.removeEventListener('keydown', this.onRegisterSaveShortcut)
+  },
   methods: {
+    onRegisterSaveShortcut(e) {
+      if ((e.ctrlKey || e.metaKey) && !e.altKey && !e.shiftKey && e.keyCode === 83) {
+        e.preventDefault()
+        e.stopPropagation()
+        this.handleSaveDraft()
+      }
+    },
+
     handleSaveDraft: debounce(async function () {
       if (this.postToStage.id) {
         // Update the post content
@@ -173,9 +187,9 @@ export default {
     handleRestoreSavedStatus() {
       this.contentChanges = 0
     },
-    onContentChange(val) {
+    onContentChange({ originalContent }) {
       this.contentChanges++
-      this.postToStage.originalContent = val
+      this.postToStage.originalContent = originalContent
     },
     onPostSavedCallback() {
       this.contentChanges = 0

src/views/sheet/SheetEdit.vue

@@ -18,9 +18,9 @@
 
         <div id="editor" :style="{ height: editorHeight }">
           <MarkdownEditor
-            :originalContent="sheetToStage.originalContent"
-            @onContentChange="onContentChange"
-            @onSaveDraft="handleSaveDraft()"
+            :originalContent.sync="sheetToStage.originalContent"
+            @change="onContentChange"
+            @save="handleSaveDraft()"
           />
         </div>
       </a-col>
@@ -103,7 +103,21 @@ export default {
       return '当前页面数据未保存，确定要离开吗？'
     }
   },
+  beforeMount() {
+    document.addEventListener('keydown', this.onRegisterSaveShortcut)
+  },
+  beforeDestroy() {
+    document.removeEventListener('keydown', this.onRegisterSaveShortcut)
+  },
   methods: {
+    onRegisterSaveShortcut(e) {
+      if ((e.ctrlKey || e.metaKey) && !e.altKey && !e.shiftKey && e.keyCode === 83) {
+        e.preventDefault()
+        e.stopPropagation()
+        this.handleSaveDraft()
+      }
+    },
+
     handleSaveDraft: debounce(async function () {
       if (this.sheetToStage.id) {
         try {
@@ -175,9 +189,9 @@ export default {
     handleRestoreSavedStatus() {
       this.contentChanges = 0
     },
-    onContentChange(val) {
+    onContentChange({ originalContent }) {
       this.contentChanges++
-      this.sheetToStage.originalContent = val
+      this.sheetToStage.originalContent = originalContent
     },
     onSheetSavedCallback() {
       this.contentChanges = 0