@pallasoft/ps-input-components 2.2.0 → 3.0.0

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

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

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

@@ -4,10 +4,9 @@ exports.PsPortableTextEditor = 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 ps_portable_text_editor_renderers_1 = require("../constants/ps-portable-text-editor-renderers");
 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_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 }));
+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, { className: ps_design_system_1.PallasoftClassNameService.merge(ps_portable_text_editor_config_1.PsPortableTextEditorConfig.classNames.root, className), classNames: ps_portable_text_editor_config_1.PsPortableTextEditorConfig.contentClassNames, 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) } })] }), label: labels.editor, minRows: minRows, onChange: onChange, placeholder: 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,8 +1,9 @@
 import type { PsPortableTextEditorLabels } from '../portable-text-core/interfaces/ps-portable-text-editor-labels';
 export interface PsPortableTextLinkDialogProps {
+    href?: string;
     isOpen: boolean;
     labels: PsPortableTextEditorLabels;
     onClose: () => void;
     onSubmit: (href: string) => void;
 }
-export declare const PsPortableTextLinkDialog: ({ isOpen, labels, onClose, onSubmit, }: PsPortableTextLinkDialogProps) => import("react").JSX.Element;
+export declare const PsPortableTextLinkDialog: ({ href, isOpen, labels, onClose, onSubmit, }: PsPortableTextLinkDialogProps) => import("react").JSX.Element;

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

@@ -6,8 +6,8 @@ const ps_popovers_1 = require("@pallasoft/ps-popovers");
 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 form = (0, use_ps_portable_text_link_form_1.usePsPortableTextLinkForm)({ onClose, onSubmit });
+const PsPortableTextLinkDialog = ({ href, isOpen, labels, onClose, onSubmit, }) => {
+    const form = (0, use_ps_portable_text_link_form_1.usePsPortableTextLinkForm)({ href, isOpen, 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.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsPortableTextToolbar = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 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");
@@ -10,13 +9,9 @@ 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 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) => {
+    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() : toolbar.openLink()), children: (0, jsx_runtime_1.jsx)("span", { className: 'underline', children: labels.link }) }), (0, jsx_runtime_1.jsx)(ps_portable_text_link_dialog_1.PsPortableTextLinkDialog, { href: toolbar.linkHref, isOpen: toolbar.isLinkOpen, labels: labels, onClose: toolbar.closeLink, onSubmit: (href) => {
+                    toolbar.closeLink();
                     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" })] }));
 };
 exports.PsPortableTextToolbar = PsPortableTextToolbar;

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

@@ -7,4 +7,12 @@ export declare const PsPortableTextEditorConfig: {
         readonly buttonActive: "bg-primary text-white hover:bg-primary hover:text-white";
         readonly separator: "mx-1 h-5 w-px bg-line";
     };
+    readonly contentClassNames: {
+        readonly blockquote: "border-l-2 border-primary pl-3 text-ink/80";
+        readonly bulletList: "list-disc pl-6";
+        readonly code: "rounded bg-ink/10 px-1 font-mono text-[0.9em]";
+        readonly link: "text-primary underline";
+        readonly orderedList: "list-decimal pl-6";
+        readonly placeholder: "before:pointer-events-none before:float-left before:h-0 before:text-ink/45 before:content-[attr(data-placeholder)]";
+    };
 };

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

@@ -10,4 +10,12 @@ exports.PsPortableTextEditorConfig = {
         buttonActive: 'bg-primary text-white hover:bg-primary hover:text-white',
         separator: 'mx-1 h-5 w-px bg-line',
     },
+    contentClassNames: {
+        blockquote: 'border-l-2 border-primary pl-3 text-ink/80',
+        bulletList: 'list-disc pl-6',
+        code: 'rounded bg-ink/10 px-1 font-mono text-[0.9em]',
+        link: 'text-primary underline',
+        orderedList: 'list-decimal pl-6',
+        placeholder: 'before:pointer-events-none before:float-left before:h-0 before:text-ink/45 before:content-[attr(data-placeholder)]',
+    },
 };

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

