fix(todo_item): fix TodoItem checkbox unexpected render in preview …

…modal (#73) close #73
Leecason · Jun 7, 2020 · c4a8860 · c4a8860
1 parent 19cd3cc
commit c4a8860
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 25 deletions.
diff --git a/rollup.config.js b/rollup.config.js
@@ -42,6 +42,7 @@ function getConfig ({
         vue: 'Vue',
         // TODO: tiptap
         'element-ui/lib/button': 'ELEMENT.Button',
+        'element-ui/lib/checkbox': 'ELEMENT.Checkbox',
         'element-ui/lib/tooltip': 'ELEMENT.Tooltip',
         'element-ui/lib/dialog': 'ELEMENT.Dialog',
         'element-ui/lib/popover': 'ELEMENT.Popover',
@@ -61,6 +62,7 @@ function getConfig ({
       'prosemirror-model',
       'prosemirror-tables',
       'element-ui/lib/button',
+      'element-ui/lib/checkbox',
       'element-ui/lib/tooltip',
       'element-ui/lib/dialog',
       'element-ui/lib/popover',

diff --git a/src/components/ExtensionViews/TodoItemView.vue b/src/components/ExtensionViews/TodoItemView.vue
@@ -8,12 +8,8 @@
     class="todo-item"
     data-drag-handle
   >
-    <span
-      contenteditable="false"
-      class="todo-checkbox"
-      @click.stop="toggle"
-    >
-      <v-icon :name="done ? 'check-square' : 'regular/square'" />
+    <span contenteditable="false">
+      <el-checkbox v-model="done" />
     </span>
 
     <div
@@ -26,16 +22,14 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Checkbox } from 'element-ui';
 import { Node as ProsemirrorNode } from 'prosemirror-model';
 import { EditorView } from 'prosemirror-view';
-import Icon from 'vue-awesome/components/Icon.vue';
-import 'vue-awesome/icons/check-square';
-import 'vue-awesome/icons/regular/square';
 import { transformLineHeightToCSS } from '@/utils/line_height';
 
 @Component({
   components: {
-    'v-icon': Icon,
+    [Checkbox.name]: Checkbox,
   },
 })
 export default class TodoItemView extends Vue {
@@ -72,9 +66,5 @@ export default class TodoItemView extends Vue {
       lineHeight: transformLineHeightToCSS(this.node.attrs.lineHeight),
     };
   }
-
-  toggle () {
-    this.done = !this.done;
-  }
 };
 </script>
diff --git a/src/extensions/todo_item.ts b/src/extensions/todo_item.ts
@@ -48,8 +48,16 @@ function toDOM (node: ProsemirrorNode): DOMOutputSpec {
 
   return [
     'li',
-    attrs,
-    ['span', { class: 'todo-checkbox', contenteditable: 'false' }],
+    { ...attrs, class: `todo-item ${done ? 'todo-item--done' : ''}` },
+    // el-checkbox dom
+    ['span', {
+      contenteditable: 'false'
+    }, ['span', {
+      class: `el-checkbox ${done ? 'is-checked' : ''}`,
+      style: 'pointer-events: none;',
+    }, ['span', { class: `el-checkbox__input ${done ? 'is-checked' : ''}` }, [
+      'span', { class: 'el-checkbox__inner' }
+    ]]]],
     ['div', { class: 'todo-content' }, 0],
   ];
 }

diff --git a/src/styles/editor.scss b/src/styles/editor.scss
@@ -365,15 +365,6 @@
           text-align: space-between !important;
         }
 
-        .todo-checkbox {
-          color: $border-color;
-          cursor: pointer;
-          display: inline-block;
-          font-size: 18px;
-          line-height: inherit;
-          margin-top: 2px;
-        }
-
         .todo-content {
           padding-left: 10px;