@plexui/vue 0.0.0-stage → 0.1.1

package/dist/es/components/Kbd/Kbd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Kbd.js","sourceRoot":"","sources":["../../../../src/components/Kbd/Kbd.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAsC,MAAM,KAAK,CAAA;AAC5E,OAAO,CAAC,MAAM,8CAA8C,CAAA;AAE5D,sEAAsE;AACtE,wEAAwE;AAExE,MAAM,YAAY,GAAG,eAAe,CAAC;IACnC,IAAI,EAAE,KAAK;IACX,KAAK,EAAE;QACL,2EAA2E;QAC3E,IAAI,EAAE,EAAE,IAAI,EAAE,MAAsC,EAAE,OAAO,EAAE,IAAI,EAAE;QACrE,+FAA+F;QAC/F,OAAO,EAAE,EAAE,IAAI,EAAE,MAAsC,EAAE,OAAO,EAAE,MAAM,EAAE;KAC3E;IACD,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE;QACpB,OAAO,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,GAAG,EAAE,WAAW,EAAE,KAAK,CAAC,IAAI,EAAE,cAAc,EAAE,KAAK,CAAC,OAAO,EAAE,EAAE,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA;IACtH,CAAC;CACF,CAAC,CAAA;AAOF,gFAAgF;AAChF,MAAM,CAAC,MAAM,GAAG,GAAG,YAAsE,CAAA;AAEzF,iEAAiE;AACjE,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAC;IACtC,IAAI,EAAE,UAAU;IAChB,KAAK,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE;QACrB,OAAO,GAAG,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA;IAC/D,CAAC;CACF,CAAC,CAAA","sourcesContent":["import { defineComponent, h, type HTMLAttributes, type PropType } from \"vue\"\nimport s from \"@plexui/styles/components/Kbd/Kbd.module.css\"\n\n// Vue port of packages/ui/src/components/Kbd/Kbd.tsx. Attributes fall\n// through to the <kbd> (and the group's <span>), as React spreads them.\n\nconst KbdComponent = defineComponent({\n  name: \"Kbd\",\n  props: {\n    /** Height and text size: `xs` 16px, `sm` 20px, `md` 24px. @default \"sm\" */\n    size: { type: String as PropType<\"xs\" | \"sm\" | \"md\">, default: \"sm\" },\n    /** `soft` fills the key, `outline` draws its edge; both mix the text color. @default \"soft\" */\n    variant: { type: String as PropType<\"soft\" | \"outline\">, default: \"soft\" },\n  },\n  setup(props, { slots }) {\n    return () => h(\"kbd\", { \"class\": s.Kbd, \"data-size\": props.size, \"data-variant\": props.variant }, slots.default?.())\n  },\n})\n\ntype KbdOwnProps = InstanceType<typeof KbdComponent>[\"$props\"]\n\n/** Kbd props plus the native attributes that fall through to the <kbd>. */\nexport type KbdProps = KbdOwnProps & Omit<HTMLAttributes, keyof KbdOwnProps>\n\n/** A key or a shortcut, such as ⌘K, in a tooltip, a menu item or a sentence. */\nexport const Kbd = KbdComponent as typeof KbdComponent & { new (): { $props: KbdProps } }\n\n/** Keys pressed together: a row of `Kbd` (React `Kbd.Group`). */\nexport const KbdGroup = defineComponent({\n  name: \"KbdGroup\",\n  setup(_props, { slots }) {\n    return () => h(\"span\", { class: s.Group }, slots.default?.())\n  },\n})\n\nexport type KbdGroupProps = HTMLAttributes\n"]}

package/dist/es/components/Kbd/index.js

@@ -0,0 +1,2 @@
+export { Kbd, KbdGroup } from "./Kbd.js";
+//# sourceMappingURL=index.js.map

package/dist/es/components/Kbd/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Kbd/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAqC,MAAM,UAAU,CAAA","sourcesContent":["export { Kbd, KbdGroup, type KbdGroupProps, type KbdProps } from \"./Kbd.js\"\n"]}

package/dist/es/components/Label/Label.js

@@ -0,0 +1,16 @@
+import { defineComponent, h } from "vue";
+import { Label as RekaLabel } from "reka-ui";
+import s from "@plexui/styles/components/Label/Label.module.css";
+const LabelComponent = defineComponent({
+    name: "Label",
+    props: {
+        /** The id of the element the label is associated with */
+        for: String,
+    },
+    setup(props, { slots }) {
+        return () => h(RekaLabel, { class: s.Label, for: props.for }, { default: () => slots.default?.() });
+    },
+});
+/** Port of packages/ui/src/components/Label/Label.tsx on Reka UI's Label. */
+export const Label = LabelComponent;
+//# sourceMappingURL=Label.js.map

package/dist/es/components/Label/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../../src/components/Label/Label.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAA4B,MAAM,KAAK,CAAA;AAClE,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,SAAS,CAAA;AAC5C,OAAO,CAAC,MAAM,kDAAkD,CAAA;AAEhE,MAAM,cAAc,GAAG,eAAe,CAAC;IACrC,IAAI,EAAE,OAAO;IACb,KAAK,EAAE;QACL,yDAAyD;QACzD,GAAG,EAAE,MAAM;KACZ;IACD,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE;QACpB,OAAO,GAAG,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,EAAE,EAAE,CAAC,CAAA;IACrG,CAAC;CACF,CAAC,CAAA;AAOF,6EAA6E;AAC7E,MAAM,CAAC,MAAM,KAAK,GAAG,cAA4E,CAAA","sourcesContent":["import { defineComponent, h, type LabelHTMLAttributes } from \"vue\"\nimport { Label as RekaLabel } from \"reka-ui\"\nimport s from \"@plexui/styles/components/Label/Label.module.css\"\n\nconst LabelComponent = defineComponent({\n  name: \"Label\",\n  props: {\n    /** The id of the element the label is associated with */\n    for: String,\n  },\n  setup(props, { slots }) {\n    return () => h(RekaLabel, { class: s.Label, for: props.for }, { default: () => slots.default?.() })\n  },\n})\n\ntype LabelOwnProps = InstanceType<typeof LabelComponent>[\"$props\"]\n\n/** Label props plus the native <label> attributes that fall through to it, as in React. */\nexport type LabelProps = LabelOwnProps & Omit<LabelHTMLAttributes, keyof LabelOwnProps>\n\n/** Port of packages/ui/src/components/Label/Label.tsx on Reka UI's Label. */\nexport const Label = LabelComponent as typeof LabelComponent & { new (): { $props: LabelProps } }\n"]}

package/dist/es/components/Label/index.js

