博客 / 詳情

返回

在shadowRoot裏獲取光標(selection)信息

3大瀏覽器,3種不一樣的處理方式😅

  getSelectionAndRange() {
    let selection = document.getSelection();
    if (!selection) return null;

    // 規範 getComposedRanges, CH--FF--SF17
    if ('getComposedRanges' in selection) {
      const [firstRange] = selection.getComposedRanges(this.#shadowRoot);
      if (!firstRange || !this.#editor.contains(firstRange.startContainer)) return null;

      const range = document.createRange();
      range.setStart(firstRange.startContainer, firstRange.startOffset);
      range.setEnd(firstRange.endContainer, firstRange.endOffset);
      return [selection, range] as const;
    }

    if (selection.type === 'None') {
      return null;
    }

    // shadowRoot.getSelection() CH53FF--SF--
    if ('getSelection' in this.#shadowRoot) {
      selection = this.#shadowRoot.getSelection();
      if (selection.type === 'None') return null;
      return [selection, selection.getRangeAt(0)] as const;
    }

    // selection 可穿透shadowRoot CH--FF??SF--
    if (selection.anchorNode === this.#editor || this.#editor.contains(selection.anchorNode)) {
      return [selection, selection.getRangeAt(0)] as const;
    }

    return null;
  }
user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.