schema-based-json-editor - npm Package Compare versions

Comparing version 3.1.0 to 3.2.0

dist/angular.d.ts

@@ -0,4 +1,7 @@
+/// <reference types="dragula" />
+/// <reference types="highlight.js" />
 /// <reference types="lodash" />
 import { EventEmitter } from "@angular/core";
 import * as common from "./common";
+import { hljs, dragula } from "./lib";
 export declare class JSONEditorComponent {
@@ -17,5 +20,10 @@ schema: common.Schema;
     readonly?: boolean;
+    dragula?: typeof dragula;
+    markdownit?: any;
+    hljs?: typeof hljs;
+    forceHttps?: boolean;
     themeObject: common.Theme;
     localeObject: common.Locale;
     iconObject: common.Icon;
+    md: any;
     updateValueFunction: ((value: {
@@ -22,0 +30,0 @@ value: string | number | boolean | any[] | {

dist/angular.js

@@ -16,2 +16,3 @@ "use strict";
         this.iconObject = common.getIcon(this.icon, this.localeObject);
+        this.md = common.initializeMarkdown(this.markdownit, this.hljs, this.forceHttps);
     };
@@ -39,6 +40,18 @@ __decorate([
     ], JSONEditorComponent.prototype, "readonly", void 0);
+    __decorate([
+        core_1.Input()
+    ], JSONEditorComponent.prototype, "dragula", void 0);
+    __decorate([
+        core_1.Input()
+    ], JSONEditorComponent.prototype, "markdownit", void 0);
+    __decorate([
+        core_1.Input()
+    ], JSONEditorComponent.prototype, "hljs", void 0);
+    __decorate([
+        core_1.Input()
+    ], JSONEditorComponent.prototype, "forceHttps", void 0);
     JSONEditorComponent = __decorate([
         core_1.Component({
             selector: "json-editor",
-            template: "\n    <object-editor *ngIf=\"schema.type === 'object'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [theme]=\"themeObject\"\n        [locale]=\"localeObject\"\n        [icon]=\"iconObject\"\n        [required]=\"true\"\n        (updateValue)=\"updateValueFunction($event)\">\n    </object-editor>\n    <array-editor *ngIf=\"schema.type === 'array'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [theme]=\"themeObject\"\n        [locale]=\"localeObject\"\n        [icon]=\"iconObject\"\n        [required]=\"true\"\n        (updateValue)=\"updateValueFunction($event)\">\n    </array-editor>\n    <number-editor *ngIf=\"schema.type === 'number' || schema.type === 'integer'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [theme]=\"themeObject\"\n        [locale]=\"localeObject\"\n        [icon]=\"iconObject\"\n        [required]=\"true\"\n        (updateValue)=\"updateValueFunction($event)\">\n    </number-editor>\n    <boolean-editor *ngIf=\"schema.type === 'boolean'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [theme]=\"themeObject\"\n        [locale]=\"localeObject\"\n        [icon]=\"iconObject\"\n        [required]=\"true\"\n        (updateValue)=\"updateValueFunction($event)\">\n    </boolean-editor>\n    <null-editor *ngIf=\"schema.type === 'null'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [theme]=\"themeObject\"\n        [locale]=\"localeObject\"\n        [icon]=\"iconObject\"\n        [required]=\"true\"\n        (updateValue)=\"updateValueFunction($event)\">\n    </null-editor>\n    <string-editor *ngIf=\"schema.type === 'string'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [theme]=\"themeObject\"\n        [locale]=\"localeObject\"\n        [icon]=\"iconObject\"\n        [required]=\"true\"\n        (updateValue)=\"updateValueFunction($event)\">\n    </string-editor>\n    ",
+            template: "\n    <object-editor *ngIf=\"schema.type === 'object'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [theme]=\"themeObject\"\n        [locale]=\"localeObject\"\n        [icon]=\"iconObject\"\n        [required]=\"true\"\n        (updateValue)=\"updateValueFunction($event)\"\n        [dragula]=\"dragula\"\n        [md]=\"md\"\n        [hljs]=\"hljs\"\n        [forceHttps]=\"forceHttps\">\n    </object-editor>\n    <array-editor *ngIf=\"schema.type === 'array'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [theme]=\"themeObject\"\n        [locale]=\"localeObject\"\n        [icon]=\"iconObject\"\n        [required]=\"true\"\n        (updateValue)=\"updateValueFunction($event)\"\n        [dragula]=\"dragula\"\n        [md]=\"md\"\n        [hljs]=\"hljs\"\n        [forceHttps]=\"forceHttps\">\n    </array-editor>\n    <number-editor *ngIf=\"schema.type === 'number' || schema.type === 'integer'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [theme]=\"themeObject\"\n        [locale]=\"localeObject\"\n        [icon]=\"iconObject\"\n        [required]=\"true\"\n        (updateValue)=\"updateValueFunction($event)\">\n    </number-editor>\n    <boolean-editor *ngIf=\"schema.type === 'boolean'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [theme]=\"themeObject\"\n        [locale]=\"localeObject\"\n        [icon]=\"iconObject\"\n        [required]=\"true\"\n        (updateValue)=\"updateValueFunction($event)\">\n    </boolean-editor>\n    <null-editor *ngIf=\"schema.type === 'null'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [theme]=\"themeObject\"\n        [locale]=\"localeObject\"\n        [icon]=\"iconObject\"\n        [required]=\"true\"\n        (updateValue)=\"updateValueFunction($event)\">\n    </null-editor>\n    <string-editor *ngIf=\"schema.type === 'string'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [theme]=\"themeObject\"\n        [locale]=\"localeObject\"\n        [icon]=\"iconObject\"\n        [required]=\"true\"\n        (updateValue)=\"updateValueFunction($event)\"\n        [dragula]=\"dragula\"\n        [md]=\"md\"\n        [hljs]=\"hljs\"\n        [forceHttps]=\"forceHttps\">\n    </string-editor>\n    ",
         })
@@ -45,0 +58,0 @@ ], JSONEditorComponent);

dist/angular/array-editor.component.d.ts

 /// <reference types="dragula" />
+/// <reference types="highlight.js" />
 import { EventEmitter, ElementRef } from "@angular/core";
 import * as common from "../common";
-import * as dragula from "dragula";
+import { hljs, dragula } from "../lib";
 export declare class ArrayEditorComponent {
@@ -20,2 +21,6 @@ schema: common.ArraySchema;
     hasDeleteButton: boolean;
+    dragula?: typeof dragula;
+    md?: any;
+    hljs?: typeof hljs;
+    forceHttps?: boolean;
     drakContainer: ElementRef;
@@ -25,3 +30,3 @@ renderSwitch: number;
     value?: common.ValueType[];
-    drak: dragula.Drake;
+    drak?: dragula.Drake;
     errorMessage: string;
@@ -28,0 +33,0 @@ buttonGroupStyleString: string;

dist/angular/array-editor.component.js

 "use strict";
 var core_1 = require("@angular/core");
 var common = require("../common");
-var dragula = require("dragula");
 var ArrayEditorComponent = (function () {
@@ -38,5 +37,5 @@ function ArrayEditorComponent() {
         var _this = this;
-        if (this.drakContainer) {
+        if (this.drakContainer && this.dragula) {
             var container = this.drakContainer.nativeElement;
-            this.drak = dragula([container]);
+            this.drak = this.dragula([container]);
             this.drak.on("drop", function (el, target, source, sibling) {
@@ -113,2 +112,14 @@ if (_this.value) {
     __decorate([
+        core_1.Input()
+    ], ArrayEditorComponent.prototype, "dragula", void 0);
+    __decorate([
+        core_1.Input()
+    ], ArrayEditorComponent.prototype, "md", void 0);
+    __decorate([
+        core_1.Input()
+    ], ArrayEditorComponent.prototype, "hljs", void 0);
+    __decorate([
+        core_1.Input()
+    ], ArrayEditorComponent.prototype, "forceHttps", void 0);
+    __decorate([
         core_1.ViewChild("drakContainer")
@@ -119,3 +130,3 @@ ], ArrayEditorComponent.prototype, "drakContainer", void 0);
             selector: "array-editor",
-            template: "\n    <div [class]=\"errorMessage ? theme.errorRow : theme.row\">\n        <h3>\n            {{title || schema.title}}\n            <div [class]=\"theme.buttonGroup\" [style]=\"buttonGroupStyleString\">\n                <button [class]=\"theme.button\" (click)=\"collapseOrExpand()\">\n                    <icon [icon]=\"icon\" [text]=\"collapsed ? icon.expand : icon.collapse\"></icon>\n                </button>\n                <button *ngIf=\"!readonly && value !== undefined\" [class]=\"theme.button\" (click)=\"addItem()\">\n                    <icon [icon]=\"icon\" [text]=\"icon.add\"></icon>\n                </button>\n                <button *ngIf=\"hasDeleteButtonFunction()\" [class]=\"theme.button\" (click)=\"onDelete.emit()\">\n                    <icon [icon]=\"icon\" [text]=\"icon.delete\"></icon>\n                </button>\n            </div>\n        </h3>\n        <p [class]=\"theme.help\">{{schema.description}}</p>\n        <div *ngIf=\"!required\" [class]=\"theme.optionalCheckbox\">\n            <label>\n                <input type=\"checkbox\" (change)=\"toggleOptional()\" [checked]=\"value === undefined\" />\n                is undefined\n            </label>\n        </div>\n        <div #drakContainer [class]=\"theme.rowContainer\">\n            <div *ngFor=\"let item of getValue(); let i = index; trackBy:trackByFunction\" [attr.data-index]=\"i\" [class]=\"theme.rowContainer\">\n                <editor [schema]=\"schema.items\"\n                    [title]=\"i\"\n                    [initialValue]=\"value[i]\"\n                    (updateValue)=\"onChange(i, $event)\"\n                    [theme]=\"theme\"\n                    [icon]=\"icon\"\n                    [locale]=\"locale\"\n                    [required]=\"true\"\n                    [readonly]=\"readonly || schema.readonly\"\n                    (onDelete)=\"onDeleteFunction(i)\"\n                    [hasDeleteButton]=\"true\">\n                </editor>\n            </div>\n        </div>\n        <p *ngIf=\"errorMessage\" [class]=\"theme.help\">{{errorMessage}}</p>\n    </div>\n    ",
+            template: "\n    <div [class]=\"errorMessage ? theme.errorRow : theme.row\">\n        <h3>\n            {{title || schema.title}}\n            <div [class]=\"theme.buttonGroup\" [style]=\"buttonGroupStyleString\">\n                <div *ngIf=\"!required && (value === undefined || !schema.readonly)\" [class]=\"theme.optionalCheckbox\">\n                    <label>\n                        <input type=\"checkbox\" (change)=\"toggleOptional()\" [checked]=\"value === undefined\" [disabled]=\"readonly || schema.readonly\" />\n                        is undefined\n                    </label>\n                </div>\n                <button [class]=\"theme.button\" (click)=\"collapseOrExpand()\">\n                    <icon [icon]=\"icon\" [text]=\"collapsed ? icon.expand : icon.collapse\"></icon>\n                </button>\n                <button *ngIf=\"!readonly && value !== undefined\" [class]=\"theme.button\" (click)=\"addItem()\">\n                    <icon [icon]=\"icon\" [text]=\"icon.add\"></icon>\n                </button>\n                <button *ngIf=\"hasDeleteButtonFunction()\" [class]=\"theme.button\" (click)=\"onDelete.emit()\">\n                    <icon [icon]=\"icon\" [text]=\"icon.delete\"></icon>\n                </button>\n            </div>\n        </h3>\n        <p [class]=\"theme.help\">{{schema.description}}</p>\n        <div #drakContainer [class]=\"theme.rowContainer\">\n            <div *ngFor=\"let item of getValue(); let i = index; trackBy:trackByFunction\" [attr.data-index]=\"i\" [class]=\"theme.rowContainer\">\n                <editor [schema]=\"schema.items\"\n                    [title]=\"i\"\n                    [initialValue]=\"value[i]\"\n                    (updateValue)=\"onChange(i, $event)\"\n                    [theme]=\"theme\"\n                    [icon]=\"icon\"\n                    [locale]=\"locale\"\n                    [required]=\"true\"\n                    [readonly]=\"readonly || schema.readonly\"\n                    (onDelete)=\"onDeleteFunction(i)\"\n                    [hasDeleteButton]=\"true\"\n                    [dragula]=\"dragula\"\n                    [md]=\"md\"\n                    [hljs]=\"hljs\"\n                    [forceHttps]=\"forceHttps\">\n                </editor>\n            </div>\n        </div>\n        <p *ngIf=\"errorMessage\" [class]=\"theme.help\">{{errorMessage}}</p>\n    </div>\n    ",
         })
@@ -122,0 +133,0 @@ ], ArrayEditorComponent);

dist/angular/boolean-editor.component.d.ts

@@ -19,5 +19,3 @@ import { EventEmitter } from "@angular/core";
     value?: boolean;
-    buttonGroupStyle: {
-        marginLeft: string;
-    };
+    buttonGroupStyle: string;
     ngOnInit(): void;
@@ -24,0 +22,0 @@ onChange(e: {

dist/angular/boolean-editor.component.js

@@ -8,3 +8,3 @@ "use strict";
         this.onDelete = new core_1.EventEmitter();
-        this.buttonGroupStyle = common.buttonGroupStyle;
+        this.buttonGroupStyle = common.buttonGroupStyleString;
     }
@@ -16,3 +16,3 @@ BooleanEditorComponent.prototype.ngOnInit = function () {
     BooleanEditorComponent.prototype.onChange = function (e) {
-        this.value = e.target.checked;
+        this.value = !this.value;
         this.updateValue.emit({ value: this.value, isValid: true });
@@ -60,3 +60,3 @@ };
             selector: "boolean-editor",
-            template: "\n    <div [class]=\"theme.row\">\n        <label *ngIf=\"title !== undefined && title !== null && title !== ''\" [class]=\"theme.label\">\n            {{title}}\n            <div [class]=\"theme.buttonGroup\" [style]=\"buttonGroupStyle\">\n                <button *ngIf=\"hasDeleteButton\" [class]=\"theme.button\" (click)=\"onDelete.emit()\">\n                    <icon [icon]=\"icon\" [text]=\"icon.delete\"></icon>\n                </button>\n            </div>\n        </label>\n        <div *ngIf=\"!required\" [class]=\"theme.optionalCheckbox\">\n            <label>\n                <input type=\"checkbox\" (change)=\"toggleOptional()\" [checked]=\"value === undefined\" />\n                is undefined\n            </label>\n        </div>\n        <div *ngIf=\"value !== undefined\" [class]=\"theme.optionalCheckbox\">\n            <label>\n                <input type=\"checkbox\"\n                    (change)=\"onChange($event)\"\n                    [checked]=\"value\"\n                    [readOnly]=\"readonly || schema.readonly\" />\n                {{title}}\n            </label>\n        </div>\n        <p [class]=\"theme.help\">{{schema.description}}</p>\n    </div>\n    ",
+            template: "\n    <div [class]=\"theme.row\">\n        <label *ngIf=\"title !== undefined && title !== null && title !== ''\" [class]=\"theme.label\">\n            {{title}}\n            <div [class]=\"theme.buttonGroup\" [style]=\"buttonGroupStyle\">\n                <div *ngIf=\"!required && (value === undefined || !schema.readonly)\" [class]=\"theme.optionalCheckbox\">\n                    <label>\n                        <input type=\"checkbox\" (change)=\"toggleOptional()\" [checked]=\"value === undefined\" [disabled]=\"readonly || schema.readonly\" />\n                        is undefined\n                    </label>\n                </div>\n                <button *ngIf=\"hasDeleteButton\" [class]=\"theme.button\" (click)=\"onDelete.emit()\">\n                    <icon [icon]=\"icon\" [text]=\"icon.delete\"></icon>\n                </button>\n            </div>\n        </label>\n        <div *ngIf=\"value !== undefined\">\n            <div [class]=\"theme.radiobox\">\n                <label>\n                    <input type=\"radio\"\n                        (change)=\"onChange($event)\"\n                        [checked]=\"value\"\n                        [disabled]=\"readonly || schema.readonly\" />\n                    true\n                </label>\n            </div>\n            <div [class]=\"theme.radiobox\">\n                <label>\n                    <input type=\"radio\"\n                        (change)=\"onChange($event)\"\n                        [checked]=\"!value\"\n                        [disabled]=\"readonly || schema.readonly\" />\n                    false\n                </label>\n            </div>\n        </div>\n        <p [class]=\"theme.help\">{{schema.description}}</p>\n    </div>\n    ",
         })
@@ -63,0 +63,0 @@ ], BooleanEditorComponent);

dist/angular/editor.component.d.ts

@@ -0,3 +1,6 @@
+/// <reference types="dragula" />
+/// <reference types="highlight.js" />
 import { EventEmitter } from "@angular/core";
 import * as common from "../common";
+import { hljs, dragula } from "../lib";
 export declare class EditorComponent {
@@ -18,2 +21,6 @@ schema: common.ArraySchema;
     hasDeleteButton: boolean;
+    dragula?: typeof dragula;
+    md?: any;
+    hljs?: typeof hljs;
+    forceHttps?: boolean;
 }

dist/angular/editor.component.js

@@ -41,6 +41,18 @@ "use strict";
     ], EditorComponent.prototype, "hasDeleteButton", void 0);
+    __decorate([
+        core_1.Input()
+    ], EditorComponent.prototype, "dragula", void 0);
+    __decorate([
+        core_1.Input()
+    ], EditorComponent.prototype, "md", void 0);
+    __decorate([
+        core_1.Input()
+    ], EditorComponent.prototype, "hljs", void 0);
+    __decorate([
+        core_1.Input()
+    ], EditorComponent.prototype, "forceHttps", void 0);
     EditorComponent = __decorate([
         core_1.Component({
             selector: "editor",
-            template: "\n    <object-editor *ngIf=\"schema.type === 'object'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [title]=\"title\"\n        [theme]=\"theme\"\n        [locale]=\"locale\"\n        [icon]=\"icon\"\n        [required]=\"required\"\n        (updateValue)=\"updateValue.emit($event)\"\n        (onDelete)=\"onDelete.emit()\"\n        [hasDeleteButton]=\"hasDeleteButton\">\n    </object-editor>\n    <array-editor *ngIf=\"schema.type === 'array'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [title]=\"title\"\n        [theme]=\"theme\"\n        [locale]=\"locale\"\n        [icon]=\"icon\"\n        [required]=\"required\"\n        (updateValue)=\"updateValue.emit($event)\"\n        (onDelete)=\"onDelete.emit()\"\n        [hasDeleteButton]=\"hasDeleteButton\">\n    </array-editor>\n    <number-editor *ngIf=\"schema.type === 'number' || schema.type === 'integer'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [title]=\"title\"\n        [theme]=\"theme\"\n        [locale]=\"locale\"\n        [icon]=\"icon\"\n        [required]=\"required\"\n        (updateValue)=\"updateValue.emit($event)\"\n        (onDelete)=\"onDelete.emit()\"\n        [hasDeleteButton]=\"hasDeleteButton\">\n    </number-editor>\n    <boolean-editor *ngIf=\"schema.type === 'boolean'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [title]=\"title\"\n        [theme]=\"theme\"\n        [locale]=\"locale\"\n        [icon]=\"icon\"\n        [required]=\"required\"\n        (updateValue)=\"updateValue.emit($event)\"\n        (onDelete)=\"onDelete.emit()\"\n        [hasDeleteButton]=\"hasDeleteButton\">\n    </boolean-editor>\n    <null-editor *ngIf=\"schema.type === 'null'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [title]=\"title\"\n        [theme]=\"theme\"\n        [locale]=\"locale\"\n        [icon]=\"icon\"\n        [required]=\"required\"\n        (updateValue)=\"updateValue.emit($event)\"\n        (onDelete)=\"onDelete.emit()\"\n        [hasDeleteButton]=\"hasDeleteButton\">\n    </null-editor>\n    <string-editor *ngIf=\"schema.type === 'string'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [title]=\"title\"\n        [theme]=\"theme\"\n        [locale]=\"locale\"\n        [icon]=\"icon\"\n        [required]=\"required\"\n        (updateValue)=\"updateValue.emit($event)\"\n        (onDelete)=\"onDelete.emit()\"\n        [hasDeleteButton]=\"hasDeleteButton\">\n    </string-editor>\n    ",
+            template: "\n    <object-editor *ngIf=\"schema.type === 'object'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [title]=\"title\"\n        [theme]=\"theme\"\n        [locale]=\"locale\"\n        [icon]=\"icon\"\n        [required]=\"required\"\n        (updateValue)=\"updateValue.emit($event)\"\n        (onDelete)=\"onDelete.emit()\"\n        [hasDeleteButton]=\"hasDeleteButton\"\n        [dragula]=\"dragula\"\n        [md]=\"md\"\n        [hljs]=\"hljs\"\n        [forceHttps]=\"forceHttps\">\n    </object-editor>\n    <array-editor *ngIf=\"schema.type === 'array'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [title]=\"title\"\n        [theme]=\"theme\"\n        [locale]=\"locale\"\n        [icon]=\"icon\"\n        [required]=\"required\"\n        (updateValue)=\"updateValue.emit($event)\"\n        (onDelete)=\"onDelete.emit()\"\n        [hasDeleteButton]=\"hasDeleteButton\"\n        [dragula]=\"dragula\"\n        [md]=\"md\"\n        [hljs]=\"hljs\"\n        [forceHttps]=\"forceHttps\">\n    </array-editor>\n    <number-editor *ngIf=\"schema.type === 'number' || schema.type === 'integer'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [title]=\"title\"\n        [theme]=\"theme\"\n        [locale]=\"locale\"\n        [icon]=\"icon\"\n        [required]=\"required\"\n        (updateValue)=\"updateValue.emit($event)\"\n        (onDelete)=\"onDelete.emit()\"\n        [hasDeleteButton]=\"hasDeleteButton\">\n    </number-editor>\n    <boolean-editor *ngIf=\"schema.type === 'boolean'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [title]=\"title\"\n        [theme]=\"theme\"\n        [locale]=\"locale\"\n        [icon]=\"icon\"\n        [required]=\"required\"\n        (updateValue)=\"updateValue.emit($event)\"\n        (onDelete)=\"onDelete.emit()\"\n        [hasDeleteButton]=\"hasDeleteButton\">\n    </boolean-editor>\n    <null-editor *ngIf=\"schema.type === 'null'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [title]=\"title\"\n        [theme]=\"theme\"\n        [locale]=\"locale\"\n        [icon]=\"icon\"\n        [required]=\"required\"\n        (updateValue)=\"updateValue.emit($event)\"\n        (onDelete)=\"onDelete.emit()\"\n        [hasDeleteButton]=\"hasDeleteButton\">\n    </null-editor>\n    <string-editor *ngIf=\"schema.type === 'string'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [title]=\"title\"\n        [theme]=\"theme\"\n        [locale]=\"locale\"\n        [icon]=\"icon\"\n        [required]=\"required\"\n        (updateValue)=\"updateValue.emit($event)\"\n        (onDelete)=\"onDelete.emit()\"\n        [hasDeleteButton]=\"hasDeleteButton\"\n        [dragula]=\"dragula\"\n        [md]=\"md\"\n        [hljs]=\"hljs\"\n        [forceHttps]=\"forceHttps\">\n    </string-editor>\n    ",
         })
@@ -47,0 +59,0 @@ ], EditorComponent);

dist/angular/null-editor.component.d.ts

@@ -19,7 +19,5 @@ import { EventEmitter } from "@angular/core";
     value?: null;
-    buttonGroupStyle: {
-        marginLeft: string;
-    };
+    buttonGroupStyle: string;
     ngOnInit(): void;
     toggleOptional(): void;
 }

dist/angular/null-editor.component.js

@@ -8,3 +8,3 @@ "use strict";
         this.onDelete = new core_1.EventEmitter();
-        this.buttonGroupStyle = common.buttonGroupStyle;
+        this.buttonGroupStyle = common.buttonGroupStyleString;
     }
@@ -55,3 +55,3 @@ NullEditorComponent.prototype.ngOnInit = function () {
             selector: "null-editor",
-            template: "\n    <div [class]=\"theme.row\">\n        <label *ngIf=\"title !== undefined && title !== null && title !== ''\" [class]=\"theme.label\">\n            {{title}}\n            <div [class]=\"theme.buttonGroup\" [style]=\"buttonGroupStyle\">\n                <button *ngIf=\"hasDeleteButton\" [class]=\"theme.button\" (click)=\"onDelete.emit()\">\n                    <icon [icon]=\"icon\" [text]=\"icon.delete\"></icon>\n                </button>\n            </div>\n        </label>\n        <div *ngIf=\"!required\" [class]=\"theme.optionalCheckbox\">\n            <label>\n                <input type=\"checkbox\" (change)=\"toggleOptional()\" [checked]=\"value === undefined\" />\n                is undefined\n            </label>\n        </div>\n        <p [class]=\"theme.help\">{{schema.description}}</p>\n    </div>\n    ",
+            template: "\n    <div [class]=\"theme.row\">\n        <label *ngIf=\"title !== undefined && title !== null && title !== ''\" [class]=\"theme.label\">\n            {{title}}\n            <div [class]=\"theme.buttonGroup\" [style]=\"buttonGroupStyle\">\n                <div *ngIf=\"!required && (value === undefined || !schema.readonly)\" [class]=\"theme.optionalCheckbox\">\n                    <label>\n                        <input type=\"checkbox\" (change)=\"toggleOptional()\" [checked]=\"value === undefined\" [disabled]=\"readonly || schema.readonly\" />\n                        is undefined\n                    </label>\n                </div>\n                <button *ngIf=\"hasDeleteButton\" [class]=\"theme.button\" (click)=\"onDelete.emit()\">\n                    <icon [icon]=\"icon\" [text]=\"icon.delete\"></icon>\n                </button>\n            </div>\n        </label>\n        <p [class]=\"theme.help\">{{schema.description}}</p>\n    </div>\n    ",
         })
@@ -58,0 +58,0 @@ ], NullEditorComponent);