@@ -0,0 +1,2 @@
+export { Label } from "./Label.js";
+//# sourceMappingURL=index.js.map

package/dist/es/components/Label/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Label/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAmB,MAAM,YAAY,CAAA","sourcesContent":["export { Label, type LabelProps } from \"./Label.js\"\n"]}

package/dist/es/components/Markdown/Markdown.js

@@ -0,0 +1,180 @@
+import remarkBreaks from "remark-breaks";
+import remarkDirective from "remark-directive";
+import remarkGfm from "remark-gfm";
+import { Text, computed, defineComponent, h, isVNode, normalizeClass } from "vue";
+import { CodeBlock, CodeBlockBase, CodeBlockBaseCode, getSlotText } from "../CodeBlock/CodeBlock.js";
+import { CollapsibleCodeBlock } from "../CodeBlock/CollapsibleCodeBlock.js";
+import { TextLink } from "../TextLink/index.js";
+import { markdownRemarkDirective } from "./directives.js";
+import { renderMarkdown, sanitizeUrl } from "./pipeline.js";
+import { defaultUrlTransform } from "./urlTransform.js";
+import { useMathPlugins } from "./useMathPlugins.js";
+import { useParseMarkdownPre } from "./useParseMarkdownPre.js";
+import s from "@plexui/styles/components/Markdown/Markdown.module.css";
+// Vue port of packages/ui/src/components/Markdown/Markdown.tsx. React's
+// react-markdown is replaced by the same unified pipeline rendered through
+// Vue's JSX runtime (./pipeline.ts), so the elements, attributes and keys
+// match. The markdown is the text of the default slot (interpolate a string,
+// `{{ md }}`, so its newlines are kept) or, when the slot is empty, the
+// `source` prop.
+const supportsLookbehind = (() => {
+    try {
+        new RegExp("(?<=a)b");
+        return true;
+    }
+    catch {
+        return false;
+    }
+})();
+// Every markdown component gets the hast element as `node`; declaring it
+// keeps it off the DOM
+const nodeProps = { node: Object };
+const Pre = defineComponent({
+    name: "MarkdownPre",
+    inheritAttrs: false,
+    props: nodeProps,
+    setup(_props, { slots, attrs }) {
+        return () => {
+            const { code, language } = useParseMarkdownPre(slots.default?.());
+            return h(CodeBlock, { language, class: attrs.class, code });
+        };
+    },
+});
+const InlineCode = defineComponent({
+    name: "MarkdownInlineCode",
+    inheritAttrs: false,
+    props: nodeProps,
+    setup(_props, { slots, attrs }) {
+        return () => h("code", { class: [s.InlineCode, attrs.class] }, slots.default?.());
+    },
+});
+const Anchor = defineComponent({
+    name: "MarkdownAnchor",
+    inheritAttrs: false,
+    props: nodeProps,
+    setup(_props, { slots, attrs }) {
+        // React DOM sanitizes the href TextLink renders; Vue does not, so it happens here
+        return () => h(TextLink, { as: "a", ...attrs, ...(typeof attrs.href === "string" ? { href: sanitizeUrl(attrs.href) } : null) }, { default: () => slots.default?.() });
+    },
+});
+// Sourced from common markdown implementations
+const TableCell = defineComponent({
+    name: "MarkdownTableCell",
+    props: nodeProps,
+    setup(_props, { slots }) {
+        return () => h("td", null, (slots.default?.() ?? []).map((child) => 
+        // Markdown does not support <br> tags in tables without parsing raw
+        // HTML (which may not be safe), so we need to manually handle them
+        isVNode(child) && child.type === Text && child.children === "<br>" ? h("br") : child));
+    },
+});
+const COMMON_COMPONENTS = {
+    code: InlineCode,
+    pre: Pre,
+    a: Anchor,
+    td: TableCell,
+};
+const NonCopyableCodeBlock = defineComponent({
+    name: "MarkdownNonCopyableCodeBlock",
+    inheritAttrs: false,
+    props: nodeProps,
+    setup(_props, { slots, attrs }) {
+        return () => {
+            const { code, language } = useParseMarkdownPre(slots.default?.());
+            return h(CodeBlockBase, { class: attrs.class }, { default: () => [h(CodeBlockBaseCode, { language, code })] });
+        };
+    },
+});
+const NON_COPYABLE_CODE_BLOCK_COMPONENTS = {
+    pre: NonCopyableCodeBlock,
+};
+const CollapsiblePre = defineComponent({
+    name: "MarkdownCollapsiblePre",
+    inheritAttrs: false,
+    props: nodeProps,
+    setup(_props, { slots, attrs }) {
+        return () => {
+            const { code, language } = useParseMarkdownPre(slots.default?.());
+            return h(CollapsibleCodeBlock, { language, class: attrs.class, code });
+        };
+    },
+});
+const COLLAPSIBLE_CODE_BLOCK_COMPONENTS = {
+    pre: CollapsiblePre,
+};
+/** Renders markdown: GFM, directives, optional LaTeX, Plex code blocks and links. */
+export const Markdown = defineComponent({
+    name: "Markdown",
+    // Like React, only `class` reaches the DOM (on the wrapping div)
+    inheritAttrs: false,
+    props: {
+        /** Markdown source, used when the default slot is empty */
+        source: String,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        directives: Array,
+        /** Determines if remark-math plugins should be loaded for rendering LaTeX. @default false */
+        includeMath: { type: Boolean, default: false },
+        /** Determines whether single newlines should insert <br> tags. @default false */
+        breakNewLines: { type: Boolean, default: false },
+        /** Tag name → component overrides, applied over the built-in ones */
+        components: Object,
+        remarkPlugins: Array,
+        rehypePlugins: Array,
+        allowedElements: Array,
+        disallowedElements: Array,
+        /** Rewrites URLs; the default drops unsafe protocols (`javascript:`), keeps `tel:` and `sms:` */
+        urlTransform: { type: Function, default: defaultUrlTransform },
+        skipHtml: { type: Boolean, default: false },
+        /** @default true */
+        copyableCodeBlocks: { type: Boolean, default: true },
+        /** Determines if code blocks should use the collapsible view with "View Code" button. @default true */
+        collapsibleCodeBlocks: { type: Boolean, default: true },
+    },
+    setup(props, { slots, attrs }) {
+        const mathPlugins = useMathPlugins(() => props.includeMath);
+        const mergedRemarkPlugins = computed(() => {
+            const baseRemarkPlugins = [
+                remarkDirective,
+                markdownRemarkDirective,
+                ...mathPlugins.value.remarkPlugins,
+            ];
+            if (props.breakNewLines) {
+                baseRemarkPlugins.push(remarkBreaks);
+            }
+            // remark-gfm requires lookbehind support, which will throw in <= Safari 16.4
+            // with no easily available polyfill.
+            if (supportsLookbehind) {
+                // Do not treat single tilde as strikethrough to allow for more
+                // conversational use cases such as "~$20-$30"
+                baseRemarkPlugins.push([remarkGfm, { singleTilde: false }]);
+            }
+            return [...baseRemarkPlugins, ...(props.remarkPlugins ?? [])];
+        });
+        return () => {
+            const slotText = getSlotText(slots.default?.());
+            const source = slotText !== "" ? slotText : (props.source ?? "");
+            const baseComponents = {
+                ...COMMON_COMPONENTS,
+                ...(props.collapsibleCodeBlocks ? COLLAPSIBLE_CODE_BLOCK_COMPONENTS : null),
+                ...(props.copyableCodeBlocks ? null : NON_COPYABLE_CODE_BLOCK_COMPONENTS),
+                ...props.components,
+            };
+            const components = props.directives?.reduce((acc, directive) => {
+                acc[directive.directiveName] = directive.render;
+                return acc;
+            }, baseComponents) ?? baseComponents;
+            return renderMarkdown({
+                children: source,
+                className: normalizeClass([s.MarkdownContent, attrs.class]),
+                remarkPlugins: mergedRemarkPlugins.value,
+                rehypePlugins: [...(props.rehypePlugins ?? []), ...mathPlugins.value.rehypePlugins],
+                components,
+                allowedElements: props.allowedElements,
+                disallowedElements: props.disallowedElements,
+                skipHtml: props.skipHtml,
+                urlTransform: props.urlTransform,
+            });
+        };
+    },
+});
+//# sourceMappingURL=Markdown.js.map

