@dxos/plugin-markdown 0.8.4-main.422d1c7879 → 0.8.4-main.43cb759274

package/src/containers/MarkdownCard/MarkdownCard.tsx

@@ -26,34 +26,41 @@ export const MarkdownCard = ({ subject }: MarkdownCardProps) => {
   const info = getInfo(subject);
 
   return (
-    <Card.Content>
+    <Card.Body>
       {snippet && (
-        <Card.Section className='relative px-1'>
-          <MarkdownEditorProvider id={subject.id} viewMode='readonly' extensions={extensions}>
-            {(editorRootProps) => (
-              <Editor.Root {...editorRootProps}>
-                <MarkdownEditor.Content initialValue={snippet} slots={{ content: { className: 'm-0' } }} />
-              </Editor.Root>
-            )}
-          </MarkdownEditorProvider>
-          <div
-            role='none'
-            className={mx(
-              'z-10 absolute bottom-0 inset-x-0 h-12 w-full',
-              'bg-gradient-to-b from-transparent to-(--surface-bg) pointer-events-none',
-            )}
-          />
+        <Card.Section className='relative'>
+          <Card.Row fullWidth>
+            <MarkdownEditorProvider id={subject.id} viewMode='readonly' extensions={extensions}>
+              {(editorRootProps) => (
+                <Editor.Root {...editorRootProps}>
+                  <MarkdownEditor.Content initialValue={snippet} slots={{ content: { className: 'px-2!' } }} />
+                </Editor.Root>
+              )}
+            </MarkdownEditorProvider>
+            <Fade />
+          </Card.Row>
         </Card.Section>
       )}
       <Card.Section>
-        <Card.Text classNames='px-1.5 text-xs text-description'>
-          {info.words} {t('words.label', { count: info.words })}
-        </Card.Text>
+        <Card.Row fullWidth>
+          <Card.Text classNames='px-2 text-xs text-description'>
+            {info.words} {t('words.label', { count: info.words })}
+          </Card.Text>
+        </Card.Row>
       </Card.Section>
-    </Card.Content>
+    </Card.Body>
   );
 };
 
