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

package/src/components/FileContainer.tsx

@@ -1,49 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { useState } from 'react';
-
-import { useCapability } from '@dxos/app-framework';
-import { invariant } from '@dxos/invariant';
-import { getSpace } from '@dxos/react-client/echo';
-import { useAsyncEffect } from '@dxos/react-ui';
-import { StackItem } from '@dxos/react-ui-stack';
-
-import { WnfsCapabilities } from '../capabilities';
-import { filePath, getBlobUrl, loadWnfs, wnfsUrl } from '../helpers';
-import { type FileType } from '../types';
-
-import { FilePreview } from './FilePreview';
-
-export type FileContainerProps = {
-  role: string;
-  file: FileType;
-};
-
-export const FileContainer = ({ 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 (
-    <StackItem.Content>
-      <FilePreview type={file.type} url={blobUrl} />
-    </StackItem.Content>
-  );
-};
-
-export default FileContainer;

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/react-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',
-        isDragReject && 'border-error',
-      )}
-    >
-      <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/react-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,9 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { lazy } from 'react';
-
-export const FileContainer = lazy(() => import('./FileContainer'));
-
-export * from './FileInput';

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 {
-  createBasicExtensions,
-  createMarkdownExtensions,
-  createThemeExtensions,
-  decorateMarkdown,
-  processEditorPayload,
-  useTextEditor,
-} from '@dxos/react-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/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/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 = ({
-  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): boolean {
-    return this._wnfsUrl === (other as any as WnfsImageWidget)._wnfsUrl;
-  }
-
-  override toDOM(view: EditorView): HTMLDivElement {
-    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,17 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import * as Schema from 'effect/Schema';
-
-import { TypedObject } from '@dxos/echo/internal';
-
-export class FileType extends TypedObject({
-  typename: 'dxos.org/type/File',
-  version: '0.1.0',
-})({
-  name: Schema.optional(Schema.String),
-  type: Schema.String,
-  cid: Schema.String,
-  timestamp: Schema.optional(Schema.String),
-}) {}

package/src/types/types.ts

@@ -1,41 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as Schema from 'effect/Schema';
-
-import { FileInfoSchema } from '@dxos/app-framework';
-import { SpaceSchema } from '@dxos/react-client/echo';
-
-import { meta } from '../meta';
-
-import { FileType } from './file';
-
-export namespace WnfsAction {
-  export class Create extends Schema.TaggedClass<Create>()(`${meta.id}/action/create`, {
-    input: FileInfoSchema.pick('name', 'type', 'cid').pipe(Schema.required),
-    output: Schema.Struct({
-      object: FileType,
-    }),
-  }) {}
-
-  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>;
-
-  export class Upload extends Schema.TaggedClass<Upload>()(`${meta.id}/action/upload`, {
-    input: Schema.extend(UploadFileSchema, Schema.Struct({ space: SpaceSchema })),
-    output: Schema.required(FileInfoSchema),
-  }) {}
-}