Upgrade to React 16 (#1178)

* Allow React 16 in peerDeps and use it for dev * Make tests pass with React 16 Changes are cosmetic: - React 16 no longer adds a trailing `;` to `style` attributes - React 16 outputs `0` and not `0px` for sizes in `style`
2025-08-16 12:14:14 +02:00 · 2017-10-13 22:01:18 +00:00
parent de573f2bfc
commit e960918f87
20 changed files with 74 additions and 54 deletions
--- a/packages/slate-react/package.json
+++ b/packages/slate-react/package.json
@@ -21,8 +21,8 @@
    "slate-prop-types": "^0.1.12"
  },
  "peerDependencies": {
-    "react": "^0.14.0 || ^15.0.0",
-    "react-dom": "^0.14.0 || ^15.0.0",
+    "react": "^0.14.0 || ^15.0.0 || ^16.0.0",
+    "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0",
    "slate": "^0.26.0"
  },
  "devDependencies": {
--- a/packages/slate-react/test/rendering/fixtures/custom-block-void.js
+++ b/packages/slate-react/test/rendering/fixtures/custom-block-void.js
@@ -24,7 +24,7 @@ export const state = (
 export const output = `
 <div data-slate-editor="true" contenteditable="true" role="textbox">
  <div data-slate-void="true">
-    <span style="display:inline-block;vertical-align:top;width:0px;height:0px;color:transparent;">
+    <span style="display:inline-block;vertical-align:top;width:0;height:0;color:transparent">
      <span>
        <span data-slate-zero-width="true">&#x200A;</span>
      </span>
--- a/packages/slate-react/test/rendering/fixtures/custom-decorator.js
+++ b/packages/slate-react/test/rendering/fixtures/custom-decorator.js
@@ -36,10 +36,10 @@ export const state = (

 export const output = `
 <div data-slate-editor="true" contenteditable="true" role="textbox">
-  <div style="position:relative;">
+  <div style="position:relative">
    <span>
      <span>o</span>
-      <span><span style="font-weight:bold;">n</span></span>
+      <span><span style="font-weight:bold">n</span></span>
      <span>e</span>
    </span>
  </div>
--- a/packages/slate-react/test/rendering/fixtures/custom-inline-multiple.js
+++ b/packages/slate-react/test/rendering/fixtures/custom-inline-multiple.js
@@ -33,7 +33,7 @@ export const state = (

 export const output = `
 <div data-slate-editor="true" contenteditable="true" role="textbox">
-  <div style="position:relative;">
+  <div style="position:relative">
    <span>
      <span>
        <span data-slate-zero-width="true">&#x200A;</span>
--- a/packages/slate-react/test/rendering/fixtures/custom-inline-void.js
+++ b/packages/slate-react/test/rendering/fixtures/custom-inline-void.js
@@ -25,14 +25,14 @@ export const state = (

 export const output = `
 <div data-slate-editor="true" contenteditable="true" role="textbox">
-  <div style="position:relative;">
+  <div style="position:relative">
    <span>
      <span>
        <span data-slate-zero-width="true">&#x200A;</span>
      </span>
    </span>
    <span data-slate-void="true">
-      <span style="color:transparent;">
+      <span style="color:transparent">
        <span>
          <span data-slate-zero-width="true">&#x200A;</span>
        </span>
--- a/packages/slate-react/test/rendering/fixtures/custom-inline.js
+++ b/packages/slate-react/test/rendering/fixtures/custom-inline.js
@@ -27,7 +27,7 @@ export const state = (

 export const output = `
 <div data-slate-editor="true" contenteditable="true" role="textbox">
-  <div style="position:relative;">
+  <div style="position:relative">
    <span>
      <span>
        <span data-slate-zero-width="true">&#x200A;</span>
--- a/packages/slate-react/test/rendering/fixtures/custom-mark-as-component.js
+++ b/packages/slate-react/test/rendering/fixtures/custom-mark-as-component.js
@@ -31,7 +31,7 @@ export const state = (

 export const output = `
 <div data-slate-editor="true" contenteditable="true" role="textbox">
-  <div style="position:relative;">
+  <div style="position:relative">
    <span>
      <span>one</span>
      <span><strong>two</strong></span>
--- a/packages/slate-react/test/rendering/fixtures/custom-mark-as-function.js
+++ b/packages/slate-react/test/rendering/fixtures/custom-mark-as-function.js
@@ -25,7 +25,7 @@ export const state = (

 export const output = `
 <div data-slate-editor="true" contenteditable="true" role="textbox">
-  <div style="position:relative;">
+  <div style="position:relative">
    <span>
      <span>one</span>
      <span><strong>two</strong></span>
--- a/packages/slate-react/test/rendering/fixtures/custom-mark-as-object.js
+++ b/packages/slate-react/test/rendering/fixtures/custom-mark-as-object.js
@@ -22,10 +22,10 @@ export const state = (

 export const output = `
 <div data-slate-editor="true" contenteditable="true" role="textbox">
-  <div style="position:relative;">
+  <div style="position:relative">
    <span>
      <span>one</span>
-      <span><span style="font-weight:bold;">two</span></span>
+      <span><span style="font-weight:bold">two</span></span>
      <span>three</span>
    </span>
  </div>
--- a/packages/slate-react/test/rendering/fixtures/custom-mark-as-string.js
+++ b/packages/slate-react/test/rendering/fixtures/custom-mark-as-string.js
@@ -20,7 +20,7 @@ export const state = (

 export const output = `
 <div data-slate-editor="true" contenteditable="true" role="textbox">
-  <div style="position:relative;">
+  <div style="position:relative">
    <span>
      <span>one</span>
      <span><span class="bold">two</span></span>
--- a/packages/slate-react/test/rendering/fixtures/default-block-with-inline.js
+++ b/packages/slate-react/test/rendering/fixtures/default-block-with-inline.js
@@ -18,13 +18,13 @@ export const state = (

 export const output = `
 <div data-slate-editor="true" contenteditable="true" role="textbox">
-  <div style="position:relative;">
+  <div style="position:relative">
    <span>
      <span>
        <span data-slate-zero-width="true">&#x200A;</span>
      </span>
    </span>
-    <span style="position:relative;">
+    <span style="position:relative">
      <span>
        <span>word</span>
      </span>
--- a/packages/slate-react/test/rendering/fixtures/default-block.js
+++ b/packages/slate-react/test/rendering/fixtures/default-block.js
@@ -16,7 +16,7 @@ export const state = (

 export const output = `
 <div data-slate-editor="true" contenteditable="true" role="textbox">
-  <div style="position:relative;">
+  <div style="position:relative">
    <span>
      <span>word</span>
    </span>
--- a/packages/slate-react/test/rendering/fixtures/empty-block-with-inline.js
+++ b/packages/slate-react/test/rendering/fixtures/empty-block-with-inline.js
@@ -16,7 +16,7 @@ export const state = (

 export const output = `
 <div data-slate-editor="true" contenteditable="true" role="textbox">
-  <div style="position:relative;">
+  <div style="position:relative">
    <span>
      <span><br></span>
    </span>
--- a/packages/slate-react/test/rendering/fixtures/empty-block.js
+++ b/packages/slate-react/test/rendering/fixtures/empty-block.js
@@ -14,7 +14,7 @@ export const state = (

 export const output = `
 <div data-slate-editor="true" contenteditable="true" role="textbox">
-  <div style="position:relative;">
+  <div style="position:relative">
    <span>
      <span><br></span>
    </span>
--- a/packages/slate-react/test/rendering/fixtures/nested-text-direction.js
+++ b/packages/slate-react/test/rendering/fixtures/nested-text-direction.js
@@ -21,13 +21,13 @@ export const state = (

 export const output = `
 <div data-slate-editor="true" contenteditable="true" role="textbox">
-  <div style="position:relative;">
-  <div dir="rtl" style="position:relative;">
+  <div style="position:relative">
+  <div dir="rtl" style="position:relative">
    <span>
      <span>مرحبا بالعالم</span>
    </span>
  </div>
-  <div dir="rtl" style="position:relative;">
+  <div dir="rtl" style="position:relative">
    <span>
      <span>שלום עולם</span>
    </span>
--- a/packages/slate-react/test/rendering/fixtures/text-direction.js
+++ b/packages/slate-react/test/rendering/fixtures/text-direction.js
@@ -22,17 +22,17 @@ export const state = (

 export const output = `
 <div data-slate-editor="true" contenteditable="true" role="textbox">
-  <div style="position:relative;">
+  <div style="position:relative">
    <span>
      <span>Hello, world!</span>
    </span>
  </div>
-  <div dir="rtl" style="position:relative;">
+  <div dir="rtl" style="position:relative">
    <span>
      <span>مرحبا بالعالم</span>
    </span>
  </div>
-  <div dir="rtl" style="position:relative;">
+  <div dir="rtl" style="position:relative">
    <span>
      <span>שלום עולם</span>
    </span>