@imgly/editor-react-native 1.40.0

package/ios/IMGLYEditorModule.swift

@@ -0,0 +1,110 @@
+import UIKit
+
+/// The iOS implementation for the `@imgly/editor-react-native` React Native module.
+@objc(IMGLYEditorModuleSwiftAdapter) @objcMembers public class IMGLYEditorModuleSwiftAdapter: NSObject {
+  // MARK: - Typealias
+
+  /// A closure to specify an `EditorBuilder.Builder` based on a given `preset` and `metadata`.
+  public typealias IMGLYBuilderClosure = (_ preset: EditorPreset?, _ metadata: [String: Any]?) -> EditorBuilder.Builder
+
+  // MARK: - Properties
+
+  /// The shared instance.
+  public static var shared = IMGLYEditorModuleSwiftAdapter()
+
+  /// The `IMGLYBuilderClosure` to use for UI creation.
+  public var builderClosure: IMGLYBuilderClosure?
+
+  /// The `UIViewController` hosting the editor.
+  private var presentationController: UIViewController?
+
+  /// The current `EditorBuilder.EditorBuilderResult`.
+  private var currentResultHandler: EditorBuilder.EditorBuilderResult?
+
+  // MARK: - Editor
+
+  /// Opens the creative editor.
+  /// - Parameters:
+  ///   - preset: The `EditorPreset` used to determine which UI preset to use.
+  ///   - settings: The `EditorSettings` containing all relevant information for the editor.
+  ///   - metadata: Any custom metadata used for the `EditorBuilder.Builder`.
+  ///   - completion: The completion handler to execute once the editor failed, cancelled or exported.
+  public func openEditor(
+    _ preset: EditorPreset,
+    settings: EditorSettings,
+    metadata: [String: Any]?,
+    completion: @escaping (_ result: EditorResult?, _ error: NSError?) -> Void
+  ) {
+    _openEditor(preset, settings: settings, metadata: metadata, completion: completion)
+  }
+
+  /// Opens the creative editor.
+  /// - Parameters:
+  ///   - settings: The `EditorSettings` containing all relevant information for the editor.
+  ///   - metadata: Any custom metadata used for the `EditorBuilder.Builder`.
+  ///   - completion: The completion handler to execute once the editor failed, cancelled or exported.
+  public func openEditor(
+    settings: EditorSettings,
+    metadata: [String: Any]?,
+    completion: @escaping (_ result: EditorResult?, _ error: NSError?) -> Void
+  ) {
+    _openEditor(nil, settings: settings, metadata: metadata, completion: completion)
+  }
+
+  private func _openEditor(
+    _ preset: EditorPreset?,
+    settings: EditorSettings,
+    metadata: [String: Any]?,
+    completion: @escaping (_ result: EditorResult?, _ error: NSError?) -> Void
+  ) {
+    let builder = builderClosure?(preset, metadata) ?? builderForPreset(preset)
+    // Assign the `currentResultHandler` in order to manage the calls to the completion handler.
+    currentResultHandler = { [weak self] result in
+      switch result {
+      case let .success(artifact):
+        completion(artifact, nil)
+      case let .failure(error):
+        completion(nil, error as NSError)
+      }
+      // Remove the handler to prevent multiple invokations.
+      self?.currentResultHandler = nil
+      self?.presentationController?.presentingViewController?.dismiss(animated: true)
+    }
+
+    presentationController = builder(settings, preset, metadata) { [weak self] result in
+      self?.currentResultHandler?(result)
+    }
+    presentationController?.modalPresentationStyle = .fullScreen
+
+    if let presentationController, let windowScene = UIApplication.shared.connectedScenes
+      .filter({ $0.activationState == .foregroundActive })
+      .first as? UIWindowScene {
+      if let rootViewController = windowScene.windows
+        .filter(\.isKeyWindow).first?.rootViewController {
+        rootViewController.present(presentationController, animated: true, completion: nil)
+      }
+    }
+  }
+
+  // MARK: - Helpers
+
+  /// Returns the suitable `EditorBuilder.Builder` for a given `EditorPreset`.
+  /// - Parameter preset: The `EditorPreset`.
+  /// - Returns: The suitable `EditorBuilder.Builder`. Defaults to `EditorPreset.design`.
+  private func builderForPreset(_ preset: EditorPreset?) -> EditorBuilder.Builder {
+    switch preset {
+    case .apparel:
+      EditorBuilder.apparel()
+    case .postcard:
+      EditorBuilder.postcard()
+    case .photo:
+      EditorBuilder.photo()
+    case .video:
+      EditorBuilder.video()
+    case .design:
+      EditorBuilder.design()
+    default:
+      EditorBuilder.design()
+    }
+  }
+}