@@ -1,9 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
 import { PsPortableTextEditorConfig } from '../constants/ps-portable-text-editor-config';
-import { PsPortableTextEditorRenderers } from '../constants/ps-portable-text-editor-renderers';
 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 = 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 }));
+export const PsPortableTextEditor = ({ className, disabled = false, labels = PsPortableTextCoreConfig.labels, minRows = 4, onChange, placeholder, value, }) => (_jsx(PsPortableTextCore, { className: PallasoftClassNameService.merge(PsPortableTextEditorConfig.classNames.root, className), classNames: PsPortableTextEditorConfig.contentClassNames, 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) } })] }), label: labels.editor, minRows: minRows, onChange: onChange, placeholder: placeholder, toolbar: _jsx(PsPortableTextToolbar, { disabled: disabled, labels: labels }), value: value }));

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

@@ -3,7 +3,7 @@ import { PsFormModal } from '@pallasoft/ps-popovers';
 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 form = usePsPortableTextLinkForm({ onClose, onSubmit });
+export const PsPortableTextLinkDialog = ({ href, isOpen, labels, onClose, onSubmit, }) => {
+    const form = usePsPortableTextLinkForm({ href, isOpen, 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,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
 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';
@@ -7,12 +6,8 @@ import { PsPortableTextLinkDialog } from './ps-portable-text-link-dialog';
 import { PsPortableTextToolbarButton } from './ps-portable-text-toolbar-button';
 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) => {
+    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() : toolbar.openLink()), children: _jsx("span", { className: 'underline', children: labels.link }) }), _jsx(PsPortableTextLinkDialog, { href: toolbar.linkHref, isOpen: toolbar.isLinkOpen, labels: labels, onClose: toolbar.closeLink, onSubmit: (href) => {
+                    toolbar.closeLink();
                     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" })] }));
 };

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

@@ -7,4 +7,12 @@ export const PsPortableTextEditorConfig = {
         buttonActive: 'bg-primary text-white hover:bg-primary hover:text-white',
         separator: 'mx-1 h-5 w-px bg-line',
     },
+    contentClassNames: {
+        blockquote: 'border-l-2 border-primary pl-3 text-ink/80',
+        bulletList: 'list-disc pl-6',
+        code: 'rounded bg-ink/10 px-1 font-mono text-[0.9em]',
+        link: 'text-primary underline',
+        orderedList: 'list-decimal pl-6',
+        placeholder: 'before:pointer-events-none before:float-left before:h-0 before:text-ink/45 before:content-[attr(data-placeholder)]',
+    },
 };

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

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const PsPortableTextCoreEditor = ({ className, fallback }) => (_jsx("div", { className: className, children: fallback }));

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

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { EditorContent, useEditor, useEditorState } from '@tiptap/react';
+import { PsPortableTextCoreContext } from '../contexts/ps-portable-text-core-context';
+import { PsPortableTextCommandService } from '../services/ps-portable-text-command-service';
+import { PsPortableTextConverterService } from '../services/ps-portable-text-converter-service';
+import { PsPortableTextEditorService } from '../services/ps-portable-text-editor-service';
+import { PsPortableTextExtensionService } from '../services/ps-portable-text-extension-service';
+export const PsPortableTextCoreEditor = ({ className, classNames, disabled = false, editableClassName = '', label, minRows = 4, onChange, placeholder = '', toolbar, value, }) => {
+    const [isLinkOpen, setIsLinkOpen] = useState(false);
+    const lastValue = useRef(value);
+    const editor = useEditor({
+        content: PsPortableTextConverterService.toDocument(value),
+        editable: !disabled,
+        editorProps: {
+            attributes: {
+                ...(label === undefined ? {} : { 'aria-label': label }),
+                'aria-multiline': 'true',
+                'class': editableClassName,
+                'role': 'textbox',
+                'style': `min-height: ${PsPortableTextEditorService.minHeight(minRows)}`,
+            },
+        },
+        extensions: PsPortableTextExtensionService.extensions({
+            classNames,
+            onLinkShortcut: () => setIsLinkOpen(true),
+            placeholder,
+        }),
+        immediatelyRender: true,
+    }, []);
+    const state = useEditorState({
+        editor,
+        selector: ({ editor: current }) => PsPortableTextCommandService.state(current),
+    });
+    useEffect(() => {
+        editor.setEditable(!disabled, false);
+    }, [editor, disabled]);
+    useEffect(() => {
+        const update = () => {
+            const next = PsPortableTextConverterService.toBlocks(editor.getJSON());
+            lastValue.current = next;
+            onChange(next);
+        };
+        editor.on('update', update);
+        return () => {
+            editor.off('update', update);
+        };
+    }, [editor, onChange]);
+    useEffect(() => {
+        if (PsPortableTextEditorService.isSame(value, lastValue.current))
+            return;
+        lastValue.current = value;
+        editor.commands.setContent(PsPortableTextConverterService.toDocument(value), {
+            emitUpdate: false,
+        });
+    }, [editor, value]);
+    return (_jsx("div", { className: className, children: _jsxs(PsPortableTextCoreContext.Provider, { value: {
+                closeLink: () => setIsLinkOpen(false),
+                editor,
+                isLinkOpen,
+                openLink: () => setIsLinkOpen(true),
+                state,
+            }, children: [toolbar, _jsx(EditorContent, { editor: editor })] }) }));
+};

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

@@ -1,31 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
-import { EditorProvider, PortableTextEditable, } from '@portabletext/editor';
-import { EventListenerPlugin } from '@portabletext/editor/plugins';
-import { PsPortableTextCoreConfig } from '../constants/ps-portable-text-core-config';
-import { PsPortableTextEditorService } from '../services/ps-portable-text-editor-service';
-export const PsPortableTextCore = ({ className, disabled = false, editableClassName, fallback, minRows = 4, onChange, renderAnnotation, renderBlock, renderDecorator, renderPlaceholder, toolbar, value, }) => {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { PsPortableTextCoreEditor } from '@pallasoft/ps-input-components/portable-text-engine';
+export const PsPortableTextCore = (props) => {
     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: className, children: isMounted ? (_jsxs(EditorProvider, { initialConfig: {
-                initialValue: value,
-                readOnly: disabled,
-                schemaDefinition: PsPortableTextCoreConfig.schemaDefinition,
-            }, children: [_jsx(EventListenerPlugin, { on: (event) => {
-                        if (event.type !== 'mutation')
-                            return;
-                        const next = Array.isArray(event.value) ? event.value : [];
-                        lastValue.current = next;
-                        onChange(next);
-                    } }), toolbar, _jsx(PortableTextEditable, { className: editableClassName, readOnly: disabled, renderAnnotation: renderAnnotation, renderBlock: renderBlock, renderDecorator: renderDecorator, renderPlaceholder: renderPlaceholder, style: { minHeight: PsPortableTextEditorService.minHeight(minRows) } })] }, version)) : (fallback) }));
+    return isMounted ? (_jsx(PsPortableTextCoreEditor, { ...props })) : (_jsx("div", { className: props.className, children: props.fallback }));
 };

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

