Allow multiple inlineStyles to be returned by customInlineFn sstur#155

msk-psp · Jul 29, 2020 · 97e75f9 · 97e75f9
1 parent 7318dce
commit 97e75f9
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 1 deletion.
diff --git a/packages/draft-js-import-element/src/__tests__/stateFromElement-test.js b/packages/draft-js-import-element/src/__tests__/stateFromElement-test.js
@@ -146,6 +146,41 @@ describe('stateFromElement', () => {
     });
   });
 
+  it('should return multiple style from customInlineFn', () => {
+    let element = new ElementNode('div', [], [
+      new ElementNode(
+        'span',
+        [{style: 'font-family', value: 'sans-serif'},{style: 'font-size', value: '12px'},],
+        [new TextNode('Hello')]
+      )
+    ]);
+    let options = {
+      customInlineFn(el, {Style}) {
+        if (el.tagName === 'SPAN') {
+          return Style(['CUSTOM_STYLE_1', 'CUSTOM_STYLE_2']);
+        }
+      },
+    };
+    let contentState = stateFromElement(element, options);
+    let rawContentState = removeBlockKeys(convertToRaw(contentState));
+    expect(rawContentState).toEqual({
+      entityMap: {},
+      blocks: [
+        {
+          text: 'Hello',
+          type: 'unstyled',
+          depth: 0,
+          inlineStyleRanges: [
+            {offset: 0, length: 5, style: 'CUSTOM_STYLE_1'},
+            {offset: 0, length: 5, style: 'CUSTOM_STYLE_2'}
+          ],
+          entityRanges: [],
+          data: {},
+        },
+      ],
+    });
+  });
+
   it('should support option elementStyles', () => {
     let textNode = new TextNode('Superscript');
     let element = new ElementNode('sup', [], [textNode]);

diff --git a/packages/draft-js-import-element/src/stateFromElement.js b/packages/draft-js-import-element/src/stateFromElement.js
@@ -347,7 +347,7 @@ class ContentGenerator {
     if (customInline != null) {
       switch (customInline.type) {
         case 'STYLE': {
-          style = style.add(customInline.style);
+          [].concat(customInline.style).forEach(customStyle => style = style.add(customStyle));
           break;
         }
         case 'ENTITY': {