@onereach/ui-components 8.18.2 → 8.18.3-beta.3938.0

package/dist/esm/v2/{OrRichTextEditor-1b7aeae0.js → OrRichTextEditor-a0463597.js}

@@ -527,11 +527,12 @@ var script = defineComponent({
       proxyModelValue.value = markdownOutput.value;
     };
     const handleToolbarClick = (item, level) => {
-      var _a, _b;
+      var _a, _b, _c, _d;
       switch (item) {
         case 'source':
           disableMarkdown.value = !disableMarkdown.value;
           sourceValue.value = serialize(editor === null || editor === void 0 ? void 0 : editor.schema, editor === null || editor === void 0 ? void 0 : editor.getJSON());
+          (_a = textareaRef.value) === null || _a === void 0 ? void 0 : _a.style.setProperty('height', `${((_b = editorRef.value) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 88}px`);
           nextTick(() => {
             var _a;
             return (_a = textareaRef.value) === null || _a === void 0 ? void 0 : _a.focus();
@@ -549,15 +550,15 @@ var script = defineComponent({
               to,
               empty
             } = editor.state.selection;
-            const isLink = (_a = editor.view.state.doc.nodeAt(cursorPosition)) === null || _a === void 0 ? void 0 : _a.marks.filter(mark => mark.type.name === 'link');
-            const existedText = (isLink === null || isLink === void 0 ? void 0 : isLink.length) ? ((_b = editor.view.state.doc.nodeAt(cursorPosition)) === null || _b === void 0 ? void 0 : _b.text) || '' : '';
+            const isLink = (_c = editor.view.state.doc.nodeAt(cursorPosition)) === null || _c === void 0 ? void 0 : _c.marks.filter(mark => mark.type.name === 'link');
+            const existedText = (isLink === null || isLink === void 0 ? void 0 : isLink.length) ? ((_d = editor.view.state.doc.nodeAt(cursorPosition)) === null || _d === void 0 ? void 0 : _d.text) || '' : '';
             text.value = empty ? existedText : editor.state.doc.textBetween(from, to, ' ');
             link.value = editor.getAttributes('link').href || '';
           }
           isOpenLinkModal.value = !isOpenLinkModal.value;
           break;
         case 'blockquote':
-          editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleBlockquote().run();
+          editor === null || editor === void 0 ? void 0 : editor.chain().toggleBlockquote().run();
           break;
         case 'codeBlock':
           if (!isActive.value['codeBlock']) {
@@ -578,7 +579,6 @@ var script = defineComponent({
               level: level
             });
           }
-          editor === null || editor === void 0 ? void 0 : editor.commands.focus();
           break;
         case 'undo':
         case 'redo':
@@ -588,7 +588,7 @@ var script = defineComponent({
           context.emit('file-upload');
           break;
         default:
-          editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleMark(item).run();
+          editor === null || editor === void 0 ? void 0 : editor.chain().toggleMark(item).run();
           break;
       }
     };
@@ -707,7 +707,8 @@ var script = defineComponent({
       handleInput,
       proxyModelValue,
       disableMarkdown,
-      sourceValue
+      sourceValue,
+      activeHeadingLevel
     };
   }
 });
@@ -766,7 +767,7 @@ var __vue_render__ = function () {
         },
         on: {
           "click": function ($event) {
-            return _vm.menuRef.open();
+            return _vm.menuRef.toggle();
           }
         }
       }) : _vm.isVisible(item) ? _c('or-icon-button', {
@@ -887,6 +888,9 @@ var __vue_render__ = function () {
   }, [_vm._l(_vm.headingLevels, function (heading) {
     return _c('or-menu-item', {
       key: heading,
+      class: {
+        'bg-surface-1': _vm.activeHeadingLevel === heading
+      },
       on: {
         "click": function ($event) {
           return _vm.handleToolbarClick('heading', heading);
@@ -894,6 +898,9 @@ var __vue_render__ = function () {
       }
     }, [_vm._v("\n      Heading " + _vm._s(heading) + "\n    ")]);
   }), _vm._v(" "), _c('or-menu-item', {
+    class: {
+      'bg-surface-1': !_vm.activeHeadingLevel
+    },
     on: {
       "click": function ($event) {
         return _vm.handleToolbarClick('heading');

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

@@ -97,7 +97,7 @@ export { _ as OrSliderV3 } from '../OrSlider-dd60a4a1.js';
 export { S as RangeSliderColor, a as RangeSliderOrientation, S as SliderColor, a as SliderOrientation } from '../OrSlider.vue_rollup-plugin-vue_script-eadc5fc6.js';
 export { _ as OrRatingV3 } from '../OrRating-abf1b609.js';
 export { _ as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement, R as SidebarPadding } from '../OrResizeablePanel-037600c1.js';
-export { F as Formats, _ as OrRichTextEditorV3 } from '../OrRichTextEditor-1b7aeae0.js';
+export { F as Formats, _ as OrRichTextEditorV3 } from '../OrRichTextEditor-a0463597.js';
 export { _ as OrSearch } from '../OrSearch-ddf244e6.js';
 export { _ as OrSearchV3 } from '../OrSearch-b357d036.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-00583234.js';

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

@@ -53,6 +53,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     proxyModelValue: import("@vue/composition-api").WritableComputedRef<string>;
     disableMarkdown: import("@vue/composition-api").Ref<boolean>;
     sourceValue: import("@vue/composition-api").Ref<string>;
+    activeHeadingLevel: import("@vue/composition-api").Ref<number>;
 }> & import("@vue/composition-api").Data, {}, {}, {
     modelValue: {
         type: StringConstructor;
@@ -172,6 +173,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     proxyModelValue: import("@vue/composition-api").WritableComputedRef<string>;
     disableMarkdown: import("@vue/composition-api").Ref<boolean>;
     sourceValue: import("@vue/composition-api").Ref<string>;
+    activeHeadingLevel: import("@vue/composition-api").Ref<number>;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     modelValue: string;
     toolbar: Tools;

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

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

package/dist/esm/v2/index.js

@@ -97,7 +97,7 @@ export { _ as OrSliderV3 } from './OrSlider-dd60a4a1.js';
 export { S as RangeSliderColor, a as RangeSliderOrientation, S as SliderColor, a as SliderOrientation } from './OrSlider.vue_rollup-plugin-vue_script-eadc5fc6.js';
 export { _ as OrRatingV3 } from './OrRating-abf1b609.js';
 export { _ as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement, R as SidebarPadding } from './OrResizeablePanel-037600c1.js';
-export { F as Formats, _ as OrRichTextEditorV3 } from './OrRichTextEditor-1b7aeae0.js';
+export { F as Formats, _ as OrRichTextEditorV3 } from './OrRichTextEditor-a0463597.js';
 export { _ as OrSearch } from './OrSearch-ddf244e6.js';
 export { _ as OrSearchV3 } from './OrSearch-b357d036.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-00583234.js';

package/dist/esm/v3/{OrRichTextEditor-9b45fff5.js → OrRichTextEditor-9a0602f9.js}

@@ -526,11 +526,12 @@ var script = defineComponent({
       proxyModelValue.value = markdownOutput.value;
     };
     const handleToolbarClick = (item, level) => {
-      var _a, _b;
+      var _a, _b, _c, _d;
       switch (item) {
         case 'source':
           disableMarkdown.value = !disableMarkdown.value;
           sourceValue.value = serialize(editor === null || editor === void 0 ? void 0 : editor.schema, editor === null || editor === void 0 ? void 0 : editor.getJSON());
+          (_a = textareaRef.value) === null || _a === void 0 ? void 0 : _a.style.setProperty('height', `${((_b = editorRef.value) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 88}px`);
           nextTick(() => {
             var _a;
             return (_a = textareaRef.value) === null || _a === void 0 ? void 0 : _a.focus();
@@ -548,15 +549,15 @@ var script = defineComponent({
               to,
               empty
             } = editor.state.selection;
-            const isLink = (_a = editor.view.state.doc.nodeAt(cursorPosition)) === null || _a === void 0 ? void 0 : _a.marks.filter(mark => mark.type.name === 'link');
-            const existedText = (isLink === null || isLink === void 0 ? void 0 : isLink.length) ? ((_b = editor.view.state.doc.nodeAt(cursorPosition)) === null || _b === void 0 ? void 0 : _b.text) || '' : '';
+            const isLink = (_c = editor.view.state.doc.nodeAt(cursorPosition)) === null || _c === void 0 ? void 0 : _c.marks.filter(mark => mark.type.name === 'link');
+            const existedText = (isLink === null || isLink === void 0 ? void 0 : isLink.length) ? ((_d = editor.view.state.doc.nodeAt(cursorPosition)) === null || _d === void 0 ? void 0 : _d.text) || '' : '';
             text.value = empty ? existedText : editor.state.doc.textBetween(from, to, ' ');
             link.value = editor.getAttributes('link').href || '';
           }
           isOpenLinkModal.value = !isOpenLinkModal.value;
           break;
         case 'blockquote':
-          editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleBlockquote().run();
+          editor === null || editor === void 0 ? void 0 : editor.chain().toggleBlockquote().run();
           break;
         case 'codeBlock':
           if (!isActive.value['codeBlock']) {
@@ -577,7 +578,6 @@ var script = defineComponent({
               level: level
             });
           }
-          editor === null || editor === void 0 ? void 0 : editor.commands.focus();
           break;
         case 'undo':
         case 'redo':
@@ -587,7 +587,7 @@ var script = defineComponent({
           context.emit('file-upload');
           break;
         default:
-          editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleMark(item).run();
+          editor === null || editor === void 0 ? void 0 : editor.chain().toggleMark(item).run();
           break;
       }
     };
@@ -706,7 +706,8 @@ var script = defineComponent({
       handleInput,
       proxyModelValue,
       disableMarkdown,
-      sourceValue
+      sourceValue,
+      activeHeadingLevel
     };
   }
 });
@@ -774,7 +775,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           variant: 'inherit',
           size: 'm'
         },
-        onClick: _cache[0] || (_cache[0] = $event => _ctx.menuRef.open())
+        onClick: _cache[0] || (_cache[0] = $event => _ctx.menuRef.toggle())
       }, null, 8 /* PROPS */, ["selected", "disabled", "tooltip", "icon"])) : _ctx.isVisible(item) ? (openBlock(), createBlock(_component_or_icon_button, {
         key: 1,
         tooltip: {
@@ -852,19 +853,24 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.headingLevels, heading => {
       return openBlock(), createBlock(_component_or_menu_item, {
         key: heading,
+        class: normalizeClass({
+          'bg-surface-1': _ctx.activeHeadingLevel === heading
+        }),
         onClick: $event => _ctx.handleToolbarClick('heading', heading)
       }, {
         default: withCtx(() => [createTextVNode(" Heading " + toDisplayString(heading), 1 /* TEXT */)]),
 
         _: 2 /* DYNAMIC */
-      }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick"]);
+      }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["class", "onClick"]);
     }), 128 /* KEYED_FRAGMENT */)), createVNode(_component_or_menu_item, {
+      class: normalizeClass({
+        'bg-surface-1': !_ctx.activeHeadingLevel
+      }),
       onClick: _cache[5] || (_cache[5] = $event => _ctx.handleToolbarClick('heading'))
     }, {
       default: withCtx(() => [createTextVNode(" None ")]),
       _: 1 /* STABLE */
-    })]),
-
+    }, 8 /* PROPS */, ["class"])]),
     _: 1 /* STABLE */
   }, 8 /* PROPS */, ["trigger"])) : createCommentVNode("v-if", true), createVNode(_component_or_modal, {
     "is-open": _ctx.isOpenLinkModal,

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

@@ -93,7 +93,7 @@ export { s as OrRangeSliderV3 } from '../OrRangeSlider-1c6ff524.js';
 export { s as OrSliderV3, S as RangeSliderColor, a as RangeSliderOrientation, S as SliderColor, a as SliderOrientation } from '../OrSlider-654bd19f.js';
 export { s as OrRatingV3 } from '../OrRating-ec9462c5.js';
 export { s as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement, R as SidebarPadding } from '../OrResizeablePanel-ae6a014f.js';
-export { F as Formats, s as OrRichTextEditorV3 } from '../OrRichTextEditor-9b45fff5.js';
+export { F as Formats, s as OrRichTextEditorV3 } from '../OrRichTextEditor-9a0602f9.js';
 export { s as OrSearch } from '../OrSearch-aa57d4e8.js';
 export { s as OrSearchV3 } from '../OrSearch-e56db8af.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-adbf7f4e.js';

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

@@ -74,6 +74,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     proxyModelValue: import("vue-demi").WritableComputedRef<string | undefined>;
     disableMarkdown: import("vue-demi").Ref<boolean>;
     sourceValue: import("vue-demi").Ref<string>;
+    activeHeadingLevel: import("vue-demi").Ref<number>;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("update:modelValue" | "input" | "file-upload")[], "update:modelValue" | "input" | "file-upload", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {
         type: StringConstructor;

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

@@ -1,4 +1,4 @@
-export { F as Formats, s as OrRichTextEditorV3 } from '../../OrRichTextEditor-9b45fff5.js';
+export { F as Formats, s as OrRichTextEditorV3 } from '../../OrRichTextEditor-9a0602f9.js';
 import 'vue-demi';
 import '@vueuse/integrations/useFocusTrap';
 import '@vueuse/core';

package/dist/esm/v3/index.js

@@ -93,7 +93,7 @@ export { s as OrRangeSliderV3 } from './OrRangeSlider-1c6ff524.js';
 export { s as OrSliderV3, S as RangeSliderColor, a as RangeSliderOrientation, S as SliderColor, a as SliderOrientation } from './OrSlider-654bd19f.js';
 export { s as OrRatingV3 } from './OrRating-ec9462c5.js';
 export { s as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement, R as SidebarPadding } from './OrResizeablePanel-ae6a014f.js';
-export { F as Formats, s as OrRichTextEditorV3 } from './OrRichTextEditor-9b45fff5.js';
+export { F as Formats, s as OrRichTextEditorV3 } from './OrRichTextEditor-9a0602f9.js';
 export { s as OrSearch } from './OrSearch-aa57d4e8.js';
 export { s as OrSearchV3 } from './OrSearch-e56db8af.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-adbf7f4e.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "8.18.2",
+  "version": "8.18.3-beta.3938.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -176,6 +176,5 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  },
-  "gitHead": "56bcce7868733b19a49a5cb2a4ac90eec8247416"
+  }
 }

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

@@ -32,7 +32,7 @@
               :disabled="!isFocused"
               :tooltip="{content: item, placement: 'top'}"
               :icon="{icon: headingIcon, variant: 'inherit', size: 'm'}"
-              @click="menuRef.open()"
+              @click="menuRef.toggle()"
             />
             <or-icon-button
               v-else-if="isVisible(item)"
@@ -98,11 +98,13 @@
       <or-menu-item
         v-for="heading in headingLevels"
         :key="heading"
+        :class="{'bg-surface-1': activeHeadingLevel === heading}"
         @click="handleToolbarClick('heading', heading)"
       >
         Heading {{ heading }}
       </or-menu-item>
       <or-menu-item
+        :class="{'bg-surface-1': !activeHeadingLevel}"
         @click="handleToolbarClick('heading')"
       >
         None
@@ -524,6 +526,8 @@ export default defineComponent({
           disableMarkdown.value = !disableMarkdown.value;
           sourceValue.value = serialize(editor?.schema, editor?.getJSON());
 
+          textareaRef.value?.style.setProperty('height', `${editorRef.value?.offsetHeight || 88}px`);
+
           nextTick(() => textareaRef.value?.focus());
           break;
         case 'bulletList':
@@ -543,7 +547,7 @@ export default defineComponent({
           isOpenLinkModal.value = !isOpenLinkModal.value;
           break;
         case 'blockquote':
-          editor?.chain().focus().toggleBlockquote().run();
+          editor?.chain().toggleBlockquote().run();
           break;
         case 'codeBlock':
           if (!isActive.value['codeBlock']) {
@@ -560,7 +564,6 @@ export default defineComponent({
             activeHeadingLevel.value = level;
             editor?.commands.toggleHeading({ level: level as Level });
           }
-          editor?.commands.focus();
           break;
         case 'undo':
         case 'redo':
@@ -570,7 +573,7 @@ export default defineComponent({
           context.emit('file-upload');
           break;
         default:
-          editor?.chain().focus().toggleMark(item).run();
+          editor?.chain().toggleMark(item).run();
           break;
       }
     };
@@ -726,6 +729,7 @@ export default defineComponent({
       proxyModelValue,
       disableMarkdown,
       sourceValue,
+      activeHeadingLevel,
     };
   },
 });