KCL-4048 - Merge classNames in inline styles

examples/draft-0-10-0/kentico/RichEditor.css

@@ -76,22 +76,29 @@
   color: #5890ff;
 }
 
+.docs p {
+  line-height: 20px;
+}
+
 .rte__kentico {
   color: white;
-  background-image: linear-gradient(#f05a22, #f05a22);
+  background-color: #f05a22;
+  white-space: pre-wrap;
+}
+
+.rte__kentico-programmatic {
   border-radius: 0.5em;
   padding-right: 0.5em;
   padding-left: 0.5em;
   border-bottom-left-radius: 0;
 }
 
-.rte__kentico {
-  color: white;
-  background-image: linear-gradient(#f05a22, #f05a22);
-}
-
 .rte__kentico + .rte__kentico {
   border-top-left-radius: 0;
   padding-left: 0;
   margin-left: -0.5em;
 }
+
+.rte__highlight {
+  background-image: linear-gradient(rgba(255, 255, 0, 0.5), rgba(255, 255, 0, 0.5));
+}

examples/draft-0-10-0/kentico/kentico.html

@@ -29,7 +29,8 @@ <h1>Kentico DraftJS customization test</h1>
       <p>This page showcases customizations of the DraftJS editor and scenarios for it's testing. It is also a documentation for the type of customizations made.</p>
       <h2>Class name support for inline styles</h2>
       <p>DraftJS editor supports natively only inline styles rendered directly to the editor leaf DOM nodes. With this customization <code>className</code> property can be added to the style object and it renders to the <code>class</code> attribute in the resulting HTML.</p>
-      <p>Add text and apply <strong>Kentico</strong> inline style from the toolbar. The style should be applied (Kentico logo <span class="rte__kentico" style="display: inline-block;">leaf</span> design), there should be both inline style <code>display: inline-block</code> and class name <code>rte__kentico</code> rendered.</p>
+      <p>Add text and apply <strong>Kentico</strong> inline style from the toolbar. The style should be applied (Kentico logo <span class="rte__kentico rte__kentico-programmatic" style="display: inline-block; text-decoration: underline;">leaf</span> design), there should be inline style <code>display: inline-block; text-decoration: underline;</code> and class names <code>rte__kentico rte__kentico-programmatic</code> rendered.</p>
+      <p>It should combine well with the <strong>Highlight</strong> inline style from the toolbar which should apply <span class="rte__highlight">highlight</span> and class name <code>rte__highlight</code> and mix properly with the other styles including <strong>Kentico</strong> like this: <span class="rte__kentico rte__kentico-programmatic" style="display: inline-block; text-decoration: underline;">Hello </span><span class="rte__kentico rte__kentico-programmatic rte__highlight" style="display: inline-block; text-decoration: underline;">world</span></p>
       <h2>RTL short-circuit</h2>
       <p>We disabled the default handling of RTL detection in individual blocks for performance reasons. No need to test it here.</p>
       <h2><code>getIn</code> error</h2>
@@ -133,6 +134,7 @@ <h2><code>getIn</code> error</h2>
                   editorState={editorState}
                   handleKeyCommand={this.handleKeyCommand}
                   keyBindingFn={this.mapKeyToEditorCommand}
+                  customStyleFn={getCustomStyle}
                   onChange={this.onChange}
                   placeholder="Tell a story..."
                   ref="editor"
@@ -157,6 +159,11 @@ <h2><code>getIn</code> error</h2>
           className: 'rte__kentico',
           display: 'inline-block',
         },
+
+        HIGHLIGHT: {
+          className: 'rte__highlight',
+          display: 'inline-block',
+        },
       };
 
       function getBlockStyle(block) {
@@ -166,6 +173,16 @@ <h2><code>getIn</code> error</h2>
         }
       }
 
+      function getCustomStyle(style) {
+        if (style.includes('KENTICO')) {
+          return {
+            className: 'rte__kentico-programmatic',
+            textDecoration: 'underline',
+          };
+        }
+        return {};
+      }
+
       class StyleButton extends React.Component {
         constructor() {
           super();
@@ -231,6 +248,7 @@ <h2><code>getIn</code> error</h2>
         {label: 'Underline', style: 'UNDERLINE'},
         {label: 'Monospace', style: 'CODE'},
         {label: 'Kentico', style: 'KENTICO'},
+        {label: 'Highlight', style: 'HIGHLIGHT'},
       ];
 
       const InlineStyleControls = (props) => {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "draft-js",
   "description": "A React framework for building text editors.",
-  "version": "0.11.5-kentico.5",
+  "version": "0.11.5-kentico.6",
   "keywords": [
     "draftjs",
     "editor",

src/component/contents/DraftEditorLeaf.react.js

@@ -55,6 +55,8 @@ type Props = {
   ...
 };
 
+const mergedStyleProps = ['textDecoration', 'className'];
+
 /**
  * All leaf nodes in the editor are spans with single text nodes. Leaf
  * elements are styled based on the merging of an optional custom style map
@@ -144,24 +146,26 @@ class DraftEditorLeaf extends React.Component<Props> {
     }
 
     const {customStyleMap, customStyleFn, offsetKey, styleSet} = this.props;
-    let styleObj = styleSet.reduce((map, styleName) => {
-      const mergedStyles = {};
-      const style = customStyleMap[styleName];
-
-      if (style !== undefined && map.textDecoration !== style.textDecoration) {
-        // .trim() is necessary for IE9/10/11 and Edge
-        mergedStyles.textDecoration = [map.textDecoration, style.textDecoration]
-          .join(' ')
-          .trim();
-      }
-
-      return Object.assign(map, style, mergedStyles);
-    }, {});
-
-    if (customStyleFn) {
-      const newStyles = customStyleFn(styleSet, block);
-      styleObj = Object.assign(styleObj, newStyles);
-    }
+
+    let styleObj = styleSet
+      .map(styleName => customStyleMap[styleName])
+      .concat(customStyleFn ? customStyleFn(styleSet, block) : undefined)
+      .reduce((map, style) => {
+        const mergedStyles = {};
+
+        if (style !== undefined) {
+          mergedStyleProps.forEach(propName => {
+            if (map[propName] !== style[propName]) {
+              // .trim() is necessary for IE9/10/11 and Edge
+              mergedStyles[propName] = [map[propName], style[propName]]
+                .join(' ')
+                .trim();
+            }
+          });
+        }
+
+        return Object.assign(map, style, mergedStyles);
+      }, {});
 
     let renderClassName;
     if (styleObj.className) {