@onereach/ui-components 18.4.1 → 18.4.2

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

@@ -1 +1 @@
-export { s as default } from '../OrRichTextEditorV3-e736de20.js';
+export { s as default } from '../OrRichTextEditorV3-d8f48d58.js';

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

@@ -1,7 +1,7 @@
 import { Editor } from '@tiptap/core';
 import { Level } from '@tiptap/extension-heading';
 import { ComponentPublicInstance, PropType } from 'vue';
-import { Formats, Tools } from './props';
+import { Formats, Tools, RichTextEditorIcons, RichTextEditorTooltips } from './props';
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         type: StringConstructor;
@@ -62,17 +62,13 @@ declare const _default: import("vue").DefineComponent<{
     textareaRef: import("vue").Ref<HTMLTextAreaElement | undefined>;
     moreRef: import("vue").Ref<any>;
     menuRef: import("vue").Ref<any>;
-    iconsEnum: import("vue").Ref<{
-        [key: string]: string;
-    }>;
     handleToolbarClick: (item: string, level?: number) => void;
     handleEditorClick: () => void;
     isActive: import("vue").Ref<{
         [key: string]: boolean;
     }>;
-    iconTooltipsEnum: import("vue").Ref<{
-        [key: string]: string;
-    }>;
+    getRichTextEditorIcon: import("vue").ComputedRef<(item: string) => RichTextEditorIcons>;
+    getRichTextEditorTooltipIcon: import("vue").ComputedRef<(item: string) => RichTextEditorTooltips>;
     getIndexOfHeading: import("vue").ComputedRef<number>;
     headingLevels: Level[];
     headingIcon: import("vue").ComputedRef<string>;

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

@@ -1 +1 @@
-export { F as Formats, s as OrRichTextEditorV3 } from '../OrRichTextEditorV3-e736de20.js';
+export { F as Formats, s as OrRichTextEditorV3, R as RichTextEditorIcons, a as RichTextEditorTooltips } from '../OrRichTextEditorV3-d8f48d58.js';

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

@@ -3,3 +3,35 @@ export declare enum Formats {
     Markup = "markup"
 }
 export type Tools = string[][];
+export declare enum RichTextEditorIcons {
+    bold = "format_bold",
+    italic = "format_italic",
+    underline = "format_underlined",
+    strike = "format_strikethrough",
+    bulletList = "format_list_bulleted",
+    orderedList = "format_list_numbered",
+    link = "link",
+    highlight = "highlight",
+    redo = "redo",
+    undo = "undo",
+    codeBlock = "code_blocks",
+    blockquote = "format_quote",
+    file = "attach_file",
+    source = "source_notes"
+}
+export declare enum RichTextEditorTooltips {
+    bold = "Bold",
+    italic = "Italic",
+    underline = "Underline",
+    strike = "Strike",
+    bulletList = "Bulleted List",
+    orderedList = "Numbered List",
+    link = "Link",
+    highlight = "Highlight",
+    redo = "Redo",
+    undo = "Undo",
+    codeBlock = "Code Block",
+    blockquote = "Quote",
+    file = "File",
+    source = "Source"
+}

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

@@ -1 +1 @@
-export { F as Formats } from '../OrRichTextEditorV3-e736de20.js';
+export { F as Formats, R as RichTextEditorIcons, a as RichTextEditorTooltips } from '../OrRichTextEditorV3-d8f48d58.js';

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

@@ -1 +1 @@
-export { R as RichTextEditor, c as RichTextEditorControl, a as RichTextEditorToolbar, b as RichTextEditorToolbarGroup } from '../OrRichTextEditorV3-e736de20.js';
+export { b as RichTextEditor, e as RichTextEditorControl, c as RichTextEditorToolbar, d as RichTextEditorToolbarGroup } from '../OrRichTextEditorV3-d8f48d58.js';

package/dist/bundled/components/OrRichTextEditorV3/utils/codemirror/codemirrorNode.js

@@ -1,2 +1,2 @@
-export { f as default } from '../../../OrRichTextEditorV3-e736de20.js';
+export { h as default } from '../../../OrRichTextEditorV3-d8f48d58.js';
 import '../../../OrCode-091c4960.js';

package/dist/bundled/components/OrRichTextEditorV3/utils/codemirror/codemirrorView.js

@@ -1,2 +1,2 @@
-export { C as default } from '../../../OrRichTextEditorV3-e736de20.js';
+export { C as default } from '../../../OrRichTextEditorV3-d8f48d58.js';
 import '../../../OrCode-091c4960.js';

package/dist/bundled/components/OrRichTextEditorV3/utils/codemirror/index.js

@@ -1 +1 @@
-export { C as CodeMirrorView } from '../../../OrRichTextEditorV3-e736de20.js';
+export { C as CodeMirrorView } from '../../../OrRichTextEditorV3-d8f48d58.js';

package/dist/bundled/components/OrRichTextEditorV3/utils/codemirror/theme.js

@@ -1,3 +1,3 @@
 import '../../../OrCode-091c4960.js';
 import '../../../../hooks/useTheme.js';
-export { d as color, t as default, e as orCodeHighlightStyle, o as orCodeTheme } from '../../../OrRichTextEditorV3-e736de20.js';
+export { f as color, t as default, g as orCodeHighlightStyle, o as orCodeTheme } from '../../../OrRichTextEditorV3-d8f48d58.js';

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

@@ -1 +1 @@
-export { h as deserialize, g as serialize } from '../../OrRichTextEditorV3-e736de20.js';
+export { j as deserialize, i as serialize } from '../../OrRichTextEditorV3-d8f48d58.js';

package/dist/bundled/components/{OrRichTextEditorV3-e736de20.js → OrRichTextEditorV3-d8f48d58.js}

@@ -1,4 +1,4 @@
-import { defineComponent, shallowRef, ref, computed, onMounted, onBeforeUnmount, watch, nextTick, resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, createElementVNode, Fragment as Fragment$1, renderList, withDirectives, vShow, vModelText } from 'vue';
+import { defineComponent, shallowRef, ref, onMounted, onBeforeUnmount, computed, watch, nextTick, resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, createElementVNode, Fragment as Fragment$1, renderList, withDirectives, vShow, vModelText } from 'vue';
 import { s as styleInject } from './OrAvatar-96c4b4c5.js';
 import { f as keyName, g as base, E as EditorView$1, H as HighlightStyle, t as tags, s as syntaxHighlighting, a as EditorState$1, m as highlightActiveLine, n as highlightActiveLineGutter, o as lineNumbers, k as keymap$1, p as minimalSetup, j as javascript } from './OrCode-091c4960.js';
 import { q as useResizeObserver, s as useDebounceFn, o as onClickOutside } from './OrAutocompleteV3-693d8511.js';
@@ -21094,6 +21094,40 @@ var Formats;
   Formats["Markdown"] = "markdown";
   Formats["Markup"] = "markup";
 })(Formats || (Formats = {}));
