@mirrormedia/lilith-draft-editor 1.1.0-alpha.2 → 1.1.0-alpha.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (72) hide show
  1. package/lib/draft-js/buttons/annotation.js +0 -22
  2. package/lib/draft-js/buttons/audio.js +3 -16
  3. package/lib/draft-js/buttons/background-color.js +0 -26
  4. package/lib/draft-js/buttons/background-image.js +13 -32
  5. package/lib/draft-js/buttons/background-video.js +13 -32
  6. package/lib/draft-js/buttons/color-box.js +5 -21
  7. package/lib/draft-js/buttons/divider.js +3 -12
  8. package/lib/draft-js/buttons/embedded-code.js +5 -16
  9. package/lib/draft-js/buttons/enlarge.js +0 -3
  10. package/lib/draft-js/buttons/font-color.js +0 -26
  11. package/lib/draft-js/buttons/image.js +5 -16
  12. package/lib/draft-js/buttons/info-box.js +5 -21
  13. package/lib/draft-js/buttons/link.js +0 -19
  14. package/lib/draft-js/buttons/media.js +3 -16
  15. package/lib/draft-js/buttons/related-post.js +3 -14
  16. package/lib/draft-js/buttons/selector/align-selector.js +2 -11
  17. package/lib/draft-js/buttons/selector/audio-selector.js +4 -33
  18. package/lib/draft-js/buttons/selector/image-selector.js +6 -50
  19. package/lib/draft-js/buttons/selector/pagination.js +2 -6
  20. package/lib/draft-js/buttons/selector/post-selector.js +6 -39
  21. package/lib/draft-js/buttons/selector/search-box.js +0 -9
  22. package/lib/draft-js/buttons/selector/video-selector.js +4 -33
  23. package/lib/draft-js/buttons/side-index.js +15 -31
  24. package/lib/draft-js/buttons/slideshow.js +7 -16
  25. package/lib/draft-js/buttons/table.js +5 -11
  26. package/lib/draft-js/buttons/text-align.js +0 -14
  27. package/lib/draft-js/buttons/video.js +3 -16
  28. package/lib/draft-js/const.js +0 -2
  29. package/lib/draft-js/draft-converter/api-data-instance.js +0 -14
  30. package/lib/draft-js/draft-converter/atomic-block-processor.js +12 -41
  31. package/lib/draft-js/draft-converter/entities.js +1 -0
  32. package/lib/draft-js/draft-converter/index.js +10 -29
  33. package/lib/draft-js/draft-converter/inline-styles-processor.js +22 -55
  34. package/lib/draft-js/modifier.js +5 -13
  35. package/lib/index.js +0 -4
  36. package/lib/website/mirrormedia/block-renderer/background-image-block.js +2 -14
  37. package/lib/website/mirrormedia/block-renderer/background-video-block.js +2 -14
  38. package/lib/website/mirrormedia/block-renderer/color-box-block.js +2 -14
  39. package/lib/website/mirrormedia/block-renderer/embedded-code-block.js +3 -12
  40. package/lib/website/mirrormedia/block-renderer/info-box-block.js +2 -14
  41. package/lib/website/mirrormedia/block-renderer/side-index-block.js +2 -13
  42. package/lib/website/mirrormedia/block-renderer/slideshow-block.js +4 -11
  43. package/lib/website/mirrormedia/block-renderer/table-block.js +28 -62
  44. package/lib/website/mirrormedia/block-renderer-fn.js +0 -30
  45. package/lib/website/mirrormedia/draft-editor.js +10 -106
  46. package/lib/website/mirrormedia/entity-decorator.js +0 -4
  47. package/lib/website/mirrormedia/index.js +0 -3
  48. package/lib/website/mirrormedia/selector/align-selector.js +2 -11
  49. package/lib/website/mirrormedia/selector/audio-selector.js +4 -33
  50. package/lib/website/mirrormedia/selector/image-selector.js +6 -49
  51. package/lib/website/mirrormedia/selector/pagination.js +2 -6
  52. package/lib/website/mirrormedia/selector/post-selector.js +6 -39
  53. package/lib/website/mirrormedia/selector/search-box.js +0 -9
  54. package/lib/website/mirrormedia/selector/video-selector.js +4 -32
  55. package/lib/website/readr/block-renderer/background-image-block.js +2 -14
  56. package/lib/website/readr/block-renderer/background-video-block.js +2 -14
  57. package/lib/website/readr/block-renderer/color-box-block.js +2 -14
  58. package/lib/website/readr/block-renderer/info-box-block.js +2 -14
  59. package/lib/website/readr/block-renderer/side-index-block.js +2 -13
  60. package/lib/website/readr/block-renderer/table-block.js +28 -62
  61. package/lib/website/readr/block-renderer-fn.js +4 -27
  62. package/lib/website/readr/draft-editor.js +10 -106
  63. package/lib/website/readr/entity-decorator.js +0 -4
  64. package/lib/website/readr/index.js +0 -3
  65. package/lib/website/readr/selector/align-selector.js +2 -11
  66. package/lib/website/readr/selector/audio-selector.js +4 -33
  67. package/lib/website/readr/selector/image-selector.js +6 -49
  68. package/lib/website/readr/selector/pagination.js +2 -6
  69. package/lib/website/readr/selector/post-selector.js +6 -39
  70. package/lib/website/readr/selector/search-box.js +0 -9
  71. package/lib/website/readr/selector/video-selector.js +4 -32
  72. package/package.json +2 -2
