diff --git a/packages/text-editor/src/components/CollaboratorEditor.svelte b/packages/text-editor/src/components/CollaboratorEditor.svelte
index 06a8fb6b5b..78bd7c03ce 100644
--- a/packages/text-editor/src/components/CollaboratorEditor.svelte
+++ b/packages/text-editor/src/components/CollaboratorEditor.svelte
@@ -15,59 +15,30 @@
 //
 -->
 <script lang="ts">
-  import { getEmbeddedLabel, IntlString, translate } from '@hcengineering/platform'
+  import { IntlString, translate } from '@hcengineering/platform'
 
   import { Editor, Extension, HTMLContent } from '@tiptap/core'
   import Collaboration from '@tiptap/extension-collaboration'
   import CollaborationCursor from '@tiptap/extension-collaboration-cursor'
-  import { Level } from '@tiptap/extension-heading'
   import Placeholder from '@tiptap/extension-placeholder'
 
   import { Plugin, PluginKey, Transaction } from 'prosemirror-state'
   import { createEventDispatcher, onDestroy, onMount } from 'svelte'
 
   import { getCurrentAccount, Markup } from '@hcengineering/core'
-  import {
-    getEventPositionElement,
-    getPlatformColorForText,
-    IconObjects,
-    IconSize,
-    SelectPopup,
-    showPopup,
-    themeStore
-  } from '@hcengineering/ui'
+  import { getPlatformColorForText, IconObjects, IconSize, themeStore } from '@hcengineering/ui'
   import { WebsocketProvider } from 'y-websocket'
   import * as Y from 'yjs'
   import StyleButton from './StyleButton.svelte'
 
-  import presentation from '@hcengineering/presentation'
-
   import { DecorationSet } from 'prosemirror-view'
   import textEditorPlugin from '../plugin'
-  import { CollaborationIds, FORMAT_MODES, FormatMode } from '../types'
-  import Bold from './icons/Bold.svelte'
-  import Code from './icons/Code.svelte'
-  import CodeBlock from './icons/CodeBlock.svelte'
+  import { CollaborationIds, TextFormatCategory } from '../types'
 
   import { getContext } from 'svelte'
   import { calculateDecorations } from './diff/decorations'
-  import { defaultExtensions, headingLevels, mInsertTable } from './extensions'
-  import Header from './icons/Header.svelte'
-  import IconTable from './icons/IconTable.svelte'
-  import Italic from './icons/Italic.svelte'
-  import LinkEl from './icons/Link.svelte'
-  import ListBullet from './icons/ListBullet.svelte'
-  import ListNumber from './icons/ListNumber.svelte'
-  import Quote from './icons/Quote.svelte'
-  import Strikethrough from './icons/Strikethrough.svelte'
-  import AddColAfter from './icons/table/AddColAfter.svelte'
-  import AddColBefore from './icons/table/AddColBefore.svelte'
-  import AddRowAfter from './icons/table/AddRowAfter.svelte'
-  import AddRowBefore from './icons/table/AddRowBefore.svelte'
-  import DeleteCol from './icons/table/DeleteCol.svelte'
-  import DeleteRow from './icons/table/DeleteRow.svelte'
-  import DeleteTable from './icons/table/DeleteTable.svelte'
-  import LinkPopup from './LinkPopup.svelte'
+  import { defaultExtensions } from './extensions'
+  import TextEditorStyleToolbar from './TextEditorStyleToolbar.svelte'
 
   export let documentId: string
   export let readonly = false
@@ -127,50 +98,16 @@
     editor.commands.insertContent(text as HTMLContent)
   }
 
-  export function toggleBold () {
-    editor.commands.toggleBold()
-  }
-  export function toggleItalic () {
-    editor.commands.toggleItalic()
-  }
-  export function toggleStrike () {
-    editor.commands.toggleStrike()
-  }
-
   export function getHTML (): string | undefined {
     if (editor) {
       return editor.getHTML()
     }
   }
 
-  export function getLink () {
-    return editor.getAttributes('link').href
-  }
-  export function unsetLink () {
-    editor.chain().focus().extendMarkRange('link').unsetLink().run()
-  }
-  export function setLink (link: string) {
-    editor.chain().focus().extendMarkRange('link').setLink({ href: link }).run()
-  }
-
   export function checkIsSelectionEmpty () {
     return editor.view.state.selection.empty
   }
-  export function toggleOrderedList () {
-    editor.commands.toggleOrderedList()
-  }
-  export function toggleBulletList () {
-    editor.commands.toggleBulletList()
-  }
-  export function toggleBlockquote () {
-    editor.commands.toggleBlockquote()
-  }
-  export function toggleCode () {
-    editor.commands.toggleCode()
-  }
-  export function toggleCodeBlock () {
-    editor.commands.toggleCodeBlock()
-  }
+
   let needFocus = false
 
   let focused = false
@@ -266,11 +203,9 @@
         },
         onUpdate: (op: { editor: Editor; transaction: Transaction }) => {
           dispatch('content', editor.getHTML())
-          updateFormattingState()
         },
         onSelectionUpdate: () => {
           dispatch('selection-update')
-          updateFormattingState()
         }
       })
 
@@ -291,192 +226,6 @@
     }
   })
 
