From fc075b74b6032ac483919aa05ca2e4b21f007863 Mon Sep 17 00:00:00 2001
From: Micle Bu <mekery@qq.com>
Date: Sat, 11 Apr 2020 14:27:47 +0800
Subject: [PATCH] feat: extensions

---
 src/layouts/MainLayout.vue                    |   4 +-
 ...{OBackColor.vue => OBackColorDropdown.vue} |   6 +-
 ...{OForeColor.vue => OForeColorDropdown.vue} |   6 +-
 src/lib/data/editor.js                        |  13 +
 src/lib/exports/QuasarTiptap.vue              | 288 ++++++++++++++++++
 src/lib/extentions/index.js                   |  21 ++
 src/pages/quasar-tiptap/all.vue               |  30 ++
 src/pages/tiptap/basic/index.vue              |  55 ++--
 src/router/routes.js                          |   3 +-
 9 files changed, 390 insertions(+), 36 deletions(-)
 rename src/lib/button/{OBackColor.vue => OBackColorDropdown.vue} (89%)
 rename src/lib/button/{OForeColor.vue => OForeColorDropdown.vue} (89%)
 create mode 100644 src/lib/data/editor.js
 create mode 100644 src/lib/exports/QuasarTiptap.vue
 create mode 100644 src/lib/extentions/index.js
 create mode 100644 src/pages/quasar-tiptap/all.vue

diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 08735db..b397ced 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -52,8 +52,8 @@ export default {
       leftDrawerOpen: false,
       essentialLinks: [
         { title: 'Full Featured', caption: 'All extensions', icon: 'mdi-text-box', type: 'route', to: '/tiptap/basic', groupLabel: 'tiptap' },
-        { title: 'Basic', caption: 'quasar.dev', icon: 'school', type: 'route', to: '/tiptap/test1', groupLabel: 'quasar-tiptap' },
-        { title: 'Basic', caption: 'quasar.dev', icon: 'school', type: 'route', to: '/tiptap/test2' }
+        { title: 'Basic', caption: 'quasar.dev', icon: 'school', type: 'route', to: '/tiptap/test2' },
+        { title: 'Full Featured', caption: 'All extensions', icon: 'mdi-text-box', type: 'route', to: '/quasar-tiptap/all', groupLabel: 'quasar-tiptap' },
       ]
     }
   }
diff --git a/src/lib/button/OBackColor.vue b/src/lib/button/OBackColorDropdown.vue
similarity index 89%
rename from src/lib/button/OBackColor.vue
rename to src/lib/button/OBackColorDropdown.vue
index 1a415e1..e2eeb09 100644
--- a/src/lib/button/OBackColor.vue
+++ b/src/lib/button/OBackColorDropdown.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-btn-dropdown menu-anchor="bottom left" menu-self="top left" class="o-back-color" content-class="o-back-color-menu" @click="onSelectCurrent" split flat>
+  <q-btn-dropdown menu-anchor="bottom left" menu-self="top left" class="o-back-color-dropdown" content-class="o-back-color-menu" @click="onSelectCurrent" split flat>
     <section class="row justify-center label" slot="label">
       <div><q-icon name="mdi-format-color-highlight"/></div>
       <div class="indicator" :style="`background: ${hex}`"></div>
