@dxos/ui-editor 0.0.0 → 0.8.4-main.05e74ebcff

package/src/extensions/tags/fader.ts

@@ -0,0 +1,195 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Extension, StateEffect, StateField } from '@codemirror/state';
+import { Decoration, type DecorationSet, EditorView, ViewPlugin } from '@codemirror/view';
+
+const DEFAULT_REMOVAL_DELAY = 5_000; // ms.
+const DEFAULT_COALESCE_WINDOW = 100; // ms.
+const CLEANUP_INTERVAL = 1_000; // ms.
+
+export type FaderOptions = {
+  /** Time window in ms to coalesce adjacent appends into a single decoration. */
+  coalesce?: number;
+};
+
+/**
+ * Extension that decorates appended text with a fade-in effect.
+ * Adjacent appends within the coalesce window are merged into a single decoration.
+ * Decorations are queued with an expiry and removed by a timer.
+ */
+export const fader = (options: FaderOptions = {}): Extension => {
+  const removalDelay = DEFAULT_REMOVAL_DELAY;
+  const coalesceWindow = options.coalesce ?? DEFAULT_COALESCE_WINDOW;
+
+  let lastCount = -1;
+  const log = (expiries: number[]) => {
+    if (expiries.length !== lastCount) {
+      lastCount = expiries.length;
+      // console.log('[fader] decorations:', lastCount);
+    }
+  };
+
+  // Effect to remove all expired decorations.
+  const dequeue = StateEffect.define<number>();
+
+  // FIFO of expiry timestamps paired with a decoration set.
+  // Tracks `batchStart` — the time the current coalesce batch began.
+  type FaderState = {
+    decorations: DecorationSet;
+    expiries: number[];
+    batchStart: number;
+  };
+
+  const fadeField = StateField.define<FaderState>({
+    create: () => ({ decorations: Decoration.none, expiries: [], batchStart: 0 }),
+    update: ({ decorations, expiries, batchStart }, tr) => {
+      // Remove expired entries by count (FIFO order matches decoration insertion order).
+      for (const effect of tr.effects) {
+        if (effect.is(dequeue)) {
+          const now = effect.value;
+          let removeCount = 0;
+          while (removeCount < expiries.length && expiries[removeCount] <= now) {
+            removeCount++;
+          }
+          if (removeCount > 0) {
+            expiries = expiries.slice(removeCount);
+            let skipped = 0;
+            decorations = decorations.update({
+              filter: () => {
+                if (skipped < removeCount) {
+                  skipped++;
+                  return false;
+                }
+                return true;
+              },
+            });
+          }
+        }
+      }
+
+      if (!tr.docChanged) {
+        log(expiries);
+        return { decorations, expiries, batchStart };
+      }
+
+      // Reset when document is cleared or fully replaced.
+      let isReset = tr.state.doc.length === 0;
+      if (!isReset && tr.startState.doc.length > 0) {
+        tr.changes.iterChanges((fromA, toA) => {
+          if (fromA === 0 && toA === tr.startState.doc.length) {
+            isReset = true;
+          }
+        });
+      }
+      if (isReset) {
+        log([]);
+        return { decorations: Decoration.none, expiries: [], batchStart: 0 };
+      }
+
+      // Collect appended ranges.
+      const now = Date.now();
+      const add: { from: number; to: number }[] = [];
+      tr.changes.iterChanges((fromA, toA, fromB, toB, inserted) => {
+        if (toA === tr.startState.doc.length && inserted.length > 0) {
+          add.push({ from: fromB, to: toB });
+        }
+      });
+
+      if (add.length > 0) {
+        const canCoalesce = expiries.length > 0 && batchStart > 0 && now - batchStart < coalesceWindow;
+        if (canCoalesce) {
+          // Extend the last decoration: remove it, then add a merged one.
+          let lastFrom = -1;
+          let lastTo = -1;
+          decorations.between(0, tr.state.doc.length, (from, to) => {
+            lastFrom = from;
+            lastTo = to;
+          });
+
+          if (lastFrom >= 0) {
+            decorations = decorations.update({
+              filter: (from, to) => !(from === lastFrom && to === lastTo),
+            });
+
+            const mergedFrom = Math.min(lastFrom, add[0].from);
+            const mergedTo = add[add.length - 1].to;
+            decorations = decorations.update({
+              add: [Decoration.mark({ class: 'cm-fader' }).range(mergedFrom, mergedTo)],
+            });
+
+            // Update the last expiry rather than adding a new one.
+            expiries = [...expiries.slice(0, -1), now + removalDelay];
+          }
+        } else {
+          // New batch — record when it started.
+          batchStart = now;
+          expiries = [...expiries, now + removalDelay];
+          decorations = decorations.update({
+            add: add.map(({ from, to }) => Decoration.mark({ class: 'cm-fader' }).range(from, to)),
+          });
+        }
+      }
+
+      log(expiries);
+      return { decorations, expiries, batchStart };
+    },
+    provide: (f) => EditorView.decorations.from(f, (value) => value.decorations),
+  });
+
+  // Timer that schedules removal based on the next pending expiry.
+  const cleanup = ViewPlugin.fromClass(
+    class {
+      #timer: ReturnType<typeof setTimeout> | undefined;
+
+      constructor(private view: EditorView) {
+        this.#schedule();
+      }
+
+      update() {
+        this.#schedule();
+      }
+
+      #schedule() {
+        const { expiries } = this.view.state.field(fadeField);
+        if (expiries.length === 0) {
+          clearTimeout(this.#timer);
+          this.#timer = undefined;
+          return;
+        }
+
+        if (this.#timer !== undefined) {
+          return;
+        }
+
+        // Wait at least CLEANUP_INTERVAL after the oldest expiry to batch removals.
+        const delay = Math.max(CLEANUP_INTERVAL, expiries[0] - Date.now());
+        this.#timer = setTimeout(() => {
+          this.#timer = undefined;
+          this.view.dispatch({ effects: dequeue.of(Date.now()) });
+        }, delay);
+      }
+
+      destroy() {
+        clearTimeout(this.#timer);
+      }
+    },
+  );
+
+  return [
+    fadeField,
+    cleanup,
+    EditorView.theme({
+      '.cm-fader': {
+        animation: 'fader 1s ease-out forwards',
+      },
+      '@keyframes fader': {
+        '0%': {
+          textShadow: '0 0 16px rgba(100, 200, 255, 1), 0 0 32px rgba(100, 200, 255, 0.6)',
+        },
+        '100%': {},
+      },
+    }),
+  ];
+};

