Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Collapsable Regions and Pasting Images #6551

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Collapsable Regions and Pasting Images #6551

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
13 changes: 13 additions & 0 deletions client/components/editor/common/cmFold.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
151 changes: 99 additions & 52 deletions client/components/editor/editor-markdown.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -433,21 +433,29 @@ export default {
this.processContent(newContent)
}, 600),
onCmPaste (cm, ev) {
// const clipItems = (ev.clipboardData || ev.originalEvent.clipboardData).items
// for (let clipItem of clipItems) {
// if (_.startsWith(clipItem.type, 'image/')) {
// const file = clipItem.getAsFile()
// const reader = new FileReader()
// reader.onload = evt => {
// this.$store.commit(`loadingStart`, 'editor-paste-image')
// this.insertAfter({
// content: `![${file.name}](${evt.target.result})`,
// newLine: true
// })
// }
// reader.readAsDataURL(file)
// }
// }
const clipItems = (ev.clipboardData || ev.originalEvent.clipboardData).items
for (let clipItem of clipItems) {
if (_.startsWith(clipItem.type, 'image/')) {
const file = clipItem.getAsFile()
console.log(file)
const reader = new FileReader()
reader.onload = evt => {
this.insertAfter({
content: `<markdown collapsable title="${file.name}" type="Image">`,
newLine: true
})
this.insertAfter({
content: `<img src="${evt.target.result}">`,
newLine: false
})
this.insertAfter({
content: `</markdown>`,
newLine: true
})
}
reader.readAsDataURL(file)
}
}
},
processContent (newContent) {
linesMap = []
Expand Down Expand Up @@ -664,54 +672,93 @@ 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()
}
})
this.cm.eachLine(from, to, ln => {
const line = ln.lineNo()
if (ln.text.startsWith('```diagram')) {
found = 'diagram'
foundStart = line
} else if (ln.text === '```' && found) {
switch (found) {
// ------------------------------
// -> DIAGRAM
// ------------------------------
case 'diagram': {
if (line - foundStart !== 2) {
return
}
this.addMarker({
kind: 'diagram',
from: { line: foundStart, ch: 3 },
to: { line: foundStart, ch: 10 },
text: 'Edit Diagram',
action: ((start, end) => {
return (ev) => {
this.cm.doc.setSelection({ line: start, ch: 0 }, { line: end, ch: 3 })
try {
const raw = this.cm.doc.getLine(end - 1)
this.$store.set('editor/activeModalData', Buffer.from(raw, 'base64').toString())
this.toggleModal(`editorModalDrawio`)
} catch (err) {
return this.$store.commit('showNotification', {
message: 'Failed to process diagram data.',
style: 'warning',
icon: 'warning'
})
if (found == null) {
if (ln.text.startsWith('```diagram')) {
found = 'diagram'
foundStart = line
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
// ------------------------------
case 'diagram': {
if (line - foundStart !== 2) {
return
}
this.addMarker({
kind: 'diagram',
from: { line: foundStart, ch: 3 },
to: { line: foundStart, ch: 10 },
text: markerTitle,
action: ((start, end) => {
return (ev) => {
this.cm.doc.setSelection({ line: start, ch: 0 }, { line: end, ch: 3 })
try {
const raw = this.cm.doc.getLine(end - 1)
this.$store.set('editor/activeModalData', Buffer.from(raw, 'base64').toString())
this.toggleModal(`editorModalDrawio`)
} catch (err) {
return this.$store.commit('showNotification', {
message: 'Failed to process diagram data.',
style: 'warning',
icon: 'warning'
})
}
}
}
})(foundStart, line)
})
if (ln.height > 0) {
this.cm.foldCode(foundStart)
})(foundStart, line)
})
if (ln.height > 0) {
this.cm.foldCode(foundStart)
}
break
}
}
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
}
break
}
found = null
}
found = null
}
})
},
Expand Down