@dxos/plugin-markdown 0.6.8-main.046e6cf

package/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "@dxos/plugin-markdown",
+  "version": "0.6.8-main.046e6cf",
+  "description": "DXOS Surface plugin for interacting with Markdown",
+  "homepage": "https://dxos.org",
+  "bugs": "https://github.com/dxos/dxos/issues",
+  "license": "MIT",
+  "author": "DXOS.org",
+  "exports": {
+    ".": {
+      "browser": "./dist/lib/browser/index.mjs",
+      "node": {
+        "default": "./dist/lib/node/index.cjs"
+      },
+      "types": "./dist/types/src/index.d.ts"
+    },
+    "./meta": {
+      "browser": "./dist/lib/browser/meta.mjs",
+      "node": {
+        "default": "./dist/lib/node/meta.cjs"
+      },
+      "types": "./dist/types/src/meta.d.ts"
+    },
+    "./types": {
+      "browser": "./dist/lib/browser/types/index.mjs",
+      "node": {
+        "default": "./dist/lib/node/types/index.cjs"
+      },
+      "types": "./dist/types/src/types/index.d.ts"
+    }
+  },
+  "types": "dist/types/src/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "meta": [
+        "dist/types/src/meta.d.ts"
+      ],
+      "types": [
+        "dist/types/src/types/index.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@codemirror/view": "^6.29.1",
+    "@preact/signals-core": "^1.6.0",
+    "@dxos/async": "0.6.8-main.046e6cf",
+    "@dxos/echo-schema": "0.6.8-main.046e6cf",
+    "@dxos/keys": "0.6.8-main.046e6cf",
+    "@dxos/invariant": "0.6.8-main.046e6cf",
+    "@dxos/local-storage": "0.6.8-main.046e6cf",
+    "@dxos/plugin-attention": "0.6.8-main.046e6cf",
+    "@dxos/log": "0.6.8-main.046e6cf",
+    "@dxos/plugin-client": "0.6.8-main.046e6cf",
+    "@dxos/plugin-graph": "0.6.8-main.046e6cf",
+    "@dxos/plugin-settings": "0.6.8-main.046e6cf",
+    "@dxos/plugin-theme": "0.6.8-main.046e6cf",
+    "@dxos/plugin-space": "0.6.8-main.046e6cf",
+    "@dxos/react-async": "0.6.8-main.046e6cf",
+    "@dxos/react-client": "0.6.8-main.046e6cf",
+    "@dxos/react-ui-card": "0.6.8-main.046e6cf",
+    "@dxos/app-framework": "0.6.8-main.046e6cf",
+    "@dxos/react-ui-deck": "0.6.8-main.046e6cf",
+    "@dxos/react-ui-editor": "0.6.8-main.046e6cf",
+    "@dxos/react-ui-mosaic": "0.6.8-main.046e6cf",
+    "@dxos/util": "0.6.8-main.046e6cf",
+    "@dxos/react-ui-stack": "0.6.8-main.046e6cf"
+  },
+  "devDependencies": {
+    "@phosphor-icons/react": "^2.1.5",
+    "@types/react": "~18.2.0",
+    "@types/react-dom": "~18.2.0",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "vite": "^5.3.4",
+    "@dxos/random": "0.6.8-main.046e6cf",
+    "@dxos/react-ui": "0.6.8-main.046e6cf",
+    "@dxos/react-ui-theme": "0.6.8-main.046e6cf",
+    "@dxos/storybook-utils": "0.6.8-main.046e6cf"
+  },
+  "optionalDependencies": {
+    "@phosphor-icons/react": "^2.1.5",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "@dxos/react-ui": "0.6.8-main.046e6cf",
+    "@dxos/react-ui-theme": "0.6.8-main.046e6cf"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/MarkdownPlugin.tsx

@@ -0,0 +1,341 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type IconProps, TextAa } from '@phosphor-icons/react';
+import React, { type Ref } from 'react';
+
+import {
+  isObject,
+  parseIntentPlugin,
+  resolvePlugin,
+  LayoutAction,
+  type LayoutCoordinate,
+  NavigationAction,
+  type PluginDefinition,
+} from '@dxos/app-framework';
+import { create } from '@dxos/echo-schema';
+import { LocalStorageStore } from '@dxos/local-storage';
+import { parseClientPlugin } from '@dxos/plugin-client';
+import { type ActionGroup, createExtension, isActionGroup } from '@dxos/plugin-graph';
+import { SpaceAction } from '@dxos/plugin-space';
+import { CollectionType } from '@dxos/plugin-space/types';
+import { fullyQualifiedId, isSpace, loadObjectReferences } from '@dxos/react-client/echo';
+import {
+  type EditorInputMode,
+  type EditorViewMode,
+  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 meta, { MARKDOWN_PLUGIN } from './meta';
+import translations from './translations';
+import { DocumentType, TextType } from './types';
+import {
+  type MarkdownPluginProvides,
+  type MarkdownSettingsProps,
+  MarkdownAction,
+  type MarkdownPluginState,
+} 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'
+  );
+};
+
+export const MarkdownPlugin = (): PluginDefinition<MarkdownPluginProvides> => {
+  const settings = new LocalStorageStore<MarkdownSettingsProps>(MARKDOWN_PLUGIN, {
+    defaultViewMode: 'preview',
+    toolbar: true,
+    experimental: false,
+  });
+
+  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;
+  };
+
+  return {
+    meta,
+    ready: async (plugins) => {
+      settings
+        .prop({
+          key: 'defaultViewMode',
+          storageKey: 'default-view-mode',
+          type: LocalStorageStore.enum<EditorViewMode>(),
+        })
+        .prop({
+          key: 'editorInputMode',
+          storageKey: 'editor-mode',
+          type: LocalStorageStore.enum<EditorInputMode>({ allowUndefined: true }),
+        })
+        .prop({ key: 'toolbar', type: LocalStorageStore.bool({ allowUndefined: true }) })
+        .prop({ key: 'experimental', type: LocalStorageStore.bool({ allowUndefined: true }) })
+        .prop({ key: 'debug', type: LocalStorageStore.bool({ allowUndefined: true }) })
+        .prop({ key: 'typewriter', type: LocalStorageStore.string({ allowUndefined: true }) })
+        .prop({ key: 'numberedHeadings', type: LocalStorageStore.bool({ allowUndefined: true }) })
+        .prop({ key: 'folding', type: LocalStorageStore.bool({ allowUndefined: true }) });
+
+      state.prop({
+        key: 'viewMode',
+        storageKey: 'view-mode',
+        type: LocalStorageStore.json<{ [key: string]: EditorViewMode }>(),
+      });
+
+      markdownExtensionPlugins(plugins).forEach((plugin) => {
+        const { extensions } = plugin.provides.markdown;
+        state.values.extensionProviders.push(extensions);
+      });
+    },
+    provides: {
+      settings: settings.values,
+      metadata: {
+        records: {
+          [DocumentType.typename]: {
+            label: (object: any) => (object instanceof DocumentType ? object.name ?? object.fallbackName : undefined),
+            placeholder: ['document title placeholder', { ns: MARKDOWN_PLUGIN }],
+            icon: (props: IconProps) => <TextAa {...props} />,
+            iconSymbol: 'ph--text-aa--regular',
+            graphProps: {
+              managesAutofocus: true,
+            },
+            // TODO(wittjosiah): Move out of metadata.
+            loadReferences: (doc: DocumentType) => loadObjectReferences(doc, (doc) => [doc.content, ...doc.threads]),
+            serializer,
+          },
+        },
+      },
+      translations: [...translations, ...editorTranslations],
+      echo: {
+        schema: [DocumentType, TextType],
+      },
+      graph: {
+        builder: (plugins) => {
+          const client = resolvePlugin(plugins, parseClientPlugin)?.provides.client;
+          const dispatch = resolvePlugin(plugins, parseIntentPlugin)?.provides.intent.dispatch;
+          if (!client || !dispatch) {
+            return [];
+          }
+
+          return createExtension({
+            id: MarkdownAction.CREATE,
+            filter: (node): node is ActionGroup => isActionGroup(node) && node.id.startsWith(SpaceAction.ADD_OBJECT),
+            actions: ({ node }) => {
+              const id = node.id.split('/').at(-1);
+              const [spaceId, objectId] = id?.split(':') ?? [];
+              const space = client.spaces.get().find((space) => space.id === spaceId);
+              const object = objectId && space?.db.getObjectById(objectId);
+              const target = objectId ? object : space;
+              if (!target) {
+                return;
+              }
+
+              return [
+                {
+                  id: `${MARKDOWN_PLUGIN}/create/${node.id}`,
+                  data: async () => {
+                    await dispatch([
+                      { plugin: MARKDOWN_PLUGIN, action: MarkdownAction.CREATE },
+                      { action: SpaceAction.ADD_OBJECT, data: { target } },
+                      { action: NavigationAction.OPEN },
+                    ]);
+                  },
+                  properties: {
+                    label: ['create document label', { ns: MARKDOWN_PLUGIN }],
+                    icon: (props: IconProps) => <TextAa {...props} />,
+                    iconSymbol: 'ph--text-aa--regular',
+                    testId: 'markdownPlugin.createObject',
+                  },
+                },
+              ];
+            },
+          });
+        },
+        serializer: (plugins) => {
+          const dispatch = resolvePlugin(plugins, parseIntentPlugin)?.provides.intent.dispatch;
+          if (!dispatch) {
+            return [];
+          }
+          return [
+            {
+              inputType: DocumentType.typename,
+              outputType: 'text/markdown',
+              // Reconcile with metadata serializers.
+              serialize: async (node) => {
+                const doc = node.data;
+                const content = await loadObjectReferences(doc, (doc) => doc.content);
+                return {
+                  name:
+                    doc.name ||
+                    doc.fallbackName ||
+                    translations[0]['en-US'][MARKDOWN_PLUGIN]['document title placeholder'],
+                  data: content.content,
+                  type: 'text/markdown',
+                };
+              },
+              deserialize: async (data, ancestors) => {
+                const space = ancestors.find(isSpace);
+                const target =
+                  ancestors.findLast((ancestor) => ancestor instanceof CollectionType) ??
+                  space?.properties[CollectionType.typename];
+                if (!space || !target) {
+                  return;
+                }
+
+                const result = await dispatch([
+                  {
+                    plugin: MARKDOWN_PLUGIN,
+                    action: MarkdownAction.CREATE,
+                    data: { name: data.name, content: data.data },
+                  },
+                  {
+                    action: SpaceAction.ADD_OBJECT,
+                    data: { target },
+                  },
+                ]);
+
+                return result?.data.object;
+              },
+            },
+          ];
+        },
+      },
+      stack: {
+        creators: [
+          {
+            id: 'create-stack-section-doc',
+            testId: 'markdownPlugin.createSection',
+            type: ['plugin name', { ns: MARKDOWN_PLUGIN }],
+            label: ['create stack section label', { ns: MARKDOWN_PLUGIN }],
+            icon: (props: any) => <TextAa {...props} />,
+            intent: {
+              plugin: MARKDOWN_PLUGIN,
+              action: MarkdownAction.CREATE,
+            },
+          },
+        ],
+      },
+      surface: {
+        component: ({ data, role, ...props }, forwardedRef) => {
+          const doc =
+            data.active instanceof DocumentType
+              ? data.active
+              : data.object instanceof DocumentType
+                ? data.object
+                : undefined;
+
+          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}
+                    viewMode={getViewMode(fullyQualifiedId(doc))}
+                    onViewModeChange={setViewMode}
+                    scrollPastEnd
+                  />
+                );
+              } 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}
+                    viewMode={getViewMode(data.object.id)}
+                    onViewModeChange={setViewMode}
+                    scrollPastEnd
+                  />
+                );
+              }
+              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,
+                };
+
+                return isTileComponentProps(cardProps) ? (
+                  <DocumentCard {...cardProps} settings={settings.values} ref={forwardedRef as Ref<HTMLDivElement>} />
+                ) : null;
+              }
+              break;
+            }
+
+            case 'settings': {
+              return data.plugin === meta.id ? <MarkdownSettings settings={settings.values} /> : null;
+            }
+          }
+
+          return null;
+        },
+      },
+      intent: {
+        resolver: ({ action, data }) => {
+          switch (action) {
+            case MarkdownAction.CREATE: {
+              const doc = create(DocumentType, {
+                name: data?.name,
+                content: create(TextType, { content: data?.content ?? '' }),
+                threads: [],
+              });
+
+              return {
+                data: doc,
+                intents: [[{ action: LayoutAction.SCROLL_INTO_VIEW, data: { id: doc.id } }]],
+              };
+            }
+
+            case MarkdownAction.SET_VIEW_MODE: {
+              const { id, viewMode } = data ?? {};
+              if (typeof id === 'string' && EditorViewModes.includes(viewMode)) {
+                state.values.viewMode[id] = viewMode;
+                return { data: true };
+              }
+
+              break;
+            }
+          }
+        },
+      },
+    },
+  };
+};

