tetrons 2.3.27 → 2.3.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/app/api/ai-action/route.d.mts +9 -0
- package/dist/app/api/ai-action/route.mjs +36 -0
- package/dist/app/api/export/route.d.mts +3 -0
- package/dist/app/api/export/route.mjs +8 -0
- package/dist/app/api/register/route.d.mts +10 -0
- package/dist/app/api/register/route.mjs +85 -0
- package/dist/app/api/save/route.d.mts +9 -0
- package/dist/app/api/save/route.mjs +18 -0
- package/dist/app/api/transcribe/route.d.mts +10 -0
- package/dist/app/api/transcribe/route.mjs +46 -0
- package/dist/app/api/validate/route.d.mts +13 -0
- package/dist/app/api/validate/route.mjs +107 -0
- package/package.json +2 -2
- package/dist/app/page.d.ts +0 -2
- package/dist/components/components/UI/Button.tsx +0 -0
- package/dist/components/components/UI/Dropdown.tsx +0 -0
- package/dist/components/components/tetrons/EditorContent.tsx +0 -280
- package/dist/components/components/tetrons/ResizableImageComponent.tsx +0 -112
- package/dist/components/components/tetrons/ResizableVideoComponent.tsx +0 -56
- package/dist/components/tetrons/EditorContent.d.ts +0 -6
- package/dist/components/tetrons/ResizableImage.d.ts +0 -1
- package/dist/components/tetrons/ResizableImage.ts +0 -35
- package/dist/components/tetrons/ResizableImageComponent.d.ts +0 -4
- package/dist/components/tetrons/ResizableImageComponent.jsx +0 -73
- package/dist/components/tetrons/ResizableVideo.ts +0 -66
- package/dist/components/tetrons/extensions/Spellcheck.ts +0 -50
- package/dist/components/tetrons/helpers.ts +0 -0
- package/dist/components/tetrons/toolbar/AIGroup.tsx +0 -209
- package/dist/components/tetrons/toolbar/ActionGroup.tsx +0 -218
- package/dist/components/tetrons/toolbar/ClipboardGroup.tsx +0 -58
- package/dist/components/tetrons/toolbar/FileGroup.tsx +0 -66
- package/dist/components/tetrons/toolbar/FontStyleGroup.tsx +0 -194
- package/dist/components/tetrons/toolbar/InsertGroup.tsx +0 -267
- package/dist/components/tetrons/toolbar/ListAlignGroup.tsx +0 -69
- package/dist/components/tetrons/toolbar/MiscGroup.tsx +0 -104
- package/dist/components/tetrons/toolbar/TableContextMenu.tsx +0 -91
- package/dist/components/tetrons/toolbar/TetronsToolbar.tsx +0 -77
- package/dist/components/tetrons/toolbar/ToolbarButton.tsx +0 -36
- package/dist/components/tetrons/toolbar/extensions/Comment.ts +0 -72
- package/dist/components/tetrons/toolbar/extensions/Embed.ts +0 -113
- package/dist/components/tetrons/toolbar/extensions/FontFamily.ts +0 -43
- package/dist/components/tetrons/toolbar/extensions/FontSize.ts +0 -43
- package/dist/components/tetrons/toolbar/extensions/ResizableTable.ts +0 -16
- package/dist/components/tetrons/toolbar/marks/Subscript.ts +0 -45
- package/dist/components/tetrons/toolbar/marks/Superscript.ts +0 -45
- package/dist/index.d.ts +0 -6
- package/dist/index.js +0 -17012
- package/dist/styles/styles/tetrons.css +0 -563
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
// src/app/api/ai-action/route.ts
|
|
2
|
+
import { NextResponse } from "next/server";
|
|
3
|
+
async function POST(req) {
|
|
4
|
+
try {
|
|
5
|
+
const { content } = await req.json();
|
|
6
|
+
const response = await fetch("https://api.openai.com/v1/chat/completions", {
|
|
7
|
+
method: "POST",
|
|
8
|
+
headers: {
|
|
9
|
+
Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
|
|
10
|
+
"Content-Type": "application/json"
|
|
11
|
+
},
|
|
12
|
+
body: JSON.stringify({
|
|
13
|
+
model: "gpt-4",
|
|
14
|
+
messages: [{ role: "user", content }],
|
|
15
|
+
temperature: 0.7
|
|
16
|
+
})
|
|
17
|
+
});
|
|
18
|
+
const data = await response.json();
|
|
19
|
+
if (!response.ok) {
|
|
20
|
+
return NextResponse.json({ error: data.error.message }, { status: 500 });
|
|
21
|
+
}
|
|
22
|
+
return NextResponse.json({ response: data.choices[0].message.content });
|
|
23
|
+
} catch (error) {
|
|
24
|
+
console.error("AI generation error:", error);
|
|
25
|
+
if (error instanceof Error) {
|
|
26
|
+
return NextResponse.json({ error: error.message }, { status: 500 });
|
|
27
|
+
}
|
|
28
|
+
return NextResponse.json(
|
|
29
|
+
{ error: "Unknown error occurred." },
|
|
30
|
+
{ status: 500 }
|
|
31
|
+
);
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
export {
|
|
35
|
+
POST
|
|
36
|
+
};
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
// src/app/api/register/route.ts
|
|
2
|
+
import { NextResponse } from "next/server";
|
|
3
|
+
|
|
4
|
+
// src/lib/db.js
|
|
5
|
+
import mongoose from "mongoose";
|
|
6
|
+
var MONGO_URL = process.env.MONGO_URL;
|
|
7
|
+
var connectDB = async () => {
|
|
8
|
+
if (mongoose.connection.readyState >= 1) {
|
|
9
|
+
return;
|
|
10
|
+
}
|
|
11
|
+
try {
|
|
12
|
+
await mongoose.connect(MONGO_URL);
|
|
13
|
+
console.log("Connected to MongoDB \u{1F44D}");
|
|
14
|
+
} catch (error) {
|
|
15
|
+
console.error("MongoDB connection failed \u274C", error);
|
|
16
|
+
process.exit(1);
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
// src/models/ApiKey.ts
|
|
21
|
+
import mongoose2 from "mongoose";
|
|
22
|
+
var ApiKeySchema = new mongoose2.Schema({
|
|
23
|
+
email: { type: String, required: true },
|
|
24
|
+
organization: { type: String, required: true },
|
|
25
|
+
version: {
|
|
26
|
+
type: String,
|
|
27
|
+
enum: ["free", "pro", "premium", "platinum"],
|
|
28
|
+
required: true
|
|
29
|
+
},
|
|
30
|
+
apiKey: { type: String, required: true, unique: true },
|
|
31
|
+
createdAt: { type: Date, default: Date.now },
|
|
32
|
+
expiresAt: { type: Date }
|
|
33
|
+
});
|
|
34
|
+
var ApiKey = mongoose2.models.ApiKey || mongoose2.model("ApiKey", ApiKeySchema);
|
|
35
|
+
|
|
36
|
+
// src/utils/apiKeyUtils.ts
|
|
37
|
+
import crypto from "crypto";
|
|
38
|
+
var FREE_API_KEY = process.env.TETRONS_FREE_KEY || "TETRONS_FREE_KEY";
|
|
39
|
+
var SECRET_KEY = process.env.API_KEY_SECRET || "default-secret-key";
|
|
40
|
+
function getFreeApiKey() {
|
|
41
|
+
return FREE_API_KEY;
|
|
42
|
+
}
|
|
43
|
+
var VERSION_PREFIXES = {
|
|
44
|
+
pro: "PRO",
|
|
45
|
+
premium: "PREMIUM",
|
|
46
|
+
platinum: "PLATINUM"
|
|
47
|
+
};
|
|
48
|
+
function generateUserApiKey(email, organization, version) {
|
|
49
|
+
const input = `${email.trim().toLowerCase()}:${organization.trim().toLowerCase()}`;
|
|
50
|
+
const hash = crypto.createHmac("sha256", SECRET_KEY).update(input).digest("hex").toUpperCase();
|
|
51
|
+
const prefix = VERSION_PREFIXES[version];
|
|
52
|
+
return `${prefix}${hash.slice(0, 48 - prefix.length)}`;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
// src/app/api/register/route.ts
|
|
56
|
+
async function POST(req) {
|
|
57
|
+
const body = await req.json();
|
|
58
|
+
const { email, organization, version } = body;
|
|
59
|
+
if (!email || !organization || !version) {
|
|
60
|
+
return NextResponse.json({ error: "Missing fields" }, { status: 400 });
|
|
61
|
+
}
|
|
62
|
+
await connectDB();
|
|
63
|
+
const lowerEmail = email.trim().toLowerCase();
|
|
64
|
+
const lowerOrg = organization.trim().toLowerCase();
|
|
65
|
+
await ApiKey.deleteMany({ email: lowerEmail, version });
|
|
66
|
+
let apiKey;
|
|
67
|
+
let expiresAt = null;
|
|
68
|
+
if (version === "free") {
|
|
69
|
+
apiKey = getFreeApiKey();
|
|
70
|
+
expiresAt = new Date(Date.now() + 14 * 24 * 60 * 60 * 1e3);
|
|
71
|
+
} else {
|
|
72
|
+
apiKey = generateUserApiKey(lowerEmail, lowerOrg, version);
|
|
73
|
+
}
|
|
74
|
+
await ApiKey.create({
|
|
75
|
+
email: lowerEmail,
|
|
76
|
+
organization: lowerOrg,
|
|
77
|
+
version,
|
|
78
|
+
apiKey,
|
|
79
|
+
expiresAt
|
|
80
|
+
});
|
|
81
|
+
return NextResponse.json({ apiKey, expiresAt });
|
|
82
|
+
}
|
|
83
|
+
export {
|
|
84
|
+
POST
|
|
85
|
+
};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
// src/app/api/save/route.ts
|
|
2
|
+
import { NextResponse } from "next/server";
|
|
3
|
+
import path from "path";
|
|
4
|
+
import fs from "fs/promises";
|
|
5
|
+
async function POST(request) {
|
|
6
|
+
try {
|
|
7
|
+
const json = await request.json();
|
|
8
|
+
const publicDir = path.join(process.cwd(), "public");
|
|
9
|
+
const filePath = path.join(publicDir, "editor-content.json");
|
|
10
|
+
await fs.writeFile(filePath, JSON.stringify(json, null, 2), "utf-8");
|
|
11
|
+
return NextResponse.json({ message: "File saved successfully" });
|
|
12
|
+
} catch {
|
|
13
|
+
return NextResponse.json({ error: "Failed to save file" }, { status: 500 });
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
export {
|
|
17
|
+
POST
|
|
18
|
+
};
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
// src/app/api/transcribe/route.ts
|
|
2
|
+
import { NextResponse } from "next/server";
|
|
3
|
+
var runtime = "edge";
|
|
4
|
+
async function POST(req) {
|
|
5
|
+
try {
|
|
6
|
+
const formData = await req.formData();
|
|
7
|
+
const file = formData.get("file");
|
|
8
|
+
if (!file) {
|
|
9
|
+
return NextResponse.json({ error: "No file uploaded" }, { status: 400 });
|
|
10
|
+
}
|
|
11
|
+
const arrayBuffer = await file.arrayBuffer();
|
|
12
|
+
const buffer = Buffer.from(arrayBuffer);
|
|
13
|
+
const whisperFormData = new FormData();
|
|
14
|
+
whisperFormData.append(
|
|
15
|
+
"file",
|
|
16
|
+
new Blob([buffer], { type: file.type || "audio/webm" }),
|
|
17
|
+
"voice.webm"
|
|
18
|
+
);
|
|
19
|
+
whisperFormData.append("model", "whisper-1");
|
|
20
|
+
const whisperRes = await fetch(
|
|
21
|
+
"https://api.openai.com/v1/audio/transcriptions",
|
|
22
|
+
{
|
|
23
|
+
method: "POST",
|
|
24
|
+
headers: {
|
|
25
|
+
Authorization: `Bearer ${process.env.OPENAI_API_KEY ?? ""}`
|
|
26
|
+
},
|
|
27
|
+
body: whisperFormData
|
|
28
|
+
}
|
|
29
|
+
);
|
|
30
|
+
const result = await whisperRes.json();
|
|
31
|
+
if (!whisperRes.ok) {
|
|
32
|
+
return NextResponse.json(
|
|
33
|
+
{ error: result?.error?.message || "Transcription failed" },
|
|
34
|
+
{ status: 500 }
|
|
35
|
+
);
|
|
36
|
+
}
|
|
37
|
+
return NextResponse.json({ transcript: result.text });
|
|
38
|
+
} catch (error) {
|
|
39
|
+
const message = error instanceof Error ? error.message : "Unknown server error";
|
|
40
|
+
return NextResponse.json({ error: message }, { status: 500 });
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
export {
|
|
44
|
+
POST,
|
|
45
|
+
runtime
|
|
46
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { NextRequest, NextResponse } from 'next/server';
|
|
2
|
+
|
|
3
|
+
declare function OPTIONS(): Promise<Response>;
|
|
4
|
+
declare function POST(req: NextRequest): Promise<NextResponse<{
|
|
5
|
+
error: string;
|
|
6
|
+
}> | NextResponse<{
|
|
7
|
+
valid: boolean;
|
|
8
|
+
version: any;
|
|
9
|
+
email: any;
|
|
10
|
+
organization: any;
|
|
11
|
+
}>>;
|
|
12
|
+
|
|
13
|
+
export { OPTIONS, POST };
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
// src/app/api/validate/route.ts
|
|
2
|
+
import { NextResponse } from "next/server";
|
|
3
|
+
|
|
4
|
+
// src/lib/db.js
|
|
5
|
+
import mongoose from "mongoose";
|
|
6
|
+
var MONGO_URL = process.env.MONGO_URL;
|
|
7
|
+
var connectDB = async () => {
|
|
8
|
+
if (mongoose.connection.readyState >= 1) {
|
|
9
|
+
return;
|
|
10
|
+
}
|
|
11
|
+
try {
|
|
12
|
+
await mongoose.connect(MONGO_URL);
|
|
13
|
+
console.log("Connected to MongoDB \u{1F44D}");
|
|
14
|
+
} catch (error) {
|
|
15
|
+
console.error("MongoDB connection failed \u274C", error);
|
|
16
|
+
process.exit(1);
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
// src/models/ApiKey.ts
|
|
21
|
+
import mongoose2 from "mongoose";
|
|
22
|
+
var ApiKeySchema = new mongoose2.Schema({
|
|
23
|
+
email: { type: String, required: true },
|
|
24
|
+
organization: { type: String, required: true },
|
|
25
|
+
version: {
|
|
26
|
+
type: String,
|
|
27
|
+
enum: ["free", "pro", "premium", "platinum"],
|
|
28
|
+
required: true
|
|
29
|
+
},
|
|
30
|
+
apiKey: { type: String, required: true, unique: true },
|
|
31
|
+
createdAt: { type: Date, default: Date.now },
|
|
32
|
+
expiresAt: { type: Date }
|
|
33
|
+
});
|
|
34
|
+
var ApiKey = mongoose2.models.ApiKey || mongoose2.model("ApiKey", ApiKeySchema);
|
|
35
|
+
|
|
36
|
+
// src/app/api/validate/route.ts
|
|
37
|
+
var corsHeaders = {
|
|
38
|
+
"Access-Control-Allow-Origin": "*",
|
|
39
|
+
"Access-Control-Allow-Methods": "POST, OPTIONS",
|
|
40
|
+
"Access-Control-Allow-Headers": "Content-Type"
|
|
41
|
+
};
|
|
42
|
+
async function OPTIONS() {
|
|
43
|
+
return new Response(null, {
|
|
44
|
+
status: 204,
|
|
45
|
+
headers: corsHeaders
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
async function POST(req) {
|
|
49
|
+
try {
|
|
50
|
+
const body = await req.json();
|
|
51
|
+
const apiKey = body.apiKey;
|
|
52
|
+
if (!apiKey) {
|
|
53
|
+
return NextResponse.json(
|
|
54
|
+
{ error: "API key required" },
|
|
55
|
+
{
|
|
56
|
+
status: 400,
|
|
57
|
+
headers: corsHeaders
|
|
58
|
+
}
|
|
59
|
+
);
|
|
60
|
+
}
|
|
61
|
+
await connectDB();
|
|
62
|
+
const keyEntry = await ApiKey.findOne({ apiKey });
|
|
63
|
+
if (!keyEntry) {
|
|
64
|
+
return NextResponse.json(
|
|
65
|
+
{ error: "Invalid API key" },
|
|
66
|
+
{
|
|
67
|
+
status: 401,
|
|
68
|
+
headers: corsHeaders
|
|
69
|
+
}
|
|
70
|
+
);
|
|
71
|
+
}
|
|
72
|
+
if (keyEntry.version === "free" && keyEntry.expiresAt && /* @__PURE__ */ new Date() > new Date(keyEntry.expiresAt)) {
|
|
73
|
+
return NextResponse.json(
|
|
74
|
+
{ error: "Free trial expired" },
|
|
75
|
+
{
|
|
76
|
+
status: 403,
|
|
77
|
+
headers: corsHeaders
|
|
78
|
+
}
|
|
79
|
+
);
|
|
80
|
+
}
|
|
81
|
+
return NextResponse.json(
|
|
82
|
+
{
|
|
83
|
+
valid: true,
|
|
84
|
+
version: keyEntry.version,
|
|
85
|
+
email: keyEntry.email,
|
|
86
|
+
organization: keyEntry.organization
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
status: 200,
|
|
90
|
+
headers: corsHeaders
|
|
91
|
+
}
|
|
92
|
+
);
|
|
93
|
+
} catch (err) {
|
|
94
|
+
console.error("Validation Error:", err);
|
|
95
|
+
return NextResponse.json(
|
|
96
|
+
{ error: "Server error" },
|
|
97
|
+
{
|
|
98
|
+
status: 500,
|
|
99
|
+
headers: corsHeaders
|
|
100
|
+
}
|
|
101
|
+
);
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
export {
|
|
105
|
+
OPTIONS,
|
|
106
|
+
POST
|
|
107
|
+
};
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "tetrons",
|
|
3
|
-
"version": "2.3.
|
|
3
|
+
"version": "2.3.28",
|
|
4
4
|
"description": "A Next.js project written in TypeScript",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
7
7
|
"scripts": {
|
|
8
8
|
"dev": "next dev --turbo",
|
|
9
|
-
"build": "tsup
|
|
9
|
+
"build": "tsup && copyfiles -u 2 src/styles/*.css dist/styles && copyfiles -u 2 src/components/**/*.tsx dist/components",
|
|
10
10
|
"start": "next start",
|
|
11
11
|
"lint": "next lint"
|
|
12
12
|
},
|
package/dist/app/page.d.ts
DELETED
|
File without changes
|
|
File without changes
|
|
@@ -1,280 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
|
|
3
|
-
import React, { useEffect, useRef, useState } from "react";
|
|
4
|
-
import {
|
|
5
|
-
useEditor,
|
|
6
|
-
EditorContent as TiptapEditorContent,
|
|
7
|
-
} from "@tiptap/react";
|
|
8
|
-
|
|
9
|
-
import Document from "@tiptap/extension-document";
|
|
10
|
-
import Paragraph from "@tiptap/extension-paragraph";
|
|
11
|
-
import Text from "@tiptap/extension-text";
|
|
12
|
-
import History from "@tiptap/extension-history";
|
|
13
|
-
import Bold from "@tiptap/extension-bold";
|
|
14
|
-
import Italic from "@tiptap/extension-italic";
|
|
15
|
-
import Underline from "@tiptap/extension-underline";
|
|
16
|
-
import Strike from "@tiptap/extension-strike";
|
|
17
|
-
import Code from "@tiptap/extension-code";
|
|
18
|
-
import Blockquote from "@tiptap/extension-blockquote";
|
|
19
|
-
import HardBreak from "@tiptap/extension-hard-break";
|
|
20
|
-
import Heading from "@tiptap/extension-heading";
|
|
21
|
-
import HorizontalRule from "@tiptap/extension-horizontal-rule";
|
|
22
|
-
import TextAlign from "@tiptap/extension-text-align";
|
|
23
|
-
import Color from "@tiptap/extension-color";
|
|
24
|
-
import Highlight from "@tiptap/extension-highlight";
|
|
25
|
-
import Image from "@tiptap/extension-image";
|
|
26
|
-
import Link from "@tiptap/extension-link";
|
|
27
|
-
import TextStyle from "@tiptap/extension-text-style";
|
|
28
|
-
import ListItem from "@tiptap/extension-list-item";
|
|
29
|
-
import BulletList from "@tiptap/extension-bullet-list";
|
|
30
|
-
import OrderedList from "@tiptap/extension-ordered-list";
|
|
31
|
-
import TableRow from "@tiptap/extension-table-row";
|
|
32
|
-
import TableCell from "@tiptap/extension-table-cell";
|
|
33
|
-
import TableHeader from "@tiptap/extension-table-header";
|
|
34
|
-
import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
|
|
35
|
-
|
|
36
|
-
import js from "highlight.js/lib/languages/javascript";
|
|
37
|
-
import ts from "highlight.js/lib/languages/typescript";
|
|
38
|
-
import { createLowlight } from "lowlight";
|
|
39
|
-
|
|
40
|
-
import { useTypo } from "../../utils/useTypo";
|
|
41
|
-
import { Spellcheck } from "./extensions/Spellcheck";
|
|
42
|
-
|
|
43
|
-
import { Comment } from "./toolbar/extensions/Comment";
|
|
44
|
-
import { Subscript } from "./toolbar/marks/Subscript";
|
|
45
|
-
import { Superscript } from "./toolbar/marks/Superscript";
|
|
46
|
-
import { ResizableTable } from "./toolbar/extensions/ResizableTable";
|
|
47
|
-
import { Embed } from "./toolbar/extensions/Embed";
|
|
48
|
-
import { FontFamily } from "./toolbar/extensions/FontFamily";
|
|
49
|
-
import { FontSize } from "./toolbar/extensions/FontSize";
|
|
50
|
-
import { ResizableImage } from "./ResizableImage";
|
|
51
|
-
import { ResizableVideo } from "./ResizableVideo";
|
|
52
|
-
import TableContextMenu from "./toolbar/TableContextMenu";
|
|
53
|
-
import TetronsToolbar from "./toolbar/TetronsToolbar";
|
|
54
|
-
|
|
55
|
-
const lowlight = createLowlight();
|
|
56
|
-
lowlight.register("js", js);
|
|
57
|
-
lowlight.register("ts", ts);
|
|
58
|
-
|
|
59
|
-
type EditorContentProps = {
|
|
60
|
-
apiKey: string;
|
|
61
|
-
};
|
|
62
|
-
|
|
63
|
-
export default function EditorContent({ apiKey }: EditorContentProps) {
|
|
64
|
-
const typo = useTypo();
|
|
65
|
-
|
|
66
|
-
const [isValid, setIsValid] = useState<boolean | null>(null);
|
|
67
|
-
const [error, setError] = useState<string | null>(null);
|
|
68
|
-
const [versions, setVersions] = useState<string[]>([]);
|
|
69
|
-
const [userVersion, setUserVersion] = useState<
|
|
70
|
-
"free" | "pro" | "premium" | "platinum" | null
|
|
71
|
-
>(null);
|
|
72
|
-
const [currentVersionIndex, setCurrentVersionIndex] = useState<number | null>(
|
|
73
|
-
null
|
|
74
|
-
);
|
|
75
|
-
|
|
76
|
-
const wrapperRef = useRef<HTMLDivElement>(null);
|
|
77
|
-
|
|
78
|
-
function getApiBaseUrl(): string {
|
|
79
|
-
if (
|
|
80
|
-
typeof import.meta !== "undefined" &&
|
|
81
|
-
import.meta.env?.VITE_TETRONS_API_URL
|
|
82
|
-
) {
|
|
83
|
-
return import.meta.env.VITE_TETRONS_API_URL;
|
|
84
|
-
}
|
|
85
|
-
if (
|
|
86
|
-
typeof process !== "undefined" &&
|
|
87
|
-
process.env?.NEXT_PUBLIC_TETRONS_API_URL
|
|
88
|
-
) {
|
|
89
|
-
return process.env.NEXT_PUBLIC_TETRONS_API_URL;
|
|
90
|
-
}
|
|
91
|
-
return "https://staging.tetrons.com";
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
const API_BASE_URL = getApiBaseUrl();
|
|
95
|
-
|
|
96
|
-
useEffect(() => {
|
|
97
|
-
const validateKey = async () => {
|
|
98
|
-
try {
|
|
99
|
-
const res = await fetch(`${API_BASE_URL}/api/validate`, {
|
|
100
|
-
method: "POST",
|
|
101
|
-
headers: {
|
|
102
|
-
"Content-Type": "application/json",
|
|
103
|
-
},
|
|
104
|
-
body: JSON.stringify({ apiKey }),
|
|
105
|
-
});
|
|
106
|
-
|
|
107
|
-
const data = await res.json();
|
|
108
|
-
if (!res.ok) throw new Error(data.error || "Invalid API Key");
|
|
109
|
-
|
|
110
|
-
setIsValid(true);
|
|
111
|
-
setUserVersion(data.version);
|
|
112
|
-
} catch (err: unknown) {
|
|
113
|
-
setError(err instanceof Error ? err.message : "Invalid API Key");
|
|
114
|
-
setIsValid(false);
|
|
115
|
-
}
|
|
116
|
-
};
|
|
117
|
-
|
|
118
|
-
validateKey();
|
|
119
|
-
}, [apiKey, API_BASE_URL]);
|
|
120
|
-
|
|
121
|
-
const editor = useEditor({
|
|
122
|
-
extensions: [
|
|
123
|
-
Document,
|
|
124
|
-
Paragraph,
|
|
125
|
-
Text,
|
|
126
|
-
History,
|
|
127
|
-
Bold,
|
|
128
|
-
Italic,
|
|
129
|
-
Underline,
|
|
130
|
-
Strike,
|
|
131
|
-
Code,
|
|
132
|
-
Blockquote,
|
|
133
|
-
HardBreak,
|
|
134
|
-
Heading.configure({ levels: [1, 2, 3, 4, 5, 6] }),
|
|
135
|
-
HorizontalRule,
|
|
136
|
-
TextStyle,
|
|
137
|
-
Color,
|
|
138
|
-
Highlight.configure({ multicolor: true }),
|
|
139
|
-
FontFamily,
|
|
140
|
-
FontSize,
|
|
141
|
-
TextAlign.configure({ types: ["heading", "paragraph"] }),
|
|
142
|
-
ListItem,
|
|
143
|
-
BulletList,
|
|
144
|
-
OrderedList,
|
|
145
|
-
Subscript,
|
|
146
|
-
Superscript,
|
|
147
|
-
Image,
|
|
148
|
-
Link.configure({
|
|
149
|
-
openOnClick: false,
|
|
150
|
-
autolink: true,
|
|
151
|
-
linkOnPaste: true,
|
|
152
|
-
}),
|
|
153
|
-
ResizableTable.configure({ resizable: true }),
|
|
154
|
-
TableRow,
|
|
155
|
-
TableCell,
|
|
156
|
-
TableHeader,
|
|
157
|
-
Embed,
|
|
158
|
-
ResizableImage,
|
|
159
|
-
ResizableVideo,
|
|
160
|
-
Comment,
|
|
161
|
-
CodeBlockLowlight.configure({
|
|
162
|
-
lowlight,
|
|
163
|
-
HTMLAttributes: {
|
|
164
|
-
class: "bg-gray-100 p-2 rounded font-mono text-sm overflow-auto",
|
|
165
|
-
},
|
|
166
|
-
}),
|
|
167
|
-
...(typo
|
|
168
|
-
? [
|
|
169
|
-
Spellcheck.configure({
|
|
170
|
-
spellcheckFn: (word: string) => typo.check(word),
|
|
171
|
-
}),
|
|
172
|
-
]
|
|
173
|
-
: []),
|
|
174
|
-
],
|
|
175
|
-
content: "",
|
|
176
|
-
editorProps: {
|
|
177
|
-
attributes: {
|
|
178
|
-
class: "min-h-full focus:outline-none p-0",
|
|
179
|
-
"data-placeholder": "Start typing here...",
|
|
180
|
-
},
|
|
181
|
-
},
|
|
182
|
-
immediatelyRender: false,
|
|
183
|
-
});
|
|
184
|
-
|
|
185
|
-
useEffect(() => {
|
|
186
|
-
return () => {
|
|
187
|
-
editor?.destroy();
|
|
188
|
-
};
|
|
189
|
-
}, [editor]);
|
|
190
|
-
|
|
191
|
-
const handleEditorClick = () => {
|
|
192
|
-
if (editor && !editor.isFocused) {
|
|
193
|
-
editor.commands.focus();
|
|
194
|
-
}
|
|
195
|
-
};
|
|
196
|
-
|
|
197
|
-
const saveVersion = () => {
|
|
198
|
-
if (!editor) return;
|
|
199
|
-
const content = editor.getJSON();
|
|
200
|
-
setVersions((prev) => [...prev, JSON.stringify(content)]);
|
|
201
|
-
setCurrentVersionIndex(versions.length);
|
|
202
|
-
};
|
|
203
|
-
|
|
204
|
-
const restoreVersion = (index: number) => {
|
|
205
|
-
if (!editor) return;
|
|
206
|
-
const versionContent = versions[index];
|
|
207
|
-
if (versionContent) {
|
|
208
|
-
editor.commands.setContent(JSON.parse(versionContent));
|
|
209
|
-
setCurrentVersionIndex(index);
|
|
210
|
-
}
|
|
211
|
-
};
|
|
212
|
-
|
|
213
|
-
if (isValid === false) {
|
|
214
|
-
return <div className="editor-error">⚠️ {error}</div>;
|
|
215
|
-
}
|
|
216
|
-
|
|
217
|
-
if (isValid === null) {
|
|
218
|
-
return <div className="editor-loading">🔍 Validating license...</div>;
|
|
219
|
-
}
|
|
220
|
-
|
|
221
|
-
if (!typo) {
|
|
222
|
-
return <div className="editor-loading">📖 Loading dictionary...</div>;
|
|
223
|
-
}
|
|
224
|
-
|
|
225
|
-
return (
|
|
226
|
-
<div className="editor-container">
|
|
227
|
-
{userVersion !== "free" && (
|
|
228
|
-
<div className="editor-toolbar">
|
|
229
|
-
<button
|
|
230
|
-
type="button"
|
|
231
|
-
onClick={saveVersion}
|
|
232
|
-
disabled={!editor}
|
|
233
|
-
className="editor-save-btn"
|
|
234
|
-
>
|
|
235
|
-
Save Version
|
|
236
|
-
</button>
|
|
237
|
-
|
|
238
|
-
<div className="editor-versions-wrapper">
|
|
239
|
-
{versions.length === 0 ? (
|
|
240
|
-
<span className="editor-no-versions">No saved versions</span>
|
|
241
|
-
) : (
|
|
242
|
-
versions.map((_, idx) => (
|
|
243
|
-
<button
|
|
244
|
-
key={idx}
|
|
245
|
-
type="button"
|
|
246
|
-
onClick={() => restoreVersion(idx)}
|
|
247
|
-
className={`editor-version-btn ${
|
|
248
|
-
idx === currentVersionIndex ? "active" : ""
|
|
249
|
-
}`}
|
|
250
|
-
title={`Restore Version ${idx + 1}`}
|
|
251
|
-
>
|
|
252
|
-
{`V${idx + 1}`}
|
|
253
|
-
</button>
|
|
254
|
-
))
|
|
255
|
-
)}
|
|
256
|
-
</div>
|
|
257
|
-
</div>
|
|
258
|
-
)}
|
|
259
|
-
|
|
260
|
-
{editor && userVersion && (
|
|
261
|
-
<TetronsToolbar editor={editor} version={userVersion} />
|
|
262
|
-
)}
|
|
263
|
-
|
|
264
|
-
<div
|
|
265
|
-
ref={wrapperRef}
|
|
266
|
-
className="editor-content-wrapper"
|
|
267
|
-
onClick={handleEditorClick}
|
|
268
|
-
>
|
|
269
|
-
{editor ? (
|
|
270
|
-
<>
|
|
271
|
-
<TiptapEditorContent editor={editor} />
|
|
272
|
-
<TableContextMenu editor={editor} />
|
|
273
|
-
</>
|
|
274
|
-
) : (
|
|
275
|
-
<div className="editor-loading">Loading editor...</div>
|
|
276
|
-
)}
|
|
277
|
-
</div>
|
|
278
|
-
</div>
|
|
279
|
-
);
|
|
280
|
-
}
|