@pallasoft/ps-input-components 1.21.0 → 1.22.0

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

@@ -0,0 +1,12 @@
+import { type PortableTextBlock } from '@portabletext/editor';
+import type { PsPortableTextEditorLabels } from '../interfaces/ps-portable-text-editor-labels';
+export interface PsPortableTextEditorProps {
+    className?: string;
+    disabled?: boolean;
+    labels?: PsPortableTextEditorLabels;
+    minRows?: number;
+    onChange: (value: PortableTextBlock[]) => void;
+    placeholder?: string;
+    value: PortableTextBlock[];
+}
+export declare const PsPortableTextEditor: ({ className, disabled, labels, minRows, onChange, placeholder, value, }: PsPortableTextEditorProps) => import("react").JSX.Element;

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

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsPortableTextEditor = 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 editor_1 = require("@portabletext/editor");
+const plugins_1 = require("@portabletext/editor/plugins");
+const ps_portable_text_editor_config_1 = require("../constants/ps-portable-text-editor-config");
+const ps_portable_text_editor_renderers_1 = require("../constants/ps-portable-text-editor-renderers");
+const ps_portable_text_editor_service_1 = require("../services/ps-portable-text-editor-service");
+const ps_portable_text_toolbar_1 = require("./ps-portable-text-toolbar");
+const PsPortableTextEditor = ({ className, disabled = false, labels = ps_portable_text_editor_config_1.PsPortableTextEditorConfig.labels, minRows = 4, onChange, placeholder, value, }) => {
+    const [isMounted, setIsMounted] = (0, react_1.useState)(false);
+    const [version, setVersion] = (0, react_1.useState)(0);
+    const lastValue = (0, react_1.useRef)(value);
+    (0, react_1.useEffect)(() => {
+        setIsMounted(true);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (ps_portable_text_editor_service_1.PsPortableTextEditorService.isSame(value, lastValue.current))
+            return;
+        lastValue.current = value;
+        setVersion((current) => current + 1);
+    }, [value]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: ps_design_system_1.PallasoftClassNameService.merge(ps_portable_text_editor_config_1.PsPortableTextEditorConfig.classNames.root, className), children: isMounted ? ((0, jsx_runtime_1.jsxs)(editor_1.EditorProvider, { initialConfig: {
+                initialValue: value,
+                readOnly: disabled,
+                schemaDefinition: ps_portable_text_editor_config_1.PsPortableTextEditorConfig.schemaDefinition,
+            }, children: [(0, jsx_runtime_1.jsx)(plugins_1.EventListenerPlugin, { on: (event) => {
+                        if (event.type !== 'mutation')
+                            return;
+                        const next = Array.isArray(event.value) ? event.value : [];
+                        lastValue.current = next;
+                        onChange(next);
+                    } }), (0, jsx_runtime_1.jsx)(ps_portable_text_toolbar_1.PsPortableTextToolbar, { disabled: disabled, labels: labels }), (0, jsx_runtime_1.jsx)(editor_1.PortableTextEditable, { ...ps_portable_text_editor_renderers_1.PsPortableTextEditorRenderers, className: ps_portable_text_editor_config_1.PsPortableTextEditorConfig.classNames.editable, readOnly: disabled, renderPlaceholder: () => (0, jsx_runtime_1.jsx)("span", { className: 'text-ink/45', children: placeholder }), style: { minHeight: ps_portable_text_editor_service_1.PsPortableTextEditorService.minHeight(minRows) } })] }, version)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { "aria-hidden": 'true', className: ps_portable_text_editor_config_1.PsPortableTextEditorConfig.classNames.toolbar, children: (0, jsx_runtime_1.jsx)("span", { className: 'h-9' }) }), (0, jsx_runtime_1.jsx)("div", { "aria-hidden": 'true', className: ps_portable_text_editor_config_1.PsPortableTextEditorConfig.classNames.editable, style: { minHeight: ps_portable_text_editor_service_1.PsPortableTextEditorService.minHeight(minRows) } })] })) }));
+};
+exports.PsPortableTextEditor = PsPortableTextEditor;

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

@@ -0,0 +1,8 @@
+import type { PsPortableTextEditorLabels } from '../interfaces/ps-portable-text-editor-labels';
+export interface PsPortableTextLinkDialogProps {
+    isOpen: boolean;
+    labels: PsPortableTextEditorLabels;
+    onClose: () => void;
+    onSubmit: (href: string) => void;
+}
+export declare const PsPortableTextLinkDialog: ({ isOpen, labels, onClose, onSubmit, }: PsPortableTextLinkDialogProps) => import("react").JSX.Element;

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

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsPortableTextLinkDialog = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ps_popovers_1 = require("@pallasoft/ps-popovers");
+const ps_portable_text_editor_config_1 = require("../constants/ps-portable-text-editor-config");
+const ps_portable_text_editor_service_1 = require("../services/ps-portable-text-editor-service");
+const ps_url_input_1 = require("./ps-url-input");
+const PsPortableTextLinkDialog = ({ isOpen, labels, onClose, onSubmit, }) => {
+    const [address, setAddress] = (0, react_1.useState)('');
+    const [hasError, setHasError] = (0, react_1.useState)(false);
+    const close = () => {
+        setAddress('');
+        setHasError(false);
+        onClose();
+    };
+    const submit = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const href = ps_portable_text_editor_service_1.PsPortableTextEditorService.normalizeLink(address);
+        if (href === null) {
+            setHasError(true);
+            return;
+        }
+        setAddress('');
+        setHasError(false);
+        onSubmit(href);
+    };
+    return ((0, jsx_runtime_1.jsx)(ps_popovers_1.PsFormModal, { cancelLabel: labels.cancel, isOpen: isOpen, isSubmitDisabled: address.trim() === '', onClose: close, onSubmit: submit, size: 'sm', submitLabel: labels.saveLink, title: labels.linkDialogTitle, children: (0, jsx_runtime_1.jsx)(ps_url_input_1.PsUrlInput, { "aria-invalid": hasError, autoFocus: true, helperText: hasError ? labels.invalidLink : undefined, label: labels.linkUrl, name: ps_portable_text_editor_config_1.PsPortableTextEditorConfig.linkAnnotation, onChange: (event) => {
+                setAddress(event.target.value);
+                setHasError(false);
+            }, value: address }) }));
+};
+exports.PsPortableTextLinkDialog = PsPortableTextLinkDialog;

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

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+export interface PsPortableTextToolbarButtonProps {
+    children: ReactNode;
+    className?: string;
+    disabled: boolean;
+    isActive: boolean;
+    label: string;
+    onClick: () => void;
+}
+export declare const PsPortableTextToolbarButton: ({ children, className, disabled, isActive, label, onClick, }: PsPortableTextToolbarButtonProps) => import("react").JSX.Element;

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsPortableTextToolbarButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_portable_text_editor_config_1 = require("../constants/ps-portable-text-editor-config");
+const PsPortableTextToolbarButton = ({ children, className, disabled, isActive, label, onClick, }) => ((0, jsx_runtime_1.jsx)("button", { "aria-label": label, "aria-pressed": isActive, className: ps_design_system_1.PallasoftClassNameService.merge(ps_portable_text_editor_config_1.PsPortableTextEditorConfig.classNames.button, isActive ? ps_portable_text_editor_config_1.PsPortableTextEditorConfig.classNames.buttonActive : '', className), disabled: disabled, onClick: onClick, onMouseDown: (event) => event.preventDefault(), title: label, type: 'button', children: children }));
+exports.PsPortableTextToolbarButton = PsPortableTextToolbarButton;

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

