feat: toolbar slot

donotebase · Apr 16, 2020 · c21ca1d · c21ca1d
1 parent 1de1984
commit c21ca1d
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 35 deletions.
diff --git a/src/components/QuasarTiptap.vue b/src/components/QuasarTiptap.vue
@@ -1,7 +1,14 @@
 <template>
   <section class="tiptap tiptap-editor quasar-tiptap">
     <!-- Main Toolbar -->
-    <o-editor-menu-bar :editor="editor" :toolbar="toolbar" v-if="editable" />
+    <o-editor-menu-bar :editor="editor" :toolbar="toolbar" v-if="editable">
+      <template slot="left">
+        <slot name="toolbar-left" />
+      </template>
+      <template slot="right">
+        <slot name="toolbar-right" />
+      </template>
+    </o-editor-menu-bar>
 
     <o-editor-menu-bubble :editor="editor" :selected-cell-size="selectedCellSize" />
 
@@ -108,6 +115,10 @@ export default {
         return []
       }
     },
+    pageView: {
+      type: String,
+      default: 'page'
+    },
     options: {
       type: Object,
       default: function () {

diff --git a/src/components/buttons/OAddMoreBtn.vue b/src/components/buttons/OAddMoreBtn.vue
@@ -1,5 +1,5 @@
 <template>
-  <o-menubar-btn icon="add" :tooltip="$o.lang.editor.addMore" class="o-add-more-btn">
+  <o-menubar-btn icon="add" :tooltip="$o.lang.editor.addMore" class="text-blue o-add-more-btn">
     <q-menu ref="addPopover" anchor="bottom left" self="top left" content-class="o-menu">
       <section>
         <o-common-item icon="mdi-code-braces"

diff --git a/src/components/index.js b/src/components/index.js
@@ -0,0 +1,13 @@
+/**
+ * Quasar Tiptap Components
+ *
+ * @author Micle Bu, [email protected]
+ * @version 1.0
+ * @date 2020.04.16
+ */
+
+// --------------------------------------------------------------------------------
+// Components
+// --------------------------------------------------------------------------------
+export { default as OCommonItem } from 'src/components/common/OCommonItem'
+export { default as OMenubarBtn } from 'src/components/buttons/OMenubarBtn'
diff --git a/src/components/menubars/OEditorMenuBar.vue b/src/components/menubars/OEditorMenuBar.vue
@@ -2,38 +2,49 @@
   <editor-menu-bar :editor="editor" v-slot="editorContext">
     <section class="row col-12 justify-between items-center bg-light tiptap-menubar">
 
-      <!-- Table -->
-      <div class="row q-px-xs menubar is-hidden" :class="{ 'is-focused': editorContext.focused }" v-if="editorContext.isActive.table && editorContext.isActive.table()">
-        <template v-for="(item, index) of tableToolbar">
-          <q-separator vertical inset :key="index" v-if="item==='separator'" />
-          <component :key="index"
-                     :name="item"
-                     :is="getName(item)"
-                     :editor="editor"
-                     v-bind="editorContext"
-                     v-else>
-          </component>
-          <o-table-group v-bind="editorContext" :key="`table-${index}`" v-if="item==='table'" />
+      <!-- Toolbar: left -->
+      <section class="row q-px-xs menubar is-hidden" :class="{ 'is-focused': editorContext.focused }">
+        <!-- Table -->
+        <template v-if="editorContext.isActive.table && editorContext.isActive.table()">
+          <template v-for="(item, index) of tableToolbar">
+            <q-separator vertical inset :key="index" v-if="item==='separator'" />
+            <component :key="index"
+                       :name="item"
+                       :is="getName(item)"
+                       :editor="editor"
+                       v-bind="editorContext"
+                       v-else>
+            </component>
+            <o-table-group v-bind="editorContext" :key="`table-${index}`" v-if="item==='table'" />
+          </template>
         </template>
-      </div>
 
-      <!-- Normal -->
-      <div class="row q-px-xs menubar is-hidden" :class="{ 'is-focused': editorContext.focused }" v-else>
-        <template v-for="(item, index) of toolbar">
-          <q-separator vertical inset :key="index" v-if="item==='separator'" />
-          <component :key="index"
-                     :name="item"
-                     :is="getName(item)"
-                     :editor="editor"
-                     v-bind="editorContext"
-                     v-else-if="typeof item === 'string'" />
-          <component :key="index"
-                     :is="item"
-                     :editor="editor"
-                     v-bind="editorContext"
-                     v-else />
+        <!-- Normal -->
+        <template v-else>
+          <template v-for="(item, index) of toolbar">
+            <q-separator vertical inset :key="index" v-if="item==='separator'" />
+            <component :key="index"
+                       :name="item"
+                       :is="getName(item)"
+                       :editor="editor"
+                       v-bind="editorContext"
+                       v-else-if="typeof item === 'string'" />
+            <component :key="index"
+                       :is="item"
+                       :editor="editor"
+                       v-bind="editorContext"
+                       v-else />
+          </template>
         </template>
-      </div>
+
+        <!-- Extra -->
+        <slot name="left" />
+      </section>
+
+      <!-- Toolbar: right -->
+      <section class="row q-px-xs">
+        <slot name="right" />
+      </section>
     </section>
   </editor-menu-bar>
 </template>

diff --git a/src/index.js b/src/index.js
@@ -32,6 +32,7 @@ const QuasarTiptapPlugin = {
 }
 
 export * from 'src/extentions/index'
+export * from 'src/components/index'
 
 export {
   QuasarTiptapPlugin,

diff --git a/src/pages/examples/all.vue b/src/pages/examples/all.vue
@@ -1,11 +1,29 @@
 <template>
   <q-page class="page-quasar-tiptap-all">
-    <quasar-tiptap v-bind="options" scrollable />
+    <quasar-tiptap v-bind="options" scrollable>
+      <template slot="toolbar-left">
+        <q-separator vertical inset />
+        <o-menubar-btn icon="mdi-overscan"
+                       :tooltip="$t('page.view.full')"
+                       :class="{ 'is-active': options.pageView === 'full' }"
+                       @click.native="options.pageView='full'" />
+        <o-menubar-btn icon="mdi-fit-to-page-outline"
+                       :tooltip="$t('page.view.page')"
+                       :class="{ 'is-active': options.pageView === 'page' }"
+                       @click.native="options.pageView='page'" />
+      </template>
+      <template slot="toolbar-right">
+        <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()" />
+      </template>
+    </quasar-tiptap>
   </q-page>
 </template>
 
 <script>
-import QuasarTiptap from 'src/components/QuasarTiptap'
+import { QuasarTiptap, OMenubarBtn } from 'src/index'
 import {
   Placeholder,
 } from 'tiptap-extensions'
@@ -20,6 +38,7 @@ export default {
       options: {
         content: FullFeaturedArticle,
         editable: true,
+        pageView: 'page',
         extensions: [
           ...RecommendedExtensions,
           new Placeholder({
@@ -65,13 +84,16 @@ export default {
           'undo',
           'redo',
         ]
-      }
+      },
+      isSlideShow: false
     }
   },
   components: {
-    QuasarTiptap
+    QuasarTiptap,
+    OMenubarBtn,
   },
   methods: {
+    onSlideShow () {}
   },
   mounted: function () {
   },