@aglyn/shared-ui-json-editor 1.0.0-beta.143 → 1.0.0-beta.144
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +54 -4
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,7 +1,57 @@
|
|
|
1
|
-
# shared-ui-json-editor
|
|
1
|
+
# @aglyn/shared-ui-json-editor
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A full-screen Material UI dialog for editing a JSON document by hand, backed by the Monaco editor. Besigner uses it for its "Raw JSON" view of a node tree. It is mainly a building block of `@aglyn/besigner-ui`, and works in any Next.js app that can serve Monaco's assets.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
> Beta. Published from the Aglyn monorepo under the `beta` dist-tag; APIs can change between beta releases.
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
npm install @aglyn/shared-ui-json-editor@beta
|
|
10
|
+
|
|
11
|
+
Peer dependencies: `react`, `next` and `@mui/material`. `next` is required because the editor is loaded with `next/dynamic` and rendered on the client only.
|
|
12
|
+
|
|
13
|
+
**Monaco assets are served from your own origin.** The package configures the Monaco loader to read from `/monaco/vs` (exported as `MONACO_VS_PATH`) and deliberately has no CDN fallback. Copy `monaco-editor/min/vs` into your app's `public/monaco/vs` directory as part of your build, or the editor will not load.
|
|
14
|
+
|
|
15
|
+
## What's in it
|
|
16
|
+
|
|
17
|
+
- `JsonEditor` and `JsonEditorProps` from the root entry. `JsonEditorProps` extends Material UI's `DialogProps` (so `open` controls it) and adds:
|
|
18
|
+
- `defaultValue` — the document to edit, as a value rather than a string; it is passed through `JSON.stringify` into the buffer when the dialog opens. The prop's declared type is inherited from the CodeMirror props, so an object currently needs a cast.
|
|
19
|
+
- `onSave(event, value)` — called with the parsed JSON when Save is pressed.
|
|
20
|
+
- `onClose(event, reason)` — `reason` is `'backdropClick'`, `'escapeKeyDown'`, `'saveClick'` or `'cancelClick'`.
|
|
21
|
+
- `validate(value)` — return a message to block the save and show it; return nothing to allow it.
|
|
22
|
+
- `title` (defaults to "Raw JSON") and `description`.
|
|
23
|
+
- Behavior worth knowing: text that does not parse is kept exactly as typed, reported in a warning, and blocks Save. A backdrop click does not close a dialog with unsaved edits. A typed-in buffer is never overwritten by a new `defaultValue`. A dismissible warning overlay covers the editor each time the component mounts.
|
|
24
|
+
- Subpath modules: `@aglyn/shared-ui-json-editor/components/monaco-editor` (`MonacoEditor`, `MONACO_VS_PATH`) and `@aglyn/shared-ui-json-editor/components/code-mirror-editor` (`CodeMirrorEditor`, a CodeMirror alternative the dialog does not use by default). The Monaco module configures the loader when it is imported, and `package.json` lists it under `sideEffects` for that reason.
|
|
25
|
+
|
|
26
|
+
## Usage
|
|
27
|
+
|
|
28
|
+
```tsx
|
|
29
|
+
import { JsonEditor } from '@aglyn/shared-ui-json-editor'
|
|
30
|
+
import { useState } from 'react'
|
|
31
|
+
|
|
32
|
+
export function Example(props: { doc: object; onChange: (doc: unknown) => void }) {
|
|
33
|
+
const [open, setOpen] = useState(false)
|
|
34
|
+
return (
|
|
35
|
+
<>
|
|
36
|
+
<button onClick={() => setOpen(true)}>Edit JSON</button>
|
|
37
|
+
<JsonEditor
|
|
38
|
+
open={open}
|
|
39
|
+
defaultValue={props.doc as any}
|
|
40
|
+
onClose={() => setOpen(false)}
|
|
41
|
+
onSave={(event, value) => props.onChange(value)}
|
|
42
|
+
validate={(value) =>
|
|
43
|
+
Array.isArray(value) ? 'The document must be an object.' : null
|
|
44
|
+
}
|
|
45
|
+
/>
|
|
46
|
+
</>
|
|
47
|
+
)
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## How it fits
|
|
52
|
+
|
|
53
|
+
A `shared` UI package. It depends on `@aglyn/shared-ui-jsx` and `@aglyn/shared-data-enums`, and `@aglyn/besigner-ui` depends on it. Shared packages are generic: they import only other shared packages and hold no plugin's domain.
|
|
54
|
+
|
|
55
|
+
## License
|
|
56
|
+
|
|
57
|
+
Apache-2.0. Source: https://github.com/aglyn/aglyn/tree/main/libs/shared/ui/json-editor
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aglyn/shared-ui-json-editor",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.144",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"homepage": "https://aglyn.com",
|
|
6
6
|
"repository": {
|
|
@@ -24,8 +24,8 @@
|
|
|
24
24
|
"./package.json": "./package.json"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@aglyn/shared-data-enums": "1.0.0-beta.
|
|
28
|
-
"@aglyn/shared-ui-jsx": "1.0.0-beta.
|
|
27
|
+
"@aglyn/shared-data-enums": "1.0.0-beta.144",
|
|
28
|
+
"@aglyn/shared-ui-jsx": "1.0.0-beta.144",
|
|
29
29
|
"@codemirror/lang-json": "^6.0.1",
|
|
30
30
|
"@monaco-editor/react": "^4.7.0",
|
|
31
31
|
"@uiw/codemirror-theme-github": "^4.25.11",
|