scandic/contentstack-imagevault
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: add and run prettier

Browse Source
This commit is contained in:
Michael Zetterberg
2024-03-26 13:02:26 +01:00
parent e9349992f8
commit 083c57d0ca
27 changed files with 430 additions and 379 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
package-lock.json generated
View File

@@ -29,6 +29,7 @@
"eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"prettier": "^3.2.5",
"typescript": "^5.1.6",
"vite": "^5.1.0",
"vite-tsconfig-paths": "^4.2.1"
@@ -2619,6 +2620,21 @@
"node": ">=6"
}
},
"node_modules/@remix-run/dev/node_modules/prettier": {
"version": "2.8.8",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
"integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
"dev": true,
"bin": {
"prettier": "bin-prettier.js"
},
"engines": {
"node": ">=10.13.0"
},
"funding": {
"url": "https://github.com/prettier/prettier?sponsor=1"
}
},
"node_modules/@remix-run/dev/node_modules/tsconfig-paths": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-4.2.0.tgz",
@@ -11013,15 +11029,15 @@
}
},
"node_modules/prettier": {
"version": "2.8.8",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
"integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
"version": "3.2.5",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
"integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
"dev": true,
"bin": {
"prettier": "bin-prettier.js"
"prettier": "bin/prettier.cjs"
},
"engines": {
"node": ">=10.13.0"
"node": ">=14"
},
"funding": {
"url": "https://github.com/prettier/prettier?sponsor=1"

1
package.json
View File

@@ -33,6 +33,7 @@
"eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"prettier": "^3.2.5",
"typescript": "^5.1.6",
"vite": "^5.1.0",
"vite-tsconfig-paths": "^4.2.1"

58
remix/.eslintrc.cjs
View File

@@ -8,8 +8,8 @@
module.exports = {
root: true,
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
ecmaVersion: "latest",
sourceType: "module",
ecmaFeatures: {
jsx: true,
},
@@ -19,38 +19,38 @@ module.exports = {
commonjs: true,
es6: true,
},
ignorePatterns: ['build/**/*', 'node_modules/**/*', 'public/**/*'],
ignorePatterns: ["build/**/*", "node_modules/**/*", "public/**/*"],
// Base config
extends: ['eslint:recommended'],
extends: ["eslint:recommended"],
overrides: [
// React
{
files: ['**/*.{js,jsx,ts,tsx}'],
plugins: ['react', 'jsx-a11y'],
files: ["**/*.{js,jsx,ts,tsx}"],
plugins: ["react", "jsx-a11y"],
rules: {
'react/jsx-uses-vars': 'error',
'react/jsx-uses-react': 'error',
"react/jsx-uses-vars": "error",
"react/jsx-uses-react": "error",
},
extends: [
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
'plugin:jsx-a11y/recommended',
"plugin:react/recommended",
"plugin:react/jsx-runtime",
"plugin:react-hooks/recommended",
"plugin:jsx-a11y/recommended",
],
settings: {
react: {
version: 'detect',
version: "detect",
},
formComponents: ['Form'],
formComponents: ["Form"],
linkComponents: [
{ name: 'Link', linkAttribute: 'to' },
{ name: 'NavLink', linkAttribute: 'to' },
{ name: "Link", linkAttribute: "to" },
{ name: "NavLink", linkAttribute: "to" },
],
'import/resolver': {
"import/resolver": {
typescript: {
project: './remix/tsconfig.json',
project: "./remix/tsconfig.json",
},
},
},
@@ -58,14 +58,14 @@ module.exports = {
// Typescript
{
files: ['**/*.{ts,tsx}'],
plugins: ['@typescript-eslint', 'import'],
parser: '@typescript-eslint/parser',
files: ["**/*.{ts,tsx}"],
plugins: ["@typescript-eslint", "import"],
parser: "@typescript-eslint/parser",
settings: {
'import/internal-regex': '^~/',
'import/resolver': {
"import/internal-regex": "^~/",
"import/resolver": {
node: {
extensions: ['.ts', '.tsx'],
extensions: [".ts", ".tsx"],
},
typescript: {
alwaysTryTypes: true,
@@ -73,18 +73,18 @@ module.exports = {
},
},
extends: [
'plugin:@typescript-eslint/recommended',
'plugin:import/recommended',
'plugin:import/typescript',
"plugin:@typescript-eslint/recommended",
"plugin:import/recommended",
"plugin:import/typescript",
],
},
// Node
{
files: ['.eslintrc.cjs'],
files: [".eslintrc.cjs"],
env: {
node: true,
},
},
],
};
}

11
remix/.prettierignore Normal file
View File

@@ -0,0 +1,11 @@
# Directories
build
public
# Files
.eslintrc.cjs
.prettierignore
package.json
package-lock.json
prettier.config.cjs
tsconfig.json

30
remix/app/components/ConfigForm.tsx
View File

@@ -4,22 +4,22 @@ import {
Help,
Line,
TextInput,
} from "@contentstack/venus-components";
import { ChangeEvent, useState } from "react";
import { ImageVaultDAMConfig } from "~/utils/imagevault";
} from "@contentstack/venus-components"
import { ChangeEvent, useState } from "react"
import { ImageVaultDAMConfig } from "~/utils/imagevault"
import type { IInstallationData } from "@contentstack/app-sdk/dist/src/types";
import type { IInstallationData } from "@contentstack/app-sdk/dist/src/types"
export type ConfigFormProps = {
values: Partial<ImageVaultDAMConfig>;
setInstallationData: (data: IInstallationData) => void;
};
values: Partial<ImageVaultDAMConfig>
setInstallationData: (data: IInstallationData) => void
}
export default function ConfigForm({
values,
setInstallationData,
}: ConfigFormProps) {
const [finalValues, setFinalValues] = useState(values);
const [finalValues, setFinalValues] = useState(values)
return (
<div style={{ display: "grid", gap: "18px", margin: "18px" }}>
@@ -37,7 +37,7 @@ export default function ConfigForm({
setFinalValues((prev) => ({
...prev,
baseUrl: evt.target.value,
}));
}))
setInstallationData({
configuration: {
@@ -45,7 +45,7 @@ export default function ConfigForm({
baseUrl: evt.target.value,
},
serverConfiguration: {},
});
})
}}
required={true}
willBlurOnEsc={true}
@@ -76,7 +76,7 @@ export default function ConfigForm({
setFinalValues((prev) => ({
...prev,
formatId: evt.target.value,
}));
}))
setInstallationData({
configuration: {
@@ -84,7 +84,7 @@ export default function ConfigForm({
formatId: evt.target.value,
},
serverConfiguration: {},
});
})
}}
/>
</Field>
@@ -109,7 +109,7 @@ export default function ConfigForm({
setFinalValues((prev) => ({
...prev,
imageVaultUrl: evt.target.value,
}));
}))
setInstallationData({
configuration: {
@@ -117,10 +117,10 @@ export default function ConfigForm({
imageVaultUrl: evt.target.value,
},
serverConfiguration: {},
});
})
}}
/>
</Field>
</div>
);
)
}

