@frontify/guideline-blocks-settings 0.36.1 → 0.36.3
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/BlockInjectButton/BlockInjectButton.es.js +35 -35
- package/dist/components/BlockInjectButton/BlockInjectButton.es.js.map +1 -1
- 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,54 +1,54 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { FileExtensionSets as
|
|
3
|
-
import { LoadingCircle as
|
|
4
|
-
import { useState as g, useRef as
|
|
5
|
-
import { joinClassNames as
|
|
6
|
-
const
|
|
1
|
+
import { jsxs as w, jsx as e, Fragment as R } from "react/jsx-runtime";
|
|
2
|
+
import { FileExtensionSets as T } from "@frontify/app-bridge";
|
|
3
|
+
import { LoadingCircle as V, IconExclamationMarkTriangle as P, Flyout as Y, ActionMenu as K, MenuItemContentSize as N, IconArrowCircleUp20 as U, IconImageStack20 as W } from "@frontify/fondue";
|
|
4
|
+
import { useState as g, useRef as q } from "react";
|
|
5
|
+
import { joinClassNames as D } from "../../utilities/react/joinClassNames.es.js";
|
|
6
|
+
const _ = ({
|
|
7
7
|
onDrop: s,
|
|
8
8
|
label: u,
|
|
9
9
|
icon: p,
|
|
10
10
|
secondaryLabel: f,
|
|
11
11
|
isLoading: l,
|
|
12
|
-
fillParentContainer:
|
|
12
|
+
fillParentContainer: j,
|
|
13
13
|
onAssetChooseClick: x,
|
|
14
14
|
onUploadClick: k,
|
|
15
|
-
withMenu:
|
|
15
|
+
withMenu: M = !0,
|
|
16
16
|
onClick: m,
|
|
17
17
|
validFileType: v,
|
|
18
|
-
verticalLayout:
|
|
18
|
+
verticalLayout: E
|
|
19
19
|
}) => {
|
|
20
|
-
const [d, b] = g(!1), [i,
|
|
21
|
-
if (t.preventDefault(), b(!1), !
|
|
20
|
+
const [d, b] = g(!1), [i, c] = g(), h = q(null), [o, a] = g(void 0), S = (t) => {
|
|
21
|
+
if (t.preventDefault(), b(!1), !y(t.dataTransfer.files)) {
|
|
22
22
|
a("Invalid"), setTimeout(() => {
|
|
23
23
|
a(void 0);
|
|
24
24
|
}, 1e3);
|
|
25
25
|
return;
|
|
26
26
|
}
|
|
27
27
|
s == null || s(t.dataTransfer.files);
|
|
28
|
-
},
|
|
28
|
+
}, y = (t) => {
|
|
29
29
|
if (!v)
|
|
30
30
|
return !0;
|
|
31
31
|
for (let r = 0; r < t.length; r++) {
|
|
32
32
|
const n = t[r].name.split(".").pop() ?? "";
|
|
33
|
-
if (!
|
|
33
|
+
if (!T[v].includes(n))
|
|
34
34
|
return !1;
|
|
35
35
|
}
|
|
36
36
|
return !0;
|
|
37
|
-
},
|
|
37
|
+
}, B = (t) => {
|
|
38
38
|
if (!h.current || l)
|
|
39
39
|
return;
|
|
40
|
-
const {
|
|
41
|
-
|
|
40
|
+
const { clientX: r, clientY: n } = t, I = r === 0 && n === 0, { left: C, top: z, width: O, height: X } = h.current.getBoundingClientRect(), A = I ? O / 2 : r - C, F = I ? X / 2 : n - z;
|
|
41
|
+
c([A, F]);
|
|
42
42
|
};
|
|
43
|
-
return /* @__PURE__ */
|
|
43
|
+
return /* @__PURE__ */ w(
|
|
44
44
|
"button",
|
|
45
45
|
{
|
|
46
46
|
ref: h,
|
|
47
47
|
"data-test-id": "block-inject-button",
|
|
48
|
-
className:
|
|
48
|
+
className: D([
|
|
49
49
|
"tw-font-body tw-relative tw-text-sm tw-leading-4 tw-border tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-gap-3 tw-w-full first:tw-rounded-tl last:tw-rounded-br",
|
|
50
|
-
|
|
51
|
-
|
|
50
|
+
E ? "[&:not(:first-child)]:tw-border-t-0 first:tw-rounded-tr last:tw-rounded-bl" : "[&:not(:first-child)]:tw-border-l-0 first:tw-rounded-bl last:tw-rounded-tr",
|
|
51
|
+
j ? "tw-h-full" : "tw-h-[72px]",
|
|
52
52
|
d && !l ? "tw-border-dashed" : "tw-border-solid",
|
|
53
53
|
i && "tw-bg-blank-state-pressed-inverse",
|
|
54
54
|
d && "tw-bg-blank-state-weak-inverse",
|
|
@@ -67,15 +67,15 @@ const H = ({
|
|
|
67
67
|
} : void 0,
|
|
68
68
|
onDrop: s ? S : void 0,
|
|
69
69
|
onClick: (t) => {
|
|
70
|
-
|
|
70
|
+
M && B(t), m == null || m();
|
|
71
71
|
},
|
|
72
72
|
children: [
|
|
73
|
-
l ? /* @__PURE__ */ e(
|
|
74
|
-
/* @__PURE__ */ e(
|
|
73
|
+
l ? /* @__PURE__ */ e(V, {}) : o ? /* @__PURE__ */ w("div", { className: " tw-flex tw-items-center tw-justify-center tw-text-red-60 tw-font-medium", children: [
|
|
74
|
+
/* @__PURE__ */ e(P, {}),
|
|
75
75
|
o
|
|
76
|
-
] }) : /* @__PURE__ */
|
|
76
|
+
] }) : /* @__PURE__ */ w(R, { children: [
|
|
77
77
|
p && /* @__PURE__ */ e("div", { children: p }),
|
|
78
|
-
(u || f) && /* @__PURE__ */
|
|
78
|
+
(u || f) && /* @__PURE__ */ w("div", { className: "tw-flex tw-flex-col tw-items-start", children: [
|
|
79
79
|
u && /* @__PURE__ */ e("div", { className: "tw-font-medium", children: u }),
|
|
80
80
|
f && /* @__PURE__ */ e("div", { className: "tw-font-normal", children: f })
|
|
81
81
|
] })
|
|
@@ -89,16 +89,16 @@ const H = ({
|
|
|
89
89
|
top: i[1]
|
|
90
90
|
},
|
|
91
91
|
children: /* @__PURE__ */ e(
|
|
92
|
-
|
|
92
|
+
Y,
|
|
93
93
|
{
|
|
94
|
-
onOpenChange: (t) => !t &&
|
|
94
|
+
onOpenChange: (t) => !t && c(void 0),
|
|
95
95
|
isOpen: !0,
|
|
96
96
|
fitContent: !0,
|
|
97
97
|
hug: !1,
|
|
98
98
|
legacyFooter: !1,
|
|
99
99
|
trigger: /* @__PURE__ */ e("div", {}),
|
|
100
100
|
children: /* @__PURE__ */ e(
|
|
101
|
-
|
|
101
|
+
K,
|
|
102
102
|
{
|
|
103
103
|
menuBlocks: [
|
|
104
104
|
{
|
|
@@ -107,25 +107,25 @@ const H = ({
|
|
|
107
107
|
...k ? [
|
|
108
108
|
{
|
|
109
109
|
id: "upload",
|
|
110
|
-
size:
|
|
110
|
+
size: N.XSmall,
|
|
111
111
|
title: "Upload asset",
|
|
112
112
|
onClick: () => {
|
|
113
|
-
k(),
|
|
113
|
+
k(), c(void 0);
|
|
114
114
|
},
|
|
115
115
|
initialValue: !0,
|
|
116
|
-
decorator: /* @__PURE__ */ e("div", { className: "tw-mr-2", children: /* @__PURE__ */ e(
|
|
116
|
+
decorator: /* @__PURE__ */ e("div", { className: "tw-mr-2", children: /* @__PURE__ */ e(U, {}) })
|
|
117
117
|
}
|
|
118
118
|
] : [],
|
|
119
119
|
...x ? [
|
|
120
120
|
{
|
|
121
121
|
id: "asset",
|
|
122
|
-
size:
|
|
122
|
+
size: N.XSmall,
|
|
123
123
|
title: "Browse asset",
|
|
124
124
|
onClick: () => {
|
|
125
|
-
x(),
|
|
125
|
+
x(), c(void 0);
|
|
126
126
|
},
|
|
127
127
|
initialValue: !0,
|
|
128
|
-
decorator: /* @__PURE__ */ e("div", { className: "tw-mr-2", children: /* @__PURE__ */ e(
|
|
128
|
+
decorator: /* @__PURE__ */ e("div", { className: "tw-mr-2", children: /* @__PURE__ */ e(W, {}) })
|
|
129
129
|
}
|
|
130
130
|
] : []
|
|
131
131
|
]
|
|
@@ -142,6 +142,6 @@ const H = ({
|
|
|
142
142
|
);
|
|
143
143
|
};
|
|
144
144
|
export {
|
|
145
|
-
|
|
145
|
+
_ as BlockInjectButton
|
|
146
146
|
};
|
|
147
147
|
//# sourceMappingURL=BlockInjectButton.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlockInjectButton.es.js","sources":["../../../src/components/BlockInjectButton/BlockInjectButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type FileExtension, FileExtensionSets } from '@frontify/app-bridge';\nimport {\n ActionMenu,\n Flyout,\n IconArrowCircleUp20,\n IconExclamationMarkTriangle,\n IconImageStack20,\n LoadingCircle,\n MenuItemContentSize,\n} from '@frontify/fondue';\nimport { type DragEventHandler, type MouseEventHandler, useRef, useState } from 'react';\n\nimport { joinClassNames } from '../../utilities/react/joinClassNames';\n\nimport { type BlockInjectButtonProps } from './types';\n\nexport const BlockInjectButton = ({\n onDrop,\n label,\n icon,\n secondaryLabel,\n isLoading,\n fillParentContainer,\n onAssetChooseClick,\n onUploadClick,\n withMenu = true,\n onClick,\n validFileType,\n verticalLayout,\n}: BlockInjectButtonProps) => {\n const [isDraggingOver, setIsDraggingOver] = useState(false);\n const [menuPosition, setMenuPosition] = useState<[number, number] | undefined>();\n const buttonRef = useRef<HTMLButtonElement>(null);\n const [errorMsg, setErrorMsg] = useState<string | undefined>(undefined);\n\n const handleDrop: DragEventHandler<HTMLButtonElement> = (event) => {\n event.preventDefault();\n setIsDraggingOver(false);\n if (!isValidAsset(event.dataTransfer.files)) {\n setErrorMsg('Invalid');\n setTimeout(() => {\n setErrorMsg(undefined);\n }, 1000);\n return;\n }\n onDrop?.(event.dataTransfer.files);\n };\n\n const isValidAsset = (files: FileList) => {\n if (!validFileType) {\n return true;\n }\n for (let i = 0; i < files.length; i++) {\n const droppedFileExtension = (files[i].name.split('.').pop() ?? '') as FileExtension;\n if (!FileExtensionSets[validFileType].includes(droppedFileExtension)) {\n return false;\n }\n }\n return true;\n };\n\n const openMenu: MouseEventHandler<HTMLButtonElement> = (event) => {\n if (!buttonRef.current || isLoading) {\n return;\n }\n const { left, top } = buttonRef.current.getBoundingClientRect();\n const XInsideComponent = event.clientX - left;\n const YInsideComponent = event.clientY - top;\n setMenuPosition([XInsideComponent, YInsideComponent]);\n };\n\n return (\n <button\n ref={buttonRef}\n data-test-id=\"block-inject-button\"\n className={joinClassNames([\n 'tw-font-body tw-relative tw-text-sm tw-leading-4 tw-border tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-gap-3 tw-w-full first:tw-rounded-tl last:tw-rounded-br',\n verticalLayout\n ? '[&:not(:first-child)]:tw-border-t-0 first:tw-rounded-tr last:tw-rounded-bl'\n : '[&:not(:first-child)]:tw-border-l-0 first:tw-rounded-bl last:tw-rounded-tr',\n fillParentContainer ? 'tw-h-full' : 'tw-h-[72px]',\n isDraggingOver && !isLoading ? 'tw-border-dashed' : 'tw-border-solid',\n menuPosition && 'tw-bg-blank-state-pressed-inverse',\n isDraggingOver && 'tw-bg-blank-state-weak-inverse',\n errorMsg ? '!tw-border-red-50 !tw-cursor-not-allowed' : ' tw-border-blank-state-line',\n isLoading || menuPosition || isDraggingOver || errorMsg\n ? ''\n : 'tw-text-text-weak hover:tw-text-blank-state-hover hover:tw-bg-blank-state-hover-inverse hover:tw-border-blank-state-line-hover active:tw-text-blank-state-pressed active:tw-bg-blank-state-pressed-inverse active:tw-border-blank-state-line-hover',\n (isDraggingOver || !!menuPosition) && !errorMsg\n ? '[&>*]:tw-pointer-events-none tw-border-blank-state-line-hover'\n : 'tw-bg-blank-state-shaded-inverse tw-text-blank-state-shaded',\n ])}\n onDragEnter={\n onDrop\n ? (event) => {\n setIsDraggingOver(true);\n // is now only used for images, can be adapted if needed\n if (validFileType === 'Images') {\n for (const item of Array.from(event.dataTransfer.items)) {\n if (!item?.type?.startsWith('image/')) {\n setErrorMsg('Invalid');\n } else {\n setErrorMsg(undefined);\n }\n }\n }\n }\n : undefined\n }\n onDragLeave={\n onDrop\n ? () => {\n setIsDraggingOver(false);\n setErrorMsg(undefined);\n }\n : undefined\n }\n onDrop={onDrop ? handleDrop : undefined}\n onClick={(event) => {\n withMenu && openMenu(event);\n onClick?.();\n }}\n >\n {isLoading ? (\n <LoadingCircle />\n ) : errorMsg ? (\n <div className=\" tw-flex tw-items-center tw-justify-center tw-text-red-60 tw-font-medium\">\n <IconExclamationMarkTriangle />\n {errorMsg}\n </div>\n ) : (\n <>\n {icon && <div>{icon}</div>}\n {(label || secondaryLabel) && (\n <div className=\"tw-flex tw-flex-col tw-items-start\">\n {label && <div className=\"tw-font-medium\">{label}</div>}\n {secondaryLabel && <div className=\"tw-font-normal\">{secondaryLabel}</div>}\n </div>\n )}\n </>\n )}\n {menuPosition && (\n <div\n className=\"tw-absolute tw-left-0 tw-top-full tw-z-20\"\n style={{\n left: menuPosition[0],\n top: menuPosition[1],\n }}\n >\n <Flyout\n onOpenChange={(isOpen) => !isOpen && setMenuPosition(undefined)}\n isOpen={true}\n fitContent\n hug={false}\n legacyFooter={false}\n trigger={<div />}\n >\n <ActionMenu\n menuBlocks={[\n {\n id: 'menu',\n menuItems: [\n ...(onUploadClick\n ? [\n {\n id: 'upload',\n size: MenuItemContentSize.XSmall,\n title: 'Upload asset',\n onClick: () => {\n onUploadClick();\n setMenuPosition(undefined);\n },\n\n initialValue: true,\n decorator: (\n <div className=\"tw-mr-2\">\n <IconArrowCircleUp20 />\n </div>\n ),\n },\n ]\n : []),\n ...(onAssetChooseClick\n ? [\n {\n id: 'asset',\n size: MenuItemContentSize.XSmall,\n title: 'Browse asset',\n onClick: () => {\n onAssetChooseClick();\n setMenuPosition(undefined);\n },\n initialValue: true,\n decorator: (\n <div className=\"tw-mr-2\">\n <IconImageStack20 />\n </div>\n ),\n },\n ]\n : []),\n ],\n },\n ]}\n />\n </Flyout>\n </div>\n )}\n </button>\n );\n};\n"],"names":["BlockInjectButton","onDrop","label","icon","secondaryLabel","isLoading","fillParentContainer","onAssetChooseClick","onUploadClick","withMenu","onClick","validFileType","verticalLayout","isDraggingOver","setIsDraggingOver","useState","menuPosition","setMenuPosition","buttonRef","useRef","errorMsg","setErrorMsg","handleDrop","event","isValidAsset","files","i","droppedFileExtension","FileExtensionSets","openMenu","left","top","XInsideComponent","YInsideComponent","jsxs","joinClassNames","item","_a","LoadingCircle","jsx","IconExclamationMarkTriangle","Fragment","Flyout","isOpen","ActionMenu","MenuItemContentSize","IconArrowCircleUp20","IconImageStack20"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"BlockInjectButton.es.js","sources":["../../../src/components/BlockInjectButton/BlockInjectButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type FileExtension, FileExtensionSets } from '@frontify/app-bridge';\nimport {\n ActionMenu,\n Flyout,\n IconArrowCircleUp20,\n IconExclamationMarkTriangle,\n IconImageStack20,\n LoadingCircle,\n MenuItemContentSize,\n} from '@frontify/fondue';\nimport { type DragEventHandler, type MouseEventHandler, useRef, useState } from 'react';\n\nimport { joinClassNames } from '../../utilities/react/joinClassNames';\n\nimport { type BlockInjectButtonProps } from './types';\n\nexport const BlockInjectButton = ({\n onDrop,\n label,\n icon,\n secondaryLabel,\n isLoading,\n fillParentContainer,\n onAssetChooseClick,\n onUploadClick,\n withMenu = true,\n onClick,\n validFileType,\n verticalLayout,\n}: BlockInjectButtonProps) => {\n const [isDraggingOver, setIsDraggingOver] = useState(false);\n const [menuPosition, setMenuPosition] = useState<[number, number] | undefined>();\n const buttonRef = useRef<HTMLButtonElement>(null);\n const [errorMsg, setErrorMsg] = useState<string | undefined>(undefined);\n\n const handleDrop: DragEventHandler<HTMLButtonElement> = (event) => {\n event.preventDefault();\n setIsDraggingOver(false);\n if (!isValidAsset(event.dataTransfer.files)) {\n setErrorMsg('Invalid');\n setTimeout(() => {\n setErrorMsg(undefined);\n }, 1000);\n return;\n }\n onDrop?.(event.dataTransfer.files);\n };\n\n const isValidAsset = (files: FileList) => {\n if (!validFileType) {\n return true;\n }\n for (let i = 0; i < files.length; i++) {\n const droppedFileExtension = (files[i].name.split('.').pop() ?? '') as FileExtension;\n if (!FileExtensionSets[validFileType].includes(droppedFileExtension)) {\n return false;\n }\n }\n return true;\n };\n\n const openMenu: MouseEventHandler<HTMLButtonElement> = (event) => {\n if (!buttonRef.current || isLoading) {\n return;\n }\n const { clientX, clientY } = event;\n const isKeyboardEvent = clientX === 0 && clientY === 0;\n const { left, top, width, height } = buttonRef.current.getBoundingClientRect();\n const XInsideComponent = !isKeyboardEvent ? clientX - left : width / 2;\n const YInsideComponent = !isKeyboardEvent ? clientY - top : height / 2;\n setMenuPosition([XInsideComponent, YInsideComponent]);\n };\n\n return (\n <button\n ref={buttonRef}\n data-test-id=\"block-inject-button\"\n className={joinClassNames([\n 'tw-font-body tw-relative tw-text-sm tw-leading-4 tw-border tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-gap-3 tw-w-full first:tw-rounded-tl last:tw-rounded-br',\n verticalLayout\n ? '[&:not(:first-child)]:tw-border-t-0 first:tw-rounded-tr last:tw-rounded-bl'\n : '[&:not(:first-child)]:tw-border-l-0 first:tw-rounded-bl last:tw-rounded-tr',\n fillParentContainer ? 'tw-h-full' : 'tw-h-[72px]',\n isDraggingOver && !isLoading ? 'tw-border-dashed' : 'tw-border-solid',\n menuPosition && 'tw-bg-blank-state-pressed-inverse',\n isDraggingOver && 'tw-bg-blank-state-weak-inverse',\n errorMsg ? '!tw-border-red-50 !tw-cursor-not-allowed' : ' tw-border-blank-state-line',\n isLoading || menuPosition || isDraggingOver || errorMsg\n ? ''\n : 'tw-text-text-weak hover:tw-text-blank-state-hover hover:tw-bg-blank-state-hover-inverse hover:tw-border-blank-state-line-hover active:tw-text-blank-state-pressed active:tw-bg-blank-state-pressed-inverse active:tw-border-blank-state-line-hover',\n (isDraggingOver || !!menuPosition) && !errorMsg\n ? '[&>*]:tw-pointer-events-none tw-border-blank-state-line-hover'\n : 'tw-bg-blank-state-shaded-inverse tw-text-blank-state-shaded',\n ])}\n onDragEnter={\n onDrop\n ? (event) => {\n setIsDraggingOver(true);\n // is now only used for images, can be adapted if needed\n if (validFileType === 'Images') {\n for (const item of Array.from(event.dataTransfer.items)) {\n if (!item?.type?.startsWith('image/')) {\n setErrorMsg('Invalid');\n } else {\n setErrorMsg(undefined);\n }\n }\n }\n }\n : undefined\n }\n onDragLeave={\n onDrop\n ? () => {\n setIsDraggingOver(false);\n setErrorMsg(undefined);\n }\n : undefined\n }\n onDrop={onDrop ? handleDrop : undefined}\n onClick={(event) => {\n withMenu && openMenu(event);\n onClick?.();\n }}\n >\n {isLoading ? (\n <LoadingCircle />\n ) : errorMsg ? (\n <div className=\" tw-flex tw-items-center tw-justify-center tw-text-red-60 tw-font-medium\">\n <IconExclamationMarkTriangle />\n {errorMsg}\n </div>\n ) : (\n <>\n {icon && <div>{icon}</div>}\n {(label || secondaryLabel) && (\n <div className=\"tw-flex tw-flex-col tw-items-start\">\n {label && <div className=\"tw-font-medium\">{label}</div>}\n {secondaryLabel && <div className=\"tw-font-normal\">{secondaryLabel}</div>}\n </div>\n )}\n </>\n )}\n {menuPosition && (\n <div\n className=\"tw-absolute tw-left-0 tw-top-full tw-z-20\"\n style={{\n left: menuPosition[0],\n top: menuPosition[1],\n }}\n >\n <Flyout\n onOpenChange={(isOpen) => !isOpen && setMenuPosition(undefined)}\n isOpen={true}\n fitContent\n hug={false}\n legacyFooter={false}\n trigger={<div />}\n >\n <ActionMenu\n menuBlocks={[\n {\n id: 'menu',\n menuItems: [\n ...(onUploadClick\n ? [\n {\n id: 'upload',\n size: MenuItemContentSize.XSmall,\n title: 'Upload asset',\n onClick: () => {\n onUploadClick();\n setMenuPosition(undefined);\n },\n\n initialValue: true,\n decorator: (\n <div className=\"tw-mr-2\">\n <IconArrowCircleUp20 />\n </div>\n ),\n },\n ]\n : []),\n ...(onAssetChooseClick\n ? [\n {\n id: 'asset',\n size: MenuItemContentSize.XSmall,\n title: 'Browse asset',\n onClick: () => {\n onAssetChooseClick();\n setMenuPosition(undefined);\n },\n initialValue: true,\n decorator: (\n <div className=\"tw-mr-2\">\n <IconImageStack20 />\n </div>\n ),\n },\n ]\n : []),\n ],\n },\n ]}\n />\n </Flyout>\n </div>\n )}\n </button>\n );\n};\n"],"names":["BlockInjectButton","onDrop","label","icon","secondaryLabel","isLoading","fillParentContainer","onAssetChooseClick","onUploadClick","withMenu","onClick","validFileType","verticalLayout","isDraggingOver","setIsDraggingOver","useState","menuPosition","setMenuPosition","buttonRef","useRef","errorMsg","setErrorMsg","handleDrop","event","isValidAsset","files","i","droppedFileExtension","FileExtensionSets","openMenu","clientX","clientY","isKeyboardEvent","left","top","width","height","XInsideComponent","YInsideComponent","jsxs","joinClassNames","item","_a","LoadingCircle","jsx","IconExclamationMarkTriangle","Fragment","Flyout","isOpen","ActionMenu","MenuItemContentSize","IconArrowCircleUp20","IconImageStack20"],"mappings":"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"}
|
|
@@ -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;"}
|