import { stripIndent } from "common-tags" ; import React , { FunctionComponent , useMemo } from "react" ; import { CopyButton } from "coral-framework/components" ; import { useCoralContext } from "coral-framework/lib/bootstrap" ; import { GetMessage , withGetMessage } from "coral-framework/lib/i18n" ; import { getLocationOrigin } from "coral-framework/utils" ; import { HorizontalGutter , Textarea } from "coral-ui/components/v2" ; import styles from "./EmbedCode.css" ; interface Props { staticURI : string | null ; getMessage : GetMessage ; } const EmbedCode = ( { staticURI , getMessage } ) => { const { window } = useCoralContext ( ) ; const embed = useMemo ( ( ) => { const origin = getLocationOrigin ( window ) ; const script = staticURI || origin ; let comment = 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.
    ` ) ; comment = comment . split ( "\n" ) . filter ( ( line ) => line !== "\n" ) . map ( ( line ) => `                  // ${ line . trim ( ) }` ) . join ( "\n" ) . trim ( ) ; const text = stripIndent `
    <div id="coral_thread"></div>
    <script type="text/javascript">
      (function() {
          var d = document, s = d.createElement('script');
          s.src = '${ script }/assets/js/embed.js';
          s.async = false;
          s.defer = true;
          s.onload = function() {
              Coral.createStreamEmbed({
                  id: "coral_thread",
                  autoRender: true,
                  rootURL: '${ origin }',
                  ${ comment }
                  // storyID: '\${storyID}',
                  // storyURL: '\${storyURL}',
              });
          };
          (d.head || d.body).appendChild(s);
      })();
    </script>` ; const rows = text . split ( /\r\n|\r|\n/ ) . length ; return { text , rows } ; } , [ staticURI ] ) ; return ( < > < Textarea rows = { embed . rows } className = { styles . textArea } readOnly value = { embed . text } / > < HorizontalGutter className = { styles . copyArea } > < CopyButton variant = "regular" color = "mono" text = { embed . text } / > < /HorizontalGutter> < />); } ; const enhanced = withGetMessage ( EmbedCode ) ; export default enhanced ;