package/dist/es/components/Markdown/Markdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Markdown.js","sourceRoot":"","sources":["../../../../src/components/Markdown/Markdown.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PluggableList } from \"unified\"\nimport remarkBreaks from \"remark-breaks\"\nimport remarkDirective from \"remark-directive\"\nimport remarkGfm from \"remark-gfm\"\nimport { Text, computed, defineComponent, h, isVNode, normalizeClass, type Component, type PropType } from \"vue\"\nimport { CodeBlock, CodeBlockBase, CodeBlockBaseCode, getSlotText } from \"../CodeBlock/CodeBlock.js\"\nimport { CollapsibleCodeBlock } from \"../CodeBlock/CollapsibleCodeBlock.js\"\nimport { TextLink } from \"../TextLink/index.js\"\nimport { markdownRemarkDirective, type MarkdownDirective } from \"./directives.js\"\nimport { renderMarkdown, sanitizeUrl, type MarkdownComponents } from \"./pipeline.js\"\nimport { defaultUrlTransform, type UrlTransform } from \"./urlTransform.js\"\nimport { useMathPlugins } from \"./useMathPlugins.js\"\nimport { useParseMarkdownPre } from \"./useParseMarkdownPre.js\"\nimport s from \"@plexui/styles/components/Markdown/Markdown.module.css\"\n\n// Vue port of packages/ui/src/components/Markdown/Markdown.tsx. React's\n// react-markdown is replaced by the same unified pipeline rendered through\n// Vue's JSX runtime (./pipeline.ts), so the elements, attributes and keys\n// match. The markdown is the text of the default slot (interpolate a string,\n// `{{ md }}`, so its newlines are kept) or, when the slot is empty, the\n// `source` prop.\n\nconst supportsLookbehind = (() => {\n  try {\n    new RegExp(\"(?<=a)b\")\n    return true\n  } catch {\n    return false\n  }\n})()\n\n/**\n * A component that renders one markdown element: it gets the hast `node`\n * prop, the element's attributes (`class`, `href`, ...) and its content as\n * the default slot. A tag name (`\"span\"`) works too.\n */\nexport type MarkdownComponent = Component | string\n\n// Every markdown component gets the hast element as `node`; declaring it\n// keeps it off the DOM\nconst nodeProps = { node: Object as PropType<Record<string, unknown>> }\n\nconst Pre = defineComponent({\n  name: \"MarkdownPre\",\n  inheritAttrs: false,\n  props: nodeProps,\n  setup(_props, { slots, attrs }) {\n    return () => {\n      const { code, language } = useParseMarkdownPre(slots.default?.())\n      return h(CodeBlock, { language, class: attrs.class, code })\n    }\n  },\n})\n\nconst InlineCode = defineComponent({\n  name: \"MarkdownInlineCode\",\n  inheritAttrs: false,\n  props: nodeProps,\n  setup(_props, { slots, attrs }) {\n    return () => h(\"code\", { class: [s.InlineCode, attrs.class] }, slots.default?.())\n  },\n})\n\nconst Anchor = defineComponent({\n  name: \"MarkdownAnchor\",\n  inheritAttrs: false,\n  props: nodeProps,\n  setup(_props, { slots, attrs }) {\n    // React DOM sanitizes the href TextLink renders; Vue does not, so it happens here\n    return () =>\n      h(\n        TextLink,\n        { as: \"a\", ...attrs, ...(typeof attrs.href === \"string\" ? { href: sanitizeUrl(attrs.href) } : null) },\n        { default: () => slots.default?.() },\n      )\n  },\n})\n\n// Sourced from common markdown implementations\nconst TableCell = defineComponent({\n  name: \"MarkdownTableCell\",\n  props: nodeProps,\n  setup(_props, { slots }) {\n    return () =>\n      h(\n        \"td\",\n        null,\n        (slots.default?.() ?? []).map((child) =>\n          // Markdown does not support <br> tags in tables without parsing raw\n          // HTML (which may not be safe), so we need to manually handle them\n          isVNode(child) && child.type === Text && child.children === \"<br>\" ? h(\"br\") : child,\n        ),\n      )\n  },\n})\n\nconst COMMON_COMPONENTS: MarkdownComponents = {\n  code: InlineCode,\n  pre: Pre,\n  a: Anchor,\n  td: TableCell,\n}\n\nconst NonCopyableCodeBlock = defineComponent({\n  name: \"MarkdownNonCopyableCodeBlock\",\n  inheritAttrs: false,\n  props: nodeProps,\n  setup(_props, { slots, attrs }) {\n    return () => {\n      const { code, language } = useParseMarkdownPre(slots.default?.())\n      return h(CodeBlockBase, { class: attrs.class }, { default: () => [h(CodeBlockBaseCode, { language, code })] })\n    }\n  },\n})\n\nconst NON_COPYABLE_CODE_BLOCK_COMPONENTS: MarkdownComponents = {\n  pre: NonCopyableCodeBlock,\n}\n\nconst CollapsiblePre = defineComponent({\n  name: \"MarkdownCollapsiblePre\",\n  inheritAttrs: false,\n  props: nodeProps,\n  setup(_props, { slots, attrs }) {\n    return () => {\n      const { code, language } = useParseMarkdownPre(slots.default?.())\n      return h(CollapsibleCodeBlock, { language, class: attrs.class, code })\n    }\n  },\n})\n\nconst COLLAPSIBLE_CODE_BLOCK_COMPONENTS: MarkdownComponents = {\n  pre: CollapsiblePre,\n}\n\n/** Renders markdown: GFM, directives, optional LaTeX, Plex code blocks and links. */\nexport const Markdown = defineComponent({\n  name: \"Markdown\",\n  // Like React, only `class` reaches the DOM (on the wrapping div)\n  inheritAttrs: false,\n  props: {\n    /** Markdown source, used when the default slot is empty */\n    source: String,\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    directives: Array as PropType<MarkdownDirective<any>[]>,\n    /** Determines if remark-math plugins should be loaded for rendering LaTeX. @default false */\n    includeMath: { type: Boolean, default: false },\n    /** Determines whether single newlines should insert <br> tags. @default false */\n    breakNewLines: { type: Boolean, default: false },\n    /** Tag name → component overrides, applied over the built-in ones */\n    components: Object as PropType<Record<string, MarkdownComponent>>,\n    remarkPlugins: Array as PropType<PluggableList>,\n    rehypePlugins: Array as PropType<PluggableList>,\n    allowedElements: Array as PropType<ReadonlyArray<string>>,\n    disallowedElements: Array as PropType<ReadonlyArray<string>>,\n    /** Rewrites URLs; the default drops unsafe protocols (`javascript:`), keeps `tel:` and `sms:` */\n    urlTransform: { type: Function as PropType<UrlTransform | null>, default: defaultUrlTransform },\n    skipHtml: { type: Boolean, default: false },\n    /** @default true */\n    copyableCodeBlocks: { type: Boolean, default: true },\n    /** Determines if code blocks should use the collapsible view with \"View Code\" button. @default true */\n    collapsibleCodeBlocks: { type: Boolean, default: true },\n  },\n  setup(props, { slots, attrs }) {\n    const mathPlugins = useMathPlugins(() => props.includeMath)\n\n    const mergedRemarkPlugins = computed(() => {\n      const baseRemarkPlugins: PluggableList = [\n        remarkDirective,\n        markdownRemarkDirective,\n        ...mathPlugins.value.remarkPlugins,\n      ]\n\n      if (props.breakNewLines) {\n        baseRemarkPlugins.push(remarkBreaks)\n      }\n\n      // remark-gfm requires lookbehind support, which will throw in <= Safari 16.4\n      // with no easily available polyfill.\n      if (supportsLookbehind) {\n        // Do not treat single tilde as strikethrough to allow for more\n        // conversational use cases such as \"~$20-$30\"\n        baseRemarkPlugins.push([remarkGfm, { singleTilde: false }])\n      }\n\n      return [...baseRemarkPlugins, ...(props.remarkPlugins ?? [])]\n    })\n\n    return () => {\n      const slotText = getSlotText(slots.default?.())\n      const source = slotText !== \"\" ? slotText : (props.source ?? \"\")\n\n      const baseComponents: MarkdownComponents = {\n        ...COMMON_COMPONENTS,\n        ...(props.collapsibleCodeBlocks ? COLLAPSIBLE_CODE_BLOCK_COMPONENTS : null),\n        ...(props.copyableCodeBlocks ? null : NON_COPYABLE_CODE_BLOCK_COMPONENTS),\n        ...props.components,\n      }\n      const components =\n        props.directives?.reduce((acc, directive) => {\n          acc[directive.directiveName] = directive.render\n          return acc\n        }, baseComponents) ?? baseComponents\n\n      return renderMarkdown({\n        children: source,\n        className: normalizeClass([s.MarkdownContent, attrs.class]),\n        remarkPlugins: mergedRemarkPlugins.value,\n        rehypePlugins: [...(props.rehypePlugins ?? []), ...mathPlugins.value.rehypePlugins],\n        components,\n        allowedElements: props.allowedElements,\n        disallowedElements: props.disallowedElements,\n        skipHtml: props.skipHtml,\n        urlTransform: props.urlTransform,\n      })\n    }\n  },\n})\n\nexport type MarkdownProps = InstanceType<typeof Markdown>[\"$props\"]\n"]}

