various fixes

Author: schickling

.vscode/tasks.json

@@ -8,6 +8,7 @@
       "type": "shell",
       "command": "yarn dev",
       "options": { "cwd": "${workspaceFolder}/packages/plugin-app" },
+      "problemMatcher": [],
       "presentation": {
         "focus": false,
         "panel": "shared",

package.json

@@ -18,8 +18,6 @@
     "typescript": "^5.2.2"
   },
   "resolutions": {
-    "has-symbols": "patch:[email protected]#./.patches/has-symbols.patch",
-    "@types/react": "^17.0.1",
-    "@types/react-dom": "^17.0.0"
+    "has-symbols": "patch:[email protected]#./.patches/has-symbols.patch"
   }
 }

packages/plugin-app/src/components/Editor.tsx

@@ -4,6 +4,8 @@ import React, { useMemo } from 'react'
 import * as shiki from 'shiki'
 import wasm from 'shiki/dist/onigasm.wasm?url'
 
+import { readTextFromClipboard, writeTextToClipboard } from '../utils/clipboard'
+
 shiki.setOnigasmWASM(wasm)
 shiki.setCDN('./assets/shiki/')
 
@@ -16,7 +18,8 @@ export const Editor: FC<{
   fontSize: number
   lineHeight: number
   fontFamily: string
-}> = ({ code, setCode, shikiTokens, themeData, includeLineNumbers, fontSize, lineHeight, fontFamily }) => {
+  env: 'Figma' | 'Browser'
+}> = ({ code, setCode, shikiTokens, themeData, includeLineNumbers, fontSize, lineHeight, fontFamily, env }) => {
   const highlightedText = useMemo(() => shiki.renderToHtml(shikiTokens, { ...themeData }), [shikiTokens, themeData])
   const lineCount = useMemo(() => code.split('\n').length, [code])
   // 20 for bottom padding
@@ -38,10 +41,32 @@ export const Editor: FC<{
       )}
       <div className="relative w-max">
         <textarea
-        ref={textareaRef}
+          ref={textareaRef}
           style={{ caretColor: themeData.fg, height }}
           value={code}
           className="absolute w-full h-full text-transparent bg-transparent outline-none resize-none"
+          onKeyDown={(e) => {
+            if (env === 'Browser') return
+
+            // NOTE it seems common keyboard shortcuts are not working in Figma, so we have to implement them ourselves
+            if (e.metaKey && e.code === 'KeyA') {
+              e.preventDefault()
+              e.stopPropagation()
+              textareaRef.current?.select()
+            } else if (e.metaKey && e.code === 'KeyV') {
+              e.preventDefault()
+              e.stopPropagation()
+              readTextFromClipboard().then((text) => setCode(text))
+            } else if (e.metaKey && e.code === 'KeyC') {
+              e.preventDefault()
+              e.stopPropagation()
+              const selectedText = e.currentTarget.value.substring(
+                e.currentTarget.selectionStart,
+                e.currentTarget.selectionEnd,
+              )
+              writeTextToClipboard(selectedText)
+            }
+          }}
           onChange={(e) => setCode(e.target.value)}
           autoCorrect="off"
           spellCheck="false"

packages/plugin-app/src/components/Main.tsx

@@ -76,6 +76,8 @@ const Main: React.FC = () => {
         availableFigmaFonts.resolve(event.data.pluginMessage.monoFontFamilies)
       }
     }
