@onereach/ui-components 2.70.0-beta.2114.0 → 2.70.0-beta.2124.0

package/dist/bundled/v2/{OrRichTextEditor-5c3cfb5b.js → OrRichTextEditor-766f829b.js}

@@ -36469,19 +36469,14 @@ var script = defineComponent({
     OrMenu
   },
   inheritAttrs: false,
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue'
-  },
   props: {
     modelValue: {
       type: String,
-      default: '',
-      required: false
+      default: ''
     },
     value: {
       type: String,
-      default: undefined
+      default: ''
     },
     toolbar: {
       type: Array,
@@ -36509,10 +36504,10 @@ var script = defineComponent({
     }
   },
   emits: ['update:modelValue', 'input'],
-  setup(props, {
-    emit
-  }) {
+  expose: ['root'],
+  setup(props, context) {
     // Refs
+    const root = ref();
     let editor = null;
     const editorRef = ref();
     const containerRef = ref();
@@ -36566,22 +36561,19 @@ var script = defineComponent({
           const text = editor.getText();
           if (props.markdownFormat) {
             markdownOutput.value = serialize(editor.schema, editor.getJSON());
-            emit('update:modelValue', markdownOutput.value);
-            emit('input', markdownOutput.value);
+            proxyModelValue.value = markdownOutput.value;
           } else {
-            emit('update:modelValue', text === '' ? text : html);
-            emit('input', text === '' ? text : html);
+            proxyModelValue.value = text === '' ? text : html;
           }
         },
         onCreate: ({
           editor
         }) => {
-          var _a, _b;
           if (props.markdownFormat) {
-            const deserialized = deserialize(editor.schema, (_a = props.modelValue) !== null && _a !== void 0 ? _a : props.value);
+            const deserialized = deserialize(editor.schema, proxyModelValue.value);
             editor.commands.setContent(deserialized);
           } else {
-            editor.commands.setContent((_b = props.modelValue) !== null && _b !== void 0 ? _b : props.value);
+            editor.commands.setContent(proxyModelValue.value);
           }
         },
         element: editorRef.value,
@@ -36626,6 +36618,17 @@ var script = defineComponent({
     });
     // trap.activate();
     // 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');
     });
@@ -36635,7 +36638,7 @@ var script = defineComponent({
       }
       return 'format_paragraph';
     });
-    // Methods
+    //Methods
     const handleEditorClick = () => {
       setActiveFormats();
       editor === null || editor === void 0 ? void 0 : editor.commands.focus();
@@ -36717,7 +36720,8 @@ var script = defineComponent({
       'gap-md', ...(isActive.value[item] ? ToolbarButtonActive : ToolbarButton)];
     };
     //Effects
-    watch(() => props.modelValue, value => {
+    watch(proxyModelValue, value => {
+      console.log('watch', 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);
       }
@@ -36725,14 +36729,6 @@ var script = defineComponent({
         editor === null || editor === void 0 ? void 0 : editor.commands.setContent(markdownOutput.value);
       }
     });
-    // watch(() => props.value, (value) => { //for vue2
-    //   if (value !== editor?.getHTML() && !props.markdownFormat) {
-    //     editor?.commands.setContent(value);
-    //   }
-    //   if (props.markdownFormat && value !== markdownOutput.value) {
-    //     editor?.commands.setContent(markdownOutput.value);
-    //   }
-    // });
     return {
       editor,
       editorRef,
@@ -36748,6 +36744,7 @@ var script = defineComponent({
       toolbarContainerStyles,
       toolbarStyles,
       rootStyles,
+      root,
       toolbarButtonStyles,
       editorInputStyles,
       getIndexOfHeading,
@@ -36765,10 +36762,10 @@ var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c('div', _vm._b({
+  return _c('div', {
     ref: "root",
     class: _vm.rootStyles
-  }, 'div', _vm.$attrs, false), [_c('or-label', [_vm._v("\n    " + _vm._s(_vm.description) + "\n  ")]), _vm._v(" "), _c('div', {
+  }, [_c('or-label', [_vm._v("\n    " + _vm._s(_vm.description) + "\n  ")]), _vm._v(" "), _c('div', {
     ref: "containerRef",
     class: _vm.containerStyles,
     on: {
@@ -36856,7 +36853,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = function (inject) {
   if (!inject) return;
-  inject("data-v-b67bfabc_0", {
+  inject("data-v-b9a5ce74_0", {
     source: ".tiptap-editor ol{margin:0 24px;list-style:decimal}.tiptap-editor ul{margin:0 24px;list-style:initial}.tiptap-editor pre{background-color:rgba(186,209,236,.3);padding:4px 8px;margin:4px 0;width:100%;border-radius:4px}.tiptap-editor blockquote{margin:8px 24px;padding:0 24px;border-left:4px solid #bad1ec}.tiptap-editor .is-editor-empty::before{content:attr(data-placeholder);height:0;pointer-events:none;float:left}",
     map: undefined,
     media: undefined

package/dist/bundled/v2/components/index.js

@@ -95,7 +95,7 @@ export { p as PropsV3, a as useQueueV3, u as useToastV3 } from '../useToast-3a3d
 export { O as OrTooltip } from '../OrTooltip-dfea7af2.js';
 export { O as OrTooltipContent } from '../OrTooltipContent-f0fd5f75.js';
 export { O as OrTooltipV3 } from '../OrTooltip-fbfa05fd.js';
-export { _ as OrRichTextEditorV3 } from '../OrRichTextEditor-5c3cfb5b.js';
+export { _ as OrRichTextEditorV3 } from '../OrRichTextEditor-766f829b.js';
 import '../index-fa6eb4ca.js';
 import 'vue';
 import '@vue/composition-api/dist/vue-composition-api.mjs';

package/dist/bundled/v2/components/or-rich-text-editor-v3/OrRichTextEditor.vue.d.ts

@@ -29,6 +29,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     toolbarContainerStyles: import("@vue/composition-api").ComputedRef<string[]>;
     toolbarStyles: import("@vue/composition-api").ComputedRef<string[]>;
     rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
+    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     toolbarButtonStyles: (item: string) => string[];
     editorInputStyles: import("@vue/composition-api").ComputedRef<string[]>;
     getIndexOfHeading: import("@vue/composition-api").ComputedRef<number>;
@@ -38,11 +39,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     modelValue: {
         type: StringConstructor;
         default: string;
-        required: false;
     };
     value: {
         type: StringConstructor;
-        default: undefined;
+        default: string;
     };
     toolbar: {
         type: ArrayConstructor;
@@ -72,11 +72,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     modelValue: {
         type: StringConstructor;
         default: string;
-        required: false;
     };
     value: {
         type: StringConstructor;
-        default: undefined;
+        default: string;
     };
     toolbar: {
         type: ArrayConstructor;
@@ -142,6 +141,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     toolbarContainerStyles: import("@vue/composition-api").ComputedRef<string[]>;
     toolbarStyles: import("@vue/composition-api").ComputedRef<string[]>;
     rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
+    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     toolbarButtonStyles: (item: string) => string[];
     editorInputStyles: import("@vue/composition-api").ComputedRef<string[]>;
     getIndexOfHeading: import("@vue/composition-api").ComputedRef<number>;

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

@@ -1,4 +1,4 @@
-export { _ as OrRichTextEditorV3 } from '../../OrRichTextEditor-5c3cfb5b.js';
+export { _ as OrRichTextEditorV3 } from '../../OrRichTextEditor-766f829b.js';
 import '../../index-fa6eb4ca.js';
 import 'vue';
 import '@vue/composition-api/dist/vue-composition-api.mjs';

package/dist/bundled/v2/index.js

@@ -98,7 +98,7 @@ export { _ as OrToastContainerV3, O as OrToastV3, t as TypesV3 } from './types-f
 export { O as OrTooltip } from './OrTooltip-dfea7af2.js';
 export { O as OrTooltipContent } from './OrTooltipContent-f0fd5f75.js';
 export { O as OrTooltipV3 } from './OrTooltip-fbfa05fd.js';
-export { _ as OrRichTextEditorV3 } from './OrRichTextEditor-5c3cfb5b.js';
+export { _ as OrRichTextEditorV3 } from './OrRichTextEditor-766f829b.js';
 export { D as DropdownClose, a as DropdownOpen } from './dropdown-open-e2a93aaf.js';
 export { u as useClassAttribute } from './useClassAttribute-9bf33346.js';
 export { u as useElevation } from './useElevation-aac032f4.js';

package/dist/bundled/v3/{OrRichTextEditor.vue_vue_type_script_lang-3404134a.js → OrRichTextEditor.vue_vue_type_script_lang-05013a39.js}

@@ -36470,19 +36470,14 @@ var script = defineComponent({
     OrMenu: script$4
   },
   inheritAttrs: false,
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue'
-  },
   props: {
     modelValue: {
       type: String,
-      default: '',
-      required: false
+      default: ''
     },
     value: {
       type: String,
-      default: undefined
+      default: ''
     },
     toolbar: {
       type: Array,
@@ -36510,10 +36505,10 @@ var script = defineComponent({
     }
   },
   emits: ['update:modelValue', 'input'],
-  setup(props, {
-    emit
-  }) {
+  expose: ['root'],
+  setup(props, context) {
     // Refs
+    const root = ref();
     let editor = null;
     const editorRef = ref();
     const containerRef = ref();
@@ -36567,22 +36562,19 @@ var script = defineComponent({
           const text = editor.getText();
           if (props.markdownFormat) {
             markdownOutput.value = serialize(editor.schema, editor.getJSON());
-            emit('update:modelValue', markdownOutput.value);
-            emit('input', markdownOutput.value);
+            proxyModelValue.value = markdownOutput.value;
           } else {
-            emit('update:modelValue', text === '' ? text : html);
-            emit('input', text === '' ? text : html);
+            proxyModelValue.value = text === '' ? text : html;
           }
         },
         onCreate: ({
           editor
         }) => {
-          var _a, _b;
           if (props.markdownFormat) {
-            const deserialized = deserialize(editor.schema, (_a = props.modelValue) !== null && _a !== void 0 ? _a : props.value);
+            const deserialized = deserialize(editor.schema, proxyModelValue.value);
             editor.commands.setContent(deserialized);
           } else {
-            editor.commands.setContent((_b = props.modelValue) !== null && _b !== void 0 ? _b : props.value);
+            editor.commands.setContent(proxyModelValue.value);
           }
         },
         element: editorRef.value,
@@ -36627,6 +36619,17 @@ var script = defineComponent({
     });
     // trap.activate();
     // 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');
     });
@@ -36636,7 +36639,7 @@ var script = defineComponent({
       }
       return 'format_paragraph';
     });
-    // Methods
+    //Methods
     const handleEditorClick = () => {
       setActiveFormats();
       editor === null || editor === void 0 ? void 0 : editor.commands.focus();
@@ -36718,7 +36721,8 @@ var script = defineComponent({
       'gap-md', ...(isActive.value[item] ? ToolbarButtonActive : ToolbarButton)];
     };
     //Effects
-    watch(() => props.modelValue, value => {
+    watch(proxyModelValue, value => {
+      console.log('watch', 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);
       }
@@ -36726,14 +36730,6 @@ var script = defineComponent({
         editor === null || editor === void 0 ? void 0 : editor.commands.setContent(markdownOutput.value);
       }
     });
-    // watch(() => props.value, (value) => { //for vue2
-    //   if (value !== editor?.getHTML() && !props.markdownFormat) {
-    //     editor?.commands.setContent(value);
-    //   }
-    //   if (props.markdownFormat && value !== markdownOutput.value) {
-    //     editor?.commands.setContent(markdownOutput.value);
-    //   }
-    // });
     return {
       editor,
       editorRef,
@@ -36749,6 +36745,7 @@ var script = defineComponent({
       toolbarContainerStyles,
       toolbarStyles,
       rootStyles,
+      root,
       toolbarButtonStyles,
       editorInputStyles,
       getIndexOfHeading,

package/dist/bundled/v3/components/index.js

@@ -95,7 +95,7 @@ export { p as PropsV3, a as useQueueV3, u as useToastV3 } from '../useToast-4d43
 export { s as OrTooltip } from '../OrTooltip.vue_vue_type_script_lang-fa52d391.js';
 export { s as OrTooltipContent } from '../OrTooltipContent-b0dcb862.js';
 export { s as OrTooltipV3 } from '../OrTooltip.vue_vue_type_script_lang-67cc86ed.js';
-export { s as OrRichTextEditorV3 } from '../OrRichTextEditor.vue_vue_type_script_lang-3404134a.js';
+export { s as OrRichTextEditorV3 } from '../OrRichTextEditor.vue_vue_type_script_lang-05013a39.js';
 import 'vue';
 import 'lodash';
 import '../OrIcon-1cae8a64.js';

package/dist/bundled/v3/components/or-rich-text-editor-v3/OrRichTextEditor.vue.d.ts

@@ -29,6 +29,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     toolbarContainerStyles: import("@vue/composition-api").ComputedRef<string[]>;
     toolbarStyles: import("@vue/composition-api").ComputedRef<string[]>;
     rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
+    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     toolbarButtonStyles: (item: string) => string[];
     editorInputStyles: import("@vue/composition-api").ComputedRef<string[]>;
     getIndexOfHeading: import("@vue/composition-api").ComputedRef<number>;
@@ -38,11 +39,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     modelValue: {
         type: StringConstructor;
         default: string;
-        required: false;
     };
     value: {
         type: StringConstructor;
-        default: undefined;
+        default: string;
     };
     toolbar: {
         type: ArrayConstructor;
@@ -72,11 +72,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     modelValue: {
         type: StringConstructor;
         default: string;
-        required: false;
     };
     value: {
         type: StringConstructor;
-        default: undefined;
+        default: string;
     };
     toolbar: {
         type: ArrayConstructor;
@@ -142,6 +141,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     toolbarContainerStyles: import("@vue/composition-api").ComputedRef<string[]>;
     toolbarStyles: import("@vue/composition-api").ComputedRef<string[]>;
     rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
+    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     toolbarButtonStyles: (item: string) => string[];
     editorInputStyles: import("@vue/composition-api").ComputedRef<string[]>;
     getIndexOfHeading: import("@vue/composition-api").ComputedRef<number>;

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

@@ -1,4 +1,4 @@
-export { s as OrRichTextEditorV3 } from '../../OrRichTextEditor.vue_vue_type_script_lang-3404134a.js';
+export { s as OrRichTextEditorV3 } from '../../OrRichTextEditor.vue_vue_type_script_lang-05013a39.js';
 import 'vue';
 import 'node:punycode';
 import '../../index.es-3f39f316.js';

package/dist/bundled/v3/index.js

@@ -123,8 +123,8 @@ import './OrToastContainer-f5525225.js';
 export { p as PropsV3, a as useQueueV3, u as useToastV3 } from './useToast-4d4329cd.js';
 export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from './types-6c5eee23.js';
 import './OrToastContainer-afb51e5d.js';
-import { s as script$Q } from './OrRichTextEditor.vue_vue_type_script_lang-3404134a.js';
-export { s as OrRichTextEditorV3 } from './OrRichTextEditor.vue_vue_type_script_lang-3404134a.js';
+import { s as script$Q } from './OrRichTextEditor.vue_vue_type_script_lang-05013a39.js';
+export { s as OrRichTextEditorV3 } from './OrRichTextEditor.vue_vue_type_script_lang-05013a39.js';
 export { a as BUTTON_COLOR, c as BUTTON_LOADER_TYPE, b as BUTTON_SIZE, B as BUTTON_TYPE, I as ICON_BUTTON_TYPE } from './constants-c5d1139f.js';
 export { s as OrCardV3 } from './OrCard.vue_vue_type_script_lang-165de137.js';
 export { s as OrCollapse } from './OrCollapse.vue_vue_type_script_lang-65cbb754.js';
@@ -2908,11 +2908,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_or_icon_button = resolveComponent("or-icon-button");
   const _component_or_menu_item = resolveComponent("or-menu-item");
   const _component_or_menu = resolveComponent("or-menu");
-  return openBlock(), createElementBlock("div", mergeProps({
-    ref: "root"
-  }, _ctx.$attrs, {
-    class: _ctx.rootStyles
-  }), [createVNode(_component_or_label, null, {
+  return openBlock(), createElementBlock("div", {
+    ref: "root",
+    class: normalizeClass(_ctx.rootStyles)
+  }, [createVNode(_component_or_label, null, {
     default: withCtx(() => [createTextVNode(toDisplayString(_ctx.description), 1 /* TEXT */)]),
 
     _: 1 /* STABLE */
@@ -2984,7 +2983,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     })]),
 
     _: 1 /* STABLE */
-  }, 8 /* PROPS */, ["trigger"])) : createCommentVNode("v-if", true)], 16 /* FULL_PROPS */);
+  }, 8 /* PROPS */, ["trigger"])) : createCommentVNode("v-if", true)], 2 /* CLASS */);
 }
 
 var css_248z = ".tiptap-editor ol {\n  margin: 0 24px;\n  list-style: decimal;\n}\n.tiptap-editor ul {\n  margin: 0 24px;\n  list-style: disc outside none;\n  list-style: initial;\n}\n.tiptap-editor pre {\n  background-color: rgba(186, 209, 236, 0.3);\n  padding: 4px 8px;\n  margin: 4px 0;\n  width: 100%;\n  border-radius: 4px;\n}\n.tiptap-editor blockquote {\n  margin: 8px 24px;\n  padding: 0 24px;\n  border-left: 4px solid #bad1ec;\n}\n.tiptap-editor .is-editor-empty::before {\n  content: attr(data-placeholder);\n  height: 0;\n  pointer-events: none;\n  float: left;\n}";

package/dist/esm/v2/{OrRichTextEditor-1f6186c0.js → OrRichTextEditor-4510aa40.js}

@@ -144,19 +144,14 @@ var script = defineComponent({
     OrMenu: __vue_component__$4
   },
   inheritAttrs: false,
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue'
-  },
   props: {
     modelValue: {
       type: String,
-      default: '',
-      required: false
+      default: ''
     },
     value: {
       type: String,
-      default: undefined
+      default: ''
     },
     toolbar: {
       type: Array,
@@ -184,10 +179,10 @@ var script = defineComponent({
     }
   },
   emits: ['update:modelValue', 'input'],
-  setup(props, {
-    emit
-  }) {
+  expose: ['root'],
+  setup(props, context) {
     // Refs
+    const root = ref();
     let editor = null;
     const editorRef = ref();
     const containerRef = ref();
@@ -241,22 +236,19 @@ var script = defineComponent({
           const text = editor.getText();
           if (props.markdownFormat) {
             markdownOutput.value = serialize(editor.schema, editor.getJSON());
-            emit('update:modelValue', markdownOutput.value);
-            emit('input', markdownOutput.value);
+            proxyModelValue.value = markdownOutput.value;
           } else {
-            emit('update:modelValue', text === '' ? text : html);
-            emit('input', text === '' ? text : html);
+            proxyModelValue.value = text === '' ? text : html;
           }
         },
         onCreate: ({
           editor
         }) => {
-          var _a, _b;
           if (props.markdownFormat) {
-            const deserialized = deserialize(editor.schema, (_a = props.modelValue) !== null && _a !== void 0 ? _a : props.value);
+            const deserialized = deserialize(editor.schema, proxyModelValue.value);
             editor.commands.setContent(deserialized);
           } else {
-            editor.commands.setContent((_b = props.modelValue) !== null && _b !== void 0 ? _b : props.value);
+            editor.commands.setContent(proxyModelValue.value);
           }
         },
         element: editorRef.value,
@@ -301,6 +293,17 @@ var script = defineComponent({
     });
     // trap.activate();
     // 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');
     });
@@ -310,7 +313,7 @@ var script = defineComponent({
       }
       return 'format_paragraph';
     });
-    // Methods
+    //Methods
     const handleEditorClick = () => {
       setActiveFormats();
       editor === null || editor === void 0 ? void 0 : editor.commands.focus();
@@ -392,7 +395,8 @@ var script = defineComponent({
       'gap-md', ...(isActive.value[item] ? ToolbarButtonActive : ToolbarButton)];
     };
     //Effects
-    watch(() => props.modelValue, value => {
+    watch(proxyModelValue, value => {
+      console.log('watch', 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);
       }
@@ -400,14 +404,6 @@ var script = defineComponent({
         editor === null || editor === void 0 ? void 0 : editor.commands.setContent(markdownOutput.value);
       }
     });
-    // watch(() => props.value, (value) => { //for vue2
-    //   if (value !== editor?.getHTML() && !props.markdownFormat) {
-    //     editor?.commands.setContent(value);
-    //   }
-    //   if (props.markdownFormat && value !== markdownOutput.value) {
-    //     editor?.commands.setContent(markdownOutput.value);
-    //   }
-    // });
     return {
       editor,
       editorRef,
@@ -423,6 +419,7 @@ var script = defineComponent({
       toolbarContainerStyles,
       toolbarStyles,
       rootStyles,
+      root,
       toolbarButtonStyles,
       editorInputStyles,
       getIndexOfHeading,
@@ -440,10 +437,10 @@ var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c('div', _vm._b({
+  return _c('div', {
     ref: "root",
     class: _vm.rootStyles
-  }, 'div', _vm.$attrs, false), [_c('or-label', [_vm._v("\n    " + _vm._s(_vm.description) + "\n  ")]), _vm._v(" "), _c('div', {
+  }, [_c('or-label', [_vm._v("\n    " + _vm._s(_vm.description) + "\n  ")]), _vm._v(" "), _c('div', {
     ref: "containerRef",
     class: _vm.containerStyles,
     on: {
@@ -531,7 +528,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = function (inject) {
   if (!inject) return;
-  inject("data-v-b67bfabc_0", {
+  inject("data-v-b9a5ce74_0", {
     source: ".tiptap-editor ol{margin:0 24px;list-style:decimal}.tiptap-editor ul{margin:0 24px;list-style:initial}.tiptap-editor pre{background-color:rgba(186,209,236,.3);padding:4px 8px;margin:4px 0;width:100%;border-radius:4px}.tiptap-editor blockquote{margin:8px 24px;padding:0 24px;border-left:4px solid #bad1ec}.tiptap-editor .is-editor-empty::before{content:attr(data-placeholder);height:0;pointer-events:none;float:left}",
     map: undefined,
     media: undefined

package/dist/esm/v2/components/index.js

@@ -95,7 +95,7 @@ export { p as PropsV3, a as useQueueV3, u as useToastV3 } from '../useToast-0665
 export { _ as OrTooltip } from '../OrTooltip-614b016d.js';
 export { _ as OrTooltipContent } from '../OrTooltip.vue_rollup-plugin-vue_script-63559536.js';
 export { _ as OrTooltipV3 } from '../OrTooltip-513bee30.js';
-export { _ as OrRichTextEditorV3 } from '../OrRichTextEditor-1f6186c0.js';
+export { _ as OrRichTextEditorV3 } from '../OrRichTextEditor-4510aa40.js';
 import 'vue-demi';
 import 'lodash';
 import '../normalize-component-6e8e3d80.js';

package/dist/esm/v2/components/or-rich-text-editor-v3/OrRichTextEditor.vue.d.ts

@@ -29,6 +29,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     toolbarContainerStyles: import("@vue/composition-api").ComputedRef<string[]>;
     toolbarStyles: import("@vue/composition-api").ComputedRef<string[]>;
     rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
+    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     toolbarButtonStyles: (item: string) => string[];
     editorInputStyles: import("@vue/composition-api").ComputedRef<string[]>;
     getIndexOfHeading: import("@vue/composition-api").ComputedRef<number>;
@@ -38,11 +39,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     modelValue: {
         type: StringConstructor;
         default: string;
-        required: false;
     };
     value: {
         type: StringConstructor;
-        default: undefined;
+        default: string;
     };
     toolbar: {
         type: ArrayConstructor;
@@ -72,11 +72,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     modelValue: {
         type: StringConstructor;
         default: string;
-        required: false;
     };
     value: {
         type: StringConstructor;
-        default: undefined;
+        default: string;
     };
     toolbar: {
         type: ArrayConstructor;
@@ -142,6 +141,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     toolbarContainerStyles: import("@vue/composition-api").ComputedRef<string[]>;
     toolbarStyles: import("@vue/composition-api").ComputedRef<string[]>;
     rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
+    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     toolbarButtonStyles: (item: string) => string[];
     editorInputStyles: import("@vue/composition-api").ComputedRef<string[]>;
     getIndexOfHeading: import("@vue/composition-api").ComputedRef<number>;

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

@@ -1,4 +1,4 @@
-export { _ as OrRichTextEditorV3 } from '../../OrRichTextEditor-1f6186c0.js';
+export { _ as OrRichTextEditorV3 } from '../../OrRichTextEditor-4510aa40.js';
 import 'vue-demi';
 import '../../useClassAttribute-47fdb016.js';
 import '@vueuse/core';

package/dist/esm/v2/index.js

@@ -95,7 +95,7 @@ export { p as PropsV3, a as useQueueV3, u as useToastV3 } from './useToast-06654
 export { _ as OrTooltip } from './OrTooltip-614b016d.js';
 export { _ as OrTooltipContent } from './OrTooltip.vue_rollup-plugin-vue_script-63559536.js';
 export { _ as OrTooltipV3 } from './OrTooltip-513bee30.js';
-export { _ as OrRichTextEditorV3 } from './OrRichTextEditor-1f6186c0.js';
+export { _ as OrRichTextEditorV3 } from './OrRichTextEditor-4510aa40.js';
 export { D as DropdownClose, a as DropdownOpen } from './dropdown-open-0d314aa4.js';
 export { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 export { u as useElevation } from './useElevation-31bfe1f6.js';

package/dist/esm/v3/{OrRichTextEditor-cdf75b40.js → OrRichTextEditor-eefc4567.js}

@@ -26,7 +26,7 @@ import StarterKit from '@tiptap/starter-kit';
 import Underline from '@tiptap/extension-underline';
 import Heading from '@tiptap/extension-heading';
 import Placeholder from '@tiptap/extension-placeholder';
-import { resolveComponent, openBlock, createElementBlock, mergeProps, createVNode, withCtx, createTextVNode, toDisplayString, createElementVNode, normalizeClass, Fragment, renderList, createBlock, createCommentVNode } from 'vue';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode, withCtx, createTextVNode, toDisplayString, createElementVNode, Fragment, renderList, createBlock, createCommentVNode } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 
 const serializerNodes = {
@@ -144,19 +144,14 @@ var script = defineComponent({
     OrMenu: script$4
   },
   inheritAttrs: false,
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue'
-  },
   props: {
     modelValue: {
       type: String,
-      default: '',
-      required: false
+      default: ''
     },
     value: {
       type: String,
-      default: undefined
+      default: ''
     },
     toolbar: {
       type: Array,
@@ -184,10 +179,10 @@ var script = defineComponent({
     }
   },
   emits: ['update:modelValue', 'input'],
-  setup(props, {
-    emit
-  }) {
+  expose: ['root'],
+  setup(props, context) {
     // Refs
+    const root = ref();
     let editor = null;
     const editorRef = ref();
     const containerRef = ref();
@@ -241,22 +236,19 @@ var script = defineComponent({
           const text = editor.getText();
           if (props.markdownFormat) {
             markdownOutput.value = serialize(editor.schema, editor.getJSON());
-            emit('update:modelValue', markdownOutput.value);
-            emit('input', markdownOutput.value);
+            proxyModelValue.value = markdownOutput.value;
           } else {
-            emit('update:modelValue', text === '' ? text : html);
-            emit('input', text === '' ? text : html);
+            proxyModelValue.value = text === '' ? text : html;
           }
         },
         onCreate: ({
           editor
         }) => {
-          var _a, _b;
           if (props.markdownFormat) {
-            const deserialized = deserialize(editor.schema, (_a = props.modelValue) !== null && _a !== void 0 ? _a : props.value);
+            const deserialized = deserialize(editor.schema, proxyModelValue.value);
             editor.commands.setContent(deserialized);
           } else {
-            editor.commands.setContent((_b = props.modelValue) !== null && _b !== void 0 ? _b : props.value);
+            editor.commands.setContent(proxyModelValue.value);
           }
         },
         element: editorRef.value,
@@ -301,6 +293,17 @@ var script = defineComponent({
     });
     // trap.activate();
     // 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');
     });
@@ -310,7 +313,7 @@ var script = defineComponent({
       }
       return 'format_paragraph';
     });
-    // Methods
+    //Methods
     const handleEditorClick = () => {
       setActiveFormats();
       editor === null || editor === void 0 ? void 0 : editor.commands.focus();
@@ -392,7 +395,8 @@ var script = defineComponent({
       'gap-md', ...(isActive.value[item] ? ToolbarButtonActive : ToolbarButton)];
     };
     //Effects
-    watch(() => props.modelValue, value => {
+    watch(proxyModelValue, value => {
+      console.log('watch', 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);
       }
@@ -400,14 +404,6 @@ var script = defineComponent({
         editor === null || editor === void 0 ? void 0 : editor.commands.setContent(markdownOutput.value);
       }
     });
-    // watch(() => props.value, (value) => { //for vue2
-    //   if (value !== editor?.getHTML() && !props.markdownFormat) {
-    //     editor?.commands.setContent(value);
-    //   }
-    //   if (props.markdownFormat && value !== markdownOutput.value) {
-    //     editor?.commands.setContent(markdownOutput.value);
-    //   }
-    // });
     return {
       editor,
       editorRef,
@@ -423,6 +419,7 @@ var script = defineComponent({
       toolbarContainerStyles,
       toolbarStyles,
       rootStyles,
+      root,
       toolbarButtonStyles,
       editorInputStyles,
       getIndexOfHeading,
@@ -437,11 +434,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_or_icon_button = resolveComponent("or-icon-button");
   const _component_or_menu_item = resolveComponent("or-menu-item");
   const _component_or_menu = resolveComponent("or-menu");
-  return openBlock(), createElementBlock("div", mergeProps({
-    ref: "root"
-  }, _ctx.$attrs, {
-    class: _ctx.rootStyles
-  }), [createVNode(_component_or_label, null, {
+  return openBlock(), createElementBlock("div", {
+    ref: "root",
+    class: normalizeClass(_ctx.rootStyles)
+  }, [createVNode(_component_or_label, null, {
     default: withCtx(() => [createTextVNode(toDisplayString(_ctx.description), 1 /* TEXT */)]),
 
     _: 1 /* STABLE */
@@ -513,7 +509,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     })]),
 
     _: 1 /* STABLE */
-  }, 8 /* PROPS */, ["trigger"])) : createCommentVNode("v-if", true)], 16 /* FULL_PROPS */);
+  }, 8 /* PROPS */, ["trigger"])) : createCommentVNode("v-if", true)], 2 /* CLASS */);
 }
 
 var css_248z = ".tiptap-editor ol {\n  margin: 0 24px;\n  list-style: decimal;\n}\n.tiptap-editor ul {\n  margin: 0 24px;\n  list-style: initial;\n}\n.tiptap-editor pre {\n  background-color: rgba(186, 209, 236, 0.3);\n  padding: 4px 8px;\n  margin: 4px 0;\n  width: 100%;\n  border-radius: 4px;\n}\n.tiptap-editor blockquote {\n  margin: 8px 24px;\n  padding: 0 24px;\n  border-left: 4px solid #bad1ec;\n}\n.tiptap-editor .is-editor-empty::before {\n  content: attr(data-placeholder);\n  height: 0;\n  pointer-events: none;\n  float: left;\n}";

package/dist/esm/v3/components/index.js

@@ -89,7 +89,7 @@ export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from '../types-
 export { p as PropsV3, a as useQueueV3, u as useToastV3 } from '../useToast-0665462d.js';
 export { s as OrTooltip, a as OrTooltipContent } from '../OrTooltip-78cd7f6b.js';
 export { s as OrTooltipV3 } from '../OrTooltip-50d27b4f.js';
-export { s as OrRichTextEditorV3 } from '../OrRichTextEditor-cdf75b40.js';
+export { s as OrRichTextEditorV3 } from '../OrRichTextEditor-eefc4567.js';
 import 'vue-demi';
 import 'lodash';
 import 'vue';

package/dist/esm/v3/components/or-rich-text-editor-v3/OrRichTextEditor.vue.d.ts

@@ -29,6 +29,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     toolbarContainerStyles: import("@vue/composition-api").ComputedRef<string[]>;
     toolbarStyles: import("@vue/composition-api").ComputedRef<string[]>;
     rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
+    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     toolbarButtonStyles: (item: string) => string[];
     editorInputStyles: import("@vue/composition-api").ComputedRef<string[]>;
     getIndexOfHeading: import("@vue/composition-api").ComputedRef<number>;
@@ -38,11 +39,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     modelValue: {
         type: StringConstructor;
         default: string;
-        required: false;
     };
     value: {
         type: StringConstructor;
-        default: undefined;
+        default: string;
     };
     toolbar: {
         type: ArrayConstructor;
@@ -72,11 +72,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     modelValue: {
         type: StringConstructor;
         default: string;
-        required: false;
     };
     value: {
         type: StringConstructor;
-        default: undefined;
+        default: string;
     };
     toolbar: {
         type: ArrayConstructor;
@@ -142,6 +141,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     toolbarContainerStyles: import("@vue/composition-api").ComputedRef<string[]>;
     toolbarStyles: import("@vue/composition-api").ComputedRef<string[]>;
     rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
+    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     toolbarButtonStyles: (item: string) => string[];
     editorInputStyles: import("@vue/composition-api").ComputedRef<string[]>;
     getIndexOfHeading: import("@vue/composition-api").ComputedRef<number>;

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

@@ -1,4 +1,4 @@
-export { s as OrRichTextEditorV3 } from '../../OrRichTextEditor-cdf75b40.js';
+export { s as OrRichTextEditorV3 } from '../../OrRichTextEditor-eefc4567.js';
 import 'vue-demi';
 import '../../useClassAttribute-47fdb016.js';
 import '@vueuse/core';

package/dist/esm/v3/index.js

@@ -89,7 +89,7 @@ export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from './types-8
 export { p as PropsV3, a as useQueueV3, u as useToastV3 } from './useToast-0665462d.js';
 export { s as OrTooltip, a as OrTooltipContent } from './OrTooltip-78cd7f6b.js';
 export { s as OrTooltipV3 } from './OrTooltip-50d27b4f.js';
-export { s as OrRichTextEditorV3 } from './OrRichTextEditor-cdf75b40.js';
+export { s as OrRichTextEditorV3 } from './OrRichTextEditor-eefc4567.js';
 export { D as DropdownClose, a as DropdownOpen } from './dropdown-open-0d314aa4.js';
 export { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 export { u as useElevation } from './useElevation-31bfe1f6.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "2.70.0-beta.2114.0",
+  "version": "2.70.0-beta.2124.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",

package/src/components/or-rich-text-editor-v3/OrRichTextEditor.docs.mdx

@@ -1,16 +1,7 @@
-import {
-  Title,
-  Subtitle,
-  Description,
-  Primary,
-  ArgsTable,
-  Stories,
-  PRIMARY_STORY
-} from '@storybook/addon-docs';
+import { DocsPage } from '@storybook/addon-docs';
 
-<Title />
-<Subtitle />
-<Description />
-<Primary />
-<ArgsTable story={PRIMARY_STORY} />
-<Stories />
+```ts
+import { OrRichTextEditorV3 as OrRichTextEditor } from '@onereach/ui-components';
+```
+
+<DocsPage />

package/src/components/or-rich-text-editor-v3/OrRichTextEditor.stories3.ts

@@ -1,3 +1,4 @@
+// import { action } from '@storybook/addon-actions';
 import { Meta, StoryFn } from '@storybook/vue3';
 import { ref } from 'vue-demi';
 import OrRichTextEditorDocs from './OrRichTextEditor.docs.mdx';
@@ -9,13 +10,17 @@ export default {
 
   argTypes: {
     // Props
-    description: {
+    modelValue: {
       control: { type: 'text' },
     },
-    placeholder: {
+
+    value: { // TODO: Remove Vue 2 fallback
+      table: { disable: true },
+    },
+    description: {
       control: { type: 'text' },
     },
-    modelValue: {
+    placeholder: {
       control: { type: 'text' },
     },
     markdown: {
@@ -24,6 +29,14 @@ export default {
     fullHeight: {
       control: { type: 'boolean' },
     },
+    // Events
+    'update:modelValue': {
+      table: { disable: true },
+    },
+
+    input: {
+      table: { disable: true },
+    },
   },
 
   parameters: {
@@ -45,21 +58,20 @@ const Template: StoryFn<typeof OrRichTextEditor> = (args) => ({
 
   setup() {
     // Refs
-    const text = ref('');
+    const model = ref<string>();
 
     return {
       args,
-      text,
+      model,
     };
   },
 
   template: `
-  <div class="p-md h-screen w-full">
   <OrRichTextEditor
-  v-bind="args"
-  v-model="text"
-  />
-  </div>
+    v-model="model"
+    v-bind="args"
+  >
+  </OrRichTextEditor>
   `,
 });
 

package/src/components/or-rich-text-editor-v3/OrRichTextEditor.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
   >
     <or-label>
@@ -68,9 +67,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onMounted, onBeforeUnmount, computed, watch } from 'vue-demi';
+import { defineComponent, ref, computed, onBeforeUnmount, onMounted, watch } from 'vue-demi';
 import { useClassAttribute } from '../../hooks';
-// import { useFocusTrap, UseFocusTrapReturn } from '@vueuse/integrations/useFocusTrap';
+// // import { useFocusTrap, UseFocusTrapReturn } from '@vueuse/integrations/useFocusTrap';
 import { serialize, deserialize } from './utils/markdown';
 
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
@@ -107,20 +106,14 @@ export default defineComponent({
 
   inheritAttrs: false,
 
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue',
-  },
-
   props: {
     modelValue: {
       type: String,
       default: '',
-      required: false,
     },
     value: { // TODO: Remove Vue 2 fallback
       type: String,
-      default: undefined,
+      default: '',
     },
     toolbar: {
       type: Array,
@@ -148,10 +141,19 @@ export default defineComponent({
     },
   },
 
-  emits: ['update:modelValue', 'input'],
+  emits: [
+    'update:modelValue',
+
+    'input',
+  ],
+
+  expose: [
+    'root',
+  ],
 
-  setup(props, { emit }) {
+  setup(props, context) {
     // Refs
+    const root = ref<HTMLElement>();
     let editor = null as Editor | null;
     const editorRef = ref<HTMLDivElement>();
     const containerRef = ref<HTMLDivElement>();
@@ -196,7 +198,6 @@ export default defineComponent({
       blockquote: 'Quote',
     });
 
-
     onMounted(() => {
       editor = new Editor({
         onUpdate: ({ editor }) => {
@@ -205,19 +206,17 @@ export default defineComponent({
           const text = editor.getText();
           if (props.markdownFormat) {
             markdownOutput.value = serialize(editor.schema, editor.getJSON());
-            emit('update:modelValue', markdownOutput.value);
-            emit('input', markdownOutput.value);
+            proxyModelValue.value = markdownOutput.value;
           } else {
-            emit('update:modelValue', text === '' ? text : html);
-            emit('input', text === '' ? text : html);
+            proxyModelValue.value = text === '' ? text : html;
           }
         },
         onCreate: ({ editor }) => {
           if (props.markdownFormat) {
-            const deserialized = deserialize(editor.schema, props.modelValue ?? props.value);
+            const deserialized = deserialize(editor.schema, proxyModelValue.value);
             editor.commands.setContent(deserialized);
           } else {
-            editor.commands.setContent(props.modelValue ?? props.value);
+            editor.commands.setContent(proxyModelValue.value as string);
           }
         },
         element: editorRef.value,
@@ -272,6 +271,17 @@ export default defineComponent({
     // trap.activate();
 
     // Computed
+    const proxyModelValue = computed({
+      get: () => {
+        return props.modelValue ?? 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');
     });
@@ -283,7 +293,7 @@ export default defineComponent({
       return 'format_paragraph';
     });
 
-    // Methods
+    //Methods
     const handleEditorClick = () => {
       setActiveFormats();
       editor?.commands.focus();
@@ -400,24 +410,16 @@ export default defineComponent({
     };
 
     //Effects
-    watch(() => props.modelValue, (value) => {
+    watch(proxyModelValue, (value) => {
+      console.log('watch', value);
       if (value !== editor?.getHTML() && !props.markdownFormat) {
-        editor?.commands.setContent(value);
+        editor?.commands.setContent(value as string);
       }
       if (props.markdownFormat && value !== markdownOutput.value) {
         editor?.commands.setContent(markdownOutput.value);
       }
     });
 
-    // watch(() => props.value, (value) => { //for vue2
-    //   if (value !== editor?.getHTML() && !props.markdownFormat) {
-    //     editor?.commands.setContent(value);
-    //   }
-    //   if (props.markdownFormat && value !== markdownOutput.value) {
-    //     editor?.commands.setContent(markdownOutput.value);
-    //   }
-    // });
-
     return {
       editor,
       editorRef,
@@ -433,6 +435,7 @@ export default defineComponent({
       toolbarContainerStyles,
       toolbarStyles,
       rootStyles,
+      root,
       toolbarButtonStyles,
       editorInputStyles,
       getIndexOfHeading,