fix: stylesheet support

react-native-toolkit · Oct 8, 2020 · 7bda93a · 7bda93a
1 parent 69a6c84
commit 7bda93a
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 1 deletion.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -92,6 +92,32 @@ const styleMap = {
   },
 };
 
+const editorStyleSheet = `
+  @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600&display=swap);
+  body {
+    background-color: red;
+  }
+  h1 > div > span > span {
+    font-family: "Source Sans Pro", sans-serif;
+    font-weight: 600;
+    font-size: 18px;
+    line-height: 28px;
+    color: black;
+  }
+  li > div > span > span {
+    font-family: "Source Sans Pro", sans-serif;
+    font-size: 15px;
+    line-height: 32px;
+    color: black;
+  }
+  span {
+    font-family: "Source Sans Pro", sans-serif;
+    font-size: 15px;
+    line-height: 26px;
+    color: black;
+  }
+`;
+
 const App = () => {
   const _draftRef = React.createRef<RNDraftView>();
   const [activeStyles, setActiveStyles] = useState<string[]>([]);
@@ -148,6 +174,7 @@ const App = () => {
         onStyleChanged={updateActiveStyle}
         onBlockTypeChanged={setActiveBlockType}
         styleMap={styleMap}
+        styleSheet={editorStyleSheet}
       />
       <EditorToolBar
         activeStyles={activeStyles}

diff --git a/src/index.tsx b/src/index.tsx
@@ -103,7 +103,11 @@ class RNDraftView extends Component<
       this.executeScript('setEditorPlaceholder', placeholder);
     }
     if (styleSheet) {
-      this.executeScript('setEditorStyleSheet', styleSheet);
+      // TODO: Replace single quotes with double quotes using regex
+      this.executeScript(
+        'setEditorStyleSheet',
+        styleSheet.replace(/(\r\n|\n|\r)/gm, '')
+      );
     }
     if (styleMap) {
       try {