2
remix/app/components/Disclaimer.tsx
View File

@@ -8,5 +8,5 @@ export default function Disclaimer() {
save the entry at least once with a title before choosing an image.
</p>
</div>
);
)
}

14
remix/app/components/FullSizeImage.tsx
View File

@@ -1,4 +1,4 @@
import { ModalBody, ModalHeader } from "@contentstack/venus-components";
import { ModalBody, ModalHeader } from "@contentstack/venus-components"
export default function FullSizeImage({
title,
@@ -7,11 +7,11 @@ export default function FullSizeImage({
alt,
aspectRatio,
}: {
title: string;
onClose: () => void;
imageUrl: string;
alt: string;
aspectRatio: number;
title: string
onClose: () => void
imageUrl: string
alt: string
aspectRatio: number
}) {
return (
<>
@@ -37,5 +37,5 @@ export default function FullSizeImage({
/>
</ModalBody>
</>
);
)
}

46
remix/app/components/ImageEditModal.tsx
View File

@@ -1,4 +1,4 @@
import { useState, useEffect, ChangeEvent } from "react";
import { useState, useEffect, ChangeEvent } from "react"
import {
ModalFooter,
ModalBody,
@@ -8,59 +8,59 @@ import {
Field as FieldComponent,
FieldLabel,
TextInput,
} from "@contentstack/venus-components";
} from "@contentstack/venus-components"
import type { InsertResponse } from "~/types/imagevault";
import type { InsertResponse } from "~/types/imagevault"
type ImageEditModalProps = {
fieldData: InsertResponse;
setData: (data: InsertResponse) => void;
closeModal: () => void;
};
fieldData: InsertResponse
setData: (data: InsertResponse) => void
closeModal: () => void
}
export default function ImageEditModal({
fieldData,
closeModal,
setData,
}: ImageEditModalProps) {
const [altText, setAltText] = useState("");
const [caption, setCaption] = useState("");
const [altText, setAltText] = useState("")
const [caption, setCaption] = useState("")
const assetUrl = fieldData.MediaConversions[0].Url;
const assetUrl = fieldData.MediaConversions[0].Url
useEffect(() => {
if (fieldData.Metadata && fieldData.Metadata.length) {
const altText = fieldData.Metadata.find((meta) =>
meta.Name.includes("AltText_")
)?.Value;
)?.Value
const caption = fieldData.Metadata.find((meta) =>
meta.Name.includes("Title_")
)?.Value;
)?.Value
setAltText(altText ?? "");
setCaption(caption ?? "");
setAltText(altText ?? "")
setCaption(caption ?? "")
}
}, [fieldData.Metadata]);
}, [fieldData.Metadata])
function handleSave() {
const metaData = fieldData.Metadata ?? [];
const metaData = fieldData.Metadata ?? []
const newMetadata = metaData.map((meta) => {
if (meta.Name.includes("AltText_")) {
return { ...meta, Value: altText };
return { ...meta, Value: altText }
}
if (meta.Name.includes("Title_")) {
return { ...meta, Value: caption };
return { ...meta, Value: caption }
}
return meta;
});
return meta
})
setData({
...fieldData,
Metadata: newMetadata,
});
closeModal();
})
closeModal()
}
return (
@@ -120,5 +120,5 @@ export default function ImageEditModal({
</ButtonGroup>
</ModalFooter>
</>
);
)
}

112
remix/app/components/ImageVaultDAM.tsx
View File

