@20minutes/draft-convert 3.0.0 → 3.0.1

package/esm/encodeBlock.js

@@ -0,0 +1,44 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import updateMutation from './util/updateMutation';
+import rangeSort from './util/rangeSort';
+var ENTITY_MAP = {
+  '&': '&amp;',
+  '<': '&lt;',
+  '>': '&gt;',
+  '"': '&quot;',
+  "'": '&#x27;',
+  '`': '&#x60;',
+  '\n': '<br/>'
+};
+export default (function (block) {
+  var blockText = _toConsumableArray(block.text);
+  var entities = block.entityRanges.sort(rangeSort);
+  var styles = block.inlineStyleRanges.sort(rangeSort);
+  var resultText = '';
+  var _loop = function _loop() {
+    var _char = blockText[index];
+    if (ENTITY_MAP[_char] !== undefined) {
+      var encoded = ENTITY_MAP[_char];
+      var resultIndex = _toConsumableArray(resultText).length;
+      resultText += encoded;
+      var updateForChar = function updateForChar(mutation) {
+        return updateMutation(mutation, resultIndex, _char.length, encoded.length, 0, 0);
+      };
+      entities = entities.map(updateForChar);
+      styles = styles.map(updateForChar);
+    } else {
+      resultText += _char;
+    }
+  };
+  for (var index = 0; index < blockText.length; index += 1) {
+    _loop();
+  }
+  return _objectSpread(_objectSpread({}, block), {}, {
+    text: resultText,
+    inlineStyleRanges: styles,
+    entityRanges: entities
+  });
+});

package/esm/index.js

@@ -0,0 +1,4 @@
+import convertToHTML from './convertToHTML';
+import convertFromHTML from './convertFromHTML';
+import parseHTML from './util/parseHTML';
+export { convertToHTML, convertFromHTML, parseHTML };

package/esm/util/accumulateFunction.js

@@ -0,0 +1,9 @@
+export default (function (newFn, rest) {
+  return function () {
+    var newResult = newFn.apply(void 0, arguments);
+    if (newResult !== undefined && newResult !== null) {
+      return newResult;
+    }
+    return rest.apply(void 0, arguments);
+  };
+});

package/esm/util/blockTypeObjectFunction.js

@@ -0,0 +1,9 @@
+export default (function (typeObject) {
+  return function (block) {
+    if (typeof typeObject === 'function') {
+      // handle case where typeObject is already a function
+      return typeObject(block);
+    }
+    return typeObject[block.type];
+  };
+});

package/esm/util/getBlockTags.js

@@ -0,0 +1,27 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import invariant from 'invariant';
+import React from 'react';
+import ReactDOMServer from 'react-dom/server';
+import splitReactElement from './splitReactElement';
+function hasChildren(element) {
+  return /*#__PURE__*/React.isValidElement(element) && React.Children.count(element.props.children) > 0;
+}
+export default function getBlockTags(blockHTML) {
+  invariant(blockHTML !== null && blockHTML !== undefined, 'Expected block HTML value to be non-null');
+  if (typeof blockHTML === 'string') {
+    return blockHTML;
+  }
+  if ( /*#__PURE__*/React.isValidElement(blockHTML)) {
+    if (hasChildren(blockHTML)) {
+      return ReactDOMServer.renderToStaticMarkup(blockHTML);
+    }
+    return splitReactElement(blockHTML);
+  }
+  if (Object.prototype.hasOwnProperty.call(blockHTML, 'element') && /*#__PURE__*/React.isValidElement(blockHTML.element)) {
+    return _objectSpread(_objectSpread({}, blockHTML), splitReactElement(blockHTML.element));
+  }
+  invariant(Object.prototype.hasOwnProperty.call(blockHTML, 'start') && Object.prototype.hasOwnProperty.call(blockHTML, 'end'), 'convertToHTML: received block information without either a ReactElement or an object with start/end tags');
+  return blockHTML;
+}

package/esm/util/getElementHTML.js

