@onereach/ui-components 17.2.0-beta.4879.0 → 17.2.0-beta.4881.0

package/dist/bundled/v2/components/OrRichTextEditorV3/OrRichTextEditor.js

@@ -0,0 +1,2150 @@
+import { N as Node, m as mergeAttributes, t as textblockTypeInputRule, E as Extension, D as Decoration, a as DecorationSet, M as Mark, b as markInputRule, c as markPasteRule, k as keydownHandler, d as callOrReturn, g as getExtensionField, e as Editor } from '../../index-259f2329.js';
+import { B as Blockquote, a as Bold, b as BulletList, C as CodeBlock, H as HardBreak, c as HorizontalRule, I as Italic, L as ListItem, O as OrderedList, P as Paragraph, S as Strike, s as serialize, d as deserialize, U as Underline, e as Link, f as Highlight } from '../../markdown-fafa12f5.js';
+import { P as Plugin, a as PluginKey, d as dropPoint, S as Selection, N as NodeSelection, F as Fragment, b as Slice, T as TextSelection, M as Mapping } from '../../index-2191063d.js';
+import { k as useResizeObserver, o as onClickOutside } from '../../index-82dee23f.js';
+import { u as useFocusTrap } from '../../useFocusTrap-7dd1e33d.js';
+import { defineComponent, shallowRef, ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from 'vue-demi';
+import { Formats } from './props.js';
+import { RichTextEditor, RichTextEditorToolbar, RichTextEditorToolbarGroup, RichTextEditorControl } from './styles.js';
+import codemirrorNode from './utils/codemirror/codemirrorNode.js';
+import __vue_component__$1 from '../OrButtonV3/OrButton.js';
+import __vue_component__$2 from '../OrErrorV3/OrError.js';
+import __vue_component__$3 from '../OrHintV3/OrHint.js';
+import __vue_component__$4 from '../OrIconButtonV3/OrIconButton.js';
+import { _ as __vue_component__$5 } from '../../OrInput-b9e32a13.js';
+import __vue_component__$6 from '../OrInputBoxV3/OrInputBox.js';
+import __vue_component__$7 from '../OrLabelV3/OrLabel.js';
+import __vue_component__$8 from '../OrMenuV3/OrMenu.js';
+import __vue_component__$9 from '../OrMenuItemV3/OrMenuItem.js';
+import __vue_component__$a from '../OrModalV3/OrModal.js';
+import __vue_component__$b from '../OrPopoverV3/OrPopover.js';
+import { b as useDebounceFn } from '../../index-045a642c.js';
+import { isArray } from '../../utils/isArray.js';
+import { s as styleInject } from '../../style-inject.es-4c6f2515.js';
+import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
+
+const Heading = Node.create({
+  name: 'heading',
+  addOptions() {
+    return {
+      levels: [1, 2, 3, 4, 5, 6],
+      HTMLAttributes: {}
+    };
+  },
+  content: 'inline*',
+  group: 'block',
+  defining: true,
+  addAttributes() {
+    return {
+      level: {
+        default: 1,
+        rendered: false
+      }
+    };
+  },
+  parseHTML() {
+    return this.options.levels.map(level => ({
+      tag: `h${level}`,
+      attrs: {
+        level
+      }
+    }));
+  },
+  renderHTML({
+    node,
+    HTMLAttributes
+  }) {
+    const hasLevel = this.options.levels.includes(node.attrs.level);
+    const level = hasLevel ? node.attrs.level : this.options.levels[0];
+    return [`h${level}`, mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+  },
+  addCommands() {
+    return {
+      setHeading: attributes => ({
+        commands
+      }) => {
+        if (!this.options.levels.includes(attributes.level)) {
+          return false;
+        }
+        return commands.setNode(this.name, attributes);
+      },
+      toggleHeading: attributes => ({
+        commands
+      }) => {
+        if (!this.options.levels.includes(attributes.level)) {
+          return false;
+        }
+        return commands.toggleNode(this.name, 'paragraph', attributes);
+      }
+    };
+  },
+  addKeyboardShortcuts() {
+    return this.options.levels.reduce((items, level) => ({
+      ...items,
+      ...{
+        [`Mod-Alt-${level}`]: () => this.editor.commands.toggleHeading({
+          level
+        })
+      }
+    }), {});
+  },
+  addInputRules() {
+    return this.options.levels.map(level => {
+      return textblockTypeInputRule({
+        find: new RegExp(`^(#{1,${level}})\\s$`),
+        type: this.type,
+        getAttributes: {
+          level
+        }
+      });
+    });
+  }
+});
+
+const Placeholder = Extension.create({
+  name: 'placeholder',
+  addOptions() {
+    return {
+      emptyEditorClass: 'is-editor-empty',
+      emptyNodeClass: 'is-empty',
+      placeholder: 'Write something …',
+      showOnlyWhenEditable: true,
+      showOnlyCurrent: true,
+      includeChildren: false
+    };
+  },
+  addProseMirrorPlugins() {
+    return [new Plugin({
+      key: new PluginKey('placeholder'),
+      props: {
+        decorations: ({
+          doc,
+          selection
+        }) => {
+          const active = this.editor.isEditable || !this.options.showOnlyWhenEditable;
+          const {
+            anchor
+          } = selection;
+          const decorations = [];
+          if (!active) {
+            return null;
+          }
+          // only calculate isEmpty once due to its performance impacts (see issue #3360)
+          const emptyDocInstance = doc.type.createAndFill();
+          const isEditorEmpty = (emptyDocInstance === null || emptyDocInstance === void 0 ? void 0 : emptyDocInstance.sameMarkup(doc)) && emptyDocInstance.content.findDiffStart(doc.content) === null;
+          doc.descendants((node, pos) => {
+            const hasAnchor = anchor >= pos && anchor <= pos + node.nodeSize;
+            const isEmpty = !node.isLeaf && !node.childCount;
+            if ((hasAnchor || !this.options.showOnlyCurrent) && isEmpty) {
+              const classes = [this.options.emptyNodeClass];
+              if (isEditorEmpty) {
+                classes.push(this.options.emptyEditorClass);
+              }
+              const decoration = Decoration.node(pos, pos + node.nodeSize, {
+                class: classes.join(' '),
+                'data-placeholder': typeof this.options.placeholder === 'function' ? this.options.placeholder({
+                  editor: this.editor,
+                  node,
+                  pos,
+                  hasAnchor
+                }) : this.options.placeholder
+              });
+              decorations.push(decoration);
+            }
+            return this.options.includeChildren;
+          });
+          return DecorationSet.create(doc, decorations);
+        }
+      }
+    })];
+  }
+});
+
+const inputRegex = /(?:^|\s)((?:`)((?:[^`]+))(?:`))$/;
+const pasteRegex = /(?:^|\s)((?:`)((?:[^`]+))(?:`))/g;
+const Code = Mark.create({
+  name: 'code',
+  addOptions() {
+    return {
+      HTMLAttributes: {}
+    };
+  },
+  excludes: '_',
+  code: true,
+  exitable: true,
+  parseHTML() {
+    return [{
+      tag: 'code'
+    }];
+  },
+  renderHTML({
+    HTMLAttributes
+  }) {
+    return ['code', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+  },
+  addCommands() {
+    return {
+      setCode: () => ({
+        commands
+      }) => {
+        return commands.setMark(this.name);
+      },
+      toggleCode: () => ({
+        commands
+      }) => {
+        return commands.toggleMark(this.name);
+      },
+      unsetCode: () => ({
+        commands
+      }) => {
+        return commands.unsetMark(this.name);
+      }
+    };
+  },
+  addKeyboardShortcuts() {
+    return {
+      'Mod-e': () => this.editor.commands.toggleCode()
+    };
+  },
+  addInputRules() {
+    return [markInputRule({
+      find: inputRegex,
+      type: this.type
+    })];
+  },
+  addPasteRules() {
+    return [markPasteRule({
+      find: pasteRegex,
+      type: this.type
+    })];
+  }
+});
+
+const Document = Node.create({
+  name: 'doc',
+  topNode: true,
+  content: 'block+'
+});
+
+/**
+Create a plugin that, when added to a ProseMirror instance,
+causes a decoration to show up at the drop position when something
+is dragged over the editor.
+
+Nodes may add a `disableDropCursor` property to their spec to
+control the showing of a drop cursor inside them. This may be a
+boolean or a function, which will be called with a view and a
+position, and should return a boolean.
+*/
+function dropCursor(options = {}) {
+  return new Plugin({
+    view(editorView) {
+      return new DropCursorView(editorView, options);
+    }
+  });
+}
+class DropCursorView {
+  constructor(editorView, options) {
+    var _a;
+    this.editorView = editorView;
+    this.cursorPos = null;
+    this.element = null;
+    this.timeout = -1;
+    this.width = (_a = options.width) !== null && _a !== void 0 ? _a : 1;
+    this.color = options.color === false ? undefined : options.color || "black";
+    this.class = options.class;
+    this.handlers = ["dragover", "dragend", "drop", "dragleave"].map(name => {
+      let handler = e => {
+        this[name](e);
+      };
+      editorView.dom.addEventListener(name, handler);
+      return {
+        name,
+        handler
+      };
+    });
+  }
+  destroy() {
+    this.handlers.forEach(({
+      name,
+      handler
+    }) => this.editorView.dom.removeEventListener(name, handler));
+  }
+  update(editorView, prevState) {
+    if (this.cursorPos != null && prevState.doc != editorView.state.doc) {
+      if (this.cursorPos > editorView.state.doc.content.size) this.setCursor(null);else this.updateOverlay();
+    }
+  }
+  setCursor(pos) {
+    if (pos == this.cursorPos) return;
+    this.cursorPos = pos;
+    if (pos == null) {
+      this.element.parentNode.removeChild(this.element);
+      this.element = null;
+    } else {
+      this.updateOverlay();
+    }
+  }
+  updateOverlay() {
+    let $pos = this.editorView.state.doc.resolve(this.cursorPos);
+    let isBlock = !$pos.parent.inlineContent,
+      rect;
+    if (isBlock) {
+      let before = $pos.nodeBefore,
+        after = $pos.nodeAfter;
+      if (before || after) {
+        let node = this.editorView.nodeDOM(this.cursorPos - (before ? before.nodeSize : 0));
+        if (node) {
+          let nodeRect = node.getBoundingClientRect();
+          let top = before ? nodeRect.bottom : nodeRect.top;
+          if (before && after) top = (top + this.editorView.nodeDOM(this.cursorPos).getBoundingClientRect().top) / 2;
+          rect = {
+            left: nodeRect.left,
+            right: nodeRect.right,
+            top: top - this.width / 2,
+            bottom: top + this.width / 2
+          };
+        }
+      }
+    }
+    if (!rect) {
+      let coords = this.editorView.coordsAtPos(this.cursorPos);
+      rect = {
+        left: coords.left - this.width / 2,
+        right: coords.left + this.width / 2,
+        top: coords.top,
+        bottom: coords.bottom
+      };
+    }
+    let parent = this.editorView.dom.offsetParent;
+    if (!this.element) {
+      this.element = parent.appendChild(document.createElement("div"));
+      if (this.class) this.element.className = this.class;
+      this.element.style.cssText = "position: absolute; z-index: 50; pointer-events: none;";
+      if (this.color) {
+        this.element.style.backgroundColor = this.color;
+      }
+    }
+    this.element.classList.toggle("prosemirror-dropcursor-block", isBlock);
+    this.element.classList.toggle("prosemirror-dropcursor-inline", !isBlock);
+    let parentLeft, parentTop;
+    if (!parent || parent == document.body && getComputedStyle(parent).position == "static") {
+      parentLeft = -pageXOffset;
+      parentTop = -pageYOffset;
+    } else {
+      let rect = parent.getBoundingClientRect();
+      parentLeft = rect.left - parent.scrollLeft;
+      parentTop = rect.top - parent.scrollTop;
+    }
+    this.element.style.left = rect.left - parentLeft + "px";
+    this.element.style.top = rect.top - parentTop + "px";
+    this.element.style.width = rect.right - rect.left + "px";
+    this.element.style.height = rect.bottom - rect.top + "px";
+  }
+  scheduleRemoval(timeout) {
+    clearTimeout(this.timeout);
+    this.timeout = setTimeout(() => this.setCursor(null), timeout);
+  }
+  dragover(event) {
+    if (!this.editorView.editable) return;
+    let pos = this.editorView.posAtCoords({
+      left: event.clientX,
+      top: event.clientY
+    });
+    let node = pos && pos.inside >= 0 && this.editorView.state.doc.nodeAt(pos.inside);
+    let disableDropCursor = node && node.type.spec.disableDropCursor;
+    let disabled = typeof disableDropCursor == "function" ? disableDropCursor(this.editorView, pos, event) : disableDropCursor;
+    if (pos && !disabled) {
+      let target = pos.pos;
+      if (this.editorView.dragging && this.editorView.dragging.slice) {
+        let point = dropPoint(this.editorView.state.doc, target, this.editorView.dragging.slice);
+        if (point != null) target = point;
+      }
+      this.setCursor(target);
+      this.scheduleRemoval(5000);
+    }
+  }
+  dragend() {
+    this.scheduleRemoval(20);
+  }
+  drop() {
+    this.scheduleRemoval(20);
+  }
+  dragleave(event) {
+    if (event.target == this.editorView.dom || !this.editorView.dom.contains(event.relatedTarget)) this.setCursor(null);
+  }
+}
+
+const Dropcursor = Extension.create({
+  name: 'dropCursor',
+  addOptions() {
+    return {
+      color: 'currentColor',
+      width: 1,
+      class: undefined
+    };
+  },
+  addProseMirrorPlugins() {
+    return [dropCursor(this.options)];
+  }
+});
+
+/**
+Gap cursor selections are represented using this class. Its
+`$anchor` and `$head` properties both point at the cursor position.
+*/
+class GapCursor extends Selection {
+  /**
+  Create a gap cursor.
+  */
+  constructor($pos) {
+    super($pos, $pos);
+  }
+  map(doc, mapping) {
+    let $pos = doc.resolve(mapping.map(this.head));
+    return GapCursor.valid($pos) ? new GapCursor($pos) : Selection.near($pos);
+  }
+  content() {
+    return Slice.empty;
+  }
+  eq(other) {
+    return other instanceof GapCursor && other.head == this.head;
+  }
+  toJSON() {
+    return {
+      type: "gapcursor",
+      pos: this.head
+    };
+  }
+  /**
+  @internal
+  */
+  static fromJSON(doc, json) {
+    if (typeof json.pos != "number") throw new RangeError("Invalid input for GapCursor.fromJSON");
+    return new GapCursor(doc.resolve(json.pos));
+  }
+  /**
+  @internal
+  */
+  getBookmark() {
+    return new GapBookmark(this.anchor);
+  }
+  /**
+  @internal
+  */
+  static valid($pos) {
+    let parent = $pos.parent;
+    if (parent.isTextblock || !closedBefore($pos) || !closedAfter($pos)) return false;
+    let override = parent.type.spec.allowGapCursor;
+    if (override != null) return override;
+    let deflt = parent.contentMatchAt($pos.index()).defaultType;
+    return deflt && deflt.isTextblock;
+  }
+  /**
+  @internal
+  */
+  static findGapCursorFrom($pos, dir, mustMove = false) {
+    search: for (;;) {
+      if (!mustMove && GapCursor.valid($pos)) return $pos;
+      let pos = $pos.pos,
+        next = null;
+      // Scan up from this position
+      for (let d = $pos.depth;; d--) {
+        let parent = $pos.node(d);
+        if (dir > 0 ? $pos.indexAfter(d) < parent.childCount : $pos.index(d) > 0) {
+          next = parent.child(dir > 0 ? $pos.indexAfter(d) : $pos.index(d) - 1);
+          break;
+        } else if (d == 0) {
+          return null;
+        }
+        pos += dir;
+        let $cur = $pos.doc.resolve(pos);
+        if (GapCursor.valid($cur)) return $cur;
+      }
+      // And then down into the next node
+      for (;;) {
+        let inside = dir > 0 ? next.firstChild : next.lastChild;
+        if (!inside) {
+          if (next.isAtom && !next.isText && !NodeSelection.isSelectable(next)) {
+            $pos = $pos.doc.resolve(pos + next.nodeSize * dir);
+            mustMove = false;
+            continue search;
+          }
+          break;
+        }
+        next = inside;
+        pos += dir;
+        let $cur = $pos.doc.resolve(pos);
+        if (GapCursor.valid($cur)) return $cur;
+      }
+      return null;
+    }
+  }
+}
+GapCursor.prototype.visible = false;
+GapCursor.findFrom = GapCursor.findGapCursorFrom;
+Selection.jsonID("gapcursor", GapCursor);
+class GapBookmark {
+  constructor(pos) {
+    this.pos = pos;
+  }
+  map(mapping) {
+    return new GapBookmark(mapping.map(this.pos));
+  }
+  resolve(doc) {
+    let $pos = doc.resolve(this.pos);
+    return GapCursor.valid($pos) ? new GapCursor($pos) : Selection.near($pos);
+  }
+}
+function closedBefore($pos) {
+  for (let d = $pos.depth; d >= 0; d--) {
+    let index = $pos.index(d),
+      parent = $pos.node(d);
+    // At the start of this parent, look at next one
+    if (index == 0) {
+      if (parent.type.spec.isolating) return true;
+      continue;
+    }
+    // See if the node before (or its first ancestor) is closed
+    for (let before = parent.child(index - 1);; before = before.lastChild) {
+      if (before.childCount == 0 && !before.inlineContent || before.isAtom || before.type.spec.isolating) return true;
+      if (before.inlineContent) return false;
+    }
+  }
+  // Hit start of document
+  return true;
+}
+function closedAfter($pos) {
+  for (let d = $pos.depth; d >= 0; d--) {
+    let index = $pos.indexAfter(d),
+      parent = $pos.node(d);
+    if (index == parent.childCount) {
+      if (parent.type.spec.isolating) return true;
+      continue;
+    }
+    for (let after = parent.child(index);; after = after.firstChild) {
+      if (after.childCount == 0 && !after.inlineContent || after.isAtom || after.type.spec.isolating) return true;
+      if (after.inlineContent) return false;
+    }
+  }
+  return true;
+}
+
+/**
+Create a gap cursor plugin. When enabled, this will capture clicks
+near and arrow-key-motion past places that don't have a normally
+selectable position nearby, and create a gap cursor selection for
+them. The cursor is drawn as an element with class
+`ProseMirror-gapcursor`. You can either include
+`style/gapcursor.css` from the package's directory or add your own
+styles to make it visible.
+*/
+function gapCursor() {
+  return new Plugin({
+    props: {
+      decorations: drawGapCursor,
+      createSelectionBetween(_view, $anchor, $head) {
+        return $anchor.pos == $head.pos && GapCursor.valid($head) ? new GapCursor($head) : null;
+      },
+      handleClick,
+      handleKeyDown,
+      handleDOMEvents: {
+        beforeinput: beforeinput
+      }
+    }
+  });
+}
+const handleKeyDown = keydownHandler({
+  "ArrowLeft": arrow("horiz", -1),
+  "ArrowRight": arrow("horiz", 1),
+  "ArrowUp": arrow("vert", -1),
+  "ArrowDown": arrow("vert", 1)
+});
+function arrow(axis, dir) {
+  const dirStr = axis == "vert" ? dir > 0 ? "down" : "up" : dir > 0 ? "right" : "left";
+  return function (state, dispatch, view) {
+    let sel = state.selection;
+    let $start = dir > 0 ? sel.$to : sel.$from,
+      mustMove = sel.empty;
+    if (sel instanceof TextSelection) {
+      if (!view.endOfTextblock(dirStr) || $start.depth == 0) return false;
+      mustMove = false;
+      $start = state.doc.resolve(dir > 0 ? $start.after() : $start.before());
+    }
+    let $found = GapCursor.findGapCursorFrom($start, dir, mustMove);
+    if (!$found) return false;
+    if (dispatch) dispatch(state.tr.setSelection(new GapCursor($found)));
+    return true;
+  };
+}
+function handleClick(view, pos, event) {
+  if (!view || !view.editable) return false;
+  let $pos = view.state.doc.resolve(pos);
+  if (!GapCursor.valid($pos)) return false;
+  let clickPos = view.posAtCoords({
+    left: event.clientX,
+    top: event.clientY
+  });
+  if (clickPos && clickPos.inside > -1 && NodeSelection.isSelectable(view.state.doc.nodeAt(clickPos.inside))) return false;
+  view.dispatch(view.state.tr.setSelection(new GapCursor($pos)));
+  return true;
+}
+// This is a hack that, when a composition starts while a gap cursor
+// is active, quickly creates an inline context for the composition to
+// happen in, to avoid it being aborted by the DOM selection being
+// moved into a valid position.
+function beforeinput(view, event) {
+  if (event.inputType != "insertCompositionText" || !(view.state.selection instanceof GapCursor)) return false;
+  let {
+    $from
+  } = view.state.selection;
+  let insert = $from.parent.contentMatchAt($from.index()).findWrapping(view.state.schema.nodes.text);
+  if (!insert) return false;
+  let frag = Fragment.empty;
+  for (let i = insert.length - 1; i >= 0; i--) frag = Fragment.from(insert[i].createAndFill(null, frag));
+  let tr = view.state.tr.replace($from.pos, $from.pos, new Slice(frag, 0, 0));
+  tr.setSelection(TextSelection.near(tr.doc.resolve($from.pos + 1)));
+  view.dispatch(tr);
+  return false;
+}
+function drawGapCursor(state) {
+  if (!(state.selection instanceof GapCursor)) return null;
+  let node = document.createElement("div");
+  node.className = "ProseMirror-gapcursor";
+  return DecorationSet.create(state.doc, [Decoration.widget(state.selection.head, node, {
+    key: "gapcursor"
+  })]);
+}
+
+const Gapcursor = Extension.create({
+  name: 'gapCursor',
+  addProseMirrorPlugins() {
+    return [gapCursor()];
+  },
+  extendNodeSchema(extension) {
+    var _a;
+    const context = {
+      name: extension.name,
+      options: extension.options,
+      storage: extension.storage
+    };
+    return {
+      allowGapCursor: (_a = callOrReturn(getExtensionField(extension, 'allowGapCursor', context))) !== null && _a !== void 0 ? _a : null
+    };
+  }
+});
+
+var GOOD_LEAF_SIZE = 200;
+
+// :: class<T> A rope sequence is a persistent sequence data structure
+// that supports appending, prepending, and slicing without doing a
+// full copy. It is represented as a mostly-balanced tree.
+var RopeSequence = function RopeSequence() {};
+RopeSequence.prototype.append = function append(other) {
+  if (!other.length) {
+    return this;
+  }
+  other = RopeSequence.from(other);
+  return !this.length && other || other.length < GOOD_LEAF_SIZE && this.leafAppend(other) || this.length < GOOD_LEAF_SIZE && other.leafPrepend(this) || this.appendInner(other);
+};
+
+// :: (union<[T], RopeSequence<T>>) → RopeSequence<T>
+// Prepend an array or other rope to this one, returning a new rope.
+RopeSequence.prototype.prepend = function prepend(other) {
+  if (!other.length) {
+    return this;
+  }
+  return RopeSequence.from(other).append(this);
+};
+RopeSequence.prototype.appendInner = function appendInner(other) {
+  return new Append(this, other);
+};
+
+// :: (?number, ?number) → RopeSequence<T>
+// Create a rope repesenting a sub-sequence of this rope.
+RopeSequence.prototype.slice = function slice(from, to) {
+  if (from === void 0) from = 0;
+  if (to === void 0) to = this.length;
+  if (from >= to) {
+    return RopeSequence.empty;
+  }
+  return this.sliceInner(Math.max(0, from), Math.min(this.length, to));
+};
+
+// :: (number) → T
+// Retrieve the element at the given position from this rope.
+RopeSequence.prototype.get = function get(i) {
+  if (i < 0 || i >= this.length) {
+    return undefined;
+  }
+  return this.getInner(i);
+};
+
+// :: ((element: T, index: number) → ?bool, ?number, ?number)
+// Call the given function for each element between the given
+// indices. This tends to be more efficient than looping over the
+// indices and calling `get`, because it doesn't have to descend the
+// tree for every element.
+RopeSequence.prototype.forEach = function forEach(f, from, to) {
+  if (from === void 0) from = 0;
+  if (to === void 0) to = this.length;
+  if (from <= to) {
+    this.forEachInner(f, from, to, 0);
+  } else {
+    this.forEachInvertedInner(f, from, to, 0);
+  }
+};
+
+// :: ((element: T, index: number) → U, ?number, ?number) → [U]
+// Map the given functions over the elements of the rope, producing
+// a flat array.
+RopeSequence.prototype.map = function map(f, from, to) {
+  if (from === void 0) from = 0;
+  if (to === void 0) to = this.length;
+  var result = [];
+  this.forEach(function (elt, i) {
+    return result.push(f(elt, i));
+  }, from, to);
+  return result;
+};
+
+// :: (?union<[T], RopeSequence<T>>) → RopeSequence<T>
+// Create a rope representing the given array, or return the rope
+// itself if a rope was given.
+RopeSequence.from = function from(values) {
+  if (values instanceof RopeSequence) {
+    return values;
+  }
+  return values && values.length ? new Leaf(values) : RopeSequence.empty;
+};
+var Leaf = /*@__PURE__*/function (RopeSequence) {
+  function Leaf(values) {
+    RopeSequence.call(this);
+    this.values = values;
+  }
+  if (RopeSequence) Leaf.__proto__ = RopeSequence;
+  Leaf.prototype = Object.create(RopeSequence && RopeSequence.prototype);
+  Leaf.prototype.constructor = Leaf;
+  var prototypeAccessors = {
+    length: {
+      configurable: true
+    },
+    depth: {
+      configurable: true
+    }
+  };
+  Leaf.prototype.flatten = function flatten() {
+    return this.values;
+  };
+  Leaf.prototype.sliceInner = function sliceInner(from, to) {
+    if (from == 0 && to == this.length) {
+      return this;
+    }
+    return new Leaf(this.values.slice(from, to));
+  };
+  Leaf.prototype.getInner = function getInner(i) {
+    return this.values[i];
+  };
+  Leaf.prototype.forEachInner = function forEachInner(f, from, to, start) {
+    for (var i = from; i < to; i++) {
+      if (f(this.values[i], start + i) === false) {
+        return false;
+      }
+    }
+  };
+  Leaf.prototype.forEachInvertedInner = function forEachInvertedInner(f, from, to, start) {
+    for (var i = from - 1; i >= to; i--) {
+      if (f(this.values[i], start + i) === false) {
+        return false;
+      }
+    }
+  };
+  Leaf.prototype.leafAppend = function leafAppend(other) {
+    if (this.length + other.length <= GOOD_LEAF_SIZE) {
+      return new Leaf(this.values.concat(other.flatten()));
+    }
+  };
+  Leaf.prototype.leafPrepend = function leafPrepend(other) {
+    if (this.length + other.length <= GOOD_LEAF_SIZE) {
+      return new Leaf(other.flatten().concat(this.values));
+    }
+  };
+  prototypeAccessors.length.get = function () {
+    return this.values.length;
+  };
+  prototypeAccessors.depth.get = function () {
+    return 0;
+  };
+  Object.defineProperties(Leaf.prototype, prototypeAccessors);
+  return Leaf;
+}(RopeSequence);
+
+// :: RopeSequence
+// The empty rope sequence.
+RopeSequence.empty = new Leaf([]);
+var Append = /*@__PURE__*/function (RopeSequence) {
+  function Append(left, right) {
+    RopeSequence.call(this);
+    this.left = left;
+    this.right = right;
+    this.length = left.length + right.length;
+    this.depth = Math.max(left.depth, right.depth) + 1;
+  }
+  if (RopeSequence) Append.__proto__ = RopeSequence;
+  Append.prototype = Object.create(RopeSequence && RopeSequence.prototype);
+  Append.prototype.constructor = Append;
+  Append.prototype.flatten = function flatten() {
+    return this.left.flatten().concat(this.right.flatten());
+  };
+  Append.prototype.getInner = function getInner(i) {
+    return i < this.left.length ? this.left.get(i) : this.right.get(i - this.left.length);
+  };
+  Append.prototype.forEachInner = function forEachInner(f, from, to, start) {
+    var leftLen = this.left.length;
+    if (from < leftLen && this.left.forEachInner(f, from, Math.min(to, leftLen), start) === false) {
+      return false;
+    }
+    if (to > leftLen && this.right.forEachInner(f, Math.max(from - leftLen, 0), Math.min(this.length, to) - leftLen, start + leftLen) === false) {
+      return false;
+    }
+  };
+  Append.prototype.forEachInvertedInner = function forEachInvertedInner(f, from, to, start) {
+    var leftLen = this.left.length;
+    if (from > leftLen && this.right.forEachInvertedInner(f, from - leftLen, Math.max(to, leftLen) - leftLen, start + leftLen) === false) {
+      return false;
+    }
+    if (to < leftLen && this.left.forEachInvertedInner(f, Math.min(from, leftLen), to, start) === false) {
+      return false;
+    }
+  };
+  Append.prototype.sliceInner = function sliceInner(from, to) {
+    if (from == 0 && to == this.length) {
+      return this;
+    }
+    var leftLen = this.left.length;
+    if (to <= leftLen) {
+      return this.left.slice(from, to);
+    }
+    if (from >= leftLen) {
+      return this.right.slice(from - leftLen, to - leftLen);
+    }
+    return this.left.slice(from, leftLen).append(this.right.slice(0, to - leftLen));
+  };
+  Append.prototype.leafAppend = function leafAppend(other) {
+    var inner = this.right.leafAppend(other);
+    if (inner) {
+      return new Append(this.left, inner);
+    }
+  };
+  Append.prototype.leafPrepend = function leafPrepend(other) {
+    var inner = this.left.leafPrepend(other);
+    if (inner) {
+      return new Append(inner, this.right);
+    }
+  };
+  Append.prototype.appendInner = function appendInner(other) {
+    if (this.left.depth >= Math.max(this.right.depth, other.depth) + 1) {
+      return new Append(this.left, new Append(this.right, other));
+    }
+    return new Append(this, other);
+  };
+  return Append;
+}(RopeSequence);
+
+// ProseMirror's history isn't simply a way to roll back to a previous
+// state, because ProseMirror supports applying changes without adding
+// them to the history (for example during collaboration).
+//
+// To this end, each 'Branch' (one for the undo history and one for
+// the redo history) keeps an array of 'Items', which can optionally
+// hold a step (an actual undoable change), and always hold a position
+// map (which is needed to move changes below them to apply to the
+// current document).
+//
+// An item that has both a step and a selection bookmark is the start
+// of an 'event' — a group of changes that will be undone or redone at
+// once. (It stores only the bookmark, since that way we don't have to
+// provide a document until the selection is actually applied, which
+// is useful when compressing.)
+// Used to schedule history compression
+const max_empty_items = 500;
+class Branch {
+  constructor(items, eventCount) {
+    this.items = items;
+    this.eventCount = eventCount;
+  }
+  // Pop the latest event off the branch's history and apply it
+  // to a document transform.
+  popEvent(state, preserveItems) {
+    if (this.eventCount == 0) return null;
+    let end = this.items.length;
+    for (;; end--) {
+      let next = this.items.get(end - 1);
+      if (next.selection) {
+        --end;
+        break;
+      }
+    }
+    let remap, mapFrom;
+    if (preserveItems) {
+      remap = this.remapping(end, this.items.length);
+      mapFrom = remap.maps.length;
+    }
+    let transform = state.tr;
+    let selection, remaining;
+    let addAfter = [],
+      addBefore = [];
+    this.items.forEach((item, i) => {
+      if (!item.step) {
+        if (!remap) {
+          remap = this.remapping(end, i + 1);
+          mapFrom = remap.maps.length;
+        }
+        mapFrom--;
+        addBefore.push(item);
+        return;
+      }
+      if (remap) {
+        addBefore.push(new Item(item.map));
+        let step = item.step.map(remap.slice(mapFrom)),
+          map;
+        if (step && transform.maybeStep(step).doc) {
+          map = transform.mapping.maps[transform.mapping.maps.length - 1];
+          addAfter.push(new Item(map, undefined, undefined, addAfter.length + addBefore.length));
+        }
+        mapFrom--;
+        if (map) remap.appendMap(map, mapFrom);
+      } else {
+        transform.maybeStep(item.step);
+      }
+      if (item.selection) {
+        selection = remap ? item.selection.map(remap.slice(mapFrom)) : item.selection;
+        remaining = new Branch(this.items.slice(0, end).append(addBefore.reverse().concat(addAfter)), this.eventCount - 1);
+        return false;
+      }
+    }, this.items.length, 0);
+    return {
+      remaining: remaining,
+      transform,
+      selection: selection
+    };
+  }
+  // Create a new branch with the given transform added.
+  addTransform(transform, selection, histOptions, preserveItems) {
+    let newItems = [],
+      eventCount = this.eventCount;
+    let oldItems = this.items,
+      lastItem = !preserveItems && oldItems.length ? oldItems.get(oldItems.length - 1) : null;
+    for (let i = 0; i < transform.steps.length; i++) {
+      let step = transform.steps[i].invert(transform.docs[i]);
+      let item = new Item(transform.mapping.maps[i], step, selection),
+        merged;
+      if (merged = lastItem && lastItem.merge(item)) {
+        item = merged;
+        if (i) newItems.pop();else oldItems = oldItems.slice(0, oldItems.length - 1);
+      }
+      newItems.push(item);
+      if (selection) {
+        eventCount++;
+        selection = undefined;
+      }
+      if (!preserveItems) lastItem = item;
+    }
+    let overflow = eventCount - histOptions.depth;
+    if (overflow > DEPTH_OVERFLOW) {
+      oldItems = cutOffEvents(oldItems, overflow);
+      eventCount -= overflow;
+    }
+    return new Branch(oldItems.append(newItems), eventCount);
+  }
+  remapping(from, to) {
+    let maps = new Mapping();
+    this.items.forEach((item, i) => {
+      let mirrorPos = item.mirrorOffset != null && i - item.mirrorOffset >= from ? maps.maps.length - item.mirrorOffset : undefined;
+      maps.appendMap(item.map, mirrorPos);
+    }, from, to);
+    return maps;
+  }
+  addMaps(array) {
+    if (this.eventCount == 0) return this;
+    return new Branch(this.items.append(array.map(map => new Item(map))), this.eventCount);
+  }
+  // When the collab module receives remote changes, the history has
+  // to know about those, so that it can adjust the steps that were
+  // rebased on top of the remote changes, and include the position
+  // maps for the remote changes in its array of items.
+  rebased(rebasedTransform, rebasedCount) {
+    if (!this.eventCount) return this;
+    let rebasedItems = [],
+      start = Math.max(0, this.items.length - rebasedCount);
+    let mapping = rebasedTransform.mapping;
+    let newUntil = rebasedTransform.steps.length;
+    let eventCount = this.eventCount;
+    this.items.forEach(item => {
+      if (item.selection) eventCount--;
+    }, start);
+    let iRebased = rebasedCount;
+    this.items.forEach(item => {
+      let pos = mapping.getMirror(--iRebased);
+      if (pos == null) return;
+      newUntil = Math.min(newUntil, pos);
+      let map = mapping.maps[pos];
+      if (item.step) {
+        let step = rebasedTransform.steps[pos].invert(rebasedTransform.docs[pos]);
+        let selection = item.selection && item.selection.map(mapping.slice(iRebased + 1, pos));
+        if (selection) eventCount++;
+        rebasedItems.push(new Item(map, step, selection));
+      } else {
+        rebasedItems.push(new Item(map));
+      }
+    }, start);
+    let newMaps = [];
+    for (let i = rebasedCount; i < newUntil; i++) newMaps.push(new Item(mapping.maps[i]));
+    let items = this.items.slice(0, start).append(newMaps).append(rebasedItems);
+    let branch = new Branch(items, eventCount);
+    if (branch.emptyItemCount() > max_empty_items) branch = branch.compress(this.items.length - rebasedItems.length);
+    return branch;
+  }
+  emptyItemCount() {
+    let count = 0;
+    this.items.forEach(item => {
+      if (!item.step) count++;
+    });
+    return count;
+  }
+  // Compressing a branch means rewriting it to push the air (map-only
+  // items) out. During collaboration, these naturally accumulate
+  // because each remote change adds one. The `upto` argument is used
+  // to ensure that only the items below a given level are compressed,
+  // because `rebased` relies on a clean, untouched set of items in
+  // order to associate old items with rebased steps.
+  compress(upto = this.items.length) {
+    let remap = this.remapping(0, upto),
+      mapFrom = remap.maps.length;
+    let items = [],
+      events = 0;
+    this.items.forEach((item, i) => {
+      if (i >= upto) {
+        items.push(item);
+        if (item.selection) events++;
+      } else if (item.step) {
+        let step = item.step.map(remap.slice(mapFrom)),
+          map = step && step.getMap();
+        mapFrom--;
+        if (map) remap.appendMap(map, mapFrom);
+        if (step) {
+          let selection = item.selection && item.selection.map(remap.slice(mapFrom));
+          if (selection) events++;
+          let newItem = new Item(map.invert(), step, selection),
+            merged,
+            last = items.length - 1;
+          if (merged = items.length && items[last].merge(newItem)) items[last] = merged;else items.push(newItem);
+        }
+      } else if (item.map) {
+        mapFrom--;
+      }
+    }, this.items.length, 0);
+    return new Branch(RopeSequence.from(items.reverse()), events);
+  }
+}
+Branch.empty = new Branch(RopeSequence.empty, 0);
+function cutOffEvents(items, n) {
+  let cutPoint;
+  items.forEach((item, i) => {
+    if (item.selection && n-- == 0) {
+      cutPoint = i;
+      return false;
+    }
+  });
+  return items.slice(cutPoint);
+}
+class Item {
+  constructor(
+  // The (forward) step map for this item.
+  map,
+  // The inverted step
+  step,
+  // If this is non-null, this item is the start of a group, and
+  // this selection is the starting selection for the group (the one
+  // that was active before the first step was applied)
+  selection,
+  // If this item is the inverse of a previous mapping on the stack,
+  // this points at the inverse's offset
+  mirrorOffset) {
+    this.map = map;
+    this.step = step;
+    this.selection = selection;
+    this.mirrorOffset = mirrorOffset;
+  }
+  merge(other) {
+    if (this.step && other.step && !other.selection) {
+      let step = other.step.merge(this.step);
+      if (step) return new Item(step.getMap().invert(), step, this.selection);
+    }
+  }
+}
+// The value of the state field that tracks undo/redo history for that
+// state. Will be stored in the plugin state when the history plugin
+// is active.
+class HistoryState {
+  constructor(done, undone, prevRanges, prevTime, prevComposition) {
+    this.done = done;
+    this.undone = undone;
+    this.prevRanges = prevRanges;
+    this.prevTime = prevTime;
+    this.prevComposition = prevComposition;
+  }
+}
+const DEPTH_OVERFLOW = 20;
+// Record a transformation in undo history.
+function applyTransaction(history, state, tr, options) {
+  let historyTr = tr.getMeta(historyKey),
+    rebased;
+  if (historyTr) return historyTr.historyState;
+  if (tr.getMeta(closeHistoryKey)) history = new HistoryState(history.done, history.undone, null, 0, -1);
+  let appended = tr.getMeta("appendedTransaction");
+  if (tr.steps.length == 0) {
+    return history;
+  } else if (appended && appended.getMeta(historyKey)) {
+    if (appended.getMeta(historyKey).redo) return new HistoryState(history.done.addTransform(tr, undefined, options, mustPreserveItems(state)), history.undone, rangesFor(tr.mapping.maps[tr.steps.length - 1]), history.prevTime, history.prevComposition);else return new HistoryState(history.done, history.undone.addTransform(tr, undefined, options, mustPreserveItems(state)), null, history.prevTime, history.prevComposition);
+  } else if (tr.getMeta("addToHistory") !== false && !(appended && appended.getMeta("addToHistory") === false)) {
+    // Group transforms that occur in quick succession into one event.
+    let composition = tr.getMeta("composition");
+    let newGroup = history.prevTime == 0 || !appended && history.prevComposition != composition && (history.prevTime < (tr.time || 0) - options.newGroupDelay || !isAdjacentTo(tr, history.prevRanges));
+    let prevRanges = appended ? mapRanges(history.prevRanges, tr.mapping) : rangesFor(tr.mapping.maps[tr.steps.length - 1]);
+    return new HistoryState(history.done.addTransform(tr, newGroup ? state.selection.getBookmark() : undefined, options, mustPreserveItems(state)), Branch.empty, prevRanges, tr.time, composition == null ? history.prevComposition : composition);
+  } else if (rebased = tr.getMeta("rebased")) {
+    // Used by the collab module to tell the history that some of its
+    // content has been rebased.
+    return new HistoryState(history.done.rebased(tr, rebased), history.undone.rebased(tr, rebased), mapRanges(history.prevRanges, tr.mapping), history.prevTime, history.prevComposition);
+  } else {
+    return new HistoryState(history.done.addMaps(tr.mapping.maps), history.undone.addMaps(tr.mapping.maps), mapRanges(history.prevRanges, tr.mapping), history.prevTime, history.prevComposition);
+  }
+}
+function isAdjacentTo(transform, prevRanges) {
+  if (!prevRanges) return false;
+  if (!transform.docChanged) return true;
+  let adjacent = false;
+  transform.mapping.maps[0].forEach((start, end) => {
+    for (let i = 0; i < prevRanges.length; i += 2) if (start <= prevRanges[i + 1] && end >= prevRanges[i]) adjacent = true;
+  });
+  return adjacent;
+}
+function rangesFor(map) {
+  let result = [];
+  map.forEach((_from, _to, from, to) => result.push(from, to));
+  return result;
+}
+function mapRanges(ranges, mapping) {
+  if (!ranges) return null;
+  let result = [];
+  for (let i = 0; i < ranges.length; i += 2) {
+    let from = mapping.map(ranges[i], 1),
+      to = mapping.map(ranges[i + 1], -1);
+    if (from <= to) result.push(from, to);
+  }
+  return result;
+}
+// Apply the latest event from one branch to the document and shift the event
+// onto the other branch.
+function histTransaction(history, state, dispatch, redo) {
+  let preserveItems = mustPreserveItems(state);
+  let histOptions = historyKey.get(state).spec.config;
+  let pop = (redo ? history.undone : history.done).popEvent(state, preserveItems);
+  if (!pop) return;
+  let selection = pop.selection.resolve(pop.transform.doc);
+  let added = (redo ? history.done : history.undone).addTransform(pop.transform, state.selection.getBookmark(), histOptions, preserveItems);
+  let newHist = new HistoryState(redo ? added : pop.remaining, redo ? pop.remaining : added, null, 0, -1);
+  dispatch(pop.transform.setSelection(selection).setMeta(historyKey, {
+    redo,
+    historyState: newHist
+  }).scrollIntoView());
+}
+let cachedPreserveItems = false,
+  cachedPreserveItemsPlugins = null;
+// Check whether any plugin in the given state has a
+// `historyPreserveItems` property in its spec, in which case we must
+// preserve steps exactly as they came in, so that they can be
+// rebased.
+function mustPreserveItems(state) {
+  let plugins = state.plugins;
+  if (cachedPreserveItemsPlugins != plugins) {
+    cachedPreserveItems = false;
+    cachedPreserveItemsPlugins = plugins;
+    for (let i = 0; i < plugins.length; i++) if (plugins[i].spec.historyPreserveItems) {
+      cachedPreserveItems = true;
+      break;
+    }
+  }
+  return cachedPreserveItems;
+}
+const historyKey = new PluginKey("history");
+const closeHistoryKey = new PluginKey("closeHistory");
+/**
+Returns a plugin that enables the undo history for an editor. The
+plugin will track undo and redo stacks, which can be used with the
+[`undo`](https://prosemirror.net/docs/ref/#history.undo) and [`redo`](https://prosemirror.net/docs/ref/#history.redo) commands.
+
+You can set an `"addToHistory"` [metadata
+property](https://prosemirror.net/docs/ref/#state.Transaction.setMeta) of `false` on a transaction
+to prevent it from being rolled back by undo.
+*/
+function history(config = {}) {
+  config = {
+    depth: config.depth || 100,
+    newGroupDelay: config.newGroupDelay || 500
+  };
+  return new Plugin({
+    key: historyKey,
+    state: {
+      init() {
+        return new HistoryState(Branch.empty, Branch.empty, null, 0, -1);
+      },
+      apply(tr, hist, state) {
+        return applyTransaction(hist, state, tr, config);
+      }
+    },
+    config,
+    props: {
+      handleDOMEvents: {
+        beforeinput(view, e) {
+          let inputType = e.inputType;
+          let command = inputType == "historyUndo" ? undo : inputType == "historyRedo" ? redo : null;
+          if (!command) return false;
+          e.preventDefault();
+          return command(view.state, view.dispatch);
+        }
+      }
+    }
+  });
+}
+/**
+A command function that undoes the last change, if any.
+*/
+const undo = (state, dispatch) => {
+  let hist = historyKey.getState(state);
+  if (!hist || hist.done.eventCount == 0) return false;
+  if (dispatch) histTransaction(hist, state, dispatch, false);
+  return true;
+};
+/**
+A command function that redoes the last undone change, if any.
+*/
+const redo = (state, dispatch) => {
+  let hist = historyKey.getState(state);
+  if (!hist || hist.undone.eventCount == 0) return false;
+  if (dispatch) histTransaction(hist, state, dispatch, true);
+  return true;
+};
+
+const History = Extension.create({
+  name: 'history',
+  addOptions() {
+    return {
+      depth: 100,
+      newGroupDelay: 500
+    };
+  },
+  addCommands() {
+    return {
+      undo: () => ({
+        state,
+        dispatch
+      }) => {
+        return undo(state, dispatch);
+      },
+      redo: () => ({
+        state,
+        dispatch
+      }) => {
+        return redo(state, dispatch);
+      }
+    };
+  },
+  addProseMirrorPlugins() {
+    return [history(this.options)];
+  },
+  addKeyboardShortcuts() {
+    return {
+      'Mod-z': () => this.editor.commands.undo(),
+      'Mod-Z': () => this.editor.commands.undo(),
+      'Mod-y': () => this.editor.commands.redo(),
+      'Mod-Y': () => this.editor.commands.redo(),
+      'Shift-Mod-z': () => this.editor.commands.redo(),
+      'Shift-Mod-Z': () => this.editor.commands.redo(),
+      // Russian keyboard layouts
+      'Mod-я': () => this.editor.commands.undo(),
+      'Shift-Mod-я': () => this.editor.commands.redo()
+    };
+  }
+});
+
+const Text = Node.create({
+  name: 'text',
+  group: 'inline'
+});
+
+const StarterKit = Extension.create({
+  name: 'starterKit',
+  addExtensions() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    const extensions = [];
+    if (this.options.blockquote !== false) {
+      extensions.push(Blockquote.configure((_a = this.options) === null || _a === void 0 ? void 0 : _a.blockquote));
+    }
+    if (this.options.bold !== false) {
+      extensions.push(Bold.configure((_b = this.options) === null || _b === void 0 ? void 0 : _b.bold));
+    }
+    if (this.options.bulletList !== false) {
+      extensions.push(BulletList.configure((_c = this.options) === null || _c === void 0 ? void 0 : _c.bulletList));
+    }
+    if (this.options.code !== false) {
+      extensions.push(Code.configure((_d = this.options) === null || _d === void 0 ? void 0 : _d.code));
+    }
+    if (this.options.codeBlock !== false) {
+      extensions.push(CodeBlock.configure((_e = this.options) === null || _e === void 0 ? void 0 : _e.codeBlock));
+    }
+    if (this.options.document !== false) {
+      extensions.push(Document.configure((_f = this.options) === null || _f === void 0 ? void 0 : _f.document));
+    }
+    if (this.options.dropcursor !== false) {
+      extensions.push(Dropcursor.configure((_g = this.options) === null || _g === void 0 ? void 0 : _g.dropcursor));
+    }
+    if (this.options.gapcursor !== false) {
+      extensions.push(Gapcursor.configure((_h = this.options) === null || _h === void 0 ? void 0 : _h.gapcursor));
+    }
+    if (this.options.hardBreak !== false) {
+      extensions.push(HardBreak.configure((_j = this.options) === null || _j === void 0 ? void 0 : _j.hardBreak));
+    }
+    if (this.options.heading !== false) {
+      extensions.push(Heading.configure((_k = this.options) === null || _k === void 0 ? void 0 : _k.heading));
+    }
+    if (this.options.history !== false) {
+      extensions.push(History.configure((_l = this.options) === null || _l === void 0 ? void 0 : _l.history));
+    }
+    if (this.options.horizontalRule !== false) {
+      extensions.push(HorizontalRule.configure((_m = this.options) === null || _m === void 0 ? void 0 : _m.horizontalRule));
+    }
+    if (this.options.italic !== false) {
+      extensions.push(Italic.configure((_o = this.options) === null || _o === void 0 ? void 0 : _o.italic));
+    }
+    if (this.options.listItem !== false) {
+      extensions.push(ListItem.configure((_p = this.options) === null || _p === void 0 ? void 0 : _p.listItem));
+    }
+    if (this.options.orderedList !== false) {
+      extensions.push(OrderedList.configure((_q = this.options) === null || _q === void 0 ? void 0 : _q.orderedList));
+    }
+    if (this.options.paragraph !== false) {
+      extensions.push(Paragraph.configure((_r = this.options) === null || _r === void 0 ? void 0 : _r.paragraph));
+    }
+    if (this.options.strike !== false) {
+      extensions.push(Strike.configure((_s = this.options) === null || _s === void 0 ? void 0 : _s.strike));
+    }
+    if (this.options.text !== false) {
+      extensions.push(Text.configure((_t = this.options) === null || _t === void 0 ? void 0 : _t.text));
+    }
+    return extensions;
+  }
+});
+
+var script = defineComponent({
+  name: 'OrRichTextEditor',
+  components: {
+    OrButton: __vue_component__$1,
+    OrError: __vue_component__$2,
+    OrHint: __vue_component__$3,
+    OrIconButton: __vue_component__$4,
+    OrInput: __vue_component__$5,
+    OrInputBox: __vue_component__$6,
+    OrLabel: __vue_component__$7,
+    OrMenu: __vue_component__$8,
+    OrMenuItem: __vue_component__$9,
+    OrModal: __vue_component__$a,
+    OrPopover: __vue_component__$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
+    },
+    fullHeight: {
+      type: Boolean,
+      default: false
+    },
+    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();
+    // Refs & Styles
+    const root = ref();
+    const rootStyles = computed(() => ['or-rich-text-editor-v3', ...RichTextEditor]);
+    const toolbarRef = ref();
+    const toolbarStyles = computed(() => [...RichTextEditorToolbar]);
+    const toolbarGroupStyles = computed(() => [...RichTextEditorToolbarGroup]);
+    const controlRef = ref();
+    const controlStyles = computed(() => ['tiptap-editor-v3', ...RichTextEditorControl]);
+    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, {
+      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.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'
+          }
+        },
+        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 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 (isArray(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) {
+            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);
+    });
+    return {
+      root,
+      rootStyles,
+      toolbarRef,
+      toolbarStyles,
+      toolbarGroupStyles,
+      controlRef,
+      controlStyles,
+      editor,
+      containerRef,
+      toolbarButtonRef,
+      moreButtonRef,
+      textareaRef,
+      moreRef,
+      menuRef,
+      iconsEnum,
+      handleToolbarClick,
+      handleEditorClick,
+      isActive,
+      iconTooltipsEnum,
+      getIndexOfHeading,
+      headingLevels,
+      headingIcon,
+      attachLink,
+      discardLink,
+      isOpenLinkModal,
+      text,
+      link,
+      isFocused,
+      isVisible,
+      countOfNotVisibleTools,
+      notVisibleTools,
+      handleInput,
+      model,
+      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
+  }, [_vm.$slots.label || _vm.$slots.addon || _vm.label ? [_c('OrLabel', {
+    attrs: {
+      "variant": 'input',
+      "required": _vm.required,
+      "disabled": _vm.disabled
+    },
+    scopedSlots: _vm._u([{
+      key: "addon",
+      fn: function () {
+        return [_vm._t("addon")];
+      },
+      proxy: true
+    }], null, true)
+  }, [_vm._t("label", function () {
+    return [_vm._v("\n        " + _vm._s(_vm.label) + "\n      ")];
+  })], 2)] : _vm._e(), _vm._v(" "), _c('OrInputBox', {
+    ref: 'containerRef',
+    attrs: {
+      "direction": 'column',
+      "invalid": !!_vm.error,
+      "disabled": _vm.disabled
+    },
+    on: {
+      "click": function ($event) {
+        return _vm.handleEditorClick();
+      }
+    }
+  }, [_c('div', {
+    ref: 'toolbarRef',
+    class: _vm.toolbarStyles,
+    attrs: {
+      "disabled": _vm.disabled || !_vm.isFocused
+    }
+  }, [_vm._l(_vm.toolbar, function (tools, index) {
+    return _c('div', {
+      key: index,
+      class: _vm.toolbarGroupStyles.concat([{
+        'hidden': _vm.isVisible(tools)
+      }]),
+      attrs: {
+        "disabled": _vm.disabled || !_vm.isFocused
+      }
+    }, _vm._l(tools, function (item) {
+      return _c('div', {
+        key: item,
+        class: ['flex gap-md', {
+          'hidden': !_vm.isVisible(item)
+        }]
+      }, [item === 'heading' ? _c('OrIconButton', {
+        ref: 'toolbarButtonRef',
+        refInFor: true,
+        attrs: {
+          "icon": {
+            icon: _vm.headingIcon,
+            variant: 'inherit'
+          },
+          "tooltip": {
+            content: item,
+            placement: 'top'
+          },
+          "selected": _vm.isActive[item],
+          "disabled": _vm.disabled || !_vm.isFocused
+        },
+        on: {
+          "click": function ($event) {
+            _vm.menuRef && _vm.menuRef.toggle();
+          }
+        }
+      }) : _vm.isVisible(item) ? _c('OrIconButton', {
+        attrs: {
+          "icon": {
+            icon: _vm.iconsEnum[item],
+            variant: 'inherit'
+          },
+          "tooltip": {
+            content: _vm.iconTooltipsEnum[item],
+            placement: 'top'
+          },
+          "selected": _vm.isActive[item],
+          "disabled": _vm.disabled || !_vm.isFocused
+        },
+        on: {
+          "click": function ($event) {
+            return _vm.handleToolbarClick(item);
+          }
+        }
+      }) : _vm._e()], 1);
+    }), 0);
+  }), _vm._v(" "), _vm.countOfNotVisibleTools > 0 ? _c('OrIconButton', {
+    ref: 'moreButtonRef',
+    class: ['px-sm'],
+    attrs: {
+      "icon": {
+        icon: 'more_horiz',
+        variant: 'inherit'
+      },
+      "disabled": _vm.disabled || !_vm.isFocused
+    },
+    on: {
+      "click": function ($event) {
+        _vm.moreRef && _vm.moreRef.open();
+      }
+    }
+  }) : _vm._e()], 2), _vm._v(" "), _c('div', {
+    class: ['p-sm', 'overflow-auto', 'min-h-[88px]']
+  }, [_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: "block w-full h-full resize-none border-none outline-none bg-transparent typography-body-2-regular",
+    attrs: {
+      "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: 'controlRef',
+    class: _vm.controlStyles
+  }), _vm._v(" "), _vm._t("files")], 2)]), _vm._v(" "), _vm.$slots.hint || _vm.hint ? [_c('OrHint', {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: !_vm.error,
+      expression: "!error"
+    }],
+    attrs: {
+      "disabled": _vm.disabled
+    }
+  }, [_vm._t("hint", function () {
+    return [_vm._v("\n        " + _vm._s(_vm.hint) + "\n      ")];
+  })], 2)] : _vm._e(), _vm._v(" "), _c('OrError', {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: typeof _vm.error === 'string' && _vm.error.length > 0,
+      expression: "typeof error === 'string' && error.length > 0"
+    }],
+    attrs: {
+      "disabled": _vm.disabled
+    }
+  }, [_vm._v("\n    " + _vm._s(_vm.error) + "\n  ")]), _vm._v(" "), _vm.moreButtonRef ? _c('OrPopover', {
+    ref: 'moreRef',
+    attrs: {
+      "trigger": _vm.moreButtonRef && _vm.moreButtonRef.root,
+      "placement": 'top-end'
+    }
+  }, [_c('div', {
+    staticClass: "flex p-sm gap-md"
+  }, _vm._l(_vm.notVisibleTools, function (item) {
+    return _c('OrIconButton', {
+      key: item,
+      attrs: {
+        "icon": {
+          icon: _vm.iconsEnum[item],
+          variant: 'inherit'
+        },
+        "tooltip": {
+          content: _vm.iconTooltipsEnum[item],
+          placement: 'top'
+        },
+        "selected": _vm.isActive[item]
+      },
+      on: {
+        "click": function ($event) {
+          return _vm.handleToolbarClick(item);
+        }
+      }
+    });
+  }), 1)]) : _vm._e(), _vm._v(" "), _vm.toolbarButtonRef ? _c('OrMenu', {
+    ref: 'menuRef',
+    attrs: {
+      "trigger": _vm.toolbarButtonRef[_vm.getIndexOfHeading] && _vm.toolbarButtonRef[_vm.getIndexOfHeading].root,
+      "placement": 'bottom-start'
+    }
+  }, [_vm._l(_vm.headingLevels, function (heading) {
+    return _c('OrMenuItem', {
+      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('OrMenuItem', {
+    attrs: {
+      "selected": !_vm.activeHeadingLevel
+    },
+    on: {
+      "click": function ($event) {
+        return _vm.handleToolbarClick('heading');
+      }
+    }
+  }, [_vm._v("\n      None\n    ")])], 2) : _vm._e(), _vm._v(" "), _c('OrModal', {
+    attrs: {
+      "is-open": _vm.isOpenLinkModal,
+      "size": 's'
+    },
+    scopedSlots: _vm._u([{
+      key: "header",
+      fn: function () {
+        return [_vm._v("\n      Add Link\n    ")];
+      },
+      proxy: true
+    }, {
+      key: "footer",
+      fn: function () {
+        return [_c('div', {
+          class: ['layout-row-reverse', 'gap-md']
+        }, [_c('OrButton', {
+          attrs: {
+            "variant": 'contained'
+          },
+          on: {
+            "click": function ($event) {
+              return _vm.attachLink();
+            }
+          }
+        }, [_vm._v("\n          Save\n        ")]), _vm._v(" "), _c('OrButton', {
+          attrs: {
+            "variant": 'outlined'
+          },
+          on: {
+            "click": function ($event) {
+              return _vm.discardLink();
+            }
+          }
+        }, [_vm._v("\n          Cancel\n        ")])], 1)];
+      },
+      proxy: true
+    }])
+  }, [_vm._v(" "), _c('div', {
+    class: ['layout-column', 'gap-md']
+  }, [_c('OrInput', {
+    attrs: {
+      "label": 'Text',
+      "placeholder": 'Enter text'
+    },
+    model: {
+      value: _vm.text,
+      callback: function ($$v) {
+        _vm.text = $$v;
+      },
+      expression: "text"
+    }
+  }), _vm._v(" "), _c('OrInput', {
+    attrs: {
+      "label": 'Link',
+      "placeholder": 'Enter link'
+    },
+    model: {
+      value: _vm.link,
+      callback: function ($$v) {
+        _vm.link = $$v;
+      },
+      expression: "link"
+    }
+  })], 1)])], 2);
+};
+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 { __vue_component__ as default };