@@ -1,34 +1,34 @@
import { useCallback, useEffect, useState } from "react";
import { flushSync } from "react-dom";
import { useCallback, useEffect, useState } from "react"
import { flushSync } from "react-dom"
import {
AssetCardVertical,
Button,
FieldLabel,
cbModal,
} from "@contentstack/venus-components";
import ImageEditModal from "./ImageEditModal";
import FullSizeImage from "./FullSizeImage";
import { isInsertResponse, openImageVault } from "~/utils/imagevault";
} from "@contentstack/venus-components"
import ImageEditModal from "./ImageEditModal"
import FullSizeImage from "./FullSizeImage"
import { isInsertResponse, openImageVault } from "~/utils/imagevault"
import type { CbModalProps } from "@contentstack/venus-components/build/components/Modal/Modal";
import type UiLocation from "@contentstack/app-sdk/dist/src/uiLocation";
import type { InsertResponse } from "~/types/imagevault";
import type { CbModalProps } from "@contentstack/venus-components/build/components/Modal/Modal"
import type UiLocation from "@contentstack/app-sdk/dist/src/uiLocation"
import type { InsertResponse } from "~/types/imagevault"
import type {
EntryDataPublishDetails,
ImageVaultDAMConfig,
} from "~/utils/imagevault";
import type { Lang } from "~/types/lang";
} from "~/utils/imagevault"
import type { Lang } from "~/types/lang"
export type ImageVaultDAMProps = {
sdk: UiLocation;
config: ImageVaultDAMConfig;
initialData: InsertResponse | null;
};
sdk: UiLocation
config: ImageVaultDAMConfig
initialData: InsertResponse | null
}
type DAMButtonProps = {
onClick: () => void;
};
onClick: () => void
}
function DAMButton({ onClick }: DAMButtonProps) {
return (
@@ -45,27 +45,27 @@ function DAMButton({ onClick }: DAMButtonProps) {
Choose a file
</Button>
</div>
);
)
}
type MediaProps = {
media: InsertResponse;
onDelete: () => void;
onEdit: () => void;
};
media: InsertResponse
onDelete: () => void
onEdit: () => void
}
function Media({ media, onDelete, onEdit }: MediaProps) {
// MediaConversions is an array but will only contain one object
const { Url, Height, FormatHeight, Width, FormatWidth, Name, AspectRatio } =
media.MediaConversions[0];
media.MediaConversions[0]
const assetUrl = Url;
const title = media.Name;
const width = FormatWidth || Width;
const height = FormatHeight || Height;
const assetUrl = Url
const title = media.Name
const width = FormatWidth || Width
const height = FormatHeight || Height
const alt =
media.Metadata?.find((meta) => meta.Name.includes("AltText_"))?.Value ||
Name;
Name
return (
<div key={Url} style={{ fontFamily: "Inter" }}>
@@ -91,7 +91,7 @@ function Media({ media, onDelete, onEdit }: MediaProps) {
title={Name}
aspectRatio={AspectRatio}
/>
);
)
},
modalProps: {
size: "max",
@@ -106,12 +106,12 @@ function Media({ media, onDelete, onEdit }: MediaProps) {
overlay: {},
},
},
};
cbModal(cbModalProps);
}
cbModal(cbModalProps)
}}
/>
</div>
);
)
}
export default function ImageVaultDAM({
@@ -119,42 +119,42 @@ export default function ImageVaultDAM({
config,
initialData,
}: ImageVaultDAMProps) {
const [media, setMedia] = useState<InsertResponse | null>(initialData);
const [media, setMedia] = useState<InsertResponse | null>(initialData)
const field = sdk.location.CustomField?.field;
const frame = sdk.location.CustomField?.frame;
const entry = sdk.location.CustomField?.entry;
const stack = sdk.location.CustomField?.stack;
const field = sdk.location.CustomField?.field
const frame = sdk.location.CustomField?.frame
const entry = sdk.location.CustomField?.entry
const stack = sdk.location.CustomField?.stack
const updateFrameHeight = useCallback(() => {
if (frame?.updateHeight) {
// We need to recalculate the height of the iframe when an image is added.
// Cannot use flushSync inside useEffect.
setTimeout(() => frame.updateHeight(document.body.scrollHeight), 0);
setTimeout(() => frame.updateHeight(document.body.scrollHeight), 0)
}
}, [frame]);
}, [frame])
const handleMedia = useCallback(
(result?: InsertResponse) => {
if (field && result) {
flushSync(() => {
setMedia(result);
field.setData(result);
document.body.style.overflow = "hidden";
});
setMedia(result)
field.setData(result)
document.body.style.overflow = "hidden"
})
}
updateFrameHeight();
updateFrameHeight()
},
[field, updateFrameHeight]
);
)
useEffect(() => {
updateFrameHeight();
}, [updateFrameHeight]);
updateFrameHeight()
}, [updateFrameHeight])
const handleEdit = useCallback(() => {
const fieldData = field?.getData() as InsertResponse;
const fieldData = field?.getData() as InsertResponse
if (isInsertResponse(fieldData)) {
cbModal({
// @ts-expect-error: Component is badly typed
@@ -168,12 +168,12 @@ export default function ImageVaultDAM({
modalProps: {
size: "max",
},
});
})
}
}, [field, handleMedia]);
}, [field, handleMedia])
if (!field || !frame || !entry || !stack) {
return <p>Initializing custom field...</p>;
return <p>Initializing custom field...</p>
}
const entryData: EntryDataPublishDetails = {
@@ -186,7 +186,7 @@ export default function ImageVaultDAM({
entry.getField("title").getData().toString() ||
`Untitled (${entry.content_type.uid})`,
uid: entry._data.uid,
};
}
return (
<div>
@@ -200,8 +200,8 @@ export default function ImageVaultDAM({
<Media
media={media}
onDelete={() => {
setMedia(null);
handleMedia();
setMedia(null)
handleMedia()
}}
onEdit={handleEdit}
/>
@@ -212,10 +212,10 @@ export default function ImageVaultDAM({
config,
entryData,
onSuccess: handleMedia,
});
})
}}
/>
)}
</div>
);
)
}

