tetrons 2.3.21 → 2.3.23

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

@@ -0,0 +1,267 @@
+"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="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={() => 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="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.tsx

@@ -0,0 +1,69 @@
+"use client";
+import React from "react";
+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="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.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import {
+  MdUndo,
+  MdRedo,
+  MdRefresh,
+  MdVisibility,
+  MdCode,
+} from "react-icons/md";
+import { Editor } from "@tiptap/react";
+import ToolbarButton from "./ToolbarButton";
+
+interface MiscGroupProps {
+  editor: Editor;
+}
+
+export default function MiscGroup({ editor }: MiscGroupProps) {
+  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.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { Editor } from "@tiptap/react";
+
+interface ContextMenuProps {
+  editor: Editor;
+}
+
+export default function TableContextMenu({ editor }: ContextMenuProps) {
+  const [menuPosition, setMenuPosition] = useState<{
+    x: number;
+    y: number;
+  } | null>(null);
+
+  useEffect(() => {
+    const handleContextMenu = (event: MouseEvent) => {
+      const target = event.target as HTMLElement;
+
+      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/components/tetrons/toolbar/TetronsToolbar.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import type { Editor } from "@tiptap/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,
+  version,
+}: {
+  editor: Editor;
+  version: "free" | "pro" | "premium" | "platinum";
+}) {
+  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="tetrons-toolbar">
+      {version !== "free" && (
+        <div className="group">
+          <input
+            type="checkbox"
+            id="autoSave"
+            checked={autoSave}
+            onChange={(e) => setAutoSave(e.target.checked)}
+          />
+          <label htmlFor="autoSave">Auto Save</label>
+        </div>
+      )}
+
+      {["pro", "premium", "platinum"].includes(version) && (
+        <FileGroup editor={editor} />
+      )}
+      <ClipboardGroup editor={editor} />
+      <FontStyleGroup editor={editor} />
+      <ListAlignGroup editor={editor} />
+      {["premium", "platinum"].includes(version) && (
+        <>
+          <InsertGroup editor={editor} />
+          <ActionGroup editor={editor} />
+        </>
+      )}
+      {version === "platinum" && <MiscGroup editor={editor} />}
+    </div>
+  );
+}

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

@@ -0,0 +1,36 @@
+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;
+};
+
+const ToolbarButton = React.forwardRef<HTMLButtonElement, ToolbarButtonProps>(
+  (
+    { icon: Icon, onClick, disabled = false, title, label, isActive = false },
+    ref
+  ) => {
+    return (
+      <button
+        type="button"
+        ref={ref}
+        onClick={onClick}
+        disabled={disabled}
+        title={title ?? label}
+        aria-label={title ?? label}
+        className={`toolbar-button ${isActive ? "active" : ""}`}
+      >
+        <Icon size={20} />
+      </button>
+    );
+  }
+);
+
+ToolbarButton.displayName = "ToolbarButton";
+
+export default ToolbarButton;

package/dist/components/tetrons/toolbar/extensions/Comment.ts

@@ -0,0 +1,72 @@
+import { Mark, mergeAttributes } 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 const Comment = Mark.create<CommentOptions>({
+  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);
+        },
+    };
+  },
+});