@dxos/react-ui-editor 0.4.4 → 0.4.5-main.17763ce

package/src/extensions/markdown/code.ts

@@ -1,162 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { syntaxTree } from '@codemirror/language';
-import { RangeSetBuilder } from '@codemirror/state';
-import {
-  ViewPlugin,
-  type DecorationSet,
-  EditorView,
-  type ViewUpdate,
-  Decoration,
-  type BlockInfo,
-  WidgetType,
-} from '@codemirror/view';
-
-import { mx } from '@dxos/react-ui-theme';
-
-import { getToken } from '../../styles';
-
-// TODO(burdon): Reconcile with theme.
-const styles = EditorView.baseTheme({
-  '& .cm-code': {
-    fontFamily: getToken('fontFamily.mono', []).join(','),
-  },
-  '& .cm-codeblock-line': {
-    paddingInline: '1rem !important',
-  },
-
-  '& .cm-codeblock-end': {
-    display: 'inline-block',
-    width: '100%',
-    position: 'relative',
-    '&::after': {
-      position: 'absolute',
-      inset: 0,
-      content: '""',
-    },
-  },
-  '& .cm-codeblock-first': {
-    '&::after': {
-      borderTopLeftRadius: '.5rem',
-      borderTopRightRadius: '.5rem',
-    },
-  },
-  '& .cm-codeblock-last': {
-    '&::after': {
-      borderBottomLeftRadius: '.5rem',
-      borderBottomRightRadius: '.5rem',
-    },
-  },
-
-  '&light .cm-codeblock-line, &light .cm-activeLine.cm-codeblock-line': {
-    background: getToken('extend.semanticColors.input.light'),
-    mixBlendMode: 'darken',
-  },
-  '&dark .cm-codeblock-line, &dark .cm-activeLine.cm-codeblock-line': {
-    background: getToken('extend.semanticColors.input.dark'),
-    mixBlendMode: 'lighten',
-  },
-  '&light .cm-codeblock-first, &light .cm-codeblock-last': {
-    mixBlendMode: 'darken',
-    '&::after': {
-      background: getToken('extend.semanticColors.input.light'),
-    },
-  },
-  '&dark .cm-codeblock-first, &dark .cm-codeblock-last': {
-    mixBlendMode: 'lighten',
-    '&::after': {
-      background: getToken('extend.semanticColors.input.dark'),
-    },
-  },
-});
-
-// TODO(burdon): Start from EditorView.lineBlockAt(pos).
-const getLineRange = (lines: BlockInfo[], from: number, to: number) => {
-  const start = lines.findIndex((line) => line.from >= from);
-  const end = lines.findIndex((line) => line.to >= to);
-  return [start, end];
-};
-
-/**
- * Widget for first/last line of code block (read-only).
- */
-// TODO(burdon): Add copy-to-clipboard button.
-class LineWidget extends WidgetType {
-  constructor(private readonly _className: string) {
-    super();
-  }
-
-  override toDOM() {
-    const el = document.createElement('span');
-    el.innerHTML = ' ';
-    el.className = mx('cm-code cm-codeblock', this._className);
-    return el;
-  }
-}
-
-const top = new LineWidget('cm-codeblock-end cm-codeblock-first');
-const bottom = new LineWidget('cm-codeblock-end cm-codeblock-last');
-
-const buildDecorations = (view: EditorView): DecorationSet => {
-  const builder = new RangeSetBuilder<Decoration>();
-  const { state } = view;
-  const blocks = view.viewportLineBlocks;
-  const cursor = state.selection.main.head;
-
-  for (const { from, to } of view.visibleRanges) {
-    syntaxTree(state).iterate({
-      enter: (node) => {
-        if (node.name === 'FencedCode') {
-          // FencedCode > CodeMark > [CodeInfo] > CodeText > CodeMark
-          const editing = !view.state.readOnly && cursor >= node.from && cursor <= node.to;
-          const range = getLineRange(blocks, node.from, node.to);
-          for (let i = range[0]; i <= range[1]; i++) {
-            const block = blocks[i];
-            if (!editing && (i === range[0] || i === range[1])) {
-              builder.add(block.from, block.to, Decoration.replace({ widget: i === range[0] ? top : bottom }));
-            } else {
-              builder.add(
-                block.from,
-                block.from,
-                Decoration.line({
-                  class: mx(
-                    'cm-code cm-codeblock-line',
-                    i === range[0] && 'cm-codeblock-first',
-                    i === range[1] && 'cm-codeblock-last',
-                  ),
-                }),
-              );
-            }
-          }
-        }
-      },
-      from,
-      to,
-    });
-  }
-
-  return builder.finish();
-};
-
-export const code = () => {
-  return [
-    ViewPlugin.fromClass(
-      class {
-        decorations: DecorationSet;
-        constructor(view: EditorView) {
-          this.decorations = buildDecorations(view);
-        }
-
-        update(update: ViewUpdate) {
-          this.decorations = buildDecorations(update.view);
-        }
-      },
-      {
-        decorations: (value) => value.decorations,
-      },
-    ),
-    styles,
-  ];
-};

