@dxos/plugin-wnfs 0.8.4-main.c85a9c8dae → 0.8.4-main.d9fc60f731

package/src/capabilities/react-surface/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Capability } from '@dxos/app-framework';
-
-export const ReactSurface = Capability.lazy('ReactSurface', () => import('./react-surface'));

package/src/capabilities/react-surface/react-surface.tsx

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

package/src/components/FileInput.tsx

@@ -1,47 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import type * as Schema from 'effect/Schema';
-import React, { useCallback } from 'react';
-import { useDropzone } from 'react-dropzone';
-
-import { findAnnotation } from '@dxos/effect';
-import { useTranslation } from '@dxos/react-ui';
-import { mx } from '@dxos/ui-theme';
-
-import { meta } from '../meta';
-import { WnfsAction } from '../types';
-
-export type FileInputProps = {
-  schema: Schema.Schema.Any;
-  onChange: (file: File) => void;
-};
-
-export const FileInput = ({ schema, onChange }: FileInputProps) => {
-  const { t } = useTranslation(meta.id);
-  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-surface',
-        isDragReject && 'border-rose-fill',
-      )}
-    >
-      <input {...getInputProps()} />
-      {acceptedFiles[0] ? <p>{acceptedFiles[0].name}</p> : <p>{t('file input placeholder')}</p>}
-    </div>
-  );
-};

package/src/components/FilePreview.tsx

@@ -1,23 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React from 'react';
-
-import { type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/ui-theme';
-
-export type FilePreviewProps = ThemedClassName<{ type: string; url: string }>;
-
-/**
- * File/content preview iframe.
- */
-export const FilePreview = ({ type, url, classNames }: FilePreviewProps) => {
-  if (type.startsWith('image/')) {
-    return <img className={mx('w-full h-full object-contain', classNames)} src={url} />;
-  } else if (type.startsWith('video/')) {
-    return <video className={mx('w-full h-full object-contain', classNames)} src={url} controls />;
-  } else {
-    return <iframe className={mx('w-full h-full overflow-auto', classNames)} src={url} />;
-  }
-};

package/src/components/index.ts

@@ -1,6 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-export * from './FileInput';
-export * from './FilePreview';

package/src/containers/FileContainer/FileContainer.tsx

@@ -1,58 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { useState } from 'react';
-
-import { useCapability } from '@dxos/app-framework/ui';
-import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
-import { invariant } from '@dxos/invariant';
-import { getSpace } from '@dxos/react-client/echo';
-import { Panel, useAsyncEffect } from '@dxos/react-ui';
-
-import { FilePreview } from '../../components';
-import { filePath, getBlobUrl, loadWnfs, wnfsUrl } from '../../helpers';
-import { WnfsCapabilities, type WnfsFile } from '../../types';
-
-export type FileContainerProps = SurfaceComponentProps<WnfsFile.File>;
-
-export const FileContainer = ({ role, subject: file }: FileContainerProps) => {
-  const blockstore = useCapability(WnfsCapabilities.Blockstore);
-  const instances = useCapability(WnfsCapabilities.Instances);
-  const [blobUrl, setBlobUrl] = useState<string>();
-
-  useAsyncEffect(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,
-      type: file.type,
-    });
-    setBlobUrl(url);
-  }, [file]);
-
-  if (!blobUrl) {
-    return null;
-  }
-
-  return (
-    <Panel.Root role={role} className='dx-article'>
-      <Panel.Content asChild>
-        <Panel.Content asChild>
-          <FilePreview type={file.type} url={blobUrl} />
-        </Panel.Content>
-      </Panel.Content>
-    </Panel.Root>
-  );
-};
-
-export default FileContainer;

package/src/containers/FileContainer/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { FileContainer } from './FileContainer';
-
-export default FileContainer;

package/src/containers/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type ComponentType, lazy } from 'react';
-
-export const FileContainer: ComponentType<any> = lazy(() => import('./FileContainer'));

