@dxos/plugin-markdown 0.8.2-main.f081794 → 0.8.2-main.fbd8ed0

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 { TextType } from '@dxos/schema';
+import { DataType } from '@dxos/schema';
 
 import { MarkdownEditor, type MarkdownEditorProps } from './MarkdownEditor';
 import { useExtensions } from '../extensions';
@@ -19,11 +19,10 @@ export type MarkdownContainerProps = Pick<
   'role' | 'extensionProviders' | 'viewMode' | 'editorStateStore' | 'onViewModeChange'
 > & {
   id: string;
-  object: DocumentType | TextType | any;
+  object: DocumentType | DataType.Text | 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,
@@ -36,7 +35,7 @@ const MarkdownContainer = ({
 }: MarkdownContainerProps) => {
   const scrollPastEnd = role === 'article';
   const doc = isInstanceOf(DocumentType, object) ? object : undefined;
-  const text = isInstanceOf(TextType, object) ? object : undefined;
+  const text = isInstanceOf(DataType.Text, object) ? object : undefined;
   const extensions = useExtensions({ document: doc, text, id, settings, viewMode, editorStateStore });
 
   if (doc) {

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

@@ -15,7 +15,7 @@ import { automerge, translations as editorTranslations } from '@dxos/react-ui-ed
 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');
 
@@ -36,7 +36,7 @@ const meta: Meta<typeof MarkdownEditor> = {
   render: DefaultStory,
   decorators: [
     withTheme,
-    withLayout({ tooltips: true, fullscreen: true }),
+    withLayout({ fullscreen: true }),
     withAttention,
     withPluginManager({ plugins: [IntentPlugin()] }),
   ],

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

@@ -2,17 +2,16 @@
 // 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,
@@ -20,7 +19,6 @@ import {
   EditorToolbar,
   type UseTextEditorProps,
   createBasicExtensions,
-  createEditorAction,
   createMarkdownExtensions,
   createThemeExtensions,
   dropFile,
@@ -28,19 +26,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;
@@ -178,49 +176,40 @@ export const MarkdownEditor = ({
 
         const info = await onFileUpload(file);
         if (info) {
-          processEditorPayload(editorView, { type: 'image', data: info.url });
+          addLink({ url: info.url, image: true })(editorView);
         }
       });
     }
-  }, [acceptedFiles, editorView]);
+  }, [acceptedFiles, editorView, onFileUpload]);
 
-  // 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 getView = useCallback(() => {
+    invariant(editorView);
+    return editorView;
+  }, [editorView]);
 
-      handleToolbarAction?.(action);
-    },
-    [editorView, onViewModeChange, open],
+  const handleViewModeChange = useCallback(
+    (mode: EditorViewMode) => onViewModeChange?.(id, mode),
+    [id, onViewModeChange],
   );
 
