koishi-plugin-kkk 1.0.0

package/src/richtext/react/index.tsx

@@ -0,0 +1,582 @@
+import React, { type CSSProperties, type ReactNode } from 'react'
+
+import type { RichTextDocument, RichTextInlineStyle, RichTextNode, RichTextRenderOptions } from '../types'
+import { cn } from './cn'
+
+/**
+ * 限制图片来源协议。
+ *
+ * React 会自动转义文本和属性，但不会替我们判断 URL 协议是否安全，所以这里仍然做白名单。
+ */
+const sanitizeImageSource = (value: string): string | null => {
+  const normalized = value.trim()
+  if (!normalized) {
+    return null
+  }
+
+  if (/^https?:\/\//i.test(normalized)) {
+    return normalized
+  }
+
+  if (/^data:image\/(?:png|jpe?g|gif|webp|avif);base64,[a-z0-9+/=]+$/i.test(normalized)) {
+    return normalized
+  }
+
+  return null
+}
+
+/**
+ * 富文本表情的默认排版。
+ *
+ * 这些规则属于 richtext 节点的渲染语义，不应该散落在各个平台模板里：
+ * - 表情跟随当前文字大小缩放；
+ * - 作为行内内容参与排版；
+ * - 不撑破行高，也不突破当前文本块宽度。
+ */
+const getRichTextEmojiStyle = (scale: number = 1): CSSProperties => ({
+  display: 'inline-block',
+  height: `${1.5 * scale}em`,
+  width: 'auto',
+  verticalAlign: scale > 1 ? 'text-bottom' : 'middle',
+  lineHeight: 1
+})
+
+/** 统一的搜索图标，避免 template 每次都自己重复拼 JSX。 */
+const SearchKeywordIcon = ({ className }: { className?: string }) => {
+  return (
+    <span
+      aria-hidden
+      className={className}
+      style={{
+        display: 'inline-flex',
+        verticalAlign: 'super',
+        marginLeft: '0.08em',
+        lineHeight: 1
+      }}
+    >
+      <svg
+        viewBox="0 0 24 24"
+        width="0.72em"
+        height="0.72em"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <circle cx="11" cy="11" r="7" />
+        <path d="m20 20-3.5-3.5" />
+      </svg>
+    </span>
+  )
+}
+
+/** 话题图标 */
+const TopicIcon = ({ className }: { className?: string }) => (
+  <svg className={cn(className, 'inline-block w-16 mb-4 mr-4 align-middle')} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <path
+      d="M5.1911266666666664 0.9880383333333334C4.908345 1.1859883333333332 4.839576666666666 1.5756933333333332 5.0375266666666665 1.8584683333333332L6.109626666666665 3.3900216666666663C6.307576666666667 3.6728033333333334 6.697288333333333 3.7415716666666663 6.980041666666667 3.5436216666666667C7.26285 3.345673333333333 7.3316 2.955966666666666 7.133666666666667 2.6731916666666664L6.061558333333332 1.1416383333333333C5.863613333333333 0.8588566666666666 5.473901666666667 0.7900883333333333 5.1911266666666664 0.9880383333333334z"
+      fill="currentColor"
+    ></path>
+    <path
+      d="M10.808908333333331 0.9880316666666666C10.52615 0.7900883333333333 10.136408333333332 0.8588566666666666 9.938466666666667 1.1416383333333333L8.866399999999999 2.6731916666666664C8.668458333333334 2.9559716666666667 8.737216666666665 3.345678333333333 9.020024999999999 3.543628333333333C9.302775 3.7415716666666663 9.692466666666666 3.6728033333333334 9.890458333333333 3.3900216666666663L10.962533333333333 1.8584683333333332C11.160466666666665 1.5756883333333334 11.091716666666665 1.1859816666666667 10.808908333333331 0.9880316666666666z"
+      fill="currentColor"
+    ></path>
+    <path
+      d="M8.388033333333333 8.2152L8.548749999999998 7.036716666666667L7.611974999999999 7.036716666666667L7.45125 8.2152L8.388033333333333 8.2152z"
+      fill="currentColor"
+    ></path>
+    <path
+      d="M8 2.559733333333333C6.498214999999999 2.559733333333333 5.16768 2.6184066666666665 4.195425 2.678813333333333C2.923148333333333 2.75786 1.9012316666666664 3.7431133333333335 1.8069283333333335 5.026566666666666C1.7538833333333335 5.748475 1.7082533333333334 6.652113333333333 1.7082533333333334 7.626266666666666C1.7082533333333334 8.604275 1.75425 9.504349999999999 1.8075966666666665 10.219908333333333C1.9018333333333333 11.483925 2.899678333333333 12.460316666666666 4.154273333333333 12.551708333333332C5.104525 12.620916666666668 6.4048050000000005 12.688916666666666 7.876416666666666 12.692558333333332C8.379624999999999 13.169883333333333 9.433408333333333 14.084808333333331 10.662975 14.643741666666665C11.005616666666665 14.799541666666666 11.427091666666666 14.859316666666667 11.735999999999999 14.576575C12.039016666666665 14.299274999999998 12.024899999999999 13.881124999999999 11.919241666666666 13.523958333333333C11.811016666666664 13.158316666666666 11.757858333333333 12.821666666666667 11.73155 12.559758333333335C13.013916666666667 12.468349999999997 14.093808333333332 11.543458333333334 14.192449999999997 10.220175C14.245791666666666 9.504874999999998 14.291733333333333 8.604875 14.291733333333333 7.626266666666666C14.291733333333333 6.6514999999999995 14.246125 5.74798 14.193108333333331 5.026299999999999C14.098808333333332 3.7429283333333334 13.076958333333332 2.757873333333333 11.804816666666664 2.6788266666666662C10.832533333333332 2.6184133333333333 9.501883333333334 2.559733333333333 8 2.559733333333333zM6.536343333333332 10.730624999999998C6.226251666666666 10.688316666666665 6.009155 10.402649999999998 6.0514399999999995 10.092558333333333L6.152898333333334 9.348533333333332L5.457055 9.348533333333332C5.144096666666666 9.348533333333332 4.890388333333333 9.094850000000001 4.890388333333333 8.781866666666666C4.890388333333333 8.468933333333332 5.144096666666666 8.2152 5.457055 8.2152L6.307441666666667 8.2152L6.468145 7.036716666666667L5.457055 7.036716666666667C5.144096666666666 7.036716666666667 4.890388333333333 6.783036666666668 4.890388333333333 6.470073333333333C4.890388333333333 6.15711 5.144096666666666 5.903406666666666 5.457055 5.903406666666666L6.6226883333333335 5.903406666666666L6.744933333333333 5.006731666666666C6.787241666666667 4.6966399999999995 7.0729083333333325 4.479536666666666 7.383 4.521823333333333C7.693091666666666 4.564108333333333 7.910191666666667 4.849765 7.867875 5.159858333333333L7.766483333333333 5.903406666666666L8.703325 5.903406666666666L8.825558333333333 5.006731666666666C8.867866666666666 4.6966399999999995 9.153533333333332 4.479536666666666 9.463625 4.521823333333333C9.773716666666667 4.564108333333333 9.990816666666666 4.849765 9.948508333333333 5.159858333333333L9.847116666666667 5.903406666666666L10.542933333333332 5.903406666666666C10.855858333333332 5.903406666666666 11.1096 6.15711 11.1096 6.470073333333333C11.1096 6.783036666666668 10.855858333333332 7.036716666666667 10.542933333333332 7.036716666666667L9.692599999999999 7.036716666666667L9.531875 8.2152L10.542933333333332 8.2152C10.855858333333332 8.2152 11.1096 8.468933333333332 11.1096 8.781866666666666C11.1096 9.094850000000001 10.855858333333332 9.348533333333332 10.542933333333332 9.348533333333332L9.377308333333332 9.348533333333332L9.255008333333333 10.245691666666666C9.212691666666666 10.555783333333332 8.927033333333332 10.772874999999999 8.616941666666666 10.730624999999998C8.306849999999999 10.688316666666665 8.089749999999999 10.402649999999998 8.132058333333333 10.092558333333333L8.233516666666667 9.348533333333332L7.296741666666667 9.348533333333332L7.1743749999999995 10.245691666666666C7.132066666666667 10.555783333333332 6.846406666666667 10.772874999999999 6.536343333333332 10.730624999999998z"
+      fill="currentColor"
+    ></path>
+  </svg>
+)
+
+/** 抽奖图标 */
+const LotteryIcon = ({ className }: { className?: string }) => (
+  <svg className={cn(className, 'inline-block w-16 h-auto mb-4 mr-2 align-middle')} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+    <path
+      d="M3.3749775 8.758875C3.6856424999999997 8.758875 3.9374775 9.0106875 3.9374775 9.321375L3.9374775 13.821375C3.9374775 14.3095125 4.33323 14.70525 4.821405 14.70525L13.178550000000001 14.70525C13.666725 14.70525 14.0625 14.3095125 14.0625 13.821375L14.0625 9.321375C14.0625 9.0106875 14.3143125 8.758875 14.625 8.758875C14.93565 8.758875 15.1875 9.0106875 15.1875 9.321375L15.1875 13.821375C15.1875 14.930850000000001 14.2880625 15.83025 13.178550000000001 15.83025L4.821405 15.83025C3.7119074999999997 15.83025 2.8124775 14.930850000000001 2.8124775 13.821375L2.8124775 9.321375C2.8124775 9.0106875 3.0643199999999995 8.758875 3.3749775 8.758875z"
+      fill="currentColor"
+    ></path>
+    <path
+      d="M2.1696225 6.5892824999999995C2.1696225 5.746065 2.8531875 5.0625 3.696405 5.0625L14.303550000000001 5.0625C15.146774999999998 5.0625 15.830324999999998 5.746065 15.830324999999998 6.5892824999999995L15.830324999999998 8.025825000000001C15.830324999999998 8.768025 15.288825000000001 9.4204875 14.518125000000001 9.4986C13.5663 9.5950875 11.7789375 9.723225 9 9.723225C6.221047499999999 9.723225 4.433669999999999 9.5950875 3.4818525000000005 9.4986C2.711145 9.4204875 2.1696225 8.768025 2.1696225 8.025825000000001L2.1696225 6.5892824999999995zM3.696405 6.1875C3.4745099999999995 6.1875 3.2946225 6.3673875 3.2946225 6.5892824999999995L3.2946225 8.025825000000001C3.2946225 8.221725000000001 3.423675 8.3619375 3.5952824999999997 8.3793375C4.50612 8.4716625 6.255472500000001 8.598225 9 8.598225C11.744512499999999 8.598225 13.493850000000002 8.4716625 14.40465 8.3793375C14.5762875 8.3619375 14.705324999999998 8.221725000000001 14.705324999999998 8.025825000000001L14.705324999999998 6.5892824999999995C14.705324999999998 6.3673875 14.525437499999999 6.1875 14.303550000000001 6.1875L3.696405 6.1875z"
+      fill="currentColor"
+    ></path>
+    <path
+      d="M4.9017675 4.0179075C4.9017675 2.8196475 5.873145 1.84827 7.071405 1.84827C8.2696875 1.84827 9.241050000000001 2.8196475 9.241050000000001 4.0179075L9.241050000000001 6.187552499999999L7.071405 6.187552499999999C5.873145 6.187552499999999 4.9017675 5.2161675 4.9017675 4.0179075zM7.071405 2.9732700000000003C6.494467500000001 2.9732700000000003 6.0267675 3.44097 6.0267675 4.0179075C6.0267675 4.5948525 6.494467500000001 5.0625525 7.071405 5.0625525L8.116050000000001 5.0625525L8.116050000000001 4.0179075C8.116050000000001 3.44097 7.648350000000001 2.9732700000000003 7.071405 2.9732700000000003z"
+      fill="currentColor"
+    ></path>
+    <path
+      d="M8.758875 4.0179075C8.758875 2.8196475 9.730274999999999 1.84827 10.928550000000001 1.84827C12.126825 1.84827 13.098225000000001 2.8196475 13.098225000000001 4.0179075C13.098225000000001 5.2161675 12.126825 6.187552499999999 10.928550000000001 6.187552499999999L8.758875 6.187552499999999L8.758875 4.0179075zM10.928550000000001 2.9732700000000003C10.3516125 2.9732700000000003 9.883875 3.44097 9.883875 4.0179075L9.883875 5.0625525L10.928550000000001 5.0625525C11.505487500000001 5.0625525 11.973225 4.5948525 11.973225 4.0179075C11.973225 3.44097 11.505487500000001 2.9732700000000003 10.928550000000001 2.9732700000000003z"
+      fill="currentColor"
+    ></path>
+    <path
+      d="M9 4.2588525C9.310649999999999 4.2588525 9.5625 4.5106874999999995 9.5625 4.8213525L9.5625 14.78565C9.5625 15.0963 9.310649999999999 15.34815 9 15.34815C8.6893125 15.34815 8.4375 15.0963 8.4375 14.78565L8.4375 4.8213525C8.4375 4.5106874999999995 8.6893125 4.2588525 9 4.2588525z"
+      fill="currentColor"
+    ></path>
+  </svg>
+)
+
+/** 网页链接图标 */
+const WebLinkIcon = ({ className }: { className?: string }) => (
+  <svg className={cn(className, 'inline-block w-14 mb-3 mr-2 align-middle')} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+    <path
+      d="M8.614275 6.87951C8.7490125 6.6030750000000005 9.082275 6.4881975 9.358725 6.622927499999999C9.806437500000001 6.7862849999999995 10.2297 7.0488 10.590599999999998 7.409677499999999C12.12825 8.9473875 12.12825 11.440462499999999 10.590599999999998 12.978150000000001L8.734425 14.834325C7.196745 16.3720125 4.7036549999999995 16.3720125 3.1659675 14.834325C1.6282725 13.296637500000001 1.6282725 10.803525 3.1659675 9.2658375L4.5079125 7.923900000000001C4.7275875 7.704224999999999 5.08374 7.704224999999999 5.303415 7.923900000000001C5.5230825 8.143575 5.5230825 8.499712500000001 5.303415 8.7193875L3.9614625 10.061325C2.8631100000000003 11.1597 2.8631100000000003 12.940462499999999 3.9614625 14.0388375C5.0598 15.137175 6.840585 15.137175 7.9389375 14.0388375L9.795075 12.1826625C10.89345 11.084325 10.89345 9.303525 9.795075 8.205187500000001C9.5242125 7.9342875 9.206475 7.7408175 8.8708125 7.623959999999999C8.5944 7.4892375 8.479537500000001 7.155944999999999 8.614275 6.87951z"
+      fill="currentColor"
+    ></path>
+    <path
+      d="M14.0377875 3.9623775C12.93945 2.8640250000000003 11.1586875 2.8640250000000003 10.0603125 3.9623775L8.204175 5.81853C7.1058225 6.9168825 7.1058225 8.697637499999999 8.204175 9.7960125C8.4579 10.049737499999999 8.753325 10.234425 9.065775 10.3508625C9.338925 10.492275 9.4457625 10.828275 9.304387499999999 11.1013875C9.162975 11.3745375 8.826975 11.481375 8.553862500000001 11.34C8.138175 11.1783 7.745744999999999 10.928550000000001 7.4086725 10.5915C5.870985 9.0538125 5.870985 6.560722499999999 7.4086725 5.023035L9.264825 3.1668825C10.802512499999999 1.6291875 13.2955875 1.6291875 14.833312500000002 3.1668825C16.371 4.70457 16.371 7.197660000000001 14.833312500000002 8.735325L13.549425 10.0192125C13.329787500000002 10.23885 12.973650000000001 10.23885 12.7539375 10.0192125C12.534299999999998 9.7995 12.534299999999998 9.443362500000001 12.7539375 9.2236875L14.0377875 7.939837499999999C15.136125 6.8415 15.136125 5.0607225 14.0377875 3.9623775z"
+      fill="currentColor"
+    ></path>
+  </svg>
+)
+
+/** 站内图文链接图标 */
+const OpusLinkIcon = ({ className }: { className?: string }) => (
+  <svg className={cn(className, 'inline-block w-16 h-auto mb-2 mr-2 align-middle')} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+    <path
+      d="M10 3.124591666666667C8.164908333333335 3.124591666666667 6.791808333333333 3.15845 5.811916666666667 3.1982166666666667C5.002533333333334 3.231058333333334 4.375 3.8969416666666667 4.375 4.743841666666667L4.375 15.12575C4.375 16.01275 5.067016666666667 16.737333333333336 5.943891666666667 16.773000000000003C7.195191666666667 16.823833333333337 8.756833333333335 16.874583333333334 10 16.874583333333334C11.243166666666667 16.874583333333334 12.804833333333335 16.823833333333337 14.056125 16.773000000000003C14.932958333333335 16.737333333333336 15.625 16.01275 15.625 15.12575L15.625 4.743841666666667C15.625 3.8969416666666667 14.997458333333332 3.231058333333334 14.188083333333335 3.1982166666666667C13.208208333333333 3.15845 11.835125 3.124591666666667 10 3.124591666666667zM5.7612250000000005 1.9492416666666668C6.759566666666667 1.908725 8.149641666666668 1.8745916666666667 10 1.8745916666666667C11.850375 1.8745916666666667 13.240458333333335 1.908725 14.238791666666666 1.9492416666666668C15.754791666666668 2.010766666666667 16.875 3.263466666666667 16.875 4.743841666666667L16.875 15.12575C16.875 16.673958333333335 15.663166666666667 17.958708333333334 14.106874999999999 18.021958333333334C12.851916666666668 18.072958333333336 11.269541666666667 18.124583333333334 10 18.124583333333334C8.730458333333333 18.124583333333334 7.148116666666668 18.072958333333336 5.893133333333334 18.021958333333334C4.336833333333334 17.958708333333334 3.125 16.673958333333335 3.125 15.12575L3.125 4.743841666666667C3.125 3.263475 4.245233333333334 2.010766666666667 5.7612250000000005 1.9492416666666668z"
+      fill="currentColor"
+    ></path>
+    <path
+      d="M6.385416666666667 6.2491666666666665C6.385416666666667 5.921250000000001 6.65125 5.655416666666667 6.979166666666667 5.655416666666667L9.479166666666668 5.655416666666667C9.807083333333333 5.655416666666667 10.072916666666668 5.921250000000001 10.072916666666668 6.2491666666666665C10.072916666666668 6.577091666666667 9.807083333333333 6.842908333333333 9.479166666666668 6.842908333333333L6.979166666666667 6.842908333333333C6.65125 6.842908333333333 6.385416666666667 6.577091666666667 6.385416666666667 6.2491666666666665z"
+      fill="currentColor"
+    ></path>
+    <path
+      d="M6.28125 8.749166666666667C6.28125 8.421258333333334 6.547083333333333 8.155408333333334 6.875 8.155408333333334L13.125 8.155408333333334C13.452916666666667 8.155408333333334 13.71875 8.421258333333334 13.71875 8.749166666666667C13.71875 9.077083333333334 13.452916666666667 9.342916666666666 13.125 9.342916666666666L6.875 9.342916666666666C6.547083333333333 9.342916666666666 6.28125 9.077083333333334 6.28125 8.749166666666667z"
+      fill="currentColor"
+    ></path>
+    <path
+      d="M6.28125 11.249166666666667C6.28125 10.92125 6.547083333333333 10.655416666666667 6.875 10.655416666666667L13.125 10.655416666666667C13.452916666666667 10.655416666666667 13.71875 10.92125 13.71875 11.249166666666667C13.71875 11.577083333333334 13.452916666666667 11.842916666666666 13.125 11.842916666666666L6.875 11.842916666666666C6.547083333333333 11.842916666666666 6.28125 11.577083333333334 6.28125 11.249166666666667z"
+      fill="currentColor"
+    ></path>
+    <path
+      d="M6.28125 13.749166666666666C6.28125 13.42125 6.547083333333333 13.155416666666667 6.875 13.155416666666667L11.458333333333334 13.155416666666667C11.78625 13.155416666666667 12.052083333333334 13.42125 12.052083333333334 13.749166666666666C12.052083333333334 14.077083333333333 11.78625 14.342916666666667 11.458333333333334 14.342916666666667L6.875 14.342916666666667C6.547083333333333 14.342916666666667 6.28125 14.077083333333333 6.28125 13.749166666666666z"
+      fill="currentColor"
+    ></path>
+  </svg>
+)
+
+/** 投票图标 */
+const VoteIcon = ({ className }: { className?: string }) => (
+  <svg className={cn(className, 'inline-block w-20 mb-2 align-middle')} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+    <path
+      d="M1.5 10.688324999999999C1.5 9.6528 2.3394675 8.813324999999999 3.375 8.813324999999999L4.125 8.813324999999999C5.1605324999999995 8.813324999999999 6 9.6528 6 10.688324999999999L6 13.313325C6 14.348849999999999 5.1605324999999995 15.188325 4.125 15.188325L3.375 15.188325C2.3394675 15.188325 1.5 14.348849999999999 1.5 13.313325L1.5 10.688324999999999zM3.375 9.938324999999999C2.96079 9.938324999999999 2.625 10.2741 2.625 10.688324999999999L2.625 13.313325C2.625 13.72755 2.96079 14.063325 3.375 14.063325L4.125 14.063325C4.5392175 14.063325 4.875 13.72755 4.875 13.313325L4.875 10.688324999999999C4.875 10.2741 4.5392175 9.938324999999999 4.125 9.938324999999999L3.375 9.938324999999999z"
+      fill="currentColor"
+    ></path>
+    <path
+      d="M6.75 4.313235000000001C6.75 3.2777024999999997 7.589482500000001 2.438235 8.625 2.438235L9.375 2.438235C10.410525 2.438235 11.25 3.2777024999999997 11.25 4.313235000000001L11.25 13.31325C11.25 14.348775 10.410525 15.18825 9.375 15.18825L8.625 15.18825C7.589482500000001 15.18825 6.75 14.348775 6.75 13.31325L6.75 4.313235000000001zM8.625 3.563235C8.210775 3.563235 7.875 3.8990175000000002 7.875 4.313235000000001L7.875 13.31325C7.875 13.727437499999999 8.210775 14.06325 8.625 14.06325L9.375 14.06325C9.789225 14.06325 10.125 13.727437499999999 10.125 13.31325L10.125 4.313235000000001C10.125 3.8990175000000002 9.789225 3.563235 9.375 3.563235L8.625 3.563235z"
+      fill="currentColor"
+    ></path>
+    <path
+      d="M12 8.25075C12 7.2152025 12.839475 6.375735000000001 13.875 6.375735000000001L14.625 6.375735000000001C15.660525 6.375735000000001 16.5 7.2152025 16.5 8.25075L16.5 13.31325C16.5 14.348775 15.660525 15.18825 14.625 15.18825L13.875 15.18825C12.839475 15.18825 12 14.348775 12 13.31325L12 8.25075zM13.875 7.500742499999999C13.460775000000002 7.500742499999999 13.125 7.836525 13.125 8.25075L13.125 13.31325C13.125 13.727437499999999 13.460775000000002 14.06325 13.875 14.06325L14.625 14.06325C15.039224999999998 14.06325 15.375 13.727437499999999 15.375 13.31325L15.375 8.25075C15.375 7.836525 15.039224999999998 7.500742499999999 14.625 7.500742499999999L13.875 7.500742499999999z"
+      fill="currentColor"
+    ></path>
+  </svg>
+)
+
+/** 查看图片图标 */
+const ViewPictureIcon = ({ className }: { className?: string }) => (
+  <svg
+    className={cn(className, 'inline-block w-20 align-middle')}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 22 22"
+    width="22"
+    height="22"
+  >
+    <path
+      d="M7.791666666666666 7.733060333333333C7.253044666666666 7.733060333333333 6.816416666666667 8.169688333333333 6.816416666666667 8.708310333333333C6.816416666666667 9.246946 7.253044666666666 9.683544999999999 7.791666666666666 9.683544999999999C8.330281000000001 9.683544999999999 8.766916666666667 9.246946 8.766916666666667 8.708310333333333C8.766916666666667 8.169688333333333 8.330281000000001 7.733060333333333 7.791666666666666 7.733060333333333zM5.558583333333333 8.708310333333333C5.558583333333333 7.475007999999999 6.558372 6.4752193333333325 7.791666666666666 6.4752193333333325C9.024961333333332 6.4752193333333325 10.02475 7.475007999999999 10.02475 8.708310333333333C10.02475 9.941568333333333 9.024961333333332 10.941378333333333 7.791666666666666 10.941378333333333C6.558372 10.941378333333333 5.558583333333333 9.941568333333333 5.558583333333333 8.708310333333333z"
+      fill="currentColor"
+    />
+    <path
+      d="M11 4.543596666666667C8.690401666666668 4.543596666666667 6.673815333333333 4.661083166666667 5.250284333333333 4.776523999999999C4.243521333333333 4.858162833333334 3.4624053333333333 5.627683666666666 3.37265 6.626020666666667C3.268142166666667 7.788485666666666 3.170833333333333 9.321563333333334 3.170833333333333 10.9978C3.170833333333333 12.673983333333332 3.268142166666667 14.207033333333332 3.37265 15.369535C3.4624053333333333 16.36785666666667 4.243521333333333 17.137388333333334 5.250284333333333 17.219013333333333C6.673816833333333 17.334481666666665 8.690401666666668 17.451966666666664 11 17.451966666666664C13.309854999999999 17.451966666666664 15.326548333333335 17.33439 16.750163333333333 17.218959999999996C17.756758333333334 17.137349999999998 18.5377 16.36804 18.627441666666666 15.36994C18.731925 14.207988333333333 18.829166666666666 12.675175 18.829166666666666 10.9978C18.829166666666666 9.320333333333332 18.731925 7.787542999999999 18.627441666666666 6.6255715C18.5377 5.627479 17.756758333333334 4.858190333333333 16.750163333333333 4.776553C15.326548333333335 4.661109166666666 13.309854999999999 4.543596666666667 11 4.543596666666667zM5.145209166666667 3.480780333333333C6.5952265 3.3631968333333333 8.647761666666666 3.2435966666666665 11 3.2435966666666665C13.352495000000001 3.2435966666666665 15.405159999999999 3.3632151666666665 16.855203333333332 3.4808078333333334C18.484758333333332 3.6129723333333335 19.775116666666666 4.873037 19.922241666666665 6.509160333333334C20.02923333333333 7.6992561666666655 20.129166666666666 9.272141666666666 20.129166666666666 10.9978C20.129166666666666 12.723366666666667 20.02923333333333 14.296258333333332 19.922241666666665 15.486381666666665C19.775116666666666 17.12246833333333 18.484758333333332 18.382566666666666 16.855203333333332 18.514723333333333C15.405159999999999 18.63231 13.352495000000001 18.751966666666664 11 18.751966666666664C8.647761666666666 18.751966666666664 6.5952265 18.63231 5.145209166666667 18.514761666666665C3.515391333333333 18.382566666666666 2.224978166666667 17.122193333333332 2.0778760000000003 15.485923333333332C1.970837 14.295341666666666 1.8708333333333333 12.722213333333332 1.8708333333333333 10.9978C1.8708333333333333 9.273295 1.970837 7.700146833333332 2.0778760000000003 6.509618666666666C2.224978166666667 4.8733365 3.515391333333333 3.6129448333333336 5.145209166666667 3.480780333333333z"
+      fill="currentColor"
+    />
+    <path
+      d="M14.586553333333333 12.397246666666668C14.19608 12.006681666666665 13.562881666666666 12.006681666666665 13.172316666666665 12.397208333333333L11.288666666666668 14.280896666666665C10.517069999999999 15.052493333333333 9.265836666666667 15.052218333333332 8.494585500000001 14.280124999999998C8.166277166666667 13.951508333333333 7.633659333333334 13.951363333333331 7.305149499999999 14.279834999999999L5.922092833333333 15.66269C5.6682380000000006 15.91648833333333 5.256674833333333 15.91648833333333 5.002853666666667 15.662636666666666C4.7490248333333325 15.4088 4.749050833333333 14.99722 5.002907166666666 14.743368333333333L6.385979166666666 13.360513333333333C7.222356166666667 12.524223333333333 8.578404666666666 12.524628333333332 9.414303333333333 13.361376666666667C9.677975 13.6253 10.105658333333334 13.625445 10.369436666666665 13.361666666666666L12.253033333333333 11.477978333333331C13.151301666666665 10.57971 14.607698333333333 10.579763333333334 15.505913333333332 11.478108333333331L16.99718 12.969611666666665C17.250978333333336 13.223448333333334 17.25094 13.63499 16.997049999999998 13.888841666666666C16.743198333333332 14.142639999999998 16.331671666666665 14.142639999999998 16.07782 13.88875L14.586553333333333 12.397246666666668z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+/**
+ * 渲染带行内样式的文本节点。
+ */
+const renderStyledText = (text: string, style: RichTextInlineStyle | undefined, index: number | string): ReactNode => {
+  if (!style) {
+    return <span key={`text-${index}`}>{text}</span>
+  }
+
+  const classNames: string[] = []
+  if (style.bold) classNames.push('font-bold')
+  if (style.italic) classNames.push('italic')
+  if (style.strike) classNames.push('line-through')
+
+  const inlineStyle: CSSProperties = {}
+  if (style.color) {
+    inlineStyle.color = style.color
+  }
+  if (style.fontSize) {
+    inlineStyle.fontSize = style.fontSize
+  }
+
+  if (style.link) {
+    return (
+      <a
+        key={`text-${index}`}
+        href={style.link}
+        className={classNames.join(' ') || undefined}
+        style={inlineStyle}
+        target="_blank"
+        rel="noopener noreferrer"
+        data-richtext-node="text"
+      >
+        {text}
+      </a>
+    )
+  }
+
+  if (classNames.length === 0 && Object.keys(inlineStyle).length === 0) {
+    return <span key={`text-${index}`}>{text}</span>
+  }
+
+  return (
+    <span key={`text-${index}`} className={classNames.join(' ') || undefined} style={inlineStyle} data-richtext-node="text">
+      {text}
+    </span>
+  )
+}
+
+/**
+ * 将单个富文本节点渲染成 React 节点。
+ *
+ * 这里的设计重点是"只在 template 侧落地 UI 语义"：
+ * - `core` 不需要依赖 React，也不用承担 JSX/SSR 运行时边界。
+ * - React 负责文本与属性转义，我们只补上图片协议白名单。
+ */
+const renderNodeToReact = (node: RichTextNode, index: number, options: RichTextRenderOptions): ReactNode => {
+  switch (node.type) {
+    case 'text': {
+      const text = node.text
+      const urlRegex = /https?:\/\/[-\w._~:/?#[\]@!$&'()*+,;=%]+/g
+      if (!urlRegex.test(text)) {
+        return renderStyledText(text, node.style, index)
+      }
+
+      const parts: ReactNode[] = []
+      let lastIndex = 0
+      let match: RegExpExecArray | null
+      urlRegex.lastIndex = 0
+      while ((match = urlRegex.exec(text)) !== null) {
+        if (match.index > lastIndex) {
+          parts.push(renderStyledText(text.slice(lastIndex, match.index), node.style, `${index}-pre-${match.index}`))
+        }
+        parts.push(
+          <span key={`url-${index}-${match.index}`} className="break-all">
+            {renderStyledText(match[0], node.style, `${index}-url-${match.index}`)}
+          </span>
+        )
+        lastIndex = match.index + match[0].length
+      }
+      if (lastIndex < text.length) {
+        parts.push(renderStyledText(text.slice(lastIndex), node.style, `${index}-post`))
+      }
+      return <React.Fragment key={`text-fragment-${index}`}>{parts}</React.Fragment>
+    }
+
+    case 'lineBreak':
+      return <br key={`br-${index}`} />
+
+    case 'mention':
+      return (
+        <span key={`mention-${index}`} className={options.mention?.className} data-richtext-node="mention" data-user-id={node.userId}>
+          {node.text}
+        </span>
+      )
+
+    case 'searchKeyword':
+      return (
+        <span
+          key={`search-${index}`}
+          className={options.searchKeyword?.className}
+          data-richtext-node="searchKeyword"
+          data-search-query-id={node.queryId}
+        >
+          <span>{node.text}</span>
+          <SearchKeywordIcon className={options.searchKeyword?.iconClassName} />
+        </span>
+      )
+
+    case 'emoji': {
+      const safeSrc = sanitizeImageSource(node.src)
+      if (!safeSrc) {
+        return node.name
+      }
+
+      return (
+        <img
+          key={`emoji-${index}`}
+          className="mx-1"
+          src={safeSrc}
+          alt={node.name}
+          style={getRichTextEmojiStyle(node.scale)}
+          referrerPolicy="no-referrer"
+          crossOrigin="anonymous"
+          data-richtext-node="emoji"
+        />
+      )
+    }
+
+    case 'topic':
+      return (
+        <span key={`topic-${index}`} className={options.topic?.className} data-richtext-node="topic">
+          <span
+            style={
+              options.iconScale && options.iconScale !== 1
+                ? { transform: `scale(${options.iconScale})`, transformOrigin: 'left center', display: 'inline-block' }
+                : undefined
+            }
+          >
+            <TopicIcon />
+          </span>
+          {node.text}
+        </span>
+      )
+
+    case 'hashtag':
+      return (
+        <span key={`hashtag-${index}`} className={options.hashtag?.className} data-richtext-node="hashtag">
+          {node.text}
+        </span>
+      )
+
+    case 'at':
+      return (
+        <span key={`at-${index}`} className={options.at?.className} data-richtext-node="at" data-user-id={node.userId}>
+          {node.text}
+        </span>
+      )
+
+    case 'lottery':
+      return (
+        <span key={`lottery-${index}`} className={options.lottery?.className} data-richtext-node="lottery">
+          <span
+            style={
+              options.iconScale && options.iconScale !== 1
+                ? { transform: `scale(${options.iconScale})`, transformOrigin: 'left center', display: 'inline-block' }
+                : undefined
+            }
+          >
+            <LotteryIcon />
+          </span>
+          {node.text}
+        </span>
+      )
+
+    case 'webLink':
+      return (
+        <a
+          key={`weblink-${index}`}
+          className={cn(options.webLink?.className, 'break-all')}
+          href={node.jumpUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          data-richtext-node="webLink"
+        >
+          <span
+            style={
+              options.iconScale && options.iconScale !== 1
+                ? { transform: `scale(${options.iconScale})`, transformOrigin: 'left center', display: 'inline-block' }
+                : undefined
+            }
+          >
+            <WebLinkIcon />
+          </span>
+          {node.text}
+        </a>
+      )
+
+    case 'opusLink':
+      return (
+        <span key={`opuslink-${index}`} className={options.opusLink?.className} data-richtext-node="opusLink" data-url={node.url}>
+          <span
+            style={
+              options.iconScale && options.iconScale !== 1
+                ? { transform: `scale(${options.iconScale})`, transformOrigin: 'left center', display: 'inline-block' }
+                : undefined
+            }
+          >
+            <OpusLinkIcon />
+          </span>
+          {node.text}
+        </span>
+      )
+
+    case 'vote':
+      return (
+        <span key={`vote-${index}`} className={options.vote?.className} data-richtext-node="vote">
+          <span
+            style={
+              options.iconScale && options.iconScale !== 1
+                ? { transform: `scale(${options.iconScale})`, transformOrigin: 'left center', display: 'inline-block' }
+                : undefined
+            }
+          >
+            <VoteIcon />
+          </span>
+          {node.text}
+        </span>
+      )
+
+    case 'viewPicture':
+      return (
+        <span key={`viewpicture-${index}`} className={options.viewPicture?.className} data-richtext-node="viewPicture">
+          <span
+            style={
+              options.iconScale && options.iconScale !== 1
+                ? { transform: `scale(${options.iconScale})`, transformOrigin: 'left center', display: 'inline-block' }
+                : undefined
+            }
+          >
+            <ViewPictureIcon />
+          </span>
+          {node.text}
+        </span>
+      )
+
+    case 'heading': {
+      const HeadingTag = `h${node.level}` as keyof React.JSX.IntrinsicElements
+      const sizeClass =
+        node.level === 1
+          ? 'text-[64px]'
+          : node.level === 2
+            ? 'text-[58px]'
+            : node.level === 3
+              ? 'text-[52px]'
+              : node.level === 4
+                ? 'text-[48px]'
+                : node.level === 5
+                  ? 'text-[44px]'
+                  : 'text-[40px]'
+      return (
+        <HeadingTag
+          key={`heading-${index}`}
+          className={`${sizeClass} font-bold my-10`}
+          data-richtext-node="heading"
+          data-heading-level={node.level}
+        >
+          {node.nodes.map((child, childIndex) => renderNodeToReact(child, childIndex, options))}
+        </HeadingTag>
+      )
+    }
+
+    case 'paragraph':
+      return (
+        <p key={`paragraph-${index}`} data-richtext-node="paragraph">
+          {node.nodes.map((child, childIndex) => renderNodeToReact(child, childIndex, options))}
+        </p>
+      )
+
+    case 'image': {
+      const safeSrc = sanitizeImageSource(node.src)
+      if (!safeSrc) {
+        return null
+      }
+      return (
+        <div key={`image-${index}`} data-richtext-node="image">
+          <img className="rounded-4xl" src={safeSrc} alt={node.alt || ''} referrerPolicy="no-referrer" crossOrigin="anonymous" />
+          {node.caption && <div className="mt-6 text-center text-[36px] text-foreground/60 select-text">{node.caption}</div>}
+        </div>
+      )
+    }
+
+    case 'horizontalRule':
+      return <div key={`hr-${index}`} className="my-16 w-full h-px bg-border" data-richtext-node="horizontalRule" />
+
+    case 'blockquote':
+      return (
+        <blockquote key={`blockquote-${index}`} data-richtext-node="blockquote">
+          {node.nodes.map((child, childIndex) => renderNodeToReact(child, childIndex, options))}
+        </blockquote>
+      )
+
+    case 'list': {
+      const ListTag = node.ordered ? 'ol' : 'ul'
+      return (
+        <ListTag key={`list-${index}`} data-richtext-node="list" data-list-ordered={node.ordered}>
+          {node.items.map((item, itemIndex) => renderNodeToReact(item, itemIndex, options))}
+        </ListTag>
+      )
+    }
+
+    case 'listItem':
+      return (
+        <li key={`listitem-${index}`} data-richtext-node="listItem">
+          {node.nodes.map((child, childIndex) => renderNodeToReact(child, childIndex, options))}
+        </li>
+      )
+
+    case 'codeBlock': {
+      const lines = node.content.split('\n')
+      const showLang = node.language && node.language !== 'plaintext'
+      return (
+        <div
+          key={`codeblock-${index}`}
+          className={cn('bg-surface rounded-4xl my-8 border border-border', options.codeBlock?.className)}
+          data-richtext-node="codeBlock"
+          data-language={node.language}
+        >
+          {showLang && (
+            <div className="px-12 py-6 text-[36px] font-medium text-muted border-b border-border" data-richtext-code-lang>
+              {node.language}
+            </div>
+          )}
+          <div className="py-8 pl-4 pr-12" data-richtext-code-body>
+            {lines.map((line, lineIndex) => (
+              <div key={`line-${lineIndex}`} className="flex gap-16 leading-[1.8]" data-richtext-code-line>
+                <span className="shrink-0 w-12 text-right text-[30px] text-muted select-none font-mono" data-richtext-code-lineno>
+                  {lineIndex + 1}
+                </span>
+                <code className="font-mono text-[34px] whitespace-pre-wrap break-all text-foreground" data-richtext-code-content>
+                  {line || ' '}
+                </code>
+              </div>
+            ))}
+          </div>
+        </div>
+      )
+    }
+
+    case 'linkCard':
+      return (
+        <a
+          key={`linkcard-${index}`}
+          className={options.linkCard?.className}
+          href={node.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          data-richtext-node="linkCard"
+          data-card-type={node.cardType}
+        >
+          {node.title}
+        </a>
+      )
+
+    default:
+      return null
+  }
+}
+
+/**
+ * 将富文本文档渲染成 React 节点。
+ *
+ * 这是 React 模板的首选渲染方式：
+ * - 不经过 HTML 字符串；
+ * - 不需要 `dangerouslySetInnerHTML`；
+ * - 更适合 SSR，因为传输边界仍然是纯 JSON。
+ */
+export const renderRichTextToReact = (document: RichTextDocument, options: RichTextRenderOptions = {}): ReactNode => {
+  return <>{document.nodes.map((node, index) => renderNodeToReact(node, index, options))}</>
+}