@frontify/guideline-blocks-settings 0.36.1 → 0.36.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/dist/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/CustomFloatingButton.es.js +41 -15
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/CustomFloatingButton.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/EditButtonModal/EditModal.es.js +24 -12
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/EditButtonModal/EditModal.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/LinkPlugin/FloatingLink/CustomFloatingLink.es.js +45 -19
- package/dist/components/RichTextEditor/plugins/LinkPlugin/FloatingLink/CustomFloatingLink.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/LinkPlugin/FloatingLink/EditLinkModal/EditModal.es.js +23 -11
- 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 +1 -1
|
@@ -1,28 +1,54 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { offset as
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
1
|
+
import { jsxs as g, Fragment as b, jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import { offset as B, flip as E, useEditorRef as F, TextStyles as d } from "@frontify/fondue";
|
|
3
|
+
import { createPortal as m } from "react-dom";
|
|
4
|
+
import { BlockStyles as l } from "../../../styles.es.js";
|
|
5
|
+
import { EditModal as x } from "./EditButtonModal/EditModal.es.js";
|
|
6
|
+
import { InsertButtonModal as P } from "./InsertButtonModal/InsertButtonModal.es.js";
|
|
5
7
|
import { useFloatingButtonInsert as h } from "./useFloatingButtonInsert.es.js";
|
|
6
|
-
import { useFloatingButtonEdit as
|
|
7
|
-
import { useFloatingButtonSelectors as
|
|
8
|
-
const
|
|
8
|
+
import { useFloatingButtonEdit as O } from "./useFloatingButtonEdit.es.js";
|
|
9
|
+
import { useFloatingButtonSelectors as R } from "./floatingButtonStore.es.js";
|
|
10
|
+
const a = {
|
|
9
11
|
placement: "bottom-start",
|
|
10
12
|
strategy: "absolute",
|
|
11
13
|
middleware: [
|
|
12
|
-
|
|
13
|
-
|
|
14
|
+
B(12),
|
|
15
|
+
E({
|
|
14
16
|
padding: 12,
|
|
15
17
|
fallbackPlacements: ["bottom-end", "top-start", "top-end"]
|
|
16
18
|
})
|
|
17
19
|
]
|
|
18
|
-
},
|
|
19
|
-
const { ref:
|
|
20
|
-
return /* @__PURE__ */
|
|
21
|
-
|
|
22
|
-
|
|
20
|
+
}, q = () => {
|
|
21
|
+
const { ref: p, ...e } = h(a), { ref: c, ...r } = O(a), f = F(), o = R(), n = o.isOpen(f.id), u = o.isEditing(), s = o.mode(), i = /* @__PURE__ */ t(P, {}), y = u ? i : /* @__PURE__ */ t(x, {});
|
|
22
|
+
return /* @__PURE__ */ g(b, { children: [
|
|
23
|
+
n && s === "insert" && m(
|
|
24
|
+
/* @__PURE__ */ t(
|
|
25
|
+
"div",
|
|
26
|
+
{
|
|
27
|
+
"data-is-underlay": !0,
|
|
28
|
+
ref: p,
|
|
29
|
+
...e,
|
|
30
|
+
style: { ...e.style, ...l[d.p] },
|
|
31
|
+
children: i
|
|
32
|
+
}
|
|
33
|
+
),
|
|
34
|
+
document.body
|
|
35
|
+
),
|
|
36
|
+
n && s === "edit" && m(
|
|
37
|
+
/* @__PURE__ */ t(
|
|
38
|
+
"div",
|
|
39
|
+
{
|
|
40
|
+
"data-is-underlay": !0,
|
|
41
|
+
ref: c,
|
|
42
|
+
...r,
|
|
43
|
+
style: { ...r.style, ...l[d.p] },
|
|
44
|
+
children: y
|
|
45
|
+
}
|
|
46
|
+
),
|
|
47
|
+
document.body
|
|
48
|
+
)
|
|
23
49
|
] });
|
|
24
50
|
};
|
|
25
51
|
export {
|
|
26
|
-
|
|
52
|
+
q as CustomFloatingButton
|
|
27
53
|
};
|
|
28
54
|
//# sourceMappingURL=CustomFloatingButton.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CustomFloatingButton.es.js","sources":["../../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/CustomFloatingButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type UseVirtualFloatingOptions, flip, offset, useEditorRef } from '@frontify/fondue';\n\nimport { useFloatingButtonEdit, useFloatingButtonInsert, useFloatingButtonSelectors } from '../FloatingButton';\n\nimport { EditModal } from './EditButtonModal/EditModal';\nimport { InsertButtonModal } from './InsertButtonModal/InsertButtonModal';\n\nconst floatingOptions: UseVirtualFloatingOptions = {\n placement: 'bottom-start',\n strategy: 'absolute',\n middleware: [\n offset(12),\n flip({\n padding: 12,\n fallbackPlacements: ['bottom-end', 'top-start', 'top-end'],\n }),\n ],\n};\n\nexport const CustomFloatingButton = () => {\n const { ref: insertRef, ...insertProps } = useFloatingButtonInsert(floatingOptions);\n const { ref: editRef, ...editProps } = useFloatingButtonEdit(floatingOptions);\n const editor = useEditorRef();\n const state = useFloatingButtonSelectors();\n const isOpen = state.isOpen(editor.id);\n const isEditing = state.isEditing();\n const mode = state.mode();\n\n const input = <InsertButtonModal />;\n const editContent = isEditing ? input : <EditModal />;\n\n return (\n <>\n {isOpen
|
|
1
|
+
{"version":3,"file":"CustomFloatingButton.es.js","sources":["../../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/CustomFloatingButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { TextStyles, type UseVirtualFloatingOptions, flip, offset, useEditorRef } from '@frontify/fondue';\nimport { createPortal } from 'react-dom';\n\nimport { BlockStyles } from '../../../../../RichTextEditor/plugins/styles';\nimport { useFloatingButtonEdit, useFloatingButtonInsert, useFloatingButtonSelectors } from '../FloatingButton';\n\nimport { EditModal } from './EditButtonModal/EditModal';\nimport { InsertButtonModal } from './InsertButtonModal/InsertButtonModal';\n\nconst floatingOptions: UseVirtualFloatingOptions = {\n placement: 'bottom-start',\n strategy: 'absolute',\n middleware: [\n offset(12),\n flip({\n padding: 12,\n fallbackPlacements: ['bottom-end', 'top-start', 'top-end'],\n }),\n ],\n};\n\nexport const CustomFloatingButton = () => {\n const { ref: insertRef, ...insertProps } = useFloatingButtonInsert(floatingOptions);\n const { ref: editRef, ...editProps } = useFloatingButtonEdit(floatingOptions);\n const editor = useEditorRef();\n const state = useFloatingButtonSelectors();\n const isOpen = state.isOpen(editor.id);\n const isEditing = state.isEditing();\n const mode = state.mode();\n\n const input = <InsertButtonModal />;\n const editContent = isEditing ? input : <EditModal />;\n\n return (\n <>\n {isOpen &&\n mode === 'insert' &&\n createPortal(\n <div\n data-is-underlay\n ref={insertRef}\n {...insertProps}\n style={{ ...insertProps.style, ...BlockStyles[TextStyles.p] }}\n >\n {input}\n </div>,\n document.body,\n )}\n\n {isOpen &&\n mode === 'edit' &&\n createPortal(\n <div\n data-is-underlay\n ref={editRef}\n {...editProps}\n style={{ ...editProps.style, ...BlockStyles[TextStyles.p] }}\n >\n {editContent}\n </div>,\n document.body,\n )}\n </>\n );\n};\n"],"names":["floatingOptions","offset","flip","CustomFloatingButton","insertRef","insertProps","useFloatingButtonInsert","editRef","editProps","useFloatingButtonEdit","editor","useEditorRef","state","useFloatingButtonSelectors","isOpen","isEditing","mode","input","InsertButtonModal","editContent","jsx","EditModal","jsxs","Fragment","createPortal","BlockStyles","TextStyles"],"mappings":";;;;;;;;;AAWA,MAAMA,IAA6C;AAAA,EAC/C,WAAW;AAAA,EACX,UAAU;AAAA,EACV,YAAY;AAAA,IACRC,EAAO,EAAE;AAAA,IACTC,EAAK;AAAA,MACD,SAAS;AAAA,MACT,oBAAoB,CAAC,cAAc,aAAa,SAAS;AAAA,IAAA,CAC5D;AAAA,EACL;AACJ,GAEaC,IAAuB,MAAM;AACtC,QAAM,EAAE,KAAKC,GAAW,GAAGC,EAAY,IAAIC,EAAwBN,CAAe,GAC5E,EAAE,KAAKO,GAAS,GAAGC,EAAU,IAAIC,EAAsBT,CAAe,GACtEU,IAASC,KACTC,IAAQC,KACRC,IAASF,EAAM,OAAOF,EAAO,EAAE,GAC/BK,IAAYH,EAAM,aAClBI,IAAOJ,EAAM,QAEbK,sBAASC,GAAkB,CAAA,CAAA,GAC3BC,IAAcJ,IAAYE,IAAQ,gBAAAG,EAACC,GAAU,CAAA,CAAA;AAEnD,SAES,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAAT,KACGE,MAAS,YACTQ;AAAA,MACI,gBAAAJ;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,oBAAgB;AAAA,UAChB,KAAKhB;AAAA,UACJ,GAAGC;AAAA,UACJ,OAAO,EAAE,GAAGA,EAAY,OAAO,GAAGoB,EAAYC,EAAW,CAAC,EAAE;AAAA,UAE3D,UAAAT;AAAA,QAAA;AAAA,MACL;AAAA,MACA,SAAS;AAAA,IACb;AAAA,IAEHH,KACGE,MAAS,UACTQ;AAAA,MACI,gBAAAJ;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,oBAAgB;AAAA,UAChB,KAAKb;AAAA,UACJ,GAAGC;AAAA,UACJ,OAAO,EAAE,GAAGA,EAAU,OAAO,GAAGiB,EAAYC,EAAW,CAAC,EAAE;AAAA,UAEzD,UAAAP;AAAA,QAAA;AAAA,MACL;AAAA,MACA,SAAS;AAAA,IACb;AAAA,EACR,EAAA,CAAA;AAER;"}
|
|
@@ -1,41 +1,53 @@
|
|
|
1
1
|
import { jsx as t, jsxs as e } from "react/jsx-runtime";
|
|
2
|
-
import { useEditorRef as n, FloatingModalWrapper as
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
|
|
2
|
+
import { useEditorRef as n, FloatingModalWrapper as i, IconPen16 as a, focusEditor as d, IconTrashBin16 as l } from "@frontify/fondue";
|
|
3
|
+
import { LINK_PLUGIN as s } from "../../../../LinkPlugin/id.es.js";
|
|
4
|
+
import { BlockStyles as c } from "../../../../styles.es.js";
|
|
5
|
+
import { floatingButtonSelectors as r } from "../floatingButtonStore.es.js";
|
|
6
|
+
import { triggerFloatingButtonEdit as u } from "../../../utils/triggerFloatingButtonEdit.es.js";
|
|
7
|
+
import { unwrapButton as p } from "../../../transforms/unwrapButton.es.js";
|
|
8
|
+
const k = () => {
|
|
7
9
|
const o = n();
|
|
8
|
-
return /* @__PURE__ */ t(
|
|
9
|
-
/* @__PURE__ */ t(
|
|
10
|
+
return /* @__PURE__ */ t(i, { padding: "16px", minWidth: "400px", "data-test-id": "floating-button-edit", children: /* @__PURE__ */ e("span", { "data-test-id": "preview-button-flyout", className: "tw-flex tw-justify-between tw-items-center tw-gap-2", children: [
|
|
11
|
+
/* @__PURE__ */ t(
|
|
12
|
+
"a",
|
|
13
|
+
{
|
|
14
|
+
"data-test-id": "floating-button-edit-url",
|
|
15
|
+
href: r.url(),
|
|
16
|
+
target: "_blank",
|
|
17
|
+
rel: "noopener noreferrer",
|
|
18
|
+
style: c[s],
|
|
19
|
+
children: r.url()
|
|
20
|
+
}
|
|
21
|
+
),
|
|
10
22
|
/* @__PURE__ */ e("span", { className: "tw-flex tw-gap-2", children: [
|
|
11
23
|
/* @__PURE__ */ t(
|
|
12
24
|
"button",
|
|
13
25
|
{
|
|
14
26
|
onClick: () => {
|
|
15
|
-
|
|
27
|
+
u(o);
|
|
16
28
|
},
|
|
17
29
|
tabIndex: 0,
|
|
18
30
|
"data-test-id": "edit-button-button",
|
|
19
31
|
className: "tw-transition tw-cursor-pointer tw-rounded hover:tw-bg-black-10 tw-p-1",
|
|
20
|
-
children: /* @__PURE__ */ t(
|
|
32
|
+
children: /* @__PURE__ */ t(a, {})
|
|
21
33
|
}
|
|
22
34
|
),
|
|
23
35
|
/* @__PURE__ */ t(
|
|
24
36
|
"button",
|
|
25
37
|
{
|
|
26
38
|
onClick: () => {
|
|
27
|
-
|
|
39
|
+
p(o), d(o, o.selection ?? void 0);
|
|
28
40
|
},
|
|
29
41
|
tabIndex: 0,
|
|
30
42
|
"data-test-id": "remove-button-button",
|
|
31
43
|
className: "tw-transition tw-cursor-pointer tw-rounded hover:tw-bg-black-10 tw-p-1",
|
|
32
|
-
children: /* @__PURE__ */ t(
|
|
44
|
+
children: /* @__PURE__ */ t(l, {})
|
|
33
45
|
}
|
|
34
46
|
)
|
|
35
47
|
] })
|
|
36
48
|
] }) });
|
|
37
49
|
};
|
|
38
50
|
export {
|
|
39
|
-
|
|
51
|
+
k as EditModal
|
|
40
52
|
};
|
|
41
53
|
//# 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 { FloatingModalWrapper, IconPen16, IconTrashBin16, focusEditor, useEditorRef } from '@frontify/fondue';\n\nimport { unwrapButton } from '../../../transforms';\nimport { triggerFloatingButtonEdit } from '../../../utils';\nimport { floatingButtonSelectors } from '../floatingButtonStore';\n\nexport const EditModal = () => {\n const editor = useEditorRef();\n return (\n <FloatingModalWrapper padding=\"16px\" minWidth=\"400px\" data-test-id=\"floating-button-edit\">\n <span data-test-id=\"preview-button-flyout\" className=\"tw-flex tw-justify-between tw-items-center\">\n <
|
|
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 { FloatingModalWrapper, IconPen16, IconTrashBin16, focusEditor, useEditorRef } from '@frontify/fondue';\n\nimport { LINK_PLUGIN } from '../../../../LinkPlugin/id';\nimport { BlockStyles } from '../../../../styles';\nimport { unwrapButton } from '../../../transforms';\nimport { triggerFloatingButtonEdit } from '../../../utils';\nimport { floatingButtonSelectors } from '../floatingButtonStore';\n\nexport const EditModal = () => {\n const editor = useEditorRef();\n return (\n <FloatingModalWrapper padding=\"16px\" minWidth=\"400px\" data-test-id=\"floating-button-edit\">\n <span data-test-id=\"preview-button-flyout\" className=\"tw-flex tw-justify-between tw-items-center tw-gap-2\">\n <a\n data-test-id=\"floating-button-edit-url\"\n href={floatingButtonSelectors.url()}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n style={BlockStyles[LINK_PLUGIN]}\n >\n {floatingButtonSelectors.url()}\n </a>\n <span className=\"tw-flex tw-gap-2\">\n <button\n onClick={() => {\n triggerFloatingButtonEdit(editor);\n }}\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 <IconPen16 />\n </button>\n\n <button\n onClick={() => {\n unwrapButton(editor);\n focusEditor(editor, editor.selection ?? undefined);\n }}\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 <IconTrashBin16 />\n </button>\n </span>\n </span>\n </FloatingModalWrapper>\n );\n};\n"],"names":["EditModal","editor","useEditorRef","jsx","FloatingModalWrapper","jsxs","floatingButtonSelectors","BlockStyles","LINK_PLUGIN","triggerFloatingButtonEdit","IconPen16","unwrapButton","focusEditor","IconTrashBin16"],"mappings":";;;;;;;AAUO,MAAMA,IAAY,MAAM;AAC3B,QAAMC,IAASC;AACf,SACK,gBAAAC,EAAAC,GAAA,EAAqB,SAAQ,QAAO,UAAS,SAAQ,gBAAa,wBAC/D,UAAC,gBAAAC,EAAA,QAAA,EAAK,gBAAa,yBAAwB,WAAU,uDACjD,UAAA;AAAA,IAAA,gBAAAF;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,gBAAa;AAAA,QACb,MAAMG,EAAwB,IAAI;AAAA,QAClC,QAAO;AAAA,QACP,KAAI;AAAA,QACJ,OAAOC,EAAYC,CAAW;AAAA,QAE7B,YAAwB,IAAI;AAAA,MAAA;AAAA,IACjC;AAAA,IACA,gBAAAH,EAAC,QAAK,EAAA,WAAU,oBACZ,UAAA;AAAA,MAAA,gBAAAF;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,SAAS,MAAM;AACX,YAAAM,EAA0BR,CAAM;AAAA,UACpC;AAAA,UACA,UAAU;AAAA,UACV,gBAAa;AAAA,UACb,WAAU;AAAA,UAEV,4BAACS,GAAU,EAAA;AAAA,QAAA;AAAA,MACf;AAAA,MAEA,gBAAAP;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,SAAS,MAAM;AACX,YAAAQ,EAAaV,CAAM,GACPW,EAAAX,GAAQA,EAAO,aAAa,MAAS;AAAA,UACrD;AAAA,UACA,UAAU;AAAA,UACV,gBAAa;AAAA,UACb,WAAU;AAAA,UAEV,4BAACY,GAAe,EAAA;AAAA,QAAA;AAAA,MACpB;AAAA,IAAA,GACJ;AAAA,EAAA,EACJ,CAAA,EACJ,CAAA;AAER;"}
|
package/dist/components/RichTextEditor/plugins/LinkPlugin/FloatingLink/CustomFloatingLink.es.js
CHANGED
|
@@ -1,32 +1,58 @@
|
|
|
1
|
-
import { jsx as e, jsxs as
|
|
2
|
-
import { offset as
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
|
|
1
|
+
import { jsx as e, jsxs as g, Fragment as k } from "react/jsx-runtime";
|
|
2
|
+
import { offset as b, flip as F, useFloatingLinkInsertState as L, useFloatingLinkInsert as P, useFloatingLinkEditState as S, useFloatingLinkEdit as h } from "@frontify/fondue";
|
|
3
|
+
import { createPortal as s } from "react-dom";
|
|
4
|
+
import { BlockStyles as d, TextStyles as a } from "../../styles.es.js";
|
|
5
|
+
import { InsertLinkModal as x } from "./InsertLinkModal/InsertLinkModal.es.js";
|
|
6
|
+
import { EditModal as E } from "./EditLinkModal/EditModal.es.js";
|
|
7
|
+
const l = {
|
|
6
8
|
placement: "bottom-start",
|
|
7
9
|
strategy: "absolute",
|
|
8
10
|
middleware: [
|
|
9
|
-
|
|
10
|
-
|
|
11
|
+
b(12),
|
|
12
|
+
F({
|
|
11
13
|
padding: 12,
|
|
12
14
|
fallbackPlacements: ["bottom-end", "top-start", "top-end"]
|
|
13
15
|
})
|
|
14
16
|
]
|
|
15
|
-
},
|
|
16
|
-
const n =
|
|
17
|
-
floatingOptions:
|
|
18
|
-
}), { props:
|
|
19
|
-
floatingOptions:
|
|
20
|
-
}), { props:
|
|
21
|
-
if (
|
|
17
|
+
}, M = () => {
|
|
18
|
+
const n = L({
|
|
19
|
+
floatingOptions: l
|
|
20
|
+
}), { props: o, ref: p, hidden: m } = P(n), t = S({
|
|
21
|
+
floatingOptions: l
|
|
22
|
+
}), { props: i, ref: u, editButtonProps: c, unlinkButtonProps: f } = h(t);
|
|
23
|
+
if (m)
|
|
22
24
|
return null;
|
|
23
|
-
const
|
|
24
|
-
return /* @__PURE__ */
|
|
25
|
-
n.isOpen && !t.isOpen &&
|
|
26
|
-
|
|
25
|
+
const r = /* @__PURE__ */ e(x, {}), y = t.isEditing ? r : /* @__PURE__ */ e(E, { editButtonProps: c, unlinkButtonProps: f });
|
|
26
|
+
return /* @__PURE__ */ g(k, { children: [
|
|
27
|
+
n.isOpen && !t.isOpen && s(
|
|
28
|
+
/* @__PURE__ */ e(
|
|
29
|
+
"div",
|
|
30
|
+
{
|
|
31
|
+
"data-is-underlay": !0,
|
|
32
|
+
ref: p,
|
|
33
|
+
...o,
|
|
34
|
+
style: { ...o.style, ...d[a.p] },
|
|
35
|
+
children: r
|
|
36
|
+
}
|
|
37
|
+
),
|
|
38
|
+
document.body
|
|
39
|
+
),
|
|
40
|
+
t.isOpen && s(
|
|
41
|
+
/* @__PURE__ */ e(
|
|
42
|
+
"div",
|
|
43
|
+
{
|
|
44
|
+
"data-is-underlay": !0,
|
|
45
|
+
ref: u,
|
|
46
|
+
...i,
|
|
47
|
+
style: { ...i.style, ...d[a.p] },
|
|
48
|
+
children: y
|
|
49
|
+
}
|
|
50
|
+
),
|
|
51
|
+
document.body
|
|
52
|
+
)
|
|
27
53
|
] });
|
|
28
54
|
};
|
|
29
55
|
export {
|
|
30
|
-
|
|
56
|
+
M as CustomFloatingLink
|
|
31
57
|
};
|
|
32
58
|
//# sourceMappingURL=CustomFloatingLink.es.js.map
|
package/dist/components/RichTextEditor/plugins/LinkPlugin/FloatingLink/CustomFloatingLink.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CustomFloatingLink.es.js","sources":["../../../../../../src/components/RichTextEditor/plugins/LinkPlugin/FloatingLink/CustomFloatingLink.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n type LinkFloatingToolbarState,\n type UseVirtualFloatingOptions,\n flip,\n offset,\n useFloatingLinkEdit,\n useFloatingLinkEditState,\n useFloatingLinkInsert,\n useFloatingLinkInsertState,\n} from '@frontify/fondue';\n\nimport { EditModal } from './EditLinkModal';\nimport { InsertLinkModal } from './InsertLinkModal/InsertLinkModal';\n\nconst floatingOptions: UseVirtualFloatingOptions = {\n placement: 'bottom-start',\n strategy: 'absolute',\n middleware: [\n offset(12),\n flip({\n padding: 12,\n fallbackPlacements: ['bottom-end', 'top-start', 'top-end'],\n }),\n ],\n};\n\nexport type LinkFloatingToolbarProps = {\n state?: LinkFloatingToolbarState;\n};\n\nexport const CustomFloatingLink = () => {\n const insertState = useFloatingLinkInsertState({\n floatingOptions,\n });\n const { props: insertProps, ref: insertRef, hidden } = useFloatingLinkInsert(insertState);\n\n const editState = useFloatingLinkEditState({\n floatingOptions,\n });\n\n const { props: editProps, ref: editRef, editButtonProps, unlinkButtonProps } = useFloatingLinkEdit(editState);\n\n if (hidden) {\n return null;\n }\n\n const input = <InsertLinkModal />;\n const editContent = editState.isEditing ? (\n input\n ) : (\n <EditModal editButtonProps={editButtonProps} unlinkButtonProps={unlinkButtonProps} />\n );\n\n return (\n <>\n {insertState.isOpen
|
|
1
|
+
{"version":3,"file":"CustomFloatingLink.es.js","sources":["../../../../../../src/components/RichTextEditor/plugins/LinkPlugin/FloatingLink/CustomFloatingLink.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n type LinkFloatingToolbarState,\n type UseVirtualFloatingOptions,\n flip,\n offset,\n useFloatingLinkEdit,\n useFloatingLinkEditState,\n useFloatingLinkInsert,\n useFloatingLinkInsertState,\n} from '@frontify/fondue';\nimport { createPortal } from 'react-dom';\n\nimport { BlockStyles, TextStyles } from '../../../../RichTextEditor/plugins/styles';\n\nimport { EditModal } from './EditLinkModal';\nimport { InsertLinkModal } from './InsertLinkModal/InsertLinkModal';\n\nconst floatingOptions: UseVirtualFloatingOptions = {\n placement: 'bottom-start',\n strategy: 'absolute',\n middleware: [\n offset(12),\n flip({\n padding: 12,\n fallbackPlacements: ['bottom-end', 'top-start', 'top-end'],\n }),\n ],\n};\n\nexport type LinkFloatingToolbarProps = {\n state?: LinkFloatingToolbarState;\n};\n\nexport const CustomFloatingLink = () => {\n const insertState = useFloatingLinkInsertState({\n floatingOptions,\n });\n const { props: insertProps, ref: insertRef, hidden } = useFloatingLinkInsert(insertState);\n\n const editState = useFloatingLinkEditState({\n floatingOptions,\n });\n\n const { props: editProps, ref: editRef, editButtonProps, unlinkButtonProps } = useFloatingLinkEdit(editState);\n\n if (hidden) {\n return null;\n }\n\n const input = <InsertLinkModal />;\n const editContent = editState.isEditing ? (\n input\n ) : (\n <EditModal editButtonProps={editButtonProps} unlinkButtonProps={unlinkButtonProps} />\n );\n\n return (\n <>\n {insertState.isOpen &&\n !editState.isOpen &&\n createPortal(\n <div\n data-is-underlay\n ref={insertRef}\n {...insertProps}\n style={{ ...insertProps.style, ...BlockStyles[TextStyles.p] }}\n >\n {input}\n </div>,\n document.body,\n )}\n\n {editState.isOpen &&\n createPortal(\n <div\n data-is-underlay\n ref={editRef}\n {...editProps}\n style={{ ...editProps.style, ...BlockStyles[TextStyles.p] }}\n >\n {editContent}\n </div>,\n document.body,\n )}\n </>\n );\n};\n"],"names":["floatingOptions","offset","flip","CustomFloatingLink","insertState","useFloatingLinkInsertState","insertProps","insertRef","hidden","useFloatingLinkInsert","editState","useFloatingLinkEditState","editProps","editRef","editButtonProps","unlinkButtonProps","useFloatingLinkEdit","input","InsertLinkModal","editContent","jsx","EditModal","jsxs","Fragment","createPortal","BlockStyles","TextStyles"],"mappings":";;;;;;AAmBA,MAAMA,IAA6C;AAAA,EAC/C,WAAW;AAAA,EACX,UAAU;AAAA,EACV,YAAY;AAAA,IACRC,EAAO,EAAE;AAAA,IACTC,EAAK;AAAA,MACD,SAAS;AAAA,MACT,oBAAoB,CAAC,cAAc,aAAa,SAAS;AAAA,IAAA,CAC5D;AAAA,EACL;AACJ,GAMaC,IAAqB,MAAM;AACpC,QAAMC,IAAcC,EAA2B;AAAA,IAC3C,iBAAAL;AAAA,EAAA,CACH,GACK,EAAE,OAAOM,GAAa,KAAKC,GAAW,QAAAC,EAAO,IAAIC,EAAsBL,CAAW,GAElFM,IAAYC,EAAyB;AAAA,IACvC,iBAAAX;AAAA,EAAA,CACH,GAEK,EAAE,OAAOY,GAAW,KAAKC,GAAS,iBAAAC,GAAiB,mBAAAC,EAAsB,IAAAC,EAAoBN,CAAS;AAE5G,MAAIF;AACO,WAAA;AAGL,QAAAS,sBAASC,GAAgB,CAAA,CAAA,GACzBC,IAAcT,EAAU,YAC1BO,IAEC,gBAAAG,EAAAC,GAAA,EAAU,iBAAAP,GAAkC,mBAAAC,EAAsC,CAAA;AAGvF,SAES,gBAAAO,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAYnB,EAAA,UACT,CAACM,EAAU,UACXc;AAAA,MACI,gBAAAJ;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,oBAAgB;AAAA,UAChB,KAAKb;AAAA,UACJ,GAAGD;AAAA,UACJ,OAAO,EAAE,GAAGA,EAAY,OAAO,GAAGmB,EAAYC,EAAW,CAAC,EAAE;AAAA,UAE3D,UAAAT;AAAA,QAAA;AAAA,MACL;AAAA,MACA,SAAS;AAAA,IACb;AAAA,IAEHP,EAAU,UACPc;AAAA,MACI,gBAAAJ;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,oBAAgB;AAAA,UAChB,KAAKP;AAAA,UACJ,GAAGD;AAAA,UACJ,OAAO,EAAE,GAAGA,EAAU,OAAO,GAAGa,EAAYC,EAAW,CAAC,EAAE;AAAA,UAEzD,UAAAP;AAAA,QAAA;AAAA,MACL;AAAA,MACA,SAAS;AAAA,IACb;AAAA,EACR,EAAA,CAAA;AAER;"}
|
package/dist/components/RichTextEditor/plugins/LinkPlugin/FloatingLink/EditLinkModal/EditModal.es.js
CHANGED
|
@@ -1,11 +1,23 @@
|
|
|
1
|
-
import { jsx as t, jsxs as
|
|
2
|
-
import { useLinkOpenButtonState as
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
import { jsx as t, jsxs as r } from "react/jsx-runtime";
|
|
2
|
+
import { useLinkOpenButtonState as a, FloatingModalWrapper as l, IconPen16 as d, IconTrashBin16 as s } from "@frontify/fondue";
|
|
3
|
+
import { BlockStyles as c } from "../../../styles.es.js";
|
|
4
|
+
import { LINK_PLUGIN as p } from "../../id.es.js";
|
|
5
|
+
import { getUrlFromLinkOrLegacyLink as m } from "../../../../../Link/utils/getUrl.es.js";
|
|
6
|
+
const g = ({ editButtonProps: i, unlinkButtonProps: o }) => {
|
|
7
|
+
const { element: e } = a(), n = e ? m(e) : "";
|
|
8
|
+
return /* @__PURE__ */ t(l, { "data-test-id": "floating-link-edit", padding: "16px", minWidth: "400px", children: /* @__PURE__ */ r("span", { "data-test-id": "preview-link-flyout", className: "tw-flex tw-justify-between tw-items-center tw-gap-2", children: [
|
|
9
|
+
/* @__PURE__ */ t(
|
|
10
|
+
"a",
|
|
11
|
+
{
|
|
12
|
+
"data-test-id": "floating-link-edit-url",
|
|
13
|
+
href: n,
|
|
14
|
+
target: "_blank",
|
|
15
|
+
rel: "noopener noreferrer",
|
|
16
|
+
style: c[p],
|
|
17
|
+
children: n
|
|
18
|
+
}
|
|
19
|
+
),
|
|
20
|
+
/* @__PURE__ */ r("span", { className: "tw-flex tw-gap-2", children: [
|
|
9
21
|
/* @__PURE__ */ t(
|
|
10
22
|
"button",
|
|
11
23
|
{
|
|
@@ -22,14 +34,14 @@ const u = ({ editButtonProps: i, unlinkButtonProps: r }) => {
|
|
|
22
34
|
tabIndex: 0,
|
|
23
35
|
"data-test-id": "remove-link-button",
|
|
24
36
|
className: "tw-transition tw-cursor-pointer tw-rounded hover:tw-bg-black-10 tw-p-1",
|
|
25
|
-
...
|
|
26
|
-
children: /* @__PURE__ */ t(
|
|
37
|
+
...o,
|
|
38
|
+
children: /* @__PURE__ */ t(s, {})
|
|
27
39
|
}
|
|
28
40
|
)
|
|
29
41
|
] })
|
|
30
42
|
] }) });
|
|
31
43
|
};
|
|
32
44
|
export {
|
|
33
|
-
|
|
45
|
+
g as EditModal
|
|
34
46
|
};
|
|
35
47
|
//# 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 { FloatingModalWrapper, IconPen16, IconTrashBin16, useLinkOpenButtonState } from '@frontify/fondue';\nimport { type MouseEvent } from 'react';\n\nimport { getUrlFromLinkOrLegacyLink } from '../../../../../Link';\n\ntype EditModalProps = {\n editButtonProps: {\n onClick: () => void;\n };\n unlinkButtonProps: {\n onMouseDown: (e: MouseEvent<HTMLButtonElement>) => void;\n onClick: () => void;\n };\n};\n\nexport const EditModal = ({ editButtonProps, unlinkButtonProps }: EditModalProps) => {\n const { element } = useLinkOpenButtonState();\n const url = element ? getUrlFromLinkOrLegacyLink(element) : '';\n\n return (\n <FloatingModalWrapper data-test-id=\"floating-link-edit\" padding=\"16px\" minWidth=\"400px\">\n <span data-test-id=\"preview-link-flyout\" className=\"tw-flex tw-justify-between tw-items-center\">\n <
|
|
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 { FloatingModalWrapper, IconPen16, IconTrashBin16, useLinkOpenButtonState } from '@frontify/fondue';\nimport { type MouseEvent } from 'react';\n\nimport { getUrlFromLinkOrLegacyLink } from '../../../../../Link';\nimport { BlockStyles } from '../../../styles';\nimport { LINK_PLUGIN } from '../../id';\n\ntype EditModalProps = {\n editButtonProps: {\n onClick: () => void;\n };\n unlinkButtonProps: {\n onMouseDown: (e: MouseEvent<HTMLButtonElement>) => void;\n onClick: () => void;\n };\n};\n\nexport const EditModal = ({ editButtonProps, unlinkButtonProps }: EditModalProps) => {\n const { element } = useLinkOpenButtonState();\n const url = element ? getUrlFromLinkOrLegacyLink(element) : '';\n\n return (\n <FloatingModalWrapper data-test-id=\"floating-link-edit\" padding=\"16px\" minWidth=\"400px\">\n <span data-test-id=\"preview-link-flyout\" className=\"tw-flex tw-justify-between tw-items-center tw-gap-2\">\n <a\n data-test-id=\"floating-link-edit-url\"\n href={url}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n style={BlockStyles[LINK_PLUGIN]}\n >\n {url}\n </a>\n <span className=\"tw-flex tw-gap-2\">\n <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 {...editButtonProps}\n >\n <IconPen16 />\n </button>\n\n <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 {...unlinkButtonProps}\n >\n <IconTrashBin16 />\n </button>\n </span>\n </span>\n </FloatingModalWrapper>\n );\n};\n"],"names":["EditModal","editButtonProps","unlinkButtonProps","element","useLinkOpenButtonState","url","getUrlFromLinkOrLegacyLink","jsx","FloatingModalWrapper","jsxs","BlockStyles","LINK_PLUGIN","IconPen16","IconTrashBin16"],"mappings":";;;;;AAmBO,MAAMA,IAAY,CAAC,EAAE,iBAAAC,GAAiB,mBAAAC,QAAwC;AAC3E,QAAA,EAAE,SAAAC,MAAYC,KACdC,IAAMF,IAAUG,EAA2BH,CAAO,IAAI;AAE5D,SACK,gBAAAI,EAAAC,GAAA,EAAqB,gBAAa,sBAAqB,SAAQ,QAAO,UAAS,SAC5E,UAAC,gBAAAC,EAAA,QAAA,EAAK,gBAAa,uBAAsB,WAAU,uDAC/C,UAAA;AAAA,IAAA,gBAAAF;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,gBAAa;AAAA,QACb,MAAMF;AAAA,QACN,QAAO;AAAA,QACP,KAAI;AAAA,QACJ,OAAOK,EAAYC,CAAW;AAAA,QAE7B,UAAAN;AAAA,MAAA;AAAA,IACL;AAAA,IACA,gBAAAI,EAAC,QAAK,EAAA,WAAU,oBACZ,UAAA;AAAA,MAAA,gBAAAF;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,UAAU;AAAA,UACV,gBAAa;AAAA,UACb,WAAU;AAAA,UACT,GAAGN;AAAA,UAEJ,4BAACW,GAAU,EAAA;AAAA,QAAA;AAAA,MACf;AAAA,MAEA,gBAAAL;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,UAAU;AAAA,UACV,gBAAa;AAAA,UACb,WAAU;AAAA,UACT,GAAGL;AAAA,UAEJ,4BAACW,GAAe,EAAA;AAAA,QAAA;AAAA,MACpB;AAAA,IAAA,GACJ;AAAA,EAAA,EACJ,CAAA,EACJ,CAAA;AAER;"}
|