updated to use squire 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,8 +14,24 @@ 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(
@@ -28,7 +44,7 @@ export class ComposeInputModule extends ViewModule<ComposeView> {
     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 +54,12 @@ export class ComposeInputModule extends ViewModule<ComposeView> {
   };
 
   public addRichTextFormatting = () => {
-    this.squire.setConfig({ addLinks: true });
+    this.initSquire(true, this.squire.getHTML());
   };
 
   public removeRichTextFormatting = () => {
-    this.squire.setHTML(Xss.htmlSanitizeAndStripAllTags(this.squire.getHTML(), '<br>'));
-    this.squire.setConfig({ addLinks: false });
+    const html = Xss.htmlSanitizeAndStripAllTags(this.squire.getHTML(), '<br>');
+    this.initSquire(false, html);
   };
 
   public inputTextHtmlSetSafely = (html: string) => {
@@ -92,13 +108,19 @@ export class ComposeInputModule extends ViewModule<ComposeView> {
     return isInputLimitExceeded;
   };
 
+  private initSquire = (addLinks: boolean, html = '') => {
+    const el = this.view.S.cached('input_text').get(0) as HTMLElement;
+    this.squire = new window.Squire(el, { addLinks });
+    this.squire.setHTML(html);
+  };
+
   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 +143,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);
@@ -164,7 +186,7 @@ export class ComposeInputModule extends ViewModule<ComposeView> {
       const isMac = /Mac OS X/.test(navigator.userAgent);
       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,30 +203,52 @@ 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();
       };
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
       this.squire.setKeyHandler(ctrlKey + 'b', mapKeyToFormat('B'));
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
       this.squire.setKeyHandler(ctrlKey + 'u', mapKeyToFormat('U'));
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
       this.squire.setKeyHandler(ctrlKey + 'i', mapKeyToFormat('I'));
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
       this.squire.setKeyHandler(ctrlKey + '\\', removeFormatting);
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
       this.squire.setKeyHandler(ctrlKey + 'shift-7', noop); // default is 'S'
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
       this.squire.setKeyHandler(ctrlKey + 'shift-5', noop); // default is 'SUB', { tag: 'SUP' }
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
       this.squire.setKeyHandler(ctrlKey + 'shift-6', noop); // default is 'SUP', { tag: 'SUB' }
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
       this.squire.setKeyHandler(ctrlKey + 'shift-8', noop); // default is 'makeUnorderedList'
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
       this.squire.setKeyHandler(ctrlKey + 'shift-9', noop); // default is 'makeOrderedList'
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
       this.squire.setKeyHandler(ctrlKey + '[', noop); // default is 'decreaseQuoteLevel'
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
       this.squire.setKeyHandler(ctrlKey + ']', noop); // default is 'increaseQuot
     } catch (e) {
       Catch.reportErr(e);
     }
   };
 
   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>

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

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"],