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>

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!

Describe the bug:
When using monaco-demo with latest y-js version, user's cursors are incorrectly updated.

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!

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 :)

was trying it a few days ago, and for me line demos fail with a "heroku" application error, for example:

https://demos.yjs.dev/codemirror/codemirror.html
https://demos.yjs.dev/atlaskit/atlaskit.html
https://demos.yjs.dev/quill/quill.html

and probably all others fail as well.

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

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

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

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.

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.

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.

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.

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

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?

i've copy the code from quill demo, but it doesn't work like

https://yjs-demos.now.sh/quill

there's no connect between client?

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.

Checklist

• Are you reporting a bug? Use github issues for bug reports and feature requests. For general questions, please use https://discuss.yjs.dev/
• 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
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

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:

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

2. 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.

Heya, I found an issue where "quick insert" menu is cropped:

You could add a few lines of css to fix it:

      #editor {
        height: 100vh;
      }

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.

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

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.

If possible, try to show how to store the document in a MySQL database

Everything (meta-wise) including "description" fields in package.json is same in both https://github.com/yjs/yjs-demos/blob/master/prosemirror-dat/package.json and https://github.com/yjs/yjs-demos/blob/master/prosemirror/package.json.

In greater details as an enhancement: #44