Fix lag in preview

packages/strapi-helper-plugin/lib/src/components/Wysiwyg/componentsStyles.scss

@@ -55,6 +55,10 @@
     margin-top: 27px;
   }
 
+  ol {
+    padding-left: 20px;
+  }
+
   // NOTE: we might need this later
   span {
     white-space: pre-line;

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

@@ -49,7 +49,6 @@ class Wysiwyg extends React.Component {
     super(props);
     this.state = {
       editorState: EditorState.createEmpty(),
-      initialValue: '',
       isDraging: false,
       isFocused: false,
       isPreviewMode: false,
@@ -85,16 +84,13 @@ class Wysiwyg extends React.Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(prevProps) {
-    if (nextProps.value !== this.props.value && !this.state.hasInitialValue) {
+    // Handle resetProps
-      this.setInitialValue(nextProps);
+    if (prevProps.resetProps !== this.props.resetProps) {
+      this.setInitialValue(this.props);
+    }
   }
 
-    // Handle reset props
-    if (nextProps.value === this.state.initialValue && this.state.hasInitialValue) {
-      this.setInitialValue(nextProps);
-    }
-  }
 
   /**
    * Init the editor with data from
@@ -104,12 +100,7 @@ class Wysiwyg extends React.Component {
     const contentState = ContentState.createFromText(props.value);
     const newEditorState = EditorState.createWithContent(contentState);
     const editorState = this.state.isFocused ? EditorState.moveFocusToEnd(newEditorState) : newEditorState;
-
+    return this.setState({ editorState });
-    this.setState({
-      editorState,
-      hasInitialValue: true,
-      initialValue: props.value,
-    });
   };
 
   addContent = (content, style) => {
@@ -557,7 +548,7 @@ class Wysiwyg extends React.Component {
           </div>
           {/* WYSIWYG PREVIEW NOT FULLSCREEN */}
           {isPreviewMode ? (
-            <PreviewWysiwyg />
+            <PreviewWysiwyg data={this.props.value} />
           ) : (
             <div
               className={cn(styles.editor, isFullscreen && styles.editorFullScreen)}
@@ -603,7 +594,7 @@ class Wysiwyg extends React.Component {
               onClick={this.toggleFullScreen}
               characters={this.getCharactersNumber()}
             />
-            <PreviewWysiwyg />
+            <PreviewWysiwyg data={this.props.value} />
           </div>
         )}
       </div>
@@ -629,6 +620,7 @@ Wysiwyg.defaultProps = {
   onBlur: () => {},
   onChange: () => {},
   placeholder: '',
+  resetProps: false,
   style: {},
   tabIndex: '0',
   value: '',
@@ -643,6 +635,7 @@ Wysiwyg.propTypes = {
   onBlur: PropTypes.func,
   onChange: PropTypes.func,
   placeholder: PropTypes.string,
+  resetProps: PropTypes.bool,
   style: PropTypes.object,
   tabIndex: PropTypes.string,
   value: PropTypes.string,

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

@@ -9,14 +9,9 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import styles from './componentsStyles.scss';
 
-const PreviewControl = ({ characters, onClick }) => (
+const PreviewControl = ({ onClick }) => (
   <div className={styles.previewControlsWrapper} onClick={onClick}>
-    <div>
+    <div />
-      <span>{characters}&nbsp;</span>
-      <FormattedMessage
-        id="components.WysiwygBottomControls.charactersIndicators"
-      />
-    </div>
     <div className={styles.wysiwygCollapse}>
       <FormattedMessage id="components.Wysiwyg.collapse" />
     </div>
@@ -24,12 +19,10 @@ const PreviewControl = ({ characters, onClick }) => (
 );
 
 PreviewControl.defaultProps = {
-  characters: 0,
   onClick: () => {},
 };
 
 PreviewControl.propTypes = {
-  characters: PropTypes.number,
   onClick: PropTypes.func,
 };
 

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

@@ -42,18 +42,6 @@ function getBlockStyle(block) {
   }
 }
 
-class PreviewWysiwyg extends React.Component {
-  getClassName = () => {
-    if (this.context.isFullscreen) {
-      return cn(styles.editor, styles.editorFullScreen, styles.fullscreenPreviewEditor);
-    }
-
-    return styles.editor;
-  };
-
-  previewHTML = () => {
-    const initHtml = isEmpty(this.context.html) ? '<p></p>' : this.context.html;
-    const html = converter.makeHtml(initHtml);
 const decorator = new CompositeDecorator([
   {
     strategy: findLinkEntities,
@@ -69,18 +57,59 @@ class PreviewWysiwyg extends React.Component {
   },
 ]);
 
+class PreviewWysiwyg extends React.Component {
+  state = { editorState: EditorState.createEmpty(), isMounted: false };
+
+  componentDidMount() {
+    const { data } = this.props;
+    this.setState({ isMounted: true });
+
+    if (!isEmpty(data)) {
+      this.previewHTML(data);
+    }
+  }
+
+  componentWillUnmount() {
+    this.setState({ isMounted: false });
+  }
+
+  getClassName = () => {
+    if (this.context.isFullscreen) {
+      return cn(styles.editor, styles.editorFullScreen, styles.fullscreenPreviewEditor);
+    }
+
+    return styles.editor;
+  };
+
+  UNSAFE_componentWillUpdate(nextProps, nextState) {
+    if (nextProps.data !== this.props.data) {
+      new Promise(resolve => {
+        setTimeout(() => {
+          if (nextProps.data === this.props.data && nextState.isMounted) {
+            this.previewHTML(nextProps.data);
+          }
+          resolve();
+        }, 300);
+      });
+    }
+  }
+
+  previewHTML = (rawContent) => {
+    const initHtml = isEmpty(rawContent) ? '<p></p>' : rawContent;
+    const html = converter.makeHtml(initHtml);
     const blocksFromHTML = convertFromHTML(html);
+
     // Make sure blocksFromHTML.contentBlocks !== null
     if (blocksFromHTML.contentBlocks) {
       const contentState = ContentState.createFromBlockArray(
         blocksFromHTML.contentBlocks,
         blocksFromHTML.entityMap,
       );
-      return EditorState.createWithContent(contentState, decorator);
+      return this.setState({ editorState: EditorState.createWithContent(contentState, decorator) });
     }
 
     // Prevent errors if value is empty
-    return EditorState.createEmpty();
+    return this.setState({ editorState: EditorState.createEmpty() });
   };
 
   render() {
@@ -90,7 +119,7 @@ class PreviewWysiwyg extends React.Component {
       <div className={this.getClassName()}>
         <WysiwygEditor
           blockStyleFn={getBlockStyle}
-          editorState={this.previewHTML()}
+          editorState={this.state.editorState}
           onChange={() => {}}
           placeholder={placeholder}
           spellCheck
@@ -102,10 +131,16 @@ class PreviewWysiwyg extends React.Component {
 }
 
 PreviewWysiwyg.contextTypes = {
-  editorState: PropTypes.func,
-  html: PropTypes.string,
   isFullscreen: PropTypes.bool,
   placeholder: PropTypes.string,
 };
 
+PreviewWysiwyg.defaultProps = {
+  data: '',
+};
+
+PreviewWysiwyg.propTypes = {
+  data: PropTypes.string,
+};
+
 export default PreviewWysiwyg;

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

@@ -86,6 +86,7 @@ class WysiwygWithErrors extends React.Component { // eslint-disable-line react/p
       onBlur,
       onChange,
       placeholder,
+      resetProps,
       style,
       tabIndex,
       value,
@@ -123,6 +124,7 @@ class WysiwygWithErrors extends React.Component { // eslint-disable-line react/p
           onBlur={handleBlur}
           onChange={onChange}
           placeholder={placeholder}
+          resetProps={resetProps}
           style={inputStyle}
           tabIndex={tabIndex}
           value={value}
@@ -164,6 +166,7 @@ WysiwygWithErrors.defaultProps = {
   noErrorsDescription: false,
   onBlur: false,
   placeholder: '',
+  resetProps: false,
   style: {},
   tabIndex: '0',
   validations: {},
@@ -209,6 +212,7 @@ WysiwygWithErrors.propTypes = {
   ]),
   onChange: PropTypes.func.isRequired,
   placeholder: PropTypes.string,
+  resetProps: PropTypes.bool,
   style: PropTypes.object,
   tabIndex: PropTypes.string,
   validations: PropTypes.object,

packages/strapi-plugin-content-manager/admin/src/components/Edit/index.js

@@ -152,8 +152,9 @@ class Edit extends React.PureComponent {
                 name={attr}
                 onBlur={this.props.onBlur}
                 onChange={this.props.onChange}
-                selectOptions={get(this.props.attributes, [attr, 'enum'])}
                 placeholder={get(layout, 'placeholder') || details.placeholder}
+                resetProps={this.props.resetProps}
+                selectOptions={get(this.props.attributes, [attr, 'enum'])}
                 type={type}
                 validations={this.getInputValidations(attr)}
                 value={this.props.record[attr]}
@@ -174,6 +175,7 @@ Edit.defaultProps = {
   onBlur: () => {},
   onChange: () => {},
   record: {},
+  resetProps: false,
   schema: {},
 };
 
@@ -186,6 +188,7 @@ Edit.propTypes = {
   onBlur: PropTypes.func,
   onChange: PropTypes.func,
   record: PropTypes.object,
+  resetProps: PropTypes.bool,
   schema: PropTypes.object,
 };
 

packages/strapi-plugin-content-manager/admin/src/containers/EditPage/index.js

@@ -280,6 +280,7 @@ export class EditPage extends React.Component {
                     onBlur={this.handleBlur}
                     onChange={this.handleChange}
                     record={editPage.record}
+                    resetProps={editPage.resetProps}
                     schema={this.getSchema()}
                   />
                 </div>

packages/strapi-plugin-content-manager/admin/src/containers/EditPage/reducer.js

@@ -31,6 +31,7 @@ const initialState = fromJS({
   modelName: '',
   pluginHeaderTitle: 'New Entry',
   record: Map({}),
+  resetProps: false,
   showLoader: false,
   source: 'content-manager',
   submitSuccess: false,
@@ -59,7 +60,8 @@ function editPageReducer(state = initialState, action) {
       return state
         .update('didCheckErrors', (v) => v = !v)
         .update('formErrors', () => List([]))
-        .update('record', () => state.get('initialRecord'));
+        .update('record', () => state.get('initialRecord'))
+        .update('resetProps', (v) => v = !v);
     case RESET_PROPS:
       return initialState;
     case SET_FILE_RELATIONS: