payload-richtext-tiptap 0.0.82 → 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.
@@ -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,sBA6C7B,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,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 { CheckboxField } from "@payloadcms/ui";
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 { CheckboxField, 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 <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 <CheckboxField\n label=\"Inline Embed\"\n checked={state.isInline}\n onChange={() => {\n state.setIsInline((p) => !p);\n }}\n />\n </div>\n </Surface>\n );\n};\n"],"names":["React","useCallback","useState","Button","Surface","CheckboxField","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","variant","buttonSize","type","onClick","span","checked","p"],"mappings":";AAAA,OAAOA,SAASC,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AACrD,SAASC,MAAM,QAAQ,4BAA4B;AACnD,SAASC,OAAO,QAAQ,sBAAsB;AAC9C,SAASC,aAAa,QAAuB,iBAAiB;AAW9D,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,KAACV;oBACC4B,SAAQ;oBACRC,YAAW;oBACXN,WAAU;oBACVO,MAAK;oBACLC,SAAS,CAAChB;wBACRO,MAAMR,YAAY,CAACC;oBACrB;8BAGCK;;8BAEH,KAACY;oBAAKT,WAAU;8BAAqBF;;8BACrC,KAACnB;oBACCuB,OAAM;oBACNQ,SAASX,MAAMd,QAAQ;oBACvBE,UAAU;wBACRY,MAAMb,WAAW,CAAC,CAACyB,IAAM,CAACA;oBAC5B;;;;;AAKV,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 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"}
@@ -2406,6 +2406,11 @@ select {
2406
2406
  padding-bottom: 0.5rem;
2407
2407
  }
2408
2408
 
2409
+ .py-3 {
2410
+ padding-top: 0.75rem;
2411
+ padding-bottom: 0.75rem;
2412
+ }
2413
+
2409
2414
  .py-4 {
2410
2415
  padding-top: 1rem;
2411
2416
  padding-bottom: 1rem;