インストール

モジュールをインストールします 

  1. npm install @wordpress/dom --save

API

computeCaretRect

コンテナ内の選択範囲の矩形を取得します。

パラメータ

  • win Window: 選択のウィンドウ。

戻り値

  • DOMRect | null: 矩形。

documentHasSelection

現在のドキュメントに選択範囲があるかどうかを確認します。これには、入力フィールド、テキストエリア、および一般的なリッチテキストの選択が含まれます。

パラメータ

  • doc Document: 確認するドキュメント。

戻り値

  • boolean: 選択がある場合は真、ない場合は偽。

documentHasTextSelection

現在のドキュメントに選択されたテキストがあるかどうかを確認します。これは、ドキュメント内のテキストの範囲に適用され、<input>および<textarea>要素内の選択には適用されません。

参照: https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection#Related_objects。

パラメータ

  • doc Document: 確認するドキュメント。

戻り値

  • boolean: 選択がある場合は真、ない場合は偽。

documentHasUncollapsedSelection

現在のドキュメントに何らかの（未折りたたまれた）選択範囲があるかどうかを確認します。これには、要素間のテキストの範囲や、テキストの<input>および<textarea>要素内の選択が含まれます。

パラメータ

  • doc Document: 確認するドキュメント。

戻り値

  • boolean: ドキュメント内に認識可能なテキスト選択があるかどうか。

focus

focusableおよびtabbableユーティリティを同じ名前のキーの下にグループ化します。

getFilesFromDataTransfer

DataTransferオブジェクトからすべてのファイルを取得します。

パラメータ

  • dataTransfer DataTransfer: 検査するDataTransferオブジェクト。

戻り値

  • File[]: すべてのファイルを含む配列。

getOffsetParent

最も近い位置指定された要素を返します。オフセット親の仕様のいずれかの条件下ではnullを返します。offsetParentとは異なり、この関数はHTMLElementに制限されず、任意のNode（例：Node.TEXT_NODE）を受け入れます。

関連

パラメータ

  • node Node: オフセット親を見つけるノード。

戻り値

  • Node | null: オフセット親。

getPhrasingContentSchema

フレーズコンテンツの可能なパスのスキーマを取得します。

関連

パラメータ

  • context [string]: 目に見えない要素や機密データを除外するために「paste」に設定します。

戻り値

  • Partial<ContentSchema>: スキーマ。

getRectangleFromRange

指定されたRangeの矩形を取得します。適切な矩形が見つからない場合はnullを返します。

パラメータ

  • range Range: 範囲。

戻り値

  • DOMRect?: 矩形。

getScrollContainer

DOMノードが与えられた場合、最も近いスクロール可能なコンテナノードまたはスクロール可能な場合はそのノード自体を見つけます。

パラメータ

  • node Element | null: 開始するノード。
  • direction ?string: 検索するスクロール可能なコンテナの方向（「vertical」、「horizontal」、「all」）。デフォルトは「vertical」です。

戻り値

  • Element | undefined: 見つかった場合のスクロール可能なコンテナノード。

insertAfter

2つのDOMノードが与えられた場合、前者を後者の次の兄弟としてDOMに挿入します。

パラメータ

  • newNode Node: 挿入されるノード。
  • referenceNode Node: 挿入を行うノード。

戻り値

  • void:

isEmpty

要素が空であるかどうかを再帰的にチェックします。要素がテキストを含む場合や、画像などの属性を持つ要素を含む場合、その要素は空ではありません。

パラメータ

  • element Element: 確認する要素。

戻り値

  • boolean: 要素が空であるかどうか。

isEntirelySelected

要素の内容が完全に選択されているかどうかを確認します。選択の可能性がない場合は真を返します。

パラメータ

  • element HTMLElement: 確認する要素。

戻り値

  • boolean: 完全に選択されている場合は真、そうでない場合は偽。

isFormElement

要素がフォーム要素であるかどうかを検出します。

パラメータ

  • element Element: 確認する要素。

戻り値

  • boolean: フォーム要素である場合は真、そうでない場合は偽。

isHorizontalEdge

選択がコンテナの水平端にあるかどうかを確認します。

パラメータ

  • container HTMLElement: フォーカス可能な要素。
  • isReverse boolean: 左を確認するには真、右を確認するには偽に設定します。

戻り値

  • boolean: 水平端にある場合は真、そうでない場合は偽。

