diff --git a/README.md b/README.md index 5322c59d..5e387381 100644 --- a/README.md +++ b/README.md @@ -90,7 +90,7 @@ Or one-way binding: } function handleChange(updatedContent, previousContent, { contentErrors, patchResult }) { - // content is an object { json: JSONValue } | { text: string } + // content is an object { json: unknown } | { text: string } console.log('onChange: ', { updatedContent, previousContent, contentErrors, patchResult }) content = updatedContent } @@ -151,7 +151,7 @@ Browser example loading the standalone ES module: props: { content, onChange: (updatedContent, previousContent, { contentErrors, patchResult }) => { - // content is an object { json: JSONValue } | { text: string } + // content is an object { json: unknown } | { text: string } console.log('onChange', { updatedContent, previousContent, contentErrors, patchResult }) content = updatedContent } @@ -203,7 +203,7 @@ const editor = new JSONEditor({ props: { content, onChange: (updatedContent, previousContent, { contentErrors, patchResult }) => { - // content is an object { json: JSONValue } | { text: string } + // content is an object { json: unknown } | { text: string } console.log('onChange', { updatedContent, previousContent, contentErrors, patchResult }) } } @@ -225,7 +225,7 @@ const editor = new JSONEditor({ - `escapeControlCharacters: boolean`. False by default. When `true`, control characters like newline and tab are rendered as escaped characters `\n` and `\t`. Only applicable for `'tree'` mode, in `'text'` mode control characters are always escaped. - `escapeUnicodeCharacters: boolean`. False by default. When `true`, unicode characters like ☎ and 😀 are rendered escaped like `\u260e` and `\ud83d\ude00`. - `flattenColumns: boolean`. True by default. Only applicable to `'table'` mode. When `true`, nested object properties will be displayed each in their own column, with the nested path as column name. When `false`, nested objects will be rendered inline, and double-clicking them will open them in a popup. -- `validator: function (json: JSONValue): ValidationError[]`. Validate the JSON document. +- `validator: function (json: unknown): ValidationError[]`. Validate the JSON document. For example use the built-in JSON Schema validator powered by Ajv: ```js @@ -438,7 +438,7 @@ Note that most methods are asynchronous and will resolve after the editor is re- - `editor.expand(path => true)` expand all - `editor.expand(path => false)` collapse all - `editor.expand(path => path.length < 2)` expand all paths up to 2 levels deep -- `transform({ id?: string, rootPath?: [], onTransform: ({ operations: JSONPatchDocument, json: JSONValue, transformedJson: JSONValue }) => void, onClose: () => void })` programmatically trigger clicking of the transform button in the main menu, opening the transform model. If a callback `onTransform` is provided, it will replace the build-in logic to apply a transform, allowing you to process the transform operations in an alternative way. If provided, `onClose` callback will trigger when the transform modal closes, both after the user clicked apply or cancel. If an `id` is provided, the transform modal will load the previous status of this `id` instead of the status of the editors transform modal. +- `transform({ id?: string, rootPath?: [], onTransform: ({ operations: JSONPatchDocument, json: unknown, transformedJson: unknown }) => void, onClose: () => void })` programmatically trigger clicking of the transform button in the main menu, opening the transform model. If a callback `onTransform` is provided, it will replace the build-in logic to apply a transform, allowing you to process the transform operations in an alternative way. If provided, `onClose` callback will trigger when the transform modal closes, both after the user clicked apply or cancel. If an `id` is provided, the transform modal will load the previous status of this `id` instead of the status of the editors transform modal. - `scrollTo(path: Path): Promise` Scroll the editor vertically such that the specified path comes into view. Only applicable to modes `tree` and `table`. The path will be expanded when needed. The returned Promise is resolved after scrolling is finished. - `findElement(path: Path)` Find the DOM element of a given path. Returns `null` when not found. - `acceptAutoRepair(): Promise` In tree mode, invalid JSON is automatically repaired when loaded. When the repair was successful, the repaired contents are rendered but not yet applied to the document itself until the user clicks "Ok" or starts editing the data. Instead of accepting the repair, the user can also click "Repair manually instead". Invoking `.acceptAutoRepair()` will programmatically accept the repair. This will trigger an update, and the method itself also returns the updated contents. In case of `text` mode or when the editor is not in an "accept auto repair" status, nothing will happen, and the contents will be returned as is. diff --git a/package-lock.json b/package-lock.json index 9d1bcde2..ad68cf84 100644 --- a/package-lock.json +++ b/package-lock.json @@ -69,7 +69,7 @@ "eslint-plugin-svelte": "2.35.1", "husky": "8.0.3", "jsdom": "23.0.1", - "lossless-json": "3.0.2", + "lossless-json": "4.0.1", "npm-run-all": "4.1.5", "prettier": "3.1.0", "prettier-plugin-svelte": "3.1.2", @@ -10681,9 +10681,9 @@ "dev": true }, "node_modules/lossless-json": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/lossless-json/-/lossless-json-3.0.2.tgz", - "integrity": "sha512-IbNz6s05hNuQjIC3DL15ahu3S5V7AQAjMnjNGfucqW+r17XQN6CwmAwU2LU2KAJkfaVu/4A7gmlCMrq/ch4wug==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/lossless-json/-/lossless-json-4.0.1.tgz", + "integrity": "sha512-l0L+ppmgPDnb+JGxNLndPtJZGNf6+ZmVaQzoxQm3u6TXmhdnsA+YtdVR8DjzZd/em58686CQhOFDPewfJ4l7MA==", "dev": true }, "node_modules/loupe": { diff --git a/package.json b/package.json index 42ad4925..1cfac923 100644 --- a/package.json +++ b/package.json @@ -130,7 +130,7 @@ "eslint-plugin-svelte": "2.35.1", "husky": "8.0.3", "jsdom": "23.0.1", - "lossless-json": "3.0.2", + "lossless-json": "4.0.1", "npm-run-all": "4.1.5", "prettier": "3.1.0", "prettier-plugin-svelte": "3.1.2", diff --git a/src/lib/components/JSONEditor.svelte b/src/lib/components/JSONEditor.svelte index 090aa4f0..0f7063fe 100644 --- a/src/lib/components/JSONEditor.svelte +++ b/src/lib/components/JSONEditor.svelte @@ -132,8 +132,9 @@ debug('parser changed, recreate editor') if (isJSONContent(content)) { + const text = previousParser.stringify(content.json) content = { - json: parser.parse(previousParser.stringify(content.json)) + json: text !== undefined ? parser.parse(text) : undefined } } diff --git a/src/lib/components/controls/JSONPreview.svelte b/src/lib/components/controls/JSONPreview.svelte index f65516ad..55a20437 100644 --- a/src/lib/components/controls/JSONPreview.svelte +++ b/src/lib/components/controls/JSONPreview.svelte @@ -1,11 +1,11 @@ diff --git a/src/lib/components/modes/tablemode/JSONValue.svelte b/src/lib/components/modes/tablemode/JSONValue.svelte index ba28d7d4..7beeeb50 100644 --- a/src/lib/components/modes/tablemode/JSONValue.svelte +++ b/src/lib/components/modes/tablemode/JSONValue.svelte @@ -5,7 +5,6 @@ AfterPatchCallback, JSONEditorContext, JSONSelection, - JSONValue, SearchResultItem } from '$lib/types' import type { JSONPatchDocument, JSONPath } from 'immutable-json-patch' @@ -13,7 +12,7 @@ import { createNestedValueOperations } from '$lib/logic/operations.js' export let path: JSONPath - export let value: JSONValue + export let value: unknown export let context: JSONEditorContext export let enforceString: boolean export let selection: JSONSelection | null diff --git a/src/lib/components/modes/tablemode/TableMode.svelte b/src/lib/components/modes/tablemode/TableMode.svelte index 7f2078f4..5c7a5f7a 100644 --- a/src/lib/components/modes/tablemode/TableMode.svelte +++ b/src/lib/components/modes/tablemode/TableMode.svelte @@ -15,7 +15,6 @@ JSONParser, JSONPatchResult, JSONSelection, - JSONValue, OnBlur, OnChange, OnChangeMode, @@ -207,7 +206,7 @@ } }) - let json: JSONValue | undefined + let json: unknown | undefined let text: string | undefined let parseError: ParseError | undefined = undefined @@ -248,7 +247,7 @@ $: refreshScrollTop(json) // eslint-disable-next-line @typescript-eslint/no-unused-vars - function refreshScrollTop(_json: JSONValue | undefined) { + function refreshScrollTop(_json: unknown | undefined) { // When the contents go from lots of items and scrollable contents to only a few items and // no vertical scroll, the actual scrollTop changes to 0 but there is no on:scroll event // triggered, so the internal scrollTop variable is not up-to-date. @@ -291,7 +290,7 @@ } } - function clearSelectionWhenNotExisting(json: JSONValue | undefined) { + function clearSelectionWhenNotExisting(json: unknown | undefined) { if (!documentState.selection || json === undefined) { return } @@ -443,7 +442,7 @@ previousText, previousTextIsRepaired }: { - previousJson: JSONValue | undefined + previousJson: unknown | undefined previousText: string | undefined previousState: DocumentState previousTextIsRepaired: boolean @@ -523,7 +522,7 @@ const memoizedValidate = memoizeOne(validateJSON) function updateValidationErrors( - json: JSONValue, + json: unknown, validator: Validator | null, parser: JSONParser, validationParser: JSONParser @@ -1074,7 +1073,7 @@ { op: 'replace', path: pointer, - value: updatedValue as JSONValue + value: updatedValue } ], (patchedJson, patchedState) => { @@ -1388,7 +1387,7 @@ } // TODO: this function is duplicated from TreeMode. See if we can reuse the code instead - function handleReplaceJson(updatedJson: JSONValue, afterPatch?: AfterPatchCallback) { + function handleReplaceJson(updatedJson: unknown, afterPatch?: AfterPatchCallback) { const previousState = documentState const previousJson = json const previousText = text @@ -1545,8 +1544,8 @@ if (onTransform) { onTransform({ operations, - json: json as JSONValue, - transformedJson: immutableJSONPatch(json as JSONValue, operations) + json: json, + transformedJson: immutableJSONPatch(json, operations) }) } else { debug('onTransform', rootPath, operations) @@ -1572,7 +1571,7 @@ // open a popup where you can edit the nested object/array onJSONEditorModal({ content: { - json: getIn(json as JSONValue, path) as JSONValue + json: getIn(json, path) }, path, onPatch: context.onPatch, diff --git a/src/lib/components/modes/tablemode/TableModeWelcome.svelte b/src/lib/components/modes/tablemode/TableModeWelcome.svelte index 651ca26a..4c9da829 100644 --- a/src/lib/components/modes/tablemode/TableModeWelcome.svelte +++ b/src/lib/components/modes/tablemode/TableModeWelcome.svelte @@ -3,7 +3,7 @@