json-object-editor 0.10.312 → 0.10.400

package/js/joe.js

@@ -482,6 +482,7 @@ function JsonObjectEditor(specs){
                 respond_timeout = setTimeout(self.respond,200);
             }
         });
+        self.initButtons();
         initialized = true;
         self.respond();
         endLogGroup();
@@ -489,7 +490,38 @@ function JsonObjectEditor(specs){
 
         callback && callback();
     };
+    this.initButtons = function(){
+        // 🧩 Joe Button Universal Click Handler
+        $(document).on('click', 'joe-button', function(e) {
+            e.preventDefault();
 
+            var $btn = $(this);
+            var actionName = $btn.attr('action');
+
+            if (!actionName) {
+                console.warn('No action defined for joe-button');
+                return;
+            }
+
+            var currentObject = _joe.current ? _joe.current.object : null;
+            var currentSchema = _joe.current && _joe.current.schema;
+            var currentSchemaMethods = currentSchema ? currentSchema.methods : null;
+
+            // Priority 1: Backend async
+            if (JOE.async && typeof JOE.async[actionName] === 'function') {
+                JOE.async[actionName](currentObject, e);
+                return;
+            }
+
+            // Priority 2: Schema-defined client methods
+            if (currentSchemaMethods && typeof currentSchemaMethods[actionName] === 'function') {
+                currentSchemaMethods[actionName](currentObject, e);
+                return;
+            }
+
+            console.warn('No method found for joe-button action:', actionName);
+        });
+    }
     this.resizeOk = function(){
         if(!$c.isMobile()){
             return true;
@@ -3375,7 +3407,9 @@ this.renderHTMLContent = function(specs){
             case 'color':
                 html+= self.renderColorField(prop);
                 break;
-
+            case 'button':
+                html += self.renderButtonField(prop);
+                break;
             case 'group':
                 html+= self.renderCheckboxGroupField(prop);
                 break;
@@ -5571,53 +5605,110 @@ this.renderHTMLContent = function(specs){
     var tinyconfig = {};
     this.renderTinyMCEField = function(prop){
         /*|{
-            tags:'render,field,wysiwyg'
+            tags:'render,field,wysiwyg,tinyMCE',
         }|*/
-         var locked = self.propAsFuncOrValue(prop.locked)?' disabled ':'';
-        var height = (prop.height)?'style="height:'+prop.height+';"' : '';
-        var editor_id = cuid();
-        var html=
-            '<div class="joe-tinymce-holder joe-texteditor-field joe-field" '
-            /*+height*/+' data-texteditor_id="'+editor_id+'" data-ftype="tinymce" name="'+prop.name+'">'+
-            '<div id="'+editor_id+'" class="joe-tinymce">'+(prop.value || "")+'</div>'+
-            '</div>';
+        const locked = self.propAsFuncOrValue(prop.locked) ? 'disabled' : '';
+        const heightStyle = (prop.height) ? `style="height:${prop.height};"` : '';
+        const editor_id = cuid();
+        
+        const html =
+          `<div class="joe-tinymce-holder joe-texteditor-field joe-field wysiwyg-field"
+               data-texteditor_id="${editor_id}"
+               data-ftype="tinymce"
+               data-name="${prop.name}">
+             <textarea id="${editor_id}" class="joe-tinymce" ${locked} ${heightStyle}>${prop.value || ''}</textarea>
+           </div>`;
+        
         return html;
     };
 
     this.readyTinyMCEs = function() {
         tinymce.init({
             selector: ".joe-tinymce",
-            //max_height: 300,
-           // height:500,
-        plugins:['table wordcount link image code searchreplace autoresize fullscreen'],
-        menu : { // this is the complete default configuration
-        edit   : {title : 'Edit'  , items : 'undo redo | cut copy paste pastetext | selectall'},
-        format : {title : 'Format', items : 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
-        table  : {title : 'Table' , items : 'inserttable tableprops deletetable | cell row column'},
-        tools  : {title : 'Tools' , items : 'spellchecker code link image'}
-        },
-        toolbar: 'fullscreen | undo redo | bold italic removeformat | bullist numlist outdent indent',
-          //  toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image'
-          /*  plugins: [
-                "advlist autolink lists link image charmap print preview anchor",
-                "searchreplace visualblocks code fullscreen",
-                "insertdatetime media table contextmenu paste"
-            ],*/
-            /*toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"*/
-        });
-        $('.joe-tinymce').each(function(){
-            var field = self.getField($(this).parents('.wysiwyg-field').data('name'));
-            if(field.height){
-                $('.mce-edit-area').height(field.height);
+            base_url: '/JsonObjectEditor/js/plugins/tinymce',
+            suffix: '.min',
+            license_key: 'gpl',
+            browser_spellcheck: true,
+            contextmenu: false,
+            content_style: `
+                body {
+                font-size: 16px;
+                line-height: 21px;
+                }
+            `,
+            plugins: ['table', 'wordcount', 'link', 'image', 'code', 'searchreplace', 'autoresize', 'fullscreen', 'lists'],
+   
+            toolbar: 'fullscreen | undo redo | h1 h2 h3 h4 h5 |bold italic removeformat | bullist numlist outdent indent | code',
+          
+            // Local TinyMCE asset paths
+            skin_url: '/JsonObjectEditor/js/plugins/tinymce/skins/ui/oxide/',
+            content_css:'/JsonObjectEditor/js/plugins/tinymce/skins/content/default/content.css',
+            theme_url: '/JsonObjectEditor/js/plugins/tinymce/themes/silver/theme.min.js',
+            icons_url: '/JsonObjectEditor/js/plugins/tinymce/icons/default/icons.min.js',
+          
+            // Optional: hook into instance ready for dynamic height
+            init_instance_callback: function(editor) {
+              const textarea = editor.targetElm;
+              const fieldContainer = textarea.closest('.wysiwyg-field');
+              if (fieldContainer) {
+                const fieldName = fieldContainer.getAttribute('data-name');
+                const field = self.getField(fieldName);
+                if (field && field.height) {
+                  const iframe = editor.getContainer().querySelector('iframe');
+                  if (iframe) {
+                    iframe.style.height = `${field.height}px`;
+                  }
+                }
+              }
             }
-
-        });
+          });
 
     };
+    this.cleanTinyMCEs  = function(html) {
+        const temp = document.createElement('div');
+        temp.innerHTML = html;
+      
+        // Loop through all elements
+        temp.querySelectorAll('*').forEach(el => {
+          // Remove all data-* attributes
+          [...el.attributes].forEach(attr => {
+            if (attr.name.startsWith('data-')) {
+              el.removeAttribute(attr.name);
+            }
+      
+            // Optionally clean up some noisy inline styles
+            if (attr.name === 'style') {
+              const styleVal = attr.value.toLowerCase();
+              if (
+                styleVal.includes('font-weight: 400') ||
+                styleVal.includes('font-family') ||
+                styleVal.includes('white-space:pre') ||
+                styleVal.includes('line-height') ||
+                styleVal.includes('margin') ||
+                styleVal.includes('orphans') || // lol
+                styleVal.includes('widows')
+              ) {
+                el.removeAttribute('style');
+              }
+            }
+          });
+      
+          // Clean up empty span tags (common from Google Docs)
+          if (
+            el.tagName === 'SPAN' &&
+            el.attributes.length === 0 &&
+            el.textContent.trim() === ''
+          ) {
+            el.remove();
+          }
+        });
+      
+        return temp.innerHTML;
+      }
     self.texteditors = [];
 
     this.readyTextEditors = this.readyTinyMCEs;
-    encapsulateFieldType('wysiwyg',self.renderTinyMCEField,{ready:self.readyTextEditors});
+    encapsulateFieldType('wysiwyg',self.renderTinyMCEField,{ready:self.readyTextEditors,clean:this.cleanTinyMCEs});
 
 /*----------------------------->
 Y | Object Field
@@ -5669,7 +5760,59 @@ Y | Object Field
         var html= 'passthrough';
         return html;
     };
+  /*----------------------------->
+ BTN | BTN Field
+ <-----------------------------*/  
+    this.renderButtonField = function(prop) {
+        /*|{
+            tags:'render,field,button',
+            specs:'display,method,color,schema,svg,bgcolor'
+        }|*/
+        var itemObj = self.current.object || {}; // support field functions needing context
+    
+        var display = self.propAsFuncOrValue(prop.display, itemObj);
+        var method = self.propAsFuncOrValue(prop.method, itemObj);
+        var color = self.propAsFuncOrValue(prop.color, itemObj);
+        var schema = self.propAsFuncOrValue(prop.schema, itemObj);
+        var svgOverride = self.propAsFuncOrValue(prop.svg, itemObj);
+        var title = self.propAsFuncOrValue(prop.title, itemObj);
+        var bgcolor = self.propAsFuncOrValue(prop.bgcolor, itemObj);
+        var cssclass = self.propAsFuncOrValue(prop.cssclass, itemObj)||' joe-nofloat';
+        var svgMarkup = '';
+    
+        // 1. Try to pull menuicon from schema if schema is provided
+        if (schema && _joe && _joe.Schemas && _joe.Schemas[schema] && _joe.Schemas[schema].menuicon) {
+            svgMarkup = _joe.Schemas[schema].menuicon;
+        }
+    
+        // 2. Direct SVG overrides schema icon if provided
+        if (svgOverride) {
+            svgMarkup = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">' + svgOverride + '</svg>';
+        }
     
+        // 3. Build the button
+        var styleAttr = bgcolor ? 'style="background-color: ' + bgcolor + ';"' : '';
+    
+        var html = '<joe-button class="joe-button joe-field '+cssclass
+            + (color ? ' joe-' + color + '-button' : '')
+            + '" name="' + (prop.name || '') + '" '
+            + (schema ? 'schema="' + schema + '" ' : '')
+            + (method ? 'action="' + method + '" ' : '')
+            + (color ? 'color="' + color + '" ' : '')
+            + (title ? 'title="' + title + '" ' : '')
+            + styleAttr + ' '
+            + 'data-btnid="' + (prop.name || '') + '">';
+    
+        if (svgMarkup) {
+            html += svgMarkup + ' ';
+        }
+    
+        html += (display || "Button") + '</joe-button>';
+    
+        return html;
+    };
+    
+    encapsulateFieldType('button', self.renderButtonField);
 /*----------------------------->
  27 | Comments
  <-----------------------------*/
@@ -7881,6 +8024,9 @@ Field Rendering Helpers
 		//var parentFind = $('.joe-overlay.active');
 
 		parentFind.find('.joe-field').each(function(){
+            if (this.nodeName.toLowerCase() === 'joe-button') {
+                return true; // Skip buttons, they are action elements only
+            }
             if($(this).parents('.objectList-field,.objectlist-field').length){
                 return true;
             }
@@ -7918,7 +8064,7 @@ Field Rendering Helpers
 				case 'text':
 				default:
 
-					prop = $(this).attr('name');
+					prop = this.getAttribute('data-name') || this.getAttribute('name')
 					if(prop && prop != 'undefined') {//make sure it's suppoesed to be a prop field
                         switch ($(this).data('ftype')) {
                             case 'passthrough':
@@ -7937,8 +8083,13 @@ Field Rendering Helpers
                                 object[prop] =(editor)? editor.getData():self.current.object[prop];
                                 break;
                             case 'tinymce':
-                                var editor = tinymce.editors.where({id:$(this).data('texteditor_id')})[0]||false;
-                                object[prop] =(editor)? editor.getContent():self.current.object[prop];
+                                // var editor = tinymce.editors.where({id:$(this).data('texteditor_id')})[0]||false;
+                                // object[prop] =(editor)? editor.getContent():self.current.object[prop];
+                                // break;
+                                var editorId = this.getAttribute('data-texteditor_id');
+                                var editor = window.tinymce?.get(editorId);
+                                object[prop] = (editor) ? editor.getContent() : self.current.object[prop];
+                                object[prop] = self.cleanTinyMCEs(object[prop]);
                                 break;
 
                             case 'multisorter':
@@ -8068,7 +8219,48 @@ Field Rendering Helpers
         return constructed;
 		//return object;
 	};
-
+    this.Object.getFromServer = function(id, specs, callback) {
+        /*|{
+            featured:true,
+            tags:'load','get'
+            description:'retrieves a fresh object from server and updates Joe current object'
+        }|*/
+        var specs = specs || {};
+        var schemaName = specs.schema || _joe.current.schemaName || (_joe.current.schema && _joe.current.schema.__schemaname);
+        var goto = (specs.goto === false)?false: true;
+        if (!schemaName || !id) {
+            console.warn('Cannot fetch object: missing schema or ID.');
+            if (callback) callback(false);
+            return;
+        }
+    
+        var url = '/API/object/' + schemaName + '/_id/' + id;
+    
+        $.get(url, function(data) {
+            if (!data || !data._id) {
+                console.warn('No object returned from server.');
+                if (callback) callback(false);
+                return;
+            }
+        var toUpdate = _joe.search(id)[0] || false;
+            if (toUpdate) {
+                $.extend(true, toUpdate, data);
+            }
+            if(goto){
+                if(_joe.current.object && _joe.current.object._id == data._id){
+                    //already on the same object
+                _joe.current.object = data; // 🛠️ Fresh object loaded
+                
+                }
+                var specs = $.extend({},_joe.current.specs||{},{schema:schemaName,force:true}); // 🛠️ Use current view specs if available
+                _joe.show(data, specs); // 🖌️ Full repaint using Joe system
+            }
+            if (callback) callback(true, data);
+        }).fail(function(err) {
+            console.error('Error fetching object from server:', err);
+            if (callback) callback(false);
+        });
+    };
 /*-------------------------------------------------------------------->
     EXPORT DATA
  <--------------------------------------------------------------------*/