3f30becb93
Move state of editor back up to parent We have to do this later anyways to allow parent to edit
65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
import CharacterCount from '@tiptap/extension-character-count'
|
|
import Placeholder from '@tiptap/extension-placeholder'
|
|
import { useEditor, EditorContent, JSONContent, Content } from '@tiptap/react'
|
|
import StarterKit from '@tiptap/starter-kit'
|
|
import clsx from 'clsx'
|
|
import { useEffect } from 'react'
|
|
import { Linkify } from './linkify'
|
|
|
|
const LINE_HEIGHT = 2
|
|
|
|
const proseClass = 'prose prose-sm prose-p:my-0 prose-li:my-0 max-w-none'
|
|
|
|
export function useTextEditor(props: {
|
|
rows?: number
|
|
placeholder?: string
|
|
max?: number
|
|
defaultValue?: Content
|
|
disabled?: boolean
|
|
}) {
|
|
const { rows, placeholder, max, defaultValue = '', disabled } = props
|
|
|
|
const rowsClass = rows && `box-content min-h-[${LINE_HEIGHT * rows}em]`
|
|
|
|
const editor = useEditor({
|
|
editorProps: {
|
|
attributes: {
|
|
class: clsx(proseClass, rowsClass, 'textarea textarea-bordered'),
|
|
},
|
|
},
|
|
extensions: [
|
|
StarterKit,
|
|
Placeholder.configure({ placeholder }),
|
|
CharacterCount.configure({ limit: max }),
|
|
],
|
|
content: defaultValue,
|
|
})
|
|
|
|
useEffect(() => {
|
|
editor?.setEditable(!disabled)
|
|
}, [editor, disabled])
|
|
|
|
return editor
|
|
}
|
|
|
|
function RichContent(props: { content: JSONContent }) {
|
|
const { content } = props
|
|
const editor = useEditor({
|
|
editorProps: { attributes: { class: proseClass } },
|
|
extensions: [StarterKit],
|
|
content,
|
|
editable: false,
|
|
})
|
|
return <EditorContent editor={editor} />
|
|
}
|
|
|
|
// backwards compatibility: we used to store content as strings
|
|
export function Content(props: { content: JSONContent | string }) {
|
|
const { content } = props
|
|
return typeof content === 'string' ? (
|
|
<Linkify text={content} />
|
|
) : (
|
|
<RichContent content={content} />
|
|
)
|
|
}
|