package/src/extensions/tags/index.ts

@@ -3,5 +3,8 @@
 //
 
 export * from './extended-markdown';
-export * from './streamer';
+export * from './fader';
+export * from './typewriter';
+export * from './xml-block-decoration';
+export * from './xml-formatting';
 export * from './xml-tags';

package/src/extensions/tags/testing/text.md

@@ -0,0 +1,36 @@
+<prompt>summarize the posts</prompt>
+<reasoning>The user wants me to summarize the posts related to the magazine in context. Let me first load the magazine object to understand its structure, and then list the candidate posts.</reasoning>
+<status>Loading the magazine and listing candidate posts…</status>
+<toolCall id="toolu_01WMMcsaHxTvuGxcMh2CkfL4" />
+<toolCall id="toolu_01CxWNvXZ4jExfLEJumfMzqm" />
+<reasoning>The magazine has 10 posts already curated, and there are no uncurated candidate posts. The user wants me to summarize the posts that are already in the magazine. Let me load them.</reasoning>
+<status>No uncurated candidates — loading the 10 posts already in the magazine…</status>
+<toolCall id="toolu_0152ftz33GL5M1DDi8GGDHi2" />
+<reasoning>The magazine has 10 posts, but several are duplicates. Let me deduplicate by title/guid and summarize the unique articles. Unique articles:
+
+1. "FBI affidavit quotes White House press dinner shooting suspect expressing rage at 'a pedophile, rapist and traitor' – US politics live" - About Cole Allen's manifesto and charges, plus King Charles visiting Trump at the White House.
+2. "Australia news live: UK inquiry says 'cracks already beginning to show' on Aukus; search for missing five-year-old near Alice Springs grows" - Live blog covering Aukus inquiry, David Brat nominated as ambassador to Australia, fuel reserve crisis.
+3. "Rebel Wilson gives evidence in high-profile defamation case against star of directorial debut" - Rebel Wilson testifying in defamation case brought by Charlotte MacInnes.
+4. "Baby on board: US woman gives birth on Delta flight" - Ashley Blair delivered her baby aboard a Delta flight traveling from Atlanta to Portland.
+5. "'Shortcomings and failures' could sink Aukus nuclear submarines plan, UK inquiry warns" - A UK House of Commons defence committee report identifies significant funding gaps threatening the Aukus submarine program.</reasoning>
+   Here's a summary of the **5 unique articles** currently in the magazine (some posts are duplicates):
+
+6. **FBI affidavit quotes White House press dinner shooting suspect**
+   Federal charges filed against Cole Allen include excerpts from a manifesto he emailed to family and friends before attempting to charge into the White House Correspondents' Dinner. Separately, King Charles and Queen Camilla visited Donald Trump at the White House for tea and a beehive tour.
+
+7. **Australia news live: Aukus 'cracks' & missing child search**
+   A UK House of Commons inquiry reveals "shortcomings and failings" in the Aukus submarine program. Also covered: David Brat nominated as the next US ambassador to Australia, and a push to extend Australia's fuel reserves from 30 to 60 days amid rising security concerns.
+
+8. **Rebel Wilson testifies in defamation case**
+   Hollywood star Rebel Wilson gave evidence in a defamation lawsuit brought by Charlotte MacInnes, the lead actor of Wilson's directorial debut _The Deb_. The case centres on claims MacInnes confided to Wilson about being uncomfortable with a bathing request from a colleague.
+
+9. **Baby born on Delta flight**
+   Passenger Ashley Blair went into labor on a packed Delta flight from Atlanta to Portland. Two off-duty EMTs on the plane delivered baby Brielle Renee just before landing — using a shoelace as a tourniquet for an IV. Mother and baby were healthy on arrival.
+
+10. **UK inquiry warns Aukus submarine plan at risk**
+    A detailed House of Commons defence committee report finds UK submarine funding has "cracks already beginning to show," with chronic under-investment in shipbuilding and only one submarine yard (Barrow-in-Furness) already behind schedule. Australia has committed A$4.6 billion to help, but the committee warns political drift could derail the entire program.
+    <prompt>how many articles are there?</prompt>
+    <reasoning>The user is asking about the number of articles. From my previous analysis, there are 10 posts in the magazine, but only 5 unique articles (the rest are duplicates). Let me answer based on what I already know.</reasoning>
+    There are **10 posts** in the magazine, but only **5 unique articles** — each article appears twice (as duplicates from the two feeds).
+    <prompt>say your name inside an xml tag</prompt>
+    <name>Kai</name>

