> = ({
16 | editor,
17 | mimeTypes,
18 | onOK
19 | }) => {
20 | const getFile = useCallback(async () => {
21 | const blob = await fileOpen({
22 | mimeTypes
23 | });
24 | const editorProvider = getEditorProvider(editor);
25 | const url = await editorProvider.fileProvider.uploadFile(blob);
26 | onOK(url);
27 | }, [editor, mimeTypes, onOK]);
28 |
29 | return (
30 |
31 |
32 |
35 |
36 | );
37 | };
38 |
--------------------------------------------------------------------------------
/src/constants.ts:
--------------------------------------------------------------------------------
1 | export const PARSE_HTML_PRIORITY_LOWEST = 1;
2 | export const PARSE_HTML_PRIORITY_DEFAULT = 50;
3 | export const PARSE_HTML_PRIORITY_HIGHEST = 100;
4 | export const EXTENSION_PRIORITY_LOWER = 75;
5 | export const EXTENSION_PRIORITY_DEFAULT = 100;
6 | export const EXTENSION_PRIORITY_HIGHEST = 200;
7 |
8 | export const ZINDEX_DEFAULT = 10;
9 | export const ZINDEX_MIDDLE = 1500;
10 | export const ZINDEX_HIGHEST = 10000;
11 |
12 | export const MIN_ZOOM = 0.1;
13 | export const MAX_ZOOM = 2;
14 | export const ZOOM_STEP = 0.15;
15 |
--------------------------------------------------------------------------------
/src/editor/collaboration.tsx:
--------------------------------------------------------------------------------
1 | import React, { forwardRef, useMemo } from "react";
2 | import { Editor } from "@tiptap/core";
3 | import { HocuspocusProvider } from "@hocuspocus/provider";
4 |
5 | import { Collaboration } from "../extensions/collaboration";
6 | import { CollaborationCursor } from "../extensions/collaboration-cursor";
7 |
8 | import { EditorRender, EditorRenderProps } from "./render";
9 |
10 | import { getUserColor } from "./utilities";
11 |
12 | export interface CollaborationEditorProps extends EditorRenderProps {
13 | id: string;
14 | url: string;
15 | token: string;
16 | }
17 |
18 | export const CollaborationEditor = forwardRef<
19 | Editor | null,
20 | React.PropsWithChildren
21 | >((props, ref) => {
22 | const { id, url, token, extensions, userProvider, ...restProps } = props;
23 |
24 | const hocuspocusProvider = useMemo(() => {
25 | return new HocuspocusProvider({
26 | url,
27 | name: id,
28 | token,
29 | maxAttempts: 1
30 | } as any);
31 | }, [id, url, token]);
32 |
33 | const currentUser = useMemo(() => {
34 | return userProvider.getCurrentUser() ?? {};
35 | }, [userProvider]);
36 |
37 | if (!hocuspocusProvider) return loading
;
38 |
39 | return (
40 |
58 | );
59 | });
60 |
61 | CollaborationEditor.displayName = "CollaborationEditor";
62 |
--------------------------------------------------------------------------------
/src/editor/index.tsx:
--------------------------------------------------------------------------------
1 | export * from "./collaboration";
2 | export * from "./render";
3 |
--------------------------------------------------------------------------------
/src/editor/kit.ts:
--------------------------------------------------------------------------------
1 | import { AnyExtension, Node } from "@tiptap/core";
2 |
3 | import { Focus } from "../extensions/focus";
4 | import { Loading } from "../extensions/loading";
5 | import { Paragraph } from "../extensions/paragraph";
6 | import { Text } from "../extensions/text";
7 | import { HardBreak } from "../extensions/hard-break";
8 | import { TrailingNode } from "../extensions/trailing-node";
9 | import { Perf } from "../extensions/perf";
10 |
11 | export interface EditorKit {
12 | schema: string;
13 | extensions: Array;
14 | }
15 |
16 | export const resolveEditorKit = (props: EditorKit) => {
17 | const { schema, extensions } = props;
18 |
19 | const Doc = Node.create({
20 | name: "doc",
21 | topNode: true,
22 | content: schema
23 | });
24 |
25 | const runtimeExtensions = [
26 | Doc,
27 | Paragraph,
28 | Text,
29 | HardBreak,
30 | Focus,
31 | Loading,
32 | TrailingNode,
33 | Perf,
34 | ...extensions.flat()
35 | ];
36 |
37 | return runtimeExtensions;
38 | };
39 |
--------------------------------------------------------------------------------
/src/editor/provider.ts:
--------------------------------------------------------------------------------
1 | import { Editor } from "@tiptap/core";
2 |
3 | export interface User {
4 | id: string | number;
5 | name: string;
6 | avatar: string;
7 | [key: string]: unknown;
8 | }
9 |
10 | export interface EditorProvider {
11 | /**
12 | * 用户信息
13 | */
14 | userProvider: {
15 | /**
16 | * 获取当前用户
17 | */
18 | getCurrentUser: () => User;
19 |
20 | /**
21 | * 获取用户列表
22 | */
23 | getUsers: (query: string) => Promise | User[];
24 | };
25 | /**
26 | * 文件上传
27 | */
28 | fileProvider: {
29 | uploadFile: (file: Blob) => Promise;
30 | };
31 | }
32 |
33 | export const getEditorProvider = (editor: Editor): EditorProvider => {
34 | // @ts-ignore
35 | return editor.options.editorProps.editorProvider;
36 | };
37 |
--------------------------------------------------------------------------------
/src/editor/render.tsx:
--------------------------------------------------------------------------------
1 | import React, { forwardRef, useImperativeHandle } from "react";
2 | import { useEditor, EditorContent } from "@tiptap/react";
3 | import { ThemeProvider } from "styled-components";
4 |
5 | import { StyledEditor } from "../styles/editor";
6 |
7 | import { resolveEditorKit, EditorKit } from "./kit";
8 | import { EditorProvider } from "./provider";
9 | import { Content, Editor } from "@tiptap/core";
10 | import light from "../styles/theme";
11 |
12 | export interface EditorRenderProps extends EditorProvider, EditorKit {
13 | content?: Content;
14 | }
15 |
16 | export const EditorRender = forwardRef<
17 | Editor | null,
18 | React.PropsWithChildren
19 | >((props, ref) => {
20 | const {
21 | schema,
22 | content,
23 | extensions,
24 | userProvider,
25 | fileProvider,
26 | children
27 | } = props;
28 |
29 | const editorProvider: EditorProvider = {
30 | userProvider,
31 | fileProvider
32 | };
33 |
34 | const editor = useEditor(
35 | {
36 | content,
37 | extensions: resolveEditorKit({ schema, extensions }),
38 | editorProps: {
39 | attributes: {
40 | class: "magic-editor",
41 | spellcheck: "false",
42 | suppressContentEditableWarning: "true"
43 | },
44 | // @ts-ignore
45 | editorProvider,
46 | theme: light
47 | },
48 | onCreate(props) {
49 | props.editor.view.focus();
50 | },
51 | onUpdate(props) {
52 | // console.log(props.editor.getHTML());
53 | }
54 | },
55 | []
56 | );
57 |
58 | useImperativeHandle(ref, () => editor as Editor);
59 |
60 | return (
61 |
62 | {children}
63 |
64 |
65 |
66 |
67 | );
68 | });
69 |
70 | EditorRender.displayName = "EditorRender";
71 |
--------------------------------------------------------------------------------
/src/editor/theme.ts:
--------------------------------------------------------------------------------
1 | import { Editor } from "@tiptap/core";
2 |
3 | export const getEditorTheme = (editor: Editor) => {
4 | // @ts-ignore
5 | return editor.options.editorProps.theme;
6 | };
7 |
--------------------------------------------------------------------------------
/src/editor/utilities.ts:
--------------------------------------------------------------------------------
1 | const colors = [
2 | "#47A1FF",
3 | "#59CB74",
4 | "#FFB952",
5 | "#FC6980",
6 | "#6367EC",
7 | "#DA65CC",
8 | "#FBD54A",
9 | "#ADDF84",
10 | "#6CD3FF",
11 | "#659AEC",
12 | "#9F8CF1",
13 | "#ED8CCE",
14 | "#A2E5FF",
15 | "#4DCCCB",
16 | "#F79452",
17 | "#84E0BE",
18 | "#5982F6",
19 | "#E37474",
20 | "#3FDDC7",
21 | "#9861E5"
22 | ];
23 |
24 | const total = colors.length;
25 |
26 | export const getUserColor = () => colors[~~(Math.random() * total)];
27 |
--------------------------------------------------------------------------------
/src/extensions/blockquote/blockquote.ts:
--------------------------------------------------------------------------------
1 | import { wrappingInputRule } from "@tiptap/core";
2 | import { Blockquote as BuiltInBlockquote } from "@tiptap/extension-blockquote";
3 |
4 | const multilineInputRegex = /^\s*>>>\s$/gm;
5 |
6 | export const Blockquote = BuiltInBlockquote.extend({
7 | addInputRules() {
8 | return [
9 | // eslint-disable-next-line no-unsafe-optional-chaining
10 | // @ts-ignore
11 | ...this.parent?.(),
12 | wrappingInputRule({
13 | find: multilineInputRegex,
14 | type: this.type,
15 | getAttributes: () => ({ multiline: true })
16 | })
17 | ];
18 | }
19 | });
20 |
--------------------------------------------------------------------------------
/src/extensions/blockquote/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./blockquote";
2 | export * from "./menu";
3 |
--------------------------------------------------------------------------------
/src/extensions/blockquote/menu.tsx:
--------------------------------------------------------------------------------
1 | import React, { useCallback } from "react";
2 | import { Editor } from "@tiptap/core";
3 |
4 | import { Tooltip } from "../../components/tooltip";
5 | import { Button } from "../../components/button";
6 | import { IconBlockquote } from "../../icons";
7 | import { useActive } from "../../hooks/use-active";
8 |
9 | import { Blockquote as BlockquoteExtension } from "./blockquote";
10 | import i18n from "../../i18n";
11 |
12 | export const BlockquoteStaticMenu: React.FC<{ editor: Editor }> = ({
13 | editor
14 | }) => {
15 | const isBlockquoteActive = useActive(editor, BlockquoteExtension.name);
16 |
17 | const toggleBlockquote = useCallback(
18 | () =>
19 | editor
20 | .chain()
21 | .focus()
22 | .toggleBlockquote()
23 | .run(),
24 | [editor]
25 | );
26 |
27 | return (
28 |
29 | }
32 | onClick={toggleBlockquote}
33 | />
34 |
35 | );
36 | };
37 |
--------------------------------------------------------------------------------
/src/extensions/bold/bold.ts:
--------------------------------------------------------------------------------
1 | import { Bold } from "@tiptap/extension-bold";
2 |
3 | export { Bold };
4 |
--------------------------------------------------------------------------------
/src/extensions/bold/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./bold";
2 | export * from "./menu";
3 |
--------------------------------------------------------------------------------
/src/extensions/bold/menu.tsx:
--------------------------------------------------------------------------------
1 | import React, { useCallback } from "react";
2 | import { Editor } from "@tiptap/core";
3 |
4 | import { Button, Tooltip } from "../../components";
5 | import { IconBold } from "../../icons";
6 | import { useActive } from "../../hooks/use-active";
7 |
8 | import { Bold as BoldExtension } from "./bold";
9 | import i18n from "../../i18n";
10 |
11 | export const BoldStaticMenu: React.FC<{ editor: Editor }> = ({ editor }) => {
12 | const isBoldActive = useActive(editor, BoldExtension.name);
13 |
14 | const toggleBold = useCallback(
15 | () =>
16 | editor
17 | .chain()
18 | .focus()
19 | .toggleBold()
20 | .run(),
21 | [editor]
22 | );
23 |
24 | return (
25 |
26 | } onClick={toggleBold} active={isBoldActive} />
27 |
28 | );
29 | };
30 |
--------------------------------------------------------------------------------
/src/extensions/bullet-list/bullet-list.ts:
--------------------------------------------------------------------------------
1 | import { BulletList } from "@tiptap/extension-bullet-list";
2 |
3 | export { BulletList };
4 |
--------------------------------------------------------------------------------
/src/extensions/bullet-list/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./bullet-list";
2 |
--------------------------------------------------------------------------------
/src/extensions/code-block/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./code-block";
2 | export * from "./menu";
3 |
--------------------------------------------------------------------------------
/src/extensions/code-block/menu.tsx:
--------------------------------------------------------------------------------
1 | import React, { useCallback } from "react";
2 | import { Editor } from "@tiptap/core";
3 |
4 | import { Button, Tooltip } from "../../components";
5 | import { IconCodeBlock } from "../../icons";
6 | import { useActive } from "../../hooks/use-active";
7 | import { CodeBlock as CodeBlockExtension } from "./code-block";
8 | import i18n from "../../i18n";
9 |
10 | export const CodeBlockStaticMenu: React.FC<{ editor: Editor }> = ({
11 | editor
12 | }) => {
13 | const isCodeBlockActive = useActive(editor, CodeBlockExtension.name);
14 |
15 | const toggleCodeBlock = useCallback(
16 | () =>
17 | editor
18 | .chain()
19 | .focus()
20 | .toggleCodeBlock()
21 | .run(),
22 | [editor]
23 | );
24 |
25 | return (
26 |
27 | }
29 | onClick={toggleCodeBlock}
30 | active={isCodeBlockActive}
31 | />
32 |
33 | );
34 | };
35 |
--------------------------------------------------------------------------------
/src/extensions/code/code.ts:
--------------------------------------------------------------------------------
1 | import { Extension } from "@tiptap/core";
2 | import BuiltInCode from "@tiptap/extension-code";
3 | import codemark from "prosemirror-codemark";
4 |
5 | export const Code = BuiltInCode.extend({});
6 |
7 | export const CodeMarkPlugin = Extension.create({
8 | name: "codemarkPlugin",
9 |
10 | // @ts-ignore
11 | addProseMirrorPlugins() {
12 | return codemark({ markType: this.editor.schema.marks.code });
13 | }
14 | });
15 |
16 | export const CodeExtensions = [Code, CodeMarkPlugin];
17 |
--------------------------------------------------------------------------------
/src/extensions/code/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./code";
2 | export * from "./menu";
3 |
--------------------------------------------------------------------------------
/src/extensions/code/menu.tsx:
--------------------------------------------------------------------------------
1 | import React, { useCallback } from "react";
2 | import { Editor } from "@tiptap/core";
3 |
4 | import { Tooltip, Button } from "../../components";
5 | import { IconCode } from "../../icons";
6 | import { useActive } from "../../hooks/use-active";
7 |
8 | import { Code as CodeExtension } from "./code";
9 | import i18n from "../../i18n";
10 |
11 | export const CodeStaticMenu: React.FC<{ editor: Editor }> = ({ editor }) => {
12 | const isCodeActive = useActive(editor, CodeExtension.name);
13 |
14 | const toggleCode = useCallback(
15 | () =>
16 | editor
17 | .chain()
18 | .focus()
19 | .toggleCode()
20 | .run(),
21 | [editor]
22 | );
23 |
24 | return (
25 |
26 | } onClick={toggleCode} active={isCodeActive} />
27 |
28 | );
29 | };
30 |
--------------------------------------------------------------------------------
/src/extensions/collaboration-cursor/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./collaboration-cursor";
2 |
--------------------------------------------------------------------------------
/src/extensions/collaboration/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./collaboration";
2 | export * from "./is-change-origin";
3 |
--------------------------------------------------------------------------------
/src/extensions/collaboration/is-change-origin.ts:
--------------------------------------------------------------------------------
1 | import { Transaction } from "prosemirror-state";
2 | import { ySyncPluginKey } from "y-prosemirror";
3 |
4 | export function isChangeOrigin(transaction: Transaction): boolean {
5 | return !!transaction.getMeta(ySyncPluginKey);
6 | }
7 |
--------------------------------------------------------------------------------
/src/extensions/collaboration/y-prosemirror/index.js:
--------------------------------------------------------------------------------
1 | export * from "./plugins/cursor-plugin.js";
2 | export {
3 | defaultYSyncPluginOpts,
4 | ySyncPlugin,
5 | isVisible,
6 | getRelativeSelection,
7 | ProsemirrorBinding
8 | } from "./plugins/sync-plugin.js";
9 | export * from "./plugins/undo-plugin.js";
10 | export * from "./plugins/keys.js";
11 | export {
12 | absolutePositionToRelativePosition,
13 | relativePositionToAbsolutePosition,
14 | setMeta,
15 | prosemirrorJSONToYDoc,
16 | yDocToProsemirrorJSON,
17 | yDocToProsemirror,
18 | prosemirrorToYDoc,
19 | prosemirrorJSONToYXmlFragment,
20 | yXmlFragmentToProsemirrorJSON,
21 | yXmlFragmentToProsemirror,
22 | prosemirrorToYXmlFragment
23 | } from "./lib.js";
24 |
--------------------------------------------------------------------------------
/src/extensions/collaboration/y-prosemirror/plugins/keys.js:
--------------------------------------------------------------------------------
1 |
2 | import { PluginKey } from 'prosemirror-state' // eslint-disable-line
3 |
4 | /**
5 | * The unique prosemirror plugin key for syncPlugin
6 | *
7 | * @public
8 | */
9 | export const ySyncPluginKey = new PluginKey('y-sync')
10 |
11 | /**
12 | * The unique prosemirror plugin key for undoPlugin
13 | *
14 | * @public
15 | */
16 | export const yUndoPluginKey = new PluginKey('y-undo')
17 |
18 | /**
19 | * The unique prosemirror plugin key for cursorPlugin
20 | *
21 | * @public
22 | */
23 | export const yCursorPluginKey = new PluginKey('yjs-cursor')
24 |
--------------------------------------------------------------------------------
/src/extensions/columns/column.ts:
--------------------------------------------------------------------------------
1 | import { Node, mergeAttributes } from "@tiptap/core";
2 |
3 | export const Column = Node.create({
4 | name: "column",
5 | content: "block+",
6 | isolating: true,
7 |
8 | addOptions() {
9 | return {
10 | HTMLAttributes: {
11 | class: "column"
12 | }
13 | };
14 | },
15 |
16 | addAttributes() {
17 | return {
18 | index: {
19 | default: 0,
20 | parseHTML: element => element.getAttribute("index")
21 | }
22 | };
23 | },
24 |
25 | parseHTML() {
26 | return [
27 | {
28 | tag: "div[class=column]"
29 | }
30 | ];
31 | },
32 |
33 | renderHTML({ HTMLAttributes }) {
34 | return [
35 | "div",
36 | mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
37 | 0
38 | ];
39 | }
40 | });
41 |
--------------------------------------------------------------------------------
/src/extensions/columns/index.ts:
--------------------------------------------------------------------------------
1 | import { Columns } from "./columns";
2 | import { Column } from "./column";
3 | export * from "./menu";
4 |
5 | export const ColumnsExtensions = [Columns, Column];
6 |
--------------------------------------------------------------------------------
/src/extensions/columns/menu/index.tsx:
--------------------------------------------------------------------------------
1 | export * from "./bubble";
2 | export * from "./static";
3 |
--------------------------------------------------------------------------------
/src/extensions/columns/menu/static.tsx:
--------------------------------------------------------------------------------
1 | import React, { useCallback } from "react";
2 | import { Editor } from "@tiptap/core";
3 |
4 | import { Tooltip, Button } from "../../../components";
5 | import { IconColumns } from "../../../icons";
6 | import { useActive } from "../../../hooks/use-active";
7 |
8 | import { Columns as ColumnsExtension } from "../columns";
9 | import i18n from "../../../i18n";
10 |
11 | export const ColumnsStaticMenu: React.FC<{ editor: Editor }> = ({ editor }) => {
12 | const isColumnsActive = useActive(editor, ColumnsExtension.name);
13 |
14 | const insertColumns = useCallback(
15 | () =>
16 | editor
17 | .chain()
18 | .focus()
19 | .insertColumns()
20 | .run(),
21 | [editor]
22 | );
23 |
24 | return (
25 |
26 | }
28 | onClick={insertColumns}
29 | active={isColumnsActive}
30 | />
31 |
32 | );
33 | };
34 |
--------------------------------------------------------------------------------
/src/extensions/dragable/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./dragable";
2 |
--------------------------------------------------------------------------------
/src/extensions/dropcursor/dropcursor.ts:
--------------------------------------------------------------------------------
1 | import { Extension } from "@tiptap/core";
2 | import { dropCursor } from "./prosemirror-dropcursor";
3 |
4 | export interface DropcursorOptions {
5 | color: string | undefined;
6 | width: number | undefined;
7 | class: string | undefined;
8 | }
9 |
10 | export const DropCursor = Extension.create({
11 | name: "dropCursor",
12 |
13 | addOptions() {
14 | return {
15 | color: "currentColor",
16 | width: 1,
17 | class: undefined
18 | };
19 | },
20 |
21 | // @ts-ignore
22 | addProseMirrorPlugins() {
23 | return [dropCursor(this.options)];
24 | }
25 | }).configure({
26 | width: 2,
27 | class: "dropcursor",
28 | color: "skyblue"
29 | });
30 |
--------------------------------------------------------------------------------
/src/extensions/dropcursor/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./dropcursor";
2 |
--------------------------------------------------------------------------------
/src/extensions/excalidraw/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./excalidraw";
2 | export * from "./menu";
3 |
--------------------------------------------------------------------------------
/src/extensions/excalidraw/menu/bubble.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Editor } from "@tiptap/core";
3 | import { useCallback } from "react";
4 |
5 | import { Tooltip, BubbleMenu, Button, Space } from "../../../components";
6 | import { IconEdit } from "../../../icons";
7 | import { Excalidraw as ExcalidrawExtension } from "../excalidraw";
8 |
9 | import { showExcalidrawEditor } from "./edit";
10 | import i18n from "../../../i18n";
11 |
12 | interface IProps {
13 | editor: Editor;
14 | }
15 |
16 | export const ExcalidrawBubbleMenu: React.FC = ({ editor }) => {
17 | const shouldShow = useCallback(
18 | () => editor.isActive(ExcalidrawExtension.name),
19 | [editor]
20 | );
21 |
22 | const openEditModal = useCallback(() => {
23 | showExcalidrawEditor(editor);
24 | }, [editor]);
25 |
26 | return (
27 |
28 |
29 |
30 | } onClick={openEditModal} />
31 |
32 |
33 |
34 | );
35 | };
36 |
--------------------------------------------------------------------------------
/src/extensions/excalidraw/menu/edit.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import { Editor } from "@tiptap/core";
4 | import { ThemeProvider } from "styled-components";
5 |
6 | import {
7 | DEFAULT_EXCALIDRAW_DATA,
8 | Excalidraw as ExcalidrawExtension
9 | } from "../excalidraw";
10 | import { isNodeActive } from "../../../utilities";
11 |
12 | import { ExcalidrawSettingModal } from "./modal";
13 | import { getEditorTheme } from "../../../editor/theme";
14 |
15 | export const showExcalidrawEditor = (editor: Editor) => {
16 | // @ts-ignore
17 | const isInExcalidraw = isNodeActive(editor, ExcalidrawExtension.name);
18 |
19 | if (!isInExcalidraw) {
20 | editor
21 | .chain()
22 | .insertExcalidraw({ data: DEFAULT_EXCALIDRAW_DATA })
23 | .run();
24 | }
25 |
26 | const attrs = editor.getAttributes(ExcalidrawExtension.name);
27 | const data = JSON.parse(attrs.data);
28 | const blockId = attrs.blockId;
29 |
30 | const div = document.createElement("div");
31 | editor.options.element.appendChild(div);
32 |
33 | ReactDOM.render(
34 |
35 | {
40 | ReactDOM.unmountComponentAtNode(div);
41 | div.remove();
42 | }}
43 | />
44 | ,
45 | div
46 | );
47 | };
48 |
--------------------------------------------------------------------------------
/src/extensions/excalidraw/menu/index.tsx:
--------------------------------------------------------------------------------
1 | export * from "./static";
2 | export * from "./bubble";
3 |
--------------------------------------------------------------------------------
/src/extensions/excalidraw/menu/static.tsx:
--------------------------------------------------------------------------------
1 | import React, { useCallback } from "react";
2 | import { Editor } from "@tiptap/core";
3 |
4 | import { Button, Tooltip } from "../../../components";
5 | import { IconExcalidraw } from "../../../icons";
6 | import { useActive } from "../../../hooks/use-active";
7 | import { Excalidraw as ExcalidrawExtension } from "../excalidraw";
8 |
9 | import { showExcalidrawEditor } from "./edit";
10 | import i18n from "../../../i18n";
11 |
12 | export const ExcalidrawStaticMenu: React.FC<{ editor: Editor }> = ({
13 | editor
14 | }) => {
15 | const isActive = useActive(editor, ExcalidrawExtension.name);
16 |
17 | const toggleLink = useCallback(() => {
18 | showExcalidrawEditor(editor);
19 | }, [editor]);
20 |
21 | return (
22 |
23 | }
25 | onClick={toggleLink}
26 | active={isActive}
27 | />
28 |
29 | );
30 | };
31 |
--------------------------------------------------------------------------------
/src/extensions/flow/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./flow";
2 | export * from "./menu";
3 |
--------------------------------------------------------------------------------
/src/extensions/flow/menu/bubble.tsx:
--------------------------------------------------------------------------------
1 | import React, { useCallback } from "react";
2 |
3 | import { IconCopy, IconDelete, IconEdit } from "../../../icons";
4 | import {
5 | BubbleMenu,
6 | Tooltip,
7 | Divider,
8 | Button,
9 | Space
10 | } from "../../../components";
11 | import { useAttributes } from "../../../hooks";
12 | import { copyNode, deleteNode } from "../../../utilities";
13 | import { IFlowAttrs, Flow } from "../flow";
14 |
15 | import { showFlowEditor } from "./edit";
16 | import i18n from "../../../i18n";
17 |
18 | export const FlowBubbleMenu = ({ editor }) => {
19 | const attrs = useAttributes(editor, Flow.name, {
20 | width: 0,
21 | height: 0,
22 | svg: ""
23 | });
24 |
25 | const shouldShow = useCallback(() => editor.isActive(Flow.name), [editor]);
26 |
27 | const copyMe = useCallback(() => copyNode(editor, Flow.name), [editor]);
28 |
29 | const deleteMe = useCallback(() => deleteNode(editor, Flow.name), [editor]);
30 |
31 | const openEditModal = useCallback(() => {
32 | showFlowEditor(editor);
33 | }, [editor]);
34 |
35 | return (
36 |
42 |
43 |
44 | } size="small" />
45 |
46 |
47 |
48 | } onClick={openEditModal} />
49 |
50 |
51 |
52 |
53 |
54 | } size="small" />
55 |
56 |
57 |
58 | );
59 | };
60 |
--------------------------------------------------------------------------------
/src/extensions/flow/menu/constants.ts:
--------------------------------------------------------------------------------
1 | export const DEFAULT_FLOW_DATA = ``;
2 |
--------------------------------------------------------------------------------
/src/extensions/flow/menu/edit.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import { Editor } from "@tiptap/core";
4 | import { ThemeProvider } from "styled-components";
5 |
6 | import { Flow as FlowExtension } from "../flow";
7 | import { isNodeActive } from "../../../utilities";
8 |
9 | import { FlowSettingModal } from "./modal";
10 | import { getEditorTheme } from "../../../editor/theme";
11 | import { DEFAULT_FLOW_DATA } from "./constants";
12 |
13 | export const showFlowEditor = (editor: Editor) => {
14 | const isInFlow = isNodeActive(editor, FlowExtension.name);
15 |
16 | if (!isInFlow) {
17 | editor
18 | .chain()
19 | .insertFlow({
20 | svg: DEFAULT_FLOW_DATA,
21 | xml: ""
22 | })
23 | .run();
24 | }
25 |
26 | const attrs = editor.getAttributes(FlowExtension.name);
27 | const data = attrs.xml;
28 | const blockId = attrs.blockId;
29 |
30 | const div = document.createElement("div");
31 | editor.options.element.appendChild(div);
32 |
33 | ReactDOM.render(
34 |
35 | {
40 | ReactDOM.unmountComponentAtNode(div);
41 | div.remove();
42 | }}
43 | />
44 | ,
45 | div
46 | );
47 | };
48 |
--------------------------------------------------------------------------------
/src/extensions/flow/menu/index.tsx:
--------------------------------------------------------------------------------
1 | export * from "./static";
2 | export * from "./bubble";
3 |
--------------------------------------------------------------------------------
/src/extensions/flow/menu/static.tsx:
--------------------------------------------------------------------------------
1 | import React, { useCallback } from "react";
2 | import { Editor } from "@tiptap/core";
3 |
4 | import { Button, Tooltip } from "../../../components";
5 | import { IconFlow } from "../../../icons";
6 | import { useActive } from "../../../hooks/use-active";
7 | import { Flow as FlowExtension } from "../flow";
8 |
9 | import { showFlowEditor } from "./edit";
10 | import i18n from "../../../i18n";
11 |
12 | export const FlowStaticMenu: React.FC<{ editor: Editor }> = ({ editor }) => {
13 | const isActive = useActive(editor, FlowExtension.name);
14 |
15 | const showEditor = useCallback(() => {
16 | showFlowEditor(editor);
17 | }, [editor]);
18 |
19 | return (
20 |
21 | } onClick={showEditor} active={isActive} />
22 |
23 | );
24 | };
25 |
--------------------------------------------------------------------------------
/src/extensions/focus/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./focus";
2 |
--------------------------------------------------------------------------------
/src/extensions/gapcursor/gapcursor.ts:
--------------------------------------------------------------------------------
1 | import GapCursor from "@tiptap/extension-gapcursor";
2 |
3 | export { GapCursor };
4 |
--------------------------------------------------------------------------------
/src/extensions/gapcursor/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./gapcursor";
2 |
--------------------------------------------------------------------------------
/src/extensions/hard-break/hard-break.ts:
--------------------------------------------------------------------------------
1 | import HardBreak from "@tiptap/extension-hard-break";
2 |
3 | export { HardBreak };
4 |
--------------------------------------------------------------------------------
/src/extensions/hard-break/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./hard-break";
2 |
--------------------------------------------------------------------------------
/src/extensions/heading/constants.ts:
--------------------------------------------------------------------------------
1 | export const FOLD_SVG = ``;
2 |
--------------------------------------------------------------------------------
/src/extensions/heading/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./heading";
2 | export * from "./menu";
3 |
--------------------------------------------------------------------------------
/src/extensions/heading/slug.ts:
--------------------------------------------------------------------------------
1 | import { Node } from "prosemirror-model";
2 | import escape from "lodash.escape";
3 | import slugify from "slugify";
4 |
5 | function safeSlugify(text: string) {
6 | return `h-${escape(
7 | slugify(text, {
8 | remove: /[!"#$%&'\.()*+,\/:;<=>?@\[\]\\^_`{|}~]/g,
9 | lower: true
10 | })
11 | )}`;
12 | }
13 |
14 | export default function headingToSlug(node: Node, index = 0) {
15 | const slugified = safeSlugify(node.textContent);
16 | if (index === 0) return slugified;
17 | return `${slugified}-${index}`;
18 | }
19 |
20 | export function headingToPersistenceKey(node: Node, id?: string) {
21 | const slug = headingToSlug(node);
22 | return `rme-${id || window?.location.pathname}–${slug}`;
23 | }
24 |
--------------------------------------------------------------------------------
/src/extensions/horizontal-rule/horizontal-rule.ts:
--------------------------------------------------------------------------------
1 | import { mergeAttributes, Node, nodeInputRule } from "@tiptap/core";
2 | import { TextSelection } from "prosemirror-state";
3 |
4 | export interface HorizontalRuleOptions {
5 | HTMLAttributes: Record;
6 | }
7 |
8 | declare module "@tiptap/core" {
9 | interface Commands {
10 | horizontalRule: {
11 | setHorizontalRule: () => ReturnType;
12 | };
13 | }
14 | }
15 |
16 | export const HorizontalRule = Node.create({
17 | name: "horizontalRule",
18 | group: "block",
19 | selectable: true,
20 |
21 | addOptions() {
22 | return {
23 | HTMLAttributes: {}
24 | };
25 | },
26 |
27 | parseHTML() {
28 | return [{ tag: "hr" }];
29 | },
30 |
31 | renderHTML({ HTMLAttributes }) {
32 | return ["hr", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
33 | },
34 |
35 | addCommands() {
36 | return {
37 | setHorizontalRule: () => ({ chain }) => {
38 | return chain()
39 | .insertContent({ type: this.name })
40 | .command(({ tr, dispatch }) => {
41 | if (dispatch) {
42 | const { $to } = tr.selection;
43 | const posAfter = $to.end();
44 |
45 | if ($to.nodeAfter) {
46 | tr.setSelection(TextSelection.create(tr.doc, $to.pos));
47 | } else {
48 | const node = $to.parent.type.contentMatch.defaultType?.create();
49 |
50 | if (node) {
51 | tr.insert(posAfter, node);
52 | tr.setSelection(TextSelection.create(tr.doc, posAfter));
53 | }
54 | }
55 |
56 | tr.scrollIntoView();
57 | }
58 |
59 | return true;
60 | })
61 | .run();
62 | }
63 | };
64 | },
65 |
66 | addInputRules() {
67 | return [
68 | nodeInputRule({
69 | find: /^(?:---|—-|___\s|\*\*\*\s)$/,
70 | type: this.type
71 | })
72 | ];
73 | }
74 | });
75 |
--------------------------------------------------------------------------------
/src/extensions/horizontal-rule/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./horizontal-rule";
2 | export * from "./menu";
3 |
--------------------------------------------------------------------------------
/src/extensions/horizontal-rule/menu.tsx:
--------------------------------------------------------------------------------
1 | import React, { useCallback } from "react";
2 | import { Editor } from "@tiptap/core";
3 |
4 | import { Button, Tooltip } from "../../components";
5 | import { IconHorizontalRule } from "../../icons";
6 | import { useActive } from "../../hooks/use-active";
7 |
8 | import { HorizontalRule as HorizontalRuleExtension } from "./horizontal-rule";
9 | import i18n from "../../i18n";
10 |
11 | export const HorizontalRuleStaticMenu: React.FC<{ editor: Editor }> = ({
12 | editor
13 | }) => {
14 | const isHorizontalRuleActive = useActive(
15 | editor,
16 | HorizontalRuleExtension.name
17 | );
18 |
19 | const setHorizontalRule = useCallback(
20 | () =>
21 | editor
22 | .chain()
23 | .focus()
24 | .setHorizontalRule()
25 | .run(),
26 | [editor]
27 | );
28 |
29 | return (
30 |
31 | }
34 | onClick={setHorizontalRule}
35 | />
36 |
37 | );
38 | };
39 |
--------------------------------------------------------------------------------
/src/extensions/iframe/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./iframe";
2 | export * from "./menu";
3 |
--------------------------------------------------------------------------------
/src/extensions/iframe/menu/bubble.tsx:
--------------------------------------------------------------------------------
1 | import React, { useRef } from "react";
2 | import { Editor } from "@tiptap/core";
3 | import { useCallback } from "react";
4 |
5 | import { Tooltip, BubbleMenu, Button, Space } from "../../../components";
6 | import { useAttributes } from "../../../hooks/use-attributes";
7 | import { IconEdit, IconVisitlink } from "../../../icons";
8 | import { Iframe as IframeExtension } from "../iframe";
9 |
10 | import { showURLEditor } from "./edit";
11 | import i18n from "../../../i18n";
12 |
13 | interface IProps {
14 | editor: Editor;
15 | }
16 |
17 | export const IframeBubbleMenu: React.FC = ({ editor }) => {
18 | const containerRef = useRef(null);
19 |
20 | const { url } = useAttributes(editor, IframeExtension.name, {
21 | url: ""
22 | });
23 |
24 | const shouldShow = useCallback(() => editor.isActive(IframeExtension.name), [
25 | editor
26 | ]);
27 |
28 | const visitLink = useCallback(() => {
29 | const tab = window.open();
30 | if (!tab) return;
31 | tab.opener = null;
32 | tab.location = url;
33 | }, [url]);
34 |
35 | const openEditLinkModal = useCallback(() => {
36 | showURLEditor(editor, containerRef.current as HTMLElement);
37 | }, [editor]);
38 |
39 | return (
40 |
41 |
42 |
43 |
44 | } onClick={visitLink} />
45 |
46 |
47 |
48 | }
51 | onClick={openEditLinkModal}
52 | />
53 |
54 |
55 |
56 |
57 | );
58 | };
59 |
--------------------------------------------------------------------------------
/src/extensions/iframe/menu/index.tsx:
--------------------------------------------------------------------------------
1 | export * from "./static";
2 | export * from "./bubble";
3 |
--------------------------------------------------------------------------------
/src/extensions/iframe/menu/static.tsx:
--------------------------------------------------------------------------------
1 | import React, { useCallback } from "react";
2 | import { Editor } from "@tiptap/core";
3 |
4 | import { Button, Tooltip } from "../../../components";
5 | import { IconVisitlink } from "../../../icons";
6 | import { useActive } from "../../../hooks/use-active";
7 | import { Iframe as IframeExtension } from "../iframe";
8 |
9 | import { showURLEditor } from "./edit";
10 | import i18n from "../../../i18n";
11 |
12 | export const IframeStaticMenu: React.FC<{ editor: Editor }> = ({ editor }) => {
13 | const isActive = useActive(editor, IframeExtension.name);
14 |
15 | const toggleLink = useCallback(() => {
16 | showURLEditor(editor);
17 | }, [editor]);
18 |
19 | return (
20 |
21 | } onClick={toggleLink} active={isActive} />
22 |
23 | );
24 | };
25 |
--------------------------------------------------------------------------------
/src/extensions/image/image-view.tsx:
--------------------------------------------------------------------------------
1 | import React, { useCallback, useMemo } from "react";
2 | import { NodeViewWrapper, NodeViewProps } from "@tiptap/react";
3 |
4 | import { Resizable } from "../../components";
5 |
6 | export const ImageView: React.FC = ({
7 | editor,
8 | node: { attrs },
9 | updateAttributes,
10 | getPos
11 | }) => {
12 | const { src, width, height, align, aspectRatio } = attrs;
13 |
14 | const flexJustifyContent = useMemo(() => {
15 | if (align === "center") return "center";
16 | if (align === "right") return "flex-end";
17 |
18 | return "flex-start";
19 | }, [align]);
20 |
21 | const onResize = useCallback(
22 | size => {
23 | updateAttributes({ width: size.width, height: size.height });
24 | },
25 | [updateAttributes]
26 | );
27 |
28 | return (
29 |
35 |
42 | 
43 |
44 |
45 | );
46 | };
47 |
--------------------------------------------------------------------------------
/src/extensions/image/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./image";
2 | export * from "./menu";
3 |
--------------------------------------------------------------------------------
/src/extensions/image/menu/index.tsx:
--------------------------------------------------------------------------------
1 | export * from "./bubble-menu";
2 | export * from "./static-menu";
3 |
--------------------------------------------------------------------------------
/src/extensions/image/menu/static-menu.tsx:
--------------------------------------------------------------------------------
1 | import React, { useCallback } from "react";
2 | import { Editor } from "@tiptap/core";
3 |
4 | import { Tooltip, Button } from "../../../components";
5 | import { IconImage } from "../../../icons";
6 | import { useActive } from "../../../hooks/use-active";
7 | import { uploadImage } from "../../../utilities";
8 | import { Image as ImageExtension } from "../image";
9 | import i18n from "../../../i18n";
10 |
11 | export const ImageStaticMenu: React.FC<{ editor: Editor }> = ({ editor }) => {
12 | const isCodeActive = useActive(editor, ImageExtension.name);
13 |
14 | const setImage = useCallback(() => {
15 | uploadImage(editor).then(res => {
16 | editor
17 | .chain()
18 | .focus()
19 | .setImage({
20 | ...res,
21 | src: res.url
22 | })
23 | .run();
24 | });
25 | }, [editor]);
26 |
27 | return (
28 |
29 | } onClick={setImage} active={isCodeActive} />
30 |
31 | );
32 | };
33 |
--------------------------------------------------------------------------------
/src/extensions/index.ts:
--------------------------------------------------------------------------------
1 | export { Bold, BoldStaticMenu } from "./bold";
2 | export { Italic, ItalicStaticMenu } from "./italic";
3 | export { Underline, UnderlineStaticMenu } from "./underline";
4 | export { Strike, StrikeStaticMenu } from "./strike";
5 | export { Subscript, SubscriptStaticMenu } from "./subscript";
6 | export { Superscript, SuperscriptStaticMenu } from "./superscript";
7 | export { Blockquote, BlockquoteStaticMenu } from "./blockquote";
8 | export { CodeExtensions, CodeStaticMenu } from "./code";
9 | export { CodeBlock, CodeBlockStaticMenu } from "./code-block";
10 | export { Heading, HeadingStaticMenu } from "./heading";
11 | export { Link, LinkStaticMenu, LinkBubbleMenu } from "./link";
12 | export { Iframe, IframeStaticMenu, IframeBubbleMenu } from "./iframe";
13 | export { Image, ImageStaticMenu, ImageBubbleMenu } from "./image";
14 | export { Status, StatusStaticMenu } from "./status";
15 | export { TableExtensions, TableStaticMenu, TableBubbleMenu } from "./table";
16 | export { Mind, MindStaticMenu, MindBubbleMenu } from "./mind";
17 | export { Flow, FlowStaticMenu, FlowBubbleMenu } from "./flow";
18 | export {
19 | Excalidraw,
20 | ExcalidrawStaticMenu,
21 | ExcalidrawBubbleMenu
22 | } from "./excalidraw";
23 | export { TextAlign, TextAlignStaticMenu } from "./text-align";
24 | export { HorizontalRule, HorizontalRuleStaticMenu } from "./horizontal-rule";
25 | export { ListItem } from "./list-item";
26 | export { OrderedList } from "./ordered-list";
27 | export { BulletList } from "./bullet-list";
28 | export { DropCursor } from "./dropcursor";
29 | export { GapCursor } from "./gapcursor";
30 | export { HardBreak } from "./hard-break";
31 | export { UniqueID } from "./unique-id";
32 | export { Dragable } from "./dragable";
33 | export { Mention } from "./mention";
34 | export { createSlash } from "./slash";
35 | export {
36 | ColumnsExtensions,
37 | ColumnsStaticMenu,
38 | ColumnsBubbleMenu
39 | } from "./columns";
40 | export { Perf, addAnalytics } from "./perf";
41 |
--------------------------------------------------------------------------------
/src/extensions/italic/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./italic";
2 | export * from "./menu";
3 |
--------------------------------------------------------------------------------
/src/extensions/italic/italic.ts:
--------------------------------------------------------------------------------
1 | import { Italic } from "@tiptap/extension-italic";
2 |
3 | export { Italic };
4 |
--------------------------------------------------------------------------------
/src/extensions/italic/menu.tsx:
--------------------------------------------------------------------------------
1 | import React, { useCallback } from "react";
2 | import { Editor } from "@tiptap/core";
3 |
4 | import { Button, Tooltip } from "../../components";
5 | import { IconItalic } from "../../icons";
6 | import { useActive } from "../../hooks/use-active";
7 |
8 | import { Italic as ItalicExtension } from "./italic";
9 | import i18n from "../../i18n";
10 |
11 | export const ItalicStaticMenu: React.FC<{ editor: Editor }> = ({ editor }) => {
12 | const isItalicActive = useActive(editor, ItalicExtension.name);
13 |
14 | const toggleItalic = useCallback(
15 | () =>
16 | editor
17 | .chain()
18 | .focus()
19 | .toggleItalic()
20 | .run(),
21 | [editor]
22 | );
23 |
24 | return (
25 |
26 | }
28 | onClick={toggleItalic}
29 | active={isItalicActive}
30 | />
31 |
32 | );
33 | };
34 |
--------------------------------------------------------------------------------
/src/extensions/link/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./link";
2 | export * from "./menu";
3 |
--------------------------------------------------------------------------------
/src/extensions/link/link.ts:
--------------------------------------------------------------------------------
1 | import { markInputRule } from "@tiptap/core";
2 | import { Link as BuiltInLink } from "@tiptap/extension-link";
3 |
4 | const extractHrefFromMatch = (match: RegExpMatchArray) => {
5 | return { href: match?.groups?.href };
6 | };
7 |
8 | export const extractHrefFromMarkdownLink = (match: RegExpMatchArray) => {
9 | /**
10 | * Removes the last capture group from the match to satisfy
11 | * tiptap markInputRule expectation of having the content as
12 | * the last capture group in the match.
13 | *
14 | * https://github.com/ueberdosis/tiptap/blob/%40tiptap/core%402.0.0-beta.75/packages/core/src/inputRules/markInputRule.ts#L11
15 | */
16 | match.pop();
17 | return extractHrefFromMatch(match);
18 | };
19 |
20 | export const Link = BuiltInLink.extend({
21 | addOptions() {
22 | return {
23 | ...this.parent?.(),
24 | openOnClick: false
25 | };
26 | },
27 |
28 | addInputRules() {
29 | const markdownLinkSyntaxInputRuleRegExp = /(?:^|\s)\[([\w|\s|-|\u4e00-\u9fa5]+)\]\((?.+?)\)$/gm;
30 | const urlSyntaxRegExp = /(?:^|\s)(?(?:https?:\/\/|www\.)[\S]+)(?:\s|\n)$/gim;
31 |
32 | return [
33 | markInputRule({
34 | find: markdownLinkSyntaxInputRuleRegExp,
35 | type: this.type,
36 | getAttributes: extractHrefFromMarkdownLink
37 | }),
38 | markInputRule({
39 | find: urlSyntaxRegExp,
40 | type: this.type,
41 | getAttributes: extractHrefFromMatch
42 | })
43 | ];
44 | },
45 |
46 | addAttributes() {
47 | return {
48 | ...this.parent?.(),
49 | href: {
50 | default: null,
51 | parseHTML: element => element.getAttribute("href")
52 | },
53 | title: {
54 | title: null,
55 | parseHTML: element => element.getAttribute("title")
56 | }
57 | };
58 | }
59 | }).configure({
60 | openOnClick: false,
61 | linkOnPaste: true,
62 | autolink: false
63 | });
64 |
--------------------------------------------------------------------------------
/src/extensions/link/menu/index.tsx:
--------------------------------------------------------------------------------
1 | export * from "./static";
2 | export * from "./bubble";
3 |
--------------------------------------------------------------------------------
/src/extensions/link/menu/static.tsx:
--------------------------------------------------------------------------------
1 | import React, { useCallback } from "react";
2 | import { Editor } from "@tiptap/core";
3 |
4 | import { Button, Tooltip } from "../../../components";
5 | import { IconLink } from "../../../icons";
6 | import { useActive } from "../../../hooks/use-active";
7 | import { Link as LinkExtension } from "../link";
8 | import { showLinkEditor } from "./edit";
9 | import i18n from "../../../i18n";
10 |
11 | export const LinkStaticMenu: React.FC<{ editor: Editor }> = ({ editor }) => {
12 | const isLinkActive = useActive(editor, LinkExtension.name);
13 |
14 | const toggleLink = useCallback(() => {
15 | showLinkEditor(editor);
16 | }, [editor]);
17 |
18 | return (
19 |
20 | } onClick={toggleLink} active={isLinkActive} />
21 |
22 | );
23 | };
24 |
--------------------------------------------------------------------------------
/src/extensions/list-item/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./list-item";
2 |
--------------------------------------------------------------------------------
/src/extensions/list-item/list-item.ts:
--------------------------------------------------------------------------------
1 | import { ListItem } from "@tiptap/extension-list-item";
2 |
3 | export { ListItem };
4 |
--------------------------------------------------------------------------------
/src/extensions/loading/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./loading";
2 | export * from "./utilities";
3 |
--------------------------------------------------------------------------------
/src/extensions/loading/loading-view.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { NodeViewWrapper, NodeViewProps } from "@tiptap/react";
3 |
4 | import { Loading } from "../../components";
5 |
6 | const LOADING_WRAPPER_STYLE: React.CSSProperties = {
7 | display: "flex",
8 | justifyContent: "center",
9 | alignItems: "center",
10 | padding: "1em",
11 | whiteSpace: "nowrap"
12 | };
13 |
14 | export const LoadingView: React.FC = ({
15 | editor,
16 | node: { attrs }
17 | }) => {
18 | const isEditable = editor.isEditable;
19 | const { text } = attrs;
20 |
21 | if (!isEditable) return ;
22 |
23 | return (
24 |
25 |
26 |
27 |
28 |
29 | );
30 | };
31 |
--------------------------------------------------------------------------------
/src/extensions/loading/loading.ts:
--------------------------------------------------------------------------------
1 | import { mergeAttributes, Node } from "@tiptap/core";
2 | import { ReactNodeViewRenderer } from "@tiptap/react";
3 | import { LoadingView } from "./loading-view";
4 |
5 | export const Loading = Node.create({
6 | name: "loading",
7 | inline: false,
8 | content: "",
9 | marks: "",
10 | group: "block",
11 | selectable: false,
12 | draggable: false,
13 | atom: true,
14 |
15 | addOptions() {
16 | return {
17 | HTMLAttributes: {
18 | class: "loading"
19 | }
20 | };
21 | },
22 |
23 | addAttributes() {
24 | return {
25 | id: {
26 | default: null
27 | },
28 | text: {
29 | default: null
30 | }
31 | };
32 | },
33 |
34 | parseHTML() {
35 | return [
36 | {
37 | tag: "div[class=loading]"
38 | }
39 | ];
40 | },
41 |
42 | renderHTML({ HTMLAttributes }) {
43 | return [
44 | "div",
45 | mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)
46 | ];
47 | },
48 |
49 | addNodeView() {
50 | return ReactNodeViewRenderer(LoadingView);
51 | }
52 | });
53 |
--------------------------------------------------------------------------------
/src/extensions/loading/utilities.ts:
--------------------------------------------------------------------------------
1 | import { Editor } from "@tiptap/core";
2 |
3 | import { PMNode } from "../../prosemirror";
4 |
5 | export function findLoadingById(
6 | editor: Editor,
7 | id: string
8 | ): null | { node: PMNode; pos: number } {
9 | let target: PMNode | null = null;
10 | let pos = -1;
11 |
12 | editor.state.doc.descendants((node, nodePos) => {
13 | if (node.type.name === "loading" && node.attrs.id === id) {
14 | target = node;
15 | pos = nodePos;
16 | }
17 | });
18 |
19 | return target ? { node: target, pos } : null;
20 | }
21 |
--------------------------------------------------------------------------------
/src/extensions/mention/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./mention";
2 |
--------------------------------------------------------------------------------
/src/extensions/mind/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./mind";
2 | export * from "./menu";
3 |
--------------------------------------------------------------------------------
/src/extensions/mind/menu/bubble.tsx:
--------------------------------------------------------------------------------
1 | import React, { useCallback } from "react";
2 |
3 | import { IconCopy, IconDelete, IconEdit } from "../../../icons";
4 | import {
5 | BubbleMenu,
6 | Tooltip,
7 | Divider,
8 | Button,
9 | Space
10 | } from "../../../components";
11 | import { useAttributes } from "../../../hooks";
12 | import { copyNode, deleteNode } from "../../../utilities";
13 | import { IMindAttrs, Mind } from "../mind";
14 |
15 | import { showMindEditor } from "./edit";
16 | import i18n from "../../../i18n";
17 |
18 | export const MindBubbleMenu = ({ editor }) => {
19 | const attrs = useAttributes(editor, Mind.name, {
20 | width: 0,
21 | height: 0,
22 | data: "",
23 | svg: ""
24 | });
25 |
26 | const shouldShow = useCallback(() => editor.isActive(Mind.name), [editor]);
27 |
28 | const copyMe = useCallback(() => copyNode(editor, Mind.name), [editor]);
29 |
30 | const deleteMe = useCallback(() => deleteNode(editor, Mind.name), [editor]);
31 |
32 | const openEditModal = useCallback(() => {
33 | showMindEditor(editor);
34 | }, [editor]);
35 |
36 | return (
37 |
43 |
44 |
45 | } size="small" />
46 |
47 |
48 |
49 | } onClick={openEditModal} />
50 |
51 |
52 |
53 |
54 |
55 | } size="small" />
56 |
57 |
58 |
59 | );
60 | };
61 |
--------------------------------------------------------------------------------
/src/extensions/mind/menu/edit.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import { Editor } from "@tiptap/core";
4 | import { ThemeProvider } from "styled-components";
5 |
6 | import { DEFAULT_MIND_DATA, Mind as MindExtension } from "../mind";
7 | import { isNodeActive } from "../../../utilities";
8 |
9 | import { MindSettingModal } from "./modal";
10 | import { getEditorTheme } from "../../../editor/theme";
11 |
12 | export const showMindEditor = (editor: Editor) => {
13 | // @ts-ignore
14 | const isInMind = isNodeActive(editor, MindExtension.name);
15 |
16 | if (!isInMind) {
17 | editor
18 | .chain()
19 | .insertMind({
20 | data: DEFAULT_MIND_DATA
21 | })
22 | .run();
23 | }
24 |
25 | const attrs = editor.getAttributes(MindExtension.name);
26 | const data = JSON.parse(attrs.data);
27 | const blockId = attrs.blockId;
28 |
29 | const div = document.createElement("div");
30 | editor.options.element.appendChild(div);
31 |
32 | ReactDOM.render(
33 |
34 | {
39 | ReactDOM.unmountComponentAtNode(div);
40 | div.remove();
41 | }}
42 | />
43 | ,
44 | div
45 | );
46 | };
47 |
--------------------------------------------------------------------------------
/src/extensions/mind/menu/index.tsx:
--------------------------------------------------------------------------------
1 | export * from "./static";
2 | export * from "./bubble";
3 |
--------------------------------------------------------------------------------
/src/extensions/mind/menu/kityminder/README.md:
--------------------------------------------------------------------------------
1 | # 思维导图
2 |
3 | 思维导图功能来自百度团队的[开源作品](https://github.com/fex-team/kityminder-editor)。
4 |
--------------------------------------------------------------------------------
/src/extensions/mind/menu/kityminder/index.ts:
--------------------------------------------------------------------------------
1 | export const load = async (): Promise => {
2 | try {
3 | if (typeof window !== "undefined") {
4 | // @ts-ignore
5 | if (window.kityminder) {
6 | // @ts-ignore
7 | if (window.kityminder.Editor) return;
8 | }
9 | }
10 |
11 | // @ts-ignore
12 | await import("kity");
13 | await import("./hotbox");
14 | await import("./kityminder.core");
15 | await import("./kityminder.editor");
16 | } catch (e) {
17 | throw new Error(e);
18 | }
19 | };
20 |
21 | type Options = {
22 | container: HTMLElement;
23 | isEditable: boolean;
24 | data?: Record;
25 | };
26 |
27 | export function renderMind(options: Options) {
28 | // @ts-ignore
29 | const Editor = window.kityminder.Editor;
30 | const editor = new Editor(options.container);
31 | const mind = editor.minder;
32 | mind.editor = editor;
33 |
34 | options.data && mind.importJson(options.data);
35 |
36 | if (!options.isEditable) {
37 | mind.disable();
38 | mind.setStatus("readonly");
39 | }
40 |
41 | setTimeout(() => {
42 | mind.execCommand("camera");
43 |
44 | if (!options.isEditable) {
45 | const selectedNodes = mind.getSelectedNodes();
46 |
47 | if (selectedNodes.length) {
48 | mind.removeSelectedNodes(selectedNodes);
49 | }
50 | }
51 | }, 0);
52 |
53 | return mind;
54 | }
55 |
--------------------------------------------------------------------------------
/src/extensions/mind/menu/static.tsx:
--------------------------------------------------------------------------------
1 | import React, { useCallback } from "react";
2 | import { Editor } from "@tiptap/core";
3 |
4 | import { Button, Tooltip } from "../../../components";
5 | import { IconMind } from "../../../icons";
6 | import { useActive } from "../../../hooks/use-active";
7 | import { Mind as MindExtension } from "../mind";
8 |
9 | import { showMindEditor } from "./edit";
10 | import i18n from "../../../i18n";
11 |
12 | export const MindStaticMenu: React.FC<{ editor: Editor }> = ({ editor }) => {
13 | const isActive = useActive(editor, MindExtension.name);
14 |
15 | const toggleLink = useCallback(() => {
16 | showMindEditor(editor);
17 | }, [editor]);
18 |
19 | return (
20 |
21 | } onClick={toggleLink} active={isActive} />
22 |
23 | );
24 | };
25 |
--------------------------------------------------------------------------------
/src/extensions/mind/menu/toolbar/bgcolor.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import { ColorPicker, Button, Tooltip } from "../../../../components";
4 | import { IconBackgroundColor } from "../../../../icons";
5 | import i18n from "../../../../i18n";
6 |
7 | export const BgColor = ({
8 | editor,
9 | bgColor,
10 | selectedNode,
11 | setBackgroundColor
12 | }) => {
13 | return (
14 | {
16 | setBackgroundColor(color);
17 | }}>
18 |
19 |
39 |
40 | );
41 | };
42 |
--------------------------------------------------------------------------------
/src/extensions/mind/menu/toolbar/font-color.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import { ColorPicker, Button, Tooltip } from "../../../../components";
4 | import { IconFontColor } from "../../../../icons";
5 | import i18n from "../../../../i18n";
6 |
7 | export const FontColor = ({
8 | editor,
9 | selectedNode,
10 | setFontColor,
11 | textColor
12 | }) => {
13 | return (
14 | {
16 | setFontColor(color);
17 | }}>
18 |
19 |
39 |
40 | );
41 | };
42 |
--------------------------------------------------------------------------------
/src/extensions/mind/menu/toolbar/help.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import { Button, Popover } from "../../../../components";
4 | import { IconHelpCircle } from "../../../../icons";
5 | import i18n from "../../../../i18n";
6 |
7 | const HELP_MESSAGE = [
8 | { key: i18n('mind', 'help', 'addSame'), value: i18n('mind', 'help', 'addSameHelp') },
9 | { key: i18n('mind', 'help', 'addChild'), value: i18n('mind', 'help', 'addChildHelp') },
10 | { key: i18n('mind', 'help', 'editText'), value: i18n('mind', 'help', 'editTextHelp') },
11 | { key: i18n('mind', 'help', 'editMenu'), value: i18n('mind', 'help', 'editMenuHelp') }
12 | ];
13 |
14 | const HELP_MESSAGE_STYLE = {
15 | width: "200px"
16 | };
17 |
18 | export const Help = () => {
19 | return (
20 |
27 | {HELP_MESSAGE.map(msg => {
28 | return (
29 |
30 | {msg.key}：{msg.value}
31 |
32 | );
33 | })}
34 |
35 | }>
36 | } />
37 |
38 | );
39 | };
40 |
--------------------------------------------------------------------------------
/src/extensions/mind/menu/toolbar/image.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import { Dropdown, Button, Tooltip, Upload } from "../../../../components";
4 | import { IconImage } from "../../../../icons";
5 | import i18n from "../../../../i18n";
6 |
7 | export const Image = ({ editor, disabled, image, setImage }) => {
8 | return (
9 |
16 |
17 |
18 | }>
19 |
20 |
21 | } />
22 |
23 |
24 |
25 | );
26 | };
27 |
--------------------------------------------------------------------------------
/src/extensions/mind/menu/toolbar/link.tsx:
--------------------------------------------------------------------------------
1 | import React, { useCallback, useEffect, useRef, useState } from "react";
2 |
3 | import { Dropdown, Button, Tooltip, Input } from "../../../../components";
4 | import { IconLink } from "../../../../icons";
5 | import i18n from "../../../../i18n";
6 |
7 | export const Link = ({ editor, disabled, link, setLink }) => {
8 | const inputRef = useRef(null);
9 | const [url, setUrl] = useState(link);
10 |
11 | const save = useCallback(() => {
12 | setLink(url);
13 | }, [url]);
14 |
15 | useEffect(() => {
16 | setUrl(link);
17 | }, [link]);
18 |
19 | useEffect(() => {
20 | const timer = setTimeout(() => {
21 | inputRef.current?.focus();
22 | }, 300);
23 |
24 | return () => {
25 | clearTimeout(timer);
26 | };
27 | }, []);
28 |
29 | return (
30 |
37 |
38 |
41 |
42 | }>
43 |
44 |
45 | } />
46 |
47 |
48 |
49 | );
50 | };
51 |
--------------------------------------------------------------------------------
/src/extensions/mind/menu/toolbar/priority.tsx:
--------------------------------------------------------------------------------
1 | // import { IconClock } from "@douyinfe/semi-icons";
2 | // import { Button, Dropdown, Tooltip } from "@douyinfe/semi-ui";
3 | import React from "react";
4 |
5 | import { Dropdown, Button, Tooltip } from "../../../../components";
6 | import { IconPriority } from "../../../../icons";
7 |
8 | import { PRIORITIES } from "../constant";
9 | import i18n from "../../../../i18n";
10 |
11 | export const Priority = ({ editor, selectedNode, setPriority }) => {
12 | return (
13 |
17 | {PRIORITIES.map(item => {
18 | return (
19 |
20 | {item.text}
21 |
22 | );
23 | })}
24 |
25 | }>
26 |
27 |
28 | }
32 | />
33 |
34 |
35 |
36 | );
37 | };
38 |
--------------------------------------------------------------------------------
/src/extensions/mind/menu/toolbar/progress.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import { Dropdown, Button, Tooltip } from "../../../../components";
4 | import { IconProgress } from "../../../../icons";
5 |
6 | import { PROGRESSES } from "../constant";
7 | import i18n from "../../../../i18n";
8 |
9 | export const Progress = ({ editor, selectedNode, setProgress }) => {
10 | return (
11 |
15 | {PROGRESSES.map(progress => {
16 | return (
17 |
20 | {progress.text}
21 |
22 | );
23 | })}
24 |
25 | }>
26 |
27 |
28 | }
32 | />
33 |
34 |
35 |
36 | );
37 | };
38 |
--------------------------------------------------------------------------------
/src/extensions/mind/menu/toolbar/styled.tsx:
--------------------------------------------------------------------------------
1 | import styled from "styled-components";
2 |
3 | export const StyledSection = styled.section`
4 | margin-top: 16px;
5 |
6 | > div {
7 | display: flex;
8 | width: 192px;
9 | margin-top: 8px;
10 | flex-wrap: wrap;
11 |
12 | ul {
13 | display: flex;
14 | padding: 0;
15 | margin: 0;
16 | list-style: none;
17 | flex-wrap: wrap;
18 |
19 | li {
20 | width: 80px;
21 | height: 30px;
22 | padding: 0 5px;
23 | font-size: 12px;
24 | line-height: 30px;
25 | text-align: center;
26 | text-decoration: none;
27 | cursor: pointer;
28 | border: 1px solid rgb(28 31 35 / 8%);
29 |
30 | * {
31 | font-size: inherit;
32 | }
33 |
34 | &.active {
35 | border: 1px solid rgb(0 101 255);
36 | }
37 |
38 | &:nth-of-type(2n) {
39 | margin-left: 8px;
40 | }
41 |
42 | &:nth-of-type(n + 3) {
43 | margin-top: 8px;
44 | }
45 | }
46 | }
47 | }
48 | `;
49 |
--------------------------------------------------------------------------------
/src/extensions/mind/menu/toolbar/template.tsx:
--------------------------------------------------------------------------------
1 | // import { Button, Popover, Typography } from "@douyinfe/semi-ui";
2 | // import cls from "classnames";
3 | // import { IconStructure } from "components/icons";
4 |
5 | import React from "react";
6 |
7 | import { Tooltip, Button, Popover } from "../../../../components";
8 | import { ZINDEX_HIGHEST } from "../../../../constants";
9 | import { IconMindTemplate } from "../../../../icons";
10 |
11 | import { TEMPLATES } from "../constant";
12 | import { StyledSection } from "./styled";
13 | import i18n from "../../../../i18n";
14 |
15 | export const Template = ({ editor, template, setTemplate }) => {
16 | return (
17 | editor.options.element}
24 | content={
25 |
26 | 布局
27 |
28 |
29 | {TEMPLATES.map(item => {
30 | return (
31 | - setTemplate(item.value)}>
32 | {item.label}
33 |
34 | );
35 | })}
36 |
37 |
23 |
24 | {THEMES.map(item => {
25 | return (
26 | - setTheme(item.value)}>
30 | {item.label}
31 |
32 | );
33 | })}
34 |
35 |