@@ -0,0 +1,36 @@
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import invariant from 'invariant';
+import React from 'react';
+import ReactDOMServer from 'react-dom/server';
+import splitReactElement from './splitReactElement';
+function hasChildren(element) {
+  return /*#__PURE__*/React.isValidElement(element) && React.Children.count(element.props.children) > 0;
+}
+export default function getElementHTML(element) {
+  var text = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  if (element === undefined || element === null) {
+    return element;
+  }
+  if (typeof element === 'string') {
+    return element;
+  }
+  if ( /*#__PURE__*/React.isValidElement(element)) {
+    if (hasChildren(element)) {
+      return ReactDOMServer.renderToStaticMarkup(element);
+    }
+    var tags = splitReactElement(element);
+    if (text !== null && _typeof(tags) === 'object') {
+      var start = tags.start,
+        end = tags.end;
+      return start + text + end;
+    }
+    return tags;
+  }
+  invariant(Object.prototype.hasOwnProperty.call(element, 'start') && Object.prototype.hasOwnProperty.call(element, 'end'), 'convertToHTML: received conversion data without either an HTML string, ReactElement or an object with start/end tags');
+  if (text !== null) {
+    var _start = element.start,
+      _end = element.end;
+    return _start + text + _end;
+  }
+  return element;
+}

package/esm/util/getElementTagLength.js

@@ -0,0 +1,20 @@
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import React from 'react';
+import splitReactElement from './splitReactElement';
+var getElementTagLength = function getElementTagLength(element) {
+  var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'start';
+  if ( /*#__PURE__*/React.isValidElement(element)) {
+    var splitElement = splitReactElement(element);
+    if (typeof splitElement === 'string') {
+      return 0;
+    }
+    var length = splitElement[type].length;
+    var child = React.Children.toArray(element.props.children)[0];
+    return length + (child && /*#__PURE__*/React.isValidElement(child) ? getElementTagLength(child, type) : 0);
+  }
+  if (_typeof(element) === 'object') {
+    return element[type] ? element[type].length : 0;
+  }
+  return 0;
+};
+export default getElementTagLength;

package/esm/util/getNestedBlockTags.js

@@ -0,0 +1,29 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import invariant from 'invariant';
+import React from 'react';
+import splitReactElement from './splitReactElement';
+export default function getNestedBlockTags(blockHTML, depth) {
+  invariant(blockHTML !== null && blockHTML !== undefined, 'Expected block HTML value to be non-null');
+  if (typeof blockHTML.nest === 'function') {
+    var _splitReactElement = splitReactElement(blockHTML.nest(depth)),
+      start = _splitReactElement.start,
+      end = _splitReactElement.end;
+    return _objectSpread(_objectSpread({}, blockHTML), {}, {
+      nestStart: start,
+      nestEnd: end
+    });
+  }
+  if ( /*#__PURE__*/React.isValidElement(blockHTML.nest)) {
+    var _splitReactElement2 = splitReactElement(blockHTML.nest),
+      _start = _splitReactElement2.start,
+      _end = _splitReactElement2.end;
+    return _objectSpread(_objectSpread({}, blockHTML), {}, {
+      nestStart: _start,
+      nestEnd: _end
+    });
+  }
+  invariant(Object.prototype.hasOwnProperty.call(blockHTML, 'nestStart') && Object.prototype.hasOwnProperty.call(blockHTML, 'nestEnd'), 'convertToHTML: received block information without either a ReactElement or an object with start/end tags');
+  return blockHTML;
+}

package/esm/util/parseHTML.js

@@ -0,0 +1,18 @@
+var fallback = function fallback(html) {
+  var doc = document.implementation.createHTMLDocument('');
+  doc.documentElement.innerHTML = html;
+  return doc;
+};
+export default function parseHTML(html) {
+  var doc;
+  if (typeof DOMParser !== 'undefined') {
+    var parser = new DOMParser();
+    doc = parser.parseFromString(html, 'text/html');
+    if (doc === null || doc.body === null) {
+      doc = fallback(html);
+    }
+  } else {
+    doc = fallback(html);
+  }
+  return doc.body;
+}

package/esm/util/rangeSort.js

@@ -0,0 +1,6 @@
+export default (function (r1, r2) {
+  if (r1.offset === r2.offset) {
+    return r2.length - r1.length;
+  }
+  return r1.offset - r2.offset;
+});

