build(deps): bump squire-rte from 1.11.3 to 2.2.2

conf/tsconfig.content_scripts.json

@@ -18,7 +18,8 @@
     "paths": {
       "dompurify": ["types/purify.d.ts"],
       "openpgp": ["../node_modules/openpgp/openpgp.d.ts"],
-      "@openpgp/web-stream-tools": ["../node_modules/@openpgp/web-stream-tools/types/index.v4.9.d.ts"]
+      "@openpgp/web-stream-tools": ["../node_modules/@openpgp/web-stream-tools/types/index.v4.9.d.ts"],
+      "squire-rte": ["../node_modules/squire-rte/dist/types/Squire.d.ts"]
     },
     "typeRoots": ["../extension/types", "../extension/js/common/core/types"]
   },

extension/chrome/dev/ci_unit_test.htm

@@ -14,7 +14,7 @@ <h1 id="h1">loading..</h1>
     <script src="/lib/openpgp.js"></script>
     <script src="/lib/jquery.min.js"></script>
     <script src="/lib/sweetalert2.js"></script>
-    <script src="/lib/squire-raw.js"></script>
+    <script src="/lib/squire.js"></script>
     <script src="/lib/emailjs/punycode.js"></script>
     <script src="/lib/emailjs/emailjs-stringencoding.js"></script>
     <script src="/lib/emailjs/emailjs-mime-codec.js"></script>

extension/chrome/elements/compose-modules/compose-input-module.ts

@@ -3,7 +3,7 @@
 'use strict';
 
 import { NewMsgData, ValidRecipientElement } from './compose-types.js';
-import { CursorEvent, SquireEditor, WillPasteEvent } from '../../../types/squire.js';
+import Squire from 'squire-rte';
 
 import { Catch } from '../../../js/common/platform/catch.js';
 import { ParsedRecipients } from '../../../js/common/api/email-provider/email-provider-api.js';
@@ -14,21 +14,31 @@ import { Ui } from '../../../js/common/browser/ui.js';
 import { ComposeView } from '../compose.js';
 import { Lang } from '../../../js/common/lang.js';
 
