Merge pull request #111 from mynameisguy/initialCSSText

adding initialCSSText option
wxik · Aug 24, 2021 · 2c2b5db · 2c2b5db
2 parents 57861f7 + 4f0cdc0
commit 2c2b5db
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/index.d.ts b/index.d.ts
@@ -123,6 +123,7 @@ export interface RichEditorProps extends WebViewProps {
         caretColor?: string; // cursor/selection color
         placeholderColor?: string; // editor placeholder text color
         contentCSSText?: string; // editor content css text
+        initialCSSText?: string; // editor global css initial text
         cssText?: string; // editor global css text
     };
 }

diff --git a/src/RichEditor.js b/src/RichEditor.js
@@ -52,7 +52,8 @@ export default class RichTextEditor extends Component {
         that.layout = {};
         that.selectionChangeListeners = [];
         const {
-            editorStyle: {backgroundColor, color, placeholderColor, cssText, contentCSSText, caretColor} = {},
+            editorStyle: {backgroundColor, color, placeholderColor, initialCSSText, cssText, contentCSSText} = {},
+            editorStyle: {backgroundColor, color, placeholderColor, initialCSSText, cssText, contentCSSText, caretColor} = {},
             html,
             pasteAsPlainText,
             onPaste,
@@ -74,6 +75,7 @@ export default class RichTextEditor extends Component {
                         color,
                         caretColor,
                         placeholderColor,
+                        initialCSSText,
                         cssText,
                         contentCSSText,
                         pasteAsPlainText,

diff --git a/src/editor.js b/src/editor.js
@@ -26,6 +26,7 @@ function createHTML(options = {}) {
         placeholderColor = '#a9a9a9',
         contentCSSText = '',
         cssText = '',
+        initialCSSText = '',
         pasteAsPlainText = false,
         pasteListener = false,
         keyDownListener = false,
@@ -45,12 +46,11 @@ function createHTML(options = {}) {
     <title>RN Rich Text Editor</title>
     <meta name="viewport" content="user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
     <style>
+        ${initialCSSText}
         * {outline: 0px solid transparent;-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-touch-callout: none;box-sizing: border-box;}
         html, body { margin: 0; padding: 0;font-family: Arial, Helvetica, sans-serif; font-size:1em; height: 100%}
         body { overflow-y: hidden; -webkit-overflow-scrolling: touch;background-color: ${backgroundColor};caret-color: ${caretColor};}
-        .content {font-family: Arial, Helvetica, sans-serif;color: ${color}; width: 100%;${
-        !useContainer ? 'height:100%;' : ''
-    }-webkit-overflow-scrolling: touch;padding-left: 0;padding-right: 0;}
+        .content {font-family: Arial, Helvetica, sans-serif;color: ${color}; width: 100%;${!useContainer ? 'height:100%;' : ''}-webkit-overflow-scrolling: touch;padding-left: 0;padding-right: 0;}
         .pell { height: 100%;} .pell-content { outline: 0; overflow-y: auto;padding: 10px;height: 100%;${contentCSSText}}
     </style>
     <style>