Merge ab5cd6b7fc into 530ec56bb8

index.html

@@ -53,6 +53,18 @@
             thin mode
           </div>
         </div>
+        <div class="ce-example__statusbar-item">
+          <div class="ce-example__statusbar-button" id="enableHorizontalModeButton">
+            <span data-toggled-text="Disable">Enable</span>
+            horizontal mode
+          </div>
+        </div>
+        <div class="ce-example__statusbar-item">
+          <div class="ce-example__statusbar-button" id="enableRightSideToolbarButton">
+            <span data-toggled-text="Disable">Enable</span>
+            right side toolbar
+          </div>
+        </div>
         <div class="ce-example__statusbar-item ce-example__statusbar-item--right">
           <div class="ce-example__statusbar-toggler" id="darkThemeToggler">
           </div>
@@ -399,6 +411,31 @@
       editor = new EditorJS(editorConfig);
     })
 
+    /**
+     * Button for enabling the 'Horizontal' mode
+     */
+    const enableHorizontalModeButton = document.getElementById("enableHorizontalModeButton");
+
+    enableHorizontalModeButton.addEventListener('click', () => {
+      document.body.classList.toggle("horizontal-mode")
+
+      editor.destroy();
+
+      editor = new EditorJS({ ...editorConfig, horizontalMode: true });
+    })
+
+    /**
+     * Button for enabling the 'Right Side Toolbar' mode
+     */
+    const enableRightSideToolbarButton = document.getElementById("enableRightSideToolbarButton");
+    enableRightSideToolbarButton.addEventListener('click', () => {
+      document.body.classList.toggle("right-side-toolbar");
+
+      editor.destroy();
+
+      editor = new EditorJS({ ...editorConfig, rightSideToolbar: true });
+    })
+
     /**
     * Toggler for toggling the dark mode
     */

public/assets/demo.css

@@ -85,6 +85,10 @@ body {
   padding: 0 15px;
 }
 
