@pie-lib/editable-html-tip-tap 1.2.0-next.9 → 2.0.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.
Files changed (94) hide show
  1. package/CHANGELOG.md +172 -0
  2. package/lib/components/CharacterPicker.js +1 -0
  3. package/lib/components/CharacterPicker.js.map +1 -1
  4. package/lib/components/EditableHtml.js +84 -43
  5. package/lib/components/EditableHtml.js.map +1 -1
  6. package/lib/components/MenuBar.js +74 -43
  7. package/lib/components/MenuBar.js.map +1 -1
  8. package/lib/components/TiptapContainer.js +9 -8
  9. package/lib/components/TiptapContainer.js.map +1 -1
  10. package/lib/components/icons/TextAlign.js +2 -2
  11. package/lib/components/icons/TextAlign.js.map +1 -1
  12. package/lib/components/image/InsertImageHandler.js +10 -13
  13. package/lib/components/image/InsertImageHandler.js.map +1 -1
  14. package/lib/components/media/MediaDialog.js.map +1 -1
  15. package/lib/components/respArea/DragInTheBlank/DragInTheBlank.js +6 -1
  16. package/lib/components/respArea/DragInTheBlank/DragInTheBlank.js.map +1 -1
  17. package/lib/components/respArea/DragInTheBlank/choice.js +15 -7
  18. package/lib/components/respArea/DragInTheBlank/choice.js.map +1 -1
  19. package/lib/components/respArea/ExplicitConstructedResponse.js +29 -11
  20. package/lib/components/respArea/ExplicitConstructedResponse.js.map +1 -1
  21. package/lib/components/respArea/InlineDropdown.js +35 -6
  22. package/lib/components/respArea/InlineDropdown.js.map +1 -1
  23. package/lib/extensions/custom-toolbar-wrapper.js +3 -2
  24. package/lib/extensions/custom-toolbar-wrapper.js.map +1 -1
  25. package/lib/extensions/div-node.js +83 -0
  26. package/lib/extensions/div-node.js.map +1 -0
  27. package/lib/extensions/ensure-empty-root-div.js +48 -0
  28. package/lib/extensions/ensure-empty-root-div.js.map +1 -0
  29. package/lib/extensions/ensure-list-item-content-is-div.js +64 -0
  30. package/lib/extensions/ensure-list-item-content-is-div.js.map +1 -0
  31. package/lib/extensions/extended-list-item.js +15 -0
  32. package/lib/extensions/extended-list-item.js.map +1 -0
  33. package/lib/extensions/extended-table-cell.js +22 -0
  34. package/lib/extensions/extended-table-cell.js.map +1 -0
  35. package/lib/extensions/extended-table.js +50 -1
  36. package/lib/extensions/extended-table.js.map +1 -1
  37. package/lib/extensions/image-component.js +102 -51
  38. package/lib/extensions/image-component.js.map +1 -1
  39. package/lib/extensions/image.js +51 -2
  40. package/lib/extensions/image.js.map +1 -1
  41. package/lib/extensions/math.js +50 -9
  42. package/lib/extensions/math.js.map +1 -1
  43. package/lib/extensions/media.js +3 -1
  44. package/lib/extensions/media.js.map +1 -1
  45. package/lib/extensions/responseArea.js +12 -7
  46. package/lib/extensions/responseArea.js.map +1 -1
  47. package/lib/styles/editorContainerStyles.js +5 -4
  48. package/lib/styles/editorContainerStyles.js.map +1 -1
  49. package/lib/utils/helper.js +17 -0
  50. package/lib/utils/helper.js.map +1 -0
  51. package/package.json +8 -8
  52. package/src/__tests__/EditableHtml.test.jsx +90 -7
  53. package/src/__tests__/index.test.jsx +11 -3
  54. package/src/components/CharacterPicker.jsx +1 -0
  55. package/src/components/EditableHtml.jsx +91 -41
  56. package/src/components/MenuBar.jsx +57 -24
  57. package/src/components/TiptapContainer.jsx +10 -8
  58. package/src/components/__tests__/CharacterPicker.test.jsx +22 -0
  59. package/src/components/__tests__/ExplicitConstructedResponse.test.jsx +55 -12
  60. package/src/components/__tests__/InlineDropdown.test.jsx +203 -10
  61. package/src/components/__tests__/InsertImageHandler.test.js +28 -21
  62. package/src/components/__tests__/MenuBar.test.jsx +32 -0
  63. package/src/components/icons/TextAlign.jsx +1 -1
  64. package/src/components/image/InsertImageHandler.js +9 -13
  65. package/src/components/respArea/DragInTheBlank/DragInTheBlank.jsx +6 -1
  66. package/src/components/respArea/DragInTheBlank/choice.jsx +32 -4
  67. package/src/components/respArea/ExplicitConstructedResponse.jsx +33 -10
  68. package/src/components/respArea/InlineDropdown.jsx +45 -10
  69. package/src/extensions/__tests__/divNode.test.js +87 -0
  70. package/src/extensions/__tests__/ensure-empty-root-div.test.js +57 -0
  71. package/src/extensions/__tests__/ensure-list-item-content-is-div.test.js +44 -0
  72. package/src/extensions/__tests__/extended-list-item.test.js +13 -0
  73. package/src/extensions/__tests__/extended-table-cell.test.js +22 -0
  74. package/src/extensions/__tests__/extended-table.test.js +98 -1
  75. package/src/extensions/__tests__/image-component.test.jsx +105 -9
  76. package/src/extensions/__tests__/image.test.js +109 -8
  77. package/src/extensions/__tests__/math.test.js +348 -0
  78. package/src/extensions/__tests__/media-node-view.test.jsx +10 -8
  79. package/src/extensions/__tests__/responseArea.test.js +291 -0
  80. package/src/extensions/custom-toolbar-wrapper.jsx +2 -2
  81. package/src/extensions/div-node.js +86 -0
  82. package/src/extensions/ensure-empty-root-div.js +47 -0
  83. package/src/extensions/ensure-list-item-content-is-div.js +62 -0
  84. package/src/extensions/extended-list-item.js +10 -0
  85. package/src/extensions/extended-table-cell.js +19 -0
  86. package/src/extensions/extended-table.js +37 -1
  87. package/src/extensions/image-component.jsx +114 -69
  88. package/src/extensions/image.js +56 -1
  89. package/src/extensions/math.js +62 -10
  90. package/src/extensions/media.js +1 -1
  91. package/src/extensions/responseArea.js +13 -11
  92. package/src/styles/editorContainerStyles.js +5 -4
  93. package/src/utils/helper.js +17 -0
  94. /package/src/components/media/{MediaDialog.js → MediaDialog.jsx} +0 -0
@@ -16,6 +16,7 @@ var _debug = _interopRequireDefault(require("debug"));
16
16
  var _LinearProgress = _interopRequireDefault(require("@mui/material/LinearProgress"));
17
17
  var _styles = require("@mui/material/styles");
18
18
  var _react2 = require("@tiptap/react");
19
+ var _reactDom = _interopRequireDefault(require("react-dom"));
19
20
  var _InsertImageHandler = _interopRequireDefault(require("../components/image/InsertImageHandler"));
20
21
  var _ImageToolbar = _interopRequireDefault(require("../components/image/ImageToolbar"));
21
22
  var _customToolbarWrapper = _interopRequireDefault(require("./custom-toolbar-wrapper"));
