From 602f1701569d3e9f1b2337cd7f29007019f92205 Mon Sep 17 00:00:00 2001
From: Julian Krispel-Samsel <julian@jkrsp.com>
Date: Wed, 21 Apr 2021 09:29:19 +0100
Subject: [PATCH] Update readonly example and add test (#4212)

* fixes #4039, update readonly example

* add cypress test for readonly mode
---
 cypress/integration/readonly.ts | 10 ++++++++++
 site/examples/read-only.tsx     |  3 ++-
 2 files changed, 12 insertions(+), 1 deletion(-)
 create mode 100644 cypress/integration/readonly.ts

diff --git a/cypress/integration/readonly.ts b/cypress/integration/readonly.ts
new file mode 100644
index 000000000..3a4825d1e
--- /dev/null
+++ b/cypress/integration/readonly.ts
@@ -0,0 +1,10 @@
+describe('readonly editor', () => {
+  it('should not be editable', () => {
+    cy.visit('examples/read-only')
+      .get('[data-slate-editor="true"]')
+      .should('not.have.attr', 'contentEditable', 'true')
+      .should('not.have.attr', 'role', 'textbox')
+      .click()
+      .should('not.be.focused')
+  })
+})
diff --git a/site/examples/read-only.tsx b/site/examples/read-only.tsx
index 41aaff524..566b9e32c 100644
--- a/site/examples/read-only.tsx
+++ b/site/examples/read-only.tsx
@@ -17,7 +17,8 @@ const initialValue: Descendant[] = [
     type: 'paragraph',
     children: [
       {
-        text: 'This is editable plain text, just like a <textarea>!',
+        text:
+          'This example shows what happens when the Editor is set to readOnly, it is not editable',
       },
     ],
   },