@onereach/ui-components 10.2.0 → 10.2.1-beta.4272.0

package/dist/bundled/v3/components/{OrRichTextEditorV3-358d7df2.js → OrRichTextEditorV3-45e64a85.js}

@@ -1,20 +1,20 @@
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createElementVNode, Fragment as Fragment$1, renderList, withDirectives, vShow, vModelText, createVNode } from 'vue';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, Fragment as Fragment$1, renderList, createBlock, createCommentVNode, withCtx, createElementVNode, createTextVNode, toDisplayString, createVNode, renderSlot, withDirectives, vShow, vModelText } from 'vue';
 import { s as styleInject } from './OrAvatar-86b41eb9.js';
 import { l as useResizeObserver, m as useDebounceFn, o as onClickOutside } from './OrBottomSheetV3-a6bcf245.js';
 import { u as useFocusTrap } from './OrModal-ca7146cc.js';
-import { defineComponent, ref, onMounted, onBeforeUnmount, computed, watch, nextTick } from 'vue-demi';
+import { defineComponent, ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from 'vue-demi';
 import { j as commonjsGlobal, k as getDefaultExportFromCjs } from './OrDateTimePicker-0a55e490.js';
 import { f as keyName, g as base, E as EditorView$1, H as HighlightStyle, t as tags, s as syntaxHighlighting, a as EditorState$1, m as highlightActiveLine, n as highlightActiveLineGutter, o as lineNumbers, k as keymap$1, p as minimalSetup, j as javascript } from './OrCode-d9b43205.js';
-import { s as script$1 } from './OrIconButtonV3-1226bc94.js';
-import { s as script$2 } from './OrLabelV3-23a42d9d.js';
+import { s as script$2 } from './OrIconButtonV3-1226bc94.js';
 import { s as script$3 } from './OrMenuItemV3-97def528.js';
 import { s as script$4 } from './OrMenuV3-a6e4003d.js';
-import { s as script$5 } from './OrModalV3-d10e039e.js';
-import { s as script$6 } from './OrInputV3-ce85efcb.js';
-import { s as script$7 } from './OrButtonV3-9bd422c8.js';
-import { s as script$8 } from './OrPopoverV3-dd93694c.js';
+import { s as script$5 } from './OrPopoverV3-dd93694c.js';
+import { s as script$6 } from './OrModalV3-d10e039e.js';
+import { s as script$7 } from './OrInputV3-ce85efcb.js';
+import { s as script$8 } from './OrButtonV3-9bd422c8.js';
 import { s as script$9 } from './OrHintV3-c8ac5975.js';
 import { s as script$a } from './OrErrorV3-b04d76aa.js';
+import { s as script$b } from './OrLabelV3-23a42d9d.js';
 import { useTheme } from '../hooks/useTheme.js';
 
 // ::- Persistent data structure representing an ordered mapping from
@@ -17763,9 +17763,6 @@ class CommandManager {
     const {
       view
     } = editor;
-    if (state.storedMarks) {
-      tr.setStoredMarks(state.storedMarks);
-    }
     const props = {
       tr,
       editor,
@@ -17775,7 +17772,7 @@ class CommandManager {
         transaction: tr
       }),
       dispatch: shouldDispatch ? () => undefined : undefined,
-      chain: () => this.createChain(tr),
+      chain: () => this.createChain(tr, shouldDispatch),
       can: () => this.createCan(tr),
       get commands() {
         return Object.fromEntries(Object.entries(rawCommands).map(_ref4 => {
@@ -17954,7 +17951,10 @@ function mergeAttributes() {
         return;
       }
       if (key === 'class') {
-        mergedAttributes[key] = [mergedAttributes[key], value].join(' ');
+        const valueClasses = value ? value.split(' ') : [];
+        const existingClasses = mergedAttributes[key] ? mergedAttributes[key].split(' ') : [];
+        const insertClasses = valueClasses.filter(valueClass => !existingClasses.includes(valueClass));
+        mergedAttributes[key] = [...existingClasses, ...insertClasses].join(' ');
       } else if (key === 'style') {
         mergedAttributes[key] = [mergedAttributes[key], value].join('; ');
       } else {
@@ -18421,7 +18421,9 @@ function run$2(config) {
     state,
     from,
     to,
-    rule
+    rule,
+    pasteEvent,
+    dropEvent
   } = config;
   const {
     commands,
@@ -18456,7 +18458,9 @@ function run$2(config) {
         match,
         commands,
         chain,
-        can
+        can,
+        pasteEvent,
+        dropEvent
       });
       handlers.push(handler);
     });
@@ -18477,6 +18481,8 @@ function pasteRulesPlugin(props) {
   let dragSourceElement = null;
   let isPastedFromProseMirror = false;
   let isDroppedFromProseMirror = false;
+  let pasteEvent = new ClipboardEvent('paste');
+  let dropEvent = new DragEvent('drop');
   const plugins = rules.map(rule => {
     return new Plugin({
       // we register a global drag handler to track the current drag source element
@@ -18494,13 +18500,15 @@ function pasteRulesPlugin(props) {
       },
       props: {
         handleDOMEvents: {
-          drop: view => {
+          drop: (view, event) => {
             isDroppedFromProseMirror = dragSourceElement === view.dom.parentElement;
+            dropEvent = event;
             return false;
           },
-          paste: (view, event) => {
+          paste: (_view, event) => {
             var _a;
             const html = (_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text/html');
+            pasteEvent = event;
             isPastedFromProseMirror = !!(html === null || html === void 0 ? void 0 : html.includes('data-pm-slice'));
             return false;
           }
@@ -18531,12 +18539,16 @@ function pasteRulesPlugin(props) {
           state: chainableState,
           from: Math.max(from - 1, 0),
           to: to.b - 1,
-          rule
+          rule,
+          pasteEvent,
+          dropEvent
         });
         // stop if there are no changes
         if (!handler || !tr.steps.length) {
           return;
         }
+        dropEvent = new DragEvent('drop');
+        pasteEvent = new ClipboardEvent('paste');
         return tr;
       }
     });
@@ -19032,11 +19044,26 @@ const createParagraphNear = () => _ref16 => {
   } = _ref16;
   return createParagraphNear$1(state, dispatch);
 };
-const deleteCurrentNode = () => _ref17 => {
+const cut = (originRange, targetPos) => _ref17 => {
+  let {
+    editor,
+    tr
+  } = _ref17;
+  const {
+    state
+  } = editor;
+  const contentSlice = state.doc.slice(originRange.from, originRange.to);
+  tr.deleteRange(originRange.from, originRange.to);
+  const newPos = tr.mapping.map(targetPos);
+  tr.insert(newPos, contentSlice.content);
+  tr.setSelection(new TextSelection(tr.doc.resolve(newPos - 1)));
+  return true;
+};
+const deleteCurrentNode = () => _ref18 => {
   let {
     tr,
     dispatch
-  } = _ref17;
+  } = _ref18;
   const {
     selection
   } = tr;
@@ -19059,12 +19086,12 @@ const deleteCurrentNode = () => _ref17 => {
   }
   return false;
 };
-const deleteNode = typeOrName => _ref18 => {
+const deleteNode = typeOrName => _ref19 => {
   let {
     tr,
     state,
     dispatch
-  } = _ref18;
+  } = _ref19;
   const type = getNodeType(typeOrName, state.schema);
   const $pos = tr.selection.$anchor;
   for (let depth = $pos.depth; depth > 0; depth -= 1) {
@@ -19080,11 +19107,11 @@ const deleteNode = typeOrName => _ref18 => {
   }
   return false;
 };
-const deleteRange = range => _ref19 => {
+const deleteRange = range => _ref20 => {
   let {
     tr,
     dispatch
-  } = _ref19;
+  } = _ref20;
   const {
     from,
     to
@@ -19094,24 +19121,24 @@ const deleteRange = range => _ref19 => {
   }
   return true;
 };
-const deleteSelection = () => _ref20 => {
+const deleteSelection = () => _ref21 => {
   let {
     state,
     dispatch
-  } = _ref20;
+  } = _ref21;
   return deleteSelection$1(state, dispatch);
 };
-const enter = () => _ref21 => {
+const enter = () => _ref22 => {
   let {
     commands
-  } = _ref21;
+  } = _ref22;
   return commands.keyboardShortcut('Enter');
 };
-const exitCode = () => _ref22 => {
+const exitCode = () => _ref23 => {
   let {
     state,
     dispatch
-  } = _ref22;
+  } = _ref23;
   return exitCode$1(state, dispatch);
 };
 
@@ -19193,12 +19220,12 @@ function getMarkType(nameOrType, schema) {
 }
 const extendMarkRange = function (typeOrName) {
   let attributes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return _ref23 => {
+  return _ref24 => {
     let {
       tr,
       state,
       dispatch
-    } = _ref23;
+    } = _ref24;
     const type = getMarkType(typeOrName, state.schema);
     const {
       doc,
@@ -19265,13 +19292,13 @@ function isiOS() {
 const focus = function () {
   let position = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return _ref24 => {
+  return _ref25 => {
     let {
       editor,
       view,
       tr,
       dispatch
-    } = _ref24;
+    } = _ref25;
     options = {
       scrollIntoView: true,
       ...options
@@ -19325,11 +19352,11 @@ const forEach = (items, fn) => props => {
     index
   }));
 };
-const insertContent = (value, options) => _ref25 => {
+const insertContent = (value, options) => _ref26 => {
   let {
     tr,
     commands
-  } = _ref25;
+  } = _ref26;
   return commands.insertContentAt({
     from: tr.selection.from,
     to: tr.selection.to
@@ -19386,12 +19413,12 @@ function selectionToInsertionEnd(tr, startLen, bias) {
 const isFragment = nodeOrFragment => {
   return nodeOrFragment.toString().startsWith('<');
 };
-const insertContentAt = (position, value, options) => _ref26 => {
+const insertContentAt = (position, value, options) => _ref27 => {
   let {
     tr,
     dispatch,
     editor
-  } = _ref26;
+  } = _ref27;
   if (dispatch) {
     options = {
       parseOptions: {},
@@ -19414,7 +19441,10 @@ const insertContentAt = (position, value, options) => _ref26 => {
     } = typeof position === 'number' ? {
       from: position,
       to: position
-    } : position;
+    } : {
+      from: position.from,
+      to: position.to
+    };
     let isOnlyTextContent = true;
     let isOnlyBlockContent = true;
     const nodes = isFragment(content) ? content : [content];
@@ -19461,34 +19491,74 @@ const insertContentAt = (position, value, options) => _ref26 => {
   }
   return true;
 };
-const joinUp = () => _ref27 => {
+const joinUp = () => _ref28 => {
   let {
     state,
     dispatch
-  } = _ref27;
+  } = _ref28;
   return joinUp$1(state, dispatch);
 };
-const joinDown = () => _ref28 => {
+const joinDown = () => _ref29 => {
   let {
     state,
     dispatch
-  } = _ref28;
+  } = _ref29;
   return joinDown$1(state, dispatch);
 };
-const joinBackward = () => _ref29 => {
+const joinBackward = () => _ref30 => {
   let {
     state,
     dispatch
-  } = _ref29;
+  } = _ref30;
   return joinBackward$1(state, dispatch);
 };
-const joinForward = () => _ref30 => {
+const joinForward = () => _ref31 => {
   let {
     state,
     dispatch
-  } = _ref30;
+  } = _ref31;
   return joinForward$1(state, dispatch);
 };
+const joinItemBackward = () => _ref32 => {
+  let {
+    tr,
+    state,
+    dispatch
+  } = _ref32;
+  try {
+    const point = joinPoint(state.doc, state.selection.$from.pos, -1);
+    if (point === null || point === undefined) {
+      return false;
+    }
+    tr.join(point, 2);
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  } catch {
+    return false;
+  }
+};
+const joinItemForward = () => _ref33 => {
+  let {
+    state,
+    dispatch,
+    tr
+  } = _ref33;
+  try {
+    const point = joinPoint(state.doc, state.selection.$from.pos, +1);
+    if (point === null || point === undefined) {
+      return false;
+    }
+    tr.join(point, 2);
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  } catch (e) {
+    return false;
+  }
+};
 function isMacOS() {
   return typeof navigator !== 'undefined' ? /Mac/.test(navigator.platform) : false;
 }
@@ -19536,13 +19606,13 @@ function normalizeKeyName(name) {
   }
   return result;
 }
-const keyboardShortcut = name => _ref31 => {
+const keyboardShortcut = name => _ref34 => {
   let {
     editor,
     view,
     tr,
     dispatch
-  } = _ref31;
+  } = _ref34;
   const keys = normalizeKeyName(name).split(/-(?!$)/);
   const key = keys.find(item => !['Alt', 'Ctrl', 'Meta', 'Shift'].includes(item));
   const event = new KeyboardEvent('keydown', {
@@ -19603,11 +19673,11 @@ function isNodeActive(state, typeOrName) {
 }
 const lift = function (typeOrName) {
   let attributes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return _ref32 => {
+  return _ref35 => {
     let {
       state,
       dispatch
-    } = _ref32;
+    } = _ref35;
     const type = getNodeType(typeOrName, state.schema);
     const isActive = isNodeActive(state, type, attributes);
     if (!isActive) {
@@ -19616,26 +19686,26 @@ const lift = function (typeOrName) {
     return lift$1(state, dispatch);
   };
 };
-const liftEmptyBlock = () => _ref33 => {
+const liftEmptyBlock = () => _ref36 => {
   let {
     state,
     dispatch
-  } = _ref33;
+  } = _ref36;
   return liftEmptyBlock$1(state, dispatch);
 };
-const liftListItem = typeOrName => _ref34 => {
+const liftListItem = typeOrName => _ref37 => {
   let {
     state,
     dispatch
-  } = _ref34;
+  } = _ref37;
   const type = getNodeType(typeOrName, state.schema);
   return liftListItem$1(type)(state, dispatch);
 };
-const newlineInCode = () => _ref35 => {
+const newlineInCode = () => _ref38 => {
   let {
     state,
     dispatch
-  } = _ref35;
+  } = _ref38;
   return newlineInCode$1(state, dispatch);
 };
 function getSchemaTypeNameByName(name, schema) {
@@ -19662,12 +19732,12 @@ function deleteProps(obj, propOrProps) {
     return newObj;
   }, {});
 }
-const resetAttributes = (typeOrName, attributes) => _ref36 => {
+const resetAttributes = (typeOrName, attributes) => _ref39 => {
   let {
     tr,
     state,
     dispatch
-  } = _ref36;
+  } = _ref39;
   let nodeType = null;
   let markType = null;
   const schemaType = getSchemaTypeNameByName(typeof typeOrName === 'string' ? typeOrName : typeOrName.name, state.schema);
@@ -19698,63 +19768,63 @@ const resetAttributes = (typeOrName, attributes) => _ref36 => {
   }
   return true;
 };
-const scrollIntoView = () => _ref37 => {
+const scrollIntoView = () => _ref40 => {
   let {
     tr,
     dispatch
-  } = _ref37;
+  } = _ref40;
   if (dispatch) {
     tr.scrollIntoView();
   }
   return true;
 };
-const selectAll = () => _ref38 => {
+const selectAll = () => _ref41 => {
   let {
     tr,
     commands
-  } = _ref38;
+  } = _ref41;
   return commands.setTextSelection({
     from: 0,
     to: tr.doc.content.size
   });
 };
-const selectNodeBackward = () => _ref39 => {
+const selectNodeBackward = () => _ref42 => {
   let {
     state,
     dispatch
-  } = _ref39;
+  } = _ref42;
   return selectNodeBackward$1(state, dispatch);
 };
-const selectNodeForward = () => _ref40 => {
+const selectNodeForward = () => _ref43 => {
   let {
     state,
     dispatch
-  } = _ref40;
+  } = _ref43;
   return selectNodeForward$1(state, dispatch);
 };
-const selectParentNode = () => _ref41 => {
+const selectParentNode = () => _ref44 => {
   let {
     state,
     dispatch
-  } = _ref41;
+  } = _ref44;
   return selectParentNode$1(state, dispatch);
 };
 
 // @ts-ignore
-const selectTextblockEnd = () => _ref42 => {
+const selectTextblockEnd = () => _ref45 => {
   let {
     state,
     dispatch
-  } = _ref42;
+  } = _ref45;
   return selectTextblockEnd$1(state, dispatch);
 };
 
 // @ts-ignore
-const selectTextblockStart = () => _ref43 => {
+const selectTextblockStart = () => _ref46 => {
   let {
     state,
     dispatch
-  } = _ref43;
+  } = _ref46;
   return selectTextblockStart$1(state, dispatch);
 };
 function createDocument(content, schema) {
@@ -19767,12 +19837,12 @@ function createDocument(content, schema) {
 const setContent = function (content) {
   let emitUpdate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   let parseOptions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  return _ref44 => {
+  return _ref47 => {
     let {
       tr,
       editor,
       dispatch
-    } = _ref44;
+    } = _ref47;
     const {
       doc
     } = tr;
@@ -19783,6 +19853,32 @@ const setContent = function (content) {
     return true;
   };
 };
+function getMarkAttributes(state, typeOrName) {
+  const type = getMarkType(typeOrName, state.schema);
+  const {
+    from,
+    to,
+    empty
+  } = state.selection;
+  const marks = [];
+  if (empty) {
+    if (state.storedMarks) {
+      marks.push(...state.storedMarks);
+    }
+    marks.push(...state.selection.$head.marks());
+  } else {
+    state.doc.nodesBetween(from, to, node => {
+      marks.push(...node.marks);
+    });
+  }
+  const mark = marks.find(markItem => markItem.type.name === type.name);
+  if (!mark) {
+    return {};
+  }
+  return {
+    ...mark.attrs
+  };
+}
 
 /**
  * Returns a new `Transform` based on all steps of the passed transactions.
@@ -19862,32 +19958,6 @@ function getText(node, options) {
   };
   return getTextBetween(node, range, options);
 }
-function getMarkAttributes(state, typeOrName) {
-  const type = getMarkType(typeOrName, state.schema);
-  const {
-    from,
-    to,
-    empty
-  } = state.selection;
-  const marks = [];
-  if (empty) {
-    if (state.storedMarks) {
-      marks.push(...state.storedMarks);
-    }
-    marks.push(...state.selection.$head.marks());
-  } else {
-    state.doc.nodesBetween(from, to, node => {
-      marks.push(...node.marks);
-    });
-  }
-  const mark = marks.find(markItem => markItem.type.name === type.name);
-  if (!mark) {
-    return {};
-  }
-  return {
-    ...mark.attrs
-  };
-}
 function getNodeAttributes(state, typeOrName) {
   const type = getNodeType(typeOrName, state.schema);
   const {
@@ -19978,11 +20048,11 @@ function getChangedRanges(transform) {
         });
       });
     }
-    ranges.forEach(_ref45 => {
+    ranges.forEach(_ref48 => {
       let {
         from,
         to
-      } = _ref45;
+      } = _ref48;
       const newStart = mapping.slice(index).map(from, -1);
       const newEnd = mapping.slice(index).map(to);
       const oldStart = mapping.invert().map(newStart, -1);
@@ -20028,8 +20098,8 @@ function getMarksBetween(from, to, doc) {
   return marks;
 }
 function getSplittedAttributes(extensionAttributes, typeName, attributes) {
-  return Object.fromEntries(Object.entries(attributes).filter(_ref46 => {
-    let [name] = _ref46;
+  return Object.fromEntries(Object.entries(attributes).filter(_ref49 => {
+    let [name] = _ref49;
     const extensionAttribute = extensionAttributes.find(item => {
       return item.type === typeName && item.name === name;
     });
@@ -20058,11 +20128,11 @@ function isMarkActive(state, typeOrName) {
   }
   let selectionRange = 0;
   const markRanges = [];
-  ranges.forEach(_ref47 => {
+  ranges.forEach(_ref50 => {
     let {
       $from,
       $to
-    } = _ref47;
+    } = _ref50;
     const from = $from.pos;
     const to = $to.pos;
     state.doc.nodesBetween(from, to, (node, pos) => {
@@ -20161,11 +20231,11 @@ function canSetMark(state, tr, newMarkType) {
   const {
     ranges
   } = selection;
-  return ranges.some(_ref48 => {
+  return ranges.some(_ref51 => {
     let {
       $from,
       $to
-    } = _ref48;
+    } = _ref51;
     let someNodeSupportsMark = $from.depth === 0 ? state.doc.inlineContent && state.doc.type.allowsMarkType(newMarkType) : false;
     state.doc.nodesBetween($from.pos, $to.pos, (node, _pos, parent) => {
       // If we already found a mark that we can enable, return false to bypass the remaining search
@@ -20184,12 +20254,12 @@ function canSetMark(state, tr, newMarkType) {
 }
 const setMark = function (typeOrName) {
   let attributes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return _ref49 => {
+  return _ref52 => {
     let {
       tr,
       state,
       dispatch
-    } = _ref49;
+    } = _ref52;
     const {
       selection
     } = tr;
@@ -20235,21 +20305,21 @@ const setMark = function (typeOrName) {
     return canSetMark(state, tr, type);
   };
 };
-const setMeta = (key, value) => _ref50 => {
+const setMeta = (key, value) => _ref53 => {
   let {
     tr
-  } = _ref50;
+  } = _ref53;
   tr.setMeta(key, value);
   return true;
 };
 const setNode = function (typeOrName) {
   let attributes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return _ref51 => {
+  return _ref54 => {
     let {
       state,
       dispatch,
       chain
-    } = _ref51;
+    } = _ref54;
     const type = getNodeType(typeOrName, state.schema);
     // TODO: use a fallback like insertContent?
     if (!type.isTextblock) {
@@ -20258,28 +20328,28 @@ const setNode = function (typeOrName) {
     }
     return chain()
     // try to convert node to default node if needed
-    .command(_ref52 => {
+    .command(_ref55 => {
       let {
         commands
-      } = _ref52;
+      } = _ref55;
       const canSetBlock = setBlockType(type, attributes)(state);
       if (canSetBlock) {
         return true;
       }
       return commands.clearNodes();
-    }).command(_ref53 => {
+    }).command(_ref56 => {
       let {
         state: updatedState
-      } = _ref53;
+      } = _ref56;
       return setBlockType(type, attributes)(updatedState, dispatch);
     }).run();
   };
 };
-const setNodeSelection = position => _ref54 => {
+const setNodeSelection = position => _ref57 => {
   let {
     tr,
     dispatch
-  } = _ref54;
+  } = _ref57;
   if (dispatch) {
     const {
       doc
@@ -20290,11 +20360,11 @@ const setNodeSelection = position => _ref54 => {
   }
   return true;
 };
-const setTextSelection = position => _ref55 => {
+const setTextSelection = position => _ref58 => {
   let {
     tr,
     dispatch
-  } = _ref55;
+  } = _ref58;
   if (dispatch) {
     const {
       doc
@@ -20315,11 +20385,11 @@ const setTextSelection = position => _ref55 => {
   }
   return true;
 };
-const sinkListItem = typeOrName => _ref56 => {
+const sinkListItem = typeOrName => _ref59 => {
   let {
     state,
     dispatch
-  } = _ref56;
+  } = _ref59;
   const type = getNodeType(typeOrName, state.schema);
   return sinkListItem$1(type)(state, dispatch);
 };
@@ -20334,13 +20404,13 @@ const splitBlock = function () {
   let {
     keepMarks = true
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return _ref57 => {
+  return _ref60 => {
     let {
       tr,
       state,
       dispatch,
       editor
-    } = _ref57;
+    } = _ref60;
     const {
       selection,
       doc
@@ -20404,13 +20474,13 @@ const splitBlock = function () {
     return true;
   };
 };
-const splitListItem = typeOrName => _ref58 => {
+const splitListItem = typeOrName => _ref61 => {
   let {
     tr,
     state,
     dispatch,
     editor
-  } = _ref58;
+  } = _ref61;
   var _a;
   const type = getNodeType(typeOrName, state.schema);
   const {
@@ -20539,7 +20609,7 @@ const joinListForwards = (tr, listType) => {
 };
 const toggleList = function (listTypeOrName, itemTypeOrName, keepMarks) {
   let attributes = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
-  return _ref59 => {
+  return _ref62 => {
     let {
       editor,
       tr,
@@ -20548,7 +20618,7 @@ const toggleList = function (listTypeOrName, itemTypeOrName, keepMarks) {
       chain,
       commands,
       can
-    } = _ref59;
+    } = _ref62;
     const {
       extensions,
       splittableMarks
@@ -20609,11 +20679,11 @@ const toggleList = function (listTypeOrName, itemTypeOrName, keepMarks) {
 const toggleMark = function (typeOrName) {
   let attributes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  return _ref60 => {
+  return _ref63 => {
     let {
       state,
       commands
-    } = _ref60;
+    } = _ref63;
     const {
       extendEmptyMarkRange = false
     } = options;
@@ -20629,11 +20699,11 @@ const toggleMark = function (typeOrName) {
 };
 const toggleNode = function (typeOrName, toggleTypeOrName) {
   let attributes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  return _ref61 => {
+  return _ref64 => {
     let {
       state,
       commands
-    } = _ref61;
+    } = _ref64;
     const type = getNodeType(typeOrName, state.schema);
     const toggleType = getNodeType(toggleTypeOrName, state.schema);
     const isActive = isNodeActive(state, type, attributes);
@@ -20645,11 +20715,11 @@ const toggleNode = function (typeOrName, toggleTypeOrName) {
 };
 const toggleWrap = function (typeOrName) {
   let attributes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return _ref62 => {
+  return _ref65 => {
     let {
       state,
       commands
-    } = _ref62;
+    } = _ref65;
     const type = getNodeType(typeOrName, state.schema);
     const isActive = isNodeActive(state, type, attributes);
     if (isActive) {
@@ -20658,11 +20728,11 @@ const toggleWrap = function (typeOrName) {
     return commands.wrapIn(type, attributes);
   };
 };
-const undoInputRule = () => _ref63 => {
+const undoInputRule = () => _ref66 => {
   let {
     state,
     dispatch
-  } = _ref63;
+  } = _ref66;
   const plugins = state.plugins;
   for (let i = 0; i < plugins.length; i += 1) {
     const plugin = plugins[i];
@@ -20688,11 +20758,11 @@ const undoInputRule = () => _ref63 => {
   }
   return false;
 };
-const unsetAllMarks = () => _ref64 => {
+const unsetAllMarks = () => _ref67 => {
   let {
     tr,
     dispatch
-  } = _ref64;
+  } = _ref67;
   const {
     selection
   } = tr;
@@ -20712,12 +20782,12 @@ const unsetAllMarks = () => _ref64 => {
 };
 const unsetMark = function (typeOrName) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return _ref65 => {
+  return _ref68 => {
     let {
       tr,
       state,
       dispatch
-    } = _ref65;
+    } = _ref68;
     var _a;
     const {
       extendEmptyMarkRange = false
@@ -20757,12 +20827,12 @@ const unsetMark = function (typeOrName) {
 };
 const updateAttributes = function (typeOrName) {
   let attributes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return _ref66 => {
+  return _ref69 => {
     let {
       tr,
       state,
       dispatch
-    } = _ref66;
+    } = _ref69;
     let nodeType = null;
     let markType = null;
     const schemaType = getSchemaTypeNameByName(typeof typeOrName === 'string' ? typeOrName : typeOrName.name, state.schema);
@@ -20806,22 +20876,22 @@ const updateAttributes = function (typeOrName) {
 };
 const wrapIn = function (typeOrName) {
   let attributes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return _ref67 => {
+  return _ref70 => {
     let {
       state,
       dispatch
-    } = _ref67;
+    } = _ref70;
     const type = getNodeType(typeOrName, state.schema);
     return wrapIn$1(type, attributes)(state, dispatch);
   };
 };
 const wrapInList = function (typeOrName) {
   let attributes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return _ref68 => {
+  return _ref71 => {
     let {
       state,
       dispatch
-    } = _ref68;
+    } = _ref71;
     const type = getNodeType(typeOrName, state.schema);
     return wrapInList$1(type, attributes)(state, dispatch);
   };
@@ -20833,6 +20903,7 @@ var commands = /*#__PURE__*/Object.freeze({
   clearNodes: clearNodes,
   command: command,
   createParagraphNear: createParagraphNear,
+  cut: cut,
   deleteCurrentNode: deleteCurrentNode,
   deleteNode: deleteNode,
   deleteRange: deleteRange,
@@ -20849,6 +20920,8 @@ var commands = /*#__PURE__*/Object.freeze({
   joinDown: joinDown,
   joinBackward: joinBackward,
   joinForward: joinForward,
+  joinItemBackward: joinItemBackward,
+  joinItemForward: joinItemForward,
   keyboardShortcut: keyboardShortcut,
   lift: lift,
   liftEmptyBlock: liftEmptyBlock,
@@ -20935,16 +21008,16 @@ const FocusEvents = Extension.create({
 const Keymap = Extension.create({
   name: 'keymap',
   addKeyboardShortcuts() {
-    const handleBackspace = () => this.editor.commands.first(_ref69 => {
+    const handleBackspace = () => this.editor.commands.first(_ref72 => {
       let {
         commands
-      } = _ref69;
+      } = _ref72;
       return [() => commands.undoInputRule(),
       // maybe convert first text block node to default node
-      () => commands.command(_ref70 => {
+      () => commands.command(_ref73 => {
         let {
           tr
-        } = _ref70;
+        } = _ref73;
         const {
           selection,
           doc
@@ -20957,23 +21030,26 @@ const Keymap = Extension.create({
           pos,
           parent
         } = $anchor;
-        const isAtStart = Selection.atStart(doc).from === pos;
+        const $parentPos = $anchor.parent.isTextblock ? tr.doc.resolve(pos - 1) : $anchor;
+        const parentIsIsolating = $parentPos.parent.type.spec.isolating;
+        const parentPos = $anchor.pos - $anchor.parentOffset;
+        const isAtStart = parentIsIsolating && $parentPos.parent.childCount === 1 ? parentPos === $anchor.pos : Selection.atStart(doc).from === pos;
         if (!empty || !isAtStart || !parent.type.isTextblock || parent.textContent.length) {
           return false;
         }
         return commands.clearNodes();
       }), () => commands.deleteSelection(), () => commands.joinBackward(), () => commands.selectNodeBackward()];
     });
-    const handleDelete = () => this.editor.commands.first(_ref71 => {
+    const handleDelete = () => this.editor.commands.first(_ref74 => {
       let {
         commands
-      } = _ref71;
+      } = _ref74;
       return [() => commands.deleteSelection(), () => commands.deleteCurrentNode(), () => commands.joinForward(), () => commands.selectNodeForward()];
     });
-    const handleEnter = () => this.editor.commands.first(_ref72 => {
+    const handleEnter = () => this.editor.commands.first(_ref75 => {
       let {
         commands
-      } = _ref72;
+      } = _ref75;
       return [() => commands.newlineInCode(), () => commands.createParagraphNear(), () => commands.liftEmptyBlock(), () => commands.splitBlock()];
     });
     const baseKeymap = {
@@ -21151,8 +21227,8 @@ img.ProseMirror-separator {
 .tippy-box[data-animation=fade][data-state=hidden] {
   opacity: 0
 }`;
-function createStyleTag(style, nonce) {
-  const tiptapStyleTag = document.querySelector('style[data-tiptap-style]');
+function createStyleTag(style, nonce, suffix) {
+  const tiptapStyleTag = document.querySelector(`style[data-tiptap-style${suffix ? `-${suffix}` : ''}]`);
   if (tiptapStyleTag !== null) {
     return tiptapStyleTag;
   }
@@ -21160,7 +21236,7 @@ function createStyleTag(style, nonce) {
   if (nonce) {
     styleNode.setAttribute('nonce', nonce);
   }
-  styleNode.setAttribute('data-tiptap-style', '');
+  styleNode.setAttribute(`data-tiptap-style${suffix ? `-${suffix}` : ''}`, '');
   styleNode.innerHTML = style;
   document.getElementsByTagName('head')[0].appendChild(styleNode);
   return styleNode;
@@ -21378,6 +21454,7 @@ class Editor extends EventEmitter {
     });
     this.view.updateState(newState);
     this.createNodeViews();
+    this.prependClass();
     // Let’s store the editor instance in the DOM element.
     // So we’ll have access to it for tests.
     const dom = this.view.dom;
@@ -21391,6 +21468,12 @@ class Editor extends EventEmitter {
       nodeViews: this.extensionManager.nodeViews
     });
   }
+  /**
+   * Prepend class name to element.
+   */
+  prependClass() {
+    this.view.dom.className = `tiptap ${this.view.dom.className}`;
+  }
   captureTransaction(fn) {
     this.isCapturingTransaction = true;
     fn();
@@ -21539,12 +21622,12 @@ class Editor extends EventEmitter {
 function markInputRule(config) {
   return new InputRule({
     find: config.find,
-    handler: _ref73 => {
+    handler: _ref76 => {
       let {
         state,
         range,
         match
-      } = _ref73;
+      } = _ref76;
       const attributes = callOrReturn(config.getAttributes, undefined, match);
       if (attributes === false || attributes === null) {
         return null;
@@ -21554,7 +21637,6 @@ function markInputRule(config) {
       } = state;
       const captureGroup = match[match.length - 1];
       const fullMatch = match[0];
-      let markEnd = range.to;
       if (captureGroup) {
         const startSpaces = fullMatch.search(/\S/);
         const textStart = range.from + fullMatch.indexOf(captureGroup);
@@ -21573,7 +21655,7 @@ function markInputRule(config) {
         if (textStart > range.from) {
           tr.delete(range.from + startSpaces, textStart);
         }
-        markEnd = range.from + startSpaces + captureGroup.length;
+        const markEnd = range.from + startSpaces + captureGroup.length;
         tr.addMark(range.from + startSpaces, markEnd, config.type.create(attributes || {}));
         tr.removeStoredMark(config.type);
       }
@@ -21588,18 +21670,19 @@ function markInputRule(config) {
 function nodeInputRule(config) {
   return new InputRule({
     find: config.find,
-    handler: _ref74 => {
+    handler: _ref77 => {
       let {
         state,
         range,
         match
-      } = _ref74;
+      } = _ref77;
       const attributes = callOrReturn(config.getAttributes, undefined, match) || {};
       const {
         tr
       } = state;
       const start = range.from;
       let end = range.to;
+      const newNode = config.type.create(attributes);
       if (match[1]) {
         const offset = match[0].lastIndexOf(match[1]);
         let matchStart = start + offset;
@@ -21612,10 +21695,11 @@ function nodeInputRule(config) {
         const lastChar = match[0][match[0].length - 1];
         tr.insertText(lastChar, start + match[0].length - 1);
         // insert node from input rule
-        tr.replaceWith(matchStart, end, config.type.create(attributes));
+        tr.replaceWith(matchStart, end, newNode);
       } else if (match[0]) {
-        tr.replaceWith(start, end, config.type.create(attributes));
+        tr.insert(start - 1, config.type.create(attributes)).delete(tr.mapping.map(start), tr.mapping.map(end));
       }
+      tr.scrollIntoView();
     }
   });
 }
@@ -21629,12 +21713,12 @@ function nodeInputRule(config) {
 function textblockTypeInputRule(config) {
   return new InputRule({
     find: config.find,
-    handler: _ref75 => {
+    handler: _ref78 => {
       let {
         state,
         range,
         match
-      } = _ref75;
+      } = _ref78;
       const $start = state.doc.resolve(range.from);
       const attributes = callOrReturn(config.getAttributes, undefined, match) || {};
       if (!$start.node(-1).canReplaceWith($start.index(-1), $start.indexAfter(-1), config.type)) {
@@ -21662,13 +21746,13 @@ function textblockTypeInputRule(config) {
 function wrappingInputRule(config) {
   return new InputRule({
     find: config.find,
-    handler: _ref77 => {
+    handler: _ref80 => {
       let {
         state,
         range,
         match,
         chain
-      } = _ref77;
+      } = _ref80;
       const attributes = callOrReturn(config.getAttributes, undefined, match) || {};
       const tr = state.tr.delete(range.from, range.to);
       const $start = tr.doc.resolve(range.from);
@@ -21769,11 +21853,11 @@ class Mark {
     }));
     return extension;
   }
-  static handleExit(_ref78) {
+  static handleExit(_ref81) {
     let {
       editor,
       mark
-    } = _ref78;
+    } = _ref81;
     const {
       tr
     } = editor.state;
@@ -21870,13 +21954,14 @@ class Node {
 function markPasteRule(config) {
   return new PasteRule({
     find: config.find,
-    handler: _ref80 => {
+    handler: _ref83 => {
       let {
         state,
         range,
-        match
-      } = _ref80;
-      const attributes = callOrReturn(config.getAttributes, undefined, match);
+        match,
+        pasteEvent
+      } = _ref83;
+      const attributes = callOrReturn(config.getAttributes, undefined, match, pasteEvent);
       if (attributes === false || attributes === null) {
         return null;
       }
@@ -21954,7 +22039,9 @@ const ListItem$2 = Node.create({
   name: 'listItem',
   addOptions() {
     return {
-      HTMLAttributes: {}
+      HTMLAttributes: {},
+      bulletListTypeName: 'bulletList',
+      orderedListTypeName: 'orderedList'
     };
   },
   content: 'paragraph block*',
@@ -22093,7 +22180,9 @@ const ListItem$1 = Node.create({
   name: 'listItem',
   addOptions() {
     return {
-      HTMLAttributes: {}
+      HTMLAttributes: {},
+      bulletListTypeName: 'bulletList',
+      orderedListTypeName: 'orderedList'
     };
   },
   content: 'paragraph block*',
@@ -22122,7 +22211,9 @@ const ListItem = Node.create({
   name: 'listItem',
   addOptions() {
     return {
-      HTMLAttributes: {}
+      HTMLAttributes: {},
+      bulletListTypeName: 'bulletList',
+      orderedListTypeName: 'orderedList'
     };
   },
   content: 'paragraph block*',
@@ -22328,9 +22419,13 @@ const Strike = Mark.create({
     };
   },
   addKeyboardShortcuts() {
-    return {
-      'Mod-Shift-x': () => this.editor.commands.toggleStrike()
-    };
+    const shortcuts = {};
+    if (isMacOS()) {
+      shortcuts['Mod-Shift-s'] = () => this.editor.commands.toggleStrike();
+    } else {
+      shortcuts['Ctrl-Shift-s'] = () => this.editor.commands.toggleStrike();
+    }
+    return shortcuts;
   },
   addInputRules() {
     return [markInputRule({
@@ -24585,30 +24680,6 @@ function find(str, type, opts) {
   return filtered;
 }
 
-/**
- * Is the given string valid linkable text of some sort. Note that this does not
- * trim the text for you.
- *
- * Optionally pass in a second `type` param, which is the type of link to test
- * for.
- *
- * For example,
- *
- *     linkify.test(str, 'email');
- *
- * Returns `true` if str is a valid email.
- * @param {string} str string to test for links
- * @param {string} [type] optional specific link type to look for
- * @returns boolean true/false
- */
-function test(str, type) {
-  if (type === void 0) {
-    type = null;
-  }
-  const tokens = tokenize(str);
-  return tokens.length === 1 && tokens[0].isLink && (!type || tokens[0].t === type);
-}
-
 function autolink(options) {
   return new Plugin({
     key: new PluginKey('autolink'),
@@ -24622,44 +24693,21 @@ function autolink(options) {
         tr
       } = newState;
       const transform = combineTransactionSteps(oldState.doc, [...transactions]);
-      const {
-        mapping
-      } = transform;
       const changes = getChangedRanges(transform);
       changes.forEach(_ref => {
         let {
-          oldRange,
           newRange
         } = _ref;
-        // at first we check if we have to remove links
-        getMarksBetween(oldRange.from, oldRange.to, oldState.doc).filter(item => item.mark.type === options.type).forEach(oldMark => {
-          const newFrom = mapping.map(oldMark.from);
-          const newTo = mapping.map(oldMark.to);
-          const newMarks = getMarksBetween(newFrom, newTo, newState.doc).filter(item => item.mark.type === options.type);
-          if (!newMarks.length) {
-            return;
-          }
-          const newMark = newMarks[0];
-          const oldLinkText = oldState.doc.textBetween(oldMark.from, oldMark.to, undefined, ' ');
-          const newLinkText = newState.doc.textBetween(newMark.from, newMark.to, undefined, ' ');
-          const wasLink = test(oldLinkText);
-          const isLink = test(newLinkText);
-          // remove only the link, if it was a link before too
-          // because we don’t want to remove links that were set manually
-          if (wasLink && !isLink) {
-            tr.removeMark(newMark.from, newMark.to, options.type);
-          }
-        });
-        // now let’s see if we can add new links
+        // Now let’s see if we can add new links.
         const nodesInChangedRanges = findChildrenInRange(newState.doc, newRange, node => node.isTextblock);
         let textBlock;
         let textBeforeWhitespace;
         if (nodesInChangedRanges.length > 1) {
-          // Grab the first node within the changed ranges (ex. the first of two paragraphs when hitting enter)
+          // Grab the first node within the changed ranges (ex. the first of two paragraphs when hitting enter).
           textBlock = nodesInChangedRanges[0];
           textBeforeWhitespace = newState.doc.textBetween(textBlock.pos, textBlock.pos + textBlock.node.nodeSize, undefined, ' ');
         } else if (nodesInChangedRanges.length
-        // We want to make sure to include the block seperator argument to treat hard breaks like spaces
+        // We want to make sure to include the block seperator argument to treat hard breaks like spaces.
         && newState.doc.textBetween(newRange.from, newRange.to, ' ', ' ').endsWith(' ')) {
           textBlock = nodesInChangedRanges[0];
           textBeforeWhitespace = newState.doc.textBetween(textBlock.pos, newRange.to, undefined, ' ');
@@ -24674,20 +24722,32 @@ function autolink(options) {
           if (!lastWordBeforeSpace) {
             return false;
           }
-          find(lastWordBeforeSpace).filter(link => link.isLink).filter(link => {
-            if (options.validate) {
-              return options.validate(link.value);
-            }
-            return true;
-          })
-          // calculate link position
+          find(lastWordBeforeSpace).filter(link => link.isLink)
+          // Calculate link position.
           .map(link => ({
             ...link,
             from: lastWordAndBlockOffset + link.start + 1,
             to: lastWordAndBlockOffset + link.end + 1
           }))
-          // add link mark
+          // ignore link inside code mark
+          .filter(link => {
+            if (!newState.schema.marks.code) {
+              return true;
+            }
+            return !newState.doc.rangeHasMark(link.from, link.to, newState.schema.marks.code);
+          })
+          // validate link
+          .filter(link => {
+            if (options.validate) {
+              return options.validate(link.value);
+            }
+            return true;
+          })
+          // Add link mark.
           .forEach(link => {
+            if (getMarksBetween(link.from, link.to, newState.doc).some(item => item.mark.type === options.type)) {
+              return;
+            }
             tr.addMark(link.from, link.to, options.type.create({
               href: link.href
             }));
@@ -24706,16 +24766,22 @@ function clickHandler(options) {
     key: new PluginKey('handleClickLink'),
     props: {
       handleClick: (view, pos, event) => {
-        var _a, _b, _c;
+        var _a, _b;
         if (event.button !== 0) {
           return false;
         }
+        const eventTarget = event.target;
+        if (eventTarget.nodeName !== 'A') {
+          return false;
+        }
         const attrs = getAttributes(view.state, options.type.name);
-        const link = (_a = event.target) === null || _a === void 0 ? void 0 : _a.closest('a');
-        const href = (_b = link === null || link === void 0 ? void 0 : link.href) !== null && _b !== void 0 ? _b : attrs.href;
-        const target = (_c = link === null || link === void 0 ? void 0 : link.target) !== null && _c !== void 0 ? _c : attrs.target;
+        const link = event.target;
+        const href = (_a = link === null || link === void 0 ? void 0 : link.href) !== null && _a !== void 0 ? _a : attrs.href;
+        const target = (_b = link === null || link === void 0 ? void 0 : link.target) !== null && _b !== void 0 ? _b : attrs.target;
         if (link && href) {
-          window.open(href, target);
+          if (view.editable) {
+            window.open(href, target);
+          }
           return true;
         }
         return false;
@@ -24723,39 +24789,6 @@ function clickHandler(options) {
     }
   });
 }
-function pasteHandler(options) {
-  return new Plugin({
-    key: new PluginKey('handlePasteLink'),
-    props: {
-      handlePaste: (view, event, slice) => {
-        const {
-          state
-        } = view;
-        const {
-          selection
-        } = state;
-        const {
-          empty
-        } = selection;
-        if (empty) {
-          return false;
-        }
-        let textContent = '';
-        slice.content.forEach(node => {
-          textContent += node.textContent;
-        });
-        const link = find(textContent).find(item => item.isLink && item.value === textContent);
-        if (!textContent || !link) {
-          return false;
-        }
-        options.editor.commands.setMark(options.type, {
-          href: link.href
-        });
-        return true;
-      }
-    }
-  });
-}
 const Link = Mark.create({
   name: 'link',
   priority: 1000,
@@ -24797,6 +24830,9 @@ const Link = Mark.create({
       target: {
         default: this.options.HTMLAttributes.target
       },
+      rel: {
+        default: this.options.HTMLAttributes.rel
+      },
       class: {
         default: this.options.HTMLAttributes.class
       }
@@ -24852,10 +24888,18 @@ const Link = Mark.create({
         data: link
       })),
       type: this.type,
-      getAttributes: match => {
-        var _a;
+      getAttributes: (match, pasteEvent) => {
+        var _a, _b;
+        const html = (_a = pasteEvent.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text/html');
+        const hrefRegex = /href="([^"]*)"/;
+        const existingLink = html === null || html === void 0 ? void 0 : html.match(hrefRegex);
+        if (existingLink) {
+          return {
+            href: existingLink[1]
+          };
+        }
         return {
-          href: (_a = match.data) === null || _a === void 0 ? void 0 : _a.href
+          href: (_b = match.data) === null || _b === void 0 ? void 0 : _b.href
         };
       }
     })];
@@ -24873,12 +24917,6 @@ const Link = Mark.create({
         type: this.type
       }));
     }
-    if (this.options.linkOnPaste) {
-      plugins.push(pasteHandler({
-        editor: this.editor,
-        type: this.type
-      }));
-    }
     return plugins;
   }
 });
@@ -25142,16 +25180,17 @@ const OrRichTextEditor = [
 // Spacing
 'gap-xs',
 // Box
-'max-h-full'];
+'max-h-full', 'w-full'];
 const EditorContainer = [
 // Layout
 'layout-column',
-// Theme (focus)
-'focus-within:theme-background-primary-translucent-1', 'dark:focus-within:theme-background-primary-translucent-1-dark', 'focus-within:theme-border-1-primary', 'dark:focus-within:theme-border-1-primary-dark', 'focus-within:theme-outline-2-primary', 'dark:focus-within:theme-outline-2-primary-dark',
 // Theme (invalid)
 'invalid:theme-background-error-translucent-1', 'dark:invalid:theme-background-error-translucent-1-dark', 'invalid:theme-foreground-default', 'dark:invalid:theme-foreground-default-dark', 'invalid:theme-border-1-error', 'dark:invalid:theme-border-1-error-dark', 'invalid:theme-outline-2-transparent', 'dark:invalid:theme-outline-2-transparent',
 // Box
 'border-1', 'rounded-md', 'w-full', 'overflow-hidden', 'grow'];
+const EditorContainerFocus = [
+// Theme (focus)
+'focus-within:theme-background-primary-translucent-1', 'dark:focus-within:theme-background-primary-translucent-1-dark', 'focus-within:theme-border-1-primary', 'dark:focus-within:theme-border-1-primary-dark', 'focus-within:theme-outline-2-primary', 'dark:focus-within:theme-outline-2-primary-dark'];
 const ToolbarContainer = [
 // Layout
 'layout-row',
@@ -25182,6 +25221,251 @@ const EditorInput = [
 // Typography
 'typography-body-2-regular'];
 
+var script$1 = defineComponent({
+  components: {
+    OrIconButton: script$2,
+    OrMenuItem: script$3,
+    OrMenu: script$4,
+    OrPopover: script$5
+  },
+  props: {
+    toolbar: {
+      type: Array,
+      default: () => []
+    },
+    isFocused: {
+      type: Boolean,
+      default: false
+    },
+    countOfNotVisibleTools: {
+      type: Number,
+      default: 0
+    },
+    activeHeadingLevel: {
+      type: Number,
+      default: 0
+    },
+    isActive: {
+      type: Object,
+      default: () => ({})
+    },
+    headingLevels: {
+      type: Array,
+      default: () => [1, 2, 3, 4]
+    }
+  },
+  emits: ['click-tool'],
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
+    const toolbarRef = ref();
+    const moreButtonRef = ref();
+    const moreRef = ref();
+    const toolbarButtonRef = ref();
+    const menuRef = ref();
+    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'
+    });
+    const notVisibleTools = computed(() => {
+      const count = props.countOfNotVisibleTools;
+      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;
+    });
+    const toolbarContainerStyles = computed(() => [...ToolbarContainer]);
+    const toolbarStyles = computed(() => [...Toolbar, ...(props.isFocused ? ToolbarButtonFocused : ToolbarButton)]);
+    const getIndexOfHeading = computed(() => {
+      return props.toolbar.flat().indexOf('heading');
+    });
+    const headingIcon = computed(() => {
+      if (props.activeHeadingLevel && props.isActive.heading) {
+        return `format_h${props.activeHeadingLevel}`;
+      }
+      return 'format_paragraph';
+    });
+    const isVisible = value => {
+      if (Array.isArray(value)) {
+        const isHaveNotVisibleTools = value.some(item => notVisibleTools.value.has(item));
+        return isHaveNotVisibleTools;
+      }
+      return !notVisibleTools.value.has(value);
+    };
+    const handleClick = (item, level) => {
+      emit('click-tool', {
+        item,
+        level
+      });
+    };
+    return {
+      toolbarRef,
+      moreButtonRef,
+      moreRef,
+      toolbarButtonRef,
+      menuRef,
+      toolbarContainerStyles,
+      toolbarStyles,
+      isVisible,
+      handleClick,
+      headingIcon,
+      getIndexOfHeading,
+      notVisibleTools,
+      iconsEnum,
+      iconTooltipsEnum
+    };
+  }
+});
+
+const _hoisted_1$1 = {
+  class: "flex p-sm gap-md"
+};
+function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_or_icon_button = resolveComponent("or-icon-button");
+  const _component_or_popover = resolveComponent("or-popover");
+  const _component_or_menu_item = resolveComponent("or-menu-item");
+  const _component_or_menu = resolveComponent("or-menu");
+  return openBlock(), createElementBlock("div", {
+    ref: "toolbarRef",
+    class: normalizeClass(_ctx.toolbarContainerStyles)
+  }, [(openBlock(true), createElementBlock(Fragment$1, null, renderList(_ctx.toolbar, (tools, index) => {
+    return openBlock(), createElementBlock("div", {
+      key: index,
+      class: normalizeClass([..._ctx.toolbarStyles, {
+        'hidden': _ctx.isVisible(tools)
+      }])
+    }, [(openBlock(true), createElementBlock(Fragment$1, null, renderList(tools, item => {
+      return openBlock(), createElementBlock("div", {
+        key: item,
+        class: normalizeClass(['flex gap-md', {
+          'hidden': !_ctx.isVisible(item)
+        }])
+      }, [item === 'heading' ? (openBlock(), createBlock(_component_or_icon_button, {
+        key: 0,
+        ref_for: true,
+        ref: "toolbarButtonRef",
+        selected: _ctx.isActive[item],
+        disabled: !_ctx.isFocused,
+        tooltip: {
+          content: item,
+          placement: 'top'
+        },
+        icon: {
+          icon: _ctx.headingIcon,
+          variant: 'inherit'
+        },
+        onClick: _cache[0] || (_cache[0] = $event => _ctx.menuRef && _ctx.menuRef.toggle())
+      }, null, 8 /* PROPS */, ["selected", "disabled", "tooltip", "icon"])) : _ctx.isVisible(item) ? (openBlock(), createBlock(_component_or_icon_button, {
+        key: 1,
+        tooltip: {
+          content: _ctx.iconTooltipsEnum[item],
+          placement: 'top'
+        },
+        selected: _ctx.isActive[item],
+        disabled: !_ctx.isFocused,
+        icon: {
+          icon: _ctx.iconsEnum[item],
+          variant: 'inherit'
+        },
+        onClick: $event => _ctx.handleClick(item)
+      }, null, 8 /* PROPS */, ["tooltip", "selected", "disabled", "icon", "onClick"])) : createCommentVNode("v-if", true)], 2 /* CLASS */);
+    }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */);
+  }), 128 /* KEYED_FRAGMENT */)), _ctx.countOfNotVisibleTools > 0 ? (openBlock(), createBlock(_component_or_icon_button, {
+    key: 0,
+    ref: "moreButtonRef",
+    disabled: !_ctx.isFocused,
+    icon: {
+      icon: 'more_horiz',
+      variant: 'inherit'
+    },
+    class: "px-sm",
+    onClick: _cache[1] || (_cache[1] = $event => _ctx.moreRef && _ctx.moreRef.open())
+  }, null, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true), _ctx.moreButtonRef ? (openBlock(), createBlock(_component_or_popover, {
+    key: 1,
+    ref: "moreRef",
+    trigger: _ctx.moreButtonRef && _ctx.moreButtonRef.root,
+    placement: "top-end"
+  }, {
+    default: withCtx(() => [createElementVNode("div", _hoisted_1$1, [(openBlock(true), createElementBlock(Fragment$1, null, renderList(_ctx.notVisibleTools, item => {
+      return openBlock(), createBlock(_component_or_icon_button, {
+        key: item,
+        tooltip: {
+          content: _ctx.iconTooltipsEnum[item],
+          placement: 'top'
+        },
+        selected: _ctx.isActive[item],
+        icon: {
+          icon: _ctx.iconsEnum[item],
+          variant: 'inherit'
+        },
+        onClick: $event => _ctx.handleClick(item)
+      }, null, 8 /* PROPS */, ["tooltip", "selected", "icon", "onClick"]);
+    }), 128 /* KEYED_FRAGMENT */))])]),
+
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["trigger"])) : createCommentVNode("v-if", true), _ctx.toolbarButtonRef ? (openBlock(), createBlock(_component_or_menu, {
+    key: 2,
+    ref: "menuRef",
+    trigger: _ctx.toolbarButtonRef[_ctx.getIndexOfHeading] && _ctx.toolbarButtonRef[_ctx.getIndexOfHeading].root,
+    placement: "bottom-start"
+  }, {
+    default: withCtx(() => [(openBlock(true), createElementBlock(Fragment$1, null, renderList(_ctx.headingLevels, heading => {
+      return openBlock(), createBlock(_component_or_menu_item, {
+        key: heading,
+        selected: _ctx.activeHeadingLevel === heading,
+        onClick: $event => _ctx.handleClick('heading', heading)
+      }, {
+        default: withCtx(() => [createTextVNode(" Heading " + toDisplayString(heading), 1 /* TEXT */)]),
+
+        _: 2 /* DYNAMIC */
+      }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["selected", "onClick"]);
+    }), 128 /* KEYED_FRAGMENT */)), createVNode(_component_or_menu_item, {
+      selected: !_ctx.activeHeadingLevel,
+      onClick: _cache[2] || (_cache[2] = $event => _ctx.handleClick('heading'))
+    }, {
+      default: withCtx(() => [createTextVNode(" None ")]),
+      _: 1 /* STABLE */
+    }, 8 /* PROPS */, ["selected"])]),
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["trigger"])) : createCommentVNode("v-if", true)], 2 /* CLASS */);
+}
+
+script$1.render = render$1;
+script$1.__file = "src/components/or-rich-text-editor-v3/partials/EditorToolbar.vue";
+
 var Formats;
 (function (Formats) {
   Formats["Markdown"] = "markdown";
@@ -26449,8 +26733,11 @@ const History = Extension.create({
   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()
@@ -26481,11 +26768,23 @@ const HorizontalRule = Node.create({
     return {
       setHorizontalRule: () => _ref2 => {
         let {
-          chain
+          chain,
+          state
         } = _ref2;
-        return chain().insertContent({
-          type: this.name
-        })
+        const {
+          $to: $originTo
+        } = state.selection;
+        const currentChain = chain();
+        if ($originTo.parentOffset === 0) {
+          currentChain.insertContentAt(Math.max($originTo.pos - 2, 0), {
+            type: this.name
+          });
+        } else {
+          currentChain.insertContent({
+            type: this.name
+          });
+        }
+        return currentChain
         // set cursor after horizontal rule
         .command(_ref3 => {
           let {
@@ -26499,13 +26798,19 @@ const HorizontalRule = Node.create({
             } = tr.selection;
             const posAfter = $to.end();
             if ($to.nodeAfter) {
-              tr.setSelection(TextSelection.create(tr.doc, $to.pos));
+              if ($to.nodeAfter.isTextblock) {
+                tr.setSelection(TextSelection.create(tr.doc, $to.pos + 1));
+              } else if ($to.nodeAfter.isBlock) {
+                tr.setSelection(NodeSelection.create(tr.doc, $to.pos));
+              } else {
+                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.setSelection(TextSelection.create(tr.doc, posAfter + 1));
               }
             }
             tr.scrollIntoView();
@@ -27003,16 +27308,13 @@ var codemirrorNode = Node.create({
 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,
-    OrPopover: script$8,
+    OrModal: script$6,
+    OrInput: script$7,
+    OrButton: script$8,
     OrHint: script$9,
-    OrError: script$a
+    OrError: script$a,
+    OrLabel: script$b,
+    EditorToolbar: script$1
   },
   model: {
     prop: 'modelValue',
@@ -27058,6 +27360,10 @@ var script = defineComponent({
     error: {
       type: [String, Boolean],
       default: undefined
+    },
+    readonly: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['update:modelValue', 'input', 'file-upload'],
@@ -27069,11 +27375,7 @@ var script = defineComponent({
     const editorRef = ref();
     const textareaRef = ref();
     const containerRef = ref();
-    const toolbarRef = ref();
-    const moreButtonRef = ref();
-    const moreRef = ref();
-    const toolbarButtonRef = ref();
-    const menuRef = ref();
+    const toolbarContainerRef = ref();
     // isActive should be set with default values for all toolbar buttons, otherwise it will not work in vue2
     const isActive = ref({
       bold: false,
@@ -27091,7 +27393,7 @@ var script = defineComponent({
       file: false,
       source: false
     });
-    const isFocused = ref(props.autofocus);
+    const isFocused = ref(!props.readonly ? props.autofocus : false);
     const headingLevels = [1, 2, 3, 4];
     const activeHeadingLevel = ref(0);
     const markdownOutput = ref('');
@@ -27106,49 +27408,19 @@ var script = defineComponent({
       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) {
+      const toolbarLength = props.toolbar.flat().length;
+      if (containerRef.value && toolbarContainerRef.value && toolbarLength) {
         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 toolbarRef = toolbarContainerRef.value.$refs.toolbarRef;
+        lengthOfItem = ((_b = (_a = toolbarRef === null || toolbarRef === void 0 ? void 0 : toolbarRef.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);
+        countOfNotVisibleTools.value = Math.round(toolbarLength - count);
       }
     }, 10));
     onMounted(() => {
@@ -27180,7 +27452,8 @@ var script = defineComponent({
           }
         },
         element: editorRef.value,
-        autofocus: props.autofocus,
+        autofocus: !props.readonly ? props.autofocus : false,
+        editable: !props.readonly,
         enableInputRules: true,
         enablePasteRules: true,
         extensions: [codemirrorNode, StarterKit.configure({
@@ -27261,43 +27534,15 @@ var script = defineComponent({
         context.emit('update:modelValue', value);
       }
     });
-    const getIndexOfHeading = computed(() => {
-      return props.toolbar.flat().indexOf('heading');
-    });
-    const headingIcon = computed(() => {
-      if (activeHeadingLevel.value && isActive.value.heading) {
-        return `format_h${activeHeadingLevel.value}`;
-      }
-      return 'format_paragraph';
-    });
-    const toolbarLength = computed(() => {
-      return props.toolbar.flat().length;
-    });
-    const notVisibleTools = computed(() => {
-      const count = countOfNotVisibleTools.value;
-      const toolbar = props.toolbar.flat();
-      let notVisible = new Set(toolbar.slice(toolbar.length - count, toolbar.length));
-      props.toolbar.forEach(tools => {
-        if (tools.some(item => notVisible.has(item))) {
-          tools.forEach(item => notVisible.add(item));
-        }
-      });
-      return notVisible;
-    });
     //Methods
     const handleEditorClick = () => {
       var _a;
       setActiveFormats();
-      isFocused.value = true;
-      editor === null || editor === void 0 ? void 0 : editor.commands.focus();
-      activeHeadingLevel.value = ((_a = editor === null || editor === void 0 ? void 0 : editor.getAttributes('heading')) === null || _a === void 0 ? void 0 : _a.level) || 0;
-    };
-    const isVisible = value => {
-      if (Array.isArray(value)) {
-        const isHaveNotVisibleTools = value.some(item => notVisibleTools.value.has(item));
-        return isHaveNotVisibleTools;
+      if (!props.readonly) {
+        isFocused.value = true;
+        editor === null || editor === void 0 ? void 0 : editor.commands.focus();
       }
-      return !notVisibleTools.value.has(value);
+      activeHeadingLevel.value = ((_a = editor === null || editor === void 0 ? void 0 : editor.getAttributes('heading')) === null || _a === void 0 ? void 0 : _a.level) || 0;
     };
     const handleInput = event => {
       const target = event.target;
@@ -27306,7 +27551,11 @@ var script = defineComponent({
       markdownOutput.value = serialize(editor === null || editor === void 0 ? void 0 : editor.schema, editor === null || editor === void 0 ? void 0 : editor.getJSON());
       proxyModelValue.value = markdownOutput.value;
     };
-    const handleToolbarClick = (item, level) => {
+    const handleToolbarClick = _ref4 => {
+      let {
+        item,
+        level
+      } = _ref4;
       var _a, _b, _c, _d;
       switch (item) {
         case 'source':
@@ -27386,10 +27635,10 @@ var script = defineComponent({
         editor === null || editor === void 0 ? void 0 : editor.chain().focus().setMark('link', {
           href: link.value,
           target: '__blank'
-        }).command(_ref4 => {
+        }).command(_ref5 => {
           let {
             tr
-          } = _ref4;
+          } = _ref5;
           const preparedValue = text.value[text.value.length - 1] === ' ' ? text.value : `${text.value} `;
           tr.insertText(preparedValue);
           return true;
@@ -27425,11 +27674,7 @@ var script = defineComponent({
     };
     // Styles
     const rootStyles = computed(() => ['or-rich-text-editor-v3', ...OrRichTextEditor]);
-    const containerStyles = computed(() => [...EditorContainer]);
-    const toolbarContainerStyles = computed(() => [...ToolbarContainer]);
-    const toolbarStyles = computed(() => [...Toolbar,
-    // 'overflow-x-hidden',
-    ...(isFocused.value ? ToolbarButtonFocused : ToolbarButton)]);
+    const containerStyles = computed(() => [...EditorContainer, ...(isFocused.value ? EditorContainerFocus : [])]);
     const editorInputStyles = computed(() => ['tiptap-editor-v3', ...EditorInput]);
     //Effects
     watch(proxyModelValue, value => {
@@ -27437,43 +27682,38 @@ var script = defineComponent({
         editor === null || editor === void 0 ? void 0 : editor.commands.setContent(value);
       }
       if (props.format === 'markdown' && value !== markdownOutput.value) {
-        //TODO: const deserialized = deserialize(editor?.schema, value);
-        editor === null || editor === void 0 ? void 0 : editor.commands.setContent(value);
+        const deserialized = deserialize(editor === null || editor === void 0 ? void 0 : editor.schema, value);
+        editor === null || editor === void 0 ? void 0 : editor.commands.setContent(deserialized);
       }
     });
+    watch(props, _ref6 => {
+      let {
+        readonly
+      } = _ref6;
+      isFocused.value = !readonly;
+      editor === null || editor === void 0 ? void 0 : editor.setEditable(!readonly);
+    });
     return {
       editor,
       editorRef,
-      toolbarRef,
+      toolbarContainerRef,
       containerRef,
-      toolbarButtonRef,
-      moreButtonRef,
       textareaRef,
-      moreRef,
-      menuRef,
-      iconsEnum,
       handleToolbarClick,
       handleEditorClick,
       isActive,
-      iconTooltipsEnum,
       containerStyles,
-      toolbarContainerStyles,
-      toolbarStyles,
       rootStyles,
       root,
       editorInputStyles,
-      getIndexOfHeading,
       headingLevels,
-      headingIcon,
       attachLink,
       discardLink,
       isOpenLinkModal,
       text,
       link,
       isFocused,
-      isVisible,
       countOfNotVisibleTools,
-      notVisibleTools,
       handleInput,
       proxyModelValue,
       disableMarkdown,
@@ -27488,26 +27728,20 @@ const _hoisted_2 = {
   class: /*#__PURE__*/normalizeClass(['p-sm', 'overflow-auto', 'min-h-[88px]'])
 };
 const _hoisted_3 = ["activated"];
-const _hoisted_4 = {
-  class: "flex p-sm gap-md"
-};
-const _hoisted_5 = /*#__PURE__*/createElementVNode("p", {
+const _hoisted_4 = /*#__PURE__*/createElementVNode("p", {
   class: "text-headline-2"
 }, " Add Link ", -1 /* HOISTED */);
-const _hoisted_6 = {
+const _hoisted_5 = {
   class: "flex ml-auto gap-md"
 };
-const _hoisted_7 = /*#__PURE__*/createElementVNode("p", null, "Cancel", -1 /* HOISTED */);
-const _hoisted_8 = /*#__PURE__*/createElementVNode("p", null, "Save", -1 /* HOISTED */);
+const _hoisted_6 = /*#__PURE__*/createElementVNode("p", null, "Cancel", -1 /* HOISTED */);
+const _hoisted_7 = /*#__PURE__*/createElementVNode("p", null, "Save", -1 /* HOISTED */);
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrLabel = resolveComponent("OrLabel");
-  const _component_or_icon_button = resolveComponent("or-icon-button");
+  const _component_editor_toolbar = resolveComponent("editor-toolbar");
   const _component_OrHint = resolveComponent("OrHint");
   const _component_OrError = resolveComponent("OrError");
-  const _component_or_popover = resolveComponent("or-popover");
-  const _component_or_menu_item = resolveComponent("or-menu-item");
-  const _component_or_menu = resolveComponent("or-menu");
   const _component_or_label = resolveComponent("or-label");
   const _component_or_input = resolveComponent("or-input");
   const _component_or_button = resolveComponent("or-button");
@@ -27524,75 +27758,30 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
     _: 3 /* FORWARDED */
   })) : createCommentVNode("v-if", true), createElementVNode("div", {
-    ref: 'containerRef',
+    ref: "containerRef",
     class: normalizeClass(_ctx.containerStyles),
     invalid: !!_ctx.error,
-    onClick: _cache[4] || (_cache[4] = $event => _ctx.handleEditorClick())
-  }, [createElementVNode("div", {
-    ref: 'toolbarRef',
-    class: normalizeClass(_ctx.toolbarContainerStyles)
-  }, [(openBlock(true), createElementBlock(Fragment$1, null, renderList(_ctx.toolbar, (tools, index) => {
-    return openBlock(), createElementBlock("div", {
-      key: index,
-      class: normalizeClass([..._ctx.toolbarStyles, {
-        'hidden': _ctx.isVisible(tools)
-      }])
-    }, [(openBlock(true), createElementBlock(Fragment$1, null, renderList(tools, item => {
-      return openBlock(), createElementBlock("div", {
-        key: item,
-        class: normalizeClass(['flex gap-md', {
-          'hidden': !_ctx.isVisible(item)
-        }])
-      }, [item === 'heading' ? (openBlock(), createBlock(_component_or_icon_button, {
-        key: 0,
-        ref_for: true,
-        ref: 'toolbarButtonRef',
-        selected: _ctx.isActive[item],
-        disabled: !_ctx.isFocused,
-        tooltip: {
-          content: item,
-          placement: 'top'
-        },
-        icon: {
-          icon: _ctx.headingIcon,
-          variant: 'inherit'
-        },
-        onClick: _cache[0] || (_cache[0] = $event => _ctx.menuRef && _ctx.menuRef.toggle())
-      }, null, 8 /* PROPS */, ["selected", "disabled", "tooltip", "icon"])) : _ctx.isVisible(item) ? (openBlock(), createBlock(_component_or_icon_button, {
-        key: 1,
-        tooltip: {
-          content: _ctx.iconTooltipsEnum[item],
-          placement: 'top'
-        },
-        selected: _ctx.isActive[item],
-        disabled: !_ctx.isFocused,
-        icon: {
-          icon: _ctx.iconsEnum[item],
-          variant: 'inherit'
-        },
-        onClick: $event => _ctx.handleToolbarClick(item)
-      }, null, 8 /* PROPS */, ["tooltip", "selected", "disabled", "icon", "onClick"])) : createCommentVNode("v-if", true)], 2 /* CLASS */);
-    }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */);
-  }), 128 /* KEYED_FRAGMENT */)), _ctx.countOfNotVisibleTools > 0 ? (openBlock(), createBlock(_component_or_icon_button, {
+    onClick: _cache[2] || (_cache[2] = $event => _ctx.handleEditorClick())
+  }, [!_ctx.readonly ? (openBlock(), createBlock(_component_editor_toolbar, {
     key: 0,
-    ref: 'moreButtonRef',
-    disabled: !_ctx.isFocused,
-    icon: {
-      icon: 'more_horiz',
-      variant: 'inherit'
-    },
-    class: "px-sm",
-    onClick: _cache[1] || (_cache[1] = $event => _ctx.moreRef && _ctx.moreRef.open())
-  }, null, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true)], 2 /* CLASS */), createElementVNode("div", _hoisted_2, [withDirectives(createElementVNode("textarea", {
+    ref: "toolbarContainerRef",
+    "count-of-not-visible-tools": _ctx.countOfNotVisibleTools,
+    toolbar: _ctx.toolbar,
+    "is-focused": _ctx.isFocused,
+    "active-heading-level": _ctx.activeHeadingLevel,
+    "is-active": _ctx.isActive,
+    "heading-levels": _ctx.headingLevels,
+    onClickTool: _ctx.handleToolbarClick
+  }, null, 8 /* PROPS */, ["count-of-not-visible-tools", "toolbar", "is-focused", "active-heading-level", "is-active", "heading-levels", "onClickTool"])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_2, [withDirectives(createElementVNode("textarea", {
     ref: 'textareaRef',
-    "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => _ctx.sourceValue = $event),
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.sourceValue = $event),
     activated: _ctx.disableMarkdown,
     class: "block w-full h-full resize-none border-none outline-none bg-transparent typography-body-2-regular",
-    onInput: _cache[3] || (_cache[3] = function () {
+    onInput: _cache[1] || (_cache[1] = function () {
       return _ctx.handleInput && _ctx.handleInput(...arguments);
     })
   }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_3), [[vShow, _ctx.disableMarkdown], [vModelText, _ctx.sourceValue]]), withDirectives(createElementVNode("div", {
-    ref: 'editorRef',
+    ref: "editorRef",
     class: normalizeClass(_ctx.editorInputStyles)
   }, null, 2 /* CLASS */), [[vShow, !_ctx.disableMarkdown]]), renderSlot(_ctx.$slots, "files")])], 10 /* CLASS, PROPS */, _hoisted_1), !_ctx.error ? (openBlock(), createElementBlock(Fragment$1, {
     key: 1
@@ -27610,68 +27799,21 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     default: withCtx(() => [createTextVNode(toDisplayString(_ctx.error), 1 /* TEXT */)]),
 
     _: 1 /* STABLE */
-  }, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true), _ctx.moreButtonRef ? (openBlock(), createBlock(_component_or_popover, {
-    key: 3,
-    ref: 'moreRef',
-    trigger: _ctx.moreButtonRef && _ctx.moreButtonRef.root,
-    placement: "top-end"
-  }, {
-    default: withCtx(() => [createElementVNode("div", _hoisted_4, [(openBlock(true), createElementBlock(Fragment$1, null, renderList(_ctx.notVisibleTools, item => {
-      return openBlock(), createBlock(_component_or_icon_button, {
-        key: item,
-        tooltip: {
-          content: _ctx.iconTooltipsEnum[item],
-          placement: 'top'
-        },
-        selected: _ctx.isActive[item],
-        icon: {
-          icon: _ctx.iconsEnum[item],
-          variant: 'inherit'
-        },
-        onClick: $event => _ctx.handleToolbarClick(item)
-      }, null, 8 /* PROPS */, ["tooltip", "selected", "icon", "onClick"]);
-    }), 128 /* KEYED_FRAGMENT */))])]),
-
-    _: 1 /* STABLE */
-  }, 8 /* PROPS */, ["trigger"])) : createCommentVNode("v-if", true), _ctx.toolbarButtonRef ? (openBlock(), createBlock(_component_or_menu, {
-    key: 4,
-    ref: 'menuRef',
-    trigger: _ctx.toolbarButtonRef[_ctx.getIndexOfHeading] && _ctx.toolbarButtonRef[_ctx.getIndexOfHeading].root,
-    placement: "bottom-start"
-  }, {
-    default: withCtx(() => [(openBlock(true), createElementBlock(Fragment$1, null, renderList(_ctx.headingLevels, heading => {
-      return openBlock(), createBlock(_component_or_menu_item, {
-        key: heading,
-        selected: _ctx.activeHeadingLevel === heading,
-        onClick: $event => _ctx.handleToolbarClick('heading', heading)
-      }, {
-        default: withCtx(() => [createTextVNode(" Heading " + toDisplayString(heading), 1 /* TEXT */)]),
-
-        _: 2 /* DYNAMIC */
-      }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["selected", "onClick"]);
-    }), 128 /* KEYED_FRAGMENT */)), createVNode(_component_or_menu_item, {
-      selected: !_ctx.activeHeadingLevel,
-      onClick: _cache[5] || (_cache[5] = $event => _ctx.handleToolbarClick('heading'))
-    }, {
-      default: withCtx(() => [createTextVNode(" None ")]),
-      _: 1 /* STABLE */
-    }, 8 /* PROPS */, ["selected"])]),
-    _: 1 /* STABLE */
-  }, 8 /* PROPS */, ["trigger"])) : createCommentVNode("v-if", true), createVNode(_component_or_modal, {
+  }, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true), createVNode(_component_or_modal, {
     "is-open": _ctx.isOpenLinkModal,
     size: "s"
   }, {
-    header: withCtx(() => [_hoisted_5]),
-    footer: withCtx(() => [createElementVNode("div", _hoisted_6, [createVNode(_component_or_button, {
+    header: withCtx(() => [_hoisted_4]),
+    footer: withCtx(() => [createElementVNode("div", _hoisted_5, [createVNode(_component_or_button, {
       variant: "outlined",
       onClick: _ctx.discardLink
     }, {
-      default: withCtx(() => [_hoisted_7]),
+      default: withCtx(() => [_hoisted_6]),
       _: 1 /* STABLE */
     }, 8 /* PROPS */, ["onClick"]), createVNode(_component_or_button, {
       onClick: _ctx.attachLink
     }, {
-      default: withCtx(() => [_hoisted_8]),
+      default: withCtx(() => [_hoisted_7]),
       _: 1 /* STABLE */
     }, 8 /* PROPS */, ["onClick"])])]),
     default: withCtx(() => [createElementVNode("div", null, [createVNode(_component_or_label, null, {
@@ -27679,7 +27821,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       _: 1 /* STABLE */
     }), createVNode(_component_or_input, {
       modelValue: _ctx.text,
-      "onUpdate:modelValue": _cache[6] || (_cache[6] = $event => _ctx.text = $event),
+      "onUpdate:modelValue": _cache[3] || (_cache[3] = $event => _ctx.text = $event),
       placeholder: "Placeholder",
       class: "pb-md"
     }, null, 8 /* PROPS */, ["modelValue"]), createVNode(_component_or_label, null, {
@@ -27687,7 +27829,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       _: 1 /* STABLE */
     }), createVNode(_component_or_input, {
       modelValue: _ctx.link,
-      "onUpdate:modelValue": _cache[7] || (_cache[7] = $event => _ctx.link = $event),
+      "onUpdate:modelValue": _cache[4] || (_cache[4] = $event => _ctx.link = $event),
       placeholder: "Placeholder"
     }, null, 8 /* PROPS */, ["modelValue"])])]),
     _: 1 /* STABLE */
@@ -27700,4 +27842,4 @@ styleInject(css_248z);
 script.render = render;
 script.__file = "src/components/or-rich-text-editor-v3/OrRichTextEditor.vue";
 
-export { CodeMirrorView as C, EditorContainer as E, Formats as F, OrRichTextEditor as O, ToolbarContainer as T, serialize as a, Toolbar as b, ToolbarButton as c, deserialize as d, ToolbarButtonFocused as e, EditorInput as f, color as g, orCodeHighlightStyle as h, codemirrorNode as i, orCodeTheme as o, script as s, theme as t };
+export { CodeMirrorView as C, EditorContainer as E, Formats as F, OrRichTextEditor as O, ToolbarContainer as T, serialize as a, EditorContainerFocus as b, Toolbar as c, deserialize as d, ToolbarButton as e, ToolbarButtonFocused as f, EditorInput as g, color as h, orCodeHighlightStyle as i, codemirrorNode as j, orCodeTheme as o, script as s, theme as t };