feat: feature/mvp-sprint-1 Progress on fixing contenteditable input and string value rendering issue

Browse Source
This commit is contained in:
Nikolaj Frey 2023-08-13 16:14:40 +10:00
parent 6663e12ebb
commit 753f06b3d6
4 changed files with 27 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -167,7 +167,7 @@ export const ThingtimeProvider = (props: any): JSX.Element => {
newThingtime.tt = newThingtime
console.log(
"nik setting newThingtime value at path",
"ThingtimeProvider setting newThingtime value at path",
'"' + path + '"',
"value: ",
value
@ -191,7 +191,7 @@ export const ThingtimeProvider = (props: any): JSX.Element => {
// do we need to sanitise?
// const path = sanitise(rawPath)
console.log("Getting thingtime at path", path)
console.log("ThingtimeProvider getting thingtime at path", path)
// console.trace("Getting thingtime at path", path)
return smarts.getsmart(thingtime, path)
},
@ -235,7 +235,10 @@ export const ThingtimeProvider = (props: any): JSX.Element => {
if (thingtimeFromLocalStorage) {
const parsed = parse(thingtimeFromLocalStorage)
console.log("thingtime restored from localstorage", parsed)
console.log(
"ThingtimeProvider thingtime restored from localstorage",
parsed
)
if (parsed) {
const localIsValid =
!parsed.version || parsed.version >= force.version
@ -246,7 +249,10 @@ export const ThingtimeProvider = (props: any): JSX.Element => {
const withVersionUpdates = smarts.merge(newVersionData, parsed)
newThingtime = smarts.merge(force, withVersionUpdates)
}
console.log("restoring thingtime from localStorage", newThingtime)
console.log(
"ThingtimeProvider restoring thingtime from localStorage",
newThingtime
)
set(newThingtime)
}
} else {
@ -281,7 +287,10 @@ export const ThingtimeProvider = (props: any): JSX.Element => {
}
} else {
try {
console.log("Setting thingtime to localStorage", thingtime)
console.log(
"ThingtimeProvider setting thingtime to localStorage",
thingtime
)
// setTimeout(() => {
const stringified = stringify(thingtime)
window.localStorage.setItem("thingtime", stringified)

2
remix/app/components/Commander/Commander.tsx
View File

@ -294,8 +294,6 @@ export const Commander = (props) => {
if (curSuggestionIdx !== null) {
selectSuggestion(curSuggestionIdx)
}
console.log("nik commanderActive", commanderActive)
console.log("nik commandIsAction", commandIsAction)
if (commanderActive) {
try {
if (commandIsAction) {

14
remix/app/components/MagicInput/MagicInput.tsx
View File

@ -109,6 +109,12 @@ export const MagicInput = (props) => {
[props?.onFocus]
)
const dangerouslySetInnerHTML = React.useMemo(() => {
if (!props?.readonly) {
return { __html: contentEditableValue }
}
// return { __html: contentEditableValue }
}, [contentEditableValue, props?.readonly])
return (
<Box
position="relative"
@ -121,8 +127,8 @@ export const MagicInput = (props) => {
width="100%"
border="none"
outline="none"
contentEditable={true}
dangerouslySetInnerHTML={{ __html: contentEditableValue }}
contentEditable={!props?.readonly ? true : false}
dangerouslySetInnerHTML={dangerouslySetInnerHTML}
onFocus={onFocus}
onInput={(value) => {
const innerText = value?.target?.innerText
@ -134,7 +140,9 @@ export const MagicInput = (props) => {
updateValue({ value: innerText })
}
}}
></Box>
>
{props?.readonly ? props?.value : null}
</Box>
<Box
position="absolute"
top={0}

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

@ -36,7 +36,6 @@ export const Thingtime = (props) => {
const [circular, setCircular] = React.useState(props?.circular)
const contentEditableRef = React.useRef(null)
const editValueRef = React.useRef({})
const depth = React.useMemo(() => {
@ -196,12 +195,7 @@ export const Thingtime = (props) => {
const renderableValue = React.useMemo(() => {
if (type === "string") {
const trimmed = thing.trim()
if (!trimmed) {
return ""
}
return trimmed
return <MagicInput value={thing} readonly></MagicInput>
} else if (type === "number") {
return thing
} else if (type === "boolean") {
@ -328,6 +322,7 @@ export const Thingtime = (props) => {
)
}
}, [
AtomicWrapper,
keysToUse,
circular,
seen,
@ -342,59 +337,10 @@ export const Thingtime = (props) => {
keys,
])
const [contentEditableThing, setContentEditableThing] = React.useState(thing)
const updateContentEditableThing = React.useCallback((value) => {
// replace all new line occurences in value with <div><br></div>
// extract all series of new lines
const newlines = value?.split?.(/[^\n]/)?.filter((v) => v !== "")
let newValue = value
// replace all new lines groups with <div><br></div>
newlines?.forEach?.((newline) => {
const baseLength = "\n"?.length
const newlineClone = newline
const newlineClonePart1 = newlineClone?.replace(
"\n\n\n",
"<div><br /></div>"
)
const newlineClonePart2 = newlineClonePart1?.replace(
/\n\n/g,
"<div><br /></div>"
)
const newlineClonePart3 = newlineClonePart2?.replace(/\n/g, "<br />")
newValue = newValue?.replace(newline, newlineClonePart3)
})
setContentEditableThing(newValue)
}, [])
React.useEffect(() => {
const entries = Object.entries(editValueRef.current)
const propsThingInEntries = entries?.find?.(
(entry) => entry[1] === props?.thing
)
if (!propsThingInEntries) {
updateContentEditableThing(props?.thing)
// setContentEditableThing(props?.thing)
} else {
const [time, value] = propsThingInEntries
if (time && value) {
delete editValueRef.current[time]
}
}
}, [props?.thing, updateContentEditableThing])
const updateValue = React.useCallback(
(args) => {
const { value } = args
console.log("nik running updateValue", value)
setThingtime(fullPath, value)
},
[fullPath, setThingtime]
@ -505,7 +451,6 @@ export const Thingtime = (props) => {
</AtomicWrapper>
)
}, [
contentEditableThing,
renderableValue,
pl,
type,