[ENG-9609] P14.3 - Image sizing in wiki rules/format have changed (#772)

- Ticket: [ENG-9609]
- Feature flag: n/a

## Summary of Changes
1. Added support for image resizing in wiki.

Author: nsemets

jest.config.js

@@ -24,7 +24,9 @@ module.exports = {
       },
     ],
   },
-  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$|@ngxs|@angular|@ngrx|parse5|entities|chart.js)'],
+  transformIgnorePatterns: [
+    'node_modules/(?!.*\\.mjs$|@ngxs|@angular|@ngrx|parse5|entities|chart.js|@mdit|@citation-js|@traptitech|@sentry|@primeng|@newrelic)',
+  ],
   testEnvironment: 'jsdom',
   moduleFileExtensions: ['ts', 'js', 'html', 'json', 'mjs'],
   coverageDirectory: 'coverage',

package-lock.json

@@ -44,6 +44,7 @@
     "@citation-js/core": "^0.7.18",
     "@citation-js/plugin-csl": "^0.7.18",
     "@fortawesome/fontawesome-free": "^6.7.2",
+    "@mdit/plugin-img-size": "0.22.3",
     "@newrelic/browser-agent": "^1.301.0",
     "@ngx-translate/core": "^16.0.4",
     "@ngx-translate/http-loader": "^16.0.1",

package.json

@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, computed, inject, input, Signal } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 
+import { legacyImgSize } from '@mdit/plugin-img-size';
 import markdownItKatex from '@traptitech/markdown-it-katex';
 import MarkdownIt from 'markdown-it';
 import markdownItVideo from 'markdown-it-video';
@@ -37,6 +38,7 @@ export class MarkdownComponent {
       .use(markdownItKatex, {
         output: 'mathml',
         throwOnError: false,
-      });
+      })
+      .use(legacyImgSize);
   }
 }

src/app/shared/components/markdown/markdown.component.ts

@@ -97,7 +97,13 @@
         list-style-type: decimal;
       }
     }
+
+    img {
+      max-width: 100%;
+      height: auto;
+    }
   }
+
   .md-footer {
     display: none;
   }