Translate TextUpdateEvent

files/ja/web/api/textupdateevent/index.md

@@ -0,0 +1,74 @@
+---
+title: TextUpdateEvent
+slug: Web/API/TextUpdateEvent
+l10n:
+  sourceCommit: c29cee3dcb0d0e66093dd0c18aa82e0eab9d6d14
+---
+
+{{APIRef("EditContext API")}}{{SeeCompatTable}}
+
+**`TextUpdateEvent`** インターフェイスは [DOM イベント](/ja/docs/Web/API/Event)で、{{domxref("EditContext")}} のインスタンスに関連付けられた編集可能なテキスト領域内のテキストまたは選択の更新を表します。
+
+このインターフェイスは、{{domxref("Event")}} からプロパティを継承しています。
+
+{{InheritanceDiagram}}
+
+## コンストラクター
+
+- {{domxref("TextUpdateEvent.TextUpdateEvent", "TextUpdateEvent()")}} {{experimental_inline}}
+  - : 新しい `TextUpdateEvent` のオブジェクトを生成します。
+
+## インスタンスプロパティ
+
+- {{domxref('TextUpdateEvent.updateRangeStart')}} {{readonlyinline}} {{experimental_inline}}
+  - : 更新されたテキストの範囲の始点の文字の添字を返します。
+- {{domxref('TextUpdateEvent.updateRangeEnd')}} {{readonlyinline}} {{experimental_inline}}
+  - : 更新されたテキストの範囲の終点の文字の添字を返します。
+- {{domxref('TextUpdateEvent.text')}} {{readonlyinline}} {{experimental_inline}}
+  - : 更新された範囲に挿入されたテキストを返します。
+- {{domxref('TextUpdateEvent.selectionStart')}} {{readonlyinline}} {{experimental_inline}}
+  - : 更新後の、新しい選択範囲の始点の文字の添字を返します。
+- {{domxref('TextUpdateEvent.selectionEnd')}} {{readonlyinline}} {{experimental_inline}}
+  - : 更新後の、新しい選択範囲の終点の文字の添字を返します。
+
+## 例
+
+### 編集可能なキャンバスに更新されたテキストを描画する
+
+以下の例では、EditContext API を用いて `<canvas>` 要素に編集可能なテキストを描画し、`textupdate` イベントを用いてユーザーが入力した時にテキストを描画します。
+
+```html
+<canvas id="editor-canvas"></canvas>
+```
+
+```js
+const canvas = document.getElementById("editor-canvas");
+const ctx = canvas.getContext("2d");
+const editContext = new EditContext();
+canvas.editContext = editContext;
+
+function render() {
+  // キャンバスを初期化します。
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+  // テキストを描画します。
+  ctx.fillText(editContext.text, 10, 10);
+}
+
+editContext.addEventListener("textupdate", (e) => {
+  // ユーザーがテキストを入力した際に、エディタービューを再描画します。
+  render();
+
+  console.log(
+    `The user entered ${e.text}. Rendering the entire text: ${editContext.text}`,
+  );
+});
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}

files/ja/web/api/textupdateevent/selectionend/index.md

@@ -0,0 +1,84 @@
+---
+title: "TextUpdateEvent: selectionEnd プロパティ"
+slug: Web/API/TextUpdateEvent/selectionEnd
+l10n:
+  sourceCommit: ee846961725e36cf7bb407afe7a2df82d2860658
+---
+
+{{APIRef("EditContext API")}}{{SeeCompatTable}}
+
+読み取り専用プロパティ **`TextUpdateEvent.selectionEnd`** は、{{domxref("EditContext")}} のオブジェクトに関連付けられた編集可能な領域のテキストコンテンツ内の選択範囲 (またはキャレット) の終点の位置を表します。
+
+## 値
+
+{{jsxref("Number")}} です。
+
+## 例
+
+### `textupdate` を用いて編集されたテキストとユーザーの選択を描画する
+
+この例では、`selectionEnd` プロパティを用いて {{domxref("EditContext/textupdate_event", "textupdate")}} イベントハンドラー内で選択されたテキストを描画する方法を示します。
+
+```css
+#editor {
+  height: 200px;
+  background: #eee;
+  color: black;
+}
+
+.selection {
+  display: inline-block;
+  vertical-align: bottom;
+  background: blue;
+  color: white;
+  min-width: 2px;
+  height: 3ex;
+}
+```
+
+```html
+<div id="editor"></div>
+```
+
+```js
+const editorEl = document.getElementById("editor");
+const editContext = new EditContext();
+editorEl.editContext = editContext;
+
+editContext.addEventListener("textupdate", (e) => {
+  // 現在のコンテンツをクリアします。
+  editorEl.textContent = "";
+
+  const text = editContext.text;
+  const { selectionStart, selectionEnd } = e;
+
+  // 選択範囲の前のテキストを描画します。
+  const textBefore = document.createElement("span");
+  textBefore.textContent = text.substring(0, selectionStart);
+
+  // 選択されたテキストまたはキャレットを描画します。
+  const textSelected = document.createElement("span");
+  textSelected.classList.add("selection");
+  textSelected.textContent = text.substring(selectionStart, selectionEnd);
+
+  // 選択範囲の後のテキストを描画します。
+  const textAfter = document.createElement("span");
+  textAfter.textContent = text.substring(selectionEnd);
+
+  editorEl.appendChild(textBefore);
+  editorEl.appendChild(textSelected);
+  editorEl.appendChild(textAfter);
+
+  console.log(`Text before selection: ${textBefore.textContent}`);
+  console.log(`Selected text: ${textSelected.textContent}`);
+  console.log(`Text after selection: ${textAfter.textContent}`);
+});
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}

