@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.
- package/lib/draft-js/buttons/annotation.js +0 -22
- package/lib/draft-js/buttons/audio.js +3 -16
- package/lib/draft-js/buttons/background-color.js +0 -26
- package/lib/draft-js/buttons/background-image.js +13 -32
- package/lib/draft-js/buttons/background-video.js +13 -32
- package/lib/draft-js/buttons/color-box.js +5 -21
- package/lib/draft-js/buttons/divider.js +3 -12
- package/lib/draft-js/buttons/embedded-code.js +5 -16
- package/lib/draft-js/buttons/enlarge.js +0 -3
- package/lib/draft-js/buttons/font-color.js +0 -26
- package/lib/draft-js/buttons/image.js +5 -16
- package/lib/draft-js/buttons/info-box.js +5 -21
- package/lib/draft-js/buttons/link.js +0 -19
- package/lib/draft-js/buttons/media.js +3 -16
- package/lib/draft-js/buttons/related-post.js +3 -14
- package/lib/draft-js/buttons/selector/align-selector.js +2 -11
- package/lib/draft-js/buttons/selector/audio-selector.js +4 -33
- package/lib/draft-js/buttons/selector/image-selector.js +6 -50
- package/lib/draft-js/buttons/selector/pagination.js +2 -6
- package/lib/draft-js/buttons/selector/post-selector.js +6 -39
- package/lib/draft-js/buttons/selector/search-box.js +0 -9
- package/lib/draft-js/buttons/selector/video-selector.js +4 -33
- package/lib/draft-js/buttons/side-index.js +15 -31
- package/lib/draft-js/buttons/slideshow.js +7 -16
- package/lib/draft-js/buttons/table.js +5 -11
- package/lib/draft-js/buttons/text-align.js +0 -14
- package/lib/draft-js/buttons/video.js +3 -16
- package/lib/draft-js/const.js +0 -2
- package/lib/draft-js/draft-converter/api-data-instance.js +0 -14
- package/lib/draft-js/draft-converter/atomic-block-processor.js +12 -41
- package/lib/draft-js/draft-converter/entities.js +1 -0
- package/lib/draft-js/draft-converter/index.js +10 -29
- package/lib/draft-js/draft-converter/inline-styles-processor.js +22 -55
- package/lib/draft-js/modifier.js +5 -13
- package/lib/index.js +0 -4
- package/lib/website/mirrormedia/block-renderer/background-image-block.js +2 -14
- package/lib/website/mirrormedia/block-renderer/background-video-block.js +2 -14
- package/lib/website/mirrormedia/block-renderer/color-box-block.js +2 -14
- package/lib/website/mirrormedia/block-renderer/embedded-code-block.js +3 -12
- package/lib/website/mirrormedia/block-renderer/info-box-block.js +2 -14
- package/lib/website/mirrormedia/block-renderer/side-index-block.js +2 -13
- package/lib/website/mirrormedia/block-renderer/slideshow-block.js +4 -11
- package/lib/website/mirrormedia/block-renderer/table-block.js +28 -62
- package/lib/website/mirrormedia/block-renderer-fn.js +0 -30
- package/lib/website/mirrormedia/draft-editor.js +10 -106
- package/lib/website/mirrormedia/entity-decorator.js +0 -4
- package/lib/website/mirrormedia/index.js +0 -3
- package/lib/website/mirrormedia/selector/align-selector.js +2 -11
- package/lib/website/mirrormedia/selector/audio-selector.js +4 -33
- package/lib/website/mirrormedia/selector/image-selector.js +6 -49
- package/lib/website/mirrormedia/selector/pagination.js +2 -6
- package/lib/website/mirrormedia/selector/post-selector.js +6 -39
- package/lib/website/mirrormedia/selector/search-box.js +0 -9
- package/lib/website/mirrormedia/selector/video-selector.js +4 -32
- package/lib/website/readr/block-renderer/background-image-block.js +2 -14
- package/lib/website/readr/block-renderer/background-video-block.js +2 -14
- package/lib/website/readr/block-renderer/color-box-block.js +2 -14
- package/lib/website/readr/block-renderer/info-box-block.js +2 -14
- package/lib/website/readr/block-renderer/side-index-block.js +2 -13
- package/lib/website/readr/block-renderer/table-block.js +28 -62
- package/lib/website/readr/block-renderer-fn.js +4 -27
- package/lib/website/readr/draft-editor.js +10 -106
- package/lib/website/readr/entity-decorator.js +0 -4
- package/lib/website/readr/index.js +0 -3
- package/lib/website/readr/selector/align-selector.js +2 -11
- package/lib/website/readr/selector/audio-selector.js +4 -33
- package/lib/website/readr/selector/image-selector.js +6 -49
- package/lib/website/readr/selector/pagination.js +2 -6
- package/lib/website/readr/selector/post-selector.js +6 -39
- package/lib/website/readr/selector/search-box.js +0 -9
- package/lib/website/readr/selector/video-selector.js +4 -32
- 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 = {};
|
|
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
|
-
|
|
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
|
-
});
|
|
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
|
-
}
|
|
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;
|
|
@@ -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
|
-
}
|
|
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
|
-
});
|
|
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);
|
|
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
|
-
});
|
|
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
|
-
|
|
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');
|
|
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];
|
|
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
|
-
}
|
|
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
|
-
}
|
|
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
|
-
}
|
|
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
|
-
}
|
|
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);
|
|
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
|
-
});
|
|
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);
|
package/lib/draft-js/modifier.js
CHANGED
|
@@ -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
|
-
|
|
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();
|
|
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 }; }
|