@dxos/plugin-markdown 0.8.4-main.dedc0f3 → 0.8.4-main.e8ec1fe

package/src/components/MarkdownEditor/MarkdownEditorToolbar.tsx

@@ -0,0 +1,63 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type EditorView } from '@codemirror/view';
+import React, { useCallback, useState } from 'react';
+
+import { type FileInfo } from '@dxos/app-framework';
+import { invariant } from '@dxos/invariant';
+import { type ThemedClassName } from '@dxos/react-ui';
+import { EditorToolbar, type EditorToolbarProps, type EditorViewMode } from '@dxos/react-ui-editor';
+
+import { FileUpload, type FileUploadAction } from './FileUpload';
+
+export type MarkdownEditorToolbarProps = ThemedClassName<
+  {
+    id: string;
+    editorView?: EditorView;
+    onFileUpload?: (file: File) => Promise<FileInfo | undefined>;
+  } & Pick<EditorToolbarProps, 'role' | 'state' | 'customActions' | 'onViewModeChange'>
+>;
+
+export const MarkdownEditorToolbar = ({
+  classNames,
+  id,
+  role,
+  state,
+  editorView,
+  customActions,
+  onFileUpload,
+  onViewModeChange,
+}: MarkdownEditorToolbarProps) => {
+  const [upload, setUpload] = useState<FileUploadAction | null>(null);
+  const uploadRef = useCallback((next: FileUploadAction) => setUpload(() => next), []);
+
+  const handleViewModeChange = useCallback((mode: EditorViewMode) => onViewModeChange?.(mode), [onViewModeChange]);
+
+  const getView = useCallback(() => {
+    invariant(editorView);
+    return editorView;
+  }, [editorView]);
+
+  if (!editorView) {
+    return <div />;
+  }
+
+  return (
+    <>
+      <EditorToolbar
+        classNames={classNames}
+        attendableId={id}
+        role={role}
+        state={state}
+        customActions={customActions}
+        getView={getView}
+        onImageUpload={upload ?? undefined}
+        onViewModeChange={handleViewModeChange}
+      />
+
+      {onFileUpload && <FileUpload ref={uploadRef} editorView={editorView} onFileUpload={onFileUpload} />}
+    </>
+  );
+};

package/src/components/Suggestions.stories.tsx

@@ -2,36 +2,33 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta } from '@storybook/react-vite';
-import { Match, Option, Schema, pipe } from 'effect';
+import * as Function from 'effect/Function';
+import * as Match from 'effect/Match';
+import * as Option from 'effect/Option';
+import * as Schema from 'effect/Schema';
 import React, { type FC, useEffect, useMemo, useState } from 'react';
 
-import {
-  Capabilities,
-  IntentPlugin,
-  SettingsPlugin,
-  contributes,
-  useCapability,
-  useIntentDispatcher,
-} from '@dxos/app-framework';
+import { Capabilities, IntentPlugin, SettingsPlugin } from '@dxos/app-framework';
+import { useCapability, useIntentDispatcher } from '@dxos/app-framework/react';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Obj, Ref, Type } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
 import { ClientPlugin } from '@dxos/plugin-client';
+import { GraphPlugin } from '@dxos/plugin-graph';
 import { PreviewPlugin } from '@dxos/plugin-preview';
 import { SpacePlugin } from '@dxos/plugin-space';
 import { StorybookLayoutPlugin } from '@dxos/plugin-storybook-layout';
 import { ThemePlugin } from '@dxos/plugin-theme';
 import { faker } from '@dxos/random';
-import { createDocAccessor, fullyQualifiedId, toCursorRange, useQueue, useSpace } from '@dxos/react-client/echo';
+import { createDocAccessor, toCursorRange, useQueue, useSpace } from '@dxos/react-client/echo';
 import { IconButton, Toolbar } from '@dxos/react-ui';
