diff --git a/remix/vite.config.ts b/remix/vite.config.ts index 0d079a7..265f04a 100644 --- a/remix/vite.config.ts +++ b/remix/vite.config.ts @@ -11,5 +11,13 @@ export default defineConfig({ libInjectCss(), devtoolsJson(), ], + server: { + headers: { + "Access-Control-Allow-Origin": + "https://eu-rte-extension.contentstack.com", + "Access-Control-Allow-Methods": "GET, HEAD", + "Access-Control-Allow-Headers": "*", + }, + }, build: { emptyOutDir: true }, }) diff --git a/rte/components/ImageElement.tsx b/rte/components/ImageElement.tsx index 1423e96..de78793 100644 --- a/rte/components/ImageElement.tsx +++ b/rte/components/ImageElement.tsx @@ -1,7 +1,6 @@ import { Icon, Tooltip, cbModal } from "@contentstack/venus-components" -import React, { PropsWithChildren, useCallback, useRef } from "react" +import React, { PropsWithChildren, useCallback } from "react" -import { Resizable } from "re-resizable" import EmbedBtn from "./EmbedBtn" import ImageEditModal from "./ImageEditModal" @@ -21,8 +20,6 @@ export function ImageElement({ children, element, rte }: ImageElementProps) { const isFocused = rte?.selection?.isFocused() const isHighlight = isFocused && isSelected - const imgRef = useRef(null) - const handleEdit = useCallback(() => { cbModal({ // @ts-expect-error: Component is badly typed @@ -65,28 +62,6 @@ export function ImageElement({ children, element, rte }: ImageElementProps) { ) } - const onResizeStop = () => { - const { attrs: elementAttrs } = element - const { offsetWidth: width, offsetHeight: height } = imgRef?.current ?? {} - - const newAttrs: { [key: string]: unknown } = { - ...elementAttrs, - style: { - ...(elementAttrs?.style ?? {}), - "max-width": `${width}px`, - }, - ...(width && height - ? { width: `${width.toString()}px`, height: `${height.toString()}px` } - : {}), - } - - rte?._adv?.Transforms?.setNodes( - rte._adv.editor, - { attrs: newAttrs }, - { at: rte.getPath(element) } - ) - } - let alignmentStyles = {} const marginAlignment: Record = { center: { margin: "auto" }, @@ -119,60 +94,43 @@ export function ImageElement({ children, element, rte }: ImageElementProps) { contentEditable={false} style={element.attrs?.style} > - -
{ + event.currentTarget.src = "https://placehold.co/600x400" + }} style={{ width: "100%", - height: "100%", - ...(isHighlight ? { border: "1px solid #6c5ce7" } : {}), + height: "auto", + aspectRatio: element.attrs.MediaConversions[0].AspectRatio, + borderRadius: "8px", + }} + alt={element.attrs.altText} + title={element.attrs?.Name} + /> +
- { - event.currentTarget.src = "https://placehold.co/600x400" - }} - style={{ - width: "100%", - height: "auto", - aspectRatio: element.attrs.MediaConversions[0].AspectRatio, - borderRadius: "8px", - }} - alt={element.attrs.altText} - title={element.attrs?.Name} - /> -
- -
+
- - +
{children} diff --git a/rte/main.tsx b/rte/main.tsx index c47001d..a4f1547 100644 --- a/rte/main.tsx +++ b/rte/main.tsx @@ -121,12 +121,14 @@ function loadIV(plugin: ContentstackPluginDefinition) { } } -async function init() { +export default ContentstackSDK.init().then(async (sdk) => { try { - const sdk = await ContentstackSDK.init() + const extensionObj = await sdk["location"] + const RTE = await extensionObj["RTEPlugin"] - const extensionObj = sdk?.location - const RTE = extensionObj?.RTEPlugin + if (!RTE) { + return + } let embeddedData: ExtractedContentstackEmbeddedData | null = null const jwtLike = window.name.split("__").find((str) => str.startsWith("ey")) @@ -137,8 +139,6 @@ async function init() { } } - if (!RTE) return - const ImageVault = RTE("ImageVault", (rte) => { if (rte) { if (!ivloaded) { @@ -171,7 +171,7 @@ async function init() { ) } }, - display: ["toolbar"], + displayOn: ["toolbar"], elementType: ["void"], } }) @@ -180,7 +180,7 @@ async function init() { if (rte) { const savedSelection = rte?.selection?.get() ?? undefined - const appConfig = rte.getConfig() + const appConfig = await rte.getConfig() // This is the configuration for this instance of the plugin. // You edit this in the content types settings RTE plugin section. @@ -231,6 +231,4 @@ async function init() { } catch (e) { console.error({ e }) } -} - -export default init() +})