diff --git a/src/components/_shared/CommentEditor/CommentEditor.tsx b/src/components/_shared/CommentEditor/CommentEditor.tsx index 74cb9ad9..de857fc1 100644 --- a/src/components/_shared/CommentEditor/CommentEditor.tsx +++ b/src/components/_shared/CommentEditor/CommentEditor.tsx @@ -2,7 +2,7 @@ import styles from './styles/CommentEditor.module.scss' import './styles/ProseMirrorOverrides.scss' import { clsx } from 'clsx' import Button from '../Button' -import { createEffect, createMemo, onMount } from 'solid-js' +import { createEffect, onMount, Show } from 'solid-js' import { t } from '../../../utils/intl' //ProseMirror deps import { schema } from './schema' @@ -16,6 +16,8 @@ import { baseKeymap } from 'prosemirror-commands' import { customKeymap } from '../../EditorNew/prosemirror/plugins/customKeymap' import { placeholder } from '../../EditorNew/prosemirror/plugins/placeholder' import { undo, redo, history } from 'prosemirror-history' +import { useSession } from '../../../context/session' +import { showModal } from '../../../stores/ui' type Props = { initialValue: string @@ -31,6 +33,7 @@ const getHtml = (state: EditorState) => { } const CommentEditor = (props: Props) => { + const { session } = useSession() const editorElRef: { current: HTMLDivElement } = { current: null } const menuElRef: { current: HTMLDivElement } = { current: null } const editorViewRef: { current: EditorView } = { current: null } @@ -65,7 +68,9 @@ const CommentEditor = (props: Props) => { } createEffect(() => { - if (props.clear) clearEditor() + if (props.clear) { + clearEditor() + } }) return ( @@ -78,12 +83,28 @@ const CommentEditor = (props: Props) => {
(menuElRef.current = el)} />
-
{'"Cmd-Z": Undo, "Cmd-Y": Redo'}
+ +
+ {t('To write a comment, you must')}  + { + evt.preventDefault() + showModal('auth') + }} + > + {t('sign up or sign in')} + +
+
) } diff --git a/src/components/_shared/CommentEditor/styles/CommentEditor.module.scss b/src/components/_shared/CommentEditor/styles/CommentEditor.module.scss index ea33f29d..0b1f8353 100644 --- a/src/components/_shared/CommentEditor/styles/CommentEditor.module.scss +++ b/src/components/_shared/CommentEditor/styles/CommentEditor.module.scss @@ -30,3 +30,21 @@ margin: 12px 0; font-style: italic; } + +.signInMessage { + background: #f1f2f3; + border-radius: 8px; + padding: 16px; + text-align: center; + font-size: 20px; + + .link { + color: #2638d9; + cursor: pointer; + transition: 0.3s ease-in-out; + + &:hover { + text-decoration: unset; + } + } +}