dist/angular/number-editor.component.d.ts

@@ -20,8 +20,6 @@ import { EventEmitter } from "@angular/core";
     errorMessage: string;
-    buttonGroupStyle: {
-        marginLeft: string;
-    };
+    buttonGroupStyle: string;
     ngOnInit(): void;
-    useInput(): boolean | undefined;
-    useSelect(): boolean;
+    readonly useInput: boolean | undefined;
+    readonly useSelect: boolean;
     onChange(e: {
@@ -28,0 +26,0 @@ target: {

dist/angular/number-editor.component.js

@@ -8,3 +8,3 @@ "use strict";
         this.onDelete = new core_1.EventEmitter();
-        this.buttonGroupStyle = common.buttonGroupStyle;
+        this.buttonGroupStyle = common.buttonGroupStyleString;
     }
@@ -15,8 +15,16 @@ NumberEditorComponent.prototype.ngOnInit = function () {
     };
-    NumberEditorComponent.prototype.useInput = function () {
-        return this.value !== undefined && (this.schema.enum === undefined || this.readonly || this.schema.readonly);
-    };
-    NumberEditorComponent.prototype.useSelect = function () {
-        return this.value !== undefined && (this.schema.enum !== undefined && !this.readonly && !this.schema.readonly);
-    };
+    Object.defineProperty(NumberEditorComponent.prototype, "useInput", {
+        get: function () {
+            return this.value !== undefined && (this.schema.enum === undefined || this.readonly || this.schema.readonly);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(NumberEditorComponent.prototype, "useSelect", {
+        get: function () {
+            return this.value !== undefined && (this.schema.enum !== undefined && !this.readonly && !this.schema.readonly);
+        },
+        enumerable: true,
+        configurable: true
+    });
     NumberEditorComponent.prototype.onChange = function (e) {
@@ -74,3 +82,4 @@ this.value = this.schema.type === "integer" ? common.toInteger(e.target.value) : common.toNumber(e.target.value);
             selector: "number-editor",
-            template: "\n    <div [class]=\"errorMessage ? theme.errorRow : theme.row\">\n        <label *ngIf=\"title !== undefined && title !== null && title !== ''\" [class]=\"theme.label\">\n            {{title}}\n            <div [class]=\"theme.buttonGroup\" [style]=\"buttonGroupStyle\">\n                <button *ngIf=\"hasDeleteButton\" [class]=\"theme.button\" (click)=\"onDelete.emit()\">\n                    <icon [icon]=\"icon\" [text]=\"icon.delete\"></icon>\n                </button>\n            </div>\n        </label>\n        <div *ngIf=\"!required\" [class]=\"theme.optionalCheckbox\">\n            <label>\n                <input type=\"checkbox\" (change)=\"toggleOptional()\" [checked]=\"value === undefined\" />\n                is undefined\n            </label>\n        </div>\n        <input *ngIf=\"useInput()\"\n            [class]=\"theme.formControl\"\n            type=\"number\"\n            (change)=\"onChange($event)\"\n            (keyup)=\"onChange($event)\"\n            [defaultValue]=\"value\"\n            [readOnly]=\"readonly || schema.readonly\" />\n        <select *ngIf=\"useSelect()\"\n            [class]=\"theme.formControl\"\n            type=\"number\"\n            (change)=\"onChange\">\n            <option *ngFor=\"let e of schema.enum; let i = index; trackBy:trackByFunction\"\n                [value]=\"e\"\n                [selected]=\"value === e\">\n                {{e}}\n            </option>\n        </select>\n        <p [class]=\"theme.help\">{{schema.description}}</p>\n        <p *ngIf=\"errorMessage\" [class]=\"theme.help\">{{errorMessage}}</p>\n    </div>\n    ",
+            changeDetection: core_1.ChangeDetectionStrategy.OnPush,
+            template: "\n    <div [class]=\"errorMessage ? theme.errorRow : theme.row\">\n        <label *ngIf=\"title !== undefined && title !== null && title !== ''\" [class]=\"theme.label\">\n            {{title}}\n            <div [class]=\"theme.buttonGroup\" [style]=\"buttonGroupStyle\">\n                <div *ngIf=\"!required && (value === undefined || !schema.readonly)\" [class]=\"theme.optionalCheckbox\">\n                    <label>\n                        <input type=\"checkbox\" (change)=\"toggleOptional()\" [checked]=\"value === undefined\" [disabled]=\"readonly || schema.readonly\" />\n                        is undefined\n                    </label>\n                </div>\n                <button *ngIf=\"hasDeleteButton\" [class]=\"theme.button\" (click)=\"onDelete.emit()\">\n                    <icon [icon]=\"icon\" [text]=\"icon.delete\"></icon>\n                </button>\n            </div>\n        </label>\n        <input *ngIf=\"useInput\"\n            [class]=\"theme.formControl\"\n            type=\"number\"\n            (change)=\"onChange($event)\"\n            (keyup)=\"onChange($event)\"\n            [defaultValue]=\"value\"\n            [readOnly]=\"readonly || schema.readonly\" />\n        <select *ngIf=\"useSelect\"\n            [class]=\"theme.formControl\"\n            type=\"number\"\n            (change)=\"onChange\">\n            <option *ngFor=\"let e of schema.enum; let i = index; trackBy:trackByFunction\"\n                [value]=\"e\"\n                [selected]=\"value === e\">\n                {{e}}\n            </option>\n        </select>\n        <p [class]=\"theme.help\">{{schema.description}}</p>\n        <p *ngIf=\"errorMessage\" [class]=\"theme.help\">{{errorMessage}}</p>\n    </div>\n    ",
         })
@@ -77,0 +86,0 @@ ], NumberEditorComponent);

dist/angular/object-editor.component.d.ts

@@ -0,3 +1,6 @@
+/// <reference types="dragula" />
+/// <reference types="highlight.js" />
 import { EventEmitter } from "@angular/core";
 import * as common from "../common";
+import { hljs, dragula } from "../lib";
 export declare class ObjectEditorComponent {
@@ -22,2 +25,6 @@ schema: common.ObjectSchema;
     hasDeleteButton: boolean;
+    dragula?: typeof dragula;
+    md?: any;
+    hljs?: typeof hljs;
+    forceHttps?: boolean;
     collapsed: boolean;
@@ -31,5 +38,3 @@ value?: {
     }[];
-    buttonGroupStyle: {
-        marginLeft: string;
-    };
+    buttonGroupStyle: string;
     invalidProperties: string[];
@@ -46,3 +51,3 @@ ngOnInit(): void;
     }>): void;
-    hasDeleteButtonFunction(): boolean;
+    readonly hasDeleteButtonFunction: boolean;
 }

