refactor: 💡 fix style

bons-space · Aug 31, 2022 · b6c09a3 · b6c09a3
1 parent d052a68
commit b6c09a3
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 110 deletions.
diff --git a/changelog.config.js b/changelog.config.js
@@ -7,59 +7,59 @@ module.exports = {
   list: ['feat', 'fix', 'chore', 'docs', 'refactor', 'style', 'perf'],
   maxMessageLength: 64,
   minMessageLength: 3,
-  questions: ['type', 'scope', 'subject', 'body', 'issues',],
+  questions: ['type', 'scope', 'subject', 'body', 'issues'],
   scopes: [],
   // 翻译了一下描述部分
   types: {
     chore: {
-      description: "跟仓库主要业务无关的构建/工程依赖/工具等功能改动（比如新增一个文档生成工具）",
-      emoji: "🤖",
-      value: "chore"
+      description: '跟仓库主要业务无关的构建/工程依赖/工具等功能改动（比如新增一个文档生成工具）',
+      emoji: '🤖',
+      value: 'chore',
     },
     ci: {
-      description: "CI related changes",
-      emoji: "🎡",
-      value: "ci"
+      description: 'CI related changes',
+      emoji: '🎡',
+      value: 'ci',
     },
     docs: {
-      description: "更新了文档（比如改了 Readme）",
-      emoji: "✏️",
-      value: "docs"
+      description: '更新了文档（比如改了 Readme）',
+      emoji: '✏️',
+      value: 'docs',
     },
     feat: {
-      description: "一个新的特性",
-      emoji: "🎸",
-      value: "feat"
+      description: '一个新的特性',
+      emoji: '🎸',
+      value: 'feat',
     },
     fix: {
-      description: "修复bug",
-      emoji: "🐛",
-      value: "fix"
+      description: '修复bug',
+      emoji: '🐛',
+      value: 'fix',
     },
     perf: {
-      description: "优化了性能的代码改动",
-      emoji: "⚡️",
-      value: "perf"
+      description: '优化了性能的代码改动',
+      emoji: '⚡️',
+      value: 'perf',
     },
     refactor: {
-      description: "一些代码结构上优化，既不是新特性也不是修 Bug（比如函数改个名字）",
-      emoji: "💡",
-      value: "refactor"
+      description: '一些代码结构上优化，既不是新特性也不是修 Bug（比如函数改个名字）',
+      emoji: '💡',
+      value: 'refactor',
     },
     release: {
-      description: "Create a release commit",
-      emoji: "🏹",
-      value: "release"
+      description: 'Create a release commit',
+      emoji: '🏹',
+      value: 'release',
     },
     style: {
-      description: "代码的样式美化，不涉及到功能修改（比如改了缩进）",
-      emoji: "💄",
-      value: "style"
+      description: '代码的样式美化，不涉及到功能修改（比如改了缩进）',
+      emoji: '💄',
+      value: 'style',
     },
     test: {
-      description: "新增或者修改已有的测试代码",
-      emoji: "💍",
-      value: "test"
+      description: '新增或者修改已有的测试代码',
+      emoji: '💍',
+      value: 'test',
     },
     messages: {
       type: '选择commit类型:\n',
@@ -69,5 +69,5 @@ module.exports = {
       breaking: '列出所有更改:\n',
       footer: 'commit关联的Issues, e.g #123:',
     },
-  }
+  },
 };
