@dxos/plugin-markdown 0.8.2-main.12df754 → 0.8.2-main.2f9c567

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,7 +19,7 @@ export type MarkdownContainerProps = Pick<
   'role' | 'extensionProviders' | 'viewMode' | 'editorStateStore' | 'onViewModeChange'
 > & {
   id: string;
-  object: DocumentType | TextType | any;
+  object: DocumentType | DataType.Text | any;
   settings: MarkdownSettingsProps;
 };
 
@@ -36,7 +36,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');
 

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

@@ -38,9 +38,9 @@ import {
 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;
@@ -231,6 +231,7 @@ export const MarkdownEditor = ({
         data-testid='composer.markdownRoot'
         data-toolbar={toolbar ? 'enabled' : 'disabled'}
         className={stackItemContentEditorClassNames(role)}
+        data-popover-collision-boundary={true}
         {...focusAttributes}
       />
     </StackItem.Content>

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,68 @@
+//
+// 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({ tooltips: true })],
+  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, 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 { createQueueDxn, 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 = () => {
@@ -151,6 +159,7 @@ const meta: Meta<typeof DefaultStory> = {
         SettingsPlugin(),
         IntentPlugin(),
         MarkdownPlugin(),
+        PreviewPlugin(),
       ],
       capabilities: [contributes(MarkdownCapabilities.Extensions, [() => command()])],
     }),

package/src/components/Toolbar.stories.tsx

@@ -31,14 +31,14 @@ import {
   useTextEditor,
   useEditorToolbarState,
 } 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(() => {

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

@@ -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,7 +45,7 @@ import { setFallbackName } from './util';
 type ExtensionsOptions = {
   document?: DocumentType;
   id?: string;
-  text?: TextType;
+  text?: DataType.Text;
   dispatch?: PromiseIntentDispatcher;
   query?: Query<DocumentType>;
   settings: MarkdownSettingsProps;

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

@@ -35,6 +35,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',
       },
     },
   },

package/src/types/schema.ts

@@ -2,28 +2,36 @@
 // Copyright 2024 DXOS.org
 //
 
-import { EchoObject, Expando, LabelAnnotationId, Ref, S } from '@dxos/echo-schema';
+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 { ThreadType } from '@dxos/plugin-space/types';
-import { TextType } from '@dxos/schema';
+import { DataType } from '@dxos/schema';
 
-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)),
+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)),
 }).annotations({
-  // TODO(dmaretskyi): `S.Struct(...).pipe(defaultLabel(['name', 'fallbackName']))` for type-safe annotations.
+  // TODO(dmaretskyi): `Schema.Struct(...).pipe(defaultLabel(['name', 'fallbackName']))` for type-safe annotations.
   [LabelAnnotationId]: ['name', 'fallbackName'],
 });
 
