@frontify/fondue 12.0.0-beta.157 → 12.0.0-beta.158

package/dist/components/RichTextEditor/Plugins/ButtonPlugin/components/FloatingButton/CustomFloatingButton.es.js

@@ -2,7 +2,7 @@ import t from "react";
 import { EditModal as l } from "./EditButtonModal/EditModal.es.js";
 import { FloatingButton as o } from "./FloatingButton.es.js";
 import { useFloatingButtonSelectors as i } from "./floatingButtonStore.es.js";
-import { InsertButtonModal as m } from "./InserButtontModal/InsertButtonModal.es.js";
+import { InsertButtonModal as m } from "./InsertButtonModal/InsertButtonModal.es.js";
 const d = () => {
   const n = i().isEditing(), e = /* @__PURE__ */ t.createElement(m, null), r = n ? e : /* @__PURE__ */ t.createElement(l, null);
   return /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(o.InsertRoot, null, e), /* @__PURE__ */ t.createElement(o.EditRoot, null, r));

package/dist/components/RichTextEditor/Plugins/ButtonPlugin/components/FloatingButton/CustomFloatingButton.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomFloatingButton.es.js","sources":["../../../../../../../src/components/RichTextEditor/Plugins/ButtonPlugin/components/FloatingButton/CustomFloatingButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React from 'react';\nimport { EditModal } from './EditButtonModal/EditModal';\nimport { FloatingButton } from './FloatingButton';\nimport { useFloatingButtonSelectors } from './floatingButtonStore';\nimport { InsertButtonModal } from './InserButtontModal/InsertButtonModal';\n\nexport const CustomFloatingButton = () => {\n    const isEditing = useFloatingButtonSelectors().isEditing();\n\n    const input = <InsertButtonModal />;\n    const editContent = isEditing ? input : <EditModal />;\n\n    return (\n        <>\n            <FloatingButton.InsertRoot>{input}</FloatingButton.InsertRoot>\n            <FloatingButton.EditRoot>{editContent}</FloatingButton.EditRoot>\n        </>\n    );\n};\n"],"names":["CustomFloatingButton","isEditing","useFloatingButtonSelectors","input","InsertButtonModal","editContent","React","EditModal","FloatingButton"],"mappings":";;;;;AAQO,MAAMA,IAAuB,MAAM;AAChC,QAAAC,IAAYC,IAA6B,aAEzCC,oCAASC,GAAkB,IAAA,GAC3BC,IAAcJ,IAAYE,IAAQ,gBAAAG,EAAA,cAACC,GAAU,IAAA;AAEnD,SAEQ,gBAAAD,EAAA,cAAAA,EAAA,UAAA,MAAA,gBAAAA,EAAA,cAACE,EAAe,YAAf,MAA2BL,CAAM,GAClC,gBAAAG,EAAA,cAACE,EAAe,UAAf,MAAyBH,CAAY,CAC1C;AAER;"}
+{"version":3,"file":"CustomFloatingButton.es.js","sources":["../../../../../../../src/components/RichTextEditor/Plugins/ButtonPlugin/components/FloatingButton/CustomFloatingButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React from 'react';\nimport { EditModal } from './EditButtonModal/EditModal';\nimport { FloatingButton } from './FloatingButton';\nimport { useFloatingButtonSelectors } from './floatingButtonStore';\nimport { InsertButtonModal } from './InsertButtonModal/InsertButtonModal';\n\nexport const CustomFloatingButton = () => {\n    const isEditing = useFloatingButtonSelectors().isEditing();\n\n    const input = <InsertButtonModal />;\n    const editContent = isEditing ? input : <EditModal />;\n\n    return (\n        <>\n            <FloatingButton.InsertRoot>{input}</FloatingButton.InsertRoot>\n            <FloatingButton.EditRoot>{editContent}</FloatingButton.EditRoot>\n        </>\n    );\n};\n"],"names":["CustomFloatingButton","isEditing","useFloatingButtonSelectors","input","InsertButtonModal","editContent","React","EditModal","FloatingButton"],"mappings":";;;;;AAQO,MAAMA,IAAuB,MAAM;AAChC,QAAAC,IAAYC,IAA6B,aAEzCC,oCAASC,GAAkB,IAAA,GAC3BC,IAAcJ,IAAYE,IAAQ,gBAAAG,EAAA,cAACC,GAAU,IAAA;AAEnD,SAEQ,gBAAAD,EAAA,cAAAA,EAAA,UAAA,MAAA,gBAAAA,EAAA,cAACE,EAAe,YAAf,MAA2BL,CAAM,GAClC,gBAAAG,EAAA,cAACE,EAAe,UAAf,MAAyBH,CAAY,CAC1C;AAER;"}

