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

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

@@ -1,8 +1,9 @@
 import { defineComponent, ref, onMounted, onBeforeUnmount, computed, watch } from 'vue-demi';
 import { u as useFocusTrap } from '../../useFocusTrap-48767a70.js';
-import { onClickOutside } from '@vueuse/core';
+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 { 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';
 import { P as Plugin, d as dropPoint, S as Selection, N as NodeSelection, F as Fragment, a as Slice, T as TextSelection, b as PluginKey, M as Mapping } from '../../index-85c2efe8.js';
 import codemirrorNode from './utils/codemirror/codemirrorNode.js';
@@ -1506,9 +1507,9 @@ var script = defineComponent({
       type: Boolean,
       default: false
     },
-    markdownFormat: {
-      type: Boolean,
-      default: false
+    format: {
+      type: String,
+      default: Formats.Markup
     },
     fullHeight: {
       type: Boolean,
@@ -1523,6 +1524,9 @@ var script = defineComponent({
     let editor = null;
     const editorRef = ref();
     const containerRef = ref();
+    const toolbarRef = ref();
+    const moreButtonRef = ref();
+    const moreRef = ref();
     const toolbarButtonRef = ref();
     const menuRef = ref();
     const isActive = ref({});
@@ -1534,6 +1538,7 @@ var script = defineComponent({
     const disableMarkdown = ref(false);
     const text = ref('');
     const link = ref('');
+    const countOfNotVisibleTools = ref(0);
     let trap = useFocusTrap(editorRef, {
       immediate: true,
       fallbackFocus: '.container',
@@ -1571,6 +1576,22 @@ var script = defineComponent({
       file: 'File',
       source: 'Source'
     });
+    useResizeObserver(root, entries => {
+      var _a, _b;
+      const entry = entries[0];
+      const {
+        width
+      } = entry.contentRect;
+      if (containerRef.value && toolbarRef.value && toolbarLength.value) {
+        let lengthOfItem = 0;
+        lengthOfItem = ((_b = (_a = toolbarRef.value.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.offsetWidth) + 16;
+        const lengthOfToolbar = lengthOfItem * toolbarLength.value;
+        if (lengthOfToolbar >= width) {
+          const count = width / lengthOfItem - 2;
+          countOfNotVisibleTools.value = Math.round(toolbarLength.value - count);
+        }
+      }
+    });
     onMounted(() => {
       editor = new Editor({
         onUpdate: _ref => {
@@ -1581,7 +1602,7 @@ var script = defineComponent({
           setActiveFormats();
           const html = editor.getHTML();
           const text = editor.getText();
-          if (props.markdownFormat) {
+          if (props.format === 'markdown') {
             markdownOutput.value = disableMarkdown.value ? text : serialize(editor.schema, editor.getJSON());
             proxyModelValue.value = markdownOutput.value;
           } else {
@@ -1592,7 +1613,7 @@ var script = defineComponent({
           let {
             editor
           } = _ref2;
-          if (props.markdownFormat) {
+          if (props.format === 'markdown') {
             const deserialized = deserialize(editor.schema, proxyModelValue.value);
             editor.commands.setContent(deserialized);
           } else {
@@ -1604,16 +1625,7 @@ var script = defineComponent({
         extensions: [codemirrorNode, StarterKit.configure({
           heading: false,
           codeBlock: false
-          // hardBreak: false,
-        }),
-        // HardBreak.extend({
-        //   addKeyboardShortcuts() {
-        //     return {
-        //       Enter: () => this.editor.commands.setHardBreak(),
-        //     };
-        //   },
-        // }),
-        Heading.configure({
+        }), Heading.configure({
           levels: headingLevels
         }).extend({
           levels: headingLevels,
@@ -1674,6 +1686,20 @@ var script = defineComponent({
       }
       return 'format_paragraph';
     });
+    const toolbarLength = computed(() => {
+      return props.toolbar.flat().length;
+    });
+    const notVisibleTools = computed(() => {
+      const count = countOfNotVisibleTools.value;
+      const toolbar = props.toolbar.flat();
+      let notVisible = toolbar.slice(toolbar.length - count, toolbar.length);
+      props.toolbar.forEach(tools => {
+        if (tools.some(item => notVisible.includes(item))) {
+          notVisible = [...notVisible, ...tools];
+        }
+      });
+      return notVisible;
+    });
     //Methods
     const handleEditorClick = () => {
       var _a;
@@ -1682,6 +1708,13 @@ var script = defineComponent({
       editor === null || editor === void 0 ? void 0 : editor.commands.focus();
       activeHeadingLevel.value = ((_a = editor === null || editor === void 0 ? void 0 : editor.getAttributes('heading')) === null || _a === void 0 ? void 0 : _a.level) || 0;
     };
+    const isVisible = value => {
+      if (Array.isArray(value)) {
+        const isHaveNotVisibleTools = value.some(item => notVisibleTools.value.includes(item));
+        return isHaveNotVisibleTools;
+      }
+      return !notVisibleTools.value.includes(value);
+    };
     const handleToolbarClick = (item, level) => {
       var _a, _b;
       switch (item) {
@@ -1695,13 +1728,8 @@ var script = defineComponent({
             plugins: editor.extensionManager.plugins
           }));
           if (disableMarkdown.value) {
-            // console.log(serialize(editor?.schema, editor?.getJSON()), 'serialize');
-            // console.log(serialize(editor?.schema, editor?.getJSON()), 'serialize');
             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()));
           } else {
-            // const html = editor?.getHTML();
-            // console.log(html, 'html');
-            // console.log(deserialize(editor?.schema, editor?.getText()), 'deserialize');
             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()));
           }
           break;
@@ -1824,17 +1852,19 @@ var script = defineComponent({
       return [...ToolbarContainer];
     });
     const toolbarStyles = computed(() => {
-      return [...Toolbar, ...(isFocused.value ? ToolbarButtonFocused : ToolbarButton)];
+      return [...Toolbar,
+      // 'overflow-x-hidden',
+      ...(isFocused.value ? ToolbarButtonFocused : ToolbarButton)];
     });
     const editorInputStyles = computed(() => {
-      return ['tiptap-editor', ...(props.fullHeight ? ['h-full overflow-y-auto'] : []), ...EditorInput];
+      return ['tiptap-editor-v3', ...(props.fullHeight ? ['h-full overflow-y-auto'] : []), ...EditorInput];
     });
     //Effects
     watch(proxyModelValue, value => {
-      if (value !== (editor === null || editor === void 0 ? void 0 : editor.getHTML()) && !props.markdownFormat) {
+      if (value !== (editor === null || editor === void 0 ? void 0 : editor.getHTML()) && props.format !== 'markdown') {
         editor === null || editor === void 0 ? void 0 : editor.commands.setContent(value);
       }
-      if (props.markdownFormat && value !== markdownOutput.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);
       }
@@ -1842,8 +1872,11 @@ var script = defineComponent({
     return {
       editor,
       editorRef,
+      toolbarRef,
       containerRef,
       toolbarButtonRef,
+      moreButtonRef,
+      moreRef,
       menuRef,
       iconsEnum,
       handleToolbarClick,
@@ -1864,12 +1897,15 @@ var script = defineComponent({
       isOpenLinkModal,
       text,
       link,
-      isFocused
+      isFocused,
+      isVisible,
+      countOfNotVisibleTools,
+      notVisibleTools
     };
   }
 });
 
-var css_248z = ".tiptap-editor ol{margin:0 24px;list-style:decimal}.tiptap-editor ul{margin:0 24px;list-style:disc outside none;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}.tiptap-editor .cm-editor{border:none;border-radius:4px}.tiptap-editor .cm-editor .cm-scroller{border-radius:4px}.tiptap-editor .cm-editor.cm-focused{outline:0}.tiptap-editor .cm-editor .cm-gutters{background-color:rgba(0,95,177,.08);border:none}.tiptap-editor .cm-editor .cm-gutters .cm-gutterElement{padding:0 10px}.tiptap-editor .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 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 */
@@ -1891,15 +1927,20 @@ var __vue_render__ = function () {
       }
     }
   }, [_c('div', {
+    ref: "toolbarRef",
     class: _vm.toolbarContainerStyles
-  }, _vm._l(_vm.toolbar, function (tool, index) {
+  }, [_vm._l(_vm.toolbar, function (tools, index) {
     return _c('div', {
       key: index,
-      class: _vm.toolbarStyles
-    }, _vm._l(tool, function (item) {
+      class: _vm.toolbarStyles.concat([{
+        'hidden': _vm.isVisible(tools)
+      }])
+    }, _vm._l(tools, function (item) {
       return _c('div', {
         key: item,
-        staticClass: "flex gap-md"
+        class: ['flex gap-md', {
+          'hidden': !_vm.isVisible(item)
+        }]
       }, [item === 'heading' ? _c('or-icon-button', {
         ref: "toolbarButtonRef",
         refInFor: true,
@@ -1921,7 +1962,7 @@ var __vue_render__ = function () {
             return _vm.menuRef.open();
           }
         }
-      }) : _c('or-icon-button', {
+      }) : _vm.isVisible(item) ? _c('or-icon-button', {
         attrs: {
           "tooltip": {
             text: _vm.iconTooltipsEnum[item],
@@ -1940,16 +1981,60 @@ var __vue_render__ = function () {
             return _vm.handleToolbarClick(item);
           }
         }
-      })], 1);
+      }) : _vm._e()], 1);
     }), 0);
-  }), 0), _vm._v(" "), _c('div', {
+  }), _vm._v(" "), _vm.countOfNotVisibleTools > 0 ? _c('or-icon-button', {
+    ref: "moreButtonRef",
+    staticClass: "px-sm",
+    attrs: {
+      "disabled": !_vm.isFocused,
+      "icon": {
+        icon: 'more_horiz',
+        variant: 'inherit',
+        size: 'm'
+      }
+    },
+    on: {
+      "click": function ($event) {
+        return _vm.moreRef.open();
+      }
+    }
+  }) : _vm._e()], 2), _vm._v(" "), _c('div', {
     class: ['p-sm', {
-      'h-[calc(100%-32px)]': _vm.fullHeight
+      'h-[calc(100%-32px)] md:h-[calc(100%-36px)]': _vm.fullHeight
     }]
   }, [_c('div', {
     ref: "editorRef",
     class: _vm.editorInputStyles
-  }), _vm._v(" "), _vm._t("files")], 2)]), _vm._v(" "), _vm.toolbarButtonRef ? _c('or-menu', {
+  }), _vm._v(" "), _vm._t("files")], 2)]), _vm._v(" "), _vm.moreButtonRef ? _c('or-menu', {
+    ref: "moreRef",
+    attrs: {
+      "trigger": _vm.moreButtonRef.root
+    }
+  }, _vm._l(_vm.notVisibleTools, function (item) {
+    return _c('or-menu-item', {
+      key: item,
+      on: {
+        "click": function ($event) {
+          return _vm.handleToolbarClick(item);
+        }
+      }
+    }, [_c('or-icon-button', {
+      attrs: {
+        "tooltip": {
+          text: _vm.iconTooltipsEnum[item],
+          placement: 'top'
+        },
+        "selected": _vm.isActive[item],
+        "disabled": !_vm.isFocused,
+        "icon": {
+          icon: _vm.iconsEnum[item],
+          variant: 'inherit',
+          size: 'm'
+        }
+      }
+    })], 1);
+  }), 1) : _vm._e(), _vm._v(" "), _vm.toolbarButtonRef ? _c('or-menu', {
     ref: "menuRef",
     attrs: {
       "trigger": _vm.toolbarButtonRef[_vm.getIndexOfHeading].root,

package/dist/bundled/v2/components/OrRichTextEditorV3/OrRichTextEditor.vue.d.ts

@@ -1,14 +1,19 @@
+import { ComponentPublicInstance, PropType } from 'vue-demi';
+import { Formats } from './props';
 import { Editor } from '@tiptap/core';
 import { Level } from '@tiptap/extension-heading';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     editor: Editor | null;
     editorRef: import("@vue/composition-api").Ref<HTMLDivElement | undefined>;
-    containerRef: import("@vue/composition-api").Ref<HTMLDivElement | undefined>;
+    toolbarRef: import("@vue/composition-api").Ref<ComponentPublicInstance<HTMLInputElement, {}, {}, {}, {}, {}, HTMLInputElement, {}, false> | undefined>;
+    containerRef: import("@vue/composition-api").Ref<ComponentPublicInstance<HTMLInputElement, {}, {}, {}, {}, {}, HTMLInputElement, {}, false> | undefined>;
     toolbarButtonRef: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
     } | string[], {} & {}, {
         [x: number]: string;
     } | {}, true> | undefined>;
+    moreButtonRef: import("@vue/composition-api").Ref<HTMLDivElement | undefined>;
+    moreRef: import("@vue/composition-api").Ref<HTMLDivElement | undefined>;
     menuRef: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
     } | string[], {} & {}, {
@@ -40,13 +45,29 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     text: import("@vue/composition-api").Ref<string>;
     link: import("@vue/composition-api").Ref<string>;
     isFocused: import("@vue/composition-api").Ref<boolean>;
+    isVisible: (value: string | Array<string>) => boolean;
+    countOfNotVisibleTools: import("@vue/composition-api").Ref<number>;
+    notVisibleTools: import("@vue/composition-api").ComputedRef<string[]>;
 }> & import("@vue/composition-api").Data, {}, {}, {
     modelValue: {
         type: StringConstructor;
         default: undefined;
     };
     toolbar: {
-        type: ArrayConstructor;
+        type: {
+            (arrayLength: number): string[][];
+            (...items: string[][]): string[][];
+            new (arrayLength: number): string[][];
+            new (...items: string[][]): string[][];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
         default: () => never[];
     };
     description: {
@@ -61,9 +82,9 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: BooleanConstructor;
         default: boolean;
     };
-    markdownFormat: {
-        type: BooleanConstructor;
-        default: boolean;
+    format: {
+        type: PropType<Formats>;
+        default: Formats;
     };
     fullHeight: {
         type: BooleanConstructor;
@@ -75,7 +96,20 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: undefined;
     };
     toolbar: {
-        type: ArrayConstructor;
+        type: {
+            (arrayLength: number): string[][];
+            (...items: string[][]): string[][];
+            new (arrayLength: number): string[][];
+            new (...items: string[][]): string[][];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
         default: () => never[];
     };
     description: {
@@ -90,9 +124,9 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: BooleanConstructor;
         default: boolean;
     };
-    markdownFormat: {
-        type: BooleanConstructor;
-        default: boolean;
+    format: {
+        type: PropType<Formats>;
+        default: Formats;
     };
     fullHeight: {
         type: BooleanConstructor;
@@ -100,23 +134,26 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     modelValue: string;
-    toolbar: unknown[];
+    toolbar: string[][];
     description: string;
     placeholder: string;
     autofocus: boolean;
-    markdownFormat: boolean;
+    format: Formats;
     fullHeight: boolean;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
     editor: Editor | null;
     editorRef: import("@vue/composition-api").Ref<HTMLDivElement | undefined>;
-    containerRef: import("@vue/composition-api").Ref<HTMLDivElement | undefined>;
+    toolbarRef: import("@vue/composition-api").Ref<ComponentPublicInstance<HTMLInputElement, {}, {}, {}, {}, {}, HTMLInputElement, {}, false> | undefined>;
+    containerRef: import("@vue/composition-api").Ref<ComponentPublicInstance<HTMLInputElement, {}, {}, {}, {}, {}, HTMLInputElement, {}, false> | undefined>;
     toolbarButtonRef: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
     } | string[], {} & {}, {
         [x: number]: string;
     } | {}, true> | undefined>;
+    moreButtonRef: import("@vue/composition-api").Ref<HTMLDivElement | undefined>;
+    moreRef: import("@vue/composition-api").Ref<HTMLDivElement | undefined>;
     menuRef: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
     } | string[], {} & {}, {
@@ -148,23 +185,26 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     text: import("@vue/composition-api").Ref<string>;
     link: import("@vue/composition-api").Ref<string>;
     isFocused: import("@vue/composition-api").Ref<boolean>;
+    isVisible: (value: string | Array<string>) => boolean;
+    countOfNotVisibleTools: import("@vue/composition-api").Ref<number>;
+    notVisibleTools: import("@vue/composition-api").ComputedRef<string[]>;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     modelValue: string;
-    toolbar: unknown[];
+    toolbar: string[][];
     description: string;
     placeholder: string;
     autofocus: boolean;
-    markdownFormat: boolean;
+    format: Formats;
     fullHeight: boolean;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: string;
-    toolbar: unknown[];
+    toolbar: string[][];
     description: string;
     placeholder: string;
     autofocus: boolean;
-    markdownFormat: boolean;
+    format: Formats;
     fullHeight: boolean;
 }, true>);
 export default _default;

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

@@ -8,6 +8,7 @@ import 'node:punycode';
 import '../../index-1182caa8.js';
 import '../../index.es-3f39f316.js';
 import './styles.js';
+import './props.js';
 import './utils/codemirror/codemirrorNode.js';
 import './utils/codemirror/codemirrorView.js';
 import '../../index-0d224ae5.js';

package/dist/bundled/v2/components/OrRichTextEditorV3/props.d.ts

@@ -0,0 +1,4 @@
+export declare enum Formats {
+    Markdown = "markdown",
+    Markup = "markup"
+}

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

@@ -0,0 +1,7 @@
+var Formats;
+(function (Formats) {
+  Formats["Markdown"] = "markdown";
+  Formats["Markup"] = "markup";
+})(Formats || (Formats = {}));
+
+export { Formats };

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

@@ -1,6 +1,6 @@
 const EditorContainer = [
 // Colors
-'border-outline', 'dark:border-outline-dark', 'focus-within:theme-border-1-primary', 'dark:focus-within:theme-border-1-primary-dark', 'focus-within:bg-primary-opacity-0-08', 'dark:focus-within:bg-primary-opacity-0-08-dark', 'focus-within:theme-outline-primary', 'dark:focus-within:theme-outline-primary-dark',
+'border-outline', 'focus-within:theme-border-1-primary', 'focus-within:bg-primary-opacity-0-08', 'focus-within:theme-outline-primary',
 // Sizing
 'border-1', 'rounded-md', 'w-full'];
 const ToolbarContainer = [
@@ -11,27 +11,27 @@ const ToolbarContainer = [
 //Sizing
 'border-b-1',
 //Colors
-'border-b-outline', 'dark:border-b-outline-dark'];
+'border-b-outline'];
 const Toolbar = [
 // Layout
 'flex',
 // Spacing
 'px-sm', 'gap-md',
 // Sizing
-'border-r-1',
+'border-l-1',
 //Colors
-'border-r-disabled', 'dark:border-r-outline-dark',
+'border-r-disabled',
 // Last child
-'last-of-type:border-none'];
+'first-of-type:border-none'];
 const ToolbarButton = [
 // Typography
-'text-on-disabled', 'dark:text-on-disabled-dark'];
+'text-on-disabled'];
 const ToolbarButtonFocused = [
 // Typography
-'text-outline', 'dark:text-outline-dark'];
+'text-outline'];
 const EditorInput = [
 // Typography
-'typography-body-2-regular', 'text-on-background', 'dark:text-on-background-dark',
+'typography-body-2-regular', 'text-on-background',
 // Sizing
 'min-h-[88px]'];
 

package/dist/bundled/v2/components/OrTextV3/OrText.js

@@ -38,19 +38,19 @@ var script = defineComponent({
     const mainTextStyles = computed(() => [...MainText]);
     const restTextStyles = computed(() => [...RestText]);
     /**
-     * Preserves whitespace at the last position as <code>&nbsp;</code>
+     * Preserves whitespace at the first position as <code>&nbsp;</code>
      * @param str A string to escape
      */
-    const escapeLast = str => str && str.slice(0, -1) + '\xa0';
+    const escapeFirst = str => str && '\xa0' + str.slice(1);
     /**
-     * Preserves whitespace at the first position as <code>&nbsp;</code>
+     * Preserves whitespace at the last position as <code>&nbsp;</code>
      * @param str A string to escape
      */
-    const escapeFirst = str => str && '\xa0' + str.slice(1);
+    const escapeLast = str => str && str.slice(0, -1) + '\xa0';
     // State
     const mainText = computed(() => {
-      if (props.sliceIndex) {
-        let mainPart = props.text.slice(0, -Math.abs(props.sliceIndex));
+      if (props.sliceIndex && props.sliceIndex < props.text.length) {
+        let mainPart = props.text.slice(0, Math.abs(props.sliceIndex) * -1);
         if (mainPart[mainPart.length - 1] === ' ') {
           mainPart = escapeLast(mainPart);
         }

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

@@ -257,6 +257,7 @@ import '../index-85c2efe8.js';
 import 'node:punycode';
 import '../index-1182caa8.js';
 import './OrRichTextEditorV3/styles.js';
+import './OrRichTextEditorV3/props.js';
 import './OrRichTextEditorV3/utils/codemirror/codemirrorNode.js';
 import './OrRichTextEditorV3/utils/codemirror/codemirrorView.js';
 import './OrRichTextEditorV3/utils/codemirror/theme.js';