package/src/extensions/markdown/heading.ts

@@ -1,59 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { syntaxTree } from '@codemirror/language';
-import { RangeSetBuilder } from '@codemirror/state';
-import { Decoration, type DecorationSet, type EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
-
-const buildDecorations = (view: EditorView): DecorationSet => {
-  const builder = new RangeSetBuilder<Decoration>();
-  const { state } = view;
-  const cursor = state.selection.main.head;
-
-  for (const { from, to } of view.visibleRanges) {
-    syntaxTree(state).iterate({
-      enter: (node) => {
-        switch (node.name) {
-          case 'ATXHeading1':
-          case 'ATXHeading2':
-          case 'ATXHeading3':
-          case 'ATXHeading4':
-          case 'ATXHeading5':
-          case 'ATXHeading6': {
-            const mark = node.node.getChild('HeaderMark');
-            if (mark) {
-              if (!view.hasFocus || view.state.readOnly || cursor < node.from || cursor > node.to) {
-                builder.add(mark.from, mark.to + 1, Decoration.replace({}));
-              }
-            }
-          }
-        }
-      },
-      from,
-      to,
-    });
-  }
-
-  return builder.finish();
-};
-
-export const heading = () => {
-  return [
-    ViewPlugin.fromClass(
-      class {
-        decorations: DecorationSet;
-        constructor(view: EditorView) {
-          this.decorations = buildDecorations(view);
-        }
-
-        update(update: ViewUpdate) {
-          this.decorations = buildDecorations(update.view);
-        }
-      },
-      {
-        decorations: (value) => value.decorations,
-      },
-    ),
-  ];
-};

package/src/extensions/markdown/hr.ts

@@ -1,71 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { syntaxTree } from '@codemirror/language';
-import { RangeSetBuilder } from '@codemirror/state';
-import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate, WidgetType } from '@codemirror/view';
-
-import { getToken } from '../../styles';
-
-// TODO(burdon): Reconcile with theme.
-const styles = EditorView.baseTheme({
-  '& .cm-hr': {
-    // Note that block-level decorations should not have vertical margins,
-    borderTop: `1px solid ${getToken('extend.colors.neutral.200')}`,
-  },
-});
-
-class HorizontalRuleWidget extends WidgetType {
-  override toDOM() {
-    const el = document.createElement('div');
-    el.className = 'cm-hr';
-    return el;
-  }
-}
-
-const decoration = Decoration.replace({ widget: new HorizontalRuleWidget() });
-
-const buildDecorations = (view: EditorView): DecorationSet => {
-  const builder = new RangeSetBuilder<Decoration>();
-  const { state } = view;
-  const cursor = state.selection.main.head;
-
-  for (const { from, to } of view.visibleRanges) {
-    syntaxTree(state).iterate({
-      enter: (node) => {
-        if (node.name === 'HorizontalRule') {
-          // Check if cursor is inside text.
-          if (cursor <= node.from || cursor >= node.to) {
-            builder.add(node.from, node.to, decoration);
-          }
-        }
-      },
-      from,
-      to,
-    });
-  }
-
-  return builder.finish();
-};
-
-export const hr = () => {
-  return [
-    ViewPlugin.fromClass(
-      class {
-        decorations: DecorationSet;
-        constructor(view: EditorView) {
-          this.decorations = buildDecorations(view);
-        }
-
-        update(update: ViewUpdate) {
-          this.decorations = buildDecorations(update.view);
-        }
-      },
-      {
-        decorations: (value) => value.decorations,
-      },
-    ),
-    styles,
-  ];
-};

