From d877bafc9f0e2efe00dcd63a0e3301e3290aecf0 Mon Sep 17 00:00:00 2001
From: Ziad Beyens <ziad.beyens@gmail.com>
Date: Mon, 7 Nov 2022 17:52:36 +0100
Subject: [PATCH] Fix: don't render `FloatingLink` on `readOnly` (#1978)

* fix

* Create popular-spoons-type.md

* Create large-tips-heal.md
---
 .changeset/large-tips-heal.md                        | 5 +++++
 .changeset/popular-spoons-type.md                    | 5 +++++
 packages/core/src/components/plate/PlateEditable.tsx | 4 ++--
 packages/core/src/types/plugin/PlatePlugin.ts        | 9 +++++++--
 packages/ui/nodes/link/src/PlateFloatingLink.tsx     | 5 ++++-
 5 files changed, 23 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/large-tips-heal.md
 create mode 100644 .changeset/popular-spoons-type.md

diff --git a/.changeset/large-tips-heal.md b/.changeset/large-tips-heal.md
new file mode 100644
index 0000000000..ce6117f186
--- /dev/null
+++ b/.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.
diff --git a/.changeset/popular-spoons-type.md b/.changeset/popular-spoons-type.md
new file mode 100644
index 0000000000..3df078125f
--- /dev/null
+++ b/.changeset/popular-spoons-type.md
@@ -0,0 +1,5 @@
+---
+"@udecode/plate-ui-link": patch
+---
+
+Fix: don't render `FloatingLink` on `readOnly`
diff --git a/packages/core/src/components/plate/PlateEditable.tsx b/packages/core/src/components/plate/PlateEditable.tsx
index 8022d7e10f..0497ff8464 100644
--- a/packages/core/src/components/plate/PlateEditable.tsx
+++ b/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)}
         </>
       );
     }
diff --git a/packages/core/src/types/plugin/PlatePlugin.ts b/packages/core/src/types/plugin/PlatePlugin.ts
index a212c03219..7ae00c278a 100644
--- a/packages/core/src/types/plugin/PlatePlugin.ts
+++ b/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`.
diff --git a/packages/ui/nodes/link/src/PlateFloatingLink.tsx b/packages/ui/nodes/link/src/PlateFloatingLink.tsx
index 703771b863..4ebe390856 100644
--- a/packages/ui/nodes/link/src/PlateFloatingLink.tsx
+++ b/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>