Support snippet/code param in Rzk playground #118
Conversation
fizruk
force-pushed
the
playground-snippet-code-params
branch
from
9fe9a17
to
9e2a710
Compare
|
LGTM because I'm not a true typescripter. @aabounegm, what do you think? This PR provides initialization of the editor content from a url. |
| @@ -19,12 +19,20 @@ export default function Editor({ | |||
| editorHeight: number | |||
| }) { | |||
| const [existsSelection, setExistsSelection] = useState(false) | |||
| const params = new URLSearchParams(window.location.search); | |||
There was a problem hiding this comment.
Since this is a Next.js (not normal React.js) project, window should not be used outside useEffect since it is not available during SSR. I can see that the whole project is wrapped in next/dynamic so it shouldn't be an issue in this specific situation, but that's not a good practice in general.
I wonder why you didn't just use the Vite template for React since we don't need any Next.js features.
| var snippet = example | ||
| if (params.has("snippet")) { | ||
| snippet = params.get("snippet")!; | ||
| } else if (params.has("code")) { | ||
| snippet = params.get("code")!; | ||
| } |
There was a problem hiding this comment.
First, always use let instead of var. Second, I would simplify it to avoid the intermediate variable as such:
| var snippet = example | |
| if (params.has("snippet")) { | |
| snippet = params.get("snippet")!; | |
| } else if (params.has("code")) { | |
| snippet = params.get("code")!; | |
| } | |
| if (params.has("snippet")) { | |
| setText(params.get("snippet")!); | |
| } else if (params.has("code")) { | |
| setText(params.get("code")!); | |
| } else { | |
| setText(example); | |
| } |
preferable inside the same useEffect in which params should be defined.
Then you would also not need setText(snippet) inside onCreateEditor.
This might not be an optimal implementation. @deemp feel free to improve later.