@dxos/react-ui-editor 0.8.4-main.72ec0f3 → 0.8.4-main.74a063c4e0

package/src/extensions/blast.ts

@@ -1,363 +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 { throttle } from '@dxos/async';
-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 }: { time: number }) => {
-    this._shakeTime = this._shakeTimeMax || time;
-    this._shakeTimeMax = time;
-  }, 100);
-
-  spawn = throttle(({ element, point }: { element: Element; point: { x: number; y: number } }) => {
-    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
-//
-
-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/blocks.ts

@@ -1,131 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { RangeSetBuilder } from '@codemirror/state';
-import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
-
-import { mx } from '@dxos/react-ui-theme';
-
-const paragraphBlockPlugin = ViewPlugin.fromClass(
-  class {
-    decorations: DecorationSet;
-
-    constructor(view: EditorView) {
-      this.decorations = this.build(view);
-    }
-
-    update(update: ViewUpdate) {
-      if (update.docChanged || update.viewportChanged) {
-        this.decorations = this.build(update.view);
-      }
-    }
-
-    build({ state }: EditorView) {
-      const builder = new RangeSetBuilder<Decoration>();
-
-      // Helper: commit a block from blockStart to endLine (inclusive).
-      const pushBlock = (fromLine: number, toLine: number) => {
-        // Add line decorations for each line in the block.
-        for (let lineNum = fromLine; lineNum <= toLine; lineNum++) {
-          const line = state.doc.line(lineNum);
-          builder.add(
-            line.from,
-            line.from,
-            Decoration.line({
-              class: mx(
-                'block-line',
-                fromLine === toLine && 'block-single',
-                lineNum === fromLine && 'block-first',
-                lineNum > fromLine && lineNum < toLine && 'block-middle',
-                lineNum === toLine && 'block-last',
-              ),
-            }),
-          );
-        }
-      };
-
-      let blockStart: number | null = null;
-      let consecutiveBlankLines = 0;
-      const totalLines = state.doc.lines;
-      for (let i = 1; i <= totalLines; i++) {
-        const line = state.doc.line(i);
-        const isBlank = /^\s*$/.test(line.text);
-
-        if (!isBlank) {
-          // Reset blank line counter.
-          consecutiveBlankLines = 0;
-          // Start a new block if we're not already in one.
-          if (blockStart === null) {
-            blockStart = i;
-          }
-        } else {
-          // Increment blank line counter.
-          consecutiveBlankLines++;
-
-          // End the current block if we have 2+ consecutive blank lines.
-          if (consecutiveBlankLines >= 2 && blockStart !== null) {
-            pushBlock(blockStart, i - consecutiveBlankLines);
-            blockStart = null;
-          }
-        }
-      }
-
-      // Handle any remaining block at the end of the document.
-      if (blockStart !== null) {
-        // Find the last non-blank line for the block end.
-        let lastNonBlankLine = totalLines;
-        while (lastNonBlankLine >= blockStart) {
-          const line = state.doc.line(lastNonBlankLine);
-          if (!/^\s*$/.test(line.text)) {
-            break;
-          }
-          lastNonBlankLine--;
-        }
-        if (lastNonBlankLine >= blockStart) {
-          pushBlock(blockStart, lastNonBlankLine);
-        }
-      }
-
-      return builder.finish();
-    }
-  },
-  {
-    decorations: (v) => v.decorations,
-  },
-);
-
-export const blocks = () => [
-  paragraphBlockPlugin,
-  EditorView.baseTheme({
-    '.cm-line.block-line': {
-      paddingLeft: '0.75rem',
-      paddingRight: '0.75rem',
-      borderLeft: '1px solid var(--dx-subduedSeparator)',
-      borderRight: '1px solid var(--dx-subduedSeparator)',
-    },
-    '.cm-line.block-single': {
-      border: '1px solid var(--dx-subduedSeparator)',
-      borderRadius: '6px',
-      paddingTop: '0.5rem',
-      paddingBottom: '0.5rem',
-      marginTop: '0.5rem',
-      marginBottom: '0.5rem',
-    },
-    '.cm-line.block-first': {
-      borderTop: '1px solid var(--dx-subduedSeparator)',
-      borderTopLeftRadius: '6px',
-      borderTopRightRadius: '6px',
-      paddingTop: '0.5rem',
-      marginTop: '0.5rem',
-    },
-    '.cm-line.block-middle': {},
-    '.cm-line.block-last': {
-      borderBottom: '1px solid var(--dx-subduedSeparator)',
-      borderBottomLeftRadius: '6px',
-      borderBottomRightRadius: '6px',
-      paddingBottom: '0.5rem',
-      marginBottom: '0.5rem',
-    },
-  }),
-];

package/src/extensions/bookmarks.ts

@@ -1,75 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type Extension, Prec, StateEffect, StateField } from '@codemirror/state';
-import { keymap } from '@codemirror/view';
-
-type Bookmark = {
-  id: string;
-  pos: number;
-  name: string;
-};
-
-export const addBookmark = StateEffect.define<Bookmark>();
-export const removeBookmark = StateEffect.define<string>();
-export const clearBookmarks = StateEffect.define<void>();
-
-export const bookmarks = (): Extension => {
-  return [
-    bookmarksField,
-    Prec.highest(
-      keymap.of([
-        {
-          key: 'Mod-ArrowUp',
-          run: (view) => {
-            const bookmarks = view.state.field(bookmarksField);
-            console.log('up', bookmarks);
-            return true;
-          },
-        },
-        {
-          key: 'Mod-ArrowDown',
-          run: (view) => {
-            const bookmarks = view.state.field(bookmarksField);
-            console.log('down', bookmarks);
-            return true;
-          },
-        },
-      ]),
-    ),
-  ];
-};
-
-type BookmarkFieldState = {
-  bookmarks: Bookmark[];
-};
-
-const bookmarksField = StateField.define<BookmarkFieldState>({
-  create: (): BookmarkFieldState => ({
-    bookmarks: [],
-  }),
-
-  update: (value: BookmarkFieldState, tr): BookmarkFieldState => {
-    // Map bookmark positions through document changes.
-    let bookmarks = value.bookmarks.map((bookmark) => ({
-      ...bookmark,
-      pos: tr.changes.mapPos(bookmark.pos),
-    }));
-
-    // Process effects.
-    for (const effect of tr.effects) {
-      if (effect.is(addBookmark)) {
-        bookmarks = [...bookmarks, effect.value];
-      } else if (effect.is(removeBookmark)) {
-        bookmarks = bookmarks.filter((b) => b.id !== effect.value);
-      } else if (effect.is(clearBookmarks)) {
-        bookmarks = [];
-      }
-    }
-
-    // Sort bookmarks by position.
-    bookmarks.sort(({ pos: a }, { pos: b }) => a - b);
-    return { bookmarks };
-  },
-});