Notification improvements (#324)
This commit is contained in:
Andrew Prifer
GitHub
parent
965d7085dc
commit
43714fdf17
6 changed files with 49 additions and 47 deletions
|
|
@ -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,7 +103,8 @@ 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 =
|
||||
|
||||
const EditableCamera =
|
||||
editable(${dreiComponent}, '${Component}')
|
||||
\`\`\`
|
||||
Then you can use it in your JSX like any other editable component. Note the makeDefault prop exposed by drei, which makes r3f use it for rendering.
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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.`,
|
||||
)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
overflow: auto;
|
||||
font-family: monospace;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
padding: 4px;
|
||||
p {
|
||||
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 && (
|
||||
|
|
|
|||
26
yarn.lock
26
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
|
||||
|
|
|
|||
Loading…
Reference in a new issue