webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-12-14 19:42:14 +03:00
Code Activity

Lexical API: Reviewed docs, Made toolbar its own UI class

Browse Source
This commit is contained in:
Dan Brown
2025-12-05 14:37:46 +00:00
parent 8890746278
commit ab4b1c8efa
4 changed files with 102 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
dev/docs/javascript-public-events.md
View File

@@ -134,6 +134,47 @@ window.addEventListener('editor-tinymce::setup', event => {
});
```
### `editor-wysiwyg::post-init`
This is called after the (new custom-built Lexical-based) WYSIWYG editor has been initialised.
#### Event Data
- `usage` - A string label to identify the usage type of the WYSIWYG editor in BookStack.
- `api` - An instance to the WYSIWYG editor API, as documented in the [WYSIWYG JavaScript API file](./wysiwyg-js-api.md).
##### Example
The below example shows how you'd use this API to create a button, with that button added to the main toolbar of the page editor, which inserts bold "Hello!" text on press:
<details>
<summary>Show Example</summary>
```javascript
window.addEventListener('editor-wysiwyg::post-init', event => {
const {usage, api} = event.detail;
// Check that it's the page editor which is being loaded
if (usage !== 'page-editor') {
return;
}
// Create a custom button which inserts bold hello text on press
const button = api.ui.createButton({
label: 'Greet',
action: () => {
api.content.insertHtml(`<strong>Hello!</strong>`);
}
});
// Add the button to the start of the first section within the main toolbar
const toolbar = api.ui.getMainToolbar();
if (toolbar) {
toolbar.getSections()[0]?.addButton(button, 0);
}
});
```
</details>
### `library-cm6::configure-theme`
This event is called whenever a CodeMirror instance is loaded, as a method to configure the theme used by CodeMirror. This applies to all CodeMirror instances including in-page code blocks, editors using in BookStack settings, and the Page markdown editor.
@@ -319,41 +360,3 @@ window.addEventListener('library-cm6::post-init', event => {
});
```
</details>
### `editor-wysiwyg::post-init`
This is called after the (new custom-built Lexical-based) WYSIWYG editor has been initialised.
#### Event Data
- `usage` - A string label to identify the usage type of the WYSIWYG editor in BookStack.
- `api` - An instance to the WYSIWYG editor API, as documented in the [WYSIWYG JavaScript API file](./wysiwyg-js-api.md).
##### Example
The below shows how you'd use this API to create a button, with that button added to the toolbar of the page editor, which inserts bold hello text on press:
<details>
<summary>Show Example</summary>
```javascript
window.addEventListener('editor-wysiwyg::post-init', event => {
const {usage, api} = event.detail;
// Check that it's the page editor being loaded.
if (usage !== 'page-editor') {
return;
}
// Create a custom button which inserts bold hello text on press.
const button = api.ui.createButton({
label: 'Greet',
action: () => {
api.content.insertHtml(`<strong>Hello!</strong>`);
}
});
// Add the button to the start of the first section within the main toolbar.
api.ui.getMainToolbarSections()[0]?.addButton(button, 0);
});
```
</details>