Add suffixInjector hook

src/app/hooks/renderHtml.ts

@@ -2,6 +2,7 @@ import { Hook, ModelPath, Path, StringHookParams, ValidationOption, EnumOption,
 import { locale, segmentedLocale } from '../Locales'
 import { Mounter } from '../Mounter'
 import { hexId, htmlEncode } from '../Utils'
+import { suffixInjector } from './suffixInjector'
 
 /**
  * Secondary model used to remember the keys of a map
@@ -69,7 +70,6 @@ export const renderHtml: Hook<[any, Mounter], [string, string, string]> = {
       path.model.set(path, [...value, children.default()])
     })
     const suffix = `<button class="add" data-id="${onAdd}"></button>`
-      + mounter.nodeInjector(path, mounter)
 
     let body = ''
     if (Array.isArray(value)) {
@@ -106,9 +106,7 @@ export const renderHtml: Hook<[any, Mounter], [string, string, string]> = {
       path.model.set(path.push(key), children.default())
     })
     const keyRendered = keys.hook(this, keyPath, keyPath.get() ?? '', mounter)
-    const suffix = keyRendered[1]
-      + `<button class="add" data-id="${onAdd}"></button>`
-      + mounter.nodeInjector(path, mounter)
+    const suffix = keyRendered[1] + `<button class="add" data-id="${onAdd}"></button>`
     let body = ''
     if (typeof value === 'object' && value !== undefined) {
       body = Object.keys(value)
@@ -156,7 +154,7 @@ export const renderHtml: Hook<[any, Mounter], [string, string, string]> = {
         prefix = `<button class="collapse open" data-id="${mounter.registerClick(() => path.model.set(path, undefined))}"></button>`
       }
     }
-    let suffix = mounter.nodeInjector(path, mounter)
+    let suffix = node.hook(suffixInjector, path, mounter) || ''
     let body = ''
     if (typeof value === 'object' && value !== undefined && (!(node.optional() && value === undefined))) {
       const activeFields = getActiveFields(path)
@@ -191,7 +189,8 @@ export const renderHtml: Hook<[any, Mounter], [string, string, string]> = {
         evt.stopPropagation()
       })
     })
-    return ['', rawString(params, path, inputId), '']
+    const suffix = params.node.hook(suffixInjector, path, mounter) || ''
+    return ['', rawString(params, path, inputId) + suffix, '']
   }
 }
 

src/app/hooks/suffixInjector.ts

@@ -0,0 +1,50 @@
+import { Hook, ModelPath, Path } from '@mcschema/core'
+import { App, Previews } from '../App'
+import { Octicon } from '../components/Octicon'
+import { locale } from '../Locales'
+import { Mounter } from '../Mounter'
+import { BiomeNoisePreview } from '../preview/BiomeNoisePreview'
+import { Preview } from '../preview/Preview'
+import { Tracker } from '../Tracker'
+
+export const suffixInjector: Hook<[Mounter], string | void> = {
+  base() {},
+  boolean() {},
+  list() {},
+  map() {},
+  number() {},
+
+  choice({ switchNode }, path, mounter) {
+    return switchNode.hook(this, path, mounter)
+  },
+
+  object({}, path, mounter) {
+    if (Previews.biome_noise.active(path)) {
+      return setPreview(Previews.biome_noise, path, mounter)
+    }
+    if (Previews.noise_settings.active(path)) {
+      return setPreview(Previews.noise_settings, path, mounter)
+    }
+  },
+
+  string({}, path, mounter) {
+    if (path.endsWith(new Path(['biome']))
+      && path.pop().pop().endsWith(new Path(['generator', 'biome_source', 'biomes']))) {
+        const biomePreview = Previews.biome_noise as BiomeNoisePreview
+        const biome = path.get()
+        const id = mounter.registerChange(el => {
+          biomePreview.setBiomeColor(biome, (el as HTMLInputElement).value)
+        })
+        return `<input type="color" value="${biomePreview.getBiomeHex(biome)}" data-id=${id}></input>`
+    }
+  }
+}
+
+function setPreview(preview: Preview, path: ModelPath, mounter: Mounter) {
+  const id = mounter.registerClick(() => {
+    Tracker.setPreview(preview.getName())
+    preview.path = path
+    App.preview.set(preview)
+  })
+  return `<button data-id=${id}>${locale('preview')} ${Octicon.play}</button>`
+}