fix: WEB-207 SVG images now have the proper src, width and alignment (#431)

* fix: WEB-207 SVG images now have the proper src, width and alignment

* fix: WEB-207 now with associated Unit Test

* build: add prettier conf in eslint

- added redundant prettier controls in eslintrc to ensure alignment
between workstations and developers
- .prettierrc is kept for backwards compatibility

Co-authored-by: Jose Gascon <[email protected]>
Co-authored-by: PiiXiieeS <[email protected]>

Author: Zougouda

.eslintrc.js

@@ -22,5 +22,13 @@ module.exports = {
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/explicit-module-boundary-types': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
+    'prettier/prettier': [
+      'error',
+      {
+        'singleQuote': true,
+        'semi': true,
+        'trailingComma': 'all'
+      },
+    ],
   },
 };

.prettierrc

@@ -1,4 +1,5 @@
 {
   "singleQuote": true,
+  "semi": true,
   "trailingComma": "all"
 }

package.json

@@ -18,7 +18,8 @@
     "start:dev": "run-p start:dev:nest start:dev:scss",
     "start:debug": "nest start --debug --watch",
     "start:prod": "node dist/src/main",
-    "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix --max-warnings 3",
+    "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --max-warnings 3",
+    "lint:fix": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix --max-warnings 3",
     "test": "npm run test:unit:cov && npm run test:e2e",
     "test:unit:watch": "jest --config jest-unit.config.js --watch",
     "test:unit:cov": "jest --config jest-unit.config.js --coverage",

src/proxy-page/proxy-page.service.ts

@@ -38,6 +38,7 @@ import addSlidesCSS from './steps/addSlidesCSS';
 import addSlidesJS from './steps/addSlidesJS';
 import addUnsupportedMacroIndicator from './steps/addUnsupportedMacroIndicator';
 import getFirstExcerpt from 'src/proxy-api/steps/getFirstExcerpt';
+import fixSVG from './steps/fixSVG';
 import fixTableBackground from './steps/fixTableBackground';
 
 @Injectable()
@@ -108,6 +109,7 @@ export class ProxyPageService {
     } else if (type !== 'notitle') {
       addHeaderTitle()(this.context);
     }
+    fixSVG(this.config)(this.context);
     fixTableBackground()(this.context);
     delUnnecessaryCode()(this.context);
     addCustomCss(this.config, style)(this.context);
@@ -165,6 +167,7 @@ export class ProxyPageService {
     fixRoadmap(this.config)(this.context);
     fixImageSize()(this.context);
     fixFrameAllowFullscreen()(this.context);
+    fixSVG(this.config)(this.context);
     fixTableBackground()(this.context);
     delUnnecessaryCode()(this.context);
     await addJiraPromise;

src/proxy-page/steps/fixSVG.ts

@@ -0,0 +1,61 @@
+import { ContextService } from '../../context/context.service';
+import { Step } from '../proxy-page.step';
+import * as cheerio from 'cheerio';
+import { ConfigService } from '@nestjs/config';
+import { parseString } from 'xml2js';
+
+/**
+ * ### Proxy page step to fix svg
+ *
+ * This module gets Cheerio to search all images ('img')
+ * and set the source according to attribute 'data-encoded-xml'
+ *
+ * @param  {ConfigService} config
+ * @returns void
+ */
+export default (config: ConfigService): Step => {
+  return (context: ContextService): void => {
+    context.setPerfMark('fixSVG');
+    const $ = context.getCheerioBody();
+    const webBasePath = config.get('web.absoluteBasePath');
+
+    $('img').each((_index: number, elementImg: cheerio.Element) => {
+      const imgDataEncodedXml = $(elementImg).attr('data-encoded-xml');
+      if (imgDataEncodedXml) {
+        const decodedXML = (
+          decodeURIComponent(imgDataEncodedXml) ?? ''
+        ).replace(/\+/g, ' ');
+        parseString(decodedXML, (err, xmlData) => {
+          if (err) return;
+
+          /* get the actual SVG attributes */
+          const { 'ac:width': width, 'ac:align': align } =
+            xmlData['ac:image']['$'];
+          const { 'ri:filename': filename } =
+            xmlData['ac:image']['ri:attachment'].shift()['$'];
+
+          /* set the new imageSrc and width attributes */
+          $(elementImg).attr(
+            'src',
+            `${webBasePath}/wiki/download/attachments/${context.getPageId()}/${filename}`,
+          );
+          $(elementImg).attr('width', width);
+          const alignmentClass = {
+            center: 'image-center',
+            left: 'image-left',
+            right: 'image-right',
+          };
+          if (align) {
+            $(elementImg).addClass(alignmentClass[align]);
+          }
+
+          /* clean off attributes we don't need anymore */
+          $(elementImg).removeAttr('data-encoded-xml');
+          $(elementImg).removeClass('transform-error');
+        });
+      }
+    });
+
+    context.getPerfMeasure('fixSVG');
+  };
+};

tests/unit/steps/fixSVG.spec.ts

@@ -0,0 +1,34 @@
+import { ConfigService } from '@nestjs/config';
+import { ContextService } from '../../../src/context/context.service';
+import fixSVG from '../../../src/proxy-page/steps/fixSVG';
+import { createModuleRefForStep } from './utils';
+
+describe('ConfluenceProxy / fixLinks', () => {
+  let context: ContextService;
+  let config: ConfigService;
+  let webBasePath;
+
+  beforeEach(async () => {
+    const moduleRef = await createModuleRefForStep();
+    context = moduleRef.get<ContextService>(ContextService);
+    config = moduleRef.get<ConfigService>(ConfigService);
+    webBasePath = config.get('web.absoluteBasePath');
+
+    context.initPageContext('XXX', '123456', 'dark');
+  });
+
+  it('should replace the img src, width and class', () => {
+    const step = fixSVG(config);
+    const example =
+      '<html><head></head><body>' +
+      '<img data-encoded-xml="%3Cac%3Aimage+ac%3Aalign%3D%22center%22+ac%3Alayout%3D%22center%22+ac%3Aoriginal-height%3D%22512%22+ac%3Aoriginal-width%3D%22512%22+ac%3Awidth%3D%22340%22%3E%3Cri%3Aattachment+ri%3Afilename%3D%22cloud-outline.svg%22+ri%3Aversion-at-save%3D%221%22+%2F%3E%3C%2Fac%3Aimage%3E">' +
+      '</body></html>';
+    context.setHtmlBody(example);
+    step(context);
+    const expected =
+      '<html><head></head><body><div id="Content">' +
+      `<img src="${webBasePath}/wiki/download/attachments/123456/cloud-outline.svg" width="340" class="image-center">` +   
+      '</div></body></html>';
+    expect(context.getHtmlBody()).toEqual(expected);
+  })
+});