rextending ویرایشگر Blocknote: یک نوار قالب بندی سفارشی با ویژگی های دارای AI

npm install @blocknote/core @blocknote/react @blocknote/mantine 

"use client"

import type React from "react"
import { useEffect, useState } from "react"
import "@blocknote/mantine/style.css"
import { BlockNoteView } from "@blocknote/mantine"


const Editor: React.FC<EditorProps> = ({ initialContent, editable }) => {


    const editor = useCreateBlockNote({
      // Feel free to include props from the official docs like initialContent for preloaded blocks
    })

    // This is just a simple article display, I used prose on the article for improved styling.
    return (
        <div className="flex-grow overflow-y-auto">
                <article className="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto py-8">
                    <BlockNoteView editor={editor} />
                article>
        div>
    )
}

export default Editor

'use client';

import { useBlockNoteEditor, useComponentsContext } from "@blocknote/react"
import { Sparkles, Loader } from "lucide-react"
import { useState } from 'react';

export function AIButton() {
    const editor = useBlockNoteEditor()
    const Components = useComponentsContext()!
    const [isLoading, setIsLoading] = useState(false);



    // The function to handle the response, takes the AI content (chose to use Markdown exclusively) and uses it.
    const handleAIResponse = async (content: string) => {
        // blocks -> the text found from the selection of the user (prompt)
        const blocks = editor.getSelection()?.blocks ?? [];
        // blocksFromMarkdown -> the processed and formatted blocks after a markdown conversion to the BlockNote format.
        const blocksFromMarkdown = await editor.tryParseMarkdownToBlocks(content);

// Replaces the blocks from the selection with the new blocks
        editor.replaceBlocks(blocks, blocksFromMarkdown);
    }

// My call to the API via fetch together with the selected text as a prompt.
    const callAI = async () => {
        setIsLoading(true);
        const selectedText = editor.getSelectedText();
        if (selectedText) {
            try {
// /api/ai handles the call with a response containing the content.
// Feel free to use any AI SDK of your choosing.
                const response = await fetch('/api/ai', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ prompt: selectedText }),
                })
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                const data = await response.json()
                handleAIResponse(data.content)
            } catch (error) {
                console.error('Error fetching AI response:', error)
            } finally {
                setIsLoading(false);
            }
        }
    }

    return (
        <>
            <Components.FormattingToolbar.Button
                mainTooltip={"AI Assistant"}
                onClick={callAI}
                isDisabled={isLoading}
            >
                {isLoading ? <Loader className="w-4 h-4 animate-spin" /> : <>AI <Sparkles className="ml-2 w-4 h-4" />>}
            Components.FormattingToolbar.Button>
        >
    )
}

"use client"

import React, { useEffect, useState } from "react"
import "@blocknote/mantine/style.css"
import { BlockNoteView } from "@blocknote/mantine"
import {
    UnnestBlockButton,
    ColorStyleButton,
    FileReplaceButton,
    FileCaptionButton,
    BasicTextStyleButton,
    BlockTypeSelect,
    FormattingToolbarController,
    FormattingToolbar,
    TextAlignButton,
    NestBlockButton,
    CreateLinkButton,
    useCreateBlockNote,
} from "@blocknote/react"
import { AIButton } from "./AIButton"
import { locales, type PartialBlock } from "@blocknote/core"
import debounce from "lodash.debounce"
import { toast } from "sonner"
import { Loader } from "lucide-react"

interface EditorProps {
    onChange: (value: string) => void
    initialContent?: string;
    editable?: boolean
}

const Editor: React.FC<EditorProps> = ({ onChange, initialContent, editable }) => {
    const locale = locales["en"]
    const [loading, setLoading] = useState(true)

    const editor = useCreateBlockNote({
        initialContent: initialContent
            ? (JSON.parse(initialContent) as PartialBlock[])
            : undefined,
        dictionary: {
            ...locale,
            placeholders: {
                ...locale.placeholders,
                default: "Welcome to DocsMaker! Press "https://dev.to/" for commands",
            },
        },
    })

    useEffect(() => {
        const debouncedOnChange = debounce(() => {
            const newContent = JSON.stringify(editor.document, null, 2)
            onChange(newContent)
            toast.success("Content saved!")
        }, 1000)

        editor.onEditorContentChange(debouncedOnChange)

        return () => {
            debouncedOnChange.cancel()
        }
    }, [editor, onChange])

    useEffect(() => {
        const timer = setTimeout(() => {
            setLoading(false)
        }, 500)

        return () => {
            clearTimeout(timer)
        }
    }, [])

    return (
        <div className="flex-grow overflow-y-auto">
            {loading ? (
                <div className="flex items-center justify-center py-32">
                    <Loader size={32} className="animate-spin" />
                div>
            ) : (
                <article className="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto py-8">
 {/* make sure that formattingToolbar is false and that the FormattingToolbarController component is added with the buttons you want to include */}
                    <BlockNoteView editor={editor} formattingToolbar={false} editable={editable}>
                        <FormattingToolbarController
                            formattingToolbar={() => (
                                <FormattingToolbar>
                                    <BlockTypeSelect key={"blockTypeSelect"} />
{/* Our personal addition! */}
                                    {editable && <AIButton key={"aiButton"} />}
                                    <FileCaptionButton key={"fileCaptionButton"} />
                                    <FileReplaceButton key={"replaceFileButton"} />
                                    <BasicTextStyleButton basicTextStyle={"bold"} key={"boldStyleButton"} />
                                    <BasicTextStyleButton basicTextStyle={"italic"} key={"italicStyleButton"} />
                                    <BasicTextStyleButton basicTextStyle={"underline"} key={"underlineStyleButton"} />
                                    <BasicTextStyleButton basicTextStyle={"strike"} key={"strikeStyleButton"} />
                                    <BasicTextStyleButton key={"codeStyleButton"} basicTextStyle={"code"} />
                                    <TextAlignButton textAlignment={"left"} key={"textAlignLeftButton"} />
                                    <TextAlignButton textAlignment={"center"} key={"textAlignCenterButton"} />
                                    <TextAlignButton textAlignment={"right"} key={"textAlignRightButton"} />
                                    <ColorStyleButton key={"colorStyleButton"} />
                                    <NestBlockButton key={"nestBlockButton"} />
                                    <UnnestBlockButton key={"unnestBlockButton"} />
                                    <CreateLinkButton key={"createLinkButton"} />
                                FormattingToolbar>
                            )}
                        />
                    BlockNoteView>
                article>
            )}
        div>
    )
}

export default Editor