95 lines
3.1 KiB
JavaScript
95 lines
3.1 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>
|
|
// );
|
|
// }
|