@dxos/react-ui-editor 0.8.3-main.7f5a14c → 0.8.3-staging.0fa589b

package/src/stories/Preview.stories.tsx

@@ -4,8 +4,12 @@
 
 import '@dxos-theme';
 
-import React, { useState, useEffect, type FC } from 'react';
+import { syntaxTree } from '@codemirror/language';
+import { type EditorView } from '@codemirror/view';
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import { createPortal } from 'react-dom';
 
+import { invariant } from '@dxos/invariant';
 import { faker } from '@dxos/random';
 import { Popover } from '@dxos/react-ui';
 import { Card } from '@dxos/react-ui-stack';
@@ -14,16 +18,8 @@ import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
 
 import { EditorStory } from './components';
 import { PreviewProvider, useRefPopover } from '../components';
-import {
-  preview,
-  image,
-  type PreviewOptions,
-  type PreviewLinkRef,
-  type PreviewLinkTarget,
-  type PreviewRenderProps,
-} from '../extensions';
+import { preview, image, type PreviewLinkRef, type PreviewLinkTarget, getLinkRef } from '../extensions';
 import { str } from '../testing';
-import { createRenderer } from '../util';
 
 const handlePreviewLookup = async ({ label, ref }: PreviewLinkRef): Promise<PreviewLinkTarget> => {
   // Random text.
@@ -37,11 +33,11 @@ const handlePreviewLookup = async ({ label, ref }: PreviewLinkRef): Promise<Prev
 
 // Async lookup.
 // TODO(burdon): Handle errors.
-const useRefTarget = (link: PreviewLinkRef, onLookup: PreviewOptions['onLookup']): PreviewLinkTarget | undefined => {
+const useRefTarget = (link: PreviewLinkRef): PreviewLinkTarget | undefined => {
   const [target, setTarget] = useState<PreviewLinkTarget | undefined>();
   useEffect(() => {
-    void onLookup?.(link).then((target) => setTarget(target ?? undefined));
-  }, [link, onLookup]);
+    void handlePreviewLookup(link).then((target) => setTarget(target ?? undefined));
+  }, [link]);
 
   return target;
 };
@@ -63,27 +59,86 @@ const PreviewCard = () => {
   );
 };
 