package/src/extensions/image.stories.tsx

@@ -1,104 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import type { Blockstore } from 'interface-blockstore';
-import React, { type ChangeEvent, 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';
-import { withTheme } from '@dxos/react-ui/testing';
-import { useTextEditor } from '@dxos/react-ui-editor';
-import {
-  createBasicExtensions,
-  createMarkdownExtensions,
-  createThemeExtensions,
-  decorateMarkdown,
-  processEditorPayload,
-} from '@dxos/ui-editor';
-
-import { create as createBlockstore } from '../blockstore';
-import { upload } from '../helpers';
-
-import { image } from './image';
-
-faker.seed(1);
-const initialValue = faker.lorem.paragraphs(100);
-const instances = {};
-
-const DefaultStory = () => {
-  const { themeMode } = useThemeContext();
-  const space = useSpace();
-  const [blockstore, setBlockstore] = useState<Blockstore>();
-
-  useEffect(() => {
-    if (space) {
-      console.log('SPACE ID', space.id);
-    }
-
-    const create = async () => {
-      // NOTE: We don't pass in the URL of the Blob service, so we don't use it.
-      const bs = createBlockstore();
-      await bs.open();
-      setBlockstore(bs);
-    };
-
-    create().catch(console.error);
-  }, [space]);
-
-  const { parentRef, view, focusAttributes } = useTextEditor(
-    () => ({
-      initialValue,
-      extensions: [
-        createBasicExtensions(),
-        createMarkdownExtensions(),
-        createThemeExtensions({ themeMode, syntaxHighlighting: true }),
-        blockstore && space ? [image({ blockstore, instances, space })] : [],
-        decorateMarkdown(),
-      ],
-    }),
-    [themeMode, blockstore, space],
-  );
-
-  const onFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (file) {
-      if (blockstore) {
-        if (space) {
-          const info = await upload({ blockstore, file, space });
-          if (info && view) {
-            processEditorPayload(view, { type: 'image', data: info.url });
-          }
-        } else {
-          console.warn('Space is undefined.');
-        }
-      } else {
-        console.warn("Blockstore hasn't been initialised yet.");
-      }
-    }
-  };
-
-  return (
-    <>
-      <div className='mb-2'>
-        <input type='file' accept='image/*' onChange={onFileChange} />
-      </div>
-      <div className='w-[50rem]' ref={parentRef} {...focusAttributes} />
-    </>
-  );
-};
-
-const meta = {
-  title: 'plugins/plugin-wnfs/extensions/image',
-  render: DefaultStory,
-  decorators: [withTheme(), withClientProvider({ createIdentity: true, createSpace: true })],
-} satisfies Meta<typeof DefaultStory>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/src/extensions/image.tsx

