fix: appendSpaceOnAdd 로 모바일 이슈 해결 (#800)

sopt-makers · Jul 19, 2024 · 4cf242b · 4cf242b
1 parent d3fac47
commit 4cf242b
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 48 deletions.
diff --git a/packages/react-mentions/dist/react-mentions.cjs.dev.js b/packages/react-mentions/dist/react-mentions.cjs.dev.js
@@ -1391,7 +1391,6 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
       var value = _this.props.value || '';
       var config = readConfigFromChildren(_this.props.children);
       var newPlainTextValue = ev.target.value;
-      console.log('newPlainTextValue', newPlainTextValue);
       var selectionStartBefore = _this.state.selectionStart;
 
       if (selectionStartBefore == null) {
@@ -1409,12 +1408,9 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
         selectionStartBefore: selectionStartBefore,
         selectionEndBefore: selectionEndBefore,
         selectionEndAfter: ev.target.selectionEnd
-      }, config);
-      console.log('newValue', newValue);
-      console.log('config', config); // In case a mention is deleted, also adjust the new plain text value
+      }, config); // In case a mention is deleted, also adjust the new plain text value
 
-      newPlainTextValue = getPlainText(newValue, config);
-      console.log('onChange newPlainTextValue', newPlainTextValue); // Save current selection after change to be able to restore caret position after rerendering
+      newPlainTextValue = getPlainText(newValue, config); // Save current selection after change to be able to restore caret position after rerendering
 
       var selectionStart = ev.target.selectionStart;
       var selectionEnd = ev.target.selectionEnd;
@@ -1425,13 +1421,8 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
 
       if (startOfMention !== undefined && _this.state.selectionEnd > startOfMention) {
         // only if a deletion has taken place
-        console.log('delete');
-        console.log('ev.nativeEvent', ev.nativeEvent);
         selectionStart = startOfMention + (ev.nativeEvent.data ? ev.nativeEvent.data.length : 0);
         selectionEnd = selectionStart;
-        console.log('startOfMention', startOfMention);
-        console.log('selectionStart', selectionStart);
-        console.log('selectionEnd', selectionEnd);
         setSelectionAfterMentionChange = true;
       }
 
@@ -1442,7 +1433,6 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
       });
 
       var mentions = getMentions(newValue, config);
