Rich text / foldkit-mixins-richtext

Find and replace

findReplace<Message>() is the find bar. The query, the replacement, which match is current and whether case counts are the caller's Model; the matches are RichText.findMatches of the document, and replacing is the editor's ReplacedText, an edit with its undo step.

  • Enter in the find field goes to the next match and Shift+Enter to the previous, wrapping at either end. The bar sends stepped(1) or stepped(-1), and the caller's update moves its current match with stepMatch(current, count, step): two keys can arrive before the bar is drawn again, so the step is applied to the Model, not to the index the bar last showed. Escape in either field sends closed.
  • The count reads 2 of 5, or No matches; Replace and Replace all are disabled without one.
  • To show the matches, overlay RichText.searchDecorations(document, query, { current }) on the editor (overlay(hostId, decorations)), and set it again when the document changes.
SlotCapabilityRenders
rootContainerrole="search"
fieldTextInputthe find and replacement fields, data-find="query" and "replacement"
countContainerthe count, aria-live
buttonInteractivedata-find: previous, next, case, replace, replace-all, close; the first three and close draw an icon, named by aria-label and title

The table of contents

tableOfContents<Message>() draws RichText.outlineOf(document) as a nav of buttons, the section the selection is in (RichText.sectionAt) marked aria-current="location". Choosing an entry sends chosen(node); going there is the caller's, usually the editor's focus(hostId, selection) Command with a caret at the heading's start. Nothing is drawn without headings.

SlotCapabilityRenders
rootContainerthe nav, labelled Contents
listContainerthe ul
entryInteractivea heading's button, its depth as --fk-toc-level (1 for the shallowest level used)