This commit is contained in:
Untone 2024-10-01 20:19:40 +03:00
parent abdc419aa8
commit 67e8c80d9a
4 changed files with 29 additions and 23 deletions

View File

@ -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 { 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 { Icon } from '~/components/_shared/Icon/Icon'
import { ToolbarControl as Control } from '../EditorToolbar/ToolbarControl'
import { InsertLinkForm } from '../EditorToolbar/InsertLinkForm' 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 { useLocalize } from '~/context/localize'
import styles from '../MiniEditor/MiniEditor.module.scss'
interface MicroEditorProps { interface MicroEditorProps {
content?: string content?: string
@ -87,11 +86,12 @@ export const MicroEditor = (props: MicroEditorProps): JSX.Element => {
}) })
return ( return (
<div class={clsx( <div
styles.MiniEditor, { class={clsx(styles.MiniEditor, {
[styles.bordered]: props.bordered, [styles.bordered]: props.bordered,
[styles.isFocused]: isActive() && selection() && Boolean(!selection()?.empty) [styles.isFocused]: isActive() && selection() && Boolean(!selection()?.empty)
})}> })}
>
<div class={styles.controls}> <div class={styles.controls}>
<div class={styles.actions}> <div class={styles.actions}>
<Control <Control

View File

@ -50,7 +50,7 @@
background-color: white; background-color: white;
padding: 5px; padding: 5px;
border-radius: 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 { .controls {
@ -103,6 +103,7 @@
.linkInput { .linkInput {
opacity: 0; opacity: 0;
transition: opacity ease-in-out 0.3s; transition: opacity ease-in-out 0.3s;
&.linkInputactive { &.linkInputactive {
opacity: 1; opacity: 1;
} }

View File

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

View File

@ -339,7 +339,12 @@ export const ProfileSettings = () => {
/> />
<h4>{t('About')}</h4> <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={clsx(styles.multipleControls, 'pretty-form__item')}>
<div class={styles.multipleControlsHeader}> <div class={styles.multipleControlsHeader}>
<h4>{t('Social networks')}</h4> <h4>{t('Social networks')}</h4>