chore(deps-dev): bump prettier from 2.1.2 to 2.8.8 (#5372)

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Tom Moor <tom.moor@gmail.com>

shared/editor/commands/codeFence.ts

@@ -96,9 +96,8 @@ export const newlineInCode = (state: EditorState, dispatch: Dispatch) => {
 
   if (text) {
     const splitByNewLine = text.split("\n");
-    const numOfSpaces = splitByNewLine[splitByNewLine.length - 1].search(
-      /\S|$/
-    );
+    const numOfSpaces =
+      splitByNewLine[splitByNewLine.length - 1].search(/\S|$/);
     newText += " ".repeat(numOfSpaces);
   }
 

shared/editor/components/Image.tsx

@@ -100,18 +100,18 @@ const Image = (
     document.removeEventListener("mousemove", handlePointerMove);
   };
 
-  const handlePointerDown = (dragging: "left" | "right") => (
-    event: React.PointerEvent<HTMLDivElement>
-  ) => {
-    event.preventDefault();
-    event.stopPropagation();
-    setSizeAtDragStart({
-      width: constrainWidth(size.width),
-      height: size.height,
-    });
-    setOffset(event.pageX);
-    setDragging(dragging);
-  };
+  const handlePointerDown =
+    (dragging: "left" | "right") =>
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
+      setSizeAtDragStart({
+        width: constrainWidth(size.width),
+        height: size.height,
+      });
+      setOffset(event.pageX);
+      setDragging(dragging);
+    };
 
   const handleKeyDown = (event: KeyboardEvent) => {
     if (event.key === "Escape") {
@@ -170,11 +170,14 @@ const Image = (
         onClick={dragging ? undefined : props.onClick}
         style={widthStyle}
       >
-        {!dragging && size.width > 60 && size.height > 60 && props.onDownload && (
-          <Button onClick={props.onDownload}>
-            <DownloadIcon />
-          </Button>
-        )}
+        {!dragging &&
+          size.width > 60 &&
+          size.height > 60 &&
+          props.onDownload && (
+            <Button onClick={props.onDownload}>
+              <DownloadIcon />
+            </Button>
+          )}
         <ImageZoom zoomMargin={24}>
           <img
             style={{

shared/editor/components/useComponentSize.ts

@@ -1,8 +1,9 @@
 import { useState, useEffect } from "react";
 
-export default function useComponentSize(
-  ref: React.RefObject<HTMLElement>
-): { width: number; height: number } {
+export default function useComponentSize(ref: React.RefObject<HTMLElement>): {
+  width: number;
+  height: number;
+} {
   const [size, setSize] = useState({
     width: ref.current?.clientWidth || 0,
     height: ref.current?.clientHeight || 0,

shared/editor/embeds/Bilibili.tsx

@@ -2,7 +2,8 @@ import * as React from "react";
 import Frame from "../components/Frame";
 import { EmbedProps as Props } from ".";
 
-const URL_REGEX = /(?:https?:\/\/)?(www\.bilibili\.com)\/video\/([\w\d]+)?(\?\S+)?/i;
+const URL_REGEX =
+  /(?:https?:\/\/)?(www\.bilibili\.com)\/video\/([\w\d]+)?(\?\S+)?/i;
 
 export default function Bilibili(props: Props) {
   const { matches } = props.attrs;

shared/editor/embeds/InVision.tsx

@@ -3,8 +3,10 @@ import Frame from "../components/Frame";
 import ImageZoom from "../components/ImageZoom";
 import { EmbedProps as Props } from ".";
 
-const IFRAME_REGEX = /^https:\/\/(invis\.io\/.*)|(projects\.invisionapp\.com\/share\/.*)$/;
-const IMAGE_REGEX = /^https:\/\/(opal\.invisionapp\.com\/static-signed\/live-embed\/.*)$/;
+const IFRAME_REGEX =
+  /^https:\/\/(invis\.io\/.*)|(projects\.invisionapp\.com\/share\/.*)$/;
+const IMAGE_REGEX =
+  /^https:\/\/(opal\.invisionapp\.com\/static-signed\/live-embed\/.*)$/;
 
 function InVision(props: Props) {
   if (IMAGE_REGEX.test(props.attrs.href)) {

shared/editor/extensions/Mermaid.ts

@@ -164,9 +164,8 @@ export default function Mermaid({
         }
 
         if (diagramToggled) {
-          pluginState.diagramVisibility[
-            mermaidMeta.toggleDiagram
-          ] = !pluginState.diagramVisibility[mermaidMeta.toggleDiagram];
+          pluginState.diagramVisibility[mermaidMeta.toggleDiagram] =
+            !pluginState.diagramVisibility[mermaidMeta.toggleDiagram];
         }
 
         if (

shared/editor/nodes/Embed.tsx

@@ -114,15 +114,13 @@ export default class Embed extends Node {
   }
 
   commands({ type }: { type: NodeType }) {
-    return (attrs: Record<string, any>) => (
-      state: EditorState,
-      dispatch: Dispatch
-    ) => {
-      dispatch(
-        state.tr.replaceSelectionWith(type.create(attrs)).scrollIntoView()
-      );
-      return true;
-    };
+    return (attrs: Record<string, any>) =>
+      (state: EditorState, dispatch: Dispatch) => {
+        dispatch(
+          state.tr.replaceSelectionWith(type.create(attrs)).scrollIntoView()
+        );
+        return true;
+      };
   }
 
   toMarkdown(state: MarkdownSerializerState, node: ProsemirrorNode) {

shared/editor/nodes/Emoji.tsx

@@ -22,7 +22,8 @@ export default class Emoji extends Suggestion {
     return {
       type: SuggestionsMenuType.Emoji,
       openRegex: /(?:^|\s):([0-9a-zA-Z_+-]+)?$/,
-      closeRegex: /(?:^|\s):(([0-9a-zA-Z_+-]*\s+)|(\s+[0-9a-zA-Z_+-]+)|[^0-9a-zA-Z_+-]+)$/,
+      closeRegex:
+        /(?:^|\s):(([0-9a-zA-Z_+-]*\s+)|(\s+[0-9a-zA-Z_+-]+)|[^0-9a-zA-Z_+-]+)$/,
       enabledInTable: true,
     };
   }
@@ -77,24 +78,22 @@ export default class Emoji extends Suggestion {
   }
 
   commands({ type }: { type: NodeType; schema: Schema }) {
-    return (attrs: Record<string, string>) => (
-      state: EditorState,
-      dispatch: Dispatch
-    ) => {
-      const { selection } = state;
-      const position =
-        selection instanceof TextSelection
-          ? selection.$cursor?.pos
-          : selection.$to.pos;
-      if (position === undefined) {
-        return false;
-      }
+    return (attrs: Record<string, string>) =>
+      (state: EditorState, dispatch: Dispatch) => {
+        const { selection } = state;
+        const position =
+          selection instanceof TextSelection
+            ? selection.$cursor?.pos
+            : selection.$to.pos;
+        if (position === undefined) {
+          return false;
+        }
 
-      const node = type.create(attrs);
-      const transaction = state.tr.insert(position, node);
-      dispatch(transaction);
-      return true;
-    };
+        const node = type.create(attrs);
+        const transaction = state.tr.insert(position, node);
+        dispatch(transaction);
+        return true;
+      };
   }
 
   toMarkdown(state: MarkdownSerializerState, node: ProsemirrorNode) {

shared/editor/nodes/HorizontalRule.ts

@@ -28,15 +28,13 @@ export default class HorizontalRule extends Node {
   }
 
   commands({ type }: { type: NodeType }) {
-    return (attrs: Record<string, any>) => (
-      state: EditorState,
-      dispatch: Dispatch
-    ) => {
-      dispatch(
-        state.tr.replaceSelectionWith(type.create(attrs)).scrollIntoView()
-      );
-      return true;
-    };
+    return (attrs: Record<string, any>) =>
+      (state: EditorState, dispatch: Dispatch) => {
+        dispatch(
+          state.tr.replaceSelectionWith(type.create(attrs)).scrollIntoView()
+        );
+        return true;
+      };
   }
 
   keys({ type }: { type: NodeType }) {

shared/editor/nodes/Image.tsx

@@ -189,35 +189,31 @@ export default class Image extends SimpleImage {
     ];
   }
 
-  handleChangeSize = ({
-    node,
-    getPos,
-  }: {
-    node: ProsemirrorNode;
-    getPos: () => number;
-  }) => ({ width, height }: { width: number; height?: number }) => {
-    const { view } = this.editor;
-    const { tr } = view.state;
+  handleChangeSize =
+    ({ node, getPos }: { node: ProsemirrorNode; getPos: () => number }) =>
+    ({ width, height }: { width: number; height?: number }) => {
+      const { view } = this.editor;
+      const { tr } = view.state;
 
-    const pos = getPos();
-    const transaction = tr
-      .setNodeMarkup(pos, undefined, {
-        ...node.attrs,
-        width,
-        height,
-      })
-      .setMeta("addToHistory", true);
-    const $pos = transaction.doc.resolve(getPos());
-    view.dispatch(transaction.setSelection(new NodeSelection($pos)));
-  };
+      const pos = getPos();
+      const transaction = tr
+        .setNodeMarkup(pos, undefined, {
+          ...node.attrs,
+          width,
+          height,
+        })
+        .setMeta("addToHistory", true);
+      const $pos = transaction.doc.resolve(getPos());
+      view.dispatch(transaction.setSelection(new NodeSelection($pos)));
+    };
 
-  handleDownload = ({ node }: { node: ProsemirrorNode }) => (
-    event: React.MouseEvent
-  ) => {
-    event.preventDefault();
-    event.stopPropagation();
-    downloadImageNode(node);
-  };
+  handleDownload =
+    ({ node }: { node: ProsemirrorNode }) =>
+    (event: React.MouseEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+      downloadImageNode(node);
+    };
 
   component = (props: ComponentProps) => (
     <ImageComponent
@@ -360,7 +356,8 @@ export default class Image extends SimpleImage {
      * ![](image.jpg "class") -> [, "", "image.jpg", "small"]
      * ![Lorem](image.jpg "class") -> [, "Lorem", "image.jpg", "small"]
      */
-    const IMAGE_INPUT_REGEX = /!\[(?<alt>[^\][]*?)]\((?<filename>[^\][]*?)(?=“|\))“?(?<layoutclass>[^\][”]+)?”?\)$/;
+    const IMAGE_INPUT_REGEX =
+      /!\[(?<alt>[^\][]*?)]\((?<filename>[^\][]*?)(?=“|\))“?(?<layoutclass>[^\][”]+)?”?\)$/;
 
     return [
       new InputRule(IMAGE_INPUT_REGEX, (state, match, start, end) => {

shared/editor/nodes/Mention.ts

@@ -80,24 +80,22 @@ export default class Mention extends Suggestion {
   }
 
   commands({ type }: { type: NodeType; schema: Schema }) {
-    return (attrs: Record<string, string>) => (
-      state: EditorState,
-      dispatch: Dispatch
-    ) => {
-      const { selection } = state;
-      const position =
-        selection instanceof TextSelection
-          ? selection.$cursor?.pos
-          : selection.$to.pos;
-      if (position === undefined) {
-        return false;
-      }
+    return (attrs: Record<string, string>) =>
+      (state: EditorState, dispatch: Dispatch) => {
+        const { selection } = state;
+        const position =
+          selection instanceof TextSelection
+            ? selection.$cursor?.pos
+            : selection.$to.pos;
+        if (position === undefined) {
+          return false;
+        }
 
-      const node = type.create(attrs);
-      const transaction = state.tr.insert(position, node);
-      dispatch(transaction);
-      return true;
-    };
+        const node = type.create(attrs);
+        const transaction = state.tr.insert(position, node);
+        dispatch(transaction);
+        return true;
+      };
   }
 
   toMarkdown(state: MarkdownSerializerState, node: ProsemirrorNode) {

shared/editor/nodes/SimpleImage.tsx

@@ -75,73 +75,65 @@ export default class SimpleImage extends Node {
     };
   }
 
-  handleKeyDown = ({
-    node,
-    getPos,
-  }: {
-    node: ProsemirrorNode;
-    getPos: () => number;
-  }) => (event: React.KeyboardEvent<HTMLSpanElement>) => {
-    // Pressing Enter in the caption field should move the cursor/selection
-    // below the image
-    if (event.key === "Enter") {
+  handleKeyDown =
+    ({ node, getPos }: { node: ProsemirrorNode; getPos: () => number }) =>
+    (event: React.KeyboardEvent<HTMLSpanElement>) => {
+      // Pressing Enter in the caption field should move the cursor/selection
+      // below the image
+      if (event.key === "Enter") {
+        event.preventDefault();
+
+        const { view } = this.editor;
+        const $pos = view.state.doc.resolve(getPos() + node.nodeSize);
+        view.dispatch(
+          view.state.tr.setSelection(new TextSelection($pos)).split($pos.pos)
+        );
+        view.focus();
+        return;
+      }
+
+      // Pressing Backspace in an an empty caption field should remove the entire
+      // image, leaving an empty paragraph
+      if (event.key === "Backspace" && event.currentTarget.innerText === "") {
+        const { view } = this.editor;
+        const $pos = view.state.doc.resolve(getPos());
+        const tr = view.state.tr.setSelection(new NodeSelection($pos));
+        view.dispatch(tr.deleteSelection());
+        view.focus();
+        return;
+      }
+    };
+
+  handleBlur =
+    ({ node, getPos }: { node: ProsemirrorNode; getPos: () => number }) =>
+    (event: React.FocusEvent<HTMLSpanElement>) => {
+      const caption = event.currentTarget.innerText;
+      if (caption === node.attrs.alt) {
+        return;
+      }
+
+      const { view } = this.editor;
+      const { tr } = view.state;
+
+      // update meta on object
+      const pos = getPos();
+      const transaction = tr.setNodeMarkup(pos, undefined, {
+        ...node.attrs,
+        alt: caption,
+      });
+      view.dispatch(transaction);
+    };
+
+  handleSelect =
+    ({ getPos }: { getPos: () => number }) =>
+    (event: React.MouseEvent) => {
       event.preventDefault();
 
-      const { view } = this.editor;
-      const $pos = view.state.doc.resolve(getPos() + node.nodeSize);
-      view.dispatch(
-        view.state.tr.setSelection(new TextSelection($pos)).split($pos.pos)
-      );
-      view.focus();
-      return;
-    }
-
-    // Pressing Backspace in an an empty caption field should remove the entire
-    // image, leaving an empty paragraph
-    if (event.key === "Backspace" && event.currentTarget.innerText === "") {
       const { view } = this.editor;
       const $pos = view.state.doc.resolve(getPos());
-      const tr = view.state.tr.setSelection(new NodeSelection($pos));
-      view.dispatch(tr.deleteSelection());
-      view.focus();
-      return;
-    }
-  };
-
-  handleBlur = ({
-    node,
-    getPos,
-  }: {
-    node: ProsemirrorNode;
-    getPos: () => number;
-  }) => (event: React.FocusEvent<HTMLSpanElement>) => {
-    const caption = event.currentTarget.innerText;
-    if (caption === node.attrs.alt) {
-      return;
-    }
-
-    const { view } = this.editor;
-    const { tr } = view.state;
-
-    // update meta on object
-    const pos = getPos();
-    const transaction = tr.setNodeMarkup(pos, undefined, {
-      ...node.attrs,
-      alt: caption,
-    });
-    view.dispatch(transaction);
-  };
-
-  handleSelect = ({ getPos }: { getPos: () => number }) => (
-    event: React.MouseEvent
-  ) => {
-    event.preventDefault();
-
-    const { view } = this.editor;
-    const $pos = view.state.doc.resolve(getPos());
-    const transaction = view.state.tr.setSelection(new NodeSelection($pos));
-    view.dispatch(transaction);
-  };
+      const transaction = view.state.tr.setSelection(new NodeSelection($pos));
+      view.dispatch(transaction);
+    };
 
   handleMouseDown = (ev: React.MouseEvent<HTMLParagraphElement>) => {
     if (document.activeElement !== ev.currentTarget) {
@@ -189,12 +181,8 @@ export default class SimpleImage extends Node {
         }
         const { view } = this.editor;
         const { node } = state.selection;
-        const {
-          uploadFile,
-          onFileUploadStart,
-          onFileUploadStop,
-          onShowToast,
-        } = this.editor.props;
+        const { uploadFile, onFileUploadStart, onFileUploadStop, onShowToast } =
+          this.editor.props;
 
         if (!uploadFile) {
           throw new Error("uploadFile prop is required to replace images");
@@ -225,24 +213,23 @@ export default class SimpleImage extends Node {
         inputElement.click();
         return true;
       },
-      createImage: (attrs: Record<string, any>) => (
-        state: EditorState,
-        dispatch: Dispatch
-      ) => {
-        const { selection } = state;
-        const position =
-          selection instanceof TextSelection
-            ? selection.$cursor?.pos
-            : selection.$to.pos;
-        if (position === undefined) {
-          return false;
-        }
+      createImage:
+        (attrs: Record<string, any>) =>
+        (state: EditorState, dispatch: Dispatch) => {
+          const { selection } = state;
+          const position =
+            selection instanceof TextSelection
+              ? selection.$cursor?.pos
+              : selection.$to.pos;
+          if (position === undefined) {
+            return false;
+          }
 
-        const node = type.create(attrs);
-        const transaction = state.tr.insert(position, node);
-        dispatch(transaction);
-        return true;
-      },
+          const node = type.create(attrs);
+          const transaction = state.tr.insert(position, node);
+          dispatch(transaction);
+          return true;
+        },
     };
   }
 
@@ -255,7 +242,8 @@ export default class SimpleImage extends Node {
      * ![](image.jpg "class") -> [, "", "image.jpg", "small"]
      * ![Lorem](image.jpg "class") -> [, "Lorem", "image.jpg", "small"]
      */
-    const IMAGE_INPUT_REGEX = /!\[(?<alt>[^\][]*?)]\((?<filename>[^\][]*?)(?=“|\))“?(?<layoutclass>[^\][”]+)?”?\)$/;
+    const IMAGE_INPUT_REGEX =
+      /!\[(?<alt>[^\][]*?)]\((?<filename>[^\][]*?)(?=“|\))“?(?<layoutclass>[^\][”]+)?”?\)$/;
 
     return [
       new InputRule(IMAGE_INPUT_REGEX, (state, match, start, end) => {

shared/editor/nodes/Table.ts

@@ -60,56 +60,47 @@ export default class Table extends Node {
 
   commands({ schema }: { schema: Schema }) {
     return {
-      createTable: ({
-        rowsCount,
-        colsCount,
-      }: {
-        rowsCount: number;
-        colsCount: number;
-      }) => (state: EditorState, dispatch: Dispatch) => {
-        const offset = state.tr.selection.anchor + 1;
-        const nodes = createTable(schema, rowsCount, colsCount);
-        const tr = state.tr.replaceSelectionWith(nodes).scrollIntoView();
-        const resolvedPos = tr.doc.resolve(offset);
+      createTable:
+        ({ rowsCount, colsCount }: { rowsCount: number; colsCount: number }) =>
+        (state: EditorState, dispatch: Dispatch) => {
+          const offset = state.tr.selection.anchor + 1;
+          const nodes = createTable(schema, rowsCount, colsCount);
+          const tr = state.tr.replaceSelectionWith(nodes).scrollIntoView();
+          const resolvedPos = tr.doc.resolve(offset);
 
-        tr.setSelection(TextSelection.near(resolvedPos));
-        dispatch(tr);
-        return true;
-      },
-      setColumnAttr: ({
-        index,
-        alignment,
-      }: {
-        index: number;
-        alignment: string;
-      }) => (state: EditorState, dispatch: Dispatch) => {
-        const cells = getCellsInColumn(index)(state.selection) || [];
-        let transaction = state.tr;
-        cells.forEach(({ pos }) => {
-          transaction = transaction.setNodeMarkup(pos, undefined, {
-            alignment,
+          tr.setSelection(TextSelection.near(resolvedPos));
+          dispatch(tr);
+          return true;
+        },
+      setColumnAttr:
+        ({ index, alignment }: { index: number; alignment: string }) =>
+        (state: EditorState, dispatch: Dispatch) => {
+          const cells = getCellsInColumn(index)(state.selection) || [];
+          let transaction = state.tr;
+          cells.forEach(({ pos }) => {
+            transaction = transaction.setNodeMarkup(pos, undefined, {
+              alignment,
+            });
           });
-        });
-        dispatch(transaction);
-        return true;
-      },
+          dispatch(transaction);
+          return true;
+        },
       addColumnBefore: () => addColumnBefore,
       addColumnAfter: () => addColumnAfter,
       deleteColumn: () => deleteColumn,
-      addRowAfter: ({ index }: { index: number }) => (
-        state: EditorState,
-        dispatch: Dispatch
-      ) => {
-        if (index === 0) {
-          // A little hack to avoid cloning the heading row by cloning the row
-          // beneath and then moving it to the right index.
-          const tr = addRowAt(index + 2, true)(state.tr);
-          dispatch(moveRow(index + 2, index + 1)(tr));
-        } else {
-          dispatch(addRowAt(index + 1, true)(state.tr));
-        }
-        return true;
-      },
+      addRowAfter:
+        ({ index }: { index: number }) =>
+        (state: EditorState, dispatch: Dispatch) => {
+          if (index === 0) {
+            // A little hack to avoid cloning the heading row by cloning the row
+            // beneath and then moving it to the right index.
+            const tr = addRowAt(index + 2, true)(state.tr);
+            dispatch(moveRow(index + 2, index + 1)(tr));
+          } else {
+            dispatch(addRowAt(index + 1, true)(state.tr));
+          }
+          return true;
+        },
       deleteRow: () => deleteRow,
       deleteTable: () => deleteTable,
       toggleHeaderColumn: () => toggleHeaderColumn,
@@ -127,7 +118,7 @@ export default class Table extends Node {
           return false;
         }
         const index = getRowIndexFromText(
-          (state.selection as unknown) as CellSelection
+          state.selection as unknown as CellSelection
         );
 
         if (index === 0) {

shared/editor/queries/isMarkActive.ts

@@ -1,16 +1,18 @@
 import { MarkType } from "prosemirror-model";
 import { EditorState } from "prosemirror-state";
 
-const isMarkActive = (type: MarkType) => (state: EditorState): boolean => {
-  if (!type) {
-    return false;
-  }
+const isMarkActive =
+  (type: MarkType) =>
+  (state: EditorState): boolean => {
+    if (!type) {
+      return false;
+    }
 
-  const { from, $from, to, empty } = state.selection;
+    const { from, $from, to, empty } = state.selection;
 
-  return !!(empty
-    ? type.isInSet(state.storedMarks || $from.marks())
-    : state.doc.rangeHasMark(from, to, type));
-};
+    return !!(empty
+      ? type.isInSet(state.storedMarks || $from.marks())
+      : state.doc.rangeHasMark(from, to, type));
+  };
 
 export default isMarkActive;

shared/editor/queries/isNodeActive.ts

@@ -2,22 +2,22 @@ import { NodeType } from "prosemirror-model";
 import { EditorState } from "prosemirror-state";
 import { findParentNode, findSelectedNodeOfType } from "prosemirror-utils";
 
-const isNodeActive = (type: NodeType, attrs: Record<string, any> = {}) => (
-  state: EditorState
-) => {
-  if (!type) {
-    return false;
-  }
+const isNodeActive =
+  (type: NodeType, attrs: Record<string, any> = {}) =>
+  (state: EditorState) => {
+    if (!type) {
+      return false;
+    }
 
-  const node =
-    findSelectedNodeOfType(type)(state.selection) ||
-    findParentNode((node) => node.type === type)(state.selection);
+    const node =
+      findSelectedNodeOfType(type)(state.selection) ||
+      findParentNode((node) => node.type === type)(state.selection);
 
-  if (!Object.keys(attrs).length || !node) {
-    return !!node;
-  }
+    if (!Object.keys(attrs).length || !node) {
+      return !!node;
+    }
 
-  return node.node.hasMarkup(type, { ...node.node.attrs, ...attrs });
-};
+    return node.node.hasMarkup(type, { ...node.node.attrs, ...attrs });
+  };
 
 export default isNodeActive;

shared/styles/index.ts

@@ -20,9 +20,9 @@ export const ellipsis = () => `
  *
  * @returns a theme value
  */
-export const s = (key: keyof DefaultTheme) => (props: {
-  theme: DefaultTheme;
-}) => String(props.theme[key]);
+export const s =
+  (key: keyof DefaultTheme) => (props: { theme: DefaultTheme }) =>
+    String(props.theme[key]);
 
 /**
  * Mixin to hide scrollbars.