@pallasoft/ps-core-components 2.40.0 → 2.42.0

package/dist/components/ps-linked-text.d.ts

@@ -0,0 +1,5 @@
+export interface PsLinkedTextProps {
+    linkClassName?: string;
+    text: string;
+}
+export declare const PsLinkedText: ({ linkClassName, text, }: PsLinkedTextProps) => import("react").JSX.Element;

package/dist/components/ps-linked-text.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsLinkedText = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_linked_text_link_rel_1 = require("../constants/ps-linked-text-link-rel");
+const ps_portable_text_link_class_name_1 = require("../constants/ps-portable-text-link-class-name");
+const ps_text_link_service_1 = require("../services/ps-text-link-service");
+const PsLinkedText = ({ linkClassName = ps_portable_text_link_class_name_1.PsPortableTextLinkClassName, text, }) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: ps_text_link_service_1.PsTextLinkService.segments(text).map((segment, index) => segment.href === null ? ((0, jsx_runtime_1.jsx)("span", { children: segment.text }, index)) : ((0, jsx_runtime_1.jsx)("a", { className: linkClassName, href: segment.href, rel: ps_linked_text_link_rel_1.PsLinkedTextLinkRel, target: '_blank', children: segment.text }, index))) }));
+exports.PsLinkedText = PsLinkedText;

package/dist/components/ps-portable-text-image.d.ts

@@ -0,0 +1,7 @@
+import type { PortableTextTypeComponentProps } from '@portabletext/react';
+import type { PsPortableTextImageData } from '../models/ps-portable-text-image-data';
+export interface PsPortableTextImageProps extends PortableTextTypeComponentProps<PsPortableTextImageData> {
+    hiddenLabel: string;
+    isShown: boolean;
+}
+export declare const PsPortableTextImage: ({ hiddenLabel, isShown, value }: PsPortableTextImageProps) => import("react").JSX.Element | null;

package/dist/components/ps-portable-text-image.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsPortableTextImage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_portable_text_message_config_1 = require("../constants/ps-portable-text-message-config");
+const ps_portable_text_link_service_1 = require("../services/ps-portable-text-link-service");
+const PsPortableTextImage = ({ hiddenLabel, isShown, value }) => {
+    if (typeof value.src !== 'string' || !ps_portable_text_link_service_1.PsPortableTextLinkService.isSafeImage(value.src))
+        return null;
+    const alt = typeof value.alt === 'string' ? value.alt : '';
+    if (!isShown)
+        return ((0, jsx_runtime_1.jsx)("div", { className: ps_portable_text_message_config_1.PsPortableTextMessageConfig.placeholderClassName, children: alt === '' ? hiddenLabel : alt }));
+    return ((0, jsx_runtime_1.jsx)("img", { alt: alt, className: ps_portable_text_message_config_1.PsPortableTextMessageConfig.imageClassName, decoding: ps_portable_text_message_config_1.PsPortableTextMessageConfig.imageDecoding, loading: ps_portable_text_message_config_1.PsPortableTextMessageConfig.imageLoading, referrerPolicy: ps_portable_text_message_config_1.PsPortableTextMessageConfig.imageReferrerPolicy, src: value.src }));
+};
+exports.PsPortableTextImage = PsPortableTextImage;

package/dist/components/ps-portable-text-message.d.ts

@@ -0,0 +1,2 @@
+import type { PsPortableTextMessageProps } from '../models/ps-portable-text-message-props';
+export declare const PsPortableTextMessage: ({ containerClasses, containerStyles, imageLabels, isImagesShown, linkClassName, LinkComponent, text, }: PsPortableTextMessageProps) => import("react").JSX.Element;

package/dist/components/ps-portable-text-message.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsPortableTextMessage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const react_2 = require("@portabletext/react");
+const ps_linked_text_link_rel_1 = require("../constants/ps-linked-text-link-rel");
+const ps_portable_text_auto_link_type_1 = require("../constants/ps-portable-text-auto-link-type");
+const ps_portable_text_message_config_1 = require("../constants/ps-portable-text-message-config");
+const ps_portable_text_link_service_1 = require("../services/ps-portable-text-link-service");
+const ps_portable_text_image_1 = require("./ps-portable-text-image");
+const ps_text_link_1 = require("./ps-text-link");
+const PsPortableTextMessage = ({ containerClasses, containerStyles, imageLabels, isImagesShown, linkClassName, LinkComponent, text, }) => {
+    const config = ps_portable_text_message_config_1.PsPortableTextMessageConfig;
+    const [isShown, setIsShown] = (0, react_1.useState)(isImagesShown);
+    const labels = { ...config.defaultLabels, ...imageLabels };
+    const linkClasses = linkClassName === undefined ? config.linkClassName : linkClassName;
+    const components = {
+        types: {
+            [config.imageType]: ({ value, ...props }) => ((0, jsx_runtime_1.jsx)(ps_portable_text_image_1.PsPortableTextImage, { ...props, hiddenLabel: labels.imageHidden, isShown: isShown, value: value })),
+        },
+        marks: {
+            code: ({ children }) => (0, jsx_runtime_1.jsx)("code", { className: config.codeClassName, children: children }),
+            em: ({ children }) => (0, jsx_runtime_1.jsx)("em", { children: children }),
+            strong: ({ children }) => (0, jsx_runtime_1.jsx)("strong", { children: children }),
+            underline: ({ children }) => (0, jsx_runtime_1.jsx)("u", { children: children }),
+            [ps_portable_text_auto_link_type_1.PsPortableTextAutoLinkType]: ({ children, value }) => ((0, jsx_runtime_1.jsx)("a", { className: linkClasses, href: value.href, rel: ps_linked_text_link_rel_1.PsLinkedTextLinkRel, target: config.linkTarget, children: children })),
+            link: ({ children, value }) => typeof value?.href === 'string' && ps_portable_text_link_service_1.PsPortableTextLinkService.isSafeLink(value.href) ? ((0, jsx_runtime_1.jsx)(LinkComponent, { className: linkClasses, href: value.href, rel: config.linkRel, target: config.linkTarget, children: children })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children })),
+        },
+        list: {
+            bullet: ({ children }) => (0, jsx_runtime_1.jsx)("ul", { className: config.bulletListClassName, children: children }),
+            number: ({ children }) => (0, jsx_runtime_1.jsx)("ol", { className: config.numberListClassName, children: children }),
+        },
+        listItem: {
+            bullet: ({ children }) => (0, jsx_runtime_1.jsx)("li", { className: config.listItemClassName, children: children }),
+            number: ({ children }) => (0, jsx_runtime_1.jsx)("li", { className: config.listItemClassName, children: children }),
+        },
+        block: {
+            normal: ({ children }) => (0, jsx_runtime_1.jsx)("p", { className: config.paragraphClassName, children: children }),
+            blockquote: ({ children }) => ((0, jsx_runtime_1.jsx)("blockquote", { className: config.quoteClassName, children: children })),
+            h1: ({ children }) => (0, jsx_runtime_1.jsx)("h3", { className: config.headingClassNames.h1, children: children }),
+            h2: ({ children }) => (0, jsx_runtime_1.jsx)("h4", { className: config.headingClassNames.h2, children: children }),
+            h3: ({ children }) => (0, jsx_runtime_1.jsx)("h5", { className: config.headingClassNames.h3, children: children }),
+        },
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge(config.rootClassName, containerClasses), style: containerStyles, children: [!isShown && ps_portable_text_link_service_1.PsPortableTextLinkService.hasImages(text) ? ((0, jsx_runtime_1.jsxs)("p", { className: config.imageBarClassName, children: [(0, jsx_runtime_1.jsx)("span", { children: labels.imagesHidden }), (0, jsx_runtime_1.jsx)(ps_text_link_1.PsTextLink, { onClick: () => setIsShown(true), size: 'compact', children: labels.showImages })] })) : null, (0, jsx_runtime_1.jsx)(react_2.PortableText, { components: components, value: ps_portable_text_link_service_1.PsPortableTextLinkService.linkify(text) })] }));
+};
+exports.PsPortableTextMessage = PsPortableTextMessage;

