Inconsistent behavior of text formatting on iPadOS

See https://www.woltlab.com/community/thread/295811-schriftfarbe-schriftart-oder-schriftgr%C3%B6%C3%9Fe-%C3%A4ndern-auf-ipad/

diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabColor.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabColor.js
index 7a681fc9ec2d2d3e8133ecbf94fe70e5d00cfa22..6bd8afd62070ab34dc4166fa0371aea22bf43544 100644 (file)
--- a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabColor.js
+++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabColor.js
@@ -1,5 +1,7 @@
 $.Redactor.prototype.WoltLabColor = function() {
        "use strict";
+
+       let uiRedactorFormat;
        
        // these are hex values, but the '#' was left out for convenience
        var _defaultColors = [
@@ -41,36 +43,28 @@ $.Redactor.prototype.WoltLabColor = function() {
                        });
                        
                        $('<li class="dropdownDivider"></li>').insertBefore(dropdownMenu.children('li').last());
+
+                       require(['WoltLabSuite/Core/Ui/Redactor/Format'], (UiRedactorFormat) => {
+                               uiRedactorFormat = UiRedactorFormat;
+                       });
                },
                
-               setColor: function(key) {
+               setColor(key) {
                        key = key.replace(/^color_/, '');
+
+                       if ($.browser.iOS && !this.detect.isIpad()) {
+                               this.selection.restore();
+                       }
                        
-                       this.selection.save();
-                       
-                       require(['WoltLabSuite/Core/Ui/Redactor/Format'], (function(UiRedactorFormat) {
-                               this.buffer.set();
-                               
-                               UiRedactorFormat.format(this.$editor[0], 'color', '#' + key);
-                               
-                               this.buffer.set();
-                       }).bind(this));
+                       this.buffer.set();
                        
-                       this.selection.restore();
+                       uiRedactorFormat.format(this.$editor[0], 'color', '#' + key);
                },
                
-               removeColor: function() {
-                       this.selection.save();
-                       
-                       require(['WoltLabSuite/Core/Ui/Redactor/Format'], (function(UiRedactorFormat) {
-                               this.buffer.set();
-                               
-                               UiRedactorFormat.removeFormat(this.$editor[0], 'color');
-                               
-                               this.buffer.set();
-                       }).bind(this));
+               removeColor() {
+                       this.buffer.set();
                        
-                       this.selection.restore();
+                       uiRedactorFormat.removeFormat(this.$editor[0], 'color');
                }
        };
 };

diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabFont.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabFont.js
index 52c414ace7b7eed34154a10232e57e13e6950be9..08e2a435dc1bc05a1ed7203a82dbc489db2e7ce6 100644 (file)
--- a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabFont.js
+++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabFont.js
@@ -1,5 +1,7 @@
 $.Redactor.prototype.WoltLabFont = function() {
        "use strict";
+
+       let uiRedactorFormat;
        
        return {
                _fonts: [
@@ -42,36 +44,28 @@ $.Redactor.prototype.WoltLabFont = function() {
                        }).bind(this));
                        
                        $('<li class="dropdownDivider"></li>').insertBefore(dropdownMenu.children('li').last());
+
+                       require(["WoltLabSuite/Core/Ui/Redactor/Format"], (UiRedactorFormat) => {
+                               uiRedactorFormat = UiRedactorFormat;
+                       });
                },
                
-               setFont: function(key) {
+               setFont(key) {
                        key = key.replace(/^fontFamily_/, '');
-                       
-                       this.selection.save();
-                       
-                       require(['WoltLabSuite/Core/Ui/Redactor/Format'], (function(UiRedactorFormat) {
-                               this.buffer.set();
-                               
-                               UiRedactorFormat.format(this.$editor[0], 'font-family', this.WoltLabFont._fonts[key]);
-                               
-                               this.buffer.set();
-                       }).bind(this));
-                       
-                       this.selection.restore();
+
+                       if ($.browser.iOS && !this.detect.isIpad()) {
+                               this.selection.restore();
+                       }
+
+                       this.buffer.set();
+
+                       uiRedactorFormat.format(this.$editor[0], 'font-family', this.WoltLabFont._fonts[key]);
                },
                
-               removeFont: function() {
-                       this.selection.save();
-                       
-                       require(['WoltLabSuite/Core/Ui/Redactor/Format'], (function(UiRedactorFormat) {
-                               this.buffer.set();
-                               
-                               UiRedactorFormat.removeFormat(this.$editor[0], 'font-family');
-                               
-                               this.buffer.set();
-                       }).bind(this));
+               removeFont() {
+                       this.buffer.set();
                        
-                       this.selection.restore();
+                       uiRedactorFormat.removeFormat(this.$editor[0], 'font-family');
                }
        };
 };

diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabSize.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabSize.js
index f95c4dc3144e02e3e1905476196d6b1379f62ccb..a8f8a40fbcb36a8894e09c56334a31e13de703d2 100644 (file)
--- a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabSize.js
+++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabSize.js
@@ -1,5 +1,7 @@
 $.Redactor.prototype.WoltLabSize = function() {
        "use strict";
+
+       let uiRedactorFormat;
        
        return {
                init: function() {
@@ -34,34 +36,26 @@ $.Redactor.prototype.WoltLabSize = function() {
                        });
                        
                        $('<li class="dropdownDivider"></li>').insertBefore(dropdownMenu.children('li').last());
+
+                       require(['WoltLabSuite/Core/Ui/Redactor/Format'], (UiRedactorFormat) => {
+                               uiRedactorFormat = UiRedactorFormat;
+                       });
                },
                
-               setSize: function(key) {
-                       this.selection.save();
-                       
-                       require(['WoltLabSuite/Core/Ui/Redactor/Format'], (function(UiRedactorFormat) {
-                               this.buffer.set();
-                               
-                               UiRedactorFormat.format(this.$editor[0], 'font-size', key.replace(/^size_/, '') + 'pt');
-                               
-                               this.buffer.set();
-                       }).bind(this));
+               setSize(key) {
+                       this.buffer.set();
+
+                       if ($.browser.iOS && !this.detect.isIpad()) {
+                               this.selection.restore();
+                       }
                        
-                       this.selection.restore();
+                       uiRedactorFormat.format(this.$editor[0], 'font-size', key.replace(/^size_/, '') + 'pt');
                },
                
-               removeSize: function() {
-                       this.selection.save();
-                       
-                       require(['WoltLabSuite/Core/Ui/Redactor/Format'], (function(UiRedactorFormat) {
-                               this.buffer.set();
-                               
-                               UiRedactorFormat.removeFormat(this.$editor[0], 'font-size');
-                               
-                               this.buffer.set();
-                       }).bind(this));
+               removeSize() {
+                       this.buffer.set();
                        
-                       this.selection.restore();
+                       uiRedactorFormat.removeFormat(this.$editor[0], 'font-size');
                }
        };
 };