@onereach/ui-components 20.1.1 → 20.1.2

package/dist/esm/components/or-rich-text-editor-v3/index.js

@@ -0,0 +1,1250 @@
+import { defineComponent, shallowRef, ref, onMounted, onBeforeUnmount, computed, watch, nextTick, resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, createElementVNode, Fragment, renderList, withDirectives, vShow, vModelText } from 'vue';
+import { s as styleInject } from '../OrInlineInputV3-061441a3.js';
+import { Node, Editor, mergeAttributes } from '@tiptap/core';
+import Blockquote from '@tiptap/extension-blockquote';
+import BulletList from '@tiptap/extension-bullet-list';
+import Heading from '@tiptap/extension-heading';
+import Highlight from '@tiptap/extension-highlight';
+import Link from '@tiptap/extension-link';
+import OrderedList from '@tiptap/extension-ordered-list';
+import Paragraph from '@tiptap/extension-paragraph';
+import Placeholder from '@tiptap/extension-placeholder';
+import Underline from '@tiptap/extension-underline';
+import StarterKit from '@tiptap/starter-kit';
+import { useResizeObserver, useDebounceFn, onClickOutside } from '@vueuse/core';
+import { useFocusTrap } from '@vueuse/integrations/useFocusTrap';
+import { u as ue, e } from '../OrAutocompleteV3-8c6de221.js';
+import { TextSelection, Selection } from 'prosemirror-state';
+import { exitCode } from 'prosemirror-commands';
+import { EditorState } from '@codemirror/state';
+import { EditorView, highlightActiveLine, highlightActiveLineGutter, lineNumbers, keymap } from '@codemirror/view';
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { tags } from '@lezer/highlight';
+import { minimalSetup } from 'codemirror';
+import { javascript } from '@codemirror/lang-javascript';
+import { defaultMarkdownSerializer, MarkdownSerializer } from 'prosemirror-markdown';
+import { DOMParser as DOMParser$1 } from 'prosemirror-model';
+import { marked } from 'marked';
+import ListItem from '@tiptap/extension-list-item';
+import Strike from '@tiptap/extension-strike';
+import Italic from '@tiptap/extension-italic';
+import HardBreak from '@tiptap/extension-hard-break';
+import HorizontalRule from '@tiptap/extension-horizontal-rule';
+import Bold from '@tiptap/extension-bold';
+import CodeBlock from '@tiptap/extension-code-block';
+import { OrButtonV3 as script$1 } from '../or-button-v3/index.js';
+import { OrErrorV3 as script$2 } from '../or-error-v3/index.js';
+import { OrHintV3 as script$3 } from '../or-hint-v3/index.js';
+import { OrIconButtonV3 as script$4 } from '../or-icon-button-v3/index.js';
+import { OrInputV3 as script$5 } from '../or-input-v3/index.js';
+import { OrInputBoxV3 as script$6 } from '../or-input-box-v3/index.js';
+import { OrLabelV3 as script$7 } from '../or-label-v3/index.js';
+import { OrMenuV3 as script$8 } from '../or-menu-v3/index.js';
+import { OrMenuItemV3 as script$9 } from '../or-menu-item-v3/index.js';
+import { OrModalV3 as script$a } from '../or-modal-v3/index.js';
+import { OrPopoverV3 as script$b } from '../or-popover-v3/index.js';
+import '../or-inline-input-box-v3/index.js';
+import '../or-text-v3/index.js';
+import '@onereach/styles/screens.json';
+import '@onereach/styles/tailwind.config.json';
+import 'lodash/get';
+import 'lodash/isElement';
+import '../or-loader-v3/index.js';
+import '../or-tag-input-v3/index.js';
+import '../or-tags-v3/index.js';
+import '../or-tag-v3/index.js';
+import '../or-icon-v3/index.js';
+import '../or-tooltip-v3/index.js';
+import '@floating-ui/dom';
+import '../or-bottom-sheet-v3/index.js';
+import '../or-overlay-v3/index.js';
+import '../or-teleport-v3/index.js';
+
+var Formats;
+(function (Formats) {
+  Formats["Markdown"] = "markdown";
+  Formats["Markup"] = "markup";
+})(Formats || (Formats = {}));
+var RichTextEditorIcons;
+(function (RichTextEditorIcons) {
+  RichTextEditorIcons["bold"] = "format_bold";
+  RichTextEditorIcons["italic"] = "format_italic";
+  RichTextEditorIcons["underline"] = "format_underlined";
+  RichTextEditorIcons["strike"] = "format_strikethrough";
+  RichTextEditorIcons["bulletList"] = "format_list_bulleted";
+  RichTextEditorIcons["orderedList"] = "format_list_numbered";
+  RichTextEditorIcons["link"] = "link";
+  RichTextEditorIcons["highlight"] = "highlight";
+  RichTextEditorIcons["redo"] = "redo";
+  RichTextEditorIcons["undo"] = "undo";
+  RichTextEditorIcons["codeBlock"] = "code_blocks";
+  RichTextEditorIcons["blockquote"] = "format_quote";
+  RichTextEditorIcons["file"] = "attach_file";
+  RichTextEditorIcons["source"] = "source_notes";
+})(RichTextEditorIcons || (RichTextEditorIcons = {}));
+var RichTextEditorTooltips;
+(function (RichTextEditorTooltips) {
+  RichTextEditorTooltips["bold"] = "Bold";
+  RichTextEditorTooltips["italic"] = "Italic";
+  RichTextEditorTooltips["underline"] = "Underline";
+  RichTextEditorTooltips["strike"] = "Strike";
+  RichTextEditorTooltips["bulletList"] = "Bulleted List";
+  RichTextEditorTooltips["orderedList"] = "Numbered List";
+  RichTextEditorTooltips["link"] = "Link";
+  RichTextEditorTooltips["highlight"] = "Highlight";
+  RichTextEditorTooltips["redo"] = "Redo";
+  RichTextEditorTooltips["undo"] = "Undo";
+  RichTextEditorTooltips["codeBlock"] = "Code Block";
+  RichTextEditorTooltips["blockquote"] = "Quote";
+  RichTextEditorTooltips["file"] = "File";
+  RichTextEditorTooltips["source"] = "Source";
+})(RichTextEditorTooltips || (RichTextEditorTooltips = {}));
+
+const RichTextEditor = [
+// Layout
+'layout-column',
+// Spacing
+'gap-xs',
+// Box
+'max-h-full'];
+const RichTextEditorToolbar = [
+// Layout
+'layout-row',
+// Spacing
+'px-0', 'py-sm',
+// Theme
+'border-b-1', 'theme-border-outline', 'dark:theme-border-outline-dark'];
+const RichTextEditorToolbarGroup = [
+// Layout
+'layout-row',
+// Spacing
+'px-sm', 'py-0', 'gap-md',
+// Theme
+'theme-foreground-outline', 'dark:theme-foreground-outline-dark', 'border-e-1 last:border-e-0', 'theme-border-outline', 'dark:theme-border-outline-dark'];
+const RichTextEditorControl = [
+// Typography
+'typography-body-2-regular',
+// Size
+'h-full'];
+
+var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+const themes = ue();
+const chalky = themes === null || themes === void 0 ? void 0 : themes.backgroundColor['custom-colors-custom-6'],
+  coral = themes === null || themes === void 0 ? void 0 : themes.backgroundColor['custom-colors-custom-1'],
+  cyan = themes === null || themes === void 0 ? void 0 : themes.backgroundColor['custom-colors-custom-3'],
+  invalid = (_a = themes === null || themes === void 0 ? void 0 : themes.backgroundColor) === null || _a === void 0 ? void 0 : _a.white,
+  ivory = themes === null || themes === void 0 ? void 0 : themes.backgroundColor['custom-colors-custom-6'],
+  stone = themes === null || themes === void 0 ? void 0 : themes.backgroundColor['custom-colors-custom-5'],
+  // Brightened compared to original to increase contrast
+  malibu = themes === null || themes === void 0 ? void 0 : themes.backgroundColor['custom-colors-custom-3'],
+  sage = themes === null || themes === void 0 ? void 0 : themes.backgroundColor.success,
+  whiskey = themes === null || themes === void 0 ? void 0 : themes.backgroundColor.warning,
+  violet = themes === null || themes === void 0 ? void 0 : themes.backgroundColor['custom-colors-custom-1'];
+/// The editor theme styles for One Dark.
+const orCodeTheme = EditorView.theme({
+  '&': {
+    color: ivory,
+    backgroundColor: (_b = themes === null || themes === void 0 ? void 0 : themes.backgroundColor) === null || _b === void 0 ? void 0 : _b['bg-primary-container']
+  },
+  '.cm-editor': {
+    border: 'none',
+    borderRadius: (_c = themes === null || themes === void 0 ? void 0 : themes.spacing) === null || _c === void 0 ? void 0 : _c.xs
+  },
+  '&.cm-focused': {
+    outline: 'none'
+  },
+  '.cm-scroller': {
+    borderRadius: (_d = themes === null || themes === void 0 ? void 0 : themes.spacing) === null || _d === void 0 ? void 0 : _d.xs
+  },
+  '.cm-content': {
+    // caretColor: cursor,
+  },
+  '.cm-button': {
+    // background: highlightBackground,
+    // color: themes?.colors?.neutral?.[600],
+    border: 0,
+    borderRadius: (_e = themes === null || themes === void 0 ? void 0 : themes.spacing) === null || _e === void 0 ? void 0 : _e.xs
+  },
+  '.cm-panel.cm-search input[type=checkbox]': {
+    display: 'inline-block',
+    verticalAlign: 'middle'
+  },
+  // '.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor },
+  '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
+    // backgroundColor: selection,
+  },
+  '.cm-panels': {
+    // backgroundColor: darkBackground,
+    color: ivory
+  },
+  // '.cm-panels.cm-panels-top': { borderBottom: `2px solid ${themes?.colors?.neutral?.[200]}` },
+  // '.cm-panels.cm-panels-bottom': { borderTop: `2px solid ${themes?.colors?.neutral?.[200]}` },
+  '.cm-searchMatch': {
+    // backgroundColor: themes?.colors?.neutral?.[100],
+    // outline: `1px solid ${themes?.colors?.neutral?.[200]}`,
+  },
+  '.cm-searchMatch.cm-searchMatch-selected': {
+    // backgroundColor: themes?.colors?.sky?.[100],
+  },
+  '.cm-activeLine': {
+    backgroundColor: (_f = themes === null || themes === void 0 ? void 0 : themes.backgroundColor) === null || _f === void 0 ? void 0 : _f['bg-secondary-container']
+  },
+  // '.cm-selectionMatch': { backgroundColor: themes?.colors?.lime?.[500] },
+  '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
+    // backgroundColor: themes?.colors?.lime?.[600],
+  },
+  '.cm-gutters': {
+    backgroundColor: (_g = themes === null || themes === void 0 ? void 0 : themes.backgroundColor) === null || _g === void 0 ? void 0 : _g['primary-opacity-0-12'],
+    color: stone,
+    border: 'none'
+  },
+  '.cm-lineNumbers .cm-gutterElement': {
+    paddingLeft: (_h = themes === null || themes === void 0 ? void 0 : themes.spacing) === null || _h === void 0 ? void 0 : _h['sm+*'],
+    paddingRight: (_j = themes === null || themes === void 0 ? void 0 : themes.spacing) === null || _j === void 0 ? void 0 : _j['sm+*']
+  },
+  '.cm-activeLineGutter': {
+    backgroundColor: (_k = themes === null || themes === void 0 ? void 0 : themes.backgroundColor) === null || _k === void 0 ? void 0 : _k['primary-opacity-0-16']
+  },
+  '.cm-foldPlaceholder': {
+    backgroundColor: 'transparent',
+    border: 'none'
+    // color: themes?.colors?.neutral?.[200],
+  },
+  '.cm-tooltip': {
+    border: 'none'
+    // backgroundColor: tooltipBackground,
+  },
+  '.cm-tooltip .cm-tooltip-arrow:before': {
+    borderTopColor: 'transparent',
+    borderBottomColor: 'transparent'
+  },
+  '.cm-tooltip .cm-tooltip-arrow:after': {
+    // borderTopColor: tooltipBackground,
+    // borderBottomColor: tooltipBackground,
+  },
+  '.cm-tooltip-autocomplete': {
+    '& > ul > li[aria-selected]': {
+      // backgroundColor: highlightBackground,
+      color: ivory
+    }
+  },
+  '.cm-textfield': {
+    outline: 'none',
+    // background: background,
+    // color: themes?.colors?.neutral?.[600],
+    // backgroundColor: themes?.colors?.neutral?.[100],
+    // border: `1px solid ${themes?.colors?.neutral?.[200]}`,
+    borderRadius: (_l = themes === null || themes === void 0 ? void 0 : themes.spacing) === null || _l === void 0 ? void 0 : _l.xs
+  }
+}, {
+  dark: true
+});
+/// The highlighting style for code in the One Dark theme.
+const orCodeHighlightStyle = HighlightStyle.define([{
+  tag: tags.keyword,
+  color: violet
+}, {
+  tag: [tags.name, tags.deleted, tags.character, tags.propertyName, tags.macroName],
+  color: coral
+}, {
+  tag: [tags.function(tags.variableName), tags.labelName],
+  color: malibu
+}, {
+  tag: [tags.color, tags.constant(tags.name), tags.standard(tags.name)],
+  color: whiskey
+}, {
+  tag: [tags.definition(tags.name), tags.separator],
+  color: ivory
+}, {
+  tag: [tags.typeName, tags.className, tags.number, tags.changed, tags.annotation, tags.modifier, tags.self, tags.namespace],
+  color: chalky
+}, {
+  tag: [tags.operator, tags.operatorKeyword, tags.url, tags.escape, tags.regexp, tags.link, tags.special(tags.string)],
+  color: cyan
+}, {
+  tag: [tags.meta, tags.comment],
+  color: stone
+}, {
+  tag: tags.strong,
+  fontWeight: 'bold'
+}, {
+  tag: tags.emphasis,
+  fontStyle: 'italic'
+}, {
+  tag: tags.strikethrough,
+  textDecoration: 'line-through'
+}, {
+  tag: tags.link,
+  color: stone,
+  textDecoration: 'underline'
+}, {
+  tag: tags.heading,
+  fontWeight: 'bold',
+  color: coral
+}, {
+  tag: [tags.atom, tags.bool, tags.special(tags.variableName)],
+  color: whiskey
+}, {
+  tag: [tags.processingInstruction, tags.string, tags.inserted],
+  color: sage
+}, {
+  tag: tags.invalid,
+  color: invalid
+}]);
+/// Extension to enable the One Dark theme (both the editor theme and
+/// the highlight style).
+const theme = [orCodeTheme, syntaxHighlighting(orCodeHighlightStyle)];
+
+const computeChange = (oldVal, newVal) => {
+  if (oldVal === newVal) {
+    return null;
+  }
+  let start = 0;
+  let oldEnd = oldVal.length;
+  let newEnd = newVal.length;
+  while (start < oldEnd && oldVal.charCodeAt(start) === newVal.charCodeAt(start)) {
+    start += 1;
+  }
+  while (oldEnd > start && newEnd > start && oldVal.charCodeAt(oldEnd - 1) === newVal.charCodeAt(newEnd - 1)) {
+    oldEnd -= 1;
+    newEnd -= 1;
+  }
+  return {
+    from: start,
+    to: oldEnd,
+    text: newVal.slice(start, newEnd)
+  };
+};
+class CodeMirrorView {
+  constructor(options) {
+    var _a;
+    this.updating = false;
+    // Store for later
+    this.node = options.node;
+    this.view = options.view;
+    const cmExtensions = ((_a = options.cmOptions) === null || _a === void 0 ? void 0 : _a.extensions) || [];
+    this.name = 'codeBlock', this.getPos = options.getPos;
+    const changeFilter = EditorState.changeFilter.of(tr => {
+      if (!tr.docChanged && !this.updating) {
+        this.forwardSelection();
+      }
+      return true;
+    });
+    // Create a CodeMirror instancew
+    this.cm = new EditorView({
+      dispatch: this.dispatch.bind(this)
+    });
+    // The editor's outer node is our DOM representation
+    this.dom = this.cm.dom;
+    const cmState = EditorState.create({
+      doc: this.node.textContent,
+      extensions: [theme, changeFilter, highlightActiveLine(), highlightActiveLineGutter(), lineNumbers(), keymap.of([{
+        key: 'ArrowUp',
+        run: this.mayBeEscape('line', -1)
+      }, {
+        key: 'ArrowLeft',
+        run: this.mayBeEscape('char', -1)
+      }, {
+        key: 'ArrowDown',
+        run: this.mayBeEscape('line', 1)
+      }, {
+        key: 'ArrowRight',
+        run: this.mayBeEscape('char', 1)
+      }, {
+        key: 'Ctrl-Enter',
+        run: () => {
+          if (exitCode(this.view.state, this.view.dispatch)) {
+            this.view.focus();
+            return true;
+          }
+          return false;
+        }
+      }]), cmExtensions]
+    });
+    this.cm.setState(cmState);
+  }
+  forwardSelection() {
+    if (!this.cm.hasFocus) {
+      return;
+    }
+    const {
+      state
+    } = this.view;
+    const selection = this.asProseMirrorSelection(state.doc);
+    if (!selection.eq(state.selection)) {
+      this.view.dispatch(state.tr.setSelection(selection));
+    }
+  }
+  asProseMirrorSelection(doc) {
+    const offset = this.getPos() + 1;
+    const {
+      anchor,
+      head
+    } = this.cm.state.selection.main;
+    return TextSelection.create(doc, anchor + offset, head + offset);
+  }
+  dispatch(cmTr) {
+    this.cm.setState(cmTr.state);
+    if (cmTr.docChanged && !this.updating) {
+      const start = this.getPos() + 1;
+      const cmValue = cmTr.state.doc.toString();
+      const change = computeChange(this.node.textContent, cmValue);
+      if (!change) {
+        return;
+      }
+      const content = change.text ? this.view.state.schema.text(change.text) : null;
+      const tr = this.view.state.tr.replaceWith(change.from + start, change.to + start, content);
+      this.view.dispatch(tr);
+      this.forwardSelection();
+    }
+  }
+  mayBeEscape(unit, dir) {
+    return view => {
+      const {
+        state
+      } = view;
+      const {
+        selection
+      } = state;
+      const offsetToPos = () => {
+        const offset = selection.main.from;
+        const line = state.doc.lineAt(offset);
+        return {
+          line: line.number,
+          ch: offset - line.from
+        };
+      };
+      const pos = offsetToPos();
+      const hasSelection = state.selection.ranges.some(r => !r.empty);
+      const firstLine = 1;
+      const lastLine = state.doc.lineAt(state.doc.length).number;
+      if (hasSelection || pos.line !== (dir < 0 ? firstLine : lastLine) || unit === 'char' && pos.ch !== (dir < 0 ? 0 : state.doc.line(pos.line).length)) {
+        return false;
+      }
+      const targetPos = this.getPos() + (dir < 0 ? 0 : this.node.nodeSize);
+      const pmSelection = Selection.near(this.view.state.doc.resolve(targetPos), dir);
+      this.view.dispatch(this.view.state.tr.setSelection(pmSelection).scrollIntoView());
+      this.view.focus();
+      return true;
+    };
+  }
+  update(node) {
+    if (node.type !== this.node.type) {
+      return false;
+    }
+    this.node = node;
+    const change = computeChange(this.cm.state.doc.toString(), node.textContent);
+    if (change) {
+      this.updating = true;
+      this.cm.dispatch({
+        changes: {
+          from: change.from,
+          to: change.to,
+          insert: change.text
+        }
+      });
+      this.updating = false;
+    }
+    return true;
+  }
+  setSelection(anchor, head) {
+    this.focus();
+    this.updating = true;
+    this.cm.dispatch({
+      selection: {
+        anchor,
+        head
+      }
+    });
+    this.updating = false;
+  }
+  focus() {
+    this.cm.focus();
+    this.forwardSelection();
+  }
+  selectNode() {
+    this.focus();
+  }
+  stopEvent() {
+    return true;
+  }
+  destroy() {
+    this.cm.destroy();
+  }
+}
+var CodeBlockView = CodeMirrorView;
+
+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 ({
+      node,
+      editor,
+      getPos
+    }) => {
+      return new CodeBlockView({
+        node,
+        view: editor.view,
+        getPos: getPos,
+        cmOptions: {
+          extensions: [minimalSetup, javascript()]
+        }
+      });
+    };
+  }
+});
+
+const mdSerializerNodes = {
+  ...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,
+  [HorizontalRule.name]: defaultMarkdownSerializer.nodes.horizontal_rule
+};
+const mdSerializerMarks = {
+  ...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)}` : ''})`;
+    }
+  }
+};
+function 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);
+}
+function serialize(schema, content) {
+  const mdSerializer = new MarkdownSerializer(mdSerializerNodes, mdSerializerMarks);
+  const proseMirrorDocument = schema.nodeFromJSON(content);
+  return mdSerializer.serialize(proseMirrorDocument, {
+    tightLists: true
+  });
+}
+function deserialize(schema, content) {
+  if (!content) return null;
+  const html = marked.parse(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();
+}
+
+var script = defineComponent({
+  name: 'OrRichTextEditor',
+  components: {
+    OrButton: script$1,
+    OrError: script$2,
+    OrHint: script$3,
+    OrIconButton: script$4,
+    OrInput: script$5,
+    OrInputBox: script$6,
+    OrLabel: script$7,
+    OrMenu: script$8,
+    OrMenuItem: script$9,
+    OrModal: script$a,
+    OrPopover: script$b
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    modelValue: {
+      type: String,
+      default: undefined
+    },
+    toolbar: {
+      type: Array,
+      default: () => []
+    },
+    autofocus: {
+      type: Boolean,
+      default: false
+    },
+    format: {
+      type: String,
+      default: () => Formats.Markup
+    },
+    label: {
+      type: String,
+      default: undefined
+    },
+    placeholder: {
+      type: String,
+      default: undefined
+    },
+    hint: {
+      type: String,
+      default: undefined
+    },
+    error: {
+      type: [String, Boolean],
+      default: undefined
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:modelValue', 'input', 'file-upload'],
+  expose: ['root', 'editor'],
+  setup(props, context) {
+    let editor = shallowRef();
+    const controlRef = ref();
+    const toolbarRef = ref();
+    // Refs & Styles
+    const root = ref();
+    const textareaRef = ref();
+    const containerRef = 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(controlRef, {
+      fallbackFocus: '.container',
+      allowOutsideClick: true
+    });
+    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.value = new Editor({
+        onUpdate: ({
+          editor
+        }) => {
+          isFocused.value = true;
+          setActiveFormats();
+          const html = editor.getHTML();
+          const text = editor.getText();
+          if (props.format === 'markdown') {
+            markdownOutput.value = serialize(editor.schema, editor.getJSON());
+            model.value = markdownOutput.value;
+          } else {
+            model.value = text === '' ? text : html;
+          }
+        },
+        onCreate: ({
+          editor
+        }) => {
+          if (props.format === 'markdown') {
+            editor.commands.setContent(deserialize(editor.schema, model.value));
+          } else {
+            editor.commands.setContent(model.value);
+          }
+        },
+        element: controlRef.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({
+            node,
+            HTMLAttributes
+          }) {
+            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 h-full'
+          }
+        },
+        parseOptions: {
+          preserveWhitespace: true
+        }
+      });
+      setActiveFormats();
+      trap.activate();
+    });
+    onBeforeUnmount(() => {
+      var _a;
+      (_a = editor.value) === null || _a === void 0 ? void 0 : _a.destroy();
+    });
+    onClickOutside(root, () => {
+      isFocused.value = false;
+      trap.deactivate();
+    });
+    // Computed
+    const model = 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 getRichTextEditorIcon = computed(() => item => {
+      return RichTextEditorIcons[item];
+    });
+    const getRichTextEditorTooltipIcon = computed(() => item => {
+      return RichTextEditorTooltips[item];
+    });
+    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, _b, _c;
+      setActiveFormats();
+      isFocused.value = true;
+      (_a = editor.value) === null || _a === void 0 ? void 0 : _a.commands.focus();
+      activeHeadingLevel.value = ((_c = (_b = editor.value) === null || _b === void 0 ? void 0 : _b.getAttributes('heading')) === null || _c === void 0 ? void 0 : _c.level) || 0;
+    };
+    const isVisible = value => {
+      if (e(value)) {
+        const isHaveNotVisibleTools = value.some(item => notVisibleTools.value.has(item));
+        return isHaveNotVisibleTools;
+      }
+      return !notVisibleTools.value.has(value);
+    };
+    const handleInput = event => {
+      var _a, _b, _c, _d;
+      const target = event.target;
+      const value = target.value;
+      (_a = editor.value) === null || _a === void 0 ? void 0 : _a.commands.setContent(deserialize((_b = editor.value) === null || _b === void 0 ? void 0 : _b.schema, value));
+      markdownOutput.value = serialize((_c = editor.value) === null || _c === void 0 ? void 0 : _c.schema, (_d = editor.value) === null || _d === void 0 ? void 0 : _d.getJSON());
+      model.value = markdownOutput.value;
+    };
+    const handleToolbarClick = (item, level) => {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+      switch (item) {
+        case 'source':
+          disableMarkdown.value = !disableMarkdown.value;
+          sourceValue.value = serialize((_a = editor.value) === null || _a === void 0 ? void 0 : _a.schema, (_b = editor.value) === null || _b === void 0 ? void 0 : _b.getJSON());
+          (_c = textareaRef.value) === null || _c === void 0 ? void 0 : _c.style.setProperty('height', `${((_d = controlRef.value) === null || _d === void 0 ? void 0 : _d.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' ? (_e = editor.value) === null || _e === void 0 ? void 0 : _e.commands.toggleBulletList() : (_f = editor.value) === null || _f === void 0 ? void 0 : _f.commands.toggleOrderedList();
+          break;
+        case 'link':
+          if (editor.value) {
+            const cursorPosition = ((_g = editor.value) === null || _g === void 0 ? void 0 : _g.state.selection.$anchor.pos) || 0;
+            const {
+              from,
+              to,
+              empty
+            } = editor.value.state.selection;
+            const isLink = (_h = editor.value.view.state.doc.nodeAt(cursorPosition)) === null || _h === void 0 ? void 0 : _h.marks.filter(mark => mark.type.name === 'link');
+            const existedText = (isLink === null || isLink === void 0 ? void 0 : isLink.length) ? ((_j = editor.value.view.state.doc.nodeAt(cursorPosition)) === null || _j === void 0 ? void 0 : _j.text) || '' : '';
+            text.value = empty ? existedText : editor.value.state.doc.textBetween(from, to, ' ');
+            link.value = editor.value.getAttributes('link').href || '';
+          }
+          isOpenLinkModal.value = !isOpenLinkModal.value;
+          break;
+        case 'blockquote':
+          (_k = editor.value) === null || _k === void 0 ? void 0 : _k.chain().toggleBlockquote().run();
+          break;
+        case 'codeBlock':
+          if (!isActive.value['codeBlock']) {
+            (_l = editor.value) === null || _l === void 0 ? void 0 : _l.commands.setNode(item, {
+              language: 'javascript'
+            });
+          } else {
+            (_m = editor.value) === null || _m === void 0 ? void 0 : _m.commands.setNode('paragraph');
+          }
+          break;
+        case 'heading':
+          if (!level) {
+            (_o = editor.value) === null || _o === void 0 ? void 0 : _o.commands.setParagraph();
+            activeHeadingLevel.value = 0;
+          } else {
+            activeHeadingLevel.value = level;
+            (_p = editor.value) === null || _p === void 0 ? void 0 : _p.commands.toggleHeading({
+              level: level
+            });
+          }
+          break;
+        case 'undo':
+        case 'redo':
+          item === 'undo' ? (_q = editor.value) === null || _q === void 0 ? void 0 : _q.commands.undo() : (_r = editor.value) === null || _r === void 0 ? void 0 : _r.commands.redo();
+          break;
+        case 'file':
+          context.emit('file-upload');
+          break;
+        default:
+          (_s = editor.value) === null || _s === void 0 ? void 0 : _s.chain().toggleMark(item).run();
+          break;
+      }
+    };
+    const attachLink = async () => {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+      // empty
+      if (link.value === '') {
+        (_a = editor.value) === null || _a === void 0 ? void 0 : _a.chain().focus().extendMarkRange('link').unsetLink().run();
+      }
+      const isEmptySelection = (_b = editor.value) === null || _b === void 0 ? void 0 : _b.state.selection.empty;
+      const cursorPosition = ((_c = editor.value) === null || _c === void 0 ? void 0 : _c.state.selection.$anchor.pos) || 0;
+      const isLink = (_e = (_d = editor.value) === null || _d === void 0 ? void 0 : _d.view.state.doc.nodeAt(cursorPosition)) === null || _e === void 0 ? void 0 : _e.marks.filter(mark => mark.type.name === 'link');
+      const existedText = (isLink === null || isLink === void 0 ? void 0 : isLink.length) ? (_g = (_f = editor.value) === null || _f === void 0 ? void 0 : _f.view.state.doc.nodeAt(cursorPosition)) === null || _g === void 0 ? void 0 : _g.text : '';
+      if (link.value && isEmptySelection && !existedText) {
+        (_h = editor.value) === null || _h === void 0 ? void 0 : _h.chain().focus().setMark('link', {
+          href: link.value,
+          target: '__blank'
+        }).command(({
+          tr
+        }) => {
+          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) {
+        (_j = editor.value) === null || _j === void 0 ? void 0 : _j.chain().extendMarkRange('link').updateAttributes('link', {
+          href: link.value
+        }).run();
+      }
+      if (link.value && !isEmptySelection) {
+        (_k = editor.value) === null || _k === void 0 ? void 0 : _k.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 => {
+        var _a;
+        if (item === 'source') {
+          isActive.value[item] = disableMarkdown.value;
+        } else {
+          isActive.value[item] = ((_a = editor.value) === null || _a === void 0 ? void 0 : _a.isActive(item)) || false;
+        }
+      });
+    };
+    // Effects
+    watch([editor, model, () => props.disabled], ([editor, model, disabled]) => {
+      if (model !== (editor === null || editor === void 0 ? void 0 : editor.getHTML()) && props.format !== 'markdown') {
+        editor === null || editor === void 0 ? void 0 : editor.commands.setContent(model);
+      }
+      if (model !== markdownOutput.value && props.format === 'markdown') {
+        editor === null || editor === void 0 ? void 0 : editor.commands.setContent(deserialize(editor === null || editor === void 0 ? void 0 : editor.schema, model));
+      }
+      editor === null || editor === void 0 ? void 0 : editor.setEditable(!disabled);
+    });
+    // Styles
+    const rootStyles = computed(() => ['or-rich-text-editor-v3', ...RichTextEditor]);
+    const toolbarStyles = computed(() => [...RichTextEditorToolbar]);
+    const toolbarGroupStyles = computed(() => [...RichTextEditorToolbarGroup]);
+    const controlStyles = computed(() => ['tiptap-editor-v3', ...RichTextEditorControl]);
+    return {
+      root,
+      rootStyles,
+      toolbarRef,
+      toolbarStyles,
+      toolbarGroupStyles,
+      controlRef,
+      controlStyles,
+      editor,
+      containerRef,
+      toolbarButtonRef,
+      moreButtonRef,
+      textareaRef,
+      moreRef,
+      menuRef,
+      handleToolbarClick,
+      handleEditorClick,
+      isActive,
+      getRichTextEditorIcon,
+      getRichTextEditorTooltipIcon,
+      getIndexOfHeading,
+      headingLevels,
+      headingIcon,
+      attachLink,
+      discardLink,
+      isOpenLinkModal,
+      text,
+      link,
+      isFocused,
+      isVisible,
+      countOfNotVisibleTools,
+      notVisibleTools,
+      handleInput,
+      model,
+      disableMarkdown,
+      sourceValue,
+      activeHeadingLevel
+    };
+  }
+});
+
+const _hoisted_1 = ["disabled"];
+const _hoisted_2 = ["disabled"];
+const _hoisted_3 = {
+  class: /*#__PURE__*/normalizeClass(['p-sm', 'overflow-auto', 'min-h-[88px]', 'h-full'])
+};
+const _hoisted_4 = ["activated"];
+const _hoisted_5 = {
+  class: "flex p-sm gap-md"
+};
+const _hoisted_6 = {
+  class: /*#__PURE__*/normalizeClass(['layout-column', 'gap-md'])
+};
+const _hoisted_7 = {
+  class: /*#__PURE__*/normalizeClass(['layout-row-reverse', 'gap-md'])
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_OrLabel = resolveComponent("OrLabel");
+  const _component_OrIconButton = resolveComponent("OrIconButton");
+  const _component_OrInputBox = resolveComponent("OrInputBox");
+  const _component_OrHint = resolveComponent("OrHint");
+  const _component_OrError = resolveComponent("OrError");
+  const _component_OrPopover = resolveComponent("OrPopover");
+  const _component_OrMenuItem = resolveComponent("OrMenuItem");
+  const _component_OrMenu = resolveComponent("OrMenu");
+  const _component_OrInput = resolveComponent("OrInput");
+  const _component_OrButton = resolveComponent("OrButton");
+  const _component_OrModal = resolveComponent("OrModal");
+  return openBlock(), createElementBlock("div", {
+    ref: 'root',
+    class: normalizeClass(_ctx.rootStyles)
+  }, [_ctx.$slots.label || _ctx.$slots.addon || _ctx.label ? (openBlock(), createBlock(_component_OrLabel, {
+    key: 0,
+    variant: 'input',
+    required: _ctx.required,
+    disabled: _ctx.disabled
+  }, {
+    addon: withCtx(() => [renderSlot(_ctx.$slots, "addon")]),
+    default: withCtx(() => [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(_ctx.label), 1 /* TEXT */)])]),
+    _: 3 /* FORWARDED */
+  }, 8 /* PROPS */, ["required", "disabled"])) : createCommentVNode("v-if", true), createVNode(_component_OrInputBox, {
+    ref: 'containerRef',
+    class: "grow",
+    direction: 'column',
+    invalid: !!_ctx.error,
+    disabled: _ctx.disabled,
+    onClick: _cache[4] || (_cache[4] = $event => _ctx.handleEditorClick())
+  }, {
+    default: withCtx(() => [createElementVNode("div", {
+      ref: 'toolbarRef',
+      class: normalizeClass(_ctx.toolbarStyles),
+      disabled: _ctx.disabled || !_ctx.isFocused
+    }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.toolbar, (tools, index) => {
+      return openBlock(), createElementBlock("div", {
+        key: index,
+        class: normalizeClass([..._ctx.toolbarGroupStyles, {
+          'hidden': _ctx.isVisible(tools)
+        }]),
+        disabled: _ctx.disabled || !_ctx.isFocused
+      }, [(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_OrIconButton, {
+          key: 0,
+          ref_for: true,
+          ref: 'toolbarButtonRef',
+          icon: {
+            icon: _ctx.headingIcon,
+            variant: 'inherit'
+          },
+          tooltip: {
+            content: item,
+            placement: 'top'
+          },
+          selected: _ctx.isActive[item],
+          disabled: _ctx.disabled || !_ctx.isFocused,
+          onClick: _cache[0] || (_cache[0] = $event => _ctx.menuRef && _ctx.menuRef.toggle())
+        }, null, 8 /* PROPS */, ["icon", "tooltip", "selected", "disabled"])) : _ctx.isVisible(item) ? (openBlock(), createBlock(_component_OrIconButton, {
+          key: 1,
+          icon: {
+            icon: _ctx.getRichTextEditorIcon(item),
+            variant: 'inherit'
+          },
+          tooltip: {
+            content: _ctx.getRichTextEditorTooltipIcon(item),
+            placement: 'top'
+          },
+          selected: _ctx.isActive[item],
+          disabled: _ctx.disabled || !_ctx.isFocused,
+          onClick: $event => _ctx.handleToolbarClick(item)
+        }, null, 8 /* PROPS */, ["icon", "tooltip", "selected", "disabled", "onClick"])) : createCommentVNode("v-if", true)], 2 /* CLASS */);
+      }), 128 /* KEYED_FRAGMENT */))], 10 /* CLASS, PROPS */, _hoisted_2);
+    }), 128 /* KEYED_FRAGMENT */)), _ctx.countOfNotVisibleTools > 0 ? (openBlock(), createBlock(_component_OrIconButton, {
+      key: 0,
+      ref: 'moreButtonRef',
+      class: normalizeClass(['px-sm']),
+      icon: {
+        icon: 'more_horiz',
+        variant: 'inherit'
+      },
+      disabled: _ctx.disabled || !_ctx.isFocused,
+      onClick: _cache[1] || (_cache[1] = $event => _ctx.moreRef && _ctx.moreRef.open())
+    }, null, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true)], 10 /* CLASS, PROPS */, _hoisted_1), createElementVNode("div", _hoisted_3, [withDirectives(createElementVNode("textarea", {
+      ref: 'textareaRef',
+      "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => _ctx.sourceValue = $event),
+      activated: _ctx.disableMarkdown,
+      class: "block w-full h-full resize-none border-none outline-none bg-transparent typography-body-2-regular",
+      onInput: _cache[3] || (_cache[3] = (...args) => _ctx.handleInput && _ctx.handleInput(...args))
+    }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_4), [[vShow, _ctx.disableMarkdown], [vModelText, _ctx.sourceValue]]), withDirectives(createElementVNode("div", {
+      ref: 'controlRef',
+      class: normalizeClass(_ctx.controlStyles)
+    }, null, 2 /* CLASS */), [[vShow, !_ctx.disableMarkdown]]), renderSlot(_ctx.$slots, "files")])]),
+    _: 3 /* FORWARDED */
+  }, 8 /* PROPS */, ["invalid", "disabled"]), _ctx.$slots.hint || _ctx.hint ? withDirectives((openBlock(), createBlock(_component_OrHint, {
+    key: 1,
+    disabled: _ctx.disabled
+  }, {
+    default: withCtx(() => [renderSlot(_ctx.$slots, "hint", {}, () => [createTextVNode(toDisplayString(_ctx.hint), 1 /* TEXT */)])]),
+    _: 3 /* FORWARDED */
+  }, 8 /* PROPS */, ["disabled"])), [[vShow, !_ctx.error]]) : createCommentVNode("v-if", true), withDirectives(createVNode(_component_OrError, {
+    disabled: _ctx.disabled
+  }, {
+    default: withCtx(() => [createTextVNode(toDisplayString(_ctx.error), 1 /* TEXT */)]),
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["disabled"]), [[vShow, typeof _ctx.error === 'string' && _ctx.error.length > 0]]), _ctx.moreButtonRef ? (openBlock(), createBlock(_component_OrPopover, {
+    key: 2,
+    ref: 'moreRef',
+    trigger: _ctx.moreButtonRef && _ctx.moreButtonRef.root,
+    placement: 'top-end'
+  }, {
+    default: withCtx(() => [createElementVNode("div", _hoisted_5, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.notVisibleTools, item => {
+      return openBlock(), createBlock(_component_OrIconButton, {
+        key: item,
+        icon: {
+          icon: _ctx.getRichTextEditorIcon(item),
+          variant: 'inherit'
+        },
+        tooltip: {
+          content: _ctx.getRichTextEditorTooltipIcon(item),
+          placement: 'top'
+        },
+        selected: _ctx.isActive[item],
+        onClick: $event => _ctx.handleToolbarClick(item)
+      }, null, 8 /* PROPS */, ["icon", "tooltip", "selected", "onClick"]);
+    }), 128 /* KEYED_FRAGMENT */))])]),
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["trigger"])) : createCommentVNode("v-if", true), _ctx.toolbarButtonRef ? (openBlock(), createBlock(_component_OrMenu, {
+    key: 3,
+    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_OrMenuItem, {
+        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_OrMenuItem, {
+      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_OrModal, {
+    "is-open": _ctx.isOpenLinkModal,
+    size: 's'
+  }, {
+    header: withCtx(() => [createTextVNode(" Add Link ")]),
+    footer: withCtx(() => [createElementVNode("div", _hoisted_7, [createVNode(_component_OrButton, {
+      variant: 'contained',
+      onClick: _cache[8] || (_cache[8] = $event => _ctx.attachLink())
+    }, {
+      default: withCtx(() => [createTextVNode(" Save ")]),
+      _: 1 /* STABLE */
+    }), createVNode(_component_OrButton, {
+      variant: 'outlined',
+      onClick: _cache[9] || (_cache[9] = $event => _ctx.discardLink())
+    }, {
+      default: withCtx(() => [createTextVNode(" Cancel ")]),
+      _: 1 /* STABLE */
+    })])]),
+    default: withCtx(() => [createElementVNode("div", _hoisted_6, [createVNode(_component_OrInput, {
+      modelValue: _ctx.text,
+      "onUpdate:modelValue": _cache[6] || (_cache[6] = $event => _ctx.text = $event),
+      label: 'Text',
+      placeholder: 'Enter text'
+    }, null, 8 /* PROPS */, ["modelValue"]), createVNode(_component_OrInput, {
+      modelValue: _ctx.link,
+      "onUpdate:modelValue": _cache[7] || (_cache[7] = $event => _ctx.link = $event),
+      label: 'Link',
+      placeholder: 'Enter link'
+    }, null, 8 /* PROPS */, ["modelValue"])])]),
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["is-open"])], 2 /* CLASS */);
+}
+
+var css_248z = ".tiptap-editor-v3 .is-editor-empty::before {\n  float: left;\n  height: 0;\n  pointer-events: none;\n  content: attr(data-placeholder);\n}";
+styleInject(css_248z);
+
+script.render = render;
+script.__file = "src/components/or-rich-text-editor-v3/OrRichTextEditor.vue";
+
+export { Formats, script as OrRichTextEditorV3, RichTextEditorIcons, RichTextEditorTooltips };