@dxos/ui-editor 0.0.0 → 0.8.4-main.1c7ec43d41

package/src/extensions/tags/xml-util.test.ts

@@ -2,47 +2,222 @@
 // Copyright 2025 DXOS.org
 //
 
-import { syntaxTree } from '@codemirror/language';
+import { ensureSyntaxTree, syntaxTree } from '@codemirror/language';
 import { EditorState } from '@codemirror/state';
-import { describe, it } from 'vitest';
+import { describe, test } from 'vitest';
 
-import { Trigger } from '@dxos/async';
 import { trim } from '@dxos/util';
 
 import { extendedMarkdown } from './extended-markdown';
+import TEXT from './testing/text.md?raw';
 import { xmlTags } from './xml-tags';
-import { nodeToJson } from './xml-util';
+import { nodeToJson, type Tag } from './xml-util';
+
+type ParsedElement = Tag & {
+  /** Element spans the entire document (opening through closing tag). */
+  complete: boolean;
+};
+
+/**
+ * Helper to extract all parsed XML elements from a document.
+ * Checks completeness by verifying the Element node has a CloseTag child.
+ */
+const parseElements = (doc: string, registry: Record<string, any> = {}): ParsedElement[] => {
+  const state = EditorState.create({
+    doc,
+    extensions: [extendedMarkdown({ registry }), xmlTags({ registry })],
+  });
+
+  const tree = ensureSyntaxTree(state, doc.length, 5000) ?? syntaxTree(state);
+  const elements: ParsedElement[] = [];
+  tree.iterate({
+    enter: (node) => {
+      if (node.type.name === 'Element') {
+        const tag = nodeToJson(state, node.node);
+        if (tag) {
+          const hasCloseTag = !!node.node.getChild('CloseTag');
+          const hasSelfClose = !!node.node.getChild('SelfClosingTag');
+          elements.push({
+            ...tag,
+            complete: hasCloseTag || hasSelfClose,
+          });
+        }
+        return false;
+      }
+    },
+  });
+
+  return elements;
+};
 
 describe('nodeToJson', () => {
-  it('should parse a simple element', async ({ expect }) => {
+  test('should parse a simple element', ({ expect }) => {
     const xml = trim`
       # Test
 
       <test id="123" foo="100" />
     `;
 
-    const state = EditorState.create({
-      doc: xml,
-      extensions: [extendedMarkdown(), xmlTags()],
-    });
-
-    const value = new Trigger<any>();
-    syntaxTree(state).iterate({
-      enter: (node) => {
-        switch (node.type.name) {
-          case 'Element': {
-            const args = nodeToJson(state, node.node);
-            value.wake(args);
-            break;
-          }
-        }
-      },
-    });
-
-    expect(await value.wait()).toEqual({
+    const elements = parseElements(xml);
+    expect(elements).toHaveLength(1);
+    expect(elements[0]).toMatchObject({
       _tag: 'test',
       id: '123',
       foo: '100',
     });
   });
+
+  test('should parse tag with single-line content', ({ expect }) => {
+    const xml = trim`
+      <reasoning>The user is asking about markdown.</reasoning>
+    `;
+
+    const registry = { reasoning: { block: true } };
+    const elements = parseElements(xml, registry);
+    expect(elements).toHaveLength(1);
+    expect(elements[0]._tag).toBe('reasoning');
+    expect(elements[0].complete).toBe(true);
+    expect(elements[0].children).toEqual(['The user is asking about markdown.']);
+  });
+
+  test('should parse tag with multi-line content without blank lines', ({ expect }) => {
+    const xml = trim`
+      <reasoning>
+      The user is asking about markdown.
+      This is a follow-up thought.
+      </reasoning>
+    `;
+
+    const registry = { reasoning: { block: true } };
+    const elements = parseElements(xml, registry);
+    expect(elements).toHaveLength(1);
+    expect(elements[0]._tag).toBe('reasoning');
+    expect(elements[0].complete).toBe(true);
+  });
+
+  // BUG: Blank lines inside XML tags cause the markdown parser to split the content
+  // into multiple blocks (HTMLBlock + Paragraph), preventing the XML mixed parser from
+  // seeing the full element. The first HTMLBlock gets an incomplete Element (no CloseTag),
+  // and the closing tag ends up in a Paragraph that's never parsed as XML.
+  //
+  // Syntax tree with blank lines:
+  //   Document [0-28] → Element (incomplete: OpenTag + Text + ⚠ — no CloseTag)
+  //   Paragraph [30-60] → "Second paragraph.\n</reasoning>"
+
+  test('should parse tag with blank lines in content', ({ expect }) => {
+    const xml = trim`
+      <reasoning>
+      The user is asking me to think deeply about what markdown is.
+
+      But given the context of our conversation - we've been trying to scrape slab data from a website - I think they might be hinting at something specific.
+      </reasoning>
+    `;
+
+    const registry = { reasoning: { block: true } };
+    const elements = parseElements(xml, registry);
+    expect(elements).toHaveLength(1);
+    expect(elements[0]._tag).toBe('reasoning');
+    expect(elements[0].complete).toBe(true);
+  });
+
+  // Regression: when reasoning text contains escaped XML (e.g. `&lt;foo&gt;`), Lezer XML
+  // splits the inline content into Text + EntityReference + Text + EntityReference + Text
+  // siblings. The walker used to skip entity references and push each text segment as a
+  // separate child, so `getXmlTextChild(children)` only saw the prefix before the first
+  // `&lt;` (e.g. ``"The user sent `"``).
+  test('should preserve text containing entity references as a single child', ({ expect }) => {
+    const xml = trim`
+      <reasoning>The user sent \`&lt;foo&gt;\`, which appears to be an XML-like tag.</reasoning>
+    `;
+
+    const registry = { reasoning: { block: true } };
+    const elements = parseElements(xml, registry);
+    expect(elements).toHaveLength(1);
+    expect(elements[0]._tag).toBe('reasoning');
+    expect(elements[0].children).toEqual(['The user sent `<foo>`, which appears to be an XML-like tag.']);
+  });
+
+  test('should decode numeric character references', ({ expect }) => {
+    const xml = trim`
+      <reasoning>arrow &#8594; and hex &#x2192;</reasoning>
+    `;
+
+    const registry = { reasoning: { block: true } };
+    const elements = parseElements(xml, registry);
+    expect(elements).toHaveLength(1);
+    expect(elements[0].children).toEqual(['arrow → and hex →']);
+  });
+
+  test('should parse tag with multiple blank lines in content', ({ expect }) => {
+    const xml = trim`
+      <reasoning>
+      First paragraph.
+
+
+      Second paragraph after two blank lines.
+      </reasoning>
+    `;
+
+    const registry = { reasoning: { block: true } };
+    const elements = parseElements(xml, registry);
+    expect(elements).toHaveLength(1);
+    expect(elements[0]._tag).toBe('reasoning');
+    expect(elements[0].complete).toBe(true);
+  });
+
+  // Regression: when an unregistered XML tag like `<prompt>` appears earlier in the doc,
+  // the markdown parser treats it as a paragraph that lazy-continues into subsequent lines,
+  // and a later multi-line tag (e.g. `<reasoning>` whose body contains an ordered list) gets
+  // its HTMLBlock truncated to its first line — losing the closing tag and breaking widget
+  // rendering. Including the surrounding tag in the registry as a block-only entry (no
+  // factory/Component) lets `xmlBlockParsers` keep each tag as its own block.
+  test('multi-line reasoning is complete when preceded by a registered prompt block', ({ expect }) => {
+    const xml = [
+      '<prompt>summarize the posts</prompt>',
+      '<toolCall id="x" />',
+      '<reasoning>multi line content',
+      '1. "First" - desc',
+      '5. "Last" - desc</reasoning>',
+    ].join('\n');
+    const registry = {
+      prompt: { block: true },
+      reasoning: { block: true },
+      toolCall: { block: true },
+    };
+    const elements = parseElements(xml, registry);
+    expect(elements.map((e) => `${e._tag}${e.complete ? '' : '!'}`)).toEqual(['prompt', 'toolCall', 'reasoning']);
+  });
+
+  test('should parse text.md', ({ expect }) => {
+    // Mirror the live ChatThread registry, including `prompt` as a block-only entry so
+    // unregistered-paragraph lazy-continuation does not break later multi-line tags.
+    const registry = {
+      prompt: { block: true },
+      reasoning: { block: true },
+      status: { block: true },
+      toolCall: { block: true },
+      name: { block: true },
+    };
+    const elements = parseElements(TEXT, registry);
+    const tags = elements.map((element) => element._tag);
+    expect(tags).toEqual([
+      'prompt',
+      'reasoning',
+      'status',
+      'toolCall',
+      'toolCall',
+      'reasoning',
+      'status',
+      'toolCall',
+      'reasoning',
+      'prompt',
+      'reasoning',
+      'prompt',
+      'name',
+    ]);
+    // Every element must be `complete` so the widget renderer wraps it. The bug we fixed:
+    // third multi-line `<reasoning>` (lines 9-14) used to be truncated by markdown's
+    // OrderedList parser breaking the HTMLBlock, leaving an Element node with no CloseTag.
+    expect(elements.filter((e) => !e.complete)).toEqual([]);
+  });
 });

package/src/extensions/tags/xml-util.ts

@@ -65,14 +65,25 @@ export const nodeToJson = (state: EditorState, node: SyntaxNode): Tag | undefine
       const children: any[] = [];
       let child = node.node.firstChild;
 
+      const appendText = (raw: string) => {
+        if (raw.length === 0) {
+          return;
+        }
+        const last = children[children.length - 1];
+        if (typeof last === 'string') {
+          children[children.length - 1] = last + raw;
+        } else {
+          children.push(raw);
+        }
+      };
+
       while (child) {
         // Skip the opening and closing tags.
         if (child.type.name !== 'OpenTag' && child.type.name !== 'CloseTag') {
           if (child.type.name === 'Text') {
-            const text = state.doc.sliceString(child.from, child.to).trim();
-            if (text) {
-              children.push(text);
-            }
+            appendText(state.doc.sliceString(child.from, child.to));
+          } else if (child.type.name === 'EntityReference' || child.type.name === 'CharacterReference') {
+            appendText(decodeXmlEntity(state.doc.sliceString(child.from, child.to)));
           } else if (child.type.name === 'Element') {
             const data = nodeToJson(state, child);
             if (data) {
@@ -83,11 +94,57 @@ export const nodeToJson = (state: EditorState, node: SyntaxNode): Tag | undefine
         child = child.nextSibling;
       }
 
+      // Trim only leading/trailing whitespace on the outer-boundary string segments —
+      // interior strings are preserved verbatim so meaningful whitespace around inline
+      // child elements (e.g. `<reasoning>foo <ref/> bar</reasoning>`) is not collapsed.
+      if (children.length > 0 && typeof children[0] === 'string') {
+        children[0] = children[0].trimStart();
+      }
       if (children.length > 0) {
-        tag.children = children;
+        const lastIndex = children.length - 1;
+        const last = children[lastIndex];
+        if (typeof last === 'string') {
+          children[lastIndex] = last.trimEnd();
+        }
+      }
+      const trimmed = children.filter((value) => typeof value !== 'string' || value.length > 0);
+
+      if (trimmed.length > 0) {
+        tag.children = trimmed;
       }
     }
 
     return tag;
   }
 };
+
+/**
+ * Decode the common XML named entities and numeric character references that
+ * Lezer XML produces as `EntityReference` / `CharacterReference` nodes.
+ */
+const XML_NAMED_ENTITIES: Record<string, string> = {
+  '&lt;': '<',
+  '&gt;': '>',
+  '&amp;': '&',
+  '&quot;': '"',
+  '&apos;': "'",
+};
+
+const decodeXmlEntity = (raw: string): string => {
+  const named = XML_NAMED_ENTITIES[raw];
+  if (named !== undefined) {
+    return named;
+  }
+  const numeric = /^&#(x?)([0-9a-fA-F]+);$/.exec(raw);
+  if (numeric) {
+    const code = parseInt(numeric[2], numeric[1] ? 16 : 10);
+    if (Number.isFinite(code)) {
+      try {
+        return String.fromCodePoint(code);
+      } catch {
+        // Fall through and return the raw text on out-of-range code points.
+      }
+    }
+  }
+  return raw;
+};

package/src/index.ts

@@ -10,5 +10,4 @@ export { TextKind } from '@dxos/protocols/proto/dxos/echo/model/text';
 
 export * from './defaults';
 export * from './extensions';
-export * from './types';
 export * from './util';

package/src/styles/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './markdown';
 export * from './theme';
-export * from './tokens';

package/src/styles/theme.ts

@@ -5,7 +5,60 @@
 import { type Extension } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 
-import { fontBody, fontMono } from './tokens';
+import { mx } from '@dxos/ui-theme';
+
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+
+// https://tailwindcss.com/docs/font-weight
+const headings: Record<HeadingLevel, { className: string; fontSize: string; lineHeight: string }> = {
+  1: {
+    className: 'text-3xl',
+    fontSize: 'var(--text-3xl)',
+    lineHeight: 'var(--text-4xl--line-height)',
+  },
+  2: {
+    className: 'text-2xl',
+    fontSize: 'var(--text-2xl)',
+    lineHeight: 'var(--text-3xl--line-height)',
+  },
+  3: {
+    className: 'text-xl',
+    fontSize: 'var(--text-xl)',
+    lineHeight: 'var(--text-2xl--line-height)',
+  },
+  4: {
+    className: 'text-lg',
+    fontSize: 'var(--text-lg)',
+    lineHeight: 'var(--text-xl--line-height)',
+  },
+  5: {
+    className: 'text-base',
+    fontSize: 'var(--text-base)',
+    lineHeight: 'var(--text-lg--line-height)',
+  },
+  6: {
+    className: 'text-base',
+    fontSize: 'var(--text-base)',
+    lineHeight: 'var(--text-base--line-height)',
+  },
+};
+
+// Font families matching --font-body and --font-mono in theme.css.
+export const fontBody = '"Inter Variable", ui-sans-serif, system-ui, sans-serif';
+export const fontMono = '"JetBrains Mono Variable", ui-monospace, "Cascadia Code", "Source Code Pro", monospace';
+
+export const markdownTheme = {
+  code: 'font-mono! cm-code-inline',
+  codeMark: 'font-mono! cm-code-mark',
+  mark: 'font-mono!',
+  heading: (level: HeadingLevel) => ({
+    className: mx(headings[level].className, 'font-light text-(--color-cm-heading-number)'),
+    color: 'var(--color-cm-heading) !important',
+    lineHeight: headings[level].lineHeight,
+    fontSize: headings[level].fontSize,
+    fontWeight: '100 !important',
+  }),
+};
 
 /**
  * Global base theme.
@@ -43,6 +96,9 @@ import { fontBody, fontMono } from './tokens';
  * </div>
  */
 export const baseTheme = EditorView.baseTheme({
+  /**
+   * Outer frame.
+   */
   '&': {},
   '&.cm-focused': {
     outline: 'none',
@@ -52,7 +108,27 @@ export const baseTheme = EditorView.baseTheme({
    * Scroller
    */
   '.cm-scroller': {
-    overflowY: 'auto',
+    // Browser scroll-anchoring: see comment in `scroller.ts`. `auto` lets the browser pin a
+    // stable element near the viewport top so widget resizes (e.g. tool-block TogglePanel
+    // open/close) don't jump the user's view.
+    overflowAnchor: 'auto',
+  },
+  '.cm-scroller::-webkit-scrollbar': {
+    width: 'var(--scrollbar-size,8px)',
+    height: 'var(--scrollbar-size,8px)',
+  },
+  '.cm-scroller::-webkit-scrollbar-corner': {
+    background: 'transparent',
+  },
+  '.cm-scroller::-webkit-scrollbar-track': {
+    background: 'transparent',
+  },
+  '.cm-scroller::-webkit-scrollbar-thumb': {
+    background: 'transparent',
+    transition: 'background 0.15s',
+  },
+  '&:hover .cm-scroller::-webkit-scrollbar-thumb': {
+    background: 'var(--color-scrollbar-thumb)',
   },
 
   /**
@@ -61,7 +137,6 @@ export const baseTheme = EditorView.baseTheme({
    */
   '.cm-content': {
     padding: 'unset',
-    lineHeight: '24px',
     color: 'unset',
   },
 
@@ -76,8 +151,8 @@ export const baseTheme = EditorView.baseTheme({
   '.cm-gutter': {},
   '.cm-gutter.cm-lineNumbers': {
     paddingRight: '4px',
-    borderRight: '1px solid var(--dx-subduedSeparator)',
-    color: 'var(--dx-subduedText)',
+    borderRight: '1px solid var(--color-subdued-separator)',
+    color: 'var(--color-subdued)',
   },
   '.cm-gutter.cm-lineNumbers .cm-gutterElement': {
     minWidth: '40px',
@@ -94,31 +169,38 @@ export const baseTheme = EditorView.baseTheme({
    * Line.
    */
   '.cm-line': {
-    lineHeight: '24px',
+    lineHeight: 1.5,
     paddingInline: 0,
   },
+  /**
+   * Force all inline children to inherit line-height to prevent monospace font metrics
+   * (JetBrains Mono ascent/descent) from inflating the line box beyond 24px.
+   */
+  '.cm-line *': {
+    lineHeight: 'inherit',
+  },
   '.cm-activeLine': {
-    background: 'var(--dx-cmActiveLine)',
+    background: 'var(--color-cm-active-line)',
   },
 
   /**
    * Cursor (layer).
    */
   '.cm-cursor, .cm-dropCursor': {
-    borderLeft: '2px solid var(--dx-cmCursor)',
+    borderLeft: '2px solid var(--color-cm-cursor)',
   },
   '.cm-placeholder': {
-    color: 'var(--dx-placeholder)',
+    color: 'var(--color-placeholder)',
   },
 
   /**
    * Selection (layer).
    */
   '.cm-selectionBackground': {
-    background: 'var(--dx-cmSelection)',
+    background: 'var(--color-cm-selection)',
   },
   '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground': {
-    background: 'var(--dx-cmFocusedSelection)',
+    background: 'var(--color-cm-focused-selection)',
   },
 
   /**
@@ -129,8 +211,8 @@ export const baseTheme = EditorView.baseTheme({
     margin: '0 -3px',
     padding: '3px',
     borderRadius: '3px',
-    background: 'var(--dx-cmHighlightSurface)',
-    color: 'var(--dx-cmHighlight)',
+    background: 'var(--color-cm-highlight-surface)',
+    color: 'var(--color-cm-highlight)',
   },
   '.cm-searchMatch-selected': {
     textDecoration: 'underline',
@@ -142,21 +224,30 @@ export const baseTheme = EditorView.baseTheme({
   '.cm-link': {
     textDecorationLine: 'underline',
     textDecorationThickness: '1px',
-    textDecorationColor: 'var(--dx-separator)',
+    textDecorationColor: 'var(--color-separator)',
     textUnderlineOffset: '2px',
     borderRadius: '.125rem',
   },
   '.cm-link > span': {
-    color: 'var(--dx-accentText)',
+    color: 'var(--color-accent-text)',
+  },
+  '.cm-link > span:hover': {
+    color: 'var(--color-accent-text-hover)',
   },
 
   /**
    * Tooltip.
    */
   '.cm-tooltip': {
-    background: 'var(--dx-baseSurface)',
+    background: 'var(--color-modal-surface)',
   },
   '.cm-tooltip-below': {},
+  '.cm-tooltip-hover': {
+    background: 'var(--color-modal-surface)',
+    border: '1px solid var(--color-separator)',
+    borderRadius: '4px',
+    overflow: 'hidden',
+  },
 
   /**
    * Autocomplete.
@@ -165,7 +256,7 @@ export const baseTheme = EditorView.baseTheme({
   '.cm-tooltip.cm-tooltip-autocomplete': {
     marginTop: '6px',
     marginLeft: '-10px',
-    border: '2px solid var(--dx-separator)',
+    border: '2px solid var(--color-separator)',
     borderRadius: '4px',
   },
   '.cm-tooltip.cm-tooltip-autocomplete > ul': {
@@ -175,12 +266,12 @@ export const baseTheme = EditorView.baseTheme({
     padding: '4px',
   },
   '.cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]': {
-    background: 'var(--dx-activeSurface)',
-    color: 'var(--dx-activeSurfaceText)',
+    background: 'var(--color-active-surface)',
+    color: 'var(--color-base-surface-text)',
   },
   '.cm-tooltip.cm-tooltip-autocomplete > ul > completion-section': {
     paddingLeft: '4px !important',
-    color: 'var(--dx-hoverSurfaceText)',
+    color: 'var(--color-base-surface-text)',
   },
 
   /**
@@ -190,17 +281,17 @@ export const baseTheme = EditorView.baseTheme({
     width: '360px !important',
     margin: '-10px 1px 0 1px',
     padding: '8px !important',
-    borderColor: 'var(--dx-separator)',
+    borderColor: 'var(--color-separator)',
   },
   '.cm-completionIcon': {
     display: 'none',
   },
   '.cm-completionLabel': {
-    color: 'var(--dx-description)',
+    color: 'var(--color-description)',
     padding: '0 4px',
   },
   '.cm-completionMatchedText': {
-    color: 'var(--dx-baseText)',
+    color: 'var(--color-base-surface-text)',
     textDecoration: 'none !important',
   },
 
@@ -225,7 +316,7 @@ export const baseTheme = EditorView.baseTheme({
     backgroundColor: 'var(--surface-bg)',
   },
   '.cm-panel input, .cm-panel button, .cm-panel label': {
-    color: 'var(--dx-subdued)',
+    color: 'var(--color-subdued)',
     fontSize: '14px',
     all: 'unset',
     margin: '3px !important',
@@ -233,10 +324,10 @@ export const baseTheme = EditorView.baseTheme({
     outline: '1px solid transparent',
   },
   '.cm-panel input, .cm-panel button': {
-    backgroundColor: 'var(--dx-inputSurface)',
+    backgroundColor: 'var(--color-input-surface)',
   },
   '.cm-panel input:focus, .cm-panel button:focus': {
-    outline: '1px solid var(--dx-neutralFocusIndicator)',
+    outline: '1px solid var(--color-neutral-focus-indicator)',
   },
   '.cm-panel label': {
     display: 'inline-flex',
@@ -249,26 +340,27 @@ export const baseTheme = EditorView.baseTheme({
     height: '8px',
     marginRight: '6px !important',
     padding: '2px !important',
-    color: 'var(--dx-neutralFocusIndicator)',
+    color: 'var(--color-neutral-focus-indicator)',
   },
   '.cm-panel button': {
     '&:hover': {
-      backgroundColor: 'var(--dx-accentSurfaceHover) !important',
+      // TODO(burdon): Replace with layer and @apply bg-accent-surface-hover
+      backgroundColor: 'var(--color-accent-surface-hover) !important',
     },
     '&:active': {
-      backgroundColor: 'var(--dx-accentSurfaceHover)',
+      backgroundColor: 'var(--color-accent-surface-hover)',
     },
   },
   '.cm-panel.cm-search': {
     padding: '4px',
-    borderTop: '1px solid var(--dx-separator)',
+    borderTop: '1px solid var(--color-separator)',
   },
 });
 
 export const editorGutter: Extension = EditorView.theme({
   '.cm-gutters': {
     // NOTE: Non-transparent background required to cover content if scrolling horizontally.
-    background: 'var(--dx-baseSurface) !important',
+    background: 'var(--color-base-surface) !important',
     paddingRight: '1rem',
   },
 });
@@ -279,10 +371,9 @@ export type FontOptions = {
 
 export const createFontTheme = ({ monospace }: FontOptions = {}) =>
   EditorView.theme({
-    // Set metrics on the scroller (this is often what CM uses for layout).
+    // Main content.
     '.cm-scroller': {
       fontFamily: monospace ? fontMono : fontBody,
-      fontSize: '16px',
     },
 
     // Maintain defaults for UI components.

package/src/types/types.ts

@@ -24,9 +24,17 @@ export type Comment = {
 export type RenderCallback<Props extends object> = (el: HTMLElement, props: Props, view: EditorView) => void;
 
 export const EditorViewModes = ['preview', 'readonly', 'source'] as const;
-export const EditorViewMode = Schema.Union(...EditorViewModes.map((mode) => Schema.Literal(mode)));
+export const EditorViewMode = Schema.Union(
+  Schema.Literal('preview').annotations({ title: 'Preview' }),
+  Schema.Literal('readonly').annotations({ title: 'Read-only' }),
+  Schema.Literal('source').annotations({ title: 'Source' }),
+);
 export type EditorViewMode = Schema.Schema.Type<typeof EditorViewMode>;
 
 export const EditorInputModes = ['default', 'vim', 'vscode'] as const;
-export const EditorInputMode = Schema.Union(...EditorInputModes.map((mode) => Schema.Literal(mode)));
+export const EditorInputMode = Schema.Union(
+  Schema.Literal('default').annotations({ title: 'Default' }),
+  Schema.Literal('vim').annotations({ title: 'Vim' }),
+  Schema.Literal('vscode').annotations({ title: 'VS Code' }),
+);
 export type EditorInputMode = Schema.Schema.Type<typeof EditorInputMode>;