json-object-editor 0.10.312 → 0.10.400

package/CHANGELOG.md

@@ -1,10 +1,18 @@
 ## CHANGELOG
 
+### 0.10.400
+	- Initial work with ai partner
+	- button field added
+	- getFromServer added to object options
+	- best practices doc added
+
 ### 0.10.300
 	- initial aws fix for bucketname
 	310 - added tag_id to tags
 	311 - fixed undefined icon bug in autocomplete
 	312 - sourcemap fixed, status subset bug fixed.
+	320 - Upgraded tinyMCE
+	321 - added code to status
 	
 ### 0.10.200
 	227 - no product user select

package/css/joe-styles.css

@@ -1,6 +1,10 @@
 @charset "utf-8";
 /* JOE UI Styles */
 /* theme: #006688, 0,102,136*/
+
+:root {
+    --tinymce-offset: 55px;
+}
 .clear{
     clear:both;
 }
@@ -2889,6 +2893,9 @@ joe-datepicker-holder > .Zebra_DatePicker.dp_visible {
     margin:0;
     line-height: 24px;
 }
+.joe-object-field.button-field .joe-button {
+    float:none;
+}
 .joe-object-field .joe-button,
 capp-card joe-button {
     border-radius: 20px;
@@ -3711,7 +3718,7 @@ joe-message-holder {
     /* background: #fff; */
     overflow: hidden;
     display:none;
-    z-index:10;
+    z-index:10000;
     /* opacity: 1; */
 }
 joe-message-holder.active{
@@ -3866,7 +3873,58 @@ div.mce-fullscreen{
     right: 0px !important;
     width: auto !important;
 }
+.tox-statusbar__branding,
+.tox-promotion {
+  display: none !important;
+}
+
+/* .tox {
+    --tox-bg-color: #f2f2f2;
+    --tox-toolbar-bg: #f2f2f2;
+    --tox-sidebar-bg: #f2f2f2;
+    --tox-dialog-bg: #f2f2f2;
+} */
+
+/* Make sure TinyMCE UI always floats above other parts of the UI */
+.tox {
+    z-index: 10000 !important;
+  }
+  
+  .tox-editor-container {
+    position: relative !important;
+    z-index: 10000 !important;
+  }
+  
+  /* Also ensure the panel or overlay doesn't clip dropdowns */
+  .joe-overlay-panel,
+  .joe-tinymce-holder {
+    overflow: visible !important;
+  }
+  .tox.tox-tinymce.tox-fullscreen {
+    left: var(--tinymce-offset) !important;
+    top: var(--tinymce-offset) !important;
+
+    width: calc(100vw - var(--tinymce-offset) - 5px) !important;
+    height: calc(100vh - var(--tinymce-offset) - 5px) !important;
+    position: fixed !important;
+    z-index: 20000 !important; /* stay above most UI, but still under your header/sidebar if needed */
+  }
 
+  /* Remove rounded corners and apply gold border to TinyMCE wrapper */
+.tox.tox-tinymce {
+    border: 1px solid #dca042 !important;
+    border-radius: 0 !important;
+  }
+  
+  /* Remove radius inside the editor area */
+  .tox .tox-editor-container {
+    border-radius: 0 !important;
+  }
+  
+  /* Optional: remove radius from content iframe too */
+  .tox .tox-edit-area iframe {
+    border-radius: 0 !important;
+  }
 /*-------------------------------------------------------------------->
 	From the Datepicker file, thanks zebra
 <--------------------------------------------------------------------*/

package/css/joe.css

@@ -487,6 +487,10 @@
 *   Apache 2.0 License */.geocoder-control-input{position:absolute;left:0;top:0;background-color:#fff;background-repeat:no-repeat;background-image:url(../img/search.png);background-size:26px;border:0;padding:0;text-indent:6px;font-size:13px;height:26px;width:100%;line-height:26px;background-position:right center;cursor:pointer}.geocoder-control{width:26px;height:26px;-webkit-transition:width .175s ease-in;-moz-transition:width .175s ease-in;-ms-transition:width .175s ease-in;-o-transition:width .175s ease-in;transition:width .175s ease-in}.geocoder-control-expanded,.leaflet-touch .geocoder-control-expanded{width:275px}.geocoder-control-input.geocoder-control-loading{background-image:url(../img/loading.gif);background-size:26px}@media only screen and (min--moz-device-pixel-ratio:2),only screen and (-o-min-device-pixel-ratio:2/1),only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min-device-pixel-ratio:2){.geocoder-control-input{background-image:url(../img/search@2x.png)}.geocoder-control-input.geocoder-control-loading{background-image:url(../img/loading@2x.gif)}}.geocoder-control-input:focus{outline:0;cursor:text}.geocoder-control-input::-ms-clear{display:none}.geocoder-control-suggestions{width:100%;position:absolute;top:26px;left:0;list-style:none;padding:0;margin:10px 0 0;overflow:hidden;display:none}.geocoder-control-suggestions .geocoder-control-suggestion{font-size:13px;padding:7px;background:#fff;border-top:1px solid #f1f1f1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.geocoder-control-suggestions .geocoder-control-suggestion:first-child{border:0}.geocoder-control-suggestions .geocoder-control-suggestion.geocoder-control-selected,.geocoder-control-suggestions .geocoder-control-suggestion:hover{background:#00c0ff;border-color:#00c0ff}.leaflet-right .geocoder-control-suggestions{left:auto;right:0}.leaflet-right .geocoder-control-input{left:auto;right:0}.leaflet-touch .geocoder-control{width:30px;height:30px}.leaflet-touch .geocoder-control.geocoder-control-expanded{width:275px}.leaflet-touch .geocoder-control-input{height:30px;line-height:30px;background-size:30px}.leaflet-touch .geocoder-control-suggestions{top:30px}.leaflet-oldie .geocoder-control-input,.leaflet-oldie .geocoder-control-suggestions{border:1px solid #999}@charset "utf-8";
 /* JOE UI Styles */
 /* theme: #006688, 0,102,136*/
+
+:root {
+    --tinymce-offset: 55px;
+}
 .clear{
     clear:both;
 }
@@ -3375,6 +3379,9 @@ joe-datepicker-holder > .Zebra_DatePicker.dp_visible {
     margin:0;
     line-height: 24px;
 }
+.joe-object-field.button-field .joe-button {
+    float:none;
+}
 .joe-object-field .joe-button,
 capp-card joe-button {
     border-radius: 20px;
@@ -4197,7 +4204,7 @@ joe-message-holder {
     /* background: #fff; */
     overflow: hidden;
     display:none;
-    z-index:10;
+    z-index:10000;
     /* opacity: 1; */
 }
 joe-message-holder.active{
@@ -4352,7 +4359,58 @@ div.mce-fullscreen{
     right: 0px !important;
     width: auto !important;
 }
+.tox-statusbar__branding,
+.tox-promotion {
+  display: none !important;
+}
+
+/* .tox {
+    --tox-bg-color: #f2f2f2;
+    --tox-toolbar-bg: #f2f2f2;
+    --tox-sidebar-bg: #f2f2f2;
+    --tox-dialog-bg: #f2f2f2;
+} */
+
+/* Make sure TinyMCE UI always floats above other parts of the UI */
+.tox {
+    z-index: 10000 !important;
+  }
+  
+  .tox-editor-container {
+    position: relative !important;
+    z-index: 10000 !important;
+  }
+  
+  /* Also ensure the panel or overlay doesn't clip dropdowns */
+  .joe-overlay-panel,
+  .joe-tinymce-holder {
+    overflow: visible !important;
+  }
+  .tox.tox-tinymce.tox-fullscreen {
+    left: var(--tinymce-offset) !important;
+    top: var(--tinymce-offset) !important;
+
+    width: calc(100vw - var(--tinymce-offset) - 5px) !important;
+    height: calc(100vh - var(--tinymce-offset) - 5px) !important;
+    position: fixed !important;
+    z-index: 20000 !important; /* stay above most UI, but still under your header/sidebar if needed */
+  }
 
+  /* Remove rounded corners and apply gold border to TinyMCE wrapper */
+.tox.tox-tinymce {
+    border: 1px solid #dca042 !important;
+    border-radius: 0 !important;
+  }
+  
+  /* Remove radius inside the editor area */
+  .tox .tox-editor-container {
+    border-radius: 0 !important;
+  }
+  
+  /* Optional: remove radius from content iframe too */
+  .tox .tox-edit-area iframe {
+    border-radius: 0 !important;
+  }
 /*-------------------------------------------------------------------->
 	From the Datepicker file, thanks zebra
 <--------------------------------------------------------------------*/

package/js/JsonObjectEditor.jquery.craydent.js

@@ -476,6 +476,7 @@ function JsonObjectEditor(specs){
                 respond_timeout = setTimeout(self.respond,200);
             }
         });
+        self.initButtons();
         initialized = true;
         self.respond();
         endLogGroup();
@@ -483,7 +484,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;
@@ -3369,7 +3401,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;
@@ -5565,53 +5599,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
@@ -5663,7 +5754,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
  <-----------------------------*/
@@ -7875,6 +8018,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;
             }
@@ -7912,7 +8058,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':
@@ -7931,8 +8077,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':
@@ -8062,7 +8213,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
  <--------------------------------------------------------------------*/