2
remix/app/components/InvalidConfig.tsx
View File

@@ -7,5 +7,5 @@ export default function InvalidConfig() {
to run correctly.
</p>
</div>
);
)
}

10
remix/app/entry.client.tsx
View File

@@ -1,6 +1,6 @@
import { RemixBrowser } from "@remix-run/react";
import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";
import { RemixBrowser } from "@remix-run/react"
import { startTransition, StrictMode } from "react"
import { hydrateRoot } from "react-dom/client"
startTransition(() => {
hydrateRoot(
@@ -8,5 +8,5 @@ startTransition(() => {
<StrictMode>
<RemixBrowser />
</StrictMode>
);
});
)
})

12
remix/app/entry.server.tsx
View File

@@ -1,6 +1,6 @@
import type { EntryContext } from "@remix-run/node";
import { RemixServer } from "@remix-run/react";
import { renderToString } from "react-dom/server";
import type { EntryContext } from "@remix-run/node"
import { RemixServer } from "@remix-run/react"
import { renderToString } from "react-dom/server"
export default function handleRequest(
request: Request,
@@ -10,10 +10,10 @@ export default function handleRequest(
) {
let html = renderToString(
<RemixServer context={remixContext} url={request.url} />
);
html = "<!DOCTYPE html>\n" + html;
)
html = "<!DOCTYPE html>\n" + html
return new Response(html, {
headers: { "Content-Type": "text/html" },
status: responseStatusCode,
});
})
}

40
remix/app/hooks/useApp.ts
View File

@@ -1,46 +1,46 @@
import UiLocation from "@contentstack/app-sdk/dist/src/uiLocation";
import { useEffect, useState } from "react";
import UiLocation from "@contentstack/app-sdk/dist/src/uiLocation"
import { useEffect, useState } from "react"
export class SDKLoadingError extends Error {}
export default function useApp() {
const [, setError] = useState();
const [sdk, setSdk] = useState<UiLocation>();
const [config, setConfig] = useState<Record<string, string>>();
const [, setError] = useState()
const [sdk, setSdk] = useState<UiLocation>()
const [config, setConfig] = useState<Record<string, string>>()
useEffect(() => {
async function init() {
try {
const ContentstackAppSDK = (await import("@contentstack/app-sdk"))
.default;
const initSdk = await ContentstackAppSDK.init();
setSdk(initSdk);
.default
const initSdk = await ContentstackAppSDK.init()
setSdk(initSdk)
const config = await initSdk.getConfig();
setConfig(config);
const config = await initSdk.getConfig()
setConfig(config)
const iframeWrapperRef = document.getElementById("field");
window.iframeRef = iframeWrapperRef;
window.postRobot = initSdk.postRobot;
const iframeWrapperRef = document.getElementById("field")
window.iframeRef = iframeWrapperRef
window.postRobot = initSdk.postRobot
} catch (e) {
let err: Error;
let err: Error
if (e instanceof Error) {
err = new SDKLoadingError(e.message);
err = new SDKLoadingError(e.message)
}
// Error boundaries do not support async functions. Workaround:
// https://github.com/vercel/next.js/discussions/50564#discussioncomment-6063866
setError(() => {
throw err;
});
throw err
})
}
}
init();
}, [setSdk, setConfig]);
init()
}, [setSdk, setConfig])
return {
sdk,
config,
};
}
}

16
remix/app/root.tsx
View File

@@ -5,8 +5,8 @@ import {
Scripts,
ScrollRestoration,
useRouteError,
} from '@remix-run/react';
import { SDKLoadingError } from './hooks/useApp';
} from "@remix-run/react"
import { SDKLoadingError } from "./hooks/useApp"
export function Layout({ children }: { children: React.ReactNode }) {
return (
@@ -31,20 +31,20 @@ export function Layout({ children }: { children: React.ReactNode }) {
<Scripts />
</body>
</html>
);
)
}
export default function App() {
return <Outlet />;
return <Outlet />
}
export function HydrateFallback() {
return <p>Loading...</p>;
return <p>Loading...</p>
}
export function ErrorBoundary() {
const error = useRouteError();
console.error(error);
const error = useRouteError()
console.error(error)
return (
<html lang="en">
@@ -68,5 +68,5 @@ export function ErrorBoundary() {
<Scripts />
</body>
</html>
);
)
}

14
remix/app/routes/_index.tsx
View File

@@ -1,15 +1,15 @@
import type { MetaFunction } from '@remix-run/node';
import type { MetaFunction } from "@remix-run/node"
export const meta: MetaFunction = () => {
return [
{ title: 'DAM: ImageVault integration' },
{ title: "DAM: ImageVault integration" },
{
name: 'description',
content: 'Integration of ImageVault as a DAM for Contentstack',
name: "description",
content: "Integration of ImageVault as a DAM for Contentstack",
},
];
};
]
}
export default function Index() {
return null;
return null
}

18
remix/app/routes/config.tsx
View File