-  let activeModes = new Set<FormatMode>()
-  let isSelectionEmpty = true
-
-  export function checkIsActive (formatMode: FormatMode) {
-    return editor.isActive(formatMode)
-  }
-
-  let headingLevel = 0
-
-  function updateFormattingState () {
-    activeModes = new Set(FORMAT_MODES.filter(checkIsActive))
-    for (const l of headingLevels) {
-      if (editor.isActive('heading', { level: l })) {
-        headingLevel = l
-        activeModes.add('heading')
-      }
-    }
-    if (!activeModes.has('heading')) {
-      headingLevel = 0
-    }
-    isSelectionEmpty = editor.view.state.selection.empty
-  }
-
-  function getToggler (toggle: () => void) {
-    return () => {
-      toggle()
-      needFocus = true
-      updateFormattingState()
-    }
-  }
-
-  function toggleHeader (event: MouseEvent) {
-    if (activeModes.has('heading')) {
-      editor.commands.toggleHeading({ level: headingLevel as Level })
-      needFocus = true
-      updateFormattingState()
-    } else {
-      showPopup(
-        SelectPopup,
-        {
-          value: Array.from(headingLevels).map((it) => ({ id: it.toString(), text: it.toString() }))
-        },
-        getEventPositionElement(event),
-        (val) => {
-          if (val !== undefined) {
-            editor.commands.toggleHeading({ level: parseInt(val) as Level })
-            needFocus = true
-            updateFormattingState()
-          }
-        }
-      )
-    }
-  }
-
-  function insertTable (event: MouseEvent) {
-    showPopup(
-      SelectPopup,
-      {
-        value: [
-          { id: '#delete', label: presentation.string.Remove },
-          ...mInsertTable.map((it) => ({ id: it.label, text: it.label }))
-        ]
-      },
-      getEventPositionElement(event),
-      (val) => {
-        if (val !== undefined) {
-          if (val === '#delete') {
-            editor.commands.deleteTable()
-            needFocus = true
-            updateFormattingState()
-            return
-          }
-          const tab = mInsertTable.find((it) => it.label === val)
-          if (tab) {
-            editor.commands.insertTable({
-              cols: tab.cols,
-              rows: tab.rows,
-              withHeaderRow: tab.header
-            })
-
-            needFocus = true
-            updateFormattingState()
-          }
-        }
-      }
-    )
-  }
-
-  function tableOptions (event: MouseEvent) {
-    const ops = [
-      {
-        id: '#addColumnBefore',
-        icon: AddColBefore,
-        label: textEditorPlugin.string.AddColumnBefore,
-        action: () => editor.commands.addColumnBefore(),
-        category: {
-          label: textEditorPlugin.string.CategoryColumn
-        }
-      },
-      {
-        id: '#addColumnAfter',
-        icon: AddColAfter,
-        label: textEditorPlugin.string.AddColumnAfter,
-        action: () => editor.commands.addColumnAfter(),
-        category: {
-          label: textEditorPlugin.string.CategoryColumn
-        }
-      },
-
-      {
-        id: '#deleteColumn',
-        icon: DeleteCol,
-        label: textEditorPlugin.string.DeleteColumn,
-        action: () => editor.commands.deleteColumn(),
-        category: {
-          label: textEditorPlugin.string.CategoryColumn
-        }
-      },
-      {
-        id: '#addRowBefore',
-        icon: AddRowBefore,
-        label: textEditorPlugin.string.AddRowBefore,
-        action: () => editor.commands.addRowBefore(),
-        category: {
-          label: textEditorPlugin.string.CategoryRow
-        }
-      },
-      {
-        id: '#addRowAfter',
-        icon: AddRowAfter,
-        label: textEditorPlugin.string.AddRowAfter,
-        action: () => editor.commands.addRowAfter(),
-        category: {
-          label: textEditorPlugin.string.CategoryRow
-        }
-      },
-      {
-        id: '#deleteRow',
-        icon: DeleteRow,
-        label: textEditorPlugin.string.DeleteRow,
-        action: () => editor.commands.deleteRow(),
-        category: {
-          label: textEditorPlugin.string.CategoryRow
-        }
-      },
-      {
-        id: '#deleteTable',
-        icon: DeleteTable,
-        label: textEditorPlugin.string.DeleteTable,
-        action: () => editor.commands.deleteTable(),
-        category: {
-          label: textEditorPlugin.string.Table
-        }
-      }
-    ]
-
-    showPopup(
-      SelectPopup,
-      {
-        value: ops
-      },
-      getEventPositionElement(event),
-      (val) => {
-        if (val !== undefined) {
-          const op = ops.find((it) => it.id === val)
-          if (op) {
-            op.action()
-            needFocus = true
-            updateFormattingState()
-          }
-        }
-      }
-    )
-  }
-
-  async function formatLink (): Promise<void> {
-    const link = editor.getAttributes('link').href
-
-    showPopup(LinkPopup, { link }, undefined, undefined, (newLink) => {
-      if (newLink === '') {
-        editor.chain().focus().extendMarkRange('link').unsetLink().run()
-      } else {
-        editor.chain().focus().extendMarkRange('link').setLink({ href: newLink }).run()
-      }
-    })
-  }
   let showDiff = true
 </script>
 
