├── src ├── assets │ ├── .gitkeep │ └── printDemo.png ├── app │ ├── app.component.css │ ├── demo │ │ ├── demo.component.css │ │ ├── show.component.ts │ │ ├── demo.component.spec.ts │ │ ├── demo.component.html │ │ ├── schema.value.ts │ │ └── demo.component.ts │ ├── app.component.html │ ├── app.component.ts │ ├── app.component.spec.ts │ └── app.module.ts ├── favicon.ico ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── typings.d.ts ├── styles.css ├── index.html ├── main.ts ├── tsconfig.packages.json ├── tsconfig.app.json ├── tsconfig.spec.json ├── test.ts └── polyfills.ts ├── ang-jsoneditor ├── .npmignore ├── .browserslistrc ├── src │ ├── public_api.ts │ ├── jsoneditor │ │ ├── jsoneditor.component.spec.ts │ │ ├── jsoneditoroptions.ts │ │ └── jsoneditor.component.ts │ └── lib.module.ts ├── package.json └── README.md ├── e2e ├── tsconfig.e2e.json ├── app.po.ts └── app.e2e-spec.ts ├── .editorconfig ├── tsconfig.json ├── .github └── ISSUE_TEMPLATE │ ├── feature_request.md │ └── bug_report.md ├── protractor.conf.js ├── .travis.yml ├── renovate.json ├── LICENSE ├── .gitignore ├── karma.conf.js ├── package.json ├── tslint.json ├── README.md └── angular.json /src/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/app.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /ang-jsoneditor/.npmignore: -------------------------------------------------------------------------------- 1 | *.ts 2 | !*.d.ts -------------------------------------------------------------------------------- /src/app/demo/demo.component.css: -------------------------------------------------------------------------------- 1 | json-editor>div {height: 100%;} -------------------------------------------------------------------------------- /ang-jsoneditor/.browserslistrc: -------------------------------------------------------------------------------- 1 | last 2 Chrome versions 2 | iOS > 10 3 | Safari > 10 4 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/playground/ang-jsoneditor/master/src/favicon.ico -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /src/assets/printDemo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/playground/ang-jsoneditor/master/src/assets/printDemo.png -------------------------------------------------------------------------------- /ang-jsoneditor/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export * from './lib.module'; 2 | export * from './jsoneditor/jsoneditor.component'; 3 | -------------------------------------------------------------------------------- /src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /* SystemJS module definition */ 2 | declare var module: NodeModule; 3 | interface NodeModule { 4 | id: string; 5 | } 6 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | @import "~jsoneditor/dist/jsoneditor.min.css"; 3 | -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 |

3 | Welcome to Angular Json Editor 4 |