@@ -0,0 +1,6 @@
+import type { PsPortableTextEditorLabels } from '../interfaces/ps-portable-text-editor-labels';
+export interface PsPortableTextToolbarProps {
+    disabled: boolean;
+    labels: PsPortableTextEditorLabels;
+}
+export declare const PsPortableTextToolbar: ({ disabled, labels }: PsPortableTextToolbarProps) => import("react").JSX.Element;

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

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsPortableTextToolbar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const editor_1 = require("@portabletext/editor");
+const selectors_1 = require("@portabletext/editor/selectors");
+const ps_portable_text_editor_config_1 = require("../constants/ps-portable-text-editor-config");
+const ps_portable_text_link_dialog_1 = require("./ps-portable-text-link-dialog");
+const ps_portable_text_toolbar_button_1 = require("./ps-portable-text-toolbar-button");
+const DecoratorButton = ({ children, className, decorator, disabled, label, }) => {
+    const editor = (0, editor_1.useEditor)();
+    const isActive = (0, editor_1.useEditorSelector)(editor, (0, selectors_1.isActiveDecorator)(decorator));
+    return ((0, jsx_runtime_1.jsx)(ps_portable_text_toolbar_button_1.PsPortableTextToolbarButton, { className: className, disabled: disabled, isActive: isActive, label: label, onClick: () => {
+            editor.send({ type: 'decorator.toggle', decorator });
+            editor.send({ type: 'focus' });
+        }, children: children }));
+};
+const ListButton = ({ children, disabled, label, listItem, }) => {
+    const editor = (0, editor_1.useEditor)();
+    const isActive = (0, editor_1.useEditorSelector)(editor, (0, selectors_1.isActiveListItem)(listItem));
+    return ((0, jsx_runtime_1.jsx)(ps_portable_text_toolbar_button_1.PsPortableTextToolbarButton, { disabled: disabled, isActive: isActive, label: label, onClick: () => {
+            editor.send({ type: 'list item.toggle', listItem });
+            editor.send({ type: 'focus' });
+        }, children: children }));
+};
+const QuoteButton = ({ children, disabled, label }) => {
+    const editor = (0, editor_1.useEditor)();
+    const isActive = (0, editor_1.useEditorSelector)(editor, (0, selectors_1.isActiveStyle)(ps_portable_text_editor_config_1.PsPortableTextEditorConfig.styles.blockquote));
+    return ((0, jsx_runtime_1.jsx)(ps_portable_text_toolbar_button_1.PsPortableTextToolbarButton, { disabled: disabled, isActive: isActive, label: label, onClick: () => {
+            editor.send({ type: 'style.toggle', style: ps_portable_text_editor_config_1.PsPortableTextEditorConfig.styles.blockquote });
+            editor.send({ type: 'focus' });
+        }, children: children }));
+};
+const LinkButton = ({ disabled, labels }) => {
+    const editor = (0, editor_1.useEditor)();
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const isActive = (0, editor_1.useEditorSelector)(editor, (0, selectors_1.isActiveAnnotation)(ps_portable_text_editor_config_1.PsPortableTextEditorConfig.linkAnnotation));
+    const close = () => {
+        setIsOpen(false);
+        editor.send({ type: 'focus' });
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ps_portable_text_toolbar_button_1.PsPortableTextToolbarButton, { disabled: disabled, isActive: isActive, label: isActive ? labels.removeLink : labels.link, onClick: () => {
+                    if (isActive) {
+                        editor.send({
+                            type: 'annotation.remove',
+                            annotation: { name: ps_portable_text_editor_config_1.PsPortableTextEditorConfig.linkAnnotation },
+                        });
+                        editor.send({ type: 'focus' });
+                        return;
+                    }
+                    setIsOpen(true);
+                }, children: (0, jsx_runtime_1.jsx)("span", { className: 'underline', children: labels.link }) }), (0, jsx_runtime_1.jsx)(ps_portable_text_link_dialog_1.PsPortableTextLinkDialog, { isOpen: isOpen, labels: labels, onClose: close, onSubmit: (href) => {
+                    editor.send({
+                        type: 'annotation.add',
+                        annotation: { name: ps_portable_text_editor_config_1.PsPortableTextEditorConfig.linkAnnotation, value: { href } },
+                    });
+                    close();
+                } })] }));
+};
+const PsPortableTextToolbar = ({ disabled, labels }) => ((0, jsx_runtime_1.jsxs)("div", { "aria-label": labels.toolbar, className: ps_portable_text_editor_config_1.PsPortableTextEditorConfig.classNames.toolbar, role: 'toolbar', children: [(0, jsx_runtime_1.jsx)(DecoratorButton, { className: 'font-bold', decorator: ps_portable_text_editor_config_1.PsPortableTextEditorConfig.decorators.bold, disabled: disabled, label: labels.bold, children: "B" }), (0, jsx_runtime_1.jsx)(DecoratorButton, { className: 'italic', decorator: ps_portable_text_editor_config_1.PsPortableTextEditorConfig.decorators.italic, disabled: disabled, label: labels.italic, children: "I" }), (0, jsx_runtime_1.jsx)(DecoratorButton, { className: 'underline', decorator: ps_portable_text_editor_config_1.PsPortableTextEditorConfig.decorators.underline, disabled: disabled, label: labels.underline, children: "U" }), (0, jsx_runtime_1.jsx)(DecoratorButton, { className: 'font-mono', decorator: ps_portable_text_editor_config_1.PsPortableTextEditorConfig.decorators.code, disabled: disabled, label: labels.code, children: '</>' }), (0, jsx_runtime_1.jsx)(LinkButton, { disabled: disabled, labels: labels }), (0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true', className: ps_portable_text_editor_config_1.PsPortableTextEditorConfig.classNames.separator }), (0, jsx_runtime_1.jsx)(ListButton, { disabled: disabled, label: labels.bulletedList, listItem: ps_portable_text_editor_config_1.PsPortableTextEditorConfig.listItems.bullet, children: "\u2022" }), (0, jsx_runtime_1.jsx)(ListButton, { disabled: disabled, label: labels.numberedList, listItem: ps_portable_text_editor_config_1.PsPortableTextEditorConfig.listItems.number, children: "1." }), (0, jsx_runtime_1.jsx)(QuoteButton, { disabled: disabled, label: labels.quote, children: "\u201D" })] }));
+exports.PsPortableTextToolbar = PsPortableTextToolbar;

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

@@ -0,0 +1,65 @@
+export declare const PsPortableTextEditorConfig: {
+    readonly linkAnnotation: "link";
+    readonly mailtoPrefix: "mailto:";
+    readonly emailPattern: RegExp;
+    readonly lineHeightRem: 1.5;
+    readonly decorators: {
+        readonly bold: "strong";
+        readonly code: "code";
+        readonly italic: "em";
+        readonly underline: "underline";
+    };
+    readonly styles: {
+        readonly blockquote: "blockquote";
+        readonly normal: "normal";
+    };
+    readonly listItems: {
+        readonly bullet: "bullet";
+        readonly number: "number";
+    };
+    readonly schemaDefinition: {
+        readonly annotations: readonly [{
+            readonly name: "link";
+            readonly fields: readonly [{
+                readonly name: "href";
+                readonly type: "string";
+            }];
+        }];
+        readonly blockObjects: readonly [];
+        readonly decorators: {
+            name: "code" | "em" | "strong" | "underline";
+        }[];
+        readonly inlineObjects: readonly [];
+        readonly lists: {
+            name: "number" | "bullet";
+        }[];
+        readonly styles: {
+            name: "blockquote" | "normal";
+        }[];
+    };
+    readonly labels: {
+        bold: string;
+        bulletedList: string;
+        cancel: string;
+        code: string;
+        invalidLink: string;
+        italic: string;
+        link: string;
+        linkDialogTitle: string;
+        linkUrl: string;
+        numberedList: string;
+        quote: string;
+        removeLink: string;
+        saveLink: string;
+        toolbar: string;
+        underline: string;
+    };
+    readonly classNames: {
+        readonly editable: "ps-input-control w-full resize-none overflow-y-auto rounded-t-none border-t-0 leading-6 outline-none";
+        readonly root: "block";
+        readonly toolbar: "flex flex-wrap items-center gap-1 rounded-t-xl border border-line bg-white p-1 dark:bg-transparent";
+        readonly button: "ps-focus-ring inline-flex h-9 min-w-9 items-center justify-center rounded-lg px-2 text-sm text-ink/70 transition-colors hover:bg-ink/5 hover:text-ink disabled:cursor-not-allowed disabled:opacity-40";
+        readonly buttonActive: "bg-primary text-white hover:bg-primary hover:text-white";
+        readonly separator: "mx-1 h-5 w-px bg-line";
+    };
+};

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

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsPortableTextEditorConfig = void 0;
+const ps_models_1 = require("@pallasoft/ps-models");
+const editor_1 = require("@portabletext/editor");
+const Models = ps_models_1.Common.PortableTextConfig;
+exports.PsPortableTextEditorConfig = {
+    linkAnnotation: Models.linkType,
+    mailtoPrefix: 'mailto:',
+    emailPattern: /^[^\s@/:]+@[^\s@/:]+\.[^\s@/:]+$/,
+    lineHeightRem: 1.5,
+    decorators: {
+        bold: Models.decorators[0],
+        code: Models.decorators[3],
+        italic: Models.decorators[1],
+        underline: Models.decorators[2],
+    },
+    styles: { blockquote: Models.styles[1], normal: Models.styles[0] },
+    listItems: { bullet: Models.listItems[0], number: Models.listItems[1] },
+    schemaDefinition: (0, editor_1.defineSchema)({
+        annotations: [{ name: Models.linkType, fields: [{ name: 'href', type: 'string' }] }],
+        blockObjects: [],
+        decorators: Models.decorators.map((name) => ({ name })),
+        inlineObjects: [],
+        lists: Models.listItems.map((name) => ({ name })),
+        styles: Models.styles.map((name) => ({ name })),
+    }),
+    labels: {
+        bold: 'Bold',
+        bulletedList: 'Bulleted list',
+        cancel: 'Cancel',
+        code: 'Code',
+        invalidLink: 'Enter a web address or email address',
+        italic: 'Italic',
+        link: 'Link',
+        linkDialogTitle: 'Link',
+        linkUrl: 'Address',
+        numberedList: 'Numbered list',
+        quote: 'Quote',
+        removeLink: 'Remove link',
+        saveLink: 'Save',
+        toolbar: 'Formatting',
+        underline: 'Underline',
+    },
+    classNames: {
+        editable: 'ps-input-control w-full resize-none overflow-y-auto rounded-t-none border-t-0 leading-6 outline-none',
+        root: 'block',
+        toolbar: 'flex flex-wrap items-center gap-1 rounded-t-xl border border-line bg-white p-1 dark:bg-transparent',
+        button: 'ps-focus-ring inline-flex h-9 min-w-9 items-center justify-center rounded-lg px-2 text-sm text-ink/70 transition-colors hover:bg-ink/5 hover:text-ink disabled:cursor-not-allowed disabled:opacity-40',
+        buttonActive: 'bg-primary text-white hover:bg-primary hover:text-white',
+        separator: 'mx-1 h-5 w-px bg-line',
+    },
+};

package/dist/constants/ps-portable-text-editor-renderers.d.ts

@@ -0,0 +1,6 @@
+import type { BlockAnnotationRenderProps, BlockDecoratorRenderProps, BlockRenderProps } from '@portabletext/editor';
+export declare const PsPortableTextEditorRenderers: {
+    renderBlock: ({ children, listItem, style }: BlockRenderProps) => import("react").JSX.Element;
+    renderDecorator: ({ children, value }: BlockDecoratorRenderProps) => import("react").JSX.Element;
+    renderAnnotation: ({ children }: BlockAnnotationRenderProps) => import("react").JSX.Element;
+};

package/dist/constants/ps-portable-text-editor-renderers.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsPortableTextEditorRenderers = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_portable_text_editor_config_1 = require("./ps-portable-text-editor-config");
+exports.PsPortableTextEditorRenderers = {
+    renderBlock: ({ children, listItem, style }) => {
+        if (listItem === ps_portable_text_editor_config_1.PsPortableTextEditorConfig.listItems.bullet) {
+            return ((0, jsx_runtime_1.jsx)("div", { className: "relative pl-6 before:absolute before:left-1 before:content-['\u2022']", children: children }));
+        }
+        if (listItem === ps_portable_text_editor_config_1.PsPortableTextEditorConfig.listItems.number) {
+            return ((0, jsx_runtime_1.jsx)("div", { className: "relative pl-6 before:absolute before:left-0 before:content-[counter(ps-list)'.']", style: { counterIncrement: 'ps-list' }, children: children }));
+        }
+        if (style === ps_portable_text_editor_config_1.PsPortableTextEditorConfig.styles.blockquote) {
+            return ((0, jsx_runtime_1.jsx)("div", { className: 'border-l-2 border-primary pl-3 text-ink/80', style: { counterReset: 'ps-list' }, children: children }));
+        }
+        return (0, jsx_runtime_1.jsx)("div", { style: { counterReset: 'ps-list' }, children: children });
+    },
+    renderDecorator: ({ children, value }) => {
+        if (value === ps_portable_text_editor_config_1.PsPortableTextEditorConfig.decorators.bold)
+            return (0, jsx_runtime_1.jsx)("strong", { children: children });
+        if (value === ps_portable_text_editor_config_1.PsPortableTextEditorConfig.decorators.italic)
+            return (0, jsx_runtime_1.jsx)("em", { children: children });
+        if (value === ps_portable_text_editor_config_1.PsPortableTextEditorConfig.decorators.underline)
+            return (0, jsx_runtime_1.jsx)("u", { children: children });
+        if (value === ps_portable_text_editor_config_1.PsPortableTextEditorConfig.decorators.code) {
+            return (0, jsx_runtime_1.jsx)("code", { className: 'rounded bg-ink/10 px-1 font-mono text-[0.9em]', children: children });
+        }
+        return children;
+    },
+    renderAnnotation: ({ children }) => ((0, jsx_runtime_1.jsx)("span", { className: 'text-primary underline', children: children })),
+};

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { EditorProvider, PortableTextEditable } from '@portabletext/editor';
+import { EventListenerPlugin } from '@portabletext/editor/plugins';
+import { PsPortableTextEditorConfig } from '../constants/ps-portable-text-editor-config';
+import { PsPortableTextEditorRenderers } from '../constants/ps-portable-text-editor-renderers';
+import { PsPortableTextEditorService } from '../services/ps-portable-text-editor-service';
+import { PsPortableTextToolbar } from './ps-portable-text-toolbar';
+export const PsPortableTextEditor = ({ className, disabled = false, labels = PsPortableTextEditorConfig.labels, minRows = 4, onChange, placeholder, value, }) => {
+    const [isMounted, setIsMounted] = useState(false);
+    const [version, setVersion] = useState(0);
+    const lastValue = useRef(value);
+    useEffect(() => {
+        setIsMounted(true);
+    }, []);
+    useEffect(() => {
+        if (PsPortableTextEditorService.isSame(value, lastValue.current))
+            return;
+        lastValue.current = value;
+        setVersion((current) => current + 1);
+    }, [value]);
+    return (_jsx("div", { className: PallasoftClassNameService.merge(PsPortableTextEditorConfig.classNames.root, className), children: isMounted ? (_jsxs(EditorProvider, { initialConfig: {
+                initialValue: value,
+                readOnly: disabled,
+                schemaDefinition: PsPortableTextEditorConfig.schemaDefinition,
+            }, children: [_jsx(EventListenerPlugin, { on: (event) => {
+                        if (event.type !== 'mutation')
+                            return;
+                        const next = Array.isArray(event.value) ? event.value : [];
+                        lastValue.current = next;
+                        onChange(next);
+                    } }), _jsx(PsPortableTextToolbar, { disabled: disabled, labels: labels }), _jsx(PortableTextEditable, { ...PsPortableTextEditorRenderers, className: PsPortableTextEditorConfig.classNames.editable, readOnly: disabled, renderPlaceholder: () => _jsx("span", { className: 'text-ink/45', children: placeholder }), style: { minHeight: PsPortableTextEditorService.minHeight(minRows) } })] }, version)) : (_jsxs(_Fragment, { children: [_jsx("div", { "aria-hidden": 'true', className: PsPortableTextEditorConfig.classNames.toolbar, children: _jsx("span", { className: 'h-9' }) }), _jsx("div", { "aria-hidden": 'true', className: PsPortableTextEditorConfig.classNames.editable, style: { minHeight: PsPortableTextEditorService.minHeight(minRows) } })] })) }));
+};

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

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { PsFormModal } from '@pallasoft/ps-popovers';
+import { PsPortableTextEditorConfig } from '../constants/ps-portable-text-editor-config';
+import { PsPortableTextEditorService } from '../services/ps-portable-text-editor-service';
+import { PsUrlInput } from './ps-url-input';
+export const PsPortableTextLinkDialog = ({ isOpen, labels, onClose, onSubmit, }) => {
+    const [address, setAddress] = useState('');
+    const [hasError, setHasError] = useState(false);
+    const close = () => {
+        setAddress('');
+        setHasError(false);
+        onClose();
+    };
+    const submit = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const href = PsPortableTextEditorService.normalizeLink(address);
+        if (href === null) {
+            setHasError(true);
+            return;
+        }
+        setAddress('');
+        setHasError(false);
+        onSubmit(href);
+    };
+    return (_jsx(PsFormModal, { cancelLabel: labels.cancel, isOpen: isOpen, isSubmitDisabled: address.trim() === '', onClose: close, onSubmit: submit, size: 'sm', submitLabel: labels.saveLink, title: labels.linkDialogTitle, children: _jsx(PsUrlInput, { "aria-invalid": hasError, autoFocus: true, helperText: hasError ? labels.invalidLink : undefined, label: labels.linkUrl, name: PsPortableTextEditorConfig.linkAnnotation, onChange: (event) => {
+                setAddress(event.target.value);
+                setHasError(false);
+            }, value: address }) }));
+};

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsPortableTextEditorConfig } from '../constants/ps-portable-text-editor-config';
+export const PsPortableTextToolbarButton = ({ children, className, disabled, isActive, label, onClick, }) => (_jsx("button", { "aria-label": label, "aria-pressed": isActive, className: PallasoftClassNameService.merge(PsPortableTextEditorConfig.classNames.button, isActive ? PsPortableTextEditorConfig.classNames.buttonActive : '', className), disabled: disabled, onClick: onClick, onMouseDown: (event) => event.preventDefault(), title: label, type: 'button', children: children }));

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

@@ -0,0 +1,58 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useEditor, useEditorSelector } from '@portabletext/editor';
+import { isActiveAnnotation, isActiveDecorator, isActiveListItem, isActiveStyle, } from '@portabletext/editor/selectors';
+import { PsPortableTextEditorConfig } from '../constants/ps-portable-text-editor-config';
+import { PsPortableTextLinkDialog } from './ps-portable-text-link-dialog';
+import { PsPortableTextToolbarButton } from './ps-portable-text-toolbar-button';
+const DecoratorButton = ({ children, className, decorator, disabled, label, }) => {
+    const editor = useEditor();
+    const isActive = useEditorSelector(editor, isActiveDecorator(decorator));
+    return (_jsx(PsPortableTextToolbarButton, { className: className, disabled: disabled, isActive: isActive, label: label, onClick: () => {
+            editor.send({ type: 'decorator.toggle', decorator });
+            editor.send({ type: 'focus' });
+        }, children: children }));
+};
+const ListButton = ({ children, disabled, label, listItem, }) => {
+    const editor = useEditor();
+    const isActive = useEditorSelector(editor, isActiveListItem(listItem));
+    return (_jsx(PsPortableTextToolbarButton, { disabled: disabled, isActive: isActive, label: label, onClick: () => {
+            editor.send({ type: 'list item.toggle', listItem });
+            editor.send({ type: 'focus' });
+        }, children: children }));
+};
+const QuoteButton = ({ children, disabled, label }) => {
+    const editor = useEditor();
+    const isActive = useEditorSelector(editor, isActiveStyle(PsPortableTextEditorConfig.styles.blockquote));
+    return (_jsx(PsPortableTextToolbarButton, { disabled: disabled, isActive: isActive, label: label, onClick: () => {
+            editor.send({ type: 'style.toggle', style: PsPortableTextEditorConfig.styles.blockquote });
+            editor.send({ type: 'focus' });
+        }, children: children }));
+};
+const LinkButton = ({ disabled, labels }) => {
+    const editor = useEditor();
+    const [isOpen, setIsOpen] = useState(false);
+    const isActive = useEditorSelector(editor, isActiveAnnotation(PsPortableTextEditorConfig.linkAnnotation));
+    const close = () => {
+        setIsOpen(false);
+        editor.send({ type: 'focus' });
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(PsPortableTextToolbarButton, { disabled: disabled, isActive: isActive, label: isActive ? labels.removeLink : labels.link, onClick: () => {
+                    if (isActive) {
+                        editor.send({
+                            type: 'annotation.remove',
+                            annotation: { name: PsPortableTextEditorConfig.linkAnnotation },
+                        });
+                        editor.send({ type: 'focus' });
+                        return;
+                    }
+                    setIsOpen(true);
+                }, children: _jsx("span", { className: 'underline', children: labels.link }) }), _jsx(PsPortableTextLinkDialog, { isOpen: isOpen, labels: labels, onClose: close, onSubmit: (href) => {
+                    editor.send({
+                        type: 'annotation.add',
+                        annotation: { name: PsPortableTextEditorConfig.linkAnnotation, value: { href } },
+                    });
+                    close();
+                } })] }));
+};
+export const PsPortableTextToolbar = ({ disabled, labels }) => (_jsxs("div", { "aria-label": labels.toolbar, className: PsPortableTextEditorConfig.classNames.toolbar, role: 'toolbar', children: [_jsx(DecoratorButton, { className: 'font-bold', decorator: PsPortableTextEditorConfig.decorators.bold, disabled: disabled, label: labels.bold, children: "B" }), _jsx(DecoratorButton, { className: 'italic', decorator: PsPortableTextEditorConfig.decorators.italic, disabled: disabled, label: labels.italic, children: "I" }), _jsx(DecoratorButton, { className: 'underline', decorator: PsPortableTextEditorConfig.decorators.underline, disabled: disabled, label: labels.underline, children: "U" }), _jsx(DecoratorButton, { className: 'font-mono', decorator: PsPortableTextEditorConfig.decorators.code, disabled: disabled, label: labels.code, children: '</>' }), _jsx(LinkButton, { disabled: disabled, labels: labels }), _jsx("span", { "aria-hidden": 'true', className: PsPortableTextEditorConfig.classNames.separator }), _jsx(ListButton, { disabled: disabled, label: labels.bulletedList, listItem: PsPortableTextEditorConfig.listItems.bullet, children: "\u2022" }), _jsx(ListButton, { disabled: disabled, label: labels.numberedList, listItem: PsPortableTextEditorConfig.listItems.number, children: "1." }), _jsx(QuoteButton, { disabled: disabled, label: labels.quote, children: "\u201D" })] }));

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

