yjs / y-quill Goto Github PK

View Code? Open in Web Editor NEW

80.0 7.0 18.0 360 KB

Quill Editor binding for Yjs

Home Page: https://demos.yjs.dev/quill/quill.html

License: MIT License

JavaScript 99.02% HTML 0.98%

y-quill's Introduction

y-quill

Quill Editor binding for Yjs - Demo

This binding maps a Y.Text to a Quill instance. It optionally supports shared cursors via the quill-cursors module.

Example

import { QuillBinding } from 'y-quill'
import Quill from 'quill'
import QuillCursors from 'quill-cursors'

..

Quill.register('modules/cursors', QuillCursors)

const type = ydoc.getText('quill')

var editor = new Quill('#editor-container', {
  modules: {
    cursors: true,
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
    ]
  },
  placeholder: 'Start collaborating...',
  theme: 'snow' // or 'bubble'
})

// Optionally specify an Awareness instance, if supported by the Provider
const binding = new QuillBinding(type, editor, provider.awareness)

/*
// Define user name and user name
// Check the quill-cursors package on how to change the way cursors are rendered
provider.awareness.setLocalStateField('user', {
  name: 'Typing Jimmy',
  color: 'blue'
})
*/

Also look here for a working example.

License

The MIT License © Kevin Jahns

y-quill's People

Contributors

Stargazers

Watchers

Forkers

russelshane iamgruuten 1306013422qqco volser yongho-virnect tjackwood-jasper anis8 lukebrody gojasper theolecoutre doodlewind youarealegend alansongzoom cmconan sys555 zhaopufeng sammynave

y-quill's Issues

new QuillBinding deletes all previous content from the quill editor

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
Hello, new QuillBinding deletes all previous content from the quill editor

To Reproduce
Steps to reproduce the behavior:

Go to https://github.com/yjs/yjs-demos download the project, go to yjs-demos-main/quill folder and install the dependencies
add for example editor.insertText(0, 'Hello', 'bold', true);
before of: const binding = new QuillBinding(ytext, editor, provider.awareness)

Expected behavior
new QuillBinding should not delete the previous content of the Quill, since a new websocket connection cannot be created after adding the content of the Quill.

Environment Information
Chrome
Node: v16.14.0
y-protocols: 1.0.5
y-quill: 0.1.4
y-websocket: 1.4.3
yjs: 13.5.35

Additional context

What I am trying to do is connect to the socket only when there is more than one user in the same editor, and thus avoid unnecessary sending to the server through websocket. When there is only one user I can put the content, but as soon as more users come in and I try to connect them with new QuillBinding all the Quill text is deleted.

Thank you very much for all the work you do :)

Edit:
Another example is using ngx-quill in Angular, putting the [(ngModel)]="data" and putting new QuillBinding(ytext, editor, provider.awareness) in the ngOnInit removes all the text.

Nonconvergence when selecting Header on demo site

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

Selecting "Heading 1" causes divergent states across peers

To Reproduce
Steps to reproduce the behavior:

Open https://demos.yjs.dev/quill/quill.html in two windows
Clear document contents
Refresh both windows
Click "Normal" and select "Heading 1" in one window
Type "heading 1" (newline) (newline) "normal"
Observe different states across windows
Refresh both windows
Observe that both documents are now in a third state, different from either state from step 6.

Expected behavior

No divergence

Screenshots

Environment Information

macOS Catalina 10.15.6
Brave Version 1.15.75 Chromium: 86.0.4240.99 (Official Build) (x86_64)

webrtc does not sync well sometimes when there are images

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
Hello, when a second user connects to the webrtc in a quill with an image inserted, quill is not updated to what is in the webrtc, it goes blank. It doesn't always do it... although in Firefox I have gotten these two error messages, in case it can help:

It only happens when the second user enters the webrtc room, if both users are already inside, it synchronizes well.
I'm in an angular environment and using ngx-quill though I don't think that has anything to do with it.

I don't know very well if it has to do with the base 64 size of the image or something like that... I have detected that when it fails and doesn't update the content it tries to make several subscriptions.

...

