add ligatures module

index.css

@@ -248,7 +248,7 @@ section.config {
     grid-column-gap: 4px;
     grid-row-gap: 4px;
     grid-row-gap: 4px;
-    grid-template-columns: auto auto auto auto;
+    grid-template-columns: auto auto auto auto auto;
     padding: 8px;
     font-size: 10px;
     border: 1px solid var(--light-grey);
@@ -530,7 +530,7 @@ button {
 
 select {
     all: unset;
-    width: 9em;
+    width: 8.5em;
     padding: 0 .5ex;
     border: 1px solid var(--light-grey);
     border-radius: 3px;

index.html

@@ -276,7 +276,26 @@
                         </optgroup>
                     </select>
                 </p>
-            </section>
+                    <p>
+                        <button id="liga-toggle" title="ligatures">
+                            <svg width="12" height="12" alt="yes" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
+                                <g>
+                                    <path d="M7.87,5.4L5.97,4.52L5.97,3.003L10.5,5.414L10.5,6.591L5.97,8.997L5.97,7.485L7.87,6.605L1.5,6.605L1.5,5.4L7.87,5.4Z" style="fill-rule:nonzero;"/>
+                                </g>
+                            </svg>
+                            <svg width="12" height="12" alt="no" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
+                                <g transform="matrix(0.829577,0,0,0.829577,-2.51769,4.72923)">
+                                    <g transform="matrix(12,0,0,12,3.03411,5.29647)">
+                                        <rect x="0.05" y="-0.374" width="0.518" height="0.121" style="fill-rule:nonzero;"/>
+                                    </g>
+                                    <g transform="matrix(12,0,0,12,10.4521,5.29647)">
+                                        <path d="M0.393,-0.318L0.393,-0.309L0.082,-0.165L0.082,-0.013L0.537,-0.254L0.537,-0.373L0.082,-0.615L0.082,-0.462L0.393,-0.318Z" style="fill-rule:nonzero;"/>
+                                    </g>
+                                </g>
+                            </svg>
+                        </button>
+                    </p>
+                </section>
 
             <footer>
                 <h1>

index.js

@@ -6,6 +6,7 @@ import { Filters } from './modules/filters.js'
 import { Language } from './modules/language.js'
 import { Spacing } from './modules/spacing.js'
 import { Theme } from './modules/theme.js'
+import { Ligatures } from "./modules/ligatures.js";
 
 const defaultFont = 'md-io'
 const fontsize = new Fontsize()
@@ -265,6 +266,7 @@ window.addEventListener('DOMContentLoaded', () => {
   new Theme().init()
   new Spacing().init()
   new Language().init()
+  new Ligatures().init();
 
   document.querySelector('.select-list').onkeydown = (event) => {
     if (event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) {

modules/ligatures.js

@@ -0,0 +1,55 @@
+import { Cookies } from './cookies.js'
+
+export class Ligatures {
+  el = document.querySelector('#liga-toggle')
+  enabled = true
+
+  init () {
+    if (Cookies.get('ligatures')) {
+      this.enabled = Cookies.get('ligatures') === 'true'
+    }
+
+    this.el.onclick = (event) => {
+      event.preventDefault()
+      event.stopPropagation()
+      this.toggle()
+    }
+
+    window.CMeditor.on('renderLine', () => {
+      this.setLigatures(this.enabled)
+    })
+
+    this.set()
+  }
+
+  toggle () {
+    this.enabled = !this.enabled
+    this.set()
+  }
+
+  set () {
+    requestAnimationFrame(() => {
+      this.setLigatures(this.enabled)
+    })
+
+    window.CMeditor.refresh()
+
+    Cookies.set('ligatures', this.enabled)
+
+    if (this.enabled) {
+      this.el.classList.add('selected')
+      this.el.querySelector('svg[alt="yes"]').classList.add('selected')
+      this.el.querySelector('svg[alt="no"]').classList.remove('selected')
+    } else {
+      this.el.classList.remove('selected')
+      this.el.querySelector('svg[alt="yes"]').classList.remove('selected')
+      this.el.querySelector('svg[alt="no"]').classList.add('selected')
+    }
+  }
+
+  setLigatures (enabled) {
+    document.querySelectorAll('.CodeMirror pre').forEach(pre => {
+      pre.style.setProperty('font-variant-ligatures', enabled ? 'normal' : 'none')
+    })
+  }
+}