|
|
@ -433,21 +433,29 @@ export default {
|
|
|
|
this.processContent(newContent)
|
|
|
|
this.processContent(newContent)
|
|
|
|
}, 600),
|
|
|
|
}, 600),
|
|
|
|
onCmPaste (cm, ev) {
|
|
|
|
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) {
|
|
|
|
processContent (newContent) {
|
|
|
|
linesMap = []
|
|
|
|
linesMap = []
|
|
|
@ -664,6 +672,8 @@ export default {
|
|
|
|
processMarkers (from, to) {
|
|
|
|
processMarkers (from, to) {
|
|
|
|
let found = null
|
|
|
|
let found = null
|
|
|
|
let foundStart = 0
|
|
|
|
let foundStart = 0
|
|
|
|
|
|
|
|
let markerTitle = ''
|
|
|
|
|
|
|
|
let markerType = ''
|
|
|
|
this.cm.doc.getAllMarks().forEach(mk => {
|
|
|
|
this.cm.doc.getAllMarks().forEach(mk => {
|
|
|
|
if (mk.__kind) {
|
|
|
|
if (mk.__kind) {
|
|
|
|
mk.clear()
|
|
|
|
mk.clear()
|
|
|
@ -671,10 +681,28 @@ export default {
|
|
|
|
})
|
|
|
|
})
|
|
|
|
this.cm.eachLine(from, to, ln => {
|
|
|
|
this.cm.eachLine(from, to, ln => {
|
|
|
|
const line = ln.lineNo()
|
|
|
|
const line = ln.lineNo()
|
|
|
|
|
|
|
|
if (found == null) {
|
|
|
|
if (ln.text.startsWith('```diagram')) {
|
|
|
|
if (ln.text.startsWith('```diagram')) {
|
|
|
|
found = 'diagram'
|
|
|
|
found = 'diagram'
|
|
|
|
foundStart = line
|
|
|
|
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) {
|
|
|
|
switch (found) {
|
|
|
|
// ------------------------------
|
|
|
|
// ------------------------------
|
|
|
|
// -> DIAGRAM
|
|
|
|
// -> DIAGRAM
|
|
|
@ -687,7 +715,7 @@ export default {
|
|
|
|
kind: 'diagram',
|
|
|
|
kind: 'diagram',
|
|
|
|
from: { line: foundStart, ch: 3 },
|
|
|
|
from: { line: foundStart, ch: 3 },
|
|
|
|
to: { line: foundStart, ch: 10 },
|
|
|
|
to: { line: foundStart, ch: 10 },
|
|
|
|
text: 'Edit Diagram',
|
|
|
|
text: markerTitle,
|
|
|
|
action: ((start, end) => {
|
|
|
|
action: ((start, end) => {
|
|
|
|
return (ev) => {
|
|
|
|
return (ev) => {
|
|
|
|
this.cm.doc.setSelection({ line: start, ch: 0 }, { line: end, ch: 3 })
|
|
|
|
this.cm.doc.setSelection({ line: start, ch: 0 }, { line: end, ch: 3 })
|
|
|
@ -713,6 +741,25 @@ export default {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
found = null
|
|
|
|
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 }) {
|
|
|
|
addMarker ({ kind, from, to, text, action }) {
|
|
|
|