npm - payload-richtext-tiptap - Versions diffs - 0.0.52 → 0.0.53 - Mend

payload-richtext-tiptap 0.0.52 → 0.0.53

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.

Files changed (62) hide show

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

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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;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 CHANGED Viewed

	@@ -1 +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"}
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: {\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 CHANGED Viewed

	@@ -1 +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"}
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;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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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;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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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 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 CHANGED Viewed

	@@ -1 +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"}
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;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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":";AAAA,SAASA,cAAcC,cAAc,QAAQ,gBAAgB;AAC7D,SAAoBC,WAAW,EAAEC,MAAM,QAAQ,QAAQ;AACvD,SAAmBC,MAAM,QAAQ,WAAW;AAC5C,SAASC,MAAMC,IAAI,QAAQ,OAAO;AAElC,SACEC,+BAA+B,EAC/BC,4BAA4B,EAC5BC,8BAA8B,~~QACzB~~,eAAe;AAEtB,SAASC,IAAI,QAAQ,+BAA+B;AACpD,SAASC,OAAO,QAAQ,kCAAkC;AAC1D,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SAASC,eAAe,QAAQ,uBAAuB;AAEvD,OAAO,MAAMC,iBAAiB,CAAC,EAAEC,MAAM,EAAEC,QAAQ,EAAa;IAC5D,MAAMC,~~UAAUd~~,OAAuB;IACvC,~~MAAMe~~,~~gBAAgBf~~,OAAwB;IAE9C,~~MAAMgB~~,~~yBAAyBjB~~,YAAY;QACzC,~~MAAMkB~~,kBAAkBR,mBAAmBG,QAAQ;QACnD,MAAMM,OACJD,iBAAiBE,2BACjB,IAAIC,QAAQ,CAAC,MAAM,CAAC,MAAM,GAAG;QAE/B,OAAOF;IACT,GAAG;QAACN;KAAO;IAEX,MAAMS,~~aAAatB~~,YAAY;QAC7B,~~MAAMuB~~,WAAWV,OAAOU,QAAQ,CAAC;QAEjC,OAAOA;IACT,GAAG;QAACV;KAAO;IAEX,MAAMW,~~mBAAmBxB~~,YAAY;~~QACnCa~~,OACGY,KAAK,GACLC,KAAK,CAACC,WAAW;YAAEC,gBAAgB;QAAM,GACzCC,kBAAkB,CAAC,QACnBC,GAAG;IACR,GAAG;QAACjB;KAAO;IAEX,MAAMkB,~~qBAAqB/B~~,YAAY;~~QACrCa~~,OACGY,KAAK,GACLC,KAAK,CAACC,WAAW;YAAEC,gBAAgB;QAAM,GACzCC,kBAAkB,CAAC,UACnBC,GAAG;IACR,GAAG;QAACjB;KAAO;IAEX,MAAMmB,~~oBAAoBhC~~,YAAY;~~QACpCa~~,OACGY,KAAK,GACLC,KAAK,CAACC,WAAW;YAAEC,gBAAgB;QAAM,GACzCC,kBAAkB,CAAC,SACnBC,GAAG;IACR,GAAG;QAACjB;KAAO;IAEX,MAAMoB,~~gBAAgBjC~~,YACpB,~~CAACkC~~;~~QACCrB~~,OACGY,KAAK,GACLC,KAAK,CAACC,WAAW;YAAEC,gBAAgB;QAAM,~~GACzCO~~,kBAAkB,CAACD,~~OACnBJ~~,GAAG;IACR,GACA;QAACjB;KAAO;IAGV,qBACE,~~KAACd~~;~~QACCc~~,QAAQA;~~QACRuB~~,WAAW,CAAC,eAAe,~~EAAEhC~~,OAAO,CAAC;~~QACrCkB~~,YAAYA;~~QACZe~~,aAAa;QACbC,cAAc;YACZC,QAAQ;gBAAC;gBAAG;aAAE;YACdC,eAAe;gBACbC,WAAW;oBAAC;wBAAEC,MAAM;wBAAQC,SAAS;oBAAM;iBAAE;YAC/C;~~YACA1B~~;~~YACA2B~~,UAAU,CAACC;~~gBACT7B~~,~~cAAc8B~~,OAAO,GAAGD;YAC1B;~~YACA/B~~,UAAU;gBACR,OAAOA,~~UAAUgC~~;YACnB;YACAC,SAAS;~~gBAAC7C~~;aAAO;YACjBA,QAAQ;QACV;kBAEA,cAAA,~~MAACO~~,~~QAAQuC~~,OAAO;YAACC,~~mBAAmB3B~~;~~YAAc4B~~,~~KAAKnC~~;;8BACrD,KAACN,~~QAAQ0C~~,MAAM;oBACbC,MAAK;oBACLC,SAAQ;oBACRC,~~QAAQzC~~,OAAOU,QAAQ,CAAC,cAAc;~~wBAAEgC~~,OAAO;oBAAO;~~oBACtDC~~,~~SAAShC~~;8BAET,cAAA,KAAChB;~~wBAAKiD~~,~~MAAMlD~~;;;8BAEd,~~KAACE~~,~~QAAQ0C~~,MAAM;oBACbC,MAAK;oBACLC,SAAQ;oBACRC,~~QAAQzC~~,OAAOU,QAAQ,CAAC,cAAc;~~wBAAEgC~~,OAAO;oBAAS;~~oBACxDC~~,~~SAASzB~~;8BAET,cAAA,KAACvB;~~wBAAKiD~~,~~MAAMpD~~;;;8BAEd,~~KAACI~~,~~QAAQ0C~~,MAAM;oBACbC,MAAK;oBACLC,SAAQ;oBACRC,~~QAAQzC~~,OAAOU,QAAQ,CAAC,cAAc;~~wBAAEgC~~,OAAO;oBAAQ;~~oBACvDC~~,~~SAASxB~~;8BAET,cAAA,KAACxB;~~wBAAKiD~~,~~MAAMnD~~;;;8BAEd,~~KAACG~~,~~QAAQiD~~,OAAO;8BAChB,~~KAAC/C~~;~~oBACCgD~~,UAAU1B;oBACVC,OAAO0B,~~SAAS/C~~,~~OAAOgD~~,aAAa,CAAC,cAAcC,KAAK;;;;;AAKlE,EAAE;AAEF,~~eAAelD~~,eAAe"}
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 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":";AAAA,SAASA,cAAcC,cAAc,QAAQ,gBAAgB;AAC7D,SAAoBC,WAAW,EAAEC,MAAM,QAAQ,QAAQ;AACvD,SAAmBC,MAAM,QAAQ,WAAW;AAC5C,SAASC,MAAMC,IAAI,QAAQ,OAAO;AAElC,SACEC,+BAA+B,EAC/BC,4BAA4B,EAC5BC,8BAA8B,EAC9BC,MAAM,EACNC,SAAS,QACJ,eAAe;AAEtB,SAASC,IAAI,QAAQ,+BAA+B;AACpD,SAASC,OAAO,QAAQ,kCAAkC;AAC1D,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SAASC,eAAe,QAAQ,uBAAuB;AAEvD,OAAO,MAAMC,iBAAiB,CAAC,EAAEC,MAAM,EAAEC,QAAQ,EAAa;IAC5D,MAAMC,UAAUhB,OAAuB;IACvC,MAAMiB,gBAAgBjB,OAAwB;IAE9C,MAAMkB,yBAAyBnB,YAAY;QACzC,MAAMoB,kBAAkBR,mBAAmBG,QAAQ;QACnD,MAAMM,OACJD,iBAAiBE,2BACjB,IAAIC,QAAQ,CAAC,MAAM,CAAC,MAAM,GAAG;QAE/B,OAAOF;IACT,GAAG;QAACN;KAAO;IAEX,MAAMS,aAAaxB,YAAY;QAC7B,MAAMyB,WAAWV,OAAOU,QAAQ,CAAC;QAEjC,OAAOA;IACT,GAAG;QAACV;KAAO;IAEX,MAAMW,mBAAmB1B,YAAY;QACnCe,OACGY,KAAK,GACLC,KAAK,CAACC,WAAW;YAAEC,gBAAgB;QAAM,GACzCC,kBAAkB,CAAC,QACnBC,GAAG;IACR,GAAG;QAACjB;KAAO;IAEX,MAAMkB,qBAAqBjC,YAAY;QACrCe,OACGY,KAAK,GACLC,KAAK,CAACC,WAAW;YAAEC,gBAAgB;QAAM,GACzCC,kBAAkB,CAAC,UACnBC,GAAG;IACR,GAAG;QAACjB;KAAO;IAEX,MAAMmB,oBAAoBlC,YAAY;QACpCe,OACGY,KAAK,GACLC,KAAK,CAACC,WAAW;YAAEC,gBAAgB;QAAM,GACzCC,kBAAkB,CAAC,SACnBC,GAAG;IACR,GAAG;QAACjB;KAAO;IAEX,MAAMoB,gBAAgBnC,YAAY;QAChCe,OACGY,KAAK,GACLC,KAAK,CAACC,WAAW;YAAEC,gBAAgB;QAAM,GACzCM,oBAAoB,CACnBrB,OAAOU,QAAQ,CAAC,cAAc;YAAEY,SAAS;QAAM,KAAK,OAAO,OAE5DL,GAAG;IACR,GAAG;QAACjB;KAAO;IAEX,MAAMuB,gBAAgBtC,YACpB,CAACuC;QACCxB,OACGY,KAAK,GACLC,KAAK,CAACC,WAAW;YAAEC,gBAAgB;QAAM,GACzCU,kBAAkB,CAACD,OACnBP,GAAG;IACR,GACA;QAACjB;KAAO;IAGV,qBACE,KAAChB;QACCgB,QAAQA;QACR0B,WAAW,CAAC,eAAe,EAAErC,OAAO,CAAC;QACrCoB,YAAYA;QACZkB,aAAa;QACbC,cAAc;YACZC,QAAQ;gBAAC;gBAAG;aAAE;YACdC,eAAe;gBACbC,WAAW;oBAAC;wBAAEC,MAAM;wBAAQC,SAAS;oBAAM;iBAAE;YAC/C;YACA7B;YACA8B,UAAU,CAACC;gBACThC,cAAciC,OAAO,GAAGD;YAC1B;YACAlC,UAAU;gBACR,OAAOA,UAAUmC;YACnB;YACAC,SAAS;gBAAClD;aAAO;YACjBA,QAAQ;QACV;kBAEA,cAAA,MAACS,QAAQ0C,OAAO;YAACC,mBAAmB9B;YAAc+B,KAAKtC;;8BACrD,KAACN,QAAQ6C,MAAM;oBACbC,MAAK;oBACLC,SAAQ;oBACRC,QAAQ5C,OAAOU,QAAQ,CAAC,cAAc;wBAAEY,SAAS;oBAAM;oBACvDuB,SAASzB;8BAET,cAAA,KAACzB;wBACCmD,MACE9C,OAAOU,QAAQ,CAAC,cAAc;4BAAEY,SAAS;wBAAM,KAC3C5B,YACAD;;;8BAIV,KAACG,QAAQ6C,MAAM;oBACbC,MAAK;oBACLC,SAAQ;oBACRC,QAAQ5C,OAAOU,QAAQ,CAAC,cAAc;wBAAEqC,OAAO;oBAAO;oBACtDF,SAASlC;8BAET,cAAA,KAAChB;wBAAKmD,MAAMtD;;;8BAEd,KAACI,QAAQ6C,MAAM;oBACbC,MAAK;oBACLC,SAAQ;oBACRC,QAAQ5C,OAAOU,QAAQ,CAAC,cAAc;wBAAEqC,OAAO;oBAAS;oBACxDF,SAAS3B;8BAET,cAAA,KAACvB;wBAAKmD,MAAMxD;;;8BAEd,KAACM,QAAQ6C,MAAM;oBACbC,MAAK;oBACLC,SAAQ;oBACRC,QAAQ5C,OAAOU,QAAQ,CAAC,cAAc;wBAAEqC,OAAO;oBAAQ;oBACvDF,SAAS1B;8BAET,cAAA,KAACxB;wBAAKmD,MAAMvD;;;8BAEd,KAACK,QAAQoD,OAAO;8BAChB,KAAClD;oBACCmD,UAAU1B;oBACVC,OAAO0B,SAASlD,OAAOmD,aAAa,CAAC,cAAcC,KAAK;;;;;AAKlE,EAAE;AAEF,eAAerD,eAAe"}

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

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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,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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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, 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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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"}