@onereach/ui-components 8.20.1 → 8.20.2-beta.4019.0

package/dist/esm/v2/OrRichTextEditor-8b4d1d64.js

@@ -1,988 +0,0 @@
-import { defineComponent, ref, onMounted, onBeforeUnmount, computed, watch, nextTick } from 'vue-demi';
-import { useFocusTrap } from '@vueuse/integrations/useFocusTrap';
-import { useResizeObserver, useDebounceFn, 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-9502a78a.js';
-import { _ as __vue_component__$2 } from './OrLabel-6637774a.js';
-import { _ as __vue_component__$4 } from './OrMenu-8802ee12.js';
-import { _ as __vue_component__$8 } from './OrPopover-7d9405fb.js';
-import { _ as __vue_component__$3 } from './OrMenuItem-fbe3e8e4.js';
-import { _ as __vue_component__$5 } from './OrModal-333f7706.js';
-import { _ as __vue_component__$6 } from './OrInput-96532c77.js';
-import { _ as __vue_component__$7 } from './OrButton-8d1efd4a.js';
-import './OrButton.vue_rollup-plugin-vue_script-ec8cfaee.js';
-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-1', '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, useDebounceFn(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, _c, _d;
-      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());
-          (_a = textareaRef.value) === null || _a === void 0 ? void 0 : _a.style.setProperty('height', `${((_b = editorRef.value) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 88}px`);
-          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 = (_c = editor.view.state.doc.nodeAt(cursorPosition)) === null || _c === void 0 ? void 0 : _c.marks.filter(mark => mark.type.name === 'link');
-            const existedText = (isLink === null || isLink === void 0 ? void 0 : isLink.length) ? ((_d = editor.view.state.doc.nodeAt(cursorPosition)) === null || _d === void 0 ? void 0 : _d.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().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
-            });
-          }
-          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().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,
-      activeHeadingLevel
-    };
-  }
-});
-
-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": {
-            content: item,
-            placement: 'top'
-          },
-          "icon": {
-            icon: _vm.headingIcon,
-            variant: 'inherit',
-            size: 'm'
-          }
-        },
-        on: {
-          "click": function ($event) {
-            return _vm.menuRef.toggle();
-          }
-        }
-      }) : _vm.isVisible(item) ? _c('or-icon-button', {
-        attrs: {
-          "tooltip": {
-            content: _vm.iconTooltipsEnum[item],
-            placement: 'top'
-          },
-          "selected": _vm.isActive[item],
-          "disabled": !_vm.isFocused,
-          "icon": {
-            icon: _vm.iconsEnum[item],
-            variant: 'inherit',
-            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 && _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": {
-          content: _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] && _vm.toolbarButtonRef[_vm.getIndexOfHeading].root,
-      "placement": "bottom-start"
-    }
-  }, [_vm._l(_vm.headingLevels, function (heading) {
-    return _c('or-menu-item', {
-      key: heading,
-      attrs: {
-        "selected": _vm.activeHeadingLevel === heading
-      },
-      on: {
-        "click": function ($event) {
-          return _vm.handleToolbarClick('heading', heading);
-        }
-      }
-    }, [_vm._v("\n      Heading " + _vm._s(heading) + "\n    ")]);
-  }), _vm._v(" "), _c('or-menu-item', {
-    attrs: {
-      "selected": !_vm.activeHeadingLevel
-    },
-    on: {
-      "click": function ($event) {
-        return _vm.handleToolbarClick('heading');
-      }
-    }
-  }, [_vm._v("\n      None\n    ")])], 2) : _vm._e(), _vm._v(" "), _c('or-modal', {
-    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 _ };