@byline/richtext-lexical 0.9.3

package/dist/field/toolbar-extensions.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { COMMAND_PRIORITY_CRITICAL, SELECTION_CHANGE_COMMAND } from "lexical";
+const ToolbarExtensionsContext = /*#__PURE__*/ createContext(null);
+function ToolbarExtensionsProvider({ children }) {
+    const [rootEditor] = useLexicalComposerContext();
+    const [activeEditor, setActiveEditor] = useState(rootEditor);
+    const [itemsById, setItemsById] = useState(()=>new Map());
+    useEffect(()=>rootEditor.registerCommand(SELECTION_CHANGE_COMMAND, (_payload, newEditor)=>{
+            setActiveEditor(newEditor);
+            return false;
+        }, COMMAND_PRIORITY_CRITICAL), [
+        rootEditor
+    ]);
+    const register = useCallback((item)=>{
+        setItemsById((prev)=>{
+            const next = new Map(prev);
+            next.set(item.id, item);
+            return next;
+        });
+        return ()=>{
+            setItemsById((prev)=>{
+                if (!prev.has(item.id)) return prev;
+                const next = new Map(prev);
+                next.delete(item.id);
+                return next;
+            });
+        };
+    }, []);
+    const items = useMemo(()=>Array.from(itemsById.values()), [
+        itemsById
+    ]);
+    const value = useMemo(()=>({
+            items,
+            register,
+            editor: activeEditor,
+            rootEditor
+        }), [
+        items,
+        register,
+        activeEditor,
+        rootEditor
+    ]);
+    return /*#__PURE__*/ jsx(ToolbarExtensionsContext.Provider, {
+        value: value,
+        children: children
+    });
+}
+function useToolbarExtensions() {
+    const context = useContext(ToolbarExtensionsContext);
+    if (null == context) throw new Error('useToolbarExtensions must be used within a ToolbarExtensionsProvider');
+    return context;
+}
+export { ToolbarExtensionsProvider, useToolbarExtensions };

package/dist/field/types.js

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

package/dist/field/ui/button.css

@@ -0,0 +1,31 @@
+.Button__root {
+  cursor: pointer;
+  background-color: #eee;
+  border: 0;
+  border-radius: 5px;
+  padding: 10px 15px;
+  font-size: 14px;
+}
+
+.Button__root:hover {
+  background-color: #ddd;
+}
+
+.Button__small {
+  padding: 5px 10px;
+  font-size: 13px;
+}
+
+.Button__disabled:hover {
+  background-color: #eee;
+}
+
+[data-theme="dark"] .Button__root {
+  color: #ccc;
+  background-color: #222;
+}
+
+[data-theme="dark"] .Button__root:hover {
+  background-color: #282828;
+}
+

package/dist/field/ui/button.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import "./button.css";
+import joinClasses from "../utils/joinClasses.js";
+function Button({ 'data-test-id': dataTestId, children, className, onClick, disabled, small, title }) {
+    return /*#__PURE__*/ jsx("button", {
+        type: "button",
+        disabled: disabled,
+        className: joinClasses('Button__root', null != disabled && 'Button__disabled', null != small && 'Button__small', className),
+        onClick: onClick,
+        title: title,
+        "aria-label": title,
+        ...null != dataTestId && {
+            'data-test-id': dataTestId
+        },
+        children: children
+    });
+}
+export { Button };

package/dist/field/ui/checkbox.css

