Git Product home page Git Product logo

yjs-demos's Introduction

Yjs Demos Gitpod ready-to-code

A starting point for your own ideas - PRs welcome

We have a more complete Getting Started Guide in our official documentation website.

Getting Started

If you are new to Yjs and you just want to play around clone this repository and use one of the demo directories that interests you the most.

git clone https://github.com/yjs/yjs-demos.git
npm install
cd yjs-demos/${demo-directory}
npm install
npm start

The demos use a public y-websocket instance for communication. Try using one of the other connection providers or setting up your own endpoint.

(Un)License

The demos are released to the public domain - Unlicense.

yjs-demos's People

Contributors

atomicparade avatar braebo avatar dependabot[bot] avatar dmonad avatar getflourish avatar mansehej avatar mgielda avatar nikgraf avatar svenefftinge avatar therockstorm avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

yjs-demos's Issues

quill demo

y-websocket.js:167 Uncaught TypeError: Class constructor Observable cannot be invoked without 'new'
    at new WebsocketProvider (y-websocket.js:167)
    at index.js:11

Images not rendering when trying to render snapshot

I'm trying to explore snapshot history.. I uploaded an image and applied snapshot and then next I uploaded another image and then saved snapshot...

when I try to render the image snapshot it displays nothing.... it only displays text

Screen recording below

Screen.Recording.2023-11-01.at.2.19.49.AM.mov

Online Live Demo for Monaco Failed.

Describe the bug
https://demos.yjs.dev/monaco/monaco.html page doesn't work

To Reproduce
Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Open console
  4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
image

Environment Information

  • Browser / Node.js [e.g. Chrome, Firefox, Node.js]
  • Yjs version and the versions of the y-* modules you are using [e.g. yjs v13.0.1, y-webrtc v1.2.1]. Use npm ls yjs to find out the exact version you are using.

Additional context
Add any other context about the problem here.

Quill live demo is not working

Quill live demo is not working, showing "Application error": https://demos.yjs.dev/quill/quill.html

As well as demo is not working locally.

Steps to reproduce:

  1. Clone yjs-demos repository.
  2. Navigate to yjs-demos/quill
  3. install dependencies npm i
  4. Run with npm start

Expected result: Some demo in a browser

Actual result:

yarn run v1.22.19
warning package.json: License should be a valid SPDX license expression
$ webpack-dev-server --open-page quill.html
ℹ 「wds」: Project is running at http://localhost:8081/
ℹ 「wds」: webpack output is served from /dist/
ℹ 「wds」: Content not from webpack is served from /Users/seleckis/Sites/yjs-demos/quill
node:internal/crypto/hash:71
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (/Users/seleckis/Sites/yjs-demos/quill/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/Users/seleckis/Sites/yjs-demos/quill/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/Users/seleckis/Sites/yjs-demos/quill/node_modules/webpack/lib/NormalModule.js:471:10)
    at /Users/seleckis/Sites/yjs-demos/quill/node_modules/webpack/lib/NormalModule.js:503:5
    at /Users/seleckis/Sites/yjs-demos/quill/node_modules/webpack/lib/NormalModule.js:358:12
    at /Users/seleckis/Sites/yjs-demos/quill/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/Users/seleckis/Sites/yjs-demos/quill/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at Array.<anonymous> (/Users/seleckis/Sites/yjs-demos/quill/node_modules/loader-runner/lib/LoaderRunner.js:205:4) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.12.1
error Command failed with exit code 1.

The CodeMirror6 example is not working

The CodeMirror Example tries to connect to localhost which repeatedly fails.

Screenshot 2024-06-25 at 20 49 03

This issue was caused by 054422e and I believe it was an accident.

const provider = new WebsocketProvider(
// 'wss://demos.yjs.dev/ws', // use the public ws server
// `ws${location.protocol.slice(4)}//${location.host}/ws`, // alternatively: use the local ws server (run `npm start` in root directory)
'ws://localhost:3334',

Tip Tap with initial content duplicated

Hi!

I’ve been trying to integrate the TipTap-Yjs example into a Vue project. I set the initial content of the editor using the content prop (i.e.: new Editor({ extensions: […], content: 'some html' })), and everything works smoothly. However, as soon as a second client connects to the YDoc via WebRTC, the content duplicates, and i get some html some html as the content of the editor on both clients.

I figure this must be a common mistake, but I couldn’t find anything about duplicated content on any Issue Boards.

Any help is much appreciated and thank you so much for your work!

ace-editor demo in the works?

The new yjs.dev demo is fantastic! Huge improvement over the y-js.org site I saw last year.

Any chance an ace-editor demo is in the near future pipeline? Saw it mentioned in your FOSDEM talk and hoped to find it here. Really interested in testing differences between syncing with websocket vs webRTC and the potential of offering both depending on usecase.

Provide README files with explanations and PoD for examples

Would be great if you could provide additional info overall for the demos but also separate README for each demo as otherwise, it is hard to explore them.

This is especially the case with similar demos like https://github.com/yjs/yjs-demos/blob/master/prosemirror and https://github.com/yjs/yjs-demos/tree/master/prosemirror-dat where you can understand the PoD only through package.json and even there the description property is the same (#45), so need to go to dependencies.

Surely, after some time spending "there" we can contribute PRs with it :)

