Use two wrappers to allow interactive elements in live preview

Author: OlegWock

README.md

@@ -96,21 +96,29 @@ And for more complex cases there is support for JSX. JSX is automatically wrappe
 ```
 ````
 
+If your component is interactive (e.g. react to user clicks), in Live Preview mode clicking on such component will switch it in editing mode. If this behavior isn't desired, wrap your component in another element and stop propagation of click events.
+
+```jsx
+<div onClick={e => e.stopPropagation()}>
+    {/* Your component markup goes here... */}
+</div>
+```
+
 ### Vanilla JavaScript
 
 In addition to components, you can use vanilla JavaScript. JS code can be used either inline or as block. For JS code use language specifier `emjs` instead of `emera`.
 
 Inline JS will be evaluated and its result will replace original code element on page. For example, this snippet will output current vault name ```emjs: app.vault.getName()```.
 
-JS code blocks are more powerful. They don't output anything directly, but you can use them for more complex operations and to add variables to page's scope (more about scope a bit later).
+JS code blocks are more powerful. They don't output anything directly, but you can use them for more complex operations and to add variables to page's scope (more about scopes a bit later).
 
 ````markdown
 ```emjs
 export const username = 'OlegWock';
 ```
 ````
 
-Variable `username` will be available to all JS and JSX code on this page (after original `emjs` code block).
+Variable `username` will be available to all JS and JSX code on this page (after the original `emjs` code block).
 
 ### Scope
 

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "emera",
 	"name": "Emera",
-	"version": "1.2.2",
+	"version": "1.2.3",
 	"minAppVersion": "1.6.5",
 	"description": "Enables you to use custom React components and inline JavaScript, kinda like MDX.",
 	"author": "OlegWock",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "obsidian-emera",
-	"version": "1.2.2",
+	"version": "1.2.3",
 	"description": "MDX for Obsidian. Kinda.",
 	"main": "main.js",
 	"scripts": {

src/processors/code-processor.ts

@@ -266,17 +266,16 @@ export class EmeraCodeProcessor {
 
             toDOM(view: EditorView): HTMLElement {
                 const wrapper = document.createElement(inline ? 'span' : 'div');
+                const reactRootWrapper = document.createElement(inline ? 'span' : 'div');
+                wrapper.appendChild(reactRootWrapper);
                 wrapper.addEventListener('click', (e) => {
-                    e.stopImmediatePropagation();
-                });
-                wrapper.addEventListener('dblclick', (e) => {
                     e.preventDefault();
                     view.dispatch({
                         selection: { anchor: view.posAtDOM(wrapper) },
                         scrollIntoView: true
                     });
                 });
-                func(wrapper, this.content, this.ctx);
+                func(reactRootWrapper, this.content, this.ctx);
                 return wrapper;
             }
         }