@pallasoft/ps-input-components 1.23.0 → 2.0.0

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

@@ -1,5 +1,5 @@
-import { type PortableTextBlock } from '@portabletext/editor';
-import type { PsPortableTextEditorLabels } from '../interfaces/ps-portable-text-editor-labels';
+import type { PortableTextBlock } from '@portabletext/editor';
+import type { PsPortableTextEditorLabels } from '../portable-text-core/interfaces/ps-portable-text-editor-labels';
 export interface PsPortableTextEditorProps {
     className?: string;
     disabled?: boolean;

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

@@ -2,37 +2,12 @@
 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_core_1 = require("../portable-text-core/components/ps-portable-text-core");
+const ps_portable_text_core_config_1 = require("../portable-text-core/constants/ps-portable-text-core-config");
+const ps_portable_text_editor_service_1 = require("../portable-text-core/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) } })] })) }));
-};
+const PsPortableTextEditor = ({ className, disabled = false, labels = ps_portable_text_core_config_1.PsPortableTextCoreConfig.labels, minRows = 4, onChange, placeholder, value, }) => ((0, jsx_runtime_1.jsx)(ps_portable_text_core_1.PsPortableTextCore, { ...ps_portable_text_editor_renderers_1.PsPortableTextEditorRenderers, className: ps_design_system_1.PallasoftClassNameService.merge(ps_portable_text_editor_config_1.PsPortableTextEditorConfig.classNames.root, className), disabled: disabled, editableClassName: ps_portable_text_editor_config_1.PsPortableTextEditorConfig.classNames.editable, fallback: (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) } })] }), minRows: minRows, onChange: onChange, renderPlaceholder: () => (0, jsx_runtime_1.jsx)("span", { className: 'text-ink/45', children: placeholder }), toolbar: (0, jsx_runtime_1.jsx)(ps_portable_text_toolbar_1.PsPortableTextToolbar, { disabled: disabled, labels: labels }), value: value }));
 exports.PsPortableTextEditor = PsPortableTextEditor;

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

@@ -1,4 +1,4 @@
-import type { PsPortableTextEditorLabels } from '../interfaces/ps-portable-text-editor-labels';
+import type { PsPortableTextEditorLabels } from '../portable-text-core/interfaces/ps-portable-text-editor-labels';
 export interface PsPortableTextLinkDialogProps {
     isOpen: boolean;
     labels: PsPortableTextEditorLabels;

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

@@ -2,34 +2,12 @@
 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_portable_text_core_config_1 = require("../portable-text-core/constants/ps-portable-text-core-config");
+const use_ps_portable_text_link_form_1 = require("../portable-text-core/hooks/use-ps-portable-text-link-form");
 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 }) }));
+    const form = (0, use_ps_portable_text_link_form_1.usePsPortableTextLinkForm)({ onClose, onSubmit });
+    return ((0, jsx_runtime_1.jsx)(ps_popovers_1.PsFormModal, { cancelLabel: labels.cancel, isOpen: isOpen, isSubmitDisabled: form.isSubmitDisabled, onClose: form.close, onSubmit: form.submit, size: 'sm', submitLabel: labels.saveLink, title: labels.linkDialogTitle, children: (0, jsx_runtime_1.jsx)(ps_url_input_1.PsUrlInput, { "aria-invalid": form.hasError, autoFocus: true, helperText: form.hasError ? labels.invalidLink : undefined, label: labels.linkUrl, name: ps_portable_text_core_config_1.PsPortableTextCoreConfig.linkAnnotation, onChange: (event) => form.setAddress(event.target.value), value: form.address }) }));
 };
 exports.PsPortableTextLinkDialog = PsPortableTextLinkDialog;

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

