diff --git a/src/core/client/admin/routes/Configure/sections/Advanced/EmbedCode.tsx b/src/core/client/admin/routes/Configure/sections/Advanced/EmbedCode.tsx index 67ae78e75..99b2d78b0 100644 --- a/src/core/client/admin/routes/Configure/sections/Advanced/EmbedCode.tsx +++ b/src/core/client/admin/routes/Configure/sections/Advanced/EmbedCode.tsx @@ -4,6 +4,7 @@ import React, { FunctionComponent, useMemo } from "react"; import { getLocationOrigin } from "coral-common/utils"; import { CopyButton } from "coral-framework/components"; +import { GetMessage, withGetMessage } from "coral-framework/lib/i18n"; import { HorizontalGutter, Typography } from "coral-ui/components"; import Header from "../../Header"; @@ -12,9 +13,10 @@ import styles from "./EmbedCode.css"; interface Props { staticURI: string | null; + getMessage: GetMessage; } -const EmbedCode: FunctionComponent = ({ staticURI }) => { +const EmbedCode: FunctionComponent = ({ staticURI, getMessage }) => { const embed = useMemo(() => { // Get the origin of the current page. const origin = getLocationOrigin(); @@ -22,6 +24,30 @@ const EmbedCode: FunctionComponent = ({ staticURI }) => { // Optionally use the staticURI for configuration. const script = staticURI || origin; + let comment: string | string[] = getMessage( + "configure-advanced-embedCode-comment", + stripIndent` + Uncomment these lines and replace with the ID of the + story's ID and URL from your CMS to provide the + tightest integration. Refer to our documentation at + https://docs.coralproject.net for all the configuration + options. + ` + ); + + // Sometimes when the translation gets to us, it has newlines split onto + // it's own lines, so we filter those lines out first to ensure we don't + // end up printing it twice. We then wrap each line in the correct amount + // of indentation to match the indentation below in the stripIndent block + // below, and rejoin the line (trimming it to remove the leading space) so + // it will fit in the text block that is rendered. + comment = comment + .split("\n") + .filter(line => line !== "\n") + .map(line => ` // ${line.trim()}`) + .join("\n") + .trim(); + // Return the HTML template. const text = stripIndent`
@@ -34,11 +60,7 @@ const EmbedCode: FunctionComponent = ({ staticURI }) => { id: "coral_thread", autoRender: true, rootURL: '${origin}', - // Comment these out and replace with the ID of the - // story's ID and URL from your CMS to provide the - // tightest integration. Refer to our documentation at - // https://docs.coralproject.net for all the configuration - // options. + ${comment} // storyID: '\${storyID}', // storyURL: '\${storyURL}', }); @@ -77,4 +99,6 @@ const EmbedCode: FunctionComponent = ({ staticURI }) => { ); }; -export default EmbedCode; +const enhanced = withGetMessage(EmbedCode); + +export default enhanced; diff --git a/src/core/client/admin/test/configure/__snapshots__/advanced.spec.tsx.snap b/src/core/client/admin/test/configure/__snapshots__/advanced.spec.tsx.snap index 2c32a705d..9279a1813 100644 --- a/src/core/client/admin/test/configure/__snapshots__/advanced.spec.tsx.snap +++ b/src/core/client/admin/test/configure/__snapshots__/advanced.spec.tsx.snap @@ -135,7 +135,7 @@ each of your site’s stories. id: \\"coral_thread\\", autoRender: true, rootURL: 'http://localhost', - // Comment these out and replace with the ID of the + // Uncomment these lines and replace with the ID of the // story's ID and URL from your CMS to provide the // tightest integration. Refer to our documentation at // https://docs.coralproject.net for all the configuration diff --git a/src/core/client/framework/lib/i18n/getMessage.ts b/src/core/client/framework/lib/i18n/getMessage.ts index 3966a3ce9..9a6fad517 100644 --- a/src/core/client/framework/lib/i18n/getMessage.ts +++ b/src/core/client/framework/lib/i18n/getMessage.ts @@ -13,5 +13,9 @@ export default function getMessage( } return val || got; }, ""); + if (res && Array.isArray(res)) { + return res.join(""); + } + return res || defaultTo; } diff --git a/src/locales/en-US/admin.ftl b/src/locales/en-US/admin.ftl index 603c37a44..4de3d5d34 100644 --- a/src/locales/en-US/admin.ftl +++ b/src/locales/en-US/admin.ftl @@ -67,8 +67,7 @@ login-signInWithOIDC = Sign in with { $name } ## Configure configure-unsavedInputWarning = - You have unsaved input. - Are you sure you want to leave this page? + You have unsaved input. Are you sure you want to leave this page? configure-sideBarNavigation-general = General configure-sideBarNavigation-authentication = Authentication @@ -312,6 +311,13 @@ configure-advanced-embedCode-explanation = Copy and paste the code below into your CMS to embed Coral comment streams in each of your site’s stories. +configure-advanced-embedCode-comment = + Uncomment these lines and replace with the ID of the + story's ID and URL from your CMS to provide the + tightest integration. Refer to our documentation at + https://docs.coralproject.net for all the configuration + options. + ## Decision History decisionHistory-popover = .description = A dialog showing the decision history