@dxos/react-ui-editor 0.8.3 → 0.8.4-main.1068cf700f

package/src/extensions/blast.ts

@@ -1,376 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-// Based on a demo by Joel Besada and Kushagra Gour.
-// https://twitter.com/JoelBesada/status/670343885655293952
-// https://github.com/chinchang/code-blast-codemirror/blob/master/code-blast.js
-//
-
-import { type Extension } from '@codemirror/state';
-import { EditorView, keymap } from '@codemirror/view';
-import defaultsDeep from 'lodash.defaultsdeep';
-
-import { invariant } from '@dxos/invariant';
-
-export type BlastOptions = {
-  effect?: number;
-  maxParticles: number;
-  particleGravity: number;
-  particleAlphaFadeout: number;
-  particleSize: { min: number; max: number };
-  particleNumRange: { min: number; max: number };
-  particleVelocityRange: { x: [number, number]; y: [number, number] };
-  particleShrinkRate: number;
-  shakeIntensity: number;
-  color?: () => number[];
-};
-
-export const defaultOptions: BlastOptions = {
-  effect: 2,
-  maxParticles: 200,
-  particleGravity: 0.08,
-  particleAlphaFadeout: 0.996,
-  particleSize: { min: 2, max: 8 },
-  particleNumRange: { min: 5, max: 10 },
-  particleVelocityRange: { x: [-1, 1], y: [-3.5, -1.5] },
-  particleShrinkRate: 0.95,
-  shakeIntensity: 5,
-};
-
-export const blast = (options: Partial<BlastOptions> = defaultOptions): Extension => {
-  let blaster: Blaster | undefined;
-  let last = 0;
-
-  const getPoint = (view: EditorView, pos: number) => {
-    const { left: x = 0, top: y = 0 } = view.coordsForChar(pos) ?? {};
-    const element = document.elementFromPoint(x, y);
-
-    const { offsetLeft: left = 0, offsetTop: top = 0 } = view.scrollDOM.parentElement ?? {};
-    const point = { x: x - left, y: y - top };
-
-    return { element, point };
-  };
-
-  return [
-    // Cursor moved.
-    EditorView.updateListener.of((update) => {
-      // NOTE: The MarkdownEditor may recreated the EditorView.
-      if (blaster?.node !== update.view.scrollDOM) {
-        if (blaster) {
-          blaster.destroy();
-        }
-
-        blaster = new Blaster(
-          update.view.scrollDOM,
-          defaultsDeep(
-            {
-              particleGravity: 0.2,
-              particleShrinkRate: 0.995,
-              color: () => [100 + Math.random() * 100, 0, 0],
-            },
-            options,
-            defaultOptions,
-          ),
-        );
-        blaster.initialize();
-        blaster.start(); // TODO(burdon): Stop/clean-up.
-      } else {
-        blaster.resize();
-      }
-
-      const current = update.state.selection.main.head;
-      if (current !== last) {
-        last = current;
-        // TODO(burdon): Null if end of line.
-        const { element, point } = getPoint(update.view, current - 1);
-        if (element && point) {
-          blaster.spawn({ element, point });
-        }
-      }
-    }),
-
-    keymap.of([
-      {
-        any: (_, event) => {
-          if (blaster) {
-            if (event.key === 'Enter' && event.shiftKey) {
-              blaster.shake({ time: 0.8 });
-              return true;
-            }
-          }
-
-          return false;
-        },
-      },
-    ]),
-  ];
-};
-
-//
-// Blaster (no CM deps).
-//
-
-class Blaster {
-  private readonly _effect: Effect;
-
-  _canvas: HTMLCanvasElement | undefined;
-  _ctx: CanvasRenderingContext2D | undefined | null;
-
-  _running = false;
-  _lastTime: number | undefined;
-  _shakeTime = 0;
-  _shakeTimeMax = 0;
-
-  _particles: Particle[] = [];
-  _particlePointer = 0;
-
-  _lastPoint = { x: 0, y: 0 };
-
-  constructor(
-    private readonly _node: HTMLElement,
-    private readonly _options: BlastOptions,
-  ) {
-    this._effect = this._options.effect === 1 ? new Effect1(_options) : new Effect2(_options);
-  }
-
-  get node() {
-    return this._node;
-  }
-
-  initialize(): void {
-    // console.log('initialize');
-    invariant(!this._canvas && !this._ctx);
-
-    this._canvas = document.createElement('canvas');
-    this._canvas.id = 'code-blast-canvas';
-    this._canvas.style.position = 'absolute';
-    this._canvas.style.zIndex = '0';
-    this._canvas.style.pointerEvents = 'none';
-    // this._canvas.style.border = '2px dashed red';
-
-    this._ctx = this._canvas.getContext('2d');
-
-    const parent = this._node.parentElement?.parentElement;
-    parent?.appendChild(this._canvas);
-
-    this.resize();
-  }
-
-  destroy(): void {
-    this.stop();
-    // console.log('destroy');
-    if (this._canvas) {
-      this._canvas.remove();
-      this._canvas = undefined;
-      this._ctx = undefined;
-    }
-  }
-
-  resize(): void {
-    if (this._node.parentElement && this._canvas) {
-      const { offsetLeft: x, offsetTop: y, offsetWidth: width, offsetHeight: height } = this._node.parentElement;
-      this._canvas.style.top = `${y}px`;
-      this._canvas.style.left = `${x}px`;
-      this._canvas.width = width;
-      this._canvas.height = height;
-    }
-  }
-
-  start(): void {
-    // console.log('start');
-    invariant(this._canvas && this._ctx);
-    this._running = true;
-    this.loop();
-  }
-
-  stop(): void {
-    // console.log('stop');
-    this._running = false;
-    this._node.style.transform = 'translate(0px, 0px)';
-  }
-
-  loop(): void {
-    if (!this._running || !this._canvas || !this._ctx) {
-      return;
-    }
-
-    this._ctx.clearRect(0, 0, this._canvas.width ?? 0, this._canvas.height ?? 0);
-
-    // Calculate the delta from the previous frame.
-    const now = new Date().getTime();
-    this._lastTime ??= now;
-    const dt = (now - this._lastTime) / 1000;
-    this._lastTime = now;
-
-    if (this._shakeTime > 0) {
-      this._shakeTime -= dt;
-      const magnitude = (this._shakeTime / this._shakeTimeMax) * this._options.shakeIntensity;
-      const shakeX = random(-magnitude, magnitude);
-      const shakeY = random(-magnitude, magnitude);
-      this._node!.style.transform = `translate(${shakeX}px,${shakeY}px)`;
-    }
-
-    this.drawParticles();
-
-    requestAnimationFrame(this.loop.bind(this));
-  }
-
-  shake = throttle<{ time: number }>(({ time }) => {
-    this._shakeTime = this._shakeTimeMax || time;
-    this._shakeTimeMax = time;
-  }, 100);
-
-  spawn = throttle<{ element: Element; point: { x: number; y: number } }>(({ element, point }) => {
-    const color = getRGBComponents(element, this._options.color);
-    const numParticles = random(this._options.particleNumRange.min, this._options.particleNumRange.max);
-    const dir = this._lastPoint.x === point.x ? 0 : this._lastPoint.x < point.x ? 1 : -1;
-    this._lastPoint = point;
-    for (let i = numParticles; i--; i > 0) {
-      this._particles[this._particlePointer] = this._effect.create(point.x - dir * 16, point.y, color);
-      this._particlePointer = (this._particlePointer + 1) % this._options.maxParticles;
-    }
-  }, 100);
-
-  drawParticles(): void {
-    for (let i = this._particles.length; i--; i > 0) {
-      const particle = this._particles[i];
-      if (!particle) {
-        continue;
-      }
-
-      if (particle.alpha < 0.01 || particle.size <= 0.5) {
-        continue;
-      }
-
-      this._effect.update(this._ctx!, particle);
-    }
-  }
-}
-
-//
-// Effects
-//
-
-type Particle = {
-  x: number;
-  y: number;
-  vx: number;
-  vy: number;
-  size: number;
-  color: (string | number)[];
-  alpha: number;
-  theta?: number;
-  drag?: number;
-  wander?: number;
-};
-
-abstract class Effect {
-  constructor(protected readonly _options: BlastOptions) {}
-  abstract create(x: number, y: number, color: Particle['color']): Particle;
-  abstract update(ctx: CanvasRenderingContext2D, particle: Particle): void;
-}
-
-class Effect1 extends Effect {
-  create(x: number, y: number, color: Particle['color']) {
-    return {
-      x,
-      y: y + 10,
-      vx: random(this._options.particleVelocityRange.x[0], this._options.particleVelocityRange.x[1]),
-      vy: random(this._options.particleVelocityRange.y[0], this._options.particleVelocityRange.y[1]),
-      size: random(this._options.particleSize.min, this._options.particleSize.max),
-      color,
-      alpha: 1,
-    };
-  }
-
-  update(ctx: CanvasRenderingContext2D, particle: Particle): void {
-    particle.vy += this._options.particleGravity;
-    particle.x += particle.vx;
-    particle.y += particle.vy;
-    particle.alpha *= this._options.particleAlphaFadeout;
-
-    ctx.fillStyle = `rgba(${particle.color[0]},${particle.color[1]},${particle.color[2]},${particle.alpha})`;
-    ctx.fillRect(Math.round(particle.x - 1), Math.round(particle.y - 1), particle.size, particle.size);
-  }
-}
-
-/**
- * Based on Soulwire's demo.
- * http://codepen.io/soulwire/pen/foktm
- */
-class Effect2 extends Effect {
-  create(x: number, y: number, color: Particle['color']) {
-    return {
-      x,
-      y: y + 10,
-      vx: random(this._options.particleVelocityRange.x[0], this._options.particleVelocityRange.x[1]),
-      vy: random(this._options.particleVelocityRange.y[0], this._options.particleVelocityRange.y[1]),
-      size: random(this._options.particleSize.min, this._options.particleSize.max),
-      color,
-      alpha: 1,
-      theta: (random(0, 360) * Math.PI) / 180,
-      drag: 0.92,
-      wander: 0.15,
-    };
-  }
-
-  update(ctx: CanvasRenderingContext2D, particle: Particle): void {
-    particle.vy += this._options.particleGravity;
-    particle.x += particle.vx;
-    particle.y += particle.vy;
-    particle.vx *= particle.drag!;
-    particle.vy *= particle.drag!;
-    particle.theta! += random(-0.5, 0.5);
-    particle.vx += Math.sin(particle.theta!) * 0.1;
-    particle.vy += Math.cos(particle.theta!) * 0.1;
-    particle.size *= this._options.particleShrinkRate;
-    particle.alpha *= this._options.particleAlphaFadeout;
-
-    ctx.fillStyle = `rgba(${particle.color[0]},${particle.color[1]},${particle.color[2]},${particle.alpha})`;
-    ctx.beginPath();
-    ctx.arc(Math.round(particle.x - 1), Math.round(particle.y - 1), particle.size, 0, 2 * Math.PI);
-    ctx.fill();
-  }
-}
-
-//
-// Utils
-//
-
-function throttle<T>(callback: (arg: T) => void, limit: number): (arg: T) => void {
-  let wait = false;
-  return function (...args: any[]) {
-    if (!wait) {
-      // @ts-ignore
-      callback.apply(this, args);
-      wait = true;
-      setTimeout(() => {
-        wait = false;
-      }, limit);
-    }
-  };
-}
-
-const getRGBComponents = (node: Element, color: BlastOptions['color']): Particle['color'] => {
-  if (typeof color === 'function') {
-    return color();
-  }
-
-  const bgColor = getComputedStyle(node).color;
-  if (bgColor) {
-    const x = bgColor.match(/(\d+), (\d+), (\d+)/)?.slice(1);
-    if (x) {
-      return x;
-    }
-  }
-
-  return [50, 50, 50];
-};
-
-const random = (min: number, max: number) => {
-  if (!max) {
-    max = min;
-    min = 0;
-  }
-
-  return min + ~~(Math.random() * (max - min + 1));
-};

