@dxos/plugin-markdown 0.8.4-main.67995b8 → 0.8.4-main.6fa680abb7

package/src/capabilities/state.ts

@@ -1,30 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Capabilities, contributes, type PluginContext } from '@dxos/app-framework';
-import { LocalStorageStore } from '@dxos/local-storage';
-import { type EditorViewMode, createEditorStateStore } from '@dxos/react-ui-editor';
-
-import { MarkdownCapabilities } from './capabilities';
-import { meta } from '../meta';
-import { type Markdown, type MarkdownPluginState } from '../types';
-
-export default (context: PluginContext) => {
-  const state = new LocalStorageStore<MarkdownPluginState>(meta.id, { extensionProviders: [], viewMode: {} });
-  state.prop({ key: 'viewMode', type: LocalStorageStore.json<{ [key: string]: EditorViewMode }>() });
-
-  // TODO(wittjosiah): Fold into state.
-  const editorState = createEditorStateStore(`${meta.id}/editor`);
-
-  const getViewMode = (id: string) => {
-    const defaultViewMode = context.getCapability(Capabilities.SettingsStore).getStore<Markdown.Settings>(meta.id)!
-      .value.defaultViewMode;
-    return (id && state.values.viewMode[id]) || defaultViewMode;
-  };
-
-  const setViewMode = (id: string, viewMode: EditorViewMode) => (state.values.viewMode[id] = viewMode);
-
-  // Return object with methods.
-  return contributes(MarkdownCapabilities.State, { state: state.values, editorState, getViewMode, setViewMode });
-};

package/src/components/MarkdownContainer.stories.tsx

@@ -1,100 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react-vite';
-import React, { useMemo } from 'react';
-
-import { Capabilities, contributes, IntentPlugin, SettingsPlugin, Surface } from '@dxos/app-framework';
-import { withPluginManager } from '@dxos/app-framework/testing';
-import { todo } from '@dxos/debug';
-import { Query, Type } from '@dxos/echo';
-import { AttentionPlugin } from '@dxos/plugin-attention';
-import { ClientPlugin } from '@dxos/plugin-client';
-import { GraphPlugin } from '@dxos/plugin-graph';
-import { PreviewPlugin } from '@dxos/plugin-preview';
-import { SpaceCapabilities, SpacePlugin } from '@dxos/plugin-space';
-import { StorybookLayoutPlugin } from '@dxos/plugin-storybook-layout';
-import { ThemePlugin } from '@dxos/plugin-theme';
-import { faker } from '@dxos/random';
-import { useQuery, useSpace } from '@dxos/react-client/echo';
-import { defaultTx } from '@dxos/react-ui-theme';
-import { DataType } from '@dxos/schema';
-import { createObjectFactory, Testing, type ValueGenerator } from '@dxos/schema/testing';
-import { withLayout } from '@dxos/storybook-utils';
-
-import { MarkdownPlugin } from '../MarkdownPlugin';
-import { translations } from '../translations';
-import { Markdown } from '../types';
-
-faker.seed(1);
-
-const generator: ValueGenerator = faker as any;
-
-const DefaultStory = () => {
-  const space = useSpace();
-  const [doc] = useQuery(space, Query.type(Markdown.Document));
-  const data = useMemo(() => ({ subject: doc }), [doc]);
-
-  return <Surface role='article' data={data} />;
-};
-
-const meta: Meta<typeof DefaultStory> = {
-  title: 'plugins/plugin-markdown/MarkdownContainer',
-  render: DefaultStory,
-  decorators: [
-    withPluginManager({
-      plugins: [
-        AttentionPlugin(),
-        ThemePlugin({ tx: defaultTx }),
-        StorybookLayoutPlugin(),
-        ClientPlugin({
-          types: [Markdown.Document, DataType.Text, Testing.Contact],
-          onClientInitialized: async (_, client) => {
-            await client.halo.createIdentity();
-            await client.spaces.waitUntilReady();
-            await client.spaces.default.waitUntilReady();
-            const space = client.spaces.default;
-            const doc = Markdown.makeDocument({ name: 'Test', content: '# Test\n\n' });
-            space.db.add(doc);
-            const createObjects = createObjectFactory(space.db, generator);
-            await createObjects([{ type: Testing.Contact, count: 10 }]);
-            await space.db.flush({ indexes: true });
-          },
-        }),
-        SpacePlugin(),
-        SettingsPlugin(),
-        IntentPlugin(),
-        MarkdownPlugin(),
-        PreviewPlugin(),
-        GraphPlugin(),
-      ],
-      capabilities: [
-        // NOTE: Editor only queries for object form schemas when linking.
-        contributes(SpaceCapabilities.ObjectForm, {
-          objectSchema: Testing.Contact,
-          getIntent: () => todo(),
-        }),
-        contributes(Capabilities.Metadata, {
-          id: Type.getTypename(Testing.Contact),
-          metadata: {
-            icon: 'ph--user--regular',
-          },
-        }),
-      ],
-    }),
-    withLayout({ fullscreen: true }),
-  ],
-  parameters: {
-    translations,
-    controls: { disable: true },
-  },
-};
-
-export default meta;
-
-type Story = Meta<typeof DefaultStory>;
-
-export const Default: Story = {};

