Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to run y-websocket lib with y-quill demo locally #80

Closed
Shankar-khati opened this issue Sep 26, 2021 · 2 comments
Closed

Unable to run y-websocket lib with y-quill demo locally #80

Shankar-khati opened this issue Sep 26, 2021 · 2 comments
Assignees
Labels
bug Something isn't working

Comments

@Shankar-khati
Copy link

Shankar-khati commented Sep 26, 2021

I'm able to build and run the y-websocket library locally.

  • Downloaded the y-websocket library.
  • npm ci
  • npm run dist

on demo folder

  • npm i /path/to/local/folder/y-websocket
  • npm run start

After running the demo i don;t see any sync and updates are getting applied. But I can see the awareness updates are getting applied properly

Expected behavior

  • After building dist locally and installing locally it should work file
  • Awareness updates are getting applied properly

**note: if I'm installing y-websocket@1.3.16 through npm it works fine...

Environment Information

  • node version 12
  • Yjs version 13.5.12
  • y-quill 0.1.3
  • quill 1.3.7

Additional context
Code:
Quill.js

/* eslint-env browser */

import * as Y from 'yjs'
import { WebsocketProvider } from 'y-websocket'
import { QuillBinding } from 'y-quill'
import Quill from 'quill'
import QuillCursors from 'quill-cursors'

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

window.addEventListener('load', () => {
  const ydoc = new Y.Doc()
  const provider = new WebsocketProvider('ws://localhost:8080/doc/edit', 'quill-demo2', ydoc)
  const ytext = ydoc.getText('quill')
  const editorContainer = document.createElement('div')
  editorContainer.setAttribute('id', 'editor')
  document.body.insertBefore(editorContainer, null)

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

  const binding = new QuillBinding(ytext, 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'
  })
  */

  const connectBtn = document.getElementById('y-connect-btn')
  connectBtn.addEventListener('click', () => {
    if (provider.shouldConnect) {
      provider.disconnect()
      connectBtn.textContent = 'Connect'
    } else {
      provider.connect()
      connectBtn.textContent = 'Disconnect'
    }
  })

  // @ts-ignore
  window.example = { provider, ydoc, ytext, binding, Y }
})

Packge.json

{
  "name": "yjs-quill-demo",
  "version": "1.0.0",
  "description": "Yjs ❤ Quill",
  "author": "Kevin Jahns <kevin.jahns@pm.me>",
  "license": "UNLICENSE",
  "scripts": {
    "dist": "webpack --mode=production",
    "start": "webpack-dev-server --open-page quill.html"
  },
  "dependencies": {
    "quill": "^1.3.7",
    "quill-cursors": "^2.2.1",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2",
    "y-quill": "0.1.3",
    "y-websocket": "file:../y-websocket",
    "yjs": "^13.4.14"
  }
}
@Shankar-khati Shankar-khati added the bug Something isn't working label Sep 26, 2021
@Shankar-khati
Copy link
Author

@dmonad if you have any isights please do let me know
thanks,
Shankar

@Shankar-khati
Copy link
Author

The issue seems to be environment specific, I pushed the tag and tried to run same code with npm published version it's working fine.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants