VSCode embed page for vscode extension - viewonly (1/2)

editor-packages/editor-preview-pip/index.ts

@@ -0,0 +1,3 @@
+// This shall not be included on npm.
+// Re-exporter for use-as-submodule
+export * from "./lib";

editor-packages/editor-preview-pip/lib/context-menu.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from "react";
+import * as ContextMenu from "@radix-ui/react-context-menu";
+import {
+  ContextMenuContent,
+  ContextMenuCheckboxItem,
+  ContextMenuTrigger,
+  ContextMenuItem,
+} from "@modulz/design-system";
+import { BlockFrameInteraction } from "./preferences";
+
+export default function VanillaFrameContextManuProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <ContextMenu.Root>
+      <ContextMenuTrigger>{children}</ContextMenuTrigger>
+
+      <ContextMenuContent>
+        <AllowInteractionPreferenceMenu />
+      </ContextMenuContent>
+    </ContextMenu.Root>
+  );
+}
+
+function AllowInteractionPreferenceMenu() {
+  const [allowInteraction, setAllowInteraction] = useState(
+    BlockFrameInteraction.get()
+  );
+
+  return (
+    <ContextMenuCheckboxItem
+      checked={allowInteraction}
+      onSelect={() => {
+        const inverted = !allowInteraction;
+        BlockFrameInteraction.set(inverted);
+        setAllowInteraction(inverted);
+      }}
+    >
+      <ContextMenu.Label>Allow interaction</ContextMenu.Label>
+    </ContextMenuCheckboxItem>
+  );
+}

editor-packages/editor-preview-pip/lib/index.ts

@@ -2,3 +2,9 @@ import PIP from "./pip";
 import ResizablePIP from "./resizable-pip";
 
 export { PIP, ResizablePIP };
+
+import VanillaFrameContextManuProvider from "./context-menu";
+
+export { VanillaFrameContextManuProvider };
+
+export * as preference from "./preferences";

editor-packages/editor-preview-pip/lib/pip.tsx

@@ -61,8 +61,10 @@ function PIP({
   backgroundColor?: string;
 }) {
   return (
-    <Draggable>
+    <Draggable handle=".handle" bounds="parent">
       <PipWindow
+        className="handle"
+        id="handle"
         borderRadius={borderRadius}
         boxShadow={boxShadow}
         zIndex={zIndex}

editor-packages/editor-preview-pip/lib/preferences.ts

@@ -0,0 +1,18 @@
+export const BlockFrameInteraction = {
+  get: () => {
+    if (typeof window !== "undefined") {
+      return (
+        window.localStorage.getItem("vanilla-interaction-block-preference") ===
+        "true"
+      );
+    }
+  },
+  set: (interaction: boolean) => {
+    if (typeof window !== "undefined") {
+      window.localStorage.setItem(
+        "vanilla-interaction-block-preference",
+        String(interaction)
+      );
+    }
+  },
+};

editor-packages/editor-preview-pip/lib/resizable-pip.tsx

@@ -1,6 +1,7 @@
 import React from "react";
-import PIP from "./PIP";
+import PIP from "./pip";
 import { ResizableBox } from "react-resizable";
+import "react-resizable/css/styles.css";
 import type { ResizableBoxProps as RawResizableBoxProps } from "react-resizable";
 import styled from "@emotion/styled";
 
@@ -52,6 +53,11 @@ function ResizablePIP({
   return (
     <PIP>
       <StyledResizableBox
+        draggableOpts={{
+          onMouseDown: (e) => {
+            e.stopPropagation();
+          },
+        }}
         {...otherResizableProps}
         axis={axis}
         handle={resizeHandle}
@@ -68,10 +74,6 @@ function ResizablePIP({
 
 const StyledResizableBox = styled(ResizableBox)`
   overflow: auto;
-
-  :hover {
-    cursor: default;
-  }
 `;
 
 export default ResizablePIP;

editor-packages/editor-preview-pip/package.json

@@ -33,6 +33,7 @@
   ],
   "repository": "https://github.com/gridaco/designto-code",
   "dependencies": {
+    "@radix-ui/react-context-menu": "^0.1.1",
     "react-draggable": "^4.4.4",
     "react-resizable": "^3.0.4"
   },

editor-packages/editor-preview-pip/tsconfig.json

@@ -11,5 +11,10 @@
     "noUnusedLocals": false,
     "sourceMap": false
   },
-  "exclude": ["node_modules", "**/*.spec.ts", "dist"]
+  "exclude": [
+    "node_modules",
+    "**/*.spec.ts",
+    "dist",
+    "index.ts" // index.ts is for monorepo use
+  ]
 }

editor-packages/editor-preview-vanilla/README.md

@@ -1,6 +1,34 @@
 # Vanilla preview
 
+![](./docs/assets/example-of-vanilla-preview-on-grida-assistant.png)
+
+## Installation
+
+```sh
+yarn add @code-editor/vanilla-preview
+```
+
+## Usage
+
+```tsx
+import { VanillaPreview } from "@code-editor/vanilla-preview";
+
+export default function () {
+  return <VanillaPreview />;
+}
+```
+
+## Disable overflow
+
+## Scaling
+
+## Autoscale with margin value (horizontal margin)
+
+## Todo: Cached preview for optimization
+
+while repositioning, rescaling the html iframe with large content, it may be more performant to cache the preview and use them while transition is happening.
+
 ## Used by
 
-- code.grida.co
-- assistant/@ui/previewer
+- [code.grida.co](https://github.com/gridaco/designto-code)
+- [assistant/@ui/previewer](https://github.com/gridaco/assistant)

editor-packages/editor-preview-vanilla/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@code-editor/vanilla-preview",
+  "version": "0.0.0",
+  "private": "false"
+}

editor/next.config.js

@@ -1,6 +1,7 @@
 const withTM = require("next-transpile-modules")([
   // region @editor-app
   "@editor-app/live-session",
+  "@code-editor/preview-pip", // TODO: remove me. this is for development. for production, use npm ver instead.
 
   // region editor-submodule deps
   "@base-sdk-fp/auth",

editor/package.json

@@ -19,6 +19,7 @@
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.60",
+    "@modulz/design-system": "^0.6.1",
     "@monaco-editor/react": "^4.1.3",
     "@reflect-blocks/figma-embed": "^0.0.5",
     "@reflect-ui/editor-ui": "0.0.1",
@@ -55,4 +56,4 @@
     "raw-loader": "^4.0.2",
     "typescript": "^4.2.3"
   }
-}
+}