package/dist/components/RichTextEditor/Plugins/ButtonPlugin/components/FloatingButton/{InserButtontModal → InsertButtonModal}/InsertButtonModal.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"InsertButtonModal.es.js","sources":["../../../../../../../../src/components/RichTextEditor/Plugins/ButtonPlugin/components/FloatingButton/InserButtontModal/InsertButtonModal.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { CSSProperties, FC, ReactNode, useState } from 'react';\n\nimport { FormControl } from '@components/FormControl';\nimport { useInsertModal } from './useInsertModal';\nimport { useRichTextEditorContext } from '@components/RichTextEditor/context/RichTextEditorContext';\nimport { InsertModal } from '@components/RichTextEditor/Plugins/LinkPlugin/FloatingLink/InsertLinkModal';\nimport { ButtonStyles } from '@components/RichTextEditor/Plugins/TextStylePlugin/TextStyles';\n\nexport const InsertButtonModal = () => {\n    const modalProps = useInsertModal();\n    const { state, onButtonStyleChange } = modalProps;\n    const context = useRichTextEditorContext();\n\n    const designTokens = context.designTokens as Partial<\n        Record<ButtonStyles, CSSProperties & { hover: CSSProperties }>\n    >;\n\n    return (\n        <InsertModal {...modalProps} testId=\"floating-button-insert\">\n            <div className=\"tw-pt-5\">\n                <FormControl\n                    label={{\n                        children: 'Button Style',\n                        htmlFor: 'buttonStyle',\n                        required: true,\n                    }}\n                >\n                    <HoverableButton\n                        id=\"primary\"\n                        styles={designTokens.buttonPrimary}\n                        isActive={state.buttonStyle === 'primary'}\n                        onClick={() => onButtonStyleChange('primary')}\n                    >\n                        {state.text || 'Primary Button'}\n                    </HoverableButton>\n\n                    <HoverableButton\n                        id=\"secondary\"\n                        styles={designTokens.buttonSecondary}\n                        isActive={state.buttonStyle === 'secondary'}\n                        onClick={() => onButtonStyleChange('secondary')}\n                    >\n                        {state.text || 'Secondary Button'}\n                    </HoverableButton>\n\n                    <HoverableButton\n                        id=\"tertiary\"\n                        styles={designTokens.buttonTertiary}\n                        isActive={state.buttonStyle === 'tertiary'}\n                        onClick={() => onButtonStyleChange('tertiary')}\n                    >\n                        {state.text || 'Tertiary Button'}\n                    </HoverableButton>\n                </FormControl>\n            </div>\n        </InsertModal>\n    );\n};\n\ntype Props = {\n    id: string;\n    styles?: CSSProperties & { hover?: CSSProperties };\n    isActive: boolean;\n    onClick: () => void;\n    children: ReactNode;\n};\n\nconst HoverableButton: FC<Props> = ({ id, styles, isActive, onClick, children }) => {\n    const [hovered, setHovered] = useState(false);\n    const getStyles = () => (styles && styles.hover && hovered ? { ...styles, ...styles.hover } : styles);\n\n    return (\n        <button\n            data-test-id={`floating-button-insert-${id}`}\n            onMouseEnter={() => setHovered(true)}\n            onMouseLeave={() => setHovered(false)}\n            onClick={onClick}\n            style={getStyles()}\n            className={\n                isActive ? 'tw-outline tw-outline-1 tw-outline-violet-60 tw-outline-offset-2 tw-w-fit' : 'tw-w-fit'\n            }\n        >\n            {children}\n        </button>\n    );\n};\n"],"names":["InsertButtonModal","modalProps","useInsertModal","state","onButtonStyleChange","designTokens","useRichTextEditorContext","React","InsertModal","FormControl","HoverableButton","id","styles","isActive","onClick","children","hovered","setHovered","useState","getStyles"],"mappings":";;;;;AAUO,MAAMA,IAAoB,MAAM;AACnC,QAAMC,IAAaC,KACb,EAAE,OAAAC,GAAO,qBAAAC,EAAwB,IAAAH,GAGjCI,IAFUC,IAEa;AAKzB,SAAA,gBAAAC,EAAA,cAACC,KAAa,GAAGP,GAAY,QAAO,yBAChC,GAAA,gBAAAM,EAAA,cAAC,OAAI,EAAA,WAAU,UACX,GAAA,gBAAAA,EAAA;AAAA,IAACE;AAAA,IAAA;AAAA,MACG,OAAO;AAAA,QACH,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,MACd;AAAA,IAAA;AAAA,IAEA,gBAAAF,EAAA;AAAA,MAACG;AAAA,MAAA;AAAA,QACG,IAAG;AAAA,QACH,QAAQL,EAAa;AAAA,QACrB,UAAUF,EAAM,gBAAgB;AAAA,QAChC,SAAS,MAAMC,EAAoB,SAAS;AAAA,MAAA;AAAA,MAE3CD,EAAM,QAAQ;AAAA,IACnB;AAAA,IAEA,gBAAAI,EAAA;AAAA,MAACG;AAAA,MAAA;AAAA,QACG,IAAG;AAAA,QACH,QAAQL,EAAa;AAAA,QACrB,UAAUF,EAAM,gBAAgB;AAAA,QAChC,SAAS,MAAMC,EAAoB,WAAW;AAAA,MAAA;AAAA,MAE7CD,EAAM,QAAQ;AAAA,IACnB;AAAA,IAEA,gBAAAI,EAAA;AAAA,MAACG;AAAA,MAAA;AAAA,QACG,IAAG;AAAA,QACH,QAAQL,EAAa;AAAA,QACrB,UAAUF,EAAM,gBAAgB;AAAA,QAChC,SAAS,MAAMC,EAAoB,UAAU;AAAA,MAAA;AAAA,MAE5CD,EAAM,QAAQ;AAAA,IACnB;AAAA,EAER,CAAA,CACJ;AAER,GAUMO,IAA6B,CAAC,EAAE,IAAAC,GAAI,QAAAC,GAAQ,UAAAC,GAAU,SAAAC,GAAS,UAAAC,QAAe;AAChF,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtCC,IAAY,MAAOP,KAAUA,EAAO,SAASI,IAAU,EAAE,GAAGJ,GAAQ,GAAGA,EAAO,MAAA,IAAUA;AAG1F,SAAA,gBAAAL,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,gBAAc,0BAA0BI;AAAA,MACxC,cAAc,MAAMM,EAAW,EAAI;AAAA,MACnC,cAAc,MAAMA,EAAW,EAAK;AAAA,MACpC,SAAAH;AAAA,MACA,OAAOK,EAAU;AAAA,MACjB,WACIN,IAAW,8EAA8E;AAAA,IAAA;AAAA,IAG5FE;AAAA,EAAA;AAGb;"}
+{"version":3,"file":"InsertButtonModal.es.js","sources":["../../../../../../../../src/components/RichTextEditor/Plugins/ButtonPlugin/components/FloatingButton/InsertButtonModal/InsertButtonModal.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { CSSProperties, FC, ReactNode, useState } from 'react';\n\nimport { FormControl } from '@components/FormControl';\nimport { useInsertModal } from './useInsertModal';\nimport { useRichTextEditorContext } from '@components/RichTextEditor/context/RichTextEditorContext';\nimport { InsertModal } from '@components/RichTextEditor/Plugins/LinkPlugin/FloatingLink/InsertLinkModal';\nimport { ButtonStyles } from '@components/RichTextEditor/Plugins/TextStylePlugin/TextStyles';\n\nexport const InsertButtonModal = () => {\n    const modalProps = useInsertModal();\n    const { state, onButtonStyleChange } = modalProps;\n    const context = useRichTextEditorContext();\n\n    const designTokens = context.designTokens as Partial<\n        Record<ButtonStyles, CSSProperties & { hover: CSSProperties }>\n    >;\n\n    return (\n        <InsertModal {...modalProps} testId=\"floating-button-insert\">\n            <div className=\"tw-pt-5\">\n                <FormControl\n                    label={{\n                        children: 'Button Style',\n                        htmlFor: 'buttonStyle',\n                        required: true,\n                    }}\n                >\n                    <HoverableButton\n                        id=\"primary\"\n                        styles={designTokens.buttonPrimary}\n                        isActive={state.buttonStyle === 'primary'}\n                        onClick={() => onButtonStyleChange('primary')}\n                    >\n                        {state.text || 'Primary Button'}\n                    </HoverableButton>\n\n                    <HoverableButton\n                        id=\"secondary\"\n                        styles={designTokens.buttonSecondary}\n                        isActive={state.buttonStyle === 'secondary'}\n                        onClick={() => onButtonStyleChange('secondary')}\n                    >\n                        {state.text || 'Secondary Button'}\n                    </HoverableButton>\n\n                    <HoverableButton\n                        id=\"tertiary\"\n                        styles={designTokens.buttonTertiary}\n                        isActive={state.buttonStyle === 'tertiary'}\n                        onClick={() => onButtonStyleChange('tertiary')}\n                    >\n                        {state.text || 'Tertiary Button'}\n                    </HoverableButton>\n                </FormControl>\n            </div>\n        </InsertModal>\n    );\n};\n\ntype Props = {\n    id: string;\n    styles?: CSSProperties & { hover?: CSSProperties };\n    isActive: boolean;\n    onClick: () => void;\n    children: ReactNode;\n};\n\nconst HoverableButton: FC<Props> = ({ id, styles, isActive, onClick, children }) => {\n    const [hovered, setHovered] = useState(false);\n    const getStyles = () => (styles && styles.hover && hovered ? { ...styles, ...styles.hover } : styles);\n\n    return (\n        <button\n            data-test-id={`floating-button-insert-${id}`}\n            onMouseEnter={() => setHovered(true)}\n            onMouseLeave={() => setHovered(false)}\n            onClick={onClick}\n            style={getStyles()}\n            className={\n                isActive ? 'tw-outline tw-outline-1 tw-outline-violet-60 tw-outline-offset-2 tw-w-fit' : 'tw-w-fit'\n            }\n        >\n            {children}\n        </button>\n    );\n};\n"],"names":["InsertButtonModal","modalProps","useInsertModal","state","onButtonStyleChange","designTokens","useRichTextEditorContext","React","InsertModal","FormControl","HoverableButton","id","styles","isActive","onClick","children","hovered","setHovered","useState","getStyles"],"mappings":";;;;;AAUO,MAAMA,IAAoB,MAAM;AACnC,QAAMC,IAAaC,KACb,EAAE,OAAAC,GAAO,qBAAAC,EAAwB,IAAAH,GAGjCI,IAFUC,IAEa;AAKzB,SAAA,gBAAAC,EAAA,cAACC,KAAa,GAAGP,GAAY,QAAO,yBAChC,GAAA,gBAAAM,EAAA,cAAC,OAAI,EAAA,WAAU,UACX,GAAA,gBAAAA,EAAA;AAAA,IAACE;AAAA,IAAA;AAAA,MACG,OAAO;AAAA,QACH,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,MACd;AAAA,IAAA;AAAA,IAEA,gBAAAF,EAAA;AAAA,MAACG;AAAA,MAAA;AAAA,QACG,IAAG;AAAA,QACH,QAAQL,EAAa;AAAA,QACrB,UAAUF,EAAM,gBAAgB;AAAA,QAChC,SAAS,MAAMC,EAAoB,SAAS;AAAA,MAAA;AAAA,MAE3CD,EAAM,QAAQ;AAAA,IACnB;AAAA,IAEA,gBAAAI,EAAA;AAAA,MAACG;AAAA,MAAA;AAAA,QACG,IAAG;AAAA,QACH,QAAQL,EAAa;AAAA,QACrB,UAAUF,EAAM,gBAAgB;AAAA,QAChC,SAAS,MAAMC,EAAoB,WAAW;AAAA,MAAA;AAAA,MAE7CD,EAAM,QAAQ;AAAA,IACnB;AAAA,IAEA,gBAAAI,EAAA;AAAA,MAACG;AAAA,MAAA;AAAA,QACG,IAAG;AAAA,QACH,QAAQL,EAAa;AAAA,QACrB,UAAUF,EAAM,gBAAgB;AAAA,QAChC,SAAS,MAAMC,EAAoB,UAAU;AAAA,MAAA;AAAA,MAE5CD,EAAM,QAAQ;AAAA,IACnB;AAAA,EAER,CAAA,CACJ;AAER,GAUMO,IAA6B,CAAC,EAAE,IAAAC,GAAI,QAAAC,GAAQ,UAAAC,GAAU,SAAAC,GAAS,UAAAC,QAAe;AAChF,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtCC,IAAY,MAAOP,KAAUA,EAAO,SAASI,IAAU,EAAE,GAAGJ,GAAQ,GAAGA,EAAO,MAAA,IAAUA;AAG1F,SAAA,gBAAAL,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,gBAAc,0BAA0BI;AAAA,MACxC,cAAc,MAAMM,EAAW,EAAI;AAAA,MACnC,cAAc,MAAMA,EAAW,EAAK;AAAA,MACpC,SAAAH;AAAA,MACA,OAAOK,EAAU;AAAA,MACjB,WACIN,IAAW,8EAA8E;AAAA,IAAA;AAAA,IAG5FE;AAAA,EAAA;AAGb;"}

