# @hankliu/rc-mirror-editor > React easy to use mirror-editor component Latest version **0.0.2** (published 2024-04-18) · MIT license · 0 weekly downloads ## Install ```sh npm install @hankliu/rc-mirror-editor pnpm add @hankliu/rc-mirror-editor yarn add @hankliu/rc-mirror-editor bun add @hankliu/rc-mirror-editor ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.0.2 | | Published | 2024-04-18 | | First published | 2024-04-17 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 10 | | Unpacked size | 55.6 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 1 | | Maintainers | hank.liu | | Keywords | react, react-component, react-mirror-editor, mirror-editor | ## Links - npm: https://www.npmjs.com/package/@hankliu/rc-mirror-editor - Repository: https://git@github.com/hankliu62/rc-mirror-editor - Homepage: https://github.com/hankliu62/rc-mirror-editor - Issues: http://github.com/hankliu62/rc-mirror-editor/issues - npm.io page: https://npm.io/package/@hankliu/rc-mirror-editor ## Dependencies (10) - [classnames](https://npm.io/package/classnames.md) ^2.5.1 - [codemirror](https://npm.io/package/codemirror.md) ^6.0.1 - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.24.4 - [@codemirror/view](https://npm.io/package/@codemirror/view.md) ^6.26.3 - [@codemirror/state](https://npm.io/package/@codemirror/state.md) ^6.4.1 - [@codemirror/commands](https://npm.io/package/@codemirror/commands.md) ^6.3.3 - [@codemirror/theme-one-dark](https://npm.io/package/@codemirror/theme-one-dark.md) ^6.1.2 - [@uiw/codemirror-themes-all](https://npm.io/package/@uiw/codemirror-themes-all.md) ^4.21.25 - [@uiw/codemirror-extensions-langs](https://npm.io/package/@uiw/codemirror-extensions-langs.md) ^4.21.25 - [@uiw/codemirror-extensions-basic-setup](https://npm.io/package/@uiw/codemirror-extensions-basic-setup.md) ^4.21.25 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 0.0.2 (latest) — 2024-04-18 - 0.0.1 — 2024-04-17 ## README # @hankliu/rc-mirror-editor [![NPM version][npm-image]][npm-url] [![npm download][download-image]][download-url] [![build status][github-actions-image]][github-actions-url] [![Codecov][codecov-image]][codecov-url] [![bundle size][bundlephobia-image]][bundlephobia-url] [![dumi][dumi-image]][dumi-url] [npm-image]: http://img.shields.io/npm/v/rc-mirror-editor.svg?style=flat-square [npm-url]: https://www.npmjs.com/package/@hankliu/rc-mirror-editor [travis-image]: https://img.shields.io/travis/hankliu62/rc-mirror-editor/master?style=flat-square [github-actions-image]: https://github.com/hankliu62/rc-mirror-editor/workflows/CI/badge.svg [github-actions-url]: https://github.com/hankliu62/rc-mirror-editor/actions [codecov-image]: https://img.shields.io/codecov/c/github/hankliu62/rc-mirror-editor/master.svg?style=flat-square [codecov-url]: https://app.codecov.io/gh/hankliu62/rc-mirror-editor [download-image]: https://img.shields.io/npm/dm/@hankliu/rc-mirror-editor.svg?style=flat-square [download-url]: https://npmjs.org/package/@hankliu/rc-mirror-editor [bundlephobia-url]: https://bundlephobia.com/package/@hankliu/rc-mirror-editor [bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@hankliu/rc-mirror-editor [dumi-url]: https://github.com/umijs/dumi [dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square `Mirror Editor` 编辑器是功能齐全的代码编辑器，支持多种常规语言的IDE，允许配置支持智能提示。 ## 特征 - [x] 支持常见语言 - [x] 支持多种主题 ## 安装 ``` bash npm install @hankliu/rc-mirror-editor --save ``` or ``` bash yarn add @hankliu/rc-mirror-editor ``` or ``` bash pnpm install @hankliu/rc-mirror-editor ``` ## 使用 ``` tsx import type { LanguageName, TMirrorEditorTheme} from '@hankliu/rc-mirror-editor'; import MirrorEditor, { alls, langs } from '@hankliu/rc-mirror-editor'; import { Button, Checkbox, Col, ConfigProvider, Divider, Input, Row, Select } from '@hankliu/hankliu-ui'; import zhCN from '@hankliu/hankliu-ui/lib/locale/zh_CN' import * as React from 'react'; const LanguageDemo = { html: `

Turndown Demo

This demonstrates turndown – an HTML to Markdown converter in JavaScript.

Usage

var turndownService = new TurndownService()
  console.log(
    turndownService.turndown('<h1>Hello world</h1>')
  )