+const Fade = () => (
+  <div
+    className={mx(
+      'z-10 absolute bottom-0 inset-x-0 h-12 w-full',
+      'bg-gradient-to-b from-transparent to-(--surface-bg) pointer-events-none',
+    )}
+  />
+);
+
 const getSnippet = (subject: Markdown.Document | Text.Text, fallback?: string, maxLines = 16) => {
   if (Obj.instanceOf(Markdown.Document, subject)) {
     return Obj.getDescription(subject) || getContentSnippet(subject.content?.target?.content ?? fallback, maxLines);

package/src/containers/MarkdownCard/snippet.ts

@@ -26,7 +26,9 @@ export const snippet = ({ height, scale = 1 }: SnippetOptions) => {
     EditorState.readOnly.of(true),
     EditorView.editable.of(false),
     EditorState.transactionFilter.of((tr) => {
-      if (tr.selection) return []; // Drop any selection changes.
+      if (tr.selection) {
+        return [];
+      } // Drop any selection changes.
       return tr;
     }),
     EditorView.theme({

package/src/containers/index.ts

@@ -4,7 +4,8 @@
 
 import { type ComponentType, lazy } from 'react';
 
-export type { MarkdownContainerProps } from './MarkdownContainer';
+export type { MarkdownArticleProps } from './MarkdownArticle';
 
 export const MarkdownCard: ComponentType<any> = lazy(() => import('./MarkdownCard'));
-export const MarkdownContainer: ComponentType<any> = lazy(() => import('./MarkdownContainer'));
+export const EditableMarkdownCard: ComponentType<any> = lazy(() => import('./EditableMarkdownCard'));
+export const MarkdownArticle: ComponentType<any> = lazy(() => import('./MarkdownArticle'));

package/src/hooks/useExtensions.tsx

@@ -20,11 +20,9 @@ import {
   Cursor,
   type EditorStateStore,
   EditorView,
-  type EditorViewMode,
   type Extension,
   InputModeExtensions,
   type PreviewOptions,
-  type RenderCallback,
   createDataExtensions,
   decorateMarkdown,
   documentId,
@@ -35,8 +33,9 @@ import {
   preview,
   replacer,
   selectionState,
-  typewriter,
+  snippets,
 } from '@dxos/ui-editor';
+import { type EditorViewMode, type RenderCallback } from '@dxos/ui-editor/types';
 import { isTruthy, safeUrl } from '@dxos/util';
 
 import { Markdown } from '#types';
@@ -113,7 +112,6 @@ export const useExtensions = ({
       settings?.editorInputMode,
       settings?.folding,
       settings?.numberedHeadings,
-      settings?.typewriter,
       platform,
       onSelectObject,
     ],
@@ -188,9 +186,9 @@ const createBaseExtensions = ({
   }
 
   if (settings?.debug) {
-    const items = settings.typewriter?.split(/[,\n]/) ?? '';
+    const items = settings.snippets?.split(/[,\n]/) ?? '';
     if (items) {
-      extensions.push(typewriter({ items }));
+      extensions.push(snippets({ items }));
     }
   }
 
@@ -202,12 +200,18 @@ const selectionChange = (selectionManager: SelectionManager) => {
     const id = update.state.facet(documentId);
     const cursorConverter = update.state.facet(Cursor.converter);
     const selection = update.state.selection;
+    // NOTE: Filter on numeric offsets BEFORE converting to cursor strings.
+    // Cursors are opaque (Automerge-encoded), so a lexicographic `to > from`
+    // comparison is nondeterministic — it would let some cursor-placements
+    // (where from === to numerically) through and reject genuine selections
+    // depending on encoding, which made the comment button's enabled state
+    // appear random across different lines.
     const ranges = selection.ranges
+      .filter((range) => range.to > range.from)
       .map((range) => ({
         from: cursorConverter.toCursor(range.from),
         to: cursorConverter.toCursor(range.to),
-      }))
-      .filter(({ from, to }) => to > from);
+      }));
 
     selectionManager.updateMultiRange(id, ranges);
   }, 100);

package/src/hooks/useLinkQuery.ts

@@ -5,11 +5,9 @@
 import * as Option from 'effect/Option';
 import { useCallback, useMemo } from 'react';
 
-import { usePluginManager } from '@dxos/app-framework/ui';
-import { AppCapabilities } from '@dxos/app-toolkit';
-import { type Database, Filter, Obj, Query, Type } from '@dxos/echo';
-import { EntityKind, SystemTypeAnnotation, getTypeAnnotation } from '@dxos/echo/internal';
-import { toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Annotation, type Database, Filter, Obj, Query, Type } from '@dxos/echo';
+import { EntityKind, HiddenAnnotation, getTypeAnnotation } from '@dxos/echo/internal';
+import { type Label, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { type EditorMenuGroup, type EditorMenuItem } from '@dxos/react-ui-editor';
 import { insertAtCursor, insertAtLineStart } from '@dxos/ui-editor';
 
@@ -18,19 +16,12 @@ import { Markdown } from '../types';
 export const useLinkQuery = (db: Database.Database | undefined) => {
   const { t } = useTranslation();
 
-  const manager = usePluginManager();
-  const resolve = useCallback(
-    (typename: string) =>
-      manager.capabilities.getAll(AppCapabilities.Metadata).find(({ id }) => id === typename)?.metadata ?? {},
-    [manager],
-  );
-
   const filter = useMemo(
     () =>
       Filter.or(
-        ...(db?.schemaRegistry.query({ location: ['database', 'runtime'] }).runSync() ?? [])
-          .filter((schema) => getTypeAnnotation(schema)?.kind !== EntityKind.Relation)
-          .filter((schema) => !SystemTypeAnnotation.get(schema).pipe(Option.getOrElse(() => false)))
+        ...(db ? db.graph.registry.list().filter(Type.isType) : [])
+          .filter((schema) => getTypeAnnotation(Type.getSchema(schema))?.kind !== EntityKind.Relation)
+          .filter((schema) => !HiddenAnnotation.get(Type.getSchema(schema)).pipe(Option.getOrElse(() => false)))
           .map((schema) => Filter.typename(Type.getTypename(schema))),
       ),
     [db],
@@ -42,32 +33,26 @@ export const useLinkQuery = (db: Database.Database | undefined) => {
       const name = query?.startsWith('@') ? query.slice(1).toLowerCase() : (query?.toLowerCase() ?? '');
       const results = await db?.query(Query.select(filter)).run();
 
-      // TODO(wittjosiah): Use `Obj.Unknown` type.
-      const getLabel = (object: any) => {
-        const label = Obj.getLabel(object);
-        if (label) {
-          return label;
-        }
-
-        // TODO(wittjosiah): Remove metadata labels.
+      const getLabel = (object: Obj.Unknown): Label => {
         const type = Obj.getTypename(object)!;
-        const metadata = resolve(type);
-        return metadata.label?.(object) || ['object-name.placeholder', { ns: type, defaultValue: 'New object' }];
+        return Obj.getLabel(object) ?? ['object-name.placeholder', { ns: type, defaultValue: 'New object' }];
       };
 
       const items =
         results
           ?.filter((object) => toLocalizedString(getLabel(object), t).toLowerCase().includes(name))
-          // TODO(wittjosiah): Remove `any` type.
-          .map((object: any): EditorMenuItem => {
-            const metadata = resolve(Obj.getTypename(object)!);
+          .map((object: Obj.Unknown): EditorMenuItem => {
+            const type = Obj.getType(object);
+            const icon = type
+              ? Option.getOrUndefined(Annotation.IconAnnotation.get(Type.getSchema(type)))?.icon
+              : undefined;
             const label = toLocalizedString(getLabel(object), t);
             return {
               id: object.id,
               label,
-              icon: metadata.icon,
+              icon,
               onSelect: ({ view, head }) => {
-                const link = `[${label}](${Obj.getDXN(object)})`;
+                const link = `[${label}](${Obj.getURI(object)})`;
                 // "@@" inserts a block embed on its own line instead of an inline link.
                 if (query?.startsWith('@')) {
                   insertAtLineStart(view, head, `!${link}\n`);
@@ -81,13 +66,13 @@ export const useLinkQuery = (db: Database.Database | undefined) => {
       // Add "Create new document" option at the end.
       const createItem: EditorMenuItem = {
         id: 'create-document',
-        label: ['add-object.label', { ns: Markdown.Document.typename }],
+        label: ['add-object.label', { ns: Type.getTypename(Markdown.Document) }],
         icon: 'ph--plus--regular',
         onSelect: ({ view, head }) => {
           const doc = Markdown.make({ name: name || undefined });
           db?.add(doc);
-          const label = name || t('object-name.placeholder', { ns: Markdown.Document.typename });
-          const link = `[${label}](${Obj.getDXN(doc)})`;
+          const label = name || t('object-name.placeholder', { ns: Type.getTypename(Markdown.Document) });
+          const link = `[${label}](${Obj.getURI(doc)})`;
           if (query?.startsWith('@')) {
             insertAtLineStart(view, head, `!${link}\n`);
           } else {
@@ -101,7 +86,7 @@ export const useLinkQuery = (db: Database.Database | undefined) => {
         { id: 'create', items: [createItem] },
       ];
     },
-    [db, filter, resolve, t],
+    [db, filter, t],
   );
 
   return handleLinkQuery;

package/src/index.ts

@@ -2,13 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
-export { MarkdownCapabilities, MarkdownEvents } from './types';
-
+export * from './blueprints';
 export * from './meta';
+export * from './operations';
 export * from './types';
 export * from './util';
-
-export * from './MarkdownPlugin';
-
-export { MarkdownEditor, MarkdownEditorProvider } from './components';
-export type { MarkdownEditorEditorRootProps } from './components';

package/src/meta.ts

@@ -2,18 +2,28 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type Plugin } from '@dxos/app-framework';
+import { Plugin } from '@dxos/app-framework';
+import { DXN } from '@dxos/keys';
 import { trim } from '@dxos/util';
 
-export const meta: Plugin.Meta = {
-  id: 'org.dxos.plugin.markdown',
+export const meta = Plugin.makeMeta({
+  key: DXN.make('org.dxos.plugin.markdown'),
   name: 'Markdown',
+  author: 'DXOS',
   description: trim`
-    Full-featured collaborative markdown editor with real-time editing, inline comments, and rich formatting.
-    Supports AI-powered editing assistance and seamlessly integrates with other workspace objects.
+    A full-featured markdown editor for authoring documents in your space. Edits flow through a collaborative CodeMirror surface backed by ECHO Text, so every keystroke replicates to other peers in real time without merge conflicts or lost work.
+
+    Documents can be opened in source, preview, or read-only mode and rendered as a full-surface article or as embeddable cards. An optional formatting toolbar exposes headings, lists, links, and other common markdown actions, and dispositional toolbar actions contributed by other plugins are surfaced inline alongside it.
+
+    The editor integrates with the rest of the workspace through @ references that link to any ECHO object, image and file uploads stored in the active space, and anchored comment threads on text ranges. Comments can optionally be routed to an AI agent on every message or only on @mention.
+
+    A built-in blueprint exposes create, open, and update operations as tools for AI agents. Updates are applied as compact find-and-replace diffs against the document, making it safe for agents to edit large documents incrementally while you continue collaborating.
   `,
   icon: 'ph--text-aa--regular',
   iconHue: 'indigo',
   source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-markdown',
-  screenshots: ['https://dxos.network/plugin-details-markdown-dark.png'],
-};
+  screenshots: [
+    'https://customer-5rxcjpyab08avpmn.cloudflarestream.com/cdf2656365bb1fd327c1fc2105d75e5a/iframe?poster=https%3A%2F%2Fcustomer-5rxcjpyab08avpmn.cloudflarestream.com%2Fcdf2656365bb1fd327c1fc2105d75e5a%2Fthumbnails%2Fthumbnail.jpg%3Ftime%3D%26height%3D600',
+    'https://dxos.network/plugin-details-markdown-dark.png',
+  ],
+});

package/src/operations/create-markdown.ts

@@ -4,12 +4,11 @@
 
 import * as Effect from 'effect/Effect';
 
-import { Operation } from '@dxos/operation';
+import { Operation } from '@dxos/compute';
 
-import { Markdown } from '../types';
-import { CreateMarkdown } from './definitions';
+import { Markdown, MarkdownOperation } from '../types';
 
-const handler: Operation.WithHandler<typeof CreateMarkdown> = CreateMarkdown.pipe(
+const handler: Operation.WithHandler<typeof MarkdownOperation.CreateMarkdown> = MarkdownOperation.CreateMarkdown.pipe(
   Operation.withHandler(({ name, content }) =>
     Effect.succeed({
       object: Markdown.make({ name, content }),