@@ -485,99 +234,22 @@
     {#if isFormatting && !readonly}
       <div class="formatPanelRef formatPanel flex-between clear-mins">
         <div class="flex-row-center buttons-group xsmall-gap">
-          <StyleButton
-            icon={Header}
-            size={buttonSize}
-            selected={activeModes.has('heading')}
-            showTooltip={{ label: getEmbeddedLabel(`H${headingLevel}`) }}
-            on:click={toggleHeader}
+          <TextEditorStyleToolbar
+            textEditor={editor}
+            textFormatCategories={[
+              TextFormatCategory.Heading,
+              TextFormatCategory.TextDecoration,
+              TextFormatCategory.Link,
+              TextFormatCategory.List,
+              TextFormatCategory.Quote,
+              TextFormatCategory.Code,
+              TextFormatCategory.Table
+            ]}
+            formatButtonSize={buttonSize}
+            on:focus={() => {
+              needFocus = true
+            }}
           />
-
-          <StyleButton
-            icon={Bold}
-            size={buttonSize}
-            selected={activeModes.has('bold')}
-            showTooltip={{ label: textEditorPlugin.string.Bold }}
-            on:click={getToggler(toggleBold)}
-          />
-          <StyleButton
-            icon={Italic}
-            size={buttonSize}
-            selected={activeModes.has('italic')}
-            showTooltip={{ label: textEditorPlugin.string.Italic }}
-            on:click={getToggler(toggleItalic)}
-          />
-          <StyleButton
-            icon={Strikethrough}
-            size={buttonSize}
-            selected={activeModes.has('strike')}
-            showTooltip={{ label: textEditorPlugin.string.Strikethrough }}
-            on:click={getToggler(toggleStrike)}
-          />
-          <StyleButton
-            icon={LinkEl}
-            size={buttonSize}
-            selected={activeModes.has('link')}
-            disabled={isSelectionEmpty && !activeModes.has('link')}
-            showTooltip={{ label: textEditorPlugin.string.Link }}
-            on:click={formatLink}
-          />
-          <div class="buttons-divider" />
-          <StyleButton
-            icon={ListNumber}
-            size={buttonSize}
-            selected={activeModes.has('orderedList')}
-            showTooltip={{ label: textEditorPlugin.string.OrderedList }}
-            on:click={getToggler(toggleOrderedList)}
-          />
-          <StyleButton
-            icon={ListBullet}
-            size={buttonSize}
-            selected={activeModes.has('bulletList')}
-            showTooltip={{ label: textEditorPlugin.string.BulletedList }}
-            on:click={getToggler(toggleBulletList)}
-          />
-          <div class="buttons-divider" />
-          <StyleButton
-            icon={Quote}
-            size={buttonSize}
-            selected={activeModes.has('blockquote')}
-            showTooltip={{ label: textEditorPlugin.string.Blockquote }}
-            on:click={getToggler(toggleBlockquote)}
-          />
-          <div class="buttons-divider" />
-          <StyleButton
-            icon={Code}
-            size={buttonSize}
-            selected={activeModes.has('code')}
-            showTooltip={{ label: textEditorPlugin.string.Code }}
-            on:click={getToggler(toggleCode)}
-          />
-          <StyleButton
-            icon={CodeBlock}
-            size={buttonSize}
-            selected={activeModes.has('codeBlock')}
-            showTooltip={{ label: textEditorPlugin.string.CodeBlock }}
-            on:click={getToggler(toggleCodeBlock)}
-          />
-
-          <StyleButton
-            icon={IconTable}
-            iconProps={{ style: 'table' }}
-            size={buttonSize}
-            selected={activeModes.has('table')}
-            on:click={insertTable}
-            showTooltip={{ label: textEditorPlugin.string.InsertTable }}
-          />
-          {#if activeModes.has('table')}
-            <StyleButton
-              icon={IconTable}
-              iconProps={{ style: 'tableProps' }}
-              size={buttonSize}
-              on:click={tableOptions}
-              showTooltip={{ label: textEditorPlugin.string.TableOptions }}
-            />
-          {/if}
         </div>
         <div class="flex-grow" />
         {#if comparedVersion !== undefined}
diff --git a/packages/text-editor/src/components/ReferenceInput.svelte b/packages/text-editor/src/components/ReferenceInput.svelte
index d5b67968b8..988632b861 100644
--- a/packages/text-editor/src/components/ReferenceInput.svelte
+++ b/packages/text-editor/src/components/ReferenceInput.svelte
@@ -17,7 +17,6 @@
   import { getClient } from '@hcengineering/presentation'
   import {
     AnySvelteComponent,
-    Button,
     EmojiPopup,
     Icon,
     IconEmoji,
@@ -32,22 +31,11 @@
   import { createEventDispatcher } from 'svelte'
   import { Completion } from '../Completion'
   import textEditorPlugin from '../plugin'
-  import { FORMAT_MODES, FormatMode, RefAction, RefInputActionItem, TextEditorHandler } from '../types'
-  import LinkPopup from './LinkPopup.svelte'
+  import { RefAction, RefInputActionItem, TextEditorHandler, TextFormatCategory } from '../types'
   import TextEditor from './TextEditor.svelte'
   import { completionConfig } from './extensions'
   import Attach from './icons/Attach.svelte'
-  import CodeBlock from './icons/CodeBlock.svelte'
-  import ListBullet from './icons/ListBullet.svelte'
-  import ListNumber from './icons/ListNumber.svelte'
-  import Quote from './icons/Quote.svelte'
-  import Bold from './icons/Bold.svelte'
-  import Code from './icons/Code.svelte'
-  import Italic from './icons/Italic.svelte'
-  import Link from './icons/Link.svelte'
   import RIMention from './icons/RIMention.svelte'
-  import RIStrikethrough from './icons/RIStrikethrough.svelte'
-  import Underline from './icons/Underline.svelte'
   import Send from './icons/Send.svelte'
 
   const dispatch = createEventDispatcher()
@@ -64,10 +52,7 @@
   const client = getClient()
 
   let textEditor: TextEditor
-  let textEditorToolbar: HTMLElement
 
-  let activeModes = new Set<FormatMode>()
-  let isSelectionEmpty = true
   let isEmpty = true
 
   $: setContent(content)
@@ -142,34 +127,6 @@
     a.action(evt?.target as HTMLElement, editorHandler)
   }
 
-  function updateFormattingState () {
-    if (textEditor?.checkIsActive === undefined) {
-      return
-    }
-    activeModes = new Set(FORMAT_MODES.filter(textEditor.checkIsActive))
-    isSelectionEmpty = textEditor.checkIsSelectionEmpty()
-  }
-
-  function getToggler (toggle: () => void) {
-    return () => {
-      toggle()
-      textEditor.focus()
-      updateFormattingState()
-    }
-  }
-
-  async function formatLink (): Promise<void> {
-    const link = textEditor.getLink()
-
-    showPopup(LinkPopup, { link }, undefined, undefined, (newLink) => {
-      if (newLink === '') {
-        textEditor.unsetLink()
-      } else {
-        textEditor.setLink(newLink)
-      }
-    })
-  }
-
   // Focusable control with index
   let focused = false
   export let focusIndex = -1
@@ -198,92 +155,6 @@
 </script>
 
 <div class="ref-container">
-  <div class="formatPanel buttons-group xsmall-gap mb-4" class:withoutTopBorder bind:this={textEditorToolbar}>
-    <Button
-      icon={Bold}
-      kind={'ghost'}
-      size={'small'}
-      selected={activeModes.has('bold')}
-      showTooltip={{ label: textEditorPlugin.string.Bold }}
-      on:click={getToggler(textEditor.toggleBold)}
-    />
-    <Button
-      icon={Italic}
-      kind={'ghost'}
-      size={'small'}
-      selected={activeModes.has('italic')}
-      showTooltip={{ label: textEditorPlugin.string.Italic }}
-      on:click={getToggler(textEditor.toggleItalic)}
-    />
-    <Button
-      icon={RIStrikethrough}
-      kind={'ghost'}
-      size={'small'}
-      selected={activeModes.has('strike')}
-      showTooltip={{ label: textEditorPlugin.string.Strikethrough }}
-      on:click={getToggler(textEditor.toggleStrike)}
-    />
-    <Button
-      icon={Underline}
-      kind={'ghost'}
-      size={'small'}
-      selected={activeModes.has('underline')}
-      showTooltip={{ label: textEditorPlugin.string.Underlined }}
-      on:click={getToggler(textEditor.toggleUnderline)}
-    />
-    <Button
-      icon={Link}
-      kind={'ghost'}
-      size={'small'}
-      selected={activeModes.has('link')}
-      disabled={isSelectionEmpty && !activeModes.has('link')}
-      showTooltip={{ label: textEditorPlugin.string.Link }}
-      on:click={formatLink}
-    />
-    <div class="buttons-divider" />
-    <Button
-      icon={ListNumber}
-      kind={'ghost'}
-      size={'small'}
-      selected={activeModes.has('orderedList')}
-      showTooltip={{ label: textEditorPlugin.string.OrderedList }}
-      on:click={getToggler(textEditor.toggleOrderedList)}
-    />
-    <Button
-      icon={ListBullet}
-      kind={'ghost'}
-      size={'small'}
-      selected={activeModes.has('bulletList')}
-      showTooltip={{ label: textEditorPlugin.string.BulletedList }}
-      on:click={getToggler(textEditor.toggleBulletList)}
-    />
-    <div class="buttons-divider" />
-    <Button
-      icon={Quote}
-      kind={'ghost'}
-      size={'small'}
-      selected={activeModes.has('blockquote')}
-      showTooltip={{ label: textEditorPlugin.string.Blockquote }}
-      on:click={getToggler(textEditor.toggleBlockquote)}
-    />
-    <div class="buttons-divider" />
-    <Button
-      icon={Code}
-      kind={'ghost'}
-      size={'small'}
-      selected={activeModes.has('code')}
-      showTooltip={{ label: textEditorPlugin.string.Code }}
-      on:click={getToggler(textEditor.toggleCode)}
-    />
-    <Button
-      icon={CodeBlock}
-      kind={'ghost'}
-      size={'small'}
-      selected={activeModes.has('codeBlock')}
-      showTooltip={{ label: textEditorPlugin.string.CodeBlock }}
-      on:click={getToggler(textEditor.toggleCodeBlock)}
-    />
-  </div>
   <div class="textInput" class:withoutTopBorder>
     <div class="inputMsg">
       <TextEditor
@@ -307,10 +178,15 @@
           dispatch('focus', focused)
         }}
         extensions={[completionPlugin]}
-        on:selection-update={updateFormattingState}
         on:update
         placeholder={placeholder ?? textEditorPlugin.string.EditorPlaceholder}
-        {textEditorToolbar}
+        textFormatCategories={[
+          TextFormatCategory.TextDecoration,
+          TextFormatCategory.Link,
+          TextFormatCategory.List,
+          TextFormatCategory.Quote,
+          TextFormatCategory.Code
+        ]}
       />
     </div>
     {#if showSend}
@@ -371,10 +247,6 @@
 </div>
 
 <style lang="scss">
-  .buttons-divider {
-    height: 1rem;
-    max-height: 1rem;
-  }
   .icon-button {
     display: flex;
     justify-content: center;
@@ -400,21 +272,6 @@
     flex-direction: column;
     min-height: 4.5rem;
 
-    .formatPanelRef {
-      padding: 0.5rem;
-      background-color: var(--theme-comp-header-color);
-      border: 1px solid var(--theme-refinput-divider);
-      border-radius: 0.5rem 0.5rem 0 0;
-      border-bottom: 0;
-
-      &.withoutTopBorder {
-        border-radius: 0;
-      }
-      & + .textInput {
-        border-top: none;
-      }
-    }
-
     .textInput {
       display: flex;
       justify-content: space-between;
@@ -484,14 +341,5 @@
         }
       }
     }
-
-    .formatPanel {
-      margin: -0.5rem -0.25rem 0.5rem;
-      padding: 0.375rem;
-      background-color: var(--theme-comp-header-color);
-      border-radius: 0.5rem;
-      box-shadow: var(--theme-popup-shadow);
-      z-index: 1;
-    }
   }
 </style>
