fix: when inserting a new value by typing somewhere, it doesn't initially have the right color

Author: josdejong

src/lib/components/controls/EditableDiv.svelte

@@ -21,7 +21,8 @@
   export let onValueClass: (value: string) => string = () => ''
 
   let domValue: HTMLDivElement | undefined
-  let valueClass = onValueClass(value)
+  let valueClass: string
+  $: valueClass = onValueClass(value)
   let closed = false
 
   onMount(() => {
@@ -32,6 +33,11 @@
     setTimeout(() => {
       if (domValue) {
         setCursorToEnd(domValue)
+
+        // The refresh method can be used to update the classnames for example
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        domValue.refresh = handleValueInput
       }
     })
   })

src/lib/logic/actions.ts

@@ -25,11 +25,11 @@ import type {
   DocumentState,
   InsertType,
   JSONParser,
+  JSONSelection,
   OnChange,
   OnChangeText,
-  OnPatch,
   OnJSONSelect,
-  JSONSelection
+  OnPatch
 } from '$lib/types'
 import { createDebug } from '$lib/utils/debug.js'
 import {
@@ -562,8 +562,8 @@ export function onInsert({
 
     if (operation) {
       if (newValue === '') {
-        // open the newly inserted value in edit mode
-        tick2(() => insertActiveElementContents(refJsonEditor, '', true))
+        // open the newly inserted value in edit mode (can be cancelled via ESC this way)
+        tick2(() => insertActiveElementContents(refJsonEditor, '', true, refreshEditableDiv))
       }
     }
   } else {
@@ -620,7 +620,10 @@ export async function onInsertCharacter({
     const replaceContents = !selection.edit
 
     onSelect({ ...selection, edit: true })
-    tick2(() => insertActiveElementContents(refJsonEditor, char, replaceContents))
+    tick2(() =>
+      // We use this way via insertActiveElementContents, so we can cancel via ESC
+      insertActiveElementContents(refJsonEditor, char, replaceContents, refreshEditableDiv)
+    )
     return
   }
 
@@ -656,7 +659,10 @@ export async function onInsertCharacter({
         const replaceContents = !selection.edit
 
         onSelect({ ...selection, edit: true })
-        tick2(() => insertActiveElementContents(refJsonEditor, char, replaceContents))
+        tick2(() =>
+          // We use this way via insertActiveElementContents, so we can cancel via ESC
+          insertActiveElementContents(refJsonEditor, char, replaceContents, refreshEditableDiv)
+        )
       } else {
         // TODO: replace the object/array with editing a text in edit mode?
         //  (Ideally this this should not create an entry in history though,
@@ -721,7 +727,7 @@ async function onInsertValueWithCharacter({
   // multiple characters very quickly after each other due to the async handling)
   const replaceContents = !isEditingSelection(selection)
 
-  tick2(() => insertActiveElementContents(refJsonEditor, char, replaceContents))
+  tick2(() => insertActiveElementContents(refJsonEditor, char, replaceContents, refreshEditableDiv))
 }
 
 /**
@@ -732,3 +738,13 @@ async function onInsertValueWithCharacter({
 function tick2(callback: () => void) {
   setTimeout(() => setTimeout(callback))
 }
+
+function refreshEditableDiv(element: HTMLElement) {
+  // We force a refresh because when changing the text of the editable div programmatically,
+  // the DIV doesn't get a trigger to update it's class
+  // TODO: come up with a better solution
+
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  element?.refresh()
+}

src/lib/utils/domUtils.ts

@@ -229,7 +229,8 @@ export function setCursorToEnd(element: HTMLElement) {
 export function insertActiveElementContents(
   container: HTMLElement,
   text: string,
-  replaceContents: boolean
+  replaceContents: boolean,
+  onActiveElement?: (activeElement: HTMLElement) => void
 ) {
   const window = getWindow(container)
   if (!window) {
@@ -242,7 +243,11 @@ export function insertActiveElementContents(
 
   if (activeElement && activeElement.isContentEditable) {
     activeElement.textContent = replaceContents ? text : activeElement.textContent + text
+    console.log('UPDATED TEXT', replaceContents ? text : activeElement.textContent + text)
     setCursorToEnd(activeElement)
+    if (onActiveElement) {
+      onActiveElement(activeElement)
+    }
   }
 }