From af9cfc6fa8b9ec771d87497bd550e21e78397927 Mon Sep 17 00:00:00 2001
From: Denys Feshchenko <denys.feshchenko@nextiva.com>
Date: Wed, 1 Nov 2017 13:12:49 +0200
Subject: [PATCH 1/3] pass styles into inlineStyleFn separately to produce
 separated element for each style

---
 packages/draft-js-export-html/README.md       |  2 +-
 .../src/__tests__/stateToHTML-test.js         |  7 +++---
 .../draft-js-export-html/src/stateToHTML.js   | 25 +++++++++++--------
 3 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/packages/draft-js-export-html/README.md b/packages/draft-js-export-html/README.md
index eff79605..289c4e0c 100644
--- a/packages/draft-js-export-html/README.md
+++ b/packages/draft-js-export-html/README.md
@@ -42,7 +42,7 @@ let options = {
 };
 let html = stateToHTML(contentState, options);
 ```
-### `inlineStylesFn`
+### `inlineStyleFn`
 
 You can define custom function to return rendering options based on inline styles. Similar to draft.js [customStyleFn](https://draftjs.org/docs/api-reference-editor.html#customstylefn).
 
diff --git a/packages/draft-js-export-html/src/__tests__/stateToHTML-test.js b/packages/draft-js-export-html/src/__tests__/stateToHTML-test.js
index 36fb0ac3..75963545 100644
--- a/packages/draft-js-export-html/src/__tests__/stateToHTML-test.js
+++ b/packages/draft-js-export-html/src/__tests__/stateToHTML-test.js
@@ -112,15 +112,14 @@ describe('stateToHTML', () => {
 
   it('should support inline style function', () => {
     let options = {
-      inlineStyleFn: (styles) => {
+      inlineStyleFn: (style) => {
         let key = 'color-';
-        let color = styles.filter((value) => value.startsWith(key)).first();
 
-        if (color) {
+        if (style.startsWith(key)) {
           return {
             element: 'span',
             style: {
-              color: color.replace(key, ''),
+              color: style.replace(key, ''),
             },
           };
         }
diff --git a/packages/draft-js-export-html/src/stateToHTML.js b/packages/draft-js-export-html/src/stateToHTML.js
index d90b7fac..9c00805e 100644
--- a/packages/draft-js-export-html/src/stateToHTML.js
+++ b/packages/draft-js-export-html/src/stateToHTML.js
@@ -37,7 +37,7 @@ type StyleMap = {[styleName: string]: RenderConfig};
 
 type BlockStyleFn = (block: ContentBlock) => ?RenderConfig;
 type EntityStyleFn = (entity: Entity) => ?RenderConfig;
-type InlineStyleFn = (style: DraftInlineStyle) => ?RenderConfig;
+type InlineStyleFn = (style: string) => ?RenderConfig;
 
 type Options = {
   inlineStyles?: StyleMap;
@@ -344,18 +344,21 @@ class MarkupGenerator {
       return content;
     }
 
-    const renderConfig = this.inlineStyleFn(styleSet);
-    if (!renderConfig) {
-      return content;
-    }
+    return styleSet.reduce((nextContent, styleItem) => {
+      const renderConfig = this.inlineStyleFn(styleItem);
+
+      if (!renderConfig) {
+        return nextContent;
+      }
 
-    const {element = 'span', attributes, style} = renderConfig;
-    const attrString = stringifyAttrs({
-      ...attributes,
-      style: style && styleToCSS(style),
-    });
+      const {element = 'span', attributes, style} = renderConfig;
+      const attrString = stringifyAttrs({
+        ...attributes,
+        style: style && styleToCSS(style),
+      });
 
-    return `<${element}${attrString}>${content}</${element}>`;
+      return `<${element}${attrString}>${nextContent}</${element}>`;
+    }, content);
   }
 
   renderBlockContent(block: ContentBlock): string {

From 41351d42b65e28cc3612b2a2828ed3181eeed826 Mon Sep 17 00:00:00 2001
From: Denys Feshchenko <denys.feshchenko@nextiva.com>
Date: Wed, 1 Nov 2017 13:41:34 +0200
Subject: [PATCH 2/3] removed unused variables

---
 packages/draft-js-export-html/src/stateToHTML.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/draft-js-export-html/src/stateToHTML.js b/packages/draft-js-export-html/src/stateToHTML.js
index 9c00805e..ef18fd50 100644
--- a/packages/draft-js-export-html/src/stateToHTML.js
+++ b/packages/draft-js-export-html/src/stateToHTML.js
@@ -18,7 +18,6 @@ import type {
   EntityInstance,
 } from 'draft-js';
 import type {CharacterMetaList} from 'draft-js-utils';
-import type {DraftInlineStyle} from 'draft-js/lib/DraftInlineStyle';
 
 type AttrMap = {[key: string]: string};
 type Attributes = {[key: string]: string};

From f25f9d880aef848a010f47a3be73285522a92b7c Mon Sep 17 00:00:00 2001
From: Denys Feshchenko <denys.feshchenko@nextiva.com>
Date: Wed, 1 Nov 2017 13:50:16 +0200
Subject: [PATCH 3/3] fixed flow warning

---
 packages/draft-js-export-html/src/stateToHTML.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/draft-js-export-html/src/stateToHTML.js b/packages/draft-js-export-html/src/stateToHTML.js
index ef18fd50..01b09271 100644
--- a/packages/draft-js-export-html/src/stateToHTML.js
+++ b/packages/draft-js-export-html/src/stateToHTML.js
@@ -343,8 +343,10 @@ class MarkupGenerator {
       return content;
     }
 
+    const inlineStyleFn = this.inlineStyleFn;
+
     return styleSet.reduce((nextContent, styleItem) => {
-      const renderConfig = this.inlineStyleFn(styleItem);
+      const renderConfig = inlineStyleFn(styleItem);
 
       if (!renderConfig) {
         return nextContent;