diff --git a/src/components/Editor/EditorBubbleMenu.tsx b/src/components/Editor/EditorBubbleMenu.tsx
index 392630a2..fd99e803 100644
--- a/src/components/Editor/EditorBubbleMenu.tsx
+++ b/src/components/Editor/EditorBubbleMenu.tsx
@@ -1,4 +1,4 @@
-import { createEffect, createSignal, Show } from 'solid-js'
+import { Match, Switch, 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('')
@@ -45,8 +49,14 @@ export const EditorBubbleMenu = (props: BubbleMenuProps) => {
 
   const handleSubmitLink = (e) => {
     e.preventDefault()
+    if (url().length === 0) {
+      props.editor.chain().focus().unsetLink().run()
+      clearLinkForm()
+      return
+    }
+
     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 +75,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() ? 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>
     </>
   )