-// TODO(burdon): Replace with card.
-const PreviewBlock: FC<PreviewRenderProps> = ({ readonly, link, onAction, onLookup }) => {
-  const target = useRefTarget(link, onLookup);
-  return (
+type PreviewAction =
+  | {
+      type: 'insert';
+      link: PreviewLinkRef;
+      target: PreviewLinkTarget;
+    }
+  | {
+      type: 'delete';
+      link: PreviewLinkRef;
+    };
+
+const PreviewBlock = ({ link, el, view }: { link: PreviewLinkRef; el: HTMLElement; view?: EditorView }) => {
+  const target = useRefTarget(link);
+
+  const handleAction = useCallback(
+    (action: PreviewAction) => {
+      invariant(view, 'View not found');
+      const pos = view.posAtDOM(el);
+      const node = syntaxTree(view.state).resolve(pos + 1).node.parent;
+      if (!node) {
+        return;
+      }
+
+      const link = getLinkRef(view.state, node);
+      if (link?.ref !== action.link.ref) {
+        return;
+      }
+
+      switch (action.type) {
+        // TODO(burdon): Should we dispatch to the view or mutate the document? (i.e., handle externally?)
+        // Insert ref text.
+        case 'insert': {
+          view.dispatch({
+            changes: {
+              from: node.from,
+              to: node.to,
+              insert: action.target.text,
+            },
+          });
+          break;
+        }
+        // Remove ref.
+        case 'delete': {
+          view.dispatch({
+            changes: {
+              from: node.from,
+              to: node.to,
+            },
+          });
+          break;
+        }
+      }
+    },
+    [view, el],
+  );
+
+  const handleDelete = useCallback(() => {
+    handleAction({ type: 'delete', link });
+  }, [handleAction, link]);
+
+  const handleInsert = useCallback(() => {
+    if (target) {
+      handleAction({ type: 'insert', link, target });
+    }
+  }, [handleAction, link, target]);
+
+  return createPortal(
     <Card.Content classNames={hoverableControls}>
       <div className='flex items-start'>
-        {!readonly && (
-          <Card.Toolbar classNames='is-min p-[--dx-card-spacing-inline]'>
+        {!view?.state.readOnly && (
+          <Card.Toolbar classNames='is-min p-[--dx-cardSpacingInline]'>
             {(link.suggest && (
               <>
-                <Card.ToolbarIconButton
-                  label='Discard'
-                  icon={'ph--x--regular'}
-                  onClick={() => onAction({ type: 'delete', link })}
-                />
+                <Card.ToolbarIconButton label='Discard' icon={'ph--x--regular'} onClick={handleDelete} />
                 {target && (
                   <Card.ToolbarIconButton
                     classNames='bg-successSurface text-successSurfaceText'
                     label='Apply'
                     icon='ph--check--regular'
-                    onClick={() => onAction({ type: 'insert', link, target })}
+                    onClick={handleInsert}
                   />
                 )}
               </>
@@ -93,7 +148,7 @@ const PreviewBlock: FC<PreviewRenderProps> = ({ readonly, link, onAction, onLook
                 label='Delete'
                 icon='ph--x--regular'
                 classNames={[hoverableControlItem, hoverableControlItemTransition]}
-                onClick={() => onAction({ type: 'delete', link })}
+                onClick={handleDelete}
               />
             )}
           </Card.Toolbar>
@@ -104,7 +159,8 @@ const PreviewBlock: FC<PreviewRenderProps> = ({ readonly, link, onAction, onLook
         </Card.Heading>
       </div>
       {target && <Card.Text classNames='line-clamp-3 mbs-0'>{target.text}</Card.Text>}
-    </Card.Content>
+    </Card.Content>,
+    el,
   );
 };
 
@@ -118,34 +174,55 @@ const meta: Meta<typeof EditorStory> = {
 export default meta;
 
 export const Default = {
-  render: () => (
-    <PreviewProvider onLookup={handlePreviewLookup}>
-      <EditorStory
-        text={str(
-          '# Preview',
-          '',
-          'This project is part of the [DXOS][dxn:queue:data:123] SDK.',
-          '',
-          '![DXOS][?dxn:queue:data:123]',
-          '',
-          'It consists of [ECHO][dxn:queue:data:echo], [HALO][dxn:queue:data:halo], and [MESH][dxn:queue:data:mesh].',
-          '',
-          '## Deep dive',
-          '',
-          '![ECHO][dxn:queue:data:echo]',
-          '',
-          '',
-          '',
-        )}
-        extensions={[
-          image(),
-          preview({
-            renderBlock: createRenderer(PreviewBlock),
-            onLookup: handlePreviewLookup,
-          }),
-        ]}
-      />
-      <PreviewCard />
-    </PreviewProvider>
-  ),
+  render: () => {
+    const [view, setView] = useState<EditorView>();
+    const [previewBlocks, setPreviewBlocks] = useState<{ link: PreviewLinkRef; el: HTMLElement }[]>([]);
+
+    const extensions = useMemo(() => {
+      return [
+        image(),
+        preview({
+          addBlockContainer: (link, el) => {
+            setPreviewBlocks((prev) => [...prev, { link, el }]);
+          },
+          removeBlockContainer: (link) => {
+            setPreviewBlocks((prev) => prev.filter(({ link: prevLink }) => prevLink.ref !== link.ref));
+          },
+        }),
+      ];
+    }, []);
+
+    const handleViewRef = useCallback((instance?: EditorView | null) => {
+      setView(instance ?? undefined);
+    }, []);
+
+    return (
+      <PreviewProvider onLookup={handlePreviewLookup}>
+        <EditorStory
+          ref={handleViewRef}
+          text={str(
+            '# Preview',
+            '',
+            'This project is part of the [DXOS][dxn:queue:data:123] SDK.',
+            '',
+            '![DXOS][?dxn:queue:data:123]',
+            '',
+            'It consists of [ECHO][dxn:queue:data:echo], [HALO][dxn:queue:data:halo], and [MESH][dxn:queue:data:mesh].',
+            '',
+            '## Deep dive',
+            '',
+            '![ECHO][dxn:queue:data:echo]',
+            '',
+            '',
+            '',
+          )}
+          extensions={extensions}
+        />
+        <PreviewCard />
+        {previewBlocks.map(({ link, el }) => (
+          <PreviewBlock key={link.ref} link={link} el={el} view={view} />
+        ))}
+      </PreviewProvider>
+    );
+  },
 };

package/src/stories/components/util.tsx

@@ -196,7 +196,7 @@ const LinkButton: FC<{ url: string }> = ({ url }) => {
 
 export const renderLinkButton = createRenderer(LinkButton);
 
-// Shared extensions
+// Shared extensions.
 export const defaultExtensions: Extension[] = [
   decorateMarkdown({ renderLinkButton, selectionChangeDelay: 100 }),
   formattingKeymap(),
@@ -212,7 +212,7 @@ export const allExtensions: Extension[] = [
   folding(),
 ];
 
-// Long text for scrolling stories
+// Long text for scrolling stories.
 export const longText = faker.helpers
   .multiple(() => faker.lorem.paragraph({ min: 8, max: 16 }), { count: 20 })
   .join('\n\n');

package/src/util/dom.ts

@@ -34,3 +34,23 @@ export const clientRectsFor = (dom: Node) => {
     return [] as any as DOMRectList;
   }
 };
+
+export type ElementOptions = {
+  className?: string;
+  text?: string;
+};
+
+export const createElement = (tag: string, options?: ElementOptions, children?: HTMLElement[]): HTMLElement => {
+  const el = document.createElement(tag);
+  if (options?.className) {
+    el.className = options.className;
+  }
+  if (options?.text) {
+    el.textContent = options.text;
+  }
+  if (children) {
+    el.append(...(Array.isArray(children) ? children : [children]));
+  }
+
+  return el;
+};

package/src/util/react.tsx

@@ -10,26 +10,8 @@ import { defaultTx } from '@dxos/react-ui-theme';
 
 import { type RenderCallback } from '../types';
 
-// TODO(burdon): Factor out.
-
-export type ElementOptions = {
-  className?: string;
-};
-
-export const createElement = (tag: string, options?: ElementOptions, children?: ReactNode): HTMLElement => {
-  const el = document.createElement(tag);
-  if (options?.className) {
-    el.className = options.className;
-  }
-  if (children) {
-    el.append(...(Array.isArray(children) ? children : [children]));
-  }
-
-  return el;
-};
-
-// TODO(burdon): Remove react rendering; use DOM directly.
-// NOTE: CM seems to remove/detach/overwrite portals that are attached to the DOM it control.s
+/** @deprecated */
+// TODO(wittjosiah): Replace with portals which are lighter weight and inherit context from the main react tree.
 export const renderRoot = <T extends Element>(root: T, node: ReactNode): T => {
   createRoot(root).render(<ThemeProvider tx={defaultTx}>{node}</ThemeProvider>);
   return root;
@@ -37,6 +19,7 @@ export const renderRoot = <T extends Element>(root: T, node: ReactNode): T => {
 
 /**
  * Utility to create a renderer for a React component.
+ * @deprecated
  */
 export const createRenderer =
   <Props extends object>(Component: FC<Props>): RenderCallback<Props> =>

package/dist/types/src/extensions/command/menu.d.ts

@@ -1,47 +0,0 @@
-import { StateField } from '@codemirror/state';
-import { EditorView } from '@codemirror/view';
-import { type RefObject } from 'react';
-import { type DxRefTag, type DxRefTagActivate } from '@dxos/lit-ui';
-import { type MaybePromise } from '@dxos/util';
-import { type CommandMenuGroup, type CommandMenuItem } from '../../components';
-import { type Range } from '../../types';
-import { multilinePlaceholder } from '../placeholder';
-export type FloatingMenuOptions = {
-    icon?: string;
-    height?: number;
-    padding?: number;
-};
-export declare const floatingMenu: (options?: FloatingMenuOptions) => import("@codemirror/state").Extension[];
-type CommandState = {
-    trigger: string;
-    range: Range;
-};
-export declare const commandRangeEffect: import("@codemirror/state").StateEffectType<CommandState | null>;
-export type CommandMenuOptions = {
-    trigger: string | string[];
-    placeholder?: Parameters<typeof multilinePlaceholder>[0];
-    onArrowDown?: () => void;
-    onArrowUp?: () => void;
-    onDeactivate?: () => void;
-    onEnter?: () => void;
-    onTextChange?: (trigger: string, text: string) => void;
-};
-export declare const commandMenu: (options: CommandMenuOptions) => (import("@codemirror/state").Extension | StateField<CommandState | null>)[];
-export type UseCommandMenuOptions = {
-    viewRef: RefObject<EditorView | undefined>;
-    trigger: string | string[];
-    placeholder?: Parameters<typeof multilinePlaceholder>[0];
-    getGroups: (trigger: string, query?: string) => MaybePromise<CommandMenuGroup[]>;
-};
-export declare const useCommandMenu: ({ viewRef, trigger, placeholder, getGroups }: UseCommandMenuOptions) => {
-    commandMenu: (import("@codemirror/state").Extension | StateField<CommandState | null>)[];
-    currentItem: string | undefined;
-    groupsRef: import("react").MutableRefObject<CommandMenuGroup[]>;
-    ref: import("react").MutableRefObject<DxRefTag | null>;
-    open: boolean;
-    onActivate: (event: DxRefTagActivate) => Promise<void>;
-    onOpenChange: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-    onSelect: (item: CommandMenuItem) => void;
-};
-export {};
-//# sourceMappingURL=menu.d.ts.map

package/dist/types/src/extensions/command/menu.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/command/menu.ts"],"names":[],"mappings":"AAIA,OAAO,EAAmB,UAAU,EAAqB,MAAM,mBAAmB,CAAC;AACnF,OAAO,EAAE,UAAU,EAAuE,MAAM,kBAAkB,CAAC;AACnH,OAAO,EAAE,KAAK,SAAS,EAA0C,MAAM,OAAO,CAAC;AAG/E,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,gBAAgB,EAAE,MAAM,cAAc,CAAC;AACpE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAG/C,OAAO,EAAyC,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACtH,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAEtD,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,UAAS,mBAAwB,4CAqH7D,CAAC;AAEF,KAAK,YAAY,GAAG;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,KAAK,CAAC;CACd,CAAC;AAGF,eAAO,MAAM,kBAAkB,kEAA4C,CAAC;AAkB5E,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC,CAAC,CAAC,CAAC;IACzD,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACxD,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,SAAS,kBAAkB,gFA2JtD,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,OAAO,EAAE,SAAS,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC;IAC3C,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC,CAAC,CAAC,CAAC;IACzD,SAAS,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,YAAY,CAAC,gBAAgB,EAAE,CAAC,CAAC;CAClF,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,8CAA8C,qBAAqB;;;;;;wBAwBhF,gBAAgB;;qBAeQ,eAAe;CA2DxD,CAAC"}

package/dist/types/src/extensions/placeholder.d.ts

@@ -1,4 +0,0 @@
-import { type Extension } from '@codemirror/state';
-import { EditorView } from '@codemirror/view';
-export declare function multilinePlaceholder(content: string | HTMLElement | ((view: EditorView) => HTMLElement)): Extension;
-//# sourceMappingURL=placeholder.d.ts.map

package/dist/types/src/extensions/placeholder.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"placeholder.d.ts","sourceRoot":"","sources":["../../../../src/extensions/placeholder.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAc,UAAU,EAA0B,MAAM,kBAAkB,CAAC;AA2ClF,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,MAAM,GAAG,WAAW,GAAG,CAAC,CAAC,IAAI,EAAE,UAAU,KAAK,WAAW,CAAC,GAAG,SAAS,CA+BnH"}