MariusBongarts

alert('Hello world from content.js');

MariusBongarts

alert('Hello world from medium-highlighter.js');

MariusBongarts

const highlightColor = "rgb(213, 234, 255)";

const template = `
  <template id="highlightTemplate">
    <span class="highlight" style="background-color: ${highlightColor}; display: inline"></span>
  </template>

  <button id="mediumHighlighter">
    <svg class="text-marker" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 544 512"><path d="M0 479.98L99.92 512l35.45-35.45-67.04-67.04L0 479.98zm124.61-240.01a36.592 36.592 0 0 0-10.79 38.1l13.05 42.83-50.93 50.94 96.23 96.23 50.86-50.86 42.74 13.08c13.73 4.2 28.65-.01 38.15-10.78l35.55-41.64-173.34-173.34-41.52 35.44zm403.31-160.7l-63.2-63.2c-20.49-20.49-53.38-21.52-75.12-2.35L190.55 183.68l169.77 169.78L530.27 154.4c19.18-21.74 18.15-54.63-2.35-75.13z"></path></svg>
  </button>

MariusBongarts

const styled = ({ display = "none", left = 0, top = 0 }) => `
  #mediumHighlighter {
    align-items: center;
    background-color: black;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    display: ${display};
    justify-content: center;
    left: ${left}px;

MariusBongarts

const mediumHighlighter = document.createElement("medium-highlighter");
document.body.appendChild(mediumHighlighter);

const setMarkerPosition = (markerPosition) =>
  mediumHighlighter.setAttribute(
    "markerPosition",
    JSON.stringify(markerPosition)
  );

setMarkerPosition({

MariusBongarts

"js": [
  "node_modules/@webcomponents/custom-elements/custom-elements.min.js",
  "medium-highlighter.js",
  "content.js"
]

MariusBongarts

const getSelectedText = () => window.getSelection().toString();

document.addEventListener("click", () => {
  if (getSelectedText().length > 0) {
    setMarkerPosition(getMarkerPosition());
  }
});

document.addEventListener("selectionchange", () => {
  if (getSelectedText().length === 0) {

MariusBongarts

type UserRole = 'ADMIN' | 'USER';

interface User {
    id: string;
    isActivated: boolean;
    role: UserRole;
}

MariusBongarts

export const userIsPermitted = (user: User) => user.isActivated && user.role === 'ADMIN';

MariusBongarts

async create(user: User, product: Product): Promise<Product | undefined> {
    if (userIsPermitted(user)) {
        console.log(`Create product.`);
        return this.db.create({user, product});
    }
    return undefined;
}