ees-jsoneditor 2.0.0

package/projects/ees-jsoneditor/README.md

@@ -0,0 +1,200 @@
+# Angular Json Editor
+
+
+Angular Json Editor (wrapper for [jsoneditor](https://github.com/josdejong/jsoneditor)). View/Edit Json file with formatting.
+
+[StackBlitz template](https://stackblitz.com/edit/ees-jsoneditor)
+
+Working with latest Angular 20. 
+
+![Demo Image](/src/assets/printDemo.png)
+
+## Installation
+
+To install this library with npm, run below command:
+
+$ npm install --save jsoneditor ees-jsoneditor
+
+
+Example:
+
+```html
+<json-editor [options]="editorOptions" [data]="data" (change)="getData($event)"></json-editor>
+```
+
+## Usage
+
+### Configuration
+
+First, Import Angular  JsonEditor module in root
+
+```ts
+import { NgJsonEditorModule } from 'ees-jsoneditor' 
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    ....,
+    NgJsonEditorModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
+```
+Then setup your component models as below :
+
+```ts
+import { Component, ViewChild } from '@angular/core';
+import { InfinityJsonEditorComponent, JsonEditorOptions } from 'ees-jsoneditor';
+
+@Component({
+  selector: 'app-root',
+  template: '<json-editor [options]="editorOptions" [data]="data"></json-editor>',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  public editorOptions: JsonEditorOptions;
+  public data: any;
+  @ViewChild(InfinityJsonEditorComponent, { static: false }) editor: InfinityJsonEditorComponent;
+
+  constructor() { 
+    this.editorOptions = new JsonEditorOptions()
+    this.editorOptions.modes = ['code', 'text', 'tree', 'view']; // set all allowed modes
+    //this.options.mode = 'code'; //set only one mode
+      
+      this.data = {"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"}]}]}]}
+  }
+
+}
+```
+Note : For better styling, add below line to your main style.css file
+
+```js
+@import "~jsoneditor/dist/jsoneditor.min.css";
+```
+
+
+### Forms
+
+Build it integrated with ReactiveForms:
+
+```ts 
+this.form = this.fb.group({
+  myinput: [this.data]
+});
+```
+```html
+<form  [formGroup]="form" (submit)="submit()">
+    <json-editor [options]="editorOptions2" formControlName="myinput">
+    </json-editor>
+</form>
+```
+
+### Extra Features
+
+Besides all the 
+[configuration options](https://github.com/josdejong/jsoneditor/blob/master/docs/api.md) 
+from the original jsoneditor, Angular Json Editor supports one additional option:
+
+_expandAll_ - to automatically expand all nodes upon json loaded with the _data_ input. 
+
+# Troubleshoot
+
+If you have issue with the height of the component, you can try one of those solutions:
+
+When you import CSS:
+
+```css
+@import "~jsoneditor/dist/jsoneditor.min.css";
+textarea.jsoneditor-text{min-height:350px;}
+```
+
+Or Customizing the CSS:
+
+```css
+:host ::ng-deep json-editor,
+:host ::ng-deep json-editor .jsoneditor,
+:host ::ng-deep json-editor > div,
+:host ::ng-deep json-editor jsoneditor-outer {
+  height: 500px;
+}
+```
+
+Or  as a inner style in component:
+
+```html
+<json-editor class="col-md-12" #editorExample style="min-height: 300px;" [options]="editorOptionsData" [data]="dataStructure"></json-editor>
+```
+
+For code view you can change the height using this example:
+```css
+.ace_editor.ace-jsoneditor {
+  min-height: 500px;
+}
+```
+
+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.
+
+```html
+<json-editor [debug]="true" [options]="editorOptionsData" [data]="dataStructure"></json-editor>
+```
+
+## JSONOptions missing params
+
+If you find youself trying to use an custom option that is not mapped here, you can do:
+
+```ts
+let editorOptions: JsonEditorOptions = new JsonEditorOptions(); (<any>this.editorOptions).templates = [{menu options objects as in json editor documentation}]
+```
+
+See the [issue](https://github.com/yasir-nazir/ees-jsoneditor/issues/57)
+
+## Internet Explorer 
+
+If you want to support IE, please follow this guide:
+* https://github.com/yasir-nazir/ees-jsoneditor/issues/44#issuecomment-508650610
+
+## Multiple editors
+
+To use multiple jsoneditors in your view you cannot use the same editor options.
+
+You should have something like: 
+
+```html
+<div *ngFor="let prd of data.products" class="w-100-p p-24" >
+  <json-editor [options]="makeOptions()" [data]="prd" (change)="showJson($event)"></json-editor>
+</div>
+```
+
+```ts
+makeOptions = () => {
+  const options = new JsonEditorOptions();
+  options.modes = ['code', 'text', 'tree', 'view'];
+  return options;
+}
+```
+
+# Demo
+
+Demo component files are included in Git Project.
+
+Demo Project with a lot of different implementations (ngInit, change event and others):
+[https://github.com/yasir-nazir/ees-jsoneditor/tree/master/src/app/demo)
+
+When publishing it to npm, look over this docs: https://docs.npmjs.com/misc/developers
+
+# Collaborate
+
+Fork, clone this repo and install dependencies. 
+This project just works with webpack 4 (dont change to 5):
+
+```sh
+npm i -g rimraf
+npm i
+```
+
+# License
+MIT(./LICENSE)

package/projects/ees-jsoneditor/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ees-jsoneditor",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/projects/ees-jsoneditor/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "ees-jsoneditor",
+  "version": "4.0.1",
+  "license": "MIT",
+  "homepage": "hhttps://github.com/yasir-nazir/ees-jsoneditor",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yasir-nazir/ees-jsoneditor.git"
+  },
+  "author": "Yasir Nazir <eesystem2010@gmail.com>",
+  "keywords": [
+    "angular",
+    "jsoneditor",
+    "ees-jsoneditor",
+    "ng-jsoneditor",
+    "angular"
+  ],
+  "peerDependencies": {
+    "@angular/common": "^20.3.0",
+    "@angular/core": "^20.3.0",
+    "jsoneditor": "*"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

package/projects/ees-jsoneditor/src/lib/jsoneditor.component.spec.ts

@@ -0,0 +1,25 @@
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InfinityJsonEditorComponent } from './jsoneditor.component';
+
+describe('InfinityJsonEditorComponent', () => {
+  let component: InfinityJsonEditorComponent;
+  let fixture: ComponentFixture<InfinityJsonEditorComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ InfinityJsonEditorComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InfinityJsonEditorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/ees-jsoneditor/src/lib/jsoneditor.component.ts

@@ -0,0 +1,269 @@
+/* eslint-disable @typescript-eslint/ban-types */
+/* eslint-disable @angular-eslint/no-input-rename */
+/* eslint-disable @angular-eslint/no-output-native */
+
+import JSONEditor from 'jsoneditor';
+
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  ViewChild,
+  forwardRef
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { IError, JsonEditorMode, JsonEditorOptions, JsonEditorTreeNode } from './jsoneditoroptions';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'json-editor',
+  standalone: true,
+  template: `<div [id]="id" #jsonEditorContainer></div>`,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => InfinityJsonEditorComponent),
+      multi: true
+    }
+  ],
+  preserveWhitespaces: false,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+
+export class InfinityJsonEditorComponent implements ControlValueAccessor, OnInit, OnDestroy {
+  @ViewChild('jsonEditorContainer', { static: true }) jsonEditorContainer: ElementRef;
+  @Input() options: JsonEditorOptions = new JsonEditorOptions();
+  @Output()
+  change: EventEmitter<any> = new EventEmitter<any>();
+  @Output()
+  jsonChange: EventEmitter<any> = new EventEmitter<any>();
+  @Input() debug = false;
+  public optionsChanged = false;
+
+  disabled = false;
+  isFocused = false;
+
+  public id = 'angjsoneditor' + Math.floor(Math.random() * 1000000);
+  private _data: Object = {};
+  private editor: JSONEditor;
+
+  constructor() { }
+
+  @Input('data')
+  set data(value: Object) {
+    this._data = value;
+    if (this.editor) {
+      this.editor.destroy();
+      this.ngOnInit();
+    }
+  }
+
+  ngOnInit() {
+    let optionsBefore = this.options;
+    if (!this.optionsChanged && this.editor) {
+      //TODO: check if this is needed
+      optionsBefore = (this.editor as any).options;
+    }
+
+    if (!this.options.onChangeJSON && this.jsonChange) {
+      this.options.onChangeJSON = this.onChangeJSON;
+    }
+    if (!this.options.onChange && this.change) {
+      this.options.onChange = this.onChange;
+    }
+    const optionsCopy = Object.assign({}, optionsBefore);
+
+    // expandAll is an option only supported by ees-jsoneditor and not by the the original jsoneditor.
+    delete optionsCopy.expandAll;
+    if (this.debug) {
+      console.log(optionsCopy, this._data);
+    }
+    if (!this.jsonEditorContainer.nativeElement) {
+      console.error(`Can't find the ElementRef reference for jsoneditor)`);
+    }
+
+    if (
+        optionsCopy.mode === 'text' || optionsCopy.mode === 'code' ||
+        (
+          optionsCopy.modes &&
+          (optionsCopy.modes.indexOf('text') !== -1 || optionsCopy.modes.indexOf('code') !== -1)
+        )
+      ) {
+      optionsCopy.onChangeJSON = undefined;
+    }
+    this.editor = new JSONEditor(this.jsonEditorContainer.nativeElement, optionsCopy as any, this._data);
+
+    if (this.options.expandAll) {
+      this.editor.expandAll();
+    }
+  }
+
+  ngOnDestroy() {
+    this.destroy();
+  }
+
+
+  /**
+   * ngModel
+   * ControlValueAccessor
+   */
+
+  // ControlValueAccessor implementation
+  writeValue(value: any) {
+    this.data = value;
+  }
+
+  // Implemented as part of ControlValueAccessor
+  registerOnChange(fn: any) {
+    this.onChangeModel = fn;
+  }
+
+  // Implemented as part of ControlValueAccessor.
+  registerOnTouched(fn: any) {
+    this.onTouched = fn;
+  }
+
+  // Implemented as part of ControlValueAccessor.
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  public onChange = () => {
+    if (this.editor) {
+      try {
+        const json = this.editor.get();
+        this.onChangeModel(json);
+        this.change.emit(json);
+      } catch (error) {
+        if (this.debug) {
+          console.log(error);
+        }
+      }
+    }
+  }
+
+  public onChangeJSON = () => {
+    if (this.editor) {
+      try {
+        this.jsonChange.emit(this.editor.get());
+      } catch (error) {
+        if (this.debug) {
+          console.log(error);
+        }
+      }
+    }
+  }
+
+
+  /**
+   * JSON EDITOR FUNCTIONS
+   */
+
+  public collapseAll() {
+    this.editor.collapseAll();
+  }
+
+  public expandAll() {
+    this.editor.expandAll();
+  }
+
+  public focus() {
+    this.editor.focus();
+  }
+
+  public get(): JSON {
+    return this.editor.get();
+  }
+
+  public getMode(): JsonEditorMode {
+    return this.editor.getMode() as JsonEditorMode;
+  }
+
+  public getName(): string {
+    return this.editor.getName()!;
+  }
+
+  public getText(): string {
+    return this.editor.getText();
+  }
+
+  public set(json: JSON) {
+    this.editor.set(json);
+  }
+
+  public setMode(mode: JsonEditorMode) {
+    this.editor.setMode(mode);
+  }
+
+  public setName(name: string) {
+    this.editor.setName(name);
+  }
+
+  public setSelection(start: any, end: any) {
+    this.editor.setSelection(start, end);
+  }
+
+  public getSelection(): any {
+    return this.editor.getSelection();
+  }
+
+  public getValidateSchema(): any {
+    //TODO: check if this is needed
+    return (this.editor as any).validateSchema;
+  }
+
+  public setSchema(schema: any, schemaRefs: any) {
+    this.editor.setSchema(schema, schemaRefs);
+  }
+
+  public search(query: string) {
+    //TODO: check if this is needed
+    (this.editor as any).search(query);
+  }
+
+  public setOptions(newOptions: JsonEditorOptions) {
+    if (this.editor) {
+      this.editor.destroy();
+    }
+    this.optionsChanged = true;
+    this.options = newOptions;
+    this.ngOnInit();
+  }
+
+  public update(json: JSON) {
+    this.editor.update(json);
+  }
+
+  public destroy() {
+    this.editor.destroy();
+  }
+
+  public getEditor(){
+    //TODO: made it any because of the missing type definition
+    return this.editor as any;
+  }
+
+  public isValidJson() {
+    try {
+      JSON.parse(this.getText());
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+
+  // Implemented as part of ControlValueAccessor.
+  private onTouched = () => {
+  };
+
+  // Implemented as part of ControlValueAccessor.
+  private onChangeModel = (e: any) => {
+  };
+}
+
+export { JsonEditorOptions, JsonEditorMode, JsonEditorTreeNode, IError };

package/projects/ees-jsoneditor/src/lib/jsoneditoroptions.ts

@@ -0,0 +1,166 @@
+/* eslint-disable @typescript-eslint/ban-types */
+
+export type JsonEditorMode = 'tree' | 'view' | 'form' | 'code' | 'text';
+
+export interface JsonEditorTreeNode {
+  field: String,
+  value: String,
+  path: String[]
+}
+
+export interface IError {
+  path: (string | number)[];
+  message: string;
+}
+
+export class JsonEditorOptions {
+  public ace: any;
+  public ajv: Object;
+
+
+  /**
+   *   {function} onChange  Callback method, triggered
+  on change of contents.
+  Does not pass the contents itself.
+  See also `onChangeJSON` and
+  `onChangeText`.
+   */
+  public onChange: () => void;
+
+  /**
+   *   // {function} onChangeJSON  Callback method, triggered
+//     in modes on change of contents,
+//     passing the changed contents
+//     as JSON.
+//     Only applicable for modes
+//     'tree', 'view', and 'form'.
+   */
+  public onChangeJSON?: () => void;
+
+
+  public onNodeName: () => void;
+  public onCreateMenu: (items: Array<any>, node: object) => Array<any>;
+  public onColorPicker: () => void;
+
+  /**
+  // {function} onChangeText  Callback method, triggered
+  //     in modes on change of contents,
+  //     passing the changed contents
+  //     as stringified JSON.
+   */
+  public onChangeText: (jsonstr: string) => void;
+
+
+  /**
+   *   {function} onSelectionChange Callback method,
+  triggered on node selection change
+  Only applicable for modes
+  'tree', 'view', and 'form'
+   */
+  public onSelectionChange: () => void;
+
+  /**
+   *     {function} onTextSelectionChange Callback method,
+  triggered on text selection change
+  Only applicable for modes
+   */
+  public onTextSelectionChange: () => void;
+
+
+  /**
+   *   // {function} onEvent Callback method, triggered
+    // when an event occurs in
+    // a JSON field or value.
+    // Only applicable for
+    // modes 'form', 'tree' and
+    // 'view'
+   */
+  public onEvent: () => void;
+
+  /**
+   * // *   {function} onFocus  Callback method, triggered
+//  when the editor comes into focus,
+//  passing an object {type, target},
+//  Applicable for all modes
+   */
+  public onFocus: () => void;
+
+  // *   {function} onBlur   Callback method, triggered
+  //  when the editor goes out of focus,
+  //  passing an object {type, target},
+  //  Applicable for all modes
+  public onBlur: () => void;
+
+  /**
+   *  // *   {function} onClassName Callback method, triggered
+// when a Node DOM is rendered. Function returns
+// a css class name to be set on a node.
+// Only applicable for
+// modes 'form', 'tree' and
+// 'view'
+   */
+  public onClassName: (node: JsonEditorTreeNode) => void;
+
+  public onEditable: (node: JsonEditorTreeNode | {}) => boolean | { field: boolean, value: boolean };
+
+  /**
+   *   {function} onError   Callback method, triggered
+  when an error occurs
+   */
+  public onError: (error: any) => void;
+  public onModeChange: (newMode: JsonEditorMode, oldMode: JsonEditorMode) => void;
+  public onValidate: (json: Object) => IError[];
+  public onValidationError: (errors: object[]) => void;
+
+  public enableSort: boolean;
+  public enableTransform: boolean;
+  public escapeUnicode: boolean;
+  public expandAll?: boolean;
+  public sortObjectKeys: boolean;
+  public history: boolean;
+  public mode: JsonEditorMode;
+  public modes: JsonEditorMode[];
+  public name: String;
+  public schema: Object;
+  public search: boolean;
+  public indentation: Number;
+  public templates: Object;
+  public theme: Number;
+  public language: String;
+  public languages: Object;
+  public limitDragging: boolean;
+
+  /**
+   * Adds main menu bar - Contains format, sort, transform, search etc. functionality. True
+   * by default. Applicable in all types of mode.
+   */
+  public mainMenuBar: boolean;
+
+  /**
+   * Adds navigation bar to the menu - the navigation bar visualize the current position on
+   * the tree structure as well as allows breadcrumbs navigation.
+   * True by default.
+   * Only applicable when mode is 'tree', 'form' or 'view'.
+   */
+  public navigationBar: boolean;
+
+  /**
+   * Adds status bar to the bottom of the editor - the status bar shows the cursor position
+   * and a count of the selected characters.
+   * True by default.
+   * Only applicable when mode is 'code' or 'text'.
+   */
+  public statusBar: boolean;
+
+  constructor() {
+    this.enableSort = true;
+    this.enableTransform = true;
+    this.escapeUnicode = false;
+    this.expandAll = false;
+    this.sortObjectKeys = false;
+    this.history = true;
+    this.mode = 'tree';
+    this.search = true;
+    this.indentation = 2;
+  }
+}

package/projects/ees-jsoneditor/src/public-api.ts

@@ -0,0 +1,6 @@
+/*
+ * Public API Surface of my-lib
+ */
+
+export * from './lib/jsoneditor.component';
+export * from './lib/jsoneditoroptions';