Implement custom font settings

src/cloud/components/molecules/Editor/EditorAdmonitionToolDropdown.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import React, { useMemo, useRef } from 'react'
 import { useEffectOnce } from 'react-use'
 import { getFirstFocusableChildOfElement } from '../../../lib/dom'
 import { FormattingTool } from './types'
@@ -34,7 +34,7 @@ const EditorAdmonitionToolDropdown = ({
   closeDropdowndown,
   onFormatCallback,
 }: EditorAdmonitionToolDropdownProps) => {
-  const menuRef = React.createRef<HTMLDivElement>()
+  const menuRef = useRef<HTMLDivElement>(null)
 
   useEffectOnce(() => {
     const focusableElement = getFirstFocusableChildOfElement(menuRef.current!)

src/cloud/components/molecules/Editor/EditorHeaderToolDropdown.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import React, { useMemo, useRef } from 'react'
 import { useEffectOnce } from 'react-use'
 import { getFirstFocusableChildOfElement } from '../../../lib/dom'
 import { FormattingTool } from './types'
@@ -45,7 +45,7 @@ const EditorHeaderToolDropdown = ({
   closeDropdowndown,
   onFormatCallback,
 }: EditorHeaderToolDropdownProps) => {
-  const menuRef = React.createRef<HTMLDivElement>()
+  const menuRef = useRef<HTMLDivElement>(null)
 
   useEffectOnce(() => {
     const focusableElement = getFirstFocusableChildOfElement(menuRef.current!)

src/cloud/components/molecules/Editor/index.tsx

@@ -95,6 +95,7 @@ import DocShare from '../DocShare'
 import EditorLayout from '../../organisms/EditorLayout'
 import PreferencesContextMenuWrapper from '../../molecules/PreferencesContextMenuWrapper'
 import InviteCTAButton from '../InviteCTAButton'
+import { BaseTheme } from '../../../../shared/lib/styled/types'
 
 type LayoutMode = 'split' | 'preview' | 'editor'
 
@@ -596,6 +597,9 @@ const Editor = ({ doc, team, user, contributors, backLinks }: EditorProps) => {
   )
 
   const { settings } = useSettings()
+  const fontSize = settings['general.editorFontSize']
+  const fontFamily = settings['general.editorFontFamily']
+
   const editorConfig: CodeMirror.EditorConfiguration = useMemo(() => {
     const editorTheme = settings['general.editorTheme']
     const theme =
@@ -1077,7 +1081,11 @@ const Editor = ({ doc, team, user, contributors, backLinks }: EditorProps) => {
             </StyledLayoutDimensions>
           )}
           <StyledEditor className={editorLayout}>
-            <StyledEditorWrapper className={`layout-${editorLayout}`}>
+            <StyledEditorWrapper
+              className={`layout-${editorLayout}`}
+              fontFamily={fontFamily}
+              fontSize={fontSize}
+            >
               <>
                 <CodeMirrorEditor
                   bind={bindCallback}
@@ -1241,8 +1249,11 @@ const ToolbarRow = styled.div`
   border: solid 1px ${({ theme }) => theme.divideBorderColor};
   border-radius: 5px;
 `
-
-const StyledEditorWrapper = styled.div`
+interface FontOptionsProps {
+  fontSize: string
+  fontFamily: string
+}
+const StyledEditorWrapper = styled.div<BaseTheme & FontOptionsProps>`
   position: relative;
   height: auto;
   width: 50%;
@@ -1252,6 +1263,13 @@ const StyledEditorWrapper = styled.div`
   &.layout-preview {
     display: none;
   }
+
+  & .CodeMirror * {
+    font-size: ${({ fontSize }) =>
+      fontSize == null ? 'inherit' : `${fontSize}px`};
+    font-family: ${({ fontFamily }) =>
+      fontFamily == null ? 'monospace' : fontFamily};
+  }
 `
 
 const StyledPreview = styled.div`

src/cloud/components/molecules/RelativeDialog/RelativeDialog.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useRef } from 'react'
 import {
   StyledRelativeDialog,
   StyledWrapper,
@@ -17,7 +17,7 @@ const RelativeDialog = ({
   closed,
   setClosed,
 }: React.PropsWithChildren<RelativeDialogProps>) => {
-  const dialogRef: React.RefObject<HTMLDivElement> = React.createRef()
+  const dialogRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
     if (!closed) {

src/cloud/components/molecules/Timeline/TimelineList.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import React, { useMemo, useRef } from 'react'
 import { SerializedAppEvent } from '../../../interfaces/db/appEvents'
 import { useNav } from '../../../lib/stores/nav'
 import { getOriginalDocId } from '../../../lib/utils/patterns'
@@ -28,7 +28,7 @@ const TimelineList = ({
   workspacesMap,
 }: TimelineListProps) => {
   const { docsMap } = useNav()
-  const listRef = React.createRef<HTMLDivElement>()
+  const listRef = useRef<HTMLDivElement>(null)
   useUpDownNavigationListener(listRef)
 
   const timelineDocs = useMemo(() => {

src/cloud/components/organisms/EventSource.tsx

@@ -193,7 +193,7 @@ const EventSource = ({ teamId }: EventSourceProps) => {
       }
 
       if (usingElectron) {
-        sendToElectron('team-update', event.data.team)
+        sendToElectron('team-update', { ...team, ...eventTeam })
       }
     },
     [

src/cloud/components/organisms/ImportFlow/molecules/ImportFlowDestination.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import React, { useMemo, useRef } from 'react'
 import { useNav } from '../../../../lib/stores/nav'
 import { sortByAttributeAsc } from '../../../../lib/utils/array'
 import { SerializedWorkspace } from '../../../../interfaces/db/workspace'
@@ -28,7 +28,7 @@ const ImportModalSelectFolder = ({
   onSelect,
 }: ImportModalSelectFolderProps) => {
   const { foldersMap, workspacesMap } = useNav()
-  const wrapperRef = React.createRef<HTMLDivElement>()
+  const wrapperRef = useRef<HTMLDivElement>(null)
   const { translate } = useI18n()
 
   const sortedWorkspaces = useMemo(() => {

src/cloud/components/organisms/Modal/contents/TemplatesModal/index.tsx

@@ -67,8 +67,8 @@ const TemplatesModal = ({ callback }: TemplatesModalProps) => {
     currentParentFolderId,
   } = useNav()
   const { pushApiErrorMessage } = useToast()
-  const contentSideRef = React.createRef<HTMLDivElement>()
-  const menuRef = React.createRef<HTMLDivElement>()
+  const contentSideRef = useRef<HTMLDivElement>(null)
+  const menuRef = useRef<HTMLDivElement>(null)
   const [filter, setFilter] = useState<string>('')
   const [selectedTemplateId, setSelectedTemplateId] = useState<string>()
   const [templateTitle, setTemplateTitle] = useState<string>('')

src/cloud/components/organisms/Topbar/Controls/ControlsContextMenu/FolderContextMenu.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useMemo } from 'react'
+import React, { useState, useCallback, useMemo, useRef } from 'react'
 import { usePage } from '../../../../../lib/stores/pageStore'
 import { useNav } from '../../../../../lib/stores/nav'
 import {
@@ -48,7 +48,7 @@ const FolderContextMenu = ({
   const { openRenameFolderForm } = useCloudResourceModals()
   const { translate } = useI18n()
 
-  const menuRef = React.createRef<HTMLDivElement>()
+  const menuRef = useRef<HTMLDivElement>(null)
   useEffectOnce(() => {
     menuRef.current!.focus()
   })

src/cloud/components/organisms/Topbar/Controls/ControlsContextMenu/TagContextMenu.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useCallback } from 'react'
+import React, { useState, useMemo, useCallback, useRef } from 'react'
 import { usePage } from '../../../../../lib/stores/pageStore'
 import { useNav } from '../../../../../lib/stores/nav'
 import ContextMenuItem from './ControlsContextMenuItem'
@@ -46,7 +46,7 @@ const TagContextMenu = ({
   const { pushApiErrorMessage } = useToast()
   const { messageBox } = useDialog()
 
-  const menuRef = React.createRef<HTMLDivElement>()
+  const menuRef = useRef<HTMLDivElement>(null)
   useEffectOnce(() => {
     menuRef.current!.focus()
   })

src/cloud/components/organisms/settings/SettingsComponent.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useEffect } from 'react'
+import React, { useMemo, useEffect, useRef } from 'react'
 import { useSettings } from '../../../lib/stores/settings'
 import {
   preventKeyboardEventPropagation,
@@ -57,8 +57,8 @@ const SettingsComponent = () => {
     openSettingsTab,
     settingsOpeningOptions,
   } = useSettings()
-  const contentSideRef = React.createRef<HTMLDivElement>()
-  const menuRef = React.createRef<HTMLDivElement>()
+  const contentSideRef = useRef<HTMLDivElement>(null)
+  const menuRef = useRef<HTMLDivElement>(null)
   const { team, subscription, currentUserPermissions } = usePage<
     PageStoreWithTeam
   >()

src/cloud/components/organisms/settings/UserPreferencesForm.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import React, { ChangeEventHandler, useCallback, useState } from 'react'
 import {
   useSettings,
   GeneralThemeOptions,
@@ -19,11 +19,19 @@ import FormSelect, {
 } from '../../../../shared/components/molecules/Form/atoms/FormSelect'
 import FormRow from '../../../../shared/components/molecules/Form/templates/FormRow'
 import { lngKeys } from '../../../lib/i18n/types'
+import { useDebounce } from 'react-use'
 
 const UserPreferencesForm = () => {
   const { settings, setSettings } = useSettings()
   const { t } = useTranslation()
 
+  const [fontSize, setFontSize] = useState(
+    settings['general.editorFontSize'].toString()
+  )
+  const [fontFamily, setFontFamily] = useState(
+    settings['general.editorFontFamily']
+  )
+
   const selectLanguage = useCallback(
     (formOption: FormSelectOption) => {
       setSettings({
@@ -100,6 +108,41 @@ const UserPreferencesForm = () => {
     [setSettings]
   )
 
+  const updateFontSize: ChangeEventHandler<HTMLInputElement> = useCallback(
+    (event) => {
+      setFontSize(event.target.value)
+    },
+    [setFontSize]
+  )
+  useDebounce(
+    () => {
+      const parsedFontSize = parseInt(fontSize, 10)
+      if (!Number.isNaN(parsedFontSize)) {
+        setSettings({
+          'general.editorFontSize': parsedFontSize,
+        })
+      }
+    },
+    500,
+    [fontSize, setSettings]
+  )
+
+  const updateFontFamily: ChangeEventHandler<HTMLInputElement> = useCallback(
+    (event) => {
+      setFontFamily(event.target.value)
+    },
+    [setFontFamily]
+  )
+  useDebounce(
+    () => {
+      setSettings({
+        'general.editorFontFamily': fontFamily,
+      })
+    },
+    500,
+    [fontFamily, setSettings]
+  )
+
   return (
     <Form
       rows={[
@@ -162,6 +205,32 @@ const UserPreferencesForm = () => {
             },
           ],
         },
+        {
+          title: t(lngKeys.SettingsEditorFontSize),
+          items: [
+            {
+              type: 'input',
+              props: {
+                type: 'number',
+                value: fontSize,
+                onChange: updateFontSize,
+              },
+            },
+          ],
+        },
+        {
+          title: t(lngKeys.SettingsEditorFontFamily),
+          items: [
+            {
+              type: 'input',
+              props: {
+                type: 'text',
+                value: fontFamily,
+                onChange: updateFontFamily,
+              },
+            },
+          ],
+        },
         {
           title: t(lngKeys.SettingsEditorTheme),
           items: [

src/cloud/lib/i18n/enUS.ts

@@ -50,6 +50,8 @@ const enTranslation: TranslationSource = {
   [lngKeys.SettingsEditorTheme]: 'Editor Theme',
   [lngKeys.SettingsCodeBlockTheme]: 'Code Block Theme',
   [lngKeys.SettingsEditorKeyMap]: 'Editor Keymap',
+  [lngKeys.SettingsEditorFontSize]: 'Editor Font Size',
+  [lngKeys.SettingsEditorFontFamily]: 'Editor Font Family',
   [lngKeys.SettingsLight]: 'Light',
   [lngKeys.SettingsDark]: 'Dark',
   [lngKeys.SettingsNotifFrequencies]: 'Email updates',

src/cloud/lib/i18n/fr.ts

@@ -51,6 +51,8 @@ const frTranslation: TranslationSource = {
   [lngKeys.SettingsEditorTheme]: "Thème de l'éditeur",
   [lngKeys.SettingsCodeBlockTheme]: 'Thème des blocs de code',
   [lngKeys.SettingsEditorKeyMap]: "KeyMap pour l'éditeur",
+  [lngKeys.SettingsEditorFontSize]: "Taille de la police de l'éditeur",
+  [lngKeys.SettingsEditorFontFamily]: "Famille de polices de l'éditeur",
   [lngKeys.SettingsLight]: 'Clair',
   [lngKeys.SettingsDark]: 'Sombre',
   [lngKeys.SettingsNotifFrequencies]: 'Fréquence de mises à jour par mail',

src/cloud/lib/i18n/ja.ts

@@ -50,6 +50,8 @@ const jpTranslation: TranslationSource = {
   [lngKeys.SettingsEditorTheme]: 'エディタテーマ',
   [lngKeys.SettingsCodeBlockTheme]: 'コードブロックテーマ',
   [lngKeys.SettingsEditorKeyMap]: 'エディタのキーマップ',
+  [lngKeys.SettingsEditorFontSize]: 'エディタのフォントサイズ',
+  [lngKeys.SettingsEditorFontFamily]: 'エディタフォントファミリ',
   [lngKeys.SettingsLight]: 'ライト',
   [lngKeys.SettingsDark]: 'ダーク',
   [lngKeys.SettingsNotifFrequencies]: 'メール設定',

src/cloud/lib/i18n/types.ts

@@ -120,6 +120,8 @@ export enum lngKeys {
   SettingsEditorTheme = 'settings.editorTheme',
   SettingsCodeBlockTheme = 'settings.codeblockTheme',
   SettingsEditorKeyMap = 'settings.editorKeyMap',
+  SettingsEditorFontSize = 'settings.editorFontSize',
+  SettingsEditorFontFamily = 'settings.editorFontFamily',
   SettingsLight = 'settings.light',
   SettingsDark = 'settings.dark',
   SettingsNotifFrequencies = 'settings.notificationsFrequency',

src/cloud/lib/i18n/zhCN.ts

@@ -50,6 +50,8 @@ const zhTranslation: TranslationSource = {
   [lngKeys.SettingsEditorTheme]: '编辑主题',
   [lngKeys.SettingsCodeBlockTheme]: '代码块主题',
   [lngKeys.SettingsEditorKeyMap]: '编辑器键映射',
+  [lngKeys.SettingsEditorFontSize]: '编辑器字体大小',
+  [lngKeys.SettingsEditorFontFamily]: '编辑器字体系列',
   [lngKeys.SettingsLight]: 'Light',
   [lngKeys.SettingsDark]: 'Dark',
   [lngKeys.SettingsNotifFrequencies]: 'Email updates',

src/cloud/lib/stores/settings/store.ts

@@ -22,6 +22,9 @@ export const baseUserSettings: UserSettings = {
   'general.editorKeyMap': 'default',
   'general.editorIndentType': 'spaces',
   'general.editorIndentSize': 2,
+  'general.editorFontSize': 15,
+  'general.editorFontFamily':
+    'SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace',
 }
 
 export type SettingsTab =

src/cloud/lib/stores/settings/types.ts

@@ -13,6 +13,8 @@ export interface UserSettings {
   'general.editorKeyMap': CodeMirrorKeyMap
   'general.editorIndentType': GeneralEditorIndentType
   'general.editorIndentSize': GeneralEditorIndentSize
+  'general.editorFontSize': number
+  'general.editorFontFamily': string
 }
 
 export const codeMirrorEditorThemes = [

src/components/App.tsx

@@ -211,6 +211,9 @@ const App = () => {
 
     const boostHubTeamUpdateEventHandler = (event: BoostHubTeamUpdateEvent) => {
       const updatedTeam = event.detail.team
+      if (updatedTeam.id == null) {
+        return
+      }
       setGeneralStatus((previousGeneralStatus) => {
         const teamMap =
           previousGeneralStatus.boostHubTeams!.reduce((map, team) => {