@dxos/plugin-markdown 0.8.4-main.67995b8 → 0.8.4-main.c4373fc

package/src/components/MarkdownSettings/MarkdownSettings.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 
 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 { ControlGroup, ControlItemInput, ControlPage, ControlSection } from '@dxos/react-ui-form';
 
 import { meta } from '../../meta';
 import { type Markdown } from '../../types';
@@ -16,90 +16,93 @@ export const MarkdownSettings = ({ settings }: { settings: Markdown.Settings })
 
   // TODO(wittjosiah): Add skill test confirmation for entering vim mode.
   return (
-    <DeprecatedFormContainer>
-      <DeprecatedFormInput label={t('default view mode label')}>
-        <Select.Root
-          value={settings.defaultViewMode}
-          onValueChange={(value) => {
-            settings.defaultViewMode = value as EditorViewMode;
-          }}
-        >
-          <Select.TriggerButton />
-          <Select.Portal>
-            <Select.Content>
-              <Select.Viewport>
-                {EditorViewModes.map((mode) => (
-                  <Select.Option key={mode} value={mode}>
-                    {t(`${mode} mode label`, { ns: 'react-ui-editor' })}
-                  </Select.Option>
-                ))}
-              </Select.Viewport>
-            </Select.Content>
-          </Select.Portal>
-        </Select.Root>
-      </DeprecatedFormInput>
+    <ControlPage>
+      <ControlSection title={t('settings title', { ns: meta.id })}>
+        <ControlGroup>
+          <ControlItemInput title={t('default view mode label')}>
+            <Select.Root
+              value={settings.defaultViewMode}
+              onValueChange={(value) => {
+                settings.defaultViewMode = value as EditorViewMode;
+              }}
+            >
+              <Select.TriggerButton />
+              <Select.Portal>
+                <Select.Content>
+                  <Select.Viewport>
+                    {EditorViewModes.map((mode) => (
+                      <Select.Option key={mode} value={mode}>
+                        {t(`${mode} mode label`, { ns: 'react-ui-editor' })}
+                      </Select.Option>
+                    ))}
+                  </Select.Viewport>
+                  <Select.Arrow />
+                </Select.Content>
+              </Select.Portal>
+            </Select.Root>
+          </ControlItemInput>
 
-      <DeprecatedFormInput label={t('editor input mode label')}>
-        <Select.Root
-          value={settings.editorInputMode ?? 'default'}
-          onValueChange={(value) => {
-            settings.editorInputMode = value as EditorInputMode;
-          }}
-        >
-          <Select.TriggerButton placeholder={t('select editor input mode placeholder')} />
-          <Select.Portal>
-            <Select.Content>
-              <Select.Viewport>
-                {EditorInputModes.map((mode) => (
-                  <Select.Option key={mode} value={mode}>
-                    {t(`settings editor input mode ${mode} label`)}
-                  </Select.Option>
-                ))}
-              </Select.Viewport>
-            </Select.Content>
-          </Select.Portal>
-        </Select.Root>
-      </DeprecatedFormInput>
+          <ControlItemInput title={t('editor input mode label')}>
+            <Select.Root
+              value={settings.editorInputMode ?? 'default'}
+              onValueChange={(value) => {
+                settings.editorInputMode = value as EditorInputMode;
+              }}
+            >
+              <Select.TriggerButton placeholder={t('select editor input mode placeholder')} />
+              <Select.Portal>
+                <Select.Content>
+                  <Select.Viewport>
+                    {EditorInputModes.map((mode) => (
+                      <Select.Option key={mode} value={mode}>
+                        {t(`settings editor input mode ${mode} label`)}
+                      </Select.Option>
+                    ))}
+                  </Select.Viewport>
+                  <Select.Arrow />
+                </Select.Content>
+              </Select.Portal>
+            </Select.Root>
+          </ControlItemInput>
 
-      <DeprecatedFormInput label={t('settings toolbar label')}>
-        <Input.Switch checked={settings.toolbar} onCheckedChange={(checked) => (settings.toolbar = !!checked)} />
-      </DeprecatedFormInput>
+          <ControlItemInput title={t('settings toolbar label')}>
+            <Input.Switch checked={settings.toolbar} onCheckedChange={(checked) => (settings.toolbar = !!checked)} />
+          </ControlItemInput>
 
-      <DeprecatedFormInput label={t('settings numbered headings label')}>
-        <Input.Switch
-          checked={settings.numberedHeadings}
-          onCheckedChange={(checked) => (settings.numberedHeadings = !!checked)}
-        />
-      </DeprecatedFormInput>
+          <ControlItemInput title={t('settings numbered headings label')}>
+            <Input.Switch
+              checked={settings.numberedHeadings}
+              onCheckedChange={(checked) => (settings.numberedHeadings = !!checked)}
+            />
+          </ControlItemInput>
 
-      <DeprecatedFormInput label={t('settings folding label')}>
-        <Input.Switch checked={settings.folding} onCheckedChange={(checked) => (settings.folding = !!checked)} />
-      </DeprecatedFormInput>
+          <ControlItemInput title={t('settings folding label')}>
+            <Input.Switch checked={settings.folding} onCheckedChange={(checked) => (settings.folding = !!checked)} />
+          </ControlItemInput>
 
-      <DeprecatedFormInput label={t('settings experimental label')}>
-        <Input.Switch
-          checked={settings.experimental}
-          onCheckedChange={(checked) => (settings.experimental = !!checked)}
-        />
-      </DeprecatedFormInput>
+          <ControlItemInput title={t('settings experimental label')}>
+            <Input.Switch
+              checked={settings.experimental}
+              onCheckedChange={(checked) => (settings.experimental = !!checked)}
+            />
+          </ControlItemInput>
 
-      <DeprecatedFormInput
-        label={t('settings debug label')}
-        secondary={
-          settings.debug ? (
-            <Input.Root>
+          <ControlItemInput title={t('settings debug label')}>
+            <Input.Switch checked={settings.debug} onCheckedChange={(checked) => (settings.debug = !!checked)} />
+          </ControlItemInput>
+
+          {settings.debug && (
+            <ControlItemInput title={t('settings debug textarea label', { ns: meta.id })}>
               <Input.TextArea
                 rows={5}
                 value={settings.typewriter}
                 onChange={({ target: { value } }) => (settings.typewriter = value)}
                 placeholder={t('settings debug placeholder')}
               />
-            </Input.Root>
-          ) : undefined
-        }
-      >
-        <Input.Switch checked={settings.debug} onCheckedChange={(checked) => (settings.debug = !!checked)} />
-      </DeprecatedFormInput>
-    </DeprecatedFormContainer>
+            </ControlItemInput>
+          )}
+        </ControlGroup>
+      </ControlSection>
+    </ControlPage>
   );
 };

