feat: feature/mvp-sprint-1 Modified suggestions logic and added a suggestions setting to hide suggestions or show when commander not active

remix/app/Providers/ThingtimeProvider.tsx

@@ -24,8 +24,9 @@ try {
 const force = {
   settings: {
     // commanderActive: false,
+    // hideSuggestionsOnToggle: true,
   },
-  version: 22,
+  version: 23,
 }
 
 const newVersionData = {
@@ -43,6 +44,7 @@ const initialValues = {
     commanderActive: false,
     clearCommanderOnToggle: true,
     clearCommanderContextOnToggle: true,
+    hideSuggestionsOnToggle: true,
   },
   Content: {
     hidden1: "Edit this to your heart's desire.",

remix/app/components/Commander/Commander.tsx

@@ -148,10 +148,6 @@ export const Commander = (props) => {
     return commandPath && commandValue
   }, [commandPath, commandValue])
 
-  const showSuggestions = React.useMemo(() => {
-    return inputValue?.length
-  }, [inputValue])
-
   const suggestions = React.useMemo(() => {
     try {
       const fuse = new Fuse(paths)
@@ -168,6 +164,20 @@ export const Commander = (props) => {
     }
   }, [inputValue, paths])
 
+  const showSuggestions = React.useMemo(() => {
+    return (
+      inputValue?.length &&
+      suggestions?.length &&
+      commanderActive &&
+      thingtime?.settings?.hideSuggestionsOnToggle
+    )
+  }, [
+    inputValue,
+    suggestions,
+    commanderActive,
+    thingtime?.settings?.hideSuggestionsOnToggle,
+  ])
+
   const selectSuggestion = React.useCallback(
     (suggestionIdx) => {
       const suggestion = suggestions?.[suggestionIdx]
@@ -445,7 +455,11 @@ export const Commander = (props) => {
                 pointerEvents="all"
                 paddingY={3}
               >
-                <Thingtime path={contextPath} thing={contextValue}></Thingtime>
+                <Thingtime
+                  width="600px"
+                  path={contextPath}
+                  thing={contextValue}
+                ></Thingtime>
               </Flex>
             )}
           </Flex>

remix/app/components/Thingtime/Thingtime.tsx

@@ -293,7 +293,9 @@ export const Thingtime = (props) => {
         paddingLeft={props?.pl || props?.paddingLeft}
         fontSize="20px"
         border="none"
-        whiteSpace="pre-line"
+        // whiteSpace="pre-line"
+        whiteSpace="pre-wrap"
+        wordBreak={props?.wordBreak || "break-word"}
         outline="none"
         paddingY={2}
         // dangerouslySetInnerHTML={{ __html: renderableValue }}

remix/tsconfig.json

@@ -2,6 +2,7 @@
   "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
   "compilerOptions": {
     "noImplicitAny": false,
+    "strictNullChecks": false,
     "lib": ["DOM", "DOM.Iterable", "ES2019"],
     "isolatedModules": true,
     "esModuleInterop": true,