feat(editor): Editor options, close #1

donotebase · Apr 18, 2020 · 3f8b4c8 · 3f8b4c8
1 parent 11a5f70
commit 3f8b4c8
Show file tree

Hide file tree

Showing 7 changed files with 105 additions and 39 deletions.
diff --git a/README.md b/README.md
@@ -131,6 +131,15 @@ export default {
 </script>
 ```
 
+### Editor Properties
+
+| **Property** | **Type** | **Default** | **Description** |
+| --- | :---: | :---: | --- |
+| `content` | `Object\|String` | `null` | The editor content |
+| `editable` | `Boolean` | `true` | When set to `false` the editor is read-only. |
+| `extensions` | `Array` | `[]` | A list of extensions used, by the editor. This can be `String`, `Nodes`, `Marks` or `Plugins`. |
+| `toolbar` | `Array` | `[]` | A list of toolbar button used, by the editor. This can be `String`, Vue components |
+
 ## Extensions
 
 ### Available Extensions

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "quasar-tiptap",
-  "version": "1.0.3-development",
+  "version": "1.0.4",
   "description": "A modern WYSIWYG rich-text editor built on top of tiptap and Quasar for Vue.js",
   "productName": "Quasar Tiptap",
   "scripts": {

diff --git a/quasar.conf.js b/quasar.conf.js
@@ -60,6 +60,7 @@ module.exports = function (ctx) {
         'QAvatar',
         'QColor',
         'QInput',
+        'QToggle',
       ],
 
       directives: [

diff --git a/src/components/QuasarTiptap.vue b/src/components/QuasarTiptap.vue
@@ -1,7 +1,7 @@
 <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="editorMenuBar" v-if="editable && showToolbar">
       <template slot="left">
         <slot name="toolbar-left" />
       </template>
@@ -10,7 +10,8 @@
       </template>
     </o-editor-menu-bar>
 
-    <o-editor-menu-bubble :editor="editor" :selected-cell-size="selectedCellSize" />
+    <!-- Main Bubble -->
+    <o-editor-menu-bubble :editor="editor" :selected-cell-size="selectedCellSize" v-if="editable && showBubble" />
 
     <q-scroll-area ref="editorScroll" class="editor-scroll-area" :class="`view-${pageView}`" v-if="scrollable">
       <editor-content class="editor__content o--note-preview note-step-side-editor" :editor="editor" />
@@ -22,7 +23,6 @@
 </template>
 
 <script>
-import Vue from 'vue'
 import { Editor, EditorContent } from 'tiptap'
 import {
   BulletList,
@@ -80,6 +80,8 @@ import DynamicClass from 'src/extentions/dynamic'
 import OEditorMenuBar from 'src/components/menubars/OEditorMenuBar'
 import OEditorMenuBubble from 'src/components/menubars/OEditorMenuBubble'
 
+import { DefaultToolbar } from 'src/data/editor'
+
 export default {
   name: 'quasar-tiptap',
   data () {
@@ -100,6 +102,14 @@ export default {
       type: Boolean,
       default: true
     },
+    showToolbar: {
+      type: Boolean,
+      default: true
+    },
+    showBubble: {
+      type: Boolean,
+      default: true
+    },
     scrollable: {
       type: Boolean,
       default: false
@@ -133,6 +143,11 @@ export default {
     OEditorMenuBar,
     OEditorMenuBubble,
   },
+  computed: {
+    editorMenuBar () {
+      return this.toolbar.length > 0 ? this.toolbar : DefaultToolbar
+    }
+  },
   methods: {
     initEditor () {
       const customExtensions = this.generateExtensions()
@@ -225,6 +240,12 @@ export default {
     },
     // content
     setContent () {
+      try {
+        this.json = JSON.parse(this.content)
+      } catch (e) {
+        this.html = this.content
+      }
+
       // From JSON
       if (this.json.type) {
         this.editor.setContent(this.json, true)
@@ -243,9 +264,19 @@ export default {
     showSidePanel () {},
     onSlideShow () {}
   },
+  watch: {
+    editable (to, from) {
+      console.log('editable', to)
+      this.editor.options.editable = to
+    },
+    content (to, from) {
+      this.setContent()
+    }
+  },
   mounted: function () {
-    this.html = this.content
     this.initEditor()
+
+    // set content
     this.setContent()
   },
   deactivated () {

diff --git a/src/data/article.js b/src/data/article.js
@@ -15,6 +15,10 @@ C -->|Two| E[iPhonee]
 C -->|Three| F[Cars]"></diagram><h2 id="a4baf0" level="2">Math</h2><p><span style="color: rgb(0, 0, 0)"><span style="font-family: Roboto, -apple-system, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif">Write inline formula, such as&nbsp;</span></span><ki src="\\Gamma(n) = (n-1)!\\quad\\forall n\\in\\mathbb N"></ki>，or block formula:</p><p></p><katex src="E=mc^2"></katex><p></p><katex src="e^x=\\lim_{n\\to\\infty} \\left( 1+\\frac{x}{n} \\right)^n"></katex><p></p>
 `
 
+export const BasicFeaturesArticleJson = `
+{"type":"doc","content":[{"type":"title","content":[{"type":"text","text":"quasar-tiptap"}]},{"type":"heading","attrs":{"textAlign":"","indent":0,"lineHeight":"","level":"2","id":"d5fb3c"},"content":[{"type":"text","text":"Introduction"}]},{"type":"paragraph","attrs":{"textAlign":null,"indent":null,"lineHeight":null}}]}
+`
+
 export const FullFeaturedArticle = `
 <h1>Full Featured</h1>
 <h2 id="78b268" level="2">Introduction</h2>

diff --git a/src/data/editor.js b/src/data/editor.js
@@ -5,3 +5,37 @@
  * @version 1.0
  * @date 2020.04.11
  */
+
+export const DefaultToolbar = [
+  'add-more',
+  'separator',
+  'bold',
+  'italic',
+  'underline',
+  'strike',
+  'code',
+  'separator',
+  'heading',
+  'font-family',
+  'fore-color',
+  'back-color',
+  'format_clear',
+  'separator',
+  'align-dropdown',
+  'indent',
+  'outdent',
+  'line-height',
+  'separator',
+  'horizontal',
+  'bullet_list',
+  'ordered_list',
+  'todo_list',
+  'separator',
+  'blockquote',
+  'code_block',
+  'photo',
+  'table',
+  'separator',
+  'undo',
+  'redo',
+]
diff --git a/src/pages/examples/basic.vue b/src/pages/examples/basic.vue
@@ -1,11 +1,17 @@
 <template>
   <q-page class="page-quasar-tiptap-basic">
     <section class="row col-12 justify-center">
-      <header class="row col-12 justify-center items-center bg-blue text-white banner">
+      <header class="row col-12 justify-center items-center bg-blue-1 text-blue banner">
         <span class="text-h3">Basic</span>
+
+        <div class="row col-12 options">
+          <q-toggle v-model="options.editable" label="Editable" />
+          <q-toggle v-model="options.showToolbar" label="Toolbar" />
+          <q-toggle v-model="options.showBubble" label="Menu Bubble" />
+        </div>
       </header>
       <section class="row col-10 q-pa-md">
-        <quasar-tiptap v-bind="options" @update="onUpdate" />
+        <quasar-tiptap ref="editor" v-bind="options" @update="onUpdate" />
       </section>
     </section>
   </q-page>
@@ -18,7 +24,7 @@ import {
 } from 'tiptap-extensions'
 
 import { RecommendedExtensions } from 'src/extentions'
-import { BasicFeaturesArticle } from 'src/data/article'
+import { BasicFeaturesArticle, BasicFeaturesArticleJson } from 'src/data/article'
 
 import OAddMoreBtn from 'src/components/buttons/OAddMoreBtn'
 
@@ -29,6 +35,8 @@ export default {
       options: {
         content: BasicFeaturesArticle,
         editable: true,
+        showToolbar: true,
+        showBubble: true,
         extensions: [
           ...RecommendedExtensions,
           new Placeholder({
@@ -42,37 +50,6 @@ export default {
           }),
         ],
         toolbar: [
-          OAddMoreBtn,
-          'separator',
-          'bold',
-          'italic',
-          'underline',
-          'strike',
-          'code',
-          'separator',
-          'heading',
-          'font-family',
-          'fore-color',
-          'back-color',
-          'format_clear',
-          'separator',
-          'align-dropdown',
-          'indent',
-          'outdent',
-          'line-height',
-          'separator',
-          'horizontal',
-          'bullet_list',
-          'ordered_list',
-          'todo_list',
-          'separator',
-          'blockquote',
-          'code_block',
-          'photo',
-          'table',
-          'separator',
-          'undo',
-          'redo',
         ]
       },
       json: '',
@@ -88,10 +65,12 @@ export default {
       this.json = getJSON()
       this.html = getHTML()
       console.log('html', this.html)
+      console.log('json', JSON.stringify(this.json))
     }
   },
   mounted () {
     this.$o.lang.set('zh-hans')
+    console.log('editor', this.$refs.editor.editor)
   },
   deactivated () {
   },
@@ -103,7 +82,15 @@ export default {
 <style lang="stylus">
   .page-quasar-tiptap-basic {
     .banner {
+      position relative
       height 100px
+
+      .options {
+        position absolute
+        bottom 0
+        height 40px
+        padding 0 1rem
+      }
     }
 
     .tiptap {