@onereach/ui-components 4.5.1 → 4.6.0-beta.2748.0

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

@@ -0,0 +1,46 @@
+import { N as Node } from '../../../../index-418d5c0d.js';
+import CodeMirrorView from './codemirrorView.js';
+import { m as minimalSetup } from '../../../../index-d92d0b48.js';
+import { e as javascript } from '../../../../index-e9f6b2d8.js';
+import '../../../../index-85c2efe8.js';
+import '../../../../index.es-3f39f316.js';
+import '../../../../index-0d224ae5.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 _ref => {
+      let {
+        node,
+        editor,
+        getPos
+      } = _ref;
+      return new CodeMirrorView({
+        node,
+        view: editor.view,
+        getPos: getPos,
+        cmOptions: {
+          extensions: [minimalSetup, javascript()]
+        }
+      });
+    };
+  }
+});
+
+export { codemirrorNode as default };

package/dist/bundled/v3/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/v3/components/OrRichTextEditorV3/utils/codemirror/codemirrorView.js

@@ -0,0 +1,184 @@
+import { n as exitCode, T as TextSelection, S as Selection } from '../../../../index-85c2efe8.js';
+import { a as EditorState, E as EditorView, Y as highlightActiveLine, B as highlightActiveLineGutter, z as lineNumbers, k as keymap } from '../../../../index-0d224ae5.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/v3/components/OrRichTextEditorV3/utils/codemirror/index.d.ts

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

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

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

package/dist/bundled/v3/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;

package/dist/bundled/v3/components/OrRichTextEditorV3/utils/codemirror/theme.js

