tetrons 2.2.6 → 2.2.7

package/dist/components/tetrons/toolbar/TableContextMenu.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { Editor } from "@tiptap/react";
+interface ContextMenuProps {
+    editor: Editor;
+}
+export default function TableContextMenu({ editor }: ContextMenuProps): React.JSX.Element | null;
+export {};

package/dist/components/tetrons/toolbar/TableContextMenu.jsx

@@ -0,0 +1,52 @@
+"use client";
+import React, { useEffect, useState } from "react";
+export default function TableContextMenu({ editor }) {
+    const [menuPosition, setMenuPosition] = useState(null);
+    useEffect(() => {
+        const handleContextMenu = (event) => {
+            const target = event.target;
+            if (target.closest("td") || target.closest("th")) {
+                event.preventDefault();
+                setMenuPosition({ x: event.pageX, y: event.pageY });
+            }
+            else {
+                setMenuPosition(null);
+            }
+        };
+        const handleClick = () => setMenuPosition(null);
+        document.addEventListener("contextmenu", handleContextMenu);
+        document.addEventListener("click", handleClick);
+        return () => {
+            document.removeEventListener("contextmenu", handleContextMenu);
+            document.removeEventListener("click", handleClick);
+        };
+    }, []);
+    const insertRowAbove = () => editor.chain().focus().addRowBefore().run();
+    const insertRowBelow = () => editor.chain().focus().addRowAfter().run();
+    const insertColLeft = () => editor.chain().focus().addColumnBefore().run();
+    const insertColRight = () => editor.chain().focus().addColumnAfter().run();
+    const deleteRow = () => editor.chain().focus().deleteRow().run();
+    const deleteCol = () => editor.chain().focus().deleteColumn().run();
+    if (!menuPosition)
+        return null;
+    return (<ul className="absolute bg-white shadow border rounded text-sm z-50" style={{ top: menuPosition.y, left: menuPosition.x }}>
+      <li className="px-3 py-1 hover:bg-gray-100 cursor-pointer" onClick={insertRowAbove}>
+        Insert Row Above
+      </li>
+      <li className="px-3 py-1 hover:bg-gray-100 cursor-pointer" onClick={insertRowBelow}>
+        Insert Row Below
+      </li>
+      <li className="px-3 py-1 hover:bg-gray-100 cursor-pointer" onClick={insertColLeft}>
+        Insert Column Left
+      </li>
+      <li className="px-3 py-1 hover:bg-gray-100 cursor-pointer" onClick={insertColRight}>
+        Insert Column Right
+      </li>
+      <li className="px-3 py-1 hover:bg-red-100 cursor-pointer" onClick={deleteRow}>
+        Delete Row
+      </li>
+      <li className="px-3 py-1 hover:bg-red-100 cursor-pointer" onClick={deleteCol}>
+        Delete Column
+      </li>
+    </ul>);
+}

package/dist/components/tetrons/toolbar/TetronsToolbar.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import type { Editor } from "@tiptap/react";
+export default function TetronsToolbar({ editor, version, }: {
+    editor: Editor;
+    version: "free" | "pro" | "premium" | "platinum";
+}): React.JSX.Element;

package/dist/components/tetrons/toolbar/TetronsToolbar.jsx

@@ -0,0 +1,46 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import ActionGroup from "./ActionGroup";
+import ClipboardGroup from "./ClipboardGroup";
+import FontStyleGroup from "./FontStyleGroup";
+import InsertGroup from "./InsertGroup";
+import ListAlignGroup from "./ListAlignGroup";
+import MiscGroup from "./MiscGroup";
+import FileGroup from "./FileGroup";
+export default function TetronsToolbar({ editor, version, }) {
+    const [autoSave, setAutoSave] = useState(false);
+    useEffect(() => {
+        if (!editor)
+            return;
+        const handleUpdate = () => {
+            if (!autoSave)
+                return;
+            const content = editor.getJSON();
+            fetch("/api/save", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify(content),
+            }).catch((err) => console.error("Auto-save failed:", err));
+        };
+        editor.on("update", handleUpdate);
+        return () => {
+            editor.off("update", handleUpdate);
+        };
+    }, [autoSave, editor]);
+    return (<div className="tetrons-toolbar">
+      {version !== "free" && (<div className="group">
+          <input type="checkbox" id="autoSave" checked={autoSave} onChange={(e) => setAutoSave(e.target.checked)}/>
+          <label htmlFor="autoSave">Auto Save</label>
+        </div>)}
+
+      {["pro", "premium", "platinum"].includes(version) && (<FileGroup editor={editor}/>)}
+      <ClipboardGroup editor={editor}/>
+      <FontStyleGroup editor={editor}/>
+      <ListAlignGroup editor={editor}/>
+      {["premium", "platinum"].includes(version) && (<>
+          <InsertGroup editor={editor}/>
+          <ActionGroup editor={editor}/>
+        </>)}
+      {version === "platinum" && <MiscGroup editor={editor}/>}
+    </div>);
+}

