payload-richtext-tiptap 0.0.121 → 0.0.122
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.
- package/dist/src/fields/TiptapEditor/extensions/ImageUpload/view/ImageUpload.d.ts.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/ImageUpload/view/ImageUpload.js +6 -5
- package/dist/src/fields/TiptapEditor/extensions/ImageUpload/view/ImageUpload.js.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/VideoBlock/VideoBlock.d.ts +2 -0
- package/dist/src/fields/TiptapEditor/extensions/VideoBlock/VideoBlock.d.ts.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/VideoBlock/VideoBlock.js +11 -2
- package/dist/src/fields/TiptapEditor/extensions/VideoBlock/VideoBlock.js.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/VideoBlock/components/VideoBlockView.js +2 -2
- package/dist/src/fields/TiptapEditor/extensions/VideoBlock/components/VideoBlockView.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
|
@@ -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;AAIxD,OAAO,EAEL,SAAS,EACT,eAAe,EAChB,MAAM,kCAAkC,CAAC;AAC1C,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,
|
|
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;AAIxD,OAAO,EAEL,SAAS,EACT,eAAe,EAChB,MAAM,kCAAkC,CAAC;AAC1C,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,gCAyEF,CAAC"}
|
|
@@ -8,11 +8,11 @@ export const ImageUploadBuilder = (openAssetHQHandler)=>{
|
|
|
8
8
|
const [done, setDone] = useState(false);
|
|
9
9
|
const onUpload = useCallback((asset)=>{
|
|
10
10
|
if (asset && !done) {
|
|
11
|
+
let title = asset.title;
|
|
12
|
+
if (i18next.language !== "en" && !!asset.title_locale[i18next.language.toUpperCase()]) {
|
|
13
|
+
title = asset.title_locale[i18next.language.toUpperCase()];
|
|
14
|
+
}
|
|
11
15
|
if (asset.type === "IMAGE") {
|
|
12
|
-
let title = asset.title;
|
|
13
|
-
if (i18next.language !== "en" && !!asset.title_locale[i18next.language.toUpperCase()]) {
|
|
14
|
-
title = asset.title_locale[i18next.language.toUpperCase()];
|
|
15
|
-
}
|
|
16
16
|
editor.chain().focus().setImageBlock({
|
|
17
17
|
src: asset?.optimizedImageUrl || asset.fullUrl,
|
|
18
18
|
assetId: asset.id,
|
|
@@ -33,7 +33,8 @@ export const ImageUploadBuilder = (openAssetHQHandler)=>{
|
|
|
33
33
|
src: asset.videoUrl,
|
|
34
34
|
poster: asset.fullUrl,
|
|
35
35
|
assetId: asset.id,
|
|
36
|
-
playlistUrl: asset.playlistUrl
|
|
36
|
+
playlistUrl: asset.playlistUrl,
|
|
37
|
+
title: title
|
|
37
38
|
}).deleteRange({
|
|
38
39
|
from: getPos(),
|
|
39
40
|
to: getPos()
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/extensions/ImageUpload/view/ImageUpload.tsx"],"sourcesContent":["import { 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\";\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
|
|
1
|
+
{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/extensions/ImageUpload/view/ImageUpload.tsx"],"sourcesContent":["import { 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\";\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 (i18next.language !== \"en\" && !!asset.title_locale[i18next.language.toUpperCase()]) {\n title = asset.title_locale[i18next.language.toUpperCase()];\n }\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 })\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","ImageUploadBuilder","openAssetHQHandler","ImageUpload","getPos","editor","node","done","setDone","onUpload","asset","title","language","title_locale","toUpperCase","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,SAAiBA,eAAe,QAAQ,gBAAgB;AACxD,OAAOC,aAAa,UAAU;AAC9B,SAASC,SAAS,QAAQ,eAAe;AACzC,SAASC,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAM9C,OAAO,MAAMC,qBAAqB,CAACC;IACjC,MAAMC,cAAc,CAAC,EACnBC,MAAM,EACNC,MAAM,EACNC,IAAI,EAKL;QACC,MAAM,CAACC,MAAMC,QAAQ,GAAGR,SAAS;QACjC,MAAMS,WAAWV,YACf,CAACW;YACC,IAAIA,SAAS,CAACH,MAAM;gBAClB,IAAII,QAAQD,MAAMC,KAAK;gBACvB,IAAId,QAAQe,QAAQ,KAAK,QAAQ,CAAC,CAACF,MAAMG,YAAY,CAAChB,QAAQe,QAAQ,CAACE,WAAW,GAAG,EAAE;oBACrFH,QAAQD,MAAMG,YAAY,CAAChB,QAAQe,QAAQ,CAACE,WAAW,GAAG;gBAC5D;gBACA,IAAIJ,MAAMK,IAAI,KAAK,SAAS;oBAC1BV,OACGW,KAAK,GACLC,KAAK,GACLC,aAAa,CAAC;wBACbC,KAAKT,OAAOU,qBAAqBV,MAAMW,OAAO;wBAC9CC,SAASZ,MAAMa,EAAE;wBACjBC,SAASb;oBACX,GACCc,WAAW,CAAC;wBAAEC,MAAMtB;wBAAUuB,IAAIvB;oBAAS,GAC3Ca,KAAK,GACLW,GAAG;oBACNpB,QAAQ;gBACV,OAAO;oBACLqB,QAAQC,GAAG,CAAC,iCAAiC;wBAC3CX,KAAKT,MAAMqB,QAAQ;wBACnBC,QAAQtB,MAAMW,OAAO;wBACrBC,SAASZ,MAAMa,EAAE;wBACjBU,aAAavB,MAAMuB,WAAW;oBAChC;oBACA5B,OACGW,KAAK,GACLC,KAAK,GACLiB,aAAa,CAAC;wBACbf,KAAKT,MAAMqB,QAAQ;wBACnBC,QAAQtB,MAAMW,OAAO;wBACrBC,SAASZ,MAAMa,EAAE;wBACjBU,aAAavB,MAAMuB,WAAW;wBAC9BtB,OAAOA;oBACT,GACCc,WAAW,CAAC;wBAAEC,MAAMtB;wBAAUuB,IAAIvB;oBAAS,GAC3Ca,KAAK,GACLW,GAAG;oBACNpB,QAAQ;gBACV;YACF,OAAO;gBACLqB,QAAQM,IAAI,CACV;YAEJ;QACF,GACA;YAAC/B;YAAQC;SAAO;QAGlB,qBACE,KAACT;sBACC,cAAA,KAACwC;gBAAIC,WAAU;gBAAUC,kBAAgB;0BACvC,cAAA,MAACC;oBACCC,MAAK;oBACLH,WAAU;oBACVI,SAAS,CAACC;wBACRA,EAAEC,cAAc;wBAChBzC,mBAAmBO,UAAU,MAAMH,MAAMsC,OAAO7B,QAAQ;oBAC1D;;sCAEA,KAACjB;4BAAUuC,WAAU;;wBAAS;;;;;IAMxC;IAEA,OAAOlC;AACT,EAAE"}
|
|
@@ -7,12 +7,14 @@ declare module "@tiptap/core" {
|
|
|
7
7
|
poster: string;
|
|
8
8
|
assetId: string;
|
|
9
9
|
playlistUrl?: string;
|
|
10
|
+
title: string;
|
|
10
11
|
}) => ReturnType;
|
|
11
12
|
setVideoBlockAt: (attributes: {
|
|
12
13
|
src: string;
|
|
13
14
|
poster: string;
|
|
14
15
|
assetId: string;
|
|
15
16
|
playlistUrl?: string;
|
|
17
|
+
title: string;
|
|
16
18
|
pos: number | Range;
|
|
17
19
|
}) => ReturnType;
|
|
18
20
|
setVideoBlockAlign: (align: "left" | "center" | "right") => ReturnType;
|
|
@@ -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;gBACf,OAAO,EAAE,MAAM,CAAC;gBAChB,WAAW,CAAC,EAAE,MAAM,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;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,6EA4IrB,CAAC;AAEH,eAAe,UAAU,CAAC"}
|
|
@@ -17,6 +17,13 @@ export const VideoBlock = Video.extend({
|
|
|
17
17
|
src: attributes.src
|
|
18
18
|
})
|
|
19
19
|
},
|
|
20
|
+
title: {
|
|
21
|
+
default: "",
|
|
22
|
+
parseHTML: (element)=>element.getAttribute("title"),
|
|
23
|
+
renderHTML: (attributes)=>({
|
|
24
|
+
title: attributes.title
|
|
25
|
+
})
|
|
26
|
+
},
|
|
20
27
|
poster: {
|
|
21
28
|
default: "",
|
|
22
29
|
parseHTML: (element)=>element.getAttribute("poster"),
|
|
@@ -83,7 +90,8 @@ export const VideoBlock = Video.extend({
|
|
|
83
90
|
src: attrs.src,
|
|
84
91
|
poster: attrs.poster,
|
|
85
92
|
assetId: attrs.assetId,
|
|
86
|
-
playlistUrl: attrs.playlistUrl
|
|
93
|
+
playlistUrl: attrs.playlistUrl,
|
|
94
|
+
title: attrs.title
|
|
87
95
|
}
|
|
88
96
|
});
|
|
89
97
|
},
|
|
@@ -94,7 +102,8 @@ export const VideoBlock = Video.extend({
|
|
|
94
102
|
src: attrs.src,
|
|
95
103
|
poster: attrs.poster,
|
|
96
104
|
assetId: attrs.assetId,
|
|
97
|
-
playlistUrl: attrs.playlistUrl
|
|
105
|
+
playlistUrl: attrs.playlistUrl,
|
|
106
|
+
title: attrs.title
|
|
98
107
|
}
|
|
99
108
|
});
|
|
100
109
|
},
|
|
@@ -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 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 //@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","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":"AAAA;AAEA,SAASA,qBAAqB,QAAQ,gBAAgB;AACtD,SAASC,eAAe,QAAe,eAAe;AAEtD,SAASC,cAAc,QAAQ,iCAAiC;AAChE,SAASC,KAAK,QAAQ,oBAAoB;
|
|
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 \"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 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","options","addCommands","setVideoBlock","attrs","commands","insertContent","type","assetId","setVideoBlockAt","insertContentAt","pos","setVideoBlockAlign","updateAttributes","setVideoBlockWidth","Math","max","min","setVideoBlockCaption","addNodeView"],"mappings":"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"}
|
|
@@ -6,7 +6,7 @@ import VideoPlayer from "./videojs/VideoPlayer.js";
|
|
|
6
6
|
export const VideoBlockView = (props)=>{
|
|
7
7
|
const { editor, getPos, node } = props;
|
|
8
8
|
const videoWrapperRef = useRef(null);
|
|
9
|
-
const { src, poster, playlistUrl, caption } = node.attrs;
|
|
9
|
+
const { src, poster, playlistUrl, caption, title } = node.attrs;
|
|
10
10
|
const [playlistContent, setPlaylistContent] = React.useState();
|
|
11
11
|
const [error, setError] = React.useState();
|
|
12
12
|
useEffect(()=>{
|
|
@@ -78,7 +78,7 @@ export const VideoBlockView = (props)=>{
|
|
|
78
78
|
}),
|
|
79
79
|
caption && playlistContent?.title && /*#__PURE__*/ _jsx("caption", {
|
|
80
80
|
className: "text-center block text-sm text-gray-500",
|
|
81
|
-
children: playlistContent?.title
|
|
81
|
+
children: title || playlistContent?.title
|
|
82
82
|
})
|
|
83
83
|
]
|
|
84
84
|
})
|
|
@@ -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, 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 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 onClick = useCallback(() => {\n editor.commands.setNodeSelection(getPos());\n }, [getPos, editor.commands]);\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>\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","cache","json","then","data","catch","err","wrapperClassName","align","onClick","commands","setNodeSelection","videoJsOptions","undefined","items","some","item","type","sources","filter","map","label","div","className","style","width","contentEditable","ref","options"
|
|
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, title } = 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 onClick = useCallback(() => {\n editor.commands.setNodeSelection(getPos());\n }, [getPos, editor.commands]);\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>\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 {title || 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","title","attrs","playlistContent","setPlaylistContent","useState","error","setError","getPlaylistContent","res","fetch","cache","json","then","data","catch","err","wrapperClassName","align","onClick","commands","setNodeSelection","videoJsOptions","undefined","items","some","item","type","sources","filter","map","label","div","className","style","width","contentEditable","ref","options"],"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,EAAEC,KAAK,EAAE,GAAGN,KAAKO,KAAK;IAC/D,MAAM,CAACC,iBAAiBC,mBAAmB,GAAGpB,MAAMqB,QAAQ;IAG5D,MAAM,CAACC,OAAOC,SAAS,GAAGvB,MAAMqB,QAAQ;IAExCnB,UAAU;QACR,eAAesB;YACb,MAAMC,MAAM,MAAMC,MAAMX,aAAa;gBACnCY,OAAO;YACT;YACA,OAAO,MAAMF,IAAIG,IAAI;QACvB;QAEA,IAAIb,aAAa;YACf,IAAI;gBACFS,qBACGK,IAAI,CAAC,CAACC;oBACLV,mBAAmBU;gBACrB,GACCC,KAAK,CAAC,CAACC;oBACNT,SAASS;gBACX;YACJ,EAAE,OAAOV,OAAO;gBACdC,SAASD;YACX;QACF;IACF,GAAG;QAACP;KAAY;IAEhB,MAAMkB,mBAAmB5B,GACvBM,KAAKO,KAAK,CAACgB,KAAK,KAAK,SAAS,SAAS,WACvCvB,KAAKO,KAAK,CAACgB,KAAK,KAAK,UAAU,SAAS,WACxCvB,KAAKO,KAAK,CAACgB,KAAK,KAAK,YAAY;IAGnC,MAAMC,UAAUlC,YAAY;QAC1BQ,OAAO2B,QAAQ,CAACC,gBAAgB,CAAC3B;IACnC,GAAG;QAACA;QAAQD,OAAO2B,QAAQ;KAAC;IAE5B,MAAME,iBAAiBnC,QAAQ;QAC7B,IAAIgB,mBAAmBoB,WAAW,OAAO,CAAC;QAE1C,IACEpB,gBAAgBqB,KAAK,CAACC,IAAI,CACxB,CAACC,OACCA,KAAKC,IAAI,KAAK,2BACdD,KAAKC,IAAI,KAAK,kCAElB;YACA,OAAO;gBACLC,SAASzB,gBAAgBqB,KAAK,CAC3BK,MAAM,CACL,CAACH,OACCA,KAAKC,IAAI,KAAK,2BACdD,KAAKC,IAAI,KAAK,iCAEjBG,GAAG,CAAC,CAACJ,OAAU,CAAA;wBACd7B,KAAK6B,KAAK7B,GAAG;wBACb8B,MAAMD,KAAKC,IAAI;wBACfI,OAAOL,KAAKK,KAAK;oBACnB,CAAA;gBACFjC,QAAQK,gBAAgBL,MAAM;YAChC;QACF;QACA,OAAO;YACL8B,SAASzB,gBAAgBqB,KAAK,CAACM,GAAG,CAAC,CAACJ,OAAU,CAAA;oBAC5C7B,KAAK6B,KAAK7B,GAAG;oBACb8B,MAAMD,KAAKC,IAAI;oBACfI,OAAOL,KAAKK,KAAK;gBACnB,CAAA;YACAjC,QAAQK,gBAAgBL,MAAM;QAChC;IACF,GAAG;QAACK;KAAgB;IACpB,qBACE,KAACpB;kBACC,cAAA,KAACiD;YAAIC,WAAWhB;YAAkBiB,OAAO;gBAAEC,OAAOxC,KAAKO,KAAK,CAACiC,KAAK;YAAC;sBACjE,cAAA,MAACH;gBAAII,iBAAiB;gBAAOC,KAAKzC;;oBAC/BU,uBAAS,KAAC0B;kCAAK1B;;oBASfH,iCAAmB,KAACb;wBAAYgD,SAAShB;;oBACzCtB,WAAWG,iBAAiBF,uBAC3B,KAACD;wBAAQiC,WAAU;kCAChBhC,SAASE,iBAAiBF;;;;;;AAOzC,EAAE;AAEF,eAAeV,eAAe"}
|