@fusion.dev/helix-headless 0.220.0 → 0.221.0

package/types/svelte.d.ts

@@ -75,6 +75,7 @@ declare module 'svelte/elements' {
     'helix-headless-drawer': Helix<'helix-headless-drawer'>
     'helix-headless-drilldown-item': Helix<'helix-headless-drilldown-item'>
     'helix-headless-drilldown': Helix<'helix-headless-drilldown'>
+    'helix-headless-editor': Helix<'helix-headless-editor'>
     'helix-headless-empty': Helix<'helix-headless-empty'>
     'helix-headless-file-input': Helix<'helix-headless-file-input'>
     'helix-headless-filter-chip': Helix<'helix-headless-filter-chip'>

package/types/vue.d.ts

@@ -95,6 +95,7 @@ import type {
   HelixHeadlessDrawer,
   HelixHeadlessDrilldown,
   HelixHeadlessDrilldownItem,
+  HelixHeadlessEditor,
   HelixHeadlessEmpty,
   HelixHeadlessFileInput,
   HelixHeadlessFilterChip,
@@ -3887,7 +3888,7 @@ Here rather than on each control. */
   /** The problems in the text, each underlined and listed under the editor. */
   diagnostics?: (HelixHeadlessCodeEditor["diagnostics"]) | undefined;
   /** What draws the editor, such as `codeMirrorEngine()` from
-`@fusion.dev/helix-editor`. Absent, the editor is a plain text field. */
+`@fusion.dev/helix-code-editor`. Absent, the editor is a plain text field. */
   engine?: (HelixHeadlessCodeEditor["engine"]) | undefined;
 };
 
@@ -7764,6 +7765,133 @@ export type HelixHeadlessDrilldownVueEvents = {
   "helix-select": HelixHeadlessDrilldownHelixSelectElementEvent;
 };
 
+/** `HelixHeadlessEditor` component event */
+export type HelixHeadlessEditorElementEvent<E = Event> = TypedEvent<
+  HelixHeadlessEditor,
+  E
+>;
+/** `helix-found` event type */
+export type HelixHeadlessEditorHelixFoundElementEvent =
+  HelixHeadlessEditorElementEvent<HelixFoundEvent>;
+
+export type HelixHeadlessEditorVueProps = {
+  /** The block menu button's name. `{name}` is the block type at the selection. */
+  "block-chosen-label"?: (HelixHeadlessEditor["blockChosenLabel"]) | undefined;
+  /** The block menu button's name. `{name}` is the block type at the selection. */
+  blockChosenLabel?: (HelixHeadlessEditor["blockChosenLabel"]) | undefined;
+  /** The block menu's name, read by screen readers. */
+  "block-label"?: (HelixHeadlessEditor["blockLabel"]) | undefined;
+  /** The block menu's name, read by screen readers. */
+  blockLabel?: (HelixHeadlessEditor["blockLabel"]) | undefined;
+  /** The Bold button's label. */
+  "bold-label"?: (HelixHeadlessEditor["boldLabel"]) | undefined;
+  /** The Bold button's label. */
+  boldLabel?: (HelixHeadlessEditor["boldLabel"]) | undefined;
+  /** The Bulleted list button's label. */
+  "bullet-list-label"?: (HelixHeadlessEditor["bulletListLabel"]) | undefined;
+  /** The Bulleted list button's label. */
+  bulletListLabel?: (HelixHeadlessEditor["bulletListLabel"]) | undefined;
+  /** The Code block row's label in the block menu. */
+  "code-block-label"?: (HelixHeadlessEditor["codeBlockLabel"]) | undefined;
+  /** The Code block row's label in the block menu. */
+  codeBlockLabel?: (HelixHeadlessEditor["codeBlockLabel"]) | undefined;
+  /** The Code button's label. */
+  "code-label"?: (HelixHeadlessEditor["codeLabel"]) | undefined;
+  /** The Code button's label. */
+  codeLabel?: (HelixHeadlessEditor["codeLabel"]) | undefined;
+  /** The toolbar's name, read by screen readers. */
+  "controls-label"?: (HelixHeadlessEditor["controlsLabel"]) | undefined;
+  /** The toolbar's name, read by screen readers. */
+  controlsLabel?: (HelixHeadlessEditor["controlsLabel"]) | undefined;
+  /** The document's name where `label` is empty and the host has no `aria-label`. */
+  "fallback-label"?: (HelixHeadlessEditor["fallbackLabel"]) | undefined;
+  /** The document's name where `label` is empty and the host has no `aria-label`. */
+  fallbackLabel?: (HelixHeadlessEditor["fallbackLabel"]) | undefined;
+  /** The Find button's label, and the find bar's name. */
+  "find-label"?: (HelixHeadlessEditor["findLabel"]) | undefined;
+  /** The Find button's label, and the find bar's name. */
+  findLabel?: (HelixHeadlessEditor["findLabel"]) | undefined;
+  /** A heading's name in the block menu. `{level}` is its level, 1 to 3. */
+  "heading-label"?: (HelixHeadlessEditor["headingLabel"]) | undefined;
+  /** A heading's name in the block menu. `{level}` is its level, 1 to 3. */
+  headingLabel?: (HelixHeadlessEditor["headingLabel"]) | undefined;
+  /** The Italic button's label. */
+  "italic-label"?: (HelixHeadlessEditor["italicLabel"]) | undefined;
+  /** The Italic button's label. */
+  italicLabel?: (HelixHeadlessEditor["italicLabel"]) | undefined;
+  /** 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. */
+  label?: (HelixHeadlessEditor["label"]) | undefined;
+  /** The Apply button's label in the address bar. */
+  "link-apply-label"?: (HelixHeadlessEditor["linkApplyLabel"]) | undefined;
+  /** The Apply button's label in the address bar. */
+  linkApplyLabel?: (HelixHeadlessEditor["linkApplyLabel"]) | undefined;
+  /** The close button's label in the address bar. */
+  "link-close-label"?: (HelixHeadlessEditor["linkCloseLabel"]) | undefined;
+  /** The close button's label in the address bar. */
+  linkCloseLabel?: (HelixHeadlessEditor["linkCloseLabel"]) | undefined;
+  /** The name of the address bar's toolbar, read by screen readers. */
+  "link-controls-label"?: (HelixHeadlessEditor["linkControlsLabel"]) | undefined;
+  /** The name of the address bar's toolbar, read by screen readers. */
+  linkControlsLabel?: (HelixHeadlessEditor["linkControlsLabel"]) | undefined;
+  /** The address field's name, which it also shows while it is empty. */
+  "link-field-label"?: (HelixHeadlessEditor["linkFieldLabel"]) | undefined;
+  /** The address field's name, which it also shows while it is empty. */
+  linkFieldLabel?: (HelixHeadlessEditor["linkFieldLabel"]) | undefined;
+  /** The Link button's label, and the address bar's name. */
+  "link-label"?: (HelixHeadlessEditor["linkLabel"]) | undefined;
+  /** The Link button's label, and the address bar's name. */
+  linkLabel?: (HelixHeadlessEditor["linkLabel"]) | undefined;
+  /** The Remove button's label in the address bar. */
+  "link-remove-label"?: (HelixHeadlessEditor["linkRemoveLabel"]) | undefined;
+  /** The Remove button's label in the address bar. */
+  linkRemoveLabel?: (HelixHeadlessEditor["linkRemoveLabel"]) | undefined;
+  /** The Numbered list button's label. */
+  "ordered-list-label"?: (HelixHeadlessEditor["orderedListLabel"]) | undefined;
+  /** The Numbered list button's label. */
+  orderedListLabel?: (HelixHeadlessEditor["orderedListLabel"]) | undefined;
+  /** The Paragraph row's label in the block menu. */
+  "paragraph-label"?: (HelixHeadlessEditor["paragraphLabel"]) | undefined;
+  /** The Paragraph row's label in the block menu. */
+  paragraphLabel?: (HelixHeadlessEditor["paragraphLabel"]) | undefined;
+  /** The words shown in an empty document, such as "Write the release notes". */
+  placeholder?: (HelixHeadlessEditor["placeholder"]) | undefined;
+  /** The Quote button's label. */
+  "quote-label"?: (HelixHeadlessEditor["quoteLabel"]) | undefined;
+  /** The Quote button's label. */
+  quoteLabel?: (HelixHeadlessEditor["quoteLabel"]) | undefined;
+  /** Shows 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. */
+  readonly?: (HelixHeadlessEditor["readOnly"]) | undefined;
+  /** Shows 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. */
+  readOnly?: (HelixHeadlessEditor["readOnly"]) | undefined;
+  /** The Redo button's label. */
+  "redo-label"?: (HelixHeadlessEditor["redoLabel"]) | undefined;
+  /** The Redo button's label. */
+  redoLabel?: (HelixHeadlessEditor["redoLabel"]) | undefined;
+  /** The Strikethrough button's label. */
+  "strike-label"?: (HelixHeadlessEditor["strikeLabel"]) | undefined;
+  /** The Strikethrough button's label. */
+  strikeLabel?: (HelixHeadlessEditor["strikeLabel"]) | undefined;
+  /** Which 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. */
+  tools?: (HelixHeadlessEditor["tools"]) | undefined;
+  /** The Undo button's label. */
+  "undo-label"?: (HelixHeadlessEditor["undoLabel"]) | undefined;
+  /** The Undo button's label. */
+  undoLabel?: (HelixHeadlessEditor["undoLabel"]) | undefined;
+};
+
+export type HelixHeadlessEditorVueEvents = {
+  /** The find bar searched or moved among the matches, with `count` and the selected match's `index`, counting from 0, or -1 for none. */
+  "helix-found": HelixHeadlessEditorHelixFoundElementEvent;
+};
+
 export type HelixHeadlessEmptyVueProps = {
   /** The heading as words, such as "No results", drawn as a heading when
 nothing is slotted into `heading`.
@@ -22766,7 +22894,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessCodeBlockVueProps,
     HelixHeadlessCodeBlockVueEvents
   >;
-  /** A pane for working on a file: a header with its name, its language and the page's own actions, the code, the problems in it, and a status line that says where the caret is. On its own the code is a '<textarea>' in the code face. Connect an engine and it draws the code instead: 'connectEditor' from '@fusion.dev/helix-editor' connects CodeMirror, with highlighting in your theme's syntax colors, line numbers, folding, bracket matching and history. The value, the form, validation and the events stay the editor's, so a page reads and writes it the same either way.  For a few lines in a form, such as a setting in JSON, use 'Code Input', which needs no engine.  - 'language' picks the highlighting, such as 'ts', 'css', 'html', 'md',   'json', 'python', 'rust' or 'sh', and the header names it. - 'diagnostics' marks problems, from a linter or a language server: each is   underlined in the text, its line number is drawn in its tone, and it is   listed under the code, where pressing it moves the caret to it. - The find bar finds, with the case, whole words or a regular expression,   and replaces once its first button shows the replace field, in the   engine or in the plain field alike. - Every change goes through 'requestValue', so a listener refusing   'helix-before-change' refuses the keystroke, in the engine too.  **Keyboard.** Command+F, or Control+F elsewhere, opens the find bar, Enter and Shift+Enter move between matches, and Escape closes it. In an engine, Tab indents and Escape then Tab leaves the editor, so the editor is never a trap for a reader without a pointer. */
+  /** A pane for working on a file: a header with its name, its language and the page's own actions, the code, the problems in it, and a status line that says where the caret is. On its own the code is a '<textarea>' in the code face. Connect an engine and it draws the code instead: 'connectCodeEditor' from '@fusion.dev/helix-code-editor' connects CodeMirror, with highlighting in your theme's syntax colors, line numbers, folding, bracket matching and history. The value, the form, validation and the events stay the editor's, so a page reads and writes it the same either way.  For a few lines in a form, such as a setting in JSON, use 'Code Input', which needs no engine.  - 'language' picks the highlighting, such as 'ts', 'css', 'html', 'md',   'json', 'python', 'rust' or 'sh', and the header names it. - 'diagnostics' marks problems, from a linter or a language server: each is   underlined in the text, its line number is drawn in its tone, and it is   listed under the code, where pressing it moves the caret to it. - The find bar finds, with the case, whole words or a regular expression,   and replaces once its first button shows the replace field, in the   engine or in the plain field alike. - Every change goes through 'requestValue', so a listener refusing   'helix-before-change' refuses the keystroke, in the engine too.  **Keyboard.** Command+F, or Control+F elsewhere, opens the find bar, Enter and Shift+Enter move between matches, and Escape closes it. In an engine, Tab indents and Escape then Tab leaves the editor, so the editor is never a trap for a reader without a pointer. */
   "helix-headless-code-editor": DefineCustomElement<
     HelixHeadlessCodeEditor,
     HelixHeadlessCodeEditorVueProps,
@@ -22886,6 +23014,12 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessDrilldownVueProps,
     HelixHeadlessDrilldownVueEvents
   >;
+  /** Wraps a document drawn by ProseMirror or another rich text editor. The frame adds a toolbar, an address bar for links, and a box the document is drawn in. 'connectEditor' from '@fusion.dev/helix-editor' connects ProseMirror: it gives the document Helix's typed blocks, each with a stable id, and draws them in your theme.  The document is the element you write inside the frame, so it stays in the page: the browser's input methods, spellcheck, and right-to-left text work in it as they do in any field. A server can send the document's HTML there, and it reads before any script loads. Mark it 'data-prose', so the base layer draws its headings, lists, and quotes before a renderer connects.  The toolbar's groups are named by 'tools', in this order: 'history' (Undo and Redo), 'block' (a menu of Paragraph, three headings, and Code block), 'marks' (Bold, Italic, Strikethrough, and Code), 'link', 'lists' (Bulleted and Numbered), and 'quote', which are drawn by default, and 'find', the Find button, which is drawn where 'tools' names it. A tool the renderer cannot run is left out once it is connected, and a tool that cannot apply at the selection is disabled. A tool returns focus to the document once it has run. With 'readonly', the document cannot be edited and the toolbar is not drawn.  Command+F opens a find bar under the toolbar, a Find that searches the document through the renderer, marks every match, and selects one. It replaces unless the document is 'readonly', which it searches too.  **Keyboard.** In the document:  - Command+B, Command+I, Command+Shift+X, and Command+E make text bold,   italic, struck through, and code. Use Control in place of Command on   Windows and Linux. - Command+Alt+0 makes a paragraph, Command+Alt+1 to 3 a heading, and   Command+Alt+8 a code block. - Command+Shift+8, Command+Shift+7, and Command+Shift+9 make a bulleted   list, a numbered list, and a quote. - Command+K opens the address bar for a link. Enter applies the address,   and Escape closes the bar. - Command+Z undoes, and Command+Shift+Z redoes. - In a list, Tab nests the item and Shift+Tab lifts it. Escape then Tab   leaves the document from anywhere, so a list never keeps focus. - Alt+F10 moves focus to the toolbar. The arrow keys move between its   tools, and Escape returns to the document. - Command+F opens the find bar. Enter and Shift+Enter move between the   matches, and Escape closes the bar and returns to the document. */
+  "helix-headless-editor": DefineCustomElement<
+    HelixHeadlessEditor,
+    HelixHeadlessEditorVueProps,
+    HelixHeadlessEditorVueEvents
+  >;
   /** Shows what would be in a region and the one action that would fill it, so an empty region does not look like one that failed to load.  The message is announced, because an empty view often replaces content that was loading, and the announcement tells a screen reader user that the search returned nothing. It is announced from a status region of its own, which is rendered empty and filled a frame after the view appears. Screen readers read a region that arrives with its text already in it inconsistently. For the seven seconds the region holds its copy, the heading and the message are hidden from screen readers, so the words are in the page once.  Every region is a bare slot. There is no 'empty-state-heading' or 'empty-state-actions' element: assign your own heading and actions to the slots. The icon, the message and the actions slots are parts of the same names, as Card's regions are. A slot draws no box, so a part passes inherited properties, such as color and font, to what is slotted, and a page wanting a box there gives it one with 'display', such as a row of actions with 'display: flex'.  **The view says which regions it holds**, as ':state(has-icon)' and ':state(has-actions)', so a sheet can space a view with no icon or no actions differently. Read in the browser, so a served view carries neither until the script runs.  **Or give the heading as words.** 'heading' draws them in a 'heading' part that is a heading at 'heading-level', 3 where it is not set, so a page rendering from data or on a server gets a heading a reader finds in the outline without writing the element. A heading slotted in replaces it.  **Whatever is slotted into 'heading' is read as a heading.** An element that is no heading, such as a '<span>' or a '<p>', is set inside the 'heading' part at 'heading-level', so a screen reader still finds it in the outline. A heading element, or an element holding one, keeps its own level. A server cannot see the slotted element, so a served '<span>' becomes a heading once the script runs. */
   "helix-headless-empty": DefineCustomElement<
     HelixHeadlessEmpty,

package/types/words.d.ts

@@ -1889,6 +1889,146 @@ declare module '@fusion.dev/helix-core' {
        */
       loadingText: Message
     }
+    'helix-editor': {
+      /**
+       * The block menu button's name. `{name}` is the block type at the selection.
+       *
+       * English: `Text style: {name}`
+       */
+      blockChosenLabel: Message
+      /**
+       * The block menu's name, read by screen readers.
+       *
+       * English: `Text style`
+       */
+      blockLabel: Message
+      /**
+       * The Bold button's label.
+       *
+       * English: `Bold`
+       */
+      boldLabel: Message
+      /**
+       * The Bulleted list button's label.
+       *
+       * English: `Bulleted list`
+       */
+      bulletListLabel: Message
+      /**
+       * The Code block row's label in the block menu.
+       *
+       * English: `Code block`
+       */
+      codeBlockLabel: Message
+      /**
+       * The Code button's label.
+       *
+       * English: `Code`
+       */
+      codeLabel: Message
+      /**
+       * The toolbar's name, read by screen readers.
+       *
+       * English: `Formatting`
+       */
+      controlsLabel: Message
+      /**
+       * The document's name where `label` is empty and the host has no `aria-label`.
+       *
+       * English: `Editor`
+       */
+      fallbackLabel: Message
+      /**
+       * The Find button's label, and the find bar's name.
+       *
+       * English: `Find`
+       */
+      findLabel: Message
+      /**
+       * A heading's name in the block menu. `{level}` is its level, 1 to 3.
+       *
+       * English: `Heading {level}`
+       */
+      headingLabel: Message
+      /**
+       * The Italic button's label.
+       *
+       * English: `Italic`
+       */
+      italicLabel: Message
+      /**
+       * The Apply button's label in the address bar.
+       *
+       * English: `Apply link`
+       */
+      linkApplyLabel: Message
+      /**
+       * The close button's label in the address bar.
+       *
+       * English: `Close`
+       */
+      linkCloseLabel: Message
+      /**
+       * The name of the address bar's toolbar, read by screen readers.
+       *
+       * English: `Link controls`
+       */
+      linkControlsLabel: Message
+      /**
+       * The address field's name, which it also shows while it is empty.
+       *
+       * English: `Address`
+       */
+      linkFieldLabel: Message
+      /**
+       * The Link button's label, and the address bar's name.
+       *
+       * English: `Link`
+       */
+      linkLabel: Message
+      /**
+       * The Remove button's label in the address bar.
+       *
+       * English: `Remove link`
+       */
+      linkRemoveLabel: Message
+      /**
+       * The Numbered list button's label.
+       *
+       * English: `Numbered list`
+       */
+      orderedListLabel: Message
+      /**
+       * The Paragraph row's label in the block menu.
+       *
+       * English: `Paragraph`
+       */
+      paragraphLabel: Message
+      /**
+       * The Quote button's label.
+       *
+       * English: `Quote`
+       */
+      quoteLabel: Message
+      /**
+       * The Redo button's label.
+       *
+       * English: `Redo`
+       */
+      redoLabel: Message
+      /**
+       * The Strikethrough button's label.
+       *
+       * English: `Strikethrough`
+       */
+      strikeLabel: Message
+      /**
+       * The Undo button's label.
+       *
+       * English: `Undo`
+       */
+      undoLabel: Message
+    }
     'helix-file-input': {
       /**
        * What a reader hears when a drop or a paste adds files, with `{names}` and