5 |
6 | -------------------------------------------------------------------------------- /e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "node" 10 | ] 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | title = 'app'; 10 | } 11 | -------------------------------------------------------------------------------- /e2e/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class NgPackagedPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.css('app-root h1')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ang-jsoneditor 6 | 7 | 8 | 9 | 10 | 11 | 12 | Loading... 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule); 12 | -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // The file contents for the current environment will overwrite these during build. 2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do 3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead. 4 | // The list of which env maps to which file can be found in `.angular-cli.json`. 5 | 6 | export const environment = { 7 | production: false 8 | }; 9 | -------------------------------------------------------------------------------- /e2e/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { NgPackagedPage } from './app.po'; 2 | 3 | describe('ng-packaged App', () => { 4 | let page: NgPackagedPage; 5 | 6 | beforeEach(() => { 7 | page = new NgPackagedPage(); 8 | }); 9 | 10 | it('should display message saying app works', () => { 11 | page.navigateTo(); 12 | page.getParagraphText() 13 | .then(t => { 14 | expect(t).toEqual('Welcome to Angular Json Editor'); 15 | }); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /src/app/demo/show.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, ViewChild, Input } from '@angular/core'; 2 | import { JsonEditorComponent, JsonEditorOptions } from '../../../ang-jsoneditor/src/public_api'; 3 | 4 | @Component({ 5 | selector: 'app-show', 6 | template: '
{{showData()}}
' 7 | }) 8 | export class ShowComponent { 9 | 10 | @Input() 11 | public data; 12 | 13 | showData(){ 14 | return JSON.stringify(this.data, null, 2); 15 | } 16 | 17 | } 18 | -------------------------------------------------------------------------------- /src/tsconfig.packages.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "angularCompilerOptions": { 4 | "paths": { 5 | "ang-jsoneditor": [ "../dist/ang-jsoneditor" ] 6 | } 7 | }, 8 | "compilerOptions": { 9 | "outDir": "../out-tsc/app", 10 | "module": "es2015", 11 | "baseUrl": "", 12 | "types": [], 13 | "paths": { 14 | "ang-jsoneditor": [ "../dist/ang-jsoneditor" ] 15 | } 16 | }, 17 | "exclude": [ 18 | "test.ts", 19 | "**/*.spec.ts" 20 | ] 21 | } 22 | -------------------------------------------------------------------------------- /src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "angularCompilerOptions": { 4 | "paths": { 5 | "ang-jsoneditor": [ "../ang-jsoneditor/src/public_api.ts" ] 6 | } 7 | }, 8 | "compilerOptions": { 9 | "outDir": "../out-tsc/app", 10 | "module": "es2015", 11 | "baseUrl": "", 12 | "types": [], 13 | "paths": { 14 | "ang-jsoneditor": [ "../ang-jsoneditor/src/public_api.ts" ] 15 | } 16 | }, 17 | "exclude": [ 18 | "test.ts", 19 | "**/*.spec.ts" 20 | ] 21 | } 22 | -------------------------------------------------------------------------------- /src/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "baseUrl": "", 8 | "types": [ 9 | "jasmine", 10 | "node" 11 | ], 12 | "paths": { 13 | "ang-jsoneditor": [ "../ang-jsoneditor/src/public_api.ts" ] 14 | } 15 | }, 16 | "files": [ 17 | "test.ts", 18 | "polyfills.ts" 19 | ], 20 | "include": [ 21 | "**/*.spec.ts", 22 | "**/*.d.ts" 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "outDir": "./dist/out-tsc", 5 | "baseUrl": "src", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "moduleResolution": "node", 9 | "emitDecoratorMetadata": true, 10 | "experimentalDecorators": true, 11 | "target": "es6", 12 | "typeRoots": [ 13 | "node_modules/@types" 14 | ], 15 | "lib": [ 16 | "es2017", 17 | "dom" 18 | ], 19 | "paths": { 20 | "ang-jsoneditor": [ "dist/ang-jsoneditor" ] 21 | } 22 | }, 23 | "exclude": [ 24 | ".ng_build" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /ang-jsoneditor/src/jsoneditor/jsoneditor.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { JsonEditorComponent } from './jsoneditor.component'; 4 | 5 | describe('JsoneditorComponent', () => { 6 | let component: JsonEditorComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ JsonEditorComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(JsonEditorComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should be created', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /ang-jsoneditor/src/lib.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule, ModuleWithProviders, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { JsonEditorComponent } from './jsoneditor/jsoneditor.component'; 4 | import { FormsModule } from '@angular/forms'; 5 | 6 | @NgModule({ 7 | imports: [ 8 | CommonModule, 9 | FormsModule 10 | ], 11 | declarations: [ 12 | JsonEditorComponent 13 | ], 14 | exports: [ 15 | JsonEditorComponent 16 | ], 17 | schemas: [ 18 | CUSTOM_ELEMENTS_SCHEMA, 19 | NO_ERRORS_SCHEMA 20 | ] 21 | }) 22 | export class NgJsonEditorModule { 23 | 24 | public static forRoot(): ModuleWithProviders { 25 | 26 | return { 27 | ngModule: NgJsonEditorModule, 28 | providers: [ 29 | ] 30 | }; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /protractor.conf.js: -------------------------------------------------------------------------------- 1 | // Protractor configuration file, see link for more information 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts 3 | 4 | const { SpecReporter } = require('jasmine-spec-reporter'); 5 | 6 | exports.config = { 7 | allScriptsTimeout: 11000, 8 | specs: [ 9 | './e2e/**/*.e2e-spec.ts' 10 | ], 11 | capabilities: { 12 | 'browserName': 'chrome' 13 | }, 14 | directConnect: true, 15 | baseUrl: 'http://localhost:4300/', 16 | framework: 'jasmine', 17 | jasmineNodeOpts: { 18 | showColors: true, 19 | defaultTimeoutInterval: 30000, 20 | print: function() {} 21 | }, 22 | onPrepare() { 23 | require('ts-node').register({ 24 | project: 'e2e/tsconfig.e2e.json' 25 | }); 26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 27 | } 28 | }; 29 | -------------------------------------------------------------------------------- /ang-jsoneditor/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@maaxgr/ang-jsoneditor", 3 | "version": "12.0.0", 4 | "license": "MIT", 5 | "homepage": "https://github.com/MaaxGr/ang-jsoneditor", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/MaaxGr/ang-jsoneditor" 9 | }, 10 | "author": "Max Großmann , Mario Mol , Manish Sodavadiya ", 11 | "keywords": [ 12 | "angular", 13 | "jsoneditor", 14 | "ang-jsoneditor", 15 | "ng-jsoneditor", 16 | "angular" 17 | ], 18 | "peerDependencies": { 19 | "@angular/core": "12.x", 20 | "@angular/common": "12.x", 21 | "jsoneditor": "^9.1.8" 22 | }, 23 | "ngPackage": { 24 | "$schema": "./node_modules/ng-packagr/ng-package.schema.json", 25 | "lib": { 26 | "entryFile": "src/public_api.ts" 27 | }, 28 | "dest": "../dist/ang-jsoneditor" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "10.13" 4 | addons: 5 | chrome: stable 6 | services: 7 | - xvfb 8 | before_script: 9 | - "export DISPLAY=:99.0" 10 | # - "sh -e /etc/init.d/xvfb start" 11 | - sleep 3 # give xvfb some time to start 12 | - npm run build:lib build:app 13 | - sleep 3 # give Web server some time to bind to sockets, etc 14 | 15 | before_install: 16 | - npm install -g typescript webdriver-manager ng-packagr @angular/cli@9.0.2 17 | - "/sbin/start-stop-daemon --start --quiet --pidfile /tmp/custom_xvfb_99.pid --make-pidfile --background --exec /usr/bin/Xvfb -- :99 -ac -screen 0 1280x1024x16" 18 | - google-chrome-stable --headless --disable-gpu --remote-debugging-port=9222 http://localhost & 19 | 20 | install: 21 | - npm install 22 | - webdriver-manager update 23 | - node node_modules/protractor/bin/webdriver-manager update 24 | - node_modules/protractor/bin/webdriver-manager update 25 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "pinVersions": false, 3 | "ignoreUnstable": false, 4 | "semanticCommits": true, 5 | "semanticPrefix": "build:", 6 | "commitMessage": "{{semanticPrefix}}update {{depName}} to version {{newVersion}}", 7 | "packageFiles": [ 8 | "package.json", 9 | "ang-jsoneditor/package.json" 10 | ], 11 | "packages": [ 12 | { 13 | "packagePattern": "^@angular\/.*", 14 | "groupName": "angular", 15 | "pinVersions": false 16 | }, 17 | { 18 | "packagePattern": "^@types\/.*", 19 | "groupName": "type definitions", 20 | "pinVersions": false 21 | }, 22 | { 23 | "packagePattern": "^jasmine.*", 24 | "groupName": "jasmine", 25 | "pinVersions": false 26 | }, 27 | { 28 | "packagePattern": "^karma.*", 29 | "groupName": "karma", 30 | "pinVersions": false 31 | }, 32 | { 33 | "packagePattern": "^protractor.*", 34 | "groupName": "protractor", 35 | "pinVersions": false 36 | } 37 | ] 38 | } 39 | -------------------------------------------------------------------------------- /src/app/demo/demo.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | import { NgJsonEditorModule } from 'ang-jsoneditor'; 3 | 4 | import { DemoComponent } from './demo.component'; 5 | import { ShowComponent } from './show.component'; 6 | 7 | import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 8 | 9 | describe('DemoComponent', () => { 10 | let component: DemoComponent; 11 | let fixture: ComponentFixture; 12 | 13 | beforeEach(async(() => { 14 | TestBed.configureTestingModule({ 15 | imports: [ 16 | NgJsonEditorModule.forRoot(), 17 | FormsModule, 18 | ReactiveFormsModule 19 | ], 20 | declarations: [ DemoComponent, ShowComponent ] 21 | }) 22 | .compileComponents(); 23 | })); 24 | 25 | beforeEach(() => { 26 | fixture = TestBed.createComponent(DemoComponent); 27 | component = fixture.componentInstance; 28 | fixture.detectChanges(); 29 | }); 30 | 31 | it('should be created', () => { 32 | expect(component).toBeTruthy(); 33 | }); 34 | }); 35 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 David Herges 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async } from '@angular/core/testing'; 2 | import { 3 | RouterTestingModule 4 | } from '@angular/router/testing'; 5 | import { NgJsonEditorModule } from 'ang-jsoneditor'; 6 | import { AppComponent } from './app.component'; 7 | import { routes } from './app.module'; 8 | import { DemoComponent } from './demo/demo.component'; 9 | import { ShowComponent } from './demo/show.component'; 10 | import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 11 | 12 | describe('AppComponent', () => { 13 | beforeEach(async(() => { 14 | TestBed.configureTestingModule({ 15 | imports: [ 16 | NgJsonEditorModule.forRoot(), 17 | RouterTestingModule.withRoutes(routes), 18 | FormsModule, 19 | ReactiveFormsModule 20 | ], 21 | declarations: [ 22 | AppComponent, DemoComponent, ShowComponent 23 | ] 24 | }).compileComponents(); 25 | })); 26 | 27 | it('should create the app', async(() => { 28 | const fixture = TestBed.createComponent(AppComponent); 29 | const app = fixture.debugElement.componentInstance; 30 | expect(app).toBeTruthy(); 31 | })); 32 | 33 | }); 34 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 4 | import { Routes, RouterModule } from '@angular/router'; 5 | import { AppComponent } from './app.component'; 6 | import { NgJsonEditorModule } from '../../ang-jsoneditor/src/public_api'; 7 | import { DemoComponent } from './demo/demo.component'; 8 | import { ShowComponent } from './demo/show.component'; 9 | import { CommonModule } from '@angular/common'; 10 | 11 | export const routes: Routes = [ 12 | { path: '', redirectTo: '/demo', pathMatch: 'full' }, 13 | { path: 'demo', component: DemoComponent } 14 | ]; 15 | 16 | @NgModule({ 17 | declarations: [ 18 | AppComponent, DemoComponent, ShowComponent 19 | ], 20 | imports: [ 21 | CommonModule, 22 | BrowserModule, 23 | NgJsonEditorModule, 24 | RouterModule.forRoot(routes), 25 | FormsModule, 26 | ReactiveFormsModule, 27 | ], 28 | providers: [], 29 | bootstrap: [AppComponent], 30 | exports: [ 31 | CommonModule, 32 | FormsModule, 33 | ReactiveFormsModule 34 | ] 35 | }) 36 | export class AppModule { } 37 | -------------------------------------------------------------------------------- /src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/long-stack-trace-zone'; 4 | import 'zone.js/dist/proxy.js'; 5 | import 'zone.js/dist/sync-test'; 6 | import 'zone.js/dist/jasmine-patch'; 7 | import 'zone.js/dist/async-test'; 8 | import 'zone.js/dist/fake-async-test'; 9 | import { getTestBed } from '@angular/core/testing'; 10 | import { 11 | BrowserDynamicTestingModule, 12 | platformBrowserDynamicTesting 13 | } from '@angular/platform-browser-dynamic/testing'; 14 | 15 | // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any. 16 | declare var __karma__: any; 17 | declare var require: any; 18 | 19 | // Prevent Karma from running prematurely. 20 | __karma__.loaded = function () {}; 21 | 22 | // First, initialize the Angular testing environment. 23 | getTestBed().initTestEnvironment( 24 | BrowserDynamicTestingModule, 25 | platformBrowserDynamicTesting() 26 | ); 27 | // Then we find all the tests. 28 | const context = require.context('./', true, /\.spec\.ts$/); 29 | // And load the modules. 30 | context.keys().map(context); 31 | // Finally, start Karma to run the tests. 32 | __karma__.start(); 33 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | dist/ 61 | .ng_build/ 62 | #/src/ang-jsoneditor 63 | package-lock.json 64 | yarn.lock 65 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Console and Error stack trace** 24 | If applicable, add screenshots to help explain your problem. 25 | Use debug mode to see in your console the data and options passed to jsoneditor. Copy this and paste in your issue when reporting bugs. Copy the stacktrace as well! 26 | 27 | ```html 28 | 29 | ``` 30 | 31 | 32 | **Screenshots** 33 | If applicable, add screenshots to help explain your problem. 34 | 35 | **Desktop (please complete the following information):** 36 | - OS: [e.g. iOS] 37 | - Browser [e.g. chrome, safari] 38 | - Ng Version [run `ng version` and paste here] 39 | 40 | 41 | **Additional context** 42 | Add any other context about the problem here. 43 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/0.13/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client:{ 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | files: [ 19 | 20 | ], 21 | preprocessors: { 22 | 23 | }, 24 | mime: { 25 | 'text/x-typescript': ['ts','tsx'] 26 | }, 27 | coverageIstanbulReporter: { 28 | dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ], 29 | fixWebpackSourcePaths: true 30 | }, 31 | angularCli: { 32 | environment: 'dev' 33 | }, 34 | reporters: config.angularCli && config.angularCli.codeCoverage 35 | ? ['progress', 'coverage-istanbul'] 36 | : ['progress', 'kjhtml'], 37 | port: 9876, 38 | colors: true, 39 | logLevel: config.LOG_INFO, 40 | autoWatch: true, 41 | browsers: ['Chrome'], 42 | singleRun: false 43 | }); 44 | }; 45 | -------------------------------------------------------------------------------- /src/app/demo/demo.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Options

4 | 5 |

Language

6 | 7 | 8 | 9 |
10 | 11 |

Live Reload

12 | 13 | 14 | Random Number: {{data.randomNumber}} 15 | 16 |

Custom Options

17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 |

Force Language to {{editorOptions.language}}

25 | 26 |

Example with (change)

27 |
28 | 29 | 30 |
31 | 32 | 33 | 34 |

Using options and data variable

35 | 36 |
37 |
38 | 39 |
40 |

Form submitted

41 | {{ formData }} 42 |
43 | 44 |
45 |
46 | 47 | 48 |

Multi json in a loop

49 | 50 |
51 |
52 | 53 |
54 |
55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 |
Last edit data
{{EditedData}}
65 |
-------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@maaxgr/ang-jsoneditor", 3 | "version": "12.0.0", 4 | "private": false, 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/MaaxGr/ang-jsoneditor" 8 | }, 9 | "license": "MIT", 10 | "scripts": { 11 | "ng": "ng", 12 | "start": "ng serve", 13 | "build": "ng build", 14 | "build:app": "npm run build:libcopy && ng build --project packages && rimraf src/ang-jsoneditor", 15 | "build:lib": "rimraf dist && ng-packagr -p ang-jsoneditor/package.json", 16 | "build:libcopy": "cp -R dist/ang-jsoneditor src/ang-jsoneditor", 17 | "watch": "onchange 'ang-jsoneditor/**/*.ts' -- npm run build:lib && npm run build:libcopy", 18 | "build:full": "npm run build:lib && npm run build:app", 19 | "publishnpm": "cp README.md ang-jsoneditor/README.md && npm run build:lib && cd dist/ang-jsoneditor && npm publish", 20 | "unpublish": "npm deprecate -f 'ang-jsoneditor@1.9.3' 'this package has been deprecated'", 21 | "test": "npm run test:dev && npm run e2e", 22 | "test:dev": "ng test dev --watch=false", 23 | "test:unit": "ng test", 24 | "lint": "ng lint", 25 | "e2e": "ng e2e", 26 | "ports": "lsof -i tcp:4201", 27 | "reinstall": "rm package-lock.json && rm -rf node_modules && npm i", 28 | "rebuildsass": "npm rebuild node-sass" 29 | }, 30 | "dependencies": { 31 | "@angular/common": "^12.0.0", 32 | "@angular/compiler": "^12.0.0", 33 | "@angular/core": "^12.0.0", 34 | "@angular/forms": "^12.0.0", 35 | "@angular/platform-browser": "^12.0.0", 36 | "@angular/platform-browser-dynamic": "^12.0.0", 37 | "@angular/router": "^12.0.0", 38 | "core-js": "^3.6.4", 39 | "jsoneditor": "^9.5.7", 40 | "rxjs": "*", 41 | "webpack": "^5.0.0", 42 | "zone.js": "~0.11.4" 43 | }, 44 | "devDependencies": { 45 | "@angular-devkit/build-angular": "^12.0.0", 46 | "@angular-devkit/schematics": "^12.0.0", 47 | "@angular/cli": "^12.0.0", 48 | "@angular/compiler-cli": "^12.0.0", 49 | "@angular/language-service": "^12.0.0", 50 | "@types/jasmine": "3.3.8", 51 | "@types/node": "^13.7.1", 52 | "codelyzer": "~6.0.0", 53 | "cpr": "^3.0.0", 54 | "jasmine": "^3.3.0", 55 | "jasmine-core": "^3.3.0", 56 | "jasmine-spec-reporter": "^4.2.1", 57 | "karma": "~6.3.0", 58 | "karma-chrome-launcher": "~3.1.0", 59 | "karma-cli": "~1.0.1", 60 | "karma-coverage-istanbul-reporter": "^2.0.0", 61 | "karma-jasmine": "~4.0.0", 62 | "karma-jasmine-html-reporter": "~1.7.0", 63 | "ng-packagr": "^12.0.0", 64 | "protractor": "~7.0.0", 65 | "rimraf": "^2.7.1", 66 | "ts-node": "~7.0.0", 67 | "tsickle": "^0.43.0", 68 | "tslib": "^2.3.0", 69 | "tslint": "~6.1.3", 70 | "typescript": "~4.3.3" 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/ 22 | // import 'core-js/es6/symbol'; 23 | // import 'core-js/es6/object'; 24 | // import 'core-js/es6/function'; 25 | // import 'core-js/es6/parse-int'; 26 | // import 'core-js/es6/parse-float'; 27 | // import 'core-js/es6/number'; 28 | // import 'core-js/es6/math'; 29 | // import 'core-js/es6/string'; 30 | // import 'core-js/es6/date'; 31 | // import 'core-js/es6/array'; 32 | // import 'core-js/es6/regexp'; 33 | // import 'core-js/es6/map'; 34 | // import 'core-js/es6/set'; 35 | 36 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 37 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 38 | 39 | /** IE10 and IE11 requires the following to support `@angular/animation`. */ 40 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 41 | 42 | 43 | /** Evergreen browsers require these. **/ 44 | import 'core-js/es/reflect'; 45 | 46 | 47 | /** ALL Firefox browsers require the following to support `@angular/animation`. **/ 48 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 49 | 50 | 51 | 52 | /*************************************************************************************************** 53 | * Zone JS is required by Angular itself. 54 | */ 55 | import 'zone.js/dist/zone'; // Included with Angular CLI. 56 | 57 | 58 | 59 | /*************************************************************************************************** 60 | * APPLICATION IMPORTS 61 | */ 62 | 63 | /** 64 | * Date, currency, decimal and percent pipes. 65 | * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 66 | */ 67 | // import 'intl'; // Run `npm install --save intl`. 68 | /** 69 | * Need to import at least one locale-data with intl. 70 | */ 71 | // import 'intl/locale-data/jsonp/en'; 72 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rulesDirectory": [ 3 | "node_modules/codelyzer" 4 | ], 5 | "rules": { 6 | "callable-types": true, 7 | "class-name": true, 8 | "comment-format": [ 9 | true, 10 | "check-space" 11 | ], 12 | "curly": true, 13 | "eofline": true, 14 | "forin": true, 15 | "import-blacklist": [ 16 | true 17 | ], 18 | "import-spacing": true, 19 | "indent": [ 20 | true, 21 | "spaces" 22 | ], 23 | "interface-over-type-literal": true, 24 | "label-position": true, 25 | "max-line-length": [ 26 | true, 27 | 140 28 | ], 29 | "member-access": false, 30 | "member-ordering": [ 31 | true, 32 | "static-before-instance", 33 | "variables-before-functions" 34 | ], 35 | "no-arg": true, 36 | "no-bitwise": true, 37 | "no-console": [ 38 | true, 39 | "debug", 40 | "info", 41 | "time", 42 | "timeEnd", 43 | "trace" 44 | ], 45 | "no-construct": true, 46 | "no-debugger": true, 47 | "no-empty": false, 48 | "no-empty-interface": true, 49 | "no-eval": true, 50 | "no-inferrable-types": [ 51 | true, 52 | "ignore-params" 53 | ], 54 | "no-shadowed-variable": true, 55 | "no-string-literal": false, 56 | "no-string-throw": true, 57 | "no-switch-case-fall-through": true, 58 | "no-trailing-whitespace": true, 59 | "no-unused-expression": true, 60 | "no-use-before-declare": true, 61 | "no-var-keyword": true, 62 | "object-literal-sort-keys": false, 63 | "one-line": [ 64 | true, 65 | "check-open-brace", 66 | "check-catch", 67 | "check-else", 68 | "check-whitespace" 69 | ], 70 | "prefer-const": true, 71 | "quotemark": [ 72 | true, 73 | "single" 74 | ], 75 | "radix": true, 76 | "semicolon": [ 77 | "always" 78 | ], 79 | "triple-equals": [ 80 | true, 81 | "allow-null-check" 82 | ], 83 | "typedef-whitespace": [ 84 | true, 85 | { 86 | "call-signature": "nospace", 87 | "index-signature": "nospace", 88 | "parameter": "nospace", 89 | "property-declaration": "nospace", 90 | "variable-declaration": "nospace" 91 | } 92 | ], 93 | "typeof-compare": true, 94 | "unified-signatures": true, 95 | "variable-name": false, 96 | "whitespace": [ 97 | true, 98 | "check-branch", 99 | "check-decl", 100 | "check-operator", 101 | "check-separator", 102 | "check-type" 103 | ], 104 | "directive-selector": [ 105 | true, 106 | "attribute", 107 | "app", 108 | "camelCase" 109 | ], 110 | "component-selector": [ 111 | true, 112 | "element", 113 | "app", 114 | "kebab-case" 115 | ], 116 | "use-input-property-decorator": true, 117 | "use-output-property-decorator": true, 118 | "use-host-property-decorator": true, 119 | "no-input-rename": true, 120 | "no-output-rename": true, 121 | "use-life-cycle-interface": true, 122 | "use-pipe-transform-interface": true, 123 | "component-class-suffix": true, 124 | "directive-class-suffix": true, 125 | "no-access-missing-member": true, 126 | "templates-use-public": true, 127 | "invoke-injectable": true 128 | } 129 | } 130 | -------------------------------------------------------------------------------- /src/app/demo/schema.value.ts: -------------------------------------------------------------------------------- 1 | export const schema = { 2 | 'definitions': {}, 3 | '$schema': 'http://json-schema.org/draft-07/schema#', 4 | '$id': 'http://example.com/root.json', 5 | 'type': 'object', 6 | 'title': 'The Root Schema', 7 | 'required': [ 8 | 'randomNumber', 9 | 'products' 10 | ], 11 | 'properties': { 12 | 'randomNumber': { 13 | '$id': '#/properties/randomNumber', 14 | 'type': 'integer', 15 | 'title': 'The Randomnumber Schema', 16 | 'default': 0, 17 | 'examples': [ 18 | 10 19 | ], 20 | 'enum': [1, 2, 3, 4, 5, 6, 7, 8] 21 | }, 22 | 'products': { 23 | '$id': '#/properties/products', 24 | 'type': 'array', 25 | 'title': 'The Products Schema', 26 | 'items': { 27 | '$id': '#/properties/products/items', 28 | 'type': 'object', 29 | 'title': 'The Items Schema', 30 | 'required': [ 31 | 'name', 32 | 'product' 33 | ], 34 | 'properties': { 35 | 'name': { 36 | '$id': '#/properties/products/items/properties/name', 37 | 'type': 'string', 38 | 'title': 'The Name Schema', 39 | 'default': '', 40 | 'examples': [ 41 | 'car' 42 | ], 43 | 'pattern': '^(.*)$' 44 | }, 45 | 'product': { 46 | '$id': '#/properties/products/items/properties/product', 47 | 'type': 'array', 48 | 'title': 'The Product Schema', 49 | 'items': { 50 | '$id': '#/properties/products/items/properties/product/items', 51 | 'type': 'object', 52 | 'title': 'The Items Schema', 53 | 'required': [ 54 | 'name', 55 | 'model' 56 | ], 57 | 'properties': { 58 | 'name': { 59 | '$id': '#/properties/products/items/properties/product/items/properties/name', 60 | 'type': 'string', 61 | 'title': 'The Name Schema', 62 | 'default': '', 63 | 'examples': [ 64 | 'honda' 65 | ], 66 | 'pattern': '^(.*)$' 67 | }, 68 | 'model': { 69 | '$id': '#/properties/products/items/properties/product/items/properties/model', 70 | 'type': 'array', 71 | 'title': 'The Model Schema', 72 | 'items': { 73 | '$id': '#/properties/products/items/properties/product/items/properties/model/items', 74 | 'type': 'object', 75 | 'title': 'The Items Schema', 76 | 'required': [ 77 | 'id', 78 | 'name' 79 | ], 80 | 'properties': { 81 | 'id': { 82 | '$id': '#/properties/products/items/properties/product/items/properties/model/items/properties/id', 83 | 'type': 'string', 84 | 'title': 'The Id Schema', 85 | 'default': '', 86 | 'examples': [ 87 | 'civic' 88 | ], 89 | 'pattern': '^(.*)$' 90 | }, 91 | 'name': { 92 | '$id': '#/properties/products/items/properties/product/items/properties/model/items/properties/name', 93 | 'type': 'string', 94 | 'title': 'The Name Schema', 95 | 'default': '', 96 | 'examples': [ 97 | 'civic' 98 | ], 99 | 'pattern': '^(.*)$' 100 | } 101 | } 102 | } 103 | } 104 | } 105 | } 106 | } 107 | } 108 | } 109 | } 110 | } 111 | } -------------------------------------------------------------------------------- /ang-jsoneditor/src/jsoneditor/jsoneditoroptions.ts: -------------------------------------------------------------------------------- 1 | 2 | export type JsonEditorMode = 'tree' | 'view' | 'form' | 'code' | 'text'; 3 | 4 | export interface JsonEditorTreeNode { 5 | field: String, 6 | value: String, 7 | path: String[] 8 | } 9 | 10 | export interface IError { 11 | path: (string | number)[]; 12 | message: string; 13 | } 14 | 15 | export class JsonEditorOptions { 16 | public ace: any; 17 | public ajv: Object; 18 | 19 | 20 | /** 21 | * {function} onChange Callback method, triggered 22 | on change of contents. 23 | Does not pass the contents itself. 24 | See also `onChangeJSON` and 25 | `onChangeText`. 26 | */ 27 | public onChange: () => void; 28 | 29 | /** 30 | * // {function} onChangeJSON Callback method, triggered 31 | // in modes on change of contents, 32 | // passing the changed contents 33 | // as JSON. 34 | // Only applicable for modes 35 | // 'tree', 'view', and 'form'. 36 | */ 37 | public onChangeJSON: () => void; 38 | 39 | 40 | public onNodeName: () => void; 41 | public onCreateMenu: () => void; 42 | public onColorPicker: () => void; 43 | 44 | /** 45 | * // {function} onChangeText Callback method, triggered 46 | // in modes on change of contents, 47 | // passing the changed contents 48 | // as stringified JSON. 49 | */ 50 | public onChangeText: (jsonstr:string) => void; 51 | 52 | 53 | /** 54 | * {function} onSelectionChange Callback method, 55 | triggered on node selection change 56 | Only applicable for modes 57 | 'tree', 'view', and 'form' 58 | */ 59 | public onSelectionChange: () => void; 60 | 61 | /** 62 | * {function} onTextSelectionChange Callback method, 63 | triggered on text selection change 64 | Only applicable for modes 65 | */ 66 | public onTextSelectionChange: () => void; 67 | 68 | 69 | /** 70 | * // {function} onEvent Callback method, triggered 71 | // when an event occurs in 72 | // a JSON field or value. 73 | // Only applicable for 74 | // modes 'form', 'tree' and 75 | // 'view' 76 | */ 77 | public onEvent: () => void; 78 | 79 | /** 80 | * // * {function} onFocus Callback method, triggered 81 | // when the editor comes into focus, 82 | // passing an object {type, target}, 83 | // Applicable for all modes 84 | */ 85 | public onFocus: () => void; 86 | 87 | // * {function} onBlur Callback method, triggered 88 | // when the editor goes out of focus, 89 | // passing an object {type, target}, 90 | // Applicable for all modes 91 | public onBlur: () => void; 92 | 93 | /** 94 | * // * {function} onClassName Callback method, triggered 95 | // when a Node DOM is rendered. Function returns 96 | // a css class name to be set on a node. 97 | // Only applicable for 98 | // modes 'form', 'tree' and 99 | // 'view' 100 | */ 101 | public onClassName: () => void; 102 | 103 | public onEditable: (node: JsonEditorTreeNode | {}) => boolean | { field: boolean, value: boolean }; 104 | 105 | /** 106 | * {function} onError Callback method, triggered 107 | when an error occurs 108 | */ 109 | public onError: (error: any) => void; 110 | public onModeChange: (newMode: JsonEditorMode, oldMode: JsonEditorMode) => void; 111 | public onValidate: (json: Object) => IError[]; 112 | public onValidationError: (errors: object[]) => void; 113 | 114 | public enableSort: boolean; 115 | public enableTransform: boolean; 116 | public escapeUnicode: boolean; 117 | public expandAll: boolean; 118 | public sortObjectKeys: boolean; 119 | public history: boolean; 120 | public mode: JsonEditorMode; 121 | public modes: JsonEditorMode[]; 122 | public name: String; 123 | public schema: Object; 124 | public search: boolean; 125 | public indentation: Number; 126 | public template: Object; 127 | public theme: Number; 128 | public language: String; 129 | public languages: Object; 130 | 131 | /** 132 | * Adds main menu bar - Contains format, sort, transform, search etc. functionality. True 133 | * by default. Applicable in all types of mode. 134 | */ 135 | public mainMenuBar: boolean; 136 | 137 | /** 138 | * Adds navigation bar to the menu - the navigation bar visualize the current position on 139 | * the tree structure as well as allows breadcrumbs navigation. 140 | * True by default. 141 | * Only applicable when mode is 'tree', 'form' or 'view'. 142 | */ 143 | public navigationBar: boolean; 144 | 145 | /** 146 | * Adds status bar to the bottom of the editor - the status bar shows the cursor position 147 | * and a count of the selected characters. 148 | * True by default. 149 | * Only applicable when mode is 'code' or 'text'. 150 | */ 151 | public statusBar: boolean; 152 | 153 | constructor() { 154 | this.enableSort = true; 155 | this.enableTransform = true; 156 | this.escapeUnicode = false; 157 | this.expandAll = false; 158 | this.sortObjectKeys = false; 159 | this.history = true; 160 | this.mode = 'tree'; 161 | this.search = true; 162 | this.indentation = 2; 163 | } 164 | } 165 | -------------------------------------------------------------------------------- /src/app/demo/demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, ViewChild } from '@angular/core'; 2 | import { JsonEditorComponent, JsonEditorOptions } from '../../../ang-jsoneditor/src/public_api'; 3 | import { FormBuilder } from '@angular/forms'; 4 | import { schema } from './schema.value'; 5 | @Component({ 6 | selector: 'app-demo', 7 | templateUrl: './demo.component.html', 8 | styleUrls: ['./demo.component.css'] 9 | }) 10 | export class DemoComponent implements OnInit { 11 | 12 | public editorOptions: JsonEditorOptions; 13 | public data: any; 14 | 15 | public editorOptions2: JsonEditorOptions; 16 | public data2: any; 17 | 18 | public showData; 19 | 20 | public EditedData; 21 | 22 | public show = false; 23 | 24 | @ViewChild('editor', { static: false }) editor: JsonEditorComponent; 25 | @ViewChild('editorTwo', { static: false }) editorTwo: JsonEditorComponent; 26 | 27 | public form; 28 | public formData; 29 | 30 | dataMulti: any = { 31 | products: [{ 32 | name: 'car', 33 | product: [{ 34 | name: 'honda', 35 | model: [ 36 | { id: 'civic', name: 'civic' }, 37 | { id: 'accord', name: 'accord' }, 38 | { id: 'crv', name: 'crv' }, 39 | { id: 'pilot', name: 'pilot' }, 40 | { id: 'odyssey', name: 'odyssey' } 41 | ] 42 | }] 43 | }, 44 | { 45 | name: 'book', 46 | product: [{ 47 | name: 'dostoyevski', 48 | model: [ 49 | { id: 'Axe', name: 'Axe' }, 50 | { id: 'accord', name: 'accord' }, 51 | { id: 'crv', name: 'crv' }, 52 | { id: 'pilot', name: 'pilot' }, 53 | { id: 'odyssey', name: 'odyssey' } 54 | ] 55 | }] 56 | } 57 | ] 58 | }; 59 | 60 | constructor(public fb: FormBuilder) { 61 | this.editorOptions = new JsonEditorOptions(); 62 | this.editorOptions.schema = schema; 63 | 64 | this.initEditorOptions(this.editorOptions); 65 | 66 | this.editorOptions2 = new JsonEditorOptions(); 67 | this.initEditorOptions(this.editorOptions2) 68 | } 69 | 70 | ngOnInit() { 71 | this.showData = this.data = { 72 | 'randomNumber': 2, 73 | 'products': [ 74 | { 75 | 'name': 'car', 76 | 'product': 77 | [ 78 | { 79 | 'name': 'honda', 80 | 'model': [ 81 | { 'id': 'civic', 'name': 'civic' }, 82 | { 'id': 'accord', 'name': 'accord' }, { 'id': 'crv', 'name': 'crv' }, 83 | { 'id': 'pilot', 'name': 'pilot' }, { 'id': 'odyssey', 'name': 'odyssey' } 84 | ] 85 | } 86 | ] 87 | } 88 | ] 89 | }; 90 | 91 | this.data2 = { 92 | 'nedata': 'test' 93 | }; 94 | 95 | this.form = this.fb.group({ 96 | myinput: [this.data2] 97 | }); 98 | 99 | // this.editorOptions.onChange = this.changeLog.bind(this); 100 | } 101 | 102 | changeLog(event = null) { 103 | console.log(event); 104 | console.log('change:', this.editor); 105 | console.log('change2:', this.editorTwo); 106 | 107 | /** 108 | * Manual validation based on the schema 109 | * if the change does not meet the JSON Schema, it will use the last data 110 | * and will revert the user change. 111 | */ 112 | const editorJson = this.editor.getEditor() 113 | editorJson.validate() 114 | const errors = editorJson.validateSchema.errors 115 | if (errors && errors.length > 0) { 116 | console.log('Errors found', errors) 117 | editorJson.set(this.showData); 118 | } else { 119 | this.showData = this.editor.get(); 120 | } 121 | } 122 | 123 | changeEvent(event) { 124 | console.log(event); 125 | } 126 | 127 | initEditorOptions(editorOptions) { 128 | // this.editorOptions.mode = 'code'; // set only one mode 129 | editorOptions.modes = ['code', 'text', 'tree', 'view']; // set all allowed modes 130 | // this.editorOptions.ace = (window).ace.edit('editor'); 131 | } 132 | 133 | setLanguage(lang) { 134 | this.editorOptions.language = lang; // force a specific language, ie. pt-BR 135 | this.editor.setOptions(this.editorOptions); 136 | } 137 | 138 | setAce() { 139 | const aceEditor = (window).ace.edit(document.querySelector('#a' + this.editor.id + '>div')); 140 | // custom your ace here 141 | aceEditor.setReadOnly(true); 142 | aceEditor.setFontSize('110pt'); 143 | this.editorOptions.ace = aceEditor; 144 | this.editor.setOptions(this.editorOptions); 145 | } 146 | 147 | toggleNav() { 148 | this.editorOptions.navigationBar = !this.editorOptions.navigationBar; 149 | this.editor.setOptions(this.editorOptions); 150 | } 151 | 152 | toggleStatus() { 153 | this.editorOptions.statusBar = !this.editorOptions.statusBar; 154 | this.editor.setOptions(this.editorOptions); 155 | } 156 | 157 | customLanguage() { 158 | this.editorOptions.languages = { 159 | 'pt-BR': { 160 | 'auto': 'Automático testing' 161 | }, 162 | 'en': { 163 | 'auto': 'Auto testing' 164 | } 165 | }; 166 | this.editor.setOptions(this.editorOptions); 167 | } 168 | 169 | changeObject() { 170 | this.data.randomNumber = Math.floor(Math.random() * 8); 171 | } 172 | 173 | changeData() { 174 | this.data = Object.assign({}, this.data, 175 | { randomNumber: Math.floor(Math.random() * 8) }); 176 | } 177 | 178 | /** 179 | * Example on how get the json changed from the jsoneditor 180 | */ 181 | getData() { 182 | const changedJson = this.editor.get(); 183 | console.log(changedJson); 184 | } 185 | 186 | print(v) { 187 | return JSON.stringify(v, null, 2); 188 | } 189 | submit() { 190 | this.formData = JSON.stringify(this.form.value, null, 2); 191 | console.log(this.form.value); 192 | } 193 | 194 | showJson(d) { 195 | console.log(d) 196 | this.EditedData = JSON.stringify(d, null, 2); 197 | } 198 | 199 | makeOptions = () => { 200 | return new JsonEditorOptions(); 201 | } 202 | } 203 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Angular Json Editor 2 | 3 | ## About this repository 4 | This is a fork of mariohmol's [ang-jsoneditor](https://github.com/mariohmol/ang-jsoneditor) 5 | with support for Angular 11, 12 and 13. 6 | This repository will probably become stale, 7 | when the original will be actively maintained again. 8 | 9 | ## About the project 10 | 11 | Angular wrapper for [jsoneditor](https://github.com/josdejong/jsoneditor)). 12 | A library with that you cna view and edit json content interactively. 13 | 14 | ![Demo Image](src/assets/printDemo.png) 15 | 16 | ## Installation 17 | 18 | To install this library with npm, run below command: 19 | 20 | |Compatibility|Command|Stability| 21 | |---|---|---| 22 | |Angular 11|`npm install @maaxgr/ang-jsoneditor@11`|Stable| 23 | |Angular 12|`npm install @maaxgr/ang-jsoneditor@12`|Stable| 24 | |Angular 13|...|Work in Progress| 25 | 26 | **WARNING:** Although versions are marked as stable, 27 | there can be still bugs because this project isn't heavily integrated in a lot of produuction projects 28 | 29 | 30 | ## Usage 31 | 32 | ### Minimal Example 33 | 34 | First import `NgJsonEditorModule`-Module in module.ts: 35 | 36 | ```ts 37 | import { NgJsonEditorModule } from '@maaxgr/ang-jsoneditor' 38 | 39 | @NgModule({ 40 | declarations: [ 41 | AppComponent 42 | ], 43 | imports: [ 44 | ...., 45 | NgJsonEditorModule 46 | ], 47 | providers: [], 48 | bootstrap: [AppComponent] 49 | }) 50 | export class AppModule { } 51 | ``` 52 | 53 | Then setup your component models as below: 54 | ```ts 55 | import {Component} from '@angular/core'; 56 | import {JsonEditorOptions} from "@maaxgr/ang-jsoneditor"; 57 | 58 | @Component({ 59 | selector: 'app-root', 60 | template: '' + 61 | '
{{ visibleData | json }}
' 62 | }) 63 | export class AppComponent { 64 | 65 | public editorOptions: JsonEditorOptions; 66 | public initialData: any; 67 | public visibleData: any; 68 | 69 | constructor() { 70 | this.editorOptions = new JsonEditorOptions() 71 | this.editorOptions.modes = ['code', 'text', 'tree', 'view']; 72 | 73 | this.initialData = {"products":[{"name":"car","product":[{"name":"honda","model":[{"id":"civic","name":"civic"},{"id":"accord","name":"accord"},{"id":"crv","name":"crv"},{"id":"pilot","name":"pilot"},{"id":"odyssey","name":"odyssey"}]}]}]} 74 | this.visibleData = this.initialData; 75 | } 76 | 77 | showJson(d: Event) { 78 | this.visibleData = d; 79 | } 80 | 81 | } 82 | ``` 83 | 84 | Add Style to style.scss: 85 | ```js 86 | @import "~jsoneditor/dist/jsoneditor.min.css"; 87 | ``` 88 | 89 | ### Access Component 90 | 91 | For deeper configuration, add this to component.ts: 92 | ```ts 93 | @ViewChild(JsonEditorComponent, { static: false }) editor!: JsonEditorComponent; 94 | ``` 95 | 96 | ### Forms 97 | 98 | Build it integrated with ReactiveForms: 99 | ```ts 100 | this.form = this.fb.group({ 101 | myinput: [this.data] 102 | }); 103 | ``` 104 | ```html 105 |
106 | 107 | 108 |
109 | ``` 110 | 111 | ### Extra Features 112 | 113 | Besides all the 114 | [configuration options](https://github.com/josdejong/jsoneditor/blob/master/docs/api.md) 115 | from the original jsoneditor, Angular Json Editor supports one additional option: 116 | 117 | => `expandAll`: to automatically expand all nodes upon json loaded with the _data_ input. 118 | 119 | # Troubleshoot 120 | 121 | If you have issue with the height of the component, you can try one of those solutions: 122 | 123 | When you import CSS: 124 | 125 | ```css 126 | @import "~jsoneditor/dist/jsoneditor.min.css"; 127 | textarea.jsoneditor-text{min-height:350px;} 128 | ``` 129 | 130 | Or Customizing the CSS: 131 | 132 | ```css 133 | :host ::ng-deep json-editor, 134 | :host ::ng-deep json-editor .jsoneditor, 135 | :host ::ng-deep json-editor > div, 136 | :host ::ng-deep json-editor jsoneditor-outer { 137 | height: 500px; 138 | } 139 | ``` 140 | 141 | Or as a inner style in component: 142 | 143 | ```html 144 | 145 | ``` 146 | 147 | For code view you can change the height using this example: 148 | ```css 149 | .ace_editor.ace-jsoneditor { 150 | min-height: 500px; 151 | } 152 | ``` 153 | 154 | Use debug mode to see in your console the data and options passed to jsoneditor. Copy this and paste in your issue when reporting bugs. 155 | 156 | ```html 157 | 158 | ``` 159 | 160 | ## JSONOptions missing params 161 | 162 | If you find youself trying to use an custom option that is not mapped here, you can do: 163 | 164 | ```ts 165 | let editorOptions: JsonEditorOptions = new JsonEditorOptions(); (this.editorOptions).templates = [{menu options objects as in json editor documentation}] 166 | ``` 167 | 168 | See the [issue](https://github.com/mariohmol/ang-jsoneditor/issues/57) 169 | 170 | ## Internet Explorer 171 | 172 | If you want to support IE, please follow this guide: 173 | * https://github.com/mariohmol/ang-jsoneditor/issues/44#issuecomment-508650610 174 | 175 | ## Multiple editors 176 | 177 | To use multiple jsoneditors in your view you cannot use the same editor options. 178 | 179 | You should have something like: 180 | 181 | ```html 182 |
183 | 184 |
185 | ``` 186 | 187 | ```ts 188 | makeOptions = () => { 189 | return new JsonEditorOptions(); 190 | } 191 | ``` 192 | 193 | # Demo 194 | 195 | Demo component files are included in Git Project. 196 | 197 | Demo Project with a lot of different implementations (ngInit, change event and others): 198 | [https://github.com/mariohmol/ang-jsoneditor/tree/master/src/app/demo) 199 | 200 | When publishing it to npm, look over this docs: https://docs.npmjs.com/misc/developers 201 | 202 | # Collaborate 203 | 204 | Fork, clone this repo and install dependencies: 205 | ```sh 206 | npm i 207 | ``` 208 | 209 | # License 210 | MIT(./LICENSE) 211 | -------------------------------------------------------------------------------- /ang-jsoneditor/README.md: -------------------------------------------------------------------------------- 1 | # Angular Json Editor 2 | 3 | ## About this repository 4 | This is a fork of mariohmol's [ang-jsoneditor](https://github.com/mariohmol/ang-jsoneditor) 5 | with support for Angular 11, 12 and 13. 6 | This repository will probably become stale, 7 | when the original will be actively maintained again. 8 | 9 | ## About the project 10 | 11 | Angular wrapper for [jsoneditor](https://github.com/josdejong/jsoneditor)). 12 | A library with that you cna view and edit json content interactively. 13 | 14 | ![Demo Image](src/assets/printDemo.png) 15 | 16 | ## Installation 17 | 18 | To install this library with npm, run below command: 19 | 20 | |Compatibility|Command|Stability| 21 | |---|---|---| 22 | |Angular 11|`npm install @maaxgr/ang-jsoneditor@11`|Stable| 23 | |Angular 12|`npm install @maaxgr/ang-jsoneditor@12`|Stable| 24 | |Angular 13|...|Work in Progress| 25 | 26 | **WARNING:** Although Version 2.0.0 is marked as stable, 27 | there can be still bugs because this project isn't heavily integrated in a lot of produuction projects 28 | 29 | 30 | ## Usage 31 | 32 | ### Minimal Example 33 | 34 | First import `NgJsonEditorModule`-Module in module.ts: 35 | 36 | ```ts 37 | import { NgJsonEditorModule } from '@maaxgr/ang-jsoneditor' 38 | 39 | @NgModule({ 40 | declarations: [ 41 | AppComponent 42 | ], 43 | imports: [ 44 | ...., 45 | NgJsonEditorModule 46 | ], 47 | providers: [], 48 | bootstrap: [AppComponent] 49 | }) 50 | export class AppModule { } 51 | ``` 52 | 53 | Then setup your component models as below: 54 | ```ts 55 | import {Component} from '@angular/core'; 56 | import {JsonEditorOptions} from "@maaxgr/ang-jsoneditor"; 57 | 58 | @Component({ 59 | selector: 'app-root', 60 | template: '' + 61 | '
{{ visibleData | json }}
' 62 | }) 63 | export class AppComponent { 64 | 65 | public editorOptions: JsonEditorOptions; 66 | public initialData: any; 67 | public visibleData: any; 68 | 69 | constructor() { 70 | this.editorOptions = new JsonEditorOptions() 71 | this.editorOptions.modes = ['code', 'text', 'tree', 'view']; 72 | 73 | this.initialData = {"products":[{"name":"car","product":[{"name":"honda","model":[{"id":"civic","name":"civic"},{"id":"accord","name":"accord"},{"id":"crv","name":"crv"},{"id":"pilot","name":"pilot"},{"id":"odyssey","name":"odyssey"}]}]}]} 74 | this.visibleData = this.initialData; 75 | } 76 | 77 | showJson(d: Event) { 78 | this.visibleData = d; 79 | } 80 | 81 | } 82 | ``` 83 | 84 | Add Style to style.scss: 85 | ```js 86 | @import "~jsoneditor/dist/jsoneditor.min.css"; 87 | ``` 88 | 89 | ### Access Component 90 | 91 | For deeper configuration, add this to component.ts: 92 | ```ts 93 | @ViewChild(JsonEditorComponent, { static: false }) editor!: JsonEditorComponent; 94 | ``` 95 | 96 | ### Forms 97 | 98 | Build it integrated with ReactiveForms: 99 | ```ts 100 | this.form = this.fb.group({ 101 | myinput: [this.data] 102 | }); 103 | ``` 104 | ```html 105 |
106 | 107 | 108 |
109 | ``` 110 | 111 | ### Extra Features 112 | 113 | Besides all the 114 | [configuration options](https://github.com/josdejong/jsoneditor/blob/master/docs/api.md) 115 | from the original jsoneditor, Angular Json Editor supports one additional option: 116 | 117 | => `expandAll`: to automatically expand all nodes upon json loaded with the _data_ input. 118 | 119 | # Troubleshoot 120 | 121 | If you have issue with the height of the component, you can try one of those solutions: 122 | 123 | When you import CSS: 124 | 125 | ```css 126 | @import "~jsoneditor/dist/jsoneditor.min.css"; 127 | textarea.jsoneditor-text{min-height:350px;} 128 | ``` 129 | 130 | Or Customizing the CSS: 131 | 132 | ```css 133 | :host ::ng-deep json-editor, 134 | :host ::ng-deep json-editor .jsoneditor, 135 | :host ::ng-deep json-editor > div, 136 | :host ::ng-deep json-editor jsoneditor-outer { 137 | height: 500px; 138 | } 139 | ``` 140 | 141 | Or as a inner style in component: 142 | 143 | ```html 144 | 145 | ``` 146 | 147 | For code view you can change the height using this example: 148 | ```css 149 | .ace_editor.ace-jsoneditor { 150 | min-height: 500px; 151 | } 152 | ``` 153 | 154 | Use debug mode to see in your console the data and options passed to jsoneditor. Copy this and paste in your issue when reporting bugs. 155 | 156 | ```html 157 | 158 | ``` 159 | 160 | ## JSONOptions missing params 161 | 162 | If you find youself trying to use an custom option that is not mapped here, you can do: 163 | 164 | ```ts 165 | let editorOptions: JsonEditorOptions = new JsonEditorOptions(); (this.editorOptions).templates = [{menu options objects as in json editor documentation}] 166 | ``` 167 | 168 | See the [issue](https://github.com/mariohmol/ang-jsoneditor/issues/57) 169 | 170 | ## Internet Explorer 171 | 172 | If you want to support IE, please follow this guide: 173 | * https://github.com/mariohmol/ang-jsoneditor/issues/44#issuecomment-508650610 174 | 175 | ## Multiple editors 176 | 177 | To use multiple jsoneditors in your view you cannot use the same editor options. 178 | 179 | You should have something like: 180 | 181 | ```html 182 |
183 | 184 |
185 | ``` 186 | 187 | ```ts 188 | makeOptions = () => { 189 | return new JsonEditorOptions(); 190 | } 191 | ``` 192 | 193 | # Demo 194 | 195 | Demo component files are included in Git Project. 196 | 197 | Demo Project with a lot of different implementations (ngInit, change event and others): 198 | [https://github.com/mariohmol/ang-jsoneditor/tree/master/src/app/demo) 199 | 200 | When publishing it to npm, look over this docs: https://docs.npmjs.com/misc/developers 201 | 202 | # Collaborate 203 | 204 | Fork, clone this repo and install dependencies: 205 | ```sh 206 | npm i 207 | ``` 208 | 209 | # License 210 | MIT(./LICENSE) 211 | -------------------------------------------------------------------------------- /ang-jsoneditor/src/jsoneditor/jsoneditor.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Component, ElementRef, Input, OnInit, OnDestroy, ViewChild, 3 | Output, EventEmitter, forwardRef, ChangeDetectionStrategy 4 | } from '@angular/core'; 5 | import * as editor from 'jsoneditor'; 6 | import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; 7 | import { JsonEditorOptions, JsonEditorMode, JsonEditorTreeNode, IError } from './jsoneditoroptions'; 8 | 9 | @Component({ 10 | // tslint:disable-next-line:component-selector 11 | selector: 'json-editor', 12 | template: `
`, 13 | providers: [ 14 | { 15 | provide: NG_VALUE_ACCESSOR, 16 | useExisting: forwardRef(() => JsonEditorComponent), 17 | multi: true 18 | } 19 | ], 20 | preserveWhitespaces: false, 21 | changeDetection: ChangeDetectionStrategy.OnPush 22 | }) 23 | 24 | export class JsonEditorComponent implements ControlValueAccessor, OnInit, OnDestroy { 25 | private editor: any; 26 | public id = 'angjsoneditor' + Math.floor(Math.random() * 1000000); 27 | disabled = false; 28 | isFocused = false; 29 | 30 | public optionsChanged = false; 31 | 32 | @ViewChild('jsonEditorContainer', { static: true }) jsonEditorContainer: ElementRef; 33 | 34 | private _data: Object = {}; 35 | 36 | @Input() options: JsonEditorOptions = new JsonEditorOptions(); 37 | @Input('data') 38 | set data(value: Object) { 39 | this._data = value; 40 | if (this.editor) { 41 | this.editor.destroy(); 42 | this.ngOnInit(); 43 | } 44 | } 45 | @Input() debug: boolean = false; 46 | 47 | @Output() 48 | change: EventEmitter = new EventEmitter(); 49 | @Output() 50 | jsonChange: EventEmitter = new EventEmitter(); 51 | 52 | constructor() { } 53 | 54 | 55 | ngOnInit() { 56 | let optionsBefore = this.options; 57 | if (!this.optionsChanged && this.editor) { 58 | optionsBefore = this.editor.options; 59 | } 60 | 61 | if (!this.options.onChangeJSON && this.jsonChange) { 62 | this.options.onChangeJSON = this.onChangeJSON.bind(this); 63 | } 64 | if (!this.options.onChange && this.change) { 65 | this.options.onChange = this.onChange.bind(this); 66 | } 67 | const optionsCopy = Object.assign({}, optionsBefore); 68 | 69 | // expandAll is an option only supported by ang-jsoneditor and not by the the original jsoneditor. 70 | delete optionsCopy.expandAll; 71 | if (this.debug) { 72 | console.log(optionsCopy, this._data); 73 | } 74 | if (!this.jsonEditorContainer.nativeElement) { 75 | console.error(`Can't find the ElementRef reference for jsoneditor)`); 76 | } 77 | 78 | if (optionsCopy.mode === 'text' || optionsCopy.mode === 'code') { 79 | optionsCopy.onChangeJSON = null; 80 | } 81 | this.editor = new editor(this.jsonEditorContainer.nativeElement, optionsCopy, this._data); 82 | 83 | if (this.options.expandAll) { 84 | this.editor.expandAll(); 85 | } 86 | } 87 | 88 | ngOnDestroy() { 89 | this.destroy(); 90 | } 91 | 92 | 93 | /** 94 | * ngModel 95 | * ControlValueAccessor 96 | */ 97 | 98 | // ControlValueAccessor implementation 99 | writeValue(value: any) { 100 | this.data = value; 101 | } 102 | 103 | // Implemented as part of ControlValueAccessor 104 | registerOnChange(fn) { 105 | this.onChangeModel = fn; 106 | } 107 | 108 | // Implemented as part of ControlValueAccessor. 109 | registerOnTouched(fn) { 110 | this.onTouched = fn; 111 | } 112 | 113 | // Implemented as part of ControlValueAccessor. 114 | setDisabledState(isDisabled: boolean): void { 115 | this.disabled = isDisabled; 116 | } 117 | 118 | // Implemented as part of ControlValueAccessor. 119 | private onTouched = () => { 120 | }; 121 | 122 | // Implemented as part of ControlValueAccessor. 123 | private onChangeModel = (e) => { 124 | }; 125 | 126 | public onChange(e) { 127 | if (this.editor) { 128 | try { 129 | const json = this.editor.get(); 130 | this.onChangeModel(json); 131 | this.change.emit(json); 132 | } catch (e) { 133 | if (this.debug) { 134 | console.log(e); 135 | } 136 | } 137 | } 138 | } 139 | 140 | public onChangeJSON(e) { 141 | if (this.editor) { 142 | try { 143 | this.jsonChange.emit(this.editor.get()); 144 | } catch (e) { 145 | if (this.debug) { 146 | console.log(e); 147 | } 148 | } 149 | } 150 | } 151 | 152 | 153 | /** 154 | * JSON EDITOR FUNCTIONS 155 | */ 156 | 157 | public collapseAll() { 158 | this.editor.collapseAll(); 159 | } 160 | 161 | public expandAll() { 162 | this.editor.expandAll(); 163 | } 164 | 165 | public focus() { 166 | this.editor.focus(); 167 | } 168 | 169 | public get(): JSON { 170 | return this.editor.get(); 171 | } 172 | 173 | public getMode(): JsonEditorMode { 174 | return this.editor.getMode() as JsonEditorMode; 175 | } 176 | 177 | public getName(): string { 178 | return this.editor.getName(); 179 | } 180 | 181 | public getText(): string { 182 | return this.editor.getText(); 183 | } 184 | 185 | public set(json: JSON) { 186 | this.editor.set(json); 187 | } 188 | 189 | public setMode(mode: JsonEditorMode) { 190 | this.editor.setMode(mode); 191 | } 192 | 193 | public setName(name: string) { 194 | this.editor.setName(name); 195 | } 196 | 197 | public setSelection(start, end) { 198 | this.editor.setSelection(start, end); 199 | } 200 | 201 | public getSelection(): any { 202 | return this.editor.getSelection(); 203 | } 204 | 205 | public getValidateSchema(): any { 206 | return this.editor.validateSchema; 207 | } 208 | 209 | public setSchema(schema: any, schemaRefs: any) { 210 | this.editor.setSchema(schema, schemaRefs); 211 | } 212 | 213 | public search(query: string) { 214 | this.editor.search(query); 215 | } 216 | 217 | public setOptions(newOptions: JsonEditorOptions) { 218 | if (this.editor) { 219 | this.editor.destroy(); 220 | } 221 | this.optionsChanged = true; 222 | this.options = newOptions; 223 | this.ngOnInit(); 224 | } 225 | 226 | public update(json: JSON) { 227 | this.editor.update(json); 228 | } 229 | 230 | public destroy() { 231 | this.editor.destroy(); 232 | } 233 | 234 | public getEditor(){ 235 | return this.editor; 236 | } 237 | 238 | public isValidJson() { 239 | try { 240 | JSON.parse(this.getText()); 241 | return true; 242 | } catch (e) { 243 | return false; 244 | } 245 | } 246 | } 247 | 248 | export { JsonEditorOptions, JsonEditorMode, JsonEditorTreeNode, IError }; 249 | -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "dev": { 7 | "root": "", 8 | "sourceRoot": "src", 9 | "projectType": "application", 10 | "architect": { 11 | "build": { 12 | "builder": "@angular-devkit/build-angular:browser", 13 | "options": { 14 | "outputPath": "dist/app", 15 | "index": "src/index.html", 16 | "main": "src/main.ts", 17 | "tsConfig": "src/tsconfig.app.json", 18 | "polyfills": "src/polyfills.ts", 19 | "assets": [ 20 | "src/assets", 21 | "src/favicon.ico" 22 | ], 23 | "styles": [ 24 | "src/styles.css" 25 | ], 26 | "scripts": [] 27 | }, 28 | "configurations": { 29 | "production": { 30 | "optimization": true, 31 | "outputHashing": "all", 32 | "sourceMap": false, 33 | "extractCss": true, 34 | "namedChunks": false, 35 | "aot": true, 36 | "extractLicenses": true, 37 | "vendorChunk": false, 38 | "buildOptimizer": true, 39 | "fileReplacements": [ 40 | { 41 | "replace": "src/environments/environment.ts", 42 | "with": "src/environments/environment.prod.ts" 43 | } 44 | ] 45 | } 46 | } 47 | }, 48 | "serve": { 49 | "builder": "@angular-devkit/build-angular:dev-server", 50 | "options": { 51 | "browserTarget": "dev:build" 52 | }, 53 | "configurations": { 54 | "production": { 55 | "browserTarget": "dev:build:production" 56 | } 57 | } 58 | }, 59 | "extract-i18n": { 60 | "builder": "@angular-devkit/build-angular:extract-i18n", 61 | "options": { 62 | "browserTarget": "dev:build" 63 | } 64 | }, 65 | "test": { 66 | "builder": "@angular-devkit/build-angular:karma", 67 | "options": { 68 | "main": "src/test.ts", 69 | "karmaConfig": "./karma.conf.js", 70 | "polyfills": "src/polyfills.ts", 71 | "tsConfig": "src/tsconfig.spec.json", 72 | "scripts": [], 73 | "styles": [ 74 | "src/styles.css" 75 | ], 76 | "assets": [ 77 | "src/assets", 78 | "src/favicon.ico" 79 | ] 80 | } 81 | }, 82 | "lint": { 83 | "builder": "@angular-devkit/build-angular:tslint", 84 | "options": { 85 | "tsConfig": [ 86 | "src/tsconfig.app.json", 87 | "src/tsconfig.spec.json" 88 | ], 89 | "exclude": [] 90 | } 91 | } 92 | } 93 | }, 94 | "dev-e2e": { 95 | "root": "", 96 | "sourceRoot": "", 97 | "projectType": "application", 98 | "architect": { 99 | "e2e": { 100 | "builder": "@angular-devkit/build-angular:protractor", 101 | "options": { 102 | "protractorConfig": "./protractor.conf.js", 103 | "devServerTarget": "dev:serve" 104 | } 105 | }, 106 | "lint": { 107 | "builder": "@angular-devkit/build-angular:tslint", 108 | "options": { 109 | "tsConfig": [ 110 | "e2e/tsconfig.e2e.json" 111 | ], 112 | "exclude": [] 113 | } 114 | } 115 | } 116 | }, 117 | "packages": { 118 | "root": "", 119 | "sourceRoot": "src", 120 | "projectType": "application", 121 | "architect": { 122 | "build": { 123 | "builder": "@angular-devkit/build-angular:browser", 124 | "options": { 125 | "outputPath": "dist/app", 126 | "index": "src/index.html", 127 | "main": "src/main.ts", 128 | "tsConfig": "src/tsconfig.packages.json", 129 | "polyfills": "src/polyfills.ts", 130 | "assets": [ 131 | "src/assets", 132 | "src/favicon.ico" 133 | ], 134 | "styles": [ 135 | "src/styles.css" 136 | ], 137 | "scripts": [] 138 | }, 139 | "configurations": { 140 | "production": { 141 | "optimization": true, 142 | "outputHashing": "all", 143 | "sourceMap": false, 144 | "extractCss": true, 145 | "namedChunks": false, 146 | "aot": true, 147 | "extractLicenses": true, 148 | "vendorChunk": false, 149 | "buildOptimizer": true, 150 | "fileReplacements": [ 151 | { 152 | "replace": "src/environments/environment.ts", 153 | "with": "src/environments/environment.prod.ts" 154 | } 155 | ] 156 | } 157 | } 158 | }, 159 | "serve": { 160 | "builder": "@angular-devkit/build-angular:dev-server", 161 | "options": { 162 | "browserTarget": "packages:build" 163 | }, 164 | "configurations": { 165 | "production": { 166 | "browserTarget": "packages:build:production" 167 | } 168 | } 169 | }, 170 | "extract-i18n": { 171 | "builder": "@angular-devkit/build-angular:extract-i18n", 172 | "options": { 173 | "browserTarget": "packages:build" 174 | } 175 | }, 176 | "test": { 177 | "builder": "@angular-devkit/build-angular:karma", 178 | "options": { 179 | "main": "src/test.ts", 180 | "karmaConfig": "./karma.conf.js", 181 | "polyfills": "src/polyfills.ts", 182 | "tsConfig": "src/tsconfig.spec.json", 183 | "scripts": [], 184 | "styles": [ 185 | "src/styles.css" 186 | ], 187 | "assets": [ 188 | "src/assets", 189 | "src/favicon.ico" 190 | ] 191 | } 192 | }, 193 | "lint": { 194 | "builder": "@angular-devkit/build-angular:tslint", 195 | "options": { 196 | "tsConfig": [ 197 | "src/tsconfig.app.json", 198 | "src/tsconfig.spec.json" 199 | ], 200 | "exclude": [] 201 | } 202 | } 203 | } 204 | } 205 | }, 206 | "defaultProject": "dev", 207 | "schematics": { 208 | "@schematics/angular:component": { 209 | "prefix": "app", 210 | "styleext": "css" 211 | }, 212 | "@schematics/angular:directive": { 213 | "prefix": "app" 214 | } 215 | } 216 | } --------------------------------------------------------------------------------