@onereach/ui-components 2.68.0-beta.2001.0 → 2.68.0-beta.2002.0

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

@@ -1,32 +1,15 @@
-import { defineComponent, ref, onMounted, onBeforeUnmount, computed, watch } from 'vue-demi';
-import { u as useClassAttribute } from '../../useClassAttribute-47fdb016.js';
+export { _ as OrRichTextEditorV3 } from '../../OrRichTextEditor-6bc37dc4.js';
+import 'vue-demi';
+import '../../useClassAttribute-47fdb016.js';
 import '@vueuse/core';
-import { defaultMarkdownSerializer, MarkdownSerializer } from 'prosemirror-markdown';
-import { DOMParser as DOMParser$1 } from 'prosemirror-model';
-import { marked } from 'marked';
-import { _ as __vue_component__$1 } from '../../OrIconButton-a7764de4.js';
-import { _ as __vue_component__$2 } from '../../OrLabel-5670468e.js';
-import { _ as __vue_component__$4 } from '../../OrMenu-e7210edc.js';
-import '../../OrPopover-ef8c91f1.js';
-import { _ as __vue_component__$3 } from '../../OrMenuItem-038641b7.js';
-import { Editor, mergeAttributes } from '@tiptap/core';
-import StarterKit from '@tiptap/starter-kit';
-import Underline from '@tiptap/extension-underline';
-import Link from '@tiptap/extension-link';
-import Highlight from '@tiptap/extension-highlight';
-import Heading from '@tiptap/extension-heading';
-import Placeholder from '@tiptap/extension-placeholder';
-import Paragraph from '@tiptap/extension-paragraph';
-import BulletList from '@tiptap/extension-bullet-list';
-import ListItem from '@tiptap/extension-list-item';
-import OrderedList from '@tiptap/extension-ordered-list';
-import Strike from '@tiptap/extension-strike';
-import Italic from '@tiptap/extension-italic';
-import Bold from '@tiptap/extension-bold';
-import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
-import { c as createInjector } from '../../browser-82dea9ed.js';
+import 'prosemirror-markdown';
+import 'prosemirror-model';
+import 'marked';
+import '../../OrIconButton-a7764de4.js';
 import '../../OrIcon-05689298.js';
+import '../../normalize-component-6e8e3d80.js';
 import '../../OrTooltip-3454c2e6.js';
+import '../../OrPopover-ef8c91f1.js';
 import '@floating-ui/dom';
 import '../../useElevation-31bfe1f6.js';
 import '../../useResponsive-a02e95b7.js';
@@ -34,491 +17,22 @@ import '../../OrBottomSheet-5acd034f.js';
 import '../../OrOverlay-18ba2dc6.js';
 import '../../OrTeleport.vue2-fb92f29f.js';
 import 'portal-vue';
