diff --git a/frontend/locales/en.json b/frontend/locales/en.json index 56081f218..b584bd4af 100644 --- a/frontend/locales/en.json +++ b/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." diff --git a/frontend/src/components/editor-page/editor-pane/editor-pane.tsx b/frontend/src/components/editor-page/editor-pane/editor-pane.tsx index eea665e24..44bf89fac 100644 --- a/frontend/src/components/editor-page/editor-pane/editor-pane.tsx +++ b/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 = ({ scrollState, onScroll, onMakeScrollSource }) => { + const { dispatchUiNotification } = useUiNotifications() useApplyScrollState(scrollState) const messageTransporter = useRealtimeConnection() @@ -144,11 +147,21 @@ export const EditorPane: React.FC = ({ 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 (