diff --git a/packages/draft-js-import-element/README.md b/packages/draft-js-import-element/README.md index 9ecf69bb..2932993c 100644 --- 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 index 2f2b546c..cc245369 100644 --- 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 = {[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 index f3df9704..18071c56 100644 --- 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 index e3edd157..eae8534f 100644 --- 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;