@pie-lib/editable-html 11.4.0 → 11.5.0
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 +13 -65
- package/package.json +8 -7
- package/src/editor.jsx +2 -2
- package/src/plugins/media/media-dialog.js +1 -1
- package/src/plugins/respArea/drag-in-the-blank/choice.jsx +1 -1
- package/src/plugins/toolbar/editor-and-toolbar.jsx +1 -1
- package/lib/block-tags.js +0 -25
- package/lib/block-tags.js.map +0 -1
- package/lib/constants.js +0 -16
- package/lib/constants.js.map +0 -1
- package/lib/editor.js +0 -1355
- package/lib/editor.js.map +0 -1
- package/lib/index.js +0 -269
- package/lib/index.js.map +0 -1
- package/lib/parse-html.js +0 -16
- package/lib/parse-html.js.map +0 -1
- package/lib/plugins/characters/custom-popper.js +0 -73
- package/lib/plugins/characters/custom-popper.js.map +0 -1
- package/lib/plugins/characters/index.js +0 -305
- package/lib/plugins/characters/index.js.map +0 -1
- package/lib/plugins/characters/utils.js +0 -381
- package/lib/plugins/characters/utils.js.map +0 -1
- package/lib/plugins/css/icons/index.js +0 -37
- package/lib/plugins/css/icons/index.js.map +0 -1
- package/lib/plugins/css/index.js +0 -397
- package/lib/plugins/css/index.js.map +0 -1
- package/lib/plugins/customPlugin/index.js +0 -114
- package/lib/plugins/customPlugin/index.js.map +0 -1
- package/lib/plugins/html/icons/index.js +0 -38
- package/lib/plugins/html/icons/index.js.map +0 -1
- package/lib/plugins/html/index.js +0 -80
- package/lib/plugins/html/index.js.map +0 -1
- package/lib/plugins/image/alt-dialog.js +0 -129
- package/lib/plugins/image/alt-dialog.js.map +0 -1
- package/lib/plugins/image/component.js +0 -419
- package/lib/plugins/image/component.js.map +0 -1
- package/lib/plugins/image/image-toolbar.js +0 -177
- package/lib/plugins/image/image-toolbar.js.map +0 -1
- package/lib/plugins/image/index.js +0 -263
- package/lib/plugins/image/index.js.map +0 -1
- package/lib/plugins/image/insert-image-handler.js +0 -161
- package/lib/plugins/image/insert-image-handler.js.map +0 -1
- package/lib/plugins/index.js +0 -402
- package/lib/plugins/index.js.map +0 -1
- package/lib/plugins/list/index.js +0 -334
- package/lib/plugins/list/index.js.map +0 -1
- package/lib/plugins/math/index.js +0 -454
- package/lib/plugins/math/index.js.map +0 -1
- package/lib/plugins/media/index.js +0 -387
- package/lib/plugins/media/index.js.map +0 -1
- package/lib/plugins/media/media-dialog.js +0 -709
- package/lib/plugins/media/media-dialog.js.map +0 -1
- package/lib/plugins/media/media-toolbar.js +0 -101
- package/lib/plugins/media/media-toolbar.js.map +0 -1
- package/lib/plugins/media/media-wrapper.js +0 -93
- package/lib/plugins/media/media-wrapper.js.map +0 -1
- package/lib/plugins/rendering/index.js +0 -46
- package/lib/plugins/rendering/index.js.map +0 -1
- package/lib/plugins/respArea/drag-in-the-blank/choice.js +0 -254
- package/lib/plugins/respArea/drag-in-the-blank/choice.js.map +0 -1
- package/lib/plugins/respArea/drag-in-the-blank/index.js +0 -97
- package/lib/plugins/respArea/drag-in-the-blank/index.js.map +0 -1
- package/lib/plugins/respArea/explicit-constructed-response/index.js +0 -57
- package/lib/plugins/respArea/explicit-constructed-response/index.js.map +0 -1
- package/lib/plugins/respArea/icons/index.js +0 -95
- package/lib/plugins/respArea/icons/index.js.map +0 -1
- package/lib/plugins/respArea/index.js +0 -341
- package/lib/plugins/respArea/index.js.map +0 -1
- package/lib/plugins/respArea/inline-dropdown/index.js +0 -75
- package/lib/plugins/respArea/inline-dropdown/index.js.map +0 -1
- package/lib/plugins/respArea/math-templated/index.js +0 -130
- package/lib/plugins/respArea/math-templated/index.js.map +0 -1
- package/lib/plugins/respArea/utils.js +0 -125
- package/lib/plugins/respArea/utils.js.map +0 -1
- package/lib/plugins/table/CustomTablePlugin.js +0 -133
- package/lib/plugins/table/CustomTablePlugin.js.map +0 -1
- package/lib/plugins/table/icons/index.js +0 -69
- package/lib/plugins/table/icons/index.js.map +0 -1
- package/lib/plugins/table/index.js +0 -483
- package/lib/plugins/table/index.js.map +0 -1
- package/lib/plugins/table/table-toolbar.js +0 -187
- package/lib/plugins/table/table-toolbar.js.map +0 -1
- package/lib/plugins/textAlign/icons/index.js +0 -226
- package/lib/plugins/textAlign/icons/index.js.map +0 -1
- package/lib/plugins/textAlign/index.js +0 -34
- package/lib/plugins/textAlign/index.js.map +0 -1
- package/lib/plugins/toolbar/default-toolbar.js +0 -229
- package/lib/plugins/toolbar/default-toolbar.js.map +0 -1
- package/lib/plugins/toolbar/done-button.js +0 -53
- package/lib/plugins/toolbar/done-button.js.map +0 -1
- package/lib/plugins/toolbar/editor-and-toolbar.js +0 -286
- package/lib/plugins/toolbar/editor-and-toolbar.js.map +0 -1
- package/lib/plugins/toolbar/index.js +0 -34
- package/lib/plugins/toolbar/index.js.map +0 -1
- package/lib/plugins/toolbar/toolbar-buttons.js +0 -194
- package/lib/plugins/toolbar/toolbar-buttons.js.map +0 -1
- package/lib/plugins/toolbar/toolbar.js +0 -376
- package/lib/plugins/toolbar/toolbar.js.map +0 -1
- package/lib/plugins/utils.js +0 -62
- package/lib/plugins/utils.js.map +0 -1
- package/lib/serialization.js +0 -677
- package/lib/serialization.js.map +0 -1
- package/lib/shared/alert-dialog.js +0 -75
- package/lib/shared/index.js +0 -136
- package/lib/theme.js +0 -9
- package/lib/theme.js.map +0 -1
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/plugins/image/component.jsx"],"names":["log","size","s","Component","percent","multiplier","img","naturalWidth","naturalHeight","width","floored","parseInt","toFixed","props","node","editor","update","data","w","get","set","getPercentFromWidth","equals","change","c","setNodeByKey","key","window","addEventListener","startResizing","stopResizing","maxImageWidth","maxImageHeight","box","style","dimensions","height","updateImageDimensions","setState","e","bounds","target","getBoundingClientRect","clientX","left","clientY","top","hasMinimumWidth","hasDimensionsConstraints","removeEventListener","initialDim","nextDim","keepAspectRatio","resizeType","imageAspectRatio","applySizeData","resizeHandle","resize","initialiseResize","objectFit","classes","attributes","onFocus","active","value","isFocused","selection","hasEdgeIn","src","loaded","deleteStatus","alignment","alt","justifyContent","getSize","className","root","loading","pendingDelete","progressClasses","progress","hideProgress","imageContainer","image","ref","loadImage","React","SlatePropTypes","isRequired","PropTypes","shape","func","object","onBlur","number","styles","theme","portal","position","opacity","transition","floatingButtonRow","backgroundColor","palette","background","paper","borderRadius","display","padding","border","grey","boxShadow","common","white","right","alignItems","primary","main","cursor","marginLeft","marginRight","drawableHeight","minHeight"],"mappings":"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","sourcesContent":["import LinearProgress from '@material-ui/core/LinearProgress';\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport classNames from 'classnames';\nimport debug from 'debug';\nimport { withStyles } from '@material-ui/core/styles';\nimport SlatePropTypes from 'slate-prop-types';\n\nconst log = debug('@pie-lib:editable-html:plugins:image:component');\n\nconst size = (s) => (s ? `${s}px` : 'auto');\n\nexport class Component extends React.Component {\n static propTypes = {\n node: SlatePropTypes.node.isRequired,\n editor: PropTypes.shape({\n change: PropTypes.func.isRequired,\n value: PropTypes.object,\n }).isRequired,\n classes: PropTypes.object.isRequired,\n attributes: PropTypes.object,\n onFocus: PropTypes.func,\n onBlur: PropTypes.func,\n maxImageWidth: PropTypes.number,\n maxImageHeight: PropTypes.number,\n };\n\n getWidth = (percent) => {\n const multiplier = percent / 100;\n return this.img.naturalWidth * multiplier;\n };\n\n getHeight = (percent) => {\n const multiplier = percent / 100;\n return this.img.naturalHeight * multiplier;\n };\n\n getPercentFromWidth = (width) => {\n var floored = (width / this.img.naturalWidth) * 4;\n return parseInt(floored.toFixed(0) * 25, 10);\n };\n\n applySizeData = () => {\n const { node, editor } = this.props;\n\n let update = node.data;\n\n const w = update.get('width');\n if (w) {\n update = update.set('resizePercent', this.getPercentFromWidth(w));\n }\n\n log('[applySizeData] update: ', update);\n\n if (!update.equals(node.data)) {\n editor.change((c) => c.setNodeByKey(node.key, { data: update }));\n }\n };\n\n initialiseResize = () => {\n window.addEventListener('mousemove', this.startResizing, false);\n window.addEventListener('mouseup', this.stopResizing, false);\n };\n\n componentDidMount() {\n this.applySizeData();\n\n const resizeHandle = this.resize;\n\n if (resizeHandle) {\n resizeHandle.addEventListener('mousedown', this.initialiseResize, false);\n }\n }\n\n componentDidUpdate() {\n this.applySizeData();\n }\n\n getSize(data) {\n return {\n width: size(data.get('width')),\n height: size(data.get('height')),\n objectFit: 'contain',\n };\n }\n\n loadImage = () => {\n let { maxImageWidth, maxImageHeight } = this.props || {};\n maxImageWidth = maxImageWidth || 700;\n maxImageHeight = maxImageHeight || 900;\n\n const box = this.img;\n\n //on first load\n if (!box.style.width || box.style.width === 'auto') {\n const dimensions = {\n width: (box && box.naturalWidth) || 100,\n height: (box && box.naturalHeight) || 100,\n };\n\n const { width, height } = this.updateImageDimensions(\n dimensions,\n {\n width: dimensions.width < maxImageWidth ? dimensions.width : maxImageWidth,\n height: dimensions.height < maxImageHeight ? dimensions.height : maxImageHeight,\n },\n true,\n );\n\n box.style.width = `${width}px`;\n box.style.height = `${height}px`;\n\n this.setState({\n dimensions: { height: height, width: width },\n });\n\n const { node, editor } = this.props;\n\n let update = node.data;\n\n update = update.set('width', width);\n update = update.set('height', height);\n\n if (!update.equals(node.data)) {\n editor.change((c) => c.setNodeByKey(node.key, { data: update }));\n }\n }\n };\n\n startResizing = (e) => {\n const bounds = e.target.getBoundingClientRect();\n const box = this.img;\n const dimensions = {\n width: (box && box.naturalWidth) || 100,\n height: (box && box.naturalHeight) || 100,\n };\n\n const { width, height } = this.updateImageDimensions(\n dimensions,\n {\n width: e.clientX - bounds.left,\n height: e.clientY - bounds.top,\n },\n true,\n );\n\n const hasMinimumWidth = width > 50 && height > 50;\n const hasDimensionsConstraints = width <= 700 && height <= 900;\n\n if (hasMinimumWidth && hasDimensionsConstraints && box) {\n box.style.width = `${width}px`;\n box.style.height = `${height}px`;\n\n this.setState({\n dimensions: { height: height, width: width },\n });\n\n const { node, editor } = this.props;\n\n let update = node.data;\n\n update = update.set('width', width);\n update = update.set('height', height);\n\n if (!update.equals(node.data)) {\n editor.change((c) => c.setNodeByKey(node.key, { data: update }));\n }\n }\n };\n\n stopResizing = () => {\n window.removeEventListener('mousemove', this.startResizing, false);\n window.removeEventListener('mouseup', this.stopResizing, false);\n };\n\n updateImageDimensions = (initialDim, nextDim, keepAspectRatio, resizeType) => {\n // if we want to keep image aspect ratio\n if (keepAspectRatio) {\n const imageAspectRatio = initialDim.width / initialDim.height;\n\n if (resizeType === 'height') {\n // if we want to change image height => we update the width accordingly\n return {\n width: nextDim.height * imageAspectRatio,\n height: nextDim.height,\n };\n }\n\n // if we want to change image width => we update the height accordingly\n return {\n width: nextDim.width,\n height: nextDim.width / imageAspectRatio,\n };\n }\n\n // if we don't want to keep aspect ratio, we just update both values\n return {\n width: nextDim.width,\n height: nextDim.height,\n };\n };\n\n render() {\n const { node, editor, classes, attributes, onFocus } = this.props;\n const active = editor.value.isFocused && editor.value.selection.hasEdgeIn(node);\n const src = node.data.get('src');\n const loaded = node.data.get('loaded') !== false;\n const deleteStatus = node.data.get('deleteStatus');\n const alignment = node.data.get('alignment');\n const percent = node.data.get('percent');\n const alt = node.data.get('alt');\n let justifyContent;\n\n switch (alignment) {\n case 'left':\n justifyContent = 'flex-start';\n break;\n\n case 'center':\n justifyContent = 'center';\n break;\n\n case 'right':\n justifyContent = 'flex-end';\n break;\n\n default:\n justifyContent = 'flex-start';\n break;\n }\n log('[render] node.data:', node.data);\n\n const size = this.getSize(node.data);\n\n log('[render] style:', size);\n\n const className = classNames(\n classes.root,\n !loaded && classes.loading,\n deleteStatus === 'pending' && classes.pendingDelete,\n );\n\n const progressClasses = classNames(classes.progress, loaded && classes.hideProgress);\n\n return [\n <span key={'sp1'}> </span>,\n <div key={'comp'} onFocus={onFocus} className={className} style={{ justifyContent }}>\n <LinearProgress mode=\"determinate\" value={percent > 0 ? percent : 0} className={progressClasses} />\n <div className={classes.imageContainer}>\n <img\n {...attributes}\n className={classNames(classes.image, active && classes.active)}\n ref={(ref) => {\n this.img = ref;\n }}\n src={src}\n style={size}\n onLoad={this.loadImage}\n alt={alt}\n />\n <div\n ref={(ref) => {\n this.resize = ref;\n }}\n className={classNames(classes.resize, 'resize')}\n />\n </div>\n </div>,\n <span key={'sp2'}> </span>,\n ];\n }\n}\n\nconst styles = (theme) => ({\n portal: {\n position: 'absolute',\n opacity: 0,\n transition: 'opacity 200ms linear',\n },\n floatingButtonRow: {\n backgroundColor: theme.palette.background.paper,\n borderRadius: '1px',\n display: 'flex',\n padding: '10px',\n border: `solid 1px ${theme.palette.grey[200]}`,\n boxShadow:\n '0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)',\n },\n progress: {\n position: 'absolute',\n left: '0',\n width: 'fit-content',\n top: '0%',\n transition: 'opacity 200ms linear',\n },\n hideProgress: {\n opacity: 0,\n },\n loading: {\n opacity: 0.3,\n },\n pendingDelete: {\n opacity: 0.3,\n },\n root: {\n position: 'relative',\n border: `solid 1px ${theme.palette.common.white}`,\n display: 'flex',\n transition: 'opacity 200ms linear',\n },\n delete: {\n position: 'absolute',\n right: 0,\n },\n imageContainer: {\n position: 'relative',\n width: 'fit-content',\n display: 'flex',\n alignItems: 'center',\n\n '&&:hover > .resize': {\n display: 'block',\n },\n },\n active: {\n border: `solid 1px ${theme.palette.primary.main}`,\n },\n resize: {\n backgroundColor: theme.palette.primary.main,\n cursor: 'col-resize',\n height: '35px',\n width: '5px',\n borderRadius: 8,\n marginLeft: '5px',\n marginRight: '10px',\n display: 'none',\n },\n drawableHeight: {\n minHeight: 350,\n },\n});\n\nexport default withStyles(styles)(Component);\n"],"file":"component.js"}
|
|
@@ -1,177 +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"] = exports.ImageToolbar = 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 _propTypes = _interopRequireDefault(require("prop-types"));
|
|
25
|
-
|
|
26
|
-
var _react = _interopRequireDefault(require("react"));
|
|
27
|
-
|
|
28
|
-
var _debug = _interopRequireDefault(require("debug"));
|
|
29
|
-
|
|
30
|
-
var _reactDom = _interopRequireDefault(require("react-dom"));
|
|
31
|
-
|
|
32
|
-
var _styles = require("@material-ui/core/styles");
|
|
33
|
-
|
|
34
|
-
var _classnames = _interopRequireDefault(require("classnames"));
|
|
35
|
-
|
|
36
|
-
var _toolbarButtons = require("../toolbar/toolbar-buttons");
|
|
37
|
-
|
|
38
|
-
var _altDialog = _interopRequireDefault(require("./alt-dialog"));
|
|
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 log = (0, _debug["default"])('@pie-lib:editable-html:plugins:image:image-toolbar');
|
|
45
|
-
|
|
46
|
-
var AlignmentButton = function AlignmentButton(_ref) {
|
|
47
|
-
var alignment = _ref.alignment,
|
|
48
|
-
active = _ref.active,
|
|
49
|
-
onClick = _ref.onClick;
|
|
50
|
-
return /*#__PURE__*/_react["default"].createElement(_toolbarButtons.MarkButton, {
|
|
51
|
-
active: active,
|
|
52
|
-
onToggle: function onToggle() {
|
|
53
|
-
return onClick(alignment);
|
|
54
|
-
},
|
|
55
|
-
label: alignment
|
|
56
|
-
}, alignment);
|
|
57
|
-
};
|
|
58
|
-
|
|
59
|
-
AlignmentButton.propTypes = {
|
|
60
|
-
alignment: _propTypes["default"].string.isRequired,
|
|
61
|
-
active: _propTypes["default"].bool.isRequired,
|
|
62
|
-
onClick: _propTypes["default"].func.isRequired
|
|
63
|
-
};
|
|
64
|
-
|
|
65
|
-
var ImageToolbar = /*#__PURE__*/function (_React$Component) {
|
|
66
|
-
(0, _inherits2["default"])(ImageToolbar, _React$Component);
|
|
67
|
-
|
|
68
|
-
var _super = _createSuper(ImageToolbar);
|
|
69
|
-
|
|
70
|
-
function ImageToolbar() {
|
|
71
|
-
var _this;
|
|
72
|
-
|
|
73
|
-
(0, _classCallCheck2["default"])(this, ImageToolbar);
|
|
74
|
-
|
|
75
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
76
|
-
args[_key] = arguments[_key];
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
_this = _super.call.apply(_super, [this].concat(args));
|
|
80
|
-
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onAltTextDone", function (newAlt) {
|
|
81
|
-
log('[onAltTextDone]: alt:', newAlt);
|
|
82
|
-
|
|
83
|
-
_this.props.onChange({
|
|
84
|
-
alt: newAlt
|
|
85
|
-
}, true);
|
|
86
|
-
});
|
|
87
|
-
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onAlignmentClick", function (alignment) {
|
|
88
|
-
log('[onAlignmentClick]: alignment:', alignment);
|
|
89
|
-
|
|
90
|
-
_this.props.onChange({
|
|
91
|
-
alignment: alignment
|
|
92
|
-
});
|
|
93
|
-
});
|
|
94
|
-
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "renderDialog", function () {
|
|
95
|
-
var alt = _this.props.alt;
|
|
96
|
-
var popoverEl = document.createElement('div');
|
|
97
|
-
|
|
98
|
-
var el = /*#__PURE__*/_react["default"].createElement(_altDialog["default"], {
|
|
99
|
-
alt: alt,
|
|
100
|
-
onDone: _this.onAltTextDone
|
|
101
|
-
});
|
|
102
|
-
|
|
103
|
-
_reactDom["default"].render(el, popoverEl);
|
|
104
|
-
|
|
105
|
-
document.body.appendChild(popoverEl);
|
|
106
|
-
});
|
|
107
|
-
return _this;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
(0, _createClass2["default"])(ImageToolbar, [{
|
|
111
|
-
key: "render",
|
|
112
|
-
value: function render() {
|
|
113
|
-
var _classNames,
|
|
114
|
-
_this2 = this;
|
|
115
|
-
|
|
116
|
-
var _this$props = this.props,
|
|
117
|
-
classes = _this$props.classes,
|
|
118
|
-
alignment = _this$props.alignment,
|
|
119
|
-
imageLoaded = _this$props.imageLoaded,
|
|
120
|
-
disableImageAlignmentButtons = _this$props.disableImageAlignmentButtons;
|
|
121
|
-
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
122
|
-
className: classes.holder
|
|
123
|
-
}, !disableImageAlignmentButtons && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(AlignmentButton, {
|
|
124
|
-
alignment: 'left',
|
|
125
|
-
active: alignment === 'left',
|
|
126
|
-
onClick: this.onAlignmentClick
|
|
127
|
-
}), /*#__PURE__*/_react["default"].createElement(AlignmentButton, {
|
|
128
|
-
alignment: 'center',
|
|
129
|
-
active: alignment === 'center',
|
|
130
|
-
onClick: this.onAlignmentClick
|
|
131
|
-
}), /*#__PURE__*/_react["default"].createElement(AlignmentButton, {
|
|
132
|
-
alignment: 'right',
|
|
133
|
-
active: alignment === 'right',
|
|
134
|
-
onClick: this.onAlignmentClick
|
|
135
|
-
})), /*#__PURE__*/_react["default"].createElement("span", {
|
|
136
|
-
className: (0, _classnames["default"])((_classNames = {}, (0, _defineProperty2["default"])(_classNames, classes.disabled, !imageLoaded), (0, _defineProperty2["default"])(_classNames, classes.altButton, !disableImageAlignmentButtons), _classNames)),
|
|
137
|
-
onMouseDown: function onMouseDown(event) {
|
|
138
|
-
return imageLoaded && _this2.renderDialog(event);
|
|
139
|
-
}
|
|
140
|
-
}, "Alt text"));
|
|
141
|
-
}
|
|
142
|
-
}]);
|
|
143
|
-
return ImageToolbar;
|
|
144
|
-
}(_react["default"].Component);
|
|
145
|
-
|
|
146
|
-
exports.ImageToolbar = ImageToolbar;
|
|
147
|
-
(0, _defineProperty2["default"])(ImageToolbar, "propTypes", {
|
|
148
|
-
onChange: _propTypes["default"].func.isRequired,
|
|
149
|
-
classes: _propTypes["default"].object.isRequired,
|
|
150
|
-
alignment: _propTypes["default"].string,
|
|
151
|
-
alt: _propTypes["default"].string,
|
|
152
|
-
imageLoaded: _propTypes["default"].bool,
|
|
153
|
-
disableImageAlignmentButtons: _propTypes["default"].bool
|
|
154
|
-
});
|
|
155
|
-
|
|
156
|
-
var styles = function styles(theme) {
|
|
157
|
-
return {
|
|
158
|
-
holder: {
|
|
159
|
-
paddingLeft: theme.spacing.unit,
|
|
160
|
-
display: 'flex',
|
|
161
|
-
alignItems: 'center'
|
|
162
|
-
},
|
|
163
|
-
disabled: {
|
|
164
|
-
opacity: 0.5
|
|
165
|
-
},
|
|
166
|
-
altButton: {
|
|
167
|
-
borderLeft: '1px solid grey',
|
|
168
|
-
paddingLeft: 8,
|
|
169
|
-
marginLeft: 4
|
|
170
|
-
}
|
|
171
|
-
};
|
|
172
|
-
};
|
|
173
|
-
|
|
174
|
-
var _default = (0, _styles.withStyles)(styles)(ImageToolbar);
|
|
175
|
-
|
|
176
|
-
exports["default"] = _default;
|
|
177
|
-
//# sourceMappingURL=image-toolbar.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/plugins/image/image-toolbar.jsx"],"names":["log","AlignmentButton","alignment","active","onClick","propTypes","PropTypes","string","isRequired","bool","func","ImageToolbar","newAlt","props","onChange","alt","popoverEl","document","createElement","el","onAltTextDone","ReactDOM","render","body","appendChild","classes","imageLoaded","disableImageAlignmentButtons","holder","onAlignmentClick","disabled","altButton","event","renderDialog","React","Component","object","styles","theme","paddingLeft","spacing","unit","display","alignItems","opacity","borderLeft","marginLeft"],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport debug from 'debug';\nimport ReactDOM from 'react-dom';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\n\nimport { MarkButton } from '../toolbar/toolbar-buttons';\nimport AltDialog from './alt-dialog';\n\nconst log = debug('@pie-lib:editable-html:plugins:image:image-toolbar');\n\nconst AlignmentButton = ({ alignment, active, onClick }) => {\n return (\n <MarkButton active={active} onToggle={() => onClick(alignment)} label={alignment}>\n {alignment}\n </MarkButton>\n );\n};\n\nAlignmentButton.propTypes = {\n alignment: PropTypes.string.isRequired,\n active: PropTypes.bool.isRequired,\n onClick: PropTypes.func.isRequired,\n};\n\nexport class ImageToolbar extends React.Component {\n static propTypes = {\n onChange: PropTypes.func.isRequired,\n classes: PropTypes.object.isRequired,\n alignment: PropTypes.string,\n alt: PropTypes.string,\n imageLoaded: PropTypes.bool,\n disableImageAlignmentButtons: PropTypes.bool,\n };\n\n onAltTextDone = (newAlt) => {\n log('[onAltTextDone]: alt:', newAlt);\n\n this.props.onChange({ alt: newAlt }, true);\n };\n\n onAlignmentClick = (alignment) => {\n log('[onAlignmentClick]: alignment:', alignment);\n this.props.onChange({ alignment });\n };\n\n renderDialog = () => {\n const { alt } = this.props;\n const popoverEl = document.createElement('div');\n\n const el = <AltDialog alt={alt} onDone={this.onAltTextDone} />;\n\n ReactDOM.render(el, popoverEl);\n\n document.body.appendChild(popoverEl);\n };\n\n render() {\n const { classes, alignment, imageLoaded, disableImageAlignmentButtons } = this.props;\n return (\n <div className={classes.holder}>\n {!disableImageAlignmentButtons && (\n <>\n <AlignmentButton alignment={'left'} active={alignment === 'left'} onClick={this.onAlignmentClick} />\n <AlignmentButton alignment={'center'} active={alignment === 'center'} onClick={this.onAlignmentClick} />\n <AlignmentButton alignment={'right'} active={alignment === 'right'} onClick={this.onAlignmentClick} />\n </>\n )}\n <span\n className={classNames({\n [classes.disabled]: !imageLoaded,\n [classes.altButton]: !disableImageAlignmentButtons,\n })}\n onMouseDown={(event) => imageLoaded && this.renderDialog(event)}\n >\n Alt text\n </span>\n </div>\n );\n }\n}\n\nconst styles = (theme) => ({\n holder: {\n paddingLeft: theme.spacing.unit,\n display: 'flex',\n alignItems: 'center',\n },\n disabled: {\n opacity: 0.5,\n },\n altButton: {\n borderLeft: '1px solid grey',\n paddingLeft: 8,\n marginLeft: 4,\n },\n});\n\nexport default withStyles(styles)(ImageToolbar);\n"],"file":"image-toolbar.js"}
|
|
@@ -1,263 +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"] = ImagePlugin;
|
|
9
|
-
exports.serialization = void 0;
|
|
10
|
-
|
|
11
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
12
|
-
|
|
13
|
-
var _slate = require("slate");
|
|
14
|
-
|
|
15
|
-
var _Image = _interopRequireDefault(require("@material-ui/icons/Image"));
|
|
16
|
-
|
|
17
|
-
var _component = _interopRequireDefault(require("./component"));
|
|
18
|
-
|
|
19
|
-
var _imageToolbar = _interopRequireDefault(require("./image-toolbar"));
|
|
20
|
-
|
|
21
|
-
var _insertImageHandler = _interopRequireDefault(require("./insert-image-handler"));
|
|
22
|
-
|
|
23
|
-
var _react = _interopRequireDefault(require("react"));
|
|
24
|
-
|
|
25
|
-
var _debug = _interopRequireDefault(require("debug"));
|
|
26
|
-
|
|
27
|
-
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; }
|
|
28
|
-
|
|
29
|
-
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; }
|
|
30
|
-
|
|
31
|
-
var log = (0, _debug["default"])('@pie-lib:editable-html:plugins:image');
|
|
32
|
-
|
|
33
|
-
function ImagePlugin(opts) {
|
|
34
|
-
var toolbar = opts.insertImageRequested && {
|
|
35
|
-
icon: /*#__PURE__*/_react["default"].createElement(_Image["default"], null),
|
|
36
|
-
ariaLabel: 'Insert Image',
|
|
37
|
-
onClick: function onClick(value, onChange) {
|
|
38
|
-
log('[toolbar] onClick');
|
|
39
|
-
|
|
40
|
-
var inline = _slate.Inline.create({
|
|
41
|
-
type: 'image',
|
|
42
|
-
isVoid: true,
|
|
43
|
-
data: {
|
|
44
|
-
loaded: false,
|
|
45
|
-
src: undefined
|
|
46
|
-
}
|
|
47
|
-
});
|
|
48
|
-
|
|
49
|
-
var change = value.change().insertInline(inline);
|
|
50
|
-
onChange(change);
|
|
51
|
-
opts.insertImageRequested(inline, function (onFinish, getValue) {
|
|
52
|
-
return new _insertImageHandler["default"](inline, onFinish, getValue, onChange);
|
|
53
|
-
});
|
|
54
|
-
},
|
|
55
|
-
supports: function supports(node) {
|
|
56
|
-
return node.object === 'inline' && node.type === 'image';
|
|
57
|
-
},
|
|
58
|
-
customToolbar: function customToolbar(node, value, onToolbarDone) {
|
|
59
|
-
var alignment = node.data.get('alignment');
|
|
60
|
-
var alt = node.data.get('alt');
|
|
61
|
-
var imageLoaded = node.data.get('loaded') !== false;
|
|
62
|
-
|
|
63
|
-
var onChange = function onChange(newValues, done) {
|
|
64
|
-
var update = _objectSpread(_objectSpread({}, node.data.toObject()), newValues);
|
|
65
|
-
|
|
66
|
-
var change = value.change().setNodeByKey(node.key, {
|
|
67
|
-
data: update
|
|
68
|
-
});
|
|
69
|
-
onToolbarDone(change, done);
|
|
70
|
-
};
|
|
71
|
-
|
|
72
|
-
var Tb = function Tb() {
|
|
73
|
-
return /*#__PURE__*/_react["default"].createElement(_imageToolbar["default"], {
|
|
74
|
-
disableImageAlignmentButtons: opts.disableImageAlignmentButtons,
|
|
75
|
-
alt: alt,
|
|
76
|
-
imageLoaded: imageLoaded,
|
|
77
|
-
alignment: alignment || 'left',
|
|
78
|
-
onChange: onChange
|
|
79
|
-
});
|
|
80
|
-
};
|
|
81
|
-
|
|
82
|
-
return Tb;
|
|
83
|
-
},
|
|
84
|
-
showDone: true
|
|
85
|
-
};
|
|
86
|
-
return {
|
|
87
|
-
name: 'image',
|
|
88
|
-
toolbar: toolbar,
|
|
89
|
-
deleteNode: function deleteNode(e, node, value, onChange) {
|
|
90
|
-
e.preventDefault();
|
|
91
|
-
|
|
92
|
-
if (opts.onDelete) {
|
|
93
|
-
var update = node.data.merge(_slate.Data.create({
|
|
94
|
-
deleteStatus: 'pending'
|
|
95
|
-
}));
|
|
96
|
-
var change = value.change().setNodeByKey(node.key, {
|
|
97
|
-
data: update
|
|
98
|
-
});
|
|
99
|
-
onChange(change);
|
|
100
|
-
opts.onDelete(node, function (err, v) {
|
|
101
|
-
if (!err) {
|
|
102
|
-
change = v.change().removeNodeByKey(node.key);
|
|
103
|
-
} else {
|
|
104
|
-
log('[error]: ', err);
|
|
105
|
-
change = v.change().setNodeByKey(node.key, node.data.merge(_slate.Data.create({
|
|
106
|
-
deleteStatus: 'failed'
|
|
107
|
-
})));
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
onChange(change);
|
|
111
|
-
});
|
|
112
|
-
} else {
|
|
113
|
-
var _change = value.change().removeNodeByKey(node.key);
|
|
114
|
-
|
|
115
|
-
onChange(_change);
|
|
116
|
-
}
|
|
117
|
-
},
|
|
118
|
-
stopReset: function stopReset(value) {
|
|
119
|
-
var imgPendingInsertion = value.document.findDescendant(function (n) {
|
|
120
|
-
if (n.type !== 'image') {
|
|
121
|
-
return;
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
return n.data.get('loaded') === false;
|
|
125
|
-
});
|
|
126
|
-
/** don't reset if there is an image pending insertion */
|
|
127
|
-
|
|
128
|
-
return imgPendingInsertion !== undefined && imgPendingInsertion !== null;
|
|
129
|
-
},
|
|
130
|
-
renderNode: function renderNode(props) {
|
|
131
|
-
if (props.node.type === 'image') {
|
|
132
|
-
var all = Object.assign({
|
|
133
|
-
onDelete: opts.onDelete,
|
|
134
|
-
onFocus: opts.onFocus,
|
|
135
|
-
onBlur: opts.onBlur,
|
|
136
|
-
maxImageWidth: opts.maxImageWidth,
|
|
137
|
-
maxImageHeight: opts.maxImageHeight
|
|
138
|
-
}, props);
|
|
139
|
-
return /*#__PURE__*/_react["default"].createElement(_component["default"], all);
|
|
140
|
-
}
|
|
141
|
-
},
|
|
142
|
-
normalizeNode: function normalizeNode(node) {
|
|
143
|
-
var textNodeMap = {};
|
|
144
|
-
var updateNodesArray = [];
|
|
145
|
-
var index = 0;
|
|
146
|
-
if (node.object !== 'document') return;
|
|
147
|
-
node.findDescendant(function (d) {
|
|
148
|
-
if (d.object === 'text') {
|
|
149
|
-
textNodeMap[index] = d;
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
if (d.type === 'image') {
|
|
153
|
-
if (index > 0 && textNodeMap[index - 1] && textNodeMap[index - 1].text === '') {
|
|
154
|
-
updateNodesArray.push(textNodeMap[index - 1]);
|
|
155
|
-
}
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
index++;
|
|
159
|
-
});
|
|
160
|
-
if (!updateNodesArray.length) return;
|
|
161
|
-
return function (change) {
|
|
162
|
-
change.withoutNormalization(function () {
|
|
163
|
-
updateNodesArray.forEach(function (n) {
|
|
164
|
-
return change.insertTextByKey(n.key, 0, ' ');
|
|
165
|
-
});
|
|
166
|
-
});
|
|
167
|
-
};
|
|
168
|
-
}
|
|
169
|
-
};
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
var serialization = {
|
|
173
|
-
deserialize: function deserialize(el
|
|
174
|
-
/*, next*/
|
|
175
|
-
) {
|
|
176
|
-
var name = el.tagName.toLowerCase();
|
|
177
|
-
if (name !== 'img') return;
|
|
178
|
-
log('deserialize: ', name);
|
|
179
|
-
var style = el.style || {
|
|
180
|
-
width: '',
|
|
181
|
-
height: '',
|
|
182
|
-
margin: '',
|
|
183
|
-
justifyContent: ''
|
|
184
|
-
};
|
|
185
|
-
var width = parseInt(style.width.replace('px', ''), 10) || null;
|
|
186
|
-
var height = parseInt(style.height.replace('px', ''), 10) || null;
|
|
187
|
-
var out = {
|
|
188
|
-
object: 'inline',
|
|
189
|
-
type: 'image',
|
|
190
|
-
isVoid: true,
|
|
191
|
-
data: {
|
|
192
|
-
src: el.getAttribute('src'),
|
|
193
|
-
width: width,
|
|
194
|
-
height: height,
|
|
195
|
-
margin: el.style.margin,
|
|
196
|
-
justifyContent: el.style.justifyContent,
|
|
197
|
-
alignment: el.getAttribute('alignment'),
|
|
198
|
-
alt: el.getAttribute('alt')
|
|
199
|
-
}
|
|
200
|
-
};
|
|
201
|
-
log('return object: ', out);
|
|
202
|
-
return out;
|
|
203
|
-
},
|
|
204
|
-
serialize: function serialize(object
|
|
205
|
-
/*, children*/
|
|
206
|
-
) {
|
|
207
|
-
if (object.type !== 'image') return;
|
|
208
|
-
var data = object.data;
|
|
209
|
-
var src = data.get('src');
|
|
210
|
-
var width = data.get('width');
|
|
211
|
-
var height = data.get('height');
|
|
212
|
-
var alignment = data.get('alignment') || 'left';
|
|
213
|
-
var margin = data.get('margin');
|
|
214
|
-
var justifyContent = data.get('margin');
|
|
215
|
-
var alt = data.get('alt');
|
|
216
|
-
var style = {};
|
|
217
|
-
|
|
218
|
-
if (width) {
|
|
219
|
-
style.width = "".concat(width, "px");
|
|
220
|
-
}
|
|
221
|
-
|
|
222
|
-
if (height) {
|
|
223
|
-
style.height = "".concat(height, "px");
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
style.margin = margin;
|
|
227
|
-
style.justifyContent = justifyContent;
|
|
228
|
-
|
|
229
|
-
if (alignment) {
|
|
230
|
-
switch (alignment) {
|
|
231
|
-
case 'left':
|
|
232
|
-
style.justifyContent = 'flex-start';
|
|
233
|
-
style.margin = '0';
|
|
234
|
-
break;
|
|
235
|
-
|
|
236
|
-
case 'center':
|
|
237
|
-
style.justifyContent = 'center';
|
|
238
|
-
style.margin = '0 auto';
|
|
239
|
-
break;
|
|
240
|
-
|
|
241
|
-
case 'right':
|
|
242
|
-
style.justifyContent = 'flex-end';
|
|
243
|
-
style.margin = 'auto 0 0 auto';
|
|
244
|
-
break;
|
|
245
|
-
|
|
246
|
-
default:
|
|
247
|
-
style.justifyContent = 'flex-start';
|
|
248
|
-
break;
|
|
249
|
-
}
|
|
250
|
-
}
|
|
251
|
-
|
|
252
|
-
style.objectFit = 'contain';
|
|
253
|
-
var props = {
|
|
254
|
-
src: src,
|
|
255
|
-
style: style,
|
|
256
|
-
alignment: alignment,
|
|
257
|
-
alt: alt
|
|
258
|
-
};
|
|
259
|
-
return /*#__PURE__*/_react["default"].createElement("img", props);
|
|
260
|
-
}
|
|
261
|
-
};
|
|
262
|
-
exports.serialization = serialization;
|
|
263
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/plugins/image/index.jsx"],"names":["log","ImagePlugin","opts","toolbar","insertImageRequested","icon","ariaLabel","onClick","value","onChange","inline","Inline","create","type","isVoid","data","loaded","src","undefined","change","insertInline","onFinish","getValue","InsertImageHandler","supports","node","object","customToolbar","onToolbarDone","alignment","get","alt","imageLoaded","newValues","done","update","toObject","setNodeByKey","key","Tb","disableImageAlignmentButtons","showDone","name","deleteNode","e","preventDefault","onDelete","merge","Data","deleteStatus","err","v","removeNodeByKey","stopReset","imgPendingInsertion","document","findDescendant","n","renderNode","props","all","Object","assign","onFocus","onBlur","maxImageWidth","maxImageHeight","normalizeNode","textNodeMap","updateNodesArray","index","d","text","push","length","withoutNormalization","forEach","insertTextByKey","serialization","deserialize","el","tagName","toLowerCase","style","width","height","margin","justifyContent","parseInt","replace","out","getAttribute","serialize","objectFit"],"mappings":"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","sourcesContent":["import { Data, Inline } from 'slate';\n\nimport Image from '@material-ui/icons/Image';\nimport ImageComponent from './component';\nimport ImageToolbar from './image-toolbar';\nimport InsertImageHandler from './insert-image-handler';\nimport React from 'react';\nimport debug from 'debug';\n\nconst log = debug('@pie-lib:editable-html:plugins:image');\n\nexport default function ImagePlugin(opts) {\n const toolbar = opts.insertImageRequested && {\n icon: <Image />,\n ariaLabel: 'Insert Image',\n onClick: (value, onChange) => {\n log('[toolbar] onClick');\n const inline = Inline.create({\n type: 'image',\n isVoid: true,\n data: {\n loaded: false,\n src: undefined,\n },\n });\n\n const change = value.change().insertInline(inline);\n\n onChange(change);\n opts.insertImageRequested(\n inline,\n (onFinish, getValue) => new InsertImageHandler(inline, onFinish, getValue, onChange),\n );\n },\n supports: (node) => node.object === 'inline' && node.type === 'image',\n customToolbar: (node, value, onToolbarDone) => {\n const alignment = node.data.get('alignment');\n const alt = node.data.get('alt');\n const imageLoaded = node.data.get('loaded') !== false;\n const onChange = (newValues, done) => {\n const update = {\n ...node.data.toObject(),\n ...newValues,\n };\n\n const change = value.change().setNodeByKey(node.key, { data: update });\n onToolbarDone(change, done);\n };\n\n const Tb = () => (\n <ImageToolbar\n disableImageAlignmentButtons={opts.disableImageAlignmentButtons}\n alt={alt}\n imageLoaded={imageLoaded}\n alignment={alignment || 'left'}\n onChange={onChange}\n />\n );\n return Tb;\n },\n showDone: true,\n };\n\n return {\n name: 'image',\n toolbar,\n deleteNode: (e, node, value, onChange) => {\n e.preventDefault();\n if (opts.onDelete) {\n const update = node.data.merge(Data.create({ deleteStatus: 'pending' }));\n\n let change = value.change().setNodeByKey(node.key, { data: update });\n\n onChange(change);\n opts.onDelete(node, (err, v) => {\n if (!err) {\n change = v.change().removeNodeByKey(node.key);\n } else {\n log('[error]: ', err);\n change = v.change().setNodeByKey(node.key, node.data.merge(Data.create({ deleteStatus: 'failed' })));\n }\n onChange(change);\n });\n } else {\n let change = value.change().removeNodeByKey(node.key);\n onChange(change);\n }\n },\n stopReset: (value) => {\n const imgPendingInsertion = value.document.findDescendant((n) => {\n if (n.type !== 'image') {\n return;\n }\n return n.data.get('loaded') === false;\n });\n /** don't reset if there is an image pending insertion */\n return imgPendingInsertion !== undefined && imgPendingInsertion !== null;\n },\n renderNode(props) {\n if (props.node.type === 'image') {\n const all = Object.assign(\n {\n onDelete: opts.onDelete,\n onFocus: opts.onFocus,\n onBlur: opts.onBlur,\n maxImageWidth: opts.maxImageWidth,\n maxImageHeight: opts.maxImageHeight,\n },\n props,\n );\n return <ImageComponent {...all} />;\n }\n },\n normalizeNode: (node) => {\n const textNodeMap = {};\n const updateNodesArray = [];\n let index = 0;\n\n if (node.object !== 'document') return;\n\n node.findDescendant((d) => {\n if (d.object === 'text') {\n textNodeMap[index] = d;\n }\n\n if (d.type === 'image') {\n if (index > 0 && textNodeMap[index - 1] && textNodeMap[index - 1].text === '') {\n updateNodesArray.push(textNodeMap[index - 1]);\n }\n }\n\n index++;\n });\n\n if (!updateNodesArray.length) return;\n\n return (change) => {\n change.withoutNormalization(() => {\n updateNodesArray.forEach((n) => change.insertTextByKey(n.key, 0, ' '));\n });\n };\n },\n };\n}\n\nexport const serialization = {\n deserialize(el /*, next*/) {\n const name = el.tagName.toLowerCase();\n if (name !== 'img') return;\n\n log('deserialize: ', name);\n const style = el.style || { width: '', height: '', margin: '', justifyContent: '' };\n const width = parseInt(style.width.replace('px', ''), 10) || null;\n const height = parseInt(style.height.replace('px', ''), 10) || null;\n\n const out = {\n object: 'inline',\n type: 'image',\n isVoid: true,\n data: {\n src: el.getAttribute('src'),\n width,\n height,\n margin: el.style.margin,\n justifyContent: el.style.justifyContent,\n alignment: el.getAttribute('alignment'),\n alt: el.getAttribute('alt'),\n },\n };\n log('return object: ', out);\n return out;\n },\n serialize(object /*, children*/) {\n if (object.type !== 'image') return;\n\n const { data } = object;\n const src = data.get('src');\n const width = data.get('width');\n const height = data.get('height');\n const alignment = data.get('alignment') || 'left';\n const margin = data.get('margin');\n const justifyContent = data.get('margin');\n const alt = data.get('alt');\n const style = {};\n if (width) {\n style.width = `${width}px`;\n }\n\n if (height) {\n style.height = `${height}px`;\n }\n\n style.margin = margin;\n style.justifyContent = justifyContent;\n\n if (alignment) {\n switch (alignment) {\n case 'left':\n style.justifyContent = 'flex-start';\n style.margin = '0';\n break;\n case 'center':\n style.justifyContent = 'center';\n style.margin = '0 auto';\n break;\n case 'right':\n style.justifyContent = 'flex-end';\n style.margin = 'auto 0 0 auto';\n break;\n default:\n style.justifyContent = 'flex-start';\n break;\n }\n }\n\n style.objectFit = 'contain';\n\n const props = {\n src,\n style,\n alignment,\n alt,\n };\n\n return <img {...props} />;\n },\n};\n"],"file":"index.js"}
|