package/src/extensions/markdown/tasklist.ts

@@ -1,110 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { syntaxTree } from '@codemirror/language';
-import { RangeSetBuilder } from '@codemirror/state';
-import { EditorView, Decoration, WidgetType, ViewPlugin, type DecorationSet, type ViewUpdate } from '@codemirror/view';
-
-import { getToken } from '../../styles';
-
-// TODO(burdon): Reconcile with theme.
-const styles = EditorView.baseTheme({
-  '& .cm-task': {
-    color: getToken('extend.colors.blue.500'),
-  },
-  '& .cm-task-checkbox': {
-    marginLeft: '4px',
-    marginRight: '4px',
-  },
-});
-
-class CheckboxWidget extends WidgetType {
-  constructor(private _checked: boolean) {
-    super();
-  }
-
-  override eq(other: this) {
-    return this._checked === other._checked;
-  }
-
-  override toDOM(view: EditorView) {
-    const input = document.createElement('input');
-    input.className = 'cm-task-checkbox';
-    input.type = 'checkbox';
-    input.checked = this._checked;
-    if (view.state.readOnly) {
-      input.setAttribute('disabled', 'true');
-    } else {
-      input.onmousedown = (event: Event) => {
-        const pos = view.posAtDOM(input);
-        const text = view.state.sliceDoc(pos, pos + 3);
-        if (text === (this._checked ? '[x]' : '[ ]')) {
-          view.dispatch({
-            changes: { from: pos + 1, to: pos + 2, insert: this._checked ? ' ' : 'x' },
-          });
-          event.preventDefault();
-        }
-      };
-    }
-
-    return input;
-  }
-
-  override ignoreEvent() {
-    return false;
-  }
-}
-
-const checkedDecoration = Decoration.replace({ widget: new CheckboxWidget(true) });
-const uncheckedDecoration = Decoration.replace({ widget: new CheckboxWidget(false) });
-
-const buildDecorations = (view: EditorView): DecorationSet => {
-  const builder = new RangeSetBuilder<Decoration>();
-  const { state } = view;
-  const cursor = state.selection.main.head;
-
-  for (const { from, to } of view.visibleRanges) {
-    syntaxTree(state).iterate({
-      enter: (node) => {
-        if (node.name === 'TaskMarker') {
-          // Check if cursor is inside text.
-          if (cursor < node.from || cursor > node.to) {
-            const checked = state.doc.sliceString(node.from + 1, node.to - 1) === 'x';
-            builder.add(node.from - 2, node.from - 1, Decoration.mark({ class: 'cm-task' }));
-            builder.add(node.from, node.to, checked ? checkedDecoration : uncheckedDecoration);
-          }
-        }
-      },
-      from,
-      to,
-    });
-  }
-
-  return builder.finish();
-};
-
-export type TasklistOptions = {};
-
-export const tasklist = (options: TasklistOptions = {}) => {
-  return [
-    ViewPlugin.fromClass(
-      class {
-        decorations: DecorationSet;
-        constructor(view: EditorView) {
-          this.decorations = buildDecorations(view);
-        }
-
-        update(update: ViewUpdate) {
-          if (update.docChanged || update.viewportChanged || update.selectionSet) {
-            this.decorations = buildDecorations(update.view);
-          }
-        }
-      },
-      {
-        decorations: (value) => value.decorations,
-      },
-    ),
-    styles,
-  ];
-};