diff --git a/packages/text-editor/src/components/StyledTextEditor.svelte b/packages/text-editor/src/components/StyledTextEditor.svelte
index 5f6248740b..608319b82d 100644
--- a/packages/text-editor/src/components/StyledTextEditor.svelte
+++ b/packages/text-editor/src/components/StyledTextEditor.svelte
@@ -13,46 +13,14 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Asset, getEmbeddedLabel, getResource, IntlString } from '@hcengineering/platform'
-  import presentation, { getClient } from '@hcengineering/presentation'
-  import {
-    AnySvelteComponent,
-    EmojiPopup,
-    getEventPositionElement,
-    IconEmoji,
-    IconSize,
-    Scroller,
-    SelectPopup,
-    showPopup
-  } from '@hcengineering/ui'
-  import { Level } from '@tiptap/extension-heading'
+  import { Asset, getResource, IntlString } from '@hcengineering/platform'
+  import { getClient } from '@hcengineering/presentation'
+  import { AnySvelteComponent, EmojiPopup, IconEmoji, IconSize, Scroller, showPopup } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import textEditorPlugin from '../plugin'
-  import { FORMAT_MODES, FormatMode, RefInputAction, RefInputActionItem, TextEditorHandler } from '../types'
-  import { headingLevels, mInsertTable } from './extensions'
+  import { RefInputAction, RefInputActionItem, TextEditorHandler, TextFormatCategory } from '../types'
   import Attach from './icons/Attach.svelte'
-  import CodeBlock from './icons/CodeBlock.svelte'
-  import Header1 from './icons/Header1.svelte'
-  import Header2 from './icons/Header2.svelte'
-  import IconTable from './icons/IconTable.svelte'
-  import ListBullet from './icons/ListBullet.svelte'
-  import ListNumber from './icons/ListNumber.svelte'
-  import Quote from './icons/Quote.svelte'
-  import Bold from './icons/Bold.svelte'
-  import Code from './icons/Code.svelte'
-  import Italic from './icons/Italic.svelte'
-  import Link from './icons/Link.svelte'
-  import RIStrikethrough from './icons/RIStrikethrough.svelte'
-  import Underline from './icons/Underline.svelte'
   import { AnyExtension } from '@tiptap/core'
-  import AddColAfter from './icons/table/AddColAfter.svelte'
-  import AddColBefore from './icons/table/AddColBefore.svelte'
-  import AddRowAfter from './icons/table/AddRowAfter.svelte'
-  import AddRowBefore from './icons/table/AddRowBefore.svelte'
-  import DeleteCol from './icons/table/DeleteCol.svelte'
-  import DeleteRow from './icons/table/DeleteRow.svelte'
-  import DeleteTable from './icons/table/DeleteTable.svelte'
-  import LinkPopup from './LinkPopup.svelte'
   import StyleButton from './StyleButton.svelte'
   import TextEditor from './TextEditor.svelte'
   import { Node as ProseMirrorNode } from '@tiptap/pm/model'
@@ -68,14 +36,21 @@
   export let isScrollable: boolean = true
   export let focusable: boolean = false
   export let maxHeight: 'max' | 'card' | 'limited' | string | undefined = undefined
-  export let withoutTopBorder = false
   export let enableFormatting = false
   export let autofocus = false
   export let full = false
   export let extensions: AnyExtension[] = []
+  export let textFormatCategories: TextFormatCategory[] = [
+    TextFormatCategory.Heading,
+    TextFormatCategory.TextDecoration,
+    TextFormatCategory.Link,
+    TextFormatCategory.List,
+    TextFormatCategory.Quote,
+    TextFormatCategory.Code,
+    TextFormatCategory.Table
+  ]
 
   let textEditor: TextEditor
-  let textEditorToolbar: HTMLElement
 
   let isEmpty = true
   let contentHeight: number
@@ -122,9 +97,6 @@
           ? 'max-content'
           : maxHeight
 
-  let activeModes = new Set<FormatMode>()
-  let isSelectionEmpty = true
-
   interface RefAction {
     label: IntlString
     icon: Asset | AnySvelteComponent
@@ -176,43 +148,6 @@
     actions = defActions.concat(...cont).sort((a, b) => a.order - b.order)
   })
 
