embed-basic/hooks.tsx

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

import { useEffect, useState, ReactElement, isValidElement } from 'react';
import { createRoot } from 'react-dom/client';
import {
  GithubGistEmbed,
  CodePenEmbed,
  YouTubeEmbed,
  JSFiddleEmbed,
  FigmaEmbed,
  ExcalidrawEmbed,
  LoomEmbed,
  DropboxEmbed,
  TwitterEmbed,
} from './components';
import { Request } from './types';

interface Config {
  platform: string;
  enable: boolean;
}

const get = async (url: string) => {
  const response = await fetch(url);
  const { data } = await response.json();
  return data;
};

const useRenderEmbed = (
  element,
  request: Request = {
    get,
  },
) => {
  const [configs, setConfigs] = useState<Config[] | null>(null);

  const embeds = [
    {
      name: 'YouTube',
      regexs: [
        /https:\/\/youtu\.be\/([a-zA-Z0-9_-]{11})/,
        /https:\/\/www\.youtube\.com\/watch\?v=([a-zA-Z0-9_-]{11})/,
        /https:\/\/www\.youtube\.com\/embed\/([a-zA-Z0-9_-]{11})/,
      ],
      embed: (videoId: string) => {
        return <YouTubeEmbed videoId={videoId} />;
      },
    },
    {
      name: 'Twitter',
      regexs: [
        /https:\/\/twitter\.com\/[a-zA-Z0-9_]+\/status\/([a-zA-Z0-9_]+)/,
        /https:\/\/x\.com\/[a-zA-Z0-9_]+\/status\/([a-zA-Z0-9_]+)/,
      ],
      embed: (_, url, title = '') => {
        const blockquoteElement = document.createElement('blockquote');
        blockquoteElement.classList.add('twitter-tweet');

        const anchorElement = document.createElement('a');
        anchorElement.href = url.replace('x.com', 'twitter.com');

        anchorElement.textContent = title;
        blockquoteElement.appendChild(anchorElement);
        const scriptElement = document.createElement('script');
        scriptElement.src = 'https://platform.twitter.com/widgets.js';
        scriptElement.async = true;

        const styleElement = document.createElement('style');
        styleElement.innerHTML = `
          .twitter-tweet {
            display: block;
            margin: 0 auto;
          }
        `;

        return (
          <TwitterEmbed
            url={url.replace('x.com', 'twitter.com')}
            title={title}
          />
        );
      },
    },
    {
      name: 'CodePen',
      regexs: [
        /https:\/\/codepen\.io\/[a-zA-Z0-9_]+\/pen\/([a-zA-Z0-9_]+)/,
        /https:\/\/codepen\.io\/[a-zA-Z0-9_]+\/full\/([a-zA-Z0-9_]+)/,
      ],
      embed: (penId) => {
        return <CodePenEmbed penId={penId} />;
      },
    },
    {
      name: 'JSFiddle',
      regexs: [
        /https:\/\/jsfiddle\.net\/[a-zA-Z0-9_]+\/([a-zA-Z0-9_]+)/,
        /https:\/\/jsfiddle\.net\/[a-zA-Z0-9_]+\/([a-zA-Z0-9_]+)\/embed/,
      ],
      embed: (fiddleId: string) => {
        return <JSFiddleEmbed fiddleId={fiddleId} />;
      },
    },
    {
      name: 'GithubGist',
      regexs: [
        /https:\/\/gist\.github\.com\/[a-zA-Z0-9_]+\/([a-zA-Z0-9_]+)/,
        /https:\/\/gist\.github\.com\/[a-zA-Z0-9_]+\/([a-zA-Z0-9_]+)\.js/,
      ],
      embed: (_, url) => {
        const scriptUrl = url.indexOf('.js') > -1 ? url : `${url}.js`;
        return <GithubGistEmbed scriptUrl={scriptUrl} />;
      },
    },
    {
      name: 'Figma',
      regexs: [
        /https:\/\/www\.figma\.com\/design\/[a-zA-Z0-9_]+\/([a-zA-Z0-9_]+)/,
        /https:\/\/www\.figma\.com\/file\/[a-zA-Z0-9_]+\/([a-zA-Z0-9_]+)/,
      ],
      embed: (_, url) => {
        return <FigmaEmbed url={url} />;
      },
    },
    {
      name: 'Excalidraw',
      regexs: [
        /https:\/\/excalidraw\.com\/#json=([a-zA-Z0-9_,-]+)/,
        /https:\/\/excalidraw\.com\/([a-zA-Z0-9_,-]+)/,
      ],
      embed: (excalidrawId: string) => {
        return <ExcalidrawEmbed excalidrawId={excalidrawId} />;
      },
    },
    {
      name: 'Loom',
      regexs: [
        /https:\/\/www\.loom\.com\/embed\/([a-zA-Z0-9_]+)/,
        /https:\/\/www\.loom\.com\/share\/([a-zA-Z0-9_]+)/,
      ],
      embed: (loomId: string) => {
        return <LoomEmbed loomId={loomId} />;
      },
    },
    {
      name: 'Dropbox',
      regexs: [
        /https:\/\/www\.dropbox\.com\/s\/([a-zA-Z0-9_]+)\/[a-zA-Z0-9_]+/,
      ],
      embed: (dropboxId: string) => {
        return <DropboxEmbed dropboxId={dropboxId} />;
      },
    },
  ];

  const filteredEmbeds = embeds.filter((embed) => {
    const finded = configs?.find(
      (config) => config.platform === embed.name && config.enable,
    );
    return finded;
  });

  const renderEmbed = (
    url: string,
    title: string,
  ): string | HTMLElement | HTMLElement[] => {
    let html: string | HTMLElement | HTMLElement[] | ReactElement = '';

    filteredEmbeds.forEach((embed) => {
      if (html) return;
      embed.regexs.forEach((regex) => {
        if (html) return;
        const match = url.match(regex);
        if (match) {
          html = embed.embed(match[1], url, title);
        }
      });
    });

    return html;
  };

  const render = (targetElement) => {
    if (!element) {
      return;
    }

    const links = targetElement.querySelectorAll('a');
    let hasDefaultStyle = false;
    links.forEach((link) => {
      const url = link.getAttribute('href') || '';
      const title = link.getAttribute('title') || '';
      if (!url) {
        return;
      }
      if (title !== '@embed') {
        return;
      }
      const embed = renderEmbed(url, link?.textContent || '');
      if (isValidElement(embed)) {
        const parentElement = link.parentElement as HTMLElement;
        parentElement.classList.add('position-relative');
        parentElement.style.height = '128px';
        createRoot(parentElement).render(embed);
      } else {
        hasDefaultStyle = true;
        link.innerHTML = `
          <div class="card embed-light">
            <div class="card-body">
              <div class="text-secondary small mb-1">${url}</div>
              <div class="text-body fw-bold">${link.textContent}</div>
            </div>
          </div>
        `;
      }
    });
    // default card style add embed-ligh class for hover bg-light
    let styleElement = document.querySelector('style#embed-style');
    if (!styleElement) {
      styleElement = document.createElement('style');
      styleElement.id = 'embed-style';
      if (hasDefaultStyle) {
        styleElement.textContent = `
         .embed-light:hover {
           --bs-bg-opacity: 1;
           background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
         }
        `;
        const head = document.querySelector('head') as HTMLElement;
        head.appendChild(styleElement);
      }
    }
  };

  const getConfig = () => {
    request
      .get('/answer/api/v1/embed/config')
      .then((result) => setConfigs(result));
  };
  useEffect(() => {
    getConfig();

    return () => {
      const styleEle = document.querySelector('style#embed-style');
      const head = document.querySelector('head') as HTMLElement;
      if (styleEle) {
        head.removeChild(styleEle);
      }
    };
  }, []);

  useEffect(() => {
    if (!element) {
      return;
    }

    if (!configs) {
      return;
    }

    let targetElement;
    if (element instanceof HTMLElement) {
      targetElement = element;
    } else {
      targetElement = element.current;
    }
    render(targetElement);
    const observer = new MutationObserver(() => {
      render(targetElement);
    });

    observer.observe(targetElement, {
      childList: true,
    });

    return () => {
      observer.disconnect();
    };
  }, [element, configs]);
};

export { useRenderEmbed };