@@ -4,27 +4,23 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
-
8
7
  var _lodash = _interopRequireDefault(require("lodash"));
9
-
10
8
  var _apiDataInstance = _interopRequireDefault(require("./api-data-instance"));
11
-
12
9
  var _entities = _interopRequireDefault(require("./entities"));
13
-
14
10
  var _server = _interopRequireDefault(require("react-dom/server"));
15
-
16
11
  var _draftJs = require("draft-js");
17
-
18
12
  var _draftConvert = require("draft-convert");
19
-
20
13
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
-
22
14
  /* eslint-disable @typescript-eslint/no-var-requires */
15
+
23
16
  // import sizeOf from 'image-size';
17
+
24
18
  // eslint-disable-line
19
+
25
20
  // import htmlparser2 from 'htmlparser2'
26
21
  // eslint-disable-next-line no-undef
27
22
  const htmlparser2 = require('htmlparser2');
23
+
28
24
  /**
29
25
  * @typedef {Object} DraftEditor.TableEntity.TableStyles
30
26
  * @property {Record<string, string>[]} rows
@@ -36,26 +32,23 @@ const htmlparser2 = require('htmlparser2');
36
32
  * @typedef {RawDraftContentState[][]} DraftEditor.TableEntity.TableData
37
33
  */
38
34
 
