From 467fa6262eecf0ee2ac6eff35baba37228303451 Mon Sep 17 00:00:00 2001 From: Anton Tranelis Date: Fri, 6 Jun 2025 16:28:27 +0200 Subject: [PATCH] fixed flex layout --- package-lock.json | 15 ++ package.json | 1 + src/Components/Input/RichTextEditor.tsx | 130 ++++++++---------- src/Components/Input/TextEditorMenu.tsx | 74 +++++----- .../Profile/Subcomponents/ContactInfoForm.tsx | 2 +- .../Subcomponents/GroupSubheaderForm.tsx | 2 +- .../Profile/Subcomponents/ProfileTextForm.tsx | 7 +- src/Components/Profile/Templates/FlexForm.tsx | 2 +- src/Components/Profile/Templates/TabsForm.tsx | 4 +- src/assets/css/tiptap.css | 13 +- 10 files changed, 129 insertions(+), 121 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5f3d5fcf..983941f6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@tanstack/react-query": "^5.17.8", "@tiptap/extension-color": "^2.12.0", "@tiptap/extension-image": "^2.12.0", + "@tiptap/extension-placeholder": "^2.14.0", "@tiptap/extension-youtube": "^2.12.0", "@tiptap/pm": "^2.12.0", "@tiptap/react": "^2.12.0", @@ -2656,6 +2657,20 @@ "@tiptap/core": "^2.7.0" } }, + "node_modules/@tiptap/extension-placeholder": { + "version": "2.14.0", + "resolved": "https://registry.npmjs.org/@tiptap/extension-placeholder/-/extension-placeholder-2.14.0.tgz", + "integrity": "sha512-xzfjHvuukbch4i5O/5uyS2K2QgNEaMKi6e6GExTTgVwnFjKfJmgTqee33tt5JCqSItBvtSZlU3SX/vpiaIof+w==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.7.0", + "@tiptap/pm": "^2.7.0" + } + }, "node_modules/@tiptap/extension-strike": { "version": "2.12.0", "resolved": "https://registry.npmjs.org/@tiptap/extension-strike/-/extension-strike-2.12.0.tgz", diff --git a/package.json b/package.json index 257e659b..1d58f3c0 100644 --- a/package.json +++ b/package.json @@ -101,6 +101,7 @@ "@tanstack/react-query": "^5.17.8", "@tiptap/extension-color": "^2.12.0", "@tiptap/extension-image": "^2.12.0", + "@tiptap/extension-placeholder": "^2.14.0", "@tiptap/extension-youtube": "^2.12.0", "@tiptap/pm": "^2.12.0", "@tiptap/react": "^2.12.0", diff --git a/src/Components/Input/RichTextEditor.tsx b/src/Components/Input/RichTextEditor.tsx index 727f7679..f3890625 100644 --- a/src/Components/Input/RichTextEditor.tsx +++ b/src/Components/Input/RichTextEditor.tsx @@ -1,44 +1,18 @@ -import Color from '@tiptap/extension-color' -import Image from '@tiptap/extension-image' -import ListItem from '@tiptap/extension-list-item' -import TextStyle from '@tiptap/extension-text-style' -import Youtube from '@tiptap/extension-youtube' -import { EditorProvider } from '@tiptap/react' -import StarterKit from '@tiptap/starter-kit' -import { useEffect, useState } from 'react' +import { Color } from '@tiptap/extension-color' +import { Image } from '@tiptap/extension-image' +import { Placeholder } from '@tiptap/extension-placeholder' +import { Youtube } from '@tiptap/extension-youtube' +import { EditorContent, useEditor } from '@tiptap/react' +import { StarterKit } from '@tiptap/starter-kit' +import { useEffect } from 'react' import { Markdown } from 'tiptap-markdown' import { TextEditorMenu } from './TextEditorMenu' -import type { EditorEvents } from '@tiptap/react' - -const extensions = [ - Color.configure({ types: [TextStyle.name, ListItem.name] }), - // TextStyle.configure({ types: [ListItem.name] }), - StarterKit.configure({ - bulletList: { - keepMarks: true, - keepAttributes: false, // TODO : Making this as `false` becase marks are not preserved when I try to preserve attrs, awaiting a bit of help - }, - orderedList: { - keepMarks: true, - keepAttributes: false, // TODO : Making this as `false` becase marks are not preserved when I try to preserve attrs, awaiting a bit of help - }, - }), - Markdown, - Image, - Youtube.configure({ - controls: false, - nocookie: true, - width: 100, - }), -] - -interface TextAreaProps { +interface RichTextEditorProps { labelTitle?: string labelStyle?: string containerStyle?: string - dataField?: string inputStyle?: string defaultValue: string placeholder?: string @@ -52,48 +26,67 @@ interface TextAreaProps { */ export function RichTextEditor({ labelTitle, - dataField, labelStyle, containerStyle, - inputStyle, defaultValue, placeholder, required = true, updateFormValue, -}: TextAreaProps) { - // const ref = useRef(null) - const [inputValue, setInputValue] = useState(defaultValue) +}: RichTextEditorProps) { + console.log(placeholder, required) - useEffect(() => { - setInputValue(defaultValue) - }, [defaultValue]) - - console.log( - labelTitle, - dataField, - labelStyle, - containerStyle, - inputStyle, - defaultValue, - placeholder, - required, - updateFormValue, - ) - - const handleChange = (props: EditorEvents['update']) => { - const newValue = props.editor.storage.markdown.getMarkdown() - setInputValue(newValue) - if (updateFormValue) { + const handleChange = () => { + const newValue: string | undefined = editor?.storage.markdown.getMarkdown() + if (updateFormValue && newValue) { updateFormValue(newValue) } } + const editor = useEditor({ + extensions: [ + Color.configure({ types: ['textStyle', 'listItem'] }), + StarterKit.configure({ + bulletList: { + keepMarks: true, + keepAttributes: false, + }, + orderedList: { + keepMarks: true, + keepAttributes: false, + }, + }), + Markdown, + Image, + Youtube.configure({ + controls: false, + nocookie: true, + }), + Placeholder.configure({ + placeholder, + emptyEditorClass: 'is-editor-empty', + }), + ], + content: defaultValue, + onUpdate: handleChange, + editorProps: { + attributes: { + class: `tw:h-full tw:max-h-full tw:p-2 tw:overflow-y-auto`, + }, + }, + }) + + useEffect(() => { + if (editor?.storage.markdown.getMarkdown() === '' || !editor?.storage.markdown.getMarkdown()) { + editor?.commands.setContent(defaultValue) + } + }, [defaultValue, editor]) + return (
{labelTitle ? ( -
) diff --git a/src/Components/Input/TextEditorMenu.tsx b/src/Components/Input/TextEditorMenu.tsx index 242b4573..ff1059b8 100644 --- a/src/Components/Input/TextEditorMenu.tsx +++ b/src/Components/Input/TextEditorMenu.tsx @@ -6,16 +6,12 @@ import H3Icon from '@heroicons/react/24/solid/H3Icon' import ItalicIcon from '@heroicons/react/24/solid/ItalicIcon' import ListBulletIcon from '@heroicons/react/24/solid/ListBulletIcon' import NumberedListIcon from '@heroicons/react/24/solid/NumberedListIcon' -import { useCurrentEditor, useEditorState } from '@tiptap/react' +import { Editor, useEditorState } from '@tiptap/react' import { FaQuoteLeft } from 'react-icons/fa6' import { MdUndo, MdRedo, MdHorizontalRule } from 'react-icons/md' -export const TextEditorMenu = () => { - const { editor } = useCurrentEditor() +export const TextEditorMenu = ({ editor }: { editor: Editor }) => { - if (!editor) { - return null - } const editorState = useEditorState({ editor, @@ -63,112 +59,112 @@ export const TextEditorMenu = () => { <> {/**
diff --git a/src/Components/Profile/Subcomponents/ContactInfoForm.tsx b/src/Components/Profile/Subcomponents/ContactInfoForm.tsx index 20571582..7b5e3bed 100644 --- a/src/Components/Profile/Subcomponents/ContactInfoForm.tsx +++ b/src/Components/Profile/Subcomponents/ContactInfoForm.tsx @@ -12,7 +12,7 @@ export const ContactInfoForm = ({ setState: React.Dispatch> }) => { return ( -
+