Rename <Slate> component value prop to initialValue (#5421)

* Rename `slate-react` Slate component `value` prop to `initialValue`

Fixes #4992

* Update documentation: `value` -> `initialValue`

* Add a changeset record

* Make props order consistent

site/examples/check-lists.tsx

@@ -73,7 +73,7 @@ const CheckListsExample = () => {
   )
 
   return (
-    <Slate editor={editor} value={initialValue}>
+    <Slate editor={editor} initialValue={initialValue}>
       <Editable
         renderElement={renderElement}
         placeholder="Get to work…"

site/examples/code-highlighting.tsx

@@ -46,7 +46,7 @@ const CodeHighlightingExample = () => {
   const onKeyDown = useOnKeydown(editor)
 
   return (
-    <Slate editor={editor} value={initialValue}>
+    <Slate editor={editor} initialValue={initialValue}>
       <ExampleToolbar />
       <SetNodeToDecorations />
       <Editable
@@ -324,7 +324,7 @@ const App = () => {
   const [editor] = useState(() => withReact(createEditor()))
 
   return (
-    <Slate editor={editor} value={initialValue}>
+    <Slate editor={editor} initialValue={initialValue}>
       <Editable />
     </Slate>
   )

site/examples/custom-placeholder.tsx

@@ -13,7 +13,7 @@ const initialValue: Descendant[] = [
 const PlainTextExample = () => {
   const editor = useMemo(() => withHistory(withReact(createEditor())), [])
   return (
-    <Slate editor={editor} value={initialValue}>
+    <Slate editor={editor} initialValue={initialValue}>
       <Editable
         placeholder="Type something"
         renderPlaceholder={({ children, attributes }) => (

site/examples/editable-voids.tsx

@@ -15,7 +15,7 @@ const EditableVoidsExample = () => {
   )
 
   return (
-    <Slate editor={editor} value={initialValue}>
+    <Slate editor={editor} initialValue={initialValue}>
       <Toolbar>
         <InsertEditableVoidButton />
       </Toolbar>

site/examples/embeds.tsx

@@ -16,7 +16,7 @@ import {
 const EmbedsExample = () => {
   const editor = useMemo(() => withEmbeds(withReact(createEditor())), [])
   return (
-    <Slate editor={editor} value={initialValue}>
+    <Slate editor={editor} initialValue={initialValue}>
       <Editable
         renderElement={props => <Element {...props} />}
         placeholder="Enter some text..."

site/examples/forced-layout.tsx

@@ -74,7 +74,7 @@ const ForcedLayoutExample = () => {
     []
   )
   return (
-    <Slate editor={editor} value={initialValue}>
+    <Slate editor={editor} initialValue={initialValue}>
       <Editable
         renderElement={renderElement}
         placeholder="Enter a title…"

site/examples/hovering-toolbar.tsx

@@ -17,7 +17,7 @@ const HoveringMenuExample = () => {
   const editor = useMemo(() => withHistory(withReact(createEditor())), [])
 
   return (
-    <Slate editor={editor} value={initialValue}>
+    <Slate editor={editor} initialValue={initialValue}>
       <HoveringToolbar />
       <Editable
         renderLeaf={props => <Leaf {...props} />}

site/examples/huge-document.tsx

@@ -25,7 +25,7 @@ const HugeDocumentExample = () => {
   const renderElement = useCallback(props => <Element {...props} />, [])
   const editor = useMemo(() => withReact(createEditor()), [])
   return (
-    <Slate editor={editor} value={initialValue}>
+    <Slate editor={editor} initialValue={initialValue}>
       <Editable renderElement={renderElement} spellCheck autoFocus />
     </Slate>
   )

site/examples/iframe.tsx

@@ -25,7 +25,7 @@ const IFrameExample = () => {
   const handleBlur = useCallback(() => ReactEditor.deselect(editor), [editor])
 
   return (
-    <Slate editor={editor} value={initialValue}>
+    <Slate editor={editor} initialValue={initialValue}>
       <Toolbar>
         <MarkButton format="bold" icon="format_bold" />
         <MarkButton format="italic" icon="format_italic" />

site/examples/images.tsx

@@ -25,7 +25,7 @@ const ImagesExample = () => {
   )
 
   return (
-    <Slate editor={editor} value={initialValue}>
+    <Slate editor={editor} initialValue={initialValue}>
       <Toolbar>
         <InsertImageButton />
       </Toolbar>

site/examples/inlines.tsx

@@ -98,7 +98,7 @@ const InlinesExample = () => {
   }
 
   return (
-    <SlateReact.Slate editor={editor} value={initialValue}>
+    <SlateReact.Slate editor={editor} initialValue={initialValue}>
       <Toolbar>
         <AddLinkButton />
         <RemoveLinkButton />

site/examples/markdown-preview.tsx

@@ -48,7 +48,7 @@ const MarkdownPreviewExample = () => {
   }, [])
 
   return (
-    <Slate editor={editor} value={initialValue}>
+    <Slate editor={editor} initialValue={initialValue}>
       <Editable
         decorate={decorate}
         renderLeaf={renderLeaf}

site/examples/markdown-shortcuts.tsx

@@ -70,7 +70,7 @@ const MarkdownShortcutsExample = () => {
   )
 
   return (
-    <Slate editor={editor} value={initialValue}>
+    <Slate editor={editor} initialValue={initialValue}>
       <Editable
         onDOMBeforeInput={handleDOMBeforeInput}
         renderElement={renderElement}

site/examples/mentions.tsx

@@ -73,7 +73,7 @@ const MentionExample = () => {
   return (
     <Slate
       editor={editor}
-      value={initialValue}
+      initialValue={initialValue}
       onChange={() => {
         const { selection } = editor
 

site/examples/paste-html.tsx

@@ -91,7 +91,7 @@ const PasteHtmlExample = () => {
     []
   )
   return (
-    <Slate editor={editor} value={initialValue}>
+    <Slate editor={editor} initialValue={initialValue}>
       <Editable
         renderElement={renderElement}
         renderLeaf={renderLeaf}

site/examples/plaintext.tsx

@@ -6,7 +6,7 @@ import { withHistory } from 'slate-history'
 const PlainTextExample = () => {
   const editor = useMemo(() => withHistory(withReact(createEditor())), [])
   return (
-    <Slate editor={editor} value={initialValue}>
+    <Slate editor={editor} initialValue={initialValue}>
       <Editable placeholder="Enter some plain text..." />
     </Slate>
   )

site/examples/read-only.tsx

@@ -5,7 +5,7 @@ import { Slate, Editable, withReact } from 'slate-react'
 const ReadOnlyExample = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
   return (
-    <Slate editor={editor} value={initialValue}>
+    <Slate editor={editor} initialValue={initialValue}>
       <Editable readOnly placeholder="Enter some plain text..." />
     </Slate>
   )

site/examples/richtext.tsx

@@ -28,7 +28,7 @@ const RichTextExample = () => {
   const editor = useMemo(() => withHistory(withReact(createEditor())), [])
 
   return (
-    <Slate editor={editor} value={initialValue}>
+    <Slate editor={editor} initialValue={initialValue}>
       <Toolbar>
         <MarkButton format="bold" icon="format_bold" />
         <MarkButton format="italic" icon="format_italic" />

site/examples/scroll-into-view.tsx

@@ -51,7 +51,7 @@ const ScrollIntoViewExample = () => {
 const PlainTextEditor = () => {
   const editor = useMemo(() => withHistory(withReact(createEditor())), [])
   return (
-    <Slate editor={editor} value={initialValue}>
+    <Slate editor={editor} initialValue={initialValue}>
       <Editable placeholder="Enter some plain text..." />
     </Slate>
   )

site/examples/search-highlighting.tsx

@@ -37,7 +37,7 @@ const SearchHighlightingExample = () => {
   )
 
   return (
-    <Slate editor={editor} value={initialValue}>
+    <Slate editor={editor} initialValue={initialValue}>
       <Toolbar>
         <div
           className={css`

site/examples/shadow-dom.tsx

@@ -31,7 +31,7 @@ const ShadowEditor = () => {
   const editor = useMemo(() => withHistory(withReact(createEditor())), [])
 
   return (
-    <Slate editor={editor} value={initialValue}>
+    <Slate editor={editor} initialValue={initialValue}>
       <Editable placeholder="Enter some plain text..." />
     </Slate>
   )

site/examples/styling.tsx

@@ -11,7 +11,7 @@ const StylingExample = () => {
     <div style={{ display: 'flex', flexDirection: 'column', gap: '40px' }}>
       <Slate
         editor={editor1}
-        value={[
+        initialValue={[
           {
             type: 'paragraph',
             children: [{ text: 'This editor is styled using the style prop.' }],
@@ -29,7 +29,7 @@ const StylingExample = () => {
 
       <Slate
         editor={editor2}
-        value={[
+        initialValue={[
           {
             type: 'paragraph',
             children: [

site/examples/tables.tsx

@@ -18,7 +18,7 @@ const TablesExample = () => {
     []
   )
   return (
-    <Slate editor={editor} value={initialValue}>
+    <Slate editor={editor} initialValue={initialValue}>
       <Editable renderElement={renderElement} renderLeaf={renderLeaf} />
     </Slate>
   )