-import { type EditorSelection, type Range, command, useTextEditor } from '@dxos/react-ui-editor';
+import { withTheme } from '@dxos/react-ui/testing';
+import { type EditorSelection, type Range, 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 { render } from '@dxos/storybook-utils';
+import { Message } from '@dxos/types';
 
 import { MarkdownCapabilities } from '../capabilities';
 import { MarkdownPlugin } from '../MarkdownPlugin';
@@ -66,13 +63,13 @@ const TestChat: FC<{ doc: Markdown.Document; content: string }> = ({ doc, conten
 
   const space = useSpace();
   const queueDxn = useMemo(() => space && space.queues.create().dxn, [space]);
-  const queue = useQueue<DataType.Message>(queueDxn);
+  const queue = useQueue<Message.Message>(queueDxn);
 
   const handleInsert = async () => {
     invariant(space);
     invariant(queue);
     await queue.append([
-      Obj.make(DataType.Message, {
+      Obj.make(Message.Message, {
         created: new Date().toISOString(),
         sender: { role: 'assistant' },
         blocks: [{ _tag: 'text', text: 'Hello' }],
@@ -83,8 +80,8 @@ const TestChat: FC<{ doc: Markdown.Document; content: string }> = ({ doc, conten
 
     const text = await doc.content.load();
     const accessor = createDocAccessor(text, ['content']);
-    const cursor = pipe(
-      editorState.getState(fullyQualifiedId(doc))?.selection,
+    const cursor = Function.pipe(
+      editorState.getState(Obj.getDXN(doc).toString())?.selection,
       Option.fromNullable,
       Option.map(selectionToRange),
       Option.map((range) => toCursorRange(accessor, range.from, range.to)),
@@ -128,12 +125,17 @@ const DefaultStory = ({ document, chat }: { document: string; chat: string }) =>
     }
 
     const doc = space.db.add(
-      Markdown.makeDocument({
+      Markdown.make({
         name: 'Test',
         content: document.replaceAll(/\[(\w+)\]/g, (_, label) => {
-          const obj = space.db.add(Obj.make(TestItem, { title: label, description: faker.lorem.paragraph() }));
+          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})`;
         }),
       }),
     );
@@ -142,45 +144,50 @@ const DefaultStory = ({ document, chat }: { document: string; chat: string }) =>
   }, [space]);
 
   if (!space || !doc) {
-    return <></>;
+    return null;
   }
 
+  // TODO(burdon): Layout issue.
   return (
-    <>
+    <div className='grid grid-cols-2 bs-full overflow-hidden'>
       <MarkdownContainer id={doc.id} object={doc} settings={settings} editorStateStore={editorState} />
       <TestChat doc={doc} content={chat} />
-    </>
+    </div>
   );
 };
 
-// TODO(burdon): Make consistent.
 const storybook: Meta<typeof DefaultStory> = {
   title: 'plugins/plugin-markdown/Suggestions',
-  render: DefaultStory,
+  render: render(DefaultStory),
   decorators: [
+    withTheme,
     withPluginManager({
       plugins: [
-        ThemePlugin({ tx: defaultTx }),
-        StorybookLayoutPlugin(),
         ClientPlugin({
           types: [Markdown.Document, TestItem],
           onClientInitialized: async ({ client }) => {
             await client.halo.createIdentity();
           },
         }),
-        SpacePlugin(),
-        SettingsPlugin(),
+        SpacePlugin({}),
+        GraphPlugin(),
         IntentPlugin(),
+        SettingsPlugin(),
+
+        // UI
+        ThemePlugin({ tx: defaultTx }),
         MarkdownPlugin(),
         PreviewPlugin(),
+        StorybookLayoutPlugin({}),
       ],
-      capabilities: [contributes(MarkdownCapabilities.Extensions, [() => command()])],
     }),
-    withLayout({ fullscreen: true, classNames: 'grid grid-cols-2' }),
   ],
   parameters: {
+    layout: 'fullscreen',
+    controls: {
+      disable: true,
+    },
     translations,
-    controls: { disable: true },
   },
 };
 

package/src/components/index.ts

@@ -4,7 +4,9 @@
 
 import { lazy } from 'react';
 
+export * from './MarkdownCard';
+export * from './MarkdownContainer';
 export * from './MarkdownSettings';
 
-export const MarkdownContainer = lazy(() => import('./MarkdownContainer'));
 export const MarkdownCard = lazy(() => import('./MarkdownCard'));
+export const MarkdownContainer = lazy(() => import('./MarkdownContainer'));