@@ -1,14 +1,14 @@
import { Suspense, lazy } from "react";
import useApp from "~/hooks/useApp";
import { Suspense, lazy } from "react"
import useApp from "~/hooks/useApp"
const ConfigForm = lazy(() => import("~/components/ConfigForm"));
const ConfigForm = lazy(() => import("~/components/ConfigForm"))
export default function ConfigPage() {
const { sdk, config } = useApp();
const { sdk, config } = useApp()
const appConfigWidget = sdk?.location.AppConfigWidget;
const appConfigWidget = sdk?.location.AppConfigWidget
const setInstallationData = appConfigWidget?.installation.setInstallationData;
const setInstallationData = appConfigWidget?.installation.setInstallationData
if (!config) {
return (
@@ -17,7 +17,7 @@ export default function ConfigPage() {
Could not fetch the current configuration, please try again later!
</p>
</div>
);
)
}
if (!setInstallationData) {
@@ -27,12 +27,12 @@ export default function ConfigPage() {
THe configuration cannot be updated right now, please try again later!
</p>
</div>
);
)
}
return (
<Suspense fallback={<p>Loading config form...</p>}>
<ConfigForm values={config} setInstallationData={setInstallationData} />
</Suspense>
);
)
}

50
remix/app/routes/field.tsx
View File

@@ -1,26 +1,26 @@
import { Suspense, lazy, useEffect, useState } from "react";
import { useScript } from "usehooks-ts";
import useApp from "~/hooks/useApp";
import { Suspense, lazy, useEffect, useState } from "react"
import { useScript } from "usehooks-ts"
import useApp from "~/hooks/useApp"
import Disclaimer from "~/components/Disclaimer";
import InvalidConfig from "~/components/InvalidConfig";
import Disclaimer from "~/components/Disclaimer"
import InvalidConfig from "~/components/InvalidConfig"
import { isImageVaultDAMConfig } from "~/utils/imagevault";
import type { InsertResponse } from "~/types/imagevault";
import { isImageVaultDAMConfig } from "~/utils/imagevault"
import type { InsertResponse } from "~/types/imagevault"
const ImageVaultDAM = lazy(() => import("~/components/ImageVaultDAM"));
const ImageVaultDAM = lazy(() => import("~/components/ImageVaultDAM"))
export default function Field() {
const { sdk, config } = useApp();
const { sdk, config } = useApp()
const ivStatus = useScript(
"/scripts/imagevault-insert-media/insertmediawindow.min.js"
);
)
const [showDisclaimer, setShowDisclaimer] = useState(false);
const [fieldData, setFieldData] = useState<InsertResponse>();
const [showDisclaimer, setShowDisclaimer] = useState(false)
const [fieldData, setFieldData] = useState<InsertResponse>()
const entry = sdk?.location.CustomField?.entry;
const field = sdk?.location.CustomField?.field;
const entry = sdk?.location.CustomField?.entry
const field = sdk?.location.CustomField?.field
useEffect(() => {
// If we can get field data from the SDK that means the entry has been
@@ -29,30 +29,30 @@ export default function Field() {
// cannot be referred to by ImageVault. Entry title is also required by us.
try {
if (field && entry) {
const data = field.getData();
const title = entry.getField("title").getData().toString();
const data = field.getData()
const title = entry.getField("title").getData().toString()
if (data && title) {
setFieldData(data as InsertResponse);
setFieldData(data as InsertResponse)
} else {
throw new Error("Missing data or title for entry");
throw new Error("Missing data or title for entry")
}
}
} catch (e) {
setShowDisclaimer(true);
setShowDisclaimer(true)
}
}, [entry, field]);
}, [entry, field])
if (showDisclaimer) {
return <Disclaimer />;
return <Disclaimer />
}
const loaded = !!(fieldData && ivStatus === "ready" && sdk && config);
const loaded = !!(fieldData && ivStatus === "ready" && sdk && config)
const initialData =
fieldData && Object.keys(fieldData).length > 0 ? fieldData : null;
fieldData && Object.keys(fieldData).length > 0 ? fieldData : null
if (!loaded) {
return <p style={{ fontFamily: "Inter" }}> Loading dependecies...</p>;
return <p style={{ fontFamily: "Inter" }}> Loading dependecies...</p>
}
return (
@@ -65,5 +65,5 @@ export default function Field() {
<InvalidConfig />
)}
</div>
);
)
}

8
remix/prettier.config.cjs Normal file
View File

@@ -0,0 +1,8 @@
module.exports = {
semi: false,
trailingComma: "es5",
singleQuote: false,
printWidth: 80,
tabWidth: 2,
endOfLine: "lf",
}

8
remix/vite.config.ts
View File

