[components] Click to scroll for block editor #76

packages/@sanity/components/src/utilities/ActivateOnFocus.js

@@ -7,34 +7,23 @@ class ActivateOnFocus extends React.Component {
   static propTypes = {
     children: PropTypes.node.isRequired,
     message: PropTypes.string,
-    isActive: PropTypes.bool,
-    enableBlur: PropTypes.bool,
-    onFocus: PropTypes.func,
-    onBlur: PropTypes.func,
+    isActive: PropTypes.bool
   }
 
   static defaultProps = {
-    enableBlur: true,
     message: 'Click to activate…',
-    isActive: false,
-    onFocus() {},
-    onBlur() {},
+    isActive: false
   }
 
   state = {
     hasFocus: false
   }
 
-  setEventHandlerElement = element => {
-    this._eventHandlerElement = element
-  }
-
   handleClick = event => {
     if (!this.state.hasFocus) {
       this.setState({
         hasFocus: true
       })
-      this.props.onFocus()
     }
   }
 
@@ -43,51 +32,26 @@ class ActivateOnFocus extends React.Component {
       this.setState({
         hasFocus: false
       })
-      this.props.onBlur()
-    }
-  }
-
-  handleFocus = event => {
-    this.setState({
-      hasFocus: true
-    })
-    this.props.onFocus()
-  }
-
-  handleBlur = event => {
-    const {enableBlur} = this.props
-    if (enableBlur) {
-      this.setState({
-        hasFocus: false
-      })
     }
-    this.props.onBlur()
   }
 
   render() {
     const {message, children, isActive} = this.props
     const {hasFocus} = this.state
 
-    if (isActive) {
-      return children
-    }
-
     return (
-      <div
-        className={hasFocus ? styles.hasFocus : styles.noFocus}
-        onFocus={this.handleFocus}
-        onBlur={this.handleBlur}
-      >
-        <div
-          className={styles.eventHandler}
-          onClick={this.handleClick}
-        >
-          <div className={styles.overlay} />
-          <div className={styles.message}>{message}</div>
-        </div>
-        <div className={styles.content}>
-          {children}
-        </div>
+      <div className={hasFocus ? styles.hasFocus : styles.noFocus}>
+        {!isActive && (
+          <div
+            className={styles.eventHandler}
+            onClick={this.handleClick}
+            ref={this.setEventHandlerElement}
+          >
+            <div className={styles.overlay} />
+            <div className={styles.message}>{message}</div>
+          </div>
+        )}
+        <div className={styles.content}>{children}</div>
       </div>
     )
   }

packages/@sanity/components/src/utilities/styles/ActivateOnFocus.css

@@ -4,7 +4,6 @@
   position: relative;
   width: 100%;
   height: 100%;
-  lost-utility: clearfix;
   box-sizing: border-box;
   outline: none !important;
 }
@@ -17,29 +16,28 @@
   composes: root;
 }
 
-.content {
-  position: relative;
-  z-index: 0;
-  lost-utility: clearfix;
-}
-
 .eventHandler {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 2;
+  z-index: 1;
+  box-sizing: border-box;
 
   @nest .hasFocus & {
     pointer-events: none;
   }
 }
 
+.content {
+  position: relative;
+  z-index: 0;
+}
+
 .overlay {
-  composes: frosted from "part:@sanity/base/theme/layout/backgrounds-style";
   background-color: color(var(--component-bg) a(75%));
-  z-index: 1;
+  z-index: 2;
   width: 100%;
   height: 100%;
   position: absolute;
@@ -54,7 +52,6 @@
 
   @nest .hasFocus & {
     opacity: 0;
-    pointer-events: none;
   }
 }
 

packages/@sanity/form-builder/src/inputs/BlockEditor-slate/BlockEditor.js

@@ -5,6 +5,7 @@ import {Data, State} from 'slate'
 import {Editor} from 'slate-react'
 import FullscreenDialog from 'part:@sanity/components/dialogs/fullscreen?'
 import ScrollContainer from 'part:@sanity/components/utilities/scroll-container'
+import ActivateOnFocus from 'part:@sanity/components/utilities/activate-on-focus'
 import {uniqueId} from 'lodash'
 
 import FormField from 'part:@sanity/components/formfields/default'