-
-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',
-// Sizing
-'border-1', 'rounded-md'];
-const ToolbarContainer = [
-// Layout
-'flex',
-//Spacing
-'py-sm',
-//Sizing
-'border-b-1',
-//Colors
-'border-b-outline', 'dark:border-b-outline-dark'];
-const Toolbar = [
-// Layout
-'flex',
-// Spacing
-'px-sm', 'gap-md',
-// Sizing
-'border-r-1',
-//Colors
-'border-r-disabled', 'dark:border-r-outline-dark',
-// Last child
-'last-of-type:border-none'];
-const ToolbarButton = [
-// Typography
-'text-on-disabled', 'dark:text-outline-dark'];
-const ToolbarButtonActive = [
-// Typography
-'text-on-background', 'dark:text-on-background-dark'];
-const EditorInput = [
-// Spacing
-'p-sm',
-// Typography
-'typography-body-2-regular', 'text-on-background', 'dark:text-on-background-dark',
-// Sizing
-'min-h-[88px]'];
-
-var script = defineComponent({
-  name: 'OrRichTextEditor',
-  components: {
-    OrIconButton: __vue_component__$1,
-    OrLabel: __vue_component__$2,
-    OrMenuItem: __vue_component__$3,
-    OrMenu: __vue_component__$4
-  },
-  inheritAttrs: false,
-  props: {
-    modelValue: {
-      type: String,
-      default: '',
-      required: false
-    },
-    toolbar: {
-      type: Array,
-      default: () => [['heading'], ['bold', 'italic', 'strike'], ['underline', 'highlight'], ['link'], ['bulletList', 'orderedList'], ['undo', 'redo']]
-    },
-    description: {
-      type: String,
-      default: 'Description'
-    },
-    placeholder: {
-      type: String,
-      default: 'Write something...'
-    },
-    autofocus: {
-      type: Boolean,
-      default: false
-    },
-    markdown: {
-      type: Boolean,
-      default: true
-    }
-  },
-  emits: ['update:modelValue'],
-  setup(props, {
-    emit
-  }) {
-    // Refs
-    let editor = null;
-    const editorRef = ref();
-    const containerRef = ref();
-    const toolbarButtonRef = ref();
-    const menuRef = ref();
-    const isActive = ref({});
-    const headingLevels = [1, 2, 3, 4];
-    const previousHeadingLevel = ref();
-    const activeHeadingLevel = ref(0);
-    const markdownOutput = ref('');
-    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'
-    });
-    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'
-    });
-    const serializerMarks = {
-      ...defaultMarkdownSerializer.marks,
-      [Bold.name]: defaultMarkdownSerializer.marks.strong,
-      [Strike.name]: {
-        open: '~~',
-        close: '~~',
-        mixable: true,
-        expelEnclosingWhitespace: true
-      },
-      [Italic.name]: {
-        open: '_',
-        close: '_',
-        mixable: true,
-        expelEnclosingWhitespace: true
-      },
-      [Highlight.name]: {
-        open: '==',
-        close: '==',
-        mixable: true,
-        expelEnclosingWhitespace: true
-      },
-      [Link.name]: {
-        open(state, mark, parent, index) {
-          return isPlainURL(mark, parent, index, 1) ? '<' : '[';
-        },
-        close(state, mark, parent, index) {
-          const href = mark.attrs.canonicalSrc || mark.attrs.href;
-          return isPlainURL(mark, parent, index, -1) ? '>' : `](${state.esc(href)}${mark.attrs.title ? ` ${state.quote(mark.attrs.title)}` : ''})`;
-        }
-      }
-    };
-    const serializerNodes = {
-      ...defaultMarkdownSerializer.nodes,
-      [Paragraph.name]: defaultMarkdownSerializer.nodes.paragraph,
-      [BulletList.name]: defaultMarkdownSerializer.nodes.bullet_list,
-      [ListItem.name]: defaultMarkdownSerializer.nodes.list_item,
-      [OrderedList.name]: defaultMarkdownSerializer.nodes.ordered_list
-      // [HardBreak.name]: //TODO: add hard break
-    };
-
-    onMounted(() => {
-      editor = new Editor({
-        onUpdate: ({
-          editor
-        }) => {
-          setActiveFormats();
-          const html = editor.getHTML();
-          const text = editor.getText();
-          if (props.markdown) {
-            const markdown = markdownOutput.value = serialize(editor.schema, editor.getJSON());
-            emit('update:modelValue', markdown);
-          } else {
-            emit('update:modelValue', text === '' ? text : html);
-          }
-        },
-        onCreate: ({
-          editor
-        }) => {
-          if (props.markdown) {
-            const deserialized = deserialize(editor.schema, props.modelValue);
-            editor.commands.setContent(deserialized);
-          } else {
-            editor.commands.setContent(props.modelValue);
-          }
-        },
-        element: editorRef.value,
-        autofocus: props.autofocus,
-        extensions: [StarterKit.configure({
-          heading: false
-        }), Heading.configure({
-          levels: headingLevels
-        }).extend({
-          levels: headingLevels,
-          renderHTML({
-            node,
-            HTMLAttributes
-          }) {
-            return ['h' + node.attrs.level, mergeAttributes(HTMLAttributes, {
-              class: `typography-headline-${node.attrs.level}`
-            }), 0];
-          }
-        }), Underline, Link.configure({
-          openOnClick: true,
-          linkOnPaste: true,
-          autolink: false,
-          protocols: ['ftp', 'mailto', 'http', 'https'],
-          validate: href => /^https?:\/\//.test(href),
-          HTMLAttributes: {
-            class: 'text-primary cursor-pointer'
-          }
-        }), Highlight, Placeholder.configure({
-          placeholder: props.placeholder,
-          emptyEditorClass: 'is-editor-empty text-outline'
-        })],
-        editorProps: {
-          attributes: {
-            class: 'focus:outline-none'
-          }
-        }
-      });
-      setActiveFormats();
-    });
-    onBeforeUnmount(() => {
-      editor === null || editor === void 0 ? void 0 : editor.destroy();
-    });
-    // Computed
-    const getIndexOfHeading = computed(() => {
-      return props.toolbar.flat().indexOf('heading');
-    });
-    const headingIcon = computed(() => {
-      if (activeHeadingLevel.value && isActive.value.heading) {
-        return `format_h${activeHeadingLevel.value}`;
-      }
-      return 'format_paragraph';
-    });
-    // Methods
-    const handleEditorClick = () => {
-      setActiveFormats();
-      editor === null || editor === void 0 ? void 0 : editor.commands.focus();
-    };
-    const handleToolbarClick = (item, level) => {
-      if (item === 'bulletList' || item === 'orderedList') {
-        item === 'bulletList' ? editor === null || editor === void 0 ? void 0 : editor.commands.toggleBulletList() : editor === null || editor === void 0 ? void 0 : editor.commands.toggleOrderedList();
-      } else if (item === 'link') {
-        setLink();
-      } else if (item === 'heading') {
-        if (!level) {
-          editor === null || editor === void 0 ? void 0 : editor.commands.toggleHeading({
-            level: previousHeadingLevel.value
-          });
-          activeHeadingLevel.value = 0;
-        } else {
-          activeHeadingLevel.value = level;
-          previousHeadingLevel.value = level;
-          editor === null || editor === void 0 ? void 0 : editor.commands.toggleHeading({
-            level: level
-          });
-        }
-        editor === null || editor === void 0 ? void 0 : editor.commands.focus();
-      } else if (item === 'undo' || item === 'redo') {
-        item === 'undo' ? editor === null || editor === void 0 ? void 0 : editor.commands.undo() : editor === null || editor === void 0 ? void 0 : editor.commands.redo();
-      } else {
-        editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleMark(item).run();
-      }
-    };
-    const setLink = () => {
-      const previousUrl = editor === null || editor === void 0 ? void 0 : editor.getAttributes('link').href;
-      const url = window.prompt('URL', previousUrl);
-      // cancelled
-      if (url === null) {
-        return;
-      }
-      // empty
-      if (url === '') {
-        editor === null || editor === void 0 ? void 0 : editor.chain().focus().extendMarkRange('link').unsetLink().run();
-        return;
-      }
-      // update link
-      editor === null || editor === void 0 ? void 0 : editor.chain().focus().extendMarkRange('link').setLink({
-        href: url
-      }).run();
-    };
-    const setActiveFormats = () => {
-      const toolbarList = props.toolbar.flat();
-      toolbarList.forEach(item => {
-        isActive.value[item] = (editor === null || editor === void 0 ? void 0 : editor.isActive(item)) || false;
-      });
-    };
-    // Styles
-    const classAttribute = useClassAttribute();
-    const rootStyles = computed(() => {
-      return ['or-rich-text-editor', classAttribute.value];
-    });
-    const containerStyles = computed(() => {
-      return [...EditorContainer];
-    });
-    const toolbarContainerStyles = computed(() => {
-      return [...ToolbarContainer];
-    });
-    const toolbarStyles = computed(() => {
-      return [...Toolbar];
-    });
-    const editorInputStyles = computed(() => {
-      return ['tiptap-editor', ...EditorInput];
-    });
-    const toolbarButtonStyles = item => {
-      return [
-      // Layout
-      'flex',
-      // Spacing
-      'gap-md', ...(isActive.value[item] ? ToolbarButtonActive : ToolbarButton)];
-    };
-    const isPlainURL = (link, parent, index, side) => {
-      if (link.attrs.title || !/^\w+:/.test(link.attrs.href)) return false;
-      const content = parent.child(index + (side < 0 ? -1 : 0));
-      if (!content.isText || content.text !== link.attrs.href || content.marks[content.marks.length - 1] !== link) return false;
-      if (index === (side < 0 ? 1 : parent.childCount - 1)) return true;
-      const next = parent.child(index + (side < 0 ? -2 : 1));
-      return !link.isInSet(next.marks);
-    };
-    const serialize = (schema, content) => {
-      const proseMirrorDocument = schema.nodeFromJSON(content);
-      const serializer = new MarkdownSerializer(serializerNodes, serializerMarks);
-      return serializer.serialize(proseMirrorDocument, {
-        tightLists: true
-      });
-    };
-    const deserialize = (schema, content) => {
-      const html = marked.parse(content);
-      if (!html) return null;
-      const parser = new DOMParser();
-      const {
-        body
-      } = parser.parseFromString(html, 'text/html');
-      // append original source as a comment that nodes can access
-      body.append(document.createComment(content));
-      const state = DOMParser$1.fromSchema(schema).parse(body);
-      return state.toJSON();
-    };
-    //Effects
-    watch(() => props.modelValue, value => {
-      if (value !== (editor === null || editor === void 0 ? void 0 : editor.getHTML()) && !props.markdown) {
-        editor === null || editor === void 0 ? void 0 : editor.commands.setContent(value);
-      }
-      if (props.markdown && value !== markdownOutput.value) {
-        editor === null || editor === void 0 ? void 0 : editor.commands.setContent(markdownOutput.value);
-      }
-    });
-    return {
-      editor,
-      editorRef,
-      containerRef,
-      toolbarButtonRef,
-      menuRef,
-      iconsEnum,
-      handleToolbarClick,
-      handleEditorClick,
-      isActive,
-      iconTooltipsEnum,
-      containerStyles,
-      toolbarContainerStyles,
-      toolbarStyles,
-      rootStyles,
-      toolbarButtonStyles,
-      editorInputStyles,
-      getIndexOfHeading,
-      headingLevels,
-      headingIcon
-    };
-  }
-});
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c('div', _vm._b({
-    ref: "root",
-    class: _vm.rootStyles
-  }, 'div', _vm.$attrs, false), [_c('or-label', [_vm._v("\n    " + _vm._s(_vm.description) + "\n  ")]), _vm._v(" "), _c('div', {
-    ref: "containerRef",
-    class: _vm.containerStyles,
-    on: {
-      "click": function ($event) {
-        return _vm.handleEditorClick();
-      }
-    }
-  }, [_c('div', {
-    class: _vm.toolbarContainerStyles
-  }, _vm._l(_vm.toolbar, function (tool) {
-    return _c('div', {
-      key: tool,
-      class: _vm.toolbarStyles
-    }, _vm._l(tool, function (item) {
-      return _c('div', {
-        key: item,
-        staticClass: "-my-xs",
-        class: _vm.toolbarButtonStyles(item)
-      }, [item === 'heading' ? _c('or-icon-button', {
-        ref: "toolbarButtonRef",
-        refInFor: true,
-        attrs: {
-          "tooltip": {
-            text: item,
-            placement: 'top'
-          },
-          "icon": {
-            icon: _vm.headingIcon,
-            variant: 'inherit',
-            size: 'm'
-          }
-        },
-        on: {
-          "click": function ($event) {
-            return _vm.menuRef.open();
-          }
-        }
-      }) : _c('or-icon-button', {
-        attrs: {
-          "tooltip": {
-            text: _vm.iconTooltipsEnum[item],
-            placement: 'top'
-          },
-          "icon": {
-            icon: _vm.iconsEnum[item],
-            variant: 'inherit',
-            size: 'm'
-          }
-        },
-        on: {
-          "click": function ($event) {
-            return _vm.handleToolbarClick(item);
-          }
-        }
-      })], 1);
-    }), 0);
-  }), 0), _vm._v(" "), _c('div', {
-    ref: "editorRef",
-    class: _vm.editorInputStyles
-  })]), _vm._v(" "), _vm.toolbarButtonRef ? _c('or-menu', {
-    ref: "menuRef",
-    attrs: {
-      "trigger": _vm.toolbarButtonRef[_vm.getIndexOfHeading].root,
-      "placement": "bottom-start"
-    }
-  }, [_vm._l(_vm.headingLevels, function (heading) {
-    return _c('or-menu-item', {
-      key: heading,
-      on: {
-        "click": function ($event) {
-          return _vm.handleToolbarClick('heading', heading);
-        }
-      }
-    }, [_vm._v("\n      Heading " + _vm._s(heading) + "\n    ")]);
-  }), _vm._v(" "), _c('or-menu-item', {
-    on: {
-      "click": function ($event) {
-        return _vm.handleToolbarClick('heading');
-      }
-    }
-  }, [_vm._v("\n      None\n    ")])], 2) : _vm._e()], 1);
-};
-var __vue_staticRenderFns__ = [];
-
-/* style */
-const __vue_inject_styles__ = function (inject) {
-  if (!inject) return;
-  inject("data-v-592455cc_0", {
-    source: ".tiptap-editor ol{margin:0 24px;list-style:decimal}.tiptap-editor ul{margin:0 24px;list-style:initial}.tiptap-editor .is-editor-empty::before{content:attr(data-placeholder);height:0;pointer-events:none;float:left}",
-    map: undefined,
-    media: undefined
-  });
-};
-/* scoped */
-const __vue_scope_id__ = undefined;
-/* module identifier */
-const __vue_module_identifier__ = undefined;
-/* functional template */
-const __vue_is_functional_template__ = false;
-/* style inject SSR */
-
-/* style inject shadow dom */
-
-const __vue_component__ = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__,
-  staticRenderFns: __vue_staticRenderFns__
-}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, createInjector, undefined, undefined);
-
-export { __vue_component__ as OrRichTextEditor };
+import '../../OrLabel-5670468e.js';
+import '../../OrMenu-e7210edc.js';
+import '../../OrMenuItem-038641b7.js';
+import '@tiptap/core';
+import '@tiptap/starter-kit';
+import '@tiptap/extension-underline';
+import '@tiptap/extension-link';
+import '@tiptap/extension-highlight';
+import '@tiptap/extension-heading';
+import '@tiptap/extension-placeholder';
+import '@tiptap/extension-paragraph';
+import '@tiptap/extension-bullet-list';
+import '@tiptap/extension-list-item';
+import '@tiptap/extension-ordered-list';
+import '@tiptap/extension-strike';
+import '@tiptap/extension-italic';
+import '@tiptap/extension-hard-break';
+import '@tiptap/extension-bold';
+import '../../browser-82dea9ed.js';

