@intlayer/design-system 9.4.1 → 9.4.3

package/dist/esm/components/MarkDownRender/MarkDownIframe.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MarkDownIframe.mjs","names":[],"sources":["../../../../src/components/MarkDownRender/MarkDownIframe.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '@components/Button';\nimport { Container } from '@components/Container';\nimport { Link } from '@components/Link';\nimport { Modal } from '@components/Modal';\nimport { cn } from '@utils/cn';\nimport { MoveDiagonal, Play } from 'lucide-react';\nimport {\n  type ComponentProps,\n  type FC,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nfunction embedLinkMeta(src: string | undefined): {\n  href: string;\n  label: string;\n} {\n  if (!src) return { href: '', label: '' };\n  if (/^https?:\\/\\//i.test(src)) {\n    try {\n      const url = new URL(src);\n      return { href: url.href, label: url.host };\n    } catch {\n      return { href: src, label: src };\n    }\n  }\n  return { href: src, label: src };\n}\n\n/**\n * Reads the video id out of a YouTube embed address.\n *\n * @returns The video id, or `null` when the address is not a YouTube embed.\n */\nconst getYoutubeVideoId = (src: string | undefined): string | null => {\n  if (!src || !/^https?:\\/\\//i.test(src)) return null;\n\n  try {\n    const url = new URL(src);\n    if (!/(^|\\.)youtube(-nocookie)?\\.com$/.test(url.hostname)) return null;\n\n    const videoId = url.pathname.replace(/^\\/embed\\//, '').split('/')[0];\n\n    return videoId || null;\n  } catch {\n    return null;\n  }\n};\n\n/**\n * Tracks whether an element has come close enough to the viewport to be worth\n * loading.\n *\n * `loading=\"lazy\"` is not enough for embeds inside tabs or carousels: the\n * browser only defers frames that are far down the page, so a frame parked\n * off-screen by a transform — an inactive tab panel — still loads immediately.\n * A live-app embed costs upwards of a megabyte and seconds of main thread,\n * which is the whole page's performance budget spent on something nobody is\n * looking at.\n *\n * @returns A ref to attach to the placeholder, and whether it became visible.\n */\nconst useHasBecomeVisible = <ElementType extends HTMLElement>() => {\n  const elementRef = useRef<ElementType>(null);\n  const [hasBecomeVisible, setHasBecomeVisible] = useState(false);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element || hasBecomeVisible) return;\n\n    if (typeof IntersectionObserver === 'undefined') {\n      setHasBecomeVisible(true);\n      return;\n    }\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        if (entries.some((entry) => entry.isIntersecting)) {\n          setHasBecomeVisible(true);\n          observer.disconnect();\n        }\n      },\n      { rootMargin: '200px' }\n    );\n\n    observer.observe(element);\n\n    return () => observer.disconnect();\n  }, [hasBecomeVisible]);\n\n  return { elementRef, hasBecomeVisible };\n};\n\ntype EmbeddedFrameProps = {\n  src: string | undefined;\n  title: string | undefined;\n  className: string;\n  frameProps: Omit<ComponentProps<'iframe'>, 'src' | 'title' | 'className'>;\n};\n\n/**\n * The embed itself: a poster for YouTube, deferred loading for anything else.\n *\n * A YouTube player pulls well over a megabyte of script before it can show a\n * single frame. Standing in for it with its own thumbnail until the reader\n * presses play keeps that cost on the readers who actually watch the video.\n */\nconst EmbeddedFrame: FC<EmbeddedFrameProps> = ({\n  src,\n  title,\n  className,\n  frameProps,\n}) => {\n  const [isPlayRequested, setIsPlayRequested] = useState(false);\n  const { elementRef, hasBecomeVisible } =\n    useHasBecomeVisible<HTMLDivElement>();\n  const youtubeVideoId = getYoutubeVideoId(src);\n\n  if (youtubeVideoId && !isPlayRequested) {\n    return (\n      <button\n        type=\"button\"\n        aria-label={title ?? 'Play video'}\n        onClick={() => setIsPlayRequested(true)}\n        className={cn(\n          'group relative block cursor-pointer border-0 bg-card p-0',\n          className\n        )}\n      >\n        {/*\n         * The poster stands in for the player, so on a page that opens with a\n         * video it is the largest element painted — deferring it would defer\n         * the page's LCP. It is the one image here worth fetching eagerly.\n         */}\n        <img\n          src={`https://i.ytimg.com/vi/${youtubeVideoId}/hqdefault.jpg`}\n          alt=\"\"\n          fetchPriority=\"high\"\n          decoding=\"async\"\n          className=\"size-full object-cover\"\n        />\n        <span className=\"absolute inset-0 flex items-center justify-center\">\n          <span className=\"flex size-14 items-center justify-center rounded-full bg-text/70 text-text-opposite transition-transform group-hover:scale-110\">\n            <Play className=\"size-6 translate-x-0.5 fill-current\" />\n          </span>\n        </span>\n      </button>\n    );\n  }\n\n  if (!hasBecomeVisible && !isPlayRequested) {\n    // Same box as the frame it stands in for, so nothing shifts once it loads.\n    return <div ref={elementRef} aria-hidden className={className} />;\n  }\n\n  const frameSrc = (() => {\n    if (!isPlayRequested || !youtubeVideoId || !src) return src;\n\n    const playbackSrc = new URL(src);\n    playbackSrc.searchParams.set('autoplay', '1');\n\n    return playbackSrc.href;\n  })();\n\n  return (\n    <iframe\n      {...frameProps}\n      src={frameSrc}\n      title={title}\n      loading=\"lazy\"\n      className={className}\n    />\n  );\n};\n\nexport const MarkDownIframe: FC<ComponentProps<'iframe'>> = (props) => {\n  const { src, className, title, ...rest } = props;\n  const [isModalOpen, setIsModalOpen] = useState(false);\n  const { href, label } = embedLinkMeta(src);\n\n  return (\n    <Container\n      roundedSize=\"2xl\"\n      border\n      borderColor=\"neutral\"\n      className=\"overflow-hidden p-0\"\n      gap=\"none\"\n    >\n      <EmbeddedFrame\n        src={src}\n        title={title}\n        frameProps={rest}\n        className={cn(\n          'block max-h-[80vh] min-h-[12rem] w-full border-0',\n          className\n        )}\n      />\n      <div className=\"flex items-center justify-between gap-3 px-3 py-1\">\n        {href ? (\n          <Link\n            href={href}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            label=\"\"\n            color=\"neutral\"\n            className=\"inline-flex min-w-0 max-w-[calc(100%-3rem)] items-center gap-2 text-neutral text-xs underline-offset-2 hover:text-text hover:underline\"\n          >\n            {label}\n          </Link>\n        ) : (\n          <span className=\"text-neutral text-sm\">Embedded frame</span>\n        )}\n        <Button\n          variant=\"hoverable\"\n          size=\"icon-md\"\n          onClick={() => setIsModalOpen(true)}\n          label=\"Open embedded page in fullscreen\"\n          Icon={MoveDiagonal}\n        />\n      </div>\n\n      <Modal\n        isOpen={isModalOpen}\n        onClose={() => setIsModalOpen(false)}\n        size=\"unset\"\n        hasCloseButton\n        isScrollable\n        padding=\"sm\"\n      >\n        {isModalOpen && src ? (\n          <Container\n            roundedSize=\"2xl\"\n            border\n            borderColor=\"neutral\"\n            className=\"overflow-hidden p-0\"\n            gap=\"none\"\n          >\n            <iframe\n              {...rest}\n              src={src}\n              title={title ?? 'Embedded content'}\n              allowFullScreen\n              className=\"block min-h-[82vh] w-full border-0\"\n            />\n          </Container>\n        ) : null}\n      </Modal>\n    </Container>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAgBA,SAAS,cAAc,KAGrB;CACA,IAAI,CAAC,KAAK,OAAO;EAAE,MAAM;EAAI,OAAO;CAAG;CACvC,IAAI,gBAAgB,KAAK,GAAG,GAC1B,IAAI;EACF,MAAM,MAAM,IAAI,IAAI,GAAG;EACvB,OAAO;GAAE,MAAM,IAAI;GAAM,OAAO,IAAI;EAAK;CAC3C,QAAQ;EACN,OAAO;GAAE,MAAM;GAAK,OAAO;EAAI;CACjC;CAEF,OAAO;EAAE,MAAM;EAAK,OAAO;CAAI;AACjC;;;;;;AAOA,MAAM,qBAAqB,QAA2C;CACpE,IAAI,CAAC,OAAO,CAAC,gBAAgB,KAAK,GAAG,GAAG,OAAO;CAE/C,IAAI;EACF,MAAM,MAAM,IAAI,IAAI,GAAG;EACvB,IAAI,CAAC,kCAAkC,KAAK,IAAI,QAAQ,GAAG,OAAO;EAIlE,OAFgB,IAAI,SAAS,QAAQ,cAAc,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,MAEhD;CACpB,QAAQ;EACN,OAAO;CACT;AACF;;;;;;;;;;;;;;AAeA,MAAM,4BAA6D;CACjE,MAAM,aAAa,OAAoB,IAAI;CAC3C,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,KAAK;CAE9D,gBAAgB;EACd,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,WAAW,kBAAkB;EAElC,IAAI,OAAO,yBAAyB,aAAa;GAC/C,oBAAoB,IAAI;GACxB;EACF;EAEA,MAAM,WAAW,IAAI,sBAClB,YAAY;GACX,IAAI,QAAQ,MAAM,UAAU,MAAM,cAAc,GAAG;IACjD,oBAAoB,IAAI;IACxB,SAAS,WAAW;GACtB;EACF,GACA,EAAE,YAAY,QAAQ,CACxB;EAEA,SAAS,QAAQ,OAAO;EAExB,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,gBAAgB,CAAC;CAErB,OAAO;EAAE;EAAY;CAAiB;AACxC;;;;;;;;AAgBA,MAAM,iBAAyC,EAC7C,KACA,OACA,WACA,iBACI;CACJ,MAAM,CAAC,iBAAiB,sBAAsB,SAAS,KAAK;CAC5D,MAAM,EAAE,YAAY,qBAClB,oBAAoC;CACtC,MAAM,iBAAiB,kBAAkB,GAAG;CAE5C,IAAI,kBAAkB,CAAC,iBACrB,OACE,qBAAC,UAAD;EACE,MAAK;EACL,cAAY,SAAS;EACrB,eAAe,mBAAmB,IAAI;EACtC,WAAW,GACT,4DACA,SACF;YAPF,CAcE,oBAAC,OAAD;GACE,KAAK,0BAA0B,eAAe;GAC9C,KAAI;GACJ,eAAc;GACd,UAAS;GACT,WAAU;EACX,IACD,oBAAC,QAAD;GAAM,WAAU;aACd,oBAAC,QAAD;IAAM,WAAU;cACd,oBAAC,MAAD,EAAM,WAAU,sCAAuC;GACnD;EACF,EACA;;CAIZ,IAAI,CAAC,oBAAoB,CAAC,iBAExB,OAAO,oBAAC,OAAD;EAAK,KAAK;EAAY;EAAuB;CAAY;CAGlE,MAAM,kBAAkB;EACtB,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,CAAC,KAAK,OAAO;EAExD,MAAM,cAAc,IAAI,IAAI,GAAG;EAC/B,YAAY,aAAa,IAAI,YAAY,GAAG;EAE5C,OAAO,YAAY;CACrB,EAAC,CAAE;CAEH,OACE,oBAAC,UAAD;EACE,GAAI;EACJ,KAAK;EACE;EACP,SAAQ;EACG;CACZ;AAEL;AAEA,MAAa,kBAAgD,UAAU;CACrE,MAAM,EAAE,KAAK,WAAW,OAAO,GAAG,SAAS;CAC3C,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CACpD,MAAM,EAAE,MAAM,UAAU,cAAc,GAAG;CAEzC,OACE,qBAAC,WAAD;EACE,aAAY;EACZ;EACA,aAAY;EACZ,WAAU;EACV,KAAI;YALN;GAOE,oBAAC,eAAD;IACO;IACE;IACP,YAAY;IACZ,WAAW,GACT,oDACA,SACF;GACD;GACD,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,OACC,oBAAC,MAAD;KACQ;KACN,QAAO;KACP,KAAI;KACJ,OAAM;KACN,OAAM;KACN,WAAU;eAET;IACG,KAEN,oBAAC,QAAD;KAAM,WAAU;eAAuB;IAAoB,IAE7D,oBAAC,QAAD;KACE,SAAQ;KACR,MAAK;KACL,eAAe,eAAe,IAAI;KAClC,OAAM;KACN,MAAM;IACP,EACE;;GAEL,oBAAC,OAAD;IACE,QAAQ;IACR,eAAe,eAAe,KAAK;IACnC,MAAK;IACL;IACA;IACA,SAAQ;cAEP,eAAe,MACd,oBAAC,WAAD;KACE,aAAY;KACZ;KACA,aAAY;KACZ,WAAU;KACV,KAAI;eAEJ,oBAAC,UAAD;MACE,GAAI;MACC;MACL,OAAO,SAAS;MAChB;MACA,WAAU;KACX;IACQ,KACT;GACC;EACE;;AAEf"}
+{"version":3,"file":"MarkDownIframe.mjs","names":[],"sources":["../../../../src/components/MarkDownRender/MarkDownIframe.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '@components/Button';\nimport { Container } from '@components/Container';\nimport { Link } from '@components/Link';\nimport { Modal } from '@components/Modal';\nimport { cn } from '@utils/cn';\nimport { MoveDiagonal, Play } from 'lucide-react';\nimport {\n  type ComponentProps,\n  type FC,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nfunction embedLinkMeta(src: string | undefined): {\n  href: string;\n  label: string;\n} {\n  if (!src) return { href: '', label: '' };\n  if (/^https?:\\/\\//i.test(src)) {\n    try {\n      const url = new URL(src);\n      return { href: url.href, label: url.host };\n    } catch {\n      return { href: src, label: src };\n    }\n  }\n  return { href: src, label: src };\n}\n\n/**\n * Reads the video id out of a YouTube embed address.\n *\n * @returns The video id, or `null` when the address is not a YouTube embed.\n */\nconst getYoutubeVideoId = (src: string | undefined): string | null => {\n  if (!src || !/^https?:\\/\\//i.test(src)) return null;\n\n  try {\n    const url = new URL(src);\n    if (!/(^|\\.)youtube(-nocookie)?\\.com$/.test(url.hostname)) return null;\n\n    const videoId = url.pathname.replace(/^\\/embed\\//, '').split('/')[0];\n\n    return videoId || null;\n  } catch {\n    return null;\n  }\n};\n\n/**\n * Tracks whether an element has come close enough to the viewport to be worth\n * loading.\n *\n * `loading=\"lazy\"` is not enough for embeds inside tabs or carousels: the\n * browser only defers frames that are far down the page, so a frame parked\n * off-screen by a transform — an inactive tab panel — still loads immediately.\n * A live-app embed costs upwards of a megabyte and seconds of main thread,\n * which is the whole page's performance budget spent on something nobody is\n * looking at.\n *\n * @returns A ref to attach to the placeholder, and whether it became visible.\n */\nconst useHasBecomeVisible = <ElementType extends HTMLElement>() => {\n  const elementRef = useRef<ElementType>(null);\n  const [hasBecomeVisible, setHasBecomeVisible] = useState(false);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element || hasBecomeVisible) return;\n\n    if (typeof IntersectionObserver === 'undefined') {\n      setHasBecomeVisible(true);\n      return;\n    }\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        if (entries.some((entry) => entry.isIntersecting)) {\n          setHasBecomeVisible(true);\n          observer.disconnect();\n        }\n      },\n      { rootMargin: '200px' }\n    );\n\n    observer.observe(element);\n\n    return () => observer.disconnect();\n  }, [hasBecomeVisible]);\n\n  return { elementRef, hasBecomeVisible };\n};\n\ntype EmbeddedFrameProps = {\n  src: string | undefined;\n  title: string | undefined;\n  className: string;\n  frameProps: Omit<ComponentProps<'iframe'>, 'src' | 'title' | 'className'>;\n};\n\n/**\n * The embed itself: a poster for YouTube, deferred loading for anything else.\n *\n * A YouTube player pulls well over a megabyte of script before it can show a\n * single frame. Standing in for it with its own thumbnail until the reader\n * presses play keeps that cost on the readers who actually watch the video.\n */\nconst EmbeddedFrame: FC<EmbeddedFrameProps> = ({\n  src,\n  title,\n  className,\n  frameProps,\n}) => {\n  const [isPlayRequested, setIsPlayRequested] = useState(false);\n  const { elementRef, hasBecomeVisible } =\n    useHasBecomeVisible<HTMLDivElement>();\n  const youtubeVideoId = getYoutubeVideoId(src);\n\n  if (youtubeVideoId && !isPlayRequested) {\n    return (\n      <button\n        type=\"button\"\n        aria-label={title ?? 'Play video'}\n        onClick={() => setIsPlayRequested(true)}\n        className={cn(\n          'group relative block cursor-pointer border-0 bg-card p-0',\n          className\n        )}\n      >\n        {/*\n         * The poster stands in for the player, so on a page that opens with a\n         * video it is the largest element painted — deferring it would defer\n         * the page's LCP. It is the one image here worth fetching eagerly.\n         */}\n        <picture>\n          {/*\n           * YouTube serves the same poster as WebP under `vi_webp`, at roughly\n           * a third of the JPEG's weight. The `img` below stays as the\n           * fallback for the browsers that cannot decode it.\n           */}\n          <source\n            srcSet={`https://i.ytimg.com/vi_webp/${youtubeVideoId}/hqdefault.webp`}\n            type=\"image/webp\"\n          />\n          <img\n            src={`https://i.ytimg.com/vi/${youtubeVideoId}/hqdefault.jpg`}\n            alt=\"\"\n            width={480}\n            height={360}\n            fetchPriority=\"high\"\n            decoding=\"async\"\n            className=\"size-full object-cover\"\n          />\n        </picture>\n        <span className=\"absolute inset-0 flex items-center justify-center\">\n          <span className=\"flex size-14 items-center justify-center rounded-full bg-text/70 text-text-opposite transition-transform group-hover:scale-110\">\n            <Play className=\"size-6 translate-x-0.5 fill-current\" />\n          </span>\n        </span>\n      </button>\n    );\n  }\n\n  if (!hasBecomeVisible && !isPlayRequested) {\n    // Same box as the frame it stands in for, so nothing shifts once it loads.\n    return <div ref={elementRef} aria-hidden className={className} />;\n  }\n\n  const frameSrc = (() => {\n    if (!isPlayRequested || !youtubeVideoId || !src) return src;\n\n    const playbackSrc = new URL(src);\n    playbackSrc.searchParams.set('autoplay', '1');\n\n    return playbackSrc.href;\n  })();\n\n  return (\n    <iframe\n      {...frameProps}\n      src={frameSrc}\n      title={title}\n      loading=\"lazy\"\n      className={className}\n    />\n  );\n};\n\nexport const MarkDownIframe: FC<ComponentProps<'iframe'>> = (props) => {\n  const { src, className, title, ...rest } = props;\n  const [isModalOpen, setIsModalOpen] = useState(false);\n  const { href, label } = embedLinkMeta(src);\n\n  return (\n    <Container\n      roundedSize=\"2xl\"\n      border\n      borderColor=\"neutral\"\n      className=\"overflow-hidden p-0\"\n      gap=\"none\"\n    >\n      <EmbeddedFrame\n        src={src}\n        title={title}\n        frameProps={rest}\n        className={cn(\n          'block max-h-[80vh] min-h-[12rem] w-full border-0',\n          className\n        )}\n      />\n      <div className=\"flex items-center justify-between gap-3 px-3 py-1\">\n        {href ? (\n          <Link\n            href={href}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            label=\"\"\n            color=\"neutral\"\n            className=\"inline-flex min-w-0 max-w-[calc(100%-3rem)] items-center gap-2 text-muted-foreground text-xs underline-offset-2 hover:text-foreground hover:underline\"\n          >\n            {label}\n          </Link>\n        ) : (\n          <span className=\"text-neutral text-sm\">Embedded frame</span>\n        )}\n        <Button\n          variant=\"hoverable\"\n          size=\"icon-md\"\n          onClick={() => setIsModalOpen(true)}\n          label=\"Open embedded page in fullscreen\"\n          Icon={MoveDiagonal}\n        />\n      </div>\n\n      <Modal\n        isOpen={isModalOpen}\n        onClose={() => setIsModalOpen(false)}\n        size=\"unset\"\n        hasCloseButton\n        isScrollable\n        padding=\"sm\"\n      >\n        {isModalOpen && src ? (\n          <Container\n            roundedSize=\"2xl\"\n            border\n            borderColor=\"neutral\"\n            className=\"overflow-hidden p-0\"\n            gap=\"none\"\n          >\n            <iframe\n              {...rest}\n              src={src}\n              title={title ?? 'Embedded content'}\n              allowFullScreen\n              className=\"block min-h-[82vh] w-full border-0\"\n            />\n          </Container>\n        ) : null}\n      </Modal>\n    </Container>\n  );\n};\n"],"mappings":"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"}

package/dist/esm/components/MarkDownRender/MarkDownRender.mjs

@@ -15,36 +15,36 @@ import { renderMarkdown } from "react-intlayer/markdown";
 //#region src/components/MarkDownRender/MarkDownRender.tsx
 const H1Renderer = (props) => /* @__PURE__ */ jsx(H1, {
 	isClickable: true,
-	className: "mb-16 mb-8 text-text",
+	className: "mb-16 mb-8 text-foreground",
 	...props
 });
 const H2Renderer = (props) => /* @__PURE__ */ jsx(H2, {
 	isClickable: true,
-	className: "mt-16 text-text",
+	className: "mt-16 text-foreground",
 	...props
 });
 const H3Renderer = (props) => /* @__PURE__ */ jsx(H3, {
 	isClickable: true,
-	className: "mt-5 text-text",
+	className: "mt-5 text-foreground",
 	...props
 });
 const H4Renderer = (props) => /* @__PURE__ */ jsx(H4, {
 	isClickable: true,
-	className: "mt-3 text-text",
+	className: "mt-3 text-foreground",
 	...props
 });
 const H5Renderer = (props) => /* @__PURE__ */ jsx(H5, {
 	isClickable: true,
-	className: "mt-3 text-text",
+	className: "mt-3 text-foreground",
 	...props
 });
 const H6Renderer = (props) => /* @__PURE__ */ jsx(H6, {
 	isClickable: true,
-	className: "mt-3 text-text",
+	className: "mt-3 text-foreground",
 	...props
 });
 const StrongRenderer = (props) => /* @__PURE__ */ jsx("strong", {
-	className: "text-text",
+	className: "text-foreground",
 	...props
 });
 const MemoizedCodeBlock = memo(({ className, children, highlightedHtml, lang, ...rest }) => {
@@ -62,6 +62,7 @@ const MemoizedCodeBlock = memo(({ className, children, highlightedHtml, lang, ..
 		language,
 		showHeader: true,
 		highlightedHtml,
+		className: "border",
 		children: content
 	});
 }, (prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.className === nextProps.className && prevProps.highlightedHtml === nextProps.highlightedHtml);
@@ -74,7 +75,7 @@ const MemoizedCodeBlock = memo(({ className, children, highlightedHtml, lang, ..
 */
 const CodeRenderer = (props) => /* @__PURE__ */ jsx(MemoizedCodeBlock, { ...props });
 const BlockquoteRenderer = ({ className, ...props }) => /* @__PURE__ */ jsx("blockquote", {
-	className: cn("mt-5 gap-3 border-card border-l-4 pl-5 text-neutral [&_strong]:text-neutral", className),
+	className: cn("mt-5 gap-3 border-card border-l-4 pl-5 text-muted-foreground [&_strong]:text-neutral", className),
 	...props
 });
 const UlRenderer = ({ className, ...props }) => /* @__PURE__ */ jsx("ul", {

package/dist/esm/components/MarkDownRender/MarkDownRender.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MarkDownRender.mjs","names":[],"sources":["../../../../src/components/MarkDownRender/MarkDownRender.tsx"],"sourcesContent":["import type { LocalesValues } from '@intlayer/types/module_augmentation';\nimport { cn } from '@utils/cn';\nimport type { ComponentProps, ComponentPropsWithoutRef, FC } from 'react';\nimport { memo } from 'react';\nimport {\n  type MarkdownRenderer as MarkdownRendererIntlayer,\n  type ParsedMarkdown,\n  renderMarkdown,\n} from 'react-intlayer/markdown';\nimport { H1, H2, H3, H4, H5, H6 } from '../Headers';\nimport { Code } from '../IDE/Code';\nimport { CodeProvider } from '../IDE/CodeContext';\nimport type { CodeLanguage } from '../IDE/shikiLanguages';\nimport { Link } from '../Link';\nimport { Tab } from '../Tab';\nimport { TabProvider } from '../Tab/TabContext';\nimport { Hr, SmartTable, Td, Th, Tr } from '../Table';\nimport { MarkDownIframe } from './MarkDownIframe';\n\nexport type { ParsedMarkdown };\n\n// Extracted, stable component renderers\nconst H1Renderer = (props: ComponentProps<'h1'>) => (\n  <H1 isClickable className=\"mb-16 mb-8 text-text\" {...props} />\n);\nconst H2Renderer = (props: ComponentProps<'h2'>) => (\n  <H2 isClickable className=\"mt-16 text-text\" {...props} />\n);\nconst H3Renderer = (props: ComponentProps<'h3'>) => (\n  <H3 isClickable className=\"mt-5 text-text\" {...props} />\n);\nconst H4Renderer = (props: ComponentProps<'h4'>) => (\n  <H4 isClickable className=\"mt-3 text-text\" {...props} />\n);\nconst H5Renderer = (props: ComponentProps<'h5'>) => (\n  <H5 isClickable className=\"mt-3 text-text\" {...props} />\n);\nconst H6Renderer = (props: ComponentProps<'h6'>) => (\n  <H6 isClickable className=\"mt-3 text-text\" {...props} />\n);\nconst StrongRenderer = (props: ComponentProps<'strong'>) => (\n  <strong className=\"text-text\" {...props} />\n);\n\nconst MemoizedCodeBlock = memo(\n  ({\n    className,\n    children,\n    highlightedHtml,\n    lang, // Destructure html lang prop to prevent passing invalid BCP-47 language tag to Code component\n    ...rest\n  }: ComponentProps<'code'> & { highlightedHtml?: string }) => {\n    const content = String(children ?? '').replace(/\\n$/, '');\n    const isBlock = !!className;\n\n    if (!isBlock) {\n      const decodedContent = content.replace(\n        /&(?:amp;)?#(\\d+);/g,\n        (_, code: string) => String.fromCharCode(parseInt(code, 10))\n      );\n      return (\n        <code className=\"rounded-md border border-neutral/30 bg-card/60 box-decoration-clone px-1.5 py-0.5 font-mono text-[0.875em] leading-[inherit]\">\n          {decodedContent}\n        </code>\n      );\n    }\n\n    const language = (className?.replace(/lang(?:uage)?-/, '') ||\n      'plaintext') as CodeLanguage;\n\n    return (\n      <Code\n        {...rest}\n        language={language}\n        showHeader\n        highlightedHtml={highlightedHtml}\n      >\n        {content}\n      </Code>\n    );\n  },\n  (prevProps, nextProps) =>\n    prevProps.children === nextProps.children &&\n    prevProps.className === nextProps.className &&\n    prevProps.highlightedHtml === nextProps.highlightedHtml\n);\n\n/**\n * Renders a fenced code block.\n *\n * `highlightedHtml` reaches this renderer through the code node's attributes:\n * a pipeline that highlights the markdown ahead of time writes it there, and\n * the block then paints without loading the highlighter in the browser.\n */\nconst CodeRenderer = (props: ComponentProps<'code'>) => (\n  <MemoizedCodeBlock {...props} />\n);\n\nconst BlockquoteRenderer = ({\n  className,\n  ...props\n}: ComponentProps<'blockquote'>) => (\n  <blockquote\n    className={cn(\n      'mt-5 gap-3 border-card border-l-4 pl-5 text-neutral [&_strong]:text-neutral',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst UlRenderer = ({ className, ...props }: ComponentProps<'ul'>) => (\n  <ul\n    className={cn(\n      'mt-5 flex list-disc flex-col gap-3 pl-5 marker:text-neutral/80',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst OlRenderer = ({ className, ...props }: ComponentProps<'ol'>) => (\n  <ol\n    className={cn(\n      'mt-5 flex list-decimal flex-col gap-3 pl-5 marker:text-neutral/80',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst ImgRenderer = ({\n  className,\n  alt,\n  src,\n  ...props\n}: ComponentProps<'img'>) => (\n  <img\n    {...props}\n    alt={alt ?? ''}\n    loading=\"lazy\"\n    className={cn('max-h-[80vh] max-w-full rounded-md', className)}\n    src={\n      src?.includes('github.com')\n        ? src\n            ?.replace('github.com', 'raw.githubusercontent.com')\n            .replace('/blob/', '/') // GitHub raw URLs do not use /blob/\n        : src\n    }\n  />\n);\n\nconst createLinkRenderer = (locale?: LocalesValues) => {\n  return (props: ComponentProps<'a'>) => (\n    <Link\n      isExternalLink={props.href?.startsWith('http')}\n      underlined\n      locale={locale}\n      label=\"\"\n      color=\"text\"\n      {...(props as any)}\n    />\n  );\n};\n\nconst PreRenderer = (props: ComponentProps<'pre'>) => <>{props.children}</>;\nconst TableRenderer = (props: ComponentProps<typeof SmartTable>) => (\n  <SmartTable isRollable displayModal {...props} />\n);\n\nconst TabsRenderer = (props: ComponentProps<typeof Tab>) => (\n  <Tab\n    {...props}\n    className=\"rounded-xl border border-card\"\n    headerClassName=\"sticky rounded-xl top-24 z-5 bg-background/70 backdrop-blur overflow-x-auto\"\n  />\n);\nconst ColumnsRenderer = ({\n  className,\n  ...props\n}: ComponentPropsWithoutRef<'div'>) => (\n  <div className={cn('flex gap-4 max-md:flex-col', className)} {...props} />\n);\nconst ColumnRenderer = ({\n  className,\n  ...props\n}: ComponentPropsWithoutRef<'div'>) => (\n  <div className={cn('flex-1', className)} {...props} />\n);\n\nconst Iframe = (props: ComponentProps<'iframe'>) => (\n  <MarkDownIframe {...props} />\n);\n\n// Static configuration object for static renderers\nconst staticMarkdownComponents = {\n  h1: H1Renderer,\n  h2: H2Renderer,\n  h3: H3Renderer,\n  h4: H4Renderer,\n  h5: H5Renderer,\n  h6: H6Renderer,\n  strong: StrongRenderer,\n  blockquote: BlockquoteRenderer,\n  ul: UlRenderer,\n  ol: OlRenderer,\n  img: ImgRenderer,\n  pre: PreRenderer,\n  table: TableRenderer,\n  th: Th,\n  tr: Tr,\n  td: Td,\n  hr: Hr,\n  Tabs: TabsRenderer,\n  Tab: Tab.Item,\n  Columns: ColumnsRenderer,\n  Column: ColumnRenderer,\n  iframe: Iframe,\n};\n\n// Factory function to create components with dynamic props\nconst createMarkdownComponents = (locale?: LocalesValues) => ({\n  ...staticMarkdownComponents,\n  code: CodeRenderer,\n  a: createLinkRenderer(locale),\n});\n\n// Export static renderers for backward compatibility\nexport const baseMarkdownComponents = staticMarkdownComponents;\n\ntype MarkdownRendererProps = {\n  children: string | ParsedMarkdown;\n  locale?: LocalesValues;\n  forceBlock?: boolean;\n  preserveFrontmatter?: boolean;\n  tagfilter?: boolean;\n  components?: ComponentProps<typeof MarkdownRendererIntlayer>['components'];\n  wrapper?: ComponentProps<typeof MarkdownRendererIntlayer>['wrapper'];\n};\n\nexport const getIntlayerMarkdownOptions = () => ({\n  components: baseMarkdownComponents,\n});\n\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n  children,\n  locale,\n  forceBlock,\n  preserveFrontmatter,\n  tagfilter,\n  components: componentsProp,\n  wrapper,\n}) => {\n  const markdownComponents = createMarkdownComponents(locale);\n\n  const markdownContent = renderMarkdown(children, {\n    components: {\n      ...markdownComponents,\n      ...componentsProp,\n    },\n    wrapper,\n    forceBlock,\n    preserveFrontmatter,\n    tagfilter,\n  });\n\n  return (\n    <CodeProvider>\n      <TabProvider>{markdownContent}</TabProvider>\n    </CodeProvider>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"MarkDownRender.mjs","names":[],"sources":["../../../../src/components/MarkDownRender/MarkDownRender.tsx"],"sourcesContent":["import type { LocalesValues } from '@intlayer/types/module_augmentation';\nimport { cn } from '@utils/cn';\nimport type { ComponentProps, ComponentPropsWithoutRef, FC } from 'react';\nimport { memo } from 'react';\nimport {\n  type MarkdownRenderer as MarkdownRendererIntlayer,\n  type ParsedMarkdown,\n  renderMarkdown,\n} from 'react-intlayer/markdown';\nimport { H1, H2, H3, H4, H5, H6 } from '../Headers';\nimport { Code } from '../IDE/Code';\nimport { CodeProvider } from '../IDE/CodeContext';\nimport type { CodeLanguage } from '../IDE/shikiLanguages';\nimport { Link } from '../Link';\nimport { Tab } from '../Tab';\nimport { TabProvider } from '../Tab/TabContext';\nimport { Hr, SmartTable, Td, Th, Tr } from '../Table';\nimport { MarkDownIframe } from './MarkDownIframe';\n\nexport type { ParsedMarkdown };\n\n// Extracted, stable component renderers\nconst H1Renderer = (props: ComponentProps<'h1'>) => (\n  <H1 isClickable className=\"mb-16 mb-8 text-foreground\" {...props} />\n);\nconst H2Renderer = (props: ComponentProps<'h2'>) => (\n  <H2 isClickable className=\"mt-16 text-foreground\" {...props} />\n);\nconst H3Renderer = (props: ComponentProps<'h3'>) => (\n  <H3 isClickable className=\"mt-5 text-foreground\" {...props} />\n);\nconst H4Renderer = (props: ComponentProps<'h4'>) => (\n  <H4 isClickable className=\"mt-3 text-foreground\" {...props} />\n);\nconst H5Renderer = (props: ComponentProps<'h5'>) => (\n  <H5 isClickable className=\"mt-3 text-foreground\" {...props} />\n);\nconst H6Renderer = (props: ComponentProps<'h6'>) => (\n  <H6 isClickable className=\"mt-3 text-foreground\" {...props} />\n);\nconst StrongRenderer = (props: ComponentProps<'strong'>) => (\n  <strong className=\"text-foreground\" {...props} />\n);\n\nconst MemoizedCodeBlock = memo(\n  ({\n    className,\n    children,\n    highlightedHtml,\n    lang, // Destructure html lang prop to prevent passing invalid BCP-47 language tag to Code component\n    ...rest\n  }: ComponentProps<'code'> & { highlightedHtml?: string }) => {\n    const content = String(children ?? '').replace(/\\n$/, '');\n    const isBlock = !!className;\n\n    if (!isBlock) {\n      const decodedContent = content.replace(\n        /&(?:amp;)?#(\\d+);/g,\n        (_, code: string) => String.fromCharCode(parseInt(code, 10))\n      );\n      return (\n        <code className=\"rounded-md border border-neutral/30 bg-card/60 box-decoration-clone px-1.5 py-0.5 font-mono text-[0.875em] leading-[inherit]\">\n          {decodedContent}\n        </code>\n      );\n    }\n\n    const language = (className?.replace(/lang(?:uage)?-/, '') ||\n      'plaintext') as CodeLanguage;\n\n    return (\n      <Code\n        {...rest}\n        language={language}\n        showHeader\n        highlightedHtml={highlightedHtml}\n        className=\"border\"\n      >\n        {content}\n      </Code>\n    );\n  },\n  (prevProps, nextProps) =>\n    prevProps.children === nextProps.children &&\n    prevProps.className === nextProps.className &&\n    prevProps.highlightedHtml === nextProps.highlightedHtml\n);\n\n/**\n * Renders a fenced code block.\n *\n * `highlightedHtml` reaches this renderer through the code node's attributes:\n * a pipeline that highlights the markdown ahead of time writes it there, and\n * the block then paints without loading the highlighter in the browser.\n */\nconst CodeRenderer = (props: ComponentProps<'code'>) => (\n  <MemoizedCodeBlock {...props} />\n);\n\nconst BlockquoteRenderer = ({\n  className,\n  ...props\n}: ComponentProps<'blockquote'>) => (\n  <blockquote\n    className={cn(\n      'mt-5 gap-3 border-card border-l-4 pl-5 text-muted-foreground [&_strong]:text-neutral',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst UlRenderer = ({ className, ...props }: ComponentProps<'ul'>) => (\n  <ul\n    className={cn(\n      'mt-5 flex list-disc flex-col gap-3 pl-5 marker:text-neutral/80',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst OlRenderer = ({ className, ...props }: ComponentProps<'ol'>) => (\n  <ol\n    className={cn(\n      'mt-5 flex list-decimal flex-col gap-3 pl-5 marker:text-neutral/80',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst ImgRenderer = ({\n  className,\n  alt,\n  src,\n  ...props\n}: ComponentProps<'img'>) => (\n  <img\n    {...props}\n    alt={alt ?? ''}\n    loading=\"lazy\"\n    className={cn('max-h-[80vh] max-w-full rounded-md', className)}\n    src={\n      src?.includes('github.com')\n        ? src\n            ?.replace('github.com', 'raw.githubusercontent.com')\n            .replace('/blob/', '/') // GitHub raw URLs do not use /blob/\n        : src\n    }\n  />\n);\n\nconst createLinkRenderer = (locale?: LocalesValues) => {\n  return (props: ComponentProps<'a'>) => (\n    <Link\n      isExternalLink={props.href?.startsWith('http')}\n      underlined\n      locale={locale}\n      label=\"\"\n      color=\"text\"\n      {...(props as any)}\n    />\n  );\n};\n\nconst PreRenderer = (props: ComponentProps<'pre'>) => <>{props.children}</>;\nconst TableRenderer = (props: ComponentProps<typeof SmartTable>) => (\n  <SmartTable isRollable displayModal {...props} />\n);\n\nconst TabsRenderer = (props: ComponentProps<typeof Tab>) => (\n  <Tab\n    {...props}\n    className=\"rounded-xl border border-card\"\n    headerClassName=\"sticky rounded-xl top-24 z-5 bg-background/70 backdrop-blur overflow-x-auto\"\n  />\n);\nconst ColumnsRenderer = ({\n  className,\n  ...props\n}: ComponentPropsWithoutRef<'div'>) => (\n  <div className={cn('flex gap-4 max-md:flex-col', className)} {...props} />\n);\nconst ColumnRenderer = ({\n  className,\n  ...props\n}: ComponentPropsWithoutRef<'div'>) => (\n  <div className={cn('flex-1', className)} {...props} />\n);\n\nconst Iframe = (props: ComponentProps<'iframe'>) => (\n  <MarkDownIframe {...props} />\n);\n\n// Static configuration object for static renderers\nconst staticMarkdownComponents = {\n  h1: H1Renderer,\n  h2: H2Renderer,\n  h3: H3Renderer,\n  h4: H4Renderer,\n  h5: H5Renderer,\n  h6: H6Renderer,\n  strong: StrongRenderer,\n  blockquote: BlockquoteRenderer,\n  ul: UlRenderer,\n  ol: OlRenderer,\n  img: ImgRenderer,\n  pre: PreRenderer,\n  table: TableRenderer,\n  th: Th,\n  tr: Tr,\n  td: Td,\n  hr: Hr,\n  Tabs: TabsRenderer,\n  Tab: Tab.Item,\n  Columns: ColumnsRenderer,\n  Column: ColumnRenderer,\n  iframe: Iframe,\n};\n\n// Factory function to create components with dynamic props\nconst createMarkdownComponents = (locale?: LocalesValues) => ({\n  ...staticMarkdownComponents,\n  code: CodeRenderer,\n  a: createLinkRenderer(locale),\n});\n\n// Export static renderers for backward compatibility\nexport const baseMarkdownComponents = staticMarkdownComponents;\n\ntype MarkdownRendererProps = {\n  children: string | ParsedMarkdown;\n  locale?: LocalesValues;\n  forceBlock?: boolean;\n  preserveFrontmatter?: boolean;\n  tagfilter?: boolean;\n  components?: ComponentProps<typeof MarkdownRendererIntlayer>['components'];\n  wrapper?: ComponentProps<typeof MarkdownRendererIntlayer>['wrapper'];\n};\n\nexport const getIntlayerMarkdownOptions = () => ({\n  components: baseMarkdownComponents,\n});\n\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n  children,\n  locale,\n  forceBlock,\n  preserveFrontmatter,\n  tagfilter,\n  components: componentsProp,\n  wrapper,\n}) => {\n  const markdownComponents = createMarkdownComponents(locale);\n\n  const markdownContent = renderMarkdown(children, {\n    components: {\n      ...markdownComponents,\n      ...componentsProp,\n    },\n    wrapper,\n    forceBlock,\n    preserveFrontmatter,\n    tagfilter,\n  });\n\n  return (\n    <CodeProvider>\n      <TabProvider>{markdownContent}</TabProvider>\n    </CodeProvider>\n  );\n};\n"],"mappings":"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"}

package/dist/esm/components/MarkdownEditor/MarkdownEditor.mjs

@@ -75,7 +75,7 @@ const MarkdownEditor = ({ defaultValue, onChange, editable = true, enableAI = tr
 			onUpdate: handleUpdate,
 			slotAfter: /* @__PURE__ */ jsx(ImageResizer, {}),
 			children: [/* @__PURE__ */ jsxs(EditorCommand, {
-				className: "z-50 h-auto max-h-[330px] overflow-y-auto rounded-lg border border-neutral/20 bg-card px-1 py-2 text-text shadow-xl transition-all",
+				className: "z-50 h-auto max-h-[330px] overflow-y-auto rounded-lg border bg-card px-1 py-2 text-foreground shadow-xl transition-all",
 				children: [/* @__PURE__ */ jsx(EditorCommandEmpty, {
 					className: "px-2 text-muted-foreground",
 					children: content.noResults.value
@@ -100,7 +100,7 @@ const MarkdownEditor = ({ defaultValue, onChange, editable = true, enableAI = tr
 				children: toolbar
 			}) : /* @__PURE__ */ jsx(EditorBubble, {
 				options: { placement: "top" },
-				className: "flex w-fit max-w-[90vw] rounded-lg border-[1.3px] border-neutral/20 bg-card/95 text-text shadow-xl backdrop-blur [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl",
+				className: "flex w-fit max-w-[90vw] rounded-lg border-[1.3px] bg-card/95 text-foreground shadow-xl backdrop-blur [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl",
 				children: toolbar
 			})]
 		}) })

package/dist/esm/components/MarkdownEditor/MarkdownEditor.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownEditor.mjs","names":[],"sources":["../../../../src/components/MarkdownEditor/MarkdownEditor.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { type FC, useMemo, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { defaultExtensions } from './extensions';\nimport { GenerativeMenuSwitch } from './generative/GenerativeMenuSwitch';\nimport {\n  type CreateEditorUploadFnOptions,\n  createEditorUploadFn,\n} from './imageUpload';\nimport {\n  EditorBubble,\n  EditorCommand,\n  EditorCommandEmpty,\n  EditorCommandItem,\n  EditorCommandList,\n  EditorContent,\n  type EditorInstance,\n  EditorRoot,\n  handleCommandNavigation,\n  handleImageDrop,\n  handleImagePaste,\n  ImageResizer,\n} from './novel';\nimport { ColorSelector } from './selectors/ColorSelector';\nimport { LinkSelector } from './selectors/LinkSelector';\nimport { NodeSelector } from './selectors/NodeSelector';\nimport { TextButtons } from './selectors/TextButtons';\nimport { createSlashCommand } from './slashCommand';\n\nconst Divider = () => <div className=\"h-full w-px shrink-0 bg-border\" />;\n\nexport type MarkdownEditorProps = {\n  /** Initial markdown value. */\n  defaultValue?: string;\n  /** Called with the serialized markdown on every change. */\n  onChange?: (markdown: string) => void;\n  /** Whether the document can be edited. Defaults to `true`. */\n  editable?: boolean;\n  /** Enables the AI bubble menu (\"Ask AI\"). Defaults to `true`. */\n  enableAI?: boolean;\n  /**\n   * Custom image uploader. When omitted, images are embedded inline as base64\n   * data URLs (no backend required).\n   */\n  uploadImage?: CreateEditorUploadFnOptions['uploadImage'];\n  /** Maximum allowed image size in megabytes. Defaults to `20`. */\n  maxImageSizeMb?: number;\n  /** Class applied to the editor surface. */\n  className?: string;\n};\n\n/**\n * Notion-style WYSIWYG markdown editor built on Novel / Tiptap.\n *\n * Features a slash command menu, a formatting bubble menu (node / link / color\n * / inline marks), image upload (drop / paste / slash), and an optional\n * AI assistant wired to the Intlayer AI backend.\n *\n * The value contract is markdown: pass `defaultValue` as a markdown string and\n * read changes from `onChange`.\n */\nexport const MarkdownEditor: FC<MarkdownEditorProps> = ({\n  defaultValue,\n  onChange,\n  editable = true,\n  enableAI = true,\n  uploadImage,\n  maxImageSizeMb,\n  className,\n}) => {\n  const [openAI, setOpenAI] = useState(false);\n  const content = useIntlayer('markdown-editor');\n\n  const uploadFn = useMemo(\n    () => createEditorUploadFn({ uploadImage, maxSizeMb: maxImageSizeMb }),\n    [uploadImage, maxImageSizeMb]\n  );\n\n  const { extensions, suggestionItems } = useMemo(() => {\n    const { slashCommand, suggestionItems: items } = createSlashCommand(\n      uploadFn,\n      content\n    );\n\n    return {\n      extensions: [...defaultExtensions, slashCommand],\n      suggestionItems: items,\n    };\n  }, [uploadFn, content]);\n\n  const handleUpdate = ({ editor }: { editor: EditorInstance }) => {\n    onChange?.(editor.storage.markdown.getMarkdown() as string);\n  };\n\n  const toolbar = (\n    <>\n      <NodeSelector />\n      <Divider />\n      <LinkSelector />\n      <Divider />\n      <TextButtons />\n      <Divider />\n      <ColorSelector />\n    </>\n  );\n\n  return (\n    <div className=\"relative w-full\">\n      <EditorRoot>\n        <EditorContent\n          immediatelyRender={false}\n          editable={editable}\n          initialContent={defaultValue ?? ''}\n          extensions={extensions}\n          className={cn('min-h-[350px] w-full max-w-full', className)}\n          editorProps={{\n            handleDOMEvents: {\n              keydown: (_view, event) => handleCommandNavigation(event),\n            },\n            handlePaste: (view, event) =>\n              handleImagePaste(view, event, uploadFn),\n            handleDrop: (view, event, _slice, moved) =>\n              handleImageDrop(view, event, moved, uploadFn),\n            attributes: {\n              // Content typography (headings, lists, spacing) is defined in\n              // `markdown-editor.css`, scoped to `.ProseMirror` — this project\n              // has no Tailwind `prose` plugin.\n              class: 'max-w-full pl-6 focus:outline-none',\n            },\n          }}\n          onUpdate={handleUpdate}\n          slotAfter={<ImageResizer />}\n        >\n          <EditorCommand className=\"z-50 h-auto max-h-[330px] overflow-y-auto rounded-lg border border-neutral/20 bg-card px-1 py-2 text-text shadow-xl transition-all\">\n            <EditorCommandEmpty className=\"px-2 text-muted-foreground\">\n              {content.noResults.value}\n            </EditorCommandEmpty>\n            <EditorCommandList>\n              {suggestionItems.map((item) => (\n                <EditorCommandItem\n                  value={item.title}\n                  onCommand={(val) => item.command?.(val)}\n                  className=\"flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm hover:bg-accent aria-selected:bg-accent\"\n                  key={item.title}\n                >\n                  <div className=\"flex size-10 items-center justify-center rounded-md border border-card bg-background\">\n                    {item.icon}\n                  </div>\n                  <div>\n                    <p className=\"font-medium\">{item.title}</p>\n                    <p className=\"text-muted-foreground text-xs\">\n                      {item.description}\n                    </p>\n                  </div>\n                </EditorCommandItem>\n              ))}\n            </EditorCommandList>\n          </EditorCommand>\n\n          {enableAI ? (\n            <GenerativeMenuSwitch open={openAI} onOpenChange={setOpenAI}>\n              {toolbar}\n            </GenerativeMenuSwitch>\n          ) : (\n            <EditorBubble\n              options={{ placement: 'top' }}\n              className=\"flex w-fit max-w-[90vw] rounded-lg border-[1.3px] border-neutral/20 bg-card/95 text-text shadow-xl backdrop-blur [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl\"\n            >\n              {toolbar}\n            </EditorBubble>\n          )}\n        </EditorContent>\n      </EditorRoot>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAM,gBAAgB,oBAAC,OAAD,EAAK,WAAU,iCAAkC;;;;;;;;;;;AAgCvE,MAAa,kBAA2C,EACtD,cACA,UACA,WAAW,MACX,WAAW,MACX,aACA,gBACA,gBACI;CACJ,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,UAAU,YAAY,iBAAiB;CAE7C,MAAM,WAAW,cACT,qBAAqB;EAAE;EAAa,WAAW;CAAe,CAAC,GACrE,CAAC,aAAa,cAAc,CAC9B;CAEA,MAAM,EAAE,YAAY,oBAAoB,cAAc;EACpD,MAAM,EAAE,cAAc,iBAAiB,UAAU,mBAC/C,UACA,OACF;EAEA,OAAO;GACL,YAAY,CAAC,GAAG,mBAAmB,YAAY;GAC/C,iBAAiB;EACnB;CACF,GAAG,CAAC,UAAU,OAAO,CAAC;CAEtB,MAAM,gBAAgB,EAAE,aAAyC;EAC/D,WAAW,OAAO,QAAQ,SAAS,YAAY,CAAW;CAC5D;CAEA,MAAM,UACJ;EACE,oBAAC,cAAD,CAAe;EACf,oBAAC,SAAD,CAAU;EACV,oBAAC,cAAD,CAAe;EACf,oBAAC,SAAD,CAAU;EACV,oBAAC,aAAD,CAAc;EACd,oBAAC,SAAD,CAAU;EACV,oBAAC,eAAD,CAAgB;CAChB;CAGJ,OACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,YAAD,YACE,qBAAC,eAAD;GACE,mBAAmB;GACT;GACV,gBAAgB,gBAAgB;GACpB;GACZ,WAAW,GAAG,mCAAmC,SAAS;GAC1D,aAAa;IACX,iBAAiB,EACf,UAAU,OAAO,UAAU,wBAAwB,KAAK,EAC1D;IACA,cAAc,MAAM,UAClB,iBAAiB,MAAM,OAAO,QAAQ;IACxC,aAAa,MAAM,OAAO,QAAQ,UAChC,gBAAgB,MAAM,OAAO,OAAO,QAAQ;IAC9C,YAAY,EAIV,OAAO,qCACT;GACF;GACA,UAAU;GACV,WAAW,oBAAC,cAAD,CAAe;aAtB5B,CAwBE,qBAAC,eAAD;IAAe,WAAU;cAAzB,CACE,oBAAC,oBAAD;KAAoB,WAAU;eAC3B,QAAQ,UAAU;IACD,IACpB,oBAAC,mBAAD,YACG,gBAAgB,KAAK,SACpB,qBAAC,mBAAD;KACE,OAAO,KAAK;KACZ,YAAY,QAAQ,KAAK,UAAU,GAAG;KACtC,WAAU;eAHZ,CAME,oBAAC,OAAD;MAAK,WAAU;gBACZ,KAAK;KACH,IACL,qBAAC,OAAD,aACE,oBAAC,KAAD;MAAG,WAAU;gBAAe,KAAK;KAAS,IAC1C,oBAAC,KAAD;MAAG,WAAU;gBACV,KAAK;KACL,EACA,IACY;OAXZ,KAAK,KAWO,CACpB,EACgB,EACN;OAEd,WACC,oBAAC,sBAAD;IAAsB,MAAM;IAAQ,cAAc;cAC/C;GACmB,KAEtB,oBAAC,cAAD;IACE,SAAS,EAAE,WAAW,MAAM;IAC5B,WAAU;cAET;GACW,EAEH;KACL;CACT;AAET"}
+{"version":3,"file":"MarkdownEditor.mjs","names":[],"sources":["../../../../src/components/MarkdownEditor/MarkdownEditor.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { type FC, useMemo, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { defaultExtensions } from './extensions';\nimport { GenerativeMenuSwitch } from './generative/GenerativeMenuSwitch';\nimport {\n  type CreateEditorUploadFnOptions,\n  createEditorUploadFn,\n} from './imageUpload';\nimport {\n  EditorBubble,\n  EditorCommand,\n  EditorCommandEmpty,\n  EditorCommandItem,\n  EditorCommandList,\n  EditorContent,\n  type EditorInstance,\n  EditorRoot,\n  handleCommandNavigation,\n  handleImageDrop,\n  handleImagePaste,\n  ImageResizer,\n} from './novel';\nimport { ColorSelector } from './selectors/ColorSelector';\nimport { LinkSelector } from './selectors/LinkSelector';\nimport { NodeSelector } from './selectors/NodeSelector';\nimport { TextButtons } from './selectors/TextButtons';\nimport { createSlashCommand } from './slashCommand';\n\nconst Divider = () => <div className=\"h-full w-px shrink-0 bg-border\" />;\n\nexport type MarkdownEditorProps = {\n  /** Initial markdown value. */\n  defaultValue?: string;\n  /** Called with the serialized markdown on every change. */\n  onChange?: (markdown: string) => void;\n  /** Whether the document can be edited. Defaults to `true`. */\n  editable?: boolean;\n  /** Enables the AI bubble menu (\"Ask AI\"). Defaults to `true`. */\n  enableAI?: boolean;\n  /**\n   * Custom image uploader. When omitted, images are embedded inline as base64\n   * data URLs (no backend required).\n   */\n  uploadImage?: CreateEditorUploadFnOptions['uploadImage'];\n  /** Maximum allowed image size in megabytes. Defaults to `20`. */\n  maxImageSizeMb?: number;\n  /** Class applied to the editor surface. */\n  className?: string;\n};\n\n/**\n * Notion-style WYSIWYG markdown editor built on Novel / Tiptap.\n *\n * Features a slash command menu, a formatting bubble menu (node / link / color\n * / inline marks), image upload (drop / paste / slash), and an optional\n * AI assistant wired to the Intlayer AI backend.\n *\n * The value contract is markdown: pass `defaultValue` as a markdown string and\n * read changes from `onChange`.\n */\nexport const MarkdownEditor: FC<MarkdownEditorProps> = ({\n  defaultValue,\n  onChange,\n  editable = true,\n  enableAI = true,\n  uploadImage,\n  maxImageSizeMb,\n  className,\n}) => {\n  const [openAI, setOpenAI] = useState(false);\n  const content = useIntlayer('markdown-editor');\n\n  const uploadFn = useMemo(\n    () => createEditorUploadFn({ uploadImage, maxSizeMb: maxImageSizeMb }),\n    [uploadImage, maxImageSizeMb]\n  );\n\n  const { extensions, suggestionItems } = useMemo(() => {\n    const { slashCommand, suggestionItems: items } = createSlashCommand(\n      uploadFn,\n      content\n    );\n\n    return {\n      extensions: [...defaultExtensions, slashCommand],\n      suggestionItems: items,\n    };\n  }, [uploadFn, content]);\n\n  const handleUpdate = ({ editor }: { editor: EditorInstance }) => {\n    onChange?.(editor.storage.markdown.getMarkdown() as string);\n  };\n\n  const toolbar = (\n    <>\n      <NodeSelector />\n      <Divider />\n      <LinkSelector />\n      <Divider />\n      <TextButtons />\n      <Divider />\n      <ColorSelector />\n    </>\n  );\n\n  return (\n    <div className=\"relative w-full\">\n      <EditorRoot>\n        <EditorContent\n          immediatelyRender={false}\n          editable={editable}\n          initialContent={defaultValue ?? ''}\n          extensions={extensions}\n          className={cn('min-h-[350px] w-full max-w-full', className)}\n          editorProps={{\n            handleDOMEvents: {\n              keydown: (_view, event) => handleCommandNavigation(event),\n            },\n            handlePaste: (view, event) =>\n              handleImagePaste(view, event, uploadFn),\n            handleDrop: (view, event, _slice, moved) =>\n              handleImageDrop(view, event, moved, uploadFn),\n            attributes: {\n              // Content typography (headings, lists, spacing) is defined in\n              // `markdown-editor.css`, scoped to `.ProseMirror` — this project\n              // has no Tailwind `prose` plugin.\n              class: 'max-w-full pl-6 focus:outline-none',\n            },\n          }}\n          onUpdate={handleUpdate}\n          slotAfter={<ImageResizer />}\n        >\n          <EditorCommand className=\"z-50 h-auto max-h-[330px] overflow-y-auto rounded-lg border bg-card px-1 py-2 text-foreground shadow-xl transition-all\">\n            <EditorCommandEmpty className=\"px-2 text-muted-foreground\">\n              {content.noResults.value}\n            </EditorCommandEmpty>\n            <EditorCommandList>\n              {suggestionItems.map((item) => (\n                <EditorCommandItem\n                  value={item.title}\n                  onCommand={(val) => item.command?.(val)}\n                  className=\"flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm hover:bg-accent aria-selected:bg-accent\"\n                  key={item.title}\n                >\n                  <div className=\"flex size-10 items-center justify-center rounded-md border border-card bg-background\">\n                    {item.icon}\n                  </div>\n                  <div>\n                    <p className=\"font-medium\">{item.title}</p>\n                    <p className=\"text-muted-foreground text-xs\">\n                      {item.description}\n                    </p>\n                  </div>\n                </EditorCommandItem>\n              ))}\n            </EditorCommandList>\n          </EditorCommand>\n\n          {enableAI ? (\n            <GenerativeMenuSwitch open={openAI} onOpenChange={setOpenAI}>\n              {toolbar}\n            </GenerativeMenuSwitch>\n          ) : (\n            <EditorBubble\n              options={{ placement: 'top' }}\n              className=\"flex w-fit max-w-[90vw] rounded-lg border-[1.3px] bg-card/95 text-foreground shadow-xl backdrop-blur [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl\"\n            >\n              {toolbar}\n            </EditorBubble>\n          )}\n        </EditorContent>\n      </EditorRoot>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAM,gBAAgB,oBAAC,OAAD,EAAK,WAAU,iCAAkC;;;;;;;;;;;AAgCvE,MAAa,kBAA2C,EACtD,cACA,UACA,WAAW,MACX,WAAW,MACX,aACA,gBACA,gBACI;CACJ,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,UAAU,YAAY,iBAAiB;CAE7C,MAAM,WAAW,cACT,qBAAqB;EAAE;EAAa,WAAW;CAAe,CAAC,GACrE,CAAC,aAAa,cAAc,CAC9B;CAEA,MAAM,EAAE,YAAY,oBAAoB,cAAc;EACpD,MAAM,EAAE,cAAc,iBAAiB,UAAU,mBAC/C,UACA,OACF;EAEA,OAAO;GACL,YAAY,CAAC,GAAG,mBAAmB,YAAY;GAC/C,iBAAiB;EACnB;CACF,GAAG,CAAC,UAAU,OAAO,CAAC;CAEtB,MAAM,gBAAgB,EAAE,aAAyC;EAC/D,WAAW,OAAO,QAAQ,SAAS,YAAY,CAAW;CAC5D;CAEA,MAAM,UACJ;EACE,oBAAC,cAAD,CAAe;EACf,oBAAC,SAAD,CAAU;EACV,oBAAC,cAAD,CAAe;EACf,oBAAC,SAAD,CAAU;EACV,oBAAC,aAAD,CAAc;EACd,oBAAC,SAAD,CAAU;EACV,oBAAC,eAAD,CAAgB;CAChB;CAGJ,OACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,YAAD,YACE,qBAAC,eAAD;GACE,mBAAmB;GACT;GACV,gBAAgB,gBAAgB;GACpB;GACZ,WAAW,GAAG,mCAAmC,SAAS;GAC1D,aAAa;IACX,iBAAiB,EACf,UAAU,OAAO,UAAU,wBAAwB,KAAK,EAC1D;IACA,cAAc,MAAM,UAClB,iBAAiB,MAAM,OAAO,QAAQ;IACxC,aAAa,MAAM,OAAO,QAAQ,UAChC,gBAAgB,MAAM,OAAO,OAAO,QAAQ;IAC9C,YAAY,EAIV,OAAO,qCACT;GACF;GACA,UAAU;GACV,WAAW,oBAAC,cAAD,CAAe;aAtB5B,CAwBE,qBAAC,eAAD;IAAe,WAAU;cAAzB,CACE,oBAAC,oBAAD;KAAoB,WAAU;eAC3B,QAAQ,UAAU;IACD,IACpB,oBAAC,mBAAD,YACG,gBAAgB,KAAK,SACpB,qBAAC,mBAAD;KACE,OAAO,KAAK;KACZ,YAAY,QAAQ,KAAK,UAAU,GAAG;KACtC,WAAU;eAHZ,CAME,oBAAC,OAAD;MAAK,WAAU;gBACZ,KAAK;KACH,IACL,qBAAC,OAAD,aACE,oBAAC,KAAD;MAAG,WAAU;gBAAe,KAAK;KAAS,IAC1C,oBAAC,KAAD;MAAG,WAAU;gBACV,KAAK;KACL,EACA,IACY;OAXZ,KAAK,KAWO,CACpB,EACgB,EACN;OAEd,WACC,oBAAC,sBAAD;IAAsB,MAAM;IAAQ,cAAc;cAC/C;GACmB,KAEtB,oBAAC,cAAD;IACE,SAAS,EAAE,WAAW,MAAM;IAC5B,WAAU;cAET;GACW,EAEH;KACL;CACT;AAET"}

package/dist/esm/components/MarkdownEditor/extensions.mjs

@@ -1,10 +1,10 @@
 import CustomKeymap from "./novel/extensions/custom-keymap.mjs";
 import UpdatedImage from "./novel/extensions/updated-image.mjs";
 import { AIHighlight } from "./novel/extensions/ai-highlight.mjs";
+import { CodeBlockShiki } from "./novel/extensions/code-block-shiki.mjs";
 import { CharacterCount, Color, GlobalDragHandle, HighlightExtension, HorizontalRule as Horizontal, MarkdownExtension, Placeholder as PlaceholderExtension, StarterKit, TaskItem, TaskList, TextStyle, TiptapImage, TiptapLink, TiptapUnderline, Youtube } from "./novel/extensions/index.mjs";
 import { UploadImagesPlugin } from "./novel/plugins/upload-images.mjs";
 import { cx } from "class-variance-authority";
-import { CodeBlockShiki } from "tiptap-extension-code-block-shiki";
 
 //#region src/components/MarkdownEditor/extensions.ts
 const aiHighlight = AIHighlight;

package/dist/esm/components/MarkdownEditor/extensions.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"extensions.mjs","names":["HorizontalRule","Placeholder"],"sources":["../../../../src/components/MarkdownEditor/extensions.ts"],"sourcesContent":["import { cx } from 'class-variance-authority';\nimport { CodeBlockShiki } from 'tiptap-extension-code-block-shiki';\nimport {\n  AIHighlight,\n  CharacterCount,\n  Color,\n  CustomKeymap,\n  GlobalDragHandle,\n  HighlightExtension,\n  HorizontalRule,\n  MarkdownExtension,\n  Placeholder,\n  StarterKit,\n  TaskItem,\n  TaskList,\n  TextStyle,\n  TiptapImage,\n  TiptapLink,\n  TiptapUnderline,\n  UpdatedImage,\n  UploadImagesPlugin,\n  Youtube,\n} from './novel';\n\nconst aiHighlight = AIHighlight;\n\nconst tiptapLink = TiptapLink.configure({\n  HTMLAttributes: {\n    class: cx(\n      'text-muted-foreground underline underline-offset-[3px] hover:text-primary transition-colors cursor-pointer'\n    ),\n  },\n});\n\nconst tiptapImage = TiptapImage.extend({\n  addProseMirrorPlugins() {\n    return [\n      UploadImagesPlugin({\n        imageClass: cx('opacity-40 rounded-lg border border-stone-200'),\n      }),\n    ];\n  },\n}).configure({\n  allowBase64: true,\n  HTMLAttributes: {\n    class: cx('rounded-lg border border-muted'),\n  },\n});\n\nconst updatedImage = UpdatedImage.configure({\n  HTMLAttributes: {\n    class: cx('rounded-lg border border-muted'),\n  },\n});\n\nconst taskList = TaskList.configure({\n  HTMLAttributes: {\n    class: cx('not-prose pl-2'),\n  },\n});\n\nconst taskItem = TaskItem.configure({\n  HTMLAttributes: {\n    class: cx('flex gap-2 items-start my-4'),\n  },\n  nested: true,\n});\n\nconst horizontalRule = HorizontalRule.configure({\n  HTMLAttributes: {\n    class: cx('mt-4 mb-6 border-t border-muted-foreground'),\n  },\n});\n\nconst starterKit = StarterKit.configure({\n  bulletList: {\n    HTMLAttributes: {\n      class: cx('list-disc list-outside leading-3 -mt-2'),\n    },\n  },\n  orderedList: {\n    HTMLAttributes: {\n      class: cx('list-decimal list-outside leading-3 -mt-2'),\n    },\n  },\n  listItem: {\n    HTMLAttributes: {\n      class: cx('leading-normal -mb-2'),\n    },\n  },\n  blockquote: {\n    HTMLAttributes: {\n      class: cx('border-l-4 border-primary'),\n    },\n  },\n  // Disabled in favor of the shiki-powered `codeBlock` extension below.\n  codeBlock: false,\n  code: {\n    HTMLAttributes: {\n      class: cx('rounded-md bg-muted px-1.5 py-1 font-mono font-medium'),\n      spellcheck: 'false',\n    },\n  },\n  horizontalRule: false,\n  dropcursor: {\n    color: '#DBEAFE',\n    width: 4,\n  },\n  gapcursor: false,\n});\n\n/**\n * Code block with syntax highlighting powered by shiki (the same highlighter\n * the rest of the design-system uses in `IDE/CodeBlockShiki` and\n * `MarkDownRender`). Languages are lazy-loaded on demand and the dual\n * `github-light` / `github-dark` themes emit `--shiki-dark` CSS variables that\n * `markdown-editor.css` toggles under `[data-theme=\"dark\"]`.\n */\nconst codeBlock = CodeBlockShiki.configure({\n  defaultLanguage: null,\n  defaultTheme: 'github-light',\n  themes: {\n    light: 'github-light',\n    dark: 'github-dark',\n  },\n  HTMLAttributes: {\n    class: cx(\n      'rounded-md bg-muted text-muted-foreground border p-5 font-mono font-medium'\n    ),\n  },\n});\n\nconst youtube = Youtube.configure({\n  HTMLAttributes: {\n    class: cx('rounded-lg border border-muted'),\n  },\n  inline: false,\n});\n\nconst characterCount = CharacterCount.configure();\n\nconst markdownExtension = MarkdownExtension.configure({\n  html: true,\n  tightLists: true,\n  tightListClass: 'tight',\n  bulletListMarker: '-',\n  linkify: false,\n  breaks: false,\n  transformPastedText: false,\n  transformCopiedText: false,\n});\n\n/**\n * Default Tiptap/Novel extensions powering the MarkdownEditor.\n *\n * The slash-command extension is intentionally not included here because it\n * needs a runtime image-upload handler; it is appended by the editor itself.\n */\nexport const defaultExtensions = [\n  starterKit,\n  Placeholder,\n  tiptapLink,\n  tiptapImage,\n  updatedImage,\n  taskList,\n  taskItem,\n  horizontalRule,\n  aiHighlight,\n  codeBlock,\n  youtube,\n  characterCount,\n  TiptapUnderline,\n  markdownExtension,\n  HighlightExtension,\n  TextStyle,\n  Color,\n  CustomKeymap,\n  GlobalDragHandle,\n];\n"],"mappings":";;;;;;;;;AAwBA,MAAM,cAAc;AAEpB,MAAM,aAAa,WAAW,UAAU,EACtC,gBAAgB,EACd,OAAO,GACL,4GACF,EACF,EACF,CAAC;AAED,MAAM,cAAc,YAAY,OAAO,EACrC,wBAAwB;CACtB,OAAO,CACL,mBAAmB,EACjB,YAAY,GAAG,+CAA+C,EAChE,CAAC,CACH;AACF,EACF,CAAC,CAAC,CAAC,UAAU;CACX,aAAa;CACb,gBAAgB,EACd,OAAO,GAAG,gCAAgC,EAC5C;AACF,CAAC;AAED,MAAM,eAAe,aAAa,UAAU,EAC1C,gBAAgB,EACd,OAAO,GAAG,gCAAgC,EAC5C,EACF,CAAC;AAED,MAAM,WAAW,SAAS,UAAU,EAClC,gBAAgB,EACd,OAAO,GAAG,gBAAgB,EAC5B,EACF,CAAC;AAED,MAAM,WAAW,SAAS,UAAU;CAClC,gBAAgB,EACd,OAAO,GAAG,6BAA6B,EACzC;CACA,QAAQ;AACV,CAAC;AAED,MAAM,iBAAiBA,WAAe,UAAU,EAC9C,gBAAgB,EACd,OAAO,GAAG,4CAA4C,EACxD,EACF,CAAC;AAED,MAAM,aAAa,WAAW,UAAU;CACtC,YAAY,EACV,gBAAgB,EACd,OAAO,GAAG,wCAAwC,EACpD,EACF;CACA,aAAa,EACX,gBAAgB,EACd,OAAO,GAAG,2CAA2C,EACvD,EACF;CACA,UAAU,EACR,gBAAgB,EACd,OAAO,GAAG,sBAAsB,EAClC,EACF;CACA,YAAY,EACV,gBAAgB,EACd,OAAO,GAAG,2BAA2B,EACvC,EACF;CAEA,WAAW;CACX,MAAM,EACJ,gBAAgB;EACd,OAAO,GAAG,uDAAuD;EACjE,YAAY;CACd,EACF;CACA,gBAAgB;CAChB,YAAY;EACV,OAAO;EACP,OAAO;CACT;CACA,WAAW;AACb,CAAC;;;;;;;;AASD,MAAM,YAAY,eAAe,UAAU;CACzC,iBAAiB;CACjB,cAAc;CACd,QAAQ;EACN,OAAO;EACP,MAAM;CACR;CACA,gBAAgB,EACd,OAAO,GACL,4EACF,EACF;AACF,CAAC;AAED,MAAM,UAAU,QAAQ,UAAU;CAChC,gBAAgB,EACd,OAAO,GAAG,gCAAgC,EAC5C;CACA,QAAQ;AACV,CAAC;AAED,MAAM,iBAAiB,eAAe,UAAU;AAEhD,MAAM,oBAAoB,kBAAkB,UAAU;CACpD,MAAM;CACN,YAAY;CACZ,gBAAgB;CAChB,kBAAkB;CAClB,SAAS;CACT,QAAQ;CACR,qBAAqB;CACrB,qBAAqB;AACvB,CAAC;;;;;;;AAQD,MAAa,oBAAoB;CAC/B;CACAC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF"}
+{"version":3,"file":"extensions.mjs","names":["HorizontalRule","Placeholder"],"sources":["../../../../src/components/MarkdownEditor/extensions.ts"],"sourcesContent":["import { cx } from 'class-variance-authority';\nimport {\n  AIHighlight,\n  CharacterCount,\n  CodeBlockShiki,\n  Color,\n  CustomKeymap,\n  GlobalDragHandle,\n  HighlightExtension,\n  HorizontalRule,\n  MarkdownExtension,\n  Placeholder,\n  StarterKit,\n  TaskItem,\n  TaskList,\n  TextStyle,\n  TiptapImage,\n  TiptapLink,\n  TiptapUnderline,\n  UpdatedImage,\n  UploadImagesPlugin,\n  Youtube,\n} from './novel';\n\nconst aiHighlight = AIHighlight;\n\nconst tiptapLink = TiptapLink.configure({\n  HTMLAttributes: {\n    class: cx(\n      'text-muted-foreground underline underline-offset-[3px] hover:text-primary transition-colors cursor-pointer'\n    ),\n  },\n});\n\nconst tiptapImage = TiptapImage.extend({\n  addProseMirrorPlugins() {\n    return [\n      UploadImagesPlugin({\n        imageClass: cx('opacity-40 rounded-lg border border-stone-200'),\n      }),\n    ];\n  },\n}).configure({\n  allowBase64: true,\n  HTMLAttributes: {\n    class: cx('rounded-lg border border-muted'),\n  },\n});\n\nconst updatedImage = UpdatedImage.configure({\n  HTMLAttributes: {\n    class: cx('rounded-lg border border-muted'),\n  },\n});\n\nconst taskList = TaskList.configure({\n  HTMLAttributes: {\n    class: cx('not-prose pl-2'),\n  },\n});\n\nconst taskItem = TaskItem.configure({\n  HTMLAttributes: {\n    class: cx('flex gap-2 items-start my-4'),\n  },\n  nested: true,\n});\n\nconst horizontalRule = HorizontalRule.configure({\n  HTMLAttributes: {\n    class: cx('mt-4 mb-6 border-t border-muted-foreground'),\n  },\n});\n\nconst starterKit = StarterKit.configure({\n  bulletList: {\n    HTMLAttributes: {\n      class: cx('list-disc list-outside leading-3 -mt-2'),\n    },\n  },\n  orderedList: {\n    HTMLAttributes: {\n      class: cx('list-decimal list-outside leading-3 -mt-2'),\n    },\n  },\n  listItem: {\n    HTMLAttributes: {\n      class: cx('leading-normal -mb-2'),\n    },\n  },\n  blockquote: {\n    HTMLAttributes: {\n      class: cx('border-l-4 border-primary'),\n    },\n  },\n  // Disabled in favor of the shiki-powered `codeBlock` extension below.\n  codeBlock: false,\n  code: {\n    HTMLAttributes: {\n      class: cx('rounded-md bg-muted px-1.5 py-1 font-mono font-medium'),\n      spellcheck: 'false',\n    },\n  },\n  horizontalRule: false,\n  dropcursor: {\n    color: '#DBEAFE',\n    width: 4,\n  },\n  gapcursor: false,\n});\n\n/**\n * Code block with syntax highlighting powered by shiki (the same highlighter\n * the rest of the design-system uses in `IDE/CodeBlockShiki` and\n * `MarkDownRender`). Languages are lazy-loaded on demand and the dual\n * `github-light` / `github-dark` themes emit `--shiki-dark` CSS variables that\n * `markdown-editor.css` toggles under `[data-theme=\"dark\"]`.\n */\nconst codeBlock = CodeBlockShiki.configure({\n  defaultLanguage: null,\n  defaultTheme: 'github-light',\n  themes: {\n    light: 'github-light',\n    dark: 'github-dark',\n  },\n  HTMLAttributes: {\n    class: cx(\n      'rounded-md bg-muted text-muted-foreground border p-5 font-mono font-medium'\n    ),\n  },\n});\n\nconst youtube = Youtube.configure({\n  HTMLAttributes: {\n    class: cx('rounded-lg border border-muted'),\n  },\n  inline: false,\n});\n\nconst characterCount = CharacterCount.configure();\n\nconst markdownExtension = MarkdownExtension.configure({\n  html: true,\n  tightLists: true,\n  tightListClass: 'tight',\n  bulletListMarker: '-',\n  linkify: false,\n  breaks: false,\n  transformPastedText: false,\n  transformCopiedText: false,\n});\n\n/**\n * Default Tiptap/Novel extensions powering the MarkdownEditor.\n *\n * The slash-command extension is intentionally not included here because it\n * needs a runtime image-upload handler; it is appended by the editor itself.\n */\nexport const defaultExtensions = [\n  starterKit,\n  Placeholder,\n  tiptapLink,\n  tiptapImage,\n  updatedImage,\n  taskList,\n  taskItem,\n  horizontalRule,\n  aiHighlight,\n  codeBlock,\n  youtube,\n  characterCount,\n  TiptapUnderline,\n  markdownExtension,\n  HighlightExtension,\n  TextStyle,\n  Color,\n  CustomKeymap,\n  GlobalDragHandle,\n];\n"],"mappings":";;;;;;;;;AAwBA,MAAM,cAAc;AAEpB,MAAM,aAAa,WAAW,UAAU,EACtC,gBAAgB,EACd,OAAO,GACL,4GACF,EACF,EACF,CAAC;AAED,MAAM,cAAc,YAAY,OAAO,EACrC,wBAAwB;CACtB,OAAO,CACL,mBAAmB,EACjB,YAAY,GAAG,+CAA+C,EAChE,CAAC,CACH;AACF,EACF,CAAC,CAAC,CAAC,UAAU;CACX,aAAa;CACb,gBAAgB,EACd,OAAO,GAAG,gCAAgC,EAC5C;AACF,CAAC;AAED,MAAM,eAAe,aAAa,UAAU,EAC1C,gBAAgB,EACd,OAAO,GAAG,gCAAgC,EAC5C,EACF,CAAC;AAED,MAAM,WAAW,SAAS,UAAU,EAClC,gBAAgB,EACd,OAAO,GAAG,gBAAgB,EAC5B,EACF,CAAC;AAED,MAAM,WAAW,SAAS,UAAU;CAClC,gBAAgB,EACd,OAAO,GAAG,6BAA6B,EACzC;CACA,QAAQ;AACV,CAAC;AAED,MAAM,iBAAiBA,WAAe,UAAU,EAC9C,gBAAgB,EACd,OAAO,GAAG,4CAA4C,EACxD,EACF,CAAC;AAED,MAAM,aAAa,WAAW,UAAU;CACtC,YAAY,EACV,gBAAgB,EACd,OAAO,GAAG,wCAAwC,EACpD,EACF;CACA,aAAa,EACX,gBAAgB,EACd,OAAO,GAAG,2CAA2C,EACvD,EACF;CACA,UAAU,EACR,gBAAgB,EACd,OAAO,GAAG,sBAAsB,EAClC,EACF;CACA,YAAY,EACV,gBAAgB,EACd,OAAO,GAAG,2BAA2B,EACvC,EACF;CAEA,WAAW;CACX,MAAM,EACJ,gBAAgB;EACd,OAAO,GAAG,uDAAuD;EACjE,YAAY;CACd,EACF;CACA,gBAAgB;CAChB,YAAY;EACV,OAAO;EACP,OAAO;CACT;CACA,WAAW;AACb,CAAC;;;;;;;;AASD,MAAM,YAAY,eAAe,UAAU;CACzC,iBAAiB;CACjB,cAAc;CACd,QAAQ;EACN,OAAO;EACP,MAAM;CACR;CACA,gBAAgB,EACd,OAAO,GACL,4EACF,EACF;AACF,CAAC;AAED,MAAM,UAAU,QAAQ,UAAU;CAChC,gBAAgB,EACd,OAAO,GAAG,gCAAgC,EAC5C;CACA,QAAQ;AACV,CAAC;AAED,MAAM,iBAAiB,eAAe,UAAU;AAEhD,MAAM,oBAAoB,kBAAkB,UAAU;CACpD,MAAM;CACN,YAAY;CACZ,gBAAgB;CAChB,kBAAkB;CAClB,SAAS;CACT,QAAQ;CACR,qBAAqB;CACrB,qBAAqB;AACvB,CAAC;;;;;;;AAQD,MAAa,oBAAoB;CAC/B;CACAC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF"}

package/dist/esm/components/MarkdownEditor/generative/AISelector.mjs

@@ -4,7 +4,7 @@ import { toast } from "../../Toaster/useToast.mjs";
 import { Loader } from "../../Loader/index.mjs";
 import { Button } from "../../Button/Button.mjs";
 import { Command, CommandRoot } from "../../Command/index.mjs";
-import { MarkdownRenderer as MarkdownRenderer$1 } from "../../MarkDownRender/MarkDownRender.mjs";
+import { MarkdownRenderer } from "../../MarkDownRender/MarkDownRender.mjs";
 import { useEditor } from "../novel/components/index.mjs";
 import { addAIHighlight } from "../novel/extensions/ai-highlight.mjs";
 import { AICompletionCommands } from "./AICompletionCommands.mjs";
@@ -45,12 +45,12 @@ const AISelector = ({ onOpenChange, sendButtonVariant = "default", sendButtonCol
 					className: "relative overflow-y-auto",
 					children: /* @__PURE__ */ jsx("div", {
 						className: "prose prose-sm dark:prose-invert p-2 px-4",
-						children: /* @__PURE__ */ jsx(MarkdownRenderer$1, { children: completion })
+						children: /* @__PURE__ */ jsx(MarkdownRenderer, { children: completion })
 					})
 				})
 			}),
 			isLoading && /* @__PURE__ */ jsxs("div", {
-				className: "flex h-12 w-full items-center px-4 font-medium text-sm text-text",
+				className: "flex h-12 w-full items-center px-4 font-medium text-foreground text-sm",
 				children: [
 					/* @__PURE__ */ jsx(Sparkles, { className: "mr-2 size-4 shrink-0" }),
 					content.aiThinking,

package/dist/esm/components/MarkdownEditor/generative/AISelector.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AISelector.mjs","names":["MarkdownRenderer"],"sources":["../../../../../src/components/MarkdownEditor/generative/AISelector.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Button,\n  type ButtonColor,\n  type ButtonVariant,\n} from '@components/Button';\nimport { Command, CommandRoot } from '@components/Command';\nimport { Loader } from '@components/Loader';\nimport { MarkdownRenderer } from '@components/MarkDownRender';\nimport { toast } from '@components/Toaster';\nimport { ArrowUp, Sparkles } from 'lucide-react';\nimport { useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { addAIHighlight, useEditor } from '../novel';\nimport { AICompletionCommands } from './AICompletionCommands';\nimport { AISelectorCommands } from './AISelectorCommands';\nimport { useAICompletion } from './useAICompletion';\n\nexport type AISelectorProps = {\n  onOpenChange: (open: boolean) => void;\n  /** Visual variant for the send button. @default \"default\" */\n  sendButtonVariant?: ButtonVariant;\n  /** Color theme for the send button. @default \"text\" */\n  sendButtonColor?: ButtonColor;\n};\n\n/**\n * The AI command palette shown inside the bubble menu. Lets the user run a\n * preset transformation or a free-form prompt against the current selection,\n * preview the markdown result, then replace / insert / discard it.\n */\nexport const AISelector = ({\n  onOpenChange,\n  sendButtonVariant = 'default',\n  sendButtonColor = 'text',\n}: AISelectorProps) => {\n  const { editor } = useEditor();\n  const [inputValue, setInputValue] = useState('');\n  const content = useIntlayer('markdown-editor');\n\n  const { completion, complete, isLoading, reset } = useAICompletion((error) =>\n    toast({\n      variant: 'error',\n      title: content.aiError.value,\n      description: error.message,\n    })\n  );\n\n  if (!editor) return null;\n\n  const hasCompletion = completion.length > 0;\n\n  const getSelectionMarkdown = () => {\n    const slice = editor.state.selection.content();\n    return editor.storage.markdown.serializer.serialize(\n      slice.content\n    ) as string;\n  };\n\n  return (\n    <CommandRoot className=\"w-[350px]\">\n      {hasCompletion && (\n        <div className=\"flex max-h-[400px]\">\n          <div className=\"relative overflow-y-auto\">\n            <div className=\"prose prose-sm dark:prose-invert p-2 px-4\">\n              <MarkdownRenderer>{completion}</MarkdownRenderer>\n            </div>\n          </div>\n        </div>\n      )}\n\n      {isLoading && (\n        <div className=\"flex h-12 w-full items-center px-4 font-medium text-sm text-text\">\n          <Sparkles className=\"mr-2 size-4 shrink-0\" />\n          {content.aiThinking}\n          <div className=\"mt-1 ml-2\">\n            <Loader />\n          </div>\n        </div>\n      )}\n\n      {!isLoading && (\n        <>\n          <div className=\"flex items-center gap-2 px-3 py-3\">\n            <Command.Input\n              value={inputValue}\n              onValueChange={setInputValue}\n              autoFocus\n              placeholder={\n                hasCompletion ? content.tellAI.value : content.askAIToEdit.value\n              }\n              onFocus={() => addAIHighlight(editor)}\n            />\n            <Button\n              label={content.send.value}\n              size=\"icon-sm\"\n              roundedSize=\"full\"\n              variant={sendButtonVariant}\n              color={sendButtonColor}\n              className=\"size-7 shrink-0\"\n              Icon={ArrowUp}\n              onClick={() => {\n                const text = completion || getSelectionMarkdown();\n                complete(text, {\n                  body: { option: 'zap', command: inputValue },\n                }).then(() => setInputValue(''));\n              }}\n            />\n          </div>\n          {hasCompletion ? (\n            <AICompletionCommands\n              completion={completion}\n              onDiscard={() => {\n                editor.chain().unsetHighlight().focus().run();\n                reset();\n                onOpenChange(false);\n              }}\n            />\n          ) : (\n            <AISelectorCommands\n              onSelect={(value, option) =>\n                complete(value, { body: { option } })\n              }\n            />\n          )}\n        </>\n      )}\n    </CommandRoot>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgCA,MAAa,cAAc,EACzB,cACA,oBAAoB,WACpB,kBAAkB,aACG;CACrB,MAAM,EAAE,WAAW,UAAU;CAC7B,MAAM,CAAC,YAAY,iBAAiB,SAAS,EAAE;CAC/C,MAAM,UAAU,YAAY,iBAAiB;CAE7C,MAAM,EAAE,YAAY,UAAU,WAAW,UAAU,iBAAiB,UAClE,MAAM;EACJ,SAAS;EACT,OAAO,QAAQ,QAAQ;EACvB,aAAa,MAAM;CACrB,CAAC,CACH;CAEA,IAAI,CAAC,QAAQ,OAAO;CAEpB,MAAM,gBAAgB,WAAW,SAAS;CAE1C,MAAM,6BAA6B;EACjC,MAAM,QAAQ,OAAO,MAAM,UAAU,QAAQ;EAC7C,OAAO,OAAO,QAAQ,SAAS,WAAW,UACxC,MAAM,OACR;CACF;CAEA,OACE,qBAAC,aAAD;EAAa,WAAU;YAAvB;GACG,iBACC,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,OAAD;MAAK,WAAU;gBACb,oBAACA,oBAAD,YAAmB,WAA6B;KAC7C;IACF;GACF;GAGN,aACC,qBAAC,OAAD;IAAK,WAAU;cAAf;KACE,oBAAC,UAAD,EAAU,WAAU,uBAAwB;KAC3C,QAAQ;KACT,oBAAC,OAAD;MAAK,WAAU;gBACb,oBAAC,QAAD,CAAS;KACN;IACF;;GAGN,CAAC,aACA,8CACE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,QAAQ,OAAT;KACE,OAAO;KACP,eAAe;KACf;KACA,aACE,gBAAgB,QAAQ,OAAO,QAAQ,QAAQ,YAAY;KAE7D,eAAe,eAAe,MAAM;IACrC,IACD,oBAAC,QAAD;KACE,OAAO,QAAQ,KAAK;KACpB,MAAK;KACL,aAAY;KACZ,SAAS;KACT,OAAO;KACP,WAAU;KACV,MAAM;KACN,eAAe;MACb,MAAM,OAAO,cAAc,qBAAqB;MAChD,SAAS,MAAM,EACb,MAAM;OAAE,QAAQ;OAAO,SAAS;MAAW,EAC7C,CAAC,CAAC,CAAC,WAAW,cAAc,EAAE,CAAC;KACjC;IACD,EACE;OACJ,gBACC,oBAAC,sBAAD;IACc;IACZ,iBAAiB;KACf,OAAO,MAAM,CAAC,CAAC,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI;KAC5C,MAAM;KACN,aAAa,KAAK;IACpB;GACD,KAED,oBAAC,oBAAD,EACE,WAAW,OAAO,WAChB,SAAS,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,EAEvC,EAEH;EAEO;;AAEjB"}
+{"version":3,"file":"AISelector.mjs","names":[],"sources":["../../../../../src/components/MarkdownEditor/generative/AISelector.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Button,\n  type ButtonColor,\n  type ButtonVariant,\n} from '@components/Button';\nimport { Command, CommandRoot } from '@components/Command';\nimport { Loader } from '@components/Loader';\nimport { MarkdownRenderer } from '@components/MarkDownRender';\nimport { toast } from '@components/Toaster';\nimport { ArrowUp, Sparkles } from 'lucide-react';\nimport { useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { addAIHighlight, useEditor } from '../novel';\nimport { AICompletionCommands } from './AICompletionCommands';\nimport { AISelectorCommands } from './AISelectorCommands';\nimport { useAICompletion } from './useAICompletion';\n\nexport type AISelectorProps = {\n  onOpenChange: (open: boolean) => void;\n  /** Visual variant for the send button. @default \"default\" */\n  sendButtonVariant?: ButtonVariant;\n  /** Color theme for the send button. @default \"text\" */\n  sendButtonColor?: ButtonColor;\n};\n\n/**\n * The AI command palette shown inside the bubble menu. Lets the user run a\n * preset transformation or a free-form prompt against the current selection,\n * preview the markdown result, then replace / insert / discard it.\n */\nexport const AISelector = ({\n  onOpenChange,\n  sendButtonVariant = 'default',\n  sendButtonColor = 'text',\n}: AISelectorProps) => {\n  const { editor } = useEditor();\n  const [inputValue, setInputValue] = useState('');\n  const content = useIntlayer('markdown-editor');\n\n  const { completion, complete, isLoading, reset } = useAICompletion((error) =>\n    toast({\n      variant: 'error',\n      title: content.aiError.value,\n      description: error.message,\n    })\n  );\n\n  if (!editor) return null;\n\n  const hasCompletion = completion.length > 0;\n\n  const getSelectionMarkdown = () => {\n    const slice = editor.state.selection.content();\n    return editor.storage.markdown.serializer.serialize(\n      slice.content\n    ) as string;\n  };\n\n  return (\n    <CommandRoot className=\"w-[350px]\">\n      {hasCompletion && (\n        <div className=\"flex max-h-[400px]\">\n          <div className=\"relative overflow-y-auto\">\n            <div className=\"prose prose-sm dark:prose-invert p-2 px-4\">\n              <MarkdownRenderer>{completion}</MarkdownRenderer>\n            </div>\n          </div>\n        </div>\n      )}\n\n      {isLoading && (\n        <div className=\"flex h-12 w-full items-center px-4 font-medium text-foreground text-sm\">\n          <Sparkles className=\"mr-2 size-4 shrink-0\" />\n          {content.aiThinking}\n          <div className=\"mt-1 ml-2\">\n            <Loader />\n          </div>\n        </div>\n      )}\n\n      {!isLoading && (\n        <>\n          <div className=\"flex items-center gap-2 px-3 py-3\">\n            <Command.Input\n              value={inputValue}\n              onValueChange={setInputValue}\n              autoFocus\n              placeholder={\n                hasCompletion ? content.tellAI.value : content.askAIToEdit.value\n              }\n              onFocus={() => addAIHighlight(editor)}\n            />\n            <Button\n              label={content.send.value}\n              size=\"icon-sm\"\n              roundedSize=\"full\"\n              variant={sendButtonVariant}\n              color={sendButtonColor}\n              className=\"size-7 shrink-0\"\n              Icon={ArrowUp}\n              onClick={() => {\n                const text = completion || getSelectionMarkdown();\n                complete(text, {\n                  body: { option: 'zap', command: inputValue },\n                }).then(() => setInputValue(''));\n              }}\n            />\n          </div>\n          {hasCompletion ? (\n            <AICompletionCommands\n              completion={completion}\n              onDiscard={() => {\n                editor.chain().unsetHighlight().focus().run();\n                reset();\n                onOpenChange(false);\n              }}\n            />\n          ) : (\n            <AISelectorCommands\n              onSelect={(value, option) =>\n                complete(value, { body: { option } })\n              }\n            />\n          )}\n        </>\n      )}\n    </CommandRoot>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgCA,MAAa,cAAc,EACzB,cACA,oBAAoB,WACpB,kBAAkB,aACG;CACrB,MAAM,EAAE,WAAW,UAAU;CAC7B,MAAM,CAAC,YAAY,iBAAiB,SAAS,EAAE;CAC/C,MAAM,UAAU,YAAY,iBAAiB;CAE7C,MAAM,EAAE,YAAY,UAAU,WAAW,UAAU,iBAAiB,UAClE,MAAM;EACJ,SAAS;EACT,OAAO,QAAQ,QAAQ;EACvB,aAAa,MAAM;CACrB,CAAC,CACH;CAEA,IAAI,CAAC,QAAQ,OAAO;CAEpB,MAAM,gBAAgB,WAAW,SAAS;CAE1C,MAAM,6BAA6B;EACjC,MAAM,QAAQ,OAAO,MAAM,UAAU,QAAQ;EAC7C,OAAO,OAAO,QAAQ,SAAS,WAAW,UACxC,MAAM,OACR;CACF;CAEA,OACE,qBAAC,aAAD;EAAa,WAAU;YAAvB;GACG,iBACC,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,OAAD;MAAK,WAAU;gBACb,oBAAC,kBAAD,YAAmB,WAA6B;KAC7C;IACF;GACF;GAGN,aACC,qBAAC,OAAD;IAAK,WAAU;cAAf;KACE,oBAAC,UAAD,EAAU,WAAU,uBAAwB;KAC3C,QAAQ;KACT,oBAAC,OAAD;MAAK,WAAU;gBACb,oBAAC,QAAD,CAAS;KACN;IACF;;GAGN,CAAC,aACA,8CACE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,QAAQ,OAAT;KACE,OAAO;KACP,eAAe;KACf;KACA,aACE,gBAAgB,QAAQ,OAAO,QAAQ,QAAQ,YAAY;KAE7D,eAAe,eAAe,MAAM;IACrC,IACD,oBAAC,QAAD;KACE,OAAO,QAAQ,KAAK;KACpB,MAAK;KACL,aAAY;KACZ,SAAS;KACT,OAAO;KACP,WAAU;KACV,MAAM;KACN,eAAe;MACb,MAAM,OAAO,cAAc,qBAAqB;MAChD,SAAS,MAAM,EACb,MAAM;OAAE,QAAQ;OAAO,SAAS;MAAW,EAC7C,CAAC,CAAC,CAAC,WAAW,cAAc,EAAE,CAAC;KACjC;IACD,EACE;OACJ,gBACC,oBAAC,sBAAD;IACc;IACZ,iBAAiB;KACf,OAAO,MAAM,CAAC,CAAC,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI;KAC5C,MAAM;KACN,aAAa,KAAK;IACpB;GACD,KAED,oBAAC,oBAAD,EACE,WAAW,OAAO,WAChB,SAAS,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,EAEvC,EAEH;EAEO;;AAEjB"}

package/dist/esm/components/MarkdownEditor/generative/AISelectorCommands.mjs

@@ -57,7 +57,7 @@ const AISelectorCommands = ({ onSelect }) => {
 					const slice = editor.state.selection.content();
 					onSelect(editor.storage.markdown.serializer.serialize(slice.content), value);
 				},
-				children: [/* @__PURE__ */ jsx(option.icon, { className: "size-4 text-text" }), getOptionLabel(option.value)]
+				children: [/* @__PURE__ */ jsx(option.icon, { className: "size-4 text-foreground" }), getOptionLabel(option.value)]
 			}, option.value))
 		}),
 		/* @__PURE__ */ jsx(Command.Separator, {}),
@@ -70,7 +70,7 @@ const AISelectorCommands = ({ onSelect }) => {
 					const pos = editor.state.selection.from;
 					onSelect(getPrevText(editor, pos), "continue");
 				},
-				children: [/* @__PURE__ */ jsx(StepForward, { className: "size-4 text-text" }), content.continueWriting]
+				children: [/* @__PURE__ */ jsx(StepForward, { className: "size-4 text-foreground" }), content.continueWriting]
 			})
 		})
 	] });

package/dist/esm/components/MarkdownEditor/generative/AISelectorCommands.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AISelectorCommands.mjs","names":[],"sources":["../../../../../src/components/MarkdownEditor/generative/AISelectorCommands.tsx"],"sourcesContent":["'use client';\n\nimport { Command } from '@components/Command';\nimport {\n  ArrowDownWideNarrow,\n  CheckCheck,\n  RefreshCcwDot,\n  StepForward,\n  WrapText,\n} from 'lucide-react';\nimport { useIntlayer } from 'react-intlayer';\nimport { getPrevText, useEditor } from '../novel';\nimport type { AICompletionOption } from './useAICompletion';\n\nconst options: {\n  value: Exclude<AICompletionOption, 'zap'>;\n  label: string;\n  icon: typeof RefreshCcwDot;\n}[] = [\n  { value: 'improve', label: 'Improve writing', icon: RefreshCcwDot },\n  { value: 'fix', label: 'Fix grammar', icon: CheckCheck },\n  { value: 'shorter', label: 'Make shorter', icon: ArrowDownWideNarrow },\n  { value: 'longer', label: 'Make longer', icon: WrapText },\n];\n\nexport type AISelectorCommandsProps = {\n  onSelect: (value: string, option: AICompletionOption) => void;\n};\n\n/**\n * The default command list shown in the AI bubble before a completion exists:\n * transforms applied to the current selection plus \"continue writing\".\n */\nexport const AISelectorCommands = ({ onSelect }: AISelectorCommandsProps) => {\n  const { editor } = useEditor();\n  const content = useIntlayer('markdown-editor');\n\n  if (!editor) return null;\n\n  const getOptionLabel = (value: string) => {\n    switch (value) {\n      case 'improve':\n        return content.improveWriting.value;\n      case 'fix':\n        return content.fixGrammar.value;\n      case 'shorter':\n        return content.makeShorter.value;\n      case 'longer':\n        return content.makeLonger.value;\n      default:\n        return value;\n    }\n  };\n\n  return (\n    <>\n      <Command.Group heading={content.editHeading.value}>\n        {options.map((option) => (\n          <Command.Item\n            key={option.value}\n            value={option.value}\n            className=\"flex gap-2 px-4\"\n            onSelect={(value) => {\n              const slice = editor.state.selection.content();\n              const text = editor.storage.markdown.serializer.serialize(\n                slice.content\n              );\n              onSelect(text, value as AICompletionOption);\n            }}\n          >\n            <option.icon className=\"size-4 text-text\" />\n            {getOptionLabel(option.value)}\n          </Command.Item>\n        ))}\n      </Command.Group>\n      <Command.Separator />\n      <Command.Group heading={content.moreHeading.value}>\n        <Command.Item\n          value=\"continue\"\n          className=\"gap-2 px-4\"\n          onSelect={() => {\n            const pos = editor.state.selection.from;\n            const text = getPrevText(editor, pos);\n            onSelect(text, 'continue');\n          }}\n        >\n          <StepForward className=\"size-4 text-text\" />\n          {content.continueWriting}\n        </Command.Item>\n      </Command.Group>\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;AAcA,MAAM,UAIA;CACJ;EAAE,OAAO;EAAW,OAAO;EAAmB,MAAM;CAAc;CAClE;EAAE,OAAO;EAAO,OAAO;EAAe,MAAM;CAAW;CACvD;EAAE,OAAO;EAAW,OAAO;EAAgB,MAAM;CAAoB;CACrE;EAAE,OAAO;EAAU,OAAO;EAAe,MAAM;CAAS;AAC1D;;;;;AAUA,MAAa,sBAAsB,EAAE,eAAwC;CAC3E,MAAM,EAAE,WAAW,UAAU;CAC7B,MAAM,UAAU,YAAY,iBAAiB;CAE7C,IAAI,CAAC,QAAQ,OAAO;CAEpB,MAAM,kBAAkB,UAAkB;EACxC,QAAQ,OAAR;GACE,KAAK,WACH,OAAO,QAAQ,eAAe;GAChC,KAAK,OACH,OAAO,QAAQ,WAAW;GAC5B,KAAK,WACH,OAAO,QAAQ,YAAY;GAC7B,KAAK,UACH,OAAO,QAAQ,WAAW;GAC5B,SACE,OAAO;EACX;CACF;CAEA,OACE;EACE,oBAAC,QAAQ,OAAT;GAAe,SAAS,QAAQ,YAAY;aACzC,QAAQ,KAAK,WACZ,qBAAC,QAAQ,MAAT;IAEE,OAAO,OAAO;IACd,WAAU;IACV,WAAW,UAAU;KACnB,MAAM,QAAQ,OAAO,MAAM,UAAU,QAAQ;KAI7C,SAHa,OAAO,QAAQ,SAAS,WAAW,UAC9C,MAAM,OAEI,GAAG,KAA2B;IAC5C;cAVF,CAYE,oBAAC,OAAO,MAAR,EAAa,WAAU,mBAAoB,IAC1C,eAAe,OAAO,KAAK,CAChB;MAbP,OAAO,KAaA,CACf;EACY;EACf,oBAAC,QAAQ,WAAT,CAAoB;EACpB,oBAAC,QAAQ,OAAT;GAAe,SAAS,QAAQ,YAAY;aAC1C,qBAAC,QAAQ,MAAT;IACE,OAAM;IACN,WAAU;IACV,gBAAgB;KACd,MAAM,MAAM,OAAO,MAAM,UAAU;KAEnC,SADa,YAAY,QAAQ,GACrB,GAAG,UAAU;IAC3B;cAPF,CASE,oBAAC,aAAD,EAAa,WAAU,mBAAoB,IAC1C,QAAQ,eACG;;EACD;CACf;AAEN"}
+{"version":3,"file":"AISelectorCommands.mjs","names":[],"sources":["../../../../../src/components/MarkdownEditor/generative/AISelectorCommands.tsx"],"sourcesContent":["'use client';\n\nimport { Command } from '@components/Command';\nimport {\n  ArrowDownWideNarrow,\n  CheckCheck,\n  RefreshCcwDot,\n  StepForward,\n  WrapText,\n} from 'lucide-react';\nimport { useIntlayer } from 'react-intlayer';\nimport { getPrevText, useEditor } from '../novel';\nimport type { AICompletionOption } from './useAICompletion';\n\nconst options: {\n  value: Exclude<AICompletionOption, 'zap'>;\n  label: string;\n  icon: typeof RefreshCcwDot;\n}[] = [\n  { value: 'improve', label: 'Improve writing', icon: RefreshCcwDot },\n  { value: 'fix', label: 'Fix grammar', icon: CheckCheck },\n  { value: 'shorter', label: 'Make shorter', icon: ArrowDownWideNarrow },\n  { value: 'longer', label: 'Make longer', icon: WrapText },\n];\n\nexport type AISelectorCommandsProps = {\n  onSelect: (value: string, option: AICompletionOption) => void;\n};\n\n/**\n * The default command list shown in the AI bubble before a completion exists:\n * transforms applied to the current selection plus \"continue writing\".\n */\nexport const AISelectorCommands = ({ onSelect }: AISelectorCommandsProps) => {\n  const { editor } = useEditor();\n  const content = useIntlayer('markdown-editor');\n\n  if (!editor) return null;\n\n  const getOptionLabel = (value: string) => {\n    switch (value) {\n      case 'improve':\n        return content.improveWriting.value;\n      case 'fix':\n        return content.fixGrammar.value;\n      case 'shorter':\n        return content.makeShorter.value;\n      case 'longer':\n        return content.makeLonger.value;\n      default:\n        return value;\n    }\n  };\n\n  return (\n    <>\n      <Command.Group heading={content.editHeading.value}>\n        {options.map((option) => (\n          <Command.Item\n            key={option.value}\n            value={option.value}\n            className=\"flex gap-2 px-4\"\n            onSelect={(value) => {\n              const slice = editor.state.selection.content();\n              const text = editor.storage.markdown.serializer.serialize(\n                slice.content\n              );\n              onSelect(text, value as AICompletionOption);\n            }}\n          >\n            <option.icon className=\"size-4 text-foreground\" />\n            {getOptionLabel(option.value)}\n          </Command.Item>\n        ))}\n      </Command.Group>\n      <Command.Separator />\n      <Command.Group heading={content.moreHeading.value}>\n        <Command.Item\n          value=\"continue\"\n          className=\"gap-2 px-4\"\n          onSelect={() => {\n            const pos = editor.state.selection.from;\n            const text = getPrevText(editor, pos);\n            onSelect(text, 'continue');\n          }}\n        >\n          <StepForward className=\"size-4 text-foreground\" />\n          {content.continueWriting}\n        </Command.Item>\n      </Command.Group>\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;AAcA,MAAM,UAIA;CACJ;EAAE,OAAO;EAAW,OAAO;EAAmB,MAAM;CAAc;CAClE;EAAE,OAAO;EAAO,OAAO;EAAe,MAAM;CAAW;CACvD;EAAE,OAAO;EAAW,OAAO;EAAgB,MAAM;CAAoB;CACrE;EAAE,OAAO;EAAU,OAAO;EAAe,MAAM;CAAS;AAC1D;;;;;AAUA,MAAa,sBAAsB,EAAE,eAAwC;CAC3E,MAAM,EAAE,WAAW,UAAU;CAC7B,MAAM,UAAU,YAAY,iBAAiB;CAE7C,IAAI,CAAC,QAAQ,OAAO;CAEpB,MAAM,kBAAkB,UAAkB;EACxC,QAAQ,OAAR;GACE,KAAK,WACH,OAAO,QAAQ,eAAe;GAChC,KAAK,OACH,OAAO,QAAQ,WAAW;GAC5B,KAAK,WACH,OAAO,QAAQ,YAAY;GAC7B,KAAK,UACH,OAAO,QAAQ,WAAW;GAC5B,SACE,OAAO;EACX;CACF;CAEA,OACE;EACE,oBAAC,QAAQ,OAAT;GAAe,SAAS,QAAQ,YAAY;aACzC,QAAQ,KAAK,WACZ,qBAAC,QAAQ,MAAT;IAEE,OAAO,OAAO;IACd,WAAU;IACV,WAAW,UAAU;KACnB,MAAM,QAAQ,OAAO,MAAM,UAAU,QAAQ;KAI7C,SAHa,OAAO,QAAQ,SAAS,WAAW,UAC9C,MAAM,OAEI,GAAG,KAA2B;IAC5C;cAVF,CAYE,oBAAC,OAAO,MAAR,EAAa,WAAU,yBAA0B,IAChD,eAAe,OAAO,KAAK,CAChB;MAbP,OAAO,KAaA,CACf;EACY;EACf,oBAAC,QAAQ,WAAT,CAAoB;EACpB,oBAAC,QAAQ,OAAT;GAAe,SAAS,QAAQ,YAAY;aAC1C,qBAAC,QAAQ,MAAT;IACE,OAAM;IACN,WAAU;IACV,gBAAgB;KACd,MAAM,MAAM,OAAO,MAAM,UAAU;KAEnC,SADa,YAAY,QAAQ,GACrB,GAAG,UAAU;IAC3B;cAPF,CASE,oBAAC,aAAD,EAAa,WAAU,yBAA0B,IAChD,QAAQ,eACG;;EACD;CACf;AAEN"}

package/dist/esm/components/MarkdownEditor/generative/GenerativeMenuSwitch.mjs

@@ -23,7 +23,7 @@ const GenerativeMenuSwitch = ({ children, open, onOpenChange, sendButtonVariant,
 	}, [open, editor]);
 	return /* @__PURE__ */ jsxs(EditorBubble, {
 		options: { placement: open ? "bottom-start" : "top" },
-		className: "flex w-fit max-w-[90vw] rounded-lg border-[1.3px] border-neutral/20 bg-card/95 text-text shadow-xl backdrop-blur [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl",
+		className: "flex w-fit max-w-[90vw] rounded-lg border-[1.3px] bg-card/95 text-foreground shadow-xl backdrop-blur [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl",
 		children: [open && /* @__PURE__ */ jsx(AISelector, {
 			onOpenChange,
 			sendButtonVariant,
@@ -34,7 +34,7 @@ const GenerativeMenuSwitch = ({ children, open, onOpenChange, sendButtonVariant,
 			color: "text",
 			size: "sm",
 			roundedSize: "none",
-			className: "gap-1 text-text",
+			className: "gap-1 text-foreground",
 			Icon: Sparkles,
 			onClick: () => onOpenChange(true),
 			children: content.askAI

package/dist/esm/components/MarkdownEditor/generative/GenerativeMenuSwitch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"GenerativeMenuSwitch.mjs","names":[],"sources":["../../../../../src/components/MarkdownEditor/generative/GenerativeMenuSwitch.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Button,\n  type ButtonColor,\n  type ButtonVariant,\n} from '@components/Button';\nimport { Sparkles } from 'lucide-react';\nimport { Fragment, type ReactNode, useEffect } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { EditorBubble, removeAIHighlight, useEditor } from '../novel';\nimport { AISelector } from './AISelector';\n\nexport type GenerativeMenuSwitchProps = {\n  children: ReactNode;\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  /** Visual variant forwarded to the AI send button. @default \"default\" */\n  sendButtonVariant?: ButtonVariant;\n  /** Color theme forwarded to the AI send button. @default \"text\" */\n  sendButtonColor?: ButtonColor;\n};\n\n/**\n * Bubble menu that toggles between the regular formatting toolbar (its\n * `children`) and the AI command palette.\n */\nexport const GenerativeMenuSwitch = ({\n  children,\n  open,\n  onOpenChange,\n  sendButtonVariant,\n  sendButtonColor,\n}: GenerativeMenuSwitchProps) => {\n  const { editor } = useEditor();\n  const content = useIntlayer('markdown-editor');\n\n  useEffect(() => {\n    if (!open && editor) removeAIHighlight(editor);\n  }, [open, editor]);\n\n  return (\n    <EditorBubble\n      options={{ placement: open ? 'bottom-start' : 'top' }}\n      className=\"flex w-fit max-w-[90vw] rounded-lg border-[1.3px] border-neutral/20 bg-card/95 text-text shadow-xl backdrop-blur [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl\"\n    >\n      {open && (\n        <AISelector\n          onOpenChange={onOpenChange}\n          sendButtonVariant={sendButtonVariant}\n          sendButtonColor={sendButtonColor}\n        />\n      )}\n      {!open && (\n        <Fragment>\n          <Button\n            label={content.askAI.value}\n            variant=\"hoverable\"\n            color=\"text\"\n            size=\"sm\"\n            roundedSize=\"none\"\n            className=\"gap-1 text-text\"\n            Icon={Sparkles}\n            onClick={() => onOpenChange(true)}\n          >\n            {content.askAI}\n          </Button>\n          {children}\n        </Fragment>\n      )}\n    </EditorBubble>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AA2BA,MAAa,wBAAwB,EACnC,UACA,MACA,cACA,mBACA,sBAC+B;CAC/B,MAAM,EAAE,WAAW,UAAU;CAC7B,MAAM,UAAU,YAAY,iBAAiB;CAE7C,gBAAgB;EACd,IAAI,CAAC,QAAQ,QAAQ,kBAAkB,MAAM;CAC/C,GAAG,CAAC,MAAM,MAAM,CAAC;CAEjB,OACE,qBAAC,cAAD;EACE,SAAS,EAAE,WAAW,OAAO,iBAAiB,MAAM;EACpD,WAAU;YAFZ,CAIG,QACC,oBAAC,YAAD;GACgB;GACK;GACF;EAClB,IAEF,CAAC,QACA,qBAAC,UAAD,aACE,oBAAC,QAAD;GACE,OAAO,QAAQ,MAAM;GACrB,SAAQ;GACR,OAAM;GACN,MAAK;GACL,aAAY;GACZ,WAAU;GACV,MAAM;GACN,eAAe,aAAa,IAAI;aAE/B,QAAQ;EACH,IACP,QACO,IAEA;;AAElB"}
+{"version":3,"file":"GenerativeMenuSwitch.mjs","names":[],"sources":["../../../../../src/components/MarkdownEditor/generative/GenerativeMenuSwitch.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Button,\n  type ButtonColor,\n  type ButtonVariant,\n} from '@components/Button';\nimport { Sparkles } from 'lucide-react';\nimport { Fragment, type ReactNode, useEffect } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { EditorBubble, removeAIHighlight, useEditor } from '../novel';\nimport { AISelector } from './AISelector';\n\nexport type GenerativeMenuSwitchProps = {\n  children: ReactNode;\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  /** Visual variant forwarded to the AI send button. @default \"default\" */\n  sendButtonVariant?: ButtonVariant;\n  /** Color theme forwarded to the AI send button. @default \"text\" */\n  sendButtonColor?: ButtonColor;\n};\n\n/**\n * Bubble menu that toggles between the regular formatting toolbar (its\n * `children`) and the AI command palette.\n */\nexport const GenerativeMenuSwitch = ({\n  children,\n  open,\n  onOpenChange,\n  sendButtonVariant,\n  sendButtonColor,\n}: GenerativeMenuSwitchProps) => {\n  const { editor } = useEditor();\n  const content = useIntlayer('markdown-editor');\n\n  useEffect(() => {\n    if (!open && editor) removeAIHighlight(editor);\n  }, [open, editor]);\n\n  return (\n    <EditorBubble\n      options={{ placement: open ? 'bottom-start' : 'top' }}\n      className=\"flex w-fit max-w-[90vw] rounded-lg border-[1.3px] bg-card/95 text-foreground shadow-xl backdrop-blur [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl\"\n    >\n      {open && (\n        <AISelector\n          onOpenChange={onOpenChange}\n          sendButtonVariant={sendButtonVariant}\n          sendButtonColor={sendButtonColor}\n        />\n      )}\n      {!open && (\n        <Fragment>\n          <Button\n            label={content.askAI.value}\n            variant=\"hoverable\"\n            color=\"text\"\n            size=\"sm\"\n            roundedSize=\"none\"\n            className=\"gap-1 text-foreground\"\n            Icon={Sparkles}\n            onClick={() => onOpenChange(true)}\n          >\n            {content.askAI}\n          </Button>\n          {children}\n        </Fragment>\n      )}\n    </EditorBubble>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AA2BA,MAAa,wBAAwB,EACnC,UACA,MACA,cACA,mBACA,sBAC+B;CAC/B,MAAM,EAAE,WAAW,UAAU;CAC7B,MAAM,UAAU,YAAY,iBAAiB;CAE7C,gBAAgB;EACd,IAAI,CAAC,QAAQ,QAAQ,kBAAkB,MAAM;CAC/C,GAAG,CAAC,MAAM,MAAM,CAAC;CAEjB,OACE,qBAAC,cAAD;EACE,SAAS,EAAE,WAAW,OAAO,iBAAiB,MAAM;EACpD,WAAU;YAFZ,CAIG,QACC,oBAAC,YAAD;GACgB;GACK;GACF;EAClB,IAEF,CAAC,QACA,qBAAC,UAAD,aACE,oBAAC,QAAD;GACE,OAAO,QAAQ,MAAM;GACrB,SAAQ;GACR,OAAM;GACN,MAAK;GACL,aAAY;GACZ,WAAU;GACV,MAAM;GACN,eAAe,aAAa,IAAI;aAE/B,QAAQ;EACH,IACP,QACO,IAEA;;AAElB"}

package/dist/esm/components/MarkdownEditor/novel/extensions/code-block-shiki.mjs

@@ -0,0 +1,197 @@
+import { bundledLanguages, bundledThemes, getSingletonHighlighter } from "../../../IDE/shikiBundle.mjs";
+import { findChildren } from "@tiptap/core";
+import { CodeBlock } from "@tiptap/extension-code-block";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+
+//#region src/components/MarkdownEditor/novel/extensions/code-block-shiki.ts
+const formatStyles = (styles) => Object.entries(styles).filter(([_, value]) => Boolean(value)).map(([key, value]) => `${key}:${value}`).join(";");
+let sharedHighlighter = null;
+const loadingLangs = /* @__PURE__ */ new Set();
+const loadingThemes = /* @__PURE__ */ new Set();
+const renderDecorations = ({ doc, name, defaultLanguage, defaultTheme, themes, highlighter }) => {
+	if (!highlighter) return DecorationSet.empty;
+	const decorations = [];
+	const loadedLangs = highlighter.getLoadedLanguages();
+	const loadedThemes = highlighter.getLoadedThemes();
+	const resolveTheme = (themeName) => loadedThemes.includes(themeName) ? themeName : loadedThemes[0] ?? "github-light";
+	findChildren(doc, (node) => node.type.name === name).forEach((block) => {
+		let from = block.pos + 1;
+		let language = block.node.attrs.language || defaultLanguage;
+		const blockTheme = block.node.attrs.theme || defaultTheme;
+		const lightTheme = block.node.attrs.themes?.light || themes?.light || blockTheme;
+		const darkTheme = block.node.attrs.themes?.dark || themes?.dark || blockTheme;
+		if (!loadedLangs.includes(language)) language = "plaintext";
+		if (themes) {
+			const tokensResult = highlighter.codeToTokens(block.node.textContent, {
+				lang: language,
+				themes: {
+					light: resolveTheme(lightTheme),
+					dark: resolveTheme(darkTheme)
+				}
+			});
+			const preStyles = {};
+			if (tokensResult.bg) preStyles["background-color"] = tokensResult.bg;
+			if (tokensResult.fg) preStyles.color = tokensResult.fg;
+			decorations.push(Decoration.node(block.pos, block.pos + block.node.nodeSize, {
+				style: formatStyles(preStyles),
+				class: "shiki"
+			}));
+			for (const line of tokensResult.tokens) {
+				for (const token of line) {
+					const to = from + token.content.length;
+					const style = formatStyles(token.htmlStyle || {});
+					decorations.push(Decoration.inline(from, to, { style }));
+					from = to;
+				}
+				from += 1;
+			}
+		} else {
+			const activeTheme = resolveTheme(blockTheme);
+			const tokensResult = highlighter.codeToTokens(block.node.textContent, {
+				lang: language,
+				theme: activeTheme
+			});
+			const themeObj = highlighter.getTheme(activeTheme);
+			decorations.push(Decoration.node(block.pos, block.pos + block.node.nodeSize, {
+				style: formatStyles({ "background-color": themeObj.bg }),
+				class: "shiki"
+			}));
+			for (const line of tokensResult.tokens) {
+				for (const token of line) {
+					const to = from + token.content.length;
+					const style = formatStyles({ color: token.color || "inherit" });
+					decorations.push(Decoration.inline(from, to, { style }));
+					from = to;
+				}
+				from += 1;
+			}
+		}
+	});
+	return DecorationSet.create(doc, decorations);
+};
+const createShikiPlugin = ({ name, defaultLanguage, defaultTheme, themes }) => {
+	const loadMissing = async (doc) => {
+		if (!sharedHighlighter) return false;
+		const blocks = findChildren(doc, (node) => node.type.name === name);
+		const loadedLangs = sharedHighlighter.getLoadedLanguages();
+		const loadedThemes = sharedHighlighter.getLoadedThemes();
+		const langsToLoad = /* @__PURE__ */ new Set();
+		const themesToLoad = /* @__PURE__ */ new Set();
+		for (const block of blocks) {
+			const lang = block.node.attrs.language || defaultLanguage;
+			if (lang && !loadedLangs.includes(lang) && lang in bundledLanguages && !loadingLangs.has(lang)) langsToLoad.add(lang);
+			if (themes) {
+				const light = block.node.attrs.themes?.light || themes.light;
+				const dark = block.node.attrs.themes?.dark || themes.dark;
+				if (light && !loadedThemes.includes(light) && light in bundledThemes && !loadingThemes.has(light)) themesToLoad.add(light);
+				if (dark && !loadedThemes.includes(dark) && dark in bundledThemes && !loadingThemes.has(dark)) themesToLoad.add(dark);
+			} else {
+				const theme = block.node.attrs.theme || defaultTheme;
+				if (theme && !loadedThemes.includes(theme) && theme in bundledThemes && !loadingThemes.has(theme)) themesToLoad.add(theme);
+			}
+		}
+		if (langsToLoad.size === 0 && themesToLoad.size === 0) return false;
+		for (const l of langsToLoad) loadingLangs.add(l);
+		for (const t of themesToLoad) loadingThemes.add(t);
+		try {
+			await Promise.all([...Array.from(langsToLoad).map((l) => sharedHighlighter.loadLanguage(l)), ...Array.from(themesToLoad).map((t) => sharedHighlighter.loadTheme(t))]);
+			return true;
+		} finally {
+			for (const l of langsToLoad) loadingLangs.delete(l);
+			for (const t of themesToLoad) loadingThemes.delete(t);
+		}
+	};
+	const plugin = new Plugin({
+		key: new PluginKey("shiki"),
+		view(editorView) {
+			let isDestroyed = false;
+			const init = async () => {
+				if (!sharedHighlighter) sharedHighlighter = await getSingletonHighlighter();
+				if (isDestroyed) return;
+				await loadMissing(editorView.state.doc);
+				if (isDestroyed) return;
+				editorView.dispatch(editorView.state.tr.setMeta("shikiPluginForceDecoration", true));
+			};
+			init();
+			return {
+				update(view) {
+					loadMissing(view.state.doc).then((hasLoadedNew) => {
+						if (hasLoadedNew && !isDestroyed) view.dispatch(view.state.tr.setMeta("shikiPluginForceDecoration", true));
+					});
+				},
+				destroy() {
+					isDestroyed = true;
+				}
+			};
+		},
+		state: {
+			init: (_, { doc }) => renderDecorations({
+				doc,
+				name,
+				defaultLanguage,
+				defaultTheme,
+				themes,
+				highlighter: sharedHighlighter
+			}),
+			apply: (tr, decorationSet, oldState, newState) => {
+				const oldHead = oldState.selection.$head.parent.type.name;
+				const newHead = newState.selection.$head.parent.type.name;
+				const oldBlocks = findChildren(oldState.doc, (node) => node.type.name === name);
+				const newBlocks = findChildren(newState.doc, (node) => node.type.name === name);
+				const docChanged = tr.docChanged && ([oldHead, newHead].includes(name) || oldBlocks.length !== newBlocks.length || tr.steps.some((step) => {
+					const { from, to } = step;
+					return from !== void 0 && to !== void 0 && oldBlocks.some((block) => block.pos >= from && block.pos + block.node.nodeSize <= to);
+				}));
+				if (tr.getMeta("shikiPluginForceDecoration") || docChanged) return renderDecorations({
+					doc: tr.doc,
+					name,
+					defaultLanguage,
+					defaultTheme,
+					themes,
+					highlighter: sharedHighlighter
+				});
+				return decorationSet.map(tr.mapping, tr.doc);
+			}
+		},
+		props: { decorations(state) {
+			return plugin.getState(state);
+		} }
+	});
+	return plugin;
+};
+const CodeBlockShiki = CodeBlock.extend({
+	addOptions() {
+		return {
+			...this.parent?.(),
+			defaultLanguage: null,
+			defaultTheme: "github-light",
+			themes: null
+		};
+	},
+	markdownTokenName: "code",
+	parseMarkdown(rawNode, builder) {
+		if (rawNode.raw?.startsWith("```") === false && rawNode.raw?.startsWith("~~~") === false && rawNode.codeBlockStyle !== "indented") return [];
+		return builder.createNode("codeBlock", { language: rawNode.lang || null }, rawNode.text ? [builder.createTextNode(rawNode.text)] : []);
+	},
+	renderMarkdown(node, builder) {
+		const lang = node.attrs?.language || "";
+		return node.content ? [
+			`\`\`\`${lang}`,
+			builder.renderChildren(node.content),
+			"```"
+		].join("\n") : `\`\`\`${lang}\n\n\`\`\``;
+	},
+	addProseMirrorPlugins() {
+		return [...this.parent?.() || [], createShikiPlugin({
+			name: this.name,
+			defaultLanguage: this.options.defaultLanguage,
+			defaultTheme: this.options.defaultTheme,
+			themes: this.options.themes
+		})];
+	}
+});
+
+//#endregion
+export { CodeBlockShiki };
+//# sourceMappingURL=code-block-shiki.mjs.map