implement widget data serialization for rte perf

src/actions/entries.js

@@ -1,10 +1,12 @@
-import { List } from 'immutable';
+import { List, Map } from 'immutable';
+import { isArray, isObject, isEmpty, isNil } from 'lodash';
 import { actions as notifActions } from 'redux-notifications';
 import { closeEntry } from './editor';
 import { currentBackend } from '../backends/backend';
 import { getIntegrationProvider } from '../integrations';
 import { getAsset, selectIntegration } from '../reducers';
 import { createEntry } from '../valueObjects/Entry';
+import { controlValueSerializers } from '../components/Widgets/serializers';
 
 const { notifSend } = notifActions;
 
@@ -216,9 +218,27 @@ export function loadEntry(collection, slug) {
     const backend = currentBackend(state.config);
     dispatch(entryLoading(collection, slug));
     return backend.getEntry(collection, slug)
-      .then(loadedEntry => (
-        dispatch(entryLoaded(collection, loadedEntry))
-      ))
+      .then(loadedEntry => {
+        const deserializeValues = (values, fields) => {
+          return fields.reduce((acc, field) => {
+            const fieldName = field.get('name');
+            const value = values[fieldName];
+            const serializer = controlValueSerializers[field.get('widget')];
+            if (isArray(value) && !isEmpty(value)) {
+              acc[fieldName] = value.map(val => deserializeValues(val, field.get('fields')));
+            } else if (isObject(value) && !isEmpty(value)) {
+              acc[fieldName] = deserializeValues(value, field.get('fields'));
+            } else if (serializer && !isNil(value)) {
+              acc[fieldName] = serializer.deserialize(value);
+            } else if (!isNil(value)) {
+              acc[fieldName] = value;
+            }
+            return acc;
+          }, {});
+        };
+        loadedEntry.data = deserializeValues(loadedEntry.data, collection.get('fields'));
+        return dispatch(entryLoaded(collection, loadedEntry))
+      })
       .catch((error) => {
         dispatch(notifSend({
           message: `Failed to load entry: ${ error.message }`,
@@ -265,20 +285,40 @@ export function persistEntry(collection) {
 
     // Early return if draft contains validation errors
     if (!entryDraft.get('fieldsErrors').isEmpty()) return Promise.reject();
-    
+
     const backend = currentBackend(state.config);
     const assetProxies = entryDraft.get('mediaFiles').map(path => getAsset(state, path));
     const entry = entryDraft.get('entry');
-    dispatch(entryPersisting(collection, entry));
+    const serializeValues = (values, fields) => {
+      return fields.reduce((acc, field) => {
+        const fieldName = field.get('name');
+        const value = values.get(fieldName);
+        const serializer = controlValueSerializers[field.get('widget')];
+        if (List.isList(value)) {
+          return acc.set(fieldName, value.map(val => serializeValues(val, field.get('fields'))));
+        } else if (Map.isMap(value)) {
+          return acc.set(fieldName, serializeValues(value, field.get('fields')));
+        } else if (serializer && !isNil(value)) {
+          return acc.set(fieldName, serializer.serialize(value));
+        } else if (!isNil(value)) {
+          return acc.set(fieldName, value);
+        }
+        return acc;
+      }, Map());
+    };
+    const transformedData = serializeValues(entryDraft.getIn(['entry', 'data']), collection.get('fields'));
+    const transformedEntry = entry.set('data', transformedData);
+    const transformedEntryDraft = entryDraft.set('entry', transformedEntry);
+    dispatch(entryPersisting(collection, transformedEntry));
     return backend
-      .persistEntry(state.config, collection, entryDraft, assetProxies.toJS())
+      .persistEntry(state.config, collection, transformedEntryDraft, assetProxies.toJS())
       .then(() => {
         dispatch(notifSend({
           message: 'Entry saved',
           kind: 'success',
           dismissAfter: 4000,
         }));
-        return dispatch(entryPersisted(collection, entry));
+        return dispatch(entryPersisted(collection, transformedEntry));
       })
       .catch((error) => {
         dispatch(notifSend({
@@ -286,7 +326,7 @@ export function persistEntry(collection) {
           kind: 'danger',
           dismissAfter: 8000,
         }));
-        return dispatch(entryPersistFail(collection, entry, error));
+        return dispatch(entryPersistFail(collection, transformedEntry, error));
       });
   };
 }

src/components/Widgets/ControlHOC.js

@@ -1,5 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 import ImmutablePropTypes from "react-immutable-proptypes";
+import isEqual from 'lodash/isEqual';
 
 const truthy = () => ({ error: false });
 
@@ -23,7 +24,7 @@ class ControlHOC extends Component {
   };
 
   shouldComponentUpdate(nextProps) {
-    return nextProps.value !== this.props.value;
+    return this.props.value !== nextProps.value;
   }
 
   processInnerControlRef = (wrappedControl) => {

src/components/Widgets/MarkdownControl/RawEditor/index.js

@@ -1,5 +1,8 @@
 import React, { PropTypes } from 'react';
 import unified from 'unified';
+import markdownToRemark from 'remark-parse';
+import remarkToRehype from 'remark-rehype';
+import rehypeToHtml from 'rehype-stringify';
 import htmlToRehype from 'rehype-parse';
 import rehypeToRemark from 'rehype-remark';
 import remarkToMarkdown from 'remark-stringify';
@@ -31,7 +34,7 @@ function cleanupPaste(paste) {
     .use(rehypeSanitize)
     .use(rehypeReparse)
     .use(rehypeToRemark)
-    .use(remarkToMarkdown, { fences: true, footnotes: true, pedantic: true })
+    .use(remarkToMarkdown)
     .process(paste);
 }
 
@@ -72,7 +75,10 @@ export default class RawEditor extends React.Component {
   constructor(props) {
     super(props);
     const plugins = registry.getEditorComponents();
-    this.state = { plugins };
+    this.state = {
+      value: this.props.value,
+      plugins,
+    };
     this.shortcuts = {
       meta: {
         b: this.handleBold,
@@ -84,6 +90,13 @@ export default class RawEditor extends React.Component {
   componentDidMount() {
     this.updateHeight();
     this.element.addEventListener('paste', this.handlePaste, false);
+    const markdown = unified()
+      .use(htmlToRehype)
+      .use(rehypeToRemark)
+      .use(remarkToMarkdown)
+      .processSync(this.state.value)
+      .contents;
+    this.setState({ value: markdown });
   }
 
   componentDidUpdate() {
@@ -101,7 +114,7 @@ export default class RawEditor extends React.Component {
   getSelection() {
     const start = this.element.selectionStart;
     const end = this.element.selectionEnd;
-    const selected = (this.props.value || '').substr(start, end - start);
+    const selected = (this.state.value || '').substr(start, end - start);
     return { start, end, selected };
   }
 
@@ -131,22 +144,22 @@ export default class RawEditor extends React.Component {
     const afterSelection = value.substr(selection.end);
 
     this.newSelection = newSelection;
-    this.props.onChange(beforeSelection + changed + afterSelection);
+    this.handleChange(beforeSelection + changed + afterSelection);
   }
 
   replaceSelection(chars) {
-    const value = this.props.value || '';
+    const value = this.state.value || '';
     const selection = this.getSelection();
     const newSelection = Object.assign({}, selection);
     const beforeSelection = value.substr(0, selection.start);
     const afterSelection = value.substr(selection.end);
     newSelection.end = selection.start + chars.length;
     this.newSelection = newSelection;
-    this.props.onChange(beforeSelection + chars + afterSelection);
+    this.handleChange(beforeSelection + chars + afterSelection);
   }
 
   toggleHeader(header) {
-    const value = this.props.value || '';
+    const value = this.state.value || '';
     const selection = this.getSelection();
     const newSelection = Object.assign({}, selection);
     const lastNewline = value.lastIndexOf('\n', selection.start);
@@ -167,7 +180,7 @@ export default class RawEditor extends React.Component {
       newSelection.end += header.length + 1;
     }
     this.newSelection = newSelection;
-    this.props.onChange(beforeHeader + chars + afterHeader);
+    this.handleChange(beforeHeader + chars + afterHeader);
   }
 
   updateHeight() {
@@ -208,7 +221,7 @@ export default class RawEditor extends React.Component {
   };
 
   handleSelection = () => {
-    const value = this.props.value || '';
+    const value = this.state.value || '';
     const selection = this.getSelection();
     if (selection.start !== selection.end && !HAS_LINE_BREAK.test(selection.selected)) {
       try {
@@ -236,8 +249,15 @@ export default class RawEditor extends React.Component {
   };
 
   handleChange = (e) => {
-    this.props.onChange(e.target.value);
+    const html = unified()
+      .use(markdownToRemark)
+      .use(remarkToRehype)
+      .use(rehypeToHtml)
+      .processSync(e.target.value)
+      .contents;
+    this.props.onChange(html);
     this.updateHeight();
+    this.setState({ value: e.target.value });
   };
 
   handlePluginSubmit = (plugin, data) => {
@@ -293,7 +313,7 @@ export default class RawEditor extends React.Component {
   };
 
   handlePaste = (e) => {
-    const { value, onChange } = this.props;
+    const { value } = this.props;
     const selection = this.getSelection();
     const beforeSelection = value.substr(0, selection.start);
     const afterSelection = value.substr(selection.end);
@@ -302,7 +322,7 @@ export default class RawEditor extends React.Component {
       const newSelection = Object.assign({}, selection);
       newSelection.start = newSelection.end = beforeSelection.length + paste.length;
       this.newSelection = newSelection;
-      onChange(beforeSelection + paste + afterSelection);
+      this.handleChange(beforeSelection + paste + afterSelection);
     });
   };
 
@@ -352,7 +372,7 @@ export default class RawEditor extends React.Component {
         className={styles.textarea}
         inputRef={this.handleRef}
         className={styles.textarea}
-        value={this.props.value || ''}
+        value={this.state.value || ''}
         onKeyDown={this.handleKey}
         onChange={this.handleChange}
         onSelect={this.handleSelection}

src/components/Widgets/MarkdownControl/VisualEditor/index.js

@@ -9,6 +9,7 @@ import remarkToMarkdown from 'remark-stringify';
 import htmlToRehype from 'rehype-parse';
 import rehypeToRemark from 'rehype-remark';
 import registry from '../../../../lib/registry';
+import { registerControlValueSerializer } from '../../serializers';
 import { createAssetProxy } from '../../../../valueObjects/AssetProxy';
 import { buildKeymap } from './keymap';
 import createMarkdownParser from './parser';
@@ -16,6 +17,23 @@ import Toolbar from '../Toolbar/Toolbar';
 import { Sticky } from '../../../UI/Sticky/Sticky';
 import styles from './index.css';
 
+// Register handler to transform html to markdown before persist
+registerControlValueSerializer('markdown', {
+  serialize: value => unified()
+    .use(htmlToRehype)
+    .use(htmlToRehype)
+    .use(rehypeToRemark)
+    .use(remarkToMarkdown)
+    .processSync(value)
+    .contents,
+  deserialize: value => unified()
+    .use(markdownToRemark)
+    .use(remarkToRehype)
+    .use(rehypeToHtml)
+    .processSync(value)
+    .contents
+});
+
 function processUrl(url) {
   if (url.match(/^(https?:\/\/|mailto:|\/)/)) {
     return url;
@@ -209,14 +227,8 @@ export default class Editor extends Component {
   constructor(props) {
     super(props);
     const plugins = registry.getEditorComponents();
-    const html = unified()
-      .use(markdownToRemark)
-      .use(remarkToRehype)
-      .use(rehypeToHtml)
-      .processSync(this.props.value || '')
-      .contents;
     this.state = {
-      editorState: serializer.deserialize(html || '<p></p>'),
+      editorState: serializer.deserialize(this.props.value || '<p></p>'),
       schema: {
         nodes: NODE_COMPONENTS,
         marks: MARK_COMPONENTS,
@@ -227,13 +239,7 @@ export default class Editor extends Component {
 
   handleDocumentChange = (doc, editorState) => {
     const html = serializer.serialize(editorState);
-    const markdown = unified()
-      .use(htmlToRehype)
-      .use(rehypeToRemark)
-      .use(remarkToMarkdown)
-      .processSync(html)
-      .contents;
-    this.props.onChange(markdown);
+    this.props.onChange(html);
   };
 
   hasMark = type => this.state.editorState.marks.some(mark => mark.type === type);

src/components/Widgets/MarkdownControl/VisualEditor/remarkSlate.js

@@ -1,12 +0,0 @@
-function remarkToSlate(opts) {
-
-  console.log(1);
-  return transform;
-
-  function transform(node) {
-    console.log(2);
-    console.log(node);
-  }
-}
-
-export default remarkToSlate;

src/components/Widgets/MarkdownControl/VisualEditor/slateRemark.js

@@ -1,9 +0,0 @@
-function slateToRemark(opts) {
-  return transform;
-
-  function transform(node) {
-    console.log(node);
-  }
-}
-
-export default slateToRemark;

src/components/Widgets/MarkdownPreview/index.js

@@ -8,15 +8,7 @@ import cmsPluginToRehype from './cmsPluginRehype';
 import previewStyle from '../defaultPreviewStyle';
 
 const MarkdownPreview = ({ value, getAsset }) => {
-  const Markdown = unified()
-    .use(markdownToRemark, { footnotes: true, pedantic: true })
-    .use(remarkToRehype, { allowDangerousHTML: true })
-    .use(cmsPluginToRehype, { getAsset })
-    .use(rehypeToReact, { createElement: React.createElement })
-    .processSync(value)
-    .contents;
-
-  return value === null ? null : <div style={previewStyle}>{Markdown}</div>;
+  return value === null ? null : <div style={previewStyle} dangerouslySetInnerHTML={{__html: value}}></div>;
 };
 
 MarkdownPreview.propTypes = {

src/components/Widgets/serializers.js

@@ -0,0 +1,5 @@
+export const controlValueSerializers = {};
+
+export const registerControlValueSerializer = (fieldName, serializer) => {
+  controlValueSerializers[fieldName] = serializer;
+};