Skip to main content
Version: 1.1

BridgeState

The BridgeState is the latest state of the editor webview on the native side, it's extendable by BridgeExtensions and is generally used with useBridgeState

The list below is the interface of BridgeState in case you use TenTapStarterkit or using all the BridgeExtensions the lib exports, on each prop we specify what bridgeExtension adds it

BridgeState properties​

editable​

boolean
Is the editor editable or not
extended by CoreBridge

empty​

boolean
Is the editor empty or not
extended by CoreBridge

selection​

{ from: number; to: number }
The selection on the editor-web. from and to are ProseMirror document positions, not character offsets: every block boundary adds a position, so they don't index into the string from getText(). To read the selected text use getSelectedText.
extended by CoreBridge

isFocused​

boolean
true when the editor is focused
extended by CoreBridge

isReady​

boolean
true when the editor is fully loaded and can receive commands. It becomes true as soon as the web editor is created, whether or not it is editable or focused, and goes back to false while the WebView reloads (for example after the system kills its content process). You don't have to wait for it before calling editor methods: commands sent earlier are queued.
extended by CoreBridge

isBlockquoteActive​

boolean
true when the cursor is where blockquote is active
extended by BlockquoteBridge

canToggleBlockquote​

boolean
true when it's possible to toggle blockquote
extended by BlockquoteBridge

isCodeActive​

boolean
true when the cursor is where code is active
extended by CodeBridge

canToggleCode​

boolean
true when it's possible to toggle code
extended by CodeBridge

isBoldActive​

boolean
true when the cursor is where bold is active
extended by BoldBridge

canToggleBold​

boolean
true when it's possible to toggle bold
extended by BoldBridge

isItalicActive​

boolean
true when the cursor is where italic is active
extended by ItalicBridge

canToggleItalic​

boolean
true when it's possible to toggle italic
extended by ItalicBridge

isUnderlineActive​

boolean
true when the cursor is where underline is active
extended by UnderlineBridge

canToggleUnderline​

boolean
true when it's possible to toggle underline
extended by UnderlineBridge

isStrikeActive​

boolean
true when the cursor is where Strike is active
extended by StrikeBridge

canToggleStrike​

boolean
true when it's possible to toggle Strike
extended by StrikeBridge

isBulletListActive​

boolean
true when the cursor is where bullet list is active
extended by BulletListBridge

canToggleBulletList​

boolean
true when it's possible to toggle bullet list
extended by BulletListBridge

isOrderedListActive​

boolean
true when the cursor is where ordered list is active
extended by OrderedListBridge

canToggleOrderedList​

boolean
true when it's possible to toggle ordered list
extended by OrderedListBridge

isTaskListActive​

boolean
true when the cursor is where task list is active
extended by TaskListBridge

canToggleTaskList​

boolean
true when it's possible to toggle task list
extended by TaskListBridge

canLiftTaskListItem​

boolean
true when it's possible to lift a task list item
extended by TaskListBridge

canSinkTaskListItem​

boolean
true when it's possible to sink a task list item
extended by TaskListBridge

headingLevel​

number | undefined
undefined when no heading is applied, number of the heading level
extended by HeadingBridge

canToggleHeading​

boolean
true when it's possible to toggle heading
extended by HeadingBridge

canLift​

boolean
true when it's possible to lift list item
extended by ListItemBridge

canSink​

boolean
true when it's possible to sink a list item
extended by ListItemBridge

canUndo​

boolean
true when it's possible to undo the doc history stack
extended by HistoryBridge

canRedo​

boolean
true when it's possible to redo the doc history stack
extended by HistoryBridge

activeColor​

string | undefined
undefined when no color is applied, string of the color that is active on the selection
extended by ColorBridge

activeHighlight​

string | undefined
undefined when no highlight is applied, string of the highlight that active on the selection
extended by HighlightBridge

isLinkActive​

boolean
true when the link is in the selection
extended by LinkBridge

boolean
true when it's possible to add link, for example when there is no selection it not possible
extended by LinkBridge

string | undefined
undefined when there is no link, string of the link that active on the selection position
extended by LinkBridge

useBridgeState​

a react hook to subscribe to changes on the BridgeState. It takes the EditorBridge and returns the latest BridgeState, re-rendering when it changes.

const editorState = useBridgeState(editor);

<Button
  title={editorState.isBoldActive ? 'Unbold' : 'Bold'}
  onPress={() => editor.toggleBold()}
  disabled={!editorState.canToggleBold}
/>;

Before the editor is ready the core fields already have values (isReady: false, isFocused: false, empty: true, selection: { from: 0, to: 0 }, and editable from the option), so reading them never throws.