x-twitter-editorjs
Version:
Plugin for Editor.js to render Twitter iframe (updated to process X.com also)
78 lines • 3.03 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
require("@rmwc/circular-progress/circular-progress.css");
class Twitter {
constructor(params) {
this.tweetData = params.data;
this.wrapper = document.createElement('div');
this.tweetContainer = document.createElement('div');
this.loader = this.createCircularProgress();
this.wrapper.appendChild(this.loader);
this.wrapper.appendChild(this.tweetContainer);
this.tweetContainer.style.height = '0px';
if (this.tweetData && this.tweetData.url) {
this.tweetData.url = this.tweetData.url.trim();
}
}
onPaste(event) {
this.handlePastedUrl(event.detail.data);
}
handlePastedUrl(url) {
url = url.trim();
if (url.includes("x.com")) {
url = url.replace("x.com", "twitter.com");
}
const tweetID = url.match(/twitter\.com\/.*\/status(?:es)?\/([^/?]+)/);
const tweetUsername = url.match(/((https?:\/\/)?(www\.)?twitter\.com\/)?(@|#!\/)?([A-Za-z0-9_]{1,15})/);
if (tweetID && tweetID[1] && tweetUsername && tweetUsername[5]) {
this.tweetData = {
username: tweetUsername[5],
id: tweetID[1].toString(),
url
};
this.createTweet();
}
}
createTweet() {
window.twttr.widgets.createTweet(this.tweetData.id, this.tweetContainer).then((el) => {
if (el) {
el.parentNode.style.height = 'auto';
el.parentNode.previousElementSibling.remove();
}
});
}
static get pasteConfig() {
return {
patterns: {
twitter: /^https?:\/\/(?:twitter\.com|x\.com)\/(?:#!\/)?(\w+)\/status(?:es)?\/(\d+)(?:\/.*)?([^?]+)?(\?.*)?$/
}
};
}
createCircularProgress() {
const container = document.createElement('div');
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
container.classList.add('rmwc-circular-progress', 'rmwc-circular-progress--indeterminate', 'rmwc-circular-progress--thickerstroke');
svg.classList.add('rmwc-circular-progress__circle');
circle.classList.add('rmwc-circular-progress__path');
svg.setAttribute('viewBox', '0 0 72 72');
circle.setAttribute('cx', '36');
circle.setAttribute('cy', '36');
circle.setAttribute('r', '30');
svg.appendChild(circle);
container.appendChild(svg);
container.style.fontSize = '72px';
return container;
}
save() {
return this.tweetData;
}
render() {
if (this.tweetData.id) {
this.createTweet();
}
return this.wrapper;
}
}
exports.default = Twitter;
//# sourceMappingURL=index.js.map