📝

Lexicalで入力済みテキストを全消去する

2022/08/08に公開約800字

Lexicalとは?

contentEditableの仕様がバラバラすぎるのでFacebookが作ったテキストエディタフレームワーク

全消去はどうやるの?

// クリアコマンドを登録
lexicalEditor.registerCommand(CLEAR_EDITOR_COMMAND, (payload) => {
  lexicalEditor.update(() => {
    const root = $getRoot();
    const selection = $getSelection();
    const paragraph = $createParagraphNode();
    root.clear();
    root.append(paragraph);
     if (selection !== null) {
      paragraph.select();
    }
  });
  return true;
}, COMMAND_PRIORITY_EDITOR);

// クリアコマンドを実行
lexicalEditor.dispatchCommand(CLEAR_EDITOR_COMMAND, null);

これで消える。root.clear() を呼び出したのちに、新しく段落を追加してあげるのがポイント。
Reactユーザーの場合は、単純にLexicalClearEditorPluginを使うのがベスト。
上記コードはこのプラグインの実装から拝借したもの。

参考

https://github.com/facebook/lexical/blob/main/packages/lexical-react/src/LexicalClearEditorPlugin.ts

Discussion

ログインするとコメントできます