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

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-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/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-62c3221b.js';
+import '../../../../index-f5487f12.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-f5487f12.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-516daba9.js';
+import '../../../index-62c3221b.js';
+import 'node:punycode';
+import '../../../tiptap-core.esm-f85402b1.js';
+import '../../../index.es-3f39f316.js';

package/dist/bundled/v3/components/index.d.ts

@@ -94,3 +94,4 @@ export * from './or-toast';
 export * from './or-toast-v3';
 export * from './or-tooltip';
 export * from './or-tooltip-v3';
+export * from './or-rich-text-editor-v3';

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

@@ -22,12 +22,12 @@ export { s as OrCheckbox } from '../OrCheckbox.vue_vue_type_script_lang-6ff51af9
 export { s as OrCheckboxV3 } from '../OrCheckbox.vue_vue_type_script_lang-60cefcbd.js';
 export { s as OrChip } from '../OrChip.vue_vue_type_script_lang-ceebbd82.js';
 export { s as OrChips } from '../OrChips.vue_vue_type_script_lang-94b456c7.js';
-export { s as OrCode } from '../OrCode.vue_vue_type_script_lang-c5a9adb7.js';
+export { s as OrCode } from '../OrCode.vue_vue_type_script_lang-f6f74339.js';
 export { OrCodeLanguages } from './OrCode/constants.js';
 export { s as OrCollapse } from '../OrCollapse.vue_vue_type_script_lang-5137ca99.js';
 export { s as OrColorPicker } from '../OrColorPicker.vue_vue_type_script_lang-3a799e23.js';
 export { amber, black, blue, blueGrey, brown, cyan, deepOrange, deepPurple, green, indigo, lightBlue, lightGreen, lime, orange, pink, purple, red, teal, white, yellow } from './OrColorPicker/constants.js';
-export { s as OrConfirm } from '../OrConfirm.vue_vue_type_script_lang-806d209b.js';
+export { s as OrConfirm } from '../OrConfirm.vue_vue_type_script_lang-36318ca2.js';
 export { s as OrConfirmV3 } from '../OrConfirm.vue_vue_type_script_lang-d069c95f.js';
 export { ConfirmType } from './OrConfirmV3/props.js';
 export { s as OrDateTimePicker } from '../OrDateTimePicker.vue_vue_type_script_lang-5c1a5d4a.js';
@@ -77,7 +77,7 @@ export { LoaderColor, LoaderSize, LoaderVariant } from './OrLoaderV3/props.js';
 export { s as OrMenuItemV3 } from '../OrMenuItem.vue_vue_type_script_lang-b338d68a.js';
 export { s as OrMenuV3 } from '../OrMenu.vue_vue_type_script_lang-4772731e.js';
 export { PopoverPlacement as MenuPlacement, PopoverPlacement, PopoverVariant, PopoverPlacement as TooltipPlacement } from './OrPopoverV3/props.js';
-export { s as OrModal } from '../OrModal.vue_vue_type_script_lang-d5fb0b11.js';
+export { s as OrModal } from '../OrModal.vue_vue_type_script_lang-af0c4288.js';
 export { OrModalSizes } from './OrModal/constants.js';
 export { s as OrModalV3 } from '../OrModal.vue_vue_type_script_lang-265f39e0.js';
 export { ModalSize } from './OrModalV3/props.js';
@@ -151,6 +151,7 @@ export { default as useQueueV3 } from './OrToastV3/composable/useQueue.js';
 export { s as OrTooltip } from '../OrTooltip.vue_vue_type_script_lang-b8594f7e.js';
 export { s as OrTooltipContent } from '../OrTooltipContent.vue_vue_type_script_lang-969c20ed.js';
 export { s as OrTooltipV3 } from '../OrTooltip.vue_vue_type_script_lang-b35199da.js';
+export { s as OrRichTextEditorV3 } from '../OrRichTextEditor.vue_vue_type_script_lang-2bb9d87f.js';
 import 'vue-demi';
 import 'lodash';
 import './OrIcon/OrIcon.js';
@@ -222,10 +223,14 @@ import './OrCarousel/constants.js';
 import './OrCheckboxV3/styles.js';
 import './OrChip/OrChip.js';
 import './OrChips/constants.js';
-import '../index-6976c52a.js';
-import '../lang-02d2bb2d.js';
+import '../index-f5487f12.js';
+import '../index.es-3f39f316.js';
+import '../index-16aee5bc.js';
+import '../index-70ca38c5.js';
+import './OrCode/lang.js';
 import './OrCode/theme.js';
 import './OrModal/OrModal.js';
+import '../useFocusTrap-9567b3c8.js';
 import './OrOverlay/OrOverlay.js';
 import './OrColorPicker/utils/defultPalette.js';
 import '../index-63e094a0.js';
@@ -275,3 +280,12 @@ import './OrToast/Timer.js';
 import './OrToastV3/styles.js';
 import './OrToastV3/composable/useToastEventBus.js';
 import './OrToastV3/Timer.js';
+import '../markdown-516daba9.js';
+import '../index-62c3221b.js';
+import 'node:punycode';
+import '../tiptap-core.esm-f85402b1.js';
+import './OrRichTextEditorV3/styles.js';
+import './OrRichTextEditorV3/utils/codemirror/codemirrorNode.js';
+import './OrRichTextEditorV3/utils/codemirror/codemirrorView.js';
+import './OrRichTextEditorV3/utils/codemirror/theme.js';
+import './OrModalV3/OrModal.js';