Update editor example to use Shadcn UI Button component and improve README documentation

Co-authored-by: TechQuery <[email protected]>

Author: Copilot

README.md

@@ -24,6 +24,7 @@ A **Pagination Table** & **Scroll List** component suite for [CRUD operation][1]
 14. [Scroll Boundary](https://mobx-restful-shadcn.idea2.app/)
 15. [Scroll List](https://mobx-restful-shadcn.idea2.app/)
 16. [Searchable Input](https://mobx-restful-shadcn.idea2.app/)
+17. [Editor](https://mobx-restful-shadcn.idea2.app/)
 
 ## Installation
 
@@ -195,6 +196,34 @@ export const EditorPage = () => (
 );
 ```
 
+### Editor
+
+```tsx
+import { configure } from "mobx";
+import { formToJSON } from "web-utility";
+import { Editor, OriginalTools, ExtraTools } from "@/components/ui/editor";
+
+configure({ enforceActions: "never" });
+
+export const EditorPage = () => (
+  <form
+    onSubmit={(event) => {
+      event.preventDefault();
+      const { content } = formToJSON(event.currentTarget);
+      alert(content);
+    }}
+  >
+    <Editor
+      tools={[...OriginalTools, ...ExtraTools]}
+      name="content"
+      defaultValue="Hello <b>Edkit</b>!"
+      onChange={console.log}
+    />
+    <button type="submit">Submit</button>
+  </form>
+);
+```
+
 ## Development
 
 This is a custom component registry built with Next.js and compatible with the `shadcn` CLI.

app/page.tsx

@@ -15,6 +15,7 @@ import { RangeInputExample } from "@/registry/new-york/blocks/range-input/exampl
 import { FilePickerExample } from "@/registry/new-york/blocks/file-picker/example";
 import { FormFieldExample } from "@/registry/new-york/blocks/form-field/example";
 import { RestTableExample } from "@/registry/new-york/blocks/rest-table/example";
+import EditorExample from "@/registry/new-york/blocks/editor/example";
 
 export default function Home() {
   return (
@@ -139,6 +140,14 @@ export default function Home() {
         >
           <RestTableExample />
         </ComponentCard>
+
+        <ComponentCard
+          name="editor"
+          description="A lightweight rich text editor based on Edkit and Shadcn UI with various formatting tools."
+          minHeight="min-h-[400px]"
+        >
+          <EditorExample />
+        </ComponentCard>
       </main>
     </div>
   );

registry/new-york/blocks/editor/example.tsx

@@ -3,6 +3,7 @@
 import { configure } from "mobx";
 import { formToJSON } from "web-utility";
 import { Editor, OriginalTools, ExtraTools } from "./index";
+import { Button } from "@/components/ui/button";
 
 configure({ enforceActions: "never" });
 
@@ -31,12 +32,7 @@ export default function EditorExample() {
           onChange={console.log}
         />
 
-        <button
-          className="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2"
-          type="submit"
-        >
-          Submit
-        </button>
+        <Button type="submit">Submit</Button>
       </div>
     </form>
   );