fix: prevent layout properties to be set on children

Author: satya164

src/index.js

@@ -65,13 +65,40 @@ const isWindows = 'navigator' in global && /Win/i.test(navigator.platform);
 const isMacLike =
   'navigator' in global && /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
 
-const className = 'npm__react-simple-code-editor__textarea';
+const container = 'npm__react-simple-code-editor__container';
 
 const cssText = /* CSS */ `
+/**
+ * Make sure that layout related properties cannot be set on the children
+ * They will likely break the editor when set. The user can always use !important to force override.
+ */
+.${container} > pre * {
+  display: inline;
+  font-family: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-variant-ligatures: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+  margin-top: 0;
+  margin-right: 0;
+  margin-bottom: 0;
+  margin-left: 0;
+  padding-top: 0;
+  padding-right: 0;
+  padding-bottom: 0;
+  padding-left: 0;
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 0;
+  border-left: 0;
+}
+
 /**
  * Reset the text fill color so that placeholder is visible
  */
-.${className}:empty {
+.${container} > textarea:empty {
   -webkit-text-fill-color: inherit !important;
 }
 
@@ -84,11 +111,11 @@ const cssText = /* CSS */ `
     * So we use 'color: transparent' to make the text transparent on IE
     * Unlike other browsers, it doesn't affect caret color in IE
     */
-  .${className} {
+  .${container} > textarea {
     color: transparent !important;
   }
 
-  .${className}::selection {
+  .${container} > textarea::selection {
     background-color: #accef7 !important;
     color: transparent !important;
   }
@@ -498,6 +525,7 @@ export default class Editor extends React.Component<Props, State> {
     const {
       value,
       style,
+      className,
       padding,
       highlight,
       textareaId,
@@ -534,15 +562,18 @@ export default class Editor extends React.Component<Props, State> {
     const highlighted = highlight(value);
 
     return (
-      <div {...rest} style={{ ...styles.container, ...style }}>
+      <div
+        {...rest}
+        style={{ ...styles.container, ...style }}
+        className={`${container} ${className || ''}`}
+      >
         <textarea
           ref={c => (this._input = c)}
           style={{
             ...styles.editor,
             ...styles.textarea,
             ...contentStyle,
           }}
-          className={className}
           id={textareaId}
           value={value}
           onChange={this._handleChange}
@@ -606,8 +637,14 @@ const styles = {
     pointerEvents: 'none',
   },
   editor: {
-    margin: 0,
-    border: 0,
+    marginTop: 0,
+    marginRight: 0,
+    marginBottom: 0,
+    marginLeft: 0,
+    borderTop: 0,
+    borderRight: 0,
+    borderBottom: 0,
+    borderLeft: 0,
     background: 'none',
     boxSizing: 'inherit',
     display: 'inherit',