@dxos/plugin-markdown 0.6.13-main.ed424a1 → 0.6.13

package/src/extensions.tsx

@@ -2,117 +2,63 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { type AnchorHTMLAttributes, type ReactNode, useMemo } from 'react';
+import { ArrowSquareDown, ArrowSquareOut, type Icon } from '@phosphor-icons/react';
+import React, { type AnchorHTMLAttributes, StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import { type IntentDispatcher, NavigationAction, useIntentDispatcher } from '@dxos/app-framework';
+import { type IntentDispatcher, NavigationAction } from '@dxos/app-framework';
 import { invariant } from '@dxos/invariant';
-import { createDocAccessor, fullyQualifiedId, getSpace, type Query } from '@dxos/react-client/echo';
-import { useIdentity } from '@dxos/react-client/halo';
-import { Icon, ThemeProvider } from '@dxos/react-ui';
-import { createDataExtensions, listener, localStorageStateStoreAdapter, state } from '@dxos/react-ui-editor';
+import { fullyQualifiedId, type Query } from '@dxos/react-client/echo';
 import {
   type AutocompleteResult,
-  type EditorViewMode,
   type Extension,
-  InputModeExtensions,
+  type EditorViewMode,
   autocomplete,
   decorateMarkdown,
-  folding,
-  formattingKeymap,
   linkTooltip,
   typewriter,
+  formattingKeymap,
+  InputModeExtensions,
+  folding,
 } from '@dxos/react-ui-editor';
-import { defaultTx } from '@dxos/react-ui-theme';
-import { isNotFalsy } from '@dxos/util';
+import { getSize, mx } from '@dxos/react-ui-theme';
+import { isNotFalsy, nonNullable } from '@dxos/util';
 
-import { type DocumentType, type MarkdownPluginState, type MarkdownSettingsProps } from './types';
-import { setFallbackName } from './util';
+import { type DocumentType, type MarkdownSettingsProps } from './types';
 
-type ExtensionsOptions = {
-  document: DocumentType;
-  dispatch?: IntentDispatcher;
-  query?: Query<DocumentType>;
-  settings: MarkdownSettingsProps;
+export type ExtensionsOptions = {
   viewMode?: EditorViewMode;
+  settings?: MarkdownSettingsProps;
+  document?: DocumentType;
+  debug?: boolean;
+  experimental?: boolean;
+  numberedHeadings?: boolean;
+  folding?: boolean;
+  query?: Query<DocumentType>;
+  dispatch?: IntentDispatcher;
 };
 
-// TODO(burdon): Merge with createBaseExtensions above.
-export const useExtensions = ({
-  extensionProviders,
-  document,
-  settings,
+/**
+ * Create extension instances for editor.
+ */
+export const createBaseExtensions = ({
   viewMode,
-}: Pick<ExtensionsOptions, 'document' | 'settings' | 'viewMode'> &
-  Pick<MarkdownPluginState, 'extensionProviders'>): Extension[] => {
-  const dispatch = useIntentDispatcher();
-  const identity = useIdentity();
-  const space = getSpace(document);
-
-  // TODO(wittjosiah): Autocomplete is not working and this query is causing performance issues.
-  // TODO(burdon): Unsubscribe.
-  // const query = space?.db.query(Filter.schema(DocumentType));
-  // query?.subscribe();
-  const baseExtensions = useMemo(
-    () =>
-      createBaseExtensions({
-        document,
-        settings,
-        viewMode,
-        dispatch,
-        // query,
-      }),
-    [document, viewMode, dispatch, settings, settings.folding, settings.numberedHeadings],
-  );
-
-  //
-  // External extensions from other plugins.
-  //
-  const pluginExtensions = useMemo<Extension[] | undefined>(
-    () =>
-      extensionProviders?.reduce((acc: Extension[], provider) => {
-        const extension = typeof provider === 'function' ? provider({ document }) : provider;
-        if (extension) {
-          acc.push(extension);
-        }
-
-        return acc;
-      }, []),
-    [extensionProviders],
-  );
+  settings,
+  document,
+  query,
+  dispatch,
+}: ExtensionsOptions): Extension[] => {
+  const extensions: Extension[] = [];
 
   //
-  // Basic plugins.
+  // Editor mode.
   //
-  return useMemo<Extension[]>(
-    () =>
-      [
-        // NOTE: Data extensions must be first so that automerge is updated before other extensions compute their state.
-        createDataExtensions({
-          id: document.id,
-          text: document.content && createDocAccessor(document.content, ['content']),
-          space,
-          identity,
-        }),
-        state(localStorageStateStoreAdapter),
-        listener({
-          onChange: (text) => setFallbackName(document, text),
-        }),
-        baseExtensions,
-        pluginExtensions,
-      ].filter(isNotFalsy),
-    [baseExtensions, pluginExtensions, document, document.content, space, identity],
-  );
-};
-
-/**
- * Create extension instances for editor.
- */
-const createBaseExtensions = ({ document, dispatch, settings, query, viewMode }: ExtensionsOptions): Extension[] => {
-  const extensions: Extension[] = [
-    settings.editorInputMode && InputModeExtensions[settings.editorInputMode],
-    settings.folding && folding(),
-  ].filter(isNotFalsy);
+  if (settings?.editorInputMode) {
+    const extension = InputModeExtensions[settings.editorInputMode];
+    if (extension) {
+      extensions.push(extension);
+    }
+  }
 
   //
   // Markdown
@@ -123,7 +69,7 @@ const createBaseExtensions = ({ document, dispatch, settings, query, viewMode }:
         formattingKeymap(),
         decorateMarkdown({
           selectionChangeDelay: 100,
-          numberedHeadings: settings.numberedHeadings ? { from: 2 } : undefined,
+          numberedHeadings: settings?.numberedHeadings ? { from: 2 } : undefined,
           // TODO(wittjosiah): For internal links, consider ignoring the link text and rendering the label of the object being linked to.
           renderLinkButton:
             dispatch && document
@@ -152,6 +98,7 @@ const createBaseExtensions = ({ document, dispatch, settings, query, viewMode }:
     extensions.push(
       autocomplete({
         onSearch: (text: string) => {
+          // TODO query
           // TODO(burdon): Specify filter (e.g., stack).
           return query.objects
             .map<AutocompleteResult | undefined>((object) =>
@@ -163,27 +110,29 @@ const createBaseExtensions = ({ document, dispatch, settings, query, viewMode }:
                   }
                 : undefined,
             )
-            .filter(isNotFalsy);
+            .filter(nonNullable);
         },
       }),
     );
   }
 
-  if (settings.debug) {
-    const items = settings.typewriter?.split(/[,\n]/) ?? '';
-    if (items) {
-      extensions.push(typewriter({ items }));
-    }
+  extensions.push(
+    ...[
+      //
+      settings?.folding && folding(),
+    ].filter(isNotFalsy),
+  );
+
+  if (settings?.debug) {
+    const items = settings.typewriter ?? '';
+    extensions.push(...[items ? typewriter({ items: items.split(/[,\n]/) }) : undefined].filter(nonNullable));
   }
 
   return extensions;
 };
 
-// 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',
-};
+// TODO(burdon): Factor out style.
+const hover = 'rounded-sm text-primary-600 hover:text-primary-500 dark:text-primary-300 hover:dark:text-primary-200';
 
 const onRenderLink = (onSelectObject: (id: string) => void) => (el: Element, url: string) => {
   // TODO(burdon): Formalize/document internal link format.
@@ -206,31 +155,25 @@ const onRenderLink = (onSelectObject: (id: string) => void) => (el: Element, url
         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>,
+  const LinkIcon: Icon = isInternal ? ArrowSquareDown : ArrowSquareOut;
+
+  createRoot(el).render(
+    <StrictMode>
+      <a {...options} className={hover}>
+        <LinkIcon weight='bold' className={mx(getSize(4), 'inline-block leading-none mis-1 cursor-pointer')} />
+      </a>
+    </StrictMode>,
   );
 };
 
 const renderLinkTooltip = (el: Element, url: string) => {
   const web = new URL(url);
-  renderRoot(
-    el,
-    <a href={url} rel='noreferrer' target='_blank' className={style.hover}>
-      {web.origin}
-      <Icon icon='ph--arrow-square-out--bold' size={4} classNames={style.icon} />
-    </a>,
+  createRoot(el).render(
+    <StrictMode>
+      <a href={url} target='_blank' rel='noreferrer' className={hover}>
+        {web.origin}
+        <ArrowSquareOut weight='bold' className={mx(getSize(4), 'inline-block leading-none mis-1 cursor-pointer')} />
+      </a>
+    </StrictMode>,
   );
 };
-
-// TODO(burdon): Remove react rendering; use DOM directly.
-export const renderRoot = <T extends Element>(root: T, node: ReactNode): T => {
-  createRoot(root).render(<ThemeProvider tx={defaultTx}>{node}</ThemeProvider>);
-  return root;
-};

package/src/meta.tsx

@@ -0,0 +1,19 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type IconProps, TextAa } from '@phosphor-icons/react';
+import React from 'react';
+
+import { pluginMeta } from '@dxos/app-framework';
+
+export const MARKDOWN_PLUGIN = 'dxos.org/plugin/markdown';
+
+export default pluginMeta({
+  id: MARKDOWN_PLUGIN,
+  name: 'Editor',
+  description: 'Markdown text editor.',
+  homePage: 'https://github.com/dxos/dxos/tree/main/packages/apps/plugins/plugin-markdown',
+  iconComponent: (props: IconProps) => <TextAa {...props} />,
+  iconSymbol: 'ph--text-aa--regular',
+});

package/src/types/document.ts

@@ -15,15 +15,3 @@ export class DocumentType extends TypedObject({ typename: 'dxos.org/type/Documen
   content: ref(TextType),
   threads: S.mutable(S.Array(ref(ThreadType))),
 }) {}
-
-/**
- * Checks if an object conforms to the interface needed to render an editor.
- */
-// TODO(burdon): Normalize types (from FilesPlugin).
-export const isEditorModel = (data: any): data is { id: string; text: string } =>
-  data &&
-  typeof data === 'object' &&
-  'id' in data &&
-  typeof data.id === 'string' &&
-  'text' in data &&
-  typeof data.text === 'string';

package/src/types/types.ts

@@ -12,7 +12,6 @@ import type {
   TranslationsProvides,
 } from '@dxos/app-framework';
 import { type SchemaProvides } from '@dxos/plugin-client';
-import { type SpaceInitProvides } from '@dxos/plugin-space';
 import { type Extension, type EditorInputMode, type EditorViewMode } from '@dxos/react-ui-editor';
 
 import { type DocumentType } from './document';
@@ -27,15 +26,13 @@ export enum MarkdownAction {
 
 export type MarkdownProperties = Record<string, any>;
 
-// TODO(burdon): Async.
-export type MarkdownExtensionProvider = (props: { document?: DocumentType }) => Extension | undefined;
+export type ExtensionsProvider = (props: { document?: DocumentType }) => Extension[];
 
 export type OnChange = (text: string) => void;
 
 export type MarkdownExtensionProvides = {
-  // TODO(burdon): Rename.
   markdown: {
-    extensions: MarkdownExtensionProvider;
+    extensions: ExtensionsProvider;
   };
 };
 
@@ -48,11 +45,11 @@ type StackProvides = {
 
 export type MarkdownPluginState = {
   // Codemirror extensions provided by other plugins.
-  extensionProviders?: MarkdownExtensionProvider[];
+  extensionProviders: NonNullable<ExtensionsProvider>[];
 
   // TODO(burdon): Extend view mode per document to include scroll position, etc.
   // View mode per document.
-  viewMode: Record<string, EditorViewMode>;
+  viewMode: { [key: string]: EditorViewMode };
 };
 
 export type MarkdownSettingsProps = {
@@ -67,11 +64,12 @@ export type MarkdownSettingsProps = {
   folding?: boolean;
 };
 
-// TODO(Zan): Move this to the plugin-space plugin or another common location when we implement comments in sheets.
+// TODO(Zan): Move this to the plugin-space plugin or another common location
+// when we implement comments in sheets.
 type ThreadProvides<T> = {
   thread: {
     predicate: (obj: any) => obj is T;
-    createSort: (obj: T) => (anchorA: string | undefined, anchorB: string | undefined) => number;
+    createSort: (obj: T) => (anchorA: string, anchorB: string) => number;
   };
 };
 
@@ -83,6 +81,5 @@ export type MarkdownPluginProvides = SurfaceProvides &
   SettingsProvides<MarkdownSettingsProps> &
   TranslationsProvides &
   SchemaProvides &
-  SpaceInitProvides &
   StackProvides &
   ThreadProvides<DocumentType>;

package/src/util.tsx

@@ -5,7 +5,7 @@
 import { type Plugin } from '@dxos/app-framework';
 import { debounce } from '@dxos/async';
 import { type TypedObjectSerializer } from '@dxos/plugin-space/types';
-import { create, createObject, isEchoObject, loadObjectReferences } from '@dxos/react-client/echo';
+import { create, createEchoObject, isEchoObject, loadObjectReferences } from '@dxos/react-client/echo';
 
 import { DocumentType, type MarkdownProperties, type MarkdownExtensionProvides, TextType } from './types';
 
@@ -43,6 +43,6 @@ export const serializer: TypedObjectSerializer<DocumentType> = {
 
   deserialize: async ({ content: serialized }) => {
     const { name, content } = JSON.parse(serialized);
-    return createObject(create(DocumentType, { name, content: create(TextType, { content }), threads: [] }));
+    return createEchoObject(create(DocumentType, { name, content: create(TextType, { content }), threads: [] }));
   },
 };