docs, release prep; add isRemoteChange to widgets;

elbakerino · elbakerino · commit 86162bba405b · 2025-06-28T23:20:44.000+02:00
diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
@@ -1,8 +1,11 @@
 blank_issues_enabled: true
 contact_links:
-    -   name: UI-Schema Slack
-        url: https://join.slack.com/t/ui-schema/shared_invite/zt-smbsybk5-dFIRLEPCJerzDwtycaA71w
-        about: Ask questions and discuss in our Slack Community
-    -   name: Material-UI
+    -   name: UI-Schema Discord
+        url: https://discord.gg/MAjgpwnm36
+        about: Ask questions and discuss in our Discord Community
+    -   name: CodeMirror GitHub
+        url: https://github.com/codemirror
+        about: "More about the underlying editor framework."
+    -   name: Material-UI GitHub
         url: https://github.com/mui-org/material-ui
-        about: "When you got question not about the design-system bindings: docs + project of **Material-UI**"
+        about: "Documentation and more for the design framework."
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -4,8 +4,8 @@
 2. Install dependencies (like lerna, webpack): `npm i`
 3. Start dev-server: `npm start`
     - (will clean-dist + start demo app)
-4. Open browser on [localhost:4200](http://localhost:4203) for demo
-5. Explore [packages](packages)
+4. Open browser on [localhost:4203](http://localhost:4203) for demo
+5. Explore [packages](packages) and there [demo/src/pages](packages/demo/src/pages)
 6. Code -> Commit -> Pull Request -> Being Awesome!
 
 Changes from any package are reflected inside the demo package.
@@ -19,9 +19,7 @@ Changes from any package are reflected inside the demo package.
         - with `--testPathPattern` to run all tests in a specific folder / path
         - `npm run tdd -- --testPathPattern=PatternValidator -t patternValidator` for only one test and often only one file
 - Testing: `npm test`
-    - needs manual bootstrapping, linking and update handling
 - Build: `npm run build`
-    - needs manual bootstrapping and update handling
 - Clean node_modules and build dirs: `npm run clean`
 - Clean build dirs: `npm run clean-dist`
 
diff --git a/docs/Index.md b/docs/Index.md
@@ -0,0 +1,4 @@
+# Documentation
+
+- [kit-codemirror](./kit-codemirror/kit-codemirror.md)
+- [material-code](./material-code/material-code.md)
diff --git a/docs/kit-codemirror/kit-codemirror.md b/docs/kit-codemirror/kit-codemirror.md
@@ -16,11 +16,11 @@ Contains only the minimal necessities for CodeMirror to work in ReactJS, nothing
 
 > [!CAUTION]
 >
-> It is important to only supply safely referenced props! Always use `useMemo`/`useCallback` and so on for extensions, function and other complex values.
+> It is important to only supply safely referenced props! Always use e.g. `useMemo`/`useCallback` for extensions, function and other complex values.
 >
 > Otherwise, the editors extension are unnecessarily destroyed and will cause significant performance degradation or even subtle bugs.
 >
-> For granular control of reactive extension reconfiguration, use the `useCodeMirror` and `useExtension` hooks, check the [`CodeMirror` base component](https://github.com/ui-schema/react-codemirror/blob/main/packages/kit-codemirror/src/CodeMirror/CodeMirror.tsx) as reference.
+> 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.
 
 ## Components
 
@@ -32,13 +32,13 @@ Check the `CustomCodeMirror` in [`demo/src/pages/PageDemoComponent.tsx`](../../p
 
 ### useCodeMirror
 
-The `useCodeMirror` hook is used by the `CodeMirror` component and can be used to built more advanced customizations easily.
+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.
 
-Check the [`CodeMirror` component  as an example](../../packages/kit-codemirror/src/CodeMirror/CodeMirror.tsx).
+Check the [`CodeMirror` component as an example](../../packages/kit-codemirror/src/CodeMirror/CodeMirror.tsx).
 
 ### useExtension
 
-The `useExtension` hook allows to define a setup function, which returns a configured CodeMirror extension.
+The `useExtension` hook sets up a codemirror extension, with easy reactive reconfiguration.
 
 > [!IMPORTANT]
 >
@@ -50,7 +50,7 @@ The `useExtension` hook allows to define a setup function, which returns a confi
 
 It automatically enables the extension and reconfigures it whenever the setup function changes. Always use `useCallback` for the setup function to prevent unnecessary reconfigurations.
 
-The extension is added to the end of the editors configuration, to control the order use the `Prec` to set the precedence.
+The extension is added to the end of the editors configuration, to control the order use `Prec` to set the precedence.
 
 ```tsx
 import { Prec } from '@codemirror/state'
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/kit-codemirror/README.md b/packages/kit-codemirror/README.md
@@ -2,7 +2,8 @@
 
 Thin-wrapper for CodeMirror v6 to use as React Component, with hooks and stuff to build more advanced editors easily.
 
-- [Documentation, Examples](https://ui-schema.bemit.codes/docs/kit-codemirror/kit-codemirror)
+- [Documentation](https://github.com/ui-schema/react-codemirror/blob/main/docs)
+- [Demo](https://github.com/ui-schema/react-codemirror/blob/main/packages/demo/src/pages/PageDemoComponent.tsx)
 - [Repository](https://github.com/ui-schema/react-codemirror)
 
 ## License
diff --git a/packages/kit-codemirror/package.json b/packages/kit-codemirror/package.json
@@ -62,6 +62,7 @@
         "react-dom": "^17.0 || ^18.0 || ^19.0"
     },
     "publishConfig": {
-        "access": "public"
+        "access": "public",
+        "tag": "next"
     }
 }
diff --git a/packages/material-code/README.md b/packages/material-code/README.md
@@ -4,7 +4,7 @@ Code Editor (codemirror) to work with [@ui-schema/ui-schema](https://github.com/
 
 [![Documentation](https://img.shields.io/badge/Component%20Documentation-blue?labelColor=fff&style=for-the-badge&logo=data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzIgMzIiIGhlaWdodD0iMzJweCIgaWQ9InN2ZzIiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDMyIDMyIiB3aWR0aD0iMzJweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zOnNvZGlwb2RpPSJodHRwOi8vc29kaXBvZGkuc291cmNlZm9yZ2UubmV0L0RURC9zb2RpcG9kaS0wLmR0ZCIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgaWQ9ImJhY2tncm91bmQiPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iMzIiIHdpZHRoPSIzMi4wMDEiLz48L2c+PGcgaWQ9ImJvb2tfeDVGX3RleHRfeDVGX3NldHRpbmdzIj48cGF0aCBkPSJNMzIsMjMuMDAxYzAtMy45MTctMi41MDYtNy4yNC01Ljk5OC04LjQ3N1Y0aC0yVjEuOTk5aDJWMGgtMjNDMi45MTgsMC4wMDQsMi4yOTQtMC4wMDgsMS41NTYsMC4zNTQgICBDMC44MDgsMC42ODYtMC4wMzQsMS42NDUsMC4wMDEsM2MwLDAuMDA2LDAuMDAxLDAuMDEyLDAuMDAxLDAuMDE4VjMwYzAsMiwyLDIsMiwyaDIxLjA4MWwtMC4wMDctMC4wMDQgICBDMjguMDEzLDMxLjk1NSwzMiwyNy45NDYsMzIsMjMuMDAxeiBNMi44NTMsMy45ODFDMi42NzUsMy45NTUsMi40MTgsMy44NjksMi4yNzQsMy43NDNDMi4xMzYsMy42MDksMi4wMTcsMy41LDIuMDAyLDMgICBjMC4wMzMtMC42NDYsMC4xOTQtMC42ODYsMC40NDctMC44NTZjMC4xMy0wLjA2NSwwLjI4OS0wLjEwNywwLjQwNC0wLjEyNUMyLjk3LDEuOTk3LDMsMi4wMDUsMy4wMDIsMS45OTloMTlWNGgtMTkgICBDMyw0LDIuOTcsNC4wMDIsMi44NTMsMy45ODF6IE00LDMwVjZoMjB2OC4wNkMyMy42NzEsMTQuMDIzLDIzLjMzNywxNCwyMi45OTgsMTRjLTIuMTQyLDAtNC4xMDYsMC43NTEtNS42NTEsMkg2djJoOS41MTYgICBjLTAuNDEzLDAuNjE2LTAuNzQzLDEuMjg5LTAuOTk1LDJINnYyaDguMDU3Yy0wLjAzNiwwLjMyOS0wLjA1OSwwLjY2Mi0wLjA1OSwxLjAwMWMwLDIuODI5LDEuMzA3LDUuMzUsMy4zNDgsNi45OTlINHogTTIzLDMwICAgYy0zLjg2NS0wLjAwOC02Ljk5NC0zLjEzNS03LTYuOTk5YzAuMDA2LTMuODY1LDMuMTM1LTYuOTk1LDctN2MzLjg2NSwwLjAwNiw2Ljk5MiwzLjEzNSw3LDdDMjkuOTkyLDI2Ljg2NSwyNi44NjUsMjkuOTkyLDIzLDMweiAgICBNMjIsMTJINnYyaDE2VjEyeiIvPjxwYXRoIGQ9Ik0yOCwyNHYtMi4wMDFoLTEuNjYzYy0wLjA2My0wLjIxMi0wLjE0NS0wLjQxMy0wLjI0NS0wLjYwNmwxLjE4Ny0xLjE4N2wtMS40MTYtMS40MTVsLTEuMTY1LDEuMTY2ICAgYy0wLjIyLTAuMTIzLTAuNDUyLTAuMjIxLTAuNjk3LTAuMjk0VjE4aC0ydjEuNjYyYy0wLjIyOSwwLjA2OC0wLjQ0NiwwLjE1OC0wLjY1MiwwLjI3bC0xLjE0MS0xLjE0bC0xLjQxNSwxLjQxNWwxLjE0LDEuMTQgICBjLTAuMTEyLDAuMjA3LTAuMjAyLDAuNDI0LTAuMjcxLDAuNjUzSDE4djJoMS42NjJjMC4wNzMsMC4yNDYsMC4xNzIsMC40NzksMC4yOTUsMC42OThsLTEuMTY1LDEuMTYzbDEuNDEzLDEuNDE2bDEuMTg4LTEuMTg3ICAgYzAuMTkyLDAuMTAxLDAuMzk0LDAuMTgyLDAuNjA1LDAuMjQ1VjI4SDI0di0xLjY2NWMwLjIyOS0wLjA2OCwwLjQ0NS0wLjE1OCwwLjY1MS0wLjI3bDEuMjEyLDEuMjEybDEuNDE0LTEuNDE2bC0xLjIxMi0xLjIxICAgYzAuMTExLTAuMjA2LDAuMjAxLTAuNDIzLDAuMjctMC42NTFIMjh6IE0yMi45OTksMjQuNDk5Yy0wLjgyOS0wLjAwMi0xLjQ5OC0wLjY3MS0xLjUwMS0xLjVjMC4wMDMtMC44MjksMC42NzItMS40OTgsMS41MDEtMS41MDEgICBjMC44MjksMC4wMDMsMS40OTgsMC42NzIsMS41LDEuNTAxQzI0LjQ5NywyMy44MjgsMjMuODI4LDI0LjQ5NywyMi45OTksMjQuNDk5eiIvPjwvZz48L3N2Zz4=)](https://ui-schema.bemit.codes/docs/material-code/material-code)
 
-[![Join UI-Schema on Slack](https://img.shields.io/badge/Join%20UI%20Schema%20on%20Slack-blue?labelColor=fff&logoColor=505050&color=7B16FF&style=for-the-badge&logo=slack)](https://join.slack.com/t/ui-schema/shared_invite/zt-smbsybk5-dFIRLEPCJerzDwtycaA71w)
+[![Join UI-Schema on Discord](https://img.shields.io/badge/Join%20UI%20Schema%20on%20Discord-blue?labelColor=fff&logoColor=505050&color=7B16FF&style=for-the-badge&logo=discord)](https://discord.gg/MAjgpwnm36)
 
 Supports:
 
diff --git a/packages/material-code/package.json b/packages/material-code/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@ui-schema/material-code",
-    "version": "0.4.7",
+    "version": "0.5.0-alpha.0",
     "description": "Code editor widgets using CodeMirror, with Material-UI styling for UI-Schema",
     "homepage": "https://ui-schema.bemit.codes/docs/material-code/material-code",
     "author": {
@@ -60,7 +60,7 @@
     },
     "peerDependencies": {
         "@mui/material": "^5.1 || ^6.1",
-        "@mui/icons-material": "^6.1",
+        "@mui/icons-material": "^5.10 || ^6.1",
         "@codemirror/state": "^6.0.0",
         "@codemirror/view": "^6.0.0",
         "@codemirror/language": "^6.1.0",
@@ -71,6 +71,7 @@
         "react": "^17.0 || ^18.0 || ^19.0"
     },
     "publishConfig": {
-        "access": "public"
+        "access": "public",
+        "tag": "next"
     }
 }
diff --git a/packages/material-code/src/WidgetCode/WidgetCode.tsx b/packages/material-code/src/WidgetCode/WidgetCode.tsx
@@ -1,3 +1,4 @@
+import { isRemoteChange } from '@ui-schema/kit-codemirror/isRemoteChange'
 import React from 'react'
 import { WithScalarValue } from '@ui-schema/ui-schema/UIStore'
 import { WidgetProps } from '@ui-schema/ui-schema/Widget'
@@ -39,8 +40,11 @@ export const WidgetCode: React.ComponentType<WidgetProps & WithScalarValue & Wid
         CodeBar: CustomCodeBar,
     },
 ) => {
-    const handleOnChange: CodeMirrorOnChange = React.useCallback((v, newValue) => {
-        if(!v.docChanged || typeof newValue !== 'string') {
+    const handleOnChange: CodeMirrorOnChange = React.useCallback((update, newValue) => {
+        if(!update.docChanged || typeof newValue !== 'string') {
+            return
+        }
+        if(isRemoteChange(update)) {
             return
         }
         onChange({
diff --git a/packages/material-code/src/WidgetCodeSelectable/WidgetCodeSelectable.tsx b/packages/material-code/src/WidgetCodeSelectable/WidgetCodeSelectable.tsx
@@ -1,3 +1,4 @@
+import { isRemoteChange } from '@ui-schema/kit-codemirror/isRemoteChange'
 import React from 'react'
 import { StoreKeyType, WithScalarValue } from '@ui-schema/ui-schema/UIStore'
 import { WidgetProps } from '@ui-schema/ui-schema/Widget'
@@ -36,8 +37,11 @@ export const WidgetCodeSelectable: React.ComponentType<WidgetProps & WithScalarV
         CodeBar: CustomCodeBar,
     },
 ) => {
-    const handleOnChange: CodeMirrorOnChange = React.useCallback((editor, newValue) => {
-        if(!editor.docChanged || typeof newValue !== 'string') {
+    const handleOnChange: CodeMirrorOnChange = React.useCallback((update, newValue) => {
+        if(!update.docChanged || typeof newValue !== 'string') {
+            return
+        }
+        if(isRemoteChange(update)) {
             return
         }
         onChange({
diff --git a/publish.sh b/publish.sh
@@ -4,9 +4,6 @@ echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" >.npmrc
 
 echo "Token length: ${#NPM_TOKEN}"
 
-# todo: not manual resetting the file here
-git checkout -- packages/webpackPartialConfig.js
-
 cd ./packages
 
 cd kit-codemirror

Original file line number	Diff line number	Diff line change
`@@ -62,6 +62,7 @@`
`62`	`62`	`"react-dom": "^17.0 \|\| ^18.0 \|\| ^19.0"`
`63`	`63`	`},`
`64`	`64`	`"publishConfig": {`
`65`		`- "access": "public"`
	`65`	`+ "access": "public",`
	`66`	`+ "tag": "next"`
`66`	`67`	`}`
`67`	`68`	`}`