EditorJs Caret Selection

TIP: In order to show approximatly correct caret position, please specify font family.

Effortlessly track and simulate caret movements across any device. In real-time collaboration tools like Notion or Google Docs, you've likely noticed a caret indicating when another user is editing or viewing the same document.

I developed this feature because, as of this writing, the official EditorJs has not yet implemented it. Feel free to use, customize, and configure it to suit your needs. Cheers! 🥂🥂

Table Of Contents

• Installation
• Usage
• Realtime Caret Approach
• Tips
• Bugs
• License
• Support

Installation

• NPM

npm i editorjs-caret-selection

import CaretSelection from 'editorjs-caret-selection'

• Github ESM module

import CaretSelection from 'https://github.com/w99910/editorjs-caret-selection/blob/master/dist/editorjs-caret-selection.js'

• Github CJS

const CaretSelection = require('https://github.com/w99910/editorjs-caret-selection/blob/master/dist/editorjs-caret-selection.cjs')

Usage

• Initialization

First initialize the class with your editorjs object, unique id, display name.

let editor = new EditorJS({
    ...
});

let caretSelection = new CaretSelection(editor, 'my-unique-id', 'Thomas');

You can pass HTMLElement to display parameter.

let display = document.createElement('span');
display.style.background = 'red';
display.style.padding = '0px 4px';
display.style.fontSize = '10px'
display.textContent = 'Thomas';

let caretSelection = new CaretSelection(editor, 'my-unique-id', display);

• Listen Event

Once it is initialised, the selectionChange event is listened. Register your custom function when that event is triggered.

caretSelection.onChange(function(caret){
    console.log(caret);
})

caret object contains the following attributes.

type Caret = {
    id: string | number,
    display: string | HTMLElement,
    blockIndex: number,
    startOffset: number,
    endOffset: number,
    caretStyle?: object,
    selectionBoxStyle?: object,
}

• Show Caret Selection

In order to show caret, use showSelection method by passing caret object.

caretSelection.showSelection(caret);

You can customize caret style and selection box style by modifying caret object.

caret.caretStyle.background = 'red'
caret.selectionBoxStyle.background = 'red'

caretSelection.showSelection(caret);

• Hide Caret

Use hideSelection method to hide specific caret by passing caret's unique-id.

caretSelection.hideSelection('my-unique-id');

• Get Current Caret and Selection

let caret = caretSelection.getCurretSelection();

Tips

In order to calculate approximately correct caret position, please specify font family instead of letting browser determine the font family.

Realtime Caret Approach

I will write an article about this.

Bugs and Features

Please kindly submit your issue or request your feature here.

License

MIT

Support

I am in need of financial assistance, and I would deeply appreciate any support you can offer, even the smallest amount. 🙏🙏