highlight-api-demos/demo-compare-highlighting.html at main · ffiori/highlight-api-demos · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<html>
<meta charset="utf-8"/>
<style>
  .highlighted-with-span {
    background-color: rgba(255, 255, 0, 1);
    color: red;
  }

  ::highlight(example-highlight) {
    background-color: rgba(0, 255, 255, 0.5);
    color: blue;
  }

  body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: justify;
    font-size: 24;
  }

  button {
    font-size: 24;
    margin-top: 4px;
    margin-bottom: 4px;
  }

  #example-div {
    font-size: 40;
  }

  #node-description {
    font-size: 16;
  }
</style>
<body>
<div id="example-div">
Now you can format text with the brand new Highlight API!<br>
Just select a part of this text and click on the buttons below &#128512;<br>
You can also do the same with the traditional way of wrapping text with a span.<br>
As a bonus, you can observe what happens with the DOM by using one method or another.<br>
</div>
<br>
<button type="button" onclick="highlightSelectionWithAPIRange()">Highlight selection with API using Range</button>
<button type="button" onclick="highlightSelectionWithAPIStaticRange()">Highlight selection with API using StaticRange</button>
<br>
<button type="button" onclick="highlightSelectionWithSpans()">Highlight selection with span</button>
<br>
<button type="button" onclick="clearAllHighlightedText()">Clear all highlighted text</button>
<br><br>
<div>The node holding the text above looks as follows in the DOM:</div>
<pre id="node-description"></pre>
<script>
  const highlightedWithSpanClass = "highlighted-with-span";

  function showDivContent() {
    const root = document.getElementById("example-div");
    document.getElementById("node-description").innerText =
      `<div id="example-div">${showDivContentImpl(root, 0)}</div>`;
  }

  function showDivContentImpl(root, indentLevel) {
    let text = "";
    const indentString = " ".repeat(indentLevel * 4);

    for (let sibling = root.firstChild; sibling != null; sibling = sibling.nextSibling) {
      if (sibling.nodeType === Node.TEXT_NODE) {
        text += `\n${indentString}${sibling.textContent.trim()}`;
      } else if (sibling.matches(`span.${highlightedWithSpanClass}`)) {
        text += `\n${indentString}<span class="${highlightedWithSpanClass}">`;
        text += showDivContentImpl(sibling, indentLevel + 1);
        text += `\n${indentString}</span>`;
      } else if (sibling.matches("br")) {
        text += "<br>";
      } else {
        throw("Unexpected node in showDivContent!");
      }
    }

    return text;
  }

  showDivContent();

  /************************************************************************/

  function highlightSelectionWithSpans() {
    if(window.getSelection().isCollapsed) return;
    try {
      let span = document.createElement('span');
      span.className = highlightedWithSpanClass;
      window.getSelection().getRangeAt(0).surroundContents(span);
    } catch (error) {
      alert("You can't cross a node boundary with a span! Try with a Highlight...");
    }
    showDivContent();
  }

  function highlightSelectionWithAPIRange() {
    if(window.getSelection().isCollapsed) return;
    let range = window.getSelection().getRangeAt(0);

    if(CSS.highlights.has("example-highlight")) {
      CSS.highlights.get("example-highlight").add(range);
    }
    else {
      let highlight = new Highlight(range);
      CSS.highlights.set("example-highlight", highlight);
    }

    showDivContent();
  }

  function highlightSelectionWithAPIStaticRange() {
    if(window.getSelection().isCollapsed) return;
    let range = new StaticRange(window.getSelection().getRangeAt(0));

    if(CSS.highlights.has("example-highlight")) {
      CSS.highlights.get("example-highlight").add(range);
    }
    else {
      let highlight = new Highlight(range);
      CSS.highlights.set("example-highlight", highlight);
    }

    showDivContent();
  }

  /************************************************************************/

  function restoreWithSpans() {
    document.querySelectorAll("#example-div span").forEach(span => {
      span.parentElement.insertBefore(span.firstChild, span);
      span.remove();
    });
  }

  function restoreWithAPI() {
    CSS.highlights.delete("example-highlight");
  }

  function clearAllHighlightedText(){
    restoreWithAPI();
    restoreWithSpans();
    showDivContent();
  }
</script>
</body>
</html>