From 91e388ecd9e6a540b4a651978436f196f38f667d Mon Sep 17 00:00:00 2001
From: Ivan Voskoboinyk <ivan@voskoboinyk.com>
Date: Fri, 26 May 2023 17:53:39 +0300
Subject: [PATCH] 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
---
 .changeset/tiny-suns-lick.md                   |  5 +++++
 docs/concepts/12-typescript.md                 |  2 +-
 docs/general/changelog.md                      |  2 +-
 docs/walkthroughs/01-installing-slate.md       |  4 ++--
 docs/walkthroughs/02-adding-event-handlers.md  |  6 +++---
 .../03-defining-custom-elements.md             |  8 ++++----
 .../04-applying-custom-formatting.md           |  6 +++---
 docs/walkthroughs/05-executing-commands.md     |  6 +++---
 docs/walkthroughs/06-saving-to-a-database.md   |  8 ++++----
 packages/slate-react/src/components/slate.tsx  | 12 ++++++------
 packages/slate-react/test/index.spec.tsx       | 18 ++++++++++++++----
 site/examples/check-lists.tsx                  |  2 +-
 site/examples/code-highlighting.tsx            |  4 ++--
 site/examples/custom-placeholder.tsx           |  2 +-
 site/examples/editable-voids.tsx               |  2 +-
 site/examples/embeds.tsx                       |  2 +-
 site/examples/forced-layout.tsx                |  2 +-
 site/examples/hovering-toolbar.tsx             |  2 +-
 site/examples/huge-document.tsx                |  2 +-
 site/examples/iframe.tsx                       |  2 +-
 site/examples/images.tsx                       |  2 +-
 site/examples/inlines.tsx                      |  2 +-
 site/examples/markdown-preview.tsx             |  2 +-
 site/examples/markdown-shortcuts.tsx           |  2 +-
 site/examples/mentions.tsx                     |  2 +-
 site/examples/paste-html.tsx                   |  2 +-
 site/examples/plaintext.tsx                    |  2 +-
 site/examples/read-only.tsx                    |  2 +-
 site/examples/richtext.tsx                     |  2 +-
 site/examples/scroll-into-view.tsx             |  2 +-
 site/examples/search-highlighting.tsx          |  2 +-
 site/examples/shadow-dom.tsx                   |  2 +-
 site/examples/styling.tsx                      |  4 ++--
 site/examples/tables.tsx                       |  2 +-
 34 files changed, 71 insertions(+), 56 deletions(-)
 create mode 100644 .changeset/tiny-suns-lick.md

