payload-richtext-tiptap 0.0.134 → 0.0.136

package/dist/src/body/ArticleBody.d.ts

@@ -2,7 +2,8 @@ type Props = {
     body: any;
     wrapperClassName?: string;
     articleClassName?: string;
+    getVideoAspect?: () => void;
 };
-export declare const ArticleBody: import("react").MemoExoticComponent<({ body, wrapperClassName, articleClassName }: Props) => import("react").JSX.Element>;
+export declare const ArticleBody: import("react").MemoExoticComponent<({ body, wrapperClassName, articleClassName, getVideoAspect, }: Props) => import("react").JSX.Element>;
 export {};
 //# sourceMappingURL=ArticleBody.d.ts.map

package/dist/src/body/ArticleBody.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArticleBody.d.ts","sourceRoot":"","sources":["../../../src/body/ArticleBody.tsx"],"names":[],"mappings":"AAaA,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,GAAG,CAAC;IACV,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AACF,eAAO,MAAM,WAAW,qFACyB,KAAK,iCA2BrD,CAAC"}
+{"version":3,"file":"ArticleBody.d.ts","sourceRoot":"","sources":["../../../src/body/ArticleBody.tsx"],"names":[],"mappings":"AAYA,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,GAAG,CAAC;IACV,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AACF,eAAO,MAAM,WAAW,sGAMnB,KAAK,iCA6BT,CAAC"}

package/dist/src/body/ArticleBody.js

@@ -1,31 +1,32 @@
-'use client';
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo } from 'react';
+import { memo } from "react";
 // import './article-custom.scss';
