discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

hide dropdown

Browse Source
This commit is contained in:
ilya-bkv 2023-04-03 21:13:28 +03:00
parent bc2abbc2bd
commit 74f14f8399
1 changed files with 33 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/Editor/EditorBubbleMenu/EditorBubbleMenu.tsx
View File

@ -1,4 +1,4 @@
import { Switch, Match, createSignal, Show } from 'solid-js' import { Switch, Match, createSignal, Show, createEffect } from 'solid-js'
import type { Editor } from '@tiptap/core' import type { Editor } from '@tiptap/core'
import styles from './EditorBubbleMenu.module.scss' import styles from './EditorBubbleMenu.module.scss'
import { Icon } from '../../_shared/Icon' import { Icon } from '../../_shared/Icon'
@ -17,8 +17,6 @@ export const EditorBubbleMenu = (props: BubbleMenuProps) => {
const [textSizeBubbleOpen, setTextSizeBubbleOpen] = createSignal<boolean>(false) const [textSizeBubbleOpen, setTextSizeBubbleOpen] = createSignal<boolean>(false)
const [listBubbleOpen, setListBubbleOpen] = createSignal<boolean>(false) const [listBubbleOpen, setListBubbleOpen] = createSignal<boolean>(false)
const [linkEditorOpen, setLinkEditorOpen] = createSignal<boolean>(false) const [linkEditorOpen, setLinkEditorOpen] = createSignal<boolean>(false)
const [url, setUrl] = createSignal<string>('')
const [linkError, setLinkError] = createSignal<string | null>(null)
const isActive = (name: string, attributes?: {}) => const isActive = (name: string, attributes?: {}) =>
createEditorTransaction( createEditorTransaction(
@ -28,6 +26,10 @@ export const EditorBubbleMenu = (props: BubbleMenuProps) => {
} }
) )
createEffect(() => {
console.log('!!! editor:', props.editor)
})
const isBold = isActive('bold') const isBold = isActive('bold')
const isItalic = isActive('italic') const isItalic = isActive('italic')
const isH1 = isActive('heading', { level: 1 }) const isH1 = isActive('heading', { level: 1 })
@ -86,7 +88,10 @@ export const EditorBubbleMenu = (props: BubbleMenuProps) => {
class={clsx(styles.bubbleMenuButton, { class={clsx(styles.bubbleMenuButton, {
[styles.bubbleMenuButtonActive]: isH1() [styles.bubbleMenuButtonActive]: isH1()
})} })}
onClick={() => props.editor.chain().focus().toggleHeading({ level: 1 }).run()} onClick={() => {
props.editor.chain().focus().toggleHeading({ level: 1 }).run()
toggleTextSizePopup()
}}
> >
<Icon name="editor-h1" /> <Icon name="editor-h1" />
</button> </button>
@ -95,7 +100,10 @@ export const EditorBubbleMenu = (props: BubbleMenuProps) => {
class={clsx(styles.bubbleMenuButton, { class={clsx(styles.bubbleMenuButton, {
[styles.bubbleMenuButtonActive]: isH2() [styles.bubbleMenuButtonActive]: isH2()
})} })}
onClick={() => props.editor.chain().focus().toggleHeading({ level: 2 }).run()} onClick={() => {
props.editor.chain().focus().toggleHeading({ level: 2 }).run()
toggleTextSizePopup()
}}
> >
<Icon name="editor-h2" /> <Icon name="editor-h2" />
</button> </button>
@ -104,7 +112,10 @@ export const EditorBubbleMenu = (props: BubbleMenuProps) => {
class={clsx(styles.bubbleMenuButton, { class={clsx(styles.bubbleMenuButton, {
[styles.bubbleMenuButtonActive]: isH3() [styles.bubbleMenuButtonActive]: isH3()
})} })}
onClick={() => props.editor.chain().focus().toggleHeading({ level: 3 }).run()} onClick={() => {
props.editor.chain().focus().toggleHeading({ level: 3 }).run()
toggleTextSizePopup()
}}
> >
<Icon name="editor-h3" /> <Icon name="editor-h3" />
</button> </button>
@ -116,7 +127,10 @@ export const EditorBubbleMenu = (props: BubbleMenuProps) => {
class={clsx(styles.bubbleMenuButton, { class={clsx(styles.bubbleMenuButton, {
[styles.bubbleMenuButtonActive]: isBlockQuote() [styles.bubbleMenuButtonActive]: isBlockQuote()
})} })}
onClick={() => props.editor.chain().focus().toggleBlockquote().run()} onClick={() => {
props.editor.chain().focus().toggleBlockquote().run()
toggleTextSizePopup()
}}
> >
<Icon name="editor-blockquote" /> <Icon name="editor-blockquote" />
</button> </button>
@ -125,7 +139,10 @@ export const EditorBubbleMenu = (props: BubbleMenuProps) => {
class={clsx(styles.bubbleMenuButton, { class={clsx(styles.bubbleMenuButton, {
[styles.bubbleMenuButtonActive]: isBlockQuote() [styles.bubbleMenuButtonActive]: isBlockQuote()
})} })}
onClick={() => props.editor.chain().focus().toggleBlockquote().run()} onClick={() => {
props.editor.chain().focus().toggleBlockquote().run()
toggleTextSizePopup()
}}
> >
<Icon name="editor-quote" /> <Icon name="editor-quote" />
</button> </button>
@ -186,7 +203,10 @@ export const EditorBubbleMenu = (props: BubbleMenuProps) => {
class={clsx(styles.bubbleMenuButton, { class={clsx(styles.bubbleMenuButton, {
[styles.bubbleMenuButtonActive]: isBulletList() [styles.bubbleMenuButtonActive]: isBulletList()
})} })}
onClick={() => props.editor.chain().focus().toggleBulletList().run()} onClick={() => {
props.editor.chain().focus().toggleBulletList().run()
toggleListPopup()
}}
> >
<Icon name="editor-ul" /> <Icon name="editor-ul" />
</button> </button>
@ -195,7 +215,10 @@ export const EditorBubbleMenu = (props: BubbleMenuProps) => {
class={clsx(styles.bubbleMenuButton, { class={clsx(styles.bubbleMenuButton, {
[styles.bubbleMenuButtonActive]: isOrderedList() [styles.bubbleMenuButtonActive]: isOrderedList()
})} })}
onClick={() => props.editor.chain().focus().toggleOrderedList().run()} onClick={() => {
props.editor.chain().focus().toggleOrderedList().run()
toggleListPopup()
}}
> >
<Icon name="editor-ol" /> <Icon name="editor-ol" />
</button> </button>