package/src/extensions/tags/testing/text.txt

@@ -0,0 +1,35 @@
+<prompt>summarize the posts</prompt>
+<reasoning>The user wants me to summarize the posts related to the magazine in context. Let me first load the magazine object to understand its structure, and then list the candidate posts.</reasoning>
+<status>Loading the magazine and listing candidate posts…</status>
+<toolCall id="toolu_01WMMcsaHxTvuGxcMh2CkfL4" />
+<toolCall id="toolu_01CxWNvXZ4jExfLEJumfMzqm" />
+<reasoning>The magazine has 10 posts already curated, and there are no uncurated candidate posts. The user wants me to summarize the posts that are already in the magazine. Let me load them.</reasoning>
+<status>No uncurated candidates — loading the 10 posts already in the magazine…</status>
+<toolCall id="toolu_0152ftz33GL5M1DDi8GGDHi2" />
+<reasoning>The magazine has 10 posts, but several are duplicates. Let me deduplicate by title/guid and summarize the unique articles. Unique articles:
+1. "FBI affidavit quotes White House press dinner shooting suspect expressing rage at 'a pedophile, rapist and traitor' – US politics live" - About Cole Allen's manifesto and charges, plus King Charles visiting Trump at the White House.
+2. "Australia news live: UK inquiry says 'cracks already beginning to show' on Aukus; search for missing five-year-old near Alice Springs grows" - Live blog covering Aukus inquiry, David Brat nominated as ambassador to Australia, fuel reserve crisis. 
+3. "Rebel Wilson gives evidence in high-profile defamation case against star of directorial debut" - Rebel Wilson testifying in defamation case brought by Charlotte MacInnes.
+4. "Baby on board: US woman gives birth on Delta flight" - Ashley Blair delivered her baby aboard a Delta flight traveling from Atlanta to Portland.
+5. "'Shortcomings and failures' could sink Aukus nuclear submarines plan, UK inquiry warns" - A UK House of Commons defence committee report identifies significant funding gaps threatening the Aukus submarine program.</reasoning>
+Here's a summary of the **5 unique articles** currently in the magazine (some posts are duplicates):
+
+1. **FBI affidavit quotes White House press dinner shooting suspect**
+   Federal charges filed against Cole Allen include excerpts from a manifesto he emailed to family and friends before attempting to charge into the White House Correspondents' Dinner. Separately, King Charles and Queen Camilla visited Donald Trump at the White House for tea and a beehive tour.
+
+2. **Australia news live: Aukus 'cracks' & missing child search**
+   A UK House of Commons inquiry reveals "shortcomings and failings" in the Aukus submarine program. Also covered: David Brat nominated as the next US ambassador to Australia, and a push to extend Australia's fuel reserves from 30 to 60 days amid rising security concerns.
+
+3. **Rebel Wilson testifies in defamation case**
+   Hollywood star Rebel Wilson gave evidence in a defamation lawsuit brought by Charlotte MacInnes, the lead actor of Wilson's directorial debut *The Deb*. The case centres on claims MacInnes confided to Wilson about being uncomfortable with a bathing request from a colleague.
+
+4. **Baby born on Delta flight**
+   Passenger Ashley Blair went into labor on a packed Delta flight from Atlanta to Portland. Two off-duty EMTs on the plane delivered baby Brielle Renee just before landing — using a shoelace as a tourniquet for an IV. Mother and baby were healthy on arrival.
+
+5. **UK inquiry warns Aukus submarine plan at risk**
+   A detailed House of Commons defence committee report finds UK submarine funding has "cracks already beginning to show," with chronic under-investment in shipbuilding and only one submarine yard (Barrow-in-Furness) already behind schedule. Australia has committed A$4.6 billion to help, but the committee warns political drift could derail the entire program.
+<prompt>how many articles are there?</prompt>
+<reasoning>The user is asking about the number of articles. From my previous analysis, there are 10 posts in the magazine, but only 5 unique articles (the rest are duplicates). Let me answer based on what I already know.</reasoning>
+There are **10 posts** in the magazine, but only **5 unique articles** — each article appears twice (as duplicates from the two feeds).
+<prompt>say your name inside an xml tag</prompt>
+<name>Kai</name>