package/src/components/DocumentCard.tsx

@@ -0,0 +1,107 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { forwardRef } from 'react';
+
+import { createDocAccessor } from '@dxos/react-client/echo';
+import { DropdownMenu, Input, useThemeContext, useTranslation } from '@dxos/react-ui';
+import { Card } from '@dxos/react-ui-card';
+import {
+  createBasicExtensions,
+  createDataExtensions,
+  createThemeExtensions,
+  useTextEditor,
+} from '@dxos/react-ui-editor';
+import type { MosaicTileComponent } from '@dxos/react-ui-mosaic';
+import { focusRing, mx } from '@dxos/react-ui-theme';
+
+import { createBaseExtensions } from '../extensions';
+import { MARKDOWN_PLUGIN } from '../meta';
+import { type DocumentType, type MarkdownSettingsProps } from '../types';
+
+export type DocumentItemProps = {
+  id: string;
+  object: DocumentType;
+  color?: string;
+};
+
+export type DocumentCardProps = {
+  settings: MarkdownSettingsProps;
+};
+
+/**
+ * @deprecated
+ */
+// TODO(wittjosiah): Unify with DocumentEditor.
+export const DocumentCard: MosaicTileComponent<DocumentItemProps, HTMLDivElement, DocumentCardProps> = forwardRef(
+  (
+    {
+      classNames,
+      isDragging,
+      draggableStyle,
+      draggableProps,
+      item: { id, object, color },
+      grow,
+      settings,
+      onSelect,
+      onAction,
+    },
+    forwardRef,
+  ) => {
+    const { t } = useTranslation(MARKDOWN_PLUGIN);
+    const { themeMode } = useThemeContext();
+    const { parentRef, focusAttributes } = useTextEditor(
+      () => ({
+        initialValue: object.content?.content,
+        extensions: [
+          createBasicExtensions({ placeholder: t('editor placeholder') }),
+          createThemeExtensions({ themeMode }),
+          createDataExtensions({
+            id: object.id,
+            text: object.content && createDocAccessor(object.content, ['content']),
+          }),
+          createBaseExtensions({
+            document: object,
+            debug: settings.debug,
+            experimental: settings.experimental,
+          }),
+        ],
+      }),
+      [object, object.content, themeMode],
+    );
+
+    return (
+      <div role='none' ref={forwardRef} className='flex w-full' style={draggableStyle}>
+        <Card.Root classNames={mx('w-full snap-center', color, isDragging && 'opacity-20', classNames)} grow={grow}>
+          <Card.Header onDoubleClick={() => onSelect?.()}>
+            <Card.DragHandle {...draggableProps} />
+            <Input.Root>
+              <Input.TextInput
+                variant='subdued'
+                classNames='p-0'
+                placeholder={t('document title placeholder')}
+                value={object.name}
+                onChange={(event) => (object.name = event.target.value)}
+              />
+            </Input.Root>
+            <Card.Menu>
+              {/* TODO(burdon): Handle events/intents? */}
+              <DropdownMenu.Item onClick={() => onAction?.({ id, action: 'delete' })}>
+                <span className='grow'>Delete</span>
+              </DropdownMenu.Item>
+              <DropdownMenu.Item onClick={() => onAction?.({ id, action: 'set-color' })}>
+                <span className='grow'>Change color</span>
+              </DropdownMenu.Item>
+            </Card.Menu>
+          </Card.Header>
+          <Card.Body>
+            <div {...focusAttributes} ref={parentRef} className={mx(focusRing, 'rounded-sm h-full p-1 text-sm')} />
+          </Card.Body>
+        </Card.Root>
+      </div>
+    );
+  },
+);
+
+export default DocumentCard;

package/src/components/DocumentEditor.tsx

@@ -0,0 +1,140 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { EditorView } from '@codemirror/view';
+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,
+} 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]);
+
+  const { scrollTo /*, selection */ } = useMemo(() => {
+    const { scrollTo, selection } = localStorageStateStoreAdapter.getState(doc.id) ?? {};
+    return {
+      scrollTo: scrollTo?.from ? EditorView.scrollIntoView(scrollTo.from, { y: 'start', yMargin: 0 }) : undefined,
+      selection,
+    };
+  }, [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={fullyQualifiedId(doc)}
+      initialValue={initialValue}
+      extensions={extensions}
+      scrollTo={scrollTo}
+      // TODO(wittjosiah): Ensure selection is within the document.
+      // selection={selection}
+      onFileUpload={handleFileUpload}
+      inputMode={settings.editorInputMode}
+      toolbar={settings.toolbar}
+      viewMode={viewMode}
+      {...props}
+    />
+  );
+};
+
+export default DocumentEditor;
+
+export type DocumentEditor = typeof DocumentEditor;