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) => (
-
+
))}