package/dist/esm/v2/index.js

@@ -95,6 +95,7 @@ export { p as PropsV3, a as useQueueV3, u as useToastV3 } from './useToast-06654
 export { _ as OrTooltip } from './OrTooltip-614b016d.js';
 export { _ as OrTooltipContent } from './OrTooltip.vue_rollup-plugin-vue_script-63559536.js';
 export { _ as OrTooltipV3 } from './OrTooltip-3454c2e6.js';
+export { _ as OrRichTextEditorV3 } from './OrRichTextEditor-6bc37dc4.js';
 export { D as DropdownClose, a as DropdownOpen } from './dropdown-open-0d314aa4.js';
 export { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 export { u as useElevation } from './useElevation-31bfe1f6.js';
@@ -124,6 +125,24 @@ import 'sortablejs';
 import '@vueuse/integrations/useFocusTrap';
 import 'portal-vue/dist/portal-vue.esm.js';
 import 'portal-vue';
+import 'prosemirror-markdown';
+import 'prosemirror-model';
+import 'marked';
+import '@tiptap/core';
+import '@tiptap/starter-kit';
+import '@tiptap/extension-underline';
+import '@tiptap/extension-link';
+import '@tiptap/extension-highlight';
+import '@tiptap/extension-heading';
+import '@tiptap/extension-placeholder';
+import '@tiptap/extension-paragraph';
+import '@tiptap/extension-bullet-list';
+import '@tiptap/extension-list-item';
+import '@tiptap/extension-ordered-list';
+import '@tiptap/extension-strike';
+import '@tiptap/extension-italic';
+import '@tiptap/extension-hard-break';
+import '@tiptap/extension-bold';
 
 function getAbbreviation(text, limit) {
   var _a;