diff --git a/web/components/comments-list.tsx b/web/components/comments-list.tsx index 2a467f6d..de4ea67f 100644 --- a/web/components/comments-list.tsx +++ b/web/components/comments-list.tsx @@ -65,7 +65,7 @@ function ProfileComment(props: { comment: Comment; className?: string }) { />{' '}

- + ) diff --git a/web/components/editor.tsx b/web/components/editor.tsx index 3bee8298..cef1aa36 100644 --- a/web/components/editor.tsx +++ b/web/components/editor.tsx @@ -3,7 +3,6 @@ import Placeholder from '@tiptap/extension-placeholder' import { useEditor, EditorContent, - FloatingMenu, JSONContent, Content, Editor, @@ -11,13 +10,11 @@ import { import StarterKit from '@tiptap/starter-kit' import { Image } from '@tiptap/extension-image' import { Link } from '@tiptap/extension-link' -import { Mention } from '@tiptap/extension-mention' import clsx from 'clsx' import { useEffect, useState } from 'react' import { Linkify } from './linkify' import { uploadImage } from 'web/lib/firebase/storage' import { useMutation } from 'react-query' -import { exhibitExts } from 'common/util/parse' import { FileUploadButton } from './file-upload-button' import { linkClass } from './site-link' import { useUsers } from 'web/hooks/use-users' @@ -31,6 +28,18 @@ import { Button } from './button' import { Row } from './layout/row' import { Spacer } from './layout/spacer' +const DisplayImage = Image.configure({ + HTMLAttributes: { + class: 'max-h-60', + }, +}) + +const DisplayLink = Link.configure({ + HTMLAttributes: { + class: clsx('no-underline !text-indigo-700', linkClass), + }, +}) + const proseClass = clsx( 'prose prose-p:my-0 prose-ul:my-0 prose-ol:my-0 prose-li:my-0 prose-blockquote:not-italic max-w-none prose-quoteless leading-relaxed', 'font-light prose-a:font-light prose-blockquote:font-light' @@ -64,15 +73,11 @@ export function useTextEditor(props: { Placeholder.configure({ placeholder, emptyEditorClass: - 'before:content-[attr(data-placeholder)] before:text-slate-500 before:float-left before:h-0', + 'before:content-[attr(data-placeholder)] before:text-slate-500 before:float-left before:h-0 cursor-text', }), CharacterCount.configure({ limit: max }), - Image, - Link.configure({ - HTMLAttributes: { - class: clsx('no-underline !text-indigo-700', linkClass), - }, - }), + simple ? DisplayImage : Image, + DisplayLink, DisplayMention.configure({ suggestion: mentionSuggestion(users), }), @@ -132,15 +137,7 @@ export function TextEditor(props: { <> {/* hide placeholder when focused */}
- {editor && ( - - Type *markdown* - - )} -
+
{/* Toolbar, with buttons for images and embeds */}
@@ -168,7 +165,14 @@ export function TextEditor(props: { Embed an iframe
-
+ {/* Spacer that also focuses editor on click */} +
+ editor?.chain().focus('end').createParagraphNear().run() + } + aria-hidden + /> {children}
@@ -258,14 +262,19 @@ const useUploadMutation = (editor: Editor | null) => } ) -function RichContent(props: { content: JSONContent | string }) { - const { content } = props +function RichContent(props: { + content: JSONContent | string + smallImage?: boolean +}) { + const { content, smallImage } = props const editor = useEditor({ editorProps: { attributes: { class: proseClass } }, extensions: [ - // replace tiptap's Mention with ours, to add style and link - ...exhibitExts.filter((ex) => ex.name !== Mention.name), + StarterKit, + smallImage ? DisplayImage : Image, + DisplayLink, DisplayMention, + Iframe, ], content, editable: false, @@ -276,13 +285,16 @@ function RichContent(props: { content: JSONContent | string }) { } // backwards compatibility: we used to store content as strings -export function Content(props: { content: JSONContent | string }) { +export function Content(props: { + content: JSONContent | string + smallImage?: boolean +}) { const { content } = props return typeof content === 'string' ? (
) : ( - + ) } diff --git a/web/components/feed/feed-comments.tsx b/web/components/feed/feed-comments.tsx index 8c84039e..d4ba98b6 100644 --- a/web/components/feed/feed-comments.tsx +++ b/web/components/feed/feed-comments.tsx @@ -254,7 +254,7 @@ export function FeedComment(props: { />
- +
@@ -394,8 +394,8 @@ export function CommentInput(props: { />
-
-
+
+
{mostRecentCommentableBet && (
{comments.map((comment) => ( - + ))}