39
-
40
35
  const processor = {
41
36
  convertBlock(entityMap, block) {
42
37
  let alignment = 'center';
43
38
  let content;
44
39
  let entityRange = block.entityRanges[0];
45
- let styles = {}; // current block's entity data
40
+ let styles = {};
41
+ // current block's entity data
46
42
  // ex:
47
43
  // entity.type = IMAGE, entity.data={id,name,url...}
48
-
49
44
  const entity = entityMap[entityRange.key];
45
+ let type = _lodash.default.get(entity, 'type', '');
50
46
 
51
- let type = _lodash.default.get(entity, 'type', ''); // backward compatible. Old entity type might be lower case
52
-
53
-
47
+ // backward compatible. Old entity type might be lower case
54
48
  switch (type && type.toUpperCase()) {
55
49
  case _entities.default.INFOBOX.type:
56
50
  {
57
51
  var _entity$data, _entity$data2;
58
-
59
52
  // About INFOBOX atomic block entity data structure,
60
53
  // see `../views/editor/info-box.tsx` for more information.
61
54
  content = [{
@@ -64,37 +57,29 @@ const processor = {
64
57
  }];
65
58
  break;
66
59
  }
67
-
68
60
  case _entities.default.COLORBOX.type:
69
61
  {
70
62
  var _entity$data3, _entity$data4;
71
-
72
63
  content = [{
73
64
  color: entity === null || entity === void 0 ? void 0 : (_entity$data3 = entity.data) === null || _entity$data3 === void 0 ? void 0 : _entity$data3.color,
74
65
  body: entity === null || entity === void 0 ? void 0 : (_entity$data4 = entity.data) === null || _entity$data4 === void 0 ? void 0 : _entity$data4.body
75
66
  }];
76
67
  break;
77
68
  }
78
-
79
69
  case _entities.default.TABLE.type:
80
70
  {
81
71
  var _content, _content2;
82
-
83
72
  // About TABLE atomic block entity data structure,
84
73
  // see `../views/editor/table.tsx` for more information.
85
74
  content = entity === null || entity === void 0 ? void 0 : entity.data;
86
75
  /** @type DraftEditor.TableEntity.TableStyles */
87
-
88
76
  const tableStyles = (_content = content) === null || _content === void 0 ? void 0 : _content.tableStyles;
89
77
  /** @type DraftEditor.TableEntity.TableData */
90
-
91
78
  const tableData = (_content2 = content) === null || _content2 === void 0 ? void 0 : _content2.tableData;
92
79
  const rowsJsx = tableData === null || tableData === void 0 ? void 0 : tableData.map((row, rIndex) => {
93
80
  var _tableStyles$rows;
94
-
95
81
  const colsJsx = row === null || row === void 0 ? void 0 : row.map((col, cIndex) => {
96
82
  var _tableStyles$columns, _tableStyles$cells, _tableStyles$cells$rI;
97
-
98
83
  const colStyle = tableStyles === null || tableStyles === void 0 ? void 0 : (_tableStyles$columns = tableStyles.columns) === null || _tableStyles$columns === void 0 ? void 0 : _tableStyles$columns[cIndex];
99
84
  const cellStyle = tableStyles === null || tableStyles === void 0 ? void 0 : (_tableStyles$cells = tableStyles.cells) === null || _tableStyles$cells === void 0 ? void 0 : (_tableStyles$cells$rI = _tableStyles$cells[rIndex]) === null || _tableStyles$cells$rI === void 0 ? void 0 : _tableStyles$cells$rI[cIndex];
100
85
  return /*#__PURE__*/React.createElement("td", {
@@ -109,20 +94,17 @@ const processor = {
109
94
  key: `row_${rIndex}`,
110
95
  style: tableStyles === null || tableStyles === void 0 ? void 0 : (_tableStyles$rows = tableStyles.rows) === null || _tableStyles$rows === void 0 ? void 0 : _tableStyles$rows[rIndex]
111
96
  }, colsJsx);
112
- }); // Use `React.renderToStsaticMarkup` to generate plain HTML string
113
-
97
+ });
98
+ // Use `React.renderToStsaticMarkup` to generate plain HTML string
114
99
  const html = _server.default.renderToStaticMarkup( /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, rowsJsx)));
115
-
116
100
  content = [{
117
101
  html
118
102
  }];
119
103
  break;
120
104
  }
121
-
122
105
  case _entities.default.DIVIDER.type:
123
106
  content = ['<hr>'];
124
107
  break;
125
-
126
108
  case _entities.default.BLOCKQUOTE.type:
127
109
  // this is different from default blockquote of draftjs
128
110
  // so we name our specific blockquote as 'quoteby'
@@ -131,7 +113,6 @@ const processor = {
131
113
  content = _lodash.default.get(entity, 'data');
132
114
  content = Array.isArray(content) ? content : [content];
133
115
  break;
134
-
135
116
  case _entities.default.AUDIO.type:
136
117
  case _entities.default.IMAGE.type:
137
118
  case _entities.default.IMAGEDIFF.type:
@@ -147,17 +128,13 @@ const processor = {
147
128
  content = _lodash.default.get(entity, 'data');
148
129
  content = Array.isArray(content) ? content : [content];
149
130
  break;
150
-
151
131
  case _entities.default.IMAGELINK.type:
152
132
  {
153
133
  // use Embedded component to dangerouslySetInnerHTML
154
134
  type = _entities.default.EMBEDDEDCODE.type;
155
135
  alignment = entity.data && entity.data.alignment || alignment;
156
-
157
136
  let description = _lodash.default.get(entity, ['data', 'description'], '');
158
-
159
137
  let url = _lodash.default.get(entity, ['data', 'url'], '');
160
-
161
138
  content = [{
162
139
  caption: description,
163
140
  embeddedCodeWithoutScript: `<img alt="${description}" src="${url}" class="img-responsive"/>`,
@@ -165,15 +142,11 @@ const processor = {
165
142
  }];
166
143
  break;
167
144
  }
168
-
169
145
  case _entities.default.EMBEDDEDCODE.type:
170
146
  {
171
147
  alignment = entity.data && entity.data.alignment || alignment;
172
-
173
148
  let caption = _lodash.default.get(entity, ['data', 'caption'], '');
174
-
175
149
  let embeddedCode = _lodash.default.get(entity, ['data', 'embeddedCode'], '');
176
-
177
150
  let script = {};
178
151
  let scripts = [];
179
152
  let scriptTagStart = false;
@@ -213,12 +186,11 @@ const processor = {
213
186
  }];
214
187
  break;
215
188
  }
216
-
217
189
  default:
218
190
  return;
219
- } // block type of api data should be lower case
220
-
191
+ }
221
192
 
193
+ // block type of api data should be lower case
222
194
  return new _apiDataInstance.default({
223
195
  id: block.key,
224
196
  alignment,
@@ -227,7 +199,6 @@ const processor = {
227
199
  styles
228
200
  });
229
201
  }
230
-
231
202
  };
232
203
  var _default = processor;
233
204
  exports.default = _default;
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = void 0;
7
7
  // 'use strict';
8
+
8
9
  const ENTITY = {
9
10
  DIVIDER: {
10
11
  type: 'DIVIDER'
@@ -4,27 +4,19 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
-
8
7
  var _immutable = require("immutable");
9
-
10
8
  var _lodash = _interopRequireDefault(require("lodash"));
11
-
12
9
  var InlineStylesProcessor = _interopRequireWildcard(require("./inline-styles-processor"));
13
-
14
10
  var _apiDataInstance = _interopRequireDefault(require("./api-data-instance"));
15
-
16
11
  var _atomicBlockProcessor = _interopRequireDefault(require("./atomic-block-processor"));
17
-
18
12
  var _entities = _interopRequireDefault(require("./entities"));
19
-
20
13
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
21
-
22
14
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
23
-
24
15
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
25
-
26
16
  // Modified from https://github.com/dburrows/draft-js-basic-html-editor/blob/master/src/utils/draftRawToHtml.js
17
+
27
18
  // 'use strict';
19
+
28
20
  let defaultBlockTagMap = {
29
21
  atomic: `<div>%content%</div>`,
30
22
  blockquote: `<blockquote>%content%</blockquote>`,
@@ -54,7 +46,6 @@ let defaultEntityTagMap = {
54
46
  [_entities.default.INFOBOX.type]: ['<div class="info-box-container center"><div class="info-box-title"><%= data.title %></div><div class="info-box-body"><%= data.body %></div>', '</div>'],
55
47
  [_entities.default.STOREDIMAGE.type]: ['<img alt="<%= data.name %>" src="<%= data.url %>" srcset="<%= data.urlMobileSized %> 800w, <%= data.urlTabletSized %> 1280w, <%= data.urlDesktopSized %> 2400w" class="center">', '</img>'],
56
48
  [_entities.default.IMAGE.type]: ['<img alt="<%=data.name%>" src="<%=data.url%>" srcset="<%= data.mobile.url %> 800w, <%= data.tablet.url %> 1280w, <%= data.desktop.url %> 2400w" class="center">', '</img>'],
57
-
58
49
  /*[ENTITY.IMAGEDIFF.type]: ['<!-- imageDiff component start --> <ol class="image-diff-container"> <% _.forEach(data, function(image, index) { if (index > 1) { return; } %><li class="image-diff-item"><img src="<%- image.url %>" /></li><% }); %>', '</ol><!-- imageDiff component end-->'],
59
50
  [ENTITY.IMAGELINK.type]: ['<img alt="<%= data.description %>" src="<%= data.url %>" class="<%= data.alignment %>">', '</img>'],*/
60
51
  [_entities.default.LINK.type]: ['<a target="_blank" href="<%= data.url %>">', '</a>'],
@@ -66,39 +57,35 @@ let nestedTagMap = {
66
57
  'ordered-list-item': ['<ol>', '</ol>'],
67
58
  'unordered-list-item': ['<ul>', '</ul>']
68
59
  };
69
-
70
60
  function _convertInlineStyle(block, entityMap, blockTagMap, entityTagMap) {
71
61
  return blockTagMap[block.type] ? blockTagMap[block.type].replace('%content%', InlineStylesProcessor.convertToHtml(inlineTagMap, entityTagMap, entityMap, block)) : blockTagMap.default.replace('%content%', InlineStylesProcessor.convertToHtml(inlineTagMap, block));
72
62
  }
73
-
74
63
  function _convertBlocksToHtml(blocks, entityMap, blockTagMap, entityTagMap) {
75
64
  let html = '';
76
65
  let nestLevel = []; // store the list type of the previous item: null/ol/ul
77
-
78
66
  blocks.forEach(block => {
79
67
  // create tag for <ol> or <ul>: deal with ordered/unordered list item
80
68
  // if the block is a list-item && the previous block is not a list-item
81
69
  if (nestedTagMap[block.type] && nestLevel[0] !== block.type) {
82
70
  html += nestedTagMap[block.type][0]; // start with <ol> or <ul>
83
-
84
71
  nestLevel.unshift(block.type);
85
- } // end tag with </ol> or </ul>: deal with ordered/unordered list item
86
-
72
+ }
87
73
 
74
+ // end tag with </ol> or </ul>: deal with ordered/unordered list item
88
75
  if (nestLevel.length > 0 && nestLevel[0] !== block.type) {
89
76
  html += nestedTagMap[nestLevel.shift()][1]; // close with </ol> or </ul>
90
77
  }
91
78
 
92
79
  html += _convertInlineStyle(block, entityMap, blockTagMap, entityTagMap);
93
- }); // end tag with </ol> or </ul>: or if it is the last block
80
+ });
94
81
 
82
+ // end tag with </ol> or </ul>: or if it is the last block
95
83
  if (blocks.length > 0 && nestedTagMap[blocks[blocks.length - 1].type]) {
96
84
  html += nestedTagMap[nestLevel.shift()][1]; // close with </ol> or </ul>
97
85
  }
98
86
 
99
87
  return html;
100
88
  }
101
-
102
89
  function convertBlocksToApiData(blocks, entityMap, entityTagMap) {
103
90
  let apiDataArr = (0, _immutable.List)();
104
91
  let content = [];
@@ -115,7 +102,6 @@ function convertBlocksToApiData(blocks, entityMap, entityTagMap) {
115
102
  content = [];
116
103
  nestLevel.shift();
117
104
  }
118
-
119
105
  if (block.type.startsWith('atomic') || block.type.startsWith('media')) {
120
106
  try {
121
107
  apiDataArr = apiDataArr.push(_atomicBlockProcessor.default.convertBlock(entityMap, block));
@@ -124,7 +110,6 @@ function convertBlocksToApiData(blocks, entityMap, entityTagMap) {
124
110
  }
125
111
  } else {
126
112
  var _block$data;
127
-
128
113
  let converted = InlineStylesProcessor.convertToHtml(inlineTagMap, entityTagMap, entityMap, block);
129
114
  const type = block.type;
130
115
  const textAlign = (_block$data = block.data) === null || _block$data === void 0 ? void 0 : _block$data.textAlign;
@@ -136,8 +121,9 @@ function convertBlocksToApiData(blocks, entityMap, entityTagMap) {
136
121
  }));
137
122
  }
138
123
  } else {
139
- let converted = InlineStylesProcessor.convertToHtml(inlineTagMap, entityTagMap, entityMap, block); // previous block is not an item-list block
124
+ let converted = InlineStylesProcessor.convertToHtml(inlineTagMap, entityTagMap, entityMap, block);
140
125
 
126
+ // previous block is not an item-list block
141
127
  if (nestLevel.length === 0) {
142
128
  nestLevel.unshift(block.type);
143
129
  content.push(converted);
@@ -155,8 +141,9 @@ function convertBlocksToApiData(blocks, entityMap, entityTagMap) {
155
141
  nestLevel[0] = block.type;
156
142
  }
157
143
  }
158
- }); // last block is a item-list
144
+ });
159
145
 
