You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
5. Open browser on [localhost:4200](http://localhost:4203) for demo
9
-
6. Explore [packages](packages)
10
-
7. Code -> Commit -> Pull Request -> Being Awesome!
7
+
4. Open browser on [localhost:4203](http://localhost:4203) for demo
8
+
5. Explore [packages](packages) and there [demo/src/pages](packages/demo/src/pages)
9
+
6. Code -> Commit -> Pull Request -> Being Awesome!
11
10
12
11
Changes from any package are reflected inside the demo package.
13
12
@@ -20,22 +19,12 @@ Changes from any package are reflected inside the demo package.
20
19
- with `--testPathPattern` to run all tests in a specific folder / path
21
20
-`npm run tdd -- --testPathPattern=PatternValidator -t patternValidator` for only one test and often only one file
22
21
- Testing: `npm test`
23
-
- needs manual bootstrapping, linking and update handling
24
22
- Build: `npm run build`
25
-
- needs manual bootstrapping and update handling
26
23
- Clean node_modules and build dirs: `npm run clean`
27
24
- Clean build dirs: `npm run clean-dist`
28
-
- Add new node_module to one package: `lerna add <npm-package-name> --scope=@ui-schema/demo [--dev] [--peer]`, without `--scope` in all packages
29
-
- Do not change `package.json` of packages manually, and if Bootstrap [lerna](https://lerna.js.org/): `npm run bootstrap` (maybe delete `package-lock.json`), or simply open an issue
30
-
- Add new package `lerna create <name>` and follow on screen, e.g.: `lerna create material-pickers` add package name `@ui-schema/material-pickerss`, creates folder `./packages/material-pickers`
31
-
32
-
> All-in-one clean & reinstall command - skip the first one if not installed completely:
33
-
> `npm run clean && rm -rf node_modules && rm -f package-lock.json && npm i && npm run bootstrap && npm run bootstrap && npm run link`
34
-
>
35
-
> The two-times `bootstrap` fixes sometimes stale `packages` dependencies/lock-files, but sometimes a manual deletion of those also helps with `node_modules` resolving issues.
36
25
37
26
## Contributors
38
27
39
28
By committing your code/creating a pull request to this repository you agree to release the code under the [MIT License](LICENSE) attached to the repository and to adhere to the [CODE_OF_CONDUCT](CODE_OF_CONDUCT.md).
40
29
41
-
Questions? Feel free to open discussions or join the [slack channel](https://join.slack.com/t/ui-schema/shared_invite/zt-smbsybk5-dFIRLEPCJerzDwtycaA71w)!
30
+
Questions? Feel free to open discussions or join the [discord channel](https://discord.gg/MAjgpwnm36)!
# doesn't require any other module of `@ui-schema`
9
+
```
10
+
11
+
Contains only the minimal necessities for CodeMirror to work in ReactJS, nothing more.
12
+
13
+
- supports `value` as string
14
+
- bind state changes with `onChange` - or omit it for a **read only editor**
15
+
- add native CodeMirror extensions with props
16
+
17
+
> [!CAUTION]
18
+
>
19
+
> It is important to only supply safely referenced props! Always use e.g. `useMemo`/`useCallback` for extensions, function and other complex values.
20
+
>
21
+
> Otherwise, the editors extension are unnecessarily destroyed and will cause significant performance degradation or even subtle bugs.
22
+
>
23
+
> For granular control of reactive extension reconfiguration, use the `useCodeMirror` and `useExtension` hooks, check the [`CodeMirror` base component](../../packages/kit-codemirror/src/CodeMirror/CodeMirror.tsx) as reference.
24
+
25
+
## Components
26
+
27
+
The `CodeMirror` component serves as read-to-use ReactJS integration.
28
+
29
+
Check the `CustomCodeMirror` in [`demo/src/pages/PageDemoComponent.tsx`](../../packages/demo/src/pages/PageDemoComponent.tsx) for an example.
30
+
31
+
## Hooks
32
+
33
+
### useCodeMirror
34
+
35
+
Create a custom editor component with the `useCodeMirror` hook, it is internally used by the `CodeMirror` component. With it, you have more control on extension setup and customization of the container the editor is rendered in.
36
+
37
+
Check the [`CodeMirror` component as an example](../../packages/kit-codemirror/src/CodeMirror/CodeMirror.tsx).
38
+
39
+
### useExtension
40
+
41
+
The `useExtension` hook sets up a codemirror extension, with easy reactive reconfiguration.
42
+
43
+
> [!IMPORTANT]
44
+
>
45
+
> The `useExtension` hook can only be used when using the `useCodeMirror` hook, not with the `CodeMirror` component.
46
+
47
+
> [!IMPORTANT]
48
+
>
49
+
> The `useExtension` hook must be positioned directly after the `useCodeMirror` hook, it can not be used in parent components.
50
+
51
+
It automatically enables the extension and reconfigures it whenever the setup function changes. Always use `useCallback` for the setup function to prevent unnecessary reconfigurations.
52
+
53
+
The extension is added to the end of the editors configuration, to control the order use `Prec` to set the precedence.
0 commit comments