Je souhaite essayer d'implémenter un formulaire qui se synchronise en temps réel

[stephane-klein]

Je souhaite essayer d'implémenter un formulaire qui se synchronise en temps réel. Ce formulaire doit contenir un champ titre, un champ select et un champ text multiline.

Implémentation basée sur :

• SvelteKit
• https://yjs.dev/
  • https://github.com/relm-us/svelt-yjs
  • https://github.com/yjs/y-webrtc ou https://github.com/yjs/y-websocket

[stephane-klein]

Nom du repository : poc-svelte-yjs-form

[stephane-klein]

• [x] Lecture de https://github.com/yjs/yjs/blob/master/README.md#getting-started

[stephane-klein]

• [x] Lecture de https://syncedstore.org/docs/svelte

[stephane-klein]

Après lecture de ce commentaire Question about “binding” simple html input to Y.Text shared text type j'ai l'impression qu'il n'est pas possible d'activer une édition à plusieurs sur un simple champ <input..>.

[stephane-klein]

Le repos en work in progress: https://github.com/stephane-klein/poc-svelte-yjs-form

[stephane-klein]

Je suis tombé sur le même problème que lui WebSocket is not defined : node_modules/lib0/websocket.js:25:23.

Il faut que je désactive le SSR dans ici https://github.com/stephane-klein/poc-svelte-yjs-form/blob/9e7bd35806244e244269bf8985766cc26880fe60/src/routes/form2/store.js

[stephane-klein]

Je suis tombé sur le même problème que lui WebSocket is not defined : node_modules/lib0/websocket.js:25:23.

Il faut que je désactive le SSR dans ici https://github.com/stephane-klein/poc-svelte-yjs-form/blob/9e7bd35806244e244269bf8985766cc26880fe60/src/routes/form2/store.js

Fixé par https://github.com/stephane-klein/poc-svelte-yjs-form/commit/ac53e4b17c19bd922a43999892598c0c1332dfca

[stephane-klein]

Je n'arrive pas à comprendre comment remplacer ici un [] par un {} :thinking:.

[stephane-klein]

• [x] Lecture de https://docs.yjs.dev/getting-started/working-with-shared-types

[stephane-klein]

• [x] Lecture de https://discuss.yjs.dev/t/svelte-and-yjs/231

[stephane-klein]

• [ ] Lecture de Announce: Svelt-yjs

[stephane-klein]

Je rencontre la même erreur que celle décrite dans https://github.com/relm-us/svelt-yjs/issues/4.

Suite à la lecture de https://github.com/relm-us/svelt-yjs/issues/4#issuecomment-1113205899, je vais tester https://github.com/rodcisal/sveltekit-svelt-yjs-example

[stephane-klein]

J'ai réussi à faire fonctionner https://github.com/rodcisal/sveltekit-svelt-yjs-example

et j'ai vu que l'exemple met en œuvre un objet de type map : https://github.com/rodcisal/sveltekit-svelt-yjs-example/blob/5914962b484a9cb108ecc5832cd05e790a7bc6d1/src/App.svelte#L30

[stephane-klein]

J'ai une première version qui fonctionne.

Je ne sais pas si le code que j'ai produit est élégant ou non :thinking:.

[stephane-klein]

• [x] Étudier https://github.com/yjs/y-webrtc vs https://github.com/yjs/y-websocket

[stephane-klein]

Pour le moment je vais continue à utiliser webrtc, à moins que je développe une app qui est utilisé par beaucoup de clients qui éditent le même document.

[stephane-klein]

Prochaine étape :

• [ ] Sélectionner un éditeur texte riche (si possible qui supporte le markdown) que je brancherai sur le champ description

[stephane-klein]

Sélection d'éditeurs pour champ <textarea> :

• https://github.com/yjs/y-codemirror.next
• https://github.com/yjs/y-monaco
• https://github.com/yjs/y-codemirror
• https://github.com/yjs/y-quill
• https://github.com/yjs/y-prosemirror

[stephane-klein]

Je pense que https://codemirror.net/ ne m'intéresse pas ici, parce que comme son nom l'indique,

[stephane-klein]

Prosemirror me semble très bien, surtout l'exemple avec le support Markdown https://prosemirror.net/examples/markdown/

[stephane-klein]

• [ ] Étudier https://quilljs.com/ vs Prosemirror

[stephane-klein]

• [ ] Lire https://quilljs.com/guides/comparison-with-other-rich-text-editors/

[stephane-klein]

• [ ] Étudier https://tiptap.dev/

[stephane-klein]

Je vais me diriger vers prosemirror.

[stephane-klein]

J'ai lu https://github.com/yjs/y-prosemirror. Je cherche comment instancier prosemirror avec Svelte.

[stephane-klein]

• [ ] Lire https://github.com/christianheine/prosemirror-svelte

[stephane-klein]

J'ai vu aussi https://github.com/TeemuKoivisto/svelte-prosemirror

[stephane-klein]

Dans un premier temps, je vais essayer d'instancier prosemirror en mode "vanilla".

[stephane-klein]

• [ ] Tester https://github.com/TeemuKoivisto/svelte-prosemirror

[stephane-klein]

J'ai étudié https://tiptap.dev/ et https://github.com/ueberdosis/hocuspocus

L'équipe derrière ces projets me semble faire du très bon travail, de plus, comme je l'ai pu constater, ils semblent publier l'intégralité de leur travail sous licences MIT 🙂

[stephane-klein]

https://element-tiptap.vercel.app/

[stephane-klein]

Prochaine étape :

• [ ] Convertir le résultat du champ description en Markdown

[stephane-klein]

Prochaine étape :

* [ ]  Convertir le résultat du champ _description_ en Markdown

Ressource : https://prosemirror.net/examples/markdown/

[stephane-klein]

J'ai créé #283

[stephane-klein]

Maintenant que j'ai réussi à implémenter https://github.com/stephane-klein/poc-svelte-prosemirror-markdown je vais essayer d'implémenter la même chose avec le support yjs.

[stephane-klein]

Pour le moment, j'ai travaillé 10h sur cette issue.

[stephane-klein]

Maintenant que j'ai réussi à implémenter https://github.com/stephane-klein/poc-svelte-prosemirror-markdown je vais essayer d'implémenter la même chose avec le support yjs.

Je dois continuer cette partie.

Précision, je souhaite implémenter une version basée sur "prosemirror vanilla", c'est à dire, ne pas utiliser https://tiptap.dev/.