-import { appendRequiredBlocksMarkerClient } from '../fields/TiptapEditor/extensions/serverside/useAppendRequiredBlocksMarkerClient.js';
-import { ServersideTiptapBody } from '../fields/TiptapEditor/extensions/serverside/ServersideTiptapBody.js';
-import { EmbedContentInlineRenderer } from '../fields/TiptapEditor/extensions/serverside/EmbedContentInlineRenderer.js';
-import { cn } from '../fields/TiptapEditor/lib/utils/index.js';
-const TRT_ARTICLE_BODY_ID = 'TRT-ARTICLE-BODY-ID';
-export const ArticleBody = /*#__PURE__*/ memo(({ body, wrapperClassName, articleClassName })=>{
+import { appendRequiredBlocksMarkerClient } from "../fields/TiptapEditor/extensions/serverside/useAppendRequiredBlocksMarkerClient.js";
+import { ServersideTiptapBody } from "../fields/TiptapEditor/extensions/serverside/ServersideTiptapBody.js";
+import { EmbedContentInlineRenderer } from "../fields/TiptapEditor/extensions/serverside/EmbedContentInlineRenderer.js";
+import { cn } from "../fields/TiptapEditor/lib/utils/index.js";
+const TRT_ARTICLE_BODY_ID = "TRT-ARTICLE-BODY-ID";
+export const ArticleBody = /*#__PURE__*/ memo(({ body, wrapperClassName, articleClassName, getVideoAspect })=>{
     const json = appendRequiredBlocksMarkerClient(body);
     if (!json) return null;
     return /*#__PURE__*/ _jsxs("div", {
-        className: cn('text-grey-12 lg:grid trt-article-body-wrapper trt-article-page-wrapper w-full', wrapperClassName),
+        className: cn("text-grey-12 lg:grid trt-article-body-wrapper trt-article-page-wrapper w-full", wrapperClassName),
         children: [
             /*#__PURE__*/ _jsx("div", {}),
             /*#__PURE__*/ _jsx("div", {
                 id: TRT_ARTICLE_BODY_ID,
                 className: "w-full flex flex-col",
                 children: /*#__PURE__*/ _jsx("div", {
-                    className: cn('!selection:text-purple-900 font-notosans lg:text-xl lg:leading-8 md:text-lg md:leading-[30px] text-base', articleClassName),
+                    className: cn("!selection:text-purple-900 font-notosans lg:text-xl lg:leading-8 md:text-lg md:leading-[30px] text-base", articleClassName),
                     children: /*#__PURE__*/ _jsx(ServersideTiptapBody, {
                         body: json
                     })
                 })
             }),
             /*#__PURE__*/ _jsx(EmbedContentInlineRenderer, {
-                body: json
+                body: json,
+                getVideoAspect: getVideoAspect
             })
         ]
     });

package/dist/src/body/ArticleBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/body/ArticleBody.tsx"],"sourcesContent":["'use client'\r\n\r\nimport { memo } from 'react';\r\n// import './article-custom.scss';\r\n\r\n\r\nimport { appendRequiredBlocksMarkerClient } from '../fields/TiptapEditor/extensions/serverside/useAppendRequiredBlocksMarkerClient.js';\r\nimport { ServersideTiptapBody } from '../fields/TiptapEditor/extensions/serverside/ServersideTiptapBody.js';\r\nimport { EmbedContentInlineRenderer } from '../fields/TiptapEditor/extensions/serverside/EmbedContentInlineRenderer.js';\r\nimport { cn } from '../fields/TiptapEditor/lib/utils/index.js';\r\n\r\nconst TRT_ARTICLE_BODY_ID = 'TRT-ARTICLE-BODY-ID';\r\n\r\ntype Props = {\r\n  body: any;\r\n  wrapperClassName?: string;\r\n  articleClassName?: string;\r\n};\r\nexport const ArticleBody = memo(\r\n  ({ body, wrapperClassName, articleClassName }: Props) => {\r\n    const json = appendRequiredBlocksMarkerClient(body);\r\n    if (!json) return null;\r\n    return (\r\n      <div\r\n        className={cn(\r\n          'text-grey-12 lg:grid trt-article-body-wrapper trt-article-page-wrapper w-full',\r\n          wrapperClassName,\r\n        )}\r\n      >\r\n        <div />\r\n        <div id={TRT_ARTICLE_BODY_ID} className=\"w-full flex flex-col\">\r\n\r\n          <div\r\n            className={cn(\r\n              '!selection:text-purple-900 font-notosans lg:text-xl lg:leading-8 md:text-lg md:leading-[30px] text-base',\r\n              articleClassName,\r\n            )}\r\n          >\r\n            <ServersideTiptapBody body={json} />\r\n          </div>\r\n        </div>\r\n        <EmbedContentInlineRenderer body={json} />\r\n      </div>\r\n    );\r\n  },\r\n  (prev, next) => prev.body?.content?.length === next.body?.content?.length,\r\n);\r\n"],"names":["memo","appendRequiredBlocksMarkerClient","ServersideTiptapBody","EmbedContentInlineRenderer","cn","TRT_ARTICLE_BODY_ID","ArticleBody","body","wrapperClassName","articleClassName","json","div","className","id","prev","next","content","length"],"mappings":"AAAA;;AAEA,SAASA,IAAI,QAAQ,QAAQ;AAC7B,kCAAkC;AAGlC,SAASC,gCAAgC,QAAQ,sFAAsF;AACvI,SAASC,oBAAoB,QAAQ,uEAAuE;AAC5G,SAASC,0BAA0B,QAAQ,6EAA6E;AACxH,SAASC,EAAE,QAAQ,4CAA4C;AAE/D,MAAMC,sBAAsB;AAO5B,OAAO,MAAMC,4BAAcN,KACzB,CAAC,EAAEO,IAAI,EAAEC,gBAAgB,EAAEC,gBAAgB,EAAS;IAClD,MAAMC,OAAOT,iCAAiCM;IAC9C,IAAI,CAACG,MAAM,OAAO;IAClB,qBACE,MAACC;QACCC,WAAWR,GACT,iFACAI;;0BAGF,KAACG;0BACD,KAACA;gBAAIE,IAAIR;gBAAqBO,WAAU;0BAEtC,cAAA,KAACD;oBACCC,WAAWR,GACT,2GACAK;8BAGF,cAAA,KAACP;wBAAqBK,MAAMG;;;;0BAGhC,KAACP;gBAA2BI,MAAMG;;;;AAGxC,GACA,CAACI,MAAMC,OAASD,KAAKP,IAAI,EAAES,SAASC,WAAWF,KAAKR,IAAI,EAAES,SAASC,QACnE"}
+{"version":3,"sources":["../../../src/body/ArticleBody.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { memo } from \"react\";\r\n// import './article-custom.scss';\r\n\r\nimport { appendRequiredBlocksMarkerClient } from \"../fields/TiptapEditor/extensions/serverside/useAppendRequiredBlocksMarkerClient.js\";\r\nimport { ServersideTiptapBody } from \"../fields/TiptapEditor/extensions/serverside/ServersideTiptapBody.js\";\r\nimport { EmbedContentInlineRenderer } from \"../fields/TiptapEditor/extensions/serverside/EmbedContentInlineRenderer.js\";\r\nimport { cn } from \"../fields/TiptapEditor/lib/utils/index.js\";\r\n\r\nconst TRT_ARTICLE_BODY_ID = \"TRT-ARTICLE-BODY-ID\";\r\n\r\ntype Props = {\r\n  body: any;\r\n  wrapperClassName?: string;\r\n  articleClassName?: string;\r\n  getVideoAspect?: () => void;\r\n};\r\nexport const ArticleBody = memo(\r\n  ({\r\n    body,\r\n    wrapperClassName,\r\n    articleClassName,\r\n    getVideoAspect,\r\n  }: Props) => {\r\n    const json = appendRequiredBlocksMarkerClient(body);\r\n    if (!json) return null;\r\n    return (\r\n      <div\r\n        className={cn(\r\n          \"text-grey-12 lg:grid trt-article-body-wrapper trt-article-page-wrapper w-full\",\r\n          wrapperClassName\r\n        )}\r\n      >\r\n        <div />\r\n        <div id={TRT_ARTICLE_BODY_ID} className=\"w-full flex flex-col\">\r\n          <div\r\n            className={cn(\r\n              \"!selection:text-purple-900 font-notosans lg:text-xl lg:leading-8 md:text-lg md:leading-[30px] text-base\",\r\n              articleClassName\r\n            )}\r\n          >\r\n            <ServersideTiptapBody body={json} />\r\n          </div>\r\n        </div>\r\n        <EmbedContentInlineRenderer\r\n          body={json}\r\n          getVideoAspect={getVideoAspect}\r\n        />\r\n      </div>\r\n    );\r\n  },\r\n  (prev, next) => prev.body?.content?.length === next.body?.content?.length\r\n);\r\n"],"names":["memo","appendRequiredBlocksMarkerClient","ServersideTiptapBody","EmbedContentInlineRenderer","cn","TRT_ARTICLE_BODY_ID","ArticleBody","body","wrapperClassName","articleClassName","getVideoAspect","json","div","className","id","prev","next","content","length"],"mappings":"AAAA;;AAEA,SAASA,IAAI,QAAQ,QAAQ;AAC7B,kCAAkC;AAElC,SAASC,gCAAgC,QAAQ,sFAAsF;AACvI,SAASC,oBAAoB,QAAQ,uEAAuE;AAC5G,SAASC,0BAA0B,QAAQ,6EAA6E;AACxH,SAASC,EAAE,QAAQ,4CAA4C;AAE/D,MAAMC,sBAAsB;AAQ5B,OAAO,MAAMC,4BAAcN,KACzB,CAAC,EACCO,IAAI,EACJC,gBAAgB,EAChBC,gBAAgB,EAChBC,cAAc,EACR;IACN,MAAMC,OAAOV,iCAAiCM;IAC9C,IAAI,CAACI,MAAM,OAAO;IAClB,qBACE,MAACC;QACCC,WAAWT,GACT,iFACAI;;0BAGF,KAACI;0BACD,KAACA;gBAAIE,IAAIT;gBAAqBQ,WAAU;0BACtC,cAAA,KAACD;oBACCC,WAAWT,GACT,2GACAK;8BAGF,cAAA,KAACP;wBAAqBK,MAAMI;;;;0BAGhC,KAACR;gBACCI,MAAMI;gBACND,gBAAgBA;;;;AAIxB,GACA,CAACK,MAAMC,OAASD,KAAKR,IAAI,EAAEU,SAASC,WAAWF,KAAKT,IAAI,EAAEU,SAASC,QACnE"}

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

@@ -0,0 +1,4 @@
+export declare const ImageBlockViewClientside: ({ content }: {
+    content: any;
+}) => import("react").JSX.Element;
+//# sourceMappingURL=ImageBlockViewClientside.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageBlockViewClientside.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/extensions/ImageBlock/components/ImageBlockViewClientside.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,wBAAwB;;iCA+BpC,CAAC"}

package/dist/src/fields/TiptapEditor/extensions/ImageBlock/components/ImageBlockViewClientside.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "../../../lib/utils/index.js";
+import Image from "next/image.js";
+export const ImageBlockViewClientside = ({ content })=>{
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: cn("relative object-cover", {}),
+                style: {
+                    width: content.attrs.width || "100%"
+                },
+                children: /*#__PURE__*/ _jsx(Image, {
+                    className: "rounded object-cover",
+                    src: content.attrs.src,
+                    alt: content.attrs.alt || content.attrs.caption,
+                    width: 800,
+                    height: 600
+                })
+            }),
+            content.attrs?.caption ? /*#__PURE__*/ _jsx("p", {
+                className: cn("tiptap-image-caption", "pt-2 font-sf text-sm font-light text-grey-7 mx-6 sm:mx-0 line-clamp-2"),
+                children: content.attrs?.caption
+            }) : null
+        ]
+    });
+};
+
+//# sourceMappingURL=ImageBlockViewClientside.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/extensions/ImageBlock/components/ImageBlockViewClientside.tsx"],"sourcesContent":["import { cn } from \"../../../lib/utils/index.js\";\nimport { useGetAssetsAspectRatio } from \"../../serverside/getAssetsAspectRatio.js\";\nimport { useEffect } from \"react\";\nimport Image from \"next/image.js\";\n\nexport const ImageBlockViewClientside = ({ content }) => {\n  return (\n    <>\n      <div\n        className={cn(\"relative object-cover\", {\n        })}\n        style={{\n          width: content.attrs.width || \"100%\",\n        }}\n      >\n        {/* @ts-ignore */}\n        <Image\n          className=\"rounded object-cover\"\n          src={content.attrs.src}\n          alt={content.attrs.alt || content.attrs.caption}\n          width={800}\n          height={600}\n        />\n      </div>\n      {content.attrs?.caption ? (\n        <p\n          className={cn(\n            \"tiptap-image-caption\",\n            \"pt-2 font-sf text-sm font-light text-grey-7 mx-6 sm:mx-0 line-clamp-2\"\n          )}\n        >\n          {content.attrs?.caption}\n        </p>\n      ) : null}\n    </>\n  );\n};\n"],"names":["cn","Image","ImageBlockViewClientside","content","div","className","style","width","attrs","src","alt","caption","height","p"],"mappings":";AAAA,SAASA,EAAE,QAAQ,8BAA8B;AAGjD,OAAOC,WAAW,gBAAgB;AAElC,OAAO,MAAMC,2BAA2B,CAAC,EAAEC,OAAO,EAAE;IAClD,qBACE;;0BACE,KAACC;gBACCC,WAAWL,GAAG,yBAAyB,CACvC;gBACAM,OAAO;oBACLC,OAAOJ,QAAQK,KAAK,CAACD,KAAK,IAAI;gBAChC;0BAGA,cAAA,KAACN;oBACCI,WAAU;oBACVI,KAAKN,QAAQK,KAAK,CAACC,GAAG;oBACtBC,KAAKP,QAAQK,KAAK,CAACE,GAAG,IAAIP,QAAQK,KAAK,CAACG,OAAO;oBAC/CJ,OAAO;oBACPK,QAAQ;;;YAGXT,QAAQK,KAAK,EAAEG,wBACd,KAACE;gBACCR,WAAWL,GACT,wBACA;0BAGDG,QAAQK,KAAK,EAAEG;iBAEhB;;;AAGV,EAAE"}

package/dist/src/fields/TiptapEditor/extensions/ImageUpload/getImageActualSize.d.ts

@@ -1,5 +1,5 @@
 import { AssetReturnType } from "../../types.js";
