TipTap v3 مع Next.js 15: دليل بناء محرر نصوص غني للإنتاج

npx create-next-app@latest tiptap-editor --typescript --tailwind --app --src-dir=false --import-alias "@/*"
cd tiptap-editor

npm install @tiptap/react @tiptap/starter-kit @tiptap/pm
npm install @tiptap/extension-link @tiptap/extension-image
npm install @tiptap/extension-placeholder @tiptap/extension-table
npm install @tiptap/extension-table-row @tiptap/extension-table-cell @tiptap/extension-table-header

"use client";
 
import { useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import Link from "@tiptap/extension-link";
import Image from "@tiptap/extension-image";
import Placeholder from "@tiptap/extension-placeholder";
import Table from "@tiptap/extension-table";
import TableRow from "@tiptap/extension-table-row";
import TableCell from "@tiptap/extension-table-cell";
import TableHeader from "@tiptap/extension-table-header";
import Toolbar from "./Toolbar";
 
type EditorProps = {
  content?: string;
  onChange?: (html: string, json: unknown) => void;
  editable?: boolean;
};
 
export default function Editor({ content = "", onChange, editable = true }: EditorProps) {
  const editor = useEditor({
    extensions: [
      StarterKit.configure({
        heading: { levels: [1, 2, 3] },
      }),
      Link.configure({
        openOnClick: false,
        autolink: true,
        HTMLAttributes: { class: "text-blue-600 underline" },
      }),
      Image.configure({ inline: false, allowBase64: false }),
      Placeholder.configure({
        placeholder: "ابدأ الكتابة هنا...",
      }),
      Table.configure({ resizable: true }),
      TableRow,
      TableHeader,
      TableCell,
    ],
    content,
    editable,
    immediatelyRender: false,
    editorProps: {
      attributes: {
        class: "prose prose-slate max-w-none focus:outline-none min-h-[320px] p-4",
      },
    },
    onUpdate: ({ editor }) => {
      onChange?.(editor.getHTML(), editor.getJSON());
    },
  });
 
  if (!editor) return null;
 
  return (
    <div className="border rounded-lg bg-white shadow-sm">
      {editable && <Toolbar editor={editor} />}
      <EditorContent editor={editor} />
    </div>
  );
}

npm install -D @tailwindcss/typography

@import "tailwindcss";
@plugin "@tailwindcss/typography";

"use client";
 
import type { Editor } from "@tiptap/react";
import {
  Bold, Italic, Strikethrough, Code, Heading1, Heading2, Heading3,
  List, ListOrdered, Quote, Undo, Redo, Link as LinkIcon, Image as ImgIcon,
  Table as TableIcon,
} from "lucide-react";
 
type Props = { editor: Editor };
 
function ToolbarButton({
  onClick,
  active,
  disabled,
  children,
  title,
}: {
  onClick: () => void;
  active?: boolean;
  disabled?: boolean;
  children: React.ReactNode;
  title: string;
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      disabled={disabled}
      title={title}
      className={`p-2 rounded hover:bg-slate-100 transition ${
        active ? "bg-slate-200 text-slate-900" : "text-slate-600"
      } disabled:opacity-40`}
    >
      {children}
    </button>
  );
}
 
export default function Toolbar({ editor }: Props) {
  const addLink = () => {
    const url = window.prompt("أدخل الرابط");
    if (url === null) return;
    if (url === "") {
      editor.chain().focus().unsetLink().run();
      return;
    }
    editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
  };
 
  const addTable = () => {
    editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
  };
 
  return (
    <div className="flex flex-wrap gap-1 p-2 border-b bg-slate-50 sticky top-0 z-10">
      <ToolbarButton title="Bold" onClick={() => editor.chain().focus().toggleBold().run()} active={editor.isActive("bold")}>
        <Bold size={16} />
      </ToolbarButton>
      <ToolbarButton title="Italic" onClick={() => editor.chain().focus().toggleItalic().run()} active={editor.isActive("italic")}>
        <Italic size={16} />
      </ToolbarButton>
      <ToolbarButton title="Strike" onClick={() => editor.chain().focus().toggleStrike().run()} active={editor.isActive("strike")}>
        <Strikethrough size={16} />
      </ToolbarButton>
      <ToolbarButton title="Code" onClick={() => editor.chain().focus().toggleCode().run()} active={editor.isActive("code")}>
        <Code size={16} />
      </ToolbarButton>
      <span className="w-px bg-slate-300 mx-1" />
      <ToolbarButton title="H1" onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()} active={editor.isActive("heading", { level: 1 })}>
        <Heading1 size={16} />
      </ToolbarButton>
      <ToolbarButton title="H2" onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()} active={editor.isActive("heading", { level: 2 })}>
        <Heading2 size={16} />
      </ToolbarButton>
      <ToolbarButton title="H3" onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()} active={editor.isActive("heading", { level: 3 })}>
        <Heading3 size={16} />
      </ToolbarButton>
      <span className="w-px bg-slate-300 mx-1" />
      <ToolbarButton title="Bullet list" onClick={() => editor.chain().focus().toggleBulletList().run()} active={editor.isActive("bulletList")}>
        <List size={16} />
      </ToolbarButton>
      <ToolbarButton title="Ordered list" onClick={() => editor.chain().focus().toggleOrderedList().run()} active={editor.isActive("orderedList")}>
        <ListOrdered size={16} />
      </ToolbarButton>
      <ToolbarButton title="Quote" onClick={() => editor.chain().focus().toggleBlockquote().run()} active={editor.isActive("blockquote")}>
        <Quote size={16} />
      </ToolbarButton>
      <span className="w-px bg-slate-300 mx-1" />
      <ToolbarButton title="Link" onClick={addLink} active={editor.isActive("link")}>
        <LinkIcon size={16} />
      </ToolbarButton>
      <ToolbarButton title="Table" onClick={addTable}>
        <TableIcon size={16} />
      </ToolbarButton>
      <span className="w-px bg-slate-300 mx-1" />
      <ToolbarButton title="Undo" onClick={() => editor.chain().focus().undo().run()} disabled={!editor.can().undo()}>
        <Undo size={16} />
      </ToolbarButton>
      <ToolbarButton title="Redo" onClick={() => editor.chain().focus().redo().run()} disabled={!editor.can().redo()}>
        <Redo size={16} />
      </ToolbarButton>
    </div>
  );
}

