@pallasoft/ps-input-components 2.2.0 → 3.1.0

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

@@ -2,13 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsPortableTextCoreConfig = void 0;
 const ps_models_1 = require("@pallasoft/ps-models");
-const editor_1 = require("@portabletext/editor");
 const Models = ps_models_1.Common.PortableTextConfig;
 exports.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],
@@ -17,19 +19,37 @@ exports.PsPortableTextCoreConfig = {
     },
     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 })),
-    }),
+    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/portable-text-core/contexts/ps-portable-text-core-context.d.ts

@@ -0,0 +1,2 @@
+import type { PsPortableTextCoreContextData } from '../interfaces/ps-portable-text-core-context-data';
+export declare const PsPortableTextCoreContext: import("react").Context<PsPortableTextCoreContextData>;

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsPortableTextCoreContext = void 0;
+const react_1 = require("react");
+const ps_portable_text_command_service_1 = require("../services/ps-portable-text-command-service");
+exports.PsPortableTextCoreContext = (0, react_1.createContext)({
+    closeLink: () => undefined,
+    editor: null,
+    isLinkOpen: false,
+    openLink: () => undefined,
+    state: ps_portable_text_command_service_1.PsPortableTextCommandService.state(null),
+});

package/dist/portable-text-core/hooks/use-ps-portable-text-link-form.d.ts

@@ -1,9 +1,11 @@
 import { type FormEvent } from 'react';
 export interface UsePsPortableTextLinkFormOptions {
+    href?: string;
+    isOpen?: boolean;
     onClose: () => void;
     onSubmit: (href: string) => void;
 }
