@onereach/ui-components 4.4.0-beta.2678.0 → 4.4.0-beta.2680.0

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

@@ -1,7 +1,7 @@
 import { defineComponent, ref, onMounted, onBeforeUnmount, computed, watch } from 'vue-demi';
 import { u as useFocusTrap } from '../../useFocusTrap-48767a70.js';
 import { useResizeObserver, onClickOutside } from '@vueuse/core';
-import { B as Blockquote, a as Bold, b as BulletList, C as CodeBlock, H as HardBreak, I as Italic, L as ListItem, O as OrderedList, P as Paragraph, S as Strike, s as serialize, d as deserialize, U as Underline, c as Link, e as Highlight } from '../../markdown-d704b3a8.js';
+import { B as Blockquote, a as Bold, b as BulletList, C as CodeBlock, H as HardBreak, I as Italic, L as ListItem, O as OrderedList, P as Paragraph, S as Strike, s as serialize, d as deserialize, U as Underline, c as Link, e as Highlight } from '../../markdown-d43767b0.js';
 import { EditorContainer, ToolbarContainer, Toolbar, ToolbarButtonFocused, ToolbarButton, EditorInput } from './styles.js';
 import { Formats } from './props.js';
 import { M as Mark, m as mergeAttributes, a as markInputRule, b as markPasteRule, N as Node, E as Extension, k as keydownHandler, D as DecorationSet, c as Decoration, d as callOrReturn, g as getExtensionField, t as textblockTypeInputRule, n as nodeInputRule, e as Editor } from '../../index-1182caa8.js';