@@ -37,7 +38,9 @@ export default class BlockEditor extends React.Component {
 
   state = {
     fullscreen: false,
-    toolbarStyle: {}
+    toolbarStyle: {},
+    preventScroll: false,
+    editorHasFocus: false
   }
 
   _inputId = uniqueId('SlateBlockEditor')
@@ -59,13 +62,36 @@ export default class BlockEditor extends React.Component {
   componentDidMount() {
     window.addEventListener('keydown', this.handleKeyDown)
     // this._inputContainer.addEventListener('mousewheel', this.handleInputScroll)
+    this.checkScrollHeight()
   }
 
   componentWillUnmount() {
     window.removeEventListener('keydown', this.handleKeyDown)
     // this._inputContainer.removeEventListener('mousewheel', this.handleInputScroll)
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (nextProps !== this.props) {
+      this.checkScrollHeight()
+    }
+  }
+
+  checkScrollHeight = () => {
+    if (!this._inputContainer || !this._editorWrapper) {
+      return
+    }
+
+    const inputHeight = this._inputContainer.offsetHeight
+    const contentHeight = this._editorWrapper.offsetHeight
+
+    if (contentHeight > inputHeight) {
+      this.setState({
+        preventScroll: true
+      })
+    }
+
+  }
+
   handleNodePatch = event => this.props.onNodePatch(event)
 
   handleInsertBlock = item => {
@@ -261,6 +287,19 @@ export default class BlockEditor extends React.Component {
     this.editor.focus()
   }
 
+  handleEditorFocus = event => {
+    this.setState({
+      editorHasFocus: true
+    })
+    this.focus()
+  }
+
+  handleEditorBlur = event => {
+    this.setState({
+      editorHasFocus: false
+    })
+  }
+
   handleInputScroll = event => {
     // Prevents the parent container to scroll when user tries
     // to scroll to the top/bottom of the block editor with momentum scroll or
@@ -295,9 +334,13 @@ export default class BlockEditor extends React.Component {
     this._inputContainer = element
   }
 
+  setEditorWrapper = element => {
+    this._editorWrapper = element
+  }
+
   renderBlockEditor() {
     const {value, onChange} = this.props
-    const {fullscreen, toolbarStyle} = this.state
+    const {fullscreen, toolbarStyle, preventScroll, editorHasFocus} = this.state
 
     return (
       <div
@@ -319,31 +362,38 @@ export default class BlockEditor extends React.Component {
           decorators={this.getActiveDecorators()}
           style={toolbarStyle}
         />
-        <div
-          className={styles.inputContainer}
-          id={this._inputId}
-          onClick={this.handleEditorContainerClick}
-          ref={this.setInputContainerElement}
-          onWheel={this.handleInputScroll}
+        <ActivateOnFocus
+          isActive={editorHasFocus || fullscreen || !preventScroll}
+          message="Click to edit"
         >
-          <div>
-            <Editor
-              ref={this.refEditor}
-              className={styles.input}
-              onChange={onChange}
-              placeholder=""
-              state={value}
-              blockEditor={this}
-              plugins={this.slatePlugins}
-              schema={this.slateSchema}
-            />
-            <div
-              ref={this.refBlockDragMarker}
-              style={{display: 'none'}}
-              className={styles.blockDragMarker}
-            />
+          <div
+            className={styles.inputContainer}
+            id={this._inputId}
+            onClick={this.handleEditorContainerClick}
+            ref={this.setInputContainerElement}
+            onWheel={this.handleInputScroll}
+          >
+            <div ref={this.setEditorWrapper}>
+              <Editor
+                ref={this.refEditor}
+                className={styles.input}
+                onChange={onChange}
+                placeholder=""
+                state={value}
+                blockEditor={this}
+                plugins={this.slatePlugins}
+                schema={this.slateSchema}
+                onFocus={this.handleEditorFocus}
+                onBlur={this.handleEditorBlur}
+              />
+              <div
+                ref={this.refBlockDragMarker}
+                style={{display: 'none'}}
+                className={styles.blockDragMarker}
+              />
+            </div>
           </div>
-        </div>
+        </ActivateOnFocus>
       </div>
     )
   }
@@ -373,6 +423,7 @@ export default class BlockEditor extends React.Component {
     const {type, level, markers} = this.props
     const {fullscreen} = this.state
     const blockEditor = this.renderBlockEditor()
+
     return (
       <FormField
         markers={markers}