package/src/components/MarkdownContainer.tsx

@@ -1,254 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { Rx } from '@effect-rx/rx-react';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { createPortal } from 'react-dom';
-
-import { Capabilities, Surface, useAppGraph, useCapabilities, usePluginManager } from '@dxos/app-framework';
-import { DXN, Filter, Obj, Query, Type } from '@dxos/echo';
-import { ClientCapabilities } from '@dxos/plugin-client';
-import { SpaceCapabilities } from '@dxos/plugin-space';
-import { fullyQualifiedId, getSpace, useQuery, useSpace } from '@dxos/react-client/echo';
-import { toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { type SelectionManager } from '@dxos/react-ui-attention';
-import {
-  type CommandMenuGroup,
-  type CommandMenuItem,
-  insertAtCursor,
-  insertAtLineStart,
-  type PreviewLinkRef,
-  type PreviewOptions,
-} from '@dxos/react-ui-editor';
-import { DataType } from '@dxos/schema';
-
-import { MarkdownEditor, type MarkdownEditorProps } from './MarkdownEditor';
-import { useExtensions } from '../extensions';
-import { Markdown } from '../types';
-import { getFallbackName } from '../util';
-
-export type MarkdownContainerProps = Pick<
-  MarkdownEditorProps,
-  'role' | 'extensionProviders' | 'viewMode' | 'editorStateStore' | 'onViewModeChange'
-> & {
-  id: string;
-  object: Markdown.Document | DataType.Text | any;
-  settings: Markdown.Settings;
-  selectionManager?: SelectionManager;
-};
-
-export const MarkdownContainer = ({
-  id,
-  role,
-  object,
-  settings,
-  selectionManager,
-  viewMode,
-  editorStateStore,
-  onViewModeChange,
-}: MarkdownContainerProps) => {
-  const { t } = useTranslation();
-  const scrollPastEnd = role === 'article';
-  const doc = Obj.instanceOf(Markdown.Document, object) ? object : undefined;
-  const text = Obj.instanceOf(DataType.Text, object) ? object : undefined;
-  const [previewBlocks, setPreviewBlocks] = useState<{ link: PreviewLinkRef; el: HTMLElement }[]>([]);
-  const previewOptions = useMemo(
-    (): PreviewOptions => ({
-      addBlockContainer: (link, el) => {
-        setPreviewBlocks((prev) => [...prev, { link, el }]);
-      },
-      removeBlockContainer: (link) => {
-        setPreviewBlocks((prev) => prev.filter(({ link: prevLink }) => prevLink.ref !== link.ref));
-      },
-    }),
-    [],
-  );
-  const extensions = useExtensions({
-    document: doc,
-    text,
-    id,
-    settings,
-    selectionManager,
-    viewMode,
-    editorStateStore,
-    previewOptions,
-  });
-
-  // TODO(wittjosiah): Factor out.
-  const manager = usePluginManager();
-  const resolve = useCallback(
-    (typename: string) =>
-      manager.context.getCapabilities(Capabilities.Metadata).find(({ id }) => id === typename)?.metadata ?? {},
-    [manager],
-  );
-  const space = getSpace(object);
-  const objectForms = useCapabilities(SpaceCapabilities.ObjectForm);
-  const schemaWhiteList = useCapabilities(ClientCapabilities.SchemaWhiteList);
-  const filter = useMemo(
-    () =>
-      Filter.or(
-        ...objectForms.map((form) => Filter.type(form.objectSchema)),
-        ...schemaWhiteList.flat().map((schema) => Filter.typename(Type.getTypename(schema))),
-      ),
-    [objectForms, schemaWhiteList],
-  );
-  const onLinkQuery = useCallback(
-    async (query?: string): Promise<CommandMenuGroup[]> => {
-      const name = query?.startsWith('@') ? query.slice(1).toLowerCase() : (query?.toLowerCase() ?? '');
-      const results = await space?.db.query(Query.select(filter)).run();
-      // TODO(wittjosiah): Use `Obj.Any` type.
-      const getLabel = (object: any) => {
-        const label = Obj.getLabel(object);
-        if (label) {
-          return label;
-        }
-
-        // TODO(wittjosiah): Remove metadata labels.
-        const type = Obj.getTypename(object)!;
-        const metadata = resolve(type);
-        return metadata.label?.(object) || ['object name placeholder', { ns: type, default: 'New object' }];
-      };
-      const items =
-        results?.objects
-          .filter((object) => toLocalizedString(getLabel(object), t).toLowerCase().includes(name))
-          // TODO(wittjosiah): Remove `any` type.
-          .map((object: any): CommandMenuItem => {
-            const metadata = resolve(Obj.getTypename(object)!);
-            const label = toLocalizedString(getLabel(object), t);
-            return {
-              id: object.id,
-              label,
-              icon: metadata.icon,
-              onSelect: (view, head) => {
-                const link = `[${label}][${Obj.getDXN(object)}]`;
-                if (query?.startsWith('@')) {
-                  insertAtLineStart(view, head, `!${link}\n`);
-                } else {
-                  insertAtCursor(view, head, `${link} `);
-                }
-              },
-            };
-          }) ?? [];
-      return [{ id: 'echo', items }];
-    },
-    [filter, resolve, space],
-  );
-
-  const editor = doc ? (
-    <DocumentEditor
-      id={fullyQualifiedId(object)}
-      role={role}
-      document={doc}
-      extensions={extensions}
-      viewMode={viewMode}
-      settings={settings}
-      scrollPastEnd={scrollPastEnd}
-      onViewModeChange={onViewModeChange}
-      onLinkQuery={space ? onLinkQuery : undefined}
-    />
-  ) : text ? (
-    <MarkdownEditor
-      id={id}
-      role={role}
-      initialValue={text.content}
-      extensions={extensions}
-      viewMode={viewMode}
-      toolbar={settings.toolbar}
-      inputMode={settings.editorInputMode}
-      scrollPastEnd={scrollPastEnd}
-      onViewModeChange={onViewModeChange}
-      onLinkQuery={space ? onLinkQuery : undefined}
-    />
-  ) : (
-    // TODO(burdon): Normalize with above.
-    <MarkdownEditor
-      id={id}
-      role={role}
-      initialValue={object.text}
-      extensions={extensions}
-      viewMode={viewMode}
-      toolbar={settings.toolbar}
-      inputMode={settings.editorInputMode}
-      scrollPastEnd={scrollPastEnd}
-      onViewModeChange={onViewModeChange}
-      onLinkQuery={space ? onLinkQuery : undefined}
-    />
-  );
-
-  return (
-    <>
-      {editor}
-      {previewBlocks.map(({ link, el }) => (
-        <PreviewBlock key={link.ref} link={link} el={el} />
-      ))}
-    </>
-  );
-};
-
-// TODO(wittjosiah): This shouldn't be "card" but "block".
-//   It's not a preview card but an interactive embedded object.
-const PreviewBlock = ({ link, el }: { link: PreviewLinkRef; el: HTMLElement }) => {
-  const echoDXN = useMemo(() => DXN.parse(link.ref).asEchoDXN(), [link.ref]);
-  const space = useSpace(echoDXN?.spaceId);
-  const [subject] = useQuery(space, Query.select(Filter.ids(echoDXN?.echoId ?? '')));
-  const data = useMemo(() => ({ subject }), [subject]);
-
-  return createPortal(<Surface role='card--transclusion' data={data} limit={1} />, el);
-};
-
-type DocumentEditorProps = Omit<MarkdownContainerProps, 'object' | 'extensionProviders' | 'editorStateStore'> &
-  Pick<MarkdownEditorProps, 'id' | 'scrollPastEnd' | 'extensions' | 'onLinkQuery'> & {
-    document: Markdown.Document;
-  };
-
-export const DocumentEditor = ({ id, document: doc, settings, viewMode, ...props }: DocumentEditorProps) => {
-  const space = getSpace(doc);
-
-  // Migrate gradually to `fallbackName`.
-  useEffect(() => {
-    if (typeof doc.fallbackName === 'string') {
-      return;
-    }
-
-    const fallbackName = doc.content?.target?.content ? getFallbackName(doc.content.target.content) : undefined;
-    if (fallbackName) {
-      doc.fallbackName = fallbackName;
-    }
-  }, [doc, doc.content]);
-
-  // File dragging.
-  const [upload] = useCapabilities(Capabilities.FileUploader);
-  const handleFileUpload = useMemo(() => {
-    if (space === undefined || upload === undefined) {
-      return undefined;
-    }
-
-    // TODO(burdon): Re-order props: space, file.
-    return async (file: File) => upload!(file, space);
-  }, [space, upload]);
-
-  const { graph } = useAppGraph();
-  const customActions = useMemo(() => {
-    return Rx.make((get) => {
-      const actions = get(graph.actions(id));
-      const nodes = actions.filter((action) => action.properties.disposition === 'toolbar');
-      return { nodes, edges: nodes.map((node) => ({ source: 'root', target: node.id })) };
-    });
-  }, [graph]);
-
-  return (
-    <MarkdownEditor
-      id={id}
-      initialValue={doc.content?.target?.content}
-      viewMode={viewMode}
-      toolbar={settings.toolbar}
-      customActions={customActions}
-      inputMode={settings.editorInputMode}
-      onFileUpload={handleFileUpload}
-      {...props}
-    />
-  );
-};
-
-export default MarkdownContainer;

package/src/components/MarkdownPreview/MarkdownPreview.stories.tsx

@@ -1,77 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type StoryObj, type Meta } from '@storybook/react-vite';
-import React from 'react';
-
-import { IntentPlugin } from '@dxos/app-framework';
-import { withPluginManager } from '@dxos/app-framework/testing';
-import { Markdown } from '@dxos/plugin-markdown/types';
-import { faker } from '@dxos/random';
-import { CardContainer } from '@dxos/react-ui-stack/testing';
-import { withTheme, withLayout } from '@dxos/storybook-utils';
-
-import { MarkdownPreview } from './MarkdownPreview';
-import { translations } from '../../translations';
-
-faker.seed(1234);
-
-const meta: Meta<typeof MarkdownPreview> = {
-  title: 'Cards/plugin-markdown',
-  component: MarkdownPreview,
-  render: ({ role, subject, ...args }) => {
-    return (
-      <CardContainer icon='ph--text-aa--regular' role={role}>
-        <MarkdownPreview role={role} subject={subject} {...args} />
-      </CardContainer>
-    );
-  },
-  decorators: [
-    withPluginManager({
-      plugins: [IntentPlugin()],
-    }),
-    withTheme,
-    withLayout(),
-  ],
-  parameters: {
-    layout: 'centered',
-    translations,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Popover: Story = {
-  args: {
-    role: 'card--popover',
-    subject: Markdown.makeDocument({
-      name: faker.lorem.words(3),
-      content: faker.lorem.paragraphs(3),
-    }),
-  },
-};
-
-export const Extrinsic: Story = {
-  args: {
-    role: 'card--extrinsic',
-    subject: Markdown.makeDocument({
-      name: faker.lorem.words(3),
-      content: faker.lorem.paragraphs(3),
-    }),
-  },
-};
-
-export const Intrinsic: Story = {
-  args: {
-    role: 'card--intrinsic',
-    subject: Markdown.makeDocument({
-      name: faker.lorem.words(3),
-      content: faker.lorem.paragraphs(3),
-    }),
-  },
-};

package/src/components/MarkdownPreview/MarkdownPreview.tsx

@@ -1,73 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { pipe } from 'effect';
-import React, { useCallback } from 'react';
-
-import { chain, createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
-import { Obj } from '@dxos/echo';
-import { type PreviewProps } from '@dxos/plugin-preview';
-import { fullyQualifiedId } from '@dxos/react-client/echo';
-import { Button, Icon, useTranslation } from '@dxos/react-ui';
-import { Card } from '@dxos/react-ui-stack';
-import { DataType } from '@dxos/schema';
-
-import { meta } from '../../meta';
-import { Markdown } from '../../types';
-import { getAbstract, getFallbackName } from '../../util';
-
-// TODO(burdon): Factor out.
-const getTitle = (subject: Markdown.Document | DataType.Text, fallback: string) => {
-  if (Obj.instanceOf(Markdown.Document, subject)) {
-    return subject.name ?? subject.fallbackName ?? getFallbackName(subject.content?.target?.content ?? fallback);
-  } else if (Obj.instanceOf(DataType.Text, subject)) {
-    return getFallbackName(subject.content);
-  }
-};
-
-// TODO(burdon): Factor out.
-const getSnippet = (subject: Markdown.Document | DataType.Text, fallback: string) => {
-  if (Obj.instanceOf(Markdown.Document, subject)) {
-    return getAbstract(subject.content?.target?.content ?? fallback);
-  } else if (Obj.instanceOf(DataType.Text, subject)) {
-    return getAbstract(subject.content);
-  }
-};
-
-export const MarkdownPreview = ({ subject, role }: PreviewProps<Markdown.Document | DataType.Text>) => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const { t } = useTranslation(meta.id);
-  const snippet = getSnippet(subject, t('fallback abstract'));
-
-  // TODO(wittjosiah): Factor out so this component isn't dependent on the app framework.
-  const handleNavigate = useCallback(
-    () =>
-      dispatch(
-        pipe(
-          createIntent(LayoutAction.UpdatePopover, {
-            part: 'popover',
-            subject: null,
-            options: { state: false, anchorId: '' },
-          }),
-          chain(LayoutAction.Open, { part: 'main', subject: [fullyQualifiedId(subject)] }),
-        ),
-      ),
-    [dispatch, subject],
-  );
-
-  return (
-    <Card.SurfaceRoot role={role}>
-      <Card.Heading>{getTitle(subject, t('fallback title'))}</Card.Heading>
-      {snippet && <Card.Text classNames='line-clamp-3 break-words col-span-2'>{snippet}</Card.Text>}
-      {role === 'card--popover' && (
-        <Card.Chrome>
-          <Button onClick={handleNavigate}>
-            <span className='grow'>{t('navigate to document label')}</span>
-            <Icon icon='ph--arrow-right--regular' />
-          </Button>
-        </Card.Chrome>
-      )}
-    </Card.SurfaceRoot>
-  );
-};

package/src/components/MarkdownPreview/index.ts

@@ -1,9 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { MarkdownPreview } from './MarkdownPreview';
-
-export * from './MarkdownPreview';
-
-export default MarkdownPreview;

package/src/components/MarkdownSettings/MarkdownSettings.tsx

@@ -1,105 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React from 'react';
-
-import { Input, Select, useTranslation } from '@dxos/react-ui';
-import { type EditorInputMode, EditorInputModes, type EditorViewMode, EditorViewModes } from '@dxos/react-ui-editor';
-import { DeprecatedFormContainer, DeprecatedFormInput } from '@dxos/react-ui-form';
-
-import { meta } from '../../meta';
-import { type Markdown } from '../../types';
-
-export const MarkdownSettings = ({ settings }: { settings: Markdown.Settings }) => {
-  const { t } = useTranslation(meta.id);
-
-  // TODO(wittjosiah): Add skill test confirmation for entering vim mode.
-  return (
-    <DeprecatedFormContainer>
-      <DeprecatedFormInput label={t('default view mode label')}>
-        <Select.Root
-          value={settings.defaultViewMode}
-          onValueChange={(value) => {
-            settings.defaultViewMode = value as EditorViewMode;
-          }}
-        >
-          <Select.TriggerButton />
-          <Select.Portal>
-            <Select.Content>
-              <Select.Viewport>
-                {EditorViewModes.map((mode) => (
-                  <Select.Option key={mode} value={mode}>
-                    {t(`${mode} mode label`, { ns: 'react-ui-editor' })}
-                  </Select.Option>
-                ))}
-              </Select.Viewport>
-            </Select.Content>
-          </Select.Portal>
-        </Select.Root>
-      </DeprecatedFormInput>
-
-      <DeprecatedFormInput label={t('editor input mode label')}>
-        <Select.Root
-          value={settings.editorInputMode ?? 'default'}
-          onValueChange={(value) => {
-            settings.editorInputMode = value as EditorInputMode;
-          }}
-        >
-          <Select.TriggerButton placeholder={t('select editor input mode placeholder')} />
-          <Select.Portal>
-            <Select.Content>
-              <Select.Viewport>
-                {EditorInputModes.map((mode) => (
-                  <Select.Option key={mode} value={mode}>
-                    {t(`settings editor input mode ${mode} label`)}
-                  </Select.Option>
-                ))}
-              </Select.Viewport>
-            </Select.Content>
-          </Select.Portal>
-        </Select.Root>
-      </DeprecatedFormInput>
-
-      <DeprecatedFormInput label={t('settings toolbar label')}>
-        <Input.Switch checked={settings.toolbar} onCheckedChange={(checked) => (settings.toolbar = !!checked)} />
-      </DeprecatedFormInput>
-
-      <DeprecatedFormInput label={t('settings numbered headings label')}>
-        <Input.Switch
-          checked={settings.numberedHeadings}
-          onCheckedChange={(checked) => (settings.numberedHeadings = !!checked)}
-        />
-      </DeprecatedFormInput>
-
-      <DeprecatedFormInput label={t('settings folding label')}>
-        <Input.Switch checked={settings.folding} onCheckedChange={(checked) => (settings.folding = !!checked)} />
-      </DeprecatedFormInput>
-
-      <DeprecatedFormInput label={t('settings experimental label')}>
-        <Input.Switch
-          checked={settings.experimental}
-          onCheckedChange={(checked) => (settings.experimental = !!checked)}
-        />
-      </DeprecatedFormInput>
-
-      <DeprecatedFormInput
-        label={t('settings debug label')}
-        secondary={
-          settings.debug ? (
-            <Input.Root>
-              <Input.TextArea
-                rows={5}
-                value={settings.typewriter}
-                onChange={({ target: { value } }) => (settings.typewriter = value)}
-                placeholder={t('settings debug placeholder')}
-              />
-            </Input.Root>
-          ) : undefined
-        }
-      >
-        <Input.Switch checked={settings.debug} onCheckedChange={(checked) => (settings.debug = !!checked)} />
-      </DeprecatedFormInput>
-    </DeprecatedFormContainer>
-  );
-};

package/src/components/MarkdownSettings/index.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export * from './MarkdownSettings';