Skip to content

Instantly share code, notes, and snippets.

@jagtalon

jagtalon/ui.ts

Last active Jan 10, 2020
Embed
What would you like to do?
// Receive all the text nodes of the selected frame from the plugin.
onmessage = (event) => {
let pluginMessage: string[][] = event.data.pluginMessage,
table: HTMLTableElement = document.createElement('table'),
container: HTMLElement = document.querySelector('.plugin__container');
// Attach the table to the container.
container.append(table);
// Build the table.
// TODO: Probably best to refactor this into either Vue or React.
pluginMessage.forEach(list => {
let tr: HTMLTableRowElement = document.createElement('tr');
table.append(tr);
// Map the list of strings into a list of HTMLTableCellElements.
list.map(text => {
let td: HTMLTableCellElement = document.createElement('td');
td.append(document.createTextNode(text));
td.setAttribute('contenteditable', 'true');
td.onclick = copyContent;
return td;
}).forEach(cell => {
tr.append(cell);
});
});
}
// From https://stackoverflow.com/a/6150060
function copyContent(event: MouseEvent) {
let range: Range = document.createRange();
range.selectNodeContents(this);
let sel: Selection = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
document.execCommand('copy');
// Tell the plugin about it.
parent.postMessage({pluginMessage: {type: 'notification', message: 'Copied Text'}}, '*');
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.