Example showing how to bind Yjs to existing editor

Currently the getting started docs of Yjs mainly focus on installing and reusing existing Yjs bindings. If one wants to adapt Yjs to an existing in-house editor, I think an example for such "binding developer" can be useful, since for now I believe we mainly take real world projects (like slate-yjs) as reference, and it can be a litter complex for beginners.

Recently I supported multi-user collaboration in our graphics design editor on gaoding.com with Yjs, which works great. This work is started by testing with a new canvas-based toy editor that supports moving, grouping and ungrouping operations, then did I apply its approach to our existing editor (not open source). This toy editor only has about 1000 lines of code, which shows the basic ideas of:

  • Syncing editor model (plain JavaScript objects) states to Yjs model.
  • Syncing Yjs delta patch to editor model.
  • Handling tree operations (building and flattering nested group).
  • Handling multi-user history states with UndoManager.
  • Syncing selection highlights with awareness API.

Do you think it worthwhile adding this demo to this repo? I would happy to do some cleanup and provide it if so.

prosemirror-dat demo broken?

The prosemirror-dat demo does not work for me - during npm install I get:

[419] ./prosemirror.js + 62 modules 919 KiB {0} [built]
      | ./prosemirror.js 2.04 KiB [built]
      | ./schema.js 5.74 KiB [built]
      |     + 61 hidden modules
    + 409 hidden modules

ERROR in ./node_modules/y-prosemirror/src/plugins/cursor-plugin.js
Module not found: Error: Can't resolve 'y-protocols/awareness.js' in '/home/mgielda/antmicro/github.com/mgielda/yjs-demos/prosemirror-dat/node_modules/y-prosemirror/src/plugins'
 @ ./node_modules/y-prosemirror/src/plugins/cursor-plugin.js 5:0-52
 @ ./node_modules/y-prosemirror/src/y-prosemirror.js
 @ ./prosemirror.js
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] dist: `webpack --mode=production`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the [email protected] dist script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/mgielda/.npm/_logs/2020-05-02T22_29_37_555Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] postinstall: `npm run dist`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/mgielda/.npm/_logs/2020-05-02T22_29_37_644Z-debug.log

Also, looking at package.json I see that the HTML filename is wrong, i.e. it says prosemirror.html but the file in the example is prosemirror-dat.html. I assume the example is not being tested / is obsolete?

Issue related to rendering snapshot version changes from database

