forward-port fixes from 7.x

.github/workflows/dependabot.yml

@@ -0,0 +1,24 @@
+name: Dependabot
+
+on:
+  pull_request_target:
+    types: [opened, synchronize, labeled]
+
+jobs:
+  changeset:
+    runs-on: ubuntu-latest
+    if: ${{ github.actor == 'dependabot[bot]' }}
+    steps:
+      - uses: hmarr/debug-action@v3.0.0
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          ref: ${{ github.event.pull_request.head.ref }}
+      - name: Upsert changeset
+        uses: StafflinePeoplePlus/dependabot-changesets@v0.1.5
+        with:
+          owner: ${{ github.repository_owner }}
+          repo: markdown-to-jsx
+          pr-number: ${{ github.event.pull_request.number }}
+          token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release.yml

@@ -25,6 +25,7 @@ jobs:
         run: yarn test
 
       - name: Create Release Pull Request
+        id: changesets
         uses: changesets/action@v1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/website.yml

@@ -0,0 +1,39 @@
+name: Update website
+on:
+  release:
+    types: [published]
+  workflow_dispatch:
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    permissions:
+      id-token: write
+      contents: read
+      pages: write
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          cache: 'yarn'
+          node-version-file: '.nvmrc'
+
+      - run: yarn --immutable
+      - run: yarn build-site
+
+      - name: Setup site
+        uses: actions/configure-pages@v5
+
+      - name: Upload site
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: 'docs'
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4 # or specific "vX.X.X" version tag for this action

.gitignore

@@ -2,7 +2,6 @@ node_modules/
 .git/
 .DS_Store
 coverage/
-dist/
 *.log
 package-lock.json
 npm-shrinkwrap.json
@@ -15,3 +14,8 @@ npm-shrinkwrap.json
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+
+# ephemeral files
+dist/
+docs/markdown-to-jsx.js
+docs/markdown-to-jsx.js.map

.yarnrc.yml

@@ -4,4 +4,4 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.0.2.cjs
+yarnPath: .yarn/releases/yarn-4.5.3.cjs

CHANGELOG.md

@@ -1,5 +1,113 @@
 # markdown-to-jsx
 
+## 7.7.1
+
+### Patch Changes
+
+- 9d42449: Factor out unnecessary element cloning.
+- 8920038: Remove use of explicit React.createElement.
+
+## 7.7.0
+
+### Minor Changes
+
+- 20777bf: Add support for GFM alert-style blockquotes.
+
+  ```md
+  > [!Note]
+  > This is a note-flavored alert blockquote. The "Note" text is injected as a `<header>` by
+  > default and the blockquote can be styled via the injected class `markdown-alert-note`
+  > for example.
+  ```
+
+### Patch Changes
+
+- 5d7900b: Adjust type signature for `<Markdown>` component to allow for easier composition.
+- 918b44b: Use newer `React.JSX.*` namespace instead of `JSX.*` for React 19 compatibility.
+- 91a5948: Arbitrary HTML no longer punches out pipes when parsing rows. If you absolutely need a pipe character that isn't a table separator, either escape it or enclose it in backticks to trigger inline code handling.
+- 23caecb: Drop encountered `ref` attributes when processing inline HTML, React doesn't handle it well.
+
+## 7.6.2
+
+### Patch Changes
+
+- 0274445: Fix false detection of tables in some scenarios.
+- 69f815e: Handle `class` attribute from arbitrary HTML properly to avoid React warnings.
+- 857809a: Fenced code blocks are now tolerant to a missing closing sequence; this improves use in LLM scenarios where the code block markdown is being streamed into the editor in chunks.
+
+## 7.6.1
+
+### Patch Changes
+
+- 87d8bd3: Handle `class` attribute from arbitrary HTML properly to avoid React warnings.
+
+## 7.6.0
+
+### Minor Changes
+
+- 2281a4d: Add `options.disableAutoLink` to customize bare URL handling behavior.
+
+  By default, bare URLs in the markdown document will be converted into an anchor tag. This behavior can be disabled if desired.
+
+  ```jsx
+  <Markdown options={{ disableAutoLink: true }}>
+    The URL https://quantizor.dev will not be rendered as an anchor tag.
+  </Markdown>
+
+  // or
+
+  compiler(
+    'The URL https://quantizor.dev will not be rendered as an anchor tag.',
+    { disableAutoLink: true }
+  )
+
+  // renders:
+
+  <span>
+    The URL https://quantizor.dev will not be rendered as an anchor tag.
+  </span>
+  ```
+
+### Patch Changes
+
+- fb3d716: Simplify handling of fallback scenario if a link reference is missing its corresponding footnote.
+
+## 7.5.1
+
+### Patch Changes
+
+- b16f668: Fix issue with lookback cache resulting in false detection of lists inside lists in some scenarios
+- 58b96d3: fix: handle empty HTML tags more consistently #597
+
+## 7.5.0
+
+### Minor Changes
+
+- 62a16f3: Allow modifying HTML attribute sanitization when `options.sanitizer` is passed by the composer.
+
+  By default a lightweight URL sanitizer function is provided to avoid common attack vectors that might be placed into the `href` of an anchor tag, for example. The sanitizer receives the input, the HTML tag being targeted, and the attribute name. The original function is available as a library export called `sanitizer`.
+
+  This can be overridden and replaced with a custom sanitizer if desired via `options.sanitizer`:
+
+  ```jsx
+  // sanitizer in this situation would receive:
+  // ('javascript:alert("foo")', 'a', 'href')
+
+  ;<Markdown options={{ sanitizer: (value, tag, attribute) => value }}>
+    {`[foo](javascript:alert("foo"))`}
+  </Markdown>
+
+  // or
+
+  compiler('[foo](javascript:alert("foo"))', {
+    sanitizer: (value, tag, attribute) => value,
+  })
+  ```
+
+### Patch Changes
+
+- 553a175: Replace RuleType enum with an object
+
 ## 7.4.7
 
 ### Patch Changes

