@byline/richtext-lexical 0.9.3

package/dist/field/ui/dropdown.js

@@ -0,0 +1,150 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import * as __rspack_external_react from "react";
+const DropDownContext = /*#__PURE__*/ __rspack_external_react.createContext(null);
+function DropDownItem({ children, className, onClick, title }) {
+    const ref = (0, __rspack_external_react.useRef)(null);
+    const dropDownContext = __rspack_external_react.useContext(DropDownContext);
+    if (null === dropDownContext) throw new Error('DropDownItem must be used within a DropDown');
+    const { registerItem } = dropDownContext;
+    (0, __rspack_external_react.useEffect)(()=>{
+        if (ref?.current != null) registerItem(ref);
+    }, [
+        registerItem
+    ]);
+    return /*#__PURE__*/ jsx("button", {
+        className: className,
+        onClick: onClick,
+        ref: ref,
+        title: title,
+        type: "button",
+        children: children
+    });
+}
+function DropDownItems({ children, dropDownRef, onClose }) {
+    const [items, setItems] = (0, __rspack_external_react.useState)();
+    const [highlightedItem, setHighlightedItem] = (0, __rspack_external_react.useState)();
+    const registerItem = (0, __rspack_external_react.useCallback)((itemRef)=>{
+        setItems((prev)=>null != prev ? [
+                ...prev,
+                itemRef
+            ] : [
+                itemRef
+            ]);
+    }, []);
+    const handleKeyDown = (event)=>{
+        if (null == items) return;
+        const key = event.key;
+        if ([
+            'Escape',
+            'ArrowUp',
+            'ArrowDown',
+            'Tab'
+        ].includes(key)) event.preventDefault();
+        if ('Escape' === key || 'Tab' === key) onClose();
+        else if ('ArrowUp' === key) setHighlightedItem((prev)=>{
+            if (null == prev) return items[0];
+            const index = items.indexOf(prev) - 1;
+            return items[-1 === index ? items.length - 1 : index];
+        });
+        else if ('ArrowDown' === key) setHighlightedItem((prev)=>{
+            if (null == prev) return items[0];
+            return items[items.indexOf(prev) + 1];
+        });
+    };
+    const contextValue = (0, __rspack_external_react.useMemo)(()=>({
+            registerItem
+        }), [
+        registerItem
+    ]);
+    (0, __rspack_external_react.useEffect)(()=>{
+        if (null != items && null == highlightedItem) setHighlightedItem(items[0]);
+        if (highlightedItem?.current != null) highlightedItem.current.focus();
+    }, [
+        items,
+        highlightedItem
+    ]);
+    return /*#__PURE__*/ jsx(DropDownContext.Provider, {
+        value: contextValue,
+        children: /*#__PURE__*/ jsx("div", {
+            className: "dropdown",
+            ref: dropDownRef,
+            onKeyDown: handleKeyDown,
+            role: "menu",
+            tabIndex: -1,
+            children: children
+        })
+    });
+}
+function DropDown({ disabled = false, buttonLabel, buttonAriaLabel, buttonClassName, buttonIconClassName, children, stopCloseOnClickSelf }) {
+    const dropDownRef = (0, __rspack_external_react.useRef)(null);
+    const buttonRef = (0, __rspack_external_react.useRef)(null);
+    const [showDropDown, setShowDropDown] = (0, __rspack_external_react.useState)(false);
+    const handleClose = ()=>{
+        setShowDropDown(false);
+        if (buttonRef?.current != null) buttonRef.current.focus();
+    };
+    (0, __rspack_external_react.useEffect)(()=>{
+        const button = buttonRef.current;
+        const dropDown = dropDownRef.current;
+        if (showDropDown && null !== button && null !== dropDown) {
+            const { top, left } = button.getBoundingClientRect();
+            dropDown.style.top = `${top + 40}px`;
+            dropDown.style.left = `${Math.min(left, window.innerWidth - dropDown.offsetWidth - 20)}px`;
+        }
+    }, [
+        showDropDown
+    ]);
+    (0, __rspack_external_react.useEffect)(()=>{
+        const button = buttonRef.current;
+        if (null !== button && showDropDown) {
+            const handle = (event)=>{
+                const target = event.target;
+                if (null != stopCloseOnClickSelf) {
+                    if (dropDownRef?.current?.contains(target)) return;
+                }
+                if (!button.contains(target)) setShowDropDown(false);
+            };
+            document.addEventListener('click', handle);
+            return ()=>{
+                document.removeEventListener('click', handle);
+            };
+        }
+    }, [
+        showDropDown,
+        stopCloseOnClickSelf
+    ]);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs("button", {
+                type: "button",
+                disabled: disabled,
+                "aria-label": buttonAriaLabel ?? buttonLabel,
+                className: buttonClassName,
+                onClick: ()=>{
+                    setShowDropDown(!showDropDown);
+                },
+                ref: buttonRef,
+                children: [
+                    null != buttonIconClassName && /*#__PURE__*/ jsx("span", {
+                        className: buttonIconClassName
+                    }),
+                    null != buttonLabel && /*#__PURE__*/ jsx("span", {
+                        className: "text dropdown-button-text",
+                        children: buttonLabel
+                    }),
+                    /*#__PURE__*/ jsx("i", {
+                        className: "chevron-down"
+                    })
+                ]
+            }),
+            showDropDown && /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx(DropDownItems, {
+                dropDownRef: dropDownRef,
+                onClose: handleClose,
+                children: children
+            }), document.body)
+        ]
+    });
+}
+export { DropDown, DropDownItem };

