(props)
| 29 | setting: Setting |
| 30 | setSetting: (setting: Setting) => void |
| 31 | }> = (props) => { |
| 32 | const schema = () => |
| 33 | props.setting.id === userSettingId |
| 34 | ? C.userSettingSchema |
| 35 | : C.cardSettingSchema |
| 36 | let ref!: HTMLDivElement |
| 37 | let view: EditorView |
| 38 | onMount(() => { |
| 39 | const stringifiedSetting = () => JSON.stringify(props.setting, null, 2) |
| 40 | const [theme] = useThemeContext() |
| 41 | view = new EditorView({ |
| 42 | parent: ref, |
| 43 | state: createEditorState(stringifiedSetting(), theme(), schema()), |
| 44 | }) |
| 45 | createEffect( |
| 46 | on( |
| 47 | () => props.setting.id, |
| 48 | () => { |
| 49 | view.setState( |
| 50 | createEditorState(stringifiedSetting(), theme(), schema()), |
| 51 | ) |
| 52 | }, |
| 53 | ), |
| 54 | ) |
| 55 | createEffect( |
| 56 | on(theme, (t) => { |
| 57 | view.setState(createEditorState(stringifiedSetting(), t, schema())) |
| 58 | }), |
| 59 | ) |
| 60 | onCleanup(() => { |
| 61 | view.destroy() |
| 62 | }) |
| 63 | }) |
| 64 | return ( |
| 65 | <> |
| 66 | <fieldset class='border-black border p-2'> |
| 67 | <legend> |
| 68 | <span class='p-2 px-4 font-bold'>JSON</span> |
| 69 | </legend> |
| 70 | <div class='h-full resize-y overflow-auto' ref={ref} /> |
| 71 | </fieldset> |
| 72 | <button |
| 73 | type='button' |
| 74 | class='text-white bg-green-600 rounded p-2 px-4 font-bold hover:bg-green-700' |
| 75 | onClick={async () => { |
| 76 | let setting: Setting |
| 77 | try { |
| 78 | setting = JSON.parse(view.state.doc.toString()) as Setting |
| 79 | } catch { |
| 80 | C.toastError('Invalid JSON.') |
| 81 | return |
| 82 | } |
| 83 | const validate = new Ajv({ allErrors: true }).compile(schema()) |
| 84 | if (validate(setting)) { |
| 85 | props.setSetting(setting) |
| 86 | await C.db.bulkUploadSettings([setting]) |
| 87 | } else { |
| 88 | C.toastError( |
nothing calls this directly
no test coverage detected