@@ -0,0 +1,46 @@
+[type="checkbox"]:checked, [type="checkbox"]:not(:checked) {
+  position: absolute;
+  left: -9999px;
+}
+
+[type="checkbox"]:checked + label, [type="checkbox"]:not(:checked) + label {
+  cursor: pointer;
+  color: #666;
+  padding-right: 55px;
+  line-height: 20px;
+  display: inline-block;
+  position: relative;
+}
+
+[type="checkbox"]:checked + label:before, [type="checkbox"]:not(:checked) + label:before {
+  content: "";
+  background: #fff;
+  border: 1px solid #666;
+  width: 18px;
+  height: 18px;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+[type="checkbox"]:checked + label:after, [type="checkbox"]:not(:checked) + label:after {
+  content: "";
+  background: #222;
+  width: 8px;
+  height: 8px;
+  transition: all .2s;
+  position: absolute;
+  top: 6px;
+  right: 6px;
+}
+
+[type="checkbox"]:not(:checked) + label:after {
+  opacity: 0;
+  transform: scale(0);
+}
+
+[type="checkbox"]:checked + label:after {
+  opacity: 1;
+  transform: scale(1);
+}
+

package/dist/field/ui/color-picker.css

@@ -0,0 +1,75 @@
+.color-picker-wrapper {
+  padding: 20px;
+}
+
+.color-picker-basic-color {
+  flex-wrap: wrap;
+  gap: 10px;
+  margin: 0;
+  padding: 0;
+  display: flex;
+}
+
+.color-picker-basic-color button {
+  cursor: pointer;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  width: 16px;
+  height: 16px;
+  list-style-type: none;
+}
+
+.color-picker-basic-color button.active {
+  box-shadow: 0 0 2px 2px #0000004d;
+}
+
+.color-picker-saturation {
+  -webkit-user-select: none;
+  user-select: none;
+  background-image: linear-gradient(#0000, #000), linear-gradient(to right, #fff, #0000);
+  width: 100%;
+  height: 150px;
+  margin-top: 15px;
+  position: relative;
+}
+
+.color-picker-saturation_cursor {
+  box-sizing: border-box;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  transform: translate(-10px, -10px);
+  box-shadow: 0 0 15px #00000026;
+}
+
+.color-picker-hue {
+  -webkit-user-select: none;
+  user-select: none;
+  background-image: linear-gradient(to right, red, #ff0, #0f0, #0ff, #00f, #f0f, red);
+  border-radius: 12px;
+  width: 100%;
+  height: 12px;
+  margin-top: 15px;
+  position: relative;
+}
+
+.color-picker-hue_cursor {
+  box-sizing: border-box;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  transform: translate(-10px, -4px);
+  box-shadow: 0 0 0 .5px #0003;
+}
+
+.color-picker-color {
+  border: 1px solid #ccc;
+  width: 100%;
+  height: 20px;
+  margin-top: 15px;
+}
+

package/dist/field/ui/color-picker.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 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 './color-picker.css';
+import type * as React from 'react';
+interface ColorPickerProps {
+    color: string;
+    onChange?: (color: string) => void;
+}
+export default function ColorPicker({ color, onChange, }: Readonly<ColorPickerProps>): React.JSX.Element;
+export interface Position {
+    x: number;
+    y: number;
+}
+export declare function toHex(value: string): string;
+export {};
+//# sourceMappingURL=color-picker.d.ts.map

package/dist/field/ui/color-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.d.ts","sourceRoot":"","sources":["../../../src/field/ui/color-picker.tsx"],"names":[],"mappings":"AACA;;;;;;GAMG;AAEH,OAAO,oBAAoB,CAAA;AAE3B,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAKnC,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC;AAuBD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,KAAK,EACL,QAAQ,GACT,EAAE,QAAQ,CAAC,gBAAgB,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA0GhD;AAED,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AAoID,wBAAgB,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAuB3C"}

package/dist/field/ui/color-picker.js

@@ -0,0 +1,360 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./color-picker.css";
+import { useEffect, useMemo, useRef, useState } from "react";
+import text_input from "./text-input.js";
+const basicColors = [
+    '#d0021b',
+    '#f5a623',
+    '#f8e71c',
+    '#8b572a',
+    '#7ed321',
+    '#417505',
+    '#bd10e0',
+    '#9013fe',
+    '#4a90e2',
+    '#50e3c2',
+    '#b8e986',
+    '#000000',
+    '#4a4a4a',
+    '#9b9b9b',
+    '#ffffff'
+];
+const WIDTH = 214;
+const HEIGHT = 150;
+function ColorPicker({ color, onChange }) {
+    const [selfColor, setSelfColor] = useState(transformColor('hex', color));
+    const [inputColor, setInputColor] = useState(color);
+    const innerDivRef = useRef(null);
+    const saturationPosition = useMemo(()=>({
+            x: selfColor.hsv.s / 100 * WIDTH,
+            y: (100 - selfColor.hsv.v) / 100 * HEIGHT
+        }), [
+        selfColor.hsv.s,
+        selfColor.hsv.v
+    ]);
+    const huePosition = useMemo(()=>({
+            x: selfColor.hsv.h / 360 * WIDTH
+        }), [
+        selfColor.hsv
+    ]);
+    const onSetHex = (hex)=>{
+        setInputColor(hex);
+        if (/^#[0-9A-Fa-f]{6}$/i.test(hex)) {
+            const newColor = transformColor('hex', hex);
+            setSelfColor(newColor);
+        }
+    };
+    const onMoveSaturation = ({ x, y })=>{
+        const newHsv = {
+            ...selfColor.hsv,
+            s: x / WIDTH * 100,
+            v: 100 - y / HEIGHT * 100
+        };
+        const newColor = transformColor('hsv', newHsv);
+        setSelfColor(newColor);
+        setInputColor(newColor.hex);
+    };
+    const onMoveHue = ({ x })=>{
+        const newHsv = {
+            ...selfColor.hsv,
+            h: x / WIDTH * 360
+        };
+        const newColor = transformColor('hsv', newHsv);
+        setSelfColor(newColor);
+        setInputColor(newColor.hex);
+    };
+    useEffect(()=>{
+        if (null !== innerDivRef.current && null != onChange) {
+            onChange(selfColor.hex);
+            setInputColor(selfColor.hex);
+        }
+    }, [
+        selfColor,
+        onChange
+    ]);
+    useEffect(()=>{
+        if (void 0 === color) return;
+        const newColor = transformColor('hex', color);
+        setSelfColor(newColor);
+        setInputColor(newColor.hex);
+    }, [
+        color
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        className: "color-picker-wrapper",
+        style: {
+            width: WIDTH
+        },
+        ref: innerDivRef,
+        children: [
+            /*#__PURE__*/ jsx(text_input, {
+                label: "Hex",
+                onChange: onSetHex,
+                value: inputColor
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "color-picker-basic-color",
+                children: basicColors.map((basicColor)=>/*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        className: basicColor === selfColor.hex ? ' active' : '',
+                        style: {
+                            backgroundColor: basicColor
+                        },
+                        onClick: ()=>{
+                            setInputColor(basicColor);
+                            setSelfColor(transformColor('hex', basicColor));
+                        }
+                    }, basicColor))
+            }),
+            /*#__PURE__*/ jsx(MoveWrapper, {
+                className: "color-picker-saturation",
+                style: {
+                    backgroundColor: `hsl(${selfColor.hsv.h}, 100%, 50%)`
+                },
+                onChange: onMoveSaturation,
+                ariaLabel: "Saturation and value",
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "color-picker-saturation_cursor",
+                    style: {
+                        backgroundColor: selfColor.hex,
+                        left: saturationPosition.x,
+                        top: saturationPosition.y
+                    }
+                })
+            }),
+            /*#__PURE__*/ jsx(MoveWrapper, {
+                className: "color-picker-hue",
+                onChange: onMoveHue,
+                ariaLabel: "Hue",
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "color-picker-hue_cursor",
+                    style: {
+                        backgroundColor: `hsl(${selfColor.hsv.h}, 100%, 50%)`,
+                        left: huePosition.x
+                    }
+                })
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "color-picker-color",
+                style: {
+                    backgroundColor: selfColor.hex
+                }
+            })
+        ]
+    });
+}
+function MoveWrapper({ className, style, onChange, children, ariaLabel }) {
+    const divRef = useRef(null);
+    const lastPositionRef = useRef({
+        x: WIDTH / 2,
+        y: HEIGHT / 2
+    });
+    const applyPosition = (position)=>{
+        lastPositionRef.current = position;
+        onChange(position);
+    };
+    const move = (e)=>{
+        if (null != divRef.current) {
+            const { current: div } = divRef;
+            const { width, height, left, top } = div.getBoundingClientRect();
+            const x = clamp(e.clientX - left, width, 0);
+            const y = clamp(e.clientY - top, height, 0);
+            applyPosition({
+                x,
+                y
+            });
+        }
+    };
+    const onMouseDown = (e)=>{
+        if (0 !== e.button) return;
+        move(e);
+        const onMouseMove = (_e)=>{
+            move(_e);
+        };
+        const onMouseUp = (_e)=>{
+            document.removeEventListener('mousemove', onMouseMove, false);
+            document.removeEventListener('mouseup', onMouseUp, false);
+            move(_e);
+        };
+        document.addEventListener('mousemove', onMouseMove, false);
+        document.addEventListener('mouseup', onMouseUp, false);
+    };
+    const onKeyDown = (e)=>{
+        if (null == divRef.current) return;
+        const { width, height } = divRef.current.getBoundingClientRect();
+        const stepX = Math.max(1, width / 50);
+        const stepY = Math.max(1, height / 50);
+        const current = lastPositionRef.current;
+        let next = null;
+        switch(e.key){
+            case 'ArrowLeft':
+                next = {
+                    x: clamp(current.x - stepX, width, 0),
+                    y: current.y
+                };
+                break;
+            case 'ArrowRight':
+                next = {
+                    x: clamp(current.x + stepX, width, 0),
+                    y: current.y
+                };
+                break;
+            case 'ArrowUp':
+                next = {
+                    x: current.x,
+                    y: clamp(current.y - stepY, height, 0)
+                };
+                break;
+            case 'ArrowDown':
+                next = {
+                    x: current.x,
+                    y: clamp(current.y + stepY, height, 0)
+                };
+                break;
+            case 'Home':
+                next = {
+                    x: 0,
+                    y: 0
+                };
+                break;
+            case 'End':
+                next = {
+                    x: width,
+                    y: height
+                };
+                break;
+            default:
+                break;
+        }
+        if (null != next) {
+            e.preventDefault();
+            applyPosition(next);
+        }
+    };
+    return /*#__PURE__*/ jsx("div", {
+        ref: divRef,
+        className: className,
+        style: style,
+        onMouseDown: onMouseDown,
+        role: "button",
+        tabIndex: 0,
+        "aria-label": ariaLabel,
+        onKeyDown: onKeyDown,
+        children: children
+    });
+}
+function clamp(value, max, min) {
+    return value > max ? max : value < min ? min : value;
+}
+function toHex(value) {
+    if (value.startsWith('#')) {
+        if (4 === value.length || 5 === value.length) {
+            value = value.split('').map((v, i)=>Number.isNaN(i) ? '#' : v + v).join('');
+            return value;
+        } else if (7 === value.length || 9 === value.length) return value;
+    } else {
+        const ctx = document.createElement('canvas').getContext('2d');
+        if (null == ctx) throw new Error('2d context not supported or canvas already initialized');
+        ctx.fillStyle = value;
+        return ctx.fillStyle;
+    }
+    return '#000000';
+}
+function hex2rgb(hex) {
+    const rbgArr = (hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (_m, r, g, b)=>`#${r}${r}${g}${g}${b}${b}`).substring(1).match(/.{2}/g) ?? []).map((x)=>parseInt(x, 16));
+    return {
+        b: rbgArr[2],
+        g: rbgArr[1],
+        r: rbgArr[0]
+    };
+}
+function rgb2hsv({ r, g, b }) {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    const max = Math.max(r, g, b);
+    const d = max - Math.min(r, g, b);
+    const h = Number.isNaN(d) ? 0 : (max === r ? (g - b) / d + (g < b ? 6 : 0) : max === g ? 2 + (b - r) / d : 4 + (r - g) / d) * 60;
+    const s = Number.isNaN(max) ? 0 : d / max * 100;
+    const v = 100 * max;
+    return {
+        h,
+        s,
+        v
+    };
+}
+function hsv2rgb({ h, s, v }) {
+    s /= 100;
+    v /= 100;
+    const i = ~~(h / 60);
+    const f = h / 60 - i;
+    const p = v * (1 - s);
+    const q = v * (1 - s * f);
+    const t = v * (1 - s * (1 - f));
+    const index = i % 6;
+    const r = Math.round(255 * [
+        v,
+        q,
+        p,
+        p,
+        t,
+        v
+    ][index]);
+    const g = Math.round(255 * [
+        t,
+        v,
+        v,
+        q,
+        p,
+        p
+    ][index]);
+    const b = Math.round(255 * [
+        p,
+        p,
+        t,
+        v,
+        v,
+        q
+    ][index]);
+    return {
+        b,
+        g,
+        r
+    };
+}
+function rgb2hex({ b, g, r }) {
+    return `#${[
+        r,
+        g,
+        b
+    ].map((x)=>x.toString(16).padStart(2, '0')).join('')}`;
+}
+function transformColor(format, color) {
+    let hex = toHex('#121212');
+    let rgb = hex2rgb(hex);
+    let hsv = rgb2hsv(rgb);
+    if ('hex' === format) {
+        const value = color;
+        hex = toHex(value);
+        rgb = hex2rgb(hex);
+        hsv = rgb2hsv(rgb);
+    } else if ('rgb' === format) {
+        const value = color;
+        rgb = value;
+        hex = rgb2hex(rgb);
+        hsv = rgb2hsv(rgb);
+    } else if ('hsv' === format) {
+        const value = color;
+        hsv = value;
+        rgb = hsv2rgb(hsv);
+        hex = rgb2hex(rgb);
+    }
+    return {
+        hex,
+        hsv,
+        rgb
+    };
+}
+export default ColorPicker;
+export { toHex };

package/dist/field/ui/dialog.css

@@ -0,0 +1,18 @@
+.DialogActions {
+  flex-direction: row;
+  justify-content: right;
+  margin-top: 20px;
+  display: flex;
+}
+
+.DialogButtonsList {
+  flex-direction: column;
+  justify-content: right;
+  margin-top: 20px;
+  display: flex;
+}
+
+.DialogButtonsList button {
+  margin-bottom: 20px;
+}
+

package/dist/field/ui/dialog.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import "./dialog.css";
+function DialogButtonsList({ children }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: "DialogButtonsList",
+        children: children
+    });
+}
+function DialogActions({ 'data-test-id': dataTestId, children }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: "DialogActions",
+        "data-test-id": dataTestId,
+        children: children
+    });
+}
+export { DialogActions, DialogButtonsList };

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+/**
+ * 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 ReactNode } from 'react';
+export declare function DropDownItem({ children, className, onClick, title, }: {
+    children: React.ReactNode;
+    className: string;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    title?: string;
+}): React.JSX.Element;
+export declare function DropDown({ disabled, buttonLabel, buttonAriaLabel, buttonClassName, buttonIconClassName, children, stopCloseOnClickSelf, }: {
+    disabled?: boolean;
+    buttonAriaLabel?: string;
+    buttonClassName: string;
+    buttonIconClassName?: string;
+    buttonLabel?: string;
+    children: ReactNode;
+    stopCloseOnClickSelf?: boolean;
+}): React.JSX.Element;
+//# sourceMappingURL=dropdown.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/field/ui/dropdown.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B;;;;;;GAMG;AACH,OAAO,EAAE,KAAK,SAAS,EAAqD,MAAM,OAAO,CAAA;AAUzF,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,SAAS,EACT,OAAO,EACP,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAuBpB;AA2ED,wBAAgB,QAAQ,CAAC,EACvB,QAAgB,EAChB,WAAW,EACX,eAAe,EACf,eAAe,EACf,mBAAmB,EACnB,QAAQ,EACR,oBAAoB,GACrB,EAAE;IACD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,EAAE,MAAM,CAAA;IACvB,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,EAAE,SAAS,CAAA;IACnB,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAC/B,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAwEpB"}