package/src/components/Suggestions.stories.tsx

@@ -2,27 +2,19 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta } from '@storybook/react-vite';
-import { Match, Option, pipe, Schema } from 'effect';
+import * as Function from 'effect/Function';
+import * as Match from 'effect/Match';
+import * as Option from 'effect/Option';
+import * as Schema from 'effect/Schema';
 import React, { type FC, useEffect, useMemo, useState } from 'react';
 
-import {
-  Capabilities,
-  CollaborationActions,
-  IntentPlugin,
-  SettingsPlugin,
-  contributes,
-  createIntent,
-  useCapability,
-  useIntentDispatcher,
-} from '@dxos/app-framework';
+import { Capabilities, IntentPlugin, SettingsPlugin, useCapability, useIntentDispatcher } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Obj, Ref, Type } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
-import { DXN } from '@dxos/keys';
 import { ClientPlugin } from '@dxos/plugin-client';
+import { GraphPlugin } from '@dxos/plugin-graph';
 import { PreviewPlugin } from '@dxos/plugin-preview';
 import { SpacePlugin } from '@dxos/plugin-space';
 import { StorybookLayoutPlugin } from '@dxos/plugin-storybook-layout';
@@ -30,19 +22,21 @@ import { ThemePlugin } from '@dxos/plugin-theme';
 import { faker } from '@dxos/random';
 import { createDocAccessor, fullyQualifiedId, toCursorRange, useQueue, useSpace } from '@dxos/react-client/echo';
 import { IconButton, Toolbar } from '@dxos/react-ui';