-  function updateFormattingState () {
-    if (textEditor?.checkIsActive === undefined) {
-      return
-    }
-    activeModes = new Set(FORMAT_MODES.filter(textEditor.checkIsActive))
-    for (const l of headingLevels) {
-      if (textEditor.checkIsActive('heading', { level: l })) {
-        activeModes.add('heading')
-        if (l === 1) {
-          activeModes.add('heading1')
-        } else if (l === 2) {
-          activeModes.add('heading2')
-        }
-      }
-    }
-    isSelectionEmpty = textEditor.checkIsSelectionEmpty()
-  }
-
-  function getToggler (toggle: () => void) {
-    return () => {
-      toggle()
-      textEditor.focus()
-      updateFormattingState()
-    }
-  }
-
-  async function formatLink (): Promise<void> {
-    const link = textEditor.getLink()
-
-    showPopup(LinkPopup, { link }, undefined, undefined, (newLink) => {
-      if (newLink === '') {
-        textEditor.unsetLink()
-      } else {
-        textEditor.setLink(newLink)
-      }
-    })
-  }
   const editorHandler: TextEditorHandler = {
     insertText: (text) => {
       textEditor.insertText(text)
@@ -234,135 +169,6 @@
     needFocus = false
   }
 
-  function getHeaderToggler (level: Level) {
-    return () => {
-      textEditor.toggleHeading({ level })
-      needFocus = true
-      updateFormattingState()
-    }
-  }
-
-  function insertTable (event: MouseEvent) {
-    showPopup(
-      SelectPopup,
-      {
-        value: [
-          { id: '#delete', label: presentation.string.Remove },
-          ...mInsertTable.map((it) => ({ id: it.label, text: it.label }))
-        ]
-      },
-      getEventPositionElement(event),
-      (val) => {
-        if (val !== undefined) {
-          if (val === '#delete') {
-            textEditor.deleteTable()
-            needFocus = true
-            updateFormattingState()
-            return
-          }
-          const tab = mInsertTable.find((it) => it.label === val)
-          if (tab) {
-            textEditor.insertTable({
-              cols: tab.cols,
-              rows: tab.rows,
-              withHeaderRow: tab.header
-            })
-
-            needFocus = true
-            updateFormattingState()
-          }
-        }
-      }
-    )
-  }
-
-  function tableOptions (event: MouseEvent) {
-    const ops = [
-      {
-        id: '#addColumnBefore',
-        icon: AddColBefore,
-        label: textEditorPlugin.string.AddColumnBefore,
-        action: () => textEditor.addColumnBefore(),
-        category: {
-          label: textEditorPlugin.string.CategoryColumn
-        }
-      },
-      {
-        id: '#addColumnAfter',
-        icon: AddColAfter,
-        label: textEditorPlugin.string.AddColumnAfter,
-        action: () => textEditor.addColumnAfter(),
-        category: {
-          label: textEditorPlugin.string.CategoryColumn
-        }
-      },
-
-      {
-        id: '#deleteColumn',
-        icon: DeleteCol,
-        label: textEditorPlugin.string.DeleteColumn,
-        action: () => textEditor.deleteColumn(),
-        category: {
-          label: textEditorPlugin.string.CategoryColumn
-        }
-      },
-      {
-        id: '#addRowBefore',
-        icon: AddRowBefore,
-        label: textEditorPlugin.string.AddRowBefore,
-        action: () => textEditor.addRowBefore(),
-        category: {
-          label: textEditorPlugin.string.CategoryRow
-        }
-      },
-      {
-        id: '#addRowAfter',
-        icon: AddRowAfter,
-        label: textEditorPlugin.string.AddRowAfter,
-        action: () => textEditor.addRowAfter(),
-        category: {
-          label: textEditorPlugin.string.CategoryRow
-        }
-      },
-      {
-        id: '#deleteRow',
-        icon: DeleteRow,
-        label: textEditorPlugin.string.DeleteRow,
-        action: () => textEditor.deleteRow(),
-        category: {
-          label: textEditorPlugin.string.CategoryRow
-        }
-      },
-      {
-        id: '#deleteTable',
-        icon: DeleteTable,
-        label: textEditorPlugin.string.DeleteTable,
-        action: () => textEditor.deleteTable(),
-        category: {
-          label: textEditorPlugin.string.Table
-        }
-      }
-    ]
-
-    showPopup(
-      SelectPopup,
-      {
-        value: ops
-      },
-      getEventPositionElement(event),
-      (val) => {
-        if (val !== undefined) {
-          const op = ops.find((it) => it.id === val)
-          if (op) {
-            op.action()
-            needFocus = true
-            updateFormattingState()
-          }
-        }
-      }
-    )
-  }
-
   const buttonsGap = 'small-gap'
 
   $: buttonsHeight =
@@ -387,113 +193,6 @@
   tabindex="-1"
   on:click|preventDefault|stopPropagation={() => (needFocus = true)}
 >
-  <div class="formatPanel buttons-group xsmall-gap mb-4" class:withoutTopBorder bind:this={textEditorToolbar}>
-    <StyleButton
-      icon={Header1}
-      size={formatButtonSize}
-      selected={activeModes.has('heading1')}
-      showTooltip={{ label: getEmbeddedLabel('H1') }}
-      on:click={getHeaderToggler(1)}
-    />
-    <StyleButton
-      icon={Header2}
-      size={formatButtonSize}
-      selected={activeModes.has('heading2')}
-      showTooltip={{ label: getEmbeddedLabel('H2') }}
-      on:click={getHeaderToggler(2)}
-    />
-    <StyleButton
-      icon={Bold}
-      size={formatButtonSize}
-      selected={activeModes.has('bold')}
-      showTooltip={{ label: textEditorPlugin.string.Bold }}
-      on:click={getToggler(textEditor.toggleBold)}
-    />
-    <StyleButton
-      icon={Italic}
-      size={formatButtonSize}
-      selected={activeModes.has('italic')}
-      showTooltip={{ label: textEditorPlugin.string.Italic }}
-      on:click={getToggler(textEditor.toggleItalic)}
-    />
-    <StyleButton
-      icon={RIStrikethrough}
-      size={formatButtonSize}
-      selected={activeModes.has('strike')}
-      showTooltip={{ label: textEditorPlugin.string.Strikethrough }}
-      on:click={getToggler(textEditor.toggleStrike)}
-    />
-    <StyleButton
-      icon={Underline}
-      size={formatButtonSize}
-      selected={activeModes.has('underline')}
-      showTooltip={{ label: textEditorPlugin.string.Underlined }}
-      on:click={getToggler(textEditor.toggleUnderline)}
-    />
-    <StyleButton
-      icon={Link}
-      size={formatButtonSize}
-      selected={activeModes.has('link')}
-      disabled={isSelectionEmpty && !activeModes.has('link')}
-      showTooltip={{ label: textEditorPlugin.string.Link }}
-      on:click={formatLink}
-    />
-    <div class="buttons-divider" />
-    <StyleButton
-      icon={ListNumber}
-      size={formatButtonSize}
-      selected={activeModes.has('orderedList')}
-      showTooltip={{ label: textEditorPlugin.string.OrderedList }}
-      on:click={getToggler(textEditor.toggleOrderedList)}
-    />
-    <StyleButton
-      icon={ListBullet}
-      size={formatButtonSize}
-      selected={activeModes.has('bulletList')}
-      showTooltip={{ label: textEditorPlugin.string.BulletedList }}
-      on:click={getToggler(textEditor.toggleBulletList)}
-    />
-    <div class="buttons-divider" />
-    <StyleButton
-      icon={Quote}
-      size={formatButtonSize}
-      selected={activeModes.has('blockquote')}
-      showTooltip={{ label: textEditorPlugin.string.Blockquote }}
-      on:click={getToggler(textEditor.toggleBlockquote)}
-    />
-    <div class="buttons-divider" />
-    <StyleButton
-      icon={Code}
-      size={formatButtonSize}
-      selected={activeModes.has('code')}
-      showTooltip={{ label: textEditorPlugin.string.Code }}
-      on:click={getToggler(textEditor.toggleCode)}
-    />
-    <StyleButton
-      icon={CodeBlock}
-      size={formatButtonSize}
-      selected={activeModes.has('codeBlock')}
-      showTooltip={{ label: textEditorPlugin.string.CodeBlock }}
-      on:click={getToggler(textEditor.toggleCodeBlock)}
-    />
-    <StyleButton
-      icon={IconTable}
-      iconProps={{ style: 'table' }}
-      size={formatButtonSize}
-      selected={activeModes.has('table')}
-      on:click={insertTable}
-      showTooltip={{ label: textEditorPlugin.string.InsertTable }}
-    />
-    {#if activeModes.has('table')}
-      <StyleButton
-        icon={IconTable}
-        iconProps={{ style: 'tableProps' }}
-        size={formatButtonSize}
-        on:click={tableOptions}
-        showTooltip={{ label: textEditorPlugin.string.TableOptions }}
-      />
-    {/if}
-  </div>
   <div class="textInput" class:focusable>
     <div
       bind:clientHeight={contentHeight}
@@ -507,6 +206,7 @@
             bind:content
             {placeholder}
             {extensions}
+            {textFormatCategories}
             bind:this={textEditor}
             bind:isEmpty
             on:value
@@ -518,8 +218,6 @@
             on:blur
             on:focus
             supportSubmit={false}
-            {textEditorToolbar}
-            on:selection-update={updateFormattingState}
           />
         </Scroller>
       {:else}
@@ -527,6 +225,7 @@
           bind:content
           {placeholder}
           {extensions}
+          {textFormatCategories}
           bind:this={textEditor}
           bind:isEmpty
           on:value
@@ -538,8 +237,6 @@
           on:blur
           on:focus
           supportSubmit={false}
-          {textEditorToolbar}
-          on:selection-update={updateFormattingState}
         />
       {/if}
     </div>
@@ -628,14 +325,5 @@
         }
       }
     }