package/dist/es/components/Markdown/directives.js

@@ -0,0 +1,60 @@
+import { Comment, Text, isVNode } from "vue";
+import { visit } from "unist-util-visit";
+import { createId } from "../../lib/ids.js";
+import { decodeBase64, encodeBase64 } from "../../lib/safeBase64.js";
+/**
+ * React's rendered `children`: nothing, the text of a single text child, the
+ * single vnode, or the list.
+ */
+const toChildren = (nodes) => {
+    if (!nodes || nodes.length === 0)
+        return undefined;
+    if (nodes.length > 1)
+        return nodes;
+    const [node] = nodes;
+    if (isVNode(node) && node.type === Text)
+        return String(node.children ?? "");
+    if (isVNode(node) && node.type === Comment)
+        return undefined;
+    return isVNode(node) ? node : nodes;
+};
+/**
+ * Vue port of packages/ui/src/components/Markdown/directives.ts. `render`
+ * gets the decoded attributes plus `children`: the directive's label as a
+ * string when it is plain text, otherwise its vnodes.
+ */
+export function createMarkdownDirective({ render, name, mode, }) {
+    const prefix = `OaiMdDirective_${name}`;
+    const uniqueName = createId(prefix, prefix.length + 6);
+    function directive(props) {
+        const { children, ...attributes } = props;
+        // Always true, as in React: the attributes are encoded even when empty
+        const attrs = Object.keys(attributes).length >= 0 ? `attrs="${encodeBase64(attributes)}"` : "";
+        const leader = mode === "inline" ? " :" : "\n\n:::";
+        return `${leader}${uniqueName}${children ? `[${children}]` : ""}{${attrs}}`;
+    }
+    const renderDirective = ({ attrs }, { slots }) => {
+        const parsedAttrs = attrs ? decodeBase64(attrs) : {};
+        return render({ ...parsedAttrs, children: toChildren(slots.default?.()) });
+    };
+    // React's render reads only `attrs` and `children`: nothing falls through
+    renderDirective.inheritAttrs = false;
+    directive.directiveName = uniqueName;
+    directive.render = renderDirective;
+    return directive;
+}
+/** React's `reactMarkdownRemarkDirective`: directives become elements named after them. */
+export function markdownRemarkDirective() {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return (tree) => {
+        visit(tree, ["textDirective", "leafDirective", "containerDirective"], (node) => {
+            node.data = {
+                hName: node.name,
+                hProperties: node.attributes,
+                ...node.data,
+            };
+            return node;
+        });
+    };
+}
+//# sourceMappingURL=directives.js.map

