fix: word wrap (#73)

.babelrc

@@ -1,16 +1,12 @@
 {
-  "presets": [
-    "@babel/preset-env",
-    "@babel/preset-typescript",
-    "@babel/preset-react",
-    "@emotion/babel-preset-css-prop"
-  ],
+  "presets": ["@babel/preset-env", "@babel/preset-typescript", "@babel/preset-react", "@emotion/babel-preset-css-prop"],
   "plugins": [
     [
       "@babel/plugin-transform-runtime",
       {
         "corejs": 3
-      }
+      },
+      "@babel/plugin-proposal-class-properties"
     ]
   ]
 }

package.json

@@ -47,6 +47,7 @@
   "devDependencies": {
     "@babel/cli": "^7.15.4",
     "@babel/core": "^7.15.5",
+    "@babel/plugin-proposal-class-properties": "^7.16.0",
     "@babel/plugin-transform-runtime": "^7.15.0",
     "@babel/preset-env": "^7.15.6",
     "@babel/preset-react": "^7.14.5",

src/DefaultTemplate.stories.mdx

@@ -19,6 +19,8 @@ import { DefaultTemplate } from "./DefaultTemplate";
       document={{
         foo: {
           title: "Bar is awesome",
+          someVeryLongData:
+            "JVBERi0xLjUNCiW1tbW1DQoxIDAgb2JqDQo8PC9UeXBlL0NhdGFsb2cvUGFnZXMgMiAwIFIvTGFuZyhlbi1JTikgPj4NCmVuZG9iag0KMiAwIG9iag0KPDwvVHlwZS9QYWdlcy9Db3VudCAxNS9LaWRzWyAzIDAgUiAyMTkgMCBSIDM5MSAwIFIgNTIwIDAgUiA2MTAgMCBSIDY1OCAwIFIgNzU2IDAgUiA5MDYgMCBSIDEwMjIgMCBSIDExNjYgMCBSIDExNzYgMCBSIDEyODAgMCBSIDE0MTAgMCBSIDE1MjAgMCBSIDE3MzEgMCBSXSA",
         },
         name: "John Doe",
         institute: "Institute of John Doe",

src/DefaultTemplate.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import { TemplateProps, TemplateWithComponent } from "./types";
 
+const paddingBox = `.75rem 1.25rem`;
+
 export const DefaultTemplate: React.FunctionComponent<TemplateProps> = (props) => {
   return (
     <div id="default-template">
@@ -20,7 +22,7 @@ export const DefaultTemplate: React.FunctionComponent<TemplateProps> = (props) =
           color: "#856404",
           backgroundColor: "#fff3cd",
           border: "1px solid #ffeeba",
-          padding: ".75rem 1.25rem",
+          padding: paddingBox,
         }}
       >
         You see this template because the certificate issuer misconfigured the template configuration of your document.
@@ -30,7 +32,16 @@ export const DefaultTemplate: React.FunctionComponent<TemplateProps> = (props) =
         </a>
         .
       </div>
-      <pre style={{ backgroundColor: "lightgray" }}>{JSON.stringify(props.document, null, 2)}</pre>
+      <pre
+        style={{
+          backgroundColor: "lightgray",
+          padding: paddingBox,
+          whiteSpace: "pre-wrap",
+          wordWrap: "break-word",
+        }}
+      >
+        {JSON.stringify(props.document, null, 2)}
+      </pre>
     </div>
   );
 };