@dxos/plugin-markdown 0.8.2-main.fbd8ed0 → 0.8.2-staging.7ac8446

package/src/capabilities/settings.ts

@@ -3,13 +3,13 @@
 //
 
 import { Capabilities, contributes } from '@dxos/app-framework';
-import { live } from '@dxos/live-object';
+import { create } from '@dxos/live-object';
 
 import { MARKDOWN_PLUGIN } from '../meta';
 import { type MarkdownSettingsProps, MarkdownSettingsSchema } from '../types';
 
 export default () => {
-  const settings = live<MarkdownSettingsProps>({
+  const settings = create<MarkdownSettingsProps>({
     defaultViewMode: 'preview',
     toolbar: true,
     numberedHeadings: true,

package/src/capabilities/state.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities, contributes, type PluginContext } from '@dxos/app-framework';
+import { Capabilities, contributes, type PluginsContext } from '@dxos/app-framework';
 import { LocalStorageStore } from '@dxos/local-storage';
 import { type EditorViewMode, createEditorStateStore } from '@dxos/react-ui-editor';
 
@@ -10,8 +10,9 @@ import { MarkdownCapabilities } from './capabilities';
 import { MARKDOWN_PLUGIN } from '../meta';
 import { type MarkdownPluginState, type MarkdownSettingsProps } from '../types';
 
-export default (context: PluginContext) => {
+export default (context: PluginsContext) => {
   const state = new LocalStorageStore<MarkdownPluginState>(MARKDOWN_PLUGIN, { extensionProviders: [], viewMode: {} });
+
   state.prop({ key: 'viewMode', type: LocalStorageStore.json<{ [key: string]: EditorViewMode }>() });
 
   // TODO(wittjosiah): Fold into state.
@@ -19,13 +20,12 @@ export default (context: PluginContext) => {
 
   const getViewMode = (id: string) => {
     const defaultViewMode = context
-      .getCapability(Capabilities.SettingsStore)
+      .requestCapability(Capabilities.SettingsStore)
       .getStore<MarkdownSettingsProps>(MARKDOWN_PLUGIN)!.value.defaultViewMode;
     return (id && state.values.viewMode[id]) || defaultViewMode;
   };
 
   const setViewMode = (id: string, viewMode: EditorViewMode) => (state.values.viewMode[id] = viewMode);
 
-  // Return object with methods.
   return contributes(MarkdownCapabilities.State, { state: state.values, editorState, getViewMode, setViewMode });
 };

package/src/components/MarkdownContainer.tsx

@@ -7,7 +7,7 @@ import React, { useEffect, useMemo } from 'react';
 import { Capabilities, useCapabilities } from '@dxos/app-framework';
 import { isInstanceOf } from '@dxos/echo-schema';
 import { fullyQualifiedId, getSpace } from '@dxos/react-client/echo';
-import { DataType } from '@dxos/schema';
+import { TextType } from '@dxos/schema';
 
 import { MarkdownEditor, type MarkdownEditorProps } from './MarkdownEditor';
 import { useExtensions } from '../extensions';
@@ -19,10 +19,11 @@ export type MarkdownContainerProps = Pick<
   'role' | 'extensionProviders' | 'viewMode' | 'editorStateStore' | 'onViewModeChange'
 > & {
   id: string;
-  object: DocumentType | DataType.Text | any;
+  object: DocumentType | TextType | any;
   settings: MarkdownSettingsProps;
 };
 
+// TODO(burdon): Move toolbar here.
 // TODO(burdon): Factor out difference for ECHO and non-ECHO objects; i.e., single component.
 const MarkdownContainer = ({
   id,
@@ -35,7 +36,7 @@ const MarkdownContainer = ({
 }: MarkdownContainerProps) => {
   const scrollPastEnd = role === 'article';
   const doc = isInstanceOf(DocumentType, object) ? object : undefined;
-  const text = isInstanceOf(DataType.Text, object) ? object : undefined;
+  const text = isInstanceOf(TextType, object) ? object : undefined;
   const extensions = useExtensions({ document: doc, text, id, settings, viewMode, editorStateStore });
 
   if (doc) {
@@ -67,7 +68,6 @@ const MarkdownContainer = ({
       />
     );
   } else {
-    // TODO(burdon): Normalize with above.
     return (
       <MarkdownEditor
         id={id}

package/src/components/{MarkdownEditor/MarkdownEditor.stories.tsx → MarkdownEditor.stories.tsx}

@@ -10,14 +10,19 @@ import React, { useMemo } from 'react';
 import { IntentPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { createDocAccessor, createObject } from '@dxos/react-client/echo';
+import { Main } from '@dxos/react-ui';
+import { AttendableContainer } from '@dxos/react-ui-attention';
 import { withAttention } from '@dxos/react-ui-attention/testing';
-import { automerge, translations as editorTranslations } from '@dxos/react-ui-editor';
+import { editorWithToolbarLayout, automerge, translations as editorTranslations } from '@dxos/react-ui-editor';
+import { topbarBlockPaddingStart } from '@dxos/react-ui-theme';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { MarkdownEditor, type MarkdownEditorProps } from './MarkdownEditor';
-import translations from '../../translations';
+import translations from '../translations';
 
-const content = Array.from({ length: 100 }, (_, i) => `Line ${i + 1}`).join('\n');
+const content = Array.from({ length: 100 })
+  .map((_, i) => `Line ${i + 1}`)
+  .join('\n');
 
 type StoryProps = MarkdownEditorProps & {
   content?: string;
@@ -27,26 +32,19 @@ type StoryProps = MarkdownEditorProps & {
 const DefaultStory = ({ content = '# Test', toolbar }: StoryProps) => {
   const doc = useMemo(() => createObject({ content }), [content]);
   const extensions = useMemo(() => [automerge(createDocAccessor(doc, ['content']))], [doc]);
-  return <MarkdownEditor id='test' initialValue={doc.content} extensions={extensions} toolbar={toolbar} />;
+  return (
+    <Main.Content
+      bounce
+      data-toolbar={toolbar ? 'enabled' : 'disabled'}
+      classNames={[topbarBlockPaddingStart, editorWithToolbarLayout]}
+    >
+      <AttendableContainer id='test'>
+        <MarkdownEditor id='test' initialValue={doc.content} extensions={extensions} toolbar={toolbar} />
+      </AttendableContainer>
+    </Main.Content>
+  );
 };
 
-const meta: Meta<typeof MarkdownEditor> = {
-  title: 'plugins/plugin-markdown/MarkdownEditor',
-  component: MarkdownEditor,
-  render: DefaultStory,
-  decorators: [
-    withTheme,
-    withLayout({ fullscreen: true }),
-    withAttention,
-    withPluginManager({ plugins: [IntentPlugin()] }),
-  ],
-  parameters: {
-    translations: [...translations, ...editorTranslations],
-  },
-};
-
-export default meta;
-
 export const Default = {
   args: {
     content,
@@ -55,7 +53,22 @@ export const Default = {
 
 export const WithToolbar = {
   args: {
-    toolbar: true,
     content,
+    toolbar: true,
   },
 };
+
+const meta: Meta<typeof MarkdownEditor> = {
+  title: 'plugins/plugin-markdown/EditorMain',
+  component: MarkdownEditor,
+  render: DefaultStory,
+  decorators: [
+    withTheme,
+    withLayout({ tooltips: true }),
+    withAttention,
+    withPluginManager({ plugins: [IntentPlugin()] }),
+  ],
+  parameters: { layout: 'fullscreen', translations: [...translations, ...editorTranslations] },
+};
+
+export default meta;

package/src/components/{MarkdownEditor/MarkdownEditor.tsx → MarkdownEditor.tsx}

@@ -2,16 +2,17 @@
 // Copyright 2023 DXOS.org
 //
 
+import { openSearchPanel } from '@codemirror/search';
 import { type EditorView } from '@codemirror/view';
 import React, { useMemo, useEffect, useCallback } from 'react';
 import { useDropzone } from 'react-dropzone';
 
 import { createIntent, type FileInfo, useIntentDispatcher } from '@dxos/app-framework';
-import { invariant } from '@dxos/invariant';
 import { ATTENDABLE_PATH_SEPARATOR, DeckAction } from '@dxos/plugin-deck/types';
 import { useThemeContext, useTranslation } from '@dxos/react-ui';
 import {
   type DNDOptions,
+  type EditorAction,
   type EditorViewMode,
   type EditorInputMode,
   type EditorSelectionState,
@@ -19,6 +20,7 @@ import {
   EditorToolbar,
   type UseTextEditorProps,
   createBasicExtensions,
+  createEditorAction,
   createMarkdownExtensions,
   createThemeExtensions,
   dropFile,
@@ -26,19 +28,19 @@ import {
   editorGutter,
   processEditorPayload,
   stackItemContentEditorClassNames,
+  useActionHandler,
   useCommentState,
   useCommentClickListener,
   useFormattingState,
   useTextEditor,
   useEditorToolbarState,
-  addLink,
 } from '@dxos/react-ui-editor';
 import { StackItem } from '@dxos/react-ui-stack';
 import { isNotFalsy, isNonNullable } from '@dxos/util';
 
-import { useSelectCurrentThread } from '../../hooks';
-import { MARKDOWN_PLUGIN } from '../../meta';
-import { type MarkdownPluginState } from '../../types';
+import { useSelectCurrentThread } from '../hooks';
+import { MARKDOWN_PLUGIN } from '../meta';
+import { type MarkdownPluginState } from '../types';
 
 export type MarkdownEditorProps = {
   id: string;
@@ -176,28 +178,38 @@ export const MarkdownEditor = ({
 
         const info = await onFileUpload(file);
         if (info) {
-          addLink({ url: info.url, image: true })(editorView);
+          processEditorPayload(editorView, { type: 'image', data: info.url });
         }
       });
     }
-  }, [acceptedFiles, editorView, onFileUpload]);
+  }, [acceptedFiles, editorView]);
 
-  const getView = useCallback(() => {
-    invariant(editorView);
-    return editorView;
-  }, [editorView]);
+  // Toolbar handler.
+  const handleToolbarAction = useActionHandler(editorView);
+  const handleAction = useCallback(
+    (action: EditorAction) => {
+      switch (action.properties.type) {
+        case 'search': {
+          if (editorView) {
+            openSearchPanel(editorView);
+          }
+          return;
+        }
+        case 'view-mode': {
+          onViewModeChange?.(id, action.properties.data);
+          return;
+        }
+        case 'image': {
+          open();
+          return;
+        }
+      }
 
-  const handleViewModeChange = useCallback(
-    (mode: EditorViewMode) => onViewModeChange?.(id, mode),
-    [id, onViewModeChange],
+      handleToolbarAction?.(action);
+    },
+    [editorView, onViewModeChange, open],
   );
 
-  const handleImageUpload = useCallback(() => {
-    if (onFileUpload) {
-      open();
-    }
-  }, [onFileUpload]);
-
   return (
     <StackItem.Content toolbar={!!toolbar}>
       {toolbar && (
@@ -206,10 +218,9 @@ export const MarkdownEditor = ({
             attendableId={id}
             role={role}
             state={toolbarState}
-            getView={getView}
             comment={comment}
-            image={handleImageUpload}
-            viewMode={handleViewModeChange}
+            customActions={onFileUpload ? createUploadAction : undefined}
+            onAction={handleAction}
           />
           <input {...getInputProps()} />
         </>
@@ -220,7 +231,6 @@ export const MarkdownEditor = ({
         data-testid='composer.markdownRoot'
         data-toolbar={toolbar ? 'enabled' : 'disabled'}
         className={stackItemContentEditorClassNames(role)}
-        data-popover-collision-boundary={true}
         {...focusAttributes}
       />
     </StackItem.Content>
@@ -237,3 +247,13 @@ const useTest = (view?: EditorView) => {
     }
   }, [view]);
 };
+
+export const createUploadAction = () => ({
+  nodes: [
+    createEditorAction({ type: 'image', testId: 'editor.toolbar.image' }, 'ph--image-square--regular', [
+      'upload image label',
+      { ns: MARKDOWN_PLUGIN },
+    ]),
+  ],
+  edges: [{ source: 'root', target: 'image' }],
+});

package/src/components/{MarkdownSettings/MarkdownSettings.tsx → MarkdownSettings.tsx}

@@ -8,8 +8,8 @@ import { Input, Select, useTranslation } from '@dxos/react-ui';
 import { type EditorInputMode, EditorInputModes, type EditorViewMode, EditorViewModes } from '@dxos/react-ui-editor';
 import { DeprecatedFormContainer, DeprecatedFormInput } from '@dxos/react-ui-form';
 
-import { MARKDOWN_PLUGIN } from '../../meta';
-import { type MarkdownSettingsProps } from '../../types';
+import { MARKDOWN_PLUGIN } from '../meta';
+import { type MarkdownSettingsProps } from '../types';
 
 export const MarkdownSettings = ({ settings }: { settings: MarkdownSettingsProps }) => {
   const { t } = useTranslation(MARKDOWN_PLUGIN);

package/src/components/Toolbar.stories.tsx

@@ -5,16 +5,15 @@
 import '@dxos-theme';
 
 import { type Meta } from '@storybook/react';
-import React, { type FC, useCallback, useState } from 'react';
+import React, { type FC, useState } from 'react';
 
-import { invariant } from '@dxos/invariant';
 import { PublicKey } from '@dxos/keys';
-import { live } from '@dxos/live-object';
+import { create } from '@dxos/live-object';
 import { faker } from '@dxos/random';
 import { createDocAccessor, createObject } from '@dxos/react-client/echo';
 import { useThemeContext } from '@dxos/react-ui';
 import {
-  EditorToolbar,
+  type EditorAction,
   type Comment,
   comments,
   createBasicExtensions,
@@ -24,21 +23,24 @@ import {
   decorateMarkdown,
   editorContent,
   formattingKeymap,
+  EditorToolbar,
   translations,
+  useActionHandler,
   useComments,
   useFormattingState,
   useTextEditor,
   useEditorToolbarState,
-  type EditorViewMode,
 } from '@dxos/react-ui-editor';
-import { DataType } from '@dxos/schema';
+import { TextType } from '@dxos/schema';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 faker.seed(101);
 
+const _onUpload = async (file: File) => ({ url: file.name });
+
 const DefaultStory: FC<{ content?: string }> = ({ content = '' }) => {
   const { themeMode } = useThemeContext();
-  const [text] = useState(createObject(live(DataType.Text, { content })));
+  const [text] = useState(createObject(create(TextType, { content })));
   const toolbarState = useEditorToolbarState({ viewMode: 'preview' });
   const formattingObserver = useFormattingState(toolbarState);
   const { parentRef, view } = useTextEditor(() => {
@@ -64,22 +66,22 @@ const DefaultStory: FC<{ content?: string }> = ({ content = '' }) => {
     };
   }, [text, formattingObserver, toolbarState.viewMode, themeMode]);
 
-  const handleViewModeChange = (viewMode: EditorViewMode) => {
-    toolbarState.viewMode = viewMode;
+  const handleToolbarAction = useActionHandler(view);
+  const handleAction = (action: EditorAction) => {
+    if (action.type === 'view-mode') {
+      toolbarState.viewMode = action.properties.data;
+    } else {
+      handleToolbarAction?.(action);
+    }
   };
 
-  const getView = useCallback(() => {
-    invariant(view);
-    return view;
-  }, [view]);
-
   const [_comments, setComments] = useState<Comment[]>([]);
   useComments(view, text.id, _comments);
 
   return (
-    <div role='none' className='flex flex-col'>
-      <EditorToolbar state={toolbarState ?? {}} getView={getView} viewMode={handleViewModeChange} />
-      <div className='flex grow overflow-hidden' ref={parentRef} />
+    <div role='none' className='fixed inset-0 flex flex-col'>
+      <EditorToolbar onAction={handleAction} state={toolbarState ?? {}} />
+      <div ref={parentRef} />
     </div>
   );
 };
@@ -94,20 +96,18 @@ const content = [
   '',
 ].join('\n');
 
+export const Default = {
+  args: {
+    content,
+  },
+};
+
 const meta: Meta<typeof EditorToolbar> = {
   title: 'plugins/plugin-markdown/Toolbar',
   component: EditorToolbar,
   render: DefaultStory as any,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  parameters: {
-    translations,
-  },
+  decorators: [withTheme, withLayout({ tooltips: true })],
+  parameters: { translations, layout: 'fullscreen' },
 };
 
 export default meta;
-
-export const Default = {
-  args: {
-    content,
-  },
-};

package/src/components/index.ts

@@ -7,4 +7,3 @@ import { lazy } from 'react';
 export * from './MarkdownSettings';
 
 export const MarkdownContainer = lazy(() => import('./MarkdownContainer'));
-export const MarkdownPreview = lazy(() => import('./MarkdownPreview'));

package/src/extensions.tsx

@@ -13,7 +13,7 @@ import {
   useIntentDispatcher,
 } from '@dxos/app-framework';
 import { invariant } from '@dxos/invariant';
-import { createDocAccessor, fullyQualifiedId, getSpace, type QueryResult } from '@dxos/react-client/echo';
+import { createDocAccessor, fullyQualifiedId, getSpace, type Query } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
 import { Icon, ThemeProvider } from '@dxos/react-ui';
 import {
@@ -29,13 +29,11 @@ import {
   formattingKeymap,
   linkTooltip,
   listener,
-  preview,
   selectionState,
   typewriter,
-  type RenderCallback,
 } from '@dxos/react-ui-editor';
 import { defaultTx } from '@dxos/react-ui-theme';
-import { type DataType } from '@dxos/schema';
+import { type TextType } from '@dxos/schema';
 import { isNotFalsy } from '@dxos/util';
 
 import { MarkdownCapabilities } from './capabilities';
@@ -45,9 +43,9 @@ import { setFallbackName } from './util';
 type ExtensionsOptions = {
   document?: DocumentType;
   id?: string;
-  text?: DataType.Text;
+  text?: TextType;
   dispatch?: PromiseIntentDispatcher;
-  query?: QueryResult<DocumentType>;
+  query?: Query<DocumentType>;
   settings: MarkdownSettingsProps;
   viewMode?: EditorViewMode;
   editorStateStore?: EditorStateStore;
@@ -68,7 +66,7 @@ export const useExtensions = ({
 
   // TODO(wittjosiah): Autocomplete is not working and this query is causing performance issues.
   // TODO(burdon): Unsubscribe.
-  // const query = space?.db.query(Filter.type(DocumentType));
+  // const query = space?.db.query(Filter.schema(DocumentType));
   // query?.subscribe();
   const baseExtensions = useMemo(
     () =>
@@ -177,7 +175,7 @@ const createBaseExtensions = ({
           // TODO(wittjosiah): For internal links, consider ignoring the link text and rendering the label of the object being linked to.
           renderLinkButton:
             dispatch && (document || id)
-              ? createLinkRenderer((id: string) => {
+              ? onRenderLink((id: string) => {
                   void dispatch(
                     createIntent(LayoutAction.Open, {
                       part: 'main',
@@ -191,7 +189,6 @@ const createBaseExtensions = ({
               : undefined,
         }),
         linkTooltip(renderLinkTooltip),
-        preview(),
       ],
     );
   }
@@ -236,42 +233,40 @@ const style = {
   icon: 'inline-block leading-none mis-1 cursor-pointer',
 };
 
-const createLinkRenderer =
-  (onSelectObject: (id: string) => void): RenderCallback<{ url: string }> =>
-  (el, { url }) => {
-    // TODO(burdon): Formalize/document internal link format.
-    const isInternal =
-      url.startsWith('/') ||
-      // TODO(wittjosiah): This should probably be parsed out on paste?
-      url.startsWith(window.location.origin);
+const onRenderLink = (onSelectObject: (id: string) => void) => (el: Element, url: string) => {
+  // TODO(burdon): Formalize/document internal link format.
+  const isInternal =
+    url.startsWith('/') ||
+    // TODO(wittjosiah): This should probably be parsed out on paste?
+    url.startsWith(window.location.origin);
 
-    const options: AnchorHTMLAttributes<any> = isInternal
-      ? {
-          onClick: () => {
-            const qualifiedId = url.split('/').at(-1);
-            invariant(qualifiedId, 'Invalid link format.');
-            onSelectObject(qualifiedId);
-          },
-        }
-      : {
-          href: url,
-          rel: 'noreferrer',
-          target: '_blank',
-        };
+  const options: AnchorHTMLAttributes<any> = isInternal
+    ? {
+        onClick: () => {
+          const qualifiedId = url.split('/').at(-1);
+          invariant(qualifiedId, 'Invalid link format.');
+          onSelectObject(qualifiedId);
+        },
+      }
+    : {
+        href: url,
+        rel: 'noreferrer',
+        target: '_blank',
+      };
 
-    renderRoot(
-      el,
-      <a {...options} className={style.hover}>
-        <Icon
-          icon={isInternal ? 'ph--arrow-square-down--bold' : 'ph--arrow-square-out--bold'}
-          size={4}
-          classNames={style.icon}
-        />
-      </a>,
-    );
-  };
+  renderRoot(
+    el,
+    <a {...options} className={style.hover}>
+      <Icon
+        icon={isInternal ? 'ph--arrow-square-down--bold' : 'ph--arrow-square-out--bold'}
+        size={4}
+        classNames={style.icon}
+      />
+    </a>,
+  );
+};
 
-const renderLinkTooltip: RenderCallback<{ url: string }> = (el, { url }) => {
+const renderLinkTooltip = (el: Element, url: string) => {
   const web = new URL(url);
   renderRoot(
     el,

package/src/hooks/useSelectCurrentThread.tsx

@@ -3,10 +3,10 @@
 //
 
 import { EditorView } from '@codemirror/view';
-import { Schema } from 'effect';
 import { useMemo } from 'react';
 
 import { createResolver, LayoutAction, useIntentResolver } from '@dxos/app-framework';
+import { S } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { Cursor, setSelection } from '@dxos/react-ui-editor';
 
@@ -22,7 +22,7 @@ export const useSelectCurrentThread = (editorView: EditorView | undefined, docum
         intent: LayoutAction.UpdateLayout,
         position: 'hoist',
         filter: (data): data is { part: 'current'; subject: string; options: { cursor: string } } => {
-          if (!Schema.is(LayoutAction.ScrollIntoView.fields.input)(data)) {
+          if (!S.is(LayoutAction.ScrollIntoView.fields.input)(data)) {
             return false;
           }
 

package/src/translations.ts

@@ -2,13 +2,15 @@
 // Copyright 2023 DXOS.org
 //
 
+import { getSchemaTypename } from '@dxos/echo-schema';
+
 import { MARKDOWN_PLUGIN } from './meta';
 import { DocumentType } from './types';
 
 export default [
   {
     'en-US': {
-      [DocumentType.typename]: {
+      [getSchemaTypename(DocumentType)!]: {
         'typename label': 'Document',
         'object name placeholder': 'New document',
       },
@@ -33,8 +35,6 @@ export default [
         'toggle view mode label': 'Toggle read-only',
         'default view mode label': 'Default view mode',
         'upload image label': 'Upload image',
-        'fallback title': 'Untitled',
-        'navigate to document label': 'Open document',
       },
     },
   },

package/src/types/schema.ts

@@ -2,36 +2,23 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Schema } from 'effect';
-
-import { Type } from '@dxos/echo';
-import { Expando, LabelAnnotationId, Ref } from '@dxos/echo-schema';
-import { makeRef, live } from '@dxos/live-object';
+import { EchoObject, Expando, LabelAnnotationId, Ref, S } from '@dxos/echo-schema';
 import { ThreadType } from '@dxos/plugin-space/types';
-import { DataType } from '@dxos/schema';
+import { TextType } from '@dxos/schema';
 
-export const DocumentSchema = Schema.Struct({
-  name: Schema.optional(Schema.String),
-  fallbackName: Schema.optional(Schema.String),
-  content: Ref(DataType.Text),
-  threads: Schema.mutable(Schema.Array(Ref(ThreadType))),
-  assistantChatQueue: Schema.optional(Ref(Expando)),
+export const DocumentSchema = S.Struct({
+  name: S.optional(S.String),
+  fallbackName: S.optional(S.String),
+  content: Ref(TextType),
+  threads: S.mutable(S.Array(Ref(ThreadType))),
+  assistantChatQueue: S.optional(Ref(Expando)),
 }).annotations({
-  // TODO(dmaretskyi): `Schema.Struct(...).pipe(defaultLabel(['name', 'fallbackName']))` for type-safe annotations.
+  // TODO(dmaretskyi): `S.Struct(...).pipe(defaultLabel(['name', 'fallbackName']))` for type-safe annotations.
   [LabelAnnotationId]: ['name', 'fallbackName'],
 });
 
-export const DocumentType = DocumentSchema.pipe(
-  Type.def({
-    typename: 'dxos.org/type/Document',
-    version: '0.1.0',
-  }),
-);
-export type DocumentType = Schema.Schema.Type<typeof DocumentType>;
-
-// TODO(burdon): Replace when defaults are supported.
-export const createDocument = ({ name, content }: { name: string; content: string }) =>
-  live(DocumentType, { name, content: makeRef(live(DataType.Text, { content })), threads: [] });
+export const DocumentType = DocumentSchema.pipe(EchoObject({ typename: 'dxos.org/type/Document', version: '0.1.0' }));
+export type DocumentType = S.Schema.Type<typeof DocumentType>;
 
 /**
  * Checks if an object conforms to the interface needed to render an editor.