fix(richtext-lexical): prevent TS CodeBlocks from sharing Monaco model (useId) (#14351)

### Changes
- Used React’s built-in useId() to give each TypeScript CodeBlock
instance a unique Monaco defaultPath. This ensures every TS code block
creates its own Monaco model instead of reusing a single shared model.
- Exported the Horizontal Rule node from the client exports so it’s
available to consumers.

### Why I did it
Issue + Video mentioned
[here](#13813 (comment))
According to the [@monaco-editor/react
documentation](https://www.npmjs.com/package/@monaco-editor/react#multi-model-editor),
the path/defaultPath parameter is used as an identifier for the model:

> There are three parameters to create a model - value, language and
path (monaco.editor.createModel(value, language,
monaco.Uri.parse(path))). You can consider last one (path) as an
identifier for the model. The Editor component, now, has a path prop.
When you specify a path prop, the Editor component checks if it has a
model by that path or not. If yes, the existing model will be shown,
otherwise, a new one will be created (and stored).

When multiple code blocks share the same defaultPath: 'file.tsx',
@monaco-editor/react treats them as the same model identifier, causing:

- Model reuse across different code block instances
- Content synchronization between blocks
- Loss of independent state per block

Author: technicaldirector

packages/richtext-lexical/src/exports/client/index.ts

@@ -135,6 +135,12 @@ export {
   InlineBlockNode,
 } from '../../features/blocks/client/nodes/InlineBlocksNode.js'
 
+export {
+  $createHorizontalRuleNode,
+  $isHorizontalRuleNode,
+  HorizontalRuleNode,
+} from '../../features/horizontalRule/client/nodes/HorizontalRuleNode.js'
+
 export { FieldsDrawer } from '../../utilities/fieldsDrawer/Drawer.js'
 export { useLexicalDocumentDrawer } from '../../utilities/fieldsDrawer/useLexicalDocumentDrawer.js'
 export { useLexicalDrawer } from '../../utilities/fieldsDrawer/useLexicalDrawer.js'

packages/richtext-lexical/src/features/blocks/premade/CodeBlock/Component/Code.tsx

@@ -3,7 +3,7 @@
 import type { CodeFieldClient, CodeFieldClientProps } from 'payload'
 
 import { CodeField, useFormFields } from '@payloadcms/ui'
-import React, { useMemo } from 'react'
+import React, { useId, useMemo } from 'react'
 
 import { defaultLanguages } from './defaultLanguages.js'
 
@@ -78,6 +78,10 @@ export const CodeComponent: React.FC<AdditionalCodeComponentProps & CodeFieldCli
   const language: string =
     (languageField?.value as string) || (languageField?.initialValue as string) || 'typescript'
 
+  // unique id per component instance to ensure Monaco creates a distinct model
+  // for each TypeScript code block. Using React's useId is SSR-safe and builtin.
+  const instanceId = useId()
+
   const label = languages[language]
 
   const props: CodeFieldClient = useMemo<CodeFieldClient>(
@@ -89,13 +93,14 @@ export const CodeComponent: React.FC<AdditionalCodeComponentProps & CodeFieldCli
         editorOptions: {},
         editorProps: {
           // If typescript is set, @monaco-editor/react needs to set the URI to a .ts or .tsx file when it calls createModel().
-          // This is done through the `defaultPath` prop.
-          defaultPath: language === 'ts' ? 'file.tsx' : undefined,
+          // Provide a unique defaultPath per instance so Monaco doesn't reuse the same model
+          // across multiple code block instances. We use field.name + instanceId for debugability.
+          defaultPath: language === 'ts' ? `file-${field.name}-${instanceId}.tsx` : undefined,
         },
         language,
       },
     }),
-    [field, language],
+    [field, language, instanceId],
   )
 
   const key = `${field.name}-${language}-${label}`