HeadingToolBar buttons with getPluginType() stopped working

[joneakira]

I'm developing a text editor for a company and the HeadingToolBar buttons stopped working. hotkeys and plugins still working on editor but the HeadingToolBar buttons don't work anymore. This start after I checkout to another branch(yeah. I have commited before checkout) of my project and when I came back to this branch the toolbar stopped working. Only 2 buttons work: Indent and outdent that uses getPreventDefault(). any other that uses getPluginType() has stopped.

When onMouseDown is triggered it actually console.log the editor so I don't think the problem is in editor or plugins.

here's some screenshots of what i've done...

I'm 3 days late and still have no idea what is going on. please someone help me ;-;

[zbeyens]

Which slate versions are you using? Could you try with < 0.80.0?

[joneakira]

{
"name": "iged-desktop-web",
"version": "0.1.0",
"private": true,
"dependencies": {
"@chakra-ui/icons": "^1.1.1",
"@chakra-ui/react": "^1.7.4",
"@craco/craco": "^6.4.3",
"@emotion/react": "^11",
"@emotion/styled": "^11",
"@hookform/resolvers": "^2.8.8",
"@react-keycloak/web": "^3.4.0",
"@types/node": "^16.11.20",
"@types/react": "^17.0.38",
"@types/react-router-dom": "^5.3.3",
"@udecode/plate": "^13.5.0",
"@udecode/plate-juice": "^13.5.0",
"@udecode/plate-ui-excalidraw": "^13.5.0",
"axios": "^0.25.0",
"buffer": "^6.0.3",
"cpf-cnpj-validator": "^1.0.3",
"crypto-browserify": "^3.12.0",
"date-fns": "^2.28.0",
"draft-js": "^0.11.7",
"draftjs-to-html": "^0.9.1",
"filer": "^1.4.1",
"framer-motion": "^6.3.4",
"keycloak-js": "^16.1.1",
"path": "^0.12.7",
"react": "16.10.2",
"react-alert": "^7.0.3",
"react-dnd": "^16.0.1",
"react-dnd-html5-backend": "^16.0.1",
"react-dom": "^18.2.0",
"react-hook-form": "7.22.5",
"react-icons": "^4.3.1",
"react-imask": "^6.4.1-alpha.0",
"react-query": "^3.34.12",
"react-redux": "^8.0.2",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"react-stomp-hooks": "^2.0.2",
"react-virtualized": "^9.22.3",
"shortid": "^2.2.16",
"slate": "^0.81.1",
"slate-history": "^0.66.0",
"slate-hyperscript": "^0.77.0",
"slate-react": "^0.81.0",
"stream": "^0.0.2",
"styled-components": "^5.3.5",
"tiff.js": "^1.0.0",
"tippy.js": "^6.3.7",
"twin.macro": "^2.8.2",
"web-vitals": "^2.1.3",
"yup": "^0.32.11"
},
"scripts": {
"start": "HOST=127.0.0.1 PORT=3000 craco start",
"build": "craco --max_old_space_size=2048 build",
"test": "craco test",
"eject": "craco eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"@types/axios": "^0.14.0",
"@types/date-fns": "^2.6.0",
"@types/draftjs-to-html": "^0.8.1",
"@types/jest": "^27.4.0",
"@types/nookies": "^2.0.3",
"@types/react-alert": "^5.2.1",
"@types/react-dom": "^18.0.5",
"@types/react-draft-wysiwyg": "^1.13.4",
"@types/react-input-mask": "^3.0.1",
"@types/react-query": "^1.2.9",
"@types/react-virtualized": "^9.21.16",
"@types/shortid": "^0.0.29",
"@types/styled-components": "^5.1.25",
"rollup-plugin-typescript2": "^0.32.1",
"tslib": "^2.4.0",
"typescript": "^4.7.4"
},
"homepage": "."
}

here's my package.json.
I downgraded to 0.79 and then this happened

and this shows up on browser console

[zbeyens]

Looks like you need to clean up node_modules and restart. Last time I've tried 0.80.0 I got that bug

[joneakira]

So... I found out that createDeserializeDocxPlugin + createJuicePlugin together are heaping javascript memory and making my headingtoolbar stop working(Actually only juiceplugin is consuming many memory, deserializerDocx don't work without it and when I try to use deserializerDocxPlugin without juiceplugin the heading toolbar broke). after I removing these plugins the bug stopped. There is any advise to use deserializerDocxPugin and juice plugin so I can use then without heaping my javascript memory?

[zbeyens]

This is working in that sandbox https://platejs.org so I'd assume the problem is somewhere else

[zbeyens]

You can now own the components from v22 #2472