fix: diagram

src/lib/components/QuasarTiptap.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="tiptap tiptap-editor quasar-tiptap">
-    <o-editor-menu-bar :editor="editor" :toolbar="toolbar" />
+    <o-editor-menu-bar :editor="editor" :toolbar="toolbar" v-if="editable" />
 
     <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" />
@@ -88,6 +88,10 @@ export default {
       type: String,
       default: ''
     },
+    editable: {
+      type: Boolean,
+      default: true
+    },
     scrollable: {
       type: Boolean,
       default: false
@@ -97,6 +101,16 @@ export default {
       default: function () {
         return []
       }
+    },
+    options: {
+      type: Object,
+      default: function () {
+        return {
+          content: '',
+          scrollable: false,
+          toolbar: []
+        }
+      }
     }
   },
   components: {
@@ -180,6 +194,7 @@ export default {
       this.editor = new Editor({
         extensions: extensions,
         autoFocus: true,
+        editable: this.editable,
         content: '',
         onUpdate: ({ state, getJSON, getHTML }) => {
           this.json = getJSON()

src/lib/components/extensions/ODiagram.vue

@@ -1,10 +1,10 @@
 <template>
   <section class="o-diagram" :class="contentClass">
-    <div class="row col-12 justify-between o-toolbar" v-if="view.editable">
+    <div class="row col-12 justify-between o-toolbar">
       <div class="row col items-center providers">文本绘图</div>
       <div class="col-auto actions">
         <q-btn :label="$t('help')" to="/help/mermaid" flat v-if="false" />
-        <q-btn-dropdown :label="$t('template')" menu-anchor="bottom left" menu-self="top left" :menu-offset="[0, 8]" content-class="o-menu" dense flat>
+        <q-btn-dropdown :label="$t('template')" menu-anchor="bottom left" menu-self="top left" :menu-offset="[0, 8]" content-class="o-menu" dense flat v-if="view.editable">
           <q-list>
             <q-item v-for="(item, index) of mermaidDiagrams" :key="index" @click.native="onSelectTemplate(item)" clickable v-close-popup>
               <q-item-section side v-if="false"><q-icon name="format_align_left" /></q-item-section>
@@ -17,12 +17,12 @@
           <q-btn icon="fullscreen" @click="toggleFullScreen" flat>
             <q-tooltip>{{$t('action.fullscreen')}}</q-tooltip>
           </q-btn>
-          <q-btn :label="toggleLabel" @click="toggleMode" class="bg-blue text-white" flat />
+          <q-btn :label="toggleLabel" @click="toggleMode" class="bg-blue text-white" flat v-if="view.editable" />
         </template>
       </div>
     </div>
     <section class="row col-12 diagram">
-      <section class="col source" v-if="mode==='edit' || fullScreen">
+      <section class="col source" v-if="(mode==='edit' || fullScreen) && view.editable">
         <codemirror class="diagram-editor"
                     id="codemirror"
                     v-model="src"

src/lib/css/tiptap.styl

@@ -516,7 +516,6 @@
     border-radius: 0.2em;
     background-color: transparent;
     transition: 0.4s background;
-    margin-bottom 2px
   }
   .todo-content {
     padding-left: 6px;

src/lib/data/article.js

@@ -6,7 +6,12 @@
  * @date 2020.04.11
  */
 export const BasicFeaturesArticle = `
-json <h1>Basic Features</h1><h2 id="d5fb3c" level="2">Introduction</h2><p>🔥Quasar <strong>Tiptap</strong> Editor 🔥is a WYSIWYG rich-text editor using&nbsp;tiptap&nbsp;and Quasar. That's easy to use, friendly to developers, fully extensible and clean in design.</p><table><tbody><tr><th><p></p></th><th><p></p></th><th><p></p></th></tr><tr><td><p><span style="font-family: Roboto">add</span></p></td><td><p><span style="font-family: Monaco">bddd</span></p></td><td><p><span style="font-family: Impact">cddd</span></p></td></tr></tbody></table><h2 id="3b0d30" level="2">Text</h2><p data-text-align="center"><strong>Bold text</strong></p><p><em>Italictext</em></p><p><u>Underline text</u></p><p><s>Strike through text</s></p><p><code>Inline code</code></p><p><span style="color: #ff0000">Text with color</span></p><p><span style="background: #ffff00">Text with background</span></p><p></p><h2 id="2c1e92" level="2">Alignment</h2><p data-indent="1">This a indent Text.</p><blockquote><p>This is a block quote</p><p>Second line</p></blockquote><pre><code>let a = 10
+<h1>json Basic Features</h1><h2 id="d5fb3c" level="2">Introduction</h2><p>🔥Quasar <strong>Tiptap</strong> Editor 🔥is a WYSIWYG rich-text editor using&nbsp;tiptap&nbsp;and Quasar. That's easy to use, friendly to developers, fully extensible and clean in design.</p><table><tbody><tr><th><p></p></th><th><p></p></th><th><p></p></th></tr><tr><td><p><span style="font-family: Roboto">add</span></p></td><td><p><span style="font-family: Monaco">bddd</span></p></td><td><p><span style="font-family: Impact">cddd</span></p></td></tr></tbody></table><h2 id="ce7176" level="2">Diagram</h2><p></p><diagram src="graph TD
+A[Christmas] -->|Get money| B(Go shopping)
+B --> C{Let me think}
+C -->|One| D[Laptop]
+C -->|Two| E[iPhonee]
+C -->|Three| F[Cars]"></diagram><p></p><p></p><h2 id="3b0d30" level="2">Text</h2><p data-text-align="center"><strong>Bold text</strong></p><p><em>Italictext</em></p><p><u>Underline text</u></p><p><s>Strike through text</s></p><p><code>Inline code</code></p><p><span style="color: #ff0000">Text with color</span></p><p><span style="background: #ffff00">Text with background</span></p><p></p><h2 id="2c1e92" level="2">Alignment</h2><p data-indent="1">This a indent Text.</p><blockquote><p>This is a block quote</p><p>Second line</p></blockquote><pre><code>let a = 10
 let b = 20</code></pre><p></p>
 `
 

src/pages/quasar-tiptap/basic.vue

@@ -5,7 +5,7 @@
         <span class="text-h3">Basic</span>
       </header>
       <section class="row col-10 q-pa-md">
-        <quasar-tiptap :content="content" :toolbar="toolbar" />
+        <quasar-tiptap v-bind="options" />
       </section>
     </section>
   </q-page>
@@ -20,40 +20,43 @@ export default {
   name: 'page-quasar-tiptap-basic',
   data () {
     return {
-      content: BasicFeaturesArticle,
-      toolbar: [
-        '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',
-      ]
+      options: {
+        content: BasicFeaturesArticle,
+        editable: false,
+        toolbar: [
+          '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',
+        ]
+      }
     }
   },
   components: {