-export const DocumentType = DocumentSchema.pipe(EchoObject({ typename: 'dxos.org/type/Document', version: '0.1.0' }));
-export type DocumentType = S.Schema.Type<typeof DocumentType>;
+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(TextType, { content })), threads: [] });
+  live(DocumentType, { name, content: makeRef(live(DataType.Text, { content })), threads: [] });
 
 /**
  * Checks if an object conforms to the interface needed to render an editor.

package/src/types/types.ts

@@ -2,7 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
-import { S } from '@dxos/echo-schema';
+import { Schema } from 'effect';
+
 // TODO(wittjosiah): This pulls in UI code into the types entrypoint.
 import { type Extension, EditorInputMode, EditorViewMode } from '@dxos/react-ui-editor';
 
@@ -12,23 +13,23 @@ import { MARKDOWN_PLUGIN } from '../meta';
 const MARKDOWN_ACTION = `${MARKDOWN_PLUGIN}/action`;
 
 export namespace MarkdownAction {
-  export class Create extends S.TaggedClass<Create>()(MARKDOWN_ACTION, {
-    input: S.Struct({
-      spaceId: S.String,
-      name: S.optional(S.String),
-      content: S.optional(S.String),
+  export class Create extends Schema.TaggedClass<Create>()(MARKDOWN_ACTION, {
+    input: Schema.Struct({
+      spaceId: Schema.String,
+      name: Schema.optional(Schema.String),
+      content: Schema.optional(Schema.String),
     }),
-    output: S.Struct({
+    output: Schema.Struct({
       object: DocumentType,
     }),
   }) {}
 
-  export class SetViewMode extends S.TaggedClass<SetViewMode>()(`${MARKDOWN_ACTION}/set-view-mode`, {
-    input: S.Struct({
-      id: S.String,
+  export class SetViewMode extends Schema.TaggedClass<SetViewMode>()(`${MARKDOWN_ACTION}/set-view-mode`, {
+    input: Schema.Struct({
+      id: Schema.String,
       viewMode: EditorViewMode,
     }),
-    output: S.Void,
+    output: Schema.Void,
   }) {}
 }
 
@@ -48,18 +49,18 @@ export type MarkdownPluginState = {
   viewMode: Record<string, EditorViewMode>;
 };
 
-export const MarkdownSettingsSchema = S.mutable(
-  S.Struct({
+export const MarkdownSettingsSchema = Schema.mutable(
+  Schema.Struct({
     defaultViewMode: EditorViewMode,
-    editorInputMode: S.optional(EditorInputMode),
-    experimental: S.optional(S.Boolean),
-    debug: S.optional(S.Boolean),
-    toolbar: S.optional(S.Boolean),
-    typewriter: S.optional(S.String),
+    editorInputMode: Schema.optional(EditorInputMode),
+    experimental: Schema.optional(Schema.Boolean),
+    debug: Schema.optional(Schema.Boolean),
+    toolbar: Schema.optional(Schema.Boolean),
+    typewriter: Schema.optional(Schema.String),
     // TODO(burdon): Per document settings.
-    numberedHeadings: S.optional(S.Boolean),
-    folding: S.optional(S.Boolean),
+    numberedHeadings: Schema.optional(Schema.Boolean),
+    folding: Schema.optional(Schema.Boolean),
   }),
 );
 
-export type MarkdownSettingsProps = S.Schema.Type<typeof MarkdownSettingsSchema>;
+export type MarkdownSettingsProps = Schema.Schema.Type<typeof MarkdownSettingsSchema>;

package/src/util.tsx

@@ -5,7 +5,7 @@
 import { debounce } from '@dxos/async';
 import { type TypedObjectSerializer } from '@dxos/plugin-space/types';
 import { live, createObject, isEchoObject, loadObjectReferences, makeRef } from '@dxos/react-client/echo';
-import { TextType } from '@dxos/schema';
+import { DataType } from '@dxos/schema';
 
 import { DocumentType, type MarkdownProperties } from './types';
 
@@ -22,6 +22,10 @@ export const getFallbackName = (content: string) => {
   return content.substring(0, 31).split('\n')[0].replaceAll(nonTitleChars, '').trim();
 };
 
+export const getAbstract = (content: string) => {
+  return content.substring(0, 128).split('\n')[0].replaceAll(nonTitleChars, '').trim();
+};
+
 export const setFallbackName = debounce((doc: DocumentType, content: string) => {
   const name = getFallbackName(content);
   if (doc.fallbackName !== name) {
@@ -38,7 +42,7 @@ export const serializer: TypedObjectSerializer<DocumentType> = {
   deserialize: async ({ content: serialized }) => {
     const { name, fallbackName, content } = JSON.parse(serialized);
     return createObject(
-      live(DocumentType, { name, fallbackName, content: makeRef(live(TextType, { content })), threads: [] }),
+      live(DocumentType, { name, fallbackName, content: makeRef(live(DataType.Text, { content })), threads: [] }),
     );
   },
 };