braft-convert - npm Package Compare versions

Comparing version 1.7.5 to 1.8.1

dist/configs.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.getToHTMLConfig = exports.getFromHTMLConfig = exports.blocks = exports.getHexColor = undefined;
+exports.mergeStyledSpans = exports.getToHTMLConfig = exports.getFromHTMLConfig = exports.blocks = exports.getHexColor = exports.defaultFontFamilies = undefined;
 
@@ -165,2 +165,19 @@ var _react = require("react");
 
+var defaultFontFamilies = exports.defaultFontFamilies = [{
+  name: 'Araial',
+  family: 'Arial, Helvetica, sans-serif'
+}, {
+  name: 'Georgia',
+  family: 'Georgia, serif'
+}, {
+  name: 'Impact',
+  family: 'Impact, serif'
+}, {
+  name: 'Monospace',
+  family: '"Courier New", Courier, monospace'
+}, {
+  name: 'Tahoma',
+  family: "tahoma, arial, 'Hiragino Sans GB', 宋体, sans-serif"
+}];
+
 var getHexColor = exports.getHexColor = function getHexColor(color) {
@@ -221,7 +238,10 @@
     var imageWrapStyle = {};
+    var styledClassName = '';
 
     if (float) {
       imageWrapStyle.float = float;
+      styledClassName += ' float-' + float;
     } else if (alignment) {
       imageWrapStyle.textAlign = alignment;
+      styledClassName += ' align-' + alignment;
     }
@@ -232,3 +252,3 @@
         "div",
-        { className: "media-wrap image-wrap", style: imageWrapStyle },
+        { className: "media-wrap image-wrap" + styledClassName, style: imageWrapStyle },
         _react2.default.createElement(
@@ -243,3 +263,3 @@ "a",
         "div",
-        { className: "media-wrap image-wrap", style: imageWrapStyle },
+        { className: "media-wrap image-wrap" + styledClassName, style: imageWrapStyle },
         _react2.default.createElement("img", { src: url, width: width, height: height, style: { width: width, height: height } })
@@ -273,3 +293,3 @@ );
     if (style === 'strikethrough') {
-      return _react2.default.createElement("span", { style: { textDecoration: 'line-through' } });
+      return _react2.default.createElement("braftspan", { style: { textDecoration: 'line-through' }, isbrafttag: "1" });
     } else if (style === 'superscript') {
@@ -280,13 +300,13 @@ return _react2.default.createElement("sup", null);
     } else if (style.indexOf('color-') === 0) {
-      return _react2.default.createElement("span", { style: { color: '#' + style.split('-')[1] } });
+      return _react2.default.createElement("braftspan", { style: { color: '#' + style.split('-')[1] }, isbrafttag: "1" });
     } else if (style.indexOf('bgcolor-') === 0) {
-      return _react2.default.createElement("span", { style: { backgroundColor: '#' + style.split('-')[1] } });
+      return _react2.default.createElement("braftspan", { style: { backgroundColor: '#' + style.split('-')[1] }, isbrafttag: "1" });
     } else if (style.indexOf('fontsize-') === 0) {
-      return _react2.default.createElement("span", { style: { fontSize: style.split('-')[1] + 'px' } });
+      return _react2.default.createElement("braftspan", { style: { fontSize: style.split('-')[1] + 'px' }, isbrafttag: "1" });
     } else if (style.indexOf('lineheight-') === 0) {
-      return _react2.default.createElement("span", { style: { lineHeight: style.split('-')[1] } });
+      return _react2.default.createElement("braftspan", { style: { lineHeight: style.split('-')[1] }, isbrafttag: "1" });
     } else if (style.indexOf('letterspacing-') === 0) {
-      return _react2.default.createElement("span", { style: { letterSpacing: style.split('-')[1] + 'px' } });
+      return _react2.default.createElement("braftspan", { style: { letterSpacing: style.split('-')[1] + 'px' }, isbrafttag: "1" });
     } else if (style.indexOf('indent-') === 0) {
-      return _react2.default.createElement("span", { style: { paddingLeft: style.split('-')[1] + 'px', paddingRight: style.split('-')[1] + 'px' } });
+      return _react2.default.createElement("braftspan", { style: { paddingLeft: style.split('-')[1] + 'px', paddingRight: style.split('-')[1] + 'px' }, isbrafttag: "1" });
     } else if (style.indexOf('fontfamily-') === 0) {
@@ -297,3 +317,3 @@ var fontFamily = props.fontFamilies.find(function (item) {
       if (!fontFamily) return;
-      return _react2.default.createElement("span", { style: { fontFamily: fontFamily.family } });
+      return _react2.default.createElement("braftspan", { style: { fontFamily: fontFamily.family }, isbrafttag: "1" });
     }
@@ -400,31 +420,35 @@ };
 
-    if (nodeName === 'span' && node.style.color) {
-      var color = getHexColor(node.style.color);
-      return color ? currentStyle.add('COLOR-' + color.replace('#', '').toUpperCase()) : currentStyle;
-    } else if (nodeName === 'span' && node.style.backgroundColor) {
-      var _color = getHexColor(node.style.backgroundColor);
-      return _color ? currentStyle.add('BGCOLOR-' + _color.replace('#', '').toUpperCase()) : currentStyle;
-    } else if (nodeName === 'sup') {
-      return currentStyle.add('SUPERSCRIPT');
-    } else if (nodeName === 'sub') {
-      return currentStyle.add('SUBSCRIPT');
-    } else if (nodeName === 'span' && node.style.fontSize) {
-      return currentStyle.add('FONTSIZE-' + parseInt(node.style.fontSize, 10));
-    } else if (nodeName === 'span' && node.style.lineHeight) {
-      return currentStyle.add('LINEHEIGHT-' + node.style.lineHeight);
-    } else if (nodeName === 'span' && node.style.letterSpacing) {
-      return currentStyle.add('LETTERSPACING-' + parseInt(node.style.letterSpacing, 10));
-    } else if (nodeName === 'span' && node.style.indent) {
-      return currentStyle.add('INDENT-' + parseInt(node.style.indent, 10));
-    } else if (nodeName === 'span' && node.style.textDecoration === 'line-through') {
-      return currentStyle.add('STRIKETHROUGH');
-    } else if (nodeName === 'span' && node.style.fontFamily) {
-      var fontFamily = props.fontFamilies.find(function (item) {
-        return item.family.toLowerCase() === node.style.fontFamily.toLowerCase();
-      });
-      if (!fontFamily) return currentStyle;
-      return currentStyle.add('FONTFAMILY-' + fontFamily.name.toUpperCase());
-    } else {
-      return currentStyle;
+    var newStyle = currentStyle;
+
+    for (var i = 0; i < node.style.length; i++) {
+      if (nodeName === 'span' && node.style[i] === 'color') {
+        var color = getHexColor(node.style.color);
+        newStyle = color ? newStyle.add('COLOR-' + color.replace('#', '').toUpperCase()) : newStyle;
+      } else if (nodeName === 'span' && node.style[i] === 'background-color') {
+        var _color = getHexColor(node.style.backgroundColor);
+        newStyle = _color ? newStyle.add('BGCOLOR-' + _color.replace('#', '').toUpperCase()) : newStyle;
+      } else if (nodeName === 'sup') {
+        newStyle = newStyle.add('SUPERSCRIPT');
+      } else if (nodeName === 'sub') {
+        newStyle = newStyle.add('SUBSCRIPT');
+      } else if (nodeName === 'span' && node.style[i] === 'font-size') {
+        newStyle = newStyle.add('FONTSIZE-' + parseInt(node.style.fontSize, 10));
+      } else if (nodeName === 'span' && node.style[i] === 'line-height') {
+        newStyle = newStyle.add('LINEHEIGHT-' + node.style.lineHeight);
+      } else if (nodeName === 'span' && node.style[i] === 'letter-spacing') {
+        newStyle = newStyle.add('LETTERSPACING-' + parseInt(node.style.letterSpacing, 10));
+      } else if (nodeName === 'span' && (node.style[i] === 'padding-left' || node.style[i] === 'padding-right')) {
+        newStyle = newStyle.add('INDENT-' + parseInt(node.style.paddingLeft, 10));
+      } else if (nodeName === 'span' && node.style[i] === 'text-decoration' && node.style.textDecoration === 'line-through') {
+        newStyle = newStyle.add('STRIKETHROUGH');
+      } else if (nodeName === 'span' && node.style[i] === 'font-family') {
+        var fontFamily = props.fontFamilies.find(function (item) {
+          return item.family.toLowerCase() === node.style.fontFamily.toLowerCase();
+        });
+        if (!fontFamily) continue;
+        newStyle = newStyle.add('FONTFAMILY-' + fontFamily.name.toUpperCase());
+      }
     }
+
+    return newStyle;
   };
@@ -523,2 +547,9 @@ };
 };