package/ios/Model/EditorBuilder.swift

@@ -0,0 +1,293 @@
+import IMGLYApparelEditor
+import IMGLYDesignEditor
+import IMGLYPhotoEditor
+import IMGLYPostcardEditor
+import IMGLYVideoEditor
+import SwiftUI
+import UIKit
+
+/// The `EditorBuilder` is used to build different editor configurations.
+public enum EditorBuilder {
+  /// A closure used to return a `Result<EditorResult?, Error>` from the editor.
+  public typealias EditorBuilderResult = (Result<EditorResult?, Error>) -> Void
+
+  /// Closure allowing to return a custom UI based on various input.
+  /// - Parameters:
+  ///   - settings: The `EditorSettings`.
+  ///   - preset: The `EditorPreset` pointing to a prebuild UI configuration.
+  ///   - metadata: The metadata.
+  ///   - result: The `EditorBuilderResult` used to return a result.
+  /// - Returns: A `UIViewController`.
+  public typealias Builder = (
+    _ settings: EditorSettings,
+    _ preset: EditorPreset?,
+    _ metadata: [String: Any]?,
+    _ result: @escaping EditorBuilderResult
+  ) -> UIViewController
+
+  /// The default apparel editor.
+  public static func apparel() -> Builder {
+    { config, _, _, result in
+      @ViewBuilder func apparelEditor(settings _: EditorSettings, result: @escaping EditorBuilderResult) -> some View {
+        ModalApparelEditor(settings: config, result: result)
+      }
+      return UIHostingController(rootView: apparelEditor(settings: config, result: result))
+    }
+  }
+
+  /// The default postcard editor.
+  public static func postcard() -> Builder {
+    { config, _, _, result in
+      @ViewBuilder func postcardEditor(settings _: EditorSettings, result: @escaping EditorBuilderResult) -> some View {
+        ModalPostcardEditor(settings: config, result: result)
+      }
+      return UIHostingController(rootView: postcardEditor(settings: config, result: result))
+    }
+  }
+
+  /// The default design editor.
+  public static func design() -> Builder {
+    { settings, _, _, result in
+      @ViewBuilder func designEditor(settings: EditorSettings, result: @escaping EditorBuilderResult) -> some View {
+        ModalDesignEditor(settings: settings, result: result)
+      }
+      return UIHostingController(rootView: designEditor(settings: settings, result: result))
+    }
+  }
+
+  /// The default photo editor.
+  public static func photo() -> Builder {
+    { settings, _, _, result in
+      @ViewBuilder func photoEditor(settings: EditorSettings, result: @escaping EditorBuilderResult) -> some View {
+        ModalPhotoEditor(settings: settings, result: result)
+      }
+      return UIHostingController(rootView: photoEditor(settings: settings, result: result))
+    }
+  }
+
+  /// The default video editor.
+  public static func video() -> Builder {
+    { settings, _, _, result in
+      @ViewBuilder func videoEditor(settings: EditorSettings, result: @escaping EditorBuilderResult) -> some View {
+        ModalVideoEditor(settings: settings, result: result)
+      }
+      return UIHostingController(rootView: videoEditor(settings: settings, result: result))
+    }
+  }
+
+  /// A custom editor implementation.
+  /// - Parameter contentProvider:
+  /// - Returns: A `Builder` providing the custom view.
+  public static func custom(_ contentProvider: @escaping (
+    _ settings: EditorSettings,
+    _ preset: EditorPreset?,
+    _ metadata: [String: Any]?,
+    _ result: @escaping EditorBuilderResult
+  ) -> some View) -> Builder {
+    { settings, preset, metadata, result in
+      let hostingController = UIHostingController(rootView: contentProvider(settings, preset, metadata, result))
+      return hostingController
+    }
+  }
+}
+
+// MARK: - Custom
+
+/// An extension for the editor views.
+extension EditorBuilder {
+  /// The message to send if the native error has been dismissed after throwing an error.
+  private static let exportFailedMessage =
+    "Failed to initialize the editor. Please verify that the loaded license is correct."
+
+  /// Generates `EngineSettings` based on an `EditorSettings`.
+  /// - Parameter settings: The `EditorSettings`.
+  /// - Returns: The derived `EngineSettings`.
+  private static func engineSettings(for settings: EditorSettings) -> EngineSettings {
+    if let url = URL(string: settings.sceneBaseUri) {
+      EngineSettings(license: settings.license, userID: settings.userId, baseURL: url)
+    } else {
+      EngineSettings(license: settings.license, userID: settings.userId)
+    }
+  }
+
+  /// A modal apparel editor handling native errors.
+  private struct ModalApparelEditor: View {
+    @Environment(\.dismiss) private var dismiss
+    private let settings: EditorSettings
+    private let result: EditorBuilderResult
+
+    init(settings: EditorSettings, result: @escaping EditorBuilderResult) {
+      self.settings = settings
+      self.result = result
+    }
+
+    var body: some View {
+      ModalEditor {
+        ApparelEditor(engineSettings(for: settings))
+          .imgly.onCreate { engine in
+            try await OnCreate.load(settings, defaultSource: ApparelEditor.defaultScene)(engine)
+          }
+          .imgly.onExport { engine, _ in
+            do {
+              let editorResult = try await OnExport.export(engine, .pdf)
+              result(.success(editorResult))
+            } catch {
+              result(.failure(error))
+            }
+          }
+      } onDismiss: { cancelled in
+        if cancelled {
+          result(.success(nil))
+          dismiss()
+        } else {
+          result(.failure(exportFailedMessage))
+        }
+      }
+    }
+  }
+
+  /// A modal postcard editor handling native errors.
+  private struct ModalPostcardEditor: View {
+    @Environment(\.dismiss) private var dismiss
+    private let settings: EditorSettings
+    private let result: EditorBuilderResult
+
+    init(settings: EditorSettings, result: @escaping EditorBuilderResult) {
+      self.settings = settings
+      self.result = result
+    }
+
+    var body: some View {
+      ModalEditor {
+        PostcardEditor(engineSettings(for: settings))
+          .imgly.onCreate { engine in
+            try await OnCreate.load(settings, defaultSource: PostcardEditor.defaultScene)(engine)
+          }
+          .imgly.onExport { engine, _ in
+            do {
+              let editorResult = try await OnExport.export(engine, .pdf)
+              result(.success(editorResult))
+            } catch {
+              result(.failure(error))
+            }
+          }
+      } onDismiss: { cancelled in
+        if cancelled {
+          result(.success(nil))
+          dismiss()
+        } else {
+          result(.failure(exportFailedMessage))
+        }
+      }
+    }
+  }
+
+  /// A modal design editor handling native errors.
+  private struct ModalDesignEditor: View {
+    @Environment(\.dismiss) private var dismiss
+    private let settings: EditorSettings
+    private let result: EditorBuilderResult
+
+    init(settings: EditorSettings, result: @escaping EditorBuilderResult) {
+      self.settings = settings
+      self.result = result
+    }
+
+    var body: some View {
+      ModalEditor {
+        DesignEditor(engineSettings(for: settings))
+          .imgly.onCreate { engine in
+            try await OnCreate.load(settings, defaultSource: DesignEditor.defaultScene)(engine)
+          }
+          .imgly.onExport { engine, _ in
+            do {
+              let editorResult = try await OnExport.export(engine, .pdf)
+              result(.success(editorResult))
+            } catch {
+              result(.failure(error))
+            }
+          }
+      } onDismiss: { cancelled in
+        if cancelled {
+          result(.success(nil))
+          dismiss()
+        } else {
+          result(.failure(exportFailedMessage))
+        }
+      }
+    }
+  }
+
+  /// A modal photo editor handling native errors.
+  private struct ModalPhotoEditor: View {
+    @Environment(\.dismiss) private var dismiss
+    private let settings: EditorSettings
+    private let result: EditorBuilderResult
+
+    init(settings: EditorSettings, result: @escaping EditorBuilderResult) {
+      self.settings = settings
+      self.result = result
+    }
+
+    var body: some View {
+      ModalEditor {
+        PhotoEditor(engineSettings(for: settings))
+          .imgly.onCreate { engine in
+            try await OnCreate
+              .load(settings, settings.source?.type ?? .image, defaultSource: PhotoEditor.defaultImage)(engine)
+          }
+          .imgly.onExport { engine, _ in
+            do {
+              let editorResult = try await OnExport.export(engine, .png)
+              result(.success(editorResult))
+            } catch {
+              result(.failure(error))
+            }
+          }
+      } onDismiss: { cancelled in
+        if cancelled {
+          result(.success(nil))
+          dismiss()
+        } else {
+          result(.failure(exportFailedMessage))
+        }
+      }
+    }
+  }
+
+  /// A modal video editor handling native errors.
+  private struct ModalVideoEditor: View {
+    @Environment(\.dismiss) private var dismiss
+    private let settings: EditorSettings
+    private let result: EditorBuilderResult
+
+    init(settings: EditorSettings, result: @escaping EditorBuilderResult) {
+      self.settings = settings
+      self.result = result
+    }
+
+    var body: some View {
+      ModalEditor {
+        VideoEditor(engineSettings(for: settings))
+          .imgly.onCreate { engine in
+            try await OnCreate.load(settings, defaultSource: VideoEditor.defaultScene)(engine)
+          }
+          .imgly.onExport { engine, eventHandler in
+            do {
+              let editorResult = try await OnExport.exportVideo(engine, eventHandler, .mp4)
+              result(.success(editorResult))
+            } catch {
+              result(.failure(error))
+            }
+          }
+      } onDismiss: { cancelled in
+        if cancelled {
+          result(.success(nil))
+          dismiss()
+        } else {
+          result(.failure(exportFailedMessage))
+        }
+      }
+    }
+  }
+}

