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,