refactor: journal editing using the markdown editor (#506)

Signed-off-by: Ryan Wang <i@ryanc.cc>
2022-03-13 10:46:50 +08:00 · 2022-03-13 10:46:50 +08:00 · b50e1abe98
parent 7e1e58387e
commit b50e1abe98
6 changed files with 123 additions and 83 deletions
--- a/package.json
+++ b/package.json
@ -23,7 +23,7 @@
    "@codemirror/basic-setup": "^0.19.1",
    "@codemirror/lang-html": "^0.19.4",
    "@codemirror/lang-java": "^0.19.1",
-    "@halo-dev/admin-api": "^1.0.0-alpha.50",
+    "@halo-dev/admin-api": "^1.0.0-alpha.51",
    "@halo-dev/editor": "^3.0.0-alpha.2",
    "ant-design-vue": "^1.7.8",
    "dayjs": "^1.10.7",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -6,7 +6,7 @@ specifiers:
  '@codemirror/basic-setup': ^0.19.1
  '@codemirror/lang-html': ^0.19.4
  '@codemirror/lang-java': ^0.19.1
-  '@halo-dev/admin-api': ^1.0.0-alpha.50
+  '@halo-dev/admin-api': ^1.0.0-alpha.51
  '@halo-dev/editor': ^3.0.0-alpha.2
  '@vue/cli-plugin-babel': ~5.0.1
  '@vue/cli-plugin-eslint': ~5.0.1
@ -52,7 +52,7 @@ dependencies:
  '@codemirror/basic-setup': 0.19.1
  '@codemirror/lang-html': 0.19.4
  '@codemirror/lang-java': 0.19.1
-  '@halo-dev/admin-api': 1.0.0-alpha.50
+  '@halo-dev/admin-api': 1.0.0-alpha.51
  '@halo-dev/editor': 3.0.0-alpha.2
  ant-design-vue: 1.7.8_9065e7474e033a8e4b95615fc8e6c36c
  dayjs: 1.10.7
@ -1577,8 +1577,8 @@ packages:
      - supports-color
    dev: true

-  /@halo-dev/admin-api/1.0.0-alpha.50:
-    resolution: {integrity: sha512-/kfkBPRqnhMRCMhKWMWz+rboUAxGCM5Tcv13BaBKlG04wEY7ewgrXrFMvxfYd0luIik+knluwKj1OwWix+2ZhA==}
+  /@halo-dev/admin-api/1.0.0-alpha.51:
+    resolution: {integrity: sha512-xREMnlN9GNTiw4Y2qJvpRu3SgmqhJ9l2e4ctfJ3vzG4AJacttHku5hKUxdOFE95sL7UFXEcE3MlNQqVJkHPksw==}
    engines: {node: '>=12'}
    dependencies:
      '@halo-dev/rest-api-client': 1.0.0-alpha.50
--- a/src/components/Editor/MarkdownEditor.vue
+++ b/src/components/Editor/MarkdownEditor.vue
@ -4,7 +4,8 @@
      ref="editor"
      v-model="originalContentData"
      :boxShadow="false"
-      :toolbars="markdownEditorToolbars"
+      :subfield="subfield"
+      :toolbars="toolbars"
      :uploadRequest="handleAttachmentUpload"
      autofocus
      @change="handleChange"
@ -19,7 +20,7 @@
 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'
+import { editorToolbars } from '@/core/constant'

 export default {
  name: 'MarkdownEditor',
@ -31,11 +32,20 @@ export default {
      type: String,
      required: false,
      default: ''
+    },
+    toolbars: {
+      type: Object,
+      default: () => {
+        return editorToolbars
+      }
+    },
+    subfield: {
+      type: Boolean,
+      default: true
    }
  },
  data() {
    return {
-      markdownEditorToolbars,
      attachmentSelectVisible: false
    }
  },
--- a/src/core/constant.js
+++ b/src/core/constant.js
@ -1,4 +1,4 @@
-export const markdownEditorToolbars = {
+export const editorToolbars = {
  bold: true,
  italic: true,
  header: true,
@ -24,6 +24,28 @@ export const markdownEditorToolbars = {
  preview: true
 }

+export const simpleEditorToolbars = {
+  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,
+  subfield: true,
+  htmlcode: true,
+  preview: true
+}
+
 export const actionLogTypes = {
  BLOG_INITIALIZED: {
    value: 0,
--- a/src/views/dashboard/components/JournalPublishCard.vue
+++ b/src/views/dashboard/components/JournalPublishCard.vue
@ -1,9 +1,11 @@
 <template>
  <a-card :bodyStyle="{ padding: '16px' }" :bordered="false">
-    <template slot="title">
+    <template #title>
      速记
-      <a-tooltip slot="action" title="内容将保存到页面/所有页面/日志页面">
-        <a-icon class="cursor-pointer" type="info-circle-o" />
+      <a-tooltip title="内容将保存到页面/所有页面/日志页面">
+        <router-link :to="{ name: 'JournalList' }" style="color: inherit">
+          <a-icon class="cursor-pointer hover:text-blue-400 transition-all" type="info-circle-o" />
+        </router-link>
      </a-tooltip>
    </template>
    <a-form-model ref="journalForm" :model="form.model" :rules="form.rules" layout="vertical">
--- a/src/views/sheet/independent/JournalList.vue
+++ b/src/views/sheet/independent/JournalList.vue
@ -38,44 +38,50 @@
          <div class="mt-4">
            <a-empty v-if="!list.loading && list.data.length === 0" />
            <a-list v-else :dataSource="list.data" :loading="list.loading" :pagination="false" itemLayout="vertical">
-              <a-list-item :key="index" slot="renderItem" slot-scope="item, index">
-                <template slot="actions">
-                  <a-button class="!p-0" type="link">
-                    <a-icon type="like-o" />
-                    {{ item.likes }}
-                  </a-button>
-                  <a-button class="!p-0" type="link" @click="handleOpenJournalCommentsDrawer(item)">
-                    <a-icon type="message" />
-                    {{ item.commentCount }}
-                  </a-button>
-                  <a-button v-if="item.type === 'INTIMATE'" class="!p-0" disabled type="link">
-                    <a-icon type="lock" />
-                  </a-button>
-                  <a-button v-else class="!p-0" type="link">
-                    <a-icon type="unlock" />
-                  </a-button>
-                </template>
-                <template slot="extra">
-                  <a-button class="!p-0" type="link" @click="handleOpenEditModal(item)">编辑</a-button>
-                  <a-divider type="vertical" />
-                  <a-popconfirm
-                    cancelText="取消"
-                    okText="确定"
-                    title="你确定要删除这条日志？"
-                    @confirm="handleDelete(item.id)"
-                  >
-                    <a-button class="!p-0" type="link">删除</a-button>
-                  </a-popconfirm>
-                </template>
-
-                <a-list-item-meta>
-                  <template slot="description">
-                    <div class="journal-list-content" v-html="item.content"></div>
+              <template #renderItem="item, index">
+                <a-list-item :key="index">
+                  <template #actions>
+                    <a-button class="!p-0" type="link">
+                      <a-icon type="like-o" />
+                      {{ item.likes }}
+                    </a-button>
+                    <a-button class="!p-0" type="link" @click="handleOpenJournalCommentsDrawer(item)">
+                      <a-icon type="message" />
+                      {{ item.commentCount }}
+                    </a-button>
+                    <a-button v-if="item.type === 'INTIMATE'" class="!p-0" disabled type="link">
+                      <a-icon type="lock" />
+                    </a-button>
+                    <a-button v-else class="!p-0" type="link">
+                      <a-icon type="unlock" />
+                    </a-button>
                  </template>
-                  <span slot="title">{{ item.createTime | moment }}</span>
-                  <a-avatar slot="avatar" :src="user.avatar" size="large" />
-                </a-list-item-meta>
-              </a-list-item>
+                  <template #extra>
+                    <a-button class="!p-0" type="link" @click="handleOpenEditModal(item)">编辑</a-button>
+                    <a-divider type="vertical" />
+                    <a-popconfirm
+                      cancelText="取消"
+                      okText="确定"
+                      title="你确定要删除这条日志？"
+                      @confirm="handleDelete(item.id)"
+                    >
+                      <a-button class="!p-0" type="link">删除</a-button>
+                    </a-popconfirm>
+                  </template>
+
+                  <a-list-item-meta>
+                    <template #description>
+                      <div class="journal-list-content" v-html="item.content"></div>
+                    </template>
+                    <template #title>
+                      <span>{{ item.createTime | moment }}</span>
+                    </template>
+                    <template #avatar>
+                      <a-avatar :src="user.avatar" size="large" />
+                    </template>
+                  </a-list-item-meta>
+                </a-list-item>
+              </template>
              <div class="page-wrapper">
                <a-pagination
                  :current="pagination.page"
@ -104,8 +110,9 @@
        @click="optionModal.visible = true"
      ></a-button>
    </div>
+
    <a-modal v-model="optionModal.visible" :afterClose="() => (optionModal.visible = false)" title="页面设置">
-      <template slot="footer">
+      <template #footer>
        <a-button key="submit" type="primary" @click="handleSaveOptions()">保存</a-button>
      </template>
      <a-form layout="vertical">
@ -119,15 +126,8 @@
    </a-modal>

    <!-- 编辑日志弹窗 -->
-    <a-modal v-model="form.visible">
-      <template slot="title">
-        {{ formTitle }}
-        <a-tooltip slot="action" title="只能输入250字">
-          <a-icon type="info-circle-o" />
-        </a-tooltip>
-      </template>
-      <template slot="footer">
-        <a-button type="dashed" @click="attachmentSelect.visible = true">附件库</a-button>
+    <a-modal v-model="form.visible" :title="formTitle" :width="820">
+      <template #footer>
        <ReactiveButton
          :errored="form.saveErrored"
          :loading="form.saving"
@ -141,12 +141,15 @@
      </template>
      <a-form-model ref="journalForm" :model="form.model" :rules="form.rules" layout="vertical">
        <a-form-model-item prop="sourceContent">
-          <a-input
-            ref="sourceContentInput"
-            v-model="form.model.sourceContent"
-            :autoSize="{ minRows: 8 }"
-            type="textarea"
-          />
+          <div id="editor" style="height: 520px">
+            <MarkdownEditor
+              v-if="form.visible"
+              :originalContent.sync="form.model.sourceContent"
+              :subfield="false"
+              :toolbars="simpleEditorToolbars"
+              @change="onContentChange"
+            />
+          </div>
        </a-form-model-item>
        <a-form-model-item>
          <a-switch v-model="form.isPublic" checkedChildren="公开" defaultChecked unCheckedChildren="私密" />
@ -154,8 +157,6 @@
      </a-form-model>
    </a-modal>

-    <AttachmentSelectModal :visible.sync="attachmentSelect.visible" @confirm="handleSelectAttachment" />
-
    <TargetCommentListModal
      :target-id="list.selected.id"
      :title="`「${$options.filters.moment(list.selected.createTime)}」的评论`"
@ -179,13 +180,17 @@ import TargetCommentListModal from '@/components/Comment/TargetCommentListModal'
 // libs
 import { mixin, mixinDevice } from '@/mixins/mixin.js'
 import { mapActions, mapGetters } from 'vuex'
+import { simpleEditorToolbars } from '@/core/constant'
+import { deepClone } from '@/utils/util'
 import apiClient from '@/utils/api-client'
+import MarkdownEditor from '@/components/Editor/MarkdownEditor'

 export default {
  mixins: [mixin, mixinDevice],
-  components: { PageView, TargetCommentListModal },
+  components: { MarkdownEditor, PageView, TargetCommentListModal },
  data() {
    return {
+      simpleEditorToolbars,
      list: {
        data: [],
        loading: false,
@ -212,7 +217,7 @@ export default {
      form: {
        model: {},
        rules: {
-          sourceContent: [{ required: true, message: '* 内容不能为空', trigger: ['change'] }]
+          sourceContent: [{ required: true, message: '* 内容不能为空', trigger: [] }]
        },
        visible: false,
        saving: false,
@ -222,9 +227,6 @@ export default {
      journalCommentDrawer: {
        visible: false
      },
-      attachmentSelect: {
-        visible: false
-      },
      optionModal: {
        visible: false,
        options: []
@ -289,18 +291,15 @@ export default {
    },
    handleOpenPublishModal() {
      this.form.visible = true
-      this.form.model = {}
-      this.$nextTick(() => {
-        this.$refs.sourceContentInput.focus()
-      })
+      this.form.model = {
+        sourceContent: '',
+        content: ''
+      }
    },
    handleOpenEditModal(item) {
-      this.form.model = item
+      this.form.model = deepClone(item)
      this.form.isPublic = item.type !== 'INTIMATE'
      this.form.visible = true
-      this.$nextTick(() => {
-        this.$refs.sourceContentInput.focus()
-      })
    },
    handleDelete(id) {
      apiClient.journal.delete(id).finally(() => {
@ -311,11 +310,18 @@ export default {
      this.list.selected = journal
      this.journalCommentDrawer.visible = true
    },
+
+    onContentChange({ originalContent, renderContent }) {
+      this.form.model.sourceContent = originalContent
+      this.form.model.content = renderContent
+    },
+
    handleSaveOrUpdate() {
      const _this = this
      _this.$refs.journalForm.validate(valid => {
        if (valid) {
          _this.form.model.type = _this.form.isPublic ? 'PUBLIC' : 'INTIMATE'
+          _this.form.model.keepRaw = true
          _this.form.saving = true
          if (_this.form.model.id) {
            apiClient.journal
@ -343,6 +349,7 @@ export default {
        }
      })
    },
+
    handleSaveOrUpdateCallback() {
      if (this.form.saveErrored) {
        this.form.saveErrored = false
@ -370,11 +377,13 @@ export default {
      this.list.params.size = size
      this.handleListJournals()
    },
+
    onJournalCommentsDrawerClose() {
      this.form.model = {}
      this.journalCommentDrawer.visible = false
      this.handleListJournals()
    },
+
    handleSaveOptions() {
      apiClient.option
        .save(this.optionModal.options)
@ -387,9 +396,6 @@ export default {
          this.refreshOptionsCache()
        })
    },
-    handleSelectAttachment({ markdown }) {
-      this.$set(this.form.model, 'sourceContent', (this.form.model.sourceContent || '') + '\n' + markdown.join('\n'))
-    },

    /**
     * Select previous journal