feat: line height

src/lib/components/QuasarTiptap.vue

@@ -51,6 +51,7 @@ import {
   OTodoItem,
   OAlignment,
   OIndent,
+  OLineHeight,
   OBackColor,
   OForeColor,
   OFontFamily,
@@ -164,6 +165,7 @@ export default {
         new OHeading({ levels: [1, 2, 3, 4, 5] }),
         new OAlignment(),
         new OIndent(),
+        new OLineHeight(),
         new OForeColor(),
         new OBackColor(),
         new OFontFamily(),

src/lib/components/buttons/OLineHeightDropdown.vue

@@ -0,0 +1,59 @@
+<template>
+  <q-btn-dropdown icon="mdi-format-line-spacing" menu-anchor="bottom left" menu-self="top left" class="o-line-height-dropdown" content-class="o-menu o-line-height-dropdown-menu" dense flat>
+    <q-list>
+      <template v-for="(item, index) of types">
+        <q-separator :key="index" v-if="item.separator" />
+        <q-item :key="index" clickable v-close-popup
+                @click.native="commands.lineHeight({lineHeight: item.value})" v-else>
+          <q-item-section>{{item.label}}</q-item-section>
+        </q-item>
+      </template>
+    </q-list>
+  </q-btn-dropdown>
+</template>
+
+<script>
+export default {
+  name: 'o-line-height-dropdown',
+  data () {
+    return {
+      types: [
+        { label: 'Default', value: '0' },
+        { label: '1', value: '1', separator: true },
+        { label: '1.15', value: '1.15' },
+        { label: '1.5', value: '1.5' },
+        { label: '2', value: '2' },
+        { label: '2.5', value: '2.5' },
+        { label: '3', value: '3' },
+      ]
+    }
+  },
+  props: {
+    commands: {
+      type: Object
+    }
+  },
+  methods: {
+  },
+  computed: {
+  }
+}
+</script>
+
+<style lang="stylus">
+  .o-line-height-dropdown {
+    padding 4px
+
+    .q-btn-dropdown__arrow {
+      margin-left 0
+    }
+  }
+
+  .o-line-height-dropdown-menu {
+    .q-list {
+      .q-icon {
+        font-size 1rem
+      }
+    }
+  }
+</style>

src/lib/components/menubars/OEditorMenuBar.vue

@@ -10,6 +10,7 @@
           <o-font-family-dropdown :commands="commands" :key="index" v-else-if="item==='font-family'" />
           <o-align-dropdown :commands="commands" :key="index" v-else-if="item==='align-dropdown'" />
           <o-align-group :commands="commands" :is-active="isActive" :key="index" v-else-if="item==='align-group' && false" />
+          <o-line-height-dropdown :commands="commands" :is-active="isActive" :key="index" v-else-if="item==='line-height'" />
           <o-heading-dropdown :commands="commands" :is-active="isActive" :key="index" v-else-if="item==='heading'" />
           <o-menubar-btn icon="photo" :key="index" v-else-if="item==='photo'">
             <q-menu ref="picturePopover" anchor="bottom middle" self="top middle" class="shadow-5">
@@ -55,6 +56,7 @@ import OBackColorDropdown from 'src/lib/components/buttons/OBackColorDropdown'
 import OFontFamilyDropdown from 'src/lib/components/buttons/OFontFamilyDropdown'
 import OAlignDropdown from 'src/lib/components/buttons/OAlignDropdown'
 import OAlignGroup from 'src/lib/components/buttons/OAlignGroup'
+import OLineHeightDropdown from 'src/lib/components/buttons/OLineHeightDropdown'
 import OHeadingDropdown from 'src/lib/components/buttons/OHeadingDropdown'
 import OHeadingGroup from 'src/lib/components/buttons/OHeadingGroup'
 import OHeadingList from 'src/lib/components/buttons/OHeadingList'
@@ -115,6 +117,7 @@ export default {
     OFontFamilyDropdown,
     OAlignDropdown,
     OAlignGroup,
+    OLineHeightDropdown,
     OHeadingDropdown,
     OHeadingGroup,
     OHeadingList

src/lib/css/tiptap.styl

@@ -373,6 +373,26 @@
     margin-left: 210px !important;
   }
 
+  // Line Height
+  .editor__content *[data-line-height="1"] {
+    line-height: 1 !important;
+  }
+  .editor__content *[data-line-height="1.15"] {
+    line-height: 1.15 !important;
+  }
+  .editor__content *[data-line-height="1.5"] {
+    line-height: 1.5 !important;
+  }
+  .editor__content *[data-line-height="2"] {
+    line-height: 2 !important;
+  }
+  .editor__content *[data-line-height="2.5"] {
+    line-height: 2.5 !important;
+  }
+  .editor__content *[data-line-height="3"] {
+    line-height: 3 !important;
+  }
+
   .menubar {
     //margin-bottom: 1rem;
     -webkit-transition: visibility .2s .4s, opacity .2s .4s;

src/lib/extentions/LineHeight.js

@@ -0,0 +1,25 @@
+import { Extension } from 'tiptap'
+import { setLineHeight } from '../utils/line_height'
+
+export default class LineHeight extends Extension {
+  get name () {
+    return 'lineHeight'
+  }
+
+  commands () {
+    return attrs => (state, dispatch) => {
+      let { selection } = state
+      const tr = setLineHeight(
+        state.tr.setSelection(selection),
+        attrs.lineHeight,
+      )
+
+      if (tr.docChanged) {
+        dispatch && dispatch(tr)
+        return true
+      } else {
+        return false
+      }
+    }
+  }
+}

src/lib/extentions/Paragraph.js

@@ -39,7 +39,6 @@ function toDOM (node) {
     lineHeight,
   } = node.attrs
 
-  let style = ''
   const attrs = {}
 
   if (textAlign && textAlign !== 'left') {
@@ -51,12 +50,9 @@ function toDOM (node) {
   }
 
   if (lineHeight) {
-    // const cssLineHeight = transformLineHeightToCSS(lineHeight)
-    // style += `line-height: ${cssLineHeight};`
+    attrs['data-line-height'] = lineHeight
   }
 
-  style && (attrs.style = style)
-
   return ['p', attrs, 0]
 }
 

src/lib/extentions/index.js

@@ -27,3 +27,4 @@ export { default as OFontFamily } from './FontFamily'
 // Extensions
 export { default as OAlignment } from './Alignment'
 export { default as OIndent } from './Indent'
+export { default as OLineHeight } from './LineHeight'

src/lib/utils/line_height.js

@@ -0,0 +1,58 @@
+/**
+ * Utils: alignment
+ * @see https://github.com/Leecason/element-tiptap/blob/master/src/extensions/text_align.ts
+ * @todo Table
+ */
+
+const ALLOWED_NODE_TYPES = [
+  'paragraph',
+  'heading',
+  'list_item',
+  'todo_item',
+]
+
+export function setLineHeight (tr, lineHeight) {
+  console.log('line-height', lineHeight)
+  const { selection, doc } = tr
+
+  if (!selection || !doc) {
+    return tr
+  }
+
+  const { from, to } = selection
+
+  const tasks = []
+  lineHeight = lineHeight || null
+
+  doc.nodesBetween(from, to, (node, pos) => {
+    const nodeType = node.type
+    if (ALLOWED_NODE_TYPES.includes(nodeType.name)) {
+      const height = node.attrs.lineHeight || null
+      if (height !== lineHeight) {
+        tasks.push({
+          node,
+          pos,
+          nodeType,
+        })
+
+        return nodeType.name !== 'list_item' && nodeType.name !== 'todo_item'
+      }
+    }
+    return true
+  })
+
+  if (!tasks.length) return tr
+
+  tasks.forEach(job => {
+    const { node, pos, nodeType } = job
+    let { attrs } = node
+    attrs = {
+      ...attrs,
+      lineHeight: lineHeight,
+    }
+
+    tr = tr.setNodeMarkup(pos, nodeType, attrs, node.marks)
+  })
+
+  return tr
+}

src/pages/quasar-tiptap/basic.vue

@@ -38,6 +38,7 @@ export default {
         'align-group',
         'indent',
         'outdent',
+        'line-height',
         'separator',
         'heading',
         'horizontal',