icon-suggestion
UserScript.icon
アイコンを高速に挿入できる UserScript です。 https://gyazo.com/9bb62111ab9e6ccc924f3cdd0ee5cd1d
基本的な使い方
Ctrl+Lで icon-suggestion を起動します
https://gyazo.com/fa8e2b97e0cf22bcaa8e7670fe1032bd
ポップアップにはページ内に埋め込まれているアイコンが表示されます
検索ボックス/ポップアップの操作方法
文字入力でアイコンを絞り込み
Tab/Shift+Tabでアイコンを選択
Enterで選択中のアイコンを挿入
ESCで icon-suggestion を終了する
導入方法
1. User Settings > User Scriptにチェック
https://gyazo.com/4b3a24a171955dff8a1fffcd2409d399
2. インストールしたいプロジェクトの自分のユーザページに以下のブロックを貼り付ける
code:install.js
import { registerIconSuggestion } from '/api/code/customize/icon-suggestion/script.js';
registerIconSuggestion();
よくある質問
ページに埋め込まれていないアイコンもポップアップに表示したい
「プリセットアイコン」という機能を使うと実現できます
プリセットアイコンとは:
ページに埋め込まれていなくてもポップアップに表示される特別なアイコンのこと
registerIconSuggestionのpresetIconsオプションで登録できる
カスタマイズ例:
code:option.js
import {
registerIconSuggestion,
Icon,
fetchMemberPageIcons,
fetchRelatedPageIconsByHashTag,
} from '/api/code/customize/icon-suggestion/script.js';
registerIconSuggestion({
presetIcons: [
// new Icon(projectName, pageTitle) でアイコンを登録
new Icon('icons', 'done'), // /icons/done.icon
new Icon('icons', 'check'), // /icons/check.icon
// fetchMemberPageIcons(projectName) を使うと、
// プロジェクトに所属するメンバーのアイコン全てを一括で登録できます。
// 注意: そのプロジェクトにアクセスする権限を持っていないとエラーになります
fetchMemberPageIcons('customize'), // customize プロジェクトのメンバーのアイコンを一括で登録
// fetchRelatedPageIconsByHashTag(projectName, hashTag) を使うと、
// 指定したプロジェクトのハッシュタグにリンクされている、全てのページのアイコンを一括で登録できます。
// 注意: そのプロジェクトにアクセスする権限を持っていないとエラーになります
fetchRelatedPageIconsByHashTag('customize', 'member'),
],
});
これで以下のようにページに埋め込まれていないアイコンを表示できます
https://gyazo.com/765d87992a8b8f010314c6cef3092cc8
カスタマイズ例にもある通り、以下のユーティリティが組み込みで提供されています
new Icon(projectName: string, pageTitle: string)
fetchMemberPageIcons(projectName: string)
fetchRelatedPageIconsByHashTag(projectName: string, hashTag: string)
fetchMemberPageIcons ではノイズが多すぎるので、もっとノイズの少ないメンバーのアイコンのリストアップ方法がほしい
参加するユーザが定期的に入れ替わるようなプロジェクトでは、fetchMemberPageIconsではノイズが多すぎるかもしれません
古いユーザのアイコンを挿入する機会は殆どないのに、提案一覧に出てきてしまう
解決策として、アクティブなメンバーのページへリンクしたページを作り、そのページから辿れるユーザのみをプリセットアイコンとして登録する、という方法があります
2. fetchRelatedPageIconsByHashTag('mizdra', 'active-member')でプリセットアイコンを登録する
検索ボックスに入力中の文字列をアイコンとして挿入したい
Alt+Enter もしくは Meta+Enter の押下で入力中の文字列をアイコンとして挿入できます
補足: Meta キーについて
Windows では Windowsロゴのキー、Mac では Command キーに相当します
キーの割当をカスタマイズしたい
以下のオプションをregisterIconSuggestionに渡すと、キーの割当をカスタマイズできます
isLaunchIconSuggestionKey
isExitIconSuggestionKey
カスタマイズ例:
code:option.js
import { registerIconSuggestion } from '/api/code/customize/icon-suggestion/script.js';
registerIconSuggestion({
// Ctrl+Space で icon-suggestion を起動する
isLaunchIconSuggestionKey: (e) => {
// 引数で KeyboardEvent を受け取ることができる
return e.key === ' ' && e.ctrlKey && !e.shiftKey && !e.altKey && !e.metaKey;
},
// Escape or Ctrl+G で icon-suggestion を終了する
isExitIconSuggestionKey: (e) => {
const isEscape = e.key === 'Escape' && !e.ctrlKey && !e.shiftKey && !e.altKey && !e.metaKey;
const isCtrlG = e.key === 'g' && e.ctrlKey && !e.shiftKey && !e.altKey && !e.metaKey;
return isEscape || isCtrlG;
},
});
アイコンの絞り込みのアルゴリズムを変更したい
matcher オプションで変更可能です
code:option.js
import {
registerIconSuggestion,
// 曖昧一致による matcher
fuzzyMatcher,
// 前方一致による matcher
forwardMatcher,
// 部分一致による matcher
partialMatcher,
// 前方一致、部分一致、曖昧一致を組み合わせた matcher
forwardPartialFuzzyMatcher,
} from '/api/code/customize/icon-suggestion/script.js';
registerIconSuggestion({
matcher: forwardMatcher,
});
カスタマイズ例にもある通り、以下のユーティリティが組み込みで提供されています
fuzzyMatcher
forwardMatcher
partialMatcher
forwardPartialFuzzyMatcher
matcherオプションのデフォルト値はforwardPartialFuzzyMatcherです
バグを見つけたので報告したい
もちろん 修正 PR も大歓迎です
機能の追加をリクエストしたい
もちろん PR も大歓迎です
高度なカスタマイズ (上級者向け)
icon-suggestion では「自由を望む者には可能な限りの自由を」の精神で、icon-suggestion の挙動をプログラマブルにカスタマイズするための API を提供しています。利用には JavaScript を使ったプログラミングの知識がそれなりに要求されます。上級者向けの機能という位置づけであるため、使い方に関する質問は一切受け付けていません。また、これらの API は予告なく変更される可能性があります。
presetIcons オプションに渡すユーティリティを自作したい
PresetIconsItem型を満たす関数を実装して下さい
組み込みのユーティリティやテストを参考にすると良いです
かなり自由度が高いですが、勿論なんでもできる訳ではありません
scrapbox は CSP で保護されているため、どこかのオリジンにあるデータを fetch してプリセットアイコンを生成...といったことはできません ハマりがちなので注意して下さい
mizdra.icon 面白いのできたら教えて下さい
matcher を自作したい
Matcher型を満たす関数を実装して下さい
どう実装すれば良いかは、組み込みの matcher のソースコードなどを見て察して下さい
items引数で渡ってきた以外のアイコンも返そうと思えば返せる
こういう matcher を書けば常に/mizdra/赤ちゃん.iconをポップアップに表示できる
code:options.js
import {
Icon,
forwardPartialFuzzyMatcher,
uniqueIcons,
} from '/api/code/customize/icon-suggestion/script.js';
export function babyMatcher(options) {
return uniqueIcons([
new Icon('mizdra', '赤ちゃん'),
...forwardPartialFuzzyMatcher(options),
]);
}
uniqueIconsというユーティリティも提供されています
重複するアイコンを取り除くためにお使い下さい
mizdra.icon 面白いのできたら教えて下さい
更新履歴
2026/3/15: v6.0.1
バグ修正
文字数が多くて折り返されてる行でフォーカス位置がおかしくなる問題を修正: #136 エディタの横幅をはみ出る行でフォーカス位置がおかしくなる問題を修正: #137 その他
2026/3/15: v6.0.0
破壊的変更
削除された API を使用していることを警告する仕組みを廃止: #117 scrapbox, editor オプションを削除: #118 scrapbox.addListener がないバージョンの Consense 向けの workaround を削除: #119 defaultIsShownPresetIcons オプションを削除: #120 クエリを [query.icon] として挿入する機能を廃止: #123 isInsertQueryAsIconKeyオプションも廃止されました
ポップアップに表示されるアイコンを最大8件に制限: #129 バグ修正
アイコン挿入後に文字が入力できなくなる問題を修正: #125 画面サイズが小さい時に表示崩れする問題を修正: #128 共同編集中にアイコンの挿入位置がズレる問題を修正: #131 ページリストからページに遷移した時 icon-suggestion の起動に失敗する問題を修正: #132 icon-suggestion を閉じた時に誤った位置にフォーカスされる問題を修正: #134 その他
コードの容量が 39.14KB から 22.06KB になりました
2021/9/20: v5.0.0
isSuggestionOpenKeyDown を isLaunchIconSuggestionKey に rename
isSuggestionCloseKeyDown を isExitIconSuggestionKey に rename
isInsertQueryKeyDown を isInsertQueryAsIconKey に rename
defaultSuggestPresetIcons を defaultIsShownPresetIcons に rename
matcher からプリセットアイコンとページに埋め込まれているアイコンを区別できるように: #89 この変更に伴い matcher の型も変更されました
2021/9/19: v4.0.0
検索ボックスにフォーカスされない問題を修正: #73 デフォルトの matcher の挙動を変更: #76 検索ボックスに入力中の文字列をアイコンとして挿入する方法を変更: #83 defaultSuggestPresetIcons のデフォルト値を true に: #85 2021/7/9: v3.3.1
Enterprise 版で動作しない問題を修正: #70 2021/7/4: v3.3
プロジェクトのホームや、他のプロジェクトのエディタページから遷移してきた後にCtrl+Lを押すと、suggest box が開かない問題を修正: #66 Safari で IME の確定時にアイコンが挿入されてしまう問題を修正: #67 アイコンのプロジェクト名の省略条件を変更: #68 2021/6/5: v3.2
suggest されるアイコンのプロジェクト名ができるだけ省略されるように: #58 アイコンのページタイトルと画像が一致しないことがある問題を修正: #60 2021/6/3: v3.1
Thanks @takker99 !
2021/5/30: v3.0
presetIcons オプションに string 型が渡せなくなりました: #42 string 型を渡している場合は警告が出るようになりました
Iconがexportされるようになりました: #43 fetchMemberPageIconsがexportされるようになりました: #44 #47 fetchRelatedPageIconsByHashTagがexportされるようになりました: #46 2021/5/29: v2.1
isSuggestionCloseKeyDownオプションを追加しました: #37 Ctrl+L でプリセットアイコンの表示・非表示が切り替えられない問題を修正しました: #36 presetIconsに渡せる要素の型 (PresetIconsItem) が増えました: #38 2021/5/27: v2.0
ポップアップを開く度に最新のアイコンを suggest するように
以前のバージョンでは suggest されたアイコンはキャッシュされ、Ctrl+R を押すか、リロードするまでアイコンリストが更新されませんでした
本バージョンから、ポップアップを開く度に最新のアイコンリストが表示されるようになります
isSuggestionReloadKeyDownオプションが廃止されました
アイコンリストの手動更新が不要になったため
キーワードにマッチするアイコンが無い場合に Enter を押すと、[入力したキーワード.icon]が入力されるようになりました
presetIconsオプションでプリセットアイコンを登録できるようになりました
好きなアイコンをプリセットとして登録しておくと、suggest box表示中にCtrl+Lを押した際に suggest されます
Firefox でアイコンの挿入ができない問題を修正
2020/6: v1
リポジトリ
ソースコード
code:script.js
var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),s=(e,i,o,s)=>{if(i&&typeof i==object||typeof i==function)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=cl,!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>ie).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},c=(n,r,a)=>(a=n==null?{}:e(i(n)),s(r||!n||!n.__esModule?t(a,default,{value:n,enumerable:!0}):a,n)),l,u,d,f,p,m,h,g,_,v,y,b={},x=[],S=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|inech|zoo|^ord|itera/i,C=Array.isArray;function w(e,t){for(var n in t)en=tn;return e}function T(e){e&&e.parentNode&&e.parentNode.removeChild(e)}function E(e,t,n){var r,i,a,o={};for(a in t)a==key?r=ta:a==ref?i=ta:oa=ta;if(arguments.length>2&&(o.children=arguments.length>3?l.call(arguments,2):n),typeof e==function&&e.defaultProps!=null)for(a in e.defaultProps)oa===void 0&&(oa=e.defaultPropsa);return D(e,o,r,i,null)}function D(e,t,n,r,i){var a={type:e,props:t,key:n,ref:r,__k:null,__:null,__b:0,__e:null,__c:null,constructor:void 0,__v:i??++d,__i:-1,__u:0};return i==null&&u.vnode!=null&&u.vnode(a),a}function O(e){return e.children}function k(e,t){this.props=e,this.context=t}function A(e,t){if(t==null)return e.__?A(e.__,e.__i+1):null;for(var n;t<e.__k.length;t++)if((n=e.__kt)!=null&&n.__e!=null)return n.__e;return typeof e.type==function?A(e):null}function j(e){if(e.__P&&e.__d){var t=e.__v,n=t.__e,r=[],i=[],a=w({},t);a.__v=t.__v+1,u.vnode&&u.vnode(a),F(e.__P,a,t,e.__n,e.__P.namespaceURI,32&t.__u?n:null,r,n??A(t),!!(32&t.__u),i),a.__v=t.__v,a.__.__ka.__i=a,ce(r,a,i),t.__e=t.__=null,a.__e!=n&&M(a)}}function M(e){if((e=e.__)!=null&&e.__c!=null)return e.__e=e.__c.base=null,e.__k.some(function(t){if(t!=null&&t.__e!=null)return e.__e=e.__c.base=t.__e}),M(e)}function ee(e){(!e.__d&&(e.__d=!0)&&f.push(e)&&!N.__r++||p!=u.debounceRendering)&&((p=u.debounceRendering)||m)(N)}function N(){for(var e,t=1;f.length;)f.length>t&&f.sort(h),e=f.shift(),t=f.length,j(e);N.__r=0}function te(e,t,n,r,i,a,o,s,c,l,u){var d,f,p,m,h,g,_,v=r&&r.__k||x,y=t.length;for(c=ne(n,t,v,c,y),d=0;d<y;d++)(p=n.__kd)!=null&&(f=p.__i!=-1&&vp.__i||b,p.__i=d,g=F(e,p,f,i,a,o,s,c,l,u),m=p.__e,p.ref&&f.ref!=p.ref&&(f.ref&&de(f.ref,null,p),u.push(p.ref,p.__c||m,p)),h==null&&m!=null&&(h=m),(_=!!(4&p.__u))||f.__k===p.__k?c=re(p,c,e,_):typeof p.type==function&&g!==void 0?c=g:m&&(c=m.nextSibling),p.__u&=-7);return n.__e=h,c}function ne(e,t,n,r,i){var a,o,s,c,l,u=n.length,d=u,f=0;for(e.__k=Array(i),a=0;a<i;a++)(o=ta)!=null&&typeof o!=boolean&&typeof o!=function?(typeof o==string||typeof o==number||typeof o==bigint||o.constructor==String?o=e.__ka=D(null,o,null,null,null):C(o)?o=e.__ka=D(O,{children:o},null,null,null):o.constructor===void 0&&o.__b>0?o=e.__ka=D(o.type,o.props,o.key,o.ref?o.ref:null,o.__v):e.__ka=o,c=a+f,o.__=e,o.__b=e.__b+1,s=null,(l=o.__i=ie(o,n,c,d))!=-1&&(d--,(s=nl)&&(s.__u|=2)),s==null||s.__v==null?(l==-1&&(i>u?f--:i<u&&f++),typeof o.type!=function&&(o.__u|=4)):l!=c&&(l==c-1?f--:l==c+1?f++:(l>c?f--:f++,o.__u|=4))):e.__ka=null;if(d)for(a=0;a<u;a++)(s=na)!=null&&!(2&s.__u)&&(s.__e==r&&(r=A(s)),fe(s,s));return r}function re(e,t,n,r){var i,a;if(typeof e.type==function){for(i=e.__k,a=0;i&&a<i.length;a++)ia&&(ia.__=e,t=re(ia,t,n,r));return t}e.__e!=t&&(r&&(t&&e.type&&!t.parentNode&&(t=A(e)),n.insertBefore(e.__e,t||null)),t=e.__e);do t&&=t.nextSibling;while(t!=null&&t.nodeType==8);return t}function ie(e,t,n,r){var i,a,o,s=e.key,c=e.type,l=tn,u=l!=null&&(2&l.__u)==0;if(l===null&&s==null||u&&s==l.key&&c==l.type)return n;if(r>(u?1:0)){for(i=n-1,a=n+1;i>=0||a<t.length;)if((l=to=i>=0?i--:a++)!=null&&!(2&l.__u)&&s==l.key&&c==l.type)return o}return-1}function ae(e,t,n){t0==-?e.setProperty(t,n??):et=n==null?:typeof n!=number||S.test(t)?n:n+px}function P(e,t,n,r,i){var a,o;n:if(t==style)if(typeof n==string)e.style.cssText=n;else{if(typeof r==string&&(e.style.cssText=r=),r)for(t in r)n&&t in n||ae(e.style,t,);if(n)for(t in n)r&&nt==rt||ae(e.style,t,nt)}else if(t0==o&&t1==n)a=t!=(t=t.replace(g,$1)),o=t.toLowerCase(),t=o in e||t==onFocusOut||t==onFocusIn?o.slice(2):t.slice(2),e.l||={},e.lt+a=n,n?r?n.u=r.u:(n.u=_,e.addEventListener(t,a?y:v,a)):e.removeEventListener(t,a?y:v,a);else{if(i==http://www.w3.org/2000/svg)t=t.replace(/xlink(H|:h)/,h).replace(/sName$/,s);else if(t!=width&&t!=height&&t!=href&&t!=list&&t!=form&&t!=tabIndex&&t!=download&&t!=rowSpan&&t!=colSpan&&t!=role&&t!=popover&&t in e)try{et=n??;break n}catch{}typeof n==function||(n==null||!1===n&&t4!=-?e.removeAttribute(t):e.setAttribute(t,t==popover&&n==1?:n))}}function oe(e){return function(t){if(this.l){var n=this.lt.type+e;if(t.t==null)t.t=_++;else if(t.t<n.u)return;return n(u.event?u.event(t):t)}}}function F(e,t,n,r,i,a,o,s,c,l){var d,f,p,m,h,g,_,v,y,b,S,E,D,A,j,M=t.type;if(t.constructor!==void 0)return null;128&n.__u&&(c=!!(32&n.__u),a=s=t.__e=n.__e),(d=u.__b)&&d(t);n:if(typeof M==function)try{if(v=t.props,y=prototypein M&&M.prototype.render,b=(d=M.contextType)&&rd.__c,S=d?b?b.props.value:d.__:r,n.__c?_=(f=t.__c=n.__c).__=f.__E:(y?t.__c=f=new M(v,S):(t.__c=f=new k(v,S),f.constructor=M,f.render=pe),b&&b.sub(f),f.state||={},f.__n=r,p=f.__d=!0,f.__h=[],f._sb=[]),y&&f.__s==null&&(f.__s=f.state),y&&M.getDerivedStateFromProps!=null&&(f.__s==f.state&&(f.__s=w({},f.__s)),w(f.__s,M.getDerivedStateFromProps(v,f.__s))),m=f.props,h=f.state,f.__v=t,p)y&&M.getDerivedStateFromProps==null&&f.componentWillMount!=null&&f.componentWillMount(),y&&f.componentDidMount!=null&&f.__h.push(f.componentDidMount);else{if(y&&M.getDerivedStateFromProps==null&&v!==m&&f.componentWillReceiveProps!=null&&f.componentWillReceiveProps(v,S),t.__v==n.__v||!f.__e&&f.shouldComponentUpdate!=null&&!1===f.shouldComponentUpdate(v,f.__s,S)){t.__v!=n.__v&&(f.props=v,f.state=f.__s,f.__d=!1),t.__e=n.__e,t.__k=n.__k,t.__k.some(function(e){e&&(e.__=t)}),x.push.apply(f.__h,f._sb),f._sb=[],f.__h.length&&o.push(f);break n}f.componentWillUpdate!=null&&f.componentWillUpdate(v,f.__s,S),y&&f.componentDidUpdate!=null&&f.__h.push(function(){f.componentDidUpdate(m,h,g)})}if(f.context=S,f.props=v,f.__P=e,f.__e=!1,E=u.__r,D=0,y)f.state=f.__s,f.__d=!1,E&&E(t),d=f.render(f.props,f.state,f.context),x.push.apply(f.__h,f._sb),f._sb=[];else do f.__d=!1,E&&E(t),d=f.render(f.props,f.state,f.context),f.state=f.__s;while(f.__d&&++D<25);f.state=f.__s,f.getChildContext!=null&&(r=w(w({},r),f.getChildContext())),y&&!p&&f.getSnapshotBeforeUpdate!=null&&(g=f.getSnapshotBeforeUpdate(m,h)),A=d!=null&&d.type===O&&d.key==null?le(d.props.children):d,s=te(e,C(A)?A:A,t,n,r,i,a,o,s,c,l),f.base=t.__e,t.__u&=-161,f.__h.length&&o.push(f),_&&(f.__E=f.__=null)}catch(e){if(t.__v=null,c||a!=null)if(e.then){for(t.__u|=c?160:128;s&&s.nodeType==8&&s.nextSibling;)s=s.nextSibling;aa.indexOf(s)=null,t.__e=s}else{for(j=a.length;j--;)T(aj);se(t)}else t.__e=n.__e,t.__k=n.__k,e.then||se(t);u.__e(e,t,n)}else a==null&&t.__v==n.__v?(t.__k=n.__k,t.__e=n.__e):s=t.__e=ue(n.__e,t,n,r,i,a,o,c,l);return(d=u.diffed)&&d(t),128&t.__u?void 0:s}function se(e){e&&(e.__c&&(e.__c.__e=!0),e.__k&&e.__k.some(se))}function ce(e,t,n){for(var r=0;r<n.length;r++)de(nr,n++r,n++r);u.__c&&u.__c(t,e),e.some(function(t){try{e=t.__h,t.__h=[],e.some(function(e){e.call(t)})}catch(e){u.__e(e,t.__v)}})}function le(e){return typeof e!=object||!e||e.__b>0?e:C(e)?e.map(le):w({},e)}function ue(e,t,n,r,i,a,o,s,c){var d,f,p,m,h,g,_,v=n.props||b,y=t.props,x=t.type;if(x==svg?i=http://www.w3.org/2000/svg:x==math?i=http://www.w3.org/1998/Math/MathML:i||=http://www.w3.org/1999/xhtml,a!=null){for(d=0;d<a.length;d++)if((h=ad)&&setAttributein h==!!x&&(x?h.localName==x:h.nodeType==3)){e=h,ad=null;break}}if(e==null){if(x==null)return document.createTextNode(y);e=document.createElementNS(i,x,y.is&&y),s&&=(u.__m&&u.__m(t,a),!1),a=null}if(x==null)v===y||s&&e.data==y||(e.data=y);else{if(a&&=l.call(e.childNodes),!s&&a!=null)for(v={},d=0;d<e.attributes.length;d++)v[(h=e.attributesd).name]=h.value;for(d in v)h=vd,d==dangerouslySetInnerHTML?p=h:d==children||d in y||d==value&&defaultValuein y||d==checked&&defaultCheckedin y||P(e,d,null,h,i);for(d in y)h=yd,d==children?m=h:d==dangerouslySetInnerHTML?f=h:d==value?g=h:d==checked?_=h:s&&typeof h!=function||vd===h||P(e,d,h,vd,i);if(f)s||p&&(f.__html==p.__html||f.__html==e.innerHTML)||(e.innerHTML=f.__html),t.__k=[];else if(p&&(e.innerHTML=),te(t.type==template?e.content:e,C(m)?m:m,t,n,r,x==foreignObject?http://www.w3.org/1999/xhtml:i,a,o,a?a0:n.__k&&A(n,0),s,c),a!=null)for(d=a.length;d--;)T(ad);s||(d=value,x==progress&&g==null?e.removeAttribute(value):g!=null&&(g!==ed||x==progress&&!g||x==option&&g!=vd)&&P(e,d,g,vd,i),d=checked,_!=null&&_!=ed&&P(e,d,_,vd,i))}return e}function de(e,t,n){try{if(typeof e==function){var r=typeof e.__u==function;r&&e.__u(),r&&t==null||(e.__u=e(t))}else e.current=t}catch(e){u.__e(e,n)}}function fe(e,t,n){var r,i;if(u.unmount&&u.unmount(e),(r=e.ref)&&(r.current&&r.current!=e.__e||de(r,null,t)),(r=e.__c)!=null){if(r.componentWillUnmount)try{r.componentWillUnmount()}catch(e){u.__e(e,t)}r.base=r.__P=null}if(r=e.__k)for(i=0;i<r.length;i++)ri&&fe(ri,t,n||typeof e.type!=function);n||T(e.__e),e.__c=e.__=e.__e=void 0}function pe(e,t,n){return this.constructor(e,n)}function me(e,t,n){var r,i,a,o;t==document&&(t=document.documentElement),u.__&&u.__(e,t),i=(r=typeof n==function)?null:n&&n.__k||t.__k,a=[],o=[],F(t,e=(!r&&n||t).__k=E(O,null,e),i||b,b,t.namespaceURI,!r&&n?n:i?null:t.firstChild?l.call(t.childNodes):null,a,!r&&n?n:i?i.__e:t.firstChild,r,o),ce(a,e,o)}l=x.slice,u={__e:function(e,t,n,r){for(var i,a,o;t=t.__;)if((i=t.__c)&&!i.__)try{if((a=i.constructor)&&a.getDerivedStateFromError!=null&&(i.setState(a.getDerivedStateFromError(e)),o=i.__d),i.componentDidCatch!=null&&(i.componentDidCatch(e,r||{}),o=i.__d),o)return i.__E=i}catch(t){e=t}throw e}},d=0,k.prototype.setState=function(e,t){var n=this.__s!=null&&this.__s!=this.state?this.__s:this.__s=w({},this.state);typeof e==function&&(e=e(w({},n),this.props)),e&&w(n,e),e!=null&&this.__v&&(t&&this._sb.push(t),ee(this))},k.prototype.forceUpdate=function(e){this.__v&&(this.__e=!0,e&&this.__h.push(e),ee(this))},k.prototype.render=O,f=[],m=typeof Promise==function?Promise.prototype.then.bind(Promise.resolve()):setTimeout,h=function(e,t){return e.__v.__b-t.__v.__b},N.__r=0,g=/(PointerCapture)$|Capture$/i,_=0,v=oe(!1),y=oe(!0);var I,L,R,he,z=0,ge=[],B=u,_e=B.__b,ve=B.__r,ye=B.diffed,be=B.__c,xe=B.unmount,Se=B.__;function V(e,t){B.__h&&B.__h(L,e,z||t),z=0;var n=L.__H||={__:[],__h:[]};return e>=n.__.length&&n.__.push({}),n.__e}function H(e){return z=1,Ce(Oe,e)}function Ce(e,t,n){var r=V(I++,2);if(r.t=e,!r.__c&&(r.__=[n?n(t):Oe(void 0,t),function(e){var t=r.__N?r.__N0:r.__0,n=r.t(t,e);t!==n&&(r.__N=[n,r.__1],r.__c.setState({}))}],r.__c=L,!L.__f)){var i=function(e,t,n){if(!r.__c.__H)return!0;var i=r.__c.__H.__.filter(function(e){return e.__c});if(i.every(function(e){return!e.__N}))return!a||a.call(this,e,t,n);var o=r.__c.props!==e;return i.some(function(e){if(e.__N){var t=e.__0;e.__=e.__N,e.__N=void 0,t!==e.__0&&(o=!0)}}),a&&a.call(this,e,t,n)||o};L.__f=!0;var a=L.shouldComponentUpdate,o=L.componentWillUpdate;L.componentWillUpdate=function(e,t,n){if(this.__e){var r=a;a=void 0,i(e,t,n),a=r}o&&o.call(this,e,t,n)},L.shouldComponentUpdate=i}return r.__N||r.__}function U(e,t){var n=V(I++,3);!B.__s&&De(n.__H,t)&&(n.__=e,n.u=t,L.__H.__h.push(n))}function W(e){return z=5,G(function(){return{current:e}},[])}function G(e,t){var n=V(I++,7);return De(n.__H,t)&&(n.__=e(),n.__H=t,n.__h=e),n.__}function K(e,t){return z=8,G(function(){return e},t)}function we(){for(var e;e=ge.shift();){var t=e.__H;if(e.__P&&t)try{t.__h.some(q),t.__h.some(J),t.__h=[]}catch(n){t.__h=[],B.__e(n,e.__v)}}}B.__b=function(e){L=null,_e&&_e(e)},B.__=function(e,t){e&&t.__k&&t.__k.__m&&(e.__m=t.__k.__m),Se&&Se(e,t)},B.__r=function(e){ve&&ve(e),I=0;var t=(L=e.__c).__H;t&&(R===L?(t.__h=[],L.__h=[],t.__.some(function(e){e.__N&&(e.__=e.__N),e.u=e.__N=void 0})):(t.__h.some(q),t.__h.some(J),t.__h=[],I=0)),R=L},B.diffed=function(e){ye&&ye(e);var t=e.__c;t&&t.__H&&(t.__H.__h.length&&(ge.push(t)!==1&&he===B.requestAnimationFrame||((he=B.requestAnimationFrame)||Ee)(we)),t.__H.__.some(function(e){e.u&&(e.__H=e.u),e.u=void 0})),R=L=null},B.__c=function(e,t){t.some(function(e){try{e.__h.some(q),e.__h=e.__h.filter(function(e){return!e.__||J(e)})}catch(n){t.some(function(e){e.__h&&=[]}),t=[],B.__e(n,e.__v)}}),be&&be(e,t)},B.unmount=function(e){xe&&xe(e);var t,n=e.__c;n&&n.__H&&(n.__H.__.some(function(e){try{q(e)}catch(e){t=e}}),n.__H=void 0,t&&B.__e(t,n.__v))};var Te=typeof requestAnimationFrame==function;function Ee(e){var t,n=function(){clearTimeout(r),Te&&cancelAnimationFrame(t),setTimeout(e)},r=setTimeout(n,35);Te&&(t=requestAnimationFrame(n))}function q(e){var t=L,n=e.__c;typeof n==function&&(e.__c=void 0,n()),L=t}function J(e){var t=L;e.__c=e.__(),L=t}function De(e,t){return!e||e.length!==t.length||t.some(function(t,n){return t!==en})}function Oe(e,t){return typeof t==function?t(e):t}function Y(e,t){let n=W(t);n.current=t,U(()=>{let t=e=>n.current.call(document,e);return document.addEventListener(e,t,{capture:!0}),()=>document.removeEventListener(e,t,{capture:!0})},e)}var X=class{projectName;pageTitle;constructor(e,t){this.projectName=e,this.pageTitle=t}getShortPagePath(e){return this.projectName===e?this.pageTitle:/${this.projectName}/${this.pageTitle}}get fullPagePath(){return/${this.projectName}/${this.pageTitle}}get imgAlt(){return this.pageTitle}get imgTitle(){return this.pageTitle}get imgSrc(){return/api/pages/${this.projectName}/${encodeURIComponent(this.pageTitle)}/icon}getNotation(e){return[${this.getShortPagePath(e)}.icon]}equals(e){return this.fullPagePath===e.fullPagePath}};function ke(e,t){let n=t.querySelector(img.icon);return new X(t.pathname.startsWith(/${e}/)?e:t.pathname.slice(1,t.pathname.indexOf(/,1)),n.alt)}function Ae(e,t){for(let n of t)if(!n.equals(e)&&n.pageTitle===e.pageTitle)return!0;return!1}function je(){lete,t=H(scrapbox.Layout),n,r=H(scrapbox.Project.name);return U(()=>{let e=()=>t(scrapbox.Layout),n=()=>r(scrapbox.Project.name);return scrapbox.addListener(layout:changed,e),scrapbox.addListener(project:changed,n),()=>{scrapbox.removeListener(layout:changed,e),scrapbox.removeListener(project:changed,n)}},[]),{layout:e,projectName:n,getCursorPosition:K(()=>{let e=document.querySelector(.cursor).getBoundingClientRect(),t=e.top+window.scrollY,n=e.left+window.scrollX,r=Array.from(document.querySelectorAll(.lines .line)).find(e=>e.classList.contains(cursor-line));if(!r)return;let i=Array.from(r.querySelectorAll(.char-index));for(let a of i){let i=a.getBoundingClientRect();if(e.top<=i.top&&e.left<i.left+i.width/2)return{lineId:r.id,char:+a.dataset.charIndex,top:t,left:n}}return{lineId:r.id,char:i.length,top:t,left:n}},[]),focus:K(async e=>{let t=document.querySelector(.pointer-event, div:has(> .lines)),n=Array.from(document.querySelectorAll(.lines .line)).find(t=>t.id===e.lineId);if(!n)return!1;let r=n.getBoundingClientRect();Me(t,r.right-1,r.top+r.height/2);let i=Array.from(n.querySelectorAll(.char-index)),a=ie.char;if(a){let e=a.getBoundingClientRect();Me(t,e.left,e.top+e.height/2)}else{let e=ii.length-1.getBoundingClientRect();Me(t,e.right,e.top+e.height/2)}return await new Promise(requestAnimationFrame),!0},[]),blur:K(()=>{document.querySelector(#text-input).blur()},[]),insertText:K(e=>{let t=document.querySelector(#text-input);t.value=e;let n=new InputEvent(input,{bubbles:!0,cancelable:!1,inputType:insertText,data:e});t.dispatchEvent(n)},[]),getEmbeddedIcons:K(()=>{let e=document.querySelector(.editor);return Array.from(e.querySelectorAll(a.link.icon)).map(e=>ke(n,e))},n)}}function Me(e,t,n){let r={bubbles:!0,cancelable:!0,button:0,clientX:window.scrollX+t,clientY:window.scrollY+n};e.dispatchEvent(new MouseEvent(mousedown,r)),e.dispatchEvent(new MouseEvent(mouseup,r))}function Ne(e,t){let n=[],r=new Set;for(let i of e){let e=t(i);r.has(e)||(r.add(e),n.push(i))}return n}function Z(e){return Ne(e,e=>e.fullPagePath)}function Pe(e){return e.isComposing||e.key===Enter&&e.which===229}var Fe=0;Array.isArray;function Q(e,t,n,r,i,a){t||={};var o,s,c=t;if(refin c)for(s in c={},t)s==ref?o=ts:cs=ts;var l={type:e,props:c,key:n,ref:o,__k:null,__:null,__b:0,__e:null,__c:null,constructor:void 0,__v:--Fe,__i:-1,__u:0,__source:i,__self:a};if(typeof e==function&&(o=e.defaultProps))for(s in o)cs===void 0&&(cs=os);return u.vnode&&u.vnode(l),l}function Ie({icons:e,onSelect:t}){let n=W(null),r=e.length===0,i,a=H(e.length===0?null:0),o,s=H(e);o!==e&&(s(e),a(r?null:0)),Y(keydown,n=>{if(!open||Pe(n)||r||i===null)return;let o=n.key===Tab&&!n.ctrlKey&&!n.shiftKey&&!n.altKey,s=n.key===Tab&&!n.ctrlKey&&n.shiftKey&&!n.altKey,c=n.key===Enter&&!n.ctrlKey&&!n.shiftKey&&!n.altKey;(o||s||c)&&(n.preventDefault(),n.stopPropagation()),o&&a(t=>t===null?0:(t+1)%e.length),s&&a(t=>t===null?0:(t-1+e.length)%e.length),c&&t?.(ei)});let c=e.map((t,n)=>{let r=Ae(t,e)?${t.pageTitle} (${t.projectName}):t.pageTitle;return Q(Le,{selected:i===n,children:[Q(span,{className:button-label,"data-testid":suggested-icon-label,children:r}),Q(div,{className:icon,children:Q(img,{alt:t.imgAlt,title:t.imgTitle,src:t.imgSrc})})]},t.fullPagePath)});return Q(div,{className:popup-menu,"data-testid":popup-menu,children:[Q(div,{ref:n,className:button-container,"data-testid":button-container,children:e.length===0?キーワードにマッチするアイコンがありません:c}),Q(div,{className:triangle,style:{left:10}})]})}function Le({children:e,selected:t}){return Q(div,{className:t?button selected:button,children:e})}const Re=({defaultQuery:e,onInput:t,onBlur:n})=>{let r=W(null);return U(()=>{if(!r.current)return;let e=r.current;requestAnimationFrame(()=>e.focus())},[]),Q(form,{className:form-inline,children:Q(input,{ref:r,className:form-control,defaultValue:e,onInput:K(e=>{e.currentTarget&&t?.(e.currentTarget.value)},t),onBlur:n,"data-testid":search-input})})};function ze({matcher:e,onSelect:t,onBlur:n}){letr,i=H();return Q(div,{children:[Q(Ie,{icons:G(()=>e(r).slice(0,8),e,r),onSelect:t}),Q(Re,{defaultQuery:r,onInput:i,onBlur:n})]})}const Be=({isExitIconSuggestionKey:e,isLaunchIconSuggestionKey:t,matcher:n,presetIcons:r})=>{let i=je(),a,o=H(!1),s,c=H([]),l,u=H(void 0),d=K(e=>{if(a||i.layout!==page)return;e.preventDefault(),e.stopPropagation();let t=i.getCursorPosition();t&&(u(t),i.blur(),c(i.getEmbeddedIcons()),o(!0))},i,a);Y(keydown,K(e=>{Pe(e)||t(e)&&d(e)},t,d));let f=K(async()=>{o(!1),await i.focus(l)},i,l),p=K(async e=>{o(!1),await i.focus(l)?i.insertText(e.getNotation(i.projectName)):alert(カーソルのあった行が削除されたため、アイコンを挿入できませんでした。)},i,l);return!a||i.layout!==page||!l?null:Q(div,{style:{position:absolute,top:l.top,left:l.left,lineHeight:28px},children:Q(Ve,{isExitIconSuggestionKey:e,presetIcons:r,matcher:n,embeddedIcons:s,onClose:f,onSelect:p})})};function Ve({isExitIconSuggestionKey:e,presetIcons:t,matcher:n,embeddedIcons:r,onClose:i,onSelect:a}){let o=K(e=>n({query:e,composedIcons:Z(...r,...t),presetIcons:t,embeddedIcons:r}),r,n,t),s=K(e=>{e.preventDefault(),e.stopPropagation(),i()},i);return Y(keydown,K(t=>{Pe(t)||e(t)&&s(t)},e,s)),Q(ze,{matcher:o,onSelect:a,onBlur:i})}var He=c(o(((e,t)=>{let n=2147483648,r=n,0,0,0,i=e=>e>=65&&e<=90,a=e=>e>=97&&e<=122,o=e=>i(e)?e+32:e,s=e=>a(e)?e-32:e;t.exports=function(e){let t=[],i=0,a=0,c=n;for(let e=0;e<65536;e++)te=0;for(let n of u(e))n===32?i|=c:(tn|=c,ts(n)|=c,to(n)|=c,c>>>=1);a=c;function l(e=r,n=){let a=e0,o=e1,s=e2,l=e3;for(let e of u(n))c=te,l=l&i|(l&c)>>>1|s>>>1|s,s=s&i|(s&c)>>>1|o>>>1|o,o=o&i|(o&c)>>>1|a>>>1|a,a=a&i|(a&c)>>>1,o|=a>>>1,s|=o>>>1,l|=s>>>1;returna,o,s,l}function u(e){let t=[];for(let n of e.split()){let e=n.charCodeAt(0);t.push(e)}return t}function d(e,t=0){let n=l(r,e);return t>=r.length&&(t=r.length-1),(nt&a)!==0}return d.source=e,d}}))(),1);function Ue({query:e,composedIcons:t}){let n=Math.min(Math.floor(e.length/3),3),r=(0,He.default)( ${e} ),i=[];for(let e=0;e<=n;e++)for(let n of t)r(n.pageTitle,e)&&i.push(n);return Z(i)}function We({query:e,composedIcons:t}){return t.filter(t=>t.pageTitle.toLowerCase().startsWith(e.toLowerCase()))}function Ge({query:e,composedIcons:t}){return t.filter(t=>t.pageTitle.toLowerCase().includes(e.toLowerCase()))}function Ke(e){return Z(...We(e),...Ge(e),...Ue(e))}const qe=e=>e.key===l&&e.ctrlKey&&!e.shiftKey&&!e.altKey&&!e.metaKey,Je=e=>e.key===Escape&&!e.ctrlKey&&!e.shiftKey&&!e.altKey;async function $(e){if(e instanceof X)returne;if(Array.isArray(e)){let t=e.map($);return(await Promise.all(t)).flat()}if(e instanceof Promise)return $(await e);let t=(await e()).map($);return(await Promise.all(t)).flat()}async function Ye(e){return(await Promise.all(e.map($))).flat()}async function Xe(e){return{isLaunchIconSuggestionKey:e?.isLaunchIconSuggestionKey??qe,isExitIconSuggestionKey:e?.isExitIconSuggestionKey??Je,presetIcons:await Ye(e?.presetIcons??[]),matcher:e?.matcher??Ke}}async function Ze(e){let t=document.querySelector(#app-container .app);if(!t)throw Error(.app が存在しません);let n=await Xe(e),r=document.createElement(div);t.appendChild(r),me(Q(Be,{...n}),r)}async function Qe(e){let{origin:t}=window.location,n,r=await Promise.all([fetch(${t}/api/projects/${e}).then(async e=>e.json()),fetch(${t}/api/pages/${e}/member).then(async e=>e.json())]),i=r.relatedPages;if(!n.users||!i)throw Error(You are not a member of \`${e}\` project.);return n.users.map(e=>e.name).filter(e=>{let t=i.links1hop.find(t=>t.title===e);return t&&t.image!==null}).map(t=>new X(e,t))}async function $e(e,t){let{origin:n}=window.location,r=await fetch(${n}/api/pages/${e}/${encodeURIComponent(t)}).then(async e=>e.json());if(!r.relatedPages)throw Error(You are not a member of \`${e}\` project.);return r.relatedPages.links1hop.filter(e=>e.image!==null).map(t=>new X(e,t.title))}export{X as Icon,Qe as fetchMemberPageIcons,$e as fetchRelatedPageIconsByHashTag,We as forwardMatcher,Ke as forwardPartialFuzzyMatcher,Ue as fuzzyMatcher,Ge as partialMatcher,Ze as registerIconSuggestion,Z as uniqueIcons};