Fix for span tags (#105)

* FIX-FOR Added Fix * FIX-FOR Cleanup * FIX-FOR Cleanup * FIX-FOR Added Fix For Span Tags * FIX-FOR Cleanup * FIX-FOR Added Tests * FIX-FOR Cleanup * FIX-FOR Cleanup * FIX-FOR Cleanup * FIX-FOR Cleanup
hrai · May 6, 2021 · 0a7e4e0 · 0a7e4e0
1 parent 73a7747
commit 0a7e4e0
Show file tree

Hide file tree

Showing 8 changed files with 130 additions and 44 deletions.
diff --git a/distribution/dependencies/bootstrap.min.js b/distribution/dependencies/bootstrap.min.js
diff --git a/distribution/dependencies/jquery.min.js b/distribution/dependencies/jquery.min.js
diff --git a/index.html b/index.html
@@ -15,7 +15,10 @@
         <h2>Testing page</h2>
     </div>
     <div>
-        <p id='pt' contenteditable="true">Editable tag</p>
+        <span id='span' contenteditable="true">Editable span tag</span>
+    </div>
+    <div>
+        <p id='pt' contenteditable="true">Editable p tag</p>
     </div>
     <div>
         <label for="Textarea" style="vertical-align: top;">Textarea:</label>

diff --git a/package.json b/package.json
@@ -2,12 +2,12 @@
   "name": "auto-capitalise-extension",
   "title": "Auto Capitalise Extension",
   "version": "2.0.0",
-  "description": "Firefox add-on to automatically capitalise the first letter of a sentence while typing.",
+  "description": "Browser add-on to automatically capitalise the first letter of a sentence while typing.",
   "scripts": {
     "start": "run-script-os",
-    "start:win32": "yarn build && web-ext run --firefox=\"c:/Program Files/Firefox Developer Edition/firefox.exe\" --start-url localhost:3000",
-    "start:darwin:linux": "yarn build && web-ext run --firefox=firefox-developer --start-url localhost:3000",
-    "start:chrome": "yarn build && cd distribution && web-ext run -t chromium --start-url localhost:3000",
+    "start:win32": "yarn build-dev && web-ext run --firefox=\"c:/Program Files/Firefox Developer Edition/firefox.exe\" --start-url localhost:3000",
+    "start:darwin:linux": "yarn build-dev && web-ext run --firefox=firefox-developer --start-url localhost:3000",
+    "start:chrome": "yarn build-dev && cd distribution && web-ext run -t chromium --start-url localhost:3000",
     "build": "yarn webpack",
     "build-dev": "yarn webpack --mode=development",
     "watch": "yarn build --watch",

diff --git a/src/utils.js b/src/utils.js
@@ -22,6 +22,7 @@ let keyValueDictionary = {
   [abbreviationsKeyVal]: {},
   [locationsKeyVal]: {},
 };
+const nbsp = '&nbsp;';
 
 export function capitaliseText(
   element,
@@ -221,9 +222,30 @@ export function getText(htmlControl, tagName) {
     return htmlControl.value ? htmlControl.value : '';
   }
 
+  if (htmlControl.innerHTML && tagName.toUpperCase() === 'SPAN') {
+    return getTextForSpanTag(htmlControl.innerHTML);
+  }
+
   return htmlControl.innerHTML ? htmlControl.innerHTML : '';
 }
 
+export function getTextForSpanTag(text) {
+  if (text && getNbspCount(text) === 1) {
+    let result= replaceLastOccurrenceInString(text, nbsp, ' ');
+    return result;
+  }
+
+  return text;
+}
+
+export function replaceLastOccurrenceInString(originalText,textToMatch, replacement) {
+  return originalText.replace(new RegExp(textToMatch + '$'), replacement);
+}
+
+export function getNbspCount(text) {
+  return (text.match(new RegExp(nbsp, 'g')) || []).length;
+}
+
 export function setText(htmlControl, tagName, updatedStr, shouldAppendBr) {
   if (
     tagName.toUpperCase() === 'INPUT' ||
@@ -233,6 +255,10 @@ export function setText(htmlControl, tagName, updatedStr, shouldAppendBr) {
     return;
   }
 
+  if (tagName.toUpperCase() === 'SPAN') {
+    updatedStr = replaceLastOccurrenceInString(updatedStr, ' ', nbsp);
+  }
+
   if (shouldAppendBr) {
     updatedStr += '<br>';
   }

diff --git a/test/util.test.js b/test/util.test.js
@@ -27,6 +27,14 @@ describe('utilities test', function () {
     }).toThrow();
   });
 
+  test('getCapitalisedContentForI', () => {
+    expect(utils.getCapitalisedContentForI('i ')).toBe('I ');
+    expect(utils.getCapitalisedContentForI('i\'')).toBe('I\'');
+    expect(utils.getCapitalisedContentForI('Hi this is i ')).toBe(
+      'Hi this is I '
+    );
+  });
+
   test('shouldCapitaliseForI', () => {
     expect(utils.shouldCapitaliseForI('war i ')).toBe(true);
     expect(utils.shouldCapitaliseForI(' i ')).toBe(true);
@@ -97,7 +105,7 @@ describe('utilities test', function () {
       '<div>' +
       '  <input type="text" id="username" value="Bingo" />' +
       '  <textarea id="about-me" rows="8" cols="40"></textarea> ' +
-      '  <span id="address">Please enter your address.</span> ' +
+      '  <span id="address">Please enter your address&nbsp;</span> ' +
       '  <button id="button" />' +
       '</div>';
   }
@@ -131,16 +139,66 @@ describe('utilities test', function () {
       setInnerHtml();
       const element = $('#address');
       expect(utils.getText(element[0], 'span')).toBe(
-        'Please enter your address.'
+        'Please enter your address '
       );
       expect(utils.getText(element[0], 'input')).toBe('');
-      expect(utils.getText(element[0], '')).toBe('Please enter your address.');
+      expect(utils.getText(element[0], '')).toBe(
+        'Please enter your address&nbsp;'
+      );
       expect(() => {
         utils.getText(element);
       }).toThrow();
     });
   });
 
+  describe('getNbspCount', () => {
+    test('getNbspCount', () => {
+      expect(utils.getNbspCount('test&nbsp;')).toBe(1);
+      expect(utils.getNbspCount('test&nbsp;&nbsp;')).toBe(2);
+      expect(utils.getNbspCount('test')).toBe(0);
+    });
+  });
+
+  describe('replaceLastOccurrenceInString', () => {
+    test('replaceLastOccurrenceInString_ReplacesText', () => {
+      expect(
+        utils.replaceLastOccurrenceInString('test&nbsp;&nbsp;', '&nbsp;', 'me')
+      ).toBe('test&nbsp;me');
+      expect(
+        utils.replaceLastOccurrenceInString(
+          'test&nbsp;&nbsp;&nbsp;',
+          '&nbsp;',
+          'me'
+        )
+      ).toBe('test&nbsp;&nbsp;me');
+      expect(
+        utils.replaceLastOccurrenceInString('test this this', 'this', 'and')
+      ).toBe('test this and');
+    });
+
+    test('replaceLastOccurrenceInString_DoesNotReplaceText', () => {
+      expect(
+        utils.replaceLastOccurrenceInString('test me', 'bro', 'this')
+      ).toBe('test me');
+      expect(
+        utils.replaceLastOccurrenceInString('test me ', 'me', 'this')
+      ).toBe('test me ');
+    });
+  });
+
+  describe('getTextForSpanTag', () => {
+    test('getTextForSpanTag_ReplacesTagForSingleOccurrence', () => {
+      expect(utils.getTextForSpanTag('test&nbsp;')).toBe('test ');
+    });
+
+    test('getTextForSpanTag_DoesNotReplaceTagForMultipleOccurrences', () => {
+      expect(utils.getTextForSpanTag('test&nbsp;&nbsp;')).toBe(
+        'test&nbsp;&nbsp;'
+      );
+      expect(utils.getTextForSpanTag('test')).toBe('test');
+    });
+  });
+
   describe('setText', () => {
     function resetHtml() {
       document.body.innerHTML =
@@ -178,6 +236,32 @@ describe('utilities test', function () {
       }).toThrow();
     });
 
+    test('setText_SpanTagWithNbsp', () => {
+      const updatedStr = 'testing this ';
+
+      resetHtml();
+      let element = $('#address');
+
+      utils.setText(element[0], 'span', updatedStr, false);
+      expect(element.html()).toBe('testing this&nbsp;');
+
+      resetHtml();
+      element = $('#address');
+      utils.setText(element[0], 'p', '', false);
+      expect(element.html()).toBe('');
+
+      resetHtml();
+      element = $('#address');
+      utils.setText(element[0], 'span', '', false);
+      expect(element.html()).toBe('');
+
+      expect(() => {
+        resetHtml();
+        element = $('#address');
+        utils.setText(element[0]);
+      }).toThrow();
+    });
+
     test('setText_TextareaTag', () => {
       const updatedStr = 'This is my life.';
 
@@ -216,6 +300,11 @@ describe('utilities test', function () {
       utils.setText(element[0], 'p', updatedStr, false);
       expect(element.html()).toBe('This is my life.');
 
+      resetHtml();
+      element = $('#address');
+      utils.setText(element[0], 'p', 'test space ', false);
+      expect(element.html()).toBe('test space ');
+
       resetHtml();
       element = $('#address');
       utils.setText(element[0], 'span', '', false);

diff --git a/zip_everything.sh b/zip_everything.sh
diff --git a/zip_files.sh b/zip_files.sh