package/dist/es/components/Markdown/directives.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"directives.js","sourceRoot":"","sources":["../../../../src/components/Markdown/directives.ts"],"names":[],"mappings":"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","sourcesContent":["import { Comment, Text, isVNode, type FunctionalComponent, type VNode, type VNodeArrayChildren, type VNodeChild } from \"vue\"\nimport { visit } from \"unist-util-visit\"\nimport { createId } from \"../../lib/ids.js\"\nimport { decodeBase64, encodeBase64 } from \"../../lib/safeBase64.js\"\n\ntype ValidDirectiveProps = { children?: string } & Partial<Record<string, unknown>>\n\nexport interface MarkdownDirective<T extends ValidDirectiveProps = ValidDirectiveProps> {\n  directiveName: string\n  /** Functional component Markdown renders the directive with */\n  render: FunctionalComponent<{ attrs?: string }>\n  (props: T): string\n}\n\n/**\n * React's rendered `children`: nothing, the text of a single text child, the\n * single vnode, or the list.\n */\nconst toChildren = (nodes: VNodeArrayChildren | undefined): string | VNode | VNodeArrayChildren | undefined => {\n  if (!nodes || nodes.length === 0) return undefined\n  if (nodes.length > 1) return nodes\n  const [node] = nodes\n  if (isVNode(node) && node.type === Text) return String(node.children ?? \"\")\n  if (isVNode(node) && node.type === Comment) return undefined\n  return isVNode(node) ? node : nodes\n}\n\n/**\n * Vue port of packages/ui/src/components/Markdown/directives.ts. `render`\n * gets the decoded attributes plus `children`: the directive's label as a\n * string when it is plain text, otherwise its vnodes.\n */\nexport function createMarkdownDirective<T extends ValidDirectiveProps>({\n  render,\n  name,\n  mode,\n}: {\n  render: (props: T) => VNodeChild\n  name: string\n  mode: \"inline\" | \"block\"\n}): MarkdownDirective<T> {\n  const prefix = `OaiMdDirective_${name}`\n  const uniqueName = createId(prefix, prefix.length + 6)\n\n  function directive(props: T) {\n    const { children, ...attributes } = props\n    // Always true, as in React: the attributes are encoded even when empty\n    const attrs = Object.keys(attributes).length >= 0 ? `attrs=\"${encodeBase64(attributes)}\"` : \"\"\n    const leader = mode === \"inline\" ? \" :\" : \"\\n\\n:::\"\n\n    return `${leader}${uniqueName}${children ? `[${children}]` : \"\"}{${attrs}}`\n  }\n\n  const renderDirective: FunctionalComponent<{ attrs?: string }> = ({ attrs }, { slots }) => {\n    const parsedAttrs = attrs ? decodeBase64<T>(attrs) : ({} as T)\n    return render({ ...parsedAttrs, children: toChildren(slots.default?.()) })\n  }\n  // React's render reads only `attrs` and `children`: nothing falls through\n  renderDirective.inheritAttrs = false\n\n  directive.directiveName = uniqueName\n  directive.render = renderDirective\n\n  return directive\n}\n\n/** React's `reactMarkdownRemarkDirective`: directives become elements named after them. */\nexport function markdownRemarkDirective() {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  return (tree: any) => {\n    visit(tree, [\"textDirective\", \"leafDirective\", \"containerDirective\"], (node) => {\n      node.data = {\n        hName: node.name,\n        hProperties: node.attributes,\n        ...node.data,\n      }\n      return node\n    })\n  }\n}\n"]}

package/dist/es/components/Markdown/index.js

@@ -0,0 +1,5 @@
+export { createMarkdownDirective } from "./directives.js";
+export { Markdown } from "./Markdown.js";
+export { defaultUrlTransform } from "./urlTransform.js";
+export { useParseMarkdownPre } from "./useParseMarkdownPre.js";
+//# sourceMappingURL=index.js.map

package/dist/es/components/Markdown/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Markdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAA;AACzD,OAAO,EAAE,QAAQ,EAA8C,MAAM,eAAe,CAAA;AACpF,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAEvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA","sourcesContent":["export { createMarkdownDirective } from \"./directives.js\"\nexport { Markdown, type MarkdownComponent, type MarkdownProps } from \"./Markdown.js\"\nexport { defaultUrlTransform } from \"./urlTransform.js\"\n\nexport { useParseMarkdownPre } from \"./useParseMarkdownPre.js\"\n"]}

package/dist/es/components/Markdown/pipeline.js

