@onereach/ui-components 10.4.5-beta.4373.0 → 10.5.0-beta.4375.0

package/dist/esm/v3/{OrRichTextEditor-2ef14c64.js → OrRichTextEditor-8a4836d5.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 { marked } from 'marked';
@@ -18,18 +18,20 @@ 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 { s as script$7 } from './OrButton-31bcb511.js';
-import { s as script$1 } from './OrIconButton-424d342e.js';
-import { s as script$6 } from './OrInput-b8095e9c.js';
-import { s as script$2 } from './OrLabel-4abbce6e.js';
+import { s as script$2 } from './OrIconButton-424d342e.js';
 import { s as script$3 } from './OrMenuItem-61713ccc.js';
 import { s as script$4 } from './OrMenu-482e868d.js';
-import { s as script$5 } from './OrModal-76efca1f.js';
-import { s as script$8 } from './OrPopover-5548205b.js';
+import { s as script$5 } from './OrPopover-5548205b.js';
 import './dom-53c9635b.js';
 import { i as isArray } from './isArray-8eeb52b9.js';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, Fragment, renderList, createBlock, createCommentVNode, withCtx, createElementVNode, createTextVNode, toDisplayString, createVNode, renderSlot, withDirectives, vShow, vModelText } from 'vue';
+import { s as script$c } from './OrInputBox-287f97ba.js';
+import { s as script$8 } from './OrButton-c95aef65.js';
+import { s as script$7 } from './OrInput-37be348a.js';
+import { s as script$6 } from './OrModal-76efca1f.js';
 import { s as script$9 } from './OrHint-262c8217.js';
 import { s as script$a } from './OrError-331220bc.js';
+import { s as script$b } from './OrLabel-4abbce6e.js';
 import { Node, Editor, mergeAttributes } from '@tiptap/core';
 import Heading from '@tiptap/extension-heading';
 import Placeholder from '@tiptap/extension-placeholder';