@@ -0,0 +1,50 @@
+import { Common } from '@pallasoft/ps-models';
+import { defineSchema } from '@portabletext/editor';
+const Models = Common.PortableTextConfig;
+export const PsPortableTextEditorConfig = {
+    linkAnnotation: Models.linkType,
+    mailtoPrefix: 'mailto:',
+    emailPattern: /^[^\s@/:]+@[^\s@/:]+\.[^\s@/:]+$/,
+    lineHeightRem: 1.5,
+    decorators: {
+        bold: Models.decorators[0],
+        code: Models.decorators[3],
+        italic: Models.decorators[1],
+        underline: Models.decorators[2],
+    },
+    styles: { blockquote: Models.styles[1], normal: Models.styles[0] },
+    listItems: { bullet: Models.listItems[0], number: Models.listItems[1] },
+    schemaDefinition: defineSchema({
+        annotations: [{ name: Models.linkType, fields: [{ name: 'href', type: 'string' }] }],
+        blockObjects: [],
+        decorators: Models.decorators.map((name) => ({ name })),
+        inlineObjects: [],
+        lists: Models.listItems.map((name) => ({ name })),
+        styles: Models.styles.map((name) => ({ name })),
+    }),
+    labels: {
+        bold: 'Bold',
+        bulletedList: 'Bulleted list',
+        cancel: 'Cancel',
+        code: 'Code',
+        invalidLink: 'Enter a web address or email address',
+        italic: 'Italic',
+        link: 'Link',
+        linkDialogTitle: 'Link',
+        linkUrl: 'Address',
+        numberedList: 'Numbered list',
+        quote: 'Quote',
+        removeLink: 'Remove link',
+        saveLink: 'Save',
+        toolbar: 'Formatting',
+        underline: 'Underline',
+    },
+    classNames: {
+        editable: 'ps-input-control w-full resize-none overflow-y-auto rounded-t-none border-t-0 leading-6 outline-none',
+        root: 'block',
+        toolbar: 'flex flex-wrap items-center gap-1 rounded-t-xl border border-line bg-white p-1 dark:bg-transparent',
+        button: 'ps-focus-ring inline-flex h-9 min-w-9 items-center justify-center rounded-lg px-2 text-sm text-ink/70 transition-colors hover:bg-ink/5 hover:text-ink disabled:cursor-not-allowed disabled:opacity-40',
+        buttonActive: 'bg-primary text-white hover:bg-primary hover:text-white',
+        separator: 'mx-1 h-5 w-px bg-line',
+    },
+};

