From 753f06b3d63e7c693faab99b0bdcc5dfd1627913 Mon Sep 17 00:00:00 2001 From: Nikolaj Frey Date: Sun, 13 Aug 2023 16:14:40 +1000 Subject: [PATCH] feat: feature/mvp-sprint-1 Progress on fixing contenteditable input and string value rendering issue --- remix/app/Providers/ThingtimeProvider.tsx | 19 ++++-- remix/app/components/Commander/Commander.tsx | 2 - .../app/components/MagicInput/MagicInput.tsx | 14 ++++- remix/app/components/Thingtime/Thingtime.tsx | 59 +------------------ 4 files changed, 27 insertions(+), 67 deletions(-) diff --git a/remix/app/Providers/ThingtimeProvider.tsx b/remix/app/Providers/ThingtimeProvider.tsx index 9f4351e..d07c40e 100644 --- a/remix/app/Providers/ThingtimeProvider.tsx +++ b/remix/app/Providers/ThingtimeProvider.tsx @@ -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) diff --git a/remix/app/components/Commander/Commander.tsx b/remix/app/components/Commander/Commander.tsx index 0a55ae9..5e3b2e5 100644 --- a/remix/app/components/Commander/Commander.tsx +++ b/remix/app/components/Commander/Commander.tsx @@ -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) { diff --git a/remix/app/components/MagicInput/MagicInput.tsx b/remix/app/components/MagicInput/MagicInput.tsx index c392eb5..80b56f7 100644 --- a/remix/app/components/MagicInput/MagicInput.tsx +++ b/remix/app/components/MagicInput/MagicInput.tsx @@ -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 ( { 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 }) } }} - > + > + {props?.readonly ? props?.value : null} + { 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 } 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

- - // extract all series of new lines - const newlines = value?.split?.(/[^\n]/)?.filter((v) => v !== "") - - let newValue = value - - // replace all new lines groups with

- newlines?.forEach?.((newline) => { - const baseLength = "\n"?.length - - const newlineClone = newline - - const newlineClonePart1 = newlineClone?.replace( - "\n\n\n", - "

" - ) - const newlineClonePart2 = newlineClonePart1?.replace( - /\n\n/g, - "

" - ) - const newlineClonePart3 = newlineClonePart2?.replace(/\n/g, "
") - - 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) => { ) }, [ - contentEditableThing, renderableValue, pl, type,