package/dist/field/ui/file-input.js

@@ -0,0 +1,27 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./input.css";
+import * as __rspack_external_react from "react";
+function FileInput({ accept, label, onChange, 'data-test-id': dataTestId }) {
+    const inputId = __rspack_external_react.useId();
+    return /*#__PURE__*/ jsxs("div", {
+        className: "Input__wrapper",
+        children: [
+            /*#__PURE__*/ jsx("label", {
+                className: "Input__label",
+                htmlFor: inputId,
+                children: label
+            }),
+            /*#__PURE__*/ jsx("input", {
+                id: inputId,
+                type: "file",
+                accept: accept,
+                className: "Input__input",
+                onChange: (e)=>{
+                    onChange(e.target.files);
+                },
+                "data-test-id": dataTestId
+            })
+        ]
+    });
+}
+export default FileInput;

package/dist/field/ui/input.css

@@ -0,0 +1,23 @@
+.Input__wrapper {
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 10px;
+  display: flex;
+}
+
+.Input__label {
+  color: #666;
+  flex: 1;
+  display: flex;
+}
+
+.Input__input {
+  border: 1px solid #999;
+  border-radius: 5px;
+  flex: 2;
+  min-width: 0;
+  padding: 7px 10px;
+  font-size: 16px;
+  display: flex;
+}
+

package/dist/field/ui/modal.css

@@ -0,0 +1,73 @@
+.Modal__overlay {
+  flex-direction: column;
+  flex-grow: 0px;
+  flex-shrink: 1px;
+  z-index: 100;
+  background-color: #28282899;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: fixed;
+  inset: 0;
+}
+
+.Modal__modal {
+  flex-grow: 0px;
+  background-color: #fff;
+  border-radius: 10px;
+  flex-direction: column;
+  min-width: 300px;
+  min-height: 100px;
+  padding: 20px;
+  display: flex;
+  position: relative;
+  box-shadow: 0 0 20px #444;
+}
+
+.Modal__title {
+  color: #444;
+  border-bottom: 1px solid #ccc;
+  margin: 0;
+  padding-bottom: 10px;
+  font-size: 1.4rem;
+}
+
+.Modal__closeButton {
+  text-align: center;
+  cursor: pointer;
+  background-color: #eee;
+  border: 0;
+  border-radius: 20px;
+  justify-content: center;
+  align-items: center;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  position: absolute;
+  right: 20px;
+}
+
+.Modal__closeButton:hover {
+  background-color: #ddd;
+}
+
+.Modal__content {
+  padding-top: 20px;
+}
+
+[data-theme="dark"] .Modal__modal {
+  background-color: #111;
+}
+
+[data-theme="dark"] .Modal__closeButton {
+  background-color: #222;
+}
+
+[data-theme="dark"] .Modal__closeButton:hover {
+  background-color: #282828;
+}
+
+[data-theme="dark"] .Modal__title {
+  color: #ccc;
+}
+

