\n`); + state.text(node.textContent, false); + state.ensureNewLine(); + state.write(`
`); + state.closeBlock(node); + }, + code_block: function code_block(state, node) { + state.write("```" + (node.attrs.params || "") + "\n"); + state.text(node.textContent, false); + state.ensureNewLine(); + state.write("```"); + state.closeBlock(node); + }, + heading: function heading(state, node) { + state.write(state.repeat("#", node.attrs.level) + " "); + state.renderInline(node); + state.closeBlock(node); + }, + horizontal_rule: function horizontal_rule(state, node) { + state.write(node.attrs.markup || "---"); + state.closeBlock(node); + }, + bullet_list: function bullet_list(state, node) { + state.renderList(node, " ", function () { return (node.attrs.bullet || "*") + " "; }); + }, + ordered_list: function ordered_list(state, node) { + var start = node.attrs.order || 1; + var maxW = String(start + node.childCount - 1).length; + var space = state.repeat(" ", maxW + 2); + state.renderList(node, space, function (i) { + var nStr = String(start + i); + return state.repeat(" ", maxW - nStr.length) + nStr + ". " + }); + }, + list_item: function list_item(state, node) { + state.renderContent(node); + }, + paragraph: function paragraph(state, node) { + state.renderInline(node); + state.closeBlock(node); + }, + + image: function image(state, node) { + state.write("![" + state.esc(node.attrs.alt || "") + "](" + state.esc(node.attrs.src) + + (node.attrs.title ? " " + state.quote(node.attrs.title) : "") + ")"); + }, + hard_break: function hard_break(state, node, parent, index) { + for (var i = index + 1; i < parent.childCount; i++) + { if (parent.child(i).type != node.type) { + state.write("\\\n"); + return + } } + }, + text: function text(state, node) { + state.text(node.text); + } +}, { + em: {open: "*", close: "*", mixable: true, expelEnclosingWhitespace: true}, + strong: {open: "**", close: "**", mixable: true, expelEnclosingWhitespace: true}, + link: { + open: function open(_state, mark, parent, index) { + return isPlainURL(mark, parent, index, 1) ? "<" : "[" + }, + close: function close(state, mark, parent, index) { + return isPlainURL(mark, parent, index, -1) ? ">" + : "](" + state.esc(mark.attrs.href) + (mark.attrs.title ? " " + state.quote(mark.attrs.title) : "") + ")" + } + }, + code: {open: function open(_state, _mark, parent, index) { return backticksFor(parent.child(index), -1) }, + close: function close(_state, _mark, parent, index) { return backticksFor(parent.child(index - 1), 1) }, + escape: false} +}); + +function backticksFor(node, side) { + var ticks = /`+/g, m, len = 0; + if (node.isText) { while (m = ticks.exec(node.text)) { len = Math.max(len, m[0].length); } } + var result = len > 0 && side > 0 ? " `" : "`"; + for (var i = 0; i < len; i++) { result += "`"; } + if (len > 0 && side < 0) { result += " "; } + return result +} + +function isPlainURL(link, parent, index, side) { + if (link.attrs.title || !/^\w+:/.test(link.attrs.href)) { return false } + var content = parent.child(index + (side < 0 ? -1 : 0)); + if (!content.isText || content.text != link.attrs.href || content.marks[content.marks.length - 1] != link) { return false } + if (index == (side < 0 ? 1 : parent.childCount - 1)) { return true } + var next = parent.child(index + (side < 0 ? -2 : 1)); + return !link.isInSet(next.marks) +} + +class MarkdownView { + constructor(target, content) { + + // Build DOM from content + const renderDoc = document.implementation.createHTMLDocument(); + renderDoc.body.innerHTML = content; + + const htmlDoc = DOMParser.fromSchema(schema).parse(renderDoc.body); + const markdown = mdSerializer.serialize(htmlDoc); + + this.textarea = target.appendChild(document.createElement("textarea")) + this.textarea.value = markdown; + } + + get content() { + const markdown = this.textarea.value; + const doc = mdParser.parse(markdown); + console.log(doc); + const fragment = DOMSerializer.fromSchema(schema).serializeFragment(doc.content); + const renderDoc = document.implementation.createHTMLDocument(); + renderDoc.body.appendChild(fragment); + return renderDoc.body.innerHTML; + } + + focus() { this.textarea.focus() } + destroy() { this.textarea.remove() } +} + +export default MarkdownView; \ No newline at end of file diff --git a/resources/js/editor/ProseMirrorView.js b/resources/js/editor/ProseMirrorView.js new file mode 100644 index 000000000..1988d6921 --- /dev/null +++ b/resources/js/editor/ProseMirrorView.js @@ -0,0 +1,34 @@ +import {EditorState} from "prosemirror-state"; +import {EditorView} from "prosemirror-view"; +import {exampleSetup} from "prosemirror-example-setup"; + +import {DOMParser, DOMSerializer} from "prosemirror-model"; + +import schema from "./schema"; + +class ProseMirrorView { + constructor(target, content) { + + // Build DOM from content + const renderDoc = document.implementation.createHTMLDocument(); + renderDoc.body.innerHTML = content; + + this.view = new EditorView(target, { + state: EditorState.create({ + doc: DOMParser.fromSchema(schema).parse(renderDoc.body), + plugins: exampleSetup({schema}) + }) + }); + } + + get content() { + const fragment = DOMSerializer.fromSchema(schema).serializeFragment(this.view.state.doc.content); + const renderDoc = document.implementation.createHTMLDocument(); + renderDoc.body.appendChild(fragment); + return renderDoc.body.innerHTML; + } + focus() { this.view.focus() } + destroy() { this.view.destroy() } +} + +export default ProseMirrorView; \ No newline at end of file diff --git a/resources/js/editor/schema.js b/resources/js/editor/schema.js index 540db5704..7c6a11cb9 100644 --- a/resources/js/editor/schema.js +++ b/resources/js/editor/schema.js @@ -2,9 +2,35 @@ import {Schema} from "prosemirror-model"; import {schema as basicSchema} from "prosemirror-schema-basic"; import {addListNodes} from "prosemirror-schema-list"; -const bookstackSchema = new Schema({ - nodes: addListNodes(basicSchema.spec.nodes, "paragraph block*", "block"), +const baseNodes = addListNodes(basicSchema.spec.nodes, "paragraph block*", "block"); + +const nodeCallout = { + attrs: { + type: {default: 'info'}, + }, + content: "inline*", + group: "block", + defining: true, + parseDOM: [ + {tag: 'p.callout.info', attrs: {type: 'info'}}, + {tag: 'p.callout.success', attrs: {type: 'success'}}, + {tag: 'p.callout.danger', attrs: {type: 'danger'}}, + {tag: 'p.callout.warning', attrs: {type: 'warning'}}, + {tag: 'p.callout', attrs: {type: 'info'}}, + ], + toDOM: function(node) { + const type = node.attrs.type || 'info'; + return ['p', {class: 'callout ' + type}, 0]; + } +}; + +const customNodes = baseNodes.prepend({ + callout: nodeCallout, +}); + +const schema = new Schema({ + nodes: customNodes, marks: basicSchema.spec.marks }) -export {bookstackSchema as schema}; \ No newline at end of file +export default schema; \ No newline at end of file diff --git a/resources/views/editor-test.blade.php b/resources/views/editor-test.blade.php index dd740ab0a..ee60a2dd3 100644 --- a/resources/views/editor-test.blade.php +++ b/resources/views/editor-test.blade.php @@ -23,6 +23,9 @@Lorem ipsum dolor sit amet.
++ This is an info callout test! +