🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

draftjs-to-html

Package Overview
Dependencies
Maintainers
1
Versions
55
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

draftjs-to-html - npm Package Compare versions

Comparing version

0.8.3
to
0.8.4

rollup.config.js
yalc.lock
yarn-error.log

616

lib/draftjs-to-html.js

@@ -1,1 +0,615 @@

!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.draftjsToHtml=e():t.draftjsToHtml=e()}("undefined"!=typeof self?self:this,function(){return function(t){function e(r){if(n[r])return n[r].exports;var u=n[r]={i:r,l:!1,exports:{}};return t[r].call(u.exports,u,u.exports,e),u.l=!0,u.exports}var n={};return e.m=t,e.c=n,e.d=function(t,n,r){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:r})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=1)}([function(t,e,n){"use strict";function r(t){return t&&S[t]}function u(t){var e="";return(0,L.forEach)(t,function(t,n){n&&(e+=t+":"+n+";")}),e}function a(t,e){var n=[];if(e)for(var r=0,u=0,a=t,o=e.trigger||"#",i=e.separator||" ";a.length>0&&u>=0;)if(a[0]===o?(u=0,r=0,a=a.substr(o.length)):(u=a.indexOf(i+o))>=0&&(a=a.substr(u+(i+o).length),r+=u+i.length),u>=0){var s=a.indexOf(i)>=0?a.indexOf(i):a.length,f=a.substr(0,s);f&&f.length>0&&n.push({offset:r,length:f.length+o.length,type:"HASHTAG"}),r+=o.length}return n}function o(t,e){var n=[],r=0,u=t.entityRanges.map(function(t){return{offset:t.offset,length:t.length,key:t.key,type:"ENTITY"}});return u=u.concat(a(t.text,e)),u=u.sort(function(t,e){return t.offset-e.offset}),u.forEach(function(t){t.offset>r&&n.push({start:r,end:t.offset}),n.push({start:t.offset,end:t.offset+t.length,entityKey:t.key,type:t.type}),r=t.offset+t.length}),r<t.text.length&&n.push({start:r,end:t.text.length}),n}function i(t){return!!(t.entityRanges.length>0&&(0,L.isEmptyString)(t.text)||"atomic"===t.type)}function s(t){var e=t.text,n=t.inlineStyleRanges,r={BOLD:new Array(e.length),ITALIC:new Array(e.length),UNDERLINE:new Array(e.length),STRIKETHROUGH:new Array(e.length),CODE:new Array(e.length),SUPERSCRIPT:new Array(e.length),SUBSCRIPT:new Array(e.length),COLOR:new Array(e.length),BGCOLOR:new Array(e.length),FONTSIZE:new Array(e.length),FONTFAMILY:new Array(e.length),length:e.length};return n&&n.length>0&&n.forEach(function(t){for(var e=t.offset,n=e+t.length,u=e;u<n;u+=1)0===t.style.indexOf("color-")?r.COLOR[u]=t.style.substring(6):0===t.style.indexOf("bgcolor-")?r.BGCOLOR[u]=t.style.substring(8):0===t.style.indexOf("fontsize-")?r.FONTSIZE[u]=t.style.substring(9):0===t.style.indexOf("fontfamily-")?r.FONTFAMILY[u]=t.style.substring(11):r[t.style]&&(r[t.style][u]=!0)}),r}function f(t,e){var n={};return t.COLOR[e]&&(n.COLOR=t.COLOR[e]),t.BGCOLOR[e]&&(n.BGCOLOR=t.BGCOLOR[e]),t.FONTSIZE[e]&&(n.FONTSIZE=t.FONTSIZE[e]),t.FONTFAMILY[e]&&(n.FONTFAMILY=t.FONTFAMILY[e]),t.UNDERLINE[e]&&(n.UNDERLINE=!0),t.ITALIC[e]&&(n.ITALIC=!0),t.BOLD[e]&&(n.BOLD=!0),t.STRIKETHROUGH[e]&&(n.STRIKETHROUGH=!0),t.CODE[e]&&(n.CODE=!0),t.SUBSCRIPT[e]&&(n.SUBSCRIPT=!0),t.SUPERSCRIPT[e]&&(n.SUPERSCRIPT=!0),n}function l(t,e,n){var r=!0;return n>0&&n<t.length?e.forEach(function(e){r=r&&t[e][n]===t[e][n-1]}):r=!1,r}function h(t,e){return"BOLD"===t?"<strong>"+e+"</strong>":"ITALIC"===t?"<em>"+e+"</em>":"UNDERLINE"===t?"<ins>"+e+"</ins>":"STRIKETHROUGH"===t?"<del>"+e+"</del>":"CODE"===t?"<code>"+e+"</code>":"SUPERSCRIPT"===t?"<sup>"+e+"</sup>":"SUBSCRIPT"===t?"<sub>"+e+"</sub>":e}function c(t){if(t&&t.length>0){return t.map(function(t){switch(t){case"\n":return"<br>";case"&":return"&amp;";case"<":return"&lt;";case">":return"&gt;";default:return t}}).join("")}return""}function p(t,e){if(t&&(t.COLOR||t.BGCOLOR||t.FONTSIZE||t.FONTFAMILY)){var n='style="';return t.COLOR&&(n+="color: "+t.COLOR+";"),t.BGCOLOR&&(n+="background-color: "+t.BGCOLOR+";"),t.FONTSIZE&&(n+="font-size: "+t.FONTSIZE+(/^\d+$/.test(t.FONTSIZE)?"px":"")+";"),t.FONTFAMILY&&(n+="font-family: "+t.FONTFAMILY+";"),"<span "+(n+='"')+">"+e+"</span>"}return e}function g(t,e,n,r){var u=t[e];if("function"==typeof r){var a=r(u,n);if(a)return a}if("MENTION"===u.type)return'<a href="'+u.data.url+'" class="wysiwyg-mention" data-mention data-value="'+u.data.value+'">'+n+"</a>";if("LINK"===u.type){var o=u.data.targetOption||"_self";return'<a href="'+u.data.url+'" target="'+o+'">'+n+"</a>"}return"IMAGE"===u.type?'<img src="'+u.data.src+'" alt="'+u.data.alt+'" style="float:'+(u.data.alignment||"none")+";height: "+u.data.height+";width: "+u.data.width+'"/>':"EMBEDDED_LINK"===u.type?'<iframe width="'+u.data.width+'" height="'+u.data.height+'" src="'+u.data.src+'" frameBorder="0"></iframe>':n}function d(t,e,n,r){var u=[],a=t.text;if(a.length>0)for(var o=s(t),i=void 0,h=n;h<r;h+=1)h!==n&&l(o,e,h)?(i.text.push(a[h]),i.end=h+1):(i={styles:f(o,h),text:[a[h]],start:h,end:h+1},u.push(i));return u}function y(t){if(t){for(var e=t,n=0;n<e.length&&" "===t[n];n+=1)e=e.replace(" ","&nbsp;");return e}return t}function O(t){if(t){for(var e=t,n=e.length-1;n>=0&&" "===e[n];n-=1)e=e.substring(0,n)+"&nbsp;"+e.substring(n+1);return e}return t}function T(t){var e=t.styles,n=t.text,r=c(n);return(0,L.forEach)(e,function(t,e){r=h(t,r,e)}),r}function I(t,e){var n=d(t,["BOLD","ITALIC","UNDERLINE","STRIKETHROUGH","CODE","SUPERSCRIPT","SUBSCRIPT"],e.start,e.end),r="";return n.forEach(function(t){r+=T(t)}),r=p(e.styles,r)}function v(t,e,n,r){var u=[];d(t,["COLOR","BGCOLOR","FONTSIZE","FONTFAMILY"],n.start,n.end).forEach(function(e){u.push(I(t,e))});var a=u.join("");return"ENTITY"===n.type?void 0!==n.entityKey&&null!==n.entityKey&&(a=g(e,n.entityKey,a,r)):"HASHTAG"===n.type&&(a='<a href="'+a+'" class="wysiwyg-hashtag">'+a+"</a>"),a}function E(t,e,n,r){var u=[],a=o(t,n);return a.forEach(function(n,o){var i=v(t,e,n,r);0===o&&(i=y(i)),o===a.length-1&&(i=O(i)),u.push(i)}),u.join("")}function R(t,e,n,a,o){var s=[];if(i(t))s.push(g(e,t.entityRanges[0].key,void 0,o));else{var f=r(t.type);if(f){s.push("<"+f);var l=u(t.data);l&&s.push(' style="'+l+'"'),a&&s.push(' dir = "auto"'),s.push(">"),s.push(E(t,e,n,o)),s.push("</"+f+">")}}return s.push("\n"),s.join("")}Object.defineProperty(e,"__esModule",{value:!0}),e.getBlockTag=r,e.getBlockStyle=u,e.getStylesAtOffset=f,e.sameStyleAsPrevious=l,e.addInlineStyleMarkup=h,e.addStylePropertyMarkup=p,e.trimLeadingZeros=y,e.trimTrailingZeros=O,e.getBlockInnerMarkup=E,e.getBlockMarkup=R;var L=n(2),S={unstyled:"p","header-one":"h1","header-two":"h2","header-three":"h3","header-four":"h4","header-five":"h5","header-six":"h6","unordered-list-item":"ul","ordered-list-item":"ol",blockquote:"blockquote",code:"pre"}},function(t,e,n){"use strict";function r(t,e,n,r){var o=[];if(t){var i=t.blocks,s=t.entityMap;if(i&&i.length>0){var f=[];if(i.forEach(function(t){if((0,a.isList)(t.type))f.push(t);else{if(f.length>0){var i=(0,a.getListMarkup)(f,s,e,r);o.push(i),f=[]}var l=(0,u.getBlockMarkup)(t,s,e,n,r);o.push(l)}}),f.length>0){var l=(0,a.getListMarkup)(f,s,e,n,r);o.push(l),f=[]}}}return o.join("")}Object.defineProperty(e,"__esModule",{value:!0}),e.default=r;var u=n(0),a=n(3)},function(t,e,n){"use strict";function r(t,e){if(t)for(var n in t)({}).hasOwnProperty.call(t,n)&&e(n,t[n])}function u(t){return void 0===t||null===t||0===t.length||0===t.trim().length}Object.defineProperty(e,"__esModule",{value:!0}),e.forEach=r,e.isEmptyString=u},function(t,e,n){"use strict";function r(t){return"unordered-list-item"===t||"ordered-list-item"===t}function u(t,e,n,r,o){var i=[],s=[],f=void 0;return t.forEach(function(t){var l=!1;if(f?f.type!==t.type?(i.push("</"+(0,a.getBlockTag)(f.type)+">\n"),i.push("<"+(0,a.getBlockTag)(t.type)+">\n")):f.depth===t.depth?s&&s.length>0&&(i.push(u(s,e,n,r,o)),s=[]):(l=!0,s.push(t)):i.push("<"+(0,a.getBlockTag)(t.type)+">\n"),!l){i.push("<li");var h=(0,a.getBlockStyle)(t.data);h&&i.push(' style="'+h+'"'),r&&i.push(' dir = "auto"'),i.push(">"),i.push((0,a.getBlockInnerMarkup)(t,e,n,o)),i.push("</li>\n"),f=t}}),s&&s.length>0&&i.push(u(s,e,n,r,o)),i.push("</"+(0,a.getBlockTag)(f.type)+">\n"),i.join("")}Object.defineProperty(e,"__esModule",{value:!0}),e.isList=r,e.getListMarkup=u;var a=n(0)}])});
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global.draftjsToHtml = factory());
}(this, (function () { 'use strict';
/**
* Utility function to execute callback for eack key->value pair.
*/
function forEach(obj, callback) {
if (obj) {
for (var key in obj) {
// eslint-disable-line no-restricted-syntax
if ({}.hasOwnProperty.call(obj, key)) {
callback(key, obj[key]);
}
}
}
}
/**
* The function returns true if the string passed to it has no content.
*/
function isEmptyString(str) {
if (str === undefined || str === null || str.length === 0 || str.trim().length === 0) {
return true;
}
return false;
}
/**
* Mapping block-type to corresponding html tag.
*/
var blockTypesMapping = {
unstyled: 'p',
'header-one': 'h1',
'header-two': 'h2',
'header-three': 'h3',
'header-four': 'h4',
'header-five': 'h5',
'header-six': 'h6',
'unordered-list-item': 'ul',
'ordered-list-item': 'ol',
blockquote: 'blockquote',
code: 'pre'
};
/**
* Function will return HTML tag for a block.
*/
function getBlockTag(type) {
return type && blockTypesMapping[type];
}
/**
* Function will return style string for a block.
*/
function getBlockStyle(data) {
var styles = '';
forEach(data, function (key, value) {
if (value) {
styles += key + ':' + value + ';';
}
});
return styles;
}
/**
* The function returns an array of hashtag-sections in blocks.
* These will be areas in block which have hashtags applicable to them.
*/
function getHashtagRanges(blockText, hashtagConfig) {
var sections = [];
if (hashtagConfig) {
var counter = 0;
var startIndex = 0;
var text = blockText;
var trigger = hashtagConfig.trigger || '#';
var separator = hashtagConfig.separator || ' ';
for (; text.length > 0 && startIndex >= 0;) {
if (text[0] === trigger) {
startIndex = 0;
counter = 0;
text = text.substr(trigger.length);
} else {
startIndex = text.indexOf(separator + trigger);
if (startIndex >= 0) {
text = text.substr(startIndex + (separator + trigger).length);
counter += startIndex + separator.length;
}
}
if (startIndex >= 0) {
var endIndex = text.indexOf(separator) >= 0 ? text.indexOf(separator) : text.length;
var hashtag = text.substr(0, endIndex);
if (hashtag && hashtag.length > 0) {
sections.push({
offset: counter,
length: hashtag.length + trigger.length,
type: 'HASHTAG'
});
}
counter += trigger.length;
}
}
}
return sections;
}
/**
* The function returns an array of entity-sections in blocks.
* These will be areas in block which have same entity or no entity applicable to them.
*/
function getSections(block, hashtagConfig) {
var sections = [];
var lastOffset = 0;
var sectionRanges = block.entityRanges.map(function (range) {
var offset = range.offset,
length = range.length,
key = range.key;
return {
offset: offset,
length: length,
key: key,
type: 'ENTITY'
};
});
sectionRanges = sectionRanges.concat(getHashtagRanges(block.text, hashtagConfig));
sectionRanges = sectionRanges.sort(function (s1, s2) {
return s1.offset - s2.offset;
});
sectionRanges.forEach(function (r) {
if (r.offset > lastOffset) {
sections.push({
start: lastOffset,
end: r.offset
});
}
sections.push({
start: r.offset,
end: r.offset + r.length,
entityKey: r.key,
type: r.type
});
lastOffset = r.offset + r.length;
});
if (lastOffset < block.text.length) {
sections.push({
start: lastOffset,
end: block.text.length
});
}
return sections;
}
/**
* Function to check if the block is an atomic entity block.
*/
function isAtomicEntityBlock(block) {
if (block.entityRanges.length > 0 && (isEmptyString(block.text) || block.type === 'atomic')) {
return true;
}
return false;
}
/**
* The function will return array of inline styles applicable to the block.
*/
function getStyleArrayForBlock(block) {
var text = block.text,
inlineStyleRanges = block.inlineStyleRanges;
var inlineStyles = {
BOLD: new Array(text.length),
ITALIC: new Array(text.length),
UNDERLINE: new Array(text.length),
STRIKETHROUGH: new Array(text.length),
CODE: new Array(text.length),
SUPERSCRIPT: new Array(text.length),
SUBSCRIPT: new Array(text.length),
COLOR: new Array(text.length),
BGCOLOR: new Array(text.length),
FONTSIZE: new Array(text.length),
FONTFAMILY: new Array(text.length),
length: text.length
};
if (inlineStyleRanges && inlineStyleRanges.length > 0) {
inlineStyleRanges.forEach(function (range) {
var offset = range.offset;
var length = offset + range.length;
for (var i = offset; i < length; i += 1) {
if (range.style.indexOf('color-') === 0) {
inlineStyles.COLOR[i] = range.style.substring(6);
} else if (range.style.indexOf('bgcolor-') === 0) {
inlineStyles.BGCOLOR[i] = range.style.substring(8);
} else if (range.style.indexOf('fontsize-') === 0) {
inlineStyles.FONTSIZE[i] = range.style.substring(9);
} else if (range.style.indexOf('fontfamily-') === 0) {
inlineStyles.FONTFAMILY[i] = range.style.substring(11);
} else if (inlineStyles[range.style]) {
inlineStyles[range.style][i] = true;
}
}
});
}
return inlineStyles;
}
/**
* The function will return inline style applicable at some offset within a block.
*/
function getStylesAtOffset(inlineStyles, offset) {
var styles = {};
if (inlineStyles.COLOR[offset]) {
styles.COLOR = inlineStyles.COLOR[offset];
}
if (inlineStyles.BGCOLOR[offset]) {
styles.BGCOLOR = inlineStyles.BGCOLOR[offset];
}
if (inlineStyles.FONTSIZE[offset]) {
styles.FONTSIZE = inlineStyles.FONTSIZE[offset];
}
if (inlineStyles.FONTFAMILY[offset]) {
styles.FONTFAMILY = inlineStyles.FONTFAMILY[offset];
}
if (inlineStyles.UNDERLINE[offset]) {
styles.UNDERLINE = true;
}
if (inlineStyles.ITALIC[offset]) {
styles.ITALIC = true;
}
if (inlineStyles.BOLD[offset]) {
styles.BOLD = true;
}
if (inlineStyles.STRIKETHROUGH[offset]) {
styles.STRIKETHROUGH = true;
}
if (inlineStyles.CODE[offset]) {
styles.CODE = true;
}
if (inlineStyles.SUBSCRIPT[offset]) {
styles.SUBSCRIPT = true;
}
if (inlineStyles.SUPERSCRIPT[offset]) {
styles.SUPERSCRIPT = true;
}
return styles;
}
/**
* Function returns true for a set of styles if the value of these styles at an offset
* are same as that on the previous offset.
*/
function sameStyleAsPrevious(inlineStyles, styles, index) {
var sameStyled = true;
if (index > 0 && index < inlineStyles.length) {
styles.forEach(function (style) {
sameStyled = sameStyled && inlineStyles[style][index] === inlineStyles[style][index - 1];
});
} else {
sameStyled = false;
}
return sameStyled;
}
/**
* Function returns html for text depending on inline style tags applicable to it.
*/
function addInlineStyleMarkup(style, content) {
if (style === 'BOLD') {
return '<strong>' + content + '</strong>';
} else if (style === 'ITALIC') {
return '<em>' + content + '</em>';
} else if (style === 'UNDERLINE') {
return '<ins>' + content + '</ins>';
} else if (style === 'STRIKETHROUGH') {
return '<del>' + content + '</del>';
} else if (style === 'CODE') {
return '<code>' + content + '</code>';
} else if (style === 'SUPERSCRIPT') {
return '<sup>' + content + '</sup>';
} else if (style === 'SUBSCRIPT') {
return '<sub>' + content + '</sub>';
}
return content;
}
/**
* The function returns text for given section of block after doing required character replacements.
*/
function getSectionText(text) {
if (text && text.length > 0) {
var chars = text.map(function (ch) {
switch (ch) {
case '\n':
return '<br>';
case '&':
return '&amp;';
case '<':
return '&lt;';
case '>':
return '&gt;';
default:
return ch;
}
});
return chars.join('');
}
return '';
}
/**
* Function returns html for text depending on inline style tags applicable to it.
*/
function addStylePropertyMarkup(styles, text) {
if (styles && (styles.COLOR || styles.BGCOLOR || styles.FONTSIZE || styles.FONTFAMILY)) {
var styleString = 'style="';
if (styles.COLOR) {
styleString += 'color: ' + styles.COLOR + ';';
}
if (styles.BGCOLOR) {
styleString += 'background-color: ' + styles.BGCOLOR + ';';
}
if (styles.FONTSIZE) {
styleString += 'font-size: ' + styles.FONTSIZE + (/^\d+$/.test(styles.FONTSIZE) ? 'px' : '') + ';';
}
if (styles.FONTFAMILY) {
styleString += 'font-family: ' + styles.FONTFAMILY + ';';
}
styleString += '"';
return '<span ' + styleString + '>' + text + '</span>';
}
return text;
}
/**
* Function will return markup for Entity.
*/
function getEntityMarkup(entityMap, entityKey, text, customEntityTransform) {
var entity = entityMap[entityKey];
if (typeof customEntityTransform === 'function') {
var html = customEntityTransform(entity, text);
if (html) {
return html;
}
}
if (entity.type === 'MENTION') {
return '<a href="' + entity.data.url + '" class="wysiwyg-mention" data-mention data-value="' + entity.data.value + '">' + text + '</a>';
}
if (entity.type === 'LINK') {
var targetOption = entity.data.targetOption || '_self';
return '<a href="' + entity.data.url + '" target="' + targetOption + '">' + text + '</a>';
}
if (entity.type === 'IMAGE') {
return '<img src="' + entity.data.src + '" alt="' + entity.data.alt + '" style="float:' + (entity.data.alignment || 'none') + ';height: ' + entity.data.height + ';width: ' + entity.data.width + '"/>';
}
if (entity.type === 'EMBEDDED_LINK') {
return '<iframe width="' + entity.data.width + '" height="' + entity.data.height + '" src="' + entity.data.src + '" frameBorder="0"></iframe>';
}
return text;
}
/**
* For a given section in a block the function will return a further list of sections,
* with similar inline styles applicable to them.
*/
function getInlineStyleSections(block, styles, start, end) {
var styleSections = [];
var text = block.text;
if (text.length > 0) {
var inlineStyles = getStyleArrayForBlock(block);
var section = void 0;
for (var i = start; i < end; i += 1) {
if (i !== start && sameStyleAsPrevious(inlineStyles, styles, i)) {
section.text.push(text[i]);
section.end = i + 1;
} else {
section = {
styles: getStylesAtOffset(inlineStyles, i),
text: [text[i]],
start: i,
end: i + 1
};
styleSections.push(section);
}
}
}
return styleSections;
}
/**
* Replace leading blank spaces by &nbsp;
*/
function trimLeadingZeros(sectionText) {
if (sectionText) {
var replacedText = sectionText;
for (var i = 0; i < replacedText.length; i += 1) {
if (sectionText[i] === ' ') {
replacedText = replacedText.replace(' ', '&nbsp;');
} else {
break;
}
}
return replacedText;
}
return sectionText;
}
/**
* Replace trailing blank spaces by &nbsp;
*/
function trimTrailingZeros(sectionText) {
if (sectionText) {
var replacedText = sectionText;
for (var i = replacedText.length - 1; i >= 0; i -= 1) {
if (replacedText[i] === ' ') {
replacedText = replacedText.substring(0, i) + '&nbsp;' + replacedText.substring(i + 1);
} else {
break;
}
}
return replacedText;
}
return sectionText;
}
/**
* The method returns markup for section to which inline styles
* like BOLD, ITALIC, UNDERLINE, STRIKETHROUGH, CODE, SUPERSCRIPT, SUBSCRIPT are applicable.
*/
function getStyleTagSectionMarkup(styleSection) {
var styles = styleSection.styles,
text = styleSection.text;
var content = getSectionText(text);
forEach(styles, function (style, value) {
content = addInlineStyleMarkup(style, content, value);
});
return content;
}
/**
* The method returns markup for section to which inline styles
like color, background-color, font-size are applicable.
*/
function getInlineStyleSectionMarkup(block, styleSection) {
var styleTagSections = getInlineStyleSections(block, ['BOLD', 'ITALIC', 'UNDERLINE', 'STRIKETHROUGH', 'CODE', 'SUPERSCRIPT', 'SUBSCRIPT'], styleSection.start, styleSection.end);
var styleSectionText = '';
styleTagSections.forEach(function (stylePropertySection) {
styleSectionText += getStyleTagSectionMarkup(stylePropertySection);
});
styleSectionText = addStylePropertyMarkup(styleSection.styles, styleSectionText);
return styleSectionText;
}
/*
* The method returns markup for an entity section.
* An entity section is a continuous section in a block
* to which same entity or no entity is applicable.
*/
function getSectionMarkup(block, entityMap, section, customEntityTransform) {
var entityInlineMarkup = [];
var inlineStyleSections = getInlineStyleSections(block, ['COLOR', 'BGCOLOR', 'FONTSIZE', 'FONTFAMILY'], section.start, section.end);
inlineStyleSections.forEach(function (styleSection) {
entityInlineMarkup.push(getInlineStyleSectionMarkup(block, styleSection));
});
var sectionText = entityInlineMarkup.join('');
if (section.type === 'ENTITY') {
if (section.entityKey !== undefined && section.entityKey !== null) {
sectionText = getEntityMarkup(entityMap, section.entityKey, sectionText, customEntityTransform); // eslint-disable-line max-len
}
} else if (section.type === 'HASHTAG') {
sectionText = '<a href="' + sectionText + '" class="wysiwyg-hashtag">' + sectionText + '</a>';
}
return sectionText;
}
/**
* Function will return the markup for block preserving the inline styles and
* special characters like newlines or blank spaces.
*/
function getBlockInnerMarkup(block, entityMap, hashtagConfig, customEntityTransform) {
var blockMarkup = [];
var sections = getSections(block, hashtagConfig);
sections.forEach(function (section, index) {
var sectionText = getSectionMarkup(block, entityMap, section, customEntityTransform);
if (index === 0) {
sectionText = trimLeadingZeros(sectionText);
}
if (index === sections.length - 1) {
sectionText = trimTrailingZeros(sectionText);
}
blockMarkup.push(sectionText);
});
return blockMarkup.join('');
}
/**
* Function will return html for the block.
*/
function getBlockMarkup(block, entityMap, hashtagConfig, directional, customEntityTransform) {
var blockHtml = [];
if (isAtomicEntityBlock(block)) {
blockHtml.push(getEntityMarkup(entityMap, block.entityRanges[0].key, undefined, customEntityTransform));
} else {
var blockTag = getBlockTag(block.type);
if (blockTag) {
blockHtml.push('<' + blockTag);
var blockStyle = getBlockStyle(block.data);
if (blockStyle) {
blockHtml.push(' style="' + blockStyle + '"');
}
if (directional) {
blockHtml.push(' dir = "auto"');
}
blockHtml.push('>');
blockHtml.push(getBlockInnerMarkup(block, entityMap, hashtagConfig, customEntityTransform));
blockHtml.push('</' + blockTag + '>');
}
}
blockHtml.push('\n');
return blockHtml.join('');
}
/**
* Function to check if a block is of type list.
*/
function isList(blockType) {
return blockType === 'unordered-list-item' || blockType === 'ordered-list-item';
}
/**
* Function will return html markup for a list block.
*/
function getListMarkup(listBlocks, entityMap, hashtagConfig, directional, customEntityTransform) {
var listHtml = [];
var nestedListBlock = [];
var previousBlock = void 0;
listBlocks.forEach(function (block) {
var nestedBlock = false;
if (!previousBlock) {
listHtml.push('<' + getBlockTag(block.type) + '>\n');
} else if (previousBlock.type !== block.type) {
listHtml.push('</' + getBlockTag(previousBlock.type) + '>\n');
listHtml.push('<' + getBlockTag(block.type) + '>\n');
} else if (previousBlock.depth === block.depth) {
if (nestedListBlock && nestedListBlock.length > 0) {
listHtml.push(getListMarkup(nestedListBlock, entityMap, hashtagConfig, directional, customEntityTransform));
nestedListBlock = [];
}
} else {
nestedBlock = true;
nestedListBlock.push(block);
}
if (!nestedBlock) {
listHtml.push('<li');
var blockStyle = getBlockStyle(block.data);
if (blockStyle) {
listHtml.push(' style="' + blockStyle + '"');
}
if (directional) {
listHtml.push(' dir = "auto"');
}
listHtml.push('>');
listHtml.push(getBlockInnerMarkup(block, entityMap, hashtagConfig, customEntityTransform));
listHtml.push('</li>\n');
previousBlock = block;
}
});
if (nestedListBlock && nestedListBlock.length > 0) {
listHtml.push(getListMarkup(nestedListBlock, entityMap, hashtagConfig, directional, customEntityTransform));
}
listHtml.push('</' + getBlockTag(previousBlock.type) + '>\n');
return listHtml.join('');
}
/**
* The function will generate html markup for given draftjs editorContent.
*/
function draftToHtml(editorContent, hashtagConfig, directional, customEntityTransform) {
var html = [];
if (editorContent) {
var blocks = editorContent.blocks,
entityMap = editorContent.entityMap;
if (blocks && blocks.length > 0) {
var listBlocks = [];
blocks.forEach(function (block) {
if (isList(block.type)) {
listBlocks.push(block);
} else {
if (listBlocks.length > 0) {
var listHtml = getListMarkup(listBlocks, entityMap, hashtagConfig, customEntityTransform); // eslint-disable-line max-len
html.push(listHtml);
listBlocks = [];
}
var blockHtml = getBlockMarkup(block, entityMap, hashtagConfig, directional, customEntityTransform);
html.push(blockHtml);
}
});
if (listBlocks.length > 0) {
var listHtml = getListMarkup(listBlocks, entityMap, hashtagConfig, directional, customEntityTransform); // eslint-disable-line max-len
html.push(listHtml);
listBlocks = [];
}
}
}
return html.join('');
}
return draftToHtml;
})));

