@dxos/react-ui-editor 0.8.4-main.ead640a → 0.8.4-main.effb148878

package/src/stories/Theme.stories.tsx

@@ -0,0 +1,61 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useMemo } from 'react';
+
+import { useThemeContext } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { createBasicExtensions, createThemeExtensions } from '@dxos/ui-editor';
+
+import { Editor } from '../components';
+
+const createText = (monospace?: boolean) =>
+  [`${monospace ? 'monospace' : 'body'}`, 'Hello world', '0123456789'].join('\n');
+
+const DefaultStory = () => {
+  const { themeMode } = useThemeContext();
+  const [ext1, ext2] = useMemo(
+    () => [
+      //
+      [
+        createBasicExtensions({ placeholder: 'Enter text', search: true }),
+        createThemeExtensions({ themeMode, monospace: false }),
+      ],
+      [
+        createBasicExtensions({ placeholder: 'Enter text', search: true }),
+        createThemeExtensions({ themeMode, monospace: true }),
+      ],
+    ],
+    [],
+  );
+
+  return (
+    <div className='w-full grid grid-cols-2 gap-2'>
+      <Editor.Root>
+        <Editor.View classNames='p-2' extensions={ext1} initialValue={createText(false)} />
+      </Editor.Root>
+      <Editor.Root>
+        <Editor.View classNames='p-2' extensions={ext2} initialValue={createText(true)} />
+      </Editor.Root>
+    </div>
+  );
+};
+
+const meta: Meta<typeof DefaultStory> = {
+  title: 'ui/react-ui-editor/Theme',
+  component: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};

package/src/stories/components/EditorStory.tsx

@@ -3,30 +3,29 @@
 //
 
 import { type EditorView } from '@codemirror/view';
-import React, { type ReactNode, forwardRef, useEffect, useImperativeHandle, useMemo, useState } from 'react';
+import React, { type ReactNode, forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 
-import { Expando } from '@dxos/echo/internal';
-import { live } from '@dxos/echo/internal';
+import { Obj } from '@dxos/echo';
+import { TestSchema } from '@dxos/echo/testing';
 import { invariant } from '@dxos/invariant';
 import { PublicKey } from '@dxos/keys';
-import { createDocAccessor, createObject } from '@dxos/react-client/echo';
-import { useForwardedRef, useThemeContext } from '@dxos/react-ui';
+import { log } from '@dxos/log';
+import { useMergeRefs, useThemeContext } from '@dxos/react-ui';
 import { useAttentionAttributes } from '@dxos/react-ui-attention';
-import { JsonFilter } from '@dxos/react-ui-syntax-highlighter';
-import { mx } from '@dxos/react-ui-theme';
-import { isNonNullable } from '@dxos/util';
-
-import { editorGutter, editorSlots } from '../../defaults';
+import { Syntax } from '@dxos/react-ui-syntax-highlighter';
 import {
   type DebugNode,
   type ThemeExtensionsOptions,
   createBasicExtensions,
-  createDataExtensions,
   createMarkdownExtensions,
   createThemeExtensions,
   debugTree,
-  decorateMarkdown,
-} from '../../extensions';
+  documentSlots,
+} from '@dxos/ui-editor';
+import { mx } from '@dxos/ui-theme';
+import { isNonNullable } from '@dxos/util';
+
+import { type EditorController, createEditorController } from '../../components';
 import { type UseTextEditorProps, useTextEditor } from '../../hooks';
 
 // Type definitions.
@@ -34,33 +33,37 @@ export type DebugMode = 'raw' | 'tree' | 'raw+tree';
 
 const defaultId = 'editor-' + PublicKey.random().toHex().slice(0, 8);
 
-export type StoryProps = Pick<UseTextEditorProps, 'id' | 'scrollTo' | 'selection' | 'extensions'> &
+export type EditorStoryProps = Pick<UseTextEditorProps, 'id' | 'scrollTo' | 'selection' | 'extensions'> &
   Pick<ThemeExtensionsOptions, 'slots'> & {
     debug?: DebugMode;
     debugCustom?: (view: EditorView) => ReactNode;
     text?: string;
-    object?: Expando;
+    object?: Obj.OfShape<TestSchema.Expando>;
     readOnly?: boolean;
     placeholder?: string;
     lineNumbers?: boolean;
+    monospace?: boolean;
     onReady?: (view: EditorView) => void;
   };
 
