payload-richtext-tiptap 0.0.51 → 0.0.53

package/dist/src/fields/TiptapEditor/extensions/ImageBlock/ImageBlock.d.ts

@@ -4,10 +4,12 @@ declare module "@tiptap/core" {
         imageBlock: {
             setImageBlock: (attributes: {
                 src: string;
+                assetId?: string;
             }) => ReturnType;
             setImageBlockAt: (attributes: {
                 src: string;
                 pos: number | Range;
+                assetId?: string;
             }) => ReturnType;
             setImageBlockAlign: (align: "left" | "center" | "right") => ReturnType;
             setImageBlockWidth: (width: number) => ReturnType;

package/dist/src/fields/TiptapEditor/extensions/ImageBlock/ImageBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageBlock.d.ts","sourceRoot":"","sources":["../../../../../../src/fields/TiptapEditor/extensions/ImageBlock/ImageBlock.ts"],"names":[],"mappings":"AAGA,OAAO,EAAmB,KAAK,EAAE,MAAM,cAAc,CAAC;AAKtD,OAAO,QAAQ,cAAc,CAAC;IAC5B,UAAU,QAAQ,CAAC,UAAU;QAC3B,UAAU,EAAE;YACV,aAAa,EAAE,CAAC,UAAU,EAAE;gBAAE,GAAG,EAAE,MAAM,CAAA;aAAE,KAAK,UAAU,CAAC;YAC3D,eAAe,EAAE,CAAC,UAAU,EAAE;gBAC5B,GAAG,EAAE,MAAM,CAAC;gBACZ,GAAG,EAAE,MAAM,GAAG,KAAK,CAAC;aACrB,KAAK,UAAU,CAAC;YACjB,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,KAAK,UAAU,CAAC;YACvE,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,UAAU,CAAC;SACnD,CAAC;KACH;CACF;AAED,eAAO,MAAM,UAAU,mFA8FrB,CAAC;AAEH,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ImageBlock.d.ts","sourceRoot":"","sources":["../../../../../../src/fields/TiptapEditor/extensions/ImageBlock/ImageBlock.ts"],"names":[],"mappings":"AAGA,OAAO,EAAmB,KAAK,EAAE,MAAM,cAAc,CAAC;AAKtD,OAAO,QAAQ,cAAc,CAAC;IAC5B,UAAU,QAAQ,CAAC,UAAU;QAC3B,UAAU,EAAE;YACV,aAAa,EAAE,CAAC,UAAU,EAAE;gBAC1B,GAAG,EAAE,MAAM,CAAC;gBACZ,OAAO,CAAC,EAAE,MAAM,CAAC;aAClB,KAAK,UAAU,CAAC;YACjB,eAAe,EAAE,CAAC,UAAU,EAAE;gBAC5B,GAAG,EAAE,MAAM,CAAC;gBACZ,GAAG,EAAE,MAAM,GAAG,KAAK,CAAC;gBACpB,OAAO,CAAC,EAAE,MAAM,CAAC;aAClB,KAAK,UAAU,CAAC;YACjB,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,KAAK,UAAU,CAAC;YACvE,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,UAAU,CAAC;SACnD,CAAC;KACH;CACF;AAED,eAAO,MAAM,UAAU,mFA8FrB,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/dist/src/fields/TiptapEditor/extensions/ImageBlock/ImageBlock.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/ImageBlock/ImageBlock.ts"],"sourcesContent":["\"use client\";\n\nimport { ReactNodeViewRenderer } from \"@tiptap/react\";\nimport { mergeAttributes, Range } from \"@tiptap/core\";\n\nimport { ImageBlockView } from \"./components/ImageBlockView.js\";\nimport { Image } from \"../Image/Image.js\";\n\ndeclare module \"@tiptap/core\" {\n  interface Commands<ReturnType> {\n    imageBlock: {\n      setImageBlock: (attributes: { src: string }) => ReturnType;\n      setImageBlockAt: (attributes: {\n        src: string;\n        pos: number | Range;\n      }) => ReturnType;\n      setImageBlockAlign: (align: \"left\" | \"center\" | \"right\") => ReturnType;\n      setImageBlockWidth: (width: number) => ReturnType;\n    };\n  }\n}\n\nexport const ImageBlock = Image.extend({\n  name: \"imageBlock\",\n\n  group: \"block\",\n\n  defining: true,\n\n  isolating: true,\n\n  addAttributes() {\n    return {\n      src: {\n        default: \"\",\n        parseHTML: (element) => element.getAttribute(\"src\"),\n        renderHTML: (attributes) => ({\n          src: attributes.src,\n        }),\n      },\n      width: {\n        default: \"100%\",\n        parseHTML: (element) => element.getAttribute(\"data-width\"),\n        renderHTML: (attributes) => ({\n          \"data-width\": attributes.width,\n        }),\n      },\n      align: {\n        default: \"center\",\n        parseHTML: (element) => element.getAttribute(\"data-align\"),\n        renderHTML: (attributes) => ({\n          \"data-align\": attributes.align,\n        }),\n      },\n      alt: {\n        default: undefined,\n        parseHTML: (element) => element.getAttribute(\"alt\"),\n        renderHTML: (attributes) => ({\n          alt: attributes.alt,\n        }),\n      },\n    };\n  },\n\n  parseHTML() {\n    return [\n      {\n        tag: 'img[src*=\"tiptap.dev\"]:not([src^=\"data:\"]), img[src*=\"windows.net\"]:not([src^=\"data:\"])',\n      },\n    ];\n  },\n\n  renderHTML({ HTMLAttributes }) {\n    return [\n      \"img\",\n      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),\n    ];\n  },\n\n  addCommands() {\n    return {\n      setImageBlock:\n        (attrs) =>\n        ({ commands }) => {\n          return commands.insertContent({\n            type: \"imageBlock\",\n            attrs: { src: attrs.src },\n          });\n        },\n\n      setImageBlockAt:\n        (attrs) =>\n        ({ commands }) => {\n          return commands.insertContentAt(attrs.pos, {\n            type: \"imageBlock\",\n            attrs: { src: attrs.src },\n          });\n        },\n\n      setImageBlockAlign:\n        (align) =>\n        ({ commands }) =>\n          commands.updateAttributes(\"imageBlock\", { align }),\n\n      setImageBlockWidth:\n        (width) =>\n        ({ commands }) =>\n          commands.updateAttributes(\"imageBlock\", {\n            width: `${Math.max(0, Math.min(100, width))}%`,\n          }),\n    };\n  },\n\n  addNodeView() {\n    return ReactNodeViewRenderer(ImageBlockView);\n  },\n});\n\nexport default ImageBlock;\n"],"names":["ReactNodeViewRenderer","mergeAttributes","ImageBlockView","Image","ImageBlock","extend","name","group","defining","isolating","addAttributes","src","default","parseHTML","element","getAttribute","renderHTML","attributes","width","align","alt","undefined","tag","HTMLAttributes","options","addCommands","setImageBlock","attrs","commands","insertContent","type","setImageBlockAt","insertContentAt","pos","setImageBlockAlign","updateAttributes","setImageBlockWidth","Math","max","min","addNodeView"],"mappings":"AAAA;AAEA,SAASA,qBAAqB,QAAQ,gBAAgB;AACtD,SAASC,eAAe,QAAe,eAAe;AAEtD,SAASC,cAAc,QAAQ,iCAAiC;AAChE,SAASC,KAAK,QAAQ,oBAAoB;AAgB1C,OAAO,MAAMC,aAAaD,MAAME,MAAM,CAAC;IACrCC,MAAM;IAENC,OAAO;IAEPC,UAAU;IAEVC,WAAW;IAEXC;QACE,OAAO;YACLC,KAAK;gBACHC,SAAS;gBACTC,WAAW,CAACC,UAAYA,QAAQC,YAAY,CAAC;gBAC7CC,YAAY,CAACC,aAAgB,CAAA;wBAC3BN,KAAKM,WAAWN,GAAG;oBACrB,CAAA;YACF;YACAO,OAAO;gBACLN,SAAS;gBACTC,WAAW,CAACC,UAAYA,QAAQC,YAAY,CAAC;gBAC7CC,YAAY,CAACC,aAAgB,CAAA;wBAC3B,cAAcA,WAAWC,KAAK;oBAChC,CAAA;YACF;YACAC,OAAO;gBACLP,SAAS;gBACTC,WAAW,CAACC,UAAYA,QAAQC,YAAY,CAAC;gBAC7CC,YAAY,CAACC,aAAgB,CAAA;wBAC3B,cAAcA,WAAWE,KAAK;oBAChC,CAAA;YACF;YACAC,KAAK;gBACHR,SAASS;gBACTR,WAAW,CAACC,UAAYA,QAAQC,YAAY,CAAC;gBAC7CC,YAAY,CAACC,aAAgB,CAAA;wBAC3BG,KAAKH,WAAWG,GAAG;oBACrB,CAAA;YACF;QACF;IACF;IAEAP;QACE,OAAO;YACL;gBACES,KAAK;YACP;SACD;IACH;IAEAN,YAAW,EAAEO,cAAc,EAAE;QAC3B,OAAO;YACL;YACAtB,gBAAgB,IAAI,CAACuB,OAAO,CAACD,cAAc,EAAEA;SAC9C;IACH;IAEAE;QACE,OAAO;YACLC,eACE,CAACC,QACD,CAAC,EAAEC,QAAQ,EAAE;oBACX,OAAOA,SAASC,aAAa,CAAC;wBAC5BC,MAAM;wBACNH,OAAO;4BAAEhB,KAAKgB,MAAMhB,GAAG;wBAAC;oBAC1B;gBACF;YAEFoB,iBACE,CAACJ,QACD,CAAC,EAAEC,QAAQ,EAAE;oBACX,OAAOA,SAASI,eAAe,CAACL,MAAMM,GAAG,EAAE;wBACzCH,MAAM;wBACNH,OAAO;4BAAEhB,KAAKgB,MAAMhB,GAAG;wBAAC;oBAC1B;gBACF;YAEFuB,oBACE,CAACf,QACD,CAAC,EAAES,QAAQ,EAAE,GACXA,SAASO,gBAAgB,CAAC,cAAc;wBAAEhB;oBAAM;YAEpDiB,oBACE,CAAClB,QACD,CAAC,EAAEU,QAAQ,EAAE,GACXA,SAASO,gBAAgB,CAAC,cAAc;wBACtCjB,OAAO,CAAC,EAAEmB,KAAKC,GAAG,CAAC,GAAGD,KAAKE,GAAG,CAAC,KAAKrB,QAAQ,CAAC,CAAC;oBAChD;QACN;IACF;IAEAsB;QACE,OAAOxC,sBAAsBE;IAC/B;AACF,GAAG;AAEH,eAAeE,WAAW"}
+{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/ImageBlock/ImageBlock.ts"],"sourcesContent":["\"use client\";\n\nimport { ReactNodeViewRenderer } from \"@tiptap/react\";\nimport { mergeAttributes, Range } from \"@tiptap/core\";\n\nimport { ImageBlockView } from \"./components/ImageBlockView.js\";\nimport { Image } from \"../Image/Image.js\";\n\ndeclare module \"@tiptap/core\" {\n  interface Commands<ReturnType> {\n    imageBlock: {\n      setImageBlock: (attributes: {\n        src: string;\n        assetId?: string;\n      }) => ReturnType;\n      setImageBlockAt: (attributes: {\n        src: string;\n        pos: number | Range;\n        assetId?: string;\n      }) => ReturnType;\n      setImageBlockAlign: (align: \"left\" | \"center\" | \"right\") => ReturnType;\n      setImageBlockWidth: (width: number) => ReturnType;\n    };\n  }\n}\n\nexport const ImageBlock = Image.extend({\n  name: \"imageBlock\",\n\n  group: \"block\",\n\n  defining: true,\n\n  isolating: true,\n\n  addAttributes() {\n    return {\n      src: {\n        default: \"\",\n        parseHTML: (element) => element.getAttribute(\"src\"),\n        renderHTML: (attributes) => ({\n          src: attributes.src,\n        }),\n      },\n      width: {\n        default: \"100%\",\n        parseHTML: (element) => element.getAttribute(\"data-width\"),\n        renderHTML: (attributes) => ({\n          \"data-width\": attributes.width,\n        }),\n      },\n      align: {\n        default: \"center\",\n        parseHTML: (element) => element.getAttribute(\"data-align\"),\n        renderHTML: (attributes) => ({\n          \"data-align\": attributes.align,\n        }),\n      },\n      alt: {\n        default: undefined,\n        parseHTML: (element) => element.getAttribute(\"alt\"),\n        renderHTML: (attributes) => ({\n          alt: attributes.alt,\n        }),\n      },\n    };\n  },\n\n  parseHTML() {\n    return [\n      {\n        tag: 'img[src*=\"tiptap.dev\"]:not([src^=\"data:\"]), img[src*=\"windows.net\"]:not([src^=\"data:\"])',\n      },\n    ];\n  },\n\n  renderHTML({ HTMLAttributes }) {\n    return [\n      \"img\",\n      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),\n    ];\n  },\n\n  addCommands() {\n    return {\n      setImageBlock:\n        (attrs) =>\n        ({ commands }) => {\n          return commands.insertContent({\n            type: \"imageBlock\",\n            attrs: { src: attrs.src },\n          });\n        },\n\n      setImageBlockAt:\n        (attrs) =>\n        ({ commands }) => {\n          return commands.insertContentAt(attrs.pos, {\n            type: \"imageBlock\",\n            attrs: { src: attrs.src },\n          });\n        },\n\n      setImageBlockAlign:\n        (align) =>\n        ({ commands }) =>\n          commands.updateAttributes(\"imageBlock\", { align }),\n\n      setImageBlockWidth:\n        (width) =>\n        ({ commands }) =>\n          commands.updateAttributes(\"imageBlock\", {\n            width: `${Math.max(0, Math.min(100, width))}%`,\n          }),\n    };\n  },\n\n  addNodeView() {\n    return ReactNodeViewRenderer(ImageBlockView);\n  },\n});\n\nexport default ImageBlock;\n"],"names":["ReactNodeViewRenderer","mergeAttributes","ImageBlockView","Image","ImageBlock","extend","name","group","defining","isolating","addAttributes","src","default","parseHTML","element","getAttribute","renderHTML","attributes","width","align","alt","undefined","tag","HTMLAttributes","options","addCommands","setImageBlock","attrs","commands","insertContent","type","setImageBlockAt","insertContentAt","pos","setImageBlockAlign","updateAttributes","setImageBlockWidth","Math","max","min","addNodeView"],"mappings":"AAAA;AAEA,SAASA,qBAAqB,QAAQ,gBAAgB;AACtD,SAASC,eAAe,QAAe,eAAe;AAEtD,SAASC,cAAc,QAAQ,iCAAiC;AAChE,SAASC,KAAK,QAAQ,oBAAoB;AAoB1C,OAAO,MAAMC,aAAaD,MAAME,MAAM,CAAC;IACrCC,MAAM;IAENC,OAAO;IAEPC,UAAU;IAEVC,WAAW;IAEXC;QACE,OAAO;YACLC,KAAK;gBACHC,SAAS;gBACTC,WAAW,CAACC,UAAYA,QAAQC,YAAY,CAAC;gBAC7CC,YAAY,CAACC,aAAgB,CAAA;wBAC3BN,KAAKM,WAAWN,GAAG;oBACrB,CAAA;YACF;YACAO,OAAO;gBACLN,SAAS;gBACTC,WAAW,CAACC,UAAYA,QAAQC,YAAY,CAAC;gBAC7CC,YAAY,CAACC,aAAgB,CAAA;wBAC3B,cAAcA,WAAWC,KAAK;oBAChC,CAAA;YACF;YACAC,OAAO;gBACLP,SAAS;gBACTC,WAAW,CAACC,UAAYA,QAAQC,YAAY,CAAC;gBAC7CC,YAAY,CAACC,aAAgB,CAAA;wBAC3B,cAAcA,WAAWE,KAAK;oBAChC,CAAA;YACF;YACAC,KAAK;gBACHR,SAASS;gBACTR,WAAW,CAACC,UAAYA,QAAQC,YAAY,CAAC;gBAC7CC,YAAY,CAACC,aAAgB,CAAA;wBAC3BG,KAAKH,WAAWG,GAAG;oBACrB,CAAA;YACF;QACF;IACF;IAEAP;QACE,OAAO;YACL;gBACES,KAAK;YACP;SACD;IACH;IAEAN,YAAW,EAAEO,cAAc,EAAE;QAC3B,OAAO;YACL;YACAtB,gBAAgB,IAAI,CAACuB,OAAO,CAACD,cAAc,EAAEA;SAC9C;IACH;IAEAE;QACE,OAAO;YACLC,eACE,CAACC,QACD,CAAC,EAAEC,QAAQ,EAAE;oBACX,OAAOA,SAASC,aAAa,CAAC;wBAC5BC,MAAM;wBACNH,OAAO;4BAAEhB,KAAKgB,MAAMhB,GAAG;wBAAC;oBAC1B;gBACF;YAEFoB,iBACE,CAACJ,QACD,CAAC,EAAEC,QAAQ,EAAE;oBACX,OAAOA,SAASI,eAAe,CAACL,MAAMM,GAAG,EAAE;wBACzCH,MAAM;wBACNH,OAAO;4BAAEhB,KAAKgB,MAAMhB,GAAG;wBAAC;oBAC1B;gBACF;YAEFuB,oBACE,CAACf,QACD,CAAC,EAAES,QAAQ,EAAE,GACXA,SAASO,gBAAgB,CAAC,cAAc;wBAAEhB;oBAAM;YAEpDiB,oBACE,CAAClB,QACD,CAAC,EAAEU,QAAQ,EAAE,GACXA,SAASO,gBAAgB,CAAC,cAAc;wBACtCjB,OAAO,CAAC,EAAEmB,KAAKC,GAAG,CAAC,GAAGD,KAAKE,GAAG,CAAC,KAAKrB,QAAQ,CAAC,CAAC;oBAChD;QACN;IACF;IAEAsB;QACE,OAAOxC,sBAAsBE;IAC/B;AACF,GAAG;AAEH,eAAeE,WAAW"}

