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

package/dist/esm/v3/{OrRichTextEditor-b5684aab.js → OrRichTextEditor-cdd9e3e4.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,17 +16,18 @@ 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-c95aef65.js';
-import { s as script$1 } from './OrIconButton-6b3cc334.js';
-import { s as script$6 } from './OrInput-880cd853.js';
-import { s as script$2 } from './OrLabel-59d09591.js';
+import { s as script$2 } from './OrIconButton-6b3cc334.js';
 import { s as script$3 } from './OrMenuItem-2c1cfee3.js';
 import { s as script$4 } from './OrMenu-87af0fa8.js';
-import { s as script$5 } from './OrModal-045e3f4c.js';
-import { s as script$8 } from './OrPopover-4fc2c5be.js';
+import { s as script$5 } from './OrPopover-4fc2c5be.js';
 import './dom-53c9635b.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$8 } from './OrButton-c95aef65.js';
+import { s as script$7 } from './OrInput-880cd853.js';
+import { s as script$6 } from './OrModal-045e3f4c.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-59d09591.js';
 import { Node, Editor, mergeAttributes } from '@tiptap/core';
 import Heading from '@tiptap/extension-heading';
 import Placeholder from '@tiptap/extension-placeholder';
@@ -34,7 +35,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 serializerNodes = {
@@ -162,16 +162,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',
@@ -202,6 +203,251 @@ 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'
+    });
+    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
+    };
+  }
+});
+
+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.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.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) {
   Formats["Markdown"] = "markdown";
@@ -247,16 +493,13 @@ 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
   },
   model: {
     prop: 'modelValue',
@@ -302,6 +545,10 @@ var script = defineComponent({
     error: {
       type: [String, Boolean],
       default: undefined
+    },
+    readonly: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['update:modelValue', 'input', 'file-upload'],
@@ -313,11 +560,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,
@@ -335,7 +578,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('');
@@ -350,49 +593,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(() => {
@@ -424,7 +637,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({
@@ -505,43 +719,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;
@@ -550,7 +736,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':
@@ -630,10 +820,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;
@@ -669,11 +859,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 => {
@@ -681,43 +867,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,
@@ -732,26 +913,20 @@ const _hoisted_2 = {
   class: /*#__PURE__*/normalizeClass(['p-sm', 'overflow-auto', '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");
@@ -768,75 +943,30 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
     _: 3 /* FORWARDED */
   })) : createCommentVNode("v-if", true), createElementVNode("div", {
-    ref: 'containerRef',
+    ref: "containerRef",
     class: normalizeClass(_ctx.containerStyles),
     invalid: !!_ctx.error,
-    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, {
+    onClick: _cache[2] || (_cache[2] = $event => _ctx.handleEditorClick())
+  }, [!_ctx.readonly ? (openBlock(), createBlock(_component_editor_toolbar, {
     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: "toolbarContainerRef",
+    "count-of-not-visible-tools": _ctx.countOfNotVisibleTools,
+    toolbar: _ctx.toolbar,
+    "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_2, [withDirectives(createElementVNode("textarea", {
     ref: 'textareaRef',
-    "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => _ctx.sourceValue = $event),
+    "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[3] || (_cache[3] = function () {
+    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',
+    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
@@ -854,68 +984,21 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     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(() => [createTextVNode(" None ")]),
-      _: 1 /* STABLE */
-    }, 8 /* PROPS */, ["selected"])]),
-    _: 1 /* STABLE */
-  }, 8 /* PROPS */, ["trigger"])) : createCommentVNode("v-if", true), createVNode(_component_or_modal, {
+  }, 8 /* PROPS */, ["disabled"])) : 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, {
+    header: withCtx(() => [_hoisted_4]),
+    footer: withCtx(() => [createElementVNode("div", _hoisted_5, [createVNode(_component_or_button, {
       variant: "outlined",
       onClick: _ctx.discardLink
     }, {
-      default: withCtx(() => [_hoisted_7]),
+      default: withCtx(() => [_hoisted_6]),
       _: 1 /* STABLE */
     }, 8 /* PROPS */, ["onClick"]), createVNode(_component_or_button, {
       onClick: _ctx.attachLink
     }, {
-      default: withCtx(() => [_hoisted_8]),
+      default: withCtx(() => [_hoisted_7]),
       _: 1 /* STABLE */
     }, 8 /* PROPS */, ["onClick"])])]),
     default: withCtx(() => [createElementVNode("div", null, [createVNode(_component_or_label, null, {
@@ -923,7 +1006,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       _: 1 /* STABLE */
     }), createVNode(_component_or_input, {
       modelValue: _ctx.text,
-      "onUpdate:modelValue": _cache[6] || (_cache[6] = $event => _ctx.text = $event),
+      "onUpdate:modelValue": _cache[3] || (_cache[3] = $event => _ctx.text = $event),
       placeholder: "Placeholder",
       class: "pb-md"
     }, null, 8 /* PROPS */, ["modelValue"]), createVNode(_component_or_label, null, {
@@ -931,7 +1014,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       _: 1 /* STABLE */
     }), createVNode(_component_or_input, {
       modelValue: _ctx.link,
-      "onUpdate:modelValue": _cache[7] || (_cache[7] = $event => _ctx.link = $event),
+      "onUpdate:modelValue": _cache[4] || (_cache[4] = $event => _ctx.link = $event),
       placeholder: "Placeholder"
     }, null, 8 /* PROPS */, ["modelValue"])])]),
     _: 1 /* STABLE */