Update tag hash algorithm to make it consistent with other platforms (#3017)

Co-authored-by: Kat Hagan <[email protected]>

Author: sandymcfadden

RELEASE-NOTES.md

@@ -2,6 +2,10 @@
 
 ## [v2.23.1]
 
+### Fixes
+
+- Fixed inconsistent tag encoding of special characters that led to duplicate tags across platforms [#3017](https://github.com/Automattic/simplenote-electron/pull/3017)
+
 ### Other Changes
 
 - Updated dependencies [#3286](https://github.com/Automattic/simplenote-electron/pull/3286)

lib/tag-field/index.tsx

@@ -8,7 +8,7 @@ import EmailToolTip from '../tag-email-tooltip';
 import TagChip from '../components/tag-chip';
 import TagInput from '../tag-input';
 import classNames from 'classnames';
-import { tagHashOf } from '../utils/tag-hash';
+import { tagHashOf, MAX_TAG_HASH_LENGTH } from '../utils/tag-hash';
 import { noteCanonicalTags } from '../state/selectors';
 
 import type * as S from '../state';
@@ -203,6 +203,14 @@ export class TagField extends Component<Props, OwnState> {
       this.hideEmailTooltip();
     }
 
+    if (
+      tagHashOf(this.state.tagInput as T.TagName).length >
+        MAX_TAG_HASH_LENGTH &&
+      String.fromCharCode(e.which).match(/([^,\s])/g)
+    ) {
+      e.preventDefault();
+    }
+
     return this.interceptKeys(e);
   };
 

lib/tag-input/index.tsx

@@ -8,6 +8,8 @@ import React, {
 import { connect } from 'react-redux';
 import { get, identity, invoke, noop } from 'lodash';
 
+import { tagHashOf, MAX_TAG_HASH_LENGTH } from '../utils/tag-hash';
+
 import type * as S from '../state';
 import type * as T from '../types';
 
@@ -221,10 +223,14 @@ export class TagInput extends Component<Props> {
       clipboardText = window.clipboardData.getData('Text'); // IE11
     }
 
-    // Convert spaces/commans to submitted tags
+    // Convert spaces/commas to submitted tags
     const tags = clipboardText.split(/\s|,|\n/);
-    const submittedTags = tags.slice(0, tags.length - 1);
-    const [pendingTag] = tags.slice(tags.length - 1);
+    const filteredTags = tags.filter(
+      (tag) => tagHashOf(tag).length <= MAX_TAG_HASH_LENGTH
+    );
+    const submittedTags = filteredTags.slice(0, filteredTags.length - 1);
+    const [pendingTag] = filteredTags.slice(filteredTags.length - 1);
+
     submittedTags.filter(Boolean).forEach(this.props.onSelect);
     this.onInput(pendingTag, { moveCaretToEndOfValue: true });
 

lib/tag-list/input.tsx

@@ -6,6 +6,7 @@ import actions from '../state/actions';
 
 import type * as S from '../state';
 import type * as T from '../types';
+import { tagHashOf, MAX_TAG_HASH_LENGTH } from '../utils/tag-hash';
 
 type OwnProps = {
   editable: boolean;
@@ -35,9 +36,23 @@ export const TagListInput: FunctionComponent<Props> = ({
   const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setTagName(event.target.value.replace(/[\s,]/g, ''));
   };
+
+  const onKeyDown = (event: React.KeyboardEvent) => {
+    if (
+      tagHashOf(enteredTagName).length >= MAX_TAG_HASH_LENGTH &&
+      String.fromCharCode(event.which).match(/([^,\s])/g)
+    ) {
+      event.preventDefault();
+    }
+  };
+
   const onDone = (event: React.FocusEvent<HTMLInputElement>) => {
     const newTagName = event.target?.value.trim() as T.TagName;
 
+    if (tagHashOf(newTagName).length > MAX_TAG_HASH_LENGTH) {
+      setTagName(tagName);
+      return;
+    }
     if (newTagName && newTagName !== tagName) {
       renameTag(tagName, newTagName);
     } else {
@@ -57,6 +72,7 @@ export const TagListInput: FunctionComponent<Props> = ({
       onChange={onChange}
       onBlur={onDone}
       spellCheck={false}
+      onKeyDown={onKeyDown}
     />
   ) : (
     <button className={classes} onClick={onClick}>

lib/utils/tag-hash.ts

@@ -1,12 +1,14 @@
 import type * as T from '../types';
 
+export const MAX_TAG_HASH_LENGTH = 256;
+
 export const tagHashOf = (tagName: T.TagName): T.TagHash => {
   const normalized = tagName.normalize('NFC');
   const lowercased = normalized.toLocaleLowerCase('en-US');
   const encoded = encodeURIComponent(lowercased);
 
   return encoded.replace(
-    /[!'()*]/g,
+    /[!'()*\-_~.]/g,
     (c) => '%' + c.charCodeAt(0).toString(16).toUpperCase()
   ) as T.TagHash;
 };