package/dist/src/fields/TiptapEditor/extensions/ImageUpload/view/ImageUpload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageUpload.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/extensions/ImageUpload/view/ImageUpload.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAmB,MAAM,eAAe,CAAC;AAExD,OAAO,EAEL,eAAe,EAChB,MAAM,kCAAkC,CAAC;AAC1C,eAAO,MAAM,kBAAkB,uBAAwB,eAAe,2BAIjE;IACD,MAAM,EAAE,MAAM,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;CAChB,gCA4EF,CAAC"}
+{"version":3,"file":"ImageUpload.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/extensions/ImageUpload/view/ImageUpload.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAmB,MAAM,eAAe,CAAC;AAGxD,OAAO,EAEL,eAAe,EAChB,MAAM,kCAAkC,CAAC;AAC1C,eAAO,MAAM,kBAAkB,uBAAwB,eAAe,2BAIjE;IACD,MAAM,EAAE,MAAM,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;CAChB,gCAiEF,CAAC"}

package/dist/src/fields/TiptapEditor/extensions/ImageUpload/view/ImageUpload.js

@@ -1,28 +1,42 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { NodeViewWrapper } from "@tiptap/react";
-import { useCallback } from "react";
+import { ImagePlus } from "lucide-react";
+import { useCallback, useState } from "react";
 export const ImageUploadBuilder = (openAssetHQHandler)=>{
     const ImageUpload = ({ getPos, editor })=>{
+        const [done, setDone] = useState(false);
         const onUpload = useCallback((asset)=>{
-            if (asset) {
+            if (asset && !done) {
                 console.log("asset in ImageUpload itself:", asset);
                 if (asset.type === "IMAGE") {
                     editor.chain().focus().setImageBlock({
-                        src: asset.fullUrl
-                    }) //TODO: should also set other fields to data-media-id ... it'd be easier to later find which media id is this.
-                    .deleteRange({
+                        src: asset.fullUrl,
+                        assetId: asset.id
+                    }).deleteRange({
                         from: getPos(),
                         to: getPos()
                     }).focus().run();
+                    setDone(true);
                 } else {
+                    console.log("calling editor setVideoBlock.", {
+                        src: asset.videoUrl,
+                        poster: asset.fullUrl,
+                        assetId: asset.id,
+                        playlistUrl: asset.playlistUrl
+                    });
                     editor.chain().focus().setVideoBlock({
                         src: asset.videoUrl,
-                        poster: asset.fullUrl
+                        poster: asset.fullUrl,
+                        assetId: asset.id,
+                        playlistUrl: asset.playlistUrl
                     }).deleteRange({
                         from: getPos(),
                         to: getPos()
                     }).focus().run();
+                    setDone(true);
                 }
+            } else {
+                console.info("ImageUpload onUpload called but this is a finished component.");
             }
         }, [
             getPos,
@@ -32,20 +46,19 @@ export const ImageUploadBuilder = (openAssetHQHandler)=>{
             children: /*#__PURE__*/ _jsx("div", {
                 className: "p-0 m-0",
                 "data-drag-handle": true,
-                children: /*#__PURE__*/ _jsx("a", {
+                children: /*#__PURE__*/ _jsxs("a", {
                     href: "#",
-                    style: {
-                        padding: 5,
-                        borderRadius: 5,
-                        backgroundColor: "blue",
-                        color: "white",
-                        cursor: "pointer"
-                    },
+                    className: "text-black text-sm font-medium uppercase hover:cursor-pointer p-2.5 bg-white rounded-[7px] transition ease-in-out delay-150 hover:scale-110 hover:bg-amber-600 shadow justify-between items-center flex flex-row",
                     onClick: (e)=>{
                         e.preventDefault();
                         openAssetHQHandler(onUpload);
                     },
-                    children: "Select an asset"
+                    children: [
+                        /*#__PURE__*/ _jsx(ImagePlus, {
+                            className: "mr-2"
+                        }),
+                        "Select an asset"
+                    ]
                 })
             })
         });

package/dist/src/fields/TiptapEditor/extensions/ImageUpload/view/ImageUpload.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/extensions/ImageUpload/view/ImageUpload.tsx"],"sourcesContent":["import { Editor, NodeViewWrapper } from \"@tiptap/react\";\nimport { useCallback } from \"react\";\nimport {\n  AssetReturnType,\n  openAssetHQType,\n} from \"src/fields/TiptapEditor/types.js\";\nexport const ImageUploadBuilder = (openAssetHQHandler: openAssetHQType) => {\n  const ImageUpload = ({\n    getPos,\n    editor,\n  }: {\n    getPos: () => number;\n    editor: Editor;\n  }) => {\n    const onUpload = useCallback(\n      (asset: AssetReturnType) => {\n        if (asset) {\n          console.log(\"asset in ImageUpload itself:\", asset);\n          if (asset.type === \"IMAGE\") {\n            editor\n              .chain()\n              .focus()\n              .setImageBlock({ src: asset.fullUrl }) //TODO: should also set other fields to data-media-id ... it'd be easier to later find which media id is this.\n              .deleteRange({ from: getPos(), to: getPos() })\n              .focus()\n              .run();\n          } else {\n            editor\n              .chain()\n              .focus()\n              .setVideoBlock({ src: asset.videoUrl, poster: asset.fullUrl })\n              .deleteRange({ from: getPos(), to: getPos() })\n              .focus()\n              .run();\n          }\n        }\n      },\n      [getPos, editor]\n    );\n\n    return (\n      <NodeViewWrapper>\n        <div className=\"p-0 m-0\" data-drag-handle>\n          {/* <RenderFields\n          fieldMap={[\n            {\n              name: \"media\",\n              type: \"upload\",\n              cellComponentProps: {\n                name: \"media\",\n                schemaPath: \"media\",\n              },\n              fieldComponentProps: {},\n              fieldIsPresentational: true,\n              isFieldAffectingData: false,\n              localized: false,\n            },\n          ]}\n          path=\"media\"\n          readOnly={false}\n          schemaPath=\"\"\n          // fieldTypes={fieldTypes}\n          // fields={sidebarFields}\n          // permissions={permissions.fields}\n          // readOnly={!hasSavePermission}\n        /> */}\n          <a\n            href=\"#\"\n            style={{\n              padding: 5,\n              borderRadius: 5,\n              backgroundColor: \"blue\",\n              color: \"white\",\n              cursor: \"pointer\",\n            }}\n            onClick={(e) => {\n              e.preventDefault();\n              openAssetHQHandler(onUpload);\n            }}\n          >\n            Select an asset\n          </a>\n          {/* <ImageUploader onUpload={onUpload} /> */}\n        </div>\n      </NodeViewWrapper>\n    );\n  };\n\n  return ImageUpload;\n};\n"],"names":["NodeViewWrapper","useCallback","ImageUploadBuilder","openAssetHQHandler","ImageUpload","getPos","editor","onUpload","asset","console","log","type","chain","focus","setImageBlock","src","fullUrl","deleteRange","from","to","run","setVideoBlock","videoUrl","poster","div","className","data-drag-handle","a","href","style","padding","borderRadius","backgroundColor","color","cursor","onClick","e","preventDefault"],"mappings":";AAAA,SAAiBA,eAAe,QAAQ,gBAAgB;AACxD,SAASC,WAAW,QAAQ,QAAQ;AAKpC,OAAO,MAAMC,qBAAqB,CAACC;IACjC,MAAMC,cAAc,CAAC,EACnBC,MAAM,EACNC,MAAM,EAIP;QACC,MAAMC,WAAWN,YACf,CAACO;YACC,IAAIA,OAAO;gBACTC,QAAQC,GAAG,CAAC,gCAAgCF;gBAC5C,IAAIA,MAAMG,IAAI,KAAK,SAAS;oBAC1BL,OACGM,KAAK,GACLC,KAAK,GACLC,aAAa,CAAC;wBAAEC,KAAKP,MAAMQ,OAAO;oBAAC,GAAG,8GAA8G;qBACpJC,WAAW,CAAC;wBAAEC,MAAMb;wBAAUc,IAAId;oBAAS,GAC3CQ,KAAK,GACLO,GAAG;gBACR,OAAO;oBACLd,OACGM,KAAK,GACLC,KAAK,GACLQ,aAAa,CAAC;wBAAEN,KAAKP,MAAMc,QAAQ;wBAAEC,QAAQf,MAAMQ,OAAO;oBAAC,GAC3DC,WAAW,CAAC;wBAAEC,MAAMb;wBAAUc,IAAId;oBAAS,GAC3CQ,KAAK,GACLO,GAAG;gBACR;YACF;QACF,GACA;YAACf;YAAQC;SAAO;QAGlB,qBACE,KAACN;sBACC,cAAA,KAACwB;gBAAIC,WAAU;gBAAUC,kBAAgB;0BAwBvC,cAAA,KAACC;oBACCC,MAAK;oBACLC,OAAO;wBACLC,SAAS;wBACTC,cAAc;wBACdC,iBAAiB;wBACjBC,OAAO;wBACPC,QAAQ;oBACV;oBACAC,SAAS,CAACC;wBACRA,EAAEC,cAAc;wBAChBlC,mBAAmBI;oBACrB;8BACD;;;;IAOT;IAEA,OAAOH;AACT,EAAE"}
+{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/extensions/ImageUpload/view/ImageUpload.tsx"],"sourcesContent":["import { Editor, NodeViewWrapper } from \"@tiptap/react\";\nimport { ImagePlus } from \"lucide-react\";\nimport { useCallback, useState } from \"react\";\nimport {\n  AssetReturnType,\n  openAssetHQType,\n} from \"src/fields/TiptapEditor/types.js\";\nexport const ImageUploadBuilder = (openAssetHQHandler: openAssetHQType) => {\n  const ImageUpload = ({\n    getPos,\n    editor,\n  }: {\n    getPos: () => number;\n    editor: Editor;\n  }) => {\n    const [done, setDone] = useState(false);\n    const onUpload = useCallback(\n      (asset: AssetReturnType) => {\n        if (asset && !done) {\n          console.log(\"asset in ImageUpload itself:\", asset);\n          if (asset.type === \"IMAGE\") {\n            editor\n              .chain()\n              .focus()\n              .setImageBlock({ src: asset.fullUrl, assetId: asset.id })\n              .deleteRange({ from: getPos(), to: getPos() })\n              .focus()\n              .run();\n            setDone(true);\n          } else {\n            console.log(\"calling editor setVideoBlock.\", {\n              src: asset.videoUrl,\n              poster: asset.fullUrl,\n              assetId: asset.id,\n              playlistUrl: asset.playlistUrl,\n            });\n            editor\n              .chain()\n              .focus()\n              .setVideoBlock({\n                src: asset.videoUrl,\n                poster: asset.fullUrl,\n                assetId: asset.id,\n                playlistUrl: asset.playlistUrl,\n              })\n              .deleteRange({ from: getPos(), to: getPos() })\n              .focus()\n              .run();\n            setDone(true);\n          }\n        } else {\n          console.info(\n            \"ImageUpload onUpload called but this is a finished component.\"\n          );\n        }\n      },\n      [getPos, editor]\n    );\n\n    return (\n      <NodeViewWrapper>\n        <div className=\"p-0 m-0\" data-drag-handle>\n          <a\n            href=\"#\"\n            className=\"text-black text-sm font-medium uppercase hover:cursor-pointer p-2.5 bg-white rounded-[7px] transition ease-in-out delay-150 hover:scale-110 hover:bg-amber-600 shadow justify-between items-center flex flex-row\"\n            onClick={(e) => {\n              e.preventDefault();\n              openAssetHQHandler(onUpload);\n            }}\n          >\n            <ImagePlus className=\"mr-2\" />\n            Select an asset\n          </a>\n        </div>\n      </NodeViewWrapper>\n    );\n  };\n\n  return ImageUpload;\n};\n"],"names":["NodeViewWrapper","ImagePlus","useCallback","useState","ImageUploadBuilder","openAssetHQHandler","ImageUpload","getPos","editor","done","setDone","onUpload","asset","console","log","type","chain","focus","setImageBlock","src","fullUrl","assetId","id","deleteRange","from","to","run","videoUrl","poster","playlistUrl","setVideoBlock","info","div","className","data-drag-handle","a","href","onClick","e","preventDefault"],"mappings":";AAAA,SAAiBA,eAAe,QAAQ,gBAAgB;AACxD,SAASC,SAAS,QAAQ,eAAe;AACzC,SAASC,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAK9C,OAAO,MAAMC,qBAAqB,CAACC;IACjC,MAAMC,cAAc,CAAC,EACnBC,MAAM,EACNC,MAAM,EAIP;QACC,MAAM,CAACC,MAAMC,QAAQ,GAAGP,SAAS;QACjC,MAAMQ,WAAWT,YACf,CAACU;YACC,IAAIA,SAAS,CAACH,MAAM;gBAClBI,QAAQC,GAAG,CAAC,gCAAgCF;gBAC5C,IAAIA,MAAMG,IAAI,KAAK,SAAS;oBAC1BP,OACGQ,KAAK,GACLC,KAAK,GACLC,aAAa,CAAC;wBAAEC,KAAKP,MAAMQ,OAAO;wBAAEC,SAAST,MAAMU,EAAE;oBAAC,GACtDC,WAAW,CAAC;wBAAEC,MAAMjB;wBAAUkB,IAAIlB;oBAAS,GAC3CU,KAAK,GACLS,GAAG;oBACNhB,QAAQ;gBACV,OAAO;oBACLG,QAAQC,GAAG,CAAC,iCAAiC;wBAC3CK,KAAKP,MAAMe,QAAQ;wBACnBC,QAAQhB,MAAMQ,OAAO;wBACrBC,SAAST,MAAMU,EAAE;wBACjBO,aAAajB,MAAMiB,WAAW;oBAChC;oBACArB,OACGQ,KAAK,GACLC,KAAK,GACLa,aAAa,CAAC;wBACbX,KAAKP,MAAMe,QAAQ;wBACnBC,QAAQhB,MAAMQ,OAAO;wBACrBC,SAAST,MAAMU,EAAE;wBACjBO,aAAajB,MAAMiB,WAAW;oBAChC,GACCN,WAAW,CAAC;wBAAEC,MAAMjB;wBAAUkB,IAAIlB;oBAAS,GAC3CU,KAAK,GACLS,GAAG;oBACNhB,QAAQ;gBACV;YACF,OAAO;gBACLG,QAAQkB,IAAI,CACV;YAEJ;QACF,GACA;YAACxB;YAAQC;SAAO;QAGlB,qBACE,KAACR;sBACC,cAAA,KAACgC;gBAAIC,WAAU;gBAAUC,kBAAgB;0BACvC,cAAA,MAACC;oBACCC,MAAK;oBACLH,WAAU;oBACVI,SAAS,CAACC;wBACRA,EAAEC,cAAc;wBAChBlC,mBAAmBM;oBACrB;;sCAEA,KAACV;4BAAUgC,WAAU;;wBAAS;;;;;IAMxC;IAEA,OAAO3B;AACT,EAAE"}

package/dist/src/fields/TiptapEditor/extensions/VideoBlock/VideoBlock.d.ts

@@ -5,14 +5,19 @@ declare module "@tiptap/core" {
             setVideoBlock: (attributes: {
                 src: string;
                 poster: string;
+                assetId: string;
+                playlistUrl?: string;
             }) => ReturnType;
             setVideoBlockAt: (attributes: {
                 src: string;
                 poster: string;
+                assetId: string;
+                playlistUrl?: string;
                 pos: number | Range;
             }) => ReturnType;
             setVideoBlockAlign: (align: "left" | "center" | "right") => ReturnType;
             setVideoBlockWidth: (width: number) => ReturnType;
+            setVideoBlockCaption: (caption: boolean) => ReturnType;
         };
     }
 }

package/dist/src/fields/TiptapEditor/extensions/VideoBlock/VideoBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VideoBlock.d.ts","sourceRoot":"","sources":["../../../../../../src/fields/TiptapEditor/extensions/VideoBlock/VideoBlock.ts"],"names":[],"mappings":"AAGA,OAAO,EAAmB,KAAK,EAAE,MAAM,cAAc,CAAC;AAKtD,OAAO,QAAQ,cAAc,CAAC;IAC5B,UAAU,QAAQ,CAAC,UAAU;QAC3B,UAAU,EAAE;YACV,aAAa,EAAE,CAAC,UAAU,EAAE;gBAC1B,GAAG,EAAE,MAAM,CAAC;gBACZ,MAAM,EAAE,MAAM,CAAC;aAChB,KAAK,UAAU,CAAC;YACjB,eAAe,EAAE,CAAC,UAAU,EAAE;gBAC5B,GAAG,EAAE,MAAM,CAAC;gBACZ,MAAM,EAAE,MAAM,CAAC;gBACf,GAAG,EAAE,MAAM,GAAG,KAAK,CAAC;aACrB,KAAK,UAAU,CAAC;YACjB,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,KAAK,UAAU,CAAC;YACvE,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,UAAU,CAAC;SACnD,CAAC;KACH;CACF;AAED,eAAO,MAAM,UAAU,6EAqGrB,CAAC;AAEH,eAAe,UAAU,CAAC"}
+{"version":3,"file":"VideoBlock.d.ts","sourceRoot":"","sources":["../../../../../../src/fields/TiptapEditor/extensions/VideoBlock/VideoBlock.ts"],"names":[],"mappings":"AAGA,OAAO,EAAmB,KAAK,EAAE,MAAM,cAAc,CAAC;AAKtD,OAAO,QAAQ,cAAc,CAAC;IAC5B,UAAU,QAAQ,CAAC,UAAU;QAC3B,UAAU,EAAE;YACV,aAAa,EAAE,CAAC,UAAU,EAAE;gBAC1B,GAAG,EAAE,MAAM,CAAC;gBACZ,MAAM,EAAE,MAAM,CAAC;gBACf,OAAO,EAAE,MAAM,CAAC;gBAChB,WAAW,CAAC,EAAE,MAAM,CAAC;aACtB,KAAK,UAAU,CAAC;YACjB,eAAe,EAAE,CAAC,UAAU,EAAE;gBAC5B,GAAG,EAAE,MAAM,CAAC;gBACZ,MAAM,EAAE,MAAM,CAAC;gBACf,OAAO,EAAE,MAAM,CAAC;gBAChB,WAAW,CAAC,EAAE,MAAM,CAAC;gBAErB,GAAG,EAAE,MAAM,GAAG,KAAK,CAAC;aACrB,KAAK,UAAU,CAAC;YACjB,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,KAAK,UAAU,CAAC;YACvE,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,UAAU,CAAC;YAClD,oBAAoB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,UAAU,CAAC;SACxD,CAAC;KACH;CACF;AAED,eAAO,MAAM,UAAU,6EAkIrB,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/dist/src/fields/TiptapEditor/extensions/VideoBlock/VideoBlock.js

@@ -24,6 +24,13 @@ export const VideoBlock = Video.extend({
                         poster: attributes.poster
                     })
             },
+            playlistUrl: {
+                default: "",
+                parseHTML: (element)=>element.getAttribute("data-playlist-url"),
+                renderHTML: (attributes)=>({
+                        "data-playlist-url": attributes.playlistUrl
+                    })
+            },
             width: {
                 default: "100%",
                 parseHTML: (element)=>element.getAttribute("data-width"),
@@ -44,6 +51,13 @@ export const VideoBlock = Video.extend({
                 renderHTML: (attributes)=>({
                         alt: attributes.alt
                     })
+            },
+            caption: {
+                default: true,
+                parseHTML: (element)=>element.getAttribute("data-caption") === "true",
+                renderHTML: (attributes)=>({
+                        "data-caption": attributes.caption
+                    })
             }
         };
     },
@@ -67,7 +81,9 @@ export const VideoBlock = Video.extend({
                         type: "videoBlock",
                         attrs: {
                             src: attrs.src,
-                            poster: attrs.poster
+                            poster: attrs.poster,
+                            assetId: attrs.assetId,
+                            playlistUrl: attrs.playlistUrl
                         }
                     });
                 },
