@onereach/ui-components 4.1.1 → 4.2.0-beta.2545.0

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

@@ -0,0 +1,170 @@
+import { Editor } from '@tiptap/core';
+import { Level } from '@tiptap/extension-heading';
+declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
+    editor: Editor | null;
+    editorRef: import("@vue/composition-api").Ref<HTMLDivElement | undefined>;
+    containerRef: import("@vue/composition-api").Ref<HTMLDivElement | undefined>;
+    toolbarButtonRef: 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;
+    } | string[], {} & {}, {
+        [x: number]: string;
+    } | {}, true> | 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;
+    } | string[], {} & {}, {
+        [x: number]: string;
+    } | {}, true> | undefined>;
+    iconsEnum: import("@vue/composition-api").Ref<{
+        [x: string]: string;
+    }>;
+    handleToolbarClick: (item: string, level?: number) => void;
+    handleEditorClick: () => void;
+    isActive: import("@vue/composition-api").Ref<{
+        [x: string]: boolean;
+    }>;
+    iconTooltipsEnum: import("@vue/composition-api").Ref<{
+        [x: string]: string;
+    }>;
+    containerStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    toolbarContainerStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    toolbarStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    editorInputStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    getIndexOfHeading: import("@vue/composition-api").ComputedRef<number>;
+    headingLevels: Level[];
+    headingIcon: import("@vue/composition-api").ComputedRef<string>;
+    attachLink: () => Promise<void>;
+    discardLink: () => void;
+    isOpenLinkModal: import("@vue/composition-api").Ref<boolean>;
+    text: import("@vue/composition-api").Ref<string>;
+    link: import("@vue/composition-api").Ref<string>;
+    isFocused: import("@vue/composition-api").Ref<boolean>;
+}> & import("@vue/composition-api").Data, {}, {}, {
+    modelValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    toolbar: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    description: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    autofocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    markdownFormat: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    fullHeight: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, import("@vue/composition-api").ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    toolbar: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    description: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    autofocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    markdownFormat: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    fullHeight: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
+    modelValue: string;
+    toolbar: unknown[];
+    description: string;
+    placeholder: string;
+    autofocus: boolean;
+    markdownFormat: boolean;
+    fullHeight: boolean;
+} & {} & {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, import("@vue/composition-api").ShallowUnwrapRef<{
+    editor: Editor | null;
+    editorRef: import("@vue/composition-api").Ref<HTMLDivElement | undefined>;
+    containerRef: import("@vue/composition-api").Ref<HTMLDivElement | undefined>;
+    toolbarButtonRef: 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;
+    } | string[], {} & {}, {
+        [x: number]: string;
+    } | {}, true> | 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;
+    } | string[], {} & {}, {
+        [x: number]: string;
+    } | {}, true> | undefined>;
+    iconsEnum: import("@vue/composition-api").Ref<{
+        [x: string]: string;
+    }>;
+    handleToolbarClick: (item: string, level?: number) => void;
+    handleEditorClick: () => void;
+    isActive: import("@vue/composition-api").Ref<{
+        [x: string]: boolean;
+    }>;
+    iconTooltipsEnum: import("@vue/composition-api").Ref<{
+        [x: string]: string;
+    }>;
+    containerStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    toolbarContainerStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    toolbarStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    editorInputStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    getIndexOfHeading: import("@vue/composition-api").ComputedRef<number>;
+    headingLevels: Level[];
+    headingIcon: import("@vue/composition-api").ComputedRef<string>;
+    attachLink: () => Promise<void>;
+    discardLink: () => void;
+    isOpenLinkModal: import("@vue/composition-api").Ref<boolean>;
+    text: import("@vue/composition-api").Ref<string>;
+    link: import("@vue/composition-api").Ref<string>;
+    isFocused: import("@vue/composition-api").Ref<boolean>;
+}>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
+    modelValue: string;
+    toolbar: unknown[];
+    description: string;
+    placeholder: string;
+    autofocus: boolean;
+    markdownFormat: boolean;
+    fullHeight: boolean;
+} & {} & {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, {
+    modelValue: string;
+    toolbar: unknown[];
+    description: string;
+    placeholder: string;
+    autofocus: boolean;
+    markdownFormat: boolean;
+    fullHeight: boolean;
+}, true>);
+export default _default;

package/dist/bundled/v2/components/OrRichTextEditorV3/index.d.ts

@@ -0,0 +1 @@
+export { default as OrRichTextEditorV3 } from './OrRichTextEditor.vue';

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