package/esm/util/splitReactElement.js

@@ -0,0 +1,18 @@
+import invariant from 'invariant';
+import React from 'react';
+import ReactDOMServer from 'react-dom/server';
+
+// see http://w3c.github.io/html/syntax.html#writing-html-documents-elements
+var VOID_TAGS = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr'];
+export default function splitReactElement(element) {
+  if (VOID_TAGS.indexOf(element.type) !== -1) {
+    return ReactDOMServer.renderToStaticMarkup(element);
+  }
+  var tags = ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.cloneElement(element, {}, '\r')).split('\r');
+  invariant(tags.length > 1, "convertToHTML: Element of type ".concat(element.type, " must render children"));
+  invariant(tags.length < 3, "convertToHTML: Element of type ".concat(element.type, " cannot use carriage return character"));
+  return {
+    start: tags[0],
+    end: tags[1]
+  };
+}

package/esm/util/styleObjectFunction.js

@@ -0,0 +1,8 @@
+export default (function (object) {
+  return function (style) {
+    if (typeof object === 'function') {
+      return object(style);
+    }
+    return object[style];
+  };
+});

package/esm/util/updateMutation.js

@@ -0,0 +1,48 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+export default function updateMutation(mutation, originalOffset, originalLength, newLength, prefixLength, suffixLength) {
+  // three cases we can reasonably adjust - disjoint mutations that
+  // happen later on where the offset will need to be changed,
+  // mutations that completely contain the new one where we can adjust
+  // the length, and mutations that occur partially within the new one.
+  var lengthDiff = newLength - originalLength;
+  var mutationAfterChange = originalOffset + originalLength <= mutation.offset;
+  if (mutationAfterChange) {
+    return _objectSpread(_objectSpread({}, mutation), {}, {
+      offset: mutation.offset + lengthDiff
+    });
+  }
+  var mutationContainsChange = originalOffset >= mutation.offset && originalOffset + originalLength <= mutation.offset + mutation.length;
+  if (mutationContainsChange) {
+    return _objectSpread(_objectSpread({}, mutation), {}, {
+      length: mutation.length + lengthDiff
+    });
+  }
+  var mutationWithinPrefixChange = mutation.offset >= originalOffset && mutation.offset + mutation.length <= originalOffset + originalLength && prefixLength > 0;
+  if (mutationWithinPrefixChange) {
+    return _objectSpread(_objectSpread({}, mutation), {}, {
+      offset: mutation.offset + prefixLength
+    });
+  }
+  var mutationContainsPrefix = mutation.offset < originalOffset && mutation.offset + mutation.length <= originalOffset + originalLength && mutation.offset + mutation.length > originalOffset && prefixLength > 0;
+  if (mutationContainsPrefix) {
+    return [_objectSpread(_objectSpread({}, mutation), {}, {
+      length: originalOffset - mutation.offset
+    }), _objectSpread(_objectSpread({}, mutation), {}, {
+      offset: originalOffset + prefixLength,
+      length: mutation.offset - originalOffset + mutation.length
+    })];
+  }
+  var mutationContainsSuffix = mutation.offset >= originalOffset && mutation.offset + mutation.length > originalOffset + originalLength && originalOffset + originalLength > mutation.offset && suffixLength > 0;
+  if (mutationContainsSuffix) {
+    return [_objectSpread(_objectSpread({}, mutation), {}, {
+      offset: mutation.offset + prefixLength,
+      length: originalOffset + originalLength - mutation.offset
+    }), _objectSpread(_objectSpread({}, mutation), {}, {
+      offset: originalOffset + originalLength + prefixLength + suffixLength,
+      length: mutation.offset + mutation.length - (originalOffset + originalLength)
+    })];
+  }
+  return mutation;
+}

