How to define RenderValueComponent while using vanilla-jsoneditor

[1pone]

I'm using vanilla-jsoneditor in React, and i need use custom RenderValueComponent for onRenderValue.component to render value as password, like the ReadonlyPassword example shown in the project. But how can i define the RenderValueComponent without svelte?

[1pone]

Or can I submit a PR to add ReadonlyPassword export?

[josdejong]

I haven't tried out if/how you can use onRenderValue from an other framework like React, we have to do some experimentation there.

I like the idea of exporting ReadonlyPassword: it can be the first a collection of extra value render components. I think though that we should either rename it to something like HiddenValue, or improve on it: it was just a minimal example, and when you double click it to edit, you see all of the password in plain sight, that should remain hidden whilst typing.

[AlexRMU]

I think you can do it like this (after https://github.com/josdejong/svelte-jsoneditor/issues/373). Other frameworks will be able to create everything they need, and reactivity both inside and outside the component will be provided by runes.

[josdejong]

Do you mean defining an API like a Svelte action?

[AlexRMU]

Yes

[josdejong]

I think that makes sense indeed.

[josdejong]

I tried out using Svelte actions, it works like a charm, see #398

[josdejong]

I've finished and merged #398 (not yet published)

[josdejong]

398 is now published in v0.21.5

[13832198312]

Can you give me a specific example of how to customize a component

[josdejong]

Yes, see /examples/browser/custom_value_renderer.html

[13832198312]

可以这样写自己的样式

onRenderValue={(props: any) => {
          const myRendererAction = {
            action: (node: any) => {
              const content = document.createElement('div')
              content.innerHTML = props.value
              node.classList.add('highlight')
              node.appendChild(content)
              return {
                update: (node: any) => {
                  // update the DOM
                },
                destroy: () => {
                  // cleanup the DOM
                },
              }
            },
            props,
          }
          return [myRendererAction]
        }
      }

[josdejong]

Can you please use English?