qureal-editor 1.0.6 → 1.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +21 -17
- package/dist/index.es.js +2 -2
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,36 +1,40 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Qureal Editor
|
|
2
2
|
|
|
3
|
-
>
|
|
3
|
+
> Official Qureal React Components
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
|
|
6
6
|
|
|
7
7
|
## Install
|
|
8
8
|
|
|
9
9
|
```bash
|
|
10
|
-
npm install
|
|
10
|
+
npm install qureal-editor
|
|
11
11
|
```
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
15
13
|
## Usage
|
|
16
14
|
|
|
17
15
|
```jsx
|
|
18
|
-
import React
|
|
19
|
-
|
|
20
|
-
import NeonButton from 'neon-button'
|
|
16
|
+
import React from "react";
|
|
17
|
+
import { QurealViewer } from "qureal-editor";
|
|
21
18
|
|
|
22
|
-
|
|
23
|
-
render () {
|
|
19
|
+
function App() {
|
|
24
20
|
return (
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
21
|
+
<QurealViewer
|
|
22
|
+
slug="test_21"
|
|
23
|
+
onFormSubmit={(form_data)=>{
|
|
24
|
+
console.log("Data filled in form", form_data);
|
|
25
|
+
}}
|
|
26
|
+
style={{
|
|
27
|
+
width: "800px",
|
|
28
|
+
height: "90vh",
|
|
29
|
+
border: "1px solid black"
|
|
30
|
+
}}
|
|
31
|
+
/>
|
|
32
|
+
);
|
|
31
33
|
}
|
|
32
34
|
```
|
|
33
35
|
|
|
36
|
+
For efficieny in case of multiple creations rendering, do not destroy the component, just update slug prop.
|
|
37
|
+
|
|
34
38
|
## License
|
|
35
39
|
|
|
36
40
|
MIT © [shivampip](https://github.com/shivampip)
|
package/dist/index.es.js
CHANGED
|
@@ -39,7 +39,7 @@ function QurealiFrame(_ref) {
|
|
|
39
39
|
// src={`https://show.qureal.com/embed/${slug}`}
|
|
40
40
|
, style: _extends({
|
|
41
41
|
width: "100%",
|
|
42
|
-
height: "
|
|
42
|
+
height: "100vh"
|
|
43
43
|
}, style)
|
|
44
44
|
})
|
|
45
45
|
);
|
|
@@ -60,7 +60,7 @@ function QurealViewer(_ref) {
|
|
|
60
60
|
_ref$onFormSubmit = _ref.onFormSubmit,
|
|
61
61
|
onFormSubmit = _ref$onFormSubmit === undefined ? function () {} : _ref$onFormSubmit,
|
|
62
62
|
_ref$style = _ref.style,
|
|
63
|
-
style = _ref$style === undefined ? {
|
|
63
|
+
style = _ref$style === undefined ? {} : _ref$style;
|
|
64
64
|
|
|
65
65
|
|
|
66
66
|
var sendToIFrame = function sendToIFrame(creation_slug) {
|
package/dist/index.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../src/QurealiFrame.js","../src/QurealViewer.js"],"sourcesContent":["import React, { Fragment, useEffect, useRef } from \"react\";\n\n\nfunction QurealiFrame({ slug, type = \"creation\", style = {} }) {\n\n\n return (\n <Fragment>\n <iframe\n id=\"qureal_iframe\"\n title=\"Qureal\"\n // src={`http://localhost:3201/embed/${creation_slug}`}\n src={type === \"creation\" ? `https://show.qureal.com/embed/${slug}` : `https://show.qureal.com/ts/${slug}`}\n // src={`https://show.qureal.com/embed/${slug}`}\n style={{\n width: \"100%\",\n height: \"
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../src/QurealiFrame.js","../src/QurealViewer.js"],"sourcesContent":["import React, { Fragment, useEffect, useRef } from \"react\";\n\n\nfunction QurealiFrame({ slug, type = \"creation\", style = {} }) {\n\n\n return (\n <Fragment>\n <iframe\n id=\"qureal_iframe\"\n title=\"Qureal\"\n // src={`http://localhost:3201/embed/${creation_slug}`}\n src={type === \"creation\" ? `https://show.qureal.com/embed/${slug}` : `https://show.qureal.com/ts/${slug}`}\n // src={`https://show.qureal.com/embed/${slug}`}\n style={{\n width: \"100%\",\n height: \"100vh\",\n ...style\n }}\n />\n </Fragment>\n );\n}\n\n// export default QurealiFrame;\nexport default React.memo(QurealiFrame, () => true)\n","import React, { Fragment, useEffect, useRef } from \"react\";\nimport QurealiFrame from \"./QurealiFrame\";\n\nconst ALLOWED_ORIGINS = [\"https://show.qureal.com\", \"http://localhost:3201\"];\n\nfunction QurealViewer({\n slug = \"qi_sample\",\n type = \"creation\", // creation or template \n onFormSubmit = () => { },\n style = {}\n}) {\n\n const sendToIFrame = (creation_slug) => {\n console.log(\"Sending data to iFrame\")\n const qureal_element = document.getElementById(\"qureal_iframe\");\n\n const qureal_window = qureal_element ? qureal_element.contentWindow : null;\n if (qureal_window) {\n qureal_window.postMessage({\n message_type: \"OPEN_CREATION\",\n data: {\n slug: creation_slug\n }\n }, \"*\");\n console.log(\"Data sent to iframe\")\n }\n }\n\n useEffect(() => {\n sendToIFrame(slug)\n }, [slug])\n\n useEffect(() => {\n const handler = (ev) => {\n if (ALLOWED_ORIGINS.includes(ev.origin) && typeof ev.data === \"object\") {\n switch (ev.data.event_type) {\n case \"FORM_SUBMIT\":\n onFormSubmit(ev.data.data);\n break;\n default:\n console.log(\"No event type found\");\n console.log(ev.data);\n }\n }\n };\n\n window.addEventListener(\"message\", handler);\n return () => window.removeEventListener(\"message\", handler);\n }, []);\n\n return (\n <QurealiFrame\n slug={slug}\n type={type}\n style={style}\n />\n );\n}\n\n// export default QurealiFrame;\nexport default QurealViewer\n"],"names":["QurealiFrame","slug","type","style","React","memo","ALLOWED_ORIGINS","QurealViewer","onFormSubmit","sendToIFrame","creation_slug","log","qureal_element","document","getElementById","qureal_window","contentWindow","postMessage","handler","ev","includes","origin","babelHelpers.typeof","data","event_type","addEventListener","window","removeEventListener"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAGA,SAASA,YAAT,OAA+D;QAAvCC,IAAuC,QAAvCA,IAAuC;yBAAjCC,IAAiC;QAAjCA,IAAiC,6BAA1B,UAA0B;0BAAdC,KAAc;QAAdA,KAAc,8BAAN,EAAM;;;WAIvD;gBAAA;;;gBAEW,eADP;mBAEU;;cAEN,KAAKD,SAAS,UAAT,sCAAuDD,IAAvD,mCAA8FA;;cAEnG;uBACW,MADX;wBAEY;eACLE,KAHP;;KARZ;;;;AAmBJ,qBAAeC,MAAMC,IAAN,CAAWL,YAAX,EAAyB;WAAM,IAAN;CAAzB,CAAf;;ACtBA,IAAMM,kBAAkB,CAAC,yBAAD,EAA4B,uBAA5B,CAAxB;;AAEA,SAASC,YAAT,OAKG;yBAJCN,IAID;QAJCA,IAID,6BAJQ,WAIR;yBAHCC,IAGD;QAHCA,IAGD,6BAHQ,UAGR;iCAFCM,YAED;QAFCA,YAED,qCAFgB,YAAM,EAEtB;0BADCL,KACD;QADCA,KACD,8BADS,EACT;;;QAEOM,eAAe,SAAfA,YAAe,CAACC,aAAD,EAAmB;gBAC5BC,GAAR,CAAY,wBAAZ;YACMC,iBAAiBC,SAASC,cAAT,CAAwB,eAAxB,CAAvB;;YAEMC,gBAAgBH,iBAAiBA,eAAeI,aAAhC,GAAgD,IAAtE;YACID,aAAJ,EAAmB;0BACDE,WAAd,CAA0B;8BACR,eADQ;sBAEhB;0BACIP;;aAHd,EAKG,GALH;oBAMQC,GAAR,CAAY,qBAAZ;;KAZR;;cAgBU,YAAM;qBACCV,IAAb;KADJ,EAEG,CAACA,IAAD,CAFH;;cAIU,YAAM;YACNiB,UAAU,SAAVA,OAAU,CAACC,EAAD,EAAQ;gBAChBb,gBAAgBc,QAAhB,CAAyBD,GAAGE,MAA5B,KAAuCC,QAAOH,GAAGI,IAAV,MAAmB,QAA9D,EAAwE;wBAC5DJ,GAAGI,IAAH,CAAQC,UAAhB;yBACS,aAAL;qCACiBL,GAAGI,IAAH,CAAQA,IAArB;;;gCAGQZ,GAAR,CAAY,qBAAZ;gCACQA,GAAR,CAAYQ,GAAGI,IAAf;;;SARhB;;eAaOE,gBAAP,CAAwB,SAAxB,EAAmCP,OAAnC;eACO;mBAAMQ,OAAOC,mBAAP,CAA2B,SAA3B,EAAsCT,OAAtC,CAAN;SAAP;KAfJ,EAgBG,EAhBH;;WAmBI,oBAAClB,cAAD;cACUC,IADV;cAEUC,IAFV;eAGWC;MAJf;;;;;"}
|
package/dist/index.js
CHANGED
|
@@ -46,7 +46,7 @@ function QurealiFrame(_ref) {
|
|
|
46
46
|
// src={`https://show.qureal.com/embed/${slug}`}
|
|
47
47
|
, style: _extends({
|
|
48
48
|
width: "100%",
|
|
49
|
-
height: "
|
|
49
|
+
height: "100vh"
|
|
50
50
|
}, style)
|
|
51
51
|
})
|
|
52
52
|
);
|
|
@@ -67,7 +67,7 @@ function QurealViewer(_ref) {
|
|
|
67
67
|
_ref$onFormSubmit = _ref.onFormSubmit,
|
|
68
68
|
onFormSubmit = _ref$onFormSubmit === undefined ? function () {} : _ref$onFormSubmit,
|
|
69
69
|
_ref$style = _ref.style,
|
|
70
|
-
style = _ref$style === undefined ? {
|
|
70
|
+
style = _ref$style === undefined ? {} : _ref$style;
|
|
71
71
|
|
|
72
72
|
|
|
73
73
|
var sendToIFrame = function sendToIFrame(creation_slug) {
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/QurealiFrame.js","../src/QurealViewer.js"],"sourcesContent":["import React, { Fragment, useEffect, useRef } from \"react\";\n\n\nfunction QurealiFrame({ slug, type = \"creation\", style = {} }) {\n\n\n return (\n <Fragment>\n <iframe\n id=\"qureal_iframe\"\n title=\"Qureal\"\n // src={`http://localhost:3201/embed/${creation_slug}`}\n src={type === \"creation\" ? `https://show.qureal.com/embed/${slug}` : `https://show.qureal.com/ts/${slug}`}\n // src={`https://show.qureal.com/embed/${slug}`}\n style={{\n width: \"100%\",\n height: \"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/QurealiFrame.js","../src/QurealViewer.js"],"sourcesContent":["import React, { Fragment, useEffect, useRef } from \"react\";\n\n\nfunction QurealiFrame({ slug, type = \"creation\", style = {} }) {\n\n\n return (\n <Fragment>\n <iframe\n id=\"qureal_iframe\"\n title=\"Qureal\"\n // src={`http://localhost:3201/embed/${creation_slug}`}\n src={type === \"creation\" ? `https://show.qureal.com/embed/${slug}` : `https://show.qureal.com/ts/${slug}`}\n // src={`https://show.qureal.com/embed/${slug}`}\n style={{\n width: \"100%\",\n height: \"100vh\",\n ...style\n }}\n />\n </Fragment>\n );\n}\n\n// export default QurealiFrame;\nexport default React.memo(QurealiFrame, () => true)\n","import React, { Fragment, useEffect, useRef } from \"react\";\nimport QurealiFrame from \"./QurealiFrame\";\n\nconst ALLOWED_ORIGINS = [\"https://show.qureal.com\", \"http://localhost:3201\"];\n\nfunction QurealViewer({\n slug = \"qi_sample\",\n type = \"creation\", // creation or template \n onFormSubmit = () => { },\n style = {}\n}) {\n\n const sendToIFrame = (creation_slug) => {\n console.log(\"Sending data to iFrame\")\n const qureal_element = document.getElementById(\"qureal_iframe\");\n\n const qureal_window = qureal_element ? qureal_element.contentWindow : null;\n if (qureal_window) {\n qureal_window.postMessage({\n message_type: \"OPEN_CREATION\",\n data: {\n slug: creation_slug\n }\n }, \"*\");\n console.log(\"Data sent to iframe\")\n }\n }\n\n useEffect(() => {\n sendToIFrame(slug)\n }, [slug])\n\n useEffect(() => {\n const handler = (ev) => {\n if (ALLOWED_ORIGINS.includes(ev.origin) && typeof ev.data === \"object\") {\n switch (ev.data.event_type) {\n case \"FORM_SUBMIT\":\n onFormSubmit(ev.data.data);\n break;\n default:\n console.log(\"No event type found\");\n console.log(ev.data);\n }\n }\n };\n\n window.addEventListener(\"message\", handler);\n return () => window.removeEventListener(\"message\", handler);\n }, []);\n\n return (\n <QurealiFrame\n slug={slug}\n type={type}\n style={style}\n />\n );\n}\n\n// export default QurealiFrame;\nexport default QurealViewer\n"],"names":["QurealiFrame","slug","type","style","React","memo","ALLOWED_ORIGINS","QurealViewer","onFormSubmit","sendToIFrame","creation_slug","log","qureal_element","document","getElementById","qureal_window","contentWindow","postMessage","handler","ev","includes","origin","babelHelpers.typeof","data","event_type","addEventListener","window","removeEventListener"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,SAASA,YAAT,OAA+D;QAAvCC,IAAuC,QAAvCA,IAAuC;yBAAjCC,IAAiC;QAAjCA,IAAiC,6BAA1B,UAA0B;0BAAdC,KAAc;QAAdA,KAAc,8BAAN,EAAM;;;WAIvDC;sBAAA;;;gBAEW,eADP;mBAEU;;cAEN,KAAKF,SAAS,UAAT,sCAAuDD,IAAvD,mCAA8FA;;cAEnG;uBACW,MADX;wBAEY;eACLE,KAHP;;KARZ;;;;AAmBJ,qBAAeC,eAAMC,IAAN,CAAWL,YAAX,EAAyB;WAAM,IAAN;CAAzB,CAAf;;ACtBA,IAAMM,kBAAkB,CAAC,yBAAD,EAA4B,uBAA5B,CAAxB;;AAEA,SAASC,YAAT,OAKG;yBAJCN,IAID;QAJCA,IAID,6BAJQ,WAIR;yBAHCC,IAGD;QAHCA,IAGD,6BAHQ,UAGR;iCAFCM,YAED;QAFCA,YAED,qCAFgB,YAAM,EAEtB;0BADCL,KACD;QADCA,KACD,8BADS,EACT;;;QAEOM,eAAe,SAAfA,YAAe,CAACC,aAAD,EAAmB;gBAC5BC,GAAR,CAAY,wBAAZ;YACMC,iBAAiBC,SAASC,cAAT,CAAwB,eAAxB,CAAvB;;YAEMC,gBAAgBH,iBAAiBA,eAAeI,aAAhC,GAAgD,IAAtE;YACID,aAAJ,EAAmB;0BACDE,WAAd,CAA0B;8BACR,eADQ;sBAEhB;0BACIP;;aAHd,EAKG,GALH;oBAMQC,GAAR,CAAY,qBAAZ;;KAZR;;oBAgBU,YAAM;qBACCV,IAAb;KADJ,EAEG,CAACA,IAAD,CAFH;;oBAIU,YAAM;YACNiB,UAAU,SAAVA,OAAU,CAACC,EAAD,EAAQ;gBAChBb,gBAAgBc,QAAhB,CAAyBD,GAAGE,MAA5B,KAAuCC,QAAOH,GAAGI,IAAV,MAAmB,QAA9D,EAAwE;wBAC5DJ,GAAGI,IAAH,CAAQC,UAAhB;yBACS,aAAL;qCACiBL,GAAGI,IAAH,CAAQA,IAArB;;;gCAGQZ,GAAR,CAAY,qBAAZ;gCACQA,GAAR,CAAYQ,GAAGI,IAAf;;;SARhB;;eAaOE,gBAAP,CAAwB,SAAxB,EAAmCP,OAAnC;eACO;mBAAMQ,OAAOC,mBAAP,CAA2B,SAA3B,EAAsCT,OAAtC,CAAN;SAAP;KAfJ,EAgBG,EAhBH;;WAmBId,6BAACJ,cAAD;cACUC,IADV;cAEUC,IAFV;eAGWC;MAJf;;;;;"}
|