@@ -44,13 +45,10 @@ var StyledRoot = (0, _styles.styled)('div', {
44
45
  return !['active', 'loading', 'pendingDelete'].includes(prop);
45
46
  }
46
47
  })(function (_ref2) {
47
- var theme = _ref2.theme,
48
- active = _ref2.active,
49
- loading = _ref2.loading,
48
+ var loading = _ref2.loading,
50
49
  pendingDelete = _ref2.pendingDelete;
51
50
  return _objectSpread(_objectSpread({
52
51
  position: 'relative',
53
- border: active ? "solid 1px ".concat(theme.palette.primary.main) : "solid 1px ".concat(theme.palette.common.white),
54
52
  display: 'flex',
55
53
  transition: 'opacity 200ms linear'
56
54
  }, loading && {
@@ -71,8 +69,19 @@ var StyledImageContainer = (0, _styles.styled)('div')(function (_ref3) {
71
69
  }
72
70
  };
73
71
  });
74
- var StyledResize = (0, _styles.styled)('div')(function (_ref4) {
75
- var theme = _ref4.theme;
72
+ var StyledImage = (0, _styles.styled)('img', {
73
+ shouldForwardProp: function shouldForwardProp(prop) {
74
+ return prop !== 'active';
75
+ }
76
+ })(function (_ref4) {
77
+ var theme = _ref4.theme,
78
+ active = _ref4.active;
79
+ return {
80
+ border: active ? "solid 1px ".concat(theme.palette.primary.main) : 'solid 1px transparent'
81
+ };
82
+ });
83
+ var StyledResize = (0, _styles.styled)('div')(function (_ref5) {
84
+ var theme = _ref5.theme;
76
85
  return {
77
86
  backgroundColor: theme.palette.primary.main,
78
87
  cursor: 'col-resize',
@@ -88,20 +97,25 @@ var sizePx = function sizePx(s) {
88
97
  return s ? "".concat(s, "px") : 'calc(20px)';
89
98
  };
90
99
  function ImageComponent(props) {
100
+ var _options$imageHandlin6;
91
101
  var node = props.node,
92
102
  editor = props.editor,
93
103
  attributes = props.attributes,
94
104
  onFocus = props.onFocus,
105
+ getPos = props.getPos,
95
106
  selected = props.selected,
96
107
  options = props.options,
97
108
  _props$maxImageWidth = props.maxImageWidth,
98
109
  maxImageWidth = _props$maxImageWidth === void 0 ? 700 : _props$maxImageWidth,
99
110
  _props$maxImageHeight = props.maxImageHeight,
100
- maxImageHeight = _props$maxImageHeight === void 0 ? 900 : _props$maxImageHeight,
101
- latex = props.latex,
102
- handleChange = props.handleChange,
103
- handleDone = props.handleDone;
111
+ maxImageHeight = _props$maxImageHeight === void 0 ? 900 : _props$maxImageHeight;
104
112
  var alt = node.attrs.alt;
113
+ var pos = getPos();
114
+ var selFrom = editor.state.selection.from;
115
+ var selTo = editor.state.selection.to;
116
+ var onlyThisNodeSelected = (0, _react.useMemo)(function () {
117
+ return selFrom + node.nodeSize === selTo;
118
+ }, [selFrom, selTo, node.nodeSize]);
105
119
  var _useState = (0, _react.useState)(false),
106
120
  _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
107
121
  showToolbar = _useState2[0],
@@ -114,35 +128,61 @@ function ImageComponent(props) {
114
128
  var floored = width / imgRef.current.naturalWidth * 4;
115
129
  return parseInt(floored.toFixed(0) * 25, 10);
116
130
  }, []);
131
+ var findNodePos = (0, _react.useCallback)(function () {
132
+ var key = latestNodeRef.current.attrs.nodeKey;
133
+ var found = null;
134
+ editor.state.doc.descendants(function (n, pos) {
135
+ if (found !== null) return false;
136
+ if (n.type.name === 'imageUploadNode' && n.attrs.nodeKey === key) {
137
+ found = pos;
138
+ return false;
139
+ }
140
+ });
141
+ return found;
142
+ }, [editor]);
143
+
144
+ // dispatch an attribute update targeted precisely at this node by nodeKey.
145
+ var updateThisNode = (0, _react.useCallback)(function (newAttrs) {
146
+ var nodePos = findNodePos();
147
+ if (nodePos === null) return;
148
+ var currentNode = editor.state.doc.nodeAt(nodePos);
149
+ if (!currentNode) return;
150
+ editor.view.dispatch(editor.state.tr.setNodeMarkup(nodePos, undefined, _objectSpread(_objectSpread({}, currentNode.attrs), newAttrs)));
151
+ }, [editor, findNodePos]);
117
152
  var applySizeData = (0, _react.useCallback)(function () {
118
153
  if (!node.attrs.width || !imgRef.current) return;
119
- var update = _objectSpread(_objectSpread({}, node.attrs), {}, {
120
- resizePercent: getPercentFromWidth(node.attrs.width)
154
+ var resizePercent = getPercentFromWidth(node.attrs.width);
155
+ if (node.attrs.resizePercent === resizePercent) return;
156
+ updateThisNode({
157
+ resizePercent: resizePercent
121
158
  });
122
- if (!(0, _isEqual["default"])(update, node.attrs)) {
123
- editor.commands.updateAttributes('imageUploadNode', update);
124
- }
125
- }, [editor, node.attrs, getPercentFromWidth]);
159
+ }, [node.attrs.width, node.attrs.resizePercent, getPercentFromWidth, updateThisNode]);
126
160
 
127
161
  // keep ref in sync with latest node
128
162
  (0, _react.useEffect)(function () {
129
- latestNodeRef.current = node;
130
- }, [node]);
163
+ latestNodeRef.current = _objectSpread(_objectSpread({}, node), {}, {
164
+ pos: pos
165
+ });
166
+ }, [node, pos]);
131
167
  (0, _react.useEffect)(function () {
132
- var selection = editor.state.selection;
133
- var onlyThisNodeSelected = selection.from + node.nodeSize === selection.to;
134
168
  if (selected) {
135
169
  if (onlyThisNodeSelected) {
170
+ var _node$attrs$src, _node$attrs, _options$imageHandlin;
171
+ // Only open the upload UI for a fresh placeholder. Remounting after tab switch
172
+ // would otherwise call insertImageRequested again and reopen the file modal.
173
+ var hasImageSrc = String((_node$attrs$src = (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.src) !== null && _node$attrs$src !== void 0 ? _node$attrs$src : '').trim();
174
+ if (!hasImageSrc && (_options$imageHandlin = options.imageHandling) !== null && _options$imageHandlin !== void 0 && _options$imageHandlin.insertImageRequested) {
175
+ options.imageHandling.insertImageRequested(editor, [node, pos], function (finish) {
176
+ return new _InsertImageHandler["default"](editor, [node, pos], finish);
177
+ });
178
+ }
136
179
  setShowToolbar(selected);
137
180
  }
138
181
  } else {
139
182
  setShowToolbar(selected);
140
183
  }
141
- }, [editor, node, selected]);
184
+ }, [onlyThisNodeSelected, selected]);
142
185
  (0, _react.useEffect)(function () {
143
- options.imageHandling.insertImageRequested(node, function (finish) {
144
- return new _InsertImageHandler["default"](editor, node, finish);
145
- });
146
186
  applySizeData();
147
187
  var resizeHandle = resizeRef.current;
148
188
  if (resizeHandle) {
@@ -152,7 +192,6 @@ function ImageComponent(props) {
152
192
  if (resizeHandle) {
153
193
  resizeHandle.removeEventListener('mousedown', initResize, false);
154
194
  }
155
- options.imageHandling.onDelete(latestNodeRef.current);
156
195
  };
157
196
  }, []);
158
197
  (0, _react.useEffect)(function () {
@@ -170,11 +209,14 @@ function ImageComponent(props) {
170
209
  width: w,
171
210
  height: h
172
211
  };
173
- if (!(0, _isEqual["default"])(update, node.attrs)) {
174
- editor.commands.updateAttributes('imageUploadNode', update);
212
+ if (!(0, _isEqual["default"])(update, {
213
+ width: node.attrs.width,
214
+ height: node.attrs.height
215
+ })) {
216
+ updateThisNode(update);
175
217
  }
176
218
  }
177
- }, [editor, node.attrs, maxImageWidth, maxImageHeight]);
219
+ }, [node.attrs.width, node.attrs.height, maxImageWidth, maxImageHeight, updateThisNode]);
178
220
  var updateAspect = function updateAspect(initial, next) {
179
221
  var keepAspect = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
180
222
  var resizeType = arguments.length > 3 ? arguments[3] : undefined;
@@ -206,18 +248,15 @@ function ImageComponent(props) {
206
248
  if (next.width > 50 && next.height > 50 && next.width <= 700 && next.height <= 900) {
207
249
  box.style.width = "".concat(next.width, "px");
208
250
  box.style.height = "".concat(next.height, "px");
209
- var update = {
251
+ updateThisNode({
210
252
  width: next.width,
211
253
  height: next.height
212
- };
213
- if (!(0, _isEqual["default"])(update, node.attrs)) {
214
- editor.commands.updateAttributes('imageUploadNode', update);
215
- }
254
+ });
216
255
  }
217
- }, [editor, node.attrs]);
256
+ }, [editor, updateThisNode]);
218
257
  var onChange = (0, _react.useCallback)(function (newValues) {
219
- editor.commands.updateAttributes('imageUploadNode', newValues);
220
- }, [editor]);
258
+ updateThisNode(newValues);
259
+ }, [editor, updateThisNode]);
221
260
  var stopResize = (0, _react.useCallback)(function () {
222
261
  window.removeEventListener('mousemove', startResize);
223
262
  window.removeEventListener('mouseup', stopResize);
@@ -238,7 +277,6 @@ function ImageComponent(props) {
238
277
  }[node.attrs.alignment] || 'flex-start';
239
278
  return /*#__PURE__*/_react["default"].createElement(_react2.NodeViewWrapper, null, /*#__PURE__*/_react["default"].createElement(StyledRoot, {
240
279
  onFocus: onFocus,
241
- active: selected,
242
280
  loading: !node.attrs.loaded,
243
281
  pendingDelete: node.attrs.deleteStatus === 'pending',
244
282
  style: {
@@ -248,7 +286,13 @@ function ImageComponent(props) {
248
286
  mode: "determinate",
249
287
  value: node.attrs.percent || 0,
250
288
  hideProgress: node.attrs.loaded
251
- }), /*#__PURE__*/_react["default"].createElement(StyledImageContainer, null, /*#__PURE__*/_react["default"].createElement("img", (0, _extends2["default"])({}, attributes, {
289
+ }), /*#__PURE__*/_react["default"].createElement(StyledImageContainer, {
290
+ onDragStart: function onDragStart(e) {
291
+ return e.preventDefault();
292
+ }
293
+ }, /*#__PURE__*/_react["default"].createElement(StyledImage, (0, _extends2["default"])({}, attributes, {
294
+ active: selected && node.attrs.loaded,
295
+ draggable: false,
252
296
  ref: imgRef,
253
297
  src: node.attrs.src,
254
298
  style: style,
@@ -257,33 +301,40 @@ function ImageComponent(props) {
257
301
  })), /*#__PURE__*/_react["default"].createElement(StyledResize, {
258
302
  ref: resizeRef,
259
303
  className: "resize"
260
- }))), showToolbar && /*#__PURE__*/_react["default"].createElement("div", {
304
+ }))), showToolbar && editor._tiptapContainerEl && /*#__PURE__*/_reactDom["default"].createPortal(/*#__PURE__*/_react["default"].createElement("div", {
261
305
  ref: toolbarRef,
262
306
  style: {
263
- position: 'absolute',
264
- top: '100%',
265
- left: 0,
266
307
  zIndex: 20,
267
308
  background: 'var(--editable-html-toolbar-bg, #efefef)',
268
309
  boxShadow: '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)',
269
310
  width: '100%'
270
311
  }
271
- }, /*#__PURE__*/_react["default"].createElement(_customToolbarWrapper["default"], (0, _extends2["default"])({
272
- showDone: true
273
- }, options, {
312
+ }, /*#__PURE__*/_react["default"].createElement(_customToolbarWrapper["default"], {
313
+ showDone: true,
314
+ deletable: true,
315
+ toolbarOpts: options.toolbarOpts || {},
316
+ onDelete: function onDelete() {
317
+ var _options$imageHandlin2, _options$imageHandlin3;
318
+ var nodePos = findNodePos();
319
+ if (nodePos === null) return;
320
+ (_options$imageHandlin2 = options.imageHandling) === null || _options$imageHandlin2 === void 0 || (_options$imageHandlin3 = _options$imageHandlin2.onDelete) === null || _options$imageHandlin3 === void 0 || _options$imageHandlin3.call(_options$imageHandlin2, latestNodeRef.current);
321
+ editor.view.dispatch(editor.state.tr["delete"](nodePos, nodePos + editor.state.doc.nodeAt(nodePos).nodeSize));
322
+ setShowToolbar(false);
323
+ editor.commands.focus();
324
+ },
274
325
  onDone: function onDone() {
275
- var _props$imageHandling;
326
+ var _options$imageHandlin4, _options$imageHandlin5;
276
327
  setShowToolbar(false);
277
- (_props$imageHandling = props.imageHandling) === null || _props$imageHandling === void 0 || _props$imageHandling.onDone();
278
- props.editor.commands.focus('end');
328
+ (_options$imageHandlin4 = options.imageHandling) === null || _options$imageHandlin4 === void 0 || (_options$imageHandlin5 = _options$imageHandlin4.onDone) === null || _options$imageHandlin5 === void 0 || _options$imageHandlin5.call(_options$imageHandlin4, editor);
329
+ editor.commands.focus('end');
279
330
  }
280
- }), /*#__PURE__*/_react["default"].createElement(_ImageToolbar["default"], {
281
- disableImageAlignmentButtons: options.disableImageAlignmentButtons,
331
+ }, /*#__PURE__*/_react["default"].createElement(_ImageToolbar["default"], {
332
+ disableImageAlignmentButtons: (_options$imageHandlin6 = options.imageHandling) === null || _options$imageHandlin6 === void 0 ? void 0 : _options$imageHandlin6.disableImageAlignmentButtons,
282
333
  alt: node.attrs.alt,
283
334
  imageLoaded: node.attrs.loaded,
284
335
  alignment: node.attrs.alignment || 'left',
285
336
  onChange: onChange
286
- }))));
337
+ }))), editor._tiptapContainerEl));
287
338
  }
