UserScriptのテンプレート機能が使えなくなった

/scrasobox/テンプレートで紹介されているテンプレート機能が昨日(06/09)ごろから突然使えなくなりました．

ネットワーク，ブラウザ，プロジェクト等を切り替えてみましたが改善しません．

Twitter上で他にも同じトラブルに陥っている方を見かけました．

こちらで質問するのもお門違いかもしれませんが，Scrapboxの仕様変更の影響では？と思ったのでこちらで質問しました．

https://gyazo.com/9057c5bf3feef8452db305a05a6c5ea1

あまり詳しくないのですが，エラー結果から，offsetTopというプロパティが使われなくなったのでしょうか？

code:error

index.js:49 Uncaught TypeError: Cannot read property 'offsetTop' of undefined

at __loadTemplate (script.js?1623288513715:156)

at onClick (script.js?1623288513715:148)

at Object.ba (index.js:85)

at ja (index.js:85)

at ka (index.js:85)

at oa (index.js:85)

at lc (index.js:85)

at jc (index.js:85)

at mc (index.js:85)

at sc (index.js:85)

at we (index.js:85)

at Ma (index.js:85)

at Rc (index.js:85)

at id (index.js:85)

at i.unstable_runWithPriority (index.js:93)

at cg (index.js:85)

at Ga (index.js:85)

at gd (index.js:85)

at HTMLDocument.wrapped (index.js:49)

/scrasobox/テンプレートを使ってページを作成（UserScript版）#5a1206e896b904000070bda1を以下のように修正すると直るはずです

code:diff

+ const lastChar = $(line).find('span.char-index:last-of-type').last().get(0)

- const lastChar = $(line).find('spanclass^="c-"').last().get(0)

span[class^="c-"]をspan.char-indexに書き換えてください

span.char-index:last-of-typeじゃないとダメだった

解説

UserScriptのテンプレート機能が使えなくなった#60c34f281280f00000366799はline(scrapboxの行のDOM)の中から最後尾の文字のDOMを取得するコードです

scrapboxでは、文字の座標を計算するために1文字ずつで囲っています

cf. /shokai/Scrapboxの開発 - React & Websocketで作るリアルタイムWiki#583538dc97c29100000f559f

以前まではx(xは任意の文字、{index}は文字番号)というHTML要素だったので、span[class^="c-"]というCSS selectorで行lineに含まれるすべての文字を取得することができました

しかし、最近xという形にclassが変更されました

これはspan[class^="c-"]にマッチしない要素なので、span[class^="c-"]の検索結果($(line).find('span[class^="c-"]'))はなし(undefiend)となります

最終的にはconst lastChar = undefinedと評価されます

undefinedにoffsetTopというpropertyは存在しないため、以下の行でTypeError: Cannot read property 'offsetTop' of undefinedが発生してしまいます

__mimicClick(line.id, line.offsetWidth, lastChar.offsetTop + 10)

/scrasobox/テンプレートを使ってページを作成（UserScript版）#5a1206e896b904000070bda2

cf. /takker/scrapboxの文字spanの仕様変更に伴うUserScriptの修正

質問主< 助かりました！！解説も丁寧でとてもわかり易かったです．今後自分でUserScriptを組む参考にします．ありがとうございます🙏

/icons/よかった.icon

scrasoboxの窓辺madobe.iconです。解説いただきありがとうございます！こちらに気づかず放置しててすみません！現在は修正したコードを公開しているのでお試しを m(_ _)m

更新感謝です！takker.icon

/scrasobox/テンプレートを使ってページを作成（UserScript版）#5a1206e896b904000070bda1

おっと、span.char-indexではなくてspan.char-index:last-of-typeでしたね。解説間違えてました。