Adjust editor config (#976)

* Adjust editor config Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> Co-authored-by: Erik Michelson <github@erik.michelson.eu>
2025-06-04 00:48:51 -04:00 · 2021-02-03 22:13:04 +01:00 · 2021-02-03 22:13:04 +01:00 · e12dc523f8
commit e12dc523f8
parent 0180c75e55
301 changed files with 4393 additions and 3741 deletions
--- a/src/components/editor-page/sidebar/delete-note-sidebar-entry.tsx
+++ b/src/components/editor-page/sidebar/delete-note-sidebar-entry.tsx
@ -16,21 +16,21 @@ 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>
--- a/src/components/editor-page/sidebar/document-info-sidebar-entry.tsx
+++ b/src/components/editor-page/sidebar/document-info-sidebar-entry.tsx
@ -10,16 +10,16 @@ import { DocumentInfoModal } from '../document-bar/document-info/document-info-m
 import { SidebarButton } from './sidebar-button'
 import { SpecificSidebarEntryProps } from './types'

-export const DocumentInfoSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({className, hide}) => {
+export const DocumentInfoSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ className, hide }) => {
  const [showModal, setShowModal] = useState(false)
  useTranslation()

  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>
  )
 }
--- a/src/components/editor-page/sidebar/export-markdown-sidebar-entry.tsx
+++ b/src/components/editor-page/sidebar/export-markdown-sidebar-entry.tsx
@ -19,8 +19,8 @@ export const ExportMarkdownSidebarEntry: React.FC = () => {
  }, [markdownContent])

  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>
  )
 }
--- a/src/components/editor-page/sidebar/export-menu-sidebar-menu.tsx
+++ b/src/components/editor-page/sidebar/export-menu-sidebar-menu.tsx
@ -29,32 +29,33 @@ 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"}>
+      <SidebarMenu expand={ expand }>
+        <SidebarButton icon={ 'github' }>
          Gist
        </SidebarButton>
-        <SidebarButton icon={"gitlab"}>
+        <SidebarButton icon={ 'gitlab' }>
          Gitlab Snippet
        </SidebarButton>

        <ExportMarkdownSidebarEntry/>

-        <SidebarButton icon={"file-code-o"}>
+        <SidebarButton icon={ 'file-code-o' }>
          HTML
        </SidebarButton>
-        <SidebarButton icon={"file-code-o"}>
+        <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 className={ 'text-primary' }>
+                <Trans i18nKey={ 'common.why' }/>
              </span>
          </a>
        </SidebarButton>
--- a/src/components/editor-page/sidebar/import-markdown-sidebar-entry.tsx
+++ b/src/components/editor-page/sidebar/import-markdown-sidebar-entry.tsx
@ -20,7 +20,7 @@ export const ImportMarkdownSidebarEntry: React.FC = () => {
      const fileReader = new FileReader()
      fileReader.addEventListener('load', () => {
        const newContent = fileReader.result as string
-        setNoteMarkdownContent(markdownContent.length === 0 ? newContent : `${markdownContent}\n${newContent}`)
+        setNoteMarkdownContent(markdownContent.length === 0 ? newContent : `${ markdownContent }\n${ newContent }`)
      })
      fileReader.addEventListener('loadend', () => {
        resolve()
@ -39,11 +39,11 @@ export const ImportMarkdownSidebarEntry: React.FC = () => {

  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>
  )
 }
--- a/src/components/editor-page/sidebar/import-menu-sidebar-menu.tsx
+++ b/src/components/editor-page/sidebar/import-menu-sidebar-menu.tsx
@ -29,19 +29,19 @@ 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"}>
+      <SidebarMenu expand={ expand }>
+        <SidebarButton icon={ 'github' }>
          Gist
        </SidebarButton>
-        <SidebarButton icon={"gitlab"}>
+        <SidebarButton icon={ 'gitlab' }>
          Gitlab Snippet
        </SidebarButton>
-        <SidebarButton icon={"clipboard"}>
-          <Trans i18nKey={'editor.import.clipboard'}/>
+        <SidebarButton icon={ 'clipboard' }>
+          <Trans i18nKey={ 'editor.import.clipboard' }/>
        </SidebarButton>
        <ImportMarkdownSidebarEntry/>
      </SidebarMenu>
--- a/src/components/editor-page/sidebar/permissions-sidebar-entry.tsx
+++ b/src/components/editor-page/sidebar/permissions-sidebar-entry.tsx
@ -10,16 +10,16 @@ import { PermissionModal } from '../document-bar/permissions/permission-modal'
 import { SidebarButton } from './sidebar-button'
 import { SpecificSidebarEntryProps } from './types'

-export const PermissionsSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({className, hide}) => {
+export const PermissionsSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ className, hide }) => {
  const [showModal, setShowModal] = useState(false)
  useTranslation()

  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>
  )
 }
