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 1be17e4e..04a8e761 100644 --- a/web/components/editor.tsx +++ b/web/components/editor.tsx @@ -11,13 +11,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 +29,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' @@ -67,12 +77,8 @@ export function useTextEditor(props: { '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), }), @@ -265,14 +271,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, @@ -283,13 +294,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 ffd49cd5..d4ba98b6 100644 --- a/web/components/feed/feed-comments.tsx +++ b/web/components/feed/feed-comments.tsx @@ -254,7 +254,7 @@ export function FeedComment(props: { />
- +
diff --git a/web/components/groups/group-chat.tsx b/web/components/groups/group-chat.tsx index 2d25351a..d872c980 100644 --- a/web/components/groups/group-chat.tsx +++ b/web/components/groups/group-chat.tsx @@ -338,7 +338,7 @@ const GroupMessage = memo(function GroupMessage_(props: {
{comments.map((comment) => ( - + ))}