dist/angular/object-editor.component.js

@@ -11,3 +11,3 @@ "use strict";
         this.properties = [];
-        this.buttonGroupStyle = common.buttonGroupStyle;
+        this.buttonGroupStyle = common.buttonGroupStyleString;
         this.invalidProperties = [];
@@ -53,5 +53,9 @@ this.collapseOrExpand = function () {
     };
-    ObjectEditorComponent.prototype.hasDeleteButtonFunction = function () {
-        return this.hasDeleteButton && !this.readonly && !this.schema.readonly;
-    };
+    Object.defineProperty(ObjectEditorComponent.prototype, "hasDeleteButtonFunction", {
+        get: function () {
+            return this.hasDeleteButton && !this.readonly && !this.schema.readonly;
+        },
+        enumerable: true,
+        configurable: true
+    });
     __decorate([
@@ -90,6 +94,19 @@ core_1.Input()
     ], ObjectEditorComponent.prototype, "hasDeleteButton", void 0);
+    __decorate([
+        core_1.Input()
+    ], ObjectEditorComponent.prototype, "dragula", void 0);
+    __decorate([
+        core_1.Input()
+    ], ObjectEditorComponent.prototype, "md", void 0);
+    __decorate([
+        core_1.Input()
+    ], ObjectEditorComponent.prototype, "hljs", void 0);
+    __decorate([
+        core_1.Input()
+    ], ObjectEditorComponent.prototype, "forceHttps", void 0);
     ObjectEditorComponent = __decorate([
         core_1.Component({
             selector: "object-editor",
-            template: "\n    <div [class]=\"theme.row\">\n        <h3>\n            {{title || schema.title}}\n            <div [class]=\"theme.buttonGroup\" [style]=\"buttonGroupStyle\">\n                <button [class]=\"theme.button\" (click)=\"collapseOrExpand()\">\n                    <icon [icon]=\"icon\" [text]=\"collapsed ? icon.expand : icon.collapse\"></icon>\n                </button>\n                <button *ngIf=\"hasDeleteButtonFunction()\" [class]=\"theme.button\" (click)=\"onDelete.emit()\">{{icon.delete}}</button>\n            </div>\n        </h3>\n        <p [class]=\"theme.help\">{{schema.description}}</p>\n        <div *ngIf=\"!required\" [class]=\"theme.optionalCheckbox\">\n            <label>\n                <input type=\"checkbox\" (change)=\"toggleOptional()\" [checked]=\"value === undefined\" />\n                is undefined\n            </label>\n        </div>\n        <div *ngIf=\"!collapsed && value !== undefined\" [class]=\"theme.rowContainer\">\n            <editor *ngFor=\"let property of properties; trackBy: trackByFunction\"\n                [schema]=\"property.value\"\n                [title]=\"property.value.title || property.name\"\n                [initialValue]=\"value[property.name]\"\n                (updateValue)=\"onChange(property.name, $event)\"\n                [theme]=\"theme\"\n                [icon]=\"icon\"\n                [locale]=\"locale\"\n                [required]=\"isRequired(property.name)\"\n                [readonly]=\"readonly || schema.readonly\">\n            </editor>\n        </div>\n    </div >\n    ",
+            changeDetection: core_1.ChangeDetectionStrategy.OnPush,
+            template: "\n    <div [class]=\"theme.row\">\n        <h3>\n            {{title || schema.title}}\n            <div [class]=\"theme.buttonGroup\" [style]=\"buttonGroupStyle\">\n                <div *ngIf=\"!required && (value === undefined || !schema.readonly)\" [class]=\"theme.optionalCheckbox\">\n                    <label>\n                        <input type=\"checkbox\" (change)=\"toggleOptional()\" [checked]=\"value === undefined\" [disabled]=\"readonly || schema.readonly\" />\n                        is undefined\n                    </label>\n                </div>\n                <button [class]=\"theme.button\" (click)=\"collapseOrExpand()\">\n                    <icon [icon]=\"icon\" [text]=\"collapsed ? icon.expand : icon.collapse\"></icon>\n                </button>\n                <button *ngIf=\"hasDeleteButtonFunction\" [class]=\"theme.button\" (click)=\"onDelete.emit()\">{{icon.delete}}</button>\n            </div>\n        </h3>\n        <p [class]=\"theme.help\">{{schema.description}}</p>\n        <div *ngIf=\"!collapsed && value !== undefined\" [class]=\"theme.rowContainer\">\n            <editor *ngFor=\"let property of properties; trackBy: trackByFunction\"\n                [schema]=\"property.value\"\n                [title]=\"property.value.title || property.name\"\n                [initialValue]=\"value[property.name]\"\n                (updateValue)=\"onChange(property.name, $event)\"\n                [theme]=\"theme\"\n                [icon]=\"icon\"\n                [locale]=\"locale\"\n                [required]=\"isRequired(property.name)\"\n                [readonly]=\"readonly || schema.readonly\"\n                [dragula]=\"dragula\"\n                [md]=\"md\"\n                [hljs]=\"hljs\"\n                [forceHttps]=\"forceHttps\">\n            </editor>\n        </div>\n    </div >\n    ",
         })
@@ -96,0 +113,0 @@ ], ObjectEditorComponent);

dist/angular/string-editor.component.d.ts

@@ -0,3 +1,6 @@
+/// <reference types="dragula" />
+/// <reference types="highlight.js" />
 import { EventEmitter } from "@angular/core";
 import * as common from "../common";
