diff --git a/src/components/Editor/CustomExtensions/Image/ExtensionConfig.js b/src/components/Editor/CustomExtensions/Image/ExtensionConfig.js index c0bec465..4462f4d2 100644 --- a/src/components/Editor/CustomExtensions/Image/ExtensionConfig.js +++ b/src/components/Editor/CustomExtensions/Image/ExtensionConfig.js @@ -30,10 +30,7 @@ export default Node.create({ name: "image", addOptions() { - return { - HTMLAttributes: {}, - openImageInNewTab: true, - }; + return { HTMLAttributes: {}, openImageInNewTab: true }; }, group: "block", @@ -82,11 +79,7 @@ export default Node.create({ }, parseHTML() { - return [ - { - tag: "figure", - }, - ]; + return [{ tag: "figure" }]; }, renderHTML({ node, HTMLAttributes }) { diff --git a/src/components/Editor/CustomExtensions/Image/ImageComponent.jsx b/src/components/Editor/CustomExtensions/Image/ImageComponent.jsx index 9ff98284..89a25b15 100644 --- a/src/components/Editor/CustomExtensions/Image/ImageComponent.jsx +++ b/src/components/Editor/CustomExtensions/Image/ImageComponent.jsx @@ -28,9 +28,19 @@ const ImageComponent = ({ ? figureRef.current.querySelector("figcaption>div")?.textContent : alt; + const editorElement = figureRef.current?.closest(".neeto-editor"); + const maxImageWidth = editorElement?.offsetWidth - 50; + const handleResizeStop = (_event, _direction, ref) => { height = ref.offsetHeight; width = ref.offsetWidth; + + if (width > maxImageWidth) { + width = maxImageWidth; + const aspectRatio = ref.offsetHeight / ref.offsetWidth; + height = width * aspectRatio; + } + setCaptionWidth(width); view.dispatch( view.state.tr.setNodeMarkup( getPos(), @@ -57,6 +67,7 @@ const ImageComponent = ({ diff --git a/src/components/Editor/CustomExtensions/hooks/useCustomExtensions.js b/src/components/Editor/CustomExtensions/hooks/useCustomExtensions.js index cd7c731e..1e4c1654 100644 --- a/src/components/Editor/CustomExtensions/hooks/useCustomExtensions.js +++ b/src/components/Editor/CustomExtensions/hooks/useCustomExtensions.js @@ -102,21 +102,9 @@ const useCustomExtensions = ({ if (!isEmpty(mentions)) { const items = createMentionSuggestions(mentions); - customExtensions.push( - Mention.configure({ - suggestion: { - items, - }, - }) - ); + customExtensions.push(Mention.configure({ suggestion: { items } })); - customExtensions.push( - SpecialMentions.configure({ - suggestion: { - items, - }, - }) - ); + customExtensions.push(SpecialMentions.configure({ suggestion: { items } })); } if (!isEmpty(variables)) {