@dxos/plugin-markdown 0.6.12-main.f9d0246 → 0.6.12-staging.e11e696

package/src/MarkdownPlugin.tsx

@@ -3,10 +3,9 @@
 //
 
 import { TextAa } from '@phosphor-icons/react';
-import React, { type Ref } from 'react';
+import React from 'react';
 
 import {
-  isObject,
   parseIntentPlugin,
   resolvePlugin,
   LayoutAction,
@@ -33,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,
@@ -47,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, {
@@ -71,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,
@@ -108,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: {
@@ -267,71 +249,34 @@ export const MarkdownPlugin = (): PluginDefinition<MarkdownPluginProvides> => {
         },
       },
       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;
-            }
-
-            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,
-                };
+              // 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 }
+                  : {};
 
-                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

@@ -6,35 +6,28 @@ import { openSearchPanel } from '@codemirror/search';
 import { type EditorView } from '@codemirror/view';
 import React, { useMemo, useEffect, useCallback } from 'react';
 
-import {
-  type FileInfo,
-  LayoutAction,
-  type LayoutCoordinate,
-  useResolvePlugin,
-  parseLayoutPlugin,
-  useIntentDispatcher,
-} from '@dxos/app-framework';
+import { type FileInfo, LayoutAction, type LayoutCoordinate, useIntentDispatcher } from '@dxos/app-framework';
 import { useThemeContext, useTranslation } from '@dxos/react-ui';
-import { useIsDirectlyAttended } from '@dxos/react-ui-attention';
+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,
 } from '@dxos/react-ui-editor';
 import { sectionToolbarLayout } from '@dxos/react-ui-stack';
 import { textBlockWidth, focusRing, mx } from '@dxos/react-ui-theme';
@@ -44,19 +37,13 @@ import { useSelectCurrentThread } from '../hooks';
 import { MARKDOWN_PLUGIN } from '../meta';
 import { type MarkdownPluginState } from '../types';
 
-// TODO(Zan): Factor into a shared location.
-const attentionFragment = mx(
-  'group-focus-within/editor:attention-surface group-[[aria-current]]/editor:attention-surface',
-  'group-focus-within/editor:border-separator',
-);
-
 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;
@@ -65,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',
@@ -82,13 +75,13 @@ export const MarkdownEditor = ({
   const { t } = useTranslation(MARKDOWN_PLUGIN);
   const { themeMode } = useThemeContext();
   const dispatch = useIntentDispatcher();
-  const layoutPlugin = useResolvePlugin(parseLayoutPlugin);
   const [formattingState, formattingObserver] = useFormattingState();
-  const isDirectlyAttended = useIsDirectlyAttended(id);
+  const attendableAttributes = useAttendableAttributes(id);
+  const { hasAttention } = useAttention(id);
 
   // Extensions from other plugins.
+  // TODO(burdon): Reconcile with DocumentEditor.useExtensions.
   const providerExtensions = useMemo(
-    // TODO(burdon): Must pass object to provider.
     () => extensionProviders?.flatMap((provider) => provider({})).filter(nonNullable),
     [extensionProviders],
   );
@@ -141,7 +134,7 @@ export const MarkdownEditor = ({
         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,
       }),
     }),
@@ -177,25 +170,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}
@@ -219,8 +211,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',
               )
         }
@@ -240,5 +232,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'));