tetrons 2.2.3 → 2.2.5

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

@@ -0,0 +1,163 @@
+"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="insert-group">
+      <input type="file" accept="image/*" ref={imageInputRef} className="hidden-input" onChange={handleImageUpload} aria-label="Upload Image" title="Upload Image"/>
+      <input type="file" accept="video/*" ref={videoInputRef} className="hidden-input" onChange={handleVideoUpload} aria-label="Upload Video" title="Upload Video"/>
+
+      <ToolbarButton icon={MdTableChart} label="Insert Table" onClick={() => setShowTableGrid(!showTableGrid)}/>
+      {showTableGrid && (<div className="table-grid-popup" onMouseLeave={() => setShowTableGrid(false)}>
+          <div className="table-grid">
+            {[...Array(10)].map((_, row) => [...Array(10)].map((_, col) => {
+                const isSelected = row < selectedRows && col < selectedCols;
+                return (<div key={`${row}-${col}`} className={`table-grid-cell ${isSelected ? "selected" : ""}`} onMouseEnter={() => handleTableCellHover(row + 1, col + 1)} onClick={() => handleTableInsert(row + 1, col + 1)}/>);
+            }))}
+          </div>
+          <div className="table-grid-label">
+            {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="emoji-picker">
+            <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.d.ts

@@ -1,4 +1,5 @@
+import React from "react";
 import { Editor } from "@tiptap/react";
 export default function ListAlignGroup({ editor }: {
     editor: Editor;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;

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

@@ -0,0 +1,16 @@
+"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="list-align-group">
+      <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.d.ts

@@ -1,6 +1,7 @@
+import React from "react";
 import { Editor } from "@tiptap/react";
 interface MiscGroupProps {
     editor: Editor;
 }
-export default function MiscGroup({ editor }: MiscGroupProps): import("react/jsx-runtime").JSX.Element;
+export default function MiscGroup({ editor }: MiscGroupProps): React.JSX.Element;
 export {};

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

@@ -0,0 +1,31 @@
+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="misc-group">
+      <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/TableContextMenu.d.ts

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

package/dist/components/tetrons/toolbar/{TableContextMenu.js → TableContextMenu.jsx}

@@ -1,6 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 export default function TableContextMenu({ editor }) {
     const [menuPosition, setMenuPosition] = useState(null);
     useEffect(() => {
@@ -30,5 +29,24 @@ export default function TableContextMenu({ editor }) {
     const deleteCol = () => editor.chain().focus().deleteColumn().run();
     if (!menuPosition)
         return null;
-    return (_jsxs("ul", { className: "absolute bg-white shadow border rounded text-sm z-50", style: { top: menuPosition.y, left: menuPosition.x }, children: [_jsx("li", { className: "px-3 py-1 hover:bg-gray-100 cursor-pointer", onClick: insertRowAbove, children: "Insert Row Above" }), _jsx("li", { className: "px-3 py-1 hover:bg-gray-100 cursor-pointer", onClick: insertRowBelow, children: "Insert Row Below" }), _jsx("li", { className: "px-3 py-1 hover:bg-gray-100 cursor-pointer", onClick: insertColLeft, children: "Insert Column Left" }), _jsx("li", { className: "px-3 py-1 hover:bg-gray-100 cursor-pointer", onClick: insertColRight, children: "Insert Column Right" }), _jsx("li", { className: "px-3 py-1 hover:bg-red-100 cursor-pointer", onClick: deleteRow, children: "Delete Row" }), _jsx("li", { className: "px-3 py-1 hover:bg-red-100 cursor-pointer", onClick: deleteCol, children: "Delete Column" })] }));
+    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

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

package/dist/components/tetrons/toolbar/{TetronsToolbar.js → TetronsToolbar.jsx}

@@ -1,5 +1,4 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect } from "react";
 import ActionGroup from "./ActionGroup";
 import ClipboardGroup from "./ClipboardGroup";
@@ -28,5 +27,18 @@ export default function TetronsToolbar({ editor }) {
             editor.off("update", handleUpdate);
         };
     }, [autoSave, editor]);
-    return (_jsxs("div", { className: "tetrons-toolbar", children: [_jsxs("div", { className: "group", children: [_jsx("input", { type: "checkbox", id: "autoSave", checked: autoSave, onChange: (e) => setAutoSave(e.target.checked) }), _jsx("label", { htmlFor: "autoSave", children: "Auto Save" })] }), _jsx(FileGroup, { editor: editor }), _jsx(ClipboardGroup, { editor: editor }), _jsx(FontStyleGroup, { editor: editor }), _jsx(ListAlignGroup, { editor: editor }), _jsx(InsertGroup, { editor: editor }), _jsx(MiscGroup, { editor: editor }), _jsx(ActionGroup, { editor: editor })] }));
+    return (<div className="tetrons-toolbar">
+      <div className="group">
+        <input type="checkbox" id="autoSave" checked={autoSave} onChange={(e) => setAutoSave(e.target.checked)}/>
+        <label htmlFor="autoSave">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/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/index.d.mts

@@ -1,5 +1,8 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
 
-declare function EditorContent(): react_jsx_runtime.JSX.Element;
+type EditorContentProps = {
+    apiKey: string;
+};
+declare function EditorContent({ apiKey }: EditorContentProps): React.JSX.Element;
 
 export { EditorContent, EditorContent as default };