-import { command, type EditorSelection, type Range, useTextEditor } from '@dxos/react-ui-editor';
+import { withTheme } from '@dxos/react-ui/testing';
+import { type EditorSelection, type Range, useTextEditor } from '@dxos/react-ui-editor';
 import { StackItem } from '@dxos/react-ui-stack';
 import { defaultTx } from '@dxos/react-ui-theme';
 import { DataType } from '@dxos/schema';
-import { withLayout } from '@dxos/storybook-utils';
+import { render } from '@dxos/storybook-utils';
 
-import { MarkdownContainer } from './MarkdownContainer';
-import { MarkdownPlugin } from '../MarkdownPlugin';
 import { MarkdownCapabilities } from '../capabilities';
+import { MarkdownPlugin } from '../MarkdownPlugin';
 import { meta } from '../meta';
 import { translations } from '../translations';
 import { Markdown } from '../types';
 
+import { MarkdownContainer } from './MarkdownContainer';
+
 faker.seed(1);
 
 const TestItem = Schema.Struct({
@@ -85,7 +79,7 @@ const TestChat: FC<{ doc: Markdown.Document; content: string }> = ({ doc, conten
 
     const text = await doc.content.load();
     const accessor = createDocAccessor(text, ['content']);
-    const cursor = pipe(
+    const cursor = Function.pipe(
       editorState.getState(fullyQualifiedId(doc))?.selection,
       Option.fromNullable,
       Option.map(selectionToRange),
@@ -98,14 +92,14 @@ const TestChat: FC<{ doc: Markdown.Document; content: string }> = ({ doc, conten
     //   const message = deref(ref);
     // }
 
-    void dispatch(
-      createIntent(CollaborationActions.InsertContent, {
-        target: doc as any as Type.Expando,
-        object: Ref.fromDXN(new DXN(DXN.kind.QUEUE, [...queue.dxn.parts, message.id])),
-        at: cursor,
-        label: 'Proposal',
-      }),
-    );
+    // void dispatch(
+    //   createIntent(CollaborationActions.InsertContent, {
+    //     target: doc as any as Type.Expando,
+    //     object: Ref.fromDXN(new DXN(DXN.kind.QUEUE, [...queue.dxn.parts, message.id])),
+    //     at: cursor,
+    //     label: 'Proposal',
+    //   }),
+    // );
   };
 
   return (
@@ -135,7 +129,7 @@ const DefaultStory = ({ document, chat }: { document: string; chat: string }) =>
         content: document.replaceAll(/\[(\w+)\]/g, (_, label) => {
           const obj = space.db.add(Obj.make(TestItem, { title: label, description: faker.lorem.paragraph() }));
           const dxn = Ref.make(obj).dxn.toString();
-          return `[${label}][${dxn}]`;
+          return `[${label}](${dxn})`;
         }),
       }),
     );
@@ -144,45 +138,52 @@ const DefaultStory = ({ document, chat }: { document: string; chat: string }) =>
   }, [space]);
 
   if (!space || !doc) {
-    return <></>;
+    return null;
   }
 
+  // TODO(burdon): Layout issue.
   return (
-    <>
+    <div className='grid grid-cols-2 bs-full overflow-hidden'>
       <MarkdownContainer id={doc.id} object={doc} settings={settings} editorStateStore={editorState} />
       <TestChat doc={doc} content={chat} />
-    </>
+    </div>
   );
 };
 
-// TODO(burdon): Make consistent.
 const storybook: Meta<typeof DefaultStory> = {
   title: 'plugins/plugin-markdown/Suggestions',
-  render: DefaultStory,
+  render: render(DefaultStory),
   decorators: [
+    withTheme,
     withPluginManager({
       plugins: [
-        ThemePlugin({ tx: defaultTx }),
-        StorybookLayoutPlugin(),
         ClientPlugin({
           types: [Markdown.Document, TestItem],
-          onClientInitialized: async (_, client) => {
+          onClientInitialized: async ({ client }) => {
             await client.halo.createIdentity();
           },
         }),
-        SpacePlugin(),
-        SettingsPlugin(),
+        SpacePlugin({}),
+        GraphPlugin(),
         IntentPlugin(),
+        SettingsPlugin(),
+
+        // UI
+        ThemePlugin({ tx: defaultTx }),
         MarkdownPlugin(),
         PreviewPlugin(),
+        StorybookLayoutPlugin({}),
       ],
-      capabilities: [contributes(MarkdownCapabilities.Extensions, [() => command()])],
+      // TODO(thure): `commandDialog` doesn’t do anything without a `renderDialog` option.
+      // capabilities: [contributes(MarkdownCapabilities.Extensions, [() => commandDialog()])],
     }),
-    withLayout({ fullscreen: true, classNames: 'grid grid-cols-2' }),
   ],
   parameters: {
+    layout: 'fullscreen',
+    controls: {
+      disable: true,
+    },
     translations,
-    controls: { disable: true },
   },
 };
 

package/src/components/Toolbar.stories.tsx

@@ -2,19 +2,20 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react-vite';
-import React, { type FC, useCallback, useState } from 'react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useCallback, useState } from 'react';
 
+import { createObject } from '@dxos/echo-db';
 import { invariant } from '@dxos/invariant';
 import { PublicKey } from '@dxos/keys';
 import { faker } from '@dxos/random';
 import { createDocAccessor } from '@dxos/react-client/echo';
 import { useThemeContext } from '@dxos/react-ui';
+import { withTheme } from '@dxos/react-ui/testing';
 import {
-  EditorToolbar,
   type Comment,
+  EditorToolbar,
+  type EditorViewMode,
   comments,
   createBasicExtensions,
   createDataExtensions,
@@ -25,19 +26,21 @@ import {
   formattingKeymap,
   translations,
   useComments,
+  useEditorToolbarState,
   useFormattingState,
   useTextEditor,
-  useEditorToolbarState,
-  type EditorViewMode,
 } from '@dxos/react-ui-editor';
 import { DataType } from '@dxos/schema';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 faker.seed(101);
 
-const DefaultStory: FC<{ content?: string }> = ({ content = '' }) => {
+type StoryProps = {
+  content?: string;
+};
+
+const DefaultStory = ({ content = '' }: StoryProps) => {
   const { themeMode } = useThemeContext();
-  const [text] = useState(DataType.makeText(content));
+  const [text] = useState(createObject(DataType.makeText(content)));
   const toolbarState = useEditorToolbarState({ viewMode: 'preview' });
   const formattingObserver = useFormattingState(toolbarState);
   const { parentRef, view } = useTextEditor(() => {
@@ -47,7 +50,7 @@ const DefaultStory: FC<{ content?: string }> = ({ content = '' }) => {
       extensions: [
         formattingObserver,
         createBasicExtensions({ readOnly: toolbarState.viewMode === 'readonly' }),
-        createMarkdownExtensions({ themeMode }),
+        createMarkdownExtensions(),
         createThemeExtensions({ themeMode, syntaxHighlighting: true, slots: editorSlots }),
         createDataExtensions({ id: text.id, text: createDocAccessor(text, ['content']) }),
         comments({
@@ -93,19 +96,22 @@ const content = [
   '',
 ].join('\n');
 
-const meta: Meta<typeof EditorToolbar> = {
+const meta = {
   title: 'plugins/plugin-markdown/Toolbar',
-  component: EditorToolbar,
-  render: DefaultStory as any,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
+  component: EditorToolbar as any,
+  render: DefaultStory,
+  decorators: [withTheme],
   parameters: {
+    layout: 'fullscreen',
     translations,
   },
-};
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-export const Default = {
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
   args: {
     content,
   },

package/src/components/index.ts

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

package/src/extensions.tsx

@@ -7,27 +7,30 @@ import React, { type AnchorHTMLAttributes, type ReactNode, useMemo } from 'react
 import { createRoot } from 'react-dom/client';
 
 import {
-  createIntent,
   LayoutAction,
   type PromiseIntentDispatcher,
+  createIntent,
   useCapabilities,
   useIntentDispatcher,
 } from '@dxos/app-framework';
 import { debounceAndThrottle } from '@dxos/async';
 import { invariant } from '@dxos/invariant';
-import { createDocAccessor, fullyQualifiedId, getSpace, type QueryResult } from '@dxos/react-client/echo';
+import { createDocAccessor, fullyQualifiedId, getSpace } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
 import { Icon, ThemeProvider } from '@dxos/react-ui';
 import { type SelectionManager } from '@dxos/react-ui-attention';
 import {
-  type AutocompleteResult,
+  Cursor,
   type EditorStateStore,
+  EditorView,
   type EditorViewMode,
   type Extension,
   InputModeExtensions,
+  type PreviewOptions,
+  type RenderCallback,
   createDataExtensions,
-  autocomplete,
   decorateMarkdown,
+  documentId,
   folding,
   formattingKeymap,
   linkTooltip,
@@ -35,15 +38,10 @@ import {
   preview,
   selectionState,
   typewriter,
-  type RenderCallback,
-  EditorView,
-  documentId,
-  Cursor,
-  type PreviewOptions,
 } from '@dxos/react-ui-editor';
 import { defaultTx } from '@dxos/react-ui-theme';
 import { type DataType } from '@dxos/schema';
-import { isNotFalsy } from '@dxos/util';
+import { isTruthy } from '@dxos/util';
 
 import { MarkdownCapabilities } from './capabilities';
 import { type Markdown } from './types';
@@ -54,7 +52,6 @@ type ExtensionsOptions = {
   id?: string;
   text?: DataType.Text;
   dispatch?: PromiseIntentDispatcher;
-  query?: QueryResult<Markdown.Document>;
   settings: Markdown.Settings;
   selectionManager?: SelectionManager;
   viewMode?: EditorViewMode;
@@ -160,7 +157,7 @@ export const useExtensions = ({
           }),
         baseExtensions,
         pluginExtensions,
-      ].filter(isNotFalsy),
+      ].filter(isTruthy),
     [baseExtensions, pluginExtensions, document, document?.content?.target, text, id, space, identity],
   );
 };
@@ -174,7 +171,6 @@ const createBaseExtensions = ({
   dispatch,
   settings,
   selectionManager,
-  query,
   viewMode,
   previewOptions,
 }: ExtensionsOptions): Extension[] => {
@@ -182,7 +178,7 @@ const createBaseExtensions = ({
     selectionManager && selectionChange(selectionManager),
     settings.editorInputMode && InputModeExtensions[settings.editorInputMode],
     settings.folding && folding(),
-  ].filter(isNotFalsy);
+  ].filter(isTruthy);
 
   //
   // Markdown
@@ -216,30 +212,6 @@ const createBaseExtensions = ({
     );
   }
 
-  //
-  // Autocomplete object links.
-  //
-  if (query) {
-    extensions.push(
-      autocomplete({
-        onSearch: (text: string) => {
-          // TODO(burdon): Specify filter (e.g., stack).
-          return query.objects
-            .map<AutocompleteResult | undefined>((object) =>
-              object.name?.length && object.id !== document?.id
-                ? {
-                    label: object.name,
-                    // TODO(burdon): Factor out URL builder.
-                    apply: `[${object.name}](/${fullyQualifiedId(object)})`,
-                  }
-                : undefined,
-            )
-            .filter(isNotFalsy);
-        },
-      }),
-    );
-  }
-
   if (settings.debug) {
     const items = settings.typewriter?.split(/[,\n]/) ?? '';
     if (items) {

package/src/functions/diff.ts

@@ -0,0 +1,37 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import * as Schema from 'effect/Schema';
+
+import { ArtifactId, applyDiffs } from '@dxos/assistant';
+import { createDocAccessor } from '@dxos/echo-db';
+import { DatabaseService, defineFunction } from '@dxos/functions';
+import { trim } from '@dxos/util';
+
+import { Markdown } from '../types';
+
+// TODO(wittjosiah): Reconcile with ThreadAction.AddProposal.
+export default defineFunction({
+  key: 'dxos.org/function/markdown/diff',
+  name: 'Diff',
+  description: trim`
+    Applies a set of diffs to the markdown document.
+  `,
+  inputSchema: Schema.Struct({
+    id: ArtifactId.annotations({
+      description: 'The ID of the markdown document.',
+    }),
+    diffs: Schema.Array(Schema.String).annotations({
+      description: 'The diffs to apply to the document.',
+    }),
+  }),
+  outputSchema: Schema.Void,
+  handler: Effect.fn(function* ({ data: { id, diffs } }) {
+    const object = yield* DatabaseService.resolve(ArtifactId.toDXN(id), Markdown.Document);
+    const content = yield* Effect.promise(() => object.content.load());
+    const accessor = createDocAccessor(content, ['content']);
+    applyDiffs(accessor, diffs);
+  }),
+});

package/src/functions/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export { default as diff } from './diff';
+export { default as open } from './open';

package/src/functions/open.ts

@@ -0,0 +1,32 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import * as Schema from 'effect/Schema';
+
+import { ArtifactId } from '@dxos/assistant';
+import { DatabaseService, defineFunction } from '@dxos/functions';
+
+import { Markdown } from '../types';
+
+export default defineFunction({
+  key: 'dxos.org/function/markdown/open',
+  name: 'Open',
+  description: 'Opens and reads the contents of a new markdown document.',
+  inputSchema: Schema.Struct({
+    id: ArtifactId.annotations({
+      description: 'The ID of the markdown document.',
+    }),
+  }),
+  outputSchema: Schema.Struct({
+    content: Schema.String,
+  }),
+  handler: Effect.fn(function* ({ data: { id } }) {
+    const object = yield* DatabaseService.resolve(ArtifactId.toDXN(id), Markdown.Document);
+    const { content } = yield* Effect.promise(() => object.content.load());
+    return {
+      content,
+    };
+  }),
+});

package/src/hooks/useSelectCurrentThread.tsx

@@ -3,10 +3,10 @@
 //
 
 import { EditorView } from '@codemirror/view';
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 import { useMemo } from 'react';
 
-import { createResolver, LayoutAction, useIntentResolver } from '@dxos/app-framework';
+import { LayoutAction, createResolver, useIntentResolver } from '@dxos/app-framework';
 import { invariant } from '@dxos/invariant';
 import { Cursor, setSelection } from '@dxos/react-ui-editor';
 
@@ -15,7 +15,7 @@ import { meta } from '../meta';
 /**
  * Handle scrolling and selection of the current thread in a markdown editor.
  */
-export const useSelectCurrentThread = (editorView: EditorView | undefined, documentId: string) => {
+export const useSelectCurrentThread = (editorView: EditorView | null, documentId: string) => {
   const scrollIntoViewResolver = useMemo(
     () =>
       createResolver({

package/src/index.ts

@@ -5,6 +5,8 @@
 export { MarkdownCapabilities } from './capabilities';
 export { MarkdownEvents } from './events';
 
-export * from './MarkdownPlugin';
 export * from './meta';
+export * from './types';
 export * from './util';
+
+export * from './MarkdownPlugin';