Merge pull request #1 from thousandsofraccoons/fix/image-alt-text-upd…

…ate-on-media-update Fix/image alt text update on media update
dasmikko · Nov 14, 2022 · 78ec132 · 78ec132
2 parents d81c795 + 22b83f3
commit 78ec132
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 3 deletions.
diff --git a/admin/src/components/Editor/index.js b/admin/src/components/Editor/index.js
@@ -134,17 +134,25 @@ const Editor = ({onChange, name, value, editor, disabled, settings}) => {
   const [forceInsert, setForceInsert] = useState(false);
   const handleToggleMediaLib = () => setMediaLibVisible(prev => !prev);
 
+  const getUpdatedImage = (asset) => ({
+    src: asset.url, 
+    alt: asset.alt, 
+    ...(asset.width && {width: asset.width}),
+    ...(asset.height && {height: asset.height}),
+    ...(asset.url?.includes('lazy') || asset.caption === 'lazy' && { loading: 'lazy' }),
+  })
+
   const handleChangeAssets = assets => {
     if (!forceInsert && editor.isActive('image')) {
       assets.map(asset => {
         if (asset.mime.includes('image')) {
-          editor.chain().focus().setImage({src: asset.url}).run()
+          editor.chain().focus().setImage(getUpdatedImage(asset)).run()
         }
       })
     } else {
       assets.map(asset => {
         if (asset.mime.includes('image')) {
-          editor.commands.setImage({src: asset.url, alt: asset.alt})
+          editor.commands.setImage(getUpdatedImage(asset))
         }
       });
     }

diff --git a/admin/src/components/MediaLib/index.js b/admin/src/components/MediaLib/index.js
@@ -8,6 +8,7 @@ const MediaLib = ({ isOpen, onChange, onToggle }) => {
 
     const handleSelectAssets = files => {
         const formattedFiles = files.map(f => ({
+            ...f,
             alt: f.alternativeText || f.name,
             url: prefixFileUrlWithBackendUrl(f.url),
             mime: f.mime,

diff --git a/admin/src/components/Wysiwyg/index.js b/admin/src/components/Wysiwyg/index.js
@@ -34,6 +34,7 @@ import OrderedListExtension from "@tiptap/extension-ordered-list"
 import BulletListExtension from '@tiptap/extension-bullet-list'
 import ListItemExtension from '@tiptap/extension-list-item'
 import GapcursorExtension from '@tiptap/extension-gapcursor'
+import History from '@tiptap/extension-history'
 import BlockquoteExtension from '@tiptap/extension-blockquote'
 import CodeBlockExtension from '@tiptap/extension-code-block'
 import DocumentExtension from '@tiptap/extension-document'
@@ -159,7 +160,23 @@ const WysiwygContent = ({ name, onChange, value, intlLabel, labelAction, disable
       }) : null,
 
       // Images
-      settings.image.enabled ? ImageExtension.configure({
+      settings.image.enabled ? ImageExtension.extend({
+        addAttributes() {
+          return {
+            ...this.parent?.(),
+            width: { default: null },
+            height: { default: null },
+            loading: { default: null },
+            renderHTML: (attributes) => {
+              return {
+                width: attributes.width,
+                height: attributes.height,
+                loading: attributes.loading
+              };
+            }
+          };
+        }
+      }).configure({
         inline: settings.image.inline,
         allowBase64: settings.image.allowBase64,
       }) : null,
@@ -182,6 +199,7 @@ const WysiwygContent = ({ name, onChange, value, intlLabel, labelAction, disable
       settings.youtube.enabled ? YouTubeExtension.configure({
         inline: false,
       }) : null,
+      History
     ],
     parseOptions: {
       preserveWhitespace: 'full',

diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
     "@tiptap/extension-gapcursor": "2.0.0-beta.199",
     "@tiptap/extension-hard-break": "2.0.0-beta.199",
     "@tiptap/extension-heading": "2.0.0-beta.199",
+    "@tiptap/extension-history": "^2.0.0-beta.202",
     "@tiptap/extension-horizontal-rule": "2.0.0-beta.199",
     "@tiptap/extension-image": "2.0.0-beta.199",
     "@tiptap/extension-italic": "2.0.0-beta.199",