https://github.com/codebydusk/digipad

A WYSIWYG Rich Text Editor without execCommand() Method; that too as a web component!
https://github.com/codebydusk/digipad

Last synced: about 1 month ago
JSON representation

A WYSIWYG Rich Text Editor without execCommand() Method; that too as a web component!

• Host: GitHub
• URL: https://github.com/codebydusk/digipad
• Owner: codebydusk
• License: gpl-3.0
• Created: 2023-12-17T19:55:00.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-04-27T19:42:42.000Z (about 2 years ago)
• Last Synced: 2026-05-24T10:32:19.366Z (about 1 month ago)
• Language: TypeScript
• Size: 399 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# DigiPad

An accessible WYSIWYG Rich Text Editor without `execCommand()` Method; that too as a web component with multi-instance support!

**Note:** ...doesn't work with Shadow Dom! (Why? See F.A.Qs)

## So how to use this DigiPad?

Using this editor is pretty simple!

```html

```

| Attribute | Example | Description | Default value |

|-|-|-|-|

| id (string) | `` | Unique ID that will be used to identify the editor instance. | Randomly generated UUIDs if not provided or provided values are not unique in case of multiple instances. |

| readonly (boolean) | `` | Row 2, Col 3 | false |

| disabled (boolean) | `` | Row 3, Col 3 | false |

## F.A.Qs

### Why DigiPad doesn't work with Shadow Dom?

The `Window.getSelection()` method retrieves the selection object representing the text currently selected; which is necessary for any text editor. However, when it comes to Shadow DOM, there are some limitations due to the encapsulation provided by the Shadow DOM itself.

In Shadow DOM, the content inside the shadow DOM is encapsulated, meaning that the internal structure and elements are not directly accessible or manipulable from the outside document. This encapsulation is intentional to prevent styles and scripts from unintentionally affecting the internals of the shadow DOM.

When you try to use `Window.getSelection()` to get the selection within a shadow DOM, it might not work as expected because the shadow DOM boundaries limit the access to the internals of the shadow DOM. Hence, DigiPad doesn't work with Shadow Dom... Yet! 😜