feat: main Made editableValue respect new lines

Browse Source
This commit is contained in:
Nikolaj Frey 2023-07-02 01:05:55 +10:00
parent c6b02e4ea4
commit 4fb03692ce
3 changed files with 41 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
remix/app/Providers/ThingtimeProvider.tsx
View File

@ -19,18 +19,18 @@ try {
const forceable = { const forceable = {
Content: { Content: {
Content: { hidden1: "Edit this to your heart's desire.",
hidden1: "Edit this to your heart's desire.", 'How?': 'Just search for Content and edit the value to whatever you want.',
'How?': 'Example:': `Content = New Content!
'Just search for Content.Content and edit the value to whatever you want.' Content.Nested Content = New Nested Content!
} `
} }
} }
const initialThingtime = { const initialThingtime = {
nav: {}, nav: {},
version: 12 version: 22,
// ...forceable ...forceable
} }
const userData = { const userData = {

35
remix/app/components/Thingtime/Thingtime.tsx
View File

@ -50,6 +50,13 @@ export const Thingtime = props => {
return typeof thing return typeof thing
}, [thing]) }, [thing])
const valuePl = React.useMemo(() => {
if (typeof props?.valuePl === 'number') {
return props?.valuePl
}
return props?.path ? [4, 6] : [0, 0]
}, [props?.valuePl, props?.path])
const renderableValue = React.useMemo(() => { const renderableValue = React.useMemo(() => {
if (type === 'string') { if (type === 'string') {
if (!thing) { if (!thing) {
@ -141,7 +148,7 @@ export const Thingtime = props => {
// w={['200px', '500px']} // w={['200px', '500px']}
maxW='100%' maxW='100%'
py={props?.path ? 3 : 0} py={props?.path ? 3 : 0}
pl={props?.valuePl} pl={valuePl}
> >
{keysToUse?.length && {keysToUse?.length &&
keysToUse.map((key, idx) => { keysToUse.map((key, idx) => {
@ -178,6 +185,8 @@ export const Thingtime = props => {
py={2} py={2}
pl={pl} pl={pl}
fontSize={'20px'} fontSize={'20px'}
whiteSpace={'pre-line'}
// dangerouslySetInnerHTML={{ __html: renderableValue }}
> >
{renderableValue} {renderableValue}
</Box> </Box>
@ -193,20 +202,32 @@ export const Thingtime = props => {
const [showContextMenu, setShowContextMenu] = React.useState(false) const [showContextMenu, setShowContextMenu] = React.useState(false)
const humanPath = React.useMemo(() => {
if (typeof props?.path === 'string') {
return props?.path
}
return props?.path?.human || ''
}, [props?.path])
const path = React.useMemo(() => { const path = React.useMemo(() => {
if (props?.path?.human?.includes?.('hidden')) { if (humanPath?.includes?.('hidden')) {
return null return null
} }
if (props?.path?.human?.includes?.('unique')) { if (humanPath?.includes?.('unique')) {
// take only path from before the string unique // take only path from before the string unique
return props?.path?.human?.split?.('unique')?.[0] return humanPath.split?.('unique')?.[0]
} }
return ( return (
<Flex maxW='100%' pl={pl} wordBreak={'break-all'} fontSize='12px'> <Flex
{props?.path?.human} maxW='100%'
pl={props?.pathPl || pl}
wordBreak={'break-all'}
fontSize='12px'
>
{humanPath}
</Flex> </Flex>
) )
}, [props?.path]) }, [humanPath, pl, props?.pathPl])
const handleMouseEvent = React.useCallback( const handleMouseEvent = React.useCallback(
e => { e => {

7
remix/app/routes/index.tsx
View File

@ -16,7 +16,12 @@ export default function Index () {
justifyContent='center' justifyContent='center'
> >
<Splash></Splash> <Splash></Splash>
<Thingtime mb={200} thing={thingtime['Content']}></Thingtime> <Thingtime
mb={200}
path='Content'
valuePl={0}
thing={thingtime['Content']}
></Thingtime>
<ThingtimeDemo></ThingtimeDemo> <ThingtimeDemo></ThingtimeDemo>
<ProfileDrawer></ProfileDrawer> <ProfileDrawer></ProfileDrawer>
</Flex> </Flex>