@@ -1,6 +1,6 @@
import { vitePlugin as remix } from '@remix-run/dev';
import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';
import { vitePlugin as remix } from "@remix-run/dev"
import { defineConfig } from "vite"
import tsconfigPaths from "vite-tsconfig-paths"
export default defineConfig({
plugins: [
@@ -12,4 +12,4 @@ export default defineConfig({
build: {
emptyOutDir: true,
},
});
})

7
rte/.prettierignore Normal file
View File

@@ -0,0 +1,7 @@
# Files
.eslintrc.cjs
.prettierignore
package.json
package-lock.json
prettier.config.cjs
tsconfig.json

20
rte/components/EmbedBtn.tsx
View File

@@ -1,11 +1,11 @@
import React, { PropsWithChildren } from 'react';
import { Tooltip } from '@contentstack/venus-components';
import React, { PropsWithChildren } from "react"
import { Tooltip } from "@contentstack/venus-components"
type EmbedBtnProps = PropsWithChildren & {
content: string;
onClick: (e: unknown) => void;
title: string;
};
content: string
onClick: (e: unknown) => void
title: string
}
export default function EmbedBtn({
content,
@@ -19,13 +19,13 @@ export default function EmbedBtn({
id={title}
type="button"
onClick={(e) => {
e?.preventDefault();
e?.stopPropagation();
onClick(e);
e?.preventDefault()
e?.stopPropagation()
onClick(e)
}}
>
{children}
</button>
</Tooltip>
);
)
}

78
rte/components/ImageEditModal.tsx
View File

@@ -1,4 +1,4 @@
import React, { useState, useEffect, ChangeEvent } from 'react';
import React, { useState, useEffect, ChangeEvent } from "react"
import {
ModalFooter,
ModalBody,
@@ -9,14 +9,14 @@ import {
FieldLabel,
TextInput,
Select,
} from '@contentstack/venus-components';
import { Path } from 'slate';
} from "@contentstack/venus-components"
import { Path } from "slate"
import type {
IRteParam,
IRteElementType,
} from '@contentstack/app-sdk/dist/src/RTE/types';
import type { InsertResponse } from "~/types/imagevault";
} from "@contentstack/app-sdk/dist/src/RTE/types"
import type { InsertResponse } from "~/types/imagevault"
enum DropdownValues {
center = "center",
@@ -26,10 +26,10 @@ enum DropdownValues {
}
type DropDownItem = {
label: string;
value: DropdownValues;
type: string;
};
label: string
value: DropdownValues
type: string
}
const dropdownList: DropDownItem[] = [
{
@@ -52,16 +52,16 @@ const dropdownList: DropDownItem[] = [
value: DropdownValues.right,
type: "select",
},
];
]
type ImageEditModalProps = {
element: IRteElementType & {
attrs: InsertResponse;
};
rte: IRteParam;
closeModal: () => void;
path: Path;
};
attrs: InsertResponse
}
rte: IRteParam
closeModal: () => void
path: Path
}
export default function ImageEditModal({
element,
@@ -73,29 +73,29 @@ export default function ImageEditModal({
label: "None",
value: DropdownValues.none,
type: "select",
});
const [altText, setAltText] = useState("");
const [caption, setCaption] = useState("");
})
const [altText, setAltText] = useState("")
const [caption, setCaption] = useState("")
const assetUrl = element.attrs.MediaConversions[0].Url;
const assetUrl = element.attrs.MediaConversions[0].Url
useEffect(() => {
if (element.attrs.Metadata && element.attrs.Metadata.length) {
const altText = element.attrs.Metadata.find((meta) =>
meta.Name.includes("AltText_")
)?.Value;
)?.Value
const caption = element.attrs.Metadata.find((meta) =>
meta.Name.includes("Title_")
)?.Value;
)?.Value
setAltText(altText ?? "");
setCaption(caption ?? "");
setAltText(altText ?? "")
setCaption(caption ?? "")
}
}, [element.attrs.Metadata]);
}, [element.attrs.Metadata])
function handleSave() {
let newStyle;
let newStyle
switch (alignment.value) {
case DropdownValues.center:
@@ -106,25 +106,25 @@ export default function ImageEditModal({
maxWidth: element.attrs.width
? `${element.attrs.width}px`
: undefined,
};
break;
}
break
case DropdownValues.none:
default:
newStyle = {};
break;
newStyle = {}
break
}
const metaData = element.attrs.Metadata ?? [];
const metaData = element.attrs.Metadata ?? []
const newMetadata = metaData.map((meta) => {
if (meta.Name.includes("AltText_")) {
return { ...meta, Value: altText };
return { ...meta, Value: altText }
}
if (meta.Name.includes("Title_")) {
return { ...meta, Value: caption };
return { ...meta, Value: caption }
}
return meta;
});
return meta
})
rte._adv.Transforms?.setNodes<IRteElementType>(
rte._adv.editor,
@@ -137,9 +137,9 @@ export default function ImageEditModal({
},
},
{ at: path }
);
)
closeModal();
closeModal()
}
return (
@@ -168,7 +168,7 @@ export default function ImageEditModal({
selectLabel="Alignment"
value={alignment}
onChange={(e: DropDownItem) => {
setAlignment(e);
setAlignment(e)
}}
options={dropdownList}
/>
@@ -209,5 +209,5 @@ export default function ImageEditModal({
</ButtonGroup>
</ModalFooter>
</>
);
)
}

58
rte/components/ImageElement.tsx
View File

@@ -1,27 +1,27 @@
import React, { useRef, useCallback, PropsWithChildren } from 'react';
import { Tooltip, Icon, cbModal } from '@contentstack/venus-components';
import React, { useRef, useCallback, PropsWithChildren } from "react"
import { Tooltip, Icon, cbModal } from "@contentstack/venus-components"
import { Resizable } from 're-resizable';
import EmbedBtn from './EmbedBtn';
import ImageEditModal from './ImageEditModal';
import { Resizable } from "re-resizable"
import EmbedBtn from "./EmbedBtn"
import ImageEditModal from "./ImageEditModal"
import type {
IRteParam,
IRteElementType,
} from '@contentstack/app-sdk/dist/src/RTE/types';
import type { InsertResponse } from '~/types/imagevault';
} from "@contentstack/app-sdk/dist/src/RTE/types"
import type { InsertResponse } from "~/types/imagevault"
type ImageElementProps = PropsWithChildren & {
element: IRteElementType & { attrs: InsertResponse };
rte: IRteParam;
};
element: IRteElementType & { attrs: InsertResponse }
rte: IRteParam
}
export function ImageElement({ children, element, rte }: ImageElementProps) {
const assetUrl = element.attrs.MediaConversions[0].Url;
const isSelected = rte?.selection?.isSelected();
const isFocused = rte?.selection?.isFocused();
const isHighlight = isFocused && isSelected;
const assetUrl = element.attrs.MediaConversions[0].Url
const isSelected = rte?.selection?.isSelected()
const isFocused = rte?.selection?.isFocused()
const isHighlight = isFocused && isSelected
const imgRef = useRef<HTMLDivElement | null>(null);
const imgRef = useRef<HTMLDivElement | null>(null)
const handleEdit = useCallback(() => {
cbModal({
@@ -36,8 +36,8 @@ export function ImageElement({ children, element, rte }: ImageElementProps) {
modalProps: {
size: "max",
},
});
}, [element, rte]);
})
}, [element, rte])
const ToolTipButtons = () => {
return (
@@ -54,12 +54,12 @@ export function ImageElement({ children, element, rte }: ImageElementProps) {
<Icon icon="Trash" />
</EmbedBtn>
</div>
);
};
)
}
const onResizeStop = () => {
const { attrs: elementAttrs } = element;
const { offsetWidth: width, offsetHeight: height } = imgRef?.current ?? {};
const { attrs: elementAttrs } = element
const { offsetWidth: width, offsetHeight: height } = imgRef?.current ?? {}
const newAttrs: { [key: string]: unknown } = {
...elementAttrs,
@@ -70,24 +70,24 @@ export function ImageElement({ children, element, rte }: ImageElementProps) {
...(width && height
? { width: `${width.toString()}px`, height: `${height.toString()}px` }
: {}),
};
}
rte?._adv?.Transforms?.setNodes<IRteElementType>(
rte._adv.editor,
{ attrs: newAttrs },
{ at: rte.getPath(element) }
);
};
)
}
let alignmentStyles = {};
let alignmentStyles = {}
const marginAlignment: Record<string, { [key: string]: string }> = {
center: { margin: "auto" },
left: { marginRight: "auto" },
right: { marginLeft: "auto" },
};
}
if (typeof element.attrs.position === "string") {
alignmentStyles = marginAlignment[element.attrs.position];
alignmentStyles = marginAlignment[element.attrs.position]
}
return (
@@ -137,7 +137,7 @@ export function ImageElement({ children, element, rte }: ImageElementProps) {
<img
src={assetUrl}
onError={(event) => {
event.currentTarget.src = "https://placehold.co/600x400";
event.currentTarget.src = "https://placehold.co/600x400"
}}
style={{
width: "100%",
@@ -169,5 +169,5 @@ export function ImageElement({ children, element, rte }: ImageElementProps) {
</span>
</Tooltip>
</div>
);
)
}

2
rte/env.d.ts vendored
View File

@@ -1 +1 @@
declare const IS_DEV: boolean;
declare const IS_DEV: boolean

134
rte/main.tsx
View File

@@ -1,70 +1,70 @@
import React from 'react';
import ContentstackSDK from '@contentstack/app-sdk';
import React from "react"
import ContentstackSDK from "@contentstack/app-sdk"
import { ImageElement } from '~/components/ImageElement';
import { ImageElement } from "~/components/ImageElement"
import { Icon } from '@contentstack/venus-components';
import { openImageVault } from '~/utils/imagevault';
import { Icon } from "@contentstack/venus-components"
import { openImageVault } from "~/utils/imagevault"
import type { Lang } from '~/types/lang';
import type { Lang } from "~/types/lang"
import type {
ContentstackEmbeddedData,
ContentstackPluginDefinition,
ExtractedContentstackEmbeddedData,
} from '~/types/contentstack';
} from "~/types/contentstack"
function findThisPlugin(ext: ContentstackPluginDefinition) {
return ext.type === 'rte_plugin' && ext.title === 'ImageVault';
return ext.type === "rte_plugin" && ext.title === "ImageVault"
}
async function loadScript(url: string) {
return new Promise((resolve, reject) => {
if (!document) {
throw new Error('Run in browser only');
throw new Error("Run in browser only")
}
const head = document.head || document.getElementsByTagName('head')[0];
const head = document.head || document.getElementsByTagName("head")[0]
const script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src = url;
const script = document.createElement("script")
script.type = "text/javascript"
script.async = true
script.src = url
script.onload = function () {
this.onerror = this.onload = null;
resolve(window.ImageVault);
};
this.onerror = this.onload = null
resolve(window.ImageVault)
}
script.onerror = function () {
this.onerror = this.onload = null;
reject(`Failed to load ${this.src}`);
};
this.onerror = this.onload = null
reject(`Failed to load ${this.src}`)
}
head.appendChild(script);
});
head.appendChild(script)
})
}
function extractContentstackEmbeddedData(
jwtLike: string
): ExtractedContentstackEmbeddedData | null {
try {
const base64str = jwtLike.replace(/-/g, "+").replace(/_/g, "/");
const base64str = jwtLike.replace(/-/g, "+").replace(/_/g, "/")
const jsonStr = decodeURIComponent(
window
.atob(base64str)
.split("")
.map(function (c) {
return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2)
})
.join("")
);
)
const json = JSON.parse(jsonStr);
json.exports = JSON.parse(json.exports);
json.props.value = JSON.parse(json.props.value);
const json = JSON.parse(jsonStr)
json.exports = JSON.parse(json.exports)
json.props.value = JSON.parse(json.props.value)
if (IS_DEV) {
console.log(`Contentstack Embedded Data`, json);
console.log(`Contentstack Embedded Data`, json)
}
const {
@@ -77,12 +77,12 @@ function extractContentstackEmbeddedData(
stack: { api_key },
branch,
},
}: ContentstackEmbeddedData = json.props.value;
}: ContentstackEmbeddedData = json.props.value
const titleField = schema.find((f) => f.uid === "title");
const titleField = schema.find((f) => f.uid === "title")
// We force this value with ! because we know it exists.
// Otherwise this code would not run.
const plugin = extensions.find(findThisPlugin)!;
const plugin = extensions.find(findThisPlugin)!
return {
stack: {
@@ -101,43 +101,43 @@ function extractContentstackEmbeddedData(
uid: entryMetadata.entryUid,
},
plugin,
};
}
} catch (e) {
console.log(`Unable to parse JWT like: ${jwtLike}`);
console.log(`Unable to parse JWT like: ${jwtLike}`)
}
return null;
return null
}
let ivloaded = false;
let ivloaded = false
function loadIV(plugin: ContentstackPluginDefinition) {
if (plugin.src) {
const url = new URL(plugin.src);
url.pathname = "/scripts/imagevault-insert-media/insertmediawindow.min.js";
const url = new URL(plugin.src)
url.pathname = "/scripts/imagevault-insert-media/insertmediawindow.min.js"
if (IS_DEV) {
console.log(`Loading script: ${url.toString()}`);
console.log(`Loading script: ${url.toString()}`)
}
loadScript(url.toString());
ivloaded = true;
loadScript(url.toString())
ivloaded = true
}
}
async function init() {
try {
const sdk = await ContentstackSDK.init();
const sdk = await ContentstackSDK.init()
const extensionObj = sdk?.location;
const RTE = extensionObj?.RTEPlugin;
const extensionObj = sdk?.location
const RTE = extensionObj?.RTEPlugin
let embeddedData: ExtractedContentstackEmbeddedData | null = null;
const jwtLike = window.name.split("__").find((str) => str.startsWith("ey"));
let embeddedData: ExtractedContentstackEmbeddedData | null = null
const jwtLike = window.name.split("__").find((str) => str.startsWith("ey"))
if (jwtLike) {
embeddedData = extractContentstackEmbeddedData(jwtLike);
embeddedData = extractContentstackEmbeddedData(jwtLike)
if (embeddedData?.plugin) {
loadIV(embeddedData.plugin);
loadIV(embeddedData.plugin)
}
}
if (!RTE) return;
if (!RTE) return
const ImageVault = RTE("ImageVault", (rte) => {
if (rte) {
@@ -145,11 +145,11 @@ async function init() {
// Loading failed via embedded data above, try again with data inside RTE
// @ts-expect-error: incorrect typings, requestProps is available at runtime
const extensions = rte._adv.editor.requestProps
.extensions as ContentstackPluginDefinition[];
const plugin = extensions.find(findThisPlugin);
.extensions as ContentstackPluginDefinition[]
const plugin = extensions.find(findThisPlugin)
if (plugin) {
loadIV(plugin);
loadIV(plugin)
}
}
}
@@ -163,35 +163,35 @@ async function init() {
<ImageElement element={props.element} rte={rte}>
{props.children}
</ImageElement>
);
)
} else {
console.error("No instance of RTE found");
console.error("No instance of RTE found")
return (
<p>An unexpected error occured, see console for more info.</p>
);
)
}
},
display: ["toolbar"],
elementType: ["void"],
};
});
}
})
ImageVault.on("exec", async (rte) => {
if (rte) {
const savedSelection = rte?.selection?.get() ?? undefined;
const savedSelection = rte?.selection?.get() ?? undefined
// @ts-expect-error: Added at runtime
const appConfig = await 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.
// @ts-expect-error: Added at runtime
const pluginConfig = await rte.getFieldConfig();
const pluginConfig = await rte.getFieldConfig()
const config = {
...appConfig,
...pluginConfig,
};
}
openImageVault({
config,
@@ -218,17 +218,17 @@ async function init() {
children: [{ text: "" }],
},
{ at: savedSelection }
);
)
},
});
})
}
});
})
return {
ImageVault,
};
}
} catch (e) {
console.error({ e });
console.error({ e })
}
}
export default init();
export default init()

