tetrons 2.2.2 → 2.2.3

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

@@ -1,163 +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="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.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="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.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="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/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;