package/src/extensions/tags/typewriter.test.ts

@@ -0,0 +1,65 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { describe, test } from 'vitest';
+
+import { trim } from '@dxos/util';
+
+import { xmlElementLength } from './typewriter';
+
+describe('typewriter', () => {
+  test('xmlElementLength handles hyphenated custom element names', ({ expect }) => {
+    const inner = 'Hello';
+    const el = `<dom-widget>${inner}</dom-widget>`;
+    expect(xmlElementLength(el)).toBe(el.length);
+  });
+
+  test('xmlElementLength handle multi-line tags', ({ expect }) => {
+    const el = trim`
+      <summary>
+        Line 1
+
+        Line 2
+      </summary>
+    `;
+    expect(xmlElementLength(el)).toBe(el.length);
+  });
+
+  test('xmlElementLength handles simple tag names', ({ expect }) => {
+    const el = '<prompt>Hi</prompt>';
+    expect(xmlElementLength(el)).toBe(el.length);
+  });
+
+  test('xmlElementLength returns 0 until closing tag is complete', ({ expect }) => {
+    expect(xmlElementLength('<dom-widget>x')).toBe(0);
+  });
+
+  test('xmlElementLength handles tags with blank lines in content', ({ expect }) => {
+    const el = trim`
+      <reasoning>
+      The user is asking me to think deeply about what markdown is.
+
+      But given the context of our conversation - we've been trying to scrape slab data from a website - I think they might be hinting at something specific.
+      </reasoning>
+    `;
+    expect(xmlElementLength(el)).toBe(el.length);
+  });
+
+  test('xmlElementLength handles tags with multiple blank lines', ({ expect }) => {
+    const el = trim`
+      <reasoning>
+      First paragraph.
+
+
+      Second paragraph after two blank lines.
+      </reasoning>
+    `;
+    expect(xmlElementLength(el)).toBe(el.length);
+  });
+
+  test('xmlElementLength handles tags with only blank lines', ({ expect }) => {
+    const el = '<reasoning>\n\n\n</reasoning>';
+    expect(xmlElementLength(el)).toBe(el.length);
+  });
+});