json-object-editor 0.10.312 → 0.10.320

package/CHANGELOG.md

@@ -5,6 +5,7 @@
 	310 - added tag_id to tags
 	311 - fixed undefined icon bug in autocomplete
 	312 - sourcemap fixed, status subset bug fixed.
+	320 - Upgraded tinyMCE
 	
 ### 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;
 }
@@ -3711,7 +3715,7 @@ joe-message-holder {
     /* background: #fff; */
     overflow: hidden;
     display:none;
-    z-index:10;
+    z-index:10000;
     /* opacity: 1; */
 }
 joe-message-holder.active{
@@ -3866,7 +3870,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;
 }
@@ -4197,7 +4201,7 @@ joe-message-holder {
     /* background: #fff; */
     overflow: hidden;
     display:none;
-    z-index:10;
+    z-index:10000;
     /* opacity: 1; */
 }
 joe-message-holder.active{
@@ -4352,7 +4356,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

@@ -5565,53 +5565,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
@@ -7912,7 +7969,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 +7988,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':