fix: remove any reference to style fonts

.eslintrc

@@ -18,7 +18,13 @@
     "react/prop-types": "off",
     "@typescript-eslint/no-unused-vars": ["error"],
     "@typescript-eslint/explicit-function-return-type": "off",
-    "prettier/prettier": "on"
+    "prettier/prettier": [
+      "error",
+      {
+        "printWidth": 80,
+        "trailingComma": "es5"
+      }
+    ]
   },
   "settings": {
     "react": {

src/components/BlockMenu.tsx

@@ -18,7 +18,7 @@ class BlockMenu extends React.Component<BlockMenuProps> {
 
   clearSearch = () => {
     const { state, dispatch } = this.props.view;
-    const parent = findParentNode((node) => !!node)(state.selection);
+    const parent = findParentNode(node => !!node)(state.selection);
 
     if (parent) {
       dispatch(state.tr.insertText("", parent.pos, state.selection.to));

src/components/BlockMenuItem.tsx

@@ -1,4 +1,4 @@
-import styled, { ExecutionProps, withTheme } from "styled-components";
+import styled, { withTheme } from "styled-components";
 
 import React from "react";
 import scrollIntoView from "smooth-scroll-into-view-if-needed";
@@ -79,12 +79,12 @@ const MenuItem = styled.button<{
   height: 36px;
   cursor: pointer;
   border: none;
-  opacity: ${(props) => (props.disabled ? ".5" : "1")};
-  color: ${(props) =>
+  opacity: ${props => (props.disabled ? ".5" : "1")};
+  color: ${props =>
     props.selected
       ? props.theme.blockToolbarTextSelected
       : props.theme.blockToolbarText};
-  background: ${(props) =>
+  background: ${props =>
     props.selected
       ? props.theme.blockToolbarSelectedBackground ||
         props.theme.blockToolbarTrigger
@@ -94,8 +94,8 @@ const MenuItem = styled.button<{
 
   &:hover,
   &:active {
-    color: ${(props) => props.theme.blockToolbarTextSelected};
-    background: ${(props) =>
+    color: ${props => props.theme.blockToolbarTextSelected};
+    background: ${props =>
       props.selected
         ? props.theme.blockToolbarSelectedBackground ||
           props.theme.blockToolbarTrigger
@@ -104,7 +104,7 @@ const MenuItem = styled.button<{
 `;
 
 const Shortcut = styled.span`
-  color: ${(props) => props.theme.textSecondary};
+  color: ${props => props.theme.textSecondary};
   flex-grow: 1;
   text-align: right;
 `;

src/components/CommandMenu.tsx

@@ -178,7 +178,7 @@ class CommandMenu<T extends MenuItem = MenuItem> extends React.Component<
     }
   };
 
-  insertItem = (item) => {
+  insertItem = item => {
     switch (item.name) {
       case "image":
         return this.triggerImagePick();
@@ -259,11 +259,11 @@ class CommandMenu<T extends MenuItem = MenuItem> extends React.Component<
     }
   };
 
-  triggerLinkInput = (item) => {
+  triggerLinkInput = item => {
     this.setState({ insertItem: item });
   };
 
-  handleImagePicked = (event) => {
+  handleImagePicked = event => {
     const files = getDataTransferFiles(event);
 
     const {
@@ -274,7 +274,7 @@ class CommandMenu<T extends MenuItem = MenuItem> extends React.Component<
       onShowToast,
     } = this.props;
     const { state } = view;
-    const parent = findParentNode((node) => !!node)(state.selection);
+    const parent = findParentNode(node => !!node)(state.selection);
 
     this.clearSearch();
 
@@ -428,7 +428,7 @@ class CommandMenu<T extends MenuItem = MenuItem> extends React.Component<
       items = items.concat(embedItems);
     }
 
-    const filtered = items.filter((item) => {
+    const filtered = items.filter(item => {
       if (item.name === "separator") return true;
 
       // Some extensions may be disabled, remove corresponding menu items
@@ -541,7 +541,7 @@ const LinkInputWrapper = styled.div`
 const LinkInput = styled(Input)`
   height: 36px;
   width: 100%;
-  color: ${(props) => props.theme.blockToolbarText};
+  color: ${props => props.theme.blockToolbarText};
 `;
 
 const List = styled.ol`
@@ -560,7 +560,7 @@ const ListItem = styled.li`
 const Empty = styled.div`
   display: flex;
   align-items: center;
-  color: ${(props) => props.theme.textSecondary};
+  color: ${props => props.theme.textSecondary};
   font-weight: 500;
   font-size: 14px;
   height: 36px;
@@ -574,14 +574,14 @@ export const Wrapper = styled.div<{
   left?: number;
   isAbove: boolean;
 }>`
-  color: ${(props) => props.theme.text};
-  font-family: ${(props) => props.theme.fontFamily};
+  color: ${props => props.theme.text};
+  font-family: ${props => props.theme.fontFamily};
   position: absolute;
-  z-index: ${(props) => props.theme.zIndex + 100};
-  ${(props) => props.top !== undefined && `top: ${props.top}px`};
-  ${(props) => props.bottom !== undefined && `bottom: ${props.bottom}px`};
-  left: ${(props) => props.left}px;
-  background-color: ${(props) => props.theme.blockToolbarBackground};
+  z-index: ${props => props.theme.zIndex + 100};
+  ${props => props.top !== undefined && `top: ${props.top}px`};
+  ${props => props.bottom !== undefined && `bottom: ${props.bottom}px`};
+  left: ${props => props.left}px;
+  background-color: ${props => props.theme.blockToolbarBackground};
   border-radius: 4px;
   box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px,
     rgba(0, 0, 0, 0.08) 0px 4px 8px, rgba(0, 0, 0, 0.08) 0px 2px 4px;
@@ -606,7 +606,7 @@ export const Wrapper = styled.div<{
   hr {
     border: 0;
     height: 0;
-    border-top: 1px solid ${(props) => props.theme.blockToolbarDivider};
+    border-top: 1px solid ${props => props.theme.blockToolbarDivider};
   }
 
   ${({ active, isAbove }) =>

src/components/LinkSearchResult.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+
 import scrollIntoView from "smooth-scroll-into-view-if-needed";
 import styled from "styled-components";
 
@@ -58,7 +59,6 @@ const ListItem = styled.li<{
   color: ${props => props.theme.toolbarItem};
   background: ${props =>
     props.selected ? props.theme.toolbarHoverBackground : "transparent"};
-  font-family: ${props => props.theme.fontFamily};
   text-decoration: none;
   overflow: hidden;
   white-space: nowrap;

src/index.tsx

@@ -178,7 +178,7 @@ class RichMarkdownEditor extends React.PureComponent<Props, State> {
     onImageUploadStop: () => {
       // no default behavior
     },
-    onClickLink: (href) => {
+    onClickLink: href => {
       window.open(href, "_blank");
     },
     embeds: [],
@@ -400,7 +400,7 @@ class RichMarkdownEditor extends React.PureComponent<Props, State> {
           new MaxLength({
             maxLength: this.props.maxLength,
           }),
-        ].filter((extension) => {
+        ].filter(extension => {
           // Optionaly disable extensions
           if (this.props.disableExtensions) {
             return !(this.props.disableExtensions as string[]).includes(
@@ -526,7 +526,7 @@ class RichMarkdownEditor extends React.PureComponent<Props, State> {
       throw new Error("createView called before ref available");
     }
 
-    const isEditingCheckbox = (tr) => {
+    const isEditingCheckbox = tr => {
       return tr.steps.some(
         (step: Step) =>
           step.slice?.content?.firstChild?.type.name ===
@@ -552,7 +552,7 @@ class RichMarkdownEditor extends React.PureComponent<Props, State> {
         // changing then call our own change handler to let the outside world
         // know
         if (
-          transactions.some((tr) => tr.docChanged) &&
+          transactions.some(tr => tr.docChanged) &&
           (!self.props.readOnly ||
             (self.props.readOnlyWriteCheckboxes &&
               transactions.some(isEditingCheckbox)))
@@ -690,7 +690,7 @@ class RichMarkdownEditor extends React.PureComponent<Props, State> {
     const headings: { title: string; level: number; id: string }[] = [];
     const previouslySeen = {};
 
-    this.view.state.doc.forEach((node) => {
+    this.view.state.doc.forEach(node => {
       if (node.type.name === "heading") {
         // calculate the optimal slug
         const slug = headingToSlug(node);
@@ -757,7 +757,7 @@ class RichMarkdownEditor extends React.PureComponent<Props, State> {
               rtl={isRTL}
               readOnly={readOnly}
               readOnlyWriteCheckboxes={readOnlyWriteCheckboxes}
-              ref={(ref) => (this.element = ref)}
+              ref={ref => (this.element = ref)}
             />
             {!readOnly && this.view && (
               <React.Fragment>

src/nodes/Notice.tsx

@@ -50,7 +50,7 @@ export default class Notice extends Node {
           }),
         },
       ],
-      toDOM: (node) => {
+      toDOM: node => {
         const select = document.createElement("select");
         select.addEventListener("change", this.handleStyleChange);
 
@@ -89,10 +89,10 @@ export default class Notice extends Node {
   }
 
   commands({ type }) {
-    return (attrs) => toggleWrap(type, attrs);
+    return attrs => toggleWrap(type, attrs);
   }
 
-  handleStyleChange = (event) => {
+  handleStyleChange = event => {
     const { view } = this.editor;
     const { tr } = view.state;
     const element = event.target;
@@ -122,7 +122,7 @@ export default class Notice extends Node {
   parseMarkdown() {
     return {
       block: "container_notice",
-      getAttrs: (tok) => ({ style: tok.info }),
+      getAttrs: tok => ({ style: tok.info }),
     };
   }
 }

src/plugins/BlockMenuTrigger.tsx

@@ -96,9 +96,9 @@ export default class BlockMenuTrigger extends Extension {
 
             return false;
           },
-          decorations: (state) => {
+          decorations: state => {
             const parent = findParentNode(
-              (node) => node.type.name === "paragraph"
+              node => node.type.name === "paragraph"
             )(state.selection);
 
             if (!parent) {

src/stories/index.stories.tsx

@@ -26,7 +26,7 @@ export default {
   },
 } as Meta;
 
-const Template: Story<Props> = (args) => <Editor {...args} />;
+const Template: Story<Props> = args => <Editor {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
@@ -190,7 +190,7 @@ Persisted.args = {
     `# Persisted
 
 The contents of this editor are persisted to local storage on change (edit and reload)`,
-  onChange: debounce((value) => {
+  onChange: debounce(value => {
     const text = value();
     localStorage.setItem("saved", text);
   }, 250),

src/styles/editor.ts

@@ -7,10 +7,6 @@ export const StyledEditor = styled("div")<{
 }>`
   color: ${props => props.theme.text};
   background: ${props => props.theme.background};
-  font-family: ${props => props.theme.fontFamily};
-  font-weight: ${props => props.theme.fontWeight};
-  font-size: 1em;
-  line-height: 1.7em;
   width: 100%;
 
   .ProseMirror {
@@ -129,12 +125,10 @@ export const StyledEditor = styled("div")<{
   h5,
   h6 {
     margin: 1em 0 0.5em;
-    font-weight: 500;
     cursor: text;
 
     &:not(.placeholder):before {
-      display: ${props => (props.readOnly ? "none" : "inline-block")};
-      font-family: ${props => props.theme.fontFamilyMono};
+      display: ${props => (props.readOnly ? "none" : "inline-block")};   
       color: ${props => props.theme.textSecondary};
       font-size: 13px;
       line-height: 0;
@@ -226,7 +220,6 @@ export const StyledEditor = styled("div")<{
     margin: 0;
     padding: 0;
     text-align: left;
-    font-family: ${props => props.theme.fontFamilyMono};
     font-size: 14px;
     line-height: 0;
     width: 12px;
@@ -540,7 +533,6 @@ export const StyledEditor = styled("div")<{
     border: 1px solid ${props => props.theme.codeBorder};
     background: ${props => props.theme.codeBackground};
     padding: 3px 4px;
-    font-family: ${props => props.theme.fontFamilyMono};
     font-size: 80%;
   }
 
@@ -617,7 +609,6 @@ export const StyledEditor = styled("div")<{
     border: 1px solid ${props => props.theme.codeBorder};
 
     -webkit-font-smoothing: initial;
-    font-family: ${props => props.theme.fontFamilyMono};
     font-size: 13px;
     direction: ltr;
     text-align: left;
@@ -1008,10 +999,5 @@ export const StyledEditor = styled("div")<{
     .page-break {
       opacity: 0;
     }
-
-    em,
-    blockquote {
-      font-family: "SF Pro Text", ${props => props.theme.fontFamily};
-    }
   }
 `;

src/styles/theme.ts

@@ -15,11 +15,6 @@ const colors = {
 
 export const base = {
   ...colors,
-  fontFamily:
-    "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen, Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif",
-  fontFamilyMono:
-    "'SFMono-Regular',Consolas,'Liberation Mono', Menlo, Courier,monospace",
-  fontWeight: 400,
   zIndex: 100,
   link: colors.primary,
   placeholder: "#B1BECC",