@dxos/plugin-markdown 0.8.4-main.bc674ce → 0.8.4-main.c351d160a8

package/src/capabilities/state/state.ts

@@ -15,13 +15,13 @@ export default Capability.makeModule(
   Effect.fnUntraced(function* () {
     // Persisted state using KVS store.
     const stateAtom = createKvsStore({
-      key: `${meta.id}/state`,
+      key: `${meta.id}.state`,
       schema: MarkdownStateSchema,
       defaultValue: () => ({ viewMode: {} }),
     });
 
     // TODO(wittjosiah): Fold into state.
-    const editorState = createEditorStateStore(`${meta.id}/editor`);
+    const editorState = createEditorStateStore(`${meta.id}.editor`);
 
     return [
       Capability.contributes(MarkdownCapabilities.State, stateAtom),

package/src/cli/plugin.ts

@@ -4,7 +4,8 @@
 
 import * as Effect from 'effect/Effect';
 
-import { Common, Plugin } from '@dxos/app-framework';
+import { Plugin } from '@dxos/app-framework';
+import { AppPlugin } from '@dxos/app-toolkit';
 import { type CreateObject } from '@dxos/plugin-space/types';
 import { Text } from '@dxos/schema';
 
@@ -14,16 +15,15 @@ import { meta } from '../meta';
 import { Markdown } from '../types';
 
 export const MarkdownPlugin = Plugin.define(meta).pipe(
-  Common.Plugin.addSchemaModule({ schema: [Markdown.Document, Text.Text] }),
-  Common.Plugin.addMetadataModule({
+  AppPlugin.addMetadataModule({
     metadata: {
       id: Markdown.Document.typename,
       metadata: {
         createObject: ((props) => Effect.sync(() => Markdown.make(props))) satisfies CreateObject,
-        addToCollectionOnCreate: true,
       },
     },
   }),
-  Common.Plugin.addOperationResolverModule({ activate: OperationResolver }),
+  AppPlugin.addOperationResolverModule({ activate: OperationResolver }),
+  AppPlugin.addSchemaModule({ schema: [Markdown.Document, Text.Text] }),
   Plugin.make,
 );

package/src/components/MarkdownEditor/FileUpload.tsx

@@ -7,7 +7,7 @@ import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
 import { createPortal } from 'react-dom';
 import { useDropzone } from 'react-dropzone';
 
-import { type Common } from '@dxos/app-framework';
+import { type FileInfo } from '@dxos/app-toolkit';
 import { addLink } from '@dxos/ui-editor';
 
 export const IMAGE_FILES = ['.jpg', '.jpeg', '.png', '.gif'];
@@ -16,7 +16,7 @@ export type FileUploadAction = () => void;
 
 export type FileUploadProps = {
   editorView?: EditorView;
-  onFileUpload?: (file: File) => Promise<Common.FileInfo | undefined>;
+  onFileUpload?: (file: File) => Promise<FileInfo | undefined>;
 };
 
 // TODO(burdon): Factor out.

package/src/components/MarkdownEditor/MarkdownEditor.stories.tsx

@@ -11,61 +11,64 @@ import { Filter, Obj } from '@dxos/echo';
 import { ClientPlugin } from '@dxos/plugin-client';
 import { corePlugins } from '@dxos/plugin-testing';
 import { useQuery, useSpace } from '@dxos/react-client/echo';
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
-import { useAttentionAttributes } from '@dxos/react-ui-attention';
+import { Panel } from '@dxos/react-ui';
+import { Loading, withLayout, withTheme } from '@dxos/react-ui/testing';
+import { AttendableContainer } from '@dxos/react-ui-attention';
 import { translations as editorTranslations } from '@dxos/react-ui-editor';
-import { Layout } from '@dxos/react-ui-mosaic';
+import { Text } from '@dxos/schema';
 
 import { translations } from '../../translations';
 import { Markdown } from '../../types';
 
 import { MarkdownEditor, type MarkdownEditorRootProps } from './MarkdownEditor';
 
-const content = Array.from({ length: 100 }, (_, i) => `Line ${i + 1}`).join('\n');
-
 type StoryProps = Omit<MarkdownEditorRootProps, 'id' | 'extensions'>;
 
 const DefaultStory = (props: StoryProps) => {
   const space = useSpace();
   const [doc] = useQuery(space?.db, Filter.type(Markdown.Document));
   const id = doc && Obj.getDXN(doc).toString();
-  const attentionAttrs = useAttentionAttributes(id);
   if (!id) {
-    return null;
+    return <Loading data={{ id }} />;
   }
 
   return (
-    <div className='contents' {...attentionAttrs}>
-      <Layout.Main toolbar>
-        <MarkdownEditor.Root id={id} object={doc} {...props}>
-          <MarkdownEditor.Toolbar id={id} />
-          <MarkdownEditor.Content />
-        </MarkdownEditor.Root>
-      </Layout.Main>
-    </div>
+    <AttendableContainer id={id} tabIndex={0} classNames='dx-container'>
+      <MarkdownEditor.Root id={id} object={doc} {...props}>
+        <Panel.Root>
+          <Panel.Toolbar asChild>
+            <MarkdownEditor.Toolbar />
+          </Panel.Toolbar>
+          <Panel.Content asChild>
+            <MarkdownEditor.Content />
+          </Panel.Content>
+        </Panel.Root>
+      </MarkdownEditor.Root>
+    </AttendableContainer>
   );
 };
 
 const meta: Meta<typeof DefaultStory> = {
-  title: 'plugins/plugin-markdown/MarkdownEditor',
-  component: DefaultStory,
-  render: DefaultStory as any,
+  title: 'plugins/plugin-markdown/components/MarkdownEditor',
+  render: DefaultStory,
   decorators: [
-    withTheme,
+    withTheme(),
     withLayout({ layout: 'column' }),
     withPluginManager({
       plugins: [
         ...corePlugins(),
+        // TODO(burdon): Try to write story without ClientPlugin.
         ClientPlugin({
-          types: [Markdown.Document],
+          types: [Markdown.Document, Text.Text],
           onClientInitialized: ({ client }) =>
             Effect.gen(function* () {
               yield* Effect.promise(() => client.halo.createIdentity());
               yield* Effect.promise(() => client.spaces.waitUntilReady());
               const space = client.spaces.default;
               yield* Effect.promise(() => space.waitUntilReady());
-
-              space.db.add(Markdown.make({ content }));
+              space.db.add(
+                Markdown.make({ content: Array.from({ length: 100 }, (_, i) => `Line ${i + 1}`).join('\n') }),
+              );
             }),
         }),
       ],

package/src/components/MarkdownEditor/MarkdownEditor.tsx

@@ -9,7 +9,7 @@ import { createContext } from '@radix-ui/react-context';
 import React, { type PropsWithChildren, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 
-import { Surface } from '@dxos/app-framework/react';
+import { Surface } from '@dxos/app-framework/ui';
 import { DXN } from '@dxos/keys';
 import { useClient } from '@dxos/react-client';
 import {
@@ -19,6 +19,7 @@ import {
   useEditorMenu,
   useEditorToolbar,
 } from '@dxos/react-ui-editor';
+import { type ThemedClassName } from '@dxos/react-ui';
 import { type PreviewBlock, type PreviewOptions } from '@dxos/ui-editor';
 import { isNonNullable } from '@dxos/util';
 
@@ -45,6 +46,7 @@ import {
 
 type MarkdownEditorContextValue = {
   id: string;
+  attendableId?: string;
   setEditorView: (view: EditorView) => void;
   extensions: Extension[];
   previewBlocks: PreviewBlock[];
@@ -64,14 +66,18 @@ type MarkdownEditorRootProps = PropsWithChildren<
   {
     object?: DocumentType;
     extensions?: Extension[];
-  } & Pick<MarkdownEditorContextValue, 'id' | 'onAction' | 'onFileUpload' | 'onViewModeChange' | 'viewMode'> &
+  } & Pick<
+    MarkdownEditorContextValue,
+    'id' | 'attendableId' | 'onAction' | 'onFileUpload' | 'onViewModeChange' | 'viewMode'
+  > &
     Pick<UseEditorMenuOptionsProps, 'slashCommandGroups' | 'onLinkQuery'> &
-    Pick<ExtensionsOptions, 'editorStateStore' | 'selectionManager' | 'settings'>
+    Pick<ExtensionsOptions, 'editorStateStore' | 'selectionManager' | 'settings' | 'onSelectObject'>
 >;
 
 const MarkdownEditorRoot = ({
   children,
   id,
+  attendableId,
   object,
   editorStateStore,
   selectionManager,
@@ -80,6 +86,7 @@ const MarkdownEditorRoot = ({
   extensions: extensionsProp,
   slashCommandGroups,
   onLinkQuery,
+  onSelectObject,
   ...props
 }: MarkdownEditorRootProps) => {
   const [editorView, setEditorView] = useState<EditorView>();
@@ -92,7 +99,7 @@ const MarkdownEditorRoot = ({
         setPreviewBlocks((prev) => [...prev, block]);
       },
       removeBlockContainer: ({ link }) => {
-        setPreviewBlocks((prev) => prev.filter(({ link: prevLink }) => prevLink.ref !== link.ref));
+        setPreviewBlocks((prev) => prev.filter(({ link: prevLink }) => prevLink.dxn !== link.dxn));
       },
     }),
     [],
@@ -118,6 +125,7 @@ const MarkdownEditorRoot = ({
     selectionManager,
     settings,
     viewMode,
+    onSelectObject,
   });
 
   const extensions = useMemo(
@@ -128,6 +136,7 @@ const MarkdownEditorRoot = ({
   return (
     <MarkdownEditorContextProvider
       id={id}
+      attendableId={attendableId}
       editorView={editorView}
       setEditorView={setEditorView}
       extensions={extensions}
@@ -148,24 +157,28 @@ MarkdownEditorRoot.displayName = 'MarkdownEditor.Root';
 // MarkdownEditor.Main
 //
 
+const MARKDOWN_EDITOR_CONTENT_NAME = 'MarkdownEditor.Content';
+
 type MarkdownEditorContentProps = Omit<NaturalMarkdownEditorContentProps, 'id' | 'extensions' | 'toolbarState'>;
 
 const MarkdownEditorContent = (props: MarkdownEditorContentProps) => {
   const {
     id,
+    attendableId,
     editorView,
     setEditorView,
     viewMode,
     toolbarState,
     extensions,
     popoverMenu: { groupsRef, ...menuProps },
-  } = useMarkdownEditorContext(MarkdownEditorContent.displayName);
+  } = useMarkdownEditorContext(MARKDOWN_EDITOR_CONTENT_NAME);
 
   return (
     <EditorMenuProvider view={editorView} groups={groupsRef.current} {...menuProps}>
       <NaturalMarkdownEditorContent
         {...props}
         id={id}
+        attendableId={attendableId}
         viewMode={viewMode}
         toolbarState={toolbarState}
         extensions={extensions}
@@ -175,52 +188,66 @@ const MarkdownEditorContent = (props: MarkdownEditorContentProps) => {
   );
 };
 
-MarkdownEditorContent.displayName = 'MarkdownEditor.Content';
+MarkdownEditorContent.displayName = MARKDOWN_EDITOR_CONTENT_NAME;
 
 //
 // MarkdownEditor.Toolbar
 //
 
-type MarkdownEditorToolbarProps = Omit<
-  NaturalMarkdownToolbarProps,
-  'state' | 'editorView' | 'onAction' | 'onFileUpload' | 'onViewModeChange'
+const MARKDOWN_EDITOR_TOOLBAR_NAME = 'MarkdownEditor.Toolbar';
+
+type MarkdownEditorToolbarProps = ThemedClassName<
+  Omit<NaturalMarkdownToolbarProps, 'state' | 'editorView' | 'onAction' | 'onFileUpload' | 'onViewModeChange' | 'id'>
 >;
 
 const MarkdownEditorToolbar = (props: MarkdownEditorToolbarProps) => {
-  const { toolbarState, ...rootProps } = useMarkdownEditorContext(MarkdownEditorToolbar.displayName);
+  const { id, attendableId, editorView, toolbarState, onAction, onFileUpload, onViewModeChange } =
+    useMarkdownEditorContext(MARKDOWN_EDITOR_TOOLBAR_NAME);
 
-  return <NaturalMarkdownToolbar {...props} {...rootProps} state={toolbarState} />;
+  return (
+    <NaturalMarkdownToolbar
+      {...props}
+      id={attendableId ?? id}
+      editorView={editorView}
+      state={toolbarState}
+      onAction={onAction}
+      onFileUpload={onFileUpload}
+      onViewModeChange={onViewModeChange}
+    />
+  );
 };
 
-MarkdownEditorToolbar.displayName = 'MarkdownEditor.Toolbar';
+MarkdownEditorToolbar.displayName = MARKDOWN_EDITOR_TOOLBAR_NAME;
 
 //
 // MarkdownEditor.Blocks (embedded objects)
 //
 
+const MARKDOWN_EDITOR_BLOCKS_NAME = 'MarkdownEditor.Blocks';
+
 type MarkdownEditorBlocksProps = {};
 
 const MarkdownEditorBlocks = (_props: MarkdownEditorBlocksProps) => {
-  const { previewBlocks } = useMarkdownEditorContext(MarkdownEditorBlocks.displayName);
+  const { previewBlocks } = useMarkdownEditorContext(MARKDOWN_EDITOR_BLOCKS_NAME);
 
   return (
     <>
       {previewBlocks.map(({ link, el }) => (
-        <PreviewBlock key={link.ref} link={link} el={el} />
+        <PreviewBlock key={link.dxn} link={link} el={el} />
       ))}
     </>
   );
 };
 
-MarkdownEditorBlocks.displayName = 'MarkdownEditor.Blocks';
+MarkdownEditorBlocks.displayName = MARKDOWN_EDITOR_BLOCKS_NAME;
 
 const PreviewBlock = ({ el, link }: PreviewBlock) => {
   const client = useClient();
-  const dxn = DXN.parse(link.ref);
+  const dxn = DXN.parse(link.dxn);
   const subject = client.graph.makeRef(dxn).target;
   const data = useMemo(() => ({ subject }), [subject]);
 
-  return createPortal(<Surface role='card--transclusion' data={data} limit={1} />, el);
+  return createPortal(<Surface.Surface role='card--content' data={data} limit={1} />, el);
 };
 
 //

package/src/components/MarkdownEditor/MarkdownEditorContent.tsx

@@ -37,6 +37,7 @@ import { type MarkdownEditorToolbarProps } from './MarkdownEditorToolbar';
 
 export type MarkdownEditorContentProps = ThemedClassName<{
   id: string;
+  attendableId?: string;
   role?: string;
   viewMode?: EditorViewMode;
   scrollPastEnd?: boolean;
@@ -45,7 +46,6 @@ export type MarkdownEditorContentProps = ThemedClassName<{
   toolbarState?: Atom.Writable<EditorToolbarState>;
   onLinkQuery?: (query?: string) => Promise<EditorMenuGroup[]>;
 }> &
-  // prettier-ignore
   Pick<UseTextEditorProps, 'initialValue' | 'extensions'> &
   Pick<MarkdownEditorToolbarProps, 'onFileUpload'> &
   Pick<ThemeExtensionsOptions, 'slots'>;
@@ -55,6 +55,7 @@ export const MarkdownEditorContent = forwardRef<EditorView | null, MarkdownEdito
     {
       classNames,
       id,
+      attendableId,
       role,
       viewMode,
       initialValue,
@@ -133,18 +134,18 @@ export const MarkdownEditorContent = forwardRef<EditorView | null, MarkdownEdito
 
     useImperativeHandle<EditorView | null, EditorView | null>(forwardedRef, () => editorView, [editorView]);
 
-    useSelectCurrentThread(editorView, id);
+    useSelectCurrentThread(editorView, id, attendableId ?? id);
 
     useTest(editorView);
 
     return (
       <div
+        {...focusAttributes}
         role='none'
-        ref={parentRef}
         data-testid='composer.markdownRoot'
-        className={mx(stackItemContentEditorClassNames(role), classNames)}
         data-popover-collision-boundary={true}
-        {...focusAttributes}
+        className={mx(stackItemContentEditorClassNames(role), classNames)}
+        ref={parentRef}
       />
     );
   },

package/src/components/MarkdownEditor/MarkdownEditorToolbar.tsx

@@ -3,26 +3,25 @@
 //
 
 import { type EditorView } from '@codemirror/view';
-import React, { useCallback, useState } from 'react';
+import React, { type ComponentPropsWithoutRef, useCallback, useState } from 'react';
 
-import { type Common } from '@dxos/app-framework';
+import { type FileInfo } from '@dxos/app-toolkit';
 import { invariant } from '@dxos/invariant';
 import { type ThemedClassName } from '@dxos/react-ui';
 import { EditorToolbar, type EditorToolbarProps } from '@dxos/react-ui-editor';
-import { type EditorViewMode } from '@dxos/ui-editor';
 
 import { FileUpload, type FileUploadAction } from './FileUpload';
+import { composableProps } from '@dxos/ui-theme';
 
 export type MarkdownEditorToolbarProps = ThemedClassName<
-  {
+  ComponentPropsWithoutRef<'div'> & {
     id: string;
     editorView?: EditorView;
-    onFileUpload?: (file: File) => Promise<Common.FileInfo | undefined>;
+    onFileUpload?: (file: File) => Promise<FileInfo | undefined>;
   } & Pick<EditorToolbarProps, 'role' | 'state' | 'customActions' | 'onAction' | 'onViewModeChange'>
 >;
 
 export const MarkdownEditorToolbar = ({
-  classNames,
   id,
   role,
   state,
@@ -31,25 +30,26 @@ export const MarkdownEditorToolbar = ({
   onAction,
   onFileUpload,
   onViewModeChange,
+  ...props
 }: MarkdownEditorToolbarProps) => {
+  const { className, ...rest } = composableProps(props);
   const [upload, setUpload] = useState<FileUploadAction | null>(null);
   const uploadRef = useCallback((next: FileUploadAction) => setUpload(() => next), []);
 
-  const handleViewModeChange = useCallback((mode: EditorViewMode) => onViewModeChange?.(mode), [onViewModeChange]);
-
   const getView = useCallback(() => {
     invariant(editorView);
     return editorView;
   }, [editorView]);
 
   if (!editorView) {
-    return <div />;
+    return <div className={className} {...rest} />;
   }
 
   return (
-    <>
+    <div role='none' className='contents'>
       <EditorToolbar
-        classNames={classNames}
+        {...rest}
+        classNames={className}
         attendableId={id}
         role={role}
         state={state}
@@ -57,10 +57,10 @@ export const MarkdownEditorToolbar = ({
         getView={getView}
         onAction={onAction}
         onImageUpload={upload ?? undefined}
-        onViewModeChange={handleViewModeChange}
+        onViewModeChange={onViewModeChange}
       />
 
       {onFileUpload && <FileUpload ref={uploadRef} editorView={editorView} onFileUpload={onFileUpload} />}
-    </>
+    </div>
   );
 };

package/src/components/index.ts

@@ -1,17 +1,5 @@
 //
-// Copyright 2023 DXOS.org
+// Copyright 2025 DXOS.org
 //
 
-import { type LazyExoticComponent, lazy } from 'react';
-
-import { type MarkdownCard as MarkdownCardType } from './MarkdownCard';
-import { type MarkdownContainer as MarkdownContainerType } from './MarkdownContainer';
-
-export * from './MarkdownCard';
-export * from './MarkdownContainer';
-export * from './MarkdownSettings';
-
-export const MarkdownCard: LazyExoticComponent<typeof MarkdownCardType> = lazy(() => import('./MarkdownCard'));
-export const MarkdownContainer: LazyExoticComponent<typeof MarkdownContainerType> = lazy(
-  () => import('./MarkdownContainer'),
-);
+export * from './MarkdownEditor';

package/src/{components → containers}/MarkdownCard/MarkdownCard.stories.tsx

@@ -5,10 +5,13 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useMemo } from 'react';
 
-import { OperationPlugin } from '@dxos/app-framework';
+import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
+import { Obj } from '@dxos/echo';
+import { ClientPlugin } from '@dxos/plugin-client';
 import { Markdown } from '@dxos/plugin-markdown/types';
 import { faker } from '@dxos/random';
+import { Card } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
 import { CardContainer } from '@dxos/react-ui-mosaic/testing';
 
@@ -18,30 +21,37 @@ import { MarkdownCard, type MarkdownCardProps } from './MarkdownCard';
 
 faker.seed(1234);
 
-// TODO(wittjosiah): ECHO objects don't work when passed via Storybook args.
 const MarkdownCardStory = ({ ...args }: Omit<MarkdownCardProps, 'subject'>) => {
   const subject = useMemo(
     () =>
       Markdown.make({
         name: faker.lorem.words(3),
-        content: faker.lorem.paragraphs(3),
+        content: faker.lorem.paragraphs(5),
       }),
     [],
   );
+
   return (
     <CardContainer icon='ph--text-aa--regular'>
-      <MarkdownCard subject={subject} {...args} />
+      <Card.Root border={false}>
+        <Card.Toolbar>
+          <Card.DragHandle />
+          <Card.Title>{Obj.getLabel(subject)}</Card.Title>
+          <Card.Menu />
+        </Card.Toolbar>
+        <MarkdownCard subject={subject} {...args} />
+      </Card.Root>
     </CardContainer>
   );
 };
 
 const meta: Meta<typeof MarkdownCardStory> = {
-  title: 'plugins/plugin-markdown/Card',
+  title: 'plugins/plugin-markdown/containers/MarkdownCard',
   component: MarkdownCardStory,
   decorators: [
-    withTheme,
+    withTheme(),
     withPluginManager({
-      plugins: [OperationPlugin()],
+      plugins: [OperationPlugin(), RuntimePlugin(), ClientPlugin({})],
     }),
   ],
   parameters: {

package/src/{components → containers}/MarkdownCard/MarkdownCard.tsx

@@ -6,13 +6,13 @@ import React, { useMemo } from 'react';
 
 import { Obj } from '@dxos/echo';
 import { useTranslation } from '@dxos/react-ui';
-import { Card } from '@dxos/react-ui-mosaic';
+import { Card } from '@dxos/react-ui';
 import { Text } from '@dxos/schema';
 
+import { MarkdownEditor } from '../../components';
 import { meta } from '../../meta';
 import { Markdown } from '../../types';
-import { getContentSnippet, getFallbackName } from '../../util';
-import { MarkdownEditor } from '../MarkdownEditor';
+import { getContentSnippet } from '../../util';
 
 export type MarkdownCardProps = { subject: Markdown.Document | Text.Text };
 
@@ -24,41 +24,38 @@ export const MarkdownCard = ({ subject }: MarkdownCardProps) => {
   return (
     <Card.Content>
       {snippet && (
-        <Card.Row className='max-h-[300px] overflow-hidden'>
+        <Card.Section>
           <MarkdownEditor.Root id={subject.id} viewMode='readonly'>
-            <MarkdownEditor.Content initialValue={snippet} slots={{}} classNames='!bg-transparent' />
+            <MarkdownEditor.Content
+              initialValue={snippet}
+              classNames='bg-transparent'
+              slots={{
+                editor: { className: 'max-h-[240px]' },
+              }}
+            />
           </MarkdownEditor.Root>
-        </Card.Row>
+        </Card.Section>
       )}
-      <Card.Row>
+      <Card.Section>
         <Card.Text classNames='text-xs text-description'>
           {info.words} {t('words label', { count: info.words })}
         </Card.Text>
-      </Card.Row>
+      </Card.Section>
     </Card.Content>
   );
 };
 
-const getInfo = (subject: Markdown.Document | Text.Text) => {
-  const text = (Obj.instanceOf(Markdown.Document, subject) ? subject.content?.target?.content : subject.content) ?? '';
-  return { words: text.split(' ').length };
-};
+const MAX_LINES = 5;
 
-// TODO(burdon): Factor out.
-const getTitle = (subject: Markdown.Document | Text.Text, fallback: string) => {
+const getSnippet = (subject: Markdown.Document | Text.Text, fallback?: string) => {
   if (Obj.instanceOf(Markdown.Document, subject)) {
-    const title = Obj.getLabel(subject);
-    return title ?? getFallbackName(subject.content?.target?.content ?? fallback);
+    return Obj.getDescription(subject) || getContentSnippet(subject.content?.target?.content ?? fallback, MAX_LINES);
   } else if (Obj.instanceOf(Text.Text, subject)) {
-    return getFallbackName(subject.content);
+    return getContentSnippet(subject.content ?? fallback, MAX_LINES);
   }
 };
 
-// TODO(burdon): Factor out.
-const getSnippet = (subject: Markdown.Document | Text.Text, fallback?: string) => {
-  if (Obj.instanceOf(Markdown.Document, subject)) {
-    return Obj.getDescription(subject) || getContentSnippet(subject.content?.target?.content ?? fallback);
-  } else if (Obj.instanceOf(Text.Text, subject)) {
-    return getContentSnippet(subject.content ?? fallback);
-  }
+const getInfo = (subject: Markdown.Document | Text.Text) => {
+  const text = (Obj.instanceOf(Markdown.Document, subject) ? subject.content?.target?.content : subject.content) ?? '';
+  return { words: text.split(' ').length };
 };

package/src/{components → containers}/MarkdownCard/index.ts

@@ -4,6 +4,4 @@
 
 import { MarkdownCard } from './MarkdownCard';
 
-export * from './MarkdownCard';
-
 export default MarkdownCard;