package/src/extensions/command/action.ts

@@ -1,56 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { StateEffect } from '@codemirror/state';
-import { type KeyBinding, type Command, type EditorView } from '@codemirror/view';
-
-import { commandState } from './state';
-
-export type Action =
-  | {
-      type: 'insert';
-      text: string;
-    }
-  | {
-      type: 'cancel';
-    };
-
-export type ActionHandler = (action: Action) => void;
-
-export const openEffect = StateEffect.define<{ pos: number; fullWidth?: boolean }>();
-export const closeEffect = StateEffect.define<null>();
-
-export const openCommand: Command = (view: EditorView) => {
-  if (view.state.field(commandState, false)) {
-    const selection = view.state.selection.main;
-    const line = view.state.doc.lineAt(selection.from);
-    if (line.from === selection.from && line.from === line.to) {
-      view.dispatch({ effects: openEffect.of({ pos: selection.anchor, fullWidth: true }) });
-      return true;
-    }
-  }
-
-  return false;
-};
-
-export const closeCommand: Command = (view: EditorView) => {
-  if (view.state.field(commandState, false)) {
-    view.dispatch({ effects: closeEffect.of(null) });
-    return true;
-  }
-
-  return false;
-};
-
-export const commandKeyBindings: readonly KeyBinding[] = [
-  {
-    key: '/',
-    preventDefault: true,
-    run: openCommand,
-  },
-  {
-    key: 'Escape',
-    run: closeCommand,
-  },
-];

