Vimっぽいカーソルを出すscript
2023-11-05
12:31:17 完成
https://gyazo.com/6ddb1719f3ed6342067c49894b9d30a9
11:12:15 css変数を直接style属性に入れ、<style>は変更しないようにする セレクタの変更が必要だから無理だ
10:46:46 リターン記号も出したくて、試行錯誤している 10:40:51 できた
code:script.ts
import { takeCursor } from "../scrapbox-userscript-std/dom.ts";
const staticStyle = document.createElement("link");
staticStyle.rel = "stylesheet";
staticStyle.href = "/api/code/takker/行末にリターン記号を表示するUserCSS/style.css";
document.head.append(staticStyle);
const style = document.createElement("style");
document.head.append(style);
let animationId: number | undefined;
const cursor = takeCursor();
cursor.addChangeListener(() => {
const { line, char } = cursor.getPosition();
const isLast = cursor.linesline.text.length === char; if (animationId !== undefined) cancelAnimationFrame(animationId);
animationId = requestAnimationFrame(() => {
style.textContent =
${isLast ? .line:nth-of-type(${line + 1}) :is(:not(.code-block.start) > .indent:not(:has(br), .cell-text, .tab), .text:not(:has(.indent)) span:has(> .char-index):not(:has(br)):last-of-type, .code-block-start > span:first-of-type, .line-title .text):after, .line:nth-of-type(${line + 1}) :is(.c-0:has(br.empty-char-index), .indent:has(> br), .cell:last-of-type .tab):before : .line:nth-of-type(${line + 1}) .c-${char}`} {
background-color: var(--vim-cursor-bg, hsla(38.8, 100%, 50%, 0.5));
}`;
});
});