@onereach/ui-components 4.4.0-beta.2688.0 → 4.4.0-beta.2691.0

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

@@ -1523,6 +1523,7 @@ var script = defineComponent({
     const root = ref();
     let editor = null;
     const editorRef = ref();
+    const textareaRef = ref();
     const containerRef = ref();
     const toolbarRef = ref();
     const moreButtonRef = ref();
@@ -1539,6 +1540,7 @@ var script = defineComponent({
     const text = ref('');
     const link = ref('');
     const countOfNotVisibleTools = ref(0);
+    const sourceValue = ref('');
     let trap = useFocusTrap(editorRef, {
       immediate: true,
       fallbackFocus: '.container',
@@ -1655,7 +1657,7 @@ var script = defineComponent({
         })],
         editorProps: {
           attributes: {
-            class: 'focus:outline-none'
+            class: 'flex flex-col focus:outline-none gap-xs'
           }
         },
         parseOptions: {
@@ -1720,25 +1722,18 @@ var script = defineComponent({
       }
       return !notVisibleTools.value.includes(value);
     };
+    const handleInput = event => {
+      const target = event.target;
+      const value = target.value;
+      editor === null || editor === void 0 ? void 0 : editor.commands.setContent(deserialize(editor === null || editor === void 0 ? void 0 : editor.schema, value));
+    };
     const handleToolbarClick = (item, level) => {
-      var _a, _b;
+      var _a, _b, _c;
       switch (item) {
         case 'source':
           disableMarkdown.value = !disableMarkdown.value;
-          editor === null || editor === void 0 ? void 0 : editor.setOptions({
-            enableInputRules: !disableMarkdown.value,
-            enablePasteRules: !disableMarkdown.value
-          });
-          editor === null || editor === void 0 ? void 0 : editor.view.updateState(editor === null || editor === void 0 ? void 0 : editor.state.reconfigure({
-            plugins: editor.extensionManager.plugins
-          }));
-          if (disableMarkdown.value) {
-            const content = serialize(editor === null || editor === void 0 ? void 0 : editor.schema, editor === null || editor === void 0 ? void 0 : editor.getJSON());
-            editor === null || editor === void 0 ? void 0 : editor.commands.clearContent();
-            editor === null || editor === void 0 ? void 0 : editor.commands.insertContent(content);
-          } else {
-            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.getText()));
-          }
+          (_a = textareaRef.value) === null || _a === void 0 ? void 0 : _a.focus();
+          sourceValue.value = serialize(editor === null || editor === void 0 ? void 0 : editor.schema, editor === null || editor === void 0 ? void 0 : editor.getJSON());
           break;
         case 'bulletList':
         case 'orderedList':
@@ -1752,8 +1747,8 @@ 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 = (_b = editor.view.state.doc.nodeAt(cursorPosition)) === null || _b === void 0 ? void 0 : _b.marks.filter(mark => mark.type.name === 'link');
+            const existedText = (isLink === null || isLink === void 0 ? void 0 : isLink.length) ? ((_c = editor.view.state.doc.nodeAt(cursorPosition)) === null || _c === void 0 ? void 0 : _c.text) || '' : '';
             text.value = empty ? existedText : editor.state.doc.textBetween(from, to, ' ');
             link.value = editor.getAttributes('link').href || '';
           }
@@ -1883,6 +1878,7 @@ var script = defineComponent({
       containerRef,
       toolbarButtonRef,
       moreButtonRef,
+      textareaRef,
       moreRef,
       menuRef,
       iconsEnum,
@@ -1907,12 +1903,16 @@ var script = defineComponent({
       isFocused,
       isVisible,
       countOfNotVisibleTools,
-      notVisibleTools
+      notVisibleTools,
+      handleInput,
+      proxyModelValue,
+      disableMarkdown,
+      sourceValue
     };
   }
 });
 
-var css_248z = ".tiptap-editor-v3 ol{margin:0 24px;list-style:decimal}.tiptap-editor-v3 .ProseMirror p{margin:4px}.tiptap-editor-v3 .ProseMirror h1,.tiptap-editor-v3 .ProseMirror h2,.tiptap-editor-v3 .ProseMirror h3,.tiptap-editor-v3 .ProseMirror h4,.tiptap-editor-v3 .ProseMirror h5,.tiptap-editor-v3 .ProseMirror h6{margin:4px}.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)}";
+var css_248z = ".tiptap-editor-v3 ol{margin:0 24px;list-style:decimal}.tiptap-editor-v3 .ProseMirror p{margin:4px}.tiptap-editor-v3 .ProseMirror h1,.tiptap-editor-v3 .ProseMirror h2,.tiptap-editor-v3 .ProseMirror h3,.tiptap-editor-v3 .ProseMirror h4,.tiptap-editor-v3 .ProseMirror h5,.tiptap-editor-v3 .ProseMirror h6{margin:4px}.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 rgba(0, 95, 177, 0.16)}.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, 0.12);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, 0.16)}";
 styleInject(css_248z);
 
 /* script */
@@ -2010,7 +2010,41 @@ var __vue_render__ = function () {
     class: ['p-sm', {
       'h-[calc(100%-32px)] md:h-[calc(100%-36px)]': _vm.fullHeight
     }]
-  }, [_c('div', {
+  }, [_c('textarea', {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.disableMarkdown,
+      expression: "disableMarkdown"
+    }, {
+      name: "model",
+      rawName: "v-model",
+      value: _vm.sourceValue,
+      expression: "sourceValue"
+    }],
+    ref: "textareaRef",
+    staticClass: "w-full h-full resize-none border-none outline-none bg-transparent",
+    attrs: {
+      "activated": _vm.disableMarkdown
+    },
+    domProps: {
+      "value": _vm.sourceValue
+    },
+    on: {
+      "input": [function ($event) {
+        if ($event.target.composing) {
+          return;
+        }
+        _vm.sourceValue = $event.target.value;
+      }, _vm.handleInput]
+    }
+  }), _vm._v(" "), _c('div', {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: !_vm.disableMarkdown,
+      expression: "!disableMarkdown"
+    }],
     ref: "editorRef",
     class: _vm.editorInputStyles
   }), _vm._v(" "), _vm._t("files")], 2)]), _vm._v(" "), _vm.moreButtonRef ? _c('or-menu', {

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

@@ -13,6 +13,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         [x: number]: string;
     } | {}, true> | undefined>;
     moreButtonRef: import("@vue/composition-api").Ref<HTMLDivElement | undefined>;
+    textareaRef: import("@vue/composition-api").Ref<HTMLTextAreaElement | 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;
@@ -48,6 +49,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     isVisible: (value: string | Array<string>) => boolean;
     countOfNotVisibleTools: import("@vue/composition-api").Ref<number>;
     notVisibleTools: import("@vue/composition-api").ComputedRef<string[]>;
+    handleInput: (event: InputEvent) => void;
+    proxyModelValue: import("@vue/composition-api").WritableComputedRef<string>;
+    disableMarkdown: import("@vue/composition-api").Ref<boolean>;
+    sourceValue: import("@vue/composition-api").Ref<string>;
 }> & import("@vue/composition-api").Data, {}, {}, {
     modelValue: {
         type: StringConstructor;
@@ -153,6 +158,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         [x: number]: string;
     } | {}, true> | undefined>;
     moreButtonRef: import("@vue/composition-api").Ref<HTMLDivElement | undefined>;
+    textareaRef: import("@vue/composition-api").Ref<HTMLTextAreaElement | 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;
@@ -188,6 +194,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     isVisible: (value: string | Array<string>) => boolean;
     countOfNotVisibleTools: import("@vue/composition-api").Ref<number>;
     notVisibleTools: import("@vue/composition-api").ComputedRef<string[]>;
+    handleInput: (event: InputEvent) => void;
+    proxyModelValue: import("@vue/composition-api").WritableComputedRef<string>;
+    disableMarkdown: import("@vue/composition-api").Ref<boolean>;
+    sourceValue: import("@vue/composition-api").Ref<string>;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     modelValue: string;
     toolbar: string[][];

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

@@ -31,7 +31,7 @@ const ToolbarButtonFocused = [
 'text-outline'];
 const EditorInput = [
 // Typography
-'typography-body-2-regular', 'text-on-background',
+'typography-body-2-regular', 'text-on-background', 'dark:text-on-background-dark',
 // Sizing
 'min-h-[88px]'];