package/src/extensions/command/command-menu.ts

@@ -1,210 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { RangeSetBuilder, StateField, StateEffect, Prec } from '@codemirror/state';
-import { EditorView, ViewPlugin, type ViewUpdate, Decoration, keymap, type DecorationSet } from '@codemirror/view';
-
-import { placeholder, type PlaceholderOptions } from './placeholder';
-import { type Range } from '../../types';
-
-export type CommandMenuOptions = {
-  trigger: string | string[];
-  placeholder?: Partial<PlaceholderOptions>;
-
-  // TODO(burdon): Replace with onKey?
-  onClose?: () => void;
-  onArrowDown?: () => void;
-  onArrowUp?: () => void;
-  onEnter?: () => void;
-
-  onTextChange?: (trigger: string, text: string) => void;
-};
-
-export const commandMenu = (options: CommandMenuOptions) => {
-  const commandMenuPlugin = ViewPlugin.fromClass(
-    class {
-      decorations: DecorationSet = Decoration.none;
-
-      constructor(readonly view: EditorView) {}
-
-      // TODO(wittjosiah): The decorations are repainted on every update, this occasionally causes menu to flicker.
-      update(update: ViewUpdate) {
-        const builder = new RangeSetBuilder<Decoration>();
-        const selection = update.view.state.selection.main;
-        const { range: activeRange, trigger } = update.view.state.field(commandMenuState) ?? {};
-
-        // Check if we should show the widget - only if cursor is within the active command range.
-        const shouldShowWidget = activeRange && selection.head >= activeRange.from && selection.head <= activeRange.to;
-        if (shouldShowWidget) {
-          // Create mark decoration that wraps the entire line content in a dx-ref-tag.
-          builder.add(
-            activeRange.from,
-            activeRange.to,
-            Decoration.mark({
-              tagName: 'dx-ref-tag',
-              class: 'cm-ref-tag',
-              attributes: {
-                'data-auto-trigger': 'true',
-                'data-trigger': trigger!,
-              },
-            }),
-          );
-        }
-
-        const activeRangeChanged = update.transactions.some((tr) =>
-          tr.effects.some((effect) => effect.is(commandRangeEffect)),
-        );
-        if (activeRange && activeRangeChanged && trigger) {
-          const content = update.view.state.sliceDoc(
-            activeRange.from + 1, // Skip the trigger character.
-            activeRange.to,
-          );
-          options.onTextChange?.(trigger, content);
-        }
-
-        this.decorations = builder.finish();
-      }
-    },
-    {
-      decorations: (v) => v.decorations,
-    },
-  );
-
-  const triggers = Array.isArray(options.trigger) ? options.trigger : [options.trigger];
-
-  const commandKeymap = keymap.of([
-    ...triggers.map((trigger) => ({
-      key: trigger,
-      preventDefault: true,
-      run: (view: EditorView) => {
-        const selection = view.state.selection.main;
-        const line = view.state.doc.lineAt(selection.head);
-
-        // Check if we should trigger the command menu:
-        // 1. Empty lines or at the beginning of a line
-        // 2. When there's a preceding space
-        if (
-          line.text.trim() === '' ||
-          selection.head === line.from ||
-          (selection.head > line.from && line.text[selection.head - line.from - 1] === ' ')
-        ) {
-          // Insert and select the trigger.
-          view.dispatch({
-            changes: { from: selection.head, insert: trigger },
-            selection: { anchor: selection.head + 1, head: selection.head + 1 },
-            effects: commandRangeEffect.of({ trigger, range: { from: selection.head, to: selection.head + 1 } }),
-          });
-
-          return true;
-        }
-
-        return false;
-      },
-    })),
-    {
-      key: 'Enter',
-      run: (view) => {
-        const activeRange = view.state.field(commandMenuState)?.range;
-        if (activeRange) {
-          view.dispatch({ changes: { from: activeRange.from, to: activeRange.to, insert: '' } });
-          options.onEnter?.();
-          return true;
-        }
-
-        return false;
-      },
-    },
-    {
-      key: 'ArrowDown',
-      run: (view) => {
-        const activeRange = view.state.field(commandMenuState)?.range;
-        if (activeRange) {
-          options.onArrowDown?.();
-          return true;
-        }
-
-        return false;
-      },
-    },
-    {
-      key: 'ArrowUp',
-      run: (view) => {
-        const activeRange = view.state.field(commandMenuState)?.range;
-        if (activeRange) {
-          options.onArrowUp?.();
-          return true;
-        }
-
-        return false;
-      },
-    },
-  ]);
-
-  // Listen for selection and document changes to clean up the command menu.
-  const updateListener = EditorView.updateListener.of((update) => {
-    const { trigger, range: activeRange } = update.view.state.field(commandMenuState) ?? {};
-    if (!activeRange || !trigger) {
-      return;
-    }
-
-    const selection = update.view.state.selection.main;
-    const firstChar = update.view.state.doc.sliceString(activeRange.from, activeRange.from + 1);
-    const shouldRemove =
-      firstChar !== trigger || // Trigger deleted.
-      selection.head < activeRange.from || // Cursor moved before the range.
-      selection.head > activeRange.to + 1; // Cursor moved after the range (+1 to handle selection changing before doc).
-
-    const nextRange = shouldRemove
-      ? null
-      : update.docChanged
-        ? { from: activeRange.from, to: selection.head }
-        : activeRange;
-    if (nextRange !== activeRange) {
-      update.view.dispatch({ effects: commandRangeEffect.of(nextRange ? { trigger, range: nextRange } : null) });
-    }
-
-    // TODO(burdon): Should delete if user presses escape? How else to insert the trigger character?
-    if (shouldRemove) {
-      options.onClose?.();
-    }
-  });
-
-  return [
-    Prec.highest(commandKeymap),
-    placeholder(
-      Object.assign(
-        {
-          content: `Press '${Array.isArray(options.trigger) ? options.trigger[0] : options.trigger}' for commands`,
-        },
-        options.placeholder,
-      ),
-    ),
-    updateListener,
-    commandMenuState,
-    commandMenuPlugin,
-  ];
-};
-
-type CommandState = {
-  trigger: string;
-  range: Range;
-};
-
-// State effects for managing command menu state.
-export const commandRangeEffect = StateEffect.define<CommandState | null>();
-
-// State field to track the active command menu range.
-const commandMenuState = StateField.define<CommandState | null>({
-  create: () => null,
-  update: (value, tr) => {
-    let newValue = value;
-    for (const effect of tr.effects) {
-      if (effect.is(commandRangeEffect)) {
-        newValue = effect.value;
-      }
-    }
-
-    return newValue;
-  },
-});

