feat: iniline style for exporter/importer

package.json

@@ -85,6 +85,7 @@
   },
   "dependencies": {
     "@jswork/next-compose": "^1.0.0",
+    "@jswork/next-css-text": "^1.0.0",
     "@jswork/next-slate-defaults": "^1.0.1",
     "@jswork/next-slate-deserialize": "^1.0.7",
     "@jswork/next-slate-serialize": "^1.0.6",

public/index.js

@@ -52,7 +52,7 @@ class App extends React.Component {
     super(inProps);
     this.state = {
       value:
-        '<p>Are you ok?</p><blockquote>hello <br/> world</blockquote><p>Are you ok?</p><ul><li>thanks</li><li>and you?</li></ul>'
+        '<p style="text-align:right;">Are you ok?</p><blockquote>hello world</blockquote><p style="">Are you ok?</p><ul><li>thanks</li><li>and you?</li></ul>'
     };
   }
 
@@ -105,7 +105,7 @@ class App extends React.Component {
           value={this.state.value}
           onChange={(e) => {
             this.setState({ value: e.target.value });
-            // console.log('html:', e.target.value);
+            console.log('html:', e.target.value);
           }}
           className="mb-5"
         />

public/plugins/paragraph.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { jsx } from 'slate-hyperscript';
-
+import NxCssText from '@jswork/next-css-text';
 /**
  * @usage:
  * Transforms.setNodes(editor, { type:'blockquote' })
@@ -11,11 +11,14 @@ export default {
   importer: (el, children) => {
     const nodeName = el.nodeName.toLowerCase();
     if (nodeName === 'p') {
-      return jsx('element', { type: 'paragraph' }, children);
+      const css = el.style.cssText;
+      const style = css ? NxCssText.css2obj(css) : null;
+      return jsx('element', { type: 'paragraph', style }, children);
     }
   },
   exporter: (node, children) => {
-    return `<p>${children}</p>`;
+    const { style } = node;
+    return `<p style="${NxCssText.obj2css(style)}">${children}</p>`;
   },
   hooks: {
     element: (_, { attributes, children, element }) => {