README.md

@@ -19,13 +19,16 @@ The most lightweight, customizable React markdown component.
     - [options.createElement - Custom React.createElement behavior](#optionscreateelement---custom-reactcreateelement-behavior)
     - [options.enforceAtxHeadings](#optionsenforceatxheadings)
     - [options.renderRule](#optionsrenderrule)
+    - [options.sanitizer](#optionssanitizer)
     - [options.slugify](#optionsslugify)
     - [options.namedCodesToUnicode](#optionsnamedcodestounicode)
+    - [options.disableAutoLink](#optionsdisableautolink)
     - [options.disableParsingRawHTML](#optionsdisableparsingrawhtml)
   - [Syntax highlighting](#syntax-highlighting)
   - [Getting the smallest possible bundle size](#getting-the-smallest-possible-bundle-size)
   - [Usage with Preact](#usage-with-preact)
 - [Gotchas](#gotchas)
+  - [Passing props to stringified React components](#passing-props-to-stringified-react-components)
   - [Significant indentation inside arbitrary HTML](#significant-indentation-inside-arbitrary-html)
     - [Code blocks](#code-blocks)
 - [Using The Compiler Directly](#using-the-compiler-directly)
@@ -435,21 +438,44 @@ function App() {
 }
 ````
 
+#### options.sanitizer
+
+By default a lightweight URL sanitizer function is provided to avoid common attack vectors that might be placed into the `href` of an anchor tag, for example. The sanitizer receives the input, the HTML tag being targeted, and the attribute name. The original function is available as a library export called `sanitizer`.
+
+This can be overridden and replaced with a custom sanitizer if desired via `options.sanitizer`:
+
+```jsx
+// sanitizer in this situation would receive:
+// ('javascript:alert("foo")', 'a', 'href')
+
+;<Markdown options={{ sanitizer: (value, tag, attribute) => value }}>
+  {`[foo](javascript:alert("foo"))`}
+</Markdown>
+
+// or
+
+compiler('[foo](javascript:alert("foo"))', {
+  sanitizer: (value, tag, attribute) => value,
+})
+```
+
 #### options.slugify
 
 By default, a [lightweight deburring function](https://github.com/probablyup/markdown-to-jsx/blob/bc2f57412332dc670f066320c0f38d0252e0f057/index.js#L261-L275) is used to generate an HTML id from headings. You can override this by passing a function to `options.slugify`. This is helpful when you are using non-alphanumeric characters (e.g. Chinese or Japanese characters) in headings. For example:
 
 ```jsx
-;<Markdown options={{ slugify: str => str }}># 中文</Markdown>
+<Markdown options={{ slugify: str => str }}># 中文</Markdown>
 
 // or
 
 compiler('# 中文', { slugify: str => str })
 
 // renders:
-;<h1 id="中文">中文</h1>
+<h1 id="中文">中文</h1>
 ```
 
+The original function is available as a library export called `slugify`.
+
 #### options.namedCodesToUnicode
 
 By default only a couple of named html codes are converted to unicode characters:
@@ -483,9 +509,32 @@ compiler('This text is &le; than this text.', namedCodesToUnicode: {
 <p>This text is ≤ than this text.</p>
 ```
 
+#### options.disableAutoLink
+
+By default, bare URLs in the markdown document will be converted into an anchor tag. This behavior can be disabled if desired.
+
+```jsx
+<Markdown options={{ disableAutoLink: true }}>
+  The URL https://quantizor.dev will not be rendered as an anchor tag.
+</Markdown>
+
+// or
+
+compiler(
+  'The URL https://quantizor.dev will not be rendered as an anchor tag.',
+  { disableAutoLink: true }
+)
+
+// renders:
+
+<span>
+  The URL https://quantizor.dev will not be rendered as an anchor tag.
+</span>
+```
+
 #### options.disableParsingRawHTML
 
-By default, raw HTML is parsed to JSX. This behavior can be disabled with this option.
+By default, raw HTML is parsed to JSX. This behavior can be disabled if desired.
 
 ```jsx
 <Markdown options={{ disableParsingRawHTML: true }}>
@@ -573,6 +622,52 @@ Everything will work just fine! Simply [Alias `react` to `preact/compat`](https:
 
 ## Gotchas
 
+### Passing props to stringified React components
+
+Using the [`options.overrides`](#optionsoverrides---rendering-arbitrary-react-components) functionality to render React components, props are passed into the component in stringifed form. It is up to you to parse the string to make use of the data.
+
+```tsx
+const Table: React.FC<
+  JSX.IntrinsicElements['table'] & {
+    columns: string
+    dataSource: string
+  }
+> = ({ columns, dataSource, ...props }) => {
+  const parsedColumns = JSON.parse(columns)
+  const parsedData = JSON.parse(dataSource)
+
+  return (
+    <div {...props}>
+      <h1>Columns</h1>
+      {parsedColumns.map(column => (
+        <span key={column.key}>{column.title}</span>
+      ))}
+
+      <h2>Data</h2>
+      {parsedData.map(datum => (
+        <span key={datum.key}>{datum.Month}</span>
+      ))}
+    </div>
+  )
+}
+
+/**
+ * Example HTML in markdown:
+ *
+ * <Table
+ *    columns={[{ title: 'Month', dataIndex: 'Month', key: 'Month' }]}
+ *    dataSource={[
+ *      {
+ *        Month: '2024-09-01',
+ *        'Forecasted Revenue': '$3,137,678.85',
+ *        'Forecasted Expenses': '$2,036,660.28',
+ *        key: 0,
+ *      },
+ *    ]}
+ *  />
+ */
+```
+
 ### Significant indentation inside arbitrary HTML
 
 People usually write HTML like this:

docs/index.html

@@ -45,7 +45,7 @@
     <script type="text/plain" id="sample-content">
 # This is Markdown
 
-#### You can edit me!
+✨ You can edit me! ✨
 
 [Markdown](http://daringfireball.net/projects/markdown/) lets you write content in a really natural way.
 
@@ -57,6 +57,9 @@
 
 <small>Sample content borrowed with thanks from [elm-markdown](http://elm-lang.org/examples/markdown) ❤️</small>
 
+> [!Tip]
+> Normal and "alert" blockquotes are possible. Use `renderRule` for more control if needed.
+
 Custom handling of code blocks (or any rule!) is possible with the [`renderRule` option](https://github.com/quantizor/markdown-to-jsx#optionsrenderrule). For example, LaTeX support via [`@matejmazur/react-katex`](https://www.npmjs.com/package/@matejmazur/react-katex):
 
 ```latex

index.cjs.tsx

@@ -1,6 +1,8 @@
-import Markdown, { createMarkdown } from './'
+import _createMarkdown, { RuleType } from './'
 
-Object.assign(Markdown, { createMarkdown })
-export default Markdown as typeof Markdown & {
-  createMarkdown: typeof createMarkdown
+// @ts-ignore
+Object.assign(_createMarkdown, { RuleType })
+
+export const createMarkdown = _createMarkdown as typeof createMarkdown & {
+  RuleType: typeof RuleType
 }