tetrons 0.1.0 → 0.1.1

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

@@ -0,0 +1,52 @@
+"use client";
+import { 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/src/components/tetrons/toolbar/TetronsToolbar.d.ts

@@ -0,0 +1,4 @@
+import type { Editor } from "@tiptap/react";
+export default function TetronsToolbar({ editor }: {
+    editor: Editor;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,46 @@
+"use client";
+import { useState, useEffect } 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 }) {
+    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="flex flex-wrap items-center gap-4 p-3 border-b bg-white shadow-sm relative z-10">
+      <div className="flex items-center gap-2 border-r pr-3">
+        <input type="checkbox" id="autoSave" checked={autoSave} onChange={(e) => setAutoSave(e.target.checked)} className="w-4 h-4"/>
+        <label htmlFor="autoSave" className="text-sm select-none">
+          Auto Save
+        </label>
+      </div>
+
+      <FileGroup editor={editor}/>
+      <ClipboardGroup editor={editor}/>
+      <FontStyleGroup editor={editor}/>
+      <ListAlignGroup editor={editor}/>
+      <InsertGroup editor={editor}/>
+      <MiscGroup editor={editor}/>
+      <ActionGroup editor={editor}/>
+    </div>);
+}

package/dist/src/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/src/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={`p-2 rounded hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed ${isActive ? "bg-gray-300" : ""}`}>
+        <Icon size={20}/>
+      </button>);
+});
+ToolbarButton.displayName = "ToolbarButton";
+export default ToolbarButton;

package/dist/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/index.d.ts

@@ -0,0 +1 @@
+export { default as EditorContent } from "./components/tetrons/EditorContent";

package/dist/src/index.js

@@ -0,0 +1,2 @@
+export { default as EditorContent } from "./components/tetrons/EditorContent";
+// import { EditorContent } from "tetrons";

package/dist/src/lib/export.js

@@ -0,0 +1 @@
+"use strict";

package/dist/src/lib/tiptap-extensions.js

@@ -0,0 +1 @@
+"use strict";

package/dist/src/utils/loadEmojiPicker.d.ts

@@ -0,0 +1 @@
+export declare const loadEmojiPicker: () => void;

package/dist/src/utils/loadEmojiPicker.js

@@ -0,0 +1,12 @@
+export const loadEmojiPicker = () => {
+    if (typeof window === "undefined")
+        return;
+    if (!window.EmojiButton && !document.getElementById("emoji-picker-script")) {
+        const script = document.createElement("script");
+        script.id = "emoji-picker-script";
+        script.src =
+            "https://cdn.jsdelivr.net/npm/@joeattardi/emoji-button@latest/dist/index.min.js";
+        script.async = true;
+        document.body.appendChild(script);
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tetrons",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A Next.js project written in TypeScript",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/app/api/export/route.ts

@@ -0,0 +1,4 @@
+export function GET(req: Request): Response {
+    console.log(req.method); // Example usage
+    return new Response("Hello, world!", { status: 200 });
+  }

package/src/types/global.d.ts

@@ -1,6 +1,13 @@
-declare global {
+interface EmojiButtonType {
+    showPicker: () => void;
+    hidePicker: () => void;
+  }
+  declare module "@/components/tetrons/EditorContent";
+  
+  declare global {
     interface Window {
-      EmojiButton?: any;
+      EmojiButton?: EmojiButtonType;
     }
   }
+  
   export {};

package/tsconfig.json

@@ -1,41 +1,57 @@
-{
-  "compilerOptions": {
-    "target": "ES2017",
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "forceConsistentCasingInFileNames": true,
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    },
-    "typeRoots": [
-      "./types",
-      "./src/types",
-      "./node_modules/@types"
-    ],
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ]
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts",
-    "src/types/**/*.d.ts",
-    "types/**/*.d.ts"
-  ],
-  "exclude": ["node_modules"]
-}
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ESNext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": false,
+    "declaration": true,
+    "emitDeclarationOnly": false,
+    "outDir": "dist",
+    "esModuleInterop": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/": [
+        "./src/"
+      ],
+      "tetrons": [
+        "./node_modules/tetrons"
+      ]
+    },
+    "typeRoots": [
+      "./types",
+      "./src/types",
+      "./node_modules/@types"
+    ],
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    ".next/types/**/.ts",
+    "/*.ts",
+    "/.tsx",
+    "next-env.d.ts",
+    "src/types//*.d.ts",
+    "types//*.d.ts",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}