feat(editor): show notification if user is not allowed to edit note

Co-authored-by: Erik Michelson <github@erik.michelson.eu>
Signed-off-by: Philip Molares <philip.molares@udo.edu>
Signed-off-by: Erik Michelson <github@erik.michelson.eu>

frontend/locales/en.json

@@ -234,6 +234,10 @@
       "you": "(You)"
     },
     "error": {
+      "noPermission": {
+        "title": "No edit permission",
+        "description": "You don't have permission to edit this note. Please login and try again"
+      },
       "locked": {
         "title": "This note is locked",
         "description": "Sorry, only the owner can edit this note."

frontend/src/components/editor-page/editor-pane/editor-pane.tsx

@@ -42,7 +42,9 @@ import { languages } from '@codemirror/language-data'
 import { lintGutter } from '@codemirror/lint'
 import { oneDark } from '@codemirror/theme-one-dark'
 import ReactCodeMirror from '@uiw/react-codemirror'
-import React, { useEffect, useMemo } from 'react'
+import React, { useCallback, useEffect, useMemo } from 'react'
+import { useUiNotifications } from '../../notifications/ui-notification-boundary'
+import { Lock as IconLock } from 'react-bootstrap-icons'
 
 export type EditorPaneProps = ScrollProps
 
@@ -56,6 +58,7 @@ export type EditorPaneProps = ScrollProps
  * @external {ReactCodeMirror} https://npmjs.com/@uiw/react-codemirror
  */
 export const EditorPane: React.FC<EditorPaneProps> = ({ scrollState, onScroll, onMakeScrollSource }) => {
+  const { dispatchUiNotification } = useUiNotifications()
   useApplyScrollState(scrollState)
 
   const messageTransporter = useRealtimeConnection()
@@ -144,11 +147,21 @@ export const EditorPane: React.FC<EditorPaneProps> = ({ scrollState, onScroll, o
   const translateOptions = useMemo(() => ({ host: editorOrigin }), [editorOrigin])
   const placeholderText = useTranslatedText('editor.placeholder', translateOptions)
 
+  const userMayEdit = useMayEdit()
+  const verifyUserIsAllowedToType = useCallback(() => {
+    if (!userMayEdit) {
+      dispatchUiNotification('editor.error.noPermission.title', 'editor.error.noPermission.description', {
+        icon: IconLock
+      })
+    }
+  }, [dispatchUiNotification, userMayEdit])
+
   return (
     <div
       className={`d-flex flex-column h-100 position-relative`}
       onTouchStart={onMakeScrollSource}
       onMouseEnter={onMakeScrollSource}
+      onKeyDown={verifyUserIsAllowedToType}
       {...cypressId('editor-pane')}
       {...cypressAttribute('editor-ready', String(updateViewContextExtension !== null && isSynced && mayEdit))}>
       <MaxLengthWarning />