feat: remove external css resources

client/components/editor/editor-markdown.vue

@@ -51,14 +51,14 @@
         span Horizontal Bar
     .editor-markdown-main
       .editor-markdown-sidebar
-        //- v-tooltip(right)
-        //-   v-btn(icon, slot='activator', dark, @click='toggleModal(`editorModalMedia`)').mx-0
-        //-     v-icon(:color='activeModal === `editorModalMedia` ? `teal` : ``') image
-        //-   span Insert Media
         v-tooltip(right, color='primary')
           v-btn(icon, slot='activator', dark).mx-0
-            v-icon image
-          span Insert Media
+            v-icon link
+          span Insert Link
+        v-tooltip(right)
+          v-btn(icon, slot='activator', dark, @click='toggleModal(`editorModalMedia`)').mx-0
+            v-icon(:color='activeModal === `editorModalMedia` ? `teal` : ``') image
+          span Insert Image
         v-tooltip(right, color='primary')
           v-btn(icon, slot='activator', dark).mx-0
             v-icon insert_drive_file
@@ -75,15 +75,15 @@
           v-btn(icon, slot='activator', dark).mx-0
             v-icon functions
           span Insert Math Expression
-        v-tooltip(right, color='primary')
-          v-btn(icon, slot='activator', dark).mx-0
-            v-icon link
-          span Insert Link
-        v-spacer
         v-tooltip(right, color='primary')
           v-btn(icon, slot='activator', dark).mx-0
             v-icon border_outer
           span Table Helper
+        v-spacer
+        v-tooltip(right, color='primary')
+          v-btn(icon, slot='activator', dark, @click='toggleFullscreen').mx-0
+            v-icon crop_free
+          span Fullscreen Editor
         v-tooltip(right, color='primary')
           v-btn(icon, slot='activator', dark).mx-0
             v-icon help
@@ -124,10 +124,7 @@ import 'codemirror/addon/selection/active-line.js'
 import 'codemirror/addon/display/fullscreen.js'
 import 'codemirror/addon/display/fullscreen.css'
 import 'codemirror/addon/selection/mark-selection.js'
-import 'codemirror/addon/scroll/annotatescrollbar.js'
-import 'codemirror/addon/search/matchesonscrollbar.js'
 import 'codemirror/addon/search/searchcursor.js'
-import 'codemirror/addon/search/match-highlighter.js'
 
 // Markdown-it
 import MarkdownIt from 'markdown-it'
@@ -296,6 +293,9 @@ export default {
     }, 500),
     toggleAround (before, after) {
 
+    },
+    toggleFullscreen () {
+      this.cm.setOption('fullScreen', true)
     }
   }
 }

client/components/editor/editor-modal-media.vue

@@ -2,25 +2,97 @@
   v-card.editor-modal-media.animated.fadeInLeft(flat, tile)
     v-container.pa-3(grid-list-lg, fluid)
       v-layout(row, wrap)
-        v-flex(xs3)
+        v-flex(xs9)
           v-card.radius-7.animated.fadeInLeft.wait-p1s(light)
             v-card-text
-              file-pond(
+              v-toolbar.radius-7(color='teal lighten-5', dense, flat)
+                .body-2.teal--text Images
+                v-spacer
+                v-btn(outline, small, color='teal')
+                  v-icon(left) keyboard_backspace
+                  span Parent Folder
+                v-btn(outline, small, color='teal')
+                  v-icon(left) add
+                  span New Folder
+              v-list.mt-3(dense, two-line)
+                template(v-for='(item, idx) of [1,2,3,4,5,6,7,8,9,10]')
+                  v-list-tile(@click='')
+                    v-list-tile-avatar
+                      v-avatar.radius-7(color='teal', tile)
+                        v-icon(dark) image
+                    v-list-tile-content
+                      v-list-tile-title Image {{item}}
+                      v-list-tile-sub-title 1024x768, 10 KBs
+                    v-list-tile-action
+                      .caption.pr-3 2019-04-07
+                    v-list-tile-action
+                      v-chip(label, small) JPG
+                  v-divider(v-if='idx < 10 - 1')
+              .d-flex.mt-3
+                v-toolbar.radius-7(flat, color='grey lighten-4', dense)
+                  .body-2 / universe
+                  v-spacer
+                  .body-1.grey--text.text--darken-1 10 files
+                v-btn.ml-3(color='teal', dark, @click='insert')
+                  v-icon(left) save_alt
+                  span Insert
+
+        v-flex(xs3)
+          v-card.radius-7.animated.fadeInRight.wait-p3s(light)
+            v-card-text
+              v-toolbar.radius-7(color='teal lighten-5', dense, flat)
+                v-icon.mr-3(color='teal') cloud_upload
+                .body-2.teal--text Upload Images
+              file-pond.mt-3(
                 name='mediaUpload'
                 ref='pond'
-                label-idle='Drop files here...'
+                label-idle='Browse or Drop files here...'
                 allow-multiple='true'
                 accepted-file-types='image/jpeg, image/png'
                 :files='files'
               )
-        v-flex(xs9)
-          v-card.radius-7.animated.fadeInLeft.wait-p3s(light)
-            v-card-text Beep boop
+            v-divider
+            v-card-actions.pa-3
+              .caption.grey--text.text-darken-2 Max 20 files, 5 MB each
+              v-spacer
+              v-btn(color='teal', dark) Upload
+
+          v-card.mt-3.radius-7.animated.fadeInRight.wait-p4s(light)
+            v-card-text.pb-0
+              v-toolbar.radius-7(color='teal lighten-5', dense, flat)
+                v-icon.mr-3(color='teal') cloud_download
+                .body-2.teal--text Fetch Remote Image
+              v-text-field.mt-3(
+                v-model='remoteImageUrl'
+                outline
+                single-line
+                background-color='grey lighten-2'
+                placeholder='https://example.com/image.jpg'
+              )
+            v-divider
+            v-card-actions.pa-3
+              .caption.grey--text.text-darken-2 Max 5 MB
+              v-spacer
+              v-btn(color='teal', dark) Fetch
+
+          v-card.mt-3.radius-7.animated.fadeInRight.wait-p4s(light)
+            v-card-text.pb-0
+              v-toolbar.radius-7(color='teal lighten-5', dense, flat)
+                v-icon.mr-3(color='teal') format_align_left
+                .body-2.teal--text Alignment
+              v-select.mt-3(
+                v-model='imageAlignment'
+                :items='imageAlignments'
+                outline
+                single-line
+                background-color='grey lighten-2'
+                placeholder='None'
+              )
 </template>
 
 <script>
 // import _ from 'lodash'
-// import { sync } from 'vuex-pathify'
+import { sync } from 'vuex-pathify'
 import vueFilePond from 'vue-filepond'
 import 'filepond/dist/filepond.min.css'
 
@@ -42,16 +114,28 @@ export default {
   },
   data() {
     return {
-      files: []
+      files: [],
+      remoteImageUrl: '',
+      imageAlignments: [
+        { text: 'None', value: '' },
+        { text: 'Centered', value: 'center' },
+        { text: 'Right', value: 'right' },
+        { text: 'Absolute Top Right', value: 'abstopright' }
+      ],
+      imageAlignment: ''
     }
   },
   computed: {
     isShown: {
       get() { return this.value },
       set(val) { this.$emit('input', val) }
-    }
+    },
+    activeModal: sync('editor/activeModal')
   },
   methods: {
+    insert () {
+      this.activeModal = ''
+    }
   }
 }
 </script>