+
+    parent.postMessage({ pluginMessage: { type: 'INIT' } }, '*')
   }, [setCode, setFontSize, availableFigmaFonts])
 
   const execRun = async () => {
@@ -96,7 +98,8 @@ const Main: React.FC = () => {
 
   const runPrettier = async () => {
     const { formatText } = await import('../utils/prettier')
-    setCode(formatText(code, language))
+    const formattedCode = await formatText(code, language)
+    setCode(formattedCode)
   }
 
   if (fontRes.isLoading || isHighlighterLoading) {
@@ -126,6 +129,7 @@ const Main: React.FC = () => {
           code: code,
           setCode: setCode,
           lineHeight: fontSize * 1.5,
+          env,
         }}
       />
       <Sidebar

packages/plugin-app/src/index.tsx

@@ -2,8 +2,8 @@ import './index.css'
 import 'react-figma-plugin-ds/figma-plugin-ds.css'
 
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 
 import Main from './components/Main'
 
-ReactDOM.render(<Main />, document.getElementById('root'))
+createRoot(document.getElementById('root')!).render(<Main />)

packages/plugin-app/src/utils/clipboard.ts

@@ -0,0 +1,42 @@
+// Based on https://forum.figma.com/t/write-to-clipboard-from-custom-plugin/11860/15
+
+export const writeTextToClipboard = (str: string) => {
+  const prevActive = document.activeElement as HTMLElement
+  const textArea = document.createElement('textarea')
+
+  textArea.value = str
+
+  textArea.style.position = 'fixed'
+  textArea.style.left = '-999999px'
+  textArea.style.top = '-999999px'
+
+  document.body.appendChild(textArea)
+
+  textArea.focus()
+  textArea.select()
+
+  return new Promise((res, rej) => {
+    document.execCommand('copy') ? res(void 0) : rej()
+    textArea.remove()
+
+    prevActive?.focus()
+  })
+}
+
+export const readTextFromClipboard = () => {
+  const textArea = document.createElement('textarea')
+
+  textArea.style.position = 'fixed'
+  textArea.style.left = '-999999px'
+  textArea.style.top = '-999999px'
+
+  document.body.appendChild(textArea)
+
+  textArea.focus()
+  textArea.select()
+
+  return new Promise<string>((res, rej) => {
+    document.execCommand('paste') ? res(textArea.value) : rej()
+    textArea.remove()
+  })
+}

packages/plugin-app/src/utils/hooks.ts

@@ -1,12 +1,13 @@
 import type { DependencyList } from 'react'
+import React from 'react'
 import { useEffect, useMemo, useState } from 'react'
 
 export const useAsyncMemo = <T>(fn: () => Promise<T>, deps: DependencyList): T | undefined => {
   const [val, setVal] = useState<T | undefined>(undefined)
 
   useEffect(() => {
     fn().then((_) => setVal(_))
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, deps)
 
   return val
@@ -27,24 +28,27 @@ export const usePersistedState = <T>({
   }, [storageKey])
   const [val, setVal] = useState<T>(persistedVal ?? initialValue)
 
-  let timeout: number | undefined = undefined
-  const updateValue = (_: T) => {
-    setVal(_)
-    clearTimeout(timeout)
-    timeout = setTimeout(() => {
-      const jsonVal = JSON.stringify(_)
-      localStorage.setItem(storageKey, jsonVal)
-    }, storageDebounceMs)
-  }
+  const timeoutRef = React.useRef<number | undefined>(undefined)
+  const updateValue = React.useCallback(
+    (_: T) => {
+      setVal(_)
+      clearTimeout(timeoutRef.current)
+      timeoutRef.current = setTimeout(() => {
+        const jsonVal = JSON.stringify(_)
+        localStorage.setItem(storageKey, jsonVal)
+      }, storageDebounceMs)
+    },
+    [storageDebounceMs, storageKey],
+  )
 
   useEffect(() => {
     const jsonVal = localStorage.getItem(storageKey)
     if (jsonVal) {
       setVal(JSON.parse(jsonVal))
     }
 
-    return () => clearTimeout(timeout)
-  }, [initialValue, storageKey, storageDebounceMs, timeout])
+    return () => clearTimeout(timeoutRef.current)
+  }, [initialValue, storageKey, storageDebounceMs])
 
   return [val, updateValue]
 }

packages/plugin-app/src/utils/prettier.ts

@@ -1,13 +1,14 @@
 import type { BuiltInParserName } from 'prettier'
-import babel from 'prettier/parser-babel'
+import babel from 'prettier/plugins/babel'
+import estree from 'prettier/plugins/estree'
 import prettier from 'prettier/standalone'
 import type { Lang } from 'shiki'
 
-export const formatText = (text: string, language: Lang): string => {
+export const formatText = (text: string, language: Lang): Promise<string> => {
   return prettier.format(text, {
     // TODO needs to be more selective whether prettier supports a given language
     parser: getParser(language),
-    plugins: [babel],
+    plugins: [estree, babel],
     singleQuote: true,
   })
 }

packages/plugin-shared/package.json

@@ -8,7 +8,6 @@
     "shiki": "^0.9.3"
   },
   "devDependencies": {
-    "@figma/plugin-typings": "^1.76.0",
-    "@types/color": "^3.0.4"
+    "@figma/plugin-typings": "^1.76.0"
   }
 }

