implement initial working sticky rte toolbar

src/components/EntryEditor/EntryEditor.css

@@ -17,7 +17,7 @@
   overflow: auto;
   padding: 20px 20px 0;
   border-right: 1px solid var(--defaultColorLight);
-  background-color: color(#f2f5f4 lightness(90%));
+  background-color: var(--backgroundTertiaryColorDark);
 }
 
 .previewPane {

src/components/EntryEditor/EntryEditor.js

@@ -7,6 +7,7 @@ import ControlPane from '../ControlPanel/ControlPane';
 import PreviewPane from '../PreviewPane/PreviewPane';
 import Toolbar from './EntryEditorToolbar';
 import styles from './EntryEditor.css';
+import stickyStyles from '../UI/Sticky/Sticky.css';
 
 const PREVIEW_VISIBLE = 'cms.preview-visible';
 
@@ -35,6 +36,35 @@ class EntryEditor extends Component {
     localStorage.setItem(PREVIEW_VISIBLE, newPreviewVisible);
   };
 
+  setSticky = (contextTop, containerRect, sticky) => {
+    if (contextTop >= containerRect.top) {
+      if (contextTop < containerRect.bottom - 60) {
+        sticky.classList.add(stickyStyles.top);
+        sticky.classList.remove(stickyStyles.bottom);
+      } else if (contextTop >= containerRect.bottom - 60) {
+        sticky.classList.remove(stickyStyles.top);
+        sticky.classList.add(stickyStyles.bottom);
+      }
+    } else {
+      sticky.classList.remove(stickyStyles.top);
+      sticky.classList.remove(stickyStyles.bottom);
+    }
+  };
+
+  handleControlPaneRef = (ref) => {
+    const sticky = ref.querySelector('.cms__index__editorControlBar');
+    const stickyContainer = ref.querySelector('.stickyContainer');
+    stickyContainer.style.paddingTop = `${ sticky.offsetHeight }px`;
+    sticky.style.position = 'absolute';
+    sticky.style.top = `${ -sticky.offsetHeight }px`;
+    sticky.style.width = `${ stickyContainer.getBoundingClientRect().width }px`;
+
+    ref && ref.addEventListener('scroll', (e) => {
+      const contextTop = e.target.getBoundingClientRect().top;
+      this.setSticky(contextTop, stickyContainer.getBoundingClientRect(), sticky);
+    });
+  };
+
   render() {
     const {
         collection,
@@ -60,7 +90,7 @@ class EntryEditor extends Component {
     );
 
     const editor = (
-      <div className={controlClassName}>
+      <div className={controlClassName} ref={this.handleControlPaneRef}>
         { collectionPreviewEnabled ? togglePreviewButton : null }
         <ControlPane
           collection={collection}

src/components/UI/Sticky/Sticky.css

@@ -0,0 +1,10 @@
+.top {
+  position: fixed !important;
+  top: 64px !important;
+}
+
+.bottom {
+  top: auto !important;
+  bottom: 30px !important;
+}
+

src/components/Widgets/MarkdownControl.js

@@ -34,7 +34,7 @@ export default class MarkdownControl extends React.Component {
     const { mode } = this.state;
     if (mode === 'visual') {
       return (
-        <div className="cms-editor-visual">
+        <div className="cms-editor-visual stickyContainer">
           <VisualEditor
             onChange={onChange}
             onAddAsset={onAddAsset}
@@ -48,7 +48,7 @@ export default class MarkdownControl extends React.Component {
     }
 
     return (
-      <div className="cms-editor-raw">
+      <div className="cms-editor-raw stickyContainer">
         <RawEditor
           onChange={onChange}
           onAddAsset={onAddAsset}

src/components/Widgets/MarkdownControlElements/VisualEditor/index.css

@@ -2,7 +2,7 @@
 
 .editorControlBar {
   background-color: var(--controlBGColor);
-  margin-bottom: 1px;
+  border-bottom: 1px solid var(--backgroundTertiaryColorDark);
   border-radius: var(--borderRadius) var(--borderRadius) 0 0;
 }