Allow inline elements configuration (#141)

sstur · Jun 3, 2019 · 24c622b · 24c622b
1 parent fd9582c
commit 24c622b
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 1 deletion.
diff --git a/packages/draft-js-import-element/README.md b/packages/draft-js-import-element/README.md
@@ -65,6 +65,13 @@ stateFromElement(element, {
 });
 ```
 
+- `inlineElements`: Array of (lowercase) tag names which should be handled as inline tags. Example:
+```js
+stateFromElement(element, {
+  inlineElements: ['my-first-custom-tag', 'my-second-custom-tag']
+});
+```
+
 ## License
 
 This software is [BSD Licensed](/LICENSE).
diff --git a/packages/draft-js-import-element/src/stateFromElement.js b/packages/draft-js-import-element/src/stateFromElement.js
@@ -83,6 +83,7 @@ type Options = {
   blockTypes?: {[key: string]: string};
   customBlockFn?: CustomBlockFn;
   customInlineFn?: CustomInlineFn;
+  inlineElements?: string[];
 };
 type DataMap<T> = {[key: string]: T};
 
@@ -403,10 +404,12 @@ class ContentGenerator {
 
   processNode(node: DOMNode) {
     if (node.nodeType === NODE_TYPE_ELEMENT) {
+      let {inlineElements} = this.options;
       // $FlowIssue
       let element: DOMElement = node;
       let tagName = element.nodeName.toLowerCase();
-      if (INLINE_ELEMENTS.hasOwnProperty(tagName)) {
+      if (INLINE_ELEMENTS.hasOwnProperty(tagName)
+        || (inlineElements && inlineElements.find((el) => el === tagName))) {
         this.processInlineElement(element);
       } else {
         this.processBlockElement(element);

diff --git a/packages/draft-js-import-html/src/stateFromHTML.js b/packages/draft-js-import-html/src/stateFromHTML.js
@@ -12,6 +12,7 @@ type Options = {
   blockTypes?: {[key: string]: string};
   customBlockFn?: CustomBlockFn;
   customInlineFn?: CustomInlineFn;
+  inlineElements: string[];
 };
 
 const defaultOptions: Options = {};

diff --git a/packages/draft-js-import-html/typings/index.d.ts b/packages/draft-js-import-html/typings/index.d.ts
@@ -26,6 +26,7 @@ declare module 'draft-js-import-html' {
         elementStyles?: { [styleName: string]: string };
         customBlockFn?: CustomBlockFn;
         customInlineFn?: CustomInlineFn;
+        inlineElements?: string []
     }
 
     export function stateFromHTML(html: string, options?: Options): draftjs.ContentState;