+declare global {
+  interface Window {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    Squire: typeof Squire;
+  }
+}
+
+interface SquireWillPasteEvent extends Event {
+  fragment: DocumentFragment;
+}
+
 export class ComposeInputModule extends ViewModule<ComposeView> {
-  public squire = new window.Squire(this.view.S.cached('input_text').get(0) as HTMLElement);
+  public squire!: Squire;
+
+  public constructor(view: ComposeView) {
+    super(view);
+    this.initSquire(false);
+  }
 
   public setHandlers = () => {
     this.view.S.cached('add_intro').on(
       'click',
       this.view.setHandler(el => this.actionAddIntroHandler(el), this.view.errModule.handle(`add intro`))
     );
-    this.handlePaste();
-    this.handlePasteImages();
-    this.initShortcuts();
-    this.resizeReplyBox();
-    this.scrollIntoView();
-    this.handleRTL();
-    this.squire.setConfig({ addLinks: this.isRichText() });
+    this.initSquire(this.isRichText());
     // Set lastDraftBody to current empty squire content ex: <div><br></div>)
     // https://github.com/FlowCrypt/flowcrypt-browser/issues/5184
     this.view.draftModule.setLastDraftBody(this.squire.getHTML());
@@ -38,12 +48,11 @@ export class ComposeInputModule extends ViewModule<ComposeView> {
   };
 
   public addRichTextFormatting = () => {
-    this.squire.setConfig({ addLinks: true });
+    this.initSquire(true);
   };
 
   public removeRichTextFormatting = () => {
-    this.squire.setHTML(Xss.htmlSanitizeAndStripAllTags(this.squire.getHTML(), '<br>'));
-    this.squire.setConfig({ addLinks: false });
+    this.initSquire(false, true);
   };
 
   public inputTextHtmlSetSafely = (html: string) => {
@@ -92,13 +101,30 @@ export class ComposeInputModule extends ViewModule<ComposeView> {
     return isInputLimitExceeded;
   };
 
+  private initSquire = (addLinks: boolean, removeExistingLinks = false) => {
+    const squireHtml = this.squire?.getHTML();
+    const el = this.view.S.cached('input_text').get(0) as HTMLElement;
+    this.squire?.destroy();
+    this.squire = new window.Squire(el, { addLinks });
+    this.initShortcuts();
+    this.handlePaste();
+    this.handlePasteImages();
+    this.resizeReplyBox();
+    this.scrollIntoView();
+    this.handleRTL();
+    if (squireHtml) {
+      const processedHtml = removeExistingLinks ? Xss.htmlSanitizeAndStripAllTags(squireHtml, '<br>', false) : squireHtml;
+      this.squire.setHTML(processedHtml);
+    }
+  };
+
   private handlePaste = () => {
-    this.squire.addEventListener('willPaste', async (e: WillPasteEvent) => {
+    this.squire.addEventListener('willPaste', async (e: SquireWillPasteEvent) => {
       const div = document.createElement('div');
       div.appendChild(e.fragment);
       const html = div.innerHTML;
       const sanitized = this.isRichText() ? Xss.htmlSanitizeKeepBasicTags(html, 'IMG-KEEP') : Xss.htmlSanitizeAndStripAllTags(html, '<br>', false);
-      if (this.willInputLimitBeExceeded(sanitized, this.squire.getRoot(), () => this.squire.getSelectedText().length)) {
+      if (this.willInputLimitBeExceeded(sanitized, this.squire.getRoot(), () => this.squire.getSelectedText().length as number)) {
         e.preventDefault();
         await Ui.modal.warning(Lang.compose.inputLimitExceededOnPaste);
         return;
@@ -121,7 +147,7 @@ export class ComposeInputModule extends ViewModule<ComposeView> {
         const reader = new FileReader();
         reader.onload = () => {
           try {
-            this.squire.insertImage(reader.result as ArrayBuffer, { name: file.name, title: file.name });
+            this.squire.insertImage(reader.result?.toString() ?? '', { name: file.name, title: file.name });
             this.view.draftModule.draftSave().catch(Catch.reportErr);
           } catch (e) {
             Catch.reportErr(e);
@@ -162,9 +188,9 @@ export class ComposeInputModule extends ViewModule<ComposeView> {
   private initShortcuts = () => {
     try {
       const isMac = /Mac OS X/.test(navigator.userAgent);
-      const ctrlKey = isMac ? 'meta-' : 'ctrl-';
+      const ctrlKey = isMac ? 'Meta-' : 'Ctrl-';
       const mapKeyToFormat = (tag: string) => {
-        return (self: SquireEditor, event: Event) => {
+        return (self: Squire, event: Event) => {
           try {
             event.preventDefault();
             if (!this.isRichText()) {
@@ -181,10 +207,10 @@ export class ComposeInputModule extends ViewModule<ComposeView> {
           }
         };
       };
-      const noop = (self: SquireEditor, event: Event) => {
+      const noop = (_self: Squire, event: Event) => {
         event.preventDefault();
       };
-      const removeFormatting = (self: SquireEditor) => {
+      const removeFormatting = (self: Squire) => {
         self.removeAllFormatting();
       };
       this.squire.setKeyHandler(ctrlKey + 'b', mapKeyToFormat('B'));
@@ -204,7 +230,7 @@ export class ComposeInputModule extends ViewModule<ComposeView> {
   };
 
   private resizeReplyBox = () => {
-    this.squire.addEventListener('cursor', (e: CursorEvent) => {
+    this.squire.addEventListener('cursor', (e: Event & { range: Range }) => {
       if (this.view.isReplyBox) {
         const cursorContainer = e.range.commonAncestorContainer as HTMLElement;
         this.view.sizeModule.resizeComposeBox(0, cursorContainer?.offsetTop);

extension/chrome/elements/compose.htm

@@ -232,7 +232,7 @@ <h1 id="header_title" data-test="header-title">New Secure Message</h1>
     <script src="/lib/openpgp.js"></script>
     <script src="/lib/jquery.min.js"></script>
     <script src="/lib/sweetalert2.js"></script>
-    <script src="/lib/squire-raw.js"></script>
+    <script src="/lib/squire.js"></script>
     <script src="/lib/emailjs/punycode.js"></script>
     <script src="/lib/emailjs/emailjs-stringencoding.js"></script>
     <script src="/lib/emailjs/emailjs-mime-codec.js"></script>

package.json

@@ -54,7 +54,7 @@
     "linkifyjs": "^4.1.1",
     "node-forge": "1.3.1",
     "postcss-html": "^1.5.0",
-    "squire-rte": "1.11.3",
+    "squire-rte": "2.2.4",
     "sweetalert2": "11.7.31",
     "tap-xunit": "^2.4.1",
     "zxcvbn": "4.4.2"

scripts/build.sh

@@ -46,7 +46,7 @@ copy_dependencies() {
   cp node_modules/sweetalert2/dist/sweetalert2.css $OUTPUT_DIRECTORY/css/sweetalert2.css
   cp node_modules/iso-8859-2/iso-8859-2.js $OUTPUT_DIRECTORY/lib/iso-8859-2.js
   cp node_modules/zxcvbn/dist/zxcvbn.js $OUTPUT_DIRECTORY/lib/zxcvbn.js
-  cp node_modules/squire-rte/build/squire-raw.js $OUTPUT_DIRECTORY/lib/squire-raw.js
+  cp node_modules/squire-rte/dist/squire.js $OUTPUT_DIRECTORY/lib/squire.js
   cp node_modules/clipboard/dist/clipboard.js $OUTPUT_DIRECTORY/lib/clipboard.js
   cp node_modules/@flowcrypt/fine-uploader/fine-uploader/fine-uploader.js $OUTPUT_DIRECTORY/lib/fine-uploader.js
   cp node_modules/filesize/dist/filesize.js $OUTPUT_DIRECTORY/lib/filesize.js

test/source/tests/compose.ts

@@ -1639,7 +1639,7 @@ export const defineComposeTests = (testVariant: TestVariant, testWithBrowser: Te
         expect(await composePage.read('.swal2-html-container')).to.include('Send empty message?');
         await composePage.waitAndClick('.swal2-cancel');
         const footer = await composePage.read('@input-body');
-        expect(footer).to.eq('\n\n\n--\nflowcrypt.compatibility test footer with an img\nand second line');
+        expect(footer).to.eq('\n\n\n\n--\n\nflowcrypt.compatibility test footer with an img\n\nand second line\n');
         await composePage.waitAndClick(`@action-send`);
         expect(await composePage.read('.swal2-html-container')).to.include('Send empty message?');
         await composePage.waitAndClick('.swal2-cancel');

test/source/tests/page-recipe/compose-page-recipe.ts

@@ -203,7 +203,7 @@ export class ComposePageRecipe extends PageRecipe {
     if (inputMethod === 'mouse') {
       await passPhraseFrame.waitAndClick('@action-cancel-pass-phrase-entry');
     } else if (inputMethod === 'keyboard') {
-      await page.press('Escape');
+      await passPhraseFrame.keyboard().press('Escape');
     }
     await page.waitTillGone('@dialog-passphrase');
     expect(passPhraseFrame.frame.isDetached()).to.equal(true);

tsconfig.json

@@ -21,6 +21,7 @@
       "jquery": ["lib/jquery.min.js", "COMMENT"],
       "sweetalert2": ["lib/sweetalert2.js", "COMMENT"],
       "openpgp": ["../node_modules/openpgp/openpgp.d.js", "lib/openpgp.js", "COMMENT"],
+      "squire-rte": ["../node_modules/squire-rte/dist/types/Squire.d.ts"],
       "@openpgp/web-stream-tools": ["../node_modules/@openpgp/web-stream-tools/types/index.v4.9.d.ts", "lib/streams/streams.js"],
       "dompurify": ["types/purify.d.ts", "lib/purify.js", "COMMENT"],
       "fine-uploader": ["lib/fine-uploader.js", "COMMENT"],