@dxos/plugin-markdown 0.8.4-main.7ace549 → 0.8.4-main.937b3ca

package/src/hooks/useExtensions.tsx

@@ -6,16 +6,17 @@ 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 } from '@dxos/app-framework';
-import { useIntentDispatcher } from '@dxos/app-framework/react';
+import { Common } from '@dxos/app-framework';
+import { useOperationInvoker } from '@dxos/app-framework/react';
 import { debounceAndThrottle } from '@dxos/async';
 import { Obj } from '@dxos/echo';
 import { createDocAccessor } from '@dxos/echo-db';
 import { invariant } from '@dxos/invariant';
-import { getSpace } from '@dxos/react-client/echo';
+import { getSpace, useObject } 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 { Text } from '@dxos/schema';
 import {
   Cursor,
   type EditorStateStore,
@@ -36,9 +37,8 @@ import {
   replacer,
   selectionState,
   typewriter,
-} from '@dxos/react-ui-editor';
-import { defaultTx } from '@dxos/react-ui-theme';
-import { Text } from '@dxos/schema';
+} from '@dxos/ui-editor';
+import { defaultTx } from '@dxos/ui-theme';
 import { isTruthy } from '@dxos/util';
 
 import { Markdown } from '../types';
@@ -49,7 +49,7 @@ export type DocumentType = Markdown.Document | Text.Text | { id: string; text: s
 export type ExtensionsOptions = {
   id: string;
   object?: DocumentType;
-  dispatch?: PromiseIntentDispatcher;
+  invokePromise?: Common.Capability.OperationInvoker['invokePromise'];
   settings?: Markdown.Settings;
   selectionManager?: SelectionManager;
   viewMode?: EditorViewMode;
@@ -67,16 +67,16 @@ export const useExtensions = ({
   editorStateStore,
   previewOptions,
 }: ExtensionsOptions): Extension[] => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { invokePromise } = useOperationInvoker();
   const identity = useIdentity();
   const space = getSpace(object);
 
-  let target: Obj.Any | undefined;
-  if (Obj.instanceOf(Markdown.Document, object)) {
-    target = (object as Markdown.Document).content.target;
-  } else if (Obj.instanceOf(Text.Text, object)) {
-    target = object;
-  }
+  // Get the content reference from Document objects.
+  const contentRef = Obj.instanceOf(Markdown.Document, object) ? (object as Markdown.Document).content : undefined;
+  // Use useObject to trigger re-render when the reference loads (returns snapshot for reactivity).
+  useObject(contentRef);
+  // Get the actual live object target via .target (needed for createDocAccessor).
+  const target = contentRef?.target ?? (Obj.instanceOf(Text.Text, object) ? object : undefined);
 
   // TODO(wittjosiah): Autocomplete is not working and this query is causing performance issues.
   // TODO(burdon): Unsubscribe.
@@ -92,13 +92,13 @@ export const useExtensions = ({
         selectionManager,
         viewMode,
         previewOptions,
-        dispatch,
+        invokePromise,
       }),
     [
       id,
       object,
       viewMode,
-      dispatch,
+      invokePromise,
       previewOptions,
       settings,
       settings?.debug,
@@ -144,7 +144,7 @@ export const useExtensions = ({
 const createBaseExtensions = ({
   id,
   object,
-  dispatch,
+  invokePromise,
   settings,
   selectionManager,
   viewMode,
@@ -169,17 +169,12 @@ const createBaseExtensions = ({
           // TODO(wittjosiah): For internal links, consider ignoring the link text and rendering the label of the object being linked to.
           // TODO(burdon): Create dx-tag.
           renderLinkButton:
-            dispatch && (object || id)
-              ? createLinkRenderer((id: string) => {
-                  void dispatch(
-                    createIntent(LayoutAction.Open, {
-                      part: 'main',
-                      subject: [id],
-                      options: {
-                        pivotId: object && Obj.isObject(object) ? Obj.getDXN(object).toString() : id,
-                      },
-                    }),
-                  );
+            invokePromise && (object || id)
+              ? createLinkRenderer((targetId: string) => {
+                  void invokePromise(Common.LayoutOperation.Open, {
+                    subject: [targetId],
+                    pivotId: object && Obj.isObject(object) ? Obj.getDXN(object).toString() : id,
+                  });
                 })
               : undefined,
         }),

package/src/hooks/useLinkQuery.ts

@@ -5,41 +5,41 @@
 import * as Option from 'effect/Option';
 import { useCallback, useMemo } from 'react';
 
-import { Capabilities } from '@dxos/app-framework';
+import { Common } from '@dxos/app-framework';
 import { usePluginManager } from '@dxos/app-framework/react';
-import { Filter, Obj, Query, Type } from '@dxos/echo';
+import { type Database, Filter, Obj, Query, Type } from '@dxos/echo';
 import { EntityKind, SystemTypeAnnotation, getTypeAnnotation } from '@dxos/echo/internal';
-import { type Space } from '@dxos/react-client/echo';
 import { toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { type EditorMenuGroup, type EditorMenuItem, insertAtCursor, insertAtLineStart } from '@dxos/react-ui-editor';
+import { type EditorMenuGroup, type EditorMenuItem } from '@dxos/react-ui-editor';
+import { insertAtCursor, insertAtLineStart } from '@dxos/ui-editor';
 
-export const useLinkQuery = (space: Space | undefined) => {
+export const useLinkQuery = (db: Database.Database | undefined) => {
   const { t } = useTranslation();
 
   const manager = usePluginManager();
   const resolve = useCallback(
     (typename: string) =>
-      manager.context.getCapabilities(Capabilities.Metadata).find(({ id }) => id === typename)?.metadata ?? {},
+      manager.capabilities.getAll(Common.Capability.Metadata).find(({ id }) => id === typename)?.metadata ?? {},
     [manager],
   );
 
   const filter = useMemo(
     () =>
       Filter.or(
-        ...(space?.db.schemaRegistry.query({ location: ['database', 'runtime'] }).runSync() ?? [])
+        ...(db?.schemaRegistry.query({ location: ['database', 'runtime'] }).runSync() ?? [])
           .filter((schema) => getTypeAnnotation(schema)?.kind !== EntityKind.Relation)
           .filter((schema) => !SystemTypeAnnotation.get(schema).pipe(Option.getOrElse(() => false)))
           .map((schema) => Filter.typename(Type.getTypename(schema))),
       ),
-    [space],
+    [db],
   );
 
   const handleLinkQuery = useCallback(
     async (query?: string): Promise<EditorMenuGroup[]> => {
       const name = query?.startsWith('@') ? query.slice(1).toLowerCase() : (query?.toLowerCase() ?? '');
-      const results = await space?.db.query(Query.select(filter)).run();
+      const results = await db?.query(Query.select(filter)).run();
 
-      // TODO(wittjosiah): Use `Obj.Any` type.
+      // TODO(wittjosiah): Use `Obj.Unknown` type.
       const getLabel = (object: any) => {
         const label = Obj.getLabel(object);
         if (label) {
@@ -53,8 +53,8 @@ export const useLinkQuery = (space: Space | undefined) => {
       };
 
       const items =
-        results?.objects
-          .filter((object) => toLocalizedString(getLabel(object), t).toLowerCase().includes(name))
+        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)!);
@@ -76,7 +76,7 @@ export const useLinkQuery = (space: Space | undefined) => {
 
       return [{ id: 'echo', items }];
     },
-    [space, filter, resolve],
+    [db, filter, resolve],
   );
 
   return handleLinkQuery;

package/src/hooks/useSelectCurrentThread.tsx

@@ -3,13 +3,14 @@
 //
 
 import { EditorView } from '@codemirror/view';
-import * as Schema from 'effect/Schema';
+import * as Effect from 'effect/Effect';
 import { useMemo } from 'react';
 
-import { LayoutAction, createResolver } from '@dxos/app-framework';
-import { useIntentResolver } from '@dxos/app-framework/react';
+import { Common } from '@dxos/app-framework';
+import { useOperationResolver } from '@dxos/app-framework/react';
 import { invariant } from '@dxos/invariant';
-import { Cursor, setSelection } from '@dxos/react-ui-editor';
+import { OperationResolver } from '@dxos/operation';
+import { Cursor, setSelection } from '@dxos/ui-editor';
 
 import { meta } from '../meta';
 
@@ -17,50 +18,44 @@ import { meta } from '../meta';
  * Handle scrolling and selection of the current thread in a markdown editor.
  */
 export const useSelectCurrentThread = (editorView: EditorView | null, documentId: string) => {
-  const scrollIntoViewResolver = useMemo(
+  const scrollIntoViewHandler = useMemo(
     () =>
-      createResolver({
-        intent: LayoutAction.UpdateLayout,
+      OperationResolver.make({
+        operation: Common.LayoutOperation.ScrollIntoView,
         position: 'hoist',
-        filter: (
-          data,
-        ): data is {
-          part: 'current';
-          subject: string;
-          options: { cursor: string };
-        } => {
-          if (!Schema.is(LayoutAction.ScrollIntoView.fields.input)(data)) {
-            return false;
-          }
-
-          return !!editorView && data.subject === documentId && !!data.options?.cursor;
-        },
-        resolve: ({ options: { cursor } }) => {
-          invariant(editorView, 'Editor view is not defined.');
-          const range = Cursor.getRangeFromCursor(editorView.state, cursor!);
-          if (range) {
-            const selection = editorView.state.selection.main.from !== range.from ? { anchor: range.from } : undefined;
-            const effects = [
-              // NOTE: This does not use the DOM scrollIntoView function.
-              EditorView.scrollIntoView(range.from, {
-                y: 'start',
-                yMargin: 96,
-              }),
-            ];
-            if (selection) {
-              // Update the editor selection to get bi-directional highlighting.
-              effects.push(setSelection.of({ current: documentId }));
+        filter: (input) => !!editorView && input.subject === documentId && !!input.cursor,
+        handler: (input) =>
+          Effect.sync(() => {
+            invariant(editorView, 'Editor view is not defined.');
+            const cursor = input.cursor;
+            if (!cursor) {
+              return;
             }
+            const range = Cursor.getRangeFromCursor(editorView.state, cursor);
+            if (range) {
+              const selection =
+                editorView.state.selection.main.from !== range.from ? { anchor: range.from } : undefined;
+              const effects = [
+                // NOTE: This does not use the DOM scrollIntoView function.
+                EditorView.scrollIntoView(range.from, {
+                  y: 'start',
+                  yMargin: 96,
+                }),
+              ];
+              if (selection) {
+                // Update the editor selection to get bi-directional highlighting.
+                effects.push(setSelection.of({ current: documentId }));
+              }
 
-            editorView.dispatch({
-              effects,
-              selection: selection ? { anchor: range.from } : undefined,
-            });
-          }
-        },
+              editorView.dispatch({
+                effects,
+                selection: selection ? { anchor: range.from } : undefined,
+              });
+            }
+          }),
       }),
     [documentId, editorView],
   );
 
-  useIntentResolver(meta.id, scrollIntoViewResolver);
+  useOperationResolver(meta.id, scrollIntoViewHandler);
 };

package/src/index.ts

@@ -2,8 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-export { MarkdownCapabilities } from './capabilities';
-export { MarkdownEvents } from './events';
+export { MarkdownCapabilities, MarkdownEvents } from './types';
 
 export * from './meta';
 export * from './types';

package/src/meta.ts

@@ -2,10 +2,10 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type PluginMeta } from '@dxos/app-framework';
+import { type Plugin } from '@dxos/app-framework';
 import { trim } from '@dxos/util';
 
-export const meta: PluginMeta = {
+export const meta: Plugin.Meta = {
   id: 'dxos.org/plugin/markdown',
   name: 'Markdown',
   description: trim`

package/src/testing.ts

@@ -7,15 +7,15 @@ import * as Effect from 'effect/Effect';
 
 import { SpaceProperties } from '@dxos/client-protocol';
 import { Obj, Ref } from '@dxos/echo';
-import { DatabaseService } from '@dxos/functions';
+import { Database } from '@dxos/echo';
 import { Collection } from '@dxos/schema';
 
 // TODO(wittjosiah): Factor out.
-export const WithProperties = <A, E, R>(effect: Effect.Effect<A, E, R>): Effect.Effect<A, E, R | DatabaseService> =>
+export const WithProperties = <A, E, R>(effect: Effect.Effect<A, E, R>): Effect.Effect<A, E, R | Database.Service> =>
   Effect.zipRight(
     Effect.gen(function* () {
       // TODO(wittjosiah): Remove cast.
-      yield* DatabaseService.add(
+      yield* Database.Service.add(
         Obj.make(SpaceProperties, {
           [Collection.Collection.typename]: Ref.make(Collection.make()),
         }) as any,

package/src/types/Markdown.ts

@@ -6,8 +6,8 @@ import * as Schema from 'effect/Schema';
 
 import { Obj, Ref, Type } from '@dxos/echo';
 import { DescriptionAnnotation, FormInputAnnotation, LabelAnnotation } from '@dxos/echo/internal';
-import { EditorInputMode, EditorViewMode } from '@dxos/react-ui-editor/types';
 import { Text } from '@dxos/schema';
+import { EditorInputMode, EditorViewMode } from '@dxos/ui-editor/types';
 
 /**
  * Document Item type.
@@ -18,7 +18,7 @@ export const Document = Schema.Struct({
   fallbackName: Schema.String.pipe(FormInputAnnotation.set(false), Schema.optional),
   content: Type.Ref(Text.Text).pipe(FormInputAnnotation.set(false)),
 }).pipe(
-  Type.Obj({
+  Type.object({
     typename: 'dxos.org/type/Document',
     version: '0.1.0',
   }),

package/src/types/MarkdownAction.ts

@@ -4,26 +4,56 @@
 
 import * as Schema from 'effect/Schema';
 
-import { EditorViewMode } from '@dxos/react-ui-editor/types';
+import { Capability } from '@dxos/app-framework';
+import { Operation } from '@dxos/operation';
+import { SpaceSchema } from '@dxos/react-client/echo';
+import { Collection } from '@dxos/schema';
+import { EditorViewMode } from '@dxos/ui-editor/types';
 
 import { meta } from '../meta';
 
 import { Document } from './Markdown';
 
-export class Create extends Schema.TaggedClass<Create>()(`${meta.id}/action/create`, {
-  input: Schema.Struct({
-    name: Schema.optional(Schema.String),
-    content: Schema.optional(Schema.String),
-  }),
-  output: Schema.Struct({
-    object: Document,
-  }),
-}) {}
-
-export class SetViewMode extends Schema.TaggedClass<SetViewMode>()(`${meta.id}/action/set-view-mode`, {
-  input: Schema.Struct({
-    id: Schema.String,
-    viewMode: EditorViewMode,
-  }),
-  output: Schema.Void,
-}) {}
+const MARKDOWN_OPERATION = `${meta.id}/operation`;
+
+export namespace MarkdownOperation {
+  export const OnCreateSpace = Operation.make({
+    meta: { key: `${MARKDOWN_OPERATION}/on-create-space`, name: 'On Create Space' },
+    services: [Capability.Service],
+    schema: {
+      input: Schema.Struct({
+        space: SpaceSchema,
+        rootCollection: Collection.Collection,
+        isDefault: Schema.optional(Schema.Boolean),
+      }),
+      output: Schema.Void,
+    },
+  });
+
+  export const Create = Operation.make({
+    meta: { key: `${MARKDOWN_OPERATION}/create`, name: 'Create Markdown Document' },
+    services: [Capability.Service],
+    schema: {
+      input: Schema.Struct({
+        name: Schema.optional(Schema.String),
+        content: Schema.optional(Schema.String),
+      }),
+      output: Schema.Struct({
+        object: Document,
+      }),
+    },
+  });
+
+  // TODO(wittjosiah): This appears to be unused.
+  export const SetViewMode = Operation.make({
+    meta: { key: `${MARKDOWN_OPERATION}/set-view-mode`, name: 'Set View Mode' },
+    services: [Capability.Service],
+    schema: {
+      input: Schema.Struct({
+        id: Schema.String,
+        viewMode: EditorViewMode,
+      }),
+      output: Schema.Void,
+    },
+  });
+}

package/src/types/capabilities.ts

@@ -0,0 +1,38 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Atom } from '@effect-atom/atom-react';
+import * as Schema from 'effect/Schema';
+
+import { Capability } from '@dxos/app-framework';
+import { type EditorStateStore, type EditorViewMode } from '@dxos/ui-editor';
+
+import { meta } from '../meta';
+
+import type * as Markdown from './Markdown';
+import { type MarkdownExtensionProvider } from './types';
+
+/** Schema for persisted markdown state. */
+export const MarkdownStateSchema = Schema.mutable(
+  Schema.Struct({
+    viewMode: Schema.Record({ key: Schema.String, value: Schema.String }),
+  }),
+);
+
+export type MarkdownState = {
+  viewMode: Record<string, EditorViewMode>;
+};
+
+export namespace MarkdownCapabilities {
+  export const Settings = Capability.make<Atom.Writable<Markdown.Settings>>(`${meta.id}/capability/settings`);
+
+  /** Persisted state atom for view mode per document. */
+  export const State = Capability.make<Atom.Writable<MarkdownState>>(`${meta.id}/capability/state`);
+
+  /** Editor state store for cursor positions, scroll state, etc. */
+  export const EditorState = Capability.make<EditorStateStore>(`${meta.id}/capability/editor-state`);
+
+  // TODO(burdon): Move to ./types (external API)?
+  export const Extensions = Capability.make<MarkdownExtensionProvider[]>(`${meta.id}/capability/extensions`);
+}

package/src/types/events.ts

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

package/src/types/index.ts

@@ -3,6 +3,9 @@
 //
 
 export * as MarkdownAction from './MarkdownAction';
+export { MarkdownOperation } from './MarkdownAction';
 export * as Markdown from './Markdown';
 
+export * from './capabilities';
+export * from './events';
 export * from './types';

package/src/types/types.ts

@@ -2,8 +2,9 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type Extension } from '@dxos/react-ui-editor';
-import { type EditorViewMode } from '@dxos/react-ui-editor/types';
+import { type Extension } from '@codemirror/state';
+
+import { type EditorViewMode } from '@dxos/ui-editor/types';
 
 import { type Document } from './Markdown';
 

package/src/util.test.ts

@@ -0,0 +1,44 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { describe, expect, it } from 'vitest';
+
+import { trim } from '@dxos/util';
+
+import { getFallbackName } from './util';
+
+describe('markdown utils', () => {
+  it('getFallbackName', () => {
+    const tests = [
+      {
+        content: '',
+        expected: '',
+      },
+      {
+        content: trim`
+          ![img](https://dxos.network/dxos-logotype-blue.png)
+
+          # Welcome to Composer by DXOS
+
+          ## What is Composer?
+        `,
+        expected: 'Welcome to Composer by DXOS',
+      },
+      {
+        content: trim`
+          ![img](https://dxos.network/dxos-logotype-blue.png)
+
+          ---
+
+          This document is about the decetralized platform DXOS.
+        `,
+        expected: 'This document is about the…',
+      },
+    ];
+
+    tests.forEach(({ content, expected }) => {
+      expect(getFallbackName(content)).toBe(expected);
+    });
+  });
+});

package/src/util.tsx

@@ -32,23 +32,93 @@ export const isMarkdownProperties = (data: unknown): data is MarkdownProperties
 
 const nonTitleChars = /[^\w ]/g;
 
-export const getFallbackName = (content = '') => {
-  return content.substring(0, 31).split('\n')[0].replaceAll(nonTitleChars, '').trim();
+// Lines matching these patterns are skipped.
+const skipPatterns = [
+  /^!\[/, // Image.
+  /^---\s*$/, // Horizontal rule.
+  /^```/, // Code block fence.
+  /^\s*$/, // Empty or whitespace-only.
+];
+
+// Patterns to extract title text (first capture group is used).
+const titlePatterns = [
+  /^#{1,6}\s+(.+)/, // Heading.
+];
+
+/**
+ * Extracts a fallback name by scanning lines for the first heading or text fragment.
+ */
+export const getFallbackName = (content = ''): string => {
+  const len = content.length;
+
+  let i = 0;
+  while (i < len) {
+    // Find end of line.
+    let lineEnd = i;
+    while (lineEnd < len && content[lineEnd] !== '\n') {
+      lineEnd++;
+    }
+
+    const line = content.slice(i, lineEnd).trim();
+    i = lineEnd + 1;
+
+    // Skip lines matching skip patterns.
+    if (skipPatterns.some((pattern) => pattern.test(line))) {
+      continue;
+    }
+
+    // Check for title patterns.
+    for (const pattern of titlePatterns) {
+      const match = pattern.exec(line);
+      if (match) {
+        const text = match[1].replaceAll(nonTitleChars, '').trim();
+        if (text.length > 0) {
+          return text;
+        }
+      }
+    }
+
+    // Use line as plain text fallback.
+    const maxLen = 32;
+    const text = line.replaceAll(nonTitleChars, '').trim();
+    if (text.length > 0) {
+      if (text.length > maxLen) {
+        const words = text.split(/\s+/);
+        let result = '';
+        for (const word of words) {
+          const next = result.length === 0 ? word : result + ' ' + word;
+          if (next.length > maxLen) {
+            break;
+          }
+          result = next;
+        }
+
+        return result + '…';
+      }
+
+      return text;
+    }
+  }
+
+  return '';
 };
 
+// TODO(burdon): Option to strip Markdown.
 export const getContentSnippet = (content = '') => {
   const abstract = content
     .split('\n')
-    .filter((line) => !line.startsWith('#'))
+    .filter((line) => !line.startsWith('!'))
     .filter((line) => line.trim() !== '');
 
-  return abstract.length > 0 ? abstract[0].replaceAll(nonTitleChars, '').trim() + '...' : '';
+  return abstract.slice(0, 3).join('\n') ?? '';
 };
 
 export const setFallbackName = debounce((doc: Markdown.Document, content = '') => {
   const name = getFallbackName(content);
   if (doc.fallbackName !== name) {
-    doc.fallbackName = name;
+    Obj.change(doc, (d) => {
+      d.fallbackName = name;
+    });
   }
 }, 200);
 

package/dist/lib/browser/MarkdownCard-TC3GGUSX.mjs

@@ -1,12 +0,0 @@
-import {
-  MarkdownCard,
-  MarkdownCard_default
-} from "./chunk-DLZ5RR3P.mjs";
-import "./chunk-OKNQ57GF.mjs";
-import "./chunk-CN35HEBX.mjs";
-import "./chunk-BQTYJOFB.mjs";
-export {
-  MarkdownCard,
-  MarkdownCard_default as default
-};
-//# sourceMappingURL=MarkdownCard-TC3GGUSX.mjs.map