feat(@lexical/devtools): Added full Safari support

.prettierignore

@@ -3,6 +3,8 @@
 **/dist/**
 **/build/**
 **/npm/**
+**/.output/**
+**/.browser-profiles/**
 **/__tests__/integration/fixtures/**
 packages/**/.wxt/**
 packages/playwright

packages/lexical-devtools/README.md

@@ -18,6 +18,23 @@ $ npm run dev
 - WXT Framework debugging: `DEBUG_WXT=1 npm run dev`
 - If you detach the Dev Tools in a separate window, and press `Cmd+Option+I` while Dev Tools window is focused, you will invoke the Dev Tools for the Dev Tools window.
 
+**Safari:**
+
+To develop and run Safari version of the extension you (obviously) need a Mac and Xcode installed. Safari on the contrary to other browsers doesn't accept web extensions as a zip archive but rather requires you to [wrap it in native code (Swift) wrapper](https://developer.apple.com/documentation/safariservices/safari_web_extensions/converting_a_web_extension_for_safari/). Fortunately this process is mostly automated here.
+
+```bash
+# Install Xcode
+
+# Environment setup
+sudo xcode-select -s /Applications/Xcode.app
+xcodebuild --install
+sudo xcodebuild -license
+xcodebuild -runFirstLaunch
+
+# Normal operation
+npm run dev:safari
+```
+
 ## Design
 
 This extension follows typical [Browser DevTools architecture](https://developer.chrome.com/docs/extensions/how-to/devtools/extend-devtools) that includes sereral independent contexts that communicate via events or extension APIs.

packages/lexical-devtools/package.json

@@ -8,7 +8,8 @@
     "dev": "wxt",
     "dev:firefox": "wxt -b firefox",
     "dev:edge": "wxt -b edge",
-    "dev:safari": "xcrun safari-web-extension-converter --macos-only --no-prompt .output/safari-mv2",
+    "dev:safari": "npm run build:safari -- --mode development && xcodebuild -configuration Debug -scheme Lexical\\ Developer\\ Tools -project ./safari-xcode//Lexical\\ Developer\\ Tools/Lexical\\ Developer\\ Tools.xcodeproj && echo \"Open Safari, allow unsigned extensions in developer settings, enable extension in extensions manager (if needed)\"",
+    "safari:convert": "xcrun safari-web-extension-converter --app-name 'Lexical Developer Tools' --project-location ./safari-xcode --macos-only --no-prompt --force --no-open .output/safari-mv2",
     "build": "npm-run-all build:chrome build:firefox build:edge build:safari",
     "build:chrome": "wxt build -b chrome",
     "build:firefox": "wxt build -b firefox",
@@ -27,9 +28,9 @@
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@webext-pegasus/rpc": "^0.0.4",
-    "@webext-pegasus/store-zustand": "^0.0.4",
-    "@webext-pegasus/transport": "^0.0.4",
+    "@webext-pegasus/rpc": "^0.2.0",
+    "@webext-pegasus/store-zustand": "^0.2.0",
+    "@webext-pegasus/transport": "^0.2.0",
     "framer-motion": "^11.1.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

packages/lexical-devtools/safari-xcode/.gitignore

@@ -0,0 +1,7 @@
+xcuserdata/
+*.xcworkspace
+build/
+fastlane/report.xml
+fastlane/Preview.html
+fastlane/screenshots/**/*.png
+fastlane/test_output

packages/lexical-devtools/safari-xcode/Lexical Developer Tools/Lexical Developer Tools Extension/Info.plist

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>NSExtension</key>
+	<dict>
+		<key>NSExtensionPointIdentifier</key>
+		<string>com.apple.Safari.web-extension</string>
+		<key>NSExtensionPrincipalClass</key>
+		<string>$(PRODUCT_MODULE_NAME).SafariWebExtensionHandler</string>
+	</dict>
+</dict>
+</plist>

packages/lexical-devtools/safari-xcode/Lexical Developer Tools/Lexical Developer Tools Extension/Lexical_Developer_Tools_Extension.entitlements

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+    <key>com.apple.security.app-sandbox</key>
+    <true/>
+    <key>com.apple.security.files.user-selected.read-only</key>
+    <true/>
+</dict>
+</plist>

packages/lexical-devtools/safari-xcode/Lexical Developer Tools/Lexical Developer Tools Extension/SafariWebExtensionHandler.swift

@@ -0,0 +1,38 @@
+//
+//  SafariWebExtensionHandler.swift
+//  Lexical Developer Tools Extension
+//
+//  Created by Vladlen Fedosov on 5/14/24.
+//
+
+import SafariServices
+import os.log
+
+class SafariWebExtensionHandler: NSObject, NSExtensionRequestHandling {
+
+    func beginRequest(with context: NSExtensionContext) {
+        let request = context.inputItems.first as? NSExtensionItem
+
+        let profile: UUID?
+        if #available(iOS 17.0, macOS 14.0, *) {
+            profile = request?.userInfo?[SFExtensionProfileKey] as? UUID
+        } else {
+            profile = request?.userInfo?["profile"] as? UUID
+        }
+
+        let message: Any?
+        if #available(iOS 17.0, macOS 14.0, *) {
+            message = request?.userInfo?[SFExtensionMessageKey]
+        } else {
+            message = request?.userInfo?["message"]
+        }
+
+        os_log(.default, "Received message from browser.runtime.sendNativeMessage: %@ (profile: %@)", String(describing: message), profile?.uuidString ?? "none")
+
+        let response = NSExtensionItem()
+        response.userInfo = [ SFExtensionMessageKey: [ "echo": message ] ]
+
+        context.completeRequest(returningItems: [ response ], completionHandler: nil)
+    }
+
+}