feat: font-family

src/lib/components/QuasarTiptap.vue

@@ -53,6 +53,7 @@ import {
   OIndent,
   OBackColor,
   OForeColor,
+  OFontFamily,
   OHeading,
   OIframe,
   ODiagram,
@@ -165,6 +166,7 @@ export default {
         new OIndent(),
         new OForeColor(),
         new OBackColor(),
+        new OFontFamily(),
         new OIframe(),
         new ODiagram(),
         new OKatexBlock(),

src/lib/components/buttons/OFontFamilyDropdown.vue

@@ -0,0 +1,65 @@
+<template>
+  <q-btn-dropdown icon="mdi-format-font" menu-anchor="bottom left" menu-self="top left" class="o-font-family" content-class="o-menu o-align-dropdown-menu" dense flat>
+    <q-list>
+      <template v-for="(item, index) of fontFamilies">
+        <q-separator :key="index" v-if="item.separator" />
+        <q-item :key="index" clickable v-close-popup
+                @click.native="commands.fontFamily({fontFamily: item.value})" v-else>
+          <q-item-section :style="`font-family: ${item.label}`">{{item.label}}</q-item-section>
+        </q-item>
+      </template>
+    </q-list>
+  </q-btn-dropdown>
+</template>
+
+<script>
+export default {
+  name: 'o-font-family',
+  data () {
+    return {
+      fontFamilies: [
+        { label: 'Default', value: 'Roboto' },
+        { label: 'Arial', value: 'Arial', separator: true },
+        { label: 'Arial Black', value: 'Arial Black' },
+        { label: 'Georgia', value: 'Georgia' },
+        { label: 'Impact', value: 'Impact' },
+        { label: 'Helvetica', value: 'Helvetica' },
+        { label: 'Roboto', value: 'Roboto' },
+        { label: 'Tahoma', value: 'Tahoma' },
+        { label: 'Times New Roman', value: 'Times New Roman' },
+        { label: 'Verdana', value: 'Verdana' },
+        { label: 'Courier New', value: 'Courier New', separator: true },
+        { label: 'Monaco', value: 'Monaco' },
+        { label: 'Monospace', value: 'monospace' },
+      ]
+    }
+  },
+  props: {
+    commands: {
+      type: Object
+    }
+  },
+  methods: {
+  },
+  computed: {
+  }
+}
+</script>
+
+<style lang="stylus">
+  .o-font-family {
+    padding 4px
+
+    .q-btn-dropdown__arrow {
+      margin-left 0
+    }
+  }
+
+  .o-align-dropdown-menu {
+    .q-list {
+      .q-icon {
+        font-size 1rem
+      }
+    }
+  }
+</style>

src/lib/components/buttons/OSimpleCommandBtn.vue

@@ -49,7 +49,7 @@ export default {
         horizontal: { icon: 'remove', tooltip: 'horizontal', isActive: false, command: this.commands.horizontal_rule },
         bullet_list: { icon: 'format_list_bulleted', tooltip: 'bullet_list', isActive: this.isActive.bullet_list(), command: this.commands.bullet_list },
         ordered_list: { icon: 'format_list_numbered', tooltip: 'ordered_list', isActive: this.isActive.ordered_list(), command: this.commands.ordered_list },
-        todo_list: { icon: 'mdi-format-list-checks', tooltip: 'todo_list', isActive: this.isActive.todo_list(), command: this.commands.todo_list },
+        todo_list: { icon: 'mdi-check-box-outline', tooltip: 'todo_list', isActive: this.isActive.todo_list(), command: this.commands.todo_list },
         blockquote: { icon: 'format_quote', tooltip: 'blockquote', isActive: this.isActive.blockquote(), command: this.commands.blockquote },
         table: { icon: 'mdi-table', tooltip: 'table', isActive: false, command: this.commands.createTable },
         undo: { icon: 'undo', tooltip: 'undo', isActive: false, command: this.commands.undo },

src/lib/components/menubars/OEditorMenuBar.vue

@@ -7,6 +7,7 @@
           <q-separator vertical inset :key="index" v-else-if="item==='separator'" />
           <o-fore-color-dropdown :commands="commands" :get-mark-attrs="getMarkAttrs" :key="index" v-else-if="item==='fore-color'" />
           <o-back-color-dropdown :commands="commands" :key="index" v-else-if="item==='back-color'" />
+          <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-heading-dropdown :commands="commands" :is-active="isActive" :key="index" v-else-if="item==='heading'" />
@@ -51,6 +52,7 @@ import { EditorMenuBar } from 'tiptap'
 
 import OForeColorDropdown from 'src/lib/components/buttons/OForeColorDropdown'
 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 OHeadingDropdown from 'src/lib/components/buttons/OHeadingDropdown'
@@ -110,6 +112,7 @@ export default {
     OMetaInput,
     OForeColorDropdown,
     OBackColorDropdown,
+    OFontFamilyDropdown,
     OAlignDropdown,
     OAlignGroup,
     OHeadingDropdown,

src/lib/extentions/FontFamily.js

@@ -0,0 +1,43 @@
+import { markInputRule } from 'tiptap-commands'
+import { Mark } from 'tiptap'
+import { applyMark } from '../utils/mark'
+
+export default class FontFamily extends Mark {
+  get name () {
+    return 'fontFamily'
+  }
+
+  get schema () {
+    return {
+      attrs: {
+        fontFamily: {
+          default: '#000000'
+        }
+      },
+      parseDOM: [
+        {
+          style: 'font-family',
+          getAttrs: value => ({ fontFamily: value })
+        },
+      ],
+      toDOM: mark => ['span', { style: `font-family: ${mark.attrs.fontFamily}` }, 0]
+    }
+  }
+
+  commands ({ type }) {
+    return attrs => (state, dispatch) => {
+      let { tr } = state
+      tr = applyMark(state.tr.setSelection(state.selection), type, attrs)
+      if (tr.docChanged || tr.storedMarksSet) {
+        dispatch && dispatch(tr)
+        return true
+      }
+    }
+  }
+
+  inputRules ({ type }) {
+    return [
+      markInputRule(/(?:\*\*|__)([^*_]+)(?:\*\*|__)$/, type)
+    ]
+  }
+}

src/lib/extentions/index.js

@@ -22,6 +22,7 @@ export { default as OKatexInline } from './KatexInline'
 export { default as OAlign } from './Align'
 export { default as OBackColor } from './BackColor'
 export { default as OForeColor } from './ForeColor'
+export { default as OFontFamily } from './FontFamily'
 
 // Extensions
 export { default as OAlignment } from './Alignment'

src/pages/quasar-tiptap/basic.vue

@@ -30,6 +30,7 @@ export default {
         'strike',
         'code',
         'separator',
+        'font-family',
         'fore-color',
         'back-color',
         'separator',