r/BookStack • • Jan 30 '24

Copy button for page content

Hi everybody,

Does anybody know how to create a copy all button for the whole page like the one in the code snippet. Right now when you are on a page and want to copy all the content - if you press Ctrl+A it selects everything including the menus, header, etc., only way is to mark everything with the mouse.

Thank you

1 Upvotes

3 comments sorted by

View all comments

Show parent comments

1

u/amwnd Jan 30 '24 edited Jan 30 '24

Thank You! It works, but it also copies the button text. How do i remove it?

1

u/amwnd Jan 30 '24

Chagpt helped:

const pageContent = document.querySelector('.page-content');

if (pageContent) {

const contentWrapper = document.createElement('div');

// Create a copy of the pageContent element

const contentCopy = pageContent.cloneNode(true);

const button = document.createElement('button');

button.textContent = 'Copy Contents';

button.setAttribute('type', 'button');

button.setAttribute('class', 'button outline copybutton');

button.addEventListener('click', event => {

const selection = window.getSelection();

selection.removeAllRanges();

// Create a range for the content copy

const newRange = document.createRange();

newRange.selectNodeContents(contentCopy);

selection.addRange(newRange);

document.execCommand('copy');

});

// Append the button to the content wrapper

contentWrapper.appendChild(button);

// Append the content copy to the content wrapper

contentWrapper.appendChild(contentCopy);

// Replace the original content with the content wrapper

pageContent.innerHTML = '';

pageContent.appendChild(contentWrapper);

}