package/dist/components/ps-portable-text.d.ts

@@ -1,10 +1,14 @@
 import type { CSSProperties, ElementType, ReactNode } from 'react';
 import { TypedObject } from '@portabletext/types';
+import { PsPortableTextVariant } from '../constants/ps-portable-text-variant';
+import type { PsPortableTextImageLabels } from '../models/ps-portable-text-image-labels';
 export interface PsPortableTextProps {
     bodyClasses?: string;
     containerClasses?: string;
     containerStyles?: CSSProperties;
     headerClasses?: string;
+    imageLabels?: Partial<PsPortableTextImageLabels>;
+    isImagesShown?: boolean;
     isLargeBodyFont?: boolean;
     linkClassName?: string;
     LinkComponent?: ElementType<{
@@ -16,5 +20,6 @@ export interface PsPortableTextProps {
     }>;
     listClasses?: string;
     text: TypedObject[];
+    variant?: PsPortableTextVariant;
 }
-export declare const PsPortableText: ({ bodyClasses, containerClasses, containerStyles, headerClasses, isLargeBodyFont, linkClassName, LinkComponent, listClasses, text, }: PsPortableTextProps) => import("react").JSX.Element;
+export declare const PsPortableText: ({ bodyClasses, containerClasses, containerStyles, headerClasses, imageLabels, isImagesShown, isLargeBodyFont, linkClassName, LinkComponent, listClasses, text, variant, }: PsPortableTextProps) => import("react").JSX.Element;

package/dist/components/ps-portable-text.js

@@ -4,16 +4,27 @@ exports.PsPortableText = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const react_1 = require("@portabletext/react");
-const PsPortableText = ({ bodyClasses = 'text-ink', containerClasses = '', containerStyles = {}, headerClasses = 'text-ink', isLargeBodyFont = false, linkClassName = 'text-primary underline', LinkComponent = 'a', listClasses = 'text-ink', text, }) => {
+const ps_linked_text_link_rel_1 = require("../constants/ps-linked-text-link-rel");
+const ps_portable_text_auto_link_type_1 = require("../constants/ps-portable-text-auto-link-type");
+const ps_portable_text_link_class_name_1 = require("../constants/ps-portable-text-link-class-name");
+const ps_portable_text_variant_1 = require("../constants/ps-portable-text-variant");
+const ps_text_wrap_class_name_1 = require("../constants/ps-text-wrap-class-name");
+const ps_portable_text_link_service_1 = require("../services/ps-portable-text-link-service");
+const ps_portable_text_message_1 = require("./ps-portable-text-message");
+const PsPortableText = ({ bodyClasses = 'text-ink', containerClasses = '', containerStyles = {}, headerClasses = 'text-ink', imageLabels, isImagesShown = false, isLargeBodyFont = false, linkClassName, LinkComponent = 'a', listClasses = 'text-ink', text, variant = ps_portable_text_variant_1.PsPortableTextVariant.Article, }) => {
+    if (variant === ps_portable_text_variant_1.PsPortableTextVariant.Message)
+        return ((0, jsx_runtime_1.jsx)(ps_portable_text_message_1.PsPortableTextMessage, { containerClasses: containerClasses, containerStyles: containerStyles, imageLabels: imageLabels, isImagesShown: isImagesShown, linkClassName: linkClassName, LinkComponent: LinkComponent, text: text }));
+    const articleLinkClassName = linkClassName === undefined ? ps_portable_text_link_class_name_1.PsPortableTextLinkClassName : linkClassName;
     const hasContainerStyles = Object.keys(containerStyles).length > 0;
     const getBodyClass = hasContainerStyles ? '' : bodyClasses;
     const getHeaderClass = hasContainerStyles ? '' : headerClasses;
     const getListClass = hasContainerStyles ? '' : listClasses;
     const components = {
         marks: {
+            [ps_portable_text_auto_link_type_1.PsPortableTextAutoLinkType]: ({ children, value }) => ((0, jsx_runtime_1.jsx)("a", { href: value.href, target: '_blank', rel: ps_linked_text_link_rel_1.PsLinkedTextLinkRel, className: articleLinkClassName, children: children })),
             link: ({ children, value }) => {
                 const rel = !value.href.startsWith('/') ? 'noreferrer noopener' : undefined;
-                return ((0, jsx_runtime_1.jsx)(LinkComponent, { href: value.href, rel: rel, className: linkClassName, "aria-label": value.children, children: children }));
+                return ((0, jsx_runtime_1.jsx)(LinkComponent, { href: value.href, rel: rel, className: articleLinkClassName, "aria-label": value.children, children: children }));
             },
         },
         list: {
@@ -21,11 +32,11 @@ const PsPortableText = ({ bodyClasses = 'text-ink', containerClasses = '', conta
             number: ({ children }) => (0, jsx_runtime_1.jsx)("ol", { className: 'mb-3 mt-1 list-decimal ml-4', children: children }),
         },
         listItem: {
-            bullet: ({ children }) => ((0, jsx_runtime_1.jsx)("li", { className: ps_design_system_1.PallasoftClassNameService.merge('md:text-body-2 max-md:text-body-3', getListClass), children: children })),
-            number: ({ children }) => ((0, jsx_runtime_1.jsx)("li", { className: ps_design_system_1.PallasoftClassNameService.merge('md:text-body-2 max-md:text-body-3', getListClass), children: children })),
+            bullet: ({ children }) => ((0, jsx_runtime_1.jsx)("li", { className: ps_design_system_1.PallasoftClassNameService.merge('md:text-body-2 max-md:text-body-3', ps_text_wrap_class_name_1.PsTextWrapClassName, getListClass), children: children })),
+            number: ({ children }) => ((0, jsx_runtime_1.jsx)("li", { className: ps_design_system_1.PallasoftClassNameService.merge('md:text-body-2 max-md:text-body-3', ps_text_wrap_class_name_1.PsTextWrapClassName, getListClass), children: children })),
         },
         block: {
-            normal: ({ children }) => ((0, jsx_runtime_1.jsx)("p", { className: ps_design_system_1.PallasoftClassNameService.merge(isLargeBodyFont ? 'text-body-1' : 'text-body-2', 'whitespace-pre-line', getBodyClass), children: children })),
+            normal: ({ children }) => ((0, jsx_runtime_1.jsx)("p", { className: ps_design_system_1.PallasoftClassNameService.merge(isLargeBodyFont ? 'text-body-1' : 'text-body-2', 'whitespace-pre-line', ps_text_wrap_class_name_1.PsTextWrapClassName, getBodyClass), children: children })),
             h2: ({ children }) => ((0, jsx_runtime_1.jsx)("h2", { className: ps_design_system_1.PallasoftClassNameService.merge('text-header-1 py-2', getHeaderClass), children: children })),
             h3: ({ children }) => ((0, jsx_runtime_1.jsx)("h3", { className: ps_design_system_1.PallasoftClassNameService.merge('text-header-2 py-2', getHeaderClass), children: children })),
             h4: ({ children }) => ((0, jsx_runtime_1.jsx)("h4", { className: ps_design_system_1.PallasoftClassNameService.merge('text-header-3 py-2', getHeaderClass), children: children })),
@@ -33,6 +44,6 @@ const PsPortableText = ({ bodyClasses = 'text-ink', containerClasses = '', conta
             h6: ({ children }) => ((0, jsx_runtime_1.jsx)("h6", { className: ps_design_system_1.PallasoftClassNameService.merge('text-header-4 py-1', getHeaderClass), children: children })),
         },
     };
-    return ((0, jsx_runtime_1.jsx)("div", { className: containerClasses, style: containerStyles, children: (0, jsx_runtime_1.jsx)(react_1.PortableText, { value: text, components: components }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: containerClasses, style: containerStyles, children: (0, jsx_runtime_1.jsx)(react_1.PortableText, { value: ps_portable_text_link_service_1.PsPortableTextLinkService.linkify(text), components: components }) }));
 };
 exports.PsPortableText = PsPortableText;

package/dist/constants/ps-linked-text-link-rel.d.ts

@@ -0,0 +1 @@
+export declare const PsLinkedTextLinkRel = "noopener noreferrer nofollow";

package/dist/constants/ps-linked-text-link-rel.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsLinkedTextLinkRel = void 0;
+exports.PsLinkedTextLinkRel = 'noopener noreferrer nofollow';

package/dist/constants/ps-portable-text-auto-link-type.d.ts

@@ -0,0 +1 @@
+export declare const PsPortableTextAutoLinkType = "autoLink";

package/dist/constants/ps-portable-text-auto-link-type.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsPortableTextAutoLinkType = void 0;
+exports.PsPortableTextAutoLinkType = 'autoLink';

package/dist/constants/ps-portable-text-link-class-name.d.ts

@@ -0,0 +1 @@
+export declare const PsPortableTextLinkClassName = "text-primary underline";

package/dist/constants/ps-portable-text-link-class-name.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsPortableTextLinkClassName = void 0;
+exports.PsPortableTextLinkClassName = 'text-primary underline';

package/dist/constants/ps-portable-text-message-config.d.ts

@@ -0,0 +1,32 @@
+export declare const PsPortableTextMessageConfig: {
+    readonly rootClassName: "flex min-w-0 flex-col gap-3 text-sm leading-6 text-inherit [overflow-wrap:anywhere]";
+    readonly paragraphClassName: "whitespace-pre-line";
+    readonly quoteClassName: "whitespace-pre-line border-l-2 border-line pl-3 opacity-80";
+    readonly linkClassName: "underline underline-offset-2";
+    readonly codeClassName: "rounded bg-ink/10 px-1 font-mono text-[0.85em]";
+    readonly bulletListClassName: "flex list-disc flex-col gap-1 pl-5";
+    readonly numberListClassName: "flex list-decimal flex-col gap-1 pl-5";
+    readonly listItemClassName: "whitespace-pre-line";
+    readonly defaultLabels: {
+        imageHidden: string;
+        imagesHidden: string;
+        showImages: string;
+    };
+    readonly imageBarClassName: "flex flex-wrap items-center gap-x-2 gap-y-1 text-xs opacity-70";
+    readonly placeholderClassName: "flex min-h-10 items-center rounded-ps-control border border-dashed border-line px-3 py-2 text-xs opacity-70";
+    readonly imageClassName: "h-auto max-w-full rounded-ps-control border border-line";
+    readonly headingClassNames: {
+        readonly h1: "mt-1 text-lg font-semibold leading-snug";
+        readonly h2: "mt-1 text-base font-semibold leading-snug";
+        readonly h3: "mt-1 text-sm font-semibold leading-snug";
+    };
+    readonly linkRel: "noopener noreferrer";
+    readonly linkTarget: "_blank";
+    readonly imageLoading: "lazy";
+    readonly imageDecoding: "async";
+    readonly imageReferrerPolicy: "no-referrer";
+    readonly imageType: "image";
+    readonly imageProtocolPattern: RegExp;
+    readonly relativePrefix: "/";
+    readonly protocolRelativePrefix: "//";
+};

package/dist/constants/ps-portable-text-message-config.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsPortableTextMessageConfig = void 0;
+exports.PsPortableTextMessageConfig = {
+    rootClassName: 'flex min-w-0 flex-col gap-3 text-sm leading-6 text-inherit [overflow-wrap:anywhere]',
+    paragraphClassName: 'whitespace-pre-line',
+    quoteClassName: 'whitespace-pre-line border-l-2 border-line pl-3 opacity-80',
+    linkClassName: 'underline underline-offset-2',
+    codeClassName: 'rounded bg-ink/10 px-1 font-mono text-[0.85em]',
+    bulletListClassName: 'flex list-disc flex-col gap-1 pl-5',
+    numberListClassName: 'flex list-decimal flex-col gap-1 pl-5',
+    listItemClassName: 'whitespace-pre-line',
+    defaultLabels: {
+        imageHidden: 'Image not shown',
+        imagesHidden: 'Images are hidden to protect your privacy.',
+        showImages: 'Show images',
+    },
+    imageBarClassName: 'flex flex-wrap items-center gap-x-2 gap-y-1 text-xs opacity-70',
+    placeholderClassName: 'flex min-h-10 items-center rounded-ps-control border border-dashed border-line px-3 py-2 text-xs opacity-70',
+    imageClassName: 'h-auto max-w-full rounded-ps-control border border-line',
+    headingClassNames: {
+        h1: 'mt-1 text-lg font-semibold leading-snug',
+        h2: 'mt-1 text-base font-semibold leading-snug',
+        h3: 'mt-1 text-sm font-semibold leading-snug',
+    },
+    linkRel: 'noopener noreferrer',
+    linkTarget: '_blank',
+    imageLoading: 'lazy',
+    imageDecoding: 'async',
+    imageReferrerPolicy: 'no-referrer',
+    imageType: 'image',
+    imageProtocolPattern: /^https?:\/\//i,
+    relativePrefix: '/',
+    protocolRelativePrefix: '//',
+};

package/dist/constants/ps-portable-text-variant.d.ts

@@ -0,0 +1,4 @@
+export declare enum PsPortableTextVariant {
+    Article = "article",
+    Message = "message"
+}

package/dist/constants/ps-portable-text-variant.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsPortableTextVariant = void 0;
+var PsPortableTextVariant;
+(function (PsPortableTextVariant) {
+    PsPortableTextVariant["Article"] = "article";
+    PsPortableTextVariant["Message"] = "message";
+})(PsPortableTextVariant || (exports.PsPortableTextVariant = PsPortableTextVariant = {}));

package/dist/constants/ps-text-link-gap.d.ts

@@ -0,0 +1,4 @@
+export declare const PsTextLinkGap: {
+    readonly text: " ";
+    readonly trailingSpacePattern: RegExp;
+};

package/dist/constants/ps-text-link-gap.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTextLinkGap = void 0;
+exports.PsTextLinkGap = {
+    text: ' ',
+    trailingSpacePattern: /\s$/,
+};

package/dist/constants/ps-text-link-pattern-source.d.ts

@@ -0,0 +1 @@
+export declare const PsTextLinkPatternSource = "<([^<>\\s]+)>|(https?:\\/\\/[^\\s<>]+)";

package/dist/constants/ps-text-link-pattern-source.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTextLinkPatternSource = void 0;
+exports.PsTextLinkPatternSource = '<([^<>\\s]+)>|(https?:\\/\\/[^\\s<>]+)';

package/dist/constants/ps-text-link-protocols.d.ts

@@ -0,0 +1 @@
+export declare const PsTextLinkProtocols: string[];

package/dist/constants/ps-text-link-protocols.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTextLinkProtocols = void 0;
+exports.PsTextLinkProtocols = ['http:', 'https:', 'mailto:'];

package/dist/constants/ps-text-link-trailing-characters.d.ts

@@ -0,0 +1 @@
+export declare const PsTextLinkTrailingCharacters = ".,;:!?)]}'\"";

package/dist/constants/ps-text-link-trailing-characters.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTextLinkTrailingCharacters = void 0;
+exports.PsTextLinkTrailingCharacters = '.,;:!?)]}\'"';

package/dist/constants/ps-text-wrap-class-name.d.ts

@@ -0,0 +1 @@
+export declare const PsTextWrapClassName = "[overflow-wrap:anywhere]";

package/dist/constants/ps-text-wrap-class-name.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTextWrapClassName = void 0;
+exports.PsTextWrapClassName = '[overflow-wrap:anywhere]';

package/dist/esm/components/ps-linked-text.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { PsLinkedTextLinkRel } from '../constants/ps-linked-text-link-rel.js';
+import { PsPortableTextLinkClassName } from '../constants/ps-portable-text-link-class-name.js';
+import { PsTextLinkService } from '../services/ps-text-link-service.js';
+export const PsLinkedText = ({ linkClassName = PsPortableTextLinkClassName, text, }) => (_jsx(_Fragment, { children: PsTextLinkService.segments(text).map((segment, index) => segment.href === null ? (_jsx("span", { children: segment.text }, index)) : (_jsx("a", { className: linkClassName, href: segment.href, rel: PsLinkedTextLinkRel, target: '_blank', children: segment.text }, index))) }));

package/dist/esm/components/ps-portable-text-image.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsPortableTextMessageConfig } from '../constants/ps-portable-text-message-config.js';
+import { PsPortableTextLinkService } from '../services/ps-portable-text-link-service.js';
+export const PsPortableTextImage = ({ hiddenLabel, isShown, value }) => {
+    if (typeof value.src !== 'string' || !PsPortableTextLinkService.isSafeImage(value.src))
+        return null;
+    const alt = typeof value.alt === 'string' ? value.alt : '';
+    if (!isShown)
+        return (_jsx("div", { className: PsPortableTextMessageConfig.placeholderClassName, children: alt === '' ? hiddenLabel : alt }));
+    return (_jsx("img", { alt: alt, className: PsPortableTextMessageConfig.imageClassName, decoding: PsPortableTextMessageConfig.imageDecoding, loading: PsPortableTextMessageConfig.imageLoading, referrerPolicy: PsPortableTextMessageConfig.imageReferrerPolicy, src: value.src }));
+};

package/dist/esm/components/ps-portable-text-message.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PortableText as Text } from '@portabletext/react';
+import { PsLinkedTextLinkRel } from '../constants/ps-linked-text-link-rel.js';
+import { PsPortableTextAutoLinkType } from '../constants/ps-portable-text-auto-link-type.js';
+import { PsPortableTextMessageConfig } from '../constants/ps-portable-text-message-config.js';
+import { PsPortableTextLinkService } from '../services/ps-portable-text-link-service.js';
+import { PsPortableTextImage } from './ps-portable-text-image.js';
+import { PsTextLink } from './ps-text-link.js';
+export const PsPortableTextMessage = ({ containerClasses, containerStyles, imageLabels, isImagesShown, linkClassName, LinkComponent, text, }) => {
+    const config = PsPortableTextMessageConfig;
+    const [isShown, setIsShown] = useState(isImagesShown);
+    const labels = { ...config.defaultLabels, ...imageLabels };
+    const linkClasses = linkClassName === undefined ? config.linkClassName : linkClassName;
+    const components = {
+        types: {
+            [config.imageType]: ({ value, ...props }) => (_jsx(PsPortableTextImage, { ...props, hiddenLabel: labels.imageHidden, isShown: isShown, value: value })),
+        },
+        marks: {
+            code: ({ children }) => _jsx("code", { className: config.codeClassName, children: children }),
+            em: ({ children }) => _jsx("em", { children: children }),
+            strong: ({ children }) => _jsx("strong", { children: children }),
+            underline: ({ children }) => _jsx("u", { children: children }),
+            [PsPortableTextAutoLinkType]: ({ children, value }) => (_jsx("a", { className: linkClasses, href: value.href, rel: PsLinkedTextLinkRel, target: config.linkTarget, children: children })),
+            link: ({ children, value }) => typeof value?.href === 'string' && PsPortableTextLinkService.isSafeLink(value.href) ? (_jsx(LinkComponent, { className: linkClasses, href: value.href, rel: config.linkRel, target: config.linkTarget, children: children })) : (_jsx(_Fragment, { children: children })),
+        },
+        list: {
+            bullet: ({ children }) => _jsx("ul", { className: config.bulletListClassName, children: children }),
+            number: ({ children }) => _jsx("ol", { className: config.numberListClassName, children: children }),
+        },
+        listItem: {
+            bullet: ({ children }) => _jsx("li", { className: config.listItemClassName, children: children }),
+            number: ({ children }) => _jsx("li", { className: config.listItemClassName, children: children }),
+        },
+        block: {
+            normal: ({ children }) => _jsx("p", { className: config.paragraphClassName, children: children }),
+            blockquote: ({ children }) => (_jsx("blockquote", { className: config.quoteClassName, children: children })),
+            h1: ({ children }) => _jsx("h3", { className: config.headingClassNames.h1, children: children }),
+            h2: ({ children }) => _jsx("h4", { className: config.headingClassNames.h2, children: children }),
+            h3: ({ children }) => _jsx("h5", { className: config.headingClassNames.h3, children: children }),
+        },
+    };
+    return (_jsxs("div", { className: PallasoftClassNameService.merge(config.rootClassName, containerClasses), style: containerStyles, children: [!isShown && PsPortableTextLinkService.hasImages(text) ? (_jsxs("p", { className: config.imageBarClassName, children: [_jsx("span", { children: labels.imagesHidden }), _jsx(PsTextLink, { onClick: () => setIsShown(true), size: 'compact', children: labels.showImages })] })) : null, _jsx(Text, { components: components, value: PsPortableTextLinkService.linkify(text) })] }));
+};

package/dist/esm/components/ps-portable-text.js

@@ -1,16 +1,27 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
 import { PortableText as Text } from '@portabletext/react';
-export const PsPortableText = ({ bodyClasses = 'text-ink', containerClasses = '', containerStyles = {}, headerClasses = 'text-ink', isLargeBodyFont = false, linkClassName = 'text-primary underline', LinkComponent = 'a', listClasses = 'text-ink', text, }) => {
+import { PsLinkedTextLinkRel } from '../constants/ps-linked-text-link-rel.js';
+import { PsPortableTextAutoLinkType } from '../constants/ps-portable-text-auto-link-type.js';
+import { PsPortableTextLinkClassName } from '../constants/ps-portable-text-link-class-name.js';
+import { PsPortableTextVariant } from '../constants/ps-portable-text-variant.js';
+import { PsTextWrapClassName } from '../constants/ps-text-wrap-class-name.js';
+import { PsPortableTextLinkService } from '../services/ps-portable-text-link-service.js';
+import { PsPortableTextMessage } from './ps-portable-text-message.js';
+export const PsPortableText = ({ bodyClasses = 'text-ink', containerClasses = '', containerStyles = {}, headerClasses = 'text-ink', imageLabels, isImagesShown = false, isLargeBodyFont = false, linkClassName, LinkComponent = 'a', listClasses = 'text-ink', text, variant = PsPortableTextVariant.Article, }) => {
+    if (variant === PsPortableTextVariant.Message)
+        return (_jsx(PsPortableTextMessage, { containerClasses: containerClasses, containerStyles: containerStyles, imageLabels: imageLabels, isImagesShown: isImagesShown, linkClassName: linkClassName, LinkComponent: LinkComponent, text: text }));
+    const articleLinkClassName = linkClassName === undefined ? PsPortableTextLinkClassName : linkClassName;
     const hasContainerStyles = Object.keys(containerStyles).length > 0;
     const getBodyClass = hasContainerStyles ? '' : bodyClasses;
     const getHeaderClass = hasContainerStyles ? '' : headerClasses;
     const getListClass = hasContainerStyles ? '' : listClasses;
     const components = {
         marks: {
+            [PsPortableTextAutoLinkType]: ({ children, value }) => (_jsx("a", { href: value.href, target: '_blank', rel: PsLinkedTextLinkRel, className: articleLinkClassName, children: children })),
             link: ({ children, value }) => {
                 const rel = !value.href.startsWith('/') ? 'noreferrer noopener' : undefined;
-                return (_jsx(LinkComponent, { href: value.href, rel: rel, className: linkClassName, "aria-label": value.children, children: children }));
+                return (_jsx(LinkComponent, { href: value.href, rel: rel, className: articleLinkClassName, "aria-label": value.children, children: children }));
             },
         },
         list: {
@@ -18,11 +29,11 @@ export const PsPortableText = ({ bodyClasses = 'text-ink', containerClasses = ''
             number: ({ children }) => _jsx("ol", { className: 'mb-3 mt-1 list-decimal ml-4', children: children }),
         },
         listItem: {
-            bullet: ({ children }) => (_jsx("li", { className: PallasoftClassNameService.merge('md:text-body-2 max-md:text-body-3', getListClass), children: children })),
-            number: ({ children }) => (_jsx("li", { className: PallasoftClassNameService.merge('md:text-body-2 max-md:text-body-3', getListClass), children: children })),
+            bullet: ({ children }) => (_jsx("li", { className: PallasoftClassNameService.merge('md:text-body-2 max-md:text-body-3', PsTextWrapClassName, getListClass), children: children })),
+            number: ({ children }) => (_jsx("li", { className: PallasoftClassNameService.merge('md:text-body-2 max-md:text-body-3', PsTextWrapClassName, getListClass), children: children })),
         },
         block: {
-            normal: ({ children }) => (_jsx("p", { className: PallasoftClassNameService.merge(isLargeBodyFont ? 'text-body-1' : 'text-body-2', 'whitespace-pre-line', getBodyClass), children: children })),
+            normal: ({ children }) => (_jsx("p", { className: PallasoftClassNameService.merge(isLargeBodyFont ? 'text-body-1' : 'text-body-2', 'whitespace-pre-line', PsTextWrapClassName, getBodyClass), children: children })),
             h2: ({ children }) => (_jsx("h2", { className: PallasoftClassNameService.merge('text-header-1 py-2', getHeaderClass), children: children })),
             h3: ({ children }) => (_jsx("h3", { className: PallasoftClassNameService.merge('text-header-2 py-2', getHeaderClass), children: children })),
             h4: ({ children }) => (_jsx("h4", { className: PallasoftClassNameService.merge('text-header-3 py-2', getHeaderClass), children: children })),
@@ -30,5 +41,5 @@ export const PsPortableText = ({ bodyClasses = 'text-ink', containerClasses = ''
             h6: ({ children }) => (_jsx("h6", { className: PallasoftClassNameService.merge('text-header-4 py-1', getHeaderClass), children: children })),
         },
     };
-    return (_jsx("div", { className: containerClasses, style: containerStyles, children: _jsx(Text, { value: text, components: components }) }));
+    return (_jsx("div", { className: containerClasses, style: containerStyles, children: _jsx(Text, { value: PsPortableTextLinkService.linkify(text), components: components }) }));
 };

package/dist/esm/constants/ps-linked-text-link-rel.js

@@ -0,0 +1 @@
+export const PsLinkedTextLinkRel = 'noopener noreferrer nofollow';

package/dist/esm/constants/ps-portable-text-auto-link-type.js

@@ -0,0 +1 @@
+export const PsPortableTextAutoLinkType = 'autoLink';

package/dist/esm/constants/ps-portable-text-link-class-name.js

@@ -0,0 +1 @@
+export const PsPortableTextLinkClassName = 'text-primary underline';

package/dist/esm/constants/ps-portable-text-message-config.js

@@ -0,0 +1,32 @@
+export const PsPortableTextMessageConfig = {
+    rootClassName: 'flex min-w-0 flex-col gap-3 text-sm leading-6 text-inherit [overflow-wrap:anywhere]',
+    paragraphClassName: 'whitespace-pre-line',
+    quoteClassName: 'whitespace-pre-line border-l-2 border-line pl-3 opacity-80',
+    linkClassName: 'underline underline-offset-2',
+    codeClassName: 'rounded bg-ink/10 px-1 font-mono text-[0.85em]',
+    bulletListClassName: 'flex list-disc flex-col gap-1 pl-5',
+    numberListClassName: 'flex list-decimal flex-col gap-1 pl-5',
+    listItemClassName: 'whitespace-pre-line',
+    defaultLabels: {
+        imageHidden: 'Image not shown',
+        imagesHidden: 'Images are hidden to protect your privacy.',
+        showImages: 'Show images',
+    },
+    imageBarClassName: 'flex flex-wrap items-center gap-x-2 gap-y-1 text-xs opacity-70',
+    placeholderClassName: 'flex min-h-10 items-center rounded-ps-control border border-dashed border-line px-3 py-2 text-xs opacity-70',
+    imageClassName: 'h-auto max-w-full rounded-ps-control border border-line',
+    headingClassNames: {
+        h1: 'mt-1 text-lg font-semibold leading-snug',
+        h2: 'mt-1 text-base font-semibold leading-snug',
+        h3: 'mt-1 text-sm font-semibold leading-snug',
+    },
+    linkRel: 'noopener noreferrer',
+    linkTarget: '_blank',
+    imageLoading: 'lazy',
+    imageDecoding: 'async',
+    imageReferrerPolicy: 'no-referrer',
+    imageType: 'image',
+    imageProtocolPattern: /^https?:\/\//i,
+    relativePrefix: '/',
+    protocolRelativePrefix: '//',
+};

package/dist/esm/constants/ps-portable-text-variant.js

@@ -0,0 +1,5 @@
+export var PsPortableTextVariant;
+(function (PsPortableTextVariant) {
+    PsPortableTextVariant["Article"] = "article";
+    PsPortableTextVariant["Message"] = "message";
+})(PsPortableTextVariant || (PsPortableTextVariant = {}));

package/dist/esm/constants/ps-text-link-gap.js

@@ -0,0 +1,4 @@
+export const PsTextLinkGap = {
+    text: ' ',
+    trailingSpacePattern: /\s$/,
+};

package/dist/esm/constants/ps-text-link-pattern-source.js

@@ -0,0 +1 @@
+export const PsTextLinkPatternSource = '<([^<>\\s]+)>|(https?:\\/\\/[^\\s<>]+)';

package/dist/esm/constants/ps-text-link-protocols.js

@@ -0,0 +1 @@
+export const PsTextLinkProtocols = ['http:', 'https:', 'mailto:'];

package/dist/esm/constants/ps-text-link-trailing-characters.js

@@ -0,0 +1 @@
+export const PsTextLinkTrailingCharacters = '.,;:!?)]}\'"';

package/dist/esm/constants/ps-text-wrap-class-name.js

@@ -0,0 +1 @@
+export const PsTextWrapClassName = '[overflow-wrap:anywhere]';

package/dist/esm/index.js

@@ -35,6 +35,17 @@ export * from './components/ps-list-tile.js';
 export * from './components/ps-metric-card.js';
 export * from './components/ps-pill.js';
 export * from './components/ps-portable-text.js';
+export * from './components/ps-portable-text-image.js';
+export * from './components/ps-portable-text-message.js';
+export * from './constants/ps-portable-text-variant.js';
+export * from './constants/ps-portable-text-message-config.js';
+export * from './models/ps-portable-text-image-data.js';
+export * from './models/ps-portable-text-image-labels.js';
+export * from './models/ps-portable-text-message-props.js';
+export * from './components/ps-linked-text.js';
+export * from './services/ps-text-link-service.js';
+export * from './models/ps-text-link-segment-data.js';
+export * from './constants/ps-portable-text-link-class-name.js';
 export * from './components/ps-reflective-app-shell.js';
 export * from './components/ps-scaled-preview.js';
 export * from './components/ps-navigation-progress.js';

package/dist/esm/models/ps-portable-text-image-data.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/ps-portable-text-image-labels.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/ps-portable-text-message-props.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/ps-text-link-segment-data.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/services/ps-portable-text-link-service.js

@@ -0,0 +1,72 @@
+import { PsPortableTextAutoLinkType } from '../constants/ps-portable-text-auto-link-type.js';
+import { PsPortableTextMessageConfig } from '../constants/ps-portable-text-message-config.js';
+import { PsTextLinkProtocols } from '../constants/ps-text-link-protocols.js';
+import { PsTextLinkService } from './ps-text-link-service.js';
+export class PsPortableTextLinkService {
+    static isSafeLink(href) {
+        if (href.startsWith(PsPortableTextMessageConfig.relativePrefix) &&
+            !href.startsWith(PsPortableTextMessageConfig.protocolRelativePrefix))
+            return true;
+        return URL.canParse(href) && PsTextLinkProtocols.includes(new URL(href).protocol);
+    }
+    static hasImages(blocks) {
+        return blocks.some((block) => block._type === PsPortableTextMessageConfig.imageType &&
+            'src' in block &&
+            typeof block.src === 'string' &&
+            PsPortableTextLinkService.isSafeImage(block.src));
+    }
+    static isSafeImage(src) {
+        return (PsPortableTextMessageConfig.imageProtocolPattern.test(src) &&
+            URL.canParse(src) &&
+            PsTextLinkProtocols.includes(new URL(src).protocol));
+    }
+    static linkify(blocks) {
+        return blocks.map((block) => (this.isBlock(block) ? this.linkifyBlock(block) : block));
+    }
+    static isBlock(value) {
+        return 'children' in value && Array.isArray(value.children);
+    }
+    static isSpan(value) {
+        return value._type === 'span' && 'text' in value && typeof value.text === 'string';
+    }
+    static linkifyBlock(block) {
+        const markDefs = block.markDefs === undefined ? [] : block.markDefs;
+        const added = [];
+        const children = [];
+        for (const child of block.children) {
+            if (!this.isSpan(child) || this.hasLinkMark(child, markDefs)) {
+                children.push(child);
+                continue;
+            }
+            const segments = PsTextLinkService.segments(child.text);
+            if (segments.length === 1 && segments[0].href === null) {
+                children.push(child);
+                continue;
+            }
+            const marks = child.marks === undefined ? [] : child.marks;
+            segments.forEach((segment, index) => {
+                const key = child._key === undefined ? undefined : `${child._key}-${index}`;
+                if (segment.href === null) {
+                    const plain = { ...child, _key: key, text: segment.text };
+                    children.push(plain);
+                    return;
+                }
+                const markKey = `${PsPortableTextAutoLinkType}-${added.length}`;
+                added.push({ _key: markKey, _type: PsPortableTextAutoLinkType, href: segment.href });
+                const linked = {
+                    ...child,
+                    _key: key,
+                    marks: [...marks, markKey],
+                    text: segment.text,
+                };
+                children.push(linked);
+            });
+        }
+        return { ...block, children, markDefs: [...markDefs, ...added] };
+    }
+    static hasLinkMark(span, markDefs) {
+        if (span.marks === undefined)
+            return false;
+        return span.marks.some((mark) => markDefs.some((definition) => definition._key === mark && definition._type === 'link'));
+    }
+}

package/dist/esm/services/ps-text-link-service.js

@@ -0,0 +1,72 @@
+import { PsTextLinkGap } from '../constants/ps-text-link-gap.js';
+import { PsTextLinkPatternSource } from '../constants/ps-text-link-pattern-source.js';
+import { PsTextLinkProtocols } from '../constants/ps-text-link-protocols.js';
+import { PsTextLinkTrailingCharacters } from '../constants/ps-text-link-trailing-characters.js';
+export class PsTextLinkService {
+    static segments(text) {
+        const segments = [];
+        const pattern = new RegExp(PsTextLinkPatternSource, 'g');
+        let cursor = 0;
+        let match = pattern.exec(text);
+        while (match !== null) {
+            this.pushText(segments, text.slice(cursor, match.index));
+            cursor = match.index + match[0].length;
+            if (match[1] !== undefined)
+                this.pushAngle(segments, match[0], match[1]);
+            else
+                this.pushBare(segments, match[2]);
+            match = pattern.exec(text);
+        }
+        this.pushText(segments, text.slice(cursor));
+        return segments;
+    }
+    static pushAngle(segments, raw, href) {
+        const url = this.parse(href);
+        if (url === null) {
+            this.pushText(segments, raw);
+            return;
+        }
+        const label = url.protocol === 'mailto:' ? url.pathname : url.hostname.replace(/^www\./, '');
+        if (label === '') {
+            this.pushText(segments, raw);
+            return;
+        }
+        this.separate(segments);
+        segments.push({ href, text: label });
+    }
+    static separate(segments) {
+        const last = segments[segments.length - 1];
+        if (last !== undefined &&
+            last.href === null &&
+            !PsTextLinkGap.trailingSpacePattern.test(last.text))
+            last.text += PsTextLinkGap.text;
+    }
+    static pushBare(segments, raw) {
+        let end = raw.length;
+        while (end > 0 && PsTextLinkTrailingCharacters.includes(raw.charAt(end - 1)))
+            end -= 1;
+        const href = raw.slice(0, end);
+        if (this.parse(href) === null) {
+            this.pushText(segments, raw);
+            return;
+        }
+        segments.push({ href, text: href });
+        this.pushText(segments, raw.slice(end));
+    }
+    static pushText(segments, text) {
+        if (text === '')
+            return;
+        const last = segments[segments.length - 1];
+        if (last !== undefined && last.href === null) {
+            last.text += text;
+            return;
+        }
+        segments.push({ href: null, text });
+    }
+    static parse(href) {
+        if (!URL.canParse(href))
+            return null;
+        const url = new URL(href);
+        return PsTextLinkProtocols.includes(url.protocol) ? url : null;
+    }
+}

package/dist/index.d.ts

@@ -35,6 +35,17 @@ export * from './components/ps-list-tile';
 export * from './components/ps-metric-card';
 export * from './components/ps-pill';
 export * from './components/ps-portable-text';
+export * from './components/ps-portable-text-image';
+export * from './components/ps-portable-text-message';
+export * from './constants/ps-portable-text-variant';
+export * from './constants/ps-portable-text-message-config';
+export * from './models/ps-portable-text-image-data';
+export * from './models/ps-portable-text-image-labels';
+export * from './models/ps-portable-text-message-props';
+export * from './components/ps-linked-text';
+export * from './services/ps-text-link-service';
+export * from './models/ps-text-link-segment-data';
+export * from './constants/ps-portable-text-link-class-name';
 export * from './components/ps-reflective-app-shell';
 export * from './components/ps-scaled-preview';
 export * from './components/ps-navigation-progress';

package/dist/index.js

@@ -51,6 +51,17 @@ __exportStar(require("./components/ps-list-tile"), exports);
 __exportStar(require("./components/ps-metric-card"), exports);
 __exportStar(require("./components/ps-pill"), exports);
 __exportStar(require("./components/ps-portable-text"), exports);
+__exportStar(require("./components/ps-portable-text-image"), exports);
+__exportStar(require("./components/ps-portable-text-message"), exports);
+__exportStar(require("./constants/ps-portable-text-variant"), exports);
+__exportStar(require("./constants/ps-portable-text-message-config"), exports);
+__exportStar(require("./models/ps-portable-text-image-data"), exports);
+__exportStar(require("./models/ps-portable-text-image-labels"), exports);
+__exportStar(require("./models/ps-portable-text-message-props"), exports);
+__exportStar(require("./components/ps-linked-text"), exports);
+__exportStar(require("./services/ps-text-link-service"), exports);
+__exportStar(require("./models/ps-text-link-segment-data"), exports);
+__exportStar(require("./constants/ps-portable-text-link-class-name"), exports);
 __exportStar(require("./components/ps-reflective-app-shell"), exports);
 __exportStar(require("./components/ps-scaled-preview"), exports);
 __exportStar(require("./components/ps-navigation-progress"), exports);

package/dist/models/ps-portable-text-image-data.d.ts

@@ -0,0 +1,5 @@
+export interface PsPortableTextImageData {
+    _type: 'image';
+    alt?: string;
+    src: string;
+}

package/dist/models/ps-portable-text-image-data.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/models/ps-portable-text-image-labels.d.ts

@@ -0,0 +1,5 @@
+export interface PsPortableTextImageLabels {
+    imageHidden: string;
+    imagesHidden: string;
+    showImages: string;
+}

package/dist/models/ps-portable-text-image-labels.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/models/ps-portable-text-message-props.d.ts

@@ -0,0 +1,19 @@
+import type { CSSProperties, ElementType, ReactNode } from 'react';
+import type { TypedObject } from '@portabletext/types';
+import type { PsPortableTextImageLabels } from './ps-portable-text-image-labels';
+export interface PsPortableTextMessageProps {
+    containerClasses: string;
+    imageLabels?: Partial<PsPortableTextImageLabels>;
+    isImagesShown: boolean;
+    containerStyles: CSSProperties;
+    linkClassName?: string;
+    LinkComponent: ElementType<{
+        'aria-label'?: string;
+        'children'?: ReactNode;
+        'className'?: string;
+        'href': string;
+        'rel'?: string;
+        'target'?: string;
+    }>;
+    text: TypedObject[];
+}

package/dist/models/ps-portable-text-message-props.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/models/ps-text-link-segment-data.d.ts

@@ -0,0 +1,4 @@
+export interface PsTextLinkSegmentData {
+    href: string | null;
+    text: string;
+}

package/dist/models/ps-text-link-segment-data.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/services/ps-portable-text-link-service.d.ts

@@ -0,0 +1,11 @@
+import type { TypedObject } from '@portabletext/types';
+export declare class PsPortableTextLinkService {
+    static isSafeLink(href: string): boolean;
+    static hasImages(blocks: TypedObject[]): boolean;
+    static isSafeImage(src: string): boolean;
+    static linkify(blocks: TypedObject[]): TypedObject[];
+    private static isBlock;
+    private static isSpan;
+    private static linkifyBlock;
+    private static hasLinkMark;
+}

package/dist/services/ps-portable-text-link-service.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsPortableTextLinkService = void 0;
+const ps_portable_text_auto_link_type_1 = require("../constants/ps-portable-text-auto-link-type");
+const ps_portable_text_message_config_1 = require("../constants/ps-portable-text-message-config");
+const ps_text_link_protocols_1 = require("../constants/ps-text-link-protocols");
+const ps_text_link_service_1 = require("./ps-text-link-service");
+class PsPortableTextLinkService {
+    static isSafeLink(href) {
+        if (href.startsWith(ps_portable_text_message_config_1.PsPortableTextMessageConfig.relativePrefix) &&
+            !href.startsWith(ps_portable_text_message_config_1.PsPortableTextMessageConfig.protocolRelativePrefix))
+            return true;
+        return URL.canParse(href) && ps_text_link_protocols_1.PsTextLinkProtocols.includes(new URL(href).protocol);
+    }
+    static hasImages(blocks) {
+        return blocks.some((block) => block._type === ps_portable_text_message_config_1.PsPortableTextMessageConfig.imageType &&
+            'src' in block &&
+            typeof block.src === 'string' &&
+            PsPortableTextLinkService.isSafeImage(block.src));
+    }
+    static isSafeImage(src) {
+        return (ps_portable_text_message_config_1.PsPortableTextMessageConfig.imageProtocolPattern.test(src) &&
+            URL.canParse(src) &&
+            ps_text_link_protocols_1.PsTextLinkProtocols.includes(new URL(src).protocol));
+    }
+    static linkify(blocks) {
+        return blocks.map((block) => (this.isBlock(block) ? this.linkifyBlock(block) : block));
+    }
+    static isBlock(value) {
+        return 'children' in value && Array.isArray(value.children);
+    }
+    static isSpan(value) {
+        return value._type === 'span' && 'text' in value && typeof value.text === 'string';
+    }
+    static linkifyBlock(block) {
+        const markDefs = block.markDefs === undefined ? [] : block.markDefs;
+        const added = [];
+        const children = [];
+        for (const child of block.children) {
+            if (!this.isSpan(child) || this.hasLinkMark(child, markDefs)) {
+                children.push(child);
+                continue;
+            }
+            const segments = ps_text_link_service_1.PsTextLinkService.segments(child.text);
+            if (segments.length === 1 && segments[0].href === null) {
+                children.push(child);
+                continue;
+            }
+            const marks = child.marks === undefined ? [] : child.marks;
+            segments.forEach((segment, index) => {
+                const key = child._key === undefined ? undefined : `${child._key}-${index}`;
+                if (segment.href === null) {
+                    const plain = { ...child, _key: key, text: segment.text };
+                    children.push(plain);
+                    return;
+                }
+                const markKey = `${ps_portable_text_auto_link_type_1.PsPortableTextAutoLinkType}-${added.length}`;
+                added.push({ _key: markKey, _type: ps_portable_text_auto_link_type_1.PsPortableTextAutoLinkType, href: segment.href });
+                const linked = {
+                    ...child,
+                    _key: key,
+                    marks: [...marks, markKey],
+                    text: segment.text,
+                };
+                children.push(linked);
+            });
+        }
+        return { ...block, children, markDefs: [...markDefs, ...added] };
+    }
+    static hasLinkMark(span, markDefs) {
+        if (span.marks === undefined)
+            return false;
+        return span.marks.some((mark) => markDefs.some((definition) => definition._key === mark && definition._type === 'link'));
+    }
+}
+exports.PsPortableTextLinkService = PsPortableTextLinkService;

package/dist/services/ps-text-link-service.d.ts

@@ -0,0 +1,9 @@
+import type { PsTextLinkSegmentData } from '../models/ps-text-link-segment-data';
+export declare class PsTextLinkService {
+    static segments(text: string): PsTextLinkSegmentData[];
+    private static pushAngle;
+    private static separate;
+    private static pushBare;
+    private static pushText;
+    private static parse;
+}

package/dist/services/ps-text-link-service.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTextLinkService = void 0;
+const ps_text_link_gap_1 = require("../constants/ps-text-link-gap");
+const ps_text_link_pattern_source_1 = require("../constants/ps-text-link-pattern-source");
+const ps_text_link_protocols_1 = require("../constants/ps-text-link-protocols");
+const ps_text_link_trailing_characters_1 = require("../constants/ps-text-link-trailing-characters");
+class PsTextLinkService {
+    static segments(text) {
+        const segments = [];
+        const pattern = new RegExp(ps_text_link_pattern_source_1.PsTextLinkPatternSource, 'g');
+        let cursor = 0;
+        let match = pattern.exec(text);
+        while (match !== null) {
+            this.pushText(segments, text.slice(cursor, match.index));
+            cursor = match.index + match[0].length;
+            if (match[1] !== undefined)
+                this.pushAngle(segments, match[0], match[1]);
+            else
+                this.pushBare(segments, match[2]);
+            match = pattern.exec(text);
+        }
+        this.pushText(segments, text.slice(cursor));
+        return segments;
+    }
+    static pushAngle(segments, raw, href) {
+        const url = this.parse(href);
+        if (url === null) {
+            this.pushText(segments, raw);
+            return;
+        }
+        const label = url.protocol === 'mailto:' ? url.pathname : url.hostname.replace(/^www\./, '');
+        if (label === '') {
+            this.pushText(segments, raw);
+            return;
+        }
+        this.separate(segments);
+        segments.push({ href, text: label });
+    }
+    static separate(segments) {
+        const last = segments[segments.length - 1];
+        if (last !== undefined &&
+            last.href === null &&
+            !ps_text_link_gap_1.PsTextLinkGap.trailingSpacePattern.test(last.text))
+            last.text += ps_text_link_gap_1.PsTextLinkGap.text;
+    }
+    static pushBare(segments, raw) {
+        let end = raw.length;
+        while (end > 0 && ps_text_link_trailing_characters_1.PsTextLinkTrailingCharacters.includes(raw.charAt(end - 1)))
+            end -= 1;
+        const href = raw.slice(0, end);
+        if (this.parse(href) === null) {
+            this.pushText(segments, raw);
+            return;
+        }
+        segments.push({ href, text: href });
+        this.pushText(segments, raw.slice(end));
+    }
+    static pushText(segments, text) {
+        if (text === '')
+            return;
+        const last = segments[segments.length - 1];
+        if (last !== undefined && last.href === null) {
+            last.text += text;
+            return;
+        }
+        segments.push({ href: null, text });
+    }
+    static parse(href) {
+        if (!URL.canParse(href))
+            return null;
+        const url = new URL(href);
+        return ps_text_link_protocols_1.PsTextLinkProtocols.includes(url.protocol) ? url : null;
+    }
+}
+exports.PsTextLinkService = PsTextLinkService;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-core-components",
-	"version": "2.40.0",
+	"version": "2.42.0",
 	"private": false,
 	"main": "./dist/index.js",
 	"module": "./dist/esm/index.js",
@@ -48,7 +48,7 @@
 		"@dnd-kit/utilities": "^3.2.2",
 		"@pallasoft/ps-icons": "^1.5.4",
 		"@pallasoft/ps-motion-components": "^1.2.2",
-		"@pallasoft/ps-utilities": "^2.12.0",
+		"@pallasoft/ps-utilities": "^2.23.0",
 		"@portabletext/react": "^3.2.4",
 		"@portabletext/types": "^2.0.13",
 		"@radix-ui/react-accordion": "^1.2.12",