package/dist/components/tetrons/toolbar/ToolbarButton.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import type { IconType } from "react-icons";
+export type ToolbarButtonProps = {
+    icon: IconType;
+    onClick: () => void;
+    disabled?: boolean;
+    title?: string;
+    label?: string;
+    isActive?: boolean;
+};
+declare const ToolbarButton: React.ForwardRefExoticComponent<ToolbarButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default ToolbarButton;

package/dist/components/tetrons/toolbar/ToolbarButton.jsx

@@ -0,0 +1,8 @@
+import React from "react";
+const ToolbarButton = React.forwardRef(({ icon: Icon, onClick, disabled = false, title, label, isActive = false }, ref) => {
+    return (<button type="button" ref={ref} onClick={onClick} disabled={disabled} title={title !== null && title !== void 0 ? title : label} aria-label={title !== null && title !== void 0 ? title : label} className={`toolbar-button ${isActive ? "active" : ""}`}>
+        <Icon size={20}/>
+      </button>);
+});
+ToolbarButton.displayName = "ToolbarButton";
+export default ToolbarButton;

package/dist/components/tetrons/toolbar/extensions/Comment.d.ts

@@ -0,0 +1,17 @@
+import { Mark } from "@tiptap/core";
+export interface CommentOptions {
+    HTMLAttributes: {
+        class?: string;
+        style?: string;
+        [key: string]: unknown;
+    };
+}
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        comment: {
+            setComment: (comment: string) => ReturnType;
+            unsetComment: () => ReturnType;
+        };
+    }
+}
+export declare const Comment: Mark<CommentOptions, any>;

package/dist/components/tetrons/toolbar/extensions/Comment.js

