Anjing Webshells

Website : rimsha.abasa.com
: / var / www / talha_silentcontent / src / components /
Filename : Tiptap.tsx
back
"use client"
import { useEditor, EditorContent } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import { Toolbar } from './Toolbar'
import Heading from "@tiptap/extension-heading"
import TextAlign from '@tiptap/extension-text-align'
import Image from '@tiptap/extension-image'
import '@/components/customEditor.css'

export default function Tiptap({
    article,
    onChange,
}: {
    article: string,
    onChange: (richText: string) => void
}) {
    const editor = useEditor({
        editorProps: {
            attributes: {
              class:
                "min-h-[80px] w-full rounded-md rounded-br-none rounded-bl-none border border-input bg-transparent px-3 py-2 border-b-0 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 overflow-auto",
            },
          },
        extensions: [
          StarterKit.configure({
            orderedList: {
                HTMLAttributes: {
                  class: "list-decimal pl-5 pt-2",
                },
              },
              bulletList: {
                HTMLAttributes: {
                  class: "list-disc pl-5 pt-2",
                },
              },
          }), 
          TextAlign.configure({
            types: ['heading', 'paragraph'],
          }),
          Image,
        //   Heading.configure({
        //     HTMLAttributes: {
        //         class: 'text-xl font-bold'
                
        //     }
        //   })
        ],
        content: article,
        onUpdate({ editor }){
            onChange(editor.getHTML())
            console.log(editor.getHTML())
        }
      })
      return (
          <div className="flex flex-col justify-stretch min-h-[250px]">
            <Toolbar editor={editor} />
            <EditorContent editor={editor} />
          </div>
      )
}