Revert "build(deps): bump squire-rte from 1.11.3 to 2.2.2 (#5442)"

This reverts commit d8b4dc6.

conf/tsconfig.content_scripts.json

@@ -18,8 +18,7 @@
     "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"],
-      "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"]
     },
     "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.js"></script>
+    <script src="/lib/squire-raw.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 Squire from 'squire-rte';
+import { CursorEvent, SquireEditor, WillPasteEvent } from '../../../types/squire.js';
 
 import { Catch } from '../../../js/common/platform/catch.js';
 import { ParsedRecipients } from '../../../js/common/api/email-provider/email-provider-api.js';
@@ -14,31 +14,21 @@ 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!: Squire;
-
-  public constructor(view: ComposeView) {
-    super(view);
-    this.initSquire(false);
-  }
+  public squire = new window.Squire(this.view.S.cached('input_text').get(0) as HTMLElement);
 
   public setHandlers = () => {
     this.view.S.cached('add_intro').on(
       'click',
       this.view.setHandler(el => this.actionAddIntroHandler(el), this.view.errModule.handle(`add intro`))
     );
-    this.initSquire(this.isRichText());
+    this.handlePaste();
+    this.handlePasteImages();
+    this.initShortcuts();
+    this.resizeReplyBox();
+    this.scrollIntoView();
+    this.handleRTL();
+    this.squire.setConfig({ addLinks: 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());
@@ -48,11 +38,12 @@ export class ComposeInputModule extends ViewModule<ComposeView> {
   };
 
   public addRichTextFormatting = () => {
-    this.initSquire(true);
+    this.squire.setConfig({ addLinks: true });
   };
 
   public removeRichTextFormatting = () => {
-    this.initSquire(false, true);
+    this.squire.setHTML(Xss.htmlSanitizeAndStripAllTags(this.squire.getHTML(), '<br>'));
+    this.squire.setConfig({ addLinks: false });
   };
 
   public inputTextHtmlSetSafely = (html: string) => {
@@ -101,30 +92,13 @@ 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: SquireWillPasteEvent) => {
+    this.squire.addEventListener('willPaste', async (e: WillPasteEvent) => {
       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 as number)) {
+      if (this.willInputLimitBeExceeded(sanitized, this.squire.getRoot(), () => this.squire.getSelectedText().length)) {
         e.preventDefault();
         await Ui.modal.warning(Lang.compose.inputLimitExceededOnPaste);
         return;
@@ -147,7 +121,7 @@ export class ComposeInputModule extends ViewModule<ComposeView> {
         const reader = new FileReader();
         reader.onload = () => {
           try {
-            this.squire.insertImage(reader.result?.toString() ?? '', { name: file.name, title: file.name });
+            this.squire.insertImage(reader.result as ArrayBuffer, { name: file.name, title: file.name });
             this.view.draftModule.draftSave().catch(Catch.reportErr);
           } catch (e) {
             Catch.reportErr(e);
@@ -188,9 +162,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: Squire, event: Event) => {
+        return (self: SquireEditor, event: Event) => {
           try {
             event.preventDefault();
             if (!this.isRichText()) {
@@ -207,10 +181,10 @@ export class ComposeInputModule extends ViewModule<ComposeView> {
           }
         };
       };
-      const noop = (_self: Squire, event: Event) => {
+      const noop = (self: SquireEditor, event: Event) => {
         event.preventDefault();
       };
-      const removeFormatting = (self: Squire) => {
+      const removeFormatting = (self: SquireEditor) => {
         self.removeAllFormatting();
       };
       this.squire.setKeyHandler(ctrlKey + 'b', mapKeyToFormat('B'));
@@ -230,7 +204,7 @@ export class ComposeInputModule extends ViewModule<ComposeView> {
   };
 
   private resizeReplyBox = () => {
-    this.squire.addEventListener('cursor', (e: Event & { range: Range }) => {
+    this.squire.addEventListener('cursor', (e: CursorEvent) => {
       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.js"></script>
+    <script src="/lib/squire-raw.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/types/squire.d.ts

@@ -0,0 +1,83 @@
+export as namespace SquireClass;
+
+declare global {
+  interface Window {
+    // @ts-ignore
+    Squire: SquireClass;
+  }
+}
+
+declare interface SquireClass {
+  new(obj: HTMLElement): SquireEditor;
+}
+
+declare interface FontInfo {
+  family: string;
+  size: string;
+  color: string;
+  backgroundColor: string;
+}
+
+declare type SquireEvent = 'focus' | 'blur' | 'keydown' | 'keypress' | 'keyup' | 'input' | 'pathChange' | 'select' | 'cursor' | 'undoStateChange' | 'willPaste' | 'drop' | 'dragover';
+
+export declare class SquireEditor {
+  addEventListener(event: SquireEvent, callback: (e: any) => void): SquireEditor;
+  removeEventListener(event: SquireEvent, callback: (e: any) => void): SquireEditor;
+  setKeyHandler(key: string, handler: (self: SquireEditor, event: Event) => void): SquireEditor;
+  focus(): SquireEditor;
+  blur(): SquireEditor;
+  getDocument(): Document;
+  getHTML(): string;
+  setHTML(html: string): SquireEditor;
+  getSelectedText(): string;
+  insertImage(image: ArrayBuffer | string, imageAttributes: any): HTMLElement;
+  insertHTML(html: string): SquireEditor;
+  getPath(): string;
+  getFontInfo(): FontInfo;
+  createRange(startContainer: HTMLElement, startOffset: number, endContainer?: HTMLElement, endOffset?: number): Range;
+  getCursorPosition(): DOMRect;
+  getSelection(): Range;
+  setSelection(range: Range): SquireEditor;
+  moveCursorToStart(): SquireEditor;
+  moveCursorToEnd(): SquireEditor;
+  saveUndoState(): SquireEditor;
+  undo(): SquireEditor;
+  redo(): SquireEditor;
+  hasFormat(tag: string, attributes?: any): boolean;
+  bold(): SquireEditor;
+  italic(): SquireEditor;
+  underline(): SquireEditor;
+  removeBold(): SquireEditor;
+  removeItalic(): SquireEditor;
+  removeUnderline(): SquireEditor;
+  makeLink(url: string, attributes: any): SquireEditor;
+  removeLink(): SquireEditor;
+  setFontFace(font: string): SquireEditor;
+  setFontSize(size: string): SquireEditor;
+  setTextColour(colour: string): SquireEditor;
+  setHighlightColour(colour: string): SquireEditor;
+  setTextAlignment(alignment: string): SquireEditor;
+  setTextDirection(direction: string): SquireEditor;
+  increaseQuoteLevel(): SquireEditor;
+  decreaseQuoteLevel(): SquireEditor;
+  makeUnorderedList(): SquireEditor;
+  makeOrderedList(): SquireEditor;
+  removeList(): SquireEditor;
+  increaseListLevel(): SquireEditor;
+  decreaseListLevel(): SquireEditor;
+  code(): SquireEditor;
+  removeCode(): SquireEditor;
+  toggleCode(): SquireEditor;
+  removeAllFormatting(): void;
+  changeFormat(formattingToAdd: any, formattingToRemove: any, range: Range): void;
+  setConfig(config: any): SquireEditor;
+  getRoot(): HTMLElement;
+}
+
+export declare class WillPasteEvent extends ClipboardEvent {
+  fragment: DocumentFragment;
+  text: string;
+}
+export declare class CursorEvent {
+  range: Range;
+}

package.json

@@ -54,7 +54,7 @@
     "linkifyjs": "^4.1.1",
     "node-forge": "1.3.1",
     "postcss-html": "^1.5.0",
-    "squire-rte": "2.2.4",
+    "squire-rte": "1.11.3",
     "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/dist/squire.js $OUTPUT_DIRECTORY/lib/squire.js
+  cp node_modules/squire-rte/build/squire-raw.js $OUTPUT_DIRECTORY/lib/squire-raw.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\n--\n\nflowcrypt.compatibility test footer with an img\n\nand second line\n');
+        expect(footer).to.eq('\n\n\n--\nflowcrypt.compatibility test footer with an img\nand second line');
         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 passPhraseFrame.keyboard().press('Escape');
+      await page.press('Escape');
     }
     await page.waitTillGone('@dialog-passphrase');
     expect(passPhraseFrame.frame.isDetached()).to.equal(true);

tsconfig.json

@@ -21,7 +21,6 @@
       "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"],