@@ -0,0 +1,160 @@
+import { toJsxRuntime } from "hast-util-to-jsx-runtime";
+import { urlAttributes } from "html-url-attributes";
+import remarkParse from "remark-parse";
+import remarkRehype, {} from "remark-rehype";
+import { unified } from "unified";
+import { visit } from "unist-util-visit";
+import { Fragment, jsx as vueJsx } from "vue/jsx-runtime";
+import { isDev } from "../../lib/environment.js";
+import { markdownDefaultUrlTransform } from "./urlTransform.js";
+const emptyPlugins = [];
+const emptyRemarkRehypeOptions = { allowDangerousHtml: true };
+// devlop's `unreachable`: throws in development, a no-op in production builds
+const unreachable = (message) => {
+    if (isDev)
+        throw new Error(message);
+};
+// React DOM's URL handling (react-dom 19 `setProp` / `sanitizeURL`), which
+// shapes the React DOM: `javascript:` URLs are replaced by an error-throwing
+// one, and an empty `src` / `href` is not rendered (except `<a href="">`).
+// An <img> keeps its raw `src`: React's `commitMount` sets `img.src` again
+// after mount, over the sanitized attribute.
+const isJavaScriptProtocol = /^[\u0000-\u001F ]*j[\r\n\t]*a[\r\n\t]*v[\r\n\t]*a[\r\n\t]*s[\r\n\t]*c[\r\n\t]*r[\r\n\t]*i[\r\n\t]*p[\r\n\t]*t[\r\n\t]*:/i;
+/** React DOM's `sanitizeURL`. */
+export const sanitizeUrl = (url) => isJavaScriptProtocol.test("" + url)
+    ? "javascript:throw new Error('React has blocked a javascript: URL as a security precaution.')"
+    : url;
+const SANITIZED_ATTRIBUTES = ["src", "href", "action", "formaction", "xlink:href"];
+const applyReactDomUrls = (tag, props) => {
+    for (const key of SANITIZED_ATTRIBUTES) {
+        const value = props[key];
+        if (typeof value !== "string")
+            continue;
+        if (value === "" && (key === "src" || key === "href") && !(tag === "a" && key === "href")) {
+            delete props[key];
+        }
+        else if (!(tag === "img" && key === "src")) {
+            props[key] = sanitizeUrl(value);
+        }
+    }
+};
+/**
+ * `vue/jsx-runtime`'s `jsx`, with React's `children` prop reaching Vue
+ * components as a default slot function (a plain value warns "Non-function
+ * value encountered for default slot"), fragments always getting an array,
+ * and elements getting React DOM's URL handling.
+ */
+const create = (type, props, key) => {
+    if (typeof type === "string") {
+        applyReactDomUrls(type.toLowerCase(), props);
+    }
+    if ("children" in props) {
+        const children = props.children;
+        if (type === Fragment) {
+            props.children = Array.isArray(children) ? children : [children];
+        }
+        else if (typeof type !== "string") {
+            props.children = { default: () => children };
+        }
+    }
+    return key === undefined ? vueJsx(type, props) : vueJsx(type, props, key);
+};
+function createProcessor(options) {
+    const rehypePlugins = options.rehypePlugins || emptyPlugins;
+    const remarkPlugins = options.remarkPlugins || emptyPlugins;
+    const remarkRehypeOptions = options.remarkRehypeOptions
+        ? { ...options.remarkRehypeOptions, ...emptyRemarkRehypeOptions }
+        : emptyRemarkRehypeOptions;
+    return unified().use(remarkParse).use(remarkPlugins).use(remarkRehype, remarkRehypeOptions).use(rehypePlugins);
+}
+function createFile(options) {
+    const children = options.children || "";
+    if (typeof children !== "string") {
+        unreachable("Unexpected value `" + children + "` for `children` prop, expected `string`");
+    }
+    return children;
+}
+/** Renders markdown to a Vue vnode tree (react-markdown's `Markdown`). */
+export function renderMarkdown(options) {
+    const processor = createProcessor(options);
+    const file = createFile(options);
+    return post(processor.runSync(processor.parse(file), file), options);
+}
+function post(tree, options) {
+    const allowedElements = options.allowedElements;
+    const allowElement = options.allowElement;
+    const components = options.components;
+    const disallowedElements = options.disallowedElements;
+    const skipHtml = options.skipHtml;
+    const unwrapDisallowed = options.unwrapDisallowed;
+    const urlTransform = options.urlTransform || markdownDefaultUrlTransform;
+    if (allowedElements && disallowedElements) {
+        unreachable("Unexpected combined `allowedElements` and `disallowedElements`, expected one or the other");
+    }
+    // Wrap in `div` if there's a class name.
+    if (options.className) {
+        tree = {
+            type: "element",
+            tagName: "div",
+            properties: { className: options.className },
+            // Assume no doctypes.
+            children: (tree.type === "root" ? tree.children : [tree]),
+        };
+    }
+    visit(tree, transform);
+    return toJsxRuntime(tree, {
+        Fragment,
+        components: (components ?? undefined),
+        // Vue takes HTML attribute names (`class`, `for`) and CSS property names
+        elementAttributeNameCase: "html",
+        stylePropertyNameCase: "css",
+        ignoreInvalidStyle: true,
+        jsx: create,
+        jsxs: create,
+        passKeys: true,
+        passNode: true,
+    });
+    function transform(node, index, parent) {
+        if (node.type === "raw" && parent && typeof index === "number") {
+            if (skipHtml) {
+                parent.children.splice(index, 1);
+            }
+            else {
+                parent.children[index] = { type: "text", value: node.value };
+            }
+            return index;
+        }
+        if (node.type === "element") {
+            let key;
+            for (key in urlAttributes) {
+                if (Object.hasOwn(urlAttributes, key) && Object.hasOwn(node.properties, key)) {
+                    const value = node.properties[key];
+                    const test = urlAttributes[key];
+                    if (test === null || test.includes(node.tagName)) {
+                        node.properties[key] = urlTransform(String(value || ""), key, node);
+                    }
+                }
+            }
+        }
+        if (node.type === "element") {
+            let remove = allowedElements
+                ? !allowedElements.includes(node.tagName)
+                : disallowedElements
+                    ? disallowedElements.includes(node.tagName)
+                    : false;
+            if (!remove && allowElement && typeof index === "number") {
+                remove = !allowElement(node, index, parent);
+            }
+            if (remove && parent && typeof index === "number") {
+                if (unwrapDisallowed && node.children) {
+                    parent.children.splice(index, 1, ...node.children);
+                }
+                else {
+                    parent.children.splice(index, 1);
+                }
+                return index;
+            }
+        }
+    }
+}
+//# sourceMappingURL=pipeline.js.map

