fmt

src/components/Editor/MicroEditor/MicroEditor.tsx

@@ -1,17 +1,16 @@
-import Placeholder from '@tiptap/extension-placeholder'
-import BubbleMenu from '@tiptap/extension-bubble-menu'
-import clsx from 'clsx'
-import { type JSX, Show, createEffect, createSignal, on } from 'solid-js'
-import { createEditorTransaction, createTiptapEditor, useEditorHTML, useEditorIsFocused } from 'solid-tiptap'
-import { minimal } from '~/lib/editorExtensions'
 import { Editor } from '@tiptap/core'
+import Placeholder from '@tiptap/extension-placeholder'
+import clsx from 'clsx'
+import { type JSX, createEffect, createSignal, on } from 'solid-js'
+import { createEditorTransaction, createTiptapEditor, useEditorHTML } from 'solid-tiptap'
+import { minimal } from '~/lib/editorExtensions'
 
 import { Icon } from '~/components/_shared/Icon/Icon'
-import { ToolbarControl as Control } from '../EditorToolbar/ToolbarControl'
 import { InsertLinkForm } from '../EditorToolbar/InsertLinkForm'
+import { ToolbarControl as Control } from '../EditorToolbar/ToolbarControl'
 
-import styles from '../MiniEditor/MiniEditor.module.scss'
 import { useLocalize } from '~/context/localize'
+import styles from '../MiniEditor/MiniEditor.module.scss'
 
 interface MicroEditorProps {
   content?: string
@@ -87,11 +86,12 @@ export const MicroEditor = (props: MicroEditorProps): JSX.Element => {
   })
 
   return (
-    <div class={clsx(
-      styles.MiniEditor, {
-      [styles.bordered]: props.bordered,
-      [styles.isFocused]: isActive() && selection() && Boolean(!selection()?.empty)
-    })}>
+    <div
+      class={clsx(styles.MiniEditor, {
+        [styles.bordered]: props.bordered,
+        [styles.isFocused]: isActive() && selection() && Boolean(!selection()?.empty)
+      })}
+    >
       <div class={styles.controls}>
         <div class={styles.actions}>
           <Control
@@ -133,4 +133,4 @@ export const MicroEditor = (props: MicroEditorProps): JSX.Element => {
   )
 }
 
-export default MicroEditor
+export default MicroEditor

src/components/Editor/MiniEditor/MiniEditor.module.scss

@@ -50,7 +50,7 @@
     background-color: white;
     padding: 5px;
     border-radius: 5px;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0px 10px 20px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0 0 1px rgb(0 0 0 / 5%), 0 10px 20px rgb(0 0 0 / 10%);
   }
 
   .controls {
@@ -103,6 +103,7 @@
     .linkInput {
       opacity: 0;
       transition: opacity ease-in-out 0.3s;
+
       &.linkInputactive {
         opacity: 1;
       }

src/components/Editor/MiniEditor/MiniEditor.tsx

@@ -2,22 +2,22 @@ import CharacterCount from '@tiptap/extension-character-count'
 import Placeholder from '@tiptap/extension-placeholder'
 import clsx from 'clsx'
 import { type JSX, Show, createEffect, createSignal, on } from 'solid-js'
-import { createEditorTransaction, createTiptapEditor, useEditorHTML, useEditorIsEmpty } from 'solid-tiptap'
+import { createTiptapEditor, useEditorHTML, useEditorIsEmpty } from 'solid-tiptap'
 import { Button } from '~/components/_shared/Button'
 import { useLocalize } from '~/context/localize'
 import { base } from '~/lib/editorExtensions'
 import { ToolbarControl as Control } from '../EditorToolbar/ToolbarControl'
 
-import styles from './MiniEditor.module.scss'
 import { Editor } from '@tiptap/core'
-import { InsertLinkForm } from '../EditorToolbar/InsertLinkForm'
-import { Icon } from '~/components/_shared/Icon/Icon'
-import { useUI } from '~/context/ui'
-import { Modal } from '~/components/_shared/Modal'
-import { UploadModalContent } from '~/components/Upload/UploadModalContent'
 import { Portal } from 'solid-js/web'
+import { UploadModalContent } from '~/components/Upload/UploadModalContent'
 import { renderUploadedImage } from '~/components/Upload/renderUploadedImage'
+import { Icon } from '~/components/_shared/Icon/Icon'
+import { Modal } from '~/components/_shared/Modal'
+import { useUI } from '~/context/ui'
 import { UploadedFile } from '~/types/upload'
+import { InsertLinkForm } from '../EditorToolbar/InsertLinkForm'
+import styles from './MiniEditor.module.scss'
 
 interface MiniEditorProps {
   content?: string

src/components/Views/Profile/ProfileSettings.tsx

@@ -339,7 +339,12 @@ export const ProfileSettings = () => {
                     />
 
                     <h4>{t('About')}</h4>
-                    <MicroEditor content={about() || ''} onChange={setAbout} placeholder={t('About')} bordered={true} />
+                    <MicroEditor
+                      content={about() || ''}
+                      onChange={setAbout}
+                      placeholder={t('About')}
+                      bordered={true}
+                    />
                     <div class={clsx(styles.multipleControls, 'pretty-form__item')}>
                       <div class={styles.multipleControlsHeader}>
                         <h4>{t('Social networks')}</h4>