@fusion.dev/helix 0.220.0 → 0.221.0

package/types/svelte.d.ts

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

package/types/vue.d.ts

@@ -90,6 +90,7 @@ import type {
   HelixDrilldown,
   HelixDrilldownItem,
   HelixEditEvent,
+  HelixEditor,
   HelixEmpty,
   HelixEndEvent,
   HelixExpandEvent,
@@ -4764,7 +4765,7 @@ Here rather than on each control. */
   /** The problems in the text, each underlined and listed under the editor. */
   diagnostics?: (HelixCodeEditor["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?: (HelixCodeEditor["engine"]) | undefined;
 };
 
@@ -8845,6 +8846,138 @@ export type HelixDrilldownVueEvents = {
   "helix-select": HelixDrilldownHelixSelectElementEvent;
 };
 
+/** `HelixEditor` component event */
+export type HelixEditorElementEvent<E = Event> = TypedEvent<HelixEditor, E>;
+/** `helix-found` event type */
+export type HelixEditorHelixFoundElementEvent =
+  HelixEditorElementEvent<HelixFoundEvent>;
+
+export type HelixEditorVueProps = {
+  /** Covers 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`. */
+  fill?: (HelixEditor["fill"]) | undefined;
+  /** 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. */
+  separation?: (HelixEditor["separation"]) | undefined;
+  /** The block menu button's name. `{name}` is the block type at the selection. */
+  "block-chosen-label"?: (HelixEditor["blockChosenLabel"]) | undefined;
+  /** The block menu button's name. `{name}` is the block type at the selection. */
+  blockChosenLabel?: (HelixEditor["blockChosenLabel"]) | undefined;
+  /** The block menu's name, read by screen readers. */
+  "block-label"?: (HelixEditor["blockLabel"]) | undefined;
+  /** The block menu's name, read by screen readers. */
+  blockLabel?: (HelixEditor["blockLabel"]) | undefined;
+  /** The Bold button's label. */
+  "bold-label"?: (HelixEditor["boldLabel"]) | undefined;
+  /** The Bold button's label. */
+  boldLabel?: (HelixEditor["boldLabel"]) | undefined;
+  /** The Bulleted list button's label. */
+  "bullet-list-label"?: (HelixEditor["bulletListLabel"]) | undefined;
+  /** The Bulleted list button's label. */
+  bulletListLabel?: (HelixEditor["bulletListLabel"]) | undefined;
+  /** The Code block row's label in the block menu. */
+  "code-block-label"?: (HelixEditor["codeBlockLabel"]) | undefined;
+  /** The Code block row's label in the block menu. */
+  codeBlockLabel?: (HelixEditor["codeBlockLabel"]) | undefined;
+  /** The Code button's label. */
+  "code-label"?: (HelixEditor["codeLabel"]) | undefined;
+  /** The Code button's label. */
+  codeLabel?: (HelixEditor["codeLabel"]) | undefined;
+  /** The toolbar's name, read by screen readers. */
+  "controls-label"?: (HelixEditor["controlsLabel"]) | undefined;
+  /** The toolbar's name, read by screen readers. */
+  controlsLabel?: (HelixEditor["controlsLabel"]) | undefined;
+  /** The document's name where `label` is empty and the host has no `aria-label`. */
+  "fallback-label"?: (HelixEditor["fallbackLabel"]) | undefined;
+  /** The document's name where `label` is empty and the host has no `aria-label`. */
+  fallbackLabel?: (HelixEditor["fallbackLabel"]) | undefined;
+  /** The Find button's label, and the find bar's name. */
+  "find-label"?: (HelixEditor["findLabel"]) | undefined;
+  /** The Find button's label, and the find bar's name. */
+  findLabel?: (HelixEditor["findLabel"]) | undefined;
+  /** A heading's name in the block menu. `{level}` is its level, 1 to 3. */
+  "heading-label"?: (HelixEditor["headingLabel"]) | undefined;
+  /** A heading's name in the block menu. `{level}` is its level, 1 to 3. */
+  headingLabel?: (HelixEditor["headingLabel"]) | undefined;
+  /** The Italic button's label. */
+  "italic-label"?: (HelixEditor["italicLabel"]) | undefined;
+  /** The Italic button's label. */
+  italicLabel?: (HelixEditor["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?: (HelixEditor["label"]) | undefined;
+  /** The Apply button's label in the address bar. */
+  "link-apply-label"?: (HelixEditor["linkApplyLabel"]) | undefined;
+  /** The Apply button's label in the address bar. */
+  linkApplyLabel?: (HelixEditor["linkApplyLabel"]) | undefined;
+  /** The close button's label in the address bar. */
+  "link-close-label"?: (HelixEditor["linkCloseLabel"]) | undefined;
+  /** The close button's label in the address bar. */
+  linkCloseLabel?: (HelixEditor["linkCloseLabel"]) | undefined;
+  /** The name of the address bar's toolbar, read by screen readers. */
+  "link-controls-label"?: (HelixEditor["linkControlsLabel"]) | undefined;
+  /** The name of the address bar's toolbar, read by screen readers. */
+  linkControlsLabel?: (HelixEditor["linkControlsLabel"]) | undefined;
+  /** The address field's name, which it also shows while it is empty. */
+  "link-field-label"?: (HelixEditor["linkFieldLabel"]) | undefined;
+  /** The address field's name, which it also shows while it is empty. */
+  linkFieldLabel?: (HelixEditor["linkFieldLabel"]) | undefined;
+  /** The Link button's label, and the address bar's name. */
+  "link-label"?: (HelixEditor["linkLabel"]) | undefined;
+  /** The Link button's label, and the address bar's name. */
+  linkLabel?: (HelixEditor["linkLabel"]) | undefined;
+  /** The Remove button's label in the address bar. */
+  "link-remove-label"?: (HelixEditor["linkRemoveLabel"]) | undefined;
+  /** The Remove button's label in the address bar. */
+  linkRemoveLabel?: (HelixEditor["linkRemoveLabel"]) | undefined;
+  /** The Numbered list button's label. */
+  "ordered-list-label"?: (HelixEditor["orderedListLabel"]) | undefined;
+  /** The Numbered list button's label. */
+  orderedListLabel?: (HelixEditor["orderedListLabel"]) | undefined;
+  /** The Paragraph row's label in the block menu. */
+  "paragraph-label"?: (HelixEditor["paragraphLabel"]) | undefined;
+  /** The Paragraph row's label in the block menu. */
+  paragraphLabel?: (HelixEditor["paragraphLabel"]) | undefined;
+  /** The words shown in an empty document, such as "Write the release notes". */
+  placeholder?: (HelixEditor["placeholder"]) | undefined;
+  /** The Quote button's label. */
+  "quote-label"?: (HelixEditor["quoteLabel"]) | undefined;
+  /** The Quote button's label. */
+  quoteLabel?: (HelixEditor["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?: (HelixEditor["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?: (HelixEditor["readOnly"]) | undefined;
+  /** The Redo button's label. */
+  "redo-label"?: (HelixEditor["redoLabel"]) | undefined;
+  /** The Redo button's label. */
+  redoLabel?: (HelixEditor["redoLabel"]) | undefined;
+  /** The Strikethrough button's label. */
+  "strike-label"?: (HelixEditor["strikeLabel"]) | undefined;
+  /** The Strikethrough button's label. */
+  strikeLabel?: (HelixEditor["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?: (HelixEditor["tools"]) | undefined;
+  /** The Undo button's label. */
+  "undo-label"?: (HelixEditor["undoLabel"]) | undefined;
+  /** The Undo button's label. */
+  undoLabel?: (HelixEditor["undoLabel"]) | undefined;
+};
+
+export type HelixEditorVueEvents = {
+  /** 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": HelixEditorHelixFoundElementEvent;
+};
+
 export type HelixEmptyVueProps = {
   /** The heading as words, such as "No results", drawn as a heading when
 nothing is slotted into `heading`.
@@ -26118,6 +26251,22 @@ export type CustomCssProperties = {
   "--drilldown-title-font-weight"?: (string) | undefined;
   /** How far a page slides as it arrives, along the line of text. */
   "--drilldown-travel"?: (string) | undefined;
+  /** The ground the document is drawn on. Defaults to the page's background. */
+  "--editor-background-color"?: (string) | undefined;
+  /** The frame's edge and the line under the toolbar. */
+  "--editor-border-color"?: (string) | undefined;
+  /** The fill of the toolbar's strip. */
+  "--editor-header-background-color"?: (string) | undefined;
+  /** How 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-header-offset"?: (string) | undefined;
+  /** The longest a line of the document runs, as a length: `72ch` unless set. */
+  "--editor-measure"?: (string) | undefined;
+  /** The frame's least height, which it grows from with the document: `12rem` unless set. Ignored with `fill`. */
+  "--editor-min-block-size"?: (string) | undefined;
+  /** The space around the document, inside the frame. */
+  "--editor-padding"?: (string) | undefined;
+  /** The frame's corner radius. */
+  "--editor-radius"?: (string) | undefined;
   /** Space added above the actions. */
   "--empty-actions-gap"?: (string) | undefined;
   /** Space between the icon, the heading, the message and the actions. */
@@ -28236,7 +28385,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixCodeBlockVueProps,
     HelixCodeBlockVueEvents
   >;
-  /** Drawn as Terminal and Code Block are: the code on the page's ground, with a header, a find bar and a status line each a strip on the raised surface, one frame around them. It is 24rem tall unless 'fill' is set or '--code-editor-block-size' says otherwise. An engine draws inside it: '@fusion.dev/helix-editor' themes CodeMirror's gutter, caret, selection and syntax from your tokens, and draws a problem's line number in its tone.  Set 'fill' for an editor that fills a pane, such as one side of a split view. */
+  /** Drawn as Terminal and Code Block are: the code on the page's ground, with a header, a find bar and a status line each a strip on the raised surface, one frame around them. It is 24rem tall unless 'fill' is set or '--code-editor-block-size' says otherwise. An engine draws inside it: '@fusion.dev/helix-code-editor' themes CodeMirror's gutter, caret, selection and syntax from your tokens, and draws a problem's line number in its tone.  Set 'fill' for an editor that fills a pane, such as one side of a split view. */
   "helix-code-editor": DefineCustomElement<
     HelixCodeEditor,
     HelixCodeEditorVueProps,
@@ -28356,6 +28505,12 @@ export interface WcToolkitVueGlobalComponents {
     HelixDrilldownVueProps,
     HelixDrilldownVueEvents
   >;
+  /** Drawn as Code Editor is: the document on the page's ground, and the toolbar a strip on the raised surface, one frame around them. The strip stays at the top of the page while a long document scrolls under it, and the frame grows with the document from '--editor-min-block-size'. Set 'fill' for an editor that fills a pane, where the document scrolls inside the frame.  The document's headings, lists, quotes, code, and tables are drawn by the base layer's 'data-prose' rules, so it reads as your docs and chat replies do. Write 'data-prose' on the document so the base layer draws it before a renderer connects, and 'connectEditor' writes it too. Its lines keep to a readable length, '--editor-measure', centered in a wide frame. */
+  "helix-editor": DefineCustomElement<
+    HelixEditor,
+    HelixEditorVueProps,
+    HelixEditorVueEvents
+  >;
   /** Centered with space around it. An empty view is the only thing on screen, and pressed against the top edge it looks broken. */
   "helix-empty": DefineCustomElement<
     HelixEmpty,

package/types/words.d.ts

@@ -1897,6 +1897,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