@@ -37,7 +39,6 @@ import StarterKit from '@tiptap/starter-kit';
 import { C as CodeMirrorView } from './codemirrorView-020fe885.js';
 import { minimalSetup } from 'codemirror';
 import { javascript } from '@codemirror/lang-javascript';
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createElementVNode, Fragment, renderList, withDirectives, vShow, vModelText, createVNode } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 
 const mdSerializerNodes = {
@@ -61,8 +62,8 @@ const mdSerializerMarks = {
     expelEnclosingWhitespace: true
   },
   [Italic.name]: {
-    open: ' _',
-    close: '_ ',
+    open: '_',
+    close: '_',
     mixable: true,
     expelEnclosingWhitespace: true
   },
@@ -123,16 +124,7 @@ const OrRichTextEditor = [
 // Spacing
 'gap-xs',
 // Box
-'max-h-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-primary focus-within:border-1', 'dark:focus-within:theme-border-primary-dark', 'focus-within:theme-outline-primary focus-within:outline-2', 'dark:focus-within:theme-outline-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-error invalid:border-1', 'dark:invalid:theme-border-error-dark', 'invalid:theme-outline-transparent invalid:outline-2', 'dark:invalid:theme-outline-transparent',
-// Box
-'border-1', 'rounded-md', 'w-full', 'overflow-hidden', 'grow'];
+'h-full', 'w-full'];
 const ToolbarContainer = [
 // Layout
 'layout-row',
@@ -140,6 +132,8 @@ const ToolbarContainer = [
 'py-sm',
 //Sizing
 'border-b-1',
+//Box
+'w-full',
 //Colors
 'border-b-outline'];
 const Toolbar = [
@@ -159,9 +153,262 @@ const ToolbarButton = [
 const ToolbarButtonFocused = [
 // Typography
 'text-outline'];
-const EditorInput = [
-// Typography
-'typography-body-2-regular'];
+
+var script$1 = defineComponent({
+  components: {
+    OrIconButton: script$2,
+    OrMenuItem: script$3,
+    OrMenu: script$4,
+    OrPopover: script$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 isDisabled = item => {
+      if (!props.isFocused) return true;
+      if (props.isActive.heading) {
+        return item === 'orderedList' || item === 'bulletList';
+      } else if (props.isActive.orderedList || props.isActive.bulletList) {
+        return item === 'heading';
+      }
+      return false;
+    };
+    const handleClick = (item, level) => {
+      emit('click-tool', {
+        item,
+        level
+      });
+    };
+    return {
+      toolbarRef,
+      moreButtonRef,
+      moreRef,
+      toolbarButtonRef,
+      menuRef,
+      toolbarContainerStyles,
+      toolbarStyles,
+      isVisible,
+      handleClick,
+      headingIcon,
+      getIndexOfHeading,
+      notVisibleTools,
+      iconsEnum,
+      iconTooltipsEnum,
+      isDisabled
+    };
+  }
+});
+
+const _hoisted_1$1 = {
+  class: "flex p-sm gap-md"
+};
+function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_or_icon_button = resolveComponent("or-icon-button");
+  const _component_or_popover = resolveComponent("or-popover");
+  const _component_or_menu_item = resolveComponent("or-menu-item");
+  const _component_or_menu = resolveComponent("or-menu");
+  return openBlock(), createElementBlock("div", {
+    ref: "toolbarRef",
+    class: normalizeClass(_ctx.toolbarContainerStyles)
+  }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.toolbar, (tools, index) => {
+    return openBlock(), createElementBlock("div", {
+      key: index,
+      class: normalizeClass([..._ctx.toolbarStyles, {
+        'hidden': _ctx.isVisible(tools)
+      }])
+    }, [(openBlock(true), createElementBlock(Fragment, null, renderList(tools, item => {
+      return openBlock(), createElementBlock("div", {
+        key: item,
+        class: normalizeClass(['flex gap-md', {
+          'hidden': !_ctx.isVisible(item)
+        }])
+      }, [item === 'heading' ? (openBlock(), createBlock(_component_or_icon_button, {
+        key: 0,
+        ref_for: true,
+        ref: "toolbarButtonRef",
+        selected: _ctx.isActive[item],
+        disabled: _ctx.isDisabled(item),
+        tooltip: {
+          content: _ctx.iconTooltipsEnum[item],
+          placement: 'top'
+        },
+        icon: {
+          icon: _ctx.headingIcon,
+          variant: 'inherit'
+        },
+        onClick: _cache[0] || (_cache[0] = $event => _ctx.menuRef && _ctx.menuRef.toggle())
+      }, null, 8 /* PROPS */, ["selected", "disabled", "tooltip", "icon"])) : _ctx.isVisible(item) ? (openBlock(), createBlock(_component_or_icon_button, {
+        key: 1,
+        tooltip: {
+          content: _ctx.iconTooltipsEnum[item],
+          placement: 'top'
+        },
+        selected: _ctx.isActive[item],
+        disabled: _ctx.isDisabled(item),
+        icon: {
+          icon: _ctx.iconsEnum[item],
+          variant: 'inherit'
+        },
+        onClick: $event => _ctx.handleClick(item)
+      }, null, 8 /* PROPS */, ["tooltip", "selected", "disabled", "icon", "onClick"])) : createCommentVNode("v-if", true)], 2 /* CLASS */);
+    }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */);
+  }), 128 /* KEYED_FRAGMENT */)), _ctx.countOfNotVisibleTools > 0 ? (openBlock(), createBlock(_component_or_icon_button, {
+    key: 0,
+    ref: "moreButtonRef",
+    disabled: !_ctx.isFocused,
+    icon: {
+      icon: 'more_horiz',
+      variant: 'inherit'
+    },
+    class: "px-sm",
+    onClick: _cache[1] || (_cache[1] = $event => _ctx.moreRef && _ctx.moreRef.open())
+  }, null, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true), _ctx.moreButtonRef ? (openBlock(), createBlock(_component_or_popover, {
+    key: 1,
+    ref: "moreRef",
+    trigger: _ctx.moreButtonRef && _ctx.moreButtonRef.root,
+    placement: "top-end"
+  }, {
+    default: withCtx(() => [createElementVNode("div", _hoisted_1$1, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.notVisibleTools, item => {
+      return openBlock(), createBlock(_component_or_icon_button, {
+        key: item,
+        tooltip: {
+          content: _ctx.iconTooltipsEnum[item],
+          placement: 'top'
+        },
+        selected: _ctx.isActive[item],
+        icon: {
+          icon: _ctx.iconsEnum[item],
+          variant: 'inherit'
+        },
+        onClick: $event => _ctx.handleClick(item)
+      }, null, 8 /* PROPS */, ["tooltip", "selected", "icon", "onClick"]);
+    }), 128 /* KEYED_FRAGMENT */))])]),
+
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["trigger"])) : createCommentVNode("v-if", true), _ctx.toolbarButtonRef ? (openBlock(), createBlock(_component_or_menu, {
+    key: 2,
+    ref: "menuRef",
+    trigger: _ctx.toolbarButtonRef[_ctx.getIndexOfHeading] && _ctx.toolbarButtonRef[_ctx.getIndexOfHeading].root,
+    placement: "bottom-start"
+  }, {
+    default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.headingLevels, heading => {
+      return openBlock(), createBlock(_component_or_menu_item, {
+        key: heading,
+        selected: _ctx.activeHeadingLevel === heading,
+        onClick: $event => _ctx.handleClick('heading', heading)
+      }, {
+        default: withCtx(() => [createTextVNode(" Heading " + toDisplayString(heading), 1 /* TEXT */)]),
+
+        _: 2 /* DYNAMIC */
+      }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["selected", "onClick"]);
+    }), 128 /* KEYED_FRAGMENT */)), createVNode(_component_or_menu_item, {
+      selected: !_ctx.activeHeadingLevel,
+      onClick: _cache[2] || (_cache[2] = $event => _ctx.handleClick('heading'))
+    }, {
+      default: withCtx(() => [createTextVNode(" None ")]),
+      _: 1 /* STABLE */
+    }, 8 /* PROPS */, ["selected"])]),
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["trigger"])) : createCommentVNode("v-if", true)], 2 /* CLASS */);
+}
+
+script$1.render = render$1;
+script$1.__file = "src/components/or-rich-text-editor-v3/partials/EditorToolbar.vue";
 
 var Formats;
 (function (Formats) {
@@ -208,16 +455,14 @@ var codemirrorNode = Node.create({
 var script = defineComponent({
   name: 'OrRichTextEditor',
   components: {
-    OrIconButton: script$1,
-    OrLabel: script$2,
-    OrMenuItem: script$3,
-    OrMenu: script$4,
-    OrModal: script$5,
-    OrInput: script$6,
-    OrButton: script$7,
-    OrPopover: script$8,
+    OrModal: script$6,
+    OrInput: script$7,
+    OrButton: script$8,
     OrHint: script$9,
-    OrError: script$a
+    OrError: script$a,
+    OrLabel: script$b,
+    EditorToolbar: script$1,
+    OrInputBox: script$c
   },
   model: {
     prop: 'modelValue',
@@ -263,6 +508,10 @@ var script = defineComponent({
     error: {
       type: [String, Boolean],
       default: undefined
+    },
+    readonly: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['update:modelValue', 'input', 'file-upload'],
@@ -274,11 +523,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,
@@ -296,7 +541,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('');
@@ -311,49 +556,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 = preparedTools.value.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(() => {
@@ -385,7 +600,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({
@@ -466,43 +682,24 @@ 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));
+    const preparedTools = computed(() => {
+      return props.toolbar.map(item => {
+        if (props.format === 'markdown') {
+          return item.filter(item => item !== 'underline');
+        } else {
+          return item.filter(item => item !== 'source');
         }
       });
-      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;
@@ -511,7 +708,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':
@@ -591,10 +792,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;
@@ -619,7 +820,7 @@ var script = defineComponent({
       isOpenLinkModal.value = false;
     };
     const setActiveFormats = () => {
-      const toolbarList = props.toolbar.flat();
+      const toolbarList = preparedTools.value.flat();
       toolbarList.forEach(item => {
         if (item === 'source') {
           isActive.value[item] = disableMarkdown.value;
@@ -630,12 +831,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') {
@@ -646,77 +842,70 @@ 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,
       sourceValue,
-      activeHeadingLevel
+      activeHeadingLevel,
+      preparedTools
     };
   }
 });
 
-const _hoisted_1 = ["invalid"];
+const _hoisted_1 = {
+  ref: "containerRef",
+  class: "m-none w-full h-full p-sm overflow-hidden"
+};
 const _hoisted_2 = {
-  class: /*#__PURE__*/normalizeClass(['p-sm', 'overflow-auto', 'min-h-[88px]'])
+  class: "w-full h-full min-h-[88px]"
 };
 const _hoisted_3 = ["activated"];
-const _hoisted_4 = {
-  class: "flex p-sm gap-md"
-};
-const _hoisted_5 = /*#__PURE__*/createElementVNode("p", {
+const _hoisted_4 = /*#__PURE__*/createElementVNode("p", {
   class: "text-headline-2"
 }, " Add Link ", -1 /* HOISTED */);
-const _hoisted_6 = {
+const _hoisted_5 = {
   class: "flex ml-auto gap-md"
 };
-const _hoisted_7 = /*#__PURE__*/createElementVNode("p", null, "Cancel", -1 /* HOISTED */);
-const _hoisted_8 = /*#__PURE__*/createElementVNode("p", null, "Save", -1 /* HOISTED */);
+const _hoisted_6 = /*#__PURE__*/createElementVNode("p", null, "Cancel", -1 /* HOISTED */);
+const _hoisted_7 = /*#__PURE__*/createElementVNode("p", null, "Save", -1 /* HOISTED */);
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrLabel = resolveComponent("OrLabel");
-  const _component_or_icon_button = resolveComponent("or-icon-button");
+  const _component_editor_toolbar = resolveComponent("editor-toolbar");
   const _component_OrHint = resolveComponent("OrHint");
   const _component_OrError = resolveComponent("OrError");
-  const _component_or_popover = resolveComponent("or-popover");
-  const _component_or_menu_item = resolveComponent("or-menu-item");
-  const _component_or_menu = resolveComponent("or-menu");
   const _component_or_label = resolveComponent("or-label");
   const _component_or_input = resolveComponent("or-input");
   const _component_or_button = resolveComponent("or-button");
   const _component_or_modal = resolveComponent("or-modal");
+  const _component_OrInputBox = resolveComponent("OrInputBox");
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles)
@@ -728,175 +917,86 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     default: withCtx(() => [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(_ctx.label), 1 /* TEXT */)])]),
 
     _: 3 /* FORWARDED */
-  })) : createCommentVNode("v-if", true), createElementVNode("div", {
-    ref: 'containerRef',
-    class: normalizeClass(_ctx.containerStyles),
+  })) : createCommentVNode("v-if", true), createVNode(_component_OrInputBox, {
+    class: "first:children:ml-none last:children:mr-none overflow-hidden flex flex-col",
     invalid: !!_ctx.error,
+    readonly: _ctx.readonly,
     onClick: _cache[4] || (_cache[4] = $event => _ctx.handleEditorClick())
-  }, [createElementVNode("div", {
-    ref: 'toolbarRef',
-    class: normalizeClass(_ctx.toolbarContainerStyles)
-  }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.toolbar, (tools, index) => {
-    return openBlock(), createElementBlock("div", {
-      key: index,
-      class: normalizeClass([..._ctx.toolbarStyles, {
-        'hidden': _ctx.isVisible(tools)
-      }])
-    }, [(openBlock(true), createElementBlock(Fragment, null, renderList(tools, item => {
-      return openBlock(), createElementBlock("div", {
-        key: item,
-        class: normalizeClass(['flex gap-md', {
-          'hidden': !_ctx.isVisible(item)
-        }])
-      }, [item === 'heading' ? (openBlock(), createBlock(_component_or_icon_button, {
-        key: 0,
-        ref_for: true,
-        ref: 'toolbarButtonRef',
-        selected: _ctx.isActive[item],
-        disabled: !_ctx.isFocused,
-        tooltip: {
-          content: item,
-          placement: 'top'
-        },
-        icon: {
-          icon: _ctx.headingIcon,
-          variant: 'inherit'
-        },
-        onClick: _cache[0] || (_cache[0] = $event => _ctx.menuRef && _ctx.menuRef.toggle())
-      }, null, 8 /* PROPS */, ["selected", "disabled", "tooltip", "icon"])) : _ctx.isVisible(item) ? (openBlock(), createBlock(_component_or_icon_button, {
-        key: 1,
-        tooltip: {
-          content: _ctx.iconTooltipsEnum[item],
-          placement: 'top'
-        },
-        selected: _ctx.isActive[item],
-        disabled: !_ctx.isFocused,
-        icon: {
-          icon: _ctx.iconsEnum[item],
-          variant: 'inherit'
-        },
-        onClick: $event => _ctx.handleToolbarClick(item)
-      }, null, 8 /* PROPS */, ["tooltip", "selected", "disabled", "icon", "onClick"])) : createCommentVNode("v-if", true)], 2 /* CLASS */);
-    }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */);
-  }), 128 /* KEYED_FRAGMENT */)), _ctx.countOfNotVisibleTools > 0 ? (openBlock(), createBlock(_component_or_icon_button, {
-    key: 0,
-    ref: 'moreButtonRef',
-    disabled: !_ctx.isFocused,
-    icon: {
-      icon: 'more_horiz',
-      variant: 'inherit'
-    },
-    class: "px-sm",
-    onClick: _cache[1] || (_cache[1] = $event => _ctx.moreRef && _ctx.moreRef.open())
-  }, null, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true)], 2 /* CLASS */), createElementVNode("div", _hoisted_2, [withDirectives(createElementVNode("textarea", {
-    ref: 'textareaRef',
-    "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => _ctx.sourceValue = $event),
-    activated: _ctx.disableMarkdown,
-    class: "block w-full h-full resize-none border-none outline-none bg-transparent typography-body-2-regular",
-    onInput: _cache[3] || (_cache[3] = function () {
-      return _ctx.handleInput && _ctx.handleInput(...arguments);
-    })
-  }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_3), [[vShow, _ctx.disableMarkdown], [vModelText, _ctx.sourceValue]]), withDirectives(createElementVNode("div", {
-    ref: 'editorRef',
-    class: normalizeClass(_ctx.editorInputStyles)
-  }, null, 2 /* CLASS */), [[vShow, !_ctx.disableMarkdown]]), renderSlot(_ctx.$slots, "files")])], 10 /* CLASS, PROPS */, _hoisted_1), !_ctx.error ? (openBlock(), createElementBlock(Fragment, {
-    key: 1
-  }, [_ctx.$slots.hint || _ctx.hint ? (openBlock(), createBlock(_component_OrHint, {
-    key: 0,
-    disabled: _ctx.disabled
-  }, {
-    default: withCtx(() => [renderSlot(_ctx.$slots, "hint", {}, () => [createTextVNode(toDisplayString(_ctx.hint), 1 /* TEXT */)])]),
-
-    _: 3 /* FORWARDED */
-  }, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true)], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true), typeof _ctx.error === 'string' ? (openBlock(), createBlock(_component_OrError, {
-    key: 2,
-    disabled: _ctx.disabled
   }, {
-    default: withCtx(() => [createTextVNode(toDisplayString(_ctx.error), 1 /* TEXT */)]),
-
-    _: 1 /* STABLE */
-  }, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true), _ctx.moreButtonRef ? (openBlock(), createBlock(_component_or_popover, {
-    key: 3,
-    ref: 'moreRef',
-    trigger: _ctx.moreButtonRef && _ctx.moreButtonRef.root,
-    placement: "top-end"
-  }, {
-    default: withCtx(() => [createElementVNode("div", _hoisted_4, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.notVisibleTools, item => {
-      return openBlock(), createBlock(_component_or_icon_button, {
-        key: item,
-        tooltip: {
-          content: _ctx.iconTooltipsEnum[item],
-          placement: 'top'
-        },
-        selected: _ctx.isActive[item],
-        icon: {
-          icon: _ctx.iconsEnum[item],
-          variant: 'inherit'
-        },
-        onClick: $event => _ctx.handleToolbarClick(item)
-      }, null, 8 /* PROPS */, ["tooltip", "selected", "icon", "onClick"]);
-    }), 128 /* KEYED_FRAGMENT */))])]),
-
-    _: 1 /* STABLE */
-  }, 8 /* PROPS */, ["trigger"])) : createCommentVNode("v-if", true), _ctx.toolbarButtonRef ? (openBlock(), createBlock(_component_or_menu, {
-    key: 4,
-    ref: 'menuRef',
-    trigger: _ctx.toolbarButtonRef[_ctx.getIndexOfHeading] && _ctx.toolbarButtonRef[_ctx.getIndexOfHeading].root,
-    placement: "bottom-start"
-  }, {
-    default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.headingLevels, heading => {
-      return openBlock(), createBlock(_component_or_menu_item, {
-        key: heading,
-        selected: _ctx.activeHeadingLevel === heading,
-        onClick: $event => _ctx.handleToolbarClick('heading', heading)
-      }, {
-        default: withCtx(() => [createTextVNode(" Heading " + toDisplayString(heading), 1 /* TEXT */)]),
-
-        _: 2 /* DYNAMIC */
-      }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["selected", "onClick"]);
-    }), 128 /* KEYED_FRAGMENT */)), createVNode(_component_or_menu_item, {
-      selected: !_ctx.activeHeadingLevel,
-      onClick: _cache[5] || (_cache[5] = $event => _ctx.handleToolbarClick('heading'))
+    default: withCtx(() => [!_ctx.readonly ? (openBlock(), createBlock(_component_editor_toolbar, {
+      key: 0,
+      ref: "toolbarContainerRef",
+      "count-of-not-visible-tools": _ctx.countOfNotVisibleTools,
+      toolbar: _ctx.preparedTools,
+      "is-focused": _ctx.isFocused,
+      "active-heading-level": _ctx.activeHeadingLevel,
+      "is-active": _ctx.isActive,
+      "heading-levels": _ctx.headingLevels,
+      onClickTool: _ctx.handleToolbarClick
+    }, null, 8 /* PROPS */, ["count-of-not-visible-tools", "toolbar", "is-focused", "active-heading-level", "is-active", "heading-levels", "onClickTool"])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [withDirectives(createElementVNode("textarea", {
+      ref: 'textareaRef',
+      "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.sourceValue = $event),
+      activated: _ctx.disableMarkdown,
+      class: "block w-full h-full resize-none border-none outline-none bg-transparent typography-body-2-regular",
+      onInput: _cache[1] || (_cache[1] = function () {
+        return _ctx.handleInput && _ctx.handleInput(...arguments);
+      })
+    }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_3), [[vShow, _ctx.disableMarkdown], [vModelText, _ctx.sourceValue]]), withDirectives(createElementVNode("div", {
+      ref: "editorRef",
+      class: normalizeClass([_ctx.editorInputStyles, "overflow-auto w-full h-full"])
+    }, null, 2 /* CLASS */), [[vShow, !_ctx.disableMarkdown]]), renderSlot(_ctx.$slots, "files")])], 512 /* NEED_PATCH */), !_ctx.error ? (openBlock(), createElementBlock(Fragment, {
+      key: 1
+    }, [_ctx.$slots.hint || _ctx.hint ? (openBlock(), createBlock(_component_OrHint, {
+      key: 0,
+      disabled: _ctx.disabled
     }, {
-      default: withCtx(() => [createTextVNode(" None ")]),
-      _: 1 /* STABLE */
-    }, 8 /* PROPS */, ["selected"])]),
-    _: 1 /* STABLE */
-  }, 8 /* PROPS */, ["trigger"])) : createCommentVNode("v-if", true), createVNode(_component_or_modal, {
-    "is-open": _ctx.isOpenLinkModal,
-    size: "s"
-  }, {
-    header: withCtx(() => [_hoisted_5]),
-    footer: withCtx(() => [createElementVNode("div", _hoisted_6, [createVNode(_component_or_button, {
-      variant: "outlined",
-      onClick: _ctx.discardLink
+      default: withCtx(() => [renderSlot(_ctx.$slots, "hint", {}, () => [createTextVNode(toDisplayString(_ctx.hint), 1 /* TEXT */)])]),
+
+      _: 3 /* FORWARDED */
+    }, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true)], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true), typeof _ctx.error === 'string' ? (openBlock(), createBlock(_component_OrError, {
+      key: 2,
+      disabled: _ctx.disabled
     }, {
-      default: withCtx(() => [_hoisted_7]),
+      default: withCtx(() => [createTextVNode(toDisplayString(_ctx.error), 1 /* TEXT */)]),
+
       _: 1 /* STABLE */
-    }, 8 /* PROPS */, ["onClick"]), createVNode(_component_or_button, {
-      onClick: _ctx.attachLink
+    }, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true), createVNode(_component_or_modal, {
+      "is-open": _ctx.isOpenLinkModal,
+      size: "s"
     }, {
-      default: withCtx(() => [_hoisted_8]),
-      _: 1 /* STABLE */
-    }, 8 /* PROPS */, ["onClick"])])]),
-    default: withCtx(() => [createElementVNode("div", null, [createVNode(_component_or_label, null, {
-      default: withCtx(() => [createTextVNode(" Text ")]),
-      _: 1 /* STABLE */
-    }), createVNode(_component_or_input, {
-      modelValue: _ctx.text,
-      "onUpdate:modelValue": _cache[6] || (_cache[6] = $event => _ctx.text = $event),
-      placeholder: "Enter text",
-      class: "pb-md"
-    }, null, 8 /* PROPS */, ["modelValue"]), createVNode(_component_or_label, null, {
-      default: withCtx(() => [createTextVNode(" Link ")]),
+      header: withCtx(() => [_hoisted_4]),
+      footer: withCtx(() => [createElementVNode("div", _hoisted_5, [createVNode(_component_or_button, {
+        variant: "outlined",
+        onClick: _ctx.discardLink
+      }, {
+        default: withCtx(() => [_hoisted_6]),
+        _: 1 /* STABLE */
+      }, 8 /* PROPS */, ["onClick"]), createVNode(_component_or_button, {
+        onClick: _ctx.attachLink
+      }, {
+        default: withCtx(() => [_hoisted_7]),
+        _: 1 /* STABLE */
+      }, 8 /* PROPS */, ["onClick"])])]),
+      default: withCtx(() => [createElementVNode("div", null, [createVNode(_component_or_label, null, {
+        default: withCtx(() => [createTextVNode(" Text ")]),
+        _: 1 /* STABLE */
+      }), createVNode(_component_or_input, {
+        modelValue: _ctx.text,
+        "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => _ctx.text = $event),
+        placeholder: "Enter text",
+        class: "pb-md"
+      }, null, 8 /* PROPS */, ["modelValue"]), createVNode(_component_or_label, null, {
+        default: withCtx(() => [createTextVNode(" Link ")]),
+        _: 1 /* STABLE */
+      }), createVNode(_component_or_input, {
+        modelValue: _ctx.link,
+        "onUpdate:modelValue": _cache[3] || (_cache[3] = $event => _ctx.link = $event),
+        placeholder: "Enter link"
+      }, null, 8 /* PROPS */, ["modelValue"])])]),
       _: 1 /* STABLE */
-    }), createVNode(_component_or_input, {
-      modelValue: _ctx.link,
-      "onUpdate:modelValue": _cache[7] || (_cache[7] = $event => _ctx.link = $event),
-      placeholder: "Enter link"
-    }, null, 8 /* PROPS */, ["modelValue"])])]),
-    _: 1 /* STABLE */
-  }, 8 /* PROPS */, ["is-open"])], 2 /* CLASS */);
+    }, 8 /* PROPS */, ["is-open"])]),
+    _: 3 /* FORWARDED */
+  }, 8 /* PROPS */, ["invalid", "readonly"])], 2 /* CLASS */);
 }
 
 var css_248z = ".tiptap-editor-v3 .is-editor-empty::before {\n  float: left;\n  height: 0;\n  pointer-events: none;\n  content: attr(data-placeholder);\n}";