-export declare function getImageActualSize(asset: AssetReturnType): {
+export declare function getAssetActualSize(asset: AssetReturnType): {
     actualWidth: number;
     actualHeight: number;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"getImageActualSize.d.ts","sourceRoot":"","sources":["../../../../../../src/fields/TiptapEditor/extensions/ImageUpload/getImageActualSize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEjD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,eAAe;;;EAOxD"}
+{"version":3,"file":"getImageActualSize.d.ts","sourceRoot":"","sources":["../../../../../../src/fields/TiptapEditor/extensions/ImageUpload/getImageActualSize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEjD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,eAAe;;;EAQxD"}

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

@@ -1,10 +1,14 @@
-export function getImageActualSize(asset) {
+export function getAssetActualSize(asset) {
     if (asset.width && asset.height) {
         return {
             actualWidth: asset.width,
             actualHeight: asset.height
         };
     }
+    return {
+        actualWidth: 0,
+        actualHeight: 0
+    };
 }
 
 //# sourceMappingURL=getImageActualSize.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/ImageUpload/getImageActualSize.ts"],"sourcesContent":["import { AssetReturnType } from \"../../types.js\";\n\nexport function getImageActualSize(asset: AssetReturnType) {\n  if (asset.width && asset.height) {\n    return {\n      actualWidth: asset.width,\n      actualHeight: asset.height,\n    };\n  }\n}\n"],"names":["getImageActualSize","asset","width","height","actualWidth","actualHeight"],"mappings":"AAEA,OAAO,SAASA,mBAAmBC,KAAsB;IACvD,IAAIA,MAAMC,KAAK,IAAID,MAAME,MAAM,EAAE;QAC/B,OAAO;YACLC,aAAaH,MAAMC,KAAK;YACxBG,cAAcJ,MAAME,MAAM;QAC5B;IACF;AACF"}
+{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/ImageUpload/getImageActualSize.ts"],"sourcesContent":["import { AssetReturnType } from \"../../types.js\";\n\nexport function getAssetActualSize(asset: AssetReturnType) {\n  if (asset.width && asset.height) {\n    return {\n      actualWidth: asset.width,\n      actualHeight: asset.height,\n    };\n  }\n  return { actualWidth: 0, actualHeight: 0 };\n}\n"],"names":["getAssetActualSize","asset","width","height","actualWidth","actualHeight"],"mappings":"AAEA,OAAO,SAASA,mBAAmBC,KAAsB;IACvD,IAAIA,MAAMC,KAAK,IAAID,MAAME,MAAM,EAAE;QAC/B,OAAO;YACLC,aAAaH,MAAMC,KAAK;YACxBG,cAAcJ,MAAME,MAAM;QAC5B;IACF;IACA,OAAO;QAAEC,aAAa;QAAGC,cAAc;IAAE;AAC3C"}

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":"AACA,OAAO,EAAE,MAAM,EAAmB,MAAM,eAAe,CAAC;AAIxD,OAAO,EAEL,SAAS,EACT,eAAe,EAChB,MAAM,kCAAkC,CAAC;AAE1C,eAAO,MAAM,kBAAkB,uBAAwB,eAAe,iCAKjE;IACD,MAAM,EAAE,MAAM,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE;QAAE,KAAK,EAAE;YAAE,IAAI,CAAC,EAAE,SAAS,CAAA;SAAE,CAAA;KAAE,CAAC;CACvC,gCA+EF,CAAC"}
+{"version":3,"file":"ImageUpload.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/extensions/ImageUpload/view/ImageUpload.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAmB,MAAM,eAAe,CAAC;AAIxD,OAAO,EAEL,SAAS,EACT,eAAe,EAChB,MAAM,kCAAkC,CAAC;AAE1C,eAAO,MAAM,kBAAkB,uBAAwB,eAAe,iCAKjE;IACD,MAAM,EAAE,MAAM,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE;QAAE,KAAK,EAAE;YAAE,IAAI,CAAC,EAAE,SAAS,CAAA;SAAE,CAAA;KAAE,CAAC;CACvC,gCAkFF,CAAC"}

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

@@ -4,7 +4,7 @@ import { NodeViewWrapper } from "@tiptap/react";
 import i18next from "i18next";
 import { ImagePlus } from "lucide-react";
 import { useCallback, useState } from "react";
-import { getImageActualSize } from "../getImageActualSize.js";
+import { getAssetActualSize } from "../getImageActualSize.js";
 export const ImageUploadBuilder = (openAssetHQHandler)=>{
     const ImageUpload = ({ getPos, editor, node })=>{
         const [done, setDone] = useState(false);
@@ -14,7 +14,7 @@ export const ImageUploadBuilder = (openAssetHQHandler)=>{
                 if (i18next.language !== "en" && !!asset.title_locale[i18next.language.toUpperCase()]) {
                     title = asset.title_locale[i18next.language.toUpperCase()];
                 }
-                const { actualWidth, actualHeight } = getImageActualSize(asset);
+                const { actualWidth, actualHeight } = getAssetActualSize(asset);
                 if (asset.type === "IMAGE") {
                     editor.chain().focus().setImageBlock({
                         src: asset?.optimizedImageUrl || asset.fullUrl,
@@ -34,12 +34,15 @@ export const ImageUploadBuilder = (openAssetHQHandler)=>{
                         assetId: asset.id,
                         playlistUrl: asset.playlistUrl
                     });
+                    const { actualHeight, actualWidth } = getAssetActualSize(asset);
                     editor.chain().focus().setVideoBlock({
                         src: asset.videoUrl,
                         poster: asset.fullUrl,
                         assetId: asset.id,
                         playlistUrl: asset.playlistUrl,
-                        title: title
+                        title: title,
+                        actualHeight,
+                        actualWidth
                     }).deleteRange({
                         from: getPos(),
                         to: getPos()

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":["\"use client\";\nimport { Editor, NodeViewWrapper } from \"@tiptap/react\";\nimport i18next from \"i18next\";\nimport { ImagePlus } from \"lucide-react\";\nimport { useCallback, useState } from \"react\";\nimport {\n  AssetReturnType,\n  AssetType,\n  openAssetHQType,\n} from \"src/fields/TiptapEditor/types.js\";\nimport { getImageActualSize } from \"../getImageActualSize.js\";\nexport const ImageUploadBuilder = (openAssetHQHandler: openAssetHQType) => {\n  const ImageUpload = ({\n    getPos,\n    editor,\n    node,\n  }: {\n    getPos: () => number;\n    editor: Editor;\n    node: { attrs: { type?: AssetType } };\n  }) => {\n    const [done, setDone] = useState(false);\n    const onUpload = useCallback(\n      (asset: AssetReturnType) => {\n        if (asset && !done) {\n          let title = asset.title;\n          if (\n            i18next.language !== \"en\" &&\n            !!asset.title_locale[i18next.language.toUpperCase()]\n          ) {\n            title = asset.title_locale[i18next.language.toUpperCase()];\n          }\n          const { actualWidth, actualHeight } = getImageActualSize(asset);\n          if (asset.type === \"IMAGE\") {\n            editor\n              .chain()\n              .focus()\n              .setImageBlock({\n                src: asset?.optimizedImageUrl || asset.fullUrl,\n                assetId: asset.id,\n                caption: title,\n                actualWidth: actualWidth,\n                actualHeight: actualHeight,\n              })\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                title: title,\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, null, node?.attrs?.type ?? \"image\");\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","i18next","ImagePlus","useCallback","useState","getImageActualSize","ImageUploadBuilder","openAssetHQHandler","ImageUpload","getPos","editor","node","done","setDone","onUpload","asset","title","language","title_locale","toUpperCase","actualWidth","actualHeight","type","chain","focus","setImageBlock","src","optimizedImageUrl","fullUrl","assetId","id","caption","deleteRange","from","to","run","console","log","videoUrl","poster","playlistUrl","setVideoBlock","info","div","className","data-drag-handle","a","href","onClick","e","preventDefault","attrs"],"mappings":"AAAA;;AACA,SAAiBA,eAAe,QAAQ,gBAAgB;AACxD,OAAOC,aAAa,UAAU;AAC9B,SAASC,SAAS,QAAQ,eAAe;AACzC,SAASC,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAM9C,SAASC,kBAAkB,QAAQ,2BAA2B;AAC9D,OAAO,MAAMC,qBAAqB,CAACC;IACjC,MAAMC,cAAc,CAAC,EACnBC,MAAM,EACNC,MAAM,EACNC,IAAI,EAKL;QACC,MAAM,CAACC,MAAMC,QAAQ,GAAGT,SAAS;QACjC,MAAMU,WAAWX,YACf,CAACY;YACC,IAAIA,SAAS,CAACH,MAAM;gBAClB,IAAII,QAAQD,MAAMC,KAAK;gBACvB,IACEf,QAAQgB,QAAQ,KAAK,QACrB,CAAC,CAACF,MAAMG,YAAY,CAACjB,QAAQgB,QAAQ,CAACE,WAAW,GAAG,EACpD;oBACAH,QAAQD,MAAMG,YAAY,CAACjB,QAAQgB,QAAQ,CAACE,WAAW,GAAG;gBAC5D;gBACA,MAAM,EAAEC,WAAW,EAAEC,YAAY,EAAE,GAAGhB,mBAAmBU;gBACzD,IAAIA,MAAMO,IAAI,KAAK,SAAS;oBAC1BZ,OACGa,KAAK,GACLC,KAAK,GACLC,aAAa,CAAC;wBACbC,KAAKX,OAAOY,qBAAqBZ,MAAMa,OAAO;wBAC9CC,SAASd,MAAMe,EAAE;wBACjBC,SAASf;wBACTI,aAAaA;wBACbC,cAAcA;oBAChB,GACCW,WAAW,CAAC;wBAAEC,MAAMxB;wBAAUyB,IAAIzB;oBAAS,GAC3Ce,KAAK,GACLW,GAAG;oBACNtB,QAAQ;gBACV,OAAO;oBACLuB,QAAQC,GAAG,CAAC,iCAAiC;wBAC3CX,KAAKX,MAAMuB,QAAQ;wBACnBC,QAAQxB,MAAMa,OAAO;wBACrBC,SAASd,MAAMe,EAAE;wBACjBU,aAAazB,MAAMyB,WAAW;oBAChC;oBACA9B,OACGa,KAAK,GACLC,KAAK,GACLiB,aAAa,CAAC;wBACbf,KAAKX,MAAMuB,QAAQ;wBACnBC,QAAQxB,MAAMa,OAAO;wBACrBC,SAASd,MAAMe,EAAE;wBACjBU,aAAazB,MAAMyB,WAAW;wBAC9BxB,OAAOA;oBACT,GACCgB,WAAW,CAAC;wBAAEC,MAAMxB;wBAAUyB,IAAIzB;oBAAS,GAC3Ce,KAAK,GACLW,GAAG;oBACNtB,QAAQ;gBACV;YACF,OAAO;gBACLuB,QAAQM,IAAI,CACV;YAEJ;QACF,GACA;YAACjC;YAAQC;SAAO;QAGlB,qBACE,KAACV;sBACC,cAAA,KAAC2C;gBAAIC,WAAU;gBAAUC,kBAAgB;0BACvC,cAAA,MAACC;oBACCC,MAAK;oBACLH,WAAU;oBACVI,SAAS,CAACC;wBACRA,EAAEC,cAAc;wBAChB3C,mBAAmBO,UAAU,MAAMH,MAAMwC,OAAO7B,QAAQ;oBAC1D;;sCAEA,KAACpB;4BAAU0C,WAAU;;wBAAS;;;;;IAMxC;IAEA,OAAOpC;AACT,EAAE"}
+{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/extensions/ImageUpload/view/ImageUpload.tsx"],"sourcesContent":["\"use client\";\nimport { Editor, NodeViewWrapper } from \"@tiptap/react\";\nimport i18next from \"i18next\";\nimport { ImagePlus } from \"lucide-react\";\nimport { useCallback, useState } from \"react\";\nimport {\n  AssetReturnType,\n  AssetType,\n  openAssetHQType,\n} from \"src/fields/TiptapEditor/types.js\";\nimport { getAssetActualSize } from \"../getImageActualSize.js\";\nexport const ImageUploadBuilder = (openAssetHQHandler: openAssetHQType) => {\n  const ImageUpload = ({\n    getPos,\n    editor,\n    node,\n  }: {\n    getPos: () => number;\n    editor: Editor;\n    node: { attrs: { type?: AssetType } };\n  }) => {\n    const [done, setDone] = useState(false);\n    const onUpload = useCallback(\n      (asset: AssetReturnType) => {\n        if (asset && !done) {\n          let title = asset.title;\n          if (\n            i18next.language !== \"en\" &&\n            !!asset.title_locale[i18next.language.toUpperCase()]\n          ) {\n            title = asset.title_locale[i18next.language.toUpperCase()];\n          }\n          const { actualWidth, actualHeight } = getAssetActualSize(asset);\n          if (asset.type === \"IMAGE\") {\n            editor\n              .chain()\n              .focus()\n              .setImageBlock({\n                src: asset?.optimizedImageUrl || asset.fullUrl,\n                assetId: asset.id,\n                caption: title,\n                actualWidth: actualWidth,\n                actualHeight: actualHeight,\n              })\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            const { actualHeight, actualWidth } = getAssetActualSize(asset);\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                title: title,\n                actualHeight,\n                actualWidth,\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, null, node?.attrs?.type ?? \"image\");\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","i18next","ImagePlus","useCallback","useState","getAssetActualSize","ImageUploadBuilder","openAssetHQHandler","ImageUpload","getPos","editor","node","done","setDone","onUpload","asset","title","language","title_locale","toUpperCase","actualWidth","actualHeight","type","chain","focus","setImageBlock","src","optimizedImageUrl","fullUrl","assetId","id","caption","deleteRange","from","to","run","console","log","videoUrl","poster","playlistUrl","setVideoBlock","info","div","className","data-drag-handle","a","href","onClick","e","preventDefault","attrs"],"mappings":"AAAA;;AACA,SAAiBA,eAAe,QAAQ,gBAAgB;AACxD,OAAOC,aAAa,UAAU;AAC9B,SAASC,SAAS,QAAQ,eAAe;AACzC,SAASC,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAM9C,SAASC,kBAAkB,QAAQ,2BAA2B;AAC9D,OAAO,MAAMC,qBAAqB,CAACC;IACjC,MAAMC,cAAc,CAAC,EACnBC,MAAM,EACNC,MAAM,EACNC,IAAI,EAKL;QACC,MAAM,CAACC,MAAMC,QAAQ,GAAGT,SAAS;QACjC,MAAMU,WAAWX,YACf,CAACY;YACC,IAAIA,SAAS,CAACH,MAAM;gBAClB,IAAII,QAAQD,MAAMC,KAAK;gBACvB,IACEf,QAAQgB,QAAQ,KAAK,QACrB,CAAC,CAACF,MAAMG,YAAY,CAACjB,QAAQgB,QAAQ,CAACE,WAAW,GAAG,EACpD;oBACAH,QAAQD,MAAMG,YAAY,CAACjB,QAAQgB,QAAQ,CAACE,WAAW,GAAG;gBAC5D;gBACA,MAAM,EAAEC,WAAW,EAAEC,YAAY,EAAE,GAAGhB,mBAAmBU;gBACzD,IAAIA,MAAMO,IAAI,KAAK,SAAS;oBAC1BZ,OACGa,KAAK,GACLC,KAAK,GACLC,aAAa,CAAC;wBACbC,KAAKX,OAAOY,qBAAqBZ,MAAMa,OAAO;wBAC9CC,SAASd,MAAMe,EAAE;wBACjBC,SAASf;wBACTI,aAAaA;wBACbC,cAAcA;oBAChB,GACCW,WAAW,CAAC;wBAAEC,MAAMxB;wBAAUyB,IAAIzB;oBAAS,GAC3Ce,KAAK,GACLW,GAAG;oBACNtB,QAAQ;gBACV,OAAO;oBACLuB,QAAQC,GAAG,CAAC,iCAAiC;wBAC3CX,KAAKX,MAAMuB,QAAQ;wBACnBC,QAAQxB,MAAMa,OAAO;wBACrBC,SAASd,MAAMe,EAAE;wBACjBU,aAAazB,MAAMyB,WAAW;oBAChC;oBACA,MAAM,EAAEnB,YAAY,EAAED,WAAW,EAAE,GAAGf,mBAAmBU;oBACzDL,OACGa,KAAK,GACLC,KAAK,GACLiB,aAAa,CAAC;wBACbf,KAAKX,MAAMuB,QAAQ;wBACnBC,QAAQxB,MAAMa,OAAO;wBACrBC,SAASd,MAAMe,EAAE;wBACjBU,aAAazB,MAAMyB,WAAW;wBAC9BxB,OAAOA;wBACPK;wBACAD;oBACF,GACCY,WAAW,CAAC;wBAAEC,MAAMxB;wBAAUyB,IAAIzB;oBAAS,GAC3Ce,KAAK,GACLW,GAAG;oBACNtB,QAAQ;gBACV;YACF,OAAO;gBACLuB,QAAQM,IAAI,CACV;YAEJ;QACF,GACA;YAACjC;YAAQC;SAAO;QAGlB,qBACE,KAACV;sBACC,cAAA,KAAC2C;gBAAIC,WAAU;gBAAUC,kBAAgB;0BACvC,cAAA,MAACC;oBACCC,MAAK;oBACLH,WAAU;oBACVI,SAAS,CAACC;wBACRA,EAAEC,cAAc;wBAChB3C,mBAAmBO,UAAU,MAAMH,MAAMwC,OAAO7B,QAAQ;oBAC1D;;sCAEA,KAACpB;4BAAU0C,WAAU;;wBAAS;;;;;IAMxC;IAEA,OAAOpC;AACT,EAAE"}

package/dist/src/fields/TiptapEditor/extensions/LinkPreview/menus/linkPreviewMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"linkPreviewMenu.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/extensions/LinkPreview/menus/linkPreviewMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAI3C,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAI7D,OAAO,EAAE,qBAAqB,EAAE,MAAM,wDAAwD,CAAC;AAE/F,eAAO,MAAM,gBAAgB,6CAI1B,SAAS,GAAG;IAAE,iBAAiB,EAAE,qBAAqB,CAAA;CAAE,sBAmC1D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"linkPreviewMenu.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/extensions/LinkPreview/menus/linkPreviewMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAI3C,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAI7D,OAAO,EAAE,qBAAqB,EAAE,MAAM,wDAAwD,CAAC;AAE/F,eAAO,MAAM,gBAAgB,6CAI1B,SAAS,GAAG;IAAE,iBAAiB,EAAE,qBAAqB,CAAA;CAAE,sBAkC1D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/src/fields/TiptapEditor/extensions/LinkPreview/menus/linkPreviewMenu.js

@@ -13,7 +13,6 @@ export const ILinkPreviewMenu = ({ editor, appendTo, fetchSiteMetadata })=>{
     const onSetLink = useCallback(async (src)=>{
         if (fetchSiteMetadata) {
             const metadata = await fetchSiteMetadata(src);
-            console.log(src, metadata);
             editor.chain().focus().setLinkPreview(src, metadata).run();
         }
     }, [

package/dist/src/fields/TiptapEditor/extensions/LinkPreview/menus/linkPreviewMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/extensions/LinkPreview/menus/linkPreviewMenu.tsx"],"sourcesContent":["import { BubbleMenu as BaseBubbleMenu } from \"@tiptap/react\";\nimport React, { useCallback } from \"react\";\nimport { sticky } from \"tippy.js\";\nimport { v4 as uuid } from \"uuid\";\n\nimport { MenuProps } from \"../../../features/menus/types.js\";\nimport { Toolbar } from \"../../../features/ui/Toolbar.js\";\nimport i18next from \"i18next\";\nimport { LinkPreviewEditorPanel } from \"../LinkPreviewEditorPanel.js\";\nimport { FetchSiteMetadataType } from \"src/fields/TiptapEditor/features/BlockEditor/types.jsx\";\n\nexport const ILinkPreviewMenu = ({\n  editor,\n  appendTo,\n  fetchSiteMetadata,\n}: MenuProps & { fetchSiteMetadata: FetchSiteMetadataType }) => {\n  const shouldShow = useCallback(() => {\n    const isLinkPreview = editor.isActive(\"linkPreview\");\n    return isLinkPreview;\n  }, [editor]);\n\n  const onSetLink = useCallback(\n    async (src: string) => {\n      if (fetchSiteMetadata) {\n        const metadata = await fetchSiteMetadata(src);\n        console.log(src, metadata);\n        editor.chain().focus().setLinkPreview(src, metadata).run();\n      }\n    },\n    [editor]\n  );\n  return (\n    <BaseBubbleMenu\n      editor={editor}\n      pluginKey=\"linkPreview\"\n      shouldShow={shouldShow}\n      tippyOptions={{ popperOptions: { placement: \"top-start\" } }}\n      updateDelay={100}\n    >\n      <Toolbar.Button type=\"button\">\n        <LinkPreviewEditorPanel\n          onSetLink={onSetLink}\n          // @ts-ignore\n          initialSrcLink={\n            editor?.getAttributes(\"linkPreview\")?.editorValue ?? \"\"\n          }\n        />\n      </Toolbar.Button>\n    </BaseBubbleMenu>\n  );\n};\n\nexport default ILinkPreviewMenu;\n"],"names":["BubbleMenu","BaseBubbleMenu","React","useCallback","Toolbar","LinkPreviewEditorPanel","ILinkPreviewMenu","editor","appendTo","fetchSiteMetadata","shouldShow","isLinkPreview","isActive","onSetLink","src","metadata","console","log","chain","focus","setLinkPreview","run","pluginKey","tippyOptions","popperOptions","placement","updateDelay","Button","type","initialSrcLink","getAttributes","editorValue"],"mappings":";AAAA,SAASA,cAAcC,cAAc,QAAQ,gBAAgB;AAC7D,OAAOC,SAASC,WAAW,QAAQ,QAAQ;AAK3C,SAASC,OAAO,QAAQ,kCAAkC;AAE1D,SAASC,sBAAsB,QAAQ,+BAA+B;AAGtE,OAAO,MAAMC,mBAAmB,CAAC,EAC/BC,MAAM,EACNC,QAAQ,EACRC,iBAAiB,EACwC;IACzD,MAAMC,aAAaP,YAAY;QAC7B,MAAMQ,gBAAgBJ,OAAOK,QAAQ,CAAC;QACtC,OAAOD;IACT,GAAG;QAACJ;KAAO;IAEX,MAAMM,YAAYV,YAChB,OAAOW;QACL,IAAIL,mBAAmB;YACrB,MAAMM,WAAW,MAAMN,kBAAkBK;YACzCE,QAAQC,GAAG,CAACH,KAAKC;YACjBR,OAAOW,KAAK,GAAGC,KAAK,GAAGC,cAAc,CAACN,KAAKC,UAAUM,GAAG;QAC1D;IACF,GACA;QAACd;KAAO;IAEV,qBACE,KAACN;QACCM,QAAQA;QACRe,WAAU;QACVZ,YAAYA;QACZa,cAAc;YAAEC,eAAe;gBAAEC,WAAW;YAAY;QAAE;QAC1DC,aAAa;kBAEb,cAAA,KAACtB,QAAQuB,MAAM;YAACC,MAAK;sBACnB,cAAA,KAACvB;gBACCQ,WAAWA;gBACX,aAAa;gBACbgB,gBACEtB,QAAQuB,cAAc,gBAAgBC,eAAe;;;;AAMjE,EAAE;AAEF,eAAezB,iBAAiB"}
+{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/extensions/LinkPreview/menus/linkPreviewMenu.tsx"],"sourcesContent":["import { BubbleMenu as BaseBubbleMenu } from \"@tiptap/react\";\nimport React, { useCallback } from \"react\";\nimport { sticky } from \"tippy.js\";\nimport { v4 as uuid } from \"uuid\";\n\nimport { MenuProps } from \"../../../features/menus/types.js\";\nimport { Toolbar } from \"../../../features/ui/Toolbar.js\";\nimport i18next from \"i18next\";\nimport { LinkPreviewEditorPanel } from \"../LinkPreviewEditorPanel.js\";\nimport { FetchSiteMetadataType } from \"src/fields/TiptapEditor/features/BlockEditor/types.jsx\";\n\nexport const ILinkPreviewMenu = ({\n  editor,\n  appendTo,\n  fetchSiteMetadata,\n}: MenuProps & { fetchSiteMetadata: FetchSiteMetadataType }) => {\n  const shouldShow = useCallback(() => {\n    const isLinkPreview = editor.isActive(\"linkPreview\");\n    return isLinkPreview;\n  }, [editor]);\n\n  const onSetLink = useCallback(\n    async (src: string) => {\n      if (fetchSiteMetadata) {\n        const metadata = await fetchSiteMetadata(src);\n        editor.chain().focus().setLinkPreview(src, metadata).run();\n      }\n    },\n    [editor]\n  );\n  return (\n    <BaseBubbleMenu\n      editor={editor}\n      pluginKey=\"linkPreview\"\n      shouldShow={shouldShow}\n      tippyOptions={{ popperOptions: { placement: \"top-start\" } }}\n      updateDelay={100}\n    >\n      <Toolbar.Button type=\"button\">\n        <LinkPreviewEditorPanel\n          onSetLink={onSetLink}\n          // @ts-ignore\n          initialSrcLink={\n            editor?.getAttributes(\"linkPreview\")?.editorValue ?? \"\"\n          }\n        />\n      </Toolbar.Button>\n    </BaseBubbleMenu>\n  );\n};\n\nexport default ILinkPreviewMenu;\n"],"names":["BubbleMenu","BaseBubbleMenu","React","useCallback","Toolbar","LinkPreviewEditorPanel","ILinkPreviewMenu","editor","appendTo","fetchSiteMetadata","shouldShow","isLinkPreview","isActive","onSetLink","src","metadata","chain","focus","setLinkPreview","run","pluginKey","tippyOptions","popperOptions","placement","updateDelay","Button","type","initialSrcLink","getAttributes","editorValue"],"mappings":";AAAA,SAASA,cAAcC,cAAc,QAAQ,gBAAgB;AAC7D,OAAOC,SAASC,WAAW,QAAQ,QAAQ;AAK3C,SAASC,OAAO,QAAQ,kCAAkC;AAE1D,SAASC,sBAAsB,QAAQ,+BAA+B;AAGtE,OAAO,MAAMC,mBAAmB,CAAC,EAC/BC,MAAM,EACNC,QAAQ,EACRC,iBAAiB,EACwC;IACzD,MAAMC,aAAaP,YAAY;QAC7B,MAAMQ,gBAAgBJ,OAAOK,QAAQ,CAAC;QACtC,OAAOD;IACT,GAAG;QAACJ;KAAO;IAEX,MAAMM,YAAYV,YAChB,OAAOW;QACL,IAAIL,mBAAmB;YACrB,MAAMM,WAAW,MAAMN,kBAAkBK;YACzCP,OAAOS,KAAK,GAAGC,KAAK,GAAGC,cAAc,CAACJ,KAAKC,UAAUI,GAAG;QAC1D;IACF,GACA;QAACZ;KAAO;IAEV,qBACE,KAACN;QACCM,QAAQA;QACRa,WAAU;QACVV,YAAYA;QACZW,cAAc;YAAEC,eAAe;gBAAEC,WAAW;YAAY;QAAE;QAC1DC,aAAa;kBAEb,cAAA,KAACpB,QAAQqB,MAAM;YAACC,MAAK;sBACnB,cAAA,KAACrB;gBACCQ,WAAWA;gBACX,aAAa;gBACbc,gBACEpB,QAAQqB,cAAc,gBAAgBC,eAAe;;;;AAMjE,EAAE;AAEF,eAAevB,iBAAiB"}

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

@@ -8,6 +8,8 @@ declare module "@tiptap/core" {
                 assetId: string;
                 playlistUrl?: string;
                 title: string;
+                actualWidth?: number;
+                actualHeight?: number;
             }) => ReturnType;
             setVideoBlockAt: (attributes: {
                 src: string;
@@ -16,6 +18,8 @@ declare module "@tiptap/core" {
                 playlistUrl?: string;
                 title: string;
                 pos: number | Range;
+                actualWidth?: number;
+                actualHeight?: number;
             }) => ReturnType;
             setVideoBlockAlign: (align: "left" | "center" | "right") => ReturnType;
             setVideoBlockWidth: (width: number) => 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;gBACf,OAAO,EAAE,MAAM,CAAC;gBAChB,WAAW,CAAC,EAAE,MAAM,CAAC;gBACrB,KAAK,EAAE,MAAM,CAAA;aACd,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;gBACrB,KAAK,EAAE,MAAM,CAAA;gBACb,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,6EAiJrB,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;gBACrB,KAAK,EAAE,MAAM,CAAC;gBACd,WAAW,CAAC,EAAE,MAAM,CAAC;gBACrB,YAAY,CAAC,EAAE,MAAM,CAAC;aACvB,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;gBACrB,KAAK,EAAE,MAAM,CAAC;gBACd,GAAG,EAAE,MAAM,GAAG,KAAK,CAAC;gBACpB,WAAW,CAAC,EAAE,MAAM,CAAC;gBACrB,YAAY,CAAC,EAAE,MAAM,CAAC;aACvB,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,6EA0KrB,CAAC;AAEH,eAAe,UAAU,CAAC"}

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

@@ -45,6 +45,20 @@ export const VideoBlock = Video.extend({
                         "data-width": attributes.width
                     })
             },
+            actualWidth: {
+                default: 0,
+                parseHTML: (element)=>element.getAttribute("data-actual-width"),
+                renderHTML: (attributes)=>({
+                        "data-actual-width": attributes.actualWidth
+                    })
+            },
+            actualHeight: {
+                default: 0,
+                parseHTML: (element)=>element.getAttribute("data-actual-height"),
+                renderHTML: (attributes)=>({
+                        "data-actual-height": attributes.actualHeight
+                    })
+            },
             align: {
                 default: "center",
                 parseHTML: (element)=>element.getAttribute("data-align"),
@@ -77,7 +91,7 @@ export const VideoBlock = Video.extend({
     },
     renderHTML ({ HTMLAttributes }) {
         return [
-            'div',
+            "div",
             {
                 class: "imageBlock"
             },
@@ -106,7 +120,9 @@ export const VideoBlock = Video.extend({
                             poster: attrs.poster,
                             assetId: attrs.assetId,
                             playlistUrl: attrs.playlistUrl,
-                            title: attrs.title
+                            title: attrs.title,
+                            actualWidth: attrs.actualWidth,
+                            actualHeight: attrs.actualHeight
                         }
                     });
                 },
@@ -118,7 +134,9 @@ export const VideoBlock = Video.extend({
                             poster: attrs.poster,
                             assetId: attrs.assetId,
                             playlistUrl: attrs.playlistUrl,
-                            title: attrs.title
+                            title: attrs.title,
+                            actualWidth: attrs.actualWidth,
+                            actualHeight: attrs.actualHeight
                         }
                     });
                 },

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        assetId: string;\n        playlistUrl?: string;\n        title: string\n      }) => ReturnType;\n      setVideoBlockAt: (attributes: {\n        src: string;\n        poster: string;\n        assetId: string;\n        playlistUrl?: string;\n        title: string\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      title: {\n        default: \"\",\n        parseHTML: (element) => element.getAttribute(\"title\"),\n        renderHTML: (attributes) => ({\n          title: attributes.title,\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      'div',\n      { class: \"imageBlock\" }, [\n        \"video\",\n        mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),\n      ], [\"caption\", mergeAttributes({\n        class: \"text-center text-gray-400 w-full h-16 mb-2 placeholder-black p-1 text-sm  border-0 rounded appearance-none\"\n      }, { defaultValue: HTMLAttributes.title || HTMLAttributes.caption }), HTMLAttributes.title || HTMLAttributes.caption],\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                title: attrs.title,\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                title: attrs.title\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    //@ts-ignore\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","title","poster","playlistUrl","width","align","alt","undefined","caption","tag","HTMLAttributes","class","options","defaultValue","addCommands","setVideoBlock","attrs","commands","insertContent","type","assetId","setVideoBlockAt","insertContentAt","pos","setVideoBlockAlign","updateAttributes","setVideoBlockWidth","Math","max","min","setVideoBlockCaption","addNodeView"],"mappings":"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"}
+{"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        title: string;\n        actualWidth?: number;\n        actualHeight?: number;\n      }) => ReturnType;\n      setVideoBlockAt: (attributes: {\n        src: string;\n        poster: string;\n        assetId: string;\n        playlistUrl?: string;\n        title: string;\n        pos: number | Range;\n        actualWidth?: number;\n        actualHeight?: number;\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      title: {\n        default: \"\",\n        parseHTML: (element) => element.getAttribute(\"title\"),\n        renderHTML: (attributes) => ({\n          title: attributes.title,\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      actualWidth: {\n        default: 0,\n        parseHTML: (element) => element.getAttribute(\"data-actual-width\"),\n        renderHTML: (attributes) => ({\n          \"data-actual-width\": attributes.actualWidth,\n        }),\n      },\n      actualHeight: {\n        default: 0,\n        parseHTML: (element) => element.getAttribute(\"data-actual-height\"),\n        renderHTML: (attributes) => ({\n          \"data-actual-height\": attributes.actualHeight,\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      \"div\",\n      { class: \"imageBlock\" },\n      [\"video\", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)],\n      [\n        \"caption\",\n        mergeAttributes(\n          {\n            class:\n              \"text-center text-gray-400 w-full h-16 mb-2 placeholder-black p-1 text-sm  border-0 rounded appearance-none\",\n          },\n          { defaultValue: HTMLAttributes.title || HTMLAttributes.caption }\n        ),\n        HTMLAttributes.title || HTMLAttributes.caption,\n      ],\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              title: attrs.title,\n              actualWidth: attrs.actualWidth,\n              actualHeight: attrs.actualHeight,\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              title: attrs.title,\n              actualWidth: attrs.actualWidth,\n              actualHeight: attrs.actualHeight,\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    //@ts-ignore\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","title","poster","playlistUrl","width","actualWidth","actualHeight","align","alt","undefined","caption","tag","HTMLAttributes","class","options","defaultValue","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/VideoBlockViewClientside.d.ts

@@ -1,9 +1,6 @@
 import { Node } from "@tiptap/pm/model";
-import { Editor } from "@tiptap/react";
 import React from "react";
 interface VideoBlockViewProps {
-    editor: Editor;
-    getPos: () => number;
     node: Node & {
         attrs: {
             src: string;
@@ -12,8 +9,8 @@ interface VideoBlockViewProps {
             playlistUrl?: string;
         };
     };
-    updateAttributes: (attrs: Record<string, string>) => void;
     className?: string;
+    getVideoAspect?: () => void;
 }
 export type Playlist = {
     id: string;
@@ -29,6 +26,6 @@ export type Item = {
     width: number;
     height: number;
 };
-export declare const VideoBlockViewClientside: ({ className, ...props }: VideoBlockViewProps) => React.JSX.Element;
+export declare const VideoBlockViewClientside: ({ className, getVideoAspect, ...props }: VideoBlockViewProps) => React.JSX.Element;
 export default VideoBlockViewClientside;
 //# sourceMappingURL=VideoBlockViewClientside.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"VideoBlockViewClientside.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/extensions/VideoBlock/components/VideoBlockViewClientside.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;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;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,wBAAwB,4BAGlC,mBAAmB,sBA+FrB,CAAC;AAEF,eAAe,wBAAwB,CAAC"}
+{"version":3,"file":"VideoBlockViewClientside.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/extensions/VideoBlock/components/VideoBlockViewClientside.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,KAAqC,MAAM,OAAO,CAAC;AAK1D,UAAU,mBAAmB;IAC3B,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,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;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,wBAAwB,4CAIlC,mBAAmB,sBAuHrB,CAAC;AAEF,eAAe,wBAAwB,CAAC"}

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

@@ -3,10 +3,12 @@ import { NodeViewWrapper } from "@tiptap/react";
 import React, { useEffect, useMemo, useRef } from "react";
 import { cn } from "../../../lib/utils/index.js";
 import VideoPlayer from "./videojs/VideoPlayer.js";
-export const VideoBlockViewClientside = ({ className, ...props })=>{
+import { useGetAssetsAspectRatio } from "../../serverside/getAssetsAspectRatio.js";
+export const VideoBlockViewClientside = ({ className, getVideoAspect, ...props })=>{
     const { node } = props;
     const videoWrapperRef = useRef(null);
-    const { src, poster, playlistUrl, caption } = node.attrs;
+    const { src, poster, playlistUrl, caption, actualWidth, actualHeight } = node.attrs;
+    const { aspectRatio, calculateAspectRatio } = useGetAssetsAspectRatio();
     const [playlistContent, setPlaylistContent] = React.useState();
     const [error, setError] = React.useState();
     useEffect(()=>{
@@ -40,7 +42,8 @@ export const VideoBlockViewClientside = ({ className, ...props })=>{
                         type: item.type,
                         label: item.label
                     })),
-                poster: playlistContent.poster
+                poster: playlistContent.poster,
+                preload: "auto"
             };
         }
         return {
@@ -49,11 +52,25 @@ export const VideoBlockViewClientside = ({ className, ...props })=>{
                     type: item.type,
                     label: item.label
                 })),
-            poster: playlistContent.poster
+            poster: playlistContent.poster,
+            preload: "auto"
         };
     }, [
         playlistContent
     ]);
+    useEffect(()=>{
+        const anySrc = playlistContent?.items?.some((item)=>item.src);
+        if (!aspectRatio && anySrc) {
+            const source = playlistContent.items.find((item)=>item.src && item.width && item.height);
+            calculateAspectRatio({
+                src,
+                actualWidth: actualWidth || source?.width,
+                actualHeight: actualHeight || source?.height
+            }, "VIDEO", getVideoAspect);
+        }
+    }, [
+        playlistContent
+    ]);
     return /*#__PURE__*/ _jsx(NodeViewWrapper, {
         className: className,
         children: /*#__PURE__*/ _jsx("div", {
@@ -63,6 +80,9 @@ export const VideoBlockViewClientside = ({ className, ...props })=>{
             },
             children: /*#__PURE__*/ _jsxs("div", {
                 ref: videoWrapperRef,
+                style: {
+                    aspectRatio
+                },
                 children: [
                     error && /*#__PURE__*/ _jsx("div", {
                         children: error

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/extensions/VideoBlock/components/VideoBlockViewClientside.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  className?: string;\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 VideoBlockViewClientside = ({\n  className,\n  ...props\n}: VideoBlockViewProps) => {\n  const { 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        cache: \"no-cache\",\n      });\n      return await res.json();\n    }\n\n    if (playlistUrl) {\n      try {\n        getPlaylistContent()\n          .then((data) => {\n            setPlaylistContent(data);\n          })\n          .catch((err) => {\n            setError(err);\n          });\n      } catch (error) {\n        setError(error);\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 videoJsOptions = useMemo(() => {\n    if (playlistContent == undefined) return {};\n\n    if (\n      playlistContent.items.some(\n        (item) =>\n          item.type === \"application/x-mpegURL\" ||\n          item.type === \"application/vnd.apple.mpegurl\"\n      )\n    ) {\n      return {\n        sources: playlistContent.items\n          .filter(\n            (item) =>\n              item.type === \"application/x-mpegURL\" ||\n              item.type === \"application/vnd.apple.mpegurl\"\n          )\n          .map((item) => ({\n            src: item.src,\n            type: item.type,\n            label: item.label,\n          })),\n        poster: playlistContent.poster,\n      };\n    }\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 className={className}>\n      <div className={wrapperClassName} style={{ width: node.attrs.width }}>\n        <div 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            <div className=\"text-center block text-sm text-gray-500\">\n              {playlistContent?.title}\n            </div>\n          )}\n        </div>\n      </div>\n    </NodeViewWrapper>\n  );\n};\n\nexport default VideoBlockViewClientside;\n"],"names":["NodeViewWrapper","React","useEffect","useMemo","useRef","cn","VideoPlayer","VideoBlockViewClientside","className","props","node","videoWrapperRef","src","poster","playlistUrl","caption","attrs","playlistContent","setPlaylistContent","useState","error","setError","getPlaylistContent","res","fetch","cache","json","then","data","catch","err","wrapperClassName","align","videoJsOptions","undefined","items","some","item","type","sources","filter","map","label","div","style","width","ref","options","title"],"mappings":";AACA,SAAiBA,eAAe,QAAQ,gBAAgB;AACxD,OAAOC,SAAsBC,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,QAAQ;AACvE,SAASC,EAAE,QAAQ,8BAA8B;AACjD,OAAOC,iBAAiB,2BAA2B;AAiCnD,OAAO,MAAMC,2BAA2B,CAAC,EACvCC,SAAS,EACT,GAAGC,OACiB;IACpB,MAAM,EAAEC,IAAI,EAAE,GAAGD;IACjB,MAAME,kBAAkBP,OAAuB;IAC/C,MAAM,EAAEQ,GAAG,EAAEC,MAAM,EAAEC,WAAW,EAAEC,OAAO,EAAE,GAAGL,KAAKM,KAAK;IACxD,MAAM,CAACC,iBAAiBC,mBAAmB,GAAGjB,MAAMkB,QAAQ;IAG5D,MAAM,CAACC,OAAOC,SAAS,GAAGpB,MAAMkB,QAAQ;IAExCjB,UAAU;QACR,eAAeoB;YACb,MAAMC,MAAM,MAAMC,MAAMV,aAAa;gBACnCW,OAAO;YACT;YACA,OAAO,MAAMF,IAAIG,IAAI;QACvB;QAEA,IAAIZ,aAAa;YACf,IAAI;gBACFQ,qBACGK,IAAI,CAAC,CAACC;oBACLV,mBAAmBU;gBACrB,GACCC,KAAK,CAAC,CAACC;oBACNT,SAASS;gBACX;YACJ,EAAE,OAAOV,OAAO;gBACdC,SAASD;YACX;QACF;IACF,GAAG;QAACN;KAAY;IAEhB,MAAMiB,mBAAmB1B,GACvBK,KAAKM,KAAK,CAACgB,KAAK,KAAK,SAAS,SAAS,WACvCtB,KAAKM,KAAK,CAACgB,KAAK,KAAK,UAAU,SAAS,WACxCtB,KAAKM,KAAK,CAACgB,KAAK,KAAK,YAAY;IAGnC,MAAMC,iBAAiB9B,QAAQ;QAC7B,IAAIc,mBAAmBiB,WAAW,OAAO,CAAC;QAE1C,IACEjB,gBAAgBkB,KAAK,CAACC,IAAI,CACxB,CAACC,OACCA,KAAKC,IAAI,KAAK,2BACdD,KAAKC,IAAI,KAAK,kCAElB;YACA,OAAO;gBACLC,SAAStB,gBAAgBkB,KAAK,CAC3BK,MAAM,CACL,CAACH,OACCA,KAAKC,IAAI,KAAK,2BACdD,KAAKC,IAAI,KAAK,iCAEjBG,GAAG,CAAC,CAACJ,OAAU,CAAA;wBACdzB,KAAKyB,KAAKzB,GAAG;wBACb0B,MAAMD,KAAKC,IAAI;wBACfI,OAAOL,KAAKK,KAAK;oBACnB,CAAA;gBACF7B,QAAQI,gBAAgBJ,MAAM;YAChC;QACF;QACA,OAAO;YACL0B,SAAStB,gBAAgBkB,KAAK,CAACM,GAAG,CAAC,CAACJ,OAAU,CAAA;oBAC5CzB,KAAKyB,KAAKzB,GAAG;oBACb0B,MAAMD,KAAKC,IAAI;oBACfI,OAAOL,KAAKK,KAAK;gBACnB,CAAA;YACA7B,QAAQI,gBAAgBJ,MAAM;QAChC;IACF,GAAG;QAACI;KAAgB;IACpB,qBACE,KAACjB;QAAgBQ,WAAWA;kBAC1B,cAAA,KAACmC;YAAInC,WAAWuB;YAAkBa,OAAO;gBAAEC,OAAOnC,KAAKM,KAAK,CAAC6B,KAAK;YAAC;sBACjE,cAAA,MAACF;gBAAIG,KAAKnC;;oBACPS,uBAAS,KAACuB;kCAAKvB;;oBASfH,iCAAmB,KAACX;wBAAYyC,SAASd;;oBACzClB,WAAWE,iBAAiB+B,uBAC3B,KAACL;wBAAInC,WAAU;kCACZS,iBAAiB+B;;;;;;AAOhC,EAAE;AAEF,eAAezC,yBAAyB"}
+{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/extensions/VideoBlock/components/VideoBlockViewClientside.tsx"],"sourcesContent":["import { Node } from \"@tiptap/pm/model\";\nimport { NodeViewWrapper } from \"@tiptap/react\";\nimport React, { useEffect, useMemo, useRef } from \"react\";\nimport { cn } from \"../../../lib/utils/index.js\";\nimport VideoPlayer from \"./videojs/VideoPlayer.js\";\nimport { useGetAssetsAspectRatio } from \"../../serverside/getAssetsAspectRatio.js\";\n\ninterface VideoBlockViewProps {\n  node: Node & {\n    attrs: {\n      src: string;\n      poster: string;\n      assetId: string;\n      playlistUrl?: string;\n    };\n  };\n  className?: string;\n  getVideoAspect?: () => 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 VideoBlockViewClientside = ({\n  className,\n  getVideoAspect,\n  ...props\n}: VideoBlockViewProps) => {\n  const { node } = props;\n  const videoWrapperRef = useRef<HTMLDivElement>(null);\n  const { src, poster, playlistUrl, caption, actualWidth, actualHeight } =\n    node.attrs;\n  const { aspectRatio, calculateAspectRatio } = useGetAssetsAspectRatio();\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        cache: \"no-cache\",\n      });\n      return await res.json();\n    }\n\n    if (playlistUrl) {\n      try {\n        getPlaylistContent()\n          .then((data) => {\n            setPlaylistContent(data);\n          })\n          .catch((err) => {\n            setError(err);\n          });\n      } catch (error) {\n        setError(error);\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 videoJsOptions = useMemo(() => {\n    if (playlistContent == undefined) return {};\n\n    if (\n      playlistContent.items.some(\n        (item) =>\n          item.type === \"application/x-mpegURL\" ||\n          item.type === \"application/vnd.apple.mpegurl\"\n      )\n    ) {\n      return {\n        sources: playlistContent.items\n          .filter(\n            (item) =>\n              item.type === \"application/x-mpegURL\" ||\n              item.type === \"application/vnd.apple.mpegurl\"\n          )\n          .map((item) => ({\n            src: item.src,\n            type: item.type,\n            label: item.label,\n          })),\n        poster: playlistContent.poster,\n        preload: \"auto\",\n      };\n    }\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      preload: \"auto\",\n    };\n  }, [playlistContent]);\n\n  useEffect(() => {\n    const anySrc = playlistContent?.items?.some((item) => item.src);\n\n    if (!aspectRatio && anySrc) {\n      const source = playlistContent.items.find(\n        (item) => item.src && item.width && item.height\n      );\n      calculateAspectRatio(\n        {\n          src,\n          actualWidth: actualWidth || source?.width,\n          actualHeight: actualHeight || source?.height,\n        },\n        \"VIDEO\",\n        getVideoAspect\n      );\n    }\n  }, [playlistContent]);\n\n  return (\n    <NodeViewWrapper className={className}>\n      <div className={wrapperClassName} style={{ width: node.attrs.width }}>\n        <div ref={videoWrapperRef} style={{ aspectRatio }}>\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            <div className=\"text-center block text-sm text-gray-500\">\n              {playlistContent?.title}\n            </div>\n          )}\n        </div>\n      </div>\n    </NodeViewWrapper>\n  );\n};\n\nexport default VideoBlockViewClientside;\n"],"names":["NodeViewWrapper","React","useEffect","useMemo","useRef","cn","VideoPlayer","useGetAssetsAspectRatio","VideoBlockViewClientside","className","getVideoAspect","props","node","videoWrapperRef","src","poster","playlistUrl","caption","actualWidth","actualHeight","attrs","aspectRatio","calculateAspectRatio","playlistContent","setPlaylistContent","useState","error","setError","getPlaylistContent","res","fetch","cache","json","then","data","catch","err","wrapperClassName","align","videoJsOptions","undefined","items","some","item","type","sources","filter","map","label","preload","anySrc","source","find","width","height","div","style","ref","options","title"],"mappings":"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"}

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

@@ -1,10 +1,12 @@
-import React from "react";
+import React, { CSSProperties } 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>;
+declare const VideoPlayer: React.FC<IVideoPlayerProps & {
+    style?: CSSProperties;
+}>;
 export default VideoPlayer;
 //# sourceMappingURL=VideoPlayer.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"VideoPlayer.d.ts","sourceRoot":"","sources":["../../../../../../../../src/fields/TiptapEditor/extensions/VideoBlock/components/videojs/VideoPlayer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC7C,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,GAAG;IAAE,KAAK,CAAC,EAAE,aAAa,CAAA;CAAE,CA8BxE,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -14,7 +14,7 @@ const initialOptions = {
         }
     }
 };
-const VideoPlayer = ({ options })=>{
+const VideoPlayer = ({ options, style })=>{
     const videoNode = React.useRef(null);
     const player = React.useRef(null);
     React.useEffect(()=>{
@@ -37,7 +37,8 @@ const VideoPlayer = ({ options })=>{
     ]);
     return /*#__PURE__*/ _jsx("video", {
         ref: videoNode,
-        className: "video-js"
+        className: "video-js",
+        style: style
     });
 };
 export default VideoPlayer;