feat: todo-item

src/lib/components/QuasarTiptap.vue

@@ -20,7 +20,6 @@ import {
   HardBreak,
   ListItem,
   OrderedList,
-  TodoItem,
   TodoList,
   Bold,
   Code,
@@ -49,6 +48,7 @@ import {
   ODoc,
   OParagraph,
   OBlockquote,
+  OTodoItem,
   OAlignment,
   OIndent,
   OBackColor,
@@ -132,9 +132,6 @@ export default {
         new BulletList(),
         new ListItem(),
         new OrderedList(),
-        new TodoItem({
-          nested: true
-        }),
         new TodoList(),
         new HorizontalRule(),
         new Table({
@@ -160,6 +157,9 @@ export default {
         new ODoc(),
         new OParagraph(),
         new OBlockquote(),
+        new OTodoItem({
+          nested: true
+        }),
         new OHeading({ levels: [1, 2, 3, 4, 5] }),
         new OAlignment(),
         new OIndent(),

src/lib/components/extensions/OTodoItem.vue

@@ -0,0 +1,59 @@
+<template>
+  <li
+    :data-type="node.type.name"
+    :data-done="done.toString()"
+    :data-text-align="node.attrs.textAlign"
+    :class="{ 'todo-item--done': done }"
+    class="o-todo-item"
+    data-drag-handle
+  >
+    <div
+      contenteditable="false"
+      class="row items-center todo-checkbox"
+      @click.stop="toggle"
+    >
+      <q-icon :name="done ? 'check_box' : 'check_box_outline_blank'" />
+    </div>
+
+    <div
+      ref="content"
+      :contenteditable="view.editable.toString()"
+      class="todo-content"
+    />
+  </li>
+</template>
+
+<script>
+export default {
+  name: 'o-todo-item',
+  data () {
+    return {
+    }
+  },
+  props: ['node', 'updateAttrs', 'view'],
+  components: {
+  },
+  methods: {
+    toggle () {
+      this.done = !this.done
+    }
+  },
+  computed: {
+    done: {
+      get () {
+        return this.node.attrs.done
+      },
+      set (done) {
+        this.updateAttrs({
+          done
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+  .o-todo-item {
+  }
+</style>

src/lib/css/tiptap.styl

@@ -340,6 +340,16 @@
     text-align: justify !important;
   }
 
+  .editor__content ul[data-type=todo_list] .o-todo-item[data-text-align=center] {
+    -webkit-box-pack: center !important;
+    justify-content: center !important;
+  }
+  .editor__content ul[data-type=todo_list] .o-todo-item[data-text-align=right] {
+    -webkit-box-pack: end !important;
+    -ms-flex-pack: end !important;
+    justify-content: flex-end !important;
+  }
+
   // Indent
   .editor__content *[data-indent="1"] {
     margin-left: 30px !important;
@@ -481,21 +491,14 @@
     flex-direction: row;
   }
   .todo-checkbox {
-    border: 2px solid #000;
-    height: 0.9em;
-    width: 0.9em;
-    box-sizing: border-box;
-    margin-right: 10px;
-    margin-top: 0.3rem;
     user-select: none;
-    -webkit-user-select: none;
     cursor: pointer;
     border-radius: 0.2em;
     background-color: transparent;
     transition: 0.4s background;
   }
   .todo-content {
-    flex: 1;
+    padding-left: 6px;
     > p:last-of-type {
       margin-bottom: 0;
     }
@@ -510,7 +513,6 @@
       }
     }
     > .todo-checkbox {
-      background-color: #000;
     }
   }
   li[data-done="false"] {

src/lib/extentions/TodoItem.js

@@ -0,0 +1,67 @@
+import { TodoItem as TiptapTodoItem } from 'tiptap-extensions'
+import OTodoItem from '../components/extensions/OTodoItem'
+
+function getAttrs (dom) {
+  let {
+    textAlign,
+    lineHeight,
+  } = dom.style
+
+  let align = dom.getAttribute('data-text-align') || textAlign || ''
+
+  return {
+    textAlign: align || null,
+    lineHeight: lineHeight || null,
+    done: dom.getAttribute('data-done') === 'true',
+  }
+}
+
+function toDOM (node) {
+  const {
+    done,
+    textAlign,
+  } = node.attrs
+
+  let style = ''
+  const attrs = {}
+
+  attrs['data-type'] = 'todo_item'
+  attrs['data-done'] = done.toString()
+
+  if (textAlign && textAlign !== 'left') {
+    attrs['data-text-align'] = textAlign
+  }
+
+  style && (attrs.style = style)
+
+  return [
+    'li',
+    attrs,
+    ['span', { class: 'todo-checkbox', contenteditable: 'false' }],
+    ['div', { class: 'todo-content' }, 0],
+  ]
+}
+
+export default class TodoItem extends TiptapTodoItem {
+  get schema () {
+    return {
+      attrs: {
+        done: { default: false },
+        textAlign: { default: null },
+        lineHeight: { default: null },
+      },
+      draggable: true,
+      content: this.options.nested ? '(paragraph|todo_list)+' : 'paragraph+',
+      parseDOM: [{
+        priority: 51,
+        tag: `[data-type="${this.name}"]`,
+        getAttrs,
+      }],
+      toDOM,
+    }
+  }
+
+  get view () {
+    return OTodoItem
+  }
+}

src/lib/extentions/index.js

@@ -11,6 +11,7 @@ export { default as OTitle } from './Title'
 export { default as ODoc } from './Doc'
 export { default as OParagraph } from './Paragraph'
 export { default as OBlockquote } from './Blockquote'
+export { default as OTodoItem } from './TodoItem'
 export { default as ODiagram } from './Diagram'
 export { default as OHeading } from './Heading'
 export { default as OIframe } from './Iframe'