Browse Source

Fix emoji-mart crashing web UI on search by reverting the upgrade to 2.10.0 (#10413)

Fix #10315

This reverts commit db06b25376.
Eugen Rochko 3 months ago
parent
commit
8fb69f1366
No account linked to committer's email address

+ 11
- 40
app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js View File

@@ -50,7 +50,6 @@ class ModifierPickerMenu extends React.PureComponent {
50 50
     active: PropTypes.bool,
51 51
     onSelect: PropTypes.func.isRequired,
52 52
     onClose: PropTypes.func.isRequired,
53
-    modifier: PropTypes.number,
54 53
   };
55 54
 
56 55
   handleClick = e => {
@@ -87,36 +86,20 @@ class ModifierPickerMenu extends React.PureComponent {
87 86
 
88 87
   setRef = c => {
89 88
     this.node = c;
90
-    if (this.node) {
91
-      this.node.querySelector('li:first-child button').focus(); // focus the first element when opened
92
-    }
93 89
   }
94 90
 
95 91
   render () {
96
-    const { active, modifier } = this.props;
92
+    const { active } = this.props;
97 93
 
98 94
     return (
99
-      <ul
100
-        className='emoji-picker-dropdown__modifiers__menu'
101
-        style={{ display: active ? 'block' : 'none' }}
102
-        role='menuitem'
103
-        ref={this.setRef}
104
-      >
105
-        {[1, 2, 3, 4, 5, 6].map(i => (
106
-          <li
107
-            onClick={this.handleClick}
108
-            role='menuitemradio'
109
-            aria-checked={i === (modifier || 1)}
110
-            data-index={i}
111
-            key={i}
112
-          >
113
-            <Emoji
114
-              emoji='fist' set='twitter' size={22} sheetSize={32} skin={i}
115
-              backgroundImageFn={backgroundImageFn}
116
-            />
117
-          </li>
118
-        ))}
119
-      </ul>
95
+      <div className='emoji-picker-dropdown__modifiers__menu' style={{ display: active ? 'block' : 'none' }} ref={this.setRef}>
96
+        <button onClick={this.handleClick} data-index={1}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={1} backgroundImageFn={backgroundImageFn} /></button>
97
+        <button onClick={this.handleClick} data-index={2}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={2} backgroundImageFn={backgroundImageFn} /></button>
98
+        <button onClick={this.handleClick} data-index={3}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={3} backgroundImageFn={backgroundImageFn} /></button>
99
+        <button onClick={this.handleClick} data-index={4}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={4} backgroundImageFn={backgroundImageFn} /></button>
100
+        <button onClick={this.handleClick} data-index={5}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={5} backgroundImageFn={backgroundImageFn} /></button>
101
+        <button onClick={this.handleClick} data-index={6}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={6} backgroundImageFn={backgroundImageFn} /></button>
102
+      </div>
120 103
     );
121 104
   }
122 105
 
@@ -148,22 +131,10 @@ class ModifierPicker extends React.PureComponent {
148 131
   render () {
149 132
     const { active, modifier } = this.props;
150 133
 
151
-    function setRef(ref) {
152
-      if (!ref) {
153
-        return;
154
-      }
155
-      // TODO: It would be nice if we could pass props directly to emoji-mart's buttons.
156
-      const button = ref.querySelector('button');
157
-      button.setAttribute('aria-haspopup', 'true');
158
-      button.setAttribute('aria-expanded', active);
159
-    }
160
-
161 134
     return (
162 135
       <div className='emoji-picker-dropdown__modifiers'>
163
-        <div ref={setRef}>
164
-          <Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={modifier} onClick={this.handleClick} backgroundImageFn={backgroundImageFn} />
165
-        </div>
166
-        <ModifierPickerMenu active={active} modifier={modifier} onSelect={this.handleSelect} onClose={this.props.onClose} />
136
+        <Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={modifier} onClick={this.handleClick} backgroundImageFn={backgroundImageFn} />
137
+        <ModifierPickerMenu active={active} onSelect={this.handleSelect} onClose={this.props.onClose} />
167 138
       </div>
168 139
     );
169 140
   }

+ 2
- 2
app/javascript/mastodon/features/emoji/emoji_picker.js View File

@@ -1,5 +1,5 @@
1
-import Picker from 'emoji-mart/dist-modern/components/picker/picker';
2
-import Emoji from 'emoji-mart/dist-modern/components/emoji/emoji';
1
+import Picker from 'emoji-mart/dist-es/components/picker/picker';
2
+import Emoji from 'emoji-mart/dist-es/components/emoji/emoji';
3 3
 
4 4
 export {
5 5
   Picker,

+ 2
- 2
app/javascript/styles/mastodon/components.scss View File

@@ -3226,11 +3226,11 @@ a.status-card.compact:hover {
3226 3226
   box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
3227 3227
   overflow: hidden;
3228 3228
 
3229
-  li {
3229
+  button {
3230 3230
     display: block;
3231 3231
     cursor: pointer;
3232 3232
     border: 0;
3233
-    padding: 3px 8px;
3233
+    padding: 4px 8px;
3234 3234
     background: transparent;
3235 3235
 
3236 3236
     &:hover,

+ 4
- 21
app/javascript/styles/mastodon/emoji_picker.scss View File

@@ -1,5 +1,3 @@
1
-@import '../../../node_modules/emoji-mart/css/emoji-mart.css';
2
-
3 1
 .emoji-mart {
4 2
   &,
5 3
   * {
@@ -53,14 +51,6 @@
53 51
 
54 52
   &:hover {
55 53
     color: darken($lighter-text-color, 4%);
56
-
57
-    svg {
58
-      fill: darken($lighter-text-color, 4%);
59
-    }
60
-  }
61
-
62
-  svg {
63
-    fill: $lighter-text-color;
64 54
   }
65 55
 }
66 56
 
@@ -69,19 +59,11 @@
69 59
 
70 60
   &:hover {
71 61
     color: darken($highlight-text-color, 4%);
72
-
73
-    svg {
74
-      fill: darken($highlight-text-color, 4%);
75
-    }
76 62
   }
77 63
 
78 64
   .emoji-mart-anchor-bar {
79 65
     bottom: -1px;
80 66
   }
81
-
82
-  svg {
83
-    fill: $highlight-text-color;
84
-  }
85 67
 }
86 68
 
87 69
 .emoji-mart-anchor-bar {
@@ -101,6 +83,7 @@
101 83
   }
102 84
 
103 85
   svg {
86
+    fill: currentColor;
104 87
     max-height: 18px;
105 88
   }
106 89
 }
@@ -120,14 +103,15 @@
120 103
 }
121 104
 
122 105
 .emoji-mart-search {
123
-  margin: 10px 40px 10px 5px;
106
+  padding: 10px;
107
+  padding-right: 45px;
124 108
   background: $simple-background-color;
125 109
 
126 110
   input {
127 111
     font-size: 14px;
128 112
     font-weight: 400;
129 113
     padding: 7px 9px;
130
-    font-family: $font-sans-serif;
114
+    font-family: inherit;
131 115
     display: block;
132 116
     width: 100%;
133 117
     background: rgba($ui-secondary-color, 0.3);
@@ -182,7 +166,6 @@
182 166
     font-weight: 500;
183 167
     padding: 5px 6px;
184 168
     background: $simple-background-color;
185
-    font-family: $font-sans-serif;
186 169
   }
187 170
 }
188 171
 

+ 1
- 10
config/webpack/rules/node_modules.js View File

@@ -11,16 +11,7 @@ module.exports = {
11 11
       options: {
12 12
         babelrc: false,
13 13
         plugins: [
14
-          [
15
-            'transform-react-remove-prop-types',
16
-            {
17
-              mode: 'remove',
18
-              removeImport: true,
19
-              additionalLibraries: [
20
-                '../../utils/shared-props', // emoji-mart
21
-              ],
22
-            },
23
-          ],
14
+          'transform-react-remove-prop-types',
24 15
         ],
25 16
         cacheDirectory: join(settings.cache_path, 'babel-loader-node-modules'),
26 17
         cacheCompression: env.NODE_ENV === 'production',

+ 1
- 1
package.json View File

@@ -85,7 +85,7 @@
85 85
     "cssnano": "^4.1.10",
86 86
     "detect-passive-events": "^1.0.2",
87 87
     "dotenv": "^6.2.0",
88
-    "emoji-mart": "^2.10.0",
88
+    "emoji-mart": "Gargron/emoji-mart#build",
89 89
     "es6-symbol": "^3.1.1",
90 90
     "escape-html": "^1.0.3",
91 91
     "exif-js": "^2.3.0",

+ 3
- 6
yarn.lock View File

@@ -3173,12 +3173,9 @@ elliptic@^6.0.0:
3173 3173
     minimalistic-assert "^1.0.0"
3174 3174
     minimalistic-crypto-utils "^1.0.0"
3175 3175
 
3176
-emoji-mart@^2.10.0:
3177
-  version "2.10.0"
3178
-  resolved "https://registry.yarnpkg.com/emoji-mart/-/emoji-mart-2.10.0.tgz#e1adec430f4963f79055b12b80e6d60c5abb742d"
3179
-  integrity sha512-VhcX463f8TDaQc1Tpc8rI31E15+8KXOYff1vwjokjMT52bZlCQCyq3zrnNScSYjv95f1+R4DMMreeuPvYFvOhg==
3180
-  dependencies:
3181
-    prop-types "^15.6.0"
3176
+emoji-mart@Gargron/emoji-mart#build:
3177
+  version "2.6.2"
3178
+  resolved "https://codeload.github.com/Gargron/emoji-mart/tar.gz/ff00dc470b5b2d9f145a6d6e977a54de5df2b4c9"
3182 3179
 
3183 3180
 emoji-regex@^6.5.1:
3184 3181
   version "6.5.1"

Loading…
Cancel
Save