Fix: don't render FloatingLink on readOnly (#1978)

* fix

* Create popular-spoons-type.md

* Create large-tips-heal.md

.changeset/large-tips-heal.md

@@ -0,0 +1,5 @@
+---
+"@udecode/plate-core": minor
+---
+
+Plugin fields `renderBeforeEditable` and `renderAfterEditable` now have `TEditableProps` passed as the first parameter.

.changeset/popular-spoons-type.md

@@ -0,0 +1,5 @@
+---
+"@udecode/plate-ui-link": patch
+---
+
+Fix: don't render `FloatingLink` on `readOnly`

packages/core/src/components/plate/PlateEditable.tsx

@@ -61,7 +61,7 @@ export const PlateEditable = <V extends Value = Value>({
       afterEditable = (
         <>
           {afterEditable}
-          {renderAfterEditable()}
+          {renderAfterEditable(editableProps)}
         </>
       );
     }
@@ -70,7 +70,7 @@ export const PlateEditable = <V extends Value = Value>({
       beforeEditable = (
         <>
           {beforeEditable}
-          {renderBeforeEditable()}
+          {renderBeforeEditable(editableProps)}
         </>
       );
     }

packages/core/src/types/plugin/PlatePlugin.ts

@@ -1,5 +1,6 @@
 import { FC, ReactNode } from 'react';
 import { Value } from '../../slate/editor/TEditor';
+import { TEditableProps } from '../../slate/index';
 import { AnyObject } from '../misc/AnyObject';
 import { Nullable } from '../misc/Nullable';
 import { WithRequired } from '../misc/types';
@@ -164,12 +165,16 @@ export type PlatePlugin<
     /**
      * Render a component after `Editable`.
      */
-    renderAfterEditable?: () => JSX.Element | null;
+    renderAfterEditable?: (
+      editableProps: TEditableProps<V>
+    ) => JSX.Element | null;
 
     /**
      * Render a component before `Editable`.
      */
-    renderBeforeEditable?: () => JSX.Element | null;
+    renderBeforeEditable?: (
+      editableProps: TEditableProps<V>
+    ) => JSX.Element | null;
 
     /**
      * Property used by `serializeHtml` util to replace `renderElement` and `renderLeaf` when serializing a node of this `type`.

packages/ui/nodes/link/src/PlateFloatingLink.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { TEditableProps } from '@udecode/plate-core';
 import {
   FloatingLink,
   LaunchIcon,
@@ -18,9 +19,11 @@ import {
   FloatingVerticalDivider,
 } from '@udecode/plate-ui-toolbar';
 
-export const PlateFloatingLink = () => {
+export const PlateFloatingLink = ({ readOnly }: TEditableProps) => {
   const isEditing = useFloatingLinkSelectors().isEditing();
 
+  if (readOnly) return null;
+
   const input = (
     <div tw="flex flex-col w-[330px]">
       <FloatingInputWrapper>