Scrapboxのページの差分書き換えテスト

2021-10-28

20:58:57 タイトルを書き換えるとバグる

タイトル対応は後日考える

21:04:57 複数行でバグってる

全ての追加と削除のペアを変更に変換しきれていない

22:20:13 いい感じ

適当に書いたメモ

書き込みますよ

あれ？、書き込まれない？

書き込みますよ

真ん中にも書き込める

リンクも書き込める

takker

ちゃんと書き込まれている

複数行

を一気に書き込むことも

もちろんできる

後日対応すること

タイトルの書き換え

descriptionの更新

linksの更新

これは難しいかも

bundled code

元のコード

code:app.ts

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

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

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

declare const scrapbox: Scrapbox;

const project = "takker";

const title = "差分書き込みテスト用ページ";

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

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

shadowRoot.innerHTML = `

<style>

:host {

position: fixed;

left: 0;

bottom: 0;

z-index: 9999;

text-decoration: none;

background-color: var(--page-bg);

color: var(--page-text-color);

border: solid 1px var(--telomere-unread);

border-radius: 4px;

padding: 8px;

margin: 10px;

}

button {

display: inline-block;

}

</style>

<div>

<button id="button">x</button>

<span id="title"></span>

</div>

<textarea id="editor"></textarea>

`;

document.body.append(div);

const { patch, cleanup } = await joinPageRoom(project, title);

console.info("Connected to scrapbox.io");

const editor = shadowRoot.getElementById("editor")! as HTMLTextAreaElement;

const update = throttle((text: string) =>

{ trailing: true }

);

editor.addEventListener("input", () => update(editor.value));

console.info("Start patching");

shadowRoot.getElementById("title")!.insertAdjacentHTML(

"beforeend",

);

shadowRoot.getElementById("button")!.onclick = () => {

console.info("End patching");

cleanup();

div.remove();

};