Created a plugin to display embedded YouTube URLs in GROWI
Tags: growi, opensource, plugin, typescript
Published: 2024-06-19 06:31:51

---
title: Created a plugin to display embedded YouTube URLs in GROWI
published: true
description: 
tags: 
  - GROWI
  - OSS
  - Plugin
  - TypeScript
cover_image: https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/f420950f-b692-ed3b-9830-77ea45c41c09.png
# Use a ratio of 100:42 for best results.
# published_at: 2024-06-19 06:28 +0000
---

[GROWI](https://growi.org/en/), an open-source in-house wiki, provides a plug-in feature. You can use it to display your own data or customize the display.

This is the first time I have developed a GROWI plugin, and we will explain the procedure.

## Plug-in developed

I developed [GROWI Plug-in to embed YouTube URL](https://github.com/goofmint/growi-plugin-embed-youtube). When you paste a YouTube URL into a GROWI page, the URL will be embedded in the GROWI page.

If you do not want to embed the link, please use the youtu.be domain.

```markdown
// 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).
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/f420950f-b692-ed3b-9830-77ea45c41c09.png)

## Plugin Development

When developing the plugin, I used [the template introduced recently](https://qiita.com/goofmint/items/497ea7dd722528cfa0cb) as a base.

[goofmint/growi-plugin-script-template: this is a template for creating a GROWI script plugin.](https://github.com/goofmint/growi-plugin- script-template)

### Rename

Rename the plugin.

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

Install the libraries needed for plugin development.

```bash
$ yarn
```

### Rename the files

Rename `src/Hello.tsx` and `src/Hello.css` to `src/EmbedYouTube.tsx` and `src/EmbedYouTube.css`.

### Edit src/EmbedYouTube.tsx

Depending on the content of the link, we determine whether it is a normal link or an embedded link.

```tsx
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>
    );
  };
};
```

### Edit src/EmbedYouTube.css

Write the CSS to make the video responsive.

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

### Editing client-entry.tsx

Edit `client-entry.tsx` to override the' a' tag's processing. This will send all `a` tag-related processing to `EmbedYouTube`.

```ts
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; }
  }; }
};
```

## About the code

This plugin is available when you use it. Please specify `https://github.com/goofmint/growi-plugin-embed-youtube` in the GROWI plugin management.

[goofmint/growi-plugin-embed-youtube: this is a GROWI plugin to change YouTube URL to embed](https://github.com/goofmint/growi-plugin-embed-youtube)

## Summary

The GROWI plugin makes it very easy to customize the display content. This time, it is the `a` tag, but you can also customize other tags, such as the `img` tag and the `table` tag.

Please develop a plugin and make GROWI more useful!

[GROWI, an OSS development wiki tool | comfortable information sharing for all](https://growi.org/en/)