@dxos/plugin-markdown 0.8.3-main.672df60 → 0.8.3-main.7f5a14c

package/src/components/MarkdownEditor/MarkdownEditor.tsx

@@ -3,33 +3,40 @@
 //
 
 import { type EditorView } from '@codemirror/view';
-import React, { useMemo, useEffect, useCallback } from 'react';
+import React, { useMemo, useEffect, useCallback, forwardRef, useImperativeHandle, useRef } from 'react';
 import { useDropzone } from 'react-dropzone';
 
 import { type FileInfo } from '@dxos/app-framework';
 import { invariant } from '@dxos/invariant';
-import { useThemeContext, useTranslation } from '@dxos/react-ui';
+import { toLocalizedString, useThemeContext, useTranslation } from '@dxos/react-ui';
 import {
-  type DNDOptions,
-  type EditorViewMode,
-  type EditorInputMode,
-  type EditorSelectionState,
-  type EditorStateStore,
-  EditorToolbar,
-  type UseTextEditorProps,
+  addLink,
   createBasicExtensions,
   createMarkdownExtensions,
   createThemeExtensions,
   dropFile,
-  editorSlots,
   editorGutter,
+  editorSlots,
+  EditorToolbar,
   processEditorPayload,
+  RefPopover,
   stackItemContentEditorClassNames,
+  type DNDOptions,
+  type EditorInputMode,
+  type EditorSelectionState,
+  type EditorStateStore,
+  type EditorToolbarActionGraphProps,
+  type EditorViewMode,
+  type CommandMenuGroup,
+  type UseTextEditorProps,
+  useEditorToolbarState,
   useFormattingState,
+  useCommandMenu,
   useTextEditor,
-  useEditorToolbarState,
-  addLink,
-  type EditorToolbarActionGraphProps,
+  filterItems,
+  coreSlashCommands,
+  CommandMenu,
+  linkSlashCommands,
 } from '@dxos/react-ui-editor';
 import { StackItem } from '@dxos/react-ui-stack';
 import { isNotFalsy, isNonNullable } from '@dxos/util';
@@ -43,12 +50,14 @@ export type MarkdownEditorProps = {
   role?: string;
   inputMode?: EditorInputMode;
   scrollPastEnd?: boolean;
+  slashCommandGroups?: CommandMenuGroup[];
   toolbar?: boolean;
   customActions?: EditorToolbarActionGraphProps['customActions'];
   // TODO(wittjosiah): Generalize custom toolbar actions (e.g. comment, upload, etc.)
   viewMode?: EditorViewMode;
   editorStateStore?: EditorStateStore;
   onViewModeChange?: (id: string, mode: EditorViewMode) => void;
+  onLinkQuery?: (query?: string) => Promise<CommandMenuGroup[]>;
   onFileUpload?: (file: File) => Promise<FileInfo | undefined>;
 } & Pick<UseTextEditorProps, 'initialValue' | 'extensions'> &
   Partial<Pick<MarkdownPluginState, 'extensionProviders'>>;
