@dxos/react-ui-editor 0.3.10-main.cbe7692 → 0.3.10-main.dcfebef

package/src/components/TextEditor/extensions/blast.ts

@@ -1,375 +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, StateField } 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 = {
-  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>): 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({}, options, defaultOptions));
-        blaster.initialize();
-        blaster.start(); // TODO(burdon): Stop/clean-up.
-      } else {
-        blaster.resize();
-      }
-
-      const current = update.view.state.selection.main.head;
-      if (current !== last) {
-        last = current;
-        // TODO(burdon): Null if end of line.
-        const { element, point } = getPoint(update.view, current);
-        if (element && point) {
-          blaster.spawn({ element, point });
-        }
-      }
-    }),
-
-    // Document changed.
-    StateField.define({
-      create: () => null,
-      update: (_value, transaction) => {
-        if (blaster && transaction.docChanged) {
-          // TODO(burdon): Only on delete.
-          const view = EditorView.findFromDOM(blaster.node)!;
-          const { element, point } = getPoint(view, transaction.selection!.main.head);
-          if (element && point) {
-            blaster.spawn({ element, point });
-          }
-        }
-
-        return null;
-      },
-    }),
-
-    keymap.of([
-      {
-        any: (view, event) => {
-          if (blaster && event.key === 'Enter' && event.shiftKey) {
-            blaster.shake({ time: 0.4 });
-          }
-
-          return false;
-        },
-      },
-    ]),
-  ];
-};
-
-//
-// Blaster (no CM deps).
-//
-
-class Blaster {
-  _canvas: HTMLCanvasElement | undefined;
-  _ctx: CanvasRenderingContext2D | undefined | null;
-
-  private readonly _effect: Effect;
-
-  _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() {
-    // 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 solid red';
-
-    this._ctx = this._canvas.getContext('2d');
-
-    const parent = this._node.parentElement?.parentElement;
-    parent?.appendChild(this._canvas);
-
-    this.resize();
-  }
-
-  destroy() {
-    this.stop();
-    // console.log('destroy');
-    if (this._canvas) {
-      this._canvas.remove();
-      this._canvas = undefined;
-      this._ctx = undefined;
-    }
-  }
-
-  resize() {
-    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() {
-    // console.log('start');
-    invariant(this._canvas && this._ctx);
-    this._running = true;
-    this.loop();
-  }
-
-  stop() {
-    // console.log('stop');
-    this._running = false;
-    this._node.style.transform = 'translate(0px, 0px)';
-  }
-
-  loop() {
-    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;
-    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() {
-    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) {
-    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) {
-    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/components/TextEditor/extensions/image.ts

@@ -1,68 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { syntaxTree } from '@codemirror/language';
-import {
-  type EditorState,
-  type Extension,
-  type RangeSet,
-  RangeSetBuilder,
-  StateField,
-  type Transaction,
-} from '@codemirror/state';
-import { Decoration, EditorView, WidgetType } from '@codemirror/view';
-
-export type ImageOptions = {};
-
-export const image = (options: ImageOptions = {}): Extension => {
-  return StateField.define<RangeSet<any>>({
-    create: (state) => update(state, options),
-    update: (_: RangeSet<any>, tr: Transaction) => update(tr.state, options),
-    provide: (field) => EditorView.decorations.from(field),
-  });
-};
-
-const update = (state: EditorState, options: ImageOptions) => {
-  const builder = new RangeSetBuilder();
-
-  // TODO(burdon): If not-readonly then show text.
-  // if (state.readOnly) {
-  syntaxTree(state).iterate({
-    enter: (node) => {
-      if (node.name === 'Image') {
-        const urlNode = node.node.getChild('URL');
-        if (urlNode) {
-          const url = state.sliceDoc(urlNode.from, urlNode.to);
-          builder.add(
-            state.readOnly ? node.from : node.to,
-            node.to,
-            Decoration.widget({
-              widget: new ImageWidget(url),
-            }),
-          );
-        }
-      }
-    },
-  });
-  // }
-
-  return builder.finish();
-};
-
-class ImageWidget extends WidgetType {
-  constructor(readonly _url: string) {
-    super();
-  }
-
-  override eq(other: WidgetType) {
-    return this._url === (other as any as ImageWidget)?._url;
-  }
-
-  toDOM(view: EditorView) {
-    const img = document.createElement('img');
-    img.setAttribute('src', this._url);
-    img.setAttribute('class', 'cm-image');
-    return img;
-  }
-}

package/src/components/TextEditor/extensions/mention.ts

@@ -1,31 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { autocompletion, type CompletionContext, type CompletionResult } from '@codemirror/autocomplete';
-import type { Extension } from '@codemirror/state';
-
-export type MentionOptions = {
-  onSearch: (text: string) => string[];
-};
-
-export const mention = ({ onSearch }: MentionOptions): Extension => {
-  return autocompletion({
-    closeOnBlur: false, // For debugging.
-    override: [
-      (context: CompletionContext): CompletionResult | null => {
-        const match = context.matchBefore(/@(\w+)?/);
-        if (!match || (match.from === match.to && !context.explicit)) {
-          return null;
-        }
-
-        console.log(match);
-
-        return {
-          from: match.from,
-          options: onSearch(match.text.slice(1).toLowerCase()).map((value) => ({ label: `@${value}` })),
-        };
-      },
-    ],
-  });
-};

package/src/components/TextEditor/extensions/table.ts

@@ -1,123 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { syntaxTree } from '@codemirror/language';
-import { type EditorState, type RangeSet, RangeSetBuilder, StateField, type Transaction } from '@codemirror/state';
-import { Decoration, EditorView, WidgetType } from '@codemirror/view';
-
-// TODO(burdon): Snippet to create basic table.
-//  https://codemirror.net/docs/ref/#autocomplete.snippet
-
-export type TableOptions = {};
-
-/**
- * GFM tables.
- * https://github.github.com/gfm/#tables-extension
- */
-export const table = (options: TableOptions = {}) => {
-  return StateField.define<RangeSet<any>>({
-    create: (state) => update(state, options),
-    update: (_: RangeSet<any>, tr: Transaction) => update(tr.state, options),
-    provide: (field) => EditorView.decorations.from(field),
-  });
-};
-
-type Table = {
-  from: number;
-  to?: number;
-  header?: string[];
-  rows?: string[][];
-};
-
-const update = (state: EditorState, options: TableOptions) => {
-  const builder = new RangeSetBuilder();
-  if (state.readOnly) {
-    const tables: Table[] = [];
-    const getTable = () => tables[tables.length - 1];
-    const getRow = () => {
-      const table = getTable();
-      return table.rows?.[table.rows.length - 1];
-    };
-
-    // Parse table.
-    // TODO(burdon): Use remark?: https://www.npmjs.com/package/remark-gfm
-    syntaxTree(state).iterate({
-      enter: (node) => {
-        // console.log(node.name);
-        // Check if cursor is inside text.
-        switch (node.name) {
-          case 'Table': {
-            tables.push({ from: node.from });
-            break;
-          }
-          case 'TableHeader': {
-            getTable().header = [];
-            break;
-          }
-          case 'TableRow': {
-            (getTable().rows ??= []).push([]);
-            break;
-          }
-          case 'TableCell': {
-            const row = getRow();
-            if (row) {
-              row.push(state.sliceDoc(node.from, node.to));
-            } else {
-              getTable().header?.push(state.sliceDoc(node.from, node.to));
-            }
-            break;
-          }
-          case 'TableDelimiter': {
-            getTable().to = node.to;
-            break;
-          }
-        }
-      },
-    });
-
-    tables.forEach((table) =>
-      builder.add(table.from, table.to!, Decoration.replace({ widget: new TableWidget(table) })),
-    );
-  }
-
-  return builder.finish();
-};
-
-class TableWidget extends WidgetType {
-  constructor(readonly _table: Table) {
-    super();
-  }
-
-  override eq(other: WidgetType) {
-    return this._table.from === (other as any as TableWidget)?._table?.from;
-  }
-
-  toDOM(view: EditorView) {
-    const table = document.createElement('table');
-
-    {
-      const header = table.appendChild(document.createElement('thead'));
-      const row = header.appendChild(document.createElement('tr'));
-      this._table.header?.forEach((cell) => {
-        const th = document.createElement('th');
-        th.setAttribute('class', 'cm-table-head');
-        row.appendChild(th).textContent = cell;
-      });
-    }
-
-    {
-      const body = table.appendChild(document.createElement('tbody'));
-      this._table.rows?.forEach((row) => {
-        const tr = body.appendChild(document.createElement('tr'));
-        row.forEach((cell) => {
-          const td = document.createElement('td');
-          td.setAttribute('class', 'cm-table-cell');
-          tr.appendChild(td).textContent = cell;
-        });
-      });
-    }
-
-    return table;
-  }
-}