-
-    .formatPanel {
-      margin: -0.5rem -0.25rem 0.5rem;
-      padding: 0.375rem;
-      background-color: var(--theme-comp-header-color);
-      border-radius: 0.5rem;
-      box-shadow: var(--theme-popup-shadow);
-      z-index: 1;
-    }
   }
 </style>
diff --git a/packages/text-editor/src/components/TextEditor.svelte b/packages/text-editor/src/components/TextEditor.svelte
index 1629a92d4a..56c78ed48b 100644
--- a/packages/text-editor/src/components/TextEditor.svelte
+++ b/packages/text-editor/src/components/TextEditor.svelte
@@ -18,23 +18,24 @@
 
   import { FocusPosition } from '@tiptap/core'
   import { AnyExtension, Editor, Extension, HTMLContent, isTextSelection } from '@tiptap/core'
-  import { Level } from '@tiptap/extension-heading'
+
   import Placeholder from '@tiptap/extension-placeholder'
   import BubbleMenu from '@tiptap/extension-bubble-menu'
 
   import { createEventDispatcher, onDestroy, onMount } from 'svelte'
   import textEditorPlugin from '../plugin'
-  import { FormatMode } from '../types'
   import { defaultExtensions } from './extensions'
   import { Node as ProseMirrorNode } from '@tiptap/pm/model'
   import { themeStore } from '@hcengineering/ui'
+  import TextEditorStyleToolbar from './TextEditorStyleToolbar.svelte'
+  import { TextFormatCategory } from '../types'
 
   export let content: string = ''
   export let placeholder: IntlString = textEditorPlugin.string.EditorPlaceholder
   export let extensions: AnyExtension[] = []
+  export let textFormatCategories: TextFormatCategory[] = []
   export let supportSubmit = true
   export let isEmpty = true
-  export let textEditorToolbar: HTMLElement | null = null
 
   let element: HTMLElement
   let editor: Editor
@@ -75,79 +76,6 @@
   export function insertText (text: string): void {
     editor.commands.insertContent(text as HTMLContent)
   }
