webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-08-05 00:42:14 +03:00
Code Activity

MD Editor: Added plaintext input implementation

Browse Source
This commit is contained in:
Dan Brown
2025-07-21 18:53:22 +01:00
parent 5ffec2c52d
commit 6b4b500a33
6 changed files with 225 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
resources/js/markdown/codemirror.ts
View File

@@ -1,72 +1,19 @@
import {provideKeyBindings} from './shortcuts';
import {debounce} from '../services/util';
import {Clipboard} from '../services/clipboard';
import {EditorView, ViewUpdate} from "@codemirror/view";
import {MarkdownEditor} from "./index.mjs";
import {CodeModule} from "../global";
import {MarkdownEditorEventMap} from "./dom-handlers";
/**
* Initiate the codemirror instance for the MarkDown editor.
* Initiate the codemirror instance for the Markdown editor.
*/
export function init(editor: MarkdownEditor, Code: CodeModule): EditorView {
export function init(editor: MarkdownEditor, Code: CodeModule, domEventHandlers: MarkdownEditorEventMap): EditorView {
function onViewUpdate(v: ViewUpdate) {
if (v.docChanged) {
editor.actions.updateAndRender();
}
}
const onScrollDebounced = debounce(editor.actions.syncDisplayPosition.bind(editor.actions), 100, false);
let syncActive = editor.settings.get('scrollSync');
editor.settings.onChange('scrollSync', val => {
syncActive = val;
});
const domEventHandlers = {
// Handle scroll to sync display view
scroll: (event: Event) => syncActive && onScrollDebounced(event),
// Handle image & content drag n drop
drop: (event: DragEvent) => {
if (!event.dataTransfer) {
return;
}
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, event.pageX, event.pageY);
}
},
// Handle dragover event to allow as drop-target in chrome
dragover: (event: DragEvent) => {
event.preventDefault();
},
// Handle image paste
paste: (event: ClipboardEvent) => {
if (!event.clipboardData) {
return;
}
const clipboard = new Clipboard(event.clipboardData);
// 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);
}
},
};
const cm = Code.markdownEditor(
editor.config.inputEl,