feat: add parse alignment for p tag

build/transforms.d.ts

@@ -34,6 +34,8 @@ export declare type block = {
         embed?: string;
         width?: number;
         height?: number;
+        alignment?: "left" | "right" | "center" | "justify";
+        align?: "left" | "right" | "center" | "justify";
     };
 };
 declare const transforms: transforms;

src/transforms.ts

@@ -15,6 +15,8 @@ type ListItem = {
   items: Array<ListItem>;
 };
 
+const alignType = ["left", "right", "center", "justify"]
+
 export type block = {
   type: string;
   data: {
@@ -36,6 +38,8 @@ export type block = {
     embed?: string;
     width?: number;
     height?: number;
+    alignment?: "left" | "right" | "center" | "justify";
+    align?: "left" | "right" | "center" | "justify";
   };
 };
 
@@ -49,7 +53,13 @@ const transforms: transforms = {
   },
 
   paragraph: ({ data }) => {
-    return `<p>${data.text}</p>`;
+    const paragraphAlign = data.alignment || data.align;
+
+    if (typeof paragraphAlign !== 'undefined' && alignType.includes(paragraphAlign)) {
+      return `<p style="text-align:${paragraphAlign};">${data.text}</p>`;
+    } else {
+      return `<p>${data.text}</p>`
+    }
   },
 
   list: ({ data }) => {

test/data.json

@@ -11,7 +11,8 @@
     {
       "type": "paragraph",
       "data": {
-        "text": "Hey. Meet the new Editor. On this page you can see it in action — try to edit this text."
+        "text": "Hey. Meet the new Editor. On this page you can see it in action — try to edit this text.",
+        "alignment": "justify"
       }
     },
     {
@@ -42,13 +43,15 @@
     {
       "type": "paragraph",
       "data": {
-        "text": "Workspace in classic editors is made of a single contenteditable element, used to create different HTML markups. Editor.js <mark class=\"cdx-marker\">workspace consists of separate Blocks: paragraphs, headings, images, lists, quotes, etc</mark>. Each of them is an independent contenteditable element (or more complex structure) provided by Plugin and united by Editor's Core."
+        "text": "Workspace in classic editors is made of a single contenteditable element, used to create different HTML markups. Editor.js <mark class=\"cdx-marker\">workspace consists of separate Blocks: paragraphs, headings, images, lists, quotes, etc</mark>. Each of them is an independent contenteditable element (or more complex structure) provided by Plugin and united by Editor's Core.",
+        "alignment": "right"
       }
     },
     {
       "type": "paragraph",
       "data": {
-        "text": "There are dozens of <a href=\"https://github.com/editor-js\">ready-to-use Blocks</a> and the <a href=\"https://editorjs.io/creating-a-block-tool\">simple API</a> for creation any Block you need. For example, you can implement Blocks for Tweets, Instagram posts, surveys and polls, CTA-buttons and even games."
+        "text": "There are dozens of <a href=\"https://github.com/editor-js\">ready-to-use Blocks</a> and the <a href=\"https://editorjs.io/creating-a-block-tool\">simple API</a> for creation any Block you need. For example, you can implement Blocks for Tweets, Instagram posts, surveys and polls, CTA-buttons and even games.",
+        "alignment": "left"
       }
     },
     {
@@ -61,7 +64,8 @@
     {
       "type": "paragraph",
       "data": {
-        "text": "Classic WYSIWYG-editors produce raw HTML-markup with both content data and content appearance. On the contrary, Editor.js outputs JSON object with data of each Block. You can see an example below"
+        "text": "Classic WYSIWYG-editors produce raw HTML-markup with both content data and content appearance. On the contrary, Editor.js outputs JSON object with data of each Block. You can see an example below",
+        "alignment": "center"
       }
     },
     {
@@ -73,7 +77,8 @@
     {
       "type": "paragraph",
       "data": {
-        "text": "Clean data is useful to sanitize, validate and process on the backend."
+        "text": "Clean data is useful to sanitize, validate and process on the backend.",
+        "alignment": "center"
       }
     },
     {

test/test.js

@@ -29,3 +29,19 @@ console.log(customParser.validate(data));
 
 // test for issue #21
 console.log(edjsParser.parseBlock({type: "paragraph", data: {text: "foo bar"}}) === '<p>foo bar</p>');
+
+// test for issue #39
+console.log(edjsParser.parseBlock({type: "paragraph", data: {text: "foo bar", alignment: "right"}}) === '<p style="text-align:right;">foo bar</p>');
+console.log(edjsParser.parseBlock({type: "paragraph", data: {text: "foo bar", alignment: "justify"}}) === '<p style="text-align:justify;">foo bar</p>');
+console.log(edjsParser.parseBlock({type: "paragraph", data: {text: "foo bar", alignment: "center"}}) === '<p style="text-align:center;">foo bar</p>');
+console.log(edjsParser.parseBlock({type: "paragraph", data: {text: "foo bar", alignment: "left"}}) === '<p style="text-align:left;">foo bar</p>');
+console.log(edjsParser.parseBlock({type: "paragraph", data: {text: "foo bar", alignment: "wrong type"}}) === '<p>foo bar</p>');
+
+console.log(edjsParser.parseBlock({type: "paragraph", data: {text: "foo bar", align: "right"}}) === '<p style="text-align:right;">foo bar</p>');
+console.log(edjsParser.parseBlock({type: "paragraph", data: {text: "foo bar", align: "justify"}}) === '<p style="text-align:justify;">foo bar</p>');
+console.log(edjsParser.parseBlock({type: "paragraph", data: {text: "foo bar", align: "center"}}) === '<p style="text-align:center;">foo bar</p>');
+console.log(edjsParser.parseBlock({type: "paragraph", data: {text: "foo bar", align: "left"}}) === '<p style="text-align:left;">foo bar</p>');
+console.log(edjsParser.parseBlock({type: "paragraph", data: {text: "foo bar", align: "wrong type"}}) === '<p>foo bar</p>');
+
+
+