@dxos/plugin-wnfs 0.7.5-main.9d26e3a → 0.7.5-main.b19bfc8

package/src/capabilities/react-surface.tsx

@@ -0,0 +1,41 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { contributes, Capabilities, createSurface } from '@dxos/app-framework';
+import { type S } from '@dxos/echo-schema';
+import { findAnnotation } from '@dxos/effect';
+import { type InputProps } from '@dxos/react-ui-form';
+
+import { FileContainer, FileInput } from '../components';
+import { WNFS_PLUGIN } from '../meta';
+import { FileType, WnfsAction } from '../types';
+
+export default () =>
+  contributes(Capabilities.ReactSurface, [
+    createSurface({
+      id: `${WNFS_PLUGIN}/article`,
+      role: ['article', 'section', 'slide'],
+      filter: (data): data is { subject: FileType } => data.subject instanceof FileType,
+      component: ({ data, role }) => <FileContainer role={role} file={data.subject} />,
+    }),
+    createSurface({
+      id: `${WNFS_PLUGIN}/create-form`,
+      role: 'form-input',
+      filter: (data): data is { prop: string; schema: S.Schema.Any } => {
+        const annotation = findAnnotation<boolean>((data.schema as S.Schema.All).ast, WnfsAction.UploadAnnotationId);
+        return !!annotation;
+      },
+      component: ({ data: { prop, schema }, ...props }) => {
+        const inputProps = props as unknown as InputProps;
+        const handleChange = useCallback(
+          (file: File) => inputProps.onValueChange?.('object', file),
+          [prop, inputProps.onValueChange],
+        );
+
+        return <FileInput schema={schema} onChange={handleChange} />;
+      },
+    }),
+  ]);

package/src/components/FileContainer.tsx

@@ -0,0 +1,46 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useEffect, useState } from 'react';
+
+import { useCapability } from '@dxos/app-framework';
+import { invariant } from '@dxos/invariant';
+import { getSpace } from '@dxos/react-client/echo';
+import { StackItem } from '@dxos/react-ui-stack';
+
+import { FilePreview } from './FilePreview';
+import { WnfsCapabilities } from '../capabilities';
+import { filePath, getBlobUrl, loadWnfs, wnfsUrl } from '../helpers';
+import { type FileType } from '../types';
+
+const FileContainer = ({ file, role }: { file: FileType; role: string }) => {
+  const blockstore = useCapability(WnfsCapabilities.Blockstore);
+  const instances = useCapability(WnfsCapabilities.Instances);
+  const [blobUrl, setBlobUrl] = useState<string>();
+
+  useEffect(() => {
+    const timeout = setTimeout(async () => {
+      const space = getSpace(file);
+      invariant(space);
+      const { directory, forest } = await loadWnfs({ blockstore, instances, space });
+      const path = filePath(file.cid.toString(), space);
+      const url = await getBlobUrl({ wnfsUrl: wnfsUrl(path), blockstore, directory, forest });
+      setBlobUrl(url);
+    });
+
+    return () => clearTimeout(timeout);
+  }, [file]);
+
+  if (!blobUrl) {
+    return null;
+  }
+
+  return (
+    <StackItem.Content role={role} toolbar={false}>
+      <FilePreview type={file.type} url={blobUrl} />
+    </StackItem.Content>
+  );
+};
+
+export default FileContainer;

package/src/components/FileInput.tsx

@@ -0,0 +1,46 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+import { useDropzone } from 'react-dropzone';
+
+import { findAnnotation, type S } from '@dxos/effect';
+import { useTranslation } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+import { WNFS_PLUGIN } from '../meta';
+import { WnfsAction } from '../types';
+
+export type FileInputProps = {
+  schema: S.Schema.Any;
+  onChange: (file: File) => void;
+};
+
+export const FileInput = ({ schema, onChange }: FileInputProps) => {
+  const { t } = useTranslation(WNFS_PLUGIN);
+  const accept = findAnnotation<Record<string, string[]>>(schema.ast, WnfsAction.UploadAnnotationId);
+
+  const onDropAccepted = useCallback((files: File[]) => onChange?.(files[0]), [onChange]);
+
+  const { acceptedFiles, getRootProps, getInputProps, isFocused, isDragAccept, isDragReject } = useDropzone({
+    multiple: false,
+    accept,
+    onDropAccepted,
+  });
+
+  return (
+    <div
+      {...getRootProps()}
+      className={mx(
+        'flex flex-col items-center p-8 border border-separator',
+        isFocused && 'focus-ring',
+        isDragAccept && 'bg-attention',
+        isDragReject && 'border-error',
+      )}
+    >
+      <input {...getInputProps()} />
+      {acceptedFiles[0] ? <p>{acceptedFiles[0].name}</p> : <p>{t('file input placeholder')}</p>}
+    </div>
+  );
+};

