@frontify/guideline-blocks-settings 0.28.1 → 0.28.2
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/CHANGELOG.md +11 -0
- package/dist/components/Attachments/AttachmentItem.es.js +54 -54
- package/dist/components/Attachments/AttachmentItem.es.js.map +1 -1
- package/dist/components/Attachments/Attachments.es.js +69 -69
- package/dist/components/Attachments/Attachments.es.js.map +1 -1
- package/dist/components/BlockInjectButton/BlockInjectButton.es.js +42 -42
- package/dist/components/BlockInjectButton/BlockInjectButton.es.js.map +1 -1
- package/dist/components/BlockItemWrapper/BlockItemWrapper.es.js +28 -28
- package/dist/components/BlockItemWrapper/BlockItemWrapper.es.js.map +1 -1
- package/dist/components/BlockItemWrapper/Toolbar.es.js.map +1 -1
- package/dist/components/RichTextEditor/RichTextEditor.es.js +23 -23
- package/dist/components/RichTextEditor/RichTextEditor.es.js.map +1 -1
- package/dist/components/RichTextEditor/SerializedText.es.js +7 -7
- package/dist/components/RichTextEditor/SerializedText.es.js.map +1 -1
- package/dist/components/RichTextEditor/pluginPresets/defaultPluginsWithLinkChooser.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/ButtonMarkupElement/ButtonMarkupElementNode.es.js +11 -11
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/ButtonMarkupElement/ButtonMarkupElementNode.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/components/ButtonToolbarButton.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/FloatingButtonEditButton.es.js +10 -10
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/FloatingButtonEditButton.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/FloatingButtonUrlInput.es.js +13 -13
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/FloatingButtonUrlInput.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/InsertButtonModal/InsertButtonModal.es.js +2 -2
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/InsertButtonModal/InsertButtonModal.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/InsertButtonModal/useInsertModal.es.js +30 -30
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/InsertButtonModal/useInsertModal.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/UnlinkButton.es.js +7 -7
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/UnlinkButton.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/useFloatingButtonEdit.es.js +30 -30
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/useFloatingButtonEdit.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/useFloatingButtonEnter.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/useFloatingButtonEscape.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/useFloatingButtonInsert.es.js +8 -8
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/useFloatingButtonInsert.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/createButtonPlugin.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/transforms/insertButton.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/transforms/unwrapButton.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/transforms/upsertButton.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/transforms/upsertButtonText.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/transforms/wrapButton.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/utils/createButtonNode.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/utils/triggerFloatingButton.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/utils/triggerFloatingButtonInsert.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/withButton.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/LinkPlugin/FloatingLink/EditLinkModal/useFloatingLinkEdit.es.js +30 -30
- package/dist/components/RichTextEditor/plugins/LinkPlugin/FloatingLink/EditLinkModal/useFloatingLinkEdit.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/LinkPlugin/FloatingLink/InsertLinkModal/useFloatingLinkInsert.es.js +7 -7
- package/dist/components/RichTextEditor/plugins/LinkPlugin/FloatingLink/InsertLinkModal/useFloatingLinkInsert.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/LinkPlugin/FloatingLink/InsertLinkModal/useInsertModal.es.js +29 -29
- package/dist/components/RichTextEditor/plugins/LinkPlugin/FloatingLink/InsertLinkModal/useInsertModal.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/LinkPlugin/LinkButton.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/LinkPlugin/utils/url.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/shared/LinkSelector/DocumentLink.es.js +14 -14
- package/dist/components/RichTextEditor/plugins/shared/LinkSelector/DocumentLink.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/shared/LinkSelector/DocumentLinks.es.js +27 -27
- package/dist/components/RichTextEditor/plugins/shared/LinkSelector/DocumentLinks.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/shared/LinkSelector/LinkSelector.es.js +27 -27
- package/dist/components/RichTextEditor/plugins/shared/LinkSelector/LinkSelector.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/shared/LinkSelector/PageLink.es.js +15 -15
- package/dist/components/RichTextEditor/plugins/shared/LinkSelector/PageLink.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/shared/LinkSelector/PageLinks.es.js +13 -13
- package/dist/components/RichTextEditor/plugins/shared/LinkSelector/PageLinks.es.js.map +1 -1
- package/dist/components/RichTextEditor/serializer/nodes/button.es.js.map +1 -1
- package/dist/components/RichTextEditor/serializer/nodes/checkItemNode.es.js.map +1 -1
- package/dist/components/RichTextEditor/serializer/nodes/default.es.js.map +1 -1
- package/dist/components/RichTextEditor/serializer/nodes/link.es.js.map +1 -1
- package/dist/components/RichTextEditor/serializer/nodes/mentionHtmlNode.es.js +1 -1
- package/dist/components/RichTextEditor/serializer/serializeNodesToHtmlRecursive.es.js.map +1 -1
- package/dist/components/RichTextEditor/serializer/serializeToHtml.es.js.map +1 -1
- package/dist/components/RichTextEditor/serializer/utlis/reactCssPropsToCss.es.js.map +1 -1
- package/dist/components/RichTextEditor/serializer/utlis/serializeLeafToHtml.es.js.map +1 -1
- package/dist/helpers/addHttps.es.js.map +1 -1
- package/dist/helpers/customCoordinatesGetterFactory.es.js.map +1 -1
- package/dist/helpers/hasRichTextValue.es.js.map +1 -1
- package/dist/hooks/useAttachments.es.js.map +1 -1
- package/dist/hooks/useDndSensors.es.js.map +1 -1
- package/dist/index.cjs.js +22 -229
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +12 -10
- package/dist/index.es.js +1 -1
- package/dist/index.es.js.map +1 -1
- package/dist/index.umd.js +22 -229
- package/dist/index.umd.js.map +1 -1
- package/dist/settings/background.es.js.map +1 -1
- package/dist/settings/border.es.js +1 -1
- package/dist/settings/border.es.js.map +1 -1
- package/dist/settings/borderRadius.es.js +1 -1
- package/dist/settings/borderRadius.es.js.map +1 -1
- package/dist/settings/borderRadiusExtended.es.js +1 -1
- package/dist/settings/borderRadiusExtended.es.js.map +1 -1
- package/dist/settings/gutter.es.js +1 -1
- package/dist/settings/margin.es.js +1 -1
- package/dist/settings/margin.es.js.map +1 -1
- package/dist/settings/marginExtended.es.js +1 -1
- package/dist/settings/marginExtended.es.js.map +1 -1
- package/dist/settings/padding.es.js +1 -1
- package/dist/settings/padding.es.js.map +1 -1
- package/dist/settings/paddingExtended.es.js +1 -1
- package/dist/settings/paddingExtended.es.js.map +1 -1
- package/dist/settings/securityGlobalControl.es.js +1 -1
- package/dist/styles.css +1 -0
- package/dist/styles.css.es.js +5 -0
- package/dist/styles.css.es.js.map +1 -0
- package/dist/utilities/moveItemInArray.es.js.map +1 -1
- package/dist/utilities/react/getBorderStyles.es.js.map +1 -1
- package/package.json +25 -24
- package/src/components/Attachments/AttachmentItem.tsx +2 -2
- package/src/components/Attachments/Attachments.spec.ct.tsx +4 -4
- package/src/components/Attachments/Attachments.tsx +2 -2
- package/src/components/BlockInjectButton/BlockInjectButton.spec.ct.tsx +2 -2
- package/src/components/BlockItemWrapper/BlockItemWrapper.spec.ct.tsx +8 -8
- package/src/components/BlockItemWrapper/Toolbar.tsx +1 -1
- package/src/components/RichTextEditor/RichTextEditor.spec.ct.tsx +8 -8
- package/src/components/RichTextEditor/pluginPresets/defaultPluginsWithLinkChooser.tsx +2 -2
- package/src/components/RichTextEditor/plugins/ButtonPlugin/components/ButtonToolbarButton.tsx +1 -1
- package/src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/FloatingButtonUrlInput.tsx +1 -1
- package/src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/InsertButtonModal/useInsertModal.ts +1 -1
- package/src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/useFloatingButtonEdit.ts +1 -1
- package/src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/useFloatingButtonEnter.ts +1 -1
- package/src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/useFloatingButtonEscape.ts +1 -1
- package/src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/useFloatingButtonInsert.ts +1 -1
- package/src/components/RichTextEditor/plugins/ButtonPlugin/createButtonPlugin.ts +2 -0
- package/src/components/RichTextEditor/plugins/ButtonPlugin/transforms/insertButton.ts +2 -2
- package/src/components/RichTextEditor/plugins/ButtonPlugin/transforms/unwrapButton.ts +1 -1
- package/src/components/RichTextEditor/plugins/ButtonPlugin/transforms/upsertButton.ts +5 -5
- package/src/components/RichTextEditor/plugins/ButtonPlugin/transforms/wrapButton.ts +2 -2
- package/src/components/RichTextEditor/plugins/ButtonPlugin/utils/createButtonNode.ts +1 -1
- package/src/components/RichTextEditor/plugins/ButtonPlugin/utils/triggerFloatingButton.ts +1 -1
- package/src/components/RichTextEditor/plugins/ButtonPlugin/utils/triggerFloatingButtonInsert.ts +1 -1
- package/src/components/RichTextEditor/plugins/ButtonPlugin/withButton.ts +1 -1
- package/src/components/RichTextEditor/plugins/LinkPlugin/FloatingLink/EditLinkModal/useFloatingLinkEdit.ts +1 -1
- package/src/components/RichTextEditor/plugins/LinkPlugin/FloatingLink/InsertLinkModal/useFloatingLinkInsert.ts +1 -1
- package/src/components/RichTextEditor/plugins/LinkPlugin/FloatingLink/InsertLinkModal/useInsertModal.ts +1 -1
- package/src/components/RichTextEditor/plugins/LinkPlugin/LinkButton.tsx +1 -1
- package/src/components/RichTextEditor/plugins/LinkPlugin/utils/relativeUrlRegex.spec.ts +24 -27
- package/src/components/RichTextEditor/serializer/nodes/checkItemNode.ts +1 -1
- package/src/components/RichTextEditor/serializer/nodes/default.ts +2 -2
- package/src/components/RichTextEditor/serializer/nodes/link.ts +1 -1
- package/src/components/RichTextEditor/serializer/serializeNodesToHtmlRecursive.ts +4 -4
- package/src/components/RichTextEditor/serializer/serializeToHtml.ts +2 -2
- package/src/hooks/useAttachments.ts +1 -1
- package/src/hooks/useDndSensors.ts +1 -1
- package/src/index.ts +3 -3
- package/src/settings/background.spec.ts +1 -1
- package/src/settings/border.spec.ts +1 -1
- package/src/settings/borderRadiusExtended.spec.ts +4 -4
- package/src/settings/marginExtended.spec.ts +4 -4
- package/src/settings/paddingExtended.spec.ts +4 -4
- package/src/styles.css +3 -0
- package/src/utilities/react/getBorderStyles.ts +1 -1
- package/vite.config.ts +22 -2
- package/dist/_virtual/_commonjsHelpers.es.js +0 -7
- package/dist/_virtual/_commonjsHelpers.es.js.map +0 -1
- package/dist/_virtual/index.es.js +0 -5
- package/dist/_virtual/index.es.js.map +0 -1
- package/dist/_virtual/index.es2.js +0 -5
- package/dist/_virtual/index.es2.js.map +0 -1
- package/dist/_virtual/index.es3.js +0 -5
- package/dist/_virtual/index.es3.js.map +0 -1
- package/dist/_virtual/react-dom.development.es.js +0 -5
- package/dist/_virtual/react-dom.development.es.js.map +0 -1
- package/dist/_virtual/react-dom.production.min.es.js +0 -5
- package/dist/_virtual/react-dom.production.min.es.js.map +0 -1
- package/dist/_virtual/react.development.es.js +0 -5
- package/dist/_virtual/react.development.es.js.map +0 -1
- package/dist/_virtual/react.production.min.es.js +0 -5
- package/dist/_virtual/react.production.min.es.js.map +0 -1
- package/dist/_virtual/scheduler.development.es.js +0 -5
- package/dist/_virtual/scheduler.development.es.js.map +0 -1
- package/dist/_virtual/scheduler.production.min.es.js +0 -5
- package/dist/_virtual/scheduler.production.min.es.js.map +0 -1
- package/dist/style.css +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonMarkupElementNode.es.js","sources":["../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/ButtonMarkupElement/ButtonMarkupElementNode.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { HTMLPropsAs, PlateRenderElementProps, Value, useElementProps } from '@udecode/plate';\nimport { CSSProperties, HTMLAttributeAnchorTarget, ReactElement, ReactNode, useState } from 'react';\nimport { RichTextButtonStyle, TButtonElement } from '../types';\nimport { BlockButtonStyles } from '../utils';\n\nexport type ButtonRootProps = PlateRenderElementProps<Value, TButtonElement> & HTMLPropsAs<'a'>;\n\nconst useButton = (props: ButtonRootProps): HTMLPropsAs<'a'> & { buttonStyle: RichTextButtonStyle } => {\n const _props = useElementProps<TButtonElement, 'a'>({\n ...props,\n elementToAttributes: (element) => ({\n url: element.href,\n buttonStyle: element.buttonStyle || 'primary',\n target: element.target || '_blank',\n }),\n });\n\n return {\n ...(_props as HTMLPropsAs<'a'> & { buttonStyle: RichTextButtonStyle }),\n // quick fix: hovering <a> with href loses the editor focus\n onMouseOver: (e) => {\n e.stopPropagation();\n },\n };\n};\n\nexport const ButtonMarkupElementNode = (props: ButtonRootProps) => {\n const { href, target, buttonStyle } = useButton(props);\n const { attributes, children } = props;\n\n return (\n <HoverableButtonLink\n attributes={attributes}\n href={href}\n target={target}\n styles={BlockButtonStyles[`button${buttonStyle.charAt(0).toUpperCase() + buttonStyle.slice(1)}`]}\n >\n {children}\n </HoverableButtonLink>\n );\n};\n\ntype Props = {\n attributes: ButtonRootProps['attributes'];\n children: ReactNode;\n styles?: CSSProperties & { hover?: CSSProperties };\n href?: string;\n target?: HTMLAttributeAnchorTarget;\n};\n\nconst HoverableButtonLink = ({\n attributes,\n styles = { hover: {} },\n children,\n href = '#',\n target,\n}: Props): ReactElement => {\n const [hovered, setHovered] = useState(false);\n\n return (\n <a\n {...attributes}\n onMouseEnter={() => setHovered(true)}\n onMouseLeave={() => setHovered(false)}\n href={href}\n target={target}\n style={hovered ? { ...styles, ...styles.hover } : styles}\n >\n {children}\n </a>\n );\n};\n"],"names":["useButton","props","useElementProps","element","e","ButtonMarkupElementNode","href","target","buttonStyle","attributes","children","jsx","HoverableButtonLink","BlockButtonStyles","styles","hovered","setHovered","useState"],"mappings":";;;;AASA,MAAMA,IAAY,CAACC,OAUR;AAAA,EACH,GAVWC,EAAqC;AAAA,IAChD,GAAGD;AAAA,IACH,qBAAqB,CAACE,OAAa;AAAA,MAC/B,KAAKA,EAAQ;AAAA,MACb,aAAaA,EAAQ,eAAe;AAAA,MACpC,QAAQA,EAAQ,UAAU;AAAA,IAAA;AAAA,EAC9B,CACH;AAAA;AAAA,EAKG,aAAa,CAACC,MAAM;AAChB,IAAAA,EAAE,gBAAgB;AAAA,EACtB;AAAA,IAIKC,IAA0B,CAACJ,MAA2B;AAC/D,QAAM,EAAE,MAAAK,GAAM,QAAAC,GAAQ,aAAAC,EAAY,IAAIR,EAAUC,CAAK,GAC/C,EAAE,YAAAQ,GAAY,UAAAC,EAAa,IAAAT;AAG7B,SAAAU,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,YAAAH;AAAA,MACA,MAAAH;AAAA,MACA,QAAAC;AAAA,MACA,QAAQM,EAAkB,SAASL,EAAY,OAAO,CAAC,EAAE,YAAgB,IAAAA,EAAY,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"ButtonMarkupElementNode.es.js","sources":["../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/ButtonMarkupElement/ButtonMarkupElementNode.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { HTMLPropsAs, PlateRenderElementProps, Value, useElementProps } from '@udecode/plate';\nimport { CSSProperties, HTMLAttributeAnchorTarget, ReactElement, ReactNode, useState } from 'react';\nimport { RichTextButtonStyle, TButtonElement } from '../types';\nimport { BlockButtonStyles } from '../utils';\n\nexport type ButtonRootProps = PlateRenderElementProps<Value, TButtonElement> & HTMLPropsAs<'a'>;\n\nconst useButton = (props: ButtonRootProps): HTMLPropsAs<'a'> & { buttonStyle: RichTextButtonStyle } => {\n const _props = useElementProps<TButtonElement, 'a'>({\n ...props,\n elementToAttributes: (element) => ({\n url: element.href,\n buttonStyle: element.buttonStyle || 'primary',\n target: element.target || '_blank',\n }),\n });\n\n return {\n ...(_props as HTMLPropsAs<'a'> & { buttonStyle: RichTextButtonStyle }),\n // quick fix: hovering <a> with href loses the editor focus\n onMouseOver: (e) => {\n e.stopPropagation();\n },\n };\n};\n\nexport const ButtonMarkupElementNode = (props: ButtonRootProps) => {\n const { href, target, buttonStyle } = useButton(props);\n const { attributes, children } = props;\n\n return (\n <HoverableButtonLink\n attributes={attributes}\n href={href}\n target={target}\n styles={BlockButtonStyles[`button${buttonStyle.charAt(0).toUpperCase() + buttonStyle.slice(1)}`]}\n >\n {children}\n </HoverableButtonLink>\n );\n};\n\ntype Props = {\n attributes: ButtonRootProps['attributes'];\n children: ReactNode;\n styles?: CSSProperties & { hover?: CSSProperties };\n href?: string;\n target?: HTMLAttributeAnchorTarget;\n};\n\nconst HoverableButtonLink = ({\n attributes,\n styles = { hover: {} },\n children,\n href = '#',\n target,\n}: Props): ReactElement => {\n const [hovered, setHovered] = useState(false);\n\n return (\n <a\n {...attributes}\n onMouseEnter={() => setHovered(true)}\n onMouseLeave={() => setHovered(false)}\n href={href}\n target={target}\n style={hovered ? { ...styles, ...styles.hover } : styles}\n >\n {children}\n </a>\n );\n};\n"],"names":["useButton","props","useElementProps","element","e","ButtonMarkupElementNode","href","target","buttonStyle","attributes","children","jsx","HoverableButtonLink","BlockButtonStyles","styles","hovered","setHovered","useState"],"mappings":";;;;AASA,MAAMA,IAAY,CAACC,OAUR;AAAA,EACH,GAVWC,EAAqC;AAAA,IAChD,GAAGD;AAAA,IACH,qBAAqB,CAACE,OAAa;AAAA,MAC/B,KAAKA,EAAQ;AAAA,MACb,aAAaA,EAAQ,eAAe;AAAA,MACpC,QAAQA,EAAQ,UAAU;AAAA,IAAA;AAAA,EAC9B,CACH;AAAA;AAAA,EAKG,aAAa,CAACC,MAAM;AAChB,IAAAA,EAAE,gBAAgB;AAAA,EACtB;AAAA,IAIKC,IAA0B,CAACJ,MAA2B;AAC/D,QAAM,EAAE,MAAAK,GAAM,QAAAC,GAAQ,aAAAC,EAAY,IAAIR,EAAUC,CAAK,GAC/C,EAAE,YAAAQ,GAAY,UAAAC,EAAa,IAAAT;AAG7B,SAAAU,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,YAAAH;AAAA,MACA,MAAAH;AAAA,MACA,QAAAC;AAAA,MACA,QAAQM,EAAkB,SAASL,EAAY,OAAO,CAAC,EAAE,YAAgB,IAAAA,EAAY,MAAM,CAAC,CAAC,EAAE;AAAA,MAE9F,UAAAE;AAAA,IAAA;AAAA,EAAA;AAGb,GAUME,IAAsB,CAAC;AAAA,EACzB,YAAAH;AAAA,EACA,QAAAK,IAAS,EAAE,OAAO,GAAG;AAAA,EACrB,UAAAJ;AAAA,EACA,MAAAJ,IAAO;AAAA,EACP,QAAAC;AACJ,MAA2B;AACvB,QAAM,CAACQ,GAASC,CAAU,IAAIC,EAAS,EAAK;AAGxC,SAAAN,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGF;AAAA,MACJ,cAAc,MAAMO,EAAW,EAAI;AAAA,MACnC,cAAc,MAAMA,EAAW,EAAK;AAAA,MACpC,MAAAV;AAAA,MACA,QAAAC;AAAA,MACA,OAAOQ,IAAU,EAAE,GAAGD,GAAQ,GAAGA,EAAO,UAAUA;AAAA,MAEjD,UAAAJ;AAAA,IAAA;AAAA,EAAA;AAGb;"}
|
package/dist/components/RichTextEditor/plugins/ButtonPlugin/components/ButtonToolbarButton.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonToolbarButton.es.js","sources":["../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/ButtonToolbarButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { getButtonClassNames, getHotkeyByPlatform, getTooltip } from '@frontify/fondue';\nimport {\n BlockToolbarButtonProps,\n ToolbarButton,\n focusEditor,\n isRangeInSameBlock,\n someNode,\n useEditorRef,\n} from '@udecode/plate';\n\nimport { triggerFloatingButton } from '../utils';\n\nexport interface LinkToolbarButtonProps extends BlockToolbarButtonProps {\n /**\n * Default onMouseDown is getting the link url by calling this promise before inserting the image.\n */\n getLinkUrl?: (prevUrl: string | null) => Promise<string | null>;\n}\n\nexport const ButtonToolbarButton = ({ type, ...props }: LinkToolbarButtonProps) => {\n const editor = useEditorRef();\n const isEnabled = !!isRangeInSameBlock(editor, {\n at: editor.selection,\n });\n\n const isLink = !!editor?.selection && someNode(editor, { match: { type } });\n\n return (\n <ToolbarButton\n tooltip={getTooltip(\n isEnabled\n ? `Button\\n${getHotkeyByPlatform('Ctrl+Shift+K')}`\n : 'Buttons can only be set for a single text block.'
|
|
1
|
+
{"version":3,"file":"ButtonToolbarButton.es.js","sources":["../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/ButtonToolbarButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { getButtonClassNames, getHotkeyByPlatform, getTooltip } from '@frontify/fondue';\nimport {\n BlockToolbarButtonProps,\n ToolbarButton,\n focusEditor,\n isRangeInSameBlock,\n someNode,\n useEditorRef,\n} from '@udecode/plate';\n\nimport { triggerFloatingButton } from '../utils';\n\nexport interface LinkToolbarButtonProps extends BlockToolbarButtonProps {\n /**\n * Default onMouseDown is getting the link url by calling this promise before inserting the image.\n */\n getLinkUrl?: (prevUrl: string | null) => Promise<string | null>;\n}\n\nexport const ButtonToolbarButton = ({ type, ...props }: LinkToolbarButtonProps) => {\n const editor = useEditorRef();\n const isEnabled = !!isRangeInSameBlock(editor, {\n at: editor.selection,\n });\n\n const isLink = !!editor?.selection && someNode(editor, { match: { type } });\n\n return (\n <ToolbarButton\n tooltip={getTooltip(\n isEnabled\n ? `Button\\n${getHotkeyByPlatform('Ctrl+Shift+K')}`\n : 'Buttons can only be set for a single text block.',\n )}\n classNames={getButtonClassNames(isEnabled)}\n active={isLink}\n onMouseDown={async (event) => {\n if (!editor) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n\n focusEditor(editor, editor.selection ?? editor.prevSelection ?? undefined);\n\n setTimeout(() => {\n triggerFloatingButton(editor, { focused: true });\n }, 0);\n }}\n {...props}\n />\n );\n};\n"],"names":["ButtonToolbarButton","type","props","editor","useEditorRef","isEnabled","isRangeInSameBlock","isLink","someNode","jsx","ToolbarButton","getTooltip","getHotkeyByPlatform","getButtonClassNames","event","focusEditor","triggerFloatingButton"],"mappings":";;;;AAqBO,MAAMA,IAAsB,CAAC,EAAE,MAAAC,GAAM,GAAGC,QAAoC;AAC/E,QAAMC,IAASC,KACTC,IAAY,CAAC,CAACC,EAAmBH,GAAQ;AAAA,IAC3C,IAAIA,EAAO;AAAA,EAAA,CACd,GAEKI,IAAS,CAAC,EAACJ,KAAA,QAAAA,EAAQ,cAAaK,EAASL,GAAQ,EAAE,OAAO,EAAE,MAAAF,EAAK,EAAG,CAAA;AAGtE,SAAAQ,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,SAASC;AAAA,QACLN,IACM;AAAA,EAAWO,EAAoB,cAAc,CAAC,KAC9C;AAAA,MACV;AAAA,MACA,YAAYC,EAAoBR,CAAS;AAAA,MACzC,QAAQE;AAAA,MACR,aAAa,OAAOO,MAAU;AAC1B,QAAKX,MAILW,EAAM,eAAe,GACrBA,EAAM,gBAAgB,GAEtBC,EAAYZ,GAAQA,EAAO,aAAaA,EAAO,iBAAiB,MAAS,GAEzE,WAAW,MAAM;AACb,UAAAa,EAAsBb,GAAQ,EAAE,SAAS,GAAM,CAAA;AAAA,WAChD,CAAC;AAAA,MACR;AAAA,MACC,GAAGD;AAAA,IAAA;AAAA,EAAA;AAGhB;"}
|
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { createComponentAs as
|
|
3
|
-
import { triggerFloatingButtonEdit as
|
|
4
|
-
const
|
|
1
|
+
import { useCallback as n } from "react";
|
|
2
|
+
import { createComponentAs as r, createElementAs as e, useEditorRef as i } from "@udecode/plate";
|
|
3
|
+
import { triggerFloatingButtonEdit as u } from "../../utils/triggerFloatingButtonEdit.es.js";
|
|
4
|
+
const s = (o) => {
|
|
5
5
|
const t = i();
|
|
6
6
|
return {
|
|
7
|
-
onClick:
|
|
8
|
-
|
|
7
|
+
onClick: n(() => {
|
|
8
|
+
u(t);
|
|
9
9
|
}, [t]),
|
|
10
10
|
...o
|
|
11
11
|
};
|
|
12
|
-
},
|
|
13
|
-
const t =
|
|
12
|
+
}, a = r((o) => {
|
|
13
|
+
const t = s(o);
|
|
14
14
|
return e("button", t);
|
|
15
15
|
});
|
|
16
16
|
export {
|
|
17
|
-
|
|
18
|
-
|
|
17
|
+
a as FloatingButtonEditButton,
|
|
18
|
+
s as useFloatingButtonEditButton
|
|
19
19
|
};
|
|
20
20
|
//# sourceMappingURL=FloatingButtonEditButton.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FloatingButtonEditButton.es.js","sources":["../../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/FloatingButtonEditButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useCallback } from 'react';\nimport { AsProps, HTMLPropsAs, createComponentAs, createElementAs, useEditorRef } from '@udecode/plate';\nimport { triggerFloatingButtonEdit } from '../../utils/triggerFloatingButtonEdit';\n\nexport const useFloatingButtonEditButton = (props: HTMLPropsAs<'button'>): HTMLPropsAs<'button'> => {\n const editor = useEditorRef();\n\n return {\n onClick: useCallback(() => {\n triggerFloatingButtonEdit(editor);\n }, [editor]),\n ...props,\n };\n};\n\nexport const FloatingButtonEditButton = createComponentAs<AsProps<'button'>>((props) => {\n const htmlProps = useFloatingButtonEditButton(props);\n\n return createElementAs('button', htmlProps);\n});\n"],"names":["useFloatingButtonEditButton","props","editor","useEditorRef","useCallback","triggerFloatingButtonEdit","FloatingButtonEditButton","createComponentAs","htmlProps","createElementAs"],"mappings":";;;AAMa,MAAAA,IAA8B,CAACC,MAAwD;AAChG,QAAMC,IAASC;AAER,SAAA;AAAA,IACH,SAASC,
|
|
1
|
+
{"version":3,"file":"FloatingButtonEditButton.es.js","sources":["../../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/FloatingButtonEditButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useCallback } from 'react';\nimport { AsProps, HTMLPropsAs, createComponentAs, createElementAs, useEditorRef } from '@udecode/plate';\nimport { triggerFloatingButtonEdit } from '../../utils/triggerFloatingButtonEdit';\n\nexport const useFloatingButtonEditButton = (props: HTMLPropsAs<'button'>): HTMLPropsAs<'button'> => {\n const editor = useEditorRef();\n\n return {\n onClick: useCallback(() => {\n triggerFloatingButtonEdit(editor);\n }, [editor]),\n ...props,\n };\n};\n\nexport const FloatingButtonEditButton = createComponentAs<AsProps<'button'>>((props) => {\n const htmlProps = useFloatingButtonEditButton(props);\n\n return createElementAs('button', htmlProps);\n});\n"],"names":["useFloatingButtonEditButton","props","editor","useEditorRef","useCallback","triggerFloatingButtonEdit","FloatingButtonEditButton","createComponentAs","htmlProps","createElementAs"],"mappings":";;;AAMa,MAAAA,IAA8B,CAACC,MAAwD;AAChG,QAAMC,IAASC;AAER,SAAA;AAAA,IACH,SAASC,EAAY,MAAM;AACvB,MAAAC,EAA0BH,CAAM;AAAA,IAAA,GACjC,CAACA,CAAM,CAAC;AAAA,IACX,GAAGD;AAAA,EAAA;AAEX,GAEaK,IAA2BC,EAAqC,CAACN,MAAU;AAC9E,QAAAO,IAAYR,EAA4BC,CAAK;AAE5C,SAAAQ,EAAgB,UAAUD,CAAS;AAC9C,CAAC;"}
|
|
@@ -1,26 +1,26 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { mergeProps as
|
|
3
|
-
import { useFloatingButtonSelectors as
|
|
4
|
-
const
|
|
5
|
-
const u =
|
|
6
|
-
|
|
1
|
+
import { useRef as n, useEffect as l, useCallback as s } from "react";
|
|
2
|
+
import { mergeProps as f, useComposedRef as a } from "@udecode/plate";
|
|
3
|
+
import { useFloatingButtonSelectors as c, floatingButtonActions as i, floatingButtonSelectors as m } from "./floatingButtonStore.es.js";
|
|
4
|
+
const B = (o) => {
|
|
5
|
+
const u = c().updated(), e = n(null);
|
|
6
|
+
l(() => {
|
|
7
7
|
e.current && u && setTimeout(() => {
|
|
8
8
|
var t;
|
|
9
9
|
(t = e.current) == null || t.focus();
|
|
10
10
|
}, 0);
|
|
11
11
|
}, [u]);
|
|
12
|
-
const
|
|
13
|
-
|
|
12
|
+
const r = s((t) => {
|
|
13
|
+
i.url(t.target.value);
|
|
14
14
|
}, []);
|
|
15
|
-
return
|
|
15
|
+
return f(
|
|
16
16
|
{
|
|
17
|
-
onChange:
|
|
18
|
-
defaultValue:
|
|
17
|
+
onChange: r,
|
|
18
|
+
defaultValue: m.url()
|
|
19
19
|
},
|
|
20
|
-
{ ...
|
|
20
|
+
{ ...o, ref: a(o.ref, e) }
|
|
21
21
|
);
|
|
22
22
|
};
|
|
23
23
|
export {
|
|
24
|
-
|
|
24
|
+
B as useFloatingButtonUrlInput
|
|
25
25
|
};
|
|
26
26
|
//# sourceMappingURL=FloatingButtonUrlInput.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FloatingButtonUrlInput.es.js","sources":["../../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/FloatingButtonUrlInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ChangeEventHandler, useCallback, useEffect, useRef } from 'react';\nimport { HTMLPropsAs, mergeProps, useComposedRef } from '@udecode/plate';\nimport { floatingButtonActions, floatingButtonSelectors, useFloatingButtonSelectors } from './floatingButtonStore';\n\nexport const useFloatingButtonUrlInput = (props: HTMLPropsAs<'input'>): HTMLPropsAs<'input'> => {\n const updated = useFloatingButtonSelectors().updated();\n const ref = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (ref.current && updated) {\n setTimeout(() => {\n ref.current?.focus();\n }, 0);\n }\n }, [updated]);\n\n const onChange: ChangeEventHandler<HTMLInputElement> = useCallback((e) => {\n floatingButtonActions.url(e.target.value);\n }, []);\n\n return mergeProps(\n {\n onChange,\n defaultValue: floatingButtonSelectors.url(),\n },\n { ...props, ref: useComposedRef<HTMLInputElement>(props.ref, ref) }
|
|
1
|
+
{"version":3,"file":"FloatingButtonUrlInput.es.js","sources":["../../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/FloatingButtonUrlInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ChangeEventHandler, useCallback, useEffect, useRef } from 'react';\nimport { HTMLPropsAs, mergeProps, useComposedRef } from '@udecode/plate';\nimport { floatingButtonActions, floatingButtonSelectors, useFloatingButtonSelectors } from './floatingButtonStore';\n\nexport const useFloatingButtonUrlInput = (props: HTMLPropsAs<'input'>): HTMLPropsAs<'input'> => {\n const updated = useFloatingButtonSelectors().updated();\n const ref = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (ref.current && updated) {\n setTimeout(() => {\n ref.current?.focus();\n }, 0);\n }\n }, [updated]);\n\n const onChange: ChangeEventHandler<HTMLInputElement> = useCallback((e) => {\n floatingButtonActions.url(e.target.value);\n }, []);\n\n return mergeProps(\n {\n onChange,\n defaultValue: floatingButtonSelectors.url(),\n },\n { ...props, ref: useComposedRef<HTMLInputElement>(props.ref, ref) },\n );\n};\n"],"names":["useFloatingButtonUrlInput","props","updated","useFloatingButtonSelectors","ref","useRef","useEffect","_a","onChange","useCallback","e","floatingButtonActions","mergeProps","floatingButtonSelectors","useComposedRef"],"mappings":";;;AAMa,MAAAA,IAA4B,CAACC,MAAsD;AACtF,QAAAC,IAAUC,IAA6B,WACvCC,IAAMC,EAAyB,IAAI;AAEzC,EAAAC,EAAU,MAAM;AACR,IAAAF,EAAI,WAAWF,KACf,WAAW,MAAM;;AACb,OAAAK,IAAAH,EAAI,YAAJ,QAAAG,EAAa;AAAA,OACd,CAAC;AAAA,EACR,GACD,CAACL,CAAO,CAAC;AAEN,QAAAM,IAAiDC,EAAY,CAACC,MAAM;AAChD,IAAAC,EAAA,IAAID,EAAE,OAAO,KAAK;AAAA,EAC5C,GAAG,CAAE,CAAA;AAEE,SAAAE;AAAA,IACH;AAAA,MACI,UAAAJ;AAAA,MACA,cAAcK,EAAwB,IAAI;AAAA,IAC9C;AAAA,IACA,EAAE,GAAGZ,GAAO,KAAKa,EAAiCb,EAAM,KAAKG,CAAG,EAAE;AAAA,EAAA;AAE1E;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { j as e } from "../../../../../../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.es.js";
|
|
2
2
|
import { FormControl as d } from "@frontify/fondue";
|
|
3
|
-
import {
|
|
3
|
+
import { useState as m } from "react";
|
|
4
4
|
import { InsertModal as y } from "../../../../LinkPlugin/FloatingLink/InsertLinkModal/InsertModal.es.js";
|
|
5
5
|
import { useInsertModal as f } from "./useInsertModal.es.js";
|
|
6
6
|
import { BlockStyles as n } from "../../../../styles.es.js";
|
|
@@ -49,7 +49,7 @@ const j = () => {
|
|
|
49
49
|
}
|
|
50
50
|
) }) });
|
|
51
51
|
}, i = ({ id: r, styles: t, isActive: o, onClick: l, children: a }) => {
|
|
52
|
-
const [u, s] = m
|
|
52
|
+
const [u, s] = m(!1), c = () => t && t.hover && u ? { ...t, ...t.hover } : t;
|
|
53
53
|
return /* @__PURE__ */ e.jsx(
|
|
54
54
|
"button",
|
|
55
55
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InsertButtonModal.es.js","sources":["../../../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/InsertButtonModal/InsertButtonModal.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { FormControl } from '@frontify/fondue';\nimport { CSSProperties, ReactElement, ReactNode, useState } from 'react';\nimport { InsertModal } from '../../../../LinkPlugin/FloatingLink/InsertLinkModal/InsertModal';\nimport { useInsertModal } from './useInsertModal';\nimport { BlockStyles } from '../../../../styles';\n\nexport const InsertButtonModal = () => {\n const modalProps = useInsertModal();\n const { state, onButtonStyleChange } = modalProps;\n\n return (\n <InsertModal {...modalProps} testId=\"floating-button-insert\">\n <div className=\"tw-pt-5\">\n <FormControl\n label={{\n children: 'Button Style',\n htmlFor: 'buttonStyle',\n required: true,\n }}\n >\n <HoverableButton\n id=\"primary\"\n styles={BlockStyles.buttonPrimary}\n isActive={state.buttonStyle === 'primary'}\n onClick={() => onButtonStyleChange('primary')}\n >\n {state.text || 'Primary Button'}\n </HoverableButton>\n\n <HoverableButton\n id=\"secondary\"\n styles={BlockStyles.buttonSecondary}\n isActive={state.buttonStyle === 'secondary'}\n onClick={() => onButtonStyleChange('secondary')}\n >\n {state.text || 'Secondary Button'}\n </HoverableButton>\n\n <HoverableButton\n id=\"tertiary\"\n styles={BlockStyles.buttonTertiary}\n isActive={state.buttonStyle === 'tertiary'}\n onClick={() => onButtonStyleChange('tertiary')}\n >\n {state.text || 'Tertiary Button'}\n </HoverableButton>\n </FormControl>\n </div>\n </InsertModal>\n );\n};\n\ntype Props = {\n id: string;\n styles?: CSSProperties & { hover?: CSSProperties };\n isActive: boolean;\n onClick: () => void;\n children: ReactNode;\n};\n\nconst HoverableButton = ({ id, styles, isActive, onClick, children }: Props): ReactElement => {\n const [hovered, setHovered] = useState(false);\n const getStyles = () => (styles && styles.hover && hovered ? { ...styles, ...styles.hover } : styles);\n\n return (\n <button\n data-test-id={`floating-button-insert-${id}`}\n onMouseEnter={() => setHovered(true)}\n onMouseLeave={() => setHovered(false)}\n onClick={onClick}\n style={getStyles()}\n className={\n isActive ? 'tw-outline tw-outline-1 tw-outline-violet-60 tw-outline-offset-2 tw-w-fit' : 'tw-w-fit'\n }\n >\n {children}\n </button>\n );\n};\n"],"names":["InsertButtonModal","modalProps","useInsertModal","state","onButtonStyleChange","jsx","InsertModal","jsxs","FormControl","HoverableButton","BlockStyles","id","styles","isActive","onClick","children","hovered","setHovered","useState","getStyles"],"mappings":";;;;;;AAQO,MAAMA,IAAoB,MAAM;AACnC,QAAMC,IAAaC,KACb,EAAE,OAAAC,GAAO,qBAAAC,EAAwB,IAAAH;AAGnC,SAAAI,gBAAAA,EAAA,IAACC,KAAa,GAAGL,GAAY,QAAO,0BAChC,UAAAI,gBAAAA,EAAAA,IAAC,OAAI,EAAA,WAAU,WACX,UAAAE,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,OAAO;AAAA,QACH,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,MACd;AAAA,MAEA,UAAA;AAAA,QAAAH,gBAAAA,EAAA;AAAA,UAACI;AAAA,UAAA;AAAA,YACG,IAAG;AAAA,YACH,QAAQC,EAAY;AAAA,YACpB,UAAUP,EAAM,gBAAgB;AAAA,YAChC,SAAS,MAAMC,EAAoB,SAAS;AAAA,YAE3C,YAAM,QAAQ;AAAA,UAAA;AAAA,QACnB;AAAA,QAEAC,gBAAAA,EAAA;AAAA,UAACI;AAAA,UAAA;AAAA,YACG,IAAG;AAAA,YACH,QAAQC,EAAY;AAAA,YACpB,UAAUP,EAAM,gBAAgB;AAAA,YAChC,SAAS,MAAMC,EAAoB,WAAW;AAAA,YAE7C,YAAM,QAAQ;AAAA,UAAA;AAAA,QACnB;AAAA,QAEAC,gBAAAA,EAAA;AAAA,UAACI;AAAA,UAAA;AAAA,YACG,IAAG;AAAA,YACH,QAAQC,EAAY;AAAA,YACpB,UAAUP,EAAM,gBAAgB;AAAA,YAChC,SAAS,MAAMC,EAAoB,UAAU;AAAA,YAE5C,YAAM,QAAQ;AAAA,UAAA;AAAA,QACnB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,EAER,CAAA,EACJ,CAAA;AAER,GAUMK,IAAkB,CAAC,EAAE,IAAAE,GAAI,QAAAC,GAAQ,UAAAC,GAAU,SAAAC,GAAS,UAAAC,QAAoC;AAC1F,QAAM,CAACC,GAASC,CAAU,IAAIC,
|
|
1
|
+
{"version":3,"file":"InsertButtonModal.es.js","sources":["../../../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/InsertButtonModal/InsertButtonModal.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { FormControl } from '@frontify/fondue';\nimport { CSSProperties, ReactElement, ReactNode, useState } from 'react';\nimport { InsertModal } from '../../../../LinkPlugin/FloatingLink/InsertLinkModal/InsertModal';\nimport { useInsertModal } from './useInsertModal';\nimport { BlockStyles } from '../../../../styles';\n\nexport const InsertButtonModal = () => {\n const modalProps = useInsertModal();\n const { state, onButtonStyleChange } = modalProps;\n\n return (\n <InsertModal {...modalProps} testId=\"floating-button-insert\">\n <div className=\"tw-pt-5\">\n <FormControl\n label={{\n children: 'Button Style',\n htmlFor: 'buttonStyle',\n required: true,\n }}\n >\n <HoverableButton\n id=\"primary\"\n styles={BlockStyles.buttonPrimary}\n isActive={state.buttonStyle === 'primary'}\n onClick={() => onButtonStyleChange('primary')}\n >\n {state.text || 'Primary Button'}\n </HoverableButton>\n\n <HoverableButton\n id=\"secondary\"\n styles={BlockStyles.buttonSecondary}\n isActive={state.buttonStyle === 'secondary'}\n onClick={() => onButtonStyleChange('secondary')}\n >\n {state.text || 'Secondary Button'}\n </HoverableButton>\n\n <HoverableButton\n id=\"tertiary\"\n styles={BlockStyles.buttonTertiary}\n isActive={state.buttonStyle === 'tertiary'}\n onClick={() => onButtonStyleChange('tertiary')}\n >\n {state.text || 'Tertiary Button'}\n </HoverableButton>\n </FormControl>\n </div>\n </InsertModal>\n );\n};\n\ntype Props = {\n id: string;\n styles?: CSSProperties & { hover?: CSSProperties };\n isActive: boolean;\n onClick: () => void;\n children: ReactNode;\n};\n\nconst HoverableButton = ({ id, styles, isActive, onClick, children }: Props): ReactElement => {\n const [hovered, setHovered] = useState(false);\n const getStyles = () => (styles && styles.hover && hovered ? { ...styles, ...styles.hover } : styles);\n\n return (\n <button\n data-test-id={`floating-button-insert-${id}`}\n onMouseEnter={() => setHovered(true)}\n onMouseLeave={() => setHovered(false)}\n onClick={onClick}\n style={getStyles()}\n className={\n isActive ? 'tw-outline tw-outline-1 tw-outline-violet-60 tw-outline-offset-2 tw-w-fit' : 'tw-w-fit'\n }\n >\n {children}\n </button>\n );\n};\n"],"names":["InsertButtonModal","modalProps","useInsertModal","state","onButtonStyleChange","jsx","InsertModal","jsxs","FormControl","HoverableButton","BlockStyles","id","styles","isActive","onClick","children","hovered","setHovered","useState","getStyles"],"mappings":";;;;;;AAQO,MAAMA,IAAoB,MAAM;AACnC,QAAMC,IAAaC,KACb,EAAE,OAAAC,GAAO,qBAAAC,EAAwB,IAAAH;AAGnC,SAAAI,gBAAAA,EAAA,IAACC,KAAa,GAAGL,GAAY,QAAO,0BAChC,UAAAI,gBAAAA,EAAAA,IAAC,OAAI,EAAA,WAAU,WACX,UAAAE,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,OAAO;AAAA,QACH,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,MACd;AAAA,MAEA,UAAA;AAAA,QAAAH,gBAAAA,EAAA;AAAA,UAACI;AAAA,UAAA;AAAA,YACG,IAAG;AAAA,YACH,QAAQC,EAAY;AAAA,YACpB,UAAUP,EAAM,gBAAgB;AAAA,YAChC,SAAS,MAAMC,EAAoB,SAAS;AAAA,YAE3C,YAAM,QAAQ;AAAA,UAAA;AAAA,QACnB;AAAA,QAEAC,gBAAAA,EAAA;AAAA,UAACI;AAAA,UAAA;AAAA,YACG,IAAG;AAAA,YACH,QAAQC,EAAY;AAAA,YACpB,UAAUP,EAAM,gBAAgB;AAAA,YAChC,SAAS,MAAMC,EAAoB,WAAW;AAAA,YAE7C,YAAM,QAAQ;AAAA,UAAA;AAAA,QACnB;AAAA,QAEAC,gBAAAA,EAAA;AAAA,UAACI;AAAA,UAAA;AAAA,YACG,IAAG;AAAA,YACH,QAAQC,EAAY;AAAA,YACpB,UAAUP,EAAM,gBAAgB;AAAA,YAChC,SAAS,MAAMC,EAAoB,UAAU;AAAA,YAE5C,YAAM,QAAQ;AAAA,UAAA;AAAA,QACnB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,EAER,CAAA,EACJ,CAAA;AAER,GAUMK,IAAkB,CAAC,EAAE,IAAAE,GAAI,QAAAC,GAAQ,UAAAC,GAAU,SAAAC,GAAS,UAAAC,QAAoC;AAC1F,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtCC,IAAY,MAAOP,KAAUA,EAAO,SAASI,IAAU,EAAE,GAAGJ,GAAQ,GAAGA,EAAO,MAAA,IAAUA;AAG1F,SAAAP,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,gBAAc,0BAA0BM,CAAE;AAAA,MAC1C,cAAc,MAAMM,EAAW,EAAI;AAAA,MACnC,cAAc,MAAMA,EAAW,EAAK;AAAA,MACpC,SAAAH;AAAA,MACA,OAAOK,EAAU;AAAA,MACjB,WACIN,IAAW,8EAA8E;AAAA,MAG5F,UAAAE;AAAA,IAAA;AAAA,EAAA;AAGb;"}
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { useEditorRef as
|
|
1
|
+
import { useEffect as S, useReducer as b } from "react";
|
|
2
|
+
import { useEditorRef as h, getPluginOptions as E, useHotkeys as g } from "@udecode/plate";
|
|
3
3
|
import { floatingButtonSelectors as u, floatingButtonActions as a } from "../floatingButtonStore.es.js";
|
|
4
|
-
import { ELEMENT_BUTTON as
|
|
5
|
-
import { submitFloatingButton as
|
|
4
|
+
import { ELEMENT_BUTTON as B } from "../../../createButtonPlugin.es.js";
|
|
5
|
+
import { submitFloatingButton as U } from "../../../transforms/submitFloatingButton.es.js";
|
|
6
6
|
import { getButtonStyle as x } from "../../../utils/getButtonStyle.es.js";
|
|
7
7
|
import { CheckboxState as r } from "@frontify/fondue";
|
|
8
|
-
import { isValidUrlOrEmpty as
|
|
9
|
-
import { addHttps as
|
|
10
|
-
const
|
|
8
|
+
import { isValidUrlOrEmpty as p } from "../../../../LinkPlugin/utils/url.es.js";
|
|
9
|
+
import { addHttps as N } from "../../../../../../../helpers/addHttps.es.js";
|
|
10
|
+
const k = {
|
|
11
11
|
url: "",
|
|
12
12
|
text: "",
|
|
13
13
|
buttonStyle: "primary",
|
|
14
14
|
newTab: r.Unchecked
|
|
15
|
-
},
|
|
16
|
-
const [n, o] =
|
|
15
|
+
}, w = () => {
|
|
16
|
+
const [n, o] = b((e, s) => {
|
|
17
17
|
const { type: c, payload: l } = s;
|
|
18
18
|
switch (c) {
|
|
19
19
|
case "NEW_TAB":
|
|
@@ -37,11 +37,11 @@ const N = {
|
|
|
37
37
|
default:
|
|
38
38
|
return e;
|
|
39
39
|
}
|
|
40
|
-
},
|
|
40
|
+
}, k);
|
|
41
41
|
return [n, o];
|
|
42
|
-
},
|
|
43
|
-
const n =
|
|
44
|
-
|
|
42
|
+
}, H = () => {
|
|
43
|
+
const n = h(), [o, e] = w();
|
|
44
|
+
S(() => {
|
|
45
45
|
const t = x(n);
|
|
46
46
|
e({
|
|
47
47
|
type: "INIT",
|
|
@@ -68,19 +68,19 @@ const N = {
|
|
|
68
68
|
type: "URL",
|
|
69
69
|
payload: { url: t }
|
|
70
70
|
});
|
|
71
|
-
},
|
|
71
|
+
}, d = (t) => {
|
|
72
72
|
e(t ? { type: "NEW_TAB" } : { type: "SAME_TAB" });
|
|
73
|
-
},
|
|
73
|
+
}, m = () => {
|
|
74
74
|
a.hide();
|
|
75
|
-
},
|
|
76
|
-
if (!
|
|
75
|
+
}, T = (t) => {
|
|
76
|
+
if (!p(o.url) || !i)
|
|
77
77
|
return;
|
|
78
|
-
const
|
|
79
|
-
a.text(o.text), a.url(
|
|
80
|
-
},
|
|
81
|
-
return
|
|
78
|
+
const f = N(o.url);
|
|
79
|
+
a.text(o.text), a.url(f), a.buttonStyle(o.buttonStyle), a.newTab(o.newTab === r.Checked), U(n) && (t == null || t.preventDefault());
|
|
80
|
+
}, i = o.url !== "" && o.text !== "", { appBridge: y } = E(n, B);
|
|
81
|
+
return g(
|
|
82
82
|
"enter",
|
|
83
|
-
|
|
83
|
+
T,
|
|
84
84
|
{
|
|
85
85
|
enableOnFormTags: ["INPUT"]
|
|
86
86
|
},
|
|
@@ -90,16 +90,16 @@ const N = {
|
|
|
90
90
|
onTextChange: s,
|
|
91
91
|
onButtonStyleChange: c,
|
|
92
92
|
onUrlChange: l,
|
|
93
|
-
onToggleTab:
|
|
94
|
-
onCancel:
|
|
95
|
-
onSave:
|
|
96
|
-
hasValues:
|
|
97
|
-
isValidUrlOrEmpty:
|
|
98
|
-
appBridge:
|
|
93
|
+
onToggleTab: d,
|
|
94
|
+
onCancel: m,
|
|
95
|
+
onSave: T,
|
|
96
|
+
hasValues: i,
|
|
97
|
+
isValidUrlOrEmpty: p,
|
|
98
|
+
appBridge: y
|
|
99
99
|
};
|
|
100
100
|
};
|
|
101
101
|
export {
|
|
102
|
-
|
|
103
|
-
|
|
102
|
+
w as InsertModalState,
|
|
103
|
+
H as useInsertModal
|
|
104
104
|
};
|
|
105
105
|
//# sourceMappingURL=useInsertModal.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useInsertModal.es.js","sources":["../../../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/InsertButtonModal/useInsertModal.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Dispatch, Reducer, useEffect, useReducer } from 'react';\nimport { getPluginOptions, useEditorRef, useHotkeys } from '@udecode/plate';\nimport { InsertModalDispatchType, InsertModalStateProps } from './types';\nimport { floatingButtonActions, floatingButtonSelectors } from '../floatingButtonStore';\nimport { ELEMENT_BUTTON } from '../../../createButtonPlugin';\nimport { submitFloatingButton } from '../../../transforms/submitFloatingButton';\nimport { RichTextButtonStyle } from '../../../types';\nimport { getButtonStyle } from '../../../utils/getButtonStyle';\nimport { AppBridgeBlock } from '@frontify/app-bridge';\nimport { CheckboxState } from '@frontify/fondue';\nimport { addHttps } from '../../../../../../../helpers';\nimport { isValidUrlOrEmpty } from '../../../../LinkPlugin/utils/url';\n\nconst initialState: InsertModalStateProps = {\n url: '',\n text: '',\n buttonStyle: 'primary',\n newTab: CheckboxState.Unchecked,\n};\n\nexport const InsertModalState = (): [InsertModalStateProps, Dispatch<InsertModalDispatchType>] => {\n const [state, dispatch] = useReducer<Reducer<InsertModalStateProps, InsertModalDispatchType>>((state, action) => {\n const { type, payload } = action;\n\n switch (type) {\n case 'NEW_TAB':\n return {\n ...state,\n newTab: CheckboxState.Checked,\n };\n case 'SAME_TAB':\n return {\n ...state,\n newTab: CheckboxState.Unchecked,\n };\n case 'URL':\n case 'TEXT':\n case 'BUTTON_STYLE':\n case 'INIT':\n return {\n ...state,\n ...payload,\n };\n default:\n return state;\n }\n }, initialState);\n\n return [state, dispatch];\n};\n\nexport const useInsertModal = () => {\n const editor = useEditorRef();\n const [state, dispatch] = InsertModalState();\n\n useEffect(() => {\n const buttonStyle = getButtonStyle(editor);\n\n dispatch({\n type: 'INIT',\n payload: {\n text: floatingButtonSelectors.text(),\n buttonStyle,\n newTab: floatingButtonSelectors.newTab() ? CheckboxState.Checked : CheckboxState.Unchecked,\n url: floatingButtonSelectors.url(),\n },\n });\n }, [dispatch, editor]);\n\n const onTextChange = (value: string) => {\n dispatch({\n type: 'TEXT',\n payload: { text: value },\n });\n };\n\n const onButtonStyleChange = (value: RichTextButtonStyle) => {\n dispatch({\n type: 'BUTTON_STYLE',\n payload: { buttonStyle: value },\n });\n };\n\n const onUrlChange = (value: string) => {\n dispatch({\n type: 'URL',\n payload: { url: value },\n });\n };\n\n const onToggleTab = (checked: boolean) => {\n checked ? dispatch({ type: 'NEW_TAB' }) : dispatch({ type: 'SAME_TAB' });\n };\n\n const onCancel = () => {\n floatingButtonActions.hide();\n };\n\n const onSave = (event: React.MouseEvent<HTMLButtonElement, MouseEvent> | KeyboardEvent | undefined) => {\n if (!isValidUrlOrEmpty(state.url) || !hasValues) {\n return;\n }\n\n const urlToSave = addHttps(state.url);\n\n floatingButtonActions.text(state.text);\n floatingButtonActions.url(urlToSave);\n floatingButtonActions.buttonStyle(state.buttonStyle);\n floatingButtonActions.newTab(state.newTab === CheckboxState.Checked);\n\n if (submitFloatingButton(editor)) {\n event?.preventDefault();\n }\n };\n\n const hasValues = state.url !== '' && state.text !== '';\n\n const { appBridge } = getPluginOptions<{ appBridge: AppBridgeBlock }>(editor, ELEMENT_BUTTON);\n\n useHotkeys(\n 'enter',\n onSave,\n {\n enableOnFormTags: ['INPUT'],\n },\n []
|
|
1
|
+
{"version":3,"file":"useInsertModal.es.js","sources":["../../../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/InsertButtonModal/useInsertModal.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Dispatch, Reducer, useEffect, useReducer } from 'react';\nimport { getPluginOptions, useEditorRef, useHotkeys } from '@udecode/plate';\nimport { InsertModalDispatchType, InsertModalStateProps } from './types';\nimport { floatingButtonActions, floatingButtonSelectors } from '../floatingButtonStore';\nimport { ELEMENT_BUTTON } from '../../../createButtonPlugin';\nimport { submitFloatingButton } from '../../../transforms/submitFloatingButton';\nimport { RichTextButtonStyle } from '../../../types';\nimport { getButtonStyle } from '../../../utils/getButtonStyle';\nimport { AppBridgeBlock } from '@frontify/app-bridge';\nimport { CheckboxState } from '@frontify/fondue';\nimport { addHttps } from '../../../../../../../helpers';\nimport { isValidUrlOrEmpty } from '../../../../LinkPlugin/utils/url';\n\nconst initialState: InsertModalStateProps = {\n url: '',\n text: '',\n buttonStyle: 'primary',\n newTab: CheckboxState.Unchecked,\n};\n\nexport const InsertModalState = (): [InsertModalStateProps, Dispatch<InsertModalDispatchType>] => {\n const [state, dispatch] = useReducer<Reducer<InsertModalStateProps, InsertModalDispatchType>>((state, action) => {\n const { type, payload } = action;\n\n switch (type) {\n case 'NEW_TAB':\n return {\n ...state,\n newTab: CheckboxState.Checked,\n };\n case 'SAME_TAB':\n return {\n ...state,\n newTab: CheckboxState.Unchecked,\n };\n case 'URL':\n case 'TEXT':\n case 'BUTTON_STYLE':\n case 'INIT':\n return {\n ...state,\n ...payload,\n };\n default:\n return state;\n }\n }, initialState);\n\n return [state, dispatch];\n};\n\nexport const useInsertModal = () => {\n const editor = useEditorRef();\n const [state, dispatch] = InsertModalState();\n\n useEffect(() => {\n const buttonStyle = getButtonStyle(editor);\n\n dispatch({\n type: 'INIT',\n payload: {\n text: floatingButtonSelectors.text(),\n buttonStyle,\n newTab: floatingButtonSelectors.newTab() ? CheckboxState.Checked : CheckboxState.Unchecked,\n url: floatingButtonSelectors.url(),\n },\n });\n }, [dispatch, editor]);\n\n const onTextChange = (value: string) => {\n dispatch({\n type: 'TEXT',\n payload: { text: value },\n });\n };\n\n const onButtonStyleChange = (value: RichTextButtonStyle) => {\n dispatch({\n type: 'BUTTON_STYLE',\n payload: { buttonStyle: value },\n });\n };\n\n const onUrlChange = (value: string) => {\n dispatch({\n type: 'URL',\n payload: { url: value },\n });\n };\n\n const onToggleTab = (checked: boolean) => {\n checked ? dispatch({ type: 'NEW_TAB' }) : dispatch({ type: 'SAME_TAB' });\n };\n\n const onCancel = () => {\n floatingButtonActions.hide();\n };\n\n const onSave = (event: React.MouseEvent<HTMLButtonElement, MouseEvent> | KeyboardEvent | undefined) => {\n if (!isValidUrlOrEmpty(state.url) || !hasValues) {\n return;\n }\n\n const urlToSave = addHttps(state.url);\n\n floatingButtonActions.text(state.text);\n floatingButtonActions.url(urlToSave);\n floatingButtonActions.buttonStyle(state.buttonStyle);\n floatingButtonActions.newTab(state.newTab === CheckboxState.Checked);\n\n if (submitFloatingButton(editor)) {\n event?.preventDefault();\n }\n };\n\n const hasValues = state.url !== '' && state.text !== '';\n\n const { appBridge } = getPluginOptions<{ appBridge: AppBridgeBlock }>(editor, ELEMENT_BUTTON);\n\n useHotkeys(\n 'enter',\n onSave,\n {\n enableOnFormTags: ['INPUT'],\n },\n [],\n );\n\n return {\n state,\n onTextChange,\n onButtonStyleChange,\n onUrlChange,\n onToggleTab,\n onCancel,\n onSave,\n hasValues,\n isValidUrlOrEmpty,\n appBridge,\n };\n};\n"],"names":["initialState","CheckboxState","InsertModalState","state","dispatch","useReducer","action","type","payload","useInsertModal","editor","useEditorRef","useEffect","buttonStyle","getButtonStyle","floatingButtonSelectors","onTextChange","value","onButtonStyleChange","onUrlChange","onToggleTab","checked","onCancel","floatingButtonActions","onSave","event","isValidUrlOrEmpty","hasValues","urlToSave","addHttps","submitFloatingButton","appBridge","getPluginOptions","ELEMENT_BUTTON","useHotkeys"],"mappings":";;;;;;;;;AAeA,MAAMA,IAAsC;AAAA,EACxC,KAAK;AAAA,EACL,MAAM;AAAA,EACN,aAAa;AAAA,EACb,QAAQC,EAAc;AAC1B,GAEaC,IAAmB,MAAkE;AAC9F,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAoE,CAACF,GAAOG,MAAW;AACvG,UAAA,EAAE,MAAAC,GAAM,SAAAC,EAAY,IAAAF;AAE1B,YAAQC,GAAM;AAAA,MACV,KAAK;AACM,eAAA;AAAA,UACH,GAAGJ;AAAAA,UACH,QAAQF,EAAc;AAAA,QAAA;AAAA,MAE9B,KAAK;AACM,eAAA;AAAA,UACH,GAAGE;AAAAA,UACH,QAAQF,EAAc;AAAA,QAAA;AAAA,MAE9B,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AACM,eAAA;AAAA,UACH,GAAGE;AAAAA,UACH,GAAGK;AAAA,QAAA;AAAA,MAEX;AACWL,eAAAA;AAAAA,IACf;AAAA,KACDH,CAAY;AAER,SAAA,CAACG,GAAOC,CAAQ;AAC3B,GAEaK,IAAiB,MAAM;AAChC,QAAMC,IAASC,KACT,CAACR,GAAOC,CAAQ,IAAIF,EAAiB;AAE3C,EAAAU,EAAU,MAAM;AACN,UAAAC,IAAcC,EAAeJ,CAAM;AAEhC,IAAAN,EAAA;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,QACL,MAAMW,EAAwB,KAAK;AAAA,QACnC,aAAAF;AAAA,QACA,QAAQE,EAAwB,OAAA,IAAWd,EAAc,UAAUA,EAAc;AAAA,QACjF,KAAKc,EAAwB,IAAI;AAAA,MACrC;AAAA,IAAA,CACH;AAAA,EAAA,GACF,CAACX,GAAUM,CAAM,CAAC;AAEf,QAAAM,IAAe,CAACC,MAAkB;AAC3B,IAAAb,EAAA;AAAA,MACL,MAAM;AAAA,MACN,SAAS,EAAE,MAAMa,EAAM;AAAA,IAAA,CAC1B;AAAA,EAAA,GAGCC,IAAsB,CAACD,MAA+B;AAC/C,IAAAb,EAAA;AAAA,MACL,MAAM;AAAA,MACN,SAAS,EAAE,aAAaa,EAAM;AAAA,IAAA,CACjC;AAAA,EAAA,GAGCE,IAAc,CAACF,MAAkB;AAC1B,IAAAb,EAAA;AAAA,MACL,MAAM;AAAA,MACN,SAAS,EAAE,KAAKa,EAAM;AAAA,IAAA,CACzB;AAAA,EAAA,GAGCG,IAAc,CAACC,MAAqB;AAC5B,IAAAjB,EAAAiB,IAAS,EAAE,MAAM,UAAU,IAAc,EAAE,MAAM,WAAA,CAArB;AAAA,EAAiC,GAGrEC,IAAW,MAAM;AACnB,IAAAC,EAAsB,KAAK;AAAA,EAAA,GAGzBC,IAAS,CAACC,MAAuF;AACnG,QAAI,CAACC,EAAkBvB,EAAM,GAAG,KAAK,CAACwB;AAClC;AAGE,UAAAC,IAAYC,EAAS1B,EAAM,GAAG;AAEd,IAAAoB,EAAA,KAAKpB,EAAM,IAAI,GACrCoB,EAAsB,IAAIK,CAAS,GACbL,EAAA,YAAYpB,EAAM,WAAW,GACnDoB,EAAsB,OAAOpB,EAAM,WAAWF,EAAc,OAAO,GAE/D6B,EAAqBpB,CAAM,MAC3Be,KAAA,QAAAA,EAAO;AAAA,EACX,GAGEE,IAAYxB,EAAM,QAAQ,MAAMA,EAAM,SAAS,IAE/C,EAAE,WAAA4B,EAAc,IAAAC,EAAgDtB,GAAQuB,CAAc;AAE5F,SAAAC;AAAA,IACI;AAAA,IACAV;AAAA,IACA;AAAA,MACI,kBAAkB,CAAC,OAAO;AAAA,IAC9B;AAAA,IACA,CAAC;AAAA,EAAA,GAGE;AAAA,IACH,OAAArB;AAAA,IACA,cAAAa;AAAA,IACA,qBAAAE;AAAA,IACA,aAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAE;AAAA,IACA,QAAAE;AAAA,IACA,WAAAG;AAAA,IACA,mBAAAD;AAAA,IACA,WAAAK;AAAA,EAAA;AAER;"}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { createComponentAs as
|
|
3
|
-
import { unwrapButton as
|
|
1
|
+
import { useCallback as n } from "react";
|
|
2
|
+
import { createComponentAs as r, createElementAs as e, Button as s, useEditorRef as i, focusEditor as u } from "@udecode/plate";
|
|
3
|
+
import { unwrapButton as c } from "../../transforms/unwrapButton.es.js";
|
|
4
4
|
const m = (o) => {
|
|
5
|
-
const t =
|
|
5
|
+
const t = i();
|
|
6
6
|
return {
|
|
7
|
-
onClick:
|
|
8
|
-
|
|
7
|
+
onClick: n(() => {
|
|
8
|
+
c(t), u(t, t.selection ?? void 0);
|
|
9
9
|
}, [t]),
|
|
10
10
|
...o
|
|
11
11
|
};
|
|
12
|
-
}, f =
|
|
12
|
+
}, f = r((o) => {
|
|
13
13
|
const t = m(o);
|
|
14
14
|
return e(s, t);
|
|
15
15
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UnlinkButton.es.js","sources":["../../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/UnlinkButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useCallback } from 'react';\nimport {\n AsProps,\n Button,\n HTMLPropsAs,\n createComponentAs,\n createElementAs,\n focusEditor,\n useEditorRef,\n} from '@udecode/plate';\nimport { unwrapButton } from '../../transforms/index';\n\nexport const useUnlinkButton = (props: HTMLPropsAs<'button'>): HTMLPropsAs<'button'> => {\n const editor = useEditorRef();\n\n return {\n onClick: useCallback(() => {\n unwrapButton(editor);\n focusEditor(editor, editor.selection ?? undefined);\n }, [editor]),\n ...props,\n };\n};\n\nexport const UnlinkButton = createComponentAs<AsProps<'button'>>((props) => {\n const htmlProps = useUnlinkButton(props);\n\n return createElementAs(Button, htmlProps);\n});\n"],"names":["useUnlinkButton","props","editor","useEditorRef","useCallback","unwrapButton","focusEditor","UnlinkButton","createComponentAs","htmlProps","createElementAs","Button"],"mappings":";;;AAca,MAAAA,IAAkB,CAACC,MAAwD;AACpF,QAAMC,IAASC;AAER,SAAA;AAAA,IACH,SAASC,
|
|
1
|
+
{"version":3,"file":"UnlinkButton.es.js","sources":["../../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/UnlinkButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useCallback } from 'react';\nimport {\n AsProps,\n Button,\n HTMLPropsAs,\n createComponentAs,\n createElementAs,\n focusEditor,\n useEditorRef,\n} from '@udecode/plate';\nimport { unwrapButton } from '../../transforms/index';\n\nexport const useUnlinkButton = (props: HTMLPropsAs<'button'>): HTMLPropsAs<'button'> => {\n const editor = useEditorRef();\n\n return {\n onClick: useCallback(() => {\n unwrapButton(editor);\n focusEditor(editor, editor.selection ?? undefined);\n }, [editor]),\n ...props,\n };\n};\n\nexport const UnlinkButton = createComponentAs<AsProps<'button'>>((props) => {\n const htmlProps = useUnlinkButton(props);\n\n return createElementAs(Button, htmlProps);\n});\n"],"names":["useUnlinkButton","props","editor","useEditorRef","useCallback","unwrapButton","focusEditor","UnlinkButton","createComponentAs","htmlProps","createElementAs","Button"],"mappings":";;;AAca,MAAAA,IAAkB,CAACC,MAAwD;AACpF,QAAMC,IAASC;AAER,SAAA;AAAA,IACH,SAASC,EAAY,MAAM;AACvB,MAAAC,EAAaH,CAAM,GACPI,EAAAJ,GAAQA,EAAO,aAAa,MAAS;AAAA,IAAA,GAClD,CAACA,CAAM,CAAC;AAAA,IACX,GAAGD;AAAA,EAAA;AAEX,GAEaM,IAAeC,EAAqC,CAACP,MAAU;AAClE,QAAAQ,IAAYT,EAAgBC,CAAK;AAEhC,SAAAS,EAAgBC,GAAQF,CAAS;AAC5C,CAAC;"}
|
|
@@ -1,58 +1,58 @@
|
|
|
1
|
-
import { useEditorRef as
|
|
2
|
-
import {
|
|
1
|
+
import { useEditorRef as F, usePlateSelectors as h, getPluginOptions as C, getAboveNode as R, getPluginType as u, getRangeBoundingClientRect as k, getStartPoint as O, getEndPoint as P, getDefaultBoundingClientRect as b, someNode as N, useHotkeys as S, useComposedRef as T } from "@udecode/plate";
|
|
2
|
+
import { useCallback as v, useEffect as x } from "react";
|
|
3
3
|
import { ELEMENT_BUTTON as o } from "../../createButtonPlugin.es.js";
|
|
4
|
-
import { triggerFloatingButtonEdit as
|
|
5
|
-
import { useFloatingButtonSelectors as
|
|
6
|
-
import { useVirtualFloatingButton as
|
|
7
|
-
import { getUrlFromEditor as
|
|
8
|
-
import { useFloatingButtonEnter as
|
|
9
|
-
import { useFloatingButtonEscape as
|
|
10
|
-
const
|
|
11
|
-
const t =
|
|
12
|
-
const e =
|
|
4
|
+
import { triggerFloatingButtonEdit as A } from "../../utils/triggerFloatingButtonEdit.es.js";
|
|
5
|
+
import { useFloatingButtonSelectors as l, floatingButtonActions as n, floatingButtonSelectors as d } from "./floatingButtonStore.es.js";
|
|
6
|
+
import { useVirtualFloatingButton as D } from "./useVirtualFloatingButton.es.js";
|
|
7
|
+
import { getUrlFromEditor as H } from "../../utils/getUrl.es.js";
|
|
8
|
+
import { useFloatingButtonEnter as U } from "./useFloatingButtonEnter.es.js";
|
|
9
|
+
import { useFloatingButtonEscape as w } from "./useFloatingButtonEscape.es.js";
|
|
10
|
+
const J = ({ floatingOptions: g, ...i }) => {
|
|
11
|
+
const t = F(), c = h(t.id).keyEditor(), m = l().mode(), a = l().isOpen(t.id), { triggerFloatingButtonHotkeys: f } = C(t, o), p = v(() => {
|
|
12
|
+
const e = R(t, {
|
|
13
13
|
match: { type: u(t, o) }
|
|
14
14
|
});
|
|
15
15
|
if (e) {
|
|
16
16
|
const [, s] = e;
|
|
17
|
-
return
|
|
18
|
-
anchor:
|
|
19
|
-
focus:
|
|
17
|
+
return k(t, {
|
|
18
|
+
anchor: O(t, s),
|
|
19
|
+
focus: P(t, s)
|
|
20
20
|
});
|
|
21
21
|
}
|
|
22
|
-
return
|
|
23
|
-
}, [t]),
|
|
24
|
-
open:
|
|
25
|
-
getBoundingClientRect:
|
|
26
|
-
...
|
|
22
|
+
return b();
|
|
23
|
+
}, [t]), E = a && m === "edit", { update: r, style: B, floating: y } = D({
|
|
24
|
+
open: E,
|
|
25
|
+
getBoundingClientRect: p,
|
|
26
|
+
...g
|
|
27
27
|
});
|
|
28
|
-
return
|
|
29
|
-
const e =
|
|
30
|
-
if (e && n.url(e), t.selection &&
|
|
28
|
+
return x(() => {
|
|
29
|
+
const e = H(t);
|
|
30
|
+
if (e && n.url(e), t.selection && N(t, {
|
|
31
31
|
match: { type: u(t, o) }
|
|
32
32
|
})) {
|
|
33
33
|
n.show("edit", t.id), r();
|
|
34
34
|
return;
|
|
35
35
|
}
|
|
36
|
-
|
|
37
|
-
}, [t, c, r]),
|
|
38
|
-
|
|
36
|
+
d.mode() === "edit" && n.hide();
|
|
37
|
+
}, [t, c, r]), S(
|
|
38
|
+
f,
|
|
39
39
|
(e) => {
|
|
40
|
-
e.preventDefault(),
|
|
40
|
+
e.preventDefault(), d.mode() === "edit" && A(t);
|
|
41
41
|
},
|
|
42
42
|
{
|
|
43
43
|
enableOnContentEditable: !0
|
|
44
44
|
},
|
|
45
45
|
[]
|
|
46
|
-
),
|
|
46
|
+
), U(), w(), {
|
|
47
47
|
style: {
|
|
48
|
-
...
|
|
48
|
+
...B,
|
|
49
49
|
zIndex: 1e3
|
|
50
50
|
},
|
|
51
51
|
...i,
|
|
52
|
-
ref:
|
|
52
|
+
ref: T(i.ref, y)
|
|
53
53
|
};
|
|
54
54
|
};
|
|
55
55
|
export {
|
|
56
|
-
|
|
56
|
+
J as useFloatingButtonEdit
|
|
57
57
|
};
|
|
58
58
|
//# sourceMappingURL=useFloatingButtonEdit.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFloatingButtonEdit.es.js","sources":["../../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/useFloatingButtonEdit.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n HTMLPropsAs,\n getAboveNode,\n getDefaultBoundingClientRect,\n getEndPoint,\n getPluginOptions,\n getPluginType,\n getRangeBoundingClientRect,\n getStartPoint,\n someNode,\n useComposedRef,\n useEditorRef,\n useHotkeys,\n usePlateSelectors,\n} from '@udecode/plate';\nimport { useCallback, useEffect } from 'react';\nimport { ButtonPlugin, ELEMENT_BUTTON } from '../../createButtonPlugin';\nimport { getUrlFromEditor } from '../../utils';\nimport { triggerFloatingButtonEdit } from '../../utils/triggerFloatingButtonEdit';\nimport {\n FloatingButtonProps,\n floatingButtonActions,\n floatingButtonSelectors,\n useFloatingButtonEnter,\n useFloatingButtonEscape,\n useFloatingButtonSelectors,\n useVirtualFloatingButton,\n} from '.';\n\nexport const useFloatingButtonEdit = ({ floatingOptions, ...props }: FloatingButtonProps): HTMLPropsAs<'div'> => {\n const editor = useEditorRef();\n const keyEditor = usePlateSelectors(editor.id).keyEditor();\n const mode = useFloatingButtonSelectors().mode();\n const open = useFloatingButtonSelectors().isOpen(editor.id);\n\n const { triggerFloatingButtonHotkeys } = getPluginOptions<ButtonPlugin>(editor, ELEMENT_BUTTON);\n\n const getBoundingClientRect = useCallback(() => {\n const entry = getAboveNode(editor, {\n match: { type: getPluginType(editor, ELEMENT_BUTTON) },\n });\n\n if (entry) {\n const [, path] = entry;\n return getRangeBoundingClientRect(editor, {\n anchor: getStartPoint(editor, path),\n focus: getEndPoint(editor, path),\n });\n }\n\n return getDefaultBoundingClientRect();\n }, [editor]);\n\n const isOpen = open && mode === 'edit';\n\n const { update, style, floating } = useVirtualFloatingButton({\n open: isOpen,\n getBoundingClientRect,\n ...floatingOptions,\n });\n\n useEffect(() => {\n const url = getUrlFromEditor(editor);\n if (url) {\n floatingButtonActions.url(url);\n }\n\n if (\n editor.selection &&\n someNode(editor, {\n match: { type: getPluginType(editor, ELEMENT_BUTTON) },\n })\n ) {\n floatingButtonActions.show('edit', editor.id);\n update();\n return;\n }\n\n if (floatingButtonSelectors.mode() === 'edit') {\n floatingButtonActions.hide();\n }\n }, [editor, keyEditor, update]);\n\n useHotkeys(\n triggerFloatingButtonHotkeys,\n (e) => {\n e.preventDefault();\n\n if (floatingButtonSelectors.mode() === 'edit') {\n triggerFloatingButtonEdit(editor);\n }\n },\n {\n enableOnContentEditable: true,\n },\n []
|
|
1
|
+
{"version":3,"file":"useFloatingButtonEdit.es.js","sources":["../../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/useFloatingButtonEdit.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n HTMLPropsAs,\n getAboveNode,\n getDefaultBoundingClientRect,\n getEndPoint,\n getPluginOptions,\n getPluginType,\n getRangeBoundingClientRect,\n getStartPoint,\n someNode,\n useComposedRef,\n useEditorRef,\n useHotkeys,\n usePlateSelectors,\n} from '@udecode/plate';\nimport { useCallback, useEffect } from 'react';\nimport { ButtonPlugin, ELEMENT_BUTTON } from '../../createButtonPlugin';\nimport { getUrlFromEditor } from '../../utils';\nimport { triggerFloatingButtonEdit } from '../../utils/triggerFloatingButtonEdit';\nimport {\n FloatingButtonProps,\n floatingButtonActions,\n floatingButtonSelectors,\n useFloatingButtonEnter,\n useFloatingButtonEscape,\n useFloatingButtonSelectors,\n useVirtualFloatingButton,\n} from '.';\n\nexport const useFloatingButtonEdit = ({ floatingOptions, ...props }: FloatingButtonProps): HTMLPropsAs<'div'> => {\n const editor = useEditorRef();\n const keyEditor = usePlateSelectors(editor.id).keyEditor();\n const mode = useFloatingButtonSelectors().mode();\n const open = useFloatingButtonSelectors().isOpen(editor.id);\n\n const { triggerFloatingButtonHotkeys } = getPluginOptions<ButtonPlugin>(editor, ELEMENT_BUTTON);\n\n const getBoundingClientRect = useCallback(() => {\n const entry = getAboveNode(editor, {\n match: { type: getPluginType(editor, ELEMENT_BUTTON) },\n });\n\n if (entry) {\n const [, path] = entry;\n return getRangeBoundingClientRect(editor, {\n anchor: getStartPoint(editor, path),\n focus: getEndPoint(editor, path),\n });\n }\n\n return getDefaultBoundingClientRect();\n }, [editor]);\n\n const isOpen = open && mode === 'edit';\n\n const { update, style, floating } = useVirtualFloatingButton({\n open: isOpen,\n getBoundingClientRect,\n ...floatingOptions,\n });\n\n useEffect(() => {\n const url = getUrlFromEditor(editor);\n if (url) {\n floatingButtonActions.url(url);\n }\n\n if (\n editor.selection &&\n someNode(editor, {\n match: { type: getPluginType(editor, ELEMENT_BUTTON) },\n })\n ) {\n floatingButtonActions.show('edit', editor.id);\n update();\n return;\n }\n\n if (floatingButtonSelectors.mode() === 'edit') {\n floatingButtonActions.hide();\n }\n }, [editor, keyEditor, update]);\n\n useHotkeys(\n triggerFloatingButtonHotkeys,\n (e) => {\n e.preventDefault();\n\n if (floatingButtonSelectors.mode() === 'edit') {\n triggerFloatingButtonEdit(editor);\n }\n },\n {\n enableOnContentEditable: true,\n },\n [],\n );\n\n useFloatingButtonEnter();\n\n useFloatingButtonEscape();\n\n return {\n style: {\n ...style,\n zIndex: 1000,\n },\n ...props,\n ref: useComposedRef<HTMLElement | null>(props.ref, floating),\n };\n};\n"],"names":["useFloatingButtonEdit","floatingOptions","props","editor","useEditorRef","keyEditor","usePlateSelectors","mode","useFloatingButtonSelectors","open","triggerFloatingButtonHotkeys","getPluginOptions","ELEMENT_BUTTON","getBoundingClientRect","useCallback","entry","getAboveNode","getPluginType","path","getRangeBoundingClientRect","getStartPoint","getEndPoint","getDefaultBoundingClientRect","isOpen","update","style","floating","useVirtualFloatingButton","useEffect","url","getUrlFromEditor","floatingButtonActions","someNode","floatingButtonSelectors","useHotkeys","triggerFloatingButtonEdit","useFloatingButtonEnter","useFloatingButtonEscape","useComposedRef"],"mappings":";;;;;;;;;AA+BO,MAAMA,IAAwB,CAAC,EAAE,iBAAAC,GAAiB,GAAGC,QAAqD;AAC7G,QAAMC,IAASC,KACTC,IAAYC,EAAkBH,EAAO,EAAE,EAAE,UAAU,GACnDI,IAAOC,IAA6B,QACpCC,IAAOD,EAA6B,EAAA,OAAOL,EAAO,EAAE,GAEpD,EAAE,8BAAAO,EAAiC,IAAAC,EAA+BR,GAAQS,CAAc,GAExFC,IAAwBC,EAAY,MAAM;AACtC,UAAAC,IAAQC,EAAab,GAAQ;AAAA,MAC/B,OAAO,EAAE,MAAMc,EAAcd,GAAQS,CAAc,EAAE;AAAA,IAAA,CACxD;AAED,QAAIG,GAAO;AACD,YAAA,CAAG,EAAAG,CAAI,IAAIH;AACjB,aAAOI,EAA2BhB,GAAQ;AAAA,QACtC,QAAQiB,EAAcjB,GAAQe,CAAI;AAAA,QAClC,OAAOG,EAAYlB,GAAQe,CAAI;AAAA,MAAA,CAClC;AAAA,IACL;AAEA,WAAOI,EAA6B;AAAA,EAAA,GACrC,CAACnB,CAAM,CAAC,GAELoB,IAASd,KAAQF,MAAS,QAE1B,EAAE,QAAAiB,GAAQ,OAAAC,GAAO,UAAAC,EAAA,IAAaC,EAAyB;AAAA,IACzD,MAAMJ;AAAA,IACN,uBAAAV;AAAA,IACA,GAAGZ;AAAA,EAAA,CACN;AAED,SAAA2B,EAAU,MAAM;AACN,UAAAC,IAAMC,EAAiB3B,CAAM;AAM/B,QALA0B,KACAE,EAAsB,IAAIF,CAAG,GAI7B1B,EAAO,aACP6B,EAAS7B,GAAQ;AAAA,MACb,OAAO,EAAE,MAAMc,EAAcd,GAAQS,CAAc,EAAE;AAAA,IAAA,CACxD,GACH;AACwB,MAAAmB,EAAA,KAAK,QAAQ5B,EAAO,EAAE,GACrCqB;AACP;AAAA,IACJ;AAEI,IAAAS,EAAwB,KAAK,MAAM,UACnCF,EAAsB,KAAK;AAAA,EAEhC,GAAA,CAAC5B,GAAQE,GAAWmB,CAAM,CAAC,GAE9BU;AAAA,IACIxB;AAAA,IACA,CAAC,MAAM;AACH,QAAE,eAAe,GAEbuB,EAAwB,KAAK,MAAM,UACnCE,EAA0BhC,CAAM;AAAA,IAExC;AAAA,IACA;AAAA,MACI,yBAAyB;AAAA,IAC7B;AAAA,IACA,CAAC;AAAA,EAAA,GAGkBiC,KAECC,KAEjB;AAAA,IACH,OAAO;AAAA,MACH,GAAGZ;AAAA,MACH,QAAQ;AAAA,IACZ;AAAA,IACA,GAAGvB;AAAA,IACH,KAAKoC,EAAmCpC,EAAM,KAAKwB,CAAQ;AAAA,EAAA;AAEnE;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFloatingButtonEnter.es.js","sources":["../../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/useFloatingButtonEnter.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEditorRef, useHotkeys } from '@udecode/plate';\nimport { submitFloatingButton } from '../../transforms/submitFloatingButton';\n\nexport const useFloatingButtonEnter = () => {\n const editor = useEditorRef();\n\n useHotkeys(\n '*',\n (e) => {\n if (e.key === 'Enter' && submitFloatingButton(editor)) {\n e.preventDefault();\n }\n },\n {\n enableOnFormTags: ['INPUT'],\n },\n []
|
|
1
|
+
{"version":3,"file":"useFloatingButtonEnter.es.js","sources":["../../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/useFloatingButtonEnter.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEditorRef, useHotkeys } from '@udecode/plate';\nimport { submitFloatingButton } from '../../transforms/submitFloatingButton';\n\nexport const useFloatingButtonEnter = () => {\n const editor = useEditorRef();\n\n useHotkeys(\n '*',\n (e) => {\n if (e.key === 'Enter' && submitFloatingButton(editor)) {\n e.preventDefault();\n }\n },\n {\n enableOnFormTags: ['INPUT'],\n },\n [],\n );\n};\n"],"names":["useFloatingButtonEnter","editor","useEditorRef","useHotkeys","e","submitFloatingButton"],"mappings":";;AAKO,MAAMA,IAAyB,MAAM;AACxC,QAAMC,IAASC;AAEf,EAAAC;AAAA,IACI;AAAA,IACA,CAACC,MAAM;AACH,MAAIA,EAAE,QAAQ,WAAWC,EAAqBJ,CAAM,KAChDG,EAAE,eAAe;AAAA,IAEzB;AAAA,IACA;AAAA,MACI,kBAAkB,CAAC,OAAO;AAAA,IAC9B;AAAA,IACA,CAAC;AAAA,EAAA;AAET;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFloatingButtonEscape.es.js","sources":["../../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/useFloatingButtonEscape.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { focusEditor, useEditorRef, useHotkeys } from '@udecode/plate';\nimport { floatingButtonActions, floatingButtonSelectors } from './floatingButtonStore';\n\nexport const useFloatingButtonEscape = () => {\n const editor = useEditorRef();\n\n useHotkeys(\n 'escape',\n () => {\n if (floatingButtonSelectors.mode() !== 'edit') {\n return;\n }\n\n if (floatingButtonSelectors.isEditing()) {\n floatingButtonActions.show('edit', editor.id);\n focusEditor(editor, editor.selection ?? undefined);\n return;\n }\n\n floatingButtonActions.hide();\n },\n {\n enableOnFormTags: ['INPUT'],\n enableOnContentEditable: true,\n },\n []
|
|
1
|
+
{"version":3,"file":"useFloatingButtonEscape.es.js","sources":["../../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/useFloatingButtonEscape.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { focusEditor, useEditorRef, useHotkeys } from '@udecode/plate';\nimport { floatingButtonActions, floatingButtonSelectors } from './floatingButtonStore';\n\nexport const useFloatingButtonEscape = () => {\n const editor = useEditorRef();\n\n useHotkeys(\n 'escape',\n () => {\n if (floatingButtonSelectors.mode() !== 'edit') {\n return;\n }\n\n if (floatingButtonSelectors.isEditing()) {\n floatingButtonActions.show('edit', editor.id);\n focusEditor(editor, editor.selection ?? undefined);\n return;\n }\n\n floatingButtonActions.hide();\n },\n {\n enableOnFormTags: ['INPUT'],\n enableOnContentEditable: true,\n },\n [],\n );\n};\n"],"names":["useFloatingButtonEscape","editor","useEditorRef","useHotkeys","floatingButtonSelectors","floatingButtonActions","focusEditor"],"mappings":";;AAKO,MAAMA,IAA0B,MAAM;AACzC,QAAMC,IAASC;AAEf,EAAAC;AAAA,IACI;AAAA,IACA,MAAM;AACE,UAAAC,EAAwB,KAAK,MAAM,QAInC;AAAA,YAAAA,EAAwB,aAAa;AACf,UAAAC,EAAA,KAAK,QAAQJ,EAAO,EAAE,GAChCK,EAAAL,GAAQA,EAAO,aAAa,MAAS;AACjD;AAAA,QACJ;AAEA,QAAAI,EAAsB,KAAK;AAAA;AAAA,IAC/B;AAAA,IACA;AAAA,MACI,kBAAkB,CAAC,OAAO;AAAA,MAC1B,yBAAyB;AAAA,IAC7B;AAAA,IACA,CAAC;AAAA,EAAA;AAET;"}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import { useEditorRef as
|
|
2
|
-
import {
|
|
1
|
+
import { useEditorRef as d, getPluginOptions as c, useHotkeys as p, getSelectionBoundingClientRect as a, useComposedRef as B } from "@udecode/plate";
|
|
2
|
+
import { useEffect as E } from "react";
|
|
3
3
|
import { useFocused as F } from "slate-react";
|
|
4
4
|
import { ELEMENT_BUTTON as y } from "../../createButtonPlugin.es.js";
|
|
5
5
|
import { triggerFloatingButtonInsert as C } from "../../utils/triggerFloatingButtonInsert.es.js";
|
|
6
6
|
import { useFloatingButtonSelectors as r, floatingButtonActions as O } from "./floatingButtonStore.es.js";
|
|
7
7
|
import { useVirtualFloatingButton as R } from "./useVirtualFloatingButton.es.js";
|
|
8
|
-
import { useFloatingButtonEscape as
|
|
8
|
+
import { useFloatingButtonEscape as I } from "./useFloatingButtonEscape.es.js";
|
|
9
9
|
const S = ({ floatingOptions: s, ...o }) => {
|
|
10
|
-
const e =
|
|
11
|
-
|
|
10
|
+
const e = d(), n = F(), u = r().mode(), t = r().isOpen(e.id), { triggerFloatingButtonHotkeys: l } = c(e, y);
|
|
11
|
+
p(
|
|
12
12
|
l,
|
|
13
13
|
(g) => {
|
|
14
14
|
g.preventDefault(), C(e, {
|
|
@@ -22,13 +22,13 @@ const S = ({ floatingOptions: s, ...o }) => {
|
|
|
22
22
|
);
|
|
23
23
|
const { update: i, style: m, floating: f } = R({
|
|
24
24
|
open: t && u === "insert",
|
|
25
|
-
getBoundingClientRect:
|
|
25
|
+
getBoundingClientRect: a,
|
|
26
26
|
whileElementsMounted: void 0,
|
|
27
27
|
...s
|
|
28
28
|
});
|
|
29
|
-
return E
|
|
29
|
+
return E(() => {
|
|
30
30
|
t && i(), O.updated(t);
|
|
31
|
-
}, [t, i]),
|
|
31
|
+
}, [t, i]), I(), {
|
|
32
32
|
style: {
|
|
33
33
|
...m,
|
|
34
34
|
zIndex: 1e3
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFloatingButtonInsert.es.js","sources":["../../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/useFloatingButtonInsert.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n HTMLPropsAs,\n getPluginOptions,\n getSelectionBoundingClientRect,\n useComposedRef,\n useEditorRef,\n useHotkeys,\n} from '@udecode/plate';\nimport { useEffect } from 'react';\nimport { useFocused } from 'slate-react';\nimport { ButtonPlugin, ELEMENT_BUTTON } from '../../createButtonPlugin';\nimport { triggerFloatingButtonInsert } from '../../utils/triggerFloatingButtonInsert';\nimport {\n FloatingButtonProps,\n floatingButtonActions,\n useFloatingButtonEscape,\n useFloatingButtonSelectors,\n useVirtualFloatingButton,\n} from '.';\n\nexport const useFloatingButtonInsert = ({ floatingOptions, ...props }: FloatingButtonProps): HTMLPropsAs<'div'> => {\n const editor = useEditorRef();\n const focused = useFocused();\n const mode = useFloatingButtonSelectors().mode();\n const open = useFloatingButtonSelectors().isOpen(editor.id);\n\n const { triggerFloatingButtonHotkeys } = getPluginOptions<ButtonPlugin>(editor, ELEMENT_BUTTON);\n\n useHotkeys(\n triggerFloatingButtonHotkeys,\n (e) => {\n e.preventDefault();\n\n triggerFloatingButtonInsert(editor, {\n focused,\n });\n },\n {\n enableOnContentEditable: true,\n },\n [focused]
|
|
1
|
+
{"version":3,"file":"useFloatingButtonInsert.es.js","sources":["../../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/useFloatingButtonInsert.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n HTMLPropsAs,\n getPluginOptions,\n getSelectionBoundingClientRect,\n useComposedRef,\n useEditorRef,\n useHotkeys,\n} from '@udecode/plate';\nimport { useEffect } from 'react';\nimport { useFocused } from 'slate-react';\nimport { ButtonPlugin, ELEMENT_BUTTON } from '../../createButtonPlugin';\nimport { triggerFloatingButtonInsert } from '../../utils/triggerFloatingButtonInsert';\nimport {\n FloatingButtonProps,\n floatingButtonActions,\n useFloatingButtonEscape,\n useFloatingButtonSelectors,\n useVirtualFloatingButton,\n} from '.';\n\nexport const useFloatingButtonInsert = ({ floatingOptions, ...props }: FloatingButtonProps): HTMLPropsAs<'div'> => {\n const editor = useEditorRef();\n const focused = useFocused();\n const mode = useFloatingButtonSelectors().mode();\n const open = useFloatingButtonSelectors().isOpen(editor.id);\n\n const { triggerFloatingButtonHotkeys } = getPluginOptions<ButtonPlugin>(editor, ELEMENT_BUTTON);\n\n useHotkeys(\n triggerFloatingButtonHotkeys,\n (e) => {\n e.preventDefault();\n\n triggerFloatingButtonInsert(editor, {\n focused,\n });\n },\n {\n enableOnContentEditable: true,\n },\n [focused],\n );\n\n const { update, style, floating } = useVirtualFloatingButton({\n open: open && mode === 'insert',\n getBoundingClientRect: getSelectionBoundingClientRect,\n whileElementsMounted: undefined,\n ...floatingOptions,\n });\n\n // wait for update before focusing input\n useEffect(() => {\n if (open) {\n update();\n }\n floatingButtonActions.updated(open);\n }, [open, update]);\n\n useFloatingButtonEscape();\n\n return {\n style: {\n ...style,\n zIndex: 1000,\n },\n ...props,\n ref: useComposedRef<HTMLElement | null>(props.ref, floating),\n };\n};\n"],"names":["useFloatingButtonInsert","floatingOptions","props","editor","useEditorRef","focused","useFocused","mode","useFloatingButtonSelectors","open","triggerFloatingButtonHotkeys","getPluginOptions","ELEMENT_BUTTON","useHotkeys","e","triggerFloatingButtonInsert","update","style","floating","useVirtualFloatingButton","getSelectionBoundingClientRect","useEffect","floatingButtonActions","useFloatingButtonEscape","useComposedRef"],"mappings":";;;;;;;;AAsBO,MAAMA,IAA0B,CAAC,EAAE,iBAAAC,GAAiB,GAAGC,QAAqD;AAC/G,QAAMC,IAASC,KACTC,IAAUC,KACVC,IAAOC,IAA6B,QACpCC,IAAOD,EAA6B,EAAA,OAAOL,EAAO,EAAE,GAEpD,EAAE,8BAAAO,EAAiC,IAAAC,EAA+BR,GAAQS,CAAc;AAE9F,EAAAC;AAAA,IACIH;AAAA,IACA,CAACI,MAAM;AACH,MAAAA,EAAE,eAAe,GAEjBC,EAA4BZ,GAAQ;AAAA,QAChC,SAAAE;AAAA,MAAA,CACH;AAAA,IACL;AAAA,IACA;AAAA,MACI,yBAAyB;AAAA,IAC7B;AAAA,IACA,CAACA,CAAO;AAAA,EAAA;AAGZ,QAAM,EAAE,QAAAW,GAAQ,OAAAC,GAAO,UAAAC,EAAA,IAAaC,EAAyB;AAAA,IACzD,MAAMV,KAAQF,MAAS;AAAA,IACvB,uBAAuBa;AAAA,IACvB,sBAAsB;AAAA,IACtB,GAAGnB;AAAA,EAAA,CACN;AAGD,SAAAoB,EAAU,MAAM;AACZ,IAAIZ,KACOO,KAEXM,EAAsB,QAAQb,CAAI;AAAA,EAAA,GACnC,CAACA,GAAMO,CAAM,CAAC,GAEOO,KAEjB;AAAA,IACH,OAAO;AAAA,MACH,GAAGN;AAAA,MACH,QAAQ;AAAA,IACZ;AAAA,IACA,GAAGf;AAAA,IACH,KAAKsB,EAAmCtB,EAAM,KAAKgB,CAAQ;AAAA,EAAA;AAEnE;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createButtonPlugin.es.js","sources":["../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/createButtonPlugin.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { AppBridgeBlock } from '@frontify/app-bridge';\nimport { Plugin, PluginProps } from '@frontify/fondue';\nimport { RangeBeforeOptions, createPluginFactory } from '@udecode/plate';\nimport { CSSProperties } from 'react';\nimport { isValidUrl } from '../LinkPlugin/utils/url';\nimport { ButtonMarkupElement } from './ButtonMarkupElement';\nimport { ButtonButton } from './components/ButtonButton';\nimport { CustomFloatingButton } from './components/FloatingButton/CustomFloatingButton';\nimport { BlockButtonStyles } from './utils';\nimport { withButton } from './withButton';\n\nexport const ELEMENT_BUTTON = 'button';\nexport const BUTTON_PLUGIN = 'button-plugin';\n\nexport interface ButtonPlugin {\n forceSubmit?: boolean;\n\n /**\n * Allow custom config for rangeBeforeOptions.\n * @example default\n * {\n * matchString: ' ',\n * skipInvalid: true,\n * afterMatch: true,\n * }\n */\n rangeBeforeOptions?: RangeBeforeOptions;\n\n /**\n * Hotkeys to trigger floating button.\n * @default 'command+k, ctrl+k'\n */\n triggerFloatingButtonHotkeys: string;\n\n /**\n * Callback to validate an url.\n * @default isUrl\n */\n isUrl: (text: string) => boolean;\n\n /**\n * Callback to optionally get the href for a url\n * @returns href: an optional link to be used that is different from the text content (example https://google.com for google.com)\n */\n getUrlHref?: (url: string) => string | undefined;\n\n /**\n * On keyboard shortcut or toolbar mousedown, get the link url by calling this promise. The\n * default behavior is to use the browser's native `prompt`.\n */\n getLinkUrl?: (prevUrl: string | null) => Promise<string | null>;\n}\n\n/**\n * Enables support for hyperlinks.\n */\nexport const createButtonPlugin = (appBridge: AppBridgeBlock) =>\n createPluginFactory({\n key: ELEMENT_BUTTON,\n isElement: true,\n isInline: true,\n props: ({ element }) => ({\n nodeProps: { href: element?.url, target: element?.target },\n }),\n withOverrides: withButton,\n renderAfterEditable: CustomFloatingButton,\n options: {\n isUrl: isValidUrl,\n rangeBeforeOptions: {\n matchString: ' ',\n skipInvalid: true,\n afterMatch: true,\n },\n triggerFloatingButtonHotkeys: 'command+shift+k, ctrl+shift+k',\n appBridge,\n },\n then: (editor, { type }) => ({\n deserializeHtml: {\n rules: [\n {\n validNodeName: 'A',\n validClassName: 'btn',\n },\n ],\n getNode: (el) => ({\n type,\n url: el.getAttribute('href'),\n target: el.getAttribute('target') || '_blank',\n }),\n },\n }),\n })();\n\nexport type ButtonPluginProps = Omit<PluginProps, 'styles'> & {\n styles?: Record<string, CSSProperties & { hover?: CSSProperties }>;\n} & { appBridge: AppBridgeBlock };\n\nexport class ButtonPlugin extends Plugin {\n public styles: CSSProperties = {};\n private appBridge: AppBridgeBlock;\n constructor({ styles = BlockButtonStyles, ...props }: ButtonPluginProps) {\n super(BUTTON_PLUGIN, {\n button: ButtonButton,\n markupElement: new ButtonMarkupElement(),\n ...props,\n });\n this.styles = styles;\n this.appBridge = props?.appBridge as AppBridgeBlock;\n }\n\n plugins() {\n return [createButtonPlugin(this.appBridge)];\n }\n}\n"],"names":["ELEMENT_BUTTON","BUTTON_PLUGIN","createButtonPlugin","appBridge","createPluginFactory","element","withButton","CustomFloatingButton","isValidUrl","editor","type","el","ButtonPlugin","Plugin","styles","BlockButtonStyles","props","ButtonButton","ButtonMarkupElement"],"mappings":";;;;;;;;AAaO,MAAMA,IAAiB,UACjBC,IAAgB,
|
|
1
|
+
{"version":3,"file":"createButtonPlugin.es.js","sources":["../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/createButtonPlugin.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { AppBridgeBlock } from '@frontify/app-bridge';\nimport { Plugin, PluginProps } from '@frontify/fondue';\nimport { RangeBeforeOptions, createPluginFactory } from '@udecode/plate';\nimport { CSSProperties } from 'react';\nimport { isValidUrl } from '../LinkPlugin/utils/url';\nimport { ButtonMarkupElement } from './ButtonMarkupElement';\nimport { ButtonButton } from './components/ButtonButton';\nimport { CustomFloatingButton } from './components/FloatingButton/CustomFloatingButton';\nimport { BlockButtonStyles } from './utils';\nimport { withButton } from './withButton';\n\nexport const ELEMENT_BUTTON = 'button';\nexport const BUTTON_PLUGIN = 'button-plugin';\n\n// eslint-disable-next-line\nexport interface ButtonPlugin {\n forceSubmit?: boolean;\n\n /**\n * Allow custom config for rangeBeforeOptions.\n * @example default\n * {\n * matchString: ' ',\n * skipInvalid: true,\n * afterMatch: true,\n * }\n */\n rangeBeforeOptions?: RangeBeforeOptions;\n\n /**\n * Hotkeys to trigger floating button.\n * @default 'command+k, ctrl+k'\n */\n triggerFloatingButtonHotkeys: string;\n\n /**\n * Callback to validate an url.\n * @default isUrl\n */\n isUrl: (text: string) => boolean;\n\n /**\n * Callback to optionally get the href for a url\n * @returns href: an optional link to be used that is different from the text content (example https://google.com for google.com)\n */\n getUrlHref?: (url: string) => string | undefined;\n\n /**\n * On keyboard shortcut or toolbar mousedown, get the link url by calling this promise. The\n * default behavior is to use the browser's native `prompt`.\n */\n getLinkUrl?: (prevUrl: string | null) => Promise<string | null>;\n}\n\n/**\n * Enables support for hyperlinks.\n */\nexport const createButtonPlugin = (appBridge: AppBridgeBlock) =>\n createPluginFactory({\n key: ELEMENT_BUTTON,\n isElement: true,\n isInline: true,\n props: ({ element }) => ({\n nodeProps: { href: element?.url, target: element?.target },\n }),\n withOverrides: withButton,\n renderAfterEditable: CustomFloatingButton,\n options: {\n isUrl: isValidUrl,\n rangeBeforeOptions: {\n matchString: ' ',\n skipInvalid: true,\n afterMatch: true,\n },\n triggerFloatingButtonHotkeys: 'command+shift+k, ctrl+shift+k',\n appBridge,\n },\n then: (editor, { type }) => ({\n deserializeHtml: {\n rules: [\n {\n validNodeName: 'A',\n validClassName: 'btn',\n },\n ],\n getNode: (el) => ({\n type,\n url: el.getAttribute('href'),\n target: el.getAttribute('target') || '_blank',\n }),\n },\n }),\n })();\n\nexport type ButtonPluginProps = Omit<PluginProps, 'styles'> & {\n styles?: Record<string, CSSProperties & { hover?: CSSProperties }>;\n} & { appBridge: AppBridgeBlock };\n\n// eslint-disable-next-line\nexport class ButtonPlugin extends Plugin {\n public styles: CSSProperties = {};\n private appBridge: AppBridgeBlock;\n constructor({ styles = BlockButtonStyles, ...props }: ButtonPluginProps) {\n super(BUTTON_PLUGIN, {\n button: ButtonButton,\n markupElement: new ButtonMarkupElement(),\n ...props,\n });\n this.styles = styles;\n this.appBridge = props?.appBridge as AppBridgeBlock;\n }\n\n plugins() {\n return [createButtonPlugin(this.appBridge)];\n }\n}\n"],"names":["ELEMENT_BUTTON","BUTTON_PLUGIN","createButtonPlugin","appBridge","createPluginFactory","element","withButton","CustomFloatingButton","isValidUrl","editor","type","el","ButtonPlugin","Plugin","styles","BlockButtonStyles","props","ButtonButton","ButtonMarkupElement"],"mappings":";;;;;;;;AAaO,MAAMA,IAAiB,UACjBC,IAAgB,iBA6ChBC,IAAqB,CAACC,MAC/BC,EAAoB;AAAA,EAChB,KAAKJ;AAAA,EACL,WAAW;AAAA,EACX,UAAU;AAAA,EACV,OAAO,CAAC,EAAE,SAAAK,SAAe;AAAA,IACrB,WAAW,EAAE,MAAMA,KAAA,gBAAAA,EAAS,KAAK,QAAQA,KAAA,gBAAAA,EAAS,OAAO;AAAA,EAAA;AAAA,EAE7D,eAAeC;AAAA,EACf,qBAAqBC;AAAA,EACrB,SAAS;AAAA,IACL,OAAOC;AAAA,IACP,oBAAoB;AAAA,MAChB,aAAa;AAAA,MACb,aAAa;AAAA,MACb,YAAY;AAAA,IAChB;AAAA,IACA,8BAA8B;AAAA,IAC9B,WAAAL;AAAA,EACJ;AAAA,EACA,MAAM,CAACM,GAAQ,EAAE,MAAAC,SAAY;AAAA,IACzB,iBAAiB;AAAA,MACb,OAAO;AAAA,QACH;AAAA,UACI,eAAe;AAAA,UACf,gBAAgB;AAAA,QACpB;AAAA,MACJ;AAAA,MACA,SAAS,CAACC,OAAQ;AAAA,QACd,MAAAD;AAAA,QACA,KAAKC,EAAG,aAAa,MAAM;AAAA,QAC3B,QAAQA,EAAG,aAAa,QAAQ,KAAK;AAAA,MAAA;AAAA,IAE7C;AAAA,EAAA;AAER,CAAC,EAAE;AAOA,MAAMC,UAAqBC,EAAO;AAAA,EAGrC,YAAY,EAAE,QAAAC,IAASC,GAAmB,GAAGC,KAA4B;AACrE,UAAMf,GAAe;AAAA,MACjB,QAAQgB;AAAA,MACR,eAAe,IAAIC,EAAoB;AAAA,MACvC,GAAGF;AAAA,IAAA,CACN,GAPL,KAAO,SAAwB,IAQ3B,KAAK,SAASF,GACd,KAAK,YAAYE,KAAA,gBAAAA,EAAO;AAAA,EAC5B;AAAA,EAEA,UAAU;AACN,WAAO,CAACd,EAAmB,KAAK,SAAS,CAAC;AAAA,EAC9C;AACJ;"}
|