npm install lucide-react

"use client";
 
import { useState } from "react";
import Editor from "@/components/editor/Editor";
 
export default function EditorPage() {
  const [html, setHtml] = useState("");
  const [json, setJson] = useState<unknown>(null);
  const [saving, setSaving] = useState(false);
 
  const save = async () => {
    setSaving(true);
    const res = await fetch("/api/documents", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ html, json }),
    });
    setSaving(false);
    if (!res.ok) alert("فشل الحفظ");
  };
 
  return (
    <main className="max-w-3xl mx-auto p-8 space-y-4">
      <h1 className="text-3xl font-bold">مستند جديد</h1>
      <Editor onChange={(h, j) => { setHtml(h); setJson(j); }} />
      <button
        onClick={save}
        disabled={saving}
        className="px-4 py-2 bg-slate-900 text-white rounded hover:bg-slate-800 disabled:opacity-50"
      >
        {saving ? "جارٍ الحفظ..." : "حفظ"}
      </button>
    </main>
  );
}

import { NextResponse } from "next/server";
 
type Payload = { html: string; json: unknown };
 
export async function POST(req: Request) {
  const body = (await req.json()) as Payload;
 
  if (!body.json) {
    return NextResponse.json({ error: "Missing json" }, { status: 400 });
  }
 
  // استبدل هذا باتصال قاعدة البيانات لديك مثل Drizzle أو Prisma.
  // await db.insert(documents).values({ html: body.html, json: body.json });
 
  return NextResponse.json({ ok: true });
}

import { NextResponse } from "next/server";
import { writeFile } from "node:fs/promises";
import { randomUUID } from "node:crypto";
import path from "node:path";
 
export async function POST(req: Request) {
  const form = await req.formData();
  const file = form.get("file") as File | null;
  if (!file) return NextResponse.json({ error: "No file" }, { status: 400 });
 
  const buffer = Buffer.from(await file.arrayBuffer());
  const ext = path.extname(file.name) || ".png";
  const name = `${randomUUID()}${ext}`;
  const dest = path.join(process.cwd(), "public", "uploads", name);
 
  await writeFile(dest, buffer);
  return NextResponse.json({ url: `/uploads/${name}` });
}

const uploadImage = async () => {
  const input = document.createElement("input");
  input.type = "file";
  input.accept = "image/*";
  input.onchange = async () => {
    const file = input.files?.[0];
    if (!file) return;
    const form = new FormData();
    form.append("file", file);
    const res = await fetch("/api/uploads", { method: "POST", body: form });
    const { url } = await res.json();
    editor.chain().focus().setImage({ src: url, alt: file.name }).run();
  };
  input.click();
};

import { generateHTML } from "@tiptap/html";
import StarterKit from "@tiptap/starter-kit";
import Link from "@tiptap/extension-link";
import Image from "@tiptap/extension-image";
import Table from "@tiptap/extension-table";
import TableRow from "@tiptap/extension-table-row";
import TableCell from "@tiptap/extension-table-cell";
import TableHeader from "@tiptap/extension-table-header";
 
type Params = { params: Promise<{ id: string }> };
 
export default async function DocumentPage({ params }: Params) {
  const { id } = await params;
  const doc = await loadDocumentById(id); // نفذ الاستعلام حسب قاعدة بياناتك
 
  const html = generateHTML(doc.json, [
    StarterKit,
    Link,
    Image,
    Table,
    TableRow,
    TableHeader,
    TableCell,
  ]);
 
  return (
    <article
      className="prose prose-slate max-w-3xl mx-auto p-8"
      dangerouslySetInnerHTML={{ __html: html }}
    />
  );
}

npm install @tiptap/extension-collaboration yjs y-websocket

import Collaboration from "@tiptap/extension-collaboration";
import * as Y from "yjs";
import { WebsocketProvider } from "y-websocket";
 
const ydoc = new Y.Doc();
const provider = new WebsocketProvider("wss://your-ws-server", "room-1", ydoc);
 
const editor = useEditor({
  extensions: [
    StarterKit.configure({ history: false }),
    Collaboration.configure({ document: ydoc }),
  ],
});

import DOMPurify from "isomorphic-dompurify";
const safe = DOMPurify.sanitize(html, { USE_PROFILES: { html: true } });

import dynamic from "next/dynamic";
 
const Editor = dynamic(() => import("@/components/editor/Editor"), {
  ssr: false,
  loading: () => <div className="h-80 animate-pulse bg-slate-100 rounded-lg" />,
});

npm run dev