Figure caption with editor menu
This commit is contained in:
parent
9cbef1d0b7
commit
aa28b2cbfd
|
|
@ -1,4 +1,4 @@
|
|||
import { createEffect } from 'solid-js'
|
||||
import { createEffect, createSignal } from 'solid-js'
|
||||
import { createTiptapEditor, useEditorHTML } from 'solid-tiptap'
|
||||
import { useLocalize } from '../../context/localize'
|
||||
import { Blockquote } from '@tiptap/extension-blockquote'
|
||||
|
|
@ -57,6 +57,7 @@ const providers: Record<string, HocuspocusProvider> = {}
|
|||
export const Editor = (props: EditorProps) => {
|
||||
const { t } = useLocalize()
|
||||
const { user } = useSession()
|
||||
const [isCommonMarkup, setIsCommonMarkup] = createSignal(false)
|
||||
|
||||
const docName = `shout-${props.shoutId}`
|
||||
|
||||
|
|
@ -165,9 +166,8 @@ export const Editor = (props: EditorProps) => {
|
|||
|
||||
const isEmptyTextBlock = doc.textBetween(from, to).length === 0 && isTextSelection(selection)
|
||||
|
||||
return (
|
||||
view.hasFocus() && !empty && !isEmptyTextBlock && !e.isActive('image') && !e.isActive('figure')
|
||||
)
|
||||
setIsCommonMarkup(e.isActive('figure'))
|
||||
return view.hasFocus() && !empty && !isEmptyTextBlock && !e.isActive('image')
|
||||
}
|
||||
}),
|
||||
BubbleMenu.configure({
|
||||
|
|
@ -206,7 +206,11 @@ export const Editor = (props: EditorProps) => {
|
|||
return (
|
||||
<>
|
||||
<div ref={(el) => (editorElRef.current = el)} />
|
||||
<TextBubbleMenu editor={editor()} ref={(el) => (textBubbleMenuRef.current = el)} />
|
||||
<TextBubbleMenu
|
||||
isCommonMarkup={isCommonMarkup()}
|
||||
editor={editor()}
|
||||
ref={(el) => (textBubbleMenuRef.current = el)}
|
||||
/>
|
||||
<ImageBubbleMenu editor={editor()} ref={(el) => (imageBubbleMenuRef.current = el)} />
|
||||
<EditorFloatingMenu editor={editor()} ref={(el) => (floatingMenuRef.current = el)} />
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import { validateUrl } from '../../../utils/validateUrl'
|
|||
|
||||
type BubbleMenuProps = {
|
||||
editor: Editor
|
||||
isCommonMarkup: boolean
|
||||
ref: (el: HTMLDivElement) => void
|
||||
}
|
||||
|
||||
|
|
@ -90,89 +91,93 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
|
|||
</Match>
|
||||
<Match when={!linkEditorOpen()}>
|
||||
<>
|
||||
<div class={styles.dropDownHolder}>
|
||||
<button
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: textSizeBubbleOpen()
|
||||
})}
|
||||
onClick={toggleTextSizePopup}
|
||||
>
|
||||
<Icon name="editor-text-size" />
|
||||
<Icon name="down-triangle" class={styles.triangle} />
|
||||
</button>
|
||||
<Show when={textSizeBubbleOpen()}>
|
||||
<div class={styles.dropDown}>
|
||||
<header>{t('Headers')}</header>
|
||||
<div class={styles.actions}>
|
||||
<button
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: isH1()
|
||||
})}
|
||||
onClick={() => {
|
||||
props.editor.chain().focus().toggleHeading({ level: 1 }).run()
|
||||
toggleTextSizePopup()
|
||||
}}
|
||||
>
|
||||
<Icon name="editor-h1" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: isH2()
|
||||
})}
|
||||
onClick={() => {
|
||||
props.editor.chain().focus().toggleHeading({ level: 2 }).run()
|
||||
toggleTextSizePopup()
|
||||
}}
|
||||
>
|
||||
<Icon name="editor-h2" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: isH3()
|
||||
})}
|
||||
onClick={() => {
|
||||
props.editor.chain().focus().toggleHeading({ level: 3 }).run()
|
||||
toggleTextSizePopup()
|
||||
}}
|
||||
>
|
||||
<Icon name="editor-h3" />
|
||||
</button>
|
||||
</div>
|
||||
<header>{t('Quotes')}</header>
|
||||
<div class={styles.actions}>
|
||||
<button
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: isBlockQuote()
|
||||
})}
|
||||
onClick={() => {
|
||||
props.editor.chain().focus().toggleBlockquote().run()
|
||||
toggleTextSizePopup()
|
||||
}}
|
||||
>
|
||||
<Icon name="editor-blockquote" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: isBlockQuote()
|
||||
})}
|
||||
onClick={() => {
|
||||
props.editor.chain().focus().toggleBlockquote().run()
|
||||
toggleTextSizePopup()
|
||||
}}
|
||||
>
|
||||
<Icon name="editor-quote" />
|
||||
</button>
|
||||
</div>
|
||||
<Show when={!props.isCommonMarkup}>
|
||||
<>
|
||||
<div class={styles.dropDownHolder}>
|
||||
<button
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: textSizeBubbleOpen()
|
||||
})}
|
||||
onClick={toggleTextSizePopup}
|
||||
>
|
||||
<Icon name="editor-text-size" />
|
||||
<Icon name="down-triangle" class={styles.triangle} />
|
||||
</button>
|
||||
<Show when={textSizeBubbleOpen()}>
|
||||
<div class={styles.dropDown}>
|
||||
<header>{t('Headers')}</header>
|
||||
<div class={styles.actions}>
|
||||
<button
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: isH1()
|
||||
})}
|
||||
onClick={() => {
|
||||
props.editor.chain().focus().toggleHeading({ level: 1 }).run()
|
||||
toggleTextSizePopup()
|
||||
}}
|
||||
>
|
||||
<Icon name="editor-h1" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: isH2()
|
||||
})}
|
||||
onClick={() => {
|
||||
props.editor.chain().focus().toggleHeading({ level: 2 }).run()
|
||||
toggleTextSizePopup()
|
||||
}}
|
||||
>
|
||||
<Icon name="editor-h2" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: isH3()
|
||||
})}
|
||||
onClick={() => {
|
||||
props.editor.chain().focus().toggleHeading({ level: 3 }).run()
|
||||
toggleTextSizePopup()
|
||||
}}
|
||||
>
|
||||
<Icon name="editor-h3" />
|
||||
</button>
|
||||
</div>
|
||||
<header>{t('Quotes')}</header>
|
||||
<div class={styles.actions}>
|
||||
<button
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: isBlockQuote()
|
||||
})}
|
||||
onClick={() => {
|
||||
props.editor.chain().focus().toggleBlockquote().run()
|
||||
toggleTextSizePopup()
|
||||
}}
|
||||
>
|
||||
<Icon name="editor-blockquote" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: isBlockQuote()
|
||||
})}
|
||||
onClick={() => {
|
||||
props.editor.chain().focus().toggleBlockquote().run()
|
||||
toggleTextSizePopup()
|
||||
}}
|
||||
>
|
||||
<Icon name="editor-quote" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
<div class={styles.delimiter} />
|
||||
<div class={styles.delimiter} />
|
||||
</>
|
||||
</Show>
|
||||
<button
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
|
|
@ -191,15 +196,18 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
|
|||
>
|
||||
<Icon name="editor-italic" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: isHighlight()
|
||||
})}
|
||||
onClick={() => props.editor.chain().focus().toggleHighlight({ color: '#F6E3A1' }).run()}
|
||||
>
|
||||
<div class={styles.toggleHighlight} />
|
||||
</button>
|
||||
|
||||
<Show when={!props.isCommonMarkup}>
|
||||
<button
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: isHighlight()
|
||||
})}
|
||||
onClick={() => props.editor.chain().focus().toggleHighlight({ color: '#f6e3a1' }).run()}
|
||||
>
|
||||
<div class={styles.toggleHighlight} />
|
||||
</button>
|
||||
</Show>
|
||||
<div class={styles.delimiter} />
|
||||
<button
|
||||
type="button"
|
||||
|
|
@ -210,53 +218,57 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
|
|||
>
|
||||
<Icon name="editor-link" />
|
||||
</button>
|
||||
<button type="button" class={styles.bubbleMenuButton}>
|
||||
<Icon name="editor-footnote" />
|
||||
</button>
|
||||
<div class={styles.delimiter} />
|
||||
<div class={styles.dropDownHolder}>
|
||||
<button
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: listBubbleOpen()
|
||||
})}
|
||||
onClick={toggleListPopup}
|
||||
>
|
||||
<Icon name="editor-ul" />
|
||||
<Icon name="down-triangle" class={styles.triangle} />
|
||||
</button>
|
||||
<Show when={listBubbleOpen()}>
|
||||
<div class={styles.dropDown}>
|
||||
<header>{t('Lists')}</header>
|
||||
<div class={styles.actions}>
|
||||
<button
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: isBulletList()
|
||||
})}
|
||||
onClick={() => {
|
||||
props.editor.chain().focus().toggleBulletList().run()
|
||||
toggleListPopup()
|
||||
}}
|
||||
>
|
||||
<Icon name="editor-ul" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: isOrderedList()
|
||||
})}
|
||||
onClick={() => {
|
||||
props.editor.chain().focus().toggleOrderedList().run()
|
||||
toggleListPopup()
|
||||
}}
|
||||
>
|
||||
<Icon name="editor-ol" />
|
||||
</button>
|
||||
</div>
|
||||
<Show when={!props.isCommonMarkup}>
|
||||
<>
|
||||
<button type="button" class={styles.bubbleMenuButton}>
|
||||
<Icon name="editor-footnote" />
|
||||
</button>
|
||||
<div class={styles.delimiter} />
|
||||
<div class={styles.dropDownHolder}>
|
||||
<button
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: listBubbleOpen()
|
||||
})}
|
||||
onClick={toggleListPopup}
|
||||
>
|
||||
<Icon name="editor-ul" />
|
||||
<Icon name="down-triangle" class={styles.triangle} />
|
||||
</button>
|
||||
<Show when={listBubbleOpen()}>
|
||||
<div class={styles.dropDown}>
|
||||
<header>{t('Lists')}</header>
|
||||
<div class={styles.actions}>
|
||||
<button
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: isBulletList()
|
||||
})}
|
||||
onClick={() => {
|
||||
props.editor.chain().focus().toggleBulletList().run()
|
||||
toggleListPopup()
|
||||
}}
|
||||
>
|
||||
<Icon name="editor-ul" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: isOrderedList()
|
||||
})}
|
||||
onClick={() => {
|
||||
props.editor.chain().focus().toggleOrderedList().run()
|
||||
toggleListPopup()
|
||||
}}
|
||||
>
|
||||
<Icon name="editor-ol" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</>
|
||||
</Show>
|
||||
</>
|
||||
</Match>
|
||||
</Switch>
|
||||
|
|
|
|||
|
|
@ -27,8 +27,8 @@ export const UploadModalContent = (props: Props) => {
|
|||
try {
|
||||
setIsUploading(true)
|
||||
const fileUrl = await handleFileUpload(file)
|
||||
setIsUploading(false)
|
||||
props.onClose(fileUrl)
|
||||
setIsUploading(false)
|
||||
} catch (error) {
|
||||
setIsUploading(false)
|
||||
setUploadError(t('Error'))
|
||||
|
|
|
|||
|
|
@ -248,7 +248,7 @@ export const EditView = (props: EditViewProps) => {
|
|||
<div class={styles.actions}>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={() => showModal('uploadImage')}
|
||||
onClick={() => showModal('uploadCoverImage')}
|
||||
value={coverImage() || form.coverImageUrl ? t('Add another image') : t('Add image')}
|
||||
/>
|
||||
<Show when={coverImage() ?? form.coverImageUrl}>
|
||||
|
|
@ -276,7 +276,7 @@ export const EditView = (props: EditViewProps) => {
|
|||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<Modal variant="narrow" name="uploadImage">
|
||||
<Modal variant="narrow" name="uploadCoverImage">
|
||||
<UploadModalContent onClose={(value) => handleUploadModalContentCloseSetCover(value)} />
|
||||
</Modal>
|
||||
<Panel shoutId={props.shout.id} />
|
||||
|
|
|
|||
|
|
@ -11,6 +11,8 @@ export type ModalType =
|
|||
| 'donate'
|
||||
| 'inviteToChat'
|
||||
| 'uploadImage'
|
||||
| 'uploadCoverImage'
|
||||
|
||||
type WarnKind = 'error' | 'warn' | 'info'
|
||||
|
||||
export interface Warning {
|
||||
|
|
@ -26,7 +28,8 @@ export const MODALS: Record<ModalType, ModalType> = {
|
|||
thank: 'thank',
|
||||
donate: 'donate',
|
||||
inviteToChat: 'inviteToChat',
|
||||
uploadImage: 'uploadImage'
|
||||
uploadImage: 'uploadImage',
|
||||
uploadCoverImage: 'uploadCoverImage'
|
||||
}
|
||||
|
||||
const [modal, setModal] = createSignal<ModalType | null>(null)
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user