@@ -1,203 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { syntaxTree } from '@codemirror/language';
-import { type EditorState, type Extension, type Range, StateField } 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/ui-editor';
-import { defaultTx } from '@dxos/ui-theme';
-import { type MaybePromise } from '@dxos/util';
-
-import { getBlobUrl, getPathFromUrl, loadWnfs } from '../helpers';
-import { type WnfsCapabilities } from '../types';
-
-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 = ({
-  state,
-  from,
-  to,
-  blobUrlCache,
-  preload,
-  options: { blockstore, instances, space },
-}: {
-  state: EditorState;
-  from: number;
-  to: number;
-  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._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/extensions/index.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-export * from './image';

package/src/types/File.ts

@@ -1,24 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import * as Schema from 'effect/Schema';
-
-import { Obj, Type } from '@dxos/echo';
-import { FormInputAnnotation } from '@dxos/echo/internal';
-
-export const File = Schema.Struct({
-  name: Schema.String.pipe(Schema.optional),
-  type: Schema.String.pipe(FormInputAnnotation.set(false)),
-  cid: Schema.String.pipe(FormInputAnnotation.set(false)),
-  timestamp: Schema.String.pipe(FormInputAnnotation.set(false), Schema.optional),
-}).pipe(
-  Type.object({
-    typename: 'dxos.org/type/File',
-    version: '0.1.0',
-  }),
-);
-
-export type File = Schema.Schema.Type<typeof File>;
-
-export const make = (props: Obj.MakeProps<typeof File>) => Obj.make(File, props);

package/src/types/capabilities.ts

@@ -1,18 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type Blockstore } from 'interface-blockstore';
-import { type PrivateDirectory, type PrivateForest } from 'wnfs';
-
-import { Capability } from '@dxos/app-framework';
-import { type SpaceId } from '@dxos/keys';
-
-import { meta } from '../meta';
-
-export namespace WnfsCapabilities {
-  export const Blockstore = Capability.make<Blockstore>(`${meta.id}/capability/blockstore`);
-
-  export type Instances = Record<SpaceId, { directory: PrivateDirectory; forest: PrivateForest }>;
-  export const Instances = Capability.make<Instances>(`${meta.id}/capability/instances`);
-}

package/src/types/types.ts

@@ -1,81 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as Schema from 'effect/Schema';
-
-import { Capability } from '@dxos/app-framework';
-import { FileInfoSchema } from '@dxos/app-toolkit';
-import { Database } from '@dxos/echo';
-import { Collection } from '@dxos/echo';
-import { Operation } from '@dxos/operation';
-import { SpaceSchema } from '@dxos/react-client/echo';
-
-import { meta } from '../meta';
-
-import * as File from './File';
-
-export namespace WnfsAction {
-  export const UploadAnnotationId = Symbol.for(`${meta.id}/annotation/upload`);
-
-  export const UploadFileSchema = Schema.Struct({
-    file: Schema.instanceOf(File.File).annotations({
-      [UploadAnnotationId]: {
-        // Accept file types.
-        'image/*': ['.jpg', '.jpeg', '.png', '.gif'],
-        'application/pdf': ['.pdf'],
-        // TODO(wittjosiah): Add more file types.
-      },
-    }),
-  });
-
-  export type UploadFileForm = Schema.Schema.Type<typeof UploadFileSchema>;
-}
-
-const WNFS_OPERATION = `${meta.id}/operation`;
-
-export namespace WnfsOperation {
-  export const OnCreateSpace = Operation.make({
-    meta: { key: `${WNFS_OPERATION}/on-create-space`, name: 'On Create Space' },
-    services: [Capability.Service],
-    schema: {
-      input: Schema.Struct({
-        space: SpaceSchema,
-        rootCollection: Collection.Collection,
-        isDefault: Schema.optional(Schema.Boolean),
-      }),
-      output: Schema.Void,
-    },
-  });
-
-  export const Create = Operation.make({
-    meta: { key: `${WNFS_OPERATION}/create`, name: 'Create WNFS File' },
-    services: [Capability.Service],
-    schema: {
-      input: FileInfoSchema.pick('name', 'type', 'cid').pipe(Schema.required),
-      output: Schema.Struct({
-        object: File.File,
-      }),
-    },
-  });
-
-  export const Upload = Operation.make({
-    meta: { key: `${WNFS_OPERATION}/upload`, name: 'Upload File' },
-    services: [Capability.Service],
-    schema: {
-      input: Schema.extend(WnfsAction.UploadFileSchema, Schema.Struct({ db: Database.Database })),
-      output: Schema.required(FileInfoSchema),
-    },
-  });
-
-  export const CreateFile = Operation.make({
-    meta: { key: `${WNFS_OPERATION}/create-file`, name: 'Create File' },
-    services: [Capability.Service],
-    schema: {
-      input: Schema.extend(WnfsAction.UploadFileSchema, Schema.Struct({ db: Database.Database })),
-      output: Schema.Struct({
-        object: File.File,
-      }),
-    },
-  });
-}