コードブロック記法の横に何かを表示する
ScrapJupyterを実装する上で必要な機能
仕様
コードブロック記法のタイトルの横に何かを表示する
とりあえず/miyamonz/ScrapJupyter#604b5969385a920000dc7575を表示してみることにする
UserScript Eventsの発火で再描画する
どんな感じで実装できるか試してみる
最初からTypeScriptで書いてしまおう
DOM生成にはjsx-domを使う
やめた。何故かcompileできない
JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.エラーが出る
code:tsx
/// <reference no-default-lib="true"/>
/// <reference lib="esnext"/>
/// <reference lib="dom"/>
/** @jsx createElement */
import {createElement} from "https://esm.sh/jsx-dom@7.0.4";
export const Button = () => (
<div>
</div>
);
2021-08-25
14:34:20 調整終了
14:12:53 できた
code:js
script
fff
scrapbox
code:js
secrere
code:test.ts
import React from "https://esm.sh/react";
分割を試す
code:test.ts
console.log(React)
code:script.ts
/// <reference no-default-lib="true"/>
/// <reference lib="esnext"/>
/// <reference lib="dom"/>
import {
eventName,
Scrapbox,
} from "https://raw.githubusercontent.com/scrapbox-jp/types/0.0.5/mod.ts";
declare const scrapbox: Scrapbox;
type File = {
filename?: string;
lang: string;
/** コードブロックの開始行のid */ startIds: string[];
lines: string[];
};
const callback = () => {
const files = getCodeFiles();
document.querySelectorAll('data-id="jupyter-button"').forEach((div) =>
div.remove()
);
files.forEach((file) => {
file.startIds.forEach((id) => {
const line = document.getElementById(L${id});
line?.insertBefore(
createButton({
onClick: ({ target }) => {
(target as HTMLDivElement).style.color = "red";
alert(file.lines.join("\n"));
setTimeout(
() => (target as HTMLDivElement).style.removeProperty("color"),
1000,
);
},
}),
line?.firstElementChild,
);
});
});
};
callback();
scrapbox.addListener("lines:changed" as eventName, callback);
function getCodeFiles() {
const codeBlocks =
scrapbox.Page.lines?.flatMap((line) => "codeBlock" in line ? line : []) ??
[];
return codeBlocks.reduce((acc: File[], { codeBlock, text, id }) => {
const sameFileIndex = acc.findIndex(({ filename }) =>
filename !== undefined && filename === codeBlock.filename
);
// code blockの先頭かつ新しいコードブロックのときのみ新しいfileを追加する
if (codeBlock.start && sameFileIndex < 0) {
return [...acc, {
filename: codeBlock.filename,
lang: codeBlock.lang,
startIds: id,
lines: [],
}];
}
if (codeBlock.start) {
acc.at(sameFileIndex)?.startIds?.push?.(id);
} else {
// 既存のコードブロックもしくは末尾のコードブロックに追記する
acc.at(sameFileIndex)?.lines?.push?.(text);
}
return acc;
}, []);
}
function createButton(props: { onClick: (event: MouseEvent) => void }) {
const div = document.createElement("div");
div.style.position = "absolute";
div.style.zIndex = "900";
div.textContent = "▶";
div.dataset.id = "jupyter-button";
div.addEventListener("click", props.onClick);
return div;
}
code:script.js
var l=()=>{let s=a();document.querySelectorAll('data-id="jupyter-button"').forEach(e=>e.remove()),s.forEach(e=>{e.startIds.forEach(t=>{let r=document.getElementById(L${t});r?.insertBefore(d({onClick:({target:n})=>{n.style.color="red",alert(e.lines.join(`
`)),setTimeout(()=>n.style.removeProperty("color"),1e3)}}),r?.firstElementChild)})})};l();scrapbox.addListener("lines:changed",l);function a(){return(scrapbox.Page.lines?.flatMap(e=>"codeBlock"in e?e:[])??[]).reduce((e,{codeBlock:t,text:r,id:n})=>{let o=e.findIndex(({filename:i})=>i!==void 0&&i===t.filename);return t.start&&o<0?[...e,{filename:t.filename,lang:t.lang,startIds:n,lines:[]}]:(t.start?e.at(o)?.startIds?.push?.(n):e.at(o)?.lines?.push?.(r),e)},[])}function d(s){let e=document.createElement("div");return e.style.position="absolute",e.style.left="-1em",e.style.zIndex="900",e.textContent="▶",e.dataset.id="jupyter-button",e.addEventListener("click",s.onClick),e}
//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsic2NyaXB0LnRzIl0sCiAgInNvdXJjZXNDb250ZW50IjogWyIvLy8gPHJlZmVyZW5jZSBuby1kZWZhdWx0LWxpYj1cInRydWVcIi8+XG4vLy8gPHJlZmVyZW5jZSBsaWI9XCJlc25leHRcIi8+XG4vLy8gPHJlZmVyZW5jZSBsaWI9XCJkb21cIi8+XG5cbmltcG9ydCB7XG4gIGV2ZW50TmFtZSxcbiAgU2NyYXBib3gsXG59IGZyb20gXCJodHRwczovL3Jhdy5naXRodWJ1c2VyY29udGVudC5jb20vc2NyYXBib3gtanAvdHlwZXMvMC4wLjUvbW9kLnRzXCI7XG5kZWNsYXJlIGNvbnN0IHNjcmFwYm94OiBTY3JhcGJveDtcblxudHlwZSBGaWxlID0ge1xuICBmaWxlbmFtZT86IHN0cmluZztcbiAgbGFuZzogc3RyaW5nO1xuICAvKiog44Kz44O844OJ44OW44Ot44OD44Kv44Gu6ZaL5aeL6KGM44GuaWQgKi8gc3RhcnRJZHM6IHN0cmluZ1tdO1xuICBsaW5lczogc3RyaW5nW107XG59O1xuXG5jb25zdCBjYWxsYmFjayA9ICgpID0+IHtcbiAgY29uc3QgZmlsZXMgPSBnZXRDb2RlRmlsZXMoKTtcbiAgZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbCgnW2RhdGEtaWQ9XCJqdXB5dGVyLWJ1dHRvblwiXScpLmZvckVhY2goKGRpdikgPT5cbiAgICBkaXYucmVtb3ZlKClcbiAgKTtcbiAgZmlsZXMuZm9yRWFjaCgoZmlsZSkgPT4ge1xuICAgIGZpbGUuc3RhcnRJZHMuZm9yRWFjaCgoaWQpID0+IHtcbiAgICAgIGNvbnN0IGxpbmUgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZChgTCR7aWR9YCk7XG4gICAgICBsaW5lPy5pbnNlcnRCZWZvcmUoXG4gICAgICAgIGNyZWF0ZUJ1dHRvbih7XG4gICAgICAgICAgb25DbGljazogKHsgdGFyZ2V0IH0pID0+IHtcbiAgICAgICAgICAgICh0YXJnZXQgYXMgSFRNTERpdkVsZW1lbnQpLnN0eWxlLmNvbG9yID0gXCJyZWRcIjtcbiAgICAgICAgICAgIGFsZXJ0KGZpbGUubGluZXMuam9pbihcIlxcblwiKSk7XG4gICAgICAgICAgICBzZXRUaW1lb3V0KFxuICAgICAgICAgICAgICAoKSA9PiAodGFyZ2V0IGFzIEhUTUxEaXZFbGVtZW50KS5zdHlsZS5yZW1vdmVQcm9wZXJ0eShcImNvbG9yXCIpLFxuICAgICAgICAgICAgICAxMDAwLFxuICAgICAgICAgICAgKTtcbiAgICAgICAgICB9LFxuICAgICAgICB9KSxcbiAgICAgICAgbGluZT8uZmlyc3RFbGVtZW50Q2hpbGQsXG4gICAgICApO1xuICAgIH0pO1xuICB9KTtcbn07XG5jYWxsYmFjaygpO1xuc2NyYXBib3guYWRkTGlzdGVuZXIoXCJsaW5lczpjaGFuZ2VkXCIgYXMgZXZlbnROYW1lLCBjYWxsYmFjayk7XG5cbmZ1bmN0aW9uIGdldENvZGVGaWxlcygpIHtcbiAgY29uc3QgY29kZUJsb2NrcyA9XG4gICAgc2NyYXBib3guUGFnZS5saW5lcz8uZmxhdE1hcCgobGluZSkgPT4gXCJjb2RlQmxvY2tcIiBpbiBsaW5lID8gW2xpbmVdIDogW10pID8/XG4gICAgICBbXTtcbiAgcmV0dXJuIGNvZGVCbG9ja3MucmVkdWNlKChhY2M6IEZpbGVbXSwgeyBjb2RlQmxvY2ssIHRleHQsIGlkIH0pID0+IHtcbiAgICBjb25zdCBzYW1lRmlsZUluZGV4ID0gYWNjLmZpbmRJbmRleCgoeyBmaWxlbmFtZSB9KSA9PlxuICAgICAgZmlsZW5hbWUgIT09IHVuZGVmaW5lZCAmJiBmaWxlbmFtZSA9PT0gY29kZUJsb2NrLmZpbGVuYW1lXG4gICAgKTtcbiAgICAvLyBjb2RlIGJsb2Nr44Gu5YWI6aCt44GL44Gk5paw44GX44GE44Kz44O844OJ44OW44Ot44OD44Kv44Gu44Go44GN44Gu44G/5paw44GX44GEZmlsZeOCkui/veWKoOOBmeOCi1xuICAgIGlmIChjb2RlQmxvY2suc3RhcnQgJiYgc2FtZUZpbGVJbmRleCA8IDApIHtcbiAgICAgIHJldHVybiBbLi4uYWNjLCB7XG4gICAgICAgIGZpbGVuYW1lOiBjb2RlQmxvY2suZmlsZW5hbWUsXG4gICAgICAgIGxhbmc6IGNvZGVCbG9jay5sYW5nLFxuICAgICAgICBzdGFydElkczogW2lkXSxcbiAgICAgICAgbGluZXM6IFtdLFxuICAgICAgfV07XG4gICAgfVxuXG4gICAgaWYgKGNvZGVCbG9jay5zdGFydCkge1xuICAgICAgYWNjLmF0KHNhbWVGaWxlSW5kZXgpPy5zdGFydElkcz8ucHVzaD8uKGlkKTtcbiAgICB9IGVsc2Uge1xuICAgICAgLy8g5pei5a2Y44Gu44Kz44O844OJ44OW44Ot44OD44Kv44KC44GX44GP44Gv5pyr5bC+44Gu44Kz44O844OJ44OW44Ot44OD44Kv44Gr6L+96KiY44GZ44KLXG4gICAgICBhY2MuYXQoc2FtZUZpbGVJbmRleCk/LmxpbmVzPy5wdXNoPy4odGV4dCk7XG4gICAgfVxuXG4gICAgcmV0dXJuIGFjYztcbiAgfSwgW10pO1xufVxuXG5mdW5jdGlvbiBjcmVhdGVCdXR0b24ocHJvcHM6IHsgb25DbGljazogKGV2ZW50OiBNb3VzZUV2ZW50KSA9PiB2b2lkIH0pIHtcbiAgY29uc3QgZGl2ID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudChcImRpdlwiKTtcbiAgZGl2LnN0eWxlLnBvc2l0aW9uID0gXCJhYnNvbHV0ZVwiO1xuICBkaXYuc3R5bGUubGVmdCA9IFwiLTFlbVwiO1xuICBkaXYuc3R5bGUuekluZGV4ID0gXCI5MDBcIjtcbiAgZGl2LnRleHRDb250ZW50ID0gXCLilrZcIjtcbiAgZGl2LmRhdGFzZXQuaWQgPSBcImp1cHl0ZXItYnV0dG9uXCI7XG4gIGRpdi5hZGRFdmVudExpc3RlbmVyKFwiY2xpY2tcIiwgcHJvcHMub25DbGljayk7XG4gIHJldHVybiBkaXY7XG59XG4iXSwKICAibWFwcGluZ3MiOiAiQUFpQkEsR0FBTSxHQUFXLElBQU0sQ0FDckIsR0FBTSxHQUFRLElBQ2QsU0FBUyxpQkFBaUIsOEJBQThCLFFBQVEsQUFBQyxHQUMvRCxFQUFJLFVBRU4sRUFBTSxRQUFRLEFBQUMsR0FBUyxDQUN0QixFQUFLLFNBQVMsUUFBUSxBQUFDLEdBQU8sQ0FDNUIsR0FBTSxHQUFPLFNBQVMsZUFBZSxJQUFJLEtBQ3pDLEdBQU0sYUFDSixFQUFhLENBQ1gsUUFBUyxDQUFDLENBQUUsWUFBYSxDQUN2QixBQUFDLEVBQTBCLE1BQU0sTUFBUSxNQUN6QyxNQUFNLEVBQUssTUFBTSxLQUFLO0FBQUEsSUFDdEIsV0FDRSxJQUFPLEVBQTBCLE1BQU0sZUFBZSxTQUN0RCxRQUlOLEdBQU0sd0JBS2QsSUFDQSxTQUFTLFlBQVksZ0JBQThCLEdBRW5ELFlBQXdCLENBSXRCLE1BQU8sQUFGTCxVQUFTLEtBQUssT0FBTyxRQUFRLEFBQUMsR0FBUyxhQUFlLEdBQU8sQ0FBQyxHQUFRLEtBQ3BFLElBQ2MsT0FBTyxDQUFDLEVBQWEsQ0FBRSxZQUFXLE9BQU0sUUFBUyxDQUNqRSxHQUFNLEdBQWdCLEVBQUksVUFBVSxDQUFDLENBQUUsY0FDckMsSUFBYSxRQUFhLElBQWEsRUFBVSxVQUduRCxNQUFJLEdBQVUsT0FBUyxFQUFnQixFQUM5QixDQUFDLEdBQUcsRUFBSyxDQUNkLFNBQVUsRUFBVSxTQUNwQixLQUFNLEVBQVUsS0FDaEIsU0FBVSxDQUFDLEdBQ1gsTUFBTyxLQUlYLENBQUksRUFBVSxNQUNaLEVBQUksR0FBRyxJQUFnQixVQUFVLE9BQU8sR0FHeEMsRUFBSSxHQUFHLElBQWdCLE9BQU8sT0FBTyxHQUdoQyxJQUNOLElBR0wsV0FBc0IsRUFBaUQsQ0FDckUsR0FBTSxHQUFNLFNBQVMsY0FBYyxPQUNuQyxTQUFJLE1BQU0sU0FBVyxXQUNyQixFQUFJLE1BQU0sS0FBTyxPQUNqQixFQUFJLE1BQU0sT0FBUyxNQUNuQixFQUFJLFlBQWMsSUFDbEIsRUFBSSxRQUFRLEdBQUssaUJBQ2pCLEVBQUksaUJBQWlCLFFBQVMsRUFBTSxTQUM3QiIsCiAgIm5hbWVzIjogW10KfQo=
#2021-08-25 12:16:37