payload-richtext-tiptap 0.0.83 → 0.0.84

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.
@@ -8,7 +8,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?.startsWith("http");
11
+ return typeof link === "string";
12
12
  }
13
13
  export function ContentEmbedSupport({ body }) {
14
14
  const [mounted, setMounted] = useState(false);
@@ -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\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":"AAAA;;AAEA,SAASA,MAAM,QAAQ,yBAAyB;AAChD,OAAOC,WAAW,gBAAgB;AAClC,SAASC,eAAe,EAAEC,QAAQ,QAAQ,QAAQ;AAClD,SACEC,aAAa,EACbC,cAAc,EACdC,aAAa,EACbC,WAAW,EACXC,MAAM,EACNC,YAAY,QACP,2BAA2B;AAClC,SAASC,EAAE,QAAQ,2BAA2B;AAC9C,OAAOC,8BAA8B,uDAAuD;AAC5F,SAASC,0BAA0B,QAAQ,+CAA+C;AAE1F,SAASC,iBAAiBC,IAAY;IACpC,OAAOA,MAAMC,WAAW;AAC1B;AACA,OAAO,SAASC,oBAAoB,EAAEC,IAAI,EAAE;IAC1C,MAAM,CAACC,SAASC,WAAW,GAAGhB,SAAS;IACvCD,gBAAgB;QACdiB,WAAW;IACb,GAAG,EAAE;IAEL,MAAMC,gBAAgB,CAACC;QACrB,OAAQA,QAAQC,IAAI;YAClB,KAAK;gBACH,IAAI,CAACT,iBAAiBQ,QAAQE,KAAK,CAACC,GAAG,GAAG;oBACxC,OAAO;gBACT;gBACA,qBACE,KAACZ;8BACC,cAAA,KAACJ;wBAAOgB,KAAKH,QAAQE,KAAK,CAACC,GAAG,IAAI;wBAAIC,OAAO;;;YAGnD,KAAK;gBACH,IAAI,CAACZ,iBAAiBQ,QAAQE,KAAK,CAACC,GAAG,GAAG;oBACxC,OAAO;gBACT;gBACA,qBACE,KAACZ;8BACC,cAAA,KAACH;wBAAae,KAAKH,QAAQE,KAAK,CAACC,GAAG,IAAI;;;YAG9C,KAAK;gBACH,IAAI,CAACX,iBAAiBQ,QAAQE,KAAK,CAACC,GAAG,GAAG;oBACxC,OAAO;gBACT;gBACA,qBACE,KAACZ;8BACC,cAAA,KAACP;wBACCqB,WAAU;wBACVF,KAAKH,QAAQE,KAAK,CAACC,GAAG,IAAI;wBAC1BC,OAAO;wBACPE,SAAS;;;YAIjB,KAAK;gBACH,IAAI,CAACd,iBAAiBQ,QAAQE,KAAK,CAACC,GAAG,GAAG;oBACxC,OAAO;gBACT;gBACA,qBACE,KAACZ;8BACC,cAAA,KAACL;wBACCmB,WAAU;wBACVF,KAAKH,QAAQE,KAAK,CAACC,GAAG,IAAI;wBAC1BC,OAAO;;;YAIf,KAAK;gBACH,qBACE,KAACG;oBACCF,WAAWhB,GAAG,yBAAyB;wBACrC,gBAAgB,CAACW,QAAQE,KAAK,CAACM,MAAM;oBACvC;oBACAC,OAAO;wBACLL,OAAOJ,QAAQE,KAAK,CAACE,KAAK,IAAI;wBAC9B,GAAIJ,QAAQE,KAAK,CAACM,MAAM,GAAG;4BAAEA,QAAQR,QAAQE,KAAK,CAACM,MAAM;wBAAC,IAAI,CAAC,CAAC;oBAClE;8BAGA,cAAA,KAAC5B;wBACC8B,KAAKV,QAAQE,KAAK,CAACQ,GAAG;wBACtBC,KAAKX,QAAQE,KAAK,CAACU,OAAO,IAAI;wBAC9BH,OAAO;4BAAEL,OAAOJ,QAAQE,KAAK,CAACE,KAAK;wBAAC;wBACpCS,IAAI;;;YAIZ,KAAK;gBACH,aAAa;gBACb,qBAAO,KAACvB;oBAAyBwB,MAAMd;;YACzC,KAAK;gBACH,qBACE,KAACT;8BACC,cAAA,KAACR;wBAAcoB,KAAKH,QAAQE,KAAK,CAACC,GAAG,IAAI;wBAAIC,OAAO;;;YAG1D,KAAK;gBACH,IAAI,CAACZ,iBAAiBQ,QAAQE,KAAK,CAACC,GAAG,GAAG;oBACxC,OAAO;gBACT;gBACA,qBACE,KAACZ;8BACC,cAAA,KAACN;wBACCkB,KAAKH,QAAQE,KAAK,CAACC,GAAG,IAAI;wBAC1BC,OAAO;wBACPI,QAAQ;;;YAKhB;gBACE,OAAO;QACX;IACF;IACA,IAAI,CAACX,SAAS,OAAO;IACrB,qBACE;kBACGD,KAAKI,OAAO,CACVe,MAAM,CAAC,CAACf,UAAYA,SAASE,OAAO,CAAC,UAAU,EAC/Cc,GAAG,CAAC,CAAChB;YACJ,qBACE,KAACrB;gBAECsC,WAAWC,UAAUC,cACnB,CAAC,UAAU,EAAEnB,QAAQE,KAAK,CAAC,UAAU,CAAC,EAAE,CAAC;0BAG1CH,cAAcC;eALV,CAAC,cAAc,EAAEA,QAAQE,KAAK,CAAC,UAAU,EAAE;QAQtD;;AAGR"}
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 typeof link === \"string\";\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","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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"}
@@ -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,sBAgD7B,CAAC"}
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;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"}
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"}
@@ -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
  }