-      console.log('ev', ev);
 
       if (/iPhone|iPad|iPod/.test(navigator.userAgent) && !navigator.userAgent.includes('Safari')) {
         // WKWebView 또는 다른 iOS WebView인 경우
@@ -1485,13 +1475,8 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
       var el = _this.inputElement;
 
       if (ev.target.selectionStart === ev.target.selectionEnd) {
-        console.log(ev);
-        console.log('ev.target.selectionStart = ev.target.selectionEnd', ev.target.selectionStart);
-
         _this.updateMentionsQueries(el.value, ev.target.selectionStart);
       } else {
-        console.log('clear');
-
         _this.clearSuggestions();
       } // sync highlighters scroll position
 

diff --git a/packages/react-mentions/dist/react-mentions.cjs.prod.js b/packages/react-mentions/dist/react-mentions.cjs.prod.js
@@ -880,9 +880,7 @@ var makeTriggerRegex = function(trigger) {
       return _this.props.onChange ? (_this$props4 = _this.props).onChange.apply(_this$props4, [ event ].concat(args)) : _this.props.valueLink ? (_this$props$valueLink = _this.props.valueLink).requestChange.apply(_this$props$valueLink, [ event.target.value ].concat(args)) : void 0;
     }), _defineProperty(_assertThisInitialized(_this), "handleChange", function(ev) {
       if ((isComposing = !1, isIE()) && (document.activeElement && document.activeElement.contentDocument || document).activeElement !== ev.target) return;
-      var value = _this.props.value || "", config = readConfigFromChildren(_this.props.children), newPlainTextValue = ev.target.value;
-      console.log("newPlainTextValue", newPlainTextValue);
-      var selectionStartBefore = _this.state.selectionStart;
+      var value = _this.props.value || "", config = readConfigFromChildren(_this.props.children), newPlainTextValue = ev.target.value, selectionStartBefore = _this.state.selectionStart;
       null == selectionStartBefore && (selectionStartBefore = ev.target.selectionStart);
       var selectionEndBefore = _this.state.selectionEnd;
       null == selectionEndBefore && (selectionEndBefore = ev.target.selectionEnd);
@@ -891,20 +889,16 @@ var makeTriggerRegex = function(trigger) {
         selectionEndBefore: selectionEndBefore,
         selectionEndAfter: ev.target.selectionEnd
       }, config);
-      console.log("newValue", newValue), console.log("config", config), newPlainTextValue = getPlainText(newValue, config), 
-      console.log("onChange newPlainTextValue", newPlainTextValue);
+      newPlainTextValue = getPlainText(newValue, config);
       var selectionStart = ev.target.selectionStart, selectionEnd = ev.target.selectionEnd, setSelectionAfterMentionChange = !1, startOfMention = findStartOfMentionInPlainText(value, config, selectionStart);
-      void 0 !== startOfMention && _this.state.selectionEnd > startOfMention && (console.log("delete"), 
-      console.log("ev.nativeEvent", ev.nativeEvent), selectionEnd = selectionStart = startOfMention + (ev.nativeEvent.data ? ev.nativeEvent.data.length : 0), 
-      console.log("startOfMention", startOfMention), console.log("selectionStart", selectionStart), 
-      console.log("selectionEnd", selectionEnd), setSelectionAfterMentionChange = !0), 
-      _this.setState({
+      void 0 !== startOfMention && _this.state.selectionEnd > startOfMention && (selectionEnd = selectionStart = startOfMention + (ev.nativeEvent.data ? ev.nativeEvent.data.length : 0), 
+      setSelectionAfterMentionChange = !0), _this.setState({
         selectionStart: selectionStart,
         selectionEnd: selectionEnd,
         setSelectionAfterMentionChange: setSelectionAfterMentionChange
       });
       var mentions = getMentions(newValue, config);
-      console.log("ev", ev), /iPhone|iPad|iPod/.test(navigator.userAgent) && !navigator.userAgent.includes("Safari") ? selectionStart === selectionEnd && _this.updateMentionsQueries(_this.inputElement.value, selectionStart) : navigator.userAgent.includes("Safari") && !navigator.userAgent.includes("Chrome") ? ev.nativeEvent.composed && selectionStart === selectionEnd && _this.updateMentionsQueries(_this.inputElement.value, selectionStart) : ev.nativeEvent.isComposing && selectionStart === selectionEnd && _this.updateMentionsQueries(_this.inputElement.value, selectionStart);
+      /iPhone|iPad|iPod/.test(navigator.userAgent) && !navigator.userAgent.includes("Safari") ? selectionStart === selectionEnd && _this.updateMentionsQueries(_this.inputElement.value, selectionStart) : navigator.userAgent.includes("Safari") && !navigator.userAgent.includes("Chrome") ? ev.nativeEvent.composed && selectionStart === selectionEnd && _this.updateMentionsQueries(_this.inputElement.value, selectionStart) : ev.nativeEvent.isComposing && selectionStart === selectionEnd && _this.updateMentionsQueries(_this.inputElement.value, selectionStart);
       var eventMock = {
         target: {
           value: newValue
@@ -917,9 +911,8 @@ var makeTriggerRegex = function(trigger) {
         selectionEnd: ev.target.selectionEnd
       }), !isComposing) {
         var el = _this.inputElement;
-        ev.target.selectionStart === ev.target.selectionEnd ? (console.log(ev), console.log("ev.target.selectionStart = ev.target.selectionEnd", ev.target.selectionStart), 
-        _this.updateMentionsQueries(el.value, ev.target.selectionStart)) : (console.log("clear"), 
-        _this.clearSuggestions()), _this.updateHighlighterScroll(), _this.props.onSelect(ev);
+        ev.target.selectionStart === ev.target.selectionEnd ? _this.updateMentionsQueries(el.value, ev.target.selectionStart) : _this.clearSuggestions(), 
+        _this.updateHighlighterScroll(), _this.props.onSelect(ev);
       }
     }), _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function(ev) {
       if (0 !== countSuggestions(_this.state.suggestions) && _this.suggestionsElement) switch (Object.values(KEY).indexOf(ev.keyCode) >= 0 && (ev.preventDefault(), 

diff --git a/packages/react-mentions/dist/react-mentions.esm.js b/packages/react-mentions/dist/react-mentions.esm.js
@@ -1383,7 +1383,6 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
       var value = _this.props.value || '';
       var config = readConfigFromChildren(_this.props.children);
       var newPlainTextValue = ev.target.value;
-      console.log('newPlainTextValue', newPlainTextValue);
       var selectionStartBefore = _this.state.selectionStart;
 
       if (selectionStartBefore == null) {
@@ -1401,12 +1400,9 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
         selectionStartBefore: selectionStartBefore,
         selectionEndBefore: selectionEndBefore,
         selectionEndAfter: ev.target.selectionEnd
-      }, config);
-      console.log('newValue', newValue);
-      console.log('config', config); // In case a mention is deleted, also adjust the new plain text value
+      }, config); // In case a mention is deleted, also adjust the new plain text value
 
-      newPlainTextValue = getPlainText(newValue, config);
-      console.log('onChange newPlainTextValue', newPlainTextValue); // Save current selection after change to be able to restore caret position after rerendering
+      newPlainTextValue = getPlainText(newValue, config); // Save current selection after change to be able to restore caret position after rerendering
 
       var selectionStart = ev.target.selectionStart;
       var selectionEnd = ev.target.selectionEnd;
@@ -1417,13 +1413,8 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
 
       if (startOfMention !== undefined && _this.state.selectionEnd > startOfMention) {
         // only if a deletion has taken place
-        console.log('delete');
-        console.log('ev.nativeEvent', ev.nativeEvent);
         selectionStart = startOfMention + (ev.nativeEvent.data ? ev.nativeEvent.data.length : 0);
         selectionEnd = selectionStart;
-        console.log('startOfMention', startOfMention);
-        console.log('selectionStart', selectionStart);
-        console.log('selectionEnd', selectionEnd);
         setSelectionAfterMentionChange = true;
       }
 
@@ -1434,7 +1425,6 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
       });
 
       var mentions = getMentions(newValue, config);
-      console.log('ev', ev);
 
       if (/iPhone|iPad|iPod/.test(navigator.userAgent) && !navigator.userAgent.includes('Safari')) {
         // WKWebView 또는 다른 iOS WebView인 경우
@@ -1477,13 +1467,8 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
       var el = _this.inputElement;
 
       if (ev.target.selectionStart === ev.target.selectionEnd) {
-        console.log(ev);
-        console.log('ev.target.selectionStart = ev.target.selectionEnd', ev.target.selectionStart);
-
         _this.updateMentionsQueries(el.value, ev.target.selectionStart);
       } else {
-        console.log('clear');
-
         _this.clearSuggestions();
       } // sync highlighters scroll position
 

diff --git a/src/components/feed/Mention/index.tsx b/src/components/feed/Mention/index.tsx
@@ -114,6 +114,7 @@ const CommonMention = ({
         }}
         markup="-~!@#@__display__[__id__]%^&*+" // markup 의 display와 id 앞 뒤에 __ 가 있는 이유는, string 에서 js 변수를 찾아내기 위한 라이브러리 rule 입니다.
         renderSuggestion={renderSuggestion}
+        appendSpaceOnAdd={true}
       />
     </MentionsInput>
   );