-export const EditorStory = forwardRef<EditorView | null, StoryProps>(
-  ({ debug, debugCustom, text, extensions: _extensions, ...props }, forwardedRef) => {
+export const EditorStory = forwardRef<EditorController, EditorStoryProps>(
+  ({ debug, debugCustom, text, extensions: extensionsProp, ...props }, forwardedRef) => {
+    const controllerRef = useRef<EditorController>(null);
+    const mergedRef = useMergeRefs([controllerRef, forwardedRef]);
+
     const attentionAttrs = useAttentionAttributes('test-panel');
     const [tree, setTree] = useState<DebugNode>();
-    const [object] = useState(createObject(live(Expando, { content: text ?? '' })));
-    const viewRef = useForwardedRef(forwardedRef);
+    const [object] = useState(Obj.make(TestSchema.Expando, { content: text ?? '' }));
+
     const extensions = useMemo(
-      () => (debug ? [_extensions, debugTree(setTree)].filter(isNonNullable) : _extensions),
-      [debug, _extensions],
+      () => (debug ? [extensionsProp, debugTree(setTree)].filter(isNonNullable) : extensionsProp),
+      [debug, extensionsProp],
     );
 
-    const view = viewRef.current;
+    const view = controllerRef.current?.view;
     return (
-      <div className={mx('w-full h-full grid overflow-hidden', debug && 'grid-cols-2 lg:grid-cols-[1fr_600px]')}>
-        <EditorComponent ref={viewRef} object={object} text={text} extensions={extensions} {...props} />
+      <div className={mx('dx-container grid', debug && 'grid-cols-2 lg:grid-cols-[1fr_600px]')}>
+        <EditorComponent ref={mergedRef} object={object} text={text} extensions={extensions} {...props} />
 
         {debug && (
           <div
@@ -73,7 +76,16 @@ export const EditorStory = forwardRef<EditorView | null, StoryProps>(
                 {view?.state.doc.toString()}
               </pre>
             )}
-            {(debug === 'tree' || debug === 'raw+tree') && <JsonFilter data={tree} classNames='p-1 text-xs' />}
+            {(debug === 'tree' || debug === 'raw+tree') && (
+              <Syntax.Root data={tree}>
+                <Syntax.Content>
+                  <Syntax.Filter />
+                  <Syntax.Viewport>
+                    <Syntax.Code classNames='p-1 text-xs' />
+                  </Syntax.Viewport>
+                </Syntax.Content>
+              </Syntax.Root>
+            )}
           </div>
         )}
       </div>
@@ -84,7 +96,7 @@ export const EditorStory = forwardRef<EditorView | null, StoryProps>(
 /**
  * Default story component.
  */
-export const EditorComponent = forwardRef<EditorView | null, StoryProps>(
+const EditorComponent = forwardRef<EditorController, EditorStoryProps>(
   (
     {
       id = defaultId,
@@ -93,10 +105,11 @@ export const EditorComponent = forwardRef<EditorView | null, StoryProps>(
       readOnly,
       placeholder = 'New document.',
       lineNumbers,
+      monospace,
       scrollTo,
       selection,
       extensions,
-      slots = editorSlots,
+      slots = documentSlots,
       onReady,
     },
     forwardedRef,
@@ -111,19 +124,20 @@ export const EditorComponent = forwardRef<EditorView | null, StoryProps>(
         selection,
         initialValue: text,
         extensions: [
-          createDataExtensions({ id, text: createDocAccessor(object, ['content']) }),
           createBasicExtensions({ readOnly, placeholder, lineNumbers, scrollPastEnd: true, search: true }),
+          createThemeExtensions({ monospace, themeMode, syntaxHighlighting: true, slots }),
           createMarkdownExtensions(),
-          createThemeExtensions({ themeMode, syntaxHighlighting: true, slots }),
-          decorateMarkdown(),
-          editorGutter,
           extensions || [],
         ],
       }),
       [id, object, extensions, themeMode],
     );
 
-    useImperativeHandle<EditorView | null, EditorView | null>(forwardedRef, () => view, [view]);
+    // External controller.
+    useImperativeHandle(forwardedRef, () => {
+      log.info('view updated', { id });
+      return createEditorController(view);
+    }, [id, view]);
 
     useEffect(() => {
       if (view) {

package/src/stories/components/util.tsx

@@ -4,12 +4,9 @@
 
 import { type Completion } from '@codemirror/autocomplete';
 import { type Extension } from '@codemirror/state';
-import React, { type FC } from 'react';
-
-import { faker } from '@dxos/random';
-import { Icon } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
 
+import { random } from '@dxos/random';
+import { Domino } from '@dxos/ui';
 import {
   type EditorSelectionState,
   decorateMarkdown,
@@ -18,15 +15,18 @@ import {
   image,
   linkTooltip,
   table,
-} from '../../extensions';
-import { str } from '../../testing';
-import { createRenderer } from '../../util';
+} from '@dxos/ui-editor';
+import { type RenderCallback } from '@dxos/ui-editor/types';
+import { safeUrl } from '@dxos/util';
+
+import { str } from '../../util';
 
-export const num = () => faker.number.int({ min: 0, max: 9999 }).toLocaleString();
+export const num = () => random.number.int({ min: 0, max: 9999 }).toLocaleString();
 
 export const img = '![dxos](https://dxos.network/dxos-logotype-blue.png)';
 
 export const code = str(
+  // prettier-ignore
   '// Code',
   'const Component = () => {',
   '  const x = 100;',
@@ -38,54 +38,77 @@ export const code = str(
 // Content blocks for stories
 export const content = {
   tasks: str(
-    //
+    // prettier-ignore
     '### TaskList',
     '',
-    `- [x] ${faker.lorem.sentences()}`,
-    `- [ ] ${faker.lorem.sentences()}`,
-    `  - [ ] ${faker.lorem.sentences()}`,
-    `    - [ ] ${faker.lorem.sentences()}`,
-    `    - [x] ${faker.lorem.sentences()}`,
+    `- [x] ${random.lorem.sentences()}`,
+    `- [ ] ${random.lorem.sentences()}`,
+    `  - [ ] ${random.lorem.sentences()}`,
+    `    - [ ] ${random.lorem.sentences()}`,
+    `    - [x] ${random.lorem.sentences()}`,
     '',
   ),
 
   bullets: str(
-    //
+    // prettier-ignore
     '### BulletList',
     '',
-    `- ${faker.lorem.sentences()}`,
-    `- ${faker.lorem.sentences()}`,
-    `  - ${faker.lorem.sentences()}`,
-    `  - ${faker.lorem.sentences()}`,
-    `- ${faker.lorem.sentences()}`,
+    `- ${random.lorem.sentences()}`,
+    `- ${random.lorem.sentences()}`,
+    `  - ${random.lorem.sentences()}`,
+    `  - ${random.lorem.sentences()}`,
+    `- ${random.lorem.sentences()}`,
     '',
   ),
 
   numbered: str(
-    //
+    // prettier-ignore
     '### OrderedList (part 1)',
     '',
-    `1. ${faker.lorem.sentences()}`,
-    `1. ${faker.lorem.sentences()}`,
-    `1. ${faker.lorem.sentences()}`,
-    `    1. ${faker.lorem.sentences()}`,
-    `    1. ${faker.lorem.sentences()}`,
-    `        1. ${faker.lorem.sentences()}`,
-    `1. ${faker.lorem.sentences()}`,
+    `1. ${random.lorem.sentences()}`,
+    `1. ${random.lorem.sentences()}`,
+    `1. ${random.lorem.sentences()}`,
+    `    1. ${random.lorem.sentences()}`,
+    `    1. ${random.lorem.sentences()}`,
+    `        1. ${random.lorem.sentences()}`,
+    `1. ${random.lorem.sentences()}`,
     '',
     '### OrderedList (part 2)',
     '',
-    `1. ${faker.lorem.sentences()}`,
+    `1. ${random.lorem.sentences()}`,
     '',
   ),
 
   typescript: code,
 
-  codeblocks: str('### Code', '', '```bash', '$ ls -las', '```', '', '```tsx', code, '```', ''),
+  codeblocks: str(
+    // prettier-ignore
+    '### Code',
+    '',
+    '```bash',
+    '$ ls -las',
+    '```',
+    '',
+    '```tsx',
+    code,
+    '```',
+    '',
+  ),
 
-  comment: str('<!--', 'A comment', '-->', '', 'No comment.', 'Partial comment. <!-- comment. -->'),
+  comment: str(
+    // prettier-ignore
+    '### Comment',
+    '',
+    '<!--',
+    'A comment',
+    '-->',
+    '',
+    'Partial comment. <!-- comment. -->',
+    '',
+  ),
 
   links: str(
+    // prettier-ignore
     '### Links',
     '',
     'This is a naked link https://dxos.org within a sentence.',
@@ -97,9 +120,10 @@ export const content = {
   ),
 
   table: str(
+    // prettier-ignore
     '### Tables',
     '',
-    `| ${faker.lorem.word().padStart(12)} | ${faker.lorem.word().padStart(12)} | ${faker.lorem.word().padStart(12)} |`,
+    `| ${random.lorem.word().padStart(12)} | ${random.lorem.word().padStart(12)} | ${random.lorem.word().padStart(12)} |`,
     `|-${''.padStart(12, '-')}-|-${''.padStart(12, '-')}-|-${''.padStart(12, '-')}-|`,
     `| ${num().padStart(12)} | ${num().padStart(12)} | ${num().padStart(12)} |`,
     `| ${num().padStart(12)} | ${num().padStart(12)} | ${num().padStart(12)} |`,
@@ -110,12 +134,21 @@ export const content = {
   image: str('### Image', '', img),
 
   headings: str(
-    ...[1, 2, 3, 4, 5, 6].map((level) => ['#'.repeat(level) + ` Heading ${level}`, faker.lorem.sentences(), '']).flat(),
+    ...[1, 2, 3, 4, 5, 6]
+      .map((level) => ['#'.repeat(level) + ` Heading ${level}`, random.lorem.sentences(), ''])
+      .flat(),
   ),
 
-  formatting: str('### Formatting', '', 'This this is **bold**, ~~strikethrough~~, _italic_, and `f(INLINE)`.', ''),
+  formatting: str(
+    // prettier-ignore
+    '### Formatting',
+    '',
+    'This this is **bold**, ~~strikethrough~~, _italic_, and `f(INLINE)`.',
+    '',
+  ),
 
   blockquotes: str(
+    // prettier-ignore
     '### Blockquotes',
     '',
     '> This is a block quote.',
@@ -128,7 +161,7 @@ export const content = {
     '',
   ),
 
-  paragraphs: str(...faker.helpers.multiple(() => [faker.lorem.paragraph(), ''], { count: 3 }).flat()),
+  paragraphs: str(...random.helpers.multiple(() => [random.lorem.paragraph(), ''], { count: 3 }).flat()),
 
   footer: str('', '', '', '', ''),
 };
@@ -154,6 +187,7 @@ export const text = str(
   '---',
   '## Misc',
   content.codeblocks,
+  content.comment,
   content.table,
   content.image,
   content.footer,
@@ -172,30 +206,27 @@ export const links: Completion[] = [
 export const names = ['adam', 'alice', 'alison', 'bob', 'carol', 'charlie', 'sayuri', 'shoko'];
 
 const hover =
-  'rounded-sm text-baseText text-primary-600 hover:text-primary-500 dark:text-primary-300 hover:dark:text-primary-200';
-
-const LinkTooltip: FC<{ url: string }> = ({ url }) => {
-  const web = new URL(url);
-  return (
-    <a href={url} target='_blank' rel='noreferrer' className={mx(hover, 'flex items-center gap-2')}>
-      {web.origin}
-      <Icon icon='ph--arrow-square-out--regular' size={4} />
-    </a>
+  'rounded-xs text-base-foreground text-primary-600 hover:text-primary-500 dark:text-primary-300 hover:dark:text-primary-200';
+
+export const renderLinkTooltip: RenderCallback<{ url: string }> = (el, { url }) => {
+  el.appendChild(
+    Domino.of('a')
+      .attributes({ href: url, target: '_blank', rel: 'noreferrer', 'aria-label': 'Open link' })
+      .classNames(hover, 'flex items-center gap-2')
+      .text(safeUrl(url)?.toString() ?? url)
+      .append(Domino.svg('ph--arrow-square-out--regular')).root,
   );
 };
 
-export const renderLinkTooltip = createRenderer(LinkTooltip);
-
-const LinkButton: FC<{ url: string }> = ({ url }) => {
-  return (
-    <a href={url} target='_blank' rel='noreferrer' className={mx(hover)}>
-      <Icon icon='ph--arrow-square-out--regular' size={4} classNames='inline-block mis-1 mb-[3px]' />
-    </a>
+export const renderLinkButton: RenderCallback<{ url: string }> = (el, { url }) => {
+  el.appendChild(
+    Domino.of('span')
+      .attributes({ 'aria-hidden': 'true' })
+      .classNames(hover, 'ms-1 inline-block align-[-0.125em]')
+      .append(Domino.svg('ph--arrow-square-out--regular')).root,
   );
 };
 
-export const renderLinkButton = createRenderer(LinkButton);
-
 // Shared extensions.
 export const defaultExtensions: Extension[] = [
   decorateMarkdown({ renderLinkButton, selectionChangeDelay: 100 }),
@@ -213,18 +244,18 @@ export const allExtensions: Extension[] = [
 ];
 
 // Long text for scrolling stories.
-export const longText = faker.helpers
-  .multiple(() => faker.lorem.paragraph({ min: 8, max: 16 }), { count: 20 })
+export const longText = random.helpers
+  .multiple(() => random.lorem.paragraph({ min: 8, max: 16 }), { count: 20 })
   .join('\n\n');
 
-export const largeWithImages = faker.helpers
-  .multiple(() => [faker.lorem.paragraph({ min: 12, max: 16 }), img], { count: 20 })
+export const largeWithImages = random.helpers
+  .multiple(() => [random.lorem.paragraph({ min: 12, max: 16 }), img], { count: 20 })
   .flatMap((x) => x)
   .join('\n\n');
 
 export const headings = str(
   ...[1, 2, 2, 3, 3, 4, 4, 4, 5, 5, 2, 3, 3, 2, 2, 6, 1]
-    .map((level) => ['#'.repeat(level) + ' ' + faker.lorem.sentence(3), faker.lorem.sentences(), ''])
+    .map((level) => ['#'.repeat(level) + ' ' + random.lorem.sentence(3), random.lorem.sentences(), ''])
     .flat(),
 );
 

package/src/translations.ts

@@ -4,36 +4,41 @@
 
 import { type Resource } from '@dxos/react-ui';
 
-export const translationKey = 'react-ui-editor';
+export const translationKey = '@dxos/react-ui-editor';
 
 export const translations = [
   {
     'en-US': {
       [translationKey]: {
-        'strong label': 'Bold',
-        'emphasis label': 'Italics',
-        'strikethrough label': 'Strikethrough',
-        'code label': 'Code',
-        'link label': 'Link',
-        'list-bullet label': 'Bullet list',
-        'list-ordered label': 'Numbered list',
-        'list-task label': 'Task list',
-        'blockquote label': 'Block quote',
-        'codeblock label': 'Code block',
-        'comment label': 'Create comment',
-        'selection overlaps existing comment label': 'Selection overlaps existing comment',
-        'select text to comment label': 'Select text to comment',
-        'image label': 'Insert image',
-        'table label': 'Create table',
-        'heading label': 'Heading level',
-        'heading level label_zero': 'Paragraph',
-        'heading level label_one': 'Heading level {{count}}',
-        'heading level label_other': 'Heading level {{count}}',
-        'view mode label': 'Editor view',
-        'preview mode label': 'Live preview',
-        'readonly mode label': 'Read only',
-        'search label': 'Search',
-        'source mode label': 'Source',
+        'comment.label': 'Create comment',
+        'image.label': 'Insert image',
+        'search.label': 'Search',
+
+        'block.label': 'Block',
+        'block.blockquote.label': 'Block quote',
+        'block.codeblock.label': 'Code block',
+        'block.table.label': 'Create table',
+
+        'formatting.label': 'Formatting',
+        'formatting.strong.label': 'Bold',
+        'formatting.emphasis.label': 'Italics',
+        'formatting.strikethrough.label': 'Strikethrough',
+        'formatting.code.label': 'Code',
+        'formatting.link.label': 'Link',
+
+        'list.bullet.label': 'Bullet list',
+        'list.ordered.label': 'Numbered list',
+        'list.task.label': 'Task list',
+
+        'heading.label': 'Heading level',
+        'heading-level.label_zero': 'Paragraph',
+        'heading-level.label_one': 'Heading level {{count}}',
+        'heading-level.label_other': 'Heading level {{count}}',
+
+        'view-mode.label': 'Editor view',
+        'view-mode.preview.label': 'Markdown',
+        'view-mode.source.label': 'Plain text',
+        'view-mode.readonly.label': 'Read only',
       },
     },
   },

package/src/util/index.ts

@@ -1,10 +1,5 @@
 //
-// Copyright 2024 DXOS.org
+// Copyright 2025 DXOS.org
 //
 
-export * from './cursor';
-export * from './decorations';
-export * from './debug';
-export * from './dom';
-export * from './facet';
 export * from './react';

package/src/util/react.tsx

@@ -2,30 +2,25 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { type FC, type ReactNode } from 'react';
+import React, { type FC } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import { ThemeProvider, Tooltip } from '@dxos/react-ui';
-import { defaultTx } from '@dxos/react-ui-theme';
+import { defaultTx } from '@dxos/react-ui';
+import { type RenderCallback } from '@dxos/ui-editor/types';
 
-import { type RenderCallback } from '../types';
-
-/** @deprecated */
-// TODO(wittjosiah): Replace with portals which are lighter weight and inherit context from the main react tree.
-export const renderRoot = <T extends Element>(root: T, node: ReactNode): T => {
-  createRoot(root).render(<ThemeProvider tx={defaultTx}>{node}</ThemeProvider>);
-  return root;
-};
+/**
+ * @deprecated Use `trim` from `@dxos/util`.
+ */
+export const str = (...lines: string[]) => lines.join('\n');
 
 /**
- * Utility to create a renderer for a React component.
  * @deprecated
  */
 export const createRenderer =
   <TProps extends object>(Component: FC<TProps>): RenderCallback<TProps> =>
   (el, props) => {
-    renderRoot(
-      el,
+    createRoot(el).render(
       <ThemeProvider tx={defaultTx}>
         <Tooltip.Provider>
           <Component {...props} />

package/dist/lib/browser/chunk-HL3YF6WC.mjs

@@ -1,22 +0,0 @@
-// src/types/types.ts
-import * as Schema from "effect/Schema";
-var EditorViewModes = [
-  "preview",
-  "readonly",
-  "source"
-];
-var EditorViewMode = Schema.Union(...EditorViewModes.map((mode) => Schema.Literal(mode)));
-var EditorInputModes = [
-  "default",
-  "vim",
-  "vscode"
-];
-var EditorInputMode = Schema.Union(...EditorInputModes.map((mode) => Schema.Literal(mode)));
-
-export {
-  EditorViewModes,
-  EditorViewMode,
-  EditorInputModes,
-  EditorInputMode
-};
-//# sourceMappingURL=chunk-HL3YF6WC.mjs.map

package/dist/lib/browser/chunk-HL3YF6WC.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/types/types.ts"],
-  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { type EditorView } from '@codemirror/view';\nimport * as Schema from 'effect/Schema';\n\n// Runtime data structure.\nexport type Range = {\n  from: number;\n  to: number;\n};\n\n// Persistent data structure.\n// TODO(burdon): Rename annotation?\nexport type Comment = {\n  id: string;\n  cursor?: string;\n};\n\n/**\n * Callback that renders into a DOM element within the editor.\n */\nexport type RenderCallback<Props extends object> = (el: HTMLElement, props: Props, view: EditorView) => void;\n\nexport const EditorViewModes = ['preview', 'readonly', 'source'] as const;\nexport const EditorViewMode = Schema.Union(...EditorViewModes.map((mode) => Schema.Literal(mode)));\nexport type EditorViewMode = Schema.Schema.Type<typeof EditorViewMode>;\n\nexport const EditorInputModes = ['default', 'vim', 'vscode'] as const;\nexport const EditorInputMode = Schema.Union(...EditorInputModes.map((mode) => Schema.Literal(mode)));\nexport type EditorInputMode = Schema.Schema.Type<typeof EditorInputMode>;\n"],
-  "mappings": ";AAKA,YAAYA,YAAY;AAoBjB,IAAMC,kBAAkB;EAAC;EAAW;EAAY;;AAChD,IAAMC,iBAAwBC,aAAK,GAAIF,gBAAgBG,IAAI,CAACC,SAAgBC,eAAQD,IAAAA,CAAAA,CAAAA;AAGpF,IAAME,mBAAmB;EAAC;EAAW;EAAO;;AAC5C,IAAMC,kBAAyBL,aAAK,GAAII,iBAAiBH,IAAI,CAACC,SAAgBC,eAAQD,IAAAA,CAAAA,CAAAA;",
-  "names": ["Schema", "EditorViewModes", "EditorViewMode", "Union", "map", "mode", "Literal", "EditorInputModes", "EditorInputMode"]
-}