update ci

.github/workflows/ci.yml

@@ -14,18 +14,16 @@ jobs:
     timeout-minutes: 5
     strategy:
       matrix:
-        node-version: [16]
+        node-version: [22]
 
     name: Node ${{ matrix.node-version }}
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4.2.2
 
-      - uses: pnpm/action-setup@v2
-        with:
-          version: 7.24.3
+      - uses: pnpm/action-setup@v4
 
       - name: Use Node ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4.1.0
         with:
           node-version: ${{ matrix.node-version }}
           cache: 'pnpm'
@@ -48,14 +46,12 @@ jobs:
       NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4.2.2
 
-      - uses: pnpm/action-setup@v2
-        with:
-          version: 7.24.3
+      - uses: pnpm/action-setup@v4
 
       - name: Use Node ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4.1.0
         with:
           node-version: ${{ matrix.node-version }}
           cache: 'pnpm'

site/app/page.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import { Editor } from 'codice'
+import { useState } from 'react'
+import { highlight } from 'sugar-high'
+import { useSearchParams } from 'next/navigation'
+
+const CODE_QUERY_KEY = 'c'
+
+const defaultCode = `\
+import { useState } from 'react'
+import { highlight } from 'sugar-high'
+import { Editor } from 'codice'
+
+const defaultText = 'console.log("hello world")'
+
+export default function Page() {
+  const [code, setCode] = useState(defaultText)
+
+  return (
+    <div>
+      <Editor
+        value={code}
+        className='editor'
+        title='index.js'
+        highlight={text => highlight(text)}
+        onChange={(text) => setCode(text)}
+      />
+    </div>
+  )
+}
+`
+
+export default function Page() {
+  const searchParams = useSearchParams()
+  const codeQuery = searchParams.get(CODE_QUERY_KEY)
+  const initialCode = codeQuery ? atob(codeQuery) : defaultCode
+  const [code, setCode] = useState(initialCode)
+
+  return (
+    <div>
+      <Editor
+        value={code}
+        className='editor'
+        title='index.js'
+        highlight={text => highlight(text)}
+        onChange={(text) => setCode(text)}
+      />
+    </div>
+  )
+}