files/ja/web/api/textupdateevent/selectionstart/index.md

@@ -0,0 +1,84 @@
+---
+title: "TextUpdateEvent: selectionStart プロパティ"
+slug: Web/API/TextUpdateEvent/selectionStart
+l10n:
+  sourceCommit: ee846961725e36cf7bb407afe7a2df82d2860658
+---
+
+{{APIRef("EditContext API")}}{{SeeCompatTable}}
+
+読み取り専用プロパティ **`TextUpdateEvent.selectionStart`** は、{{domxref("EditContext")}} のオブジェクトに関連付けられた編集可能な領域のテキストコンテンツ内の選択範囲 (またはキャレット) の始点の位置を表します。
+
+## 値
+
+{{jsxref("Number")}} です。
+
+## 例
+
+### `textupdate` を用いて編集されたテキストとユーザーの選択を描画する
+
+この例では、`selectionStart` プロパティを用いて {{domxref("EditContext/textupdate_event", "textupdate")}} イベントハンドラー内で選択されたテキストを描画する方法を示します。
+
+```css
+#editor {
+  height: 200px;
+  background: #eee;
+  color: black;
+}
+
+.selection {
+  display: inline-block;
+  vertical-align: bottom;
+  background: blue;
+  color: white;
+  min-width: 2px;
+  height: 3ex;
+}
+```
+
+```html
+<div id="editor"></div>
+```
+
+```js
+const editorEl = document.getElementById("editor");
+const editContext = new EditContext();
+editorEl.editContext = editContext;
+
+editContext.addEventListener("textupdate", (e) => {
+  // 現在のコンテンツをクリアします。
+  editorEl.textContent = "";
+
+  const text = editContext.text;
+  const { selectionStart, selectionEnd } = e;
+
+  // 選択範囲の前のテキストを描画します。
+  const textBefore = document.createElement("span");
+  textBefore.textContent = text.substring(0, selectionStart);
+
+  // 選択されたテキストまたはキャレットを描画します。
+  const textSelected = document.createElement("span");
+  textSelected.classList.add("selection");
+  textSelected.textContent = text.substring(selectionStart, selectionEnd);
+
+  // 選択範囲の後のテキストを描画します。
+  const textAfter = document.createElement("span");
+  textAfter.textContent = text.substring(selectionEnd);
+
+  editorEl.appendChild(textBefore);
+  editorEl.appendChild(textSelected);
+  editorEl.appendChild(textAfter);
+
+  console.log(`Text before selection: ${textBefore.textContent}`);
+  console.log(`Selected text: ${textSelected.textContent}`);
+  console.log(`Text after selection: ${textAfter.textContent}`);
+});
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}

files/ja/web/api/textupdateevent/text/index.md

@@ -0,0 +1,42 @@
+---
+title: "TextUpdateEvent: text プロパティ"
+slug: Web/API/TextUpdateEvent/text
+l10n:
+  sourceCommit: c9fe79713a9323e8f1492c3c5b802fc8776a5f6a
+---
+
+{{APIRef("EditContext API")}}{{SeeCompatTable}}
+
+読み取り専用プロパティ **`TextUpdateEvent.text`** には、{{domxref("EditContext")}} の `textupdate` イベントで更新された範囲に挿入されたテキストが格納されています。
+
+## 値
+
+{{domxref("TextUpdateEvent/updateRangeStart", "updateRangeStart")}} と {{domxref("TextUpdateEvent/updateRangeEnd", "updateRangeEnd")}} が表す添字の間に格納されたテキストを置き換えるテキストが格納された {{jsxref("String")}} です。
+
+## 例
+
+### `textupdate` を用いて挿入されたテキストと位置を表示する
+
+```html
+<div id="editor"></div>
+```
+
+```js
+const editorEl = document.getElementById("editor");
+const editContext = new EditContext();
+editorEl.editContext = editContext;
+
+editContext.addEventListener("textupdate", (e) => {
+  console.log(
+    `The user inserted the text "${e.text}" at index ${e.updateRangeStart}.`,
+  );
+});
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}