isNumberInput

指定された要素が数値型の入力フィールドであるかどうかを確認します。

パラメータ

  • node Node: HTMLノード。

戻り値

  • node is HTMLInputElement: ノードが数値入力である場合は真。

isPhrasingContent

指定されたノードがフレーズコンテンツであるかどうかを確認します。

関連

パラメータ

  • node Node: テストするノード。

戻り値

  • boolean: フレーズコンテンツである場合は真、そうでない場合は偽。

isRTL

要素のテキスト方向が右から左であるかどうか。

パラメータ

  • element Element: 確認する要素。

戻り値

  • boolean: rtlの場合は真、ltrの場合は偽。

isSelectionForward

指定された選択オブジェクトが前方方向にある場合は真を返し、そうでない場合は偽を返します。

関連

パラメータ

  • selection Selection: 確認する選択オブジェクト。

戻り値

  • boolean: 選択が前方であるかどうか。

isTextContent

パラメータ

  • node Node:

戻り値

  • boolean: ノードはテキストコンテンツです

isTextField

指定された要素がテキストフィールドであるかどうかを確認します。テキストフィールドは、入力内で選択できる能力またはcontenteditableであることによって定義されます。

参照: https://html.spec.whatwg.org/#textFieldSelection

パラメータ

  • node Node: HTML要素。

戻り値

  • node is HTMLElement: 要素がテキストフィールドである場合は真、そうでない場合は偽。

isVerticalEdge

選択がコンテナの垂直端にあるかどうかを確認します。

パラメータ

  • container HTMLElement: フォーカス可能な要素。
  • isReverse boolean: 上を確認するには真、下を確認するには偽に設定します。

戻り値

  • boolean: 垂直端にある場合は真、そうでない場合は偽。

placeCaretAtHorizontalEdge

指定された要素の開始または終了にキャレットを配置します。

パラメータ

  • container HTMLElement: フォーカス可能な要素。
  • isReverse boolean: 終了の場合は真、開始の場合は偽。

placeCaretAtVerticalEdge

指定された要素の上部または下部にキャレットを配置します。

パラメータ

  • container HTMLElement: フォーカス可能な要素。
  • isReverse boolean: 下の場合は真、上の場合は偽。
  • rect [DOMRect]: キャレットを配置するための矩形。

remove

DOMノードが与えられた場合、それをDOMから削除します。

パラメータ

  • node Node: 削除されるノード。

戻り値

  • void:

removeInvalidHTML

スキーマが与えられた場合、HTMLのノード、属性、およびクラスをアンラップまたは削除します。

パラメータ

  • HTML string: クリーンアップするHTML。
  • schema import('./clean-node-list').Schema: HTMLのスキーマ。
  • inline boolean: インラインモードのクリーンアップを行うかどうか。

戻り値

  • string: クリーンアップされたHTML。

replace

2つのDOMノードが与えられた場合、前者を後者でDOM内で置き換えます。

パラメータ

  • processedNode Element: 削除されるノード。
  • newNode Element: その場所に挿入されるノード。

戻り値

  • void:

replaceTag

指定されたノードを指定されたタグ名の新しいノードで置き換えます。

パラメータ

  • node Element: 置き換えるノード
  • tagName string: 新しいタグ名。

戻り値

  • Element: 新しいノード。

safeHTML

HTMLからスクリプトとon*属性を削除します。

パラメータ

  • html string: サニタイズするHTML。

戻り値

  • string: サニタイズされたHTML。

unwrap

指定されたノードをアンラップします。これは、すべての子ノードが親に移動されることを意味します。

パラメータ

  • node Node: アンラップするノード。

戻り値

  • void:

wrap

指定されたノードを指定されたタグ名の新しいノードでラップします。

パラメータ

  • newNode Element: 挿入するノード。

  • referenceNode Element: ラップするノード。

このパッケージへの貢献

これは、グーテンベルクプロジェクトの一部である個別のパッケージです。このプロジェクトはモノレポとして整理されています。特定の目的を持つ複数の自己完結型ソフトウェアパッケージで構成されています。このモノレポ内のパッケージは、npmに公開され、WordPressや他のソフトウェアプロジェクトで使用されています。

このパッケージやグーテンベルク全体への貢献について詳しく知りたい場合は、プロジェクトの主要な貢献者ガイドをお読みください。