package/dist/field/ui/modal.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type * as React from 'react';
+import { type ReactNode } from 'react';
+import './modal.css';
+export default function Modal({ onClose, children, title, closeOnClickOutside, }: {
+    children: ReactNode;
+    closeOnClickOutside?: boolean;
+    onClose: () => void;
+    title: string;
+}): React.JSX.Element;
+//# sourceMappingURL=modal.d.ts.map

package/dist/field/ui/modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/field/ui/modal.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AACnC,OAAO,EAAE,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAA;AAIzD,OAAO,aAAa,CAAA;AA0EpB,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,OAAO,EACP,QAAQ,EACR,KAAK,EACL,mBAA2B,GAC5B,EAAE;IACD,QAAQ,EAAE,SAAS,CAAA;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;CACd,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAOpB"}

package/dist/field/ui/modal.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import "./modal.css";
+function PortalImpl({ onClose, children, title, closeOnClickOutside }) {
+    const modalRef = useRef(null);
+    useEffect(()=>{
+        if (null !== modalRef.current) modalRef.current.focus();
+    }, []);
+    useEffect(()=>{
+        let modalOverlayElement = null;
+        const handler = (event)=>{
+            if (27 === event.keyCode) onClose();
+        };
+        const clickOutsideHandler = (event)=>{
+            const target = event.target;
+            if (null !== modalRef.current && !modalRef.current.contains(target) && closeOnClickOutside) onClose();
+        };
+        const modelElement = modalRef.current;
+        if (null !== modelElement) {
+            modalOverlayElement = modelElement.parentElement;
+            if (null !== modalOverlayElement) modalOverlayElement.addEventListener('click', clickOutsideHandler);
+        }
+        window.addEventListener('keydown', handler);
+        return ()=>{
+            window.removeEventListener('keydown', handler);
+            if (null !== modalOverlayElement) modalOverlayElement?.removeEventListener('click', clickOutsideHandler);
+        };
+    }, [
+        closeOnClickOutside,
+        onClose
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        className: "Modal__overlay",
+        role: "dialog",
+        children: /*#__PURE__*/ jsxs("div", {
+            className: "Modal__modal",
+            tabIndex: -1,
+            ref: modalRef,
+            children: [
+                /*#__PURE__*/ jsx("h2", {
+                    className: "Modal__title",
+                    children: title
+                }),
+                /*#__PURE__*/ jsx("button", {
+                    className: "Modal__closeButton",
+                    "aria-label": "Close modal",
+                    type: "button",
+                    onClick: onClose,
+                    children: "X"
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    className: "Modal__content",
+                    children: children
+                })
+            ]
+        })
+    });
+}
+function Modal({ onClose, children, title, closeOnClickOutside = false }) {
+    return /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx(PortalImpl, {
+        onClose: onClose,
+        title: title,
+        closeOnClickOutside: closeOnClickOutside,
+        children: children
+    }), document.body);
+}
+export default Modal;

package/dist/field/ui/placeholder-inline.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type * as React from 'react';
+import './placeholder.css';
+export default function PlaceholderInline({ children, className, }: {
+    children: React.ReactNode;
+    className?: string;
+}): React.JSX.Element;
+//# sourceMappingURL=placeholder-inline.d.ts.map