package/dist/esm/constants/ps-portable-text-editor-renderers.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsPortableTextEditorConfig } from './ps-portable-text-editor-config';
+export const PsPortableTextEditorRenderers = {
+    renderBlock: ({ children, listItem, style }) => {
+        if (listItem === PsPortableTextEditorConfig.listItems.bullet) {
+            return (_jsx("div", { className: "relative pl-6 before:absolute before:left-1 before:content-['\u2022']", children: children }));
+        }
+        if (listItem === PsPortableTextEditorConfig.listItems.number) {
+            return (_jsx("div", { className: "relative pl-6 before:absolute before:left-0 before:content-[counter(ps-list)'.']", style: { counterIncrement: 'ps-list' }, children: children }));
+        }
+        if (style === PsPortableTextEditorConfig.styles.blockquote) {
+            return (_jsx("div", { className: 'border-l-2 border-primary pl-3 text-ink/80', style: { counterReset: 'ps-list' }, children: children }));
+        }
+        return _jsx("div", { style: { counterReset: 'ps-list' }, children: children });
+    },
+    renderDecorator: ({ children, value }) => {
+        if (value === PsPortableTextEditorConfig.decorators.bold)
+            return _jsx("strong", { children: children });
+        if (value === PsPortableTextEditorConfig.decorators.italic)
+            return _jsx("em", { children: children });
+        if (value === PsPortableTextEditorConfig.decorators.underline)
+            return _jsx("u", { children: children });
+        if (value === PsPortableTextEditorConfig.decorators.code) {
+            return _jsx("code", { className: 'rounded bg-ink/10 px-1 font-mono text-[0.9em]', children: children });
+        }
+        return children;
+    },
+    renderAnnotation: ({ children }) => (_jsx("span", { className: 'text-primary underline', children: children })),
+};

