@lax-wp/design-system 0.14.10 → 0.14.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/forms/md-input/MarkdownPreview.cjs.js +1 -1
- package/dist/components/forms/md-input/MarkdownPreview.cjs.js.map +1 -1
- package/dist/components/forms/md-input/MarkdownPreview.d.ts +1 -0
- package/dist/components/forms/md-input/MarkdownPreview.es.js +36 -27
- package/dist/components/forms/md-input/MarkdownPreview.es.js.map +1 -1
- package/dist/components/forms/md-input/RichMarkdownInput.cjs.js +1 -3
- package/dist/components/forms/md-input/RichMarkdownInput.cjs.js.map +1 -1
- package/dist/components/forms/md-input/RichMarkdownInput.d.ts +1 -0
- package/dist/components/forms/md-input/RichMarkdownInput.es.js +192 -191
- package/dist/components/forms/md-input/RichMarkdownInput.es.js.map +1 -1
- package/dist/components/forms/md-input/listEditing.cjs.js +13 -0
- package/dist/components/forms/md-input/listEditing.cjs.js.map +1 -0
- package/dist/components/forms/md-input/listEditing.d.ts +52 -0
- package/dist/components/forms/md-input/listEditing.es.js +65 -0
- package/dist/components/forms/md-input/listEditing.es.js.map +1 -0
- package/dist/components/forms/md-input/remarkSplitRestartedLists.cjs.js +3 -0
- package/dist/components/forms/md-input/remarkSplitRestartedLists.cjs.js.map +1 -0
- package/dist/components/forms/md-input/remarkSplitRestartedLists.d.ts +51 -0
- package/dist/components/forms/md-input/remarkSplitRestartedLists.es.js +33 -0
- package/dist/components/forms/md-input/remarkSplitRestartedLists.es.js.map +1 -0
- package/dist/design-system.css +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.d.ts +3 -0
- package/dist/index.es.js +229 -224
- package/dist/index.es.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var O=Object.create;var q=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var G=(l,o,a,
|
|
1
|
+
"use strict";var O=Object.create;var q=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var G=(l,o,a,u)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of $(o))!F.call(l,t)&&t!==a&&q(l,t,{get:()=>o[t],enumerable:!(u=B(o,t))||u.enumerable});return l};var w=(l,o,a)=>(a=l!=null?O(P(l)):{},G(o||!l||!l.__esModule?q(a,"default",{value:l,enumerable:!0}):a,l));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("../../../_virtual/index.cjs.js"),_=require("react"),M=require("react-markdown"),T=require("remark-gfm"),W=require("rehype-raw"),Z=require("./remarkSplitRestartedLists.cjs.js");;/* empty css */const J=_.lazy(async()=>{const[{Prism:l},{vscDarkPlus:o}]=await Promise.all([import("react-syntax-highlighter"),import("react-syntax-highlighter/dist/esm/styles/prism")]);return{default:({language:u,value:t})=>e.jsx(l,{language:u,style:o,customStyle:{margin:0,padding:"1rem",fontSize:"0.875rem",lineHeight:"1.5",background:"transparent"},wrapLongLines:!0,children:t})}}),j=_.forwardRef(({content:l,className:o,linkTarget:a="_blank",enableSyntaxHighlighting:u=!0,noIndent:t=!1,showMinimalPreview:m=!1,acceptAdvanceContent:r=!0,enableCollapsible:x=!1,collapsedHeight:k=180,expandLabel:v="Show more",collapseLabel:S="Show less",animationDurationMs:N=300},R)=>{const g=_.useRef(null),[p,y]=_.useState(!1),[E,L]=_.useState(0),[z,D]=_.useState(!1);_.useEffect(()=>{if(!x||!g.current)return;const i=g.current,s=()=>{const d=i.scrollHeight;L(d);const h=d>k;D(h),h||y(!1)};s();const n=new ResizeObserver(()=>{s()});return n.observe(i),()=>{n.disconnect()}},[l,x,k]);const c=x&&z,H=c?p?E:k:void 0;return e.jsxs("div",{ref:R,className:"w-full",children:[e.jsxs("div",{className:b(c?"relative overflow-hidden":""),style:c?{maxHeight:`${H}px`,transition:`max-height ${N}ms ease`}:void 0,children:[e.jsx("div",{ref:g,className:b("markdown-preview prose prose-sm dark:prose-invert max-w-none","font-inter font-medium text-sm leading-5",m?"[&_h1]:text-sm [&_h1]:font-medium [&_h1]:my-0 [&_h1]:leading-5 [&_h1]:text-inherit":"[&_h1]:text-2xl [&_h1]:font-bold [&_h1]:my-1 [&_h1]:leading-7 [&_h1]:text-inherit",m?"[&_h2]:text-sm [&_h2]:font-medium [&_h2]:my-0 [&_h2]:leading-5 [&_h2]:text-inherit":"[&_h2]:text-xl [&_h2]:font-bold [&_h2]:my-1 [&_h2]:leading-7 [&_h2]:text-inherit",m?"[&_h3]:text-sm [&_h3]:font-medium [&_h3]:my-0 [&_h3]:leading-5 [&_h3]:text-inherit":"[&_h3]:text-lg [&_h3]:font-semibold [&_h3]:my-1 [&_h3]:leading-6 [&_h3]:text-inherit","[&_h4]:text-inherit [&_h5]:text-inherit [&_h6]:text-inherit",m?"[&_p]:my-0 [&_p]:text-sm [&_p]:font-medium [&_p]:leading-5":"[&_p]:my-1 [&_p]:text-sm [&_p]:font-medium [&_p]:leading-5",t?"[&_ul]:list-disc [&_ul]:ml-0 [&_ul]:pl-6 [&_ul]:space-y-0 [&_ul]:my-0":"[&_ul]:list-disc [&_ul]:ml-8 [&_ul]:space-y-0 [&_ul]:my-0",t?"[&_ol]:list-decimal [&_ol]:ml-0 [&_ol]:pl-6 [&_ol]:space-y-0 [&_ol]:my-0":"[&_ol]:list-decimal [&_ol]:ml-8 [&_ol]:space-y-0 [&_ol]:my-0","[&_ol+ol]:mt-2 [&_ul+ul]:mt-2 [&_ol+ul]:mt-2 [&_ul+ol]:mt-2","[&_li]:mt-0 [&_li]:mb-0 [&_li]:text-sm [&_li]:font-medium [&_li]:leading-5 [&_li::marker]:text-inherit","[&_li>p]:my-0 [&_li>p]:text-sm [&_li>p]:font-medium [&_li>p]:leading-5",t?"[&_li]:pl-0":"","[&_li:has(input[type='checkbox'])]:list-none",t?"[&_li:has(input[type='checkbox'])]:pl-0 [&_li:has(input[type='checkbox'])]:-ml-4.5":"[&_li:has(input[type='checkbox'])]:-ml-4.5","[&_li>input[type='checkbox']]:mr-2 [&_li>input[type='checkbox']]:w-[11px] [&_li>input[type='checkbox']]:h-[11px]",r?"[&_blockquote]:border-l-4 [&_blockquote]:border-neutral-300 [&_blockquote]:dark:border-neutral-600":"[&_blockquote]:border-0",r&&m?t?"[&_blockquote]:pl-4 [&_blockquote]:py-2 [&_blockquote]:italic [&_blockquote]:my-0 [&_blockquote]:leading-5 [&_blockquote]:ml-0 [&_blockquote]:text-sm [&_blockquote]:font-medium":"[&_blockquote]:pl-4 [&_blockquote]:py-2 [&_blockquote]:italic [&_blockquote]:my-0 [&_blockquote]:leading-5 [&_blockquote]:ml-4 [&_blockquote]:text-sm [&_blockquote]:font-medium":r?t?"[&_blockquote]:pl-4 [&_blockquote]:py-2 [&_blockquote]:italic [&_blockquote]:my-1 [&_blockquote]:leading-6 [&_blockquote]:ml-0":"[&_blockquote]:pl-4 [&_blockquote]:py-2 [&_blockquote]:italic [&_blockquote]:my-1 [&_blockquote]:leading-6 [&_blockquote]:ml-4":"[&_blockquote]:pl-0 [&_blockquote]:py-0 [&_blockquote]:not-italic [&_blockquote]:my-0","[&_a]:text-primary-600 [&_a]:dark:text-primary-400 [&_a]:underline","[&_strong]:font-semibold [&_em]:italic [&_u]:underline [&_del]:line-through",r?"[&_img]:max-w-full [&_img]:h-auto [&_img]:rounded-lg [&_img]:my-1":"[&_img]:hidden",r?"[&_table]:w-full [&_table]:border-collapse [&_table]:my-1":"[&_table]:block [&_table]:border-0 [&_table]:my-0",r?"[&_th]:border [&_th]:border-neutral-300 [&_th]:dark:border-neutral-600":"[&_th]:border-0",r?"[&_th]:px-3 [&_th]:py-2 [&_th]:bg-neutral-50 [&_th]:dark:bg-neutral-800":"[&_th]:px-0 [&_th]:py-0 [&_th]:bg-transparent",r?"[&_th]:font-semibold [&_th]:text-left":"[&_th]:font-normal [&_th]:inline [&_th]:after:content-['_']",r?"[&_td]:border [&_td]:border-neutral-300 [&_td]:dark:border-neutral-600":"[&_td]:border-0",r?"[&_td]:px-3 [&_td]:py-2":"[&_td]:px-0 [&_td]:py-0 [&_td]:inline [&_td]:after:content-['_']",r?"[&_hr]:my-1 [&_hr]:border-neutral-300 [&_hr]:dark:border-neutral-600":"[&_hr]:hidden","text-[#101828] dark:text-neutral-100",o),children:e.jsx(M,{remarkPlugins:[T,Z.remarkSplitRestartedLists],rehypePlugins:[W],components:{a({children:i,href:s,...n}){return e.jsx("a",{href:s,target:a,rel:a==="_blank"?"noopener noreferrer":void 0,...n,children:i})},img({src:i,alt:s,...n}){return e.jsx("img",{src:i,alt:s,className:"max-w-full h-auto rounded-lg my-3",loading:"lazy",...n})},code({className:i,children:s,...n}){const d=/language-(\w+)/.exec(i||""),h=!i||!d,f=d?d[1]:"text";return!h&&!r?e.jsx("span",{className:"whitespace-pre-wrap text-sm font-medium leading-5",style:{fontFamily:"inherit",fontWeight:"normal"},children:s}):!h&&u&&r?e.jsxs("div",{className:"relative my-3 rounded-lg overflow-hidden",children:[e.jsx("div",{className:"flex items-center justify-between px-4 py-2 bg-[#2D2D2D] dark:bg-[#161B22] border-b border-[#3E3E3E] dark:border-[#21262D]",children:e.jsx("span",{className:"text-xs font-mono text-neutral-400 dark:text-neutral-500 uppercase",children:f})}),e.jsx("div",{className:"bg-[#1E1E1E] dark:bg-[#0D1117]",children:e.jsx(_.Suspense,{fallback:e.jsx("pre",{style:{margin:0,padding:"1rem",fontSize:"0.875rem",lineHeight:"1.5",background:"transparent",whiteSpace:"pre-wrap"},children:String(s).replace(/\n$/,"")}),children:e.jsx(J,{language:f,value:String(s).replace(/\n$/,"")})})})]}):e.jsx("code",{className:b(i,r?"bg-neutral-100 dark:bg-neutral-800 px-1.5 py-0.5 rounded font-mono text-[#101828] dark:text-neutral-200":"font-inherit text-sm leading-5 font-medium bg-transparent px-0 py-0"),...n,children:s})}},children:l||"*No content to display*"})}),c&&!p&&e.jsx("div",{"aria-hidden":"true",className:"pointer-events-none absolute inset-x-0 bottom-0 h-14 bg-gradient-to-t from-white via-white/80 to-transparent dark:from-black-700 dark:via-black-700/80 dark:to-transparent"})]}),c&&e.jsx("div",{className:"mt-2 flex justify-center items-center gap-2",children:e.jsxs("button",{type:"button",onClick:()=>y(i=>!i),className:"inline-flex items-center gap-1 text-primary-600 dark:text-primary-400 font-medium text-sm",children:[p?S:v,e.jsx("span",{className:b("inline-flex transition-transform duration-300",p?"rotate-0":"rotate-180"),children:e.jsx("svg",{width:"8",height:"5",viewBox:"0 0 8 5",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e.jsx("path",{d:"M1.14167 4.19465L3.72833 1.60798L6.315 4.19465C6.575 4.45465 6.995 4.45465 7.255 4.19465C7.515 3.93465 7.515 3.51465 7.255 3.25465L4.195 0.194649C3.935 -0.0653515 3.515 -0.0653515 3.255 0.194649L0.195 3.25465C-0.065 3.51465 -0.065 3.93465 0.195 4.19465C0.455 4.44798 0.881667 4.45465 1.14167 4.19465Z",fill:"currentColor"})})})]})})]})});j.displayName="MarkdownPreview";exports.MarkdownPreview=j;
|
|
2
2
|
//# sourceMappingURL=MarkdownPreview.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MarkdownPreview.cjs.js","sources":["../../../../src/components/forms/md-input/MarkdownPreview.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { forwardRef, lazy, Suspense, useEffect, useRef, useState } from \"react\";\nimport ReactMarkdown from \"react-markdown\";\nimport remarkGfm from \"remark-gfm\";\nimport rehypeRaw from \"rehype-raw\";\n\n// react-syntax-highlighter is an OPTIONAL peer dependency. Load it (and its\n// Prism theme) lazily via dynamic import so it is only fetched when a highlighted\n// code block is actually rendered. This keeps it out of every consumer's main\n// bundle, lets it tree-shake away entirely when MarkdownPreview is unused, and\n// means consumers that never render markdown code blocks don't need to install\n// it at all (a bare static import would force every consumer to provide it).\nconst LazyCodeBlock = lazy(async () => {\n const [{ Prism }, { vscDarkPlus }] = await Promise.all([\n import(\"react-syntax-highlighter\"),\n import(\"react-syntax-highlighter/dist/esm/styles/prism\"),\n ]);\n const CodeBlock = ({ language, value }: { language: string; value: string }) => (\n <Prism\n language={language}\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n style={vscDarkPlus as any}\n customStyle={{\n margin: 0,\n padding: \"1rem\",\n fontSize: \"0.875rem\",\n lineHeight: \"1.5\",\n background: \"transparent\",\n }}\n wrapLongLines\n >\n {value}\n </Prism>\n );\n return { default: CodeBlock };\n});\n\n/**\n * Props for the MarkdownPreview component\n */\nexport interface MarkdownPreviewProps {\n /** Markdown content to display */\n content: string;\n /** Additional CSS classes for the wrapper container */\n className?: string;\n /** Link target behavior: '_blank' for new tab, '_self' for current tab */\n linkTarget?: \"_blank\" | \"_self\";\n /** Whether to show syntax highlighting for code blocks */\n enableSyntaxHighlighting?: boolean;\n /** Whether to remove indentation from lists and align all content to the left */\n noIndent?: boolean;\n /** Whether to display all content with uniform font size/weight (paragraph-like) while keeping formatting */\n showMinimalPreview?: boolean;\n /** Whether to accept and render advanced content (code blocks, blockquotes, tables, images) */\n acceptAdvanceContent?: boolean;\n /** Whether to show an animated Show more/Show less toggle */\n enableCollapsible?: boolean;\n /** Collapsed preview height in pixels when collapsible mode is enabled */\n collapsedHeight?: number;\n /** Label for the expand action */\n expandLabel?: string;\n /** Label for the collapse action */\n collapseLabel?: string;\n /** Expand/collapse animation duration in milliseconds */\n animationDurationMs?: number;\n}\n\n/**\n * MarkdownPreview component displays rendered markdown content.\n *\n * **Supported Markdown Features:**\n * - Headings (H1-H6)\n * - Text formatting (bold, italic, underline, strikethrough)\n * - Lists (bullet and numbered)\n * - Code blocks with syntax highlighting\n * - Inline code\n * - Block quotes\n * - Links with configurable target\n * - Images (responsive)\n * - Tables\n * - Horizontal rules\n *\n * **Features:**\n * - GFM (GitHub Flavored Markdown) support\n * - HTML support via rehype-raw\n * - Syntax highlighting for code blocks\n * - Responsive images\n * - Dark mode support\n * - Configurable link behavior\n * - Optional no-indent mode for aligned content\n * - Minimal preview mode (uniform typography)\n * - Toggle advanced content (code blocks, blockquotes, tables, images)\n *\n * @example\n * ```tsx\n * <MarkdownPreview\n * content=\"# Hello World\\n\\nThis is **bold** text.\"\n * linkTarget=\"_blank\"\n * noIndent={false}\n * showMinimalPreview={false}\n * acceptAdvanceContent={true}\n * />\n * ```\n */\nexport const MarkdownPreview = forwardRef<HTMLDivElement, MarkdownPreviewProps>(\n (\n {\n content,\n className,\n linkTarget = \"_blank\",\n enableSyntaxHighlighting = true,\n noIndent = false,\n showMinimalPreview = false,\n acceptAdvanceContent = true,\n enableCollapsible = false,\n collapsedHeight = 180,\n expandLabel = \"Show more\",\n collapseLabel = \"Show less\",\n animationDurationMs = 300,\n },\n ref\n ) => {\n const contentRef = useRef<HTMLDivElement>(null);\n const [isExpanded, setIsExpanded] = useState(false);\n const [contentHeight, setContentHeight] = useState(0);\n const [isOverflowing, setIsOverflowing] = useState(false);\n\n useEffect(() => {\n if (!enableCollapsible || !contentRef.current) {\n return;\n }\n\n const element = contentRef.current;\n\n const measureContent = () => {\n const measuredHeight = element.scrollHeight;\n setContentHeight(measuredHeight);\n const hasOverflow = measuredHeight > collapsedHeight;\n setIsOverflowing(hasOverflow);\n if (!hasOverflow) {\n setIsExpanded(false);\n }\n };\n\n measureContent();\n\n const resizeObserver = new ResizeObserver(() => {\n measureContent();\n });\n\n resizeObserver.observe(element);\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [content, enableCollapsible, collapsedHeight]);\n\n const showToggle = enableCollapsible && isOverflowing;\n const animatedMaxHeight = showToggle\n ? isExpanded\n ? contentHeight\n : collapsedHeight\n : undefined;\n\n return (\n <div ref={ref} className=\"w-full\">\n <div\n className={cn(showToggle ? \"relative overflow-hidden\" : \"\")}\n style={\n showToggle\n ? {\n maxHeight: `${animatedMaxHeight}px`,\n transition: `max-height ${animationDurationMs}ms ease`,\n }\n : undefined\n }\n >\n <div\n ref={contentRef}\n className={cn(\n \"markdown-preview prose prose-sm dark:prose-invert max-w-none\",\n \"font-inter font-medium text-sm leading-5\",\n showMinimalPreview\n ? \"[&_h1]:text-sm [&_h1]:font-medium [&_h1]:my-0 [&_h1]:leading-5 [&_h1]:text-inherit\"\n : \"[&_h1]:text-2xl [&_h1]:font-bold [&_h1]:my-1 [&_h1]:leading-7 [&_h1]:text-inherit\",\n showMinimalPreview\n ? \"[&_h2]:text-sm [&_h2]:font-medium [&_h2]:my-0 [&_h2]:leading-5 [&_h2]:text-inherit\"\n : \"[&_h2]:text-xl [&_h2]:font-bold [&_h2]:my-1 [&_h2]:leading-7 [&_h2]:text-inherit\",\n showMinimalPreview\n ? \"[&_h3]:text-sm [&_h3]:font-medium [&_h3]:my-0 [&_h3]:leading-5 [&_h3]:text-inherit\"\n : \"[&_h3]:text-lg [&_h3]:font-semibold [&_h3]:my-1 [&_h3]:leading-6 [&_h3]:text-inherit\",\n \"[&_h4]:text-inherit [&_h5]:text-inherit [&_h6]:text-inherit\",\n showMinimalPreview\n ? \"[&_p]:my-0\"\n : \"[&_p]:my-1 [&_p]:text-sm [&_p]:font-medium [&_p]:leading-6\",\n showMinimalPreview\n ? noIndent\n ? \"[&_ul]:list-disc [&_ul]:ml-0 [&_ul]:pl-6 [&_ul]:space-y-0 [&_ul]:my-0\"\n : \"[&_ul]:list-disc [&_ul]:ml-8 [&_ul]:space-y-0 [&_ul]:my-0\"\n : noIndent\n ? \"[&_ul]:list-disc [&_ul]:ml-0 [&_ul]:pl-6 [&_ul]:space-y-0 [&_ul]:my-0\"\n : \"[&_ul]:list-disc [&_ul]:ml-8 [&_ul]:space-y-0 [&_ul]:my-0\",\n showMinimalPreview\n ? noIndent\n ? \"[&_ol]:list-decimal [&_ol]:ml-0 [&_ol]:pl-6 [&_ol]:space-y-0 [&_ol]:my-0\"\n : \"[&_ol]:list-decimal [&_ol]:ml-8 [&_ol]:space-y-0 [&_ol]:my-0\"\n : noIndent\n ? \"[&_ol]:list-decimal [&_ol]:ml-0 [&_ol]:pl-6 [&_ol]:space-y-0 [&_ol]:my-0\"\n : \"[&_ol]:list-decimal [&_ol]:ml-8 [&_ol]:space-y-0 [&_ol]:my-0\",\n \"[&_li]:mb-0 [&_li]:text-sm [&_li]:font-medium [&_li]:leading-5 [&_li::marker]:text-inherit\",\n noIndent ? \"[&_li]:pl-0\" : \"\",\n \"[&_li:has(input[type='checkbox'])]:list-none\",\n noIndent\n ? \"[&_li:has(input[type='checkbox'])]:pl-0 [&_li:has(input[type='checkbox'])]:-ml-4.5\"\n : \"[&_li:has(input[type='checkbox'])]:-ml-4.5\",\n \"[&_li>input[type='checkbox']]:mr-2 [&_li>input[type='checkbox']]:w-[11px] [&_li>input[type='checkbox']]:h-[11px]\",\n acceptAdvanceContent\n ? \"[&_blockquote]:border-l-4 [&_blockquote]:border-neutral-300 [&_blockquote]:dark:border-neutral-600\"\n : \"[&_blockquote]:border-0\",\n acceptAdvanceContent && showMinimalPreview\n ? noIndent\n ? \"[&_blockquote]:pl-4 [&_blockquote]:py-2 [&_blockquote]:italic [&_blockquote]:my-0 [&_blockquote]:leading-5 [&_blockquote]:ml-0 [&_blockquote]:text-sm [&_blockquote]:font-medium\"\n : \"[&_blockquote]:pl-4 [&_blockquote]:py-2 [&_blockquote]:italic [&_blockquote]:my-0 [&_blockquote]:leading-5 [&_blockquote]:ml-4 [&_blockquote]:text-sm [&_blockquote]:font-medium\"\n : acceptAdvanceContent\n ? noIndent\n ? \"[&_blockquote]:pl-4 [&_blockquote]:py-2 [&_blockquote]:italic [&_blockquote]:my-1 [&_blockquote]:leading-6 [&_blockquote]:ml-0\"\n : \"[&_blockquote]:pl-4 [&_blockquote]:py-2 [&_blockquote]:italic [&_blockquote]:my-1 [&_blockquote]:leading-6 [&_blockquote]:ml-4\"\n : \"[&_blockquote]:pl-0 [&_blockquote]:py-0 [&_blockquote]:not-italic [&_blockquote]:my-0\",\n \"[&_a]:text-primary-600 [&_a]:dark:text-primary-400 [&_a]:underline\",\n \"[&_strong]:font-semibold [&_em]:italic [&_u]:underline [&_del]:line-through\",\n acceptAdvanceContent\n ? \"[&_img]:max-w-full [&_img]:h-auto [&_img]:rounded-lg [&_img]:my-1\"\n : \"[&_img]:hidden\",\n acceptAdvanceContent\n ? \"[&_table]:w-full [&_table]:border-collapse [&_table]:my-1\"\n : \"[&_table]:block [&_table]:border-0 [&_table]:my-0\",\n acceptAdvanceContent\n ? \"[&_th]:border [&_th]:border-neutral-300 [&_th]:dark:border-neutral-600\"\n : \"[&_th]:border-0\",\n acceptAdvanceContent\n ? \"[&_th]:px-3 [&_th]:py-2 [&_th]:bg-neutral-50 [&_th]:dark:bg-neutral-800\"\n : \"[&_th]:px-0 [&_th]:py-0 [&_th]:bg-transparent\",\n acceptAdvanceContent\n ? \"[&_th]:font-semibold [&_th]:text-left\"\n : \"[&_th]:font-normal [&_th]:inline [&_th]:after:content-['_']\",\n acceptAdvanceContent\n ? \"[&_td]:border [&_td]:border-neutral-300 [&_td]:dark:border-neutral-600\"\n : \"[&_td]:border-0\",\n acceptAdvanceContent\n ? \"[&_td]:px-3 [&_td]:py-2\"\n : \"[&_td]:px-0 [&_td]:py-0 [&_td]:inline [&_td]:after:content-['_']\",\n acceptAdvanceContent\n ? \"[&_hr]:my-1 [&_hr]:border-neutral-300 [&_hr]:dark:border-neutral-600\"\n : \"[&_hr]:hidden\",\n \"text-[#101828] dark:text-neutral-100\",\n className\n )}\n >\n <ReactMarkdown\n remarkPlugins={[remarkGfm]}\n rehypePlugins={[rehypeRaw]}\n components={{\n a({ children, href, ...props }) {\n return (\n <a\n href={href}\n target={linkTarget}\n rel={\n linkTarget === \"_blank\"\n ? \"noopener noreferrer\"\n : undefined\n }\n {...props}\n >\n {children}\n </a>\n );\n },\n img({ src, alt, ...props }) {\n return (\n <img\n src={src}\n alt={alt}\n className=\"max-w-full h-auto rounded-lg my-3\"\n loading=\"lazy\"\n {...props}\n />\n );\n },\n code({ className, children, ...props }) {\n const match = /language-(\\w+)/.exec(className || \"\");\n const isInline = !className || !match;\n const language = match ? match[1] : \"text\";\n\n if (!isInline && !acceptAdvanceContent) {\n return (\n <span\n className=\"whitespace-pre-wrap text-sm font-medium leading-5\"\n style={{ fontFamily: \"inherit\", fontWeight: \"normal\" }}\n >\n {children}\n </span>\n );\n }\n\n if (\n !isInline &&\n enableSyntaxHighlighting &&\n acceptAdvanceContent\n ) {\n return (\n <div className=\"relative my-3 rounded-lg overflow-hidden\">\n <div className=\"flex items-center justify-between px-4 py-2 bg-[#2D2D2D] dark:bg-[#161B22] border-b border-[#3E3E3E] dark:border-[#21262D]\">\n <span className=\"text-xs font-mono text-neutral-400 dark:text-neutral-500 uppercase\">\n {language}\n </span>\n </div>\n <div className=\"bg-[#1E1E1E] dark:bg-[#0D1117]\">\n <Suspense\n fallback={\n <pre\n style={{\n margin: 0,\n padding: \"1rem\",\n fontSize: \"0.875rem\",\n lineHeight: \"1.5\",\n background: \"transparent\",\n whiteSpace: \"pre-wrap\",\n }}\n >\n {String(children).replace(/\\n$/, \"\")}\n </pre>\n }\n >\n <LazyCodeBlock\n language={language}\n value={String(children).replace(/\\n$/, \"\")}\n />\n </Suspense>\n </div>\n </div>\n );\n }\n\n return (\n <code\n className={cn(\n className,\n acceptAdvanceContent\n ? \"bg-neutral-100 dark:bg-neutral-800 px-1.5 py-0.5 rounded font-mono text-[#101828] dark:text-neutral-200\"\n : \"font-inherit text-sm leading-5 font-medium bg-transparent px-0 py-0\"\n )}\n {...props}\n >\n {children}\n </code>\n );\n },\n }}\n >\n {content || \"*No content to display*\"}\n </ReactMarkdown>\n </div>\n\n {showToggle && !isExpanded && (\n <div\n aria-hidden=\"true\"\n className=\"pointer-events-none absolute inset-x-0 bottom-0 h-14 bg-gradient-to-t from-white via-white/80 to-transparent dark:from-black-700 dark:via-black-700/80 dark:to-transparent\"\n />\n )}\n </div>\n\n {showToggle && (\n <div className=\"mt-2 flex justify-center items-center gap-2\">\n <button\n type=\"button\"\n onClick={() => setIsExpanded((prev) => !prev)}\n className=\"inline-flex items-center gap-1 text-primary-600 dark:text-primary-400 font-medium text-sm\"\n >\n {isExpanded ? collapseLabel : expandLabel}\n <span\n className={cn(\n \"inline-flex transition-transform duration-300\",\n !isExpanded ? \"rotate-180\" : \"rotate-0\"\n )}\n >\n <svg\n width=\"8\"\n height=\"5\"\n viewBox=\"0 0 8 5\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M1.14167 4.19465L3.72833 1.60798L6.315 4.19465C6.575 4.45465 6.995 4.45465 7.255 4.19465C7.515 3.93465 7.515 3.51465 7.255 3.25465L4.195 0.194649C3.935 -0.0653515 3.515 -0.0653515 3.255 0.194649L0.195 3.25465C-0.065 3.51465 -0.065 3.93465 0.195 4.19465C0.455 4.44798 0.881667 4.45465 1.14167 4.19465Z\"\n fill=\"currentColor\"\n />\n </svg>\n </span>\n </button>\n </div>\n )}\n </div>\n );\n }\n);\n\nMarkdownPreview.displayName = \"MarkdownPreview\";\n"],"names":["LazyCodeBlock","lazy","Prism","vscDarkPlus","language","value","jsx","MarkdownPreview","forwardRef","content","className","linkTarget","enableSyntaxHighlighting","noIndent","showMinimalPreview","acceptAdvanceContent","enableCollapsible","collapsedHeight","expandLabel","collapseLabel","animationDurationMs","ref","contentRef","useRef","isExpanded","setIsExpanded","useState","contentHeight","setContentHeight","isOverflowing","setIsOverflowing","useEffect","element","measureContent","measuredHeight","hasOverflow","resizeObserver","showToggle","animatedMaxHeight","jsxs","cn","ReactMarkdown","remarkGfm","rehypeRaw","children","href","props","src","alt","match","isInline","Suspense","prev"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MarkdownPreview.cjs.js","sources":["../../../../src/components/forms/md-input/MarkdownPreview.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { forwardRef, lazy, Suspense, useEffect, useRef, useState } from \"react\";\nimport ReactMarkdown from \"react-markdown\";\nimport remarkGfm from \"remark-gfm\";\nimport rehypeRaw from \"rehype-raw\";\nimport { remarkSplitRestartedLists } from \"./remarkSplitRestartedLists\";\nimport \"./styles.css\";\n\n// react-syntax-highlighter is an OPTIONAL peer dependency. Load it (and its\n// Prism theme) lazily via dynamic import so it is only fetched when a highlighted\n// code block is actually rendered. This keeps it out of every consumer's main\n// bundle, lets it tree-shake away entirely when MarkdownPreview is unused, and\n// means consumers that never render markdown code blocks don't need to install\n// it at all (a bare static import would force every consumer to provide it).\nconst LazyCodeBlock = lazy(async () => {\n const [{ Prism }, { vscDarkPlus }] = await Promise.all([\n import(\"react-syntax-highlighter\"),\n import(\"react-syntax-highlighter/dist/esm/styles/prism\"),\n ]);\n const CodeBlock = ({ language, value }: { language: string; value: string }) => (\n <Prism\n language={language}\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n style={vscDarkPlus as any}\n customStyle={{\n margin: 0,\n padding: \"1rem\",\n fontSize: \"0.875rem\",\n lineHeight: \"1.5\",\n background: \"transparent\",\n }}\n wrapLongLines\n >\n {value}\n </Prism>\n );\n return { default: CodeBlock };\n});\n\n/**\n * Props for the MarkdownPreview component\n */\nexport interface MarkdownPreviewProps {\n /** Markdown content to display */\n content: string;\n /** Additional CSS classes for the wrapper container */\n className?: string;\n /** Link target behavior: '_blank' for new tab, '_self' for current tab */\n linkTarget?: \"_blank\" | \"_self\";\n /** Whether to show syntax highlighting for code blocks */\n enableSyntaxHighlighting?: boolean;\n /** Whether to remove indentation from lists and align all content to the left */\n noIndent?: boolean;\n /** Whether to display all content with uniform font size/weight (paragraph-like) while keeping formatting */\n showMinimalPreview?: boolean;\n /** Whether to accept and render advanced content (code blocks, blockquotes, tables, images) */\n acceptAdvanceContent?: boolean;\n /** Whether to show an animated Show more/Show less toggle */\n enableCollapsible?: boolean;\n /** Collapsed preview height in pixels when collapsible mode is enabled */\n collapsedHeight?: number;\n /** Label for the expand action */\n expandLabel?: string;\n /** Label for the collapse action */\n collapseLabel?: string;\n /** Expand/collapse animation duration in milliseconds */\n animationDurationMs?: number;\n}\n\n/**\n * MarkdownPreview component displays rendered markdown content.\n *\n * **Supported Markdown Features:**\n * - Headings (H1-H6)\n * - Text formatting (bold, italic, underline, strikethrough)\n * - Lists (bullet and numbered)\n * - Code blocks with syntax highlighting\n * - Inline code\n * - Block quotes\n * - Links with configurable target\n * - Images (responsive)\n * - Tables\n * - Horizontal rules\n *\n * **Features:**\n * - GFM (GitHub Flavored Markdown) support\n * - HTML support via rehype-raw\n * - Syntax highlighting for code blocks\n * - Responsive images\n * - Dark mode support\n * - Configurable link behavior\n * - Optional no-indent mode for aligned content\n * - Minimal preview mode (uniform typography)\n * - Toggle advanced content (code blocks, blockquotes, tables, images)\n *\n * @example\n * ```tsx\n * <MarkdownPreview\n * content=\"# Hello World\\n\\nThis is **bold** text.\"\n * linkTarget=\"_blank\"\n * noIndent={false}\n * showMinimalPreview={false}\n * acceptAdvanceContent={true}\n * />\n * ```\n */\nexport const MarkdownPreview = forwardRef<HTMLDivElement, MarkdownPreviewProps>(\n (\n {\n content,\n className,\n linkTarget = \"_blank\",\n enableSyntaxHighlighting = true,\n noIndent = false,\n showMinimalPreview = false,\n acceptAdvanceContent = true,\n enableCollapsible = false,\n collapsedHeight = 180,\n expandLabel = \"Show more\",\n collapseLabel = \"Show less\",\n animationDurationMs = 300,\n },\n ref\n ) => {\n const contentRef = useRef<HTMLDivElement>(null);\n const [isExpanded, setIsExpanded] = useState(false);\n const [contentHeight, setContentHeight] = useState(0);\n const [isOverflowing, setIsOverflowing] = useState(false);\n\n useEffect(() => {\n if (!enableCollapsible || !contentRef.current) {\n return;\n }\n\n const element = contentRef.current;\n\n const measureContent = () => {\n const measuredHeight = element.scrollHeight;\n setContentHeight(measuredHeight);\n const hasOverflow = measuredHeight > collapsedHeight;\n setIsOverflowing(hasOverflow);\n if (!hasOverflow) {\n setIsExpanded(false);\n }\n };\n\n measureContent();\n\n const resizeObserver = new ResizeObserver(() => {\n measureContent();\n });\n\n resizeObserver.observe(element);\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [content, enableCollapsible, collapsedHeight]);\n\n const showToggle = enableCollapsible && isOverflowing;\n const animatedMaxHeight = showToggle\n ? isExpanded\n ? contentHeight\n : collapsedHeight\n : undefined;\n\n return (\n <div ref={ref} className=\"w-full\">\n <div\n className={cn(showToggle ? \"relative overflow-hidden\" : \"\")}\n style={\n showToggle\n ? {\n maxHeight: `${animatedMaxHeight}px`,\n transition: `max-height ${animationDurationMs}ms ease`,\n }\n : undefined\n }\n >\n <div\n ref={contentRef}\n className={cn(\n \"markdown-preview prose prose-sm dark:prose-invert max-w-none\",\n \"font-inter font-medium text-sm leading-5\",\n showMinimalPreview\n ? \"[&_h1]:text-sm [&_h1]:font-medium [&_h1]:my-0 [&_h1]:leading-5 [&_h1]:text-inherit\"\n : \"[&_h1]:text-2xl [&_h1]:font-bold [&_h1]:my-1 [&_h1]:leading-7 [&_h1]:text-inherit\",\n showMinimalPreview\n ? \"[&_h2]:text-sm [&_h2]:font-medium [&_h2]:my-0 [&_h2]:leading-5 [&_h2]:text-inherit\"\n : \"[&_h2]:text-xl [&_h2]:font-bold [&_h2]:my-1 [&_h2]:leading-7 [&_h2]:text-inherit\",\n showMinimalPreview\n ? \"[&_h3]:text-sm [&_h3]:font-medium [&_h3]:my-0 [&_h3]:leading-5 [&_h3]:text-inherit\"\n : \"[&_h3]:text-lg [&_h3]:font-semibold [&_h3]:my-1 [&_h3]:leading-6 [&_h3]:text-inherit\",\n \"[&_h4]:text-inherit [&_h5]:text-inherit [&_h6]:text-inherit\",\n // Paragraphs share the list items' size/weight/leading — only the\n // block spacing differs between minimal and default preview\n showMinimalPreview\n ? \"[&_p]:my-0 [&_p]:text-sm [&_p]:font-medium [&_p]:leading-5\"\n : \"[&_p]:my-1 [&_p]:text-sm [&_p]:font-medium [&_p]:leading-5\",\n showMinimalPreview\n ? noIndent\n ? \"[&_ul]:list-disc [&_ul]:ml-0 [&_ul]:pl-6 [&_ul]:space-y-0 [&_ul]:my-0\"\n : \"[&_ul]:list-disc [&_ul]:ml-8 [&_ul]:space-y-0 [&_ul]:my-0\"\n : noIndent\n ? \"[&_ul]:list-disc [&_ul]:ml-0 [&_ul]:pl-6 [&_ul]:space-y-0 [&_ul]:my-0\"\n : \"[&_ul]:list-disc [&_ul]:ml-8 [&_ul]:space-y-0 [&_ul]:my-0\",\n showMinimalPreview\n ? noIndent\n ? \"[&_ol]:list-decimal [&_ol]:ml-0 [&_ol]:pl-6 [&_ol]:space-y-0 [&_ol]:my-0\"\n : \"[&_ol]:list-decimal [&_ol]:ml-8 [&_ol]:space-y-0 [&_ol]:my-0\"\n : noIndent\n ? \"[&_ol]:list-decimal [&_ol]:ml-0 [&_ol]:pl-6 [&_ol]:space-y-0 [&_ol]:my-0\"\n : \"[&_ol]:list-decimal [&_ol]:ml-8 [&_ol]:space-y-0 [&_ol]:my-0\",\n // Separate consecutive lists (a blank line in the source starts a new list)\n \"[&_ol+ol]:mt-2 [&_ul+ul]:mt-2 [&_ol+ul]:mt-2 [&_ul+ol]:mt-2\",\n \"[&_li]:mt-0 [&_li]:mb-0 [&_li]:text-sm [&_li]:font-medium [&_li]:leading-5 [&_li::marker]:text-inherit\",\n // Loose lists (any blank line between items) wrap each item's content\n // in a <p>; strip its margins so item spacing matches a tight list\n \"[&_li>p]:my-0 [&_li>p]:text-sm [&_li>p]:font-medium [&_li>p]:leading-5\",\n noIndent ? \"[&_li]:pl-0\" : \"\",\n \"[&_li:has(input[type='checkbox'])]:list-none\",\n noIndent\n ? \"[&_li:has(input[type='checkbox'])]:pl-0 [&_li:has(input[type='checkbox'])]:-ml-4.5\"\n : \"[&_li:has(input[type='checkbox'])]:-ml-4.5\",\n \"[&_li>input[type='checkbox']]:mr-2 [&_li>input[type='checkbox']]:w-[11px] [&_li>input[type='checkbox']]:h-[11px]\",\n acceptAdvanceContent\n ? \"[&_blockquote]:border-l-4 [&_blockquote]:border-neutral-300 [&_blockquote]:dark:border-neutral-600\"\n : \"[&_blockquote]:border-0\",\n acceptAdvanceContent && showMinimalPreview\n ? noIndent\n ? \"[&_blockquote]:pl-4 [&_blockquote]:py-2 [&_blockquote]:italic [&_blockquote]:my-0 [&_blockquote]:leading-5 [&_blockquote]:ml-0 [&_blockquote]:text-sm [&_blockquote]:font-medium\"\n : \"[&_blockquote]:pl-4 [&_blockquote]:py-2 [&_blockquote]:italic [&_blockquote]:my-0 [&_blockquote]:leading-5 [&_blockquote]:ml-4 [&_blockquote]:text-sm [&_blockquote]:font-medium\"\n : acceptAdvanceContent\n ? noIndent\n ? \"[&_blockquote]:pl-4 [&_blockquote]:py-2 [&_blockquote]:italic [&_blockquote]:my-1 [&_blockquote]:leading-6 [&_blockquote]:ml-0\"\n : \"[&_blockquote]:pl-4 [&_blockquote]:py-2 [&_blockquote]:italic [&_blockquote]:my-1 [&_blockquote]:leading-6 [&_blockquote]:ml-4\"\n : \"[&_blockquote]:pl-0 [&_blockquote]:py-0 [&_blockquote]:not-italic [&_blockquote]:my-0\",\n \"[&_a]:text-primary-600 [&_a]:dark:text-primary-400 [&_a]:underline\",\n \"[&_strong]:font-semibold [&_em]:italic [&_u]:underline [&_del]:line-through\",\n acceptAdvanceContent\n ? \"[&_img]:max-w-full [&_img]:h-auto [&_img]:rounded-lg [&_img]:my-1\"\n : \"[&_img]:hidden\",\n acceptAdvanceContent\n ? \"[&_table]:w-full [&_table]:border-collapse [&_table]:my-1\"\n : \"[&_table]:block [&_table]:border-0 [&_table]:my-0\",\n acceptAdvanceContent\n ? \"[&_th]:border [&_th]:border-neutral-300 [&_th]:dark:border-neutral-600\"\n : \"[&_th]:border-0\",\n acceptAdvanceContent\n ? \"[&_th]:px-3 [&_th]:py-2 [&_th]:bg-neutral-50 [&_th]:dark:bg-neutral-800\"\n : \"[&_th]:px-0 [&_th]:py-0 [&_th]:bg-transparent\",\n acceptAdvanceContent\n ? \"[&_th]:font-semibold [&_th]:text-left\"\n : \"[&_th]:font-normal [&_th]:inline [&_th]:after:content-['_']\",\n acceptAdvanceContent\n ? \"[&_td]:border [&_td]:border-neutral-300 [&_td]:dark:border-neutral-600\"\n : \"[&_td]:border-0\",\n acceptAdvanceContent\n ? \"[&_td]:px-3 [&_td]:py-2\"\n : \"[&_td]:px-0 [&_td]:py-0 [&_td]:inline [&_td]:after:content-['_']\",\n acceptAdvanceContent\n ? \"[&_hr]:my-1 [&_hr]:border-neutral-300 [&_hr]:dark:border-neutral-600\"\n : \"[&_hr]:hidden\",\n \"text-[#101828] dark:text-neutral-100\",\n className\n )}\n >\n <ReactMarkdown\n remarkPlugins={[remarkGfm, remarkSplitRestartedLists]}\n rehypePlugins={[rehypeRaw]}\n components={{\n a({ children, href, ...props }) {\n return (\n <a\n href={href}\n target={linkTarget}\n rel={\n linkTarget === \"_blank\"\n ? \"noopener noreferrer\"\n : undefined\n }\n {...props}\n >\n {children}\n </a>\n );\n },\n img({ src, alt, ...props }) {\n return (\n <img\n src={src}\n alt={alt}\n className=\"max-w-full h-auto rounded-lg my-3\"\n loading=\"lazy\"\n {...props}\n />\n );\n },\n code({ className, children, ...props }) {\n const match = /language-(\\w+)/.exec(className || \"\");\n const isInline = !className || !match;\n const language = match ? match[1] : \"text\";\n\n if (!isInline && !acceptAdvanceContent) {\n return (\n <span\n className=\"whitespace-pre-wrap text-sm font-medium leading-5\"\n style={{ fontFamily: \"inherit\", fontWeight: \"normal\" }}\n >\n {children}\n </span>\n );\n }\n\n if (\n !isInline &&\n enableSyntaxHighlighting &&\n acceptAdvanceContent\n ) {\n return (\n <div className=\"relative my-3 rounded-lg overflow-hidden\">\n <div className=\"flex items-center justify-between px-4 py-2 bg-[#2D2D2D] dark:bg-[#161B22] border-b border-[#3E3E3E] dark:border-[#21262D]\">\n <span className=\"text-xs font-mono text-neutral-400 dark:text-neutral-500 uppercase\">\n {language}\n </span>\n </div>\n <div className=\"bg-[#1E1E1E] dark:bg-[#0D1117]\">\n <Suspense\n fallback={\n <pre\n style={{\n margin: 0,\n padding: \"1rem\",\n fontSize: \"0.875rem\",\n lineHeight: \"1.5\",\n background: \"transparent\",\n whiteSpace: \"pre-wrap\",\n }}\n >\n {String(children).replace(/\\n$/, \"\")}\n </pre>\n }\n >\n <LazyCodeBlock\n language={language}\n value={String(children).replace(/\\n$/, \"\")}\n />\n </Suspense>\n </div>\n </div>\n );\n }\n\n return (\n <code\n className={cn(\n className,\n acceptAdvanceContent\n ? \"bg-neutral-100 dark:bg-neutral-800 px-1.5 py-0.5 rounded font-mono text-[#101828] dark:text-neutral-200\"\n : \"font-inherit text-sm leading-5 font-medium bg-transparent px-0 py-0\"\n )}\n {...props}\n >\n {children}\n </code>\n );\n },\n }}\n >\n {content || \"*No content to display*\"}\n </ReactMarkdown>\n </div>\n\n {showToggle && !isExpanded && (\n <div\n aria-hidden=\"true\"\n className=\"pointer-events-none absolute inset-x-0 bottom-0 h-14 bg-gradient-to-t from-white via-white/80 to-transparent dark:from-black-700 dark:via-black-700/80 dark:to-transparent\"\n />\n )}\n </div>\n\n {showToggle && (\n <div className=\"mt-2 flex justify-center items-center gap-2\">\n <button\n type=\"button\"\n onClick={() => setIsExpanded((prev) => !prev)}\n className=\"inline-flex items-center gap-1 text-primary-600 dark:text-primary-400 font-medium text-sm\"\n >\n {isExpanded ? collapseLabel : expandLabel}\n <span\n className={cn(\n \"inline-flex transition-transform duration-300\",\n !isExpanded ? \"rotate-180\" : \"rotate-0\"\n )}\n >\n <svg\n width=\"8\"\n height=\"5\"\n viewBox=\"0 0 8 5\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M1.14167 4.19465L3.72833 1.60798L6.315 4.19465C6.575 4.45465 6.995 4.45465 7.255 4.19465C7.515 3.93465 7.515 3.51465 7.255 3.25465L4.195 0.194649C3.935 -0.0653515 3.515 -0.0653515 3.255 0.194649L0.195 3.25465C-0.065 3.51465 -0.065 3.93465 0.195 4.19465C0.455 4.44798 0.881667 4.45465 1.14167 4.19465Z\"\n fill=\"currentColor\"\n />\n </svg>\n </span>\n </button>\n </div>\n )}\n </div>\n );\n }\n);\n\nMarkdownPreview.displayName = \"MarkdownPreview\";\n"],"names":["LazyCodeBlock","lazy","Prism","vscDarkPlus","language","value","jsx","MarkdownPreview","forwardRef","content","className","linkTarget","enableSyntaxHighlighting","noIndent","showMinimalPreview","acceptAdvanceContent","enableCollapsible","collapsedHeight","expandLabel","collapseLabel","animationDurationMs","ref","contentRef","useRef","isExpanded","setIsExpanded","useState","contentHeight","setContentHeight","isOverflowing","setIsOverflowing","useEffect","element","measureContent","measuredHeight","hasOverflow","resizeObserver","showToggle","animatedMaxHeight","jsxs","cn","ReactMarkdown","remarkGfm","remarkSplitRestartedLists","rehypeRaw","children","href","props","src","alt","match","isInline","Suspense","prev"],"mappings":"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"}
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import { jsxs as d, jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import h from "../../../_virtual/index.es.js";
|
|
3
|
-
import { forwardRef as
|
|
3
|
+
import { forwardRef as H, useRef as B, useState as g, useEffect as O, Suspense as j, lazy as $ } from "react";
|
|
4
4
|
import F from "react-markdown";
|
|
5
5
|
import G from "remark-gfm";
|
|
6
6
|
import P from "rehype-raw";
|
|
7
|
-
|
|
7
|
+
import { remarkSplitRestartedLists as W } from "./remarkSplitRestartedLists.es.js";
|
|
8
|
+
/* empty css */
|
|
9
|
+
const Z = $(async () => {
|
|
8
10
|
const [{ Prism: s }, { vscDarkPlus: c }] = await Promise.all([
|
|
9
11
|
import("react-syntax-highlighter"),
|
|
10
12
|
import("react-syntax-highlighter/dist/esm/styles/prism")
|
|
@@ -25,7 +27,7 @@ const W = $(async () => {
|
|
|
25
27
|
children: o
|
|
26
28
|
}
|
|
27
29
|
) };
|
|
28
|
-
}),
|
|
30
|
+
}), J = H(
|
|
29
31
|
({
|
|
30
32
|
content: s,
|
|
31
33
|
className: c,
|
|
@@ -35,20 +37,20 @@ const W = $(async () => {
|
|
|
35
37
|
showMinimalPreview: a = !1,
|
|
36
38
|
acceptAdvanceContent: t = !0,
|
|
37
39
|
enableCollapsible: k = !1,
|
|
38
|
-
collapsedHeight:
|
|
40
|
+
collapsedHeight: f = 180,
|
|
39
41
|
expandLabel: w = "Show more",
|
|
40
42
|
collapseLabel: N = "Show less",
|
|
41
43
|
animationDurationMs: v = 300
|
|
42
44
|
}, S) => {
|
|
43
|
-
const
|
|
45
|
+
const x = B(null), [u, y] = g(!1), [E, L] = g(0), [z, R] = g(!1);
|
|
44
46
|
O(() => {
|
|
45
|
-
if (!k || !
|
|
47
|
+
if (!k || !x.current)
|
|
46
48
|
return;
|
|
47
|
-
const l =
|
|
48
|
-
const
|
|
49
|
-
|
|
50
|
-
const m =
|
|
51
|
-
|
|
49
|
+
const l = x.current, r = () => {
|
|
50
|
+
const _ = l.scrollHeight;
|
|
51
|
+
L(_);
|
|
52
|
+
const m = _ > f;
|
|
53
|
+
R(m), m || y(!1);
|
|
52
54
|
};
|
|
53
55
|
r();
|
|
54
56
|
const i = new ResizeObserver(() => {
|
|
@@ -57,22 +59,22 @@ const W = $(async () => {
|
|
|
57
59
|
return i.observe(l), () => {
|
|
58
60
|
i.disconnect();
|
|
59
61
|
};
|
|
60
|
-
}, [s, k,
|
|
61
|
-
const
|
|
62
|
+
}, [s, k, f]);
|
|
63
|
+
const n = k && z, D = n ? u ? E : f : void 0;
|
|
62
64
|
return /* @__PURE__ */ d("div", { ref: S, className: "w-full", children: [
|
|
63
65
|
/* @__PURE__ */ d(
|
|
64
66
|
"div",
|
|
65
67
|
{
|
|
66
|
-
className: h(
|
|
67
|
-
style:
|
|
68
|
-
maxHeight: `${
|
|
68
|
+
className: h(n ? "relative overflow-hidden" : ""),
|
|
69
|
+
style: n ? {
|
|
70
|
+
maxHeight: `${D}px`,
|
|
69
71
|
transition: `max-height ${v}ms ease`
|
|
70
72
|
} : void 0,
|
|
71
73
|
children: [
|
|
72
74
|
/* @__PURE__ */ e(
|
|
73
75
|
"div",
|
|
74
76
|
{
|
|
75
|
-
ref:
|
|
77
|
+
ref: x,
|
|
76
78
|
className: h(
|
|
77
79
|
"markdown-preview prose prose-sm dark:prose-invert max-w-none",
|
|
78
80
|
"font-inter font-medium text-sm leading-5",
|
|
@@ -80,10 +82,17 @@ const W = $(async () => {
|
|
|
80
82
|
a ? "[&_h2]:text-sm [&_h2]:font-medium [&_h2]:my-0 [&_h2]:leading-5 [&_h2]:text-inherit" : "[&_h2]:text-xl [&_h2]:font-bold [&_h2]:my-1 [&_h2]:leading-7 [&_h2]:text-inherit",
|
|
81
83
|
a ? "[&_h3]:text-sm [&_h3]:font-medium [&_h3]:my-0 [&_h3]:leading-5 [&_h3]:text-inherit" : "[&_h3]:text-lg [&_h3]:font-semibold [&_h3]:my-1 [&_h3]:leading-6 [&_h3]:text-inherit",
|
|
82
84
|
"[&_h4]:text-inherit [&_h5]:text-inherit [&_h6]:text-inherit",
|
|
83
|
-
|
|
85
|
+
// Paragraphs share the list items' size/weight/leading — only the
|
|
86
|
+
// block spacing differs between minimal and default preview
|
|
87
|
+
a ? "[&_p]:my-0 [&_p]:text-sm [&_p]:font-medium [&_p]:leading-5" : "[&_p]:my-1 [&_p]:text-sm [&_p]:font-medium [&_p]:leading-5",
|
|
84
88
|
o ? "[&_ul]:list-disc [&_ul]:ml-0 [&_ul]:pl-6 [&_ul]:space-y-0 [&_ul]:my-0" : "[&_ul]:list-disc [&_ul]:ml-8 [&_ul]:space-y-0 [&_ul]:my-0",
|
|
85
89
|
o ? "[&_ol]:list-decimal [&_ol]:ml-0 [&_ol]:pl-6 [&_ol]:space-y-0 [&_ol]:my-0" : "[&_ol]:list-decimal [&_ol]:ml-8 [&_ol]:space-y-0 [&_ol]:my-0",
|
|
86
|
-
|
|
90
|
+
// Separate consecutive lists (a blank line in the source starts a new list)
|
|
91
|
+
"[&_ol+ol]:mt-2 [&_ul+ul]:mt-2 [&_ol+ul]:mt-2 [&_ul+ol]:mt-2",
|
|
92
|
+
"[&_li]:mt-0 [&_li]:mb-0 [&_li]:text-sm [&_li]:font-medium [&_li]:leading-5 [&_li::marker]:text-inherit",
|
|
93
|
+
// Loose lists (any blank line between items) wrap each item's content
|
|
94
|
+
// in a <p>; strip its margins so item spacing matches a tight list
|
|
95
|
+
"[&_li>p]:my-0 [&_li>p]:text-sm [&_li>p]:font-medium [&_li>p]:leading-5",
|
|
87
96
|
o ? "[&_li]:pl-0" : "",
|
|
88
97
|
"[&_li:has(input[type='checkbox'])]:list-none",
|
|
89
98
|
o ? "[&_li:has(input[type='checkbox'])]:pl-0 [&_li:has(input[type='checkbox'])]:-ml-4.5" : "[&_li:has(input[type='checkbox'])]:-ml-4.5",
|
|
@@ -106,7 +115,7 @@ const W = $(async () => {
|
|
|
106
115
|
children: /* @__PURE__ */ e(
|
|
107
116
|
F,
|
|
108
117
|
{
|
|
109
|
-
remarkPlugins: [G],
|
|
118
|
+
remarkPlugins: [G, W],
|
|
110
119
|
rehypePlugins: [P],
|
|
111
120
|
components: {
|
|
112
121
|
a({ children: l, href: r, ...i }) {
|
|
@@ -134,7 +143,7 @@ const W = $(async () => {
|
|
|
134
143
|
);
|
|
135
144
|
},
|
|
136
145
|
code({ className: l, children: r, ...i }) {
|
|
137
|
-
const
|
|
146
|
+
const _ = /language-(\w+)/.exec(l || ""), m = !l || !_, q = _ ? _[1] : "text";
|
|
138
147
|
return !m && !t ? /* @__PURE__ */ e(
|
|
139
148
|
"span",
|
|
140
149
|
{
|
|
@@ -162,7 +171,7 @@ const W = $(async () => {
|
|
|
162
171
|
}
|
|
163
172
|
),
|
|
164
173
|
children: /* @__PURE__ */ e(
|
|
165
|
-
|
|
174
|
+
Z,
|
|
166
175
|
{
|
|
167
176
|
language: q,
|
|
168
177
|
value: String(r).replace(/\n$/, "")
|
|
@@ -188,7 +197,7 @@ const W = $(async () => {
|
|
|
188
197
|
)
|
|
189
198
|
}
|
|
190
199
|
),
|
|
191
|
-
|
|
200
|
+
n && !u && /* @__PURE__ */ e(
|
|
192
201
|
"div",
|
|
193
202
|
{
|
|
194
203
|
"aria-hidden": "true",
|
|
@@ -198,11 +207,11 @@ const W = $(async () => {
|
|
|
198
207
|
]
|
|
199
208
|
}
|
|
200
209
|
),
|
|
201
|
-
|
|
210
|
+
n && /* @__PURE__ */ e("div", { className: "mt-2 flex justify-center items-center gap-2", children: /* @__PURE__ */ d(
|
|
202
211
|
"button",
|
|
203
212
|
{
|
|
204
213
|
type: "button",
|
|
205
|
-
onClick: () =>
|
|
214
|
+
onClick: () => y((l) => !l),
|
|
206
215
|
className: "inline-flex items-center gap-1 text-primary-600 dark:text-primary-400 font-medium text-sm",
|
|
207
216
|
children: [
|
|
208
217
|
u ? N : w,
|
|
@@ -238,8 +247,8 @@ const W = $(async () => {
|
|
|
238
247
|
] });
|
|
239
248
|
}
|
|
240
249
|
);
|
|
241
|
-
|
|
250
|
+
J.displayName = "MarkdownPreview";
|
|
242
251
|
export {
|
|
243
|
-
|
|
252
|
+
J as MarkdownPreview
|
|
244
253
|
};
|
|
245
254
|
//# sourceMappingURL=MarkdownPreview.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MarkdownPreview.es.js","sources":["../../../../src/components/forms/md-input/MarkdownPreview.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { forwardRef, lazy, Suspense, useEffect, useRef, useState } from \"react\";\nimport ReactMarkdown from \"react-markdown\";\nimport remarkGfm from \"remark-gfm\";\nimport rehypeRaw from \"rehype-raw\";\n\n// react-syntax-highlighter is an OPTIONAL peer dependency. Load it (and its\n// Prism theme) lazily via dynamic import so it is only fetched when a highlighted\n// code block is actually rendered. This keeps it out of every consumer's main\n// bundle, lets it tree-shake away entirely when MarkdownPreview is unused, and\n// means consumers that never render markdown code blocks don't need to install\n// it at all (a bare static import would force every consumer to provide it).\nconst LazyCodeBlock = lazy(async () => {\n const [{ Prism }, { vscDarkPlus }] = await Promise.all([\n import(\"react-syntax-highlighter\"),\n import(\"react-syntax-highlighter/dist/esm/styles/prism\"),\n ]);\n const CodeBlock = ({ language, value }: { language: string; value: string }) => (\n <Prism\n language={language}\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n style={vscDarkPlus as any}\n customStyle={{\n margin: 0,\n padding: \"1rem\",\n fontSize: \"0.875rem\",\n lineHeight: \"1.5\",\n background: \"transparent\",\n }}\n wrapLongLines\n >\n {value}\n </Prism>\n );\n return { default: CodeBlock };\n});\n\n/**\n * Props for the MarkdownPreview component\n */\nexport interface MarkdownPreviewProps {\n /** Markdown content to display */\n content: string;\n /** Additional CSS classes for the wrapper container */\n className?: string;\n /** Link target behavior: '_blank' for new tab, '_self' for current tab */\n linkTarget?: \"_blank\" | \"_self\";\n /** Whether to show syntax highlighting for code blocks */\n enableSyntaxHighlighting?: boolean;\n /** Whether to remove indentation from lists and align all content to the left */\n noIndent?: boolean;\n /** Whether to display all content with uniform font size/weight (paragraph-like) while keeping formatting */\n showMinimalPreview?: boolean;\n /** Whether to accept and render advanced content (code blocks, blockquotes, tables, images) */\n acceptAdvanceContent?: boolean;\n /** Whether to show an animated Show more/Show less toggle */\n enableCollapsible?: boolean;\n /** Collapsed preview height in pixels when collapsible mode is enabled */\n collapsedHeight?: number;\n /** Label for the expand action */\n expandLabel?: string;\n /** Label for the collapse action */\n collapseLabel?: string;\n /** Expand/collapse animation duration in milliseconds */\n animationDurationMs?: number;\n}\n\n/**\n * MarkdownPreview component displays rendered markdown content.\n *\n * **Supported Markdown Features:**\n * - Headings (H1-H6)\n * - Text formatting (bold, italic, underline, strikethrough)\n * - Lists (bullet and numbered)\n * - Code blocks with syntax highlighting\n * - Inline code\n * - Block quotes\n * - Links with configurable target\n * - Images (responsive)\n * - Tables\n * - Horizontal rules\n *\n * **Features:**\n * - GFM (GitHub Flavored Markdown) support\n * - HTML support via rehype-raw\n * - Syntax highlighting for code blocks\n * - Responsive images\n * - Dark mode support\n * - Configurable link behavior\n * - Optional no-indent mode for aligned content\n * - Minimal preview mode (uniform typography)\n * - Toggle advanced content (code blocks, blockquotes, tables, images)\n *\n * @example\n * ```tsx\n * <MarkdownPreview\n * content=\"# Hello World\\n\\nThis is **bold** text.\"\n * linkTarget=\"_blank\"\n * noIndent={false}\n * showMinimalPreview={false}\n * acceptAdvanceContent={true}\n * />\n * ```\n */\nexport const MarkdownPreview = forwardRef<HTMLDivElement, MarkdownPreviewProps>(\n (\n {\n content,\n className,\n linkTarget = \"_blank\",\n enableSyntaxHighlighting = true,\n noIndent = false,\n showMinimalPreview = false,\n acceptAdvanceContent = true,\n enableCollapsible = false,\n collapsedHeight = 180,\n expandLabel = \"Show more\",\n collapseLabel = \"Show less\",\n animationDurationMs = 300,\n },\n ref\n ) => {\n const contentRef = useRef<HTMLDivElement>(null);\n const [isExpanded, setIsExpanded] = useState(false);\n const [contentHeight, setContentHeight] = useState(0);\n const [isOverflowing, setIsOverflowing] = useState(false);\n\n useEffect(() => {\n if (!enableCollapsible || !contentRef.current) {\n return;\n }\n\n const element = contentRef.current;\n\n const measureContent = () => {\n const measuredHeight = element.scrollHeight;\n setContentHeight(measuredHeight);\n const hasOverflow = measuredHeight > collapsedHeight;\n setIsOverflowing(hasOverflow);\n if (!hasOverflow) {\n setIsExpanded(false);\n }\n };\n\n measureContent();\n\n const resizeObserver = new ResizeObserver(() => {\n measureContent();\n });\n\n resizeObserver.observe(element);\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [content, enableCollapsible, collapsedHeight]);\n\n const showToggle = enableCollapsible && isOverflowing;\n const animatedMaxHeight = showToggle\n ? isExpanded\n ? contentHeight\n : collapsedHeight\n : undefined;\n\n return (\n <div ref={ref} className=\"w-full\">\n <div\n className={cn(showToggle ? \"relative overflow-hidden\" : \"\")}\n style={\n showToggle\n ? {\n maxHeight: `${animatedMaxHeight}px`,\n transition: `max-height ${animationDurationMs}ms ease`,\n }\n : undefined\n }\n >\n <div\n ref={contentRef}\n className={cn(\n \"markdown-preview prose prose-sm dark:prose-invert max-w-none\",\n \"font-inter font-medium text-sm leading-5\",\n showMinimalPreview\n ? \"[&_h1]:text-sm [&_h1]:font-medium [&_h1]:my-0 [&_h1]:leading-5 [&_h1]:text-inherit\"\n : \"[&_h1]:text-2xl [&_h1]:font-bold [&_h1]:my-1 [&_h1]:leading-7 [&_h1]:text-inherit\",\n showMinimalPreview\n ? \"[&_h2]:text-sm [&_h2]:font-medium [&_h2]:my-0 [&_h2]:leading-5 [&_h2]:text-inherit\"\n : \"[&_h2]:text-xl [&_h2]:font-bold [&_h2]:my-1 [&_h2]:leading-7 [&_h2]:text-inherit\",\n showMinimalPreview\n ? \"[&_h3]:text-sm [&_h3]:font-medium [&_h3]:my-0 [&_h3]:leading-5 [&_h3]:text-inherit\"\n : \"[&_h3]:text-lg [&_h3]:font-semibold [&_h3]:my-1 [&_h3]:leading-6 [&_h3]:text-inherit\",\n \"[&_h4]:text-inherit [&_h5]:text-inherit [&_h6]:text-inherit\",\n showMinimalPreview\n ? \"[&_p]:my-0\"\n : \"[&_p]:my-1 [&_p]:text-sm [&_p]:font-medium [&_p]:leading-6\",\n showMinimalPreview\n ? noIndent\n ? \"[&_ul]:list-disc [&_ul]:ml-0 [&_ul]:pl-6 [&_ul]:space-y-0 [&_ul]:my-0\"\n : \"[&_ul]:list-disc [&_ul]:ml-8 [&_ul]:space-y-0 [&_ul]:my-0\"\n : noIndent\n ? \"[&_ul]:list-disc [&_ul]:ml-0 [&_ul]:pl-6 [&_ul]:space-y-0 [&_ul]:my-0\"\n : \"[&_ul]:list-disc [&_ul]:ml-8 [&_ul]:space-y-0 [&_ul]:my-0\",\n showMinimalPreview\n ? noIndent\n ? \"[&_ol]:list-decimal [&_ol]:ml-0 [&_ol]:pl-6 [&_ol]:space-y-0 [&_ol]:my-0\"\n : \"[&_ol]:list-decimal [&_ol]:ml-8 [&_ol]:space-y-0 [&_ol]:my-0\"\n : noIndent\n ? \"[&_ol]:list-decimal [&_ol]:ml-0 [&_ol]:pl-6 [&_ol]:space-y-0 [&_ol]:my-0\"\n : \"[&_ol]:list-decimal [&_ol]:ml-8 [&_ol]:space-y-0 [&_ol]:my-0\",\n \"[&_li]:mb-0 [&_li]:text-sm [&_li]:font-medium [&_li]:leading-5 [&_li::marker]:text-inherit\",\n noIndent ? \"[&_li]:pl-0\" : \"\",\n \"[&_li:has(input[type='checkbox'])]:list-none\",\n noIndent\n ? \"[&_li:has(input[type='checkbox'])]:pl-0 [&_li:has(input[type='checkbox'])]:-ml-4.5\"\n : \"[&_li:has(input[type='checkbox'])]:-ml-4.5\",\n \"[&_li>input[type='checkbox']]:mr-2 [&_li>input[type='checkbox']]:w-[11px] [&_li>input[type='checkbox']]:h-[11px]\",\n acceptAdvanceContent\n ? \"[&_blockquote]:border-l-4 [&_blockquote]:border-neutral-300 [&_blockquote]:dark:border-neutral-600\"\n : \"[&_blockquote]:border-0\",\n acceptAdvanceContent && showMinimalPreview\n ? noIndent\n ? \"[&_blockquote]:pl-4 [&_blockquote]:py-2 [&_blockquote]:italic [&_blockquote]:my-0 [&_blockquote]:leading-5 [&_blockquote]:ml-0 [&_blockquote]:text-sm [&_blockquote]:font-medium\"\n : \"[&_blockquote]:pl-4 [&_blockquote]:py-2 [&_blockquote]:italic [&_blockquote]:my-0 [&_blockquote]:leading-5 [&_blockquote]:ml-4 [&_blockquote]:text-sm [&_blockquote]:font-medium\"\n : acceptAdvanceContent\n ? noIndent\n ? \"[&_blockquote]:pl-4 [&_blockquote]:py-2 [&_blockquote]:italic [&_blockquote]:my-1 [&_blockquote]:leading-6 [&_blockquote]:ml-0\"\n : \"[&_blockquote]:pl-4 [&_blockquote]:py-2 [&_blockquote]:italic [&_blockquote]:my-1 [&_blockquote]:leading-6 [&_blockquote]:ml-4\"\n : \"[&_blockquote]:pl-0 [&_blockquote]:py-0 [&_blockquote]:not-italic [&_blockquote]:my-0\",\n \"[&_a]:text-primary-600 [&_a]:dark:text-primary-400 [&_a]:underline\",\n \"[&_strong]:font-semibold [&_em]:italic [&_u]:underline [&_del]:line-through\",\n acceptAdvanceContent\n ? \"[&_img]:max-w-full [&_img]:h-auto [&_img]:rounded-lg [&_img]:my-1\"\n : \"[&_img]:hidden\",\n acceptAdvanceContent\n ? \"[&_table]:w-full [&_table]:border-collapse [&_table]:my-1\"\n : \"[&_table]:block [&_table]:border-0 [&_table]:my-0\",\n acceptAdvanceContent\n ? \"[&_th]:border [&_th]:border-neutral-300 [&_th]:dark:border-neutral-600\"\n : \"[&_th]:border-0\",\n acceptAdvanceContent\n ? \"[&_th]:px-3 [&_th]:py-2 [&_th]:bg-neutral-50 [&_th]:dark:bg-neutral-800\"\n : \"[&_th]:px-0 [&_th]:py-0 [&_th]:bg-transparent\",\n acceptAdvanceContent\n ? \"[&_th]:font-semibold [&_th]:text-left\"\n : \"[&_th]:font-normal [&_th]:inline [&_th]:after:content-['_']\",\n acceptAdvanceContent\n ? \"[&_td]:border [&_td]:border-neutral-300 [&_td]:dark:border-neutral-600\"\n : \"[&_td]:border-0\",\n acceptAdvanceContent\n ? \"[&_td]:px-3 [&_td]:py-2\"\n : \"[&_td]:px-0 [&_td]:py-0 [&_td]:inline [&_td]:after:content-['_']\",\n acceptAdvanceContent\n ? \"[&_hr]:my-1 [&_hr]:border-neutral-300 [&_hr]:dark:border-neutral-600\"\n : \"[&_hr]:hidden\",\n \"text-[#101828] dark:text-neutral-100\",\n className\n )}\n >\n <ReactMarkdown\n remarkPlugins={[remarkGfm]}\n rehypePlugins={[rehypeRaw]}\n components={{\n a({ children, href, ...props }) {\n return (\n <a\n href={href}\n target={linkTarget}\n rel={\n linkTarget === \"_blank\"\n ? \"noopener noreferrer\"\n : undefined\n }\n {...props}\n >\n {children}\n </a>\n );\n },\n img({ src, alt, ...props }) {\n return (\n <img\n src={src}\n alt={alt}\n className=\"max-w-full h-auto rounded-lg my-3\"\n loading=\"lazy\"\n {...props}\n />\n );\n },\n code({ className, children, ...props }) {\n const match = /language-(\\w+)/.exec(className || \"\");\n const isInline = !className || !match;\n const language = match ? match[1] : \"text\";\n\n if (!isInline && !acceptAdvanceContent) {\n return (\n <span\n className=\"whitespace-pre-wrap text-sm font-medium leading-5\"\n style={{ fontFamily: \"inherit\", fontWeight: \"normal\" }}\n >\n {children}\n </span>\n );\n }\n\n if (\n !isInline &&\n enableSyntaxHighlighting &&\n acceptAdvanceContent\n ) {\n return (\n <div className=\"relative my-3 rounded-lg overflow-hidden\">\n <div className=\"flex items-center justify-between px-4 py-2 bg-[#2D2D2D] dark:bg-[#161B22] border-b border-[#3E3E3E] dark:border-[#21262D]\">\n <span className=\"text-xs font-mono text-neutral-400 dark:text-neutral-500 uppercase\">\n {language}\n </span>\n </div>\n <div className=\"bg-[#1E1E1E] dark:bg-[#0D1117]\">\n <Suspense\n fallback={\n <pre\n style={{\n margin: 0,\n padding: \"1rem\",\n fontSize: \"0.875rem\",\n lineHeight: \"1.5\",\n background: \"transparent\",\n whiteSpace: \"pre-wrap\",\n }}\n >\n {String(children).replace(/\\n$/, \"\")}\n </pre>\n }\n >\n <LazyCodeBlock\n language={language}\n value={String(children).replace(/\\n$/, \"\")}\n />\n </Suspense>\n </div>\n </div>\n );\n }\n\n return (\n <code\n className={cn(\n className,\n acceptAdvanceContent\n ? \"bg-neutral-100 dark:bg-neutral-800 px-1.5 py-0.5 rounded font-mono text-[#101828] dark:text-neutral-200\"\n : \"font-inherit text-sm leading-5 font-medium bg-transparent px-0 py-0\"\n )}\n {...props}\n >\n {children}\n </code>\n );\n },\n }}\n >\n {content || \"*No content to display*\"}\n </ReactMarkdown>\n </div>\n\n {showToggle && !isExpanded && (\n <div\n aria-hidden=\"true\"\n className=\"pointer-events-none absolute inset-x-0 bottom-0 h-14 bg-gradient-to-t from-white via-white/80 to-transparent dark:from-black-700 dark:via-black-700/80 dark:to-transparent\"\n />\n )}\n </div>\n\n {showToggle && (\n <div className=\"mt-2 flex justify-center items-center gap-2\">\n <button\n type=\"button\"\n onClick={() => setIsExpanded((prev) => !prev)}\n className=\"inline-flex items-center gap-1 text-primary-600 dark:text-primary-400 font-medium text-sm\"\n >\n {isExpanded ? collapseLabel : expandLabel}\n <span\n className={cn(\n \"inline-flex transition-transform duration-300\",\n !isExpanded ? \"rotate-180\" : \"rotate-0\"\n )}\n >\n <svg\n width=\"8\"\n height=\"5\"\n viewBox=\"0 0 8 5\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M1.14167 4.19465L3.72833 1.60798L6.315 4.19465C6.575 4.45465 6.995 4.45465 7.255 4.19465C7.515 3.93465 7.515 3.51465 7.255 3.25465L4.195 0.194649C3.935 -0.0653515 3.515 -0.0653515 3.255 0.194649L0.195 3.25465C-0.065 3.51465 -0.065 3.93465 0.195 4.19465C0.455 4.44798 0.881667 4.45465 1.14167 4.19465Z\"\n fill=\"currentColor\"\n />\n </svg>\n </span>\n </button>\n </div>\n )}\n </div>\n );\n }\n);\n\nMarkdownPreview.displayName = \"MarkdownPreview\";\n"],"names":["LazyCodeBlock","lazy","Prism","vscDarkPlus","language","value","jsx","MarkdownPreview","forwardRef","content","className","linkTarget","enableSyntaxHighlighting","noIndent","showMinimalPreview","acceptAdvanceContent","enableCollapsible","collapsedHeight","expandLabel","collapseLabel","animationDurationMs","ref","contentRef","useRef","isExpanded","setIsExpanded","useState","contentHeight","setContentHeight","isOverflowing","setIsOverflowing","useEffect","element","measureContent","measuredHeight","hasOverflow","resizeObserver","showToggle","animatedMaxHeight","jsxs","cn","ReactMarkdown","remarkGfm","rehypeRaw","children","href","props","src","alt","match","isInline","Suspense","prev"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MarkdownPreview.es.js","sources":["../../../../src/components/forms/md-input/MarkdownPreview.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { forwardRef, lazy, Suspense, useEffect, useRef, useState } from \"react\";\nimport ReactMarkdown from \"react-markdown\";\nimport remarkGfm from \"remark-gfm\";\nimport rehypeRaw from \"rehype-raw\";\nimport { remarkSplitRestartedLists } from \"./remarkSplitRestartedLists\";\nimport \"./styles.css\";\n\n// react-syntax-highlighter is an OPTIONAL peer dependency. Load it (and its\n// Prism theme) lazily via dynamic import so it is only fetched when a highlighted\n// code block is actually rendered. This keeps it out of every consumer's main\n// bundle, lets it tree-shake away entirely when MarkdownPreview is unused, and\n// means consumers that never render markdown code blocks don't need to install\n// it at all (a bare static import would force every consumer to provide it).\nconst LazyCodeBlock = lazy(async () => {\n const [{ Prism }, { vscDarkPlus }] = await Promise.all([\n import(\"react-syntax-highlighter\"),\n import(\"react-syntax-highlighter/dist/esm/styles/prism\"),\n ]);\n const CodeBlock = ({ language, value }: { language: string; value: string }) => (\n <Prism\n language={language}\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n style={vscDarkPlus as any}\n customStyle={{\n margin: 0,\n padding: \"1rem\",\n fontSize: \"0.875rem\",\n lineHeight: \"1.5\",\n background: \"transparent\",\n }}\n wrapLongLines\n >\n {value}\n </Prism>\n );\n return { default: CodeBlock };\n});\n\n/**\n * Props for the MarkdownPreview component\n */\nexport interface MarkdownPreviewProps {\n /** Markdown content to display */\n content: string;\n /** Additional CSS classes for the wrapper container */\n className?: string;\n /** Link target behavior: '_blank' for new tab, '_self' for current tab */\n linkTarget?: \"_blank\" | \"_self\";\n /** Whether to show syntax highlighting for code blocks */\n enableSyntaxHighlighting?: boolean;\n /** Whether to remove indentation from lists and align all content to the left */\n noIndent?: boolean;\n /** Whether to display all content with uniform font size/weight (paragraph-like) while keeping formatting */\n showMinimalPreview?: boolean;\n /** Whether to accept and render advanced content (code blocks, blockquotes, tables, images) */\n acceptAdvanceContent?: boolean;\n /** Whether to show an animated Show more/Show less toggle */\n enableCollapsible?: boolean;\n /** Collapsed preview height in pixels when collapsible mode is enabled */\n collapsedHeight?: number;\n /** Label for the expand action */\n expandLabel?: string;\n /** Label for the collapse action */\n collapseLabel?: string;\n /** Expand/collapse animation duration in milliseconds */\n animationDurationMs?: number;\n}\n\n/**\n * MarkdownPreview component displays rendered markdown content.\n *\n * **Supported Markdown Features:**\n * - Headings (H1-H6)\n * - Text formatting (bold, italic, underline, strikethrough)\n * - Lists (bullet and numbered)\n * - Code blocks with syntax highlighting\n * - Inline code\n * - Block quotes\n * - Links with configurable target\n * - Images (responsive)\n * - Tables\n * - Horizontal rules\n *\n * **Features:**\n * - GFM (GitHub Flavored Markdown) support\n * - HTML support via rehype-raw\n * - Syntax highlighting for code blocks\n * - Responsive images\n * - Dark mode support\n * - Configurable link behavior\n * - Optional no-indent mode for aligned content\n * - Minimal preview mode (uniform typography)\n * - Toggle advanced content (code blocks, blockquotes, tables, images)\n *\n * @example\n * ```tsx\n * <MarkdownPreview\n * content=\"# Hello World\\n\\nThis is **bold** text.\"\n * linkTarget=\"_blank\"\n * noIndent={false}\n * showMinimalPreview={false}\n * acceptAdvanceContent={true}\n * />\n * ```\n */\nexport const MarkdownPreview = forwardRef<HTMLDivElement, MarkdownPreviewProps>(\n (\n {\n content,\n className,\n linkTarget = \"_blank\",\n enableSyntaxHighlighting = true,\n noIndent = false,\n showMinimalPreview = false,\n acceptAdvanceContent = true,\n enableCollapsible = false,\n collapsedHeight = 180,\n expandLabel = \"Show more\",\n collapseLabel = \"Show less\",\n animationDurationMs = 300,\n },\n ref\n ) => {\n const contentRef = useRef<HTMLDivElement>(null);\n const [isExpanded, setIsExpanded] = useState(false);\n const [contentHeight, setContentHeight] = useState(0);\n const [isOverflowing, setIsOverflowing] = useState(false);\n\n useEffect(() => {\n if (!enableCollapsible || !contentRef.current) {\n return;\n }\n\n const element = contentRef.current;\n\n const measureContent = () => {\n const measuredHeight = element.scrollHeight;\n setContentHeight(measuredHeight);\n const hasOverflow = measuredHeight > collapsedHeight;\n setIsOverflowing(hasOverflow);\n if (!hasOverflow) {\n setIsExpanded(false);\n }\n };\n\n measureContent();\n\n const resizeObserver = new ResizeObserver(() => {\n measureContent();\n });\n\n resizeObserver.observe(element);\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [content, enableCollapsible, collapsedHeight]);\n\n const showToggle = enableCollapsible && isOverflowing;\n const animatedMaxHeight = showToggle\n ? isExpanded\n ? contentHeight\n : collapsedHeight\n : undefined;\n\n return (\n <div ref={ref} className=\"w-full\">\n <div\n className={cn(showToggle ? \"relative overflow-hidden\" : \"\")}\n style={\n showToggle\n ? {\n maxHeight: `${animatedMaxHeight}px`,\n transition: `max-height ${animationDurationMs}ms ease`,\n }\n : undefined\n }\n >\n <div\n ref={contentRef}\n className={cn(\n \"markdown-preview prose prose-sm dark:prose-invert max-w-none\",\n \"font-inter font-medium text-sm leading-5\",\n showMinimalPreview\n ? \"[&_h1]:text-sm [&_h1]:font-medium [&_h1]:my-0 [&_h1]:leading-5 [&_h1]:text-inherit\"\n : \"[&_h1]:text-2xl [&_h1]:font-bold [&_h1]:my-1 [&_h1]:leading-7 [&_h1]:text-inherit\",\n showMinimalPreview\n ? \"[&_h2]:text-sm [&_h2]:font-medium [&_h2]:my-0 [&_h2]:leading-5 [&_h2]:text-inherit\"\n : \"[&_h2]:text-xl [&_h2]:font-bold [&_h2]:my-1 [&_h2]:leading-7 [&_h2]:text-inherit\",\n showMinimalPreview\n ? \"[&_h3]:text-sm [&_h3]:font-medium [&_h3]:my-0 [&_h3]:leading-5 [&_h3]:text-inherit\"\n : \"[&_h3]:text-lg [&_h3]:font-semibold [&_h3]:my-1 [&_h3]:leading-6 [&_h3]:text-inherit\",\n \"[&_h4]:text-inherit [&_h5]:text-inherit [&_h6]:text-inherit\",\n // Paragraphs share the list items' size/weight/leading — only the\n // block spacing differs between minimal and default preview\n showMinimalPreview\n ? \"[&_p]:my-0 [&_p]:text-sm [&_p]:font-medium [&_p]:leading-5\"\n : \"[&_p]:my-1 [&_p]:text-sm [&_p]:font-medium [&_p]:leading-5\",\n showMinimalPreview\n ? noIndent\n ? \"[&_ul]:list-disc [&_ul]:ml-0 [&_ul]:pl-6 [&_ul]:space-y-0 [&_ul]:my-0\"\n : \"[&_ul]:list-disc [&_ul]:ml-8 [&_ul]:space-y-0 [&_ul]:my-0\"\n : noIndent\n ? \"[&_ul]:list-disc [&_ul]:ml-0 [&_ul]:pl-6 [&_ul]:space-y-0 [&_ul]:my-0\"\n : \"[&_ul]:list-disc [&_ul]:ml-8 [&_ul]:space-y-0 [&_ul]:my-0\",\n showMinimalPreview\n ? noIndent\n ? \"[&_ol]:list-decimal [&_ol]:ml-0 [&_ol]:pl-6 [&_ol]:space-y-0 [&_ol]:my-0\"\n : \"[&_ol]:list-decimal [&_ol]:ml-8 [&_ol]:space-y-0 [&_ol]:my-0\"\n : noIndent\n ? \"[&_ol]:list-decimal [&_ol]:ml-0 [&_ol]:pl-6 [&_ol]:space-y-0 [&_ol]:my-0\"\n : \"[&_ol]:list-decimal [&_ol]:ml-8 [&_ol]:space-y-0 [&_ol]:my-0\",\n // Separate consecutive lists (a blank line in the source starts a new list)\n \"[&_ol+ol]:mt-2 [&_ul+ul]:mt-2 [&_ol+ul]:mt-2 [&_ul+ol]:mt-2\",\n \"[&_li]:mt-0 [&_li]:mb-0 [&_li]:text-sm [&_li]:font-medium [&_li]:leading-5 [&_li::marker]:text-inherit\",\n // Loose lists (any blank line between items) wrap each item's content\n // in a <p>; strip its margins so item spacing matches a tight list\n \"[&_li>p]:my-0 [&_li>p]:text-sm [&_li>p]:font-medium [&_li>p]:leading-5\",\n noIndent ? \"[&_li]:pl-0\" : \"\",\n \"[&_li:has(input[type='checkbox'])]:list-none\",\n noIndent\n ? \"[&_li:has(input[type='checkbox'])]:pl-0 [&_li:has(input[type='checkbox'])]:-ml-4.5\"\n : \"[&_li:has(input[type='checkbox'])]:-ml-4.5\",\n \"[&_li>input[type='checkbox']]:mr-2 [&_li>input[type='checkbox']]:w-[11px] [&_li>input[type='checkbox']]:h-[11px]\",\n acceptAdvanceContent\n ? \"[&_blockquote]:border-l-4 [&_blockquote]:border-neutral-300 [&_blockquote]:dark:border-neutral-600\"\n : \"[&_blockquote]:border-0\",\n acceptAdvanceContent && showMinimalPreview\n ? noIndent\n ? \"[&_blockquote]:pl-4 [&_blockquote]:py-2 [&_blockquote]:italic [&_blockquote]:my-0 [&_blockquote]:leading-5 [&_blockquote]:ml-0 [&_blockquote]:text-sm [&_blockquote]:font-medium\"\n : \"[&_blockquote]:pl-4 [&_blockquote]:py-2 [&_blockquote]:italic [&_blockquote]:my-0 [&_blockquote]:leading-5 [&_blockquote]:ml-4 [&_blockquote]:text-sm [&_blockquote]:font-medium\"\n : acceptAdvanceContent\n ? noIndent\n ? \"[&_blockquote]:pl-4 [&_blockquote]:py-2 [&_blockquote]:italic [&_blockquote]:my-1 [&_blockquote]:leading-6 [&_blockquote]:ml-0\"\n : \"[&_blockquote]:pl-4 [&_blockquote]:py-2 [&_blockquote]:italic [&_blockquote]:my-1 [&_blockquote]:leading-6 [&_blockquote]:ml-4\"\n : \"[&_blockquote]:pl-0 [&_blockquote]:py-0 [&_blockquote]:not-italic [&_blockquote]:my-0\",\n \"[&_a]:text-primary-600 [&_a]:dark:text-primary-400 [&_a]:underline\",\n \"[&_strong]:font-semibold [&_em]:italic [&_u]:underline [&_del]:line-through\",\n acceptAdvanceContent\n ? \"[&_img]:max-w-full [&_img]:h-auto [&_img]:rounded-lg [&_img]:my-1\"\n : \"[&_img]:hidden\",\n acceptAdvanceContent\n ? \"[&_table]:w-full [&_table]:border-collapse [&_table]:my-1\"\n : \"[&_table]:block [&_table]:border-0 [&_table]:my-0\",\n acceptAdvanceContent\n ? \"[&_th]:border [&_th]:border-neutral-300 [&_th]:dark:border-neutral-600\"\n : \"[&_th]:border-0\",\n acceptAdvanceContent\n ? \"[&_th]:px-3 [&_th]:py-2 [&_th]:bg-neutral-50 [&_th]:dark:bg-neutral-800\"\n : \"[&_th]:px-0 [&_th]:py-0 [&_th]:bg-transparent\",\n acceptAdvanceContent\n ? \"[&_th]:font-semibold [&_th]:text-left\"\n : \"[&_th]:font-normal [&_th]:inline [&_th]:after:content-['_']\",\n acceptAdvanceContent\n ? \"[&_td]:border [&_td]:border-neutral-300 [&_td]:dark:border-neutral-600\"\n : \"[&_td]:border-0\",\n acceptAdvanceContent\n ? \"[&_td]:px-3 [&_td]:py-2\"\n : \"[&_td]:px-0 [&_td]:py-0 [&_td]:inline [&_td]:after:content-['_']\",\n acceptAdvanceContent\n ? \"[&_hr]:my-1 [&_hr]:border-neutral-300 [&_hr]:dark:border-neutral-600\"\n : \"[&_hr]:hidden\",\n \"text-[#101828] dark:text-neutral-100\",\n className\n )}\n >\n <ReactMarkdown\n remarkPlugins={[remarkGfm, remarkSplitRestartedLists]}\n rehypePlugins={[rehypeRaw]}\n components={{\n a({ children, href, ...props }) {\n return (\n <a\n href={href}\n target={linkTarget}\n rel={\n linkTarget === \"_blank\"\n ? \"noopener noreferrer\"\n : undefined\n }\n {...props}\n >\n {children}\n </a>\n );\n },\n img({ src, alt, ...props }) {\n return (\n <img\n src={src}\n alt={alt}\n className=\"max-w-full h-auto rounded-lg my-3\"\n loading=\"lazy\"\n {...props}\n />\n );\n },\n code({ className, children, ...props }) {\n const match = /language-(\\w+)/.exec(className || \"\");\n const isInline = !className || !match;\n const language = match ? match[1] : \"text\";\n\n if (!isInline && !acceptAdvanceContent) {\n return (\n <span\n className=\"whitespace-pre-wrap text-sm font-medium leading-5\"\n style={{ fontFamily: \"inherit\", fontWeight: \"normal\" }}\n >\n {children}\n </span>\n );\n }\n\n if (\n !isInline &&\n enableSyntaxHighlighting &&\n acceptAdvanceContent\n ) {\n return (\n <div className=\"relative my-3 rounded-lg overflow-hidden\">\n <div className=\"flex items-center justify-between px-4 py-2 bg-[#2D2D2D] dark:bg-[#161B22] border-b border-[#3E3E3E] dark:border-[#21262D]\">\n <span className=\"text-xs font-mono text-neutral-400 dark:text-neutral-500 uppercase\">\n {language}\n </span>\n </div>\n <div className=\"bg-[#1E1E1E] dark:bg-[#0D1117]\">\n <Suspense\n fallback={\n <pre\n style={{\n margin: 0,\n padding: \"1rem\",\n fontSize: \"0.875rem\",\n lineHeight: \"1.5\",\n background: \"transparent\",\n whiteSpace: \"pre-wrap\",\n }}\n >\n {String(children).replace(/\\n$/, \"\")}\n </pre>\n }\n >\n <LazyCodeBlock\n language={language}\n value={String(children).replace(/\\n$/, \"\")}\n />\n </Suspense>\n </div>\n </div>\n );\n }\n\n return (\n <code\n className={cn(\n className,\n acceptAdvanceContent\n ? \"bg-neutral-100 dark:bg-neutral-800 px-1.5 py-0.5 rounded font-mono text-[#101828] dark:text-neutral-200\"\n : \"font-inherit text-sm leading-5 font-medium bg-transparent px-0 py-0\"\n )}\n {...props}\n >\n {children}\n </code>\n );\n },\n }}\n >\n {content || \"*No content to display*\"}\n </ReactMarkdown>\n </div>\n\n {showToggle && !isExpanded && (\n <div\n aria-hidden=\"true\"\n className=\"pointer-events-none absolute inset-x-0 bottom-0 h-14 bg-gradient-to-t from-white via-white/80 to-transparent dark:from-black-700 dark:via-black-700/80 dark:to-transparent\"\n />\n )}\n </div>\n\n {showToggle && (\n <div className=\"mt-2 flex justify-center items-center gap-2\">\n <button\n type=\"button\"\n onClick={() => setIsExpanded((prev) => !prev)}\n className=\"inline-flex items-center gap-1 text-primary-600 dark:text-primary-400 font-medium text-sm\"\n >\n {isExpanded ? collapseLabel : expandLabel}\n <span\n className={cn(\n \"inline-flex transition-transform duration-300\",\n !isExpanded ? \"rotate-180\" : \"rotate-0\"\n )}\n >\n <svg\n width=\"8\"\n height=\"5\"\n viewBox=\"0 0 8 5\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M1.14167 4.19465L3.72833 1.60798L6.315 4.19465C6.575 4.45465 6.995 4.45465 7.255 4.19465C7.515 3.93465 7.515 3.51465 7.255 3.25465L4.195 0.194649C3.935 -0.0653515 3.515 -0.0653515 3.255 0.194649L0.195 3.25465C-0.065 3.51465 -0.065 3.93465 0.195 4.19465C0.455 4.44798 0.881667 4.45465 1.14167 4.19465Z\"\n fill=\"currentColor\"\n />\n </svg>\n </span>\n </button>\n </div>\n )}\n </div>\n );\n }\n);\n\nMarkdownPreview.displayName = \"MarkdownPreview\";\n"],"names":["LazyCodeBlock","lazy","Prism","vscDarkPlus","language","value","jsx","MarkdownPreview","forwardRef","content","className","linkTarget","enableSyntaxHighlighting","noIndent","showMinimalPreview","acceptAdvanceContent","enableCollapsible","collapsedHeight","expandLabel","collapseLabel","animationDurationMs","ref","contentRef","useRef","isExpanded","setIsExpanded","useState","contentHeight","setContentHeight","isOverflowing","setIsOverflowing","useEffect","element","measureContent","measuredHeight","hasOverflow","resizeObserver","showToggle","animatedMaxHeight","jsxs","cn","ReactMarkdown","remarkGfm","remarkSplitRestartedLists","rehypeRaw","children","href","props","src","alt","match","isInline","Suspense","prev"],"mappings":"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"}
|
|
@@ -1,4 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),y=require("../../../_virtual/index.cjs.js"),F=require("react"),m=require("@mui/icons-material"),oe=require("../../data-display/modal/Modal.cjs.js"),f=require("../../button/Button.cjs.js"),xe=require("../../navigation/tabs/Tabs.cjs.js"),K=require("./MarkdownPreview.cjs.js"),H=require("../../tooltip/Tooltip.cjs.js"),U=require("framer-motion"),V=require("../../data-display/typography/Typography.cjs.js"),me=require("../shared/InputLabel.cjs.js"),ue=["edit","preview"],he=({className:g,size:n=16})=>e.jsxs("svg",{width:n,height:n,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:g,children:[e.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),e.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]}),W=F.forwardRef(({id:g,value:n="",defaultValue:D,onChange:w,placeholder:G="Enter markdown content...",minRows:J=4,maxRows:Q=20,isDisabled:i=!1,className:X,textareaClassName:Y,previewClassName:M,label:C,labelClassName:Z,isRequiredConditional:ee,required:R=!1,showPreviewOnModal:te=!1,maxLength:p,linkTarget:T="_blank",errorMessage:S,tooltip:E,originalCase:I,suffixIcon:b,isClearable:_,inputref:z,showFormattingHelp:se=!0,onKeyDown:ne,noIndent:$=!1,showMinimalPreview:L=!1,acceptAdvanceContent:N=!0},u)=>{const[c,ae]=F.useState("edit"),[re,P]=F.useState(!1),k=F.useRef(null),a=g||`rich-md-input-${Math.random().toString(36).slice(2,11)}`,le=n.length,d=(t,r="",j="")=>{const o=u?.current||k.current;if(!o)return;const l=o.selectionStart,x=o.selectionEnd,h=n.substring(l,x),v=h||j,q=n.substring(0,l)+t+v+r+n.substring(x);w(q),setTimeout(()=>{const s=l+t.length+(h?h.length:0);o.focus(),o.setSelectionRange(s,s+(h?0:j.length))},0)},B=t=>{const r=u?.current||k.current;if(!r)return;const j=r.selectionStart,o=r.selectionEnd,l=n.split(`
|
|
2
|
-
`);let x=0,h=0,v=0;for(let s=0;s<l.length;s++){if(x<=j&&j<=x+l[s].length+1&&(h=s),x<=o&&o<=x+l[s].length+1){v=s;break}x+=l[s].length+1}const q=l.map((s,A)=>A>=h&&A<=v?s.trim()===""?s:t==="- "&&s.trim().startsWith("- ")?s.replace(/^\s*-\s+/,""):t.match(/^\d+\.\s/)&&s.trim().match(/^\d+\.\s/)?s.replace(/^\s*\d+\.\s+/,""):t+s.trim():s);w(q.join(`
|
|
3
|
-
`)),setTimeout(()=>{r.focus()},0)},ie=t=>{if(ne?.(t),t.metaKey||t.ctrlKey)switch(t.key.toLowerCase()){case"b":t.preventDefault(),d("**","**","bold text");break;case"i":t.preventDefault(),d("*","*","italic text");break;case"u":t.preventDefault(),d("<u>","</u>","underlined text");break;case"k":t.preventDefault(),d("[","](url)","link text");break;case"e":t.preventDefault(),d("```","```","code");break}},ce=()=>{w(""),(u?.current||k.current)?.focus()},de=(()=>{const t=(n.match(/\n/g)||[]).length+1;return Math.min(Q,Math.max(J,t))})(),O=e.jsxs("div",{className:y("flex flex-col",X),children:[e.jsxs("div",{className:`flex flex-row items-center ${C?"justify-between":"justify-end"} w-full`,children:[C&&e.jsx("label",{id:a,htmlFor:a,className:`mb-1 text-xs font-medium text-gray-600 inline-flex items-center gap-1 ${I?"":"capitalize"} ${Z||"!uppercse"}`,children:e.jsx("div",{className:"flex flex-wrap items-center justify-between w-full",children:e.jsx("div",{className:"inline-flex flex-wrap items-center gap-1",children:e.jsx(me.InputLabel,{label:C||"",required:R||!1,isRequiredConditional:ee||!1})})})}),se&&e.jsx(H,{placement:"bottom-end",title:e.jsxs("div",{className:"flex flex-col items-start justify-center py-2 px-3 min-w-[220px] gap-2 bg-neutral-900 rounded-lg",children:[e.jsxs("div",{className:"flex flex-col items-start justify-start gap-1 w-full",children:[e.jsxs("div",{className:"flex flex-row items-start gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("div",{className:"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm",children:e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter",children:"**bold**"})}),e.jsxs("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:["→ ",e.jsx("strong",{children:"bold"})," text"]})]}),e.jsxs("div",{className:"flex flex-row items-start gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("div",{className:"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm",children:e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter",children:"*italic*"})}),e.jsxs("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:["→ ",e.jsx("em",{children:"italic"})," text"]})]}),e.jsxs("div",{className:"flex flex-row items-start gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("div",{className:"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm",children:e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter",children:"`code`"})}),e.jsxs("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:["→ ",e.jsx("code",{children:"inline code"})]})]}),e.jsxs("div",{className:"flex flex-row items-start gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("div",{className:"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm",children:e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter",children:"<u>text</u>"})}),e.jsxs("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:["→ ",e.jsx("u",{children:"underline"})]})]}),e.jsxs("div",{className:"flex flex-row items-start gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("div",{className:"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm",children:e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter",children:"~~strike~~"})}),e.jsxs("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:["→ ",e.jsx("del",{children:"strike"})]})]}),e.jsxs("div",{className:"flex flex-row items-start gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("div",{className:"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm",children:e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter",children:"- item"})}),e.jsx("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:"→ bullet list"})]}),e.jsxs("div",{className:"flex flex-row items-start gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("div",{className:"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm",children:e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter",children:"1. item"})}),e.jsx("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:"→ numbered list"})]}),N&&e.jsxs("div",{className:"flex flex-row items-start gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("div",{className:"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm",children:e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter",children:"## heading"})}),e.jsx("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:"→ heading 2"})]}),e.jsxs("div",{className:"flex flex-row items-start gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("div",{className:"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm",children:e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter",children:"[link](url)"})}),e.jsx("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:"→ hyperlink"})]})]}),N&&e.jsx(e.Fragment,{children:e.jsxs("div",{className:"flex flex-col items-start justify-start gap-1 w-full",children:[e.jsxs("div",{className:"flex flex-row items-start gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("div",{className:"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm",children:e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter",children:"> quote"})}),e.jsx("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:"→ blockquote"})]}),e.jsxs("div",{className:"flex flex-col items-start justify-start gap-0.5 w-full mt-0.5",children:[e.jsxs("div",{className:"flex flex-row items-center gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:"Table:"})]}),e.jsxs("div",{className:"flex flex-col px-1 py-0.5 bg-neutral-700 ml-2 rounded-sm gap-0",children:[e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter whitespace-nowrap",children:"| Header 1 | Header 2 | Header 3 |"}),e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter whitespace-nowrap",children:"| :--- | :---: | ---: |"}),e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter whitespace-nowrap",children:"| Left | Center | Right |"})]})]})]})})]}),children:e.jsx(V.Typography,{className:"mb-2 text-xs font-medium text-primary-700 inline-flex items-center gap-1 cursor-pointer",children:"Formatting help ?"})})]}),e.jsxs("div",{className:y("flex flex-col border shadow-[0px_1px_2px_rgba(0,0,0,0.05)] rounded-lg bg-white dark:bg-black-700 w-full",S?"border-red-300 focus-within:border-red-500 focus-within:shadow-[0_0_0_1.5px_var(--color-red-200)]":"border-[#EAECF0] dark:border-black-600 focus-within:border-primary-600 dark:focus-within:border-primary-400 focus-within:shadow-[0_0_0_1.5px_var(--color-primary-100)] dark:focus-within:shadow-[0_0_0_1.5px_var(--color-primary-950)]"),children:[e.jsxs("div",{className:y("flex flex-row justify-between items-center px-3 py-2 gap-2 h-11 rounded-t-lg bg-[#F9FAFB] dark:bg-black-600 border-b border-[#EAECF0] dark:border-black-600"),children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(f,{id:`${a}-bold`,type:"button",onClick:()=>d("**","**","bold text"),disabled:i||c==="preview",className:"!p-0.5 !min-w-0 !h-auto !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200",appearance:"ghost",status:"no-background",title:"Bold (Ctrl+B)",children:e.jsx(m.FormatBold,{sx:{fontSize:20,color:"#667085"},className:"dark:text-neutral-400"})}),e.jsx(f,{id:`${a}-italic`,type:"button",onClick:()=>d("*","*","italic text"),disabled:i||c==="preview",className:"!p-0.5 !min-w-0 !h-auto !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200",appearance:"ghost",status:"no-background",title:"Italic (Ctrl+I)",children:e.jsx(m.FormatItalic,{sx:{fontSize:20,color:"#667085"},className:"dark:text-neutral-400"})}),e.jsx(f,{id:`${a}-underline`,type:"button",onClick:()=>d("<u>","</u>","underlined text"),disabled:i||c==="preview",className:"!p-0.5 !min-w-0 !h-auto !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200",appearance:"ghost",status:"no-background",title:"Underline (Ctrl+U)",children:e.jsx(m.FormatUnderlined,{sx:{fontSize:20,color:"#667085"},className:"dark:text-neutral-400"})}),e.jsx("div",{className:"w-px h-5 bg-[#EAECF0] dark:bg-black-500 rounded-full"}),e.jsx(f,{id:`${a}-numbered-list`,type:"button",onClick:()=>B("1. "),disabled:i||c==="preview",className:"!p-0.5 !min-w-0 !h-auto !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200",appearance:"ghost",status:"no-background",title:"Numbered List",children:e.jsx(m.FormatListNumbered,{sx:{fontSize:20,color:"#667085"},className:"dark:text-neutral-400"})}),e.jsx(f,{id:`${a}-bullet-list`,type:"button",onClick:()=>B("- "),disabled:i||c==="preview",className:"!p-0.5 !min-w-0 !h-auto !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200",appearance:"ghost",status:"no-background",title:"Bullet List",children:e.jsx(m.FormatListBulleted,{sx:{fontSize:20,color:"#667085"},className:"dark:text-neutral-400"})})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[p&&e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsxs("span",{className:"text-sm font-medium text-[#475467] dark:text-neutral-400",children:[le,"/",p]}),e.jsx("div",{className:"w-px h-6 bg-[#EAECF0] dark:bg-black-500 rounded-full"})]}),te?e.jsx(f,{id:`${a}-expand`,type:"button",onClick:()=>P(!0),disabled:i,className:"!p-0.5 !min-w-0 !h-auto ml-1 !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200",appearance:"ghost",status:"no-background",title:"Expand Preview",children:e.jsx(m.OpenInFull,{sx:{fontSize:16,color:"#667085"},className:"dark:text-neutral-400"})}):e.jsx(xe.Tabs,{variant:"switch",tabs:ue,activeTab:c,onTabClick:t=>ae(t),height:"h-5",iconsOnly:!0,tabIcons:{edit:e.jsx(m.Edit,{sx:{fontSize:16,color:"#667085"},className:"dark:text-neutral-400"}),preview:e.jsx(m.VisibilityOutlined,{sx:{fontSize:16,color:"#667085"},className:"dark:text-neutral-400"})},className:"rounded-lg"})]})]}),e.jsx("div",{className:"px-3 py-2 relative",children:c==="edit"?e.jsxs(e.Fragment,{children:[e.jsx("textarea",{ref:t=>{typeof u=="function"?u(t):u&&(u.current=t),k.current=t,z&&(z.current=t)},id:a,value:n,defaultValue:D,onChange:t=>{const r=t.target.value;(!p||r.length<=p)&&w(r)},onKeyDown:ie,placeholder:G,rows:de,disabled:i,required:R,maxLength:p,className:y("w-full bg-transparent !focus:ring-0 !focus:border-none","font-inter font-medium text-sm leading-5","text-[#101828] dark:text-neutral-100","placeholder:text-neutral-400 dark:placeholder:text-neutral-500","focus:outline-none resize-none","scrollbar-none","[&::-webkit-scrollbar]:hidden","[-ms-overflow-style:none]","[scrollbar-width:none]",{"text-neutral-400 dark:text-neutral-500 cursor-not-allowed":i},{"pr-20":_||b},Y)}),(_||b)&&c==="edit"&&e.jsxs("div",{className:"absolute right-1 top-2 flex items-center gap-1",children:[_&&n&&e.jsx("button",{id:`btn-input-field-clear-${g}`,className:"absolute inset-y-0 flex items-center cursor-pointer top-2 right-1 focus:outline-none",onClick:ce,type:"button",children:e.jsx(he,{className:"text-neutral-300 dark:text-black-500 hover:text-neutral-400 dark:hover:text-black-400 transition-colors",size:16})}),b&&e.jsx("div",{className:"flex items-center",children:b})]})]}):e.jsx("div",{className:"w-full min-h-[92px] max-h-[400px] overflow-y-auto",children:e.jsx(K.MarkdownPreview,{content:n,linkTarget:T,className:M,noIndent:$,showMinimalPreview:L,acceptAdvanceContent:N})})})]}),e.jsx(oe.Modal,{open:re,onCancel:()=>P(!1),title:"Markdown Preview",width:900,footer:null,children:e.jsx("div",{className:"max-h-[calc(100vh-200px)] overflow-y-auto p-4",children:e.jsx(K.MarkdownPreview,{content:n,linkTarget:T,className:M,noIndent:$,showMinimalPreview:L,acceptAdvanceContent:N})})}),e.jsx(U.AnimatePresence,{children:S&&e.jsx(U.motion.div,{initial:{opacity:0,y:-10},animate:{opacity:1,y:0},exit:{opacity:0,y:-10},transition:{duration:.2},children:e.jsx(V.Typography,{className:"mt-1 text-error-500",appearance:"custom",size:"extra-small",variant:"medium",children:S})})})]});return E?e.jsx(H,{title:E,children:O}):O});W.displayName="RichMarkdownInput";exports.RichMarkdownInput=W;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("../../../_virtual/index.cjs.js"),N=require("react"),d=require("@mui/icons-material"),xe=require("../../data-display/modal/Modal.cjs.js"),u=require("../../button/Button.cjs.js"),ue=require("../../navigation/tabs/Tabs.cjs.js"),K=require("./MarkdownPreview.cjs.js"),O=require("./listEditing.cjs.js"),L=require("../../tooltip/Tooltip.cjs.js"),A=require("framer-motion"),H=require("../../data-display/typography/Typography.cjs.js"),me=require("../shared/InputLabel.cjs.js"),fe=["edit","preview"],he=({className:p,size:n=16})=>e.jsxs("svg",{width:n,height:n,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:p,children:[e.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),e.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]}),U=N.forwardRef(({id:p,value:n="",defaultValue:V,onChange:m,placeholder:D="Enter markdown content...",minRows:W=4,maxRows:G=20,isDisabled:l=!1,className:J,textareaClassName:Q,previewClassName:E,label:v,labelClassName:X,isRequiredConditional:Y,required:F=!1,showPreviewOnModal:Z=!1,maxLength:a,linkTarget:q="_blank",errorMessage:k,tooltip:R,originalCase:_,suffixIcon:j,isClearable:y,inputref:C,showFormattingHelp:ee=!0,onKeyDown:te,noIndent:T=!1,showMinimalPreview:M=!1,acceptAdvanceContent:g=!0},i)=>{const[c,se]=N.useState("edit"),[ne,I]=N.useState(!1),f=N.useRef(null),r=p||`rich-md-input-${Math.random().toString(36).slice(2,11)}`,ae=n.length,o=(t,s="",x="")=>{const h=i?.current||f.current;if(!h)return;const S=h.selectionStart,P=h.selectionEnd,w=n.substring(S,P),oe=w||x,de=n.substring(0,S)+t+oe+s+n.substring(P);m(de),setTimeout(()=>{const B=S+t.length+(w?w.length:0);h.focus(),h.setSelectionRange(B,B+(w?0:x.length))},0)},z=t=>{const s=i?.current||f.current;if(!s)return;const x=O.toggleList(n,s.selectionStart,s.selectionEnd,t);a&&x.value.length>a||(m(x.value),setTimeout(()=>{s.focus(),s.setSelectionRange(x.caret,x.caret)},0))},re=()=>{const t=i?.current||f.current;if(!t)return!1;const s=O.continueList(n,t.selectionStart,t.selectionEnd);return!s||a&&s.value.length>a?!1:(m(s.value),setTimeout(()=>{t.focus(),t.setSelectionRange(s.caret,s.caret)},0),!0)},le=t=>{if(te?.(t),t.key==="Enter"&&!t.shiftKey&&!t.altKey&&!t.metaKey&&!t.ctrlKey&&!t.defaultPrevented){re()&&t.preventDefault();return}if(t.metaKey||t.ctrlKey)switch(t.key.toLowerCase()){case"b":t.preventDefault(),o("**","**","bold text");break;case"i":t.preventDefault(),o("*","*","italic text");break;case"u":t.preventDefault(),o("<u>","</u>","underlined text");break;case"k":t.preventDefault(),o("[","](url)","link text");break;case"e":t.preventDefault(),o("```","```","code");break}},ie=()=>{m(""),(i?.current||f.current)?.focus()},ce=(()=>{const t=(n.match(/\n/g)||[]).length+1;return Math.min(G,Math.max(W,t))})(),$=e.jsxs("div",{className:b("flex flex-col",J),children:[e.jsxs("div",{className:`flex flex-row items-center ${v?"justify-between":"justify-end"} w-full`,children:[v&&e.jsx("label",{id:r,htmlFor:r,className:`mb-1 text-xs font-medium text-gray-600 inline-flex items-center gap-1 ${_?"":"capitalize"} ${X||"!uppercse"}`,children:e.jsx("div",{className:"flex flex-wrap items-center justify-between w-full",children:e.jsx("div",{className:"inline-flex flex-wrap items-center gap-1",children:e.jsx(me.InputLabel,{label:v||"",required:F||!1,isRequiredConditional:Y||!1})})})}),ee&&e.jsx(L,{placement:"bottom-end",title:e.jsxs("div",{className:"flex flex-col items-start justify-center py-2 px-3 min-w-[220px] gap-2 bg-neutral-900 rounded-lg",children:[e.jsxs("div",{className:"flex flex-col items-start justify-start gap-1 w-full",children:[e.jsxs("div",{className:"flex flex-row items-start gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("div",{className:"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm",children:e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter",children:"**bold**"})}),e.jsxs("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:["→ ",e.jsx("strong",{children:"bold"})," text"]})]}),e.jsxs("div",{className:"flex flex-row items-start gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("div",{className:"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm",children:e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter",children:"*italic*"})}),e.jsxs("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:["→ ",e.jsx("em",{children:"italic"})," text"]})]}),e.jsxs("div",{className:"flex flex-row items-start gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("div",{className:"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm",children:e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter",children:"`code`"})}),e.jsxs("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:["→ ",e.jsx("code",{children:"inline code"})]})]}),e.jsxs("div",{className:"flex flex-row items-start gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("div",{className:"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm",children:e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter",children:"<u>text</u>"})}),e.jsxs("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:["→ ",e.jsx("u",{children:"underline"})]})]}),e.jsxs("div",{className:"flex flex-row items-start gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("div",{className:"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm",children:e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter",children:"~~strike~~"})}),e.jsxs("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:["→ ",e.jsx("del",{children:"strike"})]})]}),e.jsxs("div",{className:"flex flex-row items-start gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("div",{className:"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm",children:e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter",children:"- item"})}),e.jsx("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:"→ bullet list"})]}),e.jsxs("div",{className:"flex flex-row items-start gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("div",{className:"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm",children:e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter",children:"1. item"})}),e.jsx("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:"→ numbered list"})]}),g&&e.jsxs("div",{className:"flex flex-row items-start gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("div",{className:"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm",children:e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter",children:"## heading"})}),e.jsx("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:"→ heading 2"})]}),e.jsxs("div",{className:"flex flex-row items-start gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("div",{className:"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm",children:e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter",children:"[link](url)"})}),e.jsx("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:"→ hyperlink"})]})]}),g&&e.jsx(e.Fragment,{children:e.jsxs("div",{className:"flex flex-col items-start justify-start gap-1 w-full",children:[e.jsxs("div",{className:"flex flex-row items-start gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("div",{className:"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm",children:e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter",children:"> quote"})}),e.jsx("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:"→ blockquote"})]}),e.jsxs("div",{className:"flex flex-col items-start justify-start gap-0.5 w-full mt-0.5",children:[e.jsxs("div",{className:"flex flex-row items-center gap-1 ml-1",children:[e.jsx("span",{className:"text-white text-[18px] leading-4",children:"•"}),e.jsx("span",{className:"text-white text-xs font-medium leading-4 font-inter",children:"Table:"})]}),e.jsxs("div",{className:"flex flex-col px-1 py-0.5 bg-neutral-700 ml-2 rounded-sm gap-0",children:[e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter whitespace-nowrap",children:"| Header 1 | Header 2 | Header 3 |"}),e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter whitespace-nowrap",children:"| :--- | :---: | ---: |"}),e.jsx("span",{className:"text-neutral-300 text-xs font-medium leading-4 font-inter whitespace-nowrap",children:"| Left | Center | Right |"})]})]})]})})]}),children:e.jsx(H.Typography,{className:"mb-2 text-xs font-medium text-primary-700 inline-flex items-center gap-1 cursor-pointer",children:"Formatting help ?"})})]}),e.jsxs("div",{className:b("flex flex-col border shadow-[0px_1px_2px_rgba(0,0,0,0.05)] rounded-lg bg-white dark:bg-black-700 w-full",k?"border-red-300 focus-within:border-red-500 focus-within:shadow-[0_0_0_1.5px_var(--color-red-200)]":"border-[#EAECF0] dark:border-black-600 focus-within:border-primary-600 dark:focus-within:border-primary-400 focus-within:shadow-[0_0_0_1.5px_var(--color-primary-100)] dark:focus-within:shadow-[0_0_0_1.5px_var(--color-primary-950)]"),children:[e.jsxs("div",{className:b("flex flex-row justify-between items-center px-3 py-2 gap-2 h-11 rounded-t-lg bg-[#F9FAFB] dark:bg-black-600 border-b border-[#EAECF0] dark:border-black-600"),children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(u,{id:`${r}-bold`,type:"button",onClick:()=>o("**","**","bold text"),disabled:l||c==="preview",className:"!p-0.5 !min-w-0 !h-auto !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200",appearance:"ghost",status:"no-background",title:"Bold (Ctrl+B)",children:e.jsx(d.FormatBold,{sx:{fontSize:20,color:"#667085"},className:"dark:text-neutral-400"})}),e.jsx(u,{id:`${r}-italic`,type:"button",onClick:()=>o("*","*","italic text"),disabled:l||c==="preview",className:"!p-0.5 !min-w-0 !h-auto !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200",appearance:"ghost",status:"no-background",title:"Italic (Ctrl+I)",children:e.jsx(d.FormatItalic,{sx:{fontSize:20,color:"#667085"},className:"dark:text-neutral-400"})}),e.jsx(u,{id:`${r}-underline`,type:"button",onClick:()=>o("<u>","</u>","underlined text"),disabled:l||c==="preview",className:"!p-0.5 !min-w-0 !h-auto !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200",appearance:"ghost",status:"no-background",title:"Underline (Ctrl+U)",children:e.jsx(d.FormatUnderlined,{sx:{fontSize:20,color:"#667085"},className:"dark:text-neutral-400"})}),e.jsx("div",{className:"w-px h-5 bg-[#EAECF0] dark:bg-black-500 rounded-full"}),e.jsx(u,{id:`${r}-numbered-list`,type:"button",onClick:()=>z("ordered"),disabled:l||c==="preview",className:"!p-0.5 !min-w-0 !h-auto !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200",appearance:"ghost",status:"no-background",title:"Numbered List",children:e.jsx(d.FormatListNumbered,{sx:{fontSize:20,color:"#667085"},className:"dark:text-neutral-400"})}),e.jsx(u,{id:`${r}-bullet-list`,type:"button",onClick:()=>z("bullet"),disabled:l||c==="preview",className:"!p-0.5 !min-w-0 !h-auto !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200",appearance:"ghost",status:"no-background",title:"Bullet List",children:e.jsx(d.FormatListBulleted,{sx:{fontSize:20,color:"#667085"},className:"dark:text-neutral-400"})})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[a&&e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsxs("span",{className:"text-sm font-medium text-[#475467] dark:text-neutral-400",children:[ae,"/",a]}),e.jsx("div",{className:"w-px h-6 bg-[#EAECF0] dark:bg-black-500 rounded-full"})]}),Z?e.jsx(u,{id:`${r}-expand`,type:"button",onClick:()=>I(!0),disabled:l,className:"!p-0.5 !min-w-0 !h-auto ml-1 !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200",appearance:"ghost",status:"no-background",title:"Expand Preview",children:e.jsx(d.OpenInFull,{sx:{fontSize:16,color:"#667085"},className:"dark:text-neutral-400"})}):e.jsx(ue.Tabs,{variant:"switch",tabs:fe,activeTab:c,onTabClick:t=>se(t),height:"h-5",iconsOnly:!0,tabIcons:{edit:e.jsx(d.Edit,{sx:{fontSize:16,color:"#667085"},className:"dark:text-neutral-400"}),preview:e.jsx(d.VisibilityOutlined,{sx:{fontSize:16,color:"#667085"},className:"dark:text-neutral-400"})},className:"rounded-lg"})]})]}),e.jsx("div",{className:"px-3 py-2 relative",children:c==="edit"?e.jsxs(e.Fragment,{children:[e.jsx("textarea",{ref:t=>{typeof i=="function"?i(t):i&&(i.current=t),f.current=t,C&&(C.current=t)},id:r,value:n,defaultValue:V,onChange:t=>{const s=t.target.value;(!a||s.length<=a)&&m(s)},onKeyDown:le,placeholder:D,rows:ce,disabled:l,required:F,maxLength:a,className:b("w-full bg-transparent !focus:ring-0 !focus:border-none","font-inter font-medium text-sm leading-5","text-[#101828] dark:text-neutral-100","placeholder:text-neutral-400 dark:placeholder:text-neutral-500","focus:outline-none resize-none","scrollbar-none","[&::-webkit-scrollbar]:hidden","[-ms-overflow-style:none]","[scrollbar-width:none]",{"text-neutral-400 dark:text-neutral-500 cursor-not-allowed":l},{"pr-20":y||j},Q)}),(y||j)&&c==="edit"&&e.jsxs("div",{className:"absolute right-1 top-2 flex items-center gap-1",children:[y&&n&&e.jsx("button",{id:`btn-input-field-clear-${p}`,className:"absolute inset-y-0 flex items-center cursor-pointer top-2 right-1 focus:outline-none",onClick:ie,type:"button",children:e.jsx(he,{className:"text-neutral-300 dark:text-black-500 hover:text-neutral-400 dark:hover:text-black-400 transition-colors",size:16})}),j&&e.jsx("div",{className:"flex items-center",children:j})]})]}):e.jsx("div",{className:"w-full min-h-[92px] max-h-[400px] overflow-y-auto",children:e.jsx(K.MarkdownPreview,{content:n,linkTarget:q,className:E,noIndent:T,showMinimalPreview:M,acceptAdvanceContent:g})})})]}),e.jsx(xe.Modal,{open:ne,onCancel:()=>I(!1),title:"Markdown Preview",width:900,footer:null,children:e.jsx("div",{className:"max-h-[calc(100vh-200px)] overflow-y-auto p-4",children:e.jsx(K.MarkdownPreview,{content:n,linkTarget:q,className:E,noIndent:T,showMinimalPreview:M,acceptAdvanceContent:g})})}),e.jsx(A.AnimatePresence,{children:k&&e.jsx(A.motion.div,{initial:{opacity:0,y:-10},animate:{opacity:1,y:0},exit:{opacity:0,y:-10},transition:{duration:.2},children:e.jsx(H.Typography,{className:"mt-1 text-error-500",appearance:"custom",size:"extra-small",variant:"medium",children:k})})})]});return R?e.jsx(L,{title:R,children:$}):$});U.displayName="RichMarkdownInput";exports.RichMarkdownInput=U;
|
|
4
2
|
//# sourceMappingURL=RichMarkdownInput.cjs.js.map
|