Skip to content

Commit

Permalink
fix copy button func
Browse files Browse the repository at this point in the history
  • Loading branch information
Amy Chen authored and Amy Chen committed Mar 7, 2024
1 parent 09d80c8 commit 2993375
Show file tree
Hide file tree
Showing 2 changed files with 126 additions and 53 deletions.
169 changes: 117 additions & 52 deletions src/components/report/CopyPaste.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import React, { Component } from "react";
import {
allowCopyClipboardItem,
writeHTMLToClipboard,
// writeHTMLToClipboard,
writeTextToClipboard,
} from "../../helpers/utility";

export default class CopyPaste extends Component {
Expand Down Expand Up @@ -39,18 +40,26 @@ export default class CopyPaste extends Component {
this.importScoreSummaryContent();
return;
}
const tempNode = this.contentAreaRef.current.cloneNode(true);
console.log("temp node? ", tempNode);
const originalElement = tempNode.querySelector(".original");
console.log("original ", originalElement);
this.setState(
{
contentHTML: originalElement.innerHTML,
contentHTML: this.getDefaultContent(),
},
() => {
this.contentAreaRef.current.innerHTML = this.state.contentHTML;
this.contentAreaRef.current.value = this.state.contentHTML;
}
);
// const tempNode = this.contentAreaRef.current.cloneNode(true);
// console.log("temp node? ", tempNode);
// const originalElement = tempNode.querySelector(".original");
// console.log("original ", originalElement);
// this.setState(
// {
// contentHTML: originalElement.innerHTML,
// },
// () => {
// this.contentAreaRef.current.innerHTML = this.state.contentHTML;
// }
// );
}
);
}
Expand All @@ -72,11 +81,16 @@ export default class CopyPaste extends Component {
alert("ClipboardItem API not supported by this browser");
return false;
}
writeHTMLToClipboard(this.state.contentHTML)
writeTextToClipboard(this.state.contentHTML)
.then(() => {
alert("Content copied to clipboard");
})
.catch((e) => alert("Unable to copy content to clipboard"));
// writeHTMLToClipboard(this.state.contentHTML)
// .then(() => {
// alert("Content copied to clipboard");
// })
// .catch((e) => alert("Unable to copy content to clipboard"));
}