@@ -0,0 +1,68 @@
+export { default as OrRichTextEditorV3 } from './OrRichTextEditor.js';
+import 'vue-demi';
+import '../../useFocusTrap-9567b3c8.js';
+import '@vueuse/core';
+import '../../markdown-516daba9.js';
+import '../../index-62c3221b.js';
+import 'node:punycode';
+import '../../tiptap-core.esm-f85402b1.js';
+import '../../index.es-3f39f316.js';
+import './styles.js';
+import './utils/codemirror/codemirrorNode.js';
+import './utils/codemirror/codemirrorView.js';
+import '../../index-f5487f12.js';
+import './utils/codemirror/theme.js';
+import '../../index-16aee5bc.js';
+import '../../index-70ca38c5.js';
+import '../OrIconButtonV3/OrIconButton.js';
+import '../OrIconButtonV3/props.js';
+import '../OrIconV3/props.js';
+import '../OrIconButtonV3/styles.js';
+import '../OrIconV3/OrIcon.js';
+import '../OrIconV3/styles.js';
+import '../../normalize-component-6e8e3d80.js';
+import '../OrTooltipV3/OrTooltip.js';
+import '../OrTooltipV3/styles.js';
+import '../OrPopoverV3/OrPopover.js';
+import '../../floating-ui.dom.esm-83eba816.js';
+import '../OrPopoverV3/props.js';
+import '../OrPopoverV3/styles.js';
+import '../OrBottomSheetV3/OrBottomSheet.js';
+import '../OrBottomSheetV3/styles.js';
+import '../OrOverlayV3/OrOverlay.js';
+import '../OrOverlayV3/styles.js';
+import '../OrTeleportV3/OrTeleport.js';
+import 'portal-vue';
+import '../../hooks/useElevation.js';
+import '../../utils/isVisible.js';
+import '../../hooks/useResponsive/useResponsive.js';
+import '../OrLabelV3/OrLabel.js';
+import '../OrLabelV3/props.js';
+import '../OrLabelV3/styles.js';
+import '../OrMenuItemV3/OrMenuItem.js';
+import '../OrMenuItemV3/styles.js';
+import '../OrMenuV3/OrMenu.js';
+import '../OrMenuV3/styles.js';
+import '../OrModalV3/OrModal.js';
+import '../OrModalV3/props.js';
+import '../OrModalV3/styles.js';
+import '../OrInputV3/OrInput.js';
+import '../OrInputV3/props.js';
+import '../OrInputBoxV3/props.js';
+import '../OrInputV3/styles.js';
+import '../OrErrorV3/OrError.js';
+import '../OrErrorV3/styles.js';
+import '../OrHintV3/OrHint.js';
+import '../OrHintV3/styles.js';
+import '../OrInputBoxV3/OrInputBox.js';
+import '../OrInputBoxV3/styles.js';
+import '../OrLoaderV3/OrLoader.js';
+import '../OrLoaderV3/props.js';
+import '../OrLoaderV3/styles.js';
+import '../../hooks/useIdAttribute.js';
+import '../../hooks/useControlAttributes.js';
+import '../../hooks/useValidationAttributes.js';
+import '../../style-inject.es-4c6f2515.js';
+import '../OrButtonV3/OrButton.js';
+import '../OrButtonV3/props.js';
+import '../OrButtonV3/styles.js';

package/dist/bundled/v2/components/OrRichTextEditorV3/styles.d.ts

@@ -0,0 +1,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 EditorInput: string[];

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

@@ -0,0 +1,38 @@
+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', 'w-full'];
+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-on-disabled-dark'];
+const ToolbarButtonFocused = [
+// Typography
+'text-outline', 'dark:text-outline-dark'];
+const EditorInput = [
+// Typography
+'typography-body-2-regular', 'text-on-background', 'dark:text-on-background-dark',
+// Sizing
+'min-h-[88px]'];
+
+export { EditorContainer, EditorInput, Toolbar, ToolbarButton, ToolbarButtonFocused, ToolbarContainer };

package/dist/bundled/v2/components/OrRichTextEditorV3/utils/codemirror/codemirrorNode.d.ts

@@ -0,0 +1,3 @@
+import { Node } from '@tiptap/core';
+declare const _default: Node<any, any>;
+export default _default;

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

