diff --git a/src/features/encoders/mozJPEG/client/index.tsx b/src/features/encoders/mozJPEG/client/index.tsx index 76abc56e0..216f45e78 100644 --- a/src/features/encoders/mozJPEG/client/index.tsx +++ b/src/features/encoders/mozJPEG/client/index.tsx @@ -15,7 +15,8 @@ import Select from 'client/lazy-app/Compress/Options/Select'; import Revealer from 'client/lazy-app/Compress/Options/Revealer'; import { ModalMessage } from 'client/lazy-app/Compress/Modal'; import ModalContext from 'client/lazy-app/Compress/Modal/modal-context'; -import { render as renderToString } from 'preact-render-to-string'; +import { shallowRender as renderToString } from 'preact-render-to-string'; +import * as SampleImage from 'img-url:static-build/assets/link.jpg'; export function encode( signal: AbortSignal, @@ -36,7 +37,43 @@ interface State { } function sampleDescription(): string { - return renderToString(

This is a para

); + return renderToString( + +

Test Suite (h1)

+

This is a paragraph.

+

+ This is another paragraph. Notice how another uses + italics. Oh wait, I just used the <b> tag. Oh, and escaped HTML + unicode thingies. Now I'm just rambling so that this is long enough to + be multi-line, and you can see the line-height. +

+
+
+        # Which is the best programming language?
+        
+ print("Python is!") +
+ Oh and this is all in <pre> +
+

+ This text is strong. And this is in + <code>. +

+
+ Alt Text +
+ Source: Nintendo EDP / Nintendo (and this is a figcaption) +
+
+

+ That's a link.{' '} + + This is also a link + + . +

+
, + ); } export class Options extends Component { @@ -118,17 +155,7 @@ export class Options extends Component { // I'm rendering both lossy and lossless forms, as it becomes much easier when // gathering the data. return ( -
- this._showModal({ - type: 'info', - title: 'MozJPEG - quality', - content: sampleDescription(), - }) - } - > +
{ Quality:
+ + +