@onereach/ui-components 6.2.0-beta.3320.0 → 6.2.0

package/dist/esm/v2/OrRichTextEditor-6fb5d647.js

@@ -0,0 +1,981 @@
+import { defineComponent, ref, onMounted, onBeforeUnmount, computed, watch, nextTick } from 'vue-demi';
+import { useFocusTrap } from '@vueuse/integrations/useFocusTrap';
+import { useResizeObserver, onClickOutside } from '@vueuse/core';
+import { defaultMarkdownSerializer, MarkdownSerializer } from 'prosemirror-markdown';
+import { DOMParser as DOMParser$1 } from 'prosemirror-model';
+import Paragraph from '@tiptap/extension-paragraph';
+import BulletList from '@tiptap/extension-bullet-list';
+import ListItem from '@tiptap/extension-list-item';
+import OrderedList from '@tiptap/extension-ordered-list';
+import Strike from '@tiptap/extension-strike';
+import Italic from '@tiptap/extension-italic';
+import HardBreak from '@tiptap/extension-hard-break';
+import Bold from '@tiptap/extension-bold';
+import CodeBlock from '@tiptap/extension-code-block';
+import Blockquote from '@tiptap/extension-blockquote';
+import Link from '@tiptap/extension-link';
+import Highlight from '@tiptap/extension-highlight';
+import Underline from '@tiptap/extension-underline';
+import { _ as __vue_component__$1 } from './OrIconButton-6eda233c.js';
+import { _ as __vue_component__$2 } from './OrLabel-4a3d8904.js';
+import { _ as __vue_component__$4 } from './OrMenu-c2c6473f.js';
+import { _ as __vue_component__$8 } from './OrPopover-f6114169.js';
+import { _ as __vue_component__$3 } from './OrMenuItem-c1c97ebe.js';
+import { _ as __vue_component__$5 } from './OrModal-8ea08182.js';
+import { _ as __vue_component__$6 } from './OrInput-54abe165.js';
+import { _ as __vue_component__$7 } from './OrButton-a23ee9f0.js';
+import _ from 'lodash';
+import { Node, Editor, mergeAttributes } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+import Heading from '@tiptap/extension-heading';
+import Placeholder from '@tiptap/extension-placeholder';
+import { C as CodeMirrorView } from './codemirrorView-020fe885.js';
+import { minimalSetup } from 'codemirror';
+import { javascript } from '@codemirror/lang-javascript';
+import { s as styleInject } from './style-inject.es-4c6f2515.js';
+import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
+
+const serializerNodes = {
+  ...defaultMarkdownSerializer.nodes,
+  [Paragraph.name]: defaultMarkdownSerializer.nodes.paragraph,
+  [BulletList.name]: defaultMarkdownSerializer.nodes.bullet_list,
+  [ListItem.name]: defaultMarkdownSerializer.nodes.list_item,
+  [OrderedList.name]: defaultMarkdownSerializer.nodes.ordered_list,
+  [HardBreak.name]: defaultMarkdownSerializer.nodes.hard_break,
+  [CodeBlock.name]: defaultMarkdownSerializer.nodes.code_block,
+  [Blockquote.name]: defaultMarkdownSerializer.nodes.blockquote
+};
+const serializerMarks = {
+  ...defaultMarkdownSerializer.marks,
+  [Bold.name]: defaultMarkdownSerializer.marks.strong,
+  [Strike.name]: {
+    open: '~~',
+    close: '~~',
+    mixable: true,
+    expelEnclosingWhitespace: true
+  },
+  [Italic.name]: {
+    open: ' _',
+    close: '_ ',
+    mixable: true,
+    expelEnclosingWhitespace: true
+  },
+  [Highlight.name]: {
+    open: '==',
+    close: '==',
+    mixable: true,
+    expelEnclosingWhitespace: true
+  },
+  [Underline.name]: {
+    open: '',
+    close: '',
+    mixable: true,
+    expelEnclosingWhitespace: true
+  },
+  [Link.name]: {
+    open(state, mark, parent, index) {
+      return isPlainURL(mark, parent, index, 1) ? '<' : '[';
+    },
+    close(state, mark, parent, index) {
+      const href = mark.attrs.canonicalSrc || mark.attrs.href;
+      return isPlainURL(mark, parent, index, -1) ? '>' : `](${state.esc(href)}${mark.attrs.title ? ` ${state.quote(mark.attrs.title)}` : ''})`;
+    }
+  }
+};
+const isPlainURL = (link, parent, index, side) => {
+  if (link.attrs.title || !/^\w+:/.test(link.attrs.href)) return false;
+  const content = parent.child(index + (side < 0 ? -1 : 0));
+  if (!content.isText || content.text !== link.attrs.href || content.marks[content.marks.length - 1] !== link) return false;
+  if (index === (side < 0 ? 1 : parent.childCount - 1)) return true;
+  const next = parent.child(index + (side < 0 ? -2 : 1));
+  return !link.isInSet(next.marks);
+};
+const parseMd = md => {
+  //ul
+  md = md.replace(/^\s*\n\*/gm, '<ul>\n*');
+  md = md.replace(/^(\*.+)\s*\n([^*])/gm, '$1\n</ul>\n\n$2');
+  md = md.replace(/^\*(.+)/gm, '<li>$1</li>');
+  //ol
+  md = md.replace(/^\s*\n\d\./gm, '<ol>\n1.');
+  md = md.replace(/^(\d\..+)\s*\n([^\d.])/gm, '$1\n</ol>\n\n$2');
+  md = md.replace(/^\d\.(.+)/gm, '<li>$1</li>');
+  //blockquote
+  md = md.replace(/^>(.+)/gm, '<blockquote>$1</blockquote>');
+  //h
+  md = md.replace(/[#]{6}(.+)/g, '<h6>$1</h6>');
+  md = md.replace(/[#]{5}(.+)/g, '<h5>$1</h5>');
+  md = md.replace(/[#]{4}(.+)/g, '<h4>$1</h4>');
+  md = md.replace(/[#]{3}(.+)/g, '<h3>$1</h3>');
+  md = md.replace(/[#]{2}(.+)/g, '<h2>$1</h2>');
+  md = md.replace(/[#]{1}(.+)/g, '<h1>$1</h1>');
+  //alt h
+  md = md.replace(/^(.+)\n=+/gm, '<h1>$1</h1>');
+  md = md.replace(/^(.+)\n-+/gm, '<h2>$1</h2>');
+  //images
+  md = md.replace(/!\[([^\]]+)\]\(([^)]+)\)/g, '<img src="$2" alt="$1" />');
+  //links
+  md = md.replace(/[[]{1}([^\]]+)[\]]{1}[(]{1}([^)"]+)("(.+)")?[)]{1}/g, '<a href="$2" title="$4">$1</a>');
+  //font styles
+  md = md.replace(/[*_]{2}([^*_]+)[*_]{2}/g, '<b>$1</b>');
+  md = md.replace(/[*_]{1}([^*_]+)[*_]{1}/g, '<i>$1</i>');
+  md = md.replace(/[=]{2}([^=]+)[=]{2}/g, '<mark>$1</mark>');
+  md = md.replace(/[~]{2}([^~]+)[~]{2}/g, '<del>$1</del>');
+  //pre
+  md = md.replace(/^\s*\n```(([^\s]+))?/gm, '<pre class="$2">');
+  md = md.replace(/^```\s*\n/gm, '</pre>\n\n');
+  //code
+  md = md.replace(/[`]{1}([^`]+)[`]{1}/g, '<code>$1</code>');
+  //p
+  md = md.replace(/^\s*(\n)?(.+)/gm, function (m) {
+    return /<(\/)?(h\d|ul|ol|li|blockquote|pre|img)/.test(m) ? m : '<p>' + m + '</p>';
+  });
+  //strip p from pre
+  md = md.replace(/(<pre.+>)\s*\n<p>(.+)<\/p>/gm, '$1$2');
+  return md;
+};
+const serialize = (schema, content) => {
+  const proseMirrorDocument = schema.nodeFromJSON(content);
+  const serializer = new MarkdownSerializer(serializerNodes, serializerMarks);
+  return serializer.serialize(proseMirrorDocument, {
+    tightLists: true
+  });
+};
+const deserialize = (schema, content) => {
+  if (!content) return null;
+  const html = parseMd(content);
+  if (!html) return null;
+  const parser = new DOMParser();
+  const {
+    body
+  } = parser.parseFromString(html, 'text/html');
+  // append original source as a comment that nodes can access
+  body.append(document.createComment(content));
+  const state = DOMParser$1.fromSchema(schema).parse(body);
+  return state.toJSON();
+};
+
+const EditorContainer = [
+// Colors
+'border-outline', 'focus-within:theme-background-primary-translucent', 'focus-within:theme-border-1-primary', 'focus-within:theme-outline-2-primary',
+// Sizing
+'border-1', 'rounded-md', 'w-full'];
+const ToolbarContainer = [
+// Layout
+'flex',
+//Spacing
+'py-sm',
+//Sizing
+'border-b-1',
+//Colors
+'border-b-outline'];
+const Toolbar = [
+// Layout
+'flex',
+// Spacing
+'px-sm', 'gap-md',
+// Sizing
+'border-l-1',
+//Colors
+'border-r-disabled',
+// Last child
+'first-of-type:border-none'];
+const ToolbarButton = [
+// Typography
+'text-on-disabled'];
+const ToolbarButtonFocused = [
+// Typography
+'text-outline'];
+const EditorInput = [
+// Typography
+'typography-body-2-regular',
+// Sizing
+'min-h-[88px]'];
+
+var Formats;
+(function (Formats) {
+  Formats["Markdown"] = "markdown";
+  Formats["Markup"] = "markup";
+})(Formats || (Formats = {}));
+
+var codemirrorNode = Node.create({
+  name: 'codeBlock',
+  content: 'text*',
+  marks: '',
+  group: 'block',
+  code: true,
+  defining: true,
+  isolating: true,
+  parseHTML() {
+    return [{
+      tag: 'pre',
+      preserveWhitespace: 'full'
+    }];
+  },
+  renderHTML() {
+    return ['pre', ['code', 0]];
+  },
+  addNodeView() {
+    return _ref => {
+      let {
+        node,
+        editor,
+        getPos
+      } = _ref;
+      return new CodeMirrorView({
+        node,
+        view: editor.view,
+        getPos: getPos,
+        cmOptions: {
+          extensions: [minimalSetup, javascript()]
+        }
+      });
+    };
+  }
+});
+
+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
+  },
+  inheritAttrs: false,
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    modelValue: {
+      type: String,
+      default: undefined
+    },
+    toolbar: {
+      type: Array,
+      default: () => []
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    autofocus: {
+      type: Boolean,
+      default: false
+    },
+    format: {
+      type: String,
+      default: Formats.Markup
+    },
+    fullHeight: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:modelValue', 'input', 'file-upload'],
+  expose: ['root'],
+  setup(props, context) {
+    // Refs
+    const root = ref();
+    let editor = null;
+    const editorRef = ref();
+    const textareaRef = ref();
+    const containerRef = ref();
+    const toolbarRef = ref();
+    const moreButtonRef = ref();
+    const moreRef = ref();
+    const toolbarButtonRef = ref();
+    const menuRef = ref();
+    // isActive should be set with default values for all toolbar buttons, otherwise it will not work in vue2
+    const isActive = ref({
+      bold: false,
+      italic: false,
+      underline: false,
+      strike: false,
+      bulletList: false,
+      orderedList: false,
+      link: false,
+      highlight: false,
+      redo: false,
+      undo: false,
+      codeBlock: false,
+      blockquote: false,
+      file: false,
+      source: false
+    });
+    const isFocused = ref(props.autofocus);
+    const headingLevels = [1, 2, 3, 4];
+    const activeHeadingLevel = ref(0);
+    const markdownOutput = ref('');
+    const isOpenLinkModal = ref(false);
+    const disableMarkdown = ref(false);
+    const text = ref('');
+    const link = ref('');
+    const countOfNotVisibleTools = ref(0);
+    const sourceValue = ref('');
+    let trap = useFocusTrap(editorRef, {
+      immediate: true,
+      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, _.debounce(entries => {
+      var _a, _b;
+      const entry = entries[0];
+      const {
+        width
+      } = entry.contentRect;
+      if (containerRef.value && toolbarRef.value && toolbarLength.value) {
+        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 count = width / lengthOfItem - 2;
+        countOfNotVisibleTools.value = Math.round(toolbarLength.value - count);
+      }
+    }, 10));
+    onMounted(() => {
+      editor = new Editor({
+        onUpdate: _ref => {
+          let {
+            editor
+          } = _ref;
+          isFocused.value = true;
+          setActiveFormats();
+          const html = editor.getHTML();
+          const text = editor.getText();
+          if (props.format === 'markdown') {
+            markdownOutput.value = serialize(editor.schema, editor.getJSON());
+            proxyModelValue.value = markdownOutput.value;
+          } else {
+            proxyModelValue.value = text === '' ? text : html;
+          }
+        },
+        onCreate: _ref2 => {
+          let {
+            editor
+          } = _ref2;
+          if (props.format === 'markdown') {
+            const deserialized = deserialize(editor.schema, proxyModelValue.value);
+            editor.commands.setContent(deserialized);
+          } else {
+            editor.commands.setContent(proxyModelValue.value);
+          }
+        },
+        element: editorRef.value,
+        autofocus: props.autofocus,
+        enableInputRules: true,
+        enablePasteRules: true,
+        extensions: [codemirrorNode, StarterKit.configure({
+          heading: false,
+          codeBlock: false,
+          paragraph: false,
+          bulletList: false,
+          orderedList: false,
+          blockquote: false
+        }), Paragraph.configure({
+          HTMLAttributes: {
+            class: 'my-xs'
+          }
+        }), BulletList.configure({
+          HTMLAttributes: {
+            class: 'mx-lg my-xs list-disc'
+          }
+        }), OrderedList.configure({
+          HTMLAttributes: {
+            class: 'mx-lg my-xs list-decimal'
+          }
+        }), Blockquote.configure({
+          HTMLAttributes: {
+            class: 'my-sm mx-lg px-lg border-l-2 border-outline'
+          }
+        }), Heading.configure({
+          levels: headingLevels
+        }).extend({
+          levels: headingLevels,
+          renderHTML(_ref3) {
+            let {
+              node,
+              HTMLAttributes
+            } = _ref3;
+            return ['h' + node.attrs.level, mergeAttributes(HTMLAttributes, {
+              class: `typography-headline-${node.attrs.level} my-xs`
+            }), 0];
+          }
+        }), Underline, Link.configure({
+          openOnClick: true,
+          linkOnPaste: true,
+          autolink: false,
+          protocols: ['ftp', 'mailto', 'http', 'https'],
+          validate: href => /^https?:\/\//.test(href),
+          HTMLAttributes: {
+            class: 'text-primary cursor-pointer'
+          }
+        }), Highlight, Placeholder.configure({
+          placeholder: props.placeholder,
+          emptyEditorClass: 'is-editor-empty text-outline'
+        })],
+        editorProps: {
+          attributes: {
+            class: 'flex flex-col focus:outline-none gap-xs'
+          }
+        },
+        parseOptions: {
+          preserveWhitespace: true
+        }
+      });
+      setActiveFormats();
+      trap.activate();
+    });
+    onBeforeUnmount(() => {
+      editor === null || editor === void 0 ? void 0 : editor.destroy();
+    });
+    onClickOutside(root, () => {
+      isFocused.value = false;
+      trap.deactivate();
+    });
+    // Computed
+    const proxyModelValue = computed({
+      get: () => {
+        return props.modelValue;
+      },
+      set: value => {
+        context.emit('input', value);
+        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;
+      }
+      return !notVisibleTools.value.has(value);
+    };
+    const handleInput = event => {
+      const target = event.target;
+      const value = target.value;
+      editor === null || editor === void 0 ? void 0 : editor.commands.setContent(deserialize(editor === null || editor === void 0 ? void 0 : editor.schema, value));
+      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) => {
+      var _a, _b;
+      switch (item) {
+        case 'source':
+          disableMarkdown.value = !disableMarkdown.value;
+          sourceValue.value = serialize(editor === null || editor === void 0 ? void 0 : editor.schema, editor === null || editor === void 0 ? void 0 : editor.getJSON());
+          nextTick(() => {
+            var _a;
+            return (_a = textareaRef.value) === null || _a === void 0 ? void 0 : _a.focus();
+          });
+          break;
+        case 'bulletList':
+        case 'orderedList':
+          item === 'bulletList' ? editor === null || editor === void 0 ? void 0 : editor.commands.toggleBulletList() : editor === null || editor === void 0 ? void 0 : editor.commands.toggleOrderedList();
+          break;
+        case 'link':
+          if (editor) {
+            const cursorPosition = (editor === null || editor === void 0 ? void 0 : editor.state.selection.$anchor.pos) || 0;
+            const {
+              from,
+              to,
+              empty
+            } = editor.state.selection;
+            const isLink = (_a = editor.view.state.doc.nodeAt(cursorPosition)) === null || _a === void 0 ? void 0 : _a.marks.filter(mark => mark.type.name === 'link');
+            const existedText = (isLink === null || isLink === void 0 ? void 0 : isLink.length) ? ((_b = editor.view.state.doc.nodeAt(cursorPosition)) === null || _b === void 0 ? void 0 : _b.text) || '' : '';
+            text.value = empty ? existedText : editor.state.doc.textBetween(from, to, ' ');
+            link.value = editor.getAttributes('link').href || '';
+          }
+          isOpenLinkModal.value = !isOpenLinkModal.value;
+          break;
+        case 'blockquote':
+          editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleBlockquote().run();
+          break;
+        case 'codeBlock':
+          if (!isActive.value['codeBlock']) {
+            editor === null || editor === void 0 ? void 0 : editor.commands.setNode(item, {
+              language: 'javascript'
+            });
+          } else {
+            editor === null || editor === void 0 ? void 0 : editor.commands.setNode('paragraph');
+          }
+          break;
+        case 'heading':
+          if (!level) {
+            editor === null || editor === void 0 ? void 0 : editor.commands.setParagraph();
+            activeHeadingLevel.value = 0;
+          } else {
+            activeHeadingLevel.value = level;
+            editor === null || editor === void 0 ? void 0 : editor.commands.toggleHeading({
+              level: level
+            });
+          }
+          editor === null || editor === void 0 ? void 0 : editor.commands.focus();
+          break;
+        case 'undo':
+        case 'redo':
+          item === 'undo' ? editor === null || editor === void 0 ? void 0 : editor.commands.undo() : editor === null || editor === void 0 ? void 0 : editor.commands.redo();
+          break;
+        case 'file':
+          context.emit('file-upload');
+          break;
+        default:
+          editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleMark(item).run();
+          break;
+      }
+    };
+    const attachLink = async () => {
+      var _a, _b;
+      // empty
+      if (link.value === '') {
+        editor === null || editor === void 0 ? void 0 : editor.chain().focus().extendMarkRange('link').unsetLink().run();
+      }
+      const isEmptySelection = editor === null || editor === void 0 ? void 0 : editor.state.selection.empty;
+      const cursorPosition = (editor === null || editor === void 0 ? void 0 : editor.state.selection.$anchor.pos) || 0;
+      const isLink = (_a = editor === null || editor === void 0 ? void 0 : editor.view.state.doc.nodeAt(cursorPosition)) === null || _a === void 0 ? void 0 : _a.marks.filter(mark => mark.type.name === 'link');
+      const existedText = (isLink === null || isLink === void 0 ? void 0 : isLink.length) ? (_b = editor === null || editor === void 0 ? void 0 : editor.view.state.doc.nodeAt(cursorPosition)) === null || _b === void 0 ? void 0 : _b.text : '';
+      if (link.value && isEmptySelection && !existedText) {
+        editor === null || editor === void 0 ? void 0 : editor.chain().focus().setMark('link', {
+          href: link.value,
+          target: '__blank'
+        }).command(_ref4 => {
+          let {
+            tr
+          } = _ref4;
+          const preparedValue = text.value[text.value.length - 1] === ' ' ? text.value : `${text.value} `;
+          tr.insertText(preparedValue);
+          return true;
+        }).run();
+      }
+      if (link.value && existedText === text.value && isEmptySelection) {
+        editor === null || editor === void 0 ? void 0 : editor.chain().extendMarkRange('link').updateAttributes('link', {
+          href: link.value
+        }).run();
+      }
+      if (link.value && !isEmptySelection) {
+        editor === null || editor === void 0 ? void 0 : editor.chain().focus().setMark('link', {
+          href: link.value,
+          target: '__blank'
+        }).run();
+      }
+      text.value = '';
+      link.value = '';
+      isOpenLinkModal.value = false;
+    };
+    const discardLink = () => {
+      isOpenLinkModal.value = false;
+    };
+    const setActiveFormats = () => {
+      const toolbarList = props.toolbar.flat();
+      toolbarList.forEach(item => {
+        if (item === 'source') {
+          isActive.value[item] = disableMarkdown.value;
+        } else {
+          isActive.value[item] = (editor === null || editor === void 0 ? void 0 : editor.isActive(item)) || false;
+        }
+      });
+    };
+    // Styles
+    const rootStyles = computed(() => {
+      return ['or-rich-text-editor', ...(props.fullHeight ? ['h-full'] : [])];
+    });
+    const containerStyles = computed(() => {
+      return [...EditorContainer, ...(props.fullHeight ? ['h-full'] : [])];
+    });
+    const toolbarContainerStyles = computed(() => {
+      return [...ToolbarContainer];
+    });
+    const toolbarStyles = computed(() => {
+      return [...Toolbar,
+      // 'overflow-x-hidden',
+      ...(isFocused.value ? ToolbarButtonFocused : ToolbarButton)];
+    });
+    const editorInputStyles = computed(() => {
+      return ['tiptap-editor-v3', ...(props.fullHeight ? ['h-full overflow-y-auto'] : []), ...EditorInput];
+    });
+    //Effects
+    watch(proxyModelValue, value => {
+      if (value !== (editor === null || editor === void 0 ? void 0 : editor.getHTML()) && props.format !== 'markdown') {
+        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);
+      }
+    });
+    return {
+      editor,
+      editorRef,
+      toolbarRef,
+      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
+    };
+  }
+});
+
+var css_248z = ".tiptap-editor-v3 .is-editor-empty::before{float:left;height:0;pointer-events:none;content:attr(data-placeholder)}";
+styleInject(css_248z);
+
+/* script */
+const __vue_script__ = script;
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    ref: "root",
+    class: _vm.rootStyles
+  }, [_c('or-label', [_vm._v("\n    " + _vm._s(_vm.description) + "\n  ")]), _vm._v(" "), _c('div', {
+    ref: "containerRef",
+    class: _vm.containerStyles,
+    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": {
+            text: item,
+            placement: 'top'
+          },
+          "icon": {
+            icon: _vm.headingIcon,
+            variant: 'inherit',
+            size: 'm'
+          }
+        },
+        on: {
+          "click": function ($event) {
+            return _vm.menuRef.open();
+          }
+        }
+      }) : _vm.isVisible(item) ? _c('or-icon-button', {
+        attrs: {
+          "tooltip": {
+            text: _vm.iconTooltipsEnum[item],
+            placement: 'top'
+          },
+          "selected": _vm.isActive[item],
+          "disabled": !_vm.isFocused,
+          "icon": {
+            icon: _vm.iconsEnum[item],
+            variant: 'inherit',
+            size: 'm'
+          }
+        },
+        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",
+    attrs: {
+      "disabled": !_vm.isFocused,
+      "icon": {
+        icon: 'more_horiz',
+        variant: 'inherit',
+        size: 'm'
+      }
+    },
+    on: {
+      "click": function ($event) {
+        return _vm.moreRef.open();
+      }
+    }
+  }) : _vm._e()], 2), _vm._v(" "), _c('div', {
+    class: ['p-sm', {
+      'h-[calc(100%-32px)] md:h-[calc(100%-36px)]': _vm.fullHeight
+    }]
+  }, [_c('textarea', {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.disableMarkdown,
+      expression: "disableMarkdown"
+    }, {
+      name: "model",
+      rawName: "v-model",
+      value: _vm.sourceValue,
+      expression: "sourceValue"
+    }],
+    ref: "textareaRef",
+    staticClass: "w-full h-full resize-none border-none outline-none bg-transparent typography-body-2-regular",
+    attrs: {
+      "auto-focus": "",
+      "activated": _vm.disableMarkdown
+    },
+    domProps: {
+      "value": _vm.sourceValue
+    },
+    on: {
+      "input": [function ($event) {
+        if ($event.target.composing) {
+          return;
+        }
+        _vm.sourceValue = $event.target.value;
+      }, _vm.handleInput]
+    }
+  }), _vm._v(" "), _c('div', {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: !_vm.disableMarkdown,
+      expression: "!disableMarkdown"
+    }],
+    ref: "editorRef",
+    class: _vm.editorInputStyles
+  }), _vm._v(" "), _vm._t("files")], 2)]), _vm._v(" "), _vm.moreButtonRef ? _c('or-popover', {
+    ref: "moreRef",
+    attrs: {
+      "trigger": _vm.moreButtonRef.root,
+      "placement": "top-end"
+    }
+  }, [_c('div', {
+    staticClass: "flex p-sm gap-md bg-on-primary"
+  }, _vm._l(_vm.notVisibleTools, function (item) {
+    return _c('or-icon-button', {
+      key: item,
+      attrs: {
+        "tooltip": {
+          text: _vm.iconTooltipsEnum[item],
+          placement: 'top'
+        },
+        "selected": _vm.isActive[item],
+        "icon": {
+          icon: _vm.iconsEnum[item],
+          variant: 'inherit',
+          size: 'm'
+        }
+      },
+      on: {
+        "click": function ($event) {
+          return _vm.handleToolbarClick(item);
+        }
+      }
+    });
+  }), 1)]) : _vm._e(), _vm._v(" "), _vm.toolbarButtonRef ? _c('or-menu', {
+    ref: "menuRef",
+    staticClass: "bg-on-primary",
+    attrs: {
+      "trigger": _vm.toolbarButtonRef[_vm.getIndexOfHeading].root,
+      "placement": "bottom-start"
+    }
+  }, [_vm._l(_vm.headingLevels, function (heading) {
+    return _c('or-menu-item', {
+      key: heading,
+      on: {
+        "click": function ($event) {
+          return _vm.handleToolbarClick('heading', heading);
+        }
+      }
+    }, [_vm._v("\n      Heading " + _vm._s(heading) + "\n    ")]);
+  }), _vm._v(" "), _c('or-menu-item', {
+    on: {
+      "click": function ($event) {
+        return _vm.handleToolbarClick('heading');
+      }
+    }
+  }, [_vm._v("\n      None\n    ")])], 2) : _vm._e(), _vm._v(" "), _c('or-modal', {
+    attrs: {
+      "is-open": _vm.isOpenLinkModal,
+      "size": "s"
+    },
+    scopedSlots: _vm._u([{
+      key: "header",
+      fn: function () {
+        return [_c('p', {
+          staticClass: "text-headline-2"
+        }, [_vm._v("\n        Add Link\n      ")])];
+      },
+      proxy: true
+    }, {
+      key: "footer",
+      fn: function () {
+        return [_c('div', {
+          staticClass: "flex ml-auto gap-md"
+        }, [_c('or-button', {
+          attrs: {
+            "variant": "outlined"
+          },
+          on: {
+            "click": _vm.discardLink
+          }
+        }, [_c('p', [_vm._v("Cancel")])]), _vm._v(" "), _c('or-button', {
+          on: {
+            "click": _vm.attachLink
+          }
+        }, [_c('p', [_vm._v("Save")])])], 1)];
+      },
+      proxy: true
+    }])
+  }, [_vm._v(" "), _c('div', [_c('or-label', [_vm._v("\n        Text\n      ")]), _vm._v(" "), _c('or-input', {
+    staticClass: "pb-md",
+    attrs: {
+      "placeholder": "Placeholder"
+    },
+    model: {
+      value: _vm.text,
+      callback: function ($$v) {
+        _vm.text = $$v;
+      },
+      expression: "text"
+    }
+  }), _vm._v(" "), _c('or-label', [_vm._v("\n        Link\n      ")]), _vm._v(" "), _c('or-input', {
+    attrs: {
+      "placeholder": "Placeholder"
+    },
+    model: {
+      value: _vm.link,
+      callback: function ($$v) {
+        _vm.link = $$v;
+      },
+      expression: "link"
+    }
+  })], 1)])], 1);
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = undefined;
+/* scoped */
+const __vue_scope_id__ = undefined;
+/* module identifier */
+const __vue_module_identifier__ = undefined;
+/* functional template */
+const __vue_is_functional_template__ = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__ = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__,
+  staticRenderFns: __vue_staticRenderFns__
+}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
+
+export { Formats as F, __vue_component__ as _ };