diff --git a/src/components/Article/CommentsTree.tsx b/src/components/Article/CommentsTree.tsx index 09b42e77..4d666b5b 100644 --- a/src/components/Article/CommentsTree.tsx +++ b/src/components/Article/CommentsTree.tsx @@ -154,10 +154,7 @@ export const CommentsTree = (props: Props) => { } > - + diff --git a/src/components/Editor/EditorToolbar/MiniToolbar.tsx b/src/components/Editor/EditorToolbar/EditorToolbar.tsx similarity index 53% rename from src/components/Editor/EditorToolbar/MiniToolbar.tsx rename to src/components/Editor/EditorToolbar/EditorToolbar.tsx index 21446da3..06cef005 100644 --- a/src/components/Editor/EditorToolbar/MiniToolbar.tsx +++ b/src/components/Editor/EditorToolbar/EditorToolbar.tsx @@ -1,19 +1,25 @@ 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 { InsertLinkForm } from '../InsertLinkForm/InsertLinkForm' +import { UploadedFile } from '~/types/upload' +import { InsertLinkForm } from './InsertLinkForm' import { ToolbarControl as Control } from './ToolbarControl' import styles from '../SimplifiedEditor.module.scss' -interface MiniToolbarProps { +interface EditorToolbarProps { editor: Accessor + mode?: 'micro' | 'mini' } -export const MiniToolbar = (props: MiniToolbarProps) => { +export const EditorToolbar = (props: EditorToolbarProps) => { const { t } = useLocalize() const { showModal } = useUI() @@ -23,23 +29,24 @@ export const MiniToolbar = (props: MiniToolbarProps) => { // 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 + 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 - } + 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 = () => { @@ -60,7 +67,10 @@ export const MiniToolbar = (props: MiniToolbarProps) => { return (
- + {(instance) => (
@@ -89,26 +99,37 @@ export const MiniToolbar = (props: MiniToolbarProps) => { > - instance.chain().focus().toggleBlockquote().run()} - title={t('Add blockquote')} - > - - - showModal('simplifiedEditorUploadImage')} - title={t('Add image')} - > - - + + 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/InsertLinkForm/InsertLinkForm.tsx b/src/components/Editor/EditorToolbar/InsertLinkForm.tsx similarity index 100% rename from src/components/Editor/InsertLinkForm/InsertLinkForm.tsx rename to src/components/Editor/EditorToolbar/InsertLinkForm.tsx diff --git a/src/components/Editor/EditorToolbar/MicroToolbar.tsx b/src/components/Editor/EditorToolbar/MicroToolbar.tsx deleted file mode 100644 index 10c88404..00000000 --- a/src/components/Editor/EditorToolbar/MicroToolbar.tsx +++ /dev/null @@ -1,113 +0,0 @@ -import { Editor } from '@tiptap/core' -import { Accessor, Show, createEffect, createSignal, on } from 'solid-js' -import { createEditorTransaction } from 'solid-tiptap' -import { Icon } from '~/components/_shared/Icon/Icon' -import { useLocalize } from '~/context/localize' -import { InsertLinkForm } from '../InsertLinkForm/InsertLinkForm' -import { ToolbarControl as Control } from './ToolbarControl' - -import styles from '../SimplifiedEditor.module.scss' - -export interface MicroToolbarProps { - showing?: boolean - editor: Accessor -} - -export const MicroToolbar = (props: MicroToolbarProps) => { - const { t } = useLocalize() - - // show / hide for menu - const [showSimpleMenu, setShowSimpleMenu] = createSignal(!props.showing) - const selection = createEditorTransaction( - props.editor, - (instance) => instance?.state.selection - ) - - // show / hide for link input - const [showLinkInput, setShowLinkInput] = createSignal(false) - - // change visibility on selection if not in link input mode - createEffect(on([selection, showLinkInput], ([s, l]) => !l && setShowSimpleMenu(!s?.empty))) - - // focus on link input when it shows up - createEffect(on(showLinkInput, (x?: boolean) => x && props.editor()?.chain().focus().run())) - - 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')} - > - - - - - -
- - - -
-
-
- )} -
- ) -} diff --git a/src/components/Editor/InsertLinkForm/index.ts b/src/components/Editor/InsertLinkForm/index.ts deleted file mode 100644 index 4cf74dea..00000000 --- a/src/components/Editor/InsertLinkForm/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { InsertLinkForm } from './InsertLinkForm' diff --git a/src/components/Editor/MicroEditor/MicroEditor.tsx b/src/components/Editor/MicroEditor/MicroEditor.tsx index 42cbe8b8..549dd54a 100644 --- a/src/components/Editor/MicroEditor/MicroEditor.tsx +++ b/src/components/Editor/MicroEditor/MicroEditor.tsx @@ -1,9 +1,9 @@ import Placeholder from '@tiptap/extension-placeholder' import clsx from 'clsx' import { type JSX, createEffect, createSignal, on } from 'solid-js' -import { createTiptapEditor, useEditorHTML, useEditorIsEmpty, useEditorIsFocused } from 'solid-tiptap' +import { createTiptapEditor, useEditorHTML, useEditorIsFocused } from 'solid-tiptap' import { minimal } from '~/lib/editorExtensions' -import { MicroToolbar } from '../EditorToolbar/MicroToolbar' +import { EditorToolbar } from '../EditorToolbar/EditorToolbar' import styles from '../SimplifiedEditor.module.scss' @@ -31,20 +31,14 @@ export const MicroEditor = (props: MicroEditorProps): JSX.Element => { content: props.content || '' })) - const isEmpty = useEditorIsEmpty(editor) const isFocused = useEditorIsFocused(editor) const html = useEditorHTML(editor) createEffect(on(html, (c?: string) => c && props.onChange?.(c))) return ( -
+
- - +
diff --git a/src/components/Editor/MiniEditor/MiniEditor.tsx b/src/components/Editor/MiniEditor/MiniEditor.tsx index ac63ab2f..1b86aa82 100644 --- a/src/components/Editor/MiniEditor/MiniEditor.tsx +++ b/src/components/Editor/MiniEditor/MiniEditor.tsx @@ -4,8 +4,10 @@ import clsx from 'clsx' import { type JSX, Show, createEffect, createSignal, on } from 'solid-js' import { createEditorTransaction, createTiptapEditor, useEditorHTML } from 'solid-tiptap' import { base } from '~/lib/editorExtensions' +import { EditorToolbar } from '../EditorToolbar/EditorToolbar' -import { MiniToolbar } from '../EditorToolbar/MiniToolbar' +import { Button } from '~/components/_shared/Button' +import { useLocalize } from '~/context/localize' import styles from '../SimplifiedEditor.module.scss' interface MiniEditorProps { @@ -18,6 +20,7 @@ interface MiniEditorProps { } export default function MiniEditor(props: MiniEditorProps): JSX.Element { + const { t } = useLocalize() const [editorElement, setEditorElement] = createSignal() const [counter, setCounter] = createSignal(0) @@ -36,7 +39,10 @@ export default function MiniEditor(props: MiniEditorProps): JSX.Element { content: props.content || '' })) + const isFocused = createEditorTransaction(editor, (instance) => instance?.isFocused) + const isEmpty = createEditorTransaction(editor, (instance) => instance?.isEmpty) const html = useEditorHTML(editor) + createEffect(on(html, (c?: string) => c && props.onChange?.(c))) createEffect(() => { @@ -46,14 +52,27 @@ export default function MiniEditor(props: MiniEditorProps): JSX.Element { content && props.onChange?.(content) }) - const isFocused = createEditorTransaction(editor, (instance) => instance?.isFocused) + const handleSubmit = () => { + html() && props.onSubmit?.(html() || '') + editor()?.commands.clearContent(true) + } return (
- + + +
+
0}> diff --git a/src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx b/src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx index 8352c69a..981523dc 100644 --- a/src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx +++ b/src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx @@ -1,13 +1,11 @@ import type { Editor } from '@tiptap/core' - import { clsx } from 'clsx' import { Match, Show, Switch, createEffect, createSignal, lazy, onCleanup, onMount } from 'solid-js' import { createEditorTransaction } from 'solid-tiptap' - import { Icon } from '~/components/_shared/Icon' import { Popover } from '~/components/_shared/Popover' import { useLocalize } from '~/context/localize' -import { InsertLinkForm } from '../InsertLinkForm' +import { InsertLinkForm } from '../EditorToolbar/InsertLinkForm' import styles from './TextBubbleMenu.module.scss'