tetrons 0.1.0 → 2.1.1

package/src/components/tetrons/toolbar/ClipboardGroup.tsx

@@ -1,57 +0,0 @@
-import {
-  MdContentPaste,
-  MdContentCut,
-  MdContentCopy,
-  MdFormatPaint,
-} from "react-icons/md";
-import { Editor } from "@tiptap/react";
-import ToolbarButton from "./ToolbarButton";
-
-export default function ClipboardGroup({ editor }: { editor: 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/src/components/tetrons/toolbar/FileGroup.tsx

@@ -1,70 +0,0 @@
-"use client";
-
-import { Editor } from "@tiptap/react";
-import { FaRegFolderOpen } from "react-icons/fa";
-import { VscNewFile } from "react-icons/vsc";
-import ToolbarButton from "./ToolbarButton";
-import { useRef } from "react";
-
-type FileGroupProps = {
-  editor: Editor;
-};
-
-export default function FileGroup({ editor }: FileGroupProps) {
-  const fileInputRef = useRef<HTMLInputElement>(null);
-
-  const handleNew = () => {
-    if (
-      confirm(
-        "Are you sure you want to create a new document? Unsaved changes will be lost."
-      )
-    ) {
-      editor.commands.clearContent();
-    }
-  };
-
-  const handleOpen = () => {
-    fileInputRef.current?.click();
-  };
-
-  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (!file) return;
-
-    try {
-      const text = await file.text();
-      const json = JSON.parse(text);
-      editor.commands.setContent(json);
-    } catch (error) {
-      console.error("Error reading file:", error);
-      alert(
-        "Failed to open or parse the file. Make sure it's a valid JSON file."
-      );
-    } finally {
-      e.target.value = "";
-    }
-  };
-
-  return (
-    <div
-      className="flex items-center gap-1 border-r pr-3"
-      role="group"
-      aria-label="File actions"
-    >
-      <input
-        type="file"
-        accept=".json"
-        ref={fileInputRef}
-        onChange={handleFileChange}
-        className="hidden"
-        aria-label="Open JSON file"
-      />
-      <ToolbarButton icon={VscNewFile} onClick={handleNew} title="New" />
-      <ToolbarButton
-        icon={FaRegFolderOpen}
-        onClick={handleOpen}
-        title="Open File"
-      />
-    </div>
-  );
-}

package/src/components/tetrons/toolbar/FontStyleGroup.tsx

@@ -1,198 +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 { Editor } from "@tiptap/react";
-import ToolbarButton from "./ToolbarButton";
-import { useEffect, useState } from "react";
-
-interface FontStyleGroupProps {
-  editor: Editor;
-}
-
-export default function FontStyleGroup({ editor }: FontStyleGroupProps) {
-  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 = () => {
-      const highlight = editor.getAttributes("highlight");
-      setHighlightColor(highlight?.color || "#ffff00");
-
-      const color = editor.getAttributes("textStyle")?.color;
-      setTextColor(color || "#000000");
-
-      const fontAttr = editor.getAttributes("fontFamily")?.font || "Arial";
-      setFontFamily(fontAttr);
-
-      const sizeAttr = editor.getAttributes("fontSize")?.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 } as React.CSSProperties}
-      >
-        <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 } as React.CSSProperties}
-      >
-        <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/src/components/tetrons/toolbar/InsertGroup.tsx

@@ -1,268 +0,0 @@
-"use client";
-
-import React, { useRef, useState } from "react";
-import {
-  MdTableChart,
-  MdInsertPhoto,
-  MdInsertLink,
-  MdInsertComment,
-  MdInsertEmoticon,
-  MdHorizontalRule,
-  MdVideoLibrary,
-  MdOutlineOndemandVideo,
-} from "react-icons/md";
-import { Editor } from "@tiptap/react";
-import ToolbarButton from "./ToolbarButton";
-import Picker from "@emoji-mart/react";
-
-type Emoji = {
-  native: string;
-};
-
-export default function InsertGroup({ editor }: { editor: Editor }) {
-  const [showTableGrid, setShowTableGrid] = useState(false);
-  const [selectedRows, setSelectedRows] = useState(1);
-  const [selectedCols, setSelectedCols] = useState(1);
-
-  const imageInputRef = useRef<HTMLInputElement>(null);
-  const videoInputRef = useRef<HTMLInputElement>(null);
-
-  const [showPicker, setShowPicker] = useState(false);
-
-  const addEmoji = (emoji: Emoji) => {
-    editor.chain().focus().insertContent(emoji.native).run();
-    setShowPicker(false);
-  };
-
-  const handleTableCellHover = (row: number, col: number) => {
-    setSelectedRows(row);
-    setSelectedCols(col);
-  };
-
-  const handleTableInsert = (rows: number, cols: number) => {
-    editor
-      .chain()
-      .focus()
-      .insertTable({
-        rows: rows || 1,
-        cols: cols || 1,
-        withHeaderRow: true,
-      })
-      .run();
-
-    setShowTableGrid(false);
-    setSelectedRows(1);
-    setSelectedCols(1);
-  };
-
-  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (file) {
-      const reader = new FileReader();
-      reader.onload = () => {
-        editor
-          .chain()
-          .focus()
-          .setImage({ src: reader.result as string })
-          .run();
-      };
-      reader.readAsDataURL(file);
-    }
-  };
-
-  const handleVideoUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (file) {
-      const reader = new FileReader();
-      reader.onload = () => {
-        editor
-          .chain()
-          .focus()
-          .setVideo({ src: reader.result as string, controls: true })
-          .run();
-      };
-      reader.readAsDataURL(file);
-    }
-  };
-
-  function normalizeEmbedUrl(url: string): string {
-    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 {
-      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={() => imageInputRef.current?.click()}
-      />
-      <ToolbarButton
-        icon={MdVideoLibrary}
-        label="Insert Video"
-        onClick={() => videoInputRef.current?.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/src/components/tetrons/toolbar/ListAlignGroup.tsx

@@ -1,69 +0,0 @@
-"use client";
-
-import {
-  MdFormatListBulleted,
-  MdFormatListNumbered,
-  MdFormatIndentDecrease,
-  MdFormatIndentIncrease,
-  MdFormatAlignLeft,
-  MdFormatAlignCenter,
-  MdFormatAlignRight,
-  MdFormatAlignJustify,
-} from "react-icons/md";
-import { Editor } from "@tiptap/react";
-import ToolbarButton from "./ToolbarButton";
-
-export default function ListAlignGroup({ editor }: { editor: 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>
-  );
-}