Requires N:M mapping

This mapping has 1 all-to-all group: every node on one side corresponds to every node on the other, and none is deleted or inserted. Each member carries an all N:M badge; selecting one highlights all of its counterparts, in the tree and in the code view alike.

Code view:

A painting is a person's account of this edit as text, recorded independently of the node mapping - a rendering often has several equally defensible answers where the mapping has one. Deletions and insertions carry no position on the opposite side in a painting, so that panel draws no caret for them.

Before

1<!DOCTYPE html>
2<html>
3<meta charset="utf-8">
4<style>
5@font-face {
6 font-family: test;
7 src: url(../fonts/sil/CharisSIL-R.ttf);
8}
9#test {
10 font: 100px test, serif;
11 -webkit-text-fill-color: transparent;
12 -webkit-text-stroke-color: blue;
13 -webkit-text-stroke-width: 2px;
14}
15</style>
16<body>
17<div id="test">office</div>
18

After

…lines 1–8 unchanged (8 lines)
9#test {
10 font: 100px test, serif;
11 -webkit-text-fill-color: transparent;
12 -webkit-text-stroke-color: blue;
13 -webkit-text-stroke-width: 2px;
14}
15#test > span {
16 -webkit-text-fill-color: blue;
17 -webkit-text-stroke-width: 0;
18}
19</style>
20<body>
21<div id="test">of<span>f</span>ice</div>
22

Before

document
doctype
<! "<!"
doctype "DOCTYPE"
> ">"
element
start_tag
< "<"
tag_name "html"
> ">"
element
start_tag
< "<"
tag_name "meta"
attribute
attribute_name "charset"
= "="
quoted_attribute_value
" "\""
attribute_value "utf-8"
" "\""
> ">"
style_element
start_tag
< "<"
tag_name "style"
> ">"
raw_text "\n@font-face {\n font-family: test;\n src: url(../fonts/sil/C"...
end_tag
</ "</"
tag_name "style"
> ">"
element
start_tag
< "<"
tag_name "body"
> ">"
element
start_tag
< "<"
tag_name "div"
attribute
attribute_name "id"
= "="
quoted_attribute_value
" "\""
attribute_value "test"
" "\""
> ">"
text "office" all 1:3
end_tag
</ "</"
tag_name "div"
> ">"

After

document
doctype
<! "<!"
doctype "DOCTYPE"
> ">"
element
start_tag
< "<"
tag_name "html"
> ">"
element
start_tag
< "<"
tag_name "meta"
attribute
attribute_name "charset"
= "="
quoted_attribute_value
" "\""
attribute_value "utf-8"
" "\""
> ">"
style_element
start_tag
< "<"
tag_name "style"
> ">"
raw_text "\n@font-face {\n font-family: test;\n src: url(../fonts/sil/C"...
end_tag
</ "</"
tag_name "style"
> ">"
element
start_tag
< "<"
tag_name "body"
> ">"
element
start_tag
< "<"
tag_name "div"
attribute
attribute_name "id"
= "="
quoted_attribute_value
" "\""
attribute_value "test"
" "\""
> ">"
text "of" all 1:3
element
start_tag
< "<"
tag_name "span"
> ">"
text "f" all 1:3
end_tag
</ "</"
tag_name "span"
> ">"
text "ice" all 1:3
end_tag
</ "</"
tag_name "div"
> ">"