add:inline-toolbar-alignment-option

Author: MizarNevelli

docs/usage.md

@@ -71,6 +71,24 @@ var editor = new EditorJS({
 
 ```
 
+## Align InlineToolbar
+
+If you want to align the inline toolbar, you can set the option `alignInlineToolbar` to `'left'`, `'center'`, or `'right'`.  
+The default behavior is `'left'`.
+
+**Possible values:**
+- `'left'`: aligns the toolbar to the left edge of the selection (default)
+- `'center'`: centers the toolbar 
+- `'right'`: aligns the toolbar to the right edge of the selection
+
+```js
+var editor = new EditorJS({
+  //...
+  alignInlineToolbar: 'right',
+  //...
+});
+```
+
 ## Holder
 The `holder` property supports an id or a reference to dom element.
 

index.html

@@ -206,6 +206,11 @@
       placeholder: 'Write something or press / to select a tool',
       autofocus: true,
 
+      /**
+       * Inline toolbar alignment
+      */
+      alignInlineToolbar:"right",
+
       /**
        * Initial Editor data
        */

src/components/modules/toolbar/inline.ts

@@ -57,6 +57,11 @@ export default class InlineToolbar extends Module<InlineToolbarNodes> {
    */
   private tools: Map<InlineToolAdapter, IInlineTool> = new Map();
 
+  /**
+   * Inline toolbar alignment
+   */
+  private align: 'left' | 'center' | 'right' = 'left';
+
   /**
    * @param moduleConfiguration - Module Configuration
    * @param moduleConfiguration.config - Editor's config
@@ -68,6 +73,9 @@ export default class InlineToolbar extends Module<InlineToolbarNodes> {
       eventsDispatcher,
     });
 
+    // Get the value from the config
+    this.align = config.alignInlineToolbar ?? 'left';
+
     window.requestIdleCallback(() => {
       this.make();
     }, { timeout: 2000 });
@@ -218,11 +226,27 @@ export default class InlineToolbar extends Module<InlineToolbarNodes> {
   private move(popoverWidth: number): void {
     const selectionRect = SelectionUtils.rect as DOMRect;
     const wrapperOffset = this.Editor.UI.nodes.wrapper.getBoundingClientRect();
+
+
+    let newX: number;
+
+    switch (this.align) {
+      default:
+      case 'left':
+        newX = selectionRect.x - wrapperOffset.x;
+        break;
+      case 'right':
+        newX = selectionRect.x + selectionRect.width - popoverWidth - wrapperOffset.x;
+        break;
+      case 'center':
+        newX = selectionRect.x + selectionRect.width / 2 - popoverWidth / 2 - wrapperOffset.x;
+        break;
+    }
+
     const newCoords = {
-      x: selectionRect.x - wrapperOffset.x,
+      x: newX,
       y: selectionRect.y +
         selectionRect.height -
-        // + window.scrollY
         wrapperOffset.top +
         this.toolbarVerticalMargin,
     };
@@ -233,7 +257,14 @@ export default class InlineToolbar extends Module<InlineToolbarNodes> {
      * Prevent InlineToolbar from overflowing the content zone on the right side
      */
     if (realRightCoord > this.Editor.UI.contentRect.right) {
-      newCoords.x = this.Editor.UI.contentRect.right -popoverWidth - wrapperOffset.x;
+      newCoords.x = this.Editor.UI.contentRect.right - popoverWidth - wrapperOffset.x;
+    }
+
+    /**
+     * Prevent InlineToolbar from overflowing the content zone on the left side
+     */
+    if (newCoords.x < 0) {
+      newCoords.x = 0;
     }
 
     this.nodes.wrapper!.style.left = Math.floor(newCoords.x) + 'px';

types/configs/editor-config.d.ts

@@ -100,6 +100,12 @@ export interface EditorConfig {
    */
   inlineToolbar?: string[]|boolean;
 
+  /**
+   * Inline Toolbar alignment config
+   */
+  alignInlineToolbar?:  'left' | 'center' | 'right';
+  
+
   /**
    * Common Block Tunes list. Will be added to all the blocks which do not specify their own 'tunes' set
    */