package/lib/blockEntities.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _updateMutation = _interopRequireDefault(require("./util/updateMutation"));
+var _rangeSort = _interopRequireDefault(require("./util/rangeSort"));
+var _getElementHTML = _interopRequireDefault(require("./util/getElementHTML"));
+var _getElementTagLength = _interopRequireDefault(require("./util/getElementTagLength"));
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var converter = function converter() {
+  var entity = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var originalText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  return originalText;
+};
+var _default = exports["default"] = function _default(block, entityMap) {
+  var entityConverter = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : converter;
+  var resultText = (0, _toConsumableArray2["default"])(block.text);
+  var getEntityHTML = entityConverter;
+  if (entityConverter.__isMiddleware) {
+    getEntityHTML = entityConverter(converter);
+  }
+  if (Object.prototype.hasOwnProperty.call(block, 'entityRanges') && block.entityRanges.length > 0) {
+    var entities = block.entityRanges.sort(_rangeSort["default"]);
+    var styles = block.inlineStyleRanges;
+    var _loop = function _loop(index) {
+      var entityRange = entities[index];
+      var entity = entityMap[entityRange.key];
+      var originalText = resultText.slice(entityRange.offset, entityRange.offset + entityRange.length).join('');
+      var entityHTML = getEntityHTML(entity, originalText);
+      var elementHTML = (0, _getElementHTML["default"])(entityHTML, originalText);
+      var converted;
+      if (!!elementHTML || elementHTML === '') {
+        converted = (0, _toConsumableArray2["default"])(elementHTML);
+      } else {
+        converted = originalText;
+      }
+      var prefixLength = (0, _getElementTagLength["default"])(entityHTML, 'start');
+      var suffixLength = (0, _getElementTagLength["default"])(entityHTML, 'end');
+      var updateLaterMutation = function updateLaterMutation(mutation, mutationIndex) {
+        if (mutationIndex > index || Object.prototype.hasOwnProperty.call(mutation, 'style')) {
+          return (0, _updateMutation["default"])(mutation, entityRange.offset, entityRange.length, converted.length, prefixLength, suffixLength);
+        }
+        return mutation;
+      };
+      var updateLaterMutations = function updateLaterMutations(mutationList) {
+        return mutationList.reduce(function (acc, mutation, mutationIndex) {
+          var updatedMutation = updateLaterMutation(mutation, mutationIndex);
+          if (Array.isArray(updatedMutation)) {
+            return acc.concat(updatedMutation);
+          }
+          return acc.concat([updatedMutation]);
+        }, []);
+      };
+      entities = updateLaterMutations(entities);
+      styles = updateLaterMutations(styles);
+      resultText = [].concat((0, _toConsumableArray2["default"])(resultText.slice(0, entityRange.offset)), (0, _toConsumableArray2["default"])(converted), (0, _toConsumableArray2["default"])(resultText.slice(entityRange.offset + entityRange.length)));
+    };
+    for (var index = 0; index < entities.length; index += 1) {
+      _loop(index);
+    }
+    return _objectSpread(_objectSpread({}, block), {}, {
+      text: resultText.join(''),
+      inlineStyleRanges: styles,
+      entityRanges: entities
+    });
+  }
+  return block;
+};

package/lib/blockInlineStyles.js

