{t("fieldPublished")}
diff --git a/web/admin/src/components/ui/rich-text-editor.tsx b/web/admin/src/components/ui/rich-text-editor.tsx
new file mode 100644
index 0000000..8da28ab
--- /dev/null
+++ b/web/admin/src/components/ui/rich-text-editor.tsx
@@ -0,0 +1,158 @@
+"use client";
+
+import { useEffect } from "react";
+import { useEditor, EditorContent, type Editor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Link from "@tiptap/extension-link";
+import Placeholder from "@tiptap/extension-placeholder";
+import {
+ Bold,
+ Italic,
+ Strikethrough,
+ Heading1,
+ Heading2,
+ Heading3,
+ List,
+ ListOrdered,
+ Quote,
+ Code,
+ Link2,
+ Link2Off,
+ Undo2,
+ Redo2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+type Props = {
+ value: string;
+ onChange: (html: string) => void;
+ dir?: "rtl" | "ltr";
+ placeholder?: string;
+};
+
+/** Headless TipTap rich-text editor producing HTML. Used for long-form content
+ * (blog posts) edited by trusted admins. */
+export function RichTextEditor({ value, onChange, dir = "rtl", placeholder }: Props) {
+ const editor = useEditor({
+ immediatelyRender: false, // required under Next.js SSR to avoid hydration mismatch
+ extensions: [
+ StarterKit.configure({
+ heading: { levels: [1, 2, 3] },
+ }),
+ Link.configure({ openOnClick: false, autolink: true, HTMLAttributes: { rel: "noopener", target: "_blank" } }),
+ Placeholder.configure({ placeholder: placeholder ?? "" }),
+ ],
+ content: value || "",
+ editorProps: {
+ attributes: {
+ dir,
+ class: "meezi-rte-content min-h-44 px-3 py-2 focus:outline-none",
+ },
+ },
+ onUpdate: ({ editor }) => onChange(editor.getHTML()),
+ });
+
+ // Keep the editor in sync when the external value changes (load existing post / reset).
+ useEffect(() => {
+ if (!editor) return;
+ const current = editor.getHTML();
+ if (value !== current) {
+ editor.commands.setContent(value || "", false);
+ }
+ }, [value, editor]);
+
+ return (
+
+
+
+
+
+ );
+}
+
+function Toolbar({ editor }: { editor: Editor | null }) {
+ if (!editor) return
;
+
+ const setLink = () => {
+ const prev = editor.getAttributes("link").href as string | undefined;
+ const url = window.prompt("URL", prev ?? "https://");
+ if (url === null) return;
+ if (url === "") {
+ editor.chain().focus().extendMarkRange("link").unsetLink().run();
+ return;
+ }
+ editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+ };
+
+ return (
+
+ editor.chain().focus().toggleBold().run()} active={editor.isActive("bold")} title="Bold">
+ editor.chain().focus().toggleItalic().run()} active={editor.isActive("italic")} title="Italic">
+ editor.chain().focus().toggleStrike().run()} active={editor.isActive("strike")} title="Strikethrough">
+
+ editor.chain().focus().toggleHeading({ level: 1 }).run()} active={editor.isActive("heading", { level: 1 })} title="H1">
+ editor.chain().focus().toggleHeading({ level: 2 }).run()} active={editor.isActive("heading", { level: 2 })} title="H2">
+ editor.chain().focus().toggleHeading({ level: 3 }).run()} active={editor.isActive("heading", { level: 3 })} title="H3">
+
+ editor.chain().focus().toggleBulletList().run()} active={editor.isActive("bulletList")} title="Bullet list">
+ editor.chain().focus().toggleOrderedList().run()} active={editor.isActive("orderedList")} title="Numbered list">
+ editor.chain().focus().toggleBlockquote().run()} active={editor.isActive("blockquote")} title="Quote">
+ editor.chain().focus().toggleCodeBlock().run()} active={editor.isActive("codeBlock")} title="Code block">
+ );
+}
+
+function Btn({
+ onClick,
+ active,
+ title,
+ disabled,
+ children,
+}: {
+ onClick: () => void;
+ active: boolean;
+ title: string;
+ disabled?: boolean;
+ children: React.ReactNode;
+}) {
+ return (
+
+ );
+}
+
+function Sep() {
+ return
;
+}
diff --git a/web/website/src/app/[locale]/blog/[slug]/page.tsx b/web/website/src/app/[locale]/blog/[slug]/page.tsx
index 7ecfdca..a44976e 100644
--- a/web/website/src/app/[locale]/blog/[slug]/page.tsx
+++ b/web/website/src/app/[locale]/blog/[slug]/page.tsx
@@ -126,7 +126,12 @@ export default async function BlogPostPage({
{/* Content */}
-
+ {/* New posts are authored as HTML (rich editor); older posts are MDX/Markdown. */}
+ {/^\s*
+ ) : (
+
+ )}
{/* Back link */}