package/ios/Model/EditorPreset.swift

@@ -0,0 +1,52 @@
+/// An enum containing all prebuild editor configurations.
+@objc public enum EditorPreset: Int {
+  /// The apparel editor.
+  case apparel
+
+  /// The postcard editor.
+  case postcard
+
+  /// The photo editor.
+  case photo
+
+  /// The video editor.
+  case video
+
+  /// The design editor.
+  case design
+
+  // Converts enum case to the corresponding string
+  public var stringValue: String {
+    switch self {
+    case .apparel: "apparel"
+    case .postcard: "postcard"
+    case .photo: "photo"
+    case .video: "video"
+    case .design: "design"
+    }
+  }
+
+  // Initialize from string
+  public static func fromString(_ rawValue: String) -> EditorPreset {
+    switch rawValue {
+    case "apparel": .apparel
+    case "postcard": .postcard
+    case "photo": .photo
+    case "video": .video
+    case "design": .design
+    default: .design
+    }
+  }
+}
+
+@objc @objcMembers public class EditorPresetParser: NSObject {
+  // Method to convert from NSString to EditorPreset enum
+  public static func fromString(_ rawValue: NSString) -> EditorPreset {
+    EditorPreset.fromString(rawValue as String)
+  }
+
+  // Method to convert from EditorPreset enum to NSString
+  public static func toString(_ preset: EditorPreset) -> NSString {
+    preset.stringValue as NSString
+  }
+}

