@onereach/ui-components 2.68.0-beta.2002.0 → 2.68.0-beta.2008.0

package/dist/bundled/{v2/OrModal-a5411b0d.js → v3/useFocusTrap-d21726e3.js}

@@ -1,20 +1,5 @@
-import './index-fa6eb4ca.js';
-import _ from 'lodash';
-import { unrefElement, tryOnScopeDispose, onClickOutside } from '@vueuse/core';
-import { ref, watch, defineComponent, onBeforeUnmount } from '@vue/composition-api/dist/vue-composition-api.mjs';
-import { O as OrIconButton } from './OrIconButton-65962c1c.js';
-import { O as OrOverlay } from './OrOverlay-47967a8b.js';
-import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
-import { c as createInjector } from './browser-82dea9ed.js';
-
-var OrModalSizes;
-(function (OrModalSizes) {
-  OrModalSizes["tiny"] = "tiny";
-  OrModalSizes["small"] = "small";
-  OrModalSizes["medium"] = "medium";
-  OrModalSizes["large"] = "large";
-  OrModalSizes["fullScreen"] = "fullScreen";
-})(OrModalSizes || (OrModalSizes = {}));
+import { unrefElement, tryOnScopeDispose } from '@vueuse/core';
+import { ref, watch } from 'vue';
 
 /*!
 * tabbable 6.0.1
@@ -1280,186 +1265,4 @@ function useFocusTrap(target, options = {}) {
   };
 }
 
-var script = defineComponent({
-  name: 'OrModal',
-  components: {
-    OrIconButton,
-    OrOverlay
-  },
-  props: {
-    titleText: {
-      type: String,
-      required: false,
-      default: null,
-      validator: _.isString
-    },
-    showClose: {
-      type: Boolean,
-      default: true,
-      validator: _.isBoolean
-    },
-    closeOnClickOutside: {
-      type: Boolean,
-      required: false,
-      default: false,
-      validator: _.isBoolean
-    },
-    size: {
-      type: String,
-      required: false,
-      default: OrModalSizes.small
-    },
-    isOpen: {
-      type: Boolean,
-      required: true,
-      validator: _.isBoolean
-    },
-    isWithoutOverlay: {
-      type: Boolean,
-      required: false,
-      default: false,
-      validator: _.isBoolean
-    },
-    trapFocus: {
-      type: Boolean,
-      default: true,
-      validator: _.isBoolean
-    }
-  },
-  emits: ['close'],
-  setup(props, {
-    emit
-  }) {
-    const overlay = ref();
-    let container = ref(null);
-    let trap = useFocusTrap(container, {
-      immediate: props.trapFocus,
-      fallbackFocus: '.container',
-      allowOutsideClick: true
-    });
-    const handleClose = () => emit('close');
-    onClickOutside(container, evt => {
-      if (!evt.composedPath().includes(overlay.value.$el)) return;
-      if (props.closeOnClickOutside) handleClose();
-    });
-    const toggleFocusTrap = isNeedToTrap => {
-      if (isNeedToTrap && props.isOpen) {
-        trap.activate();
-      } else {
-        trap === null || trap === void 0 ? void 0 : trap.deactivate();
-      }
-    };
-    watch(() => props.trapFocus, toggleFocusTrap, {
-      immediate: true
-    });
-    watch(() => props.isOpen, isOpen => {
-      toggleFocusTrap(false);
-      if (isOpen) {
-        container = ref(null);
-      } else {
-        trap === null || trap === void 0 ? void 0 : trap.deactivate();
-      }
-    });
-    onBeforeUnmount(() => {
-      trap === null || trap === void 0 ? void 0 : trap.deactivate();
-    });
-    return {
-      container,
-      overlay,
-      handleClose
-    };
-  },
-  computed: {
-    sizeClass() {
-      return `is-${this.size}`;
-    }
-  }
-});
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _vm.isOpen ? _c('div', {
-    staticClass: "or-modal"
-  }, [_c('or-overlay', {
-    ref: "overlay",
-    attrs: {
-      "is-active": "",
-      "is-without-background": _vm.isWithoutOverlay
-    }
-  }, [_c('div', {
-    ref: "container",
-    class: [_vm.sizeClass, 'container', {
-      'is-without-overlay': _vm.isWithoutOverlay
-    }]
-  }, [_vm._t("header", function () {
-    return [_c('div', {
-      staticClass: "header"
-    }, [_vm._t("title", function () {
-      return [_c('div', {
-        staticClass: "title"
-      }, [_vm._v("\n              " + _vm._s(_vm.titleText) + "\n            ")])];
-    }), _vm._v(" "), _c('or-icon-button', {
-      directives: [{
-        name: "show",
-        rawName: "v-show",
-        value: _vm.showClose,
-        expression: "showClose"
-      }],
-      attrs: {
-        "icon": "close",
-        "icon-color": "neutral-6"
-      },
-      on: {
-        "click": _vm.handleClose
-      }
-    })], 2)];
-  }), _vm._v(" "), _vm._t("content", function () {
-    return [_c('div', {
-      staticClass: "content"
-    }, [_vm._t("default")], 2)];
-  }), _vm._v(" "), _c('div', {
-    directives: [{
-      name: "show",
-      rawName: "v-show",
-      value: _vm.$slots.footer,
-      expression: "$slots.footer"
-    }],
-    staticClass: "footer"
-  }, [_vm._t("footer", null, {
-    "close": _vm.handleClose
-  })], 2)], 2)])], 1) : _vm._e();
-};
-var __vue_staticRenderFns__ = [];
-
-/* style */
-const __vue_inject_styles__ = function (inject) {
-  if (!inject) return;
-  inject("data-v-1caff449_0", {
-    source: "@keyframes spinAround-data-v-1caff449{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-1caff449{from{opacity:1}to{opacity:0}}.or-modal[data-v-1caff449]{position:fixed;top:0;left:0;z-index:50;width:100%;height:100%}.or-modal .or-overlay[data-v-1caff449]{align-items:center;justify-content:center}.or-modal .container[data-v-1caff449]{position:absolute;display:flex;flex-flow:column;max-width:100%;max-height:80%;background-color:var(--c-neutral-0);border-radius:var(--s-2);outline:0}.or-modal .container.is-without-overlay[data-v-1caff449]{box-shadow:0 .125rem .5rem 0 rgba(0,0,0,.1)}.or-modal .container.is-fullScreen[data-v-1caff449]{width:calc(100% - var(--s-7));height:calc(100% - var(--s-7));max-height:calc(100% - var(--s-7));margin:0 auto}.or-modal .container.is-tiny[data-v-1caff449]{width:320px}.or-modal .container.is-small[data-v-1caff449]{width:480px}.or-modal .container.is-medium[data-v-1caff449]{width:700px}.or-modal .container.is-large[data-v-1caff449]{width:1049px}.or-modal .container .header[data-v-1caff449]{display:flex;justify-content:space-between;padding:24px 24px 20px 24px;border-radius:var(--s-2) var(--s-2) 0 0}.or-modal .container .header .title[data-v-1caff449]{font-size:1.125rem;font-weight:700}.or-modal .container .content[data-v-1caff449]{flex-grow:1;padding:0 24px 24px 24px;overflow:auto}.or-modal .container .footer[data-v-1caff449]{padding:16px 24px 24px 24px;border-radius:0 0 var(--s-2) var(--s-2);box-shadow:0 -3px 4px 0 rgba(0,0,0,.08)}",
-    map: undefined,
-    media: undefined
-  });
-};
-/* scoped */
-const __vue_scope_id__ = "data-v-1caff449";
-/* module identifier */
-const __vue_module_identifier__ = undefined;
-/* functional template */
-const __vue_is_functional_template__ = false;
-/* style inject SSR */
-
-/* style inject shadow dom */
-
-const __vue_component__ = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__,
-  staticRenderFns: __vue_staticRenderFns__
-}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, createInjector, undefined, undefined);
-var OrModal = __vue_component__;
-
-export { OrModal as O, OrModalSizes as a };
+export { useFocusTrap as u };

