Image text align correction (#1)

* Change image alignment to be based on text-align
jpuri · Jul 22, 2019 · c74e7cb · c74e7cb
1 parent afe560a
commit c74e7cb
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 4 deletions.
diff --git a/js/__test__/blockTest.js b/js/__test__/blockTest.js
@@ -146,7 +146,7 @@ describe('addStylePropertyMarkup test suite', () => {
         FONTSIZE: 10,
         FONTFAMILY: 'Arial',
       },
-      'test'
+      'test',
     );
     assert.equal(
       markup,

diff --git a/js/block.js b/js/block.js
@@ -333,7 +333,11 @@ function getEntityMarkup(
     return `<a href="${entity.data.url}" target="${targetOption}">${text}</a>`;
   }
   if (entity.type === 'IMAGE') {
-    return `<img src="${entity.data.src}" alt="${entity.data.alt}" style="float:${entity.data.alignment || 'none'};height: ${entity.data.height};width: ${entity.data.width}"/>`;
+    let { alignment } = entity.data;
+    if (!alignment || alignment === 'none') {
+      alignment = 'center';
+    }
+    return `<div style="text-align:${alignment};"><img src="${entity.data.src}" alt="${entity.data.alt}" style="height: ${entity.data.height};width: ${entity.data.width}"/></div>`;
   }
   if (entity.type === 'EMBEDDED_LINK') {
     return `<iframe width="${entity.data.width}" height="${entity.data.height}" src="${entity.data.src}" frameBorder="0"></iframe>`;

diff --git a/lib/draftjs-to-html.js b/lib/draftjs-to-html.js
@@ -353,7 +353,12 @@ function getEntityMarkup(entityMap, entityKey, text, customEntityTransform) {
     return '<a href="' + entity.data.url + '" target="' + targetOption + '">' + text + '</a>';
   }
   if (entity.type === 'IMAGE') {
-    return '<img src="' + entity.data.src + '" alt="' + entity.data.alt + '" style="float:' + (entity.data.alignment || 'none') + ';height: ' + entity.data.height + ';width: ' + entity.data.width + '"/>';
+    var alignment = entity.data.alignment;
+
+    if (!alignment || alignment === 'none') {
+      alignment = 'center';
+    }
+    return '<div style="text-align:' + alignment + ';"><img src="' + entity.data.src + '" alt="' + entity.data.alt + '" style="height: ' + entity.data.height + ';width: ' + entity.data.width + '"/></div>';
   }
   if (entity.type === 'EMBEDDED_LINK') {
     return '<iframe width="' + entity.data.width + '" height="' + entity.data.height + '" src="' + entity.data.src + '" frameBorder="0"></iframe>';

diff --git a/yarn.lock b/yarn.lock
@@ -4800,9 +4800,10 @@ sinon@^4.1.4:
     supports-color "^4.4.0"
     type-detect "^4.0.5"
 
-size-limit@0.14.1:
+size-limit@^0.14.1:
   version "0.14.1"
   resolved "https://registry.yarnpkg.com/size-limit/-/size-limit-0.14.1.tgz#579b4657f394437ab6addd2b9da1afe566bcd7bf"
+  integrity sha512-wQ2IHg4qOupmzuabHOFHiXUHoFZfz2//PDADUNlvOl9QOzZpxyBcxwQIUToQNxHxcF2tv267drXL+K6WBqhutA==
   dependencies:
     bytes "^3.0.0"
     chalk "^2.3.0"