fix(plugins/plugin-client-common): Markdown image does not properly handle align attribute

Fixes #6551

Author: starpit

plugins/plugin-client-common/src/components/Content/Markdown.tsx

@@ -78,11 +78,13 @@ export default class Markdown extends React.PureComponent<Props> {
     }
   }
 
-  private handleImage(src: string, width?: number) {
+  private handleImage(src: string, props: { width?: number; align?: React.CSSProperties['float'] }) {
     const isLocal = !/^http/i.test(src)
     if (isLocal && this.props.fullpath) {
+      const style = props ? { float: props.align } : undefined
       const absoluteSrc = isAbsolute(src) ? src : join(dirname(this.props.fullpath), src)
-      return <img src={absoluteSrc} width={width} />
+
+      return <img src={absoluteSrc} width={props.width} style={style} data-float={props.align} />
     }
   }
 
@@ -100,8 +102,14 @@ export default class Markdown extends React.PureComponent<Props> {
             if (/<img/.test(props.value)) {
               const srcMatch = props.value.match(/src="?([^"\s]+)"?/)
               const widthMatch = props.value.match(/width="?(\d+)"?/)
+              const alignMatch = props.value.match(/align="?([^"\s]+)"?/)
               if (srcMatch) {
-                return this.handleImage(srcMatch[1], widthMatch[1]) || <span />
+                return (
+                  this.handleImage(srcMatch[1], {
+                    width: widthMatch && widthMatch[1],
+                    align: alignMatch && alignMatch[1]
+                  }) || <span />
+                )
               }
             }
 
@@ -174,7 +182,7 @@ export default class Markdown extends React.PureComponent<Props> {
             )
           },
           image: props => {
-            return this.handleImage(props.src, props.width) || <img {...props} />
+            return this.handleImage(props.src, props) || <img {...props} />
           },
           list: props => {
             return React.createElement(

plugins/plugin-client-common/web/css/static/ui.css

@@ -772,23 +772,12 @@ $kui--page-content-paragraph-padding: 0.375em;
 }
 .page-content h2,
 .page-h2 {
-  font-size: 2em;
-  font-weight: 300;
-  margin: 1em 0;
-  position: relative;
+  font-size: 1.875em;
+  font-weight: 500;
+  margin: 0.875em 0 0.5em;
   line-height: 1.25;
-}
-.page-content h2::before,
-.page-h2::before {
-  background-color: var(--color-content-divider);
-  content: "";
-  display: block;
-  height: 1px;
-  left: 0;
-  position: absolute;
-  bottom: -5px;
-  width: 100%;
-  z-index: 100;
+  border-bottom: 1px solid var(--color-content-divider);
+  padding-bottom: 5px;
 }
 .page-content > h3:first-child,
 .page-content > h2:first-child,
@@ -821,6 +810,18 @@ $kui--page-content-paragraph-padding: 0.375em;
   font-size: 1.25em;
   line-height: 2em;
 }
+.page-content img {
+  &[data-float] {
+    background-color: var(--color-sidecar-background-01);
+    padding-bottom: 0.5em;
+  }
+  &[data-float="left"] {
+    padding-right: 1em;
+  }
+  &[data-float="right"] {
+    padding-left: 1em;
+  }
+}
 .page-content ol,
 .page-content ul {
   font-size: inherit;