Assorted cleanup, minor bug fixes, styling fixes, eslint rules (#5165

* fix: Logic error in toast
fix: Remove useless component

* fix: Logout not clearing all stores

* Add icons to notification settings

* Add eslint rule to enforce spaced comment

* Add eslint rule for arrow-body-style

* Add eslint rule to enforce self-closing components

* Add menu to api key settings
Fix: Deleting webhook subscription does not remove from UI
Split webhook subscriptions into active and inactive
Styling updates

shared/editor/nodes/Attachment.tsx

@@ -43,29 +43,25 @@ export default class Attachment extends Node {
         {
           priority: 100,
           tag: "a.attachment",
-          getAttrs: (dom: HTMLAnchorElement) => {
-            return {
-              id: dom.id,
-              title: dom.innerText,
-              href: dom.getAttribute("href"),
-              size: parseInt(dom.dataset.size || "0", 10),
-            };
-          },
+          getAttrs: (dom: HTMLAnchorElement) => ({
+            id: dom.id,
+            title: dom.innerText,
+            href: dom.getAttribute("href"),
+            size: parseInt(dom.dataset.size || "0", 10),
+          }),
         },
       ],
-      toDOM: (node) => {
-        return [
-          "a",
-          {
-            class: `attachment`,
-            id: node.attrs.id,
-            href: sanitizeUrl(node.attrs.href),
-            download: node.attrs.title,
-            "data-size": node.attrs.size,
-          },
-          node.attrs.title,
-        ];
-      },
+      toDOM: (node) => [
+        "a",
+        {
+          class: `attachment`,
+          id: node.attrs.id,
+          href: sanitizeUrl(node.attrs.href),
+          download: node.attrs.title,
+          "data-size": node.attrs.size,
+        },
+        node.attrs.title,
+      ],
       toPlainText: (node) => node.attrs.title,
     };
   }

shared/editor/nodes/CodeFence.ts

