@dxos/plugin-markdown 0.8.4-main.422d1c7879 → 0.8.4-main.4f23b4e393

package/src/components/MarkdownEditor/MarkdownEditor.stories.tsx

@@ -8,19 +8,20 @@ import React from 'react';
 
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Filter, Obj } from '@dxos/echo';
-import { ClientPlugin } from '@dxos/plugin-client';
+import { ClientPlugin } from '@dxos/plugin-client/plugin';
 import { initializeIdentity } from '@dxos/plugin-client/testing';
 import { corePlugins } from '@dxos/plugin-testing';
 import { useQuery, useSpaces } from '@dxos/react-client/echo';
 import { Panel } from '@dxos/react-ui';
 import { AttendableContainer } from '@dxos/react-ui-attention';
-import { Editor, translations as editorTranslations } from '@dxos/react-ui-editor';
+import { Editor } from '@dxos/react-ui-editor';
+import { translations as editorTranslations } from '@dxos/react-ui-editor/translations';
 import { Loading, withLayout } from '@dxos/react-ui/testing';
 import { Text } from '@dxos/schema';
 
+import { translations } from '#translations';
 import { Markdown } from '#types';
 
-import { translations } from '../../translations';
 import { MarkdownEditor, MarkdownEditorProvider, type MarkdownEditorProviderProps } from './MarkdownEditor';
 
 type DefaultStoryProps = Omit<MarkdownEditorProviderProps, 'id' | 'extensions' | 'children'>;

package/src/components/MarkdownEditor/MarkdownEditor.tsx

@@ -172,32 +172,39 @@ const MARKDOWN_EDITOR_CONTENT_NAME = 'MarkdownEditor.Content';
 
 type MarkdownEditorContentProps = Omit<NaturalMarkdownEditorContentProps, 'id' | 'extensions' | 'toolbarState'>;
 
-const MarkdownEditorContent = composable<HTMLDivElement, MarkdownEditorContentProps>(({ ...props }, _forwardedRef) => {
-  const { id, attendableId, compact, viewMode, onFileUpload } = useMarkdownEditorContext(MARKDOWN_EDITOR_CONTENT_NAME);
-
-  const { extensions, setController, state } = useEditorContext(MARKDOWN_EDITOR_CONTENT_NAME);
-
-  const handleRef = useCallback(
-    (view: EditorView | null) => {
-      setController(createEditorController(view));
-    },
-    [setController],
-  );
+const MarkdownEditorContent = composable<HTMLDivElement, MarkdownEditorContentProps>(
+  ({ compact: compactProp, ...props }, _forwardedRef) => {
+    const {
+      id,
+      attendableId,
+      compact = compactProp,
+      viewMode,
+      onFileUpload,
+    } = useMarkdownEditorContext(MARKDOWN_EDITOR_CONTENT_NAME);
+    const { extensions, setController, state } = useEditorContext(MARKDOWN_EDITOR_CONTENT_NAME);
 
-  return (
-    <NaturalMarkdownEditorContent
-      {...composableProps(props)}
-      id={id}
-      attendableId={attendableId}
-      compact={compact}
-      viewMode={viewMode}
-      toolbarState={state as Atom.Writable<EditorToolbarState>}
-      extensions={extensions}
-      onFileUpload={onFileUpload}
-      ref={handleRef}
-    />
-  );
-});
+    const handleRef = useCallback(
+      (view: EditorView | null) => {
+        setController(createEditorController(view));
+      },
+      [setController],
+    );
+
+    return (
+      <NaturalMarkdownEditorContent
+        {...composableProps(props)}
+        id={id}
+        attendableId={attendableId}
+        compact={compact}
+        viewMode={viewMode}
+        toolbarState={state as Atom.Writable<EditorToolbarState>}
+        extensions={extensions}
+        onFileUpload={onFileUpload}
+        ref={handleRef}
+      />
+    );
+  },
+);
 
 MarkdownEditorContent.displayName = MARKDOWN_EDITOR_CONTENT_NAME;
 

package/src/components/MarkdownEditor/MarkdownEditorContent.tsx

@@ -17,7 +17,6 @@ import {
 import {
   type EditorSelectionState,
   type EditorStateStore,
-  type EditorViewMode,
   type ThemeExtensionsOptions,
   mobileSlots,
   createBasicExtensions,
@@ -29,6 +28,7 @@ import {
   processEditorPayload,
   editorClassNames,
 } from '@dxos/ui-editor';
+import { type EditorViewMode } from '@dxos/ui-editor/types';
 import { mx } from '@dxos/ui-theme';
 import { isTruthy } from '@dxos/util';
 
@@ -130,7 +130,7 @@ export const MarkdownEditorContent = forwardRef<EditorView | null, MarkdownEdito
           extensions,
         ].filter(isTruthy),
       }),
