@dxos/plugin-markdown 0.8.2-staging.7ac8446 → 0.8.2

package/src/components/Toolbar.stories.tsx

@@ -5,15 +5,16 @@
 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 { create } from '@dxos/live-object';
+import { live } from '@dxos/live-object';
 import { faker } from '@dxos/random';
 import { createDocAccessor, createObject } from '@dxos/react-client/echo';
 import { useThemeContext } from '@dxos/react-ui';
 import {
-  type EditorAction,
+  EditorToolbar,
   type Comment,
   comments,
   createBasicExtensions,
@@ -21,26 +22,23 @@ import {
   createMarkdownExtensions,
   createThemeExtensions,
   decorateMarkdown,
-  editorContent,
+  editorSlots,
   formattingKeymap,
-  EditorToolbar,
   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 _onUpload = async (file: File) => ({ url: file.name });
-
 const DefaultStory: FC<{ content?: string }> = ({ content = '' }) => {
   const { themeMode } = useThemeContext();
-  const [text] = useState(createObject(create(TextType, { content })));
+  const [text] = useState(createObject(live(DataType.Text, { content })));
   const toolbarState = useEditorToolbarState({ viewMode: 'preview' });
   const formattingObserver = useFormattingState(toolbarState);
   const { parentRef, view } = useTextEditor(() => {
@@ -51,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 }) => {
@@ -66,22 +64,22 @@ 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='fixed inset-0 flex flex-col'>
-      <EditorToolbar onAction={handleAction} state={toolbarState ?? {}} />
-      <div ref={parentRef} />
+    <div role='none' className='flex flex-col'>
+      <EditorToolbar state={toolbarState ?? {}} getView={getView} viewMode={handleViewModeChange} />
+      <div className='flex grow overflow-hidden' ref={parentRef} />
     </div>
   );
 };
@@ -96,18 +94,20 @@ const content = [
   '',
 ].join('\n');
 
-export const Default = {
-  args: {
-    content,
-  },
-};
-
 const meta: Meta<typeof EditorToolbar> = {
   title: 'plugins/plugin-markdown/Toolbar',
   component: EditorToolbar,
   render: DefaultStory as any,
-  decorators: [withTheme, withLayout({ tooltips: true })],
-  parameters: { translations, layout: 'fullscreen' },
+  decorators: [withTheme, withLayout({ fullscreen: true })],
+  parameters: {
+    translations,
+  },
 };
 
 export default meta;
+
+export const Default = {
+  args: {
+    content,
+  },
+};

package/src/components/index.ts

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

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,
@@ -29,11 +30,16 @@ import {
   formattingKeymap,
   linkTooltip,
   listener,
+  preview,
   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';
@@ -43,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;
 };
@@ -57,6 +64,7 @@ export const useExtensions = ({
   id,
   text,
   settings,
+  selectionManager,
   viewMode,
   editorStateStore,
 }: ExtensionsOptions): Extension[] => {
@@ -66,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(
     () =>
@@ -75,6 +83,7 @@ export const useExtensions = ({
         id,
         text,
         settings,
+        selectionManager,
         viewMode,
         dispatch,
         // query,
@@ -91,6 +100,7 @@ export const useExtensions = ({
       settings.numberedHeadings,
       settings.debug,
       settings.typewriter,
+      selectionManager,
     ],
   );
 
@@ -99,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.
@@ -154,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);
@@ -175,7 +189,7 @@ const createBaseExtensions = ({
           // TODO(wittjosiah): For internal links, consider ignoring the link text and rendering the label of the object being linked to.
           renderLinkButton:
             dispatch && (document || id)
-              ? onRenderLink((id: string) => {
+              ? createLinkRenderer((id: string) => {
                   void dispatch(
                     createIntent(LayoutAction.Open, {
                       part: 'main',
@@ -189,6 +203,7 @@ const createBaseExtensions = ({
               : undefined,
         }),
         linkTooltip(renderLinkTooltip),
+        preview(),
       ],
     );
   }
@@ -227,46 +242,65 @@ 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',
   icon: 'inline-block leading-none mis-1 cursor-pointer',
 };
 
-const onRenderLink = (onSelectObject: (id: string) => void) => (el: Element, url: string) => {
-  // TODO(burdon): Formalize/document internal link format.
-  const isInternal =
-    url.startsWith('/') ||
-    // TODO(wittjosiah): This should probably be parsed out on paste?
-    url.startsWith(window.location.origin);
+const createLinkRenderer =
+  (onSelectObject: (id: string) => void): RenderCallback<{ url: string }> =>
+  (el, { url }) => {
+    // TODO(burdon): Formalize/document internal link format.
+    const isInternal =
+      url.startsWith('/') ||
+      // TODO(wittjosiah): This should probably be parsed out on paste?
+      url.startsWith(window.location.origin);
 
-  const options: AnchorHTMLAttributes<any> = isInternal
-    ? {
-        onClick: () => {
-          const qualifiedId = url.split('/').at(-1);
-          invariant(qualifiedId, 'Invalid link format.');
-          onSelectObject(qualifiedId);
-        },
-      }
-    : {
-        href: url,
-        rel: 'noreferrer',
-        target: '_blank',
-      };
+    const options: AnchorHTMLAttributes<any> = isInternal
+      ? {
+          onClick: () => {
+            const qualifiedId = url.split('/').at(-1);
+            invariant(qualifiedId, 'Invalid link format.');
+            onSelectObject(qualifiedId);
+          },
+        }
+      : {
+          href: url,
+          rel: 'noreferrer',
+          target: '_blank',
+        };
 
-  renderRoot(
-    el,
-    <a {...options} className={style.hover}>
-      <Icon
-        icon={isInternal ? 'ph--arrow-square-down--bold' : 'ph--arrow-square-out--bold'}
-        size={4}
-        classNames={style.icon}
-      />
-    </a>,
-  );
-};
+    renderRoot(
+      el,
+      <a {...options} className={style.hover}>
+        <Icon
+          icon={isInternal ? 'ph--arrow-square-down--bold' : 'ph--arrow-square-out--bold'}
+          size={4}
+          classNames={style.icon}
+        />
+      </a>,
+    );
+  };
 
-const renderLinkTooltip = (el: Element, url: string) => {
+const renderLinkTooltip: RenderCallback<{ url: string }> = (el, { url }) => {
   const web = new URL(url);
   renderRoot(
     el,

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',
       },
@@ -35,6 +33,8 @@ export default [
         'toggle view mode label': 'Toggle read-only',
         'default view mode label': 'Default view mode',
         'upload image label': 'Upload image',
+        'fallback title': 'Untitled',
+        'navigate to document label': 'Open document',
       },
     },
   },

package/src/types/schema.ts

@@ -2,23 +2,30 @@
 // Copyright 2024 DXOS.org
 //
 
-import { EchoObject, Expando, LabelAnnotationId, Ref, S } from '@dxos/echo-schema';
-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: 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 { create, 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'
@@ -22,6 +22,10 @@ export const getFallbackName = (content: string) => {
   return content.substring(0, 31).split('\n')[0].replaceAll(nonTitleChars, '').trim();
 };
 
+export const getAbstract = (content: string) => {
+  return content.substring(0, 128).split('\n')[0].replaceAll(nonTitleChars, '').trim();
+};
+
 export const setFallbackName = debounce((doc: DocumentType, content: string) => {
   const name = getFallbackName(content);
   if (doc.fallbackName !== name) {
@@ -38,7 +42,7 @@ export const serializer: TypedObjectSerializer<DocumentType> = {
   deserialize: async ({ content: serialized }) => {
     const { name, fallbackName, content } = JSON.parse(serialized);
     return createObject(
-      create(DocumentType, { name, fallbackName, content: makeRef(create(TextType, { content })), threads: [] }),
+      live(DocumentType, { name, fallbackName, content: Ref.make(live(DataType.Text, { content })) }),
     );
   },
 };