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

package/src/components/DocumentEditor.tsx

@@ -0,0 +1,137 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useEffect, useMemo } from 'react';
+
+import { useResolvePlugin, parseFileManagerPlugin, useIntentDispatcher } from '@dxos/app-framework';
+import { createDocAccessor, fullyQualifiedId, getSpace } from '@dxos/react-client/echo';
+import { useIdentity } from '@dxos/react-client/halo';
+import {
+  createDataExtensions,
+  listener,
+  localStorageStateStoreAdapter,
+  state,
+  type Extension,
+  type EditorSelectionState,
+} from '@dxos/react-ui-editor';
+
+import MarkdownEditor, { type MarkdownEditorProps } from './MarkdownEditor';
+import { createBaseExtensions } from '../extensions';
+import { type DocumentType, type MarkdownPluginState, type MarkdownSettingsProps } from '../types';
+import { getFallbackName, setFallbackName } from '../util';
+
+type DocumentEditorProps = {
+  document: DocumentType;
+  settings: MarkdownSettingsProps;
+} & Omit<MarkdownEditorProps, 'id' | 'inputMode' | 'toolbar' | 'extensions'> &
+  Pick<MarkdownPluginState, 'extensionProviders'>;
+
+/**
+ * Editor for a `DocumentType`.
+ */
+const DocumentEditor = ({
+  document: doc,
+  extensionProviders = [],
+  viewMode,
+  settings,
+  ...props
+}: DocumentEditorProps) => {
+  const space = getSpace(doc);
+  const identity = useIdentity();
+  const dispatch = useIntentDispatcher();
+
+  const baseExtensions = useMemo(() => {
+    // TODO(wittjosiah): Autocomplete is not working and this query is causing performance issues.
+    // const query = space?.db.query(Filter.schema(DocumentType));
+    // query?.subscribe();
+    return createBaseExtensions({
+      viewMode,
+      settings,
+      document: doc,
+      dispatch,
+      // query,
+    });
+  }, [doc, viewMode, dispatch, settings, settings.folding, settings.numberedHeadings]);
+
+  const providerExtensions = useMemo(
+    () =>
+      extensionProviders.reduce((acc: Extension[], provider) => {
+        const provided = typeof provider === 'function' ? provider({ document: doc }) : provider;
+        acc.push(...provided);
+        return acc;
+      }, []),
+    [extensionProviders],
+  );
+
+  const extensions = useMemo(
+    () => [
+      // NOTE: Data extensions must be first so that automerge is updated before other extensions compute their state.
+      createDataExtensions({
+        id: doc.id,
+        text: doc.content && createDocAccessor(doc.content, ['content']),
+        space,
+        identity,
+      }),
+      state(localStorageStateStoreAdapter),
+      listener({
+        onChange: (text) => {
+          setFallbackName(doc, text);
+        },
+      }),
+      providerExtensions,
+      baseExtensions,
+    ],
+    [doc, doc.content, space, baseExtensions, providerExtensions, identity],
+  );
+
+  const initialValue = useMemo(() => doc.content?.content, [doc.content]);
+
+  // 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 id = fullyQualifiedId(doc);
+  const { scrollTo, selection } = useMemo<EditorSelectionState>(
+    () => localStorageStateStoreAdapter.getState(id) ?? {},
+    [doc],
+  );
+
+  const fileManagerPlugin = useResolvePlugin(parseFileManagerPlugin);
+  const handleFileUpload = useMemo(() => {
+    if (space === undefined) {
+      return undefined;
+    }
+
+    if (fileManagerPlugin?.provides.file.upload === undefined) {
+      return undefined;
+    }
+
+    return async (file: File) => {
+      return fileManagerPlugin?.provides?.file?.upload?.(file, space);
+    };
+  }, [fileManagerPlugin, space]);
+
+  return (
+    <MarkdownEditor
+      id={id}
+      initialValue={initialValue}
+      extensions={extensions}
+      scrollTo={scrollTo}
+      selection={selection}
+      onFileUpload={handleFileUpload}
+      inputMode={settings.editorInputMode}
+      toolbar={settings.toolbar}
+      viewMode={viewMode}
+      {...props}
+    />
+  );
+};
+
+export default DocumentEditor;
+
+export type DocumentEditor = typeof DocumentEditor;

