Cypress tests for examples (#4389)

* cypress: mentions example test

* cypress: search highlighting test

* cypress: tables example test

* cypress: check html in richtext

* Update cypress/integration/mentions.ts

Co-authored-by: Tim Buckley <timothypbuckley@gmail.com>

* Update cypress/integration/search-highlighting.ts

Co-authored-by: Tim Buckley <timothypbuckley@gmail.com>

* cypress: reset page before each test case

* cypress: Custom command dataCy

* cypress: seperate directory for examples' tests

* cypress: remove comments

* cypress: add placeholder test

* cypress: add plain text test

Co-authored-by: Tim Buckley <timothypbuckley@gmail.com>

site/examples/mentions.tsx

@@ -120,6 +120,7 @@ const MentionExample = () => {
               borderRadius: '4px',
               boxShadow: '0 1px 5px rgba(0,0,0,.2)',
             }}
+            data-cy="mentions-portal"
           >
             {chars.map((char, i) => (
               <div
@@ -181,6 +182,7 @@ const Mention = ({ attributes, children, element }) => {
     <span
       {...attributes}
       contentEditable={false}
+      data-cy={`mention-${element.character.replace(' ', '-')}`}
       style={{
         padding: '3px 3px 2px',
         margin: '0 1px',

site/examples/search-highlighting.tsx

@@ -75,6 +75,7 @@ const Leaf = ({ attributes, children, leaf }) => {
   return (
     <span
       {...attributes}
+      {...(leaf.highlight && { 'data-cy': 'search-highlighted' })}
       className={css`
         font-weight: ${leaf.bold && 'bold'};
         background-color: ${leaf.highlight && '#ffeeba'};