@@ -0,0 +1,45 @@
+import { N as Node } from '../../../../tiptap-core.esm-f85402b1.js';
+import CodeMirrorView from './codemirrorView.js';
+import { m as minimalSetup } from '../../../../index-16aee5bc.js';
+import { e as javascript } from '../../../../index-70ca38c5.js';
+import '../../../../index-62c3221b.js';
+import '../../../../index.es-3f39f316.js';
+import '../../../../index-f5487f12.js';
+import './theme.js';
+
+var codemirrorNode = Node.create({
+  name: 'codeBlock',
+  content: 'text*',
+  marks: '',
+  group: 'block',
+  code: true,
+  defining: true,
+  isolating: true,
+  parseHTML() {
+    return [{
+      tag: 'pre',
+      preserveWhitespace: 'full'
+    }];
+  },
+  renderHTML() {
+    return ['pre', ['code', 0]];
+  },
+  addNodeView() {
+    return ({
+      node,
+      editor,
+      getPos
+    }) => {
+      return new CodeMirrorView({
+        node,
+        view: editor.view,
+        getPos: getPos,
+        cmOptions: {
+          extensions: [minimalSetup, javascript()]
+        }
+      });
+    };
+  }
+});
+
+export { codemirrorNode as default };

package/dist/bundled/v2/components/OrRichTextEditorV3/utils/codemirror/codemirrorView.d.ts

@@ -0,0 +1,27 @@
+import { TextSelection } from 'prosemirror-state';
+import { EditorView, NodeView } from 'prosemirror-view';
+import { Node as ProsemirrorNode } from 'prosemirror-model';
+import { Transaction as CMTransaction } from '@codemirror/state';
+import { Command, EditorView as CMView } from '@codemirror/view';
+import { CodeMirrorViewOptions } from './types';
+declare class CodeMirrorView implements NodeView {
+    name: string;
+    node: ProsemirrorNode;
+    view: EditorView;
+    dom: HTMLElement;
+    cm: CMView;
+    getPos: () => number;
+    updating: boolean;
+    constructor(options: CodeMirrorViewOptions);
+    forwardSelection(): void;
+    asProseMirrorSelection(doc: ProsemirrorNode): TextSelection;
+    dispatch(cmTr: CMTransaction): void;
+    mayBeEscape(unit: 'char' | 'line', dir: -1 | 1): Command;
+    update(node: ProsemirrorNode): boolean;
+    setSelection(anchor: number, head: number): void;
+    focus(): void;
+    selectNode(): void;
+    stopEvent(): boolean;
+    destroy(): void;
+}
+export default CodeMirrorView;

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

