https://github.com/johannes-editor/johannes

JavaScript Notion-inspired text editor.
https://github.com/johannes-editor/johannes

content-editable gutenberg gutenberg-blocks javascript nodejs notion post-editing text-editor typescript webpack wysiwyg

Last synced: 28 days ago
JSON representation

JavaScript Notion-inspired text editor.

• Host: GitHub
• URL: https://github.com/johannes-editor/johannes
• Owner: johannes-editor
• License: mit
• Created: 2024-06-14T18:16:23.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-12-15T13:35:07.000Z (about 1 month ago)
• Last Synced: 2024-12-18T07:56:08.938Z (about 1 month ago)
• Topics: content-editable, gutenberg, gutenberg-blocks, javascript, nodejs, notion, post-editing, text-editor, typescript, webpack, wysiwyg
• Language: TypeScript
• Homepage: https://demo.johannes.app
• Size: 7.43 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Johannes Editor

## CSS Classes

* `.focusable` - Indicates whether an element can be focused.

* `.focus` - Used to highlight the primary focusable element when multiple focusable elements are present.

* `.deletable` - Indicates that pressing the delete or backspace key on an empty element allows for its deletion. Pressing backspace focuses on the previous focusable element, and pressing delete focuses on the next focusable element.

* `.swittable` - Indicates that an element can change its type.

* `.draggable`  - Denotes that an element is draggable.

* `.drag-handler` - Used in conjunction with the draggable="true" attribute to facilitate drag-and-drop functionality, typically applied to a button within a block.

* `.block` - General class for block elements.

* `.editable` - Used to focus the cursor when navigating the document with directional keys.

* `.key-trigger` - Specifies elements that trigger actions on key presses.

* `.johannes-editor` - Designates the main container of the Johannes Editor.

* `.johannes-content-element` - Specifies content elements within the Johannes Editor.

publish