@onereach/ui-components 6.2.0-beta.3289.0 → 6.2.0-beta.3294.0

package/src/components/or-rich-text-editor-v3/index.ts

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

package/src/components/or-rich-text-editor-v3/props.ts

@@ -1,6 +0,0 @@
-export enum Formats {
-  Markdown = 'markdown',
-  Markup = 'markup',
-}
-
-export type Tools = string[][]; // TODO: Improve this type

package/src/components/or-rich-text-editor-v3/styles.ts

@@ -1,53 +0,0 @@
-export const EditorContainer: string[] = [
-  // Colors
-  'border-outline',
-  'focus-within:theme-background-primary-translucent',
-  'focus-within:theme-border-1-primary',
-  'focus-within:theme-outline-2-primary',
-  // Sizing
-  'border-1',
-  'rounded-md',
-  'w-full',
-];
-
-export const ToolbarContainer: string[] = [
-  // Layout
-  'flex',
-  //Spacing
-  'py-sm',
-  //Sizing
-  'border-b-1',
-  //Colors
-  'border-b-outline',
-];
-
-export const Toolbar: string[] = [
-  // Layout
-  'flex',
-  // Spacing
-  'px-sm',
-  'gap-md',
-  // Sizing
-  'border-l-1',
-  //Colors
-  'border-r-disabled',
-  // Last child
-  'first-of-type:border-none',
-];
-
-export const ToolbarButton: string[] = [
-  // Typography
-  'text-on-disabled',
-];
-
-export const ToolbarButtonFocused: string[] = [
-  // Typography
-  'text-outline',
-];
-
-export const EditorInput: string[] = [
-  // Typography
-  'typography-body-2-regular',
-  // Sizing
-  'min-h-[88px]',
-];

package/src/components/or-rich-text-editor-v3/utils/codemirror/codemirrorNode.ts

@@ -1,40 +0,0 @@
-import { Node } from '@tiptap/core';
-import CodeBlockView from './codemirrorView';
-import { minimalSetup } from 'codemirror';
-import { javascript } from '@codemirror/lang-javascript';
-
-export default 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 CodeBlockView({
-        node,
-        view: editor.view,
-        getPos: getPos as () => number,
-        cmOptions: {
-          extensions: [minimalSetup, javascript()],
-        },
-      });
-    };
-  },
-});

package/src/components/or-rich-text-editor-v3/utils/codemirror/codemirrorView.ts

