Paste Images

client/components/editor/common/cmFold.js

@@ -44,6 +44,19 @@ function foldHandler (cm, start) {
       end++
       nextNextLine = cm.getLine(end + 1)
     }
+
+    // -> Collapsable
+  } else if (cm.getLine(start.line).startsWith('<markdown collapsable')) {
+    end = start.line
+    let nextNextLine = cm.getLine(end + 1)
+    while (end < lastLineNo) {
+      if (nextNextLine.includes('</markdown>')) {
+        end++
+        break
+      }
+      end++
+      nextNextLine = cm.getLine(end + 1)
+    }
   } else {
     // -> HEADER
 

client/components/editor/editor-markdown.vue

@@ -433,21 +433,29 @@ export default {
       this.processContent(newContent)
     }, 600),
     onCmPaste (cm, ev) {
-      // const clipItems = (ev.clipboardData || ev.originalEvent.clipboardData).items
+      const clipItems = (ev.clipboardData || ev.originalEvent.clipboardData).items
-      // for (let clipItem of clipItems) {
+      for (let clipItem of clipItems) {
-      //   if (_.startsWith(clipItem.type, 'image/')) {
+        if (_.startsWith(clipItem.type, 'image/')) {
-      //     const file = clipItem.getAsFile()
+          const file = clipItem.getAsFile()
-      //     const reader = new FileReader()
+          console.log(file)
-      //     reader.onload = evt => {
+          const reader = new FileReader()
-      //       this.$store.commit(`loadingStart`, 'editor-paste-image')
+          reader.onload = evt => {
-      //       this.insertAfter({
+            this.insertAfter({
-      //         content: `![${file.name}](${evt.target.result})`,
+              content: `<markdown collapsable title="${file.name}" type="Image">`,
-      //         newLine: true
+              newLine: true
-      //       })
+            })
-      //     }
+            this.insertAfter({
-      //     reader.readAsDataURL(file)
+              content: `<img src="${evt.target.result}">`,
-      //   }
+              newLine: false
-      // }
+            })
+            this.insertAfter({
+              content: `</markdown>`,
+              newLine: true
+            })
+          }
+          reader.readAsDataURL(file)
+        }
+      }
     },
     processContent (newContent) {
       linesMap = []
@@ -664,6 +672,8 @@ export default {
     processMarkers (from, to) {
       let found = null
       let foundStart = 0
+      let markerTitle = ''
+      let markerType = ''
       this.cm.doc.getAllMarks().forEach(mk => {
         if (mk.__kind) {
           mk.clear()
@@ -671,10 +681,28 @@ export default {
       })
       this.cm.eachLine(from, to, ln => {
         const line = ln.lineNo()
+        if (found == null) {
           if (ln.text.startsWith('```diagram')) {
             found = 'diagram'
             foundStart = line
-        } else if (ln.text === '```' && found) {
+            markerTitle = 'Edit Diagram'
+            markerType = ''
+          } else if (ln.text.startsWith('<markdown collapsable')) {
+            found = 'collapsable'
+            foundStart = line
+            markerTitle = ''
+            markerType = '<markdown>'
+            let match = ln.text.match(/title="([^"]*)"/)
+            if (match) {
+              markerTitle = match[1]
+            }
+            match = ln.text.match(/type="([^"]*)"/)
+            if (match) {
+              markerType = match[1]
+            }
+          }
+        } else if (found === 'diagram') {
+          if (ln.text === '```' && found) {
             switch (found) {
               // ------------------------------
               // -> DIAGRAM
@@ -687,7 +715,7 @@ export default {
                   kind: 'diagram',
                   from: { line: foundStart, ch: 3 },
                   to: { line: foundStart, ch: 10 },
-                text: 'Edit Diagram',
+                  text: markerTitle,
                   action: ((start, end) => {
                     return (ev) => {
                       this.cm.doc.setSelection({ line: start, ch: 0 }, { line: end, ch: 3 })
@@ -713,6 +741,25 @@ export default {
             }
             found = null
           }
+        } else if (found === 'collapsable') {
+          if (ln.text.includes('</markdown>')) {
+            switch (found) {
+              case 'collapsable': {
+                this.addMarker({
+                  kind: 'diagram',
+                  from: { line: foundStart, ch: 0 },
+                  to: { line: foundStart, ch: 120 },
+                  text: markerType + ' ' + markerTitle
+                })
+                if (ln.height > 0) {
+                  this.cm.foldCode(foundStart)
+                }
+                break
+              }
+            }
+            found = null
+          }
+        }
       })
     },
     addMarker ({ kind, from, to, text, action }) {