mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
d45fc5ad95
## Summary Fix typos in code, styles, and documentation across multiple example projects Chores: - Correct variable name typo in the with-slate example (edtorState→editorState) - Fix CSS/SASS class name misspellings (populer→popular, Serach→Search, serachSelector→searchSelector) - Update example documentation and comments to fix English typos (Data SOUCE→SOURCE, accessiblity→accessibility, exchanges, doesn't, deploying, validates, quickly) ### Adding or Updating Examples - [x] The "examples guidelines" are followed from our contributing doc https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md - [x] Make sure the linting passes by running `pnpm build && pnpm lint`. See https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md Co-authored-by: Joseph <[email protected]>
45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { createEditor, Descendant } from "slate";
|
|
import { Slate, Editable, withReact } from "slate-react";
|
|
|
|
const initialValue: Descendant[] = [
|
|
{
|
|
children: [
|
|
{ text: "This is editable plain text, just like a <textarea>!" },
|
|
],
|
|
},
|
|
];
|
|
|
|
async function saveEditorState(editorState: Descendant[]) {
|
|
const response = await fetch("/api/editor-state/", {
|
|
method: "POST",
|
|
body: JSON.stringify(editorState),
|
|
});
|
|
return response.json();
|
|
}
|
|
|
|
export default function IndexPage() {
|
|
const [editor] = useState(() => withReact(createEditor()));
|
|
|
|
return (
|
|
<Slate
|
|
editor={editor}
|
|
initialValue={initialValue}
|
|
onChange={async (value) => {
|
|
const isAstChange = editor.operations.some(
|
|
(op) => "set_selection" !== op.type,
|
|
);
|
|
if (isAstChange) {
|
|
// You might want to debounce the following call!
|
|
const responseData = await saveEditorState(value);
|
|
console.log("Send editor state to the server", responseData);
|
|
}
|
|
}}
|
|
>
|
|
<Editable placeholder="Enter some plain text..." />
|
|
</Slate>
|
|
);
|
|
}
|