@@ -0,0 +1,190 @@
+import { E as EditorView, ah as HighlightStyle, $ as tags, M as syntaxHighlighting } from '../../../../index-0d224ae5.js';
+import '../../../../index.es-3f39f316.js';
+
+// Using https://github.com/one-dark/vscode-one-dark-theme/ as reference for the colors
+const chalky = 'var(--c-warning-darken-20)',
+  coral = 'var(--c-error)',
+  cyan = '#56b6c2',
+  invalid = 'var(--c-white)',
+  ivory = 'var(--c-neutral-6)',
+  stone = 'var(--c-neutral-5)',
+  // Brightened compared to original to increase contrast
+  malibu = '#61afef',
+  sage = 'var(--c-success)',
+  whiskey = 'var(--c-warning-darken-5)',
+  violet = '#c678dd',
+  darkBackground = 'var(--c-neutral-1)',
+  highlightBackground = 'var(--c-neutral-2)',
+  background = 'var(--c-neutral-1)',
+  tooltipBackground = 'var(--c-neutral-2)',
+  selection = 'var(--c-neutral-3)',
+  cursor = 'var(--c-primary)';
+/// The colors used in the theme, as CSS color strings.
+const color = {
+  chalky,
+  coral,
+  cyan,
+  invalid,
+  ivory,
+  stone,
+  malibu,
+  sage,
+  whiskey,
+  violet,
+  darkBackground,
+  highlightBackground,
+  background,
+  tooltipBackground,
+  selection,
+  cursor
+};
+/// The editor theme styles for One Dark.
+const orCodeTheme = EditorView.theme({
+  '&': {
+    color: ivory,
+    backgroundColor: background
+  },
+  '.cm-content': {
+    caretColor: cursor
+  },
+  '.cm-button': {
+    background: highlightBackground,
+    color: 'var(--c-neutral-6)',
+    border: 0,
+    borderRadius: 'var(--s-2)'
+  },
+  '.cm-panel.cm-search input[type=checkbox]': {
+    display: 'inline-block',
+    verticalAlign: 'middle'
+  },
+  '.cm-cursor, .cm-dropCursor': {
+    borderLeftColor: cursor
+  },
+  '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
+    backgroundColor: selection
+  },
+  '.cm-panels': {
+    backgroundColor: darkBackground,
+    color: ivory
+  },
+  '.cm-panels.cm-panels-top': {
+    borderBottom: '2px solid var(--c-neutral-2)'
+  },
+  '.cm-panels.cm-panels-bottom': {
+    borderTop: '2px solid var(--c-neutral-2)'
+  },
+  '.cm-searchMatch': {
+    backgroundColor: 'var(--c-neutral-1)',
+    outline: '1px solid var(--c-neutral-2)'
+  },
+  '.cm-searchMatch.cm-searchMatch-selected': {
+    backgroundColor: '#6199ff2f'
+  },
+  '.cm-activeLine': {
+    backgroundColor: '#6699ff0b'
+  },
+  '.cm-selectionMatch': {
+    backgroundColor: '#aafe661a'
+  },
+  '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
+    backgroundColor: '#bad0f847'
+  },
+  '.cm-gutters': {
+    backgroundColor: background,
+    color: stone,
+    border: 'none'
+  },
+  '.cm-activeLineGutter': {
+    backgroundColor: highlightBackground
+  },
+  '.cm-foldPlaceholder': {
+    backgroundColor: 'transparent',
+    border: 'none',
+    color: '#ddd'
+  },
+  '.cm-tooltip': {
+    border: 'none',
+    backgroundColor: tooltipBackground
+  },
+  '.cm-tooltip .cm-tooltip-arrow:before': {
+    borderTopColor: 'transparent',
+    borderBottomColor: 'transparent'
+  },
+  '.cm-tooltip .cm-tooltip-arrow:after': {
+    borderTopColor: tooltipBackground,
+    borderBottomColor: tooltipBackground
+  },
+  '.cm-tooltip-autocomplete': {
+    '& > ul > li[aria-selected]': {
+      backgroundColor: highlightBackground,
+      color: ivory
+    }
+  },
+  '.cm-textfield': {
+    outline: 'none',
+    background: background,
+    color: 'var(--c-neutral-6)',
+    backgroundColor: 'var(--c-neutral-1)',
+    border: '1px solid var(--c-neutral-2)',
+    borderRadius: 'var(--s-2)'
+  }
+}, {
+  dark: true
+});
+/// The highlighting style for code in the One Dark theme.
+const orCodeHighlightStyle = HighlightStyle.define([{
+  tag: tags.keyword,
+  color: violet
+}, {
+  tag: [tags.name, tags.deleted, tags.character, tags.propertyName, tags.macroName],
+  color: coral
+}, {
+  tag: [tags.function(tags.variableName), tags.labelName],
+  color: malibu
+}, {
+  tag: [tags.color, tags.constant(tags.name), tags.standard(tags.name)],
+  color: whiskey
+}, {
+  tag: [tags.definition(tags.name), tags.separator],
+  color: ivory
+}, {
+  tag: [tags.typeName, tags.className, tags.number, tags.changed, tags.annotation, tags.modifier, tags.self, tags.namespace],
+  color: chalky
+}, {
+  tag: [tags.operator, tags.operatorKeyword, tags.url, tags.escape, tags.regexp, tags.link, tags.special(tags.string)],
+  color: cyan
+}, {
+  tag: [tags.meta, tags.comment],
+  color: stone
+}, {
+  tag: tags.strong,
+  fontWeight: 'bold'
+}, {
+  tag: tags.emphasis,
+  fontStyle: 'italic'
+}, {
+  tag: tags.strikethrough,
+  textDecoration: 'line-through'
+}, {
+  tag: tags.link,
+  color: stone,
+  textDecoration: 'underline'
+}, {
+  tag: tags.heading,
+  fontWeight: 'bold',
+  color: coral
+}, {
+  tag: [tags.atom, tags.bool, tags.special(tags.variableName)],
+  color: whiskey
+}, {
+  tag: [tags.processingInstruction, tags.string, tags.inserted],
+  color: sage
+}, {
+  tag: tags.invalid,
+  color: invalid
+}]);
+/// Extension to enable the One Dark theme (both the editor theme and
+/// the highlight style).
+const theme = [orCodeTheme, syntaxHighlighting(orCodeHighlightStyle)];
+
+export { color, theme as default, orCodeHighlightStyle, orCodeTheme };

package/dist/bundled/v3/components/OrRichTextEditorV3/utils/codemirror/types.d.ts

@@ -0,0 +1,19 @@
+import type { EditorView } from 'prosemirror-view';
+import type { Node as ProsemirrorNode } from 'prosemirror-model';
+import type { Extension } from '@codemirror/state';
+export interface ComputeChange {
+    from: number;
+    to: number;
+    text: string;
+}
+interface CMOptions {
+    extensions: Extension;
+}
+export type GetPos = () => number | undefined;
+export interface CodeMirrorViewOptions {
+    node: ProsemirrorNode;
+    view: EditorView;
+    getPos: GetPos;
+    cmOptions?: CMOptions;
+}
+export {};

package/dist/bundled/v3/components/OrRichTextEditorV3/utils/codemirror/types.js

@@ -0,0 +1 @@
+

package/dist/bundled/v3/components/OrRichTextEditorV3/utils/markdown.d.ts