@@ -1,4 +1,4 @@
-import type { PsPortableTextEditorLabels } from '../interfaces/ps-portable-text-editor-labels';
+import type { PsPortableTextEditorLabels } from '../portable-text-core/interfaces/ps-portable-text-editor-labels';
 export interface PsPortableTextToolbarProps {
     disabled: boolean;
     labels: PsPortableTextEditorLabels;

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

@@ -3,60 +3,20 @@ 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_core_config_1 = require("../portable-text-core/constants/ps-portable-text-core-config");
+const use_ps_portable_text_toolbar_1 = require("../portable-text-core/hooks/use-ps-portable-text-toolbar");
 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 PsPortableTextToolbar = ({ disabled, labels }) => {
+    const toolbar = (0, use_ps_portable_text_toolbar_1.usePsPortableTextToolbar)();
+    const [isLinkOpen, setIsLinkOpen] = (0, react_1.useState)(false);
+    return ((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)(ps_portable_text_toolbar_button_1.PsPortableTextToolbarButton, { className: 'font-bold', disabled: disabled, isActive: toolbar.active.bold, label: labels.bold, onClick: () => toolbar.toggleDecorator(ps_portable_text_core_config_1.PsPortableTextCoreConfig.decorators.bold), children: "B" }), (0, jsx_runtime_1.jsx)(ps_portable_text_toolbar_button_1.PsPortableTextToolbarButton, { className: 'italic', disabled: disabled, isActive: toolbar.active.italic, label: labels.italic, onClick: () => toolbar.toggleDecorator(ps_portable_text_core_config_1.PsPortableTextCoreConfig.decorators.italic), children: "I" }), (0, jsx_runtime_1.jsx)(ps_portable_text_toolbar_button_1.PsPortableTextToolbarButton, { className: 'underline', disabled: disabled, isActive: toolbar.active.underline, label: labels.underline, onClick: () => toolbar.toggleDecorator(ps_portable_text_core_config_1.PsPortableTextCoreConfig.decorators.underline), children: "U" }), (0, jsx_runtime_1.jsx)(ps_portable_text_toolbar_button_1.PsPortableTextToolbarButton, { className: 'font-mono', disabled: disabled, isActive: toolbar.active.code, label: labels.code, onClick: () => toolbar.toggleDecorator(ps_portable_text_core_config_1.PsPortableTextCoreConfig.decorators.code), children: '</>' }), (0, jsx_runtime_1.jsx)(ps_portable_text_toolbar_button_1.PsPortableTextToolbarButton, { disabled: disabled, isActive: toolbar.active.link, label: toolbar.active.link ? labels.removeLink : labels.link, onClick: () => (toolbar.active.link ? toolbar.removeLink() : setIsLinkOpen(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: isLinkOpen, labels: labels, onClose: () => {
+                    setIsLinkOpen(false);
+                    toolbar.focus();
+                }, onSubmit: (href) => {
+                    toolbar.addLink(href);
+                    setIsLinkOpen(false);
+                } }), (0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true', className: ps_portable_text_editor_config_1.PsPortableTextEditorConfig.classNames.separator }), (0, jsx_runtime_1.jsx)(ps_portable_text_toolbar_button_1.PsPortableTextToolbarButton, { disabled: disabled, isActive: toolbar.active.bulletedList, label: labels.bulletedList, onClick: () => toolbar.toggleListItem(ps_portable_text_core_config_1.PsPortableTextCoreConfig.listItems.bullet), children: "\u2022" }), (0, jsx_runtime_1.jsx)(ps_portable_text_toolbar_button_1.PsPortableTextToolbarButton, { disabled: disabled, isActive: toolbar.active.numberedList, label: labels.numberedList, onClick: () => toolbar.toggleListItem(ps_portable_text_core_config_1.PsPortableTextCoreConfig.listItems.number), children: "1." }), (0, jsx_runtime_1.jsx)(ps_portable_text_toolbar_button_1.PsPortableTextToolbarButton, { disabled: disabled, isActive: toolbar.active.quote, label: labels.quote, onClick: toolbar.toggleQuote, children: "\u201D" })] }));
 };
-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

@@ -1,59 +1,4 @@
 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";

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

@@ -1,47 +1,7 @@
 "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',

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

@@ -2,28 +2,28 @@
 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");
+const ps_portable_text_core_config_1 = require("../portable-text-core/constants/ps-portable-text-core-config");
 exports.PsPortableTextEditorRenderers = {
     renderBlock: ({ children, listItem, style }) => {
-        if (listItem === ps_portable_text_editor_config_1.PsPortableTextEditorConfig.listItems.bullet) {
+        if (listItem === ps_portable_text_core_config_1.PsPortableTextCoreConfig.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) {
+        if (listItem === ps_portable_text_core_config_1.PsPortableTextCoreConfig.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) {
+        if (style === ps_portable_text_core_config_1.PsPortableTextCoreConfig.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)
+        if (value === ps_portable_text_core_config_1.PsPortableTextCoreConfig.decorators.bold)
             return (0, jsx_runtime_1.jsx)("strong", { children: children });
-        if (value === ps_portable_text_editor_config_1.PsPortableTextEditorConfig.decorators.italic)
+        if (value === ps_portable_text_core_config_1.PsPortableTextCoreConfig.decorators.italic)
             return (0, jsx_runtime_1.jsx)("em", { children: children });
-        if (value === ps_portable_text_editor_config_1.PsPortableTextEditorConfig.decorators.underline)
+        if (value === ps_portable_text_core_config_1.PsPortableTextCoreConfig.decorators.underline)
             return (0, jsx_runtime_1.jsx)("u", { children: children });
-        if (value === ps_portable_text_editor_config_1.PsPortableTextEditorConfig.decorators.code) {
+        if (value === ps_portable_text_core_config_1.PsPortableTextCoreConfig.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;

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

@@ -1,34 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 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 { PsPortableTextCore } from '../portable-text-core/components/ps-portable-text-core';
+import { PsPortableTextCoreConfig } from '../portable-text-core/constants/ps-portable-text-core-config';
+import { PsPortableTextEditorService } from '../portable-text-core/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) } })] })) }));
-};
+export const PsPortableTextEditor = ({ className, disabled = false, labels = PsPortableTextCoreConfig.labels, minRows = 4, onChange, placeholder, value, }) => (_jsx(PsPortableTextCore, { ...PsPortableTextEditorRenderers, className: PallasoftClassNameService.merge(PsPortableTextEditorConfig.classNames.root, className), disabled: disabled, editableClassName: PsPortableTextEditorConfig.classNames.editable, fallback: _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) } })] }), minRows: minRows, onChange: onChange, renderPlaceholder: () => _jsx("span", { className: 'text-ink/45', children: placeholder }), toolbar: _jsx(PsPortableTextToolbar, { disabled: disabled, labels: labels }), value: value }));

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

@@ -1,31 +1,9 @@
 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 { PsPortableTextCoreConfig } from '../portable-text-core/constants/ps-portable-text-core-config';
+import { usePsPortableTextLinkForm } from '../portable-text-core/hooks/use-ps-portable-text-link-form';
 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 }) }));
