Add prettier for codestyle and re-format everything (#1294)

src/components/editor-page/sidebar/delete-note-sidebar-entry.tsx

@@ -16,21 +16,23 @@ export const DeleteNoteSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ hi
 
   return (
     <Fragment>
-      <SidebarButton icon={ 'trash' } className={ className } hide={ hide } onClick={ () => setShowDialog(true) }>
-        <Trans i18nKey={ 'landing.history.menu.deleteNote' }/>
+      <SidebarButton icon={'trash'} className={className} hide={hide} onClick={() => setShowDialog(true)}>
+        <Trans i18nKey={'landing.history.menu.deleteNote'} />
       </SidebarButton>
       <DeletionModal
-        onConfirm={ () => setShowDialog(false) }
-        deletionButtonI18nKey={ 'editor.modal.deleteNote.button' }
-        show={ showDialog }
-        onHide={ () => setShowDialog(false) }
-        titleI18nKey={ 'editor.modal.deleteNote.title' }>
-        <h5><Trans i18nKey={ 'editor.modal.deleteNote.question' }/></h5>
+        onConfirm={() => setShowDialog(false)}
+        deletionButtonI18nKey={'editor.modal.deleteNote.button'}
+        show={showDialog}
+        onHide={() => setShowDialog(false)}
+        titleI18nKey={'editor.modal.deleteNote.title'}>
+        <h5>
+          <Trans i18nKey={'editor.modal.deleteNote.question'} />
+        </h5>
         <ul>
           <li> noteTitle</li>
         </ul>
         <h6>
-          <Trans i18nKey={ 'editor.modal.deleteNote.warning' }/>
+          <Trans i18nKey={'editor.modal.deleteNote.warning'} />
         </h6>
       </DeletionModal>
     </Fragment>

src/components/editor-page/sidebar/document-info-sidebar-entry.tsx

@@ -16,10 +16,10 @@ export const DocumentInfoSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({
 
   return (
     <Fragment>
-      <SidebarButton hide={ hide } className={ className } icon={ 'line-chart' } onClick={ () => setShowModal(true) }>
-        <Trans i18nKey={ 'editor.modal.documentInfo.title' }/>
+      <SidebarButton hide={hide} className={className} icon={'line-chart'} onClick={() => setShowModal(true)}>
+        <Trans i18nKey={'editor.modal.documentInfo.title'} />
       </SidebarButton>
-      <DocumentInfoModal show={ showModal } onHide={ () => setShowModal(false) }/>
+      <DocumentInfoModal show={showModal} onHide={() => setShowModal(false)} />
     </Fragment>
   )
 }

src/components/editor-page/sidebar/export-markdown-sidebar-entry.tsx

@@ -17,12 +17,12 @@ export const ExportMarkdownSidebarEntry: React.FC = () => {
   const markdownContent = useNoteMarkdownContent()
   const onClick = useCallback(() => {
     const sanitized = sanitize(store.getState().noteDetails.noteTitle)
-    download(markdownContent, `${ sanitized !== '' ? sanitized : t('editor.untitledNote') }.md`, 'text/markdown')
+    download(markdownContent, `${sanitized !== '' ? sanitized : t('editor.untitledNote')}.md`, 'text/markdown')
   }, [markdownContent, t])
 
   return (
-    <SidebarButton data-cy={ 'menu-export-markdown' } onClick={ onClick } icon={ 'file-text' }>
-      <Trans i18nKey={ 'editor.export.markdown-file' }/>
+    <SidebarButton data-cy={'menu-export-markdown'} onClick={onClick} icon={'file-text'}>
+      <Trans i18nKey={'editor.export.markdown-file'} />
     </SidebarButton>
   )
 }

src/components/editor-page/sidebar/export-menu-sidebar-menu.tsx

@@ -12,13 +12,12 @@ import { SidebarButton } from './sidebar-button'
 import { SidebarMenu } from './sidebar-menu'
 import { DocumentSidebarMenuSelection, SpecificSidebarMenuProps } from './types'
 
-export const ExportMenuSidebarMenu: React.FC<SpecificSidebarMenuProps> = (
-  {
-    className,
-    menuId,
-    onClick,
-    selectedMenuId
-  }) => {
+export const ExportMenuSidebarMenu: React.FC<SpecificSidebarMenuProps> = ({
+  className,
+  menuId,
+  onClick,
+  selectedMenuId
+}) => {
   useTranslation()
 
   const hide = selectedMenuId !== DocumentSidebarMenuSelection.NONE && selectedMenuId !== menuId
@@ -29,34 +28,31 @@ export const ExportMenuSidebarMenu: React.FC<SpecificSidebarMenuProps> = (
 
   return (
     <Fragment>
-      <SidebarButton data-cy={ 'menu-export' } hide={ hide } icon={ expand ? 'arrow-left' : 'cloud-download' }
-                     className={ className } onClick={ onClickHandler }>
-        <Trans i18nKey={ 'editor.documentBar.export' }/>
+      <SidebarButton
+        data-cy={'menu-export'}
+        hide={hide}
+        icon={expand ? 'arrow-left' : 'cloud-download'}
+        className={className}
+        onClick={onClickHandler}>
+        <Trans i18nKey={'editor.documentBar.export'} />
       </SidebarButton>
-      <SidebarMenu expand={ expand }>
-        <SidebarButton icon={ 'github' }>
-          Gist
-        </SidebarButton>
-        <SidebarButton icon={ 'gitlab' }>
-          Gitlab Snippet
-        </SidebarButton>
+      <SidebarMenu expand={expand}>
+        <SidebarButton icon={'github'}>Gist</SidebarButton>
+        <SidebarButton icon={'gitlab'}>Gitlab Snippet</SidebarButton>
 
-        <ExportMarkdownSidebarEntry/>
+        <ExportMarkdownSidebarEntry />
 
-        <SidebarButton icon={ 'file-code-o' }>
-          HTML
+        <SidebarButton icon={'file-code-o'}>HTML</SidebarButton>
+        <SidebarButton icon={'file-code-o'}>
+          <Trans i18nKey='editor.export.rawHtml' />
         </SidebarButton>
-        <SidebarButton icon={ 'file-code-o' }>
-          <Trans i18nKey='editor.export.rawHtml'/>
-        </SidebarButton>
-        <SidebarButton icon={ 'file-pdf-o' }>
-          <a className='small text-muted' dir={ 'auto' } href={ links.faq } target={ '_blank' }
-             rel='noopener noreferrer'>
-            <Trans i18nKey={ 'editor.export.pdf' }/>
+        <SidebarButton icon={'file-pdf-o'}>
+          <a className='small text-muted' dir={'auto'} href={links.faq} target={'_blank'} rel='noopener noreferrer'>
+            <Trans i18nKey={'editor.export.pdf'} />
             &nbsp;
-            <span className={ 'text-primary' }>
-                <Trans i18nKey={ 'common.why' }/>
-              </span>
+            <span className={'text-primary'}>
+              <Trans i18nKey={'common.why'} />
+            </span>
           </a>
         </SidebarButton>
       </SidebarMenu>

src/components/editor-page/sidebar/import-markdown-sidebar-entry.tsx

@@ -15,35 +15,42 @@ export const ImportMarkdownSidebarEntry: React.FC = () => {
   const markdownContent = useNoteMarkdownContent()
   useTranslation()
 
-  const onImportMarkdown = useCallback((file: File) => {
-    return new Promise<void>((resolve, reject) => {
-      const fileReader = new FileReader()
-      fileReader.addEventListener('load', () => {
-        const newContent = fileReader.result as string
-        setNoteMarkdownContent(markdownContent.length === 0 ? newContent : `${ markdownContent }\n${ newContent }`)
+  const onImportMarkdown = useCallback(
+    (file: File) => {
+      return new Promise<void>((resolve, reject) => {
+        const fileReader = new FileReader()
+        fileReader.addEventListener('load', () => {
+          const newContent = fileReader.result as string
+          setNoteMarkdownContent(markdownContent.length === 0 ? newContent : `${markdownContent}\n${newContent}`)
+        })
+        fileReader.addEventListener('loadend', () => {
+          resolve()
+        })
+        fileReader.addEventListener('error', (error) => {
+          reject(error)
+        })
+        fileReader.readAsText(file)
       })
-      fileReader.addEventListener('loadend', () => {
-        resolve()
-      })
-      fileReader.addEventListener('error', (error) => {
-        reject(error)
-      })
-      fileReader.readAsText(file)
-    })
-  }, [markdownContent])
+    },
+    [markdownContent]
+  )
 
-  const clickRef = useRef<(() => void)>()
+  const clickRef = useRef<() => void>()
   const buttonClick = useCallback(() => {
     clickRef.current?.()
   }, [])
 
   return (
     <Fragment>
-      <SidebarButton data-cy={ 'menu-import-markdown' } icon={ 'file-text-o' } onClick={ buttonClick }>
-        <Trans i18nKey={ 'editor.import.file' }/>
+      <SidebarButton data-cy={'menu-import-markdown'} icon={'file-text-o'} onClick={buttonClick}>
+        <Trans i18nKey={'editor.import.file'} />
       </SidebarButton>
-      <UploadInput onLoad={ onImportMarkdown } data-cy={ 'menu-import-markdown-input' }
-                   acceptedFiles={ '.md, text/markdown, text/plain' } onClickRef={ clickRef }/>
+      <UploadInput
+        onLoad={onImportMarkdown}
+        data-cy={'menu-import-markdown-input'}
+        acceptedFiles={'.md, text/markdown, text/plain'}
+        onClickRef={clickRef}
+      />
     </Fragment>
   )
 }

src/components/editor-page/sidebar/import-menu-sidebar-menu.tsx

@@ -11,14 +11,12 @@ import { SidebarButton } from './sidebar-button'
 import { SidebarMenu } from './sidebar-menu'
 import { DocumentSidebarMenuSelection, SpecificSidebarMenuProps } from './types'
 
-export const ImportMenuSidebarMenu: React.FC<SpecificSidebarMenuProps> = (
-  {
-    className,
-    menuId,
-    onClick,
-    selectedMenuId
-  }) => {
-
+export const ImportMenuSidebarMenu: React.FC<SpecificSidebarMenuProps> = ({
+  className,
+  menuId,
+  onClick,
+  selectedMenuId
+}) => {
   useTranslation()
 
   const hide = selectedMenuId !== DocumentSidebarMenuSelection.NONE && selectedMenuId !== menuId
@@ -29,21 +27,21 @@ export const ImportMenuSidebarMenu: React.FC<SpecificSidebarMenuProps> = (
 
   return (
     <Fragment>
-      <SidebarButton data-cy={ 'menu-import' } hide={ hide } icon={ expand ? 'arrow-left' : 'cloud-upload' }
-                     className={ className } onClick={ onClickHandler }>
-        <Trans i18nKey={ 'editor.documentBar.import' }/>
+      <SidebarButton
+        data-cy={'menu-import'}
+        hide={hide}
+        icon={expand ? 'arrow-left' : 'cloud-upload'}
+        className={className}
+        onClick={onClickHandler}>
+        <Trans i18nKey={'editor.documentBar.import'} />
       </SidebarButton>
-      <SidebarMenu expand={ expand }>
-        <SidebarButton icon={ 'github' }>
-          Gist
+      <SidebarMenu expand={expand}>
+        <SidebarButton icon={'github'}>Gist</SidebarButton>
+        <SidebarButton icon={'gitlab'}>Gitlab Snippet</SidebarButton>
+        <SidebarButton icon={'clipboard'}>
+          <Trans i18nKey={'editor.import.clipboard'} />
         </SidebarButton>
-        <SidebarButton icon={ 'gitlab' }>
-          Gitlab Snippet
-        </SidebarButton>
-        <SidebarButton icon={ 'clipboard' }>
-          <Trans i18nKey={ 'editor.import.clipboard' }/>
-        </SidebarButton>
-        <ImportMarkdownSidebarEntry/>
+        <ImportMarkdownSidebarEntry />
       </SidebarMenu>
     </Fragment>
   )

src/components/editor-page/sidebar/permissions-sidebar-entry.tsx

@@ -16,10 +16,10 @@ export const PermissionsSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ c
 
   return (
     <Fragment>
-      <SidebarButton hide={ hide } className={ className } icon={ 'lock' } onClick={ () => setShowModal(true) }>
-        <Trans i18nKey={ 'editor.modal.permissions.title' }/>
+      <SidebarButton hide={hide} className={className} icon={'lock'} onClick={() => setShowModal(true)}>
+        <Trans i18nKey={'editor.modal.permissions.title'} />
       </SidebarButton>
-      <PermissionModal show={ showModal } onHide={ () => setShowModal(false) }/>
+      <PermissionModal show={showModal} onHide={() => setShowModal(false)} />
     </Fragment>
   )
 }

src/components/editor-page/sidebar/pin-note-sidebar-entry.tsx

@@ -21,7 +21,7 @@ export const PinNoteSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ class
   const history = useSelector((state: ApplicationState) => state.history)
 
   const isPinned = useMemo(() => {
-    const entry = history.find(entry => entry.identifier === id)
+    const entry = history.find((entry) => entry.identifier === id)
     if (!entry) {
       return false
     }
@@ -29,15 +29,16 @@ export const PinNoteSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ class
   }, [id, history])
 
   const onPinClicked = useCallback(() => {
-    toggleHistoryEntryPinning(id).catch(
-      showErrorNotification(t('landing.history.error.updateEntry.text'))
-    )
+    toggleHistoryEntryPinning(id).catch(showErrorNotification(t('landing.history.error.updateEntry.text')))
   }, [id, t])
 
   return (
-    <SidebarButton icon={ 'thumb-tack' } hide={ hide } onClick={ onPinClicked }
-                   className={ `${ className ?? '' } ${ isPinned ? 'icon-highlighted' : '' }` }>
-      <Trans i18nKey={ isPinned ? 'editor.documentBar.pinnedToHistory' : 'editor.documentBar.pinNoteToHistory' }/>
+    <SidebarButton
+      icon={'thumb-tack'}
+      hide={hide}
+      onClick={onPinClicked}
+      className={`${className ?? ''} ${isPinned ? 'icon-highlighted' : ''}`}>
+      <Trans i18nKey={isPinned ? 'editor.documentBar.pinnedToHistory' : 'editor.documentBar.pinNoteToHistory'} />
     </SidebarButton>
   )
 }

src/components/editor-page/sidebar/revision-sidebar-entry.tsx

@@ -15,10 +15,10 @@ export const RevisionSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ clas
 
   return (
     <Fragment>
-      <SidebarButton hide={ hide } className={ className } icon={ 'history' } onClick={ () => setShowModal(true) }>
-        <Trans i18nKey={ 'editor.modal.revision.title' }/>
+      <SidebarButton hide={hide} className={className} icon={'history'} onClick={() => setShowModal(true)}>
+        <Trans i18nKey={'editor.modal.revision.title'} />
       </SidebarButton>
-      <RevisionModal show={ showModal } onHide={ () => setShowModal(false) }/>
+      <RevisionModal show={showModal} onHide={() => setShowModal(false)} />
     </Fragment>
   )
 }

src/components/editor-page/sidebar/share-sidebar-entry.tsx

@@ -16,10 +16,10 @@ export const ShareSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ classNa
 
   return (
     <Fragment>
-      <SidebarButton hide={ hide } className={ className } icon={ 'share' } onClick={ () => setShowModal(true) }>
-        <Trans i18nKey={ 'editor.modal.shareLink.title' }/>
+      <SidebarButton hide={hide} className={className} icon={'share'} onClick={() => setShowModal(true)}>
+        <Trans i18nKey={'editor.modal.shareLink.title'} />
       </SidebarButton>
-      <ShareModal show={ showModal } onHide={ () => setShowModal(false) }/>
+      <ShareModal show={showModal} onHide={() => setShowModal(false)} />
     </Fragment>
   )
 }

src/components/editor-page/sidebar/sidebar-button.tsx

@@ -12,18 +12,26 @@ import { SidebarEntryProps } from './types'
 
 export type SidebarEntryVariant = 'primary'
 
-export const SidebarButton: React.FC<SidebarEntryProps> = ({ children, icon, className, variant, buttonRef, hide, ...props }) => {
+export const SidebarButton: React.FC<SidebarEntryProps> = ({
+  children,
+  icon,
+  className,
+  variant,
+  buttonRef,
+  hide,
+  ...props
+}) => {
   return (
-    <button ref={ buttonRef }
-            className={ `sidebar-entry ${ hide ? 'hide' : '' } ${ variant ? `sidebar-entry-${ variant }` : '' } ${ className ?? '' }` } { ...props } >
-      <ShowIf condition={ !!icon }>
-        <span className={ 'sidebar-icon' }>
-          <ForkAwesomeIcon icon={ icon as IconName }/>
+    <button
+      ref={buttonRef}
+      className={`sidebar-entry ${hide ? 'hide' : ''} ${variant ? `sidebar-entry-${variant}` : ''} ${className ?? ''}`}
+      {...props}>
+      <ShowIf condition={!!icon}>
+        <span className={'sidebar-icon'}>
+          <ForkAwesomeIcon icon={icon as IconName} />
         </span>
       </ShowIf>
-      <span className={ 'sidebar-text' }>
-        { children }
-      </span>
+      <span className={'sidebar-text'}>{children}</span>
     </button>
   )
 }

src/components/editor-page/sidebar/sidebar-menu.tsx

@@ -9,10 +9,8 @@ import { SidebarMenuProps } from './types'
 
 export const SidebarMenu: React.FC<SidebarMenuProps> = ({ children, expand }) => {
   return (
-    <div className={ `sidebar-menu ${ expand ? 'show' : '' }` }>
-      <div className={ `d-flex flex-column` }>
-        { children }
-      </div>
+    <div className={`sidebar-menu ${expand ? 'show' : ''}`}>
+      <div className={`d-flex flex-column`}>{children}</div>
     </div>
   )
 }

src/components/editor-page/sidebar/sidebar.tsx

@@ -19,7 +19,6 @@ import { DocumentSidebarMenuSelection } from './types'
 import { UsersOnlineSidebarMenu } from './users-online-sidebar-menu/users-online-sidebar-menu'
 
 export const Sidebar: React.FC = () => {
-
   const sideBarRef = useRef<HTMLDivElement>(null)
   const [selectedMenu, setSelectedMenu] = useState<DocumentSidebarMenuSelection>(DocumentSidebarMenuSelection.NONE)
 
@@ -27,28 +26,40 @@ export const Sidebar: React.FC = () => {
     setSelectedMenu(DocumentSidebarMenuSelection.NONE)
   })
 
-  const toggleValue = useCallback((toggleValue: DocumentSidebarMenuSelection): void => {
-    const newValue = selectedMenu === toggleValue ? DocumentSidebarMenuSelection.NONE : toggleValue
-    setSelectedMenu(newValue)
-  }, [selectedMenu])
+  const toggleValue = useCallback(
+    (toggleValue: DocumentSidebarMenuSelection): void => {
+      const newValue = selectedMenu === toggleValue ? DocumentSidebarMenuSelection.NONE : toggleValue
+      setSelectedMenu(newValue)
+    },
+    [selectedMenu]
+  )
 
   const selectionIsNotNone = selectedMenu !== DocumentSidebarMenuSelection.NONE
 
   return (
-    <div className="slide-sidebar">
-      <div ref={ sideBarRef } className={ `sidebar-inner ${ selectionIsNotNone ? 'show' : '' }` }>
-        <UsersOnlineSidebarMenu menuId={ DocumentSidebarMenuSelection.USERS_ONLINE }
-                                selectedMenuId={ selectedMenu } onClick={ toggleValue }/>
-        <DocumentInfoSidebarEntry hide={ selectionIsNotNone }/>
-        <RevisionSidebarEntry hide={ selectionIsNotNone }/>
-        <PermissionsSidebarEntry hide={ selectionIsNotNone }/>
-        <ImportMenuSidebarMenu menuId={ DocumentSidebarMenuSelection.IMPORT }
-                               selectedMenuId={ selectedMenu } onClick={ toggleValue }/>
-        <ExportMenuSidebarMenu menuId={ DocumentSidebarMenuSelection.EXPORT }
-                               selectedMenuId={ selectedMenu } onClick={ toggleValue }/>
-        <ShareSidebarEntry hide={ selectionIsNotNone }/>
-        <DeleteNoteSidebarEntry hide={ selectionIsNotNone }/>
-        <PinNoteSidebarEntry hide={ selectionIsNotNone }/>
+    <div className='slide-sidebar'>
+      <div ref={sideBarRef} className={`sidebar-inner ${selectionIsNotNone ? 'show' : ''}`}>
+        <UsersOnlineSidebarMenu
+          menuId={DocumentSidebarMenuSelection.USERS_ONLINE}
+          selectedMenuId={selectedMenu}
+          onClick={toggleValue}
+        />
+        <DocumentInfoSidebarEntry hide={selectionIsNotNone} />
+        <RevisionSidebarEntry hide={selectionIsNotNone} />
+        <PermissionsSidebarEntry hide={selectionIsNotNone} />
+        <ImportMenuSidebarMenu
+          menuId={DocumentSidebarMenuSelection.IMPORT}
+          selectedMenuId={selectedMenu}
+          onClick={toggleValue}
+        />
+        <ExportMenuSidebarMenu
+          menuId={DocumentSidebarMenuSelection.EXPORT}
+          selectedMenuId={selectedMenu}
+          onClick={toggleValue}
+        />
+        <ShareSidebarEntry hide={selectionIsNotNone} />
+        <DeleteNoteSidebarEntry hide={selectionIsNotNone} />
+        <PinNoteSidebarEntry hide={selectionIsNotNone} />
       </div>
     </div>
   )

src/components/editor-page/sidebar/upload-input.tsx

@@ -41,7 +41,6 @@ export const UploadInput: React.FC<UploadInputProps> = ({ onLoad, acceptedFiles,
   })
 
   return (
-    <input data-cy={ props['data-cy'] } type='file' ref={ fileInputReference } className='d-none'
-           accept={ acceptedFiles }/>
+    <input data-cy={props['data-cy']} type='file' ref={fileInputReference} className='d-none' accept={acceptedFiles} />
   )
 }

src/components/editor-page/sidebar/users-online-sidebar-menu/active-indicator.tsx

@@ -13,11 +13,9 @@ export enum ActiveIndicatorStatus {
 }
 
 export interface ActiveIndicatorProps {
-  status: ActiveIndicatorStatus;
+  status: ActiveIndicatorStatus
 }
 
 export const ActiveIndicator: React.FC<ActiveIndicatorProps> = ({ status }) => {
-  return (
-    <span className={ `activeIndicator ${ status }` }/>
-  )
+  return <span className={`activeIndicator ${status}`} />
 }

src/components/editor-page/sidebar/users-online-sidebar-menu/user-line.tsx

@@ -10,20 +10,19 @@ import { ActiveIndicator, ActiveIndicatorStatus } from './active-indicator'
 import './user-line.scss'
 
 export interface UserLineProps {
-  name: string;
-  photo: string;
-  color: string;
-  status: ActiveIndicatorStatus;
+  name: string
+  photo: string
+  color: string
+  status: ActiveIndicatorStatus
 }
 
 export const UserLine: React.FC<UserLineProps> = ({ name, photo, color, status }) => {
   return (
-    <div className={ 'd-flex align-items-center h-100 w-100' }>
-      <div className='d-inline-flex align-items-bottom user-line-color-indicator' style={ { borderLeftColor: color } }/>
-      <UserAvatar photo={ photo } name={ name }
-                  additionalClasses={ 'flex-fill overflow-hidden px-2 text-nowrap w-100' }/>
-      <div className={ 'active-indicator-container' }>
-        <ActiveIndicator status={ status }/>
+    <div className={'d-flex align-items-center h-100 w-100'}>
+      <div className='d-inline-flex align-items-bottom user-line-color-indicator' style={{ borderLeftColor: color }} />
+      <UserAvatar photo={photo} name={name} additionalClasses={'flex-fill overflow-hidden px-2 text-nowrap w-100'} />
+      <div className={'active-indicator-container'}>
+        <ActiveIndicator status={status} />
       </div>
     </div>
   )

src/components/editor-page/sidebar/users-online-sidebar-menu/users-online-sidebar-menu.tsx

@@ -24,8 +24,8 @@ export const UsersOnlineSidebarMenu: React.FC<SpecificSidebarMenuProps> = ({
   useTranslation()
 
   useEffect(() => {
-    const value = `${ counter }`
-    buttonRef.current?.style.setProperty('--users-online', `"${ value }"`)
+    const value = `${counter}`
+    buttonRef.current?.style.setProperty('--users-online', `"${value}"`)
   }, [counter])
 
   const hide = selectedMenuId !== DocumentSidebarMenuSelection.NONE && selectedMenuId !== menuId
@@ -36,19 +36,26 @@ export const UsersOnlineSidebarMenu: React.FC<SpecificSidebarMenuProps> = ({
 
   return (
     <Fragment>
-      <SidebarButton hide={ hide } buttonRef={ buttonRef } onClick={ onClickHandler }
-                     icon={ expand ? 'arrow-left' : 'users' }
-                     variant={ 'primary' } className={ `online-entry ${ className ?? '' }` }>
-        <Trans i18nKey={ 'editor.onlineStatus.online' }/>
+      <SidebarButton
+        hide={hide}
+        buttonRef={buttonRef}
+        onClick={onClickHandler}
+        icon={expand ? 'arrow-left' : 'users'}
+        variant={'primary'}
+        className={`online-entry ${className ?? ''}`}>
+        <Trans i18nKey={'editor.onlineStatus.online'} />
       </SidebarButton>
-      <SidebarMenu expand={ expand }>
+      <SidebarMenu expand={expand}>
         <SidebarButton>
-          <UserLine name="Philip Molares" photo="/img/avatar.png" color="red"
-                    status={ ActiveIndicatorStatus.INACTIVE }/>
+          <UserLine name='Philip Molares' photo='/img/avatar.png' color='red' status={ActiveIndicatorStatus.INACTIVE} />
         </SidebarButton>
         <SidebarButton>
-          <UserLine name="Tilman Vatteroth" photo="/img/avatar.png" color="blue"
-                    status={ ActiveIndicatorStatus.ACTIVE }/>
+          <UserLine
+            name='Tilman Vatteroth'
+            photo='/img/avatar.png'
+            color='blue'
+            status={ActiveIndicatorStatus.ACTIVE}
+          />
         </SidebarButton>
       </SidebarMenu>
     </Fragment>