Notification improvements (#324)

packages/r3f/src/main/editable.tsx

@@ -36,7 +36,7 @@ const createEditable = <Keys extends keyof JSX.IntrinsicElements>(
 
     if (Component !== 'primitive' && !type) {
       throw new Error(
-        `You must provide the type of the component out of which you're creating an editable. For example: editable(MyComponent, 'mesh').`,
+        `You must provide the type of the component you're creating an editable for. For example: editable(MyComponent, 'mesh').`,
       )
     }
 
@@ -103,6 +103,7 @@ const createEditable = <Keys extends keyof JSX.IntrinsicElements>(
 The easiest way to create a custom animatable \`${dreiComponent}\` is to import it from \`@react-three/drei\`, and make it editable.
 \`\`\`
 import {${dreiComponent}} from '@react-three/drei'
+
 const EditableCamera =
   editable(${dreiComponent}, '${Component}')
 \`\`\`

theatre/core/src/sequences/TheatreSequence.ts

@@ -247,12 +247,12 @@ export default class TheatreSequence implements ISequence {
             "However, when using `@theatre/studio`, it takes a few milliseconds for it to load your project's state, " +
             `before which your sequences cannot start playing.\n` +
             `\n` +
-            'To fix this, simply defer calling `sequence.play()` until after the project is loaded, like this:\n' +
+            'To fix this, simply defer calling `sequence.play()` until after the project is loaded, like this:\n\n' +
             '```\n' +
             `project.ready.then(() => {\n` +
             `  sequence.play()\n` +
             `})\n` +
-            '```\n',
+            '```',
           [
             {
               url: 'https://www.theatrejs.com/docs/0.5/api/core#project.ready',

theatre/package.json

@@ -35,6 +35,7 @@
     "@types/jest": "^26.0.23",
     "@types/lodash": "^4.14.170",
     "@types/lodash-es": "^4.17.4",
+    "@types/marked": "^4.0.7",
     "@types/node": "^15.12.3",
     "@types/react": "^17.0.9",
     "@types/react-dom": "^17.0.6",
@@ -62,6 +63,7 @@
     "json-touch-patch": "^0.11.2",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
+    "marked": "^4.1.1",
     "nanoid": "^3.3.1",
     "npm-run-all": "^4.1.5",
     "null-loader": "^4.0.1",
@@ -86,7 +88,6 @@
     "rollup": "^2.56.3",
     "rollup-plugin-dts": "^4.0.0",
     "shallowequal": "^1.1.0",
-    "snarkdown": "^2.0.0",
     "styled-components": "^5.3.5",
     "svg-inline-loader": "^0.8.2",
     "timing-function": "^0.2.3",

theatre/shared/src/notify.ts

@@ -78,6 +78,13 @@ export const notify: Notifiers = {
 window?.addEventListener('error', (e) => {
   notify.error(
     `An error occurred`,
-    `${e.message}\n\nSee **console** for details.`,
+    `<pre>${e.message}</pre>\n\nSee **console** for details.`,
+  )
+})
+
+window?.addEventListener('unhandledrejection', (e) => {
+  notify.error(
+    `An error occurred`,
+    `<pre>${e.reason}</pre>\n\nSee **console** for details.`,
   )
 })

theatre/studio/src/notify.tsx

@@ -1,7 +1,6 @@
 import React, {Fragment} from 'react'
 import toast, {useToaster} from 'react-hot-toast/headless'
 import styled from 'styled-components'
-import snarkdown from 'snarkdown'
 import {pointerEventsAutoInNormalMode} from './css'
 import type {
   Notification,
@@ -11,6 +10,7 @@ import type {
 } from '@theatre/shared/notify'
 import {useVal} from '@theatre/react'
 import getStudio from './getStudio'
+import {marked} from 'marked'
 
 /**
  * Creates a string key unique to a notification with a certain title and message.
@@ -120,11 +120,6 @@ const NotificationMessage = styled.div`
     color: rgba(255, 255, 255, 0.9);
   }
 
-  hr {
-    visibility: hidden;
-    height: 8px;
-  }
-
   em {
     font-style: italic;
   }
@@ -134,18 +129,11 @@ const NotificationMessage = styled.div`
     color: #d5d5d5;
   }
 
-  .code {
+  p {
-    overflow: auto;
-    font-family: monospace;
-    background: rgba(0, 0, 0, 0.3);
-    padding: 4px;
     margin-bottom: 8px;
-    margin-top: 8px;
-    border-radius: 4px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
   }
 
-  :not(.code) > code {
+  code {
     font-family: monospace;
     background: rgba(0, 0, 0, 0.3);
     padding: 1px 1px 2px;
@@ -153,6 +141,18 @@ const NotificationMessage = styled.div`
     border: 1px solid rgba(255, 255, 255, 0.08);
     white-space: pre-wrap;
   }
+
+  pre > code {
+    white-space: pre;
+    display: block;
+    overflow: auto;
+    padding: 4px;
+  }
+
+  pre {
+    white-space: pre-wrap;
+    margin-bottom: 8px;
+  }
 `
 
 const DismissButton = styled.button`
@@ -195,23 +195,6 @@ const IndicatorDot = styled.div<{type: NotificationType}>`
 `
 //endregion
 
-/**
- * Replaces <br /> tags with <hr /> tags. We do this because snarkdown outputs <br />
- * between paragraphs, which are not styleable.
- *
- * A better solution would be to use a markdown parser that outputs <p> tags instead of <br />.
- */
-const replaceBrWithHr = (text: string) => {
-  return text.replace(/<br \/>/g, '<hr />')
-}
-
-/**
- * Transforms the provided notification message into HTML.
- */
-const massageMessage = (message: string) => {
-  return replaceBrWithHr(snarkdown(message))
-}
-
 /**
  * Creates handlers for different types of notifications.
  */
@@ -236,7 +219,7 @@ const createHandler =
               <NotificationTitle>{title}</NotificationTitle>
               <NotificationMessage
                 dangerouslySetInnerHTML={{
-                  __html: massageMessage(message),
+                  __html: marked.parse(message),
                 }}
               />
               {docs.length > 0 && (

yarn.lock

@@ -8002,6 +8002,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/marked@npm:^4.0.7":
+  version: 4.0.7
+  resolution: "@types/marked@npm:4.0.7"
+  checksum: 4907b6a606578cd864bad429aca3c234591e6ed56bd141c575140487269b825a480ace9a85e4d003d1de1f007004c9d9b2fe600038ded5bba75aef59118e58d5
+  languageName: node
+  linkType: hard
+
 "@types/mime@npm:^1":
   version: 1.3.2
   resolution: "@types/mime@npm:1.3.2"
@@ -21367,6 +21374,15 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"marked@npm:^4.1.1":
+  version: 4.1.1
+  resolution: "marked@npm:4.1.1"
+  bin:
+    marked: bin/marked.js
+  checksum: 717e3357952ee53de831bf0eb110ed075bebca2376c58bcdf7ee523ef540d45308ad6d51b2c933da0968832ea4386f31c142ca65443e77c098e84f6cce73e418
+  languageName: node
+  linkType: hard
+
 "matched@npm:^5.0.0":
   version: 5.0.1
   resolution: "matched@npm:5.0.1"
@@ -28232,13 +28248,6 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"snarkdown@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "snarkdown@npm:2.0.0"
-  checksum: e92bb254aad8c50da610e2f5f770360542b8412cb1dd6512aaf1f213322f474acd71c882d557cfadb54c34dd1041ee8677bc44061568d60df7cee54134e047e5
-  languageName: node
-  linkType: hard
-
 "sockjs-client@npm:^1.5.0":
   version: 1.5.1
   resolution: "sockjs-client@npm:1.5.1"
@@ -29673,6 +29682,7 @@ fsevents@^1.2.7:
     "@types/jest": ^26.0.23
     "@types/lodash": ^4.14.170
     "@types/lodash-es": ^4.17.4
+    "@types/marked": ^4.0.7
     "@types/node": ^15.12.3
     "@types/react": ^17.0.9
     "@types/react-dom": ^17.0.6
@@ -29702,6 +29712,7 @@ fsevents@^1.2.7:
     json-touch-patch: ^0.11.2
     lodash: ^4.17.21
     lodash-es: ^4.17.21
+    marked: ^4.1.1
     nanoid: ^3.3.1
     npm-run-all: ^4.1.5
     null-loader: ^4.0.1
@@ -29726,7 +29737,6 @@ fsevents@^1.2.7:
     rollup: ^2.56.3
     rollup-plugin-dts: ^4.0.0
     shallowequal: ^1.1.0
-    snarkdown: ^2.0.0
     styled-components: ^5.3.5
     svg-inline-loader: ^0.8.2
     timing-function: ^0.2.3