feat: WordPress tarzı rich editor (TipTap + slash menu + MediaPicker)
WordPress Gutenberg + Notion karışımı blok editor. 4 admin formunda markdown textarea yerine gerçek WYSIWYG editor. RichEditor component (components/admin/rich-editor.tsx): - TipTap v3 (@tiptap/react + starter-kit + link + image + placeholder + underline) - Üst toolbar (her zaman görünür): - B / I / U (bold, italic, underline) - H1 / H2 / H3 - Bullet list / Ordered list / Quote / Code block - Link (URL prompt) - Görsel ekle (MediaPicker modal) - Undo / Redo - Slash menu: '/' yazınca blok seçim menüsü açılır - Notion tarzı keyboard navigation (↓↑ Enter Esc) - 8 blok tipi: H1/H2/H3/ul/ol/quote/code/hr - Image picker modal (toolbar görsel butonundan) - Mevcut MediaPicker'ı kullanır - 'Yeni görsel yükle' (progress bar ile) + 'Kütüphaneden seç' grid - HTML çıktı (hidden input ile form'a) - Mevcut content alanlarıyla backward compat Formlarda değişiklik (4 dosya): - app/admin/(protected)/blog/form.tsx → content - app/admin/(protected)/hizmetler/form.tsx → content - app/admin/(protected)/projeler/form.tsx → content - app/admin/(protected)/sektorler/form.tsx → content Public render (lib/content-render.ts): - renderContent() yardımcısı: - İçerik '<' ile başlıyorsa → HTML (direkt döner) - Aksi halde → markdown (marked.parse) - 4 detay sayfası bu helper'ı kullanıyor (blog/[slug], projeler/[slug], hizmetler/[slug], sektor/[slug]) - Eski markdown içerikler hala çalışıyor, yeni içerikler HTML olarak gelir 37 route, build temiz.
This commit is contained in:
@@ -9,6 +9,7 @@ import {
|
||||
Textarea,
|
||||
} from "@/components/admin/form";
|
||||
import { MediaPicker } from "@/components/admin/media-picker";
|
||||
import { RichEditor } from "@/components/admin/rich-editor";
|
||||
import { saveBlogPost } from "@/lib/admin-actions";
|
||||
import type { BlogPostRow } from "@/lib/types";
|
||||
import { Save } from "lucide-react";
|
||||
@@ -75,13 +76,19 @@ export function BlogForm({ post }: { post?: BlogPostRow }) {
|
||||
rows={3}
|
||||
placeholder="Liste/kart görünümünde gösterilecek kısa özet"
|
||||
/>
|
||||
<Textarea
|
||||
label="İçerik (Markdown)"
|
||||
name="content"
|
||||
defaultValue={post?.content}
|
||||
rows={14}
|
||||
placeholder={"# Başlık\n\nMarkdown desteklenir…"}
|
||||
/>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-[var(--navy)]">
|
||||
İçerik
|
||||
</span>
|
||||
<div className="mt-1.5">
|
||||
<RichEditor
|
||||
name="content"
|
||||
defaultValue={post?.content}
|
||||
placeholder="Yazıya başlayın… `/` ile başlık, görsel, liste ekleyin"
|
||||
minHeight={500}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<MediaPicker
|
||||
label="Kapak görseli"
|
||||
name="cover_image"
|
||||
|
||||
@@ -10,6 +10,7 @@ import {
|
||||
Textarea,
|
||||
} from "@/components/admin/form";
|
||||
import { MediaPicker } from "@/components/admin/media-picker";
|
||||
import { RichEditor } from "@/components/admin/rich-editor";
|
||||
import { saveService } from "@/lib/admin-actions";
|
||||
import type { FaqItem, ServiceRow } from "@/lib/types";
|
||||
|
||||
@@ -90,14 +91,21 @@ export function ServiceForm({ service }: { service?: ServiceRow }) {
|
||||
help="Listede ve anasayfa kartında gösterilir."
|
||||
/>
|
||||
|
||||
<Textarea
|
||||
label="Detay içerik (Markdown)"
|
||||
name="content"
|
||||
defaultValue={service?.content}
|
||||
rows={10}
|
||||
placeholder={"## Yaklaşım\n\nMarkdown desteklenir…"}
|
||||
help="Hizmet detay sayfasında ana içerik olarak gösterilir."
|
||||
/>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-[var(--navy)]">
|
||||
Detay içerik
|
||||
</span>
|
||||
<div className="mt-1.5">
|
||||
<RichEditor
|
||||
name="content"
|
||||
defaultValue={service?.content}
|
||||
placeholder="Hizmetin detaylarını anlatın… `/` ile blok ekleyin"
|
||||
/>
|
||||
</div>
|
||||
<p className="mt-1 text-xs text-[var(--muted)]">
|
||||
Hizmet detay sayfasında ana içerik olarak gösterilir.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Textarea
|
||||
label="Özellikler"
|
||||
|
||||
@@ -10,6 +10,7 @@ import {
|
||||
Textarea,
|
||||
} from "@/components/admin/form";
|
||||
import { MediaPicker } from "@/components/admin/media-picker";
|
||||
import { RichEditor } from "@/components/admin/rich-editor";
|
||||
import { saveProject } from "@/lib/admin-actions";
|
||||
import { listServices } from "@/lib/data";
|
||||
import type { ProjectRow } from "@/lib/types";
|
||||
@@ -95,16 +96,21 @@ export async function ProjectForm({ project }: { project?: ProjectRow }) {
|
||||
rows={3}
|
||||
/>
|
||||
|
||||
<Textarea
|
||||
label="Vaka çalışması içeriği (Markdown)"
|
||||
name="content"
|
||||
defaultValue={project?.content}
|
||||
rows={12}
|
||||
placeholder={
|
||||
"## Müşteri\n\n## Problem\n\n## Çözüm\n\n## Sonuç"
|
||||
}
|
||||
help="Proje detay sayfasında uzun anlatım olarak gösterilir."
|
||||
/>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-[var(--navy)]">
|
||||
Vaka çalışması içeriği
|
||||
</span>
|
||||
<div className="mt-1.5">
|
||||
<RichEditor
|
||||
name="content"
|
||||
defaultValue={project?.content}
|
||||
placeholder="Müşteri / Problem / Çözüm / Sonuç…"
|
||||
/>
|
||||
</div>
|
||||
<p className="mt-1 text-xs text-[var(--muted)]">
|
||||
Proje detay sayfasında uzun anlatım olarak gösterilir.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<MediaPicker
|
||||
label="Galeri görselleri"
|
||||
|
||||
@@ -10,6 +10,7 @@ import {
|
||||
Textarea,
|
||||
} from "@/components/admin/form";
|
||||
import { MediaPicker } from "@/components/admin/media-picker";
|
||||
import { RichEditor } from "@/components/admin/rich-editor";
|
||||
import { saveIndustry } from "@/lib/admin-actions";
|
||||
import type { FaqItem, IndustryRow } from "@/lib/types";
|
||||
|
||||
@@ -75,13 +76,18 @@ export function IndustryForm({ row }: { row?: IndustryRow }) {
|
||||
placeholder="Avukatlar için KVKK uyumlu, randevu sistemli, SEO odaklı modern web siteleri."
|
||||
/>
|
||||
|
||||
<Textarea
|
||||
label="İçerik (Markdown)"
|
||||
name="content"
|
||||
rows={10}
|
||||
defaultValue={row?.content}
|
||||
placeholder="## Sektör özellikleri\n\nAvukatlar için..."
|
||||
/>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-[var(--navy)]">
|
||||
İçerik
|
||||
</span>
|
||||
<div className="mt-1.5">
|
||||
<RichEditor
|
||||
name="content"
|
||||
defaultValue={row?.content}
|
||||
placeholder="Sektörünüz için içerik yazın…"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Textarea
|
||||
label="Özellikler"
|
||||
|
||||
Reference in New Issue
Block a user