Comments (18)
Until we find a fix for the bug, I found a solution that I think prevents Monaco from writing '\r':
const editor = monaco.editor.create(document.getElementById("editor"), {
value:"",
language: "typescript",
});
// Note: there may be a way to update the existing model instead of swap it with a new one.
const newModel = monaco.editor.createModel("", "typescript");
newModel.setEOL(0); // Sets EOL to \n
editor.setModel(newModel); // Swap models
from y-monaco.
This problem seems to be related to line endings. I debugged this further with a Windows Host machine and a Ubuntu Hyper-V VM:
I inserted the following Key Sequence:
1
2
3
ENTER
ENTER
BACKSPACE
The deltas produced and sent over the wire from windows are the following:
[{"insert":"1"}]
[{"retain":1},{"insert":"2"}]
[{"retain":2},{"insert":"3"}]
[{"retain":3},{"insert":"\r\n"}]
[{"retain":5},{"insert":"\r\n"}]
[{"retain":5},{"delete":2}]
The model text content on a windows patch receiver are the following:
["1"]
["1", "2"]
["1", "2", "3"]
["1", "2", "3", "\r", "\n"]
["1", "2", "3", "\r", "\n", "\r", "\n"]
["1", "2", "3", "\r", "\n"]
However, on the Ubuntu machine the patch receiver model text content is the following:
["1"]
["1", "2"]
["1", "2", "3"]
["1", "2", "3", "\n"]
["1", "2", "3", "\n", "\n"]
["1", "2", "3", "\n", "\n"]
It seems like there is now way to tell monaco to always use \n
on all platforms. Thus, I guess we need some translation middleware, that transforms both IModelContentChangedEvent
and the YText
events.
from y-monaco.
Use editor.getModel().setEOL(0);
from y-monaco.
Hi @chenyjade The problem is probably related to y-webrtc. There are know sync-issues between different browsers & platforms. yjs/y-webrtc#19
Another problem is that y-webrtc seems to drop some messages if they are deemed too large (or for some other unknown reasons that I haven't figured out yet). There is help (yjs/y-webrtc#20), but I need time to investigate this problem.
You are welcome to research the problem yourself. I currently don't have enough free time to work on it myself.
from y-monaco.
I can't say whether the fix works. It seems to work for @n1ru4l.
I'm not sure whether I want to get this merged in. I hope there is a better solution than this. What is the collaborative VSCode editor doing, for example?
Changing line endings to a specific format might lead to problems. E.g. we probably don't want to change line endings for Windows users that work on native files. I'm just a bit hesitant to merge this..
from y-monaco.
For reference, I inlined and adjusted the code over here: https://github.com/the-guild-org/schemehub/blob/567e24600de7786a0652130cb5aa8d417fa7c89d/lib/yMonaco.tsx and it seems like the issues are no longer present.
from y-monaco.
Thanks for these hints! @n1ru4l & @chenyjade
@n1ru4l What exactly does your fix do? I don't find documentation on the setEOL
method. Wouldn't it be better to enforce that everyone is using the same EOL format? It is surprising to me that Monaco is automatically changing the events.
from y-monaco.
@dmonad It is impossible to set the EOL that should be used. You can only call setEOL
directly for replacing all current line endings in the model. As soon as you hit enter it will use the platform line-specific endings at... So the best way is to call setEOL
before applying patches and before producing patches. I did not notice any performance issues.
Another possible solution would be to try translating line endings from each platform, which I tried but failed miserably. setEOL
seems to work perfectly.
reference links:
microsoft/monaco-editor#1886
microsoft/monaco-editor#2019
FirebaseExtended/firepad#315
from y-monaco.
How did you fix the problem @n1ru4l? The file that includes your fix is too big for me to review entirely. Do you call setEOL
every time Yjs applies a change? Wouldn't that change the length of the document?
from y-monaco.
https://github.com/the-guild-org/schemehub/blob/567e24600de7786a0652130cb5aa8d417fa7c89d/lib/yMonaco.tsx#L299-L303
https://github.com/the-guild-org/schemehub/blob/567e24600de7786a0652130cb5aa8d417fa7c89d/lib/yMonaco.tsx#L371-L373
I added those two lines for fixing the behavior. Not sure about other implications but seems to work fine in an environment with 4 concurrent cross-platform users.
from y-monaco.
@dmonad @n1ru4l is this fix working? I have the same issue!
from y-monaco.
@dmonad, I have tried the fix and it definitely works, though this would require you to pass the monaco instance to the binding. https://github.com/yaralahruthik/y-monaco. Yet I have decided to move away from monaco editor to code mirror. As I feel code mirror is more robust solution for my needs.
from y-monaco.
When testing the demo (https://demos.yjs.dev/monaco/monaco.html) with a colleague, where he's on Windows+Firefox and I am on Mac+Arc(Chromium) we have a consistent offset between his and my browser window. Our edits show up in the wrong place with mine shifted multiple characters left and his multiple to the right.
Based on the above ticket, should I just consider Yjs + Monaco as not working for cross-browser/platform collaboration?
from y-monaco.
Attempting to set the EOL prior to creating the binding can cause the EOL to get reset due to y-monaco invoking setValue
(see microsoft/monaco-editor#1886). Setting it after can cause synchronization issues since the event handlers to propagate changes will have been registered by then.
from y-monaco.
Related Issues (9)
- Add cursor classname for the user HOT 2
- Global CSS cannot be imported from within node_modules HOT 1
- Allow providing monaco as a parameter to MonacoBinding, remove it as a dependency HOT 2
- Awareness only includes first selection when there are multiple selections HOT 1
- Incorrect selection after undo
- Text/Cursor desynchronized when typing at the same time. HOT 8
- Monaco ITextModel Out of Sync HOT 1
- Use Yjs UndoManager HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from y-monaco.