@dxos/plugin-markdown 0.9.0 → 0.9.1-staging.ee54ba693a

package/src/containers/MarkdownSettings/MarkdownSettings.tsx

@@ -0,0 +1,54 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { Input } from '@dxos/react-ui';
+import { Form, type FormFieldRendererProps, FormRow } from '@dxos/react-ui-form';
+
+import { meta } from '#meta';
+import { Markdown } from '#types';
+
+export type MarkdownSettingsProps = AppSurface.SettingsProps<Markdown.Settings>;
+
+export const MarkdownSettings = ({ settings, onSettingsChange }: MarkdownSettingsProps) => {
+  return (
+    <Form.Root
+      variant='settings'
+      schema={Markdown.Settings}
+      readonly={!onSettingsChange}
+      values={settings}
+      onValuesChanged={(values) => onSettingsChange?.((current) => ({ ...current, ...values }))}
+    >
+      <Form.Viewport scroll>
+        <Form.Content>
+          <Form.Section title={meta.profile.name}>
+            <Form.FieldSet
+              fieldMap={{ snippets: SnippetsField }}
+              filter={(properties) =>
+                settings.debug ? properties : properties.filter((property) => property.name !== 'snippets')
+              }
+            />
+          </Form.Section>
+        </Form.Content>
+      </Form.Viewport>
+    </Form.Root>
+  );
+};
+
+/** Multi-line snippet editor; replaces the single-line text input the schema would otherwise render. */
+const SnippetsField = ({ type, readonly, onValueChange, onBlur, ...props }: FormFieldRendererProps<string>) => (
+  <FormRow<string> readonly={readonly} {...props}>
+    {({ value }) => (
+      <Input.TextArea
+        disabled={!!readonly}
+        rows={5}
+        value={value ?? ''}
+        onBlur={onBlur}
+        onChange={(event) => onValueChange(type, event.target.value)}
+      />
+    )}
+  </FormRow>
+);

package/src/containers/index.ts

@@ -9,3 +9,4 @@ export type { MarkdownArticleProps } from './MarkdownArticle';
 export const MarkdownCard: ComponentType<any> = lazy(() => import('./MarkdownCard'));
 export const EditableMarkdownCard: ComponentType<any> = lazy(() => import('./EditableMarkdownCard'));
 export const MarkdownArticle: ComponentType<any> = lazy(() => import('./MarkdownArticle'));
+export const MarkdownSettings: ComponentType<any> = lazy(() => import('./MarkdownSettings'));

package/src/hooks/useEditorMenuOptions.ts