+var RichTextEditorIcons;
+(function (RichTextEditorIcons) {
+  RichTextEditorIcons["bold"] = "format_bold";
+  RichTextEditorIcons["italic"] = "format_italic";
+  RichTextEditorIcons["underline"] = "format_underlined";
+  RichTextEditorIcons["strike"] = "format_strikethrough";
+  RichTextEditorIcons["bulletList"] = "format_list_bulleted";
+  RichTextEditorIcons["orderedList"] = "format_list_numbered";
+  RichTextEditorIcons["link"] = "link";
+  RichTextEditorIcons["highlight"] = "highlight";
+  RichTextEditorIcons["redo"] = "redo";
+  RichTextEditorIcons["undo"] = "undo";
+  RichTextEditorIcons["codeBlock"] = "code_blocks";
+  RichTextEditorIcons["blockquote"] = "format_quote";
+  RichTextEditorIcons["file"] = "attach_file";
+  RichTextEditorIcons["source"] = "source_notes";
+})(RichTextEditorIcons || (RichTextEditorIcons = {}));
+var RichTextEditorTooltips;
+(function (RichTextEditorTooltips) {
+  RichTextEditorTooltips["bold"] = "Bold";
+  RichTextEditorTooltips["italic"] = "Italic";
+  RichTextEditorTooltips["underline"] = "Underline";
+  RichTextEditorTooltips["strike"] = "Strike";
+  RichTextEditorTooltips["bulletList"] = "Bulleted List";
+  RichTextEditorTooltips["orderedList"] = "Numbered List";
+  RichTextEditorTooltips["link"] = "Link";
+  RichTextEditorTooltips["highlight"] = "Highlight";
+  RichTextEditorTooltips["redo"] = "Redo";
+  RichTextEditorTooltips["undo"] = "Undo";
+  RichTextEditorTooltips["codeBlock"] = "Code Block";
+  RichTextEditorTooltips["blockquote"] = "Quote";
+  RichTextEditorTooltips["file"] = "File";
+  RichTextEditorTooltips["source"] = "Source";
+})(RichTextEditorTooltips || (RichTextEditorTooltips = {}));
 
 const RichTextEditor = [
 // Layout
@@ -29017,14 +29051,10 @@ var script = defineComponent({
   expose: ['root', 'editor'],
   setup(props, context) {
     let editor = shallowRef();
+    const controlRef = ref();
+    const toolbarRef = ref();
     // Refs & Styles
     const root = ref();
-    const rootStyles = computed(() => ['or-rich-text-editor-v3', ...RichTextEditor]);
-    const toolbarRef = ref();
-    const toolbarStyles = computed(() => [...RichTextEditorToolbar]);
-    const toolbarGroupStyles = computed(() => [...RichTextEditorToolbarGroup]);
-    const controlRef = ref();
-    const controlStyles = computed(() => ['tiptap-editor-v3', ...RichTextEditorControl]);
     const textareaRef = ref();
     const containerRef = ref();
     const moreButtonRef = ref();
@@ -29059,42 +29089,9 @@ var script = defineComponent({
     const countOfNotVisibleTools = ref(0);
     const sourceValue = ref('');
     let trap = useFocusTrap(controlRef, {
-      immediate: true,
       fallbackFocus: '.container',
       allowOutsideClick: true
     });
-    const iconsEnum = ref({
-      bold: 'format_bold',
-      italic: 'format_italic',
-      underline: 'format_underlined',
-      strike: 'format_strikethrough',
-      bulletList: 'format_list_bulleted',
-      orderedList: 'format_list_numbered',
-      link: 'link',
-      highlight: 'highlight',
-      redo: 'redo',
-      undo: 'undo',
-      codeBlock: 'code_blocks',
-      blockquote: 'format_quote',
-      file: 'attach_file',
-      source: 'source_notes'
-    });
-    const iconTooltipsEnum = ref({
-      bold: 'Bold',
-      italic: 'Italic',
-      underline: 'Underline',
-      strike: 'Strike',
-      bulletList: 'Bulleted List',
-      orderedList: 'Numbered List',
-      link: 'Link',
-      highlight: 'Highlight',
-      redo: 'Redo',
-      undo: 'Undo',
-      codeBlock: 'Code Block',
-      blockquote: 'Quote',
-      file: 'File',
-      source: 'Source'
-    });
     useResizeObserver(root, useDebounceFn(entries => {
       var _a, _b;
       const entry = entries[0];
@@ -29218,6 +29215,12 @@ var script = defineComponent({
     const getIndexOfHeading = computed(() => {
       return props.toolbar.flat().indexOf('heading');
     });
+    const getRichTextEditorIcon = computed(() => item => {
+      return RichTextEditorIcons[item];
+    });
+    const getRichTextEditorTooltipIcon = computed(() => item => {
+      return RichTextEditorTooltips[item];
+    });
     const headingIcon = computed(() => {
       if (activeHeadingLevel.value && isActive.value.heading) {
         return `format_h${activeHeadingLevel.value}`;
@@ -29388,6 +29391,11 @@ var script = defineComponent({
       }
       editor === null || editor === void 0 ? void 0 : editor.setEditable(!disabled);
     });
+    // Styles
+    const rootStyles = computed(() => ['or-rich-text-editor-v3', ...RichTextEditor]);
+    const toolbarStyles = computed(() => [...RichTextEditorToolbar]);
+    const toolbarGroupStyles = computed(() => [...RichTextEditorToolbarGroup]);
+    const controlStyles = computed(() => ['tiptap-editor-v3', ...RichTextEditorControl]);
     return {
       root,
       rootStyles,
@@ -29403,11 +29411,11 @@ var script = defineComponent({
       textareaRef,
       moreRef,
       menuRef,
-      iconsEnum,
       handleToolbarClick,
       handleEditorClick,
       isActive,
-      iconTooltipsEnum,
+      getRichTextEditorIcon,
+      getRichTextEditorTooltipIcon,
       getIndexOfHeading,
       headingLevels,
       headingIcon,
@@ -29510,11 +29518,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         }, null, 8 /* PROPS */, ["icon", "tooltip", "selected", "disabled"])) : _ctx.isVisible(item) ? (openBlock(), createBlock(_component_OrIconButton, {
           key: 1,
           icon: {
-            icon: _ctx.iconsEnum[item],
+            icon: _ctx.getRichTextEditorIcon(item),
             variant: 'inherit'
           },
           tooltip: {
-            content: _ctx.iconTooltipsEnum[item],
+            content: _ctx.getRichTextEditorTooltipIcon(item),
             placement: 'top'
           },
           selected: _ctx.isActive[item],
@@ -29564,11 +29572,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       return openBlock(), createBlock(_component_OrIconButton, {
         key: item,
         icon: {
-          icon: _ctx.iconsEnum[item],
+          icon: _ctx.getRichTextEditorIcon(item),
           variant: 'inherit'
         },
         tooltip: {
-          content: _ctx.iconTooltipsEnum[item],
+          content: _ctx.getRichTextEditorTooltipIcon(item),
           placement: 'top'
         },
         selected: _ctx.isActive[item],
@@ -29638,4 +29646,4 @@ styleInject(css_248z);
 script.render = render;
 script.__file = "src/components/or-rich-text-editor-v3/OrRichTextEditor.vue";
 
-export { CodeMirrorView as C, Formats as F, RichTextEditor as R, RichTextEditorToolbar as a, RichTextEditorToolbarGroup as b, RichTextEditorControl as c, color as d, orCodeHighlightStyle as e, codemirrorNode as f, serialize as g, deserialize as h, orCodeTheme as o, script as s, theme as t };
+export { CodeMirrorView as C, Formats as F, RichTextEditorIcons as R, RichTextEditorTooltips as a, RichTextEditor as b, RichTextEditorToolbar as c, RichTextEditorToolbarGroup as d, RichTextEditorControl as e, color as f, orCodeHighlightStyle as g, codemirrorNode as h, serialize as i, deserialize as j, orCodeTheme as o, script as s, theme as t };

package/dist/bundled/components/index.js

@@ -87,7 +87,7 @@ export { s as OrRadioV3 } from './OrRadioV3-24091b7e.js';
 export { s as OrRangeSliderV3 } from './OrRangeSliderV3-0954d4ec.js';
 export { s as OrRatingV3, R as RatingVariant } from './OrRatingV3-2a906a67.js';
 export { s as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement } from './OrResizeablePanelV3-8098fbf3.js';
-export { F as Formats, s as OrRichTextEditorV3 } from './OrRichTextEditorV3-e736de20.js';
+export { F as Formats, s as OrRichTextEditorV3, R as RichTextEditorIcons, a as RichTextEditorTooltips } from './OrRichTextEditorV3-d8f48d58.js';
 export { s as OrRichTooltipV3, R as RichTooltipBehavior } from './OrRichTooltipV3-1c3321db.js';
 export { default as OrSearch } from './OrSearch/OrSearch.js';
 export { default as OrSearchV3 } from './OrSearchV3/OrSearch.js';

package/dist/bundled/index.js

@@ -44,7 +44,7 @@ export { s as OrRadio } from './components/OrRadio-30e01fc0.js';
 export { default as OrRadioGroup } from './components/OrRadioGroup/OrRadioGroup.js';
 export { default as OrRadioGroupV3 } from './components/OrRadioGroupV3/OrRadioGroup.js';
 export { s as OrRangeSliderV3 } from './components/OrRangeSliderV3-0954d4ec.js';
-export { F as Formats, s as OrRichTextEditorV3 } from './components/OrRichTextEditorV3-e736de20.js';
+export { F as Formats, s as OrRichTextEditorV3, R as RichTextEditorIcons, a as RichTextEditorTooltips } from './components/OrRichTextEditorV3-d8f48d58.js';
 export { s as OrRichTooltipV3, R as RichTooltipBehavior } from './components/OrRichTooltipV3-1c3321db.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './components/OrSegmentedControlV3-5db203ab.js';
 export { s as OrSelect } from './components/OrSelect-2966f641.js';

package/dist/esm/components/index.js

@@ -103,7 +103,7 @@ export { OrRadioV3 } from './or-radio-v3/index.js';
 export { OrRangeSliderV3 } from './or-range-slider-v3/index.js';
 export { OrRatingV3, RatingVariant } from './or-rating-v3/index.js';
 export { OrResizeablePanelV3, ResizeablePanelPadding, ResizeablePanelPlacement } from './or-resizeable-panel-v3/index.js';
-export { Formats, OrRichTextEditorV3 } from './or-rich-text-editor-v3/index.js';
+export { Formats, OrRichTextEditorV3, RichTextEditorIcons, RichTextEditorTooltips } from './or-rich-text-editor-v3/index.js';
 export { OrRichTooltipV3, RichTooltipBehavior } from './or-rich-tooltip-v3/index.js';
 export { OrSearch } from './or-search/index.js';
 export { OrSearchV3 } from './or-search-v3/index.js';

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

@@ -1,7 +1,7 @@
 import { Editor } from '@tiptap/core';
 import { Level } from '@tiptap/extension-heading';
 import { ComponentPublicInstance, PropType } from 'vue';
-import { Formats, Tools } from './props';
+import { Formats, Tools, RichTextEditorIcons, RichTextEditorTooltips } from './props';
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         type: StringConstructor;
@@ -62,17 +62,13 @@ declare const _default: import("vue").DefineComponent<{
     textareaRef: import("vue").Ref<HTMLTextAreaElement | undefined>;
     moreRef: import("vue").Ref<any>;
     menuRef: import("vue").Ref<any>;
-    iconsEnum: import("vue").Ref<{
-        [key: string]: string;
-    }>;
     handleToolbarClick: (item: string, level?: number) => void;
     handleEditorClick: () => void;
     isActive: import("vue").Ref<{
         [key: string]: boolean;
     }>;
-    iconTooltipsEnum: import("vue").Ref<{
-        [key: string]: string;
-    }>;
+    getRichTextEditorIcon: import("vue").ComputedRef<(item: string) => RichTextEditorIcons>;
+    getRichTextEditorTooltipIcon: import("vue").ComputedRef<(item: string) => RichTextEditorTooltips>;
     getIndexOfHeading: import("vue").ComputedRef<number>;
     headingLevels: Level[];
     headingIcon: import("vue").ComputedRef<string>;

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

@@ -11,7 +11,7 @@ import Underline from '@tiptap/extension-underline';
 import StarterKit from '@tiptap/starter-kit';
 import { useResizeObserver, useDebounceFn, onClickOutside } from '@vueuse/core';
 import { useFocusTrap } from '@vueuse/integrations/useFocusTrap';
-import { defineComponent, shallowRef, ref, computed, onMounted, onBeforeUnmount, watch, nextTick, resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, createElementVNode, Fragment, renderList, withDirectives, vShow, vModelText } from 'vue';
+import { defineComponent, shallowRef, ref, onMounted, onBeforeUnmount, computed, watch, nextTick, resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, createElementVNode, Fragment, renderList, withDirectives, vShow, vModelText } from 'vue';
 import '../../dom-11141778.js';
 import { i as isArray } from '../../isArray-135d4ff2.js';
 import { OrButtonV3 as script$1 } from '../or-button-v3/index.js';
@@ -74,6 +74,40 @@ var Formats;
   Formats["Markdown"] = "markdown";
   Formats["Markup"] = "markup";
 })(Formats || (Formats = {}));
+var RichTextEditorIcons;
+(function (RichTextEditorIcons) {
+  RichTextEditorIcons["bold"] = "format_bold";
+  RichTextEditorIcons["italic"] = "format_italic";
+  RichTextEditorIcons["underline"] = "format_underlined";
+  RichTextEditorIcons["strike"] = "format_strikethrough";
+  RichTextEditorIcons["bulletList"] = "format_list_bulleted";
+  RichTextEditorIcons["orderedList"] = "format_list_numbered";
+  RichTextEditorIcons["link"] = "link";
+  RichTextEditorIcons["highlight"] = "highlight";
+  RichTextEditorIcons["redo"] = "redo";
+  RichTextEditorIcons["undo"] = "undo";
+  RichTextEditorIcons["codeBlock"] = "code_blocks";
+  RichTextEditorIcons["blockquote"] = "format_quote";
+  RichTextEditorIcons["file"] = "attach_file";
+  RichTextEditorIcons["source"] = "source_notes";
+})(RichTextEditorIcons || (RichTextEditorIcons = {}));
+var RichTextEditorTooltips;
+(function (RichTextEditorTooltips) {
+  RichTextEditorTooltips["bold"] = "Bold";
+  RichTextEditorTooltips["italic"] = "Italic";
+  RichTextEditorTooltips["underline"] = "Underline";
+  RichTextEditorTooltips["strike"] = "Strike";
+  RichTextEditorTooltips["bulletList"] = "Bulleted List";
+  RichTextEditorTooltips["orderedList"] = "Numbered List";
+  RichTextEditorTooltips["link"] = "Link";
+  RichTextEditorTooltips["highlight"] = "Highlight";
+  RichTextEditorTooltips["redo"] = "Redo";
+  RichTextEditorTooltips["undo"] = "Undo";
+  RichTextEditorTooltips["codeBlock"] = "Code Block";
+  RichTextEditorTooltips["blockquote"] = "Quote";
+  RichTextEditorTooltips["file"] = "File";
+  RichTextEditorTooltips["source"] = "Source";
+})(RichTextEditorTooltips || (RichTextEditorTooltips = {}));
 
 const RichTextEditor = [
 // Layout
@@ -281,14 +315,10 @@ var script = defineComponent({
   expose: ['root', 'editor'],
   setup(props, context) {
     let editor = shallowRef();
+    const controlRef = ref();
+    const toolbarRef = ref();
     // Refs & Styles
     const root = ref();
-    const rootStyles = computed(() => ['or-rich-text-editor-v3', ...RichTextEditor]);
-    const toolbarRef = ref();
-    const toolbarStyles = computed(() => [...RichTextEditorToolbar]);
-    const toolbarGroupStyles = computed(() => [...RichTextEditorToolbarGroup]);
-    const controlRef = ref();
-    const controlStyles = computed(() => ['tiptap-editor-v3', ...RichTextEditorControl]);
     const textareaRef = ref();
     const containerRef = ref();
     const moreButtonRef = ref();
@@ -323,42 +353,9 @@ var script = defineComponent({
     const countOfNotVisibleTools = ref(0);
     const sourceValue = ref('');
     let trap = useFocusTrap(controlRef, {
-      immediate: true,
       fallbackFocus: '.container',
       allowOutsideClick: true
     });
-    const iconsEnum = ref({
-      bold: 'format_bold',
-      italic: 'format_italic',
-      underline: 'format_underlined',
-      strike: 'format_strikethrough',
-      bulletList: 'format_list_bulleted',
-      orderedList: 'format_list_numbered',
-      link: 'link',
-      highlight: 'highlight',
-      redo: 'redo',
-      undo: 'undo',
-      codeBlock: 'code_blocks',
-      blockquote: 'format_quote',
-      file: 'attach_file',
-      source: 'source_notes'
-    });
-    const iconTooltipsEnum = ref({
-      bold: 'Bold',
-      italic: 'Italic',
-      underline: 'Underline',
-      strike: 'Strike',
-      bulletList: 'Bulleted List',
-      orderedList: 'Numbered List',
-      link: 'Link',
-      highlight: 'Highlight',
-      redo: 'Redo',
-      undo: 'Undo',
-      codeBlock: 'Code Block',
-      blockquote: 'Quote',
-      file: 'File',
-      source: 'Source'
-    });
     useResizeObserver(root, useDebounceFn(entries => {
       var _a, _b;
       const entry = entries[0];
@@ -482,6 +479,12 @@ var script = defineComponent({
     const getIndexOfHeading = computed(() => {
       return props.toolbar.flat().indexOf('heading');
     });
+    const getRichTextEditorIcon = computed(() => item => {
+      return RichTextEditorIcons[item];
+    });
+    const getRichTextEditorTooltipIcon = computed(() => item => {
+      return RichTextEditorTooltips[item];
+    });
     const headingIcon = computed(() => {
       if (activeHeadingLevel.value && isActive.value.heading) {
         return `format_h${activeHeadingLevel.value}`;
@@ -652,6 +655,11 @@ var script = defineComponent({
       }
       editor === null || editor === void 0 ? void 0 : editor.setEditable(!disabled);
     });
+    // Styles
+    const rootStyles = computed(() => ['or-rich-text-editor-v3', ...RichTextEditor]);
+    const toolbarStyles = computed(() => [...RichTextEditorToolbar]);
+    const toolbarGroupStyles = computed(() => [...RichTextEditorToolbarGroup]);
+    const controlStyles = computed(() => ['tiptap-editor-v3', ...RichTextEditorControl]);
     return {
       root,
       rootStyles,
@@ -667,11 +675,11 @@ var script = defineComponent({
       textareaRef,
       moreRef,
       menuRef,
-      iconsEnum,
       handleToolbarClick,
       handleEditorClick,
       isActive,
-      iconTooltipsEnum,
+      getRichTextEditorIcon,
+      getRichTextEditorTooltipIcon,
       getIndexOfHeading,
       headingLevels,
       headingIcon,
@@ -774,11 +782,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         }, null, 8 /* PROPS */, ["icon", "tooltip", "selected", "disabled"])) : _ctx.isVisible(item) ? (openBlock(), createBlock(_component_OrIconButton, {
           key: 1,
           icon: {
-            icon: _ctx.iconsEnum[item],
+            icon: _ctx.getRichTextEditorIcon(item),
             variant: 'inherit'
           },
           tooltip: {
-            content: _ctx.iconTooltipsEnum[item],
+            content: _ctx.getRichTextEditorTooltipIcon(item),
             placement: 'top'
           },
           selected: _ctx.isActive[item],
@@ -828,11 +836,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       return openBlock(), createBlock(_component_OrIconButton, {
         key: item,
         icon: {
-          icon: _ctx.iconsEnum[item],
+          icon: _ctx.getRichTextEditorIcon(item),
           variant: 'inherit'
         },
         tooltip: {
-          content: _ctx.iconTooltipsEnum[item],
+          content: _ctx.getRichTextEditorTooltipIcon(item),
           placement: 'top'
         },
         selected: _ctx.isActive[item],
@@ -902,4 +910,4 @@ styleInject(css_248z);
 script.render = render;
 script.__file = "src/components/or-rich-text-editor-v3/OrRichTextEditor.vue";
 
-export { Formats, script as OrRichTextEditorV3 };
+export { Formats, script as OrRichTextEditorV3, RichTextEditorIcons, RichTextEditorTooltips };

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

@@ -3,3 +3,35 @@ export declare enum Formats {
     Markup = "markup"
 }
 export type Tools = string[][];
+export declare enum RichTextEditorIcons {
+    bold = "format_bold",
+    italic = "format_italic",
+    underline = "format_underlined",
+    strike = "format_strikethrough",
+    bulletList = "format_list_bulleted",
+    orderedList = "format_list_numbered",
+    link = "link",
+    highlight = "highlight",
+    redo = "redo",
+    undo = "undo",
+    codeBlock = "code_blocks",
+    blockquote = "format_quote",
+    file = "attach_file",
+    source = "source_notes"
+}
+export declare enum RichTextEditorTooltips {
+    bold = "Bold",
+    italic = "Italic",
+    underline = "Underline",
+    strike = "Strike",
+    bulletList = "Bulleted List",
+    orderedList = "Numbered List",
+    link = "Link",
+    highlight = "Highlight",
+    redo = "Redo",
+    undo = "Undo",
+    codeBlock = "Code Block",
+    blockquote = "Quote",
+    file = "File",
+    source = "Source"
+}

package/dist/esm/index.js

@@ -103,7 +103,7 @@ export { OrRadioV3 } from './components/or-radio-v3/index.js';
 export { OrRangeSliderV3 } from './components/or-range-slider-v3/index.js';
 export { OrRatingV3, RatingVariant } from './components/or-rating-v3/index.js';
 export { OrResizeablePanelV3, ResizeablePanelPadding, ResizeablePanelPlacement } from './components/or-resizeable-panel-v3/index.js';
-export { Formats, OrRichTextEditorV3 } from './components/or-rich-text-editor-v3/index.js';
+export { Formats, OrRichTextEditorV3, RichTextEditorIcons, RichTextEditorTooltips } from './components/or-rich-text-editor-v3/index.js';
 export { OrRichTooltipV3, RichTooltipBehavior } from './components/or-rich-tooltip-v3/index.js';
 export { OrSearch } from './components/or-search/index.js';
 export { OrSearchV3 } from './components/or-search-v3/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "18.4.1",
+  "version": "18.4.2",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v3",
   "sideEffects": false,
@@ -33,7 +33,7 @@
     "@codemirror/view": "^6",
     "@floating-ui/dom": "1.5.3",
     "@lezer/highlight": "*",
-    "@onereach/styles": "^18.4.1",
+    "@onereach/styles": "^18.4.2",
     "@splidejs/splide": "4.0.6",
     "@tiptap/core": "2.0.3",
     "@tiptap/extension-blockquote": "2.0.3",
@@ -141,5 +141,5 @@
     },
     "./package.json": "./package.json"
   },
-  "gitHead": "e7514cc883e08e4368951a4ca978a00dd5c4addc"
+  "gitHead": "c22551ce5da2acc781045646793561b99225f026"
 }

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

@@ -54,8 +54,8 @@
 
             <OrIconButton
               v-else-if="isVisible(item)"
-              :icon="{ icon: iconsEnum[item], variant: 'inherit' }"
-              :tooltip="{ content: iconTooltipsEnum[item], placement: 'top' }"
+              :icon="{ icon: getRichTextEditorIcon(item), variant: 'inherit' }"
+              :tooltip="{ content: getRichTextEditorTooltipIcon(item), placement: 'top' }"
               :selected="isActive[item]"
               :disabled="disabled || !isFocused"
               @click="handleToolbarClick(item)"
@@ -121,8 +121,8 @@
         <OrIconButton
           v-for="item in notVisibleTools"
           :key="item"
-          :icon="{ icon: iconsEnum[item], variant: 'inherit' }"
-          :tooltip="{ content: iconTooltipsEnum[item], placement: 'top' }"
+          :icon="{ icon: getRichTextEditorIcon(item), variant: 'inherit' }"
+          :tooltip="{ content: getRichTextEditorTooltipIcon(item), placement: 'top' }"
           :selected="isActive[item]"
           @click="handleToolbarClick(item)"
         />
@@ -222,7 +222,7 @@ import { OrMenuItemV3 as OrMenuItem } from '../or-menu-item-v3';
 import { OrMenuV3 as OrMenu } from '../or-menu-v3';
 import { OrModalV3 as OrModal } from '../or-modal-v3';
 import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
-import { Formats, Tools } from './props';
+import { Formats, Tools, RichTextEditorIcons, RichTextEditorTooltips } from './props';
 import * as Styles from './styles';
 import codemirrorNode from './utils/codemirror/codemirrorNode';
 import { deserialize, serialize } from './utils/markdown';
@@ -320,32 +320,12 @@ export default defineComponent({
 
   setup(props, context) {
     let editor = shallowRef<Editor>();
+    const controlRef = ref<HTMLDivElement>();
+    const toolbarRef = ref<ComponentPublicInstance<HTMLInputElement>>();
 
     // Refs & Styles
     const root = ref<HTMLElement>();
 
-    const rootStyles = computed(() => [
-      'or-rich-text-editor-v3',
-      ...Styles.RichTextEditor,
-    ]);
-
-    const toolbarRef = ref<ComponentPublicInstance<HTMLInputElement>>();
-
-    const toolbarStyles = computed(() => [
-      ...Styles.RichTextEditorToolbar,
-    ]);
-
-    const toolbarGroupStyles = computed(() => [
-      ...Styles.RichTextEditorToolbarGroup,
-    ]);
-
-    const controlRef = ref<HTMLDivElement>();
-
-    const controlStyles = computed(() => [
-      'tiptap-editor-v3',
-      ...Styles.RichTextEditorControl,
-    ]);
-
     const textareaRef = ref<HTMLTextAreaElement>();
     const containerRef = ref<ComponentPublicInstance<HTMLInputElement>>();
     const moreButtonRef = ref<InstanceType<typeof OrIconButton>>();
@@ -383,44 +363,10 @@ export default defineComponent({
     const sourceValue = ref<string>('');
 
     let trap: UseFocusTrapReturn = useFocusTrap(controlRef, {
-      immediate: true,
       fallbackFocus: '.container',
       allowOutsideClick: true,
     });
 
-    const iconsEnum = ref<{[key: string]: string;}>({
-      bold: 'format_bold',
-      italic: 'format_italic',
-      underline: 'format_underlined',
-      strike: 'format_strikethrough',
-      bulletList: 'format_list_bulleted',
-      orderedList: 'format_list_numbered',
-      link: 'link',
-      highlight: 'highlight',
-      redo: 'redo',
-      undo: 'undo',
-      codeBlock: 'code_blocks',
-      blockquote: 'format_quote',
-      file: 'attach_file',
-      source: 'source_notes',
-    });
-
-    const iconTooltipsEnum = ref<{[key: string]: string;}>({
-      bold: 'Bold',
-      italic: 'Italic',
-      underline: 'Underline',
-      strike: 'Strike',
-      bulletList: 'Bulleted List',
-      orderedList: 'Numbered List',
-      link: 'Link',
-      highlight: 'Highlight',
-      redo: 'Redo',
-      undo: 'Undo',
-      codeBlock: 'Code Block',
-      blockquote: 'Quote',
-      file: 'File',
-      source: 'Source',
-    });
 
     useResizeObserver(root, useDebounceFn((entries) => {
       const entry = entries[0];
@@ -557,6 +503,14 @@ export default defineComponent({
       return props.toolbar.flat().indexOf('heading');
     });
 
+    const getRichTextEditorIcon = computed(() => (item: string) => {
+      return RichTextEditorIcons[item as keyof typeof RichTextEditorTooltips];
+    });
+
+    const getRichTextEditorTooltipIcon = computed(() => (item: string) => {
+      return RichTextEditorTooltips[item as keyof typeof RichTextEditorTooltips];
+    });
+
     const headingIcon = computed(() => {
       if (activeHeadingLevel.value && isActive.value.heading) {
         return `format_h${activeHeadingLevel.value}`;
@@ -728,6 +682,7 @@ export default defineComponent({
       });
     };
 
+
     // Effects
     watch([
       editor,
@@ -749,6 +704,25 @@ export default defineComponent({
       editor?.setEditable(!disabled);
     });
 
+    // Styles
+    const rootStyles = computed(() => [
+      'or-rich-text-editor-v3',
+      ...Styles.RichTextEditor,
+    ]);
+
+    const toolbarStyles = computed(() => [
+      ...Styles.RichTextEditorToolbar,
+    ]);
+
+    const toolbarGroupStyles = computed(() => [
+      ...Styles.RichTextEditorToolbarGroup,
+    ]);
+
+    const controlStyles = computed(() => [
+      'tiptap-editor-v3',
+      ...Styles.RichTextEditorControl,
+    ]);
+
     return {
       root,
       rootStyles,
@@ -768,11 +742,11 @@ export default defineComponent({
       textareaRef,
       moreRef,
       menuRef,
-      iconsEnum,
       handleToolbarClick,
       handleEditorClick,
       isActive,
-      iconTooltipsEnum,
+      getRichTextEditorIcon,
+      getRichTextEditorTooltipIcon,
       getIndexOfHeading,
       headingLevels,
       headingIcon,

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

@@ -4,3 +4,37 @@ export enum Formats {
 }
 
 export type Tools = string[][]; // TODO: Improve this type
+
+export enum RichTextEditorIcons {
+  bold = 'format_bold',
+  italic = 'format_italic',
+  underline = 'format_underlined',
+  strike = 'format_strikethrough',
+  bulletList = 'format_list_bulleted',
+  orderedList = 'format_list_numbered',
+  link = 'link',
+  highlight = 'highlight',
+  redo = 'redo',
+  undo = 'undo',
+  codeBlock = 'code_blocks',
+  blockquote = 'format_quote',
+  file = 'attach_file',
+  source = 'source_notes',
+}
+
+export enum RichTextEditorTooltips {
+  bold = 'Bold',
+  italic = 'Italic',
+  underline = 'Underline',
+  strike = 'Strike',
+  bulletList = 'Bulleted List',
+  orderedList = 'Numbered List',
+  link = 'Link',
+  highlight = 'Highlight',
+  redo = 'Redo',
+  undo = 'Undo',
+  codeBlock = 'Code Block',
+  blockquote = 'Quote',
+  file = 'File',
+  source = 'Source',
+}

package/src/types/Item.ts

@@ -1,6 +1,5 @@
 export type Item<T> = {
   label: string;
   value: T;
-
   disabled?: boolean;
 };