It aims to be CommonMark compliant, and includes options to style the output. These options include:

`, }; const themeOptions = ['dark', 'light'] .concat(Object.keys(alls)) .filter((item) => typeof alls[item as keyof typeof alls] !== 'function') .filter((item) => !/^(defaultSettings)/.test(item as keyof typeof alls)); const heightOptions = ['auto', '200px', '300px', '500px']; export default function Base() { const [content, setContent] = React.useState(LanguageDemo.html); const [language, setLanguage] = React.useState("html"); const [theme, setTheme] = React.useState('dark'); const [height, setHeight] = React.useState('500px'); const [placeholder, setPlaceholder] = React.useState('请输入内容'); const [autofocus, setAutofocus] = React.useState(false); const [editable, setEditable] = React.useState(true); const onDidChangeTheme = (callback: (theme: "dark" | "light") => void) => { const root = document.querySelector("html"); const observer = new MutationObserver((mutationsList) => { for (const mutation of mutationsList) { if (mutation.type === "attributes") { if (root?.getAttribute("data-prefers-color") === "dark") { callback("dark"); } else { callback("light"); } } } }); observer.observe(root, { attributes: true }); return () => { observer.disconnect(); }; } return ( { setContent(val); }} getWebAppTheme={() => { return document.querySelector("html")?.getAttribute("data-prefers-color") === "dark" ? "dark" : "light"; }} onWebAppThemeChange={onDidChangeTheme} /> 语言: 主题: 高度: placeholder: { setPlaceholder(event.target.value) }} /> 自动聚焦: { setAutofocus(event.target.checked) }} > 自动聚焦 是否可编辑: { setEditable(event.target.checked) }} > 可编辑 ); } ``` ## API 参数 | 名称 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | className | string | - | 组件外层元素classname | | prefixCls | string | hlui-mirror-editor | 组件外层元素 classname 前缀 | | width | string \| number | 100% | 编辑器的宽度。| | minWidth | string \| number | auto | 编辑器的最小宽度。| | maxWidth | string \| number | auto | 编辑器的最大宽度。| | height | string \| number | 100% | 编辑器的高度 | | minHeight | string \| number | auto | 编辑器的最小高度 | | maxHeight | string \| number | auto | 编辑器的最大高度 | | value | 编辑器中自动创建的模型的值 | string | - | | language | string | html | 编辑器中自动创建的模型的初始语言 | | theme | TMirrorEditorTheme | - | 编辑器的主题 | | options | EditorStateConfig | 默认值在如下所示 | 请参阅 [EditorStateConfig](https://codemirror.net/docs/ref/#state.EditorStateConfig) | | placeholder | string \| HTMLElement | - | 编辑器中占位符 | | indentWithTab | boolean | true | 是否使用制表符缩进 | | readOnly | boolean | false | 编辑器是否只读 | | editable | boolean | true | 编辑器是否允许编辑 | | autoFocus | boolean | true | 编辑器是否自动聚焦 | | basicSetup | boolean \| BasicSetupOptions | true | 编辑器中是否进行初始化配置 | | highlightWhitespace | boolean | true | 是否高亮空格 | | highlightActiveLine | boolean | true | 是否高亮当前所在的行 | | onChange | (newValue: string, event: ViewUpdate) => void | - | 当前编辑器模型的内容发生更改时发出的事件 | | onWillMount | (state: EditorState) => void | - | 在编辑器挂载之前发出的事件（类似于 `componentWillMount React`） | | onMount | (editor: EditorView, state: EditorState) => void | - | 挂载编辑器时发出的事件（类似于 `componentDidMount React`） | | onWillUnmount | (editor: EditorView, state: EditorState) => void | - | 在编辑器卸载之前发出的事件（类似于 `componentWillUnmount React`） | | getWebAppTheme | () => "dark" \| "light" | [getTheme]() | 获得当前Web应用的主题模式（亮色｜暗色），当不存在 `theme` 参数时根据当前函数的返回值设置编辑器的主题 | | onWebAppThemeChange | (callback: (theme: "dark" \| "light") => void) => (() => void) \| void | [onDidChangeTheme]() | 当当前Web应用的主题模式（亮色｜暗色）发生改变时的监听函数，当不存在 `theme` 参数时根据当前监听函数的返回值动态设置编辑器的主题 | ## 案例 `npm start` 然后打开 http://localhost:8000/examples/ 线上案例: https://hankliu62.github.io/rc-mirror-editor ## 单元测试 ``` npm test ``` ## 覆盖率 ``` npm run coverage ``` ## License @hankliu/rc-mirror-editor is released under the MIT license. --- _Source: https://npm.io/package/@hankliu/rc-mirror-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._