feat: new api functionality

apps/poc-state-plugin/src/plugin.ts

@@ -69,11 +69,23 @@ penpot.ui.onMessage<{ content: string; data: unknown }>((message) => {
     const selection = penpot.selection;
 
     for (const shape of selection) {
-      (
-        shape as PenpotText
-      ).characters = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id mauris ut felis finibus congue. Ut odio ipsum, condimentum id tellus sit amet, dapibus sagittis ligula. Pellentesque hendrerit, nulla sit amet aliquet scelerisque, orci nunc commodo tellus, quis hendrerit nisl massa non tellus.
+      if (penpot.utils.types.isText(shape)) {
+        shape.characters = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id mauris ut felis finibus congue. Ut odio ipsum, condimentum id tellus sit amet, dapibus sagittis ligula. Pellentesque hendrerit, nulla sit amet aliquet scelerisque, orci nunc commodo tellus, quis hendrerit nisl massa non tellus.
 
 Phasellus fringilla tortor elit, ac dictum tellus posuere sodales. Ut eget imperdiet ante. Nunc eros magna, tincidunt non finibus in, tempor elementum nunc. Sed commodo magna in arcu aliquam efficitur.`;
+      } else if (penpot.utils.types.isRectangle(shape)) {
+        const width = Math.ceil(shape.width);
+        const height = Math.ceil(shape.height);
+        penpot
+          .uploadMediaUrl(
+            'placeholder',
+            `https://picsum.photos/${width}/${height}`
+          )
+          .then((data) => {
+            shape.fills = [{ fillOpacity: 1, fillImage: data }];
+          })
+          .catch((err) => console.error(err));
+      }
     }
   }
 });

libs/plugin-types/index.d.ts

@@ -166,6 +166,11 @@ export interface PenpotContext {
   getSelectedShapes(): PenpotShape[];
   getTheme(): PenpotTheme;
 
+  uploadMediaUrl(name: string, url: string): Promise<PenpotImageData>;
+
+  group(first: PenpotShape, ...rest: PenpotShape): PenpotGroup;
+  ungroup(first: PenpotShape, ...rest: PenpotShape);
+
   createRectangle(): PenpotRectangle;
   createFrame(): PepotFrame;
 }
@@ -183,6 +188,8 @@ export interface Penpot extends PenpotContext {
   utils: {
     types: {
       isText(shape: PenpotShape): shape is PenpotText;
+      isRectangle(shape: PenpotShape): shape is PenpotRectangle;
+      isFrame(shape: PenpotShape): shape is PenpotFrame;
     };
   };
   log: (...data: unknown[]) => void;
@@ -198,19 +205,6 @@ export interface Penpot extends PenpotContext {
   ) => void;
 
   fetch: typeof fetch;
-
-  // Exposes Penpot Context
-  root: PenpotShape;
-  currentPage: PenpotPage;
-  selection: PenpotShape[];
-
-  getFile(): PenpotFile | null;
-  getPage(): PenpotPage | null;
-  getSelected(): string[];
-  getSelectedShapes(): PenpotShape[];
-  getTheme(): PenpotTheme;
-
-  createRectangle(): PenpotShape;
 }
 
 declare global {

libs/plugins-runtime/src/lib/api/index.ts

@@ -4,6 +4,8 @@ import type {
   EventsMap,
   PenpotPage,
   PenpotShape,
+  PenpotRectangle,
+  PenpotFrame,
 } from '@penpot/plugin-types';
 
 import { Manifest, Permissions } from '../models/manifest.model';
@@ -44,7 +46,7 @@ export function triggerEvent(
   listeners.forEach((listener) => listener(message));
 }
 
-export function createApi(context: PenpotContext, manifest: Manifest) {
+export function createApi(context: PenpotContext, manifest: Manifest): Penpot {
   const closePlugin = () => {
     modal?.removeEventListener('close', closePlugin);
     if (modal) {
@@ -91,6 +93,12 @@ export function createApi(context: PenpotContext, manifest: Manifest) {
         isText(shape: PenpotShape): shape is PenpotText {
           return shape.type === 'text';
         },
+        isRectangle(shape: PenpotShape): shape is PenpotRectangle {
+          return shape.type === 'rect';
+        },
+        isFrame(shape: PenpotShape): shape is PenpotFrame {
+          return shape.type === 'frame';
+        },
       },
     },
 
@@ -187,6 +195,10 @@ export function createApi(context: PenpotContext, manifest: Manifest) {
       return context.createRectangle();
     },
 
+    uploadMediaUrl(name: string, url: string) {
+      return context.uploadMediaUrl(name, url);
+    },
+
     fetch,
   };
 

libs/plugins-styles/src/lib/core/generic.css

@@ -1,9 +1,10 @@
-html, body {
-    font-family: 'Work Sans', sans-serif;
-    font-optical-sizing: auto;
-    font-style: normal;
-    margin: 0;
-    padding: 0;
+html,
+body {
+  font-family: 'Work Sans', sans-serif;
+  font-optical-sizing: auto;
+  font-style: normal;
+  margin: 0;
+  padding: 0;
 }
 
 body,
@@ -26,17 +27,17 @@ pre {
 }
 
 ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
 
-[data-theme="dark"] {
-    background-color: var(--db-primary);
-    color: var(--lb-primary);
+[data-theme='dark'] {
+  background-color: var(--db-quaternary);
+  color: var(--lb-primary);
 }
 
-[data-theme="light"] {
-    background-color: var(--lb-primary);
-    color: var(--db-primary);
-}
+[data-theme='light'] {
+  background-color: var(--lb-primary);
+  color: var(--db-primary);
+}