@mirrormedia/lilith-draft-editor 1.1.0-alpha.3 → 1.1.0-alpha.30
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 +22 -0
- package/lib/draft-js/buttons/audio.js +16 -3
- package/lib/draft-js/buttons/background-color.js +26 -0
- package/lib/draft-js/buttons/background-image.js +32 -13
- package/lib/draft-js/buttons/background-video.js +32 -13
- package/lib/draft-js/buttons/color-box.js +21 -5
- package/lib/draft-js/buttons/divider.js +12 -3
- package/lib/draft-js/buttons/embedded-code.js +16 -5
- package/lib/draft-js/buttons/enlarge.js +3 -0
- package/lib/draft-js/buttons/font-color.js +26 -0
- package/lib/draft-js/buttons/image.js +18 -7
- package/lib/draft-js/buttons/info-box.js +21 -5
- package/lib/draft-js/buttons/link.js +68 -22
- package/lib/draft-js/buttons/media.js +16 -3
- package/lib/draft-js/buttons/related-post.js +14 -3
- package/lib/draft-js/buttons/selector/align-selector.js +11 -2
- package/lib/draft-js/buttons/selector/audio-selector.js +33 -5
- package/lib/draft-js/buttons/selector/image-selector.js +64 -16
- package/lib/draft-js/buttons/selector/pagination.js +6 -2
- package/lib/draft-js/buttons/selector/post-selector.js +39 -6
- package/lib/draft-js/buttons/selector/search-box.js +9 -0
- package/lib/draft-js/buttons/selector/video-selector.js +33 -4
- package/lib/draft-js/buttons/side-index.js +31 -15
- package/lib/draft-js/buttons/slideshow.js +16 -7
- package/lib/draft-js/buttons/table.js +11 -5
- package/lib/draft-js/buttons/text-align.js +14 -0
- package/lib/draft-js/buttons/video.js +19 -5
- package/lib/draft-js/buttons/youtube.js +147 -0
- package/lib/draft-js/const.js +2 -0
- package/lib/draft-js/draft-converter/api-data-instance.js +14 -0
- package/lib/draft-js/draft-converter/atomic-block-processor.js +42 -12
- package/lib/draft-js/draft-converter/entities.js +3 -1
- package/lib/draft-js/draft-converter/index.js +29 -10
- package/lib/draft-js/draft-converter/inline-styles-processor.js +55 -22
- package/lib/draft-js/modifier.js +13 -5
- package/lib/draft-js/util.js +32 -0
- package/lib/index.js +4 -0
- package/lib/website/mirrormedia/block-renderer/background-image-block.js +14 -2
- package/lib/website/mirrormedia/block-renderer/background-video-block.js +14 -2
- package/lib/website/mirrormedia/block-renderer/color-box-block.js +14 -2
- package/lib/website/mirrormedia/block-renderer/embedded-code-block.js +12 -3
- package/lib/website/mirrormedia/block-renderer/image-block.js +108 -0
- package/lib/website/mirrormedia/block-renderer/info-box-block.js +14 -2
- package/lib/website/mirrormedia/block-renderer/side-index-block.js +13 -2
- package/lib/website/mirrormedia/block-renderer/slideshow-block.js +93 -7
- package/lib/website/mirrormedia/block-renderer/table-block.js +62 -28
- package/lib/website/mirrormedia/block-renderer-fn.js +48 -5
- package/lib/website/mirrormedia/draft-editor.js +138 -14
- package/lib/website/mirrormedia/entity-decorator.js +12 -1
- package/lib/website/mirrormedia/index.js +3 -0
- package/lib/website/mirrormedia/selector/align-selector.js +11 -2
- package/lib/website/mirrormedia/selector/audio-selector.js +34 -5
- package/lib/website/mirrormedia/selector/image-selector.js +75 -18
- package/lib/website/mirrormedia/selector/pagination.js +6 -2
- package/lib/website/mirrormedia/selector/post-selector.js +40 -6
- package/lib/website/mirrormedia/selector/search-box.js +9 -0
- package/lib/website/mirrormedia/selector/video-selector.js +36 -7
- package/lib/website/mirrormedia/shared-style/index.js +17 -0
- package/lib/website/mirrormedia/theme/index.js +28 -0
- package/lib/website/readr/block-renderer/background-image-block.js +66 -6
- package/lib/website/readr/block-renderer/background-video-block.js +76 -6
- package/lib/website/readr/block-renderer/color-box-block.js +14 -2
- package/lib/website/readr/block-renderer/image-block.js +106 -0
- package/lib/website/readr/block-renderer/info-box-block.js +14 -2
- package/lib/website/readr/block-renderer/side-index-block.js +13 -2
- package/lib/website/readr/block-renderer/table-block.js +62 -28
- package/lib/website/readr/block-renderer-fn.js +32 -3
- package/lib/website/readr/draft-editor.js +112 -12
- package/lib/website/readr/entity-decorator.js +4 -0
- package/lib/website/readr/index.js +3 -0
- package/lib/website/readr/selector/align-selector.js +11 -2
- package/lib/website/readr/selector/audio-selector.js +34 -17
- package/lib/website/readr/selector/image-selector.js +62 -16
- package/lib/website/readr/selector/pagination.js +6 -2
- package/lib/website/readr/selector/post-selector.js +40 -13
- package/lib/website/readr/selector/search-box.js +9 -0
- package/lib/website/readr/selector/video-selector.js +33 -4
- package/lib/website/readr/theme/index.js +39 -0
- package/package.json +8 -8
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.YoutubeButton = YoutubeButton;
|
|
7
|
+
exports.YoutubeInput = YoutubeInput;
|
|
8
|
+
|
|
9
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
+
|
|
11
|
+
var _draftJs = require("draft-js");
|
|
12
|
+
|
|
13
|
+
var _modals = require("@keystone-ui/modals");
|
|
14
|
+
|
|
15
|
+
var _fields = require("@keystone-ui/fields");
|
|
16
|
+
|
|
17
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
18
|
+
|
|
19
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
20
|
+
|
|
21
|
+
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); }
|
|
22
|
+
|
|
23
|
+
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; }
|
|
24
|
+
|
|
25
|
+
const Label = _styledComponents.default.label`
|
|
26
|
+
display: block;
|
|
27
|
+
font-weight: 600;
|
|
28
|
+
margin: 10px 0;
|
|
29
|
+
`;
|
|
30
|
+
|
|
31
|
+
function YoutubeInput(props) {
|
|
32
|
+
const {
|
|
33
|
+
isOpen,
|
|
34
|
+
onChange,
|
|
35
|
+
onCancel
|
|
36
|
+
} = props;
|
|
37
|
+
const initialInputValue = {
|
|
38
|
+
description: '',
|
|
39
|
+
youtubeId: ''
|
|
40
|
+
};
|
|
41
|
+
const [inputValue, setInputValue] = (0, _react.useState)(initialInputValue);
|
|
42
|
+
|
|
43
|
+
const clearInputValue = () => {
|
|
44
|
+
setInputValue(initialInputValue);
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
|
|
48
|
+
isOpen: isOpen
|
|
49
|
+
}, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
|
|
50
|
+
title: `Insert Youtube video`,
|
|
51
|
+
actions: {
|
|
52
|
+
cancel: {
|
|
53
|
+
label: 'Cancel',
|
|
54
|
+
action: () => {
|
|
55
|
+
clearInputValue();
|
|
56
|
+
onCancel();
|
|
57
|
+
}
|
|
58
|
+
},
|
|
59
|
+
confirm: {
|
|
60
|
+
label: 'Confirm',
|
|
61
|
+
action: () => {
|
|
62
|
+
onChange({
|
|
63
|
+
description: inputValue.description,
|
|
64
|
+
youtubeId: inputValue.youtubeId
|
|
65
|
+
});
|
|
66
|
+
clearInputValue();
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
}, /*#__PURE__*/_react.default.createElement(Label, {
|
|
71
|
+
htmlFor: "description"
|
|
72
|
+
}, "Youtube Description"), /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
|
|
73
|
+
onChange: e => setInputValue({
|
|
74
|
+
description: e.target.value,
|
|
75
|
+
youtubeId: inputValue.youtubeId
|
|
76
|
+
}),
|
|
77
|
+
type: "text",
|
|
78
|
+
placeholder: "description",
|
|
79
|
+
id: "description",
|
|
80
|
+
value: inputValue.description
|
|
81
|
+
}), /*#__PURE__*/_react.default.createElement(Label, {
|
|
82
|
+
htmlFor: "youtubeId"
|
|
83
|
+
}, "Youtube Videi Id"), /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
|
|
84
|
+
onChange: e => setInputValue({
|
|
85
|
+
description: inputValue.description,
|
|
86
|
+
youtubeId: e.target.value
|
|
87
|
+
}),
|
|
88
|
+
type: "text",
|
|
89
|
+
placeholder: "youtubeId",
|
|
90
|
+
id: "youtubeId",
|
|
91
|
+
value: inputValue.youtubeId
|
|
92
|
+
})));
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
function YoutubeButton(props) {
|
|
96
|
+
const [toShowInput, setToShowInput] = (0, _react.useState)(false);
|
|
97
|
+
const {
|
|
98
|
+
className,
|
|
99
|
+
editorState,
|
|
100
|
+
onChange: onEditorStateChange
|
|
101
|
+
} = props;
|
|
102
|
+
|
|
103
|
+
const onChange = ({
|
|
104
|
+
description,
|
|
105
|
+
youtubeId
|
|
106
|
+
}) => {
|
|
107
|
+
const contentState = editorState.getCurrentContent(); // create an InfoBox entity
|
|
108
|
+
|
|
109
|
+
const contentStateWithEntity = contentState.createEntity('YOUTUBE', 'IMMUTABLE', {
|
|
110
|
+
description,
|
|
111
|
+
youtubeId
|
|
112
|
+
});
|
|
113
|
+
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
|
|
114
|
+
|
|
115
|
+
const newEditorState = _draftJs.EditorState.set(editorState, {
|
|
116
|
+
currentContent: contentStateWithEntity
|
|
117
|
+
}); //The third parameter here is a space string, not an empty string
|
|
118
|
+
//If you set an empty string, you will get an error: Unknown DraftEntity key: null
|
|
119
|
+
|
|
120
|
+
|
|
121
|
+
onEditorStateChange(_draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
|
|
122
|
+
setToShowInput(false);
|
|
123
|
+
};
|
|
124
|
+
|
|
125
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(YoutubeInput, {
|
|
126
|
+
onChange: onChange,
|
|
127
|
+
onCancel: () => {
|
|
128
|
+
setToShowInput(false);
|
|
129
|
+
},
|
|
130
|
+
isOpen: toShowInput
|
|
131
|
+
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
132
|
+
className: className,
|
|
133
|
+
onClick: () => {
|
|
134
|
+
setToShowInput(true);
|
|
135
|
+
}
|
|
136
|
+
}, /*#__PURE__*/_react.default.createElement("svg", {
|
|
137
|
+
height: "16px",
|
|
138
|
+
width: "14px",
|
|
139
|
+
version: "1.1",
|
|
140
|
+
id: "Layer_1",
|
|
141
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
142
|
+
viewBox: "0 0 461.001 461.001"
|
|
143
|
+
}, /*#__PURE__*/_react.default.createElement("path", {
|
|
144
|
+
fill: "#6b7280",
|
|
145
|
+
d: "M365.257,67.393H95.744C42.866,67.393,0,110.259,0,163.137v134.728 c0,52.878,42.866,95.744,95.744,95.744h269.513c52.878,0,95.744-42.866,95.744-95.744V163.137 C461.001,110.259,418.135,67.393,365.257,67.393z M300.506,237.056l-126.06,60.123c-3.359,1.602-7.239-0.847-7.239-4.568V168.607 c0-3.774,3.982-6.22,7.348-4.514l126.06,63.881C304.363,229.873,304.298,235.248,300.506,237.056z"
|
|
146
|
+
})), /*#__PURE__*/_react.default.createElement("span", null, "Youtube")));
|
|
147
|
+
}
|
package/lib/draft-js/const.js
CHANGED
|
@@ -3,7 +3,9 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
+
|
|
6
7
|
var _const = require("@mirrormedia/lilith-draft-renderer/lib/draft-js/const");
|
|
8
|
+
|
|
7
9
|
Object.keys(_const).forEach(function (key) {
|
|
8
10
|
if (key === "default" || key === "__esModule") return;
|
|
9
11
|
if (key in exports && exports[key] === _const[key]) return;
|
|
@@ -4,9 +4,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
+
|
|
7
8
|
var _immutable = require("immutable");
|
|
9
|
+
|
|
8
10
|
var _shortid = _interopRequireDefault(require("shortid"));
|
|
11
|
+
|
|
9
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
+
|
|
10
14
|
const ApiDataInstanceRecord = (0, _immutable.Record)({
|
|
11
15
|
id: _shortid.default.generate(),
|
|
12
16
|
type: 'paragraph',
|
|
@@ -15,30 +19,40 @@ const ApiDataInstanceRecord = (0, _immutable.Record)({
|
|
|
15
19
|
styles: {},
|
|
16
20
|
textAlign: undefined
|
|
17
21
|
});
|
|
22
|
+
|
|
18
23
|
class ApiDataInstance extends ApiDataInstanceRecord {
|
|
19
24
|
constructor(props) {
|
|
20
25
|
let id = props && props.id || _shortid.default.generate();
|
|
26
|
+
|
|
21
27
|
props.id = id;
|
|
22
28
|
super(props);
|
|
23
29
|
}
|
|
30
|
+
|
|
24
31
|
getId() {
|
|
25
32
|
return this.get('id');
|
|
26
33
|
}
|
|
34
|
+
|
|
27
35
|
getType() {
|
|
28
36
|
return this.get('type');
|
|
29
37
|
}
|
|
38
|
+
|
|
30
39
|
getAlignment() {
|
|
31
40
|
return this.get('alignment');
|
|
32
41
|
}
|
|
42
|
+
|
|
33
43
|
getContent() {
|
|
34
44
|
return this.get('content');
|
|
35
45
|
}
|
|
46
|
+
|
|
36
47
|
getStyles() {
|
|
37
48
|
return this.get('styles');
|
|
38
49
|
}
|
|
50
|
+
|
|
39
51
|
getTextAlign() {
|
|
40
52
|
return this.get('textAlign');
|
|
41
53
|
}
|
|
54
|
+
|
|
42
55
|
}
|
|
56
|
+
|
|
43
57
|
var _default = ApiDataInstance;
|
|
44
58
|
exports.default = _default;
|
|
@@ -4,23 +4,27 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
+
|
|
7
8
|
var _lodash = _interopRequireDefault(require("lodash"));
|
|
9
|
+
|
|
8
10
|
var _apiDataInstance = _interopRequireDefault(require("./api-data-instance"));
|
|
11
|
+
|
|
9
12
|
var _entities = _interopRequireDefault(require("./entities"));
|
|
13
|
+
|
|
10
14
|
var _server = _interopRequireDefault(require("react-dom/server"));
|
|
15
|
+
|
|
11
16
|
var _draftJs = require("draft-js");
|
|
17
|
+
|
|
12
18
|
var _draftConvert = require("draft-convert");
|
|
19
|
+
|
|
13
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
|
-
/* eslint-disable @typescript-eslint/no-var-requires */
|
|
15
21
|
|
|
22
|
+
/* eslint-disable @typescript-eslint/no-var-requires */
|
|
16
23
|
// import sizeOf from 'image-size';
|
|
17
|
-
|
|
18
24
|
// eslint-disable-line
|
|
19
|
-
|
|
20
25
|
// import htmlparser2 from 'htmlparser2'
|
|
21
26
|
// eslint-disable-next-line no-undef
|
|
22
27
|
const htmlparser2 = require('htmlparser2');
|
|
23
|
-
|
|
24
28
|
/**
|
|
25
29
|
* @typedef {Object} DraftEditor.TableEntity.TableStyles
|
|
26
30
|
* @property {Record<string, string>[]} rows
|
|
@@ -32,23 +36,26 @@ const htmlparser2 = require('htmlparser2');
|
|
|
32
36
|
* @typedef {RawDraftContentState[][]} DraftEditor.TableEntity.TableData
|
|
33
37
|
*/
|
|
34
38
|
|
|
39
|
+
|
|
35
40
|
const processor = {
|
|
36
41
|
convertBlock(entityMap, block) {
|
|
37
42
|
let alignment = 'center';
|
|
38
43
|
let content;
|
|
39
44
|
let entityRange = block.entityRanges[0];
|
|
40
|
-
let styles = {};
|
|
41
|
-
// current block's entity data
|
|
45
|
+
let styles = {}; // current block's entity data
|
|
42
46
|
// ex:
|
|
43
47
|
// entity.type = IMAGE, entity.data={id,name,url...}
|
|
48
|
+
|
|
44
49
|
const entity = entityMap[entityRange.key];
|
|
45
|
-
let type = _lodash.default.get(entity, 'type', '');
|
|
46
50
|
|
|
47
|
-
// backward compatible. Old entity type might be lower case
|
|
51
|
+
let type = _lodash.default.get(entity, 'type', ''); // backward compatible. Old entity type might be lower case
|
|
52
|
+
|
|
53
|
+
|
|
48
54
|
switch (type && type.toUpperCase()) {
|
|
49
55
|
case _entities.default.INFOBOX.type:
|
|
50
56
|
{
|
|
51
57
|
var _entity$data, _entity$data2;
|
|
58
|
+
|
|
52
59
|
// About INFOBOX atomic block entity data structure,
|
|
53
60
|
// see `../views/editor/info-box.tsx` for more information.
|
|
54
61
|
content = [{
|
|
@@ -57,29 +64,37 @@ const processor = {
|
|
|
57
64
|
}];
|
|
58
65
|
break;
|
|
59
66
|
}
|
|
67
|
+
|
|
60
68
|
case _entities.default.COLORBOX.type:
|
|
61
69
|
{
|
|
62
70
|
var _entity$data3, _entity$data4;
|
|
71
|
+
|
|
63
72
|
content = [{
|
|
64
73
|
color: entity === null || entity === void 0 ? void 0 : (_entity$data3 = entity.data) === null || _entity$data3 === void 0 ? void 0 : _entity$data3.color,
|
|
65
74
|
body: entity === null || entity === void 0 ? void 0 : (_entity$data4 = entity.data) === null || _entity$data4 === void 0 ? void 0 : _entity$data4.body
|
|
66
75
|
}];
|
|
67
76
|
break;
|
|
68
77
|
}
|
|
78
|
+
|
|
69
79
|
case _entities.default.TABLE.type:
|
|
70
80
|
{
|
|
71
81
|
var _content, _content2;
|
|
82
|
+
|
|
72
83
|
// About TABLE atomic block entity data structure,
|
|
73
84
|
// see `../views/editor/table.tsx` for more information.
|
|
74
85
|
content = entity === null || entity === void 0 ? void 0 : entity.data;
|
|
75
86
|
/** @type DraftEditor.TableEntity.TableStyles */
|
|
87
|
+
|
|
76
88
|
const tableStyles = (_content = content) === null || _content === void 0 ? void 0 : _content.tableStyles;
|
|
77
89
|
/** @type DraftEditor.TableEntity.TableData */
|
|
90
|
+
|
|
78
91
|
const tableData = (_content2 = content) === null || _content2 === void 0 ? void 0 : _content2.tableData;
|
|
79
92
|
const rowsJsx = tableData === null || tableData === void 0 ? void 0 : tableData.map((row, rIndex) => {
|
|
80
93
|
var _tableStyles$rows;
|
|
94
|
+
|
|
81
95
|
const colsJsx = row === null || row === void 0 ? void 0 : row.map((col, cIndex) => {
|
|
82
96
|
var _tableStyles$columns, _tableStyles$cells, _tableStyles$cells$rI;
|
|
97
|
+
|
|
83
98
|
const colStyle = tableStyles === null || tableStyles === void 0 ? void 0 : (_tableStyles$columns = tableStyles.columns) === null || _tableStyles$columns === void 0 ? void 0 : _tableStyles$columns[cIndex];
|
|
84
99
|
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];
|
|
85
100
|
return /*#__PURE__*/React.createElement("td", {
|
|
@@ -94,17 +109,20 @@ const processor = {
|
|
|
94
109
|
key: `row_${rIndex}`,
|
|
95
110
|
style: tableStyles === null || tableStyles === void 0 ? void 0 : (_tableStyles$rows = tableStyles.rows) === null || _tableStyles$rows === void 0 ? void 0 : _tableStyles$rows[rIndex]
|
|
96
111
|
}, colsJsx);
|
|
97
|
-
});
|
|
98
|
-
|
|
112
|
+
}); // Use `React.renderToStsaticMarkup` to generate plain HTML string
|
|
113
|
+
|
|
99
114
|
const html = _server.default.renderToStaticMarkup( /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, rowsJsx)));
|
|
115
|
+
|
|
100
116
|
content = [{
|
|
101
117
|
html
|
|
102
118
|
}];
|
|
103
119
|
break;
|
|
104
120
|
}
|
|
121
|
+
|
|
105
122
|
case _entities.default.DIVIDER.type:
|
|
106
123
|
content = ['<hr>'];
|
|
107
124
|
break;
|
|
125
|
+
|
|
108
126
|
case _entities.default.BLOCKQUOTE.type:
|
|
109
127
|
// this is different from default blockquote of draftjs
|
|
110
128
|
// so we name our specific blockquote as 'quoteby'
|
|
@@ -113,12 +131,14 @@ const processor = {
|
|
|
113
131
|
content = _lodash.default.get(entity, 'data');
|
|
114
132
|
content = Array.isArray(content) ? content : [content];
|
|
115
133
|
break;
|
|
134
|
+
|
|
116
135
|
case _entities.default.AUDIO.type:
|
|
117
136
|
case _entities.default.IMAGE.type:
|
|
118
137
|
case _entities.default.IMAGEDIFF.type:
|
|
119
138
|
case _entities.default.SLIDESHOW.type:
|
|
120
139
|
case _entities.default['SLIDESHOW-V2'].type:
|
|
121
140
|
case _entities.default.VIDEO.type:
|
|
141
|
+
case _entities.default['VIDEO-V2'].type:
|
|
122
142
|
case _entities.default.YOUTUBE.type:
|
|
123
143
|
case _entities.default.BACKGROUNDIMAGE.type:
|
|
124
144
|
case _entities.default.BACKGROUNDVIDEO.type:
|
|
@@ -128,13 +148,17 @@ const processor = {
|
|
|
128
148
|
content = _lodash.default.get(entity, 'data');
|
|
129
149
|
content = Array.isArray(content) ? content : [content];
|
|
130
150
|
break;
|
|
151
|
+
|
|
131
152
|
case _entities.default.IMAGELINK.type:
|
|
132
153
|
{
|
|
133
154
|
// use Embedded component to dangerouslySetInnerHTML
|
|
134
155
|
type = _entities.default.EMBEDDEDCODE.type;
|
|
135
156
|
alignment = entity.data && entity.data.alignment || alignment;
|
|
157
|
+
|
|
136
158
|
let description = _lodash.default.get(entity, ['data', 'description'], '');
|
|
159
|
+
|
|
137
160
|
let url = _lodash.default.get(entity, ['data', 'url'], '');
|
|
161
|
+
|
|
138
162
|
content = [{
|
|
139
163
|
caption: description,
|
|
140
164
|
embeddedCodeWithoutScript: `<img alt="${description}" src="${url}" class="img-responsive"/>`,
|
|
@@ -142,11 +166,15 @@ const processor = {
|
|
|
142
166
|
}];
|
|
143
167
|
break;
|
|
144
168
|
}
|
|
169
|
+
|
|
145
170
|
case _entities.default.EMBEDDEDCODE.type:
|
|
146
171
|
{
|
|
147
172
|
alignment = entity.data && entity.data.alignment || alignment;
|
|
173
|
+
|
|
148
174
|
let caption = _lodash.default.get(entity, ['data', 'caption'], '');
|
|
175
|
+
|
|
149
176
|
let embeddedCode = _lodash.default.get(entity, ['data', 'embeddedCode'], '');
|
|
177
|
+
|
|
150
178
|
let script = {};
|
|
151
179
|
let scripts = [];
|
|
152
180
|
let scriptTagStart = false;
|
|
@@ -186,11 +214,12 @@ const processor = {
|
|
|
186
214
|
}];
|
|
187
215
|
break;
|
|
188
216
|
}
|
|
217
|
+
|
|
189
218
|
default:
|
|
190
219
|
return;
|
|
191
|
-
}
|
|
220
|
+
} // block type of api data should be lower case
|
|
221
|
+
|
|
192
222
|
|
|
193
|
-
// block type of api data should be lower case
|
|
194
223
|
return new _apiDataInstance.default({
|
|
195
224
|
id: block.key,
|
|
196
225
|
alignment,
|
|
@@ -199,6 +228,7 @@ const processor = {
|
|
|
199
228
|
styles
|
|
200
229
|
});
|
|
201
230
|
}
|
|
231
|
+
|
|
202
232
|
};
|
|
203
233
|
var _default = processor;
|
|
204
234
|
exports.default = _default;
|
|
@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
// 'use strict';
|
|
8
|
-
|
|
9
8
|
const ENTITY = {
|
|
10
9
|
DIVIDER: {
|
|
11
10
|
type: 'DIVIDER'
|
|
@@ -34,6 +33,9 @@ const ENTITY = {
|
|
|
34
33
|
VIDEO: {
|
|
35
34
|
type: 'VIDEO'
|
|
36
35
|
},
|
|
36
|
+
['VIDEO-V2']: {
|
|
37
|
+
type: 'VIDEO-V2'
|
|
38
|
+
},
|
|
37
39
|
IMAGE: {
|
|
38
40
|
type: 'IMAGE'
|
|
39
41
|
},
|
|
@@ -4,19 +4,27 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
+
|
|
7
8
|
var _immutable = require("immutable");
|
|
9
|
+
|
|
8
10
|
var _lodash = _interopRequireDefault(require("lodash"));
|
|
11
|
+
|
|
9
12
|
var InlineStylesProcessor = _interopRequireWildcard(require("./inline-styles-processor"));
|
|
13
|
+
|
|
10
14
|
var _apiDataInstance = _interopRequireDefault(require("./api-data-instance"));
|
|
15
|
+
|
|
11
16
|
var _atomicBlockProcessor = _interopRequireDefault(require("./atomic-block-processor"));
|
|
17
|
+
|
|
12
18
|
var _entities = _interopRequireDefault(require("./entities"));
|
|
19
|
+
|
|
13
20
|
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
|
+
|
|
14
22
|
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
|
+
|
|
15
24
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
16
|
-
// Modified from https://github.com/dburrows/draft-js-basic-html-editor/blob/master/src/utils/draftRawToHtml.js
|
|
17
25
|
|
|
26
|
+
// Modified from https://github.com/dburrows/draft-js-basic-html-editor/blob/master/src/utils/draftRawToHtml.js
|
|
18
27
|
// 'use strict';
|
|
19
|
-
|
|
20
28
|
let defaultBlockTagMap = {
|
|
21
29
|
atomic: `<div>%content%</div>`,
|
|
22
30
|
blockquote: `<blockquote>%content%</blockquote>`,
|
|
@@ -46,6 +54,7 @@ let defaultEntityTagMap = {
|
|
|
46
54
|
[_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>'],
|
|
47
55
|
[_entities.default.STOREDIMAGE.type]: ['<img alt="<%= data.name %>" src="<%= data.url %>" srcset="<%= data.urlMobileSized %> 800w, <%= data.urlTabletSized %> 1280w, <%= data.urlDesktopSized %> 2400w" class="center">', '</img>'],
|
|
48
56
|
[_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
|
+
|
|
49
58
|
/*[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-->'],
|
|
50
59
|
[ENTITY.IMAGELINK.type]: ['<img alt="<%= data.description %>" src="<%= data.url %>" class="<%= data.alignment %>">', '</img>'],*/
|
|
51
60
|
[_entities.default.LINK.type]: ['<a target="_blank" href="<%= data.url %>">', '</a>'],
|
|
@@ -57,35 +66,39 @@ let nestedTagMap = {
|
|
|
57
66
|
'ordered-list-item': ['<ol>', '</ol>'],
|
|
58
67
|
'unordered-list-item': ['<ul>', '</ul>']
|
|
59
68
|
};
|
|
69
|
+
|
|
60
70
|
function _convertInlineStyle(block, entityMap, blockTagMap, entityTagMap) {
|
|
61
71
|
return blockTagMap[block.type] ? blockTagMap[block.type].replace('%content%', InlineStylesProcessor.convertToHtml(inlineTagMap, entityTagMap, entityMap, block)) : blockTagMap.default.replace('%content%', InlineStylesProcessor.convertToHtml(inlineTagMap, block));
|
|
62
72
|
}
|
|
73
|
+
|
|
63
74
|
function _convertBlocksToHtml(blocks, entityMap, blockTagMap, entityTagMap) {
|
|
64
75
|
let html = '';
|
|
65
76
|
let nestLevel = []; // store the list type of the previous item: null/ol/ul
|
|
77
|
+
|
|
66
78
|
blocks.forEach(block => {
|
|
67
79
|
// create tag for <ol> or <ul>: deal with ordered/unordered list item
|
|
68
80
|
// if the block is a list-item && the previous block is not a list-item
|
|
69
81
|
if (nestedTagMap[block.type] && nestLevel[0] !== block.type) {
|
|
70
82
|
html += nestedTagMap[block.type][0]; // start with <ol> or <ul>
|
|
83
|
+
|
|
71
84
|
nestLevel.unshift(block.type);
|
|
72
|
-
}
|
|
85
|
+
} // end tag with </ol> or </ul>: deal with ordered/unordered list item
|
|
86
|
+
|
|
73
87
|
|
|
74
|
-
// end tag with </ol> or </ul>: deal with ordered/unordered list item
|
|
75
88
|
if (nestLevel.length > 0 && nestLevel[0] !== block.type) {
|
|
76
89
|
html += nestedTagMap[nestLevel.shift()][1]; // close with </ol> or </ul>
|
|
77
90
|
}
|
|
78
91
|
|
|
79
92
|
html += _convertInlineStyle(block, entityMap, blockTagMap, entityTagMap);
|
|
80
|
-
});
|
|
93
|
+
}); // end tag with </ol> or </ul>: or if it is the last block
|
|
81
94
|
|
|
82
|
-
// end tag with </ol> or </ul>: or if it is the last block
|
|
83
95
|
if (blocks.length > 0 && nestedTagMap[blocks[blocks.length - 1].type]) {
|
|
84
96
|
html += nestedTagMap[nestLevel.shift()][1]; // close with </ol> or </ul>
|
|
85
97
|
}
|
|
86
98
|
|
|
87
99
|
return html;
|
|
88
100
|
}
|
|
101
|
+
|
|
89
102
|
function convertBlocksToApiData(blocks, entityMap, entityTagMap) {
|
|
90
103
|
let apiDataArr = (0, _immutable.List)();
|
|
91
104
|
let content = [];
|
|
@@ -102,6 +115,7 @@ function convertBlocksToApiData(blocks, entityMap, entityTagMap) {
|
|
|
102
115
|
content = [];
|
|
103
116
|
nestLevel.shift();
|
|
104
117
|
}
|
|
118
|
+
|
|
105
119
|
if (block.type.startsWith('atomic') || block.type.startsWith('media')) {
|
|
106
120
|
try {
|
|
107
121
|
apiDataArr = apiDataArr.push(_atomicBlockProcessor.default.convertBlock(entityMap, block));
|
|
@@ -110,6 +124,7 @@ function convertBlocksToApiData(blocks, entityMap, entityTagMap) {
|
|
|
110
124
|
}
|
|
111
125
|
} else {
|
|
112
126
|
var _block$data;
|
|
127
|
+
|
|
113
128
|
let converted = InlineStylesProcessor.convertToHtml(inlineTagMap, entityTagMap, entityMap, block);
|
|
114
129
|
const type = block.type;
|
|
115
130
|
const textAlign = (_block$data = block.data) === null || _block$data === void 0 ? void 0 : _block$data.textAlign;
|
|
@@ -121,9 +136,8 @@ function convertBlocksToApiData(blocks, entityMap, entityTagMap) {
|
|
|
121
136
|
}));
|
|
122
137
|
}
|
|
123
138
|
} else {
|
|
124
|
-
let converted = InlineStylesProcessor.convertToHtml(inlineTagMap, entityTagMap, entityMap, block);
|
|
139
|
+
let converted = InlineStylesProcessor.convertToHtml(inlineTagMap, entityTagMap, entityMap, block); // previous block is not an item-list block
|
|
125
140
|
|
|
126
|
-
// previous block is not an item-list block
|
|
127
141
|
if (nestLevel.length === 0) {
|
|
128
142
|
nestLevel.unshift(block.type);
|
|
129
143
|
content.push(converted);
|
|
@@ -141,9 +155,8 @@ function convertBlocksToApiData(blocks, entityMap, entityTagMap) {
|
|
|
141
155
|
nestLevel[0] = block.type;
|
|
142
156
|
}
|
|
143
157
|
}
|
|
144
|
-
});
|
|
158
|
+
}); // last block is a item-list
|
|
145
159
|
|
|
146
|
-
// last block is a item-list
|
|
147
160
|
if (blocks.length > 0 && nestLevel.length > 0) {
|
|
148
161
|
let block = blocks[blocks.length - 1];
|
|
149
162
|
apiDataArr = apiDataArr.push(new _apiDataInstance.default({
|
|
@@ -152,8 +165,10 @@ function convertBlocksToApiData(blocks, entityMap, entityTagMap) {
|
|
|
152
165
|
content: content
|
|
153
166
|
}));
|
|
154
167
|
}
|
|
168
|
+
|
|
155
169
|
return apiDataArr;
|
|
156
170
|
}
|
|
171
|
+
|
|
157
172
|
function convertRawToHtml(raw, blockTagMap, entityTagMap) {
|
|
158
173
|
blockTagMap = _lodash.default.merge({}, defaultBlockTagMap, blockTagMap);
|
|
159
174
|
entityTagMap = entityTagMap || defaultEntityTagMap;
|
|
@@ -164,17 +179,21 @@ function convertRawToHtml(raw, blockTagMap, entityTagMap) {
|
|
|
164
179
|
html = _convertBlocksToHtml(blocks, entityMap, blockTagMap, entityTagMap);
|
|
165
180
|
return html;
|
|
166
181
|
}
|
|
182
|
+
|
|
167
183
|
function convertRawToApiData(raw) {
|
|
168
184
|
let apiData;
|
|
169
185
|
raw = raw || {};
|
|
170
186
|
const blocks = Array.isArray(raw.blocks) ? raw.blocks : [];
|
|
171
187
|
const entityMap = typeof raw.entityMap === 'object' ? raw.entityMap : {};
|
|
188
|
+
|
|
172
189
|
let entityTagMap = _lodash.default.merge({}, defaultEntityTagMap, {
|
|
173
190
|
[_entities.default.ANNOTATION.type]: [`<span data-entity-type="annotation" data-annotation-body="<%= data.bodyEscapedHTML %>">`, '</span>']
|
|
174
191
|
});
|
|
192
|
+
|
|
175
193
|
apiData = convertBlocksToApiData(blocks, entityMap, entityTagMap);
|
|
176
194
|
return apiData;
|
|
177
195
|
}
|
|
196
|
+
|
|
178
197
|
var _default = {
|
|
179
198
|
convertToHtml: convertRawToHtml,
|
|
180
199
|
convertToApiData: convertRawToApiData
|