I encountered some errors while trying to import additional templates into the Img.ly project. Despite my efforts, I haven’t been able to resolve the issue on my own. Below is a snippet of the code I am using:

` useEffect(() => {
/** @type {import(“@cesdk/engine”).Configuration} */

const config = {
  locale: "en",
  theme: "light",
  license:
    "license-key",
  i18n: {
    en: {
      "libraries.ly.img.audio.ly.img.audio.label": "Soundstripe",
      ...pageFormatI18n(PAGE_FORMAT_ASSETS.assets),
      "libraries.ly.img.video.templates.label": "Example Templates",
    },
  },
  ui: {
    pageFormats: formatAssetsToPresets(PAGE_FORMAT_ASSETS),
    elements: {
      view: "advanced",
      panels: {
        inspector: {
          show: true,
          position: "right",
        },
        settings: true,
      },
      dock: {
        iconSize: "normal",
        hideLabels: false,
        groups: [
          {
            id: "my-templates-group",
            entryIds: ["my-templates-entry"],
          },
          {
            id: "misc",
            entryIds: ["pageFormats"],
          },
          {
            id: "examples",
            entryIds: ["ly.img.video.templates"],
          },
          {
            id: "ly.img.defaultGroup",
            showOverview: true,
          },
        ],
      },
      navigation: {
        action: {
          export: {
            show: true,
            format: ["image/png", "application/pdf"],
          },
        },
      },
      libraries: {
        insert: {
          entries: (defaultEntries) => {
            return [
              ...defaultEntries,
              PAGE_FORMATS_INSERT_ENTRY,
              {
                id: "ly.img.video.templates",
                sourceIds: ["ly.img.video.templates"],
                icon: () => caseAssetPath("/static-video-scenes-icon.svg"),
              },
            ];
          },
        },
      },
      navigation: {
        position: UserInterfaceElements.NavigationPosition.Top,
        action: {
          save: true,
          load: true,
          download: true,
          export: true,
        },
      },
    },
  },
  callbacks: {
    onUpload: "local",
    onSave: (scene) => {
      const element = document.createElement("a");
      const base64Data = btoa(unescape(encodeURIComponent(scene)));
      element.setAttribute(
        "href",
        `data:application/octet-stream;base64,${base64Data}`
      );
      element.setAttribute(
        "download",
        `cesdk-${new Date().toISOString()}.scene`
      );
      element.style.display = "none";
      document.body.appendChild(element);
      element.click();
      document.body.removeChild(element);
    },
    onLoad: async (file) => {
      const reader = new FileReader();
      reader.onload = async (e) => {
        if (typeof e.target.result !== "string") {
          console.error(
            "Expected a string, but received:",
            e.target.result
          );
          return; // Early exit if the result is not a string
        }

        const scene = e.target.result;
        if (!scene) {
          console.error("No valid scene content found.");
          return; // Exit the callback early
        }
        await cesdkRef.current.loadFromString(scene);
      };

      reader.onerror = (error) => {
        console.error("File reading error:", error);
      };
      reader.readAsText(file);
    },
    onDownload: "download",
    onExport: "download",
  },
};

let cesdk;

if (cesdk_container.current) {
  CreativeEditorSDK.create(cesdk_container.current, config).then(
    async (instance) => {
      instance.addDefaultAssetSources();
      instance.addDemoAssetSources({
        sceneMode: "Video",
        excludeAssetSourceIds: ["ly.img.audio"],
      });

      cesdk = instance;
      cesdkRef.current = instance;
      cesdk.engine.editor.setSettingBool("page/title/show", false);
      const scene = await cesdk.createVideoScene();

      loadTemplates(instance);

      // Check if the scene block supports blur before applying it
      const blockType = cesdk.engine.block.getType(scene);
      if (blockType === "image" || blockType === "video") {
        // Apply blur or other effects
        cesdk.engine.block.setBlur(scene, { amount: 10 }); // Example blur application
      } else {
        console.warn("The block type does not support blur.");
      }

      loadAssetSourceFromContentJSON(
        cesdk.engine,
        VIDEO_SCENES_ASSETS,
        caseAssetPath("/templates"),
        createDefaultApplyAssetScene(cesdk.engine)
      );
      loadAssetSourceFromContentJSON(
        cesdk.engine,
        AUDIO_ASSETS,
        caseAssetPath("/audio")
      );
      loadAssetSourceFromContentJSON(
        cesdk.engine,
        PAGE_FORMAT_ASSETS,
        caseAssetPath("/page-formats"),
        createApplyFormatAsset(cesdk.engine)
      );

      try {
        cesdk
          .loadFromURL(caseAssetPath(selectedTemplates))
          .catch((error) => {
            console.error("Failed to load template:", error);
          });
      } catch (error) {
        console.error("Error loading template:", error);
      }
    }
  );
}
return () => {
  if (cesdk) {
    cesdk.dispose();
  }
};

}, [cesdk_container, selectedTemplates]);
`

“I am attempting to resolve this issue by inspecting the onLoad and navigation sections:

navigation: { position: UserInterfaceElements.NavigationPosition.Top, action: { save: true, load: true, download: true, export: true, }, }, I aim to import and save the template files accordingly.”