phx-react
Version:
PHX REACT
104 lines • 4.04 kB
JavaScript
;
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*/
Object.defineProperty(exports, "__esModule", { value: true });
exports.YouTubeNode = void 0;
exports.$createYouTubeNode = $createYouTubeNode;
exports.$isYouTubeNode = $isYouTubeNode;
const tslib_1 = require("tslib");
const LexicalBlockWithAlignableContents_1 = require("@lexical/react/LexicalBlockWithAlignableContents");
const LexicalDecoratorBlockNode_1 = require("@lexical/react/LexicalDecoratorBlockNode");
const React = tslib_1.__importStar(require("react"));
function YouTubeComponent({ className, format, nodeKey, videoID }) {
return (React.createElement(LexicalBlockWithAlignableContents_1.BlockWithAlignableContents, { className: className, format: format, nodeKey: nodeKey },
React.createElement("iframe", { allow: 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture', allowFullScreen: true, frameBorder: '0', height: '315', src: `https://www.youtube-nocookie.com/embed/${videoID}`, title: 'YouTube video', width: '560' })));
}
function convertYoutubeElement(domNode) {
const videoID = domNode.getAttribute('data-lexical-youtube');
if (videoID) {
const node = $createYouTubeNode(videoID);
return { node };
}
return null;
}
class YouTubeNode extends LexicalDecoratorBlockNode_1.DecoratorBlockNode {
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;
}
getTextContent(
// eslint-disable-next-line @typescript-eslint/no-unused-vars
_includeInert,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
_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 React.createElement(YouTubeComponent, { className: className, format: this.__format, nodeKey: this.getKey(), videoID: this.__id });
}
}
exports.YouTubeNode = YouTubeNode;
function $createYouTubeNode(videoID) {
return new YouTubeNode(videoID);
}
function $isYouTubeNode(node) {
return node instanceof YouTubeNode;
}
//# sourceMappingURL=YouTubeNode.js.map