@dxos/plugin-markdown 0.8.4-main.7996785055 → 0.8.4-main.8baae0fced

package/src/hooks/useEditorMenuOptions.ts

@@ -15,7 +15,7 @@ import {
 } from '@dxos/react-ui-editor';
 import { Domino } from '@dxos/ui';
 
-import { meta } from '../meta';
+import { meta } from '#meta';
 
 export type UseEditorMenuOptionsProps = {
   editorView?: EditorView;
@@ -59,7 +59,7 @@ export const useEditorMenuOptions = ({
           Domino.of('span').classNames('mx-1 px-1.5 pt-[1px] pb-[2px] border border-separator rounded-xs').text(text),
         );
         const forCommandsEl = Domino.of('span').text('for commands.');
-        return Domino.of('div').children(pressEl, ...triggerEls, forCommandsEl).root;
+        return Domino.of('div').append(pressEl, ...triggerEls, forCommandsEl).root;
       },
     };
 

package/src/hooks/useExtensions.tsx

@@ -4,12 +4,15 @@
 
 import { type ViewUpdate } from '@codemirror/view';
 import { useMemo } from 'react';
+
+import { fromUrlPath } from '@dxos/app-toolkit';
 import { debounceAndThrottle } from '@dxos/async';
 import { Obj } from '@dxos/echo';
 import { createDocAccessor } from '@dxos/echo-db';
 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 { Text } from '@dxos/schema';
 import { Domino } from '@dxos/ui';
@@ -17,11 +20,9 @@ import {
   Cursor,
   type EditorStateStore,
   EditorView,
-  type EditorViewMode,
   type Extension,
   InputModeExtensions,
   type PreviewOptions,
-  type RenderCallback,
   createDataExtensions,
   decorateMarkdown,
   documentId,
@@ -32,14 +33,14 @@ import {
   preview,
   replacer,
   selectionState,
-  typewriter,
+  snippets,
 } from '@dxos/ui-editor';
-import { useThemeContext } from '@dxos/react-ui';
+import { type EditorViewMode, type RenderCallback } from '@dxos/ui-editor/types';
 import { isTruthy, safeUrl } from '@dxos/util';
 
-import { Markdown } from '../types';
+import { Markdown } from '#types';
+
 import { setFallbackName } from '../util';
-import { fromUrlPath } from '@dxos/app-toolkit';
 
 export type DocumentType = Markdown.Document | Text.Text | { id: string; text: string };
 
@@ -49,6 +50,7 @@ export type ExtensionsOptions = {
   settings?: Markdown.Settings;
   compact?: boolean;
   viewMode?: EditorViewMode;
+  editable?: boolean;
   selectionManager?: SelectionManager;
   editorStateStore?: EditorStateStore;
   previewOptions?: PreviewOptions;
@@ -95,8 +97,8 @@ export const useExtensions = ({
         viewMode,
         selectionManager,
         previewOptions,
-        onSelectObject,
         platform,
+        onSelectObject,
       }),
     [
       id,
@@ -105,14 +107,13 @@ export const useExtensions = ({
       viewMode,
       selectionManager,
       previewOptions,
-      onSelectObject,
       settings,
       settings?.debug,
       settings?.editorInputMode,
       settings?.folding,
       settings?.numberedHeadings,
       platform,
-      settings?.typewriter,
+      onSelectObject,
     ],
   );
 
@@ -185,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 }));
     }
   }
 
@@ -224,7 +225,7 @@ const createRenderLink =
     const qualifiedId = isInternal ? fromUrlPath(new URL(url, window.location.origin).pathname) : undefined;
     const icon = Domino.of('span')
       .classNames('dx-link ms-1 inline-block align-[-0.125em]')
-      .children(Domino.svg(isInternal ? 'ph--arrow-square-down--regular' : 'ph--arrow-square-out--regular'));
+      .append(Domino.svg(isInternal ? 'ph--arrow-square-down--regular' : 'ph--arrow-square-out--regular'));
 
     if (isInternal) {
       invariant(qualifiedId, 'Invalid link format.');
@@ -256,6 +257,6 @@ const renderLinkTooltip: RenderCallback<{ url: string }> = (el, { url }) => {
       .attributes({ href: url, target: '_blank', rel: 'noreferrer' })
       .classNames('dx-link flex items-center gap-2')
       .text(safeUrl(url)?.toString() ?? url)
-      .children(Domino.svg('ph--arrow-square-out--regular')).root,
+      .append(Domino.svg('ph--arrow-square-out--regular')).root,
   );
 };

package/src/hooks/useLinkQuery.ts

@@ -5,24 +5,17 @@
 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';
 
+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(
@@ -40,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, default: '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.
@@ -76,9 +61,30 @@ export const useLinkQuery = (db: Database.Database | undefined) => {
             };
           }) ?? [];
 
-      return [{ id: 'echo', items }];
+      // Add "Create new document" option at the end.
+      const createItem: EditorMenuItem = {
+        id: 'create-document',
+        label: ['add-object.label', { ns: Markdown.Document.typename }],
+        icon: 'ph--plus--regular',
+        onSelect: ({ view, head }) => {
+          const doc = Markdown.make({ name: name || undefined });
+          db?.add(doc);
+          const label = name || t('object-name.placeholder', { ns: Markdown.Document.typename });
+          const link = `[${label}](${Obj.getDXN(doc)})`;
+          if (query?.startsWith('@')) {
+            insertAtLineStart(view, head, `!${link}\n`);
+          } else {
+            insertAtCursor(view, head, `${link} `);
+          }
+        },
+      };
+
+      return [
+        { id: 'echo', items },
+        { id: 'create', items: [createItem] },
+      ];
     },
-    [db, filter, resolve],
+    [db, filter, t],
   );
 
   return handleLinkQuery;

package/src/index.ts

@@ -2,12 +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 } from './components';

package/src/meta.ts

@@ -8,6 +8,7 @@ import { trim } from '@dxos/util';
 export const meta: Plugin.Meta = {
   id: 'org.dxos.plugin.markdown',
   name: 'Markdown',
+  author: 'DXOS',
   description: trim`
     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.
@@ -15,5 +16,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

@@ -4,13 +4,11 @@
 
 import * as Effect from 'effect/Effect';
 
-import { Operation } from '@dxos/operation';
+import { Operation } from '@dxos/compute';
 
-import { CreateMarkdown } from './definitions';
+import { Markdown, MarkdownOperation } from '../types';
 
-import { Markdown } 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 }),