288
339
  ImageComponent.propTypes = {
289
340
  node: _propTypes["default"].object.isRequired,
@@ -1 +1 @@
1
- {"version":3,"file":"image-component.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_isEqual","_debug","_LinearProgress","_styles","_react2","_InsertImageHandler","_ImageToolbar","_customToolbarWrapper","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ownKeys","keys","getOwnPropertySymbols","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","log","debug","StyledProgress","styled","LinearProgress","shouldForwardProp","prop","_ref","hideProgress","position","left","width","top","transition","opacity","StyledRoot","includes","_ref2","theme","active","loading","pendingDelete","border","concat","palette","primary","main","common","white","display","StyledImageContainer","_ref3","alignItems","StyledResize","_ref4","backgroundColor","cursor","height","borderRadius","marginLeft","marginRight","sizePx","s","ImageComponent","props","node","editor","attributes","onFocus","selected","options","_props$maxImageWidth","maxImageWidth","_props$maxImageHeight","maxImageHeight","latex","handleChange","handleDone","alt","attrs","_useState","useState","_useState2","_slicedToArray2","showToolbar","setShowToolbar","latestNodeRef","useRef","imgRef","resizeRef","toolbarRef","getPercentFromWidth","useCallback","floored","current","naturalWidth","parseInt","toFixed","applySizeData","update","resizePercent","isEqual","commands","updateAttributes","useEffect","selection","state","onlyThisNodeSelected","from","nodeSize","to","imageHandling","insertImageRequested","finish","InsertImageHandler","resizeHandle","addEventListener","initResize","removeEventListener","onDelete","loadImage","box","style","w","Math","min","h","naturalHeight","updateAspect","initial","next","keepAspect","undefined","resizeType","ratio","startResize","bounds","target","getBoundingClientRect","clientX","clientY","onChange","newValues","stopResize","window","objectFit","flexAlign","center","right","alignment","createElement","NodeViewWrapper","loaded","deleteStatus","justifyContent","mode","value","percent","_extends2","ref","src","onLoad","className","zIndex","background","boxShadow","showDone","onDone","_props$imageHandling","focus","disableImageAlignmentButtons","imageLoaded","propTypes","PropTypes","object","isRequired","func","number","_default","exports"],"sources":["../../src/extensions/image-component.jsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport isEqual from 'lodash-es/isEqual';\nimport debug from 'debug';\nimport LinearProgress from '@mui/material/LinearProgress';\nimport { styled } from '@mui/material/styles';\nimport { NodeViewWrapper } from '@tiptap/react';\nimport InsertImageHandler from '../components/image/InsertImageHandler';\nimport ImageToolbar from '../components/image/ImageToolbar';\nimport CustomToolbarWrapper from './custom-toolbar-wrapper';\n\nconst log = debug('@pie-lib:editable-html:plugins:image:component');\n\nconst StyledProgress = styled(LinearProgress, {\n shouldForwardProp: (prop) => prop !== 'hideProgress',\n})(({ hideProgress }) => ({\n position: 'absolute',\n left: '0',\n width: 'fit-content',\n top: '0%',\n transition: 'opacity 200ms linear',\n ...(hideProgress && {\n opacity: 0,\n }),\n}));\n\nconst StyledRoot = styled('div', {\n shouldForwardProp: (prop) => !['active', 'loading', 'pendingDelete'].includes(prop),\n})(({ theme, active, loading, pendingDelete }) => ({\n position: 'relative',\n border: active ? `solid 1px ${theme.palette.primary.main}` : `solid 1px ${theme.palette.common.white}`,\n display: 'flex',\n transition: 'opacity 200ms linear',\n ...(loading && {\n opacity: 0.3,\n }),\n ...(pendingDelete && {\n opacity: 0.3,\n }),\n}));\n\nconst StyledImageContainer = styled('div')(({ theme }) => ({\n position: 'relative',\n width: 'fit-content',\n display: 'flex',\n alignItems: 'center',\n '&&:hover > .resize': {\n display: 'block',\n },\n}));\n\nconst StyledResize = styled('div')(({ theme }) => ({\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\nconst sizePx = (s) => (s ? `${s}px` : 'calc(20px)');\n\nfunction ImageComponent(props) {\n const {\n node,\n editor,\n attributes,\n onFocus,\n selected,\n options,\n maxImageWidth = 700,\n maxImageHeight = 900,\n latex,\n handleChange,\n handleDone,\n } = props;\n const { alt } = node.attrs;\n\n const [showToolbar, setShowToolbar] = useState(false);\n\n const latestNodeRef = useRef(node);\n const imgRef = useRef(null);\n const resizeRef = useRef(null);\n const toolbarRef = useRef(null);\n\n const getPercentFromWidth = useCallback((width) => {\n const floored = (width / imgRef.current.naturalWidth) * 4;\n return parseInt(floored.toFixed(0) * 25, 10);\n }, []);\n\n const applySizeData = useCallback(() => {\n if (!node.attrs.width || !imgRef.current) return;\n\n const update = {\n ...node.attrs,\n resizePercent: getPercentFromWidth(node.attrs.width),\n };\n\n if (!isEqual(update, node.attrs)) {\n editor.commands.updateAttributes('imageUploadNode', update);\n }\n }, [editor, node.attrs, getPercentFromWidth]);\n\n // keep ref in sync with latest node\n useEffect(() => {\n latestNodeRef.current = node;\n }, [node]);\n\n useEffect(() => {\n const { selection } = editor.state;\n const onlyThisNodeSelected = selection.from + node.nodeSize === selection.to;\n\n if (selected) {\n if (onlyThisNodeSelected) {\n setShowToolbar(selected);\n }\n } else {\n setShowToolbar(selected);\n }\n }, [editor, node, selected]);\n\n useEffect(() => {\n options.imageHandling.insertImageRequested(node, (finish) => new InsertImageHandler(editor, node, finish));\n applySizeData();\n\n const resizeHandle = resizeRef.current;\n if (resizeHandle) {\n resizeHandle.addEventListener('mousedown', initResize, false);\n }\n return () => {\n if (resizeHandle) {\n resizeHandle.removeEventListener('mousedown', initResize, false);\n }\n\n options.imageHandling.onDelete(latestNodeRef.current);\n };\n }, []);\n\n useEffect(() => {\n applySizeData();\n });\n\n const loadImage = useCallback(() => {\n const box = imgRef.current;\n if (!box) return;\n\n if (!box.style.width || box.style.width === 'calc(20px)') {\n const w = Math.min(box.naturalWidth, maxImageWidth);\n const h = Math.min(box.naturalHeight, maxImageHeight);\n\n box.style.width = `${w}px`;\n box.style.height = `${h}px`;\n\n const update = { width: w, height: h };\n if (!isEqual(update, node.attrs)) {\n editor.commands.updateAttributes('imageUploadNode', update);\n }\n }\n }, [editor, node.attrs, maxImageWidth, maxImageHeight]);\n\n const updateAspect = (initial, next, keepAspect = true, resizeType) => {\n if (keepAspect) {\n const ratio = initial.width / initial.height;\n if (resizeType === 'height') return { width: next.height * ratio, height: next.height };\n return { width: next.width, height: next.width / ratio };\n }\n return next;\n };\n\n const startResize = useCallback(\n (e) => {\n const box = imgRef.current;\n if (!box) return;\n\n const bounds = e.target.getBoundingClientRect();\n const initial = { width: box.naturalWidth, height: box.naturalHeight };\n\n const next = updateAspect(initial, {\n width: e.clientX - bounds.left,\n height: e.clientY - bounds.top,\n });\n\n if (next.width > 50 && next.height > 50 && next.width <= 700 && next.height <= 900) {\n box.style.width = `${next.width}px`;\n box.style.height = `${next.height}px`;\n\n const update = { width: next.width, height: next.height };\n if (!isEqual(update, node.attrs)) {\n editor.commands.updateAttributes('imageUploadNode', update);\n }\n }\n },\n [editor, node.attrs],\n );\n\n const onChange = useCallback(\n (newValues) => {\n editor.commands.updateAttributes('imageUploadNode', newValues);\n },\n [editor],\n );\n\n const stopResize = useCallback(() => {\n window.removeEventListener('mousemove', startResize);\n window.removeEventListener('mouseup', stopResize);\n }, [startResize]);\n\n const initResize = useCallback(() => {\n window.addEventListener('mousemove', startResize);\n window.addEventListener('mouseup', stopResize);\n }, [startResize, stopResize]);\n\n const style = {\n width: sizePx(node.attrs.width),\n height: sizePx(node.attrs.height),\n objectFit: 'contain',\n };\n\n const flexAlign = { left: 'flex-start', center: 'center', right: 'flex-end' }[node.attrs.alignment] || 'flex-start';\n\n return (\n <NodeViewWrapper>\n <StyledRoot\n onFocus={onFocus}\n active={selected}\n loading={!node.attrs.loaded}\n pendingDelete={node.attrs.deleteStatus === 'pending'}\n style={{ justifyContent: flexAlign }}\n >\n <StyledProgress mode=\"determinate\" value={node.attrs.percent || 0} hideProgress={node.attrs.loaded} />\n\n <StyledImageContainer>\n <img\n {...attributes}\n ref={imgRef}\n src={node.attrs.src}\n style={style}\n onLoad={loadImage}\n alt={node.attrs.alt}\n />\n <StyledResize ref={resizeRef} className=\"resize\" />\n </StyledImageContainer>\n </StyledRoot>\n\n {showToolbar && (\n <div\n ref={toolbarRef}\n style={{\n position: 'absolute',\n top: '100%',\n left: 0,\n zIndex: 20,\n background: 'var(--editable-html-toolbar-bg, #efefef)',\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 width: '100%',\n }}\n >\n <CustomToolbarWrapper\n showDone\n {...options}\n onDone={() => {\n setShowToolbar(false);\n props.imageHandling?.onDone();\n props.editor.commands.focus('end');\n }}\n >\n <ImageToolbar\n disableImageAlignmentButtons={options.disableImageAlignmentButtons}\n alt={node.attrs.alt}\n imageLoaded={node.attrs.loaded}\n alignment={node.attrs.alignment || 'left'}\n onChange={onChange}\n />\n </CustomToolbarWrapper>\n </div>\n )}\n </NodeViewWrapper>\n );\n}\n\nImageComponent.propTypes = {\n node: PropTypes.object.isRequired,\n editor: PropTypes.object.isRequired,\n attributes: PropTypes.object,\n onFocus: PropTypes.func,\n maxImageWidth: PropTypes.number,\n maxImageHeight: PropTypes.number,\n};\n\nexport default ImageComponent;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"image-component.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_isEqual","_debug","_LinearProgress","_styles","_react2","_reactDom","_InsertImageHandler","_ImageToolbar","_customToolbarWrapper","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ownKeys","keys","getOwnPropertySymbols","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","log","debug","StyledProgress","styled","LinearProgress","shouldForwardProp","prop","_ref","hideProgress","position","left","width","top","transition","opacity","StyledRoot","includes","_ref2","loading","pendingDelete","display","StyledImageContainer","_ref3","theme","alignItems","StyledImage","_ref4","active","border","concat","palette","primary","main","StyledResize","_ref5","backgroundColor","cursor","height","borderRadius","marginLeft","marginRight","sizePx","s","ImageComponent","props","_options$imageHandlin6","node","editor","attributes","onFocus","getPos","selected","options","_props$maxImageWidth","maxImageWidth","_props$maxImageHeight","maxImageHeight","alt","attrs","pos","selFrom","state","selection","from","selTo","to","onlyThisNodeSelected","useMemo","nodeSize","_useState","useState","_useState2","_slicedToArray2","showToolbar","setShowToolbar","latestNodeRef","useRef","imgRef","resizeRef","toolbarRef","getPercentFromWidth","useCallback","floored","current","naturalWidth","parseInt","toFixed","findNodePos","key","nodeKey","found","doc","descendants","type","name","updateThisNode","newAttrs","nodePos","currentNode","nodeAt","view","dispatch","tr","setNodeMarkup","undefined","applySizeData","resizePercent","useEffect","_node$attrs$src","_node$attrs","_options$imageHandlin","hasImageSrc","String","src","trim","imageHandling","insertImageRequested","finish","InsertImageHandler","resizeHandle","addEventListener","initResize","removeEventListener","loadImage","box","style","w","Math","min","h","naturalHeight","update","isEqual","updateAspect","initial","next","keepAspect","resizeType","ratio","startResize","bounds","target","getBoundingClientRect","clientX","clientY","onChange","newValues","stopResize","window","objectFit","flexAlign","center","right","alignment","createElement","NodeViewWrapper","loaded","deleteStatus","justifyContent","mode","value","percent","onDragStart","preventDefault","_extends2","draggable","ref","onLoad","className","_tiptapContainerEl","ReactDOM","createPortal","zIndex","background","boxShadow","showDone","deletable","toolbarOpts","onDelete","_options$imageHandlin2","_options$imageHandlin3","commands","focus","onDone","_options$imageHandlin4","_options$imageHandlin5","disableImageAlignmentButtons","imageLoaded","propTypes","PropTypes","object","isRequired","func","number","_default","exports"],"sources":["../../src/extensions/image-component.jsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport isEqual from 'lodash-es/isEqual';\nimport debug from 'debug';\nimport LinearProgress from '@mui/material/LinearProgress';\nimport { styled } from '@mui/material/styles';\nimport { NodeViewWrapper } from '@tiptap/react';\nimport ReactDOM from 'react-dom';\nimport InsertImageHandler from '../components/image/InsertImageHandler';\nimport ImageToolbar from '../components/image/ImageToolbar';\nimport CustomToolbarWrapper from './custom-toolbar-wrapper';\n\nconst log = debug('@pie-lib:editable-html:plugins:image:component');\n\nconst StyledProgress = styled(LinearProgress, {\n shouldForwardProp: (prop) => prop !== 'hideProgress',\n})(({ hideProgress }) => ({\n position: 'absolute',\n left: '0',\n width: 'fit-content',\n top: '0%',\n transition: 'opacity 200ms linear',\n ...(hideProgress && {\n opacity: 0,\n }),\n}));\n\nconst StyledRoot = styled('div', {\n shouldForwardProp: (prop) => !['active', 'loading', 'pendingDelete'].includes(prop),\n})(({ loading, pendingDelete }) => ({\n position: 'relative',\n display: 'flex',\n transition: 'opacity 200ms linear',\n ...(loading && {\n opacity: 0.3,\n }),\n ...(pendingDelete && {\n opacity: 0.3,\n }),\n}));\n\nconst StyledImageContainer = styled('div')(({ theme }) => ({\n position: 'relative',\n width: 'fit-content',\n display: 'flex',\n alignItems: 'center',\n '&&:hover > .resize': {\n display: 'block',\n },\n}));\n\nconst StyledImage = styled('img', {\n shouldForwardProp: (prop) => prop !== 'active',\n})(({ theme, active }) => ({\n border: active ? `solid 1px ${theme.palette.primary.main}` : 'solid 1px transparent',\n}));\n\nconst StyledResize = styled('div')(({ theme }) => ({\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\nconst sizePx = (s) => (s ? `${s}px` : 'calc(20px)');\n\nfunction ImageComponent(props) {\n const {\n node,\n editor,\n attributes,\n onFocus,\n getPos,\n selected,\n options,\n maxImageWidth = 700,\n maxImageHeight = 900,\n } = props;\n const { alt } = node.attrs;\n const pos = getPos();\n\n const selFrom = editor.state.selection.from;\n const selTo = editor.state.selection.to;\n const onlyThisNodeSelected = useMemo(() => selFrom + node.nodeSize === selTo, [selFrom, selTo, node.nodeSize]);\n\n const [showToolbar, setShowToolbar] = useState(false);\n\n const latestNodeRef = useRef(node);\n const imgRef = useRef(null);\n const resizeRef = useRef(null);\n const toolbarRef = useRef(null);\n\n const getPercentFromWidth = useCallback((width) => {\n const floored = (width / imgRef.current.naturalWidth) * 4;\n return parseInt(floored.toFixed(0) * 25, 10);\n }, []);\n\n const findNodePos = useCallback(() => {\n const key = latestNodeRef.current.attrs.nodeKey;\n let found = null;\n editor.state.doc.descendants((n, pos) => {\n if (found !== null) return false;\n if (n.type.name === 'imageUploadNode' && n.attrs.nodeKey === key) {\n found = pos;\n return false;\n }\n });\n return found;\n }, [editor]);\n\n // dispatch an attribute update targeted precisely at this node by nodeKey.\n const updateThisNode = useCallback(\n (newAttrs) => {\n const nodePos = findNodePos();\n if (nodePos === null) return;\n const currentNode = editor.state.doc.nodeAt(nodePos);\n if (!currentNode) return;\n editor.view.dispatch(editor.state.tr.setNodeMarkup(nodePos, undefined, { ...currentNode.attrs, ...newAttrs }));\n },\n [editor, findNodePos],\n );\n\n const applySizeData = useCallback(() => {\n if (!node.attrs.width || !imgRef.current) return;\n const resizePercent = getPercentFromWidth(node.attrs.width);\n if (node.attrs.resizePercent === resizePercent) return;\n updateThisNode({ resizePercent });\n }, [node.attrs.width, node.attrs.resizePercent, getPercentFromWidth, updateThisNode]);\n\n // keep ref in sync with latest node\n useEffect(() => {\n latestNodeRef.current = { ...node, pos };\n }, [node, pos]);\n\n useEffect(() => {\n if (selected) {\n if (onlyThisNodeSelected) {\n // Only open the upload UI for a fresh placeholder. Remounting after tab switch\n // would otherwise call insertImageRequested again and reopen the file modal.\n const hasImageSrc = String(node.attrs?.src ?? '').trim();\n\n if (!hasImageSrc && options.imageHandling?.insertImageRequested) {\n options.imageHandling.insertImageRequested(\n editor,\n [node, pos],\n (finish) => new InsertImageHandler(editor, [node, pos], finish),\n );\n }\n\n setShowToolbar(selected);\n }\n } else {\n setShowToolbar(selected);\n }\n }, [onlyThisNodeSelected, selected]);\n\n useEffect(() => {\n applySizeData();\n\n const resizeHandle = resizeRef.current;\n if (resizeHandle) {\n resizeHandle.addEventListener('mousedown', initResize, false);\n }\n return () => {\n if (resizeHandle) {\n resizeHandle.removeEventListener('mousedown', initResize, false);\n }\n };\n }, []);\n\n useEffect(() => {\n applySizeData();\n });\n\n const loadImage = useCallback(() => {\n const box = imgRef.current;\n if (!box) return;\n\n if (!box.style.width || box.style.width === 'calc(20px)') {\n const w = Math.min(box.naturalWidth, maxImageWidth);\n const h = Math.min(box.naturalHeight, maxImageHeight);\n\n box.style.width = `${w}px`;\n box.style.height = `${h}px`;\n\n const update = { width: w, height: h };\n if (!isEqual(update, { width: node.attrs.width, height: node.attrs.height })) {\n updateThisNode(update);\n }\n }\n }, [node.attrs.width, node.attrs.height, maxImageWidth, maxImageHeight, updateThisNode]);\n\n const updateAspect = (initial, next, keepAspect = true, resizeType) => {\n if (keepAspect) {\n const ratio = initial.width / initial.height;\n if (resizeType === 'height') return { width: next.height * ratio, height: next.height };\n return { width: next.width, height: next.width / ratio };\n }\n return next;\n };\n\n const startResize = useCallback(\n (e) => {\n const box = imgRef.current;\n if (!box) return;\n\n const bounds = e.target.getBoundingClientRect();\n const initial = { width: box.naturalWidth, height: box.naturalHeight };\n\n const next = updateAspect(initial, {\n width: e.clientX - bounds.left,\n height: e.clientY - bounds.top,\n });\n\n if (next.width > 50 && next.height > 50 && next.width <= 700 && next.height <= 900) {\n box.style.width = `${next.width}px`;\n box.style.height = `${next.height}px`;\n\n updateThisNode({ width: next.width, height: next.height });\n }\n },\n [editor, updateThisNode],\n );\n\n const onChange = useCallback(\n (newValues) => {\n updateThisNode(newValues);\n },\n [editor, updateThisNode],\n );\n\n const stopResize = useCallback(() => {\n window.removeEventListener('mousemove', startResize);\n window.removeEventListener('mouseup', stopResize);\n }, [startResize]);\n\n const initResize = useCallback(() => {\n window.addEventListener('mousemove', startResize);\n window.addEventListener('mouseup', stopResize);\n }, [startResize, stopResize]);\n\n const style = {\n width: sizePx(node.attrs.width),\n height: sizePx(node.attrs.height),\n objectFit: 'contain',\n };\n\n const flexAlign = { left: 'flex-start', center: 'center', right: 'flex-end' }[node.attrs.alignment] || 'flex-start';\n\n return (\n <NodeViewWrapper>\n <StyledRoot\n onFocus={onFocus}\n loading={!node.attrs.loaded}\n pendingDelete={node.attrs.deleteStatus === 'pending'}\n style={{ justifyContent: flexAlign }}\n >\n <StyledProgress mode=\"determinate\" value={node.attrs.percent || 0} hideProgress={node.attrs.loaded} />\n\n <StyledImageContainer onDragStart={(e) => e.preventDefault()}>\n <StyledImage\n {...attributes}\n active={selected && node.attrs.loaded}\n draggable={false}\n ref={imgRef}\n src={node.attrs.src}\n style={style}\n onLoad={loadImage}\n alt={node.attrs.alt}\n />\n <StyledResize ref={resizeRef} className=\"resize\" />\n </StyledImageContainer>\n </StyledRoot>\n\n {showToolbar &&\n editor._tiptapContainerEl &&\n ReactDOM.createPortal(\n <div\n ref={toolbarRef}\n style={{\n zIndex: 20,\n background: 'var(--editable-html-toolbar-bg, #efefef)',\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 width: '100%',\n }}\n >\n <CustomToolbarWrapper\n showDone\n deletable\n toolbarOpts={options.toolbarOpts || {}}\n onDelete={() => {\n const nodePos = findNodePos();\n if (nodePos === null) return;\n\n options.imageHandling?.onDelete?.(latestNodeRef.current);\n\n editor.view.dispatch(\n editor.state.tr.delete(nodePos, nodePos + editor.state.doc.nodeAt(nodePos).nodeSize),\n );\n setShowToolbar(false);\n editor.commands.focus();\n }}\n onDone={() => {\n setShowToolbar(false);\n options.imageHandling?.onDone?.(editor);\n editor.commands.focus('end');\n }}\n >\n <ImageToolbar\n disableImageAlignmentButtons={options.imageHandling?.disableImageAlignmentButtons}\n alt={node.attrs.alt}\n imageLoaded={node.attrs.loaded}\n alignment={node.attrs.alignment || 'left'}\n onChange={onChange}\n />\n </CustomToolbarWrapper>\n </div>,\n editor._tiptapContainerEl,\n )}\n </NodeViewWrapper>\n );\n}\n\nImageComponent.propTypes = {\n node: PropTypes.object.isRequired,\n editor: PropTypes.object.isRequired,\n attributes: PropTypes.object,\n onFocus: PropTypes.func,\n maxImageWidth: PropTypes.number,\n maxImageHeight: PropTypes.number,\n};\n\nexport default ImageComponent;\n"],"mappings":"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","ignoreList":[]}
@@ -8,8 +8,10 @@ exports.ImageUploadNode = void 0;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
9
  var _core = require("@tiptap/core");
10
10
  var _react = require("@tiptap/react");
11
+ var _state = require("@tiptap/pm/state");
11
12
  var _react2 = _interopRequireDefault(require("react"));
12
13
  var _imageComponent = _interopRequireDefault(require("./image-component"));
14
+ var _propTypes = require("prop-types");
13
15
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
14
16
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
15
17
  var ImageUploadNode = exports.ImageUploadNode = _core.Node.create({
@@ -23,6 +25,9 @@ var ImageUploadNode = exports.ImageUploadNode = _core.Node.create({
23
25
  // optional
24
26
  addAttributes: function addAttributes() {
25
27
  return {
28
+ nodeKey: {
29
+ "default": null
30
+ },
26
31
  loaded: {
27
32
  "default": false
28
33
  },
@@ -51,7 +56,7 @@ var ImageUploadNode = exports.ImageUploadNode = _core.Node.create({
51
56
  },
52
57
  parseHTML: function parseHTML() {
53
58
  return [{
54
- tag: 'div[data-type="image-upload-node"]'
59
+ tag: 'img[data-type="image-upload-node"]'
55
60
  }];
56
61
  },
57
62
  renderHTML: function renderHTML(_ref) {
@@ -75,11 +80,55 @@ var ImageUploadNode = exports.ImageUploadNode = _core.Node.create({
75
80
  return function (_ref2) {
76
81
  var commands = _ref2.commands;
77
82
  return commands.insertContent({
78
- type: _this2.name
83
+ type: _this2.name,
84
+ // adding a unique nodeKey attribute to help identify this node instance later due to issues with multiple images
85
+ attrs: {
86
+ nodeKey: "img-".concat(Date.now(), "-").concat(Math.random().toString(36).slice(2))
87
+ }
79
88
  });
80
89
  };
81
90
  }
82
91
  };
92
+ },
93
+ addProseMirrorPlugins: function addProseMirrorPlugins() {
94
+ var editor = this.editor;
95
+ return [new _state.Plugin({
96
+ props: {
97
+ handlePaste: function handlePaste(view, event) {
98
+ var _event$clipboardData;
99
+ var items = Array.from(((_event$clipboardData = event.clipboardData) === null || _event$clipboardData === void 0 ? void 0 : _event$clipboardData.items) || []);
100
+ var imageItem = items.find(function (item) {
101
+ return item.kind === 'file' && item.type.startsWith('image/');
102
+ });
103
+ if (!imageItem) {
104
+ return false;
105
+ }
106
+ var file = imageItem.getAsFile();
107
+ if (!file) {
108
+ return false;
109
+ }
110
+
111
+ // Example 1: insert as base64 immediately
112
+ var reader = new FileReader();
113
+ reader.onload = function () {
114
+ var src = reader.result;
115
+ if (typeof src !== 'string') {
116
+ return;
117
+ }
118
+ editor.commands.insertContent({
119
+ type: 'imageUploadNode',
120
+ attrs: {
121
+ src: src,
122
+ loaded: true,
123
+ nodeKey: "img-".concat(Date.now(), "-").concat(Math.random().toString(36).slice(2))
124
+ }
125
+ });
126
+ };
127
+ reader.readAsDataURL(file);
128
+ return true;
129
+ }
130
+ }
131
+ })];
83
132
  }
84
133
  });
85
134
  //# sourceMappingURL=image.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"image.js","names":["_core","require","_react","_react2","_interopRequireDefault","_imageComponent","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","ImageUploadNode","exports","Node","create","name","group","atom","selectable","draggable","addAttributes","loaded","deleteStatus","alignment","percent","width","height","src","alt","parseHTML","tag","renderHTML","_ref","HTMLAttributes","mergeAttributes","addNodeView","_this","ReactNodeViewRenderer","props","createElement","options","addCommands","_this2","setImageUploadNode","_ref2","commands","insertContent","type"],"sources":["../../src/extensions/image.js"],"sourcesContent":["import { mergeAttributes, Node } from '@tiptap/core';\nimport { ReactNodeViewRenderer } from '@tiptap/react';\nimport React from 'react';\nimport ImageComponent from './image-component';\n\nexport const ImageUploadNode = Node.create({\n name: 'imageUploadNode',\n\n group: 'block',\n atom: true, // ✅ prevents content holes\n selectable: true, // optional\n draggable: true, // optional\n\n addAttributes() {\n return {\n loaded: { default: false },\n deleteStatus: { default: null },\n alignment: { default: null },\n percent: { default: null },\n width: { default: null },\n height: { default: null },\n src: { default: null },\n alt: { default: null },\n };\n },\n\n parseHTML() {\n return [\n {\n tag: 'div[data-type=\"image-upload-node\"]',\n },\n ];\n },\n\n renderHTML({ HTMLAttributes }) {\n return ['img', mergeAttributes(HTMLAttributes, { 'data-type': 'image-upload-node' })];\n },\n\n addNodeView() {\n return ReactNodeViewRenderer((props) => <ImageComponent {...{ ...props, options: this.options }} />);\n },\n\n addCommands() {\n return {\n setImageUploadNode:\n () =>\n ({ commands }) => {\n return commands.insertContent({\n type: this.name,\n });\n },\n };\n },\n});\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"image.js","names":["_core","require","_react","_state","_react2","_interopRequireDefault","_imageComponent","_propTypes","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","ImageUploadNode","exports","Node","create","name","group","atom","selectable","draggable","addAttributes","nodeKey","loaded","deleteStatus","alignment","percent","width","height","src","alt","parseHTML","tag","renderHTML","_ref","HTMLAttributes","mergeAttributes","addNodeView","_this","ReactNodeViewRenderer","props","createElement","options","addCommands","_this2","setImageUploadNode","_ref2","commands","insertContent","type","attrs","concat","Date","now","Math","random","toString","slice","addProseMirrorPlugins","editor","Plugin","handlePaste","view","event","_event$clipboardData","items","Array","from","clipboardData","imageItem","find","item","kind","startsWith","file","getAsFile","reader","FileReader","onload","result","readAsDataURL"],"sources":["../../src/extensions/image.js"],"sourcesContent":["import { mergeAttributes, Node } from '@tiptap/core';\nimport { ReactNodeViewRenderer } from '@tiptap/react';\nimport { Plugin } from '@tiptap/pm/state';\nimport React from 'react';\nimport ImageComponent from './image-component';\nimport { node } from 'prop-types';\n\nexport const ImageUploadNode = Node.create({\n name: 'imageUploadNode',\n\n group: 'block',\n atom: true, // ✅ prevents content holes\n selectable: true, // optional\n draggable: true, // optional\n\n addAttributes() {\n return {\n nodeKey: { default: null },\n loaded: { default: false },\n deleteStatus: { default: null },\n alignment: { default: null },\n percent: { default: null },\n width: { default: null },\n height: { default: null },\n src: { default: null },\n alt: { default: null },\n };\n },\n\n parseHTML() {\n return [\n {\n tag: 'img[data-type=\"image-upload-node\"]',\n },\n ];\n },\n\n renderHTML({ HTMLAttributes }) {\n return ['img', mergeAttributes(HTMLAttributes, { 'data-type': 'image-upload-node' })];\n },\n\n addNodeView() {\n return ReactNodeViewRenderer((props) => <ImageComponent {...{ ...props, options: this.options }} />);\n },\n\n addCommands() {\n return {\n setImageUploadNode:\n () =>\n ({ commands }) => {\n return commands.insertContent({\n type: this.name,\n // adding a unique nodeKey attribute to help identify this node instance later due to issues with multiple images\n attrs: { nodeKey: `img-${Date.now()}-${Math.random().toString(36).slice(2)}` },\n });\n },\n };\n },\n\n addProseMirrorPlugins() {\n const editor = this.editor;\n\n return [\n new Plugin({\n props: {\n handlePaste(view, event) {\n const items = Array.from(event.clipboardData?.items || []);\n\n const imageItem = items.find((item) => item.kind === 'file' && item.type.startsWith('image/'));\n\n if (!imageItem) {\n return false;\n }\n\n const file = imageItem.getAsFile();\n\n if (!file) {\n return false;\n }\n\n // Example 1: insert as base64 immediately\n const reader = new FileReader();\n\n reader.onload = () => {\n const src = reader.result;\n\n if (typeof src !== 'string') {\n return;\n }\n\n editor.commands.insertContent({\n type: 'imageUploadNode',\n attrs: {\n src,\n loaded: true,\n nodeKey: `img-${Date.now()}-${Math.random().toString(36).slice(2)}`,\n },\n });\n };\n\n reader.readAsDataURL(file);\n\n return true;\n },\n },\n }),\n ];\n },\n});\n"],"mappings":"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","ignoreList":[]}
@@ -19,6 +19,17 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
19
19
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
20
20
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
21
21
  var ensureTextAfterMathPluginKey = new _prosemirrorState.PluginKey('ensureTextAfterMath');
22
+ var generateAdditionalKeys = function generateAdditionalKeys() {
23
+ var keyData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
24
+ return keyData.map(function (key) {
25
+ return {
26
+ name: key,
27
+ latex: key,
28
+ write: key,
29
+ label: key
30
+ };
31
+ });
32
+ };
22
33
  var EnsureTextAfterMathPlugin = exports.EnsureTextAfterMathPlugin = function EnsureTextAfterMathPlugin(mathNodeName) {
23
34
  return new _prosemirrorState.Plugin({
24
35
  key: ensureTextAfterMathPluginKey,
@@ -208,6 +219,16 @@ var MathNodeView = exports.MathNodeView = function MathNodeView(props) {
208
219
  _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
209
220
  position = _useState4[0],
210
221
  setPosition = _useState4[1];
222
+ var _ref3 = options || {},
223
+ _ref3$math = _ref3.math,
224
+ mathOptions = _ref3$math === void 0 ? {} : _ref3$math;
225
+ var keypadMode = mathOptions.keypadMode,
226
+ _mathOptions$controll = mathOptions.controlledKeypadMode,
227
+ controlledKeypadMode = _mathOptions$controll === void 0 ? true : _mathOptions$controll,
228
+ _mathOptions$customKe = mathOptions.customKeys,
229
+ customKeys = _mathOptions$customKe === void 0 ? [] : _mathOptions$customKe,
230
+ keyPadCharacterRef = mathOptions.keyPadCharacterRef,
231
+ setKeypadInteraction = mathOptions.setKeypadInteraction;
211
232
  var latex = node.attrs.latex || '';
212
233
  (0, _react.useEffect)(function () {
213
234
  if (selected) {
@@ -228,17 +249,34 @@ var MathNodeView = exports.MathNodeView = function MathNodeView(props) {
228
249
  left: start.left
229
250
  });
230
251
  var handleClickOutside = function handleClickOutside(event) {
231
- if (toolbarRef.current && !toolbarRef.current.contains(event.target) && !event.target.closest('[data-inline-node]')) {
252
+ var _document$querySelect, _document, _target$closest, _target$closest2, _target$closest3;
253
+ var target = event === null || event === void 0 ? void 0 : event.target;
254
+
255
+ // MUI's `Select` renders its dropdown options in a portal attached to `document.body`.
256
+ // Those clicks should not dismiss the math toolbar.
257
+ var equationEditorListboxes = ((_document$querySelect = (_document = document).querySelectorAll) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.call(_document, '[id^="equation-editor-select"][id*="listbox"], [aria-labelledby="equation-editor-label"][role="listbox"]')) || [];
258
+ var equationEditorPopoverOpen = equationEditorListboxes.length > 0;
259
+ var clickedEquationEditorSelect = !!(target !== null && target !== void 0 && target.id && target.id.includes('equation-editor-select')) || !!(target !== null && target !== void 0 && (_target$closest = target.closest) !== null && _target$closest !== void 0 && _target$closest.call(target, '[id*="equation-editor-select"]'));
260
+
261
+ // If the click originated from the math node preview itself (the element
262
+ // that opens the toolbar), ignore it here — the node's own onClick handler
263
+ // will keep/re-open the toolbar. Without this guard, closing and then
264
+ // immediately clicking the math node would fire this listener in the same
265
+ // event cycle and close the toolbar before it could open.
266
+ var clickedMathNode = !!(target !== null && target !== void 0 && (_target$closest2 = target.closest) !== null && _target$closest2 !== void 0 && _target$closest2.call(target, '.math-node'));
267
+ if (toolbarRef.current && !toolbarRef.current.contains(target) && !(target !== null && target !== void 0 && (_target$closest3 = target.closest) !== null && _target$closest3 !== void 0 && _target$closest3.call(target, '[data-inline-node]')) && !equationEditorPopoverOpen && !clickedEquationEditorSelect && !clickedMathNode) {
232
268
  setShowToolbar(false);
233
269
  }
234
270
  };
235
271
  if (showToolbar) {
236
- document.addEventListener('mousedown', handleClickOutside);
272
+ // Use `click` (not `mousedown`) so interacting with browser UI like the scrollbar
273
+ // doesn't automatically dismiss the math toolbar.
274
+ document.addEventListener('click', handleClickOutside);
237
275
  } else {
238
- document.removeEventListener('mousedown', handleClickOutside);
276
+ document.removeEventListener('click', handleClickOutside);
239
277
  }
240
278
  return function () {
241
- return document.removeEventListener('mousedown', handleClickOutside);
279
+ return document.removeEventListener('click', handleClickOutside);
242
280
  };
243
281
  }, [editor, showToolbar]);
244
282
  var handleChange = function handleChange(newLatex) {
@@ -280,10 +318,9 @@ var MathNodeView = exports.MathNodeView = function MathNodeView(props) {
280
318
  latex: latex
281
319
  })), showToolbar && /*#__PURE__*/_reactDom["default"].createPortal(/*#__PURE__*/_react["default"].createElement("div", {
282
320
  ref: toolbarRef,
321
+ "data-toolbar-for": editor.instanceId,
283
322
  style: {
284
- position: 'absolute',
285
- top: "".concat(position.top, "px"),
286
- left: "".concat(position.left, "px"),
323
+ marginTop: '6px',
287
324
  zIndex: 20,
288
325
  background: 'var(--editable-html-toolbar-bg, #efefef)',
289
326
  boxShadow: '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)'
@@ -293,7 +330,11 @@ var MathNodeView = exports.MathNodeView = function MathNodeView(props) {
293
330
  autoFocus: true,
294
331
  onChange: handleChange,
295
332
  onDone: handleDone,
296
- keypadMode: "basic"
297
- })), document.body));
333
+ keypadMode: keypadMode,
334
+ controlledKeypadMode: controlledKeypadMode,
335
+ additionalKeys: generateAdditionalKeys(customKeys),
336
+ keyPadCharacterRef: keyPadCharacterRef,
337
+ setKeypadInteraction: setKeypadInteraction
338
+ })), (editor === null || editor === void 0 ? void 0 : editor._tiptapContainerEl) || document.body));
298
339
  };
299
340
  //# sourceMappingURL=math.js.map