95 lines
2.8 KiB
JavaScript
95 lines
2.8 KiB
JavaScript
// import "codemirror-graphql/hint";
|
|
// import "codemirror-graphql/lint";
|
|
// import "codemirror-graphql/mode";
|
|
// import "codemirror/addon/hint/show-hint";
|
|
// import "codemirror/addon/lint/lint";
|
|
// import "codemirror/lib/codemirror.css";
|
|
// import "codemirror/theme/material.css";
|
|
import React, { useEffect, useRef, useState } from "react";
|
|
import ShopTemplateEditorSaveButton from "../shop-template-editor-save-button/shop-template-editor-save-button.component";
|
|
import ShopTemplateTestRender from "../shop-template-test-render/shop-template-test-render.component";
|
|
|
|
export default function ShopTemplateEditorComponent({
|
|
templateId,
|
|
html,
|
|
gql,
|
|
json,
|
|
editorState,
|
|
}) {
|
|
const [editorContent, seteditorContent] = editorState;
|
|
const [editorLoaded, setEditorLoaded] = useState(false);
|
|
const emailEditorRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
if (json && Object.keys(json).length > 0 && editorLoaded) {
|
|
console.log(emailEditorRef.current, !!emailEditorRef.current.loadDesign);
|
|
emailEditorRef.current.loadDesign(json);
|
|
}
|
|
}, [json, emailEditorRef, editorLoaded]);
|
|
|
|
useEffect(() => {
|
|
seteditorContent((prevstate) => {
|
|
return { ...prevstate, gql: gql };
|
|
});
|
|
}, [gql, seteditorContent]);
|
|
|
|
return (
|
|
<div>
|
|
{
|
|
// <EmailEditor
|
|
// style={{ width: "100%" }}
|
|
// ref={emailEditorRef}
|
|
// minHeight="700px"
|
|
// onLoad={() => setEditorLoaded(true)}
|
|
// options={{
|
|
// // customCSS: [
|
|
// // window.location.protocol +
|
|
// // "//" +
|
|
// // window.location.host +
|
|
// // "/render-styles.css",
|
|
// // ],
|
|
// customJS: [
|
|
// window.location.protocol +
|
|
// "//" +
|
|
// window.location.host +
|
|
// "/editor.js",
|
|
// ],
|
|
// }}
|
|
// />
|
|
}
|
|
|
|
<div style={{ display: "flex", width: "90vw", margin: "2rem" }}>
|
|
{
|
|
// <CmEditor
|
|
// style={{ flex: 1 }}
|
|
// value={editorContent.gql}
|
|
// options={{
|
|
// mode: "graphql",
|
|
// lint: {
|
|
// schema: GqlSchema,
|
|
// },
|
|
// hintOptions: {
|
|
// schema: GqlSchema,
|
|
// },
|
|
// lineNumbers: true,
|
|
// }}
|
|
// onBeforeChange={(editor, data, value) => {
|
|
// seteditorContent({ ...editorContent, gql: value });
|
|
// }}
|
|
// />
|
|
}
|
|
<ShopTemplateTestRender
|
|
style={{ flex: 1 }}
|
|
query={editorContent.gql}
|
|
emailEditorRef={emailEditorRef}
|
|
/>
|
|
<ShopTemplateEditorSaveButton
|
|
templateId={templateId}
|
|
gql={editorContent.gql}
|
|
emailEditorRef={emailEditorRef}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|