package/dist/esm/v2/{OrRichTextEditor-6bc37dc4.js → OrRichTextEditor-11967cd9.js}

@@ -1,6 +1,7 @@
 import { defineComponent, ref, onMounted, onBeforeUnmount, computed, watch } from 'vue-demi';
 import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 import '@vueuse/core';
+import { useFocusTrap } from '@vueuse/integrations/useFocusTrap';
 import { defaultMarkdownSerializer, MarkdownSerializer } from 'prosemirror-markdown';
 import { DOMParser as DOMParser$1 } from 'prosemirror-model';
 import { marked } from 'marked';
@@ -87,7 +88,7 @@ var script = defineComponent({
     },
     description: {
       type: String,
-      default: 'Description'
+      default: ''
     },
     placeholder: {
       type: String,
@@ -97,7 +98,7 @@ var script = defineComponent({
       type: Boolean,
       default: false
     },
-    markdown: {
+    markdownFormat: {
       type: Boolean,
       default: true
     }
@@ -117,6 +118,11 @@ var script = defineComponent({
     const previousHeadingLevel = ref();
     const activeHeadingLevel = ref(0);
     const markdownOutput = ref('');
+    let trap = useFocusTrap(editorRef, {
+      immediate: true,
+      fallbackFocus: '.container',
+      allowOutsideClick: true
+    });
     const iconsEnum = ref({
       bold: 'format_bold',
       italic: 'format_italic',
@@ -188,7 +194,7 @@ var script = defineComponent({
           setActiveFormats();
           const html = editor.getHTML();
           const text = editor.getText();
-          if (props.markdown) {
+          if (props.markdownFormat) {
             markdownOutput.value = serialize(editor.schema, editor.getJSON());
             emit('update:modelValue', markdownOutput.value);
           } else {
@@ -198,10 +204,8 @@ var script = defineComponent({
         onCreate: ({
           editor
         }) => {
-          if (props.markdown) {
+          if (props.markdownFormat) {
             const deserialized = deserialize(editor.schema, props.modelValue);
-            // const deserialized = defaultMarkdownParser.parse(props.modelValue);
-            // editor.view.state.doc = deserialized as Node;
             editor.commands.setContent(deserialized);
           } else {
             editor.commands.setContent(props.modelValue);
@@ -247,6 +251,7 @@ var script = defineComponent({
     onBeforeUnmount(() => {
       editor === null || editor === void 0 ? void 0 : editor.destroy();
     });
+    trap.activate();
     // Computed
     const getIndexOfHeading = computed(() => {
       return props.toolbar.flat().indexOf('heading');
@@ -348,7 +353,6 @@ var script = defineComponent({
       return serializer.serialize(proseMirrorDocument);
     };
     const deserialize = (schema, content) => {
-      // const html = defaultMarkdownParser.parse(content);
       const html = marked.parse(content);
       if (!html) return null;
       const parser = new DOMParser();
@@ -362,10 +366,10 @@ var script = defineComponent({
     };
     //Effects
     watch(() => props.modelValue, value => {
-      if (value !== (editor === null || editor === void 0 ? void 0 : editor.getHTML()) && !props.markdown) {
+      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.markdown && value !== markdownOutput.value) {
+      if (props.markdownFormat && value !== markdownOutput.value) {
         editor === null || editor === void 0 ? void 0 : editor.commands.setContent(markdownOutput.value);
       }
     });
@@ -492,7 +496,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = function (inject) {
   if (!inject) return;
-  inject("data-v-23c7ff28_0", {
+  inject("data-v-2c13389b_0", {
     source: ".tiptap-editor ol{margin:0 24px;list-style:decimal}.tiptap-editor ul{margin:0 24px;list-style:initial}.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-3454c2e6.js';
-export { _ as OrRichTextEditorV3 } from '../OrRichTextEditor-6bc37dc4.js';
+export { _ as OrRichTextEditorV3 } from '../OrRichTextEditor-11967cd9.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

@@ -56,7 +56,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: BooleanConstructor;
         default: boolean;
     };
-    markdown: {
+    markdownFormat: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -82,7 +82,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: BooleanConstructor;
         default: boolean;
     };
-    markdown: {
+    markdownFormat: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -92,7 +92,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     description: string;
     placeholder: string;
     autofocus: boolean;
-    markdown: boolean;
+    markdownFormat: boolean;
 } & {} & {
     [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
@@ -135,7 +135,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     description: string;
     placeholder: string;
     autofocus: boolean;
-    markdown: boolean;
+    markdownFormat: boolean;
 } & {} & {
     [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, {
@@ -144,6 +144,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     description: string;
     placeholder: string;
     autofocus: boolean;
-    markdown: boolean;
+    markdownFormat: boolean;
 }, true>);
 export default _default;

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

@@ -1,7 +1,8 @@
-export { _ as OrRichTextEditorV3 } from '../../OrRichTextEditor-6bc37dc4.js';
+export { _ as OrRichTextEditorV3 } from '../../OrRichTextEditor-11967cd9.js';
 import 'vue-demi';
 import '../../useClassAttribute-47fdb016.js';
 import '@vueuse/core';
+import '@vueuse/integrations/useFocusTrap';
 import 'prosemirror-markdown';
 import 'prosemirror-model';
 import 'marked';

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-3454c2e6.js';
-export { _ as OrRichTextEditorV3 } from './OrRichTextEditor-6bc37dc4.js';
+export { _ as OrRichTextEditorV3 } from './OrRichTextEditor-11967cd9.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-a5d38e89.js → OrRichTextEditor-ad5f24ba.js}

@@ -1,6 +1,7 @@
 import { defineComponent, ref, onMounted, onBeforeUnmount, computed, watch } from 'vue-demi';
 import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 import '@vueuse/core';
+import { useFocusTrap } from '@vueuse/integrations/useFocusTrap';
 import { defaultMarkdownSerializer, MarkdownSerializer } from 'prosemirror-markdown';
 import { DOMParser as DOMParser$1 } from 'prosemirror-model';
 import { marked } from 'marked';
@@ -87,7 +88,7 @@ var script = defineComponent({
     },
     description: {
       type: String,
-      default: 'Description'
+      default: ''
     },
     placeholder: {
       type: String,
@@ -97,7 +98,7 @@ var script = defineComponent({
       type: Boolean,
       default: false
     },
-    markdown: {
+    markdownFormat: {
       type: Boolean,
       default: true
     }
@@ -117,6 +118,11 @@ var script = defineComponent({
     const previousHeadingLevel = ref();
     const activeHeadingLevel = ref(0);
     const markdownOutput = ref('');
+    let trap = useFocusTrap(editorRef, {
+      immediate: true,
+      fallbackFocus: '.container',
+      allowOutsideClick: true
+    });
     const iconsEnum = ref({
       bold: 'format_bold',
       italic: 'format_italic',
@@ -188,7 +194,7 @@ var script = defineComponent({
           setActiveFormats();
           const html = editor.getHTML();
           const text = editor.getText();
-          if (props.markdown) {
+          if (props.markdownFormat) {
             markdownOutput.value = serialize(editor.schema, editor.getJSON());
             emit('update:modelValue', markdownOutput.value);
           } else {
@@ -198,10 +204,8 @@ var script = defineComponent({
         onCreate: ({
           editor
         }) => {
-          if (props.markdown) {
+          if (props.markdownFormat) {
             const deserialized = deserialize(editor.schema, props.modelValue);
-            // const deserialized = defaultMarkdownParser.parse(props.modelValue);
-            // editor.view.state.doc = deserialized as Node;
             editor.commands.setContent(deserialized);
           } else {
             editor.commands.setContent(props.modelValue);
@@ -247,6 +251,7 @@ var script = defineComponent({
     onBeforeUnmount(() => {
       editor === null || editor === void 0 ? void 0 : editor.destroy();
     });
+    trap.activate();
     // Computed
     const getIndexOfHeading = computed(() => {
       return props.toolbar.flat().indexOf('heading');
@@ -348,7 +353,6 @@ var script = defineComponent({
       return serializer.serialize(proseMirrorDocument);
     };
     const deserialize = (schema, content) => {
-      // const html = defaultMarkdownParser.parse(content);
       const html = marked.parse(content);
       if (!html) return null;
       const parser = new DOMParser();
@@ -362,10 +366,10 @@ var script = defineComponent({
     };
     //Effects
     watch(() => props.modelValue, value => {
-      if (value !== (editor === null || editor === void 0 ? void 0 : editor.getHTML()) && !props.markdown) {
+      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.markdown && value !== markdownOutput.value) {
+      if (props.markdownFormat && value !== markdownOutput.value) {
         editor === null || editor === void 0 ? void 0 : editor.commands.setContent(markdownOutput.value);
       }
     });

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

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

@@ -56,7 +56,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: BooleanConstructor;
         default: boolean;
     };
-    markdown: {
+    markdownFormat: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -82,7 +82,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: BooleanConstructor;
         default: boolean;
     };
-    markdown: {
+    markdownFormat: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -92,7 +92,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     description: string;
     placeholder: string;
     autofocus: boolean;
-    markdown: boolean;
+    markdownFormat: boolean;
 } & {} & {
     [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
@@ -135,7 +135,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     description: string;
     placeholder: string;
     autofocus: boolean;
-    markdown: boolean;
+    markdownFormat: boolean;
 } & {} & {
     [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, {
@@ -144,6 +144,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     description: string;
     placeholder: string;
     autofocus: boolean;
-    markdown: boolean;
+    markdownFormat: boolean;
 }, true>);
 export default _default;

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

@@ -1,7 +1,8 @@
-export { s as OrRichTextEditorV3 } from '../../OrRichTextEditor-a5d38e89.js';
+export { s as OrRichTextEditorV3 } from '../../OrRichTextEditor-ad5f24ba.js';
 import 'vue-demi';
 import '../../useClassAttribute-47fdb016.js';
 import '@vueuse/core';
+import '@vueuse/integrations/useFocusTrap';
 import 'prosemirror-markdown';
 import 'prosemirror-model';
 import 'marked';

package/dist/esm/v3/index.js

@@ -89,7 +89,7 @@ export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from './types-9
 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-1500a1cd.js';
-export { s as OrRichTextEditorV3 } from './OrRichTextEditor-a5d38e89.js';
+export { s as OrRichTextEditorV3 } from './OrRichTextEditor-ad5f24ba.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.68.0-beta.2002.0",
+  "version": "2.68.0-beta.2008.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",

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

@@ -70,16 +70,20 @@
 <script lang="ts">
 import { defineComponent, ref, onMounted, onBeforeUnmount, computed, watch } from 'vue-demi';
 import { useClassAttribute } from '../../hooks';
+import { useFocusTrap, UseFocusTrapReturn } from '@vueuse/integrations/useFocusTrap';
+
 import {
   MarkdownSerializer as ProseMirrorMarkdownSerializer,
   defaultMarkdownSerializer,
 } from 'prosemirror-markdown';
 import { DOMParser as ProseMirrorDOMParser, Node, Mark } from 'prosemirror-model';
 import { marked } from 'marked';
+
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
 import { OrLabelV3 as OrLabel } from '../or-label-v3';
 import { OrMenuV3 as OrMenu } from '../or-menu-v3';
 import { OrMenuItemV3 as OrMenuItem } from '../or-menu-item-v3';
+
 import {
   EditorContainer,
   ToolbarContainer,
@@ -129,7 +133,7 @@ export default defineComponent({
     },
     description: {
       type: String,
-      default: 'Description',
+      default: '',
     },
     placeholder: {
       type: String,
@@ -139,7 +143,7 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
-    markdown: {
+    markdownFormat: {
       type: Boolean,
       default: true,
     },
@@ -159,6 +163,11 @@ export default defineComponent({
     const previousHeadingLevel = ref<Level>();
     const activeHeadingLevel = ref<number>(0);
     const markdownOutput = ref<string>('');
+    let trap: UseFocusTrapReturn = useFocusTrap(editorRef, {
+      immediate: true,
+      fallbackFocus: '.container',
+      allowOutsideClick: true,
+    });
     const iconsEnum = ref<{[key: string]: string;}>({
       bold: 'format_bold',
       italic: 'format_italic',
@@ -171,7 +180,6 @@ export default defineComponent({
       redo: 'redo',
       undo: 'undo',
     });
-
     const iconTooltipsEnum = ref<{[key: string]: string;}>({
       bold: 'Bold',
       italic: 'Italic',
@@ -220,7 +228,6 @@ export default defineComponent({
             })`;
         },
       },
-
     };
 
     const serializerNodes = {
@@ -238,7 +245,7 @@ export default defineComponent({
           setActiveFormats();
           const html = editor.getHTML();
           const text = editor.getText();
-          if (props.markdown) {
+          if (props.markdownFormat) {
             markdownOutput.value = serialize(editor.schema, editor.getJSON());
             emit('update:modelValue', markdownOutput.value);
           } else {
@@ -246,10 +253,8 @@ export default defineComponent({
           }
         },
         onCreate: ({ editor }) => {
-          if (props.markdown) {
+          if (props.markdownFormat) {
             const deserialized = deserialize(editor.schema, props.modelValue);
-            // const deserialized = defaultMarkdownParser.parse(props.modelValue);
-            // editor.view.state.doc = deserialized as Node;
             editor.commands.setContent(deserialized);
           } else {
             editor.commands.setContent(props.modelValue);
@@ -304,6 +309,8 @@ export default defineComponent({
       editor?.destroy();
     });
 
+    trap.activate();
+
     // Computed
     const getIndexOfHeading = computed(() => {
       return props.toolbar.flat().indexOf('heading');
@@ -448,7 +455,6 @@ export default defineComponent({
     };
 
     const deserialize = (schema: any, content: any) => {
-      // const html = defaultMarkdownParser.parse(content);
       const html = marked.parse(content);
 
       if (!html) return null;
@@ -465,10 +471,10 @@ export default defineComponent({
 
     //Effects
     watch(() => props.modelValue, (value) => {
-      if (value !== editor?.getHTML() && !props.markdown) {
+      if (value !== editor?.getHTML() && !props.markdownFormat) {
         editor?.commands.setContent(value);
       }
-      if (props.markdown && value !== markdownOutput.value) {
+      if (props.markdownFormat && value !== markdownOutput.value) {
         editor?.commands.setContent(markdownOutput.value);
       }
     });