@@ -28,7 +28,7 @@ export const useEditorMenuOptions = ({
   slashCommandGroups,
   onLinkQuery,
 }: UseEditorMenuOptionsProps): UseEditorMenuProps => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
 
   const getMenu = useCallback<NonNullable<UseEditorMenuProps['getMenu']>>(
     ({ text, trigger }) => {
@@ -39,7 +39,7 @@ export const useEditorMenuOptions = ({
 
         case '/':
         default: {
-          return filterMenuGroups([formattingCommands, linkSlashCommands, ...(slashCommandGroups ?? [])], (item) =>
+          return filterMenuGroups([linkSlashCommands, formattingCommands, ...(slashCommandGroups ?? [])], (item) =>
             text ? toLocalizedString(item.label, t).toLowerCase().includes(text.toLowerCase()) : true,
           );
         }

package/src/hooks/useExtensions.tsx

@@ -5,24 +5,26 @@
 import { type ViewUpdate } from '@codemirror/view';
 import { useMemo } from 'react';
 
-import { fromUrlPath } from '@dxos/app-toolkit';
+import { Paths } from '@dxos/app-toolkit';
 import { debounceAndThrottle } from '@dxos/async';
 import { Obj } from '@dxos/echo';
-import { createDocAccessor } from '@dxos/echo-client';
+import { Doc } from '@dxos/echo-doc';
 import { invariant } from '@dxos/invariant';
 import { getSpace, useObject } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
 import { useThemeContext } from '@dxos/react-ui';
-import { type SelectionManager } from '@dxos/react-ui-attention';
+import { type ViewStateManager, selectionAspect } from '@dxos/react-ui-attention';
 import { Text } from '@dxos/schema';
 import { Domino } from '@dxos/ui';
 import {
+  AnchorWidget,
   Cursor,
   type EditorStateStore,
   EditorView,
   type Extension,
   InputModeExtensions,
-  type PreviewOptions,
+  type XmlWidgetProps,
+  type XmlWidgetState,
   createDataExtensions,
   decorateMarkdown,
   documentId,
@@ -30,16 +32,17 @@ import {
   formattingKeymap,
   linkTooltip,
   listener,
-  preview,
   replacer,
   selectionState,
   snippets,
+  xmlTags,
 } from '@dxos/ui-editor';
 import { type EditorViewMode, type RenderCallback } from '@dxos/ui-editor/types';
 import { isTruthy, safeUrl } from '@dxos/util';
 
 import { Markdown } from '#types';
 
+import { PreviewComponent } from '../components/PreviewComponent/PreviewComponent';
 import { setFallbackName } from '../util';
 
 export type DocumentType = Markdown.Document | Text.Text | { id: string; text: string };
@@ -51,9 +54,9 @@ export type ExtensionsOptions = {
   compact?: boolean;
   viewMode?: EditorViewMode;
   editable?: boolean;
-  selectionManager?: SelectionManager;
+  viewState?: ViewStateManager;
   editorStateStore?: EditorStateStore;
-  previewOptions?: PreviewOptions;
+  setWidgets?: (widgets: XmlWidgetState[]) => void;
   platform?: 'mobile' | 'desktop';
   /** Callback when an internal link is clicked. */
   onSelectObject?: (objectId: string) => void;
@@ -66,9 +69,9 @@ export const useExtensions = ({
   settings,
   compact,
   viewMode,
-  selectionManager,
+  viewState,
   editorStateStore,
-  previewOptions,
+  setWidgets,
   onSelectObject,
 }: ExtensionsOptions): Extension[] => {
   const { platform } = useThemeContext();
@@ -79,7 +82,7 @@ export const useExtensions = ({
   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).
+  // Get the actual live object target via .target (needed for Doc.createAccessor).
   const target = contentRef?.target ?? (Obj.instanceOf(Text.Text, object) ? object : undefined);
 
   // TODO(wittjosiah): Autocomplete is not working and this query is causing performance issues.
@@ -95,8 +98,8 @@ export const useExtensions = ({
         settings,
         compact,
         viewMode,
-        selectionManager,
-        previewOptions,
+        viewState,
+        setWidgets,
         platform,
         onSelectObject,
       }),
@@ -105,8 +108,8 @@ export const useExtensions = ({
       object,
       compact,
       viewMode,
-      selectionManager,
-      previewOptions,
+      viewState,
+      setWidgets,
       settings,
       settings?.debug,
       settings?.editorInputMode,
@@ -125,7 +128,7 @@ export const useExtensions = ({
         target &&
           createDataExtensions({
             id,
-            text: createDocAccessor(target, ['content']),
+            text: Doc.createAccessor(target, ['content']),
             messenger: space,
             identity,
           }),
@@ -155,12 +158,12 @@ const createBaseExtensions = ({
   settings,
   compact,
   viewMode,
-  selectionManager,
-  previewOptions,
+  viewState,
+  setWidgets,
   platform,
 }: ExtensionsOptions): Extension[] => {
   const extensions: Extension[] = [
-    selectionManager && selectionChange(selectionManager),
+    viewState && selectionChange(viewState),
     settings?.editorInputMode && InputModeExtensions[settings.editorInputMode],
     settings?.folding && !compact && platform !== 'mobile' && folding(),
   ].filter(isTruthy);
@@ -177,9 +180,26 @@ const createBaseExtensions = ({
           numberedHeadings: settings?.numberedHeadings ? { from: 2 } : undefined,
           // TODO(wittjosiah): For internal links render the label of the object.
           renderLinkButton: onSelectObject && createRenderLink(onSelectObject),
+          // xmlTags() handles dxn:/echo: links via url-scheme widgets; skip here to avoid double-processing.
+          skip: ({ url }) => url.startsWith('dxn:') || url.startsWith('echo:'),
         }),
         linkTooltip(renderLinkTooltip),
-        preview(previewOptions),
+        xmlTags({
+          registry: {
+            'dxn-preview': {
+              block: true,
+              urlSchemes: ['dxn:', 'echo:'],
+              Component: PreviewComponent,
+            },
+            'link-preview': {
+              block: false,
+              urlSchemes: ['dxn:', 'echo:'],
+              factory: ({ label, dxn }: XmlWidgetProps<{ label: string; dxn: string }>) =>
+                label && dxn ? new AnchorWidget(label, dxn) : null,
+            },
+          },
+          setWidgets,
+        }),
         replacer(),
       ],
     );
@@ -195,7 +215,7 @@ const createBaseExtensions = ({
   return extensions;
 };
 
-const selectionChange = (selectionManager: SelectionManager) => {
+const selectionChange = (viewState: ViewStateManager) => {
   const debouncedHandler = debounceAndThrottle((update: ViewUpdate) => {
     const id = update.state.facet(documentId);
     const cursorConverter = update.state.facet(Cursor.converter);
@@ -213,7 +233,7 @@ const selectionChange = (selectionManager: SelectionManager) => {
         to: cursorConverter.toCursor(range.to),
       }));
 
-    selectionManager.updateMultiRange(id, ranges);
+    viewState.set(selectionAspect, id, { mode: 'multi-range', ranges });
   }, 100);
 
   return EditorView.updateListener.of((update: ViewUpdate) => {
@@ -228,7 +248,7 @@ const createRenderLink =
   (el, { url }) => {
     // TODO(burdon): Formalize/document internal link format.
     const isInternal = url.startsWith('/') || url.startsWith(window.location.origin);
-    const qualifiedId = isInternal ? fromUrlPath(new URL(url, window.location.origin).pathname) : undefined;
+    const qualifiedId = isInternal ? Paths.fromUrlPath(new URL(url, window.location.origin).pathname) : undefined;
     const icon = Domino.of('span')
       .classNames('dx-link ms-1 inline-block align-[-0.125em]')
       .append(Domino.svg(isInternal ? 'ph--arrow-square-down--regular' : 'ph--arrow-square-out--regular'));

package/src/hooks/useLinkQuery.ts

@@ -14,7 +14,7 @@ import { insertAtCursor, insertAtLineStart } from '@dxos/ui-editor';
 
 import { Markdown } from '../types';
 
-export const useLinkQuery = (db: Database.Database | undefined) => {
+export const useLinkQuery = (db: Database.Database | undefined, current?: Obj.Unknown) => {
   const { t } = useTranslation();
 
   const filter = useMemo(
@@ -41,7 +41,9 @@ export const useLinkQuery = (db: Database.Database | undefined) => {
 
       const items =
         results
-          ?.filter((object) => toLocalizedString(getLabel(object), t).toLowerCase().includes(name))
+          // Exclude the current document; it cannot link to itself.
+          ?.filter((object) => object.id !== current?.id)
+          .filter((object) => toLocalizedString(getLabel(object), t).toLowerCase().includes(name))
           .map((object: Obj.Unknown): EditorMenuItem => {
             const type = Obj.getType(object);
             const icon = type
@@ -87,7 +89,7 @@ export const useLinkQuery = (db: Database.Database | undefined) => {
         { id: 'create', items: [createItem] },
       ];
     },
-    [db, filter, t],
+    [db, filter, t, current],
   );
 
   return handleLinkQuery;

package/src/index.ts

@@ -2,9 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './blueprints';
+export * from './skills';
 export * from './meta';
 export * from './operations';
-export * from './paths';
 export * from './types';
 export * from './util';

package/src/meta.ts

@@ -3,27 +3,7 @@
 //
 
 import { Plugin } from '@dxos/app-framework';
-import { DXN } from '@dxos/keys';
-import { trim } from '@dxos/util';
 
-export const meta = Plugin.makeMeta({
-  key: DXN.make('org.dxos.plugin.markdown'),
-  name: 'Markdown',
-  author: 'DXOS',
-  description: trim`
-    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.
+import config from '../dx.config';
 
-    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://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',
-  ],
-});
+export const meta = Plugin.getMetaFromConfig(config);