package/dist/es/components/Markdown/pipeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pipeline.js","sourceRoot":"","sources":["../../../../src/components/Markdown/pipeline.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Element, ElementContent, Nodes, Parents, Root } from \"hast\"\nimport { toJsxRuntime, type Components } from \"hast-util-to-jsx-runtime\"\nimport { urlAttributes } from \"html-url-attributes\"\nimport remarkParse from \"remark-parse\"\nimport remarkRehype, { type Options as RemarkRehypeOptions } from \"remark-rehype\"\nimport { unified, type PluggableList } from \"unified\"\nimport { visit } from \"unist-util-visit\"\nimport type { Component, VNode } from \"vue\"\nimport { Fragment, jsx as vueJsx } from \"vue/jsx-runtime\"\nimport { isDev } from \"../../lib/environment.js\"\nimport { markdownDefaultUrlTransform, type UrlTransform } from \"./urlTransform.js\"\n\n// Vue port of react-markdown 9.1.0 (`Markdown` in lib/index.js, the sync\n// variant `import ReactMarkdown from \"react-markdown\"` resolves to): the same\n// unified pipeline (remark-parse → remark plugins → remark-rehype → rehype\n// plugins), the same tree filtering, then hast-util-to-jsx-runtime driving\n// Vue's JSX runtime instead of React's. Deprecated react-markdown options are\n// not ported: Plex's Markdown never passes them.\n\n/** Filter elements: return `false` to drop `element`. */\nexport type AllowElement = (\n  element: Readonly<Element>,\n  index: number,\n  parent: Readonly<Parents> | undefined,\n) => boolean | null | undefined\n\n/** Tag name → Vue component (or tag name) that renders it. */\nexport type MarkdownComponents = Record<string, Component | string>\n\nexport type MarkdownPipelineOptions = {\n  allowElement?: AllowElement | null\n  allowedElements?: ReadonlyArray<string> | null\n  /** Markdown source */\n  children?: string | null\n  /** Wraps the output in a `div` with this class */\n  className?: string | null\n  components?: MarkdownComponents | null\n  disallowedElements?: ReadonlyArray<string> | null\n  rehypePlugins?: PluggableList | null\n  remarkPlugins?: PluggableList | null\n  remarkRehypeOptions?: Readonly<RemarkRehypeOptions> | null\n  skipHtml?: boolean | null\n  unwrapDisallowed?: boolean | null\n  urlTransform?: UrlTransform | null\n}\n\nconst emptyPlugins: PluggableList = []\nconst emptyRemarkRehypeOptions = { allowDangerousHtml: true }\n\n// devlop's `unreachable`: throws in development, a no-op in production builds\nconst unreachable = (message: string) => {\n  if (isDev) throw new Error(message)\n}\n\ntype Props = Record<string, unknown> & { children?: unknown }\ntype VueJsx = (type: unknown, props: Props, key?: string) => VNode\n\n// React DOM's URL handling (react-dom 19 `setProp` / `sanitizeURL`), which\n// shapes the React DOM: `javascript:` URLs are replaced by an error-throwing\n// one, and an empty `src` / `href` is not rendered (except `<a href=\"\">`).\n// An <img> keeps its raw `src`: React's `commitMount` sets `img.src` again\n// after mount, over the sanitized attribute.\nconst isJavaScriptProtocol =\n  /^[\\u0000-\\u001F ]*j[\\r\\n\\t]*a[\\r\\n\\t]*v[\\r\\n\\t]*a[\\r\\n\\t]*s[\\r\\n\\t]*c[\\r\\n\\t]*r[\\r\\n\\t]*i[\\r\\n\\t]*p[\\r\\n\\t]*t[\\r\\n\\t]*:/i\n\n/** React DOM's `sanitizeURL`. */\nexport const sanitizeUrl = <T>(url: T): T | string =>\n  isJavaScriptProtocol.test(\"\" + url)\n    ? \"javascript:throw new Error('React has blocked a javascript: URL as a security precaution.')\"\n    : url\n\nconst SANITIZED_ATTRIBUTES = [\"src\", \"href\", \"action\", \"formaction\", \"xlink:href\"]\n\nconst applyReactDomUrls = (tag: string, props: Props) => {\n  for (const key of SANITIZED_ATTRIBUTES) {\n    const value = props[key]\n    if (typeof value !== \"string\") continue\n    if (value === \"\" && (key === \"src\" || key === \"href\") && !(tag === \"a\" && key === \"href\")) {\n      delete props[key]\n    } else if (!(tag === \"img\" && key === \"src\")) {\n      props[key] = sanitizeUrl(value)\n    }\n  }\n}\n\n/**\n * `vue/jsx-runtime`'s `jsx`, with React's `children` prop reaching Vue\n * components as a default slot function (a plain value warns \"Non-function\n * value encountered for default slot\"), fragments always getting an array,\n * and elements getting React DOM's URL handling.\n */\nconst create = (type: unknown, props: Props, key?: string): VNode => {\n  if (typeof type === \"string\") {\n    applyReactDomUrls(type.toLowerCase(), props)\n  }\n  if (\"children\" in props) {\n    const children = props.children\n    if (type === Fragment) {\n      props.children = Array.isArray(children) ? children : [children]\n    } else if (typeof type !== \"string\") {\n      props.children = { default: () => children }\n    }\n  }\n  return key === undefined ? (vueJsx as VueJsx)(type, props) : (vueJsx as VueJsx)(type, props, key)\n}\n\nfunction createProcessor(options: Readonly<MarkdownPipelineOptions>) {\n  const rehypePlugins = options.rehypePlugins || emptyPlugins\n  const remarkPlugins = options.remarkPlugins || emptyPlugins\n  const remarkRehypeOptions = options.remarkRehypeOptions\n    ? { ...options.remarkRehypeOptions, ...emptyRemarkRehypeOptions }\n    : emptyRemarkRehypeOptions\n\n  return unified().use(remarkParse).use(remarkPlugins).use(remarkRehype, remarkRehypeOptions).use(rehypePlugins)\n}\n\nfunction createFile(options: Readonly<MarkdownPipelineOptions>) {\n  const children = options.children || \"\"\n  if (typeof children !== \"string\") {\n    unreachable(\"Unexpected value `\" + children + \"` for `children` prop, expected `string`\")\n  }\n  return children\n}\n\n/** Renders markdown to a Vue vnode tree (react-markdown's `Markdown`). */\nexport function renderMarkdown(options: Readonly<MarkdownPipelineOptions>): VNode {\n  const processor = createProcessor(options)\n  const file = createFile(options)\n  return post(processor.runSync(processor.parse(file), file) as Root, options)\n}\n\nfunction post(tree: Nodes, options: Readonly<MarkdownPipelineOptions>): VNode {\n  const allowedElements = options.allowedElements\n  const allowElement = options.allowElement\n  const components = options.components\n  const disallowedElements = options.disallowedElements\n  const skipHtml = options.skipHtml\n  const unwrapDisallowed = options.unwrapDisallowed\n  const urlTransform = options.urlTransform || markdownDefaultUrlTransform\n\n  if (allowedElements && disallowedElements) {\n    unreachable(\"Unexpected combined `allowedElements` and `disallowedElements`, expected one or the other\")\n  }\n\n  // Wrap in `div` if there's a class name.\n  if (options.className) {\n    tree = {\n      type: \"element\",\n      tagName: \"div\",\n      properties: { className: options.className },\n      // Assume no doctypes.\n      children: (tree.type === \"root\" ? tree.children : [tree]) as ElementContent[],\n    }\n  }\n\n  visit(tree, transform)\n\n  return toJsxRuntime(tree, {\n    Fragment,\n    components: (components ?? undefined) as Partial<Components> | undefined,\n    // Vue takes HTML attribute names (`class`, `for`) and CSS property names\n    elementAttributeNameCase: \"html\",\n    stylePropertyNameCase: \"css\",\n    ignoreInvalidStyle: true,\n    jsx: create as never,\n    jsxs: create as never,\n    passKeys: true,\n    passNode: true,\n  }) as unknown as VNode\n\n  function transform(node: Nodes, index: number | undefined, parent: Parents | undefined) {\n    if (node.type === \"raw\" && parent && typeof index === \"number\") {\n      if (skipHtml) {\n        parent.children.splice(index, 1)\n      } else {\n        parent.children[index] = { type: \"text\", value: node.value }\n      }\n\n      return index\n    }\n\n    if (node.type === \"element\") {\n      let key: string\n      for (key in urlAttributes) {\n        if (Object.hasOwn(urlAttributes, key) && Object.hasOwn(node.properties, key)) {\n          const value = node.properties[key]\n          const test = urlAttributes[key]\n          if (test === null || test.includes(node.tagName)) {\n            node.properties[key] = urlTransform(String(value || \"\"), key, node)\n          }\n        }\n      }\n    }\n\n    if (node.type === \"element\") {\n      let remove = allowedElements\n        ? !allowedElements.includes(node.tagName)\n        : disallowedElements\n          ? disallowedElements.includes(node.tagName)\n          : false\n\n      if (!remove && allowElement && typeof index === \"number\") {\n        remove = !allowElement(node, index, parent)\n      }\n\n      if (remove && parent && typeof index === \"number\") {\n        if (unwrapDisallowed && node.children) {\n          parent.children.splice(index, 1, ...node.children)\n        } else {\n          parent.children.splice(index, 1)\n        }\n\n        return index\n      }\n    }\n  }\n}\n"]}