+
+var mergeStyledSpans = exports.mergeStyledSpans = function mergeStyledSpans(htmlContent) {
+
+  var result = htmlContent.replace(/" isbrafttag="1"><braftspan style="/g, ';').replace(/(\<\/braftspan>)+/g, '</span>').replace(/<braftspan/g, '<span').replace(/" isbrafttag="1"/g, ';"');
+
+  return result;
+};
 ;
@@ -536,2 +567,3 @@
   reactHotLoader.register(namedColors, "namedColors", "src/configs.js");
+  reactHotLoader.register(defaultFontFamilies, "defaultFontFamilies", "src/configs.js");
   reactHotLoader.register(getHexColor, "getHexColor", "src/configs.js");
@@ -548,2 +580,3 @@ reactHotLoader.register(blocks, "blocks", "src/configs.js");
   reactHotLoader.register(getToHTMLConfig, "getToHTMLConfig", "src/configs.js");
+  reactHotLoader.register(mergeStyledSpans, "mergeStyledSpans", "src/configs.js");
   leaveModule(module);
@@ -550,0 +583,0 @@ })();

dist/index.js

@@ -21,7 +21,7 @@ 'use strict';
 var convertRawToHTML = exports.convertRawToHTML = function convertRawToHTML(content) {
-  var fontFamilies = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var fontFamilies = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _configs.defaultFontFamilies;
 
   try {
     var contentState = (0, _draftJs.convertFromRaw)(content);
-    return (0, _draftConvert.convertToHTML)((0, _configs.getToHTMLConfig)({ contentState: contentState, fontFamilies: fontFamilies }))(contentState);
+    return (0, _configs.mergeStyledSpans)((0, _draftConvert.convertToHTML)((0, _configs.getToHTMLConfig)({ contentState: contentState, fontFamilies: fontFamilies }))(contentState));
   } catch (error) {
@@ -28,0 +28,0 @@ return '';

package.json

 {
   "name": "braft-convert",
-  "version": "1.7.5",
+  "version": "1.8.1",
   "description": "A convert helper for Braft Editor.",
@@ -9,3 +9,3 @@ "main": "dist/index.js",
     "prepublish": "npm run build",
-    "dev": "webpack-dev-server -d --history-api-fallback --hot --inline --progress --colors --port 5997"
+    "start": "webpack-dev-server -d --history-api-fallback --hot --inline --progress --colors --port 5997"
   },
@@ -12,0 +12,0 @@ "repository": {

No alert changes

Improved metrics

Total package byte prevSize

216621

increased by1.91%

Lines of code

611

increased by4.62%

No dependency changes