@@ -1622,6 +1622,8 @@ var script = defineComponent({
         },
         element: editorRef.value,
         autofocus: props.autofocus,
+        enableInputRules: true,
+        enablePasteRules: true,
         extensions: [codemirrorNode, StarterKit.configure({
           heading: false,
           codeBlock: false
@@ -1655,6 +1657,9 @@ var script = defineComponent({
           attributes: {
             class: 'focus:outline-none'
           }
+        },
+        parseOptions: {
+          preserveWhitespace: true
         }
       });
       setActiveFormats();
@@ -1728,9 +1733,11 @@ var script = defineComponent({
             plugins: editor.extensionManager.plugins
           }));
           if (disableMarkdown.value) {
-            editor === null || editor === void 0 ? void 0 : editor.commands.setContent(serialize(editor === null || editor === void 0 ? void 0 : editor.schema, editor === null || editor === void 0 ? void 0 : editor.getJSON()));
+            const content = serialize(editor === null || editor === void 0 ? void 0 : editor.schema, editor === null || editor === void 0 ? void 0 : editor.getJSON());
+            editor === null || editor === void 0 ? void 0 : editor.commands.clearContent();
+            editor === null || editor === void 0 ? void 0 : editor.commands.insertContent(content);
           } else {
-            editor === null || editor === void 0 ? void 0 : editor.commands.setContent(deserialize(editor === null || editor === void 0 ? void 0 : editor.schema, editor === null || editor === void 0 ? void 0 : editor.getHTML()));
+            editor === null || editor === void 0 ? void 0 : editor.commands.setContent(deserialize(editor === null || editor === void 0 ? void 0 : editor.schema, editor === null || editor === void 0 ? void 0 : editor.getText()));
           }
           break;
         case 'bulletList':
@@ -1865,8 +1872,8 @@ var script = defineComponent({
         editor === null || editor === void 0 ? void 0 : editor.commands.setContent(value);
       }
       if (props.format === 'markdown' && value !== markdownOutput.value) {
-        const deserialized = deserialize(editor === null || editor === void 0 ? void 0 : editor.schema, value);
-        editor === null || editor === void 0 ? void 0 : editor.commands.setContent(deserialized);
+        // const deserialized = deserialize(editor?.schema, value);
+        editor === null || editor === void 0 ? void 0 : editor.commands.setContent(value);
       }
     });
     return {
@@ -1905,7 +1912,7 @@ var script = defineComponent({
   }
 });
 
-var css_248z = ".tiptap-editor-v3 ol{margin:0 24px;list-style:decimal}.tiptap-editor-v3 ul{margin:0 24px;list-style:disc outside none;list-style:initial}.tiptap-editor-v3 blockquote{margin:8px 24px;padding:0 24px;border-left:4px solid #bad1ec}.tiptap-editor-v3 .is-editor-empty::before{content:attr(data-placeholder);height:0;pointer-events:none;float:left}.tiptap-editor-v3 .cm-editor{border:none;border-radius:4px}.tiptap-editor-v3 .cm-editor .cm-scroller{border-radius:4px}.tiptap-editor-v3 .cm-editor.cm-focused{outline:0}.tiptap-editor-v3 .cm-editor .cm-gutters{background-color:rgba(0,95,177,.08);border:none}.tiptap-editor-v3 .cm-editor .cm-gutters .cm-gutterElement{padding:0 10px}.tiptap-editor-v3 .cm-editor .cm-gutters .cm-gutterElement.cm-activeLineGutter{background-color:rgba(0,95,177,.07)}";
+var css_248z = ".tiptap-editor-v3 ol{margin:0 24px;list-style:decimal}.tiptap-editor-v3 .ProseMirror p{margin:4px}.tiptap-editor-v3 .ProseMirror h1,.tiptap-editor-v3 .ProseMirror h2,.tiptap-editor-v3 .ProseMirror h3,.tiptap-editor-v3 .ProseMirror h4,.tiptap-editor-v3 .ProseMirror h5,.tiptap-editor-v3 .ProseMirror h6{margin:4px}.tiptap-editor-v3 ul{margin:0 24px;list-style:disc outside none;list-style:initial}.tiptap-editor-v3 blockquote{margin:8px 24px;padding:0 24px;border-left:4px solid #bad1ec}.tiptap-editor-v3 .is-editor-empty::before{content:attr(data-placeholder);height:0;pointer-events:none;float:left}.tiptap-editor-v3 .cm-editor{border:none;border-radius:4px}.tiptap-editor-v3 .cm-editor .cm-scroller{border-radius:4px}.tiptap-editor-v3 .cm-editor.cm-focused{outline:0}.tiptap-editor-v3 .cm-editor .cm-gutters{background-color:rgba(0,95,177,.08);border:none}.tiptap-editor-v3 .cm-editor .cm-gutters .cm-gutterElement{padding:0 10px}.tiptap-editor-v3 .cm-editor .cm-gutters .cm-gutterElement.cm-activeLineGutter{background-color:rgba(0,95,177,.07)}";
 styleInject(css_248z);
 
 /* script */

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

@@ -2,7 +2,7 @@ export { default as OrRichTextEditorV3 } from './OrRichTextEditor.js';
 import 'vue-demi';
 import '../../useFocusTrap-48767a70.js';
 import '@vueuse/core';
-import '../../markdown-d704b3a8.js';
+import '../../markdown-d43767b0.js';
 import '../../index-85c2efe8.js';
 import 'node:punycode';
 import '../../index-1182caa8.js';

package/dist/bundled/v2/components/OrRichTextEditorV3/utils/markdown.js

@@ -1,4 +1,4 @@
-export { d as deserialize, s as serialize } from '../../../markdown-d704b3a8.js';
+export { d as deserialize, s as serialize } from '../../../markdown-d43767b0.js';
 import '../../../index-85c2efe8.js';
 import 'node:punycode';
 import '../../../index-1182caa8.js';

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

@@ -252,7 +252,7 @@ import './OrToast/Timer.js';
 import './OrToastV3/styles.js';
 import './OrToastV3/composable/useToastEventBus.js';
 import './OrToastV3/Timer.js';
-import '../markdown-d704b3a8.js';
+import '../markdown-d43767b0.js';
 import '../index-85c2efe8.js';
 import 'node:punycode';
 import '../index-1182caa8.js';

package/dist/bundled/v2/index.js

@@ -227,7 +227,7 @@ import './components/OrToastV3/composable/useToastEventBus.js';
 import './components/OrToastV3/styles.js';
 import './components/OrToastV3/Timer.js';
 import './useFocusTrap-48767a70.js';
-import './markdown-d704b3a8.js';
+import './markdown-d43767b0.js';
 import './index-85c2efe8.js';
 import 'node:punycode';
 import './index-1182caa8.js';

package/dist/bundled/v2/{markdown-d704b3a8.js → markdown-d43767b0.js}

@@ -17918,8 +17918,8 @@ const serializerMarks = {
     expelEnclosingWhitespace: true
   },
   [Italic.name]: {
-    open: '_',
-    close: '_',
+    open: ' _',
+    close: '_ ',
     mixable: true,
     expelEnclosingWhitespace: true
   },
@@ -17956,11 +17956,16 @@ const isPlainURL = (link, parent, index, side) => {
 const serialize = (schema, content) => {
   const proseMirrorDocument = schema.nodeFromJSON(content);
   const serializer = new MarkdownSerializer(serializerNodes, serializerMarks);
-  return serializer.serialize(proseMirrorDocument);
+  return serializer.serialize(proseMirrorDocument, {
+    tightLists: true
+  });
 };
 const deserialize = (schema, content) => {
   if (!content) return null;
-  const html = marked.parse(content);
+  const html = marked(content, {
+    gfm: true,
+    breaks: true
+  });
   if (!html) return null;
   const parser = new DOMParser();
   const {

package/dist/bundled/v3/{OrRichTextEditor.vue_vue_type_script_lang-c1cc12b1.js → OrRichTextEditor.vue_vue_type_script_lang-6d5a6b7e.js}

@@ -1,7 +1,7 @@
 import { defineComponent, ref, onMounted, onBeforeUnmount, computed, watch } from 'vue-demi';
 import { u as useFocusTrap } from './useFocusTrap-48767a70.js';
 import { useResizeObserver, onClickOutside } from '@vueuse/core';
-import { B as Blockquote, a as Bold, b as BulletList, C as CodeBlock, H as HardBreak, I as Italic, L as ListItem, O as OrderedList, P as Paragraph, S as Strike, s as serialize, d as deserialize, U as Underline, c as Link, e as Highlight } from './markdown-d704b3a8.js';
+import { B as Blockquote, a as Bold, b as BulletList, C as CodeBlock, H as HardBreak, I as Italic, L as ListItem, O as OrderedList, P as Paragraph, S as Strike, s as serialize, d as deserialize, U as Underline, c as Link, e as Highlight } from './markdown-d43767b0.js';
 import { EditorContainer, ToolbarContainer, Toolbar, ToolbarButtonFocused, ToolbarButton, EditorInput } from './components/OrRichTextEditorV3/styles.js';
 import { Formats } from './components/OrRichTextEditorV3/props.js';
 import { M as Mark, m as mergeAttributes, a as markInputRule, b as markPasteRule, N as Node, E as Extension, k as keydownHandler, D as DecorationSet, c as Decoration, d as callOrReturn, g as getExtensionField, t as textblockTypeInputRule, n as nodeInputRule, e as Editor } from './index-1182caa8.js';
@@ -1576,6 +1576,8 @@ var script = defineComponent({
         },
         element: editorRef.value,
         autofocus: props.autofocus,
+        enableInputRules: true,
+        enablePasteRules: true,
         extensions: [codemirrorNode, StarterKit.configure({
           heading: false,
           codeBlock: false
@@ -1609,6 +1611,9 @@ var script = defineComponent({
           attributes: {
             class: 'focus:outline-none'
           }
+        },
+        parseOptions: {
+          preserveWhitespace: true
         }
       });
       setActiveFormats();
@@ -1682,9 +1687,11 @@ var script = defineComponent({
             plugins: editor.extensionManager.plugins
           }));
           if (disableMarkdown.value) {
-            editor === null || editor === void 0 ? void 0 : editor.commands.setContent(serialize(editor === null || editor === void 0 ? void 0 : editor.schema, editor === null || editor === void 0 ? void 0 : editor.getJSON()));
+            const content = serialize(editor === null || editor === void 0 ? void 0 : editor.schema, editor === null || editor === void 0 ? void 0 : editor.getJSON());
+            editor === null || editor === void 0 ? void 0 : editor.commands.clearContent();
+            editor === null || editor === void 0 ? void 0 : editor.commands.insertContent(content);
           } else {
-            editor === null || editor === void 0 ? void 0 : editor.commands.setContent(deserialize(editor === null || editor === void 0 ? void 0 : editor.schema, editor === null || editor === void 0 ? void 0 : editor.getHTML()));
+            editor === null || editor === void 0 ? void 0 : editor.commands.setContent(deserialize(editor === null || editor === void 0 ? void 0 : editor.schema, editor === null || editor === void 0 ? void 0 : editor.getText()));
           }
           break;
         case 'bulletList':
@@ -1819,8 +1826,8 @@ var script = defineComponent({
         editor === null || editor === void 0 ? void 0 : editor.commands.setContent(value);
       }
       if (props.format === 'markdown' && value !== markdownOutput.value) {
-        const deserialized = deserialize(editor === null || editor === void 0 ? void 0 : editor.schema, value);
-        editor === null || editor === void 0 ? void 0 : editor.commands.setContent(deserialized);
+        // const deserialized = deserialize(editor?.schema, value);
+        editor === null || editor === void 0 ? void 0 : editor.commands.setContent(value);
       }
     });
     return {

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

@@ -1,11 +1,11 @@
-import { s as script } from '../../OrRichTextEditor.vue_vue_type_script_lang-c1cc12b1.js';
-export { s as default } from '../../OrRichTextEditor.vue_vue_type_script_lang-c1cc12b1.js';
+import { s as script } from '../../OrRichTextEditor.vue_vue_type_script_lang-6d5a6b7e.js';
+export { s as default } from '../../OrRichTextEditor.vue_vue_type_script_lang-6d5a6b7e.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode, withCtx, createTextVNode, toDisplayString, createElementVNode, Fragment, renderList, createBlock, createCommentVNode, renderSlot } from 'vue';
 import { s as styleInject } from '../../style-inject.es-4c6f2515.js';
 import 'vue-demi';
 import '../../useFocusTrap-48767a70.js';
 import '@vueuse/core';
-import '../../markdown-d704b3a8.js';
+import '../../markdown-d43767b0.js';
 import '../../index-85c2efe8.js';
 import 'node:punycode';
 import '../../index-1182caa8.js';
@@ -267,7 +267,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, 8 /* PROPS */, ["is-open"])], 2 /* CLASS */);
 }
 
-var css_248z = ".tiptap-editor-v3 ol {\n  margin: 0 24px;\n  list-style: decimal;\n}\n.tiptap-editor-v3 ul {\n  margin: 0 24px;\n  list-style: disc outside none;\n  list-style: initial;\n}\n.tiptap-editor-v3 blockquote {\n  margin: 8px 24px;\n  padding: 0 24px;\n  border-left: 4px solid #bad1ec;\n}\n.tiptap-editor-v3 .is-editor-empty::before {\n  content: attr(data-placeholder);\n  height: 0;\n  pointer-events: none;\n  float: left;\n}\n.tiptap-editor-v3 .cm-editor {\n  border: none;\n  border-radius: 4px;\n}\n.tiptap-editor-v3 .cm-editor .cm-scroller {\n  border-radius: 4px;\n}\n.tiptap-editor-v3 .cm-editor.cm-focused {\n  outline: none;\n}\n.tiptap-editor-v3 .cm-editor .cm-gutters {\n  background-color: rgba(0, 95, 177, 0.08);\n  border: none;\n}\n.tiptap-editor-v3 .cm-editor .cm-gutters .cm-gutterElement {\n  padding: 0 10px;\n}\n.tiptap-editor-v3 .cm-editor .cm-gutters .cm-gutterElement.cm-activeLineGutter {\n  background-color: rgba(0, 95, 177, 0.07);\n}";
+var css_248z = ".tiptap-editor-v3 ol {\n  margin: 0 24px;\n  list-style: decimal;\n}\n.tiptap-editor-v3 .ProseMirror p {\n  margin: 4px;\n}\n.tiptap-editor-v3 .ProseMirror h1, .tiptap-editor-v3 .ProseMirror h2, .tiptap-editor-v3 .ProseMirror h3, .tiptap-editor-v3 .ProseMirror h4, .tiptap-editor-v3 .ProseMirror h5, .tiptap-editor-v3 .ProseMirror h6 {\n  margin: 4px;\n}\n.tiptap-editor-v3 ul {\n  margin: 0 24px;\n  list-style: disc outside none;\n  list-style: initial;\n}\n.tiptap-editor-v3 blockquote {\n  margin: 8px 24px;\n  padding: 0 24px;\n  border-left: 4px solid #bad1ec;\n}\n.tiptap-editor-v3 .is-editor-empty::before {\n  content: attr(data-placeholder);\n  height: 0;\n  pointer-events: none;\n  float: left;\n}\n.tiptap-editor-v3 .cm-editor {\n  border: none;\n  border-radius: 4px;\n}\n.tiptap-editor-v3 .cm-editor .cm-scroller {\n  border-radius: 4px;\n}\n.tiptap-editor-v3 .cm-editor.cm-focused {\n  outline: none;\n}\n.tiptap-editor-v3 .cm-editor .cm-gutters {\n  background-color: rgba(0, 95, 177, 0.08);\n  border: none;\n}\n.tiptap-editor-v3 .cm-editor .cm-gutters .cm-gutterElement {\n  padding: 0 10px;\n}\n.tiptap-editor-v3 .cm-editor .cm-gutters .cm-gutterElement.cm-activeLineGutter {\n  background-color: rgba(0, 95, 177, 0.07);\n}";
 styleInject(css_248z);
 
 script.render = render;

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

@@ -1,8 +1,8 @@
-export { s as OrRichTextEditorV3 } from '../../OrRichTextEditor.vue_vue_type_script_lang-c1cc12b1.js';
+export { s as OrRichTextEditorV3 } from '../../OrRichTextEditor.vue_vue_type_script_lang-6d5a6b7e.js';
 import 'vue-demi';
 import '../../useFocusTrap-48767a70.js';
 import '@vueuse/core';
-import '../../markdown-d704b3a8.js';
+import '../../markdown-d43767b0.js';
 import '../../index-85c2efe8.js';
 import 'node:punycode';
 import '../../index-1182caa8.js';

package/dist/bundled/v3/components/OrRichTextEditorV3/utils/markdown.js

@@ -1,4 +1,4 @@
-export { d as deserialize, s as serialize } from '../../../markdown-d704b3a8.js';
+export { d as deserialize, s as serialize } from '../../../markdown-d43767b0.js';
 import '../../../index-85c2efe8.js';
 import 'node:punycode';
 import '../../../index-1182caa8.js';

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

@@ -155,7 +155,7 @@ export { p as PropsV3 } from '../props-7be029c7.js';
 export { s as OrTooltip } from '../OrTooltip.vue_vue_type_script_lang-76a6b7f4.js';
 export { s as OrTooltipContent } from '../OrTooltipContent.vue_vue_type_script_lang-969c20ed.js';
 export { s as OrTooltipV3 } from '../OrTooltip.vue_vue_type_script_lang-56496d67.js';
-export { s as OrRichTextEditorV3 } from '../OrRichTextEditor.vue_vue_type_script_lang-c1cc12b1.js';
+export { s as OrRichTextEditorV3 } from '../OrRichTextEditor.vue_vue_type_script_lang-6d5a6b7e.js';
 import 'vue-demi';
 import 'lodash';
 import './OrIcon/OrIcon.js';
@@ -293,7 +293,7 @@ import './OrToast/Timer.js';
 import './OrToastV3/styles.js';
 import './OrToastV3/composable/useToastEventBus.js';
 import './OrToastV3/Timer.js';
-import '../markdown-d704b3a8.js';
+import '../markdown-d43767b0.js';
 import '../index-85c2efe8.js';
 import 'node:punycode';
 import '../index-1182caa8.js';

package/dist/bundled/v3/index.js

@@ -124,7 +124,7 @@ import './components/OrToastContainerV3/OrToastContainer.js';
 export { s as OrToastContainerV3 } from './OrToastContainer.vue_vue_type_script_lang-9a91e4ab.js';
 export { default as useToastV3 } from './components/OrToastV3/composable/useToast.js';
 import './components/OrRichTextEditorV3/OrRichTextEditor.js';
-export { s as OrRichTextEditorV3 } from './OrRichTextEditor.vue_vue_type_script_lang-c1cc12b1.js';
+export { s as OrRichTextEditorV3 } from './OrRichTextEditor.vue_vue_type_script_lang-6d5a6b7e.js';
 export { OR_AVATAR_SIZE } from './components/OrAvatar/constants.js';
 export { AvatarColor, AvatarSize } from './components/OrAvatarV3/props.js';
 export { s as OrBottomSheetV3 } from './OrBottomSheet.vue_vue_type_script_lang-a81b2abb.js';
@@ -325,7 +325,7 @@ import './components/OrToastV3/styles.js';
 import './components/OrTeleportV3/OrTeleport.js';
 import './components/OrToastV3/Timer.js';
 import './useFocusTrap-48767a70.js';
-import './markdown-d704b3a8.js';
+import './markdown-d43767b0.js';
 import './index-85c2efe8.js';
 import 'node:punycode';
 import './index-1182caa8.js';

package/dist/bundled/v3/{markdown-d704b3a8.js → markdown-d43767b0.js}

@@ -17918,8 +17918,8 @@ const serializerMarks = {
     expelEnclosingWhitespace: true
   },
   [Italic.name]: {
-    open: '_',
-    close: '_',
+    open: ' _',
+    close: '_ ',
     mixable: true,
     expelEnclosingWhitespace: true
   },
@@ -17956,11 +17956,16 @@ const isPlainURL = (link, parent, index, side) => {
 const serialize = (schema, content) => {
   const proseMirrorDocument = schema.nodeFromJSON(content);
   const serializer = new MarkdownSerializer(serializerNodes, serializerMarks);
-  return serializer.serialize(proseMirrorDocument);
+  return serializer.serialize(proseMirrorDocument, {
+    tightLists: true
+  });
 };
 const deserialize = (schema, content) => {
   if (!content) return null;
-  const html = marked.parse(content);
+  const html = marked(content, {
+    gfm: true,
+    breaks: true
+  });
   if (!html) return null;
   const parser = new DOMParser();
   const {

package/dist/esm/v2/{OrRichTextEditor-c184da4b.js → OrRichTextEditor-cb50c4f6.js}

@@ -55,8 +55,8 @@ const serializerMarks = {
     expelEnclosingWhitespace: true
   },
   [Italic.name]: {
-    open: '_',
-    close: '_',
+    open: ' _',
+    close: '_ ',
     mixable: true,
     expelEnclosingWhitespace: true
   },
@@ -93,11 +93,16 @@ const isPlainURL = (link, parent, index, side) => {
 const serialize = (schema, content) => {
   const proseMirrorDocument = schema.nodeFromJSON(content);
   const serializer = new MarkdownSerializer(serializerNodes, serializerMarks);
-  return serializer.serialize(proseMirrorDocument);
+  return serializer.serialize(proseMirrorDocument, {
+    tightLists: true
+  });
 };
 const deserialize = (schema, content) => {
   if (!content) return null;
-  const html = marked.parse(content);
+  const html = marked(content, {
+    gfm: true,
+    breaks: true
+  });
   if (!html) return null;
   const parser = new DOMParser();
   const {
@@ -340,6 +345,8 @@ var script = defineComponent({
         },
         element: editorRef.value,
         autofocus: props.autofocus,
+        enableInputRules: true,
+        enablePasteRules: true,
         extensions: [codemirrorNode, StarterKit.configure({
           heading: false,
           codeBlock: false
@@ -373,6 +380,9 @@ var script = defineComponent({
           attributes: {
             class: 'focus:outline-none'
           }
+        },
+        parseOptions: {
+          preserveWhitespace: true
         }
       });
       setActiveFormats();
@@ -446,9 +456,11 @@ var script = defineComponent({
             plugins: editor.extensionManager.plugins
           }));
           if (disableMarkdown.value) {
-            editor === null || editor === void 0 ? void 0 : editor.commands.setContent(serialize(editor === null || editor === void 0 ? void 0 : editor.schema, editor === null || editor === void 0 ? void 0 : editor.getJSON()));
+            const content = serialize(editor === null || editor === void 0 ? void 0 : editor.schema, editor === null || editor === void 0 ? void 0 : editor.getJSON());
+            editor === null || editor === void 0 ? void 0 : editor.commands.clearContent();
+            editor === null || editor === void 0 ? void 0 : editor.commands.insertContent(content);
           } else {
-            editor === null || editor === void 0 ? void 0 : editor.commands.setContent(deserialize(editor === null || editor === void 0 ? void 0 : editor.schema, editor === null || editor === void 0 ? void 0 : editor.getHTML()));
+            editor === null || editor === void 0 ? void 0 : editor.commands.setContent(deserialize(editor === null || editor === void 0 ? void 0 : editor.schema, editor === null || editor === void 0 ? void 0 : editor.getText()));
           }
           break;
         case 'bulletList':
@@ -583,8 +595,8 @@ var script = defineComponent({
         editor === null || editor === void 0 ? void 0 : editor.commands.setContent(value);
       }
       if (props.format === 'markdown' && value !== markdownOutput.value) {
-        const deserialized = deserialize(editor === null || editor === void 0 ? void 0 : editor.schema, value);
-        editor === null || editor === void 0 ? void 0 : editor.commands.setContent(deserialized);
+        // const deserialized = deserialize(editor?.schema, value);
+        editor === null || editor === void 0 ? void 0 : editor.commands.setContent(value);
       }
     });
     return {
@@ -623,7 +635,7 @@ var script = defineComponent({
   }
 });
 
-var css_248z = ".tiptap-editor-v3 ol{margin:0 24px;list-style:decimal}.tiptap-editor-v3 ul{margin:0 24px;list-style:initial}.tiptap-editor-v3 blockquote{margin:8px 24px;padding:0 24px;border-left:4px solid #bad1ec}.tiptap-editor-v3 .is-editor-empty::before{content:attr(data-placeholder);height:0;pointer-events:none;float:left}.tiptap-editor-v3 .cm-editor{border:none;border-radius:4px}.tiptap-editor-v3 .cm-editor .cm-scroller{border-radius:4px}.tiptap-editor-v3 .cm-editor.cm-focused{outline:0}.tiptap-editor-v3 .cm-editor .cm-gutters{background-color:rgba(0,95,177,.08);border:none}.tiptap-editor-v3 .cm-editor .cm-gutters .cm-gutterElement{padding:0 10px}.tiptap-editor-v3 .cm-editor .cm-gutters .cm-gutterElement.cm-activeLineGutter{background-color:rgba(0,95,177,.07)}";
+var css_248z = ".tiptap-editor-v3 ol{margin:0 24px;list-style:decimal}.tiptap-editor-v3 .ProseMirror p{margin:4px}.tiptap-editor-v3 .ProseMirror h1,.tiptap-editor-v3 .ProseMirror h2,.tiptap-editor-v3 .ProseMirror h3,.tiptap-editor-v3 .ProseMirror h4,.tiptap-editor-v3 .ProseMirror h5,.tiptap-editor-v3 .ProseMirror h6{margin:4px}.tiptap-editor-v3 ul{margin:0 24px;list-style:initial}.tiptap-editor-v3 blockquote{margin:8px 24px;padding:0 24px;border-left:4px solid #bad1ec}.tiptap-editor-v3 .is-editor-empty::before{content:attr(data-placeholder);height:0;pointer-events:none;float:left}.tiptap-editor-v3 .cm-editor{border:none;border-radius:4px}.tiptap-editor-v3 .cm-editor .cm-scroller{border-radius:4px}.tiptap-editor-v3 .cm-editor.cm-focused{outline:0}.tiptap-editor-v3 .cm-editor .cm-gutters{background-color:rgba(0,95,177,.08);border:none}.tiptap-editor-v3 .cm-editor .cm-gutters .cm-gutterElement{padding:0 10px}.tiptap-editor-v3 .cm-editor .cm-gutters .cm-gutterElement.cm-activeLineGutter{background-color:rgba(0,95,177,.07)}";
 styleInject(css_248z);
 
 /* script */

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

@@ -110,7 +110,7 @@ export { p as PropsV3, a as useQueueV3, u as useToastV3 } from '../useToast-a133
 export { _ as OrTooltip } from '../OrTooltip-97a42707.js';
 export { _ as OrTooltipContent } from '../OrTooltipContent-d85e1071.js';
 export { _ as OrTooltipV3 } from '../OrTooltip-93a3eefb.js';
-export { _ as OrRichTextEditorV3 } from '../OrRichTextEditor-c184da4b.js';
+export { _ as OrRichTextEditorV3 } from '../OrRichTextEditor-cb50c4f6.js';
 import 'vue-demi';
 import 'lodash';
 import '../style-inject.es-4c6f2515.js';

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

@@ -1,4 +1,4 @@
-export { _ as OrRichTextEditorV3 } from '../../OrRichTextEditor-c184da4b.js';
+export { _ as OrRichTextEditorV3 } from '../../OrRichTextEditor-cb50c4f6.js';
 import 'vue-demi';
 import '@vueuse/integrations/useFocusTrap';
 import '@vueuse/core';

package/dist/esm/v2/index.js

@@ -110,7 +110,7 @@ export { p as PropsV3, a as useQueueV3, u as useToastV3 } from './useToast-a1332
 export { _ as OrTooltip } from './OrTooltip-97a42707.js';
 export { _ as OrTooltipContent } from './OrTooltipContent-d85e1071.js';
 export { _ as OrTooltipV3 } from './OrTooltip-93a3eefb.js';
-export { _ as OrRichTextEditorV3 } from './OrRichTextEditor-c184da4b.js';
+export { _ as OrRichTextEditorV3 } from './OrRichTextEditor-cb50c4f6.js';
 export { D as DropdownClose, a as DropdownOpen } from './dropdown-open-e1f90e0a.js';
 export { u as useControlAttributes, a as useIdAttribute } from './useIdAttribute-859439f0.js';
 export { u as useElevation } from './useElevation-b5a49746.js';

package/dist/esm/v3/{OrRichTextEditor-592db26c.js → OrRichTextEditor-c3560ddb.js}

@@ -55,8 +55,8 @@ const serializerMarks = {
     expelEnclosingWhitespace: true
   },
   [Italic.name]: {
-    open: '_',
-    close: '_',
+    open: ' _',
+    close: '_ ',
     mixable: true,
     expelEnclosingWhitespace: true
   },
@@ -93,11 +93,16 @@ const isPlainURL = (link, parent, index, side) => {
 const serialize = (schema, content) => {
   const proseMirrorDocument = schema.nodeFromJSON(content);
   const serializer = new MarkdownSerializer(serializerNodes, serializerMarks);
-  return serializer.serialize(proseMirrorDocument);
+  return serializer.serialize(proseMirrorDocument, {
+    tightLists: true
+  });
 };
 const deserialize = (schema, content) => {
   if (!content) return null;
-  const html = marked.parse(content);
+  const html = marked(content, {
+    gfm: true,
+    breaks: true
+  });
   if (!html) return null;
   const parser = new DOMParser();
   const {
@@ -340,6 +345,8 @@ var script = defineComponent({
         },
         element: editorRef.value,
         autofocus: props.autofocus,
+        enableInputRules: true,
+        enablePasteRules: true,
         extensions: [codemirrorNode, StarterKit.configure({
           heading: false,
           codeBlock: false
@@ -373,6 +380,9 @@ var script = defineComponent({
           attributes: {
             class: 'focus:outline-none'
           }
+        },
+        parseOptions: {
+          preserveWhitespace: true
         }
       });
       setActiveFormats();
@@ -446,9 +456,11 @@ var script = defineComponent({
             plugins: editor.extensionManager.plugins
           }));
           if (disableMarkdown.value) {
-            editor === null || editor === void 0 ? void 0 : editor.commands.setContent(serialize(editor === null || editor === void 0 ? void 0 : editor.schema, editor === null || editor === void 0 ? void 0 : editor.getJSON()));
+            const content = serialize(editor === null || editor === void 0 ? void 0 : editor.schema, editor === null || editor === void 0 ? void 0 : editor.getJSON());
+            editor === null || editor === void 0 ? void 0 : editor.commands.clearContent();
+            editor === null || editor === void 0 ? void 0 : editor.commands.insertContent(content);
           } else {
-            editor === null || editor === void 0 ? void 0 : editor.commands.setContent(deserialize(editor === null || editor === void 0 ? void 0 : editor.schema, editor === null || editor === void 0 ? void 0 : editor.getHTML()));
+            editor === null || editor === void 0 ? void 0 : editor.commands.setContent(deserialize(editor === null || editor === void 0 ? void 0 : editor.schema, editor === null || editor === void 0 ? void 0 : editor.getText()));
           }
           break;
         case 'bulletList':
@@ -583,8 +595,8 @@ var script = defineComponent({
         editor === null || editor === void 0 ? void 0 : editor.commands.setContent(value);
       }
       if (props.format === 'markdown' && value !== markdownOutput.value) {
-        const deserialized = deserialize(editor === null || editor === void 0 ? void 0 : editor.schema, value);
-        editor === null || editor === void 0 ? void 0 : editor.commands.setContent(deserialized);
+        // const deserialized = deserialize(editor?.schema, value);
+        editor === null || editor === void 0 ? void 0 : editor.commands.setContent(value);
       }
     });
     return {
@@ -804,7 +816,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, 8 /* PROPS */, ["is-open"])], 2 /* CLASS */);
 }
 
-var css_248z = ".tiptap-editor-v3 ol {\n  margin: 0 24px;\n  list-style: decimal;\n}\n.tiptap-editor-v3 ul {\n  margin: 0 24px;\n  list-style: initial;\n}\n.tiptap-editor-v3 blockquote {\n  margin: 8px 24px;\n  padding: 0 24px;\n  border-left: 4px solid #bad1ec;\n}\n.tiptap-editor-v3 .is-editor-empty::before {\n  content: attr(data-placeholder);\n  height: 0;\n  pointer-events: none;\n  float: left;\n}\n.tiptap-editor-v3 .cm-editor {\n  border: none;\n  border-radius: 4px;\n}\n.tiptap-editor-v3 .cm-editor .cm-scroller {\n  border-radius: 4px;\n}\n.tiptap-editor-v3 .cm-editor.cm-focused {\n  outline: none;\n}\n.tiptap-editor-v3 .cm-editor .cm-gutters {\n  background-color: rgba(0, 95, 177, 0.08);\n  border: none;\n}\n.tiptap-editor-v3 .cm-editor .cm-gutters .cm-gutterElement {\n  padding: 0 10px;\n}\n.tiptap-editor-v3 .cm-editor .cm-gutters .cm-gutterElement.cm-activeLineGutter {\n  background-color: rgba(0, 95, 177, 0.07);\n}";
+var css_248z = ".tiptap-editor-v3 ol {\n  margin: 0 24px;\n  list-style: decimal;\n}\n.tiptap-editor-v3 .ProseMirror p {\n  margin: 4px;\n}\n.tiptap-editor-v3 .ProseMirror h1, .tiptap-editor-v3 .ProseMirror h2, .tiptap-editor-v3 .ProseMirror h3, .tiptap-editor-v3 .ProseMirror h4, .tiptap-editor-v3 .ProseMirror h5, .tiptap-editor-v3 .ProseMirror h6 {\n  margin: 4px;\n}\n.tiptap-editor-v3 ul {\n  margin: 0 24px;\n  list-style: initial;\n}\n.tiptap-editor-v3 blockquote {\n  margin: 8px 24px;\n  padding: 0 24px;\n  border-left: 4px solid #bad1ec;\n}\n.tiptap-editor-v3 .is-editor-empty::before {\n  content: attr(data-placeholder);\n  height: 0;\n  pointer-events: none;\n  float: left;\n}\n.tiptap-editor-v3 .cm-editor {\n  border: none;\n  border-radius: 4px;\n}\n.tiptap-editor-v3 .cm-editor .cm-scroller {\n  border-radius: 4px;\n}\n.tiptap-editor-v3 .cm-editor.cm-focused {\n  outline: none;\n}\n.tiptap-editor-v3 .cm-editor .cm-gutters {\n  background-color: rgba(0, 95, 177, 0.08);\n  border: none;\n}\n.tiptap-editor-v3 .cm-editor .cm-gutters .cm-gutterElement {\n  padding: 0 10px;\n}\n.tiptap-editor-v3 .cm-editor .cm-gutters .cm-gutterElement.cm-activeLineGutter {\n  background-color: rgba(0, 95, 177, 0.07);\n}";
 styleInject(css_248z);
 
 script.render = render;

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

@@ -108,7 +108,7 @@ export { p as PropsV3, a as useQueueV3, u as useToastV3 } from '../useToast-a133
 export { s as OrTooltip } from '../OrTooltip-89ce98e8.js';
 export { s as OrTooltipContent } from '../OrTooltipContent-37a5f562.js';
 export { s as OrTooltipV3 } from '../OrTooltip-4bb0054a.js';
-export { s as OrRichTextEditorV3 } from '../OrRichTextEditor-592db26c.js';
+export { s as OrRichTextEditorV3 } from '../OrRichTextEditor-c3560ddb.js';
 import 'vue-demi';
 import 'lodash';
 import 'vue';

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

@@ -1,4 +1,4 @@
-export { s as OrRichTextEditorV3 } from '../../OrRichTextEditor-592db26c.js';
+export { s as OrRichTextEditorV3 } from '../../OrRichTextEditor-c3560ddb.js';
 import 'vue-demi';
 import '@vueuse/integrations/useFocusTrap';
 import '@vueuse/core';

package/dist/esm/v3/index.js

@@ -108,7 +108,7 @@ export { p as PropsV3, a as useQueueV3, u as useToastV3 } from './useToast-a1332
 export { s as OrTooltip } from './OrTooltip-89ce98e8.js';
 export { s as OrTooltipContent } from './OrTooltipContent-37a5f562.js';
 export { s as OrTooltipV3 } from './OrTooltip-4bb0054a.js';
-export { s as OrRichTextEditorV3 } from './OrRichTextEditor-592db26c.js';
+export { s as OrRichTextEditorV3 } from './OrRichTextEditor-c3560ddb.js';
 export { D as DropdownClose, a as DropdownOpen } from './dropdown-open-e1f90e0a.js';
 export { u as useControlAttributes, a as useIdAttribute } from './useIdAttribute-859439f0.js';
 export { u as useElevation } from './useElevation-b5a49746.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "4.4.0-beta.2678.0",
+  "version": "4.4.0-beta.2680.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",
@@ -38,7 +38,7 @@
     "@codemirror/lang-json": "6.0.0",
     "@codemirror/lang-markdown": "6.0.1",
     "@floating-ui/dom": "0.3.1",
-    "@onereach/styles": "^2.39.4-beta.2678.0",
+    "@onereach/styles": "^2.39.4-beta.2680.0",
     "@splidejs/splide": "4.0.6",
     "@tiptap/core": "2.0.2",
     "@tiptap/extension-blockquote": "2.0.2",

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

@@ -131,16 +131,8 @@ Markdown.args = {
   placeholder: 'Write something...',
   format: 'markdown',
   modelValue: `
-  export async function beforeSaveFlow() {}
-
-  export async function beforeActivateFlow() {}
-
-  export async function flowDeactivated() {}
-
-  export async function flowDeleted() {}
-
-  export async function stepAddedToCanvas() {}
-
-  export async function stepRemovedFromCanvas() {}
+  **export**   
+  _export_   
+  ~export~   
   `,
 };

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

@@ -341,6 +341,8 @@ export default defineComponent({
         },
         element: editorRef.value,
         autofocus: props.autofocus,
+        enableInputRules: true,
+        enablePasteRules: true,
         extensions: [
           codemirrorNode,
           StarterKit.configure({
@@ -382,6 +384,9 @@ export default defineComponent({
             class: 'focus:outline-none',
           },
         },
+        parseOptions: {
+          preserveWhitespace: true,
+        },
       });
       setActiveFormats();
       trap.activate();
@@ -465,9 +470,11 @@ export default defineComponent({
           }));
 
           if (disableMarkdown.value) {
-            editor?.commands.setContent(serialize(editor?.schema, editor?.getJSON()));
+            const content = serialize(editor?.schema, editor?.getJSON());
+            editor?.commands.clearContent();
+            editor?.commands.insertContent(content);
           } else {
-            editor?.commands.setContent(deserialize(editor?.schema, editor?.getHTML()));
+            editor?.commands.setContent(deserialize(editor?.schema, editor?.getText()));
           }
           break;
         case 'bulletList':
@@ -628,8 +635,8 @@ export default defineComponent({
         editor?.commands.setContent(value as string);
       }
       if (props.format === 'markdown' && value !== markdownOutput.value) {
-        const deserialized = deserialize(editor?.schema, value);
-        editor?.commands.setContent(deserialized);
+        // const deserialized = deserialize(editor?.schema, value);
+        editor?.commands.setContent(value as string);
       }
     });
 
@@ -677,6 +684,17 @@ export default defineComponent({
     list-style: decimal;
   }
 
+  .ProseMirror {
+    p {
+      margin: 4px;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+      margin: 4px;
+    }
+  }
+
+
   ul {
     margin: 0 24px;
     list-style: initial;

package/src/components/or-rich-text-editor-v3/utils/markdown.ts

@@ -40,8 +40,8 @@ const serializerMarks = {
     expelEnclosingWhitespace: true,
   },
   [Italic.name]: {
-    open: '_',
-    close: '_',
+    open: ' _',
+    close: '_ ',
     mixable: true,
     expelEnclosingWhitespace: true,
   },
@@ -94,13 +94,16 @@ const serialize = (schema: any, content: any) => {
     serializerMarks,
   );
 
-  return serializer.serialize(proseMirrorDocument);
+  return serializer.serialize(proseMirrorDocument, { tightLists: true });
 };
 
 const deserialize = (schema: any, content: any) => {
   if (!content) return null;
 
-  const html = marked.parse(content);
+  const html = marked(content, {
+    gfm: true,
+    breaks: true,
+  });
 
   if (!html) return null;