tetrons 2.3.27 → 2.3.28

package/dist/components/components/tetrons/ResizableImageComponent.tsx

@@ -1,112 +0,0 @@
-import React, { useRef, useEffect, useState } from "react";
-import { NodeViewWrapper, ReactNodeViewProps } from "@tiptap/react";
-
-const ResizableImageComponent: React.FC<ReactNodeViewProps> = ({
-  node,
-  updateAttributes,
-  selected,
-}) => {
-  const { src, alt, title, width, height } = node.attrs as {
-    src: string;
-    alt?: string;
-    title?: string;
-    width?: number | null;
-    height?: number | null;
-  };
-
-  const defaultWidth = width ?? 300;
-  const defaultHeight = height ?? 200;
-  const aspectRatio = defaultHeight > 0 ? defaultWidth / defaultHeight : 4 / 3;
-
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const [isResizing, setIsResizing] = useState(false);
-
-  useEffect(() => {
-    const handleMouseMove = (e: MouseEvent) => {
-      if (!isResizing || !wrapperRef.current) return;
-
-      const rect = wrapperRef.current.getBoundingClientRect();
-      const newWidth = e.clientX - rect.left;
-      const newHeight = newWidth / aspectRatio;
-
-      if (newWidth > 50 && newHeight > 50) {
-        updateAttributes({
-          width: Math.round(newWidth),
-          height: Math.round(newHeight),
-        });
-      }
-    };
-
-    const handleMouseUp = () => {
-      setIsResizing(false);
-    };
-
-    if (isResizing) {
-      window.addEventListener("mousemove", handleMouseMove);
-      window.addEventListener("mouseup", handleMouseUp);
-    }
-
-    return () => {
-      window.removeEventListener("mousemove", handleMouseMove);
-      window.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [isResizing, updateAttributes, aspectRatio]);
-
-  return (
-    <NodeViewWrapper
-      ref={wrapperRef}
-      contentEditable={false}
-      className={`resizable-image-wrapper ${
-        selected ? "ProseMirror-selectednode" : ""
-      }`}
-      style={{
-        position: "relative",
-        border: "1px solid #ccc",
-        display: "inline-block",
-        width: `${defaultWidth}px`,
-        height: `${defaultHeight}px`,
-        minWidth: "50px",
-        minHeight: "50px",
-        maxWidth: "100%",
-        userSelect: "none",
-        padding: 2,
-      }}
-    >
-      <img
-        src={src}
-        alt={alt ?? ""}
-        title={title ?? ""}
-        loading="lazy"
-        style={{
-          width: "100%",
-          height: "100%",
-          objectFit: "contain",
-          display: "block",
-          userSelect: "none",
-          pointerEvents: "auto",
-        }}
-        draggable={false}
-      />
-
-      <div
-        onMouseDown={(e) => {
-          e.preventDefault();
-          setIsResizing(true);
-        }}
-        style={{
-          position: "absolute",
-          width: "12px",
-          height: "12px",
-          right: 2,
-          bottom: 2,
-          background: "#ccc",
-          borderRadius: "2px",
-          cursor: "nwse-resize",
-          zIndex: 10,
-        }}
-      />
-    </NodeViewWrapper>
-  );
-};
-
-export default ResizableImageComponent;

package/dist/components/components/tetrons/ResizableVideoComponent.tsx

@@ -1,56 +0,0 @@
-import React, { useRef, useEffect } from "react";
-import { NodeViewWrapper } from "@tiptap/react";
-import type { NodeViewProps } from "@tiptap/core";
-
-const ResizableVideoComponent: React.FC<NodeViewProps> = ({
-  node,
-  updateAttributes,
-  selected,
-}) => {
-  const { src, controls, width, height } = node.attrs;
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const videoRef = useRef<HTMLVideoElement>(null);
-
-  useEffect(() => {
-    const video = videoRef.current;
-    if (!video) return;
-
-    const observer = new ResizeObserver(() => {
-      const w = Math.round(video.offsetWidth);
-      const h = Math.round(video.offsetHeight);
-      updateAttributes({ width: w, height: h });
-    });
-
-    observer.observe(video);
-    return () => observer.disconnect();
-  }, [updateAttributes]);
-
-  return (
-    <NodeViewWrapper
-      ref={wrapperRef}
-      contentEditable={false}
-      className={`resizable-video-wrapper ${
-        selected ? "ProseMirror-selectednode" : ""
-      }`}
-      style={{
-        resize: "both",
-        overflow: "auto",
-        border: "1px solid #ccc",
-        padding: "2px",
-        display: "inline-block",
-      }}
-    >
-      <video
-        ref={videoRef}
-        src={src}
-        controls={controls}
-        style={{
-          width: width ? `${width}px` : "auto",
-          height: height ? `${height}px` : "auto",
-        }}
-      />
-    </NodeViewWrapper>
-  );
-};
-
-export default ResizableVideoComponent;

package/dist/components/tetrons/EditorContent.d.ts

@@ -1,6 +0,0 @@
-import React from "react";
-type EditorContentProps = {
-    apiKey: string;
-};
-export default function EditorContent({ apiKey }: EditorContentProps): React.JSX.Element;
-export {};

package/dist/components/tetrons/ResizableImage.d.ts

@@ -1 +0,0 @@
-export declare const ResizableImage: import("@tiptap/react").Node<import("@tiptap/extension-image").ImageOptions, any>;

package/dist/components/tetrons/ResizableImage.ts

@@ -1,35 +0,0 @@
-import Image from "@tiptap/extension-image";
-import { ReactNodeViewRenderer } from "@tiptap/react";
-import ResizableImageComponent from "./ResizableImageComponent";
-
-export const ResizableImage = Image.extend({
-  name: "resizableImage",
-
-  addAttributes() {
-    return {
-      ...this.parent?.(),
-      width: { default: null },
-      height: { default: null },
-    };
-  },
-
-  renderHTML({ HTMLAttributes }) {
-    const { width, height, ...rest } = HTMLAttributes;
-    const style = [];
-
-    if (width) style.push(`width: ${width}px`);
-    if (height) style.push(`height: ${height}px`);
-
-    return [
-      "img",
-      {
-        ...rest,
-        style: style.join("; "),
-      },
-    ];
-  },
-
-  addNodeView() {
-    return ReactNodeViewRenderer(ResizableImageComponent);
-  },
-});

package/dist/components/tetrons/ResizableImageComponent.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import { ReactNodeViewProps } from "@tiptap/react";
-declare const ResizableImageComponent: React.FC<ReactNodeViewProps>;
-export default ResizableImageComponent;

package/dist/components/tetrons/ResizableImageComponent.jsx

@@ -1,73 +0,0 @@
-import React, { useRef, useEffect, useState } from "react";
-import { NodeViewWrapper } from "@tiptap/react";
-const ResizableImageComponent = ({ node, updateAttributes, selected, }) => {
-    const { src, alt, title, width, height } = node.attrs;
-    const defaultWidth = width !== null && width !== void 0 ? width : 300;
-    const defaultHeight = height !== null && height !== void 0 ? height : 200;
-    const aspectRatio = defaultHeight > 0 ? defaultWidth / defaultHeight : 4 / 3;
-    const wrapperRef = useRef(null);
-    const [isResizing, setIsResizing] = useState(false);
-    useEffect(() => {
-        const handleMouseMove = (e) => {
-            if (!isResizing || !wrapperRef.current)
-                return;
-            const rect = wrapperRef.current.getBoundingClientRect();
-            const newWidth = e.clientX - rect.left;
-            const newHeight = newWidth / aspectRatio;
-            if (newWidth > 50 && newHeight > 50) {
-                updateAttributes({
-                    width: Math.round(newWidth),
-                    height: Math.round(newHeight),
-                });
-            }
-        };
-        const handleMouseUp = () => {
-            setIsResizing(false);
-        };
-        if (isResizing) {
-            window.addEventListener("mousemove", handleMouseMove);
-            window.addEventListener("mouseup", handleMouseUp);
-        }
-        return () => {
-            window.removeEventListener("mousemove", handleMouseMove);
-            window.removeEventListener("mouseup", handleMouseUp);
-        };
-    }, [isResizing, updateAttributes, aspectRatio]);
-    return (<NodeViewWrapper ref={wrapperRef} contentEditable={false} className={`resizable-image-wrapper ${selected ? "ProseMirror-selectednode" : ""}`} style={{
-            position: "relative",
-            border: "1px solid #ccc",
-            display: "inline-block",
-            width: `${defaultWidth}px`,
-            height: `${defaultHeight}px`,
-            minWidth: "50px",
-            minHeight: "50px",
-            maxWidth: "100%",
-            userSelect: "none",
-            padding: 2,
-        }}>
-      <img src={src} alt={alt !== null && alt !== void 0 ? alt : ""} title={title !== null && title !== void 0 ? title : ""} loading="lazy" style={{
-            width: "100%",
-            height: "100%",
-            objectFit: "contain",
-            display: "block",
-            userSelect: "none",
-            pointerEvents: "auto",
-        }} draggable={false}/>
-
-      <div onMouseDown={(e) => {
-            e.preventDefault();
-            setIsResizing(true);
-        }} style={{
-            position: "absolute",
-            width: "12px",
-            height: "12px",
-            right: 2,
-            bottom: 2,
-            background: "#ccc",
-            borderRadius: "2px",
-            cursor: "nwse-resize",
-            zIndex: 10,
-        }}/>
-    </NodeViewWrapper>);
-};
-export default ResizableImageComponent;

package/dist/components/tetrons/ResizableVideo.ts

@@ -1,66 +0,0 @@
-import { Node } from "@tiptap/core";
-import { ReactNodeViewRenderer } from "@tiptap/react";
-import ResizableVideoComponent from "./ResizableVideoComponent";
-
-declare module "@tiptap/core" {
-  interface Commands<ReturnType> {
-    video: {
-      setVideo: (options: { src: string; controls?: boolean }) => ReturnType;
-    };
-  }
-}
-
-export const ResizableVideo = Node.create({
-  name: "video",
-  group: "block",
-  draggable: true,
-  atom: true,
-
-  addAttributes() {
-    return {
-      src: { default: null },
-      controls: {
-        default: true,
-        parseHTML: (element) => element.hasAttribute("controls"),
-        renderHTML: (attributes) =>
-          attributes.controls ? { controls: "controls" } : {},
-      },
-      width: {
-        default: null,
-      },
-      height: {
-        default: null,
-      },
-    };
-  },
-  parseHTML() {
-    return [{ tag: "video[src]" }];
-  },
-
-  renderHTML({ HTMLAttributes }) {
-    const { width, height, ...rest } = HTMLAttributes;
-    const style = [];
-
-    if (width) style.push(`width: ${width}px`);
-    if (height) style.push(`height: ${height}px`);
-
-    return ["video", { ...rest, style: style.join("; ") }];
-  },
-
-  addCommands() {
-    return {
-      setVideo:
-        (attributes) =>
-        ({ commands }) => {
-          return commands.insertContent({
-            type: this.name,
-            attrs: attributes,
-          });
-        },
-    };
-  },
-
-  addNodeView() {
-    return ReactNodeViewRenderer(ResizableVideoComponent);
-  },
-});

package/dist/components/tetrons/extensions/Spellcheck.ts

@@ -1,50 +0,0 @@
-import { Mark, markInputRule } from "@tiptap/core";
-
-export interface SpellcheckOptions {
-  spellcheckFn: (word: string) => boolean;
-}
-
-const wordMatchRegex = () => /(?:^|\s)([a-zA-Z]{2,})(?=\s|$)/g;
-
-export const Spellcheck = Mark.create<SpellcheckOptions>({
-  name: "spellcheck",
-
-  addOptions() {
-    return {
-      spellcheckFn: () => true,
-    };
-  },
-
-  addInputRules() {
-    return [
-      markInputRule({
-        find: wordMatchRegex(),
-        type: this.type,
-        getAttributes: (match) =>
-          this.options.spellcheckFn(match[1])
-            ? false
-            : { "data-spellcheck": "true" },
-      }),
-    ];
-  },
-
-  parseHTML() {
-    return [
-      {
-        tag: "span[data-spellcheck]",
-      },
-    ];
-  },
-
-  renderHTML({ HTMLAttributes }) {
-    return [
-      "span",
-      {
-        ...HTMLAttributes,
-        style: "text-decoration: red wavy underline;",
-        "data-spellcheck": "true",
-      },
-      0,
-    ];
-  },
-});

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

@@ -1,209 +0,0 @@
-"use client";
-
-import React, { useState, useRef } from "react";
-import { Editor } from "@tiptap/react";
-import { FaMicrophone, FaStop } from "react-icons/fa";
-import { Waveform } from "@uiball/loaders";
-import { motion, AnimatePresence } from "framer-motion";
-
-export default function AiGroup({ editor }: { editor: Editor }) {
-  const [isRecording, setIsRecording] = useState(false);
-  const [audioBlob, setAudioBlob] = useState<Blob | null>(null);
-  const [isTranscribing, setIsTranscribing] = useState(false);
-  const [transcriptionError, setTranscriptionError] = useState("");
-
-  const [showPromptInput, setShowPromptInput] = useState(false);
-  const [prompt, setPrompt] = useState("");
-  const [isLoadingAI, setIsLoadingAI] = useState(false);
-  const [aiError, setAiError] = useState("");
-
-  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
-  const chunksRef = useRef<BlobPart[]>([]);
-
-  const startRecording = async () => {
-    setTranscriptionError("");
-    setAudioBlob(null);
-
-    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-    const mediaRecorder = new MediaRecorder(stream);
-    mediaRecorderRef.current = mediaRecorder;
-    chunksRef.current = [];
-
-    mediaRecorder.ondataavailable = (e) => {
-      if (e.data.size > 0) chunksRef.current.push(e.data);
-    };
-
-    mediaRecorder.onstop = () => {
-      const blob = new Blob(chunksRef.current, { type: "audio/webm" });
-      setAudioBlob(blob);
-      transcribeAudio(blob);
-    };
-
-    mediaRecorder.start();
-    setIsRecording(true);
-  };
-
-  const stopRecording = () => {
-    mediaRecorderRef.current?.stop();
-    setIsRecording(false);
-  };
-
-  const transcribeAudio = async (blob: Blob) => {
-    setIsTranscribing(true);
-    setTranscriptionError("");
-
-    const formData = new FormData();
-    formData.append("file", blob, "voice.webm");
-
-    try {
-      const res = await fetch("/api/transcribe", {
-        method: "POST",
-        body: formData,
-      });
-
-      const data = await res.json();
-      if (!res.ok || !data.transcript) {
-        throw new Error(data.error || "Failed to transcribe");
-      }
-
-      editor.commands.insertContent(data.transcript);
-    } catch (e) {
-      console.error(e);
-      setTranscriptionError("Transcription failed. Please try again.");
-    } finally {
-      setIsTranscribing(false);
-    }
-  };
-
-  const handleAiClick = () => {
-    setShowPromptInput(true);
-    setPrompt("");
-    setAiError("");
-  };
-
-  const handlePromptSubmit = async () => {
-    if (!prompt.trim()) return;
-    setIsLoadingAI(true);
-    setAiError("");
-
-    try {
-      const res = await fetch("/api/ai-action", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ content: prompt }),
-      });
-
-      const data = await res.json();
-
-      if (!res.ok || !data.response) {
-        throw new Error(data.error || "AI failed to generate content");
-      }
-
-      editor.commands.insertContent(data.response);
-      setShowPromptInput(false);
-    } catch (e) {
-      console.error(e);
-      setAiError("Failed to generate content. Try again.");
-    } finally {
-      setIsLoadingAI(false);
-    }
-  };
-
-  return (
-    <div className="group relative space-y-3">
-      <div className="flex gap-2 items-center">
-        {!isRecording ? (
-          <button
-            type="button"
-            onClick={startRecording}
-            className="icon-btn"
-            title="Start Voice Input"
-          >
-            <FaMicrophone size={18} />
-          </button>
-        ) : (
-          <button
-            type="button"
-            onClick={stopRecording}
-            className="icon-btn stop-btn"
-            title="Stop Recording"
-          >
-            <FaStop size={18} />
-          </button>
-        )}
-
-        <button
-          type="button"
-          onClick={handleAiClick}
-          className="ai-button"
-          title="AI Assist"
-        >
-          AI
-        </button>
-      </div>
-
-      {isRecording && (
-        <div className="flex flex-col items-center">
-          <Waveform size={30} lineWeight={3.5} speed={1} color="#4F46E5" />
-          <p className="text-sm mt-1 text-gray-600">Recording...</p>
-        </div>
-      )}
-
-      {isTranscribing && (
-        <p className="text-sm text-gray-500">Transcribing...</p>
-      )}
-
-      {transcriptionError && (
-        <p className="text-sm text-red-600">{transcriptionError}</p>
-      )}
-
-      {audioBlob && (
-        <div className="mt-2">
-          <audio controls src={URL.createObjectURL(audioBlob)} />
-        </div>
-      )}
-
-      <AnimatePresence>
-        {showPromptInput && (
-          <motion.div
-            className="ai-modal-backdrop"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-          >
-            <motion.div
-              className="ai-modal-content"
-              initial={{ scale: 0.9, opacity: 0 }}
-              animate={{ scale: 1, opacity: 1 }}
-              exit={{ scale: 0.9, opacity: 0 }}
-            >
-              <h2 className="ai-modal-title">AI Prompt</h2>
-              <textarea
-                className="ai-modal-textarea"
-                value={prompt}
-                onChange={(e) => setPrompt(e.target.value)}
-                placeholder="Enter your prompt here..."
-              />
-              {aiError && <p className="ai-modal-error">{aiError}</p>}
-              <div className="ai-modal-actions">
-                <button
-                  onClick={() => setShowPromptInput(false)}
-                  className="ai-cancel-btn"
-                >
-                  Cancel
-                </button>
-                <button
-                  onClick={handlePromptSubmit}
-                  disabled={isLoadingAI}
-                  className="ai-submit-btn"
-                >
-                  {isLoadingAI ? "Generating..." : "Submit"}
-                </button>
-              </div>
-            </motion.div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
-  );
-}