On the other hand, I have also seen that when you put a password on the webrtc, it sends a first empty subscription attempt and then with the correct room. I don't know if this has to be like this since I'm new to webrtc.

And finally a third thing I've seen, although I don't think it's related to quill, it seems to do a provider.disconnect(); you are not throwing the websocket (in webrtc) from unsubscribe to the server.

I'm sorry if I don't explain myself very well in English, ask me anything you need, I'll be happy to help, you do a great job.

To Reproduce
Steps to reproduce the behavior:

Create an example quill with webrtc.
Create the webrtc server, (I have used the example you have https://github.com/yjs/y-webrtc/blob/master/bin/server.js)
That a user connect to the webrtc and insert an image.
Connect with a second user.
I don't know if you'll be able to reproduce it... it seems like something very specific and I haven't really found what's going on... I only know what happens when there are images...

Expected behavior

The synchronization should be correct for the second user
Shouldn't I throw an empty subscription websocket when the webrtc has a password? (not sure about this)
disconnect() should launch an unsubscribe websocket to remove it from topics

Environment Information

Chrome 101.0.4951.64 (Build oficial) (64 bits)
Firefox 100.0 (64-bit)
Node: v16.14.0
ws: 8.6.0
y-protocols: 1.0.5
y-quill: 0.1.5
y-webrtc: 10.2.3
yjs: 13.5.36

greetings and thanks

weird collaborator's cursor behavior

https://streamable.com/hy8xf

its not sync

and the other user's cursor always on start of text

Jumping cursor

If type text at the end of the line and there is a next line, the remote cursor is jumping to the next line.

how it looks:
https://www.loom.com/share/c4a6206629dc49c6bc45bef548e2f9c3

Multi formatting bug

Describe the bug
multi selected format changed not synced

To Reproduce
Steps to reproduce the behavior:

open 2 browser(A, B) and go to 'https://demos.yjs.dev/quill/quill.html'
In A, add some text multi line like

a
b
c
d
e

In A, multi select from 2 to 4 lines and change type normal to H1
In A, multi selected lines format changed normal to H1
In B, only first line changed normal to H1, other lines were not chaged

Screenshots

Environment Information

use yjs, y-quill, y-websocket latest version

Awareness of two quill instance on the same page

Is your feature request related to a problem? Please describe.
I want to have multiple instance of quill editors on a single page. Currently, if I want to use cursors, I need to use multiple providers (one for each quill instance), because all quill instances will try to use the same field ('cursor') on the awareness state.

Describe the solution you'd like
Being able to choose another fields from awareness state instead 'cursor' would be enough. For example, if I have two instances of quill editors on my page, I could set 'cursor1' for the first instance and 'cursor2' for the second one.

Support for Quill v2

I see this project isn't maintained anymore. Are there any plans to keep it updated, or should I switch over to using y-prosemirror? Quill v2 official beta is out [email protected], but not yet supported in y-quill. I have verified the official beta release of Quill v2 here:

slab/quill#3806 (comment)

Quill v1 is using a deprecated DOMNodeInserted mutation event which will be removed from Chrome in July 2024, making Quill v1 obsolete along with y-quill. You can learn more about the issue in the link I provided. As of now, I see y-quill has no support for Quill v2 and I get these errors when building y-quill with v2:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/quill
npm ERR! quill@"^2.0.0-beta.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer quill@"^1.3.7" from [email protected]
npm ERR! node_modules/y-quill
npm ERR! y-quill@"^0.1.5" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/quill
npm ERR! peer quill@"^1.3.7" from [email protected]
npm ERR! node_modules/y-quill
npm ERR! y-quill@"^0.1.5" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! /home/ubuntu/.npm/_logs/2024-01-05T15_39_57_532Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /home/ubuntu/.npm/_logs/2024-01-05T15_39_57_532Z-debug-0.log

Add option to enable/disable normailze quill delta

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/

Is your feature request related to a problem? Please describe.

y-quill alway remove last new line

Describe the solution you'd like

add option to enable/disable normalize quill data in normQuillDelta function

running demo causes CPU/fans to go wild

Describe the bug
Running this demo (using npm run demo) - causes the fan on my laptop (2018 mbp, MacOS 10.13.6) to go wild – in activity monitor, node gets up to 250% CPU, 13 threads... I luckily don't have this problem after testing out a compiled distribution demo with just a python/LAMP webserver. I'm guessing the issue is due to either concurrently, rollup, or live-server? Great that it recompiles and refreshes, but I'm not sure it's worth it for the stress and fan noise. Is this normal behavior for a live-changes setup? How would I best reduce this and simply compile on demand, as I have no problem refreshing the browser window if that's potentially causing it. Not familiar enough with node and packing js to know where to look/disable.

Thanks for any tips to calm my fans.

To Reproduce
Steps to reproduce the behavior:

npm run demo
Wait 5 sec for fans to go into overdrive
Check Activity Monitor
See node with 150 – 250% CPU

Expected behavior
Fans to be calm, maybe whirl up for a second while recompiling?

Environment Information

Latest chrome / node v15.4.0 / npm v7.0.15
yjs v13.0.0

Additional context
PS – getting very close to building an ace-editor demo for yjs..! Will share once I solve cursors/selections syncing.

How to implement with image resize

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
In live collaboration if i resize image . The image gets duplicated with y-quill integration

To Reproduce
Steps to reproduce the behavior:

Add https://github.com/kensnyder/quill-image-resize-module or blotformatter implementation to resize image
Open the same doc in two browsers
Add an image and try to resize
Check both docs

Expected behavior
Image resize should not duplicate the image and share the size change update with other live collaboration docs

Screenshots

Environment Information

Browser : Chrome
[email protected], [email protected], [email protected]

Use `undomanager.addToScope` instead of `.scope` property

The Y.UndoManager now has a method that allows adding to scope. This is required for compatibility with the Y.MultiDocUndoManager from y-utility.

Collaborator cursors can jump to the next line while they type

Describe the bug
When watching awareness updates from another user as they type at the end of a line, you can occasionally see the cursor jump down to the next line then back up to the text being written. See this YJS discussion thread on the exact issue, including a nice reproduction video: https://discuss.yjs.dev/t/cursor-jumping-to-next-line/483

When a user types a letter into the Quill editor, it triggers two events that are sent to and handled by _quillObserver, first a 'selection-change' event with source 'silent', and second a 'text-change' event with source 'user'. _quillObserver will attempt to update the cursor awareness for both events, in that order, triggering the awareness.setLocalStateField emitting an awareness event out to other users.

From here, it's a race condition for whether the first selection-change update gets to a collaborative user and updates the awareness for the cursor on their screen BEFORE of AFTER the text-change fully propogates. If it happens before, the cursor jumps forward a single index, making it twitch to the next line in the document, then the content of the document is updated to add the new character, and the selection is fixed.

To Reproduce
Steps to reproduce the behavior:

Go to the y-quill demo in two different browsers (i.e. Chrome and Firefox).
Continuously type on one browser at the end of a line of text.
Observe the other browser's window and how the typing cursor is updated. As this is a race condition, you won't always see it, but it happens pretty often for me.

Expected behavior
The cursor that is typing stays smoothly attached to the end of the text that it is typing, without jumping forward in the document

Screenshots
See the YJS discussion thread linked in the description for a great example video

Environment Information
The environment for my Quill editor:

Chrome, using a Quill editor within a Vue application
YJS Versions:
- y-websockets: 1.4.3
- y-quill: 0.1.4
- y-protocols: 1.0.5
Other versions:
- quill: 1.3.7
- quill-cursors: 3.1.2
  Also works against the y-quill demo.

Suggested Solution
There doesn't seem to be a reason for the awareness update to fire for the'selection-change' Quill event with a 'silent' source. The awareness will only need to update correctly when the actual text change is also getting propogated over to other users, i.e. on the 'text-change' event.

Not updating the awareness when the source is 'silent' should correct the issue. PR to follow.

yjs / y-quill Goto Github PK

y-quill's Introduction

y-quill

Example

License

y-quill's People

Contributors

Stargazers

Watchers

Forkers

y-quill's Issues

Recommend Projects

Recommend Topics

Recommend Org