-export declare const usePsPortableTextLinkForm: ({ onClose, onSubmit, }: UsePsPortableTextLinkFormOptions) => {
+export declare const usePsPortableTextLinkForm: ({ href, isOpen, onClose, onSubmit, }: UsePsPortableTextLinkFormOptions) => {
     address: string;
     close: () => void;
     hasError: boolean;

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

@@ -3,9 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.usePsPortableTextLinkForm = void 0;
 const react_1 = require("react");
 const ps_portable_text_editor_service_1 = require("../services/ps-portable-text-editor-service");
-const usePsPortableTextLinkForm = ({ onClose, onSubmit, }) => {
+const usePsPortableTextLinkForm = ({ href, isOpen = false, onClose, onSubmit, }) => {
     const [address, setAddress] = (0, react_1.useState)('');
     const [hasError, setHasError] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (!isOpen)
+            return;
+        setAddress(href === undefined ? '' : href);
+        setHasError(false);
+    }, [isOpen]);
     return {
         address,
         close: () => {
@@ -22,14 +28,14 @@ const usePsPortableTextLinkForm = ({ onClose, onSubmit, }) => {
         submit: (event) => {
             event.preventDefault();
             event.stopPropagation();
-            const href = ps_portable_text_editor_service_1.PsPortableTextEditorService.normalizeLink(address);
-            if (href === null) {
+            const normalized = ps_portable_text_editor_service_1.PsPortableTextEditorService.normalizeLink(address);
+            if (normalized === null) {
                 setHasError(true);
                 return;
             }
             setAddress('');
             setHasError(false);
-            onSubmit(href);
+            onSubmit(normalized);
         },
     };
 };

package/dist/portable-text-core/hooks/use-ps-portable-text-toolbar.d.ts

@@ -1,16 +1,11 @@
 export declare const usePsPortableTextToolbar: () => {
-    active: {
-        bold: boolean;
-        bulletedList: boolean;
-        code: boolean;
-        italic: boolean;
-        link: boolean;
-        numberedList: boolean;
-        quote: boolean;
-        underline: boolean;
-    };
+    active: import("..").PsPortableTextActiveFormats;
     addLink: (href: string) => void;
+    closeLink: () => void;
     focus: () => void;
+    isLinkOpen: boolean;
+    linkHref: string;
+    openLink: () => void;
     removeLink: () => void;
     toggleDecorator: (decorator: string) => void;
     toggleListItem: (listItem: string) => void;

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

@@ -1,58 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.usePsPortableTextToolbar = void 0;
-const editor_1 = require("@portabletext/editor");
-const selectors_1 = require("@portabletext/editor/selectors");
-const ps_portable_text_core_config_1 = require("../constants/ps-portable-text-core-config");
+const react_1 = require("react");
+const ps_portable_text_core_context_1 = require("../contexts/ps-portable-text-core-context");
+const ps_portable_text_command_service_1 = require("../services/ps-portable-text-command-service");
 const usePsPortableTextToolbar = () => {
-    const editor = (0, editor_1.useEditor)();
-    const isBold = (0, editor_1.useEditorSelector)(editor, (0, selectors_1.isActiveDecorator)(ps_portable_text_core_config_1.PsPortableTextCoreConfig.decorators.bold));
-    const isItalic = (0, editor_1.useEditorSelector)(editor, (0, selectors_1.isActiveDecorator)(ps_portable_text_core_config_1.PsPortableTextCoreConfig.decorators.italic));
-    const isUnderline = (0, editor_1.useEditorSelector)(editor, (0, selectors_1.isActiveDecorator)(ps_portable_text_core_config_1.PsPortableTextCoreConfig.decorators.underline));
-    const isCode = (0, editor_1.useEditorSelector)(editor, (0, selectors_1.isActiveDecorator)(ps_portable_text_core_config_1.PsPortableTextCoreConfig.decorators.code));
-    const isBulletedList = (0, editor_1.useEditorSelector)(editor, (0, selectors_1.isActiveListItem)(ps_portable_text_core_config_1.PsPortableTextCoreConfig.listItems.bullet));
-    const isNumberedList = (0, editor_1.useEditorSelector)(editor, (0, selectors_1.isActiveListItem)(ps_portable_text_core_config_1.PsPortableTextCoreConfig.listItems.number));
-    const isQuote = (0, editor_1.useEditorSelector)(editor, (0, selectors_1.isActiveStyle)(ps_portable_text_core_config_1.PsPortableTextCoreConfig.styles.blockquote));
-    const isLink = (0, editor_1.useEditorSelector)(editor, (0, selectors_1.isActiveAnnotation)(ps_portable_text_core_config_1.PsPortableTextCoreConfig.linkAnnotation));
-    const focus = () => editor.send({ type: 'focus' });
+    const { closeLink, editor, isLinkOpen, openLink, state } = (0, react_1.useContext)(ps_portable_text_core_context_1.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: ps_portable_text_core_config_1.PsPortableTextCoreConfig.linkAnnotation, value: { href } },
-            });
-            focus();
-        },
-        focus,
-        removeLink: () => {
-            editor.send({
-                type: 'annotation.remove',
-                annotation: { name: ps_portable_text_core_config_1.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: ps_portable_text_core_config_1.PsPortableTextCoreConfig.styles.blockquote });
-            focus();
+        active: state.active,
+        addLink: (href) => ps_portable_text_command_service_1.PsPortableTextCommandService.setLink(editor, href),
+        closeLink: () => {
+            closeLink();
+            ps_portable_text_command_service_1.PsPortableTextCommandService.focus(editor);
         },
+        focus: () => ps_portable_text_command_service_1.PsPortableTextCommandService.focus(editor),
+        isLinkOpen,
+        linkHref: state.linkHref,
+        openLink,
+        removeLink: () => ps_portable_text_command_service_1.PsPortableTextCommandService.removeLink(editor),
+        toggleDecorator: (decorator) => ps_portable_text_command_service_1.PsPortableTextCommandService.toggleDecorator(editor, decorator),
+        toggleListItem: (listItem) => ps_portable_text_command_service_1.PsPortableTextCommandService.toggleListItem(editor, listItem),
+        toggleQuote: () => ps_portable_text_command_service_1.PsPortableTextCommandService.toggleQuote(editor),
     };
 };
 exports.usePsPortableTextToolbar = usePsPortableTextToolbar;

package/dist/portable-text-core/index.d.ts

@@ -2,6 +2,10 @@ 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';
-export type { BlockAnnotationRenderProps, BlockDecoratorRenderProps, BlockRenderProps, PortableTextBlock, } from '@portabletext/editor';
+export type { PortableTextBlock } from '@portabletext/schema';

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

@@ -18,5 +18,9 @@ __exportStar(require("./components/ps-portable-text-core"), exports);
 __exportStar(require("./constants/ps-portable-text-core-config"), exports);
 __exportStar(require("./hooks/use-ps-portable-text-link-form"), exports);
 __exportStar(require("./hooks/use-ps-portable-text-toolbar"), exports);
+__exportStar(require("./interfaces/ps-portable-text-active-formats"), exports);
+__exportStar(require("./interfaces/ps-portable-text-core-class-names"), exports);
+__exportStar(require("./interfaces/ps-portable-text-core-props"), exports);
 __exportStar(require("./interfaces/ps-portable-text-editor-labels"), exports);
+__exportStar(require("./services/ps-portable-text-converter-service"), exports);
 __exportStar(require("./services/ps-portable-text-editor-service"), exports);

package/dist/portable-text-core/interfaces/ps-portable-text-active-formats.d.ts

@@ -0,0 +1,10 @@
+export interface PsPortableTextActiveFormats {
+    bold: boolean;
+    bulletedList: boolean;
+    code: boolean;
+    italic: boolean;
+    link: boolean;
+    numberedList: boolean;
+    quote: boolean;
+    underline: boolean;
+}

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

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

package/dist/portable-text-core/interfaces/ps-portable-text-block-draft.d.ts

@@ -0,0 +1,7 @@
+import type { JSONContent } from '@tiptap/core';
+export interface PsPortableTextBlockDraft {
+    level?: number;
+    listItem?: string;
+    paragraph: JSONContent;
+    style: string;
+}

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

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

package/dist/portable-text-core/interfaces/ps-portable-text-core-class-names.d.ts

@@ -0,0 +1,8 @@
+export interface PsPortableTextCoreClassNames {
+    blockquote: string;
+    bulletList: string;
+    code: string;
+    link: string;
+    orderedList: string;
+    placeholder: string;
+}

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

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

package/dist/portable-text-core/interfaces/ps-portable-text-core-context-data.d.ts

@@ -0,0 +1,9 @@
+import type { Editor } from '@tiptap/core';
+import type { PsPortableTextToolbarState } from './ps-portable-text-toolbar-state';
+export interface PsPortableTextCoreContextData {
+    closeLink: () => void;
+    editor: Editor | null;
+    isLinkOpen: boolean;
+    openLink: () => void;
+    state: PsPortableTextToolbarState;
+}

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

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

package/dist/portable-text-core/interfaces/ps-portable-text-core-props.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+import type { PortableTextBlock } from '@portabletext/schema';
+import type { PsPortableTextCoreClassNames } from './ps-portable-text-core-class-names';
+export interface PsPortableTextCoreProps {
+    className?: string;
+    classNames: PsPortableTextCoreClassNames;
+    disabled?: boolean;
+    editableClassName?: string;
+    fallback?: ReactNode;
+    label?: string;
+    minRows?: number;
+    onChange: (value: PortableTextBlock[]) => void;
+    placeholder?: string;
+    toolbar?: ReactNode;
+    value: PortableTextBlock[];
+}

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

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

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

@@ -3,6 +3,7 @@ export interface PsPortableTextEditorLabels {
     bulletedList: string;
     cancel: string;
     code: string;
+    editor?: string;
     invalidLink: string;
     italic: string;
     link: string;

package/dist/portable-text-core/interfaces/ps-portable-text-extension-options.d.ts

@@ -0,0 +1,6 @@
+import type { PsPortableTextCoreClassNames } from './ps-portable-text-core-class-names';
+export interface PsPortableTextExtensionOptions {
+    classNames: PsPortableTextCoreClassNames;
+    onLinkShortcut: () => void;
+    placeholder: string;
+}

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

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

package/dist/portable-text-core/interfaces/ps-portable-text-span-draft.d.ts

@@ -0,0 +1,4 @@
+export interface PsPortableTextSpanDraft {
+    marks: string[];
+    text: string;
+}

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

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

package/dist/portable-text-core/interfaces/ps-portable-text-toolbar-state.d.ts

@@ -0,0 +1,5 @@
+import type { PsPortableTextActiveFormats } from './ps-portable-text-active-formats';
+export interface PsPortableTextToolbarState {
+    active: PsPortableTextActiveFormats;
+    linkHref: string;
+}

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

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

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

@@ -0,0 +1,14 @@
+import type { Editor } from '@tiptap/core';
+import type { PsPortableTextActiveFormats } from '../interfaces/ps-portable-text-active-formats';
+import type { PsPortableTextToolbarState } from '../interfaces/ps-portable-text-toolbar-state';
+export declare class PsPortableTextCommandService {
+    static state(editor: Editor | null): PsPortableTextToolbarState;
+    static active(editor: Editor | null): PsPortableTextActiveFormats;
+    static linkHref(editor: Editor | null): string;
+    static toggleDecorator(editor: Editor | null, decorator: string): void;
+    static toggleListItem(editor: Editor | null, listItem: string): void;
+    static toggleQuote(editor: Editor | null): void;
+    static setLink(editor: Editor | null, href: string): void;
+    static removeLink(editor: Editor | null): void;
+    static focus(editor: Editor | null): void;
+}

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

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsPortableTextCommandService = void 0;
+const ps_portable_text_core_config_1 = require("../constants/ps-portable-text-core-config");
+const ps_portable_text_editor_service_1 = require("./ps-portable-text-editor-service");
+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 = ps_portable_text_core_config_1.PsPortableTextCoreConfig.decoratorMarks;
+        const decorators = ps_portable_text_core_config_1.PsPortableTextCoreConfig.decorators;
+        return {
+            bold: isActive(marks[decorators.bold]),
+            bulletedList: isActive(ps_portable_text_core_config_1.PsPortableTextCoreConfig.nodes.bulletList),
+            code: isActive(marks[decorators.code]),
+            italic: isActive(marks[decorators.italic]),
+            link: isActive(ps_portable_text_core_config_1.PsPortableTextCoreConfig.linkMark),
+            numberedList: isActive(ps_portable_text_core_config_1.PsPortableTextCoreConfig.nodes.orderedList),
+            quote: isActive(ps_portable_text_core_config_1.PsPortableTextCoreConfig.nodes.blockquote),
+            underline: isActive(marks[decorators.underline]),
+        };
+    }
+    static linkHref(editor) {
+        const href = editor === null ? undefined : editor.getAttributes(ps_portable_text_core_config_1.PsPortableTextCoreConfig.linkMark).href;
+        return typeof href === 'string' ? href : '';
+    }
+    static toggleDecorator(editor, decorator) {
+        const mark = ps_portable_text_editor_service_1.PsPortableTextEditorService.lookup(ps_portable_text_core_config_1.PsPortableTextCoreConfig.decoratorMarks, decorator);
+        if (editor !== null && mark !== null)
+            editor.chain().focus().toggleMark(mark).run();
+    }
+    static toggleListItem(editor, listItem) {
+        const list = ps_portable_text_editor_service_1.PsPortableTextEditorService.lookup(ps_portable_text_core_config_1.PsPortableTextCoreConfig.listNodes, listItem);
+        if (editor !== null && list !== null) {
+            editor.chain().focus().toggleList(list, ps_portable_text_core_config_1.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(ps_portable_text_core_config_1.PsPortableTextCoreConfig.linkMark)) {
+            editor
+                .chain()
+                .focus()
+                .insertContent({
+                type: ps_portable_text_core_config_1.PsPortableTextCoreConfig.nodes.text,
+                text: href.replace(ps_portable_text_core_config_1.PsPortableTextCoreConfig.mailtoPrefix, ''),
+                marks: [{ type: ps_portable_text_core_config_1.PsPortableTextCoreConfig.linkMark, attrs: { href } }],
+            })
+                .unsetMark(ps_portable_text_core_config_1.PsPortableTextCoreConfig.linkMark)
+                .run();
+            return;
+        }
+        editor
+            .chain()
+            .focus()
+            .extendMarkRange(ps_portable_text_core_config_1.PsPortableTextCoreConfig.linkMark)
+            .setLink({ href })
+            .run();
+    }
+    static removeLink(editor) {
+        if (editor !== null) {
+            editor.chain().focus().extendMarkRange(ps_portable_text_core_config_1.PsPortableTextCoreConfig.linkMark).unsetLink().run();
+        }
+    }
+    static focus(editor) {
+        if (editor !== null)
+            editor.commands.focus();
+    }
+}
+exports.PsPortableTextCommandService = PsPortableTextCommandService;

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

@@ -0,0 +1,18 @@
+import type { PortableTextBlock } from '@portabletext/schema';
+import type { JSONContent } from '@tiptap/core';
+export declare class PsPortableTextConverterService {
+    static toDocument(blocks: PortableTextBlock[]): JSONContent;
+    static toBlocks(document: JSONContent): PortableTextBlock[];
+    private static drafts;
+    private static block;
+    private static spans;
+    private static spanMarks;
+    private static paragraph;
+    private static listNode;
+    private static listItem;
+    private static level;
+    private static href;
+    private static marks;
+    private static children;
+    private static isSame;
+}