--- a/src/components/editor-page/sidebar/pin-note-sidebar-entry.tsx
+++ b/src/components/editor-page/sidebar/pin-note-sidebar-entry.tsx
@ -16,8 +16,8 @@ export const PinNoteSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ class
  const i18nKey = isPinned ? 'editor.documentBar.pinNoteToHistory' : 'editor.documentBar.pinnedToHistory'

  return (
-    <SidebarButton icon={'thumb-tack'} className={className} hide={hide}>
-      <Trans i18nKey={i18nKey}/>
+    <SidebarButton icon={ 'thumb-tack' } className={ className } hide={ hide }>
+      <Trans i18nKey={ i18nKey }/>
    </SidebarButton>
  )
 }
--- a/src/components/editor-page/sidebar/revision-sidebar-entry.tsx
+++ b/src/components/editor-page/sidebar/revision-sidebar-entry.tsx
@ -10,15 +10,15 @@ import { RevisionModal } from '../document-bar/revisions/revision-modal'
 import { SidebarButton } from './sidebar-button'
 import { SpecificSidebarEntryProps } from './types'

-export const RevisionSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({className, hide}) => {
+export const RevisionSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ className, hide }) => {
  const [showModal, setShowModal] = useState(false)

  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>
  )
 }
--- a/src/components/editor-page/sidebar/share-sidebar-entry.tsx
+++ b/src/components/editor-page/sidebar/share-sidebar-entry.tsx
@ -10,16 +10,16 @@ import { ShareModal } from '../document-bar/share/share-modal'
 import { SidebarButton } from './sidebar-button'
 import { SpecificSidebarEntryProps } from './types'

-export const ShareSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({className, hide}) => {
+export const ShareSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ className, hide }) => {
  const [showModal, setShowModal] = useState(false)
  useTranslation()

  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>
  )
 }
--- a/src/components/editor-page/sidebar/sidebar-button.tsx
+++ b/src/components/editor-page/sidebar/sidebar-button.tsx
@ -10,19 +10,19 @@ import { IconName } from '../../common/fork-awesome/types'
 import { ShowIf } from '../../common/show-if/show-if'
 import { SidebarEntryProps } from './types'

-export type SidebarEntryVariant = "primary"
+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 className={ 'sidebar-text' }>
+        { children }
      </span>
    </button>
  )
--- a/src/components/editor-page/sidebar/sidebar-menu.tsx
+++ b/src/components/editor-page/sidebar/sidebar-menu.tsx
@ -7,12 +7,12 @@
 import React from 'react'
 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>
+export const SidebarMenu: React.FC<SidebarMenuProps> = ({ children, expand }) => {
+  return (
+    <div className={ `sidebar-menu ${ expand ? 'show' : '' }` }>
+      <div className={ `d-flex flex-column` }>
+        { children }
      </div>
-    );
+    </div>
+  )
 }
--- a/src/components/editor-page/sidebar/sidebar.tsx
+++ b/src/components/editor-page/sidebar/sidebar.tsx
@ -14,7 +14,7 @@ import { PermissionsSidebarEntry } from './permissions-sidebar-entry'
 import { PinNoteSidebarEntry } from './pin-note-sidebar-entry'
 import { RevisionSidebarEntry } from './revision-sidebar-entry'
 import { ShareSidebarEntry } from './share-sidebar-entry'