package/dist/es/components/Markdown/urlTransform.js

@@ -0,0 +1,34 @@
+const safeProtocol = /^(https?|ircs?|mailto|xmpp)$/i;
+/**
+ * react-markdown 9.1.0's `defaultUrlTransform`: relative URLs and safe
+ * protocols pass, anything else (`javascript:`, `data:`, ...) becomes "".
+ */
+export const markdownDefaultUrlTransform = (value) => {
+    // Same as:
+    // <https://github.com/micromark/micromark/blob/929275e/packages/micromark-util-sanitize-uri/dev/index.js#L34>
+    // But without the `encode` part.
+    const colon = value.indexOf(":");
+    const questionMark = value.indexOf("?");
+    const numberSign = value.indexOf("#");
+    const slash = value.indexOf("/");
+    if (
+    // If there is no protocol, it's relative.
+    colon === -1 ||
+        // If the first colon is after a `?`, `#`, or `/`, it's not a protocol.
+        (slash !== -1 && colon > slash) ||
+        (questionMark !== -1 && colon > questionMark) ||
+        (numberSign !== -1 && colon > numberSign) ||
+        // It is a protocol, it should be allowed.
+        safeProtocol.test(value.slice(0, colon))) {
+        return value;
+    }
+    return "";
+};
+/** Vue port of packages/ui/src/components/Markdown/urlTransform.ts: also lets `tel:` and `sms:` through. */
+export const defaultUrlTransform = (url) => {
+    if (url.startsWith("tel:") || url.startsWith("sms:")) {
+        return url;
+    }
+    return markdownDefaultUrlTransform(url);
+};
+//# sourceMappingURL=urlTransform.js.map

package/dist/es/components/Markdown/urlTransform.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"urlTransform.js","sourceRoot":"","sources":["../../../../src/components/Markdown/urlTransform.ts"],"names":[],"mappings":"AAKA,MAAM,YAAY,GAAG,+BAA+B,CAAA;AAEpD;;;GAGG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,KAAa,EAAE,EAAE;IAC3D,WAAW;IACX,8GAA8G;IAC9G,iCAAiC;IACjC,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAA;IAChC,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAA;IACvC,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAA;IACrC,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAA;IAEhC;IACE,0CAA0C;IAC1C,KAAK,KAAK,CAAC,CAAC;QACZ,uEAAuE;QACvE,CAAC,KAAK,KAAK,CAAC,CAAC,IAAI,KAAK,GAAG,KAAK,CAAC;QAC/B,CAAC,YAAY,KAAK,CAAC,CAAC,IAAI,KAAK,GAAG,YAAY,CAAC;QAC7C,CAAC,UAAU,KAAK,CAAC,CAAC,IAAI,KAAK,GAAG,UAAU,CAAC;QACzC,0CAA0C;QAC1C,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EACxC,CAAC;QACD,OAAO,KAAK,CAAA;IACd,CAAC;IAED,OAAO,EAAE,CAAA;AACX,CAAC,CAAA;AAED,4GAA4G;AAC5G,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,GAAW,EAAE,EAAE;IACjD,IAAI,GAAG,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,GAAG,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE,CAAC;QACrD,OAAO,GAAG,CAAA;IACZ,CAAC;IACD,OAAO,2BAA2B,CAAC,GAAG,CAAC,CAAA;AACzC,CAAC,CAAA","sourcesContent":["import type { Element } from \"hast\"\n\n/** Rewrites a URL attribute (`href`, `src`, ...); `null` / `undefined` drop it. */\nexport type UrlTransform = (url: string, key: string, node: Readonly<Element>) => string | null | undefined\n\nconst safeProtocol = /^(https?|ircs?|mailto|xmpp)$/i\n\n/**\n * react-markdown 9.1.0's `defaultUrlTransform`: relative URLs and safe\n * protocols pass, anything else (`javascript:`, `data:`, ...) becomes \"\".\n */\nexport const markdownDefaultUrlTransform = (value: string) => {\n  // Same as:\n  // <https://github.com/micromark/micromark/blob/929275e/packages/micromark-util-sanitize-uri/dev/index.js#L34>\n  // But without the `encode` part.\n  const colon = value.indexOf(\":\")\n  const questionMark = value.indexOf(\"?\")\n  const numberSign = value.indexOf(\"#\")\n  const slash = value.indexOf(\"/\")\n\n  if (\n    // If there is no protocol, it's relative.\n    colon === -1 ||\n    // If the first colon is after a `?`, `#`, or `/`, it's not a protocol.\n    (slash !== -1 && colon > slash) ||\n    (questionMark !== -1 && colon > questionMark) ||\n    (numberSign !== -1 && colon > numberSign) ||\n    // It is a protocol, it should be allowed.\n    safeProtocol.test(value.slice(0, colon))\n  ) {\n    return value\n  }\n\n  return \"\"\n}\n\n/** Vue port of packages/ui/src/components/Markdown/urlTransform.ts: also lets `tel:` and `sms:` through. */\nexport const defaultUrlTransform = (url: string) => {\n  if (url.startsWith(\"tel:\") || url.startsWith(\"sms:\")) {\n    return url\n  }\n  return markdownDefaultUrlTransform(url)\n}\n"]}