@dxos/plugin-wnfs 0.6.14-main.f49f251

package/src/extensions/image.ts

@@ -0,0 +1,244 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { syntaxTree } from '@codemirror/language';
+import { type EditorState, type Extension, StateField, type Range, StateEffect } from '@codemirror/state';
+import { Decoration, EditorView, WidgetType, ViewPlugin, type ViewUpdate } from '@codemirror/view';
+import type { Blockstore } from 'interface-blockstore';
+import type { PrivateDirectory, PrivateForest } from 'wnfs';
+
+import { log } from '@dxos/log';
+import { type Space } from '@dxos/react-client/echo';
+
+import { store } from '../common';
+import { loadWnfs } from '../load';
+
+export type ImageOptions = {
+  blockstore: Blockstore;
+  space: Space;
+};
+
+export const image = (options: ImageOptions): Extension[] => {
+  return [stateField(options), viewPlugin(options)];
+};
+
+// GLOBAL STATE
+
+/** Indexed by space id */
+const loadedWnfsInstances: Record<string, { directory: PrivateDirectory; forest: PrivateForest }> = {};
+
+// EFFECT + EXTENSIONS
+
+const stateEffect = StateEffect.define<{
+  decorations: Range<Decoration>[];
+  from: number;
+  to: number;
+}>({});
+
+const stateField = (options: ImageOptions) =>
+  StateField.define({
+    create: () => {
+      return Decoration.none;
+    },
+    update: (value, tr) => {
+      for (const effect of tr.effects) {
+        if (effect.is(stateEffect)) {
+          return value.map(tr.changes).update({
+            filterFrom: effect.value.from,
+            filterTo: effect.value.to,
+            filter: () => false,
+            add: effect.value.decorations,
+          });
+        }
+      }
+
+      return value;
+    },
+    provide: (f) => {
+      return EditorView.decorations.from(f);
+    },
+  });
+
+const viewPlugin = (options: ImageOptions) =>
+  ViewPlugin.define((view: EditorView) => {
+    // Initial decoration set on document load
+    buildDecorations({
+      from: 0,
+      to: view.state.doc.length,
+      state: view.state,
+      options,
+    })
+      .then((decorations) => {
+        view.dispatch({
+          effects: stateEffect.of({
+            decorations,
+            from: 0,
+            to: view.state.doc.length,
+          }),
+        });
+      })
+      .catch((err) => {
+        throw new Error(err);
+      });
+
+    const update = (update: ViewUpdate) => {
+      if (!update.docChanged) {
+        return;
+      }
+
+      const { from, to } = changedRange(update);
+      buildDecorations({
+        from,
+        to,
+        state: view.state,
+        options,
+      })
+        .then((decorations) => {
+          view.dispatch({
+            effects: stateEffect.of({
+              decorations,
+              from,
+              to,
+            }),
+          });
+        })
+        .catch((err) => {
+          log.catch(err);
+        });
+    };
+
+    return { update };
+  });
+
+// 🛠️
+
+const changedRange = (update: ViewUpdate) => {
+  // Find range of changes and cursor changes.
+  const cursor = update.state.selection.main.head;
+  const oldCursor = update.changes.mapPos(update.startState.selection.main.head);
+
+  let from = Math.min(cursor, oldCursor);
+  let to = Math.max(cursor, oldCursor);
+
+  update.changes.iterChangedRanges((fromA, toA, fromB, toB) => {
+    from = Math.min(from, fromB);
+    to = Math.max(to, toB);
+  });
+
+  // Expand to cover lines.
+  from = update.state.doc.lineAt(from).from;
+  to = update.state.doc.lineAt(to).to;
+
+  // Fin
+  return { from, to };
+};
+
+const buildDecorations = async ({
+  from,
+  to,
+  state,
+  options,
+}: {
+  from: number;
+  to: number;
+  state: EditorState;
+  options: ImageOptions;
+}) => {
+  const cursor = state.selection.main.head;
+  let nodes: { from: number; hide: boolean; to: number; url: string }[] = [];
+
+  syntaxTree(state).iterate({
+    enter: (node) => {
+      if (node.name === 'Image') {
+        const urlNode = node.node.getChild('URL');
+        if (urlNode) {
+          const hide = state.readOnly || cursor < node.from || cursor > node.to;
+          const url = state.sliceDoc(urlNode.from, urlNode.to);
+
+          if (url.startsWith('wnfs://')) {
+            nodes.push({
+              from: node.from,
+              to: node.to,
+              hide,
+              url,
+            });
+          }
+        }
+      }
+    },
+    from,
+    to,
+  });
+
+  // Nodes must be sorted by `from`
+  nodes = nodes.sort((a, b) => {
+    return a.from - b.from;
+  });
+
+  const decorations = await nodes.reduce(
+    async (acc, node) => {
+      const array = await acc;
+      const path = node.url
+        .replace(/^wnfs:\/\//, '')
+        .split('/')
+        .map((p) => decodeURIComponent(p));
+
+      // Cannot load images from other spaces
+      const spaceIdFromUrl = path[1];
+      if (spaceIdFromUrl !== options.space.properties.id) {
+        return array;
+      }
+
+      const cacheKey = options.space.properties.wnfs_private_forest_cid;
+
+      const { directory, forest } = loadedWnfsInstances[cacheKey]
+        ? loadedWnfsInstances[cacheKey]
+        : await loadWnfs(options.space, options.blockstore);
+
+      loadedWnfsInstances[cacheKey] = {
+        directory,
+        forest,
+      };
+
+      const wnfsStore = store(options.blockstore);
+
+      // Load image contents into memory blob
+      const { result } = await directory.read(path, true, forest, wnfsStore);
+      const blob = new Blob([result]);
+      const blobUrl = URL.createObjectURL(blob);
+
+      // Create decoration
+      return [
+        ...array,
+        Decoration.replace({
+          block: true, // Prevent cursor from entering.
+          widget: new WnfsImageWidget(blobUrl),
+        }).range(node.hide ? node.from : node.to, node.to),
+      ];
+    },
+    Promise.resolve([] as Range<Decoration>[]),
+  );
+
+  return decorations;
+};
+
+class WnfsImageWidget extends WidgetType {
+  constructor(readonly _url: string) {
+    super();
+  }
+
+  override eq(other: this) {
+    return this._url === (other as any as WnfsImageWidget)._url;
+  }
+
+  override toDOM(view: EditorView) {
+    const img = document.createElement('img');
+    img.setAttribute('loading', 'lazy');
+    img.setAttribute('src', this._url);
+    img.setAttribute('class', 'cm-image');
+    // Images are hidden until successfully loaded to avoid flickering effects.
+    img.onload = () => img.classList.add('cm-loaded-image');
+    return img;
+  }
+}

package/src/extensions/index.ts

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

package/src/index.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { WnfsPlugin } from './WnfsPlugin';
+
+export default WnfsPlugin;
+
+export * from './WnfsPlugin';

package/src/load.ts

@@ -0,0 +1,63 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import type { Blockstore } from 'interface-blockstore';
+import { CID } from 'multiformats';
+import * as Uint8Arrays from 'uint8arrays';
+import { AccessKey, PrivateForest, PrivateDirectory, PrivateNode } from 'wnfs';
+
+import { type Space } from '@dxos/react-client/echo';
+
+import { Rng, store } from './common';
+
+//
+// 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);
+};
+
+//
+// PRIVATE
+//
+
+const createWnfsDir = async (blockstore: Blockstore, space: Space) => {
+  const wnfsStore = store(blockstore);
+  const rng = new Rng();
+  const forest = new PrivateForest(rng);
+
+  const dirResult = await PrivateDirectory.newAndStore(forest.emptyName(), new Date(), forest, wnfsStore, rng);
+  const dir = dirResult.rootDir as PrivateDirectory;
+
+  const [accessKeyRaw, newForest]: [AccessKey, PrivateForest] = await dir
+    .asNode()
+    .store(dirResult.forest as PrivateForest, wnfsStore, rng);
+
+  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();
+
+  return {
+    directory: dir,
+    forest: newForest,
+  };
+};
+
+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 node: PrivateNode = await PrivateNode.load(accessKey, forest, wnfsStore);
+
+  return {
+    directory: node.asDir(),
+    forest,
+  };
+};

