/* 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 . */ 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 = {}, deps: DependencyList = [] ) => { const [editor, setEditor] = useState(null); const forceUpdate = useForceUpdate(); const editorRef = useRef(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; };