I am trying to create a new Custom field for Editor, specifically the "password" field, and have it have an icon to display or not the value of that field.
On a visual level, the code I attached works, but what it does not do is deliver the value of the field in the Editor form.
This is the code:
`<script>
import { Text } from "wx-svelte-core";
import { createEventDispatcher } from "svelte";
export let value = "";
export let label = "";
export let placeholder = "";
export let required = false;
export let maxLength = null;
// key que pasa Editor al item { key: "password", ... }
let keyFromEditor;
$: keyFromEditor = $$props.key;
const dispatch = createEventDispatcher();
let show = false;
function handleChange(ev) {
console.log("Password handleChange ev:", ev);
// Text de wx-svelte-core emite { value } en ev.detail.value
const newValue = ev.value;
value = newValue;
console.log(`Password field changed: ${newValue}`);
console.log(`Key from Editor: ${keyFromEditor}`);
// 👉 Aquí notificas al Editor
dispatch("change", {
key: keyFromEditor,
value: newValue
});
}
</script>
<div class="wx-password-wrapper">
<Text
{label}
{placeholder}
{required}
{maxLength}
{value}
type={show ? "text" : "password"}
onchange={handleChange}
/>
<button
type="button"
class="toggle"
on:click={() => (show = !show)}
{show ? "🙈" : "👁️"}
</button>
</div>
<style>
.wx-password-wrapper {
position: relative;
width: 100%;
}
.toggle {
position: absolute;
right: -20px;
top: -6px;
background: none;
border: none;
cursor: pointer;
font-size: 1.1rem;
z-index: 10;
}
</style>
`
Can you tell me the error or provide a URL where an example exists.
Thank you
