From 0f308035299775a05f629b38a1adf62f41190f09 Mon Sep 17 00:00:00 2001
From: Erik Michelson <github@erik.michelson.eu>
Date: Tue, 1 Sep 2020 22:28:37 +0200
Subject: [PATCH] Replace editor toolbar dividers with css pseudo-selector
 (#527)

* Remove useless divider-spans from toolbar and change css-selector

The use of extra divider elements is not needed as we can set the css-after pseudo-class to the button groups with the same styling.
This way we can reduce the amount of elements in the DOM by a hand full.

* Use scss syntax and include one rule into another more common one
---
 .../editor/editor-pane/tool-bar/tool-bar.scss        | 12 +++++++-----
 .../editor/editor-pane/tool-bar/tool-bar.tsx         |  4 ----
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/editor/editor-pane/tool-bar/tool-bar.scss b/src/components/editor/editor-pane/tool-bar/tool-bar.scss
index 6cd7dfaf2..f9914ebcf 100644
--- a/src/components/editor/editor-pane/tool-bar/tool-bar.scss
+++ b/src/components/editor/editor-pane/tool-bar/tool-bar.scss
@@ -1,9 +1,11 @@
 .btn-toolbar {
   border: 1px solid #ededed;
-}
 
-.divider {
-  background-color: #e2e6ea;
-  width: 2px;
-  padding: 0.25rem 0;
+  .btn-group:not(:last-of-type)::after {
+    background-color: #e2e6ea;
+    width: 2px;
+    padding: 0.25rem 0;
+    content: ' ';
+    margin-left: 0.5rem;
+  }
 }
diff --git a/src/components/editor/editor-pane/tool-bar/tool-bar.tsx b/src/components/editor/editor-pane/tool-bar/tool-bar.tsx
index c3b3309ad..a0c062573 100644
--- a/src/components/editor/editor-pane/tool-bar/tool-bar.tsx
+++ b/src/components/editor/editor-pane/tool-bar/tool-bar.tsx
@@ -65,7 +65,6 @@ export const ToolBar: React.FC<ToolBarProps> = ({ editor, onPreferencesChange, e
           <ForkAwesomeIcon icon="superscript"/>
         </Button>
       </ButtonGroup>
-      <span className={'divider'}>&nbsp;</span>
       <ButtonGroup className={'mx-1 flex-wrap'}>
         <Button variant='light' onClick={() => addHeaderLevel(editor)} title={t('editor.editorToolbar.header')}>
           <ForkAwesomeIcon icon="header"/>
@@ -86,7 +85,6 @@ export const ToolBar: React.FC<ToolBarProps> = ({ editor, onPreferencesChange, e
           <ForkAwesomeIcon icon="check-square"/>
         </Button>
       </ButtonGroup>
-      <span className={'divider'}>&nbsp;</span>
       <ButtonGroup className={'mx-1 flex-wrap'}>
         <Button variant='light' onClick={() => addLink(editor)} title={t('editor.editorToolbar.link')}>
           <ForkAwesomeIcon icon="link"/>
@@ -98,7 +96,6 @@ export const ToolBar: React.FC<ToolBarProps> = ({ editor, onPreferencesChange, e
           <ForkAwesomeIcon icon="upload"/>
         </Button>
       </ButtonGroup>
-      <span className={'divider'}>&nbsp;</span>
       <ButtonGroup className={'mx-1 flex-wrap'}>
         <Button variant='light' onClick={() => addTable(editor)} title={t('editor.editorToolbar.table')}>
           <ForkAwesomeIcon icon="table"/>
@@ -111,7 +108,6 @@ export const ToolBar: React.FC<ToolBarProps> = ({ editor, onPreferencesChange, e
         </Button>
         <EmojiPickerButton editor={editor}/>
       </ButtonGroup>
-      <span className={'divider'}>&nbsp;</span>
       <ButtonGroup className={'mx-1 flex-wrap'}>
         <EditorPreferences onPreferencesChange={onPreferencesChange} preferences={editorPreferences}/>
       </ButtonGroup>