Removed our custom ID stripping since upstream deals with them now

Fixes asciidoctor#192 but also removes our workaround in asciidoctor#150.

Test cases from asciidoctor#192 were added.

Will impact links because the prepending of `_` is reintroduced on automatically generated links (Asciidoctor's behavior) so CHANGELOG will be explicit about that.

examples/history-regression-tests.adoc

@@ -19,9 +19,15 @@
 
 == Illegal çhàrâctérß
 
-[[explicit]]
+[[explicit_with_anchor]]
 == Explicit section id
 
+[id=explicit_with_id]
+== Another Explicit Section Id
+
+[#explicit_with_short_anchor]
+== 3rd Explicit is the Charm
+
 == 67848727
 // Everything should be stripped in the id
 
@@ -32,3 +38,7 @@
 
 == Repeated title
 // Exact same title means exact same id
+
+== hello こんにちは
+
+== hello 你好

package.json

@@ -42,7 +42,7 @@
   "homepage": "https://github.com/asciidoctor/asciidoctor-reveal.js",
   "dependencies": {
     "asciidoctor.js": "1.5.6",
-    "reveal.js": "3.6.0"
+    "reveal.js": "3.7.0"
   },
   "devDependencies": {
     "bestikk-log": "0.1.0",

templates/section.html.slim

@@ -1,10 +1,4 @@
 / OPTIONS PROCESSING
-/ strip IDs the same way revealjs does to make links to direct slides work using URL fragments gh#127
-/ Strip unallowed characters globally then strip anything non a-Z from start of string until something matches
-/ TODO remove when hakimel/reveal.js#1230 is fixed
-- _id = id.gsub(/[^a-zA-Z0-9\-\_\:\.]/, '').gsub(/^[^a-zA-Z]+/, '')
-
-
 / hide slides on %conceal, %notitle and named "!"
 - titleless = (title = self.title) == '!'
 - hide_title = (titleless || (option? :notitle) || (option? :conceal))
@@ -43,7 +37,7 @@
 - if @level == 1 && !vertical_slides.empty?
   section
     / TODO: try to get rid of duplication w/ standalone slide section
-    section(id=(titleless ? nil : _id)
+    section(id=(titleless ? nil : id)
       class=roles
       data-transition=(attr 'transition')
       data-transition-speed=(attr 'transition-speed')
@@ -72,7 +66,7 @@
     h level=(@level) =title
     =content.chomp
   - else
-    section(id=(titleless ? nil : _id)
+    section(id=(titleless ? nil : id)
       class=roles
       data-transition=(attr 'transition')
       data-transition-speed=(attr 'transition-speed')

test/doctest/admonitions-icons.html

@@ -3,7 +3,7 @@
   <section class="title" data-state="title">
     <h1>Admonitions</h1>
   </section>
-  <section id="admonition">
+  <section id="_admonition">
     <h2>Admonition</h2>
     <div class="admonitionblock important">
       <table>
@@ -16,7 +16,7 @@ <h2>Admonition</h2>
       </table>
     </div>
   </section>
-  <section id="admonition_block">
+  <section id="_admonition_block">
     <h2>Admonition block</h2>
     <div class="admonitionblock warning">
       <table>
@@ -33,7 +33,7 @@ <h2>Admonition block</h2>
       </table>
     </div>
   </section>
-  <section id="admonition_block_complex">
+  <section id="_admonition_block_complex">
     <h2>Admonition block complex</h2>
     <div class="admonitionblock note">
       <table>
@@ -61,7 +61,7 @@ <h2>Admonition block complex</h2>
       </table>
     </div>
   </section>
-  <section id="admonition_with_caption">
+  <section id="_admonition_with_caption">
     <h2>Admonition with caption</h2>
     <div class="admonitionblock tip">
       <table>

test/doctest/admonitions.html

@@ -3,7 +3,7 @@
   <section class="title" data-state="title">
     <h1>Admonitions</h1>
   </section>
-  <section id="admonition">
+  <section id="_admonition">
     <h2>Admonition</h2>
     <div class="admonitionblock important">
       <table>
@@ -14,7 +14,7 @@ <h2>Admonition</h2>
       </table>
     </div>
   </section>
-  <section id="admonition_block">
+  <section id="_admonition_block">
     <h2>Admonition block</h2>
     <div class="admonitionblock warning">
       <table>
@@ -29,7 +29,7 @@ <h2>Admonition block</h2>
       </table>
     </div>
   </section>
-  <section id="admonition_block_complex">
+  <section id="_admonition_block_complex">
     <h2>Admonition block complex</h2>
     <div class="admonitionblock note">
       <table>
@@ -55,7 +55,7 @@ <h2>Admonition block complex</h2>
       </table>
     </div>
   </section>
-  <section id="admonition_with_caption">
+  <section id="_admonition_with_caption">
     <h2>Admonition with caption</h2>
     <div class="admonitionblock tip">
       <table>

test/doctest/background-color.html

@@ -3,16 +3,16 @@
   <section class="title" data-state="title">
     <h1>Colorful Presentation</h1>
   </section>
-  <section data-background-color="yellow" id="hello">
+  <section data-background-color="yellow" id="_hello">
     <h2>Hello</h2>
   </section>
-  <section class="red background" id="here">
+  <section class="red background" id="_here">
     <h2>Here</h2>
     <div class="paragraph">
       <p>Red</p>
     </div>
   </section>
-  <section class="green" id="we">
+  <section class="green" id="_we">
     <h2>We</h2>
     <div class="paragraph">
       <p>Green</p>
@@ -26,19 +26,19 @@ <h2>We</h2>
       </table>
     </div>
   </section>
-  <section class="blue canvas" id="go">
+  <section class="blue canvas" id="_go">
     <h2>Go</h2>
     <div class="paragraph">
       <p>Blue</p>
     </div>
   </section>
-  <section class="topic" id="default_color">
+  <section class="topic" id="_default_color">
     <h2>Default color</h2>
     <div class="paragraph">
       <p>but fancy font</p>
     </div>
   </section>
-  <section class="topic red background" id="fancy_font">
+  <section class="topic red background" id="_fancy_font">
     <h2>fancy font</h2>
     <div class="paragraph">
       <p>and color!</p>

test/doctest/concealed-slide-titles.html

@@ -8,12 +8,12 @@ <h1>Concealed Slide Titles</h1>
       <p>This</p>
     </div>
   </section>
-  <section id="presentation">
+  <section id="_presentation">
     <div class="paragraph">
       <p>presentation’s titles</p>
     </div>
   </section>
-  <section id="concealed">
+  <section id="_concealed">
     <div class="paragraph">
       <p>should be concealed</p>
     </div>

test/doctest/customcss.html

@@ -4,7 +4,7 @@
     <h1>Custom CSS</h1>
     <p class="author"><small>Author</small></p>
   </section>
-  <section id="slide_1">
+  <section id="_slide_1">
     <h2>Slide 1</h2>
   </section>
 </div>

test/doctest/data-background-newstyle.html

@@ -3,45 +3,45 @@
   <section class="title" data-state="title">
     <h1>Test slide deck</h1>
   </section>
-  <section data-background-image="images/cover.jpg" data-background-size="cover" id="opening"></section>
-  <section data-background-image="images/cover.jpg" data-background-size="cover" id="canvas">
+  <section data-background-image="images/cover.jpg" data-background-size="cover" id="_opening"></section>
+  <section data-background-image="images/cover.jpg" data-background-size="cover" id="_canvas">
     <h2>canvas</h2>
   </section>
   <section data-background-image="images/70s.jpg" data-background-size="cover">
     <div class="imageblock" style=""><img alt="meme 2" src="images/meme-2.jpg" width="500px"></div>
   </section>
-  <section id="i_have_no_background">
+  <section id="_i_have_no_background">
     <h2>I have no background</h2>
   </section>
   <section>
     <div class="imageblock" style=""><img alt="meme 7" src="images/meme-7.png"></div>
   </section>
   <section data-background-image="images/70s.jpg" data-background-size="contain"></section>
   <section>
-    <section data-background-image="images/bio.jpg" data-background-size="100px" id="hey">
+    <section data-background-image="images/bio.jpg" data-background-size="100px" id="_hey">
       <h2>hey</h2>
     </section>
-    <section data-background-image="images/bio.jpg" data-background-size="200px" id="here">
+    <section data-background-image="images/bio.jpg" data-background-size="200px" id="_here">
       <h2>here</h2>
     </section>
-    <section data-background-image="images/bio.jpg" data-background-size="400px" id="i">
+    <section data-background-image="images/bio.jpg" data-background-size="400px" id="_i">
       <h2>I</h2>
     </section>
-    <section data-background-image="images/bio.jpg" data-background-size="800px" id="come">
+    <section data-background-image="images/bio.jpg" data-background-size="800px" id="_come">
       <h2>come</h2>
     </section>
   </section>
-  <section data-background-image="https://upload.wikimedia.org/wikipedia/commons/b/b2/Hausziege_04.jpg" data-background-size="contain" id="url_goat">
+  <section data-background-image="https://upload.wikimedia.org/wikipedia/commons/b/b2/Hausziege_04.jpg" data-background-size="contain" id="_url_goat">
     <h2>URL goat</h2>
   </section>
-  <section data-background-color="yellow" id="no_yellow_regression">
+  <section data-background-color="yellow" id="_no_yellow_regression">
     <h2>No [yellow] regression</h2>
   </section>
   <section>
-    <section id="empty_vertical_top">
+    <section id="_empty_vertical_top">
       <h2>Empty Vertical top</h2>
     </section>
-    <section data-background-image="images/70s.jpg" data-background-size="cover" id="vertical_with_background">
+    <section data-background-image="images/70s.jpg" data-background-size="cover" id="_vertical_with_background">
       <h2>Vertical with background</h2>
     </section>
   </section>

test/doctest/data-background-oldstyle.html

@@ -7,31 +7,31 @@ <h1>Test slide deck</h1>
   <section data-background-image="images/70s.jpg" data-background-size="cover">
     <div class="imageblock" style=""><img alt="meme 2" src="images/meme-2.jpg" width="500px"></div>
   </section>
-  <section id="i_have_no_background">
+  <section id="_i_have_no_background">
     <h2>I have no background</h2>
   </section>
   <section>
     <div class="imageblock" style=""><img alt="meme 7" src="images/meme-7.png"></div>
   </section>
   <section data-background-image="images/70s.jpg" data-background-size="contain"></section>
   <section>
-    <section data-background-image="images/bio.jpg" data-background-size="100px" id="hey">
+    <section data-background-image="images/bio.jpg" data-background-size="100px" id="_hey">
       <h2>hey</h2>
     </section>
-    <section data-background-image="images/bio.jpg" data-background-size="200px" id="here">
+    <section data-background-image="images/bio.jpg" data-background-size="200px" id="_here">
       <h2>here</h2>
     </section>
-    <section data-background-image="images/bio.jpg" data-background-size="400px" id="i">
+    <section data-background-image="images/bio.jpg" data-background-size="400px" id="_i">
       <h2>I</h2>
     </section>
-    <section data-background-image="images/bio.jpg" data-background-size="800px" id="come">
+    <section data-background-image="images/bio.jpg" data-background-size="800px" id="_come">
       <h2>come</h2>
     </section>
   </section>
-  <section data-background-image="https://upload.wikimedia.org/wikipedia/commons/b/b2/Hausziege_04.jpg" data-background-size="contain" id="url_goat">
+  <section data-background-image="https://upload.wikimedia.org/wikipedia/commons/b/b2/Hausziege_04.jpg" data-background-size="contain" id="_url_goat">
     <h2>URL Goat</h2>
   </section>
-  <section data-background-color="yellow" id="no_yellow_regression">
+  <section data-background-color="yellow" id="_no_yellow_regression">
     <h2>No [yellow] regression</h2>
   </section>
 </div>

test/doctest/document.html

@@ -1017,7 +1017,7 @@ <h1>Document Title</h1>
         <section class="title" data-state="title">
           <h1>Document Title</h1>
         </section>
-        <section id="cavern_glow">
+        <section id="_cavern_glow">
           <h2>Cavern Glow</h2>
         </section>
       </div>
@@ -1178,7 +1178,7 @@ <h2>Cavern Glow</h2>
         <section class="title" data-state="title">
           <h1>Document Title</h1>
         </section>
-        <section id="cavern_glow">
+        <section id="_cavern_glow">
           <h2>Cavern Glow</h2>
         </section>
       </div>

test/doctest/embedded.html

@@ -17,11 +17,11 @@ <h1>The Dangerous and Thrilling Documentation Chronicles</h1>
 </div>
 
 <!-- .toc -->
-<section id="cavern_glow">
+<section id="_cavern_glow">
   <h2>Cavern Glow</h2>
 </section>
 
 <!-- .toc-title -->
-<section id="cavern_glow">
+<section id="_cavern_glow">
   <h2>Cavern Glow</h2>
 </section>

test/doctest/history-regression-tests.html

@@ -3,34 +3,46 @@
   <section class="title" data-state="title">
     <h1>First Slide</h1>
   </section>
-  <section id="second_slide">
+  <section id="_second_slide">
     <h2>Second Slide</h2>
   </section>
-  <section id="rd_slide">
+  <section id="_3rd_slide">
     <h2>3rd Slide</h2>
   </section>
-  <section id="p3rhaps_this_will_not_work">
+  <section id="_p3rhaps_this_will_not_work">
     <h2>P3rhaps this will not work</h2>
   </section>
-  <section id="th_slide">
+  <section id="_5th_slide">
     <h2>5th Slide</h2>
   </section>
-  <section id="illegal_hrctr">
+  <section id="_illegal_çhàrâctérß">
     <h2>Illegal çhàrâctérß</h2>
   </section>
-  <section id="explicit">
+  <section id="explicit_with_anchor">
     <h2>Explicit section id</h2>
   </section>
-  <section id="">
+  <section id="explicit_with_id">
+    <h2>Another Explicit Section Id</h2>
+  </section>
+  <section id="explicit_with_short_anchor">
+    <h2>3rd Explicit is the Charm</h2>
+  </section>
+  <section id="_67848727">
     <h2>67848727</h2>
   </section>
-  <section id="repeated_title">
+  <section id="_repeated_title">
     <h2>Repeated title</h2>
   </section>
   <section></section>
-  <section id="repeated_title_2">
+  <section id="_repeated_title_2">
     <h2>Repeated title</h2>
   </section>
+  <section id="_hello_こんにちは">
+    <h2>hello こんにちは</h2>
+  </section>
+  <section id="_hello_你好">
+    <h2>hello 你好</h2>
+  </section>
 </div>
 <script src="reveal.js/lib/js/head.min.js"></script><script src="reveal.js/js/reveal.js"></script><script>
   Array.prototype.slice.call(document.querySelectorAll('.slides section')).forEach(function(slide) {