mirror of
https://github.com/streetwriters/notesnook.git
synced 2025-12-22 06:29:29 +01:00
103 lines
2.7 KiB
TypeScript
103 lines
2.7 KiB
TypeScript
/*
|
|
This file is part of the Notesnook project (https://notesnook.com/)
|
|
|
|
Copyright (C) 2022 Streetwriters (Private) Limited
|
|
|
|
This program is free software: you can redistribute it and/or modify
|
|
it under the terms of the GNU General Public License as published by
|
|
the Free Software Foundation, either version 3 of the License, or
|
|
(at your option) any later version.
|
|
|
|
This program is distributed in the hope that it will be useful,
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
GNU General Public License for more details.
|
|
|
|
You should have received a copy of the GNU General Public License
|
|
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
*/
|
|
|
|
import { EditorOptions } from "@tiptap/core";
|
|
import { DependencyList, useEffect, useRef, useState } from "react";
|
|
import { Editor } from "../types";
|
|
|
|
function useForceUpdate() {
|
|
const [, setValue] = useState(0);
|
|
|
|
return () => setValue((value) => value + 1);
|
|
}
|
|
|
|
export const useEditor = (
|
|
options: Partial<EditorOptions> = {},
|
|
deps: DependencyList = []
|
|
) => {
|
|
const [editor, setEditor] = useState<Editor | null>(null);
|
|
const forceUpdate = useForceUpdate();
|
|
const editorRef = useRef<Editor | null>(editor);
|
|
|
|
useEffect(
|
|
() => {
|
|
let isMounted = true;
|
|
|
|
const instance = new Editor(options);
|
|
|
|
setEditor(instance);
|
|
|
|
instance.on("transaction", () => {
|
|
requestAnimationFrame(() => {
|
|
requestAnimationFrame(() => {
|
|
if (isMounted) {
|
|
forceUpdate();
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
return () => {
|
|
instance.destroy();
|
|
isMounted = false;
|
|
};
|
|
},
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
[...deps, forceUpdate, options]
|
|
);
|
|
|
|
useEffect(() => {
|
|
editorRef.current = editor;
|
|
|
|
if (!editor) return;
|
|
|
|
if (!editor.current) {
|
|
Object.defineProperty(editor, "current", {
|
|
get: () => editorRef.current
|
|
});
|
|
}
|
|
// if (!editor.executor) {
|
|
// Object.defineProperty(editor, "executor", {
|
|
// get: () => (id?: string) => {
|
|
// console.log(id);
|
|
// return editorRef.current;
|
|
// },
|
|
// });
|
|
// }
|
|
}, [editor]);
|
|
|
|
useEffect(() => {
|
|
// this is required for the drag/drop to work properly
|
|
// in the editor.
|
|
function onDragEnter(event: DragEvent) {
|
|
if (editor?.view.dragging) {
|
|
event.preventDefault();
|
|
return true;
|
|
}
|
|
}
|
|
|
|
editor?.view.dom.addEventListener("dragenter", onDragEnter);
|
|
return () => {
|
|
editor?.view.dom.removeEventListener("dragenter", onDragEnter);
|
|
};
|
|
}, [editor?.view.dom, editor?.view.dragging]);
|
|
|
|
return editor;
|
|
};
|