package/dist/components/RichTextEditor/Plugins/ButtonPlugin/components/FloatingButton/{InserButtontModal → InsertButtonModal}/useInsertModal.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"useInsertModal.es.js","sources":["../../../../../../../../src/components/RichTextEditor/Plugins/ButtonPlugin/components/FloatingButton/InserButtontModal/useInsertModal.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { Dispatch, Reducer, useEffect, useReducer } from 'react';\nimport { getPluginOptions, useEditorRef, useHotkeys } from '@udecode/plate';\nimport { CheckboxState } from '@components/Checkbox';\nimport { InsertModalDispatchType, InsertModalStateProps } from './types';\nimport { floatingButtonActions, floatingButtonSelectors } from '../floatingButtonStore';\nimport { ButtonPlugin, ELEMENT_BUTTON } from '../../../createButtonPlugin';\nimport { submitFloatingButton } from '../../../transforms/submitFloatingButton';\nimport { RichTextButtonStyle } from '../../../types';\nimport { getButtonStyle } from '../../../utils/getButtonStyle';\n\nconst initialState: InsertModalStateProps = {\n    url: '',\n    text: '',\n    buttonStyle: 'primary',\n    newTab: CheckboxState.Unchecked,\n};\n\nexport const InsertModalState = (): [InsertModalStateProps, Dispatch<InsertModalDispatchType>] => {\n    const [state, dispatch] = useReducer<Reducer<InsertModalStateProps, InsertModalDispatchType>>((state, action) => {\n        const { type, payload } = action;\n\n        switch (type) {\n            case 'NEW_TAB':\n                return {\n                    ...state,\n                    newTab: CheckboxState.Checked,\n                };\n            case 'SAME_TAB':\n                return {\n                    ...state,\n                    newTab: CheckboxState.Unchecked,\n                };\n            case 'URL':\n            case 'TEXT':\n            case 'BUTTON_STYLE':\n            case 'INIT':\n                return {\n                    ...state,\n                    ...payload,\n                };\n            default:\n                return state;\n        }\n    }, initialState);\n\n    return [state, dispatch];\n};\n\nexport const useInsertModal = () => {\n    const editor = useEditorRef();\n    const [state, dispatch] = InsertModalState();\n\n    useEffect(() => {\n        const buttonStyle = getButtonStyle(editor);\n\n        dispatch({\n            type: 'INIT',\n            payload: {\n                text: floatingButtonSelectors.text(),\n                buttonStyle,\n                newTab: floatingButtonSelectors.newTab() ? CheckboxState.Checked : CheckboxState.Unchecked,\n                url: floatingButtonSelectors.url(),\n            },\n        });\n    }, [dispatch, editor]);\n\n    const onTextChange = (value: string) => {\n        dispatch({\n            type: 'TEXT',\n            payload: { text: value },\n        });\n    };\n\n    const onButtonStyleChange = (value: RichTextButtonStyle) => {\n        dispatch({\n            type: 'BUTTON_STYLE',\n            payload: { buttonStyle: value },\n        });\n    };\n\n    const onUrlChange = (value: string) => {\n        dispatch({\n            type: 'URL',\n            payload: { url: value },\n        });\n    };\n\n    const onToggleTab = (checked: boolean) => {\n        checked ? dispatch({ type: 'NEW_TAB' }) : dispatch({ type: 'SAME_TAB' });\n    };\n\n    const onCancel = () => {\n        floatingButtonActions.hide();\n    };\n\n    const onSave = (e: React.MouseEvent<HTMLButtonElement, MouseEvent> | KeyboardEvent | undefined) => {\n        if (!isValidUrlOrEmpty() || !hasValues) {\n            return;\n        }\n\n        floatingButtonActions.text(state.text);\n        floatingButtonActions.url(state.url);\n        floatingButtonActions.buttonStyle(state.buttonStyle);\n        floatingButtonActions.newTab(state.newTab === CheckboxState.Checked);\n\n        if (submitFloatingButton(editor)) {\n            e?.preventDefault();\n        }\n    };\n\n    const hasValues = state.url !== '' && state.text !== '';\n\n    const isValidUrlOrEmpty = () => {\n        const { isUrl } = getPluginOptions<ButtonPlugin>(editor, ELEMENT_BUTTON);\n        return !state.url || (isUrl && isUrl(state.url));\n    };\n\n    useHotkeys(\n        'enter',\n        onSave,\n        {\n            enableOnTags: ['INPUT'],\n        },\n        [],\n    );\n\n    return {\n        state,\n        onTextChange,\n        onButtonStyleChange,\n        onUrlChange,\n        onToggleTab,\n        onCancel,\n        onSave,\n        hasValues,\n        isValidUrlOrEmpty,\n    };\n};\n"],"names":["initialState","CheckboxState","InsertModalState","state","dispatch","useReducer","action","type","payload","useInsertModal","editor","useEditorRef","useEffect","buttonStyle","getButtonStyle","floatingButtonSelectors","onTextChange","value","onButtonStyleChange","onUrlChange","onToggleTab","checked","onCancel","floatingButtonActions","onSave","e","isValidUrlOrEmpty","hasValues","submitFloatingButton","isUrl","getPluginOptions","ELEMENT_BUTTON","useHotkeys"],"mappings":"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"}
+{"version":3,"file":"useInsertModal.es.js","sources":["../../../../../../../../src/components/RichTextEditor/Plugins/ButtonPlugin/components/FloatingButton/InsertButtonModal/useInsertModal.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { Dispatch, Reducer, useEffect, useReducer } from 'react';\nimport { getPluginOptions, useEditorRef, useHotkeys } from '@udecode/plate';\nimport { CheckboxState } from '@components/Checkbox';\nimport { InsertModalDispatchType, InsertModalStateProps } from './types';\nimport { floatingButtonActions, floatingButtonSelectors } from '../floatingButtonStore';\nimport { ButtonPlugin, ELEMENT_BUTTON } from '../../../createButtonPlugin';\nimport { submitFloatingButton } from '../../../transforms/submitFloatingButton';\nimport { RichTextButtonStyle } from '../../../types';\nimport { getButtonStyle } from '../../../utils/getButtonStyle';\n\nconst initialState: InsertModalStateProps = {\n    url: '',\n    text: '',\n    buttonStyle: 'primary',\n    newTab: CheckboxState.Unchecked,\n};\n\nexport const InsertModalState = (): [InsertModalStateProps, Dispatch<InsertModalDispatchType>] => {\n    const [state, dispatch] = useReducer<Reducer<InsertModalStateProps, InsertModalDispatchType>>((state, action) => {\n        const { type, payload } = action;\n\n        switch (type) {\n            case 'NEW_TAB':\n                return {\n                    ...state,\n                    newTab: CheckboxState.Checked,\n                };\n            case 'SAME_TAB':\n                return {\n                    ...state,\n                    newTab: CheckboxState.Unchecked,\n                };\n            case 'URL':\n            case 'TEXT':\n            case 'BUTTON_STYLE':\n            case 'INIT':\n                return {\n                    ...state,\n                    ...payload,\n                };\n            default:\n                return state;\n        }\n    }, initialState);\n\n    return [state, dispatch];\n};\n\nexport const useInsertModal = () => {\n    const editor = useEditorRef();\n    const [state, dispatch] = InsertModalState();\n\n    useEffect(() => {\n        const buttonStyle = getButtonStyle(editor);\n\n        dispatch({\n            type: 'INIT',\n            payload: {\n                text: floatingButtonSelectors.text(),\n                buttonStyle,\n                newTab: floatingButtonSelectors.newTab() ? CheckboxState.Checked : CheckboxState.Unchecked,\n                url: floatingButtonSelectors.url(),\n            },\n        });\n    }, [dispatch, editor]);\n\n    const onTextChange = (value: string) => {\n        dispatch({\n            type: 'TEXT',\n            payload: { text: value },\n        });\n    };\n\n    const onButtonStyleChange = (value: RichTextButtonStyle) => {\n        dispatch({\n            type: 'BUTTON_STYLE',\n            payload: { buttonStyle: value },\n        });\n    };\n\n    const onUrlChange = (value: string) => {\n        dispatch({\n            type: 'URL',\n            payload: { url: value },\n        });\n    };\n\n    const onToggleTab = (checked: boolean) => {\n        checked ? dispatch({ type: 'NEW_TAB' }) : dispatch({ type: 'SAME_TAB' });\n    };\n\n    const onCancel = () => {\n        floatingButtonActions.hide();\n    };\n\n    const onSave = (e: React.MouseEvent<HTMLButtonElement, MouseEvent> | KeyboardEvent | undefined) => {\n        if (!isValidUrlOrEmpty() || !hasValues) {\n            return;\n        }\n\n        floatingButtonActions.text(state.text);\n        floatingButtonActions.url(state.url);\n        floatingButtonActions.buttonStyle(state.buttonStyle);\n        floatingButtonActions.newTab(state.newTab === CheckboxState.Checked);\n\n        if (submitFloatingButton(editor)) {\n            e?.preventDefault();\n        }\n    };\n\n    const hasValues = state.url !== '' && state.text !== '';\n\n    const isValidUrlOrEmpty = () => {\n        const { isUrl } = getPluginOptions<ButtonPlugin>(editor, ELEMENT_BUTTON);\n        return !state.url || (isUrl && isUrl(state.url));\n    };\n\n    useHotkeys(\n        'enter',\n        onSave,\n        {\n            enableOnTags: ['INPUT'],\n        },\n        [],\n    );\n\n    return {\n        state,\n        onTextChange,\n        onButtonStyleChange,\n        onUrlChange,\n        onToggleTab,\n        onCancel,\n        onSave,\n        hasValues,\n        isValidUrlOrEmpty,\n    };\n};\n"],"names":["initialState","CheckboxState","InsertModalState","state","dispatch","useReducer","action","type","payload","useInsertModal","editor","useEditorRef","useEffect","buttonStyle","getButtonStyle","floatingButtonSelectors","onTextChange","value","onButtonStyleChange","onUrlChange","onToggleTab","checked","onCancel","floatingButtonActions","onSave","e","isValidUrlOrEmpty","hasValues","submitFloatingButton","isUrl","getPluginOptions","ELEMENT_BUTTON","useHotkeys"],"mappings":"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"}

