@haprompt/react

@haprompt/react

This package provides a set of components and hooks for Haprompt that allow for text editing in React applications.

Getting started

Install haprompt and @haprompt/react:

npm install --save haprompt @haprompt/react

Below is an example of a basic plain text editor using haprompt and @haprompt/react (try it yourself).

import {$getRoot, $getSelection} from 'haprompt';
import {useEffect} from 'react';

import {HapromptComposer} from '@haprompt/react/HapromptComposer';
import {PlainTextPlugin} from '@haprompt/react/HapromptPlainTextPlugin';
import {ContentEditable} from '@haprompt/react/HapromptContentEditable';
import {HistoryPlugin} from '@haprompt/react/HapromptHistoryPlugin';
import {OnChangePlugin} from '@haprompt/react/HapromptOnChangePlugin';
import {useHapromptComposerContext} from '@haprompt/react/HapromptComposerContext';

const theme = {
  // Theme styling goes here
  ...
}

// When the editor changes, you can get notified via the
// HapromptOnChangePlugin!
function onChange(editorState) {
  editorState.read(() => {
    // Read the contents of the EditorState here.
    const root = $getRoot();
    const selection = $getSelection();

    console.log(root, selection);
  });
}

// Haprompt React plugins are React components, which makes them
// highly composable. Furthermore, you can lazy load plugins if
// desired, so you don't pay the cost for plugins until you
// actually use them.
function MyCustomAutoFocusPlugin() {
  const [editor] = useHapromptComposerContext();

  

useEffect(() => {
    // Focus the editor when the effect fires!
    editor.focus();
  }, [editor]);

  return null;
}

// Catch any errors that occur during Haprompt updates and log them
// or throw them as needed. If you don't throw them, Haprompt will
// try to recover gracefully without losing user data.
function onError(error) {
  throw error;
}

function Editor() {
  const initialConfig = {
    namespace: 'MyEditor',
    theme,
    onError,
  };

return (
    <HapromptComposer initialConfig={initialConfig}>
      <PlainTextPlugin
        contentEditable={<ContentEditable />}
        placeholder={<div>Enter some text...</div>}
      />
      <OnChangePlugin onChange={onChange} />
      <HistoryPlugin />
      <MyCustomAutoFocusPlugin />
    </HapromptComposer>
  );
}