package/ios/Model/EditorResult.swift

@@ -0,0 +1,27 @@
+/// A struct representing the result of an editor export.
+@objc @objcMembers public class EditorResult: NSObject {
+  /// The source of the exported scene.
+  public let scene: String?
+
+  /// The source of the exported artifact, e.g. image, video.
+  public let artifact: String?
+
+  /// The source of the exported thumbnail.
+  public let thumbnail: String?
+
+  /// The associated metadata.
+  public let metadata: [String: Any]
+
+  /// Creates a new `EditorResult`.
+  /// - Parameters:
+  ///   - scene: The source of the exported scene.
+  ///   - artifact: The source of the exported artifact, e.g. image, video.
+  ///   - thumbnail: The source of the exported thumbnail.
+  ///   - metadata: The associated metadata.
+  public init(scene: String?, artifact: String?, thumbnail: String?, metadata: [String: Any] = [:]) {
+    self.scene = scene
+    self.artifact = artifact
+    self.thumbnail = thumbnail
+    self.metadata = metadata
+  }
+}

package/ios/Model/EditorSettings.swift

@@ -0,0 +1,33 @@
+/// A struct containing all necessary settings to setup the editor.
+@objc @objcMembers public class EditorSettings: NSObject, Codable {
+  /// The license key.
+  public let license: String
+
+  /// The base uri for the assets included in the scene that have a relative source.
+  public let sceneBaseUri: String
+
+  /// The base uri of the default assets in the asset library.
+  public let assetBaseUri: String?
+
+  /// The id of the current user.
+  public let userId: String?
+
+  /// The source to load into the editor.
+  public var source: Source?
+
+  /// Creates a new instance from a given dictionary.
+  ///
+  /// - Parameters:
+  ///   - dictionary: The dictionary to convert the instance from.
+  /// - Returns: The `EditorSettings` instance.
+  public static func fromDictionary(_ dictionary: [String: Any]) -> EditorSettings? {
+    do {
+      let data = try JSONSerialization.data(withJSONObject: dictionary, options: [])
+      let settings = try JSONDecoder().decode(EditorSettings.self, from: data)
+      return settings
+    } catch {
+      print("Error decoding dictionary: \(error)")
+      return nil
+    }
+  }
+}

