revert edior form
This commit is contained in:
parent
3b3d4fecbe
commit
2be4ec7f22
|
@ -5,7 +5,6 @@ import { Icon } from '../../_shared/Icon'
|
||||||
import { clsx } from 'clsx'
|
import { clsx } from 'clsx'
|
||||||
import { createEditorTransaction } from 'solid-tiptap'
|
import { createEditorTransaction } from 'solid-tiptap'
|
||||||
import { useLocalize } from '../../../context/localize'
|
import { useLocalize } from '../../../context/localize'
|
||||||
import { LinkForm } from './LinkForm'
|
|
||||||
import validateUrl from '../../../utils/validateUrl'
|
import validateUrl from '../../../utils/validateUrl'
|
||||||
|
|
||||||
type BubbleMenuProps = {
|
type BubbleMenuProps = {
|
||||||
|
@ -92,7 +91,6 @@ export const EditorBubbleMenu = (props: BubbleMenuProps) => {
|
||||||
<Switch>
|
<Switch>
|
||||||
<Match when={linkEditorOpen()}>
|
<Match when={linkEditorOpen()}>
|
||||||
<>
|
<>
|
||||||
{/*<LinkForm editor={props.editor} editorOpen={linkEditorOpen()} />*/}
|
|
||||||
<div class={styles.linkForm}>
|
<div class={styles.linkForm}>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
|
|
|
@ -1,38 +0,0 @@
|
||||||
.LnkForm {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.form {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
padding: 6px 11px;
|
|
||||||
|
|
||||||
input {
|
|
||||||
margin: 0 12px 0 0;
|
|
||||||
padding: 0;
|
|
||||||
flex: 1;
|
|
||||||
border: none;
|
|
||||||
min-width: 200px;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::placeholder {
|
|
||||||
color: rgba(#000, 0.3);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.linkError {
|
|
||||||
padding: 6px 11px;
|
|
||||||
color: red;
|
|
||||||
font-size: 0.7em;
|
|
||||||
position: absolute;
|
|
||||||
bottom: -3rem;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
background: #fff;
|
|
||||||
box-shadow: 0 4px 10px rgba(#000, 0.25);
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,78 +0,0 @@
|
||||||
import styles from './LinkForm.module.scss'
|
|
||||||
import { Icon } from '../../../_shared/Icon'
|
|
||||||
import { createEditorTransaction } from 'solid-tiptap'
|
|
||||||
import validateUrl from '../../../../utils/validateUrl'
|
|
||||||
import type { Editor } from '@tiptap/core'
|
|
||||||
import { createSignal } from 'solid-js'
|
|
||||||
import { useLocalize } from '../../../../context/localize'
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
editor: Editor
|
|
||||||
editorOpen: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
export const LinkForm = (props: Props) => {
|
|
||||||
const { t } = useLocalize()
|
|
||||||
const [editorOpen, setEditorOpen] = createSignal<boolean>(props.editorOpen)
|
|
||||||
const [url, setUrl] = createSignal<string>('')
|
|
||||||
const [linkError, setLinkError] = createSignal<string | null>(null)
|
|
||||||
|
|
||||||
createSignal(() => {
|
|
||||||
setEditorOpen(props.editorOpen)
|
|
||||||
})
|
|
||||||
const currentUrl = createEditorTransaction(
|
|
||||||
() => props.editor,
|
|
||||||
(editor) => {
|
|
||||||
return (editor && editor.getAttributes('link').href) || ''
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
const clearLinkForm = () => {
|
|
||||||
if (currentUrl()) {
|
|
||||||
props.editor.chain().focus().unsetLink().run()
|
|
||||||
}
|
|
||||||
setUrl('')
|
|
||||||
setEditorOpen(false)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleUrlChange = (value) => {
|
|
||||||
setUrl(value)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleSubmitLink = () => {
|
|
||||||
if (validateUrl(url())) {
|
|
||||||
props.editor.chain().focus().setLink({ href: url() }).run()
|
|
||||||
setEditorOpen(false)
|
|
||||||
} else {
|
|
||||||
setLinkError(t('Invalid url format'))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleKeyPress = (event) => {
|
|
||||||
const key = event.key
|
|
||||||
if (key === 'Enter') handleSubmitLink()
|
|
||||||
if (key === 'Esc') clearLinkForm()
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div class={styles.LinkForm}>
|
|
||||||
<div class={styles.form}>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder={t('Enter URL address')}
|
|
||||||
autofocus
|
|
||||||
value={currentUrl()}
|
|
||||||
onKeyPress={(e) => handleKeyPress(e)}
|
|
||||||
onChange={(e) => handleUrlChange(e.currentTarget.value)}
|
|
||||||
/>
|
|
||||||
<button type="button" onClick={() => handleSubmitLink()} disabled={linkError() !== null}>
|
|
||||||
<Icon name="status-done" />
|
|
||||||
</button>
|
|
||||||
<button type="button" onClick={() => clearLinkForm()}>
|
|
||||||
{currentUrl() ? 'Ж' : <Icon name="status-cancel" />}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{linkError() && <div class={styles.linkError}>{linkError()}</div>}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
|
@ -1 +0,0 @@
|
||||||
export { LinkForm } from './LinkForm'
|
|
|
@ -1,6 +1,7 @@
|
||||||
import type { Editor } from '@tiptap/core'
|
import type { Editor } from '@tiptap/core'
|
||||||
import styles from './EditorFloatingMenu.module.scss'
|
import styles from './EditorFloatingMenu.module.scss'
|
||||||
import { Icon } from '../_shared/Icon'
|
import { Icon } from '../_shared/Icon'
|
||||||
|
import { createSignal } from 'solid-js'
|
||||||
|
|
||||||
type FloatingMenuProps = {
|
type FloatingMenuProps = {
|
||||||
editor: Editor
|
editor: Editor
|
||||||
|
|
Loading…
Reference in New Issue
Block a user