@liveblocks/react-ui 3.1.4 → 3.2.0

package/dist/primitives/Markdown.js

@@ -1,10 +1,37 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { sanitizeUrl } from '@liveblocks/core';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { assertNever, sanitizeUrl } from '@liveblocks/core';
 import { Slot } from '@radix-ui/react-slot';
 import { Lexer } from 'marked';
 import { forwardRef, useMemo, memo } from 'react';
 
 const defaultComponents = {
+  Paragraph: ({ children }) => {
+    return /* @__PURE__ */ jsx("p", {
+      children
+    });
+  },
+  Inline: ({ type, children }) => {
+    switch (type) {
+      case "strong":
+        return /* @__PURE__ */ jsx("strong", {
+          children
+        });
+      case "em":
+        return /* @__PURE__ */ jsx("em", {
+          children
+        });
+      case "code":
+        return /* @__PURE__ */ jsx("code", {
+          children
+        });
+      case "del":
+        return /* @__PURE__ */ jsx("del", {
+          children
+        });
+      default:
+        assertNever(type, "Unknown inline type");
+    }
+  },
   CodeBlock: ({ language, code }) => {
     return /* @__PURE__ */ jsx("pre", {
       "data-language": language ?? void 0,
@@ -39,6 +66,57 @@ const defaultComponents = {
     return /* @__PURE__ */ jsx("blockquote", {
       children
     });
+  },
+  Table: ({ headings, rows }) => {
+    return /* @__PURE__ */ jsxs("table", {
+      children: [
+        /* @__PURE__ */ jsx("thead", {
+          children: /* @__PURE__ */ jsx("tr", {
+            children: headings.map((heading, index) => {
+              return /* @__PURE__ */ jsx("th", {
+                align: heading.align,
+                children: heading.children
+              }, index);
+            })
+          })
+        }),
+        /* @__PURE__ */ jsx("tbody", {
+          children: rows.map((row, index) => {
+            return /* @__PURE__ */ jsx("tr", {
+              children: row.map((cell, index2) => {
+                return /* @__PURE__ */ jsx("td", {
+                  align: cell.align,
+                  children: cell.children
+                }, index2);
+              })
+            }, index);
+          })
+        })
+      ]
+    });
+  },
+  List: ({ type, items }) => {
+    const List = type === "ordered" ? "ol" : "ul";
+    return /* @__PURE__ */ jsx(List, {
+      children: items.map((item, index) => /* @__PURE__ */ jsxs("li", {
+        children: [
+          item.checked !== void 0 && /* @__PURE__ */ jsxs(Fragment, {
+            children: [
+              /* @__PURE__ */ jsx("input", {
+                type: "checkbox",
+                disabled: true,
+                checked: item.checked
+              }),
+              " "
+            ]
+          }),
+          item.children
+        ]
+      }, index))
+    });
+  },
+  Separator: () => {
+    return /* @__PURE__ */ jsx("hr", {});
   }
 };
 const Markdown = forwardRef(
@@ -51,7 +129,7 @@ const Markdown = forwardRef(
       ...props,
       ref: forwardedRef,
       children: tokens.map((token, index) => {
-        return /* @__PURE__ */ jsx(MemoizedMarkdownBlockToken, {
+        return /* @__PURE__ */ jsx(MemoizedMarkdownToken, {
           token,
           components
         }, index);
@@ -59,382 +137,190 @@ const Markdown = forwardRef(
     });
   }
 );
-const MemoizedMarkdownBlockToken = memo(
+const MemoizedMarkdownToken = memo(
   ({
     token,
     components
   }) => {
-    return /* @__PURE__ */ jsx(MarkdownBlockToken, {
+    return /* @__PURE__ */ jsx(MarkdownToken, {
       token,
       components
     });
   },
-  (prevProps, nextProps) => {
-    const prevToken = prevProps.token;
+  (previousProps, nextProps) => {
+    const previousToken = previousProps.token;
     const nextToken = nextProps.token;
-    if (prevToken.raw.length !== nextToken.raw.length) {
+    if (previousToken.raw.length !== nextToken.raw.length) {
       return false;
     }
-    if (prevToken.type !== nextToken.type) {
+    if (previousToken.type !== nextToken.type) {
       return false;
     }
-    return prevToken.raw === nextToken.raw;
+    return previousToken.raw === nextToken.raw;
   }
 );
-function MarkdownBlockToken({
+function MarkdownToken({
   token,
   components
 }) {
+  if (!isMarkedToken(token)) {
+    return null;
+  }
   switch (token.type) {
+    case "escape": {
+      return token.text;
+    }
     case "space": {
       return null;
     }
-    case "code": {
-      let language = void 0;
-      if (token.lang !== void 0) {
-        language = token.lang.match(/^\S*/)?.[0] ?? void 0;
+    case "text": {
+      if (token.tokens !== void 0) {
+        return /* @__PURE__ */ jsx(MarkdownTokens, {
+          tokens: token.tokens,
+          components
+        });
+      } else {
+        return parseHtmlEntities(token.text);
       }
-      const CodeBlock = components?.CodeBlock ?? defaultComponents.CodeBlock;
-      return /* @__PURE__ */ jsx(CodeBlock, {
-        language,
-        code: token.text
-      });
     }
-    case "blockquote": {
-      const tokens = [];
-      for (let i = 0; i < token.tokens.length; i++) {
-        switch (token.tokens[i].type) {
-          case "space":
-          case "code":
-          case "blockquote":
-          case "html":
-          case "heading":
-          case "hr":
-          case "list":
-          case "paragraph":
-          case "table": {
-            tokens.push(token.tokens[i]);
-            break;
-          }
-          case "text": {
-            const texts = [token.tokens[i]];
-            while (i + 1 < token.tokens.length && token.tokens[i + 1].type === "text") {
-              i++;
-              texts.push(token.tokens[i]);
-            }
-            tokens.push({
-              type: "paragraph",
-              tokens: texts,
-              raw: texts.map((text) => text.raw).join(""),
-              text: texts.map((text) => text.text).join("")
-            });
-            break;
-          }
-          default: {
-            continue;
-          }
-        }
-      }
-      const Blockquote = components?.Blockquote ?? defaultComponents.Blockquote;
-      return /* @__PURE__ */ jsx(Blockquote, {
-        children: tokens.map((token2, index) => {
-          return /* @__PURE__ */ jsx(MarkdownBlockToken, {
-            token: token2,
-            components
-          }, index);
+    case "br": {
+      return /* @__PURE__ */ jsx("br", {});
+    }
+    case "paragraph": {
+      const Paragraph = components?.Paragraph ?? defaultComponents.Paragraph;
+      return /* @__PURE__ */ jsx(Paragraph, {
+        children: /* @__PURE__ */ jsx(MarkdownTokens, {
+          tokens: token.tokens,
+          components
         })
       });
     }
-    case "html": {
-      return token.text;
-    }
     case "heading": {
       const Heading = components?.Heading ?? defaultComponents.Heading;
       return /* @__PURE__ */ jsx(Heading, {
         level: clampHeadingLevel(token.depth),
-        children: token.tokens.map((token2, index) => /* @__PURE__ */ jsx(MarkdownInlineToken, {
-          token: token2,
+        children: /* @__PURE__ */ jsx(MarkdownTokens, {
+          tokens: token.tokens,
           components
-        }, index))
-      });
-    }
-    case "hr": {
-      return /* @__PURE__ */ jsx("hr", {});
-    }
-    case "list": {
-      const ListTag = token.ordered ? "ol" : "ul";
-      return /* @__PURE__ */ jsx(ListTag, {
-        children: token.items.map((item, index) => {
-          if (item.loose) {
-            if (item.task) {
-              const tokens = [...item.tokens];
-              if (tokens[0]?.type === "paragraph") {
-                const token2 = tokens[0];
-                token2.tokens.unshift(
-                  {
-                    type: "checkbox",
-                    checked: item.checked,
-                    raw: ""
-                  },
-                  {
-                    type: "text",
-                    text: " ",
-                    raw: " ",
-                    escaped: false
-                  }
-                );
-              } else {
-                tokens.unshift(
-                  {
-                    type: "checkbox",
-                    checked: item.checked,
-                    raw: ""
-                  },
-                  {
-                    type: "text",
-                    text: " ",
-                    raw: " ",
-                    escaped: false
-                  }
-                );
-              }
-              const items = [];
-              for (let i = 0; i < tokens.length; i++) {
-                switch (tokens[i].type) {
-                  case "space":
-                  case "code":
-                  case "blockquote":
-                  case "html":
-                  case "heading":
-                  case "hr":
-                  case "list":
-                  case "paragraph":
-                  case "table": {
-                    items.push(tokens[i]);
-                    break;
-                  }
-                  case "text":
-                  case "checkbox": {
-                    const texts = [
-                      tokens[i]
-                    ];
-                    while (i + 1 < tokens.length && tokens[i + 1].type === "text") {
-                      i++;
-                      texts.push(tokens[i]);
-                    }
-                    items.push({
-                      type: "paragraph",
-                      tokens: texts,
-                      raw: texts.map((text) => text.raw).join(""),
-                      text: texts.map((text) => text.text).join("")
-                    });
-                    break;
-                  }
-                  default: {
-                    continue;
-                  }
-                }
-              }
-              return /* @__PURE__ */ jsx("li", {
-                children: items.map((token2, index2) => {
-                  return /* @__PURE__ */ jsx(MarkdownBlockToken, {
-                    token: token2,
-                    components
-                  }, index2);
-                })
-              }, index);
-            } else {
-              const tokens = [];
-              for (let i = 0; i < item.tokens.length; i++) {
-                switch (item.tokens[i].type) {
-                  case "space":
-                  case "code":
-                  case "blockquote":
-                  case "html":
-                  case "heading":
-                  case "hr":
-                  case "list":
-                  case "paragraph":
-                  case "table": {
-                    tokens.push(item.tokens[i]);
-                    break;
-                  }
-                  case "text": {
-                    const texts = [
-                      item.tokens[i]
-                    ];
-                    while (i + 1 < item.tokens.length && item.tokens[i + 1].type === "text") {
-                      i++;
-                      texts.push(item.tokens[i]);
-                    }
-                    tokens.push({
-                      type: "paragraph",
-                      tokens: texts,
-                      raw: texts.map((text) => text.raw).join(""),
-                      text: texts.map((text) => text.text).join("")
-                    });
-                    break;
-                  }
-                  default: {
-                    continue;
-                  }
-                }
-              }
-              return /* @__PURE__ */ jsx("li", {
-                children: tokens.map((token2, index2) => {
-                  return /* @__PURE__ */ jsx(MarkdownBlockToken, {
-                    token: token2,
-                    components
-                  }, index2);
-                })
-              }, index);
-            }
-          } else {
-            const Items = item.tokens.map((token2, index2) => {
-              switch (token2.type) {
-                case "space":
-                case "code":
-                case "blockquote":
-                case "html":
-                case "heading":
-                case "hr":
-                case "list":
-                case "paragraph":
-                case "table": {
-                  return /* @__PURE__ */ jsx(MarkdownBlockToken, {
-                    token: token2,
-                    components
-                  }, index2);
-                }
-                case "text": {
-                  return /* @__PURE__ */ jsx(MarkdownInlineToken, {
-                    token: token2,
-                    components
-                  }, index2);
-                }
-                default: {
-                  return null;
-                }
-              }
-            });
-            if (item.task) {
-              return /* @__PURE__ */ jsxs("li", {
-                children: [
-                  /* @__PURE__ */ jsx("input", {
-                    type: "checkbox",
-                    disabled: true,
-                    checked: item.checked
-                  }),
-                  " ",
-                  Items
-                ]
-              }, index);
-            } else {
-              return /* @__PURE__ */ jsx("li", {
-                children: Items
-              }, index);
-            }
-          }
         })
       });
     }
-    case "paragraph": {
-      return /* @__PURE__ */ jsx("p", {
-        children: token.tokens.map((token2, index) => /* @__PURE__ */ jsx(MarkdownInlineToken, {
-          token: token2,
-          components
-        }, index))
-      });
-    }
-    case "table": {
-      return /* @__PURE__ */ jsxs("table", {
-        children: [
-          /* @__PURE__ */ jsx("thead", {
-            children: /* @__PURE__ */ jsx("tr", {
-              children: token.header.map((cell, index) => {
-                return /* @__PURE__ */ jsx("th", {
-                  align: cell.align ?? void 0,
-                  children: cell.tokens.map((token2, index2) => /* @__PURE__ */ jsx(MarkdownInlineToken, {
-                    token: token2,
-                    components
-                  }, index2))
-                }, index);
-              })
-            })
-          }),
-          /* @__PURE__ */ jsx("tbody", {
-            children: token.rows.map((row, index) => {
-              return /* @__PURE__ */ jsx("tr", {
-                children: row.map((cell, index2) => {
-                  return /* @__PURE__ */ jsx("td", {
-                    align: cell.align ?? void 0,
-                    children: cell.tokens.map((token2, index3) => /* @__PURE__ */ jsx(MarkdownInlineToken, {
-                      token: token2,
-                      components
-                    }, index3))
-                  }, index2);
-                })
-              }, index);
-            })
-          })
-        ]
-      });
-    }
-  }
-}
-function MarkdownInlineToken({
-  token,
-  components
-}) {
-  switch (token.type) {
     case "strong": {
-      return /* @__PURE__ */ jsx("strong", {
-        children: token.tokens.map((token2, index) => /* @__PURE__ */ jsx(MarkdownInlineToken, {
-          token: token2,
+      const Inline = components?.Inline ?? defaultComponents.Inline;
+      return /* @__PURE__ */ jsx(Inline, {
+        type: "strong",
+        children: /* @__PURE__ */ jsx(MarkdownTokens, {
+          tokens: token.tokens,
           components
-        }, index))
+        })
       });
     }
     case "em": {
-      return /* @__PURE__ */ jsx("em", {
-        children: token.tokens.map((token2, index) => /* @__PURE__ */ jsx(MarkdownInlineToken, {
-          token: token2,
+      const Inline = components?.Inline ?? defaultComponents.Inline;
+      return /* @__PURE__ */ jsx(Inline, {
+        type: "em",
+        children: /* @__PURE__ */ jsx(MarkdownTokens, {
+          tokens: token.tokens,
           components
-        }, index))
+        })
       });
     }
     case "codespan": {
-      return /* @__PURE__ */ jsx("code", {
+      const Inline = components?.Inline ?? defaultComponents.Inline;
+      return /* @__PURE__ */ jsx(Inline, {
+        type: "code",
         children: parseHtmlEntities(token.text)
       });
     }
-    case "br": {
-      return /* @__PURE__ */ jsx("br", {});
-    }
     case "del": {
-      return /* @__PURE__ */ jsx("del", {
-        children: token.tokens.map((token2, index) => /* @__PURE__ */ jsx(MarkdownInlineToken, {
-          token: token2,
+      const Inline = components?.Inline ?? defaultComponents.Inline;
+      return /* @__PURE__ */ jsx(Inline, {
+        type: "del",
+        children: /* @__PURE__ */ jsx(MarkdownTokens, {
+          tokens: token.tokens,
           components
-        }, index))
+        })
       });
     }
     case "link": {
       const href = sanitizeUrl(token.href);
       if (href === null) {
-        return token.tokens.map((token2, index) => /* @__PURE__ */ jsx(MarkdownInlineToken, {
-          token: token2,
+        return /* @__PURE__ */ jsx(MarkdownTokens, {
+          tokens: token.tokens,
           components
-        }, index));
+        });
       }
       const Link = components?.Link ?? defaultComponents.Link;
       return /* @__PURE__ */ jsx(Link, {
         href,
         title: token.title ?? void 0,
-        children: token.tokens.map((token2, index) => /* @__PURE__ */ jsx(MarkdownInlineToken, {
-          token: token2,
+        children: /* @__PURE__ */ jsx(MarkdownTokens, {
+          tokens: token.tokens,
           components
-        }, index))
+        })
+      });
+    }
+    case "code": {
+      let language = void 0;
+      if (token.lang !== void 0) {
+        language = token.lang.match(/^\S*/)?.[0] ?? void 0;
+      }
+      const CodeBlock = components?.CodeBlock ?? defaultComponents.CodeBlock;
+      return /* @__PURE__ */ jsx(CodeBlock, {
+        language,
+        code: token.text
+      });
+    }
+    case "blockquote": {
+      const Blockquote = components?.Blockquote ?? defaultComponents.Blockquote;
+      return /* @__PURE__ */ jsx(Blockquote, {
+        children: /* @__PURE__ */ jsx(MarkdownTokens, {
+          tokens: token.tokens,
+          components,
+          normalizeToBlockTokens: true
+        })
+      });
+    }
+    case "list": {
+      const List = components?.List ?? defaultComponents.List;
+      const items = token.items.map((item) => {
+        return {
+          checked: item.task ? item.checked : void 0,
+          children: /* @__PURE__ */ jsx(MarkdownTokens, {
+            tokens: item.tokens,
+            components,
+            normalizeToBlockTokens: item.loose
+          })
+        };
+      });
+      return /* @__PURE__ */ jsx(List, {
+        type: token.ordered ? "ordered" : "unordered",
+        items
+      });
+    }
+    case "table": {
+      const Table = components?.Table ?? defaultComponents.Table;
+      const headings = token.header.map(
+        (cell) => ({
+          align: cell.align ?? void 0,
+          children: /* @__PURE__ */ jsx(MarkdownTokens, {
+            tokens: cell.tokens,
+            components
+          })
+        })
+      );
+      const rows = token.rows.map(
+        (row) => row.map((cell) => ({
+          align: cell.align ?? void 0,
+          children: /* @__PURE__ */ jsx(MarkdownTokens, {
+            tokens: cell.tokens,
+            components
+          })
+        }))
+      );
+      return /* @__PURE__ */ jsx(Table, {
+        headings,
+        rows
       });
     }
     case "image": {
@@ -449,31 +335,76 @@ function MarkdownInlineToken({
         title: token.title ?? void 0
       });
     }
-    case "text": {
-      if (token.tokens !== void 0) {
-        return token.tokens.map((token2, index) => /* @__PURE__ */ jsx(MarkdownInlineToken, {
-          token: token2,
-          components
-        }, index));
-      } else {
-        return parseHtmlEntities(token.text);
-      }
-    }
-    case "escape": {
-      return token.text;
-    }
-    case "checkbox": {
-      return /* @__PURE__ */ jsx("input", {
-        type: "checkbox",
-        disabled: true,
-        checked: token.checked
-      });
+    case "hr": {
+      const Separator = components?.Separator ?? defaultComponents.Separator;
+      return /* @__PURE__ */ jsx(Separator, {});
     }
+    case "html":
     default: {
       return null;
     }
   }
 }
+function MarkdownTokens({
+  tokens,
+  components,
+  normalizeToBlockTokens = false
+}) {
+  const normalizedTokens = [];
+  if (normalizeToBlockTokens) {
+    for (let i = 0; i < tokens.length; i++) {
+      const token = tokens[i];
+      switch (token.type) {
+        case "text": {
+          const texts = [token];
+          while (i + 1 < tokens.length && tokens[i + 1].type === "text") {
+            i++;
+            texts.push(tokens[i]);
+          }
+          normalizedTokens.push({
+            type: "paragraph",
+            tokens: texts,
+            raw: texts.map((text) => text.raw).join(""),
+            text: texts.map((text) => text.text).join("")
+          });
+          break;
+        }
+        default: {
+          normalizedTokens.push(token);
+        }
+      }
+    }
+  }
+  return tokens.map((token, index) => /* @__PURE__ */ jsx(MarkdownToken, {
+    token,
+    components
+  }, index));
+}
+const markedTokenTypes = [
+  "blockquote",
+  "br",
+  "code",
+  "codespan",
+  "def",
+  "del",
+  "em",
+  "escape",
+  "heading",
+  "hr",
+  "html",
+  "image",
+  "link",
+  "list",
+  "list_item",
+  "paragraph",
+  "space",
+  "strong",
+  "table",
+  "text"
+];
+function isMarkedToken(token) {
+  return typeof token === "object" && token !== null && "type" in token && markedTokenTypes.includes(token.type);
+}
 function parseHtmlEntities(input) {
   const document = new DOMParser().parseFromString(
     `<!doctype html><body>${input}`,
@@ -485,5 +416,5 @@ function clampHeadingLevel(level) {
   return Math.max(1, Math.min(6, level));
 }
 
-export { Markdown, MarkdownBlockToken };
+export { Markdown, MarkdownToken };
 //# sourceMappingURL=Markdown.js.map