+    const form = usePsPortableTextLinkForm({ onClose, onSubmit });
+    return (_jsx(PsFormModal, { cancelLabel: labels.cancel, isOpen: isOpen, isSubmitDisabled: form.isSubmitDisabled, onClose: form.close, onSubmit: form.submit, size: 'sm', submitLabel: labels.saveLink, title: labels.linkDialogTitle, children: _jsx(PsUrlInput, { "aria-invalid": form.hasError, autoFocus: true, helperText: form.hasError ? labels.invalidLink : undefined, label: labels.linkUrl, name: PsPortableTextCoreConfig.linkAnnotation, onChange: (event) => form.setAddress(event.target.value), value: form.address }) }));
 };

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

@@ -1,58 +1,18 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, 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 { PsPortableTextCoreConfig } from '../portable-text-core/constants/ps-portable-text-core-config';
+import { usePsPortableTextToolbar } from '../portable-text-core/hooks/use-ps-portable-text-toolbar';
 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 }));
+export const PsPortableTextToolbar = ({ disabled, labels }) => {
+    const toolbar = usePsPortableTextToolbar();
+    const [isLinkOpen, setIsLinkOpen] = useState(false);
+    return (_jsxs("div", { "aria-label": labels.toolbar, className: PsPortableTextEditorConfig.classNames.toolbar, role: 'toolbar', children: [_jsx(PsPortableTextToolbarButton, { className: 'font-bold', disabled: disabled, isActive: toolbar.active.bold, label: labels.bold, onClick: () => toolbar.toggleDecorator(PsPortableTextCoreConfig.decorators.bold), children: "B" }), _jsx(PsPortableTextToolbarButton, { className: 'italic', disabled: disabled, isActive: toolbar.active.italic, label: labels.italic, onClick: () => toolbar.toggleDecorator(PsPortableTextCoreConfig.decorators.italic), children: "I" }), _jsx(PsPortableTextToolbarButton, { className: 'underline', disabled: disabled, isActive: toolbar.active.underline, label: labels.underline, onClick: () => toolbar.toggleDecorator(PsPortableTextCoreConfig.decorators.underline), children: "U" }), _jsx(PsPortableTextToolbarButton, { className: 'font-mono', disabled: disabled, isActive: toolbar.active.code, label: labels.code, onClick: () => toolbar.toggleDecorator(PsPortableTextCoreConfig.decorators.code), children: '</>' }), _jsx(PsPortableTextToolbarButton, { disabled: disabled, isActive: toolbar.active.link, label: toolbar.active.link ? labels.removeLink : labels.link, onClick: () => (toolbar.active.link ? toolbar.removeLink() : setIsLinkOpen(true)), children: _jsx("span", { className: 'underline', children: labels.link }) }), _jsx(PsPortableTextLinkDialog, { isOpen: isLinkOpen, labels: labels, onClose: () => {
+                    setIsLinkOpen(false);
+                    toolbar.focus();
+                }, onSubmit: (href) => {
+                    toolbar.addLink(href);
+                    setIsLinkOpen(false);
+                } }), _jsx("span", { "aria-hidden": 'true', className: PsPortableTextEditorConfig.classNames.separator }), _jsx(PsPortableTextToolbarButton, { disabled: disabled, isActive: toolbar.active.bulletedList, label: labels.bulletedList, onClick: () => toolbar.toggleListItem(PsPortableTextCoreConfig.listItems.bullet), children: "\u2022" }), _jsx(PsPortableTextToolbarButton, { disabled: disabled, isActive: toolbar.active.numberedList, label: labels.numberedList, onClick: () => toolbar.toggleListItem(PsPortableTextCoreConfig.listItems.number), children: "1." }), _jsx(PsPortableTextToolbarButton, { disabled: disabled, isActive: toolbar.active.quote, label: labels.quote, onClick: toolbar.toggleQuote, children: "\u201D" })] }));
 };
