https://github.com/holochain-open-dev/y-holochain

Holochain provider for Yjs -- build real time p2p shared editor apps
https://github.com/holochain-open-dev/y-holochain

collaboration crdt holochain p2p peer-to-peer yjs yjs-provider

Last synced: 16 days ago
JSON representation

Holochain provider for Yjs -- build real time p2p shared editor apps

• Host: GitHub
• URL: https://github.com/holochain-open-dev/y-holochain
• Owner: holochain-open-dev
• License: apache-2.0
• Created: 2023-07-21T21:17:38.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-08-09T00:36:28.000Z (over 1 year ago)
• Last Synced: 2024-04-10T01:42:11.087Z (9 months ago)
• Topics: collaboration, crdt, holochain, p2p, peer-to-peer, yjs, yjs-provider
• Language: Rust
• Homepage:
• Size: 1.3 MB
• Stars: 11
• Watchers: 2
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# y-holochain

[Holochain](https://holochain.org/) provider for [Yjs](https://github.com/yjs/yjs). Easily build peer-to-peer real-time collaboration software using Holochain.

Yjs already offers bindings for many popular rich text editors including [Quill](https://quilljs.com/), [ProseMirror](https://prosemirror.net/) and [TipTap](https://tiptap.dev/examples/default).

## Usage

1. Setup the zomes in your DNA

    1. hc scaffold zome yjs

    1. run `cargo add -p yjs hc_zome_yjs_coordinator`

    1. run `cargo add -p yjs_integrity hc_zome_yjs_integrity`

    1. Replace the integrity zome's `lib.rs` (its path may be similar to dnas/my-dna/zomes/integrity/yjs/src/lib.rs) and replace its contents with: `extern crate hc_zome_yjs_integrity;`

    1. Replace the coordinator zome's `lib.rs` (its path may be similar to dnas/my-dna/zomes/coordinator/yjs/src/lib.rs) and replace its contents with: `extern crate hc_zome_yjs_coordinator;`

1. Setup the Yjs provider in your front-end

```js

import { HolochainProvider } from 'y-holochain'

import { onMounted, onUnmounted } from 'vue';

let provider: HolochainProvider | undefined;

async setupYjsProvider() {

  // Create a document where this Yjs data will be stored

  const record = await client.callZome({

    zome_name: 'yjs',

    fn_name: 'create_document',

    payload: {

      title: 'My Cool Document'

    }

  });

  const documentActionHash = record.signed_action.hashed.hash;

  // Setup Yjs Doc & HolochainProvider

  const ydoc = new Y.Doc();

  provider = new HolochainProvider(

    ydoc,               // Yjs Y.Doc

    client,             // Holochain client

    "demo",             // RoleName of cell with 'yjs' zome

    "yjs",              // ZomeName of 'yjs' coordinator zome

    documentActionHash  // ActionHash of the document

  );  

  // Setup Yjs Editor Bindings of your choice

  const quill = new Quill("#my-editor-container");

  new QuillBinding(ydoc.getText('quill'), editor);

}

onMounted(() => {

  setupYjsProvider();

});

// Call destroy() when provider no longer in use

onUnmounted(() => {

  if(provider) {

    provider.destroy()

  }

});

```

YJS has bindings for many popular text & rich-text editors. See https://docs.yjs.dev/ecosystem/editor-bindings for details.