Lexical API: Added public event to access editor API

Updated documentation to match.
Ran manual testing of examples.

dev/docs/javascript-code.md

@@ -161,3 +161,7 @@ window.$components.firstOnElement(element, name);
 There are a range of available events that are emitted as part of a public & supported API for accessing or extending JavaScript libraries & components used in the system.
 
 Details on these events can be found in the [JavaScript Public Events file](javascript-public-events.md).
+
+## WYSIWYG Editor API
+
+Details on the API for our custom-built WYSIWYG editor can be found in the [WYSIWYG JavaScript API file](./wysiwyg-js-api.md).

dev/docs/javascript-public-events.md

@@ -60,7 +60,7 @@ This event is called when the markdown editor loads, post configuration but befo
 
 #### Event Data
 
-- `markdownIt` - A references to the [MarkdownIt](https://markdown-it.github.io/markdown-it/#MarkdownIt) instance used to render markdown to HTML (Just for the preview).
+- `markdownIt` - A reference to the [MarkdownIt](https://markdown-it.github.io/markdown-it/#MarkdownIt) instance used to render markdown to HTML (Just for the preview).
 - `displayEl` - The IFrame Element that wraps the HTML preview display.
 - `cmEditorView` - The CodeMirror [EditorView](https://codemirror.net/docs/ref/#view.EditorView) instance used for the markdown input editor.
 
@@ -301,7 +301,7 @@ This event is called just after any CodeMirror instances are initialised so that
 
 ##### Example
 
-The below shows how you'd prepend some default text to all content (page) code blocks.
+The below example shows how you'd prepend some default text to all content (page) code blocks.
 
 <details>
 <summary>Show Example</summary>
@@ -319,3 +319,41 @@ 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>

dev/docs/wysiwyg-js-api.md

@@ -1,6 +1,5 @@
 # WYSIWYG JavaScript API
 
-TODO - Link to this from JS code doc.
 TODO - Create JS events and add to the js public events doc.
 
 **Warning: This API is currently in development and may change without notice.**

resources/js/wysiwyg/index.ts

@@ -95,11 +95,10 @@ export function createPageEditorInstance(container: HTMLElement, htmlContent: st
 
     registerCommonNodeMutationListeners(context);
 
-    // TODO - Emit this as a public event instead
+    window.$events.emitPublic(container, 'editor-wysiwyg::post-init', {
-    // TODO - Add support to basic editor below
+        usage: 'page-editor',
-    const api = new EditorApi(context);
+        api: new EditorApi(context),
-    // @ts-ignore
+    });
-    window.editorApi = api;
 
     return new SimpleWysiwygEditorInterface(context);
 }
@@ -129,6 +128,11 @@ export function createBasicEditorInstance(container: HTMLElement, htmlContent: s
 
     setEditorContentFromHtml(editor, htmlContent);
 
+    window.$events.emitPublic(container, 'editor-wysiwyg::post-init', {
+        usage: 'description-editor',
+        api: new EditorApi(context),
+    });
+
     return new SimpleWysiwygEditorInterface(context);
 }
 

resources/js/wysiwyg/ui/defaults/toolbars.ts

@@ -223,11 +223,13 @@ export function getMainEditorFullToolbar(context: EditorUiContext): EditorContai
 
 export function getBasicEditorToolbar(context: EditorUiContext): EditorContainerUiElement {
     return new EditorSimpleClassContainer('editor-toolbar-main', [
+        new EditorOverflowContainer('formats', 7, [
             new EditorButton(bold),
             new EditorButton(italic),
             new EditorButton(link),
             new EditorButton(bulletList),
             new EditorButton(numberList),
+        ])
     ]);
 }