@dxos/react-ui-markdown 0.10.0 → 0.11.0

package/dist/lib/index.mjs

@@ -0,0 +1,648 @@
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { ErrorBoundary, MediaPlayer, useDynamicRef, useStateWithRef, useThemeContext } from "@dxos/react-ui";
+import { SyntaxHighlighter } from "@dxos/react-ui-syntax-highlighter";
+import { mx } from "@dxos/ui-theme";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as Effect from "effect/Effect";
+import * as Stream from "effect/Stream";
+import { Obj } from "@dxos/echo";
+import { Decoration, EditorView, WidgetType } from "@codemirror/view";
+import * as Queue from "effect/Queue";
+import { addEventListener } from "@dxos/async";
+import { EffectEx } from "@dxos/effect";
+import { PROMPT_ELEMENT, crawlerLineEffect, createBasicExtensions, createThemeExtensions, createTurnSource, decorateMarkdown, documentSlots, extendedMarkdown, fader, lineSpacing, navigateNextEffect, navigatePreviousEffect, scroller, turnFolding, typewriter, typewriterBypass, typewriterDrainingEffect, xmlBlockDecoration, xmlFormatting, xmlTagContextEffect, xmlTagResetEffect, xmlTagUpdateEffect, xmlTags } from "@dxos/ui-editor";
+import { EditorSelection, StateEffect, StateField, Transaction } from "@codemirror/state";
+import * as Fiber from "effect/Fiber";
+import { createPortal } from "react-dom";
+import { useTextEditor } from "@dxos/react-ui-editor";
+import { isTruthy } from "@dxos/util";
+import { Domino } from "@dxos/ui";
+//#region src/MarkdownView/MarkdownView.tsx
+/**
+* Transforms markdown text into react elements.
+* https://github.com/remarkjs/react-markdown
+* markdown -> remark -> [mdast -> remark plugins] -> [hast -> rehype plugins] -> components -> react elements.
+* Consider using @dxos/react-ui-editor.
+*/
+var MarkdownView = ({ classNames, children, components, content = "" }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: mx(classNames),
+		children: [/* @__PURE__ */ jsx(ReactMarkdown, {
+			remarkPlugins: [remarkGfm],
+			skipHtml: true,
+			components: {
+				...defaultComponents,
+				...components
+			},
+			children: content
+		}), children]
+	});
+};
+var defaultComponents = {
+	h1: ({ children }) => {
+		return /* @__PURE__ */ jsx("h1", {
+			className: "pt-1 pb-1 text-accent-text text-xl",
+			children
+		});
+	},
+	h2: ({ children }) => {
+		return /* @__PURE__ */ jsx("h2", {
+			className: "pt-1 pb-1 text-accent-text text-lg",
+			children
+		});
+	},
+	h3: ({ children }) => {
+		return /* @__PURE__ */ jsx("h3", {
+			className: "pt-1 pb-1 text-accent-text text-base",
+			children
+		});
+	},
+	h4: ({ children }) => {
+		return /* @__PURE__ */ jsx("h4", {
+			className: "pt-1 pb-1 uppercase text-base",
+			children
+		});
+	},
+	blockquote: ({ children, ...props }) => /* @__PURE__ */ jsx("blockquote", {
+		className: "my-2 py-2 ps-4 border-l-4 border-accent-text text-accent-text",
+		...props,
+		children
+	}),
+	p: ({ children }) => {
+		return /* @__PURE__ */ jsx("div", {
+			className: "pt-1 pb-1",
+			children
+		});
+	},
+	a: ({ children, href, ...props }) => /* @__PURE__ */ jsx("a", {
+		href,
+		className: "text-primary-500 hover:text-primary-500",
+		target: "_blank",
+		rel: "noopener noreferrer",
+		...props,
+		children
+	}),
+	img: ({ src, alt }) => {
+		if (!src) return null;
+		return /* @__PURE__ */ jsx(MediaPlayer, {
+			src,
+			alt,
+			classNames: "w-full"
+		});
+	},
+	ol: ({ children, ...props }) => /* @__PURE__ */ jsx("ol", {
+		className: "pt-1 pb-1 ps-6 leading-tight list-decimal",
+		...props,
+		children
+	}),
+	ul: ({ children, ...props }) => /* @__PURE__ */ jsx("ul", {
+		className: "pt-1 pb-1 ps-6 leading-tight list-disc",
+		...props,
+		children
+	}),
+	li: ({ children, ...props }) => /* @__PURE__ */ jsx("li", {
+		className: "",
+		...props,
+		children
+	}),
+	pre: ({ children }) => children,
+	code: ({ children, className, node }) => {
+		const [, language] = /language-(\w+)/.exec(className || "") || [];
+		if (!className && node?.position?.start.line === node?.position?.end.line) return /* @__PURE__ */ jsx("code", {
+			className: "rounded-xs bg-group-surface px-1 py-0.5 text-sm text-info-text",
+			children
+		});
+		return /* @__PURE__ */ jsx(SyntaxHighlighter, {
+			language,
+			classNames: "mt-2 mb-2 p-2 border border-separator rounded-xs text-sm dx-group-surface",
+			copyButton: true,
+			PreTag: "pre",
+			children
+		});
+	}
+};
+//#endregion
+//#region src/MarkdownStream/stream.ts
+var renderObjectLink = (obj, block) => `${block ? "!" : ""}[${Obj.getLabel(obj)}](${Obj.getURI(obj)})`;
+/**
+* Streams tokens to the consumer, keeping XML/HTML fragments intact.
+*
+* The cadence is controlled by `options.chunkSize`. `'span'` (default) preserves the
+* one-token-per-source-chunk behaviour the function had originally. Use `'word'` or
+* `'character'` to decouple the visible cadence from the source's chunk size — useful when
+* the AI service emits large partial blocks but you want a smoother typewriter effect.
+*/
+var createStreamer = (source, { chunkSize = "span", delayMs = 0 } = {}) => {
+	const subdivide = chunkSize === "span" ? (token) => [token] : (token) => isXmlFragment(token) ? [token] : splitTextSpan(token, chunkSize);
+	let stream = source.pipe(Stream.flatMap((chunk) => Stream.fromIterable(splitFragments(chunk).flatMap(subdivide))));
+	if (delayMs > 0) stream = stream.pipe(Stream.tap(() => Effect.sleep(`${delayMs} millis`)));
+	return stream;
+};
+/** A token starts with `<` if and only if it is an XML/HTML fragment produced by `splitFragments`. */
+var isXmlFragment = (token) => token.startsWith("<");
+/**
+* Subdivide a non-XML text span into smaller tokens. `'word'` splits into runs of non-whitespace
+* and runs of whitespace as separate tokens (so the renderer can display whitespace cadence too).
+*/
+var splitTextSpan = (span, chunkSize) => {
+	if (chunkSize === "character") return [...span];
+	return span.match(/\s+|\S+/g) ?? [span];
+};
+/** Matches opening tag names, including custom elements with hyphens (e.g. dom-widget). */
+var OPENING_TAG_NAME = /^<([a-zA-Z][\w-]*)(?:\s[^>]*)?>/;
+/**
+* Splits text into chunks, preserving XML/HTML fragments.
+*/
+var splitFragments = (text) => {
+	const initialTokens = splitSpans(text);
+	const tokens = [];
+	let i = 0;
+	while (i < initialTokens.length) {
+		const token = initialTokens[i];
+		if (token.startsWith("<") && !token.startsWith("</") && !token.endsWith("/>")) {
+			const tagMatch = token.match(OPENING_TAG_NAME);
+			if (tagMatch) {
+				const closingTag = `</${tagMatch[1]}>`;
+				let fragment = token;
+				let foundClosing = false;
+				let j = i + 1;
+				while (j < initialTokens.length) {
+					fragment += initialTokens[j];
+					if (initialTokens[j] === closingTag) {
+						foundClosing = true;
+						break;
+					}
+					j++;
+				}
+				if (foundClosing) {
+					tokens.push(fragment);
+					i = j + 1;
+				} else {
+					tokens.push(token);
+					i++;
+				}
+			} else {
+				tokens.push(token);
+				i++;
+			}
+		} else {
+			tokens.push(token);
+			i++;
+		}
+	}
+	return tokens;
+};
+var splitSpans = (text) => {
+	const spans = [];
+	let currentText = "";
+	let i = 0;
+	while (i < text.length) if (text[i] === "<") {
+		if (currentText) {
+			spans.push(currentText);
+			currentText = "";
+		}
+		const closeIndex = text.indexOf(">", i);
+		if (closeIndex !== -1) {
+			spans.push(text.slice(i, closeIndex + 1));
+			i = closeIndex + 1;
+		} else {
+			currentText = text.slice(i);
+			break;
+		}
+	} else {
+		currentText += text[i];
+		i++;
+	}
+	if (currentText) spans.push(currentText);
+	return spans;
+};
+/**
+* Split text into sentences, preserving the sentence-ending punctuation.
+*/
+var splitSentences = (text) => {
+	const sentenceRegex = /[^.!?]*[.!?]+(?:\s+|$)/g;
+	const sentences = [];
+	let lastIndex = 0;
+	let match;
+	while ((match = sentenceRegex.exec(text)) !== null) {
+		sentences.push(match[0]);
+		lastIndex = match.index + match[0].length;
+	}
+	if (lastIndex < text.length) {
+		const remaining = text.slice(lastIndex);
+		if (remaining) sentences.push(remaining);
+	}
+	if (sentences.length === 0 && text) sentences.push(text);
+	return sentences;
+};
+//#endregion
+//#region src/MarkdownStream/testing/testing.ts
+/**
+* Simulates word-by-word streaming (more natural for LLMs).
+*/
+async function* textStream(text, options = {}) {
+	const { chunkDelay = 100, variance = .3, wordsPerChunk = 3 } = options;
+	const words = text.match(/\S+|\s+/g) || [];
+	let i = 0;
+	while (i < words.length) {
+		const chunkWords = [];
+		let wordCount = 0;
+		while (i < words.length && wordCount < wordsPerChunk) {
+			const word = words[i];
+			chunkWords.push(word);
+			if (word.trim()) wordCount++;
+			i++;
+		}
+		yield chunkWords.join("");
+		const delay = chunkDelay * (1 + (Math.random() - .5) * variance * 2);
+		await new Promise((resolve) => setTimeout(resolve, delay));
+	}
+}
+//#endregion
+//#region src/MarkdownStream/create-controller.ts
+/**
+* External controller API.
+*
+* @internal Exported for tests via `@dxos/react-ui-markdown/testing`; hosts get this through the
+* component's ref.
+*/
+var computeVisibleRange = (view) => {
+	const rect = view.scrollDOM.getBoundingClientRect();
+	return {
+		from: view.posAtCoords({
+			x: rect.left + 1,
+			y: rect.top + 1
+		}, false),
+		to: view.posAtCoords({
+			x: rect.left + 1,
+			y: rect.bottom - 1
+		}, false)
+	};
+};
+var createMarkdownStreamController = ({ contentRef, viewRef, queueRef, onReset, pendingContextRef }) => {
+	return {
+		get length() {
+			return viewRef.current?.state.doc.length;
+		},
+		/** Focus the editor. */
+		focus: () => {
+			viewRef.current?.focus();
+		},
+		/** Scroll to bottom. */
+		scrollToBottom: (behavior) => {
+			viewRef.current?.dispatch({ effects: crawlerLineEffect.of({
+				line: -1,
+				behavior
+			}) });
+		},
+		/** Scroll the given document position into view. */
+		scrollTo: (pos, options) => {
+			const view = viewRef.current;
+			if (!view) return;
+			const clamped = Math.max(0, Math.min(pos, view.state.doc.length));
+			view.dispatch({ effects: EditorView.scrollIntoView(clamped, { y: options?.y ?? "start" }) });
+		},
+		/** The document range currently visible in the viewport. */
+		getVisibleRange: () => {
+			const view = viewRef.current;
+			return view ? computeVisibleRange(view) : void 0;
+		},
+		/** Subscribe to visible-range changes (scroll). Fires immediately with the current range. */
+		onVisibleRangeChange: (cb) => {
+			const view = viewRef.current;
+			if (!view) return () => {};
+			const handler = () => cb(computeVisibleRange(view));
+			handler();
+			return addEventListener(view.scrollDOM, "scroll", handler, { passive: true });
+		},
+		/** Navigate previous prompt. */
+		navigatePrevious: () => {
+			viewRef.current?.dispatch({ effects: navigatePreviousEffect.of() });
+		},
+		/** Navigate next prompt. */
+		navigateNext: () => {
+			viewRef.current?.dispatch({ effects: navigateNextEffect.of() });
+		},
+		/**
+		* Set the context for widgets (XML tags).
+		*
+		* Remembered as well as dispatched: a host has no signal for when the view exists, and the
+		* dispatch is a no-op before it does — so without this a context set on mount is silently lost and
+		* every widget callback through it dies on an optional call. {@link flushContext} re-applies it.
+		*/
+		setContext: (context) => {
+			pendingContextRef.current = { value: context };
+			viewRef.current?.dispatch({ effects: xmlTagContextEffect.of(context) });
+		},
+		/** Re-applies the last context set, if any. Called once the view exists and after a reset. */
+		flushContext: () => {
+			const pending = pendingContextRef.current;
+			if (pending && viewRef.current) viewRef.current.dispatch({ effects: xmlTagContextEffect.of(pending.value) });
+		},
+		/** Reset document. */
+		setContent: onReset,
+		/** Append to queue (and stream). */
+		append: async (text) => {
+			contentRef.current += text;
+			if (text.length) {
+				const queue = queueRef.current;
+				if (queue) await EffectEx.runAndForwardErrors(Queue.offer(queue, text));
+			}
+		},
+		/** Update widget state. */
+		updateWidget: (id, value) => {
+			viewRef.current?.dispatch({ effects: xmlTagUpdateEffect.of({
+				id,
+				value
+			}) });
+		}
+	};
+};
+//#endregion
+//#region src/MarkdownStream/footer.ts
+/**
+* Host-controlled visibility intent. The footer block widget is rendered only when this is
+* `true` AND typewriter is not actively draining its typewriter buffer — the latter is observed
+* through {@link typewriterDrainingEffect}. Removing the decoration during a drip avoids the
+* scroll-measure conflict between CM's view-line model and the floating absolute child.
+*/
+var setFooterVisibleEffect = StateEffect.define();
+/**
+* Renders a host-supplied React subtree as a CodeMirror block widget anchored at
+* `doc.length`. The widget lives inside the document, so it scrolls with content.
+*
+* Toggle the host-intent visibility via {@link setFooterVisibleEffect}. The widget is also
+* automatically removed while {@link typewriterDrainingEffect} reports `true` and re-mounted
+* once the typewriter's buffer drains — this prevents the block widget from interfering with CM's
+* view-line measurement during the typewriter drip.
+*
+* For pure doc edits (no visibility transition), the decoration's position is mapped
+* through the change set so insertions at the end translate the anchor without destroying
+* the widget's DOM.
+*/
+var footer = (setRoot) => {
+	const widget = new FooterWidget(setRoot);
+	const buildSet = (length) => Decoration.set([Decoration.widget({
+		widget,
+		block: true,
+		side: 1
+	}).range(length)]);
+	return [StateField.define({
+		create: () => ({
+			wanted: false,
+			draining: false,
+			decorations: Decoration.none
+		}),
+		update: (state, tr) => {
+			let { wanted, draining, decorations } = state;
+			for (const effect of tr.effects) {
+				if (effect.is(setFooterVisibleEffect)) wanted = effect.value;
+				if (effect.is(typewriterDrainingEffect)) draining = effect.value;
+			}
+			const docLength = tr.state.doc.length;
+			const visible = wanted && !draining && docLength > 0;
+			if (visible !== decorations.size > 0) decorations = visible ? buildSet(docLength) : Decoration.none;
+			else if (tr.docChanged && decorations.size > 0) decorations = decorations.map(tr.changes);
+			return {
+				wanted,
+				draining,
+				decorations
+			};
+		},
+		provide: (f) => EditorView.decorations.from(f, (state) => state.decorations)
+	})];
+};
+/**
+* Block widget rendered at the end of the document. The DOM element is reported via
+* `setRoot` so the host React component can `createPortal` arbitrary content into it.
+*/
+var FooterWidget = class extends WidgetType {
+	_setRoot;
+	constructor(_setRoot) {
+		super();
+		this._setRoot = _setRoot;
+	}
+	eq(_other) {
+		return true;
+	}
+	ignoreEvent() {
+		return true;
+	}
+	toDOM() {
+		const inner = Domino.of("div").classNames("cm-stream-footer-content").style({
+			position: "absolute",
+			left: "0",
+			top: "0"
+		});
+		const el = Domino.of("div").classNames("cm-stream-footer").style({
+			position: "relative",
+			height: "0"
+		}).append(inner);
+		this._setRoot(inner.root);
+		return el.root;
+	}
+	destroy() {
+		this._setRoot(null);
+	}
+};
+//#endregion
+//#region src/MarkdownStream/MarkdownStream.tsx
+/**
+* Codemirror-based markdown editor with xml tag widtgets and streaming support.
+*/
+var MarkdownStream = forwardRef(({ classNames, debug, content, options, registry, extensions, footer, slots, onEvent }, forwardedRef) => {
+	const contentRef = useRef(content ?? "");
+	const [footerRoot, setFooterRoot] = useState(null);
+	const pendingContextRef = useRef(void 0);
+	const { parentRef, view, viewRef, widgets } = useMarkdownStreamTextEditor(contentRef, {
+		slots,
+		debug,
+		registry,
+		options,
+		extensions,
+		setFooterRoot: footer ? setFooterRoot : void 0
+	});
+	const footerVisible = !!footer;
+	useEffect(() => {
+		view?.dispatch({ effects: setFooterVisibleEffect.of(footerVisible) });
+	}, [view, footerVisible]);
+	const [queue, setQueue, queueRef] = useStateWithRef(Effect.runSync(Queue.unbounded()));
+	const onReset = useCallback(async (text) => {
+		contentRef.current = text;
+		if (!viewRef.current) return;
+		viewRef.current.dispatch({
+			effects: [xmlTagContextEffect.of(pendingContextRef.current?.value ?? null), xmlTagResetEffect.of(null)],
+			changes: [{
+				from: 0,
+				to: viewRef.current.state.doc.length,
+				insert: text
+			}],
+			annotations: typewriterBypass.of(true),
+			selection: EditorSelection.cursor(text.length)
+		});
+		setQueue(Effect.runSync(Queue.unbounded()));
+	}, [
+		contentRef,
+		viewRef,
+		setQueue,
+		pendingContextRef
+	]);
+	useImperativeHandle(forwardedRef, () => createMarkdownStreamController({
+		contentRef,
+		viewRef,
+		queueRef,
+		onReset,
+		pendingContextRef
+	}), [onReset]);
+	useEffect(() => {
+		const pending = pendingContextRef.current;
+		if (view && pending) view.dispatch({ effects: xmlTagContextEffect.of(pending.value) });
+	}, [view]);
+	useEffect(() => {
+		if (!parentRef.current) return;
+		return addEventListener(parentRef.current, "click", (event) => {
+			const button = event.target.closest("[data-action=\"submit\"]");
+			if (button?.getAttribute("data-action") === "submit") onEvent?.({
+				type: "submit",
+				value: button.getAttribute("data-value")
+			});
+		});
+	}, [
+		view,
+		parentRef,
+		onEvent
+	]);
+	useMarkdownStreamQueue(view, queue, {
+		chunkSize: options?.streamCadence,
+		delayMs: options?.streamDelayMs
+	});
+	useEffect(() => {
+		return () => {
+			view?.destroy();
+		};
+	}, [view]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		className: mx("dx-container", classNames),
+		ref: parentRef
+	}), /* @__PURE__ */ jsxs(ErrorBoundary, {
+		name: "markdown-stream",
+		children: [widgets.map(({ Component, root, id, props }) => /* @__PURE__ */ jsx("div", { children: createPortal(/* @__PURE__ */ jsx(Component, {
+			view,
+			...props
+		}), root) }, id)), footerRoot && footerVisible && createPortal(footer, footerRoot)]
+	})] });
+});
+var turnSource = createTurnSource(PROMPT_ELEMENT);
+/**
+* Read-only markdown editor configured for streaming (theme, markdown extensions, XML widgets).
+*/
+var useMarkdownStreamTextEditor = (currentContent, { debug, registry, options, extensions: extensionsProp, slots = documentSlots, setFooterRoot }) => {
+	const { themeMode } = useThemeContext();
+	const [widgets, setWidgets] = useState([]);
+	const { view, parentRef } = useTextEditor(() => {
+		const content = currentContent.current;
+		return {
+			initialValue: content,
+			selection: EditorSelection.cursor(content?.length ?? 0),
+			extensions: [
+				createBasicExtensions({
+					lineWrapping: true,
+					readOnly: true
+				}),
+				createThemeExtensions({
+					slots,
+					scrollbarThin: true,
+					syntaxHighlighting: true,
+					themeMode
+				}),
+				xmlFormatting({ skip: debug ? [] : ["prompt"] }),
+				!debug && [
+					extendedMarkdown({ registry }),
+					decorateMarkdown({ skip: (node) => (node.name === "Link" || node.name === "Image") && (node.url.startsWith("dxn:") || node.url.startsWith("echo:")) }),
+					lineSpacing(),
+					xmlBlockDecoration({
+						tag: "prompt",
+						lineClass: "cm-prompt-line cm-prompt-bubble bg-group-surface text-base-fg border-l-[8px] pl-[8px]! pr-2 [&_*]:text-inherit!",
+						firstLineClass: "pt-1.5 rounded-t-sm",
+						lastLineClass: "pb-1.5 rounded-b-sm",
+						hideTags: true
+					}),
+					xmlTags({
+						registry,
+						setWidgets,
+						bookmarks: ["prompt"]
+					}),
+					turnFolding({ source: turnSource }),
+					scroller({
+						overScroll: 80,
+						autoScroll: options?.autoScroll
+					}),
+					options?.typewriter && typewriter({
+						cursor: options?.cursor,
+						streamingTags: new Set(Object.entries(registry ?? {}).filter(([, def]) => def.streaming).map(([tag]) => tag))
+					}),
+					options?.fader && fader(),
+					setFooterRoot && footer(setFooterRoot)
+				].filter(isTruthy),
+				extensionsProp
+			].filter(isTruthy)
+		};
+	}, [
+		themeMode,
+		registry,
+		debug,
+		options?.autoScroll,
+		options?.typewriter,
+		options?.cursor,
+		options?.fader,
+		slots,
+		extensionsProp
+	]);
+	return {
+		view,
+		viewRef: useDynamicRef(view),
+		parentRef,
+		widgets
+	};
+};
+/**
+* Consumes streaming text from the queue and appends it to the editor document.
+*/
+var useMarkdownStreamQueue = (view, queue, streamerOptions) => {
+	const chunkSize = streamerOptions?.chunkSize;
+	const delayMs = streamerOptions?.delayMs;
+	useEffect(() => {
+		if (!view) return;
+		const fork = Stream.fromQueue(queue).pipe((source) => createStreamer(source, {
+			chunkSize,
+			delayMs
+		}), Stream.runForEach((text) => Effect.sync(() => {
+			const scrollTop = view.scrollDOM.scrollTop;
+			view.dispatch({
+				changes: [{
+					from: view.state.doc.length,
+					insert: text
+				}],
+				annotations: Transaction.remote.of(true),
+				scrollIntoView: false
+			});
+			requestAnimationFrame(() => {
+				view.scrollDOM.scrollTop = scrollTop;
+			});
+		})), Effect.runFork);
+		return () => {
+			EffectEx.runAndForwardErrors(Fiber.interrupt(fork));
+		};
+	}, [
+		view,
+		queue,
+		chunkSize,
+		delayMs
+	]);
+};
+//#endregion
+export { MarkdownStream, MarkdownView, computeVisibleRange, createMarkdownStreamController, createStreamer, renderObjectLink, splitFragments, splitSentences, splitSpans, textStream };
+
+//# sourceMappingURL=index.mjs.map