webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-06-29 04:01:49 +03:00
Code Activity

Attempted adding tricky custom block

Browse Source 
Attempted adding callouts, which have the challenge of being shown via
HTML within markdown content. Got stuck on parsing back to the state
from markdown.
This commit is contained in:
Dan Brown
2022-01-07 16:37:36 +00:00
parent aa9fe9ca82
commit 0fb8ba00a5
5 changed files with 243 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
resources/js/editor.js
View File

@ -1,63 +1,6 @@
import {EditorState} from "prosemirror-state";
import {EditorView} from "prosemirror-view";
import {exampleSetup} from "prosemirror-example-setup";
import {defaultMarkdownParser,
defaultMarkdownSerializer} from "prosemirror-markdown";
import {DOMParser, DOMSerializer} from "prosemirror-model";
import MarkdownView from "./editor/MarkdownView";
import ProseMirrorView from "./editor/ProseMirrorView";
import {schema} from "./editor/schema";
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 = defaultMarkdownSerializer.serialize(htmlDoc);
this.textarea = target.appendChild(document.createElement("textarea"))
this.textarea.value = markdown;
}
get content() {
const markdown = this.textarea.value;
const doc = defaultMarkdownParser.parse(markdown);
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() }
}
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() }
}
const place = document.querySelector("#editor");
let view = new ProseMirrorView(place, document.getElementById('content').innerHTML);