webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-30 04:23:11 +03:00
Code Activity

Got markdown editor barely functional

Browse Source 
Updated content sync and preview scoll sync to work.
Many features commented out until they can be updated.
This commit is contained in:
Dan Brown
2023-04-10 15:01:44 +01:00
parent dce5123452
commit 572037ef1f
7 changed files with 121 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
resources/js/markdown/actions.js
View File

@ -13,7 +13,7 @@ export class Actions {
}
updateAndRender() {
const content = this.editor.cm.getValue();
const content = this.editor.cm.state.doc.toString();
this.editor.config.inputEl.value = content;
const html = this.editor.markdown.render(content);
@ -411,17 +411,17 @@ export class Actions {
});
}
syncDisplayPosition() {
syncDisplayPosition(event) {
// Thanks to http://liuhao.im/english/2015/11/10/the-sync-scroll-of-markdown-editor-in-javascript.html
const scroll = this.editor.cm.getScrollInfo();
const atEnd = scroll.top + scroll.clientHeight === scroll.height;
const scrollEl = event.target;
const atEnd = Math.abs(scrollEl.scrollHeight - scrollEl.clientHeight - scrollEl.scrollTop) < 1;
if (atEnd) {
this.editor.display.scrollToIndex(-1);
return;
}
const lineNum = this.editor.cm.lineAtHeight(scroll.top, 'local');
const range = this.editor.cm.getRange({line: 0, ch: null}, {line: lineNum, ch: null});
const blockInfo = this.editor.cm.lineBlockAtHeight(scrollEl.scrollTop);
const range = this.editor.cm.state.sliceDoc(0, blockInfo.from);
const parser = new DOMParser();
const doc = parser.parseFromString(this.editor.markdown.render(range), 'text/html');
const totalLines = doc.documentElement.querySelectorAll('body > *');

103
resources/js/markdown/codemirror.js
View File

@ -9,62 +9,71 @@ import Clipboard from "../services/clipboard";
*/
export async function init(editor) {
const Code = await window.importVersioned('code');
const cm = Code.markdownEditor(editor.config.inputEl);
// Will force to remain as ltr for now due to issues when HTML is in editor.
cm.setOption('direction', 'ltr');
// Register shortcuts
cm.setOption('extraKeys', provideShortcuts(editor, Code.getMetaKey()));
/**
* @param {ViewUpdate} v
*/
function onViewUpdate(v) {
if (v.docChanged) {
editor.actions.updateAndRender();
}
}
// Register codemirror events
// Update data on content change
cm.on('change', (instance, changeObj) => editor.actions.updateAndRender());
// Handle scroll to sync display view
const onScrollDebounced = debounce(editor.actions.syncDisplayPosition.bind(editor.actions), 100, false);
let syncActive = editor.settings.get('scrollSync');
editor.settings.onChange('scrollSync', val => syncActive = val);
cm.on('scroll', instance => {
if (syncActive) {
onScrollDebounced(instance);
}
});
const domEventHandlers = {
// Handle scroll to sync display view
scroll: (event) => syncActive && onScrollDebounced(event)
}
const cm = Code.markdownEditor(editor.config.inputEl, onViewUpdate, domEventHandlers);
window.cm = cm;
// Will force to remain as ltr for now due to issues when HTML is in editor.
// TODO
// cm.setOption('direction', 'ltr');
// Register shortcuts
// TODO
// cm.setOption('extraKeys', provideShortcuts(editor, Code.getMetaKey()));
// Handle image paste
cm.on('paste', (cm, event) => {
const clipboard = new Clipboard(event.clipboardData || event.dataTransfer);
// Don't handle the event ourselves if no items exist of contains table-looking data
if (!clipboard.hasItems() || clipboard.containsTabularData()) {
return;
}
const images = clipboard.getImages();
for (const image of images) {
editor.actions.uploadImage(image);
}
});
// TODO
// cm.on('paste', (cm, event) => {
// const clipboard = new Clipboard(event.clipboardData || event.dataTransfer);
//
// // Don't handle the event ourselves if no items exist of contains table-looking data
// if (!clipboard.hasItems() || clipboard.containsTabularData()) {
// return;
// }
//
// const images = clipboard.getImages();
// for (const image of images) {
// editor.actions.uploadImage(image);
// }
// });
// Handle image & content drag n drop
cm.on('drop', (cm, event) => {
const templateId = event.dataTransfer.getData('bookstack/template');
if (templateId) {
event.preventDefault();
editor.actions.insertTemplate(templateId, event.pageX, event.pageY);
}
const clipboard = new Clipboard(event.dataTransfer);
const clipboardImages = clipboard.getImages();
if (clipboardImages.length > 0) {
event.stopPropagation();
event.preventDefault();
editor.actions.insertClipboardImages(clipboardImages);
}
});
// TODO
// cm.on('drop', (cm, event) => {
//
// const templateId = event.dataTransfer.getData('bookstack/template');
// if (templateId) {
// event.preventDefault();
// editor.actions.insertTemplate(templateId, event.pageX, event.pageY);
// }
//
// const clipboard = new Clipboard(event.dataTransfer);
// const clipboardImages = clipboard.getImages();
// if (clipboardImages.length > 0) {
// event.stopPropagation();
// event.preventDefault();
// editor.actions.insertClipboardImages(clipboardImages);
// }
//
// });
return cm;
}