feat: change input to textarea

oeyoews · Oct 24, 2024 · 6a0d1c4 · 6a0d1c4
1 parent 76e8106
commit 6a0d1c4
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 15 deletions.
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "publisher": "oeyoews",
   "name": "usewiki2",
   "displayName": "usewiki2",
-  "version": "0.8.5",
+  "version": "0.9.0",
   "private": true,
   "packageManager": "[email protected]",
   "description": "",

diff --git a/packages/react/src/App.tsx b/packages/react/src/App.tsx
@@ -6,12 +6,12 @@ import {
   ContextMenuItem,
   ContextMenuTrigger,
 } from '@/components/ui/context-menu';
-import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
+import { Textarea } from './components/ui/textarea';
 
 function App() {
   const [inputValue, setInputValue] = useState('');
-  const inputRef = useRef<HTMLInputElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
   const [vscode, setVscode] = useState(null);
 
   useEffect(() => {
@@ -25,7 +25,7 @@ function App() {
   }, []);
 
   // support ctrl enter to save
-  function handleInputBoxSave(e: KeyboardEvent<HTMLInputElement>) {
+  function handleInputBoxSave(e: KeyboardEvent<HTMLTextAreaElement>) {
     if (e.ctrlKey && e.key === 'Enter') {
       submitInput();
     }
@@ -41,29 +41,30 @@ function App() {
 
   return (
     // vscode-dark
-    <div className="relative h-screen">
+    <div className="relative h-screen p-3">
       <h1 className="text-3xl font-bold">TiddlyWiki5</h1>
       <ContextMenu>
-        <ContextMenuTrigger className="i-lucide-more-horizontal hidden">
+        <ContextMenuTrigger className="i-lucide-more-horizontal">
           More
         </ContextMenuTrigger>
         <ContextMenuContent>
           <ContextMenuItem>Coming</ContextMenuItem>
         </ContextMenuContent>
       </ContextMenu>
-      <div className="absolute inset-x-0 bottom-2 flex flex-col gap-2 p-0">
-        <Input
+      <div className="absolute inset-x-3 bottom-3 flex flex-col gap-2 p-0">
+        <Textarea
           ref={inputRef}
-          type="text"
-          placeholder="Write something... Ctrl+Enter to save"
-          className="focus-visible:ring-0 border-none input-bg"
           onKeyDown={handleInputBoxSave}
+          rows={5}
+          placeholder="Write something... Ctrl+Enter to save"
+          className="focus-visible:ring-0 border-none input-bg resize-none"
           onChange={(e) => setInputValue(e.target.value)}
           value={inputValue}
         />
         <Button
           onClick={submitInput}
-          className="bg-green-500 inset-x-0 hover:bg-green-600">
+          className="bg-green-500 hover:bg-green-600">
+          <span className="i-lucide-more-horizontal"></span>
           Save To TiddlyWiki
         </Button>
       </div>

diff --git a/packages/react/src/components/ui/textarea.tsx b/packages/react/src/components/ui/textarea.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }
diff --git a/packages/react/tailwind.config.cjs b/packages/react/tailwind.config.cjs
@@ -7,9 +7,9 @@ const {
 export default {
   darkMode: ['class'],
   content: ['./src/**/*.{js,jsx,ts,tsx}'],
-  corePlugins: {
-    preflight: true,
-  },
+  // corePlugins: {
+  //   preflight: true,
+  // },
   theme: {
     extend: {
       borderRadius: {

diff --git a/res/reset.css b/res/reset.css
@@ -0,0 +1,14 @@
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ol,
+ul {
+  margin: 0;
+  padding: 0;
+  font-weight: normal;
+}
diff --git a/src/webviews/index.ts b/src/webviews/index.ts
@@ -61,6 +61,9 @@ export class usewikiViewProvider implements vscode.WebviewViewProvider {
     const scriptUri = webview.asWebviewUri(
       vscode.Uri.joinPath(this._extensionUri, 'react-dist', 'main.js')
     );
+    const styleResetUri = webview.asWebviewUri(
+      vscode.Uri.joinPath(this._extensionUri, 'res', 'reset.css')
+    );
     const styleAppUri = webview.asWebviewUri(
       vscode.Uri.joinPath(this._extensionUri, 'react-dist', 'main.css')
     );
@@ -74,6 +77,7 @@ export class usewikiViewProvider implements vscode.WebviewViewProvider {
 	      <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource}; script-src 'nonce-${nonce}';">
 				<meta name="viewport" content="width=device-width, initial-scale=1.0">
                 <title>Custom Sidebar</title>
+	              <link href="${styleResetUri}" rel="stylesheet">
 	              <link href="${styleAppUri}" rel="stylesheet">
             </head>
             <body>