@devbookhq/docusaurus-code-video-plugin/lib/theme/CodeBlock/index.js

Add a video to a Docusaurus code block and highlight code lines as the video plays.

import React, { useMemo, isValidElement, useState } from 'react';
import CodeBlock from '@theme-init/CodeBlock';
import VideoPlayer from './VideoPlayer';
import useVideoHighlight from './useVideoHighlight';
function clearCodeChildren(children) {
    if (React.Children.toArray(children).some((el) => isValidElement(el))) {
        return children;
    }
    // The children is now guaranteed to be one/more plain strings
    const code = Array.isArray(children) ? children.join('') : children;
    return code.replace(/(?:^|\r?\n)(?:highlight-next-line|highlight-start|highlight-end)*?(?=$|\r?\n)/g, '');
}
function CodeBlockWrapper(props) {
    const { metastring, handleTimeChange, hasHighlight, } = useVideoHighlight(props);
    const [isOpen, setIsOpen] = useState(false);
    const cleanedCode = useMemo(() => {
        if (hasHighlight) {
            return clearCodeChildren(props.children);
        }
        return props.children;
    }, [
        hasHighlight,
        props,
    ]);
    if (props.youtubeID) {
        return (<VideoPlayer youtubeID={props.youtubeID} onTimeChange={handleTimeChange} onOpen={() => setIsOpen(true)} onClose={() => setIsOpen(false)}>
        <CodeBlock {...props} metastring={metastring}>{isOpen ? cleanedCode : props.children}</CodeBlock>
      </VideoPlayer>);
    }
    else {
        return <CodeBlock {...props}/>;
    }
}
export default CodeBlockWrapper;