-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

@@ -1,44 +1,4 @@
-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',

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

@@ -1,26 +1,26 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { PsPortableTextEditorConfig } from './ps-portable-text-editor-config';
+import { PsPortableTextCoreConfig } from '../portable-text-core/constants/ps-portable-text-core-config';
 export const PsPortableTextEditorRenderers = {
     renderBlock: ({ children, listItem, style }) => {
-        if (listItem === PsPortableTextEditorConfig.listItems.bullet) {
+        if (listItem === PsPortableTextCoreConfig.listItems.bullet) {
             return (_jsx("div", { className: "relative pl-6 before:absolute before:left-1 before:content-['\u2022']", children: children }));
         }
-        if (listItem === PsPortableTextEditorConfig.listItems.number) {
+        if (listItem === PsPortableTextCoreConfig.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) {
+        if (style === PsPortableTextCoreConfig.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)
+        if (value === PsPortableTextCoreConfig.decorators.bold)
             return _jsx("strong", { children: children });
-        if (value === PsPortableTextEditorConfig.decorators.italic)
+        if (value === PsPortableTextCoreConfig.decorators.italic)
             return _jsx("em", { children: children });
-        if (value === PsPortableTextEditorConfig.decorators.underline)
+        if (value === PsPortableTextCoreConfig.decorators.underline)
             return _jsx("u", { children: children });
-        if (value === PsPortableTextEditorConfig.decorators.code) {
+        if (value === PsPortableTextCoreConfig.decorators.code) {
             return _jsx("code", { className: 'rounded bg-ink/10 px-1 font-mono text-[0.9em]', children: children });
         }
         return children;

package/dist/esm/index.js

@@ -45,7 +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';
 export * from './components/ps-option-card-group';
 export * from './interfaces/ps-option-card-data';

package/dist/esm/portable-text/index.js

@@ -0,0 +1,2 @@
+export * from '../components/ps-portable-text-editor';
+export * from '../portable-text-core/interfaces/ps-portable-text-editor-labels';