/gi, \"\").replace(/
<\\/p>\\s*/g, '');\n return cleanedString;\n}\n\nfunction prettifyHTML(html: string): string {\n let indent = 0;\n const tab = ' ';\n let pretty = '';\n html.split(/>\\s* {\n if (element.match(/^\\/\\w/)) {\n indent = Math.max(0, indent - 1);\n }\n pretty += tab.repeat(indent) + '<' + element + '>\\n';\n if (element.match(/^]*[^\\/]$/) && !element.startsWith('input') && !element.startsWith('img') && !element.startsWith('br')) {\n indent++;\n }\n });\n return pretty.substring(1, pretty.length - 2);\n}\n```\n\n```tsx\n const [html, setHtml] = useState(formatHTMLData(data3));\n```\n\n\n### HTML as input/output\n\n```tsx\nimport { Editor, EditorComposer, useSyncWithInputHtml } from '@drcpythonmfe/lexical-playground';\nimport \"@drcpythonmfe/lexical-playground/editor.css\"\nimport \"@drcpythonmfe/lexical-playground/theme.css\"\n\nfunction MyEditor({ html, setHtml }: {\n html: string;\n setHtml: (newHtml: string) => void;\n}): JSX.Element {\n useSyncWithInputHtml(html);\n\n return (\n \n );\n}\n\nexport default function PlaygroundApp(): JSX.Element {\n const [html, setHtml] = useState('test');\n return (\n \n \n \n );\n}\n```\n\n### A JSON string as input/output\n\n```tsx\nimport { Editor, EditorComposer, useSyncWithInputHtml } from '@drcpythonmfe/lexical-playground';\nimport \"@drcpythonmfe/lexical-playground/editor.css\"\nimport \"@drcpythonmfe/lexical-playground/theme.css\"\n\nfunction MyEditor({ json, setJson }: {\n json: string;\n setJson: (html: string) => void;\n}): JSX.Element {\n useSyncWithInputJson(json); // either a string or an object\n\n return ;\n}\n\nexport default function PlaygroundApp(): JSX.Element {\n const [json, setJson] = useState(\n '{\"root\":{\"children\":[{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"test\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"root\",\"version\":1}}',\n );\n return (\n \n \n \n );\n}\n```\n\n### Customizing the toolbar\nCertain buttons can be ommited from the toolbar, and some can be configured if necessary:\n```tsx\nimport { Editor, EditorComposer, EditorProps } from '@drcpythonmfe/lexical-playground';\n\nconst toolbarConfig: EditorProps['toolbarConfig'] = {\n textColorPicker: false,\n bgColorPicker: false,\n fontFamilyOptions: [\n ['Roboto', 'Roboto'],\n ['Open Sans', 'Open Sans'],\n ],\n};\n\nfunction MyEditor(): JSX.Element {\n return ;\n};\n\nexport default function PlaygroundApp(): JSX.Element {\n return (\n \n \n \n );\n}\n\n```\n### Theme overriding\nIt's recommended to replace built-in class names with your own:\n\n```tsx\nimport { Editor, EditorComposer, EditorThemeClasses } from '@drcpythonmfe/lexical-playground';\nimport '@drcpythonmfe/lexical-playground/editor.css';\nimport './myTheme.css';\n\nconst theme: EditorThemeClasses = {\n characterLimit: 'MyTheme__characterLimit',\n code: 'MyTheme__code',\n // ...\n};\n\nfunction MyEditor(): JSX.Element {\n return ;\n}\n\nexport default function PlaygroundApp(): JSX.Element {\n return (\n \n \n \n );\n}\n```\n### Uploading an image and returning a path\nBy default images are converted to data URLs.\n```tsx\n // ...\n const uploadImg = async (file: File, altText: string) => {\n // process the file\n return urlOfImage;\n }\n return (\n \n );\n```\n\n### Getting an access to the lexical editor's instance\n```tsx\nfunction MyEditor(): JSX.Element {\n const [editor] = useLexicalComposerContext();\n\n return (\n \n );\n}\n\nexport default function PlaygroundApp(): JSX.Element {\n return (\n \n \n \n );\n}\n```\n\n### Showing exported HTML w/o loading the entire editor\nThe only thing that's needed to display HTML that lexical generated is to import `theme.css`.\n\n```tsx\nimport '@drcpythonmfe/lexical-playground/theme.css'; // or import your own theme styles\n\nexport default function PlaygroundApp({ html }: { html: string }): JSX.Element {\n return (\n
\n );\n}\n```\n\n### SSR\nAt this point the editor does not support SSR and needs to be loaded on the client.\n#### Next.js\n```tsx\nimport type { NextPage } from 'next'\nimport dynamic from 'next/dynamic'\n\nconst MyEditor = dynamic(() => import('./path-to-my-editor-that-loads-lexical-playground'), {\n ssr: false,\n})\n\nconst MyPage: NextPage = () => {\n return (\n \n )\n}\n\nexport default MyPage\n```\n\n### Using optional plugins\nSome plugins like `excalidraw` and `equation` are optional, and need to be manually activated:\n\n```tsx\n// ...\nimport {excalidrawExt} from '@drcpythonmfe/lexical-playground/ext/excalidraw';\nimport '@drcpythonmfe/lexical-playground/ext/excalidraw.css';\nimport {equationExt} from '@drcpythonmfe/lexical-playground/ext/equation';\nimport '@drcpythonmfe/lexical-playground/ext/equation.css';\n\nfunction MyEditor(): JSX.Element {\n return (\n \n );\n}\n\nconst extensions = [equationExt, excalidrawExt];\n\nexport default function PlaygroundApp(): JSX.Element {\n return (\n \n \n \n );\n}\n```\n","readmeFilename":"README.md"}