Add support for clearing content and issues on ImageUpload Extension!

[siamahnaf]

If you can add support for clearing content!

I am facing another problem on ImageUpload extension

Following is my full code-

"use client"
import OriginalEditor, { BaseKit, Blockquote, Bold, BulletList, Clear, FontFamily, FontSize, Heading, ImageUpload, Indent, Italic, Link, Table, TextAlign, Emoji, History, SearchAndReplace, TextDirection, ColumnActionButton, Strike, Underline, Color, OrderedList, LineHeight, HorizontalRule } from "reactjs-tiptap-editor";
import "reactjs-tiptap-editor/style.css";
import { ReactS3Client } from "react-s3-typescript";

//S3 config
import { s3Config } from "@/Utils/s3.config";

//Interface
interface Props {
    value: string;
    onChange: (value: string) => void;
}

//Configurations
const extensions = [
    BaseKit.configure({
        placeholder: {
            showOnlyCurrent: true,
        },
        characterCount: {
            limit: 5_000,
        },
    }),
    History,
    SearchAndReplace,
    TextDirection,
    FontFamily.configure({ spacer: true }),
    FontSize,
    Heading,
    Bold.configure({ spacer: true }),
    Italic,
    Underline,
    Strike,
    Emoji,
    Color,
    BulletList,
    OrderedList,
    TextAlign.configure({ types: ["heading", "paragraph"], spacer: true }),
    Indent,
    LineHeight,
    Link.configure({ spacer: true }),
    ImageUpload.configure({
        upload: async (files: File) => {
            const s3 = new ReactS3Client({
                ...s3Config,
                dirName: "product"
            });
            const res = await s3.uploadFile(files as File);
            return process.env.NEXT_PUBLIC_IMAGE_URL + res.key;
        }
    }),
    Blockquote.configure({ spacer: true }),
    HorizontalRule,
    ColumnActionButton,
    Table,
    Clear
];

const RichTextEditor = ({ value, onChange }: Props) => {
    return (
        <div>
            <OriginalEditor
                output="html"
                content={value}
                onChangeContent={(value) => onChange(value)}
                extensions={extensions}
                dark={false}
                hideBubble
                contentClass="!border-gray-300"
            />
        </div>
    );
};

export default RichTextEditor;

Why ImageUpload button is disabled-

Where I am wrong?

[hunghg255]

@siamahnaf Hi, you need to add an Image extension anymore Refer playground demo: https://github.com/hunghg255/reactjs-tiptap-editor/blob/03c8cbca20869595018acb678e46a745e4f3b18a/playground/src/App.tsx#L104

[siamahnaf]

Can you please give me two more answer?

1. How to clear content? content={value} setting value to empty using state not clearing the content?

[hunghg255]

Can you please give me two more answer?

1. How to clear content? content={value} setting value to empty using state not clearing the content?

you can use ref from Editor

<RcTiptapEditor
      ref={refEditor}
      output='html'
      content={DEFAULT}
      onChangeContent={onValueChange}
      extensions={extensions}
      dark={theme === 'dark'}
      disabled={disable}
/>

<button
   onClick={() => {
        refEditor.current?.editor?.commands?.clearContent();
   }}
>
    Empty
</button>