@@ -76,7 +92,9 @@ export const VideoBlock = Video.extend({
                         type: "videoBlock",
                         attrs: {
                             src: attrs.src,
-                            poster: attrs.poster
+                            poster: attrs.poster,
+                            assetId: attrs.assetId,
+                            playlistUrl: attrs.playlistUrl
                         }
                     });
                 },
@@ -85,6 +103,9 @@ export const VideoBlock = Video.extend({
                     }),
             setVideoBlockWidth: (width)=>({ commands })=>commands.updateAttributes("videoBlock", {
                         width: `${Math.max(0, Math.min(100, width))}%`
+                    }),
+            setVideoBlockCaption: (caption)=>({ commands })=>commands.updateAttributes("videoBlock", {
+                        caption
                     })
         };
     },

package/dist/src/fields/TiptapEditor/extensions/VideoBlock/VideoBlock.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/VideoBlock/VideoBlock.ts"],"sourcesContent":["\"use client\";\n\nimport { ReactNodeViewRenderer } from \"@tiptap/react\";\nimport { mergeAttributes, Range } from \"@tiptap/core\";\n\nimport { VideoBlockView } from \"./components/VideoBlockView.js\";\nimport { Video } from \"../Video/Video.js\";\n\ndeclare module \"@tiptap/core\" {\n  interface Commands<ReturnType> {\n    videoBlock: {\n      setVideoBlock: (attributes: {\n        src: string;\n        poster: string;\n      }) => ReturnType;\n      setVideoBlockAt: (attributes: {\n        src: string;\n        poster: string;\n        pos: number | Range;\n      }) => ReturnType;\n      setVideoBlockAlign: (align: \"left\" | \"center\" | \"right\") => ReturnType;\n      setVideoBlockWidth: (width: number) => ReturnType;\n    };\n  }\n}\n\nexport const VideoBlock = Video.extend({\n  name: \"videoBlock\",\n\n  group: \"block\",\n\n  defining: true,\n\n  isolating: true,\n\n  addAttributes() {\n    return {\n      src: {\n        default: \"\",\n        parseHTML: (element) => element.getAttribute(\"src\"),\n        renderHTML: (attributes) => ({\n          src: attributes.src,\n        }),\n      },\n      poster: {\n        default: \"\",\n        parseHTML: (element) => element.getAttribute(\"poster\"),\n        renderHTML: (attributes) => ({\n          poster: attributes.poster,\n        }),\n      },\n      width: {\n        default: \"100%\",\n        parseHTML: (element) => element.getAttribute(\"data-width\"),\n        renderHTML: (attributes) => ({\n          \"data-width\": attributes.width,\n        }),\n      },\n      align: {\n        default: \"center\",\n        parseHTML: (element) => element.getAttribute(\"data-align\"),\n        renderHTML: (attributes) => ({\n          \"data-align\": attributes.align,\n        }),\n      },\n      alt: {\n        default: undefined,\n        parseHTML: (element) => element.getAttribute(\"alt\"),\n        renderHTML: (attributes) => ({\n          alt: attributes.alt,\n        }),\n      },\n    };\n  },\n\n  parseHTML() {\n    return [\n      {\n        tag: 'video[src*=\"tiptap.dev\"]:not([src^=\"data:\"]), video[src*=\"windows.net\"]:not([src^=\"data:\"])',\n      },\n    ];\n  },\n\n  renderHTML({ HTMLAttributes }) {\n    return [\n      \"video\",\n      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),\n    ];\n  },\n\n  addCommands() {\n    return {\n      setVideoBlock:\n        (attrs) =>\n        ({ commands }) => {\n          return commands.insertContent({\n            type: \"videoBlock\",\n            attrs: { src: attrs.src, poster: attrs.poster },\n          });\n        },\n\n      setVideoBlockAt:\n        (attrs) =>\n        ({ commands }) => {\n          return commands.insertContentAt(attrs.pos, {\n            type: \"videoBlock\",\n            attrs: { src: attrs.src, poster: attrs.poster },\n          });\n        },\n\n      setVideoBlockAlign:\n        (align) =>\n        ({ commands }) =>\n          commands.updateAttributes(\"videoBlock\", { align }),\n\n      setVideoBlockWidth:\n        (width) =>\n        ({ commands }) =>\n          commands.updateAttributes(\"videoBlock\", {\n            width: `${Math.max(0, Math.min(100, width))}%`,\n          }),\n    };\n  },\n\n  addNodeView() {\n    return ReactNodeViewRenderer(VideoBlockView);\n  },\n});\n\nexport default VideoBlock;\n"],"names":["ReactNodeViewRenderer","mergeAttributes","VideoBlockView","Video","VideoBlock","extend","name","group","defining","isolating","addAttributes","src","default","parseHTML","element","getAttribute","renderHTML","attributes","poster","width","align","alt","undefined","tag","HTMLAttributes","options","addCommands","setVideoBlock","attrs","commands","insertContent","type","setVideoBlockAt","insertContentAt","pos","setVideoBlockAlign","updateAttributes","setVideoBlockWidth","Math","max","min","addNodeView"],"mappings":"AAAA;AAEA,SAASA,qBAAqB,QAAQ,gBAAgB;AACtD,SAASC,eAAe,QAAe,eAAe;AAEtD,SAASC,cAAc,QAAQ,iCAAiC;AAChE,SAASC,KAAK,QAAQ,oBAAoB;AAoB1C,OAAO,MAAMC,aAAaD,MAAME,MAAM,CAAC;IACrCC,MAAM;IAENC,OAAO;IAEPC,UAAU;IAEVC,WAAW;IAEXC;QACE,OAAO;YACLC,KAAK;gBACHC,SAAS;gBACTC,WAAW,CAACC,UAAYA,QAAQC,YAAY,CAAC;gBAC7CC,YAAY,CAACC,aAAgB,CAAA;wBAC3BN,KAAKM,WAAWN,GAAG;oBACrB,CAAA;YACF;YACAO,QAAQ;gBACNN,SAAS;gBACTC,WAAW,CAACC,UAAYA,QAAQC,YAAY,CAAC;gBAC7CC,YAAY,CAACC,aAAgB,CAAA;wBAC3BC,QAAQD,WAAWC,MAAM;oBAC3B,CAAA;YACF;YACAC,OAAO;gBACLP,SAAS;gBACTC,WAAW,CAACC,UAAYA,QAAQC,YAAY,CAAC;gBAC7CC,YAAY,CAACC,aAAgB,CAAA;wBAC3B,cAAcA,WAAWE,KAAK;oBAChC,CAAA;YACF;YACAC,OAAO;gBACLR,SAAS;gBACTC,WAAW,CAACC,UAAYA,QAAQC,YAAY,CAAC;gBAC7CC,YAAY,CAACC,aAAgB,CAAA;wBAC3B,cAAcA,WAAWG,KAAK;oBAChC,CAAA;YACF;YACAC,KAAK;gBACHT,SAASU;gBACTT,WAAW,CAACC,UAAYA,QAAQC,YAAY,CAAC;gBAC7CC,YAAY,CAACC,aAAgB,CAAA;wBAC3BI,KAAKJ,WAAWI,GAAG;oBACrB,CAAA;YACF;QACF;IACF;IAEAR;QACE,OAAO;YACL;gBACEU,KAAK;YACP;SACD;IACH;IAEAP,YAAW,EAAEQ,cAAc,EAAE;QAC3B,OAAO;YACL;YACAvB,gBAAgB,IAAI,CAACwB,OAAO,CAACD,cAAc,EAAEA;SAC9C;IACH;IAEAE;QACE,OAAO;YACLC,eACE,CAACC,QACD,CAAC,EAAEC,QAAQ,EAAE;oBACX,OAAOA,SAASC,aAAa,CAAC;wBAC5BC,MAAM;wBACNH,OAAO;4BAAEjB,KAAKiB,MAAMjB,GAAG;4BAAEO,QAAQU,MAAMV,MAAM;wBAAC;oBAChD;gBACF;YAEFc,iBACE,CAACJ,QACD,CAAC,EAAEC,QAAQ,EAAE;oBACX,OAAOA,SAASI,eAAe,CAACL,MAAMM,GAAG,EAAE;wBACzCH,MAAM;wBACNH,OAAO;4BAAEjB,KAAKiB,MAAMjB,GAAG;4BAAEO,QAAQU,MAAMV,MAAM;wBAAC;oBAChD;gBACF;YAEFiB,oBACE,CAACf,QACD,CAAC,EAAES,QAAQ,EAAE,GACXA,SAASO,gBAAgB,CAAC,cAAc;wBAAEhB;oBAAM;YAEpDiB,oBACE,CAAClB,QACD,CAAC,EAAEU,QAAQ,EAAE,GACXA,SAASO,gBAAgB,CAAC,cAAc;wBACtCjB,OAAO,CAAC,EAAEmB,KAAKC,GAAG,CAAC,GAAGD,KAAKE,GAAG,CAAC,KAAKrB,QAAQ,CAAC,CAAC;oBAChD;QACN;IACF;IAEAsB;QACE,OAAOzC,sBAAsBE;IAC/B;AACF,GAAG;AAEH,eAAeE,WAAW"}
+{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/VideoBlock/VideoBlock.ts"],"sourcesContent":["\"use client\";\n\nimport { ReactNodeViewRenderer } from \"@tiptap/react\";\nimport { mergeAttributes, Range } from \"@tiptap/core\";\n\nimport { VideoBlockView } from \"./components/VideoBlockView.js\";\nimport { Video } from \"../Video/Video.js\";\n\ndeclare module \"@tiptap/core\" {\n  interface Commands<ReturnType> {\n    videoBlock: {\n      setVideoBlock: (attributes: {\n        src: string;\n        poster: string;\n        assetId: string;\n        playlistUrl?: string;\n      }) => ReturnType;\n      setVideoBlockAt: (attributes: {\n        src: string;\n        poster: string;\n        assetId: string;\n        playlistUrl?: string;\n\n        pos: number | Range;\n      }) => ReturnType;\n      setVideoBlockAlign: (align: \"left\" | \"center\" | \"right\") => ReturnType;\n      setVideoBlockWidth: (width: number) => ReturnType;\n      setVideoBlockCaption: (caption: boolean) => ReturnType;\n    };\n  }\n}\n\nexport const VideoBlock = Video.extend({\n  name: \"videoBlock\",\n\n  group: \"block\",\n\n  defining: true,\n\n  isolating: true,\n\n  addAttributes() {\n    return {\n      src: {\n        default: \"\",\n        parseHTML: (element) => element.getAttribute(\"src\"),\n        renderHTML: (attributes) => ({\n          src: attributes.src,\n        }),\n      },\n      poster: {\n        default: \"\",\n        parseHTML: (element) => element.getAttribute(\"poster\"),\n        renderHTML: (attributes) => ({\n          poster: attributes.poster,\n        }),\n      },\n      playlistUrl: {\n        default: \"\",\n        parseHTML: (element) => element.getAttribute(\"data-playlist-url\"),\n        renderHTML: (attributes) => ({\n          \"data-playlist-url\": attributes.playlistUrl,\n        }),\n      },\n      width: {\n        default: \"100%\",\n        parseHTML: (element) => element.getAttribute(\"data-width\"),\n        renderHTML: (attributes) => ({\n          \"data-width\": attributes.width,\n        }),\n      },\n      align: {\n        default: \"center\",\n        parseHTML: (element) => element.getAttribute(\"data-align\"),\n        renderHTML: (attributes) => ({\n          \"data-align\": attributes.align,\n        }),\n      },\n      alt: {\n        default: undefined,\n        parseHTML: (element) => element.getAttribute(\"alt\"),\n        renderHTML: (attributes) => ({\n          alt: attributes.alt,\n        }),\n      },\n      caption: {\n        default: true,\n        parseHTML: (element) => element.getAttribute(\"data-caption\") === \"true\",\n        renderHTML: (attributes) => ({\n          \"data-caption\": attributes.caption,\n        }),\n      },\n    };\n  },\n\n  parseHTML() {\n    return [\n      {\n        tag: 'video[src*=\"tiptap.dev\"]:not([src^=\"data:\"]), video[src*=\"windows.net\"]:not([src^=\"data:\"])',\n      },\n    ];\n  },\n\n  renderHTML({ HTMLAttributes }) {\n    return [\n      \"video\",\n      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),\n    ];\n  },\n\n  addCommands() {\n    return {\n      setVideoBlock:\n        (attrs) =>\n        ({ commands }) => {\n          return commands.insertContent({\n            type: \"videoBlock\",\n            attrs: {\n              src: attrs.src,\n              poster: attrs.poster,\n              assetId: attrs.assetId,\n              playlistUrl: attrs.playlistUrl,\n            },\n          });\n        },\n\n      setVideoBlockAt:\n        (attrs) =>\n        ({ commands }) => {\n          return commands.insertContentAt(attrs.pos, {\n            type: \"videoBlock\",\n            attrs: {\n              src: attrs.src,\n              poster: attrs.poster,\n              assetId: attrs.assetId,\n              playlistUrl: attrs.playlistUrl,\n            },\n          });\n        },\n\n      setVideoBlockAlign:\n        (align) =>\n        ({ commands }) =>\n          commands.updateAttributes(\"videoBlock\", { align }),\n\n      setVideoBlockWidth:\n        (width) =>\n        ({ commands }) =>\n          commands.updateAttributes(\"videoBlock\", {\n            width: `${Math.max(0, Math.min(100, width))}%`,\n          }),\n\n      setVideoBlockCaption:\n        (caption) =>\n        ({ commands }) =>\n          commands.updateAttributes(\"videoBlock\", { caption }),\n    };\n  },\n\n  addNodeView() {\n    return ReactNodeViewRenderer(VideoBlockView);\n  },\n});\n\nexport default VideoBlock;\n"],"names":["ReactNodeViewRenderer","mergeAttributes","VideoBlockView","Video","VideoBlock","extend","name","group","defining","isolating","addAttributes","src","default","parseHTML","element","getAttribute","renderHTML","attributes","poster","playlistUrl","width","align","alt","undefined","caption","tag","HTMLAttributes","options","addCommands","setVideoBlock","attrs","commands","insertContent","type","assetId","setVideoBlockAt","insertContentAt","pos","setVideoBlockAlign","updateAttributes","setVideoBlockWidth","Math","max","min","setVideoBlockCaption","addNodeView"],"mappings":"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"}

