Skip to content

Commit

Permalink
Merge pull request #130 from sunnydanu/feat(new-tool)--json-editor
Browse files Browse the repository at this point in the history 
feat(new-tool):-json-editor
  • Loading branch information
@sunnydanu
sunnydanu authored Oct 27, 2024
2 parents 13ff2b4 + 9aef12f commit 59fe5ad
Show file tree
Hide file tree
Showing 5 changed files with 90 additions and 157 deletions.
1 change: 1 addition & 0 deletions components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@ declare module '@vue/runtime-core' {
EmojiGrid: typeof import('./src/tools/emoji-picker/emoji-grid.vue')['default']
EmojiPicker: typeof import('./src/tools/emoji-picker/emoji-picker.vue')['default']
Encryption: typeof import('./src/tools/encryption/encryption.vue')['default']
EnergyComputer: typeof import('./src/tools/energy-computer/energy-computer.vue')['default']
EtaCalculator: typeof import('./src/tools/eta-calculator/eta-calculator.vue')['default']
FavoriteButton: typeof import('./src/components/FavoriteButton.vue')['default']
FormatTransformer: typeof import('./src/components/FormatTransformer.vue')['default']
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,7 @@
"unicode-emoji-json": "^0.4.0",
"unplugin-auto-import": "^0.16.4",
"uuid": "^9.0.0",
"vanilla-jsoneditor": "^0.23.8",
"vue": "^3.3.4",
"vue-i18n": "^9.9.1",
"vue-router": "^4.1.6",
Expand Down
54 changes: 40 additions & 14 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions src/tools/json-editor/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ import { defineTool } from '../tool';
export const tool = defineTool({
name: 'JSON Editor',
path: '/json-editor',
description: 'JSON editor for viewing, editing, formatting, repairing, comparing, querying, validating, and sharing JSON data',
keywords: ['json', 'editor', 'Online JSON viewer', 'JSON formatting tool', 'JSON validator', 'JSON comparison tool', 'Edit JSON data', 'JSON editor', 'JSON beautifier', 'JSON repair tool', 'JSON query tool', 'Share JSON online', 'Large JSON file processing'],
description: 'Edit JSON content',
keywords: ['json', 'editor'],
component: () => import('./json-editor.vue'),
icon: Braces,
createdAt: new Date('2024-10-18'),
createdAt: new Date('2024-05-11'),
});
185 changes: 45 additions & 140 deletions src/tools/json-editor/json-editor.vue
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,55 @@
<script setup lang="ts">
import JsonEditorVue from 'json-editor-vue';
const value = ref();
import { type AfterSelection, type InsideSelection, type JSONEditorSelection, type KeySelection, type MultiSelection, type ValueSelection, isAfterSelection, isInsideSelection, isKeySelection, isMultiSelection, isValueSelection, stringifyJSONPath } from 'vanilla-jsoneditor';
import 'vanilla-jsoneditor/themes/jse-theme-dark.css';
import { useStyleStore } from '@/stores/style.store';
const styleStore = useStyleStore();
const jsonText = ref('{ "a": { "array": [1, 2, 3] } }');
const jsonPath = ref('');
function updateJsonPath(selection: JSONEditorSelection) {
if (isAfterSelection (selection)) {
jsonPath.value = `$.${stringifyJSONPath((selection as AfterSelection).path)}`;
}
else if (isInsideSelection (selection)) {
jsonPath.value = `$.${stringifyJSONPath((selection as InsideSelection).path)}`;
}
else if (isKeySelection (selection)) {
jsonPath.value = `$.${stringifyJSONPath((selection as KeySelection).path)}`;
}
else if (isValueSelection (selection)) {
jsonPath.value = `$.${stringifyJSONPath((selection as ValueSelection).path)}`;
}
else if (isMultiSelection (selection)) {
jsonPath.value = `$.${stringifyJSONPath((selection as MultiSelection).focusPath)}`;
}
else {
jsonPath.value = 'No available in this mode';
}
}
</script>

<template>
<div class="json-editor-container">
<div>
<JsonEditorVue
v-model="value"
class="jse-theme-dark"
v-bind="{ mode: 'text' }"
v-model="jsonText"
mode="text"
:class="styleStore.isDarkTheme ? 'jse-theme-dark' : ''"
:on-select="updateJsonPath"
mb-2
/>

<n-form-item label="Current Selected Node JSONPath:">
<textarea-copyable :value="jsonPath" />
</n-form-item>

<n-divider />

<n-form-item label="Your edited JSON:">
<textarea-copyable :value="jsonText" language="json" />
</n-form-item>
</div>
</template>

Expand All @@ -25,139 +64,5 @@ const value = ref();
--jse-background-color: #1e1e1e;
--jse-text-color: #d4d4d4;
--jse-text-color-inverse: #4d4d4d;
/* main, menu, modal */
--jse-main-border: 1px solid #4f4f4f;
--jse-menu-color: #fff;
--jse-modal-background: #2f2f2f;
--jse-modal-overlay-background: rgba(0, 0, 0, 0.5);
--jse-modal-code-background: #2f2f2f;
/* tooltip in text mode */
--jse-tooltip-color: var(--jse-text-color);
--jse-tooltip-background: #4b4b4b;
--jse-tooltip-border: 1px solid #737373;
--jse-tooltip-action-button-color: inherit;
--jse-tooltip-action-button-background: #737373;
/* panels: navigation bar, gutter, search box */
--jse-panel-background: #333333;
--jse-panel-background-border: 1px solid #464646;
--jse-panel-color: var(--jse-text-color);
--jse-panel-color-readonly: #737373;
--jse-panel-border: 1px solid #3c3c3c;
--jse-panel-button-color-highlight: #e5e5e5;
--jse-panel-button-background-highlight: #464646;
/* navigation-bar */
--jse-navigation-bar-background: #656565;
--jse-navigation-bar-background-highlight: #7e7e7e;
--jse-navigation-bar-dropdown-color: var(--jse-text-color);
/* context menu */
--jse-context-menu-background: #4b4b4b;
--jse-context-menu-background-highlight: #595959;
--jse-context-menu-separator-color: #595959;
--jse-context-menu-color: var(--jse-text-color);
--jse-context-menu-pointer-background: #737373;
--jse-context-menu-pointer-background-highlight: #818181;
--jse-context-menu-pointer-color: var(--jse-context-menu-color);
/* contents: json key and values */
--jse-key-color: #9cdcfe;
--jse-value-color: var(--jse-text-color);
--jse-value-color-number: #b5cea8;
--jse-value-color-boolean: #569cd6;
--jse-value-color-null: #569cd6;
--jse-value-color-string: #ce9178;
--jse-value-color-url: #ce9178;
--jse-delimiter-color: #949494;
--jse-edit-outline: 2px solid var(--jse-text-color);
/* contents: selected or hovered */
--jse-selection-background-color: #464646;
--jse-selection-background-inactive-color: #333333;
--jse-hover-background-color: #343434;
--jse-active-line-background-color: rgba(255, 255, 255, 0.06);
--jse-search-match-background-color: #343434;
/* contents: section of collapsed items in an array */
--jse-collapsed-items-background-color: #333333;
--jse-collapsed-items-selected-background-color: #565656;
--jse-collapsed-items-link-color: #b2b2b2;
--jse-collapsed-items-link-color-highlight: #ec8477;
/* contents: highlighting of search results */
--jse-search-match-color: #724c27;
--jse-search-match-outline: 1px solid #966535;
--jse-search-match-active-color: #9f6c39;
--jse-search-match-active-outline: 1px solid #bb7f43;
/* contents: inline tags inside the JSON document */
--jse-tag-background: #444444;
--jse-tag-color: #bdbdbd;
/* contents: table */
--jse-table-header-background: #333333;
--jse-table-header-background-highlight: #424242;
--jse-table-row-odd-background: rgba(255, 255, 255, 0.1);
/* controls in modals: inputs, buttons, and `a` */
--jse-input-background: #3d3d3d;
--jse-input-border: var(--jse-main-border);
--jse-button-background: #808080;
--jse-button-background-highlight: #7a7a7a;
--jse-button-color: #e0e0e0;
--jse-button-secondary-background: #494949;
--jse-button-secondary-background-highlight: #5d5d5d;
--jse-button-secondary-background-disabled: #9d9d9d;
--jse-button-secondary-color: var(--jse-text-color);
--jse-a-color: #55abff;
--jse-a-color-highlight: #4387c9;
/* svelte-select */
--jse-svelte-select-background: #3d3d3d;
--jse-svelte-select-border: 1px solid #4f4f4f;
--list-background: #3d3d3d;
--item-hover-bg: #505050;
--multi-item-bg: #5b5b5b;
--input-color: #d4d4d4;
--multi-clear-bg: #8a8a8a;
--multi-item-clear-icon-color: #d4d4d4;
--multi-item-outline: 1px solid #696969;
--list-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);
/* color picker */
--jse-color-picker-background: #656565;
--jse-color-picker-border-box-shadow: #8c8c8c 0 0 0 1px;
.jse-table-mode-welcome.svelte-1q0ce0e .jse-nested-arrays button.jse-nested-array-action.svelte-1q0ce0e,
.jse-welcome.svelte-1eamlhk .jse-contents button.svelte-1eamlhk,
.jse-transform-modal-inner.svelte-rrrjnb .jse-modal-contents .jse-actions button.jse-primary.svelte-rrrjnb
{
line-height: 1;
font-family: inherit;
font-size: 14px;
border: none;
text-align: center;
cursor: pointer;
text-decoration: none;
font-weight: 400;
color: #1ea54c;
transition: background-color cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
background-color: #18a0582f;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.jse-table-mode-welcome.svelte-1q0ce0e .jse-nested-arrays button.jse-nested-array-action.svelte-1q0ce0e:hover,
.jse-welcome.svelte-1eamlhk .jse-contents button.svelte-1eamlhk:hover,
.jse-transform-modal-inner.svelte-rrrjnb .jse-modal-contents .jse-actions button.jse-primary.svelte-rrrjnb:hover,
button.jse-context-menu-button.svelte-1idfykj:not(:disabled):hover {
outline: 1px solid #1ea54c;
background-color: #18a0582f;
}
}
</style>

0 comments on commit 59fe5ad

Please sign in to comment.