Fixed rendering issues

Author: matthewlipski

examples/02-backend/04-rendering-static-documents/src/App.tsx

@@ -22,17 +22,17 @@ This example has the HTML hard-coded, but shows at least how the document will b
 export default function App() {
   // This HTML is generated by the ServerBlockNoteEditor.blocksToFullHTML method
   const html = `<div class="bn-block-group" data-node-type="blockGroup">
-  <div class="bn-block-outer" data-node-type="blockOuter" data-id="1" data-text-color="yellow" data-background-color="blue">
-      <div class="bn-block" data-node-type="blockContainer" data-id="1" data-text-color="yellow" data-background-color="blue">
-          <div class="bn-block-content" data-content-type="heading" data-text-alignment="right" data-level="2">
+  <div class="bn-block-outer" data-node-type="blockOuter" data-id="1">
+      <div class="bn-block" data-node-type="blockContainer" data-id="1">
+          <div class="bn-block-content" data-content-type="heading" data-background-color="blue" data-text-color="yellow" data-text-alignment="right" data-level="2">
               <h2 class="bn-inline-content">
                   <strong><u>Heading </u></strong><em><s>2</s></em>
               </h2>
           </div>
           <div class="bn-block-group" data-node-type="blockGroup">
-              <div class="bn-block-outer" data-node-type="blockOuter" data-id="2" data-background-color="red">
-                  <div class="bn-block" data-node-type="blockContainer" data-id="2" data-background-color="red">
-                      <div class="bn-block-content" data-content-type="paragraph">
+              <div class="bn-block-outer" data-node-type="blockOuter" data-id="2">
+                  <div class="bn-block" data-node-type="blockContainer" data-id="2">
+                      <div class="bn-block-content" data-content-type="paragraph" data-background-color="red">
                           <p class="bn-inline-content">Paragraph</p>
                       </div>
                   </div>

packages/react/src/editor/styles.css

@@ -156,7 +156,7 @@
 }
 
 [data-style-type="textColor"][data-value="orange"],
-.bn-block:has(> .bn-block-content[data-text-color="broorangewn"]) {
+.bn-block:has(> .bn-block-content[data-text-color="orange"]) {
   color: var(--bn-colors-highlights-orange-text);
 }
 
@@ -201,7 +201,7 @@
 }
 
 [data-style-type="backgroundColor"][data-value="orange"],
-.bn-block:has(> .bn-block-content[data-background-color="broorangewn"]) {
+.bn-block:has(> .bn-block-content[data-background-color="orange"]) {
   background-color: var(--bn-colors-highlights-orange-background);
 }