@dxos/react-ui-markdown 0.8.4-main.03d5cd7b56

package/LICENSE

@@ -0,0 +1,8 @@
+MIT License 
+Copyright (c) 2022 DXOS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# @dxos/react-ui-components

package/dist/lib/browser/index.mjs

@@ -0,0 +1,608 @@
+// src/MarkdownBlock/MarkdownBlock.tsx
+import React from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { SyntaxHighlighter } from "@dxos/react-ui-syntax-highlighter";
+import { mx } from "@dxos/ui-theme";
+var MarkdownBlock = ({ classNames, children, components, content = "" }) => {
+  return /* @__PURE__ */ React.createElement("div", {
+    className: mx(classNames)
+  }, /* @__PURE__ */ React.createElement(ReactMarkdown, {
+    remarkPlugins: [
+      remarkGfm
+    ],
+    skipHtml: true,
+    components: {
+      ...defaultComponents,
+      ...components
+    }
+  }, content), children);
+};
+var defaultComponents = {
+  h1: ({ children }) => {
+    return /* @__PURE__ */ React.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-accent-text text-lg"
+    }, children);
+  },
+  h3: ({ children }) => {
+    return /* @__PURE__ */ React.createElement("h3", {
+      className: "pt-1 pb-1 text-accent-text text-base"
+    }, children);
+  },
+  blockquote: ({ children, ...props }) => /* @__PURE__ */ React.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", {
+      className: "pt-1 pb-1"
+    }, children);
+  },
+  a: ({ children, href, ...props }) => /* @__PURE__ */ React.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", {
+    className: "pt-1 pb-1 ps-6 leading-tight list-decimal",
+    ...props
+  }, children),
+  ul: ({ children, ...props }) => /* @__PURE__ */ React.createElement("ul", {
+    className: "pt-1 pb-1 ps-6 leading-tight list-disc",
+    ...props
+  }, children),
+  li: ({ children, ...props }) => /* @__PURE__ */ React.createElement("li", {
+    className: "",
+    ...props
+  }, children),
+  pre: ({ children }) => children,
+  code: ({ children, className, node }) => {
+    const [, language] = /language-(\w+)/.exec(className || "") || [];
+    const inline = !className && node?.position?.start.line === node?.position?.end.line;
+    if (inline) {
+      return /* @__PURE__ */ React.createElement("code", {
+        className: "rounded-xs bg-group-surface px-1 py-0.5 text-sm text-info-text"
+      }, children);
+    }
+    return /* @__PURE__ */ React.createElement(SyntaxHighlighter, {
+      language,
+      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 React2, { 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, scrollerLineEffect, fader, typewriter, typewriterBypass, xmlTagContextEffect, xmlTagResetEffect, xmlTagUpdateEffect, xmlTags, autoScroll, documentSlots, xmlFormatting, xmlBlockDecoration } from "@dxos/ui-editor";
+import { mx as mx2 } 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__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("div", {
+    className: mx2("dx-container", classNames),
+    ref: parentRef
+  }), /* @__PURE__ */ React2.createElement(ErrorBoundary, {
+    name: "markdown-stream"
+  }, widgets.map(({ Component, root, id, props }) => /* @__PURE__ */ React2.createElement("div", {
+    key: id
+  }, /* @__PURE__ */ createPortal(/* @__PURE__ */ React2.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
+          }),
+          options?.autoScroll && 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: scrollerLineEffect.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 {
+  MarkdownBlock,
+  MarkdownStream,
+  createStreamer,
+  renderObjectLink,
+  splitFragments,
+  splitSentences,
+  splitSpans,
+  textStream
+};
+//# sourceMappingURL=index.mjs.map