{"id":24460947,"url":"https://github.com/talljack/monaco-editor-component","last_synced_at":"2025-04-13T05:36:07.052Z","repository":{"id":207706200,"uuid":"719409350","full_name":"Talljack/monaco-editor-component","owner":"Talljack","description":"Monaco Editor and DiffEditor, support Vue and React","archived":false,"fork":false,"pushed_at":"2025-03-26T15:34:17.000Z","size":1857,"stargazers_count":4,"open_issues_count":9,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-26T22:12:12.016Z","etag":null,"topics":["component-library","editor","monaco-editor","react","tailwindcss","typescript","vue3"],"latest_commit_sha":null,"homepage":"https://monaco-editor-component-7nv99s5um-talljack.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Talljack.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-16T05:16:06.000Z","updated_at":"2025-03-11T01:33:29.000Z","dependencies_parsed_at":"2023-11-23T15:29:50.506Z","dependency_job_id":"7b4fb0a9-695e-4c42-9b69-8292a16f5ffe","html_url":"https://github.com/Talljack/monaco-editor-component","commit_stats":null,"previous_names":["talljack/react-monaco-editor","talljack/monaco-editor-component"],"tags_count":4,"template":false,"template_full_name":"Talljack/starter-ts-lib","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Talljack%2Fmonaco-editor-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Talljack%2Fmonaco-editor-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Talljack%2Fmonaco-editor-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Talljack%2Fmonaco-editor-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Talljack","download_url":"https://codeload.github.com/Talljack/monaco-editor-component/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248670507,"owners_count":21142897,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component-library","editor","monaco-editor","react","tailwindcss","typescript","vue3"],"created_at":"2025-01-21T04:16:35.122Z","updated_at":"2025-04-13T05:36:07.028Z","avatar_url":"https://github.com/Talljack.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003emonaco-editor-component\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n\nWeb component based on [Monaco Editor](https://github.com/Microsoft/monaco-editor). Support Vue and React.\n\n[![NPM downloads](https://img.shields.io/npm/dm/monaco-editor-component?style=flat\u0026label=\u0026color=cb3837\u0026labelColor=cb0000\u0026logo=npm)](https://www.npmjs.com/package/monaco-editor-component)\n\n\u003c/div\u003e\n\n## Installation\n\n```bash\n[npm|yarn|pnpm] install monaco-editor-component\n\nOR\n\nbun install monaco-editor-component\n```\n\n## Usage\n\n### React\n\nYou can see the [demo](https://github.com/Talljack/monaco-editor-component/tree/main/demoPkg/react) details.\n\n```tsx\n// App.tsx\nimport { useState } from 'react'\nimport { MonacoDiffEditor, MonacoEditor } from 'monaco-editor-component/react'\nimport { createRoot } from 'react-dom/client'\n\n// main.tsx\n/**\n *\n */\nfunction App() {\n  const [code, setCode] = useState('console.log(\"Hello World\")')\n\n  return (\n    \u003cdiv\u003e\n      \u003cMonacoEditor language=\"javascript\" value={code} width=\"300\" height=\"500\" onChange={value =\u003e setCode(value)} /\u003e\n      \u003cMonacoDiffEditor language=\"javascript\" originalValue=\"const a = 123;\" value={code} onChange={value =\u003e setCode(value)} /\u003e\n    \u003c/div\u003e\n  )\n}\nconst app = document.getElementById('root')\ncreateRoot(app).render(\u003cApp /\u003e)\n```\n\n### Vue(3+)\n\nYou can see the [demo](https://github.com/Talljack/monaco-editor-component/tree/main/demoPkg/vue) details.\n\n```vue\n// App.vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { ref } from 'vue'\nimport { MonacoEditor, MonacoDiffEditor } from 'monaco-editor-component/vue'\n\nconst input = ref('const a = 12356;')\n\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cMonacoEditor v-model:value=\"input\" language='javascript' width='300' height='500'  /\u003e\n    \u003cMonacoDiffEditor language='javascript' originalValue='const a = 123;' v-model:value='input' /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n```tsx\n// main.ts\nimport App from './App.vue'\n\nconst app = document.getElementById('root')\ncreateApp(app).render(\u003cApp /\u003e)\n```\n\n## Props\n\n### MonacoEditor\n\n| Name                | Type                                                                | Default    | Description                                                                                |\n| ------------------- | ------------------------------------------------------------------- | ---------- | ------------------------------------------------------------------------------------------ |\n| language            | string                                                              | javascript | The language of the editor.                                                                |\n| value               | string                                                              | null       | The value of the auto created model in the editor.                                         |\n| defaultValue        | string                                                              | \"\"         | The default value of the auto created model in the editor.                                 |\n| theme               | string                                                              | vs-dark    | The theme of the editor.                                                                   |\n| options             | MonacoEditorOptions                                                 | {}         | The options of the editor.                                                                 |\n| onChange            | (value: string, e: monaco.editor.IModelContentChangedEvent) =\u003e void | noop       | An event emitted when the content of the current model has changed.                        |\n| width               | string \\| number                                                    | 100%       | The width of the editor.                                                                   |\n| height              | string \\| number                                                    | 100%       | The height of the editor.                                                                  |\n| className           | string                                                              | \"\"         | The class name of the editor.                                                              |\n| style               | React.CSSProperties                                                 | {}         | The style of the editor.                                                                   |\n| onEditorDidMount    | (editor: MonacoCodeEditor, monaco: Monaco) =\u003e void                  | noop       | An event emitted when the editor has been mounted (similar to componentDidMount of React). |\n| onEditorWillMount   | (monaco: Monaco) =\u003e void                                            | noop       | An event emitted before the editor mounted (similar to componentWillMount of React).       |\n| onEditorWillUnmount | (editor: MonacoCodeEditor, monaco: Monaco) =\u003e void                  | noop       | An event emitted when the editor will unmount (similar to componentWillUnmount of React).  |\n| modelUri            | (monaco: Monaco) =\u003e monaco.Uri                                      | undefined  | The uri of the model.                                                                      |\n\nFor more **options** see [monaco-editor](https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.IStandaloneEditorConstructionOptions.html)\n\n### MonacoDiffEditor\n\nMonacoDiffEditor is a diff editor.\n\n**MonacoDiffEditor extends MonacoEditor, so it has all the props of MonacoEditor but excludes the `modelUri` prop.**\n\n| Name          | Type                           | Default   | Description                                                                      |\n| ------------- | ------------------------------ | --------- | -------------------------------------------------------------------------------- |\n| originalValue | string                         | \"\"        | The original value of the auto created model in the editor, is a base value.     |\n| originalUri   | (monaco: Monaco) =\u003e monaco.Uri | undefined | The uri of the original model.                                                   |\n| modifiedUri   | (monaco: Monaco) =\u003e monaco.Uri | undefined | The uri of the modified model.                                                   |\n| value         | string                         | null      | The modified value of the auto created model in the editor, is a modified value. |\n\n### Use Editor Instance\n\n```typescript\n// react\nimport { useRef } from 'react'\nimport type { MonacoEditorRef } from 'monaco-editor-component'\nconst editorRef = useRef\u003cMonacoEditorRef\u003e(null)\n\n// vue\nimport { ref } from 'vue'\nconst monacoEditor = ref\u003cMonacoCodeEditor | null\u003e(null)\nconst updateMonacoEditor = (editor: MonacoCodeEditor, monaco: Monaco) =\u003e {\n  monacoEditor.value = editor\n}\n\u003ctemplate\u003e\n  \u003cMonacoEditor v-model:value=\"input\" :onEditorDidMount=\"updateMonacoEditor\" /\u003e\n\u003c/template\u003e\n\n// usage\nconst model = editorRef.current.editor.current.getModel()\n\nOR\n\nconst model = monacoEditor.value.getModel()\n```\n\n### Integrating the ESM version of the Monaco Editor\n\nFor Vite, you only need to implement the `getWorker` function (NOT the `getWorkerUrl`) to use Vite's output.\n\nOthers like Webpack see [monaco-editor worker](https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md)\n\n```typescript\n// Vite\n// worker.ts file\nimport * as monaco from 'monaco-editor'\nimport editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'\nimport cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'\nimport htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'\nimport jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'\nimport tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'\n\n// App.tsx\nimport { MonacoEditor } from 'monaco-editor-component/react'\nimport './worker'\n\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-expect-error\nself.MonacoEnvironment = {\n  getWorker(_: unknown, label: string) {\n    if (label === 'json')\n      return new jsonWorker()\n\n    if (label === 'css' || label === 'scss' || label === 'less')\n      return new cssWorker()\n\n    if (label === 'html' || label === 'handlebars' || label === 'razor')\n      return new htmlWorker()\n\n    if (label === 'typescript' || label === 'javascript')\n      return new tsWorker()\n\n    return new editorWorker()\n  },\n}\n\n// usage of MonacoEditor...\n```\n\nVue usage is similar to React (when you use Vite).\n\n## License\n\nMIT License\n\nCopyright (c) 2023 Yugang Cao, see the [LICENSE](LICENSE) details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftalljack%2Fmonaco-editor-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftalljack%2Fmonaco-editor-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftalljack%2Fmonaco-editor-component/lists"}