ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

add something broken

Browse Source
This commit is contained in:
Philipp Kühn
2018-09-03 13:55:45 +02:00
parent feb79e0648
commit 761e50f41d
3 changed files with 222 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
examples/Components/App/style.scss
View File

@@ -41,58 +41,6 @@
code {
display: block;
.hljs-comment,
.hljs-quote {
color: #999999;
}
.hljs-variable,
.hljs-template-variable,
.hljs-attribute,
.hljs-tag,
.hljs-name,
.hljs-regexp,
.hljs-link,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class {
color: #f2777a;
}
.hljs-number,
.hljs-meta,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params {
color: #f99157;
}
.hljs-string,
.hljs-symbol,
.hljs-bullet {
color: #99cc99;
}
.hljs-title,
.hljs-section {
color: #ffcc66;
}
.hljs-keyword,
.hljs-selector-tag {
color: #6699cc;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: 700;
}
}
}

71
examples/Components/Routes/CodeHighlighting/index.vue
View File

@@ -69,4 +69,73 @@ export default {
}
},
}
</script>
</script>
<style lang="scss">
pre {
&::before {
content: attr(data-language);
text-transform: uppercase;
display: block;
text-align: right;
font-weight: bold;
font-size: 0.6rem;
}
code {
.hljs-comment,
.hljs-quote {
color: #999999;
}
.hljs-variable,
.hljs-template-variable,
.hljs-attribute,
.hljs-tag,
.hljs-name,
.hljs-regexp,
.hljs-link,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class {
color: #f2777a;
}
.hljs-number,
.hljs-meta,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params {
color: #f99157;
}
.hljs-string,
.hljs-symbol,
.hljs-bullet {
color: #99cc99;
}
.hljs-title,
.hljs-section {
color: #ffcc66;
}
.hljs-keyword,
.hljs-selector-tag {
color: #6699cc;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: 700;
}
}
}
</style>

153
packages/tiptap-extensions/src/nodes/CodeBlockHighlight.js
View File

@@ -43,6 +43,152 @@ export default class CodeBlockHighlightNode extends Node {
get plugins() {
return [
// new Plugin({
// state: {
// init(_, { doc }) {
// const decorations = []
// const blocks = findBlockNodes(doc)
// .filter(item => item.node.type.name === 'code_block')
// const flatten = list => list.reduce(
// (a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []
// )
// function parseNodes(nodes, className = []) {
// return nodes.map(node => {
// const classes = [
// ...className,
// ...node.properties ? node.properties.className : [],
// ]
// if (node.children) {
// return parseNodes(node.children, classes)
// }
// return {
// text: node.value,
// classes,
// }
// })
// }
// blocks.forEach(block => {
// let startPos = block.pos + 1
// const nodes = low.highlightAuto(block.node.textContent).value
// flatten(parseNodes(nodes))
// .map(node => {
// const from = startPos
// const to = from + node.text.length
// startPos = to
// return {
// ...node,
// from,
// to,
// }
// })
// .forEach(node => {
// const decoration = Decoration.inline(node.from, node.to, {
// class: node.classes.join(' '),
// })
// decorations.push(decoration)
// })
// })
// return DecorationSet.create(doc, decorations)
// },
// apply(tr, set) {
// return set.map(tr.mapping, tr.doc)
// },
// },
// props: {
// decorations(state) {
// return this.getState(state)
// },
// },
// }),
// new Plugin({
// state: {
// init(_, { doc }) {
// const decorations = []
// const blocks = findBlockNodes(doc)
// .filter(item => item.node.type.name === 'code_block')
// // console.log({blocks})
// const flatten = list => list.reduce(
// (a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []
// )
// function parseNodes(nodes, className = []) {
// return nodes.map(node => {
// const classes = [
// ...className,
// ...node.properties ? node.properties.className : [],
// ]
// if (node.children) {
// return parseNodes(node.children, classes)
// }
// return {
// text: node.value,
// classes,
// }
// })
// }
// blocks.forEach(block => {
// let startPos = block.pos + 1
// const hightlight = low.highlightAuto(block.node.textContent)
// const nodes = hightlight.value
// decorations.push(Decoration.node(block.pos, block.pos + block.node.nodeSize, {
// 'data-language': hightlight.language,
// }))
// flatten(parseNodes(nodes))
// .map(node => {
// const from = startPos
// const to = from + node.text.length
// startPos = to
// return {
// ...node,
// from,
// to,
// }
// })
// .forEach(node => {
// const decoration = Decoration.inline(node.from, node.to, {
// class: node.classes.join(' '),
// })
// decorations.push(decoration)
// })
// })
// return DecorationSet.create(doc, decorations)
// },
// apply(tr, set) {
// return set.map(tr.mapping, tr.doc)
// },
// },
// props: {
// decorations(state) {
// console.log(this.getState(state))
// return this.getState(state)
// },
// },
// }),
new Plugin({
props: {
decorations({ doc }) {
@@ -76,7 +222,12 @@ export default class CodeBlockHighlightNode extends Node {
blocks.forEach(block => {
let startPos = block.pos + 1
const nodes = low.highlightAuto(block.node.textContent).value
const hightlight = low.highlightAuto(block.node.textContent)
const nodes = hightlight.value
decorations.push(Decoration.node(block.pos, block.pos + block.node.nodeSize, {
'data-language': hightlight.language,
}))
flatten(parseNodes(nodes))
.map(node => {