Added on change event and fixed lint errors

package.json

@@ -1,7 +1,7 @@
 {
   "name": "codeeditor",
   "widgetName": "CodeEditor",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Ace code editor, as a Mendix pluggable widget.",
   "copyright": "© Mendix Technology BV 2022. All rights reserved.",
   "author": "Carter Moorse",

src/CodeEditor.editorConfig.ts

@@ -34,66 +34,75 @@ export type Problem = {
 };
 
 type BaseProps = {
-  type: "Image" | "Container" | "RowLayout" | "Text" | "DropZone" | "Selectable" | "Datasource";
-  grow?: number; // optionally sets a growth factor if used in a layout (default = 1)
-}
+    type: "Image" | "Container" | "RowLayout" | "Text" | "DropZone" | "Selectable" | "Datasource";
+    grow?: number; // optionally sets a growth factor if used in a layout (default = 1)
+};
 
 type ImageProps = BaseProps & {
-  type: "Image";
-  document?: string; // svg image
-  data?: string; // base64 image
-  property?: object; // widget image property object from Values API
-  width?: number; // sets a fixed maximum width
-  height?: number; // sets a fixed maximum height
-}
+    type: "Image";
+    document?: string; // svg image
+    data?: string; // base64 image
+    property?: object; // widget image property object from Values API
+    width?: number; // sets a fixed maximum width
+    height?: number; // sets a fixed maximum height
+};
 
 type ContainerProps = BaseProps & {
-  type: "Container" | "RowLayout";
-  children: PreviewProps[]; // any other preview element
-  borders?: boolean; // sets borders around the layout to visually group its children
-  borderRadius?: number; // integer. Can be used to create rounded borders
-  backgroundColor?: string; // HTML color, formatted #RRGGBB
-  borderWidth?: number; // sets the border width
-  padding?: number; // integer. adds padding around the container
-}
+    type: "Container" | "RowLayout";
+    children: PreviewProps[]; // any other preview element
+    borders?: boolean; // sets borders around the layout to visually group its children
+    borderRadius?: number; // integer. Can be used to create rounded borders
+    backgroundColor?: string; // HTML color, formatted #RRGGBB
+    borderWidth?: number; // sets the border width
+    padding?: number; // integer. adds padding around the container
+};
 
 type RowLayoutProps = ContainerProps & {
-  type: "RowLayout";
-  columnSize?: "fixed" | "grow" // default is fixed
-}
+    type: "RowLayout";
+    columnSize?: "fixed" | "grow"; // default is fixed
+};
 
 type TextProps = BaseProps & {
-  type: "Text";
-  content: string; // text that should be shown
-  fontSize?: number; // sets the font size
-  fontColor?: string; // HTML color, formatted #RRGGBB
-  bold?: boolean;
-  italic?: boolean;
-}
+    type: "Text";
+    content: string; // text that should be shown
+    fontSize?: number; // sets the font size
+    fontColor?: string; // HTML color, formatted #RRGGBB
+    bold?: boolean;
+    italic?: boolean;
+};
 
 type DropZoneProps = BaseProps & {
-  type: "DropZone";
-  property: object; // widgets property object from Values API
-  placeholder: string; // text to be shown inside the dropzone when empty
-  showDataSourceHeader?: boolean; // true by default. Toggles whether to show a header containing information about the datasource
-}
-
+    type: "DropZone";
+    property: object; // widgets property object from Values API
+    placeholder: string; // text to be shown inside the dropzone when empty
+    showDataSourceHeader?: boolean; // true by default. Toggles whether to show a header containing information about the datasource
+};
 
 type SelectableProps = BaseProps & {
-  type: "Selectable";
-  object: object; // object property instance from the Value API
-  child: PreviewProps; // any type of preview property to visualize the object instance
-}
+    type: "Selectable";
+    object: object; // object property instance from the Value API
+    child: PreviewProps; // any type of preview property to visualize the object instance
+};
 
 type DatasourceProps = BaseProps & {
-  type: "Datasource";
-  property: object | null; // datasource property object from Values API
-  child?: PreviewProps; // any type of preview property component (optional)
-}
-
-export type PreviewProps = ImageProps | ContainerProps | RowLayoutProps | TextProps | DropZoneProps | SelectableProps | DatasourceProps;
+    type: "Datasource";
+    property: object | null; // datasource property object from Values API
+    child?: PreviewProps; // any type of preview property component (optional)
+};
 
-export function getProperties(_values: CodeEditorPreviewProps, defaultProperties: Properties/*, target: Platform*/): Properties {
+export type PreviewProps =
+    | ImageProps
+    | ContainerProps
+    | RowLayoutProps
+    | TextProps
+    | DropZoneProps
+    | SelectableProps
+    | DatasourceProps;
+
+export function getProperties(
+    _values: CodeEditorPreviewProps,
+    defaultProperties: Properties /* target: Platform */
+): Properties {
     // Do the values manipulation here to control the visibility of properties in Studio and Studio Pro conditionally.
     /* Example
     if (values.myProperty === "custom") {