Spaceweb Editor

v6.0.1

TextEditor

• Text editor is simple plain editor. Here is a barebones example showcasing how to integrate this editor into your app.

  import { useCallback } from 'react';
  import { TextEditor } from 'spaceweb-editor';
  import { Box } from 'spaceweb/box';
  import { ON_CHANGE } from 'spaceweb-editor/actionTypes';
  import type { BaseEditorAction } from 'spaceweb-editor/types';
  
  export default () => {
    const handleAction = useCallback((action: BaseEditorAction) => {
      if (action.type === ON_CHANGE) {
        console.log(action.payload);
      }
    }, []);
  
    return (
      <Box className="mt-5 mb-10 border-1 spr-border-03 border-solid rounded-8 text-14 h-40">
        <TextEditor
          initialValue=""
          placeholder="Enter Text"
          autofocus="end"
          className="px-3 pt-2 h-full"
          onAction={handleAction}
        />
      </Box>
    );
  };

• Access editor callbacks

  Text Editor is built upon Prosemirror schema which has certain restrictions and limitations to keep the schema consistent. It handles all content changes itself and only takes content on initialization. To facilitate making changes to editor content state after initialization we have exposed certain editor APIs which you can use to append or change content and focus on any position. The callbacks available are focus, appendContent and resetContent.

  You can use Editor API callbacks through:-

  1. ref: All commands are available through callback instance which is bind to the ref passed to the HTMLEditor or TextEditor.

  2. registerCallbacks prop (deprecated): This prop is a callback function which executes when the editor mounts and passes callbacks as params to it. You can also return a callback from it which is run when the editor unmounts or is destroyed.

  In the given example we use appendContent callback to append a text in editor when the button is clicked.

  Insert Content

  JS

  TS

  focus

  This commands sets the focus back to the editor. When a user clicks on a button outside the editor, the browser sets the focus to the button, in most cases you want the focus back to the editor again. In the below example when you click on button it bring focus back to the editor.

  Name	Type	Default	Description
  focusPosition	'start' | 'end' | 'all' | number | boolean | null (false)	By default the cursor position is restored to previous one.	Focus the editor and places cursor at the given position

  appendContent

  This command inserts content in the editor. This command is pretty flexible and can be configured according to your need.

  Name	Type	Default	Description
  content	string | { id? string, label: string } (for AtomicTextContent)		The content to be inserted in Editor.
  position	'end'|number		The position at which the content is inserted
  preserveWhiteSpace	boolean | 'full'	full	Pass "full" to preserve whitespace entirely and pass true to preserveWhiteSpace, but normalize newline to spaces, and false to collapse whitespace.
  type	'text'| 'richText'| 'atomicTextContent'		The type of content to be inserted
  updateSelection	boolean	true	The cursor position is updated if true

  resetContent

  This command replaces the editor content with a new one. Its basically the same as setting the content on initialization.

  Name	Type	Default	Description
  content	string		The content with which the editor content will be replaced
  emitUpdate	boolean	false	ON_CHANGE action is emitted if true
  focusPosition	'end'|number		The cursor position after the content is replaced

  getSelectedContent

  This command takes no arguments and returns an object which has the html and text string of the current selected content in the editor.

• Text Editor also supports KeyboardShortcuts and Suggestions features. You can know more about these features on their respective pages.

You can check the implementation of the component for more details.

TextEditor exports

You can import this module like so:

import {TextEditor} from 'spaceweb-editor'

It exports the following components or utility functions:

• TextEditor