payload-richtext-tiptap 0.0.81 → 0.0.83
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/src/fields/TiptapEditor/extensions/serverside/ContentEmbedSupport.d.ts.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/serverside/ContentEmbedSupport.js +21 -5
- package/dist/src/fields/TiptapEditor/extensions/serverside/ContentEmbedSupport.js.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/serverside/useAppendIdToClientsideBlocks.d.ts.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/serverside/useAppendIdToClientsideBlocks.js +2 -1
- package/dist/src/fields/TiptapEditor/extensions/serverside/useAppendIdToClientsideBlocks.js.map +1 -1
- package/dist/src/fields/TiptapEditor/features/panels/SocialMediaEditorPanel/SocialMediaEditorPanel.d.ts.map +1 -1
- package/dist/src/fields/TiptapEditor/features/panels/SocialMediaEditorPanel/SocialMediaEditorPanel.js +19 -8
- package/dist/src/fields/TiptapEditor/features/panels/SocialMediaEditorPanel/SocialMediaEditorPanel.js.map +1 -1
- package/dist/src/styles.css +5 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContentEmbedSupport.d.ts","sourceRoot":"","sources":["../../../../../../src/fields/TiptapEditor/extensions/serverside/ContentEmbedSupport.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ContentEmbedSupport.d.ts","sourceRoot":"","sources":["../../../../../../src/fields/TiptapEditor/extensions/serverside/ContentEmbedSupport.tsx"],"names":[],"mappings":"AAoBA,wBAAgB,mBAAmB,CAAC,EAAE,IAAI,EAAE;;CAAA,+BAuH3C"}
|
|
@@ -7,28 +7,39 @@ import { FacebookEmbed, InstagramEmbed, LinkedInEmbed, TikTokEmbed, XEmbed, YouT
|
|
|
7
7
|
import { cn } from "../../lib/utils/index.js";
|
|
8
8
|
import VideoBlockViewClientside from "../VideoBlock/components/VideoBlockViewClientside.js";
|
|
9
9
|
import { SocialMediaEmbedServerside } from "../SocialMedia/SocialMediaEmbedServerside.js";
|
|
10
|
+
function checkIfValidLink(link) {
|
|
11
|
+
return link?.startsWith("http");
|
|
12
|
+
}
|
|
10
13
|
export function ContentEmbedSupport({ body }) {
|
|
11
14
|
const [mounted, setMounted] = useState(false);
|
|
12
15
|
useLayoutEffect(()=>{
|
|
13
16
|
setMounted(true);
|
|
14
17
|
}, []);
|
|
15
18
|
const renderContent = (content)=>{
|
|
16
|
-
// if (!content.attrs.url) return null;
|
|
17
19
|
switch(content.type){
|
|
18
20
|
case "twitter":
|
|
21
|
+
if (!checkIfValidLink(content.attrs.url)) {
|
|
22
|
+
return null;
|
|
23
|
+
}
|
|
19
24
|
return /*#__PURE__*/ _jsx(SocialMediaEmbedServerside, {
|
|
20
25
|
children: /*#__PURE__*/ _jsx(XEmbed, {
|
|
21
|
-
url: content.attrs.url,
|
|
26
|
+
url: content.attrs.url || "",
|
|
22
27
|
width: 325
|
|
23
28
|
})
|
|
24
29
|
});
|
|
25
30
|
case "youtube":
|
|
31
|
+
if (!checkIfValidLink(content.attrs.url)) {
|
|
32
|
+
return null;
|
|
33
|
+
}
|
|
26
34
|
return /*#__PURE__*/ _jsx(SocialMediaEmbedServerside, {
|
|
27
35
|
children: /*#__PURE__*/ _jsx(YouTubeEmbed, {
|
|
28
|
-
url: content.attrs.url
|
|
36
|
+
url: content.attrs.url || ""
|
|
29
37
|
})
|
|
30
38
|
});
|
|
31
39
|
case "instagram":
|
|
40
|
+
if (!checkIfValidLink(content.attrs.url)) {
|
|
41
|
+
return null;
|
|
42
|
+
}
|
|
32
43
|
return /*#__PURE__*/ _jsx(SocialMediaEmbedServerside, {
|
|
33
44
|
children: /*#__PURE__*/ _jsx(InstagramEmbed, {
|
|
34
45
|
className: "max-w-[328px]",
|
|
@@ -38,6 +49,9 @@ export function ContentEmbedSupport({ body }) {
|
|
|
38
49
|
})
|
|
39
50
|
});
|
|
40
51
|
case "tiktok":
|
|
52
|
+
if (!checkIfValidLink(content.attrs.url)) {
|
|
53
|
+
return null;
|
|
54
|
+
}
|
|
41
55
|
return /*#__PURE__*/ _jsx(SocialMediaEmbedServerside, {
|
|
42
56
|
children: /*#__PURE__*/ _jsx(TikTokEmbed, {
|
|
43
57
|
className: "max-w-[328px]",
|
|
@@ -78,10 +92,12 @@ export function ContentEmbedSupport({ body }) {
|
|
|
78
92
|
})
|
|
79
93
|
});
|
|
80
94
|
case "linkedin":
|
|
95
|
+
if (!checkIfValidLink(content.attrs.url)) {
|
|
96
|
+
return null;
|
|
97
|
+
}
|
|
81
98
|
return /*#__PURE__*/ _jsx(SocialMediaEmbedServerside, {
|
|
82
99
|
children: /*#__PURE__*/ _jsx(LinkedInEmbed, {
|
|
83
|
-
url: content.attrs.url,
|
|
84
|
-
// postUrl="https://www.linkedin.com/posts/peterdiamandis_5-discoveries-the-james-webb-telescope-will-activity-6898694773406875648-z-D7"
|
|
100
|
+
url: content.attrs.url || "",
|
|
85
101
|
width: 325,
|
|
86
102
|
height: 570
|
|
87
103
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/serverside/ContentEmbedSupport.tsx"],"sourcesContent":["\"use client\";\n\nimport { Portal } from \"@radix-ui/react-portal\";\nimport Image from \"next/image.js\";\nimport { useLayoutEffect, useState } from \"react\";\nimport {\n FacebookEmbed,\n InstagramEmbed,\n LinkedInEmbed,\n TikTokEmbed,\n XEmbed,\n YouTubeEmbed,\n} from \"react-social-media-embed\";\nimport { cn } from \"../../lib/utils/index.js\";\nimport VideoBlockViewClientside from \"../VideoBlock/components/VideoBlockViewClientside.js\";\nimport { SocialMediaEmbedServerside } from \"../SocialMedia/SocialMediaEmbedServerside.js\";\n\nexport function ContentEmbedSupport({ body }) {\n const [mounted, setMounted] = useState(false);\n useLayoutEffect(() => {\n setMounted(true);\n }, []);\n\n const renderContent = (content) => {\n
|
|
1
|
+
{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/serverside/ContentEmbedSupport.tsx"],"sourcesContent":["\"use client\";\n\nimport { Portal } from \"@radix-ui/react-portal\";\nimport Image from \"next/image.js\";\nimport { useLayoutEffect, useState } from \"react\";\nimport {\n FacebookEmbed,\n InstagramEmbed,\n LinkedInEmbed,\n TikTokEmbed,\n XEmbed,\n YouTubeEmbed,\n} from \"react-social-media-embed\";\nimport { cn } from \"../../lib/utils/index.js\";\nimport VideoBlockViewClientside from \"../VideoBlock/components/VideoBlockViewClientside.js\";\nimport { SocialMediaEmbedServerside } from \"../SocialMedia/SocialMediaEmbedServerside.js\";\n\nfunction checkIfValidLink(link: string) {\n return link?.startsWith(\"http\");\n}\nexport function ContentEmbedSupport({ body }) {\n const [mounted, setMounted] = useState(false);\n useLayoutEffect(() => {\n setMounted(true);\n }, []);\n\n const renderContent = (content) => {\n switch (content.type) {\n case \"twitter\":\n if (!checkIfValidLink(content.attrs.url)) {\n return null;\n }\n return (\n <SocialMediaEmbedServerside>\n <XEmbed url={content.attrs.url || \"\"} width={325} />\n </SocialMediaEmbedServerside>\n );\n case \"youtube\":\n if (!checkIfValidLink(content.attrs.url)) {\n return null;\n }\n return (\n <SocialMediaEmbedServerside>\n <YouTubeEmbed url={content.attrs.url || \"\"} />\n </SocialMediaEmbedServerside>\n );\n case \"instagram\":\n if (!checkIfValidLink(content.attrs.url)) {\n return null;\n }\n return (\n <SocialMediaEmbedServerside>\n <InstagramEmbed\n className=\"max-w-[328px]\"\n url={content.attrs.url || \"\"}\n width={328}\n captioned\n />\n </SocialMediaEmbedServerside>\n );\n case \"tiktok\":\n if (!checkIfValidLink(content.attrs.url)) {\n return null;\n }\n return (\n <SocialMediaEmbedServerside>\n <TikTokEmbed\n className=\"max-w-[328px]\"\n url={content.attrs.url || \"\"}\n width={328}\n />\n </SocialMediaEmbedServerside>\n );\n case \"imageBlock\":\n return (\n <div\n className={cn(\"relative object-cover\", {\n \"aspect-video\": !content.attrs.height,\n })}\n style={{\n width: content.attrs.width || \"100%\",\n ...(content.attrs.height ? { height: content.attrs.height } : {}),\n }}\n >\n {/* @ts-ignore */}\n <Image\n src={content.attrs.src}\n alt={content.attrs.caption || \"\"}\n style={{ width: content.attrs.width }}\n fill\n />\n </div>\n );\n case \"videoBlock\":\n // @ts-ignore\n return <VideoBlockViewClientside node={content} />;\n case \"facebook\":\n return (\n <SocialMediaEmbedServerside>\n <FacebookEmbed url={content.attrs.url || \"\"} width={550} />\n </SocialMediaEmbedServerside>\n );\n case \"linkedin\":\n if (!checkIfValidLink(content.attrs.url)) {\n return null;\n }\n return (\n <SocialMediaEmbedServerside>\n <LinkedInEmbed\n url={content.attrs.url || \"\"}\n width={325}\n height={570}\n />\n </SocialMediaEmbedServerside>\n );\n\n default:\n return null;\n }\n };\n if (!mounted) return null;\n return (\n <>\n {body.content\n .filter((content) => content?.attrs?.[\"data-id\"])\n .map((content) => {\n return (\n <Portal\n key={`embed-content-${content.attrs[\"data-id\"]}`}\n container={document?.querySelector(\n `[data-id='${content.attrs[\"data-id\"]}']`\n )}\n >\n {renderContent(content)}\n </Portal>\n );\n })}\n </>\n );\n}\n"],"names":["Portal","Image","useLayoutEffect","useState","FacebookEmbed","InstagramEmbed","LinkedInEmbed","TikTokEmbed","XEmbed","YouTubeEmbed","cn","VideoBlockViewClientside","SocialMediaEmbedServerside","checkIfValidLink","link","startsWith","ContentEmbedSupport","body","mounted","setMounted","renderContent","content","type","attrs","url","width","className","captioned","div","height","style","src","alt","caption","fill","node","filter","map","container","document","querySelector"],"mappings":"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"}
|
package/dist/src/fields/TiptapEditor/extensions/serverside/useAppendIdToClientsideBlocks.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAppendIdToClientsideBlocks.d.ts","sourceRoot":"","sources":["../../../../../../src/fields/TiptapEditor/extensions/serverside/useAppendIdToClientsideBlocks.ts"],"names":[],"mappings":"AAYA,wBAAgB,0BAA0B,CAAC,IAAI,KAAA,
|
|
1
|
+
{"version":3,"file":"useAppendIdToClientsideBlocks.d.ts","sourceRoot":"","sources":["../../../../../../src/fields/TiptapEditor/extensions/serverside/useAppendIdToClientsideBlocks.ts"],"names":[],"mappings":"AAYA,wBAAgB,0BAA0B,CAAC,IAAI,KAAA,OAY9C"}
|
|
@@ -9,9 +9,10 @@ const SOCIAL_MEDIA = [
|
|
|
9
9
|
"videoBlock"
|
|
10
10
|
];
|
|
11
11
|
export function appendIdToClientsideBlocks(body) {
|
|
12
|
+
if (!body) return body;
|
|
12
13
|
return {
|
|
13
14
|
...body,
|
|
14
|
-
content: body
|
|
15
|
+
content: body?.content?.map((c, index)=>{
|
|
15
16
|
if (SOCIAL_MEDIA.includes(c.type)) {
|
|
16
17
|
c.attrs["data-id"] = index;
|
|
17
18
|
}
|
package/dist/src/fields/TiptapEditor/extensions/serverside/useAppendIdToClientsideBlocks.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/serverside/useAppendIdToClientsideBlocks.ts"],"sourcesContent":["import { useCallback } from \"react\";\n\nconst SOCIAL_MEDIA = [\n \"twitter\",\n \"youtube\",\n \"facebook\",\n \"instagram\",\n \"linkedin\",\n \"tiktok\",\n \"imageBlock\",\n \"videoBlock\",\n];\nexport function appendIdToClientsideBlocks(body) {\n return {\n ...body,\n content: body
|
|
1
|
+
{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/serverside/useAppendIdToClientsideBlocks.ts"],"sourcesContent":["import { useCallback } from \"react\";\n\nconst SOCIAL_MEDIA = [\n \"twitter\",\n \"youtube\",\n \"facebook\",\n \"instagram\",\n \"linkedin\",\n \"tiktok\",\n \"imageBlock\",\n \"videoBlock\",\n];\nexport function appendIdToClientsideBlocks(body) {\n if (!body) return body;\n return {\n ...body,\n content: body?.content?.map((c, index) => {\n if (SOCIAL_MEDIA.includes(c.type)) {\n c.attrs[\"data-id\"] = index;\n }\n\n return c;\n }),\n };\n}\n"],"names":["SOCIAL_MEDIA","appendIdToClientsideBlocks","body","content","map","c","index","includes","type","attrs"],"mappings":"AAEA,MAAMA,eAAe;IACnB;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACD;AACD,OAAO,SAASC,2BAA2BC,IAAI;IAC7C,IAAI,CAACA,MAAM,OAAOA;IAClB,OAAO;QACL,GAAGA,IAAI;QACPC,SAASD,MAAMC,SAASC,IAAI,CAACC,GAAGC;YAC9B,IAAIN,aAAaO,QAAQ,CAACF,EAAEG,IAAI,GAAG;gBACjCH,EAAEI,KAAK,CAAC,UAAU,GAAGH;YACvB;YAEA,OAAOD;QACT;IACF;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SocialMediaEditorPanel.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/features/panels/SocialMediaEditorPanel/SocialMediaEditorPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAKrD,MAAM,MAAM,2BAA2B,GAAG;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACtD,eAAe,EAAE,MAAM,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,+BAG5B,2BAA2B;;;sBAIS,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC;sBAOlE,KAAK,CAAC,SAAS;;;CAiBtB,CAAC;AAEF,eAAO,MAAM,sBAAsB,kGAOhC,2BAA2B,
|
|
1
|
+
{"version":3,"file":"SocialMediaEditorPanel.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/features/panels/SocialMediaEditorPanel/SocialMediaEditorPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAKrD,MAAM,MAAM,2BAA2B,GAAG;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACtD,eAAe,EAAE,MAAM,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,+BAG5B,2BAA2B;;;sBAIS,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC;sBAOlE,KAAK,CAAC,SAAS;;;CAiBtB,CAAC;AAEF,eAAO,MAAM,sBAAsB,kGAOhC,2BAA2B,sBAgD7B,CAAC"}
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import React, { useCallback, useState } from "react";
|
|
3
3
|
import { Button } from "../../ui/Button/Button.js";
|
|
4
4
|
import { Surface } from "../../ui/Surface.js";
|
|
5
|
-
import {
|
|
5
|
+
import { CheckboxInput } from "@payloadcms/ui";
|
|
6
6
|
export const useLinkEditorState = ({ initialSrc, onSetLink })=>{
|
|
7
7
|
const [url, setUrl] = useState(initialSrc || "");
|
|
8
8
|
const [isInline, setIsInline] = useState(false);
|
|
@@ -52,6 +52,24 @@ export const SocialMediaEditorPanel = ({ onSetLink, initialOpenInNewTab, initial
|
|
|
52
52
|
onChange: state.onChange
|
|
53
53
|
})
|
|
54
54
|
}),
|
|
55
|
+
/*#__PURE__*/ _jsx("hr", {
|
|
56
|
+
className: "w-full py-3"
|
|
57
|
+
}),
|
|
58
|
+
/*#__PURE__*/ _jsxs("label", {
|
|
59
|
+
className: "flex w-full items-center",
|
|
60
|
+
children: [
|
|
61
|
+
/*#__PURE__*/ _jsx(CheckboxInput, {
|
|
62
|
+
checked: state.isInline,
|
|
63
|
+
onToggle: ()=>{
|
|
64
|
+
state.setIsInline((p)=>!p);
|
|
65
|
+
}
|
|
66
|
+
}),
|
|
67
|
+
/*#__PURE__*/ _jsx("span", {
|
|
68
|
+
className: "ml-2 cursor-pointer",
|
|
69
|
+
children: "Place embed inline"
|
|
70
|
+
})
|
|
71
|
+
]
|
|
72
|
+
}),
|
|
55
73
|
/*#__PURE__*/ _jsx(Button, {
|
|
56
74
|
variant: "primary",
|
|
57
75
|
buttonSize: "medium",
|
|
@@ -65,13 +83,6 @@ export const SocialMediaEditorPanel = ({ onSetLink, initialOpenInNewTab, initial
|
|
|
65
83
|
/*#__PURE__*/ _jsx("span", {
|
|
66
84
|
className: "mt-1 mb-0 text-sm",
|
|
67
85
|
children: descriptionText
|
|
68
|
-
}),
|
|
69
|
-
/*#__PURE__*/ _jsx(CheckboxField, {
|
|
70
|
-
label: "Inline Embed",
|
|
71
|
-
checked: state.isInline,
|
|
72
|
-
onChange: ()=>{
|
|
73
|
-
state.setIsInline((p)=>!p);
|
|
74
|
-
}
|
|
75
86
|
})
|
|
76
87
|
]
|
|
77
88
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/features/panels/SocialMediaEditorPanel/SocialMediaEditorPanel.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport { Button } from \"../../ui/Button/Button.js\";\nimport { Surface } from \"../../ui/Surface.js\";\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/features/panels/SocialMediaEditorPanel/SocialMediaEditorPanel.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport { Button } from \"../../ui/Button/Button.js\";\nimport { Surface } from \"../../ui/Surface.js\";\nimport { CheckboxInput } from \"@payloadcms/ui\";\n\nexport type SocialMediaEditorPanelProps = {\n initialSrc?: string;\n initialOpenInNewTab?: boolean;\n onSetLink: (src: string, className?: boolean) => void;\n placeholderText: string;\n buttonText: string;\n descriptionText: string;\n};\n\nexport const useLinkEditorState = ({\n initialSrc,\n onSetLink,\n}: SocialMediaEditorPanelProps) => {\n const [url, setUrl] = useState(initialSrc || \"\");\n const [isInline, setIsInline] = useState(false);\n\n const onChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n setUrl(event.target.value);\n }, []);\n\n // const isValidUrl = useMemo(() => /^(\\S+):(\\/\\/)?\\S+$/.test(url), [url]);\n\n const handleSubmit = useCallback(\n (e: React.FormEvent) => {\n e.preventDefault();\n // if (isValidUrl) {\n onSetLink(url, isInline);\n // }\n },\n [url, onSetLink, isInline]\n );\n\n return {\n url,\n setUrl,\n onChange,\n handleSubmit,\n isInline,\n setIsInline,\n };\n};\n\nexport const SocialMediaEditorPanel = ({\n onSetLink,\n initialOpenInNewTab,\n initialSrc,\n placeholderText,\n buttonText,\n descriptionText,\n}: SocialMediaEditorPanelProps) => {\n const state = useLinkEditorState({\n onSetLink,\n initialOpenInNewTab,\n initialSrc,\n placeholderText,\n buttonText,\n descriptionText,\n });\n\n return (\n <Surface className=\"p-2\">\n <div className=\"flex flex-col items-center gap-2 p-1\">\n <label className=\"flex items-center gap-2 p-2 rounded-lg bg-neutral-100 dark:bg-neutral-900 cursor-text w-full\">\n {/* <Icon icon={Link} className=\"flex-none text-black dark:text-white\" /> */}\n <input\n className=\"flex-1 bg-transparent outline-none min-w-[276px] text-black text-sm dark:text-white\"\n placeholder={placeholderText}\n value={state.url}\n onChange={state.onChange}\n />\n </label>\n <hr className=\"w-full py-3\" />\n <label className=\"flex w-full items-center\">\n <CheckboxInput\n checked={state.isInline}\n onToggle={() => {\n state.setIsInline((p) => !p);\n }}\n />\n <span className=\"ml-2 cursor-pointer\">Place embed inline</span>\n </label>\n <Button\n variant=\"primary\"\n buttonSize=\"medium\"\n className=\"w-full m-2\"\n type=\"button\"\n onClick={(e) => {\n state.handleSubmit(e);\n }}\n // disabled={!state.isValidUrl}\n >\n {buttonText}\n </Button>\n <span className=\"mt-1 mb-0 text-sm\">{descriptionText}</span>\n </div>\n </Surface>\n );\n};\n"],"names":["React","useCallback","useState","Button","Surface","CheckboxInput","useLinkEditorState","initialSrc","onSetLink","url","setUrl","isInline","setIsInline","onChange","event","target","value","handleSubmit","e","preventDefault","SocialMediaEditorPanel","initialOpenInNewTab","placeholderText","buttonText","descriptionText","state","className","div","label","input","placeholder","hr","checked","onToggle","p","span","variant","buttonSize","type","onClick"],"mappings":";AAAA,OAAOA,SAASC,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AACrD,SAASC,MAAM,QAAQ,4BAA4B;AACnD,SAASC,OAAO,QAAQ,sBAAsB;AAC9C,SAASC,aAAa,QAAQ,iBAAiB;AAW/C,OAAO,MAAMC,qBAAqB,CAAC,EACjCC,UAAU,EACVC,SAAS,EACmB;IAC5B,MAAM,CAACC,KAAKC,OAAO,GAAGR,SAASK,cAAc;IAC7C,MAAM,CAACI,UAAUC,YAAY,GAAGV,SAAS;IAEzC,MAAMW,WAAWZ,YAAY,CAACa;QAC5BJ,OAAOI,MAAMC,MAAM,CAACC,KAAK;IAC3B,GAAG,EAAE;IAEL,2EAA2E;IAE3E,MAAMC,eAAehB,YACnB,CAACiB;QACCA,EAAEC,cAAc;QAChB,oBAAoB;QACpBX,UAAUC,KAAKE;IACf,IAAI;IACN,GACA;QAACF;QAAKD;QAAWG;KAAS;IAG5B,OAAO;QACLF;QACAC;QACAG;QACAI;QACAN;QACAC;IACF;AACF,EAAE;AAEF,OAAO,MAAMQ,yBAAyB,CAAC,EACrCZ,SAAS,EACTa,mBAAmB,EACnBd,UAAU,EACVe,eAAe,EACfC,UAAU,EACVC,eAAe,EACa;IAC5B,MAAMC,QAAQnB,mBAAmB;QAC/BE;QACAa;QACAd;QACAe;QACAC;QACAC;IACF;IAEA,qBACE,KAACpB;QAAQsB,WAAU;kBACjB,cAAA,MAACC;YAAID,WAAU;;8BACb,KAACE;oBAAMF,WAAU;8BAEf,cAAA,KAACG;wBACCH,WAAU;wBACVI,aAAaR;wBACbN,OAAOS,MAAMhB,GAAG;wBAChBI,UAAUY,MAAMZ,QAAQ;;;8BAG5B,KAACkB;oBAAGL,WAAU;;8BACd,MAACE;oBAAMF,WAAU;;sCACf,KAACrB;4BACC2B,SAASP,MAAMd,QAAQ;4BACvBsB,UAAU;gCACRR,MAAMb,WAAW,CAAC,CAACsB,IAAM,CAACA;4BAC5B;;sCAEF,KAACC;4BAAKT,WAAU;sCAAsB;;;;8BAExC,KAACvB;oBACCiC,SAAQ;oBACRC,YAAW;oBACXX,WAAU;oBACVY,MAAK;oBACLC,SAAS,CAACrB;wBACRO,MAAMR,YAAY,CAACC;oBACrB;8BAGCK;;8BAEH,KAACY;oBAAKT,WAAU;8BAAqBF;;;;;AAI7C,EAAE"}
|