@@ -0,0 +1,45 @@
+import { Mark, mergeAttributes } from "@tiptap/core";
+export const Comment = Mark.create({
+    name: "comment",
+    addOptions() {
+        return {
+            HTMLAttributes: {},
+        };
+    },
+    addAttributes() {
+        return {
+            comment: {
+                default: "",
+            },
+        };
+    },
+    parseHTML() {
+        return [
+            {
+                tag: "span[data-comment]",
+            },
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return [
+            "span",
+            mergeAttributes(HTMLAttributes, {
+                "data-comment": HTMLAttributes.comment,
+                class: "comment-highlight",
+                title: HTMLAttributes.comment,
+                style: "background-color: rgba(255, 230, 0, 0.3);",
+            }),
+            0,
+        ];
+    },
+    addCommands() {
+        return {
+            setComment: (comment) => ({ commands }) => {
+                return commands.setMark(this.name, { comment });
+            },
+            unsetComment: () => ({ commands }) => {
+                return commands.unsetMark(this.name);
+            },
+        };
+    },
+});

package/dist/components/tetrons/toolbar/extensions/Embed.d.ts

@@ -0,0 +1,2 @@
+import { Node } from "@tiptap/core";
+export declare const Embed: Node<any, any>;

package/dist/components/tetrons/toolbar/extensions/Embed.js

@@ -0,0 +1,90 @@
+import { Node, mergeAttributes } from "@tiptap/core";
+export const Embed = Node.create({
+    name: "embed",
+    group: "block",
+    atom: true,
+    addAttributes() {
+        return {
+            src: { default: null },
+            width: { default: 560 },
+            height: { default: 315 },
+        };
+    },
+    parseHTML() {
+        return [{ tag: "iframe[src]" }];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ["iframe", mergeAttributes(HTMLAttributes)];
+    },
+    addCommands() {
+        return {
+            setEmbed: ((attributes) => {
+                return ({ chain }) => {
+                    return chain()
+                        .insertContent({
+                        type: this.name,
+                        attrs: attributes,
+                    })
+                        .run();
+                };
+            }).bind(this),
+        };
+    },
+    addNodeView() {
+        return ({ node, getPos, editor }) => {
+            const container = document.createElement('div');
+            container.style.position = 'relative';
+            container.style.display = 'inline-block';
+            container.style.width = node.attrs.width + 'px';
+            container.style.height = node.attrs.height + 'px';
+            const iframe = document.createElement('iframe');
+            iframe.setAttribute('src', node.attrs.src);
+            iframe.setAttribute('frameborder', '0');
+            iframe.setAttribute('allowfullscreen', 'true');
+            iframe.style.width = '100%';
+            iframe.style.height = '100%';
+            container.appendChild(iframe);
+            const handle = document.createElement('div');
+            handle.style.position = 'absolute';
+            handle.style.width = '16px';
+            handle.style.height = '16px';
+            handle.style.right = '0';
+            handle.style.bottom = '0';
+            handle.style.cursor = 'se-resize';
+            handle.style.background = 'rgba(0,0,0,0.5)';
+            handle.style.borderRadius = '2px';
+            container.appendChild(handle);
+            let startX, startY, startWidth, startHeight;
+            const onMouseDown = (event) => {
+                event.preventDefault();
+                startX = event.clientX;
+                startY = event.clientY;
+                startWidth = container.offsetWidth;
+                startHeight = container.offsetHeight;
+                window.addEventListener('mousemove', onMouseMove);
+                window.addEventListener('mouseup', onMouseUp);
+            };
+            const onMouseMove = (event) => {
+                const newWidth = Math.max(100, startWidth + (event.clientX - startX));
+                const newHeight = Math.max(100, startHeight + (event.clientY - startY));
+                container.style.width = newWidth + 'px';
+                container.style.height = newHeight + 'px';
+            };
+            const onMouseUp = () => {
+                window.removeEventListener("mousemove", onMouseMove);
+                window.removeEventListener("mouseup", onMouseUp);
+                editor.commands.command(({ tr }) => {
+                    tr.setNodeMarkup(getPos(), undefined, Object.assign(Object.assign({}, node.attrs), { width: container.offsetWidth, height: container.offsetHeight }));
+                    return true;
+                });
+            };
+            handle.addEventListener('mousedown', onMouseDown);
+            return {
+                dom: container,
+                destroy() {
+                    handle.removeEventListener('mousedown', onMouseDown);
+                }
+            };
+        };
+    },
+});

package/dist/components/tetrons/toolbar/extensions/FontFamily.d.ts

@@ -0,0 +1,9 @@
+import { Mark } from '@tiptap/core';
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        fontFamily: {
+            setFontFamily: (font: string) => ReturnType;
+        };
+    }
+}
+export declare const FontFamily: Mark<any, any>;

package/dist/components/tetrons/toolbar/extensions/FontFamily.js

@@ -0,0 +1,28 @@
+import { Mark, mergeAttributes } from '@tiptap/core';
+export const FontFamily = Mark.create({
+    name: 'fontFamily',
+    addAttributes() {
+        return {
+            font: {
+                default: null,
+                parseHTML: element => element.style.fontFamily.replace(/['"]/g, ''),
+                renderHTML: attributes => {
+                    if (!attributes.font)
+                        return {};
+                    return { style: `font-family: ${attributes.font}` };
+                },
+            },
+        };
+    },
+    parseHTML() {
+        return [{ style: 'font-family' }];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ['span', mergeAttributes(HTMLAttributes), 0];
+    },
+    addCommands() {
+        return {
+            setFontFamily: font => ({ commands }) => commands.setMark(this.name, { font }),
+        };
+    },
+});

package/dist/components/tetrons/toolbar/extensions/FontSize.d.ts

@@ -0,0 +1,9 @@
+import { Mark } from "@tiptap/core";
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        fontSize: {
+            setFontSize: (size: string) => ReturnType;
+        };
+    }
+}
+export declare const FontSize: Mark<any, any>;

package/dist/components/tetrons/toolbar/extensions/FontSize.js