package/src/extensions/command/command.ts

@@ -1,34 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { Prec, type Extension } from '@codemirror/state';
-import { EditorView, keymap } from '@codemirror/view';
-
-import { isNonNullable } from '@dxos/util';
-
-import { closeEffect, commandKeyBindings } from './action';
-import { hint, type HintOptions } from './hint';
-import { commandConfig, commandState, type PopupOptions } from './state';
-
-// TODO(burdon): Create knowledge base for CM notes and ideas.
-// https://discuss.codemirror.net/t/inline-code-hints-like-vscode/5533/4
-// https://github.com/saminzadeh/codemirror-extension-inline-suggestion
-// https://github.com/ChromeDevTools/devtools-frontend/blob/main/front_end/ui/components/text_editor/config.ts#L370
-
-export type CommandOptions = Partial<PopupOptions & HintOptions>;
-
-export const command = (options: CommandOptions = {}): Extension => {
-  return [
-    Prec.highest(keymap.of(commandKeyBindings)),
-    commandConfig.of(options),
-    commandState,
-    options.onHint && hint(options),
-    EditorView.focusChangeEffect.of((_, focusing) => (focusing ? closeEffect.of(null) : null)),
-    EditorView.theme({
-      '.cm-tooltip': {
-        background: 'transparent',
-      },
-    }),
-  ].filter(isNonNullable);
-};