@onereach/ui-components 2.70.0-beta.2127.0 → 2.70.0-beta.2131.0

package/dist/bundled/v2/{OrRichTextEditor-b8952e7d.js → OrRichTextEditor-63ef1357.js}

@@ -36472,11 +36472,11 @@ var script = defineComponent({
   props: {
     modelValue: {
       type: String,
-      default: ''
+      default: undefined
     },
     value: {
       type: String,
-      default: ''
+      default: undefined
     },
     toolbar: {
       type: Array,
@@ -36570,6 +36570,7 @@ var script = defineComponent({
           editor
         }) => {
           if (props.markdownFormat) {
+            console.log(proxyModelValue.value, 'on crete');
             const deserialized = deserialize(editor.schema, proxyModelValue.value);
             editor.commands.setContent(deserialized);
           } else {
@@ -36621,10 +36622,12 @@ var script = defineComponent({
     const proxyModelValue = computed({
       get: () => {
         var _a;
+        console.log('modelV: ', props.modelValue, 'v: ', props.value);
         return (_a = props.modelValue) !== null && _a !== void 0 ? _a : props.value; // TODO: Remove Vue 2 fallback
       },
 
       set: value => {
+        console.log(value, 'set');
         context.emit('input', value);
         context.emit('update:modelValue', value);
       }
@@ -36721,12 +36724,12 @@ var script = defineComponent({
     };
     //Effects
     watch(proxyModelValue, value => {
+      console.log(value, 'watch');
       if (value !== (editor === null || editor === void 0 ? void 0 : editor.getHTML()) && !props.markdownFormat) {
         editor === null || editor === void 0 ? void 0 : editor.commands.setContent(value);
       }
       if (props.markdownFormat && value !== markdownOutput.value) {
         const deserialized = deserialize(editor === null || editor === void 0 ? void 0 : editor.schema, value);
-        console.log(deserialized);
         editor === null || editor === void 0 ? void 0 : editor.commands.setContent(deserialized);
       }
     });
@@ -36776,9 +36779,9 @@ var __vue_render__ = function () {
     }
   }, [_c('div', {
     class: _vm.toolbarContainerStyles
-  }, _vm._l(_vm.toolbar, function (tool) {
+  }, _vm._l(_vm.toolbar, function (tool, index) {
     return _c('div', {
-      key: tool,
+      key: index,
       class: _vm.toolbarStyles
     }, _vm._l(tool, function (item) {
       return _c('div', {
@@ -36854,7 +36857,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = function (inject) {
   if (!inject) return;
-  inject("data-v-829d96c2_0", {
+  inject("data-v-3478af94_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-b8952e7d.js';
+export { _ as OrRichTextEditorV3 } from '../OrRichTextEditor-63ef1357.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

@@ -38,11 +38,11 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
 }> & import("@vue/composition-api").Data, {}, {}, {
     modelValue: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
     };
     value: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
     };
     toolbar: {
         type: ArrayConstructor;
@@ -71,11 +71,11 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
 }, import("@vue/composition-api").ExtractPropTypes<{
     modelValue: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
     };
     value: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
     };
     toolbar: {
         type: ArrayConstructor;

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

@@ -1,4 +1,4 @@
-export { _ as OrRichTextEditorV3 } from '../../OrRichTextEditor-b8952e7d.js';
+export { _ as OrRichTextEditorV3 } from '../../OrRichTextEditor-63ef1357.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-b8952e7d.js';
+export { _ as OrRichTextEditorV3 } from './OrRichTextEditor-63ef1357.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-570b84ee.js → OrRichTextEditor.vue_vue_type_script_lang-47fffbd6.js}

@@ -36473,11 +36473,11 @@ var script = defineComponent({
   props: {
     modelValue: {
       type: String,
-      default: ''
+      default: undefined
     },
     value: {
       type: String,
-      default: ''
+      default: undefined
     },
     toolbar: {
       type: Array,
@@ -36571,6 +36571,7 @@ var script = defineComponent({
           editor
         }) => {
           if (props.markdownFormat) {
+            console.log(proxyModelValue.value, 'on crete');
             const deserialized = deserialize(editor.schema, proxyModelValue.value);
             editor.commands.setContent(deserialized);
           } else {
@@ -36622,10 +36623,12 @@ var script = defineComponent({
     const proxyModelValue = computed({
       get: () => {
         var _a;
+        console.log('modelV: ', props.modelValue, 'v: ', props.value);
         return (_a = props.modelValue) !== null && _a !== void 0 ? _a : props.value; // TODO: Remove Vue 2 fallback
       },
 
       set: value => {
+        console.log(value, 'set');
         context.emit('input', value);
         context.emit('update:modelValue', value);
       }
@@ -36722,12 +36725,12 @@ var script = defineComponent({
     };
     //Effects
     watch(proxyModelValue, value => {
+      console.log(value, 'watch');
       if (value !== (editor === null || editor === void 0 ? void 0 : editor.getHTML()) && !props.markdownFormat) {
         editor === null || editor === void 0 ? void 0 : editor.commands.setContent(value);
       }
       if (props.markdownFormat && value !== markdownOutput.value) {
         const deserialized = deserialize(editor === null || editor === void 0 ? void 0 : editor.schema, value);
-        console.log(deserialized);
         editor === null || editor === void 0 ? void 0 : editor.commands.setContent(deserialized);
       }
     });

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-570b84ee.js';
+export { s as OrRichTextEditorV3 } from '../OrRichTextEditor.vue_vue_type_script_lang-47fffbd6.js';
 import 'vue';
 import 'lodash';
 import '../OrIcon-1cae8a64.js';

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

@@ -38,11 +38,11 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
 }> & import("@vue/composition-api").Data, {}, {}, {
     modelValue: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
     };
     value: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
     };
     toolbar: {
         type: ArrayConstructor;
@@ -71,11 +71,11 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
 }, import("@vue/composition-api").ExtractPropTypes<{
     modelValue: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
     };
     value: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
     };
     toolbar: {
         type: ArrayConstructor;

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-570b84ee.js';
+export { s as OrRichTextEditorV3 } from '../../OrRichTextEditor.vue_vue_type_script_lang-47fffbd6.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-570b84ee.js';
-export { s as OrRichTextEditorV3 } from './OrRichTextEditor.vue_vue_type_script_lang-570b84ee.js';
+import { s as script$Q } from './OrRichTextEditor.vue_vue_type_script_lang-47fffbd6.js';
+export { s as OrRichTextEditorV3 } from './OrRichTextEditor.vue_vue_type_script_lang-47fffbd6.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';
@@ -2921,9 +2921,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     onClick: _cache[1] || (_cache[1] = $event => _ctx.handleEditorClick())
   }, [createElementVNode("div", {
     class: normalizeClass(_ctx.toolbarContainerStyles)
-  }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.toolbar, tool => {
+  }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.toolbar, (tool, index) => {
     return openBlock(), createElementBlock("div", {
-      key: tool,
+      key: index,
       class: normalizeClass(_ctx.toolbarStyles)
     }, [(openBlock(true), createElementBlock(Fragment, null, renderList(tool, item => {
       return openBlock(), createElementBlock("div", {

package/dist/esm/v2/{OrRichTextEditor-d65f9735.js → OrRichTextEditor-c3dee275.js}

@@ -147,11 +147,11 @@ var script = defineComponent({
   props: {
     modelValue: {
       type: String,
-      default: ''
+      default: undefined
     },
     value: {
       type: String,
-      default: ''
+      default: undefined
     },
     toolbar: {
       type: Array,
@@ -245,6 +245,7 @@ var script = defineComponent({
           editor
         }) => {
           if (props.markdownFormat) {
+            console.log(proxyModelValue.value, 'on crete');
             const deserialized = deserialize(editor.schema, proxyModelValue.value);
             editor.commands.setContent(deserialized);
           } else {
@@ -296,10 +297,12 @@ var script = defineComponent({
     const proxyModelValue = computed({
       get: () => {
         var _a;
+        console.log('modelV: ', props.modelValue, 'v: ', props.value);
         return (_a = props.modelValue) !== null && _a !== void 0 ? _a : props.value; // TODO: Remove Vue 2 fallback
       },
 
       set: value => {
+        console.log(value, 'set');
         context.emit('input', value);
         context.emit('update:modelValue', value);
       }
@@ -396,12 +399,12 @@ var script = defineComponent({
     };
     //Effects
     watch(proxyModelValue, value => {
+      console.log(value, 'watch');
       if (value !== (editor === null || editor === void 0 ? void 0 : editor.getHTML()) && !props.markdownFormat) {
         editor === null || editor === void 0 ? void 0 : editor.commands.setContent(value);
       }
       if (props.markdownFormat && value !== markdownOutput.value) {
         const deserialized = deserialize(editor === null || editor === void 0 ? void 0 : editor.schema, value);
-        console.log(deserialized);
         editor === null || editor === void 0 ? void 0 : editor.commands.setContent(deserialized);
       }
     });
@@ -451,9 +454,9 @@ var __vue_render__ = function () {
     }
   }, [_c('div', {
     class: _vm.toolbarContainerStyles
-  }, _vm._l(_vm.toolbar, function (tool) {
+  }, _vm._l(_vm.toolbar, function (tool, index) {
     return _c('div', {
-      key: tool,
+      key: index,
       class: _vm.toolbarStyles
     }, _vm._l(tool, function (item) {
       return _c('div', {
@@ -529,7 +532,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = function (inject) {
   if (!inject) return;
-  inject("data-v-829d96c2_0", {
+  inject("data-v-3478af94_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-d65f9735.js';
+export { _ as OrRichTextEditorV3 } from '../OrRichTextEditor-c3dee275.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

@@ -38,11 +38,11 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
 }> & import("@vue/composition-api").Data, {}, {}, {
     modelValue: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
     };
     value: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
     };
     toolbar: {
         type: ArrayConstructor;
@@ -71,11 +71,11 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
 }, import("@vue/composition-api").ExtractPropTypes<{
     modelValue: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
     };
     value: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
     };
     toolbar: {
         type: ArrayConstructor;

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

@@ -1,4 +1,4 @@
-export { _ as OrRichTextEditorV3 } from '../../OrRichTextEditor-d65f9735.js';
+export { _ as OrRichTextEditorV3 } from '../../OrRichTextEditor-c3dee275.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-d65f9735.js';
+export { _ as OrRichTextEditorV3 } from './OrRichTextEditor-c3dee275.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-b9bdc0a2.js → OrRichTextEditor-b2e87342.js}

@@ -147,11 +147,11 @@ var script = defineComponent({
   props: {
     modelValue: {
       type: String,
-      default: ''
+      default: undefined
     },
     value: {
       type: String,
-      default: ''
+      default: undefined
     },
     toolbar: {
       type: Array,
@@ -245,6 +245,7 @@ var script = defineComponent({
           editor
         }) => {
           if (props.markdownFormat) {
+            console.log(proxyModelValue.value, 'on crete');
             const deserialized = deserialize(editor.schema, proxyModelValue.value);
             editor.commands.setContent(deserialized);
           } else {
@@ -296,10 +297,12 @@ var script = defineComponent({
     const proxyModelValue = computed({
       get: () => {
         var _a;
+        console.log('modelV: ', props.modelValue, 'v: ', props.value);
         return (_a = props.modelValue) !== null && _a !== void 0 ? _a : props.value; // TODO: Remove Vue 2 fallback
       },
 
       set: value => {
+        console.log(value, 'set');
         context.emit('input', value);
         context.emit('update:modelValue', value);
       }
@@ -396,12 +399,12 @@ var script = defineComponent({
     };
     //Effects
     watch(proxyModelValue, value => {
+      console.log(value, 'watch');
       if (value !== (editor === null || editor === void 0 ? void 0 : editor.getHTML()) && !props.markdownFormat) {
         editor === null || editor === void 0 ? void 0 : editor.commands.setContent(value);
       }
       if (props.markdownFormat && value !== markdownOutput.value) {
         const deserialized = deserialize(editor === null || editor === void 0 ? void 0 : editor.schema, value);
-        console.log(deserialized);
         editor === null || editor === void 0 ? void 0 : editor.commands.setContent(deserialized);
       }
     });
@@ -448,9 +451,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     onClick: _cache[1] || (_cache[1] = $event => _ctx.handleEditorClick())
   }, [createElementVNode("div", {
     class: normalizeClass(_ctx.toolbarContainerStyles)
-  }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.toolbar, tool => {
+  }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.toolbar, (tool, index) => {
     return openBlock(), createElementBlock("div", {
-      key: tool,
+      key: index,
       class: normalizeClass(_ctx.toolbarStyles)
     }, [(openBlock(true), createElementBlock(Fragment, null, renderList(tool, item => {
       return openBlock(), createElementBlock("div", {

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-b9bdc0a2.js';
+export { s as OrRichTextEditorV3 } from '../OrRichTextEditor-b2e87342.js';
 import 'vue-demi';
 import 'lodash';
 import 'vue';

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

@@ -38,11 +38,11 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
 }> & import("@vue/composition-api").Data, {}, {}, {
     modelValue: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
     };
     value: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
     };
     toolbar: {
         type: ArrayConstructor;
@@ -71,11 +71,11 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
 }, import("@vue/composition-api").ExtractPropTypes<{
     modelValue: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
     };
     value: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
     };
     toolbar: {
         type: ArrayConstructor;

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

@@ -1,4 +1,4 @@
-export { s as OrRichTextEditorV3 } from '../../OrRichTextEditor-b9bdc0a2.js';
+export { s as OrRichTextEditorV3 } from '../../OrRichTextEditor-b2e87342.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-b9bdc0a2.js';
+export { s as OrRichTextEditorV3 } from './OrRichTextEditor-b2e87342.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.2127.0",
+  "version": "2.70.0-beta.2131.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",

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

@@ -13,7 +13,6 @@ export default {
     modelValue: {
       control: { type: 'text' },
     },
-
     value: { // TODO: Remove Vue 2 fallback
       table: { disable: true },
     },
@@ -23,7 +22,7 @@ export default {
     placeholder: {
       control: { type: 'text' },
     },
-    markdown: {
+    markdownFormat: {
       control: { type: 'boolean' },
     },
     fullHeight: {

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

@@ -13,8 +13,8 @@
     >
       <div :class="toolbarContainerStyles">
         <div
-          v-for="tool in toolbar"
-          :key="tool"
+          v-for="(tool, index) in toolbar"
+          :key="index"
           :class="toolbarStyles"
         >
           <div
@@ -109,11 +109,11 @@ export default defineComponent({
   props: {
     modelValue: {
       type: String,
-      default: '',
+      default: undefined,
     },
     value: { // TODO: Remove Vue 2 fallback
       type: String,
-      default: '',
+      default: undefined,
     },
     toolbar: {
       type: Array,
@@ -213,6 +213,7 @@ export default defineComponent({
         },
         onCreate: ({ editor }) => {
           if (props.markdownFormat) {
+            console.log(proxyModelValue.value, 'on crete');
             const deserialized = deserialize(editor.schema, proxyModelValue.value);
             editor.commands.setContent(deserialized);
           } else {
@@ -273,10 +274,12 @@ export default defineComponent({
     // Computed
     const proxyModelValue = computed({
       get: () => {
+        console.log('modelV: ', props.modelValue, 'v: ', props.value);
         return props.modelValue ?? props.value; // TODO: Remove Vue 2 fallback
       },
 
       set: (value) => {
+        console.log(value, 'set');
         context.emit('input', value);
         context.emit('update:modelValue', value);
       },
@@ -411,12 +414,12 @@ export default defineComponent({
 
     //Effects
     watch(proxyModelValue, (value) => {
+      console.log(value, 'watch');
       if (value !== editor?.getHTML() && !props.markdownFormat) {
         editor?.commands.setContent(value as string);
       }
       if (props.markdownFormat && value !== markdownOutput.value) {
         const deserialized = deserialize(editor?.schema, value);
-        console.log(deserialized);
         editor?.commands.setContent(deserialized);
       }
     });