diff --git a/src/components/Editor/EditorToolbar/EditorToolbar.tsx b/src/components/Editor/EditorToolbar/EditorToolbar.tsx deleted file mode 100644 index 3632bc29..00000000 --- a/src/components/Editor/EditorToolbar/EditorToolbar.tsx +++ /dev/null @@ -1,138 +0,0 @@ -import { Editor } from '@tiptap/core' -import { Accessor, Show, createEffect, createSignal, on } from 'solid-js' -import { Portal } from 'solid-js/web' -import { createEditorTransaction } from 'solid-tiptap' -import { UploadModalContent } from '~/components/Upload/UploadModalContent/UploadModalContent' -import { renderUploadedImage } from '~/components/Upload/renderUploadedImage' -import { Icon } from '~/components/_shared/Icon/Icon' -import { Modal } from '~/components/_shared/Modal/Modal' -import { useLocalize } from '~/context/localize' -import { useUI } from '~/context/ui' -import { UploadedFile } from '~/types/upload' -import { InsertLinkForm } from './InsertLinkForm' -import { ToolbarControl as Control } from './ToolbarControl' - -import styles from '../MiniEditor/MiniEditor.module.scss' - -interface EditorToolbarProps { - editor: Accessor - mode?: 'micro' | 'mini' -} - -export const EditorToolbar = (props: EditorToolbarProps) => { - const { t } = useLocalize() - const { showModal } = useUI() - - // show / hide for link input - const [showLinkInput, setShowLinkInput] = createSignal(false) - - // focus on link input when it shows up - createEffect(on(showLinkInput, (x?: boolean) => x && props.editor()?.chain().focus().run())) - - const selection = createEditorTransaction(props.editor, (instance) => instance?.state.selection) - - // change visibility on selection if not in link input mode - const [showSimpleMenu, setShowSimpleMenu] = createSignal(false) - createEffect( - on([selection, showLinkInput], ([s, l]) => props.mode === 'micro' && !l && setShowSimpleMenu(!s?.empty)) - ) - - const [storedSelection, setStoredSelection] = createSignal() - const recoverSelection = () => { - if (!storedSelection()?.empty) { - createEditorTransaction(props.editor, (instance?: Editor) => { - const r = selection() - if (instance && r) { - instance.state.selection.from === r.from - instance.state.selection.to === r.to - } - }) - } - } - const storeSelection = () => { - const selection = props.editor()?.state.selection - if (!selection?.empty) { - setStoredSelection(selection) - } - } - const toggleShowLink = () => { - if (showLinkInput()) { - props.editor()?.chain().focus().run() - recoverSelection() - } else { - storeSelection() - } - setShowLinkInput(!showLinkInput()) - } - - return ( -
- - {(instance) => ( -
-
- instance.chain().focus().toggleBold().run()} - title={t('Bold')} - > - - - instance.chain().focus().toggleItalic().run()} - title={t('Italic')} - > - - - - - - - instance.chain().focus().toggleBlockquote().run()} - title={t('Add blockquote')} - > - - - showModal('simplifiedEditorUploadImage')} - title={t('Add image')} - > - - - -
- - - - - - - - renderUploadedImage(instance as Editor, image as UploadedFile)} - /> - - -
- )} -
-
- ) -} diff --git a/src/components/Editor/EditorToolbar/InsertLinkForm.tsx b/src/components/Editor/EditorToolbar/InsertLinkForm.tsx index 4ce396cf..fb0fbe67 100644 --- a/src/components/Editor/EditorToolbar/InsertLinkForm.tsx +++ b/src/components/Editor/EditorToolbar/InsertLinkForm.tsx @@ -5,8 +5,11 @@ import { validateUrl } from '~/utils/validate' import { InlineForm } from '../../_shared/InlineForm' type Props = { + class?: string editor: Editor onClose: () => void + onSubmit?: (value: string) => void + onRemove?: () => void } export const checkUrl = (url: string) => { @@ -38,7 +41,7 @@ export const InsertLinkForm = (props: Props) => { const handleClearLinkForm = () => { if (currentUrl()) { - props.editor?.chain().focus().unsetLink().run() + props.onRemove?.() } } @@ -48,11 +51,12 @@ export const InsertLinkForm = (props: Props) => { .focus() .setLink({ href: checkUrl(value) }) .run() + props.onSubmit?.(value) props.onClose() } return ( -
+
void @@ -27,7 +27,7 @@ export const ToolbarControl = (props: ControlProps): JSX.Element => {
- - 0}> - - {counter()} / {props.limit || '∞'} - -
+ + + + renderUploadedImage(editor() as Editor, image as UploadedFile)} + /> + + + +
+ +
+
+ + 0}> + + {counter()} / {props.limit || '∞'} + +
) } diff --git a/src/components/Views/Profile/ProfileSettings.tsx b/src/components/Views/Profile/ProfileSettings.tsx index 7cfab5d9..27fdc855 100644 --- a/src/components/Views/Profile/ProfileSettings.tsx +++ b/src/components/Views/Profile/ProfileSettings.tsx @@ -339,7 +339,7 @@ export const ProfileSettings = () => { />

{t('About')}

- +

{t('Social networks')}