40

package.json
{
"name": "draftjs-to-html",
"version": "0.8.3",
"version": "0.8.4",
"description": "A library for draftjs to html conversion.",

@@ -8,6 +8,5 @@ "main": "lib/draftjs-to-html.js",

"babel-core": "^6.26.0",
"babel-eslint": "^8.0.3",
"babel-loader": "^7.1.2",
"babel-eslint": "^8.2.1",
"babel-plugin-transform-flow-strip-types": "^6.22.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",

@@ -18,19 +17,18 @@ "babel-preset-stage-0": "^6.24.1",

"draft-js": "^0.10.4",
"enzyme": "^3.2.0",
"eslint": "^4.12.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-import": "2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-mocha": "^4.11.0",
"eslint-plugin-react": "^7.5.1",
"flow-bin": "^0.60.1",
"flow-bin": "^0.63.1",
"jsdom": "^11.5.1",
"mocha": "^4.0.1",
"react": "^16.2.0",
"react-addons-test-utils": "^15.6.2",
"react-dom": "^16.2.0",
"rimraf": "^2.6.2",
"sinon": "^4.1.2",
"webpack": "^3.9.1",
"webpack-dev-middleware": "^1.12.2"
"rollup": "^0.53.3",
"rollup-plugin-babel": "^3.0.3",
"sinon": "^4.1.4",
"size-limit": "^0.14.1"
},