diff --git a/preview/views/Index.vue b/preview/views/Index.vue
@@ -22,6 +22,7 @@ import {
   Document,
   Text,
   Paragraph,
+  Blockquote,
   Code,
   HardBreak,
   Heading,
@@ -66,7 +67,7 @@ const content = ref(` <p>
       \``)
 
 const extensions = [
-  Document, Text, Paragraph, Heading, Bold, Underline, Italic, Strike, Link, History, TextStyle,
+  Document, Text, Paragraph, Heading, Blockquote, Bold, Underline, Italic, Strike, Link, History, TextStyle,
   Color, FontFamily, FontSize, Highlight, Code, HardBreak, HorizontalRule, TextAlign, Indent,
   LineHeight, FormatClear, Fullscreen, SelectAll, BulletList, OrderedList, Image,
   TaskList,

diff --git a/src/components/menuCommands/CodeBlockLanguageSelect.vue b/src/components/menuCommands/CodeBlockLanguageSelect.vue
@@ -3,7 +3,7 @@
     <el-select
       v-model="selectedLanguage"
       placeholder="Select"
-      class="language-select"
+      class="lang-select"
       contenteditable="false"
       filterable
       size="small"
@@ -87,13 +87,15 @@ export default defineComponent({
     top: 0.5rem;
     right: 0.5rem;
     cursor: pointer;
+    z-index: 9;
   }
 
-  .language-select {
+  .lang-select {
     position: absolute;
     top: 0.5rem;
     right: 2rem;
     width: 80px;
+    z-index: 9;
 
     :deep(.el-input__suffix) {
       display: none;

diff --git a/src/components/menuCommands/image/EditImageCommandButton.vue b/src/components/menuCommands/image/EditImageCommandButton.vue
@@ -13,7 +13,6 @@
       :append-to-body="true"
       width="400px"
       custom-class="el-tiptap-edit-image-dialog"
-      @open="syncImageAttrs"
     >
       <el-form
         :model="imageAttrs"
@@ -24,9 +23,9 @@
           :label="t('editor.extensions.Image.control.edit_image.form.src')"
         >
           <el-input
-            :value="imageAttrs.src"
+            v-model="imageAttrs.src"
             autocomplete="off"
-            disabled
+            aria-readonly="true"
           />
         </el-form-item>
 
@@ -92,8 +91,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, inject } from 'vue';
+<script lang="ts" setup>
+import { inject, reactive, ref } from 'vue';
 import { nodeViewProps } from '@tiptap/vue-3';
 import {
   ElDialog,
@@ -105,74 +104,44 @@ import {
 } from 'element-plus';
 import CommandButton from '../CommandButton.vue';
 
-export default defineComponent({
-  components: {
-    ElDialog,
-    ElForm,
-    ElFormItem,
-    ElInput,
-    ElCol,
-    ElButton,
-    CommandButton,
-  },
-
-  props: {
-    node: nodeViewProps.node,
-    updateAttrs: nodeViewProps.updateAttributes,
-  },
-
-  setup() {
-    const t = inject('t');
-    const enableTooltip = inject('enableTooltip', true);
-
-    return { t, enableTooltip };
-  },
-
-  data() {
-    return {
-      editImageDialogVisible: false,
-
-      imageAttrs: this.getImageAttrs(),
-    };
-  },
-
-  methods: {
-    syncImageAttrs() {
-      this.imageAttrs = this.getImageAttrs();
-    },
-
-    getImageAttrs() {
-      return {
-        src: this.node?.attrs.src,
-        alt: this.node?.attrs.alt,
-        width: this.node?.attrs.width,
-        height: this.node?.attrs.height,
-      };
-    },
-
-    updateImageAttrs() {
-      let { width, height } = this.imageAttrs;
-
-      // input converts it to string
-      width = parseInt(width as string, 10);
-      height = parseInt(height as string, 10);
-
-      this.updateAttrs?.({
-        alt: this.imageAttrs.alt,
-        width: width >= 0 ? width : null,
-        height: height >= 0 ? height : null,
-      });
-
-      this.closeEditImageDialog();
-    },
-
-    openEditImageDialog() {
-      this.editImageDialogVisible = true;
-    },
-
-    closeEditImageDialog() {
-      this.editImageDialogVisible = false;
-    },
-  },
-});
+const props = defineProps({
+  node: nodeViewProps.node,
+  updateAttrs: nodeViewProps.updateAttributes,
+})
+
+const t = inject('t');
+const enableTooltip = inject('enableTooltip', true);
+
+const editImageDialogVisible = ref(false)
+
+const imageAttrs = reactive({
+  src: props.node?.attrs.src || '',
+  alt: props.node?.attrs.alt || '',
+  width: props.node?.attrs.width,
+  height: props.node?.attrs.height,
+})
+
+const updateImageAttrs = () => {
+  let { width, height } = imageAttrs;
+
+  // input converts it to string
+  width = parseInt(width as string, 10);
+  height = parseInt(height as string, 10);
+
+  props.updateAttrs?.({
+    alt: imageAttrs.alt,
+    width: width >= 0 ? width : null,
+    height: height >= 0 ? height : null,
+  });
+
+  closeEditImageDialog();
+}
+
+const openEditImageDialog = () => {
+  editImageDialogVisible.value = true;
+}
+
+const closeEditImageDialog = () => {
+  editImageDialogVisible.value = false;
+}
 </script>