@@ -0,0 +1,184 @@
+import { n as exitCode, T as TextSelection, S as Selection } from '../../../../index-62c3221b.js';
+import { a as EditorState, E as EditorView, Y as highlightActiveLine, B as highlightActiveLineGutter, z as lineNumbers, k as keymap } from '../../../../index-f5487f12.js';
+import theme from './theme.js';
+import '../../../../index.es-3f39f316.js';
+
+const computeChange = (oldVal, newVal) => {
+  if (oldVal === newVal) {
+    return null;
+  }
+  let start = 0;
+  let oldEnd = oldVal.length;
+  let newEnd = newVal.length;
+  while (start < oldEnd && oldVal.charCodeAt(start) === newVal.charCodeAt(start)) {
+    start += 1;
+  }
+  while (oldEnd > start && newEnd > start && oldVal.charCodeAt(oldEnd - 1) === newVal.charCodeAt(newEnd - 1)) {
+    oldEnd -= 1;
+    newEnd -= 1;
+  }
+  return {
+    from: start,
+    to: oldEnd,
+    text: newVal.slice(start, newEnd)
+  };
+};
+class CodeMirrorView {
+  constructor(options) {
+    var _a;
+    this.updating = false;
+    // Store for later
+    this.node = options.node;
+    this.view = options.view;
+    const cmExtensions = ((_a = options.cmOptions) === null || _a === void 0 ? void 0 : _a.extensions) || [];
+    this.name = 'codeBlock', this.getPos = options.getPos;
+    const changeFilter = EditorState.changeFilter.of(tr => {
+      if (!tr.docChanged && !this.updating) {
+        this.forwardSelection();
+      }
+      return true;
+    });
+    // Create a CodeMirror instancew
+    this.cm = new EditorView({
+      dispatch: this.dispatch.bind(this)
+    });
+    // The editor's outer node is our DOM representation
+    this.dom = this.cm.dom;
+    const cmState = EditorState.create({
+      doc: this.node.textContent,
+      extensions: [theme, changeFilter, highlightActiveLine(), highlightActiveLineGutter(), lineNumbers(), keymap.of([{
+        key: 'ArrowUp',
+        run: this.mayBeEscape('line', -1)
+      }, {
+        key: 'ArrowLeft',
+        run: this.mayBeEscape('char', -1)
+      }, {
+        key: 'ArrowDown',
+        run: this.mayBeEscape('line', 1)
+      }, {
+        key: 'ArrowRight',
+        run: this.mayBeEscape('char', 1)
+      }, {
+        key: 'Ctrl-Enter',
+        run: () => {
+          if (exitCode(this.view.state, this.view.dispatch)) {
+            this.view.focus();
+            return true;
+          }
+          return false;
+        }
+      }]), cmExtensions]
+    });
+    this.cm.setState(cmState);
+  }
+  forwardSelection() {
+    if (!this.cm.hasFocus) {
+      return;
+    }
+    const {
+      state
+    } = this.view;
+    const selection = this.asProseMirrorSelection(state.doc);
+    if (!selection.eq(state.selection)) {
+      this.view.dispatch(state.tr.setSelection(selection));
+    }
+  }
+  asProseMirrorSelection(doc) {
+    const offset = this.getPos() + 1;
+    const {
+      anchor,
+      head
+    } = this.cm.state.selection.main;
+    return TextSelection.create(doc, anchor + offset, head + offset);
+  }
+  dispatch(cmTr) {
+    this.cm.setState(cmTr.state);
+    if (cmTr.docChanged && !this.updating) {
+      const start = this.getPos() + 1;
+      const cmValue = cmTr.state.doc.toString();
+      const change = computeChange(this.node.textContent, cmValue);
+      if (!change) {
+        return;
+      }
+      const content = change.text ? this.view.state.schema.text(change.text) : null;
+      const tr = this.view.state.tr.replaceWith(change.from + start, change.to + start, content);
+      this.view.dispatch(tr);
+      this.forwardSelection();
+    }
+  }
+  mayBeEscape(unit, dir) {
+    return view => {
+      const {
+        state
+      } = view;
+      const {
+        selection
+      } = state;
+      const offsetToPos = () => {
+        const offset = selection.main.from;
+        const line = state.doc.lineAt(offset);
+        return {
+          line: line.number,
+          ch: offset - line.from
+        };
+      };
+      const pos = offsetToPos();
+      const hasSelection = state.selection.ranges.some(r => !r.empty);
+      const firstLine = 1;
+      const lastLine = state.doc.lineAt(state.doc.length).number;
+      if (hasSelection || pos.line !== (dir < 0 ? firstLine : lastLine) || unit === 'char' && pos.ch !== (dir < 0 ? 0 : state.doc.line(pos.line).length)) {
+        return false;
+      }
+      const targetPos = this.getPos() + (dir < 0 ? 0 : this.node.nodeSize);
+      const pmSelection = Selection.near(this.view.state.doc.resolve(targetPos), dir);
+      this.view.dispatch(this.view.state.tr.setSelection(pmSelection).scrollIntoView());
+      this.view.focus();
+      return true;
+    };
+  }
+  update(node) {
+    if (node.type !== this.node.type) {
+      return false;
+    }
+    this.node = node;
+    const change = computeChange(this.cm.state.doc.toString(), node.textContent);
+    if (change) {
+      this.updating = true;
+      this.cm.dispatch({
+        changes: {
+          from: change.from,
+          to: change.to,
+          insert: change.text
+        }
+      });
+      this.updating = false;
+    }
+    return true;
+  }
+  setSelection(anchor, head) {
+    this.focus();
+    this.updating = true;
+    this.cm.dispatch({
+      selection: {
+        anchor,
+        head
+      }
+    });
+    this.updating = false;
+  }
+  focus() {
+    this.cm.focus();
+    this.forwardSelection();
+  }
+  selectNode() {
+    this.focus();
+  }
+  stopEvent() {
+    return true;
+  }
+  destroy() {
+    this.cm.destroy();
+  }
+}
+
+export { CodeMirrorView as default };

package/dist/bundled/v2/components/OrRichTextEditorV3/utils/codemirror/index.d.ts

@@ -0,0 +1 @@
+export { default as CodeMirrorView } from './codemirrorView';

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

@@ -0,0 +1,5 @@
+export { default as CodeMirrorView } from './codemirrorView.js';
+import '../../../../index-62c3221b.js';
+import '../../../../index-f5487f12.js';
+import '../../../../index.es-3f39f316.js';
+import './theme.js';

package/dist/bundled/v2/components/OrRichTextEditorV3/utils/codemirror/theme.d.ts

@@ -0,0 +1,24 @@
+import { Extension } from '@codemirror/state';
+import { HighlightStyle } from '@codemirror/language';
+export declare const color: {
+    chalky: string;
+    coral: string;
+    cyan: string;
+    invalid: string;
+    ivory: string;
+    stone: string;
+    malibu: string;
+    sage: string;
+    whiskey: string;
+    violet: string;
+    darkBackground: string;
+    highlightBackground: string;
+    background: string;
+    tooltipBackground: string;
+    selection: string;
+    cursor: string;
+};
+export declare const orCodeTheme: Extension;
+export declare const orCodeHighlightStyle: HighlightStyle;
+declare const theme: Extension;
+export default theme;