/
Tiptap.tsx
111 lines (105 loc) · 2.65 KB
/
Tiptap.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import { useEditor, EditorContent } from "@tiptap/react";
import { Color } from "@tiptap/extension-color";
import ListItem from "@tiptap/extension-list-item";
import TextStyle from "@tiptap/extension-text-style";
import TextAlign from "@tiptap/extension-text-align";
import StarterKit from "@tiptap/starter-kit";
import editorContents from "./editorContents";
import { HocuspocusProvider } from "@hocuspocus/provider";
import MenuBar from "./MenuBar";
import {
HyperMultimediaKit,
imageModal,
youtubeModal,
vimeoModal,
soundCloudModal,
twitterModal,
videoModal,
audioModal,
} from "@docs.plus/extension-hypermultimedia";
import * as Y from "yjs";
import Collaboration from "@tiptap/extension-collaboration";
import {
Hyperlink,
previewHyperlinkModal,
setHyperlinkModal,
} from "@docs.plus/extension-hyperlink";
const ydoc = new Y.Doc();
const provider = new HocuspocusProvider({
url: "ws://127.0.0.1:1234",
name: "example-document",
});
const Tiptap = () => {
const editor = useEditor({
extensions: [
Color.configure({ types: [TextStyle.name, ListItem.name] }),
TextStyle.configure(),
Hyperlink.configure({
hyperlinkOnPaste: false,
openOnClick: true,
modals: {
previewHyperlink: previewHyperlinkModal,
setHyperlink: setHyperlinkModal,
},
}),
HyperMultimediaKit.configure({
Image: {
modal: imageModal,
inline: true,
},
Video: {
modal: videoModal,
inline: true,
},
Audio: {
modal: audioModal,
inline: true,
},
Youtube: {
modal: youtubeModal,
inline: true,
},
Vimeo: {
modal: vimeoModal,
inline: true,
},
SoundCloud: {
modal: soundCloudModal,
inline: true,
},
Twitter: {
modal: twitterModal,
inline: true,
theme: "dark",
},
}),
TextAlign.configure({
types: ["heading", "paragraph", "image"],
}),
StarterKit.configure({
history: false,
bulletList: {
keepMarks: true,
keepAttributes: false,
},
orderedList: {
keepMarks: true,
keepAttributes: false,
},
}),
Collaboration.configure({
document: provider.document,
}),
],
content: editorContents,
});
return (
<div className="w-[80rem] p-6 border rounded-md">
<MenuBar editor={editor} />
<div className="mt-4">
<EditorContent editor={editor} id="editorContents" />
</div>
</div>
);
};
export default Tiptap;