package/dist/esm/index.js

@@ -45,3 +45,5 @@ export * from './components/ps-date-preset-field';
 export * from './components/ps-select-with-create';
 export * from './constants/ps-select-with-create-config';
 export * from './interfaces/ps-date-preset-data';
+export * from './components/ps-portable-text-editor';
+export * from './interfaces/ps-portable-text-editor-labels';

package/dist/esm/interfaces/ps-portable-text-editor-labels.js

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

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

@@ -0,0 +1,30 @@
+import { Common } from '@pallasoft/ps-models';
+import { PsPortableTextEditorConfig } from '../constants/ps-portable-text-editor-config';
+import { PsTextFormatService } from './ps-text-format-service';
+export class PsPortableTextEditorService {
+    static normalizeLink(raw) {
+        const trimmed = raw.trim();
+        if (trimmed === '')
+            return null;
+        const candidate = PsPortableTextEditorConfig.emailPattern.test(trimmed)
+            ? `${PsPortableTextEditorConfig.mailtoPrefix}${trimmed}`
+            : trimmed.toLowerCase().startsWith(PsPortableTextEditorConfig.mailtoPrefix)
+                ? trimmed
+                : PsTextFormatService.url(trimmed);
+        try {
+            const url = new URL(candidate);
+            return Common.PortableTextConfig.linkProtocols.includes(url.protocol)
+                ? candidate
+                : null;
+        }
+        catch {
+            return null;
+        }
+    }
+    static minHeight(minRows) {
+        return `${minRows * PsPortableTextEditorConfig.lineHeightRem}rem`;
+    }
+    static isSame(first, second) {
+        return JSON.stringify(first) === JSON.stringify(second);
+    }
+}

