takker99/emoji-completionで試すevent loop設計

loop開始

event発火

テキスト変更

中でやること

loop終了

cursor移動

選択肢の確定

流し込み終わるまでloop開始eventはlistenしない

でないと、流し込んだ文字列を新たな入力と誤認識してしまう

今までの拡張Scrapbox入力補完で生じた問題

入力候補を押すと補完リストが閉じてしまう

押した瞬間にcursorのfocusがはずれたと認識されてしまうため

とりあえずevent loopだけ試しておきたいな

Preact抜きで簡単に作ってみるか

async-libで同期的にloopをくむ

試した。問題なさそう

event loopテスト (takker99/emoji-completionで試すevent loop設計)

動くものも作ってみる

async-await loopを使ったScrapbox拡張入力補完テスト

図解

https://kakeru.app/9fd9847e1298718f458154f0fd58c117 https://i.kakeru.app/9fd9847e1298718f458154f0fd58c117.svg

遷移方法で間引き方を変える必要がある

取りこぼしてもいいもの

テキスト入力

カーソル移動

検索結果取得

最後に来たものは取りこぼしたくないが

全部処理すべきもの

手動補完開始命令

手動補完終了命令

候補確定処理

async-libのpromisify()の定義を拡張する必要がありそうだ

✅設定によらず間引かれないようにする (async-lib)

これやりたい

/villagepump/外部サービスのコンテンツを補完pop upに表示する

入力補完からEpisopassを起動

パスワードを流し込むわけにはいかないから、

2022-03-22

17:24:10 もう少しrichにしてみる

code:test2.ts

/// <reference no-default-lib="true"/>

/// <reference lib="esnext"/>

/// <reference lib="dom" />

import {

useStatusBar,

caret,

getCharDOM,

getText,

getInternalLink,

textInput,

cursor,

} from "../scrapbox-userscript-std/dom.ts";

import { promisify, sleep } from "../async-lib/mod.ts";

型定義

ddc.vimを参考にしてみる

補完辞書

辞書と補完開始条件とが一体化している設計

分離するのも有りか？

あ、補完開始条件と検索文字列を生成する処理とは一体化しているのか

接続辞書の考え方でもっとシンプルにできないかな

code:test2.ts

type Source<UserData> = {

/** この補完設定を使うかどうかを判定する

* 使える場合は検索文字列を返す

detect: (context: Context) => string | undefined | Promise<string | undefined>;

/** 補完候補を生成する */

gather: (args: GatherArguments) => GatherResult<UserData> | Promise<GatherResult<UserData>>;

/** 補完ソースの名前他のソースと衝突するとアウト */

name: SourceName;

};

type SourceName = string;

type GatherArguments = {

project: string;

title: string;

context: Context;

};

type GatherResult<UserData> = {

/** まだ生成途中ならfalse, 生成し終わっているならtrue */

done: boolean;

candidates: Candidate<UserData>[];

};

補完候補

code:test2.ts

type Candidate<UserData extends unknown = unknown> = {

word: string;

userData: UserData;

};

補完時のもろもろの環境

cursor周りの情報も渡すか？

そこまでしなくてもいいか

code:test2.ts

type Context = {

line: number;

char: number;

lineText: string;

source: "cursormove" | "textinput" | "manual";

};

絞り込み関数

これは組み込みでいい気もするが

Viewer

状態が変わるごとにデータを受け取り、それを描画するだけ

code:test2.ts

type CompletionState = {

type: "inactive";

} | {

type: "completion";

candidates: Candidate[];

};

操作関数

code:test2.ts

type Operators = {

/** 補完を開始する

* どの補完ソースも使えない場合は何もしない

start: () => void;

/** 補完を終了する。候補確定処理もこの中でやる

* テキスト入力など、補完開始させかねない処理はこの中で処理する

end: () => void | Promise<void>;

};