remove header id generation

closes #700

formats/header.js

@@ -5,19 +5,6 @@ class Header extends Block {
   static formats(domNode) {
     return this.tagName.indexOf(domNode.tagName) + 1;
   }
-
-  optimize() {
-    super.optimize();
-    let text = this.domNode.textContent.toLowerCase();
-    let id = text.replace(/[^a-z0-9]+/g, '-').replace(/^\-/, '').replace(/\-$/, '');
-    if (this.domNode.id !== id) {
-      if (id.length === 0) {
-        this.domNode.removeAttribute('id');
-      } else {
-        this.domNode.id = id;
-      }
-    }
-  }
 }
 Header.blotName = 'header';
 Header.tagName = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6'];

test/unit/blots/block.js

@@ -36,8 +36,8 @@ describe('Block', function() {
   it('insert into formatted', function() {
     let scroll = this.initialize(Scroll, '<h1>Welcome</h1>');
     scroll.insertAt(3, 'l\n');
-    expect(scroll.domNode.firstChild.outerHTML).toEqualHTML('<h1 id="well">Well</h1>');
-    expect(scroll.domNode.childNodes[1].outerHTML).toEqualHTML('<h1 id="come">come</h1>');
+    expect(scroll.domNode.firstChild.outerHTML).toEqualHTML('<h1>Well</h1>');
+    expect(scroll.domNode.childNodes[1].outerHTML).toEqualHTML('<h1>come</h1>');
   });
 
   it('delete line contents', function() {
@@ -49,7 +49,7 @@ describe('Block', function() {
   it('join lines', function() {
     let scroll = this.initialize(Scroll, '<h1>Hello</h1><h2>World!</h2>');
     scroll.deleteAt(5, 1);
-    expect(scroll.domNode).toEqualHTML('<h1 id="helloworld">HelloWorld!</h1>');
+    expect(scroll.domNode).toEqualHTML('<h1>HelloWorld!</h1>');
   });
 
   it('join empty lines', function() {
@@ -67,6 +67,6 @@ describe('Block', function() {
   it('format newline', function() {
     let scroll = this.initialize(Scroll, '<h1>Hello</h1>');
     scroll.formatAt(5, 1, 'header', 2);
-    expect(scroll.domNode).toEqualHTML('<h2 id="hello">Hello</h2>');
+    expect(scroll.domNode).toEqualHTML('<h2>Hello</h2>');
   });
 });

test/unit/core/editor.js

@@ -198,7 +198,7 @@ describe('Editor', function() {
     it('line', function() {
       let editor = this.initialize(Editor, '<p>0123</p>');
       editor.formatLine(1, 1, { header: 1 });
-      expect(editor.scroll.domNode).toEqualHTML('<h1 id="0123">0123</h1>');
+      expect(editor.scroll.domNode).toEqualHTML('<h1>0123</h1>');
     });
   });
 
@@ -349,25 +349,25 @@ describe('Editor', function() {
     it('append text with newline', function() {
       let editor = this.initialize(Editor, '<p>0123</p>');
       editor.applyDelta(new Delta().retain(5).insert('5678').insert('\n', { header: 2 }));
-      expect(this.container).toEqualHTML('<p>0123</p><h2 id="5678">5678</h2>');
+      expect(this.container).toEqualHTML('<p>0123</p><h2>5678</h2>');
     });
 
     it('append non-isolated newline', function() {
       let editor = this.initialize(Editor, '<p>0123</p>');
       editor.applyDelta(new Delta().retain(5).insert('5678\n', { header: 2 }));
-      expect(this.container).toEqualHTML('<p>0123</p><h2 id="5678">5678</h2>');
+      expect(this.container).toEqualHTML('<p>0123</p><h2>5678</h2>');
     });
 
     it('eventual append', function() {
       let editor = this.initialize(Editor, '<p>0123</p>');
       editor.applyDelta(new Delta().retain(2).insert('ab\n', { header: 1 }).retain(3).insert('cd\n', { header: 2 }));
-      expect(this.container).toEqualHTML('<h1 id="01ab">01ab</h1><p>23</p><h2 id="cd">cd</h2>');
+      expect(this.container).toEqualHTML('<h1>01ab</h1><p>23</p><h2>cd</h2>');
     });
 
     it('append text, embed and newline', function() {
       let editor = this.initialize(Editor, '<p>0123</p>');
       editor.applyDelta(new Delta().retain(5).insert('5678').insert({ image: '/assets/favicon.png' }).insert('\n', { header: 2 }));
-      expect(this.container).toEqualHTML('<p>0123</p><h2 id="5678">5678<img src="/assets/favicon.png"></h2>');
+      expect(this.container).toEqualHTML('<p>0123</p><h2>5678<img src="/assets/favicon.png"></h2>');
     });
 
     it('append multiple lines', function() {
@@ -376,7 +376,7 @@ describe('Editor', function() {
         .insert('56').insert('\n', { header: 1 })
         .insert('89').insert('\n', { header: 2 })
       );
-      expect(this.container).toEqualHTML('<p>0123</p><h1 id="56">56</h1><h2 id="89">89</h2>');
+      expect(this.container).toEqualHTML('<p>0123</p><h1>56</h1><h2>89</h2>');
     });
 
     it('append block embed', function() {

test/unit/core/quill.js

@@ -57,7 +57,7 @@ describe('Quill', function() {
     it('formatLine()', function() {
       this.quill.formatLine(1, 1, 'header', 2);
       let change = new Delta().retain(8).retain(1, { header: 2});
-      expect(this.quill.root).toEqualHTML('<h2 id="01234567">0123<em>45</em>67</h2>');
+      expect(this.quill.root).toEqualHTML('<h2>0123<em>45</em>67</h2>');
       expect(this.quill.emitter.emit).toHaveBeenCalledWith(Emitter.events.TEXT_CHANGE, change, this.oldDelta, Emitter.sources.API);
     });
 
@@ -178,7 +178,7 @@ describe('Quill', function() {
       quill.setContents(delta);
       expect(quill.getContents()).toEqual(delta);
       expect(quill.root).toEqualHTML(`
-        <h1 id="welcome">Welcome</h1>
+        <h1>Welcome</h1>
         <p>Hello</p>
         <p>World<strong>!</strong></p>
       `);

test/unit/formats/code.js

@@ -30,7 +30,7 @@ describe('Code', function() {
     let editor = this.initialize(Editor, '<pre>0123</pre>');
     editor.formatText(4, 1, { 'header': 1 });
     expect(editor.getDelta()).toEqual(new Delta().insert('0123').insert('\n', { header: 1 }));
-    expect(editor.scroll.domNode).toEqualHTML('<h1 id="0123">0123</h1>');
+    expect(editor.scroll.domNode).toEqualHTML('<h1>0123</h1>');
   });
 
   it('ignore formatAt', function() {

test/unit/formats/header.js

@@ -10,7 +10,7 @@ describe('Header', function() {
       .insert('0123', { italic: true })
       .insert('\n', { header: 1 })
     );
-    expect(editor.scroll.domNode).toEqualHTML('<h1 id ="0123"><em>0123</em></h1>');
+    expect(editor.scroll.domNode).toEqualHTML('<h1><em>0123</em></h1>');
   });
 
   it('remove', function() {
@@ -30,6 +30,6 @@ describe('Header', function() {
       .insert('0123', { italic: true })
       .insert('\n', { header: 2 })
     );
-    expect(editor.scroll.domNode).toEqualHTML('<h2 id="0123"><em>0123</em></h2>');
+    expect(editor.scroll.domNode).toEqualHTML('<h2><em>0123</em></h2>');
   });
 });

test/unit/modules/clipboard.js

@@ -31,7 +31,7 @@ describe('Clipboard', function() {
       let text = this.quill.getText(2, 5);
       this.quill.clipboard.onCut(this.event);
       expect(this.event.clipboardData.setData).toHaveBeenCalledWith('text', text);
-      expect(this.quill.root).toEqualHTML('<h1 id="0178">01<em>7</em>8</h1>');
+      expect(this.quill.root).toEqualHTML('<h1>01<em>7</em>8</h1>');
       expect(this.quill.getSelection()).toEqual(new Range(2));
     });
 
@@ -40,7 +40,7 @@ describe('Clipboard', function() {
       this.event.clipboardData.types = ['text', 'application/json'];
       spyOn(this.event.clipboardData, 'getData').and.returnValue(jsonString);
       this.quill.clipboard.onPaste(this.event);
-      expect(this.quill.root).toEqualHTML('<h1 id="01-78">01<strong>|</strong><em>7</em>8</h1>');
+      expect(this.quill.root).toEqualHTML('<h1>01<strong>|</strong><em>7</em>8</h1>');
       expect(this.event.clipboardData.getData).toHaveBeenCalledWith('application/json');
       expect(this.quill.getSelection()).toEqual(new Range(3));
     });
@@ -51,7 +51,7 @@ describe('Clipboard', function() {
       this.quill.clipboard.container.innerHTML = '<strong>|</strong>';
       this.quill.clipboard.onPaste(this.event);
       setTimeout(() => {
-        expect(this.quill.root).toEqualHTML('<h1 id="01-78">01<strong>|</strong><em>7</em>8</h1>');
+        expect(this.quill.root).toEqualHTML('<h1>01<strong>|</strong><em>7</em>8</h1>');
         expect(this.quill.getSelection()).toEqual(new Range(3));
         done();
       }, 2);