ardas / stripo-plugin

stripo-plugin
19 stars 32 forks source link

How to keep editing while saving? #21

Open ghost opened 1 year ago

ghost commented 1 year ago

Whenever my onClickSave function calls window.StripoApi.getTemplate() and window.StripoApi.compileEmail(), the Stripo plugin removes the current CKEditor. This prevents the user from continuing to type after hitting the Ctrl+S hotkey.

Here is my code to attempt a workaround of this, but it doesn't work:

    // Handle Ctrl+KeyS for Stripo iframe.
    React.useEffect(() => {
      if (!ready) return;
      /** @type {HTMLIFrameElement} */
      const iframe = document.getElementsByClassName("stripo-preview-frame")[0];
      if (!iframe) return;
      const doc = iframe.contentDocument;
      /** @param {KeyboardEvent} e */
      function handle(e) {
        if (e.ctrlKey && e.code === "KeyS") {
          e.preventDefault();
          const focusEl = doc.activeElement;
          onClickSave().then(() => {
            iframe.focus();
            // console.log("f", focusEl);  // <div class="esd-cke-text"></div>
            if (focusEl?.focus) {
              // The following never works because the input disappears on save...
              // focusEl.focus();
            }
          });
        }
      }
      doc.addEventListener("keydown", handle);
      return () => {
        doc.removeEventListener("keydown", handle);
      };
    }, [ready, onClickSave]);
ghost commented 1 year ago

Here's the full content of my save function which is called by the onClickSave function referenced in my code above:

      function save(template, data) {
        // setSaving(true);
        setReady(false);
        const { emailInfo, editorInfo, specInfo } = data;
        const email = { ...emailInfo };
        const editor = { ...editorInfo };
        const spec = { ...specInfo };
        return new Promise((resolve, _reject) => {
          window.StripoApi.getTemplate(function saveTemplate(
            emailEditHtml,
            emailEditCss,
            width,
            height,
          ) {
            email.height = height;
            email.width = width;
            const minimizeCompiledEmail = true;
            window.StripoApi.compileEmail(async function compileTemplate(
              error,
              emailHtml,
              emailAmp,
              // ampErrors,
            ) {
              if (error) {
                console.error("Error compiling email", error);
                await alertAsync({
                  title: "Error",
                  text:
                    "There was an error saving the email. " +
                    "Please try again or contact support.",
                });
                // setSaving(false);
                setReady(true);
                resolve(false);
                return;
              }
              let success = true;
              await saveEmailEdit(template, {
                email,
                emailHtml,
                emailAmp,
                emailEditHtml,
                emailEditCss,
                editor,
                spec,
              })
                .then(() => {
                  setChanged(false);
                })
                .catch(async error => {
                  console.error("Error saving email", error);
                  success = false;
                  await alertAsync({
                    title: "Error",
                    text:
                      "There was an error saving the email. " +
                      "Please try again or contact support.",
                  });
                });
              // console.log("Saved email", result);
              // setSaving(false);
              setReady(true);
              resolve(success);
            }, minimizeCompiledEmail);
          });
        });
      }