tetrons 2.2.1 → 2.2.3

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "tetrons",
-  "version": "2.2.1",
+  "version": "2.2.3",
   "description": "A Next.js project written in TypeScript",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "dev": "next dev --turbo",
-    "build": "tsup src/index.ts --format esm,cjs --dts --out-dir dist",
+    "build": "tsup src/index.ts --format esm,cjs --dts --out-dir dist && copyfiles -u 1 src/styles/*.css dist/styles",
     "start": "next start",
     "lint": "next lint"
   },
@@ -42,6 +42,7 @@
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "copyfiles": "^2.4.1",
     "eslint": "^9",
     "eslint-config-next": "^15.3.2",
     "tailwindcss": "^4",
@@ -65,10 +66,12 @@
       "import": "./dist/index.js",
       "require": "./dist/index.js",
       "types": "./dist/index.d.ts"
-    }
+    },
+    "./style.css": "./dist/styles/tetrons.css"
   },
   "files": [
-    "dist"
+    "dist",
+    "dist/styles/tetrons.css"
   ],
   "bugs": {
     "url": "https://github.com/your-repo/tetrons/issues"

package/dist/app/page.jsx

@@ -1,8 +0,0 @@
-import EditorContent from "../components/tetrons/EditorContent";
-export default function Home() {
-    return (<main className="flex flex-col h-screen overflow-hidden">
-      <div className="flex-1 overflow-auto flex flex-col">
-        <EditorContent />
-      </div>
-    </main>);
-}

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

@@ -1,36 +0,0 @@
-import { MdContentPaste, MdContentCut, MdContentCopy, MdFormatPaint, } from "react-icons/md";
-import React from "react";
-import ToolbarButton from "./ToolbarButton";
-export default function ClipboardGroup({ editor }) {
-    return (<div className="flex gap-1 border-r pr-3">
-      <ToolbarButton icon={MdContentPaste} title="Paste" onClick={async () => {
-            try {
-                const text = await navigator.clipboard.readText();
-                editor.chain().focus().insertContent(text).run();
-            }
-            catch (error) {
-                console.error("Failed to read clipboard contents:", error);
-            }
-        }}/>
-      <ToolbarButton icon={MdContentCut} title="Cut" onClick={() => {
-            const { from, to } = editor.state.selection;
-            if (from === to)
-                return;
-            const selectedText = editor.state.doc.textBetween(from, to);
-            navigator.clipboard.writeText(selectedText).then(() => {
-                editor.chain().focus().deleteRange({ from, to }).run();
-            });
-        }}/>
-      <ToolbarButton icon={MdContentCopy} title="Copy" onClick={() => {
-            const { from, to } = editor.state.selection;
-            if (from === to)
-                return;
-            const selectedText = editor.state.doc.textBetween(from, to);
-            navigator.clipboard.writeText(selectedText);
-        }}/>
-      <ToolbarButton icon={MdFormatPaint} title="Format Painter" onClick={() => {
-            const currentMarks = editor.getAttributes("textStyle");
-            localStorage.setItem("formatPainter", JSON.stringify(currentMarks));
-        }}/>
-    </div>);
-}

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

@@ -1,104 +0,0 @@
-"use client";
-import { MdFormatBold, MdFormatItalic, MdFormatUnderlined, MdStrikethroughS, MdSubscript, MdSuperscript, MdFormatClear, MdFormatPaint, } from "react-icons/md";
-import { ImTextColor } from "react-icons/im";
-import { BiSolidColorFill } from "react-icons/bi";
-import ToolbarButton from "./ToolbarButton";
-import React, { useEffect, useState } from "react";
-export default function FontStyleGroup({ editor }) {
-    const [textColor, setTextColor] = useState("#000000");
-    const [highlightColor, setHighlightColor] = useState("#ffff00");
-    const [fontFamily, setFontFamily] = useState("Arial");
-    const [fontSize, setFontSize] = useState("16px");
-    useEffect(() => {
-        if (!editor)
-            return;
-        const updateStates = () => {
-            var _a, _b, _c;
-            const highlight = editor.getAttributes("highlight");
-            setHighlightColor((highlight === null || highlight === void 0 ? void 0 : highlight.color) || "#ffff00");
-            const color = (_a = editor.getAttributes("textStyle")) === null || _a === void 0 ? void 0 : _a.color;
-            setTextColor(color || "#000000");
-            const fontAttr = ((_b = editor.getAttributes("fontFamily")) === null || _b === void 0 ? void 0 : _b.font) || "Arial";
-            setFontFamily(fontAttr);
-            const sizeAttr = ((_c = editor.getAttributes("fontSize")) === null || _c === void 0 ? void 0 : _c.size) || "16px";
-            setFontSize(sizeAttr);
-        };
-        updateStates();
-        editor.on("selectionUpdate", updateStates);
-        editor.on("transaction", updateStates);
-        return () => {
-            editor.off("selectionUpdate", updateStates);
-            editor.off("transaction", updateStates);
-        };
-    }, [editor]);
-    return (<div className="flex gap-1 border-r pr-3 items-center">
-      <select title="Font Family" className="text-sm border rounded px-1 py-0.5 mr-2" value={fontFamily} onChange={(e) => {
-            const value = e.target.value;
-            setFontFamily(value);
-            editor.chain().focus().setFontFamily(value).run();
-        }}>
-        <option value="Arial">Arial</option>
-        <option value="Georgia">Georgia</option>
-        <option value="Times New Roman">Times New Roman</option>
-        <option value="Courier New">Courier New</option>
-        <option value="Verdana">Verdana</option>
-      </select>
-
-      <select title="Font Size" className="text-sm border rounded px-1 py-0.5 mr-2" value={fontSize} onChange={(e) => {
-            const value = e.target.value;
-            setFontSize(value);
-            editor.chain().focus().setFontSize(value).run();
-        }}>
-        <option value="12px">12</option>
-        <option value="14px">14</option>
-        <option value="16px">16</option>
-        <option value="18px">18</option>
-        <option value="24px">24</option>
-        <option value="36px">36</option>
-        <option value="48px">48</option>
-        <option value="64px">64</option>
-        <option value="72px">72</option>
-      </select>
-
-      <ToolbarButton icon={MdFormatBold} label="Bold" onClick={() => editor.chain().focus().toggleBold().run()} isActive={editor.isActive("bold")}/>
-      <ToolbarButton icon={MdFormatItalic} label="Italic" onClick={() => editor.chain().focus().toggleItalic().run()} isActive={editor.isActive("italic")}/>
-      <ToolbarButton icon={MdFormatUnderlined} label="Underline" onClick={() => editor.chain().focus().toggleUnderline().run()} isActive={editor.isActive("underline")}/>
-      <ToolbarButton icon={MdStrikethroughS} label="Strikethrough" onClick={() => editor.chain().focus().toggleStrike().run()} isActive={editor.isActive("strike")}/>
-      <ToolbarButton icon={MdSubscript} label="Subscript" onClick={() => editor.chain().focus().toggleSubscript().run()} isActive={editor.isActive("subscript")}/>
-      <ToolbarButton icon={MdSuperscript} label="Superscript" onClick={() => editor.chain().focus().toggleSuperscript().run()} isActive={editor.isActive("superscript")}/>
-
-      <label title="Font Color" aria-label="Font Color" className="relative w-8 h-8 flex items-center justify-center cursor-pointer color-label" style={{ "--indicator-color": textColor }}>
-        <ImTextColor size={20} className="text-gray-700"/>
-        <div className="color-indicator"/>
-        <input type="color" value={textColor} onChange={(e) => {
-            const color = e.target.value;
-            setTextColor(color);
-            editor.chain().focus().setColor(color).run();
-        }} className="absolute inset-0 opacity-0 cursor-pointer"/>
-      </label>
-
-      <label title="Highlight Color" aria-label="Highlight Color" className="relative w-8 h-8 flex items-center justify-center cursor-pointer color-label" style={{ "--indicator-color": highlightColor }}>
-        <BiSolidColorFill size={20} className="text-gray-700"/>
-        <div className="color-indicator"/>
-        <input type="color" value={highlightColor} onChange={(e) => {
-            const color = e.target.value;
-            setHighlightColor(color);
-            editor.chain().focus().setHighlight({ color }).run();
-        }} className="absolute inset-0 opacity-0 cursor-pointer"/>
-      </label>
-
-      <ToolbarButton icon={MdFormatClear} label="Clear Formatting" onClick={() => editor.chain().focus().unsetAllMarks().run()}/>
-      <ToolbarButton icon={MdFormatPaint} label="Apply Painter Format" onClick={() => {
-            const format = JSON.parse(localStorage.getItem("formatPainter") || "{}");
-            if (format.color)
-                editor.chain().focus().setColor(format.color).run();
-            if (format.backgroundColor) {
-                editor
-                    .chain()
-                    .focus()
-                    .setHighlight({ color: format.backgroundColor })
-                    .run();
-            }
-        }}/>
-    </div>);
-}

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

@@ -1,162 +0,0 @@
-"use client";
-import React, { useRef, useState } from "react";
-import { MdTableChart, MdInsertPhoto, MdInsertLink, MdInsertComment, MdInsertEmoticon, MdHorizontalRule, MdVideoLibrary, MdOutlineOndemandVideo, } from "react-icons/md";
-import ToolbarButton from "./ToolbarButton";
-import Picker from "@emoji-mart/react";
-export default function InsertGroup({ editor }) {
-    const [showTableGrid, setShowTableGrid] = useState(false);
-    const [selectedRows, setSelectedRows] = useState(1);
-    const [selectedCols, setSelectedCols] = useState(1);
-    const imageInputRef = useRef(null);
-    const videoInputRef = useRef(null);
-    const [showPicker, setShowPicker] = useState(false);
-    const addEmoji = (emoji) => {
-        editor.chain().focus().insertContent(emoji.native).run();
-        setShowPicker(false);
-    };
-    const handleTableCellHover = (row, col) => {
-        setSelectedRows(row);
-        setSelectedCols(col);
-    };
-    const handleTableInsert = (rows, cols) => {
-        editor
-            .chain()
-            .focus()
-            .insertTable({
-            rows: rows || 1,
-            cols: cols || 1,
-            withHeaderRow: true,
-        })
-            .run();
-        setShowTableGrid(false);
-        setSelectedRows(1);
-        setSelectedCols(1);
-    };
-    const handleImageUpload = (e) => {
-        var _a;
-        const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
-        if (file) {
-            const reader = new FileReader();
-            reader.onload = () => {
-                editor
-                    .chain()
-                    .focus()
-                    .setImage({ src: reader.result })
-                    .run();
-            };
-            reader.readAsDataURL(file);
-        }
-    };
-    const handleVideoUpload = (e) => {
-        var _a;
-        const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
-        if (file) {
-            const reader = new FileReader();
-            reader.onload = () => {
-                editor
-                    .chain()
-                    .focus()
-                    .setVideo({ src: reader.result, controls: true })
-                    .run();
-            };
-            reader.readAsDataURL(file);
-        }
-    };
-    function normalizeEmbedUrl(url) {
-        try {
-            const u = new URL(url);
-            const hostname = u.hostname.replace("www.", "").toLowerCase();
-            if (hostname === "youtube.com" || hostname === "youtu.be") {
-                let videoId = u.searchParams.get("v");
-                if (!videoId && hostname === "youtu.be") {
-                    videoId = u.pathname.slice(1);
-                }
-                if (videoId) {
-                    return `https://www.youtube.com/embed/${videoId}`;
-                }
-            }
-            if (hostname === "vimeo.com") {
-                const videoId = u.pathname.split("/")[1];
-                if (videoId) {
-                    return `https://player.vimeo.com/video/${videoId}`;
-                }
-            }
-            if (hostname === "google.com" ||
-                hostname === "maps.google.com" ||
-                hostname === "goo.gl") {
-                if (url.includes("/maps/embed")) {
-                    return url;
-                }
-                return url.replace("/maps/", "/maps/embed/");
-            }
-            return url;
-        }
-        catch (_a) {
-            return url;
-        }
-    }
-    return (<div className="flex gap-1 border-r pr-3 relative">
-      <input type="file" accept="image/*" ref={imageInputRef} className="hidden" onChange={handleImageUpload} aria-label="Upload Image" title="Upload Image"/>
-      <input type="file" accept="video/*" ref={videoInputRef} className="hidden" onChange={handleVideoUpload} aria-label="Upload Video" title="Upload Video"/>
-
-      <ToolbarButton icon={MdTableChart} label="Insert Table" onClick={() => setShowTableGrid(!showTableGrid)}/>
-      {showTableGrid && (<div className="absolute top-10 left-0 bg-white border rounded shadow p-2 z-20" onMouseLeave={() => setShowTableGrid(false)}>
-          <div className="grid grid-cols-10 gap-[1px]">
-            {[...Array(10)].map((_, row) => [...Array(10)].map((_, col) => {
-                const isSelected = row < selectedRows && col < selectedCols;
-                return (<div key={`${row}-${col}`} className={`w-5 h-5 border cursor-pointer ${isSelected ? "bg-blue-500" : "bg-gray-100"}`} onMouseEnter={() => handleTableCellHover(row + 1, col + 1)} onClick={() => handleTableInsert(row + 1, col + 1)}/>);
-            }))}
-          </div>
-          <div className="text-sm mt-2 text-center text-gray-600">
-            {selectedRows} x {selectedCols}
-          </div>
-        </div>)}
-
-      <ToolbarButton icon={MdInsertPhoto} label="Insert Image" onClick={() => { var _a; return (_a = imageInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }}/>
-      <ToolbarButton icon={MdVideoLibrary} label="Insert Video" onClick={() => { var _a; return (_a = videoInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }}/>
-      <ToolbarButton icon={MdInsertLink} label="Insert Link" onClick={() => {
-            const url = prompt("Enter URL");
-            if (url)
-                editor
-                    .chain()
-                    .focus()
-                    .extendMarkRange("link")
-                    .setLink({ href: url })
-                    .run();
-        }}/>
-      <ToolbarButton icon={MdInsertComment} label="Insert Comment" onClick={() => {
-            const comment = prompt("Enter your comment");
-            if (comment &&
-                editor.can().chain().focus().setComment(comment).run()) {
-                editor.chain().focus().setComment(comment).run();
-            }
-            else {
-                console.warn("Cannot apply comment — maybe no selection?");
-            }
-        }}/>
-      <div className="relative">
-        <ToolbarButton icon={MdInsertEmoticon} label="Emoji" onClick={() => setShowPicker(!showPicker)}/>
-        {showPicker && (<div className="absolute z-50 top-10 left-0">
-            <Picker onEmojiSelect={addEmoji} theme="auto" emoji="point_up" showPreview={false} showSkinTones={true} emojiTooltip={true}/>
-          </div>)}
-      </div>
-      <ToolbarButton icon={MdHorizontalRule} label="Horizontal Line" onClick={() => editor.chain().focus().setHorizontalRule().run()}/>
-      <ToolbarButton icon={MdOutlineOndemandVideo} label="Embed" onClick={() => {
-            const url = prompt("Enter embed URL (YouTube, Vimeo, Google Maps, etc.)");
-            if (!url)
-                return;
-            const embedUrl = normalizeEmbedUrl(url);
-            const width = prompt("Enter width in pixels", "560");
-            const height = prompt("Enter height in pixels", "315");
-            editor
-                .chain()
-                .focus()
-                .setEmbed({
-                src: embedUrl,
-                width: width ? parseInt(width) : 560,
-                height: height ? parseInt(height) : 315,
-            })
-                .run();
-        }}/>
-    </div>);
-}

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

@@ -1,16 +0,0 @@
-"use client";
-import React from "react";
-import { MdFormatListBulleted, MdFormatListNumbered, MdFormatIndentDecrease, MdFormatIndentIncrease, MdFormatAlignLeft, MdFormatAlignCenter, MdFormatAlignRight, MdFormatAlignJustify, } from "react-icons/md";
-import ToolbarButton from "./ToolbarButton";
-export default function ListAlignGroup({ editor }) {
-    return (<div className="flex gap-1 border-r pr-3">
-      <ToolbarButton icon={MdFormatListBulleted} title="Bulleted List" onClick={() => editor.chain().focus().toggleBulletList().run()} disabled={!editor.can().toggleBulletList()}/>
-      <ToolbarButton icon={MdFormatListNumbered} title="Numbered List" onClick={() => editor.chain().focus().toggleOrderedList().run()} disabled={!editor.can().toggleOrderedList()}/>
-      <ToolbarButton icon={MdFormatIndentIncrease} title="Increase Indent" onClick={() => editor.chain().focus().sinkListItem("listItem").run()} disabled={!editor.can().sinkListItem("listItem")}/>
-      <ToolbarButton icon={MdFormatIndentDecrease} title="Decrease Indent" onClick={() => editor.chain().focus().liftListItem("listItem").run()} disabled={!editor.can().liftListItem("listItem")}/>
-      <ToolbarButton icon={MdFormatAlignLeft} title="Align Left" onClick={() => editor.chain().focus().setTextAlign("left").run()} disabled={!editor.can().setTextAlign("left")}/>
-      <ToolbarButton icon={MdFormatAlignCenter} title="Align Center" onClick={() => editor.chain().focus().setTextAlign("center").run()} disabled={!editor.can().setTextAlign("center")}/>
-      <ToolbarButton icon={MdFormatAlignRight} title="Align Right" onClick={() => editor.chain().focus().setTextAlign("right").run()} disabled={!editor.can().setTextAlign("right")}/>
-      <ToolbarButton icon={MdFormatAlignJustify} title="Justify" onClick={() => editor.chain().focus().setTextAlign("justify").run()} disabled={!editor.can().setTextAlign("justify")}/>
-    </div>);
-}

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

@@ -1,31 +0,0 @@
-import React from "react";
-import { MdUndo, MdRedo, MdRefresh, MdVisibility, MdCode, } from "react-icons/md";
-import ToolbarButton from "./ToolbarButton";
-export default function MiscGroup({ editor }) {
-    const handlePreview = () => {
-        const html = editor.getHTML();
-        const previewWindow = window.open("", "_blank");
-        if (previewWindow) {
-            previewWindow.document.open();
-            previewWindow.document.write(`
-        <html>
-          <head>
-            <title>Preview</title>
-            <style>
-              body { font-family: sans-serif; padding: 2rem; line-height: 1.6; }
-            </style>
-          </head>
-          <body>${html}</body>
-        </html>
-      `);
-            previewWindow.document.close();
-        }
-    };
-    return (<div className="flex gap-1 items-center border-r pr-3">
-      <ToolbarButton icon={MdUndo} label="Undo" onClick={() => editor.chain().focus().undo().run()} disabled={!editor.can().undo()}/>
-      <ToolbarButton icon={MdRedo} label="Redo" onClick={() => editor.chain().focus().redo().run()} disabled={!editor.can().redo()}/>
-      <ToolbarButton icon={MdRefresh} label="Reset Formatting" onClick={() => editor.chain().focus().unsetAllMarks().clearNodes().run()}/>
-      <ToolbarButton icon={MdCode} label="Toggle Code Block" onClick={() => editor.chain().focus().toggleCodeBlock().run()} isActive={editor.isActive("codeBlock")}/>
-      <ToolbarButton icon={MdVisibility} label="Preview" onClick={handlePreview}/>
-    </div>);
-}

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

@@ -1,8 +0,0 @@
-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;