@onereach/ui-components 4.0.2 → 4.1.0-beta.2508.0

package/dist/bundled/v3/OrRichTextEditor.vue_vue_type_script_lang-33b56bd6.js

@@ -0,0 +1,1815 @@
+import { defineComponent, ref, onMounted, onBeforeUnmount, computed, watch } from 'vue-demi';
+import { onClickOutside } from '@vueuse/core';
+import { B as Blockquote, a as Bold, b as BulletList, C as CodeBlock, H as HardBreak, I as Italic, L as ListItem, O as OrderedList, P as Paragraph, S as Strike, s as serialize, d as deserialize, c as Link, e as Highlight } from './markdown-00716a39.js';
+import { EditorContainer, ToolbarContainer, Toolbar, ToolbarButtonFocused, ToolbarButton, EditorInput, ToolbarButtonActive } from './components/OrRichTextEditorV3/styles.js';
+import { M as Mark, m as mergeAttributes, a as markInputRule, b as markPasteRule, N as Node, E as Extension, k as keydownHandler, D as DecorationSet, c as Decoration, d as callOrReturn, g as getExtensionField, t as textblockTypeInputRule, n as nodeInputRule, e as Editor } from './tiptap-core.esm-f85402b1.js';
+import { P as Plugin, d as dropPoint, S as Selection, N as NodeSelection, F as Fragment, a as Slice, T as TextSelection, b as PluginKey, M as Mapping } from './index-62c3221b.js';
+import codemirrorNode from './components/OrRichTextEditorV3/utils/codemirror/codemirrorNode.js';
+import './components/OrIconButtonV3/OrIconButton.js';
+import './components/OrLabelV3/OrLabel.js';
+import './components/OrMenuItemV3/OrMenuItem.js';
+import './components/OrMenuV3/OrMenu.js';
+import './components/OrModalV3/OrModal.js';
+import { s as script$5 } from './OrModal.vue_vue_type_script_lang-9ed0d5c2.js';
+import './components/OrInputV3/OrInput.js';
+import './components/OrButtonV3/OrButton.js';
+import { s as script$1 } from './OrIconButton.vue_vue_type_script_lang-42a8285c.js';
+import { s as script$2 } from './OrLabel.vue_vue_type_script_lang-3e11ab8a.js';
+import { s as script$3 } from './OrMenuItem.vue_vue_type_script_lang-b338d68a.js';
+import { s as script$4 } from './OrMenu.vue_vue_type_script_lang-2676b9cc.js';
+import { s as script$6 } from './OrInput.vue_vue_type_script_lang-60b49ebd.js';
+import { s as script$7 } from './OrButton.vue_vue_type_script_lang-fe412ca5.js';
+
+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
+    };
+  }
+});
+
+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
+        }
+      });
+    });
+  }
+});
+
+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);
+var ropeSequence = 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) {
+    this.done = done;
+    this.undone = undone;
+    this.prevRanges = prevRanges;
+    this.prevTime = prevTime;
+  }
+}
+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);
+  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);else return new HistoryState(history.done, history.undone.addTransform(tr, undefined, options, mustPreserveItems(state)), null, history.prevTime);
+  } else if (tr.getMeta("addToHistory") !== false && !(appended && appended.getMeta("addToHistory") === false)) {
+    // Group transforms that occur in quick succession into one event.
+    let newGroup = history.prevTime == 0 || !appended && (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);
+  } 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);
+  } else {
+    return new HistoryState(history.done.addMaps(tr.mapping.maps), history.undone.addMaps(tr.mapping.maps), mapRanges(history.prevRanges, tr.mapping), history.prevTime);
+  }
+}
+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);
+  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);
+      },
+      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-y': () => 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 HorizontalRule = Node.create({
+  name: 'horizontalRule',
+  addOptions() {
+    return {
+      HTMLAttributes: {}
+    };
+  },
+  group: 'block',
+  parseHTML() {
+    return [{
+      tag: 'hr'
+    }];
+  },
+  renderHTML({
+    HTMLAttributes
+  }) {
+    return ['hr', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
+  },
+  addCommands() {
+    return {
+      setHorizontalRule: () => ({
+        chain
+      }) => {
+        return chain().insertContent({
+          type: this.name
+        })
+        // set cursor after horizontal rule
+        .command(({
+          tr,
+          dispatch
+        }) => {
+          var _a;
+          if (dispatch) {
+            const {
+              $to
+            } = tr.selection;
+            const posAfter = $to.end();
+            if ($to.nodeAfter) {
+              tr.setSelection(TextSelection.create(tr.doc, $to.pos));
+            } else {
+              // add node after horizontal rule if it’s the end of the document
+              const node = (_a = $to.parent.type.contentMatch.defaultType) === null || _a === void 0 ? void 0 : _a.create();
+              if (node) {
+                tr.insert(posAfter, node);
+                tr.setSelection(TextSelection.create(tr.doc, posAfter));
+              }
+            }
+            tr.scrollIntoView();
+          }
+          return true;
+        }).run();
+      }
+    };
+  },
+  addInputRules() {
+    return [nodeInputRule({
+      find: /^(?:---|—-|___\s|\*\*\*\s)$/,
+      type: this.type
+    })];
+  }
+});
+
+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;
+  }
+});
+
+const Underline = Mark.create({
+  name: 'underline',
+  addOptions() {
+    return {
+      HTMLAttributes: {}
+    };
+  },
+  parseHTML() {
+    return [{
+      tag: 'u'
+    }, {
+      style: 'text-decoration',
+      consuming: false,
+      getAttrs: style => style.includes('underline') ? {} : false
+    }];
+  },
+  renderHTML({
+    HTMLAttributes
+  }) {
+    return ['u', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+  },
+  addCommands() {
+    return {
+      setUnderline: () => ({
+        commands
+      }) => {
+        return commands.setMark(this.name);
+      },
+      toggleUnderline: () => ({
+        commands
+      }) => {
+        return commands.toggleMark(this.name);
+      },
+      unsetUnderline: () => ({
+        commands
+      }) => {
+        return commands.unsetMark(this.name);
+      }
+    };
+  },
+  addKeyboardShortcuts() {
+    return {
+      'Mod-u': () => this.editor.commands.toggleUnderline(),
+      'Mod-U': () => this.editor.commands.toggleUnderline()
+    };
+  }
+});
+
+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({
+      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);
+        }
+      }
+    })];
+  }
+});
+
+var script = defineComponent({
+  name: 'OrRichTextEditor',
+  components: {
+    OrIconButton: script$1,
+    OrLabel: script$2,
+    OrMenuItem: script$3,
+    OrMenu: script$4,
+    OrModal: script$5,
+    OrInput: script$6,
+    OrButton: script$7
+  },
+  inheritAttrs: false,
+  props: {
+    modelValue: {
+      type: String,
+      default: undefined
+    },
+    value: {
+      type: String,
+      default: undefined
+    },
+    toolbar: {
+      type: Array,
+      default: () => [['heading'], ['bold', 'italic', 'strike'], ['underline', 'highlight'], ['link'], ['blockquote', 'codeBlock'], ['bulletList', 'orderedList'], ['undo', 'redo']]
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      default: 'Write something...'
+    },
+    autofocus: {
+      type: Boolean,
+      default: false
+    },
+    markdownFormat: {
+      type: Boolean,
+      default: false
+    },
+    fullHeight: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:modelValue', 'input'],
+  expose: ['root'],
+  setup(props, context) {
+    // Refs
+    const root = ref();
+    let editor = null;
+    const editorRef = ref();
+    const containerRef = ref();
+    const toolbarButtonRef = ref();
+    const menuRef = ref();
+    const isActive = ref({});
+    const isFocused = ref(props.autofocus);
+    const headingLevels = [1, 2, 3, 4];
+    const previousHeadingLevel = ref();
+    const activeHeadingLevel = ref(0);
+    const markdownOutput = ref('');
+    const isOpenLinkModal = ref(false);
+    const text = ref('');
+    const link = ref('');
+    // let trap: UseFocusTrapReturn = useFocusTrap(editorRef, {
+    //   immediate: true,
+    //   fallbackFocus: '.container',
+    //   allowOutsideClick: true,
+    // });
+    const iconsEnum = ref({
+      bold: 'format_bold',
+      italic: 'format_italic',
+      underline: 'format_underlined',
+      strike: 'format_strikethrough',
+      bulletList: 'format_list_bulleted',
+      orderedList: 'format_list_numbered',
+      link: 'link',
+      highlight: 'highlight',
+      redo: 'redo',
+      undo: 'undo',
+      codeBlock: 'code_blocks',
+      blockquote: 'format_quote'
+    });
+    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'
+    });
+    onMounted(() => {
+      editor = new Editor({
+        onUpdate: ({
+          editor
+        }) => {
+          isFocused.value = true;
+          setActiveFormats();
+          const html = editor.getHTML();
+          const text = editor.getText();
+          if (props.markdownFormat) {
+            markdownOutput.value = serialize(editor.schema, editor.getJSON());
+            proxyModelValue.value = markdownOutput.value;
+          } else {
+            proxyModelValue.value = text === '' ? text : html;
+          }
+        },
+        onCreate: ({
+          editor
+        }) => {
+          if (props.markdownFormat) {
+            const deserialized = deserialize(editor.schema, proxyModelValue.value);
+            editor.commands.setContent(deserialized);
+          } else {
+            editor.commands.setContent(proxyModelValue.value);
+          }
+        },
+        element: editorRef.value,
+        autofocus: props.autofocus,
+        extensions: [codemirrorNode, StarterKit.configure({
+          heading: false,
+          codeBlock: false
+        }), Heading.configure({
+          levels: headingLevels
+        }).extend({
+          levels: headingLevels,
+          renderHTML({
+            node,
+            HTMLAttributes
+          }) {
+            return ['h' + node.attrs.level, mergeAttributes(HTMLAttributes, {
+              class: `typography-headline-${node.attrs.level}`
+            }), 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: 'focus:outline-none'
+          }
+        }
+      });
+      setActiveFormats();
+    });
+    onBeforeUnmount(() => {
+      editor === null || editor === void 0 ? void 0 : editor.destroy();
+    });
+    onClickOutside(root, () => {
+      isFocused.value = false;
+      // trap.deactivate();
+    });
+    // Computed
+    const proxyModelValue = computed({
+      get: () => {
+        var _a;
+        return (_a = props.modelValue) !== null && _a !== void 0 ? _a : props.value; // TODO: Remove Vue 2 fallback
+      },
+
+      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';
+    });
+    //Methods
+    const handleEditorClick = () => {
+      setActiveFormats();
+      isFocused.value = true;
+      editor === null || editor === void 0 ? void 0 : editor.commands.focus();
+    };
+    const handleToolbarClick = (item, level) => {
+      var _a, _b;
+      switch (item) {
+        case 'bulletList':
+        case 'orderedList':
+          item === 'bulletList' ? editor === null || editor === void 0 ? void 0 : editor.commands.toggleBulletList() : editor === null || editor === void 0 ? void 0 : editor.commands.toggleOrderedList();
+          break;
+        case 'link':
+          if (editor) {
+            const cursorPosition = (editor === null || editor === void 0 ? void 0 : editor.state.selection.$anchor.pos) || 0;
+            const {
+              from,
+              to,
+              empty
+            } = editor.state.selection;
+            const isLink = (_a = editor.view.state.doc.nodeAt(cursorPosition)) === null || _a === void 0 ? void 0 : _a.marks.filter(mark => mark.type.name === 'link');
+            const existedText = (isLink === null || isLink === void 0 ? void 0 : isLink.length) ? ((_b = editor.view.state.doc.nodeAt(cursorPosition)) === null || _b === void 0 ? void 0 : _b.text) || '' : '';
+            text.value = empty ? existedText : editor.state.doc.textBetween(from, to, ' ');
+            link.value = editor.getAttributes('link').href || '';
+          }
+          isOpenLinkModal.value = !isOpenLinkModal.value;
+          break;
+        case 'blockquote':
+          editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleBlockquote().run();
+          break;
+        case 'codeBlock':
+          if (!isActive.value['codeBlock']) {
+            editor === null || editor === void 0 ? void 0 : editor.commands.setNode(item, {
+              language: 'javascript'
+            });
+          } else {
+            editor === null || editor === void 0 ? void 0 : editor.commands.setNode('paragraph');
+          }
+          break;
+        case 'heading':
+          if (!level) {
+            editor === null || editor === void 0 ? void 0 : editor.commands.toggleHeading({
+              level: previousHeadingLevel.value
+            });
+            activeHeadingLevel.value = 0;
+          } else {
+            activeHeadingLevel.value = level;
+            previousHeadingLevel.value = level;
+            editor === null || editor === void 0 ? void 0 : editor.commands.toggleHeading({
+              level: level
+            });
+          }
+          editor === null || editor === void 0 ? void 0 : editor.commands.focus();
+          break;
+        case 'undo':
+        case 'redo':
+          item === 'undo' ? editor === null || editor === void 0 ? void 0 : editor.commands.undo() : editor === null || editor === void 0 ? void 0 : editor.commands.redo();
+          break;
+        default:
+          editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleMark(item).run();
+          break;
+      }
+    };
+    const attachLink = async () => {
+      var _a, _b;
+      // empty
+      if (link.value === '') {
+        editor === null || editor === void 0 ? void 0 : editor.chain().focus().extendMarkRange('link').unsetLink().run();
+      }
+      const isEmptySelection = editor === null || editor === void 0 ? void 0 : editor.state.selection.empty;
+      const cursorPosition = (editor === null || editor === void 0 ? void 0 : editor.state.selection.$anchor.pos) || 0;
+      const isLink = (_a = editor === null || editor === void 0 ? void 0 : editor.view.state.doc.nodeAt(cursorPosition)) === null || _a === void 0 ? void 0 : _a.marks.filter(mark => mark.type.name === 'link');
+      const existedText = (isLink === null || isLink === void 0 ? void 0 : isLink.length) ? (_b = editor === null || editor === void 0 ? void 0 : editor.view.state.doc.nodeAt(cursorPosition)) === null || _b === void 0 ? void 0 : _b.text : '';
+      if (link.value && isEmptySelection && !existedText) {
+        editor === null || editor === void 0 ? void 0 : editor.chain().focus().setMark('link', {
+          href: link.value,
+          target: '__blank'
+        }).command(({
+          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) {
+        editor === null || editor === void 0 ? void 0 : editor.chain().extendMarkRange('link').updateAttributes('link', {
+          href: link.value
+        }).run();
+      }
+      if (link.value && !isEmptySelection) {
+        editor === null || editor === void 0 ? void 0 : editor.chain().focus().setMark('link', {
+          href: link.value,
+          target: '__blank'
+        }).run();
+      }
+      text.value = '';
+      link.value = '';
+      isOpenLinkModal.value = false;
+    };
+    const discardLink = () => {
+      isOpenLinkModal.value = false;
+    };
+    const setActiveFormats = () => {
+      const toolbarList = props.toolbar.flat();
+      toolbarList.forEach(item => {
+        isActive.value[item] = (editor === null || editor === void 0 ? void 0 : editor.isActive(item)) || false;
+      });
+    };
+    // Styles
+    const rootStyles = computed(() => {
+      return ['or-rich-text-editor', ...(props.fullHeight ? ['h-full'] : [])];
+    });
+    const containerStyles = computed(() => {
+      return [...EditorContainer, ...(props.fullHeight ? ['h-full'] : [])];
+    });
+    const toolbarContainerStyles = computed(() => {
+      return [...ToolbarContainer];
+    });
+    const toolbarStyles = computed(() => {
+      return [...Toolbar, ...(isFocused.value ? ToolbarButtonFocused : ToolbarButton)];
+    });
+    const editorInputStyles = computed(() => {
+      return ['tiptap-editor', ...(props.fullHeight ? ['h-full'] : []), ...EditorInput];
+    });
+    const toolbarButtonStyles = item => {
+      return [
+      // Layout
+      'flex',
+      // Spacing
+      'gap-md', ...(isActive.value[item] ? ToolbarButtonActive : [])];
+    };
+    //Effects
+    watch(proxyModelValue, value => {
+      if (value !== (editor === null || editor === void 0 ? void 0 : editor.getHTML()) && !props.markdownFormat) {
+        editor === null || editor === void 0 ? void 0 : editor.commands.setContent(value);
+      }
+      if (props.markdownFormat && value !== markdownOutput.value) {
+        const deserialized = deserialize(editor === null || editor === void 0 ? void 0 : editor.schema, value);
+        editor === null || editor === void 0 ? void 0 : editor.commands.setContent(deserialized);
+      }
+    });
+    return {
+      editor,
+      editorRef,
+      containerRef,
+      toolbarButtonRef,
+      menuRef,
+      iconsEnum,
+      handleToolbarClick,
+      handleEditorClick,
+      isActive,
+      iconTooltipsEnum,
+      containerStyles,
+      toolbarContainerStyles,
+      toolbarStyles,
+      rootStyles,
+      root,
+      toolbarButtonStyles,
+      editorInputStyles,
+      getIndexOfHeading,
+      headingLevels,
+      headingIcon,
+      attachLink,
+      discardLink,
+      isOpenLinkModal,
+      text,
+      link
+    };
+  }
+});
+
+export { script as s };