2022-07-30 18:05:13 +02:00
|
|
|
import {EditorView, minimalSetup} from "codemirror"
|
|
|
|
import {markdownLanguage} from "@codemirror/lang-markdown"
|
|
|
|
import {foldGutter} from "@codemirror/language";
|
|
|
|
|
2022-07-31 00:46:21 +02:00
|
|
|
interface DraftSaveResponse {
|
|
|
|
message: string
|
|
|
|
}
|
2022-07-30 18:05:13 +02:00
|
|
|
|
2022-07-31 00:46:21 +02:00
|
|
|
const csrftoken = (document.querySelector('[name=csrfmiddlewaretoken]')! as HTMLInputElement).value;
|
2022-07-30 18:05:13 +02:00
|
|
|
const ids = ["id_description_md"];
|
|
|
|
ids.forEach(function (id) {
|
2022-07-31 00:46:21 +02:00
|
|
|
const element = document.getElementById(id) as HTMLTextAreaElement;
|
2022-07-30 18:05:13 +02:00
|
|
|
if (!element) {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
// const ydoc = new Y.Doc()
|
|
|
|
// const provider = new WebrtcProvider('some-example-room', ydoc)
|
|
|
|
// const ytext = ydoc.getText('codemirror')
|
|
|
|
// window.ytext=ytext
|
|
|
|
// console.log(ytext.toJSON())
|
|
|
|
// const undoManager = new Y.UndoManager(ytext)
|
|
|
|
//
|
|
|
|
// provider.awareness.setLocalStateField('user', {
|
|
|
|
// name: 'Anonymous ' + Math.floor(Math.random() * 100),
|
|
|
|
// color: "red",
|
|
|
|
// colorLight: "lightred"
|
|
|
|
// })
|
2022-07-31 00:46:21 +02:00
|
|
|
const labelEl = element.labels[0]
|
2022-07-30 18:05:13 +02:00
|
|
|
const div = document.createElement("div")
|
|
|
|
element.style.display = "none"
|
2022-07-31 00:46:21 +02:00
|
|
|
element.parentElement!.insertBefore(div, element)
|
2022-07-30 18:05:13 +02:00
|
|
|
const view = new EditorView({
|
|
|
|
extensions: [
|
|
|
|
minimalSetup,
|
|
|
|
foldGutter(),
|
|
|
|
markdownLanguage,
|
|
|
|
EditorView.lineWrapping,
|
|
|
|
EditorView.contentAttributes.of({spellcheck: "true"}),
|
|
|
|
// yCollab(ytext, provider.awareness, {undoManager})
|
|
|
|
],
|
|
|
|
parent: div,
|
|
|
|
doc: element.value,
|
|
|
|
})
|
2022-07-31 00:46:21 +02:00
|
|
|
element.form!.addEventListener("submit", () => {
|
2022-07-30 18:05:13 +02:00
|
|
|
element.value = view.state.doc.toString()
|
|
|
|
})
|
|
|
|
// const easyMDE = new EasyMDE({
|
|
|
|
// element: element,
|
|
|
|
// forceSync: true, // for "required" to work
|
|
|
|
// spellChecker: false,
|
|
|
|
// nativeSpellcheck: true,
|
|
|
|
// autoDownloadFontAwesome: false,
|
|
|
|
// autosave: {
|
|
|
|
// delay: 1000,
|
|
|
|
// submit_delay: 5000,
|
|
|
|
// timeFormat: {
|
|
|
|
// locale: 'de-AT',
|
|
|
|
// format: {
|
|
|
|
// year: 'numeric',
|
|
|
|
// month: 'long',
|
|
|
|
// day: '2-digit',
|
|
|
|
// hour: '2-digit',
|
|
|
|
// minute: '2-digit',
|
|
|
|
// second: '2-digit',
|
|
|
|
// },
|
|
|
|
// },
|
|
|
|
// },
|
|
|
|
// inputStyle: "contenteditable",
|
|
|
|
// status: ["lines", "words", "cursor", "saveStatus"],
|
|
|
|
// });
|
|
|
|
// window.editor = easyMDE
|
2022-07-31 00:46:21 +02:00
|
|
|
const originalLabel = labelEl.innerText
|
|
|
|
setInterval(function () {
|
|
|
|
const content = view.state.doc.toString();
|
|
|
|
fetch("/api/draft/save", {
|
|
|
|
method: "POST",
|
|
|
|
body: JSON.stringify({
|
|
|
|
"draft_md": content
|
|
|
|
}),
|
|
|
|
headers: {'X-CSRFToken': csrftoken},
|
|
|
|
})
|
|
|
|
.then(response => response.json())
|
|
|
|
.then((data: DraftSaveResponse) => {
|
|
|
|
labelEl.innerText += ": " + data.message
|
|
|
|
setTimeout(() => labelEl.innerText = originalLabel, 5000)
|
|
|
|
}).catch(e => {
|
|
|
|
labelEl.innerText += ": " + "error saving draft"
|
|
|
|
})
|
|
|
|
|
|
|
|
}, 1000 * 30)
|
2022-07-30 18:05:13 +02:00
|
|
|
});
|