@dxos/plugin-wnfs 0.8.4-main.fcfe5033a5 → 0.8.4-staging.60fe92afc8

package/src/containers/FileContainer/FileContainer.tsx

@@ -1,57 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { useState } from 'react';
-
-import { useCapability } from '@dxos/app-framework/ui';
-import { type AppSurface } 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 { WnfsCapabilities, type WnfsFile } from '#types';
-
-import { filePath, getBlobUrl, loadWnfs, wnfsUrl } from '../../helpers';
-
-export type FileContainerProps = AppSurface.ObjectArticleProps<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-document'>
-      <Panel.Content asChild>
-        <FilePreview type={file.type} url={blobUrl} />
-      </Panel.Content>
-    </Panel.Root>
-  );
-};
-
-export default FileContainer;

package/src/containers/FileContainer/index.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export { FileContainer as default } from './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,103 +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 { random } from '@dxos/random';
-import { useSpaces } from '@dxos/react-client/echo';
-import { withClientProvider } from '@dxos/react-client/testing';
-import { useThemeContext } from '@dxos/react-ui';
-import { useTextEditor } from '@dxos/react-ui-editor';
-import { withTheme } from '@dxos/react-ui/testing';
-import {
-  createBasicExtensions,
-  createMarkdownExtensions,
-  createThemeExtensions,
-  decorateMarkdown,
-  processEditorPayload,
-} from '@dxos/ui-editor';
-
-import { create as createBlockstore } from '../blockstore';
-import { upload } from '../helpers';
-import { image } from './image';
-
-random.seed(1);
-const initialValue = random.lorem.paragraphs(100);
-const instances = {};
-
-const DefaultStory = () => {
-  const { themeMode } = useThemeContext();
-  const [space] = useSpaces();
-  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,204 +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 { type WnfsCapabilities } from '#types';
-
-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 = ({
-  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/operations/create-file.ts

@@ -1,31 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as Effect from 'effect/Effect';
-
-import { Capability } from '@dxos/app-framework';
-import { invariant } from '@dxos/invariant';
-import { Operation } from '@dxos/operation';
-import { ClientCapabilities } from '@dxos/plugin-client/types';
-
-import { upload } from '../helpers';
-import { WnfsCapabilities, WnfsFile } from '../types';
-import { CreateFile } from './definitions';
-
-const handler: Operation.WithHandler<typeof CreateFile> = CreateFile.pipe(
-  Operation.withHandler(
-    Effect.fnUntraced(function* ({ file, db }) {
-      const client = yield* Capability.get(ClientCapabilities.Client);
-      const blockstore = yield* Capability.get(WnfsCapabilities.Blockstore);
-      const space = client.spaces.get(db.spaceId);
-      invariant(space, 'Space not found');
-      const info = yield* Effect.promise(() => upload({ file, blockstore, space }));
-      return {
-        object: WnfsFile.make({ name: info.name, type: info.type, cid: info.cid }),
-      };
-    }),
-  ),
-);
-
-export default handler;

package/src/operations/create.ts

@@ -1,22 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as Effect from 'effect/Effect';
-
-import { Operation } from '@dxos/operation';
-
-import { WnfsFile } from '../types';
-import { Create } from './definitions';
-
-const handler: Operation.WithHandler<typeof Create> = Create.pipe(
-  Operation.withHandler(
-    Effect.fnUntraced(function* ({ name, type, cid }) {
-      return {
-        object: WnfsFile.make({ name, type, cid }),
-      };
-    }),
-  ),
-);
-
-export default handler;

package/src/operations/definitions.ts

@@ -1,41 +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 { Operation } from '@dxos/operation';
-
-import { meta } from '#meta';
-
-import { WnfsFile, WnfsAction } from '../types';
-
-const WNFS_OPERATION = `${meta.id}.operation`;
-
-export const Create = Operation.make({
-  meta: { key: `${WNFS_OPERATION}.create`, name: 'Create WNFS File' },
-  services: [Capability.Service],
-  input: FileInfoSchema.pick('name', 'type', 'cid').pipe(Schema.required),
-  output: Schema.Struct({
-    object: WnfsFile.File,
-  }),
-});
-
-export const Upload = Operation.make({
-  meta: { key: `${WNFS_OPERATION}.upload`, name: 'Upload File' },
-  services: [Capability.Service],
-  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],
-  input: Schema.extend(WnfsAction.UploadFileSchema, Schema.Struct({ db: Database.Database })),
-  output: Schema.Struct({
-    object: WnfsFile.File,
-  }),
-});

package/src/operations/index.ts

@@ -1,13 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { OperationHandlerSet } from '@dxos/operation';
-
-export * as WnfsOperation from './definitions';
-
-export const WnfsOperationHandlerSet = OperationHandlerSet.lazy(
-  () => import('./create'),
-  () => import('./create-file'),
-  () => import('./upload'),
-);

package/src/operations/upload.ts

@@ -1,29 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as Effect from 'effect/Effect';
-
-import { Capability } from '@dxos/app-framework';
-import { invariant } from '@dxos/invariant';
-import { Operation } from '@dxos/operation';
-import { ClientCapabilities } from '@dxos/plugin-client/types';
-
-import { upload } from '../helpers';
-import { WnfsCapabilities } from '../types';
-import { Upload } from './definitions';
-
-const handler: Operation.WithHandler<typeof Upload> = Upload.pipe(
-  Operation.withHandler(
-    Effect.fnUntraced(function* ({ file, db }) {
-      const client = yield* Capability.get(ClientCapabilities.Client);
-      const blockstore = yield* Capability.get(WnfsCapabilities.Blockstore);
-      const space = client.spaces.get(db.spaceId);
-      invariant(space, 'Space not found');
-      const info = yield* Effect.promise(() => upload({ file, blockstore, space }));
-      return info;
-    }),
-  ),
-);
-
-export default handler;

package/src/types/File.ts

@@ -1,28 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import * as Schema from 'effect/Schema';
-
-import { Annotation, 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: 'org.dxos.type.file',
-    version: '0.1.0',
-  }),
-  Annotation.IconAnnotation.set({
-    icon: 'ph--file--regular',
-    hue: 'teal',
-  }),
-);
-
-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,24 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as Schema from 'effect/Schema';
-
-import { meta } from '#meta';
-
-export namespace WnfsAction {
-  export const UploadAnnotationId = Symbol.for(`${meta.id}.annotation.upload`);
-
-  export const UploadFileSchema = Schema.Struct({
-    file: Schema.instanceOf(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>;
-}