@onereach/ui-components 2.70.0-beta.2164.0 → 2.70.0-beta.2167.0

package/dist/bundled/v2/{OrRichTextEditor-9e2535da.js → OrRichTextEditor-eb28a309.js}

@@ -1,4 +1,5 @@
 import './index-fa6eb4ca.js';
+import { onClickOutside } from '@vueuse/core';
 import { S as Schema, M as Mark$1, T as TextSelection, N as NodeSelection, a as Selection, b as Slice, d as dropPoint, D as DOMSerializer, F as Fragment, c as DOMParser$1, A as AllSelection, P as Plugin, e as NodeRange, f as findWrapping, R as ReplaceAroundStep, g as canSplit, l as liftTarget, h as canJoin, i as PluginKey, E as EditorState, j as createParagraphNear$1, k as deleteSelection$1, m as exitCode$1, n as joinUp$1, o as joinDown$1, p as joinBackward$1, q as joinForward$1, r as lift$1, s as liftEmptyBlock$1, t as newlineInCode$1, u as selectNodeBackward$1, v as selectNodeForward$1, w as selectParentNode$1, x as selectTextblockEnd$1, y as selectTextblockStart$1, z as Transform, B as setBlockType, C as wrapIn$1, G as ReplaceStep, H as Mapping, I as CodeMirrorView } from './codemirrorView-77ce9187.js';
 import require$$8 from 'node:punycode';
 import { c as keyName, d as base } from './index-780d00b0.js';
@@ -28071,7 +28072,10 @@ const Toolbar = [
 'last-of-type:border-none'];
 const ToolbarButton = [
 // Typography
-'text-on-disabled', 'dark:text-outline-dark'];
+'text-on-disabled', 'dark:text-on-disabled-dark'];
+const ToolbarButtonFocused = [
+// Typography
+'text-outline', 'dark:text-outline-dark'];
 const ToolbarButtonActive = [
 // Typography
 'text-on-background', 'dark:text-on-background-dark'];
@@ -29597,6 +29601,7 @@ var script = defineComponent({
     const toolbarButtonRef = ref();
     const menuRef = ref();
     const isActive = ref({});
+    const isFocused = ref(props.autofocus);
     const headingLevels = [1, 2, 3, 4];
     const previousHeadingLevel = ref();
     const activeHeadingLevel = ref(0);
@@ -29639,6 +29644,7 @@ var script = defineComponent({
         onUpdate: ({
           editor
         }) => {
+          isFocused.value = true;
           setActiveFormats();
           const html = editor.getHTML();
           const text = editor.getText();
@@ -29700,7 +29706,10 @@ var script = defineComponent({
     onBeforeUnmount(() => {
       editor === null || editor === void 0 ? void 0 : editor.destroy();
     });
-    // trap.activate();
+    onClickOutside(root, () => {
+      isFocused.value = false;
+      // trap.deactivate();
+    });
     // Computed
     const proxyModelValue = computed({
       get: () => {
@@ -29725,6 +29734,7 @@ var script = defineComponent({
     //Methods
     const handleEditorClick = () => {
       setActiveFormats();
+      isFocused.value = true;
       editor === null || editor === void 0 ? void 0 : editor.commands.focus();
     };
     const handleToolbarClick = (item, level) => {
@@ -29797,7 +29807,7 @@ var script = defineComponent({
       return [...ToolbarContainer];
     });
     const toolbarStyles = computed(() => {
-      return [...Toolbar];
+      return [...Toolbar, ...(isFocused.value ? ToolbarButtonFocused : ToolbarButton)];
     });
     const editorInputStyles = computed(() => {
       return ['tiptap-editor', ...(props.fullHeight ? ['h-full'] : []), ...EditorInput];
@@ -29807,7 +29817,7 @@ var script = defineComponent({
       // Layout
       'flex',
       // Spacing
-      'gap-md', ...(isActive.value[item] ? ToolbarButtonActive : ToolbarButton)];
+      'gap-md', ...(isActive.value[item] ? ToolbarButtonActive : [])];
     };
     //Effects
     watch(proxyModelValue, value => {
@@ -29943,7 +29953,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = function (inject) {
   if (!inject) return;
-  inject("data-v-107095c6_0", {
+  inject("data-v-98327460_0", {
     source: ".tiptap-editor ol{margin:0 24px;list-style:decimal}.tiptap-editor ul{margin:0 24px;list-style:initial}.tiptap-editor pre{background-color:rgba(186,209,236,.3);padding:4px 8px;margin:4px 0;width:100%;border-radius:4px}.tiptap-editor blockquote{margin:8px 24px;padding:0 24px;border-left:4px solid #bad1ec}.tiptap-editor .is-editor-empty::before{content:attr(data-placeholder);height:0;pointer-events:none;float:left}.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)}",
     map: undefined,
     media: undefined

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

@@ -96,7 +96,7 @@ export { p as PropsV3, a as useQueueV3, u as useToastV3 } from '../useToast-3a3d
 export { O as OrTooltip } from '../OrTooltip-dfea7af2.js';
 export { O as OrTooltipContent } from '../OrTooltipContent-f0fd5f75.js';
 export { O as OrTooltipV3 } from '../OrTooltip-fbfa05fd.js';
-export { _ as OrRichTextEditorV3 } from '../OrRichTextEditor-9e2535da.js';
+export { _ as OrRichTextEditorV3 } from '../OrRichTextEditor-eb28a309.js';
 import '../index-fa6eb4ca.js';
 import 'vue';
 import '@vue/composition-api/dist/vue-composition-api.mjs';

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

@@ -1,7 +1,8 @@
-export { _ as OrRichTextEditorV3 } from '../../OrRichTextEditor-9e2535da.js';
+export { _ as OrRichTextEditorV3 } from '../../OrRichTextEditor-eb28a309.js';
 import '../../index-fa6eb4ca.js';
 import 'vue';
 import '@vue/composition-api/dist/vue-composition-api.mjs';
+import '@vueuse/core';
 import '../../codemirrorView-77ce9187.js';
 import '../../index-780d00b0.js';
 import 'node:punycode';
@@ -11,7 +12,6 @@ import '../../OrIcon-8625385f.js';
 import '../../useClassAttribute-9bf33346.js';
 import '../../normalize-component-6e8e3d80.js';
 import '../../OrTooltip-fbfa05fd.js';
-import '@vueuse/core';
 import '../../OrPopover-5dc240f1.js';
 import '../../floating-ui.dom.esm-83eba816.js';
 import '../../OrBottomSheet-1cd1ab4c.js';

package/dist/bundled/v2/components/or-rich-text-editor-v3/styles.d.ts

@@ -2,5 +2,6 @@ export declare const EditorContainer: string[];
 export declare const ToolbarContainer: string[];
 export declare const Toolbar: string[];
 export declare const ToolbarButton: string[];
+export declare const ToolbarButtonFocused: string[];
 export declare const ToolbarButtonActive: string[];
 export declare const EditorInput: string[];