all. I'm currently working on a React + Electron project, the project aims to complete a markdown editor. When I config the codemirror,
the program reported an error said, Uncaught Error: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.
The commented part will produce such error so I currently comment this part.
import { useEffect, useState, useRef } from "react"
import { EditorState } from '@codemirror/state'
import { EditorView, keymap, highlightActiveLine } from '@codemirror/view'
import { defaultKeymap } from '@codemirror/commands'
import { history, historyKeymap } from '@codemirror/history'
import { indentOnInput } from "@codemirror/language"
import { bracketMatching } from "@codemirror/matchbrackets"
import { lineNumbers, highlightActiveLineGutter } from "@codemirror/gutter"
import { defaultHighlightStyle } from "@codemirror/highlight"
import type React from "react"
interface Props {
initialDoc: string,
onChange?: (state: EditorState) => void
}
const useCodeMirror = <T extends Element>(
props: Props
): [React.MutableRefObject<T | null>, EditorView?] => {
const refContainer = useRef<T>(null)
const [editorView, setEditorView] = useState<EditorView>()
const { onChange } = props
useEffect(() => {
if (!refContainer.current) return
const startState = EditorState.create({
doc: props.initialDoc,
extensions: [
keymap.of([...defaultKeymap, ...historyKeymap]),
// lineNumbers(),
// highlightActiveLineGutter(),
// history(),
// indentOnInput(),
// bracketMatching(),
// defaultHighlightStyle.fallback,
highlightActiveLine(),
EditorView.lineWrapping,
EditorView.updateListener.of(update => {
if (update.changes) {
onChange && onChange(update.state)
}
})
]
})
const view = new EditorView({
state: startState,
parent: refContainer.current
})
setEditorView(view)
}, [refContainer])
return [refContainer, editorView]
}
export default useCodeMirror
Here is my package.json
{
"name": "vite-electron-builder",
"description": "Secure boilerplate for Electron app based on Vite",
"private": true,
"author": {
"email": "kozackunisoft@gmail.com",
"name": "Alex Kozack",
"url": "https://kozack.me"
},
"main": "packages/main/dist/index.cjs",
"scripts": {
"build": "npm run build:main && npm run build:preload && npm run build:renderer",
"build:main": "cd ./packages/main && vite build",
"build:preload": "cd ./packages/preload && vite build",
"build:renderer": "cd ./packages/renderer && vite build",
"compile": "cross-env MODE=production npm run build && electron-builder build --config .electron-builder.config.js --dir --config.asar=false",
"test": "npm run test:main && npm run test:preload && npm run test:renderer && npm run test:e2e",
"test:e2e": "npm run build && vitest run",
"test:main": "vitest run -r packages/main --passWithNoTests",
"test:preload": "vitest run -r packages/preload --passWithNoTests",
"test:renderer": "vitest run -r packages/renderer --passWithNoTests",
"watch": "node scripts/watch.mjs",
"lint": "eslint . --ext js,mjs,cjs,ts,mts,cts,vue",
"typecheck:main": "tsc --noEmit -p packages/main/tsconfig.json",
"typecheck:preload": "tsc --noEmit -p packages/preload/tsconfig.json",
"typecheck": "npm run typecheck:main && npm run typecheck:preload && npm run typecheck:renderer",
"postinstall": "cross-env ELECTRON_RUN_AS_NODE=1 electron scripts/update-electron-vendors.mjs",
"format": "npx prettier --write \"**/*.{js,mjs,cjs,ts,mts,cts,vue,json}\""
},
"devDependencies": {
"@types/react": "^18.0.18",
"@types/react-dom": "^18.0.6",
"@typescript-eslint/eslint-plugin": "^5.36.2",
"@typescript-eslint/parser": "^5.36.2",
"@vue/test-utils": "2.0.2",
"cross-env": "7.0.3",
"electron": "20.1.1",
"electron-builder": "23.3.3",
"eslint": "^8.23.0",
"eslint-config-prettier": "^8.5.0",
"happy-dom": "6.0.4",
"nano-staged": "0.8.0",
"playwright": "1.25.1",
"simple-git-hooks": "2.8.0",
"typescript": "4.8.2",
"unplugin-auto-expose": "0.0.3",
"vite": "3.1.0",
"vitest": "0.23.1"
},
"dependencies": {
"@codemirror/commands": "^6.1.0",
"@codemirror/gutter": "^0.19.9",
"@codemirror/highlight": "^0.19.8",
"@codemirror/history": "^0.19.2",
"@codemirror/lang-javascript": "^6.0.2",
"@codemirror/language": "^6.2.1",
"@codemirror/matchbrackets": "^0.19.4",
"@codemirror/state": "^6.1.1",
"electron-updater": "5.2.1",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"resolutions": {
"@codemirror/highlight": "0.19.7",
"@codemirror/lang-javascript": "0.19.7",
"@codemirror/state": "0.19.9",
"@codemirror/view": "0.19.47"
}
}
This is the result of npm list @codemirror/state command shows,
vite-electron-builder@ /Users/scott/Desktop/Electron-editor
├─┬ @codemirror/commands@6.1.0
│ ├── @codemirror/state@6.1.1 deduped
│ └─┬ @codemirror/view@6.2.2
│ └── @codemirror/state@6.1.1 deduped
├─┬ @codemirror/gutter@0.19.9
│ ├─┬ @codemirror/rangeset@0.19.9
│ │ └── @codemirror/state@0.19.9
│ ├── @codemirror/state@0.19.9
│ └─┬ @codemirror/view@0.19.48
│ └── @codemirror/state@0.19.9 deduped
├─┬ @codemirror/highlight@0.19.8
│ ├─┬ @codemirror/language@0.19.10
│ │ └── @codemirror/state@0.19.9 deduped
│ ├── @codemirror/state@0.19.9
│ └─┬ @codemirror/view@0.19.48
│ └── @codemirror/state@0.19.9 deduped
├─┬ @codemirror/history@0.19.2
│ ├── @codemirror/state@0.19.9
│ └─┬ @codemirror/view@0.19.48
│ └── @codemirror/state@0.19.9 deduped
├─┬ @codemirror/lang-javascript@6.0.2
│ ├─┬ @codemirror/autocomplete@6.1.0
│ │ └── @codemirror/state@6.1.1 deduped
│ ├─┬ @codemirror/lint@6.0.0
│ │ └── @codemirror/state@6.1.1 deduped
│ └── @codemirror/state@6.1.1 deduped
├─┬ @codemirror/language@6.2.1
│ └── @codemirror/state@6.1.1 deduped
├─┬ @codemirror/matchbrackets@0.19.4
│ ├─┬ @codemirror/language@0.19.10
│ │ └── @codemirror/state@0.19.9 deduped
│ ├── @codemirror/state@0.19.9
│ └─┬ @codemirror/view@0.19.48
│ └── @codemirror/state@0.19.9 deduped
└── @codemirror/state@6.1.1
