feat: new plugins migrate

afeiship · Feb 5, 2021 · f152263 · f152263
1 parent 69b5f13
commit f152263
Show file tree

Hide file tree

Showing 13 changed files with 213 additions and 285 deletions.
diff --git a/public/index.js b/public/index.js
@@ -12,7 +12,6 @@ import Code from './plugins/code';
 import Heading from './plugins/heading';
 import Blockquote from './plugins/blockquote';
 import Color from './plugins/color';
-import Alignment from './plugins/alignment';
 import BackgroundColor from './plugins/background-color';
 import BulletedList from './plugins/bulleted-list';
 import NumberedList from './plugins/numbered-list';
@@ -51,8 +50,7 @@ class App extends React.Component {
   constructor(inProps) {
     super(inProps);
     this.state = {
-      value:
-        '<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>'
+      value: `<p style="text-align:right;">Are you ok?</p><blockquote><span style="font-weight: bold;">hello world</span></blockquote><p style=""><i><u><span style="font-weight: bold;">Are</span></u></i> you ok?</p><ul><li><u><span>thanks</span></u></li><li>and you?</li></ul>`
     };
   }
 
@@ -87,19 +85,18 @@ class App extends React.Component {
             Italic,
             Underline,
             Strikethrough,
-            Code,
-            Heading,
+            // Code,
+            // Heading,
             Blockquote,
-            Color,
-            Alignment,
-            BackgroundColor,
+            // Color,
+            // BackgroundColor,
             NumberedList,
             BulletedList,
             ListItem,
-            // PasteHtml,
-            // ForceLayout,
-            BetterDelete,
-            ExtEditor,
+            // // PasteHtml,
+            // // ForceLayout,
+            // BetterDelete,
+            // ExtEditor,
             Paragraph
           ]}
           value={this.state.value}

diff --git a/public/plugins/alignment.js b/public/plugins/alignment.js
diff --git a/public/plugins/blockquote.js b/public/plugins/blockquote.js
@@ -1,26 +1,27 @@
 import React from 'react';
 import { jsx } from 'slate-hyperscript';
+import NxSlatePlugin from '@jswork/next-slate-plugin';
 
 /**
  * @usage:
  * Transforms.setNodes(editor, { type:'blockquote' })
  */
 