-import "./style/theme.scss"
+import './style/theme.scss'
 import { DocumentSidebarMenuSelection } from './types'
 import { UsersOnlineSidebarMenu } from './users-online-sidebar-menu/users-online-sidebar-menu'

@ -36,19 +36,19 @@ export const Sidebar: React.FC = () => {

  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 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>
  )
--- a/src/components/editor-page/sidebar/style/colors.scss
+++ b/src/components/editor-page/sidebar/style/colors.scss
@ -7,7 +7,7 @@
 .slide-sidebar {
  background: $body-bg;

-  .sidebar-menu>div {
+  .sidebar-menu > div {
    background: $sidebar-menu-bg;
    box-shadow: inset 0 7px 7px -6px $sidebar-menu-shadow;
  }
--- a/src/components/editor-page/sidebar/types.ts
+++ b/src/components/editor-page/sidebar/types.ts
@ -21,7 +21,7 @@ export interface SidebarEntryProps {
  hide?: boolean
  className?: string
  onClick?: () => void
-  "data-cy"?: string
+  'data-cy'?: string
 }

 export interface SidebarMenuProps {
--- a/src/components/editor-page/sidebar/upload-input.tsx
+++ b/src/components/editor-page/sidebar/upload-input.tsx
@ -10,7 +10,7 @@ export interface UploadInputProps {
  onLoad: (file: File) => Promise<void>
  acceptedFiles: string
  onClickRef: MutableRefObject<(() => void) | undefined>
-  "data-cy"?: string
+  'data-cy'?: string
 }

 export const UploadInput: React.FC<UploadInputProps> = ({ onLoad, acceptedFiles, onClickRef, ...props }) => {
@ -25,11 +25,13 @@ export const UploadInput: React.FC<UploadInputProps> = ({ onLoad, acceptedFiles,
        return
      }
      const file = fileInput.files[0]
-      onLoad(file).then(() => {
-        fileInput.value = ''
-      }).catch((error) => {
-        console.error(error)
-      })
+      onLoad(file)
+        .then(() => {
+          fileInput.value = ''
+        })
+        .catch((error) => {
+          console.error(error)
+        })
    })
    fileInput.click()
  }, [onLoad])
@ -39,6 +41,7 @@ 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 }/>
  )
 }
--- a/src/components/editor-page/sidebar/users-online-sidebar-menu/active-indicator.tsx
+++ b/src/components/editor-page/sidebar/users-online-sidebar-menu/active-indicator.tsx
@ -18,6 +18,6 @@ export interface ActiveIndicatorProps {

 export const ActiveIndicator: React.FC<ActiveIndicatorProps> = ({ status }) => {
  return (
-    <span className={`activeIndicator ${status}`}/>
+    <span className={ `activeIndicator ${ status }` }/>
  )
 }
--- a/src/components/editor-page/sidebar/users-online-sidebar-menu/user-line.tsx
+++ b/src/components/editor-page/sidebar/users-online-sidebar-menu/user-line.tsx
@ -18,11 +18,12 @@ export interface UserLineProps {

 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>
  )
--- a/src/components/editor-page/sidebar/users-online-sidebar-menu/users-online-sidebar-menu.tsx
+++ b/src/components/editor-page/sidebar/users-online-sidebar-menu/users-online-sidebar-menu.tsx
@ -14,18 +14,18 @@ import './online-counter.scss'
 import { UserLine } from './user-line'

 export const UsersOnlineSidebarMenu: React.FC<SpecificSidebarMenuProps> = ({
-                                                                             className,
-                                                                             menuId,
-                                                                             onClick,
-                                                                             selectedMenuId
-                                                                           }) => {
+  className,
+  menuId,
+  onClick,
+  selectedMenuId
+}) => {
  const buttonRef = useRef<HTMLButtonElement>(null)
  const [counter] = useState(2)
  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,16 +36,19 @@ 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>