npm - @byline/richtext-lexical - Versions diffs - 6.4.0 → 6.5.0 - Mend

@byline/richtext-lexical 6.4.0 → 6.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (57) hide show

package/dist/field/extensions/link/link-modal.js CHANGED Viewed

@@ -1,311 +1,119 @@
 "use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
-import { RelationPicker } from "@byline/admin/react";
-import { getAdminConfig, getCollectionDefinition, isSingleton } from "@byline/core";
-import { Button, Checkbox, CloseIcon, IconButton, Input, Label, Modal, RadioGroup, RadioGroupItem, Select } from "@byline/ui/react";
+import { getAdminConfig, isSingleton } from "@byline/core";
+import { Button, CloseIcon, IconButton, Input, Modal } from "@byline/ui/react";
 import { useModalFormState } from "../../shared/useModalFormState.js";
-import { validateUrl } from "../../utils/url.js";
-function emptyState(linkable) {
-    return {
-        text: '',
-        linkType: linkable.length > 0 ? 'internal' : 'custom',
-        url: '',
-        newTab: false,
-        targetCollection: linkable[0]?.path ?? null,
-        picked: null
-    };
-}
-function fromLinkData(data, linkable) {
-    const base = emptyState(linkable);
-    if (!data) return base;
-    const fields = data.fields;
-    if (!fields) return base;
-    const url = 'internal' === fields.linkType ? '' : fields.url ?? '';
-    const isPlaceholderUrl = '' === url || 'https://' === url;
-    const wantsInternal = linkable.length > 0 && ('internal' === fields.linkType || isPlaceholderUrl);
-    const linkType = wantsInternal ? 'internal' : 'custom';
-    const picked = 'internal' === fields.linkType ? {
-        targetDocumentId: fields.targetDocumentId,
-        targetCollectionId: fields.targetCollectionId,
-        targetCollectionPath: fields.targetCollectionPath,
-        document: fields.document
-    } : null;
-    return {
-        text: data.text ?? '',
-        linkType,
-        url: isPlaceholderUrl ? '' : url,
-        newTab: fields.newTab ?? false,
-        targetCollection: picked?.targetCollectionPath ?? linkable[0]?.path ?? null,
-        picked
-    };
-}
+import { LinkTargetFields } from "./link-target-fields.js";
+import { fromLinkAttributes, toLinkAttributes, validateLinkTarget } from "./link-target-state.js";
+const LINK_TARGET_OPTIONS = {
+    allowNone: false
+};
 const LinkModal = ({ isOpen = false, onSubmit, onClose, data: dataFromProps })=>{
     const linkable = useMemo(()=>getAdminConfig().collections.filter((collection)=>!isSingleton(collection) && true === collection.linksInEditor), []);
-    const [pickerOpen, setPickerOpen] = useState(false);
     const [urlError, setUrlError] = useState(null);
-    const [state, setState] = useModalFormState(isOpen, ()=>fromLinkData(dataFromProps, linkable), ()=>setUrlError(null));
-    const targetDefinition = state.targetCollection ? getCollectionDefinition(state.targetCollection) : null;
-    const targetDef = null == targetDefinition || isSingleton(targetDefinition) ? null : targetDefinition;
-    const collectionItems = useMemo(()=>linkable.map((c)=>({
-                label: c.labels.singular,
-                value: c.path
-            })), [
-        linkable
-    ]);
-    const pickedLabel = useMemo(()=>{
-        if ('internal' !== state.linkType || !state.picked) return null;
-        const title = state.picked.document?.title;
-        if ('string' == typeof title && title.length > 0) return title;
-        const pickedDefinition = getCollectionDefinition(state.picked.targetCollectionPath);
-        const pickedDef = null == pickedDefinition || isSingleton(pickedDefinition) ? null : pickedDefinition;
-        const short = state.picked.targetDocumentId.slice(0, 8);
-        return `${pickedDef?.labels.singular ?? state.picked.targetCollectionPath} · ${short}…`;
-    }, [
-        state.linkType,
-        state.picked
-    ]);
-    const handlePickerSelect = (selection)=>{
-        setPickerOpen(false);
-        setState((s)=>{
-            const targetCollection = s.targetCollection;
-            const titleField = getCollectionDefinition(targetCollection)?.useAsTitle;
-            const title = titleField ? selection.record?.fields?.[titleField] : void 0;
-            const path = selection.record?.path;
-            const document = {};
-            if ('string' == typeof title && title.length > 0) document.title = title;
-            if ('string' == typeof path && path.length > 0) document.path = path;
-            return {
-                ...s,
-                picked: {
-                    targetDocumentId: selection.targetDocumentId,
-                    targetCollectionId: selection.targetCollectionId,
-                    targetCollectionPath: targetCollection,
-                    document: Object.keys(document).length > 0 ? document : void 0
-                }
-            };
-        });
-    };
+    const [state, setState] = useModalFormState(isOpen, ()=>({
+            text: dataFromProps?.text ?? '',
+            target: fromLinkAttributes(dataFromProps?.fields, linkable, LINK_TARGET_OPTIONS)
+        }), ()=>setUrlError(null));
     const handleSave = ()=>{
-        if ('custom' === state.linkType) {
-            const url = state.url;
-            if (!url.startsWith('/') && !validateUrl(url)) return void setUrlError('Enter a valid URL or a root-relative path starting with /');
-        }
-        if ('internal' === state.linkType) {
-            if (!state.picked) return void setUrlError('Pick a target document');
-        }
-        const picked = state.picked;
-        const fields = 'custom' === state.linkType ? {
-            linkType: 'custom',
-            url: state.url,
-            newTab: state.newTab
-        } : {
-            linkType: 'internal',
-            newTab: state.newTab,
-            targetDocumentId: picked.targetDocumentId,
-            targetCollectionId: picked.targetCollectionId,
-            targetCollectionPath: picked.targetCollectionPath,
-            document: picked.document
-        };
+        const problem = validateLinkTarget(state.target);
+        if (null != problem) return void setUrlError(problem);
+        const fields = toLinkAttributes(state.target);
+        if (null == fields) return void setUrlError('Pick a target document');
         onSubmit({
             text: state.text.length > 0 ? state.text : null,
-            fields
+            fields: fields
         });
         onClose();
     };
     if (!isOpen) return null;
-    return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            /*#__PURE__*/ jsx(Modal, {
-                isOpen: isOpen,
-                onDismiss: onClose,
-                closeOnOverlayClick: false,
-                children: /*#__PURE__*/ jsxs(Modal.Container, {
-                    style: {
-                        maxWidth: '480px',
-                        width: '100%'
-                    },
+    return /*#__PURE__*/ jsx(Modal, {
+        isOpen: isOpen,
+        onDismiss: onClose,
+        closeOnOverlayClick: false,
+        children: /*#__PURE__*/ jsxs(Modal.Container, {
+            style: {
+                maxWidth: '480px',
+                width: '100%'
+            },
+            children: [
+                /*#__PURE__*/ jsxs(Modal.Header, {
+                    className: "flex items-center justify-between pt-4 mb-4",
                     children: [
-                        /*#__PURE__*/ jsxs(Modal.Header, {
-                            className: "flex items-center justify-between pt-4 mb-4",
-                            children: [
-                                /*#__PURE__*/ jsx("h3", {
-                                    className: "m-0 text-xl",
-                                    children: "Edit link"
-                                }),
-                                /*#__PURE__*/ jsx(IconButton, {
-                                    "aria-label": "Close",
-                                    size: "xs",
-                                    onClick: onClose,
-                                    children: /*#__PURE__*/ jsx(CloseIcon, {
-                                        width: "15px",
-                                        height: "15px",
-                                        svgClassName: "white-icon"
-                                    })
-                                })
-                            ]
+                        /*#__PURE__*/ jsx("h3", {
+                            className: "m-0 text-xl",
+                            children: "Edit link"
                         }),
-                        /*#__PURE__*/ jsx(Modal.Content, {
-                            children: /*#__PURE__*/ jsxs("div", {
-                                className: "flex flex-col gap-4",
-                                children: [
-                                    /*#__PURE__*/ jsx(Input, {
-                                        id: "link-text",
-                                        className: "mb-2",
-                                        name: "text",
-                                        label: "Link text",
-                                        placeholder: "Visible link text",
-                                        value: state.text,
-                                        onChange: (e)=>setState((s)=>({
-                                                    ...s,
-                                                    text: e.target.value
-                                                }))
-                                    }),
-                                    linkable.length > 0 && /*#__PURE__*/ jsxs(RadioGroup, {
-                                        id: "link-type",
-                                        name: "linkType",
-                                        "aria-label": "Link type",
-                                        direction: "row",
-                                        value: state.linkType,
-                                        onValueChange: (value)=>setState((s)=>({
-                                                    ...s,
-                                                    linkType: 'internal' === value ? 'internal' : 'custom'
-                                                })),
-                                        children: [
-                                            /*#__PURE__*/ jsx(RadioGroupItem, {
-                                                id: "link-type-internal",
-                                                value: "internal",
-                                                label: "Document"
-                                            }),
-                                            /*#__PURE__*/ jsx(RadioGroupItem, {
-                                                id: "link-type-custom",
-                                                value: "custom",
-                                                label: "Custom URL"
-                                            })
-                                        ]
-                                    }),
-                                    'custom' === state.linkType && /*#__PURE__*/ jsx(Input, {
-                                        id: "link-url",
-                                        name: "url",
-                                        label: "URL",
-                                        placeholder: "https://example.com or /path",
-                                        value: state.url,
-                                        errorText: urlError ?? void 0,
-                                        error: null != urlError,
-                                        onChange: (e)=>{
-                                            setUrlError(null);
-                                            setState((s)=>({
-                                                    ...s,
-                                                    url: e.target.value
-                                                }));
-                                        }
-                                    }),
-                                    'internal' === state.linkType && /*#__PURE__*/ jsxs("div", {
-                                        className: "flex flex-col gap-3 mt-2",
-                                        children: [
-                                            linkable.length > 1 && /*#__PURE__*/ jsxs("div", {
-                                                children: [
-                                                    /*#__PURE__*/ jsx(Label, {
-                                                        id: "link-target-collection",
-                                                        htmlFor: "link-target-collection",
-                                                        className: "mb-1",
-                                                        label: "Target collection"
-                                                    }),
-                                                    /*#__PURE__*/ jsx(Select, {
-                                                        size: "sm",
-                                                        items: collectionItems,
-                                                        placeholder: "Target collection",
-                                                        value: state.targetCollection ?? void 0,
-                                                        onValueChange: (value)=>{
-                                                            if (null == value) return;
-                                                            setState((s)=>({
-                                                                    ...s,
-                                                                    targetCollection: value
-                                                                }));
-                                                        }
-                                                    })
-                                                ]
-                                            }),
-                                            /*#__PURE__*/ jsxs("div", {
-                                                className: "border rounded p-3",
-                                                children: [
-                                                    /*#__PURE__*/ jsx(Label, {
-                                                        id: "link-target-document",
-                                                        htmlFor: "link-target-document",
-                                                        className: "mb-1",
-                                                        label: "Target document"
-                                                    }),
-                                                    /*#__PURE__*/ jsxs("div", {
-                                                        className: "flex items-center justify-between gap-2",
-                                                        children: [
-                                                            pickedLabel && /*#__PURE__*/ jsx("span", {
-                                                                className: "text-sm text-accent-400 truncate",
-                                                                children: pickedLabel
-                                                            }),
-                                                            /*#__PURE__*/ jsx(Button, {
-                                                                size: "sm",
-                                                                variant: "outlined",
-                                                                intent: "noeffect",
-                                                                type: "button",
-                                                                onClick: ()=>setPickerOpen(true),
-                                                                disabled: !state.targetCollection,
-                                                                children: pickedLabel ? 'Change' : `Pick ${targetDef?.labels.singular ?? 'document'}…`
-                                                            })
-                                                        ]
-                                                    })
-                                                ]
-                                            }),
-                                            urlError && 'internal' === state.linkType && /*#__PURE__*/ jsx("span", {
-                                                className: "text-xs text-red-400",
-                                                children: urlError
-                                            })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ jsx(Checkbox, {
-                                        id: "link-new-tab",
-                                        name: "newTab",
-                                        label: "Open in new tab",
-                                        checked: state.newTab,
-                                        onCheckedChange: (checked)=>setState((s)=>({
-                                                    ...s,
-                                                    newTab: true === checked
-                                                }))
-                                    })
-                                ]
+                        /*#__PURE__*/ jsx(IconButton, {
+                            "aria-label": "Close",
+                            size: "xs",
+                            onClick: onClose,
+                            children: /*#__PURE__*/ jsx(CloseIcon, {
+                                width: "15px",
+                                height: "15px",
+                                svgClassName: "white-icon"
                             })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(Modal.Content, {
+                    children: /*#__PURE__*/ jsxs("div", {
+                        className: "flex flex-col gap-4",
+                        children: [
+                            /*#__PURE__*/ jsx(Input, {
+                                id: "link-text",
+                                className: "mb-2",
+                                name: "text",
+                                label: "Link text",
+                                placeholder: "Visible link text",
+                                value: state.text,
+                                onChange: (e)=>setState((s)=>({
+                                            ...s,
+                                            text: e.target.value
+                                        }))
+                            }),
+                            /*#__PURE__*/ jsx(LinkTargetFields, {
+                                idPrefix: "link",
+                                state: state.target,
+                                onChange: (target)=>{
+                                    setUrlError(null);
+                                    setState((s)=>({
+                                            ...s,
+                                            target
+                                        }));
+                                },
+                                linkable: linkable,
+                                allowNone: false,
+                                error: urlError,
+                                legend: "Link type"
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ jsxs(Modal.Actions, {
+                    className: "flex gap-3",
+                    children: [
+                        /*#__PURE__*/ jsx(Button, {
+                            size: "sm",
+                            intent: "noeffect",
+                            type: "button",
+                            onClick: onClose,
+                            className: "min-w-[70px]",
+                            children: "Cancel"
                         }),
-                        /*#__PURE__*/ jsxs(Modal.Actions, {
-                            className: "flex gap-3",
-                            children: [
-                                /*#__PURE__*/ jsx(Button, {
-                                    size: "sm",
-                                    intent: "noeffect",
-                                    type: "button",
-                                    onClick: onClose,
-                                    className: "min-w-[70px]",
-                                    children: "Cancel"
-                                }),
-                                /*#__PURE__*/ jsx(Button, {
-                                    size: "sm",
-                                    intent: "primary",
-                                    type: "button",
-                                    onClick: handleSave,
-                                    className: "min-w-[70px]",
-                                    children: "Save"
-                                })
-                            ]
+                        /*#__PURE__*/ jsx(Button, {
+                            size: "sm",
+                            intent: "primary",
+                            type: "button",
+                            onClick: handleSave,
+                            className: "min-w-[70px]",
+                            children: "Save"
                         })
                     ]
                 })
-            }),
-            'internal' === state.linkType && state.targetCollection && /*#__PURE__*/ jsx(RelationPicker, {
-                targetCollectionPath: state.targetCollection,
-                targetDefinition: targetDef,
-                isOpen: pickerOpen,
-                onSelect: handlePickerSelect,
-                onDismiss: ()=>setPickerOpen(false)
-            })
-        ]
+            ]
+        })
     });
 };
 export { LinkModal };

package/dist/field/extensions/link/link-target-fields.css ADDED Viewed

@@ -0,0 +1,59 @@
+.byline-link-target-frame {
+  border: var(--border-width-thin, 1px) var(--border-style-solid, solid) var(--field-border);
+  border-radius: var(--border-radius-md, 6px);
+  margin-top: .25rem;
+  padding: .5rem;
+}
+.byline-link-target-tile {
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--spacing-8, .5rem);
+  padding: var(--spacing-8, .5rem);
+  border: var(--border-width-thin, 1px) var(--border-style-solid, solid) var(--primary-500);
+  border-radius: var(--border-radius-md, 6px);
+  font-size: var(--font-size-xs);
+  display: flex;
+}
+.byline-link-target-summary {
+  flex-direction: column;
+  gap: .125rem;
+  min-width: 0;
+  display: flex;
+}
+.byline-link-target-kind {
+  color: var(--gray-500);
+}
+.byline-link-target-value {
+  color: var(--gray-900);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.byline-link-target-actions {
+  align-items: center;
+  gap: var(--spacing-4, .25rem);
+  flex-shrink: 0;
+  display: flex;
+}
+.byline-link-target-actions .byline-button {
+  color: var(--gray-900);
+}
+:is([data-theme="dark"], .dark) .byline-link-target-frame {
+  border-color: var(--canvas-700, var(--field-border));
+}
+:is([data-theme="dark"], .dark) .byline-link-target-value {
+  color: var(--gray-100);
+}
+:is([data-theme="dark"], .dark) .byline-link-target-actions .byline-button {
+  color: var(--gray-200);
+}

package/dist/field/extensions/link/link-target-fields.d.ts ADDED Viewed

@@ -0,0 +1,38 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+/**
+ * The "where does this point?" sub-form, shared by the link modal and the
+ * inline-image modal.
+ *
+ * Purely presentational — every decision lives in `link-target-state.ts`,
+ * which is where the rules are tested. This file owns the markup, the
+ * picker's open/closed state, and nothing else.
+ *
+ * `idPrefix` is required rather than defaulted: two of these can be
+ * mounted in one document (an image modal over a link modal), and
+ * duplicate element ids break the `Label`/`htmlFor` association that
+ * screen readers depend on.
+ */
+import type * as React from 'react';
+import type { MultiCollectionDefinition } from '@byline/core';
+import type { LinkTargetState } from './link-target-state.js';
+import './link-target-fields.css';
+export interface LinkTargetFieldsProps {
+    idPrefix: string;
+    state: LinkTargetState;
+    onChange: (next: LinkTargetState) => void;
+    /** Collections with `linksInEditor: true`. Empty disables the picker. */
+    linkable: MultiCollectionDefinition[];
+    /** Offer a "no link" choice. See `LinkTargetOptions.allowNone`. */
+    allowNone: boolean;
+    /** Validation message from `validateLinkTarget`, if the form was submitted. */
+    error?: string | null;
+    /** Label above the kind radio. */
+    legend?: string;
+}
+export declare const LinkTargetFields: React.FC<LinkTargetFieldsProps>;