@@ -1,254 +0,0 @@
-import { Selection, TextSelection } from 'prosemirror-state';
-import { EditorView, NodeView } from 'prosemirror-view';
-import { Node as ProsemirrorNode } from 'prosemirror-model';
-import { exitCode } from 'prosemirror-commands';
-import { EditorState as CMState, Transaction as CMTransaction, Extension } from '@codemirror/state';
-import {
-  Command,
-  EditorView as CMView,
-  keymap,
-  highlightActiveLine,
-  highlightActiveLineGutter,
-  lineNumbers,
-} from '@codemirror/view';
-import orCodeTheme from './theme';
-
-import { ComputeChange, CodeMirrorViewOptions } from './types';
-
-const computeChange = (oldVal: string, newVal: string): ComputeChange | null => {
-  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 implements NodeView {
-  name: string;
-
-  node: ProsemirrorNode;
-
-  view: EditorView;
-
-  dom: HTMLElement;
-
-  cm: CMView;
-
-  getPos: () => number;
-
-  updating = false;
-
-  constructor(options: CodeMirrorViewOptions) {
-    // Store for later
-    this.node = options.node;
-    this.view = options.view;
-    const cmExtensions = options.cmOptions?.extensions || [];
-    this.name = 'codeBlock',
-
-    this.getPos = options.getPos as () => number;
-
-    const changeFilter = CMState.changeFilter.of((tr) => {
-      if (!tr.docChanged && !this.updating) {
-        this.forwardSelection();
-      }
-      return true;
-    });
-
-    // Create a CodeMirror instancew
-    this.cm = new CMView({
-      dispatch: this.dispatch.bind(this),
-    });
-
-    // The editor's outer node is our DOM representation
-    this.dom = this.cm.dom;
-
-    const cmState = CMState.create({
-      doc: this.node.textContent,
-      extensions: [
-        orCodeTheme as Extension,
-        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: ProsemirrorNode) {
-    const offset = this.getPos() + 1;
-    const { anchor, head } = this.cm.state.selection.main;
-    return TextSelection.create(doc, anchor + offset, head + offset);
-  }
-
-  dispatch(cmTr: CMTransaction) {
-    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 as ProsemirrorNode);
-      this.view.dispatch(tr);
-      this.forwardSelection();
-    }
-  }
-
-  mayBeEscape(unit: 'char' | 'line', dir: -1 | 1): Command {
-    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: ProsemirrorNode) {
-    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: number, head: number): void {
-    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 default CodeMirrorView;

package/src/components/or-rich-text-editor-v3/utils/codemirror/index.ts

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

package/src/components/or-rich-text-editor-v3/utils/codemirror/theme.ts

@@ -1,238 +0,0 @@
-import { EditorView } from '@codemirror/view';
-import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
-import { tags as t } from '@lezer/highlight';
-
-// Using https://github.com/one-dark/vscode-one-dark-theme/ as reference for the colors
-
-import { useTheme } from '../../../../hooks/useTheme';
-
-const themes = useTheme();
-
-const chalky = themes?.backgroundColor['custom-colors-custom-6'],
-  coral = themes?.backgroundColor['custom-colors-custom-1'],
-  cyan = themes?.backgroundColor['custom-colors-custom-3'],
-  invalid = themes?.backgroundColor?.white,
-  ivory = themes?.backgroundColor['custom-colors-custom-6'],
-  stone = themes?.backgroundColor['custom-colors-custom-5'], // Brightened compared to original to increase contrast
-  malibu = themes?.backgroundColor['custom-colors-custom-3'],
-  sage = themes?.backgroundColor.success,
-  whiskey = themes?.backgroundColor.warning,
-  violet = themes?.backgroundColor['custom-colors-custom-1'];
-  // darkBackground = themes?.colors?.neutral?.[100],
-  // highlightBackground = themes?.colors?.neutral?.[200],
-  // background = themes?.colors?.neutral?.[100],
-  // tooltipBackground = themes?.colors?.neutral?.[200],
-  // selection = themes?.colors?.blue?.[100],
-  // cursor = themes?.colors?.blue?.[700];
-
-/// The colors used in the theme, as CSS color strings.
-export 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.
-export const orCodeTheme = EditorView.theme({
-  '&': {
-    color: ivory,
-    backgroundColor: themes?.backgroundColor?.['bg-primary-container'],
-  },
-
-  '.cm-editor': {
-    border: 'none',
-    borderRadius: themes?.spacing?.xs,
-  },
-
-  '&.cm-focused': {
-    outline: 'none',
-  },
-
-  '.cm-scroller': {
-    borderRadius: themes?.spacing?.xs,
-  },
-
-  '.cm-content': {
-    // caretColor: cursor,
-  },
-
-  '.cm-button': {
-    // background: highlightBackground,
-    // color: themes?.colors?.neutral?.[600],
-    border: 0,
-    borderRadius: themes?.spacing?.xs,
-  },
-
-  '.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 ${themes?.colors?.neutral?.[200]}` },
-  // '.cm-panels.cm-panels-bottom': { borderTop: `2px solid ${themes?.colors?.neutral?.[200]}` },
-
-  '.cm-searchMatch': {
-    // backgroundColor: themes?.colors?.neutral?.[100],
-    // outline: `1px solid ${themes?.colors?.neutral?.[200]}`,
-  },
-
-  '.cm-searchMatch.cm-searchMatch-selected': {
-    // backgroundColor: themes?.colors?.sky?.[100],
-  },
-
-  '.cm-activeLine': {
-    backgroundColor: themes?.backgroundColor?.['bg-secondary-container'],
-  },
-
-  // '.cm-selectionMatch': { backgroundColor: themes?.colors?.lime?.[500] },
-
-  '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
-    // backgroundColor: themes?.colors?.lime?.[600],
-  },
-
-  '.cm-gutters': {
-    backgroundColor: themes?.backgroundColor?.['primary-opacity-0-12'],
-    color: stone,
-    border: 'none',
-  },
-
-  '.cm-lineNumbers .cm-gutterElement': {
-    paddingLeft: themes?.spacing?.['sm+*'],
-    paddingRight: themes?.spacing?.['sm+*'],
-  },
-
-  '.cm-activeLineGutter': {
-    backgroundColor: themes?.backgroundColor?.['primary-opacity-0-16'],
-  },
-
-  '.cm-foldPlaceholder': {
-    backgroundColor: 'transparent',
-    border: 'none',
-    // color: themes?.colors?.neutral?.[200],
-  },
-
-  '.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: themes?.colors?.neutral?.[600],
-    // backgroundColor: themes?.colors?.neutral?.[100],
-    // border: `1px solid ${themes?.colors?.neutral?.[200]}`,
-    borderRadius: themes?.spacing?.xs,
-  },
-}, { dark: true });
-
-/// The highlighting style for code in the One Dark theme.
-export const orCodeHighlightStyle = HighlightStyle.define([
-  {
-    tag: t.keyword,
-    color: violet,
-  },
-  {
-    tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
-    color: coral,
-  },
-  {
-    tag: [t.function(t.variableName), t.labelName],
-    color: malibu,
-  },
-  {
-    tag: [t.color, t.constant(t.name), t.standard(t.name)],
-    color: whiskey,
-  },
-  {
-    tag: [t.definition(t.name), t.separator],
-    color: ivory,
-  },
-  {
-    tag: [t.typeName, t.className, t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
-    color: chalky,
-  },
-  {
-    tag: [t.operator, t.operatorKeyword, t.url, t.escape, t.regexp, t.link, t.special(t.string)],
-    color: cyan,
-  },
-  {
-    tag: [t.meta, t.comment],
-    color: stone,
-  },
-  {
-    tag: t.strong,
-    fontWeight: 'bold',
-  },
-  {
-    tag: t.emphasis,
-    fontStyle: 'italic',
-  },
-  {
-    tag: t.strikethrough,
-    textDecoration: 'line-through',
-  },
-  {
-    tag: t.link,
-    color: stone,
-    textDecoration: 'underline',
-  },
-  {
-    tag: t.heading,
-    fontWeight: 'bold',
-    color: coral,
-  },
-  {
-    tag: [t.atom, t.bool, t.special(t.variableName)],
-    color: whiskey,
-  },
-  {
-    tag: [t.processingInstruction, t.string, t.inserted],
-    color: sage,
-  },
-  {
-    tag: t.invalid,
-    color: invalid,
-  },
-]);
-
-/// Extension to enable the One Dark theme (both the editor theme and
-/// the highlight style).
-const theme = [orCodeTheme, syntaxHighlighting(orCodeHighlightStyle)];
-
-export default theme;

package/src/components/or-rich-text-editor-v3/utils/codemirror/types.ts

@@ -1,22 +0,0 @@
-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;
-}