package/src/components/HeadingMenu.tsx

@@ -0,0 +1,46 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { DotsThreeVertical } from '@phosphor-icons/react';
+import React, { type PropsWithChildren, type FC } from 'react';
+
+import { Surface } from '@dxos/app-framework';
+import { Button, DropdownMenu } from '@dxos/react-ui';
+import { fineButtonDimensions, getSize } from '@dxos/react-ui-theme';
+
+import { type DocumentType, type MarkdownProperties } from '../types';
+
+// TODO(thure): This needs to be refactored into a graph node action.
+export const DocumentHeadingMenu: FC<{ document: DocumentType }> = ({ document }) => {
+  return <HeadingMenu properties={document} content={document.content?.content} />;
+};
+
+/**
+ * Menu for the layout heading.
+ */
+export const HeadingMenu = ({
+  content,
+  properties,
+}: PropsWithChildren<{
+  content: string | undefined;
+  properties: MarkdownProperties;
+}>) => {
+  return (
+    <DropdownMenu.Root modal={false}>
+      <DropdownMenu.Trigger asChild>
+        <Button variant='ghost' classNames={fineButtonDimensions}>
+          <DotsThreeVertical className={getSize(4)} />
+        </Button>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content sideOffset={8} classNames='z-10'>
+          <DropdownMenu.Viewport>
+            <Surface data={{ content, properties }} role='menuitem' />
+          </DropdownMenu.Viewport>
+          <DropdownMenu.Arrow />
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  );
+};

package/src/components/Layout.tsx

@@ -0,0 +1,27 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { type PropsWithChildren } from 'react';
+
+import { Main } from '@dxos/react-ui';
+import { editorWithToolbarLayout } from '@dxos/react-ui-editor';
+import { topbarBlockPaddingStart } from '@dxos/react-ui-theme';
+
+export const MainLayout = ({ children, toolbar }: PropsWithChildren<{ toolbar?: boolean }>) => {
+  return (
+    <Main.Content
+      bounce
+      data-toolbar={toolbar ? 'enabled' : 'disabled'}
+      classNames={[topbarBlockPaddingStart, editorWithToolbarLayout]}
+    >
+      {children}
+    </Main.Content>
+  );
+};
+
+// Used when the editor is embedded in another context (e.g., iframe) and has no topbar/sidebar/etc.
+// TODO(wittjosiah): What's the difference between this and Section/Card?
+export const EmbeddedLayout = ({ children }: PropsWithChildren) => {
+  return <Main.Content classNames='min-bs-[100dvh] grid p-0.5'>{children}</Main.Content>;
+};

package/src/components/MarkdownEditor.stories.tsx

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

package/src/components/MarkdownEditor.tsx

@@ -3,47 +3,61 @@
 //
 
 import { openSearchPanel } from '@codemirror/search';
-import { type EditorView } from '@codemirror/view';
+import { EditorView } from '@codemirror/view';
 import React, { useMemo, useEffect, useCallback } from 'react';
 
-import { type FileInfo, LayoutAction, type LayoutCoordinate, useIntentDispatcher } from '@dxos/app-framework';
+import {
+  type FileInfo,
+  LayoutAction,
+  type LayoutCoordinate,
+  useResolvePlugin,
+  useIntentResolver,
+  parseLayoutPlugin,
+  useIntentDispatcher,
+} from '@dxos/app-framework';
+import { parseAttentionPlugin } from '@dxos/plugin-attention';
 import { useThemeContext, useTranslation } from '@dxos/react-ui';
