Add Editor#removeAttribute to remove section attributes 🕯

Author: ZeeJab

src/js/editor/editor.js

@@ -969,6 +969,17 @@ class Editor {
     this.run(postEditor => postEditor.setAttribute(key, value, this.range));
   }
 
+  /**
+   * Removes an attribute from the current active section(s).
+   *
+   * @param {String} key The attribute. The only valid attribute is 'text-align'.
+   * @public
+   * @see PostEditor#removeAttribute
+   */
+  removeAttribute(key) {
+    this.run(postEditor => postEditor.removeAttribute(key, this.range));
+  }
+
   /**
    * Finds and runs the first matching key command for the event
    *

src/js/editor/post.js

@@ -841,6 +841,24 @@ class PostEditor {
   }
 
   setAttribute(key, value, range=this._range) {
+    this._mutateAttribute(key, range, (section, attribute) => {
+      if (section.getAttribute(attribute) !== value) {
+        section.setAttribute(attribute, value);
+        return true;
+      }
+    });
+  }
+
+  removeAttribute(key, range=this._range) {
+    this._mutateAttribute(key, range, (section, attribute) => {
+      if (section.hasAttribute(attribute)) {
+        section.removeAttribute(attribute);
+        return true;
+      }
+    });
+  }
+
+  _mutateAttribute(key, range, cb) {
     range = toRange(range);
     let { post } = this.editor;
     let attribute = `data-md-${key}`;
@@ -850,8 +868,7 @@ class PostEditor {
         section = section.parent;
       }
 
-      if (section.getAttribute(attribute) !== value) {
-        section.setAttribute(attribute, value);
+      if (cb(section, attribute) === true) {
         this._markDirty(section);
       }
     });

src/js/models/_attributable.js

@@ -12,6 +12,8 @@ export const VALID_ATTRIBUTES = [
 export function attributable(ctx) {
   ctx.attributes = {};
 
+  ctx.hasAttribute = key => key in ctx.attributes;
+
   ctx.setAttribute = (key, value) => {
     if (!contains(VALID_ATTRIBUTES, key)) {
       throw new Error(`Invalid attribute "${key}" was passed. Constrain attributes to the spec-compliant whitelist.`);

tests/unit/editor/post-test.js

@@ -691,6 +691,31 @@ test('#setAttribute sets attribute of a single section', (assert) => {
   );
 });
 
+test('#removeAttribute removes attribute of a single section', (assert) => {
+  let post = Helpers.postAbstract.build(({post, markupSection}) => {
+    return post([markupSection('p', [], false, { 'data-md-text-align': 'center' })]);
+  });
+
+  mockEditor = renderBuiltAbstract(post, mockEditor);
+  const range = Range.create(post.sections.head, 0);
+
+  assert.deepEqual(
+    post.sections.head.attributes,
+    {
+      'data-md-text-align': 'center'
+    }
+  );
+
+  postEditor = new PostEditor(mockEditor);
+  postEditor.removeAttribute('text-align', range);
+  postEditor.complete();
+
+  assert.deepEqual(
+    post.sections.head.attributes,
+    {}
+  );
+});
+
 test('#setAttribute sets attribute of multiple sections', (assert) => {
   let post = Helpers.postAbstract.build(
     ({post, markupSection, marker, cardSection}) => {
@@ -724,6 +749,35 @@ test('#setAttribute sets attribute of multiple sections', (assert) => {
   );
 });
 
+test('#removeAttribute removes attribute of multiple sections', (assert) => {
+  let post = Helpers.postAbstract.build(
+    ({post, markupSection, marker, cardSection}) => {
+    return post([
+      markupSection('p', [marker('abc')], false, { 'data-md-text-align': 'center' }),
+      cardSection('my-card'),
+      markupSection('p', [marker('123')], { 'data-md-text-align': 'left' })
+    ]);
+  });
+
+  mockEditor = renderBuiltAbstract(post, mockEditor);
+  const range = Range.create(post.sections.head, 0,
+                             post.sections.tail, 2);
+
+  postEditor = new PostEditor(mockEditor);
+  postEditor.removeAttribute('text-align', range);
+  postEditor.complete();
+
+  assert.deepEqual(
+    post.sections.head.attributes,
+    {}
+  );
+  assert.ok(post.sections.objectAt(1).isCardSection);
+  assert.deepEqual(
+    post.sections.tail.attributes,
+    {}
+  );
+});
+
 test('#setAttribute sets attribute of a single list', (assert) => {
   let post = Helpers.postAbstract.build(
     ({post, listSection, listItem, marker, markup}) => {