flex layout optimizations, text editor fine tuning and markdown rendering

package-lock.json

@@ -11,6 +11,7 @@
       "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",
@@ -2373,9 +2374,9 @@
       }
     },
     "node_modules/@tiptap/core": {
-      "version": "2.12.0",
+      "version": "2.14.0",
-      "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.12.0.tgz",
+      "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.14.0.tgz",
-      "integrity": "sha512-3qX8oGVKFFZzQ0vit+ZolR6AJIATBzmEmjAA0llFhWk4vf3v64p1YcXcJsOBsr5scizJu5L6RYWEFatFwqckRg==",
+      "integrity": "sha512-MBSMzGYRFlwYCocvx3dU7zpCBSDQ0qWByNtStaEzuBUgzCJ6wn2DP/xG0cMcLmE3Ia0VLM4nwbLOAAvBXOtylA==",
       "license": "MIT",
       "funding": {
         "type": "github",

package.json

@@ -99,6 +99,7 @@
   "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",

src/Components/Input/ComboBoxInput.tsx

@@ -13,7 +13,7 @@ const ComboBoxInput = ({ id, options, value, onValueChange }: ComboBoxProps) =>
   return (
     <select
       id={id}
-      className='tw:select'
+      className='tw:select tw:w-full'
       onChange={handleChange}
       value={value} // ← hier controlled statt defaultValue
     >

src/Components/Input/RichTextEditor.tsx

@@ -3,9 +3,8 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 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 { Link } from '@tiptap/extension-link'
+import { Placeholder } from '@tiptap/extension-placeholder'
 import { EditorContent, useEditor } from '@tiptap/react'
 import { StarterKit } from '@tiptap/starter-kit'
 import { useEffect } from 'react'
@@ -19,8 +18,7 @@ interface RichTextEditorProps {
   containerStyle?: string
   defaultValue: string
   placeholder?: string
-  required?: boolean
+  showMenu?: boolean
-  size?: string
   updateFormValue?: (value: string) => void
 }
 
@@ -33,10 +31,14 @@ export function RichTextEditor({
   containerStyle,
   defaultValue,
   placeholder,
+  showMenu = true,
   updateFormValue,
 }: RichTextEditorProps) {
   const handleChange = () => {
-    const 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')
     if (updateFormValue && newValue) {
       updateFormValue(newValue)
     }
@@ -55,13 +57,13 @@ export function RichTextEditor({
           keepAttributes: false,
         },
       }),
-      Markdown,
+      Markdown.configure({
+        linkify: true,
+        transformCopiedText: true,
+        transformPastedText: true,
+      }),
       Image,
       Link,
-      Youtube.configure({
-        controls: false,
-        nocookie: true,
-      }),
       Placeholder.configure({
         placeholder,
         emptyEditorClass: 'is-editor-empty',
@@ -98,7 +100,7 @@ export function RichTextEditor({
       >
         {editor ? (
           <>
-            <TextEditorMenu editor={editor} />
+            {showMenu ? <TextEditorMenu editor={editor} /> : null}
             <EditorContent editor={editor} />
           </>
         ) : null}

src/Components/Input/TextEditorMenu.tsx

@@ -1,5 +1,3 @@
-import LinkIcon from '@heroicons/react/24/outline/LinkIcon'
-import PhotoIcon from '@heroicons/react/24/outline/PhotoIcon'
 import BoldIcon from '@heroicons/react/24/solid/BoldIcon'
 import H1Icon from '@heroicons/react/24/solid/H1Icon'
 import H2Icon from '@heroicons/react/24/solid/H2Icon'
@@ -8,7 +6,6 @@ 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 { useEditorState } from '@tiptap/react'
-import { useCallback, useEffect, useState } from 'react'
 import { MdUndo, MdRedo, MdHorizontalRule } from 'react-icons/md'
 
 import type { Editor } from '@tiptap/react'
@@ -45,32 +42,16 @@ export const TextEditorMenu = ({ editor }: { editor: Editor }) => {
     },
   })
 
-  const addImage = useCallback(() => {
-    const url = window.prompt('URL')
-
-    if (url) {
-      editor.chain().focus().setImage({ src: url }).run()
-    }
-  }, [editor])
-
-  const [url, setUrl] = useState<string>('')
-
-  const setLink = (e: React.MouseEvent) => {
-    e.preventDefault()
-
-    editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
-  }
-
   return (
     <>
       <ul
         className={
-          'tw:menu tw:overflow-x-hidden tw:sm:overflow-visible tw:md:overflow-x-hidden tw:lg:overflow-visible tw:p-1 tw:menu-horizontal tw:flex-nowrap tw:flex-none tw:bg-base-200 tw:rounded-box tw:w-full tw:rounded-b-none'
+          'tw:menu tw:overflow-x-hidden tw:@sm:overflow-visible tw:menu-horizontal tw:flex-nowrap tw:flex-none tw:bg-base-200 tw:rounded-box tw:w-full tw:rounded-b-none'
         }
       >
         <li>
           <div
-            className={`tw:tooltip tw:px-1.5 tw:mx-0.5 ${editorState.isHeading1 ? 'tw:bg-base-content/10' : ''}`}
+            className={`tw:@sm:tooltip tw:px-1.5 tw:mx-0.5 ${editorState.isHeading1 ? 'tw:bg-base-content/10' : ''}`}
             data-tip='Heading 1'
             onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
           >
@@ -79,7 +60,7 @@ export const TextEditorMenu = ({ editor }: { editor: Editor }) => {
         </li>
         <li>
           <div
-            className={`tw:tooltip tw:px-1.5 tw:mx-0.5 ${editorState.isHeading2 ? 'tw:bg-base-content/10' : ''}`}
+            className={`tw:@sm:tooltip tw:px-1.5 tw:mx-0.5 ${editorState.isHeading2 ? 'tw:bg-base-content/10' : ''}`}
             data-tip='Heading 2'
             onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
           >
@@ -88,7 +69,7 @@ export const TextEditorMenu = ({ editor }: { editor: Editor }) => {
         </li>
         <li>
           <div
-            className={`tw:tooltip tw:px-1.5 tw:mx-0.5 ${editorState.isHeading3 ? 'tw:bg-base-content/10' : ''}`}
+            className={`tw:@sm:tooltip tw:px-1.5 tw:mx-0.5 ${editorState.isHeading3 ? 'tw:bg-base-content/10' : ''}`}
             data-tip='Heading 3'
             onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
           >
@@ -100,7 +81,7 @@ export const TextEditorMenu = ({ editor }: { editor: Editor }) => {
         </li>
         <li>
           <div
-            className={`tw:tooltip tw:px-1.5 tw:mx-0.5 ${editorState.isBold ? 'tw:bg-base-content/10' : ''}`}
+            className={`tw:@sm:tooltip tw:px-1.5 tw:mx-0.5 ${editorState.isBold ? 'tw:bg-base-content/10' : ''}`}
             data-tip='Bold'
             onClick={() => editor.chain().focus().toggleBold().run()}
           >
@@ -109,7 +90,7 @@ export const TextEditorMenu = ({ editor }: { editor: Editor }) => {
         </li>
         <li>
           <div
-            className={`tw:tooltip tw:px-1.5 tw:mx-0.5 ${editorState.isItalic ? 'tw:bg-base-content/10' : ''}`}
+            className={`tw:@sm:tooltip tw:px-1.5 tw:mx-0.5 ${editorState.isItalic ? 'tw:bg-base-content/10' : ''}`}
             data-tip='Italic'
             onClick={() => editor.chain().focus().toggleItalic().run()}
           >
@@ -121,7 +102,7 @@ export const TextEditorMenu = ({ editor }: { editor: Editor }) => {
         </li>
         <li>
           <div
-            className={`tw:tooltip tw:px-1.5 tw:mx-0.5 ${editorState.isBulletList ? 'tw:bg-base-content/10' : ''}`}
+            className={`tw:@sm:tooltip tw:px-1.5 tw:mx-0.5 ${editorState.isBulletList ? 'tw:bg-base-content/10' : ''}`}
             data-tip='List'
             onClick={() => editor.chain().focus().toggleBulletList().run()}
           >
@@ -130,7 +111,7 @@ export const TextEditorMenu = ({ editor }: { editor: Editor }) => {
         </li>
         <li>
           <div
-            className={`tw:tooltip tw:px-1.5 tw:mx-0.5 ${editorState.isOrderedList ? 'tw:bg-base-content/10' : ''}`}
+            className={`tw:@sm:tooltip tw:px-1.5 tw:mx-0.5 ${editorState.isOrderedList ? 'tw:bg-base-content/10' : ''}`}
             data-tip='List'
             onClick={() => editor.chain().focus().toggleOrderedList().run()}
           >
@@ -140,63 +121,14 @@ export const TextEditorMenu = ({ editor }: { editor: Editor }) => {
         <li>
           <div className='tw:w-[1px] tw:p-0 tw:mx-1 tw:bg-base-content/10 tw:my-1' />
         </li>
-        <li className='tw:hidden tw:sm:block tw:md:hidden tw:lg:block'>
+        {/* <li>
-          {!editor.isActive('link') ? (
+          <div className='tw:@sm:tooltip tw:px-1.5 tw:mx-0.5' data-tip='Image' onClick={addImage}>
-            <div
-              tabIndex={0}
-              role='button'
-              className='tw:dropdown tw:dropdown-end tw:px-1.5 tw:mx-0.5 tw:pt-1.5 tw:pb-0 tw:cursor-pointer '
-            >
-              <div
-                className={`tw:tooltip tw:h-full ${editor.isActive('link') ? 'tw:bg-base-content/10' : ''}`}
-                data-tip='Link'
-              >
-                <LinkIcon className='tw:h-full tw:w-5' />
-              </div>
-              <div
-                tabIndex={0}
-                className='tw:dropdown-content tw:bg-base-200 tw:card tw:card-body tw:card-sm tw:bg-base-100 z-1 w-64 shadow-md'
-              >
-                <div className='tw:join'>
-                  <div>
-                    <label className='tw:input tw:validator tw:join-item tw:w-58'>
-                      <LinkIcon className='tw:h-full tw:w-4' />
-                      <input
-                        onChange={(e) => setUrl(e.target.value)}
-                        type='url'
-                        placeholder='https://...'
-                      />
-                    </label>
-                    <div className='tw:validator-hint tw:hidden'>Enter valid url</div>
-                  </div>
-                  <button
-                    className='tw:btn tw:btn-neutral tw:join-item'
-                    onClick={(e) => setLink(e)}
-                  >
-                    Set Link
-                  </button>
-                </div>
-              </div>
-            </div>
-          ) : (
-            <div
-              className={`tw:tooltip tw:px-1.5 tw:mx-0.5 ${editor.isActive('link') ? 'tw:bg-base-content/10' : ''}`}
-              data-tip='List'
-              onClick={() => editor.chain().focus().extendMarkRange('link').unsetLink().run()}
-            >
-              <LinkIcon className='tw:w-5 tw:h-5' />
-            </div>
-          )}
-        </li>
-
-        <li>
-          <div className='tw:tooltip tw:px-1.5 tw:mx-0.5' data-tip='Image' onClick={addImage}>
             <PhotoIcon className='tw:w-5 tw:h-5' />
           </div>
-        </li>
+        </li> */}
         <li>
           <div
-            className='tw:tooltip tw:px-1'
+            className='tw:@sm:tooltip tw:px-1'
             data-tip='Horizontal Line'
             onClick={() => editor.chain().focus().setHorizontalRule().run()}
           >
@@ -206,7 +138,7 @@ export const TextEditorMenu = ({ editor }: { editor: Editor }) => {
         <div className='tw:flex-grow'></div>
         <li>
           <div
-            className={`tw:tooltip tw:px-1.5 tw:mx-0.5 tw:hidden tw:sm:block tw:md:hidden tw:lg:block ${editorState.canUndo ? '' : 'tw:opacity-50'}`}
+            className={`tw:@sm:tooltip tw:px-1.5 tw:mx-0.5 tw:hidden tw:@sm:block ${editorState.canUndo ? '' : 'tw:opacity-50'}`}
             data-tip='Undo'
             onClick={() => editor.chain().focus().undo().run()}
           >
@@ -215,7 +147,7 @@ export const TextEditorMenu = ({ editor }: { editor: Editor }) => {
         </li>
         <li>
           <div
-            className={`tw:tooltip tw:px-1.5 tw:mx-0.5 tw:hidden tw:sm:block tw:md:hidden tw:lg:block ${editorState.canRedo ? '' : 'tw:opacity-50'}`}
+            className={`tw:@sm:tooltip tw:px-1.5 tw:mx-0.5 tw:hidden tw:@sm:block ${editorState.canRedo ? '' : 'tw:opacity-50'}`}
             data-tip='Redo'
             onClick={() => editor.chain().focus().redo().run()}
           >
@@ -223,50 +155,6 @@ export const TextEditorMenu = ({ editor }: { editor: Editor }) => {
           </div>
         </li>
       </ul>
-      {/**       <div className='control-group tiptap-toolbar'>
-        <div className='button-group'>
-          <button id='add' className='btn btn-sm' onClick={addYoutubeVideo}>
-            Add YouTube video
-          </button>
-        </div>
-      </div> */}
-      {/**      <BubbleMenu editor={editor} tippyOptions={{ duration: 100 }}>
-        <div className='bubble-menu tw:card tw:card-body tw:rounded-box tw:border tw:border-base-content/20 tw:bg-base-200 tw:shadow'>
-          <ul
-            className={
-              'tw:menu tw:p-1 tw:menu-horizontal tw:flex-nowrap tw:flex-none tw:bg-base-200 tw:rounded-box tw:w-full tw:rounded-b-none'
-            }
-          >
-            <li>
-              <div
-                className={`tw:tooltip tw:px-1.5 tw:mx-0.5 tw:cursor-pointer ${editorState.isBold ? 'tw:bg-base-content/10' : ''}`}
-                data-tip='Bold'
-                onClick={() => editor.chain().focus().toggleBold().run()}
-              >
-                <BoldIcon className='tw:w-4 tw:h-4' />
-              </div>
-            </li>
-            <li>
-              <div
-                className={`tw:tooltip tw:px-1.5 tw:mx-1 tw:cursor-pointer ${editorState.isItalic ? 'tw:bg-base-content/10' : ''}`}
-                data-tip='Italic'
-                onClick={() => editor.chain().focus().toggleItalic().run()}
-              >
-                <ItalicIcon className='tw:w-4 tw:h-4' />
-              </div>
-            </li>
-            <li>
-              <div
-                className={`tw:tooltip tw:px-1.5 tw:mx-1 tw:cursor-pointer ${editor.isActive('link') ? 'tw:bg-base-content/10' : ''}`}
-                data-tip='Link'
-                onClick={setLink}
-              >
-                <LinkIcon className='tw:w-4 tw:h-4' />
-              </div>
-            </li>
-          </ul>
-        </div>
-      </BubbleMenu>  */}
     </>
   )
 }

src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx

@@ -53,22 +53,6 @@ export const TextView = ({
 
   if (innerText) replacedText = fixUrls(innerText)
 
-  if (replacedText) {
-    replacedText = replacedText.replace(/(?<!\]?\()https?:\/\/[^\s)]+(?!\))/g, (url) => {
-      let shortUrl = url
-
-      if (url.match('^https://')) {
-        shortUrl = url.split('https://')[1]
-      }
-
-      if (url.match('^http://')) {
-        shortUrl = url.split('http://')[1]
-      }
-
-      return `[${shortUrl}](${url})`
-    })
-  }
-
   if (replacedText) {
     replacedText = replacedText.replace(mailRegex, (url) => {
       return `[${url}](mailto:${url})`

src/Components/Profile/ProfileForm.tsx

@@ -158,7 +158,7 @@ export function ProfileForm() {
     <>
       <MapOverlayPage
         backdrop
-        className='tw:mx-4 tw:mt-4 tw:mb-4 tw:overflow-x-hidden tw:w-[calc(100%-32px)]  tw:md:w-[calc(50%-32px)] tw:max-w-3xl tw:left-auto! tw:top-0 tw:bottom-0 tw:flex tw:flex-col tw:max-h-[calc(1000px)]'
+        className='tw:mx-4 tw:mt-4 tw:mb-4 tw:@container tw:overflow-x-hidden tw:w-[calc(100%-32px)]  tw:md:w-[calc(50%-32px)] tw:max-w-3xl tw:left-auto! tw:top-0 tw:bottom-0 tw:flex tw:flex-col'
       >
         <form
           className='tw:flex tw:flex-col tw:flex-1 tw:min-h-0'

src/Components/Profile/Subcomponents/GroupSubheaderForm.tsx

@@ -51,7 +51,7 @@ export const GroupSubheaderForm = ({
   }, [state.group_type, groupTypes])
 
   return (
-    <div className='tw:grid tw:grid-cols-1 tw:md:grid-cols-2 tw:gap-2'>
+    <div className='tw:grid tw:grid-cols-1 tw:@sm:grid-cols-2 tw:gap-2'>
       <div>
         <label
           htmlFor='status'

src/Components/Profile/Subcomponents/ProfileTextForm.tsx

@@ -18,7 +18,6 @@ export const ProfileTextForm = ({
   heading,
   size,
   hideInputLabel,
-  required,
 }: {
   state: FormState
   setState: React.Dispatch<React.SetStateAction<any>>
@@ -26,7 +25,6 @@ export const ProfileTextForm = ({
   heading: string
   size: string
   hideInputLabel: boolean
-  required?: boolean
 }) => {
   const [field, setField] = useState<string>(dataField || 'text')
 
@@ -38,7 +36,7 @@ export const ProfileTextForm = ({
 
   return (
     <div
-      className={`tw:min-h-36 tw:max-h-156 tw:flex tw:flex-col tw:mt-2 ${size === 'full' ? 'tw:flex-1' : 'tw:h-36 tw:flex-none'}`}
+      className={`tw:max-h-124 tw:md:max-h-full tw:flex tw:flex-col tw:mt-2 ${size === 'full' ? 'tw:flex-1 tw:min-h-42' : 'tw:h-28 tw:flex-none'}`}
     >
       <div className='tw:flex tw:justify-between tw:items-center'>
         <label
@@ -59,9 +57,9 @@ export const ProfileTextForm = ({
             [field]: v,
           }))
         }
+        showMenu={size === 'full'}
         labelStyle={hideInputLabel ? 'tw:hidden' : ''}
-        containerStyle={size === 'full' ? 'tw:flex-1' : 'tw:h-32 tw:flex-none'}
+        containerStyle={size === 'full' ? 'tw:flex-1' : 'tw:h-24 tw:flex-none'}
-        required={required}
       />
     </div>
   )

src/Components/Profile/Templates/TabsForm.tsx

@@ -85,7 +85,7 @@ export const TabsForm = ({
                     }))
                   }
                   containerStyle='tw:pt-2 tw:h-36 tw:flex-none'
-                  required={false}
+                  showMenu={false}
                 />
               </div>
             ),