HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
EditorView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA frame around a document that ProseMirror or another editor draws.ExperimentalSince 0.221.0EditorsUsageimport'@fusion.dev/helix/editor'import'@fusion.dev/helix-headless/editor'Preview
API ReferenceRoothelix-editorA frame around a document that ProseMirror or another editor draws.
PropTypeDescriptionblockChosenLabelstringDefault"Text style: {name}"The block menu button's name. {name} is the block type at the selection.blockLabelstringDefault"Text style"The block menu's name, read by screen readers.boldLabelstringDefault"Bold"The Bold button's label.bulletListLabelstringDefault"Bulleted list"The Bulleted list button's label.codeBlockLabelstringDefault"Code block"The Code block row's label in the block menu.codeLabelstringDefault"Code"The Code button's label.controlsLabelstringDefault"Formatting"The toolbar's name, read by screen readers.fallbackLabelstringDefault"Editor"The document's name where label is empty and the host has no aria-label.fillbooleanDefaultfalseCovers the container instead of growing with the document, for an editor
that fills a pane, such as one side of a split view. The document scrolls
inside the frame. The container needs a position, such as
position: relative.findLabelstringDefault"Find"The Find button's label, and the find bar's name.headingLabelstringDefault"Heading {level}"A heading's name in the block menu. {level} is its level, 1 to 3.italicLabelstringDefault"Italic"The Italic button's label.labelstringDefault""The document's name, read by screen readers. Name what it holds, such as
"Release notes", so that several editors on one page can be told apart.
Required.linkApplyLabelstringDefault"Apply link"The Apply button's label in the address bar.linkCloseLabelstringDefault"Close"The close button's label in the address bar.linkControlsLabelstringDefault"Link controls"The name of the address bar's toolbar, read by screen readers.linkFieldLabelstringDefault"Address"The address field's name, which it also shows while it is empty.linkLabelstringDefault"Link"The Link button's label, and the address bar's name.linkRemoveLabelstringDefault"Remove link"The Remove button's label in the address bar.orderedListLabelstringDefault"Numbered list"The Numbered list button's label.paragraphLabelstringDefault"Paragraph"The Paragraph row's label in the block menu.placeholderstringDefault""The words shown in an empty document, such as "Write the release notes".quoteLabelstringDefault"Quote"The Quote button's label.readOnlybooleanDefaultfalseShows the document and takes no edits, with no toolbar, for a document
someone reads, or one an agent is writing. The attribute is readonly,
the platform's spelling.redoLabelstringDefault"Redo"The Redo button's label.separation"outlined"|"plain"How the frame stands off the page. Unset, it is outlined. plain draws
no edge or corners, for a document that fills a page or a pane of its own.strikeLabelstringDefault"Strikethrough"The Strikethrough button's label.toolsstringWhich groups of tools the toolbar draws, as a list of history, block,
marks, link, lists, and quote, or none. They are drawn in that
order, whatever order the list is in. Absent is all six.undoLabelstringDefault"Undo"The Undo button's label.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The element your renderer draws the document in.actionsControls of your own at the end of the toolbar, such as Share or Comment.bold-iconReplaces the glyph inside the Bold button.bullet-list-iconReplaces the glyph inside the Bulleted list button.code-iconReplaces the glyph inside the Code button.find-iconReplaces the glyph inside the Find button.footerContent under the document, such as a word count or whether it is saved.italic-iconReplaces the glyph inside the Italic button.link-iconReplaces the glyph inside the Link button.ordered-list-iconReplaces the glyph inside the Numbered list button.quote-iconReplaces the glyph inside the Quote button.redo-iconReplaces the glyph inside the Redo button.strike-iconReplaces the glyph inside the Strikethrough button.undo-iconReplaces the glyph inside the Undo button.
EventTypeDescriptionhelix-foundHelixFoundEventThe find bar searched or moved among the matches, with count and the selected match's index, counting from 0, or -1 for none.
MethodTypeDescriptionattach(renderer: EditorRenderer) => EditorSinkHands the frame what draws the document. The frame sends it the settings
now and as they change, asks it to run the tools the reader presses, and
draws the toolbar from what it reports through the sink it gets back.
Attaching another renderer detaches this one.focus(options: FocusOptions) => voidPuts focus in the document, with the selection where it was.openLink() => voidOpens the address bar with the address of the link at the selection, and puts focus in its field.run(tool: EditorTool, value: string) => booleanRuns a tool at the selection, as its button does, and says whether it
ran: a block type, a mark, a list, a quote, a step through history, or a
link to value, where an empty value takes the link off. Nothing runs
while no renderer is attached, or while readonly.
PartDescriptionactionsThe actions slot, last in the toolbar.blockThe button that opens the block menu, which names the block type at the selection.block-buttonThe block menu button's inner button.block-liveThe block menu button's live region, which speaks while the button is pending.block-menuThe menu of block types.block-menu-backThe control that returns from a submenu.block-menu-back-markThe glyph on the back control of a submenu.block-menu-emptyThe text shown when the menu has no items.block-menu-headerThe bar above a submenu, holding the way back and its name.block-menu-liveThe block menu's live region, which repeats the empty and loading text for screen readers.block-menu-loadingThe text shown while the items are loading.block-menu-search-fieldThe block menu's filter field, drawn with filterable.block-menu-surfaceThe floating panel the block menu is drawn on.block-menu-titleThe name of the submenu that is showing.block-nameThe name of the block type at the selection, in the block menu's button.block-optionOne block type in the block menu, checked while the selection is in one.block-option-endA block type's trailing column, which holds its shortcut.block-option-itemA block type's row.block-option-markThe check beside the block type the selection is in.block-option-shortcutA block type's key.block-option-shortcut-kbdThe key inside it.block-option-shortcut-keyOne key of a block type's chord.block-option-shortcut-separatorThe + between two keys of a block type's chord.block-option-startA block type's leading column.block-option-surfaceA block type's submenu panel, which a block type does not open.block-spinnerThe ring the block menu button turns while it is pending.block-textThe box the block menu button's words sit in.boldThe Bold button. Pressed while the selection is bold.bold-buttonThe Bold button's inner button.bold-liveThe Bold button's live region, which speaks while the button is pending.bold-pressedThe Bold button while the selection is bold, beside bold.bold-spinnerThe ring the Bold button turns while it is pending.bold-textThe box the Bold button's icon sits in.bullet-listThe Bulleted list button. Pressed while the selection is in a bulleted list.bullet-list-buttonThe Bulleted list button's inner button.bullet-list-liveThe Bulleted list button's live region, which speaks while the button is pending.bullet-list-pressedThe Bulleted list button while the selection is in a bulleted list, beside bullet-list.bullet-list-spinnerThe ring the Bulleted list button turns while it is pending.bullet-list-textThe box the Bulleted list button's icon sits in.codeThe Code button. Pressed while the selection is code.code-buttonThe Code button's inner button.code-liveThe Code button's live region, which speaks while the button is pending.code-pressedThe Code button while the selection is code, beside code.code-spinnerThe ring the Code button turns while it is pending.code-textThe box the Code button's icon sits in.controlsThe toolbar: the tools, then your actions, one tab stop that the arrows move along.controls-toolbarThe box inside the toolbar that lays its buttons out.dividerThe line between two groups of tools.divider-contentThe content set into a divider, which the editor sets none into.divider-lineThe line itself.findThe find bar under the toolbar, where the reader searches the document: a Find of its own.find-actionsThe find bar's actions slot, which the editor fills with nothing.find-barThe find bar's strip: the field, the count, the toolbar, and the replace row while it shows.find-closeThe button that closes the find bar.find-close-buttonThe find bar's close button's inner button.find-close-liveThe find bar's close button's live region, which speaks while the button is pending.find-close-spinnerThe ring the find bar's close button turns while it is pending.find-close-textThe box the find bar's close button's icon sits in.find-controlsThe find bar's toolbar of options and moves.find-controls-toolbarThe box inside the find bar's toolbar that lays its buttons out.find-countWhich match is selected, of how many.find-fieldThe field the search is typed in.find-liveThe find bar's live region, which says the count as it changes.find-match-caseThe option that finds only the same case. Pressed while it applies.find-match-case-buttonThe match case button's inner button.find-match-case-liveThe match case button's live region, which speaks while the button is pending.find-match-case-pressedThe match case option while it applies, beside find-match-case.find-match-case-spinnerThe ring the match case button turns while it is pending.find-match-case-textThe box the match case button's icon sits in.find-nextThe button that selects the next match.find-next-buttonThe next match button's inner button.find-next-liveThe next match button's live region, which speaks while the button is pending.find-next-spinnerThe ring the next match button turns while it is pending.find-next-textThe box the next match button's icon sits in.find-previousThe button that selects the previous match.find-previous-buttonThe previous match button's inner button.find-previous-liveThe previous match button's live region, which speaks while the button is pending.find-previous-spinnerThe ring the previous match button turns while it is pending.find-previous-textThe box the previous match button's icon sits in.find-regexThe option that reads the search as a regular expression. Pressed while it applies.find-regex-buttonThe regular expression button's inner button.find-regex-liveThe regular expression button's live region, which speaks while the button is pending.find-regex-pressedThe regular expression option while it applies, beside find-regex.find-regex-spinnerThe ring the regular expression button turns while it is pending.find-regex-textThe box the regular expression button's icon sits in.find-replaceThe button that replaces the selected match.find-replace-allThe button that replaces every match.find-replace-all-buttonThe Replace all button's inner button.find-replace-all-liveThe Replace all button's live region, which speaks while the button is pending.find-replace-all-spinnerThe ring the Replace all button turns while it is pending.find-replace-all-textThe box the Replace all button's words sits in.find-replace-buttonThe Replace button's inner button.find-replace-fieldThe field the replacement is typed in.find-replace-liveThe Replace button's live region, which speaks while the button is pending.find-replace-spinnerThe ring the Replace button turns while it is pending.find-replace-textThe box the Replace button's words sits in.find-replace-toggleThe button that shows the replace field under the find field. Expanded while it shows. Not drawn while readonly.find-replace-toggle-buttonThe find and replace button's inner button.find-replace-toggle-liveThe find and replace button's live region, which speaks while the button is pending.find-replace-toggle-spinnerThe ring the find and replace button turns while it is pending.find-replace-toggle-textThe box the find and replace button's icon sits in.find-toggleThe Find button in the toolbar, drawn where tools names find, which opens and closes the find bar. Expanded while it is open.find-toggle-buttonThe Find button's inner button.find-toggle-liveThe Find button's live region, which speaks while the button is pending.find-toggle-spinnerThe ring the Find button turns while it is pending.find-toggle-textThe box the Find button's icon sits in.find-whole-wordThe option that finds only whole words. Pressed while it applies.find-whole-word-buttonThe whole word button's inner button.find-whole-word-liveThe whole word button's live region, which speaks while the button is pending.find-whole-word-pressedThe whole word option while it applies, beside find-whole-word.find-whole-word-spinnerThe ring the whole word button turns while it is pending.find-whole-word-textThe box the whole word button's icon sits in.footerThe footer slot, under the document.headerThe strip above the document that holds the toolbar, and the address bar under it while it is open.italicThe Italic button. Pressed while the selection is italic.italic-buttonThe Italic button's inner button.italic-liveThe Italic button's live region, which speaks while the button is pending.italic-pressedThe Italic button while the selection is italic, beside italic.italic-spinnerThe ring the Italic button turns while it is pending.italic-textThe box the Italic button's icon sits in.linkThe Link button, which opens the address bar. Pressed while the selection is in a link, and expanded while the bar is open.link-applyThe button that applies the address.link-apply-buttonThe Apply button's inner button.link-apply-liveThe Apply button's live region, which speaks while the button is pending.link-apply-spinnerThe ring the Apply button turns while it is pending.link-apply-textThe box the Apply button's icon sits in.link-barThe bar under the toolbar where the reader writes a link's address.link-buttonThe Link button's inner button.link-closeThe button that closes the address bar.link-close-buttonThe close button's inner button.link-close-liveThe close button's live region, which speaks while the button is pending.link-close-spinnerThe ring the close button turns while it is pending.link-close-textThe box the close button's icon sits in.link-controlsThe toolbar at the end of the address bar: Apply, Remove, and Close.link-controls-toolbarThe box inside the address bar's toolbar that lays its buttons out.link-fieldThe field the address is written in.link-liveThe Link button's live region, which speaks while the button is pending.link-pressedThe Link button while the selection is in a link, beside link.link-removeThe button that takes the link off. Disabled where the selection is in no link.link-remove-buttonThe Remove button's inner button.link-remove-liveThe Remove button's live region, which speaks while the button is pending.link-remove-spinnerThe ring the Remove button turns while it is pending.link-remove-textThe box the Remove button's icon sits in.link-spinnerThe ring the Link button turns while it is pending.link-textThe box the Link button's icon sits in.ordered-listThe Numbered list button. Pressed while the selection is in a numbered list.ordered-list-buttonThe Numbered list button's inner button.ordered-list-liveThe Numbered list button's live region, which speaks while the button is pending.ordered-list-pressedThe Numbered list button while the selection is in a numbered list, beside ordered-list.ordered-list-spinnerThe ring the Numbered list button turns while it is pending.ordered-list-textThe box the Numbered list button's icon sits in.quoteThe Quote button. Pressed while the selection is in a quote.quote-buttonThe Quote button's inner button.quote-liveThe Quote button's live region, which speaks while the button is pending.quote-pressedThe Quote button while the selection is in a quote, beside quote.quote-spinnerThe ring the Quote button turns while it is pending.quote-textThe box the Quote button's icon sits in.redoThe Redo button. Disabled while there is nothing to redo.redo-buttonThe Redo button's inner button.redo-liveThe Redo button's live region, which speaks while the button is pending.redo-spinnerThe ring the Redo button turns while it is pending.redo-textThe box the Redo button's icon sits in.regionThe frame around the toolbar, the address bar, and the document.strikeThe Strikethrough button. Pressed while the selection is struck through.strike-buttonThe Strikethrough button's inner button.strike-liveThe Strikethrough button's live region, which speaks while the button is pending.strike-pressedThe Strikethrough button while the selection is struck through, beside strike.strike-spinnerThe ring the Strikethrough button turns while it is pending.strike-textThe box the Strikethrough button's icon sits in.toolsA group of several tools, which a narrow toolbar wraps as one: Undo and Redo, the marks, or the lists and the quote.undoThe Undo button. Disabled while there is nothing to undo.undo-buttonThe Undo button's inner button.undo-liveThe Undo button's live region, which speaks while the button is pending.undo-spinnerThe ring the Undo button turns while it is pending.undo-textThe box the Undo button's icon sits in.viewportThe box the document is drawn in.
CSS PropertyDescription--editor-background-colorThe ground the document is drawn on. Defaults to the page's background.--editor-border-colorThe frame's edge and the line under the toolbar.--editor-header-background-colorThe fill of the toolbar's strip.--editor-header-offsetHow far below the top of the page the toolbar stays while the document scrolls, such as the height of your own fixed header. 0 unless set.--editor-measureThe longest a line of the document runs, as a length: 72ch unless set.--editor-min-block-sizeThe frame's least height, which it grows from with the document: 12rem unless set. Ignored with fill.--editor-paddingThe space around the document, inside the frame.--editor-radiusThe frame's corner radius.
Custom stateDescriptionconnectedA renderer draws the document.document-focusedFocus is in the document, where the reader types.find-openThe find bar is open.link-openThe address bar is open.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-editorA frame around a document that ProseMirror or another editor draws.
PropTypeDescriptionblockChosenLabelstringDefault"Text style: {name}"The block menu button's name. {name} is the block type at the selection.blockLabelstringDefault"Text style"The block menu's name, read by screen readers.boldLabelstringDefault"Bold"The Bold button's label.bulletListLabelstringDefault"Bulleted list"The Bulleted list button's label.codeBlockLabelstringDefault"Code block"The Code block row's label in the block menu.codeLabelstringDefault"Code"The Code button's label.controlsLabelstringDefault"Formatting"The toolbar's name, read by screen readers.fallbackLabelstringDefault"Editor"The document's name where label is empty and the host has no aria-label.findLabelstringDefault"Find"The Find button's label, and the find bar's name.headingLabelstringDefault"Heading {level}"A heading's name in the block menu. {level} is its level, 1 to 3.italicLabelstringDefault"Italic"The Italic button's label.labelstringDefault""The document's name, read by screen readers. Name what it holds, such as
"Release notes", so that several editors on one page can be told apart.
Required.linkApplyLabelstringDefault"Apply link"The Apply button's label in the address bar.linkCloseLabelstringDefault"Close"The close button's label in the address bar.linkControlsLabelstringDefault"Link controls"The name of the address bar's toolbar, read by screen readers.linkFieldLabelstringDefault"Address"The address field's name, which it also shows while it is empty.linkLabelstringDefault"Link"The Link button's label, and the address bar's name.linkRemoveLabelstringDefault"Remove link"The Remove button's label in the address bar.orderedListLabelstringDefault"Numbered list"The Numbered list button's label.paragraphLabelstringDefault"Paragraph"The Paragraph row's label in the block menu.placeholderstringDefault""The words shown in an empty document, such as "Write the release notes".quoteLabelstringDefault"Quote"The Quote button's label.readOnlybooleanDefaultfalseShows the document and takes no edits, with no toolbar, for a document
someone reads, or one an agent is writing. The attribute is readonly,
the platform's spelling.redoLabelstringDefault"Redo"The Redo button's label.strikeLabelstringDefault"Strikethrough"The Strikethrough button's label.toolsstringWhich groups of tools the toolbar draws, as a list of history, block,
marks, link, lists, and quote, or none. They are drawn in that
order, whatever order the list is in. Absent is all six.undoLabelstringDefault"Undo"The Undo button's label.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The element your renderer draws the document in.actionsControls of your own at the end of the toolbar, such as Share or Comment.bold-iconReplaces the glyph inside the Bold button.bullet-list-iconReplaces the glyph inside the Bulleted list button.code-iconReplaces the glyph inside the Code button.find-iconReplaces the glyph inside the Find button.footerContent under the document, such as a word count or whether it is saved.italic-iconReplaces the glyph inside the Italic button.link-iconReplaces the glyph inside the Link button.ordered-list-iconReplaces the glyph inside the Numbered list button.quote-iconReplaces the glyph inside the Quote button.redo-iconReplaces the glyph inside the Redo button.strike-iconReplaces the glyph inside the Strikethrough button.undo-iconReplaces the glyph inside the Undo button.
EventTypeDescriptionhelix-foundHelixFoundEventThe find bar searched or moved among the matches, with count and the selected match's index, counting from 0, or -1 for none.
MethodTypeDescriptionattach(renderer: EditorRenderer) => EditorSinkHands the frame what draws the document. The frame sends it the settings
now and as they change, asks it to run the tools the reader presses, and
draws the toolbar from what it reports through the sink it gets back.
Attaching another renderer detaches this one.focus(options: FocusOptions) => voidPuts focus in the document, with the selection where it was.openLink() => voidOpens the address bar with the address of the link at the selection, and puts focus in its field.run(tool: EditorTool, value: string) => booleanRuns a tool at the selection, as its button does, and says whether it
ran: a block type, a mark, a list, a quote, a step through history, or a
link to value, where an empty value takes the link off. Nothing runs
while no renderer is attached, or while readonly.
PartDescriptionactionsThe actions slot, last in the toolbar.blockThe button that opens the block menu, which names the block type at the selection.block-buttonThe block menu button's inner button.block-liveThe block menu button's live region, which speaks while the button is pending.block-menuThe menu of block types.block-menu-backThe control that returns from a submenu.block-menu-back-markThe glyph on the back control of a submenu.block-menu-emptyThe text shown when the menu has no items.block-menu-headerThe bar above a submenu, holding the way back and its name.block-menu-liveThe block menu's live region, which repeats the empty and loading text for screen readers.block-menu-loadingThe text shown while the items are loading.block-menu-search-fieldThe block menu's filter field, drawn with filterable.block-menu-surfaceThe floating panel the block menu is drawn on.block-menu-titleThe name of the submenu that is showing.block-nameThe name of the block type at the selection, in the block menu's button.block-optionOne block type in the block menu, checked while the selection is in one.block-option-endA block type's trailing column, which holds its shortcut.block-option-itemA block type's row.block-option-markThe check beside the block type the selection is in.block-option-shortcutA block type's key.block-option-shortcut-kbdThe key inside it.block-option-shortcut-keyOne key of a block type's chord.block-option-shortcut-separatorThe + between two keys of a block type's chord.block-option-startA block type's leading column.block-option-surfaceA block type's submenu panel, which a block type does not open.block-spinnerThe ring the block menu button turns while it is pending.block-textThe box the block menu button's words sit in.boldThe Bold button. Pressed while the selection is bold.bold-buttonThe Bold button's inner button.bold-liveThe Bold button's live region, which speaks while the button is pending.bold-pressedThe Bold button while the selection is bold, beside bold.bold-spinnerThe ring the Bold button turns while it is pending.bold-textThe box the Bold button's icon sits in.bullet-listThe Bulleted list button. Pressed while the selection is in a bulleted list.bullet-list-buttonThe Bulleted list button's inner button.bullet-list-liveThe Bulleted list button's live region, which speaks while the button is pending.bullet-list-pressedThe Bulleted list button while the selection is in a bulleted list, beside bullet-list.bullet-list-spinnerThe ring the Bulleted list button turns while it is pending.bullet-list-textThe box the Bulleted list button's icon sits in.codeThe Code button. Pressed while the selection is code.code-buttonThe Code button's inner button.code-liveThe Code button's live region, which speaks while the button is pending.code-pressedThe Code button while the selection is code, beside code.code-spinnerThe ring the Code button turns while it is pending.code-textThe box the Code button's icon sits in.controlsThe toolbar: the tools, then your actions, one tab stop that the arrows move along.controls-toolbarThe box inside the toolbar that lays its buttons out.dividerThe line between two groups of tools.divider-contentThe content set into a divider, which the editor sets none into.divider-lineThe line itself.findThe find bar under the toolbar, where the reader searches the document: a Find of its own.find-actionsThe find bar's actions slot, which the editor fills with nothing.find-barThe find bar's strip: the field, the count, the toolbar, and the replace row while it shows.find-closeThe button that closes the find bar.find-close-buttonThe find bar's close button's inner button.find-close-liveThe find bar's close button's live region, which speaks while the button is pending.find-close-spinnerThe ring the find bar's close button turns while it is pending.find-close-textThe box the find bar's close button's icon sits in.find-controlsThe find bar's toolbar of options and moves.find-controls-toolbarThe box inside the find bar's toolbar that lays its buttons out.find-countWhich match is selected, of how many.find-fieldThe field the search is typed in.find-liveThe find bar's live region, which says the count as it changes.find-match-caseThe option that finds only the same case. Pressed while it applies.find-match-case-buttonThe match case button's inner button.find-match-case-liveThe match case button's live region, which speaks while the button is pending.find-match-case-pressedThe match case option while it applies, beside find-match-case.find-match-case-spinnerThe ring the match case button turns while it is pending.find-match-case-textThe box the match case button's icon sits in.find-nextThe button that selects the next match.find-next-buttonThe next match button's inner button.find-next-liveThe next match button's live region, which speaks while the button is pending.find-next-spinnerThe ring the next match button turns while it is pending.find-next-textThe box the next match button's icon sits in.find-previousThe button that selects the previous match.find-previous-buttonThe previous match button's inner button.find-previous-liveThe previous match button's live region, which speaks while the button is pending.find-previous-spinnerThe ring the previous match button turns while it is pending.find-previous-textThe box the previous match button's icon sits in.find-regexThe option that reads the search as a regular expression. Pressed while it applies.find-regex-buttonThe regular expression button's inner button.find-regex-liveThe regular expression button's live region, which speaks while the button is pending.find-regex-pressedThe regular expression option while it applies, beside find-regex.find-regex-spinnerThe ring the regular expression button turns while it is pending.find-regex-textThe box the regular expression button's icon sits in.find-replaceThe button that replaces the selected match.find-replace-allThe button that replaces every match.find-replace-all-buttonThe Replace all button's inner button.find-replace-all-liveThe Replace all button's live region, which speaks while the button is pending.find-replace-all-spinnerThe ring the Replace all button turns while it is pending.find-replace-all-textThe box the Replace all button's words sits in.find-replace-buttonThe Replace button's inner button.find-replace-fieldThe field the replacement is typed in.find-replace-liveThe Replace button's live region, which speaks while the button is pending.find-replace-spinnerThe ring the Replace button turns while it is pending.find-replace-textThe box the Replace button's words sits in.find-replace-toggleThe button that shows the replace field under the find field. Expanded while it shows. Not drawn while readonly.find-replace-toggle-buttonThe find and replace button's inner button.find-replace-toggle-liveThe find and replace button's live region, which speaks while the button is pending.find-replace-toggle-spinnerThe ring the find and replace button turns while it is pending.find-replace-toggle-textThe box the find and replace button's icon sits in.find-toggleThe Find button in the toolbar, drawn where tools names find, which opens and closes the find bar. Expanded while it is open.find-toggle-buttonThe Find button's inner button.find-toggle-liveThe Find button's live region, which speaks while the button is pending.find-toggle-spinnerThe ring the Find button turns while it is pending.find-toggle-textThe box the Find button's icon sits in.find-whole-wordThe option that finds only whole words. Pressed while it applies.find-whole-word-buttonThe whole word button's inner button.find-whole-word-liveThe whole word button's live region, which speaks while the button is pending.find-whole-word-pressedThe whole word option while it applies, beside find-whole-word.find-whole-word-spinnerThe ring the whole word button turns while it is pending.find-whole-word-textThe box the whole word button's icon sits in.footerThe footer slot, under the document.headerThe strip above the document that holds the toolbar, and the address bar under it while it is open.italicThe Italic button. Pressed while the selection is italic.italic-buttonThe Italic button's inner button.italic-liveThe Italic button's live region, which speaks while the button is pending.italic-pressedThe Italic button while the selection is italic, beside italic.italic-spinnerThe ring the Italic button turns while it is pending.italic-textThe box the Italic button's icon sits in.linkThe Link button, which opens the address bar. Pressed while the selection is in a link, and expanded while the bar is open.link-applyThe button that applies the address.link-apply-buttonThe Apply button's inner button.link-apply-liveThe Apply button's live region, which speaks while the button is pending.link-apply-spinnerThe ring the Apply button turns while it is pending.link-apply-textThe box the Apply button's icon sits in.link-barThe bar under the toolbar where the reader writes a link's address.link-buttonThe Link button's inner button.link-closeThe button that closes the address bar.link-close-buttonThe close button's inner button.link-close-liveThe close button's live region, which speaks while the button is pending.link-close-spinnerThe ring the close button turns while it is pending.link-close-textThe box the close button's icon sits in.link-controlsThe toolbar at the end of the address bar: Apply, Remove, and Close.link-controls-toolbarThe box inside the address bar's toolbar that lays its buttons out.link-fieldThe field the address is written in.link-liveThe Link button's live region, which speaks while the button is pending.link-pressedThe Link button while the selection is in a link, beside link.link-removeThe button that takes the link off. Disabled where the selection is in no link.link-remove-buttonThe Remove button's inner button.link-remove-liveThe Remove button's live region, which speaks while the button is pending.link-remove-spinnerThe ring the Remove button turns while it is pending.link-remove-textThe box the Remove button's icon sits in.link-spinnerThe ring the Link button turns while it is pending.link-textThe box the Link button's icon sits in.ordered-listThe Numbered list button. Pressed while the selection is in a numbered list.ordered-list-buttonThe Numbered list button's inner button.ordered-list-liveThe Numbered list button's live region, which speaks while the button is pending.ordered-list-pressedThe Numbered list button while the selection is in a numbered list, beside ordered-list.ordered-list-spinnerThe ring the Numbered list button turns while it is pending.ordered-list-textThe box the Numbered list button's icon sits in.quoteThe Quote button. Pressed while the selection is in a quote.quote-buttonThe Quote button's inner button.quote-liveThe Quote button's live region, which speaks while the button is pending.quote-pressedThe Quote button while the selection is in a quote, beside quote.quote-spinnerThe ring the Quote button turns while it is pending.quote-textThe box the Quote button's icon sits in.redoThe Redo button. Disabled while there is nothing to redo.redo-buttonThe Redo button's inner button.redo-liveThe Redo button's live region, which speaks while the button is pending.redo-spinnerThe ring the Redo button turns while it is pending.redo-textThe box the Redo button's icon sits in.regionThe frame around the toolbar, the address bar, and the document.strikeThe Strikethrough button. Pressed while the selection is struck through.strike-buttonThe Strikethrough button's inner button.strike-liveThe Strikethrough button's live region, which speaks while the button is pending.strike-pressedThe Strikethrough button while the selection is struck through, beside strike.strike-spinnerThe ring the Strikethrough button turns while it is pending.strike-textThe box the Strikethrough button's icon sits in.toolsA group of several tools, which a narrow toolbar wraps as one: Undo and Redo, the marks, or the lists and the quote.undoThe Undo button. Disabled while there is nothing to undo.undo-buttonThe Undo button's inner button.undo-liveThe Undo button's live region, which speaks while the button is pending.undo-spinnerThe ring the Undo button turns while it is pending.undo-textThe box the Undo button's icon sits in.viewportThe box the document is drawn in.
Custom stateDescriptionconnectedA renderer draws the document.document-focusedFocus is in the document, where the reader types.find-openThe find bar is open.link-openThe address bar is open.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionCommentA comment box with a short toolbar and a Post button of the page's own.In A PaneAn editor that fills a pane with no frame of its own, its document scrolling under the toolbar.PreviewA document drawn by ProseMirror, with the toolbar above it.PreviewA document drawn by ProseMirror, with the toolbar above it.Read OnlyA document someone reads, with no toolbar.Right To LeftA document in Arabic: the toolbar and the text run right to left, and a paragraph in English runs left to right.