Spaceweb Editor
v6.2.2

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 '@sprinklrjs/spaceweb-editor';
    import { Box } from '@sprinklrjs/spaceweb/box';
    import { ON_CHANGE } from '@sprinklrjs/spaceweb-editor/actionTypes';
    import type { BaseEditorAction } from '@sprinklrjs/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.

    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.

    NameTypeDefaultDescription
    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.

    NameTypeDefaultDescription
    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'
    fullPass "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
    trueThe 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.

    NameTypeDefaultDescription
    content
    string
    The content with which the editor content will be replaced
    emitUpdate
    boolean
    falseON_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.

TextEditor props

NameTypeDefaultDescription
autofocus
'start'| 'end'| number| boolean| null
Autofocus cursor to the specified position
className
string
Utility class names to be provided to Editor
editable
boolean
trueTo make editor editable or uneditable
initialHeight
number
The initial height of the editor. If not provided the editor will be height of single paragraph, you can make the editor take the available height in the container by passing styles through className.
initialValue
string
Initial Value to be displayed in Editor. Make sure the initial value does not change to prevent unnecessary rerender of Editor. The purpose of initialValue is to display the content on mount of editor and does not affect the editor if changes after mount, but the value change will cause an unnecessary rerender of editor.
keyboardShortcuts
KeyboardShortcuts
The keyboard shortcut map defined for the editor
maxHeight
number
Max height of the text editor
onAction
function
Handle Action Related to Editor. Action types that could be emitted are ON_KEYDOWN, ON_CHANGE, ON_BLUR, ON_FOCUS, ON_PASTE and ON_INIT.
placeholder
string
Placeholder string to be shown
ref
MutableRefObject<Spr.Null<Callbacks>>
A ref to access the callbacks related to editor for e.g. focus, appendContent and resetContent
registerCallbacks (deprecated)
RegisterCallbacks
To get the callbacks related to editor for e.g. focus, appendContent and resetContent. This prop is deprecated, use ref for accessing callbacks.
suggestions
SuggestionMap
To show a popover of menu items to be displayed when a particular key is pressed in editor

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