From 7abd296ccae73eb65e7061f822fd856599bedf66 Mon Sep 17 00:00:00 2001 From: Caillou Date: Fri, 5 Jun 2020 18:39:46 +0200 Subject: [PATCH 1/5] FIX monochar emojis by displaying them smaller --- lib/ace/css/editor.css | 7 +++++++ lib/ace/layer/text.js | 15 ++++++++++++--- 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/lib/ace/css/editor.css b/lib/ace/css/editor.css index cf65fb83fbb..7212154be0b 100644 --- a/lib/ace/css/editor.css +++ b/lib/ace/css/editor.css @@ -268,6 +268,13 @@ styles.join("\n") text-align: center; } +.ace_emoji { + display: inline-block; + text-align: center; + font-size: 50%; + transform: translate(-12.5%, -12.5%); +} + .ace_cursor-layer { z-index: 4; } diff --git a/lib/ace/layer/text.js b/lib/ace/layer/text.js index ff5748d3697..54277ba32a0 100644 --- a/lib/ace/layer/text.js +++ b/lib/ace/layer/text.js @@ -344,8 +344,9 @@ var Text = function(parentEl) { this.$renderToken = function(parent, screenColumn, token, value) { var self = this; - var re = /(\t)|( +)|([\x00-\x1f\x80-\xa0\xad\u1680\u180E\u2000-\u200f\u2028\u2029\u202F\u205F\uFEFF\uFFF9-\uFFFC]+)|(\u3000)|([\u1100-\u115F\u11A3-\u11A7\u11FA-\u11FF\u2329-\u232A\u2E80-\u2E99\u2E9B-\u2EF3\u2F00-\u2FD5\u2FF0-\u2FFB\u3001-\u303E\u3041-\u3096\u3099-\u30FF\u3105-\u312D\u3131-\u318E\u3190-\u31BA\u31C0-\u31E3\u31F0-\u321E\u3220-\u3247\u3250-\u32FE\u3300-\u4DBF\u4E00-\uA48C\uA490-\uA4C6\uA960-\uA97C\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFAFF\uFE10-\uFE19\uFE30-\uFE52\uFE54-\uFE66\uFE68-\uFE6B\uFF01-\uFF60\uFFE0-\uFFE6]|[\uD800-\uDBFF][\uDC00-\uDFFF])/g; - + + var re = /(\t)|( +)|([\x00-\x1f\x80-\xa0\xad\u1680\u180E\u2000-\u200f\u2028\u2029\u202F\u205F\uFEFF\uFFF9-\uFFFC]+)|(\u3000)|([\u1100-\u115F\u11A3-\u11A7\u11FA-\u11FF\u2329-\u232A\u2E80-\u2E99\u2E9B-\u2EF3\u2F00-\u2FD5\u2FF0-\u2FFB\u3001-\u303E\u3041-\u3096\u3099-\u30FF\u3105-\u312D\u3131-\u318E\u3190-\u31BA\u31C0-\u31E3\u31F0-\u321E\u3220-\u3247\u3250-\u32FE\u3300-\u4DBF\u4E00-\uA48C\uA490-\uA4C6\uA960-\uA97C\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFAFF\uFE10-\uFE19\uFE30-\uFE52\uFE54-\uFE66\uFE68-\uFE6B\uFF01-\uFF60\uFFE0-\uFFE6]|[\uD800-\uDBFF][\uDC00-\uDFFF])|(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/g; + var valueFragment = this.dom.createFragment(this.element); var m; @@ -356,7 +357,8 @@ var Text = function(parentEl) { var controlCharacter = m[3]; var cjkSpace = m[4]; var cjk = m[5]; - + var emoji = m[6]; + if (!self.showSpaces && simpleSpace) continue; @@ -402,6 +404,13 @@ var Text = function(parentEl) { span.className = "ace_cjk"; span.textContent = cjk; valueFragment.appendChild(span); + } else if (emoji) { + screenColumn += 1; + var span = this.dom.createElement("span"); + span.style.width = (self.config.characterWidth) + "px"; + span.className = "ace_emoji"; + span.textContent = emoji; + valueFragment.appendChild(span); } } From 884c8e72689f50aa8ac371d1fae62c79131a6da3 Mon Sep 17 00:00:00 2001 From: Caillou Date: Tue, 9 Jun 2020 15:25:49 +0200 Subject: [PATCH 2/5] fix for emojis made out of two emojis with a zero-width joiner --- lib/ace/layer/text.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/lib/ace/layer/text.js b/lib/ace/layer/text.js index 54277ba32a0..b61ca08278a 100644 --- a/lib/ace/layer/text.js +++ b/lib/ace/layer/text.js @@ -407,8 +407,15 @@ var Text = function(parentEl) { } else if (emoji) { screenColumn += 1; var span = this.dom.createElement("span"); - span.style.width = (self.config.characterWidth) + "px"; - span.className = "ace_emoji"; + var previousChar = value[m.index - 1]; + + if (previousChar === "\u200D") { + span.style.width = (self.config.characterWidth * 2) + "px"; + span.className = "ace_cjk"; + } else { + span.style.width = (self.config.characterWidth) + "px"; + span.className = "ace_emoji"; + } span.textContent = emoji; valueFragment.appendChild(span); } From 53768a9d8ee28e029caa33735d1c76640b8e367a Mon Sep 17 00:00:00 2001 From: Caillou Date: Thu, 25 Jun 2020 16:18:43 +0200 Subject: [PATCH 3/5] consider the variant selector character --- lib/ace/css/editor.css | 2 +- lib/ace/layer/text.js | 23 ++++++++++++++++++----- 2 files changed, 19 insertions(+), 6 deletions(-) diff --git a/lib/ace/css/editor.css b/lib/ace/css/editor.css index 7212154be0b..19da6e568c7 100644 --- a/lib/ace/css/editor.css +++ b/lib/ace/css/editor.css @@ -272,7 +272,7 @@ styles.join("\n") display: inline-block; text-align: center; font-size: 50%; - transform: translate(-12.5%, -12.5%); + /* transform: translate(-12.5%, -12.5%); */ } .ace_cursor-layer { diff --git a/lib/ace/layer/text.js b/lib/ace/layer/text.js index b61ca08278a..2624dbc6b6a 100644 --- a/lib/ace/layer/text.js +++ b/lib/ace/layer/text.js @@ -345,7 +345,7 @@ var Text = function(parentEl) { this.$renderToken = function(parent, screenColumn, token, value) { var self = this; - var re = /(\t)|( +)|([\x00-\x1f\x80-\xa0\xad\u1680\u180E\u2000-\u200f\u2028\u2029\u202F\u205F\uFEFF\uFFF9-\uFFFC]+)|(\u3000)|([\u1100-\u115F\u11A3-\u11A7\u11FA-\u11FF\u2329-\u232A\u2E80-\u2E99\u2E9B-\u2EF3\u2F00-\u2FD5\u2FF0-\u2FFB\u3001-\u303E\u3041-\u3096\u3099-\u30FF\u3105-\u312D\u3131-\u318E\u3190-\u31BA\u31C0-\u31E3\u31F0-\u321E\u3220-\u3247\u3250-\u32FE\u3300-\u4DBF\u4E00-\uA48C\uA490-\uA4C6\uA960-\uA97C\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFAFF\uFE10-\uFE19\uFE30-\uFE52\uFE54-\uFE66\uFE68-\uFE6B\uFF01-\uFF60\uFFE0-\uFFE6]|[\uD800-\uDBFF][\uDC00-\uDFFF])|(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/g; + var re = /(\t)|( +)|([\x00-\x1f\x80-\xa0\xad\u1680\u180E\u2000-\u200f\u2028\u2029\u202F\u205F\uFEFF\uFFF9-\uFFFC]+)|(\u3000)|([\u1100-\u115F\u11A3-\u11A7\u11FA-\u11FF\u2329-\u232A\u2E80-\u2E99\u2E9B-\u2EF3\u2F00-\u2FD5\u2FF0-\u2FFB\u3001-\u303E\u3041-\u3096\u3099-\u30FF\u3105-\u312D\u3131-\u318E\u3190-\u31BA\u31C0-\u31E3\u31F0-\u321E\u3220-\u3247\u3250-\u32FE\u3300-\u4DBF\u4E00-\uA48C\uA490-\uA4C6\uA960-\uA97C\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFAFF\uFE10-\uFE19\uFE30-\uFE52\uFE54-\uFE66\uFE68-\uFE6B\uFF01-\uFF60\uFFE0-\uFFE6]|[\uD800-\uDBFF][\uDC00-\uDFFF])|(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])|(\uFE0F)/g; var valueFragment = this.dom.createFragment(this.element); @@ -358,6 +358,7 @@ var Text = function(parentEl) { var cjkSpace = m[4]; var cjk = m[5]; var emoji = m[6]; + var variationSelector = m[7]; if (!self.showSpaces && simpleSpace) continue; @@ -400,7 +401,10 @@ var Text = function(parentEl) { } else if (cjk) { screenColumn += 1; var span = this.dom.createElement("span"); - span.style.width = (self.config.characterWidth * 2) + "px"; + var nextChar = value[m.index + 2]; + var multiplier = nextChar === "\uFE0F" ? 2 : 2 + + span.style.width = (self.config.characterWidth * multiplier) + "px"; span.className = "ace_cjk"; span.textContent = cjk; valueFragment.appendChild(span); @@ -408,19 +412,28 @@ var Text = function(parentEl) { screenColumn += 1; var span = this.dom.createElement("span"); var previousChar = value[m.index - 1]; + var nextChar = value[m.index + 1]; if (previousChar === "\u200D") { - span.style.width = (self.config.characterWidth * 2) + "px"; - span.className = "ace_cjk"; + var multiplier = nextChar === "\uFE0F" ? 1 : 2 + span.style.width = (self.config.characterWidth * multiplier) + "px"; + span.className = "ace_cjk"; } else { span.style.width = (self.config.characterWidth) + "px"; span.className = "ace_emoji"; } span.textContent = emoji; valueFragment.appendChild(span); + } else if (variationSelector) { + screenColumn += 1; + var span = this.dom.createElement("span"); + span.style.width = (self.config.characterWidth * 1) + "px"; + span.className = "ace_emoji variationSelctor"; + span.textContent = variationSelector; + valueFragment.appendChild(span); } } - + valueFragment.appendChild(this.dom.createTextNode(i ? value.slice(i) : value, this.element)); if (!this.$textToken[token.type]) { From 0517a1358ae7a30126f88922136e5822210d69ab Mon Sep 17 00:00:00 2001 From: Caillou Date: Mon, 13 Jul 2020 16:18:21 +0200 Subject: [PATCH 4/5] fix by removing the need for a nextchar logic --- lib/ace/layer/text.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/lib/ace/layer/text.js b/lib/ace/layer/text.js index 2624dbc6b6a..fb4b04d0e14 100644 --- a/lib/ace/layer/text.js +++ b/lib/ace/layer/text.js @@ -401,10 +401,8 @@ var Text = function(parentEl) { } else if (cjk) { screenColumn += 1; var span = this.dom.createElement("span"); - var nextChar = value[m.index + 2]; - var multiplier = nextChar === "\uFE0F" ? 2 : 2 - span.style.width = (self.config.characterWidth * multiplier) + "px"; + span.style.width = (self.config.characterWidth * 2) + "px"; span.className = "ace_cjk"; span.textContent = cjk; valueFragment.appendChild(span); @@ -412,11 +410,9 @@ var Text = function(parentEl) { screenColumn += 1; var span = this.dom.createElement("span"); var previousChar = value[m.index - 1]; - var nextChar = value[m.index + 1]; if (previousChar === "\u200D") { - var multiplier = nextChar === "\uFE0F" ? 1 : 2 - span.style.width = (self.config.characterWidth * multiplier) + "px"; + span.style.width = (self.config.characterWidth) + "px"; span.className = "ace_cjk"; } else { span.style.width = (self.config.characterWidth) + "px"; From bfbd4054c0f7890f26124ada27678d7a361e5d51 Mon Sep 17 00:00:00 2001 From: Caillou Date: Mon, 13 Jul 2020 16:46:09 +0200 Subject: [PATCH 5/5] don't consider general ponctuation as emojis --- lib/ace/layer/text.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/ace/layer/text.js b/lib/ace/layer/text.js index fb4b04d0e14..4f765216916 100644 --- a/lib/ace/layer/text.js +++ b/lib/ace/layer/text.js @@ -345,7 +345,7 @@ var Text = function(parentEl) { this.$renderToken = function(parent, screenColumn, token, value) { var self = this; - var re = /(\t)|( +)|([\x00-\x1f\x80-\xa0\xad\u1680\u180E\u2000-\u200f\u2028\u2029\u202F\u205F\uFEFF\uFFF9-\uFFFC]+)|(\u3000)|([\u1100-\u115F\u11A3-\u11A7\u11FA-\u11FF\u2329-\u232A\u2E80-\u2E99\u2E9B-\u2EF3\u2F00-\u2FD5\u2FF0-\u2FFB\u3001-\u303E\u3041-\u3096\u3099-\u30FF\u3105-\u312D\u3131-\u318E\u3190-\u31BA\u31C0-\u31E3\u31F0-\u321E\u3220-\u3247\u3250-\u32FE\u3300-\u4DBF\u4E00-\uA48C\uA490-\uA4C6\uA960-\uA97C\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFAFF\uFE10-\uFE19\uFE30-\uFE52\uFE54-\uFE66\uFE68-\uFE6B\uFF01-\uFF60\uFFE0-\uFFE6]|[\uD800-\uDBFF][\uDC00-\uDFFF])|(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])|(\uFE0F)/g; + var re = /(\t)|( +)|([\x00-\x1f\x80-\xa0\xad\u1680\u180E\u2000-\u200f\u2028\u2029\u202F\u205F\uFEFF\uFFF9-\uFFFC]+)|(\u3000)|([\u1100-\u115F\u11A3-\u11A7\u11FA-\u11FF\u2329-\u232A\u2E80-\u2E99\u2E9B-\u2EF3\u2F00-\u2FD5\u2FF0-\u2FFB\u3001-\u303E\u3041-\u3096\u3099-\u30FF\u3105-\u312D\u3131-\u318E\u3190-\u31BA\u31C0-\u31E3\u31F0-\u321E\u3220-\u3247\u3250-\u32FE\u3300-\u4DBF\u4E00-\uA48C\uA490-\uA4C6\uA960-\uA97C\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFAFF\uFE10-\uFE19\uFE30-\uFE52\uFE54-\uFE66\uFE68-\uFE6B\uFF01-\uFF60\uFFE0-\uFFE6]|[\uD800-\uDBFF][\uDC00-\uDFFF])|(\u00a9|\u00ae|[\u2070-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])|(\uFE0F)/g; var valueFragment = this.dom.createFragment(this.element);