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"><TextEditorinitialValue=""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
andresetContent
.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.
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 contentstring | { id? string, label: string } (for AtomicTextContent)The content to be inserted in Editor. position'end'|numberThe position at which the content is inserted preserveWhiteSpaceboolean | '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 updateSelectionbooleantrue 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 contentstringThe content with which the editor content will be replaced emitUpdatebooleanfalse ON_CHANGE action is emitted if true focusPosition'end'|numberThe cursor position after the content is replaced Text Editor also supports KeyboardShortcuts and Suggestions features. You can know more about these features on their respective pages.
TextEditor props
Name | Type | Default | Description |
---|---|---|---|
autofocus | 'start'| 'end'| number| boolean| null | Autofocus cursor to the specified position | |
className | string | Utility class names to be provided to Editor | |
editable | boolean | true | To 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