payload-richtext-tiptap 0.0.144 → 0.0.146
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/AudioBlock/AudioBlock.js.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/AudioBlock/components/AudioBlockMenu.js.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/FontSize/FontSize.js.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/Heading/Heading.js.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/ImageBlock/ImageBlock.js.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/ImageBlock/components/ImageBlockMenu.js.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/InsideLinks/InsideLink.client.js.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/LinkPreview/LinkPreview.d.ts.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/LinkPreview/LinkPreview.js +11 -7
- package/dist/src/fields/TiptapEditor/extensions/LinkPreview/LinkPreview.js.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/MultiColumn/Columns.js +3 -3
- package/dist/src/fields/TiptapEditor/extensions/MultiColumn/Columns.js.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/MultiColumn/menus/ColumnsMenu.js.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/SlashCommand/MenuList.js.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/SocialMedia/Facebook/facebook.js.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/SocialMedia/Instagram/instagram.js.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/SocialMedia/Tiktok/tiktok.js.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/SocialMedia/Twitter/twitter.js.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/SocialMedia/Youtube/youtube.js.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/VideoBlock/VideoBlock.js.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/VideoBlock/components/VideoBlockMenu.js.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/VideoBlock/components/videojs/quality-selector/events.d.ts.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/extension-kit.d.ts +1 -1
- package/dist/src/fields/TiptapEditor/extensions/extension-kit.d.ts.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/serverside/EmbedContentInlineRenderer.js.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/serverside/EmbedContentSideRenderer.js.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/serverside/EmbedContentSidebarRenderer.js.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/serverside/FacebookServerside.js.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/serverside/InstagramServerside.js.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/serverside/LinkedinServerside.js.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/serverside/ServersideTiptapBody.js +1 -1
- package/dist/src/fields/TiptapEditor/extensions/serverside/ServersideTiptapBody.js.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/serverside/TiktokServerside.js.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/serverside/TwitterBlockServerside.js.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/serverside/YouTubeServerside.js.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/serverside/getAssetsAspectRatio.js.map +1 -1
- package/dist/src/fields/TiptapEditor/features/menus/TextMenu/components/FontFamilyPicker.js.map +1 -1
- package/dist/src/fields/TiptapEditor/features/menus/TextMenu/components/FontSizePicker.js.map +1 -1
- package/dist/src/fields/TiptapEditor/features/panels/AICommandPanel/AICommandPanel.js.map +1 -1
- package/dist/src/fields/TiptapEditor/features/panels/AIEditorPanel/utils.js.map +1 -1
- package/dist/src/fields/TiptapEditor/hooks/useBlockEditor.js.map +1 -1
- package/dist/src/fields/TiptapEditor/lib/tiptapSchema.d.ts +62 -62
- package/dist/src/fields/TiptapEditor/lib/utils/cssVar.js.map +1 -1
- package/dist/src/mobile.css +1 -1
- package/dist/src/styles.css +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +200 -204
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/AudioBlock/AudioBlock.ts"],"sourcesContent":["\"use client\";\r\n\r\nimport { ReactNodeViewRenderer } from \"@tiptap/react\";\r\nimport { mergeAttributes, Range } from \"@tiptap/core\";\r\n\r\nimport { AudioBlockView } from \"./components/AudioBlockView.js\";\r\nimport { Audio } from \"../Audio/Audio.js\";\r\n\r\ndeclare module \"@tiptap/core\" {\r\n interface Commands<ReturnType> {\r\n audioBlock: {\r\n setAudioBlock: (attributes: {\r\n src: string;\r\n poster: string;\r\n assetId: string;\r\n playlistUrl?: string;\r\n }) => ReturnType;\r\n setAudioBlockAt: (attributes: {\r\n src: string;\r\n poster: string;\r\n assetId: string;\r\n playlistUrl?: string;\r\n\r\n pos: number | Range;\r\n }) => ReturnType;\r\n setAudioBlockAlign: (align: \"left\" | \"center\" | \"right\") => ReturnType;\r\n setAudioBlockWidth: (width: number) => ReturnType;\r\n setAudioBlockCaption: (caption: boolean) => ReturnType;\r\n };\r\n }\r\n}\r\n\r\nexport const AudioBlock = Audio.extend({\r\n name: \"audioBlock\",\r\n\r\n group: \"block\",\r\n\r\n defining: true,\r\n\r\n isolating: true,\r\n\r\n addAttributes() {\r\n return {\r\n src: {\r\n default: \"\",\r\n parseHTML: (element) => element.getAttribute(\"src\"),\r\n renderHTML: (attributes) => ({\r\n src: attributes.src,\r\n }),\r\n },\r\n poster: {\r\n default: \"\",\r\n parseHTML: (element) => element.getAttribute(\"poster\"),\r\n renderHTML: (attributes) => ({\r\n poster: attributes.poster,\r\n }),\r\n },\r\n playlistUrl: {\r\n default: \"\",\r\n parseHTML: (element) => element.getAttribute(\"data-playlist-url\"),\r\n renderHTML: (attributes) => ({\r\n \"data-playlist-url\": attributes.playlistUrl,\r\n }),\r\n },\r\n width: {\r\n default: \"100%\",\r\n parseHTML: (element) => element.getAttribute(\"data-width\"),\r\n renderHTML: (attributes) => ({\r\n \"data-width\": attributes.width,\r\n }),\r\n },\r\n align: {\r\n default: \"center\",\r\n parseHTML: (element) => element.getAttribute(\"data-align\"),\r\n renderHTML: (attributes) => ({\r\n \"data-align\": attributes.align,\r\n }),\r\n },\r\n alt: {\r\n default: undefined,\r\n parseHTML: (element) => element.getAttribute(\"alt\"),\r\n renderHTML: (attributes) => ({\r\n alt: attributes.alt,\r\n }),\r\n },\r\n caption: {\r\n default: true,\r\n parseHTML: (element) => element.getAttribute(\"data-caption\") === \"true\",\r\n renderHTML: (attributes) => ({\r\n \"data-caption\": attributes.caption,\r\n }),\r\n },\r\n };\r\n },\r\n\r\n parseHTML() {\r\n return [\r\n {\r\n tag: 'audio[src*=\"tiptap.dev\"]:not([src^=\"data:\"]), audio[src*=\"windows.net\"]:not([src^=\"data:\"])',\r\n },\r\n ];\r\n },\r\n\r\n renderHTML({ HTMLAttributes }) {\r\n return [\r\n \"audio\",\r\n mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),\r\n ];\r\n },\r\n\r\n addCommands() {\r\n return {\r\n setAudioBlock:\r\n (attrs) =>\r\n ({ commands }) => {\r\n return commands.insertContent({\r\n type: \"audioBlock\",\r\n attrs: {\r\n src: attrs.src,\r\n poster: attrs.poster,\r\n assetId: attrs.assetId,\r\n playlistUrl: attrs.playlistUrl,\r\n },\r\n });\r\n },\r\n\r\n setAudioBlockAt:\r\n (attrs) =>\r\n ({ commands }) => {\r\n return commands.insertContentAt(attrs.pos, {\r\n type: \"audioBlock\",\r\n attrs: {\r\n src: attrs.src,\r\n poster: attrs.poster,\r\n assetId: attrs.assetId,\r\n playlistUrl: attrs.playlistUrl,\r\n },\r\n });\r\n },\r\n\r\n setAudioBlockAlign:\r\n (align) =>\r\n ({ commands }) =>\r\n commands.updateAttributes(\"audioBlock\", { align }),\r\n\r\n setAudioBlockWidth:\r\n (width) =>\r\n ({ commands }) =>\r\n commands.updateAttributes(\"audioBlock\", {\r\n width: `${Math.max(0, Math.min(100, width))}%`,\r\n }),\r\n\r\n setAudioBlockCaption:\r\n (caption) =>\r\n ({ commands }) =>\r\n commands.updateAttributes(\"audioBlock\", { caption }),\r\n };\r\n },\r\n\r\n addNodeView() {\r\n //@ts-ignore\r\n return ReactNodeViewRenderer(AudioBlockView);\r\n },\r\n});\r\n\r\nexport default AudioBlock;\r\n"],"names":["ReactNodeViewRenderer","mergeAttributes","AudioBlockView","Audio","AudioBlock","extend","name","group","defining","isolating","addAttributes","src","default","parseHTML","element","getAttribute","renderHTML","attributes","poster","playlistUrl","width","align","alt","undefined","caption","tag","HTMLAttributes","options","addCommands","setAudioBlock","attrs","commands","insertContent","type","assetId","setAudioBlockAt","insertContentAt","pos","setAudioBlockAlign","updateAttributes","setAudioBlockWidth","Math","max","min","setAudioBlockCaption","addNodeView"],"mappings":"AAAA;AAEA,SAASA,qBAAqB,QAAQ,gBAAgB;AACtD,SAASC,eAAe,QAAe,eAAe;AAEtD,SAASC,cAAc,QAAQ,iCAAiC;AAChE,SAASC,KAAK,QAAQ,oBAAoB;AA0B1C,OAAO,MAAMC,aAAaD,MAAME,MAAM,CAAC;IACrCC,MAAM;IAENC,OAAO;IAEPC,UAAU;IAEVC,WAAW;IAEXC;QACE,OAAO;YACLC,KAAK;gBACHC,SAAS;gBACTC,WAAW,CAACC,UAAYA,QAAQC,YAAY,CAAC;gBAC7CC,YAAY,CAACC,aAAgB,CAAA;wBAC3BN,KAAKM,WAAWN,GAAG;oBACrB,CAAA;YACF;YACAO,QAAQ;gBACNN,SAAS;gBACTC,WAAW,CAACC,UAAYA,QAAQC,YAAY,CAAC;gBAC7CC,YAAY,CAACC,aAAgB,CAAA;wBAC3BC,QAAQD,WAAWC,MAAM;oBAC3B,CAAA;YACF;YACAC,aAAa;gBACXP,SAAS;gBACTC,WAAW,CAACC,UAAYA,QAAQC,YAAY,CAAC;gBAC7CC,YAAY,CAACC,aAAgB,CAAA;wBAC3B,qBAAqBA,WAAWE,WAAW;oBAC7C,CAAA;YACF;YACAC,OAAO;gBACLR,SAAS;gBACTC,WAAW,CAACC,UAAYA,QAAQC,YAAY,CAAC;gBAC7CC,YAAY,CAACC,aAAgB,CAAA;wBAC3B,cAAcA,WAAWG,KAAK;oBAChC,CAAA;YACF;YACAC,OAAO;gBACLT,SAAS;gBACTC,WAAW,CAACC,UAAYA,QAAQC,YAAY,CAAC;gBAC7CC,YAAY,CAACC,aAAgB,CAAA;wBAC3B,cAAcA,WAAWI,KAAK;oBAChC,CAAA;YACF;YACAC,KAAK;gBACHV,SAASW;gBACTV,WAAW,CAACC,UAAYA,QAAQC,YAAY,CAAC;gBAC7CC,YAAY,CAACC,aAAgB,CAAA;wBAC3BK,KAAKL,WAAWK,GAAG;oBACrB,CAAA;YACF;YACAE,SAAS;gBACPZ,SAAS;gBACTC,WAAW,CAACC,UAAYA,QAAQC,YAAY,CAAC,oBAAoB;gBACjEC,YAAY,CAACC,aAAgB,CAAA;wBAC3B,gBAAgBA,WAAWO,OAAO;oBACpC,CAAA;YACF;QACF;IACF;IAEAX;QACE,OAAO;YACL;gBACEY,KAAK;YACP;SACD;IACH;IAEAT,YAAW,EAAEU,cAAc,EAAE;QAC3B,OAAO;YACL;YACAzB,gBAAgB,IAAI,CAAC0B,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;4BACLnB,KAAKmB,MAAMnB,GAAG;4BACdO,QAAQY,MAAMZ,MAAM;4BACpBgB,SAASJ,MAAMI,OAAO;4BACtBf,aAAaW,MAAMX,WAAW;wBAChC;oBACF;gBACF;YAEFgB,iBACE,CAACL,QACD,CAAC,EAAEC,QAAQ,EAAE;oBACX,OAAOA,SAASK,eAAe,CAACN,MAAMO,GAAG,EAAE;wBACzCJ,MAAM;wBACNH,OAAO;4BACLnB,KAAKmB,MAAMnB,GAAG;4BACdO,QAAQY,MAAMZ,MAAM;4BACpBgB,SAASJ,MAAMI,OAAO;4BACtBf,aAAaW,MAAMX,WAAW;wBAChC;oBACF;gBACF;YAEFmB,oBACE,CAACjB,QACD,CAAC,EAAEU,QAAQ,EAAE,GACXA,SAASQ,gBAAgB,CAAC,cAAc;wBAAElB;oBAAM;YAEpDmB,oBACE,CAACpB,QACD,CAAC,EAAEW,QAAQ,EAAE,GACXA,SAASQ,gBAAgB,CAAC,cAAc;wBACtCnB,OAAO,
|
|
1
|
+
{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/AudioBlock/AudioBlock.ts"],"sourcesContent":["\"use client\";\r\n\r\nimport { ReactNodeViewRenderer } from \"@tiptap/react\";\r\nimport { mergeAttributes, Range } from \"@tiptap/core\";\r\n\r\nimport { AudioBlockView } from \"./components/AudioBlockView.js\";\r\nimport { Audio } from \"../Audio/Audio.js\";\r\n\r\ndeclare module \"@tiptap/core\" {\r\n interface Commands<ReturnType> {\r\n audioBlock: {\r\n setAudioBlock: (attributes: {\r\n src: string;\r\n poster: string;\r\n assetId: string;\r\n playlistUrl?: string;\r\n }) => ReturnType;\r\n setAudioBlockAt: (attributes: {\r\n src: string;\r\n poster: string;\r\n assetId: string;\r\n playlistUrl?: string;\r\n\r\n pos: number | Range;\r\n }) => ReturnType;\r\n setAudioBlockAlign: (align: \"left\" | \"center\" | \"right\") => ReturnType;\r\n setAudioBlockWidth: (width: number) => ReturnType;\r\n setAudioBlockCaption: (caption: boolean) => ReturnType;\r\n };\r\n }\r\n}\r\n\r\nexport const AudioBlock = Audio.extend({\r\n name: \"audioBlock\",\r\n\r\n group: \"block\",\r\n\r\n defining: true,\r\n\r\n isolating: true,\r\n\r\n addAttributes() {\r\n return {\r\n src: {\r\n default: \"\",\r\n parseHTML: (element) => element.getAttribute(\"src\"),\r\n renderHTML: (attributes) => ({\r\n src: attributes.src,\r\n }),\r\n },\r\n poster: {\r\n default: \"\",\r\n parseHTML: (element) => element.getAttribute(\"poster\"),\r\n renderHTML: (attributes) => ({\r\n poster: attributes.poster,\r\n }),\r\n },\r\n playlistUrl: {\r\n default: \"\",\r\n parseHTML: (element) => element.getAttribute(\"data-playlist-url\"),\r\n renderHTML: (attributes) => ({\r\n \"data-playlist-url\": attributes.playlistUrl,\r\n }),\r\n },\r\n width: {\r\n default: \"100%\",\r\n parseHTML: (element) => element.getAttribute(\"data-width\"),\r\n renderHTML: (attributes) => ({\r\n \"data-width\": attributes.width,\r\n }),\r\n },\r\n align: {\r\n default: \"center\",\r\n parseHTML: (element) => element.getAttribute(\"data-align\"),\r\n renderHTML: (attributes) => ({\r\n \"data-align\": attributes.align,\r\n }),\r\n },\r\n alt: {\r\n default: undefined,\r\n parseHTML: (element) => element.getAttribute(\"alt\"),\r\n renderHTML: (attributes) => ({\r\n alt: attributes.alt,\r\n }),\r\n },\r\n caption: {\r\n default: true,\r\n parseHTML: (element) => element.getAttribute(\"data-caption\") === \"true\",\r\n renderHTML: (attributes) => ({\r\n \"data-caption\": attributes.caption,\r\n }),\r\n },\r\n };\r\n },\r\n\r\n parseHTML() {\r\n return [\r\n {\r\n tag: 'audio[src*=\"tiptap.dev\"]:not([src^=\"data:\"]), audio[src*=\"windows.net\"]:not([src^=\"data:\"])',\r\n },\r\n ];\r\n },\r\n\r\n renderHTML({ HTMLAttributes }) {\r\n return [\r\n \"audio\",\r\n mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),\r\n ];\r\n },\r\n\r\n addCommands() {\r\n return {\r\n setAudioBlock:\r\n (attrs) =>\r\n ({ commands }) => {\r\n return commands.insertContent({\r\n type: \"audioBlock\",\r\n attrs: {\r\n src: attrs.src,\r\n poster: attrs.poster,\r\n assetId: attrs.assetId,\r\n playlistUrl: attrs.playlistUrl,\r\n },\r\n });\r\n },\r\n\r\n setAudioBlockAt:\r\n (attrs) =>\r\n ({ commands }) => {\r\n return commands.insertContentAt(attrs.pos, {\r\n type: \"audioBlock\",\r\n attrs: {\r\n src: attrs.src,\r\n poster: attrs.poster,\r\n assetId: attrs.assetId,\r\n playlistUrl: attrs.playlistUrl,\r\n },\r\n });\r\n },\r\n\r\n setAudioBlockAlign:\r\n (align) =>\r\n ({ commands }) =>\r\n commands.updateAttributes(\"audioBlock\", { align }),\r\n\r\n setAudioBlockWidth:\r\n (width) =>\r\n ({ commands }) =>\r\n commands.updateAttributes(\"audioBlock\", {\r\n width: `${Math.max(0, Math.min(100, width))}%`,\r\n }),\r\n\r\n setAudioBlockCaption:\r\n (caption) =>\r\n ({ commands }) =>\r\n commands.updateAttributes(\"audioBlock\", { caption }),\r\n };\r\n },\r\n\r\n addNodeView() {\r\n //@ts-ignore\r\n return ReactNodeViewRenderer(AudioBlockView);\r\n },\r\n});\r\n\r\nexport default AudioBlock;\r\n"],"names":["ReactNodeViewRenderer","mergeAttributes","AudioBlockView","Audio","AudioBlock","extend","name","group","defining","isolating","addAttributes","src","default","parseHTML","element","getAttribute","renderHTML","attributes","poster","playlistUrl","width","align","alt","undefined","caption","tag","HTMLAttributes","options","addCommands","setAudioBlock","attrs","commands","insertContent","type","assetId","setAudioBlockAt","insertContentAt","pos","setAudioBlockAlign","updateAttributes","setAudioBlockWidth","Math","max","min","setAudioBlockCaption","addNodeView"],"mappings":"AAAA;AAEA,SAASA,qBAAqB,QAAQ,gBAAgB;AACtD,SAASC,eAAe,QAAe,eAAe;AAEtD,SAASC,cAAc,QAAQ,iCAAiC;AAChE,SAASC,KAAK,QAAQ,oBAAoB;AA0B1C,OAAO,MAAMC,aAAaD,MAAME,MAAM,CAAC;IACrCC,MAAM;IAENC,OAAO;IAEPC,UAAU;IAEVC,WAAW;IAEXC;QACE,OAAO;YACLC,KAAK;gBACHC,SAAS;gBACTC,WAAW,CAACC,UAAYA,QAAQC,YAAY,CAAC;gBAC7CC,YAAY,CAACC,aAAgB,CAAA;wBAC3BN,KAAKM,WAAWN,GAAG;oBACrB,CAAA;YACF;YACAO,QAAQ;gBACNN,SAAS;gBACTC,WAAW,CAACC,UAAYA,QAAQC,YAAY,CAAC;gBAC7CC,YAAY,CAACC,aAAgB,CAAA;wBAC3BC,QAAQD,WAAWC,MAAM;oBAC3B,CAAA;YACF;YACAC,aAAa;gBACXP,SAAS;gBACTC,WAAW,CAACC,UAAYA,QAAQC,YAAY,CAAC;gBAC7CC,YAAY,CAACC,aAAgB,CAAA;wBAC3B,qBAAqBA,WAAWE,WAAW;oBAC7C,CAAA;YACF;YACAC,OAAO;gBACLR,SAAS;gBACTC,WAAW,CAACC,UAAYA,QAAQC,YAAY,CAAC;gBAC7CC,YAAY,CAACC,aAAgB,CAAA;wBAC3B,cAAcA,WAAWG,KAAK;oBAChC,CAAA;YACF;YACAC,OAAO;gBACLT,SAAS;gBACTC,WAAW,CAACC,UAAYA,QAAQC,YAAY,CAAC;gBAC7CC,YAAY,CAACC,aAAgB,CAAA;wBAC3B,cAAcA,WAAWI,KAAK;oBAChC,CAAA;YACF;YACAC,KAAK;gBACHV,SAASW;gBACTV,WAAW,CAACC,UAAYA,QAAQC,YAAY,CAAC;gBAC7CC,YAAY,CAACC,aAAgB,CAAA;wBAC3BK,KAAKL,WAAWK,GAAG;oBACrB,CAAA;YACF;YACAE,SAAS;gBACPZ,SAAS;gBACTC,WAAW,CAACC,UAAYA,QAAQC,YAAY,CAAC,oBAAoB;gBACjEC,YAAY,CAACC,aAAgB,CAAA;wBAC3B,gBAAgBA,WAAWO,OAAO;oBACpC,CAAA;YACF;QACF;IACF;IAEAX;QACE,OAAO;YACL;gBACEY,KAAK;YACP;SACD;IACH;IAEAT,YAAW,EAAEU,cAAc,EAAE;QAC3B,OAAO;YACL;YACAzB,gBAAgB,IAAI,CAAC0B,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;4BACLnB,KAAKmB,MAAMnB,GAAG;4BACdO,QAAQY,MAAMZ,MAAM;4BACpBgB,SAASJ,MAAMI,OAAO;4BACtBf,aAAaW,MAAMX,WAAW;wBAChC;oBACF;gBACF;YAEFgB,iBACE,CAACL,QACD,CAAC,EAAEC,QAAQ,EAAE;oBACX,OAAOA,SAASK,eAAe,CAACN,MAAMO,GAAG,EAAE;wBACzCJ,MAAM;wBACNH,OAAO;4BACLnB,KAAKmB,MAAMnB,GAAG;4BACdO,QAAQY,MAAMZ,MAAM;4BACpBgB,SAASJ,MAAMI,OAAO;4BACtBf,aAAaW,MAAMX,WAAW;wBAChC;oBACF;gBACF;YAEFmB,oBACE,CAACjB,QACD,CAAC,EAAEU,QAAQ,EAAE,GACXA,SAASQ,gBAAgB,CAAC,cAAc;wBAAElB;oBAAM;YAEpDmB,oBACE,CAACpB,QACD,CAAC,EAAEW,QAAQ,EAAE,GACXA,SAASQ,gBAAgB,CAAC,cAAc;wBACtCnB,OAAO,GAAGqB,KAAKC,GAAG,CAAC,GAAGD,KAAKE,GAAG,CAAC,KAAKvB,QAAQ,CAAC,CAAC;oBAChD;YAEJwB,sBACE,CAACpB,UACD,CAAC,EAAEO,QAAQ,EAAE,GACXA,SAASQ,gBAAgB,CAAC,cAAc;wBAAEf;oBAAQ;QACxD;IACF;IAEAqB;QACE,YAAY;QACZ,OAAO7C,sBAAsBE;IAC/B;AACF,GAAG;AAEH,eAAeE,WAAW"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/extensions/AudioBlock/components/AudioBlockMenu.tsx"],"sourcesContent":["import { BubbleMenu as BaseBubbleMenu } from \"@tiptap/react\";\r\nimport { ReactNode, useCallback, useRef } from \"react\";\r\nimport { Instance, sticky } from \"tippy.js\";\r\nimport { v4 as uuid } from \"uuid\";\r\n\r\nimport {\r\n AlignHorizontalDistributeCenter,\r\n AlignHorizontalDistributeEnd,\r\n AlignHorizontalDistributeStart,\r\n Pencil,\r\n PencilOff,\r\n} from \"lucide-react\";\r\nimport { MenuProps } from \"../../../features/menus/types.js\";\r\nimport { Icon } from \"../../../features/ui/Icon.js\";\r\nimport { Toolbar } from \"../../../features/ui/Toolbar.js\";\r\nimport { getRenderContainer } from \"../../../lib/utils/index.js\";\r\nimport { AudioBlockWidth } from \"./AudioBlockWidth.js\";\r\nimport i18next from \"i18next\";\r\n\r\nexport const AudioBlockMenu = ({ editor, appendTo }: MenuProps): ReactNode => {\r\n const menuRef = useRef<HTMLDivElement>(null);\r\n const tippyInstance = useRef<Instance | null>(null);\r\n\r\n const getReferenceClientRect = useCallback(() => {\r\n const renderContainer = getRenderContainer(editor, \"node-audioBlock\");\r\n const rect =\r\n renderContainer?.getBoundingClientRect() ||\r\n new DOMRect(-1000, -1000, 0, 0);\r\n\r\n return rect;\r\n }, [editor]);\r\n\r\n const shouldShow = useCallback(() => {\r\n const isActive = editor.isActive(\"audioBlock\");\r\n\r\n return isActive;\r\n }, [editor]);\r\n\r\n const onAlignAudioLeft = useCallback(() => {\r\n editor\r\n .chain()\r\n .focus(undefined, { scrollIntoView: false })\r\n .setAudioBlockAlign(\"left\")\r\n .run();\r\n }, [editor]);\r\n\r\n const onAlignAudioCenter = useCallback(() => {\r\n editor\r\n .chain()\r\n .focus(undefined, { scrollIntoView: false })\r\n .setAudioBlockAlign(\"center\")\r\n .run();\r\n }, [editor]);\r\n\r\n const onAlignAudioRight = useCallback(() => {\r\n editor\r\n .chain()\r\n .focus(undefined, { scrollIntoView: false })\r\n .setAudioBlockAlign(\"right\")\r\n .run();\r\n }, [editor]);\r\n\r\n const onHideCaption = useCallback(() => {\r\n editor\r\n .chain()\r\n .focus(undefined, { scrollIntoView: false })\r\n .setAudioBlockCaption(\r\n editor.isActive(\"audioBlock\", { caption: false }) ? true : false\r\n )\r\n .run();\r\n }, [editor]);\r\n\r\n const onWidthChange = useCallback(\r\n (value: number) => {\r\n editor\r\n .chain()\r\n .focus(undefined, { scrollIntoView: false })\r\n .setAudioBlockWidth(value)\r\n .run();\r\n },\r\n [editor]\r\n );\r\n\r\n return (\r\n <BaseBubbleMenu\r\n editor={editor}\r\n pluginKey={`audioBlockMenu-${uuid()}`}\r\n shouldShow={shouldShow}\r\n updateDelay={0}\r\n tippyOptions={{\r\n offset: [0, 8],\r\n popperOptions: {\r\n modifiers: [{ name: \"flip\", enabled: false }],\r\n },\r\n getReferenceClientRect,\r\n onCreate: (instance: Instance) => {\r\n tippyInstance.current = instance;\r\n },\r\n appendTo: () => {\r\n return appendTo?.current;\r\n },\r\n plugins: [sticky],\r\n sticky: \"popper\",\r\n }}\r\n >\r\n <Toolbar.Wrapper shouldShowContent={shouldShow()} ref={menuRef}>\r\n <Toolbar.Button\r\n type=\"button\"\r\n tooltip={i18next.t(\"toggleCaption\") || \"Hide/Show caption\"}\r\n active={editor.isActive(\"audioBlock\", { caption: false })}\r\n onClick={onHideCaption}\r\n >\r\n <Icon\r\n icon={\r\n editor.isActive(\"audioBlock\", { caption: false })\r\n ? PencilOff\r\n : Pencil\r\n }\r\n />\r\n </Toolbar.Button>\r\n <Toolbar.Button\r\n type=\"button\"\r\n tooltip={i18next.t(\"alignAudioLeft\") || \"Align audio left\"}\r\n active={editor.isActive(\"audioBlock\", { align: \"left\" })}\r\n onClick={onAlignAudioLeft}\r\n >\r\n <Icon icon={AlignHorizontalDistributeStart} />\r\n </Toolbar.Button>\r\n <Toolbar.Button\r\n type=\"button\"\r\n tooltip={i18next.t(\"alignAudioCenter\") || \"Align audio center\"}\r\n active={editor.isActive(\"audioBlock\", { align: \"center\" })}\r\n onClick={onAlignAudioCenter}\r\n >\r\n <Icon icon={AlignHorizontalDistributeCenter} />\r\n </Toolbar.Button>\r\n <Toolbar.Button\r\n type=\"button\"\r\n tooltip={i18next.t(\"alignAudioRight\") || \"Align audio right\"}\r\n active={editor.isActive(\"audioBlock\", { align: \"right\" })}\r\n onClick={onAlignAudioRight}\r\n >\r\n <Icon icon={AlignHorizontalDistributeEnd} />\r\n </Toolbar.Button>\r\n <Toolbar.Divider />\r\n <AudioBlockWidth\r\n onChange={onWidthChange}\r\n value={parseInt(editor.getAttributes(\"audioBlock\").width)}\r\n />\r\n </Toolbar.Wrapper>\r\n </BaseBubbleMenu>\r\n );\r\n};\r\n\r\nexport default AudioBlockMenu;\r\n"],"names":["BubbleMenu","BaseBubbleMenu","useCallback","useRef","sticky","v4","uuid","AlignHorizontalDistributeCenter","AlignHorizontalDistributeEnd","AlignHorizontalDistributeStart","Pencil","PencilOff","Icon","Toolbar","getRenderContainer","AudioBlockWidth","i18next","AudioBlockMenu","editor","appendTo","menuRef","tippyInstance","getReferenceClientRect","renderContainer","rect","getBoundingClientRect","DOMRect","shouldShow","isActive","onAlignAudioLeft","chain","focus","undefined","scrollIntoView","setAudioBlockAlign","run","onAlignAudioCenter","onAlignAudioRight","onHideCaption","setAudioBlockCaption","caption","onWidthChange","value","setAudioBlockWidth","pluginKey","updateDelay","tippyOptions","offset","popperOptions","modifiers","name","enabled","onCreate","instance","current","plugins","Wrapper","shouldShowContent","ref","Button","type","tooltip","t","active","onClick","icon","align","Divider","onChange","parseInt","getAttributes","width"],"mappings":";AAAA,SAASA,cAAcC,cAAc,QAAQ,gBAAgB;AAC7D,SAAoBC,WAAW,EAAEC,MAAM,QAAQ,QAAQ;AACvD,SAAmBC,MAAM,QAAQ,WAAW;AAC5C,SAASC,MAAMC,IAAI,QAAQ,OAAO;AAElC,SACEC,+BAA+B,EAC/BC,4BAA4B,EAC5BC,8BAA8B,EAC9BC,MAAM,EACNC,SAAS,QACJ,eAAe;AAEtB,SAASC,IAAI,QAAQ,+BAA+B;AACpD,SAASC,OAAO,QAAQ,kCAAkC;AAC1D,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SAASC,eAAe,QAAQ,uBAAuB;AACvD,OAAOC,aAAa,UAAU;AAE9B,OAAO,MAAMC,iBAAiB,CAAC,EAAEC,MAAM,EAAEC,QAAQ,EAAa;IAC5D,MAAMC,UAAUjB,OAAuB;IACvC,MAAMkB,gBAAgBlB,OAAwB;IAE9C,MAAMmB,yBAAyBpB,YAAY;QACzC,MAAMqB,kBAAkBT,mBAAmBI,QAAQ;QACnD,MAAMM,OACJD,iBAAiBE,2BACjB,IAAIC,QAAQ,CAAC,MAAM,CAAC,MAAM,GAAG;QAE/B,OAAOF;IACT,GAAG;QAACN;KAAO;IAEX,MAAMS,aAAazB,YAAY;QAC7B,MAAM0B,WAAWV,OAAOU,QAAQ,CAAC;QAEjC,OAAOA;IACT,GAAG;QAACV;KAAO;IAEX,MAAMW,mBAAmB3B,YAAY;QACnCgB,OACGY,KAAK,GACLC,KAAK,CAACC,WAAW;YAAEC,gBAAgB;QAAM,GACzCC,kBAAkB,CAAC,QACnBC,GAAG;IACR,GAAG;QAACjB;KAAO;IAEX,MAAMkB,qBAAqBlC,YAAY;QACrCgB,OACGY,KAAK,GACLC,KAAK,CAACC,WAAW;YAAEC,gBAAgB;QAAM,GACzCC,kBAAkB,CAAC,UACnBC,GAAG;IACR,GAAG;QAACjB;KAAO;IAEX,MAAMmB,oBAAoBnC,YAAY;QACpCgB,OACGY,KAAK,GACLC,KAAK,CAACC,WAAW;YAAEC,gBAAgB;QAAM,GACzCC,kBAAkB,CAAC,SACnBC,GAAG;IACR,GAAG;QAACjB;KAAO;IAEX,MAAMoB,gBAAgBpC,YAAY;QAChCgB,OACGY,KAAK,GACLC,KAAK,CAACC,WAAW;YAAEC,gBAAgB;QAAM,GACzCM,oBAAoB,CACnBrB,OAAOU,QAAQ,CAAC,cAAc;YAAEY,SAAS;QAAM,KAAK,OAAO,OAE5DL,GAAG;IACR,GAAG;QAACjB;KAAO;IAEX,MAAMuB,gBAAgBvC,YACpB,CAACwC;QACCxB,OACGY,KAAK,GACLC,KAAK,CAACC,WAAW;YAAEC,gBAAgB;QAAM,GACzCU,kBAAkB,CAACD,OACnBP,GAAG;IACR,GACA;QAACjB;KAAO;IAGV,qBACE,KAACjB;QACCiB,QAAQA;QACR0B,WAAW,CAAC,eAAe,EAAEtC,
|
|
1
|
+
{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/extensions/AudioBlock/components/AudioBlockMenu.tsx"],"sourcesContent":["import { BubbleMenu as BaseBubbleMenu } from \"@tiptap/react\";\r\nimport { ReactNode, useCallback, useRef } from \"react\";\r\nimport { Instance, sticky } from \"tippy.js\";\r\nimport { v4 as uuid } from \"uuid\";\r\n\r\nimport {\r\n AlignHorizontalDistributeCenter,\r\n AlignHorizontalDistributeEnd,\r\n AlignHorizontalDistributeStart,\r\n Pencil,\r\n PencilOff,\r\n} from \"lucide-react\";\r\nimport { MenuProps } from \"../../../features/menus/types.js\";\r\nimport { Icon } from \"../../../features/ui/Icon.js\";\r\nimport { Toolbar } from \"../../../features/ui/Toolbar.js\";\r\nimport { getRenderContainer } from \"../../../lib/utils/index.js\";\r\nimport { AudioBlockWidth } from \"./AudioBlockWidth.js\";\r\nimport i18next from \"i18next\";\r\n\r\nexport const AudioBlockMenu = ({ editor, appendTo }: MenuProps): ReactNode => {\r\n const menuRef = useRef<HTMLDivElement>(null);\r\n const tippyInstance = useRef<Instance | null>(null);\r\n\r\n const getReferenceClientRect = useCallback(() => {\r\n const renderContainer = getRenderContainer(editor, \"node-audioBlock\");\r\n const rect =\r\n renderContainer?.getBoundingClientRect() ||\r\n new DOMRect(-1000, -1000, 0, 0);\r\n\r\n return rect;\r\n }, [editor]);\r\n\r\n const shouldShow = useCallback(() => {\r\n const isActive = editor.isActive(\"audioBlock\");\r\n\r\n return isActive;\r\n }, [editor]);\r\n\r\n const onAlignAudioLeft = useCallback(() => {\r\n editor\r\n .chain()\r\n .focus(undefined, { scrollIntoView: false })\r\n .setAudioBlockAlign(\"left\")\r\n .run();\r\n }, [editor]);\r\n\r\n const onAlignAudioCenter = useCallback(() => {\r\n editor\r\n .chain()\r\n .focus(undefined, { scrollIntoView: false })\r\n .setAudioBlockAlign(\"center\")\r\n .run();\r\n }, [editor]);\r\n\r\n const onAlignAudioRight = useCallback(() => {\r\n editor\r\n .chain()\r\n .focus(undefined, { scrollIntoView: false })\r\n .setAudioBlockAlign(\"right\")\r\n .run();\r\n }, [editor]);\r\n\r\n const onHideCaption = useCallback(() => {\r\n editor\r\n .chain()\r\n .focus(undefined, { scrollIntoView: false })\r\n .setAudioBlockCaption(\r\n editor.isActive(\"audioBlock\", { caption: false }) ? true : false\r\n )\r\n .run();\r\n }, [editor]);\r\n\r\n const onWidthChange = useCallback(\r\n (value: number) => {\r\n editor\r\n .chain()\r\n .focus(undefined, { scrollIntoView: false })\r\n .setAudioBlockWidth(value)\r\n .run();\r\n },\r\n [editor]\r\n );\r\n\r\n return (\r\n <BaseBubbleMenu\r\n editor={editor}\r\n pluginKey={`audioBlockMenu-${uuid()}`}\r\n shouldShow={shouldShow}\r\n updateDelay={0}\r\n tippyOptions={{\r\n offset: [0, 8],\r\n popperOptions: {\r\n modifiers: [{ name: \"flip\", enabled: false }],\r\n },\r\n getReferenceClientRect,\r\n onCreate: (instance: Instance) => {\r\n tippyInstance.current = instance;\r\n },\r\n appendTo: () => {\r\n return appendTo?.current;\r\n },\r\n plugins: [sticky],\r\n sticky: \"popper\",\r\n }}\r\n >\r\n <Toolbar.Wrapper shouldShowContent={shouldShow()} ref={menuRef}>\r\n <Toolbar.Button\r\n type=\"button\"\r\n tooltip={i18next.t(\"toggleCaption\") || \"Hide/Show caption\"}\r\n active={editor.isActive(\"audioBlock\", { caption: false })}\r\n onClick={onHideCaption}\r\n >\r\n <Icon\r\n icon={\r\n editor.isActive(\"audioBlock\", { caption: false })\r\n ? PencilOff\r\n : Pencil\r\n }\r\n />\r\n </Toolbar.Button>\r\n <Toolbar.Button\r\n type=\"button\"\r\n tooltip={i18next.t(\"alignAudioLeft\") || \"Align audio left\"}\r\n active={editor.isActive(\"audioBlock\", { align: \"left\" })}\r\n onClick={onAlignAudioLeft}\r\n >\r\n <Icon icon={AlignHorizontalDistributeStart} />\r\n </Toolbar.Button>\r\n <Toolbar.Button\r\n type=\"button\"\r\n tooltip={i18next.t(\"alignAudioCenter\") || \"Align audio center\"}\r\n active={editor.isActive(\"audioBlock\", { align: \"center\" })}\r\n onClick={onAlignAudioCenter}\r\n >\r\n <Icon icon={AlignHorizontalDistributeCenter} />\r\n </Toolbar.Button>\r\n <Toolbar.Button\r\n type=\"button\"\r\n tooltip={i18next.t(\"alignAudioRight\") || \"Align audio right\"}\r\n active={editor.isActive(\"audioBlock\", { align: \"right\" })}\r\n onClick={onAlignAudioRight}\r\n >\r\n <Icon icon={AlignHorizontalDistributeEnd} />\r\n </Toolbar.Button>\r\n <Toolbar.Divider />\r\n <AudioBlockWidth\r\n onChange={onWidthChange}\r\n value={parseInt(editor.getAttributes(\"audioBlock\").width)}\r\n />\r\n </Toolbar.Wrapper>\r\n </BaseBubbleMenu>\r\n );\r\n};\r\n\r\nexport default AudioBlockMenu;\r\n"],"names":["BubbleMenu","BaseBubbleMenu","useCallback","useRef","sticky","v4","uuid","AlignHorizontalDistributeCenter","AlignHorizontalDistributeEnd","AlignHorizontalDistributeStart","Pencil","PencilOff","Icon","Toolbar","getRenderContainer","AudioBlockWidth","i18next","AudioBlockMenu","editor","appendTo","menuRef","tippyInstance","getReferenceClientRect","renderContainer","rect","getBoundingClientRect","DOMRect","shouldShow","isActive","onAlignAudioLeft","chain","focus","undefined","scrollIntoView","setAudioBlockAlign","run","onAlignAudioCenter","onAlignAudioRight","onHideCaption","setAudioBlockCaption","caption","onWidthChange","value","setAudioBlockWidth","pluginKey","updateDelay","tippyOptions","offset","popperOptions","modifiers","name","enabled","onCreate","instance","current","plugins","Wrapper","shouldShowContent","ref","Button","type","tooltip","t","active","onClick","icon","align","Divider","onChange","parseInt","getAttributes","width"],"mappings":";AAAA,SAASA,cAAcC,cAAc,QAAQ,gBAAgB;AAC7D,SAAoBC,WAAW,EAAEC,MAAM,QAAQ,QAAQ;AACvD,SAAmBC,MAAM,QAAQ,WAAW;AAC5C,SAASC,MAAMC,IAAI,QAAQ,OAAO;AAElC,SACEC,+BAA+B,EAC/BC,4BAA4B,EAC5BC,8BAA8B,EAC9BC,MAAM,EACNC,SAAS,QACJ,eAAe;AAEtB,SAASC,IAAI,QAAQ,+BAA+B;AACpD,SAASC,OAAO,QAAQ,kCAAkC;AAC1D,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SAASC,eAAe,QAAQ,uBAAuB;AACvD,OAAOC,aAAa,UAAU;AAE9B,OAAO,MAAMC,iBAAiB,CAAC,EAAEC,MAAM,EAAEC,QAAQ,EAAa;IAC5D,MAAMC,UAAUjB,OAAuB;IACvC,MAAMkB,gBAAgBlB,OAAwB;IAE9C,MAAMmB,yBAAyBpB,YAAY;QACzC,MAAMqB,kBAAkBT,mBAAmBI,QAAQ;QACnD,MAAMM,OACJD,iBAAiBE,2BACjB,IAAIC,QAAQ,CAAC,MAAM,CAAC,MAAM,GAAG;QAE/B,OAAOF;IACT,GAAG;QAACN;KAAO;IAEX,MAAMS,aAAazB,YAAY;QAC7B,MAAM0B,WAAWV,OAAOU,QAAQ,CAAC;QAEjC,OAAOA;IACT,GAAG;QAACV;KAAO;IAEX,MAAMW,mBAAmB3B,YAAY;QACnCgB,OACGY,KAAK,GACLC,KAAK,CAACC,WAAW;YAAEC,gBAAgB;QAAM,GACzCC,kBAAkB,CAAC,QACnBC,GAAG;IACR,GAAG;QAACjB;KAAO;IAEX,MAAMkB,qBAAqBlC,YAAY;QACrCgB,OACGY,KAAK,GACLC,KAAK,CAACC,WAAW;YAAEC,gBAAgB;QAAM,GACzCC,kBAAkB,CAAC,UACnBC,GAAG;IACR,GAAG;QAACjB;KAAO;IAEX,MAAMmB,oBAAoBnC,YAAY;QACpCgB,OACGY,KAAK,GACLC,KAAK,CAACC,WAAW;YAAEC,gBAAgB;QAAM,GACzCC,kBAAkB,CAAC,SACnBC,GAAG;IACR,GAAG;QAACjB;KAAO;IAEX,MAAMoB,gBAAgBpC,YAAY;QAChCgB,OACGY,KAAK,GACLC,KAAK,CAACC,WAAW;YAAEC,gBAAgB;QAAM,GACzCM,oBAAoB,CACnBrB,OAAOU,QAAQ,CAAC,cAAc;YAAEY,SAAS;QAAM,KAAK,OAAO,OAE5DL,GAAG;IACR,GAAG;QAACjB;KAAO;IAEX,MAAMuB,gBAAgBvC,YACpB,CAACwC;QACCxB,OACGY,KAAK,GACLC,KAAK,CAACC,WAAW;YAAEC,gBAAgB;QAAM,GACzCU,kBAAkB,CAACD,OACnBP,GAAG;IACR,GACA;QAACjB;KAAO;IAGV,qBACE,KAACjB;QACCiB,QAAQA;QACR0B,WAAW,CAAC,eAAe,EAAEtC,QAAQ;QACrCqB,YAAYA;QACZkB,aAAa;QACbC,cAAc;YACZC,QAAQ;gBAAC;gBAAG;aAAE;YACdC,eAAe;gBACbC,WAAW;oBAAC;wBAAEC,MAAM;wBAAQC,SAAS;oBAAM;iBAAE;YAC/C;YACA7B;YACA8B,UAAU,CAACC;gBACThC,cAAciC,OAAO,GAAGD;YAC1B;YACAlC,UAAU;gBACR,OAAOA,UAAUmC;YACnB;YACAC,SAAS;gBAACnD;aAAO;YACjBA,QAAQ;QACV;kBAEA,cAAA,MAACS,QAAQ2C,OAAO;YAACC,mBAAmB9B;YAAc+B,KAAKtC;;8BACrD,KAACP,QAAQ8C,MAAM;oBACbC,MAAK;oBACLC,SAAS7C,QAAQ8C,CAAC,CAAC,oBAAoB;oBACvCC,QAAQ7C,OAAOU,QAAQ,CAAC,cAAc;wBAAEY,SAAS;oBAAM;oBACvDwB,SAAS1B;8BAET,cAAA,KAAC1B;wBACCqD,MACE/C,OAAOU,QAAQ,CAAC,cAAc;4BAAEY,SAAS;wBAAM,KAC3C7B,YACAD;;;8BAIV,KAACG,QAAQ8C,MAAM;oBACbC,MAAK;oBACLC,SAAS7C,QAAQ8C,CAAC,CAAC,qBAAqB;oBACxCC,QAAQ7C,OAAOU,QAAQ,CAAC,cAAc;wBAAEsC,OAAO;oBAAO;oBACtDF,SAASnC;8BAET,cAAA,KAACjB;wBAAKqD,MAAMxD;;;8BAEd,KAACI,QAAQ8C,MAAM;oBACbC,MAAK;oBACLC,SAAS7C,QAAQ8C,CAAC,CAAC,uBAAuB;oBAC1CC,QAAQ7C,OAAOU,QAAQ,CAAC,cAAc;wBAAEsC,OAAO;oBAAS;oBACxDF,SAAS5B;8BAET,cAAA,KAACxB;wBAAKqD,MAAM1D;;;8BAEd,KAACM,QAAQ8C,MAAM;oBACbC,MAAK;oBACLC,SAAS7C,QAAQ8C,CAAC,CAAC,sBAAsB;oBACzCC,QAAQ7C,OAAOU,QAAQ,CAAC,cAAc;wBAAEsC,OAAO;oBAAQ;oBACvDF,SAAS3B;8BAET,cAAA,KAACzB;wBAAKqD,MAAMzD;;;8BAEd,KAACK,QAAQsD,OAAO;8BAChB,KAACpD;oBACCqD,UAAU3B;oBACVC,OAAO2B,SAASnD,OAAOoD,aAAa,CAAC,cAAcC,KAAK;;;;;AAKlE,EAAE;AAEF,eAAetD,eAAe"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/FontSize/FontSize.ts"],"sourcesContent":["import { Extension } from '@tiptap/core'\r\nimport '@tiptap/extension-text-style'\r\n\r\ndeclare module '@tiptap/core' {\r\n interface Commands<ReturnType> {\r\n fontSize: {\r\n setFontSize: (size: string) => ReturnType\r\n unsetFontSize: () => ReturnType\r\n }\r\n }\r\n}\r\n\r\nexport const FontSize = Extension.create({\r\n name: 'fontSize',\r\n\r\n addOptions() {\r\n return {\r\n types: ['textStyle'],\r\n }\r\n },\r\n\r\n addGlobalAttributes() {\r\n return [\r\n {\r\n types: ['paragraph'],\r\n attributes: {\r\n class: {},\r\n },\r\n },\r\n {\r\n types: this.options.types,\r\n attributes: {\r\n fontSize: {\r\n parseHTML: element => element.style.fontSize.replace(/['\"]+/g, ''),\r\n renderHTML: attributes => {\r\n if (!attributes.fontSize) {\r\n return {}\r\n }\r\n\r\n return {\r\n style: `font-size: ${attributes.fontSize}`,\r\n }\r\n },\r\n },\r\n },\r\n },\r\n ]\r\n },\r\n\r\n addCommands() {\r\n return {\r\n setFontSize:\r\n (fontSize: string) =>\r\n ({ chain }) =>\r\n chain().setMark('textStyle', { fontSize }).run(),\r\n unsetFontSize:\r\n () =>\r\n ({ chain }) =>\r\n chain().setMark('textStyle', { fontSize: null }).removeEmptyTextStyle().run(),\r\n }\r\n },\r\n})\r\n\r\nexport default FontSize\r\n"],"names":["Extension","FontSize","create","name","addOptions","types","addGlobalAttributes","attributes","class","options","fontSize","parseHTML","element","style","replace","renderHTML","addCommands","setFontSize","chain","setMark","run","unsetFontSize","removeEmptyTextStyle"],"mappings":"AAAA,SAASA,SAAS,QAAQ,eAAc;AACxC,OAAO,+BAA8B;AAWrC,OAAO,MAAMC,WAAWD,UAAUE,MAAM,CAAC;IACvCC,MAAM;IAENC;QACE,OAAO;YACLC,OAAO;gBAAC;aAAY;QACtB;IACF;IAEAC;QACE,OAAO;YACL;gBACED,OAAO;oBAAC;iBAAY;gBACpBE,YAAY;oBACVC,OAAO,CAAC;gBACV;YACF;YACA;gBACEH,OAAO,IAAI,CAACI,OAAO,CAACJ,KAAK;gBACzBE,YAAY;oBACVG,UAAU;wBACRC,WAAWC,CAAAA,UAAWA,QAAQC,KAAK,CAACH,QAAQ,CAACI,OAAO,CAAC,UAAU;wBAC/DC,YAAYR,CAAAA;4BACV,IAAI,CAACA,WAAWG,QAAQ,EAAE;gCACxB,OAAO,CAAC;4BACV;4BAEA,OAAO;gCACLG,OAAO,CAAC,WAAW,EAAEN,WAAWG,QAAQ,
|
|
1
|
+
{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/FontSize/FontSize.ts"],"sourcesContent":["import { Extension } from '@tiptap/core'\r\nimport '@tiptap/extension-text-style'\r\n\r\ndeclare module '@tiptap/core' {\r\n interface Commands<ReturnType> {\r\n fontSize: {\r\n setFontSize: (size: string) => ReturnType\r\n unsetFontSize: () => ReturnType\r\n }\r\n }\r\n}\r\n\r\nexport const FontSize = Extension.create({\r\n name: 'fontSize',\r\n\r\n addOptions() {\r\n return {\r\n types: ['textStyle'],\r\n }\r\n },\r\n\r\n addGlobalAttributes() {\r\n return [\r\n {\r\n types: ['paragraph'],\r\n attributes: {\r\n class: {},\r\n },\r\n },\r\n {\r\n types: this.options.types,\r\n attributes: {\r\n fontSize: {\r\n parseHTML: element => element.style.fontSize.replace(/['\"]+/g, ''),\r\n renderHTML: attributes => {\r\n if (!attributes.fontSize) {\r\n return {}\r\n }\r\n\r\n return {\r\n style: `font-size: ${attributes.fontSize}`,\r\n }\r\n },\r\n },\r\n },\r\n },\r\n ]\r\n },\r\n\r\n addCommands() {\r\n return {\r\n setFontSize:\r\n (fontSize: string) =>\r\n ({ chain }) =>\r\n chain().setMark('textStyle', { fontSize }).run(),\r\n unsetFontSize:\r\n () =>\r\n ({ chain }) =>\r\n chain().setMark('textStyle', { fontSize: null }).removeEmptyTextStyle().run(),\r\n }\r\n },\r\n})\r\n\r\nexport default FontSize\r\n"],"names":["Extension","FontSize","create","name","addOptions","types","addGlobalAttributes","attributes","class","options","fontSize","parseHTML","element","style","replace","renderHTML","addCommands","setFontSize","chain","setMark","run","unsetFontSize","removeEmptyTextStyle"],"mappings":"AAAA,SAASA,SAAS,QAAQ,eAAc;AACxC,OAAO,+BAA8B;AAWrC,OAAO,MAAMC,WAAWD,UAAUE,MAAM,CAAC;IACvCC,MAAM;IAENC;QACE,OAAO;YACLC,OAAO;gBAAC;aAAY;QACtB;IACF;IAEAC;QACE,OAAO;YACL;gBACED,OAAO;oBAAC;iBAAY;gBACpBE,YAAY;oBACVC,OAAO,CAAC;gBACV;YACF;YACA;gBACEH,OAAO,IAAI,CAACI,OAAO,CAACJ,KAAK;gBACzBE,YAAY;oBACVG,UAAU;wBACRC,WAAWC,CAAAA,UAAWA,QAAQC,KAAK,CAACH,QAAQ,CAACI,OAAO,CAAC,UAAU;wBAC/DC,YAAYR,CAAAA;4BACV,IAAI,CAACA,WAAWG,QAAQ,EAAE;gCACxB,OAAO,CAAC;4BACV;4BAEA,OAAO;gCACLG,OAAO,CAAC,WAAW,EAAEN,WAAWG,QAAQ,EAAE;4BAC5C;wBACF;oBACF;gBACF;YACF;SACD;IACH;IAEAM;QACE,OAAO;YACLC,aACE,CAACP,WACD,CAAC,EAAEQ,KAAK,EAAE,GACRA,QAAQC,OAAO,CAAC,aAAa;wBAAET;oBAAS,GAAGU,GAAG;YAClDC,eACE,IACA,CAAC,EAAEH,KAAK,EAAE,GACRA,QAAQC,OAAO,CAAC,aAAa;wBAAET,UAAU;oBAAK,GAAGY,oBAAoB,GAAGF,GAAG;QACjF;IACF;AACF,GAAE;AAEF,eAAenB,SAAQ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/Heading/Heading.ts"],"sourcesContent":["import { mergeAttributes } from '@tiptap/core'\r\nimport TiptapHeading from '@tiptap/extension-heading'\r\nimport type { Level } from '@tiptap/extension-heading'\r\n\r\nexport const Heading = TiptapHeading.extend({\r\n renderHTML({ node, HTMLAttributes }) {\r\n const nodeLevel = parseInt(node.attrs.level, 10) as Level\r\n const hasLevel = this.options.levels.includes(nodeLevel)\r\n const level = hasLevel ? nodeLevel : this.options.levels[0]\r\n\r\n return [`h${level}`, mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]\r\n },\r\n})\r\n\r\nexport default Heading\r\n"],"names":["mergeAttributes","TiptapHeading","Heading","extend","renderHTML","node","HTMLAttributes","nodeLevel","parseInt","attrs","level","hasLevel","options","levels","includes"],"mappings":"AAAA,SAASA,eAAe,QAAQ,eAAc;AAC9C,OAAOC,mBAAmB,4BAA2B;AAGrD,OAAO,MAAMC,UAAUD,cAAcE,MAAM,CAAC;IAC1CC,YAAW,EAAEC,IAAI,EAAEC,cAAc,EAAE;QACjC,MAAMC,YAAYC,SAASH,KAAKI,KAAK,CAACC,KAAK,EAAE;QAC7C,MAAMC,WAAW,IAAI,CAACC,OAAO,CAACC,MAAM,CAACC,QAAQ,CAACP;QAC9C,MAAMG,QAAQC,WAAWJ,YAAY,IAAI,CAACK,OAAO,CAACC,MAAM,CAAC,EAAE;QAE3D,OAAO;YAAC,CAAC,CAAC,EAAEH,
|
|
1
|
+
{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/Heading/Heading.ts"],"sourcesContent":["import { mergeAttributes } from '@tiptap/core'\r\nimport TiptapHeading from '@tiptap/extension-heading'\r\nimport type { Level } from '@tiptap/extension-heading'\r\n\r\nexport const Heading = TiptapHeading.extend({\r\n renderHTML({ node, HTMLAttributes }) {\r\n const nodeLevel = parseInt(node.attrs.level, 10) as Level\r\n const hasLevel = this.options.levels.includes(nodeLevel)\r\n const level = hasLevel ? nodeLevel : this.options.levels[0]\r\n\r\n return [`h${level}`, mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]\r\n },\r\n})\r\n\r\nexport default Heading\r\n"],"names":["mergeAttributes","TiptapHeading","Heading","extend","renderHTML","node","HTMLAttributes","nodeLevel","parseInt","attrs","level","hasLevel","options","levels","includes"],"mappings":"AAAA,SAASA,eAAe,QAAQ,eAAc;AAC9C,OAAOC,mBAAmB,4BAA2B;AAGrD,OAAO,MAAMC,UAAUD,cAAcE,MAAM,CAAC;IAC1CC,YAAW,EAAEC,IAAI,EAAEC,cAAc,EAAE;QACjC,MAAMC,YAAYC,SAASH,KAAKI,KAAK,CAACC,KAAK,EAAE;QAC7C,MAAMC,WAAW,IAAI,CAACC,OAAO,CAACC,MAAM,CAACC,QAAQ,CAACP;QAC9C,MAAMG,QAAQC,WAAWJ,YAAY,IAAI,CAACK,OAAO,CAACC,MAAM,CAAC,EAAE;QAE3D,OAAO;YAAC,CAAC,CAAC,EAAEH,OAAO;YAAEV,gBAAgB,IAAI,CAACY,OAAO,CAACN,cAAc,EAAEA;YAAiB;SAAE;IACvF;AACF,GAAE;AAEF,eAAeJ,QAAO"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/ImageBlock/ImageBlock.ts"],"sourcesContent":["\"use client\";\r\n\r\nimport { ReactNodeViewRenderer } from \"@tiptap/react\";\r\nimport { mergeAttributes, Range } from \"@tiptap/core\";\r\n\r\nimport { ImageBlockView } from \"./components/ImageBlockView.js\";\r\nimport { Image } from \"../Image/Image.js\";\r\n\r\ndeclare module \"@tiptap/core\" {\r\n interface Commands<ReturnType> {\r\n imageBlock: {\r\n setImageBlock: (attributes: {\r\n src: string;\r\n assetId?: string;\r\n caption?: string;\r\n actualWidth?: number;\r\n actualHeight?: number;\r\n }) => ReturnType;\r\n setImageBlockAt: (attributes: {\r\n src: string;\r\n pos: number | Range;\r\n assetId?: string;\r\n caption?: string;\r\n actualWidth?: number;\r\n actualHeight?: number;\r\n }) => ReturnType;\r\n setImageBlockAlign: (align: \"left\" | \"center\" | \"right\") => ReturnType;\r\n setImageBlockWidth: (width: number) => ReturnType;\r\n setImageCaption: (caption: string) => ReturnType;\r\n };\r\n }\r\n}\r\n\r\nexport const ImageBlock = Image.extend({\r\n name: \"imageBlock\",\r\n\r\n group: \"block\",\r\n\r\n defining: true,\r\n\r\n isolating: true,\r\n\r\n addAttributes() {\r\n return {\r\n src: {\r\n default: \"\",\r\n parseHTML: (element) => element.getAttribute(\"src\"),\r\n renderHTML: (attributes) => ({\r\n src: attributes.src,\r\n }),\r\n },\r\n width: {\r\n default: \"100%\",\r\n parseHTML: (element) => element.getAttribute(\"data-width\"),\r\n renderHTML: (attributes) => ({\r\n \"data-width\": attributes.width,\r\n }),\r\n },\r\n actualWidth: {\r\n default: 0,\r\n parseHTML: (element) => element.getAttribute(\"data-actual-width\"),\r\n renderHTML: (attributes) => ({\r\n \"data-actual-width\": attributes.actualWidth,\r\n }),\r\n },\r\n actualHeight: {\r\n default: 0,\r\n parseHTML: (element) => element.getAttribute(\"data-actual-height\"),\r\n renderHTML: (attributes) => ({\r\n \"data-actual-height\": attributes.actualHeight,\r\n }),\r\n },\r\n align: {\r\n default: \"center\",\r\n parseHTML: (element) => element.getAttribute(\"data-align\"),\r\n renderHTML: (attributes) => ({\r\n \"data-align\": attributes.align,\r\n }),\r\n },\r\n alt: {\r\n default: \"\",\r\n parseHTML: (element) => element.getAttribute(\"alt\"),\r\n renderHTML: (attributes) => ({\r\n alt: attributes.alt,\r\n }),\r\n },\r\n caption: {\r\n default: \"\",\r\n parseHTML: (element) => element.getAttribute(\"caption\"),\r\n renderHTML: (attributes) => ({\r\n caption: attributes.caption,\r\n }),\r\n },\r\n };\r\n },\r\n\r\n parseHTML() {\r\n return [\r\n {\r\n tag: 'img[src*=\"tiptap.dev\"]:not([src^=\"data:\"]), img[src*=\"windows.net\"]:not([src^=\"data:\"])',\r\n },\r\n ];\r\n },\r\n\r\n renderHTML({ HTMLAttributes }) {\r\n return [\r\n \"div\",\r\n { class: \"imageBlock\" },\r\n [\"img\", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)],\r\n [\r\n \"textarea\",\r\n mergeAttributes(\r\n {\r\n class:\r\n \"w-full text-gray-400 h-16 mb-2 placeholder-black p-1 text-sm text-gray-400 border-0 rounded appearance-none\",\r\n },\r\n { defaultValue: HTMLAttributes.caption }\r\n ),\r\n HTMLAttributes.caption,\r\n ],\r\n ];\r\n },\r\n\r\n addCommands() {\r\n return {\r\n setImageBlock:\r\n (attrs) =>\r\n ({ commands }) => {\r\n return commands.insertContent({\r\n type: \"imageBlock\",\r\n attrs: {\r\n src: attrs.src,\r\n caption: attrs.caption,\r\n actualWidth: attrs.actualWidth,\r\n actualHeight: attrs.actualHeight,\r\n },\r\n });\r\n },\r\n\r\n setImageBlockAt:\r\n (attrs) =>\r\n ({ commands }) => {\r\n console.log(attrs);\r\n return commands.insertContentAt(attrs.pos, {\r\n type: \"imageBlock\",\r\n attrs: {\r\n src: attrs.src,\r\n caption: attrs.caption,\r\n actualWidth: attrs.actualWidth,\r\n actualHeight: attrs.actualHeight,\r\n },\r\n });\r\n },\r\n setImageCaption:\r\n (caption) =>\r\n ({ commands }) =>\r\n commands.updateAttributes(\"imageBlock\", { caption }),\r\n setImageBlockAlign:\r\n (align) =>\r\n ({ commands }) =>\r\n commands.updateAttributes(\"imageBlock\", { align }),\r\n\r\n setImageBlockWidth:\r\n (width) =>\r\n ({ commands }) =>\r\n commands.updateAttributes(\"imageBlock\", {\r\n width: `${Math.max(0, Math.min(100, width))}%`,\r\n }),\r\n };\r\n },\r\n\r\n addNodeView() {\r\n //@ts-ignore\r\n return ReactNodeViewRenderer(ImageBlockView);\r\n },\r\n});\r\n\r\nexport default ImageBlock;\r\n"],"names":["ReactNodeViewRenderer","mergeAttributes","ImageBlockView","Image","ImageBlock","extend","name","group","defining","isolating","addAttributes","src","default","parseHTML","element","getAttribute","renderHTML","attributes","width","actualWidth","actualHeight","align","alt","caption","tag","HTMLAttributes","class","options","defaultValue","addCommands","setImageBlock","attrs","commands","insertContent","type","setImageBlockAt","console","log","insertContentAt","pos","setImageCaption","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;AA2B1C,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,aAAa;gBACXP,SAAS;gBACTC,WAAW,CAACC,UAAYA,QAAQC,YAAY,CAAC;gBAC7CC,YAAY,CAACC,aAAgB,CAAA;wBAC3B,qBAAqBA,WAAWE,WAAW;oBAC7C,CAAA;YACF;YACAC,cAAc;gBACZR,SAAS;gBACTC,WAAW,CAACC,UAAYA,QAAQC,YAAY,CAAC;gBAC7CC,YAAY,CAACC,aAAgB,CAAA;wBAC3B,sBAAsBA,WAAWG,YAAY;oBAC/C,CAAA;YACF;YACAC,OAAO;gBACLT,SAAS;gBACTC,WAAW,CAACC,UAAYA,QAAQC,YAAY,CAAC;gBAC7CC,YAAY,CAACC,aAAgB,CAAA;wBAC3B,cAAcA,WAAWI,KAAK;oBAChC,CAAA;YACF;YACAC,KAAK;gBACHV,SAAS;gBACTC,WAAW,CAACC,UAAYA,QAAQC,YAAY,CAAC;gBAC7CC,YAAY,CAACC,aAAgB,CAAA;wBAC3BK,KAAKL,WAAWK,GAAG;oBACrB,CAAA;YACF;YACAC,SAAS;gBACPX,SAAS;gBACTC,WAAW,CAACC,UAAYA,QAAQC,YAAY,CAAC;gBAC7CC,YAAY,CAACC,aAAgB,CAAA;wBAC3BM,SAASN,WAAWM,OAAO;oBAC7B,CAAA;YACF;QACF;IACF;IAEAV;QACE,OAAO;YACL;gBACEW,KAAK;YACP;SACD;IACH;IAEAR,YAAW,EAAES,cAAc,EAAE;QAC3B,OAAO;YACL;YACA;gBAAEC,OAAO;YAAa;YACtB;gBAAC;gBAAOzB,gBAAgB,IAAI,CAAC0B,OAAO,CAACF,cAAc,EAAEA;aAAgB;YACrE;gBACE;gBACAxB,gBACE;oBACEyB,OACE;gBACJ,GACA;oBAAEE,cAAcH,eAAeF,OAAO;gBAAC;gBAEzCE,eAAeF,OAAO;aACvB;SACF;IACH;IAEAM;QACE,OAAO;YACLC,eACE,CAACC,QACD,CAAC,EAAEC,QAAQ,EAAE;oBACX,OAAOA,SAASC,aAAa,CAAC;wBAC5BC,MAAM;wBACNH,OAAO;4BACLpB,KAAKoB,MAAMpB,GAAG;4BACdY,SAASQ,MAAMR,OAAO;4BACtBJ,aAAaY,MAAMZ,WAAW;4BAC9BC,cAAcW,MAAMX,YAAY;wBAClC;oBACF;gBACF;YAEFe,iBACE,CAACJ,QACD,CAAC,EAAEC,QAAQ,EAAE;oBACXI,QAAQC,GAAG,CAACN;oBACZ,OAAOC,SAASM,eAAe,CAACP,MAAMQ,GAAG,EAAE;wBACzCL,MAAM;wBACNH,OAAO;4BACLpB,KAAKoB,MAAMpB,GAAG;4BACdY,SAASQ,MAAMR,OAAO;4BACtBJ,aAAaY,MAAMZ,WAAW;4BAC9BC,cAAcW,MAAMX,YAAY;wBAClC;oBACF;gBACF;YACFoB,iBACE,CAACjB,UACD,CAAC,EAAES,QAAQ,EAAE,GACXA,SAASS,gBAAgB,CAAC,cAAc;wBAAElB;oBAAQ;YACtDmB,oBACE,CAACrB,QACD,CAAC,EAAEW,QAAQ,EAAE,GACXA,SAASS,gBAAgB,CAAC,cAAc;wBAAEpB;oBAAM;YAEpDsB,oBACE,CAACzB,QACD,CAAC,EAAEc,QAAQ,EAAE,GACXA,SAASS,gBAAgB,CAAC,cAAc;wBACtCvB,OAAO,
|
|
1
|
+
{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/ImageBlock/ImageBlock.ts"],"sourcesContent":["\"use client\";\r\n\r\nimport { ReactNodeViewRenderer } from \"@tiptap/react\";\r\nimport { mergeAttributes, Range } from \"@tiptap/core\";\r\n\r\nimport { ImageBlockView } from \"./components/ImageBlockView.js\";\r\nimport { Image } from \"../Image/Image.js\";\r\n\r\ndeclare module \"@tiptap/core\" {\r\n interface Commands<ReturnType> {\r\n imageBlock: {\r\n setImageBlock: (attributes: {\r\n src: string;\r\n assetId?: string;\r\n caption?: string;\r\n actualWidth?: number;\r\n actualHeight?: number;\r\n }) => ReturnType;\r\n setImageBlockAt: (attributes: {\r\n src: string;\r\n pos: number | Range;\r\n assetId?: string;\r\n caption?: string;\r\n actualWidth?: number;\r\n actualHeight?: number;\r\n }) => ReturnType;\r\n setImageBlockAlign: (align: \"left\" | \"center\" | \"right\") => ReturnType;\r\n setImageBlockWidth: (width: number) => ReturnType;\r\n setImageCaption: (caption: string) => ReturnType;\r\n };\r\n }\r\n}\r\n\r\nexport const ImageBlock = Image.extend({\r\n name: \"imageBlock\",\r\n\r\n group: \"block\",\r\n\r\n defining: true,\r\n\r\n isolating: true,\r\n\r\n addAttributes() {\r\n return {\r\n src: {\r\n default: \"\",\r\n parseHTML: (element) => element.getAttribute(\"src\"),\r\n renderHTML: (attributes) => ({\r\n src: attributes.src,\r\n }),\r\n },\r\n width: {\r\n default: \"100%\",\r\n parseHTML: (element) => element.getAttribute(\"data-width\"),\r\n renderHTML: (attributes) => ({\r\n \"data-width\": attributes.width,\r\n }),\r\n },\r\n actualWidth: {\r\n default: 0,\r\n parseHTML: (element) => element.getAttribute(\"data-actual-width\"),\r\n renderHTML: (attributes) => ({\r\n \"data-actual-width\": attributes.actualWidth,\r\n }),\r\n },\r\n actualHeight: {\r\n default: 0,\r\n parseHTML: (element) => element.getAttribute(\"data-actual-height\"),\r\n renderHTML: (attributes) => ({\r\n \"data-actual-height\": attributes.actualHeight,\r\n }),\r\n },\r\n align: {\r\n default: \"center\",\r\n parseHTML: (element) => element.getAttribute(\"data-align\"),\r\n renderHTML: (attributes) => ({\r\n \"data-align\": attributes.align,\r\n }),\r\n },\r\n alt: {\r\n default: \"\",\r\n parseHTML: (element) => element.getAttribute(\"alt\"),\r\n renderHTML: (attributes) => ({\r\n alt: attributes.alt,\r\n }),\r\n },\r\n caption: {\r\n default: \"\",\r\n parseHTML: (element) => element.getAttribute(\"caption\"),\r\n renderHTML: (attributes) => ({\r\n caption: attributes.caption,\r\n }),\r\n },\r\n };\r\n },\r\n\r\n parseHTML() {\r\n return [\r\n {\r\n tag: 'img[src*=\"tiptap.dev\"]:not([src^=\"data:\"]), img[src*=\"windows.net\"]:not([src^=\"data:\"])',\r\n },\r\n ];\r\n },\r\n\r\n renderHTML({ HTMLAttributes }) {\r\n return [\r\n \"div\",\r\n { class: \"imageBlock\" },\r\n [\"img\", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)],\r\n [\r\n \"textarea\",\r\n mergeAttributes(\r\n {\r\n class:\r\n \"w-full text-gray-400 h-16 mb-2 placeholder-black p-1 text-sm text-gray-400 border-0 rounded appearance-none\",\r\n },\r\n { defaultValue: HTMLAttributes.caption }\r\n ),\r\n HTMLAttributes.caption,\r\n ],\r\n ];\r\n },\r\n\r\n addCommands() {\r\n return {\r\n setImageBlock:\r\n (attrs) =>\r\n ({ commands }) => {\r\n return commands.insertContent({\r\n type: \"imageBlock\",\r\n attrs: {\r\n src: attrs.src,\r\n caption: attrs.caption,\r\n actualWidth: attrs.actualWidth,\r\n actualHeight: attrs.actualHeight,\r\n },\r\n });\r\n },\r\n\r\n setImageBlockAt:\r\n (attrs) =>\r\n ({ commands }) => {\r\n console.log(attrs);\r\n return commands.insertContentAt(attrs.pos, {\r\n type: \"imageBlock\",\r\n attrs: {\r\n src: attrs.src,\r\n caption: attrs.caption,\r\n actualWidth: attrs.actualWidth,\r\n actualHeight: attrs.actualHeight,\r\n },\r\n });\r\n },\r\n setImageCaption:\r\n (caption) =>\r\n ({ commands }) =>\r\n commands.updateAttributes(\"imageBlock\", { caption }),\r\n setImageBlockAlign:\r\n (align) =>\r\n ({ commands }) =>\r\n commands.updateAttributes(\"imageBlock\", { align }),\r\n\r\n setImageBlockWidth:\r\n (width) =>\r\n ({ commands }) =>\r\n commands.updateAttributes(\"imageBlock\", {\r\n width: `${Math.max(0, Math.min(100, width))}%`,\r\n }),\r\n };\r\n },\r\n\r\n addNodeView() {\r\n //@ts-ignore\r\n return ReactNodeViewRenderer(ImageBlockView);\r\n },\r\n});\r\n\r\nexport default ImageBlock;\r\n"],"names":["ReactNodeViewRenderer","mergeAttributes","ImageBlockView","Image","ImageBlock","extend","name","group","defining","isolating","addAttributes","src","default","parseHTML","element","getAttribute","renderHTML","attributes","width","actualWidth","actualHeight","align","alt","caption","tag","HTMLAttributes","class","options","defaultValue","addCommands","setImageBlock","attrs","commands","insertContent","type","setImageBlockAt","console","log","insertContentAt","pos","setImageCaption","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;AA2B1C,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,aAAa;gBACXP,SAAS;gBACTC,WAAW,CAACC,UAAYA,QAAQC,YAAY,CAAC;gBAC7CC,YAAY,CAACC,aAAgB,CAAA;wBAC3B,qBAAqBA,WAAWE,WAAW;oBAC7C,CAAA;YACF;YACAC,cAAc;gBACZR,SAAS;gBACTC,WAAW,CAACC,UAAYA,QAAQC,YAAY,CAAC;gBAC7CC,YAAY,CAACC,aAAgB,CAAA;wBAC3B,sBAAsBA,WAAWG,YAAY;oBAC/C,CAAA;YACF;YACAC,OAAO;gBACLT,SAAS;gBACTC,WAAW,CAACC,UAAYA,QAAQC,YAAY,CAAC;gBAC7CC,YAAY,CAACC,aAAgB,CAAA;wBAC3B,cAAcA,WAAWI,KAAK;oBAChC,CAAA;YACF;YACAC,KAAK;gBACHV,SAAS;gBACTC,WAAW,CAACC,UAAYA,QAAQC,YAAY,CAAC;gBAC7CC,YAAY,CAACC,aAAgB,CAAA;wBAC3BK,KAAKL,WAAWK,GAAG;oBACrB,CAAA;YACF;YACAC,SAAS;gBACPX,SAAS;gBACTC,WAAW,CAACC,UAAYA,QAAQC,YAAY,CAAC;gBAC7CC,YAAY,CAACC,aAAgB,CAAA;wBAC3BM,SAASN,WAAWM,OAAO;oBAC7B,CAAA;YACF;QACF;IACF;IAEAV;QACE,OAAO;YACL;gBACEW,KAAK;YACP;SACD;IACH;IAEAR,YAAW,EAAES,cAAc,EAAE;QAC3B,OAAO;YACL;YACA;gBAAEC,OAAO;YAAa;YACtB;gBAAC;gBAAOzB,gBAAgB,IAAI,CAAC0B,OAAO,CAACF,cAAc,EAAEA;aAAgB;YACrE;gBACE;gBACAxB,gBACE;oBACEyB,OACE;gBACJ,GACA;oBAAEE,cAAcH,eAAeF,OAAO;gBAAC;gBAEzCE,eAAeF,OAAO;aACvB;SACF;IACH;IAEAM;QACE,OAAO;YACLC,eACE,CAACC,QACD,CAAC,EAAEC,QAAQ,EAAE;oBACX,OAAOA,SAASC,aAAa,CAAC;wBAC5BC,MAAM;wBACNH,OAAO;4BACLpB,KAAKoB,MAAMpB,GAAG;4BACdY,SAASQ,MAAMR,OAAO;4BACtBJ,aAAaY,MAAMZ,WAAW;4BAC9BC,cAAcW,MAAMX,YAAY;wBAClC;oBACF;gBACF;YAEFe,iBACE,CAACJ,QACD,CAAC,EAAEC,QAAQ,EAAE;oBACXI,QAAQC,GAAG,CAACN;oBACZ,OAAOC,SAASM,eAAe,CAACP,MAAMQ,GAAG,EAAE;wBACzCL,MAAM;wBACNH,OAAO;4BACLpB,KAAKoB,MAAMpB,GAAG;4BACdY,SAASQ,MAAMR,OAAO;4BACtBJ,aAAaY,MAAMZ,WAAW;4BAC9BC,cAAcW,MAAMX,YAAY;wBAClC;oBACF;gBACF;YACFoB,iBACE,CAACjB,UACD,CAAC,EAAES,QAAQ,EAAE,GACXA,SAASS,gBAAgB,CAAC,cAAc;wBAAElB;oBAAQ;YACtDmB,oBACE,CAACrB,QACD,CAAC,EAAEW,QAAQ,EAAE,GACXA,SAASS,gBAAgB,CAAC,cAAc;wBAAEpB;oBAAM;YAEpDsB,oBACE,CAACzB,QACD,CAAC,EAAEc,QAAQ,EAAE,GACXA,SAASS,gBAAgB,CAAC,cAAc;wBACtCvB,OAAO,GAAG0B,KAAKC,GAAG,CAAC,GAAGD,KAAKE,GAAG,CAAC,KAAK5B,QAAQ,CAAC,CAAC;oBAChD;QACN;IACF;IAEA6B;QACE,YAAY;QACZ,OAAO/C,sBAAsBE;IAC/B;AACF,GAAG;AAEH,eAAeE,WAAW"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/extensions/ImageBlock/components/ImageBlockMenu.tsx"],"sourcesContent":["import { BubbleMenu as BaseBubbleMenu } from \"@tiptap/react\";\r\nimport { ReactNode, useCallback, useRef } from \"react\";\r\nimport { Instance, sticky } from \"tippy.js\";\r\nimport { v4 as uuid } from \"uuid\";\r\n\r\nimport {\r\n AlignHorizontalDistributeCenter,\r\n AlignHorizontalDistributeEnd,\r\n AlignHorizontalDistributeStart,\r\n} from \"lucide-react\";\r\nimport { MenuProps } from \"../../../features/menus/types.js\";\r\nimport { Icon } from \"../../../features/ui/Icon.js\";\r\nimport { Toolbar } from \"../../../features/ui/Toolbar.js\";\r\nimport { getRenderContainer } from \"../../../lib/utils/index.js\";\r\nimport { ImageBlockWidth } from \"./ImageBlockWidth.js\";\r\nimport i18next from \"i18next\";\r\n\r\nexport const ImageBlockMenu = ({ editor, appendTo }: MenuProps): ReactNode => {\r\n const menuRef = useRef<HTMLDivElement>(null);\r\n const tippyInstance = useRef<Instance | null>(null);\r\n\r\n const getReferenceClientRect = useCallback(() => {\r\n const renderContainer = getRenderContainer(editor, \"node-imageBlock\");\r\n const rect =\r\n renderContainer?.getBoundingClientRect() ||\r\n new DOMRect(-1000, -1000, 0, 0);\r\n\r\n return rect;\r\n }, [editor]);\r\n\r\n const shouldShow = useCallback(() => {\r\n const isActive = editor.isActive(\"imageBlock\");\r\n\r\n return isActive;\r\n }, [editor]);\r\n\r\n const onAlignImageLeft = useCallback(() => {\r\n editor\r\n .chain()\r\n .focus(undefined, { scrollIntoView: false })\r\n .setImageBlockAlign(\"left\")\r\n .run();\r\n }, [editor]);\r\n\r\n const onAlignImageCenter = useCallback(() => {\r\n editor\r\n .chain()\r\n .focus(undefined, { scrollIntoView: false })\r\n .setImageBlockAlign(\"center\")\r\n .run();\r\n }, [editor]);\r\n\r\n const onAlignImageRight = useCallback(() => {\r\n editor\r\n .chain()\r\n .focus(undefined, { scrollIntoView: false })\r\n .setImageBlockAlign(\"right\")\r\n .run();\r\n }, [editor]);\r\n\r\n const onWidthChange = useCallback(\r\n (value: number) => {\r\n editor\r\n .chain()\r\n .focus(undefined, { scrollIntoView: false })\r\n .setImageBlockWidth(value)\r\n .run();\r\n },\r\n [editor]\r\n );\r\n\r\n return (\r\n <BaseBubbleMenu\r\n editor={editor}\r\n pluginKey={`imageBlockMenu-${uuid()}`}\r\n shouldShow={shouldShow}\r\n updateDelay={0}\r\n tippyOptions={{\r\n offset: [0, 8],\r\n popperOptions: {\r\n modifiers: [{ name: \"flip\", enabled: false }],\r\n },\r\n getReferenceClientRect,\r\n onCreate: (instance: Instance) => {\r\n tippyInstance.current = instance;\r\n },\r\n appendTo: () => {\r\n return appendTo?.current;\r\n },\r\n plugins: [sticky],\r\n sticky: \"popper\",\r\n }}\r\n >\r\n <Toolbar.Wrapper shouldShowContent={shouldShow()} ref={menuRef}>\r\n <Toolbar.Button\r\n type=\"button\"\r\n tooltip={i18next.t(\"alignImageLeft\") || \"Align image left\"}\r\n active={editor.isActive(\"imageBlock\", { align: \"left\" })}\r\n onClick={onAlignImageLeft}\r\n >\r\n <Icon icon={AlignHorizontalDistributeStart} />\r\n </Toolbar.Button>\r\n <Toolbar.Button\r\n type=\"button\"\r\n tooltip={i18next.t(\"alignImageCenter\") || \"Align image center\"}\r\n active={editor.isActive(\"imageBlock\", { align: \"center\" })}\r\n onClick={onAlignImageCenter}\r\n >\r\n <Icon icon={AlignHorizontalDistributeCenter} />\r\n </Toolbar.Button>\r\n <Toolbar.Button\r\n type=\"button\"\r\n tooltip={i18next.t(\"alignImageRight\") || \"Align image right\"}\r\n active={editor.isActive(\"imageBlock\", { align: \"right\" })}\r\n onClick={onAlignImageRight}\r\n >\r\n <Icon icon={AlignHorizontalDistributeEnd} />\r\n </Toolbar.Button>\r\n <Toolbar.Divider />\r\n <ImageBlockWidth\r\n onChange={onWidthChange}\r\n value={parseInt(editor.getAttributes(\"imageBlock\").width)}\r\n />\r\n </Toolbar.Wrapper>\r\n </BaseBubbleMenu>\r\n );\r\n};\r\n\r\nexport default ImageBlockMenu;\r\n"],"names":["BubbleMenu","BaseBubbleMenu","useCallback","useRef","sticky","v4","uuid","AlignHorizontalDistributeCenter","AlignHorizontalDistributeEnd","AlignHorizontalDistributeStart","Icon","Toolbar","getRenderContainer","ImageBlockWidth","i18next","ImageBlockMenu","editor","appendTo","menuRef","tippyInstance","getReferenceClientRect","renderContainer","rect","getBoundingClientRect","DOMRect","shouldShow","isActive","onAlignImageLeft","chain","focus","undefined","scrollIntoView","setImageBlockAlign","run","onAlignImageCenter","onAlignImageRight","onWidthChange","value","setImageBlockWidth","pluginKey","updateDelay","tippyOptions","offset","popperOptions","modifiers","name","enabled","onCreate","instance","current","plugins","Wrapper","shouldShowContent","ref","Button","type","tooltip","t","active","align","onClick","icon","Divider","onChange","parseInt","getAttributes","width"],"mappings":";AAAA,SAASA,cAAcC,cAAc,QAAQ,gBAAgB;AAC7D,SAAoBC,WAAW,EAAEC,MAAM,QAAQ,QAAQ;AACvD,SAAmBC,MAAM,QAAQ,WAAW;AAC5C,SAASC,MAAMC,IAAI,QAAQ,OAAO;AAElC,SACEC,+BAA+B,EAC/BC,4BAA4B,EAC5BC,8BAA8B,QACzB,eAAe;AAEtB,SAASC,IAAI,QAAQ,+BAA+B;AACpD,SAASC,OAAO,QAAQ,kCAAkC;AAC1D,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SAASC,eAAe,QAAQ,uBAAuB;AACvD,OAAOC,aAAa,UAAU;AAE9B,OAAO,MAAMC,iBAAiB,CAAC,EAAEC,MAAM,EAAEC,QAAQ,EAAa;IAC5D,MAAMC,UAAUf,OAAuB;IACvC,MAAMgB,gBAAgBhB,OAAwB;IAE9C,MAAMiB,yBAAyBlB,YAAY;QACzC,MAAMmB,kBAAkBT,mBAAmBI,QAAQ;QACnD,MAAMM,OACJD,iBAAiBE,2BACjB,IAAIC,QAAQ,CAAC,MAAM,CAAC,MAAM,GAAG;QAE/B,OAAOF;IACT,GAAG;QAACN;KAAO;IAEX,MAAMS,aAAavB,YAAY;QAC7B,MAAMwB,WAAWV,OAAOU,QAAQ,CAAC;QAEjC,OAAOA;IACT,GAAG;QAACV;KAAO;IAEX,MAAMW,mBAAmBzB,YAAY;QACnCc,OACGY,KAAK,GACLC,KAAK,CAACC,WAAW;YAAEC,gBAAgB;QAAM,GACzCC,kBAAkB,CAAC,QACnBC,GAAG;IACR,GAAG;QAACjB;KAAO;IAEX,MAAMkB,qBAAqBhC,YAAY;QACrCc,OACGY,KAAK,GACLC,KAAK,CAACC,WAAW;YAAEC,gBAAgB;QAAM,GACzCC,kBAAkB,CAAC,UACnBC,GAAG;IACR,GAAG;QAACjB;KAAO;IAEX,MAAMmB,oBAAoBjC,YAAY;QACpCc,OACGY,KAAK,GACLC,KAAK,CAACC,WAAW;YAAEC,gBAAgB;QAAM,GACzCC,kBAAkB,CAAC,SACnBC,GAAG;IACR,GAAG;QAACjB;KAAO;IAEX,MAAMoB,gBAAgBlC,YACpB,CAACmC;QACCrB,OACGY,KAAK,GACLC,KAAK,CAACC,WAAW;YAAEC,gBAAgB;QAAM,GACzCO,kBAAkB,CAACD,OACnBJ,GAAG;IACR,GACA;QAACjB;KAAO;IAGV,qBACE,KAACf;QACCe,QAAQA;QACRuB,WAAW,CAAC,eAAe,EAAEjC,
|
|
1
|
+
{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/extensions/ImageBlock/components/ImageBlockMenu.tsx"],"sourcesContent":["import { BubbleMenu as BaseBubbleMenu } from \"@tiptap/react\";\r\nimport { ReactNode, useCallback, useRef } from \"react\";\r\nimport { Instance, sticky } from \"tippy.js\";\r\nimport { v4 as uuid } from \"uuid\";\r\n\r\nimport {\r\n AlignHorizontalDistributeCenter,\r\n AlignHorizontalDistributeEnd,\r\n AlignHorizontalDistributeStart,\r\n} from \"lucide-react\";\r\nimport { MenuProps } from \"../../../features/menus/types.js\";\r\nimport { Icon } from \"../../../features/ui/Icon.js\";\r\nimport { Toolbar } from \"../../../features/ui/Toolbar.js\";\r\nimport { getRenderContainer } from \"../../../lib/utils/index.js\";\r\nimport { ImageBlockWidth } from \"./ImageBlockWidth.js\";\r\nimport i18next from \"i18next\";\r\n\r\nexport const ImageBlockMenu = ({ editor, appendTo }: MenuProps): ReactNode => {\r\n const menuRef = useRef<HTMLDivElement>(null);\r\n const tippyInstance = useRef<Instance | null>(null);\r\n\r\n const getReferenceClientRect = useCallback(() => {\r\n const renderContainer = getRenderContainer(editor, \"node-imageBlock\");\r\n const rect =\r\n renderContainer?.getBoundingClientRect() ||\r\n new DOMRect(-1000, -1000, 0, 0);\r\n\r\n return rect;\r\n }, [editor]);\r\n\r\n const shouldShow = useCallback(() => {\r\n const isActive = editor.isActive(\"imageBlock\");\r\n\r\n return isActive;\r\n }, [editor]);\r\n\r\n const onAlignImageLeft = useCallback(() => {\r\n editor\r\n .chain()\r\n .focus(undefined, { scrollIntoView: false })\r\n .setImageBlockAlign(\"left\")\r\n .run();\r\n }, [editor]);\r\n\r\n const onAlignImageCenter = useCallback(() => {\r\n editor\r\n .chain()\r\n .focus(undefined, { scrollIntoView: false })\r\n .setImageBlockAlign(\"center\")\r\n .run();\r\n }, [editor]);\r\n\r\n const onAlignImageRight = useCallback(() => {\r\n editor\r\n .chain()\r\n .focus(undefined, { scrollIntoView: false })\r\n .setImageBlockAlign(\"right\")\r\n .run();\r\n }, [editor]);\r\n\r\n const onWidthChange = useCallback(\r\n (value: number) => {\r\n editor\r\n .chain()\r\n .focus(undefined, { scrollIntoView: false })\r\n .setImageBlockWidth(value)\r\n .run();\r\n },\r\n [editor]\r\n );\r\n\r\n return (\r\n <BaseBubbleMenu\r\n editor={editor}\r\n pluginKey={`imageBlockMenu-${uuid()}`}\r\n shouldShow={shouldShow}\r\n updateDelay={0}\r\n tippyOptions={{\r\n offset: [0, 8],\r\n popperOptions: {\r\n modifiers: [{ name: \"flip\", enabled: false }],\r\n },\r\n getReferenceClientRect,\r\n onCreate: (instance: Instance) => {\r\n tippyInstance.current = instance;\r\n },\r\n appendTo: () => {\r\n return appendTo?.current;\r\n },\r\n plugins: [sticky],\r\n sticky: \"popper\",\r\n }}\r\n >\r\n <Toolbar.Wrapper shouldShowContent={shouldShow()} ref={menuRef}>\r\n <Toolbar.Button\r\n type=\"button\"\r\n tooltip={i18next.t(\"alignImageLeft\") || \"Align image left\"}\r\n active={editor.isActive(\"imageBlock\", { align: \"left\" })}\r\n onClick={onAlignImageLeft}\r\n >\r\n <Icon icon={AlignHorizontalDistributeStart} />\r\n </Toolbar.Button>\r\n <Toolbar.Button\r\n type=\"button\"\r\n tooltip={i18next.t(\"alignImageCenter\") || \"Align image center\"}\r\n active={editor.isActive(\"imageBlock\", { align: \"center\" })}\r\n onClick={onAlignImageCenter}\r\n >\r\n <Icon icon={AlignHorizontalDistributeCenter} />\r\n </Toolbar.Button>\r\n <Toolbar.Button\r\n type=\"button\"\r\n tooltip={i18next.t(\"alignImageRight\") || \"Align image right\"}\r\n active={editor.isActive(\"imageBlock\", { align: \"right\" })}\r\n onClick={onAlignImageRight}\r\n >\r\n <Icon icon={AlignHorizontalDistributeEnd} />\r\n </Toolbar.Button>\r\n <Toolbar.Divider />\r\n <ImageBlockWidth\r\n onChange={onWidthChange}\r\n value={parseInt(editor.getAttributes(\"imageBlock\").width)}\r\n />\r\n </Toolbar.Wrapper>\r\n </BaseBubbleMenu>\r\n );\r\n};\r\n\r\nexport default ImageBlockMenu;\r\n"],"names":["BubbleMenu","BaseBubbleMenu","useCallback","useRef","sticky","v4","uuid","AlignHorizontalDistributeCenter","AlignHorizontalDistributeEnd","AlignHorizontalDistributeStart","Icon","Toolbar","getRenderContainer","ImageBlockWidth","i18next","ImageBlockMenu","editor","appendTo","menuRef","tippyInstance","getReferenceClientRect","renderContainer","rect","getBoundingClientRect","DOMRect","shouldShow","isActive","onAlignImageLeft","chain","focus","undefined","scrollIntoView","setImageBlockAlign","run","onAlignImageCenter","onAlignImageRight","onWidthChange","value","setImageBlockWidth","pluginKey","updateDelay","tippyOptions","offset","popperOptions","modifiers","name","enabled","onCreate","instance","current","plugins","Wrapper","shouldShowContent","ref","Button","type","tooltip","t","active","align","onClick","icon","Divider","onChange","parseInt","getAttributes","width"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/InsideLinks/InsideLink.client.tsx"],"sourcesContent":["\"use client\";\r\n\r\n// import { CustomRelationShipComponent } from '@/components/CustomRelationshipComponent'\r\n// import { PayloadAsyncSelect } from '@/components/PayloadAsyncSelect'\r\nimport { Button } from \"@payloadcms/ui/elements/Button\";\r\nimport { useCallback, useState } from \"react\";\r\n\r\nconst limit = 10;\r\nexport const ContentRelationship = ({\r\n setRelationship,\r\n cancelSelection,\r\n}: {\r\n type?: string;\r\n relationId?: string;\r\n cancelSelection: () => void;\r\n setRelationship: ({\r\n id,\r\n type,\r\n thumbnail,\r\n title,\r\n url,\r\n }: {\r\n id: string;\r\n type: string;\r\n thumbnail: string;\r\n title: string;\r\n url: string;\r\n }) => void;\r\n}) => {\r\n const [optionType, setOptionType] = useState(\"articles\");\r\n const [relationOption, setRelationOption] = useState<any>(null);\r\n const opts = [\r\n {\r\n label: \"Article\",\r\n value: \"articles\",\r\n },\r\n {\r\n label: \"Video\",\r\n value: \"video\",\r\n },\r\n {\r\n label: \"Audio\",\r\n value: \"audios\",\r\n },\r\n // {\r\n // label: 'Media',\r\n // value: 'media',\r\n // },\r\n ];\r\n\r\n const fetchContentTypes = useCallback(\r\n async (search: any, loadedOptions: any, { page }: any) => {\r\n try {\r\n // Perform your API call with the endpoint and inputValue\r\n\r\n return {\r\n options: opts,\r\n hasMore: opts?.length === limit,\r\n additional: {\r\n page: page + 1,\r\n },\r\n };\r\n } catch (error) {\r\n // console.error('Error fetching data:', error)\r\n }\r\n },\r\n []\r\n );\r\n return (\r\n <div className=\"w-full min-w-[300px] \">\r\n {/* <PayloadAsyncSelect\r\n fetchData={fetchContentTypes as any}\r\n handleChange={(val: string) => {\r\n setOptionType(val);\r\n }}\r\n defaultValue={opts?.find((option) => {\r\n return option.value === optionType;\r\n })}\r\n cacheOptions={null}\r\n /> */}\r\n\r\n {/* <CustomRelationShipComponent\r\n label={`${\r\n opts?.find((option) => {\r\n return option.value === optionType\r\n })?.label\r\n } Content`}\r\n collection={optionType}\r\n key={optionType}\r\n value={relationOption?.id ?? null}\r\n handleChange={(val: any) => {\r\n setRelationOption(val)\r\n }}\r\n handleInitialLoad={(val: any) => {\r\n setRelationOption(val)\r\n }}\r\n /> */}\r\n\r\n <div>\r\n <Button\r\n onClick={() => {\r\n let url = \"\";\r\n const topic = relationOption?.topics?.[0]?.slug ?? \"\";\r\n switch (optionType) {\r\n case \"articles\":\r\n url = `/${topic}/${relationOption?.slug}`;\r\n break;\r\n case \"video\":\r\n url = `/video/${relationOption?.slug}`;\r\n\r\n break;\r\n case \"audios\":\r\n url = `/audio/${relationOption?.slug}`;\r\n break;\r\n }\r\n setRelationship({\r\n id: relationOption?.id,\r\n type: optionType,\r\n thumbnail: relationOption?.thumbnail?.url,\r\n title: relationOption?.title,\r\n url: url,\r\n });\r\n }}\r\n >\r\n Save\r\n </Button>\r\n\r\n {/* <Button\r\n onClick={() => {\r\n cancelSelection()\r\n }}\r\n >\r\n Cancel\r\n </Button> */}\r\n </div>\r\n </div>\r\n );\r\n};\r\n"],"names":["Button","useCallback","useState","limit","ContentRelationship","setRelationship","cancelSelection","optionType","setOptionType","relationOption","setRelationOption","opts","label","value","fetchContentTypes","search","loadedOptions","page","options","hasMore","length","additional","error","div","className","onClick","url","topic","topics","slug","id","type","thumbnail","title"],"mappings":"AAAA;;AAEA,yFAAyF;AACzF,uEAAuE;AACvE,SAASA,MAAM,QAAQ,iCAAiC;AACxD,SAASC,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAE9C,MAAMC,QAAQ;AACd,OAAO,MAAMC,sBAAsB,CAAC,EAClCC,eAAe,EACfC,eAAe,EAkBhB;IACC,MAAM,CAACC,YAAYC,cAAc,GAAGN,SAAS;IAC7C,MAAM,CAACO,gBAAgBC,kBAAkB,GAAGR,SAAc;IAC1D,MAAMS,OAAO;QACX;YACEC,OAAO;YACPC,OAAO;QACT;QACA;YACED,OAAO;YACPC,OAAO;QACT;QACA;YACED,OAAO;YACPC,OAAO;QACT;KAKD;IAED,MAAMC,oBAAoBb,YACxB,OAAOc,QAAaC,eAAoB,EAAEC,IAAI,EAAO;QACnD,IAAI;YACF,yDAAyD;YAEzD,OAAO;gBACLC,SAASP;gBACTQ,SAASR,MAAMS,WAAWjB;gBAC1BkB,YAAY;oBACVJ,MAAMA,OAAO;gBACf;YACF;QACF,EAAE,OAAOK,OAAO;QACd,+CAA+C;QACjD;IACF,GACA,EAAE;IAEJ,qBACE,KAACC;QAAIC,WAAU;kBA6Bb,cAAA,KAACD;sBACC,cAAA,KAACvB;gBACCyB,SAAS;oBACP,IAAIC,MAAM;oBACV,MAAMC,QAAQlB,gBAAgBmB,QAAQ,CAAC,EAAE,EAAEC,QAAQ;oBACnD,OAAQtB;wBACN,KAAK;4BACHmB,MAAM,CAAC,CAAC,EAAEC,MAAM,CAAC,EAAElB,gBAAgBoB,
|
|
1
|
+
{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/InsideLinks/InsideLink.client.tsx"],"sourcesContent":["\"use client\";\r\n\r\n// import { CustomRelationShipComponent } from '@/components/CustomRelationshipComponent'\r\n// import { PayloadAsyncSelect } from '@/components/PayloadAsyncSelect'\r\nimport { Button } from \"@payloadcms/ui/elements/Button\";\r\nimport { useCallback, useState } from \"react\";\r\n\r\nconst limit = 10;\r\nexport const ContentRelationship = ({\r\n setRelationship,\r\n cancelSelection,\r\n}: {\r\n type?: string;\r\n relationId?: string;\r\n cancelSelection: () => void;\r\n setRelationship: ({\r\n id,\r\n type,\r\n thumbnail,\r\n title,\r\n url,\r\n }: {\r\n id: string;\r\n type: string;\r\n thumbnail: string;\r\n title: string;\r\n url: string;\r\n }) => void;\r\n}) => {\r\n const [optionType, setOptionType] = useState(\"articles\");\r\n const [relationOption, setRelationOption] = useState<any>(null);\r\n const opts = [\r\n {\r\n label: \"Article\",\r\n value: \"articles\",\r\n },\r\n {\r\n label: \"Video\",\r\n value: \"video\",\r\n },\r\n {\r\n label: \"Audio\",\r\n value: \"audios\",\r\n },\r\n // {\r\n // label: 'Media',\r\n // value: 'media',\r\n // },\r\n ];\r\n\r\n const fetchContentTypes = useCallback(\r\n async (search: any, loadedOptions: any, { page }: any) => {\r\n try {\r\n // Perform your API call with the endpoint and inputValue\r\n\r\n return {\r\n options: opts,\r\n hasMore: opts?.length === limit,\r\n additional: {\r\n page: page + 1,\r\n },\r\n };\r\n } catch (error) {\r\n // console.error('Error fetching data:', error)\r\n }\r\n },\r\n []\r\n );\r\n return (\r\n <div className=\"w-full min-w-[300px] \">\r\n {/* <PayloadAsyncSelect\r\n fetchData={fetchContentTypes as any}\r\n handleChange={(val: string) => {\r\n setOptionType(val);\r\n }}\r\n defaultValue={opts?.find((option) => {\r\n return option.value === optionType;\r\n })}\r\n cacheOptions={null}\r\n /> */}\r\n\r\n {/* <CustomRelationShipComponent\r\n label={`${\r\n opts?.find((option) => {\r\n return option.value === optionType\r\n })?.label\r\n } Content`}\r\n collection={optionType}\r\n key={optionType}\r\n value={relationOption?.id ?? null}\r\n handleChange={(val: any) => {\r\n setRelationOption(val)\r\n }}\r\n handleInitialLoad={(val: any) => {\r\n setRelationOption(val)\r\n }}\r\n /> */}\r\n\r\n <div>\r\n <Button\r\n onClick={() => {\r\n let url = \"\";\r\n const topic = relationOption?.topics?.[0]?.slug ?? \"\";\r\n switch (optionType) {\r\n case \"articles\":\r\n url = `/${topic}/${relationOption?.slug}`;\r\n break;\r\n case \"video\":\r\n url = `/video/${relationOption?.slug}`;\r\n\r\n break;\r\n case \"audios\":\r\n url = `/audio/${relationOption?.slug}`;\r\n break;\r\n }\r\n setRelationship({\r\n id: relationOption?.id,\r\n type: optionType,\r\n thumbnail: relationOption?.thumbnail?.url,\r\n title: relationOption?.title,\r\n url: url,\r\n });\r\n }}\r\n >\r\n Save\r\n </Button>\r\n\r\n {/* <Button\r\n onClick={() => {\r\n cancelSelection()\r\n }}\r\n >\r\n Cancel\r\n </Button> */}\r\n </div>\r\n </div>\r\n );\r\n};\r\n"],"names":["Button","useCallback","useState","limit","ContentRelationship","setRelationship","cancelSelection","optionType","setOptionType","relationOption","setRelationOption","opts","label","value","fetchContentTypes","search","loadedOptions","page","options","hasMore","length","additional","error","div","className","onClick","url","topic","topics","slug","id","type","thumbnail","title"],"mappings":"AAAA;;AAEA,yFAAyF;AACzF,uEAAuE;AACvE,SAASA,MAAM,QAAQ,iCAAiC;AACxD,SAASC,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAE9C,MAAMC,QAAQ;AACd,OAAO,MAAMC,sBAAsB,CAAC,EAClCC,eAAe,EACfC,eAAe,EAkBhB;IACC,MAAM,CAACC,YAAYC,cAAc,GAAGN,SAAS;IAC7C,MAAM,CAACO,gBAAgBC,kBAAkB,GAAGR,SAAc;IAC1D,MAAMS,OAAO;QACX;YACEC,OAAO;YACPC,OAAO;QACT;QACA;YACED,OAAO;YACPC,OAAO;QACT;QACA;YACED,OAAO;YACPC,OAAO;QACT;KAKD;IAED,MAAMC,oBAAoBb,YACxB,OAAOc,QAAaC,eAAoB,EAAEC,IAAI,EAAO;QACnD,IAAI;YACF,yDAAyD;YAEzD,OAAO;gBACLC,SAASP;gBACTQ,SAASR,MAAMS,WAAWjB;gBAC1BkB,YAAY;oBACVJ,MAAMA,OAAO;gBACf;YACF;QACF,EAAE,OAAOK,OAAO;QACd,+CAA+C;QACjD;IACF,GACA,EAAE;IAEJ,qBACE,KAACC;QAAIC,WAAU;kBA6Bb,cAAA,KAACD;sBACC,cAAA,KAACvB;gBACCyB,SAAS;oBACP,IAAIC,MAAM;oBACV,MAAMC,QAAQlB,gBAAgBmB,QAAQ,CAAC,EAAE,EAAEC,QAAQ;oBACnD,OAAQtB;wBACN,KAAK;4BACHmB,MAAM,CAAC,CAAC,EAAEC,MAAM,CAAC,EAAElB,gBAAgBoB,MAAM;4BACzC;wBACF,KAAK;4BACHH,MAAM,CAAC,OAAO,EAAEjB,gBAAgBoB,MAAM;4BAEtC;wBACF,KAAK;4BACHH,MAAM,CAAC,OAAO,EAAEjB,gBAAgBoB,MAAM;4BACtC;oBACJ;oBACAxB,gBAAgB;wBACdyB,IAAIrB,gBAAgBqB;wBACpBC,MAAMxB;wBACNyB,WAAWvB,gBAAgBuB,WAAWN;wBACtCO,OAAOxB,gBAAgBwB;wBACvBP,KAAKA;oBACP;gBACF;0BACD;;;;AAcT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinkPreview.d.ts","sourceRoot":"","sources":["../../../../../../src/fields/TiptapEditor/extensions/LinkPreview/LinkPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAmB,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AAGpE,OAAO,QAAQ,cAAc,CAAC;IAC5B,UAAU,QAAQ,CAAC,UAAU;QAC3B,WAAW,EAAE;YACX,cAAc,EAAE,CAAC,GAAG,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,YAAY,KAAK,UAAU,CAAC;SACvE,CAAC;KACH;CACF;AAED,eAAO,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"LinkPreview.d.ts","sourceRoot":"","sources":["../../../../../../src/fields/TiptapEditor/extensions/LinkPreview/LinkPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAmB,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AAGpE,OAAO,QAAQ,cAAc,CAAC;IAC5B,UAAU,QAAQ,CAAC,UAAU;QAC3B,WAAW,EAAE;YACX,cAAc,EAAE,CAAC,GAAG,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,YAAY,KAAK,UAAU,CAAC;SACvE,CAAC;KACH;CACF;AAED,eAAO,MAAM,WAAW,gBA6GtB,CAAC"}
|
|
@@ -28,6 +28,8 @@ export const LinkPreview = Node.create({
|
|
|
28
28
|
];
|
|
29
29
|
},
|
|
30
30
|
renderHTML ({ node }) {
|
|
31
|
+
const hasValidImage = node.attrs.image && node.attrs.image !== '/png/placeholder.png';
|
|
32
|
+
const padding = hasValidImage ? 'px-4' : 'pl-6 pr-4';
|
|
31
33
|
return [
|
|
32
34
|
'a',
|
|
33
35
|
mergeAttributes({
|
|
@@ -36,17 +38,17 @@ export const LinkPreview = Node.create({
|
|
|
36
38
|
target: '_blank',
|
|
37
39
|
rel: 'noopener noreferrer',
|
|
38
40
|
dir: i18next.dir(),
|
|
39
|
-
class:
|
|
41
|
+
class: `relative flex w-full ${padding} py-3 flex-col items-start gap-6 rounded bg-[#F1F1F1] border-l-0 transition-all duration-200 ease-in-out box-border mb-4 hover:bg-[#F9F9F9] hover:shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_-4px_6px_-1px_rgba(0,0,0,0.06),4px_0_6px_-1px_rgba(0,0,0,0.06)] focus:bg-[#F9F9F9] focus:shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_-4px_6px_-1px_rgba(0,0,0,0.06),4px_0_6px_-1px_rgba(0,0,0,0.06)] before:content-[""] before:absolute before:left-0 before:top-0 before:bottom-0 before:w-[3px] before:rounded-l-md before:bg-[#01ABD9]`
|
|
40
42
|
}),
|
|
41
43
|
[
|
|
42
44
|
'div',
|
|
43
45
|
{
|
|
44
|
-
class: 'flex items-start w-full gap-3'
|
|
46
|
+
class: hasValidImage ? 'flex items-start w-full gap-3' : 'flex items-start w-full'
|
|
45
47
|
},
|
|
46
|
-
|
|
48
|
+
hasValidImage ? [
|
|
47
49
|
'img',
|
|
48
50
|
{
|
|
49
|
-
class: 'flex justify-center items-center rounded
|
|
51
|
+
class: 'flex justify-center items-center rounded-md !w-20 !h-20 aspect-square flex-shrink-0 sm:rounded md:rounded-md lg:!w-[84px] lg:!h-[84px] lg:rounded xl:rounded-md',
|
|
50
52
|
src: node.attrs.image
|
|
51
53
|
}
|
|
52
54
|
] : '',
|
|
@@ -58,7 +60,7 @@ export const LinkPreview = Node.create({
|
|
|
58
60
|
[
|
|
59
61
|
'span',
|
|
60
62
|
{
|
|
61
|
-
class: 'overflow-hidden text-[#1F2121] text-ellipsis font-[var(--font-notosans),Arial,sans-serif] text-xs md:text-base font-medium leading-[15px]
|
|
63
|
+
class: 'line-clamp-1 overflow-hidden text-[#1F2121] text-ellipsis font-[var(--font-notosans),Arial,sans-serif] text-xs font-bold leading-normal uppercase sm:text-xs sm:font-bold md:text-base md:font-medium md:leading-[15px] lg:text-base xl:text-base',
|
|
62
64
|
'data-link-preview-related': '',
|
|
63
65
|
'data-testid': 'link-preview-related'
|
|
64
66
|
},
|
|
@@ -67,7 +69,7 @@ export const LinkPreview = Node.create({
|
|
|
67
69
|
[
|
|
68
70
|
'strong',
|
|
69
71
|
{
|
|
70
|
-
class: 'text-[#1F2121] font-[var(--font-playfair),Georgia,serif] text-base
|
|
72
|
+
class: 'text-[#1F2121] font-[var(--font-playfair),Georgia,serif] text-base font-extrabold leading-[26px] underline decoration-solid line-clamp-2 overflow-hidden text-ellipsis sm:text-lg sm:leading-[31px] md:text-lg md:leading-[28px] lg:text-xl lg:leading-[31px] xl:text-xl'
|
|
71
73
|
},
|
|
72
74
|
node.attrs.title
|
|
73
75
|
]
|
|
@@ -78,13 +80,15 @@ export const LinkPreview = Node.create({
|
|
|
78
80
|
addCommands () {
|
|
79
81
|
return {
|
|
80
82
|
setLinkPreview: (src, metadata)=>({ commands, state })=>{
|
|
83
|
+
// Don't use placeholder image
|
|
84
|
+
const imageUrl = metadata?.images?.[0] || '';
|
|
81
85
|
return commands.insertContent({
|
|
82
86
|
type: 'linkPreview',
|
|
83
87
|
attrs: {
|
|
84
88
|
href: src,
|
|
85
89
|
title: metadata?.title,
|
|
86
90
|
description: metadata?.description,
|
|
87
|
-
image:
|
|
91
|
+
image: imageUrl
|
|
88
92
|
}
|
|
89
93
|
});
|
|
90
94
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/LinkPreview/LinkPreview.tsx"],"sourcesContent":["import { Node, mergeAttributes } from '@tiptap/core';\r\nimport { SiteMetaData } from '../../features/BlockEditor/types.jsx';\r\nimport i18next from 'i18next';\r\n\r\ndeclare module '@tiptap/core' {\r\n interface Commands<ReturnType> {\r\n linkPreview: {\r\n setLinkPreview: (src?: string, metadata?: SiteMetaData) => ReturnType;\r\n };\r\n }\r\n}\r\n\r\nexport const LinkPreview = Node.create({\r\n name: 'linkPreview',\r\n group: 'block',\r\n atom: true,\r\n\r\n addAttributes() {\r\n return {\r\n href: {\r\n default: ''\r\n },\r\n title: { default: '' },\r\n description: {\r\n default: ''\r\n },\r\n image: {\r\n default: ''\r\n }\r\n };\r\n },\r\n\r\n parseHTML() {\r\n return [\r\n {\r\n tag: 'a[data-link-preview]'\r\n }\r\n ];\r\n },\r\n\r\n renderHTML({ node }) {\r\n return [\r\n 'a',\r\n mergeAttributes({\r\n 'data-link-preview': '',\r\n href: node.attrs.href,\r\n target: '_blank',\r\n rel: 'noopener noreferrer',\r\n dir: i18next.dir(),\r\n class
|
|
1
|
+
{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/LinkPreview/LinkPreview.tsx"],"sourcesContent":["import { Node, mergeAttributes } from '@tiptap/core';\r\nimport { SiteMetaData } from '../../features/BlockEditor/types.jsx';\r\nimport i18next from 'i18next';\r\n\r\ndeclare module '@tiptap/core' {\r\n interface Commands<ReturnType> {\r\n linkPreview: {\r\n setLinkPreview: (src?: string, metadata?: SiteMetaData) => ReturnType;\r\n };\r\n }\r\n}\r\n\r\nexport const LinkPreview = Node.create({\r\n name: 'linkPreview',\r\n group: 'block',\r\n atom: true,\r\n\r\n addAttributes() {\r\n return {\r\n href: {\r\n default: ''\r\n },\r\n title: { default: '' },\r\n description: {\r\n default: ''\r\n },\r\n image: {\r\n default: ''\r\n }\r\n };\r\n },\r\n\r\n parseHTML() {\r\n return [\r\n {\r\n tag: 'a[data-link-preview]'\r\n }\r\n ];\r\n },\r\n\r\n renderHTML({ node }) {\r\n const hasValidImage =\r\n node.attrs.image && node.attrs.image !== '/png/placeholder.png';\r\n\r\n const padding = hasValidImage ? 'px-4' : 'pl-6 pr-4';\r\n\r\n return [\r\n 'a',\r\n mergeAttributes({\r\n 'data-link-preview': '',\r\n href: node.attrs.href,\r\n target: '_blank',\r\n rel: 'noopener noreferrer',\r\n dir: i18next.dir(),\r\n class: `relative flex w-full ${padding} py-3 flex-col items-start gap-6 rounded bg-[#F1F1F1] border-l-0 transition-all duration-200 ease-in-out box-border mb-4 hover:bg-[#F9F9F9] hover:shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_-4px_6px_-1px_rgba(0,0,0,0.06),4px_0_6px_-1px_rgba(0,0,0,0.06)] focus:bg-[#F9F9F9] focus:shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_-4px_6px_-1px_rgba(0,0,0,0.06),4px_0_6px_-1px_rgba(0,0,0,0.06)] before:content-[\"\"] before:absolute before:left-0 before:top-0 before:bottom-0 before:w-[3px] before:rounded-l-md before:bg-[#01ABD9]`\r\n }),\r\n [\r\n 'div',\r\n {\r\n class: hasValidImage\r\n ? 'flex items-start w-full gap-3'\r\n : 'flex items-start w-full'\r\n },\r\n hasValidImage\r\n ? [\r\n 'img',\r\n {\r\n class:\r\n 'flex justify-center items-center rounded-md !w-20 !h-20 aspect-square flex-shrink-0 sm:rounded md:rounded-md lg:!w-[84px] lg:!h-[84px] lg:rounded xl:rounded-md',\r\n src: node.attrs.image\r\n }\r\n ]\r\n : '',\r\n [\r\n 'div',\r\n {\r\n class: 'flex flex-col items-start'\r\n },\r\n [\r\n 'span',\r\n {\r\n class:\r\n 'line-clamp-1 overflow-hidden text-[#1F2121] text-ellipsis font-[var(--font-notosans),Arial,sans-serif] text-xs font-bold leading-normal uppercase sm:text-xs sm:font-bold md:text-base md:font-medium md:leading-[15px] lg:text-base xl:text-base',\r\n 'data-link-preview-related': '',\r\n 'data-testid': 'link-preview-related'\r\n },\r\n i18next.t('related', 'RELATED')\r\n ],\r\n [\r\n 'strong',\r\n {\r\n class:\r\n 'text-[#1F2121] font-[var(--font-playfair),Georgia,serif] text-base font-extrabold leading-[26px] underline decoration-solid line-clamp-2 overflow-hidden text-ellipsis sm:text-lg sm:leading-[31px] md:text-lg md:leading-[28px] lg:text-xl lg:leading-[31px] xl:text-xl'\r\n },\r\n node.attrs.title\r\n ]\r\n ]\r\n ]\r\n ];\r\n },\r\n\r\n addCommands() {\r\n return {\r\n setLinkPreview:\r\n (src, metadata) =>\r\n ({ commands, state }) => {\r\n // Don't use placeholder image\r\n const imageUrl = metadata?.images?.[0] || '';\r\n\r\n return commands.insertContent({\r\n type: 'linkPreview',\r\n attrs: {\r\n href: src,\r\n title: metadata?.title,\r\n description: metadata?.description,\r\n image: imageUrl\r\n }\r\n });\r\n }\r\n };\r\n }\r\n});\r\n"],"names":["Node","mergeAttributes","i18next","LinkPreview","create","name","group","atom","addAttributes","href","default","title","description","image","parseHTML","tag","renderHTML","node","hasValidImage","attrs","padding","target","rel","dir","class","src","t","addCommands","setLinkPreview","metadata","commands","state","imageUrl","images","insertContent","type"],"mappings":"AAAA,SAASA,IAAI,EAAEC,eAAe,QAAQ,eAAe;AAErD,OAAOC,aAAa,UAAU;AAU9B,OAAO,MAAMC,cAAcH,KAAKI,MAAM,CAAC;IACrCC,MAAM;IACNC,OAAO;IACPC,MAAM;IAENC;QACE,OAAO;YACLC,MAAM;gBACJC,SAAS;YACX;YACAC,OAAO;gBAAED,SAAS;YAAG;YACrBE,aAAa;gBACXF,SAAS;YACX;YACAG,OAAO;gBACLH,SAAS;YACX;QACF;IACF;IAEAI;QACE,OAAO;YACL;gBACEC,KAAK;YACP;SACD;IACH;IAEAC,YAAW,EAAEC,IAAI,EAAE;QACjB,MAAMC,gBACJD,KAAKE,KAAK,CAACN,KAAK,IAAII,KAAKE,KAAK,CAACN,KAAK,KAAK;QAE3C,MAAMO,UAAUF,gBAAgB,SAAS;QAEzC,OAAO;YACL;YACAjB,gBAAgB;gBACd,qBAAqB;gBACrBQ,MAAMQ,KAAKE,KAAK,CAACV,IAAI;gBACrBY,QAAQ;gBACRC,KAAK;gBACLC,KAAKrB,QAAQqB,GAAG;gBAChBC,OAAO,CAAC,qBAAqB,EAAEJ,QAAQ,kgBAAkgB,CAAC;YAC5iB;YACA;gBACE;gBACA;oBACEI,OAAON,gBACH,kCACA;gBACN;gBACAA,gBACI;oBACE;oBACA;wBACEM,OACE;wBACFC,KAAKR,KAAKE,KAAK,CAACN,KAAK;oBACvB;iBACD,GACD;gBACJ;oBACE;oBACA;wBACEW,OAAO;oBACT;oBACA;wBACE;wBACA;4BACEA,OACE;4BACF,6BAA6B;4BAC7B,eAAe;wBACjB;wBACAtB,QAAQwB,CAAC,CAAC,WAAW;qBACtB;oBACD;wBACE;wBACA;4BACEF,OACE;wBACJ;wBACAP,KAAKE,KAAK,CAACR,KAAK;qBACjB;iBACF;aACF;SACF;IACH;IAEAgB;QACE,OAAO;YACLC,gBACE,CAACH,KAAKI,WACN,CAAC,EAAEC,QAAQ,EAAEC,KAAK,EAAE;oBAClB,8BAA8B;oBAC9B,MAAMC,WAAWH,UAAUI,QAAQ,CAAC,EAAE,IAAI;oBAE1C,OAAOH,SAASI,aAAa,CAAC;wBAC5BC,MAAM;wBACNhB,OAAO;4BACLV,MAAMgB;4BACNd,OAAOkB,UAAUlB;4BACjBC,aAAaiB,UAAUjB;4BACvBC,OAAOmB;wBACT;oBACF;gBACF;QACJ;IACF;AACF,GAAG"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { Node } from '@tiptap/core';
|
|
2
|
-
export var ColumnLayout
|
|
3
|
-
(function(ColumnLayout) {
|
|
2
|
+
export var ColumnLayout = /*#__PURE__*/ function(ColumnLayout) {
|
|
4
3
|
ColumnLayout["SidebarLeft"] = "sidebar-left";
|
|
5
4
|
ColumnLayout["SidebarRight"] = "sidebar-right";
|
|
6
5
|
ColumnLayout["TwoColumn"] = "two-column";
|
|
7
|
-
|
|
6
|
+
return ColumnLayout;
|
|
7
|
+
}({});
|
|
8
8
|
export const Columns = Node.create({
|
|
9
9
|
name: 'columns',
|
|
10
10
|
group: 'columns',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/MultiColumn/Columns.ts"],"sourcesContent":["import { Node } from '@tiptap/core'\r\n\r\nexport enum ColumnLayout {\r\n SidebarLeft = 'sidebar-left',\r\n SidebarRight = 'sidebar-right',\r\n TwoColumn = 'two-column',\r\n}\r\n\r\ndeclare module '@tiptap/core' {\r\n interface Commands<ReturnType> {\r\n columns: {\r\n setColumns: () => ReturnType\r\n setLayout: (layout: ColumnLayout) => ReturnType\r\n }\r\n }\r\n}\r\n\r\nexport const Columns = Node.create({\r\n name: 'columns',\r\n\r\n group: 'columns',\r\n\r\n content: 'column column',\r\n\r\n defining: true,\r\n\r\n isolating: true,\r\n\r\n addAttributes() {\r\n return {\r\n layout: {\r\n default: ColumnLayout.TwoColumn,\r\n },\r\n }\r\n },\r\n\r\n addCommands() {\r\n return {\r\n setColumns:\r\n () =>\r\n ({ commands }) =>\r\n commands.insertContent(\r\n `<div data-type=\"columns\"><div data-type=\"column\" data-position=\"left\"><p></p></div><div data-type=\"column\" data-position=\"right\"><p></p></div></div>`,\r\n ),\r\n setLayout:\r\n (layout: ColumnLayout) =>\r\n ({ commands }) =>\r\n commands.updateAttributes('columns', { layout }),\r\n }\r\n },\r\n\r\n renderHTML({ HTMLAttributes }) {\r\n return ['div', { 'data-type': 'columns', class: `layout-${HTMLAttributes.layout}` }, 0]\r\n },\r\n\r\n parseHTML() {\r\n return [\r\n {\r\n tag: 'div[data-type=\"columns\"]',\r\n },\r\n ]\r\n },\r\n})\r\n\r\nexport default Columns\r\n"],"names":["Node","ColumnLayout","Columns","create","name","group","content","defining","isolating","addAttributes","layout","default","addCommands","setColumns","commands","insertContent","setLayout","updateAttributes","renderHTML","HTMLAttributes","class","parseHTML","tag"],"mappings":"AAAA,SAASA,IAAI,QAAQ,eAAc
|
|
1
|
+
{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/MultiColumn/Columns.ts"],"sourcesContent":["import { Node } from '@tiptap/core'\r\n\r\nexport enum ColumnLayout {\r\n SidebarLeft = 'sidebar-left',\r\n SidebarRight = 'sidebar-right',\r\n TwoColumn = 'two-column',\r\n}\r\n\r\ndeclare module '@tiptap/core' {\r\n interface Commands<ReturnType> {\r\n columns: {\r\n setColumns: () => ReturnType\r\n setLayout: (layout: ColumnLayout) => ReturnType\r\n }\r\n }\r\n}\r\n\r\nexport const Columns = Node.create({\r\n name: 'columns',\r\n\r\n group: 'columns',\r\n\r\n content: 'column column',\r\n\r\n defining: true,\r\n\r\n isolating: true,\r\n\r\n addAttributes() {\r\n return {\r\n layout: {\r\n default: ColumnLayout.TwoColumn,\r\n },\r\n }\r\n },\r\n\r\n addCommands() {\r\n return {\r\n setColumns:\r\n () =>\r\n ({ commands }) =>\r\n commands.insertContent(\r\n `<div data-type=\"columns\"><div data-type=\"column\" data-position=\"left\"><p></p></div><div data-type=\"column\" data-position=\"right\"><p></p></div></div>`,\r\n ),\r\n setLayout:\r\n (layout: ColumnLayout) =>\r\n ({ commands }) =>\r\n commands.updateAttributes('columns', { layout }),\r\n }\r\n },\r\n\r\n renderHTML({ HTMLAttributes }) {\r\n return ['div', { 'data-type': 'columns', class: `layout-${HTMLAttributes.layout}` }, 0]\r\n },\r\n\r\n parseHTML() {\r\n return [\r\n {\r\n tag: 'div[data-type=\"columns\"]',\r\n },\r\n ]\r\n },\r\n})\r\n\r\nexport default Columns\r\n"],"names":["Node","ColumnLayout","Columns","create","name","group","content","defining","isolating","addAttributes","layout","default","addCommands","setColumns","commands","insertContent","setLayout","updateAttributes","renderHTML","HTMLAttributes","class","parseHTML","tag"],"mappings":"AAAA,SAASA,IAAI,QAAQ,eAAc;AAEnC,OAAO,IAAA,AAAKC,sCAAAA;;;;WAAAA;MAIX;AAWD,OAAO,MAAMC,UAAUF,KAAKG,MAAM,CAAC;IACjCC,MAAM;IAENC,OAAO;IAEPC,SAAS;IAETC,UAAU;IAEVC,WAAW;IAEXC;QACE,OAAO;YACLC,QAAQ;gBACNC,OAAO;YACT;QACF;IACF;IAEAC;QACE,OAAO;YACLC,YACE,IACA,CAAC,EAAEC,QAAQ,EAAE,GACXA,SAASC,aAAa,CACpB,CAAC,oJAAoJ,CAAC;YAE5JC,WACE,CAACN,SACD,CAAC,EAAEI,QAAQ,EAAE,GACXA,SAASG,gBAAgB,CAAC,WAAW;wBAAEP;oBAAO;QACpD;IACF;IAEAQ,YAAW,EAAEC,cAAc,EAAE;QAC3B,OAAO;YAAC;YAAO;gBAAE,aAAa;gBAAWC,OAAO,CAAC,OAAO,EAAED,eAAeT,MAAM,EAAE;YAAC;YAAG;SAAE;IACzF;IAEAW;QACE,OAAO;YACL;gBACEC,KAAK;YACP;SACD;IACH;AACF,GAAE;AAEF,eAAepB,QAAO"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/extensions/MultiColumn/menus/ColumnsMenu.tsx"],"sourcesContent":["import { BubbleMenu as BaseBubbleMenu } from \"@tiptap/react\";\r\nimport { useCallback } from \"react\";\r\nimport { sticky } from \"tippy.js\";\r\nimport { v4 as uuid } from \"uuid\";\r\n\r\nimport { Columns2, PanelLeft, PanelRight } from \"lucide-react\";\r\nimport { MenuProps } from \"../../../features/menus/types.js\";\r\nimport { Icon } from \"../../../features/ui/Icon.js\";\r\nimport { Toolbar } from \"../../../features/ui/Toolbar.js\";\r\nimport { getRenderContainer } from \"../../../lib/utils/index.js\";\r\nimport { ColumnLayout } from \"../Columns.js\";\r\nimport i18next from \"i18next\";\r\n\r\nexport const ColumnsMenu = ({ editor, appendTo }: MenuProps) => {\r\n const getReferenceClientRect = useCallback(() => {\r\n const renderContainer = getRenderContainer(editor, \"columns\");\r\n const rect =\r\n renderContainer?.getBoundingClientRect() ||\r\n new DOMRect(-1000, -1000, 0, 0);\r\n\r\n return rect;\r\n }, [editor]);\r\n\r\n const shouldShow = useCallback(() => {\r\n const isColumns = editor.isActive(\"columns\");\r\n return isColumns;\r\n }, [editor]);\r\n\r\n const onColumnLeft = useCallback(() => {\r\n editor.chain().focus().setLayout(ColumnLayout.SidebarLeft).run();\r\n }, [editor]);\r\n\r\n const onColumnRight = useCallback(() => {\r\n editor.chain().focus().setLayout(ColumnLayout.SidebarRight).run();\r\n }, [editor]);\r\n\r\n const onColumnTwo = useCallback(() => {\r\n editor.chain().focus().setLayout(ColumnLayout.TwoColumn).run();\r\n }, [editor]);\r\n\r\n return (\r\n <BaseBubbleMenu\r\n editor={editor}\r\n pluginKey={`columnsMenu-${uuid()}`}\r\n shouldShow={shouldShow}\r\n updateDelay={0}\r\n tippyOptions={{\r\n offset: [0, 8],\r\n popperOptions: {\r\n modifiers: [{ name: \"flip\", enabled: false }],\r\n },\r\n getReferenceClientRect,\r\n appendTo: () => appendTo?.current,\r\n plugins: [sticky],\r\n sticky: \"popper\",\r\n }}\r\n >\r\n <Toolbar.Wrapper>\r\n <Toolbar.Button\r\n type=\"button\"\r\n tooltip={i18next.t(\"sidebarLeft\") || \"Sidebar left\"}\r\n active={editor.isActive(\"columns\", {\r\n layout: ColumnLayout.SidebarLeft,\r\n })}\r\n onClick={onColumnLeft}\r\n >\r\n <Icon icon={PanelLeft} />\r\n </Toolbar.Button>\r\n <Toolbar.Button\r\n type=\"button\"\r\n tooltip={i18next.t(\"twoColumns\") || \"Two columns\"}\r\n active={editor.isActive(\"columns\", {\r\n layout: ColumnLayout.TwoColumn,\r\n })}\r\n onClick={onColumnTwo}\r\n >\r\n <Icon icon={Columns2} />\r\n </Toolbar.Button>\r\n <Toolbar.Button\r\n type=\"button\"\r\n tooltip={i18next.t(\"sidebarRight\") || \"Sidebar right\"}\r\n active={editor.isActive(\"columns\", {\r\n layout: ColumnLayout.SidebarRight,\r\n })}\r\n onClick={onColumnRight}\r\n >\r\n <Icon icon={PanelRight} />\r\n </Toolbar.Button>\r\n </Toolbar.Wrapper>\r\n </BaseBubbleMenu>\r\n );\r\n};\r\n\r\nexport default ColumnsMenu;\r\n"],"names":["BubbleMenu","BaseBubbleMenu","useCallback","sticky","v4","uuid","Columns2","PanelLeft","PanelRight","Icon","Toolbar","getRenderContainer","ColumnLayout","i18next","ColumnsMenu","editor","appendTo","getReferenceClientRect","renderContainer","rect","getBoundingClientRect","DOMRect","shouldShow","isColumns","isActive","onColumnLeft","chain","focus","setLayout","SidebarLeft","run","onColumnRight","SidebarRight","onColumnTwo","TwoColumn","pluginKey","updateDelay","tippyOptions","offset","popperOptions","modifiers","name","enabled","current","plugins","Wrapper","Button","type","tooltip","t","active","layout","onClick","icon"],"mappings":";AAAA,SAASA,cAAcC,cAAc,QAAQ,gBAAgB;AAC7D,SAASC,WAAW,QAAQ,QAAQ;AACpC,SAASC,MAAM,QAAQ,WAAW;AAClC,SAASC,MAAMC,IAAI,QAAQ,OAAO;AAElC,SAASC,QAAQ,EAAEC,SAAS,EAAEC,UAAU,QAAQ,eAAe;AAE/D,SAASC,IAAI,QAAQ,+BAA+B;AACpD,SAASC,OAAO,QAAQ,kCAAkC;AAC1D,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SAASC,YAAY,QAAQ,gBAAgB;AAC7C,OAAOC,aAAa,UAAU;AAE9B,OAAO,MAAMC,cAAc,CAAC,EAAEC,MAAM,EAAEC,QAAQ,EAAa;IACzD,MAAMC,yBAAyBf,YAAY;QACzC,MAAMgB,kBAAkBP,mBAAmBI,QAAQ;QACnD,MAAMI,OACJD,iBAAiBE,2BACjB,IAAIC,QAAQ,CAAC,MAAM,CAAC,MAAM,GAAG;QAE/B,OAAOF;IACT,GAAG;QAACJ;KAAO;IAEX,MAAMO,aAAapB,YAAY;QAC7B,MAAMqB,YAAYR,OAAOS,QAAQ,CAAC;QAClC,OAAOD;IACT,GAAG;QAACR;KAAO;IAEX,MAAMU,eAAevB,YAAY;QAC/Ba,OAAOW,KAAK,GAAGC,KAAK,GAAGC,SAAS,CAAChB,aAAaiB,WAAW,EAAEC,GAAG;IAChE,GAAG;QAACf;KAAO;IAEX,MAAMgB,gBAAgB7B,YAAY;QAChCa,OAAOW,KAAK,GAAGC,KAAK,GAAGC,SAAS,CAAChB,aAAaoB,YAAY,EAAEF,GAAG;IACjE,GAAG;QAACf;KAAO;IAEX,MAAMkB,cAAc/B,YAAY;QAC9Ba,OAAOW,KAAK,GAAGC,KAAK,GAAGC,SAAS,CAAChB,aAAasB,SAAS,EAAEJ,GAAG;IAC9D,GAAG;QAACf;KAAO;IAEX,qBACE,KAACd;QACCc,QAAQA;QACRoB,WAAW,CAAC,YAAY,EAAE9B,
|
|
1
|
+
{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/extensions/MultiColumn/menus/ColumnsMenu.tsx"],"sourcesContent":["import { BubbleMenu as BaseBubbleMenu } from \"@tiptap/react\";\r\nimport { useCallback } from \"react\";\r\nimport { sticky } from \"tippy.js\";\r\nimport { v4 as uuid } from \"uuid\";\r\n\r\nimport { Columns2, PanelLeft, PanelRight } from \"lucide-react\";\r\nimport { MenuProps } from \"../../../features/menus/types.js\";\r\nimport { Icon } from \"../../../features/ui/Icon.js\";\r\nimport { Toolbar } from \"../../../features/ui/Toolbar.js\";\r\nimport { getRenderContainer } from \"../../../lib/utils/index.js\";\r\nimport { ColumnLayout } from \"../Columns.js\";\r\nimport i18next from \"i18next\";\r\n\r\nexport const ColumnsMenu = ({ editor, appendTo }: MenuProps) => {\r\n const getReferenceClientRect = useCallback(() => {\r\n const renderContainer = getRenderContainer(editor, \"columns\");\r\n const rect =\r\n renderContainer?.getBoundingClientRect() ||\r\n new DOMRect(-1000, -1000, 0, 0);\r\n\r\n return rect;\r\n }, [editor]);\r\n\r\n const shouldShow = useCallback(() => {\r\n const isColumns = editor.isActive(\"columns\");\r\n return isColumns;\r\n }, [editor]);\r\n\r\n const onColumnLeft = useCallback(() => {\r\n editor.chain().focus().setLayout(ColumnLayout.SidebarLeft).run();\r\n }, [editor]);\r\n\r\n const onColumnRight = useCallback(() => {\r\n editor.chain().focus().setLayout(ColumnLayout.SidebarRight).run();\r\n }, [editor]);\r\n\r\n const onColumnTwo = useCallback(() => {\r\n editor.chain().focus().setLayout(ColumnLayout.TwoColumn).run();\r\n }, [editor]);\r\n\r\n return (\r\n <BaseBubbleMenu\r\n editor={editor}\r\n pluginKey={`columnsMenu-${uuid()}`}\r\n shouldShow={shouldShow}\r\n updateDelay={0}\r\n tippyOptions={{\r\n offset: [0, 8],\r\n popperOptions: {\r\n modifiers: [{ name: \"flip\", enabled: false }],\r\n },\r\n getReferenceClientRect,\r\n appendTo: () => appendTo?.current,\r\n plugins: [sticky],\r\n sticky: \"popper\",\r\n }}\r\n >\r\n <Toolbar.Wrapper>\r\n <Toolbar.Button\r\n type=\"button\"\r\n tooltip={i18next.t(\"sidebarLeft\") || \"Sidebar left\"}\r\n active={editor.isActive(\"columns\", {\r\n layout: ColumnLayout.SidebarLeft,\r\n })}\r\n onClick={onColumnLeft}\r\n >\r\n <Icon icon={PanelLeft} />\r\n </Toolbar.Button>\r\n <Toolbar.Button\r\n type=\"button\"\r\n tooltip={i18next.t(\"twoColumns\") || \"Two columns\"}\r\n active={editor.isActive(\"columns\", {\r\n layout: ColumnLayout.TwoColumn,\r\n })}\r\n onClick={onColumnTwo}\r\n >\r\n <Icon icon={Columns2} />\r\n </Toolbar.Button>\r\n <Toolbar.Button\r\n type=\"button\"\r\n tooltip={i18next.t(\"sidebarRight\") || \"Sidebar right\"}\r\n active={editor.isActive(\"columns\", {\r\n layout: ColumnLayout.SidebarRight,\r\n })}\r\n onClick={onColumnRight}\r\n >\r\n <Icon icon={PanelRight} />\r\n </Toolbar.Button>\r\n </Toolbar.Wrapper>\r\n </BaseBubbleMenu>\r\n );\r\n};\r\n\r\nexport default ColumnsMenu;\r\n"],"names":["BubbleMenu","BaseBubbleMenu","useCallback","sticky","v4","uuid","Columns2","PanelLeft","PanelRight","Icon","Toolbar","getRenderContainer","ColumnLayout","i18next","ColumnsMenu","editor","appendTo","getReferenceClientRect","renderContainer","rect","getBoundingClientRect","DOMRect","shouldShow","isColumns","isActive","onColumnLeft","chain","focus","setLayout","SidebarLeft","run","onColumnRight","SidebarRight","onColumnTwo","TwoColumn","pluginKey","updateDelay","tippyOptions","offset","popperOptions","modifiers","name","enabled","current","plugins","Wrapper","Button","type","tooltip","t","active","layout","onClick","icon"],"mappings":";AAAA,SAASA,cAAcC,cAAc,QAAQ,gBAAgB;AAC7D,SAASC,WAAW,QAAQ,QAAQ;AACpC,SAASC,MAAM,QAAQ,WAAW;AAClC,SAASC,MAAMC,IAAI,QAAQ,OAAO;AAElC,SAASC,QAAQ,EAAEC,SAAS,EAAEC,UAAU,QAAQ,eAAe;AAE/D,SAASC,IAAI,QAAQ,+BAA+B;AACpD,SAASC,OAAO,QAAQ,kCAAkC;AAC1D,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SAASC,YAAY,QAAQ,gBAAgB;AAC7C,OAAOC,aAAa,UAAU;AAE9B,OAAO,MAAMC,cAAc,CAAC,EAAEC,MAAM,EAAEC,QAAQ,EAAa;IACzD,MAAMC,yBAAyBf,YAAY;QACzC,MAAMgB,kBAAkBP,mBAAmBI,QAAQ;QACnD,MAAMI,OACJD,iBAAiBE,2BACjB,IAAIC,QAAQ,CAAC,MAAM,CAAC,MAAM,GAAG;QAE/B,OAAOF;IACT,GAAG;QAACJ;KAAO;IAEX,MAAMO,aAAapB,YAAY;QAC7B,MAAMqB,YAAYR,OAAOS,QAAQ,CAAC;QAClC,OAAOD;IACT,GAAG;QAACR;KAAO;IAEX,MAAMU,eAAevB,YAAY;QAC/Ba,OAAOW,KAAK,GAAGC,KAAK,GAAGC,SAAS,CAAChB,aAAaiB,WAAW,EAAEC,GAAG;IAChE,GAAG;QAACf;KAAO;IAEX,MAAMgB,gBAAgB7B,YAAY;QAChCa,OAAOW,KAAK,GAAGC,KAAK,GAAGC,SAAS,CAAChB,aAAaoB,YAAY,EAAEF,GAAG;IACjE,GAAG;QAACf;KAAO;IAEX,MAAMkB,cAAc/B,YAAY;QAC9Ba,OAAOW,KAAK,GAAGC,KAAK,GAAGC,SAAS,CAAChB,aAAasB,SAAS,EAAEJ,GAAG;IAC9D,GAAG;QAACf;KAAO;IAEX,qBACE,KAACd;QACCc,QAAQA;QACRoB,WAAW,CAAC,YAAY,EAAE9B,QAAQ;QAClCiB,YAAYA;QACZc,aAAa;QACbC,cAAc;YACZC,QAAQ;gBAAC;gBAAG;aAAE;YACdC,eAAe;gBACbC,WAAW;oBAAC;wBAAEC,MAAM;wBAAQC,SAAS;oBAAM;iBAAE;YAC/C;YACAzB;YACAD,UAAU,IAAMA,UAAU2B;YAC1BC,SAAS;gBAACzC;aAAO;YACjBA,QAAQ;QACV;kBAEA,cAAA,MAACO,QAAQmC,OAAO;;8BACd,KAACnC,QAAQoC,MAAM;oBACbC,MAAK;oBACLC,SAASnC,QAAQoC,CAAC,CAAC,kBAAkB;oBACrCC,QAAQnC,OAAOS,QAAQ,CAAC,WAAW;wBACjC2B,QAAQvC,aAAaiB,WAAW;oBAClC;oBACAuB,SAAS3B;8BAET,cAAA,KAAChB;wBAAK4C,MAAM9C;;;8BAEd,KAACG,QAAQoC,MAAM;oBACbC,MAAK;oBACLC,SAASnC,QAAQoC,CAAC,CAAC,iBAAiB;oBACpCC,QAAQnC,OAAOS,QAAQ,CAAC,WAAW;wBACjC2B,QAAQvC,aAAasB,SAAS;oBAChC;oBACAkB,SAASnB;8BAET,cAAA,KAACxB;wBAAK4C,MAAM/C;;;8BAEd,KAACI,QAAQoC,MAAM;oBACbC,MAAK;oBACLC,SAASnC,QAAQoC,CAAC,CAAC,mBAAmB;oBACtCC,QAAQnC,OAAOS,QAAQ,CAAC,WAAW;wBACjC2B,QAAQvC,aAAaoB,YAAY;oBACnC;oBACAoB,SAASrB;8BAET,cAAA,KAACtB;wBAAK4C,MAAM7C;;;;;;AAKtB,EAAE;AAEF,eAAeM,YAAY"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/SlashCommand/MenuList.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from \"react\";\r\n\r\nimport { DropdownButton } from \"../../features/ui/Dropdown/Dropdown.js\";\r\nimport { Surface } from \"../../features/ui/Surface.js\";\r\nimport { Command, MenuListProps } from \"./types.js\";\r\n\r\nimport { Icon } from \"../../features/ui/Icon.js\";\r\nimport { AICommandPanel } from \"../../features/panels/AICommandPanel/AICommandPanel.js\";\r\n\r\nexport const MenuList = React.forwardRef((props: MenuListProps, ref) => {\r\n const scrollContainer = useRef<HTMLDivElement>(null);\r\n const activeItem = useRef<HTMLButtonElement>(null);\r\n const [selectedGroupIndex, setSelectedGroupIndex] = useState(0);\r\n const [selectedCommandIndex, setSelectedCommandIndex] = useState(0);\r\n\r\n // Anytime the groups change, i.e. the user types to narrow it down, we want to\r\n // reset the current selection to the first menu item\r\n useEffect(() => {\r\n setSelectedGroupIndex(0);\r\n setSelectedCommandIndex(0);\r\n }, [props.items]);\r\n\r\n const selectItem = useCallback(\r\n (groupIndex: number, commandIndex: number) => {\r\n const command = props.items[groupIndex].commands[commandIndex];\r\n props.command(command);\r\n },\r\n [props]\r\n );\r\n\r\n React.useImperativeHandle(ref, () => ({\r\n onKeyDown: ({ event }: { event: React.KeyboardEvent }) => {\r\n if (event.key === \"ArrowDown\") {\r\n if (!props.items.length) {\r\n return false;\r\n }\r\n\r\n const commands = props.items[selectedGroupIndex].commands;\r\n\r\n let newCommandIndex = selectedCommandIndex + 1;\r\n let newGroupIndex = selectedGroupIndex;\r\n\r\n if (commands.length - 1 < newCommandIndex) {\r\n newCommandIndex = 0;\r\n newGroupIndex = selectedGroupIndex + 1;\r\n }\r\n\r\n if (props.items.length - 1 < newGroupIndex) {\r\n newGroupIndex = 0;\r\n }\r\n\r\n setSelectedCommandIndex(newCommandIndex);\r\n setSelectedGroupIndex(newGroupIndex);\r\n\r\n return true;\r\n }\r\n\r\n if (event.key === \"ArrowUp\") {\r\n if (!props.items.length) {\r\n return false;\r\n }\r\n\r\n let newCommandIndex = selectedCommandIndex - 1;\r\n let newGroupIndex = selectedGroupIndex;\r\n\r\n if (newCommandIndex < 0) {\r\n newGroupIndex = selectedGroupIndex - 1;\r\n newCommandIndex =\r\n props.items[newGroupIndex]?.commands.length - 1 || 0;\r\n }\r\n\r\n if (newGroupIndex < 0) {\r\n newGroupIndex = props.items.length - 1;\r\n newCommandIndex = props.items[newGroupIndex].commands.length - 1;\r\n }\r\n\r\n setSelectedCommandIndex(newCommandIndex);\r\n setSelectedGroupIndex(newGroupIndex);\r\n\r\n return true;\r\n }\r\n\r\n if (event.key === \"Enter\") {\r\n if (\r\n !props.items.length ||\r\n selectedGroupIndex === -1 ||\r\n selectedCommandIndex === -1\r\n ) {\r\n return false;\r\n }\r\n\r\n selectItem(selectedGroupIndex, selectedCommandIndex);\r\n\r\n return true;\r\n }\r\n\r\n return false;\r\n },\r\n }));\r\n\r\n useEffect(() => {\r\n if (activeItem.current && scrollContainer.current) {\r\n const offsetTop = activeItem.current.offsetTop;\r\n const offsetHeight = activeItem.current.offsetHeight;\r\n\r\n scrollContainer.current.scrollTop = offsetTop - offsetHeight;\r\n }\r\n }, [selectedCommandIndex, selectedGroupIndex]);\r\n\r\n const createCommandClickHandler = useCallback(\r\n (groupIndex: number, commandIndex: number) => {\r\n return () => {\r\n selectItem(groupIndex, commandIndex);\r\n };\r\n },\r\n [selectItem]\r\n );\r\n\r\n if (!props.items.length) {\r\n return null;\r\n }\r\n\r\n return (\r\n <>\r\n <Surface\r\n ref={scrollContainer}\r\n className=\"text-black max-h-[min(80vh,24rem)] overflow-auto flex-wrap mb-8 p-2\"\r\n >\r\n <div className=\"grid grid-cols-1 gap-0.5\">\r\n {props.items.map((group, groupIndex: number) => (\r\n <React.Fragment key={`${group.title}-wrapper`}>\r\n <div\r\n className=\"text-neutral-500 text-[0.65rem] col-[1/-1] mx-2 mt-4 font-semibold tracking-wider select-none uppercase first:mt-0.5\"\r\n key={`${group.title}`}\r\n >\r\n {group.title}\r\n </div>\r\n {group.commands.map((command: Command, commandIndex: number) => (\r\n <DropdownButton\r\n key={`${command.label}`}\r\n isActive={\r\n selectedGroupIndex === groupIndex &&\r\n selectedCommandIndex === commandIndex\r\n }\r\n onClick={createCommandClickHandler(groupIndex, commandIndex)}\r\n >\r\n <Icon icon={command.icon} className=\"mr-1\" />\r\n {command.label}\r\n </DropdownButton>\r\n ))}\r\n </React.Fragment>\r\n ))}\r\n </div>\r\n </Surface>\r\n </>\r\n );\r\n});\r\n\r\nMenuList.displayName = \"MenuList\";\r\n\r\nexport default MenuList;\r\n"],"names":["React","useCallback","useEffect","useRef","useState","DropdownButton","Surface","Icon","MenuList","forwardRef","props","ref","scrollContainer","activeItem","selectedGroupIndex","setSelectedGroupIndex","selectedCommandIndex","setSelectedCommandIndex","items","selectItem","groupIndex","commandIndex","command","commands","useImperativeHandle","onKeyDown","event","key","length","newCommandIndex","newGroupIndex","current","offsetTop","offsetHeight","scrollTop","createCommandClickHandler","className","div","map","group","Fragment","title","isActive","onClick","icon","label","displayName"],"mappings":"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
|
|
1
|
+
{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/SlashCommand/MenuList.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from \"react\";\r\n\r\nimport { DropdownButton } from \"../../features/ui/Dropdown/Dropdown.js\";\r\nimport { Surface } from \"../../features/ui/Surface.js\";\r\nimport { Command, MenuListProps } from \"./types.js\";\r\n\r\nimport { Icon } from \"../../features/ui/Icon.js\";\r\nimport { AICommandPanel } from \"../../features/panels/AICommandPanel/AICommandPanel.js\";\r\n\r\nexport const MenuList = React.forwardRef((props: MenuListProps, ref) => {\r\n const scrollContainer = useRef<HTMLDivElement>(null);\r\n const activeItem = useRef<HTMLButtonElement>(null);\r\n const [selectedGroupIndex, setSelectedGroupIndex] = useState(0);\r\n const [selectedCommandIndex, setSelectedCommandIndex] = useState(0);\r\n\r\n // Anytime the groups change, i.e. the user types to narrow it down, we want to\r\n // reset the current selection to the first menu item\r\n useEffect(() => {\r\n setSelectedGroupIndex(0);\r\n setSelectedCommandIndex(0);\r\n }, [props.items]);\r\n\r\n const selectItem = useCallback(\r\n (groupIndex: number, commandIndex: number) => {\r\n const command = props.items[groupIndex].commands[commandIndex];\r\n props.command(command);\r\n },\r\n [props]\r\n );\r\n\r\n React.useImperativeHandle(ref, () => ({\r\n onKeyDown: ({ event }: { event: React.KeyboardEvent }) => {\r\n if (event.key === \"ArrowDown\") {\r\n if (!props.items.length) {\r\n return false;\r\n }\r\n\r\n const commands = props.items[selectedGroupIndex].commands;\r\n\r\n let newCommandIndex = selectedCommandIndex + 1;\r\n let newGroupIndex = selectedGroupIndex;\r\n\r\n if (commands.length - 1 < newCommandIndex) {\r\n newCommandIndex = 0;\r\n newGroupIndex = selectedGroupIndex + 1;\r\n }\r\n\r\n if (props.items.length - 1 < newGroupIndex) {\r\n newGroupIndex = 0;\r\n }\r\n\r\n setSelectedCommandIndex(newCommandIndex);\r\n setSelectedGroupIndex(newGroupIndex);\r\n\r\n return true;\r\n }\r\n\r\n if (event.key === \"ArrowUp\") {\r\n if (!props.items.length) {\r\n return false;\r\n }\r\n\r\n let newCommandIndex = selectedCommandIndex - 1;\r\n let newGroupIndex = selectedGroupIndex;\r\n\r\n if (newCommandIndex < 0) {\r\n newGroupIndex = selectedGroupIndex - 1;\r\n newCommandIndex =\r\n props.items[newGroupIndex]?.commands.length - 1 || 0;\r\n }\r\n\r\n if (newGroupIndex < 0) {\r\n newGroupIndex = props.items.length - 1;\r\n newCommandIndex = props.items[newGroupIndex].commands.length - 1;\r\n }\r\n\r\n setSelectedCommandIndex(newCommandIndex);\r\n setSelectedGroupIndex(newGroupIndex);\r\n\r\n return true;\r\n }\r\n\r\n if (event.key === \"Enter\") {\r\n if (\r\n !props.items.length ||\r\n selectedGroupIndex === -1 ||\r\n selectedCommandIndex === -1\r\n ) {\r\n return false;\r\n }\r\n\r\n selectItem(selectedGroupIndex, selectedCommandIndex);\r\n\r\n return true;\r\n }\r\n\r\n return false;\r\n },\r\n }));\r\n\r\n useEffect(() => {\r\n if (activeItem.current && scrollContainer.current) {\r\n const offsetTop = activeItem.current.offsetTop;\r\n const offsetHeight = activeItem.current.offsetHeight;\r\n\r\n scrollContainer.current.scrollTop = offsetTop - offsetHeight;\r\n }\r\n }, [selectedCommandIndex, selectedGroupIndex]);\r\n\r\n const createCommandClickHandler = useCallback(\r\n (groupIndex: number, commandIndex: number) => {\r\n return () => {\r\n selectItem(groupIndex, commandIndex);\r\n };\r\n },\r\n [selectItem]\r\n );\r\n\r\n if (!props.items.length) {\r\n return null;\r\n }\r\n\r\n return (\r\n <>\r\n <Surface\r\n ref={scrollContainer}\r\n className=\"text-black max-h-[min(80vh,24rem)] overflow-auto flex-wrap mb-8 p-2\"\r\n >\r\n <div className=\"grid grid-cols-1 gap-0.5\">\r\n {props.items.map((group, groupIndex: number) => (\r\n <React.Fragment key={`${group.title}-wrapper`}>\r\n <div\r\n className=\"text-neutral-500 text-[0.65rem] col-[1/-1] mx-2 mt-4 font-semibold tracking-wider select-none uppercase first:mt-0.5\"\r\n key={`${group.title}`}\r\n >\r\n {group.title}\r\n </div>\r\n {group.commands.map((command: Command, commandIndex: number) => (\r\n <DropdownButton\r\n key={`${command.label}`}\r\n isActive={\r\n selectedGroupIndex === groupIndex &&\r\n selectedCommandIndex === commandIndex\r\n }\r\n onClick={createCommandClickHandler(groupIndex, commandIndex)}\r\n >\r\n <Icon icon={command.icon} className=\"mr-1\" />\r\n {command.label}\r\n </DropdownButton>\r\n ))}\r\n </React.Fragment>\r\n ))}\r\n </div>\r\n </Surface>\r\n </>\r\n );\r\n});\r\n\r\nMenuList.displayName = \"MenuList\";\r\n\r\nexport default MenuList;\r\n"],"names":["React","useCallback","useEffect","useRef","useState","DropdownButton","Surface","Icon","MenuList","forwardRef","props","ref","scrollContainer","activeItem","selectedGroupIndex","setSelectedGroupIndex","selectedCommandIndex","setSelectedCommandIndex","items","selectItem","groupIndex","commandIndex","command","commands","useImperativeHandle","onKeyDown","event","key","length","newCommandIndex","newGroupIndex","current","offsetTop","offsetHeight","scrollTop","createCommandClickHandler","className","div","map","group","Fragment","title","isActive","onClick","icon","label","displayName"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/extensions/SocialMedia/Facebook/facebook.ts"],"sourcesContent":["declare module '@tiptap/core' {\r\n interface Commands<ReturnType> {\r\n facebook: {\r\n /**\r\n * Add an image\r\n */\r\n\r\n insertFacebook: (url?: string, className?: string) => ReturnType\r\n }\r\n }\r\n}\r\n\r\nimport { Node, mergeAttributes } from '@tiptap/core'\r\nimport { ReactNodeViewRenderer } from '@tiptap/react'\r\nimport FacebookEmbed from './FacebookEmbed.js'\r\n\r\nexport const Facebook = Node.create({\r\n name: 'facebook',\r\n group: 'block',\r\n content: 'inline*',\r\n draggable: true,\r\n\r\n // content: 'inline*',\r\n parseHTML() {\r\n return [\r\n {\r\n tag: 'div[data-type=\"facebook-post\"]',\r\n },\r\n ]\r\n },\r\n\r\n addAttributes() {\r\n return {\r\n url: { default: null },\r\n class: { default: null },\r\n src: {\r\n default: null,\r\n },\r\n width: {\r\n default: '100%',\r\n },\r\n\r\n showText: {\r\n default: true,\r\n },\r\n }\r\n },\r\n addKeyboardShortcuts() {\r\n return {\r\n 'Mod-Enter': () => {\r\n return this.editor\r\n .chain()\r\n .insertContentAt(this.editor.state.selection.head, {\r\n type: this.type.name,\r\n })\r\n .focus()\r\n .run()\r\n },\r\n }\r\n },\r\n\r\n renderHTML({ HTMLAttributes }) {\r\n return [\r\n \"div\",\r\n mergeAttributes(HTMLAttributes, {\r\n \"data-type\": \"facebook\",\r\n class: `react-renderer node-facebook ${HTMLAttributes.class ?? \"\"}`,\r\n }), [\r\n 'div',\r\n mergeAttributes(\r\n { class: 'socialMediaContainer' },\r\n ),\r\n ['div', { class: 'rsme-embed rsme-facebook-embed', },\r\n [\r\n 'div',\r\n { class: 'rsme-d-none' },\r\n ['div', { id: 'fb-root' }],\r\n [\r\n 'div',\r\n mergeAttributes(HTMLAttributes, {\r\n class: 'fb-post',\r\n 'data-href': HTMLAttributes.url,\r\n 'data-width': '500',\r\n 'data-show-text': \"true\",\r\n })\r\n ],\r\n [\r\n 'script',\r\n {\r\n async: true,\r\n defer: true,\r\n crossorigin: 'anonymous',\r\n src: 'https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v22.0',\r\n\r\n },\r\n ],\r\n ]\r\n ]\r\n\r\n ]]\r\n },\r\n\r\n\r\n addNodeView() {\r\n return ReactNodeViewRenderer(FacebookEmbed)\r\n },\r\n\r\n addCommands() {\r\n return {\r\n insertFacebook:\r\n (url, className) =>\r\n ({ commands, state }) => {\r\n return commands.insertContent({\r\n type: 'facebook',\r\n attrs: {\r\n url,\r\n class: className,\r\n src: url,\r\n },\r\n })\r\n },\r\n }\r\n },\r\n})\r\n\r\nfunction isValidHttpUrl(string: string) {\r\n let url\r\n\r\n try {\r\n url = new URL(string)\r\n } catch (_) {\r\n return false\r\n }\r\n\r\n return url.protocol === 'http:' || url.protocol === 'https:'\r\n}\r\n"],"names":["Node","mergeAttributes","ReactNodeViewRenderer","FacebookEmbed","Facebook","create","name","group","content","draggable","parseHTML","tag","addAttributes","url","default","class","src","width","showText","addKeyboardShortcuts","editor","chain","insertContentAt","state","selection","head","type","focus","run","renderHTML","HTMLAttributes","id","async","defer","crossorigin","addNodeView","addCommands","insertFacebook","className","commands","insertContent","attrs","isValidHttpUrl","string","URL","_","protocol"],"mappings":"AAYA,SAASA,IAAI,EAAEC,eAAe,QAAQ,eAAc;AACpD,SAASC,qBAAqB,QAAQ,gBAAe;AACrD,OAAOC,mBAAmB,qBAAoB;AAE9C,OAAO,MAAMC,WAAWJ,KAAKK,MAAM,CAAC;IAClCC,MAAM;IACNC,OAAO;IACPC,SAAS;IACTC,WAAW;IAEX,sBAAsB;IACtBC;QACE,OAAO;YACL;gBACEC,KAAK;YACP;SACD;IACH;IAEAC;QACE,OAAO;YACLC,KAAK;gBAAEC,SAAS;YAAK;YACrBC,OAAO;gBAAED,SAAS;YAAK;YACvBE,KAAK;gBACHF,SAAS;YACX;YACAG,OAAO;gBACLH,SAAS;YACX;YAEAI,UAAU;gBACRJ,SAAS;YACX;QACF;IACF;IACAK;QACE,OAAO;YACL,aAAa;gBACX,OAAO,IAAI,CAACC,MAAM,CACfC,KAAK,GACLC,eAAe,CAAC,IAAI,CAACF,MAAM,CAACG,KAAK,CAACC,SAAS,CAACC,IAAI,EAAE;oBACjDC,MAAM,IAAI,CAACA,IAAI,CAACpB,IAAI;gBACtB,GACCqB,KAAK,GACLC,GAAG;YACR;QACF;IACF;IAEAC,YAAW,EAAEC,cAAc,EAAE;QAC3B,OAAO;YACL;YACA7B,gBAAgB6B,gBAAgB;gBAC9B,aAAa;gBACbf,OAAO,CAAC,6BAA6B,EAAEe,eAAef,KAAK,IAAI,
|
|
1
|
+
{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/extensions/SocialMedia/Facebook/facebook.ts"],"sourcesContent":["declare module '@tiptap/core' {\r\n interface Commands<ReturnType> {\r\n facebook: {\r\n /**\r\n * Add an image\r\n */\r\n\r\n insertFacebook: (url?: string, className?: string) => ReturnType\r\n }\r\n }\r\n}\r\n\r\nimport { Node, mergeAttributes } from '@tiptap/core'\r\nimport { ReactNodeViewRenderer } from '@tiptap/react'\r\nimport FacebookEmbed from './FacebookEmbed.js'\r\n\r\nexport const Facebook = Node.create({\r\n name: 'facebook',\r\n group: 'block',\r\n content: 'inline*',\r\n draggable: true,\r\n\r\n // content: 'inline*',\r\n parseHTML() {\r\n return [\r\n {\r\n tag: 'div[data-type=\"facebook-post\"]',\r\n },\r\n ]\r\n },\r\n\r\n addAttributes() {\r\n return {\r\n url: { default: null },\r\n class: { default: null },\r\n src: {\r\n default: null,\r\n },\r\n width: {\r\n default: '100%',\r\n },\r\n\r\n showText: {\r\n default: true,\r\n },\r\n }\r\n },\r\n addKeyboardShortcuts() {\r\n return {\r\n 'Mod-Enter': () => {\r\n return this.editor\r\n .chain()\r\n .insertContentAt(this.editor.state.selection.head, {\r\n type: this.type.name,\r\n })\r\n .focus()\r\n .run()\r\n },\r\n }\r\n },\r\n\r\n renderHTML({ HTMLAttributes }) {\r\n return [\r\n \"div\",\r\n mergeAttributes(HTMLAttributes, {\r\n \"data-type\": \"facebook\",\r\n class: `react-renderer node-facebook ${HTMLAttributes.class ?? \"\"}`,\r\n }), [\r\n 'div',\r\n mergeAttributes(\r\n { class: 'socialMediaContainer' },\r\n ),\r\n ['div', { class: 'rsme-embed rsme-facebook-embed', },\r\n [\r\n 'div',\r\n { class: 'rsme-d-none' },\r\n ['div', { id: 'fb-root' }],\r\n [\r\n 'div',\r\n mergeAttributes(HTMLAttributes, {\r\n class: 'fb-post',\r\n 'data-href': HTMLAttributes.url,\r\n 'data-width': '500',\r\n 'data-show-text': \"true\",\r\n })\r\n ],\r\n [\r\n 'script',\r\n {\r\n async: true,\r\n defer: true,\r\n crossorigin: 'anonymous',\r\n src: 'https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v22.0',\r\n\r\n },\r\n ],\r\n ]\r\n ]\r\n\r\n ]]\r\n },\r\n\r\n\r\n addNodeView() {\r\n return ReactNodeViewRenderer(FacebookEmbed)\r\n },\r\n\r\n addCommands() {\r\n return {\r\n insertFacebook:\r\n (url, className) =>\r\n ({ commands, state }) => {\r\n return commands.insertContent({\r\n type: 'facebook',\r\n attrs: {\r\n url,\r\n class: className,\r\n src: url,\r\n },\r\n })\r\n },\r\n }\r\n },\r\n})\r\n\r\nfunction isValidHttpUrl(string: string) {\r\n let url\r\n\r\n try {\r\n url = new URL(string)\r\n } catch (_) {\r\n return false\r\n }\r\n\r\n return url.protocol === 'http:' || url.protocol === 'https:'\r\n}\r\n"],"names":["Node","mergeAttributes","ReactNodeViewRenderer","FacebookEmbed","Facebook","create","name","group","content","draggable","parseHTML","tag","addAttributes","url","default","class","src","width","showText","addKeyboardShortcuts","editor","chain","insertContentAt","state","selection","head","type","focus","run","renderHTML","HTMLAttributes","id","async","defer","crossorigin","addNodeView","addCommands","insertFacebook","className","commands","insertContent","attrs","isValidHttpUrl","string","URL","_","protocol"],"mappings":"AAYA,SAASA,IAAI,EAAEC,eAAe,QAAQ,eAAc;AACpD,SAASC,qBAAqB,QAAQ,gBAAe;AACrD,OAAOC,mBAAmB,qBAAoB;AAE9C,OAAO,MAAMC,WAAWJ,KAAKK,MAAM,CAAC;IAClCC,MAAM;IACNC,OAAO;IACPC,SAAS;IACTC,WAAW;IAEX,sBAAsB;IACtBC;QACE,OAAO;YACL;gBACEC,KAAK;YACP;SACD;IACH;IAEAC;QACE,OAAO;YACLC,KAAK;gBAAEC,SAAS;YAAK;YACrBC,OAAO;gBAAED,SAAS;YAAK;YACvBE,KAAK;gBACHF,SAAS;YACX;YACAG,OAAO;gBACLH,SAAS;YACX;YAEAI,UAAU;gBACRJ,SAAS;YACX;QACF;IACF;IACAK;QACE,OAAO;YACL,aAAa;gBACX,OAAO,IAAI,CAACC,MAAM,CACfC,KAAK,GACLC,eAAe,CAAC,IAAI,CAACF,MAAM,CAACG,KAAK,CAACC,SAAS,CAACC,IAAI,EAAE;oBACjDC,MAAM,IAAI,CAACA,IAAI,CAACpB,IAAI;gBACtB,GACCqB,KAAK,GACLC,GAAG;YACR;QACF;IACF;IAEAC,YAAW,EAAEC,cAAc,EAAE;QAC3B,OAAO;YACL;YACA7B,gBAAgB6B,gBAAgB;gBAC9B,aAAa;gBACbf,OAAO,CAAC,6BAA6B,EAAEe,eAAef,KAAK,IAAI,IAAI;YACrE;YAAI;gBACF;gBACAd,gBACE;oBAAEc,OAAO;gBAAuB;gBAElC;oBAAC;oBAAO;wBAAEA,OAAO;oBAAkC;oBACjD;wBACE;wBACA;4BAAEA,OAAO;wBAAc;wBACvB;4BAAC;4BAAO;gCAAEgB,IAAI;4BAAU;yBAAE;wBAC1B;4BACE;4BACA9B,gBAAgB6B,gBAAgB;gCAC9Bf,OAAO;gCACP,aAAae,eAAejB,GAAG;gCAC/B,cAAc;gCACd,kBAAkB;4BACpB;yBACD;wBACD;4BACE;4BACA;gCACEmB,OAAO;gCACPC,OAAO;gCACPC,aAAa;gCACblB,KAAK;4BAEP;yBACD;qBACF;iBACF;aAEF;SAAC;IACN;IAGAmB;QACE,OAAOjC,sBAAsBC;IAC/B;IAEAiC;QACE,OAAO;YACLC,gBACE,CAACxB,KAAKyB,YACJ,CAAC,EAAEC,QAAQ,EAAEhB,KAAK,EAAE;oBAClB,OAAOgB,SAASC,aAAa,CAAC;wBAC5Bd,MAAM;wBACNe,OAAO;4BACL5B;4BACAE,OAAOuB;4BACPtB,KAAKH;wBACP;oBACF;gBACF;QACN;IACF;AACF,GAAE;AAEF,SAAS6B,eAAeC,MAAc;IACpC,IAAI9B;IAEJ,IAAI;QACFA,MAAM,IAAI+B,IAAID;IAChB,EAAE,OAAOE,GAAG;QACV,OAAO;IACT;IAEA,OAAOhC,IAAIiC,QAAQ,KAAK,WAAWjC,IAAIiC,QAAQ,KAAK;AACtD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/extensions/SocialMedia/Instagram/instagram.ts"],"sourcesContent":["declare module '@tiptap/core' {\r\n interface Commands<ReturnType> {\r\n instagram: {\r\n /**\r\n * Add an image\r\n */\r\n\r\n insertInstagram: (url?: string, className?: string) => ReturnType\r\n }\r\n }\r\n}\r\n\r\nimport { Node, mergeAttributes } from '@tiptap/core'\r\nimport { ReactNodeViewRenderer } from '@tiptap/react'\r\nimport InstagramEmbed from './InstagramEmbed.js'\r\n\r\nexport const Instagram = Node.create({\r\n name: 'instagram',\r\n\r\n group: 'block',\r\n content: 'inline*',\r\n draggable: true,\r\n // content: 'inline*',\r\n\r\n addAttributes() {\r\n return {\r\n url: { default: null },\r\n class: { default: null },\r\n src: {\r\n default: null,\r\n },\r\n width: {\r\n default: '328px',\r\n },\r\n height: {\r\n default: '550px',\r\n },\r\n frameborder: {\r\n default: '0',\r\n },\r\n scrolling: {\r\n default: 'no',\r\n },\r\n allowtransparency: {\r\n default: 'true',\r\n },\r\n }\r\n },\r\n\r\n\r\n parseHTML() {\r\n return [\r\n {\r\n tag: 'div[data-type=\"instagram\"]',\r\n },\r\n ]\r\n },\r\n renderHTML({ HTMLAttributes }) {\r\n return [\r\n \"div\",\r\n mergeAttributes(HTMLAttributes, {\r\n \"data-type\": \"instagram\",\r\n class: `react-renderer node-instagram ${HTMLAttributes.class ?? \"\"}`,\r\n }), [\r\n 'div',\r\n mergeAttributes(\r\n { class: 'socialMediaContainer' },\r\n ),\r\n ['div', mergeAttributes({ class: 'rsme-embed rsme-instagram-embed', }),\r\n\r\n [\r\n 'blockquote',\r\n mergeAttributes(HTMLAttributes, {\r\n class: 'instagram-media',\r\n style: \"background:#FFF; border:0; margin:1px; max-width:540px; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);\",\r\n \"data-instgrm-captioned\": true,\r\n \"data-instgrm-permalink\": `${convertInstaUrlToEmbed(HTMLAttributes.url)}?utm_source=ig_embed&utm_campaign=loading`,\r\n \"data-instgrm-version\": \"14\"\r\n }),\r\n ['div', { class: 'instagram-media-pre-embed rsme-d-none' },]\r\n ],\r\n [\r\n 'script',\r\n {\r\n async: true,\r\n src: 'https://www.instagram.com/embed.js',\r\n charset: 'utf-8',\r\n onload: `() => {\r\n if (window.instgrm) {\r\n window.instgrm.Embeds.process();\r\n }\r\n }`,\r\n },\r\n ],\r\n ],\r\n\r\n ]\r\n ]\r\n },\r\n addKeyboardShortcuts() {\r\n return {\r\n 'Mod-Enter': () => {\r\n return this.editor\r\n .chain()\r\n .insertContentAt(this.editor.state.selection.head, {\r\n type: this.type.name,\r\n })\r\n .focus()\r\n .run()\r\n },\r\n }\r\n },\r\n\r\n addNodeView() {\r\n return ReactNodeViewRenderer(InstagramEmbed)\r\n },\r\n\r\n addCommands() {\r\n return {\r\n insertInstagram:\r\n (url, className) =>\r\n ({ commands, state }) => {\r\n let embedUrl = \"\"\r\n if (url) {\r\n embedUrl = convertInstaUrlToEmbed(url)\r\n\r\n }\r\n return commands.insertContent({\r\n type: 'instagram',\r\n attrs: {\r\n url: url,\r\n class: className,\r\n src: embedUrl,\r\n },\r\n })\r\n },\r\n }\r\n },\r\n})\r\nfunction convertInstaUrlToEmbed(url: string): string | undefined {\r\n if (!url) return undefined;\r\n try {\r\n const urlWithNoQueryOrUsername = url.split(/[?#]/)[0].replace(/\\.com\\/.*?\\/p/, '.com/p').replace(/\\.com\\/.*?\\/reel/, '.com/reel');\r\n const cleanUrlWithEndingSlash = `${urlWithNoQueryOrUsername}${urlWithNoQueryOrUsername.endsWith('/') ? '' : '/'}`;\r\n return cleanUrlWithEndingSlash\r\n } catch {\r\n return undefined;\r\n }\r\n}\r\n\r\nfunction isValidHttpUrl(string: string) {\r\n let url\r\n\r\n try {\r\n url = new URL(string)\r\n } catch (_) {\r\n return false\r\n }\r\n\r\n return url.protocol === 'http:' || url.protocol === 'https:'\r\n}\r\n"],"names":["Node","mergeAttributes","ReactNodeViewRenderer","InstagramEmbed","Instagram","create","name","group","content","draggable","addAttributes","url","default","class","src","width","height","frameborder","scrolling","allowtransparency","parseHTML","tag","renderHTML","HTMLAttributes","style","convertInstaUrlToEmbed","async","charset","onload","addKeyboardShortcuts","editor","chain","insertContentAt","state","selection","head","type","focus","run","addNodeView","addCommands","insertInstagram","className","commands","embedUrl","insertContent","attrs","undefined","urlWithNoQueryOrUsername","split","replace","cleanUrlWithEndingSlash","endsWith","isValidHttpUrl","string","URL","_","protocol"],"mappings":"AAYA,SAASA,IAAI,EAAEC,eAAe,QAAQ,eAAc;AACpD,SAASC,qBAAqB,QAAQ,gBAAe;AACrD,OAAOC,oBAAoB,sBAAqB;AAEhD,OAAO,MAAMC,YAAYJ,KAAKK,MAAM,CAAC;IACnCC,MAAM;IAENC,OAAO;IACPC,SAAS;IACTC,WAAW;IACX,sBAAsB;IAEtBC;QACE,OAAO;YACLC,KAAK;gBAAEC,SAAS;YAAK;YACrBC,OAAO;gBAAED,SAAS;YAAK;YACvBE,KAAK;gBACHF,SAAS;YACX;YACAG,OAAO;gBACLH,SAAS;YACX;YACAI,QAAQ;gBACNJ,SAAS;YACX;YACAK,aAAa;gBACXL,SAAS;YACX;YACAM,WAAW;gBACTN,SAAS;YACX;YACAO,mBAAmB;gBACjBP,SAAS;YACX;QACF;IACF;IAGAQ;QACE,OAAO;YACL;gBACEC,KAAK;YACP;SACD;IACH;IACAC,YAAW,EAAEC,cAAc,EAAE;QAC3B,OAAO;YACL;YACAtB,gBAAgBsB,gBAAgB;gBAC9B,aAAa;gBACbV,OAAO,CAAC,8BAA8B,EAAEU,eAAeV,KAAK,IAAI,
|
|
1
|
+
{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/extensions/SocialMedia/Instagram/instagram.ts"],"sourcesContent":["declare module '@tiptap/core' {\r\n interface Commands<ReturnType> {\r\n instagram: {\r\n /**\r\n * Add an image\r\n */\r\n\r\n insertInstagram: (url?: string, className?: string) => ReturnType\r\n }\r\n }\r\n}\r\n\r\nimport { Node, mergeAttributes } from '@tiptap/core'\r\nimport { ReactNodeViewRenderer } from '@tiptap/react'\r\nimport InstagramEmbed from './InstagramEmbed.js'\r\n\r\nexport const Instagram = Node.create({\r\n name: 'instagram',\r\n\r\n group: 'block',\r\n content: 'inline*',\r\n draggable: true,\r\n // content: 'inline*',\r\n\r\n addAttributes() {\r\n return {\r\n url: { default: null },\r\n class: { default: null },\r\n src: {\r\n default: null,\r\n },\r\n width: {\r\n default: '328px',\r\n },\r\n height: {\r\n default: '550px',\r\n },\r\n frameborder: {\r\n default: '0',\r\n },\r\n scrolling: {\r\n default: 'no',\r\n },\r\n allowtransparency: {\r\n default: 'true',\r\n },\r\n }\r\n },\r\n\r\n\r\n parseHTML() {\r\n return [\r\n {\r\n tag: 'div[data-type=\"instagram\"]',\r\n },\r\n ]\r\n },\r\n renderHTML({ HTMLAttributes }) {\r\n return [\r\n \"div\",\r\n mergeAttributes(HTMLAttributes, {\r\n \"data-type\": \"instagram\",\r\n class: `react-renderer node-instagram ${HTMLAttributes.class ?? \"\"}`,\r\n }), [\r\n 'div',\r\n mergeAttributes(\r\n { class: 'socialMediaContainer' },\r\n ),\r\n ['div', mergeAttributes({ class: 'rsme-embed rsme-instagram-embed', }),\r\n\r\n [\r\n 'blockquote',\r\n mergeAttributes(HTMLAttributes, {\r\n class: 'instagram-media',\r\n style: \"background:#FFF; border:0; margin:1px; max-width:540px; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);\",\r\n \"data-instgrm-captioned\": true,\r\n \"data-instgrm-permalink\": `${convertInstaUrlToEmbed(HTMLAttributes.url)}?utm_source=ig_embed&utm_campaign=loading`,\r\n \"data-instgrm-version\": \"14\"\r\n }),\r\n ['div', { class: 'instagram-media-pre-embed rsme-d-none' },]\r\n ],\r\n [\r\n 'script',\r\n {\r\n async: true,\r\n src: 'https://www.instagram.com/embed.js',\r\n charset: 'utf-8',\r\n onload: `() => {\r\n if (window.instgrm) {\r\n window.instgrm.Embeds.process();\r\n }\r\n }`,\r\n },\r\n ],\r\n ],\r\n\r\n ]\r\n ]\r\n },\r\n addKeyboardShortcuts() {\r\n return {\r\n 'Mod-Enter': () => {\r\n return this.editor\r\n .chain()\r\n .insertContentAt(this.editor.state.selection.head, {\r\n type: this.type.name,\r\n })\r\n .focus()\r\n .run()\r\n },\r\n }\r\n },\r\n\r\n addNodeView() {\r\n return ReactNodeViewRenderer(InstagramEmbed)\r\n },\r\n\r\n addCommands() {\r\n return {\r\n insertInstagram:\r\n (url, className) =>\r\n ({ commands, state }) => {\r\n let embedUrl = \"\"\r\n if (url) {\r\n embedUrl = convertInstaUrlToEmbed(url)\r\n\r\n }\r\n return commands.insertContent({\r\n type: 'instagram',\r\n attrs: {\r\n url: url,\r\n class: className,\r\n src: embedUrl,\r\n },\r\n })\r\n },\r\n }\r\n },\r\n})\r\nfunction convertInstaUrlToEmbed(url: string): string | undefined {\r\n if (!url) return undefined;\r\n try {\r\n const urlWithNoQueryOrUsername = url.split(/[?#]/)[0].replace(/\\.com\\/.*?\\/p/, '.com/p').replace(/\\.com\\/.*?\\/reel/, '.com/reel');\r\n const cleanUrlWithEndingSlash = `${urlWithNoQueryOrUsername}${urlWithNoQueryOrUsername.endsWith('/') ? '' : '/'}`;\r\n return cleanUrlWithEndingSlash\r\n } catch {\r\n return undefined;\r\n }\r\n}\r\n\r\nfunction isValidHttpUrl(string: string) {\r\n let url\r\n\r\n try {\r\n url = new URL(string)\r\n } catch (_) {\r\n return false\r\n }\r\n\r\n return url.protocol === 'http:' || url.protocol === 'https:'\r\n}\r\n"],"names":["Node","mergeAttributes","ReactNodeViewRenderer","InstagramEmbed","Instagram","create","name","group","content","draggable","addAttributes","url","default","class","src","width","height","frameborder","scrolling","allowtransparency","parseHTML","tag","renderHTML","HTMLAttributes","style","convertInstaUrlToEmbed","async","charset","onload","addKeyboardShortcuts","editor","chain","insertContentAt","state","selection","head","type","focus","run","addNodeView","addCommands","insertInstagram","className","commands","embedUrl","insertContent","attrs","undefined","urlWithNoQueryOrUsername","split","replace","cleanUrlWithEndingSlash","endsWith","isValidHttpUrl","string","URL","_","protocol"],"mappings":"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"}
|