package/src/meta.tsx

@@ -0,0 +1,15 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type PluginMeta } from '@dxos/app-framework';
+
+export const WNFS_PLUGIN = 'dxos.org/plugin/WNFS';
+
+export default {
+  id: WNFS_PLUGIN,
+  name: 'WNFS',
+  description: 'Upload & view files with WNFS.',
+  tags: ['experimental'],
+  icon: 'ph--file-cloud--regular',
+} satisfies PluginMeta;

package/src/translations.ts

@@ -0,0 +1,17 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { WNFS_PLUGIN } from './meta';
+
+export default [
+  {
+    'en-US': {
+      [WNFS_PLUGIN]: {
+        'plugin name': 'Files',
+        'file title placeholder': 'New file',
+        'delete object label': 'Delete',
+      },
+    },
+  },
+];

package/src/types/file.ts

@@ -0,0 +1,13 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { S, TypedObject } from '@dxos/echo-schema';
+
+export class FileType extends TypedObject({ typename: 'dxos.org/type/File', version: '0.1.0' })({
+  filename: S.String,
+  type: S.String,
+  timestamp: S.optional(S.String),
+  name: S.optional(S.String),
+  cid: S.optional(S.String),
+}) {}

package/src/types/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './file';
+export * from './types';

package/src/types/types.ts

