forked from github/plane
42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import React, { useEffect, useRef } from "react";
|
|
// next
|
|
import type { NextPage } from "next";
|
|
// prose mirror
|
|
import { EditorState } from "prosemirror-state";
|
|
import { EditorView } from "prosemirror-view";
|
|
import { Schema, DOMParser } from "prosemirror-model";
|
|
import { schema } from "prosemirror-schema-basic";
|
|
import { addListNodes } from "prosemirror-schema-list";
|
|
import { exampleSetup } from "prosemirror-example-setup";
|
|
|
|
const Editor: NextPage = () => {
|
|
const editorRef = useRef<HTMLDivElement>(null);
|
|
const contentRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (!editorRef.current || !contentRef.current) return;
|
|
|
|
const mySchema = new Schema({
|
|
nodes: addListNodes(schema.spec.nodes, "paragraph block*", "block"),
|
|
marks: schema.spec.marks,
|
|
});
|
|
|
|
const myEditorView = new EditorView(editorRef.current, {
|
|
state: EditorState.create({
|
|
doc: DOMParser.fromSchema(mySchema)?.parse(contentRef.current),
|
|
plugins: exampleSetup({ schema: mySchema }),
|
|
}),
|
|
});
|
|
|
|
return () => myEditorView.destroy();
|
|
}, []);
|
|
|
|
return (
|
|
<div id="editor" ref={editorRef}>
|
|
<div id="content" ref={contentRef} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Editor;
|