package/src/components/index.ts

@@ -4,8 +4,6 @@
 
 import React from 'react';
 
-// Lazily load components for content surfaces.
-export const FileCard = React.lazy(() => import('./FileCard'));
-export const FileMain = React.lazy(() => import('./FileMain'));
-export const FileSection = React.lazy(() => import('./FileSection'));
-export const FileSlide = React.lazy(() => import('./FileSlide'));
+export const FileContainer = React.lazy(() => import('./FileContainer'));
+
+export * from './FileInput';

package/src/extensions/image.stories.tsx

@@ -7,6 +7,7 @@ import '@dxos-theme';
 import type { Blockstore } from 'interface-blockstore';
 import React, { useEffect, useState } from 'react';
 
+import { faker } from '@dxos/random';
 import { useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { useThemeContext } from '@dxos/react-ui';
@@ -15,26 +16,27 @@ import {
   createMarkdownExtensions,
   createThemeExtensions,
   decorateMarkdown,
+  processEditorPayload,
   useTextEditor,
 } from '@dxos/react-ui-editor';
 import { withTheme, withLayout } from '@dxos/storybook-utils';
 
 import { image } from './image';
 import { create as createBlockstore } from '../blockstore';
-import { filePath, store } from '../common';
-import { loadWnfs } from '../load';
-import { upload } from '../upload';
+import { upload } from '../helpers';
+
+faker.seed(1);
+const initialValue = faker.lorem.paragraphs(100);
+const instances = {};
 
 const Story = () => {
+  const { themeMode } = useThemeContext();
   const space = useSpace();
-
   const [blockstore, setBlockstore] = useState<Blockstore>();
-  const [amountOfUploads, setAmountOfUploads] = useState<number>(0);
-  const [images, setImages] = useState<{ url: string }[]>([]);
 
   useEffect(() => {
     if (space) {
-      console.log('SPACE ID', space.properties.id);
+      console.log('SPACE ID', space.id);
     }
 
     const create = async () => {
@@ -47,43 +49,29 @@ const Story = () => {
     create().catch(console.error);
   }, [space]);
 
-  useEffect(() => {
-    if (!space || !blockstore) {
-      return;
-    }
-
-    (async () => {
-      const { directory, forest } = await loadWnfs(space, blockstore);
-      const parentPath = ['spaces', space.properties.id, 'files'];
-      const parentNode = await directory.getNode(parentPath, true, forest, store(blockstore));
-      if (!parentNode) {
-        return;
-      }
-
-      const { result } = await directory.ls(parentPath, true, forest, store(blockstore));
-
-      const images = await Promise.all(
-        result.map(async (r: any) => {
-          const path = filePath(r.name, space);
-          const reading = await directory.read(path, true, forest, store(blockstore));
-          const bytes = reading.result;
-          const blob = new Blob([bytes]);
-          const url = URL.createObjectURL(blob);
-          return { url };
-        }),
-      );
-
-      setImages(images);
-    })().catch(console.error);
-  }, [space, blockstore, amountOfUploads]);
+  const { parentRef, view, focusAttributes } = useTextEditor(
+    () => ({
+      initialValue,
+      extensions: [
+        createBasicExtensions(),
+        createMarkdownExtensions({ themeMode }),
+        createThemeExtensions({ themeMode, syntaxHighlighting: true }),
+        blockstore && space ? [image({ blockstore, instances, space })] : [],
+        decorateMarkdown(),
+      ],
+    }),
+    [themeMode, blockstore, space],
+  );
 
   const onFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
     if (file) {
       if (blockstore) {
         if (space) {
-          await upload({ blockstore, file, space });
-          setAmountOfUploads(amountOfUploads + 1);
+          const info = await upload({ blockstore, file, space });
+          if (info && view) {
+            processEditorPayload(view, { type: 'image', data: info.url });
+          }
         } else {
           console.warn('Space is undefined.');
         }
@@ -93,42 +81,12 @@ const Story = () => {
     }
   };
 
-  const { themeMode } = useThemeContext();
-  const { parentRef, focusAttributes } = useTextEditor(
-    () => ({
-      initialValue: '',
-      extensions: [
-        createBasicExtensions(),
-        createMarkdownExtensions({ themeMode }),
-        createThemeExtensions({ themeMode, syntaxHighlighting: true }),
-        blockstore && space ? [image({ blockstore, space })] : [],
-        decorateMarkdown(),
-      ],
-    }),
-    [themeMode],
-  );
-
-  const renderedImages = images.map((image, index) => (
-    <div key={index} className='mt-1'>
-      <img src={image.url} width='300' />
-    </div>
-  ));
-
   return (
     <>
       <div className='mb-2'>
         <input type='file' accept='image/*' onChange={onFileChange} />
       </div>
       <div className='w-[50rem]' ref={parentRef} {...focusAttributes} />
-      <div>
-        {images.length ? (
-          renderedImages
-        ) : (
-          <p>
-            <strong className='text-green-600'>Select an image file to add to WNFS and render it.</strong>
-          </p>
-        )}
-      </div>
     </>
   );
 };

package/src/extensions/image.tsx

@@ -0,0 +1,203 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { syntaxTree } from '@codemirror/language';
+import { type EditorState, type Extension, StateField, type Range } from '@codemirror/state';
+import { Decoration, EditorView, WidgetType } from '@codemirror/view';
+import type { Blockstore } from 'interface-blockstore';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+
+import { type Space } from '@dxos/react-client/echo';
+import { Status, ThemeProvider } from '@dxos/react-ui';
+import { focusField } from '@dxos/react-ui-editor';
+import { defaultTx } from '@dxos/react-ui-theme';
+import { type MaybePromise } from '@dxos/util';
+
+import { type WnfsCapabilities } from '../capabilities';
+import { getBlobUrl, getPathFromUrl, loadWnfs } from '../helpers';
+
+const WAIT_UNTIL_LOADER = 1500;
+
+export type ImageOptions = {
+  blockstore: Blockstore;
+  instances: WnfsCapabilities.Instances;
+  space: Space;
+};
+
+/**
+ * Create WNFS image decorations.
+ */
+export const image = (options: ImageOptions): Extension[] => {
+  const blobUrlCache: Record<string, string> = {};
+  const preloaded = new Set<string>();
+
+  const preload = (url: string) => {
+    if (!preloaded.has(url)) {
+      const img = document.createElement('img');
+      img.src = url;
+      preloaded.add(url);
+    }
+  };
+
+  return [
+    StateField.define({
+      create: (state) => {
+        return Decoration.set(
+          buildDecorations({ from: 0, to: state.doc.length, state, blobUrlCache, preload, options }),
+        );
+      },
+      update: (value, tr) => {
+        if (!tr.docChanged && !tr.selection) {
+          return value;
+        }
+
+        // Find range of changes and cursor changes.
+        const cursor = tr.state.selection.main.head;
+        const oldCursor = tr.changes.mapPos(tr.startState.selection.main.head);
+        let from = Math.min(cursor, oldCursor);
+        let to = Math.max(cursor, oldCursor);
+        tr.changes.iterChangedRanges((fromA, toA, fromB, toB) => {
+          from = Math.min(from, fromB);
+          to = Math.max(to, toB);
+        });
+
+        // Expand to cover lines.
+        from = tr.state.doc.lineAt(from).from;
+        to = tr.state.doc.lineAt(to).to;
+
+        return value.map(tr.changes).update({
+          filterFrom: from,
+          filterTo: to,
+          filter: () => false,
+          add: buildDecorations({ from, to, state: tr.state, blobUrlCache, preload, options }),
+        });
+      },
+      provide: (field) => EditorView.decorations.from(field),
+    }),
+  ];
+};
+
+const buildDecorations = ({
+  from,
+  to,
+  state,
+  blobUrlCache,
+  preload,
+  options: { blockstore, instances, space },
+}: {
+  from: number;
+  to: number;
+  state: EditorState;
+  blobUrlCache: Record<string, string>;
+  preload: (url: string) => void;
+  options: ImageOptions;
+}) => {
+  const decorations: Range<Decoration>[] = [];
+  const cursor = state.selection.main.head;
+  syntaxTree(state).iterate({
+    enter: (node) => {
+      if (node.name !== 'Image') {
+        return;
+      }
+
+      const urlNode = node.node.getChild('URL');
+      if (!urlNode) {
+        return;
+      }
+
+      const hide = state.readOnly || cursor < node.from || cursor > node.to;
+      const wnfsUrl = state.sliceDoc(urlNode.from, urlNode.to);
+      if (!wnfsUrl.startsWith('wnfs://')) {
+        return;
+      }
+
+      const path = getPathFromUrl(wnfsUrl);
+
+      // Cannot load images from other spaces
+      const spaceId = path[1];
+      if (spaceId !== space.id) {
+        return;
+      }
+
+      // Load image contents into memory blob
+      const blobUrlPromise = (async () => {
+        const { directory, forest } = await loadWnfs({ blockstore, instances, space });
+        const url = await getBlobUrl({ wnfsUrl, blockstore, directory, forest });
+        blobUrlCache[path.join('/')] = url;
+        preload(url);
+        return url;
+      })();
+
+      decorations.push(
+        Decoration.replace({
+          block: true, // Prevent cursor from entering.
+          widget: new WnfsImageWidget(wnfsUrl, blobUrlCache[path.join('/')] ?? blobUrlPromise),
+        }).range(hide ? node.from : node.to, node.to),
+      );
+    },
+    from,
+    to,
+  });
+
+  return decorations;
+};
+
+const createImg = (view: EditorView, url: string) => {
+  const img = document.createElement('img');
+  img.setAttribute('src', url);
+  img.setAttribute('class', 'cm-image-with-loader');
+  // If focused, hide image until successfully loaded to avoid flickering effects.
+  if (view.state.field(focusField)) {
+    img.onload = () => img.classList.add('cm-loaded-image');
+  } else {
+    img.classList.add('cm-loaded-image');
+  }
+  return img;
+};
+
+class WnfsImageWidget extends WidgetType {
+  constructor(
+    readonly _wnfsUrl: string,
+    readonly _url: MaybePromise<string>,
+  ) {
+    super();
+  }
+
+  override eq(other: this) {
+    return this._wnfsUrl === (other as any as WnfsImageWidget)._wnfsUrl;
+  }
+
+  override toDOM(view: EditorView) {
+    if (typeof this._url === 'string') {
+      return createImg(view, this._url);
+    }
+
+    const widget = document.createElement('div');
+    widget.className = 'cm-image-wrapper';
+    const loader = document.createElement('div');
+    loader.className = 'mx-auto transition-opacity';
+    let loaderAdded = false;
+
+    const timeout = setTimeout(() => {
+      const root = createRoot(loader);
+      root.render(
+        <ThemeProvider tx={defaultTx}>
+          <Status indeterminate />
+        </ThemeProvider>,
+      );
+      widget.appendChild(loader);
+      loaderAdded = true;
+    }, WAIT_UNTIL_LOADER);
+
+    void this._url.then((url) => {
+      clearTimeout(timeout);
+      const img = createImg(view, url);
+      loaderAdded && widget.removeChild(loader);
+      widget.appendChild(img);
+    });
+
+    return widget;
+  }
+}

package/src/{common.ts → helpers/common.ts}

@@ -15,7 +15,7 @@ import { type Space } from '@dxos/react-client/echo';
 //
 
 export const filePath = (fileName: string, space: Space) => {
-  return ['spaces', space.properties.id, 'files', fileName];
+  return ['spaces', space.id, 'files', fileName];
 };
 
 //

package/src/helpers/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './common';
+export * from './load';
+export * from './upload';
+export * from './wnfs-url';

package/src/{load.ts → helpers/load.ts}

@@ -10,16 +10,40 @@ import { AccessKey, PrivateForest, PrivateDirectory, PrivateNode } from 'wnfs';
 import { type Space } from '@dxos/react-client/echo';
 
 import { Rng, store } from './common';
+import { type WnfsCapabilities } from '../capabilities';
 
 //
 // LOAD
 //
 
-export const loadWnfs = async (space: Space, blockstore: Blockstore) => {
-  const exists =
-    space.properties.wnfs_access_key !== undefined && space.properties.wnfs_private_forest_cid !== undefined;
-
-  return exists ? await loadWnfsDir(blockstore, space) : await createWnfsDir(blockstore, space);
+export const loadWnfs = async ({
+  space,
+  blockstore,
+  instances,
+}: {
+  space: Space;
+  blockstore: Blockstore;
+  instances?: WnfsCapabilities.Instances;
+}) => {
+  // TODO(wittjosiah): Remove.
+  // Delete old properties if they exist.
+  if (space.properties.wnfs_access_key !== undefined && space.properties.wnfs_private_forest_cid !== undefined) {
+    delete space.properties.wnfs_access_key;
+    delete space.properties.wnfs_private_forest_cid;
+  }
+
+  const cacheKey = space.properties.wnfs?.privateForestCid;
+  if (instances?.[cacheKey]) {
+    return instances[cacheKey];
+  }
+
+  const exists = !!space.properties.wnfs;
+  const instance = exists ? await loadWnfsDir(blockstore, space) : await createWnfsDir(blockstore, space);
+  if (instances) {
+    instances[cacheKey] = instance;
+  }
+
+  return instance;
 };
 
 //
@@ -40,8 +64,10 @@ const createWnfsDir = async (blockstore: Blockstore, space: Space) => {
 
   const cidBytes = await newForest.store(wnfsStore);
 
-  space.properties.wnfs_access_key = Uint8Arrays.toString(accessKeyRaw.toBytes(), 'base64');
-  space.properties.wnfs_private_forest_cid = CID.decode(cidBytes).toString();
+  space.properties.wnfs = {
+    accessKey: Uint8Arrays.toString(accessKeyRaw.toBytes(), 'base64'),
+    privateForestCid: CID.decode(cidBytes).toString(),
+  };
 
   return {
     directory: dir,
@@ -52,8 +78,11 @@ const createWnfsDir = async (blockstore: Blockstore, space: Space) => {
 const loadWnfsDir = async (blockstore: Blockstore, space: Space) => {
   const wnfsStore = store(blockstore);
 
-  const accessKey = AccessKey.fromBytes(Uint8Arrays.fromString(space.properties.wnfs_access_key, 'base64'));
-  const forest = await PrivateForest.load(CID.parse(space.properties.wnfs_private_forest_cid).bytes, wnfsStore);
+  const accessKey = AccessKey.fromBytes(Uint8Arrays.fromString(space.properties.wnfs.accessKey, 'base64'));
+  const forest: PrivateForest = await PrivateForest.load(
+    CID.parse(space.properties.wnfs.privateForestCid).bytes,
+    wnfsStore,
+  );
   const node: PrivateNode = await PrivateNode.load(accessKey, forest, wnfsStore);
 
   return {

package/src/{upload.ts → helpers/upload.ts}

@@ -13,9 +13,20 @@ import { log } from '@dxos/log';
 import { Rng, filePath, store } from './common';
 import { loadWnfs } from './load';
 import { wnfsUrl } from './wnfs-url';
-
-export const upload = async ({ blockstore, file, space }: { blockstore: Blockstore; file: File; space: Space }) => {
-  const { directory, forest } = await loadWnfs(space, blockstore);
+import { type WnfsCapabilities } from '../capabilities';
+
+export const upload = async ({
+  file,
+  blockstore,
+  instances,
+  space,
+}: {
+  file: File;
+  blockstore: Blockstore;
+  instances?: WnfsCapabilities.Instances;
+  space: Space;
+}) => {
+  const { directory, forest } = await loadWnfs({ blockstore, instances, space });
   const wnfsStore = store(blockstore);
 
   const bytes = new Uint8Array(await file.arrayBuffer());
@@ -34,11 +45,14 @@ export const upload = async ({ blockstore, file, space }: { blockstore: Blocksto
   const cidBytes = await updatedForest.store(wnfsStore);
 
   // Update the forest pointer on the associated space.
-  space.properties.wnfs_private_forest_cid = CID.decode(cidBytes).toString();
+  space.properties.wnfs.privateForestCid = CID.decode(cidBytes).toString();
 
   // Generate `wnfs://` URL & return the info.
   const info = {
+    name: file.name,
+    type: file.type,
     url: wnfsUrl(path),
+    cid: cid.toString(),
   };
 
   log('upload', { file, info });

package/src/helpers/wnfs-url.ts

@@ -0,0 +1,36 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import type { Blockstore } from 'interface-blockstore';
+import { type PrivateDirectory, type PrivateForest } from 'wnfs';
+
+import { store } from './common';
+
+export const wnfsUrl = (filePath: string[]) => {
+  return 'wnfs://' + filePath.map((f) => encodeURIComponent(f)).join('/');
+};
+
+export const getPathFromUrl = (wnfsUrl: string) =>
+  wnfsUrl
+    .replace(/^wnfs:\/\//, '')
+    .split('/')
+    .map((p) => decodeURIComponent(p));
+
+export const getBlobUrl = async ({
+  wnfsUrl,
+  blockstore,
+  directory,
+  forest,
+}: {
+  wnfsUrl: string;
+  blockstore: Blockstore;
+  directory: PrivateDirectory;
+  forest: PrivateForest;
+}) => {
+  const path = getPathFromUrl(wnfsUrl);
+  const wnfsStore = store(blockstore);
+  const { result } = await directory.read(path, true, forest, wnfsStore);
+  const blob = new Blob([result]);
+  return URL.createObjectURL(blob);
+};

package/src/index.ts

@@ -2,8 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-import { WnfsPlugin } from './WnfsPlugin';
-
-export default WnfsPlugin;
-
+export { WnfsCapabilities } from './capabilities';
+export * from './meta';
 export * from './WnfsPlugin';