@onereach/ui-components 4.7.0 → 4.8.0-beta.2837.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,4 @@
+export enum Formats {
+  Markdown = 'markdown',
+  Markup = 'markup',
+}

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 } 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,
+        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.ts

@@ -0,0 +1,213 @@
+import { EditorView } from '@codemirror/view';
+import { Extension } from '@codemirror/state';
+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
+
+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.
+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: 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.
+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: Extension = [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;
+}

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

@@ -0,0 +1,120 @@
+import {
+  MarkdownSerializer as ProseMirrorMarkdownSerializer,
+  defaultMarkdownSerializer,
+} from 'prosemirror-markdown';
+import { DOMParser as ProseMirrorDOMParser, Node, Mark } from 'prosemirror-model';
+import { marked } from 'marked';
+
+import Paragraph from '@tiptap/extension-paragraph';
+import BulletList from '@tiptap/extension-bullet-list';
+import ListItem from '@tiptap/extension-list-item';
+import OrderedList from '@tiptap/extension-ordered-list';
+import Strike from '@tiptap/extension-strike';
+import Italic from '@tiptap/extension-italic';
+import HardBreak from '@tiptap/extension-hard-break';
+import Bold from '@tiptap/extension-bold';
+import CodeBlock from '@tiptap/extension-code-block';
+import Blockquote from '@tiptap/extension-blockquote';
+import Link from '@tiptap/extension-link';
+import Highlight from '@tiptap/extension-highlight';
+import Underline from '@tiptap/extension-underline';
+
+const serializerNodes = {
+  ...defaultMarkdownSerializer.nodes,
+  [Paragraph.name]: defaultMarkdownSerializer.nodes.paragraph,
+  [BulletList.name]: defaultMarkdownSerializer.nodes.bullet_list,
+  [ListItem.name]: defaultMarkdownSerializer.nodes.list_item,
+  [OrderedList.name]: defaultMarkdownSerializer.nodes.ordered_list,
+  [HardBreak.name]: defaultMarkdownSerializer.nodes.hard_break,
+  [CodeBlock.name]: defaultMarkdownSerializer.nodes.code_block,
+  [Blockquote.name]: defaultMarkdownSerializer.nodes.blockquote,
+};
+
+const serializerMarks = {
+  ...defaultMarkdownSerializer.marks,
+  [Bold.name]: defaultMarkdownSerializer.marks.strong,
+  [Strike.name]: {
+    open: '~~',
+    close: '~~',
+    mixable: true,
+    expelEnclosingWhitespace: true,
+  },
+  [Italic.name]: {
+    open: ' _',
+    close: '_ ',
+    mixable: true,
+    expelEnclosingWhitespace: true,
+  },
+  [Highlight.name]: {
+    open: '==',
+    close: '==',
+    mixable: true,
+    expelEnclosingWhitespace: true,
+  },
+  [Underline.name]: {
+    open: '',
+    close: '',
+    mixable: true,
+    expelEnclosingWhitespace: true,
+  },
+  [Link.name]: {
+    open(state: any, mark: Mark, parent: Node, index: number) {
+      return isPlainURL(mark, parent, index, 1) ? '<' : '[';
+    },
+    close(state: any, mark: Mark, parent: Node, index: number) {
+      const href = mark.attrs.canonicalSrc || mark.attrs.href;
+
+      return isPlainURL(mark, parent, index, -1)
+        ? '>'
+        : `](${state.esc(href)}${
+          mark.attrs.title ? ` ${state.quote(mark.attrs.title)}` : ''
+        })`;
+    },
+  },
+};
+
+const isPlainURL = (link: Mark, parent: Node, index: number, side: number) => {
+  if (link.attrs.title || !/^\w+:/.test(link.attrs.href)) return false;
+  const content = parent.child(index + (side < 0 ? -1 : 0));
+  if (
+    !content.isText ||
+  content.text !== link.attrs.href ||
+  content.marks[content.marks.length - 1] !== link
+  )
+    return false;
+  if (index === (side < 0 ? 1 : parent.childCount - 1)) return true;
+  const next = parent.child(index + (side < 0 ? -2 : 1));
+  return !link.isInSet(next.marks);
+};
+
+const serialize = (schema: any, content: any) => {
+  const proseMirrorDocument = schema.nodeFromJSON(content);
+  const serializer = new ProseMirrorMarkdownSerializer(
+    serializerNodes,
+    serializerMarks,
+  );
+
+  return serializer.serialize(proseMirrorDocument, { tightLists: true });
+};
+
+const deserialize = (schema: any, content: any) => {
+  if (!content) return null;
+
+  const html = marked(content, {
+    gfm: true,
+    breaks: true,
+  });
+
+  if (!html) return null;
+
+  const parser = new DOMParser();
+  const { body } = parser.parseFromString(html, 'text/html');
+
+  // append original source as a comment that nodes can access
+  body.append(document.createComment(content));
+
+  const state = ProseMirrorDOMParser.fromSchema(schema).parse(body);
+  return state.toJSON();
+};
+
+export { serialize, deserialize };