package/ios/Model/EditorSourceType.swift

@@ -0,0 +1,11 @@
+/// The `EditorSourceType` defines the type of source that is loaded into the editor.
+public enum EditorSourceType: String, Codable {
+  /// A `.scene` file.
+  case scene
+
+  /// An image file, e.g. `.png`.
+  case image
+
+  /// A video file, e.g. `.mp4`.
+  case video
+}

package/ios/Model/Source.swift

@@ -0,0 +1,8 @@
+/// A struct to declare a suitable source for the editor.
+public struct Source: Codable {
+  /// The source to load into the editor.
+  public var source: String
+
+  /// The source type.
+  public var type: EditorSourceType
+}

package/ios/View/ModalEditor.swift

@@ -0,0 +1,55 @@
+import IMGLYEditor
+import SwiftUI
+
+/// The `ModalEditor` contains an editor and adds the top navigation bar.
+public struct ModalEditor<Editor: View, Label: View>: View {
+  @ViewBuilder private let editor: () -> Editor
+  @ViewBuilder private let dismissLabel: () -> Label
+  private let onDismiss: (_ cancelled: Bool) -> Void
+
+  /// Initializes a new `ModalEditor`.
+  /// - Parameters:
+  ///   - editor: The editor that is contained.
+  ///   - dismissLabel: The label used for the dismiss action.
+  ///   - onDismiss: The closure called when the editor is dismissed.
+  ///   - cancelled: Indicates whether the editor has been dismissed by the user.
+  ///                        If `false`, the editor has been closed due to an error.
+  public init(@ViewBuilder editor: @escaping () -> Editor,
+              @ViewBuilder dismissLabel: @escaping () -> Label = { SwiftUI.Label("Home", systemImage: "house") },
+              onDismiss: @escaping (_ cancelled: Bool) -> Void) {
+    self.editor = editor
+    self.dismissLabel = dismissLabel
+    self.onDismiss = onDismiss
+  }
+
+  @State private var isBackButtonHidden = false
+  @Environment(\.dismiss) private var dismiss
+
+  @ViewBuilder private var dismissButton: some View {
+    Button {
+      onDismiss(true)
+    } label: {
+      dismissLabel()
+    }
+  }
+
+  public var body: some View {
+    NavigationView {
+      editor()
+        .onPreferenceChange(BackButtonHiddenKey.self) { newValue in
+          isBackButtonHidden = newValue
+        }
+        .toolbar {
+          ToolbarItem(placement: .navigationBarLeading) {
+            if !isBackButtonHidden {
+              dismissButton
+            }
+          }
+        }
+        .onDisappear(perform: {
+          onDismiss(false)
+        })
+    }
+    .navigationViewStyle(.stack)
+  }
+}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@imgly/editor-react-native",
+  "version": "1.40.0",
+  "description": "CreativeEditor SDK for React Native - enable photo, video and design editing for your users on iOS and Android.",
+  "react-native": "index.js",
+  "source": "index.js",
+  "types": "index.d.ts",
+  "files": [
+    "src",
+    "index.js",
+    "index.d.ts",
+    "android",
+    "ios",
+    "IMGLYEditorModule.podspec",
+    "README.md",
+    "LICENSE.md",
+    "!android/build",
+    "!ios/build",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__"
+  ],
+  "keywords": [
+    "react-native",
+    "ios",
+    "android",
+    "cesdk",
+    "editor",
+    "imgly"
+  ],
+  "author": "IMG.LY GmbH",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "homepage": "https://img.ly",
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "codegenConfig": {
+    "name": "IMGLYEditorModuleSpec",
+    "type": "modules",
+    "jsSrcsDir": "./",
+    "android": {
+      "javaPackageName": "ly.img.editor.reactnative.module"
+    }
+  }
+}