Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/w99910/editorjs-caret-selection
Track Caret, Selection, and easily simulate it for real-time collaboration feature
https://github.com/w99910/editorjs-caret-selection
Last synced: 2 months ago
JSON representation
Track Caret, Selection, and easily simulate it for real-time collaboration feature
- Host: GitHub
- URL: https://github.com/w99910/editorjs-caret-selection
- Owner: w99910
- License: mit
- Created: 2024-10-15T09:02:14.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2024-10-25T07:41:26.000Z (3 months ago)
- Last Synced: 2024-11-25T06:25:15.017Z (2 months ago)
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/editorjs-caret-selection
- Size: 6.2 MB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# EditorJs Caret Selection
> TIP: In order to show approximate 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
```bash
npm i editorjs-caret-selection
```
```js
import CaretSelection from 'editorjs-caret-selection'
```
- ### Github ESM module
```js
import CaretSelection from 'https://github.com/w99910/editorjs-caret-selection/blob/master/dist/editorjs-caret-selection.js'
```
- ### Github CJS
```js
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.
```js
let editor = new EditorJS({
...
});
let caretSelection = new CaretSelection(editor, 'my-unique-id', 'Thomas');
```
You can pass HTMLElement to display parameter.
```js
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.
```js
caretSelection.onChange(function(caret){
console.log(caret);
})
```
`caret` object contains the following attributes.
```js
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.
```js
caretSelection.showSelection(caret);
```
You can customize caret style and selection box style by modifying `caret` object.
```js
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`.
```js
caretSelection.hideSelection('my-unique-id');
```
- ### Get Current Caret and Selection
```js
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
Please refer to the article - [Build Your Own Collaborative Realtime Notion](https://medium.com/@thomasbrillion/build-your-own-collaborative-realtime-notion-11c361fb2cbe) for a more detailed explanation of the approach.
## Bugs and Features
Please kindly submit your issue or request your feature [here](https://github.com/w99910/editorjs-caret-selection/issues).
## License
MIT
## Support
I am in need of financial assistance, and I would deeply appreciate [any support you can offer](https://github.com/sponsors/w99910), even the smallest amount. 🙏🙏