CodeHIghtlight but Editable?

[elibroftw]

Is it possible to edit JSON using the CodeHight? I see the contentEditable prop and the onChange prop but no documentation.

This is what I got so far.

    const saveConfig = () => {
        // TODO: verify string can be converted to json,
        //  show notification error if not
        const configToSave = configEditorRef.current.textContent;
        try {
            JSON.parse(configToSave)
        } catch (error) {
            notifications.show({title: 'Error', message: error.message });
        }
    }

return <>
        <Space />
        { configIsDirty && <Button variant='outline' onClick={saveConfig}>Save configuration</Button> }
        <Space />
        <CodeHighlight ref={configEditorRef} contentEditable onKeyDown={() => setDirtyConfig(true)} code={configurationStr} language='json'/>
</>

Th

[rtivital]

Mantine does not provide this feature out of the box, you either need to build it on your side or use a third-party library that implements this logic