Added ability to modify text alignment, cell and table properties (background and border color, border width)

.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    ["@babel/preset-env", {
+      "useBuiltIns": "usage",
+      "corejs": "3",
+      "targets": {
+        "browsers": [
+          "last 5 versions",
+          "ie >= 8"
+        ]
+      }
+    }]
+  ]
+}

README.md

@@ -1,20 +1,22 @@
 # Table tool
 
-The Table Block for the [Editor.js](https://editorjs.io). Finally improved.
+The A Modified Table Block for [Editor.js](https://editorjs.io). Finally improved.
 
 ![](https://capella.pics/41294cec-a2b3-4157-8399-ffefed3d8ffd.jpg)
+![](https://i.postimg.cc/wMgY2jVY/Screenshot-2022-01-07-at-4-46-13-PM.png)
+![](https://i.postimg.cc/V6jcXCXF/Screenshot-2022-01-07-at-4-46-23-PM.png)
 
 ## Installation
 
 Get the package
 
 ```shell
-npm i --save @editorjs/table
+npm i chalkboard-table
 ```
 or
 
 ```shell
-yarn add @editorjs/table
+yarn add chalkboard-table
 ```
 
 ## Usage
@@ -63,13 +65,65 @@ This Tool returns `data` in the following format
 | -------------- | ------------ | ----------------------------------------- |
 | `withHeadings` | `boolean`    | Uses the first line as headings |
 | `content`      | `string[][]` | two-dimensional array with table contents |
+| `tableProperties`      | `object` | object with table style properties  |
+| `cellProperties`      | `array` | two-dimensional array with table style properties corresponding to the `content` data structure |
+| `textAlignment`             | `string` | Alignnment of all text in table  |
 
 ```json
 {
   "type" : "table",
   "data" : {
     "withHeadings": true,
-    "content" : [ [ "Kine", "Pigs", "Chicken" ], [ "1 pcs", "3 pcs", "12 pcs" ], [ "100$", "200$", "150$" ] ]
+    "content" : [ [ "Kine", "Pigs", "Chicken" ], [ "1 pcs", "3 pcs", "12 pcs" ], [ "100$", "200$", "150$" ] ],
+    "tableProperties": {
+      "borderColor": "#fffff",
+      "backgroundColor": "#fffff",
+      "borderWidth": "1px"
+    },
+    "cellProperties": [[{
+      "borderColor": "#fffff",
+      "backgroundColor": "#fffff",
+      "borderWidth": "1px"
+    },
+      {
+        "borderColor": "#fffff",
+        "backgroundColor": "#fffff",
+        "borderWidth": "1px"
+      },
+      {
+        "borderColor": "#fffff",
+        "backgroundColor": "#fffff",
+        "borderWidth": "1px"
+      }],[{
+      "borderColor": "#fffff",
+      "backgroundColor": "#fffff",
+      "borderWidth": "1px"
+    },
+      {
+        "borderColor": "#fffff",
+        "backgroundColor": "#fffff",
+        "borderWidth": "1px"
+      },
+      {
+        "borderColor": "#fffff",
+        "backgroundColor": "#fffff",
+        "borderWidth": "1px"
+      }],[{
+      "borderColor": "#fffff",
+      "backgroundColor": "#fffff",
+      "borderWidth": "1px"
+    },
+      {
+        "borderColor": "#fffff",
+        "backgroundColor": "#fffff",
+        "borderWidth": "1px"
+      },
+      {
+        "borderColor": "#fffff",
+        "backgroundColor": "#fffff",
+        "borderWidth": "1px"
+      }]],
+    "textAlignment": "center"
   }
 }
 ```
@@ -82,10 +136,31 @@ If you're using this tool and editor.js in your business, please consider suppor
 
 # About CodeX
 
-<img align="right" width="120" height="120" src="https://codex.so/public/app/img/codex-logo.svg" hspace="50">
+<img alt="codex" align="right" width="120" height="120" src="https://codex.so/public/app/img/codex-logo.svg" hspace="50">
 
 CodeX is a team of digital specialists around the world interested in building high-quality open source products on a global market. We are [open](https://codex.so/join) for young people who want to constantly improve their skills and grow professionally with experiments in leading technologies.
 
 | 🌐 | Join  👋  | Twitter | Instagram |
 | -- | -- | -- | -- |
 | [codex.so](https://codex.so) | [codex.so/join](https://codex.so/join) |[@codex_team](http://twitter.com/codex_team) | [@codex_team](http://instagram.com/codex_team) |
+
+# Version Log
+2.0.1 - Initial Version with table properties
+
+2.0.2 - Added support for rendering saved properties 
+
+2.0.3 - Adding support for aligning table text
+
+2.0.4 - Fixed bug preventing alignment showing in saved data
+
+2.0.5 - Alignment bug
+
+2.0.6 - Don't ask
+
+2.0.7 - Trying something
+
+2.0.8 - Cleaning
+
+2.0.9 - Still here
+
+2.1.0 - Completed adding cell properties

example.html

@@ -44,6 +44,114 @@
 
   <script>
 
+    const sampleData = {
+      "time": 1637357541154,
+      "blocks": [
+        {
+          "id": "XXVTfnMlcE",
+          "type": "table",
+          "data": {
+            "withHeadings": true,
+            "content": [
+              [
+                "English",
+                "Russian",
+                "Japanese"
+              ],
+              [
+                "Sweet",
+                "Сладкий",
+                "あまい"
+              ],
+              [
+                "Good morning",
+                "Доброе утро",
+                "おはようございます"
+              ]
+            ],
+            "tableProperties": {
+              "backgroundColor": "#c91818",
+              "borderColor": "#e8e8eb",
+              "borderWidth": "1px"
+            },
+            "textAlignment": "left",
+            "cellProperties": [
+              [
+                {
+                  "backgroundColor": "#c91818",
+                  "borderColor": "#e8e8eb",
+                  "borderWidth": "1px"
+                },
+                {
+                  "backgroundColor": "#c91818",
+                  "borderColor": "#e8e8eb",
+                  "borderWidth": "1px"
+                },
+                {
+                  "backgroundColor": "#c91818",
+                  "borderColor": "#e8e8eb",
+                  "borderWidth": "1px"
+                }
+              ],
+              [
+                {
+                  "backgroundColor": "#32a852",
+                  "borderColor": "#e8e8eb",
+                  "borderWidth": "1px"
+                },
+                {
+                  "backgroundColor": "#c91818",
+                  "borderColor": "#e8e8eb",
+                  "borderWidth": "1px"
+                },
+                {
+                  "backgroundColor": "#c91818",
+                  "borderColor": "#e8e8eb",
+                  "borderWidth": "1px"
+                }
+              ],
+              [
+                {
+                  "backgroundColor": "#c91818",
+                  "borderColor": "#e8e8eb",
+                  "borderWidth": "1px"
+                },
+                {
+                  "backgroundColor": "#c91818",
+                  "borderColor": "#e8e8eb",
+                  "borderWidth": "1px"
+                },
+                {
+                  "backgroundColor": "#c91818",
+                  "borderColor": "#e8e8eb",
+                  "borderWidth": "1px"
+                }
+              ]
+            ]
+          }
+        }
+      ],
+      "version": "2.22.2"
+    }
+
+    const originalData = {
+      time: 1625072989362,
+      blocks: [
+        {
+          id: "XXVTfnMlcE",
+          type: "table",
+          data: {
+            withHeadings: true,
+            content: [
+              ["English", "Russian", "Japanese"],
+              ["Sweet", "Сладкий", "あまい"],
+              ["Good morning", "Доброе утро", "おはようございます"]]
+          }
+        }
+      ],
+      version: "2.22.1"
+    }
+
     const editor = new EditorJS({
       autofocus: true,
       tools: {
@@ -52,23 +160,8 @@
           inlineToolbar: true,
         }
       },
-      data: {
-        time: 1625072989362,
-        blocks: [
-          {
-            id: "XXVTfnMlcE",
-            type: "table",
-            data: {
-              withHeadings: true,
-              content: [
-                ["English", "Russian", "Japanese"], 
-                ["Sweet", "Сладкий", "あまい"], 
-                ["Good morning", "Доброе утро", "おはようございます"]]
-            }
-          }
-        ],
-        version: "2.22.1"
-      }
+      data: sampleData,
+      readOnly: false
     });
 
     const saveButton = document.querySelector('.save-button');

package.json

@@ -1,15 +1,15 @@
 {
-  "name": "@editorjs/table",
+  "name": "chalkboard-test-table",
   "description": "Table for Editor.js",
-  "version": "2.0.1",
+  "version": "2.1.6",
   "license": "MIT",
   "main": "./dist/table.js",
   "scripts": {
     "build": "webpack --mode production",
-    "build:dev": "webpack --mode development --watch",
+    "build:dev": "npx webpack --mode development --watch",
     "lint": "eslint -c ./.eslintrc --ext .js --fix ."
   },
-  "repository": "https://github.com/editor-js/table",
+  "repository": "https://github.com/YoofiBP/table",
   "author": {
     "name": "CodeX Team",
     "email": "[email protected]"
@@ -22,18 +22,28 @@
     "editorjs"
   ],
   "devDependencies": {
+    "@babel/core": "^7.16.0",
+    "@babel/preset-env": "^7.16.4",
     "autoprefixer": "^9.3.1",
+    "babel-loader": "^8.2.3",
     "css-loader": "^1.0.0",
     "cssnano": "^4.1.7",
     "eslint": "^5.8.0",
-    "eslint-config-codex": "github:codex-team/eslint-config",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
     "postcss-nested": "^4.1.0",
     "postcss-nesting": "^7.0.0",
     "style-loader": "^0.23.1",
     "svg-inline-loader": "^0.8.0",
     "webpack": "^4.29.5",
-    "webpack-cli": "^3.2.3"
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.5.0"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.16.3",
+    "chalkboard-plugins": "^1.0.9",
+    "core-js": "3",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   }
 }