antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2026-03-01 12:44:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

update tiptap to v3

Browse Source
This commit is contained in:
Anton Tranelis 2025-10-09 10:36:42 +02:00
parent 25267224c9
commit 69923cb507
4 changed files with 2095 additions and 1311 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3353
lib/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

22
lib/package.json
View File

@ -102,16 +102,16 @@
"dependencies": {
"@heroicons/react": "^2.0.17",
"@tanstack/react-query": "^5.17.8",
"@tiptap/core": "^2.14.0",
"@tiptap/extension-bubble-menu": "^2.14.0",
"@tiptap/extension-color": "^2.12.0",
"@tiptap/extension-image": "^2.14.0",
"@tiptap/extension-link": "^2.14.0",
"@tiptap/extension-placeholder": "^2.14.0",
"@tiptap/extension-youtube": "^2.12.0",
"@tiptap/pm": "^2.12.0",
"@tiptap/react": "^2.12.0",
"@tiptap/starter-kit": "^2.12.0",
"@tiptap/core": "^3.6.5",
"@tiptap/extension-bubble-menu": "^3.6.5",
"@tiptap/extension-color": "^3.6.5",
"@tiptap/extension-image": "^3.6.5",
"@tiptap/extension-link": "^3.6.5",
"@tiptap/extension-placeholder": "^3.6.5",
"@tiptap/extension-youtube": "^3.6.5",
"@tiptap/pm": "^3.6.5",
"@tiptap/react": "^3.6.5",
"@tiptap/starter-kit": "^3.6.5",
"axios": "^1.6.5",
"browser-image-compression": "^2.0.2",
"classnames": "^2.5.1",
@ -132,7 +132,7 @@
"react-router-dom": "^6.23.0",
"react-toastify": "^9.1.3",
"remark-breaks": "^4.0.0",
"tiptap-markdown": "^0.8.10",
"tiptap-markdown": "^0.9.0",
"yet-another-react-lightbox": "^3.21.7"
},
"imports": {

2
lib/rollup.config.js
View File

@ -48,6 +48,8 @@ export default [
/node_modules\/markdown-it-task-lists/,
/node_modules\/classnames/,
/node_modules\/react-qr-code/,
/node_modules\/use-sync-external-store/,
/node_modules\/fast-deep-equal/,
],
requireReturnsDefault: 'auto',
}),

29
lib/src/Components/Input/RichTextEditor.tsx
View File

@ -1,6 +1,3 @@
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
/* eslint-disable @typescript-eslint/no-unsafe-call */
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
import { Color } from '@tiptap/extension-color'
import { Image } from '@tiptap/extension-image'
import { Link } from '@tiptap/extension-link'
@ -13,6 +10,8 @@ import { Markdown } from 'tiptap-markdown'
import { InputLabel } from './InputLabel'
import { TextEditorMenu } from './TextEditorMenu'
import type { MarkdownStorage } from 'tiptap-markdown'
interface RichTextEditorProps {
labelTitle?: string
labelStyle?: string
@ -23,6 +22,12 @@ interface RichTextEditorProps {
updateFormValue?: (value: string) => void
}
declare module '@tiptap/core' {
interface Storage {
markdown: MarkdownStorage
}
}
/**
* @category Input
*/
@ -35,10 +40,10 @@ export function RichTextEditor({
updateFormValue,
}: RichTextEditorProps) {
const handleChange = () => {
let newValue: string | undefined = editor?.storage.markdown.getMarkdown()
let newValue: string | undefined = editor.storage.markdown.getMarkdown()
const regex = /!\[.*?\]\(.*?\)/g
newValue = newValue?.replace(regex, (match: string) => match + '\n\n')
newValue = newValue.replace(regex, (match: string) => match + '\n\n')
if (updateFormValue && newValue) {
updateFormValue(newValue)
}
@ -79,8 +84,8 @@ export function RichTextEditor({
})
useEffect(() => {
if (editor?.storage.markdown.getMarkdown() === '' || !editor?.storage.markdown.getMarkdown()) {
editor?.commands.setContent(defaultValue)
if (editor.storage.markdown.getMarkdown() === '' || !editor.storage.markdown.getMarkdown()) {
editor.commands.setContent(defaultValue)
}
}, [defaultValue, editor])
@ -92,12 +97,10 @@ export function RichTextEditor({
<div
className={`editor-wrapper tw:border-base-content/20 tw:rounded-box tw:border tw:flex tw:flex-col tw:flex-1 tw:min-h-0`}
>
{editor ? (
<>
{showMenu ? <TextEditorMenu editor={editor} /> : null}
<EditorContent editor={editor} />
</>
) : null}
<>
{showMenu ? <TextEditorMenu editor={editor} /> : null}
<EditorContent editor={editor} />
</>
</div>
</div>
)