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

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)

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) {

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 (
     <Box
       position="relative"
@@ -121,8 +127,8 @@ export const MagicInput = (props) => {
         width="100%"
         border="none"
         outline="none"
-        contentEditable={true}
+        contentEditable={!props?.readonly ? true : false}
-        dangerouslySetInnerHTML={{ __html: contentEditableValue }}
+        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}

remix/app/components/Thingtime/Thingtime.tsx

@@ -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()
+      return <MagicInput value={thing} readonly></MagicInput>
-
-      if (!trimmed) {
-        return ""
-      }
-      return trimmed
     } 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,