@dxos/plugin-markdown 0.8.4-main.abd8ff62ef → 0.8.4-main.bc2380dfbc

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

@@ -8,7 +8,7 @@ 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/testing';
 import { initializeIdentity } from '@dxos/plugin-client/testing';
 import { corePlugins } from '@dxos/plugin-testing';
 import { useQuery, useSpaces } from '@dxos/react-client/echo';

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

@@ -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/containers/{MarkdownCard/MarkdownEditableCard.tsx → EditableMarkdownCard/EditableMarkdownCard.tsx}

@@ -13,27 +13,27 @@ import { Text } from '@dxos/schema';
 import { MarkdownEditor, MarkdownEditorProvider } from '#components';
 import { Markdown } from '#types';
 
-export type MarkdownEditableCardProps = { subject: Markdown.Document | Text.Text };
+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
+ * so it stays self-contained inside the card; the regular MarkdownArticle
  * remains the canonical surface for full article views.
  */
-export const MarkdownEditableCard = ({ subject }: MarkdownEditableCardProps) => {
+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='col-span-3 min-h-0'>
+    <Card.Section classNames='overflow-hidden'>
       <MarkdownEditorProvider id={id} object={subject} viewMode='source'>
         {(editorRootProps) => (
           <Editor.Root {...editorRootProps}>
-            <MarkdownEditor.Content initialValue={initialValue} />
+            <MarkdownEditor.Content compact initialValue={initialValue} />
           </Editor.Root>
         )}
       </MarkdownEditorProvider>

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/{MarkdownContainer/MarkdownContainer.stories.tsx → MarkdownArticle/MarkdownArticle.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/testing';
 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';
@@ -66,7 +66,7 @@ const DefaultStory = () => {
 };
 
 const meta = {
-  title: 'plugins/plugin-markdown/containers/MarkdownContainer',
+  title: 'plugins/plugin-markdown/containers/MarkdownArticle',
   render: DefaultStory,
   decorators: [
     withLayout({ layout: 'column' }),

package/src/containers/{MarkdownContainer/MarkdownContainer.tsx → MarkdownArticle/MarkdownArticle.tsx}

@@ -26,7 +26,7 @@ import {
 import { useLinkQuery } from '#hooks';
 import { Markdown, MarkdownCapabilities, type MarkdownPluginState } from '#types';
 
-export type MarkdownContainerProps = AppSurface.ObjectArticleProps<
+export type MarkdownArticleProps = AppSurface.ObjectArticleProps<
   Markdown.Document | Text.Text,
   {
     id: string;
@@ -37,7 +37,7 @@ export type MarkdownContainerProps = AppSurface.ObjectArticleProps<
     Pick<MarkdownEditorContentProps, 'editorStateStore'>
 >;
 
-export const MarkdownContainer = forwardRef<HTMLDivElement, MarkdownContainerProps>(
+export const MarkdownArticle = forwardRef<HTMLDivElement, MarkdownArticleProps>(
   (
     { role, subject: object, id, attendableId, settings, extensionProviders, onSelectObject, viewMode, ...props },
     forwardedRef,

package/src/containers/MarkdownArticle/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export { MarkdownArticle, type MarkdownArticleProps } from './MarkdownArticle';
+export { MarkdownArticle as default } from './MarkdownArticle';

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

@@ -8,8 +8,8 @@ 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/testing';
+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';

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/index.ts

@@ -3,4 +3,3 @@
 //
 
 export { MarkdownCard as default } from './MarkdownCard';
-export { MarkdownEditableCard } from './MarkdownEditableCard';

package/src/containers/index.ts

@@ -4,10 +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 MarkdownEditableCard: ComponentType<any> = lazy(() =>
-  import('./MarkdownCard').then((m) => ({ default: m.MarkdownEditableCard })),
-);
-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/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,14 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Plugin } from '@dxos/app-framework';
-
-import { meta } from './meta';
-
-export { MarkdownCapabilities, MarkdownEvents } from './types';
-
+export * from './blueprints';
 export * from './meta';
+export * from './operations';
 export * from './types';
 export * from './util';
-
-export const MarkdownPlugin = Plugin.lazy(meta, () => import('#plugin'));

package/src/meta.ts

@@ -15,5 +15,8 @@ export const meta: Plugin.Meta = {
   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

@@ -6,10 +6,9 @@ import * as Effect from 'effect/Effect';
 
 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 }),