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 { createEditorTransaction } from 'solid-tiptap'
|
||||
import { useLocalize } from '../../../context/localize'
|
||||
import { LinkForm } from './LinkForm'
|
||||
import validateUrl from '../../../utils/validateUrl'
|
||||
|
||||
type BubbleMenuProps = {
|
||||
|
@ -92,7 +91,6 @@ export const EditorBubbleMenu = (props: BubbleMenuProps) => {
|
|||
<Switch>
|
||||
<Match when={linkEditorOpen()}>
|
||||
<>
|
||||
{/*<LinkForm editor={props.editor} editorOpen={linkEditorOpen()} />*/}
|
||||
<div class={styles.linkForm}>
|
||||
<input
|
||||
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 styles from './EditorFloatingMenu.module.scss'
|
||||
import { Icon } from '../_shared/Icon'
|
||||
import { createSignal } from 'solid-js'
|
||||
|
||||
type FloatingMenuProps = {
|
||||
editor: Editor
|
||||
|
|
Loading…
Reference in New Issue
Block a user