-  export function checkIsActive (formatMode: FormatMode, attributes?: {} | undefined) {
-    return editor.isActive(formatMode, attributes)
-  }
-  export function toggleBold () {
-    editor.commands.toggleBold()
-  }
-  export function toggleItalic () {
-    editor.commands.toggleItalic()
-  }
-  export function toggleStrike () {
-    editor.commands.toggleStrike()
-  }
-  export function toggleUnderline () {
-    editor.commands.toggleUnderline()
-  }
-  export function getLink () {
-    return editor.getAttributes('link').href
-  }
-  export function unsetLink () {
-    editor.chain().focus().extendMarkRange('link').unsetLink().run()
-  }
-  export function setLink (link: string) {
-    editor.chain().focus().extendMarkRange('link').setLink({ href: link }).run()
-  }
-  export function checkIsSelectionEmpty () {
-    return editor.view.state.selection.empty
-  }
-  export function toggleOrderedList () {
-    editor.commands.toggleOrderedList()
-  }
-  export function toggleBulletList () {
-    editor.commands.toggleBulletList()
-  }
-  export function toggleBlockquote () {
-    editor.commands.toggleBlockquote()
-  }
-  export function toggleCode () {
-    editor.commands.toggleCode()
-  }
-  export function toggleCodeBlock () {
-    editor.commands.toggleCodeBlock()
-  }
-  export function toggleHeading (attributes: { level: Level }) {
-    editor.commands.toggleHeading(attributes)
-  }
-  export function addColumnBefore () {
-    editor.commands.addColumnBefore()
-  }
-  export function addColumnAfter () {
-    editor.commands.addColumnAfter()
-  }
-  export function deleteColumn () {
-    editor.commands.deleteColumn()
-  }
-  export function addRowBefore () {
-    editor.commands.addRowBefore()
-  }
-  export function addRowAfter () {
-    editor.commands.addRowAfter()
-  }
-  export function deleteRow () {
-    editor.commands.deleteRow()
-  }
-  export function deleteTable () {
-    editor.commands.deleteTable()
-  }
-  export function insertTable (options?: { rows?: number; cols?: number; withHeaderRow?: boolean }) {
-    editor.commands.insertTable({
-      cols: options?.cols ?? 2,
-      rows: options?.rows ?? 1,
-      withHeaderRow: options?.withHeaderRow
-    })
-  }
 
   export function isEmptyContent (): boolean {
     return isEmpty
@@ -157,6 +85,7 @@
   let focused = false
   let posFocus: FocusPosition | undefined = undefined
   let showContextMenu = false
+  let textEditorToolbar: HTMLElement
 
   export function focus (position?: FocusPosition): void {
     posFocus = position
@@ -216,7 +145,9 @@
           ...extensions,
           BubbleMenu.configure({
             element: textEditorToolbar,
-
+            tippyOptions: {
+              maxWidth: '38rem'
+            },
             // to override shouldShow behaviour a little
             // I need to copypaste original function and make a little change
             // with showContextMenu falg
@@ -318,6 +249,15 @@
   }
 </script>
 
+<div class="formatPanel buttons-group xsmall-gap mb-4" bind:this={textEditorToolbar}>
+  <TextEditorStyleToolbar
+    textEditor={editor}
+    {textFormatCategories}
+    on:focus={() => {
+      needFocus = true
+    }}
+  />
+</div>
 <div class="select-text" style="width: 100%;" on:mousedown={onEditorClick} bind:this={element} />
 
 <style lang="scss" global>
@@ -363,4 +303,13 @@
       margin: 0;
     }
   }
+
+  .formatPanel {
+    margin: -0.5rem -0.25rem 0.5rem;
+    padding: 0.375rem;
+    background-color: var(--theme-comp-header-color);
+    border-radius: 0.5rem;
+    box-shadow: var(--theme-popup-shadow);
+    z-index: 1;
+  }
 </style>
diff --git a/packages/text-editor/src/components/TextEditorStyleToolbar.svelte b/packages/text-editor/src/components/TextEditorStyleToolbar.svelte
new file mode 100644
index 0000000000..a2297bf631
--- /dev/null
+++ b/packages/text-editor/src/components/TextEditorStyleToolbar.svelte
@@ -0,0 +1,321 @@
+<!--
+// Copyright © 2020 Anticrm Platform Contributors.
+// 
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+// 
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// 
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte'
+  import { getEmbeddedLabel } from '@hcengineering/platform'
+  import presentation from '@hcengineering/presentation'
+  import { getEventPositionElement, IconSize, SelectPopup, showPopup } from '@hcengineering/ui'
+  import { Editor } from '@tiptap/core'
+  import { Level } from '@tiptap/extension-heading'
+  import textEditorPlugin from '../plugin'
+  import { TextFormatCategory } from '../types'
+  import { mInsertTable } from './extensions'
+  import Bold from './icons/Bold.svelte'
+  import Code from './icons/Code.svelte'
+  import CodeBlock from './icons/CodeBlock.svelte'
+  import Header1 from './icons/Header1.svelte'
+  import Header2 from './icons/Header2.svelte'
+  import IconTable from './icons/IconTable.svelte'
+  import Italic from './icons/Italic.svelte'
+  import Link from './icons/Link.svelte'
+  import ListBullet from './icons/ListBullet.svelte'
+  import ListNumber from './icons/ListNumber.svelte'
+  import Quote from './icons/Quote.svelte'
+  import RIStrikethrough from './icons/RIStrikethrough.svelte'
+  import Underline from './icons/Underline.svelte'
+  import AddColAfter from './icons/table/AddColAfter.svelte'
+  import AddColBefore from './icons/table/AddColBefore.svelte'
+  import AddRowAfter from './icons/table/AddRowAfter.svelte'
+  import AddRowBefore from './icons/table/AddRowBefore.svelte'
+  import DeleteCol from './icons/table/DeleteCol.svelte'
+  import DeleteRow from './icons/table/DeleteRow.svelte'
+  import DeleteTable from './icons/table/DeleteTable.svelte'
+  import LinkPopup from './LinkPopup.svelte'
+  import StyleButton from './StyleButton.svelte'
+
+  export let formatButtonSize: IconSize = 'small'
+  export let textEditor: Editor
+  export let textFormatCategories: TextFormatCategory[] = []
+
+  const dispatch = createEventDispatcher()
+
+  function getToggler (toggle: () => void) {
+    return () => {
+      toggle()
+      dispatch('focus')
+    }
+  }
+
+  async function formatLink (): Promise<void> {
+    const link = textEditor.getAttributes('link').href
+
+    showPopup(LinkPopup, { link }, undefined, undefined, (newLink) => {
+      if (newLink === '') {
+        textEditor.chain().focus().extendMarkRange('link').unsetLink().run()
+      } else {
+        textEditor.chain().focus().extendMarkRange('link').setLink({ href: newLink }).run()
+      }
+    })
+  }
+
+  function getHeaderToggler (level: Level) {
+    return () => {
+      textEditor.commands.toggleHeading({ level })
+      dispatch('focus')
+    }
+  }
+
+  function insertTable (event: MouseEvent) {
+    showPopup(
+      SelectPopup,
+      {
+        value: [
+          { id: '#delete', label: presentation.string.Remove },
+          ...mInsertTable.map((it) => ({ id: it.label, text: it.label }))
+        ]
+      },
+      getEventPositionElement(event),
+      (val) => {
+        if (val !== undefined) {
+          if (val === '#delete') {
+            textEditor.commands.deleteTable()
+            dispatch('focus')
+            return
+          }
+          const tab = mInsertTable.find((it) => it.label === val)
+          if (tab) {
+            textEditor.commands.insertTable({
+              cols: tab.cols,
+              rows: tab.rows,
+              withHeaderRow: tab.header
+            })
+
+            dispatch('focus')
+          }
+        }
+      }
+    )
+  }
+
+  function tableOptions (event: MouseEvent) {
+    const ops = [
+      {
+        id: '#addColumnBefore',
+        icon: AddColBefore,
+        label: textEditorPlugin.string.AddColumnBefore,
+        action: () => textEditor.commands.addColumnBefore(),
+        category: {
+          label: textEditorPlugin.string.CategoryColumn
+        }
+      },
+      {
+        id: '#addColumnAfter',
+        icon: AddColAfter,
+        label: textEditorPlugin.string.AddColumnAfter,
+        action: () => textEditor.commands.addColumnAfter(),
+        category: {
+          label: textEditorPlugin.string.CategoryColumn
+        }
+      },
+
+      {
+        id: '#deleteColumn',
+        icon: DeleteCol,
+        label: textEditorPlugin.string.DeleteColumn,
+        action: () => textEditor.commands.deleteColumn(),
+        category: {
+          label: textEditorPlugin.string.CategoryColumn
+        }
+      },
+      {
+        id: '#addRowBefore',
+        icon: AddRowBefore,
+        label: textEditorPlugin.string.AddRowBefore,
+        action: () => textEditor.commands.addRowBefore(),
+        category: {
+          label: textEditorPlugin.string.CategoryRow
+        }
+      },
+      {
+        id: '#addRowAfter',
+        icon: AddRowAfter,
+        label: textEditorPlugin.string.AddRowAfter,
+        action: () => textEditor.commands.addRowAfter(),
+        category: {
+          label: textEditorPlugin.string.CategoryRow
+        }
+      },
+      {
+        id: '#deleteRow',
+        icon: DeleteRow,
+        label: textEditorPlugin.string.DeleteRow,
+        action: () => textEditor.commands.deleteRow(),
+        category: {
+          label: textEditorPlugin.string.CategoryRow
+        }
+      },
+      {
+        id: '#deleteTable',
+        icon: DeleteTable,
+        label: textEditorPlugin.string.DeleteTable,
+        action: () => textEditor.commands.deleteTable(),
+        category: {
+          label: textEditorPlugin.string.Table
+        }
+      }
+    ]
+
+    showPopup(
+      SelectPopup,
+      {
+        value: ops
+      },
+      getEventPositionElement(event),
+      (val) => {
+        if (val !== undefined) {
+          const op = ops.find((it) => it.id === val)
+          if (op) {
+            op.action()
+            dispatch('focus')
+          }
+        }
+      }
+    )
+  }
+</script>
+
+{#if textEditor}
+  {#each textFormatCategories as category, index}
+    {#if category === TextFormatCategory.Heading}
+      <StyleButton
+        icon={Header1}
+        size={formatButtonSize}
+        selected={textEditor.isActive('heading', { level: 1 })}
+        showTooltip={{ label: getEmbeddedLabel('H1') }}
+        on:click={getHeaderToggler(1)}
+      />
+      <StyleButton
+        icon={Header2}
+        size={formatButtonSize}
+        selected={textEditor.isActive('heading', { level: 2 })}
+        showTooltip={{ label: getEmbeddedLabel('H2') }}
+        on:click={getHeaderToggler(2)}
+      />
+    {/if}
+    {#if category === TextFormatCategory.TextDecoration}
+      <StyleButton
+        icon={Bold}
+        size={formatButtonSize}
+        selected={textEditor.isActive('bold')}
+        showTooltip={{ label: textEditorPlugin.string.Bold }}
+        on:click={getToggler(textEditor.commands.toggleBold)}
+      />
+      <StyleButton
+        icon={Italic}
+        size={formatButtonSize}
+        selected={textEditor.isActive('italic')}
+        showTooltip={{ label: textEditorPlugin.string.Italic }}
+        on:click={getToggler(textEditor.commands.toggleItalic)}
+      />
+      <StyleButton
+        icon={RIStrikethrough}
+        size={formatButtonSize}
+        selected={textEditor.isActive('strike')}
+        showTooltip={{ label: textEditorPlugin.string.Strikethrough }}
+        on:click={getToggler(textEditor.commands.toggleStrike)}
+      />
+      <StyleButton
+        icon={Underline}
+        size={formatButtonSize}
+        selected={textEditor.isActive('underline')}
+        showTooltip={{ label: textEditorPlugin.string.Underlined }}
+        on:click={getToggler(textEditor.commands.toggleUnderline)}
+      />
+    {/if}
+    {#if category === TextFormatCategory.Link}
+      <StyleButton
+        icon={Link}
+        size={formatButtonSize}
+        selected={textEditor.isActive('link')}
+        disabled={textEditor.view.state.selection.empty && !textEditor.isActive('link')}
+        showTooltip={{ label: textEditorPlugin.string.Link }}
+        on:click={formatLink}
+      />
+    {/if}
+    {#if category === TextFormatCategory.List}
+      <StyleButton
+        icon={ListNumber}
+        size={formatButtonSize}
+        selected={textEditor.isActive('orderedList')}
+        showTooltip={{ label: textEditorPlugin.string.OrderedList }}
+        on:click={getToggler(textEditor.commands.toggleOrderedList)}
+      />
+      <StyleButton
+        icon={ListBullet}
+        size={formatButtonSize}
+        selected={textEditor.isActive('bulletList')}
+        showTooltip={{ label: textEditorPlugin.string.BulletedList }}
+        on:click={getToggler(textEditor.commands.toggleBulletList)}
+      />
+    {/if}
+    {#if category === TextFormatCategory.Quote}
+      <StyleButton
+        icon={Quote}
+        size={formatButtonSize}
+        selected={textEditor.isActive('blockquote')}
+        showTooltip={{ label: textEditorPlugin.string.Blockquote }}
+        on:click={getToggler(textEditor.commands.toggleBlockquote)}
+      />
+    {/if}
+    {#if category === TextFormatCategory.Code}
+      <StyleButton
+        icon={Code}
+        size={formatButtonSize}
+        selected={textEditor.isActive('code')}
+        showTooltip={{ label: textEditorPlugin.string.Code }}
+        on:click={getToggler(textEditor.commands.toggleCode)}
+      />
+      <StyleButton
+        icon={CodeBlock}
+        size={formatButtonSize}
+        selected={textEditor.isActive('codeBlock')}
+        showTooltip={{ label: textEditorPlugin.string.CodeBlock }}
+        on:click={getToggler(textEditor.commands.toggleCodeBlock)}
+      />
+    {/if}
+    {#if category === TextFormatCategory.Table}
+      <StyleButton
+        icon={IconTable}
+        iconProps={{ style: 'table' }}
+        size={formatButtonSize}
+        selected={textEditor.isActive('table')}
+        on:click={insertTable}
+        showTooltip={{ label: textEditorPlugin.string.InsertTable }}
+      />
+      {#if textEditor.isActive('table')}
+        <StyleButton
+          icon={IconTable}
+          iconProps={{ style: 'tableProps' }}
+          size={formatButtonSize}
+          on:click={tableOptions}
+          showTooltip={{ label: textEditorPlugin.string.TableOptions }}
+        />
+      {/if}
+    {/if}
+    {#if index < textFormatCategories.length - 1}
+      <div class="buttons-divider" />
+    {/if}
+  {/each}
+{/if}
diff --git a/packages/text-editor/src/components/extensions.ts b/packages/text-editor/src/components/extensions.ts
index f125f20fdc..bb69621035 100644
--- a/packages/text-editor/src/components/extensions.ts
+++ b/packages/text-editor/src/components/extensions.ts
@@ -42,7 +42,7 @@ export const taskListExtensions = [
   })
 ]
 
-export const headingLevels: Level[] = [1, 2, 3, 4, 5, 6]
+export const supportedHeadingLevels: Level[] = [1, 2]
 
 export const defaultExtensions: AnyExtension[] = [
   StarterKit.configure({
@@ -60,7 +60,7 @@ export const defaultExtensions: AnyExtension[] = [
       }
     },
     heading: {
-      levels: headingLevels
+      levels: supportedHeadingLevels
     }
   }),
   Highlight.configure({
diff --git a/packages/text-editor/src/types.ts b/packages/text-editor/src/types.ts
index 21eedd9a39..424e18536b 100644
--- a/packages/text-editor/src/types.ts
+++ b/packages/text-editor/src/types.ts
@@ -30,27 +30,15 @@ export interface RefInputActionItem extends Doc {
 /**
  * @public
  */
-export const FORMAT_MODES = [
-  'bold',
-  'italic',
-  'strike',
-  'link',
-  'orderedList',
-  'bulletList',
-  'blockquote',
-  'code',
-  'codeBlock',
-  'heading',
-  'heading1',
-  'heading2',
-  'table',
-  'underline'
-] as const
-
-/**
- * @public
- */
-export type FormatMode = (typeof FORMAT_MODES)[number]
+export enum TextFormatCategory {
+  Heading = 'heading',
+  TextDecoration = 'text-decoration', // bold, italic, strike, underline
+  Link = 'link',
+  List = 'list', // orderedList, bulletList,
+  Quote = 'quote', // blockquote
+  Code = 'code', // code, codeBlock
+  Table = 'table'
+}
 
 /**
  * @public
diff --git a/packages/theme/styles/_text-editor.scss b/packages/theme/styles/_text-editor.scss
index c7011ac284..cf018a6cff 100644
--- a/packages/theme/styles/_text-editor.scss
+++ b/packages/theme/styles/_text-editor.scss
@@ -2,9 +2,3 @@
   cursor: pointer;
   object-fit: contain;
 }
-
-// need to override editor's bubble max-width
-// due to https://github.com/atomiks/tippyjs/issues/451
-.tippy-box {
-  max-width: 450px !important;
-}
\ No newline at end of file