8
rte/prettier.config.cjs Normal file
View File

@@ -0,0 +1,8 @@
module.exports = {
semi: false,
trailingComma: "es5",
singleQuote: false,
printWidth: 80,
tabWidth: 2,
endOfLine: "lf",
}

24
rte/vite.config.ts
View File

@@ -1,28 +1,28 @@
import { resolve } from 'path';
import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';
import { resolve } from "path"
import { defineConfig } from "vite"
import tsconfigPaths from "vite-tsconfig-paths"
export default defineConfig({
plugins: [tsconfigPaths()],
define: {
IS_DEV: process.env.IS_DEV === 'true' ? true : false,
IS_DEV: process.env.IS_DEV === "true" ? true : false,
},
publicDir: false,
build: {
sourcemap: process.env.IS_DEV ? 'inline' : 'hidden',
sourcemap: process.env.IS_DEV ? "inline" : "hidden",
emptyOutDir: true,
lib: {
entry: resolve(__dirname, 'main.tsx'),
name: 'csiv',
fileName: () => (process.env.IS_DEV ? 'csiv.js' : 'csiv-[hash].js'),
entry: resolve(__dirname, "main.tsx"),
name: "csiv",
fileName: () => (process.env.IS_DEV ? "csiv.js" : "csiv-[hash].js"),
// @ts-expect-error: 'system' not valid by typings, but works with Rollup
formats: ['system'],
formats: ["system"],
},
rollupOptions: {
external: ['react', 'react-dom', '@contentstack/venus-components'],
external: ["react", "react-dom", "@contentstack/venus-components"],
output: {
dir: '../remix/public/build/rte',
dir: "../remix/public/build/rte",
},
},
},
});
})