+  const handleImageUpload = useCallback(() => {
+    if (onFileUpload) {
+      open();
+    }
+  }, [onFileUpload]);
+
   return (
-    <StackItem.Content toolbar={!!toolbar} classNames='is-full min-bs-0'>
+    <StackItem.Content toolbar={!!toolbar}>
       {toolbar && (
         <>
           <EditorToolbar
             attendableId={id}
             role={role}
             state={toolbarState}
+            getView={getView}
             comment={comment}
-            customActions={onFileUpload ? createUploadAction : undefined}
-            onAction={handleAction}
+            image={handleImageUpload}
+            viewMode={handleViewModeChange}
           />
           <input {...getInputProps()} />
         </>
@@ -231,6 +220,7 @@ export const MarkdownEditor = ({
         data-testid='composer.markdownRoot'
         data-toolbar={toolbar ? 'enabled' : 'disabled'}
         className={stackItemContentEditorClassNames(role)}
+        data-popover-collision-boundary={true}
         {...focusAttributes}
       />
     </StackItem.Content>
@@ -247,13 +237,3 @@ 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/MarkdownEditor/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './MarkdownEditor';

package/src/components/MarkdownPreview/MarkdownPreview.stories.tsx

@@ -0,0 +1,74 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta } from '@storybook/react';
+import React from 'react';
+
+import { IntentPlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { create } from '@dxos/echo-schema';
+import { DocumentType } from '@dxos/plugin-markdown/types';
+import { faker } from '@dxos/random';
+import { makeRef } from '@dxos/react-client/echo';
+import { Icon, Popover } from '@dxos/react-ui';
+import { DataType } from '@dxos/schema';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
+
+import { MarkdownPreview } from './MarkdownPreview';
+import translations from '../../translations';
+
+faker.seed(1234);
+
+const meta: Meta<typeof MarkdownPreview> = {
+  title: 'plugins/plugin-markdown/MarkdownPreview',
+  component: MarkdownPreview,
+  render: ({ subject }) => {
+    return (
+      <Popover.Root open>
+        <Popover.Content>
+          <MarkdownPreview subject={subject} role='popover' />
+          <Popover.Arrow />
+        </Popover.Content>
+        <Popover.Trigger>
+          <Icon icon='ph--text-aa--regular' size={5} />
+        </Popover.Trigger>
+      </Popover.Root>
+    );
+  },
+  decorators: [
+    withPluginManager({
+      plugins: [IntentPlugin()],
+    }),
+    withTheme,
+    withLayout(),
+  ],
+  parameters: {
+    layout: 'centered',
+    translations,
+  },
+};
+
+export default meta;
+
+const data = (() => {
+  const document = create(DocumentType, {
+    name: faker.lorem.words(3),
+    content: makeRef(
+      create(DataType.Text, {
+        content: faker.lorem.paragraphs(3),
+      }),
+    ),
+    threads: [],
+  });
+
+  return { document };
+})();
+
+export const Default = {
+  args: {
+    subject: create(DocumentType, data.document),
+  },
+};

package/src/components/MarkdownPreview/MarkdownPreview.tsx

@@ -0,0 +1,85 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { pipe } from 'effect';
+import React, { useCallback } from 'react';
+
+import { chain, createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
+import { isInstanceOf } from '@dxos/echo-schema';
+import {
+  type PreviewProps,
+  defaultCard,
+  kanbanCardWithoutPoster,
+  popoverCard,
+  previewTitle,
+  previewProse,
+  previewChrome,
+} from '@dxos/plugin-preview';
+import { fullyQualifiedId } from '@dxos/react-client/echo';
+import { Button, Icon, useTranslation } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+import { DataType } from '@dxos/schema';
+
+import { MARKDOWN_PLUGIN } from '../../meta';
+import { DocumentType } from '../../types';
+import { getAbstract, getFallbackName } from '../../util';
+
+// TODO(burdon): Factor out.
+const getTitle = (subject: DocumentType | DataType.Text, fallback: string) => {
+  if (isInstanceOf(DocumentType, subject)) {
+    return subject.name ?? subject.fallbackName ?? getFallbackName(subject.content?.target?.content ?? fallback);
+  } else if (isInstanceOf(DataType.Text, subject)) {
+    return getFallbackName(subject.content);
+  }
+};
+
+// TODO(burdon): Factor out.
+const getSnippet = (subject: DocumentType | DataType.Text, fallback: string) => {
+  if (isInstanceOf(DocumentType, subject)) {
+    return getAbstract(subject.content?.target?.content ?? fallback);
+  } else if (isInstanceOf(DataType.Text, subject)) {
+    return getAbstract(subject.content);
+  }
+};
+
+export const MarkdownPreview = ({ classNames, subject, role }: PreviewProps<DocumentType | DataType.Text>) => {
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { t } = useTranslation(MARKDOWN_PLUGIN);
+  const snippet = getSnippet(subject, t('fallback abstract'));
+
+  // TODO(wittjosiah): Factor out so this component isn't dependent on the app framework.
+  const handleNavigate = useCallback(
+    () =>
+      dispatch(
+        pipe(
+          createIntent(LayoutAction.UpdatePopover, {
+            part: 'popover',
+            subject: null,
+            options: { state: false, anchorId: '' },
+          }),
+          chain(LayoutAction.Open, { part: 'main', subject: [fullyQualifiedId(subject)] }),
+        ),
+      ),
+    [dispatch, subject],
+  );
+
+  return (
+    <div
+      role='none'
+      className={mx(
+        role === 'popover' ? popoverCard : role === 'card--kanban' ? kanbanCardWithoutPoster : defaultCard,
+        classNames,
+      )}
+    >
+      <h2 className={mx(previewTitle, previewProse)}>{getTitle(subject, t('fallback title'))}</h2>
+      {snippet && <p className={mx(previewProse, 'line-clamp-3 break-words col-span-2')}>{snippet}</p>}
+      <div role='none' className={previewChrome}>
+        <Button onClick={handleNavigate}>
+          <span className='grow'>{t('navigate to document label')}</span>
+          <Icon icon='ph--arrow-right--regular' />
+        </Button>
+      </div>
+    </div>
+  );
+};

package/src/components/MarkdownPreview/index.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { MarkdownPreview } from './MarkdownPreview';
+
+export * from './MarkdownPreview';
+
+export default MarkdownPreview;

package/src/components/{MarkdownSettings.tsx → MarkdownSettings/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/MarkdownSettings/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './MarkdownSettings';

package/src/components/Suggestions.stories.tsx

@@ -5,6 +5,7 @@
 import '@dxos-theme';
 
 import { type Meta } from '@storybook/react';
+import { Schema, SchemaAST } from 'effect';
 import React, { type FC, useEffect, useMemo, useState } from 'react';
 
 import {
@@ -19,16 +20,18 @@ import {
 } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Message } from '@dxos/artifact';
-import { S, AST, create, type Expando, EchoObject } from '@dxos/echo-schema';
+import { Type } from '@dxos/echo';
+import { create, createQueueDxn, type Expando } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { DXN } from '@dxos/keys';
 import { live, makeRef, refFromDXN } from '@dxos/live-object';
 import { ClientPlugin } from '@dxos/plugin-client';
+import { PreviewPlugin } from '@dxos/plugin-preview';
 import { SpacePlugin } from '@dxos/plugin-space';
 import { StorybookLayoutPlugin } from '@dxos/plugin-storybook-layout';
 import { ThemePlugin } from '@dxos/plugin-theme';
 import { faker } from '@dxos/random';
-import { randomQueueDxn, useQueue, useSpace } from '@dxos/react-client/echo';
+import { useQueue, useSpace } from '@dxos/react-client/echo';
 import { IconButton, Toolbar } from '@dxos/react-ui';
 import { command, useTextEditor } from '@dxos/react-ui-editor';
 import { StackItem } from '@dxos/react-ui-stack';
@@ -44,23 +47,28 @@ import { createDocument, DocumentType, type MarkdownSettingsProps } from '../typ
 
 faker.seed(1);
 
-const TestItem = S.Struct({
-  title: S.String.annotations({
-    [AST.TitleAnnotationId]: 'Title',
-    [AST.DescriptionAnnotationId]: 'Product title',
+const TestItem = Schema.Struct({
+  title: Schema.String.annotations({
+    [SchemaAST.TitleAnnotationId]: 'Title',
+    [SchemaAST.DescriptionAnnotationId]: 'Product title',
   }),
-  description: S.String.annotations({
-    [AST.TitleAnnotationId]: 'Description',
-    [AST.DescriptionAnnotationId]: 'Product description',
+  description: Schema.String.annotations({
+    [SchemaAST.TitleAnnotationId]: 'Description',
+    [SchemaAST.DescriptionAnnotationId]: 'Product description',
   }),
-}).pipe(EchoObject({ typename: 'dxos.org/type/Test', version: '0.1.0' }));
+}).pipe(
+  Type.def({
+    typename: 'dxos.org/type/Test',
+    version: '0.1.0',
+  }),
+);
 
 const TestChat: FC<{ doc: DocumentType; content: string }> = ({ doc, content }) => {
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const { parentRef } = useTextEditor({ initialValue: content });
 
   const space = useSpace();
-  const queueDxn = useMemo(() => space && randomQueueDxn(space.id), [space]);
+  const queueDxn = useMemo(() => space && createQueueDxn(space.id), [space]);
   const queue = useQueue<Message>(queueDxn);
 
   const handleInsert = () => {
@@ -86,8 +94,8 @@ const TestChat: FC<{ doc: DocumentType; content: string }> = ({ doc, content })
   };
 
   return (
-    <StackItem.Content toolbar classNames='w-full'>
-      <Toolbar.Root classNames='border-be border-separator'>
+    <StackItem.Content toolbar>
+      <Toolbar.Root>
         <IconButton icon='ph--plus--regular' disabled={!queue} label='Insert' onClick={handleInsert} />
       </Toolbar.Root>
       <div ref={parentRef} className='p-4' />
@@ -151,10 +159,11 @@ const meta: Meta<typeof DefaultStory> = {
         SettingsPlugin(),
         IntentPlugin(),
         MarkdownPlugin(),
+        PreviewPlugin(),
       ],
       capabilities: [contributes(MarkdownCapabilities.Extensions, [() => command()])],
     }),
-    withLayout({ tooltips: true, fullscreen: true, classNames: 'grid grid-cols-2' }),
+    withLayout({ fullscreen: true, classNames: 'grid grid-cols-2' }),
   ],
   parameters: {
     translations,

package/src/components/Toolbar.stories.tsx

@@ -5,8 +5,9 @@
 import '@dxos-theme';
 
 import { type Meta } from '@storybook/react';
-import React, { type FC, useState } from 'react';
+import React, { type FC, useCallback, useState } from 'react';
 
+import { invariant } from '@dxos/invariant';
 import { PublicKey } from '@dxos/keys';
 import { live } from '@dxos/live-object';
 import { faker } from '@dxos/random';
@@ -14,7 +15,6 @@ import { createDocAccessor, createObject } from '@dxos/react-client/echo';
 import { useThemeContext } from '@dxos/react-ui';
 import {
   EditorToolbar,
-  type EditorAction,
   type Comment,
   comments,
   createBasicExtensions,
@@ -25,20 +25,20 @@ import {
   editorContent,
   formattingKeymap,
   translations,
-  useActionHandler,
   useComments,
   useFormattingState,
   useTextEditor,
   useEditorToolbarState,
+  type EditorViewMode,
 } from '@dxos/react-ui-editor';
-import { TextType } from '@dxos/schema';
+import { DataType } from '@dxos/schema';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 faker.seed(101);
 
 const DefaultStory: FC<{ content?: string }> = ({ content = '' }) => {
   const { themeMode } = useThemeContext();
-  const [text] = useState(createObject(live(TextType, { content })));
+  const [text] = useState(createObject(live(DataType.Text, { content })));
   const toolbarState = useEditorToolbarState({ viewMode: 'preview' });
   const formattingObserver = useFormattingState(toolbarState);
   const { parentRef, view } = useTextEditor(() => {
@@ -64,21 +64,21 @@ const DefaultStory: FC<{ content?: string }> = ({ content = '' }) => {
     };
   }, [text, formattingObserver, toolbarState.viewMode, themeMode]);
 
-  const handleToolbarAction = useActionHandler(view);
-  const handleAction = (action: EditorAction) => {
-    if (action.type === 'view-mode') {
-      toolbarState.viewMode = action.properties.data;
-    } else {
-      handleToolbarAction?.(action);
-    }
+  const handleViewModeChange = (viewMode: EditorViewMode) => {
+    toolbarState.viewMode = viewMode;
   };
 
+  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 onAction={handleAction} state={toolbarState ?? {}} />
+      <EditorToolbar state={toolbarState ?? {}} getView={getView} viewMode={handleViewModeChange} />
       <div className='flex grow overflow-hidden' ref={parentRef} />
     </div>
   );
@@ -98,7 +98,7 @@ const meta: Meta<typeof EditorToolbar> = {
   title: 'plugins/plugin-markdown/Toolbar',
   component: EditorToolbar,
   render: DefaultStory as any,
-  decorators: [withTheme, withLayout({ tooltips: true, fullscreen: true })],
+  decorators: [withTheme, withLayout({ fullscreen: true })],
   parameters: {
     translations,
   },

package/src/components/index.ts

@@ -7,3 +7,4 @@ 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 Query } from '@dxos/react-client/echo';
+import { createDocAccessor, fullyQualifiedId, getSpace, type QueryResult } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
 import { Icon, ThemeProvider } from '@dxos/react-ui';
 import {
@@ -35,7 +35,7 @@ import {
   type RenderCallback,
 } from '@dxos/react-ui-editor';
 import { defaultTx } from '@dxos/react-ui-theme';
-import { type TextType } from '@dxos/schema';
+import { type DataType } from '@dxos/schema';
 import { isNotFalsy } from '@dxos/util';
 
 import { MarkdownCapabilities } from './capabilities';
@@ -45,9 +45,9 @@ import { setFallbackName } from './util';
 type ExtensionsOptions = {
   document?: DocumentType;
   id?: string;
-  text?: TextType;
+  text?: DataType.Text;
   dispatch?: PromiseIntentDispatcher;
-  query?: Query<DocumentType>;
+  query?: QueryResult<DocumentType>;
   settings: MarkdownSettingsProps;
   viewMode?: EditorViewMode;
   editorStateStore?: EditorStateStore;
@@ -68,7 +68,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.schema(DocumentType));
+  // const query = space?.db.query(Filter.type(DocumentType));
   // query?.subscribe();
   const baseExtensions = useMemo(
     () =>

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 (!S.is(LayoutAction.ScrollIntoView.fields.input)(data)) {
+          if (!Schema.is(LayoutAction.ScrollIntoView.fields.input)(data)) {
             return false;
           }
 

package/src/translations.ts

@@ -2,15 +2,13 @@
 // Copyright 2023 DXOS.org
 //
 
-import { getSchemaTypename } from '@dxos/echo-schema';
-
 import { MARKDOWN_PLUGIN } from './meta';
 import { DocumentType } from './types';
 
 export default [
   {
     'en-US': {
-      [getSchemaTypename(DocumentType)!]: {
+      [DocumentType.typename]: {
         'typename label': 'Document',
         'object name placeholder': 'New document',
       },
@@ -35,6 +33,8 @@ 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',
       },
     },
   },