package/dist/src/fields/TiptapEditor/extensions/VideoBlock/components/VideoBlockMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VideoBlockMenu.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/extensions/VideoBlock/components/VideoBlockMenu.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AASvD,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAM7D,eAAO,MAAM,cAAc,yBAA0B,SAAS,KAAG,SA6GhE,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"VideoBlockMenu.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/extensions/VideoBlock/components/VideoBlockMenu.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAWvD,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAM7D,eAAO,MAAM,cAAc,yBAA0B,SAAS,KAAG,SAqIhE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/src/fields/TiptapEditor/extensions/VideoBlock/components/VideoBlockMenu.js

@@ -3,7 +3,7 @@ import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react";
 import { useCallback, useRef } from "react";
 import { sticky } from "tippy.js";
 import { v4 as uuid } from "uuid";
-import { AlignHorizontalDistributeCenter, AlignHorizontalDistributeEnd, AlignHorizontalDistributeStart } from "lucide-react";
+import { AlignHorizontalDistributeCenter, AlignHorizontalDistributeEnd, AlignHorizontalDistributeStart, Pencil, PencilOff } from "lucide-react";
 import { Icon } from "../../../features/ui/Icon.js";
 import { Toolbar } from "../../../features/ui/Toolbar.js";
 import { getRenderContainer } from "../../../lib/utils/index.js";
