tetrons 0.1.1 → 2.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +5 -0
- package/dist/index.d.ts +5 -0
- package/dist/index.js +17177 -0
- package/dist/index.mjs +17190 -0
- package/dist/tsconfig.tsbuildinfo +1 -0
- package/package.json +77 -61
- package/.hintrc +0 -13
- package/dist/.next/types/app/api/export/route.d.ts +0 -12
- package/dist/.next/types/app/api/export/route.js +0 -52
- package/dist/.next/types/app/api/save/route.d.ts +0 -12
- package/dist/.next/types/app/api/save/route.js +0 -52
- package/dist/.next/types/app/layout.d.ts +0 -12
- package/dist/.next/types/app/layout.js +0 -22
- package/dist/.next/types/app/page.d.ts +0 -12
- package/dist/.next/types/app/page.js +0 -22
- package/dist/next.config.d.ts +0 -3
- package/dist/next.config.js +0 -4
- package/dist/src/app/api/export/route.d.ts +0 -1
- package/dist/src/app/api/export/route.js +0 -4
- package/dist/src/app/api/save/route.d.ts +0 -6
- package/dist/src/app/api/save/route.js +0 -15
- package/dist/src/app/layout.d.ts +0 -6
- package/dist/src/app/layout.jsx +0 -34
- package/dist/src/app/page.d.ts +0 -1
- package/dist/src/app/page.jsx +0 -10
- package/dist/src/components/UI/Button.d.ts +0 -0
- package/dist/src/components/UI/Button.jsx +0 -1
- package/dist/src/components/UI/Dropdown.d.ts +0 -0
- package/dist/src/components/UI/Dropdown.jsx +0 -1
- package/dist/src/components/tetrons/EditorContent.d.ts +0 -1
- package/dist/src/components/tetrons/EditorContent.jsx +0 -158
- package/dist/src/components/tetrons/ResizableImage.d.ts +0 -1
- package/dist/src/components/tetrons/ResizableImage.js +0 -40
- package/dist/src/components/tetrons/ResizableImageComponent.d.ts +0 -11
- package/dist/src/components/tetrons/ResizableImageComponent.jsx +0 -37
- package/dist/src/components/tetrons/ResizableVideo.d.ts +0 -12
- package/dist/src/components/tetrons/ResizableVideo.js +0 -61
- package/dist/src/components/tetrons/ResizableVideoComponent.d.ts +0 -4
- package/dist/src/components/tetrons/ResizableVideoComponent.jsx +0 -32
- package/dist/src/components/tetrons/helpers.d.ts +0 -0
- package/dist/src/components/tetrons/helpers.js +0 -1
- package/dist/src/components/tetrons/toolbar/ActionGroup.d.ts +0 -6
- package/dist/src/components/tetrons/toolbar/ActionGroup.jsx +0 -165
- package/dist/src/components/tetrons/toolbar/ClipboardGroup.d.ts +0 -4
- package/dist/src/components/tetrons/toolbar/ClipboardGroup.jsx +0 -35
- package/dist/src/components/tetrons/toolbar/FileGroup.d.ts +0 -6
- package/dist/src/components/tetrons/toolbar/FileGroup.jsx +0 -40
- package/dist/src/components/tetrons/toolbar/FontStyleGroup.d.ts +0 -6
- package/dist/src/components/tetrons/toolbar/FontStyleGroup.jsx +0 -104
- package/dist/src/components/tetrons/toolbar/InsertGroup.d.ts +0 -5
- package/dist/src/components/tetrons/toolbar/InsertGroup.jsx +0 -162
- package/dist/src/components/tetrons/toolbar/ListAlignGroup.d.ts +0 -4
- package/dist/src/components/tetrons/toolbar/ListAlignGroup.jsx +0 -15
- package/dist/src/components/tetrons/toolbar/MiscGroup.d.ts +0 -6
- package/dist/src/components/tetrons/toolbar/MiscGroup.jsx +0 -30
- package/dist/src/components/tetrons/toolbar/TableContextMenu.d.ts +0 -6
- package/dist/src/components/tetrons/toolbar/TableContextMenu.jsx +0 -52
- package/dist/src/components/tetrons/toolbar/TetronsToolbar.d.ts +0 -4
- package/dist/src/components/tetrons/toolbar/TetronsToolbar.jsx +0 -46
- package/dist/src/components/tetrons/toolbar/ToolbarButton.d.ts +0 -12
- package/dist/src/components/tetrons/toolbar/ToolbarButton.jsx +0 -8
- package/dist/src/components/tetrons/toolbar/extensions/Comment.d.ts +0 -17
- package/dist/src/components/tetrons/toolbar/extensions/Comment.js +0 -45
- package/dist/src/components/tetrons/toolbar/extensions/Embed.d.ts +0 -2
- package/dist/src/components/tetrons/toolbar/extensions/Embed.js +0 -90
- package/dist/src/components/tetrons/toolbar/extensions/FontFamily.d.ts +0 -9
- package/dist/src/components/tetrons/toolbar/extensions/FontFamily.js +0 -28
- package/dist/src/components/tetrons/toolbar/extensions/FontSize.d.ts +0 -9
- package/dist/src/components/tetrons/toolbar/extensions/FontSize.js +0 -28
- package/dist/src/components/tetrons/toolbar/extensions/ResizableTable.d.ts +0 -1
- package/dist/src/components/tetrons/toolbar/extensions/ResizableTable.js +0 -11
- package/dist/src/components/tetrons/toolbar/marks/Subscript.d.ts +0 -2
- package/dist/src/components/tetrons/toolbar/marks/Subscript.js +0 -35
- package/dist/src/components/tetrons/toolbar/marks/Superscript.d.ts +0 -2
- package/dist/src/components/tetrons/toolbar/marks/Superscript.js +0 -35
- package/dist/src/index.d.ts +0 -1
- package/dist/src/index.js +0 -2
- package/dist/src/lib/export.d.ts +0 -0
- package/dist/src/lib/export.js +0 -1
- package/dist/src/lib/tiptap-extensions.d.ts +0 -0
- package/dist/src/lib/tiptap-extensions.js +0 -1
- package/dist/src/utils/loadEmojiPicker.d.ts +0 -1
- package/dist/src/utils/loadEmojiPicker.js +0 -12
- package/eslint.config.mjs +0 -16
- package/next.config.ts +0 -7
- package/postcss.config.mjs +0 -5
- package/public/editor-content.json +0 -27
- package/public/favicon-16x16.png +0 -0
- package/public/favicon-32x32.png +0 -0
- package/public/favicon-64x64.png +0 -0
- package/public/favicon-768x768.png +0 -0
- package/public/file.svg +0 -1
- package/public/globe.svg +0 -1
- package/public/next.svg +0 -1
- package/public/site.webmanifest +0 -20
- package/public/vercel.svg +0 -1
- package/public/window.svg +0 -1
- package/src/app/api/export/route.ts +0 -4
- package/src/app/api/save/route.ts +0 -18
- package/src/app/favicon-16x16.png +0 -0
- package/src/app/favicon-32x32.png +0 -0
- package/src/app/favicon-64x64.png +0 -0
- package/src/app/favicon-768x768.png +0 -0
- package/src/app/favicon.ico +0 -0
- package/src/app/globals.css +0 -207
- package/src/app/layout.tsx +0 -47
- package/src/app/page.tsx +0 -11
- package/src/components/UI/Button.tsx +0 -0
- package/src/components/UI/Dropdown.tsx +0 -0
- package/src/components/tetrons/EditorContent.tsx +0 -210
- package/src/components/tetrons/ResizableImage.ts +0 -39
- package/src/components/tetrons/ResizableImageComponent.tsx +0 -77
- package/src/components/tetrons/ResizableVideo.ts +0 -66
- package/src/components/tetrons/ResizableVideoComponent.tsx +0 -56
- package/src/components/tetrons/helpers.ts +0 -0
- package/src/components/tetrons/toolbar/ActionGroup.tsx +0 -222
- package/src/components/tetrons/toolbar/ClipboardGroup.tsx +0 -57
- package/src/components/tetrons/toolbar/FileGroup.tsx +0 -70
- package/src/components/tetrons/toolbar/FontStyleGroup.tsx +0 -198
- package/src/components/tetrons/toolbar/InsertGroup.tsx +0 -268
- package/src/components/tetrons/toolbar/ListAlignGroup.tsx +0 -69
- package/src/components/tetrons/toolbar/MiscGroup.tsx +0 -70
- package/src/components/tetrons/toolbar/TableContextMenu.tsx +0 -91
- package/src/components/tetrons/toolbar/TetronsToolbar.tsx +0 -60
- package/src/components/tetrons/toolbar/ToolbarButton.tsx +0 -38
- package/src/components/tetrons/toolbar/extensions/Comment.ts +0 -72
- package/src/components/tetrons/toolbar/extensions/Embed.ts +0 -113
- package/src/components/tetrons/toolbar/extensions/FontFamily.ts +0 -43
- package/src/components/tetrons/toolbar/extensions/FontSize.ts +0 -43
- package/src/components/tetrons/toolbar/extensions/ResizableTable.ts +0 -16
- package/src/components/tetrons/toolbar/marks/Subscript.ts +0 -45
- package/src/components/tetrons/toolbar/marks/Superscript.ts +0 -45
- package/src/index.ts +0 -3
- package/src/lib/export.ts +0 -0
- package/src/lib/tiptap-extensions.ts +0 -0
- package/src/types/dom-to-pdf.d.ts +0 -13
- package/src/types/editor.d.ts +0 -0
- package/src/types/emoji-picker.d.ts +0 -18
- package/src/types/global.d.ts +0 -13
- package/src/types/html2pdf.d.ts +0 -1
- package/src/types/tiptap-extensions.d.ts +0 -23
- package/src/utils/loadEmojiPicker.ts +0 -12
- package/tsconfig.json +0 -57
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
MdUndo,
|
|
3
|
-
MdRedo,
|
|
4
|
-
MdRefresh,
|
|
5
|
-
MdVisibility,
|
|
6
|
-
MdCode,
|
|
7
|
-
} from "react-icons/md";
|
|
8
|
-
import { Editor } from "@tiptap/react";
|
|
9
|
-
import ToolbarButton from "./ToolbarButton";
|
|
10
|
-
|
|
11
|
-
interface MiscGroupProps {
|
|
12
|
-
editor: Editor;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
export default function MiscGroup({ editor }: MiscGroupProps) {
|
|
16
|
-
const handlePreview = () => {
|
|
17
|
-
const html = editor.getHTML();
|
|
18
|
-
const previewWindow = window.open("", "_blank");
|
|
19
|
-
if (previewWindow) {
|
|
20
|
-
previewWindow.document.open();
|
|
21
|
-
previewWindow.document.write(`
|
|
22
|
-
<html>
|
|
23
|
-
<head>
|
|
24
|
-
<title>Preview</title>
|
|
25
|
-
<style>
|
|
26
|
-
body { font-family: sans-serif; padding: 2rem; line-height: 1.6; }
|
|
27
|
-
</style>
|
|
28
|
-
</head>
|
|
29
|
-
<body>${html}</body>
|
|
30
|
-
</html>
|
|
31
|
-
`);
|
|
32
|
-
previewWindow.document.close();
|
|
33
|
-
}
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
return (
|
|
37
|
-
<div className="flex gap-1 items-center border-r pr-3">
|
|
38
|
-
<ToolbarButton
|
|
39
|
-
icon={MdUndo}
|
|
40
|
-
label="Undo"
|
|
41
|
-
onClick={() => editor.chain().focus().undo().run()}
|
|
42
|
-
disabled={!editor.can().undo()}
|
|
43
|
-
/>
|
|
44
|
-
<ToolbarButton
|
|
45
|
-
icon={MdRedo}
|
|
46
|
-
label="Redo"
|
|
47
|
-
onClick={() => editor.chain().focus().redo().run()}
|
|
48
|
-
disabled={!editor.can().redo()}
|
|
49
|
-
/>
|
|
50
|
-
<ToolbarButton
|
|
51
|
-
icon={MdRefresh}
|
|
52
|
-
label="Reset Formatting"
|
|
53
|
-
onClick={() =>
|
|
54
|
-
editor.chain().focus().unsetAllMarks().clearNodes().run()
|
|
55
|
-
}
|
|
56
|
-
/>
|
|
57
|
-
<ToolbarButton
|
|
58
|
-
icon={MdCode}
|
|
59
|
-
label="Toggle Code Block"
|
|
60
|
-
onClick={() => editor.chain().focus().toggleCodeBlock().run()}
|
|
61
|
-
isActive={editor.isActive("codeBlock")}
|
|
62
|
-
/>
|
|
63
|
-
<ToolbarButton
|
|
64
|
-
icon={MdVisibility}
|
|
65
|
-
label="Preview"
|
|
66
|
-
onClick={handlePreview}
|
|
67
|
-
/>
|
|
68
|
-
</div>
|
|
69
|
-
);
|
|
70
|
-
}
|
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
|
|
3
|
-
import { useEffect, useState } from "react";
|
|
4
|
-
import { Editor } from "@tiptap/react";
|
|
5
|
-
|
|
6
|
-
interface ContextMenuProps {
|
|
7
|
-
editor: Editor;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
export default function TableContextMenu({ editor }: ContextMenuProps) {
|
|
11
|
-
const [menuPosition, setMenuPosition] = useState<{
|
|
12
|
-
x: number;
|
|
13
|
-
y: number;
|
|
14
|
-
} | null>(null);
|
|
15
|
-
|
|
16
|
-
useEffect(() => {
|
|
17
|
-
const handleContextMenu = (event: MouseEvent) => {
|
|
18
|
-
const target = event.target as HTMLElement;
|
|
19
|
-
|
|
20
|
-
if (target.closest("td") || target.closest("th")) {
|
|
21
|
-
event.preventDefault();
|
|
22
|
-
setMenuPosition({ x: event.pageX, y: event.pageY });
|
|
23
|
-
} else {
|
|
24
|
-
setMenuPosition(null);
|
|
25
|
-
}
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
const handleClick = () => setMenuPosition(null);
|
|
29
|
-
|
|
30
|
-
document.addEventListener("contextmenu", handleContextMenu);
|
|
31
|
-
document.addEventListener("click", handleClick);
|
|
32
|
-
|
|
33
|
-
return () => {
|
|
34
|
-
document.removeEventListener("contextmenu", handleContextMenu);
|
|
35
|
-
document.removeEventListener("click", handleClick);
|
|
36
|
-
};
|
|
37
|
-
}, []);
|
|
38
|
-
|
|
39
|
-
const insertRowAbove = () => editor.chain().focus().addRowBefore().run();
|
|
40
|
-
const insertRowBelow = () => editor.chain().focus().addRowAfter().run();
|
|
41
|
-
const insertColLeft = () => editor.chain().focus().addColumnBefore().run();
|
|
42
|
-
const insertColRight = () => editor.chain().focus().addColumnAfter().run();
|
|
43
|
-
const deleteRow = () => editor.chain().focus().deleteRow().run();
|
|
44
|
-
const deleteCol = () => editor.chain().focus().deleteColumn().run();
|
|
45
|
-
|
|
46
|
-
if (!menuPosition) return null;
|
|
47
|
-
|
|
48
|
-
return (
|
|
49
|
-
<ul
|
|
50
|
-
className="absolute bg-white shadow border rounded text-sm z-50"
|
|
51
|
-
style={{ top: menuPosition.y, left: menuPosition.x }}
|
|
52
|
-
>
|
|
53
|
-
<li
|
|
54
|
-
className="px-3 py-1 hover:bg-gray-100 cursor-pointer"
|
|
55
|
-
onClick={insertRowAbove}
|
|
56
|
-
>
|
|
57
|
-
Insert Row Above
|
|
58
|
-
</li>
|
|
59
|
-
<li
|
|
60
|
-
className="px-3 py-1 hover:bg-gray-100 cursor-pointer"
|
|
61
|
-
onClick={insertRowBelow}
|
|
62
|
-
>
|
|
63
|
-
Insert Row Below
|
|
64
|
-
</li>
|
|
65
|
-
<li
|
|
66
|
-
className="px-3 py-1 hover:bg-gray-100 cursor-pointer"
|
|
67
|
-
onClick={insertColLeft}
|
|
68
|
-
>
|
|
69
|
-
Insert Column Left
|
|
70
|
-
</li>
|
|
71
|
-
<li
|
|
72
|
-
className="px-3 py-1 hover:bg-gray-100 cursor-pointer"
|
|
73
|
-
onClick={insertColRight}
|
|
74
|
-
>
|
|
75
|
-
Insert Column Right
|
|
76
|
-
</li>
|
|
77
|
-
<li
|
|
78
|
-
className="px-3 py-1 hover:bg-red-100 cursor-pointer"
|
|
79
|
-
onClick={deleteRow}
|
|
80
|
-
>
|
|
81
|
-
Delete Row
|
|
82
|
-
</li>
|
|
83
|
-
<li
|
|
84
|
-
className="px-3 py-1 hover:bg-red-100 cursor-pointer"
|
|
85
|
-
onClick={deleteCol}
|
|
86
|
-
>
|
|
87
|
-
Delete Column
|
|
88
|
-
</li>
|
|
89
|
-
</ul>
|
|
90
|
-
);
|
|
91
|
-
}
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
|
|
3
|
-
import { useState, useEffect } from "react";
|
|
4
|
-
import type { Editor } from "@tiptap/react";
|
|
5
|
-
|
|
6
|
-
import ActionGroup from "./ActionGroup";
|
|
7
|
-
import ClipboardGroup from "./ClipboardGroup";
|
|
8
|
-
import FontStyleGroup from "./FontStyleGroup";
|
|
9
|
-
import InsertGroup from "./InsertGroup";
|
|
10
|
-
import ListAlignGroup from "./ListAlignGroup";
|
|
11
|
-
import MiscGroup from "./MiscGroup";
|
|
12
|
-
import FileGroup from "./FileGroup";
|
|
13
|
-
|
|
14
|
-
export default function TetronsToolbar({ editor }: { editor: Editor }) {
|
|
15
|
-
const [autoSave, setAutoSave] = useState(false);
|
|
16
|
-
|
|
17
|
-
useEffect(() => {
|
|
18
|
-
if (!editor) return;
|
|
19
|
-
|
|
20
|
-
const handleUpdate = () => {
|
|
21
|
-
if (!autoSave) return;
|
|
22
|
-
const content = editor.getJSON();
|
|
23
|
-
fetch("/api/save", {
|
|
24
|
-
method: "POST",
|
|
25
|
-
headers: { "Content-Type": "application/json" },
|
|
26
|
-
body: JSON.stringify(content),
|
|
27
|
-
}).catch((err) => console.error("Auto-save failed:", err));
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
editor.on("update", handleUpdate);
|
|
31
|
-
return () => {
|
|
32
|
-
editor.off("update", handleUpdate);
|
|
33
|
-
};
|
|
34
|
-
}, [autoSave, editor]);
|
|
35
|
-
|
|
36
|
-
return (
|
|
37
|
-
<div className="flex flex-wrap items-center gap-4 p-3 border-b bg-white shadow-sm relative z-10">
|
|
38
|
-
<div className="flex items-center gap-2 border-r pr-3">
|
|
39
|
-
<input
|
|
40
|
-
type="checkbox"
|
|
41
|
-
id="autoSave"
|
|
42
|
-
checked={autoSave}
|
|
43
|
-
onChange={(e) => setAutoSave(e.target.checked)}
|
|
44
|
-
className="w-4 h-4"
|
|
45
|
-
/>
|
|
46
|
-
<label htmlFor="autoSave" className="text-sm select-none">
|
|
47
|
-
Auto Save
|
|
48
|
-
</label>
|
|
49
|
-
</div>
|
|
50
|
-
|
|
51
|
-
<FileGroup editor={editor} />
|
|
52
|
-
<ClipboardGroup editor={editor} />
|
|
53
|
-
<FontStyleGroup editor={editor} />
|
|
54
|
-
<ListAlignGroup editor={editor} />
|
|
55
|
-
<InsertGroup editor={editor} />
|
|
56
|
-
<MiscGroup editor={editor} />
|
|
57
|
-
<ActionGroup editor={editor} />
|
|
58
|
-
</div>
|
|
59
|
-
);
|
|
60
|
-
}
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import type { IconType } from "react-icons";
|
|
3
|
-
|
|
4
|
-
export type ToolbarButtonProps = {
|
|
5
|
-
icon: IconType;
|
|
6
|
-
onClick: () => void;
|
|
7
|
-
disabled?: boolean;
|
|
8
|
-
title?: string;
|
|
9
|
-
label?: string;
|
|
10
|
-
isActive?: boolean;
|
|
11
|
-
};
|
|
12
|
-
|
|
13
|
-
const ToolbarButton = React.forwardRef<HTMLButtonElement, ToolbarButtonProps>(
|
|
14
|
-
(
|
|
15
|
-
{ icon: Icon, onClick, disabled = false, title, label, isActive = false },
|
|
16
|
-
ref
|
|
17
|
-
) => {
|
|
18
|
-
return (
|
|
19
|
-
<button
|
|
20
|
-
type="button"
|
|
21
|
-
ref={ref}
|
|
22
|
-
onClick={onClick}
|
|
23
|
-
disabled={disabled}
|
|
24
|
-
title={title ?? label}
|
|
25
|
-
aria-label={title ?? label}
|
|
26
|
-
className={`p-2 rounded hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed ${
|
|
27
|
-
isActive ? "bg-gray-300" : ""
|
|
28
|
-
}`}
|
|
29
|
-
>
|
|
30
|
-
<Icon size={20} />
|
|
31
|
-
</button>
|
|
32
|
-
);
|
|
33
|
-
}
|
|
34
|
-
);
|
|
35
|
-
|
|
36
|
-
ToolbarButton.displayName = "ToolbarButton";
|
|
37
|
-
|
|
38
|
-
export default ToolbarButton;
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
import { Mark, mergeAttributes } from "@tiptap/core";
|
|
2
|
-
|
|
3
|
-
export interface CommentOptions {
|
|
4
|
-
HTMLAttributes: {
|
|
5
|
-
class?: string;
|
|
6
|
-
style?: string;
|
|
7
|
-
[key: string]: unknown;
|
|
8
|
-
};
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
declare module "@tiptap/core" {
|
|
12
|
-
interface Commands<ReturnType> {
|
|
13
|
-
comment: {
|
|
14
|
-
setComment: (comment: string) => ReturnType;
|
|
15
|
-
unsetComment: () => ReturnType;
|
|
16
|
-
};
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
export const Comment = Mark.create<CommentOptions>({
|
|
21
|
-
name: "comment",
|
|
22
|
-
|
|
23
|
-
addOptions() {
|
|
24
|
-
return {
|
|
25
|
-
HTMLAttributes: {},
|
|
26
|
-
};
|
|
27
|
-
},
|
|
28
|
-
|
|
29
|
-
addAttributes() {
|
|
30
|
-
return {
|
|
31
|
-
comment: {
|
|
32
|
-
default: "",
|
|
33
|
-
},
|
|
34
|
-
};
|
|
35
|
-
},
|
|
36
|
-
|
|
37
|
-
parseHTML() {
|
|
38
|
-
return [
|
|
39
|
-
{
|
|
40
|
-
tag: "span[data-comment]",
|
|
41
|
-
},
|
|
42
|
-
];
|
|
43
|
-
},
|
|
44
|
-
|
|
45
|
-
renderHTML({ HTMLAttributes }) {
|
|
46
|
-
return [
|
|
47
|
-
"span",
|
|
48
|
-
mergeAttributes(HTMLAttributes, {
|
|
49
|
-
"data-comment": HTMLAttributes.comment,
|
|
50
|
-
class: "comment-highlight",
|
|
51
|
-
title: HTMLAttributes.comment,
|
|
52
|
-
style: "background-color: rgba(255, 230, 0, 0.3);",
|
|
53
|
-
}),
|
|
54
|
-
0,
|
|
55
|
-
];
|
|
56
|
-
},
|
|
57
|
-
|
|
58
|
-
addCommands() {
|
|
59
|
-
return {
|
|
60
|
-
setComment:
|
|
61
|
-
(comment) =>
|
|
62
|
-
({ commands }) => {
|
|
63
|
-
return commands.setMark(this.name, { comment });
|
|
64
|
-
},
|
|
65
|
-
unsetComment:
|
|
66
|
-
() =>
|
|
67
|
-
({ commands }) => {
|
|
68
|
-
return commands.unsetMark(this.name);
|
|
69
|
-
},
|
|
70
|
-
};
|
|
71
|
-
},
|
|
72
|
-
});
|
|
@@ -1,113 +0,0 @@
|
|
|
1
|
-
import { Node, mergeAttributes, CommandProps } from "@tiptap/core";
|
|
2
|
-
|
|
3
|
-
export const Embed = Node.create({
|
|
4
|
-
name: "embed",
|
|
5
|
-
group: "block",
|
|
6
|
-
atom: true,
|
|
7
|
-
|
|
8
|
-
addAttributes() {
|
|
9
|
-
return {
|
|
10
|
-
src: { default: null },
|
|
11
|
-
width: { default: 560 },
|
|
12
|
-
height: { default: 315 },
|
|
13
|
-
};
|
|
14
|
-
},
|
|
15
|
-
|
|
16
|
-
parseHTML() {
|
|
17
|
-
return [{ tag: "iframe[src]" }];
|
|
18
|
-
},
|
|
19
|
-
|
|
20
|
-
renderHTML({ HTMLAttributes }) {
|
|
21
|
-
return ["iframe", mergeAttributes(HTMLAttributes)];
|
|
22
|
-
},
|
|
23
|
-
|
|
24
|
-
addCommands() {
|
|
25
|
-
return {
|
|
26
|
-
setEmbed: ((attributes: {
|
|
27
|
-
src: string;
|
|
28
|
-
width?: number;
|
|
29
|
-
height?: number;
|
|
30
|
-
}) => {
|
|
31
|
-
return ({ chain }: CommandProps): boolean => {
|
|
32
|
-
return chain()
|
|
33
|
-
.insertContent({
|
|
34
|
-
type: this.name,
|
|
35
|
-
attrs: attributes,
|
|
36
|
-
})
|
|
37
|
-
.run();
|
|
38
|
-
};
|
|
39
|
-
}).bind(this),
|
|
40
|
-
};
|
|
41
|
-
},
|
|
42
|
-
|
|
43
|
-
addNodeView() {
|
|
44
|
-
return ({ node, getPos, editor }) => {
|
|
45
|
-
const container = document.createElement('div');
|
|
46
|
-
container.style.position = 'relative';
|
|
47
|
-
container.style.display = 'inline-block';
|
|
48
|
-
container.style.width = node.attrs.width + 'px';
|
|
49
|
-
container.style.height = node.attrs.height + 'px';
|
|
50
|
-
|
|
51
|
-
const iframe = document.createElement('iframe');
|
|
52
|
-
iframe.setAttribute('src', node.attrs.src);
|
|
53
|
-
iframe.setAttribute('frameborder', '0');
|
|
54
|
-
iframe.setAttribute('allowfullscreen', 'true');
|
|
55
|
-
iframe.style.width = '100%';
|
|
56
|
-
iframe.style.height = '100%';
|
|
57
|
-
container.appendChild(iframe);
|
|
58
|
-
|
|
59
|
-
const handle = document.createElement('div');
|
|
60
|
-
handle.style.position = 'absolute';
|
|
61
|
-
handle.style.width = '16px';
|
|
62
|
-
handle.style.height = '16px';
|
|
63
|
-
handle.style.right = '0';
|
|
64
|
-
handle.style.bottom = '0';
|
|
65
|
-
handle.style.cursor = 'se-resize';
|
|
66
|
-
handle.style.background = 'rgba(0,0,0,0.5)';
|
|
67
|
-
handle.style.borderRadius = '2px';
|
|
68
|
-
container.appendChild(handle);
|
|
69
|
-
|
|
70
|
-
let startX: number, startY: number, startWidth: number, startHeight: number;
|
|
71
|
-
|
|
72
|
-
const onMouseDown = (event: MouseEvent) => {
|
|
73
|
-
event.preventDefault();
|
|
74
|
-
startX = event.clientX;
|
|
75
|
-
startY = event.clientY;
|
|
76
|
-
startWidth = container.offsetWidth;
|
|
77
|
-
startHeight = container.offsetHeight;
|
|
78
|
-
window.addEventListener('mousemove', onMouseMove);
|
|
79
|
-
window.addEventListener('mouseup', onMouseUp);
|
|
80
|
-
};
|
|
81
|
-
|
|
82
|
-
const onMouseMove = (event: MouseEvent) => {
|
|
83
|
-
const newWidth = Math.max(100, startWidth + (event.clientX - startX));
|
|
84
|
-
const newHeight = Math.max(100, startHeight + (event.clientY - startY));
|
|
85
|
-
container.style.width = newWidth + 'px';
|
|
86
|
-
container.style.height = newHeight + 'px';
|
|
87
|
-
};
|
|
88
|
-
|
|
89
|
-
const onMouseUp = () => {
|
|
90
|
-
window.removeEventListener("mousemove", onMouseMove);
|
|
91
|
-
window.removeEventListener("mouseup", onMouseUp);
|
|
92
|
-
|
|
93
|
-
editor.commands.command(({ tr }) => {
|
|
94
|
-
tr.setNodeMarkup(getPos(), undefined, {
|
|
95
|
-
...node.attrs,
|
|
96
|
-
width: container.offsetWidth,
|
|
97
|
-
height: container.offsetHeight,
|
|
98
|
-
});
|
|
99
|
-
return true;
|
|
100
|
-
});
|
|
101
|
-
};
|
|
102
|
-
|
|
103
|
-
handle.addEventListener('mousedown', onMouseDown);
|
|
104
|
-
|
|
105
|
-
return {
|
|
106
|
-
dom: container,
|
|
107
|
-
destroy() {
|
|
108
|
-
handle.removeEventListener('mousedown', onMouseDown);
|
|
109
|
-
}
|
|
110
|
-
};
|
|
111
|
-
};
|
|
112
|
-
},
|
|
113
|
-
});
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import { Mark, mergeAttributes } from '@tiptap/core';
|
|
2
|
-
|
|
3
|
-
declare module '@tiptap/core' {
|
|
4
|
-
interface Commands<ReturnType> {
|
|
5
|
-
fontFamily: {
|
|
6
|
-
setFontFamily: (font: string) => ReturnType;
|
|
7
|
-
};
|
|
8
|
-
}
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
export const FontFamily = Mark.create({
|
|
12
|
-
name: 'fontFamily',
|
|
13
|
-
|
|
14
|
-
addAttributes() {
|
|
15
|
-
return {
|
|
16
|
-
font: {
|
|
17
|
-
default: null,
|
|
18
|
-
parseHTML: element => element.style.fontFamily.replace(/['"]/g, ''),
|
|
19
|
-
renderHTML: attributes => {
|
|
20
|
-
if (!attributes.font) return {};
|
|
21
|
-
return { style: `font-family: ${attributes.font}` };
|
|
22
|
-
},
|
|
23
|
-
},
|
|
24
|
-
};
|
|
25
|
-
},
|
|
26
|
-
|
|
27
|
-
parseHTML() {
|
|
28
|
-
return [{ style: 'font-family' }];
|
|
29
|
-
},
|
|
30
|
-
|
|
31
|
-
renderHTML({ HTMLAttributes }) {
|
|
32
|
-
return ['span', mergeAttributes(HTMLAttributes), 0];
|
|
33
|
-
},
|
|
34
|
-
|
|
35
|
-
addCommands() {
|
|
36
|
-
return {
|
|
37
|
-
setFontFamily:
|
|
38
|
-
font =>
|
|
39
|
-
({ commands }) =>
|
|
40
|
-
commands.setMark(this.name, { font }),
|
|
41
|
-
};
|
|
42
|
-
},
|
|
43
|
-
});
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import { Mark, mergeAttributes } from "@tiptap/core";
|
|
2
|
-
|
|
3
|
-
declare module "@tiptap/core" {
|
|
4
|
-
interface Commands<ReturnType> {
|
|
5
|
-
fontSize: {
|
|
6
|
-
setFontSize: (size: string) => ReturnType;
|
|
7
|
-
};
|
|
8
|
-
}
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
export const FontSize = Mark.create({
|
|
12
|
-
name: "fontSize",
|
|
13
|
-
|
|
14
|
-
addAttributes() {
|
|
15
|
-
return {
|
|
16
|
-
size: {
|
|
17
|
-
default: null,
|
|
18
|
-
parseHTML: (element) => element.style.fontSize,
|
|
19
|
-
renderHTML: (attributes) => {
|
|
20
|
-
if (!attributes.size) return {};
|
|
21
|
-
return { style: `font-size: ${attributes.size}` };
|
|
22
|
-
},
|
|
23
|
-
},
|
|
24
|
-
};
|
|
25
|
-
},
|
|
26
|
-
|
|
27
|
-
parseHTML() {
|
|
28
|
-
return [{ style: "font-size" }];
|
|
29
|
-
},
|
|
30
|
-
|
|
31
|
-
renderHTML({ HTMLAttributes }) {
|
|
32
|
-
return ["span", mergeAttributes(HTMLAttributes), 0];
|
|
33
|
-
},
|
|
34
|
-
|
|
35
|
-
addCommands() {
|
|
36
|
-
return {
|
|
37
|
-
setFontSize:
|
|
38
|
-
(size) =>
|
|
39
|
-
({ commands }) =>
|
|
40
|
-
commands.setMark(this.name, { size }),
|
|
41
|
-
};
|
|
42
|
-
},
|
|
43
|
-
});
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { Table } from "@tiptap/extension-table";
|
|
2
|
-
import { columnResizing, tableEditing } from "prosemirror-tables";
|
|
3
|
-
import { Plugin } from "prosemirror-state";
|
|
4
|
-
|
|
5
|
-
export const ResizableTable = Table.extend({
|
|
6
|
-
addOptions() {
|
|
7
|
-
return {
|
|
8
|
-
...this.parent?.(),
|
|
9
|
-
resizable: true,
|
|
10
|
-
};
|
|
11
|
-
},
|
|
12
|
-
|
|
13
|
-
addProseMirrorPlugins(): Plugin[] {
|
|
14
|
-
return [columnResizing({ handleWidth: 5 }), tableEditing()];
|
|
15
|
-
},
|
|
16
|
-
});
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import { Mark, markInputRule, markPasteRule } from "@tiptap/core";
|
|
2
|
-
|
|
3
|
-
export const Subscript = Mark.create({
|
|
4
|
-
name: "subscript",
|
|
5
|
-
|
|
6
|
-
excludes: "superscript",
|
|
7
|
-
|
|
8
|
-
parseHTML() {
|
|
9
|
-
return [{ tag: "sub" }, { style: "vertical-align: sub" }];
|
|
10
|
-
},
|
|
11
|
-
|
|
12
|
-
renderHTML() {
|
|
13
|
-
return ["sub", 0];
|
|
14
|
-
},
|
|
15
|
-
|
|
16
|
-
addCommands() {
|
|
17
|
-
return {
|
|
18
|
-
toggleSubscript:
|
|
19
|
-
() =>
|
|
20
|
-
({ chain }) =>
|
|
21
|
-
chain()
|
|
22
|
-
.unsetMark("superscript")
|
|
23
|
-
.toggleMark(this.name)
|
|
24
|
-
.run(),
|
|
25
|
-
};
|
|
26
|
-
},
|
|
27
|
-
|
|
28
|
-
addInputRules() {
|
|
29
|
-
return [
|
|
30
|
-
markInputRule({
|
|
31
|
-
find: /~([^~]+)~/,
|
|
32
|
-
type: this.type,
|
|
33
|
-
}),
|
|
34
|
-
];
|
|
35
|
-
},
|
|
36
|
-
|
|
37
|
-
addPasteRules() {
|
|
38
|
-
return [
|
|
39
|
-
markPasteRule({
|
|
40
|
-
find: /~([^~]+)~/g,
|
|
41
|
-
type: this.type,
|
|
42
|
-
}),
|
|
43
|
-
];
|
|
44
|
-
},
|
|
45
|
-
});
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import { Mark, markInputRule, markPasteRule } from "@tiptap/core";
|
|
2
|
-
|
|
3
|
-
export const Superscript = Mark.create({
|
|
4
|
-
name: "superscript",
|
|
5
|
-
|
|
6
|
-
excludes: "subscript",
|
|
7
|
-
|
|
8
|
-
parseHTML() {
|
|
9
|
-
return [{ tag: "sup" }, { style: "vertical-align: super" }];
|
|
10
|
-
},
|
|
11
|
-
|
|
12
|
-
renderHTML() {
|
|
13
|
-
return ["sup", 0];
|
|
14
|
-
},
|
|
15
|
-
|
|
16
|
-
addCommands() {
|
|
17
|
-
return {
|
|
18
|
-
toggleSuperscript:
|
|
19
|
-
() =>
|
|
20
|
-
({ chain }) =>
|
|
21
|
-
chain()
|
|
22
|
-
.unsetMark("subscript")
|
|
23
|
-
.toggleMark(this.name)
|
|
24
|
-
.run(),
|
|
25
|
-
};
|
|
26
|
-
},
|
|
27
|
-
|
|
28
|
-
addInputRules() {
|
|
29
|
-
return [
|
|
30
|
-
markInputRule({
|
|
31
|
-
find: /\^([^^]+)\^/,
|
|
32
|
-
type: this.type,
|
|
33
|
-
}),
|
|
34
|
-
];
|
|
35
|
-
},
|
|
36
|
-
|
|
37
|
-
addPasteRules() {
|
|
38
|
-
return [
|
|
39
|
-
markPasteRule({
|
|
40
|
-
find: /\^([^^]+)\^/g,
|
|
41
|
-
type: this.type,
|
|
42
|
-
}),
|
|
43
|
-
];
|
|
44
|
-
},
|
|
45
|
-
});
|
package/src/index.ts
DELETED
package/src/lib/export.ts
DELETED
|
File without changes
|
|
File without changes
|
package/src/types/editor.d.ts
DELETED
|
File without changes
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
|
|
3
|
-
declare global {
|
|
4
|
-
namespace JSX {
|
|
5
|
-
interface IntrinsicElements {
|
|
6
|
-
"emoji-picker": React.DetailedHTMLProps<
|
|
7
|
-
React.HTMLAttributes<HTMLElement>,
|
|
8
|
-
HTMLElement
|
|
9
|
-
> & {
|
|
10
|
-
"skin-tone-emoji"?: string;
|
|
11
|
-
"category-order"?: string;
|
|
12
|
-
class?: string;
|
|
13
|
-
};
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
export {};
|