"use client"; import { useEditor, EditorContent } from "@tiptap/react"; import StarterKit from "@tiptap/starter-kit"; import TextAlign from "@tiptap/extension-text-align"; import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight"; import Image from "@tiptap/extension-image"; import Link from "@tiptap/extension-link"; import { useCallback, useEffect, useState } from "react"; import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon, BoldIcon, CodeIcon, Heading1Icon, Heading2Icon, Heading3Icon, ImageIcon, ItalicIcon, LinkIcon, ListIcon, ListOrderedIcon, UnlinkIcon, } from "lucide-react"; import css from "highlight.js/lib/languages/css"; import js from "highlight.js/lib/languages/javascript"; import ts from "highlight.js/lib/languages/typescript"; import html from "highlight.js/lib/languages/xml"; // load all languages with "all" or common languages with "common" import { common, createLowlight } from "lowlight"; // create a lowlight instance with all languages loaded const lowlight = createLowlight(common); // This is only an example, all supported languages are already loaded above // but you can also register only specific languages to reduce bundle-size lowlight.register("html", html); lowlight.register("css", css); lowlight.register("js", js); lowlight.register("ts", ts); export const RichTextEditor = ({ html, name, id, }: { html: string; name: string; id: string; }) => { const [editorContent, setEditorContent] = useState(html); const editor = useEditor({ extensions: [ Image, StarterKit.configure({ codeBlock: false, }), CodeBlockLowlight.configure({ lowlight }), TextAlign.configure({ types: ["heading", "paragraph"], }), Link, ], content: html, immediatelyRender: false, }); const setLink = useCallback(() => { if (!editor) return; const previousUrl = editor.getAttributes("link").href; const url = window.prompt("URL", previousUrl); // cancelled if (url === null) { return; } // empty if (url === "") { editor.chain().focus().extendMarkRange("link").unsetLink().run(); return; } // update link editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run(); }, [editor]); const addImage = useCallback(() => { const url = window.prompt("URL"); if (url) { // @ts-expect-error err editor.chain().focus().setImage({ src: url }).run(); } }, [editor]); useEffect(() => { if (!editor) { return; } editor.on("update", ({ editor }) => { const html = editor.getHTML(); // Get content as HTML setEditorContent(html); }); }, [editor]); if (!editor) { return

; } return (

{/* Toolbar */}

); };

Rich Text Editor

Description

Preview

Installation

Usage

Code

On this page