-      [id, viewMode, themeMode, extensions],
+      [id, viewMode, themeMode, extensions, compact],
     );
 
     useImperativeHandle<EditorView | null, EditorView | null>(forwardedRef, () => editorView, [editorView]);
@@ -149,7 +149,6 @@ export const MarkdownEditorContent = forwardRef<EditorView | null, MarkdownEdito
       <div
         {...focusAttributes}
         className={mx(editorClassNames(role), classNames)}
-        role='none'
         data-testid='composer.markdownRoot'
         data-popover-collision-boundary={true}
         ref={parentRef}

package/src/components/MarkdownEditor/MarkdownEditorToolbar.tsx

@@ -28,7 +28,7 @@ export const MarkdownEditorToolbar = composable<HTMLDivElement, MarkdownEditorTo
     }
 
     return (
-      <div role='none' className='contents' ref={forwardedRef}>
+      <div className='contents' ref={forwardedRef}>
         <Editor.Toolbar
           {...rest}
           classNames={className}

package/src/components/MarkdownSettings/MarkdownSettings.stories.tsx

@@ -6,7 +6,8 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
+
 import { MarkdownSettings } from './MarkdownSettings';
 
 const meta = {

package/src/components/MarkdownSettings/MarkdownSettings.tsx

@@ -13,7 +13,7 @@ import { Markdown } from '#types';
 
 export type MarkdownSettingsProps = AppSurface.SettingsArticleProps<Markdown.Settings>;
 
-const TypewriterField = ({ value, onChange, readonly }: SettingsFieldProps<string>) => (
+const SnippetsField = ({ value, onChange, readonly }: SettingsFieldProps<string | undefined>) => (
   <Input.TextArea disabled={readonly} rows={5} value={value ?? ''} onChange={(event) => onChange(event.target.value)} />
 );
 
@@ -24,8 +24,8 @@ export const MarkdownSettings = ({ settings, onSettingsChange }: MarkdownSetting
         <SettingsForm.FieldSet
           readonly={!onSettingsChange}
           schema={Markdown.Settings}
-          visible={(path, values) => path !== 'typewriter' || !!values.debug}
-          fieldMap={{ typewriter: TypewriterField }}
+          visible={(path, values) => path !== 'snippets' || !!values.debug}
+          fieldMap={{ snippets: SnippetsField }}
           values={settings}
           onValuesChanged={(values) => onSettingsChange?.(() => values)}
         />

package/src/containers/EditableMarkdownCard/EditableMarkdownCard.tsx

@@ -0,0 +1,42 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React from 'react';
+
+import { Obj } from '@dxos/echo';
+import { useObject } from '@dxos/react-client/echo';
+import { Card } from '@dxos/react-ui';
+import { Editor } from '@dxos/react-ui-editor';
+import { Text } from '@dxos/schema';
+
+import { MarkdownEditor, MarkdownEditorProvider } from '#components';
+import { Markdown } from '#types';
+
+export type EditableMarkdownCardProps = { subject: Markdown.Document | Text.Text };
+
+/**
+ * Full-bleed editable variant of {@link MarkdownCard}. Activated by the host
+ * passing `editable: true` on the card surface data (e.g. plugin-board cells).
+ * Renders a plain editor (no app-graph toolbar / file upload / link queries)
+ * so it stays self-contained inside the card; the regular MarkdownContainer
+ * remains the canonical surface for full article views.
+ */
+export const EditableMarkdownCard = ({ subject }: EditableMarkdownCardProps) => {
+  const id = Obj.getDXN(subject).toString();
+  const [docContent] = useObject(Obj.instanceOf(Markdown.Document, subject) ? subject.content : undefined, 'content');
+  const [textContent] = useObject(Obj.instanceOf(Text.Text, subject) ? subject : undefined, 'content');
+  const initialValue = docContent ?? textContent;
+
+  return (
+    <Card.Section classNames='overflow-hidden'>
+      <MarkdownEditorProvider id={id} object={subject} viewMode='source'>
+        {(editorRootProps) => (
+          <Editor.Root {...editorRootProps}>
+            <MarkdownEditor.Content compact initialValue={initialValue} />
+          </Editor.Root>
+        )}
+      </MarkdownEditorProvider>
+    </Card.Section>
+  );
+};

package/src/containers/EditableMarkdownCard/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export { EditableMarkdownCard, type EditableMarkdownCardProps } from './EditableMarkdownCard';
+export { EditableMarkdownCard as default } from './EditableMarkdownCard';

package/src/containers/MarkdownCard/MarkdownCard.stories.tsx

@@ -8,14 +8,15 @@ import React, { useMemo } from 'react';
 import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Obj } from '@dxos/echo';
-import { ClientPlugin } from '@dxos/plugin-client';
-import { Markdown } from '@dxos/plugin-markdown/types';
+import { ClientPlugin } from '@dxos/plugin-client/plugin';
+import { Markdown } from '@dxos/plugin-markdown';
 import { random } from '@dxos/random';
 import { Card } from '@dxos/react-ui';
 import { CardContainer } from '@dxos/react-ui-mosaic/testing';
 import { withTheme } from '@dxos/react-ui/testing';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
+
 import { MarkdownCard, type MarkdownCardProps } from './MarkdownCard';
 
 random.seed(1234);

package/src/containers/MarkdownCard/MarkdownCard.tsx

@@ -37,7 +37,6 @@ export const MarkdownCard = ({ subject }: MarkdownCardProps) => {
             )}
           </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',

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/MarkdownContainer/MarkdownContainer.stories.tsx

@@ -12,9 +12,9 @@ import { Surface, useOperationInvoker } from '@dxos/app-framework/ui';
 import { AppActivationEvents, LayoutOperation } from '@dxos/app-toolkit';
 import { AppSurface } from '@dxos/app-toolkit/ui';
 import { Obj, Query } from '@dxos/echo';
-import { ClientPlugin } from '@dxos/plugin-client';
+import { ClientPlugin } from '@dxos/plugin-client/plugin';
 import { initializeIdentity } from '@dxos/plugin-client/testing';
-import { PreviewPlugin } from '@dxos/plugin-preview';
+import { PreviewPlugin } from '@dxos/plugin-preview/testing';
 import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
 import { random } from '@dxos/random';
 import { useQuery, useSpaces } from '@dxos/react-client/echo';
@@ -25,10 +25,10 @@ import { Text } from '@dxos/schema';
 import { type ValueGenerator, createObjectFactory } from '@dxos/schema/testing';
 import { Organization, Person } from '@dxos/types';
 
+import { translations } from '#translations';
 import { Markdown, MarkdownCapabilities, MarkdownEvents } from '#types';
 
 import { MarkdownPlugin } from '../../MarkdownPlugin';
-import { translations } from '../../translations';
 
 random.seed(1);
 

package/src/containers/MarkdownContainer/MarkdownContainer.tsx

@@ -39,7 +39,7 @@ export type MarkdownContainerProps = AppSurface.ObjectArticleProps<
 
 export const MarkdownContainer = forwardRef<HTMLDivElement, MarkdownContainerProps>(
   (
-    { role, subject: object, id, attendableId, settings, extensionProviders, onSelectObject, ...props },
+    { role, subject: object, id, attendableId, settings, extensionProviders, onSelectObject, viewMode, ...props },
     forwardedRef,
   ) => {
     const db = Obj.isObject(object) ? Obj.getDatabase(object) : undefined;
@@ -54,18 +54,18 @@ export const MarkdownContainer = forwardRef<HTMLDivElement, MarkdownContainerPro
         return [];
       }
 
+      const document = Obj.instanceOf(Markdown.Document, object) ? object : undefined;
       return [...(otherExtensionProviders ?? []), ...(extensionProviders ?? [])]
         .flat()
         .reduce((acc: Extension[], provider) => {
-          const extension =
-            typeof provider === 'function' ? provider({ document: object as Markdown.Document }) : provider;
+          const extension = typeof provider === 'function' ? provider({ document, viewMode }) : provider;
           if (extension) {
             acc.push(extension);
           }
 
           return acc;
         }, []);
-    }, [extensionProviders, otherExtensionProviders, object]);
+    }, [extensionProviders, otherExtensionProviders, object, viewMode]);
 
     // Toolbar actions from app graph.
     const { graph } = useAppGraph();
@@ -118,6 +118,7 @@ export const MarkdownContainer = forwardRef<HTMLDivElement, MarkdownContainerPro
         compact={role !== 'article'}
         extensions={extensions}
         settings={settings}
+        viewMode={viewMode}
         onAction={runAction}
         onFileUpload={handleFileUpload}
         onLinkQuery={handleLinkQuery}

package/src/containers/index.ts

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

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 }));
     }
   }
 

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 { Annotation, 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 { 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,13 +16,6 @@ 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(
@@ -42,30 +33,22 @@ 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 schema = Obj.getSchema(object);
+            const icon = schema ? Option.getOrUndefined(Annotation.IconAnnotation.get(schema))?.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)})`;
                 // "@@" inserts a block embed on its own line instead of an inline link.
@@ -101,7 +84,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/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 }),