lexical-remark/lib/extensions/youtube/node.js

This package contains Markdown helpers and functionality for Lexical using remark-parse.

import { jsx as _jsx } from "react/jsx-runtime";
/* eslint-disable @typescript-eslint/no-use-before-define */
import lexicalDecoratorBlockNode from '@lexical/react/LexicalDecoratorBlockNode.js';
import { YouTubeComponent } from './component.js';
function convertYoutubeElement(domNode) {
    const videoID = domNode.getAttribute('data-lexical-youtube');
    if (videoID) {
        const node = $createYouTubeNode(videoID);
        return { node };
    }
    return null;
}
/**
 * A Lexical node to represent an embedded YouTube video
 */
export class YouTubeNode extends lexicalDecoratorBlockNode.DecoratorBlockNode {
    __id;
    static getType() {
        return 'youtube';
    }
    static clone(node) {
        return new YouTubeNode(node.__id, node.__format, node.__key);
    }
    static importJSON(serializedNode) {
        const node = $createYouTubeNode(serializedNode.videoID);
        node.setFormat(serializedNode.format);
        return node;
    }
    exportJSON() {
        return {
            ...super.exportJSON(),
            type: 'youtube',
            version: 1,
            videoID: this.__id,
        };
    }
    constructor(id, format, key) {
        super(format, key);
        this.__id = id;
    }
    exportDOM() {
        const element = document.createElement('iframe');
        element.setAttribute('data-lexical-youtube', this.__id);
        element.setAttribute('width', '560');
        element.setAttribute('height', '315');
        element.setAttribute('src', `https://www.youtube-nocookie.com/embed/${this.__id}`);
        element.setAttribute('frameborder', '0');
        element.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture');
        element.setAttribute('allowfullscreen', 'true');
        element.setAttribute('title', 'YouTube video');
        return { element };
    }
    static importDOM() {
        return {
            iframe: (domNode) => {
                if (!domNode.hasAttribute('data-lexical-youtube')) {
                    return null;
                }
                return {
                    conversion: convertYoutubeElement,
                    priority: 1,
                };
            },
        };
    }
    updateDOM() {
        return false;
    }
    getId() {
        return this.__id;
    }
    getTextContent(_includeInert, _includeDirectionless) {
        return `https://www.youtube.com/watch?v=${this.__id}`;
    }
    decorate(_editor, config) {
        const embedBlockTheme = config.theme.embedBlock || {};
        const className = {
            base: embedBlockTheme.base || '',
            focus: embedBlockTheme.focus || '',
        };
        return (_jsx(YouTubeComponent, { className: className, format: this.__format, nodeKey: this.getKey(), videoID: this.__id }));
    }
}
/**
 * Creates a YouTube node from a video id
 *
 * @param videoID The YouTube video id
 * @returns A YouTube node
 */
export function $createYouTubeNode(videoID) {
    return new YouTubeNode(videoID);
}
/**
 * A typeguard function to assert on a YouTube node
 *
 * @param node A Lexical node
 * @returns true if the node is a YouTube node, otherwise false
 */
export function $isYouTubeNode(node) {
    return node instanceof YouTubeNode;
}