@frontify/guideline-blocks-settings 0.29.5 → 0.29.6
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 +15 -0
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/ButtonMarkupElement/ButtonMarkupElementNode.es.js +1 -1
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/ButtonMarkupElement/ButtonMarkupElementNode.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/EditButtonModal/EditModal.es.js +36 -30
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/EditButtonModal/EditModal.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/InsertButtonModal/InsertButtonModal.es.js +12 -12
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/InsertButtonModal/InsertButtonModal.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/createButtonPlugin.es.js +6 -6
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/createButtonPlugin.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/utils/styles.es.js +6 -0
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/utils/styles.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/LinkPlugin/FloatingLink/EditLinkModal/EditModal.es.js +38 -32
- package/dist/components/RichTextEditor/plugins/LinkPlugin/FloatingLink/EditLinkModal/EditModal.es.js.map +1 -1
- package/dist/index.cjs.js +3 -3
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.umd.js +3 -3
- package/dist/index.umd.js.map +1 -1
- package/package.json +5 -5
- package/src/components/RichTextEditor/plugins/ButtonPlugin/ButtonMarkupElement/ButtonMarkupElementNode.tsx +1 -1
- package/src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/EditButtonModal/EditModal.tsx +6 -6
- package/src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/InsertButtonModal/InsertButtonModal.tsx +1 -1
- package/src/components/RichTextEditor/plugins/ButtonPlugin/createButtonPlugin.ts +1 -1
- package/src/components/RichTextEditor/plugins/ButtonPlugin/utils/styles.ts +6 -0
- package/src/components/RichTextEditor/plugins/LinkPlugin/FloatingLink/EditLinkModal/EditModal.tsx +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# @frontify/guideline-blocks-settings
|
|
2
2
|
|
|
3
|
+
## 0.29.6
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#560](https://github.com/Frontify/brand-sdk/pull/560) [`7460f29`](https://github.com/Frontify/brand-sdk/commit/7460f298fa346f89da7de2a0465c12c077e22f05) Thanks [@ragi96](https://github.com/ragi96)! - chore: bump fondue to v12.0.0-beta.319
|
|
8
|
+
|
|
9
|
+
- [#559](https://github.com/Frontify/brand-sdk/pull/559) [`0a75910`](https://github.com/Frontify/brand-sdk/commit/0a75910955da33d6866af1f42e82280f64118701) Thanks [@ragi96](https://github.com/ragi96)! - fix: button plugin add margins to button
|
|
10
|
+
|
|
11
|
+
- [#564](https://github.com/Frontify/brand-sdk/pull/564) [`3684397`](https://github.com/Frontify/brand-sdk/commit/368439792d855bbc5117f97931b7d52f75295677) Thanks [@ragi96](https://github.com/ragi96)! - chore: bump fondue to v12.0.0-beta.321
|
|
12
|
+
|
|
13
|
+
- [#563](https://github.com/Frontify/brand-sdk/pull/563) [`c3b2f6c`](https://github.com/Frontify/brand-sdk/commit/c3b2f6cb86844a10cc7ff2d4ef8802945d5d1e5b) Thanks [@fulopdaniel](https://github.com/fulopdaniel)! - fix(RTE): edit modal styles can be invisible
|
|
14
|
+
|
|
15
|
+
- Updated dependencies [[`7460f29`](https://github.com/Frontify/brand-sdk/commit/7460f298fa346f89da7de2a0465c12c077e22f05), [`3684397`](https://github.com/Frontify/brand-sdk/commit/368439792d855bbc5117f97931b7d52f75295677)]:
|
|
16
|
+
- @frontify/sidebar-settings@0.6.9
|
|
17
|
+
|
|
3
18
|
## 0.29.5
|
|
4
19
|
|
|
5
20
|
### Patch Changes
|
|
@@ -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 || '
|
|
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,SAAA,gBAAAU;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,SAAA,gBAAAN;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;"}
|
|
@@ -1,37 +1,43 @@
|
|
|
1
|
-
import { jsx as t, jsxs as
|
|
1
|
+
import { jsx as t, jsxs as e } from "react/jsx-runtime";
|
|
2
2
|
import { IconPen16 as r, IconTrashBin16 as a } from "@frontify/fondue";
|
|
3
3
|
import { useFloatingButtonUrlInput as i } from "../FloatingButtonUrlInput.es.js";
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
const p = () => {
|
|
4
|
+
import { FloatingButton as n } from "../FloatingButton.es.js";
|
|
5
|
+
const u = () => {
|
|
7
6
|
const o = i({});
|
|
8
|
-
return /* @__PURE__ */ t(
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
7
|
+
return /* @__PURE__ */ t(
|
|
8
|
+
"div",
|
|
9
|
+
{
|
|
10
|
+
"data-test-id": "floating-button-edit",
|
|
11
|
+
className: "tw-bg-white tw-text-text tw-rounded tw-shadow tw-p-4 tw-min-w-[400px]",
|
|
12
|
+
children: /* @__PURE__ */ e("span", { "data-test-id": "preview-button-flyout", className: "tw-flex tw-justify-between tw-items-center", children: [
|
|
13
|
+
/* @__PURE__ */ t("span", { className: "tw-pointer-events-none", children: o.defaultValue }),
|
|
14
|
+
/* @__PURE__ */ e("span", { className: "tw-flex tw-gap-2", children: [
|
|
15
|
+
/* @__PURE__ */ t(
|
|
16
|
+
"span",
|
|
17
|
+
{
|
|
18
|
+
role: "button",
|
|
19
|
+
tabIndex: 0,
|
|
20
|
+
"data-test-id": "edit-button-button",
|
|
21
|
+
className: "tw-transition tw-cursor-pointer tw-rounded hover:tw-bg-black-10 tw-p-1",
|
|
22
|
+
children: /* @__PURE__ */ t(n.EditButton, { children: /* @__PURE__ */ t(r, {}) })
|
|
23
|
+
}
|
|
24
|
+
),
|
|
25
|
+
/* @__PURE__ */ t(
|
|
26
|
+
"span",
|
|
27
|
+
{
|
|
28
|
+
role: "button",
|
|
29
|
+
tabIndex: 0,
|
|
30
|
+
"data-test-id": "remove-button-button",
|
|
31
|
+
className: "tw-transition tw-cursor-pointer tw-rounded hover:tw-bg-black-10 tw-p-1",
|
|
32
|
+
children: /* @__PURE__ */ t(n.UnlinkButton, { children: /* @__PURE__ */ t(a, {}) })
|
|
33
|
+
}
|
|
34
|
+
)
|
|
35
|
+
] })
|
|
36
|
+
] })
|
|
37
|
+
}
|
|
38
|
+
);
|
|
33
39
|
};
|
|
34
40
|
export {
|
|
35
|
-
|
|
41
|
+
u as EditModal
|
|
36
42
|
};
|
|
37
43
|
//# sourceMappingURL=EditModal.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditModal.es.js","sources":["../../../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/EditButtonModal/EditModal.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconPen16, IconTrashBin16 } from '@frontify/fondue';\nimport { FloatingButton, useFloatingButtonUrlInput } from '..';\
|
|
1
|
+
{"version":3,"file":"EditModal.es.js","sources":["../../../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/EditButtonModal/EditModal.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconPen16, IconTrashBin16 } from '@frontify/fondue';\nimport { FloatingButton, useFloatingButtonUrlInput } from '..';\n\nexport const EditModal = () => {\n const urlHtmlProps = useFloatingButtonUrlInput({});\n\n return (\n <div\n data-test-id=\"floating-button-edit\"\n className=\"tw-bg-white tw-text-text tw-rounded tw-shadow tw-p-4 tw-min-w-[400px]\"\n >\n <span data-test-id=\"preview-button-flyout\" className=\"tw-flex tw-justify-between tw-items-center\">\n <span className=\"tw-pointer-events-none\">{urlHtmlProps.defaultValue}</span>\n <span className=\"tw-flex tw-gap-2\">\n <span\n role=\"button\"\n tabIndex={0}\n data-test-id=\"edit-button-button\"\n className=\"tw-transition tw-cursor-pointer tw-rounded hover:tw-bg-black-10 tw-p-1\"\n >\n <FloatingButton.EditButton>\n <IconPen16 />\n </FloatingButton.EditButton>\n </span>\n\n <span\n role=\"button\"\n tabIndex={0}\n data-test-id=\"remove-button-button\"\n className=\"tw-transition tw-cursor-pointer tw-rounded hover:tw-bg-black-10 tw-p-1\"\n >\n <FloatingButton.UnlinkButton>\n <IconTrashBin16 />\n </FloatingButton.UnlinkButton>\n </span>\n </span>\n </span>\n </div>\n );\n};\n"],"names":["EditModal","urlHtmlProps","useFloatingButtonUrlInput","jsx","jsxs","FloatingButton","IconPen16","IconTrashBin16"],"mappings":";;;;AAKO,MAAMA,IAAY,MAAM;AACrB,QAAAC,IAAeC,EAA0B,CAAA,CAAE;AAG7C,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,gBAAa;AAAA,MACb,WAAU;AAAA,MAEV,UAAC,gBAAAC,EAAA,QAAA,EAAK,gBAAa,yBAAwB,WAAU,8CACjD,UAAA;AAAA,QAAA,gBAAAD,EAAC,QAAK,EAAA,WAAU,0BAA0B,UAAAF,EAAa,cAAa;AAAA,QACpE,gBAAAG,EAAC,QAAK,EAAA,WAAU,oBACZ,UAAA;AAAA,UAAA,gBAAAD;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,MAAK;AAAA,cACL,UAAU;AAAA,cACV,gBAAa;AAAA,cACb,WAAU;AAAA,cAEV,4BAACE,EAAe,YAAf,EACG,UAAA,gBAAAF,EAACG,IAAU,CAAA,GACf;AAAA,YAAA;AAAA,UACJ;AAAA,UAEA,gBAAAH;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,MAAK;AAAA,cACL,UAAU;AAAA,cACV,gBAAa;AAAA,cACb,WAAU;AAAA,cAEV,4BAACE,EAAe,cAAf,EACG,UAAA,gBAAAF,EAACI,IAAe,CAAA,GACpB;AAAA,YAAA;AAAA,UACJ;AAAA,QAAA,GACJ;AAAA,MAAA,GACJ;AAAA,IAAA;AAAA,EAAA;AAGZ;"}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { jsx as e, jsxs as d } from "react/jsx-runtime";
|
|
2
|
-
import { FormControl as
|
|
3
|
-
import { useState as
|
|
2
|
+
import { FormControl as m } from "@frontify/fondue";
|
|
3
|
+
import { useState as y } from "react";
|
|
4
4
|
import { InsertModal as f } from "../../../../LinkPlugin/FloatingLink/InsertLinkModal/InsertModal.es.js";
|
|
5
|
-
import { useInsertModal as
|
|
5
|
+
import { useInsertModal as p } from "./useInsertModal.es.js";
|
|
6
6
|
import { BlockStyles as n } from "../../../../styles.es.js";
|
|
7
|
-
const
|
|
8
|
-
const r =
|
|
7
|
+
const g = () => {
|
|
8
|
+
const r = p(), { state: t, onButtonStyleChange: o } = r;
|
|
9
9
|
return /* @__PURE__ */ e(f, { ...r, testId: "floating-button-insert", children: /* @__PURE__ */ e("div", { className: "tw-pt-5", children: /* @__PURE__ */ d(
|
|
10
|
-
|
|
10
|
+
m,
|
|
11
11
|
{
|
|
12
12
|
label: {
|
|
13
13
|
children: "Button Style",
|
|
@@ -48,22 +48,22 @@ const x = () => {
|
|
|
48
48
|
]
|
|
49
49
|
}
|
|
50
50
|
) }) });
|
|
51
|
-
}, i = ({ id: r, styles: t, isActive: o, onClick:
|
|
52
|
-
const [u, l] =
|
|
51
|
+
}, i = ({ id: r, styles: t, isActive: o, onClick: a, children: s }) => {
|
|
52
|
+
const [u, l] = y(!1), c = () => t && t.hover && u ? { ...t, ...t.hover } : t;
|
|
53
53
|
return /* @__PURE__ */ e(
|
|
54
54
|
"button",
|
|
55
55
|
{
|
|
56
56
|
"data-test-id": `floating-button-insert-${r}`,
|
|
57
57
|
onMouseEnter: () => l(!0),
|
|
58
58
|
onMouseLeave: () => l(!1),
|
|
59
|
-
onClick:
|
|
60
|
-
style: c(),
|
|
59
|
+
onClick: a,
|
|
60
|
+
style: { ...c(), marginTop: 0, marginBottom: 0 },
|
|
61
61
|
className: o ? "tw-outline tw-outline-1 tw-outline-violet-60 tw-outline-offset-2 tw-w-fit" : "tw-w-fit",
|
|
62
|
-
children:
|
|
62
|
+
children: s
|
|
63
63
|
}
|
|
64
64
|
);
|
|
65
65
|
};
|
|
66
66
|
export {
|
|
67
|
-
|
|
67
|
+
g as InsertButtonModal
|
|
68
68
|
};
|
|
69
69
|
//# sourceMappingURL=InsertButtonModal.es.js.map
|
|
@@ -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,SAAA,gBAAAI,EAACC,KAAa,GAAGL,GAAY,QAAO,0BAChC,UAAA,gBAAAI,EAAC,OAAI,EAAA,WAAU,WACX,UAAA,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,OAAO;AAAA,QACH,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,MACd;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAH;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,QAEA,gBAAAC;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,QAEA,gBAAAC;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,SAAA,gBAAAP;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,
|
|
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(), marginTop: 0, marginBottom: 0 }}\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,SAAA,gBAAAI,EAACC,KAAa,GAAGL,GAAY,QAAO,0BAChC,UAAA,gBAAAI,EAAC,OAAI,EAAA,WAAU,WACX,UAAA,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,OAAO;AAAA,QACH,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,MACd;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAH;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,QAEA,gBAAAC;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,QAEA,gBAAAC;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,SAAA,gBAAAP;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,OAAO,EAAE,GAAGK,KAAa,WAAW,GAAG,cAAc,EAAE;AAAA,MACvD,WACIN,IAAW,8EAA8E;AAAA,MAG5F,UAAAE;AAAA,IAAA;AAAA,EAAA;AAGb;"}
|
|
@@ -6,7 +6,7 @@ import { ButtonButton as a } from "./components/ButtonButton.es.js";
|
|
|
6
6
|
import { CustomFloatingButton as g } from "./components/FloatingButton/CustomFloatingButton.es.js";
|
|
7
7
|
import { withButton as l } from "./withButton.es.js";
|
|
8
8
|
import { BlockButtonStyles as m } from "./utils/styles.es.js";
|
|
9
|
-
const d = "button",
|
|
9
|
+
const d = "button", p = "button-plugin", B = (i) => n({
|
|
10
10
|
key: d,
|
|
11
11
|
isElement: !0,
|
|
12
12
|
isInline: !0,
|
|
@@ -36,27 +36,27 @@ const d = "button", f = "button-plugin", p = (i) => n({
|
|
|
36
36
|
getNode: (o) => ({
|
|
37
37
|
type: r,
|
|
38
38
|
url: o.getAttribute("href"),
|
|
39
|
-
target: o.getAttribute("target") || "
|
|
39
|
+
target: o.getAttribute("target") || "_blank"
|
|
40
40
|
})
|
|
41
41
|
}
|
|
42
42
|
})
|
|
43
43
|
})();
|
|
44
44
|
class P extends e {
|
|
45
45
|
constructor({ styles: t = m, ...r }) {
|
|
46
|
-
super(
|
|
46
|
+
super(p, {
|
|
47
47
|
button: a,
|
|
48
48
|
markupElement: new s(),
|
|
49
49
|
...r
|
|
50
50
|
}), this.styles = {}, this.styles = t, this.appBridge = r == null ? void 0 : r.appBridge;
|
|
51
51
|
}
|
|
52
52
|
plugins() {
|
|
53
|
-
return [
|
|
53
|
+
return [B(this.appBridge)];
|
|
54
54
|
}
|
|
55
55
|
}
|
|
56
56
|
export {
|
|
57
|
-
|
|
57
|
+
p as BUTTON_PLUGIN,
|
|
58
58
|
P as ButtonPlugin,
|
|
59
59
|
d as ELEMENT_BUTTON,
|
|
60
|
-
|
|
60
|
+
B as createButtonPlugin
|
|
61
61
|
};
|
|
62
62
|
//# sourceMappingURL=createButtonPlugin.es.js.map
|
|
@@ -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 type { CSSProperties } from 'react';\nimport { isValidUrl } from '../../../Link/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') || '
|
|
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 type { CSSProperties } from 'react';\nimport { isValidUrl } from '../../../Link/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;"}
|
|
@@ -15,6 +15,8 @@ const t = {
|
|
|
15
15
|
borderRadius: "var(--f-theme-settings-button-primary-border-radius)",
|
|
16
16
|
borderWidth: "var(--f-theme-settings-button-primary-border-width)",
|
|
17
17
|
color: "var(--f-theme-settings-button-primary-color)",
|
|
18
|
+
marginTop: "10px",
|
|
19
|
+
marginBottom: "10px",
|
|
18
20
|
display: "inline-block",
|
|
19
21
|
hover: {
|
|
20
22
|
backgroundColor: "var(--f-theme-settings-button-primary-background-color-hover)",
|
|
@@ -39,6 +41,8 @@ const t = {
|
|
|
39
41
|
borderWidth: "var(--f-theme-settings-button-secondary-border-width)",
|
|
40
42
|
color: "var(--f-theme-settings-button-secondary-color)",
|
|
41
43
|
display: "inline-block",
|
|
44
|
+
marginTop: "10px",
|
|
45
|
+
marginBottom: "10px",
|
|
42
46
|
hover: {
|
|
43
47
|
backgroundColor: "var(--f-theme-settings-button-secondary-background-color-hover)",
|
|
44
48
|
borderColor: "var(--f-theme-settings-button-secondary-border-color-hover)",
|
|
@@ -62,6 +66,8 @@ const t = {
|
|
|
62
66
|
borderWidth: "var(--f-theme-settings-button-tertiary-border-width)",
|
|
63
67
|
color: "var(--f-theme-settings-button-tertiary-color)",
|
|
64
68
|
display: "inline-block",
|
|
69
|
+
marginTop: "10px",
|
|
70
|
+
marginBottom: "10px",
|
|
65
71
|
hover: {
|
|
66
72
|
backgroundColor: "var(--f-theme-settings-button-tertiary-background-color-hover)",
|
|
67
73
|
borderColor: "var(--f-theme-settings-button-tertiary-border-color-hover)",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.es.js","sources":["../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/utils/styles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { CSSProperties } from 'react';\n\nexport const BlockButtonStyles: Record<string, CSSProperties & { hover?: CSSProperties }> = {\n buttonPrimary: {\n fontFamily: 'var(--f-theme-settings-button-primary-font-family)',\n fontSize: 'var(--f-theme-settings-button-primary-font-size)',\n fontWeight: 'var(--f-theme-settings-button-primary-font-weight)',\n lineHeight: 'var(--f-theme-settings-button-primary-line-height)',\n paddingTop: 'var(--f-theme-settings-button-primary-padding-top)',\n paddingRight: 'var(--f-theme-settings-button-primary-padding-right)',\n paddingBottom: 'var(--f-theme-settings-button-primary-padding-bottom)',\n paddingLeft: 'var(--f-theme-settings-button-primary-padding-left)',\n fontStyle: 'var(--f-theme-settings-button-primary-font-style)',\n textTransform: 'var(--f-theme-settings-button-primary-text-transform)' as CSSProperties['textTransform'],\n backgroundColor: 'var(--f-theme-settings-button-primary-background-color)',\n borderColor: 'var(--f-theme-settings-button-primary-border-color)',\n borderRadius: 'var(--f-theme-settings-button-primary-border-radius)',\n borderWidth: 'var(--f-theme-settings-button-primary-border-width)',\n color: 'var(--f-theme-settings-button-primary-color)',\n display: 'inline-block',\n hover: {\n backgroundColor: 'var(--f-theme-settings-button-primary-background-color-hover)',\n borderColor: 'var(--f-theme-settings-button-primary-border-color-hover)',\n color: 'var(--f-theme-settings-button-primary-color-hover)',\n },\n },\n\n buttonSecondary: {\n fontFamily: 'var(--f-theme-settings-button-secondary-font-family)',\n fontSize: 'var(--f-theme-settings-button-secondary-font-size)',\n fontWeight: 'var(--f-theme-settings-button-secondary-font-weight)',\n lineHeight: 'var(--f-theme-settings-button-secondary-line-height)',\n paddingTop: 'var(--f-theme-settings-button-secondary-padding-top)',\n paddingRight: 'var(--f-theme-settings-button-secondary-padding-right)',\n paddingBottom: 'var(--f-theme-settings-button-secondary-padding-bottom)',\n paddingLeft: 'var(--f-theme-settings-button-secondary-padding-left)',\n fontStyle: 'var(--f-theme-settings-button-secondary-font-style)',\n textTransform: 'var(--f-theme-settings-button-secondary-text-transform)' as CSSProperties['textTransform'],\n backgroundColor: 'var(--f-theme-settings-button-secondary-background-color)',\n borderColor: 'var(--f-theme-settings-button-secondary-border-color)',\n borderRadius: 'var(--f-theme-settings-button-secondary-border-radius)',\n borderWidth: 'var(--f-theme-settings-button-secondary-border-width)',\n color: 'var(--f-theme-settings-button-secondary-color)',\n display: 'inline-block',\n hover: {\n backgroundColor: 'var(--f-theme-settings-button-secondary-background-color-hover)',\n borderColor: 'var(--f-theme-settings-button-secondary-border-color-hover)',\n color: 'var(--f-theme-settings-button-secondary-color-hover)',\n },\n },\n\n buttonTertiary: {\n fontFamily: 'var(--f-theme-settings-button-tertiary-font-family)',\n fontSize: 'var(--f-theme-settings-button-tertiary-font-size)',\n fontWeight: 'var(--f-theme-settings-button-tertiary-font-weight)',\n lineHeight: 'var(--f-theme-settings-button-tertiary-line-height)',\n paddingTop: 'var(--f-theme-settings-button-tertiary-padding-top)',\n paddingRight: 'var(--f-theme-settings-button-tertiary-padding-right)',\n paddingBottom: 'var(--f-theme-settings-button-tertiary-padding-bottom)',\n paddingLeft: 'var(--f-theme-settings-button-tertiary-padding-left)',\n fontStyle: 'var(--f-theme-settings-button-tertiary-font-style)',\n textTransform: 'var(--f-theme-settings-button-tertiary-text-transform)' as CSSProperties['textTransform'],\n backgroundColor: 'var(--f-theme-settings-button-tertiary-background-color)',\n borderColor: 'var(--f-theme-settings-button-tertiary-border-color)',\n borderRadius: 'var(--f-theme-settings-button-tertiary-border-radius)',\n borderWidth: 'var(--f-theme-settings-button-tertiary-border-width)',\n color: 'var(--f-theme-settings-button-tertiary-color)',\n display: 'inline-block',\n hover: {\n backgroundColor: 'var(--f-theme-settings-button-tertiary-background-color-hover)',\n borderColor: 'var(--f-theme-settings-button-tertiary-border-color-hover)',\n color: 'var(--f-theme-settings-button-tertiary-color-hover)',\n },\n },\n};\n"],"names":["BlockButtonStyles"],"mappings":"AAIO,MAAMA,IAA+E;AAAA,EACxF,eAAe;AAAA,IACX,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,eAAe;AAAA,IACf,aAAa;AAAA,IACb,WAAW;AAAA,IACX,eAAe;AAAA,IACf,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,cAAc;AAAA,IACd,aAAa;AAAA,IACb,OAAO;AAAA,IACP,SAAS;AAAA,IACT,OAAO;AAAA,MACH,iBAAiB;AAAA,MACjB,aAAa;AAAA,MACb,OAAO;AAAA,IACX;AAAA,EACJ;AAAA,EAEA,iBAAiB;AAAA,IACb,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,eAAe;AAAA,IACf,aAAa;AAAA,IACb,WAAW;AAAA,IACX,eAAe;AAAA,IACf,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,cAAc;AAAA,IACd,aAAa;AAAA,IACb,OAAO;AAAA,IACP,SAAS;AAAA,IACT,OAAO;AAAA,MACH,iBAAiB;AAAA,MACjB,aAAa;AAAA,MACb,OAAO;AAAA,IACX;AAAA,EACJ;AAAA,EAEA,gBAAgB;AAAA,IACZ,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,eAAe;AAAA,IACf,aAAa;AAAA,IACb,WAAW;AAAA,IACX,eAAe;AAAA,IACf,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,cAAc;AAAA,IACd,aAAa;AAAA,IACb,OAAO;AAAA,IACP,SAAS;AAAA,IACT,OAAO;AAAA,MACH,iBAAiB;AAAA,MACjB,aAAa;AAAA,MACb,OAAO;AAAA,IACX;AAAA,EACJ;AACJ;"}
|
|
1
|
+
{"version":3,"file":"styles.es.js","sources":["../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/utils/styles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { CSSProperties } from 'react';\n\nexport const BlockButtonStyles: Record<string, CSSProperties & { hover?: CSSProperties }> = {\n buttonPrimary: {\n fontFamily: 'var(--f-theme-settings-button-primary-font-family)',\n fontSize: 'var(--f-theme-settings-button-primary-font-size)',\n fontWeight: 'var(--f-theme-settings-button-primary-font-weight)',\n lineHeight: 'var(--f-theme-settings-button-primary-line-height)',\n paddingTop: 'var(--f-theme-settings-button-primary-padding-top)',\n paddingRight: 'var(--f-theme-settings-button-primary-padding-right)',\n paddingBottom: 'var(--f-theme-settings-button-primary-padding-bottom)',\n paddingLeft: 'var(--f-theme-settings-button-primary-padding-left)',\n fontStyle: 'var(--f-theme-settings-button-primary-font-style)',\n textTransform: 'var(--f-theme-settings-button-primary-text-transform)' as CSSProperties['textTransform'],\n backgroundColor: 'var(--f-theme-settings-button-primary-background-color)',\n borderColor: 'var(--f-theme-settings-button-primary-border-color)',\n borderRadius: 'var(--f-theme-settings-button-primary-border-radius)',\n borderWidth: 'var(--f-theme-settings-button-primary-border-width)',\n color: 'var(--f-theme-settings-button-primary-color)',\n marginTop: '10px',\n marginBottom: '10px',\n display: 'inline-block',\n hover: {\n backgroundColor: 'var(--f-theme-settings-button-primary-background-color-hover)',\n borderColor: 'var(--f-theme-settings-button-primary-border-color-hover)',\n color: 'var(--f-theme-settings-button-primary-color-hover)',\n },\n },\n\n buttonSecondary: {\n fontFamily: 'var(--f-theme-settings-button-secondary-font-family)',\n fontSize: 'var(--f-theme-settings-button-secondary-font-size)',\n fontWeight: 'var(--f-theme-settings-button-secondary-font-weight)',\n lineHeight: 'var(--f-theme-settings-button-secondary-line-height)',\n paddingTop: 'var(--f-theme-settings-button-secondary-padding-top)',\n paddingRight: 'var(--f-theme-settings-button-secondary-padding-right)',\n paddingBottom: 'var(--f-theme-settings-button-secondary-padding-bottom)',\n paddingLeft: 'var(--f-theme-settings-button-secondary-padding-left)',\n fontStyle: 'var(--f-theme-settings-button-secondary-font-style)',\n textTransform: 'var(--f-theme-settings-button-secondary-text-transform)' as CSSProperties['textTransform'],\n backgroundColor: 'var(--f-theme-settings-button-secondary-background-color)',\n borderColor: 'var(--f-theme-settings-button-secondary-border-color)',\n borderRadius: 'var(--f-theme-settings-button-secondary-border-radius)',\n borderWidth: 'var(--f-theme-settings-button-secondary-border-width)',\n color: 'var(--f-theme-settings-button-secondary-color)',\n display: 'inline-block',\n marginTop: '10px',\n marginBottom: '10px',\n hover: {\n backgroundColor: 'var(--f-theme-settings-button-secondary-background-color-hover)',\n borderColor: 'var(--f-theme-settings-button-secondary-border-color-hover)',\n color: 'var(--f-theme-settings-button-secondary-color-hover)',\n },\n },\n\n buttonTertiary: {\n fontFamily: 'var(--f-theme-settings-button-tertiary-font-family)',\n fontSize: 'var(--f-theme-settings-button-tertiary-font-size)',\n fontWeight: 'var(--f-theme-settings-button-tertiary-font-weight)',\n lineHeight: 'var(--f-theme-settings-button-tertiary-line-height)',\n paddingTop: 'var(--f-theme-settings-button-tertiary-padding-top)',\n paddingRight: 'var(--f-theme-settings-button-tertiary-padding-right)',\n paddingBottom: 'var(--f-theme-settings-button-tertiary-padding-bottom)',\n paddingLeft: 'var(--f-theme-settings-button-tertiary-padding-left)',\n fontStyle: 'var(--f-theme-settings-button-tertiary-font-style)',\n textTransform: 'var(--f-theme-settings-button-tertiary-text-transform)' as CSSProperties['textTransform'],\n backgroundColor: 'var(--f-theme-settings-button-tertiary-background-color)',\n borderColor: 'var(--f-theme-settings-button-tertiary-border-color)',\n borderRadius: 'var(--f-theme-settings-button-tertiary-border-radius)',\n borderWidth: 'var(--f-theme-settings-button-tertiary-border-width)',\n color: 'var(--f-theme-settings-button-tertiary-color)',\n display: 'inline-block',\n marginTop: '10px',\n marginBottom: '10px',\n hover: {\n backgroundColor: 'var(--f-theme-settings-button-tertiary-background-color-hover)',\n borderColor: 'var(--f-theme-settings-button-tertiary-border-color-hover)',\n color: 'var(--f-theme-settings-button-tertiary-color-hover)',\n },\n },\n};\n"],"names":["BlockButtonStyles"],"mappings":"AAIO,MAAMA,IAA+E;AAAA,EACxF,eAAe;AAAA,IACX,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,eAAe;AAAA,IACf,aAAa;AAAA,IACb,WAAW;AAAA,IACX,eAAe;AAAA,IACf,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,cAAc;AAAA,IACd,aAAa;AAAA,IACb,OAAO;AAAA,IACP,WAAW;AAAA,IACX,cAAc;AAAA,IACd,SAAS;AAAA,IACT,OAAO;AAAA,MACH,iBAAiB;AAAA,MACjB,aAAa;AAAA,MACb,OAAO;AAAA,IACX;AAAA,EACJ;AAAA,EAEA,iBAAiB;AAAA,IACb,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,eAAe;AAAA,IACf,aAAa;AAAA,IACb,WAAW;AAAA,IACX,eAAe;AAAA,IACf,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,cAAc;AAAA,IACd,aAAa;AAAA,IACb,OAAO;AAAA,IACP,SAAS;AAAA,IACT,WAAW;AAAA,IACX,cAAc;AAAA,IACd,OAAO;AAAA,MACH,iBAAiB;AAAA,MACjB,aAAa;AAAA,MACb,OAAO;AAAA,IACX;AAAA,EACJ;AAAA,EAEA,gBAAgB;AAAA,IACZ,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,eAAe;AAAA,IACf,aAAa;AAAA,IACb,WAAW;AAAA,IACX,eAAe;AAAA,IACf,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,cAAc;AAAA,IACd,aAAa;AAAA,IACb,OAAO;AAAA,IACP,SAAS;AAAA,IACT,WAAW;AAAA,IACX,cAAc;AAAA,IACd,OAAO;AAAA,MACH,iBAAiB;AAAA,MACjB,aAAa;AAAA,MACb,OAAO;AAAA,IACX;AAAA,EACJ;AACJ;"}
|
package/dist/components/RichTextEditor/plugins/LinkPlugin/FloatingLink/EditLinkModal/EditModal.es.js
CHANGED
|
@@ -1,37 +1,43 @@
|
|
|
1
|
-
import { jsx as t, jsxs as
|
|
2
|
-
import { IconPen16 as
|
|
1
|
+
import { jsx as t, jsxs as e } from "react/jsx-runtime";
|
|
2
|
+
import { IconPen16 as o, IconTrashBin16 as r } from "@frontify/fondue";
|
|
3
3
|
import { useFloatingLinkUrlInput as a } from "@udecode/plate";
|
|
4
|
-
import { FloatingLink as
|
|
5
|
-
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
{
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
4
|
+
import { FloatingLink as n } from "../FloatingLink.es.js";
|
|
5
|
+
const c = () => {
|
|
6
|
+
const i = a({});
|
|
7
|
+
return /* @__PURE__ */ t(
|
|
8
|
+
"div",
|
|
9
|
+
{
|
|
10
|
+
"data-test-id": "floating-link-edit",
|
|
11
|
+
className: "tw-bg-white tw-text-text tw-rounded tw-shadow tw-p-4 tw-min-w-[400px]",
|
|
12
|
+
children: /* @__PURE__ */ e("span", { "data-test-id": "preview-link-flyout", className: "tw-flex tw-justify-between tw-items-center", children: [
|
|
13
|
+
/* @__PURE__ */ t("span", { className: "tw-pointer-events-none", children: i.defaultValue }),
|
|
14
|
+
/* @__PURE__ */ e("span", { className: "tw-flex tw-gap-2", children: [
|
|
15
|
+
/* @__PURE__ */ t(
|
|
16
|
+
"span",
|
|
17
|
+
{
|
|
18
|
+
role: "button",
|
|
19
|
+
tabIndex: 0,
|
|
20
|
+
"data-test-id": "edit-link-button",
|
|
21
|
+
className: "tw-transition tw-cursor-pointer tw-rounded hover:tw-bg-black-10 tw-p-1",
|
|
22
|
+
children: /* @__PURE__ */ t(n.EditButton, { children: /* @__PURE__ */ t(o, {}) })
|
|
23
|
+
}
|
|
24
|
+
),
|
|
25
|
+
/* @__PURE__ */ t(
|
|
26
|
+
"span",
|
|
27
|
+
{
|
|
28
|
+
role: "button",
|
|
29
|
+
tabIndex: 0,
|
|
30
|
+
"data-test-id": "remove-link-button",
|
|
31
|
+
className: "tw-transition tw-cursor-pointer tw-rounded hover:tw-bg-black-10 tw-p-1",
|
|
32
|
+
children: /* @__PURE__ */ t(n.UnlinkButton, { children: /* @__PURE__ */ t(r, {}) })
|
|
33
|
+
}
|
|
34
|
+
)
|
|
35
|
+
] })
|
|
36
|
+
] })
|
|
37
|
+
}
|
|
38
|
+
);
|
|
33
39
|
};
|
|
34
40
|
export {
|
|
35
|
-
|
|
41
|
+
c as EditModal
|
|
36
42
|
};
|
|
37
43
|
//# sourceMappingURL=EditModal.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditModal.es.js","sources":["../../../../../../../src/components/RichTextEditor/plugins/LinkPlugin/FloatingLink/EditLinkModal/EditModal.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconPen16, IconTrashBin16 } from '@frontify/fondue';\nimport { useFloatingLinkUrlInput } from '@udecode/plate';\nimport { FloatingLink } from '../FloatingLink';\
|
|
1
|
+
{"version":3,"file":"EditModal.es.js","sources":["../../../../../../../src/components/RichTextEditor/plugins/LinkPlugin/FloatingLink/EditLinkModal/EditModal.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconPen16, IconTrashBin16 } from '@frontify/fondue';\nimport { useFloatingLinkUrlInput } from '@udecode/plate';\nimport { FloatingLink } from '../FloatingLink';\n\nexport const EditModal = () => {\n const urlHtmlProps = useFloatingLinkUrlInput({});\n\n return (\n <div\n data-test-id=\"floating-link-edit\"\n className=\"tw-bg-white tw-text-text tw-rounded tw-shadow tw-p-4 tw-min-w-[400px]\"\n >\n <span data-test-id={'preview-link-flyout'} className=\"tw-flex tw-justify-between tw-items-center\">\n <span className=\"tw-pointer-events-none\">{urlHtmlProps.defaultValue}</span>\n <span className=\"tw-flex tw-gap-2\">\n <span\n role=\"button\"\n tabIndex={0}\n data-test-id={'edit-link-button'}\n className=\"tw-transition tw-cursor-pointer tw-rounded hover:tw-bg-black-10 tw-p-1\"\n >\n <FloatingLink.EditButton>\n <IconPen16 />\n </FloatingLink.EditButton>\n </span>\n\n <span\n role=\"button\"\n tabIndex={0}\n data-test-id={'remove-link-button'}\n className=\"tw-transition tw-cursor-pointer tw-rounded hover:tw-bg-black-10 tw-p-1\"\n >\n <FloatingLink.UnlinkButton>\n <IconTrashBin16 />\n </FloatingLink.UnlinkButton>\n </span>\n </span>\n </span>\n </div>\n );\n};\n"],"names":["EditModal","urlHtmlProps","useFloatingLinkUrlInput","jsx","jsxs","FloatingLink","IconPen16","IconTrashBin16"],"mappings":";;;;AAMO,MAAMA,IAAY,MAAM;AACrB,QAAAC,IAAeC,EAAwB,CAAA,CAAE;AAG3C,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,gBAAa;AAAA,MACb,WAAU;AAAA,MAEV,UAAC,gBAAAC,EAAA,QAAA,EAAK,gBAAc,uBAAuB,WAAU,8CACjD,UAAA;AAAA,QAAA,gBAAAD,EAAC,QAAK,EAAA,WAAU,0BAA0B,UAAAF,EAAa,cAAa;AAAA,QACpE,gBAAAG,EAAC,QAAK,EAAA,WAAU,oBACZ,UAAA;AAAA,UAAA,gBAAAD;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,MAAK;AAAA,cACL,UAAU;AAAA,cACV,gBAAc;AAAA,cACd,WAAU;AAAA,cAEV,4BAACE,EAAa,YAAb,EACG,UAAA,gBAAAF,EAACG,IAAU,CAAA,GACf;AAAA,YAAA;AAAA,UACJ;AAAA,UAEA,gBAAAH;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,MAAK;AAAA,cACL,UAAU;AAAA,cACV,gBAAc;AAAA,cACd,WAAU;AAAA,cAEV,4BAACE,EAAa,cAAb,EACG,UAAA,gBAAAF,EAACI,IAAe,CAAA,GACpB;AAAA,YAAA;AAAA,UACJ;AAAA,QAAA,GACJ;AAAA,MAAA,GACJ;AAAA,IAAA;AAAA,EAAA;AAGZ;"}
|