@mittirorg/react-richtext NPM

@mittirorg/react-richtext

A rich text editor component for React.

Installation

You can install the package via npm:

npm install @mittirorg/react-richtext

or via yarn:

yarn add @mittirorg/react-richtext

Usage

Here’s a basic example of how to use the RichTextEditor component:

import React, { useState, useRef } from 'react';
import RichTextEditor, {
  IEditorProps,
  IFetchSuggestions,
  IRenderSuggestions,
  IRenderHint,
  IHandleLinks,
  IHandleEntitiesCb,
  IEntityInfo,
} from '@mittirorg/react-richtext';

const InputBox = () => {
  // Initialize editor state
  const [editorState, setEditorState] = useState(null);
  const [isTriggerInserted, setTriggerInserted] = useState(false);
  const editorContainerRef = useRef(null);

  const fetchSuggestions: IFetchSuggestions = async (searchText, triggerKey) => {
    // Fetch suggestions based on searchText and triggerKey
    // Replace with actual suggestion fetching logic
    return {
      suggestions: [{ viewText: 'Suggestion 1' }, { viewText: 'Suggestion 2' }],
      showHint: true,
    };
  };

  const renderSuggestions: IRenderSuggestions = (
    position,
    suggestions,
    currentTriggerKey,
    onClose,
    handleAddEntity,
    hideSuggestions,
  ) => {
    // Render suggestions based on position, suggestions, currentTriggerKey, etc.
    // Replace with actual rendering logic
    return (
      <div
        style={{
          position: 'absolute',
          top: position.bottom,
          left: position.left,
        }}
      >
        {suggestions.map((suggestion, index) => (
          <div key={index} onClick={() => handleAddEntity(suggestion)}>
            {suggestion.viewText}
          </div>
        ))}
      </div>
    );
  };

  const renderHint: IRenderHint = (position, currentTriggerKey, onClose, hideSuggestions) => {
    // Render hint based on position, currentTriggerKey, etc.
    // Replace with actual rendering logic
    return (
      <div style={{ position: 'absolute', top: position.bottom, left: position.left }}>
        <div>Hint for {currentTriggerKey}</div>
      </div>
    );
  };

  const handleLinks: IHandleLinks = (type, data) => {
    // Handle links based on type and data
    // Replace with actual link handling logic
    console.log('Link handling:', type, data);
  };

  const handleEntitiesCb: IHandleEntitiesCb = (entityData, triggerKey) => {
    // Handle entities based on entityData and triggerKey
    // Replace with actual entity handling logic
    console.log('Entity handling:', entityData, triggerKey);
  };

  const editorProps: IEditorProps = {
    isTriggerInserted,
    possibleTriggerKeys: ['@', '#'],
    placeholder: 'Write something...',
    editorContainerRef,
    initialState: editorState,
    setEditorState,
    fetchSuggestions,
    renderSuggestions,
    renderHint,
    handleLinks,
    handleEntitiesCb,
    resetIsTriggerInserted: () => setTriggerInserted(false),
    onFocusCb: () => console.log('Editor focused'),
  };

  return (
    <div>
      <RichTextEditor {...editorProps} />
    </div>
  );
};

export default InputBox;

Props

Name	Type	Description
isTriggerInserted?	boolean	Indicates if a trigger is inserted.
possibleTriggerKeys?	Array	Array of possible trigger keys.
placeholder	string	Placeholder text for the editor.
editorContainerRef	React.MutableRefObject	Ref to the editor container.
children	React.ReactNode	Child components.
fontStyleClass?	string	CSS class for editor font style.
initialState?	IEditorState	Initial state of the editor.
externalTriggerKey?	string	External trigger key.
setEditorState	(editorState: EditorState) => void	Function to set editor state.
fetchSuggestions?	IFetchSuggestions	Function to fetch suggestions.
renderSuggestions?	IRenderSuggestions	Function to render suggestions.
renderHint?	IRenderHint	Function to render hints.
handleLinks?	IHandleLinks	Function to handle links.
handleEntitiesCb?	IHandleEntitiesCb	Function to handle entities.
resetIsTriggerInserted?	() => void	Function to reset trigger insertion.
onFocusCb?	() => void	Callback on editor focus.

Prop Definition

Name	Type	Description
IFetchSuggestions	(searchText: string, triggerKey: string) => Promise<{ suggestions: Array, showHint: boolean }>	Function to fetch suggestions based on searchText and triggerKey.
IRenderSuggestions	(position: { bottom: number; top: number; left: number; }, suggestions: Array, currentTriggerKey: string, onClose: () => void, handleAddEntity: (entityInfoData: IEntityInfo) => void, hideSuggestions: () => void) => JSX.Element	Function to render suggestions with specified position, suggestions, current trigger key, and callbacks for actions.
IRenderHint	(position: { bottom: number; top: number; left: number; }, currentTriggerKey: string, onClose: () => void, hideSuggestions: () => void) => JSX.Element	Function to render a hint with specified position, current trigger key, and callbacks for actions.
IHandleLinks	(type: 'add'	'delete', data: { meta: IEntityInfo, offsetKey: string }) => void	Function to handle links based on the type of action ('add' or 'delete') and the provided data.
IHandleEntitiesCb	(entityData: IEntityInfo, triggerKey: string) => void	Function to handle entity data and trigger key.