So I was going to use the text to markdown UI you used to have in your uiwjs.github.io but its not there anymore.
I implemented the @uiwjs/react-md-markdown library in a project, but when I paste the following:
[{"content":"# Querying for Elements With Different Criteria\n\nReact Testing Library provides many different query functions. Each begins with a name like getBy, findBy, etc. The names also have common endings. The different name endings indicate how the query for an element will be performed.\n\n| End of Function Name | Search Criteria |\n|----------------------|--------------------------------------------------------------------|\n| ByRole | Finds elements based on their implicit or explicit ARIA role |\n| ByLabelText | Find form elements based upon the text their paired labels contain |\n| ByPlaceholderText | Find form elements based upon their placeholder text |\n| ByText | Find elements based upon the text they contain |\n| ByDisplayValue | Find elements based upon their current value |\n| ByAltText | Find elements based upon their alt attribute |\n| ByTitle | Find elements based upon their title attribute |\n| ByTestId | Find elements based upon their data-testid attribute |\n\n## When to Use Each\n\nAlways prefer using query functions ending with ByRole. Only use others if ByRole is not an option.","type":"text","id":"erck3"},{"content":"import { screen, render } from '@testing-library/react';\nimport { useState } from 'react';\n\nfunction DataForm() {\n const [email, setEmail] = useState('asdf@asdf.com');\n\n return (\n
\n\n <label htmlFor=\"email\">Email\n <input \n id=\"email\"\n value={email}\n onChange={e => setEmail(e.target.value)}\n />\n\n <label htmlFor=\"color\">Color\n <input id=\"color\" placeholder=\"Red\" />\n\n <button title=\"Click when ready to submit\">\n Submit\n \n \n );\n}\n\nrender();","type":"code","id":"drua1"},{"content":"test('selecting different elements', () => {\n render();\n\n const elements = [\n screen.getByRole('button'),\n screen.getByText(/enter/i),\n\n screen.getByLabelText(/email/i),\n screen.getByPlaceholderText('Red'),\n screen.getByDisplayValue('asdf@asdf.com'),\n screen.getByAltText('data'),\n screen.getByTitle(/ready to submit/i),\n\n screen.getByTestId('image wrapper')\n ];\n\n for (let element of elements) {\n expect(element).toBeInTheDocument();\n }\n});","type":"code","id":"cpl5j"}]
It does not properly convert it to Markdown on the right hand panel.
So I was going to use the text to markdown UI you used to have in your uiwjs.github.io but its not there anymore.
I implemented the
@uiwjs/react-md-markdownlibrary in a project, but when I paste the following:[{"content":"# Querying for Elements With Different Criteria\n\nReact Testing Library provides many different query functions. Each begins with a name like
getBy,findBy, etc. The names also have common endings. The different name endings indicate how the query for an element will be performed.\n\n| End of Function Name | Search Criteria |\n|----------------------|--------------------------------------------------------------------|\n| ByRole | Finds elements based on their implicit or explicit ARIA role |\n| ByLabelText | Find form elements based upon the text their paired labels contain |\n| ByPlaceholderText | Find form elements based upon their placeholder text |\n| ByText | Find elements based upon the text they contain |\n| ByDisplayValue | Find elements based upon their current value |\n| ByAltText | Find elements based upon theiraltattribute |\n| ByTitle | Find elements based upon theirtitleattribute |\n| ByTestId | Find elements based upon theirdata-testidattribute |\n\n## When to Use Each\n\nAlways prefer using query functions ending withByRole. Only use others ifByRoleis not an option.","type":"text","id":"erck3"},{"content":"import { screen, render } from '@testing-library/react';\nimport { useState } from 'react';\n\nfunction DataForm() {\n const [email, setEmail] = useState('asdf@asdf.com');\n\n return (\nIt does not properly convert it to Markdown on the right hand panel.