Merge remote-tracking branch 'gitlab/editor' into editor
This commit is contained in:
bniwredyc
commit
d5a5e79daa
|
|
@ -1,4 +1,4 @@
|
|||
import { createEffect, createSignal, Show } from 'solid-js'
|
||||
import { Switch, Match, createSignal, Show } from 'solid-js'
|
||||
import type { Editor } from '@tiptap/core'
|
||||
import styles from './EditorBubbleMenu.module.scss'
|
||||
import { Icon } from '../_shared/Icon'
|
||||
|
|
@ -7,8 +7,6 @@ import { createEditorTransaction } from 'solid-tiptap'
|
|||
import { useLocalize } from '../../context/localize'
|
||||
import validateUrl from '../../utils/validateUrl'
|
||||
|
||||
type HeadingLevel = 1 | 2 | 3
|
||||
type ActionName = 'heading' | 'bold' | 'italic' | 'blockquote' | 'isOrderedList' | 'isBulletList'
|
||||
type BubbleMenuProps = {
|
||||
editor: Editor
|
||||
ref: (el: HTMLDivElement) => void
|
||||
|
|
@ -23,20 +21,26 @@ export const EditorBubbleMenu = (props: BubbleMenuProps) => {
|
|||
const [prevUrl, setPrevUrl] = createSignal<string | null>(null)
|
||||
const [linkError, setLinkError] = createSignal<string | null>(null)
|
||||
|
||||
const activeControl = (action: ActionName, actionLevel?: HeadingLevel, prevLink?: boolean) =>
|
||||
const isActive = (name: string, attributes?: {}, checkPrevUrl?: boolean) =>
|
||||
createEditorTransaction(
|
||||
() => props.editor,
|
||||
(editor) => editor && editor.isActive(action, actionLevel && { actionLevel })
|
||||
(editor) => {
|
||||
editor && editor.isActive(name, attributes)
|
||||
if (checkPrevUrl) {
|
||||
setPrevUrl(editor && editor.getAttributes('link').href)
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
const isLink = createEditorTransaction(
|
||||
// вызов этой ф-ии обусловлен не через хэлпер activeControl только проверкой установленна ли ссылка
|
||||
() => props.editor,
|
||||
(editor) => {
|
||||
editor && editor.isActive('link')
|
||||
setPrevUrl(editor && editor.getAttributes('link').href)
|
||||
}
|
||||
)
|
||||
const isBold = isActive('bold')
|
||||
const isItalic = isActive('italic')
|
||||
const isH1 = isActive('heading', { level: 1 })
|
||||
const isH2 = isActive('heading', { level: 2 })
|
||||
const isH3 = isActive('heading', { level: 3 })
|
||||
const isBlockQuote = isActive('blockquote')
|
||||
const isOrderedList = isActive('isOrderedList')
|
||||
const isBulletList = isActive('isBulletList')
|
||||
const isLink = isActive('link', {}, true)
|
||||
|
||||
const clearLinkForm = () => {
|
||||
setUrl('')
|
||||
|
|
@ -46,7 +50,7 @@ export const EditorBubbleMenu = (props: BubbleMenuProps) => {
|
|||
const handleSubmitLink = (e) => {
|
||||
e.preventDefault()
|
||||
if (url().length > 1 && validateUrl(url())) {
|
||||
props.editor.commands.toggleLink({ href: url() })
|
||||
props.editor.chain().focus().toggleLink({ href: url() }).run()
|
||||
clearLinkForm()
|
||||
} else {
|
||||
setLinkError(t('Invalid url format'))
|
||||
|
|
@ -65,160 +69,171 @@ export const EditorBubbleMenu = (props: BubbleMenuProps) => {
|
|||
return (
|
||||
<>
|
||||
<div ref={props.ref} class={styles.bubbleMenu}>
|
||||
{linkEditorOpen() ? (
|
||||
<>
|
||||
<form onSubmit={(e) => handleSubmitLink(e)} class={styles.linkForm}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder={t('Enter URL address')}
|
||||
autofocus
|
||||
value={prevUrl() ?? null}
|
||||
onChange={(e) => setUrl(e.currentTarget.value)}
|
||||
/>
|
||||
<button type="submit">
|
||||
<Icon name="status-done" />
|
||||
</button>
|
||||
<button type="button" onClick={() => clearLinkForm()}>
|
||||
<Icon name="status-cancel" />
|
||||
</button>
|
||||
</form>
|
||||
{linkError() && <div class={styles.linkError}>{linkError()}</div>}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div class={styles.dropDownHolder}>
|
||||
<Switch>
|
||||
<Match when={linkEditorOpen()}>
|
||||
<>
|
||||
<form onSubmit={(e) => handleSubmitLink(e)} class={styles.linkForm}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder={t('Enter URL address')}
|
||||
autofocus
|
||||
value={prevUrl() ? prevUrl() : null}
|
||||
onChange={(e) => setUrl(e.currentTarget.value)}
|
||||
/>
|
||||
<button type="submit">
|
||||
<Icon name="status-done" />
|
||||
</button>
|
||||
<button type="button" onClick={() => clearLinkForm()}>
|
||||
<Icon name="status-cancel" />
|
||||
</button>
|
||||
</form>
|
||||
{linkError() && <div class={styles.linkError}>{linkError()}</div>}
|
||||
</>
|
||||
</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()}
|
||||
>
|
||||
<Icon name="editor-h1" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: isH2()
|
||||
})}
|
||||
onClick={() => props.editor.chain().focus().toggleHeading({ level: 2 }).run()}
|
||||
>
|
||||
<Icon name="editor-h2" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: isH3()
|
||||
})}
|
||||
onClick={() => props.editor.chain().focus().toggleHeading({ level: 3 }).run()}
|
||||
>
|
||||
<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()}
|
||||
>
|
||||
<Icon name="editor-blockquote" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: isBlockQuote()
|
||||
})}
|
||||
onClick={() => props.editor.chain().focus().toggleBlockquote().run()}
|
||||
>
|
||||
<Icon name="editor-quote" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
<div class={styles.delimiter} />
|
||||
<button
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: textSizeBubbleOpen()
|
||||
[styles.bubbleMenuButtonActive]: isBold()
|
||||
})}
|
||||
onClick={toggleTextSizePopup}
|
||||
onClick={() => props.editor.chain().focus().toggleBold().run()}
|
||||
>
|
||||
<Icon name="editor-text-size" />
|
||||
<Icon name="down-triangle" class={styles.triangle} />
|
||||
<Icon name="editor-bold" />
|
||||
</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]: activeControl('heading', 1)()
|
||||
})}
|
||||
onClick={() => props.editor.commands.toggleHeading({ level: 1 })}
|
||||
>
|
||||
<Icon name="editor-h1" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: activeControl('heading', 2)()
|
||||
})}
|
||||
onClick={() => props.editor.commands.toggleHeading({ level: 2 })}
|
||||
>
|
||||
<Icon name="editor-h2" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: activeControl('heading', 3)()
|
||||
})}
|
||||
onClick={() => props.editor.commands.toggleHeading({ level: 3 })}
|
||||
>
|
||||
<Icon name="editor-h3" />
|
||||
</button>
|
||||
</div>
|
||||
<header>{t('Quotes')}</header>
|
||||
<div class={styles.actions}>
|
||||
<button
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: activeControl('blockquote')()
|
||||
})}
|
||||
onClick={() => props.editor.chain().focus().toggleBlockquote().run()}
|
||||
>
|
||||
<Icon name="editor-blockquote" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
<div class={styles.delimiter} />
|
||||
<button
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: activeControl('bold')()
|
||||
})}
|
||||
onClick={() => props.editor.commands.toggleBold()}
|
||||
>
|
||||
<Icon name="editor-bold" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: activeControl('italic')()
|
||||
})}
|
||||
onClick={() => props.editor.commands.toggleItalic()}
|
||||
>
|
||||
<Icon name="editor-italic" />
|
||||
</button>
|
||||
<div class={styles.delimiter} />
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
setLinkEditorOpen(true)
|
||||
}}
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: isLink()
|
||||
})}
|
||||
>
|
||||
<Icon name="editor-link" />
|
||||
</button>
|
||||
<button type="button" class={styles.bubbleMenuButton}>
|
||||
<div class={styles.colorWheel} />
|
||||
</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}
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: isItalic()
|
||||
})}
|
||||
onClick={() => props.editor.chain().focus().toggleItalic().run()}
|
||||
>
|
||||
<Icon name="editor-ul" />
|
||||
<Icon name="down-triangle" class={styles.triangle} />
|
||||
<Icon name="editor-italic" />
|
||||
</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]: activeControl('isBulletList')
|
||||
})}
|
||||
onClick={() => props.editor.commands.toggleBulletList()}
|
||||
>
|
||||
<Icon name="editor-ul" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: activeControl('isOrderedList')
|
||||
})}
|
||||
onClick={() => props.editor.commands.toggleOrderedList()}
|
||||
>
|
||||
<Icon name="editor-ol" />
|
||||
</button>
|
||||
<div class={styles.delimiter} />
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
setLinkEditorOpen(true)
|
||||
}}
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: isLink()
|
||||
})}
|
||||
>
|
||||
<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()}
|
||||
>
|
||||
<Icon name="editor-ul" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: isOrderedList()
|
||||
})}
|
||||
onClick={() => props.editor.chain().focus().toggleOrderedList().run()}
|
||||
>
|
||||
<Icon name="editor-ol" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Show>
|
||||
</div>
|
||||
</>
|
||||
</Match>
|
||||
</Switch>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user