Merge pull request #733 from contember/fix/editor-initial-state

editor: assign "key" to initial element

Author: matej21

packages/react-slate-editor/src/components/BlockEditor.tsx

@@ -4,6 +4,7 @@ import { Fragment, ReactNode, useEffect, useState } from 'react'
 import { Slate, useSlate } from 'slate-react'
 import { createEditor, EditorPlugin, paragraphElementType } from '@contember/react-slate-editor-base'
 import { Descendant, insertNodes, Node, removeNodes, withoutNormalizing } from 'slate'
+import { createElementKey } from '../internal/helpers/createElementKey'
 
 export interface BlockEditorProps {
 	field: SugaredRelativeSingleField['field']
@@ -37,7 +38,7 @@ export const BlockEditor = Component<BlockEditorProps>(
 			contentField.updateValue(contentJson)
 		})
 
-		const [emptyValue] = useState(() => [editor.createDefaultElement([{ text: '' }])])
+		const [emptyValue] = useState(() => [{ ...editor.createDefaultElement([{ text: '' }]), key: createElementKey() }])
 
 		const nodes = contentField.value && typeof contentField.value === 'object' && 'children' in contentField.value
 			? (contentField.value.children as Descendant[])

packages/react-slate-editor/src/internal/helpers/createElementKey.tsx

@@ -0,0 +1 @@
+export const createElementKey = () => Math.random().toString(36).slice(6)

packages/react-slate-editor/src/plugins/behaviour/sortable/withSortable.tsx

@@ -2,8 +2,8 @@ import { EditorElement, EditorPlugin } from '@contember/react-slate-editor-base'
 import { ReactEditor } from 'slate-react'
 import { ReactNode } from 'react'
 import { Element, Transforms } from 'slate'
+import { createElementKey } from '../../../internal/helpers/createElementKey'
 
-const createKey = () => Math.random().toString(36).slice(6)
 
 export const withSortable = ({ render: Sortable }: {
 	render: (props: { element: EditorElement, children: ReactNode }) => ReactNode
@@ -22,7 +22,7 @@ export const withSortable = ({ render: Sortable }: {
 		const [node, path] = entry
 		if (Element.isElement(node) && path.length === 1 && (!node.key || editor.children.findIndex(it => it !== node && it.key === node.key) !== -1)) {
 			Transforms.setNodes(editor, {
-				key: createKey(),
+				key: createElementKey(),
 			}, { at: path })
 		}
 		normalizeNode(entry)