diff --git a/.changeset/tiny-suns-lick.md b/.changeset/tiny-suns-lick.md
new file mode 100644
index 000000000..91740edd9
--- /dev/null
+++ b/.changeset/tiny-suns-lick.md
@@ -0,0 +1,5 @@
+---
+'slate-react': minor
+---
+
+Rename `<Slate>` component prop from `value` to `initialValue` to emphasize uncontrolled nature of it
diff --git a/docs/concepts/12-typescript.md b/docs/concepts/12-typescript.md
index 51f494379..647cdb05d 100644
--- a/docs/concepts/12-typescript.md
+++ b/docs/concepts/12-typescript.md
@@ -53,7 +53,7 @@ const App = () => {
   const [editor] = useState(() => withReact(createEditor()))
 
   return (
-    <Slate editor={editor} value={initialValue}>
+    <Slate editor={editor} initialValue={initialValue}>
       <Editable />
     </Slate>
   )
diff --git a/docs/general/changelog.md b/docs/general/changelog.md
index da54e2c5d..8612a3319 100644
--- a/docs/general/changelog.md
+++ b/docs/general/changelog.md
@@ -309,7 +309,7 @@ const [value, setValue] = useState(initialValue)
 const [selection, setSelection] = useState(null)
 
 <Slate
-  value={value}
+  initialValue={initialValue}
   selection={selection}
   onChange={(value, selection) => {
     setValue(value)
diff --git a/docs/walkthroughs/01-installing-slate.md b/docs/walkthroughs/01-installing-slate.md
index df78cdfab..49f384cc7 100644
--- a/docs/walkthroughs/01-installing-slate.md
+++ b/docs/walkthroughs/01-installing-slate.md
@@ -81,7 +81,7 @@ const initialValue = [
 const App = () => {
   const [editor] = useState(() => withReact(createEditor()))
   // Render the Slate context.
-  return <Slate editor={editor} value={initialValue} />
+  return <Slate editor={editor} initialValue={initialValue} />
 }
 ```
 
@@ -107,7 +107,7 @@ const App = () => {
   const [editor] = useState(() => withReact(createEditor()))
   return (
     // Add the editable component inside the context.
-    <Slate editor={editor} value={initialValue}>
+    <Slate editor={editor} initialValue={initialValue}>
       <Editable />
     </Slate>
   )
diff --git a/docs/walkthroughs/02-adding-event-handlers.md b/docs/walkthroughs/02-adding-event-handlers.md
index 254194539..8b509ddc6 100644
--- a/docs/walkthroughs/02-adding-event-handlers.md
+++ b/docs/walkthroughs/02-adding-event-handlers.md
@@ -20,7 +20,7 @@ const App = () => {
   const [editor] = useState(() => withReact(createEditor()))
 
   return (
-    <Slate editor={editor} value={initialValue}>
+    <Slate editor={editor} initialValue={initialValue}>
       <Editable />
     </Slate>
   )
@@ -41,7 +41,7 @@ const App = () => {
   const [editor] = useState(() => withReact(createEditor()))
 
   return (
-    <Slate editor={editor} value={initialValue}>
+    <Slate editor={editor} initialValue={initialValue}>
       <Editable
         // Define a new handler which prints the key that was pressed.
         onKeyDown={event => {
@@ -71,7 +71,7 @@ const App = () => {
   const [editor] = useState(() => withReact(createEditor()))
 
   return (
-    <Slate editor={editor} value={initialValue}>
+    <Slate editor={editor} initialValue={initialValue}>
       <Editable
         onKeyDown={event => {
           if (event.key === '&') {
diff --git a/docs/walkthroughs/03-defining-custom-elements.md b/docs/walkthroughs/03-defining-custom-elements.md
index 26ab208fb..1adbafa76 100644
--- a/docs/walkthroughs/03-defining-custom-elements.md
+++ b/docs/walkthroughs/03-defining-custom-elements.md
@@ -18,7 +18,7 @@ const App = () => {
   const [editor] = useState(() => withReact(createEditor()))
 
   return (
-    <Slate editor={editor} value={initialValue}>
+    <Slate editor={editor} initialValue={initialValue}>
       <Editable
         onKeyDown={event => {
           if (event.key === '&') {
@@ -88,7 +88,7 @@ const App = () => {
   }, [])
 
   return (
-    <Slate editor={editor} value={initialValue}>
+    <Slate editor={editor} initialValue={initialValue}>
       <Editable
         // Pass in the `renderElement` function.
         renderElement={renderElement}
@@ -142,7 +142,7 @@ const App = () => {
   }, [])
 
   return (
-    <Slate editor={editor} value={initialValue}>
+    <Slate editor={editor} initialValue={initialValue}>
       <Editable
         renderElement={renderElement}
         onKeyDown={event => {
@@ -200,7 +200,7 @@ const App = () => {
   }, [])
 
   return (
-    <Slate editor={editor} value={initialValue}>
+    <Slate editor={editor} initialValue={initialValue}>
       <Editable
         renderElement={renderElement}
         onKeyDown={event => {
diff --git a/docs/walkthroughs/04-applying-custom-formatting.md b/docs/walkthroughs/04-applying-custom-formatting.md
index 7208c802c..bf6fd51c3 100644
--- a/docs/walkthroughs/04-applying-custom-formatting.md
+++ b/docs/walkthroughs/04-applying-custom-formatting.md
@@ -27,7 +27,7 @@ const App = () => {
   const [editor] = useState(() => withReact(createEditor()))
 
   return (
-    <Slate editor={editor} value={initialValue}>
+    <Slate editor={editor} initialValue={initialValue}>
       <Editable
         renderElement={renderElement}
         onKeyDown={event => {
@@ -72,7 +72,7 @@ const App = () => {
   }, [])
 
   return (
-    <Slate editor={editor} value={initialValue}>
+    <Slate editor={editor} initialValue={initialValue}>
       <Editable
         renderElement={renderElement}
         onKeyDown={event => {
@@ -163,7 +163,7 @@ const App = () => {
   }, [])
 
   return (
-    <Slate editor={editor} value={initialValue}>
+    <Slate editor={editor} initialValue={initialValue}>
       <Editable
         renderElement={renderElement}
         // Pass in the `renderLeaf` function.
diff --git a/docs/walkthroughs/05-executing-commands.md b/docs/walkthroughs/05-executing-commands.md
index dbb1458fd..080c39d17 100644
--- a/docs/walkthroughs/05-executing-commands.md
+++ b/docs/walkthroughs/05-executing-commands.md
@@ -35,7 +35,7 @@ const App = () => {
   }, [])
 
   return (
-    <Slate editor={editor} value={initialValue}>
+    <Slate editor={editor} initialValue={initialValue}>
       <Editable
         renderElement={renderElement}
         renderLeaf={renderLeaf}
@@ -142,7 +142,7 @@ const App = () => {
   }, [])
 
   return (
-    <Slate editor={editor} value={initialValue}>
+    <Slate editor={editor} initialValue={initialValue}>
       <Editable
         renderElement={renderElement}
         renderLeaf={renderLeaf}
@@ -200,7 +200,7 @@ const App = () => {
 
   return (
     // Add a toolbar with buttons that call the same methods.
-    <Slate editor={editor} value={initialValue}>
+    <Slate editor={editor} initialValue={initialValue}>
       <div>
         <button
           onMouseDown={event => {
diff --git a/docs/walkthroughs/06-saving-to-a-database.md b/docs/walkthroughs/06-saving-to-a-database.md
index 98ee1143a..40edc2538 100644
--- a/docs/walkthroughs/06-saving-to-a-database.md
+++ b/docs/walkthroughs/06-saving-to-a-database.md
@@ -18,7 +18,7 @@ const App = () => {
   const [editor] = useState(() => withReact(createEditor()))
 
   return (
-    <Slate editor={editor} value={initialValue}>
+    <Slate editor={editor} initialValue={initialValue}>
       <Editable />
     </Slate>
   )
@@ -45,7 +45,7 @@ const App = () => {
   return (
     <Slate
       editor={editor}
-      value={initialValue}
+      initialValue={initialValue}
       onChange={value => {
         const isAstChange = editor.operations.some(
           op => 'set_selection' !== op.type
@@ -85,7 +85,7 @@ const App = () => {
   return (
     <Slate
       editor={editor}
-      value={initialValue}
+      initialValue={initialValue}
       onChange={value => {
         const isAstChange = editor.operations.some(
           op => 'set_selection' !== op.type
@@ -145,7 +145,7 @@ const App = () => {
   return (
     <Slate
       editor={editor}
-      value={initialValue}
+      initialValue={initialValue}
       onChange={value => {
         const isAstChange = editor.operations.some(
           op => 'set_selection' !== op.type
diff --git a/packages/slate-react/src/components/slate.tsx b/packages/slate-react/src/components/slate.tsx
index 3dbb41887..301e32bab 100644
--- a/packages/slate-react/src/components/slate.tsx
+++ b/packages/slate-react/src/components/slate.tsx
@@ -19,18 +19,18 @@ import { EDITOR_TO_ON_CHANGE } from '../utils/weak-maps'
 
 export const Slate = (props: {
   editor: ReactEditor
-  value: Descendant[]
+  initialValue: Descendant[]
   children: React.ReactNode
   onChange?: (value: Descendant[]) => void
 }) => {
-  const { editor, children, onChange, value, ...rest } = props
+  const { editor, children, onChange, initialValue, ...rest } = props
   const unmountRef = useRef(false)
 
   const [context, setContext] = React.useState<SlateContextValue>(() => {
-    if (!Node.isNodeList(value)) {
+    if (!Node.isNodeList(initialValue)) {
       throw new Error(
-        `[Slate] value is invalid! Expected a list of elements but got: ${Scrubber.stringify(
-          value
+        `[Slate] initialValue is invalid! Expected a list of elements but got: ${Scrubber.stringify(
+          initialValue
         )}`
       )
     }
@@ -39,7 +39,7 @@ export const Slate = (props: {
         `[Slate] editor is invalid! You passed: ${Scrubber.stringify(editor)}`
       )
     }
-    editor.children = value
+    editor.children = initialValue
     Object.assign(editor, rest)
     return { v: 0, editor }
   })
diff --git a/packages/slate-react/test/index.spec.tsx b/packages/slate-react/test/index.spec.tsx
index 91139db08..383978836 100644
--- a/packages/slate-react/test/index.spec.tsx
+++ b/packages/slate-react/test/index.spec.tsx
@@ -10,7 +10,9 @@ const createNodeMock = () => ({
 
 class MockResizeObserver {
   observe() {}
+
   unobserve() {}
+
   disconnect() {}
 }
 
@@ -21,14 +23,18 @@ describe('slate-react', () => {
     describe('NODE_TO_KEY logic', () => {
       test('should not unmount the node that gets split on a split_node operation', async () => {
         const editor = withReact(createEditor())
-        const value = [{ type: 'block', children: [{ text: 'test' }] }]
+        const initialValue = [{ type: 'block', children: [{ text: 'test' }] }]
         const mounts = jest.fn()
 
         let el: ReactTestRenderer
 
         act(() => {
           el = create(
-            <Slate editor={editor} value={value} onChange={() => {}}>
+            <Slate
+              editor={editor}
+              initialValue={initialValue}
+              onChange={() => {}}
+            >
               <Editable
                 renderElement={({ children }) => {
                   useEffect(() => mounts(), [])
@@ -52,7 +58,7 @@ describe('slate-react', () => {
 
       test('should not unmount the node that gets merged into on a merge_node operation', async () => {
         const editor = withReact(createEditor())
-        const value = [
+        const initialValue = [
           { type: 'block', children: [{ text: 'te' }] },
           { type: 'block', children: [{ text: 'st' }] },
         ]
@@ -62,7 +68,11 @@ describe('slate-react', () => {
 
         act(() => {
           el = create(
-            <Slate editor={editor} value={value} onChange={() => {}}>
+            <Slate
+              editor={editor}
+              initialValue={initialValue}
+              onChange={() => {}}
+            >
               <Editable
                 renderElement={({ children }) => {
                   useEffect(() => mounts(), [])
diff --git a/site/examples/check-lists.tsx b/site/examples/check-lists.tsx
index 5ae76e3e3..6a706c9f8 100644
--- a/site/examples/check-lists.tsx
+++ b/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…"
diff --git a/site/examples/code-highlighting.tsx b/site/examples/code-highlighting.tsx
index e92357f69..8d3b6aa55 100644
--- a/site/examples/code-highlighting.tsx
+++ b/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>
   )
diff --git a/site/examples/custom-placeholder.tsx b/site/examples/custom-placeholder.tsx
index 0a1c022c0..8e1de9d78 100644
--- a/site/examples/custom-placeholder.tsx
+++ b/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 }) => (
diff --git a/site/examples/editable-voids.tsx b/site/examples/editable-voids.tsx
index a2e1481dd..a7fba6f49 100644
--- a/site/examples/editable-voids.tsx
+++ b/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>
diff --git a/site/examples/embeds.tsx b/site/examples/embeds.tsx
index 4e86ed945..0ee07263b 100644
--- a/site/examples/embeds.tsx
+++ b/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..."
diff --git a/site/examples/forced-layout.tsx b/site/examples/forced-layout.tsx
index 116b358ae..662c0860c 100644
--- a/site/examples/forced-layout.tsx
+++ b/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…"
diff --git a/site/examples/hovering-toolbar.tsx b/site/examples/hovering-toolbar.tsx
index eab9eadeb..8f471cdb9 100644
--- a/site/examples/hovering-toolbar.tsx
+++ b/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} />}
diff --git a/site/examples/huge-document.tsx b/site/examples/huge-document.tsx
index 6d4b91b34..b90eb0e51 100644
--- a/site/examples/huge-document.tsx
+++ b/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>
   )
diff --git a/site/examples/iframe.tsx b/site/examples/iframe.tsx
index b15247bb6..2db461ec6 100644
--- a/site/examples/iframe.tsx
+++ b/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" />
diff --git a/site/examples/images.tsx b/site/examples/images.tsx
index f4dfe2fc5..499a246a3 100644
--- a/site/examples/images.tsx
+++ b/site/examples/images.tsx
@@ -25,7 +25,7 @@ const ImagesExample = () => {
   )
 
   return (
-    <Slate editor={editor} value={initialValue}>
+    <Slate editor={editor} initialValue={initialValue}>
       <Toolbar>
         <InsertImageButton />
       </Toolbar>
diff --git a/site/examples/inlines.tsx b/site/examples/inlines.tsx
index 7e00ef991..a135e7e13 100644
--- a/site/examples/inlines.tsx
+++ b/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 />
diff --git a/site/examples/markdown-preview.tsx b/site/examples/markdown-preview.tsx
index 4f4288d9f..1f71c390e 100644
--- a/site/examples/markdown-preview.tsx
+++ b/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}
diff --git a/site/examples/markdown-shortcuts.tsx b/site/examples/markdown-shortcuts.tsx
index 1d8a42570..67faaa13e 100644
--- a/site/examples/markdown-shortcuts.tsx
+++ b/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}
diff --git a/site/examples/mentions.tsx b/site/examples/mentions.tsx
index 3967e9426..91b8363e9 100644
--- a/site/examples/mentions.tsx
+++ b/site/examples/mentions.tsx
@@ -73,7 +73,7 @@ const MentionExample = () => {
   return (
     <Slate
       editor={editor}
-      value={initialValue}
+      initialValue={initialValue}
       onChange={() => {
         const { selection } = editor
 
diff --git a/site/examples/paste-html.tsx b/site/examples/paste-html.tsx
index a3feceaf5..2506c18dc 100644
--- a/site/examples/paste-html.tsx
+++ b/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}
diff --git a/site/examples/plaintext.tsx b/site/examples/plaintext.tsx
index f4be6913e..f7d7089fb 100644
--- a/site/examples/plaintext.tsx
+++ b/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>
   )
diff --git a/site/examples/read-only.tsx b/site/examples/read-only.tsx
index f17060e1b..f35767f05 100644
--- a/site/examples/read-only.tsx
+++ b/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>
   )
diff --git a/site/examples/richtext.tsx b/site/examples/richtext.tsx
index 09a90adae..c9abb1c26 100644
--- a/site/examples/richtext.tsx
+++ b/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" />
diff --git a/site/examples/scroll-into-view.tsx b/site/examples/scroll-into-view.tsx
index 19abb8006..75da6c732 100644
--- a/site/examples/scroll-into-view.tsx
+++ b/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>
   )
diff --git a/site/examples/search-highlighting.tsx b/site/examples/search-highlighting.tsx
index 5a0d8ae5d..f53bd5b6e 100644
--- a/site/examples/search-highlighting.tsx
+++ b/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`
diff --git a/site/examples/shadow-dom.tsx b/site/examples/shadow-dom.tsx
index 4dd47b5d6..aae0f1a54 100644
--- a/site/examples/shadow-dom.tsx
+++ b/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>
   )
diff --git a/site/examples/styling.tsx b/site/examples/styling.tsx
index 3c1251fa4..1aef0b6b4 100644
--- a/site/examples/styling.tsx
+++ b/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: [
diff --git a/site/examples/tables.tsx b/site/examples/tables.tsx
index 7cc1b800d..f4ddee23e 100644
--- a/site/examples/tables.tsx
+++ b/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>
   )