package/dist/field/ui/placeholder-inline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"placeholder-inline.d.ts","sourceRoot":"","sources":["../../../src/field/ui/placeholder-inline.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAInC,OAAO,mBAAmB,CAAA;AAK1B,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,QAAQ,EACR,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAGpB"}

package/dist/field/ui/placeholder-inline.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import "./placeholder.css";
+function PlaceholderInline({ children, className }) {
+    const classes = classnames('Placeholder__root', className);
+    return /*#__PURE__*/ jsx("span", {
+        className: classes,
+        children: children
+    });
+}
+export default PlaceholderInline;

package/dist/field/ui/placeholder.css

@@ -0,0 +1,26 @@
+.Placeholder__root {
+  color: #999;
+  text-overflow: ellipsis;
+  -webkit-user-select: none;
+  user-select: none;
+  white-space: nowrap;
+  pointer-events: none;
+  font-size: 15px;
+  display: inline-block;
+  position: absolute;
+  top: 8px;
+  left: 2px;
+  right: 0;
+  overflow: hidden;
+}
+
+.Placeholder__with_draggable_blocks {
+  left: 22px;
+}
+
+@media (max-width: 1025px) {
+  .ContentEditable__root {
+    left: 2px;
+  }
+}
+

package/dist/field/ui/placeholder.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type * as React from 'react';
+import './placeholder.css';
+export declare function Placeholder({ children, className, }: {
+    children: React.ReactNode;
+    className?: string;
+}): React.JSX.Element;
+//# sourceMappingURL=placeholder.d.ts.map

package/dist/field/ui/placeholder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"placeholder.d.ts","sourceRoot":"","sources":["../../../src/field/ui/placeholder.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAInC,OAAO,mBAAmB,CAAA;AAI1B,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAQpB"}

package/dist/field/ui/placeholder.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import "./placeholder.css";
+import { useEditorConfig } from "../config/editor-config-context.js";
+function Placeholder({ children, className }) {
+    const { config } = useEditorConfig();
+    const classes = classnames('Placeholder__root', className);
+    return /*#__PURE__*/ jsx("div", {
+        className: classes,
+        children: children
+    });
+}
+export { Placeholder };

package/dist/field/ui/select.css

