@uva-glass/component-library 3.29.0 → 3.30.1
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.
- package/dist/Column-BL3dsYxn.js.map +1 -1
- package/dist/Lexical.prod-UwAbgYpF.js.map +1 -1
- package/dist/LexicalClipboard.prod-DHIGjydG.js.map +1 -1
- package/dist/LexicalLink.prod-Bsa9J7L-.js.map +1 -1
- package/dist/LexicalList.prod-jxGuZd4b.js.map +1 -1
- package/dist/LexicalSelection.prod-xk5MiZnZ.js.map +1 -1
- package/dist/LexicalTable.prod-BSjs04iE.js.map +1 -1
- package/dist/LexicalUtils.prod-cQutjKA3.js.map +1 -1
- package/dist/MultiSelectItem-DbOdEllV.js.map +1 -1
- package/dist/SortableProvider-CwX1lFMa.js.map +1 -1
- package/dist/TablePlugin-NmJsn2fm.js.map +1 -1
- package/dist/__mocks__/svgrMock.js.map +1 -1
- package/dist/assets/Notification.css +1 -1
- package/dist/{client-EQRlhXX7.js → client-D0KlBcsm.js} +1325 -1325
- package/dist/{client-EQRlhXX7.js.map → client-D0KlBcsm.js.map} +1 -1
- package/dist/components/Accordion/Accordion.js.map +1 -1
- package/dist/components/Accordion/Accordion.stories.d.ts +2 -2
- package/dist/components/Accordion/Accordion.stories.js.map +1 -1
- package/dist/components/Accordion/Accordion.test.js +3 -3
- package/dist/components/Accordion/Accordion.test.js.map +1 -1
- package/dist/components/AccordionCard/AccordionCard.js.map +1 -1
- package/dist/components/AccordionCard/AccordionCard.stories.d.ts +1 -1
- package/dist/components/AccordionCard/AccordionCard.stories.js.map +1 -1
- package/dist/components/AccordionCard/AccordionCard.test.js +3 -3
- package/dist/components/AccordionCard/AccordionCard.test.js.map +1 -1
- package/dist/components/ActionList/ActionList.js.map +1 -1
- package/dist/components/ActionList/ActionList.stories.d.ts +1 -1
- package/dist/components/ActionList/ActionList.stories.js.map +1 -1
- package/dist/components/ActionList/ActionList.test.js +3 -3
- package/dist/components/ActionList/ActionList.test.js.map +1 -1
- package/dist/components/AppStatusBar/AppStatusBar.js.map +1 -1
- package/dist/components/AppStatusBar/AppStatusBar.stories.d.ts +1 -1
- package/dist/components/AppStatusBar/AppStatusBar.stories.js.map +1 -1
- package/dist/components/AppStatusBar/AppStatusBar.test.js +2 -2
- package/dist/components/AppStatusBar/AppStatusBar.test.js.map +1 -1
- package/dist/components/Attention/Attention.js.map +1 -1
- package/dist/components/Attention/Attention.stories.d.ts +1 -1
- package/dist/components/Attention/Attention.stories.js.map +1 -1
- package/dist/components/Attention/Attention.test.js +2 -2
- package/dist/components/Attention/Attention.test.js.map +1 -1
- package/dist/components/Backdrop/Backdrop.js.map +1 -1
- package/dist/components/Backdrop/Backdrop.stories.d.ts +1 -1
- package/dist/components/Backdrop/Backdrop.stories.js.map +1 -1
- package/dist/components/Backdrop/Backdrop.test.js +2 -2
- package/dist/components/Backdrop/Backdrop.test.js.map +1 -1
- package/dist/components/ButtonGroup/ButtonGroup.js.map +1 -1
- package/dist/components/ButtonGroup/ButtonGroup.stories.d.ts +1 -1
- package/dist/components/ButtonGroup/ButtonGroup.stories.js.map +1 -1
- package/dist/components/Buttons/Button.js.map +1 -1
- package/dist/components/Buttons/Button.stories.d.ts +2 -2
- package/dist/components/Buttons/Button.stories.js +8 -8
- package/dist/components/Buttons/Button.stories.js.map +1 -1
- package/dist/components/Buttons/Button.test.js +2 -2
- package/dist/components/Buttons/Button.test.js.map +1 -1
- package/dist/components/Buttons/LinkButton.js.map +1 -1
- package/dist/components/Buttons/LinkButton.stories.d.ts +2 -2
- package/dist/components/Buttons/LinkButton.stories.js +10 -10
- package/dist/components/Buttons/LinkButton.stories.js.map +1 -1
- package/dist/components/Buttons/LinkButton.test.js +2 -2
- package/dist/components/Buttons/LinkButton.test.js.map +1 -1
- package/dist/components/Buttons/MenuButton.js.map +1 -1
- package/dist/components/Buttons/MenuButton.stories.d.ts +3 -3
- package/dist/components/Buttons/MenuButton.stories.js +15 -15
- package/dist/components/Buttons/MenuButton.stories.js.map +1 -1
- package/dist/components/Buttons/MenuButton.test.js +2 -2
- package/dist/components/Buttons/MenuButton.test.js.map +1 -1
- package/dist/components/Card/Card.js.map +1 -1
- package/dist/components/Card/Card.stories.d.ts +3 -3
- package/dist/components/Card/Card.stories.js.map +1 -1
- package/dist/components/Card/Card.test.js +2 -2
- package/dist/components/Card/Card.test.js.map +1 -1
- package/dist/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/components/Checkbox/Checkbox.stories.d.ts +2 -2
- package/dist/components/Checkbox/Checkbox.stories.js +1 -1
- package/dist/components/Checkbox/Checkbox.stories.js.map +1 -1
- package/dist/components/Checkbox/Checkbox.test.js +3 -3
- package/dist/components/Checkbox/Checkbox.test.js.map +1 -1
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js.map +1 -1
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.d.ts +3 -3
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.js +1 -1
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.js.map +1 -1
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.test.js +2 -2
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.test.js.map +1 -1
- package/dist/components/CheckboxTree/CheckboxTree.js.map +1 -1
- package/dist/components/CheckboxTree/CheckboxTree.stories.d.ts +1 -1
- package/dist/components/CheckboxTree/CheckboxTree.stories.js +108 -123
- package/dist/components/CheckboxTree/CheckboxTree.stories.js.map +1 -1
- package/dist/components/Chip/Chip.js.map +1 -1
- package/dist/components/Chip/Chip.stories.d.ts +2 -2
- package/dist/components/Chip/Chip.stories.js +1 -1
- package/dist/components/Chip/Chip.stories.js.map +1 -1
- package/dist/components/ControlsButton/ControlsButton.js.map +1 -1
- package/dist/components/ControlsButton/ControlsButton.stories.d.ts +1 -1
- package/dist/components/ControlsButton/ControlsButton.stories.js +4 -4
- package/dist/components/ControlsButton/ControlsButton.stories.js.map +1 -1
- package/dist/components/Drawer/Drawer.js.map +1 -1
- package/dist/components/Drawer/Drawer.stories.d.ts +2 -2
- package/dist/components/Drawer/Drawer.stories.js +9 -9
- package/dist/components/Drawer/Drawer.stories.js.map +1 -1
- package/dist/components/EmptyStateDataDisplay/EmptyStateDataDisplay.js.map +1 -1
- package/dist/components/EmptyStateDataDisplay/EmptyStateDataDisplay.stories.d.ts +1 -1
- package/dist/components/EmptyStateDataDisplay/EmptyStateDataDisplay.stories.js.map +1 -1
- package/dist/components/ExpandableInfoPanel/ExpandableInfoPanel.js.map +1 -1
- package/dist/components/ExpandableInfoPanel/ExpandableInfoPanel.stories.d.ts +1 -1
- package/dist/components/ExpandableInfoPanel/ExpandableInfoPanel.stories.js.map +1 -1
- package/dist/components/FeedbackBar/FeedbackBar.js.map +1 -1
- package/dist/components/FeedbackBar/FeedbackBar.stories.d.ts +1 -1
- package/dist/components/FeedbackBar/FeedbackBar.stories.js.map +1 -1
- package/dist/components/FeedbackBar/FeedbackBar.test.js +2 -2
- package/dist/components/FeedbackBar/FeedbackBar.test.js.map +1 -1
- package/dist/components/FeedbackBox/FeedbackBox.js.map +1 -1
- package/dist/components/FeedbackBox/FeedbackBox.stories.d.ts +2 -2
- package/dist/components/FeedbackBox/FeedbackBox.stories.js.map +1 -1
- package/dist/components/FieldHint/FieldHint.js.map +1 -1
- package/dist/components/FieldHint/FieldHint.stories.d.ts +2 -2
- package/dist/components/FieldHint/FieldHint.stories.js.map +1 -1
- package/dist/components/Fieldset/Fieldset.js.map +1 -1
- package/dist/components/Fieldset/Fieldset.stories.d.ts +2 -2
- package/dist/components/Fieldset/Fieldset.stories.js.map +1 -1
- package/dist/components/FormField/FormField.stories.d.ts +1 -1
- package/dist/components/FormField/FormField.stories.js.map +1 -1
- package/dist/components/FormInput/FormInput.js.map +1 -1
- package/dist/components/FormInput/FormInput.stories.d.ts +2 -2
- package/dist/components/FormInput/FormInput.stories.js +1 -1
- package/dist/components/FormInput/FormInput.stories.js.map +1 -1
- package/dist/components/GridRow/GridRow.js.map +1 -1
- package/dist/components/GridRow/GridRow.stories.d.ts +2 -2
- package/dist/components/GridRow/GridRow.stories.js.map +1 -1
- package/dist/components/HorizontalList/HorizontalList.js.map +1 -1
- package/dist/components/HorizontalList/HorizontalList.stories.d.ts +2 -2
- package/dist/components/HorizontalList/HorizontalList.stories.js.map +1 -1
- package/dist/components/Icon/Icon.js.map +1 -1
- package/dist/components/Icon/Icon.stories.d.ts +1 -1
- package/dist/components/Icon/Icon.stories.js.map +1 -1
- package/dist/components/Icon/icons/index.js.map +1 -1
- package/dist/components/IconButton/IconButton.stories.d.ts +1 -1
- package/dist/components/IconButton/IconButton.stories.js +5 -5
- package/dist/components/IconButton/IconButton.stories.js.map +1 -1
- package/dist/components/InfoBanner/InfoBanner.js.map +1 -1
- package/dist/components/InfoBanner/InfoBanner.stories.d.ts +1 -1
- package/dist/components/InfoBanner/InfoBanner.stories.js.map +1 -1
- package/dist/components/InfoMessage/InfoMessage.js.map +1 -1
- package/dist/components/InfoMessage/InfoMessage.stories.d.ts +1 -1
- package/dist/components/InfoMessage/InfoMessage.stories.js.map +1 -1
- package/dist/components/Input/Input.js.map +1 -1
- package/dist/components/Input/Input.stories.d.ts +4 -4
- package/dist/components/Input/Input.stories.js.map +1 -1
- package/dist/components/InputField/InputField.js.map +1 -1
- package/dist/components/InputField/InputField.stories.d.ts +3 -3
- package/dist/components/InputField/InputField.stories.js +12 -12
- package/dist/components/InputField/InputField.stories.js.map +1 -1
- package/dist/components/Label/Label.js.map +1 -1
- package/dist/components/Label/Label.stories.d.ts +2 -2
- package/dist/components/Label/Label.stories.js.map +1 -1
- package/dist/components/Label/Label.test.js +2 -2
- package/dist/components/Label/Label.test.js.map +1 -1
- package/dist/components/MenuLink/MenuLink.js.map +1 -1
- package/dist/components/MenuLink/MenuLink.stories.d.ts +2 -2
- package/dist/components/MenuLink/MenuLink.stories.js.map +1 -1
- package/dist/components/MetaDataList/MetaDataList.js.map +1 -1
- package/dist/components/MetaDataList/MetaDataList.stories.d.ts +1 -1
- package/dist/components/MetaDataList/MetaDataList.stories.js.map +1 -1
- package/dist/components/ModalDialog/ModalDialog.js.map +1 -1
- package/dist/components/ModalDialog/ModalDialog.stories.d.ts +3 -3
- package/dist/components/ModalDialog/ModalDialog.stories.js +8 -8
- package/dist/components/ModalDialog/ModalDialog.stories.js.map +1 -1
- package/dist/components/MultiSelect/MultiSelect.stories.d.ts +3 -3
- package/dist/components/MultiSelect/MultiSelect.stories.js +7 -7
- package/dist/components/MultiSelect/MultiSelect.stories.js.map +1 -1
- package/dist/components/MultiSelectBox/MultiSelectBox.js.map +1 -1
- package/dist/components/MultiSelectBox/MultiSelectBox.stories.d.ts +2 -2
- package/dist/components/MultiSelectBox/MultiSelectBox.stories.js +5 -5
- package/dist/components/MultiSelectBox/MultiSelectBox.stories.js.map +1 -1
- package/dist/components/MultiSelectBox/MultiSelectBox.test.js +2 -2
- package/dist/components/MultiSelectBox/MultiSelectBox.test.js.map +1 -1
- package/dist/components/Notification/Notification.js +41 -41
- package/dist/components/Notification/Notification.js.map +1 -1
- package/dist/components/Notification/Notification.stories.d.ts +2 -2
- package/dist/components/Notification/Notification.stories.js +3 -3
- package/dist/components/Notification/Notification.stories.js.map +1 -1
- package/dist/components/Notification/Notification.test.js +2 -2
- package/dist/components/Notification/Notification.test.js.map +1 -1
- package/dist/components/OverlayCloseButton/OverlayCloseButton.js.map +1 -1
- package/dist/components/OverlayCloseButton/OverlayCloseButton.stories.d.ts +1 -1
- package/dist/components/OverlayCloseButton/OverlayCloseButton.stories.js +4 -4
- package/dist/components/OverlayCloseButton/OverlayCloseButton.stories.js.map +1 -1
- package/dist/components/OverlayStepBar/OverlayStepBar.js.map +1 -1
- package/dist/components/OverlayStepBar/OverlayStepBar.stories.d.ts +2 -2
- package/dist/components/OverlayStepBar/OverlayStepBar.stories.js.map +1 -1
- package/dist/components/PageOverlay/PageOverlay.js.map +1 -1
- package/dist/components/PageOverlay/PageOverlay.stories.d.ts +3 -3
- package/dist/components/PageOverlay/PageOverlay.stories.js.map +1 -1
- package/dist/components/PeriodSelector/PeriodSelector.js.map +1 -1
- package/dist/components/PeriodSelector/PeriodSelector.stories.d.ts +1 -1
- package/dist/components/PeriodSelector/PeriodSelector.stories.js +1 -1
- package/dist/components/PeriodSelector/PeriodSelector.stories.js.map +1 -1
- package/dist/components/Periods/Periods.js.map +1 -1
- package/dist/components/Periods/Periods.stories.d.ts +1 -1
- package/dist/components/Periods/Periods.stories.js.map +1 -1
- package/dist/components/ProgrammeCard/ProgrammeCard.js.map +1 -1
- package/dist/components/ProgrammeCard/ProgrammeCard.stories.d.ts +3 -3
- package/dist/components/ProgrammeCard/ProgrammeCard.stories.js.map +1 -1
- package/dist/components/RadioButton/RadioButton.js.map +1 -1
- package/dist/components/RadioButton/RadioButton.stories.d.ts +1 -1
- package/dist/components/RadioButton/RadioButton.stories.js.map +1 -1
- package/dist/components/RadioGroup/RadioGroup.js.map +1 -1
- package/dist/components/RadioGroup/RadioGroup.stories.d.ts +1 -1
- package/dist/components/RadioGroup/RadioGroup.stories.js +4 -4
- package/dist/components/RadioGroup/RadioGroup.stories.js.map +1 -1
- package/dist/components/RadioGroup/Radiogroup.test.js +2 -2
- package/dist/components/RadioGroup/Radiogroup.test.js.map +1 -1
- package/dist/components/RadioTabSelector/RadioTabSelector.js.map +1 -1
- package/dist/components/RadioTabSelector/RadioTabSelector.stories.d.ts +1 -1
- package/dist/components/RadioTabSelector/RadioTabSelector.stories.js +1 -1
- package/dist/components/RadioTabSelector/RadioTabSelector.stories.js.map +1 -1
- package/dist/components/Repeater/Repeater.js.map +1 -1
- package/dist/components/Repeater/Repeater.stories.d.ts +1 -1
- package/dist/components/Repeater/Repeater.stories.js.map +1 -1
- package/dist/components/RteEditor/EditorHeader/EditorHeader.js.map +1 -1
- package/dist/components/RteEditor/Plugins/BlockFormatPlugin/BlockFormatPlugin.js.map +1 -1
- package/dist/components/RteEditor/Plugins/HistoryPlugin/HistoryPlugin.js.map +1 -1
- package/dist/components/RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js.map +1 -1
- package/dist/components/RteEditor/Plugins/LinkPlugin/LinkPlugin.js.map +1 -1
- package/dist/components/RteEditor/Plugins/ListPlugin/ListPlugin.js.map +1 -1
- package/dist/components/RteEditor/Plugins/PasteHandlerPlugin/PasteHandlerPlugin.js.map +1 -1
- package/dist/components/RteEditor/Plugins/TablePlugin/TableCellContextMenu/TableCellContextMenu.js.map +1 -1
- package/dist/components/RteEditor/Plugins/TablePlugin/helpers.js.map +1 -1
- package/dist/components/RteEditor/Plugins/ToolbarPlugin/ToolbarPlugin.js.map +1 -1
- package/dist/components/RteEditor/Providers/LanguageProvider.js.map +1 -1
- package/dist/components/RteEditor/RteEditor.js.map +1 -1
- package/dist/components/RteEditor/RteEditor.stories.d.ts +1 -1
- package/dist/components/RteEditor/RteEditor.stories.js.map +1 -1
- package/dist/components/RteEditor/UvaTheme/UvaTheme.js.map +1 -1
- package/dist/components/RteEditor/helpers.js.map +1 -1
- package/dist/components/RteEditor/hooks/components/Flyout.js.map +1 -1
- package/dist/components/RteEditor/hooks/useFlyout.js.map +1 -1
- package/dist/components/RteEditor/hooks/useTranslation.js.map +1 -1
- package/dist/components/RteEditor/translations.js.map +1 -1
- package/dist/components/SectionNotification/SectionNotification.js.map +1 -1
- package/dist/components/SectionNotification/SectionNotification.stories.d.ts +1 -1
- package/dist/components/SectionNotification/SectionNotification.stories.js.map +1 -1
- package/dist/components/SelectListbox/SelectListBox.stories.d.ts +2 -2
- package/dist/components/SelectListbox/SelectListBox.stories.js +1 -1
- package/dist/components/SelectListbox/SelectListBox.stories.js.map +1 -1
- package/dist/components/SelectListbox/SelectListbox.js.map +1 -1
- package/dist/components/SelectListbox/SelectProvider.js.map +1 -1
- package/dist/components/SelectListbox/components/SelectButton.js.map +1 -1
- package/dist/components/SelectListbox/components/SelectContainer.js.map +1 -1
- package/dist/components/SelectListbox/components/SelectOption.js.map +1 -1
- package/dist/components/SelectListbox/components/SelectOptionBox.js.map +1 -1
- package/dist/components/Sortable/Sortable.js.map +1 -1
- package/dist/components/Sortable/Sortable.stories.d.ts +3 -3
- package/dist/components/Sortable/Sortable.stories.js +13 -13
- package/dist/components/Sortable/Sortable.stories.js.map +1 -1
- package/dist/components/Sortable/actions.js.map +1 -1
- package/dist/components/Sortable/components/SortableHandle.js.map +1 -1
- package/dist/components/Sortable/components/SortableItem.js.map +1 -1
- package/dist/components/Sortable/sortableReducer.js.map +1 -1
- package/dist/components/Spinner/Spinner.js.map +1 -1
- package/dist/components/Spinner/Spinner.stories.d.ts +1 -1
- package/dist/components/Spinner/Spinner.stories.js.map +1 -1
- package/dist/components/StatusBadge/StatusBadge.stories.d.ts +1 -1
- package/dist/components/StatusBadge/StatusBadge.stories.js.map +1 -1
- package/dist/components/StatusBadge/StatusBadge.test.js +2 -2
- package/dist/components/StatusBadge/StatusBadge.test.js.map +1 -1
- package/dist/components/StatusBadge/StatusBage.js.map +1 -1
- package/dist/components/StatusPill/StatusPill.js.map +1 -1
- package/dist/components/StatusPill/StatusPill.stories.d.ts +1 -1
- package/dist/components/StatusPill/StatusPill.stories.js.map +1 -1
- package/dist/components/TextArea/TextArea.js.map +1 -1
- package/dist/components/TextArea/TextArea.stories.d.ts +1 -1
- package/dist/components/TextArea/TextArea.stories.js +1 -1
- package/dist/components/TextArea/TextArea.stories.js.map +1 -1
- package/dist/components/TextArea/TextArea.test.js +9 -9
- package/dist/components/TextArea/TextArea.test.js.map +1 -1
- package/dist/components/ToggleSwitch/ToggleSwitch.js.map +1 -1
- package/dist/components/ToggleSwitch/ToggleSwitch.stories.d.ts +1 -1
- package/dist/components/ToggleSwitch/ToggleSwitch.stories.js +5 -5
- package/dist/components/ToggleSwitch/ToggleSwitch.stories.js.map +1 -1
- package/dist/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/components/Tooltip/Tooltip.stories.d.ts +1 -1
- package/dist/components/Tooltip/Tooltip.stories.js.map +1 -1
- package/dist/components/VarIndicator/VarIndicator.js.map +1 -1
- package/dist/components/VarIndicator/VarIndicator.stories.d.ts +1 -1
- package/dist/components/VarIndicator/VarIndicator.stories.js +4 -4
- package/dist/components/VarIndicator/VarIndicator.stories.js.map +1 -1
- package/dist/components/VarIndicator/VarIndicator.test.js +3 -3
- package/dist/components/VarIndicator/VarIndicator.test.js.map +1 -1
- package/dist/components/hooks/useDebounce.js.map +1 -1
- package/dist/components/hooks/useOnClickOutside.js.map +1 -1
- package/dist/components/hooks/usePositionedFloaters.js.map +1 -1
- package/dist/components/hooks/useResponsive.js.map +1 -1
- package/dist/helpers-DZIm3MiJ.js.map +1 -1
- package/dist/index-BVAvx58-.js +10648 -0
- package/dist/index-BVAvx58-.js.map +1 -0
- package/dist/{index-BqLi4tOb.js → index-DV47hRzi.js} +2891 -2818
- package/dist/index-DV47hRzi.js.map +1 -0
- package/dist/index-Di9WPZUe.js +34752 -0
- package/dist/index-Di9WPZUe.js.map +1 -0
- package/dist/index-DllfJcv4.js.map +1 -1
- package/dist/index-PaHiqSUg.js +3099 -0
- package/dist/index-PaHiqSUg.js.map +1 -0
- package/dist/{react-18-dpbWrd2-.js → react-18-inmoTCp-.js} +2 -2
- package/dist/{react-18-dpbWrd2-.js.map → react-18-inmoTCp-.js.map} +1 -1
- package/dist/{react.esm-CsMDid07.js → react.esm-CFMwGdo5.js} +3 -3
- package/dist/{react.esm-CsMDid07.js.map → react.esm-CFMwGdo5.js.map} +1 -1
- package/dist/setupTests.js +11 -1562
- package/dist/setupTests.js.map +1 -1
- package/dist/storyComponents/ClipboardButton/ClipboardButton.js.map +1 -1
- package/dist/storyComponents/Container/Container.js.map +1 -1
- package/dist/storybook__react.d.js +5345 -5766
- package/dist/storybook__react.d.js.map +1 -1
- package/dist/test-utils-ea_YDVtd.js.map +1 -1
- package/package.json +16 -20
- package/dist/index-BqLi4tOb.js.map +0 -1
- package/dist/index-CUap8sKR.js +0 -2962
- package/dist/index-CUap8sKR.js.map +0 -1
- package/dist/index-DH9Vbk37.js +0 -9507
- package/dist/index-DH9Vbk37.js.map +0 -1
- package/dist/index-Dwqes6RH.js +0 -14758
- package/dist/index-Dwqes6RH.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioTabSelector.js","sources":["../../../src/components/RadioTabSelector/RadioTabSelector.tsx"],"sourcesContent":["import clsx from 'clsx';\r\nimport { useState } from 'react';\r\n\r\nimport type { ChangeEvent } from 'react';\r\n\r\nimport styles from './RadioTabSelector.module.css';\r\n\r\nimport { ControlsButton, FeedbackBox, Label } from 'components';\r\n\r\ntype ButtonProps = {\r\n label: string;\r\n value: string;\r\n disabled?: boolean;\r\n};\r\n\r\nexport interface RadioTabSelectorProps {\r\n /** array with objects with label, value, disablestate */\r\n buttons: ButtonProps[];\r\n /** name of the radiogroup */\r\n radioGroupName: string;\r\n /** innitial value */\r\n defaultValue?: string;\r\n /** label takst */\r\n label?: string;\r\n /** 'top' | 'left' */\r\n labelPosition?: 'top' | 'left';\r\n /** show red star */\r\n required?: boolean;\r\n /** error text to display if set */\r\n notValidatedText?: string;\r\n /** The callback function that is invoked when the radio tab selector changes value. */\r\n onSetValue: (value: string | null) => void;\r\n}\r\n\r\nexport const RadioTabSelector = ({\r\n buttons,\r\n radioGroupName,\r\n defaultValue,\r\n label,\r\n labelPosition = 'top',\r\n required = false,\r\n notValidatedText = '',\r\n onSetValue,\r\n}: RadioTabSelectorProps) => {\r\n const [currentValue, setCurrentValue] = useState<string | null>(defaultValue || null);\r\n\r\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\r\n setCurrentValue(event.target.value);\r\n onSetValue(event.target.value);\r\n };\r\n\r\n return (\r\n <div\r\n className={clsx(\r\n styles['radio-tab-selector-button-bar__container'],\r\n styles[`radio-tab-selector-button-bar__container--label-${labelPosition}`]\r\n )}\r\n >\r\n {label && (\r\n <Label htmlFor=\"\" required={required}>\r\n {label}\r\n </Label>\r\n )}\r\n <div className={styles['radio-tab-selector-button-bar__row-container']}>\r\n <div\r\n className={clsx(styles['radio-tab-selector-button-bar__row'], {\r\n [styles['radio-tab-selector-button-bar__row--not-validated']]: notValidatedText,\r\n })}\r\n >\r\n {buttons.map(({ label, value, disabled }) => (\r\n <ControlsButton\r\n type=\"radio\"\r\n name={radioGroupName}\r\n key={`${value}`}\r\n label={label}\r\n value={value}\r\n checked={currentValue === value}\r\n disabled={disabled}\r\n onSetValue={handleChange}\r\n />\r\n ))}\r\n </div>\r\n {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\r\n </div>\r\n </div>\r\n );\r\n};\r\n"],"names":["RadioTabSelector","buttons","radioGroupName","defaultValue","label","labelPosition","required","notValidatedText","onSetValue","currentValue","setCurrentValue","useState","handleChange","event","jsxs","clsx","styles","jsx","Label","value","disabled","ControlsButton","FeedbackBox"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCaA,IAAmB,CAAC;AAAA,EAC/B,SAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,UAAAC,IAAW;AAAA,EACX,kBAAAC,IAAmB;AAAA,EACnB,YAAAC;AACF,MAA6B;AAC3B,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAwBR,KAAgB,IAAI,GAE9ES,IAAe,CAACC,MAAyC;
|
|
1
|
+
{"version":3,"file":"RadioTabSelector.js","sources":["../../../src/components/RadioTabSelector/RadioTabSelector.tsx"],"sourcesContent":["import { clsx } from 'clsx';\r\nimport { useState } from 'react';\r\n\r\nimport type { ChangeEvent } from 'react';\r\n\r\nimport styles from './RadioTabSelector.module.css';\r\n\r\nimport { ControlsButton, FeedbackBox, Label } from 'components';\r\n\r\ntype ButtonProps = {\r\n label: string;\r\n value: string;\r\n disabled?: boolean;\r\n};\r\n\r\nexport interface RadioTabSelectorProps {\r\n /** array with objects with label, value, disablestate */\r\n buttons: ButtonProps[];\r\n /** name of the radiogroup */\r\n radioGroupName: string;\r\n /** innitial value */\r\n defaultValue?: string;\r\n /** label takst */\r\n label?: string;\r\n /** 'top' | 'left' */\r\n labelPosition?: 'top' | 'left';\r\n /** show red star */\r\n required?: boolean;\r\n /** error text to display if set */\r\n notValidatedText?: string;\r\n /** The callback function that is invoked when the radio tab selector changes value. */\r\n onSetValue: (value: string | null) => void;\r\n}\r\n\r\nexport const RadioTabSelector = ({\r\n buttons,\r\n radioGroupName,\r\n defaultValue,\r\n label,\r\n labelPosition = 'top',\r\n required = false,\r\n notValidatedText = '',\r\n onSetValue,\r\n}: RadioTabSelectorProps) => {\r\n const [currentValue, setCurrentValue] = useState<string | null>(defaultValue || null);\r\n\r\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\r\n setCurrentValue(event.target.value);\r\n onSetValue(event.target.value);\r\n };\r\n\r\n return (\r\n <div\r\n className={clsx(\r\n styles['radio-tab-selector-button-bar__container'],\r\n styles[`radio-tab-selector-button-bar__container--label-${labelPosition}`]\r\n )}\r\n >\r\n {label && (\r\n <Label htmlFor=\"\" required={required}>\r\n {label}\r\n </Label>\r\n )}\r\n <div className={styles['radio-tab-selector-button-bar__row-container']}>\r\n <div\r\n className={clsx(styles['radio-tab-selector-button-bar__row'], {\r\n [styles['radio-tab-selector-button-bar__row--not-validated']]: notValidatedText,\r\n })}\r\n >\r\n {buttons.map(({ label, value, disabled }) => (\r\n <ControlsButton\r\n type=\"radio\"\r\n name={radioGroupName}\r\n key={`${value}`}\r\n label={label}\r\n value={value}\r\n checked={currentValue === value}\r\n disabled={disabled}\r\n onSetValue={handleChange}\r\n />\r\n ))}\r\n </div>\r\n {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\r\n </div>\r\n </div>\r\n );\r\n};\r\n"],"names":["RadioTabSelector","buttons","radioGroupName","defaultValue","label","labelPosition","required","notValidatedText","onSetValue","currentValue","setCurrentValue","useState","handleChange","event","jsxs","clsx","styles","jsx","Label","value","disabled","ControlsButton","FeedbackBox"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCaA,IAAmB,CAAC;AAAA,EAC/B,SAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,UAAAC,IAAW;AAAA,EACX,kBAAAC,IAAmB;AAAA,EACnB,YAAAC;AACF,MAA6B;AAC3B,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAwBR,KAAgB,IAAI,GAE9ES,IAAe,CAACC,MAAyC;AAC7D,IAAAH,EAAgBG,EAAM,OAAO,KAAK,GAClCL,EAAWK,EAAM,OAAO,KAAK;AAAA,EAAA;AAG/B,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTC,EAAO,0CAA0C;AAAA,QACjDA,EAAO,mDAAmDX,CAAa,EAAE;AAAA,MAAA;AAAA,MAG1E,UAAA;AAAA,QAAAD,KACC,gBAAAa,EAACC,GAAA,EAAM,SAAQ,IAAG,UAAAZ,GACf,UAAAF,GACH;AAAA,QAEF,gBAAAU,EAAC,OAAA,EAAI,WAAWE,EAAO,8CAA8C,GACnE,UAAA;AAAA,UAAA,gBAAAC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWF,EAAKC,EAAO,oCAAoC,GAAG;AAAA,gBAC5D,CAACA,EAAO,mDAAmD,CAAC,GAAGT;AAAA,cAAA,CAChE;AAAA,cAEA,UAAAN,EAAQ,IAAI,CAAC,EAAE,OAAAG,GAAO,OAAAe,GAAO,UAAAC,QAC5B,gBAAAH;AAAA,gBAACI;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,MAAMnB;AAAA,kBAEN,OAAOE;AAAAA,kBACP,OAAAe;AAAA,kBACA,SAASV,MAAiBU;AAAA,kBAC1B,UAAAC;AAAA,kBACA,YAAYR;AAAA,gBAAA;AAAA,gBALP,GAAGO,CAAK;AAAA,cAAA,CAOhB;AAAA,YAAA;AAAA,UAAA;AAAA,UAEFZ,MAAqB,MAAM,gBAAAU,EAACK,KAAY,OAAM,SAAQ,UAAUf,EAAA,CAAkB;AAAA,QAAA,EAAA,CACrF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
|
@@ -2,4 +2,4 @@ import { Meta } from '@storybook/react';
|
|
|
2
2
|
import { RadioTabSelectorProps } from './RadioTabSelector';
|
|
3
3
|
declare const _default: Meta<RadioTabSelectorProps>;
|
|
4
4
|
export default _default;
|
|
5
|
-
export declare const RadioTabSelectorExample: import('
|
|
5
|
+
export declare const RadioTabSelectorExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, RadioTabSelectorProps>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as a } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { W as o } from "../../index-Di9WPZUe.js";
|
|
3
3
|
import { RadioTabSelector as e } from "./RadioTabSelector.js";
|
|
4
4
|
const l = "<RadioTabSelector radioButtons={} defaultValue={} label={} labelPosition={} required={} notValidatedText={} onSetValue={} />", u = {
|
|
5
5
|
title: "Molecules/RadioTabSelector",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioTabSelector.stories.js","sources":["../../../src/components/RadioTabSelector/RadioTabSelector.stories.tsx"],"sourcesContent":["import { fn } from '
|
|
1
|
+
{"version":3,"file":"RadioTabSelector.stories.js","sources":["../../../src/components/RadioTabSelector/RadioTabSelector.stories.tsx"],"sourcesContent":["import { fn } from 'storybook/test';\r\n\r\nimport type { Meta, StoryFn } from '@storybook/react';\r\nimport type { RadioTabSelectorProps } from './RadioTabSelector'; // Already imported above\r\n\r\nimport { RadioTabSelector } from './RadioTabSelector';\r\n\r\nconst codeString =\r\n '<RadioTabSelector radioButtons={} defaultValue={} label={} labelPosition={} required={} notValidatedText={} onSetValue={} />';\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n title: 'Molecules/RadioTabSelector',\r\n component: RadioTabSelector,\r\n argTypes: {\r\n radioButtons: {\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n defaultValue: {\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n label: {\r\n control: 'text',\r\n },\r\n labelPosition: {\r\n control: 'radio',\r\n options: ['top', 'left'],\r\n },\r\n required: {\r\n control: 'boolean',\r\n },\r\n notValidatedText: {\r\n control: 'text',\r\n },\r\n onSetValue: {\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n },\r\n parameters: {\r\n inspectComponent: RadioTabSelector,\r\n codeString: codeString,\r\n },\r\n} as Meta<RadioTabSelectorProps>;\r\n\r\nconst Template: StoryFn<RadioTabSelectorProps> = (args) => <RadioTabSelector {...args} />;\r\n\r\nexport const RadioTabSelectorExample = Template.bind({});\r\nRadioTabSelectorExample.args = {\r\n buttons: [\r\n { label: 'Digitaal', value: 'digitaal' },\r\n { label: 'Schriftelijk', value: 'schriftelijk' },\r\n { label: 'Presentatie', value: 'presentatie' },\r\n ],\r\n defaultValue: 'digitaal',\r\n radioGroupName: 'radio-group',\r\n label: 'Toetsvorm',\r\n labelPosition: 'top',\r\n required: true,\r\n notValidatedText: '',\r\n onSetValue: fn(),\r\n};\r\n"],"names":["codeString","RadioTabSelector_stories","RadioTabSelector","Template","args","jsx","RadioTabSelectorExample","fn"],"mappings":";;;AAOA,MAAMA,IACJ,gIAGFC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,cAAc;AAAA,MACZ,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,cAAc;AAAA,MACZ,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,IAEX,eAAe;AAAA,MACb,SAAS;AAAA,MACT,SAAS,CAAC,OAAO,MAAM;AAAA,IAAA;AAAA,IAEzB,UAAU;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,IAEX,kBAAkB;AAAA,MAChB,SAAS;AAAA,IAAA;AAAA,IAEX,YAAY;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAA2C,CAACC,MAAS,gBAAAC,EAACH,GAAA,EAAkB,GAAGE,GAAM,GAE1EE,IAA0BH,EAAS,KAAK,CAAA,CAAE;AACvDG,EAAwB,OAAO;AAAA,EAC7B,SAAS;AAAA,IACP,EAAE,OAAO,YAAY,OAAO,WAAA;AAAA,IAC5B,EAAE,OAAO,gBAAgB,OAAO,eAAA;AAAA,IAChC,EAAE,OAAO,eAAe,OAAO,cAAA;AAAA,EAAc;AAAA,EAE/C,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,OAAO;AAAA,EACP,eAAe;AAAA,EACf,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,YAAYC,EAAA;AACd;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Repeater.js","sources":["../../../src/components/Repeater/Repeater.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { PropsWithChildren } from 'react';\n\nimport styles from './Repeater.module.css';\n\nexport interface RepeaterProps {\n /** The direction of the items. */\n flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';\n /** The gap between the items. */\n gap?: '025' | '050' | '075' | '100' | '150' | '200';\n}\n\n/** Represents a component to show a list of items. */\nexport const Repeater = ({ children, flexDirection = 'column', gap = '050' }: PropsWithChildren<RepeaterProps>) => {\n return (\n <div className={clsx(styles['repeater'], styles[`repeater--${flexDirection}`], styles[`repeater--gap-${gap}`])}>\n {children}\n </div>\n );\n};\n"],"names":["Repeater","children","flexDirection","gap","clsx","styles"],"mappings":";;;;;;;;;;;;;;GAcaA,IAAW,CAAC,EAAE,UAAAC,GAAU,eAAAC,IAAgB,UAAU,KAAAC,IAAM,8BAEhE,
|
|
1
|
+
{"version":3,"file":"Repeater.js","sources":["../../../src/components/Repeater/Repeater.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { PropsWithChildren } from 'react';\n\nimport styles from './Repeater.module.css';\n\nexport interface RepeaterProps {\n /** The direction of the items. */\n flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';\n /** The gap between the items. */\n gap?: '025' | '050' | '075' | '100' | '150' | '200';\n}\n\n/** Represents a component to show a list of items. */\nexport const Repeater = ({ children, flexDirection = 'column', gap = '050' }: PropsWithChildren<RepeaterProps>) => {\n return (\n <div className={clsx(styles['repeater'], styles[`repeater--${flexDirection}`], styles[`repeater--gap-${gap}`])}>\n {children}\n </div>\n );\n};\n"],"names":["Repeater","children","flexDirection","gap","clsx","styles"],"mappings":";;;;;;;;;;;;;;GAcaA,IAAW,CAAC,EAAE,UAAAC,GAAU,eAAAC,IAAgB,UAAU,KAAAC,IAAM,8BAEhE,OAAA,EAAI,WAAWC,EAAKC,EAAO,UAAaA,EAAO,aAAaH,CAAa,EAAE,GAAGG,EAAO,iBAAiBF,CAAG,EAAE,CAAC,GAC1G,UAAAF,GACH;"}
|
|
@@ -3,4 +3,4 @@ import { Meta } from '@storybook/react';
|
|
|
3
3
|
import { RepeaterProps } from './Repeater';
|
|
4
4
|
declare const _default: Meta<PropsWithChildren<RepeaterProps>>;
|
|
5
5
|
export default _default;
|
|
6
|
-
export declare const RepeaterExample: import('
|
|
6
|
+
export declare const RepeaterExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, PropsWithChildren<RepeaterProps>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Repeater.stories.js","sources":["../../../src/components/Repeater/Repeater.stories.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { RepeaterProps } from './Repeater';\n\nimport { Repeater } from './Repeater';\n\nimport { Container } from 'storyComponents/Container';\n\nconst codeString = '<Repeater flexDirection={flexDirection} gap={gap}>{children}</Repeater>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/Repeater',\n component: Repeater,\n argTypes: {\n flexDirection: {\n control: {\n type: 'select',\n },\n },\n gap: {\n control: {\n type: 'select',\n sort: false,\n },\n },\n children: {\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n inspectComponent: Repeater,\n codeString: codeString,\n },\n} as Meta<PropsWithChildren<RepeaterProps>>;\n\nconst Template: StoryFn<PropsWithChildren<RepeaterProps>> = (args) => (\n <Container>\n <Repeater {...args} />\n </Container>\n);\n\nexport const RepeaterExample = Template.bind({});\nRepeaterExample.args = {\n flexDirection: 'column',\n gap: '050',\n children: (\n <>\n <div>Example item 1</div>\n <div>Example item 2</div>\n <div>Example item 3</div>\n </>\n ),\n};\n"],"names":["codeString","Repeater_stories","Repeater","Template","args","jsx","Container","RepeaterExample","jsxs","Fragment"],"mappings":";;;AAQA,MAAMA,IAAa,
|
|
1
|
+
{"version":3,"file":"Repeater.stories.js","sources":["../../../src/components/Repeater/Repeater.stories.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { RepeaterProps } from './Repeater';\n\nimport { Repeater } from './Repeater';\n\nimport { Container } from 'storyComponents/Container';\n\nconst codeString = '<Repeater flexDirection={flexDirection} gap={gap}>{children}</Repeater>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/Repeater',\n component: Repeater,\n argTypes: {\n flexDirection: {\n control: {\n type: 'select',\n },\n },\n gap: {\n control: {\n type: 'select',\n sort: false,\n },\n },\n children: {\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n inspectComponent: Repeater,\n codeString: codeString,\n },\n} as Meta<PropsWithChildren<RepeaterProps>>;\n\nconst Template: StoryFn<PropsWithChildren<RepeaterProps>> = (args) => (\n <Container>\n <Repeater {...args} />\n </Container>\n);\n\nexport const RepeaterExample = Template.bind({});\nRepeaterExample.args = {\n flexDirection: 'column',\n gap: '050',\n children: (\n <>\n <div>Example item 1</div>\n <div>Example item 2</div>\n <div>Example item 3</div>\n </>\n ),\n};\n"],"names":["codeString","Repeater_stories","Repeater","Template","args","jsx","Container","RepeaterExample","jsxs","Fragment"],"mappings":";;;AAQA,MAAMA,IAAa,2EAGnBC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,eAAe;AAAA,MACb,SAAS;AAAA,QACP,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAEF,KAAK;AAAA,MACH,SAAS;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAEF,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAsD,CAACC,MAC3D,gBAAAC,EAACC,KACC,UAAA,gBAAAD,EAACH,GAAA,EAAU,GAAGE,EAAA,CAAM,EAAA,CACtB,GAGWG,IAAkBJ,EAAS,KAAK,CAAA,CAAE;AAC/CI,EAAgB,OAAO;AAAA,EACrB,eAAe;AAAA,EACf,KAAK;AAAA,EACL,UACE,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAJ,EAAC,SAAI,UAAA,iBAAA,CAAc;AAAA,IACnB,gBAAAA,EAAC,SAAI,UAAA,iBAAA,CAAc;AAAA,IACnB,gBAAAA,EAAC,SAAI,UAAA,iBAAA,CAAc;AAAA,EAAA,EAAA,CACrB;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditorHeader.js","sources":["../../../../src/components/RteEditor/EditorHeader/EditorHeader.tsx"],"sourcesContent":["import { useId } from 'react';\n\nimport styles from './EditorHeader.module.css';\n\nimport { Label } from 'components';\n\ninterface EditorHeaderProps {\n label: string;\n info?: string;\n required?: boolean;\n}\n\nexport const EditorHeader = ({ label, info = '', required = false }: EditorHeaderProps) => {\n const infoId = `info_${useId()}`;\n\n return (\n <div className={styles['editor-header__container']}>\n {label !== '' && (\n <div>\n <Label htmlFor={infoId} required={required}>\n {label}\n </Label>\n </div>\n )}\n {info !== '' && <div className={styles['editor-header__info']}>{info}</div>}\n </div>\n );\n};\n"],"names":["EditorHeader","label","info","required","infoId","useId","jsxs","styles","jsx","Label"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;GAYaA,IAAe,CAAC,EAAE,OAAAC,GAAO,MAAAC,IAAO,IAAI,UAAAC,IAAW,SAA+B;
|
|
1
|
+
{"version":3,"file":"EditorHeader.js","sources":["../../../../src/components/RteEditor/EditorHeader/EditorHeader.tsx"],"sourcesContent":["import { useId } from 'react';\n\nimport styles from './EditorHeader.module.css';\n\nimport { Label } from 'components';\n\ninterface EditorHeaderProps {\n label: string;\n info?: string;\n required?: boolean;\n}\n\nexport const EditorHeader = ({ label, info = '', required = false }: EditorHeaderProps) => {\n const infoId = `info_${useId()}`;\n\n return (\n <div className={styles['editor-header__container']}>\n {label !== '' && (\n <div>\n <Label htmlFor={infoId} required={required}>\n {label}\n </Label>\n </div>\n )}\n {info !== '' && <div className={styles['editor-header__info']}>{info}</div>}\n </div>\n );\n};\n"],"names":["EditorHeader","label","info","required","infoId","useId","jsxs","styles","jsx","Label"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;GAYaA,IAAe,CAAC,EAAE,OAAAC,GAAO,MAAAC,IAAO,IAAI,UAAAC,IAAW,SAA+B;AACzF,QAAMC,IAAS,QAAQC,EAAA,CAAO;AAE9B,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAO,0BAA0B,GAC9C,UAAA;AAAA,IAAAN,MAAU,wBACR,OAAA,EACC,UAAA,gBAAAO,EAACC,KAAM,SAASL,GAAQ,UAAAD,GACrB,UAAAF,EAAA,CACH,EAAA,CACF;AAAA,IAEDC,MAAS,MAAM,gBAAAM,EAAC,OAAA,EAAI,WAAWD,EAAO,qBAAqB,GAAI,UAAAL,EAAA,CAAK;AAAA,EAAA,GACvE;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlockFormatPlugin.js","sources":["../../../../../src/components/RteEditor/Plugins/BlockFormatPlugin/BlockFormatPlugin.tsx"],"sourcesContent":["import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport clsx from 'clsx';\nimport { $getSelection, $isRangeSelection, FORMAT_TEXT_COMMAND } from 'lexical';\nimport { useEffect, useState } from 'react';\n\nimport type { JSX } from 'react';\n\nimport { Icon } from 'components/Icon';\nimport styles from 'components/RteEditor/RteEditor.module.css';\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\n\ntype BlockTypesType = 'bold' | 'italic';\nconst BLOCK_TYPE_ICONS = {\n bold: 'Bold',\n italic: 'Italic',\n};\n\nconst BlockTypes = ['bold', 'italic'];\n\nexport const BlockFormatPlugin = (): JSX.Element => {\n const t = useTranslation();\n const [editor] = useLexicalComposerContext();\n const [isBold, setIsBold] = useState(false);\n const [isItalic, setIsItalic] = useState(false);\n\n const onClick = (type: BlockTypesType): void => {\n editor.dispatchCommand(FORMAT_TEXT_COMMAND, type);\n };\n\n useEffect(() => {\n const removeStatusListener = editor.registerUpdateListener(({ editorState }) => {\n editorState.read(() => {\n const selection = $getSelection();\n if ($isRangeSelection(selection)) {\n setIsBold(selection.hasFormat('bold'));\n setIsItalic(selection.hasFormat('italic'));\n }\n });\n });\n\n return () => {\n removeStatusListener();\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [editor]);\n\n return (\n <div className={styles['editor__toolbar-button-group']}>\n {BlockTypes.map((type) => (\n <button\n onClick={() => onClick(type as BlockTypesType)}\n key={type}\n title={type === 'bold' ? t.format.boldTooltip : t.format.italicTooltip}\n className={clsx(\n styles['editor__toolbar-button'],\n styles[`editor__toolbar-button--${type}`],\n type === 'bold' && isBold && styles['editor__toolbar-button--active'],\n type === 'italic' && isItalic && styles['editor__toolbar-button--active']\n )}\n aria-label={`${type === 'bold' ? t.aria.labels.bold : t.aria.labels.italic}`}\n aria-keyshortcuts={`${type === 'bold' ? t.aria.keyshortcuts.bold : t.aria.keyshortcuts.italic}`}\n type=\"button\"\n >\n <Icon name={BLOCK_TYPE_ICONS[type as keyof typeof Icon]} size={24} />\n </button>\n ))}\n </div>\n );\n};\n"],"names":["BLOCK_TYPE_ICONS","BlockTypes","BlockFormatPlugin","useTranslation","editor","useLexicalComposerContext","isBold","setIsBold","useState","isItalic","setIsItalic","onClick","type","FORMAT_TEXT_COMMAND","useEffect","removeStatusListener","editorState","selection","$getSelection","$isRangeSelection","jsx","styles","clsx","Icon"],"mappings":";;;;;;;;AAYA,MAAMA,IAAmB;AAAA,EACvB,MAAM;AAAA,EACN,QAAQ;AACV,GAEMC,IAAa,CAAC,QAAQ,QAAQ,GAEvBC,IAAoB,MAAmB;AAClD,QAAM,IAAIC,
|
|
1
|
+
{"version":3,"file":"BlockFormatPlugin.js","sources":["../../../../../src/components/RteEditor/Plugins/BlockFormatPlugin/BlockFormatPlugin.tsx"],"sourcesContent":["import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport { clsx } from 'clsx';\nimport { $getSelection, $isRangeSelection, FORMAT_TEXT_COMMAND } from 'lexical';\nimport { useEffect, useState } from 'react';\n\nimport type { JSX } from 'react';\n\nimport { Icon } from 'components/Icon';\nimport styles from 'components/RteEditor/RteEditor.module.css';\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\n\ntype BlockTypesType = 'bold' | 'italic';\nconst BLOCK_TYPE_ICONS = {\n bold: 'Bold',\n italic: 'Italic',\n};\n\nconst BlockTypes = ['bold', 'italic'];\n\nexport const BlockFormatPlugin = (): JSX.Element => {\n const t = useTranslation();\n const [editor] = useLexicalComposerContext();\n const [isBold, setIsBold] = useState(false);\n const [isItalic, setIsItalic] = useState(false);\n\n const onClick = (type: BlockTypesType): void => {\n editor.dispatchCommand(FORMAT_TEXT_COMMAND, type);\n };\n\n useEffect(() => {\n const removeStatusListener = editor.registerUpdateListener(({ editorState }) => {\n editorState.read(() => {\n const selection = $getSelection();\n if ($isRangeSelection(selection)) {\n setIsBold(selection.hasFormat('bold'));\n setIsItalic(selection.hasFormat('italic'));\n }\n });\n });\n\n return () => {\n removeStatusListener();\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [editor]);\n\n return (\n <div className={styles['editor__toolbar-button-group']}>\n {BlockTypes.map((type) => (\n <button\n onClick={() => onClick(type as BlockTypesType)}\n key={type}\n title={type === 'bold' ? t.format.boldTooltip : t.format.italicTooltip}\n className={clsx(\n styles['editor__toolbar-button'],\n styles[`editor__toolbar-button--${type}`],\n type === 'bold' && isBold && styles['editor__toolbar-button--active'],\n type === 'italic' && isItalic && styles['editor__toolbar-button--active']\n )}\n aria-label={`${type === 'bold' ? t.aria.labels.bold : t.aria.labels.italic}`}\n aria-keyshortcuts={`${type === 'bold' ? t.aria.keyshortcuts.bold : t.aria.keyshortcuts.italic}`}\n type=\"button\"\n >\n <Icon name={BLOCK_TYPE_ICONS[type as keyof typeof Icon]} size={24} />\n </button>\n ))}\n </div>\n );\n};\n"],"names":["BLOCK_TYPE_ICONS","BlockTypes","BlockFormatPlugin","useTranslation","editor","useLexicalComposerContext","isBold","setIsBold","useState","isItalic","setIsItalic","onClick","type","FORMAT_TEXT_COMMAND","useEffect","removeStatusListener","editorState","selection","$getSelection","$isRangeSelection","jsx","styles","clsx","Icon"],"mappings":";;;;;;;;AAYA,MAAMA,IAAmB;AAAA,EACvB,MAAM;AAAA,EACN,QAAQ;AACV,GAEMC,IAAa,CAAC,QAAQ,QAAQ,GAEvBC,IAAoB,MAAmB;AAClD,QAAM,IAAIC,EAAA,GACJ,CAACC,CAAM,IAAIC,EAAA,GACX,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpC,CAACC,GAAUC,CAAW,IAAIF,EAAS,EAAK,GAExCG,IAAU,CAACC,MAA+B;AAC9C,IAAAR,EAAO,gBAAgBS,GAAqBD,CAAI;AAAA,EAAA;AAGlD,SAAAE,EAAU,MAAM;AACd,UAAMC,IAAuBX,EAAO,uBAAuB,CAAC,EAAE,aAAAY,QAAkB;AAC9E,MAAAA,EAAY,KAAK,MAAM;AACrB,cAAMC,IAAYC,EAAA;AAClB,QAAIC,EAAkBF,CAAS,MAC7BV,EAAUU,EAAU,UAAU,MAAM,CAAC,GACrCP,EAAYO,EAAU,UAAU,QAAQ,CAAC;AAAA,MAC3C,CACD;AAAA,IAAA,CACF;AAED,WAAO,MAAM;AACX,MAAAF,EAAA;AAAA,IAAqB;AAAA,EACvB,GAEC,CAACX,CAAM,CAAC,GAGT,gBAAAgB,EAAC,SAAI,WAAWC,EAAO,8BAA8B,GAClD,UAAApB,EAAW,IAAI,CAACW,MACf,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS,MAAMT,EAAQC,CAAsB;AAAA,MAE7C,OAAOA,MAAS,SAAS,EAAE,OAAO,cAAc,EAAE,OAAO;AAAA,MACzD,WAAWU;AAAA,QACTD,EAAO,wBAAwB;AAAA,QAC/BA,EAAO,2BAA2BT,CAAI,EAAE;AAAA,QACxCA,MAAS,UAAUN,KAAUe,EAAO,gCAAgC;AAAA,QACpET,MAAS,YAAYH,KAAYY,EAAO,gCAAgC;AAAA,MAAA;AAAA,MAE1E,cAAY,GAAGT,MAAS,SAAS,EAAE,KAAK,OAAO,OAAO,EAAE,KAAK,OAAO,MAAM;AAAA,MAC1E,qBAAmB,GAAGA,MAAS,SAAS,EAAE,KAAK,aAAa,OAAO,EAAE,KAAK,aAAa,MAAM;AAAA,MAC7F,MAAK;AAAA,MAEL,4BAACW,GAAA,EAAK,MAAMvB,EAAiBY,CAAyB,GAAG,MAAM,GAAA,CAAI;AAAA,IAAA;AAAA,IAZ9DA;AAAA,EAAA,CAcR,GACH;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HistoryPlugin.js","sources":["../../../../../src/components/RteEditor/Plugins/HistoryPlugin/HistoryPlugin.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport { CAN_UNDO_COMMAND, CAN_REDO_COMMAND, UNDO_COMMAND, REDO_COMMAND } from 'lexical';\nimport { useEffect, useState } from 'react';\n\nimport { Icon } from 'components';\nimport styles from 'components/RteEditor/RteEditor.module.css';\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\n\nexport const HistoryPlugin = () => {\n const t = useTranslation();\n const [editor] = useLexicalComposerContext();\n const [canUndo, setCanUndo] = useState(false);\n const [canRedo, setCanRedo] = useState(false);\n\n const handleUndo = () => {\n editor.dispatchCommand(UNDO_COMMAND, undefined);\n };\n\n const handleRedo = () => {\n editor.dispatchCommand(REDO_COMMAND, undefined);\n };\n\n useEffect(() => {\n return editor.registerCommand<boolean>(\n CAN_UNDO_COMMAND,\n (payload) => {\n setCanUndo(payload);\n return false;\n },\n 1\n );\n }, [editor]);\n\n useEffect(() => {\n return editor.registerCommand<boolean>(\n CAN_REDO_COMMAND,\n (payload) => {\n setCanRedo(payload);\n return false;\n },\n 1\n );\n }, [editor]);\n\n return (\n <div className={styles['editor__toolbar-button-group']}>\n <button\n onClick={handleUndo}\n className={clsx(styles['editor__toolbar-button'], styles[`editor__toolbar-button--undo`])}\n aria-label={t.aria.labels.undo}\n aria-keyshortcuts={t.aria.keyshortcuts.undo}\n disabled={!canUndo}\n title={t.format.undoTooltip}\n type=\"button\"\n >\n <Icon name=\"StepBack\" size={24} />\n </button>\n <button\n onClick={handleRedo}\n className={clsx(styles['editor__toolbar-button'], styles[`editor__toolbar-button--redo`])}\n aria-label={t.aria.labels.redo}\n aria-keyshortcuts={t.aria.keyshortcuts.redo}\n disabled={!canRedo}\n title={t.format.redoTooltip}\n type=\"button\"\n >\n <Icon name=\"StepForwards\" size={24} />\n </button>\n </div>\n );\n};\n"],"names":["HistoryPlugin","t","useTranslation","editor","useLexicalComposerContext","canUndo","setCanUndo","useState","canRedo","setCanRedo","handleUndo","UNDO_COMMAND","handleRedo","REDO_COMMAND","useEffect","CAN_UNDO_COMMAND","payload","CAN_REDO_COMMAND","jsxs","styles","jsx","clsx","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASO,MAAMA,IAAgB,MAAM;AACjC,QAAMC,IAAIC,
|
|
1
|
+
{"version":3,"file":"HistoryPlugin.js","sources":["../../../../../src/components/RteEditor/Plugins/HistoryPlugin/HistoryPlugin.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport { CAN_UNDO_COMMAND, CAN_REDO_COMMAND, UNDO_COMMAND, REDO_COMMAND } from 'lexical';\nimport { useEffect, useState } from 'react';\n\nimport { Icon } from 'components';\nimport styles from 'components/RteEditor/RteEditor.module.css';\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\n\nexport const HistoryPlugin = () => {\n const t = useTranslation();\n const [editor] = useLexicalComposerContext();\n const [canUndo, setCanUndo] = useState(false);\n const [canRedo, setCanRedo] = useState(false);\n\n const handleUndo = () => {\n editor.dispatchCommand(UNDO_COMMAND, undefined);\n };\n\n const handleRedo = () => {\n editor.dispatchCommand(REDO_COMMAND, undefined);\n };\n\n useEffect(() => {\n return editor.registerCommand<boolean>(\n CAN_UNDO_COMMAND,\n (payload) => {\n setCanUndo(payload);\n return false;\n },\n 1\n );\n }, [editor]);\n\n useEffect(() => {\n return editor.registerCommand<boolean>(\n CAN_REDO_COMMAND,\n (payload) => {\n setCanRedo(payload);\n return false;\n },\n 1\n );\n }, [editor]);\n\n return (\n <div className={styles['editor__toolbar-button-group']}>\n <button\n onClick={handleUndo}\n className={clsx(styles['editor__toolbar-button'], styles[`editor__toolbar-button--undo`])}\n aria-label={t.aria.labels.undo}\n aria-keyshortcuts={t.aria.keyshortcuts.undo}\n disabled={!canUndo}\n title={t.format.undoTooltip}\n type=\"button\"\n >\n <Icon name=\"StepBack\" size={24} />\n </button>\n <button\n onClick={handleRedo}\n className={clsx(styles['editor__toolbar-button'], styles[`editor__toolbar-button--redo`])}\n aria-label={t.aria.labels.redo}\n aria-keyshortcuts={t.aria.keyshortcuts.redo}\n disabled={!canRedo}\n title={t.format.redoTooltip}\n type=\"button\"\n >\n <Icon name=\"StepForwards\" size={24} />\n </button>\n </div>\n );\n};\n"],"names":["HistoryPlugin","t","useTranslation","editor","useLexicalComposerContext","canUndo","setCanUndo","useState","canRedo","setCanRedo","handleUndo","UNDO_COMMAND","handleRedo","REDO_COMMAND","useEffect","CAN_UNDO_COMMAND","payload","CAN_REDO_COMMAND","jsxs","styles","jsx","clsx","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASO,MAAMA,IAAgB,MAAM;AACjC,QAAMC,IAAIC,EAAA,GACJ,CAACC,CAAM,IAAIC,EAAA,GACX,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtC,CAACC,GAASC,CAAU,IAAIF,EAAS,EAAK,GAEtCG,IAAa,MAAM;AACvB,IAAAP,EAAO,gBAAgBQ,GAAc,MAAS;AAAA,EAAA,GAG1CC,IAAa,MAAM;AACvB,IAAAT,EAAO,gBAAgBU,GAAc,MAAS;AAAA,EAAA;AAGhD,SAAAC,EAAU,MACDX,EAAO;AAAA,IACZY;AAAAA,IACA,CAACC,OACCV,EAAWU,CAAO,GACX;AAAA,IAET;AAAA,EAAA,GAED,CAACb,CAAM,CAAC,GAEXW,EAAU,MACDX,EAAO;AAAA,IACZc;AAAAA,IACA,CAACD,OACCP,EAAWO,CAAO,GACX;AAAA,IAET;AAAA,EAAA,GAED,CAACb,CAAM,CAAC,GAGT,gBAAAe,EAAC,OAAA,EAAI,WAAWC,EAAO,8BAA8B,GACnD,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAASV;AAAA,QACT,WAAWW,EAAKF,EAAO,wBAAwB,GAAGA,EAAO,8BAA8B,CAAC;AAAA,QACxF,cAAYlB,EAAE,KAAK,OAAO;AAAA,QAC1B,qBAAmBA,EAAE,KAAK,aAAa;AAAA,QACvC,UAAU,CAACI;AAAA,QACX,OAAOJ,EAAE,OAAO;AAAA,QAChB,MAAK;AAAA,QAEL,UAAA,gBAAAmB,EAACE,GAAA,EAAK,MAAK,YAAW,MAAM,GAAA,CAAI;AAAA,MAAA;AAAA,IAAA;AAAA,IAElC,gBAAAF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAASR;AAAA,QACT,WAAWS,EAAKF,EAAO,wBAAwB,GAAGA,EAAO,8BAA8B,CAAC;AAAA,QACxF,cAAYlB,EAAE,KAAK,OAAO;AAAA,QAC1B,qBAAmBA,EAAE,KAAK,aAAa;AAAA,QACvC,UAAU,CAACO;AAAA,QACX,OAAOP,EAAE,OAAO;AAAA,QAChB,MAAK;AAAA,QAEL,UAAA,gBAAAmB,EAACE,GAAA,EAAK,MAAK,gBAAe,MAAM,GAAA,CAAI;AAAA,MAAA;AAAA,IAAA;AAAA,EACtC,GACF;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinkContextMenu.js","sources":["../../../../../../src/components/RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';\n\nimport styles from './LinkContextMenu.module.css';\n\nimport { ensureHttps } from 'components/RteEditor/Plugins/LinkPlugin/helpers';\nimport { Icon } from 'components/Icon';\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\nimport { Button } from 'components/Buttons';\n\ninterface LinkContextMenuProps {\n url: string;\n onSave: (url: string) => void;\n onDelete: () => void;\n onClose: () => void;\n}\n\nexport interface linkFormMethods {\n clearForm: () => void;\n}\n\nexport const LinkContextMenu = forwardRef(({ url, onSave, onDelete, onClose }: LinkContextMenuProps, ref) => {\n const t = useTranslation();\n const [link, setLink] = useState(url);\n const [editable, setEditable] = useState(false);\n const linkRef = useRef<HTMLInputElement>(null);\n\n const reset = () => {\n setLink(url);\n setEditable(false);\n linkRef.current?.blur();\n };\n\n const handleSave = () => {\n onSave(link);\n reset();\n };\n\n const handleDelete = () => {\n onDelete();\n setLink('');\n reset();\n };\n\n const handleClose = () => {\n reset();\n onClose();\n };\n\n const handlePreview = () => {\n window.open(ensureHttps(url), '_blank');\n };\n\n useImperativeHandle(ref, () => ({\n clearForm: reset,\n }));\n\n useLayoutEffect(() => {\n setLink(url);\n window.addEventListener('keydown', (event) => {\n if (event.ctrlKey && event.shiftKey && event.key === 'L') {\n setEditable(true);\n setTimeout(() => linkRef.current?.focus(), 0);\n }\n if (event.ctrlKey && event.shiftKey && event.code === 'Digit1') {\n handlePreview();\n setTimeout(() => linkRef.current?.focus(), 0);\n }\n if (event.ctrlKey && event.shiftKey && event.key === 'Q') {\n handleDelete();\n setTimeout(() => linkRef.current?.focus(), 0);\n }\n });\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [url]);\n\n return (\n <>\n <div className={styles['link-context-menu__wrapper']}>\n <input\n type=\"text\"\n value={link}\n onChange={(event) => setLink(event.target.value)}\n className={styles['link-context-menu__input']}\n disabled={!editable}\n ref={linkRef}\n />\n {!editable && (\n <button\n type=\"button\"\n className={styles['link-context-menu__button']}\n onClick={() => setEditable(true)}\n title={t.links.linkEdittip}\n aria-label={t.aria.labels.link}\n aria-keyshortcuts={t.aria.keyshortcuts.editlink}\n >\n <Icon name=\"Pencil\" size={20} />\n </button>\n )}\n <button\n type=\"button\"\n className={styles['link-context-menu__button']}\n onClick={handlePreview}\n title={t.links.linkTesttip}\n aria-label={t.aria.labels.link}\n aria-keyshortcuts={t.aria.keyshortcuts.testlink}\n >\n <Icon name=\"ArrowTopRightOnSquare\" size={20} />\n </button>\n <button\n type=\"button\"\n className={styles['link-context-menu__button']}\n onClick={handleDelete}\n title={t.links.linkDeletetip}\n aria-label={t.aria.labels.link}\n aria-keyshortcuts={t.aria.keyshortcuts.deletelink}\n >\n <Icon name=\"LinkSlash\" size={20} />\n </button>\n </div>\n {editable && (\n <div className={styles['link-context-menu__actions']}>\n <Button variant={'secondary'} onClick={handleClose} aria-label={t.common.cancel} type=\"button\">\n {t.common.cancel}\n </Button>\n <Button variant={'primary'} onClick={handleSave} aria-label={t.aria.labels.linkOkButton} type=\"button\">\n {t.links.addLink}\n </Button>\n </div>\n )}\n </>\n );\n});\n"],"names":["LinkContextMenu","forwardRef","url","onSave","onDelete","onClose","ref","t","useTranslation","link","setLink","useState","editable","setEditable","linkRef","useRef","reset","_a","handleSave","handleDelete","handleClose","handlePreview","ensureHttps","useImperativeHandle","useLayoutEffect","event","jsxs","Fragment","styles","jsx","Icon","Button"],"mappings":";;;;;;;;;;;;;GAoBaA,IAAkBC,EAAW,CAAC,EAAE,KAAAC,GAAK,QAAAC,GAAQ,UAAAC,GAAU,SAAAC,
|
|
1
|
+
{"version":3,"file":"LinkContextMenu.js","sources":["../../../../../../src/components/RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';\n\nimport styles from './LinkContextMenu.module.css';\n\nimport { ensureHttps } from 'components/RteEditor/Plugins/LinkPlugin/helpers';\nimport { Icon } from 'components/Icon';\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\nimport { Button } from 'components/Buttons';\n\ninterface LinkContextMenuProps {\n url: string;\n onSave: (url: string) => void;\n onDelete: () => void;\n onClose: () => void;\n}\n\nexport interface linkFormMethods {\n clearForm: () => void;\n}\n\nexport const LinkContextMenu = forwardRef(({ url, onSave, onDelete, onClose }: LinkContextMenuProps, ref) => {\n const t = useTranslation();\n const [link, setLink] = useState(url);\n const [editable, setEditable] = useState(false);\n const linkRef = useRef<HTMLInputElement>(null);\n\n const reset = () => {\n setLink(url);\n setEditable(false);\n linkRef.current?.blur();\n };\n\n const handleSave = () => {\n onSave(link);\n reset();\n };\n\n const handleDelete = () => {\n onDelete();\n setLink('');\n reset();\n };\n\n const handleClose = () => {\n reset();\n onClose();\n };\n\n const handlePreview = () => {\n window.open(ensureHttps(url), '_blank');\n };\n\n useImperativeHandle(ref, () => ({\n clearForm: reset,\n }));\n\n useLayoutEffect(() => {\n setLink(url);\n window.addEventListener('keydown', (event) => {\n if (event.ctrlKey && event.shiftKey && event.key === 'L') {\n setEditable(true);\n setTimeout(() => linkRef.current?.focus(), 0);\n }\n if (event.ctrlKey && event.shiftKey && event.code === 'Digit1') {\n handlePreview();\n setTimeout(() => linkRef.current?.focus(), 0);\n }\n if (event.ctrlKey && event.shiftKey && event.key === 'Q') {\n handleDelete();\n setTimeout(() => linkRef.current?.focus(), 0);\n }\n });\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [url]);\n\n return (\n <>\n <div className={styles['link-context-menu__wrapper']}>\n <input\n type=\"text\"\n value={link}\n onChange={(event) => setLink(event.target.value)}\n className={styles['link-context-menu__input']}\n disabled={!editable}\n ref={linkRef}\n />\n {!editable && (\n <button\n type=\"button\"\n className={styles['link-context-menu__button']}\n onClick={() => setEditable(true)}\n title={t.links.linkEdittip}\n aria-label={t.aria.labels.link}\n aria-keyshortcuts={t.aria.keyshortcuts.editlink}\n >\n <Icon name=\"Pencil\" size={20} />\n </button>\n )}\n <button\n type=\"button\"\n className={styles['link-context-menu__button']}\n onClick={handlePreview}\n title={t.links.linkTesttip}\n aria-label={t.aria.labels.link}\n aria-keyshortcuts={t.aria.keyshortcuts.testlink}\n >\n <Icon name=\"ArrowTopRightOnSquare\" size={20} />\n </button>\n <button\n type=\"button\"\n className={styles['link-context-menu__button']}\n onClick={handleDelete}\n title={t.links.linkDeletetip}\n aria-label={t.aria.labels.link}\n aria-keyshortcuts={t.aria.keyshortcuts.deletelink}\n >\n <Icon name=\"LinkSlash\" size={20} />\n </button>\n </div>\n {editable && (\n <div className={styles['link-context-menu__actions']}>\n <Button variant={'secondary'} onClick={handleClose} aria-label={t.common.cancel} type=\"button\">\n {t.common.cancel}\n </Button>\n <Button variant={'primary'} onClick={handleSave} aria-label={t.aria.labels.linkOkButton} type=\"button\">\n {t.links.addLink}\n </Button>\n </div>\n )}\n </>\n );\n});\n"],"names":["LinkContextMenu","forwardRef","url","onSave","onDelete","onClose","ref","t","useTranslation","link","setLink","useState","editable","setEditable","linkRef","useRef","reset","_a","handleSave","handleDelete","handleClose","handlePreview","ensureHttps","useImperativeHandle","useLayoutEffect","event","jsxs","Fragment","styles","jsx","Icon","Button"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinkPlugin.js","sources":["../../../../../src/components/RteEditor/Plugins/LinkPlugin/LinkPlugin.tsx"],"sourcesContent":["import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport clsx from 'clsx';\nimport { $isLinkNode, $toggleLink, TOGGLE_LINK_COMMAND } from '@lexical/link';\nimport { useEffect, useRef, useState } from 'react';\nimport {\n $createTextNode,\n $getSelection,\n $isRangeSelection,\n $setSelection,\n CLICK_COMMAND,\n COMMAND_PRIORITY_EDITOR,\n KEY_DOWN_COMMAND,\n SELECTION_CHANGE_COMMAND,\n} from 'lexical';\n\nimport type { LinkNode } from '@lexical/link';\nimport type { ElementNode, TextNode, BaseSelection } from 'lexical';\nimport type { addLinkFormMethods } from './AddLinkForm/AddLinkFrom';\nimport type { linkFormMethods } from './LinkContextMenu/LinkContextMenu';\n\nimport { AddLinkForm } from './AddLinkForm/AddLinkFrom';\nimport { ensureHttps } from './helpers';\nimport { LinkContextMenu } from './LinkContextMenu/LinkContextMenu';\n\nimport { useFlyout } from 'components/RteEditor/hooks/useFlyout';\nimport { Icon } from 'components';\nimport styles from 'components/RteEditor/RteEditor.module.css';\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\nimport { removeScrollableContainers, setScrollableContainers } from 'components/RteEditor/helpers';\n\nconst PREVENT_OPEN_DELAY = 200;\n\nexport interface LinkType {\n active: boolean;\n url: string;\n linktext: string;\n}\n\ntype Position = {\n top: number;\n left: number;\n};\n\ninterface LinkPluginProps {\n parentScrollPosition: number;\n}\n\nconst getLinkNode = (node: ElementNode | null): ElementNode | null => {\n let currentNode: TextNode | ElementNode | null = node;\n\n while (currentNode) {\n if ($isLinkNode(currentNode)) {\n return currentNode;\n }\n currentNode = currentNode.getParent();\n }\n\n return null;\n};\n\nexport const getLinkNodeTag = (anchorNode: ElementNode | TextNode): boolean | LinkType => {\n let currentNode: TextNode | ElementNode | null = anchorNode;\n\n while (currentNode) {\n if ($isLinkNode(currentNode)) {\n return {\n active: true,\n url: currentNode.getURL(),\n linktext: currentNode.getTextContent(),\n };\n }\n currentNode = currentNode.getParent();\n }\n\n return false;\n};\n\nexport const LinkPlugin = ({ parentScrollPosition }: LinkPluginProps) => {\n const t = useTranslation();\n const [editor] = useLexicalComposerContext();\n const { flyout, showFlyout, hideFlyout, isVisible } = useFlyout();\n const addLinkForm = useRef<addLinkFormMethods>(undefined);\n const preventOpen = useRef(false);\n const previousLinkText = useRef('');\n const selectedText = useRef('');\n const [isLink, setIsLink] = useState<LinkType>({ active: false, url: '', linktext: '' });\n const isVisibleRef = useRef(isVisible);\n const storedSelection = useRef<BaseSelection | null>(null);\n const linkButtonRef = useRef<HTMLButtonElement>(null);\n const editLinkForm = useRef<linkFormMethods>(undefined);\n\n const storeCursorPosition = () => {\n editor.update(() => {\n const selection = $getSelection();\n storedSelection.current = selection;\n });\n };\n\n const rePositionCursor = () => {\n editor.update(() => {\n if (storedSelection.current) {\n $setSelection(storedSelection.current);\n }\n });\n };\n\n const openContextMenu = (url: string, position: Position) => {\n showFlyout({\n position,\n children: (\n <LinkContextMenu\n url={url}\n onSave={(url) => insertLink(url, '')}\n onDelete={() => removeLink()}\n onClose={closeContextMenu}\n ref={editLinkForm}\n />\n ),\n });\n };\n\n const closeContextMenu = () => {\n editLinkForm.current?.clearForm();\n hideFlyout();\n rePositionCursor();\n };\n\n const openFlyout = () => {\n const rect = linkButtonRef.current?.getBoundingClientRect();\n if (!preventOpen.current && rect) {\n storeCursorPosition();\n showFlyout({ position: { top: rect.bottom, left: rect.left }, ...flyoutOptions });\n setTimeout(() => addLinkForm.current?.setDefaults('', selectedText.current), 0);\n }\n };\n\n const closeFlyout = () => {\n hideFlyout();\n rePositionCursor();\n };\n\n const insertLink = (url: string, linktext: string) => {\n editor.update(() => {\n const selection = $getSelection();\n\n if ($isRangeSelection(selection)) {\n const anchor = selection.anchor;\n const node = anchor.getNode() as ElementNode;\n const linkNode = getLinkNode(node);\n if (linktext && linktext !== '') {\n if (linkNode) {\n const newTextNode = $createTextNode(linktext);\n linkNode.replace(newTextNode);\n newTextNode.select();\n }\n if (linktext !== previousLinkText.current && previousLinkText.current === '') {\n const { anchor, focus } = selection;\n selection.insertText(linktext);\n anchor.offset -= linktext.length;\n focus.offset = anchor.offset + linktext.length;\n }\n }\n $toggleLink(ensureHttps(url), { target: '_blank' });\n }\n\n closeFlyout();\n });\n };\n\n const removeLink = (): void => {\n editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);\n closeContextMenu();\n };\n\n const flyoutOptions = {\n children: (\n <AddLinkForm\n isLink={isLink}\n onCloseHandler={closeFlyout}\n onSaveHandler={(url, linktext) => insertLink(url, linktext)}\n ref={addLinkForm}\n />\n ),\n };\n\n useEffect(() => {\n if (!isVisible) {\n addLinkForm.current?.clearForm();\n previousLinkText.current = selectedText.current = '';\n setTimeout(() => (preventOpen.current = false), PREVENT_OPEN_DELAY);\n } else {\n preventOpen.current = true;\n addLinkForm.current?.focusFirstField();\n }\n }, [addLinkForm, isVisible]);\n\n useEffect(() => {\n const handleSelectionClickOrChange = (selection: BaseSelection | null) => {\n if ($isRangeSelection(selection) && selection.isCollapsed()) {\n const node = getLinkNodeTag(selection.anchor.getNode()) as LinkType;\n\n if (node) {\n const domNode = editor.getElementByKey(selection.anchor.getNode().getKey());\n const position = domNode\n ? { top: domNode.getBoundingClientRect().bottom, left: domNode.getBoundingClientRect().left }\n : { top: 0, left: 0 };\n openContextMenu(node.url, position);\n return true;\n }\n }\n return false;\n };\n\n const unregisterSelect = editor.registerCommand(\n SELECTION_CHANGE_COMMAND,\n () => {\n const selection = $getSelection();\n selectedText.current = selection?.getTextContent() ?? '';\n handleSelectionClickOrChange(selection);\n return false;\n },\n 0\n );\n\n const unregisterClick = editor.registerCommand(\n CLICK_COMMAND,\n (event) => {\n const selection = $getSelection();\n storeCursorPosition();\n event.preventDefault();\n event.stopPropagation();\n event.stopImmediatePropagation();\n handleSelectionClickOrChange(selection);\n return false;\n },\n 0\n );\n\n return () => {\n unregisterClick();\n unregisterSelect();\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [editor]);\n\n useEffect(() => {\n const removeKeyboardShortcut = editor.registerCommand(\n KEY_DOWN_COMMAND,\n (event: KeyboardEvent) => {\n if (event.ctrlKey && event.shiftKey && event.key === 'U') {\n const selection = $getSelection();\n storeCursorPosition();\n\n if (!$isRangeSelection(selection)) {\n return false;\n }\n\n const node = getLinkNodeTag(selection.anchor.getNode()) as LinkType;\n\n const openFlyoutWithDefaults = (url = '', linkText = '') => {\n openFlyout();\n setTimeout(() => addLinkForm.current?.setDefaults(url, linkText), 0);\n };\n\n if (node) {\n event.preventDefault();\n event.stopPropagation();\n event.stopImmediatePropagation();\n\n previousLinkText.current = node.linktext;\n openFlyoutWithDefaults(node.url, node.linktext);\n\n return true;\n }\n\n const selectedTextContent = selection.getTextContent();\n if (selectedTextContent !== '') {\n selectedText.current = selectedTextContent;\n openFlyoutWithDefaults('', selectedText.current);\n\n return true;\n }\n\n openFlyout();\n return true;\n }\n\n return false;\n },\n COMMAND_PRIORITY_EDITOR\n );\n\n const removeStatusListener = editor.registerUpdateListener(({ editorState }) => {\n setIsLink(\n editorState.read(() => {\n const selection = $getSelection();\n storeCursorPosition();\n\n if ($isRangeSelection(selection)) {\n const anchorNode = selection.anchor.getNode() as ElementNode;\n const linkNode = getLinkNode(anchorNode) as LinkNode;\n\n if (linkNode) {\n return {\n active: true,\n url: linkNode.getURL(),\n linktext: linkNode.getTextContent(),\n };\n }\n }\n\n return {\n active: false,\n url: '',\n linktext: '',\n };\n })\n );\n });\n\n return () => {\n removeKeyboardShortcut();\n removeStatusListener();\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [editor]);\n\n useEffect(() => {\n isVisibleRef.current = isVisible;\n if (!isVisible) editLinkForm.current?.clearForm();\n }, [isVisible]);\n\n useEffect(() => {\n if (isVisible) {\n closeFlyout();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [parentScrollPosition]);\n\n useEffect(() => {\n if (!isLink.active) {\n hideFlyout();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isLink]);\n\n useEffect(() => {\n const removeKeydown = (event: KeyboardEvent): boolean => {\n setScrollableContainers(handleResizeScroll);\n\n if (event.key === 'Escape' && isVisibleRef.current) {\n event.preventDefault();\n event.stopPropagation();\n closeFlyout();\n }\n return true;\n };\n\n window.addEventListener('keydown', removeKeydown, { capture: true });\n\n const handleResizeScroll = () => {\n hideFlyout();\n };\n\n setScrollableContainers(handleResizeScroll);\n\n window.addEventListener('scroll', handleResizeScroll);\n window.addEventListener('resize', handleResizeScroll);\n\n return () => {\n window.removeEventListener('keydown', removeKeydown);\n window.removeEventListener('scroll', handleResizeScroll);\n window.removeEventListener('resize', handleResizeScroll);\n removeScrollableContainers(handleResizeScroll);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n <div className={styles['editor__toolbar-button-group']}>\n <div className={styles['editor__toolbar-button-flyoutwrapper']}>\n <button\n onClick={openFlyout}\n title={t.links.linkTooltip}\n className={clsx(\n styles['editor__toolbar-button'],\n styles[`editor__toolbar-button--link`],\n isLink.active && styles['editor__toolbar-button--active']\n )}\n aria-label={t.aria.labels.link}\n aria-keyshortcuts={t.aria.keyshortcuts.link}\n type=\"button\"\n ref={linkButtonRef}\n >\n <Icon name=\"Link\" size={20} />\n </button>\n {flyout}\n </div>\n </div>\n );\n};\n"],"names":["PREVENT_OPEN_DELAY","getLinkNode","node","currentNode","$isLinkNode","getLinkNodeTag","anchorNode","LinkPlugin","parentScrollPosition","t","useTranslation","editor","useLexicalComposerContext","flyout","showFlyout","hideFlyout","isVisible","useFlyout","addLinkForm","useRef","preventOpen","previousLinkText","selectedText","isLink","setIsLink","useState","isVisibleRef","storedSelection","linkButtonRef","editLinkForm","storeCursorPosition","selection","$getSelection","rePositionCursor","$setSelection","openContextMenu","url","position","jsx","LinkContextMenu","insertLink","removeLink","closeContextMenu","_a","openFlyout","rect","flyoutOptions","closeFlyout","linktext","$isRangeSelection","linkNode","newTextNode","$createTextNode","anchor","focus","$toggleLink","ensureHttps","TOGGLE_LINK_COMMAND","AddLinkForm","useEffect","_b","handleSelectionClickOrChange","domNode","unregisterSelect","SELECTION_CHANGE_COMMAND","unregisterClick","CLICK_COMMAND","event","removeKeyboardShortcut","KEY_DOWN_COMMAND","openFlyoutWithDefaults","linkText","selectedTextContent","COMMAND_PRIORITY_EDITOR","removeStatusListener","editorState","removeKeydown","setScrollableContainers","handleResizeScroll","removeScrollableContainers","styles","jsxs","clsx","Icon"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"LinkPlugin.js","sources":["../../../../../src/components/RteEditor/Plugins/LinkPlugin/LinkPlugin.tsx"],"sourcesContent":["import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport { clsx } from 'clsx';\nimport { $isLinkNode, $toggleLink, TOGGLE_LINK_COMMAND } from '@lexical/link';\nimport { useEffect, useRef, useState } from 'react';\nimport {\n $createTextNode,\n $getSelection,\n $isRangeSelection,\n $setSelection,\n CLICK_COMMAND,\n COMMAND_PRIORITY_EDITOR,\n KEY_DOWN_COMMAND,\n SELECTION_CHANGE_COMMAND,\n} from 'lexical';\n\nimport type { LinkNode } from '@lexical/link';\nimport type { ElementNode, TextNode, BaseSelection } from 'lexical';\nimport type { addLinkFormMethods } from './AddLinkForm/AddLinkFrom';\nimport type { linkFormMethods } from './LinkContextMenu/LinkContextMenu';\n\nimport { AddLinkForm } from './AddLinkForm/AddLinkFrom';\nimport { ensureHttps } from './helpers';\nimport { LinkContextMenu } from './LinkContextMenu/LinkContextMenu';\n\nimport { useFlyout } from 'components/RteEditor/hooks/useFlyout';\nimport { Icon } from 'components';\nimport styles from 'components/RteEditor/RteEditor.module.css';\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\nimport { removeScrollableContainers, setScrollableContainers } from 'components/RteEditor/helpers';\n\nconst PREVENT_OPEN_DELAY = 200;\n\nexport interface LinkType {\n active: boolean;\n url: string;\n linktext: string;\n}\n\ntype Position = {\n top: number;\n left: number;\n};\n\ninterface LinkPluginProps {\n parentScrollPosition: number;\n}\n\nconst getLinkNode = (node: ElementNode | null): ElementNode | null => {\n let currentNode: TextNode | ElementNode | null = node;\n\n while (currentNode) {\n if ($isLinkNode(currentNode)) {\n return currentNode;\n }\n currentNode = currentNode.getParent();\n }\n\n return null;\n};\n\nexport const getLinkNodeTag = (anchorNode: ElementNode | TextNode): boolean | LinkType => {\n let currentNode: TextNode | ElementNode | null = anchorNode;\n\n while (currentNode) {\n if ($isLinkNode(currentNode)) {\n return {\n active: true,\n url: currentNode.getURL(),\n linktext: currentNode.getTextContent(),\n };\n }\n currentNode = currentNode.getParent();\n }\n\n return false;\n};\n\nexport const LinkPlugin = ({ parentScrollPosition }: LinkPluginProps) => {\n const t = useTranslation();\n const [editor] = useLexicalComposerContext();\n const { flyout, showFlyout, hideFlyout, isVisible } = useFlyout();\n const addLinkForm = useRef<addLinkFormMethods>(undefined);\n const preventOpen = useRef(false);\n const previousLinkText = useRef('');\n const selectedText = useRef('');\n const [isLink, setIsLink] = useState<LinkType>({ active: false, url: '', linktext: '' });\n const isVisibleRef = useRef(isVisible);\n const storedSelection = useRef<BaseSelection | null>(null);\n const linkButtonRef = useRef<HTMLButtonElement>(null);\n const editLinkForm = useRef<linkFormMethods>(undefined);\n\n const storeCursorPosition = () => {\n editor.update(() => {\n const selection = $getSelection();\n storedSelection.current = selection;\n });\n };\n\n const rePositionCursor = () => {\n editor.update(() => {\n if (storedSelection.current) {\n $setSelection(storedSelection.current);\n }\n });\n };\n\n const openContextMenu = (url: string, position: Position) => {\n showFlyout({\n position,\n children: (\n <LinkContextMenu\n url={url}\n onSave={(url) => insertLink(url, '')}\n onDelete={() => removeLink()}\n onClose={closeContextMenu}\n ref={editLinkForm}\n />\n ),\n });\n };\n\n const closeContextMenu = () => {\n editLinkForm.current?.clearForm();\n hideFlyout();\n rePositionCursor();\n };\n\n const openFlyout = () => {\n const rect = linkButtonRef.current?.getBoundingClientRect();\n if (!preventOpen.current && rect) {\n storeCursorPosition();\n showFlyout({ position: { top: rect.bottom, left: rect.left }, ...flyoutOptions });\n setTimeout(() => addLinkForm.current?.setDefaults('', selectedText.current), 0);\n }\n };\n\n const closeFlyout = () => {\n hideFlyout();\n rePositionCursor();\n };\n\n const insertLink = (url: string, linktext: string) => {\n editor.update(() => {\n const selection = $getSelection();\n\n if ($isRangeSelection(selection)) {\n const anchor = selection.anchor;\n const node = anchor.getNode() as ElementNode;\n const linkNode = getLinkNode(node);\n if (linktext && linktext !== '') {\n if (linkNode) {\n const newTextNode = $createTextNode(linktext);\n linkNode.replace(newTextNode);\n newTextNode.select();\n }\n if (linktext !== previousLinkText.current && previousLinkText.current === '') {\n const { anchor, focus } = selection;\n selection.insertText(linktext);\n anchor.offset -= linktext.length;\n focus.offset = anchor.offset + linktext.length;\n }\n }\n $toggleLink(ensureHttps(url), { target: '_blank' });\n }\n\n closeFlyout();\n });\n };\n\n const removeLink = (): void => {\n editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);\n closeContextMenu();\n };\n\n const flyoutOptions = {\n children: (\n <AddLinkForm\n isLink={isLink}\n onCloseHandler={closeFlyout}\n onSaveHandler={(url, linktext) => insertLink(url, linktext)}\n ref={addLinkForm}\n />\n ),\n };\n\n useEffect(() => {\n if (!isVisible) {\n addLinkForm.current?.clearForm();\n previousLinkText.current = selectedText.current = '';\n setTimeout(() => (preventOpen.current = false), PREVENT_OPEN_DELAY);\n } else {\n preventOpen.current = true;\n addLinkForm.current?.focusFirstField();\n }\n }, [addLinkForm, isVisible]);\n\n useEffect(() => {\n const handleSelectionClickOrChange = (selection: BaseSelection | null) => {\n if ($isRangeSelection(selection) && selection.isCollapsed()) {\n const node = getLinkNodeTag(selection.anchor.getNode()) as LinkType;\n\n if (node) {\n const domNode = editor.getElementByKey(selection.anchor.getNode().getKey());\n const position = domNode\n ? { top: domNode.getBoundingClientRect().bottom, left: domNode.getBoundingClientRect().left }\n : { top: 0, left: 0 };\n openContextMenu(node.url, position);\n return true;\n }\n }\n return false;\n };\n\n const unregisterSelect = editor.registerCommand(\n SELECTION_CHANGE_COMMAND,\n () => {\n const selection = $getSelection();\n selectedText.current = selection?.getTextContent() ?? '';\n handleSelectionClickOrChange(selection);\n return false;\n },\n 0\n );\n\n const unregisterClick = editor.registerCommand(\n CLICK_COMMAND,\n (event) => {\n const selection = $getSelection();\n storeCursorPosition();\n event.preventDefault();\n event.stopPropagation();\n event.stopImmediatePropagation();\n handleSelectionClickOrChange(selection);\n return false;\n },\n 0\n );\n\n return () => {\n unregisterClick();\n unregisterSelect();\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [editor]);\n\n useEffect(() => {\n const removeKeyboardShortcut = editor.registerCommand(\n KEY_DOWN_COMMAND,\n (event: KeyboardEvent) => {\n if (event.ctrlKey && event.shiftKey && event.key === 'U') {\n const selection = $getSelection();\n storeCursorPosition();\n\n if (!$isRangeSelection(selection)) {\n return false;\n }\n\n const node = getLinkNodeTag(selection.anchor.getNode()) as LinkType;\n\n const openFlyoutWithDefaults = (url = '', linkText = '') => {\n openFlyout();\n setTimeout(() => addLinkForm.current?.setDefaults(url, linkText), 0);\n };\n\n if (node) {\n event.preventDefault();\n event.stopPropagation();\n event.stopImmediatePropagation();\n\n previousLinkText.current = node.linktext;\n openFlyoutWithDefaults(node.url, node.linktext);\n\n return true;\n }\n\n const selectedTextContent = selection.getTextContent();\n if (selectedTextContent !== '') {\n selectedText.current = selectedTextContent;\n openFlyoutWithDefaults('', selectedText.current);\n\n return true;\n }\n\n openFlyout();\n return true;\n }\n\n return false;\n },\n COMMAND_PRIORITY_EDITOR\n );\n\n const removeStatusListener = editor.registerUpdateListener(({ editorState }) => {\n setIsLink(\n editorState.read(() => {\n const selection = $getSelection();\n storeCursorPosition();\n\n if ($isRangeSelection(selection)) {\n const anchorNode = selection.anchor.getNode() as ElementNode;\n const linkNode = getLinkNode(anchorNode) as LinkNode;\n\n if (linkNode) {\n return {\n active: true,\n url: linkNode.getURL(),\n linktext: linkNode.getTextContent(),\n };\n }\n }\n\n return {\n active: false,\n url: '',\n linktext: '',\n };\n })\n );\n });\n\n return () => {\n removeKeyboardShortcut();\n removeStatusListener();\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [editor]);\n\n useEffect(() => {\n isVisibleRef.current = isVisible;\n if (!isVisible) editLinkForm.current?.clearForm();\n }, [isVisible]);\n\n useEffect(() => {\n if (isVisible) {\n closeFlyout();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [parentScrollPosition]);\n\n useEffect(() => {\n if (!isLink.active) {\n hideFlyout();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isLink]);\n\n useEffect(() => {\n const removeKeydown = (event: KeyboardEvent): boolean => {\n setScrollableContainers(handleResizeScroll);\n\n if (event.key === 'Escape' && isVisibleRef.current) {\n event.preventDefault();\n event.stopPropagation();\n closeFlyout();\n }\n return true;\n };\n\n window.addEventListener('keydown', removeKeydown, { capture: true });\n\n const handleResizeScroll = () => {\n hideFlyout();\n };\n\n setScrollableContainers(handleResizeScroll);\n\n window.addEventListener('scroll', handleResizeScroll);\n window.addEventListener('resize', handleResizeScroll);\n\n return () => {\n window.removeEventListener('keydown', removeKeydown);\n window.removeEventListener('scroll', handleResizeScroll);\n window.removeEventListener('resize', handleResizeScroll);\n removeScrollableContainers(handleResizeScroll);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n <div className={styles['editor__toolbar-button-group']}>\n <div className={styles['editor__toolbar-button-flyoutwrapper']}>\n <button\n onClick={openFlyout}\n title={t.links.linkTooltip}\n className={clsx(\n styles['editor__toolbar-button'],\n styles[`editor__toolbar-button--link`],\n isLink.active && styles['editor__toolbar-button--active']\n )}\n aria-label={t.aria.labels.link}\n aria-keyshortcuts={t.aria.keyshortcuts.link}\n type=\"button\"\n ref={linkButtonRef}\n >\n <Icon name=\"Link\" size={20} />\n </button>\n {flyout}\n </div>\n </div>\n );\n};\n"],"names":["PREVENT_OPEN_DELAY","getLinkNode","node","currentNode","$isLinkNode","getLinkNodeTag","anchorNode","LinkPlugin","parentScrollPosition","t","useTranslation","editor","useLexicalComposerContext","flyout","showFlyout","hideFlyout","isVisible","useFlyout","addLinkForm","useRef","preventOpen","previousLinkText","selectedText","isLink","setIsLink","useState","isVisibleRef","storedSelection","linkButtonRef","editLinkForm","storeCursorPosition","selection","$getSelection","rePositionCursor","$setSelection","openContextMenu","url","position","jsx","LinkContextMenu","insertLink","removeLink","closeContextMenu","_a","openFlyout","rect","flyoutOptions","closeFlyout","linktext","$isRangeSelection","linkNode","newTextNode","$createTextNode","anchor","focus","$toggleLink","ensureHttps","TOGGLE_LINK_COMMAND","AddLinkForm","useEffect","_b","handleSelectionClickOrChange","domNode","unregisterSelect","SELECTION_CHANGE_COMMAND","unregisterClick","CLICK_COMMAND","event","removeKeyboardShortcut","KEY_DOWN_COMMAND","openFlyoutWithDefaults","linkText","selectedTextContent","COMMAND_PRIORITY_EDITOR","removeStatusListener","editorState","removeKeydown","setScrollableContainers","handleResizeScroll","removeScrollableContainers","styles","jsxs","clsx","Icon"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListPlugin.js","sources":["../../../../../src/components/RteEditor/Plugins/ListPlugin/ListPlugin.tsx"],"sourcesContent":["import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport {\n $createListNode,\n $isListItemNode,\n $isListNode,\n INSERT_ORDERED_LIST_COMMAND,\n INSERT_UNORDERED_LIST_COMMAND,\n REMOVE_LIST_COMMAND,\n} from '@lexical/list';\nimport { $setBlocksType } from '@lexical/selection';\nimport { useEffect, useState } from 'react';\nimport clsx from 'clsx';\nimport {\n $createParagraphNode,\n $getSelection,\n $isRangeSelection,\n COMMAND_PRIORITY_EDITOR,\n COMMAND_PRIORITY_LOW,\n KEY_DOWN_COMMAND,\n KEY_TAB_COMMAND,\n} from 'lexical';\n\nimport type { ElementNode, RangeSelection } from 'lexical';\n\nimport { Icon } from 'components/Icon';\nimport styles from 'components/RteEditor/RteEditor.module.css';\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\n\ntype ListTypesType = 'bullet' | 'number' | 'paragraph';\nconst LIST_TYPE_ICONS = {\n bullet: 'BulletList',\n number: 'NumberedList',\n};\n\nconst ListTypes = ['bullet', 'number'];\n\nexport const ListPlugin = () => {\n const t = useTranslation();\n const [editor] = useLexicalComposerContext();\n const [blockType, setBlockType] = useState<ListTypesType>('paragraph');\n const [isUList, setIsUList] = useState<boolean>(false);\n const [isOList, setIsOList] = useState<boolean>(false);\n\n const formatParagraph = () => {\n editor.update(() => {\n const selection = $getSelection();\n if ($isRangeSelection(selection)) {\n $setBlocksType(selection, () => $createParagraphNode());\n }\n });\n };\n\n const formatList = (listType: ListTypesType): void => {\n if (listType === 'number' && blockType !== 'number') {\n editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);\n setBlockType('number');\n } else if (listType === 'bullet' && blockType !== 'bullet') {\n editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);\n setBlockType('bullet');\n } else {\n formatParagraph();\n setBlockType('paragraph');\n }\n };\n\n useEffect(() => {\n const removeKeyboardShortcut = editor.registerCommand(\n KEY_DOWN_COMMAND,\n (event: KeyboardEvent) => {\n if (event.ctrlKey && event.shiftKey && event.code === 'Digit7') {\n event.preventDefault();\n if (isOList) {\n editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);\n } else {\n editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);\n }\n return true;\n }\n if (event.ctrlKey && event.shiftKey && event.code === 'Digit8') {\n event.preventDefault();\n if (isUList) {\n editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);\n } else {\n editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);\n }\n return true;\n }\n return false;\n },\n COMMAND_PRIORITY_EDITOR\n );\n\n return () => {\n removeKeyboardShortcut();\n };\n }, [editor, isOList, isUList]);\n\n useEffect(() => {\n editor.registerCommand(\n KEY_TAB_COMMAND,\n (event) => {\n event.preventDefault();\n editor.update(() => {\n const selection = $getSelection() as RangeSelection;\n if (!$isRangeSelection(selection)) {\n return;\n }\n\n const currentNode = selection.anchor.getNode();\n const parent = currentNode.getParent();\n if (!$isListItemNode(parent)) {\n return;\n }\n\n const listParent = parent.getParent();\n if ($isListNode(listParent)) {\n const newList = $createListNode($isListNode(listParent) ? listParent.getListType() : 'bullet');\n parent.append(newList);\n newList.append(currentNode);\n }\n });\n return true;\n },\n COMMAND_PRIORITY_LOW\n );\n\n const removeStatusListener = editor.registerUpdateListener(({ editorState }) => {\n editorState.read(() => {\n const selection = $getSelection();\n if ($isRangeSelection(selection)) {\n let anchorNode = selection.anchor.getNode() as ElementNode;\n while (anchorNode !== null) {\n if ($isListNode(anchorNode)) {\n const tag = anchorNode.getTag();\n setIsUList(tag === 'ul');\n setIsOList(tag === 'ol');\n if (tag === 'ul') {\n setBlockType('bullet');\n }\n if (tag === 'ol') {\n setBlockType('number');\n }\n return;\n }\n const parentNode = anchorNode.getParent();\n if (parentNode === null) break;\n anchorNode = parentNode;\n }\n setIsUList(false);\n setIsOList(false);\n setBlockType('paragraph');\n }\n return false;\n });\n });\n\n return () => {\n removeStatusListener();\n };\n }, [editor]);\n\n return (\n <div className={styles['editor__toolbar-button-group']}>\n {ListTypes.map((listType) => (\n <button\n onClick={() => formatList(listType as ListTypesType)}\n key={listType}\n title={t.format[`${listType}Tooltip` as keyof typeof t.format]}\n className={clsx(\n styles['editor__toolbar-button'],\n styles[`editor__toolbar-button--${listType}`],\n listType === 'bullet' && isUList && styles['editor__toolbar-button--active'],\n listType === 'number' && isOList && styles['editor__toolbar-button--active']\n )}\n aria-label={t.aria.labels[listType as keyof typeof t.aria.labels]}\n aria-keyshortcuts={t.aria.keyshortcuts[listType as keyof typeof t.aria.keyshortcuts]}\n type=\"button\"\n >\n <Icon name={LIST_TYPE_ICONS[listType as keyof typeof Icon]} size={24} />\n </button>\n ))}\n </div>\n );\n};\n"],"names":["LIST_TYPE_ICONS","ListTypes","ListPlugin","t","useTranslation","editor","useLexicalComposerContext","blockType","setBlockType","useState","isUList","setIsUList","isOList","setIsOList","formatParagraph","selection","$getSelection","$isRangeSelection","$setBlocksType","$createParagraphNode","formatList","listType","INSERT_ORDERED_LIST_COMMAND","INSERT_UNORDERED_LIST_COMMAND","useEffect","removeKeyboardShortcut","KEY_DOWN_COMMAND","event","REMOVE_LIST_COMMAND","COMMAND_PRIORITY_EDITOR","KEY_TAB_COMMAND","currentNode","parent","$isListItemNode","listParent","$isListNode","newList","$createListNode","COMMAND_PRIORITY_LOW","removeStatusListener","editorState","anchorNode","tag","parentNode","jsx","styles","clsx","Icon"],"mappings":";;;;;;;;;;AA6BA,MAAMA,IAAkB;AAAA,EACtB,QAAQ;AAAA,EACR,QAAQ;AACV,GAEMC,IAAY,CAAC,UAAU,QAAQ,GAExBC,IAAa,MAAM;AAC9B,QAAMC,IAAIC,
|
|
1
|
+
{"version":3,"file":"ListPlugin.js","sources":["../../../../../src/components/RteEditor/Plugins/ListPlugin/ListPlugin.tsx"],"sourcesContent":["import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport {\n $createListNode,\n $isListItemNode,\n $isListNode,\n INSERT_ORDERED_LIST_COMMAND,\n INSERT_UNORDERED_LIST_COMMAND,\n REMOVE_LIST_COMMAND,\n} from '@lexical/list';\nimport { $setBlocksType } from '@lexical/selection';\nimport { useEffect, useState } from 'react';\nimport { clsx } from 'clsx';\nimport {\n $createParagraphNode,\n $getSelection,\n $isRangeSelection,\n COMMAND_PRIORITY_EDITOR,\n COMMAND_PRIORITY_LOW,\n KEY_DOWN_COMMAND,\n KEY_TAB_COMMAND,\n} from 'lexical';\n\nimport type { ElementNode, RangeSelection } from 'lexical';\n\nimport { Icon } from 'components/Icon';\nimport styles from 'components/RteEditor/RteEditor.module.css';\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\n\ntype ListTypesType = 'bullet' | 'number' | 'paragraph';\nconst LIST_TYPE_ICONS = {\n bullet: 'BulletList',\n number: 'NumberedList',\n};\n\nconst ListTypes = ['bullet', 'number'];\n\nexport const ListPlugin = () => {\n const t = useTranslation();\n const [editor] = useLexicalComposerContext();\n const [blockType, setBlockType] = useState<ListTypesType>('paragraph');\n const [isUList, setIsUList] = useState<boolean>(false);\n const [isOList, setIsOList] = useState<boolean>(false);\n\n const formatParagraph = () => {\n editor.update(() => {\n const selection = $getSelection();\n if ($isRangeSelection(selection)) {\n $setBlocksType(selection, () => $createParagraphNode());\n }\n });\n };\n\n const formatList = (listType: ListTypesType): void => {\n if (listType === 'number' && blockType !== 'number') {\n editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);\n setBlockType('number');\n } else if (listType === 'bullet' && blockType !== 'bullet') {\n editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);\n setBlockType('bullet');\n } else {\n formatParagraph();\n setBlockType('paragraph');\n }\n };\n\n useEffect(() => {\n const removeKeyboardShortcut = editor.registerCommand(\n KEY_DOWN_COMMAND,\n (event: KeyboardEvent) => {\n if (event.ctrlKey && event.shiftKey && event.code === 'Digit7') {\n event.preventDefault();\n if (isOList) {\n editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);\n } else {\n editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);\n }\n return true;\n }\n if (event.ctrlKey && event.shiftKey && event.code === 'Digit8') {\n event.preventDefault();\n if (isUList) {\n editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);\n } else {\n editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);\n }\n return true;\n }\n return false;\n },\n COMMAND_PRIORITY_EDITOR\n );\n\n return () => {\n removeKeyboardShortcut();\n };\n }, [editor, isOList, isUList]);\n\n useEffect(() => {\n editor.registerCommand(\n KEY_TAB_COMMAND,\n (event) => {\n event.preventDefault();\n editor.update(() => {\n const selection = $getSelection() as RangeSelection;\n if (!$isRangeSelection(selection)) {\n return;\n }\n\n const currentNode = selection.anchor.getNode();\n const parent = currentNode.getParent();\n if (!$isListItemNode(parent)) {\n return;\n }\n\n const listParent = parent.getParent();\n if ($isListNode(listParent)) {\n const newList = $createListNode($isListNode(listParent) ? listParent.getListType() : 'bullet');\n parent.append(newList);\n newList.append(currentNode);\n }\n });\n return true;\n },\n COMMAND_PRIORITY_LOW\n );\n\n const removeStatusListener = editor.registerUpdateListener(({ editorState }) => {\n editorState.read(() => {\n const selection = $getSelection();\n if ($isRangeSelection(selection)) {\n let anchorNode = selection.anchor.getNode() as ElementNode;\n while (anchorNode !== null) {\n if ($isListNode(anchorNode)) {\n const tag = anchorNode.getTag();\n setIsUList(tag === 'ul');\n setIsOList(tag === 'ol');\n if (tag === 'ul') {\n setBlockType('bullet');\n }\n if (tag === 'ol') {\n setBlockType('number');\n }\n return;\n }\n const parentNode = anchorNode.getParent();\n if (parentNode === null) break;\n anchorNode = parentNode;\n }\n setIsUList(false);\n setIsOList(false);\n setBlockType('paragraph');\n }\n return false;\n });\n });\n\n return () => {\n removeStatusListener();\n };\n }, [editor]);\n\n return (\n <div className={styles['editor__toolbar-button-group']}>\n {ListTypes.map((listType) => (\n <button\n onClick={() => formatList(listType as ListTypesType)}\n key={listType}\n title={t.format[`${listType}Tooltip` as keyof typeof t.format]}\n className={clsx(\n styles['editor__toolbar-button'],\n styles[`editor__toolbar-button--${listType}`],\n listType === 'bullet' && isUList && styles['editor__toolbar-button--active'],\n listType === 'number' && isOList && styles['editor__toolbar-button--active']\n )}\n aria-label={t.aria.labels[listType as keyof typeof t.aria.labels]}\n aria-keyshortcuts={t.aria.keyshortcuts[listType as keyof typeof t.aria.keyshortcuts]}\n type=\"button\"\n >\n <Icon name={LIST_TYPE_ICONS[listType as keyof typeof Icon]} size={24} />\n </button>\n ))}\n </div>\n );\n};\n"],"names":["LIST_TYPE_ICONS","ListTypes","ListPlugin","t","useTranslation","editor","useLexicalComposerContext","blockType","setBlockType","useState","isUList","setIsUList","isOList","setIsOList","formatParagraph","selection","$getSelection","$isRangeSelection","$setBlocksType","$createParagraphNode","formatList","listType","INSERT_ORDERED_LIST_COMMAND","INSERT_UNORDERED_LIST_COMMAND","useEffect","removeKeyboardShortcut","KEY_DOWN_COMMAND","event","REMOVE_LIST_COMMAND","COMMAND_PRIORITY_EDITOR","KEY_TAB_COMMAND","currentNode","parent","$isListItemNode","listParent","$isListNode","newList","$createListNode","COMMAND_PRIORITY_LOW","removeStatusListener","editorState","anchorNode","tag","parentNode","jsx","styles","clsx","Icon"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PasteHandlerPlugin.js","sources":["../../../../../src/components/RteEditor/Plugins/PasteHandlerPlugin/PasteHandlerPlugin.tsx"],"sourcesContent":["import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport { useEffect } from 'react';\nimport { $getSelection, COMMAND_PRIORITY_CRITICAL, type CommandPayloadType, PASTE_COMMAND } from 'lexical';\nimport { objectKlassEquals } from '@lexical/utils';\nimport { $insertDataTransferForRichText } from '@lexical/clipboard';\nimport { MSWordNormalizer } from '@staartwind.nl/lexical-paste-from-word';\n\nexport const PasteHandlerPlugin = () => {\n const [editor] = useLexicalComposerContext();\n\n const handlePaste = (event: CommandPayloadType<typeof PASTE_COMMAND>) => {\n event.preventDefault();\n editor.update(() => {\n const selection = $getSelection();\n const clipboardData =\n objectKlassEquals(event, InputEvent) || objectKlassEquals(event, KeyboardEvent) ? null : event.clipboardData;\n if (clipboardData != null && selection !== null) {\n const content = clipboardData.getData('text/html') || clipboardData.getData('text/plain');\n const newData = new DataTransfer();\n const wordNormalizer = new MSWordNormalizer();\n newData.setData('text/html', content);\n if (wordNormalizer.isActive(content)) {\n newData.setData('text/html', wordNormalizer.normalize(content));\n }\n $insertDataTransferForRichText(newData, selection, editor);\n }\n });\n };\n\n useEffect(() => {\n const removePasteListener = editor.registerCommand(\n PASTE_COMMAND,\n (event) => {\n if (event instanceof ClipboardEvent) {\n handlePaste(event);\n return true;\n }\n return false;\n },\n COMMAND_PRIORITY_CRITICAL\n );\n\n return () => {\n removePasteListener();\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [editor]);\n\n return null;\n};\n"],"names":["PasteHandlerPlugin","editor","useLexicalComposerContext","handlePaste","event","selection","$getSelection","clipboardData","objectKlassEquals","content","newData","wordNormalizer","MSWordNormalizer","$insertDataTransferForRichText","useEffect","removePasteListener","PASTE_COMMAND","COMMAND_PRIORITY_CRITICAL"],"mappings":";;;;;;AAOO,MAAMA,IAAqB,MAAM;
|
|
1
|
+
{"version":3,"file":"PasteHandlerPlugin.js","sources":["../../../../../src/components/RteEditor/Plugins/PasteHandlerPlugin/PasteHandlerPlugin.tsx"],"sourcesContent":["import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport { useEffect } from 'react';\nimport { $getSelection, COMMAND_PRIORITY_CRITICAL, type CommandPayloadType, PASTE_COMMAND } from 'lexical';\nimport { objectKlassEquals } from '@lexical/utils';\nimport { $insertDataTransferForRichText } from '@lexical/clipboard';\nimport { MSWordNormalizer } from '@staartwind.nl/lexical-paste-from-word';\n\nexport const PasteHandlerPlugin = () => {\n const [editor] = useLexicalComposerContext();\n\n const handlePaste = (event: CommandPayloadType<typeof PASTE_COMMAND>) => {\n event.preventDefault();\n editor.update(() => {\n const selection = $getSelection();\n const clipboardData =\n objectKlassEquals(event, InputEvent) || objectKlassEquals(event, KeyboardEvent) ? null : event.clipboardData;\n if (clipboardData != null && selection !== null) {\n const content = clipboardData.getData('text/html') || clipboardData.getData('text/plain');\n const newData = new DataTransfer();\n const wordNormalizer = new MSWordNormalizer();\n newData.setData('text/html', content);\n if (wordNormalizer.isActive(content)) {\n newData.setData('text/html', wordNormalizer.normalize(content));\n }\n $insertDataTransferForRichText(newData, selection, editor);\n }\n });\n };\n\n useEffect(() => {\n const removePasteListener = editor.registerCommand(\n PASTE_COMMAND,\n (event) => {\n if (event instanceof ClipboardEvent) {\n handlePaste(event);\n return true;\n }\n return false;\n },\n COMMAND_PRIORITY_CRITICAL\n );\n\n return () => {\n removePasteListener();\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [editor]);\n\n return null;\n};\n"],"names":["PasteHandlerPlugin","editor","useLexicalComposerContext","handlePaste","event","selection","$getSelection","clipboardData","objectKlassEquals","content","newData","wordNormalizer","MSWordNormalizer","$insertDataTransferForRichText","useEffect","removePasteListener","PASTE_COMMAND","COMMAND_PRIORITY_CRITICAL"],"mappings":";;;;;;AAOO,MAAMA,IAAqB,MAAM;AACtC,QAAM,CAACC,CAAM,IAAIC,EAAA,GAEXC,IAAc,CAACC,MAAoD;AACvE,IAAAA,EAAM,eAAA,GACNH,EAAO,OAAO,MAAM;AAClB,YAAMI,IAAYC,EAAA,GACZC,IACJC,EAAkBJ,GAAO,UAAU,KAAKI,EAAkBJ,GAAO,aAAa,IAAI,OAAOA,EAAM;AACjG,UAAIG,KAAiB,QAAQF,MAAc,MAAM;AAC/C,cAAMI,IAAUF,EAAc,QAAQ,WAAW,KAAKA,EAAc,QAAQ,YAAY,GAClFG,IAAU,IAAI,aAAA,GACdC,IAAiB,IAAIC,mBAAA;AAC3B,QAAAF,EAAQ,QAAQ,aAAaD,CAAO,GAChCE,EAAe,SAASF,CAAO,KACjCC,EAAQ,QAAQ,aAAaC,EAAe,UAAUF,CAAO,CAAC,GAEhEI,EAA+BH,GAASL,GAAWJ,CAAM;AAAA,MAAA;AAAA,IAC3D,CACD;AAAA,EAAA;AAGH,SAAAa,EAAU,MAAM;AACd,UAAMC,IAAsBd,EAAO;AAAA,MACjCe;AAAAA,MACA,CAACZ,MACKA,aAAiB,kBACnBD,EAAYC,CAAK,GACV,MAEF;AAAA,MAETa;AAAAA,IAAA;AAGF,WAAO,MAAM;AACX,MAAAF,EAAA;AAAA,IAAoB;AAAA,EACtB,GAEC,CAACd,CAAM,CAAC,GAEJ;AACT;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableCellContextMenu.js","sources":["../../../../../../src/components/RteEditor/Plugins/TablePlugin/TableCellContextMenu/TableCellContextMenu.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\n\nimport type { Position } from 'components/RteEditor/Plugins/ToolbarPlugin';\n\nimport styles from './TableCellContextMenu.module.css';\n\nimport { Icon } from 'components/Icon';\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\n\nexport type Actions =\n | 'insertRowAbove'\n | 'insertRowBelow'\n | 'deleteRow'\n | 'deleteTable'\n | 'insertColumnLeft'\n | 'insertColumnRight'\n | 'deleteColumn';\ninterface TableCellContextMenuProps {\n position: Position;\n parentScrollPosition: number;\n onAction: (action: Actions) => void;\n}\n\nconst CONTEXT_MENU_OFFSET = 25;\nconst WHITE_SPACE = 10;\nconst BUTTON_SHIFT = 4;\nconst BUTTON_RESET = 25;\n\nconst measureElement = (srcElement: HTMLElement) => {\n const measureElement = srcElement.cloneNode(true) as HTMLElement;\n measureElement.style.height = 'auto';\n measureElement.style.left = '-3000px';\n document.body.appendChild(measureElement);\n const height = measureElement.getBoundingClientRect().height;\n document.body.removeChild(measureElement);\n return height;\n};\n\nexport const TableCellContextMenu = ({ position, parentScrollPosition, onAction }: TableCellContextMenuProps) => {\n const t = useTranslation();\n const [isOpen, setIsOpen] = useState(false);\n const [isHidden, setIsHidden] = useState(false);\n const [localPosition, setLocalPosition] = useState<Position>({ xPos: 0, yPos: 0, height: 0 });\n const [menuHeight, setMenuHeight] = useState(0);\n const startScrollPosition = useRef(0);\n const menuRef = useRef<HTMLUListElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const [editor] = useLexicalComposerContext();\n\n const handleAction = (action: Actions) => {\n onAction(action);\n setIsOpen(false);\n };\n\n const flipMenuIfNotInViewport = () => {\n const menuWidth = menuRef.current ? menuRef.current.getBoundingClientRect().width : 0;\n\n if (containerRef.current && menuRef.current && buttonRef.current) {\n if (localPosition.xPos < menuWidth && containerRef.current) {\n containerRef.current.style.left = `${menuWidth - localPosition.xPos + WHITE_SPACE}px`;\n buttonRef.current.style.right = `${menuWidth - localPosition.xPos + BUTTON_SHIFT + WHITE_SPACE}px`;\n } else {\n containerRef.current.style.left = '0px';\n buttonRef.current.style.right = `${BUTTON_SHIFT}px`;\n }\n\n if (!menuHeight) {\n setMenuHeight(measureElement(menuRef.current));\n }\n\n if (menuHeight > document.documentElement.clientHeight - localPosition.yPos) {\n containerRef.current.style.top = `-${menuHeight + localPosition.height}px`;\n buttonRef.current.style.top = `${menuHeight + BUTTON_SHIFT}px`;\n buttonRef.current.style.transform = 'rotate(180deg)';\n } else {\n containerRef.current.style.top = '0px';\n buttonRef.current.style.top = `-${BUTTON_RESET}px`;\n buttonRef.current.style.transform = 'none';\n }\n }\n };\n\n const setMenuPosition = () => {\n flipMenuIfNotInViewport();\n return `translate(${(localPosition?.xPos ?? 0) - (menuRef.current ? menuRef.current.getBoundingClientRect().width : 0)}px, ${localPosition.yPos - (parentScrollPosition - startScrollPosition.current)}px)`;\n };\n\n useEffect(() => {\n setLocalPosition(position);\n if (position) {\n startScrollPosition.current = parentScrollPosition;\n }\n setIsOpen(false);\n setIsHidden(false);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [position]);\n\n useEffect(() => {\n if (buttonRef.current) {\n const rect = buttonRef.current.getBoundingClientRect();\n const rootElement = editor.getRootElement();\n if (!rootElement) return;\n if (\n rect.top - rootElement.getBoundingClientRect().top <= 0 ||\n rect.top - rootElement.getBoundingClientRect().bottom + CONTEXT_MENU_OFFSET >= 0\n ) {\n setIsHidden(true);\n } else {\n setIsHidden(false);\n }\n flipMenuIfNotInViewport();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [parentScrollPosition]);\n\n return (\n <div\n className={clsx(styles['context-menu__wrapper'], [isHidden && styles['context-menu__wrapper--hidden']])}\n style={{\n transform: `${setMenuPosition()}`,\n }}\n ref={containerRef}\n >\n <button\n type=\"button\"\n onClick={() => setIsOpen((prev) => !prev)}\n className={styles['context-menu__button']}\n ref={buttonRef}\n >\n <Icon name=\"CheveronDown\" size={16} />\n </button>\n <ul ref={menuRef} className={clsx(styles['context-menu'], isOpen && styles['context-menu--open'])}>\n <li>\n <button\n type=\"button\"\n onClick={() => handleAction('insertRowAbove')}\n className={styles['context-menu__item']}\n aria-label={t.aria.labels.tableInsertRowAbove}\n >\n {t.table.insertRowAbove}\n </button>\n </li>\n <li>\n <button\n type=\"button\"\n onClick={() => handleAction('insertRowBelow')}\n className={styles['context-menu__item']}\n aria-label={t.aria.labels.tableInsertRowBelow}\n >\n {t.table.insertRowBelow}\n </button>\n </li>\n <li className={styles['context-menu__item-divider']}>\n <button\n type=\"button\"\n onClick={() => handleAction('deleteRow')}\n className={styles['context-menu__item']}\n aria-label={t.aria.labels.tableDeleteRow}\n >\n {t.table.deleteRow}\n </button>\n </li>\n\n <li>\n <button\n type=\"button\"\n onClick={() => handleAction('insertColumnLeft')}\n className={styles['context-menu__item']}\n aria-label={t.aria.labels.tableInsertColumnLeft}\n >\n {t.table.insertColumnLeft}\n </button>\n </li>\n <li>\n <button\n type=\"button\"\n onClick={() => handleAction('insertColumnRight')}\n className={styles['context-menu__item']}\n aria-label={t.aria.labels.tableInsertColumnRight}\n >\n {t.table.insertColumnRight}\n </button>\n </li>\n <li className={styles['context-menu__item-divider']}>\n <button\n type=\"button\"\n onClick={() => handleAction('deleteColumn')}\n className={styles['context-menu__item']}\n aria-label={t.aria.labels.tableDeleteColumn}\n >\n {t.table.deleteColumn}\n </button>\n </li>\n\n <li>\n <button\n type=\"button\"\n onClick={() => handleAction('deleteTable')}\n className={styles['context-menu__item']}\n aria-label={t.aria.labels.tableDeleteTable}\n >\n {t.table.deleteTable}\n </button>\n </li>\n </ul>\n </div>\n );\n};\n"],"names":["CONTEXT_MENU_OFFSET","WHITE_SPACE","BUTTON_SHIFT","BUTTON_RESET","measureElement","srcElement","height","TableCellContextMenu","position","parentScrollPosition","onAction","useTranslation","isOpen","setIsOpen","useState","isHidden","setIsHidden","localPosition","setLocalPosition","menuHeight","setMenuHeight","startScrollPosition","useRef","menuRef","containerRef","buttonRef","editor","useLexicalComposerContext","handleAction","action","flipMenuIfNotInViewport","menuWidth","setMenuPosition","useEffect","rect","rootElement","jsxs","clsx","styles","jsx","prev","Icon"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TableCellContextMenu.js","sources":["../../../../../../src/components/RteEditor/Plugins/TablePlugin/TableCellContextMenu/TableCellContextMenu.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { clsx } from 'clsx';\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\n\nimport type { Position } from 'components/RteEditor/Plugins/ToolbarPlugin';\n\nimport styles from './TableCellContextMenu.module.css';\n\nimport { Icon } from 'components/Icon';\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\n\nexport type Actions =\n | 'insertRowAbove'\n | 'insertRowBelow'\n | 'deleteRow'\n | 'deleteTable'\n | 'insertColumnLeft'\n | 'insertColumnRight'\n | 'deleteColumn';\ninterface TableCellContextMenuProps {\n position: Position;\n parentScrollPosition: number;\n onAction: (action: Actions) => void;\n}\n\nconst CONTEXT_MENU_OFFSET = 25;\nconst WHITE_SPACE = 10;\nconst BUTTON_SHIFT = 4;\nconst BUTTON_RESET = 25;\n\nconst measureElement = (srcElement: HTMLElement) => {\n const measureElement = srcElement.cloneNode(true) as HTMLElement;\n measureElement.style.height = 'auto';\n measureElement.style.left = '-3000px';\n document.body.appendChild(measureElement);\n const height = measureElement.getBoundingClientRect().height;\n document.body.removeChild(measureElement);\n return height;\n};\n\nexport const TableCellContextMenu = ({ position, parentScrollPosition, onAction }: TableCellContextMenuProps) => {\n const t = useTranslation();\n const [isOpen, setIsOpen] = useState(false);\n const [isHidden, setIsHidden] = useState(false);\n const [localPosition, setLocalPosition] = useState<Position>({ xPos: 0, yPos: 0, height: 0 });\n const [menuHeight, setMenuHeight] = useState(0);\n const startScrollPosition = useRef(0);\n const menuRef = useRef<HTMLUListElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const [editor] = useLexicalComposerContext();\n\n const handleAction = (action: Actions) => {\n onAction(action);\n setIsOpen(false);\n };\n\n const flipMenuIfNotInViewport = () => {\n const menuWidth = menuRef.current ? menuRef.current.getBoundingClientRect().width : 0;\n\n if (containerRef.current && menuRef.current && buttonRef.current) {\n if (localPosition.xPos < menuWidth && containerRef.current) {\n containerRef.current.style.left = `${menuWidth - localPosition.xPos + WHITE_SPACE}px`;\n buttonRef.current.style.right = `${menuWidth - localPosition.xPos + BUTTON_SHIFT + WHITE_SPACE}px`;\n } else {\n containerRef.current.style.left = '0px';\n buttonRef.current.style.right = `${BUTTON_SHIFT}px`;\n }\n\n if (!menuHeight) {\n setMenuHeight(measureElement(menuRef.current));\n }\n\n if (menuHeight > document.documentElement.clientHeight - localPosition.yPos) {\n containerRef.current.style.top = `-${menuHeight + localPosition.height}px`;\n buttonRef.current.style.top = `${menuHeight + BUTTON_SHIFT}px`;\n buttonRef.current.style.transform = 'rotate(180deg)';\n } else {\n containerRef.current.style.top = '0px';\n buttonRef.current.style.top = `-${BUTTON_RESET}px`;\n buttonRef.current.style.transform = 'none';\n }\n }\n };\n\n const setMenuPosition = () => {\n flipMenuIfNotInViewport();\n return `translate(${(localPosition?.xPos ?? 0) - (menuRef.current ? menuRef.current.getBoundingClientRect().width : 0)}px, ${localPosition.yPos - (parentScrollPosition - startScrollPosition.current)}px)`;\n };\n\n useEffect(() => {\n setLocalPosition(position);\n if (position) {\n startScrollPosition.current = parentScrollPosition;\n }\n setIsOpen(false);\n setIsHidden(false);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [position]);\n\n useEffect(() => {\n if (buttonRef.current) {\n const rect = buttonRef.current.getBoundingClientRect();\n const rootElement = editor.getRootElement();\n if (!rootElement) return;\n if (\n rect.top - rootElement.getBoundingClientRect().top <= 0 ||\n rect.top - rootElement.getBoundingClientRect().bottom + CONTEXT_MENU_OFFSET >= 0\n ) {\n setIsHidden(true);\n } else {\n setIsHidden(false);\n }\n flipMenuIfNotInViewport();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [parentScrollPosition]);\n\n return (\n <div\n className={clsx(styles['context-menu__wrapper'], [isHidden && styles['context-menu__wrapper--hidden']])}\n style={{\n transform: `${setMenuPosition()}`,\n }}\n ref={containerRef}\n >\n <button\n type=\"button\"\n onClick={() => setIsOpen((prev) => !prev)}\n className={styles['context-menu__button']}\n ref={buttonRef}\n >\n <Icon name=\"CheveronDown\" size={16} />\n </button>\n <ul ref={menuRef} className={clsx(styles['context-menu'], isOpen && styles['context-menu--open'])}>\n <li>\n <button\n type=\"button\"\n onClick={() => handleAction('insertRowAbove')}\n className={styles['context-menu__item']}\n aria-label={t.aria.labels.tableInsertRowAbove}\n >\n {t.table.insertRowAbove}\n </button>\n </li>\n <li>\n <button\n type=\"button\"\n onClick={() => handleAction('insertRowBelow')}\n className={styles['context-menu__item']}\n aria-label={t.aria.labels.tableInsertRowBelow}\n >\n {t.table.insertRowBelow}\n </button>\n </li>\n <li className={styles['context-menu__item-divider']}>\n <button\n type=\"button\"\n onClick={() => handleAction('deleteRow')}\n className={styles['context-menu__item']}\n aria-label={t.aria.labels.tableDeleteRow}\n >\n {t.table.deleteRow}\n </button>\n </li>\n\n <li>\n <button\n type=\"button\"\n onClick={() => handleAction('insertColumnLeft')}\n className={styles['context-menu__item']}\n aria-label={t.aria.labels.tableInsertColumnLeft}\n >\n {t.table.insertColumnLeft}\n </button>\n </li>\n <li>\n <button\n type=\"button\"\n onClick={() => handleAction('insertColumnRight')}\n className={styles['context-menu__item']}\n aria-label={t.aria.labels.tableInsertColumnRight}\n >\n {t.table.insertColumnRight}\n </button>\n </li>\n <li className={styles['context-menu__item-divider']}>\n <button\n type=\"button\"\n onClick={() => handleAction('deleteColumn')}\n className={styles['context-menu__item']}\n aria-label={t.aria.labels.tableDeleteColumn}\n >\n {t.table.deleteColumn}\n </button>\n </li>\n\n <li>\n <button\n type=\"button\"\n onClick={() => handleAction('deleteTable')}\n className={styles['context-menu__item']}\n aria-label={t.aria.labels.tableDeleteTable}\n >\n {t.table.deleteTable}\n </button>\n </li>\n </ul>\n </div>\n );\n};\n"],"names":["CONTEXT_MENU_OFFSET","WHITE_SPACE","BUTTON_SHIFT","BUTTON_RESET","measureElement","srcElement","height","TableCellContextMenu","position","parentScrollPosition","onAction","useTranslation","isOpen","setIsOpen","useState","isHidden","setIsHidden","localPosition","setLocalPosition","menuHeight","setMenuHeight","startScrollPosition","useRef","menuRef","containerRef","buttonRef","editor","useLexicalComposerContext","handleAction","action","flipMenuIfNotInViewport","menuWidth","setMenuPosition","useEffect","rect","rootElement","jsxs","clsx","styles","jsx","prev","Icon"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"helpers.js","sources":["../../../../../src/components/RteEditor/Plugins/TablePlugin/helpers.ts"],"sourcesContent":["import {\n $createTableNodeWithDimensions,\n $createTableRowNode,\n $createTableCellNode,\n $deleteTableColumn,\n $isTableCellNode,\n $getTableNodeFromLexicalNodeOrThrow,\n $getTableRowNodeFromTableCellNodeOrThrow,\n $getTableRowIndexFromTableCellNode,\n $getTableColumnIndexFromTableCellNode,\n} from '@lexical/table';\nimport { type TextNode, type ElementNode, $createParagraphNode } from 'lexical';\n\nimport type { TableCellNode } from '@lexical/table';\n\nconst PERCENTAGE = 100;\n\nexport const createTable = (nrOfRows: number, nrOfColumns: number): ElementNode => {\n const tableNode = $createTableNodeWithDimensions(0, 0, false);\n for (let rowIndex = 0; rowIndex < nrOfRows; rowIndex++) {\n const rowNode = $createTableRowNode();\n for (let colIndex = 0; colIndex < nrOfColumns; colIndex++) {\n const cellNode = $createTableCellNode(0, undefined, PERCENTAGE / nrOfColumns);\n cellNode.append($createParagraphNode());\n rowNode.append(cellNode);\n }\n tableNode.append(rowNode);\n }\n return tableNode;\n};\n\nexport const deleteRow = (selectedNode: ElementNode) => {\n const currentRow = $getTableRowNodeFromTableCellNodeOrThrow(selectedNode);\n const nextRow = currentRow.getNextSibling() || currentRow.getPreviousSibling();\n const currentTable = currentRow.getParentOrThrow();\n currentTable.getChildrenSize() > 1 ? currentRow.remove() : currentTable.remove();\n\n if (nextRow !== null) {\n const firstDescendant = (nextRow as ElementNode).getFirstDescendant();\n if (firstDescendant) {\n (firstDescendant as TextNode).select();\n }\n }\n};\n\nexport const deleteTable = (selectedNode: ElementNode) => {\n $getTableNodeFromLexicalNodeOrThrow(selectedNode).remove();\n};\n\nexport const insertRow = (selectedNode: ElementNode, position: 'insertRowAbove' | 'insertRowBelow') => {\n const newRow = $createTableRowNode();\n const currentRow = $getTableRowNodeFromTableCellNodeOrThrow(selectedNode);\n const nrOfCols = currentRow.getChildrenSize();\n for (let rowCount = 0; rowCount < nrOfCols; rowCount++) {\n const newCell = $createTableCellNode(0);\n newCell.append($createParagraphNode());\n newRow.append(newCell);\n }\n position === 'insertRowAbove' ? currentRow.insertBefore(newRow) : currentRow.insertAfter(newRow);\n const firstDescendant = newRow.getFirstDescendant();\n if (firstDescendant) {\n (firstDescendant as TextNode).select();\n }\n};\n\nexport const insertColumn = (selectedNode: ElementNode, position: 'insertColumnLeft' | 'insertColumnRight') => {\n const currentRow = $getTableRowNodeFromTableCellNodeOrThrow(selectedNode);\n if (!$isTableCellNode(selectedNode)) {\n throw new Error('Selected node is not a TableCellNode');\n }\n const rowIndex = $getTableRowIndexFromTableCellNode(selectedNode);\n const nrOfCols = currentRow.getChildren().length;\n const currentTable = $getTableNodeFromLexicalNodeOrThrow(selectedNode);\n let columnIndex = $getTableColumnIndexFromTableCellNode(selectedNode);\n const rowsInTable: TableCellNode[] = currentTable.getChildren();\n const nrOfRows = rowsInTable.length;\n\n for (let rowCount = 0; rowCount < nrOfRows; rowCount++) {\n const newCell = $createTableCellNode(0);\n newCell.append($createParagraphNode());\n const cellInSelectedColumn = rowsInTable[rowCount].getChildren()[columnIndex];\n if (cellInSelectedColumn) {\n if (position === 'insertColumnLeft') {\n cellInSelectedColumn.insertBefore(newCell);\n } else {\n cellInSelectedColumn.insertAfter(newCell);\n }\n }\n\n rowsInTable.forEach((row) => {\n row.getChildren().forEach((cell) => {\n (cell as TableCellNode).setWidth(PERCENTAGE / nrOfCols);\n });\n });\n }\n\n columnIndex = position === 'insertColumnLeft' ? columnIndex : columnIndex + 1;\n const firstDescendant = rowsInTable[rowIndex].getChildren()[columnIndex];\n if (firstDescendant) {\n (firstDescendant as TextNode).select();\n }\n};\n\nexport const deleteColumn = (selectedNode: ElementNode) => {\n if (!$isTableCellNode(selectedNode)) {\n throw new Error('Selected node is not a TableCellNode');\n }\n const currentTable = $getTableNodeFromLexicalNodeOrThrow(selectedNode);\n const numberOfColumns = (currentTable.getFirstChild() as ElementNode)?.getChildrenSize() || 0;\n const columnIndex = $getTableColumnIndexFromTableCellNode(selectedNode);\n\n if (numberOfColumns === 1) {\n deleteTable(selectedNode);\n } else {\n $deleteTableColumn(currentTable, columnIndex);\n }\n};\n"],"names":["PERCENTAGE","createTable","nrOfRows","nrOfColumns","tableNode","$createTableNodeWithDimensions","rowIndex","rowNode","$createTableRowNode","colIndex","cellNode","$createTableCellNode","$createParagraphNode","deleteRow","selectedNode","currentRow","$getTableRowNodeFromTableCellNodeOrThrow","nextRow","currentTable","firstDescendant","deleteTable","$getTableNodeFromLexicalNodeOrThrow","insertRow","position","newRow","nrOfCols","rowCount","newCell","insertColumn","$isTableCellNode","$getTableRowIndexFromTableCellNode","columnIndex","$getTableColumnIndexFromTableCellNode","rowsInTable","cellInSelectedColumn","row","cell","deleteColumn","numberOfColumns","_a","$deleteTableColumn"],"mappings":";;AAeA,MAAMA,IAAa,KAENC,IAAc,CAACC,GAAkBC,MAAqC;AACjF,QAAMC,IAAYC,EAA+B,GAAG,GAAG,EAAK;AAC5D,WAASC,IAAW,GAAGA,IAAWJ,GAAUI,KAAY;AACtD,UAAMC,IAAUC,
|
|
1
|
+
{"version":3,"file":"helpers.js","sources":["../../../../../src/components/RteEditor/Plugins/TablePlugin/helpers.ts"],"sourcesContent":["import {\n $createTableNodeWithDimensions,\n $createTableRowNode,\n $createTableCellNode,\n $deleteTableColumn,\n $isTableCellNode,\n $getTableNodeFromLexicalNodeOrThrow,\n $getTableRowNodeFromTableCellNodeOrThrow,\n $getTableRowIndexFromTableCellNode,\n $getTableColumnIndexFromTableCellNode,\n} from '@lexical/table';\nimport { type TextNode, type ElementNode, $createParagraphNode } from 'lexical';\n\nimport type { TableCellNode } from '@lexical/table';\n\nconst PERCENTAGE = 100;\n\nexport const createTable = (nrOfRows: number, nrOfColumns: number): ElementNode => {\n const tableNode = $createTableNodeWithDimensions(0, 0, false);\n for (let rowIndex = 0; rowIndex < nrOfRows; rowIndex++) {\n const rowNode = $createTableRowNode();\n for (let colIndex = 0; colIndex < nrOfColumns; colIndex++) {\n const cellNode = $createTableCellNode(0, undefined, PERCENTAGE / nrOfColumns);\n cellNode.append($createParagraphNode());\n rowNode.append(cellNode);\n }\n tableNode.append(rowNode);\n }\n return tableNode;\n};\n\nexport const deleteRow = (selectedNode: ElementNode) => {\n const currentRow = $getTableRowNodeFromTableCellNodeOrThrow(selectedNode);\n const nextRow = currentRow.getNextSibling() || currentRow.getPreviousSibling();\n const currentTable = currentRow.getParentOrThrow();\n currentTable.getChildrenSize() > 1 ? currentRow.remove() : currentTable.remove();\n\n if (nextRow !== null) {\n const firstDescendant = (nextRow as ElementNode).getFirstDescendant();\n if (firstDescendant) {\n (firstDescendant as TextNode).select();\n }\n }\n};\n\nexport const deleteTable = (selectedNode: ElementNode) => {\n $getTableNodeFromLexicalNodeOrThrow(selectedNode).remove();\n};\n\nexport const insertRow = (selectedNode: ElementNode, position: 'insertRowAbove' | 'insertRowBelow') => {\n const newRow = $createTableRowNode();\n const currentRow = $getTableRowNodeFromTableCellNodeOrThrow(selectedNode);\n const nrOfCols = currentRow.getChildrenSize();\n for (let rowCount = 0; rowCount < nrOfCols; rowCount++) {\n const newCell = $createTableCellNode(0);\n newCell.append($createParagraphNode());\n newRow.append(newCell);\n }\n position === 'insertRowAbove' ? currentRow.insertBefore(newRow) : currentRow.insertAfter(newRow);\n const firstDescendant = newRow.getFirstDescendant();\n if (firstDescendant) {\n (firstDescendant as TextNode).select();\n }\n};\n\nexport const insertColumn = (selectedNode: ElementNode, position: 'insertColumnLeft' | 'insertColumnRight') => {\n const currentRow = $getTableRowNodeFromTableCellNodeOrThrow(selectedNode);\n if (!$isTableCellNode(selectedNode)) {\n throw new Error('Selected node is not a TableCellNode');\n }\n const rowIndex = $getTableRowIndexFromTableCellNode(selectedNode);\n const nrOfCols = currentRow.getChildren().length;\n const currentTable = $getTableNodeFromLexicalNodeOrThrow(selectedNode);\n let columnIndex = $getTableColumnIndexFromTableCellNode(selectedNode);\n const rowsInTable: TableCellNode[] = currentTable.getChildren();\n const nrOfRows = rowsInTable.length;\n\n for (let rowCount = 0; rowCount < nrOfRows; rowCount++) {\n const newCell = $createTableCellNode(0);\n newCell.append($createParagraphNode());\n const cellInSelectedColumn = rowsInTable[rowCount].getChildren()[columnIndex];\n if (cellInSelectedColumn) {\n if (position === 'insertColumnLeft') {\n cellInSelectedColumn.insertBefore(newCell);\n } else {\n cellInSelectedColumn.insertAfter(newCell);\n }\n }\n\n rowsInTable.forEach((row) => {\n row.getChildren().forEach((cell) => {\n (cell as TableCellNode).setWidth(PERCENTAGE / nrOfCols);\n });\n });\n }\n\n columnIndex = position === 'insertColumnLeft' ? columnIndex : columnIndex + 1;\n const firstDescendant = rowsInTable[rowIndex].getChildren()[columnIndex];\n if (firstDescendant) {\n (firstDescendant as TextNode).select();\n }\n};\n\nexport const deleteColumn = (selectedNode: ElementNode) => {\n if (!$isTableCellNode(selectedNode)) {\n throw new Error('Selected node is not a TableCellNode');\n }\n const currentTable = $getTableNodeFromLexicalNodeOrThrow(selectedNode);\n const numberOfColumns = (currentTable.getFirstChild() as ElementNode)?.getChildrenSize() || 0;\n const columnIndex = $getTableColumnIndexFromTableCellNode(selectedNode);\n\n if (numberOfColumns === 1) {\n deleteTable(selectedNode);\n } else {\n $deleteTableColumn(currentTable, columnIndex);\n }\n};\n"],"names":["PERCENTAGE","createTable","nrOfRows","nrOfColumns","tableNode","$createTableNodeWithDimensions","rowIndex","rowNode","$createTableRowNode","colIndex","cellNode","$createTableCellNode","$createParagraphNode","deleteRow","selectedNode","currentRow","$getTableRowNodeFromTableCellNodeOrThrow","nextRow","currentTable","firstDescendant","deleteTable","$getTableNodeFromLexicalNodeOrThrow","insertRow","position","newRow","nrOfCols","rowCount","newCell","insertColumn","$isTableCellNode","$getTableRowIndexFromTableCellNode","columnIndex","$getTableColumnIndexFromTableCellNode","rowsInTable","cellInSelectedColumn","row","cell","deleteColumn","numberOfColumns","_a","$deleteTableColumn"],"mappings":";;AAeA,MAAMA,IAAa,KAENC,IAAc,CAACC,GAAkBC,MAAqC;AACjF,QAAMC,IAAYC,EAA+B,GAAG,GAAG,EAAK;AAC5D,WAASC,IAAW,GAAGA,IAAWJ,GAAUI,KAAY;AACtD,UAAMC,IAAUC,EAAA;AAChB,aAASC,IAAW,GAAGA,IAAWN,GAAaM,KAAY;AACzD,YAAMC,IAAWC,EAAqB,GAAG,QAAWX,IAAaG,CAAW;AAC5E,MAAAO,EAAS,OAAOE,GAAsB,GACtCL,EAAQ,OAAOG,CAAQ;AAAA,IAAA;AAEzB,IAAAN,EAAU,OAAOG,CAAO;AAAA,EAAA;AAE1B,SAAOH;AACT,GAEaS,IAAY,CAACC,MAA8B;AACtD,QAAMC,IAAaC,EAAyCF,CAAY,GAClEG,IAAUF,EAAW,eAAA,KAAoBA,EAAW,mBAAA,GACpDG,IAAeH,EAAW,iBAAA;AAGhC,MAFAG,EAAa,oBAAoB,IAAIH,EAAW,OAAA,IAAWG,EAAa,OAAA,GAEpED,MAAY,MAAM;AACpB,UAAME,IAAmBF,EAAwB,mBAAA;AACjD,IAAIE,KACDA,EAA6B,OAAA;AAAA,EAChC;AAEJ,GAEaC,IAAc,CAACN,MAA8B;AACxDO,EAAAA,EAAoCP,CAAY,EAAE,OAAA;AACpD,GAEaQ,IAAY,CAACR,GAA2BS,MAAkD;AACrG,QAAMC,IAAShB,EAAA,GACTO,IAAaC,EAAyCF,CAAY,GAClEW,IAAWV,EAAW,gBAAA;AAC5B,WAASW,IAAW,GAAGA,IAAWD,GAAUC,KAAY;AACtD,UAAMC,IAAUhB,EAAqB,CAAC;AACtC,IAAAgB,EAAQ,OAAOf,GAAsB,GACrCY,EAAO,OAAOG,CAAO;AAAA,EAAA;AAEvB,EAAAJ,MAAa,mBAAmBR,EAAW,aAAaS,CAAM,IAAIT,EAAW,YAAYS,CAAM;AAC/F,QAAML,IAAkBK,EAAO,mBAAA;AAC/B,EAAIL,KACDA,EAA6B,OAAA;AAElC,GAEaS,IAAe,CAACd,GAA2BS,MAAuD;AAC7G,QAAMR,IAAaC,EAAyCF,CAAY;AACxE,MAAI,CAACe,EAAiBf,CAAY;AAChC,UAAM,IAAI,MAAM,sCAAsC;AAExD,QAAMR,IAAWwB,EAAmChB,CAAY,GAC1DW,IAAWV,EAAW,YAAA,EAAc,QACpCG,IAAeG,EAAoCP,CAAY;AACrE,MAAIiB,IAAcC,EAAsClB,CAAY;AACpE,QAAMmB,IAA+Bf,EAAa,YAAA,GAC5ChB,IAAW+B,EAAY;AAE7B,WAASP,IAAW,GAAGA,IAAWxB,GAAUwB,KAAY;AACtD,UAAMC,IAAUhB,EAAqB,CAAC;AACtC,IAAAgB,EAAQ,OAAOf,GAAsB;AACrC,UAAMsB,IAAuBD,EAAYP,CAAQ,EAAE,YAAA,EAAcK,CAAW;AAC5E,IAAIG,MACEX,MAAa,qBACfW,EAAqB,aAAaP,CAAO,IAEzCO,EAAqB,YAAYP,CAAO,IAI5CM,EAAY,QAAQ,CAACE,MAAQ;AAC3B,MAAAA,EAAI,YAAA,EAAc,QAAQ,CAACC,MAAS;AACjC,QAAAA,EAAuB,SAASpC,IAAayB,CAAQ;AAAA,MAAA,CACvD;AAAA,IAAA,CACF;AAAA,EAAA;AAGH,EAAAM,IAAcR,MAAa,qBAAqBQ,IAAcA,IAAc;AAC5E,QAAMZ,IAAkBc,EAAY3B,CAAQ,EAAE,YAAA,EAAcyB,CAAW;AACvE,EAAIZ,KACDA,EAA6B,OAAA;AAElC,GAEakB,IAAe,CAACvB,MAA8B;;AACzD,MAAI,CAACe,EAAiBf,CAAY;AAChC,UAAM,IAAI,MAAM,sCAAsC;AAExD,QAAMI,IAAeG,EAAoCP,CAAY,GAC/DwB,MAAmBC,IAAArB,EAAa,cAAA,MAAb,gBAAAqB,EAA8C,sBAAqB,GACtFR,IAAcC,EAAsClB,CAAY;AAEtE,EAAIwB,MAAoB,IACtBlB,EAAYN,CAAY,IAExB0B,EAAmBtB,GAAca,CAAW;AAEhD;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolbarPlugin.js","sources":["../../../../../src/components/RteEditor/Plugins/ToolbarPlugin/ToolbarPlugin.tsx"],"sourcesContent":["import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport { $getSelection, $isRangeSelection, $setSelection } from 'lexical';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport { $getTableCellNodeFromLexicalNode } from '@lexical/table';\n\nimport type { JSX } from 'react';\nimport type { Actions } from 'components/RteEditor/Plugins/TablePlugin/TableCellContextMenu/TableCellContextMenu';\nimport type { TableMutation } from 'components/RteEditor/Plugins/TablePlugin/TablePlugin';\n\nimport {\n LinkPlugin,\n BlockFormatPlugin,\n ListPlugin,\n HistoryPlugin,\n TablePlugin,\n TableCellContextMenu,\n} from 'components/RteEditor/Plugins';\nimport styles from 'components/RteEditor/RteEditor.module.css';\nimport { removeScrollableContainers, setScrollableContainers } from 'components/RteEditor/helpers';\n\nexport type Position = {\n xPos: number;\n yPos: number;\n height: number;\n};\n\ninterface ToolBarProps {\n editorScrollPosition: number;\n}\n\nexport const ToolBarPlugin = ({ editorScrollPosition }: ToolBarProps): JSX.Element => {\n const [editor] = useLexicalComposerContext();\n const [position, setPosition] = useState<Position | null>(null);\n const tableref = useRef<TableMutation>(null);\n\n const updateToolbar = useCallback(() => {\n const selection = $getSelection();\n if ($isRangeSelection(selection)) {\n const anchor = selection.anchor;\n const anchorNode = anchor.getNode();\n\n const tableCell = $getTableCellNodeFromLexicalNode(anchorNode);\n if (tableCell) {\n const domNode = editor.getElementByKey(tableCell.getKey());\n const position = domNode ? domNode.getBoundingClientRect() : { right: 0, bottom: 0, height: 0 };\n setPosition({ xPos: position.right, yPos: position.bottom, height: position.height });\n } else {\n setPosition(null);\n }\n }\n }, [editor]);\n\n const handleTableAction = (action: Actions) => {\n tableref.current?.mutateTable(action);\n };\n\n const handleResizeScroll = () => {\n editor.update(() => {\n const selection = $getSelection();\n\n if ($isRangeSelection(selection)) {\n const anchor = selection.anchor;\n const anchorNode = anchor.getNode();\n\n const tableCell = $getTableCellNodeFromLexicalNode(anchorNode);\n if (tableCell) {\n $setSelection(null);\n setPosition(null);\n }\n }\n });\n };\n\n useEffect(() => {\n editor.registerUpdateListener(({ editorState }) => {\n editorState.read(() => {\n updateToolbar();\n });\n });\n }, [editor, updateToolbar]);\n\n useEffect(() => {\n setScrollableContainers(handleResizeScroll);\n\n window.addEventListener('scroll', handleResizeScroll);\n window.addEventListener('resize', handleResizeScroll);\n\n return () => {\n window.removeEventListener('scroll', handleResizeScroll);\n window.removeEventListener('resize', handleResizeScroll);\n removeScrollableContainers(handleResizeScroll);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [editor]);\n\n useEffect(() => {\n const removeKeydown = () => {\n setScrollableContainers(handleResizeScroll);\n };\n\n window.addEventListener('keydown', removeKeydown, { capture: true });\n\n return () => {\n window.removeEventListener('keydown', removeKeydown);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n <div className={styles['editor__toolbar']}>\n <BlockFormatPlugin />\n <ListPlugin />\n <TablePlugin isActive={Boolean(position)} ref={tableref} />\n {position && (\n <TableCellContextMenu\n position={position}\n parentScrollPosition={editorScrollPosition}\n onAction={handleTableAction}\n />\n )}\n <LinkPlugin parentScrollPosition={editorScrollPosition} />\n <HistoryPlugin />\n </div>\n );\n};\n"],"names":["ToolBarPlugin","editorScrollPosition","editor","useLexicalComposerContext","position","setPosition","useState","tableref","useRef","updateToolbar","useCallback","selection","$getSelection","$isRangeSelection","anchorNode","tableCell","$getTableCellNodeFromLexicalNode","domNode","handleTableAction","action","_a","handleResizeScroll","$setSelection","useEffect","editorState","setScrollableContainers","removeScrollableContainers","removeKeydown","jsxs","styles","jsx","BlockFormatPlugin","ListPlugin","TablePlugin","TableCellContextMenu","LinkPlugin","HistoryPlugin"],"mappings":";;;;;;;;;;;;;AA8BO,MAAMA,IAAgB,CAAC,EAAE,sBAAAC,QAAsD;
|
|
1
|
+
{"version":3,"file":"ToolbarPlugin.js","sources":["../../../../../src/components/RteEditor/Plugins/ToolbarPlugin/ToolbarPlugin.tsx"],"sourcesContent":["import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport { $getSelection, $isRangeSelection, $setSelection } from 'lexical';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport { $getTableCellNodeFromLexicalNode } from '@lexical/table';\n\nimport type { JSX } from 'react';\nimport type { Actions } from 'components/RteEditor/Plugins/TablePlugin/TableCellContextMenu/TableCellContextMenu';\nimport type { TableMutation } from 'components/RteEditor/Plugins/TablePlugin/TablePlugin';\n\nimport {\n LinkPlugin,\n BlockFormatPlugin,\n ListPlugin,\n HistoryPlugin,\n TablePlugin,\n TableCellContextMenu,\n} from 'components/RteEditor/Plugins';\nimport styles from 'components/RteEditor/RteEditor.module.css';\nimport { removeScrollableContainers, setScrollableContainers } from 'components/RteEditor/helpers';\n\nexport type Position = {\n xPos: number;\n yPos: number;\n height: number;\n};\n\ninterface ToolBarProps {\n editorScrollPosition: number;\n}\n\nexport const ToolBarPlugin = ({ editorScrollPosition }: ToolBarProps): JSX.Element => {\n const [editor] = useLexicalComposerContext();\n const [position, setPosition] = useState<Position | null>(null);\n const tableref = useRef<TableMutation>(null);\n\n const updateToolbar = useCallback(() => {\n const selection = $getSelection();\n if ($isRangeSelection(selection)) {\n const anchor = selection.anchor;\n const anchorNode = anchor.getNode();\n\n const tableCell = $getTableCellNodeFromLexicalNode(anchorNode);\n if (tableCell) {\n const domNode = editor.getElementByKey(tableCell.getKey());\n const position = domNode ? domNode.getBoundingClientRect() : { right: 0, bottom: 0, height: 0 };\n setPosition({ xPos: position.right, yPos: position.bottom, height: position.height });\n } else {\n setPosition(null);\n }\n }\n }, [editor]);\n\n const handleTableAction = (action: Actions) => {\n tableref.current?.mutateTable(action);\n };\n\n const handleResizeScroll = () => {\n editor.update(() => {\n const selection = $getSelection();\n\n if ($isRangeSelection(selection)) {\n const anchor = selection.anchor;\n const anchorNode = anchor.getNode();\n\n const tableCell = $getTableCellNodeFromLexicalNode(anchorNode);\n if (tableCell) {\n $setSelection(null);\n setPosition(null);\n }\n }\n });\n };\n\n useEffect(() => {\n editor.registerUpdateListener(({ editorState }) => {\n editorState.read(() => {\n updateToolbar();\n });\n });\n }, [editor, updateToolbar]);\n\n useEffect(() => {\n setScrollableContainers(handleResizeScroll);\n\n window.addEventListener('scroll', handleResizeScroll);\n window.addEventListener('resize', handleResizeScroll);\n\n return () => {\n window.removeEventListener('scroll', handleResizeScroll);\n window.removeEventListener('resize', handleResizeScroll);\n removeScrollableContainers(handleResizeScroll);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [editor]);\n\n useEffect(() => {\n const removeKeydown = () => {\n setScrollableContainers(handleResizeScroll);\n };\n\n window.addEventListener('keydown', removeKeydown, { capture: true });\n\n return () => {\n window.removeEventListener('keydown', removeKeydown);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n <div className={styles['editor__toolbar']}>\n <BlockFormatPlugin />\n <ListPlugin />\n <TablePlugin isActive={Boolean(position)} ref={tableref} />\n {position && (\n <TableCellContextMenu\n position={position}\n parentScrollPosition={editorScrollPosition}\n onAction={handleTableAction}\n />\n )}\n <LinkPlugin parentScrollPosition={editorScrollPosition} />\n <HistoryPlugin />\n </div>\n );\n};\n"],"names":["ToolBarPlugin","editorScrollPosition","editor","useLexicalComposerContext","position","setPosition","useState","tableref","useRef","updateToolbar","useCallback","selection","$getSelection","$isRangeSelection","anchorNode","tableCell","$getTableCellNodeFromLexicalNode","domNode","handleTableAction","action","_a","handleResizeScroll","$setSelection","useEffect","editorState","setScrollableContainers","removeScrollableContainers","removeKeydown","jsxs","styles","jsx","BlockFormatPlugin","ListPlugin","TablePlugin","TableCellContextMenu","LinkPlugin","HistoryPlugin"],"mappings":";;;;;;;;;;;;;AA8BO,MAAMA,IAAgB,CAAC,EAAE,sBAAAC,QAAsD;AACpF,QAAM,CAACC,CAAM,IAAIC,EAAA,GACX,CAACC,GAAUC,CAAW,IAAIC,EAA0B,IAAI,GACxDC,IAAWC,EAAsB,IAAI,GAErCC,IAAgBC,EAAY,MAAM;AACtC,UAAMC,IAAYC,EAAA;AAClB,QAAIC,EAAkBF,CAAS,GAAG;AAEhC,YAAMG,IADSH,EAAU,OACC,QAAA,GAEpBI,IAAYC,EAAiCF,CAAU;AAC7D,UAAIC,GAAW;AACb,cAAME,IAAUf,EAAO,gBAAgBa,EAAU,QAAQ,GACnDX,IAAWa,IAAUA,EAAQ,sBAAA,IAA0B,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,EAAA;AAC5F,QAAAZ,EAAY,EAAE,MAAMD,EAAS,OAAO,MAAMA,EAAS,QAAQ,QAAQA,EAAS,OAAA,CAAQ;AAAA,MAAA;AAEpF,QAAAC,EAAY,IAAI;AAAA,IAClB;AAAA,EACF,GACC,CAACH,CAAM,CAAC,GAELgB,IAAoB,CAACC,MAAoB;;AAC7C,KAAAC,IAAAb,EAAS,YAAT,QAAAa,EAAkB,YAAYD;AAAA,EAAM,GAGhCE,IAAqB,MAAM;AAC/B,IAAAnB,EAAO,OAAO,MAAM;AAClB,YAAMS,IAAYC,EAAA;AAElB,UAAIC,EAAkBF,CAAS,GAAG;AAEhC,cAAMG,IADSH,EAAU,OACC,QAAA;AAG1B,QADkBK,EAAiCF,CAAU,MAE3DQ,EAAc,IAAI,GAClBjB,EAAY,IAAI;AAAA,MAClB;AAAA,IACF,CACD;AAAA,EAAA;AAGH,SAAAkB,EAAU,MAAM;AACd,IAAArB,EAAO,uBAAuB,CAAC,EAAE,aAAAsB,QAAkB;AACjD,MAAAA,EAAY,KAAK,MAAM;AACrB,QAAAf,EAAA;AAAA,MAAc,CACf;AAAA,IAAA,CACF;AAAA,EAAA,GACA,CAACP,GAAQO,CAAa,CAAC,GAE1Bc,EAAU,OACRE,EAAwBJ,CAAkB,GAE1C,OAAO,iBAAiB,UAAUA,CAAkB,GACpD,OAAO,iBAAiB,UAAUA,CAAkB,GAE7C,MAAM;AACX,WAAO,oBAAoB,UAAUA,CAAkB,GACvD,OAAO,oBAAoB,UAAUA,CAAkB,GACvDK,EAA2BL,CAAkB;AAAA,EAAA,IAG9C,CAACnB,CAAM,CAAC,GAEXqB,EAAU,MAAM;AACd,UAAMI,IAAgB,MAAM;AAC1B,MAAAF,EAAwBJ,CAAkB;AAAA,IAAA;AAG5C,kBAAO,iBAAiB,WAAWM,GAAe,EAAE,SAAS,IAAM,GAE5D,MAAM;AACX,aAAO,oBAAoB,WAAWA,CAAa;AAAA,IAAA;AAAA,EACrD,GAEC,EAAE,GAGH,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAO,iBACrB,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAkB;AAAA,sBAClBC,GAAA,EAAW;AAAA,sBACXC,GAAA,EAAY,UAAU,EAAQ7B,GAAW,KAAKG,GAAU;AAAA,IACxDH,KACC,gBAAA0B;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,UAAA9B;AAAA,QACA,sBAAsBH;AAAA,QACtB,UAAUiB;AAAA,MAAA;AAAA,IAAA;AAAA,IAGd,gBAAAY,EAACK,GAAA,EAAW,sBAAsBlC,EAAA,CAAsB;AAAA,sBACvDmC,GAAA,CAAA,CAAc;AAAA,EAAA,GACjB;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LanguageProvider.js","sources":["../../../../src/components/RteEditor/Providers/LanguageProvider.tsx"],"sourcesContent":["import { createContext, useContext, useState } from 'react';\n\nimport type { ReactNode } from 'react';\n\ninterface LanguageContextProps {\n language: string;\n switchLanguage: (language: string) => void;\n}\n\nconst LanguageContext = createContext<LanguageContextProps | undefined>(undefined);\n\nexport const LanguageProvider = ({ children }: { children: ReactNode }) => {\n const [language, setLanguage] = useState<string>('en');\n\n const switchLanguage = (language: string) => {\n setLanguage(language);\n };\n\n return <LanguageContext.Provider value={{ language, switchLanguage }}>{children}</LanguageContext.Provider>;\n};\n\nexport const useLanguage = (): LanguageContextProps => {\n const context = useContext(LanguageContext);\n if (!context) {\n throw new Error('useLanguage must be used within a LanguageProvider');\n }\n return context;\n};\n"],"names":["LanguageContext","createContext","LanguageProvider","children","language","setLanguage","useState","switchLanguage","jsx","useLanguage","context","useContext"],"mappings":";;AASA,MAAMA,IAAkBC,EAAgD,MAAS,GAEpEC,IAAmB,CAAC,EAAE,UAAAC,QAAwC;AACzE,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAiB,IAAI,GAE/CC,IAAiB,CAACH,MAAqB;AAC3C,IAAAC,EAAYD,CAAQ;AAAA,
|
|
1
|
+
{"version":3,"file":"LanguageProvider.js","sources":["../../../../src/components/RteEditor/Providers/LanguageProvider.tsx"],"sourcesContent":["import { createContext, useContext, useState } from 'react';\n\nimport type { ReactNode } from 'react';\n\ninterface LanguageContextProps {\n language: string;\n switchLanguage: (language: string) => void;\n}\n\nconst LanguageContext = createContext<LanguageContextProps | undefined>(undefined);\n\nexport const LanguageProvider = ({ children }: { children: ReactNode }) => {\n const [language, setLanguage] = useState<string>('en');\n\n const switchLanguage = (language: string) => {\n setLanguage(language);\n };\n\n return <LanguageContext.Provider value={{ language, switchLanguage }}>{children}</LanguageContext.Provider>;\n};\n\nexport const useLanguage = (): LanguageContextProps => {\n const context = useContext(LanguageContext);\n if (!context) {\n throw new Error('useLanguage must be used within a LanguageProvider');\n }\n return context;\n};\n"],"names":["LanguageContext","createContext","LanguageProvider","children","language","setLanguage","useState","switchLanguage","jsx","useLanguage","context","useContext"],"mappings":";;AASA,MAAMA,IAAkBC,EAAgD,MAAS,GAEpEC,IAAmB,CAAC,EAAE,UAAAC,QAAwC;AACzE,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAiB,IAAI,GAE/CC,IAAiB,CAACH,MAAqB;AAC3C,IAAAC,EAAYD,CAAQ;AAAA,EAAA;AAGtB,SAAO,gBAAAI,EAACR,EAAgB,UAAhB,EAAyB,OAAO,EAAE,UAAAI,GAAU,gBAAAG,KAAmB,UAAAJ,GAAS;AAClF,GAEaM,IAAc,MAA4B;AACrD,QAAMC,IAAUC,EAAWX,CAAe;AAC1C,MAAI,CAACU;AACH,UAAM,IAAI,MAAM,oDAAoD;AAEtE,SAAOA;AACT;"}
|