@@ -45,6 +45,15 @@ export const VideoBlockMenu = ({ editor, appendTo })=>{
     }, [
         editor
     ]);
+    const onHideCaption = useCallback(()=>{
+        editor.chain().focus(undefined, {
+            scrollIntoView: false
+        }).setVideoBlockCaption(editor.isActive("videoBlock", {
+            caption: false
+        }) ? true : false).run();
+    }, [
+        editor
+    ]);
     const onWidthChange = useCallback((value)=>{
         editor.chain().focus(undefined, {
             scrollIntoView: false
@@ -86,6 +95,19 @@ export const VideoBlockMenu = ({ editor, appendTo })=>{
             shouldShowContent: shouldShow(),
             ref: menuRef,
             children: [
+                /*#__PURE__*/ _jsx(Toolbar.Button, {
+                    type: "button",
+                    tooltip: "Hide/Show caption",
+                    active: editor.isActive("videoBlock", {
+                        caption: false
+                    }),
+                    onClick: onHideCaption,
+                    children: /*#__PURE__*/ _jsx(Icon, {
+                        icon: editor.isActive("videoBlock", {
+                            caption: false
+                        }) ? PencilOff : Pencil
+                    })
+                }),
                 /*#__PURE__*/ _jsx(Toolbar.Button, {
                     type: "button",
                     tooltip: "Align video left",

package/dist/src/fields/TiptapEditor/extensions/VideoBlock/components/VideoBlockMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/extensions/VideoBlock/components/VideoBlockMenu.tsx"],"sourcesContent":["import { BubbleMenu as BaseBubbleMenu } from \"@tiptap/react\";\nimport { ReactNode, useCallback, useRef } from \"react\";\nimport { Instance, sticky } from \"tippy.js\";\nimport { v4 as uuid } from \"uuid\";\n\nimport {\n  AlignHorizontalDistributeCenter,\n  AlignHorizontalDistributeEnd,\n  AlignHorizontalDistributeStart,\n} from \"lucide-react\";\nimport { MenuProps } from \"../../../features/menus/types.js\";\nimport { Icon } from \"../../../features/ui/Icon.js\";\nimport { Toolbar } from \"../../../features/ui/Toolbar.js\";\nimport { getRenderContainer } from \"../../../lib/utils/index.js\";\nimport { VideoBlockWidth } from \"./VideoBlockWidth.js\";\n\nexport const VideoBlockMenu = ({ editor, appendTo }: MenuProps): ReactNode => {\n  const menuRef = useRef<HTMLDivElement>(null);\n  const tippyInstance = useRef<Instance | null>(null);\n\n  const getReferenceClientRect = useCallback(() => {\n    const renderContainer = getRenderContainer(editor, \"node-videoBlock\");\n    const rect =\n      renderContainer?.getBoundingClientRect() ||\n      new DOMRect(-1000, -1000, 0, 0);\n\n    return rect;\n  }, [editor]);\n\n  const shouldShow = useCallback(() => {\n    const isActive = editor.isActive(\"videoBlock\");\n\n    return isActive;\n  }, [editor]);\n\n  const onAlignVideoLeft = useCallback(() => {\n    editor\n      .chain()\n      .focus(undefined, { scrollIntoView: false })\n      .setVideoBlockAlign(\"left\")\n      .run();\n  }, [editor]);\n\n  const onAlignVideoCenter = useCallback(() => {\n    editor\n      .chain()\n      .focus(undefined, { scrollIntoView: false })\n      .setVideoBlockAlign(\"center\")\n      .run();\n  }, [editor]);\n\n  const onAlignVideoRight = useCallback(() => {\n    editor\n      .chain()\n      .focus(undefined, { scrollIntoView: false })\n      .setVideoBlockAlign(\"right\")\n      .run();\n  }, [editor]);\n\n  const onWidthChange = useCallback(\n    (value: number) => {\n      editor\n        .chain()\n        .focus(undefined, { scrollIntoView: false })\n        .setVideoBlockWidth(value)\n        .run();\n    },\n    [editor]\n  );\n\n  return (\n    <BaseBubbleMenu\n      editor={editor}\n      pluginKey={`videoBlockMenu-${uuid()}`}\n      shouldShow={shouldShow}\n      updateDelay={0}\n      tippyOptions={{\n        offset: [0, 8],\n        popperOptions: {\n          modifiers: [{ name: \"flip\", enabled: false }],\n        },\n        getReferenceClientRect,\n        onCreate: (instance: Instance) => {\n          tippyInstance.current = instance;\n        },\n        appendTo: () => {\n          return appendTo?.current;\n        },\n        plugins: [sticky],\n        sticky: \"popper\",\n      }}\n    >\n      <Toolbar.Wrapper shouldShowContent={shouldShow()} ref={menuRef}>\n        <Toolbar.Button\n          type=\"button\"\n          tooltip=\"Align video left\"\n          active={editor.isActive(\"videoBlock\", { align: \"left\" })}\n          onClick={onAlignVideoLeft}\n        >\n          <Icon icon={AlignHorizontalDistributeStart} />\n        </Toolbar.Button>\n        <Toolbar.Button\n          type=\"button\"\n          tooltip=\"Align video center\"\n          active={editor.isActive(\"videoBlock\", { align: \"center\" })}\n          onClick={onAlignVideoCenter}\n        >\n          <Icon icon={AlignHorizontalDistributeCenter} />\n        </Toolbar.Button>\n        <Toolbar.Button\n          type=\"button\"\n          tooltip=\"Align video right\"\n          active={editor.isActive(\"videoBlock\", { align: \"right\" })}\n          onClick={onAlignVideoRight}\n        >\n          <Icon icon={AlignHorizontalDistributeEnd} />\n        </Toolbar.Button>\n        <Toolbar.Divider />\n        <VideoBlockWidth\n          onChange={onWidthChange}\n          value={parseInt(editor.getAttributes(\"videoBlock\").width)}\n        />\n      </Toolbar.Wrapper>\n    </BaseBubbleMenu>\n  );\n};\n\nexport default VideoBlockMenu;\n"],"names":["BubbleMenu","BaseBubbleMenu","useCallback","useRef","sticky","v4","uuid","AlignHorizontalDistributeCenter","AlignHorizontalDistributeEnd","AlignHorizontalDistributeStart","Icon","Toolbar","getRenderContainer","VideoBlockWidth","VideoBlockMenu","editor","appendTo","menuRef","tippyInstance","getReferenceClientRect","renderContainer","rect","getBoundingClientRect","DOMRect","shouldShow","isActive","onAlignVideoLeft","chain","focus","undefined","scrollIntoView","setVideoBlockAlign","run","onAlignVideoCenter","onAlignVideoRight","onWidthChange","value","setVideoBlockWidth","pluginKey","updateDelay","tippyOptions","offset","popperOptions","modifiers","name","enabled","onCreate","instance","current","plugins","Wrapper","shouldShowContent","ref","Button","type","tooltip","active","align","onClick","icon","Divider","onChange","parseInt","getAttributes","width"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/extensions/VideoBlock/components/VideoBlockMenu.tsx"],"sourcesContent":["import { BubbleMenu as BaseBubbleMenu } from \"@tiptap/react\";\nimport { ReactNode, useCallback, useRef } from \"react\";\nimport { Instance, sticky } from \"tippy.js\";\nimport { v4 as uuid } from \"uuid\";\n\nimport {\n  AlignHorizontalDistributeCenter,\n  AlignHorizontalDistributeEnd,\n  AlignHorizontalDistributeStart,\n  Pencil,\n  PencilOff,\n} from \"lucide-react\";\nimport { MenuProps } from \"../../../features/menus/types.js\";\nimport { Icon } from \"../../../features/ui/Icon.js\";\nimport { Toolbar } from \"../../../features/ui/Toolbar.js\";\nimport { getRenderContainer } from \"../../../lib/utils/index.js\";\nimport { VideoBlockWidth } from \"./VideoBlockWidth.js\";\n\nexport const VideoBlockMenu = ({ editor, appendTo }: MenuProps): ReactNode => {\n  const menuRef = useRef<HTMLDivElement>(null);\n  const tippyInstance = useRef<Instance | null>(null);\n\n  const getReferenceClientRect = useCallback(() => {\n    const renderContainer = getRenderContainer(editor, \"node-videoBlock\");\n    const rect =\n      renderContainer?.getBoundingClientRect() ||\n      new DOMRect(-1000, -1000, 0, 0);\n\n    return rect;\n  }, [editor]);\n\n  const shouldShow = useCallback(() => {\n    const isActive = editor.isActive(\"videoBlock\");\n\n    return isActive;\n  }, [editor]);\n\n  const onAlignVideoLeft = useCallback(() => {\n    editor\n      .chain()\n      .focus(undefined, { scrollIntoView: false })\n      .setVideoBlockAlign(\"left\")\n      .run();\n  }, [editor]);\n\n  const onAlignVideoCenter = useCallback(() => {\n    editor\n      .chain()\n      .focus(undefined, { scrollIntoView: false })\n      .setVideoBlockAlign(\"center\")\n      .run();\n  }, [editor]);\n\n  const onAlignVideoRight = useCallback(() => {\n    editor\n      .chain()\n      .focus(undefined, { scrollIntoView: false })\n      .setVideoBlockAlign(\"right\")\n      .run();\n  }, [editor]);\n\n  const onHideCaption = useCallback(() => {\n    editor\n      .chain()\n      .focus(undefined, { scrollIntoView: false })\n      .setVideoBlockCaption(\n        editor.isActive(\"videoBlock\", { caption: false }) ? true : false\n      )\n      .run();\n  }, [editor]);\n\n  const onWidthChange = useCallback(\n    (value: number) => {\n      editor\n        .chain()\n        .focus(undefined, { scrollIntoView: false })\n        .setVideoBlockWidth(value)\n        .run();\n    },\n    [editor]\n  );\n\n  return (\n    <BaseBubbleMenu\n      editor={editor}\n      pluginKey={`videoBlockMenu-${uuid()}`}\n      shouldShow={shouldShow}\n      updateDelay={0}\n      tippyOptions={{\n        offset: [0, 8],\n        popperOptions: {\n          modifiers: [{ name: \"flip\", enabled: false }],\n        },\n        getReferenceClientRect,\n        onCreate: (instance: Instance) => {\n          tippyInstance.current = instance;\n        },\n        appendTo: () => {\n          return appendTo?.current;\n        },\n        plugins: [sticky],\n        sticky: \"popper\",\n      }}\n    >\n      <Toolbar.Wrapper shouldShowContent={shouldShow()} ref={menuRef}>\n        <Toolbar.Button\n          type=\"button\"\n          tooltip=\"Hide/Show caption\"\n          active={editor.isActive(\"videoBlock\", { caption: false })}\n          onClick={onHideCaption}\n        >\n          <Icon\n            icon={\n              editor.isActive(\"videoBlock\", { caption: false })\n                ? PencilOff\n                : Pencil\n            }\n          />\n        </Toolbar.Button>\n        <Toolbar.Button\n          type=\"button\"\n          tooltip=\"Align video left\"\n          active={editor.isActive(\"videoBlock\", { align: \"left\" })}\n          onClick={onAlignVideoLeft}\n        >\n          <Icon icon={AlignHorizontalDistributeStart} />\n        </Toolbar.Button>\n        <Toolbar.Button\n          type=\"button\"\n          tooltip=\"Align video center\"\n          active={editor.isActive(\"videoBlock\", { align: \"center\" })}\n          onClick={onAlignVideoCenter}\n        >\n          <Icon icon={AlignHorizontalDistributeCenter} />\n        </Toolbar.Button>\n        <Toolbar.Button\n          type=\"button\"\n          tooltip=\"Align video right\"\n          active={editor.isActive(\"videoBlock\", { align: \"right\" })}\n          onClick={onAlignVideoRight}\n        >\n          <Icon icon={AlignHorizontalDistributeEnd} />\n        </Toolbar.Button>\n        <Toolbar.Divider />\n        <VideoBlockWidth\n          onChange={onWidthChange}\n          value={parseInt(editor.getAttributes(\"videoBlock\").width)}\n        />\n      </Toolbar.Wrapper>\n    </BaseBubbleMenu>\n  );\n};\n\nexport default VideoBlockMenu;\n"],"names":["BubbleMenu","BaseBubbleMenu","useCallback","useRef","sticky","v4","uuid","AlignHorizontalDistributeCenter","AlignHorizontalDistributeEnd","AlignHorizontalDistributeStart","Pencil","PencilOff","Icon","Toolbar","getRenderContainer","VideoBlockWidth","VideoBlockMenu","editor","appendTo","menuRef","tippyInstance","getReferenceClientRect","renderContainer","rect","getBoundingClientRect","DOMRect","shouldShow","isActive","onAlignVideoLeft","chain","focus","undefined","scrollIntoView","setVideoBlockAlign","run","onAlignVideoCenter","onAlignVideoRight","onHideCaption","setVideoBlockCaption","caption","onWidthChange","value","setVideoBlockWidth","pluginKey","updateDelay","tippyOptions","offset","popperOptions","modifiers","name","enabled","onCreate","instance","current","plugins","Wrapper","shouldShowContent","ref","Button","type","tooltip","active","onClick","icon","align","Divider","onChange","parseInt","getAttributes","width"],"mappings":"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"}

package/dist/src/fields/TiptapEditor/extensions/VideoBlock/components/VideoBlockView.d.ts

@@ -7,10 +7,27 @@ interface VideoBlockViewProps {
     node: Node & {
         attrs: {
             src: string;
+            poster: string;
+            assetId: string;
+            playlistUrl?: string;
         };
     };
     updateAttributes: (attrs: Record<string, string>) => void;
 }
+export type Playlist = {
+    id: string;
+    title: string;
+    description: string;
+    poster: string;
+    items: Item[];
+};
+export type Item = {
+    src: string;
+    type: string;
+    label: string;
+    width: number;
+    height: number;
+};
 export declare const VideoBlockView: (props: VideoBlockViewProps) => React.JSX.Element;
 export default VideoBlockView;
 //# sourceMappingURL=VideoBlockView.d.ts.map

package/dist/src/fields/TiptapEditor/extensions/VideoBlock/components/VideoBlockView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VideoBlockView.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/extensions/VideoBlock/components/VideoBlockView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,MAAM,EAAmB,MAAM,eAAe,CAAC;AACxD,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,UAAU,mBAAmB;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,MAAM,CAAC;IACrB,IAAI,EAAE,IAAI,GAAG;QACX,KAAK,EAAE;YACL,GAAG,EAAE,MAAM,CAAC;SACb,CAAC;KACH,CAAC;IACF,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;CAC3D;AAED,eAAO,MAAM,cAAc,UAAW,mBAAmB,sBA+BxD,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"VideoBlockView.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/extensions/VideoBlock/components/VideoBlockView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,MAAM,EAAmB,MAAM,eAAe,CAAC;AACxD,OAAO,KAAkD,MAAM,OAAO,CAAC;AAIvE,UAAU,mBAAmB;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,MAAM,CAAC;IACrB,IAAI,EAAE,IAAI,GAAG;QACX,KAAK,EAAE;YACL,GAAG,EAAE,MAAM,CAAC;YACZ,MAAM,EAAE,MAAM,CAAC;YACf,OAAO,EAAE,MAAM,CAAC;YAChB,WAAW,CAAC,EAAE,MAAM,CAAC;SACtB,CAAC;KACH,CAAC;IACF,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;CAC3D;AAED,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,IAAI,EAAE,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,IAAI,GAAG;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,mBAAmB,sBAsExD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/src/fields/TiptapEditor/extensions/VideoBlock/components/VideoBlockView.js

@@ -1,11 +1,29 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { NodeViewWrapper } from "@tiptap/react";
-import React, { useCallback, useRef } from "react";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import { cn } from "../../../lib/utils/index.js";
+import VideoPlayer from "./videojs/VideoPlayer.js";
 export const VideoBlockView = (props)=>{
     const { editor, getPos, node } = props;
     const videoWrapperRef = useRef(null);
-    const { src, poster } = node.attrs;
+    const { src, poster, playlistUrl, caption } = node.attrs;
+    const [playlistContent, setPlaylistContent] = React.useState();
+    const [error, setError] = React.useState();
+    useEffect(()=>{
+        async function getPlaylistContent() {
+            const res = await fetch(playlistUrl);
+            return await res.json();
+        }
+        if (playlistUrl) {
+            getPlaylistContent().then((data)=>{
+                setPlaylistContent(data);
+            }).catch((err)=>{
+                setError(err);
+            });
+        }
+    }, [
+        playlistUrl
+    ]);
     const wrapperClassName = cn(node.attrs.align === "left" ? "ml-0" : "ml-auto", node.attrs.align === "right" ? "mr-0" : "mr-auto", node.attrs.align === "center" && "mx-auto");
     const onClick = useCallback(()=>{
         editor.commands.setNodeSelection(getPos());
@@ -13,23 +31,40 @@ export const VideoBlockView = (props)=>{
         getPos,
         editor.commands
     ]);
+    const videoJsOptions = useMemo(()=>{
+        if (playlistContent == undefined) return {};
+        return {
+            sources: playlistContent.items.map((item)=>({
+                    src: item.src,
+                    type: item.type,
+                    label: item.label
+                })),
+            poster: playlistContent.poster
+        };
+    }, [
+        playlistContent
+    ]);
     return /*#__PURE__*/ _jsx(NodeViewWrapper, {
         children: /*#__PURE__*/ _jsx("div", {
             className: wrapperClassName,
             style: {
                 width: node.attrs.width
             },
-            children: /*#__PURE__*/ _jsx("div", {
+            children: /*#__PURE__*/ _jsxs("div", {
                 contentEditable: false,
                 ref: videoWrapperRef,
-                children: /*#__PURE__*/ _jsx("video", {
-                    controls: true,
-                    className: "block",
-                    src: src,
-                    poster: poster,
-                    title: "",
-                    onClick: onClick
-                })
+                children: [
+                    error && /*#__PURE__*/ _jsx("div", {
+                        children: error
+                    }),
+                    playlistContent && /*#__PURE__*/ _jsx(VideoPlayer, {
+                        options: videoJsOptions
+                    }),
+                    caption && playlistContent?.title && /*#__PURE__*/ _jsx("caption", {
+                        className: "text-center block text-sm text-gray-500",
+                        children: playlistContent?.title
+                    })
+                ]
             })
         })
     });

package/dist/src/fields/TiptapEditor/extensions/VideoBlock/components/VideoBlockView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/extensions/VideoBlock/components/VideoBlockView.tsx"],"sourcesContent":["import { Node } from \"@tiptap/pm/model\";\nimport { Editor, NodeViewWrapper } from \"@tiptap/react\";\nimport React, { useCallback, useRef } from \"react\";\nimport { cn } from \"../../../lib/utils/index.js\";\n\ninterface VideoBlockViewProps {\n  editor: Editor;\n  getPos: () => number;\n  node: Node & {\n    attrs: {\n      src: string;\n    };\n  };\n  updateAttributes: (attrs: Record<string, string>) => void;\n}\n\nexport const VideoBlockView = (props: VideoBlockViewProps) => {\n  const { editor, getPos, node } = props;\n  const videoWrapperRef = useRef<HTMLDivElement>(null);\n  const { src, poster } = node.attrs;\n\n  const wrapperClassName = cn(\n    node.attrs.align === \"left\" ? \"ml-0\" : \"ml-auto\",\n    node.attrs.align === \"right\" ? \"mr-0\" : \"mr-auto\",\n    node.attrs.align === \"center\" && \"mx-auto\"\n  );\n\n  const onClick = useCallback(() => {\n    editor.commands.setNodeSelection(getPos());\n  }, [getPos, editor.commands]);\n\n  return (\n    <NodeViewWrapper>\n      <div className={wrapperClassName} style={{ width: node.attrs.width }}>\n        <div contentEditable={false} ref={videoWrapperRef}>\n          <video\n            controls\n            className=\"block\"\n            src={src}\n            poster={poster}\n            title=\"\"\n            onClick={onClick}\n          />\n        </div>\n      </div>\n    </NodeViewWrapper>\n  );\n};\n\nexport default VideoBlockView;\n"],"names":["NodeViewWrapper","React","useCallback","useRef","cn","VideoBlockView","props","editor","getPos","node","videoWrapperRef","src","poster","attrs","wrapperClassName","align","onClick","commands","setNodeSelection","div","className","style","width","contentEditable","ref","video","controls","title"],"mappings":";AACA,SAAiBA,eAAe,QAAQ,gBAAgB;AACxD,OAAOC,SAASC,WAAW,EAAEC,MAAM,QAAQ,QAAQ;AACnD,SAASC,EAAE,QAAQ,8BAA8B;AAajD,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAM,EAAEC,MAAM,EAAEC,MAAM,EAAEC,IAAI,EAAE,GAAGH;IACjC,MAAMI,kBAAkBP,OAAuB;IAC/C,MAAM,EAAEQ,GAAG,EAAEC,MAAM,EAAE,GAAGH,KAAKI,KAAK;IAElC,MAAMC,mBAAmBV,GACvBK,KAAKI,KAAK,CAACE,KAAK,KAAK,SAAS,SAAS,WACvCN,KAAKI,KAAK,CAACE,KAAK,KAAK,UAAU,SAAS,WACxCN,KAAKI,KAAK,CAACE,KAAK,KAAK,YAAY;IAGnC,MAAMC,UAAUd,YAAY;QAC1BK,OAAOU,QAAQ,CAACC,gBAAgB,CAACV;IACnC,GAAG;QAACA;QAAQD,OAAOU,QAAQ;KAAC;IAE5B,qBACE,KAACjB;kBACC,cAAA,KAACmB;YAAIC,WAAWN;YAAkBO,OAAO;gBAAEC,OAAOb,KAAKI,KAAK,CAACS,KAAK;YAAC;sBACjE,cAAA,KAACH;gBAAII,iBAAiB;gBAAOC,KAAKd;0BAChC,cAAA,KAACe;oBACCC,QAAQ;oBACRN,WAAU;oBACVT,KAAKA;oBACLC,QAAQA;oBACRe,OAAM;oBACNX,SAASA;;;;;AAMrB,EAAE;AAEF,eAAeX,eAAe"}
+{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/extensions/VideoBlock/components/VideoBlockView.tsx"],"sourcesContent":["import { Node } from \"@tiptap/pm/model\";\nimport { Editor, NodeViewWrapper } from \"@tiptap/react\";\nimport React, { useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { cn } from \"../../../lib/utils/index.js\";\nimport VideoPlayer from \"./videojs/VideoPlayer.js\";\n\ninterface VideoBlockViewProps {\n  editor: Editor;\n  getPos: () => number;\n  node: Node & {\n    attrs: {\n      src: string;\n      poster: string;\n      assetId: string;\n      playlistUrl?: string;\n    };\n  };\n  updateAttributes: (attrs: Record<string, string>) => void;\n}\n\nexport type Playlist = {\n  id: string;\n  title: string;\n  description: string;\n  poster: string;\n  items: Item[];\n};\n\nexport type Item = {\n  src: string;\n  type: string;\n  label: string;\n  width: number;\n  height: number;\n};\n\nexport const VideoBlockView = (props: VideoBlockViewProps) => {\n  const { editor, getPos, node } = props;\n  const videoWrapperRef = useRef<HTMLDivElement>(null);\n  const { src, poster, playlistUrl, caption } = node.attrs;\n  const [playlistContent, setPlaylistContent] = React.useState<\n    Playlist | undefined\n  >();\n  const [error, setError] = React.useState();\n\n  useEffect(() => {\n    async function getPlaylistContent() {\n      const res = await fetch(playlistUrl);\n      return await res.json();\n    }\n\n    if (playlistUrl) {\n      getPlaylistContent()\n        .then((data) => {\n          setPlaylistContent(data);\n        })\n        .catch((err) => {\n          setError(err);\n        });\n    }\n  }, [playlistUrl]);\n\n  const wrapperClassName = cn(\n    node.attrs.align === \"left\" ? \"ml-0\" : \"ml-auto\",\n    node.attrs.align === \"right\" ? \"mr-0\" : \"mr-auto\",\n    node.attrs.align === \"center\" && \"mx-auto\"\n  );\n\n  const onClick = useCallback(() => {\n    editor.commands.setNodeSelection(getPos());\n  }, [getPos, editor.commands]);\n\n  const videoJsOptions = useMemo(() => {\n    if (playlistContent == undefined) return {};\n    return {\n      sources: playlistContent.items.map((item) => ({\n        src: item.src,\n        type: item.type,\n        label: item.label,\n      })),\n      poster: playlistContent.poster,\n    };\n  }, [playlistContent]);\n  return (\n    <NodeViewWrapper>\n      <div className={wrapperClassName} style={{ width: node.attrs.width }}>\n        <div contentEditable={false} ref={videoWrapperRef}>\n          {error && <div>{error}</div>}\n          {/* <video\n            controls\n            className=\"block\"\n            src={src}\n            poster={poster}\n            title=\"\"\n            onClick={onClick}\n          /> */}\n          {playlistContent && <VideoPlayer options={videoJsOptions} />}\n          {caption && playlistContent?.title && (\n            <caption className=\"text-center block text-sm text-gray-500\">\n              {playlistContent?.title}\n            </caption>\n          )}\n        </div>\n      </div>\n    </NodeViewWrapper>\n  );\n};\n\nexport default VideoBlockView;\n"],"names":["NodeViewWrapper","React","useCallback","useEffect","useMemo","useRef","cn","VideoPlayer","VideoBlockView","props","editor","getPos","node","videoWrapperRef","src","poster","playlistUrl","caption","attrs","playlistContent","setPlaylistContent","useState","error","setError","getPlaylistContent","res","fetch","json","then","data","catch","err","wrapperClassName","align","onClick","commands","setNodeSelection","videoJsOptions","undefined","sources","items","map","item","type","label","div","className","style","width","contentEditable","ref","options","title"],"mappings":";AACA,SAAiBA,eAAe,QAAQ,gBAAgB;AACxD,OAAOC,SAASC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,QAAQ;AACvE,SAASC,EAAE,QAAQ,8BAA8B;AACjD,OAAOC,iBAAiB,2BAA2B;AAgCnD,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAM,EAAEC,MAAM,EAAEC,MAAM,EAAEC,IAAI,EAAE,GAAGH;IACjC,MAAMI,kBAAkBR,OAAuB;IAC/C,MAAM,EAAES,GAAG,EAAEC,MAAM,EAAEC,WAAW,EAAEC,OAAO,EAAE,GAAGL,KAAKM,KAAK;IACxD,MAAM,CAACC,iBAAiBC,mBAAmB,GAAGnB,MAAMoB,QAAQ;IAG5D,MAAM,CAACC,OAAOC,SAAS,GAAGtB,MAAMoB,QAAQ;IAExClB,UAAU;QACR,eAAeqB;YACb,MAAMC,MAAM,MAAMC,MAAMV;YACxB,OAAO,MAAMS,IAAIE,IAAI;QACvB;QAEA,IAAIX,aAAa;YACfQ,qBACGI,IAAI,CAAC,CAACC;gBACLT,mBAAmBS;YACrB,GACCC,KAAK,CAAC,CAACC;gBACNR,SAASQ;YACX;QACJ;IACF,GAAG;QAACf;KAAY;IAEhB,MAAMgB,mBAAmB1B,GACvBM,KAAKM,KAAK,CAACe,KAAK,KAAK,SAAS,SAAS,WACvCrB,KAAKM,KAAK,CAACe,KAAK,KAAK,UAAU,SAAS,WACxCrB,KAAKM,KAAK,CAACe,KAAK,KAAK,YAAY;IAGnC,MAAMC,UAAUhC,YAAY;QAC1BQ,OAAOyB,QAAQ,CAACC,gBAAgB,CAACzB;IACnC,GAAG;QAACA;QAAQD,OAAOyB,QAAQ;KAAC;IAE5B,MAAME,iBAAiBjC,QAAQ;QAC7B,IAAIe,mBAAmBmB,WAAW,OAAO,CAAC;QAC1C,OAAO;YACLC,SAASpB,gBAAgBqB,KAAK,CAACC,GAAG,CAAC,CAACC,OAAU,CAAA;oBAC5C5B,KAAK4B,KAAK5B,GAAG;oBACb6B,MAAMD,KAAKC,IAAI;oBACfC,OAAOF,KAAKE,KAAK;gBACnB,CAAA;YACA7B,QAAQI,gBAAgBJ,MAAM;QAChC;IACF,GAAG;QAACI;KAAgB;IACpB,qBACE,KAACnB;kBACC,cAAA,KAAC6C;YAAIC,WAAWd;YAAkBe,OAAO;gBAAEC,OAAOpC,KAAKM,KAAK,CAAC8B,KAAK;YAAC;sBACjE,cAAA,MAACH;gBAAII,iBAAiB;gBAAOC,KAAKrC;;oBAC/BS,uBAAS,KAACuB;kCAAKvB;;oBASfH,iCAAmB,KAACZ;wBAAY4C,SAASd;;oBACzCpB,WAAWE,iBAAiBiC,uBAC3B,KAACnC;wBAAQ6B,WAAU;kCAChB3B,iBAAiBiC;;;;;;AAOhC,EAAE;AAEF,eAAe5C,eAAe"}

package/dist/src/fields/TiptapEditor/extensions/VideoBlock/components/videojs/VideoPlayer.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { VideoJsPlayerOptions } from "video.js/dist/video.js";
+import "video.js/dist/video-js.css";
+import "video.js/dist/video-js.css";
+interface IVideoPlayerProps {
+    options: VideoJsPlayerOptions;
+}
+declare const VideoPlayer: React.FC<IVideoPlayerProps>;
+export default VideoPlayer;
+//# sourceMappingURL=VideoPlayer.d.ts.map

package/dist/src/fields/TiptapEditor/extensions/VideoBlock/components/videojs/VideoPlayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoPlayer.d.ts","sourceRoot":"","sources":["../../../../../../../../src/fields/TiptapEditor/extensions/VideoBlock/components/videojs/VideoPlayer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAgB,EAEd,oBAAoB,EACrB,MAAM,wBAAwB,CAAC;AAChC,OAAO,4BAA4B,CAAC;AAGpC,OAAO,4BAA4B,CAAC;AAIpC,UAAU,iBAAiB;IACzB,OAAO,EAAE,oBAAoB,CAAC;CAC/B;AAYD,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA2B5C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/src/fields/TiptapEditor/extensions/VideoBlock/components/videojs/VideoPlayer.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import videojs from "video.js/dist/video.js";
+import "video.js/dist/video-js.css";
+// Styles
+import "video.js/dist/video-js.css";
+import { QualitySelector } from "./quality-selector/index.js";
+const initialOptions = {
+    controls: true,
+    fluid: true,
+    controlBar: {
+        volumePanel: {
+            inline: false
+        }
+    }
+};
+const VideoPlayer = ({ options })=>{
+    const videoNode = React.useRef(null);
+    const player = React.useRef(null);
+    React.useEffect(()=>{
+        QualitySelector(videojs);
+        player.current = videojs(videoNode.current, {
+            ...initialOptions,
+            ...options
+        }).ready(function() {
+            if (!this.controlBar.children().some((c)=>c.name_ === "QualitySelector")) {
+                this.controlBar.addChild("QualitySelector");
+            }
+        });
+        return ()=>{
+            if (player.current) {
+                player.current.dispose();
+            }
+        };
+    }, [
+        options
+    ]);
+    return /*#__PURE__*/ _jsx("video", {
+        ref: videoNode,
+        className: "video-js"
+    });
+};
+export default VideoPlayer;
+
+//# sourceMappingURL=VideoPlayer.js.map

package/dist/src/fields/TiptapEditor/extensions/VideoBlock/components/videojs/VideoPlayer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../src/fields/TiptapEditor/extensions/VideoBlock/components/videojs/VideoPlayer.tsx"],"sourcesContent":["import React from \"react\";\nimport videojs, {\n  VideoJsPlayer,\n  VideoJsPlayerOptions,\n} from \"video.js/dist/video.js\";\nimport \"video.js/dist/video-js.css\";\n\n// Styles\nimport \"video.js/dist/video-js.css\";\n\nimport { QualitySelector } from \"./quality-selector/index.js\";\n\ninterface IVideoPlayerProps {\n  options: VideoJsPlayerOptions;\n}\n\nconst initialOptions: VideoJsPlayerOptions = {\n  controls: true,\n  fluid: true,\n  controlBar: {\n    volumePanel: {\n      inline: false,\n    },\n  },\n};\n\nconst VideoPlayer: React.FC<IVideoPlayerProps> = ({ options }) => {\n  const videoNode = React.useRef<HTMLVideoElement>(null);\n  const player = React.useRef<videojs.Player>(null);\n\n  React.useEffect(() => {\n    QualitySelector(videojs);\n\n    player.current = videojs(videoNode.current, {\n      ...initialOptions,\n      ...options,\n    }).ready(function () {\n      if (\n        !this.controlBar\n          .children()\n          .some((c: { name_: string }) => c.name_ === \"QualitySelector\")\n      ) {\n        this.controlBar.addChild(\"QualitySelector\");\n      }\n    });\n    return () => {\n      if (player.current) {\n        player.current.dispose();\n      }\n    };\n  }, [options]);\n\n  return <video ref={videoNode} className=\"video-js\" />;\n};\n\nexport default VideoPlayer;\n"],"names":["React","videojs","QualitySelector","initialOptions","controls","fluid","controlBar","volumePanel","inline","VideoPlayer","options","videoNode","useRef","player","useEffect","current","ready","children","some","c","name_","addChild","dispose","video","ref","className"],"mappings":";AAAA,OAAOA,WAAW,QAAQ;AAC1B,OAAOC,aAGA,yBAAyB;AAChC,OAAO,6BAA6B;AAEpC,SAAS;AACT,OAAO,6BAA6B;AAEpC,SAASC,eAAe,QAAQ,8BAA8B;AAM9D,MAAMC,iBAAuC;IAC3CC,UAAU;IACVC,OAAO;IACPC,YAAY;QACVC,aAAa;YACXC,QAAQ;QACV;IACF;AACF;AAEA,MAAMC,cAA2C,CAAC,EAAEC,OAAO,EAAE;IAC3D,MAAMC,YAAYX,MAAMY,MAAM,CAAmB;IACjD,MAAMC,SAASb,MAAMY,MAAM,CAAiB;IAE5CZ,MAAMc,SAAS,CAAC;QACdZ,gBAAgBD;QAEhBY,OAAOE,OAAO,GAAGd,QAAQU,UAAUI,OAAO,EAAE;YAC1C,GAAGZ,cAAc;YACjB,GAAGO,OAAO;QACZ,GAAGM,KAAK,CAAC;YACP,IACE,CAAC,IAAI,CAACV,UAAU,CACbW,QAAQ,GACRC,IAAI,CAAC,CAACC,IAAyBA,EAAEC,KAAK,KAAK,oBAC9C;gBACA,IAAI,CAACd,UAAU,CAACe,QAAQ,CAAC;YAC3B;QACF;QACA,OAAO;YACL,IAAIR,OAAOE,OAAO,EAAE;gBAClBF,OAAOE,OAAO,CAACO,OAAO;YACxB;QACF;IACF,GAAG;QAACZ;KAAQ;IAEZ,qBAAO,KAACa;QAAMC,KAAKb;QAAWc,WAAU;;AAC1C;AAEA,eAAehB,YAAY"}