@onereach/ui-components 10.4.4 → 10.4.5-beta.4371.0

package/dist/bundled/v2/components/OrRichTextEditorV3/OrRichTextEditor.js

@@ -1,26 +1,314 @@
 import { h as useResizeObserver, o as onClickOutside } from '../../index-fe85dfd9.js';
 import { u as useFocusTrap } from '../../useFocusTrap-5b440601.js';
-import { defineComponent, ref, onMounted, onBeforeUnmount, computed, watch, nextTick } from 'vue-demi';
-import { B as Blockquote, a as Bold, b as BulletList, C as CodeBlock, H as HardBreak, c as HorizontalRule, I as Italic, L as ListItem, O as OrderedList, P as Paragraph, S as Strike, s as serialize, d as deserialize, U as Underline, e as Link, f as Highlight } from '../../markdown-62ee11bf.js';
-import { OrRichTextEditor, EditorContainer, ToolbarContainer, Toolbar, ToolbarButtonFocused, ToolbarButton, EditorInput } from './styles.js';
-import { Formats } from './props.js';
-import { N as Node, m as mergeAttributes, t as textblockTypeInputRule, E as Extension, D as Decoration, a as DecorationSet, M as Mark, b as markInputRule, c as markPasteRule, k as keydownHandler, d as callOrReturn, g as getExtensionField, e as Editor } from '../../index-7516cf60.js';
-import { P as Plugin, a as PluginKey, d as dropPoint, S as Selection, N as NodeSelection, F as Fragment, b as Slice, T as TextSelection, M as Mapping } from '../../index-02a897ac.js';
-import codemirrorNode from './utils/codemirror/codemirrorNode.js';
-import __vue_component__$1 from '../OrIconButtonV3/OrIconButton.js';
-import __vue_component__$2 from '../OrLabelV3/OrLabel.js';
+import { defineComponent, ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from 'vue-demi';
+import { B as Blockquote, a as Bold, b as BulletList, C as CodeBlock, H as HardBreak, c as HorizontalRule, I as Italic, L as ListItem, O as OrderedList, P as Paragraph, S as Strike, s as serialize, d as deserialize, U as Underline, e as Link, f as Highlight } from '../../markdown-ed7d6fe1.js';
+import { ToolbarContainer, Toolbar, ToolbarButtonFocused, ToolbarButton, OrRichTextEditor } from './styles.js';
+import __vue_component__$2 from '../OrIconButtonV3/OrIconButton.js';
 import __vue_component__$3 from '../OrMenuItemV3/OrMenuItem.js';
 import __vue_component__$4 from '../OrMenuV3/OrMenu.js';
-import __vue_component__$5 from '../OrModalV3/OrModal.js';
-import { _ as __vue_component__$6 } from '../../OrInput-8f24749f.js';
-import __vue_component__$7 from '../OrButtonV3/OrButton.js';
-import __vue_component__$8 from '../OrPopoverV3/OrPopover.js';
+import __vue_component__$5 from '../OrPopoverV3/OrPopover.js';
+import { isArray } from '../../utils/isArray.js';
+import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
+import { Formats } from './props.js';
+import { N as Node, m as mergeAttributes, t as textblockTypeInputRule, E as Extension, D as Decoration, a as DecorationSet, M as Mark, b as markInputRule, c as markPasteRule, k as keydownHandler, d as callOrReturn, g as getExtensionField, e as Editor } from '../../index-f379c836.js';
+import { P as Plugin, a as PluginKey, d as dropPoint, S as Selection, N as NodeSelection, F as Fragment, b as Slice, T as TextSelection, M as Mapping } from '../../index-0e9c2b43.js';
+import codemirrorNode from './utils/codemirror/codemirrorNode.js';
+import __vue_component__$6 from '../OrModalV3/OrModal.js';
+import { _ as __vue_component__$7 } from '../../OrInput-8f24749f.js';
+import __vue_component__$8 from '../OrButtonV3/OrButton.js';
 import __vue_component__$9 from '../OrHintV3/OrHint.js';
 import __vue_component__$a from '../OrErrorV3/OrError.js';
+import __vue_component__$b from '../OrLabelV3/OrLabel.js';
+import __vue_component__$c from '../OrInputBoxV3/OrInputBox.js';
 import { a as useDebounceFn } from '../../index-279e78b9.js';
-import { isArray } from '../../utils/isArray.js';
 import { s as styleInject } from '../../style-inject.es-4c6f2515.js';
-import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
+
+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',
+      heading: 'Heading'
+    });
+    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 (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: _vm.iconTooltipsEnum[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 EditorToolbar = __vue_component__$1;
 
 const Heading = Node.create({
   name: 'heading',
@@ -1283,8 +1571,11 @@ const History = Extension.create({
   addKeyboardShortcuts() {
     return {
       'Mod-z': () => this.editor.commands.undo(),
+      'Mod-Z': () => this.editor.commands.undo(),
       'Mod-y': () => this.editor.commands.redo(),
+      'Mod-Y': () => this.editor.commands.redo(),
       'Shift-Mod-z': () => this.editor.commands.redo(),
+      'Shift-Mod-Z': () => this.editor.commands.redo(),
       // Russian keyboard layouts
       'Mod-я': () => this.editor.commands.undo(),
       'Shift-Mod-я': () => this.editor.commands.redo()
@@ -1363,16 +1654,14 @@ const StarterKit = Extension.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,
+    OrInputBox: __vue_component__$c
   },
   model: {
     prop: 'modelValue',
@@ -1418,6 +1707,10 @@ var script = defineComponent({
     error: {
       type: [String, Boolean],
       default: undefined
+    },
+    readonly: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['update:modelValue', 'input', 'file-upload'],
@@ -1429,11 +1722,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,
@@ -1451,7 +1740,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('');
@@ -1466,49 +1755,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(() => {
@@ -1540,7 +1799,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({
@@ -1621,43 +1881,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 (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;
@@ -1666,7 +1898,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':
@@ -1746,10 +1982,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;
@@ -1785,12 +2021,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 editorInputStyles = computed(() => ['tiptap-editor-v3', ...EditorInput]);
+    const editorInputStyles = computed(() => ['tiptap-editor-v3']);
     //Effects
     watch(proxyModelValue, value => {
       if (value !== (editor === null || editor === void 0 ? void 0 : editor.getHTML()) && props.format !== 'markdown') {
@@ -1801,39 +2032,33 @@ var script = defineComponent({
         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,
@@ -1869,89 +2094,35 @@ var __vue_render__ = function () {
     }], null, true)
   }, [_vm._t("label", function () {
     return [_vm._v("\n        " + _vm._s(_vm.label) + "\n      ")];
-  })], 2)] : _vm._e(), _vm._v(" "), _c('div', {
-    ref: 'containerRef',
-    class: _vm.containerStyles,
+  })], 2)] : _vm._e(), _vm._v(" "), _c('OrInputBox', {
+    staticClass: "first:children:ml-none last:children:mr-none overflow-hidden flex flex-col",
     attrs: {
-      "invalid": !!_vm.error
+      "invalid": !!_vm.error,
+      "readonly": _vm.readonly
     },
     on: {
       "click": function ($event) {
         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', {
-    class: ['p-sm', 'overflow-auto', 'min-h-[88px]']
+  }) : _vm._e(), _vm._v(" "), _c('div', {
+    ref: "containerRef",
+    staticClass: "m-none w-full h-full p-sm overflow-hidden"
+  }, [_c('div', {
+    staticClass: "w-full h-full min-h-[88px]"
   }, [_c('textarea', {
     directives: [{
       name: "show",
@@ -1987,74 +2158,20 @@ var __vue_render__ = function () {
       value: !_vm.disableMarkdown,
       expression: "!disableMarkdown"
     }],
-    ref: 'editorRef',
+    ref: "editorRef",
+    staticClass: "overflow-auto w-full h-full",
     class: _vm.editorInputStyles
   }), _vm._v(" "), _vm._t("files")], 2)]), _vm._v(" "), !_vm.error ? [_vm.$slots.hint || _vm.hint ? [_c('OrHint', {
     attrs: {
       "disabled": _vm.disabled
     }
   }, [_vm._t("hint", function () {
-    return [_vm._v("\n          " + _vm._s(_vm.hint) + "\n        ")];
+    return [_vm._v("\n            " + _vm._s(_vm.hint) + "\n          ")];
   })], 2)] : _vm._e()] : _vm._e(), _vm._v(" "), typeof _vm.error === 'string' ? [_c('OrError', {
     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"
@@ -2064,7 +2181,7 @@ var __vue_render__ = function () {
       fn: function () {
         return [_c('p', {
           staticClass: "text-headline-2"
-        }, [_vm._v("\n        Add Link\n      ")])];
+        }, [_vm._v("\n          Add Link\n        ")])];
       },
       proxy: true
     }, {
@@ -2087,7 +2204,7 @@ var __vue_render__ = function () {
       },
       proxy: true
     }])
-  }, [_vm._v(" "), _c('div', [_c('or-label', [_vm._v("\n        Text\n      ")]), _vm._v(" "), _c('or-input', {
+  }, [_vm._v(" "), _c('div', [_c('or-label', [_vm._v("\n          Text\n        ")]), _vm._v(" "), _c('or-input', {
     staticClass: "pb-md",
     attrs: {
       "placeholder": "Enter text"
@@ -2099,7 +2216,7 @@ var __vue_render__ = function () {
       },
       expression: "text"
     }
-  }), _vm._v(" "), _c('or-label', [_vm._v("\n        Link\n      ")]), _vm._v(" "), _c('or-input', {
+  }), _vm._v(" "), _c('or-label', [_vm._v("\n          Link\n        ")]), _vm._v(" "), _c('or-input', {
     attrs: {
       "placeholder": "Enter link"
     },
@@ -2110,7 +2227,7 @@ var __vue_render__ = function () {
       },
       expression: "link"
     }
-  })], 1)])], 2);
+  })], 1)])], 2)], 2);
 };
 var __vue_staticRenderFns__ = [];