tetrons 2.3.26 → 2.3.28

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.js

@@ -1,36 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import Image from "@tiptap/extension-image";
-import { ReactNodeViewRenderer } from "@tiptap/react";
-import ResizableImageComponent from "./ResizableImageComponent";
-export const ResizableImage = Image.extend({
-    name: "resizableImage",
-    addAttributes() {
-        var _a;
-        return Object.assign(Object.assign({}, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.call(this)), { width: { default: null }, height: { default: null } });
-    },
-    renderHTML({ HTMLAttributes }) {
-        const { width, height } = HTMLAttributes, rest = __rest(HTMLAttributes, ["width", "height"]);
-        const style = [];
-        if (width)
-            style.push(`width: ${width}px`);
-        if (height)
-            style.push(`height: ${height}px`);
-        return [
-            "img",
-            Object.assign(Object.assign({}, rest), { style: style.join("; ") }),
-        ];
-    },
-    addNodeView() {
-        return ReactNodeViewRenderer(ResizableImageComponent);
-    },
-});

package/dist/components/tetrons/ResizableImage.ts

@@ -1,39 +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<HTMLElement>>;
-export default ResizableImageComponent;

package/dist/components/tetrons/ResizableImageComponent.jsx

@@ -1,37 +0,0 @@
-import React, { useRef, useEffect } from "react";
-import { NodeViewWrapper } from "@tiptap/react";
-const ResizableImageComponent = ({ node, updateAttributes, selected, }) => {
-    const { src, alt, title, width, height } = node.attrs;
-    const wrapperRef = useRef(null);
-    const imgRef = useRef(null);
-    useEffect(() => {
-        const img = imgRef.current;
-        if (!img)
-            return;
-        const observer = new ResizeObserver(() => {
-            const w = Math.round(img.offsetWidth);
-            const h = Math.round(img.offsetHeight);
-            updateAttributes({ width: w, height: h });
-        });
-        observer.observe(img);
-        return () => observer.disconnect();
-    }, [updateAttributes]);
-    return (<NodeViewWrapper ref={wrapperRef} contentEditable={false} className={`resizable-image-wrapper ${selected ? "ProseMirror-selectednode" : ""}`} style={{
-            resize: "both",
-            overflow: "auto",
-            border: "1px solid #ccc",
-            padding: 2,
-            display: "inline-block",
-            maxWidth: "100%",
-        }}>
-      {/* eslint-disable-next-line @next/next/no-img-element */}
-      <img ref={imgRef} src={src} alt={alt !== null && alt !== void 0 ? alt : ""} title={title !== null && title !== void 0 ? title : ""} loading="lazy" style={{
-            width: width ? `${width}px` : "auto",
-            height: height ? `${height}px` : "auto",
-            display: "block",
-            userSelect: "none",
-            pointerEvents: "auto",
-        }} draggable={false}/>
-    </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>
-  );
-}