yjs / yjs-demos Goto Github PK
View Code? Open in Web Editor NEWA collection of demos for Yjs
Home Page: https://demos.yjs.dev
License: The Unlicense
A collection of demos for Yjs
Home Page: https://demos.yjs.dev
License: The Unlicense
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
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>
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.
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
If possible, try to show how to store the document in a MySQL database
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.)
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.
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
cd monanco
package.json
-> ~13.3.0Expected behavior
It should work similar to yjs version 13.0.0 🤔
Environment Information
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 :)
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
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.
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?
Describe the bug
https://demos.yjs.dev/monaco/monaco.html page doesn't work
To Reproduce
Steps to reproduce the behavior:
Expected behavior
A clear and concise description of what you expected to happen.
Environment Information
npm ls yjs
to find out the exact version you are using.Additional context
Add any other context about the problem here.
Checklist
Describe the bug
I couldn't run the monaco demo because of a webpack error.
To Reproduce
Steps to reproduce the behavior:
yjs-demos/monaco
npm i
npm start
and then press yes when prompting to install webpack.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.
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
wss server
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.
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
Can you give me a link? I would greatly appreciate it.
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!
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:
Do you think it worthwhile adding this demo to this repo? I would happy to do some cleanup and provide it if so.
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:
npm i
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 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.
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.
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
cd yjs-demos && npm i
monaco
subdirectory and install deps: cd monaco && npm i
npm run start
and then go to browser.I tried two different environments with the same error:
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
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
I am suppose to see a working example of monaco editor.
The CodeMirror Example tries to connect to localhost which repeatedly fails.
This issue was caused by 054422e and I believe it was an accident.
yjs-demos/codemirror.next/codemirror.next.js
Lines 29 to 32 in f5530ef
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.