payload-richtext-tiptap 0.0.89 → 0.0.90
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/ImageBlock/ImageBlock.d.ts +1 -0
- package/dist/src/fields/TiptapEditor/extensions/ImageBlock/ImageBlock.d.ts.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/ImageBlock/ImageBlock.js +10 -0
- package/dist/src/fields/TiptapEditor/extensions/ImageBlock/ImageBlock.js.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/ImageBlock/components/ImageBlockView.d.ts.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/ImageBlock/components/ImageBlockView.js +19 -9
- package/dist/src/fields/TiptapEditor/extensions/ImageBlock/components/ImageBlockView.js.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/serverside/ContentEmbedSupport.d.ts.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/serverside/ContentEmbedSupport.js +25 -16
- package/dist/src/fields/TiptapEditor/extensions/serverside/ContentEmbedSupport.js.map +1 -1
- package/dist/src/styles.css +47 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageBlock.d.ts","sourceRoot":"","sources":["../../../../../../src/fields/TiptapEditor/extensions/ImageBlock/ImageBlock.ts"],"names":[],"mappings":"AAGA,OAAO,EAAmB,KAAK,EAAE,MAAM,cAAc,CAAC;AAKtD,OAAO,QAAQ,cAAc,CAAC;IAC5B,UAAU,QAAQ,CAAC,UAAU;QAC3B,UAAU,EAAE;YACV,aAAa,EAAE,CAAC,UAAU,EAAE;gBAC1B,GAAG,EAAE,MAAM,CAAC;gBACZ,OAAO,CAAC,EAAE,MAAM,CAAC;aAClB,KAAK,UAAU,CAAC;YACjB,eAAe,EAAE,CAAC,UAAU,EAAE;gBAC5B,GAAG,EAAE,MAAM,CAAC;gBACZ,GAAG,EAAE,MAAM,GAAG,KAAK,CAAC;gBACpB,OAAO,CAAC,EAAE,MAAM,CAAC;aAClB,KAAK,UAAU,CAAC;YACjB,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,KAAK,UAAU,CAAC;YACvE,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"ImageBlock.d.ts","sourceRoot":"","sources":["../../../../../../src/fields/TiptapEditor/extensions/ImageBlock/ImageBlock.ts"],"names":[],"mappings":"AAGA,OAAO,EAAmB,KAAK,EAAE,MAAM,cAAc,CAAC;AAKtD,OAAO,QAAQ,cAAc,CAAC;IAC5B,UAAU,QAAQ,CAAC,UAAU;QAC3B,UAAU,EAAE;YACV,aAAa,EAAE,CAAC,UAAU,EAAE;gBAC1B,GAAG,EAAE,MAAM,CAAC;gBACZ,OAAO,CAAC,EAAE,MAAM,CAAC;aAClB,KAAK,UAAU,CAAC;YACjB,eAAe,EAAE,CAAC,UAAU,EAAE;gBAC5B,GAAG,EAAE,MAAM,CAAC;gBACZ,GAAG,EAAE,MAAM,GAAG,KAAK,CAAC;gBACpB,OAAO,CAAC,EAAE,MAAM,CAAC;aAClB,KAAK,UAAU,CAAC;YACjB,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,KAAK,UAAU,CAAC;YACvE,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,UAAU,CAAC;YAClD,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,UAAU,CAAC;SAClD,CAAC;KACH;CACF;AAED,eAAO,MAAM,UAAU,mFA0GrB,CAAC;AAEH,eAAe,UAAU,CAAC"}
|
|
@@ -37,6 +37,13 @@ export const ImageBlock = Image.extend({
|
|
|
37
37
|
renderHTML: (attributes)=>({
|
|
38
38
|
alt: attributes.alt
|
|
39
39
|
})
|
|
40
|
+
},
|
|
41
|
+
caption: {
|
|
42
|
+
default: undefined,
|
|
43
|
+
parseHTML: (element)=>element.getAttribute("data-caption"),
|
|
44
|
+
renderHTML: (attributes)=>({
|
|
45
|
+
"data-caption": attributes.caption
|
|
46
|
+
})
|
|
40
47
|
}
|
|
41
48
|
};
|
|
42
49
|
},
|
|
@@ -71,6 +78,9 @@ export const ImageBlock = Image.extend({
|
|
|
71
78
|
}
|
|
72
79
|
});
|
|
73
80
|
},
|
|
81
|
+
addImageCaption: (caption)=>({ commands })=>commands.updateAttributes("imageBlock", {
|
|
82
|
+
caption
|
|
83
|
+
}),
|
|
74
84
|
setImageBlockAlign: (align)=>({ commands })=>commands.updateAttributes("imageBlock", {
|
|
75
85
|
align
|
|
76
86
|
}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/ImageBlock/ImageBlock.ts"],"sourcesContent":["\"use client\";\n\nimport { ReactNodeViewRenderer } from \"@tiptap/react\";\nimport { mergeAttributes, Range } from \"@tiptap/core\";\n\nimport { ImageBlockView } from \"./components/ImageBlockView.js\";\nimport { Image } from \"../Image/Image.js\";\n\ndeclare module \"@tiptap/core\" {\n interface Commands<ReturnType> {\n imageBlock: {\n setImageBlock: (attributes: {\n src: string;\n assetId?: string;\n }) => ReturnType;\n setImageBlockAt: (attributes: {\n src: string;\n pos: number | Range;\n assetId?: string;\n }) => ReturnType;\n setImageBlockAlign: (align: \"left\" | \"center\" | \"right\") => ReturnType;\n setImageBlockWidth: (width: number) => ReturnType;\n };\n }\n}\n\nexport const ImageBlock = Image.extend({\n name: \"imageBlock\",\n\n group: \"block\",\n\n defining: true,\n\n isolating: true,\n\n addAttributes() {\n return {\n src: {\n default: \"\",\n parseHTML: (element) => element.getAttribute(\"src\"),\n renderHTML: (attributes) => ({\n src: attributes.src,\n }),\n },\n width: {\n default: \"100%\",\n parseHTML: (element) => element.getAttribute(\"data-width\"),\n renderHTML: (attributes) => ({\n \"data-width\": attributes.width,\n }),\n },\n align: {\n default: \"center\",\n parseHTML: (element) => element.getAttribute(\"data-align\"),\n renderHTML: (attributes) => ({\n \"data-align\": attributes.align,\n }),\n },\n alt: {\n default: undefined,\n parseHTML: (element) => element.getAttribute(\"alt\"),\n renderHTML: (attributes) => ({\n alt: attributes.alt,\n }),\n },\n };\n },\n\n parseHTML() {\n return [\n {\n tag: 'img[src*=\"tiptap.dev\"]:not([src^=\"data:\"]), img[src*=\"windows.net\"]:not([src^=\"data:\"])',\n },\n ];\n },\n\n renderHTML({ HTMLAttributes }) {\n return [\n \"img\",\n mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),\n ];\n },\n\n addCommands() {\n return {\n setImageBlock:\n (attrs) =>\n ({ commands }) => {\n return commands.insertContent({\n type: \"imageBlock\",\n attrs: { src: attrs.src },\n });\n },\n\n setImageBlockAt:\n (attrs) =>\n ({ commands }) => {\n return commands.insertContentAt(attrs.pos, {\n type: \"imageBlock\",\n attrs: { src: attrs.src },\n });\n },\n\n setImageBlockAlign:\n (align) =>\n ({ commands }) =>\n commands.updateAttributes(\"imageBlock\", { align }),\n\n setImageBlockWidth:\n (width) =>\n ({ commands }) =>\n commands.updateAttributes(\"imageBlock\", {\n width: `${Math.max(0, Math.min(100, width))}%`,\n }),\n };\n },\n\n addNodeView() {\n //@ts-ignore\n return ReactNodeViewRenderer(ImageBlockView);\n },\n});\n\nexport default ImageBlock;\n"],"names":["ReactNodeViewRenderer","mergeAttributes","ImageBlockView","Image","ImageBlock","extend","name","group","defining","isolating","addAttributes","src","default","parseHTML","element","getAttribute","renderHTML","attributes","width","align","alt","undefined","tag","HTMLAttributes","options","addCommands","setImageBlock","attrs","commands","insertContent","type","setImageBlockAt","insertContentAt","pos","
|
|
1
|
+
{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/ImageBlock/ImageBlock.ts"],"sourcesContent":["\"use client\";\n\nimport { ReactNodeViewRenderer } from \"@tiptap/react\";\nimport { mergeAttributes, Range } from \"@tiptap/core\";\n\nimport { ImageBlockView } from \"./components/ImageBlockView.js\";\nimport { Image } from \"../Image/Image.js\";\n\ndeclare module \"@tiptap/core\" {\n interface Commands<ReturnType> {\n imageBlock: {\n setImageBlock: (attributes: {\n src: string;\n assetId?: string;\n }) => ReturnType;\n setImageBlockAt: (attributes: {\n src: string;\n pos: number | Range;\n assetId?: string;\n }) => ReturnType;\n setImageBlockAlign: (align: \"left\" | \"center\" | \"right\") => ReturnType;\n setImageBlockWidth: (width: number) => ReturnType;\n addImageCaption: (caption: string) => ReturnType;\n };\n }\n}\n\nexport const ImageBlock = Image.extend({\n name: \"imageBlock\",\n\n group: \"block\",\n\n defining: true,\n\n isolating: true,\n\n addAttributes() {\n return {\n src: {\n default: \"\",\n parseHTML: (element) => element.getAttribute(\"src\"),\n renderHTML: (attributes) => ({\n src: attributes.src,\n }),\n },\n width: {\n default: \"100%\",\n parseHTML: (element) => element.getAttribute(\"data-width\"),\n renderHTML: (attributes) => ({\n \"data-width\": attributes.width,\n }),\n },\n align: {\n default: \"center\",\n parseHTML: (element) => element.getAttribute(\"data-align\"),\n renderHTML: (attributes) => ({\n \"data-align\": attributes.align,\n }),\n },\n alt: {\n default: undefined,\n parseHTML: (element) => element.getAttribute(\"alt\"),\n renderHTML: (attributes) => ({\n alt: attributes.alt,\n }),\n },\n caption: {\n default: undefined,\n parseHTML: (element) => element.getAttribute(\"data-caption\"),\n renderHTML: (attributes) => ({\n \"data-caption\": attributes.caption,\n }),\n },\n };\n },\n\n parseHTML() {\n return [\n {\n tag: 'img[src*=\"tiptap.dev\"]:not([src^=\"data:\"]), img[src*=\"windows.net\"]:not([src^=\"data:\"])',\n },\n ];\n },\n\n renderHTML({ HTMLAttributes }) {\n return [\n \"img\",\n mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),\n ];\n },\n\n addCommands() {\n return {\n setImageBlock:\n (attrs) =>\n ({ commands }) => {\n return commands.insertContent({\n type: \"imageBlock\",\n attrs: { src: attrs.src },\n });\n },\n\n setImageBlockAt:\n (attrs) =>\n ({ commands }) => {\n return commands.insertContentAt(attrs.pos, {\n type: \"imageBlock\",\n attrs: { src: attrs.src },\n });\n },\n addImageCaption:\n (caption) =>\n ({ commands }) =>\n commands.updateAttributes(\"imageBlock\", { caption }),\n\n setImageBlockAlign:\n (align) =>\n ({ commands }) =>\n commands.updateAttributes(\"imageBlock\", { align }),\n\n setImageBlockWidth:\n (width) =>\n ({ commands }) =>\n commands.updateAttributes(\"imageBlock\", {\n width: `${Math.max(0, Math.min(100, width))}%`,\n }),\n };\n },\n\n addNodeView() {\n //@ts-ignore\n return ReactNodeViewRenderer(ImageBlockView);\n },\n});\n\nexport default ImageBlock;\n"],"names":["ReactNodeViewRenderer","mergeAttributes","ImageBlockView","Image","ImageBlock","extend","name","group","defining","isolating","addAttributes","src","default","parseHTML","element","getAttribute","renderHTML","attributes","width","align","alt","undefined","caption","tag","HTMLAttributes","options","addCommands","setImageBlock","attrs","commands","insertContent","type","setImageBlockAt","insertContentAt","pos","addImageCaption","updateAttributes","setImageBlockAlign","setImageBlockWidth","Math","max","min","addNodeView"],"mappings":"AAAA;AAEA,SAASA,qBAAqB,QAAQ,gBAAgB;AACtD,SAASC,eAAe,QAAe,eAAe;AAEtD,SAASC,cAAc,QAAQ,iCAAiC;AAChE,SAASC,KAAK,QAAQ,oBAAoB;AAqB1C,OAAO,MAAMC,aAAaD,MAAME,MAAM,CAAC;IACrCC,MAAM;IAENC,OAAO;IAEPC,UAAU;IAEVC,WAAW;IAEXC;QACE,OAAO;YACLC,KAAK;gBACHC,SAAS;gBACTC,WAAW,CAACC,UAAYA,QAAQC,YAAY,CAAC;gBAC7CC,YAAY,CAACC,aAAgB,CAAA;wBAC3BN,KAAKM,WAAWN,GAAG;oBACrB,CAAA;YACF;YACAO,OAAO;gBACLN,SAAS;gBACTC,WAAW,CAACC,UAAYA,QAAQC,YAAY,CAAC;gBAC7CC,YAAY,CAACC,aAAgB,CAAA;wBAC3B,cAAcA,WAAWC,KAAK;oBAChC,CAAA;YACF;YACAC,OAAO;gBACLP,SAAS;gBACTC,WAAW,CAACC,UAAYA,QAAQC,YAAY,CAAC;gBAC7CC,YAAY,CAACC,aAAgB,CAAA;wBAC3B,cAAcA,WAAWE,KAAK;oBAChC,CAAA;YACF;YACAC,KAAK;gBACHR,SAASS;gBACTR,WAAW,CAACC,UAAYA,QAAQC,YAAY,CAAC;gBAC7CC,YAAY,CAACC,aAAgB,CAAA;wBAC3BG,KAAKH,WAAWG,GAAG;oBACrB,CAAA;YACF;YACAE,SAAS;gBACPV,SAASS;gBACTR,WAAW,CAACC,UAAYA,QAAQC,YAAY,CAAC;gBAC7CC,YAAY,CAACC,aAAgB,CAAA;wBAC3B,gBAAgBA,WAAWK,OAAO;oBACpC,CAAA;YACF;QACF;IACF;IAEAT;QACE,OAAO;YACL;gBACEU,KAAK;YACP;SACD;IACH;IAEAP,YAAW,EAAEQ,cAAc,EAAE;QAC3B,OAAO;YACL;YACAvB,gBAAgB,IAAI,CAACwB,OAAO,CAACD,cAAc,EAAEA;SAC9C;IACH;IAEAE;QACE,OAAO;YACLC,eACE,CAACC,QACD,CAAC,EAAEC,QAAQ,EAAE;oBACX,OAAOA,SAASC,aAAa,CAAC;wBAC5BC,MAAM;wBACNH,OAAO;4BAAEjB,KAAKiB,MAAMjB,GAAG;wBAAC;oBAC1B;gBACF;YAEFqB,iBACE,CAACJ,QACD,CAAC,EAAEC,QAAQ,EAAE;oBACX,OAAOA,SAASI,eAAe,CAACL,MAAMM,GAAG,EAAE;wBACzCH,MAAM;wBACNH,OAAO;4BAAEjB,KAAKiB,MAAMjB,GAAG;wBAAC;oBAC1B;gBACF;YACFwB,iBACE,CAACb,UACD,CAAC,EAAEO,QAAQ,EAAE,GACXA,SAASO,gBAAgB,CAAC,cAAc;wBAAEd;oBAAQ;YAEtDe,oBACE,CAAClB,QACD,CAAC,EAAEU,QAAQ,EAAE,GACXA,SAASO,gBAAgB,CAAC,cAAc;wBAAEjB;oBAAM;YAEpDmB,oBACE,CAACpB,QACD,CAAC,EAAEW,QAAQ,EAAE,GACXA,SAASO,gBAAgB,CAAC,cAAc;wBACtClB,OAAO,GAAGqB,KAAKC,GAAG,CAAC,GAAGD,KAAKE,GAAG,CAAC,KAAKvB,QAAQ,CAAC,CAAC;oBAChD;QACN;IACF;IAEAwB;QACE,YAAY;QACZ,OAAO1C,sBAAsBE;IAC/B;AACF,GAAG;AAEH,eAAeE,WAAW"}
|
package/dist/src/fields/TiptapEditor/extensions/ImageBlock/components/ImageBlockView.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageBlockView.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/extensions/ImageBlock/components/ImageBlockView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,MAAM,EAAmB,MAAM,eAAe,CAAC;AACxD,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,UAAU,mBAAmB;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,MAAM,CAAC;IACrB,IAAI,EAAE,IAAI,GAAG;QACX,KAAK,EAAE;YACL,GAAG,EAAE,MAAM,CAAC;SACb,CAAC;KACH,CAAC;IACF,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;CAC3D;AAED,eAAO,MAAM,cAAc,UAAW,mBAAmB,
|
|
1
|
+
{"version":3,"file":"ImageBlockView.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/extensions/ImageBlock/components/ImageBlockView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,MAAM,EAAmB,MAAM,eAAe,CAAC;AACxD,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,UAAU,mBAAmB;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,MAAM,CAAC;IACrB,IAAI,EAAE,IAAI,GAAG;QACX,KAAK,EAAE;YACL,GAAG,EAAE,MAAM,CAAC;SACb,CAAC;KACH,CAAC;IACF,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;CAC3D;AAED,eAAO,MAAM,cAAc,UAAW,mBAAmB,sBA+BxD,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { NodeViewWrapper } from "@tiptap/react";
|
|
3
3
|
import React, { useCallback, useRef } from "react";
|
|
4
4
|
import { cn } from "../../../lib/utils/index.js";
|
|
5
5
|
export const ImageBlockView = (props)=>{
|
|
6
6
|
const { editor, getPos, node } = props;
|
|
7
7
|
const imageWrapperRef = useRef(null);
|
|
8
|
-
const { src } = node.attrs;
|
|
8
|
+
const { src, caption } = node.attrs;
|
|
9
9
|
const wrapperClassName = cn(node.attrs.align === "left" ? "ml-0" : "ml-auto", node.attrs.align === "right" ? "mr-0" : "mr-auto", node.attrs.align === "center" && "mx-auto");
|
|
10
10
|
const onClick = useCallback(()=>{
|
|
11
11
|
editor.commands.setNodeSelection(getPos());
|
|
@@ -19,15 +19,25 @@ export const ImageBlockView = (props)=>{
|
|
|
19
19
|
style: {
|
|
20
20
|
width: node.attrs.width
|
|
21
21
|
},
|
|
22
|
-
children: /*#__PURE__*/
|
|
22
|
+
children: /*#__PURE__*/ _jsxs("div", {
|
|
23
23
|
contentEditable: false,
|
|
24
24
|
ref: imageWrapperRef,
|
|
25
|
-
children:
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
25
|
+
children: [
|
|
26
|
+
/*#__PURE__*/ _jsx("img", {
|
|
27
|
+
className: "block",
|
|
28
|
+
src: src,
|
|
29
|
+
alt: "",
|
|
30
|
+
onClick: onClick
|
|
31
|
+
}),
|
|
32
|
+
/*#__PURE__*/ _jsx("input", {
|
|
33
|
+
className: "w-full h-8 mb-2 placeholder-black text-sm focus:border focus:border-gray-300 text-gray-400 border-0 rounded appearance-none",
|
|
34
|
+
defaultValue: caption,
|
|
35
|
+
placeholder: "image caption placeholder",
|
|
36
|
+
onBlur: (e)=>{
|
|
37
|
+
editor.chain().focus().addImageCaption(e.target.value).run();
|
|
38
|
+
}
|
|
39
|
+
})
|
|
40
|
+
]
|
|
31
41
|
})
|
|
32
42
|
})
|
|
33
43
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/extensions/ImageBlock/components/ImageBlockView.tsx"],"sourcesContent":["import { Node } from \"@tiptap/pm/model\";\nimport { Editor, NodeViewWrapper } from \"@tiptap/react\";\nimport React, { useCallback, useRef } from \"react\";\nimport { cn } from \"../../../lib/utils/index.js\";\n\ninterface ImageBlockViewProps {\n editor: Editor;\n getPos: () => number;\n node: Node & {\n attrs: {\n src: string;\n };\n };\n updateAttributes: (attrs: Record<string, string>) => void;\n}\n\nexport const ImageBlockView = (props: ImageBlockViewProps) => {\n const { editor, getPos, node } = props;\n const imageWrapperRef = useRef<HTMLDivElement>(null);\n const { src } = node.attrs;\n
|
|
1
|
+
{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/extensions/ImageBlock/components/ImageBlockView.tsx"],"sourcesContent":["import { Node } from \"@tiptap/pm/model\";\nimport { Editor, NodeViewWrapper } from \"@tiptap/react\";\nimport React, { useCallback, useRef } from \"react\";\nimport { cn } from \"../../../lib/utils/index.js\";\n\ninterface ImageBlockViewProps {\n editor: Editor;\n getPos: () => number;\n node: Node & {\n attrs: {\n src: string;\n };\n };\n updateAttributes: (attrs: Record<string, string>) => void;\n}\n\nexport const ImageBlockView = (props: ImageBlockViewProps) => {\n const { editor, getPos, node } = props;\n const imageWrapperRef = useRef<HTMLDivElement>(null);\n const { src, caption } = node.attrs;\n const wrapperClassName = cn(\n node.attrs.align === \"left\" ? \"ml-0\" : \"ml-auto\",\n node.attrs.align === \"right\" ? \"mr-0\" : \"mr-auto\",\n node.attrs.align === \"center\" && \"mx-auto\"\n );\n\n const onClick = useCallback(() => {\n editor.commands.setNodeSelection(getPos());\n }, [getPos, editor.commands]);\n\n return (\n <NodeViewWrapper>\n <div className={wrapperClassName} style={{ width: node.attrs.width }}>\n <div contentEditable={false} ref={imageWrapperRef}>\n <img className=\"block\" src={src} alt=\"\" onClick={onClick} />\n <input\n className=\"w-full h-8 mb-2 placeholder-black text-sm focus:border focus:border-gray-300 text-gray-400 border-0 rounded appearance-none\"\n defaultValue={caption}\n placeholder=\"image caption placeholder\"\n onBlur={(e) => {\n editor.chain().focus().addImageCaption(e.target.value).run();\n }}\n />\n </div>\n </div>\n </NodeViewWrapper>\n );\n};\n\nexport default ImageBlockView;\n"],"names":["NodeViewWrapper","React","useCallback","useRef","cn","ImageBlockView","props","editor","getPos","node","imageWrapperRef","src","caption","attrs","wrapperClassName","align","onClick","commands","setNodeSelection","div","className","style","width","contentEditable","ref","img","alt","input","defaultValue","placeholder","onBlur","e","chain","focus","addImageCaption","target","value","run"],"mappings":";AACA,SAAiBA,eAAe,QAAQ,gBAAgB;AACxD,OAAOC,SAASC,WAAW,EAAEC,MAAM,QAAQ,QAAQ;AACnD,SAASC,EAAE,QAAQ,8BAA8B;AAajD,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAM,EAAEC,MAAM,EAAEC,MAAM,EAAEC,IAAI,EAAE,GAAGH;IACjC,MAAMI,kBAAkBP,OAAuB;IAC/C,MAAM,EAAEQ,GAAG,EAAEC,OAAO,EAAE,GAAGH,KAAKI,KAAK;IACnC,MAAMC,mBAAmBV,GACvBK,KAAKI,KAAK,CAACE,KAAK,KAAK,SAAS,SAAS,WACvCN,KAAKI,KAAK,CAACE,KAAK,KAAK,UAAU,SAAS,WACxCN,KAAKI,KAAK,CAACE,KAAK,KAAK,YAAY;IAGnC,MAAMC,UAAUd,YAAY;QAC1BK,OAAOU,QAAQ,CAACC,gBAAgB,CAACV;IACnC,GAAG;QAACA;QAAQD,OAAOU,QAAQ;KAAC;IAE5B,qBACE,KAACjB;kBACC,cAAA,KAACmB;YAAIC,WAAWN;YAAkBO,OAAO;gBAAEC,OAAOb,KAAKI,KAAK,CAACS,KAAK;YAAC;sBACjE,cAAA,MAACH;gBAAII,iBAAiB;gBAAOC,KAAKd;;kCAChC,KAACe;wBAAIL,WAAU;wBAAQT,KAAKA;wBAAKe,KAAI;wBAAGV,SAASA;;kCACjD,KAACW;wBACCP,WAAU;wBACVQ,cAAchB;wBACdiB,aAAY;wBACZC,QAAQ,CAACC;4BACPxB,OAAOyB,KAAK,GAAGC,KAAK,GAAGC,eAAe,CAACH,EAAEI,MAAM,CAACC,KAAK,EAAEC,GAAG;wBAC5D;;;;;;AAMZ,EAAE;AAEF,eAAehC,eAAe"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContentEmbedSupport.d.ts","sourceRoot":"","sources":["../../../../../../src/fields/TiptapEditor/extensions/serverside/ContentEmbedSupport.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ContentEmbedSupport.d.ts","sourceRoot":"","sources":["../../../../../../src/fields/TiptapEditor/extensions/serverside/ContentEmbedSupport.tsx"],"names":[],"mappings":"AAgJA,wBAAgB,mBAAmB,CAAC,EAAE,IAAI,EAAE;;CAAA,+BAwB3C"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
3
|
import { Portal } from "@radix-ui/react-portal";
|
|
4
4
|
import Image from "next/image.js";
|
|
5
5
|
import { memo, useEffect, useState } from "react";
|
|
@@ -53,21 +53,30 @@ const renderContent = (content)=>{
|
|
|
53
53
|
})
|
|
54
54
|
});
|
|
55
55
|
case "imageBlock":
|
|
56
|
-
return /*#__PURE__*/
|
|
57
|
-
|
|
58
|
-
"
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
56
|
+
return /*#__PURE__*/ _jsxs(_Fragment, {
|
|
57
|
+
children: [
|
|
58
|
+
/*#__PURE__*/ _jsx("div", {
|
|
59
|
+
className: cn("relative object-cover", {
|
|
60
|
+
"aspect-video": !content.attrs.height
|
|
61
|
+
}),
|
|
62
|
+
style: {
|
|
63
|
+
width: content.attrs.width || "100%",
|
|
64
|
+
...content.attrs.height ? {
|
|
65
|
+
height: content.attrs.height
|
|
66
|
+
} : {}
|
|
67
|
+
},
|
|
68
|
+
children: /*#__PURE__*/ _jsx(Image, {
|
|
69
|
+
className: "rounded",
|
|
70
|
+
src: content.attrs.src,
|
|
71
|
+
alt: content.attrs.alt || content.attrs.caption,
|
|
72
|
+
fill: true
|
|
73
|
+
})
|
|
74
|
+
}),
|
|
75
|
+
content.attrs?.caption ? /*#__PURE__*/ _jsx("p", {
|
|
76
|
+
className: cn("tiptap-image-caption", "pt-2 font-sf text-sm font-light text-grey-7 mx-6 sm:mx-0 line-clamp-2"),
|
|
77
|
+
children: content.attrs?.caption
|
|
78
|
+
}) : null
|
|
79
|
+
]
|
|
71
80
|
});
|
|
72
81
|
case "videoBlock":
|
|
73
82
|
// @ts-ignore
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/serverside/ContentEmbedSupport.tsx"],"sourcesContent":["\"use client\";\n\nimport { Portal } from \"@radix-ui/react-portal\";\nimport Image from \"next/image.js\";\nimport { ComponentProps, memo, useEffect, useState } from \"react\";\nimport {\n FacebookEmbed,\n InstagramEmbed,\n LinkedInEmbed,\n TikTokEmbed,\n XEmbed,\n YouTubeEmbed,\n} from \"react-social-media-embed\";\nimport { cn } from \"../../lib/utils/index.js\";\nimport VideoBlockViewClientside from \"../VideoBlock/components/VideoBlockViewClientside.js\";\nimport { SocialMediaEmbedServerside } from \"../SocialMedia/SocialMediaEmbedServerside.js\";\nimport InsideLinksComponent from \"../InsideLinks/InsideLinksComponent.js\";\n\nconst renderContent = (content) => {\n switch (content.type) {\n case \"twitter\":\n if (!checkIfValidLink(content.attrs.url)) {\n return null;\n }\n return (\n <SocialMediaEmbedServerside>\n <XEmbed url={content.attrs.url || \"\"} width={325} />\n </SocialMediaEmbedServerside>\n );\n case \"youtube\":\n if (!checkIfValidLink(content.attrs.url)) {\n return null;\n }\n return (\n <SocialMediaEmbedServerside>\n <YouTubeEmbed url={content.attrs.url || \"\"} />\n </SocialMediaEmbedServerside>\n );\n case \"instagram\":\n if (!checkIfValidLink(content.attrs.url)) {\n return null;\n }\n return (\n <SocialMediaEmbedServerside>\n <InstagramEmbed\n className=\"max-w-[328px]\"\n url={content.attrs.url || \"\"}\n width={328}\n captioned\n />\n </SocialMediaEmbedServerside>\n );\n case \"tiktok\":\n if (!checkIfValidLink(content.attrs.url)) {\n return null;\n }\n return (\n <SocialMediaEmbedServerside>\n <TikTokEmbed\n className=\"max-w-[328px]\"\n url={content.attrs.url || \"\"}\n width={328}\n />\n </SocialMediaEmbedServerside>\n );\n case \"imageBlock\":\n return (\n <div\n
|
|
1
|
+
{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/serverside/ContentEmbedSupport.tsx"],"sourcesContent":["\"use client\";\n\nimport { Portal } from \"@radix-ui/react-portal\";\nimport Image from \"next/image.js\";\nimport { ComponentProps, memo, useEffect, useState } from \"react\";\nimport {\n FacebookEmbed,\n InstagramEmbed,\n LinkedInEmbed,\n TikTokEmbed,\n XEmbed,\n YouTubeEmbed,\n} from \"react-social-media-embed\";\nimport { cn } from \"../../lib/utils/index.js\";\nimport VideoBlockViewClientside from \"../VideoBlock/components/VideoBlockViewClientside.js\";\nimport { SocialMediaEmbedServerside } from \"../SocialMedia/SocialMediaEmbedServerside.js\";\nimport InsideLinksComponent from \"../InsideLinks/InsideLinksComponent.js\";\n\nconst renderContent = (content) => {\n switch (content.type) {\n case \"twitter\":\n if (!checkIfValidLink(content.attrs.url)) {\n return null;\n }\n return (\n <SocialMediaEmbedServerside>\n <XEmbed url={content.attrs.url || \"\"} width={325} />\n </SocialMediaEmbedServerside>\n );\n case \"youtube\":\n if (!checkIfValidLink(content.attrs.url)) {\n return null;\n }\n return (\n <SocialMediaEmbedServerside>\n <YouTubeEmbed url={content.attrs.url || \"\"} />\n </SocialMediaEmbedServerside>\n );\n case \"instagram\":\n if (!checkIfValidLink(content.attrs.url)) {\n return null;\n }\n return (\n <SocialMediaEmbedServerside>\n <InstagramEmbed\n className=\"max-w-[328px]\"\n url={content.attrs.url || \"\"}\n width={328}\n captioned\n />\n </SocialMediaEmbedServerside>\n );\n case \"tiktok\":\n if (!checkIfValidLink(content.attrs.url)) {\n return null;\n }\n return (\n <SocialMediaEmbedServerside>\n <TikTokEmbed\n className=\"max-w-[328px]\"\n url={content.attrs.url || \"\"}\n width={328}\n />\n </SocialMediaEmbedServerside>\n );\n case \"imageBlock\":\n return (\n <>\n <div\n className={cn(\"relative object-cover\", {\n \"aspect-video\": !content.attrs.height,\n })}\n style={{\n width: content.attrs.width || \"100%\",\n ...(content.attrs.height ? { height: content.attrs.height } : {}),\n }}\n >\n {/* @ts-ignore */}\n <Image\n className=\"rounded\"\n src={content.attrs.src}\n alt={content.attrs.alt || content.attrs.caption}\n fill\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 case \"videoBlock\":\n // @ts-ignore\n return <VideoBlockViewClientside node={content} />;\n case \"facebook\":\n return (\n <SocialMediaEmbedServerside>\n <FacebookEmbed url={content.attrs.url || \"\"} width={550} />\n </SocialMediaEmbedServerside>\n );\n case \"linkedin\":\n if (!checkIfValidLink(content.attrs.url)) {\n return null;\n }\n return (\n <SocialMediaEmbedServerside>\n <LinkedInEmbed\n url={content.attrs.url || \"\"}\n width={325}\n height={570}\n />\n </SocialMediaEmbedServerside>\n );\n case \"insideLinks\":\n return <InsideLinksComponent {...content} />;\n case \"iframe\":\n return (\n <SocialMediaEmbedServerside>\n <div className=\"iframe-wrapper\">\n <iframe src={content?.attrs?.src ?? \"\"} allowFullScreen={true} />\n </div>\n </SocialMediaEmbedServerside>\n );\n default:\n return null;\n }\n};\n\nconst CustomPortal = memo(\n ({ content, ...props }: ComponentProps<typeof Portal>) => {\n useEffect(() => {}, []);\n return <Portal {...props}>{renderContent(content)}</Portal>;\n }\n);\n\nfunction checkIfValidLink(link: string) {\n return typeof link === \"string\";\n}\nexport function ContentEmbedSupport({ body }) {\n const [mounted, setMounted] = useState(false);\n useEffect(() => {\n setMounted(true);\n }, []);\n\n if (!mounted) return null;\n return (\n <>\n {body.content\n .filter((content) => content?.attrs?.[\"data-id\"])\n .map((content) => {\n return (\n <CustomPortal\n key={`embed-content-${content.attrs[\"data-id\"]}-${content.attrs.key}`}\n container={document?.querySelector(\n `[data-id='${content.attrs[\"data-id\"]}']`\n )}\n content={content}\n />\n );\n })}\n </>\n );\n}\n"],"names":["Portal","Image","memo","useEffect","useState","FacebookEmbed","InstagramEmbed","LinkedInEmbed","TikTokEmbed","XEmbed","YouTubeEmbed","cn","VideoBlockViewClientside","SocialMediaEmbedServerside","InsideLinksComponent","renderContent","content","type","checkIfValidLink","attrs","url","width","className","captioned","div","height","style","src","alt","caption","fill","p","node","iframe","allowFullScreen","CustomPortal","props","link","ContentEmbedSupport","body","mounted","setMounted","filter","map","container","document","querySelector","key"],"mappings":"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"}
|
package/dist/src/styles.css
CHANGED
|
@@ -1601,6 +1601,11 @@ select {
|
|
|
1601
1601
|
margin-right: 0.5rem;
|
|
1602
1602
|
}
|
|
1603
1603
|
|
|
1604
|
+
.mx-6 {
|
|
1605
|
+
margin-left: 1.5rem;
|
|
1606
|
+
margin-right: 1.5rem;
|
|
1607
|
+
}
|
|
1608
|
+
|
|
1604
1609
|
.mx-auto {
|
|
1605
1610
|
margin-left: auto;
|
|
1606
1611
|
margin-right: auto;
|
|
@@ -1712,6 +1717,13 @@ select {
|
|
|
1712
1717
|
margin-top: 1rem;
|
|
1713
1718
|
}
|
|
1714
1719
|
|
|
1720
|
+
.line-clamp-2 {
|
|
1721
|
+
overflow: hidden;
|
|
1722
|
+
display: -webkit-box;
|
|
1723
|
+
-webkit-box-orient: vertical;
|
|
1724
|
+
-webkit-line-clamp: 2;
|
|
1725
|
+
}
|
|
1726
|
+
|
|
1715
1727
|
.block {
|
|
1716
1728
|
display: block;
|
|
1717
1729
|
}
|
|
@@ -2500,6 +2512,10 @@ select {
|
|
|
2500
2512
|
font-weight: 700;
|
|
2501
2513
|
}
|
|
2502
2514
|
|
|
2515
|
+
.font-light {
|
|
2516
|
+
font-weight: 300;
|
|
2517
|
+
}
|
|
2518
|
+
|
|
2503
2519
|
.font-medium {
|
|
2504
2520
|
font-weight: 500;
|
|
2505
2521
|
}
|
|
@@ -2550,6 +2566,11 @@ select {
|
|
|
2550
2566
|
color: rgb(59 130 246 / var(--tw-text-opacity, 1));
|
|
2551
2567
|
}
|
|
2552
2568
|
|
|
2569
|
+
.text-gray-400 {
|
|
2570
|
+
--tw-text-opacity: 1;
|
|
2571
|
+
color: rgb(156 163 175 / var(--tw-text-opacity, 1));
|
|
2572
|
+
}
|
|
2573
|
+
|
|
2553
2574
|
.text-gray-500 {
|
|
2554
2575
|
--tw-text-opacity: 1;
|
|
2555
2576
|
color: rgb(107 114 128 / var(--tw-text-opacity, 1));
|
|
@@ -2604,6 +2625,16 @@ select {
|
|
|
2604
2625
|
text-decoration-line: underline;
|
|
2605
2626
|
}
|
|
2606
2627
|
|
|
2628
|
+
.placeholder-black::-moz-placeholder {
|
|
2629
|
+
--tw-placeholder-opacity: 1;
|
|
2630
|
+
color: rgb(0 0 0 / var(--tw-placeholder-opacity, 1));
|
|
2631
|
+
}
|
|
2632
|
+
|
|
2633
|
+
.placeholder-black::placeholder {
|
|
2634
|
+
--tw-placeholder-opacity: 1;
|
|
2635
|
+
color: rgb(0 0 0 / var(--tw-placeholder-opacity, 1));
|
|
2636
|
+
}
|
|
2637
|
+
|
|
2607
2638
|
.caret-black {
|
|
2608
2639
|
caret-color: #000;
|
|
2609
2640
|
}
|
|
@@ -2838,6 +2869,15 @@ select {
|
|
|
2838
2869
|
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
2839
2870
|
}
|
|
2840
2871
|
|
|
2872
|
+
.focus\:border:focus {
|
|
2873
|
+
border-width: 1px;
|
|
2874
|
+
}
|
|
2875
|
+
|
|
2876
|
+
.focus\:border-gray-300:focus {
|
|
2877
|
+
--tw-border-opacity: 1;
|
|
2878
|
+
border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
|
|
2879
|
+
}
|
|
2880
|
+
|
|
2841
2881
|
.focus\:bg-transparent:focus {
|
|
2842
2882
|
background-color: transparent;
|
|
2843
2883
|
}
|
|
@@ -3103,3 +3143,10 @@ select {
|
|
|
3103
3143
|
.dark\:active\:outline-white:active:is([data-theme="dark"] *) {
|
|
3104
3144
|
outline-color: #fff;
|
|
3105
3145
|
}
|
|
3146
|
+
|
|
3147
|
+
@media (min-width: 640px) {
|
|
3148
|
+
.sm\:mx-0 {
|
|
3149
|
+
margin-left: 0px;
|
|
3150
|
+
margin-right: 0px;
|
|
3151
|
+
}
|
|
3152
|
+
}
|