refactor(core): поддрежка вывода редактора без свойств битрикса

app/base.conf.js

@@ -31,9 +31,14 @@ const config = {
                 test: /\.js$/,
                 loader: path.resolve(__dirname, 'node_modules', 'babel-loader'),
                 options: {
-                    babelrc: false,
+                    babelrc: true,
                 }
             },
+            {
+                test: /\.tsx?$/,
+                use: 'ts-loader',
+                exclude: /node_modules/,
+            },
             {
                 test: /\.vue$/,
                 loader: 'vue-loader'
@@ -65,9 +70,6 @@ const config = {
                 test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
                 //loader: path.resolve(__dirname, 'node_modules', 'file-loader'),
                 loader: 'file-loader',
-                query: {
-                    name: '[hash:8].[ext]',
-                },
             },
         ]
     },

app/package.json

@@ -50,7 +50,7 @@
     "style-loader": "^0.23.1",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",
-    "ts-loader": "^7.0.3",
+    "ts-loader": "^9.2.6",
     "tslint": "~5.9.1",
     "tslint-config-standard": "~7.0.0",
     "tslint-loader": "~3.5.3",
@@ -62,7 +62,7 @@
     "vue-html-loader": "^1.2.4",
     "vue-loader": "14.2.2",
     "vue-template-compiler": "^2.3.4",
-    "webpack": "^4.20.2",
+    "webpack": "^5.65.0",
     "webpack-cli": "^3.1.2",
     "webpack-dev-server": ">=3.1.11"
   }

app/src/app.js

@@ -1,34 +1,8 @@
-import Vue from 'vue';
-import ElementUI from 'element-ui';
-import VueYoutube from 'vue-youtube'
-import 'element-ui/lib/theme-chalk/index.css';
-import hello from './hello.vue';
-import baseField from "./baseField";
-import locale from 'element-ui/lib/locale/lang/ru-RU'
+import BlockEditor from './blockEditor.ts';
 
-Vue.use(ElementUI, { locale });
-Vue.mixin(baseField);
-Vue.use(VueYoutube);
 
-document.gtdEditor = ($value, input_name, app_id, allowBlocks = [], propId=0) => {
-    let value = JSON.parse($value) || [];
-    let block = allowBlocks.length > 0 ? JSON.parse(allowBlocks) : []
-    new Vue({
-        data(){
-            return {
-                val: value,
-                inputName: input_name,
-                allowBlocks: block
-            }
-        },
-        render: (h) => h(hello),
-        mounted() {
-            let appTr = document.getElementById('tr_PROPERTY_'+propId);
-            if(appTr){
-                appTr.childNodes[3].colSpan = "2";
-                appTr.childNodes[3].width = "100%";
-                appTr.childNodes[1].remove();
-            }
-        }
-    }).$mount('#' + app_id)                                                     // Если должен быть найден один элемент
-}
+// backward compatibility
+var blockEditor = BlockEditor;
+document.gtdEditor = BlockEditor;
+
+export default blockEditor;

app/src/blockEditor.ts

@@ -0,0 +1,93 @@
+import Vue from 'vue';
+import ElementUI from 'element-ui';
+// @ts-ignore
+import VueYoutube from 'vue-youtube'
+import 'element-ui/lib/theme-chalk/index.css';
+// @ts-ignore
+import hello from './hello.vue';
+import baseField from "./baseField";
+// @ts-ignore
+import locale from 'element-ui/lib/locale/lang/ru-RU'
+
+Vue.use(ElementUI, { locale });
+Vue.mixin(baseField);
+Vue.use(VueYoutube);
+
+
+
+export default class BlockEditor{
+
+    private _inputName:String = "";
+    private _value:Array<any> = [];
+    private _allowBlock:Array<string> = [];
+    private _appId: string = "";
+    private _onValueChange:valueChangeCallback;
+    private _onRendered:any;
+
+    constructor(value: string, inputName: string = "", allowBlock: string = "", appId: string = "") {
+        this.setValue(value);
+        this.setAllowBlocks(allowBlock);
+        this._appId = appId.length > 0 ? appId : this.makeId(10);
+        this._inputName = inputName !== "" ? inputName : this.makeId(10);
+    }
+
+    initEditor(){
+        document.addEventListener('DOMContentLoaded', () => { // Аналог $(document).ready(function(){
+            new Vue({
+                data:() => {
+                    return {
+                        val: this._value,
+                        inputName: this._inputName,
+                        allowBlocks: this._allowBlock,
+                        callback: this._onValueChange
+                    }
+                },
+                render: (h) => h(hello),
+                mounted: () => {
+                    if(typeof this._onRendered === 'function'){
+                        this._onRendered();
+                    }
+                }
+            }).$mount('#' + this._appId)
+        });
+    }
+
+
+    setValue(value:string) {
+        this._value = JSON.parse(value) || [];
+    }
+
+    setAllowBlocks(value:string){
+        this._allowBlock = value.length > 0 ? JSON.parse(value) : []
+    }
+
+    setInputName(inputName:string) {
+        this._inputName = inputName;
+    }
+
+    onValueChange(callBack:valueChangeCallback) {
+        if(typeof callBack === "function"){
+            this._onValueChange = callBack;
+        }
+    }
+
+    onRendered(callBack:any) {
+        if(typeof callBack === 'function'){
+            this._onRendered = callBack;
+        }
+    }
+
+    makeId(length:number = 10) :string
+    {
+        let result           = '';
+        const characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+        const charactersLength = characters.length;
+        for ( var i = 0; i < length; i++ ) {
+            result += characters.charAt(Math.floor(Math.random() *
+                charactersLength));
+        }
+        return result;
+    }
+}
+
+type valueChangeCallback = (value: any) => void

app/src/hello.vue

@@ -185,10 +185,12 @@
         this.allowBlock = this.$root.$data.allowBlocks;
         this.inputName = this.$root.$data.inputName;
         this.containerTop = this.$el.getBoundingClientRect().top;
-        debugger;
     },
     computed:{
       formData(){
+        if(typeof this.$root.callback ===  "function"){
+          this.$root.callback(this.result);
+        }
         return JSON.stringify(this.result);
       },
       availableBlock(){

app/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "noImplicitAny": true,
+    "module": "es6",
+    "target": "es5",
+    "jsx": "react",
+    "allowJs": true,
+    "moduleResolution": "node"
+  }
+}