packages/plugin-shared/src/event-messages.ts

@@ -6,6 +6,10 @@ export function isRunMessage(message: any): message is RunMessage {
   return message?.type === 'RUN'
 }
 
+export function isInitMessage(message: any): message is RunMessage {
+  return message?.type === 'INIT'
+}
+
 export type SelectionChangeMessage = {
   type: 'SELECTION_CHANGE'
   selection?: {

packages/plugin/build.js

@@ -4,13 +4,12 @@
 const { build, cliopts } = require('estrella')
 const path = require('path')
 const fs = require('fs')
-const fetch = require('node-fetch').default
 
 const isDev = cliopts.watch
 const buildDirSuffix = isDev ? 'dev' : 'prod'
 const buildDir = `build-${buildDirSuffix}`
 
-const appUrl = isDev ? '"http://localhost:3000"' : '"https://figma-code.vercel.app"'
+const appUrl = isDev ? '"http://localhost:5173"' : '"https://figma-code.vercel.app"'
 
 build({
   entry: 'src/ui/index.tsx',
@@ -46,6 +45,7 @@ const htmlTemplate = (js, css) => `\
     <style>
     ${css}
     </style>
+    <script src="https://cdn.tailwindcss.com"></script>
   </head>
   <body>
     <div id="iframe"></div>
@@ -77,7 +77,8 @@ async function makeHTML() {
     return
   }
 
-  const css = await fetch('https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css').then((_) => _.text())
+  // const css = await fetch('https://cdn.tailwindcss.com').then((_) => _.text())
+  const css = ''
 
   const content = htmlTemplate(cache['main'], css)
   const filePath = path.join(__dirname, buildDir, 'ui.html')
@@ -94,6 +95,7 @@ async function makeManifest() {
     name,
     main: 'plugin.js',
     ui: 'ui.html',
+    editorType: ["figma", ...(isDev ? ["dev"] : [])]
   }
   await fs.promises.mkdir(path.join(__dirname, buildDir), { recursive: true })
   await fs.promises.writeFile(path.join(__dirname, buildDir, 'manifest.json'), JSON.stringify(data, null, 2))

packages/plugin/package.json

@@ -6,7 +6,6 @@
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "monaco-editor": "0.25.0",
-    "node-fetch": "^3.3.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

packages/plugin/src/plugin/index.ts

@@ -1,7 +1,7 @@
 // NOTE import directly from source to avoid bundling of monaco-editor
 // TOOD clean this up
 import type { RunDoneMessage, SelectionChangeMessage } from '@internal/plugin-shared/src/event-messages'
-import { isRunMessage } from '@internal/plugin-shared/src/event-messages'
+import { isInitMessage, isRunMessage } from '@internal/plugin-shared/src/event-messages'
 import type { FontStyles } from '@internal/plugin-shared/src/run'
 import { pick } from '@internal/plugin-shared/src/utils'
 
@@ -45,14 +45,15 @@ async function main() {
       .map((_) => _.fontName.family)
       .filter((_) => ['mono', 'code'].some((monoish) => _.toLowerCase().includes(monoish))),
   )
-  figma.ui.postMessage({ type: 'AVAILABLE_FONTS', monoFontFamilies })
 
   figma.on('selectionchange', updateSelection)
 
   figma.ui.onmessage = async (msg) => {
     console.log({ msg })
 
-    if (isRunMessage(msg)) {
+    if (isInitMessage(msg)) {
+      figma.ui.postMessage({ type: 'AVAILABLE_FONTS', monoFontFamilies })
+    } else if (isRunMessage(msg)) {
       try {
         await run({
           ...pick(msg, [

packages/plugin/src/ui/index.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react'
 import React, { useEffect, useRef } from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 
 const Iframe: FC = () => {
   const iframe = useRef<HTMLIFrameElement>(null)
@@ -17,4 +17,4 @@ const Iframe: FC = () => {
   return <iframe src={`${process.env.APP_URL}?env=figma`} className="w-full h-full" ref={iframe} />
 }
 
-ReactDOM.render(<Iframe />, document.getElementById('iframe'))
+createRoot(document.getElementById('iframe')!).render(<Iframe />)