@pie-lib/mask-markup 1.13.47-next.1 → 1.14.0-beta.2
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/CHANGELOG.md +22 -47
- package/NEXT.CHANGELOG.json +1 -0
- package/package.json +9 -5
- package/src/__tests__/__snapshots__/drag-in-the-blank.test.js.snap +316 -0
- package/src/__tests__/__snapshots__/mask.test.js.snap +55 -0
- package/src/__tests__/__snapshots__/with-mask.test.js.snap +62 -0
- package/src/__tests__/drag-in-the-blank.test.js +71 -0
- package/src/__tests__/index.test.js +39 -0
- package/src/__tests__/mask.test.js +152 -0
- package/src/__tests__/serialization.test.js +54 -0
- package/src/__tests__/utils.js +1 -0
- package/src/__tests__/with-mask.test.js +51 -0
- package/src/choices/__tests__/__snapshots__/index.test.js.snap +209 -0
- package/src/choices/__tests__/index.test.js +62 -0
- package/src/choices/choice.jsx +60 -6
- package/src/choices/index.jsx +2 -2
- package/src/components/__tests__/__snapshots__/blank.test.js.snap +111 -0
- package/src/components/__tests__/__snapshots__/correct-input.test.js.snap +64 -0
- package/src/components/__tests__/__snapshots__/dropdown.test.js.snap +133 -0
- package/src/components/__tests__/__snapshots__/input.test.js.snap +34 -0
- package/src/components/__tests__/blank.test.js +202 -0
- package/src/components/__tests__/correct-input.test.js +49 -0
- package/src/components/__tests__/dropdown.test.js +51 -0
- package/src/components/__tests__/input.test.js +50 -0
- package/src/components/blank.jsx +139 -28
- package/src/components/correct-input.jsx +6 -1
- package/src/components/dropdown.jsx +192 -71
- package/src/constructed-response.jsx +76 -18
- package/src/customizable.jsx +35 -0
- package/src/drag-in-the-blank.jsx +26 -3
- package/src/index.js +10 -1
- package/src/inline-dropdown.jsx +2 -0
- package/src/mask.jsx +30 -5
- package/src/with-mask.jsx +39 -2
- package/README.md +0 -14
- package/lib/choices/choice.js +0 -158
- package/lib/choices/choice.js.map +0 -1
- package/lib/choices/index.js +0 -127
- package/lib/choices/index.js.map +0 -1
- package/lib/componentize.js +0 -25
- package/lib/componentize.js.map +0 -1
- package/lib/components/blank.js +0 -303
- package/lib/components/blank.js.map +0 -1
- package/lib/components/correct-input.js +0 -113
- package/lib/components/correct-input.js.map +0 -1
- package/lib/components/dropdown.js +0 -216
- package/lib/components/dropdown.js.map +0 -1
- package/lib/components/input.js +0 -57
- package/lib/components/input.js.map +0 -1
- package/lib/constructed-response.js +0 -52
- package/lib/constructed-response.js.map +0 -1
- package/lib/drag-in-the-blank.js +0 -191
- package/lib/drag-in-the-blank.js.map +0 -1
- package/lib/index.js +0 -54
- package/lib/index.js.map +0 -1
- package/lib/inline-dropdown.js +0 -46
- package/lib/inline-dropdown.js.map +0 -1
- package/lib/mask.js +0 -215
- package/lib/mask.js.map +0 -1
- package/lib/serialization.js +0 -207
- package/lib/serialization.js.map +0 -1
- package/lib/with-mask.js +0 -93
- package/lib/with-mask.js.map +0 -1
package/lib/inline-dropdown.js
DELETED
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports["default"] = void 0;
|
|
9
|
-
|
|
10
|
-
var _react = _interopRequireDefault(require("react"));
|
|
11
|
-
|
|
12
|
-
var _dropdown = _interopRequireDefault(require("./components/dropdown"));
|
|
13
|
-
|
|
14
|
-
var _withMask = require("./with-mask");
|
|
15
|
-
|
|
16
|
-
// eslint-disable-next-line react/display-name
|
|
17
|
-
var _default = (0, _withMask.withMask)('dropdown', function (props) {
|
|
18
|
-
return function (node, data, onChange) {
|
|
19
|
-
var dataset = node.data ? node.data.dataset || {} : {};
|
|
20
|
-
|
|
21
|
-
if (dataset.component === 'dropdown') {
|
|
22
|
-
// eslint-disable-next-line react/prop-types
|
|
23
|
-
var choices = props.choices,
|
|
24
|
-
disabled = props.disabled,
|
|
25
|
-
feedback = props.feedback,
|
|
26
|
-
showCorrectAnswer = props.showCorrectAnswer;
|
|
27
|
-
var correctAnswer = choices && choices[dataset.id] && choices[dataset.id].find(function (c) {
|
|
28
|
-
return c.correct;
|
|
29
|
-
});
|
|
30
|
-
var finalChoice = showCorrectAnswer ? correctAnswer && correctAnswer.value : data[dataset.id];
|
|
31
|
-
return /*#__PURE__*/_react["default"].createElement(_dropdown["default"], {
|
|
32
|
-
key: "".concat(node.type, "-dropdown-").concat(dataset.id),
|
|
33
|
-
correct: feedback && feedback[dataset.id] && feedback[dataset.id] === 'correct',
|
|
34
|
-
disabled: disabled || showCorrectAnswer,
|
|
35
|
-
value: finalChoice,
|
|
36
|
-
id: dataset.id,
|
|
37
|
-
onChange: onChange,
|
|
38
|
-
choices: choices[dataset.id],
|
|
39
|
-
showCorrectAnswer: showCorrectAnswer
|
|
40
|
-
});
|
|
41
|
-
}
|
|
42
|
-
};
|
|
43
|
-
});
|
|
44
|
-
|
|
45
|
-
exports["default"] = _default;
|
|
46
|
-
//# sourceMappingURL=inline-dropdown.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/inline-dropdown.jsx"],"names":["props","node","data","onChange","dataset","component","choices","disabled","feedback","showCorrectAnswer","correctAnswer","id","find","c","correct","finalChoice","value","type"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA;eACe,wBAAS,UAAT,EAAqB,UAACA,KAAD;AAAA,SAAW,UAACC,IAAD,EAAOC,IAAP,EAAaC,QAAb,EAA0B;AACvE,QAAMC,OAAO,GAAGH,IAAI,CAACC,IAAL,GAAYD,IAAI,CAACC,IAAL,CAAUE,OAAV,IAAqB,EAAjC,GAAsC,EAAtD;;AACA,QAAIA,OAAO,CAACC,SAAR,KAAsB,UAA1B,EAAsC;AACpC;AACA,UAAQC,OAAR,GAA2DN,KAA3D,CAAQM,OAAR;AAAA,UAAiBC,QAAjB,GAA2DP,KAA3D,CAAiBO,QAAjB;AAAA,UAA2BC,QAA3B,GAA2DR,KAA3D,CAA2BQ,QAA3B;AAAA,UAAqCC,iBAArC,GAA2DT,KAA3D,CAAqCS,iBAArC;AACA,UAAMC,aAAa,GAAGJ,OAAO,IAAIA,OAAO,CAACF,OAAO,CAACO,EAAT,CAAlB,IAAkCL,OAAO,CAACF,OAAO,CAACO,EAAT,CAAP,CAAoBC,IAApB,CAAyB,UAACC,CAAD;AAAA,eAAOA,CAAC,CAACC,OAAT;AAAA,OAAzB,CAAxD;AACA,UAAMC,WAAW,GAAGN,iBAAiB,GAAGC,aAAa,IAAIA,aAAa,CAACM,KAAlC,GAA0Cd,IAAI,CAACE,OAAO,CAACO,EAAT,CAAnF;AAEA,0BACE,gCAAC,oBAAD;AACE,QAAA,GAAG,YAAKV,IAAI,CAACgB,IAAV,uBAA2Bb,OAAO,CAACO,EAAnC,CADL;AAEE,QAAA,OAAO,EAAEH,QAAQ,IAAIA,QAAQ,CAACJ,OAAO,CAACO,EAAT,CAApB,IAAoCH,QAAQ,CAACJ,OAAO,CAACO,EAAT,CAAR,KAAyB,SAFxE;AAGE,QAAA,QAAQ,EAAEJ,QAAQ,IAAIE,iBAHxB;AAIE,QAAA,KAAK,EAAEM,WAJT;AAKE,QAAA,EAAE,EAAEX,OAAO,CAACO,EALd;AAME,QAAA,QAAQ,EAAER,QANZ;AAOE,QAAA,OAAO,EAAEG,OAAO,CAACF,OAAO,CAACO,EAAT,CAPlB;AAQE,QAAA,iBAAiB,EAAEF;AARrB,QADF;AAYD;AACF,GArBmC;AAAA,CAArB,C","sourcesContent":["import React from 'react';\nimport Dropdown from './components/dropdown';\nimport { withMask } from './with-mask';\n\n// eslint-disable-next-line react/display-name\nexport default withMask('dropdown', (props) => (node, data, onChange) => {\n const dataset = node.data ? node.data.dataset || {} : {};\n if (dataset.component === 'dropdown') {\n // eslint-disable-next-line react/prop-types\n const { choices, disabled, feedback, showCorrectAnswer } = props;\n const correctAnswer = choices && choices[dataset.id] && choices[dataset.id].find((c) => c.correct);\n const finalChoice = showCorrectAnswer ? correctAnswer && correctAnswer.value : data[dataset.id];\n\n return (\n <Dropdown\n key={`${node.type}-dropdown-${dataset.id}`}\n correct={feedback && feedback[dataset.id] && feedback[dataset.id] === 'correct'}\n disabled={disabled || showCorrectAnswer}\n value={finalChoice}\n id={dataset.id}\n onChange={onChange}\n choices={choices[dataset.id]}\n showCorrectAnswer={showCorrectAnswer}\n />\n );\n }\n});\n"],"file":"inline-dropdown.js"}
|
package/lib/mask.js
DELETED
|
@@ -1,215 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.renderChildren = exports["default"] = void 0;
|
|
9
|
-
|
|
10
|
-
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
11
|
-
|
|
12
|
-
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
13
|
-
|
|
14
|
-
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
|
|
15
|
-
|
|
16
|
-
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
17
|
-
|
|
18
|
-
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
19
|
-
|
|
20
|
-
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
21
|
-
|
|
22
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
23
|
-
|
|
24
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
25
|
-
|
|
26
|
-
var _react = _interopRequireDefault(require("react"));
|
|
27
|
-
|
|
28
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
29
|
-
|
|
30
|
-
var _get = _interopRequireDefault(require("lodash/get"));
|
|
31
|
-
|
|
32
|
-
var _styles = require("@material-ui/core/styles");
|
|
33
|
-
|
|
34
|
-
var _serialization = require("./serialization");
|
|
35
|
-
|
|
36
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
37
|
-
|
|
38
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
39
|
-
|
|
40
|
-
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
|
|
41
|
-
|
|
42
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
43
|
-
|
|
44
|
-
var Paragraph = (0, _styles.withStyles)(function (theme) {
|
|
45
|
-
return {
|
|
46
|
-
para: {
|
|
47
|
-
paddingTop: 2 * theme.spacing.unit,
|
|
48
|
-
paddingBottom: 2 * theme.spacing.unit
|
|
49
|
-
}
|
|
50
|
-
};
|
|
51
|
-
})(function (props) {
|
|
52
|
-
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
53
|
-
className: props.classes.para
|
|
54
|
-
}, props.children);
|
|
55
|
-
});
|
|
56
|
-
var restrictWhitespaceTypes = ['tbody', 'tr'];
|
|
57
|
-
|
|
58
|
-
var addText = function addText(parentNode, text) {
|
|
59
|
-
var isWhitespace = text.trim() === '';
|
|
60
|
-
var parentType = parentNode && parentNode.type;
|
|
61
|
-
|
|
62
|
-
if (isWhitespace && restrictWhitespaceTypes.includes(parentType)) {
|
|
63
|
-
return undefined;
|
|
64
|
-
} else {
|
|
65
|
-
return text;
|
|
66
|
-
}
|
|
67
|
-
};
|
|
68
|
-
|
|
69
|
-
var getMark = function getMark(n) {
|
|
70
|
-
var mark = n.leaves.find(function (leave) {
|
|
71
|
-
return (0, _get["default"])(leave, 'marks', []).length;
|
|
72
|
-
});
|
|
73
|
-
|
|
74
|
-
if (mark) {
|
|
75
|
-
return mark.marks[0];
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
return null;
|
|
79
|
-
};
|
|
80
|
-
|
|
81
|
-
var renderChildren = function renderChildren(layout, value, onChange, rootRenderChildren, parentNode) {
|
|
82
|
-
if (!value) {
|
|
83
|
-
return null;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
var children = [];
|
|
87
|
-
(layout.nodes || []).forEach(function (n, index) {
|
|
88
|
-
var key = n.type ? "".concat(n.type, "-").concat(index) : "".concat(index);
|
|
89
|
-
|
|
90
|
-
if (n.isMath) {
|
|
91
|
-
children.push( /*#__PURE__*/_react["default"].createElement("span", {
|
|
92
|
-
dangerouslySetInnerHTML: {
|
|
93
|
-
__html: "<math displaystyle=\"true\">".concat(n.nodes[0].innerHTML, "</math>")
|
|
94
|
-
}
|
|
95
|
-
}));
|
|
96
|
-
return children;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
if (rootRenderChildren) {
|
|
100
|
-
var c = rootRenderChildren(n, value, onChange);
|
|
101
|
-
|
|
102
|
-
if (c) {
|
|
103
|
-
children.push(c);
|
|
104
|
-
return;
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
if (n.object === 'text') {
|
|
109
|
-
var content = n.leaves.reduce(function (acc, l) {
|
|
110
|
-
var t = l.text;
|
|
111
|
-
var extraText = addText(parentNode, t);
|
|
112
|
-
return extraText ? acc + extraText : acc;
|
|
113
|
-
}, '');
|
|
114
|
-
var mark = getMark(n);
|
|
115
|
-
|
|
116
|
-
if (mark) {
|
|
117
|
-
var markKey;
|
|
118
|
-
|
|
119
|
-
for (markKey in _serialization.MARK_TAGS) {
|
|
120
|
-
if (_serialization.MARK_TAGS[markKey] === mark.type) {
|
|
121
|
-
var Tag = markKey;
|
|
122
|
-
children.push( /*#__PURE__*/_react["default"].createElement(Tag, {
|
|
123
|
-
key: key
|
|
124
|
-
}, content));
|
|
125
|
-
break;
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
} else if (content.length > 0) {
|
|
129
|
-
children.push(content);
|
|
130
|
-
}
|
|
131
|
-
} else {
|
|
132
|
-
var subNodes = renderChildren(n, value, onChange, rootRenderChildren, n);
|
|
133
|
-
|
|
134
|
-
if (n.type === 'p' || n.type === 'paragraph') {
|
|
135
|
-
children.push( /*#__PURE__*/_react["default"].createElement(Paragraph, {
|
|
136
|
-
key: key
|
|
137
|
-
}, subNodes));
|
|
138
|
-
} else {
|
|
139
|
-
var _Tag = n.type;
|
|
140
|
-
|
|
141
|
-
if (n.nodes && n.nodes.length > 0) {
|
|
142
|
-
children.push( /*#__PURE__*/_react["default"].createElement(_Tag, (0, _extends2["default"])({
|
|
143
|
-
key: key
|
|
144
|
-
}, n.data.attributes), subNodes));
|
|
145
|
-
} else {
|
|
146
|
-
children.push( /*#__PURE__*/_react["default"].createElement(_Tag, (0, _extends2["default"])({
|
|
147
|
-
key: key
|
|
148
|
-
}, n.data.attributes)));
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
});
|
|
153
|
-
return children;
|
|
154
|
-
};
|
|
155
|
-
|
|
156
|
-
exports.renderChildren = renderChildren;
|
|
157
|
-
var MaskContainer = (0, _styles.withStyles)(function () {
|
|
158
|
-
return {
|
|
159
|
-
main: {
|
|
160
|
-
display: 'initial'
|
|
161
|
-
}
|
|
162
|
-
};
|
|
163
|
-
})(function (props) {
|
|
164
|
-
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
165
|
-
className: props.classes.main
|
|
166
|
-
}, props.children);
|
|
167
|
-
});
|
|
168
|
-
/**
|
|
169
|
-
* Renders a layout that uses the slate.js Value model structure.
|
|
170
|
-
*/
|
|
171
|
-
|
|
172
|
-
var Mask = /*#__PURE__*/function (_React$Component) {
|
|
173
|
-
(0, _inherits2["default"])(Mask, _React$Component);
|
|
174
|
-
|
|
175
|
-
var _super = _createSuper(Mask);
|
|
176
|
-
|
|
177
|
-
function Mask() {
|
|
178
|
-
var _this;
|
|
179
|
-
|
|
180
|
-
(0, _classCallCheck2["default"])(this, Mask);
|
|
181
|
-
|
|
182
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
183
|
-
args[_key] = arguments[_key];
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
_this = _super.call.apply(_super, [this].concat(args));
|
|
187
|
-
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleChange", function (id, value) {
|
|
188
|
-
var data = _objectSpread(_objectSpread({}, _this.props.value), {}, (0, _defineProperty2["default"])({}, id, value));
|
|
189
|
-
|
|
190
|
-
_this.props.onChange(data);
|
|
191
|
-
});
|
|
192
|
-
return _this;
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
(0, _createClass2["default"])(Mask, [{
|
|
196
|
-
key: "render",
|
|
197
|
-
value: function render() {
|
|
198
|
-
var _this$props = this.props,
|
|
199
|
-
value = _this$props.value,
|
|
200
|
-
layout = _this$props.layout;
|
|
201
|
-
var children = renderChildren(layout, value, this.handleChange, this.props.renderChildren);
|
|
202
|
-
return /*#__PURE__*/_react["default"].createElement(MaskContainer, null, children);
|
|
203
|
-
}
|
|
204
|
-
}]);
|
|
205
|
-
return Mask;
|
|
206
|
-
}(_react["default"].Component);
|
|
207
|
-
|
|
208
|
-
exports["default"] = Mask;
|
|
209
|
-
(0, _defineProperty2["default"])(Mask, "propTypes", {
|
|
210
|
-
renderChildren: _propTypes["default"].func,
|
|
211
|
-
layout: _propTypes["default"].object,
|
|
212
|
-
value: _propTypes["default"].object,
|
|
213
|
-
onChange: _propTypes["default"].func
|
|
214
|
-
});
|
|
215
|
-
//# sourceMappingURL=mask.js.map
|
package/lib/mask.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/mask.jsx"],"names":["Paragraph","theme","para","paddingTop","spacing","unit","paddingBottom","props","classes","children","restrictWhitespaceTypes","addText","parentNode","text","isWhitespace","trim","parentType","type","includes","undefined","getMark","n","mark","leaves","find","leave","length","marks","renderChildren","layout","value","onChange","rootRenderChildren","nodes","forEach","index","key","isMath","push","__html","innerHTML","c","object","content","reduce","acc","l","t","extraText","markKey","MARK_TAGS","Tag","subNodes","data","attributes","MaskContainer","main","display","Mask","id","handleChange","React","Component","PropTypes","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport get from 'lodash/get';\nimport { withStyles } from '@material-ui/core/styles';\nimport { MARK_TAGS } from './serialization';\n\nconst Paragraph = withStyles((theme) => ({\n para: {\n paddingTop: 2 * theme.spacing.unit,\n paddingBottom: 2 * theme.spacing.unit,\n },\n}))((props) => <div className={props.classes.para}>{props.children}</div>);\n\nconst restrictWhitespaceTypes = ['tbody', 'tr'];\n\nconst addText = (parentNode, text) => {\n const isWhitespace = text.trim() === '';\n const parentType = parentNode && parentNode.type;\n\n if (isWhitespace && restrictWhitespaceTypes.includes(parentType)) {\n return undefined;\n } else {\n return text;\n }\n};\n\nconst getMark = (n) => {\n const mark = n.leaves.find((leave) => get(leave, 'marks', []).length);\n\n if (mark) {\n return mark.marks[0];\n }\n\n return null;\n};\n\nexport const renderChildren = (layout, value, onChange, rootRenderChildren, parentNode) => {\n if (!value) {\n return null;\n }\n\n const children = [];\n\n (layout.nodes || []).forEach((n, index) => {\n const key = n.type ? `${n.type}-${index}` : `${index}`;\n\n if (n.isMath) {\n children.push(\n <span\n dangerouslySetInnerHTML={{\n __html: `<math displaystyle=\"true\">${n.nodes[0].innerHTML}</math>`,\n }}\n />,\n );\n return children;\n }\n\n if (rootRenderChildren) {\n const c = rootRenderChildren(n, value, onChange);\n if (c) {\n children.push(c);\n return;\n }\n }\n\n if (n.object === 'text') {\n const content = n.leaves.reduce((acc, l) => {\n const t = l.text;\n const extraText = addText(parentNode, t);\n return extraText ? acc + extraText : acc;\n }, '');\n const mark = getMark(n);\n\n if (mark) {\n let markKey;\n\n for (markKey in MARK_TAGS) {\n if (MARK_TAGS[markKey] === mark.type) {\n const Tag = markKey;\n\n children.push(<Tag key={key}>{content}</Tag>);\n break;\n }\n }\n } else if (content.length > 0) {\n children.push(content);\n }\n } else {\n const subNodes = renderChildren(n, value, onChange, rootRenderChildren, n);\n if (n.type === 'p' || n.type === 'paragraph') {\n children.push(<Paragraph key={key}>{subNodes}</Paragraph>);\n } else {\n const Tag = n.type;\n if (n.nodes && n.nodes.length > 0) {\n children.push(\n <Tag key={key} {...n.data.attributes}>\n {subNodes}\n </Tag>,\n );\n } else {\n children.push(<Tag key={key} {...n.data.attributes} />);\n }\n }\n }\n });\n return children;\n};\n\nconst MaskContainer = withStyles(() => ({\n main: {\n display: 'initial',\n },\n}))((props) => <div className={props.classes.main}>{props.children}</div>);\n\n/**\n * Renders a layout that uses the slate.js Value model structure.\n */\nexport default class Mask extends React.Component {\n static propTypes = {\n renderChildren: PropTypes.func,\n layout: PropTypes.object,\n value: PropTypes.object,\n onChange: PropTypes.func,\n };\n\n handleChange = (id, value) => {\n const data = { ...this.props.value, [id]: value };\n this.props.onChange(data);\n };\n\n render() {\n const { value, layout } = this.props;\n const children = renderChildren(layout, value, this.handleChange, this.props.renderChildren);\n\n return <MaskContainer>{children}</MaskContainer>;\n }\n}\n"],"file":"mask.js"}
|
package/lib/serialization.js
DELETED
|
@@ -1,207 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.reactAttributes = exports.parseStyleString = exports.deserialize = exports.MARK_TAGS = void 0;
|
|
9
|
-
|
|
10
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
|
-
|
|
12
|
-
var _slateHtmlSerializer = _interopRequireDefault(require("slate-html-serializer"));
|
|
13
|
-
|
|
14
|
-
var _toStyle = require("to-style");
|
|
15
|
-
|
|
16
|
-
var _debug = _interopRequireDefault(require("debug"));
|
|
17
|
-
|
|
18
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
19
|
-
|
|
20
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
21
|
-
|
|
22
|
-
var log = (0, _debug["default"])('@pie-lib:mask-markup:serialization');
|
|
23
|
-
var INLINE = ['span'];
|
|
24
|
-
var MARK = ['em', 'strong', 'u'];
|
|
25
|
-
var TEXT_NODE = 3;
|
|
26
|
-
var COMMENT_NODE = 8;
|
|
27
|
-
|
|
28
|
-
var attr = function attr(el) {
|
|
29
|
-
if (!el.attributes || el.attributes.length <= 0) {
|
|
30
|
-
return undefined;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
var out = {};
|
|
34
|
-
var i;
|
|
35
|
-
|
|
36
|
-
for (i = 0; i < el.attributes.length; i++) {
|
|
37
|
-
var a = el.attributes[i];
|
|
38
|
-
out[a.name] = a.value;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
return out;
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
var getObject = function getObject(type) {
|
|
45
|
-
if (INLINE.includes(type)) {
|
|
46
|
-
return 'inline';
|
|
47
|
-
} else if (MARK.includes(type)) {
|
|
48
|
-
return 'mark';
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
return 'block';
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
var parseStyleString = function parseStyleString(s) {
|
|
55
|
-
var regex = /([\w-]*)\s*:\s*([^;]*)/g;
|
|
56
|
-
var match;
|
|
57
|
-
var result = {};
|
|
58
|
-
|
|
59
|
-
while (match = regex.exec(s)) {
|
|
60
|
-
result[match[1]] = match[2].trim();
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
return result;
|
|
64
|
-
};
|
|
65
|
-
|
|
66
|
-
exports.parseStyleString = parseStyleString;
|
|
67
|
-
|
|
68
|
-
var reactAttributes = function reactAttributes(o) {
|
|
69
|
-
return (0, _toStyle.object)(o, {
|
|
70
|
-
camelize: true,
|
|
71
|
-
addUnits: false
|
|
72
|
-
});
|
|
73
|
-
};
|
|
74
|
-
|
|
75
|
-
exports.reactAttributes = reactAttributes;
|
|
76
|
-
|
|
77
|
-
var handleStyles = function handleStyles(el, attribute) {
|
|
78
|
-
var styleString = el.getAttribute(attribute);
|
|
79
|
-
return reactAttributes(parseStyleString(styleString));
|
|
80
|
-
};
|
|
81
|
-
|
|
82
|
-
var handleClass = function handleClass(el, acc, attribute) {
|
|
83
|
-
var classNames = el.getAttribute(attribute);
|
|
84
|
-
delete acc["class"];
|
|
85
|
-
return classNames;
|
|
86
|
-
};
|
|
87
|
-
|
|
88
|
-
var attributesToMap = function attributesToMap(el) {
|
|
89
|
-
return function (acc, attribute) {
|
|
90
|
-
if (!el.getAttribute) {
|
|
91
|
-
return acc;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
var value = el.getAttribute(attribute);
|
|
95
|
-
|
|
96
|
-
if (value) {
|
|
97
|
-
switch (attribute) {
|
|
98
|
-
case 'style':
|
|
99
|
-
acc.style = handleStyles(el, attribute);
|
|
100
|
-
break;
|
|
101
|
-
|
|
102
|
-
case 'class':
|
|
103
|
-
acc.className = handleClass(el, acc, attribute);
|
|
104
|
-
break;
|
|
105
|
-
|
|
106
|
-
default:
|
|
107
|
-
acc[attribute] = el.getAttribute(attribute);
|
|
108
|
-
break;
|
|
109
|
-
}
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
return acc;
|
|
113
|
-
};
|
|
114
|
-
};
|
|
115
|
-
|
|
116
|
-
var attributes = ['border', 'class', 'style'];
|
|
117
|
-
/**
|
|
118
|
-
* Tags to marks.
|
|
119
|
-
*
|
|
120
|
-
* @type {Object}
|
|
121
|
-
*/
|
|
122
|
-
|
|
123
|
-
var MARK_TAGS = {
|
|
124
|
-
b: 'bold',
|
|
125
|
-
em: 'italic',
|
|
126
|
-
u: 'underline',
|
|
127
|
-
s: 'strikethrough',
|
|
128
|
-
code: 'code',
|
|
129
|
-
strong: 'strong'
|
|
130
|
-
};
|
|
131
|
-
exports.MARK_TAGS = MARK_TAGS;
|
|
132
|
-
var marks = {
|
|
133
|
-
deserialize: function deserialize(el, next) {
|
|
134
|
-
var mark = MARK_TAGS[el.tagName.toLowerCase()];
|
|
135
|
-
if (!mark) return;
|
|
136
|
-
log('[deserialize] mark: ', mark);
|
|
137
|
-
return {
|
|
138
|
-
object: 'mark',
|
|
139
|
-
type: mark,
|
|
140
|
-
nodes: next(el.childNodes)
|
|
141
|
-
};
|
|
142
|
-
}
|
|
143
|
-
};
|
|
144
|
-
var rules = [marks, {
|
|
145
|
-
/**
|
|
146
|
-
* deserialize everything, we're not fussy about the dom structure for now.
|
|
147
|
-
*/
|
|
148
|
-
deserialize: function deserialize(el, next) {
|
|
149
|
-
if (el.nodeType === COMMENT_NODE) {
|
|
150
|
-
return undefined;
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
if (el.nodeType === TEXT_NODE) {
|
|
154
|
-
return {
|
|
155
|
-
object: 'text',
|
|
156
|
-
leaves: [{
|
|
157
|
-
text: el.textContent
|
|
158
|
-
}]
|
|
159
|
-
};
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
var type = el.tagName.toLowerCase();
|
|
163
|
-
var normalAttrs = attr(el) || {};
|
|
164
|
-
|
|
165
|
-
if (type == 'audio' && normalAttrs.controls == '') {
|
|
166
|
-
normalAttrs.controls = true;
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
var allAttrs = attributes.reduce(attributesToMap(el), _objectSpread({}, normalAttrs));
|
|
170
|
-
var object = getObject(type);
|
|
171
|
-
|
|
172
|
-
if (el.tagName.toLowerCase() === 'math') {
|
|
173
|
-
return {
|
|
174
|
-
isMath: true,
|
|
175
|
-
nodes: [el]
|
|
176
|
-
};
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
return {
|
|
180
|
-
object: object,
|
|
181
|
-
type: type,
|
|
182
|
-
data: {
|
|
183
|
-
dataset: _objectSpread({}, el.dataset),
|
|
184
|
-
attributes: _objectSpread({}, allAttrs)
|
|
185
|
-
},
|
|
186
|
-
nodes: next(el.childNodes)
|
|
187
|
-
};
|
|
188
|
-
}
|
|
189
|
-
}];
|
|
190
|
-
/**
|
|
191
|
-
* Create a new serializer instance with our `rules` from above.
|
|
192
|
-
* Having a default div block will just put every div on it's own line, which is not ideal.
|
|
193
|
-
*/
|
|
194
|
-
|
|
195
|
-
var html = new _slateHtmlSerializer["default"]({
|
|
196
|
-
rules: rules,
|
|
197
|
-
defaultBlock: 'span'
|
|
198
|
-
});
|
|
199
|
-
|
|
200
|
-
var deserialize = function deserialize(s) {
|
|
201
|
-
return html.deserialize(s, {
|
|
202
|
-
toJSON: true
|
|
203
|
-
});
|
|
204
|
-
};
|
|
205
|
-
|
|
206
|
-
exports.deserialize = deserialize;
|
|
207
|
-
//# sourceMappingURL=serialization.js.map
|
package/lib/serialization.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/serialization.js"],"names":["log","INLINE","MARK","TEXT_NODE","COMMENT_NODE","attr","el","attributes","length","undefined","out","i","a","name","value","getObject","type","includes","parseStyleString","s","regex","match","result","exec","trim","reactAttributes","o","camelize","addUnits","handleStyles","attribute","styleString","getAttribute","handleClass","acc","classNames","attributesToMap","style","className","MARK_TAGS","b","em","u","code","strong","marks","deserialize","next","mark","tagName","toLowerCase","object","nodes","childNodes","rules","nodeType","leaves","text","textContent","normalAttrs","controls","allAttrs","reduce","isMath","data","dataset","html","Html","defaultBlock","toJSON"],"mappings":"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","sourcesContent":["import Html from 'slate-html-serializer';\nimport { object as toStyleObject } from 'to-style';\nimport debug from 'debug';\n\nconst log = debug('@pie-lib:mask-markup:serialization');\n\nconst INLINE = ['span'];\nconst MARK = ['em', 'strong', 'u'];\nconst TEXT_NODE = 3;\nconst COMMENT_NODE = 8;\n\nconst attr = (el) => {\n if (!el.attributes || el.attributes.length <= 0) {\n return undefined;\n }\n\n const out = {};\n let i;\n\n for (i = 0; i < el.attributes.length; i++) {\n const a = el.attributes[i];\n\n out[a.name] = a.value;\n }\n\n return out;\n};\n\nconst getObject = (type) => {\n if (INLINE.includes(type)) {\n return 'inline';\n } else if (MARK.includes(type)) {\n return 'mark';\n }\n return 'block';\n};\n\nexport const parseStyleString = (s) => {\n const regex = /([\\w-]*)\\s*:\\s*([^;]*)/g;\n let match;\n const result = {};\n while ((match = regex.exec(s))) {\n result[match[1]] = match[2].trim();\n }\n return result;\n};\n\nexport const reactAttributes = (o) => toStyleObject(o, { camelize: true, addUnits: false });\n\nconst handleStyles = (el, attribute) => {\n const styleString = el.getAttribute(attribute);\n\n return reactAttributes(parseStyleString(styleString));\n};\n\nconst handleClass = (el, acc, attribute) => {\n const classNames = el.getAttribute(attribute);\n\n delete acc.class;\n\n return classNames;\n};\n\nconst attributesToMap = (el) => (acc, attribute) => {\n if (!el.getAttribute) {\n return acc;\n }\n\n const value = el.getAttribute(attribute);\n\n if (value) {\n switch (attribute) {\n case 'style':\n acc.style = handleStyles(el, attribute);\n break;\n case 'class':\n acc.className = handleClass(el, acc, attribute);\n break;\n default:\n acc[attribute] = el.getAttribute(attribute);\n break;\n }\n }\n\n return acc;\n};\n\nconst attributes = ['border', 'class', 'style'];\n\n/**\n * Tags to marks.\n *\n * @type {Object}\n */\n\nexport const MARK_TAGS = {\n b: 'bold',\n em: 'italic',\n u: 'underline',\n s: 'strikethrough',\n code: 'code',\n strong: 'strong',\n};\n\nconst marks = {\n deserialize(el, next) {\n const mark = MARK_TAGS[el.tagName.toLowerCase()];\n if (!mark) return;\n log('[deserialize] mark: ', mark);\n return {\n object: 'mark',\n type: mark,\n nodes: next(el.childNodes),\n };\n },\n};\n\nconst rules = [\n marks,\n {\n /**\n * deserialize everything, we're not fussy about the dom structure for now.\n */\n deserialize: (el, next) => {\n if (el.nodeType === COMMENT_NODE) {\n return undefined;\n }\n\n if (el.nodeType === TEXT_NODE) {\n return {\n object: 'text',\n leaves: [{ text: el.textContent }],\n };\n }\n\n const type = el.tagName.toLowerCase();\n\n const normalAttrs = attr(el) || {};\n\n if (type == 'audio' && normalAttrs.controls == '') {\n normalAttrs.controls = true;\n }\n\n const allAttrs = attributes.reduce(attributesToMap(el), { ...normalAttrs });\n const object = getObject(type);\n\n if (el.tagName.toLowerCase() === 'math') {\n return {\n isMath: true,\n nodes: [el],\n };\n }\n\n return {\n object,\n type,\n data: { dataset: { ...el.dataset }, attributes: { ...allAttrs } },\n nodes: next(el.childNodes),\n };\n },\n },\n];\n\n/**\n * Create a new serializer instance with our `rules` from above.\n * Having a default div block will just put every div on it's own line, which is not ideal.\n */\nconst html = new Html({ rules, defaultBlock: 'span' });\n\nexport const deserialize = (s) => html.deserialize(s, { toJSON: true });\n"],"file":"serialization.js"}
|
package/lib/with-mask.js
DELETED
|
@@ -1,93 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.withMask = exports.buildLayoutFromMarkup = void 0;
|
|
9
|
-
|
|
10
|
-
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
11
|
-
|
|
12
|
-
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
13
|
-
|
|
14
|
-
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
15
|
-
|
|
16
|
-
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
17
|
-
|
|
18
|
-
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
19
|
-
|
|
20
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
21
|
-
|
|
22
|
-
var _react = _interopRequireDefault(require("react"));
|
|
23
|
-
|
|
24
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
25
|
-
|
|
26
|
-
var _mask = _interopRequireDefault(require("./mask"));
|
|
27
|
-
|
|
28
|
-
var _componentize2 = _interopRequireDefault(require("./componentize"));
|
|
29
|
-
|
|
30
|
-
var _serialization = require("./serialization");
|
|
31
|
-
|
|
32
|
-
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
|
|
33
|
-
|
|
34
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
35
|
-
|
|
36
|
-
var buildLayoutFromMarkup = function buildLayoutFromMarkup(markup, type) {
|
|
37
|
-
var _componentize = (0, _componentize2["default"])(markup, type),
|
|
38
|
-
processed = _componentize.markup;
|
|
39
|
-
|
|
40
|
-
var value = (0, _serialization.deserialize)(processed);
|
|
41
|
-
return value.document;
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
exports.buildLayoutFromMarkup = buildLayoutFromMarkup;
|
|
45
|
-
|
|
46
|
-
var withMask = function withMask(type, renderChildren) {
|
|
47
|
-
var _class;
|
|
48
|
-
|
|
49
|
-
return _class = /*#__PURE__*/function (_React$Component) {
|
|
50
|
-
(0, _inherits2["default"])(WithMask, _React$Component);
|
|
51
|
-
|
|
52
|
-
var _super = _createSuper(WithMask);
|
|
53
|
-
|
|
54
|
-
function WithMask() {
|
|
55
|
-
(0, _classCallCheck2["default"])(this, WithMask);
|
|
56
|
-
return _super.apply(this, arguments);
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
(0, _createClass2["default"])(WithMask, [{
|
|
60
|
-
key: "render",
|
|
61
|
-
value: function render() {
|
|
62
|
-
var _this$props = this.props,
|
|
63
|
-
markup = _this$props.markup,
|
|
64
|
-
layout = _this$props.layout,
|
|
65
|
-
value = _this$props.value,
|
|
66
|
-
onChange = _this$props.onChange;
|
|
67
|
-
var maskLayout = layout ? layout : buildLayoutFromMarkup(markup, type);
|
|
68
|
-
return /*#__PURE__*/_react["default"].createElement(_mask["default"], {
|
|
69
|
-
layout: maskLayout,
|
|
70
|
-
value: value,
|
|
71
|
-
onChange: onChange,
|
|
72
|
-
renderChildren: renderChildren(this.props)
|
|
73
|
-
});
|
|
74
|
-
}
|
|
75
|
-
}]);
|
|
76
|
-
return WithMask;
|
|
77
|
-
}(_react["default"].Component), (0, _defineProperty2["default"])(_class, "propTypes", {
|
|
78
|
-
/**
|
|
79
|
-
* At the start we'll probably work with markup
|
|
80
|
-
*/
|
|
81
|
-
markup: _propTypes["default"].string,
|
|
82
|
-
|
|
83
|
-
/**
|
|
84
|
-
* Once we start authoring, it may make sense for use to us layout, which will be a simple js object that maps to `slate.Value`.
|
|
85
|
-
*/
|
|
86
|
-
layout: _propTypes["default"].object,
|
|
87
|
-
value: _propTypes["default"].object,
|
|
88
|
-
onChange: _propTypes["default"].func
|
|
89
|
-
}), _class;
|
|
90
|
-
};
|
|
91
|
-
|
|
92
|
-
exports.withMask = withMask;
|
|
93
|
-
//# sourceMappingURL=with-mask.js.map
|
package/lib/with-mask.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/with-mask.jsx"],"names":["buildLayoutFromMarkup","markup","type","processed","value","document","withMask","renderChildren","props","layout","onChange","maskLayout","React","Component","PropTypes","string","object","func"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEO,IAAMA,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACC,MAAD,EAASC,IAAT,EAAkB;AACrD,sBAA8B,+BAAaD,MAAb,EAAqBC,IAArB,CAA9B;AAAA,MAAgBC,SAAhB,iBAAQF,MAAR;;AACA,MAAMG,KAAK,GAAG,gCAAYD,SAAZ,CAAd;AACA,SAAOC,KAAK,CAACC,QAAb;AACD,CAJM;;;;AAMA,IAAMC,QAAQ,GAAG,SAAXA,QAAW,CAACJ,IAAD,EAAOK,cAAP,EAA0B;AAAA;;AAChD;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA,aAcE,kBAAS;AACP,0BAA4C,KAAKC,KAAjD;AAAA,YAAQP,MAAR,eAAQA,MAAR;AAAA,YAAgBQ,MAAhB,eAAgBA,MAAhB;AAAA,YAAwBL,KAAxB,eAAwBA,KAAxB;AAAA,YAA+BM,QAA/B,eAA+BA,QAA/B;AAEA,YAAMC,UAAU,GAAGF,MAAM,GAAGA,MAAH,GAAYT,qBAAqB,CAACC,MAAD,EAASC,IAAT,CAA1D;AACA,4BAAO,gCAAC,gBAAD;AAAM,UAAA,MAAM,EAAES,UAAd;AAA0B,UAAA,KAAK,EAAEP,KAAjC;AAAwC,UAAA,QAAQ,EAAEM,QAAlD;AAA4D,UAAA,cAAc,EAAEH,cAAc,CAAC,KAAKC,KAAN;AAA1F,UAAP;AACD;AAnBH;AAAA;AAAA,IAA8BI,kBAAMC,SAApC,yDACqB;AACjB;AACN;AACA;AACMZ,IAAAA,MAAM,EAAEa,sBAAUC,MAJD;;AAKjB;AACN;AACA;AACMN,IAAAA,MAAM,EAAEK,sBAAUE,MARD;AASjBZ,IAAAA,KAAK,EAAEU,sBAAUE,MATA;AAUjBN,IAAAA,QAAQ,EAAEI,sBAAUG;AAVH,GADrB;AAqBD,CAtBM","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Mask from './mask';\nimport componentize from './componentize';\nimport { deserialize } from './serialization';\n\nexport const buildLayoutFromMarkup = (markup, type) => {\n const { markup: processed } = componentize(markup, type);\n const value = deserialize(processed);\n return value.document;\n};\n\nexport const withMask = (type, renderChildren) => {\n return class WithMask extends React.Component {\n static propTypes = {\n /**\n * At the start we'll probably work with markup\n */\n markup: PropTypes.string,\n /**\n * Once we start authoring, it may make sense for use to us layout, which will be a simple js object that maps to `slate.Value`.\n */\n layout: PropTypes.object,\n value: PropTypes.object,\n onChange: PropTypes.func,\n };\n\n render() {\n const { markup, layout, value, onChange } = this.props;\n\n const maskLayout = layout ? layout : buildLayoutFromMarkup(markup, type);\n return <Mask layout={maskLayout} value={value} onChange={onChange} renderChildren={renderChildren(this.props)} />;\n }\n };\n};\n"],"file":"with-mask.js"}
|