@@ -0,0 +1,27 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import {
+  type FileManagerProvides,
+  type MetadataRecordsProvides,
+  type SurfaceProvides,
+  type TranslationsProvides,
+} from '@dxos/app-framework';
+import { type SchemaProvides } from '@dxos/plugin-client';
+import { type MarkdownExtensionProvides } from '@dxos/plugin-markdown/types';
+
+import { WNFS_PLUGIN } from '../meta';
+
+const WNFS_ACTION = `${WNFS_PLUGIN}/action`;
+
+export enum WnfsAction {
+  CREATE = `${WNFS_ACTION}/create`,
+}
+
+export type WnfsPluginProvides = FileManagerProvides &
+  SurfaceProvides &
+  MetadataRecordsProvides &
+  TranslationsProvides &
+  SchemaProvides &
+  MarkdownExtensionProvides;

package/src/upload.ts

@@ -0,0 +1,46 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import type { Blockstore } from 'interface-blockstore';
+import { CID } from 'multiformats';
+import * as Raw from 'multiformats/codecs/raw';
+import { sha256 } from 'multiformats/hashes/sha2';
+
+import type { Space } from '@dxos/client/echo';
+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);
+  const wnfsStore = store(blockstore);
+
+  const bytes = new Uint8Array(await file.arrayBuffer());
+  const hash = await sha256.digest(bytes);
+  const cid = CID.create(1, Raw.code, hash);
+
+  const path = filePath(cid.toString(), space);
+
+  // Given the root directory of the private file system,
+  // write the file contents to `path` in said directory.
+  const result = await directory.write(path, true, bytes, new Date(), forest, wnfsStore, new Rng());
+
+  // Given the new immutable instance of the root directory after writing to it,
+  // **store** the changes in the "dark forest" and the associated (block) store.
+  const [_, updatedForest] = await result.rootDir.store(result.forest, wnfsStore, new Rng());
+  const cidBytes = await updatedForest.store(wnfsStore);
+
+  // Update the forest pointer on the associated space.
+  space.properties.wnfs_private_forest_cid = CID.decode(cidBytes).toString();
+
+  // Generate `wnfs://` URL & return the info.
+  const info = {
+    url: wnfsUrl(path),
+  };
+
+  log('upload', { file, info });
+  return info;
+};

package/src/wnfs-url.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export const wnfsUrl = (filePath: string[]) => {
+  return 'wnfs://' + filePath.map((f) => encodeURIComponent(f)).join('/');
+};