From 607ff92e515d68f3d494db178069247e0d97ba07 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Sat, 15 Oct 2016 16:04:50 +0200 Subject: [PATCH] Experimental change: Use style attribute in Editor The recent updates of Redactor made changes to the style-attribute handling, finally allowing us to use them instead of working around with custom elements + CSS class names. This is still somewhat experimental, as it is needs some more testing. --- com.woltlab.wcf/templates/wysiwyg.tpl | 3 +- com.woltlab.wcf/templates/wysiwygToolbar.tpl | 3 + .../install/files/acp/templates/wysiwyg.tpl | 3 +- .../files/acp/templates/wysiwygToolbar.tpl | 3 + .../redactor2/plugins/WoltLabClean.js | 76 +++++-------- .../redactor2/plugins/WoltLabColor.js | 47 ++------ .../3rdParty/redactor2/plugins/WoltLabFont.js | 47 ++++---- .../redactor2/plugins/WoltLabKeydown.js | 16 +++ .../3rdParty/redactor2/plugins/WoltLabSize.js | 19 +--- .../WoltLabSuite/Core/Ui/Redactor/Format.js | 72 ++++++------ .../Core/Ui/Redactor/RuntimeStyle.js | 42 ------- .../filter/MessageHtmlInputFilter.class.php | 13 +-- .../node/HtmlInputNodeProcessor.class.php | 8 +- .../node/HtmlInputNodeWoltlabColor.class.php | 106 ------------------ .../ColorMetacodeConverter.class.php | 11 +- .../converter/FontMetacodeConverter.class.php | 35 ++++++ .../converter/SizeMetacodeConverter.class.php | 6 +- .../node/HtmlOutputNodeWoltlabColor.class.php | 45 -------- .../node/HtmlOutputNodeWoltlabFont.class.php | 46 -------- .../node/HtmlOutputNodeWoltlabSize.class.php | 45 -------- wcfsetup/install/files/style/ui/redactor.scss | 59 +--------- 21 files changed, 179 insertions(+), 526 deletions(-) delete mode 100644 wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/RuntimeStyle.js delete mode 100644 wcfsetup/install/files/lib/system/html/input/node/HtmlInputNodeWoltlabColor.class.php create mode 100644 wcfsetup/install/files/lib/system/html/metacode/converter/FontMetacodeConverter.class.php delete mode 100644 wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodeWoltlabColor.class.php delete mode 100644 wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodeWoltlabFont.class.php delete mode 100644 wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodeWoltlabSize.class.php diff --git a/com.woltlab.wcf/templates/wysiwyg.tpl b/com.woltlab.wcf/templates/wysiwyg.tpl index 79d502e73f..d6576ff48f 100644 --- a/com.woltlab.wcf/templates/wysiwyg.tpl +++ b/com.woltlab.wcf/templates/wysiwyg.tpl @@ -99,7 +99,7 @@ 'wcf.editor.spoiler.title': '{lang __literal=true}wcf.editor.spoiler.title{/lang}' }); - var buttons = [], buttonMobile = [], buttonOptions = [], customButtons = []; + var allowedInlineStyles = [], buttons = [], buttonMobile = [], buttonOptions = [], customButtons = []; {include file='wysiwygToolbar'} var highlighters = { {implode from=$__wcf->getBBCodeHandler()->getHighlighters() item=__highlighter}'{$__highlighter}': '{lang}wcf.bbcode.code.{@$__highlighter}.title{/lang}'{/implode} }; @@ -211,6 +211,7 @@ toolbarFixed: false, woltlab: { autosave: autosave, + allowedInlineStyles: allowedInlineStyles, buttons: buttonOptions, buttonMobile: buttonMobile, customButtons: customButtons, diff --git a/com.woltlab.wcf/templates/wysiwygToolbar.tpl b/com.woltlab.wcf/templates/wysiwygToolbar.tpl index 9eb2097f51..6cdc831977 100644 --- a/com.woltlab.wcf/templates/wysiwygToolbar.tpl +++ b/com.woltlab.wcf/templates/wysiwygToolbar.tpl @@ -44,12 +44,15 @@ buttons.push('subscript'); buttons.push('superscript'); {if $__wcf->getBBCodeHandler()->isAvailableBBCode('font')} buttons.push('woltlabFont'); + allowedInlineStyles.push('font-family'); {/if} {if $__wcf->getBBCodeHandler()->isAvailableBBCode('size')} buttons.push('woltlabSize'); + allowedInlineStyles.push('font-size'); {/if} {if $__wcf->getBBCodeHandler()->isAvailableBBCode('color')} buttons.push('woltlabColor'); + allowedInlineStyles.push('color'); {/if} buttons.push('wcfSeparator'); diff --git a/wcfsetup/install/files/acp/templates/wysiwyg.tpl b/wcfsetup/install/files/acp/templates/wysiwyg.tpl index 79d502e73f..d6576ff48f 100644 --- a/wcfsetup/install/files/acp/templates/wysiwyg.tpl +++ b/wcfsetup/install/files/acp/templates/wysiwyg.tpl @@ -99,7 +99,7 @@ 'wcf.editor.spoiler.title': '{lang __literal=true}wcf.editor.spoiler.title{/lang}' }); - var buttons = [], buttonMobile = [], buttonOptions = [], customButtons = []; + var allowedInlineStyles = [], buttons = [], buttonMobile = [], buttonOptions = [], customButtons = []; {include file='wysiwygToolbar'} var highlighters = { {implode from=$__wcf->getBBCodeHandler()->getHighlighters() item=__highlighter}'{$__highlighter}': '{lang}wcf.bbcode.code.{@$__highlighter}.title{/lang}'{/implode} }; @@ -211,6 +211,7 @@ toolbarFixed: false, woltlab: { autosave: autosave, + allowedInlineStyles: allowedInlineStyles, buttons: buttonOptions, buttonMobile: buttonMobile, customButtons: customButtons, diff --git a/wcfsetup/install/files/acp/templates/wysiwygToolbar.tpl b/wcfsetup/install/files/acp/templates/wysiwygToolbar.tpl index 9eb2097f51..6cdc831977 100644 --- a/wcfsetup/install/files/acp/templates/wysiwygToolbar.tpl +++ b/wcfsetup/install/files/acp/templates/wysiwygToolbar.tpl @@ -44,12 +44,15 @@ buttons.push('subscript'); buttons.push('superscript'); {if $__wcf->getBBCodeHandler()->isAvailableBBCode('font')} buttons.push('woltlabFont'); + allowedInlineStyles.push('font-family'); {/if} {if $__wcf->getBBCodeHandler()->isAvailableBBCode('size')} buttons.push('woltlabSize'); + allowedInlineStyles.push('font-size'); {/if} {if $__wcf->getBBCodeHandler()->isAvailableBBCode('color')} buttons.push('woltlabColor'); + allowedInlineStyles.push('color'); {/if} buttons.push('wcfSeparator'); diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabClean.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabClean.js index c997ede8d2..79cc34967c 100644 --- a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabClean.js +++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabClean.js @@ -3,10 +3,6 @@ $.Redactor.prototype.WoltLabClean = function() { return { init: function () { - this.opts.pasteInlineTags = this.opts.pasteInlineTags.filter(function (value) { - return (value !== 'span'); - }); - var mpOnSet = this.clean.onSet; this.clean.onSet = (function (html) { html = html.replace(/\u200B/g, ''); @@ -73,9 +69,6 @@ $.Redactor.prototype.WoltLabClean = function() { div.innerHTML = html; - elBySelAll('span', div, function (span) { - span.outerHTML = span.innerHTML; - }); elBySelAll('pre', div, function (pre) { if (replacements.hasOwnProperty(pre.textContent)) { pre.textContent = replacements[pre.textContent]; @@ -102,15 +95,6 @@ $.Redactor.prototype.WoltLabClean = function() { return html; }).bind(this); - var mpStripTags = this.clean.stripTags; - this.clean.stripTags = (function(input, denied) { - if (Array.isArray(denied)) { - denied.push('span'); - } - - return mpStripTags.call(this, input, denied); - }).bind(this); - var mpOnPaste = this.clean.onPaste; this.clean.onPaste = (function (html, data, insert) { if (data.pre) { @@ -128,7 +112,8 @@ $.Redactor.prototype.WoltLabClean = function() { for (var j = 0, innerLength = element.style.length; j < innerLength; j++) { property = element.style[j]; - if (this.WoltLabClean._applyInlineStyle(element, property, element.style.getPropertyValue(property))) { + //noinspection JSUnresolvedVariable + if (this.opts.woltlab.allowedInlineStyles.indexOf(property) === -1) { removeStyles.push(property); } } @@ -138,14 +123,33 @@ $.Redactor.prototype.WoltLabClean = function() { }); } + elBySelAll('span', div, function (span) { + if (!span.style.length || !span.hasAttribute('style')) { + while (span.childNodes.length) { + span.parentNode.insertBefore(span.childNodes[0], span); + } + + elRemove(span); + } + }); + return mpOnPaste.call(this, div.innerHTML, data, insert); }).bind(this); var storage = []; var addToStorage = function (element, attributes) { - var attrs = {}; + var attr, attrs = {}, value; for (var i = 0, length = attributes.length; i < length; i++) { - attrs[attributes[i]] = elAttr(element, attributes[i]); + attr = attributes[i]; + value = elAttr(element, attr); + + // Chrome likes to break the font-family tag by encoding quotes + // that are then no longer accepted by `style.setPropertyValue()` + if (attr === 'style' && element.style.length === 0 && value.indexOf('font-family') === 0) { + value = value.replace(/"/g, ''); + } + + attrs[attr] = value; } storage.push({ @@ -158,7 +162,7 @@ $.Redactor.prototype.WoltLabClean = function() { this.clean.convertTags = (function(html, data) { var div = elCreate('div'); div.innerHTML = html; - + console.debug(html); // reset tag storage storage = []; @@ -167,6 +171,10 @@ $.Redactor.prototype.WoltLabClean = function() { div: div }); + elBySelAll('span', div, function (span) { + addToStorage(span, ['style']); + }); + storage.forEach(function (item, i) { item.element.outerHTML = '###custom' + i + '###' + item.element.innerHTML + '###/custom' + i + '###'; }); @@ -208,32 +216,10 @@ $.Redactor.prototype.WoltLabClean = function() { return mpReconvertTags.call(this, html, data); }).bind(this); - }, - - _applyInlineStyle: function (element, property, value) { - var className = '', tagName = ''; - - switch (property) { - case 'font-weight': - if (value == 600) { - if (element.closest('strong') === null) { - tagName = 'strong'; - } - } - break; - } - if (tagName) { - var newElement = elCreate(tagName); - if (className) newElement.className = className; - - element.parentNode.insertBefore(newElement, element); - newElement.appendChild(element); - - return true; - } - - return false; + this.clean.removeSpans = function(html) { + return html; + }; } } }; diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabColor.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabColor.js index 3fbb5e7776..9994fc7c30 100644 --- a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabColor.js +++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabColor.js @@ -13,12 +13,7 @@ $.Redactor.prototype.WoltLabColor = function() { return { init: function() { var callback = this.WoltLabColor.setColor.bind(this), color; - var dropdown = { - 'removeColor': { - title: this.lang.get('remove-color'), - func: this.WoltLabColor.removeColor.bind(this) - } - }; + var dropdown = {}; for (var i = 0, length = _defaultColors.length; i < length; i++) { color = _defaultColors[i]; @@ -28,26 +23,24 @@ $.Redactor.prototype.WoltLabColor = function() { }; } + dropdown['removeColor'] = { + title: this.lang.get('remove-color'), + func: this.WoltLabColor.removeColor.bind(this) + }; + var button = this.button.add('woltlabColor', ''); this.button.addDropdown(button, dropdown); // add styling - button.data('dropdown').find('a').each(function(index, link) { + var dropdownMenu = button.data('dropdown'); + dropdownMenu.find('a').each(function(index, link) { if (link.className.match(/redactor-dropdown-color_([A-F0-9]{6})/)) { - link.parentNode.classList.add('woltlab-color-' + RegExp.$1); + link.style.setProperty('color', '#' + RegExp.$1, ''); link.parentNode.classList.add('woltlab-color-selection'); } }); - WCF.System.Event.addListener('com.woltlab.wcf.redactor2', 'convertTags_' + this.$element[0].id, function (data) { - elBySelAll('woltlab-color', data.div, function (element) { - data.addToStorage(element, ['class']); - }); - }); - - this.WoltLabColor.registerColors(); - - WCF.System.Event.addListener('com.woltlab.wcf.redactor2', 'codeStart_' + this.$element[0].id, this.WoltLabColor.registerColors.bind(this)); + $('
  • ').insertBefore(dropdownMenu.children('li').last()); }, setColor: function(key) { @@ -58,7 +51,7 @@ $.Redactor.prototype.WoltLabColor = function() { require(['WoltLabSuite/Core/Ui/Redactor/Format'], (function(UiRedactorFormat) { this.buffer.set(); - UiRedactorFormat.format(this.$editor[0], 'woltlab-color', 'woltlab-color-' + key); + UiRedactorFormat.format(this.$editor[0], 'color', '#' + key); this.buffer.set(); }).bind(this)); @@ -70,26 +63,10 @@ $.Redactor.prototype.WoltLabColor = function() { require(['WoltLabSuite/Core/Ui/Redactor/Format'], (function(UiRedactorFormat) { this.buffer.set(); - UiRedactorFormat.removeFormat(this.$editor[0], 'woltlab-color'); + UiRedactorFormat.removeFormat(this.$editor[0], 'color'); this.buffer.set(); }).bind(this)); - }, - - registerColors: function () { - require(['WoltLabSuite/Core/Ui/Redactor/RuntimeStyle'], (function (UiRedactorRuntimeStyle) { - elBySelAll('woltlab-color', this.$editor[0], (function (color) { - if (color.className.match(/woltlab-color-([a-z0-9]{3}(?:[a-z0-9]{3})?)/i)) { - var code = RegExp.$1; - if (code.length === 3) code = code.substr(0, 1) + code.substr(0, 1) + code.substr(1, 1) + code.substr(1, 1) + code.substr(2, 1) + code.substr(2, 1); - code = code.toUpperCase(); - - if (_defaultColors.indexOf(code) === -1) { - UiRedactorRuntimeStyle.add('woltlab-color-' + code, 'color: #' + code + ';'); - } - } - }).bind(this)); - }).bind(this)); } }; }; diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabFont.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabFont.js index b8c6fcc48c..e2e9c2828e 100644 --- a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabFont.js +++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabFont.js @@ -2,16 +2,25 @@ $.Redactor.prototype.WoltLabFont = function() { "use strict"; return { + _fonts: [ + 'Arial, Helvetica, sans-serif', + 'Comic Sans MS, Marker Felt, cursive', + 'Consolas, Courier New, Courier, monospace', + 'Georgia, serif', + 'Lucida Sans Unicode, Lucida Grande, sans-serif', + 'Tahoma, Geneva, sans-serif', + 'Times New Roman, Times, serif', + 'Trebuchet MS", Helvetica, sans-serif', + 'Verdana, Geneva, sans-serif' + ], + init: function() { - var fonts = ['arial', 'comicSansMs', 'courierNew', 'georgia', 'lucidaSansUnicode', 'tahoma', 'timesNewRoman', 'trebuchetMs', 'verdana']; - var fontNames = ['Arial', 'Comic Sans MS', 'Courier New', 'Georgia', 'Lucida Sans Unicode', 'Tahoma', 'Times New Roman', 'Trebuchet MS', 'Verdana']; - var callback = this.WoltLabFont.setFont.bind(this); var dropdown = {}; - fonts.forEach(function (font, i) { - dropdown[font] = { - title: fontNames[i], + this.WoltLabFont._fonts.forEach(function (font, i) { + dropdown['fontFamily_' + i] = { + title: font.split(',')[0].replace(/['"]/g, ''), func: callback }; }); @@ -25,31 +34,25 @@ $.Redactor.prototype.WoltLabFont = function() { this.button.addDropdown(button, dropdown); // add styling - button.data('dropdown').find('a').each(function(index, link) { - if (link.className && link.className !== 'redactor-dropdown-removeFont') { - link.parentNode.classList.add('woltlab-font-' + link.className.replace(/^redactor-dropdown-/, '')); - link.parentNode.classList.add('woltlab-font-selection'); + var dropdownMenu = button.data('dropdown'); + dropdownMenu.find('a').each((function(index, link) { + if (link.className.match(/^redactor-dropdown-fontFamily_(\d+)$/)) { + link.style.setProperty('font-family', this.WoltLabFont._fonts[RegExp.$1], ''); } - }); + }).bind(this)); - WCF.System.Event.addListener('com.woltlab.wcf.redactor2', 'convertTags_' + this.$element[0].id, function (data) { - elBySelAll('woltlab-font', data.div, function (element) { - if (element.className.match(/^woltlab-font-([a-zA-Z]+)$/)) { - if (fonts.indexOf(RegExp.$1) !== -1) { - data.addToStorage(element, ['class']); - } - } - }); - }); + $('
  • ').insertBefore(dropdownMenu.children('li').last()); }, setFont: function(key) { + key = key.replace(/^fontFamily_/, ''); + this.selection.save(); require(['WoltLabSuite/Core/Ui/Redactor/Format'], (function(UiRedactorFormat) { this.buffer.set(); - UiRedactorFormat.format(this.$editor[0], 'woltlab-font', 'woltlab-font-' + key); + UiRedactorFormat.format(this.$editor[0], 'font-family', this.WoltLabFont._fonts[key]); this.buffer.set(); }).bind(this)); @@ -61,7 +64,7 @@ $.Redactor.prototype.WoltLabFont = function() { require(['WoltLabSuite/Core/Ui/Redactor/Format'], (function(UiRedactorFormat) { this.buffer.set(); - UiRedactorFormat.removeFormat(this.$editor[0], 'woltlab-font'); + UiRedactorFormat.removeFormat(this.$editor[0], 'font-family'); this.buffer.set(); }).bind(this)); diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabKeydown.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabKeydown.js index 6bd46e75b9..1142373e87 100644 --- a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabKeydown.js +++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabKeydown.js @@ -27,6 +27,22 @@ $.Redactor.prototype.WoltLabKeydown = function() { } }).bind(this); + this.keydown.onBackspaceAndDeleteAfter = (function (e) { + // remove style tag + setTimeout($.proxy(function() + { + this.code.syncFire = false; + this.keydown.removeEmptyLists(); + + // WoltLab modification: allow style tag on `` + this.core.editor().find('*[style]').not('span, img, #redactor-image-box, #redactor-image-editter').removeAttr('style'); + + this.keydown.formatEmpty(e); + this.code.syncFire = true; + + }, this), 1); + }).bind(this); + var mpOnEnter = (function(e) { var stop = this.core.callback('enter', e); if (stop === false) { diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabSize.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabSize.js index ac205792f6..1fcf3074c1 100644 --- a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabSize.js +++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabSize.js @@ -25,22 +25,15 @@ $.Redactor.prototype.WoltLabSize = function() { this.button.addDropdown(button, dropdown); // add styling - button.data('dropdown').find('a').each(function(index, link) { + var dropdownMenu = button.data('dropdown'); + dropdownMenu.find('a').each(function(index, link) { if (link.className.match(/redactor-dropdown-size_(\d{1,2})/)) { - link.parentNode.classList.add('woltlab-size-' + RegExp.$1); + link.style.setProperty('font-size', RegExp.$1 + 'pt', ''); link.parentNode.classList.add('woltlab-size-selection'); } }); - WCF.System.Event.addListener('com.woltlab.wcf.redactor2', 'convertTags_' + this.$element[0].id, function (data) { - elBySelAll('woltlab-size', data.div, function (element) { - if (element.className.match(/^woltlab-size-(\d{1,2})$/)) { - if (sizes.indexOf(~~RegExp.$1) !== -1) { - data.addToStorage(element, ['class']); - } - } - }); - }); + $('
  • ').insertBefore(dropdownMenu.children('li').last()); }, setSize: function(key) { @@ -49,7 +42,7 @@ $.Redactor.prototype.WoltLabSize = function() { require(['WoltLabSuite/Core/Ui/Redactor/Format'], (function(UiRedactorFormat) { this.buffer.set(); - UiRedactorFormat.format(this.$editor[0], 'woltlab-size', 'woltlab-size-' + key.replace(/^size_/, '')); + UiRedactorFormat.format(this.$editor[0], 'font-size', key.replace(/^size_/, '') + 'pt'); this.buffer.set(); }).bind(this)); @@ -61,7 +54,7 @@ $.Redactor.prototype.WoltLabSize = function() { require(['WoltLabSuite/Core/Ui/Redactor/Format'], (function(UiRedactorFormat) { this.buffer.set(); - UiRedactorFormat.removeFormat(this.$editor[0], 'woltlab-size'); + UiRedactorFormat.removeFormat(this.$editor[0], 'font-size'); this.buffer.set(); }).bind(this)); diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Format.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Format.js index 1fa40a6b4c..c319ae30b6 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Format.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Format.js @@ -19,11 +19,10 @@ define(['Dom/Util'], function(DomUtil) { * Applies format elements to the selected text. * * @param {Element} editorElement editor element - * @param {string} tagName format tag name - * @param {string=} className optional CSS class for the format tag - * @param {Object=} attributes optional list of attributes for the format tag + * @param {string} property CSS property name + * @param {string} value CSS property value */ - format: function(editorElement, tagName, className, attributes) { + format: function(editorElement, property, value) { var selection = window.getSelection(); if (!selection.rangeCount) { // no active selection @@ -58,7 +57,7 @@ define(['Dom/Util'], function(DomUtil) { tmpRange.insertNode(markerEnd); // remove existing format before applying new one - this.removeFormat(editorElement, tagName); + this.removeFormat(editorElement, property); range = document.createRange(); range.setStartAfter(markerStart); @@ -72,19 +71,14 @@ define(['Dom/Util'], function(DomUtil) { document.execCommand('strikethrough'); } - var elements = elBySelAll('strike', editorElement), formatElement, property, selectElements = [], strike; + var elements = elBySelAll('strike', editorElement), formatElement, selectElements = [], strike; for (var i = 0, length = elements.length; i < length; i++) { strike = elements[i]; - formatElement = elCreate(tagName); - if (className) formatElement.className = className; - if (typeof attributes === 'object') { - for (property in attributes) { - if (attributes.hasOwnProperty(property)) { - elAttr(formatElement, key, attributes[key]); - } - } - } + formatElement = elCreate('span'); + // we're bypassing `style.setPropertyValue()` on purpose here, + // as it prevents browsers from mangling the value + elAttr(formatElement, 'style', property + ': ' + value); DomUtil.replaceElement(strike, formatElement); selectElements.push(formatElement); @@ -95,11 +89,11 @@ define(['Dom/Util'], function(DomUtil) { var firstSelectedElement = selectElements[0]; var lastSelectedElement = selectElements[count - 1]; - // check if parent is of the same format type + // check if parent is of the same format // and contains only the selected nodes if (tmpElement === null && (firstSelectedElement.parentNode === lastSelectedElement.parentNode)) { var parent = firstSelectedElement.parentNode; - if (parent.nodeName === tagName.toUpperCase()) { + if (parent.nodeName === 'SPAN' && parent.style.getPropertyValue(property) !== '') { if (this._isBoundaryElement(firstSelectedElement, parent, 'previous') && this._isBoundaryElement(lastSelectedElement, parent, 'next')) { DomUtil.unwrapChildNodes(parent); } @@ -183,11 +177,9 @@ define(['Dom/Util'], function(DomUtil) { * If you fell the need to invoke this method anyway, go ahead. I'm a comment, not a cop. * * @param {Element} editorElement editor element - * @param {string} tagName format tag name that should be removed + * @param {string} property CSS property that should be removed */ - removeFormat: function(editorElement, tagName) { - tagName = tagName.toUpperCase(); - + removeFormat: function(editorElement, property) { var strikeElements = elByTag('strike', editorElement); // remove any element first, all though there shouldn't be any at all @@ -197,28 +189,29 @@ define(['Dom/Util'], function(DomUtil) { document.execCommand('strikethrough'); - var elements, lastMatchingParent, strikeElement; + var lastMatchingParent, strikeElement; while (strikeElements.length) { strikeElement = strikeElements[0]; - lastMatchingParent = this._getLastMatchingParent(strikeElement, editorElement, tagName); + lastMatchingParent = this._getLastMatchingParent(strikeElement, editorElement, property); if (lastMatchingParent !== null) { - this._handleParentNodes(strikeElement, lastMatchingParent, tagName); + this._handleParentNodes(strikeElement, lastMatchingParent, property); } // remove offending elements from child nodes - elements = elByTag(tagName.toLowerCase(), strikeElement); - while (elements.length) { - DomUtil.unwrapChildNodes(elements[0]); - } + elBySelAll('span', strikeElement, function (span) { + if (span.style.getPropertyValue(property)) { + DomUtil.unwrapChildNodes(span); + } + }); // remove strike element itself DomUtil.unwrapChildNodes(strikeElement); } // search for tags that are still floating around, but are completely empty - elBySelAll(tagName, editorElement, function (element) { - if (element.parentNode && !element.textContent.length) { + elBySelAll('span', editorElement, function (element) { + if (element.parentNode && !element.textContent.length && element.style.getPropertyValue(property) !== '') { if (element.childElementCount === 1 && element.children[0].nodeName === 'WOLTLAB-TMP-MARKER') { element.parentNode.insertBefore(element.children[0], element); } @@ -235,10 +228,10 @@ define(['Dom/Util'], function(DomUtil) { * * @param {Element} strikeElement strike element representing the text selection * @param {Element} lastMatchingParent last matching ancestor element - * @param {string} tagName format tag name that should be removed + * @param {string} property CSS property that should be removed * @protected */ - _handleParentNodes: function(strikeElement, lastMatchingParent, tagName) { + _handleParentNodes: function(strikeElement, lastMatchingParent, property) { var range; // selection does not begin at parent node start, slice all relevant parent @@ -278,10 +271,11 @@ define(['Dom/Util'], function(DomUtil) { // the strike element is now some kind of isolated, meaning we can now safely // remove all offending parent nodes without influencing formatting of any content // before or after the element - var elements = elByTag(tagName, lastMatchingParent); - while (elements.length) { - DomUtil.unwrapChildNodes(elements[0]); - } + elBySelAll('span', lastMatchingParent, function (span) { + if (span.style.getPropertyValue(property)) { + DomUtil.unwrapChildNodes(span); + } + }); // finally remove the parent itself DomUtil.unwrapChildNodes(lastMatchingParent); @@ -292,14 +286,14 @@ define(['Dom/Util'], function(DomUtil) { * * @param {Element} strikeElement strike element representing the text selection * @param {Element} editorElement editor element - * @param {string} tagName format tag name that should be removed + * @param {string} property CSS property that should be removed * @returns {(Element|null)} last matching ancestor element or null if there is none * @protected */ - _getLastMatchingParent: function(strikeElement, editorElement, tagName) { + _getLastMatchingParent: function(strikeElement, editorElement, property) { var parent = strikeElement.parentNode, match = null; while (parent !== editorElement) { - if (parent.nodeName === tagName) { + if (parent.nodeName === 'SPAN' && parent.style.getPropertyValue(property) !== '') { match = parent; } diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/RuntimeStyle.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/RuntimeStyle.js deleted file mode 100644 index 1b09ae1d60..0000000000 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/RuntimeStyle.js +++ /dev/null @@ -1,42 +0,0 @@ -/** - * Provides an easy API to register CSS styles on runtime. - * - * @author Alexander Ebert - * @copyright 2001-2016 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Ui/Redactor/RuntimeStyle - */ -define([], function () { - "use strict"; - - var _knownClasses = []; - var _style = null; - - /** - * @exports WoltLabSuite/Core/Ui/Redactor/RuntimeStyle - */ - return { - /** - * Adds a new style rule for provided class name. - * - * @param {string} className CSS class name without a leading dot - * @param {string} definitions CSS definitions - */ - add: function (className, definitions) { - if (_knownClasses.indexOf(className) !== -1) { - return; - } - - if (_style === null) { - _style = elCreate('style'); - _style.appendChild(document.createTextNode('')); - elData(_style, 'created-by', 'WoltLabSuite/Core/Ui/Redactor/RuntimeStyle'); - document.head.appendChild(_style); - } - - //noinspection JSUnresolvedVariable - _style.sheet.insertRule('.' + className + ' { ' + definitions + ' }', _style.sheet.cssRules.length); - _knownClasses.push(className); - } - }; -}); \ No newline at end of file diff --git a/wcfsetup/install/files/lib/system/html/input/filter/MessageHtmlInputFilter.class.php b/wcfsetup/install/files/lib/system/html/input/filter/MessageHtmlInputFilter.class.php index 5f8117ac2a..16e2791568 100644 --- a/wcfsetup/install/files/lib/system/html/input/filter/MessageHtmlInputFilter.class.php +++ b/wcfsetup/install/files/lib/system/html/input/filter/MessageHtmlInputFilter.class.php @@ -43,8 +43,8 @@ class MessageHtmlInputFilter implements IHtmlInputFilter { protected function getPurifier() { if (self::$purifier === null) { $config = \HTMLPurifier_Config::createDefault(); - $config->set('HTML.ForbiddenAttributes', ['*@style', '*@lang', '*@xml:lang']); - $config->set('HTML.ForbiddenElements', ['span']); + $config->set('CSS.AllowedProperties', ['color', 'font-family', 'font-size']); + $config->set('HTML.ForbiddenAttributes', ['*@lang', '*@xml:lang']); $this->setAttributeDefinitions($config); self::$purifier = new \HTMLPurifier($config); @@ -66,15 +66,6 @@ class MessageHtmlInputFilter implements IHtmlInputFilter { $definition->addAttribute('pre', 'data-line', 'Number'); $definition->addAttribute('pre', 'data-highlighter', 'Text'); - // color - $definition->addElement('woltlab-color', 'Inline', 'Inline', '', ['class' => 'Text']); - - // size - $definition->addElement('woltlab-size', 'Inline', 'Inline', '', ['class' => 'Text']); - - // font - $definition->addElement('woltlab-font', 'Inline', 'Inline', '', ['class' => 'Text']); - // media $definition->addAttribute('img', 'data-media-id', 'Number'); $definition->addAttribute('img', 'data-media-size', new \HTMLPurifier_AttrDef_Enum(['small', 'medium', 'large', 'original'])); diff --git a/wcfsetup/install/files/lib/system/html/input/node/HtmlInputNodeProcessor.class.php b/wcfsetup/install/files/lib/system/html/input/node/HtmlInputNodeProcessor.class.php index e13fc46816..82640971fb 100644 --- a/wcfsetup/install/files/lib/system/html/input/node/HtmlInputNodeProcessor.class.php +++ b/wcfsetup/install/files/lib/system/html/input/node/HtmlInputNodeProcessor.class.php @@ -30,13 +30,7 @@ class HtmlInputNodeProcessor extends AbstractHtmlNodeProcessor { 'smiley', 'woltlabAttachment', 'woltlabSuiteMedia' ], 'p' => ['text-center', 'text-justify', 'text-right'], - 'td' => ['text-center', 'text-justify', 'text-right'], - 'woltlab-color' => '*', - 'woltlab-font' => [ - 'woltlab-font-arial', 'woltlab-font-comicSansMs', 'woltlab-font-courierNew', 'woltlab-font-georgia', 'woltlab-font-lucidaSansUnicode', - 'woltlab-font-tahoma', 'woltlab-font-timesNewRoman', 'woltlab-font-trebuchetMs', 'woltlab-font-verdana' - ], - 'woltlab-size' => ['woltlab-size-8', 'woltlab-size-10', 'woltlab-size-12', 'woltlab-size-14', 'woltlab-size-18', 'woltlab-size-24', 'woltlab-size-36'] + 'td' => ['text-center', 'text-justify', 'text-right'] ]; /** diff --git a/wcfsetup/install/files/lib/system/html/input/node/HtmlInputNodeWoltlabColor.class.php b/wcfsetup/install/files/lib/system/html/input/node/HtmlInputNodeWoltlabColor.class.php deleted file mode 100644 index d00de2a81d..0000000000 --- a/wcfsetup/install/files/lib/system/html/input/node/HtmlInputNodeWoltlabColor.class.php +++ /dev/null @@ -1,106 +0,0 @@ -` to check for valid color arguments. - * - * @author Alexander Ebert - * @copyright 2001-2016 WoltLab GmbH - * @license GNU Lesser General Public License - * @package WoltLabSuite\Core\System\Html\Input\Node - * @since 3.0 - */ -class HtmlInputNodeWoltlabColor extends AbstractHtmlInputNode { - /** - * @inheritDoc - */ - protected $tagName = 'woltlab-color'; - - /** - * list of color names in CSS - * @var string[] - */ - protected $colorNames = [ - 'aliceblue' => 'F0F8FF', 'antiquewhite' => 'FAEBD7', 'aqua' => '00FFFF', 'aquamarine' => '7FFFD4', 'azure' => 'F0FFFF', - 'beige' => 'F5F5DC', 'bisque' => 'FFE4C4', 'black' => '000000', 'blanchedalmond' => 'FFEBCD', 'blue' => '0000FF', - 'blueviolet' => '8A2BE2', 'brown' => 'A52A2A', 'burlywood' => 'DEB887', 'cadetblue' => '5F9EA0', 'chartreuse' => '7FFF00', - 'chocolate' => 'D2691E', 'coral' => 'FF7F50', 'cornflowerblue' => '6495ED', 'cornsilk' => 'FFF8DC', 'crimson' => 'DC143C', - 'cyan' => '00FFFF', 'darkblue' => '00008B', 'darkcyan' => '008B8B', 'darkgoldenrod' => 'B8860B', 'darkgray' => 'A9A9A9', - 'darkgrey' => 'A9A9A9', 'darkgreen' => '006400', 'darkkhaki' => 'BDB76B', 'darkmagenta' => '8B008B', 'darkolivegreen' => '556B2F', - 'darkorange' => 'FF8C00', 'darkorchid' => '9932CC', 'darkred' => '8B0000', 'darksalmon' => 'E9967A', 'darkseagreen' => '8FBC8F', - 'darkslateblue' => '483D8B', 'darkslategray' => '2F4F4F', 'darkslategrey' => '2F4F4F', 'darkturquoise' => '00CED1', - 'darkviolet' => '9400D3', 'deeppink' => 'FF1493', 'deepskyblue' => '00BFFF', 'dimgray' => '696969', 'dimgrey' => '696969', - 'dodgerblue' => '1E90FF', 'firebrick' => 'B22222', 'floralwhite' => 'FFFAF0', 'forestgreen' => '228B22', 'fuchsia' => 'FF00FF', - 'gainsboro' => 'DCDCDC', 'ghostwhite' => 'F8F8FF', 'gold' => 'FFD700', 'goldenrod' => 'DAA520', 'gray' => '808080', - 'grey' => '808080', 'green' => '008000', 'greenyellow' => 'ADFF2F', 'honeydew' => 'F0FFF0', 'hotpink' => 'FF69B4', - 'indianred' => 'CD5C5C', 'indigo' => '4B0082', 'ivory' => 'FFFFF0', 'khaki' => 'F0E68C', 'lavender' => 'E6E6FA', - 'lavenderblush' => 'FFF0F5', 'lawngreen' => '7CFC00', 'lemonchiffon' => 'FFFACD', 'lightblue' => 'ADD8E6', - 'lightcoral' => 'F08080', 'lightcyan' => 'E0FFFF', 'lightgoldenrodyellow' => 'FAFAD2', 'lightgray' => 'D3D3D3', - 'lightgrey' => 'D3D3D3', 'lightgreen' => '90EE90', 'lightpink' => 'FFB6C1', 'lightsalmon' => 'FFA07A', 'lightseagreen' => '20B2AA', - 'lightskyblue' => '87CEFA', 'lightslategray' => '778899', 'lightslategrey' => '778899', 'lightsteelblue' => 'B0C4DE', - 'lightyellow' => 'FFFFE0', 'lime' => '00FF00', 'limegreen' => '32CD32', 'linen' => 'FAF0E6', 'magenta' => 'FF00FF', - 'maroon' => '800000', 'mediumaquamarine' => '66CDAA', 'mediumblue' => '0000CD', 'mediumorchid' => 'BA55D3', - 'mediumpurple' => '9370D8', 'mediumseagreen' => '3CB371', 'mediumslateblue' => '7B68EE', 'mediumspringgreen' => '00FA9A', - 'mediumturquoise' => '48D1CC', 'mediumvioletred' => 'C71585', 'midnightblue' => '191970', 'mintcream' => 'F5FFFA', - 'mistyrose' => 'FFE4E1', 'moccasin' => 'FFE4B5', 'navajowhite' => 'FFDEAD', 'navy' => '000080', 'oldlace' => 'FDF5E6', - 'olive' => '808000', 'olivedrab' => '6B8E23', 'orange' => 'FFA500', 'orangered' => 'FF4500', 'orchid' => 'DA70D6', - 'palegoldenrod' => 'EEE8AA', 'palegreen' => '98FB98', 'paleturquoise' => 'AFEEEE', 'palevioletred' => 'D87093', - 'papayawhip' => 'FFEFD5', 'peachpuff' => 'FFDAB9', 'peru' => 'CD853F', 'pink' => 'FFC0CB', 'plum' => 'DDA0DD', - 'powderblue' => 'B0E0E6', 'purple' => '800080', 'red' => 'FF0000', 'rosybrown' => 'BC8F8F', 'royalblue' => '4169E1', - 'saddlebrown' => '8B4513', 'salmon' => 'FA8072', 'sandybrown' => 'F4A460', 'seagreen' => '2E8B57', 'seashell' => 'FFF5EE', - 'sienna' => 'A0522D', 'silver' => 'C0C0C0', 'skyblue' => '87CEEB', 'slateblue' => '6A5ACD', 'slategray' => '708090', - 'slategrey' => '708090', 'snow' => 'FFFAFA', 'springgreen' => '00FF7F', 'steelblue' => '4682B4', 'tan' => 'D2B48C', - 'teal' => '008080', 'thistle' => 'D8BFD8', 'tomato' => 'FF6347', 'turquoise' => '40E0D0', 'violet' => 'EE82EE', - 'wheat' => 'F5DEB3', 'white' => 'FFFFFF', 'whitesmoke' => 'F5F5F5', 'yellow' => 'FFFF00', 'yellowgreen' => '9ACD32' - ]; - - /** - * @inheritDoc - */ - public function isAllowed(AbstractHtmlNodeProcessor $htmlNodeProcessor) { - if (BBCodeHandler::getInstance()->isAvailableBBCode('color')) { - return []; - } - - if (!$htmlNodeProcessor->getDocument()->getElementsByTagName('woltlab-color')->length) { - return []; - } - - return ['color']; - } - - /** - * @inheritDoc - */ - public function process(array $elements, AbstractHtmlNodeProcessor $htmlNodeProcessor) { - /** @var \DOMElement $element */ - foreach ($elements as $element) { - $className = $element->getAttribute('class'); - $colorCode = ''; - if (preg_match('~^woltlab-color-([a-z0-9]{3}(?:[a-z0-9]{3})?)$~i', $className, $matches)) { - if (strlen($matches[1]) === 3) { - $colorCode = $matches[1]{0}.$matches[1]{0} . $matches[1]{1}.$matches[1]{1} . $matches[1]{2}.$matches[1]{2}; - } - else { - $colorCode = $matches[1]; - } - } - else if (preg_match('~^woltlab-color-([a-z]+)$~i', $className, $matches)) { - $colorName = strtolower($matches[1]); - if (isset($this->colorNames[$colorName])) { - $colorCode = $this->colorNames[$colorName]; - } - } - - if (empty($colorCode)) { - DOMUtil::removeNode($element, true); - } - else { - $element->setAttribute('class', 'woltlab-color-' . strtoupper($colorCode)); - } - } - } -} diff --git a/wcfsetup/install/files/lib/system/html/metacode/converter/ColorMetacodeConverter.class.php b/wcfsetup/install/files/lib/system/html/metacode/converter/ColorMetacodeConverter.class.php index 6456da16a5..34b3e40091 100644 --- a/wcfsetup/install/files/lib/system/html/metacode/converter/ColorMetacodeConverter.class.php +++ b/wcfsetup/install/files/lib/system/html/metacode/converter/ColorMetacodeConverter.class.php @@ -2,7 +2,7 @@ namespace wcf\system\html\metacode\converter; /** - * Converts color bbcode into ``. + * Converts color bbcode into ``. * * @author Alexander Ebert * @copyright 2001-2016 WoltLab GmbH @@ -15,8 +15,8 @@ class ColorMetacodeConverter extends AbstractMetacodeConverter { * @inheritDoc */ public function convert(\DOMDocumentFragment $fragment, array $attributes) { - $element = $fragment->ownerDocument->createElement('woltlab-color'); - $element->setAttribute('class', 'woltlab-color-' . strtoupper(substr($attributes[0], 1))); + $element = $fragment->ownerDocument->createElement('span'); + $element->setAttribute('style', 'color: ' . $attributes[0]); $element->appendChild($fragment); return $element; @@ -30,11 +30,6 @@ class ColorMetacodeConverter extends AbstractMetacodeConverter { return false; } - // validates if code is a valid (short) HEX color code or color name - if (!preg_match('~^\#[A-F0-9]{3}(?:[A-F0-9]{3})?$~i', $attributes[0]) && !preg_match('~^[a-z]$~i', $attributes[0])) { - return false; - } - return true; } } diff --git a/wcfsetup/install/files/lib/system/html/metacode/converter/FontMetacodeConverter.class.php b/wcfsetup/install/files/lib/system/html/metacode/converter/FontMetacodeConverter.class.php new file mode 100644 index 0000000000..d866f26347 --- /dev/null +++ b/wcfsetup/install/files/lib/system/html/metacode/converter/FontMetacodeConverter.class.php @@ -0,0 +1,35 @@ +`. + * + * @author Alexander Ebert + * @copyright 2001-2016 WoltLab GmbH + * @license GNU Lesser General Public License + * @package WoltLabSuite\Core\System\Html\Metacode\Converter + * @since 3.0 + */ +class FontMetacodeConverter extends AbstractMetacodeConverter { + /** + * @inheritDoc + */ + public function convert(\DOMDocumentFragment $fragment, array $attributes) { + $element = $fragment->ownerDocument->createElement('span'); + $element->setAttribute('style', 'font-family: ' . preg_replace('["\']', '', $attributes[0])); + $element->appendChild($fragment); + + return $element; + } + + /** + * @inheritDoc + */ + public function validateAttributes(array $attributes) { + if (count($attributes) !== 1) { + return false; + } + + return true; + } +} diff --git a/wcfsetup/install/files/lib/system/html/metacode/converter/SizeMetacodeConverter.class.php b/wcfsetup/install/files/lib/system/html/metacode/converter/SizeMetacodeConverter.class.php index 87fe4e9085..3f37ca9f20 100644 --- a/wcfsetup/install/files/lib/system/html/metacode/converter/SizeMetacodeConverter.class.php +++ b/wcfsetup/install/files/lib/system/html/metacode/converter/SizeMetacodeConverter.class.php @@ -2,7 +2,7 @@ namespace wcf\system\html\metacode\converter; /** - * Converts size bbcode into ``. + * Converts size bbcode into ``. * * @author Alexander Ebert * @copyright 2001-2016 WoltLab GmbH @@ -17,8 +17,8 @@ class SizeMetacodeConverter extends AbstractMetacodeConverter { * @inheritDoc */ public function convert(\DOMDocumentFragment $fragment, array $attributes) { - $element = $fragment->ownerDocument->createElement('woltlab-size'); - $element->setAttribute('class', 'woltlab-size-' . $attributes[0]); + $element = $fragment->ownerDocument->createElement('span'); + $element->setAttribute('style', 'font-size: ' . $attributes[0] . 'pt'); $element->appendChild($fragment); return $element; diff --git a/wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodeWoltlabColor.class.php b/wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodeWoltlabColor.class.php deleted file mode 100644 index 5e45e01995..0000000000 --- a/wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodeWoltlabColor.class.php +++ /dev/null @@ -1,45 +0,0 @@ - - * @package WoltLabSuite\Core\System\Html\Output\Node - * @since 3.0 - */ -class HtmlOutputNodeWoltlabColor extends AbstractHtmlOutputNode { - /** - * @inheritDoc - */ - protected $tagName = 'woltlab-color'; - - /** - * @inheritDoc - */ - public function process(array $elements, AbstractHtmlNodeProcessor $htmlNodeProcessor) { - if ($this->outputType === 'text/html' || $this->outputType === 'text/simplified-html') { - /** @var \DOMElement $element */ - foreach ($elements as $element) { - // parse color - if (preg_match('~^woltlab-color-(?P[A-F0-9]{6})$~', $element->getAttribute('class'), $matches)) { - $nodeIdentifier = StringUtil::getRandomID(); - $htmlNodeProcessor->addNodeData($this, $nodeIdentifier, ['color' => $matches['color']]); - - $htmlNodeProcessor->renameTag($element, 'wcfNode-' . $nodeIdentifier); - } - } - } - } - - /** - * @inheritDoc - */ - public function replaceTag(array $data) { - return '' . self::PLACEHOLDER . ''; - } -} diff --git a/wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodeWoltlabFont.class.php b/wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodeWoltlabFont.class.php deleted file mode 100644 index 9b4db0e042..0000000000 --- a/wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodeWoltlabFont.class.php +++ /dev/null @@ -1,46 +0,0 @@ - - * @package WoltLabSuite\Core\System\Html\Output\Node - * @since 3.0 - */ -class HtmlOutputNodeWoltlabFont extends AbstractHtmlOutputNode { - /** - * @inheritDoc - */ - protected $tagName = 'woltlab-font'; - - /** - * @inheritDoc - */ - public function process(array $elements, AbstractHtmlNodeProcessor $htmlNodeProcessor) { - if ($this->outputType === 'text/html' || $this->outputType === 'text/simplified-html') { - /** @var \DOMElement $element */ - foreach ($elements as $element) { - $font = $element->getAttribute('class'); - - if (preg_match('~^woltlab-font-[a-zA-Z]+$~', $font)) { - $nodeIdentifier = StringUtil::getRandomID(); - $htmlNodeProcessor->addNodeData($this, $nodeIdentifier, ['font' => $font]); - - $htmlNodeProcessor->renameTag($element, 'wcfNode-' . $nodeIdentifier); - } - } - } - } - - /** - * @inheritDoc - */ - public function replaceTag(array $data) { - return '' . self::PLACEHOLDER . ''; - } -} diff --git a/wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodeWoltlabSize.class.php b/wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodeWoltlabSize.class.php deleted file mode 100644 index b39f105344..0000000000 --- a/wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodeWoltlabSize.class.php +++ /dev/null @@ -1,45 +0,0 @@ - - * @package WoltLabSuite\Core\System\Html\Output\Node - * @since 3.0 - */ -class HtmlOutputNodeWoltlabSize extends AbstractHtmlOutputNode { - /** - * @inheritDoc - */ - protected $tagName = 'woltlab-size'; - - /** - * @inheritDoc - */ - public function process(array $elements, AbstractHtmlNodeProcessor $htmlNodeProcessor) { - if ($this->outputType === 'text/html' || $this->outputType === 'text/simplified-html') { - /** @var \DOMElement $element */ - foreach ($elements as $element) { - // parse color - if (preg_match('~^woltlab-size-(?P[0-9]{1,2})$~', $element->getAttribute('class'), $matches)) { - $nodeIdentifier = StringUtil::getRandomID(); - $htmlNodeProcessor->addNodeData($this, $nodeIdentifier, ['size' => $matches['size']]); - - $htmlNodeProcessor->renameTag($element, 'wcfNode-' . $nodeIdentifier); - } - } - } - } - - /** - * @inheritDoc - */ - public function replaceTag(array $data) { - return '' . self::PLACEHOLDER . ''; - } -} diff --git a/wcfsetup/install/files/style/ui/redactor.scss b/wcfsetup/install/files/style/ui/redactor.scss index 5d70846b62..093511849e 100644 --- a/wcfsetup/install/files/style/ui/redactor.scss +++ b/wcfsetup/install/files/style/ui/redactor.scss @@ -418,48 +418,6 @@ hyphens: auto; } -/* text color */ -.woltlab-color-000000 { color: #000000 !important; } -.woltlab-color-000080 { color: #000080 !important; } -.woltlab-color-0000CD { color: #0000CD !important; } -.woltlab-color-0000FF { color: #0000FF !important; } -.woltlab-color-006400 { color: #006400 !important; } -.woltlab-color-008000 { color: #008000 !important; } -.woltlab-color-008080 { color: #008080 !important; } -.woltlab-color-00FF00 { color: #00FF00 !important; } -.woltlab-color-00FFFF { color: #00FFFF !important; } -.woltlab-color-2F4F4F { color: #2F4F4F !important; } -.woltlab-color-40E0D0 { color: #40E0D0 !important; } -.woltlab-color-4B0082 { color: #4B0082 !important; } -.woltlab-color-696969 { color: #696969 !important; } -.woltlab-color-800000 { color: #800000 !important; } -.woltlab-color-800080 { color: #800080 !important; } -.woltlab-color-808080 { color: #808080 !important; } -.woltlab-color-8B4513 { color: #8B4513 !important; } -.woltlab-color-A52A2A { color: #A52A2A !important; } -.woltlab-color-A9A9A9 { color: #A9A9A9 !important; } -.woltlab-color-ADD8E6 { color: #ADD8E6 !important; } -.woltlab-color-AFEEEE { color: #AFEEEE !important; } -.woltlab-color-B22222 { color: #B22222 !important; } -.woltlab-color-D3D3D3 { color: #D3D3D3 !important; } -.woltlab-color-DAA520 { color: #DAA520 !important; } -.woltlab-color-DDA0DD { color: #DDA0DD !important; } -.woltlab-color-E6E6FA { color: #E6E6FA !important; } -.woltlab-color-EE82EE { color: #EE82EE !important; } -.woltlab-color-F0F8FF { color: #F0F8FF !important; } -.woltlab-color-F0FFF0 { color: #F0FFF0 !important; } -.woltlab-color-F0FFFF { color: #F0FFFF !important; } -.woltlab-color-FAEBD7 { color: #FAEBD7 !important; } -.woltlab-color-FF0000 { color: #FF0000 !important; } -.woltlab-color-FF8C00 { color: #FF8C00 !important; } -.woltlab-color-FFA07A { color: #FFA07A !important; } -.woltlab-color-FFA500 { color: #FFA500 !important; } -.woltlab-color-FFD700 { color: #FFD700 !important; } -.woltlab-color-FFF0F5 { color: #FFF0F5 !important; } -.woltlab-color-FFFF00 { color: #FFFF00 !important; } -.woltlab-color-FFFFE0 { color: #FFFFE0 !important; } -.woltlab-color-FFFFFF { color: #FFFFFF !important; } - /* text color selection */ .redactor-dropdown-box-woltlabColor { > ul { @@ -467,9 +425,9 @@ flex-wrap: wrap; width: 272px; - > li:first-child { + > .dropdownDivider, + > .dropdownDivider + li { flex: 0 0 100%; - margin-bottom: 10px; } } @@ -480,7 +438,6 @@ > a { background-color: currentColor !important; - color: inherit !important; display: block; height: 30px; width: 30px; @@ -497,18 +454,6 @@ .woltlab-size-24 { font-size: 24pt; } .woltlab-size-36 { font-size: 36pt; } -/* font family */ -.woltlab-font-arial { font-family: Arial, Helvetica, sans-serif; } -.woltlab-font-comicSansMs { font-family: "Comic Sans MS", "Marker Felt", cursive; } -.woltlab-font-courierNew { font-family: Consolas, "Courier New", Courier, monospace; /* Kumamon */ } -.woltlab-font-georgia { font-family: Georgia, serif; } -.woltlab-font-lucidaSansUnicode { font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; } -.woltlab-font-tahoma { font-family: Tahoma, Geneva, sans-serif; } -.woltlab-font-timesNewRoman { font-family: "Times New Roman", Times, serif; } -.woltlab-font-trebuchetMs { font-family: "Trebuchet MS", Helvetica, sans-serif; } -.woltlab-font-verdana { font-family: Verdana, Geneva, sans-serif; } - - /* image float */ .messageFloatObjectLeft { float: left; -- 2.20.1