-import { useAttendableAttributes, useAttention } from '@dxos/react-ui-attention';
 import {
   type Action,
   type DNDOptions,
   type EditorViewMode,
   type EditorInputMode,
-  Toolbar,
   type UseTextEditorProps,
+  Toolbar,
   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 { isNotFalsy, nonNullable } from '@dxos/util';
+import { nonNullable } from '@dxos/util';
 
-import { useSelectCurrentThread } from '../hooks';
 import { MARKDOWN_PLUGIN } from '../meta';
-import { type MarkdownPluginState } from '../types';
+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',
+);
 
 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;
@@ -52,12 +66,6 @@ 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',
@@ -75,16 +83,14 @@ 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.
-  // TODO(burdon): Reconcile with DocumentEditor.useExtensions.
-  const providerExtensions = useMemo(
-    () => extensionProviders?.flatMap((provider) => provider({})).filter(nonNullable),
-    [extensionProviders],
-  );
+  const providerExtensions = useMemo(() => extensionProviders?.map((provider) => provider({})), [extensionProviders]);
 
   // TODO(Zan): Move these into thread plugin as well?
   const [commentsState, commentObserver] = useCommentState();
@@ -93,6 +99,36 @@ export const MarkdownEditor = ({
   }, [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];
@@ -125,16 +161,16 @@ export const MarkdownEditor = ({
           slots: { content: { className: editorContent } },
         }),
         editorGutter,
-        role !== 'section' && onFileUpload && dropFile({ onDrop: handleDrop }),
+        role !== 'section' && onFileUpload ? dropFile({ onDrop: handleDrop }) : [],
         providerExtensions,
         extensions,
-      ].filter(isNotFalsy),
+      ].filter(nonNullable),
       ...(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,
       }),
     }),
@@ -142,7 +178,6 @@ export const MarkdownEditor = ({
   );
 
   useTest(editorView);
-  useSelectCurrentThread(editorView, id);
 
   // Toolbar handler.
   const handleToolbarAction = useActionHandler(editorView);
@@ -170,24 +205,25 @@ export const MarkdownEditor = ({
       {...(role === 'section'
         ? { className: 'flex flex-col' }
         : {
-            className: 'contents',
-            // TODO(wittjosiah): Factor out to `useAttendableAttributes`?
-            ...(hasAttention && { 'aria-current': 'location' }),
-            ...attendableAttributes,
+            className: 'contents group/editor',
+            ...(isDirectlyAttended && { 'aria-current': 'location' }),
           })}
     >
       {toolbar && (
-        <div role='none' className='flex shrink-0 justify-center overflow-x-auto attention-surface'>
+        <div role='none' className={mx('flex shrink-0 justify-center overflow-x-auto', attentionFragment)}>
           <Toolbar.Root
             classNames={
               role === 'section'
                 ? [
                     textBlockWidth,
                     'z-[2] group-focus-within/section:visible',
-                    !hasAttention && 'invisible',
+                    !isDirectlyAttended && 'invisible',
                     sectionToolbarLayout,
                   ]
-                : [textBlockWidth]
+                : [
+                    textBlockWidth,
+                    'group-focus-within/editor:border-separator group-[[aria-current]]/editor:border-separator',
+                  ]
             }
             state={formattingState && { ...formattingState, ...commentsState }}
             onAction={handleAction}
@@ -211,8 +247,8 @@ export const MarkdownEditor = ({
             : mx(
                 'flex is-full bs-full overflow-hidden',
                 focusRing,
-                'focus-visible:ring-inset attention-surface',
-                'p-0.5', // TODO(burdon): Handle padding for focusRing consistently.
+                attentionFragment,
+                'focus-visible:ring-inset',
                 'data-[toolbar=disabled]:pbs-2 data-[toolbar=disabled]:row-span-2',
               )
         }
@@ -232,3 +268,5 @@ const useTest = (view?: EditorView) => {
     }
   }, [view]);
 };
+
+export default MarkdownEditor;

package/src/components/index.ts

@@ -2,8 +2,20 @@
 // Copyright 2023 DXOS.org
 //
 
-import React from 'react';
+import React, { type LazyExoticComponent } 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';
 
-export const MarkdownContainer = React.lazy(() => import('./MarkdownContainer'));
+// 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'));