146
+ // last block is a item-list
160
147
  if (blocks.length > 0 && nestLevel.length > 0) {
161
148
  let block = blocks[blocks.length - 1];
162
149
  apiDataArr = apiDataArr.push(new _apiDataInstance.default({
@@ -165,10 +152,8 @@ function convertBlocksToApiData(blocks, entityMap, entityTagMap) {
165
152
  content: content
166
153
  }));
167
154
  }
168
-
169
155
  return apiDataArr;
170
156
  }
171
-
172
157
  function convertRawToHtml(raw, blockTagMap, entityTagMap) {
173
158
  blockTagMap = _lodash.default.merge({}, defaultBlockTagMap, blockTagMap);
174
159
  entityTagMap = entityTagMap || defaultEntityTagMap;
@@ -179,21 +164,17 @@ function convertRawToHtml(raw, blockTagMap, entityTagMap) {
179
164
  html = _convertBlocksToHtml(blocks, entityMap, blockTagMap, entityTagMap);
180
165
  return html;
181
166
  }
182
-
183
167
  function convertRawToApiData(raw) {
184
168
  let apiData;
185
169
  raw = raw || {};
186
170
  const blocks = Array.isArray(raw.blocks) ? raw.blocks : [];
187
171
  const entityMap = typeof raw.entityMap === 'object' ? raw.entityMap : {};
188
-
189
172
  let entityTagMap = _lodash.default.merge({}, defaultEntityTagMap, {
190
173
  [_entities.default.ANNOTATION.type]: [`<span data-entity-type="annotation" data-annotation-body="<%= data.bodyEscapedHTML %>">`, '</span>']
191
174
  });
192
-
193
175
  apiData = convertBlocksToApiData(blocks, entityMap, entityTagMap);
194
176
  return apiData;
195
177
  }
196
-
197
178
  var _default = {
198
179
  convertToHtml: convertRawToHtml,
199
180
  convertToApiData: convertRawToApiData
@@ -4,72 +4,56 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.convertToHtml = convertToHtml;
7
-
8
7
  var _lodash = _interopRequireDefault(require("lodash"));
9
-
10
8
  var _const = require("../const");
11
-
12
9
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
-
14
10
  // Modified from https://github.com/dburrows/draft-js-basic-html-editor/blob/master/src/utils/processInlineStylesAndEntities.js
11
+
15
12
  function tagForCustomInlineStyle(style) {
16
13
  const customInlineStylePrefixs = [_const.CUSTOM_STYLE_PREFIX_FONT_COLOR, _const.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR];
17
14
  const stylePrefix = customInlineStylePrefixs.find(prefix => style.startsWith(prefix));
18
15
  let tag, value;
19
-
20
16
  switch (stylePrefix) {
21
17
  case _const.CUSTOM_STYLE_PREFIX_FONT_COLOR:
22
18
  value = style.split(_const.CUSTOM_STYLE_PREFIX_FONT_COLOR)[1];
23
19
  tag = [`<span style="color: ${value}">`, '</span>'];
24
20
  break;
25
-
26
21
  case _const.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR:
27
22
  value = style.split(_const.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR)[1];
28
23
  tag = [`<span style="background-color: ${value}">`, '</span>'];
29
24
  break;
30
-
31
25
  default:
32
26
  break;
33
27
  }
34
-
35
28
  return tag;
36
29
  }
37
-
38
30
  function _fullfilIntersection(block) {
39
31
  // SORT BEFORE PROCESSING
40
32
  let sortedISRanges = _lodash.default.sortBy(block.inlineStyleRanges, 'offset');
41
-
42
33
  let sortedEntityRanges = _lodash.default.sortBy(block.entityRanges, 'offset');
43
-
44
34
  let splitedISInline = [];
45
-
46
35
  for (let i = 0; i < sortedEntityRanges.length; i++) {
47
36
  let entityRange = sortedEntityRanges[i];
48
-
49
37
  for (let j = 0; j < sortedISRanges.length; j++) {
50
38
  let entityOffset = _lodash.default.get(entityRange, 'offset', 0);
51
-
52
39
  let entityLength = _lodash.default.get(entityRange, 'length', 0);
53
-
54
40
  let inlineLength = _lodash.default.get(sortedISRanges, [j, 'length'], 0);
55
-
56
41
  let inlineOffset = _lodash.default.get(sortedISRanges, [j, 'offset'], 0);
57
-
58
42
  let inlineStyle = _lodash.default.get(sortedISRanges, [j, 'style'], '');
59
-
60
43
  let nextEntityOffset = _lodash.default.get(sortedEntityRanges, [i + 1, 'offset'], 0);
44
+ let nextEntityLength = _lodash.default.get(sortedEntityRanges, [i + 1, 'length'], 0);
61
45
 
62
- let nextEntityLength = _lodash.default.get(sortedEntityRanges, [i + 1, 'length'], 0); // handle intersections of inline style and entity
46
+ // handle intersections of inline style and entity
63
47
  // <a></a> is entity
64
48
  // <abbr></abbr> is next entity
65
49
  // <strong></strong> is inline style
66
-
67
-
68
- if (nextEntityOffset >= inlineOffset && nextEntityOffset < inlineOffset + inlineLength && nextEntityOffset + nextEntityLength > inlineOffset + inlineLength && // <a><strong></a></strong>
50
+ if (nextEntityOffset >= inlineOffset && nextEntityOffset < inlineOffset + inlineLength && nextEntityOffset + nextEntityLength > inlineOffset + inlineLength &&
51
+ // <a><strong></a></strong>
69
52
  entityOffset < inlineOffset && entityOffset + entityLength > inlineOffset && entityOffset + entityLength <= inlineOffset + inlineLength) {
70
53
  // <strong><abbr></strong></abbr>
71
54
  // situation: <a><strong></a><abbr></strong></abbr>
72
55
  // should be: <a><strong></strong></a><strong></strong><abbr><strong></strong></abbr>
56
+
73
57
  // skip next entity checking
74
58
  i = i + 1;
75
59
  splitedISInline.push({
@@ -121,109 +105,92 @@ function _fullfilIntersection(block) {
121
105
  }
122
106
  }
123
107
  }
124
-
125
108
  _lodash.default.forEachRight(splitedISInline, ele => {
126
109
  sortedISRanges.splice(ele.index, 1, ...ele.replace);
127
110
  });
128
-
129
111
  return sortedISRanges;
130
112
  }
131
-
132
113
  function _inlineTag(inlineTagMap, inlineStyleRanges, tagInsertMap = {}) {
133
114
  // SORT BEFORE PROCESSING
134
- let sortedRanges = _lodash.default.sortBy(inlineStyleRanges, 'offset'); // map all the tag insertions we're going to do
135
-
115
+ let sortedRanges = _lodash.default.sortBy(inlineStyleRanges, 'offset');
136
116
 
117
+ // map all the tag insertions we're going to do
137
118
  sortedRanges.forEach(function (range) {
138
- let tag = inlineTagMap[range.style]; // handle dynamic inline style
119
+ let tag = inlineTagMap[range.style];
139
120
 
121
+ // handle dynamic inline style
140
122
  if (!tag) {
141
123
  tag = tagForCustomInlineStyle(range.style);
142
124
  }
143
-
144
125
  if (!tagInsertMap[range.offset]) {
145
126
  tagInsertMap[range.offset] = [];
146
- } // add starting tag to the end of the array to form the tag nesting
147
-
127
+ }
148
128
 
129
+ // add starting tag to the end of the array to form the tag nesting
149
130
  tagInsertMap[range.offset].push(tag[0]);
150
-
151
131
  if (tag[1]) {
152
132
  if (!tagInsertMap[range.offset + range.length]) {
153
133
  tagInsertMap[range.offset + range.length] = [];
154
- } // add closing tags to start of array, otherwise tag nesting will be invalid
155
-
156
-
134
+ }
135
+ // add closing tags to start of array, otherwise tag nesting will be invalid
157
136
  tagInsertMap[range.offset + range.length].unshift(tag[1]);
158
137
  }
159
138
  });
160
139
  return tagInsertMap;
161
140
  }
162
-
163
141
  function _entityTag(entityTagMap, entityMap, entityRanges, tagInsertMap = {}) {
164
142
  _lodash.default.forEach(entityRanges, range => {
165
143
  let entity = entityMap[range.key];
166
144
  let type = entity.type && entity.type.toUpperCase();
167
145
  let tag = entityTagMap[type];
168
146
  let data = entity.data;
169
-
170
147
  let compiledTag0 = _lodash.default.template(tag[0], {
171
148
  variable: 'data'
172
149
  })(data);
173
-
174
150
  let compiledTag1 = _lodash.default.template(tag[1], {
175
151
  variable: 'data'
176
152
  })(data);
177
-
178
153
  if (!tagInsertMap[range.offset]) {
179
154
  tagInsertMap[range.offset] = [];
180
- } // add starting tag
181
-
155
+ }
182
156
 
157
+ // add starting tag
183
158
  tagInsertMap[range.offset].push(compiledTag0);
184
-
185
159
  if (tag[1]) {
186
160
  if (!tagInsertMap[range.offset + range.length]) {
187
161
  tagInsertMap[range.offset + range.length] = [];
188
- } // add closing tags to start of array, otherwise tag nesting will be invalid
189
-
190
-
162
+ }
163
+ // add closing tags to start of array, otherwise tag nesting will be invalid
191
164
  tagInsertMap[range.offset + range.length].unshift(compiledTag1);
192
165
  }
193
166
  });
194
-
195
167
  return tagInsertMap;
196
168
  }
197
-
198
169
  function convertToHtml(inlineTagMap, entityTagMap, entityMap, block) {
199
170
  // exit if there is no inlineStyleRanges/entityRanges or length === 0 as well
200
171
  if (!block.inlineStyleRanges && !block.entityRanges || block.inlineStyleRanges.length === 0 && block.entityRanges.length === 0) {
201
172
  return block.text;
202
173
  }
203
-
204
174
  let html = block.text;
205
-
206
175
  let inlineStyleRanges = _fullfilIntersection(block);
207
-
208
176
  let tagInsertMap = {};
209
177
  tagInsertMap = _entityTag(entityTagMap, entityMap, block.entityRanges, tagInsertMap);
210
- tagInsertMap = _inlineTag(inlineTagMap, inlineStyleRanges, tagInsertMap); // sort on position, as we'll need to keep track of offset
178
+ tagInsertMap = _inlineTag(inlineTagMap, inlineStyleRanges, tagInsertMap);
211
179
 
180
+ // sort on position, as we'll need to keep track of offset
212
181
  let orderedKeys = Object.keys(tagInsertMap).sort(function (a, b) {
213
182
  a = Number(a);
214
183
  b = Number(b);
215
-
216
184
  if (a > b) {
217
185
  return 1;
218
186
  }
219
-
220
187
  if (a < b) {
221
188
  return -1;
222
189
  }
223
-
224
190
  return 0;
225
- }); // insert tags into string, keep track of offset caused by our text insertions
191
+ });
226
192
 
193
+ // insert tags into string, keep track of offset caused by our text insertions
227
194
  let offset = 0;
228
195
  orderedKeys.forEach(function (pos) {
229
196
  let index = Number(pos);
@@ -4,13 +4,12 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.Modifier = void 0;
7
-
8
7
  var _draftJs = require("draft-js");
9
-
10
8
  var _immutable = require("immutable");
11
-
12
- const Modifier = { ..._draftJs.Modifier
9
+ const Modifier = {
10
+ ..._draftJs.Modifier
13
11
  };
12
+
14
13
  /*
15
14
  This method is specified for custom inline style such as 'FONT_COLOR_#ffffff'.
16
15
  For this kind of inline style there may be more than one style name 'FONT_COLOR_#ffffff', 'FONT_COLOR_#000000'.
@@ -22,20 +21,18 @@ const Modifier = { ..._draftJs.Modifier
22
21
 
23
22
  Reference: https://github.com/facebook/draft-js/blob/main/src/model/transaction/ContentStateInlineStyle.js#L39-L88
24
23
  */
25
-
26
24
  exports.Modifier = Modifier;
27
-
28
25
  Modifier.removeInlineStyleByPrefix = (contentState, selectionState, inlineStylePrefix) => {
29
26
  const blockMap = contentState.getBlockMap();
30
27
  const startKey = selectionState.getStartKey();
31
28
  const startOffset = selectionState.getStartOffset();
32
29
  const endKey = selectionState.getEndKey();
33
- const endOffset = selectionState.getEndOffset(); // loop through all selected blocks and every block chars to remove specific inline style
30
+ const endOffset = selectionState.getEndOffset();
34
31
 
32
+ // loop through all selected blocks and every block chars to remove specific inline style
35
33
  const newBlocks = blockMap.skipUntil((_, k) => k === startKey).takeUntil((_, k) => k === endKey).concat((0, _immutable.Map)([[endKey, blockMap.get(endKey)]])).map((block, blockKey) => {
36
34
  let sliceStart;
37
35
  let sliceEnd;
38
-
39
36
  if (startKey === endKey) {
40
37
  sliceStart = startOffset;
41
38
  sliceEnd = endOffset;
@@ -43,21 +40,16 @@ Modifier.removeInlineStyleByPrefix = (contentState, selectionState, inlineStyleP
43
40
  sliceStart = blockKey === startKey ? startOffset : 0;
44
41
  sliceEnd = blockKey === endKey ? endOffset : block.getLength();
45
42
  }
46
-
47
43
  let chars = block.getCharacterList();
48
44
  let current;
49
-
50
45
  while (sliceStart < sliceEnd) {
51
46
  current = chars.get(sliceStart);
52
47
  const inlineStyle = current.getStyle().find(styleName => styleName.startsWith(inlineStylePrefix));
53
-
54
48
  if (inlineStyle) {
55
49
  chars = chars.set(sliceStart, _draftJs.CharacterMetadata.removeStyle(current, inlineStyle));
56
50
  }
57
-
58
51
  sliceStart++;
59
52
  }
60
-
61
53
  return block.set('characterList', chars);
62
54
  });
63
55
  return contentState.merge({
package/lib/index.js CHANGED
@@ -21,11 +21,7 @@ Object.defineProperty(exports, "draftConverter", {
21
21
  return _draftConverter.default;
22
22
  }
23
23
  });
24
-
25
24
  var _draftConverter = _interopRequireDefault(require("./draft-js/draft-converter"));
26
-
27
25
  var _mirrormedia = _interopRequireDefault(require("./website/mirrormedia"));
28
-
29
26
  var _readr = _interopRequireDefault(require("./website/readr"));
30
-
31
27
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }