@dxos/plugin-markdown 0.8.4-main.5ea62a8 → 0.8.4-main.ae835ea

package/src/hooks/usePopoverMenuOptions.ts

@@ -0,0 +1,71 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type EditorView } from '@codemirror/view';
+import { useCallback, useMemo, useRef } from 'react';
+
+import { Domino, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import {
+  type PopoverMenuGroup,
+  type UsePopoverMenuProps,
+  filterMenuGroups,
+  formattingCommands,
+  linkSlashCommands,
+} from '@dxos/react-ui-editor';
+
+import { meta } from '../meta';
+
+export type UsePopoverMenuOptionsProps = {
+  editorView?: EditorView;
+  slashCommandGroups?: PopoverMenuGroup[];
+  onLinkQuery?: (query?: string) => Promise<PopoverMenuGroup[]>;
+};
+
+export const usePopoverMenuOptions = ({
+  editorView,
+  slashCommandGroups,
+  onLinkQuery,
+}: UsePopoverMenuOptionsProps): UsePopoverMenuProps => {
+  const { t } = useTranslation(meta.id);
+
+  const getMenu = useCallback<NonNullable<UsePopoverMenuProps['getMenu']>>(
+    ({ text, trigger }) => {
+      switch (trigger) {
+        case '@': {
+          return onLinkQuery?.(text) ?? [];
+        }
+
+        case '/':
+        default: {
+          return filterMenuGroups([formattingCommands, linkSlashCommands, ...(slashCommandGroups ?? [])], (item) =>
+            text ? toLocalizedString(item.label, t).toLowerCase().includes(text.toLowerCase()) : true,
+          );
+        }
+      }
+    },
+    [slashCommandGroups, onLinkQuery],
+  );
+
+  const viewRef = useRef(editorView);
+  return useMemo<UsePopoverMenuProps>(() => {
+    const trigger = onLinkQuery ? ['/', '@'] : ['/'];
+    const placeholder = {
+      delay: 3_000,
+      content: () =>
+        Domino.of('div')
+          .children(
+            Domino.of('span').text('Press'),
+            ...trigger.map((text) =>
+              Domino.of('span')
+                .classNames('mx-1 px-1.5 pt-[1px] pb-[2px] border border-separator rounded-sm')
+                .text(text),
+            ),
+            Domino.of('span').text('for commands.'),
+          )
+          .build(),
+    };
+
+    return { viewRef, getMenu, trigger, placeholder };
+  }, [getMenu, onLinkQuery]);
+};

package/src/hooks/useSelectCurrentThread.tsx

@@ -3,7 +3,7 @@
 //
 
 import { EditorView } from '@codemirror/view';
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 import { useMemo } from 'react';
 
 import { LayoutAction, createResolver, useIntentResolver } from '@dxos/app-framework';
@@ -15,7 +15,7 @@ import { meta } from '../meta';
 /**
  * Handle scrolling and selection of the current thread in a markdown editor.
  */
-export const useSelectCurrentThread = (editorView: EditorView | undefined, documentId: string) => {
+export const useSelectCurrentThread = (editorView: EditorView | null, documentId: string) => {
   const scrollIntoViewResolver = useMemo(
     () =>
       createResolver({

package/src/meta.ts

@@ -9,11 +9,11 @@ export const meta: PluginMeta = {
   id: 'dxos.org/plugin/markdown',
   name: 'Markdown',
   description: trim`
-    A collaborative and extensible Markdown editor.
-    In addition to markdown capabilities, the plugin supports collaborative in-line comments.
-    You can use documents to extend the memory of your personal agents and add context for automated workflows.
+    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.
   `,
   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'],
 };

package/src/translations.ts

@@ -43,6 +43,9 @@ export const translations = [
         'upload image label': 'Upload image',
         'fallback title': 'Untitled',
         'navigate to document label': 'Open document',
+        'words label_zero': 'words',
+        'words label_one': 'word',
+        'words label_other': 'words',
       },
     },
   },

package/src/types/Markdown.ts

@@ -2,10 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 
 import { Obj, Ref, Type } from '@dxos/echo';
-import { LabelAnnotation } from '@dxos/echo-schema';
+import { DescriptionAnnotation, FormAnnotation, LabelAnnotation } from '@dxos/echo/internal';
 import { EditorInputMode, EditorViewMode } from '@dxos/react-ui-editor/types';
 import { DataType, ItemAnnotation } from '@dxos/schema';
 
@@ -14,14 +14,16 @@ import { DataType, ItemAnnotation } from '@dxos/schema';
  */
 export const Document = Schema.Struct({
   name: Schema.optional(Schema.String),
-  fallbackName: Schema.optional(Schema.String),
-  content: Type.Ref(DataType.Text),
+  description: Schema.optional(Schema.String),
+  fallbackName: Schema.String.pipe(FormAnnotation.set(false), Schema.optional),
+  content: Type.Ref(DataType.Text).pipe(FormAnnotation.set(false)),
 }).pipe(
   Type.Obj({
     typename: 'dxos.org/type/Document',
     version: '0.1.0',
   }),
   LabelAnnotation.set(['name', 'fallbackName']),
+  DescriptionAnnotation.set('description'),
   ItemAnnotation.set(true),
 );
 

package/src/types/MarkdownAction.ts

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 
 import { EditorViewMode } from '@dxos/react-ui-editor/types';
 

package/src/util.tsx

@@ -36,8 +36,15 @@ export const getFallbackName = (content: string) => {
   return content.substring(0, 31).split('\n')[0].replaceAll(nonTitleChars, '').trim();
 };
 
-export const getAbstract = (content: string) => {
-  return content.substring(0, 128).split('\n')[0].replaceAll(nonTitleChars, '').trim();
+export const getContentSnippet = (content: string) => {
+  const abstract = content
+    .split('\n')
+    .filter((line) => !line.startsWith('#'))
+    .filter((line) => line.trim() !== '')[0]
+    .replaceAll(nonTitleChars, '')
+    .trim();
+
+  return abstract + '...';
 };
 
 export const setFallbackName = debounce((doc: Markdown.Document, content: string) => {

package/dist/lib/browser/MarkdownCard-JLUQITYK.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/MarkdownCard/MarkdownCard.tsx", "../../../src/components/MarkdownCard/index.ts"],
-  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { pipe } from 'effect';\nimport React, { useCallback } from 'react';\n\nimport { LayoutAction, chain, createIntent, useIntentDispatcher } from '@dxos/app-framework';\nimport { Obj } from '@dxos/echo';\nimport { type PreviewProps } from '@dxos/plugin-preview';\nimport { fullyQualifiedId } from '@dxos/react-client/echo';\nimport { Button, Icon, useTranslation } from '@dxos/react-ui';\nimport { Card } from '@dxos/react-ui-stack';\nimport { DataType } from '@dxos/schema';\n\nimport { meta } from '../../meta';\nimport { Markdown } from '../../types';\nimport { getAbstract, getFallbackName } from '../../util';\n\n// TODO(burdon): Factor out.\nconst getTitle = (subject: Markdown.Document | DataType.Text, fallback: string) => {\n  if (Obj.instanceOf(Markdown.Document, subject)) {\n    return subject.name ?? subject.fallbackName ?? getFallbackName(subject.content?.target?.content ?? fallback);\n  } else if (Obj.instanceOf(DataType.Text, subject)) {\n    return getFallbackName(subject.content);\n  }\n};\n\n// TODO(burdon): Factor out.\nconst getSnippet = (subject: Markdown.Document | DataType.Text, fallback: string) => {\n  if (Obj.instanceOf(Markdown.Document, subject)) {\n    return getAbstract(subject.content?.target?.content ?? fallback);\n  } else if (Obj.instanceOf(DataType.Text, subject)) {\n    return getAbstract(subject.content);\n  }\n};\n\nexport type MarkdownCardProps = PreviewProps<Markdown.Document | DataType.Text>;\n\nexport const MarkdownCard = ({ subject, role }: MarkdownCardProps) => {\n  const { dispatchPromise: dispatch } = useIntentDispatcher();\n  const { t } = useTranslation(meta.id);\n  const snippet = getSnippet(subject, t('fallback abstract'));\n\n  // TODO(wittjosiah): Factor out so this component isn't dependent on the app framework.\n  const handleNavigate = useCallback(\n    () =>\n      dispatch(\n        pipe(\n          createIntent(LayoutAction.UpdatePopover, {\n            part: 'popover',\n            subject: null,\n            options: { state: false, anchorId: '' },\n          }),\n          chain(LayoutAction.Open, { part: 'main', subject: [fullyQualifiedId(subject)] }),\n        ),\n      ),\n    [dispatch, subject],\n  );\n\n  return (\n    <Card.SurfaceRoot role={role}>\n      <Card.Heading>{getTitle(subject, t('fallback title'))}</Card.Heading>\n      {snippet && <Card.Text classNames='line-clamp-3 break-words col-span-2'>{snippet}</Card.Text>}\n      {role === 'card--popover' && (\n        <Card.Chrome>\n          <Button onClick={handleNavigate}>\n            <span className='grow'>{t('navigate to document label')}</span>\n            <Icon icon='ph--arrow-right--regular' />\n          </Button>\n        </Card.Chrome>\n      )}\n    </Card.SurfaceRoot>\n  );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { MarkdownCard } from './MarkdownCard';\n\nexport * from './MarkdownCard';\n\nexport default MarkdownCard;\n"],
-  "mappings": ";;;;;;;;;;;;;AAIA,SAASA,YAAY;AACrB,OAAOC,SAASC,mBAAmB;AAEnC,SAASC,cAAcC,OAAOC,cAAcC,2BAA2B;AACvE,SAASC,WAAW;AAEpB,SAASC,wBAAwB;AACjC,SAASC,QAAQC,MAAMC,sBAAsB;AAC7C,SAASC,YAAY;AACrB,SAASC,gBAAgB;AAOzB,IAAMC,WAAW,CAACC,SAA4CC,aAAAA;AAC5D,MAAIC,IAAIC,WAAWC,iBAASC,UAAUL,OAAAA,GAAU;AAC9C,WAAOA,QAAQM,QAAQN,QAAQO,gBAAgBC,gBAAgBR,QAAQS,SAASC,QAAQD,WAAWR,QAAAA;EACrG,WAAWC,IAAIC,WAAWQ,SAASC,MAAMZ,OAAAA,GAAU;AACjD,WAAOQ,gBAAgBR,QAAQS,OAAO;EACxC;AACF;AAGA,IAAMI,aAAa,CAACb,SAA4CC,aAAAA;AAC9D,MAAIC,IAAIC,WAAWC,iBAASC,UAAUL,OAAAA,GAAU;AAC9C,WAAOc,YAAYd,QAAQS,SAASC,QAAQD,WAAWR,QAAAA;EACzD,WAAWC,IAAIC,WAAWQ,SAASC,MAAMZ,OAAAA,GAAU;AACjD,WAAOc,YAAYd,QAAQS,OAAO;EACpC;AACF;AAIO,IAAMM,eAAe,CAAC,EAAEf,SAASgB,KAAI,MAAqB;;;AAC/D,UAAM,EAAEC,iBAAiBC,SAAQ,IAAKC,oBAAAA;AACtC,UAAM,EAAEC,EAAC,IAAKC,eAAeC,KAAKC,EAAE;AACpC,UAAMC,UAAUX,WAAWb,SAASoB,EAAE,mBAAA,CAAA;AAGtC,UAAMK,iBAAiBC,YACrB,MACER,SACES,KACEC,aAAaC,aAAaC,eAAe;MACvCC,MAAM;MACN/B,SAAS;MACTgC,SAAS;QAAEC,OAAO;QAAOC,UAAU;MAAG;IACxC,CAAA,GACAC,MAAMN,aAAaO,MAAM;MAAEL,MAAM;MAAQ/B,SAAS;QAACqC,iBAAiBrC,OAAAA;;IAAU,CAAA,CAAA,CAAA,GAGpF;MAACkB;MAAUlB;KAAQ;AAGrB,WACE,sBAAA,cAACsC,KAAKC,aAAW;MAACvB;OAChB,sBAAA,cAACsB,KAAKE,SAAO,MAAEzC,SAASC,SAASoB,EAAE,gBAAA,CAAA,CAAA,GAClCI,WAAW,sBAAA,cAACc,KAAK1B,MAAI;MAAC6B,YAAW;OAAuCjB,OAAAA,GACxER,SAAS,mBACR,sBAAA,cAACsB,KAAKI,QAAM,MACV,sBAAA,cAACC,QAAAA;MAAOC,SAASnB;OACf,sBAAA,cAACoB,QAAAA;MAAKC,WAAU;OAAQ1B,EAAE,4BAAA,CAAA,GAC1B,sBAAA,cAAC2B,MAAAA;MAAKC,MAAK;;;;;AAMvB;;;AClEA,IAAA,uBAAeC;",
-  "names": ["pipe", "React", "useCallback", "LayoutAction", "chain", "createIntent", "useIntentDispatcher", "Obj", "fullyQualifiedId", "Button", "Icon", "useTranslation", "Card", "DataType", "getTitle", "subject", "fallback", "Obj", "instanceOf", "Markdown", "Document", "name", "fallbackName", "getFallbackName", "content", "target", "DataType", "Text", "getSnippet", "getAbstract", "MarkdownCard", "role", "dispatchPromise", "dispatch", "useIntentDispatcher", "t", "useTranslation", "meta", "id", "snippet", "handleNavigate", "useCallback", "pipe", "createIntent", "LayoutAction", "UpdatePopover", "part", "options", "state", "anchorId", "chain", "Open", "fullyQualifiedId", "Card", "SurfaceRoot", "Heading", "classNames", "Chrome", "Button", "onClick", "span", "className", "Icon", "icon", "MarkdownCard"]
-}