getDefaultContent() {
Expand All @@ -85,17 +99,12 @@ export default class CopyPaste extends Component {
}

importScoreSummaryContent() {
let copyText = "";
const scorePanelElement = document.querySelector(".score-panel");
const scoreSummaryNode = scorePanelElement
? scorePanelElement.cloneNode(true)
: null;
if (scoreSummaryNode) {
const tableElement = scoreSummaryNode.querySelector("table");
if (tableElement) {
tableElement.style.fontFamily = "Ariel, sans-serif";
tableElement.setAttribute("width", "100%");
}
scoreSummaryNode.querySelector("h3").style.fontSize = "20px";
scoreSummaryNode.querySelectorAll("a").forEach((anchorElement) => {
const span = document.createElement("span");
span.innerText = anchorElement.innerText;
Expand All @@ -106,27 +115,85 @@ export default class CopyPaste extends Component {
span.innerText = ` (${imageElement.getAttribute("alt")}) `;
imageElement.replaceWith(span);
});
scoreSummaryNode.querySelectorAll("td, th").forEach((cellElement) => {
cellElement.style.padding = "8px";
const tableElement = scoreSummaryNode.querySelector("table");
if (tableElement) {
const headerCells = tableElement.querySelectorAll("th");
headerCells.forEach((cell, index) => {
const delimiter = " | ";
copyText +=
cell.innerText + (index > 0 && index < headerCells.length-1 ? delimiter : "");
});
copyText += "\r\n";
const rows = tableElement.querySelectorAll("tr");
rows.forEach((row, rindex) => {
const cells = row.querySelectorAll("td");
// const arrCells = [...cells].map(cell=> cell.innerText?.length??0);
// console.log("arrCells ", arrCells)
// const maxLength = Math.max(...arrCells);
// console.log("max length ", maxLength);
cells.forEach((cell, index) => {
//const delimiter = cell.innerText?.length >= maxLength ? " | " : [...Array(maxLength - cell.innerText?.length).keys()].map(item => " ").join("") + "| ";
const delimiter = " | ";
copyText +=
cell.innerText + (index < cells.length-1 ? delimiter : "");
});
if (rindex !== 0) copyText += "\r\n";
});
}
writeTextToClipboard(copyText).then((text) => {
this.setState(
{
contentHTML: this.getDefaultContent() + "\r\n\r\n" + copyText,
},
() => {
this.contentAreaRef.current.value = this.state.contentHTML;
}
);
});
this.setState(
{
contentHTML:
"<div style='font-family: ariel, sans-serif'>" +
"<div class='original'>" +
this.state.contentHTML +
"</div>" +
"<div class='score-summary-content'>" +
"<br/><br/>" +
scoreSummaryNode.outerHTML +
"</div>" +
"</div>",
},
() => {
this.contentAreaRef.current.innerHTML = this.state.contentHTML;
}
);
}

// const scorePanelElement = document.querySelector(".score-panel");
// const scoreSummaryNode = scorePanelElement
// ? scorePanelElement.cloneNode(true)
// : null;
// if (scoreSummaryNode) {
// const tableElement = scoreSummaryNode.querySelector("table");
// if (tableElement) {
// tableElement.style.fontFamily = "Ariel, sans-serif";
// tableElement.setAttribute("width", "100%");
// }
// scoreSummaryNode.querySelector("h3").style.fontSize = "20px";
// scoreSummaryNode.querySelectorAll("a").forEach((anchorElement) => {
// const span = document.createElement("span");
// span.innerText = anchorElement.innerText;
// anchorElement.replaceWith(span);
// });
// scoreSummaryNode.querySelectorAll("img").forEach((imageElement) => {
// const span = document.createElement("span");
// span.innerText = ` (${imageElement.getAttribute("alt")}) `;
// imageElement.replaceWith(span);
// });
// scoreSummaryNode.querySelectorAll("td, th").forEach((cellElement) => {
// cellElement.style.padding = "8px";
// });
// this.setState(
// {
// contentHTML:
// "<div style='font-family: ariel, sans-serif'>" +
// "<div class='original'>" +
// this.state.contentHTML +
// "</div>" +
// "<div class='score-summary-content'>" +
// "<br/><br/>" +
// scoreSummaryNode.outerHTML +
// "</div>" +
// "</div>",
// },
// () => {
// this.contentAreaRef.current.innerHTML = this.state.contentHTML;
// }
// );
// }
}
renderInstruction() {
const listItemStyle = {
Expand Down Expand Up @@ -188,11 +255,11 @@ export default class CopyPaste extends Component {
style={{
display: "flex",
flexDirection: "row",
// gap: "16px",
// gap: "16px",
flexWrap: "wrap",
// marginTop: "8px",
// marginBottom: "16px",
flex: 1
// marginTop: "8px",
// marginBottom: "16px",
flex: 1,
}}
>
<button
Expand Down Expand Up @@ -226,7 +293,7 @@ export default class CopyPaste extends Component {
backgroundColor: "#f4f3f3",
};
const boxAreaStyle = {
// height: "65%",
// height: "65%",
flex: 1,
padding: "16px",
border: "2px solid",
Expand All @@ -235,26 +302,24 @@ export default class CopyPaste extends Component {
width: "98%",
margin: "auto",
position: "relative",
"&:before": {
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: 1,
},
// whiteSpace: "pre",
};
return (
<React.Fragment>
<div style={containerStyle}>
{this.renderInstruction()}
<div
{/* <div
ref={this.contentAreaRef}
contentEditable="true"
style={boxAreaStyle}
onBlur={this.handleContentChange}
></div> */}
<textarea
ref={this.contentAreaRef}
// contentEditable="true"
style={boxAreaStyle}
onBlur={this.handleContentChange}
></div>
<div style={{marginBottom: "16px"}}>
></textarea>
<div style={{ marginBottom: "16px" }}>
<div
style={{
display: "flex",
Expand All @@ -265,7 +330,7 @@ export default class CopyPaste extends Component {
{this.renderButtonsGroup()}
{this.renderImportScoreSummaryCheckbox()}
</div>
{!allowCopyClipboardItem() && (
{/* {!allowCopyClipboardItem() && (
<p style={{ color: "#a81010" }}>
HEY, you are using a browser that does not support Copy action via
ClipboardItem API here. Please see{" "}
Expand All @@ -274,7 +339,7 @@ export default class CopyPaste extends Component {
</a>{" "}
for more information.
</p>
)}
)} */}
</div>
</div>
</React.Fragment>
Expand Down
10 changes: 9 additions & 1 deletion src/helpers/utility.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -404,6 +404,15 @@ export async function writeHTMLToClipboard(htmlContent) {
});
return writeBlobToClipboard(clipboardItem);
}

export async function writeTextToClipboard(text) {
if (!allowCopyClipboardItem())
return Promise.reject("ClipboardItem API is not supported");
const clipboardItem = new window.ClipboardItem({
"text/plain": new Blob([text], {type: "text/plain"}),
});
return writeBlobToClipboard(clipboardItem);
}
export async function writeBlobToClipboard(clipboardItem) {
if (!allowCopyClipboardItem())
return Promise.reject("ClipboardItem API is not supported");
Expand Down Expand Up @@ -442,4 +451,3 @@ export function toDate(stringDate) {
if (stringDate instanceof Date) return stringDate;
return new Date(stringDate);
}

0 comments on commit 2993375

Please sign in to comment.