@dxos/plugin-markdown 0.8.3 → 0.8.4-main.1da679c

package/src/components/MarkdownEditor/MarkdownEditor.tsx

@@ -3,26 +3,26 @@
 //
 
 import { type EditorView } from '@codemirror/view';
-import React, { forwardRef, useMemo, useEffect, useCallback, useImperativeHandle, useRef } from 'react';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import { useDropzone } from 'react-dropzone';
 
 import { type FileInfo } from '@dxos/app-framework';
 import { invariant } from '@dxos/invariant';
 import { toLocalizedString, useThemeContext, useTranslation } from '@dxos/react-ui';
 import {
-  CommandMenu,
   type CommandMenuGroup,
+  CommandMenuProvider,
   type DNDOptions,
+  Domino,
   type EditorInputMode,
   type EditorSelectionState,
   type EditorStateStore,
   EditorToolbar,
   type EditorToolbarActionGraphProps,
   type EditorViewMode,
-  RefPopover,
+  type UseCommandMenuOptions,
   type UseTextEditorProps,
   addLink,
-  createElement,
   coreSlashCommands,
   createBasicExtensions,
   createMarkdownExtensions,
@@ -34,26 +34,25 @@ import {
   linkSlashCommands,
   processEditorPayload,
   stackItemContentEditorClassNames,
+  useCommandMenu,
   useEditorToolbarState,
   useFormattingState,
   useTextEditor,
-  useCommandMenu,
-  type UseCommandMenuOptions,
 } from '@dxos/react-ui-editor';
 import { StackItem } from '@dxos/react-ui-stack';
-import { isNotFalsy, isNonNullable } from '@dxos/util';
+import { isNonNullable, isNotFalsy } from '@dxos/util';
 
 import { useSelectCurrentThread } from '../../hooks';
-import { MARKDOWN_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 import { type MarkdownPluginState } from '../../types';
 
 export type MarkdownEditorProps = {
   id: string;
   role?: string;
+  toolbar?: boolean;
   inputMode?: EditorInputMode;
   scrollPastEnd?: boolean;
   slashCommandGroups?: CommandMenuGroup[];
-  toolbar?: boolean;
   customActions?: EditorToolbarActionGraphProps['customActions'];
   // TODO(wittjosiah): Generalize custom toolbar actions (e.g. comment, upload, etc.)
   viewMode?: EditorViewMode;
@@ -70,7 +69,7 @@ export type MarkdownEditorProps = {
  * This allows it to be used as a common editor for markdown content on arbitrary backends (e.g. files).
  */
 export const MarkdownEditor = ({
-  extensions: _extensions,
+  extensions: extensionsParam,
   slashCommandGroups,
   onLinkQuery,
   ...props
@@ -100,32 +99,30 @@ export const MarkdownEditor = ({
       trigger,
       placeholder: {
         delay: 3_000,
-        content: () => {
-          return createElement('div', undefined, [
-            createElement('span', { text: 'Press' }),
-            ...trigger.map((text) =>
-              createElement('span', {
-                className: 'border border-separator rounded-sm mx-1 px-1.5 pt-[1px] pb-[2px]',
-                text,
-              }),
-            ),
-            createElement('span', { text: 'for commands.' }),
-          ]);
-        },
+        content: () =>
+          Domino.of('div')
+            .child(
+              Domino.of('span').text('Press'),
+              ...trigger.map((text) =>
+                Domino.of('span')
+                  .classNames('border border-separator rounded-sm mx-1 px-1.5 pt-[1px] pb-[2px]')
+                  .text(text),
+              ),
+              Domino.of('span').text('for commands.'),
+            )
+            .build(),
       },
       getMenu,
     };
   }, [getMenu]);
 
-  const { commandMenu, groupsRef, currentItem, onSelect, ...refPopoverProps } = useCommandMenu(options);
-
-  const extensions = useMemo(() => [_extensions, commandMenu].filter(isNotFalsy), [_extensions, commandMenu]);
+  const { commandMenu, groupsRef, ...commandMenuProps } = useCommandMenu(options);
+  const extensions = useMemo(() => [extensionsParam, commandMenu].filter(isNotFalsy), [extensionsParam, commandMenu]);
 
   return (
-    <RefPopover modal={false} {...refPopoverProps}>
+    <CommandMenuProvider groups={groupsRef.current} {...commandMenuProps}>
       <MarkdownEditorImpl ref={viewRef} {...props} extensions={extensions} />
-      <CommandMenu groups={groupsRef.current} currentItem={currentItem} onSelect={onSelect} />
-    </RefPopover>
+    </CommandMenuProvider>
   );
 };
 
@@ -147,7 +144,7 @@ const MarkdownEditorImpl = forwardRef<EditorView | undefined, MarkdownEditorProp
     },
     forwardedRef,
   ) => {
-    const { t } = useTranslation(MARKDOWN_PLUGIN);
+    const { t } = useTranslation(meta.id);
     const { themeMode } = useThemeContext();
     const toolbarState = useEditorToolbarState({ viewMode });
     const formattingObserver = useFormattingState(toolbarState);
@@ -185,8 +182,9 @@ const MarkdownEditorImpl = forwardRef<EditorView | undefined, MarkdownEditorProp
             readOnly: viewMode === 'readonly',
             placeholder: t('editor placeholder'),
             scrollPastEnd: role === 'section' ? false : scrollPastEnd,
+            search: true,
           }),
-          createMarkdownExtensions({ themeMode }),
+          createMarkdownExtensions(),
           createThemeExtensions({ themeMode, syntaxHighlighting: true, slots: editorSlots }),
           editorGutter,
           role !== 'section' && onFileUpload && dropFile({ onDrop: handleDrop }),

package/src/components/MarkdownSettings/MarkdownSettings.tsx

@@ -6,100 +6,103 @@ 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 { MARKDOWN_PLUGIN } from '../../meta';
-import { type MarkdownSettingsProps } from '../../types';
+import { meta } from '../../meta';
+import { type Markdown } from '../../types';
 
-export const MarkdownSettings = ({ settings }: { settings: MarkdownSettingsProps }) => {
-  const { t } = useTranslation(MARKDOWN_PLUGIN);
+export const MarkdownSettings = ({ settings }: { settings: Markdown.Settings }) => {
+  const { t } = useTranslation(meta.id);
 
   // 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

@@ -4,25 +4,21 @@
 
 import '@dxos-theme';
 
-import { type Meta } from '@storybook/react';
-import { Match, Option, pipe, Schema } from 'effect';
+import { type Meta } from '@storybook/react-vite';
+import { Match, Option, Schema, pipe } from 'effect';
 import React, { type FC, useEffect, useMemo, useState } from 'react';
 
-import { Message } from '@dxos/ai';
 import {
   Capabilities,
-  CollaborationActions,
   IntentPlugin,
   SettingsPlugin,
   contributes,
-  createIntent,
   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 { PreviewPlugin } from '@dxos/plugin-preview';
 import { SpacePlugin } from '@dxos/plugin-space';
@@ -31,17 +27,19 @@ 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 { type EditorSelection, type Range, command, 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 MarkdownContainer from './MarkdownContainer';
-import { MarkdownPlugin } from '../MarkdownPlugin';
 import { MarkdownCapabilities } from '../capabilities';
-import { MARKDOWN_PLUGIN } from '../meta';
-import translations from '../translations';
-import { createDocument, DocumentType, type MarkdownSettingsProps } from '../types';
+import { MarkdownPlugin } from '../MarkdownPlugin';
+import { meta } from '../meta';
+import { translations } from '../translations';
+import { Markdown } from '../types';
+
+import { MarkdownContainer } from './MarkdownContainer';
 
 faker.seed(1);
 
@@ -61,19 +59,25 @@ const TestItem = Schema.Struct({
   }),
 );
 
-const TestChat: FC<{ doc: DocumentType; content: string }> = ({ doc, content }) => {
+const TestChat: FC<{ doc: Markdown.Document; content: string }> = ({ doc, content }) => {
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const { parentRef } = useTextEditor({ initialValue: content });
   const { editorState } = useCapability(MarkdownCapabilities.State);
 
   const space = useSpace();
   const queueDxn = useMemo(() => space && space.queues.create().dxn, [space]);
-  const queue = useQueue<Message>(queueDxn);
+  const queue = useQueue<DataType.Message>(queueDxn);
 
   const handleInsert = async () => {
     invariant(space);
     invariant(queue);
-    await queue.append([Obj.make(Message, { role: 'assistant', content: [{ type: 'text', text: 'Hello' }] })]);
+    await queue.append([
+      Obj.make(DataType.Message, {
+        created: new Date().toISOString(),
+        sender: { role: 'assistant' },
+        blocks: [{ _tag: 'text', text: 'Hello' }],
+      }),
+    ]);
     const message = queue.objects.at(-1);
     invariant(message);
 
@@ -92,14 +96,14 @@ const TestChat: FC<{ doc: DocumentType; content: string }> = ({ doc, content })
     //   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 (
@@ -114,8 +118,8 @@ const TestChat: FC<{ doc: DocumentType; content: string }> = ({ doc, content })
 
 const DefaultStory = ({ document, chat }: { document: string; chat: string }) => {
   const space = useSpace();
-  const [doc, setDoc] = useState<DocumentType>();
-  const settings = useCapability(Capabilities.SettingsStore).getStore<MarkdownSettingsProps>(MARKDOWN_PLUGIN)!.value;
+  const [doc, setDoc] = useState<Markdown.Document>();
+  const settings = useCapability(Capabilities.SettingsStore).getStore<Markdown.Settings>(meta.id)!.value;
   const { editorState } = useCapability(MarkdownCapabilities.State);
 
   useEffect(() => {
@@ -124,14 +128,12 @@ const DefaultStory = ({ document, chat }: { document: string; chat: string }) =>
     }
 
     const doc = space.db.add(
-      createDocument({
+      Markdown.makeDocument({
         name: 'Test',
-
-        // Create links.
         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})`;
         }),
       }),
     );
@@ -151,7 +153,8 @@ const DefaultStory = ({ document, chat }: { document: string; chat: string }) =>
   );
 };
 
-const meta: Meta<typeof DefaultStory> = {
+// TODO(burdon): Make consistent.
+const storybook: Meta<typeof DefaultStory> = {
   title: 'plugins/plugin-markdown/Suggestions',
   render: DefaultStory,
   decorators: [
@@ -160,8 +163,8 @@ const meta: Meta<typeof DefaultStory> = {
         ThemePlugin({ tx: defaultTx }),
         StorybookLayoutPlugin(),
         ClientPlugin({
-          types: [DocumentType, TestItem],
-          onClientInitialized: async (_, client) => {
+          types: [Markdown.Document, TestItem],
+          onClientInitialized: async ({ client }) => {
             await client.halo.createIdentity();
           },
         }),
@@ -181,7 +184,7 @@ const meta: Meta<typeof DefaultStory> = {
   },
 };
 
-export default meta;
+export default storybook;
 
 type Story = Meta<typeof DefaultStory>;
 

package/src/components/Toolbar.stories.tsx

@@ -4,18 +4,18 @@
 
 import '@dxos-theme';
 
-import { type Meta } from '@storybook/react';
-import React, { type FC, useCallback, useState } from 'react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useCallback, useState } from 'react';
 
-import { Obj } from '@dxos/echo';
 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 {
-  EditorToolbar,
   type Comment,
+  EditorToolbar,
+  type EditorViewMode,
   comments,
   createBasicExtensions,
   createDataExtensions,
@@ -26,19 +26,22 @@ 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(Obj.make(DataType.Text, { content }));
+  const [text] = useState(DataType.makeText(content));
   const toolbarState = useEditorToolbarState({ viewMode: 'preview' });
   const formattingObserver = useFormattingState(toolbarState);
   const { parentRef, view } = useTextEditor(() => {
@@ -48,7 +51,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({
@@ -94,19 +97,21 @@ const content = [
   '',
 ].join('\n');
 
-const meta: Meta<typeof EditorToolbar> = {
+const meta = {
   title: 'plugins/plugin-markdown/Toolbar',
-  component: EditorToolbar,
-  render: DefaultStory as any,
+  component: EditorToolbar as any,
+  render: DefaultStory,
   decorators: [withTheme, withLayout({ fullscreen: true })],
   parameters: {
     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/events.ts

@@ -4,8 +4,8 @@
 
 import { Events } from '@dxos/app-framework';
 
-import { MARKDOWN_PLUGIN } from './meta';
+import { meta } from './meta';
 
 export namespace MarkdownEvents {
-  export const SetupExtensions = Events.createStateEvent(`${MARKDOWN_PLUGIN}/setup-extensions`);
+  export const SetupExtensions = Events.createStateEvent(`${meta.id}/event/setup-extensions`);
 }