@@ -42,8 +40,7 @@ "repository": {

"scripts": {
"size": "size-limit",
"clean": "rimraf lib",
"build:webpack":
"NODE_ENV=production webpack --config config/webpack.prod.config.js",
"build": "npm run clean && npm run build:webpack",
"test":
"mocha --compilers js:config/test-compiler.js config/test-setup.js js/**/*Test.js",
"build": "npm run clean && rollup -c && npm run size",
"dev": "rollup -c -w",
"test": "NODE_ENV=test mocha --require config/test-compiler.js config/test-setup.js js/**/*Test.js",
"lint": "eslint js",

@@ -54,3 +51,10 @@ "flow": "flow; test $? -eq 0 -o $? -eq 2",

"author": "Jyoti Puri",
"license": "MIT"
"license": "MIT",
"size-limit": [
{
"path": "lib/*",
"webpack": false,
"limit": "4.5 KB"
}
]
}

2

readme.md

@@ -20,3 +20,3 @@ # DraftJS TO HTML

const markup = draftToHtml(
contentState,
rawContentState,
hashtagConfig,

@@ -23,0 +23,0 @@ directional,

.babelrc

Sorry, the diff of this file is not supported yet

.eslintrc

Sorry, the diff of this file is not supported yet

yarn.lock

Sorry, the diff of this file is not supported yet