@dxos/plugin-markdown 0.6.12 → 0.6.13-main.548ca8d

package/src/MarkdownPlugin.tsx

@@ -2,11 +2,10 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type IconProps, TextAa } from '@phosphor-icons/react';
-import React, { type Ref } from 'react';
+import { TextAa } from '@phosphor-icons/react';
+import React from 'react';
 
 import {
-  isObject,
   parseIntentPlugin,
   resolvePlugin,
   LayoutAction,
@@ -16,7 +15,6 @@ import {
 } from '@dxos/app-framework';
 import { create } from '@dxos/echo-schema';
 import { LocalStorageStore } from '@dxos/local-storage';
-import { log } from '@dxos/log';
 import { parseClientPlugin } from '@dxos/plugin-client';
 import { type ActionGroup, createExtension, isActionGroup } from '@dxos/plugin-graph';
 import { SpaceAction } from '@dxos/plugin-space';
@@ -34,12 +32,11 @@ import {
   EditorViewModes,
   translations as editorTranslations,
 } from '@dxos/react-ui-editor';
-import { isTileComponentProps } from '@dxos/react-ui-mosaic';
 
-import { type DocumentItemProps, DocumentCard, DocumentEditor, MarkdownEditor, MarkdownSettings } from './components';
+import { MarkdownContainer, MarkdownSettings } from './components';
 import meta, { MARKDOWN_PLUGIN } from './meta';
 import translations from './translations';
-import { DocumentType, TextType } from './types';
+import { DocumentType, isEditorModel, TextType } from './types';
 import {
   type MarkdownPluginProvides,
   type MarkdownSettingsProps,
@@ -48,19 +45,8 @@ import {
 } from './types';
 import { markdownExtensionPlugins, serializer } from './util';
 
-/**
- * Checks if an object conforms to the interface needed to render an editor.
- */
-const isEditorModel = (data: any): data is { id: string; text: string } => {
-  return (
-    data &&
-    typeof data === 'object' &&
-    'id' in data &&
-    typeof data.id === 'string' &&
-    'text' in data &&
-    typeof data.text === 'string'
-  );
-};
+// TODO(burdon): Normalize active/object.
+const getDoc = (object: any) => (object instanceof DocumentType ? object : undefined);
 
 export const MarkdownPlugin = (): PluginDefinition<MarkdownPluginProvides> => {
   const settings = new LocalStorageStore<MarkdownSettingsProps>(MARKDOWN_PLUGIN, {
@@ -72,13 +58,8 @@ export const MarkdownPlugin = (): PluginDefinition<MarkdownPluginProvides> => {
 
   const state = new LocalStorageStore<MarkdownPluginState>(MARKDOWN_PLUGIN, { extensionProviders: [], viewMode: {} });
 
-  const getViewMode = (id?: string) => {
-    return (id && state.values.viewMode[id]) || settings.values.defaultViewMode;
-  };
-
-  const setViewMode = (id: string, nextViewMode: EditorViewMode) => {
-    state.values.viewMode[id] = nextViewMode;
-  };
+  const getViewMode = (id: string) => (id && state.values.viewMode[id]) || settings.values.defaultViewMode;
+  const setViewMode = (id: string, viewMode: EditorViewMode) => (state.values.viewMode[id] = viewMode);
 
   return {
     meta,
@@ -109,7 +90,7 @@ export const MarkdownPlugin = (): PluginDefinition<MarkdownPluginProvides> => {
 
       markdownExtensionPlugins(plugins).forEach((plugin) => {
         const { extensions } = plugin.provides.markdown;
-        state.values.extensionProviders.push(extensions);
+        state.values.extensionProviders?.push(extensions);
       });
     },
     provides: {
@@ -117,10 +98,9 @@ export const MarkdownPlugin = (): PluginDefinition<MarkdownPluginProvides> => {
       metadata: {
         records: {
           [DocumentType.typename]: {
-            label: (object: any) => (object instanceof DocumentType ? object.name ?? object.fallbackName : undefined),
+            label: (object: any) => (object instanceof DocumentType ? object.name || object.fallbackName : undefined),
             placeholder: ['document title placeholder', { ns: MARKDOWN_PLUGIN }],
-            icon: (props: IconProps) => <TextAa {...props} />,
-            iconSymbol: 'ph--text-aa--regular',
+            icon: 'ph--text-aa--regular',
             graphProps: {
               managesAutofocus: true,
             },
@@ -134,6 +114,12 @@ export const MarkdownPlugin = (): PluginDefinition<MarkdownPluginProvides> => {
       echo: {
         schema: [DocumentType, TextType],
       },
+      space: {
+        onSpaceCreate: {
+          label: ['create document label', { ns: MARKDOWN_PLUGIN }],
+          action: MarkdownAction.CREATE,
+        },
+      },
       graph: {
         builder: (plugins) => {
           const client = resolvePlugin(plugins, parseClientPlugin)?.provides.client;
@@ -167,8 +153,7 @@ export const MarkdownPlugin = (): PluginDefinition<MarkdownPluginProvides> => {
                   },
                   properties: {
                     label: ['create document label', { ns: MARKDOWN_PLUGIN }],
-                    icon: (props: IconProps) => <TextAa {...props} />,
-                    iconSymbol: 'ph--text-aa--regular',
+                    icon: 'ph--text-aa--regular',
                     testId: 'markdownPlugin.createObject',
                   },
                 },
@@ -241,13 +226,10 @@ export const MarkdownPlugin = (): PluginDefinition<MarkdownPluginProvides> => {
         ],
       },
       thread: {
-        // TODO(Zan): How to better handle the type predicate?
         predicate: (obj) => obj instanceof DocumentType,
         createSort: (doc: DocumentType) => {
           const accessor = doc.content ? createDocAccessor(doc.content, ['content']) : undefined;
-
           if (!accessor) {
-            log.warn('No accessor found for document content.');
             return (_) => 0;
           }
 
@@ -256,75 +238,45 @@ export const MarkdownPlugin = (): PluginDefinition<MarkdownPluginProvides> => {
             return range?.start ?? Number.MAX_SAFE_INTEGER;
           };
 
-          return (anchorA: string, anchorB: string) => getStartPosition(anchorA) - getStartPosition(anchorB);
+          return (anchorA: string | undefined, anchorB: string | undefined): number => {
+            if (anchorA === undefined || anchorB === undefined) {
+              return 0;
+            }
+            const posA = getStartPosition(anchorA);
+            const posB = getStartPosition(anchorB);
+            return posA - posB;
+          };
         },
       },
       surface: {
-        component: ({ data, role, ...props }, forwardedRef) => {
-          const doc =
-            data.active instanceof DocumentType
-              ? data.active
-              : data.object instanceof DocumentType
-                ? data.object
-                : undefined;
-
+        component: ({ data, role }) => {
           switch (role) {
             case 'section':
             case 'article': {
-              if (doc && doc.content) {
-                return (
-                  <DocumentEditor
-                    role={role}
-                    coordinate={data.coordinate as LayoutCoordinate}
-                    document={doc}
-                    extensionProviders={state.values.extensionProviders}
-                    settings={settings.values}
-                    scrollPastEnd
-                    viewMode={getViewMode(fullyQualifiedId(doc))}
-                    onViewModeChange={setViewMode}
-                  />
-                );
-              } else if (isEditorModel(data.object)) {
-                return (
-                  <MarkdownEditor
-                    id={data.object.id}
-                    role={role}
-                    coordinate={data.coordinate as LayoutCoordinate}
-                    initialValue={data.object.text}
-                    extensionProviders={state.values.extensionProviders}
-                    inputMode={settings.values.editorInputMode}
-                    toolbar={settings.values.toolbar}
-                    scrollPastEnd
-                    viewMode={getViewMode(data.object.id)}
-                    onViewModeChange={setViewMode}
-                  />
-                );
-              }
-              break;
-            }
+              // TODO(burdon): Normalize types (from FilesPlugin).
+              const doc = getDoc(data.active) ?? getDoc(data.object);
+              const { id, object } = isEditorModel(data.object)
+                ? { id: data.object.id, object: data.object }
+                : doc
+                  ? { id: fullyQualifiedId(doc), object: doc }
+                  : {};
 
-            case 'card': {
-              if (
-                isObject(data.content) &&
-                typeof data.content.id === 'string' &&
-                data.content.object instanceof DocumentType
-              ) {
-                // isTileComponentProps is a type guard for these props.
-                // `props` will not pass this guard without transforming `data` into `item`.
-                const cardProps = {
-                  ...props,
-                  item: {
-                    id: data.content.id,
-                    object: data.content.object,
-                    color: typeof data.content.color === 'string' ? data.content.color : undefined,
-                  } as DocumentItemProps,
-                };
-
-                return isTileComponentProps(cardProps) ? (
-                  <DocumentCard {...cardProps} settings={settings.values} ref={forwardedRef as Ref<HTMLDivElement>} />
-                ) : null;
+              if (!id || !object) {
+                return null;
               }
-              break;
+
+              return (
+                <MarkdownContainer
+                  id={id}
+                  object={object}
+                  role={role}
+                  coordinate={data.coordinate as LayoutCoordinate}
+                  settings={settings.values}
+                  extensionProviders={state.values.extensionProviders}
+                  viewMode={getViewMode(id)}
+                  onViewModeChange={setViewMode}
+                />
+              );
             }
 
             case 'settings': {

package/src/components/MarkdownContainer.tsx

@@ -0,0 +1,108 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useEffect, useMemo } from 'react';
+
+import { useResolvePlugin, parseFileManagerPlugin } from '@dxos/app-framework';
+import { fullyQualifiedId, getSpace } from '@dxos/react-client/echo';
+import { localStorageStateStoreAdapter, type EditorSelectionState } from '@dxos/react-ui-editor';
+
+import { MarkdownEditor, type MarkdownEditorProps } from './MarkdownEditor';
+import { useExtensions } from '../extensions';
+import { DocumentType, type MarkdownSettingsProps } from '../types';
+import { getFallbackName } from '../util';
+
+export type MarkdownContainerProps = Pick<
+  MarkdownEditorProps,
+  'role' | 'coordinate' | 'extensionProviders' | 'viewMode' | 'onViewModeChange'
+> & {
+  id: string;
+  object: DocumentType | any;
+  settings: MarkdownSettingsProps;
+};
+
+// TODO(burdon): Factor out difference for ECHO and non-ECHO objects; i.e., single component.
+const MarkdownContainer = ({ role, id, object, settings, ...props }: MarkdownContainerProps) => {
+  const scrollPastEnd = role === 'article';
+  if (object instanceof DocumentType) {
+    return (
+      <DocumentEditor
+        id={fullyQualifiedId(object)}
+        document={object}
+        settings={settings}
+        scrollPastEnd={scrollPastEnd}
+        {...props}
+      />
+    );
+  } else {
+    return (
+      <MarkdownEditor
+        id={id}
+        initialValue={object.text}
+        toolbar={settings.toolbar}
+        scrollPastEnd={scrollPastEnd}
+        {...props}
+      />
+    );
+  }
+};
+
+type DocumentEditorProps = Omit<MarkdownContainerProps, 'object'> & { document: DocumentType } & Pick<
+    MarkdownEditorProps,
+    'id' | 'scrollPastEnd'
+  >;
+
+export const DocumentEditor = ({
+  id,
+  document: doc,
+  extensionProviders,
+  settings,
+  viewMode,
+  ...props
+}: DocumentEditorProps) => {
+  const space = getSpace(doc);
+  const initialValue = useMemo(() => doc.content?.content, [doc.content]);
+  const extensions = useExtensions({ extensionProviders, document: doc, settings, viewMode });
+
+  // Migrate gradually to `fallbackName`.
+  useEffect(() => {
+    if (!doc.fallbackName && doc.content?.content) {
+      doc.fallbackName = getFallbackName(doc.content.content);
+    }
+  }, [doc, doc.content]);
+
+  // Restore last selection and scroll point.
+  const { scrollTo, selection } = useMemo<EditorSelectionState>(
+    () => localStorageStateStoreAdapter.getState(id) ?? {},
+    [id, doc],
+  );
+
+  // File dragging.
+  const fileManagerPlugin = useResolvePlugin(parseFileManagerPlugin);
+  const handleFileUpload = useMemo(() => {
+    if (space === undefined || fileManagerPlugin?.provides.file.upload === undefined) {
+      return undefined;
+    }
+
+    // TODO(burdon): Re-order props: space, file.
+    return async (file: File) => fileManagerPlugin?.provides?.file?.upload?.(file, space);
+  }, [space, fileManagerPlugin]);
+
+  return (
+    <MarkdownEditor
+      id={id}
+      initialValue={initialValue}
+      extensions={extensions}
+      scrollTo={scrollTo}
+      selection={selection}
+      toolbar={settings.toolbar}
+      inputMode={settings.editorInputMode}
+      viewMode={viewMode}
+      onFileUpload={handleFileUpload}
+      {...props}
+    />
+  );
+};
+
+export default MarkdownContainer;

package/src/components/MarkdownEditor.stories.tsx

@@ -3,13 +3,15 @@
 //
 
 import '@dxos-theme';
+
 import React, { useMemo, type FC } from 'react';
 
 import { createDocAccessor, createEchoObject } from '@dxos/react-client/echo';
-import { automerge } from '@dxos/react-ui-editor';
+import { Main } from '@dxos/react-ui';
+import { editorWithToolbarLayout, automerge } from '@dxos/react-ui-editor';
+import { topbarBlockPaddingStart } from '@dxos/react-ui-theme';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { MainLayout } from './Layout';
 import { MarkdownEditor } from './MarkdownEditor';
 
 const Story: FC<{
@@ -20,9 +22,13 @@ const Story: FC<{
   const extensions = useMemo(() => [automerge(createDocAccessor(doc, ['content']))], [doc]);
 
   return (
-    <MainLayout toolbar={toolbar}>
+    <Main.Content
+      bounce
+      data-toolbar={toolbar ? 'enabled' : 'disabled'}
+      classNames={[topbarBlockPaddingStart, editorWithToolbarLayout]}
+    >
       <MarkdownEditor id='test' initialValue={doc.content} extensions={extensions} toolbar={toolbar} />
-    </MainLayout>
+    </Main.Content>
   );
 };
 
@@ -30,8 +36,8 @@ export default {
   title: 'plugin-markdown/EditorMain',
   component: MarkdownEditor,
   decorators: [withTheme, withLayout({ tooltips: true })],
-  render: Story,
   parameters: { layout: 'fullscreen' },
+  render: Story,
 };
 
 const content = Array.from({ length: 100 })

package/src/components/MarkdownEditor.tsx

@@ -3,61 +3,47 @@
 //
 
 import { openSearchPanel } from '@codemirror/search';
-import { EditorView } from '@codemirror/view';
+import { type EditorView } from '@codemirror/view';
 import React, { useMemo, useEffect, useCallback } from 'react';
 
-import {
-  type FileInfo,
-  LayoutAction,
-  type LayoutCoordinate,
-  useResolvePlugin,
-  useIntentResolver,
-  parseLayoutPlugin,
-  useIntentDispatcher,
-} from '@dxos/app-framework';
-import { parseAttentionPlugin } from '@dxos/plugin-attention';
+import { type FileInfo, LayoutAction, type LayoutCoordinate, useIntentDispatcher } from '@dxos/app-framework';
 import { useThemeContext, useTranslation } from '@dxos/react-ui';
+import { useAttendableAttributes, useAttention } from '@dxos/react-ui-attention';
 import {
   type Action,
   type DNDOptions,
   type EditorViewMode,
   type EditorInputMode,
-  type UseTextEditorProps,
   Toolbar,
+  type UseTextEditorProps,
   createBasicExtensions,
   createMarkdownExtensions,
   createThemeExtensions,
   dropFile,
+  editorContent,
+  editorGutter,
   processAction,
   useActionHandler,
   useCommentState,
   useCommentClickListener,
   useFormattingState,
   useTextEditor,
-  editorContent,
-  editorGutter,
-  Cursor,
-  setSelection,
 } from '@dxos/react-ui-editor';
 import { sectionToolbarLayout } from '@dxos/react-ui-stack';
 import { textBlockWidth, focusRing, mx } from '@dxos/react-ui-theme';
-import { nonNullable } from '@dxos/util';
+import { isNotFalsy, nonNullable } from '@dxos/util';
 
+import { useSelectCurrentThread } from '../hooks';
 import { MARKDOWN_PLUGIN } from '../meta';
-import type { MarkdownPluginState } from '../types';
-
-const attentionFragment = mx(
-  'group-focus-within/editor:attention-surface group-[[aria-current]]/editor:attention-surface',
-  'group-focus-within/editor:border-separator',
-);
+import { type MarkdownPluginState } from '../types';
 
 const DEFAULT_VIEW_MODE: EditorViewMode = 'preview';
 
 export type MarkdownEditorProps = {
   id: string;
+  role?: string;
   coordinate?: LayoutCoordinate;
   inputMode?: EditorInputMode;
-  role?: string;
   scrollPastEnd?: boolean;
   toolbar?: boolean;
   viewMode?: EditorViewMode;
@@ -66,6 +52,12 @@ export type MarkdownEditorProps = {
 } & Pick<UseTextEditorProps, 'initialValue' | 'scrollTo' | 'selection' | 'extensions'> &
   Partial<Pick<MarkdownPluginState, 'extensionProviders'>>;
 
+/**
+ * Base markdown editor component.
+ *
+ * This component provides all the features of the markdown editor that do no depend on ECHO.
+ * 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',
@@ -83,52 +75,27 @@ export const MarkdownEditor = ({
   const { t } = useTranslation(MARKDOWN_PLUGIN);
   const { themeMode } = useThemeContext();
   const dispatch = useIntentDispatcher();
-  const attentionPlugin = useResolvePlugin(parseAttentionPlugin);
-  const layoutPlugin = useResolvePlugin(parseLayoutPlugin);
-  const attended = Array.from(attentionPlugin?.provides.attention?.attended ?? []);
-  const isDirectlyAttended = attended.length === 1 && attended[0] === id;
   const [formattingState, formattingObserver] = useFormattingState();
+  const attendableAttributes = useAttendableAttributes(id);
+  const { hasAttention } = useAttention(id);
 
   // Extensions from other plugins.
-  const providerExtensions = useMemo(() => extensionProviders?.map((provider) => provider({})), [extensionProviders]);
+  // TODO(burdon): Reconcile with DocumentEditor.useExtensions.
+  const providerExtensions = useMemo(
+    () => extensionProviders?.flatMap((provider) => provider({})).filter(nonNullable),
+    [extensionProviders],
+  );
 
   // TODO(Zan): Move these into thread plugin as well?
   const [commentsState, commentObserver] = useCommentState();
   const onCommentClick = useCallback(() => {
-    void dispatch({ action: LayoutAction.SET_LAYOUT, data: { element: 'complementary', state: true } });
+    void dispatch({
+      action: LayoutAction.SET_LAYOUT,
+      data: { element: 'complementary', state: true },
+    });
   }, [dispatch]);
   const commentClickObserver = useCommentClickListener(onCommentClick);
 
-  // Focus the space that references the comment.
-  useIntentResolver(MARKDOWN_PLUGIN, ({ action, data }) => {
-    switch (action) {
-      // TODO(burdon): Use fully qualified ids everywhere.
-      case LayoutAction.SCROLL_INTO_VIEW: {
-        if (editorView && data?.id === id && data?.cursor) {
-          // TODO(burdon): We need typed intents.
-          const range = Cursor.getRangeFromCursor(editorView.state, data.cursor);
-          if (range) {
-            const selection = editorView.state.selection.main.from !== range.from ? { anchor: range.from } : undefined;
-            const effects = [
-              // NOTE: This does not use the DOM scrollIntoView function.
-              EditorView.scrollIntoView(range.from, { y: 'start', yMargin: 96 }),
-            ];
-            if (selection) {
-              // Update the editor selection to get bi-directional highlighting.
-              effects.push(setSelection.of({ current: id }));
-            }
-
-            editorView.dispatch({
-              effects,
-              selection: selection ? { anchor: range.from } : undefined,
-            });
-          }
-        }
-        break;
-      }
-    }
-  });
-
   // Drag files.
   const handleDrop: DNDOptions['onDrop'] = async (view, { files }) => {
     const file = files[0];
@@ -161,16 +128,16 @@ export const MarkdownEditor = ({
           slots: { content: { className: editorContent } },
         }),
         editorGutter,
-        role !== 'section' && onFileUpload ? dropFile({ onDrop: handleDrop }) : [],
+        role !== 'section' && onFileUpload && dropFile({ onDrop: handleDrop }),
         providerExtensions,
         extensions,
-      ].filter(nonNullable),
+      ].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,
+        // autoFocus: layoutPlugin?.provides.layout ? layoutPlugin?.provides.layout.scrollIntoView === id : true,
         moveToEndOfLine: true,
       }),
     }),
@@ -178,6 +145,7 @@ export const MarkdownEditor = ({
   );
 
   useTest(editorView);
+  useSelectCurrentThread(editorView, id);
 
   // Toolbar handler.
   const handleToolbarAction = useActionHandler(editorView);
@@ -205,25 +173,24 @@ export const MarkdownEditor = ({
       {...(role === 'section'
         ? { className: 'flex flex-col' }
         : {
-            className: 'contents group/editor',
-            ...(isDirectlyAttended && { 'aria-current': 'location' }),
+            className: 'contents',
+            // TODO(wittjosiah): Factor out to `useAttendableAttributes`?
+            ...(hasAttention && { 'aria-current': 'location' }),
+            ...attendableAttributes,
           })}
     >
       {toolbar && (
-        <div role='none' className={mx('flex shrink-0 justify-center overflow-x-auto', attentionFragment)}>
+        <div role='none' className='flex shrink-0 justify-center overflow-x-auto attention-surface'>
           <Toolbar.Root
             classNames={
               role === 'section'
                 ? [
                     textBlockWidth,
                     'z-[2] group-focus-within/section:visible',
-                    !isDirectlyAttended && 'invisible',
+                    !hasAttention && 'invisible',
                     sectionToolbarLayout,
                   ]
-                : [
-                    textBlockWidth,
-                    'group-focus-within/editor:border-separator group-[[aria-current]]/editor:border-separator',
-                  ]
+                : [textBlockWidth]
             }
             state={formattingState && { ...formattingState, ...commentsState }}
             onAction={handleAction}
@@ -247,8 +214,8 @@ export const MarkdownEditor = ({
             : mx(
                 'flex is-full bs-full overflow-hidden',
                 focusRing,
-                attentionFragment,
-                'focus-visible:ring-inset',
+                'focus-visible:ring-inset attention-surface',
+                'p-0.5', // TODO(burdon): Handle padding for focusRing consistently.
                 'data-[toolbar=disabled]:pbs-2 data-[toolbar=disabled]:row-span-2',
               )
         }
@@ -268,5 +235,3 @@ const useTest = (view?: EditorView) => {
     }
   }, [view]);
 };
-
-export default MarkdownEditor;

package/src/components/index.ts

@@ -2,20 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { type LazyExoticComponent } from 'react';
+import React from 'react';
 
-import { type DocumentEditor as DocumentEditorType } from './DocumentEditor';
-
-export { type DocumentCardProps, type DocumentItemProps } from './DocumentCard';
-
-export * from './DocumentCard';
-export * from './DocumentEditor';
-export * from './MarkdownEditor';
-export * from './HeadingMenu';
-export * from './Layout';
 export * from './MarkdownSettings';
 
-// Lazily load components for content surfaces.
-export const DocumentCard = React.lazy(() => import('./DocumentCard'));
-export const DocumentEditor: LazyExoticComponent<DocumentEditorType> = React.lazy(() => import('./DocumentEditor'));
-export const MarkdownEditor = React.lazy(() => import('./MarkdownEditor'));
+export const MarkdownContainer = React.lazy(() => import('./MarkdownContainer'));