Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Editor should be customisable #15

Closed
11 tasks done
thclark opened this issue Dec 20, 2023 · 0 comments
Closed
11 tasks done

Editor should be customisable #15

thclark opened this issue Dec 20, 2023 · 0 comments
Assignees
Labels
experience (UX) Key UX issues feature New feature or request

Comments

@thclark
Copy link
Contributor

thclark commented Dec 20, 2023

Feature request

Use Case

I want to customize the editor in the ways that are made possible via the properties supplied to the svelte-jsoneditor.

Details

Not all the properties are relevant or easy to implement, for example the onWhatever callbacks would need to add some kind of custom javascript (at which point the end user should override the template themself) but there's a subset that are straightforward and will meet most people's needs.

The other easily added props are as follows:

  • mode: 'tree' | 'text' | 'table'. Open the editor in 'tree' mode (default), 'table' mode, or 'text' mode (formerly: code mode).

  • mainMenuBar: boolean Show the main menu bar. Default value is true.

  • navigationBar: boolean Show the navigation bar with, where you can see the selected path and navigate through your document from there. Default value is true.

  • statusBar: boolean Show a status bar at the bottom of the 'text' editor, showing information about the cursor location and selected contents. Default value is true.

  • askToFormat: boolean When true (default), the user will be asked whether he/she wants to format the JSON document when a compact document is loaded or pasted in 'text' mode. Only applicable to 'text' mode.

  • readOnly: boolean The readonly property is dealt with in Editor remains editable in readonly mode #14 because that should be determined by the admin itself. In read-only mode: no changes can be made, non-relevant buttons are hidden from the menu, and the context menu is not enabled. Default value is false.

  • indentation: number | string Number of spaces use for indentation when stringifying JSON, or a string to be used as indentation like '\t' to use a tab as indentation, or ' ' to use 4 spaces (which is equivalent to configuring indentation: 4). See also property tabSize.

  • tabSize: number When indentation is configured as a tab character (indentation: '\t'), tabSize configures how large a tab character is rendered. Default value is 4. Only applicable to text mode.

  • 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.

@thclark thclark added experience (UX) Key UX issues feature New feature or request labels Dec 20, 2023
@thclark thclark closed this as completed Jan 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
experience (UX) Key UX issues feature New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants