Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

quill-cursors

Package Overview
Dependencies
Maintainers
1
Versions
39
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

quill-cursors

A multi cursor module for Quill.

  • 0.0.5
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
5.7K
increased by97.49%
Maintainers
1
Weekly downloads
 
Created
Source

quill-cursors

A multi cursor module for Quill text editor.

Install

Install quill-cursors module through npm:

$ npm install quill-cursors --save

Usage

To include quill-cursors in your Quill project, simply add the stylesheet and all the Javascripts to your page. The module already takes care of its registering so you just need to add 'cursors' to your module config when you instantiate your editor(s).

<head>
  ...
  <link rel="stylesheet" href="/path/to/quill-cursors.css">
  ...
</head>
<body>
  ...
  <script src="/path/to/quill.min.js"></script>
  <script src="/path/to/quill-cursors.min.js"></script>
  <script>
    var editor = new Quill('#editor-container', {
      modules: {
        'cursors': true,
      }
    });

    editor.registerTextChangeListener();
  </script>

</body>

To set a cursor call:

editor.getModule('cursors').set({
  id: '1',
  name: 'User 1',
  color: 'red',
  range: range
});

Please note, that this module only handles the cursors drawing on a Quill instance. You must produce some additional code to handle actual cursor sync in a real scenario. So, it's assumed that:

  • You should implement some sort of server-side code/API (or another suitable mechanism) to maintain cursors information synced across clients/Quill instances;
  • This module is responsible for automatically updating the cursors configured on the instance when there is a 'text-change' event - so if the client/instance contents are updated locally or through a updateContents() call, one shouldn't be needing to do anything to update/shift the displayed cursors;
  • It is expected for the clients/instances to send updated cursor/range information on selection-change events;​

For a simple local-based implementation, check the included example.

Development

Run npm run build to package a build and npm run start to build, start the example webserver and watch for changes.

TODO

A few things that can be improved:

  • Add tests
  • Improve bundling, namely on styles/add minified styles
  • Better API documentation

Keywords

FAQs

Package last updated on 26 Apr 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc