@dxos/plugin-markdown 0.8.4-main.f5c0578 → 0.8.4-main.fcc0d83b33

package/src/components/Suggestions.stories.tsx

@@ -1,221 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react-vite';
-import { Match, Option, Schema, pipe } from 'effect';
-import React, { type FC, useEffect, useMemo, useState } from 'react';
-
-import {
-  Capabilities,
-  CollaborationActions,
-  IntentPlugin,
-  SettingsPlugin,
-  contributes,
-  createIntent,
-  useCapability,
-  useIntentDispatcher,
-} from '@dxos/app-framework';
-import { withPluginManager } from '@dxos/app-framework/testing';
-import { Obj, Ref, Type } from '@dxos/echo';
-import { invariant } from '@dxos/invariant';
-import { DXN } from '@dxos/keys';
-import { ClientPlugin } from '@dxos/plugin-client';
-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 { IconButton, Toolbar } from '@dxos/react-ui';
-import { type EditorSelection, type Range, command, 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 { MarkdownCapabilities } from '../capabilities';
-import { MarkdownPlugin } from '../MarkdownPlugin';
-import { meta } from '../meta';
-import { translations } from '../translations';
-import { Markdown } from '../types';
-
-import { MarkdownContainer } from './MarkdownContainer';
-
-faker.seed(1);
-
-const TestItem = Schema.Struct({
-  title: Schema.String.annotations({
-    title: 'Title',
-    description: 'Product title',
-  }),
-  description: Schema.String.annotations({
-    title: 'Description',
-    description: 'Product description',
-  }),
-}).pipe(
-  Type.Obj({
-    typename: 'dxos.org/type/Test',
-    version: '0.1.0',
-  }),
-);
-
-const TestChat: FC<{ doc: Markdown.Document; 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 && space.queues.create().dxn, [space]);
-  const queue = useQueue<DataType.Message>(queueDxn);
-
-  const handleInsert = async () => {
-    invariant(space);
-    invariant(queue);
-    await queue.append([
-      Obj.make(DataType.Message, {
-        created: new Date().toISOString(),
-        sender: { role: 'assistant' },
-        blocks: [{ _tag: 'text', text: 'Hello' }],
-      }),
-    ]);
-    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, {
-        target: doc as any as Type.Expando,
-        object: Ref.fromDXN(new DXN(DXN.kind.QUEUE, [...queue.dxn.parts, message.id])),
-        at: cursor,
-        label: 'Proposal',
-      }),
-    );
-  };
-
-  return (
-    <StackItem.Content toolbar>
-      <Toolbar.Root>
-        <IconButton icon='ph--plus--regular' disabled={!queue} label='Insert' onClick={handleInsert} />
-      </Toolbar.Root>
-      <div ref={parentRef} className='p-4' />
-    </StackItem.Content>
-  );
-};
-
-const DefaultStory = ({ document, chat }: { document: string; chat: string }) => {
-  const space = useSpace();
-  const [doc, setDoc] = useState<Markdown.Document>();
-  const settings = useCapability(Capabilities.SettingsStore).getStore<Markdown.Settings>(meta.id)!.value;
-  const { editorState } = useCapability(MarkdownCapabilities.State);
-
-  useEffect(() => {
-    if (!space) {
-      return undefined;
-    }
-
-    const doc = space.db.add(
-      Markdown.makeDocument({
-        name: 'Test',
-        content: document.replaceAll(/\[(\w+)\]/g, (_, label) => {
-          const obj = space.db.add(Obj.make(TestItem, { title: label, description: faker.lorem.paragraph() }));
-          const dxn = Ref.make(obj).dxn.toString();
-          return `[${label}][${dxn}]`;
-        }),
-      }),
-    );
-
-    setDoc(doc);
-  }, [space]);
-
-  if (!space || !doc) {
-    return <></>;
-  }
-
-  return (
-    <>
-      <MarkdownContainer id={doc.id} object={doc} settings={settings} editorStateStore={editorState} />
-      <TestChat doc={doc} content={chat} />
-    </>
-  );
-};
-
-// TODO(burdon): Make consistent.
-const storybook: Meta<typeof DefaultStory> = {
-  title: 'plugins/plugin-markdown/Suggestions',
-  render: DefaultStory,
-  decorators: [
-    withPluginManager({
-      plugins: [
-        ThemePlugin({ tx: defaultTx }),
-        StorybookLayoutPlugin(),
-        ClientPlugin({
-          types: [Markdown.Document, TestItem],
-          onClientInitialized: async ({ client }) => {
-            await client.halo.createIdentity();
-          },
-        }),
-        SpacePlugin(),
-        SettingsPlugin(),
-        IntentPlugin(),
-        MarkdownPlugin(),
-        PreviewPlugin(),
-      ],
-      capabilities: [contributes(MarkdownCapabilities.Extensions, [() => command()])],
-    }),
-    withLayout({ fullscreen: true, classNames: 'grid grid-cols-2' }),
-  ],
-  parameters: {
-    translations,
-    controls: { disable: true },
-  },
-};
-
-export default storybook;
-
-type Story = Meta<typeof DefaultStory>;
-
-export const Default: Story = {
-  args: {
-    chat: 'Hello\n',
-    document: [
-      '# Test',
-      '',
-      faker.lorem.paragraph(1),
-      '',
-      'This is a [DXOS] story that tests [ECHO] references inside the Markdown plugin.',
-      '',
-      faker.lorem.paragraph(3),
-      '',
-    ].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

@@ -1,112 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react-vite';
-import React, { type FC, useCallback, useState } from 'react';
-
-import { invariant } from '@dxos/invariant';
-import { PublicKey } from '@dxos/keys';
-import { faker } from '@dxos/random';
-import { createDocAccessor } from '@dxos/react-client/echo';
-import { useThemeContext } from '@dxos/react-ui';
-import {
-  type Comment,
-  EditorToolbar,
-  type EditorViewMode,
-  comments,
-  createBasicExtensions,
-  createDataExtensions,
-  createMarkdownExtensions,
-  createThemeExtensions,
-  decorateMarkdown,
-  editorSlots,
-  formattingKeymap,
-  translations,
-  useComments,
-  useEditorToolbarState,
-  useFormattingState,
-  useTextEditor,
-} from '@dxos/react-ui-editor';
-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(DataType.makeText(content));
-  const toolbarState = useEditorToolbarState({ viewMode: 'preview' });
-  const formattingObserver = useFormattingState(toolbarState);
-  const { parentRef, view } = useTextEditor(() => {
-    return {
-      id: text.id,
-      initialValue: text.content,
-      extensions: [
-        formattingObserver,
-        createBasicExtensions({ readOnly: toolbarState.viewMode === 'readonly' }),
-        createMarkdownExtensions({ themeMode }),
-        createThemeExtensions({ themeMode, syntaxHighlighting: true, slots: editorSlots }),
-        createDataExtensions({ id: text.id, text: createDocAccessor(text, ['content']) }),
-        comments({
-          onCreate: ({ cursor }) => {
-            const id = PublicKey.random().toHex();
-            setComments((comments) => [...comments, { id, cursor }]);
-            return id;
-          },
-        }),
-        formattingKeymap(),
-        ...(toolbarState.viewMode !== 'source' ? [decorateMarkdown()] : []),
-      ],
-    };
-  }, [text, formattingObserver, toolbarState.viewMode, themeMode]);
-
-  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 state={toolbarState ?? {}} getView={getView} viewMode={handleViewModeChange} />
-      <div className='flex grow overflow-hidden' ref={parentRef} />
-    </div>
-  );
-};
-
-const content = [
-  '# Demo',
-  '',
-  'The editor supports **Markdown** styles.',
-  '',
-  faker.lorem.paragraph({ min: 5, max: 8 }),
-  '',
-  '',
-].join('\n');
-
-const meta: Meta<typeof EditorToolbar> = {
-  title: 'plugins/plugin-markdown/Toolbar',
-  component: EditorToolbar,
-  render: DefaultStory as any,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  parameters: {
-    translations,
-  },
-};
-
-export default meta;
-
-export const Default = {
-  args: {
-    content,
-  },
-};

package/src/events.ts

@@ -1,11 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Events } from '@dxos/app-framework';
-
-import { meta } from './meta';
-
-export namespace MarkdownEvents {
-  export const SetupExtensions = Events.createStateEvent(`${meta.id}/event/setup-extensions`);
-}

package/src/extensions.tsx

@@ -1,328 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type ViewUpdate } from '@codemirror/view';
-import React, { type AnchorHTMLAttributes, type ReactNode, useMemo } from 'react';
-import { createRoot } from 'react-dom/client';
-
-import {
-  LayoutAction,
-  type PromiseIntentDispatcher,
-  createIntent,
-  useCapabilities,
-  useIntentDispatcher,
-} from '@dxos/app-framework';
-import { debounceAndThrottle } from '@dxos/async';
-import { invariant } from '@dxos/invariant';
-import { type QueryResult, createDocAccessor, fullyQualifiedId, getSpace } 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,
-  Cursor,
-  type EditorStateStore,
-  EditorView,
-  type EditorViewMode,
-  type Extension,
-  InputModeExtensions,
-  type PreviewOptions,
-  type RenderCallback,
-  autocomplete,
-  createDataExtensions,
-  decorateMarkdown,
-  documentId,
-  folding,
-  formattingKeymap,
-  linkTooltip,
-  listener,
-  preview,
-  selectionState,
-  typewriter,
-} from '@dxos/react-ui-editor';
-import { defaultTx } from '@dxos/react-ui-theme';
-import { type DataType } from '@dxos/schema';
-import { isNotFalsy } from '@dxos/util';
-
-import { MarkdownCapabilities } from './capabilities';
-import { type Markdown } from './types';
-import { setFallbackName } from './util';
-
-type ExtensionsOptions = {
-  document?: Markdown.Document;
-  id?: string;
-  text?: DataType.Text;
-  dispatch?: PromiseIntentDispatcher;
-  query?: QueryResult<Markdown.Document>;
-  settings: Markdown.Settings;
-  selectionManager?: SelectionManager;
-  viewMode?: EditorViewMode;
-  editorStateStore?: EditorStateStore;
-  previewOptions?: PreviewOptions;
-};
-
-// TODO(burdon): Merge with createBaseExtensions below.
-export const useExtensions = ({
-  document,
-  id,
-  text,
-  settings,
-  selectionManager,
-  viewMode,
-  editorStateStore,
-  previewOptions,
-}: ExtensionsOptions): Extension[] => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const identity = useIdentity();
-  const space = getSpace(document) ?? getSpace(text);
-
-  // TODO(wittjosiah): Autocomplete is not working and this query is causing performance issues.
-  // TODO(burdon): Unsubscribe.
-  // const query = space?.db.query(Filter.type(DocumentType));
-  // query?.subscribe();
-  const baseExtensions = useMemo(
-    () =>
-      createBaseExtensions({
-        document,
-        id,
-        text,
-        settings,
-        selectionManager,
-        viewMode,
-        previewOptions,
-        dispatch,
-        // query,
-      }),
-    [
-      document,
-      id,
-      text,
-      viewMode,
-      dispatch,
-      previewOptions,
-      settings,
-      settings.editorInputMode,
-      settings.folding,
-      settings.numberedHeadings,
-      settings.debug,
-      settings.typewriter,
-      selectionManager,
-    ],
-  );
-
-  const extensionProviders = useCapabilities(MarkdownCapabilities.Extensions);
-
-  //
-  // External extensions from other plugins.
-  //
-  const pluginExtensions = useMemo<Extension[]>(() => {
-    if (!document) {
-      return [];
-    }
-
-    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.
-  //
-  return useMemo<Extension[]>(
-    () =>
-      [
-        // NOTE: Data extensions must be first so that automerge is updated before other extensions compute their state.
-        document &&
-          createDataExtensions({
-            id: document.id,
-            text: document.content.target && createDocAccessor(document.content.target, ['content']),
-            space,
-            identity,
-          }),
-        text &&
-          id &&
-          createDataExtensions({
-            id,
-            text: createDocAccessor(text, ['content']),
-            space,
-            identity,
-          }),
-        selectionState(editorStateStore),
-        document &&
-          listener({
-            onChange: (text) => setFallbackName(document, text),
-          }),
-        baseExtensions,
-        pluginExtensions,
-      ].filter(isNotFalsy),
-    [baseExtensions, pluginExtensions, document, document?.content?.target, text, id, space, identity],
-  );
-};
-
-/**
- * Create extension instances for editor.
- */
-const createBaseExtensions = ({
-  document,
-  id,
-  dispatch,
-  settings,
-  selectionManager,
-  query,
-  viewMode,
-  previewOptions,
-}: ExtensionsOptions): Extension[] => {
-  const extensions: Extension[] = [
-    selectionManager && selectionChange(selectionManager),
-    settings.editorInputMode && InputModeExtensions[settings.editorInputMode],
-    settings.folding && folding(),
-  ].filter(isNotFalsy);
-
-  //
-  // Markdown
-  //
-  if (viewMode !== 'source') {
-    extensions.push(
-      ...[
-        formattingKeymap(),
-        decorateMarkdown({
-          selectionChangeDelay: 100,
-          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 || id)
-              ? createLinkRenderer((id: string) => {
-                  void dispatch(
-                    createIntent(LayoutAction.Open, {
-                      part: 'main',
-                      subject: [id],
-                      options: {
-                        pivotId: document ? fullyQualifiedId(document) : id,
-                      },
-                    }),
-                  );
-                })
-              : undefined,
-        }),
-        linkTooltip(renderLinkTooltip),
-        preview(previewOptions),
-      ],
-    );
-  }
-
-  //
-  // Autocomplete object links.
-  //
-  if (query) {
-    extensions.push(
-      autocomplete({
-        onSearch: (text: string) => {
-          // TODO(burdon): Specify filter (e.g., stack).
-          return query.objects
-            .map<AutocompleteResult | undefined>((object) =>
-              object.name?.length && object.id !== document?.id
-                ? {
-                    label: object.name,
-                    // TODO(burdon): Factor out URL builder.
-                    apply: `[${object.name}](/${fullyQualifiedId(object)})`,
-                  }
-                : undefined,
-            )
-            .filter(isNotFalsy);
-        },
-      }),
-    );
-  }
-
-  if (settings.debug) {
-    const items = settings.typewriter?.split(/[,\n]/) ?? '';
-    if (items) {
-      extensions.push(typewriter({ items }));
-    }
-  }
-
-  return extensions;
-};
-
-export const selectionChange = (selectionManager: SelectionManager) => {
-  return EditorView.updateListener.of(
-    debounceAndThrottle((update: ViewUpdate) => {
-      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);
-      }
-    }, 100),
-  );
-};
-
-// 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 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',
-        };
-
-    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: RenderCallback<{ url: string }> = (el, { url }) => {
-  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>,
-  );
-};
-
-// 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;
-};