-export default {
-  name: 'blockquote',
-  importer: (el, children) => {
-    const nodeName = el.nodeName.toLowerCase();
-    if (nodeName === 'blockquote') {
-      return jsx('element', { type: 'blockquote' }, children);
+export default NxSlatePlugin.define({
+  id: 'blockquote',
+  serialize: {
+    input: (el, children) => {
+      const nodeName = el.nodeName.toLowerCase();
+      if (nodeName === 'blockquote') {
+        return jsx('element', { type: 'blockquote' }, children);
+      }
+    },
+    output: (node, children) => {
+      return `<blockquote>${children}</blockquote>`;
     }
   },
-  exporter: (node, children) => {
-    return `<blockquote>${children}</blockquote>`;
-  },
-  hooks: {
-    element: (_, { attributes, children, element }) => {
-      console.log('element', element, attributes, children);
-      return <blockquote {...attributes}>{children}</blockquote>;
-    }
+  render: (_, { attributes, children, element }) => {
+    console.log('element', element, attributes, children);
+    return <blockquote {...attributes}>{children}</blockquote>;
   }
-};
+});
diff --git a/public/plugins/bold.js b/public/plugins/bold.js
@@ -1,28 +1,26 @@
 import React from 'react';
 import { jsx } from 'slate-hyperscript';
-
+import NxSlatePlugin from '@jswork/next-slate-plugin';
 /**
  * @usage:
  * Editor.addMark(editor,'bold', true)
  */
 
-export default {
-  name: 'bold',
-  hotkey: ['mod+b'],
-  isInline: true,
-  importer: (el, children) => {
-    const nodeName = el.nodeName.toLowerCase();
-    if (nodeName === 'span' && el.style.fontStyle === 'bold') {
-      return jsx('text', { bold: true }, children);
+export default NxSlatePlugin.define({
+  id: 'bold',
+  serialize: {
+    input: (el, children) => {
+      const nodeName = el.nodeName.toLowerCase();
+      if (nodeName === 'span' && el.style.fontWeight === 'bold') {
+        return jsx('text', { bold: true }, children);
+      }
+    },
+    output: ({ el }) => {
+      el.style.fontWeight = 'bold';
+      return el;
     }
   },
-  exporter: (el) => {
-    el.style.fontWeight = 'bold';
-    return el;
-  },
-  hooks: {
-    leaf: (_, { attributes, children, leaf }) => {
-      return <strong {...attributes}>{children}</strong>;
-    }
+  render: (_, { attributes, children, leaf }) => {
+    return <strong {...attributes}>{children}</strong>;
   }
-};
+});
diff --git a/public/plugins/bulleted-list.js b/public/plugins/bulleted-list.js
@@ -2,8 +2,7 @@ import React from 'react';
 import { jsx } from 'slate-hyperscript';
 import { Path } from 'slate';
 import { useSelected, ReactEditor, useSlate } from 'slate-react';
-
-
+import NxSlatePlugin from '@jswork/next-slate-plugin';
 /**
  * @usage:
  * Active:
@@ -25,21 +24,25 @@ import { useSelected, ReactEditor, useSlate } from 'slate-react';
 
  */
 
-export default {
-  name: 'bulleted-list',
-  importer: (el, children) => {
-    const nodeName = el.nodeName.toLowerCase();
-    if (nodeName === 'ul') {
-      return jsx('element', { type: 'bulleted-list' }, children);
+export default NxSlatePlugin.define({
+  id: 'bulleted-list',
+  serialize: {
+    input: (el, children) => {
+      const nodeName = el.nodeName.toLowerCase();
+      if (nodeName === 'ul') {
+        return jsx('element', { type: 'bulleted-list' }, children);
+      }
+    },
+    output: (node, children) => {
+      return `<ul>${children}</ul>`;
     }
   },
-  exporter: (node, children) => {
-    return `<ul>${children}</ul>`;
-  },
-  hooks: {
-    element: (inContext, { attributes, children, element }) => {
-      const path = ReactEditor.findPath(inContext.editor, element);
-      return <ul data-depth={path.length} {...attributes}>{children}</ul>;
-    }
+  render: (inContext, { attributes, children, element }) => {
+    const path = ReactEditor.findPath(inContext.editor, element);
+    return (
+      <ul data-depth={path.length} {...attributes}>
+        {children}
+      </ul>
+    );
   }
-};
+});
diff --git a/public/plugins/clean-content.js b/public/plugins/clean-content.js
@@ -1,8 +1,8 @@
 export default {
   name: 'clean-content',
-  statics: {
-    empty: () => {
-      console.log('empty to document');
+  decorator: {
+    classify: (inEditor) => {
+      return inEditor;
     }
   }
 };
diff --git a/public/plugins/italic.js b/public/plugins/italic.js
@@ -1,27 +1,27 @@
 import React from 'react';
 import { jsx } from 'slate-hyperscript';
-
+import NxSlatePlugin from '@jswork/next-slate-plugin';
 /**
  * @usage:
  * Editor.addMark(editor,'italic', true)
  */
 
-
-export default {
-  name: 'italic',
-  importer: (el, children) => {
-    const nodeName = el.nodeName.toLowerCase();
-    if (nodeName === 'span' && el.style.fontStyle === 'italic') {
-      return jsx('text', { italic: true }, children);
+export default NxSlatePlugin.define({
+  id: 'italic',
+  serialize: {
+    input: (el, children) => {
+      const nodeName = el.nodeName.toLowerCase();
+      if (nodeName === 'i') {
+        return jsx('text', { italic: true }, children);
+      }
+    },
+    output: ({ el }) => {
+      const i = document.createElement('i');
+      i.appendChild(el);
+      return i;
     }
   },
-  exporter: (el) => {
-    el.style.fontStyle = 'italic';
-    return el;
-  },
-  hooks: {
-    leaf: (_, { attributes, children, leaf }) => {
-      return <em {...attributes}>{children}</em>;
-    }
+  render: (_, { attributes, children, leaf }) => {
+    return <em {...attributes}>{children}</em>;
   }
-};
+});
diff --git a/public/plugins/list-item.js b/public/plugins/list-item.js
@@ -1,27 +1,32 @@
 import React from 'react';
 import { jsx } from 'slate-hyperscript';
+import NxSlatePlugin from '@jswork/next-slate-plugin';
 
 /**
  * @usage:
  * Transforms.setNodes(editor, { type:'list-item' })
  */
 
-export default {
-  name: 'list-item',
-  importer: (el, children) => {
-    const nodeName = el.nodeName.toLowerCase();
-    if (nodeName === 'li') {
-      return jsx('element', { type: 'list-item' }, children);
+export default NxSlatePlugin.define({
+  id: 'list-item',
+  serialize: {
+    input: (el, children) => {
+      const nodeName = el.nodeName.toLowerCase();
+      if (nodeName === 'li') {
+        return jsx('element', { type: 'list-item' }, children);
+      }
+    },
+    output: (node, children) => {
+      return `<li>${children}</li>`;
     }
   },
-  exporter: (node, children) => {
-    return `<li>${children}</li>`;
-  },
-  hooks: {
-    element: (_, { attributes, children, element }) => {
-      // console.log('list item render.', element);
-      const { alignment } = element;
-      return <li style={{ textAlign: alignment }} {...attributes}>{children}</li>;
-    }
+  render: (_, { attributes, children, element }) => {
+    // console.log('list item render.', element);
+    const { alignment } = element;
+    return (
+      <li style={{ textAlign: alignment }} {...attributes}>
+        {children}
+      </li>
+    );
   }
-};
+});
diff --git a/public/plugins/numbered-list.js b/public/plugins/numbered-list.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { jsx } from 'slate-hyperscript';
-
+import NxSlatePlugin from '@jswork/next-slate-plugin';
 /**
  * @usage:
  * Active:
@@ -19,20 +19,20 @@ Transforms.unwrapNodes(editor, {
 Transforms.setNodes(editor, { type:'paragraph' })
  */
 
-export default {
-  name: 'numbered-list',
-  importer: (el, children) => {
-    const nodeName = el.nodeName.toLowerCase();
-    if (nodeName === 'ol') {
-      return jsx('element', { type: 'numbered-list' }, children);
+export default NxSlatePlugin.define({
+  id: 'numbered-list',
+  serialize: {
+    input: (el, children) => {
+      const nodeName = el.nodeName.toLowerCase();
+      if (nodeName === 'ol') {
+        return jsx('element', { type: 'numbered-list' }, children);
+      }
+    },
+    output: (node, children) => {
+      return `<ol>${children}</ol>`;
     }
   },
-  exporter: (node, children) => {
-    return `<ol>${children}</ol>`;
-  },
-  hooks: {
-    element: (_, { attributes, children, element }) => {
-      return <ol {...attributes}>{children}</ol>;
-    }
+  render: (_, { attributes, children, element }) => {
+    return <ol {...attributes}>{children}</ol>;
   }
-};
+});