Tabbable
Programmatically corrects the tab order for tabbable elements inside the editor
#
Installation- npm
- Yarn
#
Usageimport React from 'react'; import { createListPlugin, createTabbablePlugin, ELEMENT_CODE_BLOCK, ELEMENT_LI, findNode, Plate, } from '@udecode/plate'; import { basicNodesPlugins } from './basic-nodes/basicNodesPlugins'; import { editableProps } from './common/editableProps'; import { plateUI } from './common/plateUI'; import { createTabbableElementPlugin } from './tabbable/createTabbableElementPlugin'; import { TabbableElement } from './tabbable/TabbableElement'; import { tabbableValue } from './tabbable/tabbableValue'; import { createMyPlugins, MyValue } from './typescript/plateTypes'; const plugins = createMyPlugins( [ ...basicNodesPlugins, createListPlugin(), createTabbablePlugin({ options: { query: (editor) => { const inList = findNode(editor, { match: { type: ELEMENT_LI } }); const inCodeBlock = findNode(editor, { match: { type: ELEMENT_CODE_BLOCK }, }); return !inList && !inCodeBlock; }, }, }), createTabbableElementPlugin({ component: TabbableElement, }), ], { components: plateUI, } ); export default () => ( <> <button type="button">Button before editor</button> <Plate<MyValue> editableProps={editableProps} plugins={plugins} initialValue={tabbableValue} /> <button type="button">Button after editor</button> </>
#
Conflicts with other pluginsThe Tabbable plugin may cause issues with other plugins that handle the Tab
key, such as:
- Lists
- Code blocks
- Indent plugin
Use the query
option to disable the Tabbable plugin when the Tab
key should be handled by another plugin:
Alternatively, if you're using the Indent plugin, you can enable the Tabbable plugin only when a specific type of node is selected, such as voids:
#
Non-void Slate nodesOne TabbableEntry
will be created for each tabbable DOM element in the editor, as determined using the tabbable
NPM package. The list of tabbables is then filtered using isTabbable
.
By default, isTabbable
only returns true for entries inside void Slate nodes. You can override isTabbable
to add support for DOM elements contained in other types of Slate node.
#
DOM elements outside the editorIn some circumstances, you may want to allow users to tab from the editor to a DOM element rendered outside the editor, such as an interactive popover.
To do this, override insertTabbableEntries
to return an array of TabbableEntry
objects, one for each DOM element outside the editor that you want to include in the tabbable list. The slateNode
and path
of the TabbableEntry
should refer to the Slate node the user's cursor will be inside when the DOM element should be tabbable to. For example, if the DOM element appears when a link is selected, the slateNode
and path
should be that of the link.
Set the globalEventListener
option to true
to make sure the Tabbable plugin is able to return the user's focus to the editor.