@@ -60,151 +69,194 @@ 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 = ({
-  id,
-  role = 'article',
-  initialValue,
-  extensions,
-  extensionProviders,
-  scrollPastEnd,
-  toolbar,
-  customActions,
-  viewMode,
-  editorStateStore,
-  onFileUpload,
-  onViewModeChange,
+  extensions: _extensions,
+  slashCommandGroups,
+  onLinkQuery,
+  ...props
 }: MarkdownEditorProps) => {
-  const { t } = useTranslation(MARKDOWN_PLUGIN);
-  const { themeMode } = useThemeContext();
-  const toolbarState = useEditorToolbarState({ viewMode });
-  const formattingObserver = useFormattingState(toolbarState);
-
-  // Restore last selection and scroll point.
-  const { scrollTo, selection } = useMemo<EditorSelectionState>(() => editorStateStore?.getState(id) ?? {}, [id]);
-
-  // Extensions from other plugins.
-  // TODO(burdon): Reconcile with DocumentEditor.useExtensions.
-  const providerExtensions = useMemo(
-    () => extensionProviders?.flatMap((provider) => provider({})).filter(isNonNullable),
-    [extensionProviders],
+  const { t } = useTranslation();
+  const viewRef = useRef<EditorView>();
+  const getGroups = useCallback(
+    (trigger: string, query?: string) => {
+      switch (trigger) {
+        case '@':
+          return onLinkQuery?.(query) ?? [];
+        case '/':
+        default:
+          return filterItems([coreSlashCommands, linkSlashCommands, ...(slashCommandGroups ?? [])], (item) =>
+            query ? toLocalizedString(item.label, t).toLowerCase().includes(query.toLowerCase()) : true,
+          );
+      }
+    },
+    [onLinkQuery, slashCommandGroups],
   );
+  const { commandMenu, groupsRef, currentItem, onSelect, ...refPopoverProps } = useCommandMenu({
+    viewRef,
+    getGroups,
+    trigger: onLinkQuery ? ['/', '@'] : '/',
+  });
+  const extensions = useMemo(() => [_extensions, commandMenu].filter(isNotFalsy), [_extensions, commandMenu]);
 
-  // TODO(wittjosiah): Factor out to file uploader plugin.
-  // Drag files.
-  const handleDrop: DNDOptions['onDrop'] = async (view, { files }) => {
-    const file = files[0];
-    const info = file && onFileUpload ? await onFileUpload(file) : undefined;
-    if (info) {
-      processEditorPayload(view, { type: 'image', data: info.url });
-    }
-  };
-
-  const {
-    parentRef,
-    view: editorView,
-    focusAttributes,
-  } = useTextEditor(
-    () => ({
+  return (
+    <RefPopover modal={false} {...refPopoverProps}>
+      <MarkdownEditorImpl ref={viewRef} {...props} extensions={extensions} />
+      <CommandMenu groups={groupsRef.current} currentItem={currentItem} onSelect={onSelect} />
+    </RefPopover>
+  );
+};
+
+const MarkdownEditorImpl = forwardRef<EditorView | undefined, MarkdownEditorProps>(
+  (
+    {
+      id,
+      role = 'article',
       initialValue,
-      extensions: [
-        formattingObserver,
-        createBasicExtensions({
-          readOnly: viewMode === 'readonly',
-          placeholder: t('editor placeholder'),
-          scrollPastEnd: role === 'section' ? false : scrollPastEnd,
+      extensions,
+      extensionProviders,
+      scrollPastEnd,
+      toolbar,
+      customActions,
+      viewMode,
+      editorStateStore,
+      onFileUpload,
+      onViewModeChange,
+    },
+    forwardedRef,
+  ) => {
+    const { t } = useTranslation(MARKDOWN_PLUGIN);
+    const { themeMode } = useThemeContext();
+    const toolbarState = useEditorToolbarState({ viewMode });
+    const formattingObserver = useFormattingState(toolbarState);
+
+    // Restore last selection and scroll point.
+    const { scrollTo, selection } = useMemo<EditorSelectionState>(() => editorStateStore?.getState(id) ?? {}, [id]);
+
+    // Extensions from other plugins.
+    // TODO(burdon): Reconcile with DocumentEditor.useExtensions.
+    const providerExtensions = useMemo(
+      () => extensionProviders?.flatMap((provider) => provider({})).filter(isNonNullable),
+      [extensionProviders],
+    );
+
+    // TODO(wittjosiah): Factor out to file uploader plugin.
+    // Drag files.
+    const handleDrop: DNDOptions['onDrop'] = async (view, { files }) => {
+      const file = files[0];
+      const info = file && onFileUpload ? await onFileUpload(file) : undefined;
+      if (info) {
+        processEditorPayload(view, { type: 'image', data: info.url });
+      }
+    };
+
+    const {
+      parentRef,
+      view: editorView,
+      focusAttributes,
+    } = useTextEditor(
+      () => ({
+        initialValue,
+        extensions: [
+          formattingObserver,
+          createBasicExtensions({
+            readOnly: viewMode === 'readonly',
+            placeholder: t('editor placeholder'),
+            scrollPastEnd: role === 'section' ? false : scrollPastEnd,
+          }),
+          createMarkdownExtensions({ themeMode }),
+          createThemeExtensions({ themeMode, syntaxHighlighting: true, slots: editorSlots }),
+          editorGutter,
+          role !== 'section' && onFileUpload && dropFile({ onDrop: handleDrop }),
+          providerExtensions,
+          extensions,
+        ].filter(isNotFalsy),
+        ...(role !== 'section' && {
+          id,
+          scrollTo,
+          selection,
+          // TODO(wittjosiah): Autofocus based on layout is racy.
+          // autoFocus: layoutPlugin?.provides.layout ? layoutPlugin?.provides.layout.scrollIntoView === id : true,
+          moveToEndOfLine: true,
         }),
-        createMarkdownExtensions({ themeMode }),
-        createThemeExtensions({ themeMode, syntaxHighlighting: true, slots: editorSlots }),
-        editorGutter,
-        role !== 'section' && onFileUpload && dropFile({ onDrop: handleDrop }),
-        providerExtensions,
-        extensions,
-      ].filter(isNotFalsy),
-      ...(role !== 'section' && {
-        id,
-        scrollTo,
-        selection,
-        // TODO(wittjosiah): Autofocus based on layout is racy.
-        // autoFocus: layoutPlugin?.provides.layout ? layoutPlugin?.provides.layout.scrollIntoView === id : true,
-        moveToEndOfLine: true,
       }),
-    }),
-    [id, formattingObserver, viewMode, themeMode, extensions, providerExtensions],
-  );
+      [id, formattingObserver, viewMode, themeMode, extensions, providerExtensions],
+    );
 
-  useTest(editorView);
-  useSelectCurrentThread(editorView, id);
+    useImperativeHandle(forwardedRef, () => editorView, [editorView]);
+    useTest(editorView);
+    useSelectCurrentThread(editorView, id);
 
-  // https://react-dropzone.js.org/#src
-  const { acceptedFiles, getInputProps, open } = useDropzone({
-    multiple: false,
-    noDrag: true,
-    accept: {
-      'image/*': ['.jpg', '.jpeg', '.png', '.gif'],
-    },
-  });
+    // https://react-dropzone.js.org/#src
+    const { acceptedFiles, getInputProps, open } = useDropzone({
+      multiple: false,
+      noDrag: true,
+      accept: {
+        'image/*': ['.jpg', '.jpeg', '.png', '.gif'],
+      },
+    });
 
-  useEffect(() => {
-    if (editorView && onFileUpload && acceptedFiles.length) {
-      requestAnimationFrame(async () => {
-        // NOTE: Clone file since react-dropzone patches in a non-standard `path` property, which confuses IPFS.
-        const f = acceptedFiles[0];
-        const file = new File([f], f.name, {
-          type: f.type,
-          lastModified: f.lastModified,
+    useEffect(() => {
+      if (editorView && onFileUpload && acceptedFiles.length) {
+        requestAnimationFrame(async () => {
+          // NOTE: Clone file since react-dropzone patches in a non-standard `path` property, which confuses IPFS.
+          const f = acceptedFiles[0];
+          const file = new File([f], f.name, {
+            type: f.type,
+            lastModified: f.lastModified,
+          });
+
+          const info = await onFileUpload(file);
+          if (info) {
+            addLink({ url: info.url, image: true })(editorView);
+          }
         });
+      }
+    }, [acceptedFiles, editorView, onFileUpload]);
 
-        const info = await onFileUpload(file);
-        if (info) {
-          addLink({ url: info.url, image: true })(editorView);
-        }
-      });
-    }
-  }, [acceptedFiles, editorView, onFileUpload]);
+    const getView = useCallback(() => {
+      invariant(editorView);
+      return editorView;
+    }, [editorView]);
 
-  const getView = useCallback(() => {
-    invariant(editorView);
-    return editorView;
-  }, [editorView]);
+    const handleViewModeChange = useCallback(
+      (mode: EditorViewMode) => onViewModeChange?.(id, mode),
+      [id, onViewModeChange],
+    );
 
-  const handleViewModeChange = useCallback(
-    (mode: EditorViewMode) => onViewModeChange?.(id, mode),
-    [id, onViewModeChange],
-  );
+    const handleImageUpload = useCallback(() => {
+      if (onFileUpload) {
+        open();
+      }
+    }, [onFileUpload]);
 
-  const handleImageUpload = useCallback(() => {
-    if (onFileUpload) {
-      open();
-    }
-  }, [onFileUpload]);
-
-  return (
-    <StackItem.Content toolbar={!!toolbar}>
-      {toolbar && (
-        <>
-          <EditorToolbar
-            attendableId={id}
-            role={role}
-            state={toolbarState}
-            customActions={customActions}
-            getView={getView}
-            image={handleImageUpload}
-            viewMode={handleViewModeChange}
-          />
-          <input {...getInputProps()} />
-        </>
-      )}
-      <div
-        role='none'
-        ref={parentRef}
-        data-testid='composer.markdownRoot'
-        data-toolbar={toolbar ? 'enabled' : 'disabled'}
-        className={stackItemContentEditorClassNames(role)}
-        data-popover-collision-boundary={true}
-        {...focusAttributes}
-      />
-    </StackItem.Content>
-  );
-};
+    return (
+      <StackItem.Content toolbar={!!toolbar}>
+        {toolbar && (
+          <>
+            <EditorToolbar
+              attendableId={id}
+              role={role}
+              state={toolbarState}
+              customActions={customActions}
+              getView={getView}
+              image={handleImageUpload}
+              viewMode={handleViewModeChange}
+            />
+            <input {...getInputProps()} />
+          </>
+        )}
+        <div
+          role='none'
+          ref={parentRef}
+          data-testid='composer.markdownRoot'
+          data-toolbar={toolbar ? 'enabled' : 'disabled'}
+          className={stackItemContentEditorClassNames(role)}
+          data-popover-collision-boundary={true}
+          {...focusAttributes}
+        />
+      </StackItem.Content>
+    );
+  },
+);
 
 // Expose editor view for playwright tests.
 // TODO(wittjosiah): Find a better way to expose this or find a way to limit it to test runs.

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

@@ -9,10 +9,9 @@ import React from 'react';
 
 import { IntentPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { create } from '@dxos/echo-schema';
+import { Obj, Ref } from '@dxos/echo';
 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';
@@ -29,7 +28,9 @@ const meta: Meta<typeof MarkdownPreview> = {
     return (
       <Popover.Root open>
         <Popover.Content>
-          <MarkdownPreview subject={subject} role='popover' />
+          <Popover.Viewport>
+            <MarkdownPreview subject={subject} role='popover' />
+          </Popover.Viewport>
           <Popover.Arrow />
         </Popover.Content>
         <Popover.Trigger>
@@ -54,10 +55,10 @@ const meta: Meta<typeof MarkdownPreview> = {
 export default meta;
 
 const data = (() => {
-  const document = create(DocumentType, {
+  const document = Obj.make(DocumentType, {
     name: faker.lorem.words(3),
-    content: makeRef(
-      create(DataType.Text, {
+    content: Ref.make(
+      Obj.make(DataType.Text, {
         content: faker.lorem.paragraphs(3),
       }),
     ),
@@ -68,6 +69,6 @@ const data = (() => {
 
 export const Default = {
   args: {
-    subject: create(DocumentType, data.document),
+    subject: Obj.make(DocumentType, data.document),
   },
 };

package/src/components/MarkdownPreview/MarkdownPreview.tsx

@@ -6,7 +6,7 @@ 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 { Obj } from '@dxos/echo';
 import { type PreviewProps } from '@dxos/plugin-preview';
 import { fullyQualifiedId } from '@dxos/react-client/echo';
 import { Button, Icon, useTranslation } from '@dxos/react-ui';
@@ -19,18 +19,18 @@ import { getAbstract, getFallbackName } from '../../util';
 
 // TODO(burdon): Factor out.
 const getTitle = (subject: DocumentType | DataType.Text, fallback: string) => {
-  if (isInstanceOf(DocumentType, subject)) {
+  if (Obj.instanceOf(DocumentType, subject)) {
     return subject.name ?? subject.fallbackName ?? getFallbackName(subject.content?.target?.content ?? fallback);
-  } else if (isInstanceOf(DataType.Text, subject)) {
+  } else if (Obj.instanceOf(DataType.Text, subject)) {
     return getFallbackName(subject.content);
   }
 };
 
 // TODO(burdon): Factor out.
 const getSnippet = (subject: DocumentType | DataType.Text, fallback: string) => {
-  if (isInstanceOf(DocumentType, subject)) {
+  if (Obj.instanceOf(DocumentType, subject)) {
     return getAbstract(subject.content?.target?.content ?? fallback);
-  } else if (isInstanceOf(DataType.Text, subject)) {
+  } else if (Obj.instanceOf(DataType.Text, subject)) {
     return getAbstract(subject.content);
   }
 };

package/src/components/Suggestions.stories.tsx

@@ -20,11 +20,9 @@ import {
   useIntentDispatcher,
 } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { Type } from '@dxos/echo';
-import { create, createQueueDxn, type Expando } from '@dxos/echo-schema';
+import { Obj, Ref, Type } from '@dxos/echo';
 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';
@@ -69,13 +67,13 @@ const TestChat: FC<{ doc: DocumentType; content: string }> = ({ doc, content })
   const { editorState } = useCapability(MarkdownCapabilities.State);
 
   const space = useSpace();
-  const queueDxn = useMemo(() => space && createQueueDxn(space.id), [space]);
+  const queueDxn = useMemo(() => space && space.queues.create().dxn, [space]);
   const queue = useQueue<Message>(queueDxn);
 
   const handleInsert = async () => {
     invariant(space);
     invariant(queue);
-    queue.append([create(Message, { role: 'assistant', content: [{ type: 'text', text: 'Hello' }] })]);
+    queue.append([Obj.make(Message, { role: 'assistant', content: [{ type: 'text', text: 'Hello' }] })]);
     const message = queue.objects.at(-1);
     invariant(message);
 
@@ -96,8 +94,8 @@ const TestChat: FC<{ doc: DocumentType; content: string }> = ({ doc, content })
 
     void dispatch(
       createIntent(CollaborationActions.InsertContent, {
-        target: doc as any as Expando, // TODO(burdon): Common base type.
-        object: refFromDXN(new DXN(DXN.kind.QUEUE, [...queue.dxn.parts, message.id])),
+        target: doc as any as Type.Expando,
+        object: Ref.fromDXN(new DXN(DXN.kind.QUEUE, [...queue.dxn.parts, message.id])),
         at: cursor,
         label: 'Proposal',
       }),
@@ -131,8 +129,8 @@ const DefaultStory = ({ document, chat }: { document: string; chat: string }) =>
 
         // Create links.
         content: document.replaceAll(/\[(\w+)\]/g, (_, label) => {
-          const obj = space.db.add(live(TestItem, { title: label, description: faker.lorem.paragraph() }));
-          const dxn = makeRef(obj).dxn.toString();
+          const obj = space.db.add(Obj.make(TestItem, { title: label, description: faker.lorem.paragraph() }));
+          const dxn = Ref.make(obj).dxn.toString();
           return `[${label}][${dxn}]`;
         }),
       }),

package/src/components/Toolbar.stories.tsx

@@ -7,11 +7,11 @@ import '@dxos-theme';
 import { type Meta } from '@storybook/react';
 import React, { type FC, useCallback, useState } from 'react';
 
+import { Obj } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
 import { PublicKey } from '@dxos/keys';
-import { live } from '@dxos/live-object';
 import { faker } from '@dxos/random';
-import { createDocAccessor, createObject } from '@dxos/react-client/echo';
+import { createDocAccessor } from '@dxos/react-client/echo';
 import { useThemeContext } from '@dxos/react-ui';
 import {
   EditorToolbar,
@@ -38,7 +38,7 @@ faker.seed(101);
 
 const DefaultStory: FC<{ content?: string }> = ({ content = '' }) => {
   const { themeMode } = useThemeContext();
-  const [text] = useState(createObject(live(DataType.Text, { content })));
+  const [text] = useState(Obj.make(DataType.Text, { content }));
   const toolbarState = useEditorToolbarState({ viewMode: 'preview' });
   const formattingObserver = useFormattingState(toolbarState);
   const { parentRef, view } = useTextEditor(() => {

package/src/types/schema.ts

@@ -4,9 +4,8 @@
 
 import { Schema } from 'effect';
 
-import { Type, Ref } from '@dxos/echo';
+import { Obj, Ref, Type } from '@dxos/echo';
 import { LabelAnnotation } from '@dxos/echo-schema';
-import { live } from '@dxos/live-object';
 import { DataType } from '@dxos/schema';
 
 export const DocumentSchema = Schema.Struct({
@@ -25,7 +24,7 @@ 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: Ref.make(live(DataType.Text, { content })) });
+  Obj.make(DocumentType, { name, content: Ref.make(Obj.make(DataType.Text, { content })) });
 
 /**
  * Checks if an object conforms to the interface needed to render an editor.

package/src/util.tsx

@@ -3,14 +3,14 @@
 //
 
 import { debounce } from '@dxos/async';
+import { Obj, Ref } from '@dxos/echo';
 import { type TypedObjectSerializer } from '@dxos/plugin-space/types';
-import { live, createObject, isEchoObject, loadObjectReferences, Ref } from '@dxos/react-client/echo';
 import { DataType } from '@dxos/schema';
 
 import { DocumentType, type MarkdownProperties } from './types';
 
 export const isMarkdownProperties = (data: unknown): data is MarkdownProperties =>
-  (isEchoObject(data) as boolean)
+  (Obj.isObject(data) as boolean)
     ? true
     : data && typeof data === 'object'
       ? 'title' in data && typeof data.title === 'string'
@@ -35,14 +35,12 @@ export const setFallbackName = debounce((doc: DocumentType, content: string) =>
 
 export const serializer: TypedObjectSerializer<DocumentType> = {
   serialize: async ({ object }): Promise<string> => {
-    const content = await loadObjectReferences(object, (doc) => doc.content);
-    return JSON.stringify({ name: object.name, fallbackName: object.fallbackName, content: content.target?.content });
+    const { content } = await object.content.load();
+    return JSON.stringify({ name: object.name, fallbackName: object.fallbackName, content });
   },
 
   deserialize: async ({ content: serialized }) => {
     const { name, fallbackName, content } = JSON.parse(serialized);
-    return createObject(
-      live(DocumentType, { name, fallbackName, content: Ref.make(live(DataType.Text, { content })) }),
-    );
+    return Obj.make(DocumentType, { name, fallbackName, content: Ref.make(Obj.make(DataType.Text, { content })) });
   },
 };