@@ -0,0 +1,105 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _invariant = _interopRequireDefault(require("invariant"));
+var _styleObjectFunction = _interopRequireDefault(require("./util/styleObjectFunction"));
+var _accumulateFunction = _interopRequireDefault(require("./util/accumulateFunction"));
+var _getElementHTML = _interopRequireDefault(require("./util/getElementHTML"));
+var _rangeSort = _interopRequireDefault(require("./util/rangeSort"));
+var _defaultInlineHTML = _interopRequireDefault(require("./default/defaultInlineHTML"));
+var subtractStyles = function subtractStyles(original, toRemove) {
+  return original.filter(function (el) {
+    return !toRemove.some(function (elToRemove) {
+      return elToRemove.style === el.style;
+    });
+  });
+};
+var popEndingStyles = function popEndingStyles(styleStack, endingStyles) {
+  return endingStyles.reduceRight(function (stack, style) {
+    var styleToRemove = stack[stack.length - 1];
+    (0, _invariant["default"])(styleToRemove.style === style.style, "Style ".concat(styleToRemove.style, " to be removed doesn't match expected ").concat(style.style));
+    return stack.slice(0, -1);
+  }, styleStack);
+};
+var characterStyles = function characterStyles(offset, ranges) {
+  return ranges.filter(function (range) {
+    return offset >= range.offset && offset < range.offset + range.length;
+  });
+};
+var rangeIsSubset = function rangeIsSubset(firstRange, secondRange) {
+  // returns true if the second range is a subset of the first
+  var secondStartWithinFirst = firstRange.offset <= secondRange.offset;
+  var secondEndWithinFirst = firstRange.offset + firstRange.length >= secondRange.offset + secondRange.length;
+  return secondStartWithinFirst && secondEndWithinFirst;
+};
+var latestStyleLast = function latestStyleLast(s1, s2) {
+  // make sure longer-lasting styles are added first
+  var s2endIndex = s2.offset + s2.length;
+  var s1endIndex = s1.offset + s1.length;
+  return s2endIndex - s1endIndex;
+};
+var getStylesToReset = function getStylesToReset(remainingStyles, newStyles) {
+  var i = 0;
+  while (i < remainingStyles.length) {
+    if (newStyles.every(rangeIsSubset.bind(null, remainingStyles[i]))) {
+      i += 1;
+    } else {
+      return remainingStyles.slice(i);
+    }
+  }
+  return [];
+};
+var appendStartMarkup = function appendStartMarkup(inlineHTML, string, styleRange) {
+  return string + (0, _getElementHTML["default"])(inlineHTML(styleRange.style)).start;
+};
+var prependEndMarkup = function prependEndMarkup(inlineHTML, string, styleRange) {
+  return (0, _getElementHTML["default"])(inlineHTML(styleRange.style)).end + string;
+};
+var defaultCustomInlineHTML = function defaultCustomInlineHTML(next) {
+  return function (style) {
+    return next(style);
+  };
+};
+defaultCustomInlineHTML.__isMiddleware = true;
+var _default = exports["default"] = function _default(rawBlock) {
+  var customInlineHTML = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultCustomInlineHTML;
+  (0, _invariant["default"])(rawBlock !== null && rawBlock !== undefined, 'Expected raw block to be non-null');
+  var inlineHTML;
+  if (customInlineHTML.__isMiddleware === true) {
+    inlineHTML = customInlineHTML(_defaultInlineHTML["default"]);
+  } else {
+    inlineHTML = (0, _accumulateFunction["default"])((0, _styleObjectFunction["default"])(customInlineHTML), (0, _styleObjectFunction["default"])(_defaultInlineHTML["default"]));
+  }
+  var result = '';
+  var styleStack = [];
+  var sortedRanges = rawBlock.inlineStyleRanges.sort(_rangeSort["default"]);
+  var originalTextArray = (0, _toConsumableArray2["default"])(rawBlock.text);
+  for (var i = 0; i < originalTextArray.length; i += 1) {
+    var styles = characterStyles(i, sortedRanges);
+    var endingStyles = subtractStyles(styleStack, styles);
+    var newStyles = subtractStyles(styles, styleStack);
+    var remainingStyles = subtractStyles(styleStack, endingStyles);
+
+    // reset styles: look for any already existing styles that will need to
+    // end before styles that are being added on this character. to solve this
+    // close out those current tags and all nested children,
+    // then open new ones nested within the new styles.
+    var resetStyles = getStylesToReset(remainingStyles, newStyles);
+    var openingStyles = resetStyles.concat(newStyles).sort(latestStyleLast);
+    var openingStyleTags = openingStyles.reduce(appendStartMarkup.bind(null, inlineHTML), '');
+    var endingStyleTags = endingStyles.concat(resetStyles).reduce(prependEndMarkup.bind(null, inlineHTML), '');
+    result += endingStyleTags + openingStyleTags + originalTextArray[i];
+    styleStack = popEndingStyles(styleStack, resetStyles.concat(endingStyles));
+    styleStack = styleStack.concat(openingStyles);
+    (0, _invariant["default"])(styleStack.length === styles.length, "Character ".concat(i, ": ").concat(styleStack.length - styles.length, " styles left on stack that should no longer be there"));
+  }
+  result = styleStack.reduceRight(function (res, openStyle) {
+    return res + (0, _getElementHTML["default"])(inlineHTML(openStyle.style)).end;
+  }, result);
+  return result;
+};