@onereach/ui-components 10.2.0 → 10.2.1-beta.4272.0

package/dist/esm/v2/{OrRichTextEditor-734b8b27.js → OrRichTextEditor-fbcc33fd.js}

@@ -1,6 +1,6 @@
 import { useResizeObserver, useDebounceFn, onClickOutside } from '@vueuse/core';
 import { useFocusTrap } from '@vueuse/integrations/useFocusTrap';
-import { defineComponent, ref, onMounted, onBeforeUnmount, computed, watch, nextTick } from 'vue-demi';
+import { defineComponent, ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from 'vue-demi';
 import { defaultMarkdownSerializer, MarkdownSerializer } from 'prosemirror-markdown';
 import { DOMParser as DOMParser$1 } from 'prosemirror-model';
 import Paragraph from '@tiptap/extension-paragraph';
@@ -16,18 +16,19 @@ import Blockquote from '@tiptap/extension-blockquote';
 import Link from '@tiptap/extension-link';
 import Highlight from '@tiptap/extension-highlight';
 import Underline from '@tiptap/extension-underline';
-import { _ as __vue_component__$7 } from './OrButton-e4e85817.js';
-import './OrButton.vue_rollup-plugin-vue_script-199bb600.js';
-import { _ as __vue_component__$1 } from './OrIconButton-5a905423.js';
-import { _ as __vue_component__$6 } from './OrInput-a32b517e.js';
-import { _ as __vue_component__$2 } from './OrLabel-b0805497.js';
+import { _ as __vue_component__$2 } from './OrIconButton-5a905423.js';
 import { _ as __vue_component__$3 } from './OrMenuItem-9ccf816f.js';
 import { _ as __vue_component__$4 } from './OrMenu-b3a9fcfb.js';
-import { _ as __vue_component__$5 } from './OrModal-d3f7a508.js';
-import { _ as __vue_component__$8 } from './OrPopover-f624356f.js';
+import { _ as __vue_component__$5 } from './OrPopover-f624356f.js';
 import './dom-53c9635b.js';
+import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
+import { _ as __vue_component__$8 } from './OrButton-e4e85817.js';
+import './OrButton.vue_rollup-plugin-vue_script-199bb600.js';
+import { _ as __vue_component__$7 } from './OrInput-a32b517e.js';
+import { _ as __vue_component__$6 } from './OrModal-d3f7a508.js';
 import { _ as __vue_component__$9 } from './OrHint-2fe1157b.js';
 import { _ as __vue_component__$a } from './OrError-b25d782d.js';
+import { _ as __vue_component__$b } from './OrLabel-b0805497.js';
 import { Node, Editor, mergeAttributes } from '@tiptap/core';
 import Heading from '@tiptap/extension-heading';
 import Placeholder from '@tiptap/extension-placeholder';
@@ -36,7 +37,6 @@ import { C as CodeMirrorView } from './codemirrorView-020fe885.js';
 import { minimalSetup } from 'codemirror';
 import { javascript } from '@codemirror/lang-javascript';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
-import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 const serializerNodes = {
   ...defaultMarkdownSerializer.nodes,
@@ -163,16 +163,17 @@ const OrRichTextEditor = [
 // Spacing
 'gap-xs',
 // Box
-'max-h-full'];
+'max-h-full', 'w-full'];
 const EditorContainer = [
 // Layout
 'layout-column',
-// Theme (focus)
-'focus-within:theme-background-primary-translucent-1', 'dark:focus-within:theme-background-primary-translucent-1-dark', 'focus-within:theme-border-1-primary', 'dark:focus-within:theme-border-1-primary-dark', 'focus-within:theme-outline-2-primary', 'dark:focus-within:theme-outline-2-primary-dark',
 // Theme (invalid)
 'invalid:theme-background-error-translucent-1', 'dark:invalid:theme-background-error-translucent-1-dark', 'invalid:theme-foreground-default', 'dark:invalid:theme-foreground-default-dark', 'invalid:theme-border-1-error', 'dark:invalid:theme-border-1-error-dark', 'invalid:theme-outline-2-transparent', 'dark:invalid:theme-outline-2-transparent',
 // Box
 'border-1', 'rounded-md', 'w-full', 'overflow-hidden', 'grow'];
+const EditorContainerFocus = [
+// Theme (focus)
+'focus-within:theme-background-primary-translucent-1', 'dark:focus-within:theme-background-primary-translucent-1-dark', 'focus-within:theme-border-1-primary', 'dark:focus-within:theme-border-1-primary-dark', 'focus-within:theme-outline-2-primary', 'dark:focus-within:theme-outline-2-primary-dark'];
 const ToolbarContainer = [
 // Layout
 'layout-row',
@@ -203,6 +204,291 @@ const EditorInput = [
 // Typography
 'typography-body-2-regular'];
 
+var script$1 = defineComponent({
+  components: {
+    OrIconButton: __vue_component__$2,
+    OrMenuItem: __vue_component__$3,
+    OrMenu: __vue_component__$4,
+    OrPopover: __vue_component__$5
+  },
+  props: {
+    toolbar: {
+      type: Array,
+      default: () => []
+    },
+    isFocused: {
+      type: Boolean,
+      default: false
+    },
+    countOfNotVisibleTools: {
+      type: Number,
+      default: 0
+    },
+    activeHeadingLevel: {
+      type: Number,
+      default: 0
+    },
+    isActive: {
+      type: Object,
+      default: () => ({})
+    },
+    headingLevels: {
+      type: Array,
+      default: () => [1, 2, 3, 4]
+    }
+  },
+  emits: ['click-tool'],
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
+    const toolbarRef = ref();
+    const moreButtonRef = ref();
+    const moreRef = ref();
+    const toolbarButtonRef = ref();
+    const menuRef = ref();
+    const iconsEnum = ref({
+      bold: 'format_bold',
+      italic: 'format_italic',
+      underline: 'format_underlined',
+      strike: 'format_strikethrough',
+      bulletList: 'format_list_bulleted',
+      orderedList: 'format_list_numbered',
+      link: 'link',
+      highlight: 'highlight',
+      redo: 'redo',
+      undo: 'undo',
+      codeBlock: 'code_blocks',
+      blockquote: 'format_quote',
+      file: 'attach_file',
+      source: 'source_notes'
+    });
+    const iconTooltipsEnum = ref({
+      bold: 'Bold',
+      italic: 'Italic',
+      underline: 'Underline',
+      strike: 'Strike',
+      bulletList: 'Bulleted List',
+      orderedList: 'Numbered List',
+      link: 'Link',
+      highlight: 'Highlight',
+      redo: 'Redo',
+      undo: 'Undo',
+      codeBlock: 'Code Block',
+      blockquote: 'Quote',
+      file: 'File',
+      source: 'Source'
+    });
+    const notVisibleTools = computed(() => {
+      const count = props.countOfNotVisibleTools;
+      const toolbar = props.toolbar.flat();
+      let notVisible = new Set(toolbar.slice(toolbar.length - count, toolbar.length));
+      props.toolbar.forEach(tools => {
+        if (tools.some(item => notVisible.has(item))) {
+          tools.forEach(item => notVisible.add(item));
+        }
+      });
+      return notVisible;
+    });
+    const toolbarContainerStyles = computed(() => [...ToolbarContainer]);
+    const toolbarStyles = computed(() => [...Toolbar, ...(props.isFocused ? ToolbarButtonFocused : ToolbarButton)]);
+    const getIndexOfHeading = computed(() => {
+      return props.toolbar.flat().indexOf('heading');
+    });
+    const headingIcon = computed(() => {
+      if (props.activeHeadingLevel && props.isActive.heading) {
+        return `format_h${props.activeHeadingLevel}`;
+      }
+      return 'format_paragraph';
+    });
+    const isVisible = value => {
+      if (Array.isArray(value)) {
+        const isHaveNotVisibleTools = value.some(item => notVisibleTools.value.has(item));
+        return isHaveNotVisibleTools;
+      }
+      return !notVisibleTools.value.has(value);
+    };
+    const handleClick = (item, level) => {
+      emit('click-tool', {
+        item,
+        level
+      });
+    };
+    return {
+      toolbarRef,
+      moreButtonRef,
+      moreRef,
+      toolbarButtonRef,
+      menuRef,
+      toolbarContainerStyles,
+      toolbarStyles,
+      isVisible,
+      handleClick,
+      headingIcon,
+      getIndexOfHeading,
+      notVisibleTools,
+      iconsEnum,
+      iconTooltipsEnum
+    };
+  }
+});
+
+/* script */
+const __vue_script__$1 = script$1;
+
+/* template */
+var __vue_render__$1 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    ref: "toolbarRef",
+    class: _vm.toolbarContainerStyles
+  }, [_vm._l(_vm.toolbar, function (tools, index) {
+    return _c('div', {
+      key: index,
+      class: _vm.toolbarStyles.concat([{
+        'hidden': _vm.isVisible(tools)
+      }])
+    }, _vm._l(tools, function (item) {
+      return _c('div', {
+        key: item,
+        class: ['flex gap-md', {
+          'hidden': !_vm.isVisible(item)
+        }]
+      }, [item === 'heading' ? _c('or-icon-button', {
+        ref: "toolbarButtonRef",
+        refInFor: true,
+        attrs: {
+          "selected": _vm.isActive[item],
+          "disabled": !_vm.isFocused,
+          "tooltip": {
+            content: item,
+            placement: 'top'
+          },
+          "icon": {
+            icon: _vm.headingIcon,
+            variant: 'inherit'
+          }
+        },
+        on: {
+          "click": function ($event) {
+            _vm.menuRef && _vm.menuRef.toggle();
+          }
+        }
+      }) : _vm.isVisible(item) ? _c('or-icon-button', {
+        attrs: {
+          "tooltip": {
+            content: _vm.iconTooltipsEnum[item],
+            placement: 'top'
+          },
+          "selected": _vm.isActive[item],
+          "disabled": !_vm.isFocused,
+          "icon": {
+            icon: _vm.iconsEnum[item],
+            variant: 'inherit'
+          }
+        },
+        on: {
+          "click": function ($event) {
+            return _vm.handleClick(item);
+          }
+        }
+      }) : _vm._e()], 1);
+    }), 0);
+  }), _vm._v(" "), _vm.countOfNotVisibleTools > 0 ? _c('or-icon-button', {
+    ref: "moreButtonRef",
+    staticClass: "px-sm",
+    attrs: {
+      "disabled": !_vm.isFocused,
+      "icon": {
+        icon: 'more_horiz',
+        variant: 'inherit'
+      }
+    },
+    on: {
+      "click": function ($event) {
+        _vm.moreRef && _vm.moreRef.open();
+      }
+    }
+  }) : _vm._e(), _vm._v(" "), _vm.moreButtonRef ? _c('or-popover', {
+    ref: "moreRef",
+    attrs: {
+      "trigger": _vm.moreButtonRef && _vm.moreButtonRef.root,
+      "placement": "top-end"
+    }
+  }, [_c('div', {
+    staticClass: "flex p-sm gap-md"
+  }, _vm._l(_vm.notVisibleTools, function (item) {
+    return _c('or-icon-button', {
+      key: item,
+      attrs: {
+        "tooltip": {
+          content: _vm.iconTooltipsEnum[item],
+          placement: 'top'
+        },
+        "selected": _vm.isActive[item],
+        "icon": {
+          icon: _vm.iconsEnum[item],
+          variant: 'inherit'
+        }
+      },
+      on: {
+        "click": function ($event) {
+          return _vm.handleClick(item);
+        }
+      }
+    });
+  }), 1)]) : _vm._e(), _vm._v(" "), _vm.toolbarButtonRef ? _c('or-menu', {
+    ref: "menuRef",
+    attrs: {
+      "trigger": _vm.toolbarButtonRef[_vm.getIndexOfHeading] && _vm.toolbarButtonRef[_vm.getIndexOfHeading].root,
+      "placement": "bottom-start"
+    }
+  }, [_vm._l(_vm.headingLevels, function (heading) {
+    return _c('or-menu-item', {
+      key: heading,
+      attrs: {
+        "selected": _vm.activeHeadingLevel === heading
+      },
+      on: {
+        "click": function ($event) {
+          return _vm.handleClick('heading', heading);
+        }
+      }
+    }, [_vm._v("\n      Heading " + _vm._s(heading) + "\n    ")]);
+  }), _vm._v(" "), _c('or-menu-item', {
+    attrs: {
+      "selected": !_vm.activeHeadingLevel
+    },
+    on: {
+      "click": function ($event) {
+        return _vm.handleClick('heading');
+      }
+    }
+  }, [_vm._v("\n      None\n    ")])], 2) : _vm._e()], 2);
+};
+var __vue_staticRenderFns__$1 = [];
+
+/* style */
+const __vue_inject_styles__$1 = undefined;
+/* scoped */
+const __vue_scope_id__$1 = undefined;
+/* module identifier */
+const __vue_module_identifier__$1 = undefined;
+/* functional template */
+const __vue_is_functional_template__$1 = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__$1 = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$1,
+  staticRenderFns: __vue_staticRenderFns__$1
+}, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, undefined, undefined, undefined);
+
 var Formats;
 (function (Formats) {
   Formats["Markdown"] = "markdown";
@@ -248,16 +534,13 @@ var codemirrorNode = Node.create({
 var script = defineComponent({
   name: 'OrRichTextEditor',
   components: {
-    OrIconButton: __vue_component__$1,
-    OrLabel: __vue_component__$2,
-    OrMenuItem: __vue_component__$3,
-    OrMenu: __vue_component__$4,
-    OrModal: __vue_component__$5,
-    OrInput: __vue_component__$6,
-    OrButton: __vue_component__$7,
-    OrPopover: __vue_component__$8,
+    OrModal: __vue_component__$6,
+    OrInput: __vue_component__$7,
+    OrButton: __vue_component__$8,
     OrHint: __vue_component__$9,
-    OrError: __vue_component__$a
+    OrError: __vue_component__$a,
+    OrLabel: __vue_component__$b,
+    EditorToolbar: __vue_component__$1
   },
   model: {
     prop: 'modelValue',
@@ -303,6 +586,10 @@ var script = defineComponent({
     error: {
       type: [String, Boolean],
       default: undefined
+    },
+    readonly: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['update:modelValue', 'input', 'file-upload'],
@@ -314,11 +601,7 @@ var script = defineComponent({
     const editorRef = ref();
     const textareaRef = ref();
     const containerRef = ref();
-    const toolbarRef = ref();
-    const moreButtonRef = ref();
-    const moreRef = ref();
-    const toolbarButtonRef = ref();
-    const menuRef = ref();
+    const toolbarContainerRef = ref();
     // isActive should be set with default values for all toolbar buttons, otherwise it will not work in vue2
     const isActive = ref({
       bold: false,
@@ -336,7 +619,7 @@ var script = defineComponent({
       file: false,
       source: false
     });
-    const isFocused = ref(props.autofocus);
+    const isFocused = ref(!props.readonly ? props.autofocus : false);
     const headingLevels = [1, 2, 3, 4];
     const activeHeadingLevel = ref(0);
     const markdownOutput = ref('');
@@ -351,49 +634,19 @@ var script = defineComponent({
       fallbackFocus: '.container',
       allowOutsideClick: true
     });
-    const iconsEnum = ref({
-      bold: 'format_bold',
-      italic: 'format_italic',
-      underline: 'format_underlined',
-      strike: 'format_strikethrough',
-      bulletList: 'format_list_bulleted',
-      orderedList: 'format_list_numbered',
-      link: 'link',
-      highlight: 'highlight',
-      redo: 'redo',
-      undo: 'undo',
-      codeBlock: 'code_blocks',
-      blockquote: 'format_quote',
-      file: 'attach_file',
-      source: 'source_notes'
-    });
-    const iconTooltipsEnum = ref({
-      bold: 'Bold',
-      italic: 'Italic',
-      underline: 'Underline',
-      strike: 'Strike',
-      bulletList: 'Bulleted List',
-      orderedList: 'Numbered List',
-      link: 'Link',
-      highlight: 'Highlight',
-      redo: 'Redo',
-      undo: 'Undo',
-      codeBlock: 'Code Block',
-      blockquote: 'Quote',
-      file: 'File',
-      source: 'Source'
-    });
     useResizeObserver(root, useDebounceFn(entries => {
       var _a, _b;
       const entry = entries[0];
       const {
         width
       } = entry.contentRect;
-      if (containerRef.value && toolbarRef.value && toolbarLength.value) {
+      const toolbarLength = props.toolbar.flat().length;
+      if (containerRef.value && toolbarContainerRef.value && toolbarLength) {
         let lengthOfItem = 0;
-        lengthOfItem = ((_b = (_a = toolbarRef.value.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.offsetWidth) + 16;
+        const toolbarRef = toolbarContainerRef.value.$refs.toolbarRef;
+        lengthOfItem = ((_b = (_a = toolbarRef === null || toolbarRef === void 0 ? void 0 : toolbarRef.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.offsetWidth) + 16;
         const count = width / lengthOfItem - 2;
-        countOfNotVisibleTools.value = Math.round(toolbarLength.value - count);
+        countOfNotVisibleTools.value = Math.round(toolbarLength - count);
       }
     }, 10));
     onMounted(() => {
@@ -425,7 +678,8 @@ var script = defineComponent({
           }
         },
         element: editorRef.value,
-        autofocus: props.autofocus,
+        autofocus: !props.readonly ? props.autofocus : false,
+        editable: !props.readonly,
         enableInputRules: true,
         enablePasteRules: true,
         extensions: [codemirrorNode, StarterKit.configure({
@@ -506,43 +760,15 @@ var script = defineComponent({
         context.emit('update:modelValue', value);
       }
     });
-    const getIndexOfHeading = computed(() => {
-      return props.toolbar.flat().indexOf('heading');
-    });
-    const headingIcon = computed(() => {
-      if (activeHeadingLevel.value && isActive.value.heading) {
-        return `format_h${activeHeadingLevel.value}`;
-      }
-      return 'format_paragraph';
-    });
-    const toolbarLength = computed(() => {
-      return props.toolbar.flat().length;
-    });
-    const notVisibleTools = computed(() => {
-      const count = countOfNotVisibleTools.value;
-      const toolbar = props.toolbar.flat();
-      let notVisible = new Set(toolbar.slice(toolbar.length - count, toolbar.length));
-      props.toolbar.forEach(tools => {
-        if (tools.some(item => notVisible.has(item))) {
-          tools.forEach(item => notVisible.add(item));
-        }
-      });
-      return notVisible;
-    });
     //Methods
     const handleEditorClick = () => {
       var _a;
       setActiveFormats();
-      isFocused.value = true;
-      editor === null || editor === void 0 ? void 0 : editor.commands.focus();
-      activeHeadingLevel.value = ((_a = editor === null || editor === void 0 ? void 0 : editor.getAttributes('heading')) === null || _a === void 0 ? void 0 : _a.level) || 0;
-    };
-    const isVisible = value => {
-      if (Array.isArray(value)) {
-        const isHaveNotVisibleTools = value.some(item => notVisibleTools.value.has(item));
-        return isHaveNotVisibleTools;
+      if (!props.readonly) {
+        isFocused.value = true;
+        editor === null || editor === void 0 ? void 0 : editor.commands.focus();
       }
-      return !notVisibleTools.value.has(value);
+      activeHeadingLevel.value = ((_a = editor === null || editor === void 0 ? void 0 : editor.getAttributes('heading')) === null || _a === void 0 ? void 0 : _a.level) || 0;
     };
     const handleInput = event => {
       const target = event.target;
@@ -551,7 +777,11 @@ var script = defineComponent({
       markdownOutput.value = serialize(editor === null || editor === void 0 ? void 0 : editor.schema, editor === null || editor === void 0 ? void 0 : editor.getJSON());
       proxyModelValue.value = markdownOutput.value;
     };
-    const handleToolbarClick = (item, level) => {
+    const handleToolbarClick = _ref4 => {
+      let {
+        item,
+        level
+      } = _ref4;
       var _a, _b, _c, _d;
       switch (item) {
         case 'source':
@@ -631,10 +861,10 @@ var script = defineComponent({
         editor === null || editor === void 0 ? void 0 : editor.chain().focus().setMark('link', {
           href: link.value,
           target: '__blank'
-        }).command(_ref4 => {
+        }).command(_ref5 => {
           let {
             tr
-          } = _ref4;
+          } = _ref5;
           const preparedValue = text.value[text.value.length - 1] === ' ' ? text.value : `${text.value} `;
           tr.insertText(preparedValue);
           return true;
@@ -670,11 +900,7 @@ var script = defineComponent({
     };
     // Styles
     const rootStyles = computed(() => ['or-rich-text-editor-v3', ...OrRichTextEditor]);
-    const containerStyles = computed(() => [...EditorContainer]);
-    const toolbarContainerStyles = computed(() => [...ToolbarContainer]);
-    const toolbarStyles = computed(() => [...Toolbar,
-    // 'overflow-x-hidden',
-    ...(isFocused.value ? ToolbarButtonFocused : ToolbarButton)]);
+    const containerStyles = computed(() => [...EditorContainer, ...(isFocused.value ? EditorContainerFocus : [])]);
     const editorInputStyles = computed(() => ['tiptap-editor-v3', ...EditorInput]);
     //Effects
     watch(proxyModelValue, value => {
@@ -682,43 +908,38 @@ var script = defineComponent({
         editor === null || editor === void 0 ? void 0 : editor.commands.setContent(value);
       }
       if (props.format === 'markdown' && value !== markdownOutput.value) {
-        //TODO: const deserialized = deserialize(editor?.schema, value);
-        editor === null || editor === void 0 ? void 0 : editor.commands.setContent(value);
+        const deserialized = deserialize(editor === null || editor === void 0 ? void 0 : editor.schema, value);
+        editor === null || editor === void 0 ? void 0 : editor.commands.setContent(deserialized);
       }
     });
+    watch(props, _ref6 => {
+      let {
+        readonly
+      } = _ref6;
+      isFocused.value = !readonly;
+      editor === null || editor === void 0 ? void 0 : editor.setEditable(!readonly);
+    });
     return {
       editor,
       editorRef,
-      toolbarRef,
+      toolbarContainerRef,
       containerRef,
-      toolbarButtonRef,
-      moreButtonRef,
       textareaRef,
-      moreRef,
-      menuRef,
-      iconsEnum,
       handleToolbarClick,
       handleEditorClick,
       isActive,
-      iconTooltipsEnum,
       containerStyles,
-      toolbarContainerStyles,
-      toolbarStyles,
       rootStyles,
       root,
       editorInputStyles,
-      getIndexOfHeading,
       headingLevels,
-      headingIcon,
       attachLink,
       discardLink,
       isOpenLinkModal,
       text,
       link,
       isFocused,
-      isVisible,
       countOfNotVisibleTools,
-      notVisibleTools,
       handleInput,
       proxyModelValue,
       disableMarkdown,
@@ -755,7 +976,7 @@ var __vue_render__ = function () {
   }, [_vm._t("label", function () {
     return [_vm._v("\n        " + _vm._s(_vm.label) + "\n      ")];
   })], 2)] : _vm._e(), _vm._v(" "), _c('div', {
-    ref: 'containerRef',
+    ref: "containerRef",
     class: _vm.containerStyles,
     attrs: {
       "invalid": !!_vm.error
@@ -765,77 +986,20 @@ var __vue_render__ = function () {
         return _vm.handleEditorClick();
       }
     }
-  }, [_c('div', {
-    ref: 'toolbarRef',
-    class: _vm.toolbarContainerStyles
-  }, [_vm._l(_vm.toolbar, function (tools, index) {
-    return _c('div', {
-      key: index,
-      class: _vm.toolbarStyles.concat([{
-        'hidden': _vm.isVisible(tools)
-      }])
-    }, _vm._l(tools, function (item) {
-      return _c('div', {
-        key: item,
-        class: ['flex gap-md', {
-          'hidden': !_vm.isVisible(item)
-        }]
-      }, [item === 'heading' ? _c('or-icon-button', {
-        ref: 'toolbarButtonRef',
-        refInFor: true,
-        attrs: {
-          "selected": _vm.isActive[item],
-          "disabled": !_vm.isFocused,
-          "tooltip": {
-            content: item,
-            placement: 'top'
-          },
-          "icon": {
-            icon: _vm.headingIcon,
-            variant: 'inherit'
-          }
-        },
-        on: {
-          "click": function ($event) {
-            _vm.menuRef && _vm.menuRef.toggle();
-          }
-        }
-      }) : _vm.isVisible(item) ? _c('or-icon-button', {
-        attrs: {
-          "tooltip": {
-            content: _vm.iconTooltipsEnum[item],
-            placement: 'top'
-          },
-          "selected": _vm.isActive[item],
-          "disabled": !_vm.isFocused,
-          "icon": {
-            icon: _vm.iconsEnum[item],
-            variant: 'inherit'
-          }
-        },
-        on: {
-          "click": function ($event) {
-            return _vm.handleToolbarClick(item);
-          }
-        }
-      }) : _vm._e()], 1);
-    }), 0);
-  }), _vm._v(" "), _vm.countOfNotVisibleTools > 0 ? _c('or-icon-button', {
-    ref: 'moreButtonRef',
-    staticClass: "px-sm",
+  }, [!_vm.readonly ? _c('editor-toolbar', {
+    ref: "toolbarContainerRef",
     attrs: {
-      "disabled": !_vm.isFocused,
-      "icon": {
-        icon: 'more_horiz',
-        variant: 'inherit'
-      }
+      "count-of-not-visible-tools": _vm.countOfNotVisibleTools,
+      "toolbar": _vm.toolbar,
+      "is-focused": _vm.isFocused,
+      "active-heading-level": _vm.activeHeadingLevel,
+      "is-active": _vm.isActive,
+      "heading-levels": _vm.headingLevels
     },
     on: {
-      "click": function ($event) {
-        _vm.moreRef && _vm.moreRef.open();
-      }
+      "click-tool": _vm.handleToolbarClick
     }
-  }) : _vm._e()], 2), _vm._v(" "), _c('div', {
+  }) : _vm._e(), _vm._v(" "), _c('div', {
     class: ['p-sm', 'overflow-auto', 'min-h-[88px]']
   }, [_c('textarea', {
     directives: [{
@@ -872,9 +1036,9 @@ var __vue_render__ = function () {
       value: !_vm.disableMarkdown,
       expression: "!disableMarkdown"
     }],
-    ref: 'editorRef',
+    ref: "editorRef",
     class: _vm.editorInputStyles
-  }), _vm._v(" "), _vm._t("files")], 2)]), _vm._v(" "), !_vm.error ? [_vm.$slots.hint || _vm.hint ? [_c('OrHint', {
+  }), _vm._v(" "), _vm._t("files")], 2)], 1), _vm._v(" "), !_vm.error ? [_vm.$slots.hint || _vm.hint ? [_c('OrHint', {
     attrs: {
       "disabled": _vm.disabled
     }
@@ -884,62 +1048,7 @@ var __vue_render__ = function () {
     attrs: {
       "disabled": _vm.disabled
     }
-  }, [_vm._v("\n      " + _vm._s(_vm.error) + "\n    ")])] : _vm._e(), _vm._v(" "), _vm.moreButtonRef ? _c('or-popover', {
-    ref: 'moreRef',
-    attrs: {
-      "trigger": _vm.moreButtonRef && _vm.moreButtonRef.root,
-      "placement": "top-end"
-    }
-  }, [_c('div', {
-    staticClass: "flex p-sm gap-md"
-  }, _vm._l(_vm.notVisibleTools, function (item) {
-    return _c('or-icon-button', {
-      key: item,
-      attrs: {
-        "tooltip": {
-          content: _vm.iconTooltipsEnum[item],
-          placement: 'top'
-        },
-        "selected": _vm.isActive[item],
-        "icon": {
-          icon: _vm.iconsEnum[item],
-          variant: 'inherit'
-        }
-      },
-      on: {
-        "click": function ($event) {
-          return _vm.handleToolbarClick(item);
-        }
-      }
-    });
-  }), 1)]) : _vm._e(), _vm._v(" "), _vm.toolbarButtonRef ? _c('or-menu', {
-    ref: 'menuRef',
-    attrs: {
-      "trigger": _vm.toolbarButtonRef[_vm.getIndexOfHeading] && _vm.toolbarButtonRef[_vm.getIndexOfHeading].root,
-      "placement": "bottom-start"
-    }
-  }, [_vm._l(_vm.headingLevels, function (heading) {
-    return _c('or-menu-item', {
-      key: heading,
-      attrs: {
-        "selected": _vm.activeHeadingLevel === heading
-      },
-      on: {
-        "click": function ($event) {
-          return _vm.handleToolbarClick('heading', heading);
-        }
-      }
-    }, [_vm._v("\n      Heading " + _vm._s(heading) + "\n    ")]);
-  }), _vm._v(" "), _c('or-menu-item', {
-    attrs: {
-      "selected": !_vm.activeHeadingLevel
-    },
-    on: {
-      "click": function ($event) {
-        return _vm.handleToolbarClick('heading');
-      }
-    }
-  }, [_vm._v("\n      None\n    ")])], 2) : _vm._e(), _vm._v(" "), _c('or-modal', {
+  }, [_vm._v("\n      " + _vm._s(_vm.error) + "\n    ")])] : _vm._e(), _vm._v(" "), _c('or-modal', {
     attrs: {
       "is-open": _vm.isOpenLinkModal,
       "size": "s"