files/ja/web/api/textupdateevent/textupdateevent/index.md

@@ -0,0 +1,50 @@
+---
+title: "TextUpdateEvent: TextUpdateEvent() コンストラクター"
+slug: Web/API/TextUpdateEvent/TextUpdateEvent
+l10n:
+  sourceCommit: a6f2a5b313727d983c369dec91c4c7418b1b4f74
+---
+
+{{APIRef("TextUpdateEvent API")}}{{SeeCompatTable}}
+
+**`TextUpdateEvent()`** コンストラクターは、新しい {{DOMxRef("TextUpdateEvent")}} のオブジェクトを返します。
+
+## 構文
+
+```js-nolint
+new TextUpdateEvent(type)
+new TextUpdateEvent(type, options)
+```
+
+### 引数
+
+- `type`
+  - : イベントの種類を表す文字列です。とりうる値は `"textupdate"` です。
+- `options` {{optional_inline}}
+  - : 省略可能なオブジェクトで、以下のプロパティを持ちます。
+    - `updateRangeStart`
+      - : 編集可能な領域内のテキストのうち、更新が必要な範囲の始点の文字のオフセットを表す数値です。
+    - `updateRangeEnd`
+      - : 編集可能な領域内のテキストのうち、更新が必要な範囲の終点の文字のオフセットを表す数値です。
+    - `text`
+      - : 挿入が必要なテキストを表す文字列です。
+    - `selectionStart`
+      - : 編集可能な領域内の選択範囲の始点のオフセットを表す数値です。
+    - `selectionEnd`
+      - : 編集可能な領域内の選択範囲の終点のオフセットを表す数値です。
+    - `compositionStart`
+      - : 編集可能な領域内のテキストで変換が行われている範囲の始点のオフセットを表す数値です。
+    - `compositionEnd`
+      - : 編集可能な領域内のテキストで変換が行われている範囲の終点のオフセットを表す数値です。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- 属する {{DOMxRef("TextUpdateEvent")}} インターフェイス

files/ja/web/api/textupdateevent/updaterangeend/index.md

@@ -0,0 +1,42 @@
+---
+title: "TextUpdateEvent: updateRangeEnd プロパティ"
+slug: Web/API/TextUpdateEvent/updateRangeEnd
+l10n:
+  sourceCommit: c9fe79713a9323e8f1492c3c5b802fc8776a5f6a
+---
+
+{{APIRef("EditContext API")}}{{SeeCompatTable}}
+
+読み取り専用プロパティ **`TextUpdateEvent.updateRangeEnd`** は、{{domxref("EditContext")}} オブジェクト内で置き換えられているテキストの範囲の終点を表します。
+
+## 値
+
+{{jsxref("Number")}} です。
+
+## 例
+
+### `textupdate` を用いて挿入されたテキストと位置を表示する
+
+```html
+<div id="editor"></div>
+```
+
+```js
+const editorEl = document.getElementById("editor");
+const editContext = new EditContext();
+editorEl.editContext = editContext;
+
+editContext.addEventListener("textupdate", (e) => {
+  console.log(
+    `The user inserted the text "${e.text}" between index ${e.updateRangeStart} and index ${e.updateRangeEnd}.`,
+  );
+});
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}