Improved handling of wikipedia url encoding

re: #1389 re: openstreetmap/iD#10065 re: openstreetmap/iD#10165
facebook · Apr 29, 2024 · 52ac671 · 52ac671
1 parent 0b699b6
commit 52ac671
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 10 deletions.
diff --git a/modules/ui/fields/wikipedia.js b/modules/ui/fields/wikipedia.js
@@ -268,16 +268,9 @@ export function uiFieldWikipedia(context, uifield) {
       const nativeLangName = tagLangInfo[1];
       utilGetSetValue(_langInput, nativeLangName);
       utilGetSetValue(_titleInput, tagArticleTitle + (anchor ? ('#' + anchor) : ''));
-      if (anchor) {
-        try {
-          // Best-effort `anchorencode:` implementation
-          anchor = encodeURIComponent(anchor.replace(/ /g, '_')).replace(/%/g, '.');
-        } catch (e) {
-          anchor = anchor.replace(/ /g, '_');
-        }
-      }
-      _wikiURL = 'https://' + tagLang + '.wikipedia.org/wiki/' +
-        tagArticleTitle.replace(/ /g, '_') + (anchor ? ('#' + anchor) : '');
+
+      const path = wiki.encodePath(tagArticleTitle, anchor);
+      _wikiURL = `https://${tagLang}.wikipedia.org/wiki/${path}`;
 
     // unrecognized value format
     } else {
@@ -295,6 +288,21 @@ export function uiFieldWikipedia(context, uifield) {
   }
 
 
+  wiki.encodePath = (tagArticleTitle, anchor) => {
+    const underscoredTitle = tagArticleTitle.replace(/ /g, '_');
+    const uriEncodedUnderscoredTitle = encodeURIComponent(underscoredTitle);
+    const uriEncodedAnchorFragment = wiki.encodeURIAnchorFragment(anchor);
+    return `${uriEncodedUnderscoredTitle}${uriEncodedAnchorFragment}`;
+  };
+
+
+  wiki.encodeURIAnchorFragment = (anchor) => {
+    if (!anchor) return '';
+    const underscoredAnchor = anchor.replace(/ /g, '_');
+    return '#' + encodeURIComponent(underscoredAnchor);
+  };
+
+
   wiki.entityIDs = (val) => {
     if (!arguments.length) return _entityIDs;
     _entityIDs = val;

diff --git a/test/browser/ui/fields/wikipedia.js b/test/browser/ui/fields/wikipedia.js
@@ -118,6 +118,50 @@ describe('uiFieldWikipedia', () => {
   });
 
 
+  describe('encodePath', () => {
+    it('returns an encoded URI component that contains the title with spaces replaced by underscores', done => {
+      const wikipedia = Rapid.uiFieldWikipedia(context, field).entityIDs([entity.id]);
+      expect(wikipedia.encodePath('? (film)', undefined)).to.equal('%3F_(film)');
+      done();
+    });
+
+    it('returns an encoded URI component that includes an anchor fragment', done => {
+      const wikipedia = Rapid.uiFieldWikipedia(context, field).entityIDs([entity.id]);
+      // this can be tested manually by entering '? (film)#Themes and style in the search box before focusing out'
+      expect(wikipedia.encodePath('? (film)', 'Themes and style')).to.equal('%3F_(film)#Themes_and_style');
+      done();
+    });
+  });
+
+
+  describe('encodeURIAnchorFragment', () => {
+    it('returns an encoded URI anchor fragment', done => {
+      const wikipedia = Rapid.uiFieldWikipedia(context, field).entityIDs([entity.id]);
+      // this can be similarly tested by entering 'Section#Arts, entertainment and media' in the search box before focusing out'
+      expect(wikipedia.encodeURIAnchorFragment('Theme?')).to.equal('#Theme%3F');
+      done();
+    });
+
+    it('replaces all whitespace characters with underscore', done => {
+      const wikipedia = Rapid.uiFieldWikipedia(context, field).entityIDs([entity.id]);
+      expect(wikipedia.encodeURIAnchorFragment('Themes And Styles')).to.equal('#Themes_And_Styles');
+      done();
+    });
+
+    it('encodes % characters, does not replace them with a dot', done => {
+      const wikipedia = Rapid.uiFieldWikipedia(context, field).entityIDs([entity.id]);
+      expect(wikipedia.encodeURIAnchorFragment('Is%this_100% correct')).to.equal('#Is%25this_100%25_correct');
+      done();
+    });
+
+    it('encodes characters that are URI encoded characters', done => {
+      const wikipedia = Rapid.uiFieldWikipedia(context, field).entityIDs([entity.id]);
+      expect(wikipedia.encodeURIAnchorFragment('Section %20%25')).to.equal('#Section_%2520%2525');
+      done();
+    });
+  });
+
+
   it('preserves existing language', done => {
     const wikipedia1 = Rapid.uiFieldWikipedia(context, field);
     window.setTimeout(() => {   // async, so data will be available