feat: menububble

donotebase · Apr 14, 2020 · db1b5c0 · db1b5c0
1 parent a250af4
commit db1b5c0
Show file tree

Hide file tree

Showing 20 changed files with 777 additions and 238 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -59,6 +59,7 @@ module.exports = {
     'no-undef': 0,
     'comma-dangle': 0,
     'prefer-const': 0,
+    'no-unused-vars': 0,
     'vue/no-unused-components': 0
   }
 }
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
@@ -51,9 +51,8 @@ export default {
     return {
       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/test2' },
-        { title: 'Basic', caption: 'Basic extensions', icon: 'mdi-text-box', type: 'route', to: '/quasar-tiptap/basic', groupLabel: 'quasar-tiptap' },
+        { title: 'Basic', caption: 'Basic extensions', icon: 'mdi-pencil', type: 'route', to: '/quasar-tiptap/basic', groupLabel: 'quasar-tiptap' },
+        { title: 'Readonly', caption: 'readonly', icon: 'mdi-eye', type: 'route', to: '/quasar-tiptap/readonly' },
         { title: 'Full Featured', caption: 'All extensions', icon: 'mdi-text-box', type: 'route', to: '/quasar-tiptap/all' },
       ]
     }

diff --git a/src/lib/components/QuasarTiptap.vue b/src/lib/components/QuasarTiptap.vue
@@ -1,7 +1,10 @@
 <template>
   <section class="tiptap tiptap-editor quasar-tiptap">
+    <!-- Main Toolbar -->
     <o-editor-menu-bar :editor="editor" :toolbar="toolbar" v-if="editable" />
 
+    <o-editor-menu-bubble :editor="editor" />
+
     <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" />
     </q-scroll-area>
@@ -60,10 +63,14 @@ import {
   ODiagram,
   OKatexBlock,
   OKatexInline,
-  OFormatClear
-} from 'src/lib/extentions'
+  OFormatClear,
+  RecommendedExtensions
+} from '../extentions'
+
+import DynamicClass from '../extentions/dynamic'
 
 import OEditorMenuBar from './menubars/OEditorMenuBar'
+import OEditorMenuBubble from './menubars/OEditorMenuBubble'
 
 export default {
   name: 'quasar-tiptap',
@@ -96,30 +103,31 @@ export default {
       type: Boolean,
       default: false
     },
-    toolbar: {
+    extensions: {
       type: Array,
       default: function () {
         return []
       }
     },
-    options: {
-      type: Object,
+    toolbar: {
+      type: Array,
       default: function () {
-        return {
-          content: '',
-          scrollable: false,
-          toolbar: []
-        }
+        return []
       }
     }
   },
   components: {
     EditorContent,
     OEditorMenuBar,
+    OEditorMenuBubble,
   },
   methods: {
     initEditor () {
+      const customExtensions = this.generateExtensions()
       const extensions = [
+        // custom
+        ...customExtensions,
+
         // required
         new HardBreak(),
         new History(),
@@ -130,65 +138,7 @@ export default {
         new TrailingNode({
           node: 'paragraph',
           notAfter: ['paragraph']
-        }),
-
-        // tiptop
-        new Bold(),
-        new Italic(),
-        new Strike(),
-        new Underline(),
-        new Code(),
-        new CodeBlock(),
-        new CodeBlockHighlight({
-          languages: {
-            java,
-            javascript,
-            css
-          }
-        }),
-        new BulletList(),
-        new ListItem(),
-        new OrderedList(),
-        new TodoList(),
-        new HorizontalRule(),
-        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 Link(),
-        new Image(),
-
-        // quasar-tiptop
-        new OTitle(),
-        new ODoc(),
-        new OParagraph(),
-        new OBlockquote(),
-        new OTodoItem({
-          nested: true
-        }),
-        new OHeading({ levels: [1, 2, 3, 4, 5] }),
-        new OAlignment(),
-        new OIndent(),
-        new OLineHeight(),
-        new OForeColor(),
-        new OBackColor(),
-        new OFontFamily(),
-        new OIframe(),
-        new ODiagram(),
-        new OKatexBlock(),
-        new OKatexInline(),
-        new OFormatClear()
+        })
       ]
 
       this.editor = new Editor({
@@ -199,10 +149,55 @@ export default {
         onUpdate: ({ state, getJSON, getHTML }) => {
           this.json = getJSON()
           this.html = getHTML()
-          console.log('json', this.html)
+          console.log('html', this.html)
         }
       })
     },
+    generateExtensions () {
+      let extensions = []
+      for (let extension of this.extensions) {
+        if (typeof extension === 'string') {
+          if (!RecommendedExtensions.includes(extension)) {
+            continue
+          }
+
+          switch (extension) {
+            // tiptop
+            case 'CodeBlockHighlight':
+              extension = new CodeBlockHighlight({
+                languages: { java, javascript, css }
+              })
+              break
+            case 'Table':
+              extension = new Table({
+                resizable: true
+              })
+              extensions.push(extension)
+              extensions.push(new TableHeader())
+              extensions.push(new TableCell())
+              extensions.push(new TableRow())
+              continue
+
+            // quasar-tiptop
+            case 'OTodoItem':
+              extension = new OTodoItem({ nested: true })
+              break
+            case 'OHeading':
+              extension = new OHeading({ levels: [1, 2, 3, 4, 5] })
+              break
+            default:
+              try {
+                extension = new DynamicClass(extension)
+              } catch (e) {
+                console.error(e.message)
+              }
+              break
+          }
+        }
+        extensions.push(extension)
+      }
+      return extensions
+    },
     // content
     setContent () {
       // From JSON