@dxos/plugin-markdown 0.8.2-main.f11618f → 0.8.2-staging.42af850

package/src/components/Suggestions.stories.tsx

@@ -5,8 +5,10 @@
 import '@dxos-theme';
 
 import { type Meta } from '@storybook/react';
+import { Match, Option, pipe, Schema } from 'effect';
 import React, { type FC, useEffect, useMemo, useState } from 'react';
 
+import { Message } from '@dxos/ai';
 import {
   Capabilities,
   CollaborationActions,
@@ -18,8 +20,8 @@ import {
   useIntentDispatcher,
 } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { Message } from '@dxos/artifact';
-import { S, AST, create, type Expando, EchoObject } from '@dxos/echo-schema';
+import { Type } from '@dxos/echo';
+import { create, createQueueDxn, type Expando } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { DXN } from '@dxos/keys';
 import { live, makeRef, refFromDXN } from '@dxos/live-object';
@@ -29,9 +31,9 @@ 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 { createQueueDxn, useQueue, useSpace } from '@dxos/react-client/echo';
+import { createDocAccessor, fullyQualifiedId, toCursorRange, useQueue, useSpace } from '@dxos/react-client/echo';
 import { IconButton, Toolbar } from '@dxos/react-ui';
-import { command, useTextEditor } from '@dxos/react-ui-editor';
+import { command, 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 { withLayout } from '@dxos/storybook-utils';
@@ -45,50 +47,66 @@ import { createDocument, DocumentType, type MarkdownSettingsProps } from '../typ
 
 faker.seed(1);
 
-const TestItem = S.Struct({
-  title: S.String.annotations({
-    [AST.TitleAnnotationId]: 'Title',
-    [AST.DescriptionAnnotationId]: 'Product title',
+const TestItem = Schema.Struct({
+  title: Schema.String.annotations({
+    title: 'Title',
+    description: 'Product title',
   }),
-  description: S.String.annotations({
-    [AST.TitleAnnotationId]: 'Description',
-    [AST.DescriptionAnnotationId]: 'Product description',
+  description: Schema.String.annotations({
+    title: 'Description',
+    description: 'Product description',
   }),
-}).pipe(EchoObject({ typename: 'dxos.org/type/Test', version: '0.1.0' }));
+}).pipe(
+  Type.Obj({
+    typename: 'dxos.org/type/Test',
+    version: '0.1.0',
+  }),
+);
 
 const TestChat: FC<{ doc: DocumentType; content: string }> = ({ doc, content }) => {
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const { parentRef } = useTextEditor({ initialValue: content });
+  const { editorState } = useCapability(MarkdownCapabilities.State);
 
   const space = useSpace();
   const queueDxn = useMemo(() => space && createQueueDxn(space.id), [space]);
   const queue = useQueue<Message>(queueDxn);
 
-  const handleInsert = () => {
+  const handleInsert = async () => {
     invariant(space);
     invariant(queue);
     queue.append([create(Message, { role: 'assistant', content: [{ type: 'text', text: 'Hello' }] })]);
-    const message = queue.items[queue.items.length - 1];
+    const message = queue.objects.at(-1);
+    invariant(message);
+
+    const text = await doc.content.load();
+    const accessor = createDocAccessor(text, ['content']);
+    const cursor = pipe(
+      editorState.getState(fullyQualifiedId(doc))?.selection,
+      Option.fromNullable,
+      Option.map(selectionToRange),
+      Option.map((range) => toCursorRange(accessor, range.from, range.to)),
+      Option.getOrUndefined,
+    );
 
     // {
     //   const ref = refFromDXN(new DXN(DXN.kind.QUEUE, [...queue.dxn.parts, message.id]));
-
     //   const message = deref(ref);
     // }
 
     void dispatch(
       createIntent(CollaborationActions.InsertContent, {
-        spaceId: space.id,
-        target: makeRef(doc as any as Expando), // TODO(burdon): Comomon base type.
+        target: doc as any as Expando, // TODO(burdon): Common base type.
         object: refFromDXN(new DXN(DXN.kind.QUEUE, [...queue.dxn.parts, message.id])),
+        at: cursor,
         label: 'Proposal',
       }),
     );
   };
 
   return (
-    <StackItem.Content toolbar classNames='w-full'>
-      <Toolbar.Root classNames='border-be border-separator'>
+    <StackItem.Content toolbar>
+      <Toolbar.Root>
         <IconButton icon='ph--plus--regular' disabled={!queue} label='Insert' onClick={handleInsert} />
       </Toolbar.Root>
       <div ref={parentRef} className='p-4' />
@@ -100,6 +118,7 @@ const DefaultStory = ({ document, chat }: { document: string; chat: string }) =>
   const space = useSpace();
   const [doc, setDoc] = useState<DocumentType>();
   const settings = useCapability(Capabilities.SettingsStore).getStore<MarkdownSettingsProps>(MARKDOWN_PLUGIN)!.value;
+  const { editorState } = useCapability(MarkdownCapabilities.State);
 
   useEffect(() => {
     if (!space) {
@@ -128,7 +147,7 @@ const DefaultStory = ({ document, chat }: { document: string; chat: string }) =>
 
   return (
     <>
-      <MarkdownContainer id={doc.id} object={doc} settings={settings} />
+      <MarkdownContainer id={doc.id} object={doc} settings={settings} editorStateStore={editorState} />
       <TestChat doc={doc} content={chat} />
     </>
   );
@@ -156,7 +175,7 @@ const meta: Meta<typeof DefaultStory> = {
       ],
       capabilities: [contributes(MarkdownCapabilities.Extensions, [() => command()])],
     }),
-    withLayout({ tooltips: true, fullscreen: true, classNames: 'grid grid-cols-2' }),
+    withLayout({ fullscreen: true, classNames: 'grid grid-cols-2' }),
   ],
   parameters: {
     translations,
@@ -182,3 +201,16 @@ export const Default: Story = {
     ].join('\n'),
   },
 };
+
+// TODO(wittjosiah): Factor out.
+const selectionToRange = Match.type<EditorSelection>().pipe(
+  Match.when(
+    ({ head, anchor }) => (head ? head > anchor : false),
+    ({ head, anchor }) => ({ from: anchor, to: head! }) as Range,
+  ),
+  Match.when(
+    ({ head, anchor }) => (head ? head < anchor : false),
+    ({ head, anchor }) => ({ from: head!, to: anchor }) as Range,
+  ),
+  Match.orElse(({ anchor }) => ({ from: anchor, to: anchor }) as Range),
+);

package/src/components/Toolbar.stories.tsx

@@ -5,8 +5,9 @@
 import '@dxos-theme';
 
 import { type Meta } from '@storybook/react';
-import React, { type FC, useState } from 'react';
+import React, { type FC, useCallback, useState } from 'react';
 
+import { invariant } from '@dxos/invariant';
 import { PublicKey } from '@dxos/keys';
 import { live } from '@dxos/live-object';
 import { faker } from '@dxos/random';
@@ -14,7 +15,6 @@ import { createDocAccessor, createObject } from '@dxos/react-client/echo';
 import { useThemeContext } from '@dxos/react-ui';
 import {
   EditorToolbar,
-  type EditorAction,
   type Comment,
   comments,
   createBasicExtensions,
@@ -22,23 +22,23 @@ import {
   createMarkdownExtensions,
   createThemeExtensions,
   decorateMarkdown,
-  editorContent,
+  editorSlots,
   formattingKeymap,
   translations,
-  useActionHandler,
   useComments,
   useFormattingState,
   useTextEditor,
   useEditorToolbarState,
+  type EditorViewMode,
 } from '@dxos/react-ui-editor';
-import { TextType } from '@dxos/schema';
+import { DataType } from '@dxos/schema';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 faker.seed(101);
 
 const DefaultStory: FC<{ content?: string }> = ({ content = '' }) => {
   const { themeMode } = useThemeContext();
-  const [text] = useState(createObject(live(TextType, { content })));
+  const [text] = useState(createObject(live(DataType.Text, { content })));
   const toolbarState = useEditorToolbarState({ viewMode: 'preview' });
   const formattingObserver = useFormattingState(toolbarState);
   const { parentRef, view } = useTextEditor(() => {
@@ -49,7 +49,7 @@ const DefaultStory: FC<{ content?: string }> = ({ content = '' }) => {
         formattingObserver,
         createBasicExtensions({ readOnly: toolbarState.viewMode === 'readonly' }),
         createMarkdownExtensions({ themeMode }),
-        createThemeExtensions({ themeMode, syntaxHighlighting: true, slots: { editor: { className: editorContent } } }),
+        createThemeExtensions({ themeMode, syntaxHighlighting: true, slots: editorSlots }),
         createDataExtensions({ id: text.id, text: createDocAccessor(text, ['content']) }),
         comments({
           onCreate: ({ cursor }) => {
@@ -64,21 +64,21 @@ const DefaultStory: FC<{ content?: string }> = ({ content = '' }) => {
     };
   }, [text, formattingObserver, toolbarState.viewMode, themeMode]);
 
-  const handleToolbarAction = useActionHandler(view);
-  const handleAction = (action: EditorAction) => {
-    if (action.type === 'view-mode') {
-      toolbarState.viewMode = action.properties.data;
-    } else {
-      handleToolbarAction?.(action);
-    }
+  const handleViewModeChange = (viewMode: EditorViewMode) => {
+    toolbarState.viewMode = viewMode;
   };
 
+  const getView = useCallback(() => {
+    invariant(view);
+    return view;
+  }, [view]);
+
   const [_comments, setComments] = useState<Comment[]>([]);
   useComments(view, text.id, _comments);
 
   return (
     <div role='none' className='flex flex-col'>
-      <EditorToolbar onAction={handleAction} state={toolbarState ?? {}} />
+      <EditorToolbar state={toolbarState ?? {}} getView={getView} viewMode={handleViewModeChange} />
       <div className='flex grow overflow-hidden' ref={parentRef} />
     </div>
   );
@@ -98,7 +98,7 @@ const meta: Meta<typeof EditorToolbar> = {
   title: 'plugins/plugin-markdown/Toolbar',
   component: EditorToolbar,
   render: DefaultStory as any,
-  decorators: [withTheme, withLayout({ tooltips: true, fullscreen: true })],
+  decorators: [withTheme, withLayout({ fullscreen: true })],
   parameters: {
     translations,
   },

package/src/extensions.tsx

@@ -13,9 +13,10 @@ import {
   useIntentDispatcher,
 } from '@dxos/app-framework';
 import { invariant } from '@dxos/invariant';
-import { createDocAccessor, fullyQualifiedId, getSpace, type Query } from '@dxos/react-client/echo';
+import { createDocAccessor, fullyQualifiedId, getSpace, type QueryResult } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
 import { Icon, ThemeProvider } from '@dxos/react-ui';
+import { type SelectionManager } from '@dxos/react-ui-attention';
 import {
   type AutocompleteResult,
   type EditorStateStore,
@@ -33,9 +34,12 @@ import {
   selectionState,
   typewriter,
   type RenderCallback,
+  EditorView,
+  documentId,
+  Cursor,
 } from '@dxos/react-ui-editor';
 import { defaultTx } from '@dxos/react-ui-theme';
-import { type TextType } from '@dxos/schema';
+import { type DataType } from '@dxos/schema';
 import { isNotFalsy } from '@dxos/util';
 
 import { MarkdownCapabilities } from './capabilities';
@@ -45,10 +49,11 @@ import { setFallbackName } from './util';
 type ExtensionsOptions = {
   document?: DocumentType;
   id?: string;
-  text?: TextType;
+  text?: DataType.Text;
   dispatch?: PromiseIntentDispatcher;
-  query?: Query<DocumentType>;
+  query?: QueryResult<DocumentType>;
   settings: MarkdownSettingsProps;
+  selectionManager?: SelectionManager;
   viewMode?: EditorViewMode;
   editorStateStore?: EditorStateStore;
 };
@@ -59,6 +64,7 @@ export const useExtensions = ({
   id,
   text,
   settings,
+  selectionManager,
   viewMode,
   editorStateStore,
 }: ExtensionsOptions): Extension[] => {
@@ -68,7 +74,7 @@ export const useExtensions = ({
 
   // TODO(wittjosiah): Autocomplete is not working and this query is causing performance issues.
   // TODO(burdon): Unsubscribe.
-  // const query = space?.db.query(Filter.schema(DocumentType));
+  // const query = space?.db.query(Filter.type(DocumentType));
   // query?.subscribe();
   const baseExtensions = useMemo(
     () =>
@@ -77,6 +83,7 @@ export const useExtensions = ({
         id,
         text,
         settings,
+        selectionManager,
         viewMode,
         dispatch,
         // query,
@@ -93,6 +100,7 @@ export const useExtensions = ({
       settings.numberedHeadings,
       settings.debug,
       settings.typewriter,
+      selectionManager,
     ],
   );
 
@@ -101,18 +109,20 @@ export const useExtensions = ({
   //
   // External extensions from other plugins.
   //
-  const pluginExtensions = useMemo<Extension[] | undefined>(
-    () =>
-      extensionProviders.flat().reduce((acc: Extension[], provider) => {
-        const extension = typeof provider === 'function' ? provider({ document }) : provider;
-        if (extension) {
-          acc.push(extension);
-        }
+  const pluginExtensions = useMemo<Extension[]>(() => {
+    if (!document) {
+      return [];
+    }
 
-        return acc;
-      }, []),
-    [extensionProviders, document],
-  );
+    return extensionProviders.flat().reduce((acc: Extension[], provider) => {
+      const extension = typeof provider === 'function' ? provider({ document }) : provider;
+      if (extension) {
+        acc.push(extension);
+      }
+
+      return acc;
+    }, []);
+  }, [extensionProviders, document]);
 
   //
   // Basic plugins.
@@ -156,10 +166,12 @@ const createBaseExtensions = ({
   id,
   dispatch,
   settings,
+  selectionManager,
   query,
   viewMode,
 }: ExtensionsOptions): Extension[] => {
   const extensions: Extension[] = [
+    selectionManager && selectionChange(selectionManager),
     settings.editorInputMode && InputModeExtensions[settings.editorInputMode],
     settings.folding && folding(),
   ].filter(isNotFalsy);
@@ -230,6 +242,23 @@ const createBaseExtensions = ({
   return extensions;
 };
 
+export const selectionChange = (selectionManager: SelectionManager) => {
+  return EditorView.updateListener.of((update) => {
+    if (update.selectionSet) {
+      const id = update.state.facet(documentId);
+      const cursorConverter = update.state.facet(Cursor.converter);
+      const selection = update.state.selection;
+      const ranges = selection.ranges
+        .map((range) => ({
+          from: cursorConverter.toCursor(range.from),
+          to: cursorConverter.toCursor(range.to),
+        }))
+        .filter(({ from, to }) => to > from);
+      selectionManager.updateMultiRange(id, ranges);
+    }
+  });
+};
+
 // TODO(burdon): Factor out styles.
 const style = {
   hover: 'rounded-sm text-primary-500 hover:text-primary-600 dark:text-primary-500 hover:dark:text-primary-400',

package/src/hooks/useSelectCurrentThread.tsx

@@ -3,10 +3,10 @@
 //
 
 import { EditorView } from '@codemirror/view';
+import { Schema } from 'effect';
 import { useMemo } from 'react';
 
 import { createResolver, LayoutAction, useIntentResolver } from '@dxos/app-framework';
-import { S } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { Cursor, setSelection } from '@dxos/react-ui-editor';
 
@@ -22,7 +22,7 @@ export const useSelectCurrentThread = (editorView: EditorView | undefined, docum
         intent: LayoutAction.UpdateLayout,
         position: 'hoist',
         filter: (data): data is { part: 'current'; subject: string; options: { cursor: string } } => {
-          if (!S.is(LayoutAction.ScrollIntoView.fields.input)(data)) {
+          if (!Schema.is(LayoutAction.ScrollIntoView.fields.input)(data)) {
             return false;
           }
 

package/src/translations.ts

@@ -2,15 +2,13 @@
 // Copyright 2023 DXOS.org
 //
 
-import { getSchemaTypename } from '@dxos/echo-schema';
-
 import { MARKDOWN_PLUGIN } from './meta';
 import { DocumentType } from './types';
 
 export default [
   {
     'en-US': {
-      [getSchemaTypename(DocumentType)!]: {
+      [DocumentType.typename]: {
         'typename label': 'Document',
         'object name placeholder': 'New document',
       },

package/src/types/schema.ts

@@ -2,28 +2,30 @@
 // Copyright 2024 DXOS.org
 //
 
-import { EchoObject, Expando, LabelAnnotationId, Ref, S } from '@dxos/echo-schema';
-import { makeRef, live } from '@dxos/live-object';
-import { ThreadType } from '@dxos/plugin-space/types';
-import { TextType } from '@dxos/schema';
+import { Schema } from 'effect';
 
-export const DocumentSchema = S.Struct({
-  name: S.optional(S.String),
-  fallbackName: S.optional(S.String),
-  content: Ref(TextType),
-  threads: S.mutable(S.Array(Ref(ThreadType))),
-  assistantChatQueue: S.optional(Ref(Expando)),
-}).annotations({
-  // TODO(dmaretskyi): `S.Struct(...).pipe(defaultLabel(['name', 'fallbackName']))` for type-safe annotations.
-  [LabelAnnotationId]: ['name', 'fallbackName'],
-});
+import { Type, Ref } from '@dxos/echo';
+import { LabelAnnotation } from '@dxos/echo-schema';
+import { live } from '@dxos/live-object';
+import { DataType } from '@dxos/schema';
 
-export const DocumentType = DocumentSchema.pipe(EchoObject({ typename: 'dxos.org/type/Document', version: '0.1.0' }));
-export type DocumentType = S.Schema.Type<typeof DocumentType>;
+export const DocumentSchema = Schema.Struct({
+  name: Schema.optional(Schema.String),
+  fallbackName: Schema.optional(Schema.String),
+  content: Type.Ref(DataType.Text),
+}).pipe(LabelAnnotation.set(['name', 'fallbackName']));
+
+export const DocumentType = DocumentSchema.pipe(
+  Type.Obj({
+    typename: 'dxos.org/type/Document',
+    version: '0.1.0',
+  }),
+);
+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: makeRef(live(TextType, { content })), threads: [] });
+  live(DocumentType, { name, content: Ref.make(live(DataType.Text, { content })) });
 
 /**
  * Checks if an object conforms to the interface needed to render an editor.

package/src/types/types.ts

@@ -2,7 +2,9 @@
 // Copyright 2023 DXOS.org
 //
 
-import { S } from '@dxos/echo-schema';
+import { Schema } from 'effect';
+
+import { Type } from '@dxos/echo';
 // TODO(wittjosiah): This pulls in UI code into the types entrypoint.
 import { type Extension, EditorInputMode, EditorViewMode } from '@dxos/react-ui-editor';
 
@@ -12,23 +14,23 @@ import { MARKDOWN_PLUGIN } from '../meta';
 const MARKDOWN_ACTION = `${MARKDOWN_PLUGIN}/action`;
 
 export namespace MarkdownAction {
-  export class Create extends S.TaggedClass<Create>()(MARKDOWN_ACTION, {
-    input: S.Struct({
-      spaceId: S.String,
-      name: S.optional(S.String),
-      content: S.optional(S.String),
+  export class Create extends Schema.TaggedClass<Create>()(MARKDOWN_ACTION, {
+    input: Schema.Struct({
+      spaceId: Type.SpaceId,
+      name: Schema.optional(Schema.String),
+      content: Schema.optional(Schema.String),
     }),
-    output: S.Struct({
+    output: Schema.Struct({
       object: DocumentType,
     }),
   }) {}
 
-  export class SetViewMode extends S.TaggedClass<SetViewMode>()(`${MARKDOWN_ACTION}/set-view-mode`, {
-    input: S.Struct({
-      id: S.String,
+  export class SetViewMode extends Schema.TaggedClass<SetViewMode>()(`${MARKDOWN_ACTION}/set-view-mode`, {
+    input: Schema.Struct({
+      id: Schema.String,
       viewMode: EditorViewMode,
     }),
-    output: S.Void,
+    output: Schema.Void,
   }) {}
 }
 
@@ -48,18 +50,18 @@ export type MarkdownPluginState = {
   viewMode: Record<string, EditorViewMode>;
 };
 
-export const MarkdownSettingsSchema = S.mutable(
-  S.Struct({
+export const MarkdownSettingsSchema = Schema.mutable(
+  Schema.Struct({
     defaultViewMode: EditorViewMode,
-    editorInputMode: S.optional(EditorInputMode),
-    experimental: S.optional(S.Boolean),
-    debug: S.optional(S.Boolean),
-    toolbar: S.optional(S.Boolean),
-    typewriter: S.optional(S.String),
+    editorInputMode: Schema.optional(EditorInputMode),
+    experimental: Schema.optional(Schema.Boolean),
+    debug: Schema.optional(Schema.Boolean),
+    toolbar: Schema.optional(Schema.Boolean),
+    typewriter: Schema.optional(Schema.String),
     // TODO(burdon): Per document settings.
-    numberedHeadings: S.optional(S.Boolean),
-    folding: S.optional(S.Boolean),
+    numberedHeadings: Schema.optional(Schema.Boolean),
+    folding: Schema.optional(Schema.Boolean),
   }),
 );
 
-export type MarkdownSettingsProps = S.Schema.Type<typeof MarkdownSettingsSchema>;
+export type MarkdownSettingsProps = Schema.Schema.Type<typeof MarkdownSettingsSchema>;

package/src/util.tsx

@@ -4,13 +4,13 @@
 
 import { debounce } from '@dxos/async';
 import { type TypedObjectSerializer } from '@dxos/plugin-space/types';
-import { live, createObject, isEchoObject, loadObjectReferences, makeRef } from '@dxos/react-client/echo';
-import { TextType } from '@dxos/schema';
+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)
+  (isEchoObject(data) as boolean)
     ? true
     : data && typeof data === 'object'
       ? 'title' in data && typeof data.title === 'string'
@@ -42,7 +42,7 @@ export const serializer: TypedObjectSerializer<DocumentType> = {
   deserialize: async ({ content: serialized }) => {
     const { name, fallbackName, content } = JSON.parse(serialized);
     return createObject(
-      live(DocumentType, { name, fallbackName, content: makeRef(live(TextType, { content })), threads: [] }),
+      live(DocumentType, { name, fallbackName, content: Ref.make(live(DataType.Text, { content })) }),
     );
   },
 };