@dxos/react-ui-markdown 0.8.4-main.74a063c4e0 → 0.8.4-main.765dc60934

package/dist/lib/browser/index.mjs

@@ -1,13 +1,53 @@
-// src/MarkdownViewer/MarkdownViewer.tsx
-import React from "react";
+// src/MarkdownView/MarkdownView.tsx
+import React2 from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { SyntaxHighlighter } from "@dxos/react-ui-syntax-highlighter";
+import { mx as mx2 } from "@dxos/ui-theme";
+
+// src/MarkdownView/Media.tsx
+import React from "react";
+import { MediaPlayer, detectMediaKind } from "@dxos/react-ui";
 import { mx } from "@dxos/ui-theme";
-var MarkdownViewer = ({ classNames, children, components, content = "" }) => {
-  return /* @__PURE__ */ React.createElement("div", {
-    className: mx(classNames)
-  }, /* @__PURE__ */ React.createElement(ReactMarkdown, {
+var isEmbedUrl = (src) => detectMediaKind(src) !== void 0;
+var isLegacyIframeUrl = (src) => src.includes("iframe");
+var DEFAULT_IFRAME_SANDBOX = "allow-scripts allow-same-origin allow-presentation";
+var MarkdownMedia = ({ src, alt, classNames, imgClassNames, mediaClassNames }) => {
+  if (isEmbedUrl(src)) {
+    return /* @__PURE__ */ React.createElement(MediaPlayer, {
+      src,
+      alt,
+      classNames: mx(classNames, mediaClassNames)
+    });
+  }
+  if (isLegacyIframeUrl(src)) {
+    return /* @__PURE__ */ React.createElement("iframe", {
+      src,
+      title: alt ?? "Embedded media",
+      loading: "lazy",
+      className: mx("border-none", classNames, mediaClassNames),
+      sandbox: DEFAULT_IFRAME_SANDBOX,
+      referrerPolicy: "no-referrer",
+      allow: "accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;",
+      allowFullScreen: true
+    });
+  }
+  return /* @__PURE__ */ React.createElement("img", {
+    src,
+    alt: alt ?? "",
+    loading: "lazy",
+    className: mx(classNames, imgClassNames),
+    onError: (event) => {
+      event.currentTarget.style.display = "none";
+    }
+  });
+};
+
+// src/MarkdownView/MarkdownView.tsx
+var MarkdownView = ({ classNames, children, components, content = "" }) => {
+  return /* @__PURE__ */ React2.createElement("div", {
+    className: mx2(classNames)
+  }, /* @__PURE__ */ React2.createElement(ReactMarkdown, {
     remarkPlugins: [
       remarkGfm
     ],
@@ -20,60 +60,613 @@ var MarkdownViewer = ({ classNames, children, components, content = "" }) => {
 };
 var defaultComponents = {
   h1: ({ children }) => {
-    return /* @__PURE__ */ React.createElement("h1", {
-      className: "pt-1 pb-1 text-xl"
+    return /* @__PURE__ */ React2.createElement("h1", {
+      className: "pt-1 pb-1 text-accent-text text-xl"
     }, children);
   },
   h2: ({ children }) => {
-    return /* @__PURE__ */ React.createElement("h2", {
-      className: "pt-1 pb-1 text-lg"
+    return /* @__PURE__ */ React2.createElement("h2", {
+      className: "pt-1 pb-1 text-accent-text text-lg"
     }, children);
   },
   h3: ({ children }) => {
-    return /* @__PURE__ */ React.createElement("h3", {
-      className: "pt-1 pb-1 text-base"
+    return /* @__PURE__ */ React2.createElement("h3", {
+      className: "pt-1 pb-1 text-accent-text text-base"
     }, children);
   },
-  blockquote: ({ children, ...props }) => /* @__PURE__ */ React.createElement("blockquote", {
-    className: "ps-4 mt-2 mb-2 pt-2 pb-2 border-l-4 border-accent-text text-accent-text",
+  h4: ({ children }) => {
+    return /* @__PURE__ */ React2.createElement("h4", {
+      className: "pt-1 pb-1 uppercase text-base"
+    }, children);
+  },
+  blockquote: ({ children, ...props }) => /* @__PURE__ */ React2.createElement("blockquote", {
+    className: "my-2 py-2 ps-4 border-l-4 border-accent-text text-accent-text",
     ...props
   }, children),
   p: ({ children }) => {
-    return /* @__PURE__ */ React.createElement("div", {
+    return /* @__PURE__ */ React2.createElement("div", {
       className: "pt-1 pb-1"
     }, children);
   },
-  a: ({ children, href, ...props }) => /* @__PURE__ */ React.createElement("a", {
+  a: ({ children, href, ...props }) => /* @__PURE__ */ React2.createElement("a", {
     href,
     className: "text-primary-500 hover:text-primary-500",
     target: "_blank",
     rel: "noopener noreferrer",
     ...props
   }, children),
-  ol: ({ children, ...props }) => /* @__PURE__ */ React.createElement("ol", {
+  // Hide broken images: many markdown sources reference remote URLs that
+  // 404 or are blocked. Drop the element on load failure rather than
+  // leaving the browser's broken-image placeholder.
+  //
+  // Media URLs (mp4/mp3/etc. or legacy `iframe`-style embeds) are swapped to a
+  // native `<video>` / `<audio>` `MediaPlayer` by {@link MarkdownMedia} so
+  // playable media in the source document renders inline.
+  img: ({ src, alt }) => {
+    if (!src) {
+      return null;
+    }
+    return /* @__PURE__ */ React2.createElement(MarkdownMedia, {
+      src,
+      alt,
+      mediaClassNames: "aspect-video w-full"
+    });
+  },
+  ol: ({ children, ...props }) => /* @__PURE__ */ React2.createElement("ol", {
     className: "pt-1 pb-1 ps-6 leading-tight list-decimal",
     ...props
   }, children),
-  ul: ({ children, ...props }) => /* @__PURE__ */ React.createElement("ul", {
+  ul: ({ children, ...props }) => /* @__PURE__ */ React2.createElement("ul", {
     className: "pt-1 pb-1 ps-6 leading-tight list-disc",
     ...props
   }, children),
-  li: ({ children, ...props }) => /* @__PURE__ */ React.createElement("li", {
+  li: ({ children, ...props }) => /* @__PURE__ */ React2.createElement("li", {
     className: "",
     ...props
   }, children),
   pre: ({ children }) => children,
-  // TODO(burdon): Copy/paste button.
-  code: ({ children, className }) => {
+  code: ({ children, className, node }) => {
     const [, language] = /language-(\w+)/.exec(className || "") || [];
-    return /* @__PURE__ */ React.createElement(SyntaxHighlighter, {
+    const inline = !className && node?.position?.start.line === node?.position?.end.line;
+    if (inline) {
+      return /* @__PURE__ */ React2.createElement("code", {
+        className: "rounded-xs bg-group-surface px-1 py-0.5 text-sm text-info-text"
+      }, children);
+    }
+    return /* @__PURE__ */ React2.createElement(SyntaxHighlighter, {
       language,
-      classNames: "mt-2 mb-2 border border-separator rounded-xs text-sm bg-group-surface",
+      classNames: "mt-2 mb-2 p-2 border border-separator rounded-xs text-sm bg-group-surface",
+      copyButton: true,
       PreTag: "pre"
     }, children);
   }
 };
+
+// src/MarkdownStream/stream.ts
+import * as Effect from "effect/Effect";
+import * as Stream from "effect/Stream";
+import { Obj } from "@dxos/echo";
+var renderObjectLink = (obj, block) => `${block ? "!" : ""}[${Obj.getLabel(obj)}](${Obj.getDXN(obj).toString()})`;
+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;
+};
+var isXmlFragment = (token) => token.startsWith("<");
+var splitTextSpan = (span, chunkSize) => {
+  if (chunkSize === "character") {
+    return [
+      ...span
+    ];
+  }
+  return span.match(/\s+|\S+/g) ?? [
+    span
+  ];
+};
+var OPENING_TAG_NAME = /^<([a-zA-Z][\w-]*)(?:\s[^>]*)?>/;
+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 tagName = tagMatch[1];
+        const closingTag = `</${tagName}>`;
+        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;
+};
+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;
+};
+
+// src/MarkdownStream/testing/testing.ts
+async function* textStream(text, options = {}) {
+  const { chunkDelay = 100, variance = 0.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++;
+    }
+    const chunk = chunkWords.join("");
+    yield chunk;
+    const varianceMultiplier = 1 + (Math.random() - 0.5) * variance * 2;
+    const delay = chunkDelay * varianceMultiplier;
+    await new Promise((resolve) => setTimeout(resolve, delay));
+  }
+}
+
+// src/MarkdownStream/MarkdownStream.tsx
+import { EditorSelection, Transaction } from "@codemirror/state";
+import * as Effect2 from "effect/Effect";
+import * as Fiber from "effect/Fiber";
+import * as Queue from "effect/Queue";
+import * as Stream2 from "effect/Stream";
+import React3, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { addEventListener } from "@dxos/async";
+import { runAndForwardErrors } from "@dxos/effect";
+import { ErrorBoundary, useDynamicRef, useStateWithRef, useThemeContext } from "@dxos/react-ui";
+import { useTextEditor } from "@dxos/react-ui-editor";
+import { createBasicExtensions, createThemeExtensions, decorateMarkdown, extendedMarkdown, navigateNextEffect, navigatePreviousEffect, preview, scroller, crawlerLineEffect, fader, typewriter, typewriterBypass, xmlTagContextEffect, xmlTagResetEffect, xmlTagUpdateEffect, xmlTags, documentSlots, xmlFormatting, xmlBlockDecoration } from "@dxos/ui-editor";
+import { mx as mx3 } from "@dxos/ui-theme";
+import { isTruthy } from "@dxos/util";
+
+// src/MarkdownStream/footer.ts
+import { StateEffect, StateField } from "@codemirror/state";
+import { Decoration, EditorView, WidgetType } from "@codemirror/view";
+import { Domino } from "@dxos/ui";
+import { typewriterDrainingEffect } from "@dxos/ui-editor";
+var setFooterVisibleEffect = StateEffect.define();
+var footer = (setRoot) => {
+  const widget = new FooterWidget(setRoot);
+  const buildSet = (length) => Decoration.set([
+    Decoration.widget({
+      widget,
+      block: true,
+      side: 1
+    }).range(length)
+  ]);
+  const field = 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;
+      const wasVisible = decorations.size > 0;
+      if (visible !== wasVisible) {
+        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)
+  });
+  return [
+    field
+  ];
+};
+var FooterWidget = class extends WidgetType {
+  _setRoot;
+  constructor(_setRoot) {
+    super(), this._setRoot = _setRoot;
+  }
+  // Singleton equality so CM keeps the same DOM element across decoration rebuilds —
+  // the React subtree portaled into it is not unmounted on every doc change.
+  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);
+  }
+};
+
+// src/MarkdownStream/MarkdownStream.tsx
+var MarkdownStream = /* @__PURE__ */ forwardRef(({ classNames, debug, content, options, registry, extensions, footer: footer2, onEvent }, forwardedRef) => {
+  const contentRef = useRef(content ?? "");
+  const [footerRoot, setFooterRoot] = useState(null);
+  const { parentRef, view, viewRef, widgets } = useMarkdownStreamTextEditor(contentRef, {
+    debug,
+    registry,
+    options,
+    extensions,
+    setFooterRoot: footer2 ? setFooterRoot : void 0
+  });
+  const footerVisible = !!footer2;
+  useEffect(() => {
+    view?.dispatch({
+      effects: setFooterVisibleEffect.of(footerVisible)
+    });
+  }, [
+    view,
+    footerVisible
+  ]);
+  const [queue, setQueue, queueRef] = useStateWithRef(Effect2.runSync(Queue.unbounded()));
+  const onReset = useCallback(async (text) => {
+    contentRef.current = text;
+    if (!viewRef.current) {
+      return;
+    }
+    viewRef.current.dispatch({
+      effects: [
+        xmlTagContextEffect.of(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(Effect2.runSync(Queue.unbounded()));
+  }, [
+    contentRef,
+    viewRef,
+    setQueue
+  ]);
+  useImperativeHandle(forwardedRef, () => createMarkdownStreamController({
+    contentRef,
+    viewRef,
+    queueRef,
+    onReset
+  }), [
+    onReset
+  ]);
+  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__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("div", {
+    className: mx3("dx-container", classNames),
+    ref: parentRef
+  }), /* @__PURE__ */ React3.createElement(ErrorBoundary, {
+    name: "markdown-stream"
+  }, widgets.map(({ Component, root, id, props }) => /* @__PURE__ */ React3.createElement("div", {
+    key: id
+  }, /* @__PURE__ */ createPortal(/* @__PURE__ */ React3.createElement(Component, {
+    view,
+    ...props
+  }), root))), footerRoot && footerVisible && /* @__PURE__ */ createPortal(footer2, footerRoot)));
+});
+var useMarkdownStreamTextEditor = (currentContent, { debug, registry, options, extensions: extraExtensions, 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: documentSlots,
+          scrollbarThin: true,
+          syntaxHighlighting: true,
+          themeMode
+        }),
+        xmlFormatting({
+          skip: debug ? [] : [
+            "prompt"
+          ]
+        }),
+        !debug && [
+          extendedMarkdown({
+            registry
+          }),
+          decorateMarkdown({
+            // `dxn:` links/images are reference widgets owned by `preview()` (PreviewInlineWidget /
+            // PreviewBlockWidget). Skipping them here avoids `decorateMarkdown` adding a
+            // non-functional `LinkButton` anchor on top of the same node — e.g. for
+            // `[DXOS](dxn:echo:BNPMIBEDJLRIILYUYZVM6GT64VWI6WPPZ:01KQ889PZBRNHAEECV0ANFAYX7)`.
+            skip: (node) => (node.name === "Link" || node.name === "Image") && node.url.startsWith("dxn:")
+          }),
+          preview(),
+          // NOTE: An ancestor element must set `data-hue` so `.dx-panel` resolves to the user's
+          // hue tokens (see `packages/ui/ui-theme/src/css/components/panel.css`). Tailwind picks
+          // up these utility classes from this source file.
+          xmlBlockDecoration({
+            tag: "prompt",
+            lineClass: "cm-prompt-line my-8",
+            contentClass: "cm-prompt-bubble dx-panel px-2 py-1.5 rounded-sm [&_*]:text-inherit!",
+            hideTags: true
+          }),
+          xmlTags({
+            registry,
+            setWidgets,
+            bookmarks: [
+              "prompt"
+            ]
+          }),
+          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),
+        extraExtensions
+      ].filter(isTruthy)
+    };
+  }, [
+    themeMode,
+    registry,
+    debug,
+    options?.autoScroll,
+    options?.typewriter,
+    options?.cursor,
+    options?.fader,
+    extraExtensions
+  ]);
+  const viewRef = useDynamicRef(view);
+  return {
+    view,
+    viewRef,
+    parentRef,
+    widgets
+  };
+};
+var useMarkdownStreamQueue = (view, queue, streamerOptions) => {
+  const chunkSize = streamerOptions?.chunkSize;
+  const delayMs = streamerOptions?.delayMs;
+  useEffect(() => {
+    if (!view) {
+      return;
+    }
+    const fork = Stream2.fromQueue(queue).pipe((source) => createStreamer(source, {
+      chunkSize,
+      delayMs
+    }), Stream2.runForEach((text) => Effect2.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;
+      });
+    })), Effect2.runFork);
+    return () => {
+      void runAndForwardErrors(Fiber.interrupt(fork));
+    };
+  }, [
+    view,
+    queue,
+    chunkSize,
+    delayMs
+  ]);
+};
+var createMarkdownStreamController = ({ contentRef, viewRef, queueRef, onReset }) => {
+  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
+        })
+      });
+    },
+    /** 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). */
+    setContext: (context) => {
+      viewRef.current?.dispatch({
+        effects: xmlTagContextEffect.of(context)
+      });
+    },
+    /** 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 runAndForwardErrors(Queue.offer(queue, text));
+        }
+      }
+    },
+    /** Update widget state. */
+    updateWidget: (id, value) => {
+      viewRef.current?.dispatch({
+        effects: xmlTagUpdateEffect.of({
+          id,
+          value
+        })
+      });
+    }
+  };
+};
 export {
-  MarkdownViewer
+  MarkdownMedia,
+  MarkdownStream,
+  MarkdownView,
+  createStreamer,
+  isEmbedUrl,
+  renderObjectLink,
+  splitFragments,
+  splitSentences,
+  splitSpans,
+  textStream
 };
 //# sourceMappingURL=index.mjs.map