複数のリンクをまとめて置換するUserScriptの置換editorV1

実装メモ

preactは使わず、生のDOMで実装する

変換終了後、背景クリックかOKボタンで画面をdialogを閉じる

code:test.ts

import { waitForConvertOrder } from "./converter.ts";

console.log(result);

code:converter.ts

/// <reference no-default-lib="true" />

/// <reference lib="esnext" />

/// <reference lib="dom" />

export interface Link {

before: string;

after: string;

}

export type ConvertOrder = {

convert: false;

} | {

convert: true;

links: Link[];

};

export const waitForConvertOrder = (links: string[]): Promise<ConvertOrder> => {

const root = document.createElement("div");

const shadowRoot = root.attachShadow({ mode: "open" });

const style = document.createElement("style");

shadowRoot.append(style);

const background = document.createElement("div");

background.id = "background";

background.classList.add("modal");

background.setAttribute("role", "dialog");

background.insertAdjacentHTML("beforeend", `

<div class="result">

<textarea class="editor"></textarea>

<div class="footer">

<button class="cancel">cancel</button>

<button class="replace">replace</button>

</div>

</div>

`);

shadowRoot.append(background);

const editor = background.querySelector(".editor") as HTMLTextAreaElement;

editor.rows = links.length;

editor.value = links.join("\n");

const cancel = background.querySelector(".cancel") as HTMLButtonElement;

const confirm = background.querySelector(".replace") as HTMLButtonElement;

const promise = new Promise<ConvertOrder>((resolve) => {

cancel.addEventListener("click", () => {

resolve({ convert: false });

root.remove();

});

confirm.addEventListener("click", () => {

const newLines = editor.value.split("\n");

resolve({

convert: true,

links: links.flatMap(

(before, i) => {

// 空文字の場合と、変化がない場合は飛ばす

}

),

});

root.remove();

});

});

document.body.append(root);

return promise;

};

code:app.css

@import "./font.css";

.modal {

position:fixed;

inset:0;

z-index:1050;

background-color:#000c;

display: flex;

flex-direction: column;

align-items: center;

row-gap: 10px;

padding: 10px;

}

.closed {

display: none;

}

.modal > * {

border: 1px solid rgba(0,0,0,.2);

border-radius: 6px;

}

@media (min-width: 768px) {

.modal {

padding: 30px 0;

--item-width: 600px;

}

}

.result {

padding: 15px;

width: calc(var(--item-width, 100%) - 30px);

overflow-y: scroll;

}