(async () => { await import('/api/code/programming-notes/external-completion@0.4.0/index.js'); })();

deno run --allow-net --allow-read --allow-write --allow-run --allow-env --unstable https://scrapbox.io/api/code/takker/UserScriptをbundleするDeno_script/build.ts "https://scrapbox.io/api/code/programming-notes/external-completion@0.4.0/index.js" --bundle --minify --charset=utf8 | xsel

import {mount} from '../external-completion@0.4.0/script.js'; const watchListIds = Object.keys(JSON.parse(localStorage.getItem('projectsLastAccessed'))); const iconIds = [ '57b3fe09ec2b330f00f15382', // /icons Icons '5ebf80b491582c001e38c967', // /Icons2 Icons2 '5adc2250d5caf30014910a83', // /emoji emoji ]; // watchListから現在projectとicon用project除く const res = await fetch(`/api/projects/${scrapbox.Project.name}`); const {id} = await res.json(); const projectIds = watchListIds .filter(_id => _id !== id && !iconIds.some(iconId => iconId === id)); // 起動 mount({ internal: [], // []の補完に使うproject idのlist external: projectIds, // [/]に使うprojectのid list emoji: iconIds, // [:]に使うprojectのid list });

import {html, render} from '../htm@3.0.4%2Fpreact/script.js'; import {useState, useMemo, useCallback, useEffect} from '../preact@10.5.13/hooks.js'; import {useCrossSearch} from '../use-cross-search@0.1.0/script.js'; import {useSelect} from '../use-select@0.1.0/script.js'; import {useKeyboard} from '../use-keyboard@0.1.0/script.js'; import {DropdownMenu} from '../dropdown-container@0.1.1/script.js'; import {toLc} from '../scrapbox-titleLc/script.js'; import {replaceLink} from '../external-completion@0.4.0%2FreplaceLink/script.js'; import {scrapboxDOM} from '../scrapbox-dom-accessor/script.js'; const Completion = ({position, item, loading, searching, query, list, icon}) => html` <${DropdownMenu} position="${position}" selected="${item?.key}" messages="${html`<span>${loading ? 'Loading...' : searching ? `Searching for "${query}"...` : 'Ready to search.'}</span>`}"> ${list.map(({key, href, project, onClick}) => html` <a href="${href}" key="${key}" tabindex="-1" onClick="${onClick}"> ${icon && html`<img src="/api/pages${href}/icon" />`} ${key} </a> `)} <//> `; const CSS = ` :host { --dropdown-text-color: var(--page-text-color, #333); --dropdown-bg: var(--page-bg, #fff); --dropdown-border-color: var(--body-bg, rgba(0,0,0,0.15)); --dropdown-shadow-color: rgba(0,0,0,0.175); --dropdown-item-hover-text-color: var(--page-text-color, #333); --dropdown-item-hover-bg: var(--card-hover-bg, #f5f5f5); --dropdown-item-select-border-color: #66afe999; } `; const InternalCompletion = ({projectIds}) => { const { item, list, confirm, confirmIcon, start, cancel, // 一時的に補完を止める isOpen, isEnableKeyboard, loading, searching, query, selectPrev, selectNext, position, } = useExternalCompletion('internal-completion', projectIds, {internal: true, filter: /^[^\/:]/}); const textInput = scrapboxDOM.textInput; useKeyboard(textInput, 'Escape', cancel, {enable: isEnableKeyboard}, [isEnableKeyboard]); useKeyboard(textInput, {key: ' ', ctrlKey: true}, start, {stopPropagation: false}); return isOpen && html`<${Completion} position="${position}" list="${list}" item="${item}" query="${query}" loading="${loading}" searching="${searching}" />`; }; const ExternalCompletion = ({projectIds}) => { const { item, list, confirm, confirmIcon, start, cancel, // 一時的に補完を止める isOpen, isEnableKeyboard, loading, searching, query, selectPrev, selectNext, position, } = useExternalCompletion('external-completion', projectIds, {filter: /^\//}); const textInput = scrapboxDOM.textInput; useKeyboard(textInput, {key: 'Tab', shiftKey: true}, selectPrev, {enable: isEnableKeyboard}, [isEnableKeyboard]); useKeyboard(textInput, {key: 'Tab', shiftKey: false}, selectNext, {enable: isEnableKeyboard}, [isEnableKeyboard]); useKeyboard(textInput, {key: 'Enter', ctrlKey: true}, confirmIcon, {enable: isEnableKeyboard}, [isEnableKeyboard]); useKeyboard(textInput, 'Enter', confirm, {enable: isEnableKeyboard}, [isEnableKeyboard]); useKeyboard(textInput, 'Escape', cancel, {enable: isEnableKeyboard}, [isEnableKeyboard]); useKeyboard(textInput, {key: ' ', ctrlKey: true}, start, {stopPropagation: false}); return isOpen && html`<${Completion} position="${position}" list="${list}" item="${item}" query="${query}" loading="${loading}" searching="${searching}" />`; }; const EmojiCompletion = ({projectIds}) => { const { item, list, confirm, confirmIcon, start, cancel, // 一時的に補完を止める isOpen, isEnableKeyboard, loading, searching, query, selectPrev, selectNext, position, } = useExternalCompletion('emoji-completion', projectIds, {icon: true, filter: /^:/}); const textInput = scrapboxDOM.textInput; useKeyboard(textInput, {key: 'Tab', shiftKey: true}, selectPrev, {enable: isEnableKeyboard}, [isEnableKeyboard]); useKeyboard(textInput, {key: 'Tab', shiftKey: false}, selectNext, {enable: isEnableKeyboard}, [isEnableKeyboard]); useKeyboard(textInput, 'Enter', confirmIcon, {enable: isEnableKeyboard}, [isEnableKeyboard]); useKeyboard(textInput, 'Escape', cancel, {enable: isEnableKeyboard}, [isEnableKeyboard]); useKeyboard(textInput, {key: ' ', ctrlKey: true}, start, {stopPropagation: false}); return isOpen && html`<${Completion} position="${position}" list="${list}" item="${item}" query="${query}" loading="${loading}" searching="${searching}" icon="${true}" />`; }; export async function mount(props) { const app = document.createElement('div'); app.dataset.userscriptName= 'external-completion'; document.getElementById('editor').append(app); app.attachShadow({mode: 'open'}); render(html` <style>${CSS}</style> ${(props.internal?.length ?? 0) > 0 && html`<${InternalCompletion} projectIds="${props.internal}" />`} ${(props.external?.length ?? 0) > 0 && html`<${ExternalCompletion} projectIds="${props.external}" />`} ${(props.emoji?.length ?? 0) > 0 && html`<${EmojiCompletion} projectIds="${props.emoji}" />`} `, app.shadowRoot); }

import {position as caretPos} from '../scrapbox-cursor-position-2/script.js'; function useExternalCompletion(name, projectIds, {icon, filter, internal} = {}) { const [query, setQuery] = useState(''); const [open, setOpen] = useState(false); const [enable, setEnable] = useState(true); const cancel = useCallback(() => setOpen(false), []); // 検索結果 const {loading, searching, results} = useCrossSearch(name, query, {icon, projectIds}); //確定時の処理 const onClick = useCallback(async (key, e) => { e.stopPropagation(); // 修飾キーが押されていたら何もしない if (e.metaKey || e.ctrlKey || e.altKey || e.shiftKey) return; e.preventDefault(); await replaceLink(key); cancel(); // 補完を終了する }, [cancel]); // UI用に加工する const list = useMemo( () => results .map(({project, title}) => ({ key: `/${project}/${title}`, href: `/${project}/${toLc(title)}`, project, onClick: e => onClick(internal ? title : icon ? `/${project}/${title}.icon` : `/${project}/${title}`, e), })), [results, query, internal] ); // キー操作の有効かどうかのflag const isEnableKeyboard = useMemo(() => enable && open && list.length > 0, [enable, open, list.length]); // 補完windowを開くかどうかのflag const isOpen = useMemo( () => enable && open && (list.length > 0 || loading || searching), [enable, open, list.length, loading, searching] ); // 項目選択 const {item, selectPrev, selectNext} = useSelect({ list, defaultSelected: 0, }); //確定時の処理 const confirm = useCallback(async () => { await replaceLink(item.key); cancel(); }, [item, cancel]); const confirmIcon = useCallback(async () => { await replaceLink(`${item.key}.icon`); cancel(); }, [item, cancel]); const [position, setPosition] = useState({top: 0, left: 0}); // popupの位置 // .cursorが.page-linkの中にいたら補完を開始する const startCompletion = useCallback(async () => { const {char} = caretPos(); const link = char?.closest?.('.page-link[type="link"]'); // hash tagは除外する if (!link) { cancel(); return; } // .cursor-lineになっているはずなので、[]で囲まれているとみなしていい const text = link.textContent.slice(1, -1); // 外部project link記法のみを対象とする if (!filter.test(text)) return; setOpen(true); setQuery(text.slice(1)); // leftはlinkの左端に合わせる const top = parseInt(scrapboxDOM.cursor.style.top); const height = parseInt(scrapboxDOM.cursor.style.height); const bottom = top + height; const {left: eLeft} = scrapboxDOM.editor.getBoundingClientRect(); const left = link.getBoundingClientRect().left; setPosition({top: bottom, left: Math.round(left - eLeft)}); }, [filter]); useOnTextChange(startCompletion); // 手動で補完を有効にする const start = useCallback(async () => { setEnable(true); await startCompletion(); }, [startCompletion]); return { item, list, confirm, confirmIcon, start, cancel, isOpen, isEnableKeyboard, query, loading, searching, selectPrev, selectNext, position, } }

import {useEventListener} from '../use-event-listener/script.js'; import {useMutationObserver} from '../useMutationObserver/script.js'; import {throttle} from '../custom-throttle/script.js'; function useOnTextChange(callback, delay) { const onInput = useMemo(() => throttle(callback, delay ?? 100), [callback, delay]); const onKeyUp = useCallback(e => { if (e.key !== 'Delete' && e.key !== "Backspace" && e.key !== 'Enter') return; onInput(e); }, [onInput]); useEventListener(scrapboxDOM.textInput, 'input', onInput); useEventListener(scrapboxDOM.textInput, 'keyup', onKeyUp); // 文字削除キーを検知する useMutationObserver([{current: scrapboxDOM.textInput}], ([mutation]) => callback(mutation), {attributes: true, attributeFilter: ['style']}); }