I am reaching out regarding an implementation challenge I am facing while integrating ProseMirror version history using the Yjs-demo code available here (https://github.com/yjs/yjs-demos/tree/main/prosemirror-versions).

To provide some context, I am storing base64-encoded snapshots on the server. When attempting to retrieve and decode these snapshots upon a page refresh, I encounter an issue – the ProseMirror editor does not render the expected diff changes. Strangely, I can observe the snapshot version changes successfully when staying on the page without a refresh.

I am seeking your expertise to identify and address what might be going wrong in this scenario. Specifically, I have ensured the proper initialization of both the Y.Doc and ProseMirror editor to match the state of the snapshot. Additionally, the initial state of the ProseMirror editor is set correctly.

If you could spare a moment to review the provided information and offer insights into potential solutions or debugging approaches, it would be greatly appreciated.

@dmonad Appreciate your help

Implentation Code:

const versions = ydoc.getArray('versions')

 const addSnapshotToDatbase = doc => {
    const snapshot = Y.snapshot(doc)
    const encodedSnapshot = Y.encodeSnapshot(snapshot)
    // encode the snapshot and store in db
    const binaryString = String.fromCharCode(...encodedSnapshot);
    const base64Encoded = btoa(binaryString);

    // code to send the base64Encoded string to database  and store on server
}

const getSnapshotsFromDatabase = () => {
    const versionBlobFromDatabase = "SGVsbG8sIFdvcmxkIQ==";
    // decode encoded string
    const decodedString = atob(versionBlobFromDatabase);
    const decodedArray = new Uint8Array(decodedString.length);
    for (let i = 0; i < decodedString.length; i++) {
        decodedArray[i] = decodedString.charCodeAt(i);
    }
    
    renderVersion(editorview, decodedArray, null)
}

const renderVersion = (editorview, snapshotversion, prevSnapshot) => {
    editorview.dispatch(
        editorview.state.tr.setMeta(
            ySyncPluginKey,
            { 
                snapshot: Y.decodeSnapshot(snapshotversion),
                prevSnapshot: prevSnapshot == null ? Y.emptySnapshot : Y.decodeSnapshot(prevSnapshot)
            }
        )
    )
  }

<button onclick="addSnapshotToDatbase(ydoc)">Capture Snapshot</button>

<button onclick="addSnapshotToDatbase(ydoc)">View Snapshot Diff</button>

monaco: dist/monaco.bundle.js not found

I couldn't setup the monaco demo due to 404 not found error of dist/monaco.bundle.js.

The editor area is not editable and I got the error in the console.

Screenshot:

image

Terminal log

npm start

> [email protected] start
> webpack serve --open monaco.html

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8081/
<i> [webpack-dev-server] On Your Network (IPv4): http://10.1.93.204:8081/
<i> [webpack-dev-server] Content not from webpack is served from '/webdata/yjs-demos/monaco' directory
<i> [webpack-dev-middleware] wait until bundle finished: /monaco.html
assets by chunk 611 KiB (id hint: vendors)
  asset vendors-node_modules_monaco-editor_esm_vs_language_json_jsonMode_js.bundle.js 84.5 KiB [emitted] (id hint: vendors) 1 related asset
  asset vendors-node_modules_monaco-editor_esm_vs_language_html_htmlMode_js.bundle.js 70.9 KiB [emitted] (id hint: vendors) 1 related asset
  asset vendors-node_modules_monaco-editor_esm_vs_language_css_cssMode_js.bundle.js 69.7 KiB [emitted] (id hint: vendors) 1 related asset
  asset vendors-node_modules_monaco-editor_esm_vs_language_typescript_tsMode_js.bundle.js 43.8 KiB [emitted] (id hint: vendors) 1 related asset
  asset vendors-node_modules_monaco-editor_esm_vs_basic-languages_solidity_solidity_js.bundle.js 26.2 KiB [emitted] (id hint: vendors) 1 related asset
  asset vendors-node_modules_monaco-editor_esm_vs_basic-languages_freemarker2_freemarker2_js.bundle.js 25.9 KiB [emitted] (id hint: vendors) 1 related asset
  asset vendors-node_modules_monaco-editor_esm_vs_basic-languages_powerquery_powerquery_js.bundle.js 22.4 KiB [emitted] (id hint: vendors) 1 related asset
  asset vendors-node_modules_monaco-editor_esm_vs_basic-languages_abap_abap_js.bundle.js 21.6 KiB [emitted] (id hint: vendors) 1 related asset
  asset vendors-node_modules_monaco-editor_esm_vs_basic-languages_pgsql_pgsql_js.bundle.js 18.7 KiB [emitted] (id hint: vendors) 1 related asset
  asset vendors-node_modules_monaco-editor_esm_vs_basic-languages_redshift_redshift_js.bundle.js 16.9 KiB [emitted] (id hint: vendors) 1 related asset
  asset vendors-node_modules_monaco-editor_esm_vs_basic-languages_mysql_mysql_js.bundle.js 16.7 KiB [emitted] (id hint: vendors) 1 related asset
  asset vendors-node_modules_monaco-editor_esm_vs_basic-languages_sql_sql_js.bundle.js 15.5 KiB [emitted] (id hint: vendors) 1 related asset
  + 14 assets
+ 65 assets
runtime modules 29.7 KiB 16 modules
modules by path ./node_modules/monaco-editor/esm/vs/ 9.08 MiB (javascript) 71.9 KiB (asset) 1040 modules
modules by path ./node_modules/lib0/*.js 110 KiB 33 modules
modules by path ../node_modules/ 172 KiB 26 modules
modules by path ./node_modules/style-loader/dist/runtime/*.js 5.84 KiB 6 modules
modules by path ./node_modules/y-protocols/*.js 14.8 KiB
  ./node_modules/y-protocols/sync.js 4.54 KiB [built] [code generated]
  + 2 modules
modules by path ./node_modules/css-loader/dist/runtime/*.js 3.33 KiB
  ./node_modules/css-loader/dist/runtime/sourceMaps.js 505 bytes [built] [code generated]
  + 2 modules
modules by mime type image/svg+xml 3.17 KiB
  data:image/svg+xml;base64,PHN2ZyB3aWR0aD0i.. 1.59 KiB [built] [code generated]
  data:image/svg+xml;base64,PHN2ZyB3aWR0aD0i.. 1.59 KiB [built] [code generated]
+ 5 modules
webpack 5.91.0 compiled successfully in 11946 ms

Steps to reproduce:

  1. fresh clone of this repo,
  2. go to the root directory and install deps: cd yjs-demos && npm i
  3. go to the monaco subdirectory and install deps: cd monaco && npm i
  4. start the server via npm run start and then go to browser.

Environment to reproduce

I tried two different environments with the same error:

  1. Ubuntu 20
uname -a
Linux Dell-Precision-5820-Tower 6.5.0-35-generic #35~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Tue May  7 09:00:52 UTC 2 x86_64 x86_64 x86_64 GNU/Linux

node --version
v20.5.1
  1. OSX
uname -a
Darwin macstudio 23.1.0 Darwin Kernel Version 23.1.0: Mon Oct  9 21:28:45 PDT 2023; root:xnu-10002.41.9~6/RELEASE_ARM64_T6020 arm64

node --version
v21.7.3

Expected behaviour:

I am suppose to see a working example of monaco editor.

Anyone working on CKEditor 5?

I'm wondering if anyone has worked on a yjs solution for collaborative editing in CKEditor 5. It's supported by paid services but is extremely expensive.

Enable offline-first workflow in demos (for Tiptap)

This is an issue to track this feature. I'd like to see how N clients can work offline, make different changes, and then come online and have all changes be synced. (I'm using tiptap)

Specifically offline-first browser applications are closed/opened - which means my local changes have to survive a tab refresh. (Currently changes don't survive a tab refresh when offline.)

Solution

  1. Have tiptap sync changes sycned/persisted (y-indexeddb) - always on.
  2. Have tiptap sync changes synced to the demos y-websocket server (wss://demos.yjs.dev) - when available

With this N clients should be totally fine offline, and have their changes synced when online. I'm working with @Mansehej to build a PR for this.

Screenshot from 2020-06-27 12-05-15

Yjs demo server (both http and wss) seem to be down.

Checklist

Describe the bug
The server at https://demos.yjs.dev/ throws a Heroku application error.
The server at wss://demos.yjs.dev/ fails with a response code of 503.

To Reproduce
Steps to reproduce the behavior:

http server

  1. Go to the Yjs demos homepage.
  2. You will get an Application error from Heroku.

wss server

  1. Create a demo application and have a yDoc.
  2. Connect the yDoc to the yjs demos websocket server.
  3. Try to connect to the websocket.

Expected behavior
The yjs demo website should work as expected and show different demos.
The yjs demos websocket server should connect and synchronize changes between clients.

Screenshots
Screenshot from 2020-07-02 22-38-29

Monaco demo: Error: Unknown option '--open-page'

Checklist

  • [x ] Are you reporting a bug? Use github issues for bug reports and feature requests. For general questions, please use https://discuss.yjs.dev/
  • [ x] Try to report your issue in the correct repository. Yjs consists of many modules. When in doubt, report it to https://github.com/yjs/yjs/issues/

Describe the bug
I couldn't run the monaco demo because of a webpack error.

To Reproduce
Steps to reproduce the behavior:

  1. Go to yjs-demos/monaco
  2. Install deps via: npm i
  3. Run the demo npm start and then press yes when prompting to install webpack.
  4. See error

Screenshots
image

Environment Information

Output of npx webpack version:

System:
    OS: macOS 14.1.1
    CPU: (24) arm64 Apple M2 Ultra
    Memory: 797.36 MB / 64.00 GB
  Binaries:
    Node: 21.7.3 - /opt/homebrew/bin/node
    npm: 10.5.0 - /opt/homebrew/bin/npm
  Browsers:
    Safari: 17.1
  Packages:
    css-loader: ^6.8.1 => 6.8.1 
    monaco-editor-webpack-plugin: ^7.1.0 => 7.1.0 
    style-loader: ^3.3.3 => 3.3.3

Additional context
I guess it was caused by an incompatible webpack because there is no webpack version specification in package.json and the latest version was instelled.

monaco-editor collaboration seems to be broken with y-js 13.3.0 (latest), works fine with 13.0

Describe the bug:
When using monaco-demo with latest y-js version, user's cursors are incorrectly updated.
monaco-bug
Things get really off with both typing at the same time.

To Reproduce

  1. clone the repo. cd monanco
  2. bump yjs to latest in package.json -> ~13.3.0
  3. npm install
  4. npm start
  5. run yjs demo

Expected behavior
It should work similar to yjs version 13.0.0 🤔

Environment Information

  • Browser - Firefox 79.0 | Chrome 84.0 | Node.js v12.17.0
  • Yjs version 13.3.0

PS: The library looks really neat!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.