Allow opening app in canvas from side menu panel

Author: Shellishack

.changeset/cold-shrimps-give.md

@@ -0,0 +1,6 @@
+---
+"@pulse-editor/shared-utils": patch
+"@pulse-editor/react-api": patch
+---
+
+Revert mfversion in extension config

.changeset/pre.json

@@ -18,6 +18,7 @@
     "calm-rivers-march",
     "chatty-trains-beam",
     "clean-mangos-swim",
+    "cold-shrimps-give",
     "cruel-waves-double",
     "cruel-zoos-play",
     "curvy-places-wash",

npm-packages/react-api/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @pulse-editor/react-api
 
+## 0.1.1-alpha.34
+
+### Patch Changes
+
+- Revert mfversion in extension config
+- Updated dependencies
+  - @pulse-editor/shared-utils@0.1.1-alpha.34
+
 ## 0.1.1-alpha.33
 
 ### Patch Changes

npm-packages/react-api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pulse-editor/react-api",
-  "version": "0.1.1-alpha.33",
+  "version": "0.1.1-alpha.34",
   "main": "dist/main.js",
   "files": [
     "dist"
@@ -38,7 +38,7 @@
     "typescript-eslint": "^8.30.1"
   },
   "peerDependencies": {
-    "@pulse-editor/shared-utils": "0.1.1-alpha.33",
+    "@pulse-editor/shared-utils": "0.1.1-alpha.34",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   }

npm-packages/shared-utils/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @pulse-editor/shared-utils
 
+## 0.1.1-alpha.34
+
+### Patch Changes
+
+- Revert mfversion in extension config
+
 ## 0.1.1-alpha.33
 
 ### Patch Changes

npm-packages/shared-utils/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pulse-editor/shared-utils",
-    "version": "0.1.1-alpha.33",
+    "version": "0.1.1-alpha.34",
     "main": "dist/main.js",
     "files": [
         "dist"

npm-packages/shared-utils/src/types/types.ts

@@ -116,7 +116,6 @@ export enum ExtensionTypeEnum {
 export type ExtensionConfig = {
   id: string;
   version: string;
-  mfVersion: string;
   author?: string;
   displayName?: string;
   description?: string;

package-lock.json

@@ -1,5 +1,6 @@
 {
     "plugins": [
-        "prettier-plugin-tailwindcss"
+        "prettier-plugin-tailwindcss",
+        "prettier-plugin-organize-imports"
     ]
 }

web/.prettierrc

@@ -0,0 +1,45 @@
+import ExtensionPreview from "@/components/extension/extension-preview";
+import { EditorContext } from "@/components/providers/editor-context-provider";
+import { useTabViewManager } from "@/lib/hooks/use-tab-view-manager";
+import { AppViewConfig } from "@/lib/types";
+import { useContext } from "react";
+import { v4 } from "uuid";
+
+export default function AppExplorer() {
+  const editorContext = useContext(EditorContext);
+
+  const { createAppViewInCanvasView } = useTabViewManager();
+
+  const extensions = editorContext?.persistSettings?.extensions ?? [];
+
+  const previews = extensions.map((ext, index) => (
+    <div key={index} className="w-full h-fit">
+      <ExtensionPreview
+        extension={ext}
+        isShowInstalledChip={false}
+        isShowUninstallButton={false}
+        isShowUseButton
+        isShowCompatibleChip={false}
+        onPress={(ext) => {
+          const config: AppViewConfig = {
+            app: ext.config.id,
+            viewId: v4(),
+            recommendedHeight: ext.config.recommendedHeight,
+            recommendedWidth: ext.config.recommendedWidth,
+          };
+          createAppViewInCanvasView(config);
+        }}
+      />
+    </div>
+  ));
+
+  return (
+    <div className="p-4 h-full">
+      <p className="text-center">Tap or drag an extension to open it.</p>
+
+      <div className="mt-4 grid grid-cols-2 gap-2 h-full w-full overflow-y-auto">
+        {previews}
+      </div>
+    </div>
+  );
+}