+.horizontal-mode .ce-example__content {
+  max-width: unset !important;
+}
+
 .ce-example__output {
   background: #1B202B;
   overflow-x: auto;
@@ -334,7 +338,9 @@ body {
 }
 
 .show-block-boundaries #showBlocksBoundariesButton span::before,
-.thin-mode #enableThinModeButton span::before {
+.thin-mode #enableThinModeButton span::before,
+.horizontal-mode #enableHorizontalModeButton span::before,
+.right-side-toolbar #enableRightSideToolbarButton span::before {
   content: attr(data-toggled-text);
   display: inline;
   font-size: 13px;

src/components/modules/toolbar/index.ts

@@ -125,7 +125,9 @@ export default class Toolbar extends Module<ToolbarNodes> {
   public get CSS(): { [name: string]: string } {
     return {
       toolbar: 'ce-toolbar',
+      toolbarHorizontal: 'ce-toolbar--horizontal',
       content: 'ce-toolbar__content',
+      contentHorizontal: 'ce-toolbar__content--horizontal',
       actions: 'ce-toolbar__actions',
       actionsOpened: 'ce-toolbar__actions--opened',
 
@@ -136,6 +138,8 @@ export default class Toolbar extends Module<ToolbarNodes> {
       plusButtonShortcut: 'ce-toolbar__plus-shortcut',
       settingsToggler: 'ce-toolbar__settings-btn',
       settingsTogglerHidden: 'ce-toolbar__settings-btn--hidden',
+
+      rightSideToolbar: 'ce-toolbar--right-side',
     };
   }
 
@@ -290,7 +294,7 @@ export default class Toolbar extends Module<ToolbarNodes> {
      *      2.2 Toolbar is moved to the baseline of the first input
      *       - when the first input is close to the top of the block
      */
-    let toolbarY;
+    let toolbarY, toolbarX;
     const MAX_OFFSET = 20;
 
     /**
@@ -317,6 +321,10 @@ export default class Toolbar extends Module<ToolbarNodes> {
     if (isMobile) {
       toolbarY = targetBlockHolder.offsetTop + targetBlockHolder.offsetHeight;
 
+    } else if (this.config.horizontalMode) {
+      toolbarY = 0;
+      toolbarX = targetBlockHolder.offsetLeft + targetBlockHolder.offsetWidth;
+
     /**
      * Case 2.1
      * On Desktop — without inputs or with the first input far from the top of the block
@@ -354,6 +362,11 @@ export default class Toolbar extends Module<ToolbarNodes> {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     this.nodes.wrapper!.style.top = `${Math.floor(toolbarY)}px`;
 
+    if (toolbarX !== undefined) {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      this.nodes.wrapper!.style.left = `${Math.floor(toolbarX)}px`;
+    }
+
     /**
      * Do not show Block Tunes Toggler near single and empty block
      */
@@ -399,6 +412,10 @@ export default class Toolbar extends Module<ToolbarNodes> {
   private open(withBlockActions = true): void {
     this.nodes.wrapper.classList.add(this.CSS.toolbarOpened);
 
+    if (this.config.rightSideToolbar) {
+      this.nodes.wrapper.classList.add(this.CSS.rightSideToolbar);
+    }
+
     if (withBlockActions) {
       this.blockActions.show();
     } else {
@@ -410,7 +427,7 @@ export default class Toolbar extends Module<ToolbarNodes> {
    * Draws Toolbar elements
    */
   private async make(): Promise<void> {
-    this.nodes.wrapper = $.make('div', this.CSS.toolbar);
+    this.nodes.wrapper = $.make('div', [this.CSS.toolbar, this.config.horizontalMode ? this.CSS.toolbarHorizontal : undefined].filter(Boolean));
     /**
      * @todo detect test environment and add data-cy="toolbar" to use it in tests instead of class name
      */
@@ -418,9 +435,8 @@ export default class Toolbar extends Module<ToolbarNodes> {
     /**
      * Make Content Zone and Actions Zone
      */
-    ['content', 'actions'].forEach((el) => {
-      this.nodes[el] = $.make('div', this.CSS[el]);
-    });
+    this.nodes.content = $.make('div', [this.CSS.content, this.config.horizontalMode ? this.CSS.contentHorizontal : undefined].filter(Boolean));
+    this.nodes.actions = $.make('div', this.CSS.actions);
 
     /**
      * Actions will be included to the toolbar content so we can align in to the right of the content

src/components/modules/ui.ts

@@ -50,12 +50,13 @@ export default class UI extends Module<UINodes> {
    */
   public get CSS(): {
     editorWrapper: string; editorWrapperNarrow: string; editorZone: string; editorZoneHidden: string;
-    editorEmpty: string; editorRtlFix: string;
+    editorEmpty: string; editorRtlFix: string; editorZoneHorizontal: string;
     } {
     return {
       editorWrapper: 'codex-editor',
       editorWrapperNarrow: 'codex-editor--narrow',
       editorZone: 'codex-editor__redactor',
+      editorZoneHorizontal: 'codex-editor__redactor--horizontal',
       editorZoneHidden: 'codex-editor__redactor--hidden',
       editorEmpty: 'codex-editor--empty',
       editorRtlFix: 'codex-editor--rtl',
@@ -288,7 +289,11 @@ export default class UI extends Module<UINodes> {
       this.CSS.editorWrapper,
       ...(this.isRtl ? [ this.CSS.editorRtlFix ] : []),
     ]);
-    this.nodes.redactor = $.make('div', this.CSS.editorZone);
+
+    this.nodes.redactor = $.make('div', [
+      this.CSS.editorZone,
+      this.config.horizontalMode ? this.CSS.editorZoneHorizontal : false,
+    ].filter(Boolean));
 
     /**
      * If Editor has injected into the narrow container, enable Narrow Mode

src/styles/toolbar.css

@@ -16,6 +16,19 @@
     max-width: var(--content-width);
     margin: 0 auto;
     position: relative;
+
+    &--horizontal {
+      max-width: unset;
+    }
+  }
+ 
+  &--right-side {
+    right: 0;
+    left: unset;
+  }
+
+  &--horizontal {
+    right: unset;
   }
 
   &__plus {

src/styles/ui.css

@@ -18,6 +18,13 @@
     [contenteditable]:empty::after {
       content: "\feff ";
     }
+
+    &--horizontal {
+      display: flex;
+      flex-direction: row;
+      align-items: start;
+      justify-content: center;
+    }
   }
 
   /**

types/configs/editor-config.d.ts

@@ -115,4 +115,14 @@ export interface EditorConfig {
      */
     nonce?: string;
   }
+
+  /**
+   * If true, Editor will support horizontal mode.
+   */
+  horizontalMode?: boolean;
+
+  /**
+   * If true, Editor will show the toolbar on the right side of the editor.
+   */
+  rightSideToolbar?: boolean;
 }