@@ -148,11 +148,9 @@ export default class CodeFence extends Node {
           tag: ".code-block",
           preserveWhitespace: "full",
           contentElement: "code",
-          getAttrs: (dom: HTMLDivElement) => {
-            return {
-              language: dom.dataset.language,
-            };
-          },
+          getAttrs: (dom: HTMLDivElement) => ({
+            language: dom.dataset.language,
+          }),
         },
       ],
       toDOM: (node) => {

shared/editor/nodes/Emoji.tsx

@@ -101,10 +101,10 @@ export default class Emoji extends Node {
             ) {
               const { pos } = view.state.selection.$from;
 
-              return run(view, pos, pos, OPEN_REGEX, (state, match) => {
+              return run(view, pos, pos, OPEN_REGEX, (state, match) =>
                 // just tell Prosemirror we handled it and not to do anything
-                return match ? true : null;
-              });
+                match ? true : null
+              );
             }
 
             return false;
@@ -189,9 +189,7 @@ export default class Emoji extends Node {
   parseMarkdown() {
     return {
       node: "emoji",
-      getAttrs: (tok: Token) => {
-        return { "data-name": tok.markup.trim() };
-      },
+      getAttrs: (tok: Token) => ({ "data-name": tok.markup.trim() }),
     };
   }
 }

shared/editor/nodes/Heading.ts

@@ -114,9 +114,8 @@ export default class Heading extends Node {
   }
 
   commands({ type, schema }: { type: NodeType; schema: Schema }) {
-    return (attrs: Record<string, any>) => {
-      return toggleBlockType(type, schema.nodes.paragraph, attrs);
-    };
+    return (attrs: Record<string, any>) =>
+      toggleBlockType(type, schema.nodes.paragraph, attrs);
   }
 
   handleFoldContent = (event: MouseEvent) => {
@@ -256,12 +255,9 @@ export default class Heading extends Node {
 
     const plugin: Plugin = new Plugin({
       state: {
-        init: (config, state) => {
-          return getAnchors(state.doc);
-        },
-        apply: (tr, oldState) => {
-          return tr.docChanged ? getAnchors(tr.doc) : oldState;
-        },
+        init: (config, state) => getAnchors(state.doc),
+        apply: (tr, oldState) =>
+          tr.docChanged ? getAnchors(tr.doc) : oldState,
       },
       props: {
         decorations: (state) => plugin.getState(state),

shared/editor/nodes/HorizontalRule.ts

@@ -20,12 +20,10 @@ export default class HorizontalRule extends Node {
       },
       group: "block",
       parseDOM: [{ tag: "hr" }],
-      toDOM: (node) => {
-        return [
-          "hr",
-          { class: node.attrs.markup === "***" ? "page-break" : "" },
-        ];
-      },
+      toDOM: (node) => [
+        "hr",
+        { class: node.attrs.markup === "***" ? "page-break" : "" },
+      ],
     };
   }
 

shared/editor/nodes/Image.tsx

@@ -219,30 +219,28 @@ export default class Image extends SimpleImage {
     downloadImageNode(node);
   };
 
-  component = (props: ComponentProps) => {
-    return (
-      <ImageComponent
-        {...props}
-        onClick={this.handleSelect(props)}
-        onDownload={this.handleDownload(props)}
-        onChangeSize={this.handleChangeSize(props)}
+  component = (props: ComponentProps) => (
+    <ImageComponent
+      {...props}
+      onClick={this.handleSelect(props)}
+      onDownload={this.handleDownload(props)}
+      onChangeSize={this.handleChangeSize(props)}
+    >
+      <Caption
+        onKeyDown={this.handleKeyDown(props)}
+        onBlur={this.handleBlur(props)}
+        onMouseDown={this.handleMouseDown}
+        className="caption"
+        tabIndex={-1}
+        role="textbox"
+        contentEditable
+        suppressContentEditableWarning
+        data-caption={this.options.dictionary.imageCaptionPlaceholder}
       >
-        <Caption
-          onKeyDown={this.handleKeyDown(props)}
-          onBlur={this.handleBlur(props)}
-          onMouseDown={this.handleMouseDown}
-          className="caption"
-          tabIndex={-1}
-          role="textbox"
-          contentEditable
-          suppressContentEditableWarning
-          data-caption={this.options.dictionary.imageCaptionPlaceholder}
-        >
-          {props.node.attrs.alt}
-        </Caption>
-      </ImageComponent>
-    );
-  };
+        {props.node.attrs.alt}
+      </Caption>
+    </ImageComponent>
+  );
 
   toMarkdown(state: MarkdownSerializerState, node: ProsemirrorNode) {
     let markdown =
@@ -275,17 +273,13 @@ export default class Image extends SimpleImage {
   parseMarkdown() {
     return {
       node: "image",
-      getAttrs: (token: Token) => {
-        return {
-          src: token.attrGet("src"),
-          alt:
-            (token?.children &&
-              token.children[0] &&
-              token.children[0].content) ||
-            null,
-          ...parseTitleAttribute(token?.attrGet("title") || ""),
-        };
-      },
+      getAttrs: (token: Token) => ({
+        src: token.attrGet("src"),
+        alt:
+          (token?.children && token.children[0] && token.children[0].content) ||
+          null,
+        ...parseTitleAttribute(token?.attrGet("title") || ""),
+      }),
     };
   }
 

shared/editor/nodes/Mention.ts

@@ -47,19 +47,17 @@ export default class Mention extends Node {
           }),
         },
       ],
-      toDOM: (node) => {
-        return [
-          "span",
-          {
-            class: `${node.type.name}`,
-            id: node.attrs.id,
-            "data-type": node.attrs.type,
-            "data-id": node.attrs.modelId,
-            "data-actorId": node.attrs.actorId,
-          },
-          node.attrs.label,
-        ];
-      },
+      toDOM: (node) => [
+        "span",
+        {
+          class: `${node.type.name}`,
+          id: node.attrs.id,
+          "data-type": node.attrs.type,
+          "data-id": node.attrs.modelId,
+          "data-actorId": node.attrs.actorId,
+        },
+        node.attrs.label,
+      ],
       toPlainText: (node) => `@${node.attrs.label}`,
     };
   }
@@ -109,10 +107,10 @@ export default class Mention extends Node {
             ) {
               const { pos } = view.state.selection.$from;
 
-              return run(view, pos, pos, OPEN_REGEX, (state, match) => {
+              return run(view, pos, pos, OPEN_REGEX, (state, match) =>
                 // just tell Prosemirror we handled it and not to do anything
-                return match ? true : null;
-              });
+                match ? true : null
+              );
             }
 
             return false;

shared/editor/nodes/SimpleImage.tsx

@@ -51,31 +51,27 @@ export default class SimpleImage extends Node {
         },
         {
           tag: "img",
-          getAttrs: (dom: HTMLImageElement) => {
-            return {
-              src: dom.getAttribute("src"),
-              alt: dom.getAttribute("alt"),
-              title: dom.getAttribute("title"),
-            };
-          },
+          getAttrs: (dom: HTMLImageElement) => ({
+            src: dom.getAttribute("src"),
+            alt: dom.getAttribute("alt"),
+            title: dom.getAttribute("title"),
+          }),
         },
       ],
-      toDOM: (node) => {
-        return [
-          "div",
+      toDOM: (node) => [
+        "div",
+        {
+          class: "image",
+        },
+        [
+          "img",
           {
-            class: "image",
+            ...node.attrs,
+            src: sanitizeUrl(node.attrs.src),
+            contentEditable: "false",
           },
-          [
-            "img",
-            {
-              ...node.attrs,
-              src: sanitizeUrl(node.attrs.src),
-              contentEditable: "false",
-            },
-          ],
-        ];
-      },
+        ],
+      ],
     };
   }
 
@@ -155,9 +151,9 @@ export default class SimpleImage extends Node {
     }
   };
 
-  component = (props: ComponentProps) => {
-    return <ImageComponent {...props} onClick={this.handleSelect(props)} />;
-  };
+  component = (props: ComponentProps) => (
+    <ImageComponent {...props} onClick={this.handleSelect(props)} />
+  );
 
   toMarkdown(state: MarkdownSerializerState, node: ProsemirrorNode) {
     state.write(
@@ -172,16 +168,12 @@ export default class SimpleImage extends Node {
   parseMarkdown() {
     return {
       node: "image",
-      getAttrs: (token: Token) => {
-        return {
-          src: token.attrGet("src"),
-          alt:
-            (token?.children &&
-              token.children[0] &&
-              token.children[0].content) ||
-            null,
-        };
-      },
+      getAttrs: (token: Token) => ({
+        src: token.attrGet("src"),
+        alt:
+          (token?.children && token.children[0] && token.children[0].content) ||
+          null,
+      }),
     };
   }