@@ -1,11 +1,13 @@
 import { Common } from '@pallasoft/ps-models';
-import { defineSchema } from '@portabletext/editor';
 const Models = Common.PortableTextConfig;
 export const PsPortableTextCoreConfig = {
     linkAnnotation: Models.linkType,
     mailtoPrefix: 'mailto:',
     emailPattern: /^[^\s@/:]+@[^\s@/:]+\.[^\s@/:]+$/,
     lineHeightRem: 1.5,
+    lineBreak: '\n',
+    defaultLinkProtocol: 'https',
+    keyPrefix: { block: 'b', link: 'l', span: 's' },
     decorators: {
         bold: Models.decorators[0],
         code: Models.decorators[3],
@@ -14,19 +16,37 @@ export const PsPortableTextCoreConfig = {
     },
     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 })),
-    }),
+    decoratorMarks: {
+        [Models.decorators[0]]: 'bold',
+        [Models.decorators[1]]: 'italic',
+        [Models.decorators[2]]: 'underline',
+        [Models.decorators[3]]: 'code',
+    },
+    listNodes: {
+        [Models.listItems[0]]: 'bulletList',
+        [Models.listItems[1]]: 'orderedList',
+    },
+    nodes: {
+        blockquote: 'blockquote',
+        bulletList: 'bulletList',
+        document: 'doc',
+        hardBreak: 'hardBreak',
+        listItem: 'listItem',
+        orderedList: 'orderedList',
+        paragraph: 'paragraph',
+        text: 'text',
+    },
+    linkMark: 'link',
+    linkShortcutExtension: 'psLinkShortcut',
+    listItemContent: 'paragraph (bulletList | orderedList)*',
+    blockquoteContent: 'paragraph+',
+    shortcuts: { link: 'Mod-k', nest: 'Tab', unnest: 'Shift-Tab' },
     labels: {
         bold: 'Bold',
         bulletedList: 'Bulleted list',
         cancel: 'Cancel',
         code: 'Code',
+        editor: 'Text',
         invalidLink: 'Enter a web address or email address',
         italic: 'Italic',
         link: 'Link',

package/dist/esm/portable-text-core/contexts/ps-portable-text-core-context.js

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+import { PsPortableTextCommandService } from '../services/ps-portable-text-command-service';
+export const PsPortableTextCoreContext = createContext({
+    closeLink: () => undefined,
+    editor: null,
+    isLinkOpen: false,
+    openLink: () => undefined,
+    state: PsPortableTextCommandService.state(null),
+});

package/dist/esm/portable-text-core/hooks/use-ps-portable-text-link-form.js

@@ -1,8 +1,14 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { PsPortableTextEditorService } from '../services/ps-portable-text-editor-service';
-export const usePsPortableTextLinkForm = ({ onClose, onSubmit, }) => {
+export const usePsPortableTextLinkForm = ({ href, isOpen = false, onClose, onSubmit, }) => {
     const [address, setAddress] = useState('');
     const [hasError, setHasError] = useState(false);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        setAddress(href === undefined ? '' : href);
+        setHasError(false);
+    }, [isOpen]);
     return {
         address,
         close: () => {
@@ -19,14 +25,14 @@ export const usePsPortableTextLinkForm = ({ onClose, onSubmit, }) => {
         submit: (event) => {
             event.preventDefault();
             event.stopPropagation();
-            const href = PsPortableTextEditorService.normalizeLink(address);
-            if (href === null) {
+            const normalized = PsPortableTextEditorService.normalizeLink(address);
+            if (normalized === null) {
                 setHasError(true);
                 return;
             }
             setAddress('');
             setHasError(false);
-            onSubmit(href);
+            onSubmit(normalized);
         },
     };
 };

package/dist/esm/portable-text-core/hooks/use-ps-portable-text-toolbar.js

@@ -1,54 +1,22 @@
-import { useEditor, useEditorSelector } from '@portabletext/editor';
-import { isActiveAnnotation, isActiveDecorator, isActiveListItem, isActiveStyle, } from '@portabletext/editor/selectors';
-import { PsPortableTextCoreConfig } from '../constants/ps-portable-text-core-config';
+import { useContext } from 'react';
+import { PsPortableTextCoreContext } from '../contexts/ps-portable-text-core-context';
+import { PsPortableTextCommandService } from '../services/ps-portable-text-command-service';
 export const usePsPortableTextToolbar = () => {
-    const editor = useEditor();
-    const isBold = useEditorSelector(editor, isActiveDecorator(PsPortableTextCoreConfig.decorators.bold));
-    const isItalic = useEditorSelector(editor, isActiveDecorator(PsPortableTextCoreConfig.decorators.italic));
-    const isUnderline = useEditorSelector(editor, isActiveDecorator(PsPortableTextCoreConfig.decorators.underline));
-    const isCode = useEditorSelector(editor, isActiveDecorator(PsPortableTextCoreConfig.decorators.code));
-    const isBulletedList = useEditorSelector(editor, isActiveListItem(PsPortableTextCoreConfig.listItems.bullet));
-    const isNumberedList = useEditorSelector(editor, isActiveListItem(PsPortableTextCoreConfig.listItems.number));
-    const isQuote = useEditorSelector(editor, isActiveStyle(PsPortableTextCoreConfig.styles.blockquote));
-    const isLink = useEditorSelector(editor, isActiveAnnotation(PsPortableTextCoreConfig.linkAnnotation));
-    const focus = () => editor.send({ type: 'focus' });
+    const { closeLink, editor, isLinkOpen, openLink, state } = useContext(PsPortableTextCoreContext);
     return {
-        active: {
-            bold: isBold,
-            bulletedList: isBulletedList,
-            code: isCode,
-            italic: isItalic,
-            link: isLink,
-            numberedList: isNumberedList,
-            quote: isQuote,
-            underline: isUnderline,
-        },
-        addLink: (href) => {
-            editor.send({
-                type: 'annotation.add',
-                annotation: { name: PsPortableTextCoreConfig.linkAnnotation, value: { href } },
-            });
-            focus();
-        },
-        focus,
-        removeLink: () => {
-            editor.send({
-                type: 'annotation.remove',
-                annotation: { name: PsPortableTextCoreConfig.linkAnnotation },
-            });
-            focus();
-        },
-        toggleDecorator: (decorator) => {
-            editor.send({ type: 'decorator.toggle', decorator });
-            focus();
-        },
-        toggleListItem: (listItem) => {
-            editor.send({ type: 'list item.toggle', listItem });
-            focus();
-        },
-        toggleQuote: () => {
-            editor.send({ type: 'style.toggle', style: PsPortableTextCoreConfig.styles.blockquote });
-            focus();
+        active: state.active,
+        addLink: (href) => PsPortableTextCommandService.setLink(editor, href),
+        closeLink: () => {
+            closeLink();
+            PsPortableTextCommandService.focus(editor);
         },
+        focus: () => PsPortableTextCommandService.focus(editor),
+        isLinkOpen,
+        linkHref: state.linkHref,
+        openLink,
+        removeLink: () => PsPortableTextCommandService.removeLink(editor),
+        toggleDecorator: (decorator) => PsPortableTextCommandService.toggleDecorator(editor, decorator),
+        toggleListItem: (listItem) => PsPortableTextCommandService.toggleListItem(editor, listItem),
+        toggleQuote: () => PsPortableTextCommandService.toggleQuote(editor),
     };
 };

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

@@ -2,5 +2,9 @@ export * from './components/ps-portable-text-core';
 export * from './constants/ps-portable-text-core-config';
 export * from './hooks/use-ps-portable-text-link-form';
 export * from './hooks/use-ps-portable-text-toolbar';
+export * from './interfaces/ps-portable-text-active-formats';
+export * from './interfaces/ps-portable-text-core-class-names';
+export * from './interfaces/ps-portable-text-core-props';
 export * from './interfaces/ps-portable-text-editor-labels';
+export * from './services/ps-portable-text-converter-service';
 export * from './services/ps-portable-text-editor-service';

package/dist/esm/portable-text-core/interfaces/ps-portable-text-active-formats.js

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

package/dist/esm/portable-text-core/interfaces/ps-portable-text-block-draft.js

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

package/dist/esm/portable-text-core/interfaces/ps-portable-text-core-class-names.js

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

package/dist/esm/portable-text-core/interfaces/ps-portable-text-core-context-data.js

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

package/dist/esm/portable-text-core/interfaces/ps-portable-text-core-props.js

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

package/dist/esm/portable-text-core/interfaces/ps-portable-text-extension-options.js

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

package/dist/esm/portable-text-core/interfaces/ps-portable-text-span-draft.js

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

package/dist/esm/portable-text-core/interfaces/ps-portable-text-toolbar-state.js

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

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

@@ -0,0 +1,73 @@
+import { PsPortableTextCoreConfig } from '../constants/ps-portable-text-core-config';
+import { PsPortableTextEditorService } from './ps-portable-text-editor-service';
+export class PsPortableTextCommandService {
+    static state(editor) {
+        return { active: this.active(editor), linkHref: this.linkHref(editor) };
+    }
+    static active(editor) {
+        const isActive = (name) => (editor === null ? false : editor.isActive(name));
+        const marks = PsPortableTextCoreConfig.decoratorMarks;
+        const decorators = PsPortableTextCoreConfig.decorators;
+        return {
+            bold: isActive(marks[decorators.bold]),
+            bulletedList: isActive(PsPortableTextCoreConfig.nodes.bulletList),
+            code: isActive(marks[decorators.code]),
+            italic: isActive(marks[decorators.italic]),
+            link: isActive(PsPortableTextCoreConfig.linkMark),
+            numberedList: isActive(PsPortableTextCoreConfig.nodes.orderedList),
+            quote: isActive(PsPortableTextCoreConfig.nodes.blockquote),
+            underline: isActive(marks[decorators.underline]),
+        };
+    }
+    static linkHref(editor) {
+        const href = editor === null ? undefined : editor.getAttributes(PsPortableTextCoreConfig.linkMark).href;
+        return typeof href === 'string' ? href : '';
+    }
+    static toggleDecorator(editor, decorator) {
+        const mark = PsPortableTextEditorService.lookup(PsPortableTextCoreConfig.decoratorMarks, decorator);
+        if (editor !== null && mark !== null)
+            editor.chain().focus().toggleMark(mark).run();
+    }
+    static toggleListItem(editor, listItem) {
+        const list = PsPortableTextEditorService.lookup(PsPortableTextCoreConfig.listNodes, listItem);
+        if (editor !== null && list !== null) {
+            editor.chain().focus().toggleList(list, PsPortableTextCoreConfig.nodes.listItem).run();
+        }
+    }
+    static toggleQuote(editor) {
+        if (editor !== null)
+            editor.chain().focus().toggleBlockquote().run();
+    }
+    static setLink(editor, href) {
+        if (editor === null)
+            return;
+        if (editor.state.selection.empty && !editor.isActive(PsPortableTextCoreConfig.linkMark)) {
+            editor
+                .chain()
+                .focus()
+                .insertContent({
+                type: PsPortableTextCoreConfig.nodes.text,
+                text: href.replace(PsPortableTextCoreConfig.mailtoPrefix, ''),
+                marks: [{ type: PsPortableTextCoreConfig.linkMark, attrs: { href } }],
+            })
+                .unsetMark(PsPortableTextCoreConfig.linkMark)
+                .run();
+            return;
+        }
+        editor
+            .chain()
+            .focus()
+            .extendMarkRange(PsPortableTextCoreConfig.linkMark)
+            .setLink({ href })
+            .run();
+    }
+    static removeLink(editor) {
+        if (editor !== null) {
+            editor.chain().focus().extendMarkRange(PsPortableTextCoreConfig.linkMark).unsetLink().run();
+        }
+    }
+    static focus(editor) {
+        if (editor !== null)
+            editor.commands.focus();
+    }
+}