package/dist/index.d.ts

@@ -45,3 +45,6 @@ export * from './components/ps-date-preset-field';
 export * from './components/ps-select-with-create';
 export * from './constants/ps-select-with-create-config';
 export * from './interfaces/ps-date-preset-data';
+export * from './components/ps-portable-text-editor';
+export * from './interfaces/ps-portable-text-editor-labels';
+export type { PortableTextBlock } from '@portabletext/editor';

package/dist/index.js

@@ -61,3 +61,5 @@ __exportStar(require("./components/ps-date-preset-field"), exports);
 __exportStar(require("./components/ps-select-with-create"), exports);
 __exportStar(require("./constants/ps-select-with-create-config"), exports);
 __exportStar(require("./interfaces/ps-date-preset-data"), exports);
+__exportStar(require("./components/ps-portable-text-editor"), exports);
+__exportStar(require("./interfaces/ps-portable-text-editor-labels"), exports);

package/dist/interfaces/ps-portable-text-editor-labels.d.ts

@@ -0,0 +1,17 @@
+export interface PsPortableTextEditorLabels {
+    bold: string;
+    bulletedList: string;
+    cancel: string;
+    code: string;
+    invalidLink: string;
+    italic: string;
+    link: string;
+    linkDialogTitle: string;
+    linkUrl: string;
+    numberedList: string;
+    quote: string;
+    removeLink: string;
+    saveLink: string;
+    toolbar: string;
+    underline: string;
+}

