Add disabled style to InputSelect

Disable wysiwyg controls when in preview mode

packages/strapi-helper-plugin/lib/src/components/InputSelect/index.js

@@ -24,6 +24,7 @@ function InputSelect(props) {
         'form-control',
         !props.deactivateErrorHighlight && props.error && 'is-invalid',
         !isEmpty(props.className) && props.className,
+        props.disabled && styles.inputSelectDisabled,
       )}
       disabled={props.disabled}
       id={props.name}

packages/strapi-helper-plugin/lib/src/components/InputSelect/styles.scss

@@ -15,3 +15,7 @@
   -webkit-appearance: none;
   box-shadow: 0px 1px 1px rgba(104, 118, 142, 0.05);
 }
+
+.inputSelectDisabled {
+  cursor: not-allowed;
+}

packages/strapi-helper-plugin/lib/src/components/Wysiwyg/components.js

@@ -5,30 +5,20 @@
  *
  */
 
-import React from "react";
-import { FormattedMessage } from "react-intl";
-import PropTypes from "prop-types";
-import styles from "./styles.scss";
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import PropTypes from 'prop-types';
+import styles from './styles.scss';
 
 const Image = props => {
-  const { alt, height, src, width } = props.contentState
-    .getEntity(props.entityKey)
-    .getData();
+  const { alt, height, src, width } = props.contentState.getEntity(props.entityKey).getData();
 
-  return (
-    <img
-      alt={alt}
-      src={src}
-      height={height}
-      width={width}
-      style={{ maxWidth: "100%" }}
-    />
-  );
+  return <img alt={alt} src={src} height={height} width={width} style={{ maxWidth: '100%' }} />;
 };
 
 Image.propTypes = {
   contentState: PropTypes.object.isRequired,
-  entityKey: PropTypes.string.isRequired
+  entityKey: PropTypes.string.isRequired,
 };
 
 const Link = props => {
@@ -42,26 +32,22 @@ const Link = props => {
 };
 
 Link.defaultProps = {
-  children: ""
+  children: '',
 };
 
 Link.propTypes = {
   children: PropTypes.node,
   contentState: PropTypes.object.isRequired,
-  entityKey: PropTypes.string.isRequired
+  entityKey: PropTypes.string.isRequired,
 };
 
 const ToggleMode = props => {
   const label = props.isPreviewMode
-    ? "components.Wysiwyg.ToggleMode.markdown"
-    : "components.Wysiwyg.ToggleMode.preview";
+    ? 'components.Wysiwyg.ToggleMode.markdown'
+    : 'components.Wysiwyg.ToggleMode.preview';
 
   return (
-    <button
-      type="button"
-      className={styles.toggleModeButton}
-      onClick={props.onClick}
-    >
+    <button type="button" className={styles.toggleModeButton} onClick={props.onClick}>
       <FormattedMessage id={label} />
     </button>
   );
@@ -69,12 +55,12 @@ const ToggleMode = props => {
 
 ToggleMode.defaultProps = {
   isPreviewMode: false,
-  onClick: () => {}
+  onClick: () => {},
 };
 
 ToggleMode.propTypes = {
   isPreviewMode: PropTypes.bool,
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
 };
 
 export { Image, Link, ToggleMode };

packages/strapi-helper-plugin/lib/src/components/Wysiwyg/index.js

@@ -110,19 +110,19 @@ class Wysiwyg extends React.Component {
     const textWithEntity = Modifier.replaceText(
       this.getEditorState().getCurrentContent(),
       this.getSelection(),
-      defaultContent,
+      defaultContent
     );
     const { anchorOffset, focusOffset } = getDefaultSelectionOffsets(
       defaultContent,
       startReplacer,
       endReplacer,
-      cursorPosition,
+      cursorPosition
     );
     const updatedSelection = this.getSelection().merge({ anchorOffset, focusOffset });
     const newEditorState = EditorState.push(
       this.getEditorState(),
       textWithEntity,
-      'insert-character',
+      'insert-character'
     );
 
     // Don't handle selection
@@ -133,7 +133,7 @@ class Wysiwyg extends React.Component {
         },
         () => {
           this.focus();
-        },
+        }
       );
     }
 
@@ -184,7 +184,7 @@ class Wysiwyg extends React.Component {
     const { anchorOffset, focusOffset } = getDefaultSelectionOffsets(
       defaultContent,
       startReplacer,
-      endReplacer,
+      endReplacer
     );
     let newEditorState = this.createNewEditorState(newContentState, defaultContent);
     const updatedSelection =
@@ -214,7 +214,7 @@ class Wysiwyg extends React.Component {
       const textWithEntity = Modifier.replaceText(
         this.getEditorState().getCurrentContent(),
         this.getSelection(),
-        text,
+        text
       );
       newEditorState = EditorState.push(this.getEditorState(), textWithEntity, 'insert-characters');
     }
@@ -229,7 +229,7 @@ class Wysiwyg extends React.Component {
 
   createNewContentStateFromBlock = (
     newBlock,
-    contentState = this.getEditorState().getCurrentContent(),
+    contentState = this.getEditorState().getCurrentContent()
   ) =>
     ContentState.createFromBlockArray(this.createNewBlockMap(newBlock, contentState).toArray())
       .set('selectionBefore', contentState.getSelectionBefore())
@@ -304,6 +304,11 @@ class Wysiwyg extends React.Component {
 
   handleDrop = e => {
     e.preventDefault();
+
+    if (this.state.isPreviewMode) {
+      return this.setState({ isDraging: false });
+    }
+
     const { dataTransfer: { files } } = e;
     const formData = new FormData();
     formData.append('files', files[0]);
@@ -319,7 +324,14 @@ class Wysiwyg extends React.Component {
         const newContentState = this.createNewContentStateFromBlock(newBlock);
         const newEditorState = EditorState.push(editorState, newContentState);
 
-        this.setState({ editorState: EditorState.moveFocusToEnd(newEditorState) });
+        this.setState({ editorState: newEditorState });
+        this.props.onChange({
+          target: {
+            value: newEditorState.getCurrentContent().getPlainText(),
+            name: this.props.name,
+            type: 'textarea',
+          },
+        });
       })
       .catch(err => {
         console.log('error', err.response);
@@ -361,15 +373,14 @@ class Wysiwyg extends React.Component {
       const textWithEntity = Modifier.replaceText(
         this.getEditorState().getCurrentContent(),
         this.getSelection(),
-        '  ',
+        '  '
       );
       const newEditorState = EditorState.push(
         this.getEditorState(),
         textWithEntity,
-        'insert-characters',
+        'insert-characters'
       );
 
-      // return this.setState({ editorState: EditorState.moveFocusToEnd(newEditorState) });
       return this.setState({ editorState: newEditorState });
     }
   };
@@ -405,7 +416,7 @@ class Wysiwyg extends React.Component {
     if (blocksFromHTML.contentBlocks) {
       const contentState = ContentState.createFromBlockArray(
         blocksFromHTML.contentBlocks,
-        blocksFromHTML.entityMap,
+        blocksFromHTML.entityMap
       );
       return EditorState.createWithContent(contentState, decorator);
     }
@@ -422,7 +433,7 @@ class Wysiwyg extends React.Component {
       },
       () => {
         this.focus();
-      },
+      }
     );
   };
 
@@ -440,7 +451,7 @@ class Wysiwyg extends React.Component {
           styles.editorWrapper,
           this.state.isFocused && styles.editorFocus,
           !this.props.deactivateErrorHighlight && this.props.error && styles.editorError,
-          !isEmpty(this.props.className) && this.props.className,
+          !isEmpty(this.props.className) && this.props.className
         )}
         onDragEnter={this.handleDragEnter}
         onDragOver={this.handleDragOver}
@@ -456,6 +467,7 @@ class Wysiwyg extends React.Component {
         <div className={styles.controlsContainer}>
           <div style={{ minWidth: '161px', marginLeft: '8px', marginRight: '5px' }}>
             <Select
+              disabled={isPreviewMode}
               name="headerSelect"
               onChange={this.handleChangeSelect}
               value={this.state.headerValue}
@@ -466,6 +478,7 @@ class Wysiwyg extends React.Component {
             <Controls
               key={key}
               buttons={value}
+              disabled={isPreviewMode}
               editorState={editorState}
               handlers={{
                 addContent: this.addContent,

packages/strapi-helper-plugin/lib/src/components/WysiwygInlineControls/index.js

@@ -13,7 +13,10 @@ import styles from './styles.scss';
 class StyleButton extends React.Component {
   handleClick = (e) => {
     e.preventDefault();
-    this.props.handlers[this.props.handler](this.props.text, this.props.style);
+
+    if (!this.props.disabled) {
+      this.props.handlers[this.props.handler](this.props.text, this.props.style);
+    }
   }
 
   render() {
@@ -23,6 +26,7 @@ class StyleButton extends React.Component {
           this.props.active && styles.styleButtonActive,
           styles.styleButton,
           this.props.className && styles[this.props.className],
+          this.props.disabled && styles.styleButtonDisabled,
         )}
         onMouseDown={this.handleClick}
       >
@@ -32,7 +36,7 @@ class StyleButton extends React.Component {
   }
 }
 
-const  WysiwygInlineControls = ({ buttons, editorState, handlers, onToggle, onToggleBlock }) => {
+const  WysiwygInlineControls = ({ buttons, disabled, editorState, handlers, onToggle, onToggleBlock }) => {
   const selection = editorState.getSelection();
   const blockType = editorState
     .getCurrentContent()
@@ -48,6 +52,7 @@ const  WysiwygInlineControls = ({ buttons, editorState, handlers, onToggle, onTo
           key={type.label}
           active={type.style === blockType || currentStyle.has(type.style)}
           className={type.className}
+          disabled={disabled}
           handler={type.handler}
           handlers={handlers}
           hideLabel={type.hideLabel || false}
@@ -65,6 +70,7 @@ const  WysiwygInlineControls = ({ buttons, editorState, handlers, onToggle, onTo
 StyleButton.defaultProps = {
   active: false,
   className: '',
+  disabled: false,
   hideLabel: false,
   label: '',
   onToggle: () => {},
@@ -76,24 +82,25 @@ StyleButton.defaultProps = {
 StyleButton.propTypes = {
   active: PropTypes.bool,
   className: PropTypes.string,
+  disabled: PropTypes.bool,
   handler: PropTypes.string.isRequired,
   handlers: PropTypes.object.isRequired,
   hideLabel: PropTypes.bool,
   label: PropTypes.string,
-  // onToggle: PropTypes.func,
-  // onToggleBlock: PropTypes.func,
   style: PropTypes.string,
   text: PropTypes.string,
 };
 
 WysiwygInlineControls.defaultProps = {
   buttons: [],
+  disabled: false,
   onToggle: () => {},
   onToggleBlock: () => {},
 };
 
 WysiwygInlineControls.propTypes = {
   buttons: PropTypes.array,
+  disabled: PropTypes.bool,
   editorState: PropTypes.object.isRequired,
   handlers: PropTypes.object.isRequired,
   onToggle: PropTypes.func,

packages/strapi-helper-plugin/lib/src/components/WysiwygInlineControls/styles.scss

@@ -34,6 +34,10 @@
   background-position: center;
 }
 
+.styleButtonDisabled {
+  cursor: not-allowed;
+}
+
 .styleButtonItalic {
   background-image: url('../../assets/icons/icon_italic.svg');
   background-position: center;