@@ -0,0 +1,3 @@
+declare const serialize: (schema: any, content: any) => string;
+declare const deserialize: (schema: any, content: any) => any;
+export { serialize, deserialize };

package/dist/bundled/v3/components/OrRichTextEditorV3/utils/markdown.js

@@ -0,0 +1,5 @@
+export { d as deserialize, s as serialize } from '../../../markdown-7c7c4ca6.js';
+import '../../../index-85c2efe8.js';
+import 'node:punycode';
+import '../../../index-418d5c0d.js';
+import '../../../index.es-3f39f316.js';

package/dist/bundled/v3/components/OrSearch/OrSearch.vue.d.ts

@@ -1,5 +1,19 @@
 import { BUTTON_SIZE } from '../or-button-v2';
-declare const _default: import("vue-demi").DefineComponent<{
+declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
+    inputRef: 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>;
+    localValue: import("@vue/composition-api").Ref<string>;
+}> & import("@vue/composition-api").Data, {
+    onClick(): void;
+    onModelValueUpdate(value: string): void;
+}, {
+    hasValue(): boolean;
+    currentButtonIcon(): string;
+    size(): BUTTON_SIZE;
+}, {
     modelValue: {
         type: StringConstructor;
         default: string;
@@ -50,17 +64,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     isDisabled: BooleanConstructor;
     isReadonly: BooleanConstructor;
     isInvalid: BooleanConstructor;
-}, {
-    inputRef: import("vue-demi").Ref<any>;
-    localValue: import("vue-demi").Ref<string>;
-}, unknown, {
-    hasValue(): boolean;
-    currentButtonIcon(): string;
-    size(): BUTTON_SIZE;
-}, {
-    onClick(): void;
-    onModelValueUpdate(value: string): void;
-}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("search" | "update:modelValue" | "focus" | "blur" | "input" | "clear" | "keypress" | "keyup" | "keydown")[], "search" | "update:modelValue" | "focus" | "blur" | "input" | "clear" | "keypress" | "keyup" | "keydown", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+}, import("@vue/composition-api").ExtractPropTypes<{
     modelValue: {
         type: StringConstructor;
         default: string;
@@ -111,18 +115,44 @@ declare const _default: import("vue-demi").DefineComponent<{
     isDisabled: BooleanConstructor;
     isReadonly: BooleanConstructor;
     isInvalid: BooleanConstructor;
-}>> & {
-    onSearch?: ((...args: any[]) => any) | undefined;
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    onFocus?: ((...args: any[]) => any) | undefined;
-    onBlur?: ((...args: any[]) => any) | undefined;
-    onInput?: ((...args: any[]) => any) | undefined;
-    onClear?: ((...args: any[]) => any) | undefined;
-    onKeypress?: ((...args: any[]) => any) | undefined;
-    onKeyup?: ((...args: any[]) => any) | undefined;
-    onKeydown?: ((...args: any[]) => any) | undefined;
+}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
+    modelValue: string;
+    isSmall: boolean;
+    isRequired: boolean;
+    isDisabled: boolean;
+    isReadonly: boolean;
+    isInvalid: boolean;
+    htmlId: string;
+    placeholder: string;
+    label: string;
+    error: string;
+    hint: string;
+    debounce: number;
+    isUsingTrim: boolean;
+    maxLength: number;
+} & {} & {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, import("@vue/composition-api").ShallowUnwrapRef<{
+    inputRef: 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>;
+    localValue: import("@vue/composition-api").Ref<string>;
+}>, import("@vue/composition-api").Data, {
+    hasValue(): boolean;
+    currentButtonIcon(): string;
+    size(): BUTTON_SIZE;
 }, {
+    onClick(): void;
+    onModelValueUpdate(value: string): void;
+}, {}, {}, string[], {
     modelValue: string;
+    isSmall: boolean;
+    isRequired: boolean;
+    isDisabled: boolean;
+    isReadonly: boolean;
+    isInvalid: boolean;
     htmlId: string;
     placeholder: string;
     label: string;
@@ -131,10 +161,22 @@ declare const _default: import("vue-demi").DefineComponent<{
     debounce: number;
     isUsingTrim: boolean;
     maxLength: number;
+} & {} & {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, {
+    modelValue: string;
     isSmall: boolean;
     isRequired: boolean;
     isDisabled: boolean;
     isReadonly: boolean;
     isInvalid: boolean;
-}>;
+    htmlId: string;
+    placeholder: string;
+    label: string;
+    error: string;
+    hint: string;
+    debounce: number;
+    isUsingTrim: boolean;
+    maxLength: number;
+}, true>);
 export default _default;