package/dist/interfaces/ps-portable-text-editor-labels.js

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

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

@@ -0,0 +1,5 @@
+export declare class PsPortableTextEditorService {
+    static normalizeLink(raw: string): string | null;
+    static minHeight(minRows: number): string;
+    static isSame(first: unknown, second: unknown): boolean;
+}

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

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsPortableTextEditorService = void 0;
+const ps_models_1 = require("@pallasoft/ps-models");
+const ps_portable_text_editor_config_1 = require("../constants/ps-portable-text-editor-config");
+const ps_text_format_service_1 = require("./ps-text-format-service");
+class PsPortableTextEditorService {
+    static normalizeLink(raw) {
+        const trimmed = raw.trim();
+        if (trimmed === '')
+            return null;
+        const candidate = ps_portable_text_editor_config_1.PsPortableTextEditorConfig.emailPattern.test(trimmed)
+            ? `${ps_portable_text_editor_config_1.PsPortableTextEditorConfig.mailtoPrefix}${trimmed}`
+            : trimmed.toLowerCase().startsWith(ps_portable_text_editor_config_1.PsPortableTextEditorConfig.mailtoPrefix)
+                ? trimmed
+                : ps_text_format_service_1.PsTextFormatService.url(trimmed);
+        try {
+            const url = new URL(candidate);
+            return ps_models_1.Common.PortableTextConfig.linkProtocols.includes(url.protocol)
+                ? candidate
+                : null;
+        }
+        catch {
+            return null;
+        }
+    }
+    static minHeight(minRows) {
+        return `${minRows * ps_portable_text_editor_config_1.PsPortableTextEditorConfig.lineHeightRem}rem`;
+    }
+    static isSame(first, second) {
+        return JSON.stringify(first) === JSON.stringify(second);
+    }
+}
+exports.PsPortableTextEditorService = PsPortableTextEditorService;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-input-components",
-	"version": "1.21.0",
+	"version": "1.22.0",
 	"private": false,
 	"main": "./dist/index.js",
 	"module": "./dist/esm/index.js",
@@ -34,17 +34,23 @@
 		"format:prettier": "npx prettier --write \"src/**/*.{ts,tsx,json,md}\"",
 		"lint:eslint": "npx eslint \"src/**/*.{ts,tsx}\"",
 		"lint:eslint:fix": "npx eslint --fix \"src/**/*.{ts,tsx}\"",
-		"release": "semantic-release"
+		"release": "semantic-release",
+		"test": "vitest run"
 	},
 	"dependencies": {
 		"@internationalized/date": "^3.12.2",
 		"@pallasoft/ps-core-components": "^2.10.0",
 		"@pallasoft/ps-design-system": "^1.5.0",
 		"@pallasoft/ps-icons": "^1.5.4",
+		"@pallasoft/ps-models": "^1.4.0",
+		"@pallasoft/ps-popovers": "^1.7.0",
 		"@pallasoft/ps-utilities": "^2.13.0",
+		"@portabletext/editor": "^3.3.19",
+		"@portabletext/sanity-bridge": "^1.2.14",
 		"libphonenumber-js": "^1.13.13",
 		"react-aria-components": "^1.19.0",
-		"react-datepicker": "^9.1.0"
+		"react-datepicker": "^9.1.0",
+		"rxjs": "^7.8.2"
 	},
 	"peerDependencies": {
 		"react": "^18 || ^19",
@@ -73,6 +79,7 @@
 		"eslint-plugin-import": "^2.32.0",
 		"eslint-plugin-prettier": "^5.5.4",
 		"husky": "^9.1.7",
+		"jsdom": "^30.1.1",
 		"lint-staged": "^16.2.7",
 		"prettier": "^3.6.2",
 		"react": "^19.3.0",
@@ -80,7 +87,8 @@
 		"react-hook-form": "^7.89.0",
 		"semantic-release": "^24.2.0",
 		"ts-node": "^10.9.2",
-		"typescript": "^5.9.3"
+		"typescript": "^5.9.3",
+		"vitest": "^3.2.7"
 	},
 	"publishConfig": {
 		"access": "public",