payload-richtext-tiptap 0.0.83 → 0.0.85
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/SocialMedia/SocialMediaEmbedServerside.d.ts.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/SocialMedia/SocialMediaEmbedServerside.js +2 -5
- package/dist/src/fields/TiptapEditor/extensions/SocialMedia/SocialMediaEmbedServerside.js.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/serverside/ContentEmbedSupport.d.ts.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/serverside/ContentEmbedSupport.js +7 -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 +1 -0
- 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 +1 -0
- package/dist/src/fields/TiptapEditor/features/panels/SocialMediaEditorPanel/SocialMediaEditorPanel.js.map +1 -1
- package/dist/src/styles.css +9 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
package/dist/src/fields/TiptapEditor/extensions/SocialMedia/SocialMediaEmbedServerside.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SocialMediaEmbedServerside.d.ts","sourceRoot":"","sources":["../../../../../../src/fields/TiptapEditor/extensions/SocialMedia/SocialMediaEmbedServerside.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SocialMediaEmbedServerside.d.ts","sourceRoot":"","sources":["../../../../../../src/fields/TiptapEditor/extensions/SocialMedia/SocialMediaEmbedServerside.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,0BAA0B,4BAA6B,GAAG,gCActE,CAAC"}
|
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { NodeViewContent, NodeViewWrapper } from "@tiptap/react";
|
|
3
2
|
import { cn } from "../../lib/utils/index.js";
|
|
4
3
|
export const SocialMediaEmbedServerside = ({ children, className })=>{
|
|
5
|
-
return /*#__PURE__*/ _jsx(
|
|
4
|
+
return /*#__PURE__*/ _jsx("div", {
|
|
6
5
|
className: cn("react-component", className),
|
|
7
|
-
children: /*#__PURE__*/ _jsx(
|
|
8
|
-
contentEditable: "false",
|
|
6
|
+
children: /*#__PURE__*/ _jsx("div", {
|
|
9
7
|
className: "socialMediaContainer",
|
|
10
8
|
children: /*#__PURE__*/ _jsx("div", {
|
|
11
9
|
style: {
|
|
@@ -14,7 +12,6 @@ export const SocialMediaEmbedServerside = ({ children, className })=>{
|
|
|
14
12
|
},
|
|
15
13
|
draggable: "true",
|
|
16
14
|
"data-drag-handle": "",
|
|
17
|
-
contentEditable: "false",
|
|
18
15
|
children: children
|
|
19
16
|
})
|
|
20
17
|
})
|
package/dist/src/fields/TiptapEditor/extensions/SocialMedia/SocialMediaEmbedServerside.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/SocialMedia/SocialMediaEmbedServerside.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/SocialMedia/SocialMediaEmbedServerside.tsx"],"sourcesContent":["import { cn } from \"../../lib/utils/index.js\";\n\nexport const SocialMediaEmbedServerside = ({ children, className }: any) => {\n return (\n <div className={cn(\"react-component\", className)}>\n <div className=\"socialMediaContainer\">\n <div\n style={{ display: \"flex\", justifyContent: \"center\" }}\n draggable=\"true\"\n data-drag-handle=\"\"\n >\n {children}\n </div>\n </div>\n </div>\n );\n};\n"],"names":["cn","SocialMediaEmbedServerside","children","className","div","style","display","justifyContent","draggable","data-drag-handle"],"mappings":";AAAA,SAASA,EAAE,QAAQ,2BAA2B;AAE9C,OAAO,MAAMC,6BAA6B,CAAC,EAAEC,QAAQ,EAAEC,SAAS,EAAO;IACrE,qBACE,KAACC;QAAID,WAAWH,GAAG,mBAAmBG;kBACpC,cAAA,KAACC;YAAID,WAAU;sBACb,cAAA,KAACC;gBACCC,OAAO;oBAAEC,SAAS;oBAAQC,gBAAgB;gBAAS;gBACnDC,WAAU;gBACVC,oBAAiB;0BAEhBP;;;;AAKX,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
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,+
|
|
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,+BAyH3C"}
|
|
@@ -2,18 +2,20 @@
|
|
|
2
2
|
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
3
|
import { Portal } from "@radix-ui/react-portal";
|
|
4
4
|
import Image from "next/image.js";
|
|
5
|
-
import {
|
|
5
|
+
import { useEffect, useState } from "react";
|
|
6
6
|
import { FacebookEmbed, InstagramEmbed, LinkedInEmbed, TikTokEmbed, XEmbed, YouTubeEmbed } from "react-social-media-embed";
|
|
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
10
|
function checkIfValidLink(link) {
|
|
11
|
-
return link
|
|
11
|
+
return typeof link === "string";
|
|
12
12
|
}
|
|
13
13
|
export function ContentEmbedSupport({ body }) {
|
|
14
14
|
const [mounted, setMounted] = useState(false);
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
useEffect(()=>{
|
|
16
|
+
setTimeout(()=>{
|
|
17
|
+
setMounted(true);
|
|
18
|
+
}, 100);
|
|
17
19
|
}, []);
|
|
18
20
|
const renderContent = (content)=>{
|
|
19
21
|
switch(content.type){
|
|
@@ -112,7 +114,7 @@ export function ContentEmbedSupport({ body }) {
|
|
|
112
114
|
return /*#__PURE__*/ _jsx(Portal, {
|
|
113
115
|
container: document?.querySelector(`[data-id='${content.attrs["data-id"]}']`),
|
|
114
116
|
children: renderContent(content)
|
|
115
|
-
}, `embed-content-${content.attrs["data-id"]}`);
|
|
117
|
+
}, `embed-content-${content.attrs["data-id"]}-${content.attrs.key}`);
|
|
116
118
|
})
|
|
117
119
|
});
|
|
118
120
|
}
|
|
@@ -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 {
|
|
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 { useEffect, 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 typeof link === \"string\";\n}\nexport function ContentEmbedSupport({ body }) {\n const [mounted, setMounted] = useState(false);\n useEffect(() => {\n setTimeout(() => {\n setMounted(true);\n }, 100);\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\"]}-${content.attrs.key}`}\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","useEffect","useState","FacebookEmbed","InstagramEmbed","LinkedInEmbed","TikTokEmbed","XEmbed","YouTubeEmbed","cn","VideoBlockViewClientside","SocialMediaEmbedServerside","checkIfValidLink","link","ContentEmbedSupport","body","mounted","setMounted","setTimeout","renderContent","content","type","attrs","url","width","className","captioned","div","height","style","src","alt","caption","fill","node","filter","map","container","document","querySelector","key"],"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,OAa9C"}
|
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 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;
|
|
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 c.key = Math.random();\n }\n\n return c;\n }),\n };\n}\n"],"names":["SOCIAL_MEDIA","appendIdToClientsideBlocks","body","content","map","c","index","includes","type","attrs","key","Math","random"],"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;gBACrBD,EAAEK,GAAG,GAAGC,KAAKC,MAAM;YACrB;YAEA,OAAOP;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,sBAiD7B,CAAC"}
|
|
@@ -59,6 +59,7 @@ export const SocialMediaEditorPanel = ({ onSetLink, initialOpenInNewTab, initial
|
|
|
59
59
|
className: "flex w-full items-center",
|
|
60
60
|
children: [
|
|
61
61
|
/*#__PURE__*/ _jsx(CheckboxInput, {
|
|
62
|
+
className: "border border-solid border-slate-700",
|
|
62
63
|
checked: state.isInline,
|
|
63
64
|
onToggle: ()=>{
|
|
64
65
|
state.setIsInline((p)=>!p);
|
|
@@ -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 { 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;
|
|
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 className=\"border border-solid border-slate-700\"\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;4BACCqB,WAAU;4BACVM,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"}
|
package/dist/src/styles.css
CHANGED
|
@@ -2168,6 +2168,10 @@ select {
|
|
|
2168
2168
|
border-top-width: 1px;
|
|
2169
2169
|
}
|
|
2170
2170
|
|
|
2171
|
+
.border-solid {
|
|
2172
|
+
border-style: solid;
|
|
2173
|
+
}
|
|
2174
|
+
|
|
2171
2175
|
.border-black {
|
|
2172
2176
|
--tw-border-opacity: 1;
|
|
2173
2177
|
border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
|
|
@@ -2196,6 +2200,11 @@ select {
|
|
|
2196
2200
|
border-color: rgb(229 229 229 / var(--tw-border-opacity, 1));
|
|
2197
2201
|
}
|
|
2198
2202
|
|
|
2203
|
+
.border-slate-700 {
|
|
2204
|
+
--tw-border-opacity: 1;
|
|
2205
|
+
border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
|
|
2206
|
+
}
|
|
2207
|
+
|
|
2199
2208
|
.border-transparent {
|
|
2200
2209
|
border-color: transparent;
|
|
2201
2210
|
}
|