+import { hljs, dragula } from "../lib";
 export declare class StringEditorComponent {
@@ -18,13 +21,21 @@ schema: common.StringSchema;
     hasDeleteButton: boolean;
+    dragula?: typeof dragula;
+    md?: any;
+    hljs?: typeof hljs;
+    forceHttps?: boolean;
     value?: string;
     errorMessage: string;
-    isImageUrl: boolean;
-    buttonGroupStyle: {
-        marginLeft: string;
-    };
+    buttonGroupStyle: string;
     collapsed: boolean;
     ngOnInit(): void;
-    useTextArea(): boolean | undefined;
-    useInput(): boolean | undefined;
-    useSelect(): boolean;
+    readonly useTextArea: boolean | undefined;
+    readonly useInput: boolean | undefined;
+    readonly useSelect: boolean;
+    readonly canPreviewImage: boolean;
+    readonly canPreviewMarkdown: boolean;
+    readonly canPreviewCode: boolean | undefined;
+    readonly canPreview: boolean | "" | undefined;
+    readonly getImageUrl: string | undefined;
+    readonly getMarkdown: any;
+    readonly getCode: string;
     onChange(e: {
@@ -31,0 +42,0 @@ target: {

dist/angular/string-editor.component.js

@@ -9,3 +9,3 @@ "use strict";
         this.onDelete = new core_1.EventEmitter();
-        this.buttonGroupStyle = common.buttonGroupStyle;
+        this.buttonGroupStyle = common.buttonGroupStyleString;
         this.collapsed = false;
@@ -26,11 +26,76 @@ this.toggleOptional = function () {
     };
-    StringEditorComponent.prototype.useTextArea = function () {
-        return this.value !== undefined && (this.schema.enum === undefined || this.readonly || this.schema.readonly) && this.schema.format === "textarea";
-    };
-    StringEditorComponent.prototype.useInput = function () {
-        return this.value !== undefined && (this.schema.enum === undefined || this.readonly || this.schema.readonly) && this.schema.format !== "textarea";
-    };
-    StringEditorComponent.prototype.useSelect = function () {
-        return this.value !== undefined && (this.schema.enum !== undefined && !this.readonly && !this.schema.readonly);
-    };
+    Object.defineProperty(StringEditorComponent.prototype, "useTextArea", {
+        get: function () {
+            return this.value !== undefined
+                && (this.schema.enum === undefined || this.readonly || this.schema.readonly)
+                && (this.schema.format === "textarea" || this.schema.format === "code" || this.schema.format === "markdown");
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(StringEditorComponent.prototype, "useInput", {
+        get: function () {
+            return this.value !== undefined
+                && (this.schema.enum === undefined || this.readonly || this.schema.readonly)
+                && (this.schema.format !== "textarea" && this.schema.format !== "code" && this.schema.format !== "markdown");
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(StringEditorComponent.prototype, "useSelect", {
+        get: function () {
+            return this.value !== undefined && (this.schema.enum !== undefined && !this.readonly && !this.schema.readonly);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(StringEditorComponent.prototype, "canPreviewImage", {
+        get: function () {
+            return common.isImageUrl(this.value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(StringEditorComponent.prototype, "canPreviewMarkdown", {
+        get: function () {
+            return this.md && this.schema.format === "markdown";
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(StringEditorComponent.prototype, "canPreviewCode", {
+        get: function () {
+            return this.hljs && this.schema.format === "code";
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(StringEditorComponent.prototype, "canPreview", {
+        get: function () {
+            return this.value && (this.canPreviewImage || this.canPreviewMarkdown || this.canPreviewCode);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(StringEditorComponent.prototype, "getImageUrl", {
+        get: function () {
+            return this.forceHttps ? common.replaceProtocal(this.value) : this.value;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(StringEditorComponent.prototype, "getMarkdown", {
+        get: function () {
+            return this.md.render(this.value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(StringEditorComponent.prototype, "getCode", {
+        get: function () {
+            return this.hljs.highlightAuto(this.value).value;
+        },
+        enumerable: true,
+        configurable: true
+    });
     StringEditorComponent.prototype.onChange = function (e) {
@@ -43,3 +108,2 @@ this.value = e.target.value;
         this.errorMessage = common.getErrorMessageOfString(this.value, this.schema, this.locale);
-        this.isImageUrl = common.isImageUrl(this.value);
     };
@@ -82,6 +146,22 @@ StringEditorComponent.prototype.trackByFunction = function (index, value) {
     ], StringEditorComponent.prototype, "hasDeleteButton", void 0);
+    __decorate([
+        core_1.Input()
+    ], StringEditorComponent.prototype, "dragula", void 0);
+    __decorate([
+        core_1.Input()
+    ], StringEditorComponent.prototype, "md", void 0);
+    __decorate([
+        core_1.Input()
+    ], StringEditorComponent.prototype, "hljs", void 0);
+    __decorate([
+        core_1.Input()
+    ], StringEditorComponent.prototype, "forceHttps", void 0);
     StringEditorComponent = __decorate([
         core_1.Component({
             selector: "string-editor",
-            template: "\n    <div [class]=\"errorMessage ? theme.errorRow : theme.row\">\n        <label *ngIf=\"title !== undefined && title !== null && title !== ''\" [class]=\"theme.label\">\n            {{title}}\n            <div [class]=\"theme.buttonGroup\" [style]=\"buttonGroupStyle\">\n                <button *ngIf=\"hasDeleteButton\" [class]=\"theme.button\" (click)=\"onDelete.emit()\">\n                    <icon [icon]=\"icon\" [text]=\"icon.delete\"></icon>\n                </button>\n                <button *ngIf=\"isImageUrl\" [class]=\"theme.button\" (click)=\"collapseOrExpand()\">\n                    <icon [icon]=\"icon\" [text]=\"collapsed ? icon.expand : icon.collapse\"></icon>\n                </button>\n            </div>\n        </label>\n        <div *ngIf=\"!required\" [class]=\"theme.optionalCheckbox\">\n            <label>\n                <input type=\"checkbox\" (change)=\"toggleOptional()\" [checked]=\"value === undefined\" />\n                is undefined\n            </label>\n        </div>\n        <textarea *ngIf=\"useTextArea()\"\n            [class]=\"theme.formControl\"\n            (change)=\"onChange($event)\"\n            (keyup)=\"onChange($event)\"\n            rows=\"5\"\n            [readOnly]=\"readonly || schema.readonly\">{{value}}</textarea>\n        <input *ngIf=\"useInput()\"\n            [class]=\"theme.formControl\"\n            [type]=\"schema.format\"\n            (change)=\"onChange($event)\"\n            (keyup)=\"onChange($event)\"\n            [defaultValue]=\"value\"\n            [readOnly]=\"readonly || schema.readonly\" />\n        <select *ngIf=\"useSelect()\"\n            [class]=\"theme.formControl\"\n            (change)=\"onChange($event)\">\n            <option *ngFor=\"let e of schema.enum; let i = index; trackBy:trackByFunction\"\n                [value]=\"e\"\n                [selected]=\"value === e\">\n                {{e}}\n            </option>\n        </select>\n        <img *ngIf=\"isImageUrl && !collapsed\" [src]=\"value\" />\n        <p [class]=\"theme.help\">{{schema.description}}</p>\n        <p *ngIf=\"errorMessage\" [class]=\"theme.help\">{{errorMessage}}</p>\n    </div>\n    ",
+            styles: [
+                (".schema-based-json-editor-image-preview {" + common.imagePreviewStyleString + "}"),
+            ],
+            changeDetection: core_1.ChangeDetectionStrategy.OnPush,
+            template: "\n    <div [class]=\"errorMessage ? theme.errorRow : theme.row\">\n        <label *ngIf=\"title !== undefined && title !== null && title !== ''\" [class]=\"theme.label\">\n            {{title}}\n            <div [class]=\"theme.buttonGroup\" [style]=\"buttonGroupStyle\">\n                <div *ngIf=\"!required && (value === undefined || !schema.readonly)\" [class]=\"theme.optionalCheckbox\">\n                    <label>\n                        <input type=\"checkbox\" (change)=\"toggleOptional()\" [checked]=\"value === undefined\" [disabled]=\"readonly || schema.readonly\" />\n                        is undefined\n                    </label>\n                </div>\n                <button *ngIf=\"hasDeleteButton\" [class]=\"theme.button\" (click)=\"onDelete.emit()\">\n                    <icon [icon]=\"icon\" [text]=\"icon.delete\"></icon>\n                </button>\n                <button *ngIf=\"canPreview\" [class]=\"theme.button\" (click)=\"collapseOrExpand()\">\n                    <icon [icon]=\"icon\" [text]=\"collapsed ? icon.expand : icon.collapse\"></icon>\n                </button>\n            </div>\n        </label>\n        <textarea *ngIf=\"useTextArea\"\n            [class]=\"theme.formControl\"\n            (change)=\"onChange($event)\"\n            (keyup)=\"onChange($event)\"\n            rows=\"5\"\n            [readOnly]=\"readonly || schema.readonly\">{{value}}</textarea>\n        <input *ngIf=\"useInput\"\n            [class]=\"theme.formControl\"\n            [type]=\"schema.format\"\n            (change)=\"onChange($event)\"\n            (keyup)=\"onChange($event)\"\n            [defaultValue]=\"value\"\n            [readOnly]=\"readonly || schema.readonly\" />\n        <select *ngIf=\"useSelect\"\n            [class]=\"theme.formControl\"\n            (change)=\"onChange($event)\">\n            <option *ngFor=\"let e of schema.enum; let i = index; trackBy:trackByFunction\"\n                [value]=\"e\"\n                [selected]=\"value === e\">\n                {{e}}\n            </option>\n        </select>\n        <img *ngIf=\"value && !collapsed && canPreviewImage\"\n            class=\"schema-based-json-editor-image-preview\"\n            [src]=\"getImageUrl\" />\n        <div *ngIf=\"value && !collapsed && canPreviewMarkdown\" [innerHTML]=\"getMarkdown\">\n        </div>\n        <pre *ngIf=\"value && !collapsed && canPreviewCode\"><code [innerHTML]=\"getCode\"></code></pre>\n        <p [class]=\"theme.help\">{{schema.description}}</p>\n        <p *ngIf=\"errorMessage\" [class]=\"theme.help\">{{errorMessage}}</p>\n    </div>\n    ",
         })
@@ -88,0 +168,0 @@ ], StringEditorComponent);

dist/common.d.ts

@@ -0,1 +1,4 @@
+/// <reference types="react" />
+/// <reference types="dragula" />
+/// <reference types="highlight.js" />
 import "tslib";
@@ -36,3 +39,3 @@ import * as toNumber from "lodash/toNumber";
     type: "string";
-    format?: "textarea" | "color" | "date" | "datetime" | "datetime-local" | "time" | "month" | "email" | "uri" | "url" | "week" | "hostname" | "ipv4" | "ipv6";
+    format?: "textarea" | "color" | "date" | "datetime" | "datetime-local" | "time" | "month" | "email" | "uri" | "url" | "week" | "hostname" | "ipv4" | "ipv6" | "code" | "markdown";
     enum?: string[];
@@ -60,2 +63,3 @@ minLength?: number;
     buttonGroup: string;
+    radiobox: string;
 };
@@ -102,6 +106,5 @@ export declare const themes: {
 export declare function getDefaultValue(required: boolean | undefined, schema: Schema, initialValue: ValueType | undefined): ValueType | undefined;
-export declare const buttonGroupStyle: {
-    marginLeft: string;
-};
+export declare const buttonGroupStyle: React.CSSProperties;
 export declare const buttonGroupStyleString: string;
+import { hljs as hljsLib, React, dragula } from "./lib";
 export interface Props<TSchema extends CommonSchema, TValue> {
@@ -118,2 +121,6 @@ schema: TSchema;
     required?: boolean;
+    dragula?: typeof dragula;
+    md?: any;
+    hljs?: typeof hljsLib;
+    forceHttps?: boolean;
 }
@@ -135,1 +142,5 @@ export declare function isSame(value1: ValueType, value2: ValueType): boolean;
 export declare function isImageUrl(value?: string): boolean;
+export declare function replaceProtocal(src: string): string;
+export declare const imagePreviewStyleString: string;
+export declare const imagePreviewStyle: React.CSSProperties;
+export declare function initializeMarkdown(markdownit: any, hljs: typeof hljsLib | undefined, forceHttps: boolean | undefined): any;

dist/common.js

@@ -21,2 +21,3 @@ "use strict";
         buttonGroup: "btn-group",
+        radiobox: "radio-inline",
     },
@@ -34,2 +35,3 @@ };
     buttonGroup: "",
+    radiobox: "",
 };
@@ -171,5 +173,2 @@ function getTheme(name) {
     }
-    if (!required) {
-        return undefined;
-    }
     if (schema.default !== undefined) {
@@ -210,2 +209,5 @@ switch (schema.type) {
     }
+    if (!required) {
+        return undefined;
+    }
     switch (schema.type) {
@@ -417,2 +419,68 @@ case "object":
 exports.isImageUrl = isImageUrl;
+function replaceProtocal(src) {
+    if (src.indexOf("http://") === 0 && src.indexOf("http://localhost") !== 0) {
+        return "https://" + src.substring("http://".length);
+    }
+    return src;
+}
+exports.replaceProtocal = replaceProtocal;
+exports.imagePreviewStyleString = "display: block; height: auto; margin: 6px 0; max-width: 100%;";
+exports.imagePreviewStyle = {
+    display: "block",
+    height: "auto",
+    margin: "6px 0",
+    maxWidth: "100%",
+};
+function initializeMarkdown(markdownit, hljs, forceHttps) {
+    if (!markdownit) {
+        return undefined;
+    }
+    var md = markdownit({
+        linkify: true,
+        highlight: function (str, lang) {
+            if (hljs) {
+                if (lang && hljs.getLanguage(lang)) {
+                    try {
+                        return hljs.highlight(lang, str).value;
+                    }
+                    catch (error) {
+                        console.log(error);
+                    }
+                }
+                try {
+                    return hljs.highlightAuto(str).value;
+                }
+                catch (error) {
+                    console.log(error);
+                }
+            }
+            return "";
+        },
+    });
+    md.renderer.rules.image = function (tokens, index, options, env, s) {
+        var token = tokens[index];
+        var aIndex = token.attrIndex("src");
+        if (forceHttps) {
+            token.attrs[aIndex][1] = replaceProtocal(token.attrs[aIndex][1]);
+        }
+        token.attrPush(["style", exports.imagePreviewStyleString]);
+        return md.renderer.rules.image(tokens, index, options, env, s);
+    };
+    var defaultLinkRender;
+    if (md.renderer.rules.link_open) {
+        defaultLinkRender = md.renderer.rules.link_open;
+    }
+    else {
+        defaultLinkRender = function (tokens, index, options, env, s) {
+            return s.renderToken(tokens, index, options);
+        };
+    }
+    md.renderer.rules.link_open = function (tokens, index, options, env, s) {
+        tokens[index].attrPush(["target", "_blank"]);
+        tokens[index].attrPush(["rel", "nofollow"]);
+        return defaultLinkRender(tokens, index, options, env, s);
+    };
+    return md;
+}
+exports.initializeMarkdown = initializeMarkdown;
 //# sourceMappingURL=common.js.map

dist/react.d.ts

@@ -0,4 +1,7 @@
+/// <reference types="dragula" />
+/// <reference types="highlight.js" />
 /// <reference types="react" />
 import * as React from "react";
 import * as common from "./common";
+import { hljs, dragula } from "./lib";
 export declare type Props = {
@@ -12,2 +15,6 @@ schema: common.Schema;
     readonly?: boolean;
+    dragula?: typeof dragula;
+    markdownit?: any;
+    hljs?: typeof hljs;
+    forceHttps?: boolean;
 };
@@ -19,4 +26,5 @@ export declare class JSONEditor extends React.Component<Props, {}> {
     private updateValue;
+    private md;
     constructor(props: Props);
     render(): JSX.Element | null;
 }

dist/react.js

@@ -21,2 +21,3 @@ "use strict";
         this.icon = common.getIcon(this.props.icon, this.locale);
+        this.md = common.initializeMarkdown(this.props.markdownit, this.props.hljs, this.props.forceHttps);
     }
@@ -31,2 +32,6 @@ JSONEditor.prototype.render = function () {
             required: true,
+            dragula: this.props.dragula,
+            md: this.md,
+            hljs: this.props.hljs,
+            forceHttps: this.props.forceHttps,
         };
@@ -33,0 +38,0 @@ switch (this.props.schema.type) {

dist/react/array-editor.d.ts

@@ -12,3 +12,3 @@ /// <reference types="react" />
     private value?;
-    private drak;
+    private drak?;
     private errorMessage;
@@ -15,0 +15,0 @@ private invalidIndexes;

dist/react/array-editor.js

@@ -7,3 +7,2 @@ "use strict";
 var icon_1 = require("./icon");
-var dragula = require("dragula");
 var ArrayEditor = (function (_super) {
@@ -33,12 +32,14 @@ __extends(ArrayEditor, _super);
         this.props.updateValue(this.value, !this.errorMessage && this.invalidIndexes.length === 0);
-        var container = ReactDOM.findDOMNode(this).childNodes[this.props.required ? 2 : 3];
-        this.drak = dragula([container]);
-        this.drak.on("drop", function (el, target, source, sibling) {
-            if (_this.value) {
-                common.switchItem(_this.value, el, sibling);
-                _this.renderSwitch = -_this.renderSwitch;
-                _this.setState({ value: _this.value, renderSwitch: _this.renderSwitch });
-                _this.props.updateValue(_this.value, !_this.errorMessage && _this.invalidIndexes.length === 0);
-            }
-        });
+        if (this.props.dragula) {
+            var container = ReactDOM.findDOMNode(this).childNodes[this.props.required ? 2 : 3];
+            this.drak = this.props.dragula([container]);
+            this.drak.on("drop", function (el, target, source, sibling) {
+                if (_this.value) {
+                    common.switchItem(_this.value, el, sibling);
+                    _this.renderSwitch = -_this.renderSwitch;
+                    _this.setState({ value: _this.value, renderSwitch: _this.renderSwitch });
+                    _this.props.updateValue(_this.value, !_this.errorMessage && _this.invalidIndexes.length === 0);
+                }
+            });
+        }
     };
@@ -72,3 +73,3 @@ ArrayEditor.prototype.componentWillUnmount = function () {
                 itemElements.push((React.createElement("div", {key: key, "data-index": i, className: this_1.props.theme.rowContainer}, 
-                    React.createElement(editor_1.Editor, {schema: this_1.props.schema.items, title: String(i), initialValue: this_1.value[i], updateValue: onChange, theme: this_1.props.theme, icon: this_1.props.icon, locale: this_1.props.locale, required: true, readonly: this_1.props.readonly || this_1.props.schema.readonly, onDelete: onDelete})
+                    React.createElement(editor_1.Editor, {schema: this_1.props.schema.items, title: String(i), initialValue: this_1.value[i], updateValue: onChange, theme: this_1.props.theme, icon: this_1.props.icon, locale: this_1.props.locale, required: true, readonly: this_1.props.readonly || this_1.props.schema.readonly, onDelete: onDelete, dragula: this_1.props.dragula, md: this_1.props.md, hljs: this_1.props.hljs, forceHttps: this_1.props.forceHttps})
                 )));
@@ -103,6 +104,6 @@ };
         var optionalCheckbox = null;
-        if (!this.props.required) {
+        if (!this.props.required && (this.value === undefined || !this.props.schema.readonly)) {
             optionalCheckbox = (React.createElement("div", {className: this.props.theme.optionalCheckbox}, 
                 React.createElement("label", null, 
-                    React.createElement("input", {type: "checkbox", onChange: this.toggleOptional, checked: this.value === undefined}), 
+                    React.createElement("input", {type: "checkbox", onChange: this.toggleOptional, checked: this.value === undefined, disabled: this.props.readonly || this.props.schema.readonly}), 
                     "is undefined")
@@ -119,2 +120,3 @@ ));
                 React.createElement("div", {className: this.props.theme.buttonGroup, style: common.buttonGroupStyle}, 
+                    optionalCheckbox, 
                     React.createElement("button", {className: this.props.theme.button, onClick: this.collapseOrExpand}, 
@@ -126,3 +128,2 @@ React.createElement(icon_1.Icon, {icon: this.props.icon, text: this.collapsed ? this.props.icon.expand : this.props.icon.collapse})
             React.createElement("p", {className: this.props.theme.help}, this.props.schema.description), 
-            optionalCheckbox, 
             childrenElement, 
@@ -129,0 +130,0 @@ errorDescription));

dist/react/boolean-editor.js

@@ -11,3 +11,3 @@ "use strict";
         this.onChange = function (e) {
-            _this.value = e.currentTarget.checked;
+            _this.value = !_this.value;
             _this.setState({ value: _this.value });
@@ -29,13 +29,19 @@ _this.props.updateValue(_this.value, true);
         if (this.value !== undefined) {
-            control = (React.createElement("div", {className: this.props.theme.optionalCheckbox}, 
-                React.createElement("label", null, 
-                    React.createElement("input", {type: "checkbox", onChange: this.onChange, checked: this.value, readOnly: this.props.readonly || this.props.schema.readonly}), 
-                    this.props.title)
-            ));
+            control = (React.createElement("div", null, 
+                React.createElement("div", {className: this.props.theme.radiobox}, 
+                    React.createElement("label", null, 
+                        React.createElement("input", {type: "radio", onChange: this.onChange, checked: this.value, disabled: this.props.readonly || this.props.schema.readonly}), 
+                        "true")
+                ), 
+                React.createElement("div", {className: this.props.theme.radiobox}, 
+                    React.createElement("label", null, 
+                        React.createElement("input", {type: "radio", onChange: this.onChange, checked: !this.value, disabled: this.props.readonly || this.props.schema.readonly}), 
+                        "false")
+                )));
         }
         var optionalCheckbox = null;
-        if (!this.props.required) {
+        if (!this.props.required && (this.value === undefined || !this.props.schema.readonly)) {
             optionalCheckbox = (React.createElement("div", {className: this.props.theme.optionalCheckbox}, 
                 React.createElement("label", null, 
-                    React.createElement("input", {type: "checkbox", onChange: this.toggleOptional, checked: this.value === undefined}), 
+                    React.createElement("input", {type: "checkbox", onChange: this.toggleOptional, checked: this.value === undefined, disabled: this.props.readonly || this.props.schema.readonly}), 
                     "is undefined")
@@ -56,4 +62,5 @@ ));
             titleView, 
-            React.createElement("div", {className: this.props.theme.buttonGroup, style: common.buttonGroupStyle}, deleteButton), 
-            optionalCheckbox, 
+            React.createElement("div", {className: this.props.theme.buttonGroup, style: common.buttonGroupStyle}, 
+                optionalCheckbox, 
+                deleteButton), 
             control, 
@@ -60,0 +67,0 @@ React.createElement("p", {className: this.props.theme.help}, this.props.schema.description)));

dist/react/null-editor.js

@@ -22,6 +22,6 @@ "use strict";
         var optionalCheckbox = null;
-        if (!this.props.required) {
+        if (!this.props.required && (this.value === undefined || !this.props.schema.readonly)) {
             optionalCheckbox = (React.createElement("div", {className: this.props.theme.optionalCheckbox}, 
                 React.createElement("label", null, 
-                    React.createElement("input", {type: "checkbox", onChange: this.toggleOptional, checked: this.value === undefined}), 
+                    React.createElement("input", {type: "checkbox", onChange: this.toggleOptional, checked: this.value === undefined, disabled: this.props.readonly || this.props.schema.readonly}), 
                     "is undefined")
@@ -42,4 +42,5 @@ ));
             titleView, 
-            React.createElement("div", {className: this.props.theme.buttonGroup, style: common.buttonGroupStyle}, deleteButton), 
-            optionalCheckbox, 
+            React.createElement("div", {className: this.props.theme.buttonGroup, style: common.buttonGroupStyle}, 
+                optionalCheckbox, 
+                deleteButton), 
             React.createElement("p", {className: this.props.theme.help}, this.props.schema.description)));
@@ -46,0 +47,0 @@ };

dist/react/number-editor.js

@@ -44,6 +44,6 @@ "use strict";
         var optionalCheckbox = null;
-        if (!this.props.required) {
+        if (!this.props.required && (this.value === undefined || !this.props.schema.readonly)) {
             optionalCheckbox = (React.createElement("div", {className: this.props.theme.optionalCheckbox}, 
                 React.createElement("label", null, 
-                    React.createElement("input", {type: "checkbox", onChange: this.toggleOptional, checked: this.value === undefined}), 
+                    React.createElement("input", {type: "checkbox", onChange: this.toggleOptional, checked: this.value === undefined, disabled: this.props.readonly || this.props.schema.readonly}), 
                     "is undefined")
@@ -64,4 +64,5 @@ ));
             titleView, 
-            React.createElement("div", {className: this.props.theme.buttonGroup, style: common.buttonGroupStyle}, deleteButton), 
-            optionalCheckbox, 
+            React.createElement("div", {className: this.props.theme.buttonGroup, style: common.buttonGroupStyle}, 
+                optionalCheckbox, 
+                deleteButton), 
             control, 
@@ -68,0 +69,0 @@ React.createElement("p", {className: this.props.theme.help}, this.props.schema.description),

dist/react/object-editor.js

@@ -52,3 +52,3 @@ "use strict";
                 var required = this_2.props.schema.required && this_2.props.schema.required.some(function (r) { return r === property; });
-                propertyElements.push(React.createElement(editor_1.Editor, {key: property, schema: schema, title: schema.title || property, initialValue: this_2.value[property], updateValue: onChange, theme: this_2.props.theme, icon: this_2.props.icon, locale: this_2.props.locale, required: required, readonly: this_2.props.readonly || this_2.props.schema.readonly}));
+                propertyElements.push(React.createElement(editor_1.Editor, {key: property, schema: schema, title: schema.title || property, initialValue: this_2.value[property], updateValue: onChange, theme: this_2.props.theme, icon: this_2.props.icon, locale: this_2.props.locale, required: required, readonly: this_2.props.readonly || this_2.props.schema.readonly, dragula: this_2.props.dragula, md: this_2.props.md, hljs: this_2.props.hljs, forceHttps: this_2.props.forceHttps}));
             };
@@ -68,6 +68,6 @@ var this_2 = this;
         var optionalCheckbox = null;
-        if (!this.props.required) {
+        if (!this.props.required && (this.value === undefined || !this.props.schema.readonly)) {
             optionalCheckbox = (React.createElement("div", {className: this.props.theme.optionalCheckbox}, 
                 React.createElement("label", null, 
-                    React.createElement("input", {type: "checkbox", onChange: this.toggleOptional, checked: this.value === undefined}), 
+                    React.createElement("input", {type: "checkbox", onChange: this.toggleOptional, checked: this.value === undefined, disabled: this.props.readonly || this.props.schema.readonly}), 
                     "is undefined")
@@ -80,2 +80,3 @@ ));
                 React.createElement("div", {className: this.props.theme.buttonGroup, style: common.buttonGroupStyle}, 
+                    optionalCheckbox, 
                     React.createElement("button", {className: this.props.theme.button, onClick: this.collapseOrExpand}, 
@@ -86,3 +87,2 @@ React.createElement(icon_1.Icon, {icon: this.props.icon, text: this.collapsed ? this.props.icon.expand : this.props.icon.collapse})
             React.createElement("p", {className: this.props.theme.help}, this.props.schema.description), 
-            optionalCheckbox, 
             childrenElement));
@@ -89,0 +89,0 @@ };

dist/react/string-editor.d.ts

@@ -7,3 +7,2 @@ /// <reference types="react" />
     private errorMessage;
-    private isImageUrl;
     private collapsed;
@@ -10,0 +9,0 @@ constructor(props: common.Props<common.ArraySchema, string>);

dist/react/string-editor.js

@@ -37,3 +37,5 @@ "use strict";
             if (this.props.schema.enum === undefined || this.props.readonly || this.props.schema.readonly) {
-                if (this.props.schema.format === "textarea") {
+                if (this.props.schema.format === "textarea"
+                    || this.props.schema.format === "code"
+                    || this.props.schema.format === "markdown") {
                     control = (React.createElement("textarea", {className: this.props.theme.formControl, onChange: this.onChange, defaultValue: this.value, rows: 5, readOnly: this.props.readonly || this.props.schema.readonly}));
@@ -55,13 +57,9 @@ }
         var optionalCheckbox = null;
-        if (!this.props.required) {
+        if (!this.props.required && (this.value === undefined || !this.props.schema.readonly)) {
             optionalCheckbox = (React.createElement("div", {className: this.props.theme.optionalCheckbox}, 
                 React.createElement("label", null, 
-                    React.createElement("input", {type: "checkbox", onChange: this.toggleOptional, checked: this.value === undefined}), 
+                    React.createElement("input", {type: "checkbox", onChange: this.toggleOptional, checked: this.value === undefined, disabled: this.props.readonly || this.props.schema.readonly}), 
                     "is undefined")
             ));
         }
-        var imagePreview = null;
-        if (this.isImageUrl && !this.collapsed) {
-            imagePreview = React.createElement("img", {src: this.value});
-        }
         var deleteButton = null;
@@ -77,16 +75,40 @@ if (this.props.onDelete) {
         }
-        var previewImageButton = null;
-        if (this.isImageUrl) {
-            previewImageButton = (React.createElement("button", {className: this.props.theme.button, onClick: this.collapseOrExpand}, 
+        var canPreviewImage = common.isImageUrl(this.value);
+        var canPreviewMarkdown = this.props.md && this.props.schema.format === "markdown";
+        var canPreviewCode = this.props.hljs && this.props.schema.format === "code";
+        var previewButton = null;
+        if (this.value && (canPreviewImage || canPreviewMarkdown || canPreviewCode)) {
+            previewButton = (React.createElement("button", {className: this.props.theme.button, onClick: this.collapseOrExpand}, 
                 React.createElement(icon_1.Icon, {icon: this.props.icon, text: this.collapsed ? this.props.icon.expand : this.props.icon.collapse})
             ));
         }
+        var imagePreview = null;
+        var markdownPreview = null;
+        var codePreview = null;
+        if (this.value && !this.collapsed) {
+            if (canPreviewImage) {
+                var url = this.props.forceHttps ? common.replaceProtocal(this.value) : this.value;
+                imagePreview = React.createElement("img", {style: common.imagePreviewStyle, src: url});
+            }
+            else if (canPreviewMarkdown) {
+                var html = this.props.md.render(this.value);
+                markdownPreview = React.createElement("div", {dangerouslySetInnerHTML: { __html: html }});
+            }
+            else if (canPreviewCode) {
+                var html = this.props.hljs.highlightAuto(this.value).value;
+                codePreview = React.createElement("pre", null, 
+                    React.createElement("code", {dangerouslySetInnerHTML: { __html: html }})
+                );
+            }
+        }
         return (React.createElement("div", {className: this.errorMessage ? this.props.theme.errorRow : this.props.theme.row}, 
             titleView, 
             React.createElement("div", {className: this.props.theme.buttonGroup, style: common.buttonGroupStyle}, 
+                optionalCheckbox, 
                 deleteButton, 
-                previewImageButton), 
-            optionalCheckbox, 
+                previewButton), 
             control, 
             imagePreview, 
+            markdownPreview, 
+            codePreview, 
             React.createElement("p", {className: this.props.theme.help}, this.props.schema.description), 
@@ -97,3 +119,2 @@ errorDescription));
         this.errorMessage = common.getErrorMessageOfString(this.value, this.props.schema, this.props.locale);
-        this.isImageUrl = common.isImageUrl(this.value);
     };
@@ -100,0 +121,0 @@ return StringEditor;

dist/vue.d.ts

@@ -0,2 +1,4 @@
+/// <reference types="highlight.js" />
 import * as common from "./common";
+import { hljs } from "./lib";
 export declare type This = {
@@ -7,2 +9,5 @@ $emit: (event: string, args: common.ValidityValue<common.ValueType>) => void;
     icon: common.Icon;
+    markdownit: any;
+    hljs: typeof hljs;
+    forceHttps: boolean;
 };

dist/vue.js

@@ -24,4 +24,4 @@ "use strict";
 Vue.component("json-editor", {
-    template: "\n    <div>\n        <object-editor v-if=\"schema.type === 'object'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :theme=\"themeObject\"\n            :locale=\"localeObject\"\n            :icon=\"iconObject\"\n            :required=\"true\"\n            @update-value=\"updateValueFunction(arguments[0])\">\n        </object-editor>\n        <array-editor v-if=\"schema.type === 'array'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :theme=\"themeObject\"\n            :locale=\"localeObject\"\n            :icon=\"iconObject\"\n            :required=\"true\"\n            @update-value=\"updateValueFunction(arguments[0])\">\n        </array-editor>\n        <number-editor v-if=\"schema.type === 'number' || schema.type === 'integer'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :theme=\"themeObject\"\n            :locale=\"localeObject\"\n            :icon=\"iconObject\"\n            :required=\"true\"\n            @update-value=\"updateValueFunction(arguments[0])\">\n        </number-editor>\n        <boolean-editor v-if=\"schema.type === 'boolean'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :theme=\"themeObject\"\n            :locale=\"localeObject\"\n            :icon=\"iconObject\"\n            :required=\"true\"\n            @update-value=\"updateValueFunction(arguments[0])\">\n        </boolean-editor>\n        <null-editor v-if=\"schema.type === 'null'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :theme=\"themeObject\"\n            :locale=\"localeObject\"\n            :icon=\"iconObject\"\n            :required=\"true\"\n            @update-value=\"updateValueFunction(arguments[0])\">\n        </null-editor>\n        <string-editor v-if=\"schema.type === 'string'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :theme=\"themeObject\"\n            :locale=\"localeObject\"\n            :icon=\"iconObject\"\n            :required=\"true\"\n            @update-value=\"updateValueFunction(arguments[0])\">\n        </string-editor>\n    </div>\n    ",
-    props: ["schema", "initialValue", "theme", "icon", "locale", "readonly"],
+    template: "\n    <div>\n        <object-editor v-if=\"schema.type === 'object'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :theme=\"themeObject\"\n            :locale=\"localeObject\"\n            :icon=\"iconObject\"\n            :required=\"true\"\n            @update-value=\"updateValueFunction(arguments[0])\"\n            :dragula=\"dragula\"\n            :md=\"md\"\n            :hljs=\"hljs\"\n            :forceHttps=\"forceHttps\">\n        </object-editor>\n        <array-editor v-if=\"schema.type === 'array'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :theme=\"themeObject\"\n            :locale=\"localeObject\"\n            :icon=\"iconObject\"\n            :required=\"true\"\n            @update-value=\"updateValueFunction(arguments[0])\"\n            :dragula=\"dragula\"\n            :md=\"md\"\n            :hljs=\"hljs\"\n            :forceHttps=\"forceHttps\">\n        </array-editor>\n        <number-editor v-if=\"schema.type === 'number' || schema.type === 'integer'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :theme=\"themeObject\"\n            :locale=\"localeObject\"\n            :icon=\"iconObject\"\n            :required=\"true\"\n            @update-value=\"updateValueFunction(arguments[0])\">\n        </number-editor>\n        <boolean-editor v-if=\"schema.type === 'boolean'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :theme=\"themeObject\"\n            :locale=\"localeObject\"\n            :icon=\"iconObject\"\n            :required=\"true\"\n            @update-value=\"updateValueFunction(arguments[0])\">\n        </boolean-editor>\n        <null-editor v-if=\"schema.type === 'null'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :theme=\"themeObject\"\n            :locale=\"localeObject\"\n            :icon=\"iconObject\"\n            :required=\"true\"\n            @update-value=\"updateValueFunction(arguments[0])\">\n        </null-editor>\n        <string-editor v-if=\"schema.type === 'string'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :theme=\"themeObject\"\n            :locale=\"localeObject\"\n            :icon=\"iconObject\"\n            :required=\"true\"\n            @update-value=\"updateValueFunction(arguments[0])\"\n            :dragula=\"dragula\"\n            :md=\"md\"\n            :hljs=\"hljs\"\n            :forceHttps=\"forceHttps\">\n        </string-editor>\n    </div>\n    ",
+    props: ["schema", "initialValue", "theme", "icon", "locale", "readonly", "dragula", "markdownit", "hljs", "forceHttps"],
     data: function () {
@@ -33,2 +33,3 @@ var localeObject = common.getLocale(this.locale);
             iconObject: common.getIcon(this.icon, localeObject),
+            md: common.initializeMarkdown(this.markdownit, this.hljs, this.forceHttps),
         };
@@ -35,0 +36,0 @@ },

dist/vue/array-editor.d.ts

 /// <reference types="dragula" />
 import * as common from "../common";
-import * as dragula from "dragula";
+import { dragula } from "../lib";
 export declare const arrayEditor: {
@@ -34,3 +34,4 @@ template: string;
 export declare type This = {
-    drak: dragula.Drake;
+    dragula?: typeof dragula;
+    drak?: dragula.Drake;
     $emit: (event: string, args: common.ValidityValue<common.ValueType[] | undefined>) => void;
@@ -37,0 +38,0 @@ required: boolean;

dist/vue/array-editor.js

 "use strict";
 var common = require("../common");
-var dragula = require("dragula");
 /* tslint:disable:only-arrow-functions */
@@ -8,4 +7,4 @@ /* tslint:disable:no-unused-new */
 exports.arrayEditor = {
-    template: "\n    <div :class=\"errorMessage ? theme.errorRow : theme.row\">\n        <h3>\n            {{title || schema.title}}\n            <div :class=\"theme.buttonGroup\" :style=\"buttonGroupStyleString\">\n                <button :class=\"theme.button\" @click=\"collapseOrExpand()\">\n                    <icon :icon=\"icon\" :text=\"collapsed ? icon.expand : icon.collapse\"></icon>\n                </button>\n                <button v-if=\"!readonly && value !== undefined\" :class=\"theme.button\" @click=\"addItem()\">\n                    <icon :icon=\"icon\" :text=\"icon.add\"></icon>\n                </button>\n                <button v-if=\"hasDeleteButton && !readonly && !schema.readonly\" :class=\"theme.button\" @click=\"$emit('delete')\">\n                    <icon :icon=\"icon\" :text=\"icon.delete\"></icon>\n                </button>\n            </div>\n        </h3>\n        <p :class=\"theme.help\">{{schema.description}}</p>\n        <div v-if=\"!required\" :class=\"theme.optionalCheckbox\">\n            <label>\n                <input type=\"checkbox\" @change=\"toggleOptional()\" :checked=\"value === undefined\" />\n                is undefined\n            </label>\n        </div>\n        <div :class=\"theme.rowContainer\">\n            <div v-for=\"(item, i) in getValue\" :key=\"(1 + i) * renderSwitch\" :data-index=\"i\" :class=\"theme.rowContainer\">\n                <editor :schema=\"schema.items\"\n                    :title=\"i\"\n                    :initial-value=\"value[i]\"\n                    @update-value=\"onChange(i, arguments[0])\"\n                    :theme=\"theme\"\n                    :icon=\"icon\"\n                    :locale=\"locale\"\n                    :required=\"true\"\n                    :readonly=\"readonly || schema.readonly\"\n                    @delete=\"onDeleteFunction(i)\"\n                    :has-delete-button=\"true\">\n                </editor>\n            </div>\n        </div>\n        <p v-if=\"errorMessage\" :class=\"theme.help\">{{errorMessage}}</p>\n    </div>\n    ",
-    props: ["schema", "initialValue", "title", "theme", "icon", "locale", "readonly", "required", "hasDeleteButton"],
+    template: "\n    <div :class=\"errorMessage ? theme.errorRow : theme.row\">\n        <h3>\n            {{title || schema.title}}\n            <div :class=\"theme.buttonGroup\" :style=\"buttonGroupStyleString\">\n                <div v-if=\"!required && (value === undefined || !schema.readonly)\" :class=\"theme.optionalCheckbox\">\n                    <label>\n                        <input type=\"checkbox\" @change=\"toggleOptional()\" :checked=\"value === undefined\" :disabled=\"readonly || schema.readonly\" />\n                        is undefined\n                    </label>\n                </div>\n                <button :class=\"theme.button\" @click=\"collapseOrExpand()\">\n                    <icon :icon=\"icon\" :text=\"collapsed ? icon.expand : icon.collapse\"></icon>\n                </button>\n                <button v-if=\"!readonly && value !== undefined\" :class=\"theme.button\" @click=\"addItem()\">\n                    <icon :icon=\"icon\" :text=\"icon.add\"></icon>\n                </button>\n                <button v-if=\"hasDeleteButton && !readonly && !schema.readonly\" :class=\"theme.button\" @click=\"$emit('delete')\">\n                    <icon :icon=\"icon\" :text=\"icon.delete\"></icon>\n                </button>\n            </div>\n        </h3>\n        <p :class=\"theme.help\">{{schema.description}}</p>\n        <div :class=\"theme.rowContainer\">\n            <div v-for=\"(item, i) in getValue\" :key=\"(1 + i) * renderSwitch\" :data-index=\"i\" :class=\"theme.rowContainer\">\n                <editor :schema=\"schema.items\"\n                    :title=\"i\"\n                    :initial-value=\"value[i]\"\n                    @update-value=\"onChange(i, arguments[0])\"\n                    :theme=\"theme\"\n                    :icon=\"icon\"\n                    :locale=\"locale\"\n                    :required=\"true\"\n                    :readonly=\"readonly || schema.readonly\"\n                    @delete=\"onDeleteFunction(i)\"\n                    :has-delete-button=\"true\"\n                    :dragula=\"dragula\"\n                    :md=\"md\"\n                    :hljs=\"hljs\"\n                    :forceHttps=\"forceHttps\">\n                </editor>\n            </div>\n        </div>\n        <p v-if=\"errorMessage\" :class=\"theme.help\">{{errorMessage}}</p>\n    </div>\n    ",
+    props: ["schema", "initialValue", "title", "theme", "icon", "locale", "readonly", "required", "hasDeleteButton", "dragula", "md", "hljs", "forceHttps"],
     data: function () {
@@ -39,11 +38,15 @@ var value = common.getDefaultValue(this.required, this.schema, this.initialValue);
         var _this = this;
-        var container = this.$el.childNodes[6];
-        this.drak = dragula([container]);
-        this.drak.on("drop", function (el, target, source, sibling) {
-            if (_this.value) {
-                common.switchItem(_this.value, el, sibling);
-                _this.renderSwitch = -_this.renderSwitch;
-                _this.$emit("update-value", { value: _this.value, isValid: !_this.errorMessage && _this.invalidIndexes.length === 0 });
+        if (this.dragula) {
+            var container = this.$el.childNodes[4];
+            if (container) {
+                this.drak = this.dragula([container]);
+                this.drak.on("drop", function (el, target, source, sibling) {
+                    if (_this.value) {
+                        common.switchItem(_this.value, el, sibling);
+                        _this.renderSwitch = -_this.renderSwitch;
+                        _this.$emit("update-value", { value: _this.value, isValid: !_this.errorMessage && _this.invalidIndexes.length === 0 });
+                    }
+                });
             }
-        });
+        }
     },
@@ -50,0 +53,0 @@ methods: {

dist/vue/boolean-editor.d.ts

@@ -7,5 +7,3 @@ import * as common from "../common";
         value: boolean;
-        buttonGroupStyle: {
-            marginLeft: string;
-        };
+        buttonGroupStyle: string;
     };
@@ -12,0 +10,0 @@ methods: {

dist/vue/boolean-editor.js

@@ -7,3 +7,3 @@ "use strict";
 exports.booleanEditor = {
-    template: "\n    <div :class=\"theme.row\">\n        <label v-if=\"title !== undefined && title !== null && title !== ''\" :class=\"theme.label\">\n            {{title}}\n            <div :class=\"theme.buttonGroup\" :style=\"buttonGroupStyle\">\n                <button v-if=\"hasDeleteButton\" :class=\"theme.button\" @click=\"$emit('delete')\">\n                    <icon :icon=\"icon\" :text=\"icon.delete\"></icon>\n                </button>\n            </div>\n        </label>\n        <div v-if=\"!required\" :class=\"theme.optionalCheckbox\">\n            <label>\n                <input type=\"checkbox\" @change=\"toggleOptional()\" :checked=\"value === undefined\" />\n                is undefined\n            </label>\n        </div>\n        <div v-if=\"value !== undefined\" :class=\"theme.optionalCheckbox\">\n            <label>\n                <input type=\"checkbox\"\n                    @change=\"onChange($event)\"\n                    :checked=\"value\"\n                    :readOnly=\"readonly || schema.readonly\" />\n                {{title}}\n            </label>\n        </div>\n        <p :class=\"theme.help\">{{schema.description}}</p>\n    </div>\n    ",
+    template: "\n    <div :class=\"theme.row\">\n        <label v-if=\"title !== undefined && title !== null && title !== ''\" :class=\"theme.label\">\n            {{title}}\n            <div :class=\"theme.buttonGroup\" :style=\"buttonGroupStyle\">\n                <div v-if=\"!required && (value === undefined || !schema.readonly)\" :class=\"theme.optionalCheckbox\">\n                    <label>\n                        <input type=\"checkbox\" @change=\"toggleOptional()\" :checked=\"value === undefined\" :disabled=\"readonly || schema.readonly\" />\n                        is undefined\n                    </label>\n                </div>\n                <button v-if=\"hasDeleteButton\" :class=\"theme.button\" @click=\"$emit('delete')\">\n                    <icon :icon=\"icon\" :text=\"icon.delete\"></icon>\n                </button>\n            </div>\n        </label>\n        <div v-if=\"value !== undefined\">\n            <div :class=\"theme.radiobox\">\n                <label>\n                    <input type=\"radio\"\n                        @change=\"onChange($event)\"\n                        :checked=\"value\"\n                        :disabled=\"readonly || schema.readonly\" />\n                    true\n                </label>\n            </div>\n            <div :class=\"theme.radiobox\">\n                <label>\n                    <input type=\"radio\"\n                        @change=\"onChange($event)\"\n                        :checked=\"!value\"\n                        :disabled=\"readonly || schema.readonly\" />\n                    false\n                </label>\n            </div>\n        </div>\n        <p :class=\"theme.help\">{{schema.description}}</p>\n    </div>\n    ",
     props: ["schema", "initialValue", "title", "theme", "icon", "locale", "readonly", "required", "hasDeleteButton"],
@@ -15,3 +15,3 @@ data: function () {
             value: value,
-            buttonGroupStyle: common.buttonGroupStyle,
+            buttonGroupStyle: common.buttonGroupStyleString,
         };
@@ -21,3 +21,3 @@ },
         onChange: function (e) {
-            this.value = e.target.checked;
+            this.value = !this.value;
             this.$emit("update-value", { value: this.value, isValid: true });
@@ -24,0 +24,0 @@ },

dist/vue/editor.js

@@ -6,5 +6,5 @@ /* tslint:disable:only-arrow-functions */
 exports.editor = {
-    template: "\n    <div>\n        <object-editor v-if=\"schema.type === 'object'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :title=\"title\"\n            :theme=\"theme\"\n            :locale=\"locale\"\n            :icon=\"icon\"\n            :required=\"required\"\n            @update-value=\"$emit('update-value', arguments[0])\"\n            @delete=\"$emit('delete')\"\n            :has-delete-button=\"hasDeleteButton\">\n        </object-editor>\n        <array-editor v-if=\"schema.type === 'array'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :title=\"title\"\n            :theme=\"theme\"\n            :locale=\"locale\"\n            :icon=\"icon\"\n            :required=\"required\"\n            @update-value=\"$emit('update-value', arguments[0])\"\n            @delete=\"$emit('delete')\"\n            :has-delete-button=\"hasDeleteButton\">\n        </array-editor>\n        <number-editor v-if=\"schema.type === 'number' || schema.type === 'integer'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :title=\"title\"\n            :theme=\"theme\"\n            :locale=\"locale\"\n            :icon=\"icon\"\n            :required=\"required\"\n            @update-value=\"$emit('update-value', arguments[0])\"\n            @delete=\"$emit('delete')\"\n            :has-delete-button=\"hasDeleteButton\">\n        </number-editor>\n        <boolean-editor v-if=\"schema.type === 'boolean'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :title=\"title\"\n            :theme=\"theme\"\n            :locale=\"locale\"\n            :icon=\"icon\"\n            :required=\"required\"\n            @update-value=\"$emit('update-value', arguments[0])\"\n            @delete=\"$emit('delete')\"\n            :has-delete-button=\"hasDeleteButton\">\n        </boolean-editor>\n        <null-editor v-if=\"schema.type === 'null'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :title=\"title\"\n            :theme=\"theme\"\n            :locale=\"locale\"\n            :icon=\"icon\"\n            :required=\"required\"\n            @update-value=\"$emit('update-value', arguments[0])\"\n            @delete=\"$emit('delete')\"\n            :has-delete-button=\"hasDeleteButton\">\n        </null-editor>\n        <string-editor v-if=\"schema.type === 'string'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :title=\"title\"\n            :theme=\"theme\"\n            :locale=\"locale\"\n            :icon=\"icon\"\n            :required=\"required\"\n            @update-value=\"$emit('update-value', arguments[0])\"\n            @delete=\"$emit('delete')\"\n            :has-delete-button=\"hasDeleteButton\">\n        </string-editor>\n    </div>\n    ",
-    props: ["schema", "initialValue", "title", "theme", "icon", "locale", "readonly", "required", "hasDeleteButton"],
+    template: "\n    <div>\n        <object-editor v-if=\"schema.type === 'object'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :title=\"title\"\n            :theme=\"theme\"\n            :locale=\"locale\"\n            :icon=\"icon\"\n            :required=\"required\"\n            @update-value=\"$emit('update-value', arguments[0])\"\n            @delete=\"$emit('delete')\"\n            :has-delete-button=\"hasDeleteButton\"\n            :dragula=\"dragula\"\n            :md=\"md\"\n            :hljs=\"hljs\"\n            :forceHttps=\"forceHttps\">\n        </object-editor>\n        <array-editor v-if=\"schema.type === 'array'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :title=\"title\"\n            :theme=\"theme\"\n            :locale=\"locale\"\n            :icon=\"icon\"\n            :required=\"required\"\n            @update-value=\"$emit('update-value', arguments[0])\"\n            @delete=\"$emit('delete')\"\n            :has-delete-button=\"hasDeleteButton\"\n            :dragula=\"dragula\"\n            :md=\"md\"\n            :hljs=\"hljs\"\n            :forceHttps=\"forceHttps\">\n        </array-editor>\n        <number-editor v-if=\"schema.type === 'number' || schema.type === 'integer'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :title=\"title\"\n            :theme=\"theme\"\n            :locale=\"locale\"\n            :icon=\"icon\"\n            :required=\"required\"\n            @update-value=\"$emit('update-value', arguments[0])\"\n            @delete=\"$emit('delete')\"\n            :has-delete-button=\"hasDeleteButton\">\n        </number-editor>\n        <boolean-editor v-if=\"schema.type === 'boolean'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :title=\"title\"\n            :theme=\"theme\"\n            :locale=\"locale\"\n            :icon=\"icon\"\n            :required=\"required\"\n            @update-value=\"$emit('update-value', arguments[0])\"\n            @delete=\"$emit('delete')\"\n            :has-delete-button=\"hasDeleteButton\">\n        </boolean-editor>\n        <null-editor v-if=\"schema.type === 'null'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :title=\"title\"\n            :theme=\"theme\"\n            :locale=\"locale\"\n            :icon=\"icon\"\n            :required=\"required\"\n            @update-value=\"$emit('update-value', arguments[0])\"\n            @delete=\"$emit('delete')\"\n            :has-delete-button=\"hasDeleteButton\">\n        </null-editor>\n        <string-editor v-if=\"schema.type === 'string'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :title=\"title\"\n            :theme=\"theme\"\n            :locale=\"locale\"\n            :icon=\"icon\"\n            :required=\"required\"\n            @update-value=\"$emit('update-value', arguments[0])\"\n            @delete=\"$emit('delete')\"\n            :has-delete-button=\"hasDeleteButton\"\n            :dragula=\"dragula\"\n            :md=\"md\"\n            :hljs=\"hljs\"\n            :forceHttps=\"forceHttps\">\n        </string-editor>\n    </div>\n    ",
+    props: ["schema", "initialValue", "title", "theme", "icon", "locale", "readonly", "required", "hasDeleteButton", "dragula", "md", "hljs", "forceHttps"],
 };
 //# sourceMappingURL=editor.js.map

dist/vue/null-editor.d.ts

@@ -7,5 +7,3 @@ import * as common from "../common";
         value: null;
-        buttonGroupStyle: {
-            marginLeft: string;
-        };
+        buttonGroupStyle: string;
     };
@@ -12,0 +10,0 @@ methods: {

dist/vue/null-editor.js

@@ -7,3 +7,3 @@ "use strict";
 exports.nullEditor = {
-    template: "\n    <div :class=\"theme.row\">\n        <label v-if=\"title !== undefined && title !== null && title !== ''\" :class=\"theme.label\">\n            {{title}}\n            <div :class=\"theme.buttonGroup\" :style=\"buttonGroupStyle\">\n                <button v-if=\"hasDeleteButton\" :class=\"theme.button\" @click=\"$emit('delete')\">\n                    <icon :icon=\"icon\" :text=\"icon.delete\"></icon>\n                </button>\n            </div>\n        </label>\n        <div v-if=\"!required\" :class=\"theme.optionalCheckbox\">\n            <label>\n                <input type=\"checkbox\" @change=\"toggleOptional()\" :checked=\"value === undefined\" />\n                is undefined\n            </label>\n        </div>\n        <p :class=\"theme.help\">{{schema.description}}</p>\n    </div>\n    ",
+    template: "\n    <div :class=\"theme.row\">\n        <label v-if=\"title !== undefined && title !== null && title !== ''\" :class=\"theme.label\">\n            {{title}}\n            <div :class=\"theme.buttonGroup\" :style=\"buttonGroupStyle\">\n                <div v-if=\"!required && (value === undefined || !schema.readonly)\" :class=\"theme.optionalCheckbox\">\n                    <label>\n                        <input type=\"checkbox\" @change=\"toggleOptional()\" :checked=\"value === undefined\" :disabled=\"readonly || schema.readonly\" />\n                        is undefined\n                    </label>\n                </div>\n                <button v-if=\"hasDeleteButton\" :class=\"theme.button\" @click=\"$emit('delete')\">\n                    <icon :icon=\"icon\" :text=\"icon.delete\"></icon>\n                </button>\n            </div>\n        </label>\n        <p :class=\"theme.help\">{{schema.description}}</p>\n    </div>\n    ",
     props: ["schema", "initialValue", "title", "theme", "icon", "locale", "readonly", "required", "hasDeleteButton"],
@@ -15,3 +15,3 @@ data: function () {
             value: value,
-            buttonGroupStyle: common.buttonGroupStyle,
+            buttonGroupStyle: common.buttonGroupStyleString,
         };
@@ -18,0 +18,0 @@ },

dist/vue/number-editor.d.ts

@@ -8,9 +8,9 @@ import * as common from "../common";
         errorMessage: undefined;
-        buttonGroupStyle: {
-            marginLeft: string;
-        };
+        buttonGroupStyle: string;
     };
-    methods: {
+    computed: {
         useInput(this: This): boolean | undefined;
         useSelect(this: This): boolean;
+    };
+    methods: {
         onChange(this: This, e: {
@@ -17,0 +17,0 @@ target: {

dist/vue/number-editor.js

@@ -7,3 +7,3 @@ "use strict";
 exports.numberEditor = {
-    template: "\n    <div :class=\"errorMessage ? theme.errorRow : theme.row\">\n        <label v-if=\"title !== undefined && title !== null && title !== ''\" :class=\"theme.label\">\n            {{title}}\n            <div :class=\"theme.buttonGroup\" :style=\"buttonGroupStyle\">\n                <button v-if=\"hasDeleteButton\" :class=\"theme.button\" @click=\"$emit('delete')\">\n                    <icon :icon=\"icon\" :text=\"icon.delete\"></icon>\n                </button>\n            </div>\n        </label>\n        <div v-if=\"!required\" :class=\"theme.optionalCheckbox\">\n            <label>\n                <input type=\"checkbox\" @change=\"toggleOptional()\" :checked=\"value === undefined\" />\n                is undefined\n            </label>\n        </div>\n        <input v-if=\"useInput()\"\n            :class=\"theme.formControl\"\n            type=\"number\"\n            @change=\"onChange($event)\"\n            @keyup=\"onChange($event)\"\n            :value=\"value\"\n            :readOnly=\"readonly || schema.readonly\" />\n        <select v-if=\"useSelect()\"\n            :class=\"theme.formControl\"\n            type=\"number\"\n            @change=\"onChange($event)\">\n            <option v-for=\"(e, i) in schema.enum\"\n                :key=\"i\"\n                :value=\"e\"\n                :selected=\"value === e\">\n                {{e}}\n            </option>\n        </select>\n        <p :class=\"theme.help\">{{schema.description}}</p>\n        <p v-if=\"errorMessage\" :class=\"theme.help\">{{errorMessage}}</p>\n    </div>\n    ",
+    template: "\n    <div :class=\"errorMessage ? theme.errorRow : theme.row\">\n        <label v-if=\"title !== undefined && title !== null && title !== ''\" :class=\"theme.label\">\n            {{title}}\n            <div :class=\"theme.buttonGroup\" :style=\"buttonGroupStyle\">\n                <div v-if=\"!required && (value === undefined || !schema.readonly)\" :class=\"theme.optionalCheckbox\">\n                    <label>\n                        <input type=\"checkbox\" @change=\"toggleOptional()\" :checked=\"value === undefined\" :disabled=\"readonly || schema.readonly\" />\n                        is undefined\n                    </label>\n                </div>\n                <button v-if=\"hasDeleteButton\" :class=\"theme.button\" @click=\"$emit('delete')\">\n                    <icon :icon=\"icon\" :text=\"icon.delete\"></icon>\n                </button>\n            </div>\n        </label>\n        <input v-if=\"useInput\"\n            :class=\"theme.formControl\"\n            type=\"number\"\n            @change=\"onChange($event)\"\n            @keyup=\"onChange($event)\"\n            :value=\"value\"\n            :readOnly=\"readonly || schema.readonly\" />\n        <select v-if=\"useSelect\"\n            :class=\"theme.formControl\"\n            type=\"number\"\n            @change=\"onChange($event)\">\n            <option v-for=\"(e, i) in schema.enum\"\n                :key=\"i\"\n                :value=\"e\"\n                :selected=\"value === e\">\n                {{e}}\n            </option>\n        </select>\n        <p :class=\"theme.help\">{{schema.description}}</p>\n        <p v-if=\"errorMessage\" :class=\"theme.help\">{{errorMessage}}</p>\n    </div>\n    ",
     props: ["schema", "initialValue", "title", "theme", "icon", "locale", "readonly", "required", "hasDeleteButton"],
@@ -16,6 +16,6 @@ data: function () {
             errorMessage: undefined,
-            buttonGroupStyle: common.buttonGroupStyle,
+            buttonGroupStyle: common.buttonGroupStyleString,
         };
     },
-    methods: {
+    computed: {
         useInput: function () {
@@ -27,2 +27,4 @@ return this.value !== undefined && (this.schema.enum === undefined || this.readonly || this.schema.readonly);
         },
+    },
+    methods: {
         onChange: function (e) {
@@ -29,0 +31,0 @@ this.value = this.schema.type === "integer" ? common.toInteger(e.target.value) : common.toNumber(e.target.value);

dist/vue/object-editor.d.ts

@@ -10,5 +10,3 @@ import * as common from "../common";
         };
-        buttonGroupStyle: {
-            marginLeft: string;
-        };
+        buttonGroupStyle: string;
         invalidProperties: never[];
@@ -15,0 +13,0 @@ };

dist/vue/object-editor.js

@@ -7,4 +7,4 @@ "use strict";
 exports.objectEditor = {
-    template: "\n    <div :class=\"theme.row\">\n        <h3>\n            {{title || schema.title}}\n            <div :class=\"theme.buttonGroup\" :style=\"buttonGroupStyle\">\n                <button :class=\"theme.button\" @click=\"collapseOrExpand()\">\n                    <icon :icon=\"icon\" :text=\"collapsed ? icon.expand : icon.collapse\"></icon>\n                </button>\n                <button v-if=\"hasDeleteButton && !readonly && !schema.readonly\" :class=\"theme.button\" @click=\"$emit('delete')\">{{icon.delete}}</button>\n            </div>\n        </h3>\n        <p :class=\"theme.help\">{{schema.description}}</p>\n        <div v-if=\"!required\" :class=\"theme.optionalCheckbox\">\n            <label>\n                <input type=\"checkbox\" @change=\"toggleOptional()\" :checked=\"value === undefined\" />\n                is undefined\n            </label>\n        </div>\n        <div v-if=\"!collapsed && value !== undefined\" :class=\"theme.rowContainer\">\n            <editor v-for=\"(propertySchema, property, i) in schema.properties\"\n                :key=\"i\"\n                :schema=\"propertySchema\"\n                :title=\"propertySchema.title || property\"\n                :initial-value=\"value[property]\"\n                @update-value=\"onChange(property, arguments[0])\"\n                :theme=\"theme\"\n                :icon=\"icon\"\n                :locale=\"locale\"\n                :required=\"isRequired(property)\"\n                :readonly=\"readonly || schema.readonly\"\n                :has-delete-button=\"hasDeleteButton\">\n            </editor>\n        </div>\n    </div >\n    ",
-    props: ["schema", "initialValue", "title", "theme", "icon", "locale", "readonly", "required", "hasDeleteButton"],
+    template: "\n    <div :class=\"theme.row\">\n        <h3>\n            {{title || schema.title}}\n            <div :class=\"theme.buttonGroup\" :style=\"buttonGroupStyle\">\n                <div v-if=\"!required && (value === undefined || !schema.readonly)\" :class=\"theme.optionalCheckbox\">\n                    <label>\n                        <input type=\"checkbox\" @change=\"toggleOptional()\" :checked=\"value === undefined\" :disabled=\"readonly || schema.readonly\" />\n                        is undefined\n                    </label>\n                </div>\n                <button :class=\"theme.button\" @click=\"collapseOrExpand()\">\n                    <icon :icon=\"icon\" :text=\"collapsed ? icon.expand : icon.collapse\"></icon>\n                </button>\n                <button v-if=\"hasDeleteButton && !readonly && !schema.readonly\" :class=\"theme.button\" @click=\"$emit('delete')\">{{icon.delete}}</button>\n            </div>\n        </h3>\n        <p :class=\"theme.help\">{{schema.description}}</p>\n        <div v-if=\"!collapsed && value !== undefined\" :class=\"theme.rowContainer\">\n            <editor v-for=\"(propertySchema, property, i) in schema.properties\"\n                :key=\"i\"\n                :schema=\"propertySchema\"\n                :title=\"propertySchema.title || property\"\n                :initial-value=\"value[property]\"\n                @update-value=\"onChange(property, arguments[0])\"\n                :theme=\"theme\"\n                :icon=\"icon\"\n                :locale=\"locale\"\n                :required=\"isRequired(property)\"\n                :readonly=\"readonly || schema.readonly\"\n                :has-delete-button=\"hasDeleteButton\"\n                :dragula=\"dragula\"\n                :md=\"md\"\n                :hljs=\"hljs\"\n                :forceHttps=\"forceHttps\">\n            </editor>\n        </div>\n    </div >\n    ",
+    props: ["schema", "initialValue", "title", "theme", "icon", "locale", "readonly", "required", "hasDeleteButton", "dragula", "md", "hljs", "forceHttps"],
     data: function () {
@@ -27,3 +27,3 @@ var value = common.getDefaultValue(this.required, this.schema, this.initialValue);
             value: value,
-            buttonGroupStyle: common.buttonGroupStyle,
+            buttonGroupStyle: common.buttonGroupStyleString,
             invalidProperties: [],
@@ -30,0 +30,0 @@ };

dist/vue/string-editor.d.ts

@@ -0,2 +1,4 @@
+/// <reference types="highlight.js" />
 import * as common from "../common";
+import { hljs } from "../lib";
 export declare const stringEditor: {
@@ -8,13 +10,20 @@ template: string;
         errorMessage: undefined;
-        isImageUrl: boolean;
-        buttonGroupStyle: {
-            marginLeft: string;
-        };
+        buttonGroupStyle: string;
         collapsed: boolean;
+        imagePreviewStyle: string;
     };
     beforeMount(this: This): void;
-    methods: {
+    computed: {
+        canPreviewImage(this: This): boolean;
+        canPreviewMarkdown(this: This): boolean;
+        canPreviewCode(this: This): boolean;
+        canPreview(this: This): boolean | "" | undefined;
         useTextArea(this: This): boolean | undefined;
         useInput(this: This): boolean | undefined;
         useSelect(this: This): boolean;
+        getImageUrl(this: This): string | undefined;
+        getMarkdown(this: This): any;
+        getCode(this: This): string;
+    };
+    methods: {
         onChange(this: This, e: {
@@ -40,4 +49,9 @@ target: {
     required: boolean;
-    isImageUrl: boolean;
     collapsed: boolean;
+    md: any;
+    hljs: typeof hljs;
+    forceHttps: boolean;
+    canPreviewImage: boolean;
+    canPreviewMarkdown: boolean;
+    canPreviewCode: boolean;
 };

dist/vue/string-editor.js

@@ -7,4 +7,4 @@ "use strict";
 exports.stringEditor = {
-    template: "\n    <div :class=\"errorMessage ? theme.errorRow : theme.row\">\n        <label v-if=\"title !== undefined && title !== null && title !== ''\" :class=\"theme.label\">\n            {{title}}\n            <div :class=\"theme.buttonGroup\" :style=\"buttonGroupStyle\">\n                <button v-if=\"hasDeleteButton\" :class=\"theme.button\" @click=\"$emit('delete')\">\n                    <icon :icon=\"icon\" :text=\"icon.delete\"></icon>\n                </button>\n                <button v-if=\"isImageUrl\" :class=\"theme.button\" @click=\"collapseOrExpand()\">\n                    <icon :icon=\"icon\" :text=\"collapsed ? icon.expand : icon.collapse\"></icon>\n                </button>\n            </div>\n        </label>\n        <div v-if=\"!required\" :class=\"theme.optionalCheckbox\">\n            <label>\n                <input type=\"checkbox\" @change=\"toggleOptional()\" :checked=\"value === undefined\" />\n                is undefined\n            </label>\n        </div>\n        <textarea v-if=\"useTextArea()\"\n            :class=\"theme.formControl\"\n            @change=\"onChange($event)\"\n            @keyup=\"onChange($event)\"\n            rows=\"5\"\n            :readOnly=\"readonly || schema.readonly\">{{value}}</textarea>\n        <input v-if=\"useInput()\"\n            :class=\"theme.formControl\"\n            :type=\"schema.format\"\n            @change=\"onChange($event)\"\n            @keyup=\"onChange($event)\"\n            :value=\"value\"\n            :readOnly=\"readonly || schema.readonly\" />\n        <select v-if=\"useSelect()\"\n            :class=\"theme.formControl\"\n            @change=\"onChange($event)\">\n            <option v-for=\"(e, i) in schema.enum\"\n                :key=\"i\"\n                :value=\"e\"\n                :selected=\"value === e\">\n                {{e}}\n            </option>\n        </select>\n        <img v-if=\"isImageUrl && !collapsed\" :src=\"value\" />\n        <p :class=\"theme.help\">{{schema.description}}</p>\n        <p v-if=\"errorMessage\" :class=\"theme.help\">{{errorMessage}}</p>\n    </div>\n    ",
-    props: ["schema", "initialValue", "title", "theme", "icon", "locale", "readonly", "required", "hasDeleteButton"],
+    template: "\n    <div :class=\"errorMessage ? theme.errorRow : theme.row\">\n        <label v-if=\"title !== undefined && title !== null && title !== ''\" :class=\"theme.label\">\n            {{title}}\n            <div :class=\"theme.buttonGroup\" :style=\"buttonGroupStyle\">\n                <div v-if=\"!required && (value === undefined || !schema.readonly)\" :class=\"theme.optionalCheckbox\">\n                    <label>\n                        <input type=\"checkbox\" @change=\"toggleOptional()\" :checked=\"value === undefined\" :disabled=\"readonly || schema.readonly\" />\n                        is undefined\n                    </label>\n                </div>\n                <button v-if=\"hasDeleteButton\" :class=\"theme.button\" @click=\"$emit('delete')\">\n                    <icon :icon=\"icon\" :text=\"icon.delete\"></icon>\n                </button>\n                <button v-if=\"canPreview\" :class=\"theme.button\" @click=\"collapseOrExpand()\">\n                    <icon :icon=\"icon\" :text=\"collapsed ? icon.expand : icon.collapse\"></icon>\n                </button>\n            </div>\n        </label>\n        <textarea v-if=\"useTextArea\"\n            :class=\"theme.formControl\"\n            @change=\"onChange($event)\"\n            @keyup=\"onChange($event)\"\n            rows=\"5\"\n            :readOnly=\"readonly || schema.readonly\">{{value}}</textarea>\n        <input v-if=\"useInput\"\n            :class=\"theme.formControl\"\n            :type=\"schema.format\"\n            @change=\"onChange($event)\"\n            @keyup=\"onChange($event)\"\n            :value=\"value\"\n            :readOnly=\"readonly || schema.readonly\" />\n        <select v-if=\"useSelect\"\n            :class=\"theme.formControl\"\n            @change=\"onChange($event)\">\n            <option v-for=\"(e, i) in schema.enum\"\n                :key=\"i\"\n                :value=\"e\"\n                :selected=\"value === e\">\n                {{e}}\n            </option>\n        </select>\n        <img v-if=\"value && !collapsed && canPreviewImage\"\n            :style=\"imagePreviewStyle\"\n            :src=\"getImageUrl\" />\n        <div v-if=\"value && !collapsed && canPreviewMarkdown\" v-html=\"getMarkdown\"></div>\n        <pre v-if=\"value && !collapsed && canPreviewCode\"><code v-html=\"getCode\"></code></pre>\n        <p :class=\"theme.help\">{{schema.description}}</p>\n        <p v-if=\"errorMessage\" :class=\"theme.help\">{{errorMessage}}</p>\n    </div>\n    ",
+    props: ["schema", "initialValue", "title", "theme", "icon", "locale", "readonly", "required", "hasDeleteButton", "dragula", "md", "hljs", "forceHttps"],
     data: function () {
@@ -16,5 +16,5 @@ var value = common.getDefaultValue(this.required, this.schema, this.initialValue);
             errorMessage: undefined,
-            isImageUrl: false,
-            buttonGroupStyle: common.buttonGroupStyle,
+            buttonGroupStyle: common.buttonGroupStyleString,
             collapsed: false,
+            imagePreviewStyle: common.imagePreviewStyleString,
         };
@@ -25,8 +25,24 @@ },
     },
-    methods: {
+    computed: {
+        canPreviewImage: function () {
+            return common.isImageUrl(this.value);
+        },
+        canPreviewMarkdown: function () {
+            return this.md && this.schema.format === "markdown";
+        },
+        canPreviewCode: function () {
+            return this.hljs && this.schema.format === "code";
+        },
+        canPreview: function () {
+            return this.value && (this.canPreviewImage || this.canPreviewMarkdown || this.canPreviewCode);
+        },
         useTextArea: function () {
-            return this.value !== undefined && (this.schema.enum === undefined || this.readonly || this.schema.readonly) && this.schema.format === "textarea";
+            return this.value !== undefined
+                && (this.schema.enum === undefined || this.readonly || this.schema.readonly)
+                && (this.schema.format === "textarea" || this.schema.format === "code" || this.schema.format === "markdown");
         },
         useInput: function () {
-            return this.value !== undefined && (this.schema.enum === undefined || this.readonly || this.schema.readonly) && this.schema.format !== "textarea";
+            return this.value !== undefined
+                && (this.schema.enum === undefined || this.readonly || this.schema.readonly)
+                && (this.schema.format !== "textarea" && this.schema.format !== "code" && this.schema.format !== "markdown");
         },
@@ -36,2 +52,13 @@ useSelect: function () {
         },
+        getImageUrl: function () {
+            return this.forceHttps ? common.replaceProtocal(this.value) : this.value;
+        },
+        getMarkdown: function () {
+            return this.md.render(this.value);
+        },
+        getCode: function () {
+            return this.hljs.highlightAuto(this.value).value;
+        },
+    },
+    methods: {
         onChange: function (e) {
@@ -44,3 +71,2 @@ this.value = e.target.value;
             this.errorMessage = common.getErrorMessageOfString(this.value, this.schema, this.locale);
-            this.isImageUrl = common.isImageUrl(this.value);
         },
@@ -47,0 +73,0 @@ toggleOptional: function () {

package.json

 {
   "name": "schema-based-json-editor",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "A reactjs, angular2 and vuejs component of schema based json editor.",
@@ -10,3 +10,3 @@ "main": "index.js",
     "lint": "tslint \"src/**/*.tsx\" \"demo/**/*.tsx\" \"src/**/*.ts\" \"demo/**/*.ts\" \"spec/**/*.ts\"",
-    "static": "mkdir ./demo/css && cp -r ./node_modules/bootstrap/dist/css/bootstrap.min.css ./demo/css/ && cp -r ./node_modules/font-awesome/css/font-awesome.min.css ./demo/css/ && cp -r ./node_modules/dragula/dist/dragula.min.css ./demo/css/ && cp -r ./node_modules/font-awesome/fonts/. ./demo/fonts",
+    "static": "mkdir ./demo/css && cp -r ./node_modules/bootstrap/dist/css/bootstrap.min.css ./demo/css/ && cp -r ./node_modules/font-awesome/css/font-awesome.min.css ./demo/css/ && cp -r ./node_modules/dragula/dist/dragula.min.css ./demo/css/ && cp -r ./node_modules/font-awesome/fonts/. ./demo/fonts && mkdir ./demo/css/highlight.js && cp -r ./node_modules/highlight.js/styles/default.css ./demo/css/highlight.js/",
     "test": "tsc -p spec && jasmine"
@@ -32,3 +32,2 @@ },
   "dependencies": {
-    "dragula": "^3.7.2",
     "lodash": "^4.17.2",
@@ -48,2 +47,3 @@ "tslib": "^1.1.0"
     "@types/dragula": "^2.1.29",
+    "@types/highlight.js": "^9.1.8",
     "@types/jasmine": "^2.5.38",
@@ -56,4 +56,7 @@ "@types/lodash": "^4.14.38",
     "core-js": "^2.4.1",
+    "dragula": "^3.7.2",
     "font-awesome": "^4.6.3",
+    "highlight.js": "^9.8.0",
     "jasmine": "^2.5.2",
+    "markdown-it": "^8.1.0",
     "react": "^15.4.0",
@@ -60,0 +63,0 @@ "react-dom": "^15.4.0",

README.md

@@ -13,8 +13,2 @@ [![Dependency Status](https://david-dm.org/plantain-00/schema-based-json-editor.svg)](https://david-dm.org/plantain-00/schema-based-json-editor)
 
-#### link or bundle styles of `dragula`
-
-```
-<link rel="stylesheet" href="node_modules/dragula/dist/dragula.min.css">
-```
-
 #### reactjs component demo
@@ -95,2 +89,6 @@
 + readonly: optional, a boolean value
++ dragula: optional the `dragula` library object if you want to reorder array by drag and drop
++ markdownit: optional, the `markdown-it` library object if you want to preview markdown
++ hljs: optional, the `highlight.js` library object if you want to highlight code
++ forceHttps: optional, a boolean value, if true, the preview url of images will be `https://` rather than `http://`
 
@@ -107,2 +105,3 @@ #### features
 + string schema fields: format, enum, minLength, maxLength, pattern
++ image preview, code highlight, markdown preview
 
@@ -109,0 +108,0 @@ #### change logs

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

243439

increased by13.23%

Dependency count

2

decreased by-33.33%

Lines of code

3159

increased by12.54%

Worsened metrics

Dev dependency count

31

increased by14.81%

Number of lines in readme file

108

decreased by-0.92%

Dependency changes

• - Removeddragula@^3.7.2

• - Removedatoa@1.0.0(transitive)

• - Removedcontra@1.9.4(transitive)

• - Removedcrossvent@1.5.5(transitive)

• - Removedcustom-event@1.0.1(transitive)

• - Removeddragula@3.7.3(transitive)

• - Removedticky@1.0.1(transitive)