Added inline style function (#104)

* added inline style fn tests * added documentation for inlineStylesFn * added inline style fn type * - updated inlineStyleFn according to code style - return render config from inlineStyleFn * updated inlineStylesFn docs
sstur · Oct 16, 2017 · 0ff3a0c · 0ff3a0c
1 parent 509c6cb
commit 0ff3a0c
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 1 deletion.
diff --git a/packages/draft-js-export-html/README.md b/packages/draft-js-export-html/README.md
@@ -42,6 +42,30 @@ let options = {
 };
 let html = stateToHTML(contentState, options);
 ```
+### `inlineStylesFn`
+
+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).
+
+Example:
+
+```javascript
+let options = {
+  inlineStyleFn: (styles) => {
+    let key = 'color-';
+    let color = styles.filter((value) => value.startsWith(key)).first();
+
+    if (color) {
+      return {
+        element: 'span',
+        style: {
+          color: color.replace(key, ''),
+        },
+      };
+    }
+  },
+};
+let html = stateToHTML(contentState, options);
+```
 
 ### `blockRenderers`
 

diff --git a/packages/draft-js-export-html/src/__tests__/stateToHTML-test.js b/packages/draft-js-export-html/src/__tests__/stateToHTML-test.js
@@ -110,6 +110,44 @@ describe('stateToHTML', () => {
     );
   });
 
+  it('should support inline style function', () => {
+    let options = {
+      inlineStyleFn: (styles) => {
+        let key = 'color-';
+        let color = styles.filter((value) => value.startsWith(key)).first();
+
+        if (color) {
+          return {
+            element: 'span',
+            style: {
+              color: color.replace(key, ''),
+            },
+          };
+        }
+      },
+    };
+
+    let contentState = convertFromRaw(
+      //<p>Hello <span style="color: #f8b400">world</span></p>
+      {
+        entityMap: {},
+        blocks: [{
+          key: '7h6g0',
+          text: 'Hello world',
+          type: 'unstyled',
+          depth: 0,
+          inlineStyleRanges: [{offset: 6, length: 5, style: 'color-#f8b400'}],
+          entityRanges: [],
+          data: {},
+        }],
+      },
+    );
+
+    expect(stateToHTML(contentState, options)).toBe(
+      '<p>Hello <span style="color: #f8b400">world</span></p>',
+    );
+  });
+
   it('should support custom block styles', () => {
     let options = {
       blockStyleFn: (block) => {

diff --git a/packages/draft-js-export-html/src/stateToHTML.js b/packages/draft-js-export-html/src/stateToHTML.js
@@ -18,6 +18,7 @@ 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};
@@ -36,9 +37,11 @@ type StyleMap = {[styleName: string]: RenderConfig};
 
 type BlockStyleFn = (block: ContentBlock) => ?RenderConfig;
 type EntityStyleFn = (entity: Entity) => ?RenderConfig;
+type InlineStyleFn = (style: DraftInlineStyle) => ?RenderConfig;
 
 type Options = {
   inlineStyles?: StyleMap;
+  inlineStyleFn?: InlineStyleFn;
   blockRenderers?: BlockRendererMap;
   blockStyleFn?: BlockStyleFn;
   entityStyleFn?: EntityStyleFn;
@@ -176,6 +179,7 @@ class MarkupGenerator {
   // These are related to user-defined options.
   options: Options;
   inlineStyles: StyleMap;
+  inlineStyleFn: ?InlineStyleFn;
   styleOrder: Array<string>;
 
   constructor(contentState: ContentState, options: ?Options) {
@@ -192,6 +196,7 @@ class MarkupGenerator {
       DEFAULT_STYLE_ORDER,
     ]);
     this.inlineStyles = inlineStyles;
+    this.inlineStyleFn = options.inlineStyleFn;
     this.styleOrder = styleOrder;
   }
 
@@ -334,6 +339,25 @@ class MarkupGenerator {
     this.output.push(INDENT.repeat(this.indentLevel));
   }
 
+  withCustomInlineStyles(content, styleSet) {
+    if (!this.inlineStyleFn) {
+      return content;
+    }
+
+    const renderConfig = this.inlineStyleFn(styleSet);
+    if (!renderConfig) {
+      return content;
+    }
+
+    const {element = 'span', attributes, style} = renderConfig;
+    const attrString = stringifyAttrs({
+      ...attributes,
+      style: style && styleToCSS(style),
+    });
+
+    return `<${element}${attrString}>${content}</${element}>`;
+  }
+
   renderBlockContent(block: ContentBlock): string {
     let blockType = block.getType();
     let text = block.getText();
@@ -372,7 +396,8 @@ class MarkupGenerator {
                 content = `<${element}${attrString}>${content}</${element}>`;
               }
             }
-            return content;
+
+            return this.withCustomInlineStyles(content, styleSet);
           })
           .join('');
         let entity = entityKey ? this.contentState.getEntity(entityKey) : null;