@@ -0,0 +1,28 @@
+import { Mark, mergeAttributes } from "@tiptap/core";
+export const FontSize = Mark.create({
+    name: "fontSize",
+    addAttributes() {
+        return {
+            size: {
+                default: null,
+                parseHTML: (element) => element.style.fontSize,
+                renderHTML: (attributes) => {
+                    if (!attributes.size)
+                        return {};
+                    return { style: `font-size: ${attributes.size}` };
+                },
+            },
+        };
+    },
+    parseHTML() {
+        return [{ style: "font-size" }];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ["span", mergeAttributes(HTMLAttributes), 0];
+    },
+    addCommands() {
+        return {
+            setFontSize: (size) => ({ commands }) => commands.setMark(this.name, { size }),
+        };
+    },
+});

package/dist/components/tetrons/toolbar/extensions/ResizableTable.d.ts

@@ -0,0 +1 @@
+export declare const ResizableTable: import("@tiptap/core").Node<import("@tiptap/extension-table").TableOptions, any>;

package/dist/components/tetrons/toolbar/extensions/ResizableTable.js

@@ -0,0 +1,11 @@
+import { Table } from "@tiptap/extension-table";
+import { columnResizing, tableEditing } from "prosemirror-tables";
+export const ResizableTable = Table.extend({
+    addOptions() {
+        var _a;
+        return Object.assign(Object.assign({}, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.call(this)), { resizable: true });
+    },
+    addProseMirrorPlugins() {
+        return [columnResizing({ handleWidth: 5 }), tableEditing()];
+    },
+});

package/dist/components/tetrons/toolbar/marks/Subscript.d.ts

@@ -0,0 +1,2 @@
+import { Mark } from "@tiptap/core";
+export declare const Subscript: Mark<any, any>;

package/dist/components/tetrons/toolbar/marks/Subscript.js

@@ -0,0 +1,35 @@
+import { Mark, markInputRule, markPasteRule } from "@tiptap/core";
+export const Subscript = Mark.create({
+    name: "subscript",
+    excludes: "superscript",
+    parseHTML() {
+        return [{ tag: "sub" }, { style: "vertical-align: sub" }];
+    },
+    renderHTML() {
+        return ["sub", 0];
+    },
+    addCommands() {
+        return {
+            toggleSubscript: () => ({ chain }) => chain()
+                .unsetMark("superscript")
+                .toggleMark(this.name)
+                .run(),
+        };
+    },
+    addInputRules() {
+        return [
+            markInputRule({
+                find: /~([^~]+)~/,
+                type: this.type,
+            }),
+        ];
+    },
+    addPasteRules() {
+        return [
+            markPasteRule({
+                find: /~([^~]+)~/g,
+                type: this.type,
+            }),
+        ];
+    },
+});

package/dist/components/tetrons/toolbar/marks/Superscript.d.ts

@@ -0,0 +1,2 @@
+import { Mark } from "@tiptap/core";
+export declare const Superscript: Mark<any, any>;

package/dist/components/tetrons/toolbar/marks/Superscript.js

@@ -0,0 +1,35 @@
+import { Mark, markInputRule, markPasteRule } from "@tiptap/core";
+export const Superscript = Mark.create({
+    name: "superscript",
+    excludes: "subscript",
+    parseHTML() {
+        return [{ tag: "sup" }, { style: "vertical-align: super" }];
+    },
+    renderHTML() {
+        return ["sup", 0];
+    },
+    addCommands() {
+        return {
+            toggleSuperscript: () => ({ chain }) => chain()
+                .unsetMark("subscript")
+                .toggleMark(this.name)
+                .run(),
+        };
+    },
+    addInputRules() {
+        return [
+            markInputRule({
+                find: /\^([^^]+)\^/,
+                type: this.type,
+            }),
+        ];
+    },
+    addPasteRules() {
+        return [
+            markPasteRule({
+                find: /\^([^^]+)\^/g,
+                type: this.type,
+            }),
+        ];
+    },
+});

package/dist/index.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
-
-type EditorContentProps = {
-    apiKey: string;
-};
-declare function EditorContent({ apiKey }: EditorContentProps): React.JSX.Element;
-
-export { EditorContent, EditorContent as default };
+import EditorContent from "./components/tetrons/EditorContent";
+import "./styles/tetrons.css";
+export declare function initializeTetrons(apiKey: string): Promise<void>;
+export declare function getTetronsVersion(): "" | "free" | "pro" | "premium" | "platinum";
+export declare function isApiKeyValid(): boolean;
+export { EditorContent };
+export default EditorContent;