Add support for align attribute. (#31)

* Add support for align attribute.

* Update to wrapElement method

CHANGELOG.md

@@ -4,10 +4,11 @@ All notable changes to this project will be documented in this file.
 
 This project adheres to [Semantic Versioning](http://semver.org/).
 
-## 2.4.0
+## 2.4.0 (2. November 2019)
 
 + [#32](https://github.com/nadar/quill-delta-parser/pull/32) Added new `wrapElement` method to simplify building block listeners.
 + [#30](https://github.com/nadar/quill-delta-parser/issues/30) List opening tag process has been simplified in order to support single bullet lists.
++ [#31](https://github.com/nadar/quill-delta-parser/pull/31) Add support for align attribute.
 
 ## 2.3.0 (23. October 2019)
 

src/Lexer.php

@@ -16,6 +16,7 @@
 use nadar\quill\listener\Color;
 use nadar\quill\listener\Font;
 use nadar\quill\listener\Script;
+use nadar\quill\listener\Align;
 
 /**
  * Lexer Delta Parser.
@@ -149,6 +150,7 @@ public function loadBuiltinListeneres()
         $this->registerListener(new Blockquote);
         $this->registerListener(new Font);
         $this->registerListener(new Script);
+        $this->registerListener(new Align);
     }
 
     /**

src/listener/Align.php

@@ -0,0 +1,52 @@
+<?php
+
+namespace nadar\quill\listener;
+
+use Exception;
+use nadar\quill\Line;
+use nadar\quill\BlockListener;
+use nadar\quill\Lexer;
+
+/**
+ * Convert align attributes into p tags with text-align css applied.
+ *
+ * @author Gaëtan Faugère <[email protected]>
+ * @since 2.4.0
+ */
+class Align extends BlockListener
+{
+    /**
+     * @var array Supported alignments.
+     */
+    public $alignments = ['center', 'right', 'justify'];
+
+    /**
+     * {@inheritDoc}
+     */
+    public function process(Line $line)
+    {
+        $alignment = $line->getAttribute('align');
+        if ($alignment) {
+            $this->pick($line, ['alignment' => $alignment]);
+            $line->setDone();
+        }
+    }
+
+    /**
+     * {@inheritDoc}
+     *
+     * @throws Exception for unknown alignment values
+     */
+    public function render(Lexer $lexer)
+    {
+        foreach ($this->picks() as $pick) {
+            if (!in_array($pick->alignment, $this->alignments)) {
+                // prevent html injection in case the attribute is user input
+                throw new Exception('An unknown alignment "' . $pick->alignment . '" has been detected.');
+            }
+
+        }
+
+        $this->wrapElement('<p style="text-align: {alignment};">{__buffer__}</p>', ['alignment']);
+    }
+}

tests/AlignContentTest.php

@@ -0,0 +1,45 @@
+<?php
+namespace nadar\quill\tests;
+
+class AlignContentTest extends DeltaTestCase
+{
+	public $json = <<<'JSON'
+{"ops":[
+  {"insert":"Lorem "},
+  {"attributes":{"bold":true},"insert":"Ipsum"},
+  {"insert":" Dolor "},
+  {"attributes":{"underline":true,"italic":true},"insert":"Sit"},
+  {"insert":" Amet"},
+  {"attributes":{"align":"center"},"insert":"\n"},
+  {"insert":"This images is right aligned : "},
+  {"insert":{"image":"https://example.com/image.jpg"}},
+  {"attributes":{"align":"right"},"insert":"\n"},
+  {"insert":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer "},
+  {"attributes":{"bold":true},"insert":"Lorem"},
+  {"insert":" nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla "},
+  {"attributes":{"bold":true},"insert":"cursus"},
+  {"insert":" quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus "},
+  {"attributes":{"bold":true},"insert":"sagittis"},
+  {"insert":" sed augue semper porta. Mauris massa. Vestibulum "},
+  {"attributes":{"italic":true},"insert":"quis"},
+  {"insert":" lacinia arcu "},
+  {"attributes":{"italic":true},"insert":"sem"},
+  {"insert":" eget "},
+  {"attributes":{"bold":true},"insert":"augue"},
+  {"insert":" nulla. Class aptent taciti sociosqu "},
+  {"attributes":{"bold":true},"insert":"massa."},
+  {"insert":" ad litora torquent per conubia nostra, per "},
+  {"attributes":{"italic":true},"insert":"porta."},
+  {"insert":" inceptos himenaeos. Curabitur "},
+  {"attributes":{"bold":true},"insert":"taciti"},
+  {"insert":" sodales ligula in "},
+  {"attributes":{"bold":true},"insert":"conubia"},
+  {"insert":" libero."},
+  {"attributes":{"align":"justify"},"insert":"\n"}
+]}
+JSON;
+
+	public $html = <<<'EOT'
+<p style="text-align: center;">Lorem <strong>Ipsum</strong> Dolor <u><em>Sit</em></u> Amet</p><p style="text-align: right;">This images is right aligned : <img src="https://example.com/image.jpg" alt="" class="img-responsive img-fluid" /></p><p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer <strong>Lorem</strong> nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla <strong>cursus</strong> quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus <strong>sagittis</strong> sed augue semper porta. Mauris massa. Vestibulum <em>quis</em> lacinia arcu <em>sem</em> eget <strong>augue</strong> nulla. Class aptent taciti sociosqu <strong>massa.</strong> ad litora torquent per conubia nostra, per <em>porta.</em> inceptos himenaeos. Curabitur <strong>taciti</strong> sodales ligula in <strong>conubia</strong> libero.</p>
+EOT;
+}

tests/AlignInjectionTest.php

@@ -0,0 +1,18 @@
+<?php
+
+namespace nadar\quill\tests;
+
+use nadar\quill\Lexer;
+use PHPUnit\Framework\TestCase;
+
+class AlignInjectionTest extends TestCase
+{
+    public function testUnknownAlignException()
+    {
+        $lexer = new Lexer('[{"insert":"Test"},{"attributes":{"align":"<script>alert(1)</script>"},"insert":"\n"}]');
+
+        $this->expectException(\Exception::class);
+        $this->expectExceptionMessage('An unknown alignment "<script>alert(1)</script>" has been detected.');
+        $lexer->render();
+    }
+}

tests/ParserTest.php

@@ -57,6 +57,7 @@ class ParserTest extends TestCase
         '<h2></h2><h2>title</h2><p>text</p>' => '{"ops":[{"attributes":{"header":2},"insert":"\n"},{"insert":"title"},{"attributes":{"header":2},"insert":"\n"},{"insert":"text\n"}]}',
         '<blockquote></blockquote><blockquote>blockquote</blockquote><p>text</p>' => '{"ops":[{"attributes":{"blockquote":true},"insert":"\n"},{"insert":"blockquote"},{"attributes":{"blockquote":true},"insert":"\n"},{"insert":"text\n"}]}',
         '<p>lorem <sub>ipsum</sub> dolor <sup>sit</sup> amet</p>' => '{"ops":[{"insert":"lorem "},{"attributes":{"script":"sub"},"insert":"ipsum"},{"insert":" dolor "},{"attributes":{"script":"super"},"insert":"sit"},{"insert":" amet\n"}]}',
+        '<p>Lorem</p><p style="text-align: center;">Ipsum</p><p style="text-align: right;">Dolor</p><p style="text-align: justify;">Sit Amet</p>' => '{"ops":[{"insert":"Lorem\nIpsum"},{"attributes":{"align":"center"},"insert":"\n"},{"insert":"Dolor"},{"attributes":{"align":"right"},"insert":"\n"},{"insert":"Sit Amet"},{"attributes":{"align":"justify"},"insert":"\n"}]}',
     ];
 
     public function testHtmlIsEqual()