tetrons 2.3.22 → 2.3.24

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

@@ -0,0 +1,194 @@
+"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 React, { 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="font-style-group">
+      <select
+        title="Font Family"
+        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"
+        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="color-label"
+        style={{ "--indicator-color": textColor } as React.CSSProperties}
+      >
+        <ImTextColor size={20} />
+        <div className="color-indicator" />
+        <input
+          type="color"
+          value={textColor}
+          onChange={(e) => {
+            const color = e.target.value;
+            setTextColor(color);
+            editor.chain().focus().setColor(color).run();
+          }}
+        />
+      </label>
+
+      <label
+        title="Highlight Color"
+        aria-label="Highlight Color"
+        className="color-label"
+        style={{ "--indicator-color": highlightColor } as React.CSSProperties}
+      >
+        <BiSolidColorFill size={20} />
+        <div className="color-indicator" />
+        <input
+          type="color"
+          value={highlightColor}
+          onChange={(e) => {
+            const color = e.target.value;
+            setHighlightColor(color);
+            editor.chain().focus().setHighlight({ color }).run();
+          }}
+        />
+      </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.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.d.ts

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

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

@@ -0,0 +1,55 @@
+import React from "react";
+import { MdUndo, MdRedo, MdRefresh, MdVisibility, MdCode, MdSpellcheck, } from "react-icons/md";
+import ToolbarButton from "./ToolbarButton";
+import { checkGrammar } from "../../../utils/checkGrammar";
+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();
+        }
+    };
+    const handleGrammarCheck = async () => {
+        const text = editor.getText();
+        try {
+            const issues = await checkGrammar(text);
+            if (issues.length === 0) {
+                alert("✅ No grammar issues found.");
+                return;
+            }
+            let message = "🔎 Grammar Suggestions:\n\n";
+            issues.forEach((issue, idx) => {
+                const replacements = issue.replacements
+                    .map((r) => r.value)
+                    .join(", ");
+                message += `${idx + 1}. "${issue.context.text}"\n→ ${replacements}\nReason: ${issue.message}\n\n`;
+            });
+            alert(message);
+        }
+        catch (err) {
+            console.error(err);
+            alert("❌ Failed to check grammar. Please try again later.");
+        }
+    };
+    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}/>
+      <ToolbarButton icon={MdSpellcheck} label="Check Grammar" onClick={handleGrammarCheck}/>
+    </div>);
+}

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

@@ -0,0 +1,104 @@
+import React from "react";
+import {
+  MdUndo,
+  MdRedo,
+  MdRefresh,
+  MdVisibility,
+  MdCode,
+  MdSpellcheck,
+} from "react-icons/md";
+import { Editor } from "@tiptap/react";
+import ToolbarButton from "./ToolbarButton";
+import { checkGrammar, GrammarMatch } from "../../../utils/checkGrammar"; 
+
+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();
+    }
+  };
+
+  const handleGrammarCheck = async () => {
+    const text = editor.getText();
+    try {
+      const issues: GrammarMatch[] = await checkGrammar(text);
+      if (issues.length === 0) {
+        alert("✅ No grammar issues found.");
+        return;
+      }
+
+      let message = "🔎 Grammar Suggestions:\n\n";
+      issues.forEach((issue: GrammarMatch, idx: number) => {
+        const replacements = issue.replacements
+          .map((r: { value: string }) => r.value)
+          .join(", ");
+        message += `${idx + 1}. "${
+          issue.context.text
+        }"\n→ ${replacements}\nReason: ${issue.message}\n\n`;
+      });
+
+      alert(message);
+    } catch (err) {
+      console.error(err);
+      alert("❌ Failed to check grammar. Please try again later.");
+    }
+  };
+
+  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}
+      />
+      <ToolbarButton
+        icon={MdSpellcheck}
+        label="Check Grammar"
+        onClick={handleGrammarCheck}
+      />
+    </div>
+  );
+}