@@ -0,0 +1,32 @@
+select {
+  appearance: none;
+  font-family: inherit;
+  font-size: inherit;
+  cursor: inherit;
+  line-height: inherit;
+  z-index: 1;
+  background-color: #0000;
+  border: none;
+  outline: none;
+  margin: 0;
+  padding: 0 1em 0 0;
+}
+
+:root {
+  --select-border: #393939;
+  --select-focus: #101484;
+  --select-arrow: var(--select-border);
+}
+
+.select {
+  border: 1px solid var(--select-border);
+  cursor: pointer;
+  background: linear-gradient(#fff 0%, #e5e5e5 100%);
+  border-radius: .25em;
+  min-width: 160px;
+  max-width: 290px;
+  padding: .25em .5em;
+  font-size: 1rem;
+  line-height: 1.4;
+}
+

package/dist/field/ui/select.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./select.css";
+import * as __rspack_external_react from "react";
+function Select({ children, label, className, ...other }) {
+    const generatedId = __rspack_external_react.useId();
+    const id = other.id ?? generatedId;
+    return /*#__PURE__*/ jsxs("div", {
+        className: "Input__wrapper",
+        children: [
+            /*#__PURE__*/ jsx("label", {
+                htmlFor: id,
+                style: {
+                    marginTop: '-1em'
+                },
+                className: "Input__label",
+                children: label
+            }),
+            /*#__PURE__*/ jsx("select", {
+                ...other,
+                id: id,
+                className: className ?? 'select',
+                children: children
+            })
+        ]
+    });
+}
+export default Select;

package/dist/field/ui/switch.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+function Switch({ checked, onClick, text, id }) {
+    const buttonId = useMemo(()=>`id_ ${Math.floor(10000 * Math.random())}`, []);
+    return /*#__PURE__*/ jsxs("div", {
+        className: "switch",
+        id: id,
+        children: [
+            /*#__PURE__*/ jsx("label", {
+                htmlFor: buttonId,
+                children: text
+            }),
+            /*#__PURE__*/ jsx("button", {
+                type: "button",
+                role: "switch",
+                "aria-checked": checked,
+                id: buttonId,
+                onClick: onClick,
+                children: /*#__PURE__*/ jsx("span", {})
+            })
+        ]
+    });
+}
+export default Switch;

package/dist/field/ui/text-area.css

@@ -0,0 +1,31 @@
+.TextArea__wrapper {
+  flex-direction: column;
+  margin-bottom: 10px;
+  display: flex;
+}
+
+.TextArea__label {
+  color: #666;
+  flex: 1;
+  margin-bottom: 4px;
+  display: flex;
+}
+
+.TextArea__input {
+  border: 1px solid #999;
+  border-radius: 1px;
+  min-width: 0;
+  padding: 7px 10px;
+  font-size: 16px;
+}
+
+:is(.dark, [data-theme="dark"]) .TextArea__label {
+  color: #ccc;
+}
+
+:is(.dark, [data-theme="dark"]) .TextArea__input {
+  color: #eee;
+  background-color: #1c1c1c;
+  border: 1px solid #666;
+}
+

package/dist/field/ui/text-area.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import "./text-area.css";
+function TextArea({ label, onChange, rows = 4, placeholder = '', 'data-test-id': dataTestId }) {
+    const inputId = useId();
+    return /*#__PURE__*/ jsxs("div", {
+        className: "TextArea__wrapper",
+        children: [
+            /*#__PURE__*/ jsx("label", {
+                className: "TextArea__label",
+                htmlFor: inputId,
+                children: label
+            }),
+            /*#__PURE__*/ jsx("textarea", {
+                rows: rows,
+                id: inputId,
+                className: "TextArea__input",
+                placeholder: placeholder,
+                onChange: (e)=>{
+                    onChange(e.target.value);
+                },
+                "data-test-id": dataTestId
+            })
+        ]
+    });
+}
+export { TextArea };

package/dist/field/ui/text-input.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { type HTMLInputTypeAttribute, type JSX } from 'react';
+import './input.css';
+type Props = Readonly<{
+    'data-test-id'?: string;
+    label: string;
+    onChange: (val: string) => void;
+    placeholder?: string;
+    value: string;
+    type?: HTMLInputTypeAttribute;
+}>;
+export default function TextInput({ label, value, onChange, placeholder, 'data-test-id': dataTestId, type, }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=text-input.d.ts.map

package/dist/field/ui/text-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-input.d.ts","sourceRoot":"","sources":["../../../src/field/ui/text-input.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,OAAO,EAAE,KAAK,sBAAsB,EAAE,KAAK,GAAG,EAAS,MAAM,OAAO,CAAA;AAEpE,OAAO,aAAa,CAAA;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,sBAAsB,CAAA;CAC9B,CAAC,CAAA;AAEF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,KAAK,EACL,KAAK,EACL,QAAQ,EACR,WAAgB,EAChB,cAAc,EAAE,UAAU,EAC1B,IAAa,GACd,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAqBrB"}

package/dist/field/ui/text-input.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import "./input.css";
+function TextInput({ label, value, onChange, placeholder = '', 'data-test-id': dataTestId, type = 'text' }) {
+    const inputId = useId();
+    return /*#__PURE__*/ jsxs("div", {
+        className: "Input__wrapper",
+        children: [
+            /*#__PURE__*/ jsx("label", {
+                className: "Input__label",
+                htmlFor: inputId,
+                children: label
+            }),
+            /*#__PURE__*/ jsx("input", {
+                id: inputId,
+                type: type,
+                className: "Input__input",
+                placeholder: placeholder,
+                value: value,
+                onChange: (e)=>{
+                    onChange(e.target.value);
+                },
+                "data-test-id": dataTestId
+            })
+        ]
+    });
+}
+export default TextInput;