@onereach/ui-components 4.10.0 → 4.11.0-beta.2916.0

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

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

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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,53 @@
+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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,254 @@
+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

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

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

@@ -0,0 +1,238 @@
+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?.colors?.amber?.[600],
+  coral = themes?.colors?.red?.[600],
+  cyan = themes?.colors?.cyan?.[600],
+  invalid = themes?.colors?.white,
+  ivory = 'var(--c-neutral-6)',
+  stone = themes?.colors?.neutral?.[500], // Brightened compared to original to increase contrast
+  malibu = themes?.colors?.sky?.[600],
+  sage = themes?.textColor?.success,
+  whiskey = themes?.colors?.amber?.[700],
+  violet = themes?.colors?.violet?.[400],
+  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

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