@sinianluoye/rich-text-area

a text area with image

DEMO

Usage

<RichTextArea 
    ref={ref}
    disabled={false}
    onEditorValueChange={(value) => {console.log("onEditorValueChange:", value)}}
    onFocus={(event) => {console.log("onFocus:", event)}}
    onPressEnter={(event) => {console.log("onPressEnter:", event)}}
    onCompositionEnd={() => {console.log("onCompositionEnd")}}
    onCompositionStart={() => {console.log("onCompositionStart")}}
></RichTextArea>

Options

type RichTextAreaProps = {
  disabled?: boolean;
  border?: string;
  padding?: string;
  lineHeight?: string;
  paddingBottom?: string;
  maxHeight?: string;
  placeholder?: string;
  onEditorValueChange?: (value: RichTextAreaElementType[]) => void;
  onCompositionStart?: () => void;
  onCompositionEnd?: () => void;
  onFocus?: (event: React.FocusEvent) => void;
  onPressEnter?: (event: React.KeyboardEvent) => void;
  className?: string;
};

type RichTextAreaRef = {
  clearContent: () => void;
  insertText: (text: string) => void;
  insertImage: (url: string) => void;
  focus: () => void;
  blur: () => void;
};

Development

# install dependencies
$ pnpm install

# develop library by docs demo
$ pnpm start

# build library source code
$ pnpm run build

# build library source code in watch mode
$ pnpm run build:watch

# build docs
$ pnpm run docs:build

# Locally preview the production build.
$ pnpm run docs:preview

# check your project for potential problems
$ pnpm run doctor

LICENSE

MIT