Created a plugin to display embedded YouTube URLs in GROWI

// will be embedded
https://www.youtube.com/watch?v=XXXXXXXXXXX

// will not be embedded
https://youtu.be/XXXXXXXXXXX

// the following will not be embedded
If you would like to see the video, please visit [this link](https://youtu.be/XXXXXXXXXXX).

{
    "name": "growi-plugin-youtube-embed", // change
    "version": "1.0.0",.
    "description": "GROWI plugin for embedding YouTube videos", // Change
    :: }
}

$ yarn

import innerText from 'react-innertext';.

import '. /EmbedYouTube.css';

const getYouTubeId = (href: string): string | null => {
  const url = new URL(href);
  const videoId = url.searchParams.get('v');
  if (videoId) return videoId;
  return null; }
};

export const EmbedYouTube = (A: React.FunctionComponent<any>): React.FunctionComponent<any> => {
  return ({ children, href, . .props }) => {
    const videoId = getYouTubeId(href);
        // normal link
    if (!videoId) {
      return (
        <>
          <A {. .props}>{children}</A>
        </>
      );
    }
        // convert to embedded display
    return (
      <div className="youtube">
        <iframe
          width="560"
          height="315"
          src={`https://www.youtube.com/embed/${videoId}`}
          title="YouTube video player"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          referrerPolicy="strict-origin-when-cross-origin"
          allowFullScreen
        ></iframe>
      </div>
    );
  };
};

.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%; }
}

const activate = (): void => {
  if (growiFacade == null || growiFacade.markdownRenderer == null) {
    return;
  }
  const { optionsGenerators } = growiFacade.markdownRenderer;
  optionsGenerators.customGenerateViewOptions = (. .args) => {
    const options = optionsGenerators.generateViewOptions(. .args);
    const A = options.components.a;
    // replace
    options.components.a = EmbedYouTube(A); // overwrite processing
    return options; }
  }; }
};