Draft: CodeMirror over Yjs prototype

[theova]

This is a prototype of how to use Yjs in CryptPad to achieve local-first editing for the code application.
This PR is to document and discuss the prototype, it is not meant to be merged.

Setup

To try out this prototype, you currently need to run two components:
the modified CryptPad instance and the Yjs backend that serves the websocket requests.

1. Local CryptPad instance
   1.1. Clone and checkout this fork (yjs)
   1.2. npm i
   1.3. npm run dev
2. Yjs websocket backend
   2.1. Clone https://github.com/theova/y-websocket and checkout the branch crypto
   2.2. npm i
   2.3. npm start

In a later step, the Yjs backend should be integrated into the CryptPad server, so that only one component has to be started.

Bundle Yjs

Yjs cannot be installed straightforward via bundle and does not provide minified versions.
We therefore bundle Yjs and the required components (including y-websocket and y-codemirror 5).

The "factory" is in scripts/yjs/yjs_bundle.js.

To bundle this to a minified version (www/lib/yjs_bundle.js) run npm run bundle-yjs.

Problems/Simplifications

This prototype is heavily simplifed, due to the complexity of the codebase, but not due to natural limitations.
The simplifications include:

• This prototype is limited to the code application (e.g., cryptpad.fr/code/)
• This prototype requires to start a second websocket backend independent of CryptPad
  • The CSP policy is disabled to allow connecting to this websocket backend
• The inner frame has access to the keys
• When opening localhost:3000/code, the resulting editKeyStr is not the same as the one coming from the generated URL hash. After a reload, this is fixed.
• Not all features of CryptPad (e.g., cursors with names) are integrated yet.

[acao]

awesome! i see y-codemirror has a y-codemirror-next for cm6 support. Have you considered trying that out? cm6 introduces a lot of accessibility improvements, and i know they've improved realtime editing capabilities as well