add web demo
This commit is contained in:
28
apps/web/ui/editor.tsx
Normal file
28
apps/web/ui/editor.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Editor as InkeEditor } from "inke";
|
||||
|
||||
export default function Editor() {
|
||||
const [saveStatus, setSaveStatus] = useState("Saved");
|
||||
|
||||
return (
|
||||
<div className="relative w-full max-w-screen-lg">
|
||||
<div className="absolute right-5 top-5 z-10 mb-5 rounded-lg bg-stone-100 px-2 py-1 text-sm text-stone-400">
|
||||
{saveStatus}
|
||||
</div>
|
||||
<InkeEditor
|
||||
onUpdate={() => {
|
||||
setSaveStatus("Unsaved");
|
||||
}}
|
||||
onDebouncedUpdate={() => {
|
||||
setSaveStatus("Saving...");
|
||||
// Simulate a delay in saving.
|
||||
setTimeout(() => {
|
||||
setSaveStatus("Saved");
|
||||
}, 500);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
Reference in New Issue
Block a user