package/dist/components/RichTextEditor/Plugins/ButtonPlugin/withButton.es.js

@@ -1,80 +1,53 @@
-import { isCollapsed as a, getAboveNode as E, getPluginType as f, isStartPoint as k, getPreviousNodeEndPoint as S, isEndPoint as x, getNextNodeStartPoint as N, select as l, insertNodes as R, withRemoveEmptyNodes as b, mockPlugin as v, withoutNormalizing as z, getRangeBefore as D, getRangeFromBlockStart as L, someNode as W, getEditorString as _, collapseSelection as A } from "@udecode/plate";
-import { Path as C } from "slate";
-import { ELEMENT_BUTTON as m } from "./createButtonPlugin.es.js";
-import { upsertButton as r } from "./transforms/upsertButton.es.js";
-const j = (t, { type: y, options: { isUrl: h, getUrlHref: i, rangeBeforeOptions: B } }) => {
-  const { insertData: T, insertText: g, apply: u, normalizeNode: w, insertBreak: p } = t, P = () => {
-    z(t, () => {
-      const s = t.selection;
-      let n = D(t, s, B);
-      if (n || (n = L(t)), !n || W(t, {
-        at: n,
-        match: { type: f(t, m) }
-      }))
-        return;
-      let e = _(t, n);
-      e = (i == null ? void 0 : i(e)) ?? e, h(e) && (l(t, n), r(t, {
-        url: e
-      }), A(t, { edge: "end" }));
-    });
-  };
-  return t.insertBreak = () => {
-    if (!a(t.selection))
-      return p();
-    P(), p();
-  }, t.insertText = (s) => {
-    s === " " && a(t.selection) && P(), g(s);
-  }, t.insertData = (s) => {
-    const n = s.getData("text/plain"), o = i == null ? void 0 : i(n);
-    n && r(t, {
-      url: o || n,
-      insertTextInButton: !0
-    }) || T(s);
-  }, t.apply = (s) => {
+import { isCollapsed as i, getAboveNode as a, getPluginType as l, isStartPoint as g, getPreviousNodeEndPoint as x, isEndPoint as P, getNextNodeStartPoint as m, select as u, insertNodes as E, withRemoveEmptyNodes as h, mockPlugin as r } from "@udecode/plate";
+import { Path as w } from "slate";
+import { ELEMENT_BUTTON as p } from "./createButtonPlugin.es.js";
+const B = (t, { type: N }) => {
+  const { apply: f, normalizeNode: y } = t;
+  return t.apply = (s) => {
     if (s.type !== "set_selection") {
-      u(s);
+      f(s);
       return;
     }
     const n = s.newProperties;
-    if (!(n != null && n.focus) || !n.anchor || !a(n)) {
-      u(s);
+    if (!(n != null && n.focus) || !n.anchor || !i(n)) {
+      f(s);
       return;
     }
-    const o = E(t, {
+    const c = a(t, {
       at: n,
-      match: { type: f(t, m) }
+      match: { type: l(t, p) }
     });
-    if (o) {
-      const [, e] = o;
-      let c;
-      k(t, n.focus, e) && (c = S(t, e)), x(t, n.focus, e) && (c = N(t, e)), c && (s.newProperties = {
-        anchor: c,
-        focus: c
+    if (c) {
+      const [, o] = c;
+      let e;
+      g(t, n.focus, o) && (e = x(t, o)), P(t, n.focus, o) && (e = m(t, o)), e && (s.newProperties = {
+        anchor: e,
+        focus: e
       });
     }
-    u(s);
+    f(s);
   }, t.normalizeNode = ([s, n]) => {
-    if (s.type === f(t, m)) {
-      const o = t.selection;
-      if (o && a(o) && x(t, o.focus, n)) {
-        const e = N(t, n);
-        if (e)
-          l(t, e);
+    if (s.type === l(t, p)) {
+      const c = t.selection;
+      if (c && i(c) && P(t, c.focus, n)) {
+        const o = m(t, n);
+        if (o)
+          u(t, o);
         else {
-          const c = C.next(n);
-          R(t, { text: "" }, { at: c }), l(t, c);
+          const e = w.next(n);
+          E(t, { text: "" }, { at: e }), u(t, e);
         }
       }
     }
-    w([s, n]);
-  }, b(
+    y([s, n]);
+  }, h(
     t,
-    v({
-      options: { types: y }
+    r({
+      options: { types: N }
     })
   );
 };
 export {
-  j as withButton
+  B as withButton
 };
 //# sourceMappingURL=withButton.es.js.map

package/dist/components/RichTextEditor/Plugins/ButtonPlugin/withButton.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"withButton.es.js","sources":["../../../../../src/components/RichTextEditor/Plugins/ButtonPlugin/withButton.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { AnyObject, EText } from '@udecode/plate';\nimport {\n    PlateEditor,\n    Value,\n    WithOverride,\n    collapseSelection,\n    getAboveNode,\n    getEditorString,\n    getNextNodeStartPoint,\n    getPluginType,\n    getPreviousNodeEndPoint,\n    getRangeBefore,\n    getRangeFromBlockStart,\n    insertNodes,\n    isCollapsed,\n    isEndPoint,\n    isStartPoint,\n    mockPlugin,\n    select,\n    someNode,\n    withRemoveEmptyNodes,\n    withoutNormalizing,\n} from '@udecode/plate';\nimport { Path, Point, Range } from 'slate';\nimport { ELEMENT_BUTTON } from './createButtonPlugin';\nimport { upsertButton } from './transforms/index';\n\n/**\n * Insert space after a url to wrap a button.\n * Lookup from the block start to the cursor to check if there is an url.\n * If not found, lookup before the cursor for a space character to check the url.\n *\n * On insert data:\n * Paste a string inside a button element will edit its children text but not its url.\n *\n */\n\nexport const withButton: WithOverride = (editor, { type, options: { isUrl, getUrlHref, rangeBeforeOptions } }) => {\n    const { insertData, insertText, apply, normalizeNode, insertBreak } = editor;\n\n    const wrapButton = () => {\n        withoutNormalizing(editor, () => {\n            const selection = editor.selection as Range;\n\n            // get the range from first space before the cursor\n            let beforeWordRange = getRangeBefore(editor, selection, rangeBeforeOptions);\n\n            // if no space found before, get the range from block start\n            if (!beforeWordRange) {\n                beforeWordRange = getRangeFromBlockStart(editor);\n            }\n\n            // if no word found before the cursor, exit\n            if (!beforeWordRange) {\n                return;\n            }\n\n            const hasLink = someNode(editor, {\n                at: beforeWordRange,\n                match: { type: getPluginType(editor, ELEMENT_BUTTON) },\n            });\n\n            // if word before the cursor has a link, exit\n            if (hasLink) {\n                return;\n            }\n\n            let beforeWordText = getEditorString(editor, beforeWordRange);\n            beforeWordText = getUrlHref?.(beforeWordText) ?? beforeWordText;\n\n            // if word before is not an url, exit\n            if (!isUrl(beforeWordText)) {\n                return;\n            }\n\n            // select the word to wrap button\n            select(editor, beforeWordRange);\n\n            // wrap button\n            upsertButton(editor, {\n                url: beforeWordText,\n            });\n\n            // collapse selection\n            collapseSelection(editor, { edge: 'end' });\n        });\n    };\n\n    editor.insertBreak = () => {\n        if (!isCollapsed(editor.selection)) {\n            return insertBreak();\n        }\n        wrapButton();\n        insertBreak();\n    };\n\n    editor.insertText = (text) => {\n        if (text === ' ' && isCollapsed(editor.selection)) {\n            wrapButton();\n        }\n\n        insertText(text);\n    };\n\n    editor.insertData = (data: DataTransfer) => {\n        const text = data.getData('text/plain');\n        const textHref = getUrlHref?.(text);\n\n        if (text) {\n            const inserted = upsertButton(editor, {\n                url: textHref || text,\n                insertTextInButton: true,\n            });\n            if (inserted) {\n                return;\n            }\n        }\n\n        insertData(data);\n    };\n\n    editor.apply = (operation) => {\n        if (operation.type !== 'set_selection') {\n            apply(operation);\n            return;\n        }\n\n        const range = operation.newProperties;\n        if (!range?.focus || !range.anchor || !isCollapsed(range as Range)) {\n            apply(operation);\n            return;\n        }\n\n        const entry = getAboveNode(editor, {\n            at: range as Range,\n            match: { type: getPluginType(editor, ELEMENT_BUTTON) },\n        });\n\n        if (entry) {\n            const [, path] = entry;\n\n            let newPoint: Point | undefined;\n\n            if (isStartPoint(editor, range.focus, path)) {\n                newPoint = getPreviousNodeEndPoint(editor, path);\n            }\n\n            if (isEndPoint(editor, range.focus, path)) {\n                newPoint = getNextNodeStartPoint(editor, path);\n            }\n\n            if (newPoint) {\n                operation.newProperties = {\n                    anchor: newPoint,\n                    focus: newPoint,\n                };\n            }\n        }\n\n        apply(operation);\n    };\n\n    editor.normalizeNode = ([node, path]) => {\n        if (node.type === getPluginType(editor, ELEMENT_BUTTON)) {\n            const range = editor.selection as Range | null;\n\n            if (range && isCollapsed(range) && isEndPoint(editor, range.focus, path)) {\n                const nextPoint = getNextNodeStartPoint(editor, path);\n\n                // select next text node if any\n                if (nextPoint) {\n                    select(editor, nextPoint);\n                } else {\n                    // insert text node then select\n                    const nextPath = Path.next(path);\n                    insertNodes(editor, { text: '' } as EText<Value>, { at: nextPath });\n                    select(editor, nextPath);\n                }\n            }\n        }\n\n        normalizeNode([node, path]);\n    };\n\n    return withRemoveEmptyNodes<Value, PlateEditor<Value>>(\n        editor,\n        mockPlugin<AnyObject, Value, PlateEditor<Value>>({\n            options: { types: type },\n        }),\n    );\n};\n"],"names":["withButton","editor","type","isUrl","getUrlHref","rangeBeforeOptions","insertData","insertText","apply","normalizeNode","insertBreak","wrapButton","withoutNormalizing","selection","beforeWordRange","getRangeBefore","getRangeFromBlockStart","someNode","getPluginType","ELEMENT_BUTTON","beforeWordText","getEditorString","select","upsertButton","collapseSelection","isCollapsed","text","data","textHref","operation","range","entry","getAboveNode","path","newPoint","isStartPoint","getPreviousNodeEndPoint","isEndPoint","getNextNodeStartPoint","node","nextPoint","nextPath","Path","insertNodes","withRemoveEmptyNodes","mockPlugin"],"mappings":";;;;AAuCa,MAAAA,IAA2B,CAACC,GAAQ,EAAE,MAAAC,GAAM,SAAS,EAAE,OAAAC,GAAO,YAAAC,GAAY,oBAAAC,EAAmB,QAAQ;AAC9G,QAAM,EAAE,YAAAC,GAAY,YAAAC,GAAY,OAAAC,GAAO,eAAAC,GAAe,aAAAC,EAAgB,IAAAT,GAEhEU,IAAa,MAAM;AACrB,IAAAC,EAAmBX,GAAQ,MAAM;AAC7B,YAAMY,IAAYZ,EAAO;AAGzB,UAAIa,IAAkBC,EAAed,GAAQY,GAAWR,CAAkB;AAkB1E,UAfKS,MACDA,IAAkBE,EAAuBf,CAAM,IAI/C,CAACa,KAIWG,EAAShB,GAAQ;AAAA,QAC7B,IAAIa;AAAA,QACJ,OAAO,EAAE,MAAMI,EAAcjB,GAAQkB,CAAc,EAAE;AAAA,MAAA,CACxD;AAIG;AAGA,UAAAC,IAAiBC,EAAgBpB,GAAQa,CAAe;AAIxD,MAHaM,KAAAhB,KAAA,gBAAAA,EAAagB,OAAmBA,GAG5CjB,EAAMiB,CAAc,MAKzBE,EAAOrB,GAAQa,CAAe,GAG9BS,EAAatB,GAAQ;AAAA,QACjB,KAAKmB;AAAA,MAAA,CACR,GAGDI,EAAkBvB,GAAQ,EAAE,MAAM,MAAO,CAAA;AAAA,IAAA,CAC5C;AAAA,EAAA;AAGL,SAAAA,EAAO,cAAc,MAAM;AACvB,QAAI,CAACwB,EAAYxB,EAAO,SAAS;AAC7B,aAAOS,EAAY;AAEZ,IAAAC,KACCD;EAAA,GAGTT,EAAA,aAAa,CAACyB,MAAS;AAC1B,IAAIA,MAAS,OAAOD,EAAYxB,EAAO,SAAS,KACjCU,KAGfJ,EAAWmB,CAAI;AAAA,EAAA,GAGZzB,EAAA,aAAa,CAAC0B,MAAuB;AAClC,UAAAD,IAAOC,EAAK,QAAQ,YAAY,GAChCC,IAAWxB,KAAA,gBAAAA,EAAasB;AAE9B,IAAIA,KACiBH,EAAatB,GAAQ;AAAA,MAClC,KAAK2B,KAAYF;AAAA,MACjB,oBAAoB;AAAA,IAAA,CACvB,KAMLpB,EAAWqB,CAAI;AAAA,EAAA,GAGZ1B,EAAA,QAAQ,CAAC4B,MAAc;AACtB,QAAAA,EAAU,SAAS,iBAAiB;AACpC,MAAArB,EAAMqB,CAAS;AACf;AAAA,IACJ;AAEA,UAAMC,IAAQD,EAAU;AACpB,QAAA,EAACC,KAAA,QAAAA,EAAO,UAAS,CAACA,EAAM,UAAU,CAACL,EAAYK,CAAc,GAAG;AAChE,MAAAtB,EAAMqB,CAAS;AACf;AAAA,IACJ;AAEM,UAAAE,IAAQC,EAAa/B,GAAQ;AAAA,MAC/B,IAAI6B;AAAA,MACJ,OAAO,EAAE,MAAMZ,EAAcjB,GAAQkB,CAAc,EAAE;AAAA,IAAA,CACxD;AAED,QAAIY,GAAO;AACD,YAAA,CAAG,EAAAE,CAAI,IAAIF;AAEb,UAAAG;AAEJ,MAAIC,EAAalC,GAAQ6B,EAAM,OAAOG,CAAI,MAC3BC,IAAAE,EAAwBnC,GAAQgC,CAAI,IAG/CI,EAAWpC,GAAQ6B,EAAM,OAAOG,CAAI,MACzBC,IAAAI,EAAsBrC,GAAQgC,CAAI,IAG7CC,MACAL,EAAU,gBAAgB;AAAA,QACtB,QAAQK;AAAA,QACR,OAAOA;AAAA,MAAA;AAAA,IAGnB;AAEA,IAAA1B,EAAMqB,CAAS;AAAA,EAAA,GAGnB5B,EAAO,gBAAgB,CAAC,CAACsC,GAAMN,CAAI,MAAM;AACrC,QAAIM,EAAK,SAASrB,EAAcjB,GAAQkB,CAAc,GAAG;AACrD,YAAMW,IAAQ7B,EAAO;AAEjB,UAAA6B,KAASL,EAAYK,CAAK,KAAKO,EAAWpC,GAAQ6B,EAAM,OAAOG,CAAI,GAAG;AAChE,cAAAO,IAAYF,EAAsBrC,GAAQgC,CAAI;AAGpD,YAAIO;AACA,UAAAlB,EAAOrB,GAAQuC,CAAS;AAAA,aACrB;AAEG,gBAAAC,IAAWC,EAAK,KAAKT,CAAI;AACnB,UAAAU,EAAA1C,GAAQ,EAAE,MAAM,MAAsB,EAAE,IAAIwC,GAAU,GAClEnB,EAAOrB,GAAQwC,CAAQ;AAAA,QAC3B;AAAA,MACJ;AAAA,IACJ;AAEc,IAAAhC,EAAA,CAAC8B,GAAMN,CAAI,CAAC;AAAA,EAAA,GAGvBW;AAAA,IACH3C;AAAA,IACA4C,EAAiD;AAAA,MAC7C,SAAS,EAAE,OAAO3C,EAAK;AAAA,IAAA,CAC1B;AAAA,EAAA;AAET;"}
+{"version":3,"file":"withButton.es.js","sources":["../../../../../src/components/RichTextEditor/Plugins/ButtonPlugin/withButton.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    AnyObject,\n    EText,\n    PlateEditor,\n    Value,\n    WithOverride,\n    getAboveNode,\n    getNextNodeStartPoint,\n    getPluginType,\n    getPreviousNodeEndPoint,\n    insertNodes,\n    isCollapsed,\n    isEndPoint,\n    isStartPoint,\n    mockPlugin,\n    select,\n    withRemoveEmptyNodes,\n} from '@udecode/plate';\nimport { Path, Point, Range } from 'slate';\nimport { ELEMENT_BUTTON } from './createButtonPlugin';\n\n/**\n * Insert space after a url to wrap a button.\n * Lookup from the block start to the cursor to check if there is an url.\n * If not found, lookup before the cursor for a space character to check the url.\n *\n * On insert data:\n * Paste a string inside a button element will edit its children text but not its url.\n *\n */\n\nexport const withButton: WithOverride = (editor, { type }) => {\n    const { apply, normalizeNode } = editor;\n\n    editor.apply = (operation) => {\n        if (operation.type !== 'set_selection') {\n            apply(operation);\n            return;\n        }\n\n        const range = operation.newProperties;\n        if (!range?.focus || !range.anchor || !isCollapsed(range as Range)) {\n            apply(operation);\n            return;\n        }\n\n        const entry = getAboveNode(editor, {\n            at: range as Range,\n            match: { type: getPluginType(editor, ELEMENT_BUTTON) },\n        });\n\n        if (entry) {\n            const [, path] = entry;\n\n            let newPoint: Point | undefined;\n\n            if (isStartPoint(editor, range.focus, path)) {\n                newPoint = getPreviousNodeEndPoint(editor, path);\n            }\n\n            if (isEndPoint(editor, range.focus, path)) {\n                newPoint = getNextNodeStartPoint(editor, path);\n            }\n\n            if (newPoint) {\n                operation.newProperties = {\n                    anchor: newPoint,\n                    focus: newPoint,\n                };\n            }\n        }\n\n        apply(operation);\n    };\n\n    editor.normalizeNode = ([node, path]) => {\n        if (node.type === getPluginType(editor, ELEMENT_BUTTON)) {\n            const range = editor.selection as Range | null;\n\n            if (range && isCollapsed(range) && isEndPoint(editor, range.focus, path)) {\n                const nextPoint = getNextNodeStartPoint(editor, path);\n\n                // select next text node if any\n                if (nextPoint) {\n                    select(editor, nextPoint);\n                } else {\n                    // insert text node then select\n                    const nextPath = Path.next(path);\n                    insertNodes(editor, { text: '' } as EText<Value>, { at: nextPath });\n                    select(editor, nextPath);\n                }\n            }\n        }\n\n        normalizeNode([node, path]);\n    };\n\n    return withRemoveEmptyNodes<Value, PlateEditor<Value>>(\n        editor,\n        mockPlugin<AnyObject, Value, PlateEditor<Value>>({\n            options: { types: type },\n        }),\n    );\n};\n"],"names":["withButton","editor","type","apply","normalizeNode","operation","range","isCollapsed","entry","getAboveNode","getPluginType","ELEMENT_BUTTON","path","newPoint","isStartPoint","getPreviousNodeEndPoint","isEndPoint","getNextNodeStartPoint","node","nextPoint","select","nextPath","Path","insertNodes","withRemoveEmptyNodes","mockPlugin"],"mappings":";;;AAiCO,MAAMA,IAA2B,CAACC,GAAQ,EAAE,MAAAC,QAAW;AACpD,QAAA,EAAE,OAAAC,GAAO,eAAAC,EAAkB,IAAAH;AAE1B,SAAAA,EAAA,QAAQ,CAACI,MAAc;AACtB,QAAAA,EAAU,SAAS,iBAAiB;AACpC,MAAAF,EAAME,CAAS;AACf;AAAA,IACJ;AAEA,UAAMC,IAAQD,EAAU;AACpB,QAAA,EAACC,KAAA,QAAAA,EAAO,UAAS,CAACA,EAAM,UAAU,CAACC,EAAYD,CAAc,GAAG;AAChE,MAAAH,EAAME,CAAS;AACf;AAAA,IACJ;AAEM,UAAAG,IAAQC,EAAaR,GAAQ;AAAA,MAC/B,IAAIK;AAAA,MACJ,OAAO,EAAE,MAAMI,EAAcT,GAAQU,CAAc,EAAE;AAAA,IAAA,CACxD;AAED,QAAIH,GAAO;AACD,YAAA,CAAG,EAAAI,CAAI,IAAIJ;AAEb,UAAAK;AAEJ,MAAIC,EAAab,GAAQK,EAAM,OAAOM,CAAI,MAC3BC,IAAAE,EAAwBd,GAAQW,CAAI,IAG/CI,EAAWf,GAAQK,EAAM,OAAOM,CAAI,MACzBC,IAAAI,EAAsBhB,GAAQW,CAAI,IAG7CC,MACAR,EAAU,gBAAgB;AAAA,QACtB,QAAQQ;AAAA,QACR,OAAOA;AAAA,MAAA;AAAA,IAGnB;AAEA,IAAAV,EAAME,CAAS;AAAA,EAAA,GAGnBJ,EAAO,gBAAgB,CAAC,CAACiB,GAAMN,CAAI,MAAM;AACrC,QAAIM,EAAK,SAASR,EAAcT,GAAQU,CAAc,GAAG;AACrD,YAAML,IAAQL,EAAO;AAEjB,UAAAK,KAASC,EAAYD,CAAK,KAAKU,EAAWf,GAAQK,EAAM,OAAOM,CAAI,GAAG;AAChE,cAAAO,IAAYF,EAAsBhB,GAAQW,CAAI;AAGpD,YAAIO;AACA,UAAAC,EAAOnB,GAAQkB,CAAS;AAAA,aACrB;AAEG,gBAAAE,IAAWC,EAAK,KAAKV,CAAI;AACnB,UAAAW,EAAAtB,GAAQ,EAAE,MAAM,MAAsB,EAAE,IAAIoB,GAAU,GAClED,EAAOnB,GAAQoB,CAAQ;AAAA,QAC3B;AAAA,MACJ;AAAA,IACJ;AAEc,IAAAjB,EAAA,CAACc,GAAMN,CAAI,CAAC;AAAA,EAAA,GAGvBY;AAAA,IACHvB;AAAA,IACAwB,EAAiD;AAAA,MAC7C,SAAS,EAAE,OAAOvB,EAAK;AAAA,IAAA,CAC1B;AAAA,EAAA;AAET;"}