@@ -10,7 +10,7 @@
 
 <script>
 export default {
-  name: 'o-back-color',
+  name: 'o-back-color-dropdown',
   data () {
     return {
       hex: '#ffff00',
@@ -37,7 +37,7 @@ export default {
 </script>
 
 <style lang="stylus">
-  .o-back-color {
+  .o-back-color-dropdown {
 
     .q-btn-dropdown__arrow {
       margin-left 0
diff --git a/src/lib/button/OForeColor.vue b/src/lib/button/OForeColorDropdown.vue
similarity index 89%
rename from src/lib/button/OForeColor.vue
rename to src/lib/button/OForeColorDropdown.vue
index dbb6cf6..2b6fc3b 100644
--- a/src/lib/button/OForeColor.vue
+++ b/src/lib/button/OForeColorDropdown.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-btn-dropdown menu-anchor="bottom left" menu-self="top left" class="o-fore-color" content-class="o-fore-color-menu" @click="onSelectCurrent" split flat>
+  <q-btn-dropdown menu-anchor="bottom left" menu-self="top left" class="o-fore-color-dropdown" content-class="o-fore-color-menu" @click="onSelectCurrent" split flat>
     <section class="row justify-center label" slot="label">
       <div><q-icon name="mdi-format-color-text"/></div>
       <div class="indicator" :style="`background: ${hex}`"></div>
@@ -10,7 +10,7 @@
 
 <script>
 export default {
-  name: 'o-fore-color',
+  name: 'o-fore-color-dropdown',
   data () {
     return {
       hex: '#ff0000',
@@ -40,7 +40,7 @@ export default {
 </script>
 
 <style lang="stylus">
-  .o-fore-color {
+  .o-fore-color-dropdown {
 
     .q-btn-dropdown__arrow {
       margin-left 0
diff --git a/src/lib/data/editor.js b/src/lib/data/editor.js
new file mode 100644
index 0000000..24b3180
--- /dev/null
+++ b/src/lib/data/editor.js
@@ -0,0 +1,13 @@
+/**
+ * Data: Editor
+ *
+ * @author Micle Bu, micle@oriovo.com
+ * @version 1.0
+ * @date 2020.04.11
+ */
+
+export const Presets = {
+  basic: {
+    extensions: []
+  }
+}
diff --git a/src/lib/exports/QuasarTiptap.vue b/src/lib/exports/QuasarTiptap.vue
new file mode 100644
index 0000000..9a11570
--- /dev/null
+++ b/src/lib/exports/QuasarTiptap.vue
@@ -0,0 +1,288 @@
+<template>
+  <section class="tiptap tiptap-editor quasar-tiptap">
+    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive, getMarkAttrs, focused }">
+      <section class="row col-12 justify-between items-center bg-light tiptap-menubar">
+        <div class="row q-px-xs menubar is-hidden" :class="{ 'is-focused': focused }">
+          <o-menubar-btn icon="add" :tooltip="$t('add')" class="note-step-add">
+            <q-menu ref="addPopover" v-model="menu.add" anchor="bottom left" self="top left" content-class="o-menu">
+              <section>
+                <o-common-item icon="mdi-code-braces" :label="$t('code_block')" @click.native="commands.code_block" v-close-popup />
+                <o-common-item icon="mdi-sigma" :label="$t('formula')" :side-label="$t('block')" @click.native="commands.katex_block" v-close-popup />
+                <o-common-item icon="mdi-sigma" :label="$t('formula')" :side-label="$t('inline')" @click.native="commands.katex_inline" v-close-popup />
+                <o-common-item icon="mdi-sitemap" :label="$t('diagram.text')" @click.native="commands.diagram" v-close-popup>
+                  <q-tooltip anchor="center right" self="center left">
+                    <div class="text-bold">Mermaid</div>
+                    <div class="text-white">{{$t('diagram.text.tips')}}</div>
+                  </q-tooltip>
+                </o-common-item>
+                <q-separator />
+                <o-common-item icon="mdi-iframe" :label="$t('iframe')">
+                  <q-menu ref="iframePopover" anchor="top right" self="top left" class="shadow-5">
+                    <meta-input :title="$t('iframe')" icon="link"
+                                @primaryAction="insertIframe(commands.iframe, $event)">
+                    </meta-input>
+                  </q-menu>
+                </o-common-item>
+              </section>
+            </q-menu>
+          </o-menubar-btn>
+
+          <q-separator vertical inset />
+          <o-menubar-btn icon="mdi-format-bold" tooltip="Bold" :class="{ 'is-active': isActive.bold() }" @click.native="commands.bold" />
+          <o-menubar-btn icon="format_italic" :class="{ 'is-active': isActive.italic() }" @click.native="commands.italic" />
+          <o-menubar-btn icon="format_strikethrough" :class="{ 'is-active': isActive.strike() }" @click.native="commands.strike" />
+          <o-menubar-btn icon="format_underline" :class="{ 'is-active': isActive.underline() }" @click.native="commands.underline" />
+          <o-menubar-btn icon="code" :class="{ 'is-active': isActive.code() }" @click.native="commands.code" />
+
+          <q-separator vertical inset />
+          <o-fore-color-dropdown :commands="commands" :get-mark-attrs="getMarkAttrs" />
+          <o-back-color-dropdown :commands="commands" />
+
+          <q-separator vertical inset />
+          <o-align-dropdown :commands="commands" />
+
+          <q-separator vertical inset />
+          <o-heading-dropdown :commands="commands" :is-active="isActive" />
+          <o-heading-group :max="3" :commands="commands" :is-active="isActive" v-if="false" />
+
+          <q-separator vertical inset />
+          <o-menubar-btn icon="remove" @click.native="commands.horizontal_rule" />
+          <o-menubar-btn icon="format_list_bulleted" :class="{ 'is-active': isActive.bullet_list() }" @click.native="commands.bullet_list" />
+          <o-menubar-btn icon="format_list_numbered" :class="{ 'is-active': isActive.ordered_list() }" @click.native="commands.ordered_list" />
+
+          <q-separator vertical inset />
+          <o-menubar-btn icon="format_quote" :class="{ 'is-active': isActive.blockquote() }" @click.native="commands.blockquote" />
+          <o-menubar-btn icon="mdi-code-braces" :class="{ 'is-active': isActive.code_block() }" @click.native="commands.code_block" />
+
+          <q-separator vertical inset />
+          <o-menubar-btn icon="mdi-table" @click.native="commands.createTable({rowsCount: 3, colsCount: 3, withHeaderRow: false })" />
+
+          <q-separator vertical inset />
+          <o-menubar-btn icon="mdi-overscan" :tooltip="$t('page.view.full')" :class="pageView==='full'?'is-active':''" @click.native="pageView='full'" />
+          <o-menubar-btn icon="mdi-fit-to-page-outline" :tooltip="$t('page.view.page')" :class="pageView==='page'?'is-active':''" @click.native="pageView='page'" />
+
+          <q-separator vertical inset />
+          <o-menubar-btn icon="undo" @click.native="commands.undo" />
+          <o-menubar-btn icon="redo" @click.native="commands.redo" />
+        </div>
+
+        <div class="q-px-md right-actions">
+          <o-menubar-btn icon="mdi-page-layout-sidebar-right" color="white" @click.native="showSidePanel(true)" flat />
+          <o-menubar-btn :icon="isSlideShow ? `mdi-pause-circle-outline` : `mdi-play-box-outline`" :tooltip="$t('presentation')" @click.native="onSlideShow" />
+          <o-menubar-btn :icon="$q.fullscreen.isActive ? `fullscreen_exit` : `fullscreen`" :tooltip="$t('action.fullscreen')" @click.native="$q.fullscreen.toggle()" />
+        </div>
+      </section>
+    </editor-menu-bar>
+
+    <q-scroll-area ref="editorScroll" class="editor-scroll-area" :class="`view-${pageView}`">
+      <editor-content class="editor__content o--note-preview note-step-side-editor" :editor="editor" />
+    </q-scroll-area>
+  </section>
+</template>
+
+<script>
+import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
+import {
+  Blockquote,
+  BulletList,
+  CodeBlock,
+  CodeBlockHighlight,
+  HardBreak,
+  ListItem,
+  OrderedList,
+  TodoItem,
+  TodoList,
+  Bold,
+  Code,
+  Italic,
+  Link,
+  Strike,
+  Underline,
+  History,
+  Table,
+  TableHeader,
+  TableCell,
+  TableRow,
+  Placeholder,
+  Focus,
+  HorizontalRule,
+  TrailingNode,
+  Image
+} from 'tiptap-extensions'
+
+import java from 'highlight.js/lib/languages/java'
+import javascript from 'highlight.js/lib/languages/javascript'
+import css from 'highlight.js/lib/languages/css'
+
+import {
+  OTitle,
+  ODoc,
+  OAlign,
+  OBackColor,
+  OForeColor,
+  OHeading,
+  OIframe,
+  ODiagram,
+  OKatexBlock,
+  OKatexInline
+} from 'src/lib/extentions'
+
+import OForeColorDropdown from 'src/lib/button/OForeColorDropdown'
+import OBackColorDropdown from 'src/lib/button/OBackColorDropdown'
+import OAlignDropdown from 'src/lib/button/OAlignDropdown'
+import OAlignGroup from 'src/lib/button/OAlignGroup'
+import OHeadingDropdown from 'src/lib/button/OHeadingDropdown'
+import OHeadingGroup from 'src/lib/button/OHeadingGroup'
+import OHeadingList from 'src/lib/button/OHeadingList'
+
+import OMenubarBtn from 'src/lib/button/OMenubarBtn'
+import OCommonItem from 'src/lib/common/OCommonItem'
+
+export default {
+  name: 'quasar-tiptap',
+  data () {
+    return {
+      pageView: 'page',
+      menu: {
+        add: false
+      },
+
+      // editor
+      editor: null,
+      json: {},
+      html: '',
+
+      // actions
+      isSlideShow: false
+    }
+  },
+  components: {
+    EditorContent,
+    EditorMenuBar,
+    OMenubarBtn,
+    OCommonItem,
+    OForeColorDropdown,
+    OBackColorDropdown,
+    OAlignDropdown,
+    OAlignGroup,
+    OHeadingDropdown,
+    OHeadingGroup,
+    OHeadingList
+  },
+  methods: {
+    initEditor () {
+      this.editor = new Editor({
+        extensions: [
+          new OTitle(),
+          new ODoc(),
+          new OHeading({ levels: [1, 2, 3, 4, 5] }),
+          new OAlign(),
+          new OForeColor(),
+          new OBackColor(),
+          new Blockquote(),
+          new BulletList(),
+          new CodeBlock(),
+          new CodeBlockHighlight({
+            languages: {
+              java,
+              javascript,
+              css
+            }
+          }),
+          new HardBreak(),
+          new ListItem(),
+          new OrderedList(),
+          new Link(),
+          new Bold(),
+          new Code(),
+          new Italic(),
+          new Strike(),
+          new Underline(),
+          new History(),
+          new TodoItem({
+            nested: true
+          }),
+          new TodoList(),
+          new Table({
+            resizable: true
+          }),
+          new TableHeader(),
+          new TableCell(),
+          new TableRow(),
+          new Placeholder({
+            showOnlyCurrent: false,
+            emptyNodeText: node => {
+              if (node.type.name === 'title') {
+                return 'Title'
+              }
+              return 'Content'
+            }
+          }),
+          new Focus({
+            className: 'has-focus',
+            nested: true
+          }),
+          new HorizontalRule(),
+          new TrailingNode({
+            node: 'paragraph',
+            notAfter: ['paragraph']
+          }),
+          new Image(),
+          new OIframe(),
+          new ODiagram(),
+          new OKatexBlock(),
+          new OKatexInline()
+        ],
+        autoFocus: true,
+        content: '',
+        onUpdate: ({ state, getJSON, getHTML }) => {
+          this.json = getJSON()
+          this.html = getHTML()
+        }
+      })
+    },
+    // content
+    setContent () {
+      // From JSON
+      if (!this.json.type) {
+        this.json = {
+          type: 'doc',
+          content: []
+        }
+      }
+      this.editor.setContent(this.json, true)
+
+      // Focus
+      this.editor.focus()
+    },
+    cleanContent () {
+      this.editor.clearContent(false)
+      this.editor.focus()
+    },
+    showSidePanel () {},
+    onSlideShow () {}
+  },
+  mounted: function () {
+    this.initEditor()
+    this.setContent()
+  },
+  deactivated () {
+  },
+  beforeDestroy () {
+    this.editor.destroy()
+  }
+}
+</script>
+
+<style lang="stylus">
+  @import "../css/tiptap.styl";
+
+  .editor-scroll-area {
+    position absolute
+    top 40px
+    left 0
+    right 0
+    bottom 0
+    background #f7f8fa
+  }
+</style>
diff --git a/src/lib/extentions/index.js b/src/lib/extentions/index.js
new file mode 100644
index 0000000..74fcd37
--- /dev/null
+++ b/src/lib/extentions/index.js
@@ -0,0 +1,21 @@
+/**
+ * Quasar Tiptap Extensions
+ *
+ * @author Micle Bu, micle@oriovo.com
+ * @version 1.0
+ * @date 2020.04.11
+ */
+
+// Nodes
+export { default as OTitle } from './Title'
+export { default as ODoc } from './Doc'
+export { default as ODiagram } from './Diagram'
+export { default as OHeading } from './Heading'
+export { default as OIframe } from './Iframe'
+export { default as OKatexBlock } from './KatexBlock'
+export { default as OKatexInline } from './KatexInline'
+
+// Marks
+export { default as OAlign } from './Align'
+export { default as OBackColor } from './BackColor'
+export { default as OForeColor } from './ForeColor'
diff --git a/src/pages/quasar-tiptap/all.vue b/src/pages/quasar-tiptap/all.vue
new file mode 100644
index 0000000..719b98e
--- /dev/null
+++ b/src/pages/quasar-tiptap/all.vue
@@ -0,0 +1,30 @@
+<template>
+  <q-page class="page-quasar-tiptap-all">
+    <quasar-tiptap />
+  </q-page>
+</template>
+
+<script>
+import QuasarTiptap from 'src/lib/exports/QuasarTiptap'
+export default {
+  name: 'page-quasar-tiptap-all',
+  data () {
+    return {
+    }
+  },
+  components: {
+    QuasarTiptap
+  },
+  methods: {
+  },
+  mounted: function () {
+  },
+  deactivated () {
+  },
+  beforeDestroy () {
+  }
+}
+</script>
+
+<style lang="stylus">
+</style>
diff --git a/src/pages/tiptap/basic/index.vue b/src/pages/tiptap/basic/index.vue
index 816d652..5aa4a1c 100644
--- a/src/pages/tiptap/basic/index.vue
+++ b/src/pages/tiptap/basic/index.vue
@@ -36,8 +36,8 @@
             <o-menubar-btn icon="code" :class="{ 'is-active': isActive.code() }" @click.native="commands.code" />
 
             <q-separator vertical inset />
-            <o-fore-color :commands="commands" :get-mark-attrs="getMarkAttrs" />
-            <o-back-color :commands="commands" />
+            <o-fore-color-dropdown :commands="commands" :get-mark-attrs="getMarkAttrs" />
+            <o-back-color-dropdown :commands="commands" />
 
             <q-separator vertical inset />
             <o-align-dropdown :commands="commands" />
@@ -117,19 +117,21 @@ import java from 'highlight.js/lib/languages/java'
 import javascript from 'highlight.js/lib/languages/javascript'
 import css from 'highlight.js/lib/languages/css'
 
-import Title from 'src/lib/extentions/Title'
-import Doc from 'src/lib/extentions/Doc'
-import Align from 'src/lib/extentions/Align'
-import ForeColor from 'src/lib/extentions/ForeColor'
-import BackColor from 'src/lib/extentions/BackColor'
-import Heading from 'src/lib/extentions/Heading'
-import Iframe from 'src/lib/extentions/Iframe'
-import Diagram from 'src/lib/extentions/Diagram'
-import KatexBlock from 'src/lib/extentions/KatexBlock'
-import KatexInline from 'src/lib/extentions/KatexInline'
+import {
+  OTitle,
+  ODoc,
+  OAlign,
+  OBackColor,
+  OForeColor,
+  OHeading,
+  OIframe,
+  ODiagram,
+  OKatexBlock,
+  OKatexInline
+} from 'src/lib/extentions'
 
-import OForeColor from 'src/lib/button/OForeColor'
-import OBackColor from 'src/lib/button/OBackColor'
+import OForeColorDropdown from 'src/lib/button/OForeColorDropdown'
+import OBackColorDropdown from 'src/lib/button/OBackColorDropdown'
 import OAlignDropdown from 'src/lib/button/OAlignDropdown'
 import OAlignGroup from 'src/lib/button/OAlignGroup'
 import OHeadingDropdown from 'src/lib/button/OHeadingDropdown'
@@ -162,8 +164,8 @@ export default {
     EditorMenuBar,
     OMenubarBtn,
     OCommonItem,
-    OForeColor,
-    OBackColor,
+    OForeColorDropdown,
+    OBackColorDropdown,
     OAlignDropdown,
     OAlignGroup,
     OHeadingDropdown,
@@ -174,11 +176,12 @@ export default {
     initEditor () {
       this.editor = new Editor({
         extensions: [
-          new Title(),
-          new Doc(),
-          new Align(),
-          new ForeColor(),
-          new BackColor(),
+          new OTitle(),
+          new ODoc(),
+          new OHeading({ levels: [1, 2, 3, 4, 5] }),
+          new OAlign(),
+          new OForeColor(),
+          new OBackColor(),
           new Blockquote(),
           new BulletList(),
           new CodeBlock(),
@@ -190,8 +193,6 @@ export default {
             }
           }),
           new HardBreak(),
-          // new TocHeading({ levels: [1, 2, 3, 4, 5] }),
-          new Heading({ levels: [1, 2, 3, 4, 5] }),
           new ListItem(),
           new OrderedList(),
           new Link(),
@@ -230,10 +231,10 @@ export default {
             notAfter: ['paragraph']
           }),
           new Image(),
-          new Iframe(),
-          new Diagram(),
-          new KatexBlock(),
-          new KatexInline()
+          new OIframe(),
+          new ODiagram(),
+          new OKatexBlock(),
+          new OKatexInline()
         ],
         autoFocus: true,
         content: '',
diff --git a/src/router/routes.js b/src/router/routes.js
index fcbf3ec..c139f2f 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -7,7 +7,8 @@ const routes = [
       { path: '', component: () => import('pages/Index.vue') },
       { path: 'tiptap/basic', component: () => import('pages/tiptap/basic/index.vue') },
       { path: 'tiptap/test1', component: () => import('pages/tiptap/basic/index.vue') },
-      { path: 'tiptap/test2', component: () => import('pages/tiptap/basic/index.vue') }
+      { path: 'tiptap/test2', component: () => import('pages/tiptap/basic/index.vue') },
+      { path: 'quasar-tiptap/all', component: () => import('pages/quasar-tiptap/all.vue') }
     ]
   }
 ]