@selfcommunity/react-ui 0.7.0-alpha.313 → 0.7.0-alpha.314

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 (6) hide show
  1. package/lib/cjs/components/Editor/nodes/ImageNode.js +6 -5
  2. package/lib/cjs/components/Editor/plugins/ImagePlugin.js +9 -4
  3. package/lib/esm/components/Editor/nodes/ImageNode.js +6 -5
  4. package/lib/esm/components/Editor/plugins/ImagePlugin.js +9 -4
  5. package/lib/umd/react-ui.js +1 -1
  6. package/package.json +5 -5
package/lib/cjs/components/Editor/nodes/ImageNode.js CHANGED
@@ -69,7 +69,6 @@ const ImageEdit = ({ onResize, onDelete, imageRef }) => {
69
69
  setOpenResizePanel(false);
70
70
  };
71
71
  // RENDER
72
- console.log(width);
73
72
  return (react_1.default.createElement(Root, { className: classes.root, style: { width: imageRef.current.width, height: imageRef.current.height }, contentEditable: false, onClick: handleStopPropagation },
74
73
  react_1.default.createElement(material_1.Paper, null, openResizePanel ? (react_1.default.createElement(react_1.default.Fragment, null,
75
74
  react_1.default.createElement(material_1.TextField, { value: width, type: "number", onChange: handleChangeWidth, label: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.editor.imagePluginEdit.width", defaultMessage: "ui.editor.imagePluginEdit.width" }), InputProps: {
@@ -381,10 +380,12 @@ function ImageComponent({ src, altText, nodeKey, width, height, maxWidth, resiza
381
380
  resizable && (0, lexical_1.$isNodeSelection)(selection) && isFocused && (react_1.default.createElement(ImageResizer, { editor: editor, imageRef: imageRef, maxWidth: typeof maxWidth === 'number' ? maxWidth : null, onResizeStart: onResizeStart, onResizeEnd: onResizeEnd })))));
382
381
  }
383
382
  function convertImageElement(domNode) {
384
- const image = domNode;
385
- return {
386
- node: $createImageNode({ src: image.getAttribute('src'), altText: image.getAttribute('alt'), maxWidth: '100%' })
387
- };
383
+ if (domNode instanceof HTMLImageElement) {
384
+ const { alt: altText, src, width, height } = domNode;
385
+ const node = $createImageNode({ altText, height, src, width, maxWidth: '100%' });
386
+ return { node };
387
+ }
388
+ return null;
388
389
  }
389
390
  class ImageNode extends lexical_1.DecoratorNode {
390
391
  constructor(src, altText, maxWidth, width, height, key) {
package/lib/cjs/components/Editor/plugins/ImagePlugin.js CHANGED
@@ -32,12 +32,17 @@ function Image({ editor, className = '' }) {
32
32
  return file.type.startsWith('image/');
33
33
  };
34
34
  const handleUploadSuccess = (media) => {
35
- const data = {
36
- altText: media.title,
37
- src: media.image,
35
+ const image = media.image_thumbnail ? media.image_thumbnail : {
36
+ url: media.image,
38
37
  width: media.image_width,
39
38
  height: media.image_height
40
39
  };
40
+ const data = {
41
+ altText: media.title,
42
+ src: image.url,
43
+ width: image.width,
44
+ height: image.height
45
+ };
41
46
  editor.focus();
42
47
  editor.dispatchCommand(exports.INSERT_IMAGE_COMMAND, data);
43
48
  editor.dispatchCommand(lexical_1.INSERT_PARAGRAPH_COMMAND, undefined);
@@ -89,7 +94,7 @@ function ImagePlugin() {
89
94
  if ((0, lexical_1.$isRootNode)(selection.anchor.getNode())) {
90
95
  selection.insertParagraph();
91
96
  }
92
- const imageNode = (0, ImageNode_1.$createImageNode)({ src: payload.src, altText: payload.altText, maxWidth: '100%' });
97
+ const imageNode = (0, ImageNode_1.$createImageNode)({ src: payload.src, altText: payload.altText, maxWidth: '100%', width: payload.width, height: payload.height });
93
98
  selection.insertNodes([imageNode]);
94
99
  }
95
100
  return true;
package/lib/esm/components/Editor/nodes/ImageNode.js CHANGED
@@ -65,7 +65,6 @@ const ImageEdit = ({ onResize, onDelete, imageRef }) => {
65
65
  setOpenResizePanel(false);
66
66
  };
67
67
  // RENDER
68
- console.log(width);
69
68
  return (React.createElement(Root, { className: classes.root, style: { width: imageRef.current.width, height: imageRef.current.height }, contentEditable: false, onClick: handleStopPropagation },
70
69
  React.createElement(Paper, null, openResizePanel ? (React.createElement(React.Fragment, null,
71
70
  React.createElement(TextField, { value: width, type: "number", onChange: handleChangeWidth, label: React.createElement(FormattedMessage, { id: "ui.editor.imagePluginEdit.width", defaultMessage: "ui.editor.imagePluginEdit.width" }), InputProps: {
@@ -377,10 +376,12 @@ function ImageComponent({ src, altText, nodeKey, width, height, maxWidth, resiza
377
376
  resizable && $isNodeSelection(selection) && isFocused && (React.createElement(ImageResizer, { editor: editor, imageRef: imageRef, maxWidth: typeof maxWidth === 'number' ? maxWidth : null, onResizeStart: onResizeStart, onResizeEnd: onResizeEnd })))));
378
377
  }
379
378
  function convertImageElement(domNode) {
380
- const image = domNode;
381
- return {
382
- node: $createImageNode({ src: image.getAttribute('src'), altText: image.getAttribute('alt'), maxWidth: '100%' })
383
- };
379
+ if (domNode instanceof HTMLImageElement) {
380
+ const { alt: altText, src, width, height } = domNode;
381
+ const node = $createImageNode({ altText, height, src, width, maxWidth: '100%' });
382
+ return { node };
383
+ }
384
+ return null;
384
385
  }
385
386
  export class ImageNode extends DecoratorNode {
386
387
  constructor(src, altText, maxWidth, width, height, key) {
package/lib/esm/components/Editor/plugins/ImagePlugin.js CHANGED
@@ -29,12 +29,17 @@ function Image({ editor, className = '' }) {
29
29
  return file.type.startsWith('image/');
30
30
  };
31
31
  const handleUploadSuccess = (media) => {
32
- const data = {
33
- altText: media.title,
34
- src: media.image,
32
+ const image = media.image_thumbnail ? media.image_thumbnail : {
33
+ url: media.image,
35
34
  width: media.image_width,
36
35
  height: media.image_height
37
36
  };
37
+ const data = {
38
+ altText: media.title,
39
+ src: image.url,
40
+ width: image.width,
41
+ height: image.height
42
+ };
38
43
  editor.focus();
39
44
  editor.dispatchCommand(INSERT_IMAGE_COMMAND, data);
40
45
  editor.dispatchCommand(INSERT_PARAGRAPH_COMMAND, undefined);
@@ -86,7 +91,7 @@ export default function ImagePlugin() {
86
91
  if ($isRootNode(selection.anchor.getNode())) {
87
92
  selection.insertParagraph();
88
93
  }
89
- const imageNode = $createImageNode({ src: payload.src, altText: payload.altText, maxWidth: '100%' });
94
+ const imageNode = $createImageNode({ src: payload.src, altText: payload.altText, maxWidth: '100%', width: payload.width, height: payload.height });
90
95
  selection.insertNodes([imageNode]);
91
96
  }
92
97
  return true;