diff --git a/THIRD-PARTY-NOTICES b/THIRD-PARTY-NOTICES index 934140ddd..6fe522fe3 100644 --- a/THIRD-PARTY-NOTICES +++ b/THIRD-PARTY-NOTICES @@ -887,11 +887,12 @@ SOFTWARE. ----------- -The following NPM package may be included in this product: +The following NPM packages may be included in this product: - @types/argparse@1.0.38 + - @types/ms@0.7.31 -This package contains the following license and notice below: +These packages each contain the following license and notice below: MIT License @@ -919,10 +920,16 @@ MIT License The following NPM packages may be included in this product: + - @types/debug@4.1.8 + - @types/hast@2.3.4 + - @types/mdast@3.0.10 - @types/node@12.20.24 + - @types/parse5@6.0.3 + - @types/prismjs@1.26.0 - @types/prop-types@15.7.4 - @types/react@17.0.38 - @types/scheduler@0.16.2 + - @types/unist@2.0.6 These packages each contain the following license and notice below: @@ -977,6 +984,1341 @@ These definitions were written by Chi Vinh Le . ----------- +The following NPM package may be included in this product: + + - @uiw/copy-to-clipboard@1.0.15 + +This package contains the following license and notice below: + +Copy Text to Clipboard +=== + +![No Dependencies](http://jaywcjlove.github.io/sb/status/no-dependencies.svg) +[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/copy-to-clipboard.svg?style=flat)](https://www.npmjs.com/package/@uiw/copy-to-clipboard) +[![Build & Deploy](https://github.com/uiwjs/copy-to-clipboard/workflows/Build/badge.svg)](https://github.com/uiwjs/react-codemirror/actions) +[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/copy-to-clipboard/file/README.md) +[![npm version](https://img.shields.io/npm/v/@uiw/copy-to-clipboard.svg)](https://www.npmjs.com/package/@uiw/copy-to-clipboard) +[![Repo Dependents](https://badgen.net/github/dependents-repo/uiwjs/copy-to-clipboard)](https://github.com/uiwjs/copy-to-clipboard/network/dependents) + +**This styling is an extra step which is likely not required.** + +Why is it here? To ensure: + +1. the element is able to have focus and selection. +2. if element was to `flash` render it has minimal visual impact. +3. less flakyness with selection and copying which **might** occur if the textarea element is not visible. + +The likelihood is the element won't even render, not even a flash, so some of these are just precautions. However in IE the element is visible whilst the popup box asking the user for permission for the web page to copy to the clipboard. Place in top-left corner of screen regardless of scroll position. + +## Usage + +You will need Node.js installed on your system. + +```bash +$ npm i @uiw/copy-to-clipboard +``` + +```js +import copyTextToClipboard from '@uiw/copy-to-clipboard'; + +copyTextToClipboard('test', (isCopy) => { + console.log('isCopy:', isCopy); +}); +``` + +Or manually download and link [copy-to-clipboard](https://unpkg.com/@uiw/copy-to-clipboard/dist/) in your HTML, It can also be downloaded via [UNPKG](https://unpkg.com/@uiw/copy-to-clipboard/dist/): + +```html + + +``` + +### License + +Licensed under the MIT License. + +----------- + +The following NPM package may be included in this product: + + - @uiw/react-markdown-preview@4.1.13 + +This package contains the following license and notice below: + + +React Markdown Preview +=== + + +[![Build and Deploy](https://github.com/uiwjs/react-markdown-preview/actions/workflows/ci.marster.yml/badge.svg)](https://github.com/uiwjs/react-markdown-preview/actions/workflows/ci.marster.yml) +[![jsDelivr CDN](https://data.jsdelivr.com/v1/package/npm/@uiw/react-markdown-preview/badge?style=rounded)](https://www.jsdelivr.com/package/npm/@uiw/react-markdown-preview) +[![Downloads](https://img.shields.io/npm/dm/@uiw/react-markdown-preview.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-markdown-preview) +[![Coverage Status](https://uiwjs.github.io/react-markdown-preview/badge.svg)](https://uiwjs.github.io/react-markdown-preview/coverage/lcov-report/) +[![npm version](https://img.shields.io/npm/v/@uiw/react-markdown-preview.svg)](https://www.npmjs.com/package/@uiw/react-markdown-preview) +[![npm unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-markdown-preview/file/README.md) +[![Repo Dependents](https://badgen.net/github/dependents-repo/uiwjs/react-markdown-preview)](https://github.com/uiwjs/react-markdown-preview/network/dependents) + +React component preview markdown text in web browser. The minimal amount of CSS to replicate the GitHub Markdown style. The current [document website](https://uiwjs.github.io/react-markdown-preview/) is converted using this react component. + +## Features + +- 🌒 Support dark-mode/night-mode. `@v4` +- 🙆🏼‍♂️ GitHub style: The markdown content is rendered as close to the way it's rendered on GitHub as possible. +- 🏋🏾‍♂️ Support [GFM](https://github.github.com/gfm/) (autolink literals, footnotes, strikethrough, tables, tasklists). +- 🍭 Support automatic code block highlight. +- 🐝 Support for defining styles via comment. +- ⛳️ Support for [GFM footnotes](https://github.blog/changelog/2021-09-30-footnotes-now-supported-in-markdown-fields/) + +## Quick Start + +```bash +$ npm install @uiw/react-markdown-preview --save +``` + +## Usage Example + +[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/react-markdown-preview-co1mj?fontsize=14&hidenavigation=1&theme=dark) + +```jsx mdx:preview +import React from 'react'; +import MarkdownPreview from '@uiw/react-markdown-preview'; + +const source = ` +## MarkdownPreview + +> todo: React component preview markdown text. +`; + +export default function Demo() { + return ( + + ) +} +``` + +## Disable Header links + +```jsx mdx:preview +import React from 'react'; +import MarkdownPreview from '@uiw/react-markdown-preview'; + +const source = ` +## MarkdownPreview + +## Header 2 + +### Header 3 +`; + +export default function Demo() { + return ( + { + if (node.tagName === "a" && parent && /^h(1|2|3|4|5|6)/.test(parent.tagName)) { + parent.children = parent.children.slice(1) + } + }} + /> + ); +} +``` + +## highlight line + +syntax: ```jsx {1,4-5} + +```jsx mdx:preview?background=#fff +import React from 'react'; +import MarkdownPreview from '@uiw/react-markdown-preview'; + +const source = ` +\`\`\`js {2} +function () { + console.log('hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello') +} +\`\`\` +\`\`\`js {2} +function () { + console.log('hello ') +} +\`\`\` +`; + +export default function Demo() { + return ( + { + if (node.tagName === "a" && parent && /^h(1|2|3|4|5|6)/.test(parent.tagName)) { + parent.children = parent.children.slice(1) + } + }} + /> + ); +} +``` + +## Show Line Numbers + +syntax: ```jsx showLineNumbers {1,4-5} + +```jsx mdx:preview?background=#fff +import React from 'react'; +import MarkdownPreview from '@uiw/react-markdown-preview'; + +const source = ` +\`\`\`js showLineNumbers +function () { + console.log('hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello') +} +\`\`\` +\`\`\`js showLineNumbers {2} +function () { + console.log('hello ') +} +\`\`\` +`; + +export default function Demo() { + return ( + { + if (node.tagName === "a" && parent && /^h(1|2|3|4|5|6)/.test(parent.tagName)) { + parent.children = parent.children.slice(1) + } + }} + /> + ); +} +``` + +## Ignore + +Ignore content display via HTML comments, Shown in GitHub readme, excluded in HTML. + +```jsx mdx:preview?background=#fff +import React from 'react'; +import MarkdownPreview from '@uiw/react-markdown-preview'; + +const source = ` + +Content ignored + +Some content is ignored, please check the source code +`; + +export default function Demo() { + return ( + { + if (node.tagName === "a" && parent && /^h(1|2|3|4|5|6)/.test(parent.tagName)) { + parent.children = parent.children.slice(1) + } + }} + /> + ); +} +``` + +```md +Ignored content +``` + +### Options Props + +```typescript +import { ReactMarkdownProps } from 'react-markdown'; +import { RehypeRewriteOptions } from 'rehype-rewrite'; + +type MarkdownPreviewProps = { + prefixCls?: string; + className?: string; + source?: string; + disableCopy?: boolean; + style?: React.CSSProperties; + pluginsFilter?: (type: 'rehype' | 'remark', plugin: PluggableList) => PluggableList; + wrapperElement?: React.DetailedHTMLProps, HTMLDivElement> & { + 'data-color-mode'?: 'light' | 'dark'; + }; + onScroll?: (e: React.UIEvent) => void; + onMouseOver?: (e: React.MouseEvent) => void; + rehypeRewrite?: RehypeRewriteOptions['rewrite']; +} & ReactMarkdownProps; +``` + +- `source` (`string`, default: `''`)\ + Markdown to parse +- `className` (`string?`)\ + Wrap the markdown in a `div` with this class name + +This [`ReactMarkdownProps`](https://github.com/remarkjs/react-markdown/tree/02bac837bf141cdb8face360fb88be6fa33ab194#props) details. [Upgrade `react-markdown` v6](https://github.com/remarkjs/react-markdown/blob/15b4757082cf3f32a25eba0b8ea30baf751a8b40/changelog.md#600---2021-04-15) + +- `children` (`string`, default: `''`)\ + Markdown to parse +- `className` (`string?`)\ + Wrap the markdown in a `div` with this class name +- `skipHtml` (`boolean`, default: ~~`false`~~ -> [`true`](https://github.com/uiwjs/react-markdown-preview/issues/205) )\ + Ignore HTML in Markdown completely +- `sourcePos` (`boolean`, default: `false`)\ + Pass a prop to all components with a serialized position + (`data-sourcepos="3:1-3:13"`) +- `rawSourcePos` (`boolean`, default: `false`)\ + Pass a prop to all components with their [position][] + (`sourcePosition: {start: {line: 3, column: 1}, end:…}`) +- `includeElementIndex` (`boolean`, default: `false`)\ + Pass the `index` (number of elements before it) and `siblingCount` (number + of elements in parent) as props to all components +- `allowedElements` (`Array.`, default: `undefined`)\ + Tag names to allow (can’t combine w/ `disallowedElements`). + By default all elements are allowed +- `disallowedElements` (`Array.`, default: `undefined`)\ + Tag names to disallow (can’t combine w/ `allowedElements`). + By default no elements are disallowed +- `allowElement` (`(element, index, parent) => boolean?`, optional)\ + Function called to check if an element is allowed (when truthy) or not. + `allowedElements` / `disallowedElements` is used first! +- `unwrapDisallowed` (`boolean`, default: `false`)\ + Extract (unwrap) the children of not allowed elements. + By default, when `strong` is not allowed, it and it’s children is dropped, + but with `unwrapDisallowed` the element itself is dropped but the children + used +- `linkTarget` (`string` or `(href, children, title) => string`, optional)\ + Target to use on links (such as `_blank` for ` string`, default: + [`./uri-transformer.js`](https://github.com/remarkjs/react-markdown/blob/02bac837bf141cdb8face360fb88be6fa33ab194/lib/uri-transformer.js), optional)\ + URL to use for links. + The default allows only `http`, `https`, `mailto`, and `tel`, and is + exported from this module as `uriTransformer`. + Pass `null` to allow all URLs. + See [security][] +- `transformImageUri` (`(src, alt, title) => string`, default: + [`./uri-transformer.js`](https://github.com/remarkjs/react-markdown/blob/02bac837bf141cdb8face360fb88be6fa33ab194/lib/uri-transformer.js), optional)\ + Same as `transformLinkUri` but for images +- `components` (`Object.`, default: `{}`)\ + Object mapping tag names to React components +- `remarkPlugins` (`Array.`, default: `[]`)\ + List of [remark plugins](https://github.com/remarkjs/remark/blob/main/doc/plugins.md#list-of-plugins) to use. + See the next section for examples on how to pass options +- `rehypePlugins` (`Array.`, default: `[]`)\ + List of [rehype plugins](https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins) to use. + See the next section for examples on how to pass options + +## Markdown Features + +### Supports for CSS Style + +Use HTML comments [``](https://github.com/jaywcjlove/rehype-attr) to let Markdown support style customization. + +```markdown +## Title + + +Markdown Supports **Style** +``` + +### Support for [GFM footnotes](https://github.blog/changelog/2021-09-30-footnotes-now-supported-in-markdown-fields/) + +```markdown +Here is a simple footnote[^1]. With some additional text after it. + +[^1]: My reference. +``` + +## Support dark-mode/night-mode + +By default, the [`dark-mode`](https://github.com/jaywcjlove/dark-mode/) is automatically switched according to the system. If you need to switch manually, just set the `data-color-mode="dark"` parameter for body. + +```html + +``` + +```js +document.documentElement.setAttribute('data-color-mode', 'dark') +document.documentElement.setAttribute('data-color-mode', 'light') +``` + +Inherit custom color variables by adding [`.wmde-markdown-var`](https://github.com/uiwjs/react-markdown-preview/blob/a53be1e93fb1c2327649c4a6b084adb80679affa/src/styles/markdown.less#L1-L193) selector. + +```jsx +const Demo = () => { + return ( +
+
+ +
+ ) +} +``` + +Set the `light` theme. + +```diff + +``` + +## Development + +Runs the project in development mode. + +```bash +# Step 1, run first, +# listen to the component compile and output the .js file +# listen for compilation output type .d.ts file +# listen to the component compile and output the .css file +npm run start +# Step 2, development mode, listen to compile preview website instance +npm run doc +``` + +Builds the app for production to the build folder. + +```bash +npm run build +``` + +The build is minified and the filenames include the hashes. +Your app is ready to be deployed! + +### Alternatives + +If you need more features-rich Markdown Editor, you can use [@uiwjs/react-markdown-editor](https://github.com/uiwjs/react-markdown-editor) + +- [@uiw/react-markdown-editor](https://github.com/uiwjs/react-markdown-editor): A markdown editor with preview, implemented with React.js and TypeScript. +- [@uiw/react-md-editor](https://github.com/uiwjs/react-md-editor): A simple markdown editor with preview, implemented with React.js and TypeScript. +- [@uiw/react-textarea-code-editor](https://github.com/uiwjs/react-textarea-code-editor): A simple code editor with syntax highlighting. +- [@uiw/react-codemirror](https://github.com/uiwjs/react-codemirror): CodeMirror component for React. @codemirror +- [@uiw/react-monacoeditor](https://github.com/jaywcjlove/react-monacoeditor): Monaco Editor component for React. + +## Contributors + +As always, thanks to our amazing contributors! + + + + + +Made with [action-contributors](https://github.com/jaywcjlove/github-action-contributors). + +## License + +Licensed under the MIT License. + +----------- + +The following NPM package may be included in this product: + + - @uiw/react-md-editor@3.23.3 + +This package contains the following license and notice below: + + +

+ + react-md-editor logo + +

+ +

+ + Downloads + + + jsDelivr CDN + + + npm bundle size + + + Coverage Status + +
+ + Build & Deploy + + + Open in unpkg + + + Gitee + + + npm version + +

+ + + +A simple markdown editor with preview, implemented with React.js and TypeScript. This React Component aims to provide a simple Markdown editor with syntax highlighting support. This is based on `textarea` encapsulation, so it does not depend on any modern code editors such as Acs, CodeMirror, Monaco etc. + +### Features + +- 📑 Indent line or selected text by pressing tab key, with customizable indentation. +- ♻️ Based on `textarea` encapsulation, does not depend on any modern code editors. +- 🚧 Does not depend on the [`uiw`](https://github.com/uiwjs/uiw) component library. +- 🚘 Automatic list on new lines. +- 😻 GitHub flavored markdown support. +- 🌒 Support dark-mode/night-mode **@v3.11.0+**. +- 💡 Support [next.js](https://github.com/uiwjs/react-md-editor/issues/52#issuecomment-848969341), [Use examples](#support-nextjs) in [next.js](https://nextjs.org/). + +### Quick Start + +```bash +npm i @uiw/react-md-editor +``` + +### Using + +[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/markdown-editor-for-react-izdd6?fontsize=14&hidenavigation=1&theme=dark) +[![Open in Github gh-pages](https://img.shields.io/badge/Open%20In-Github%20gh--pages-blue?logo=github)](https://uiwjs.github.io/react-md-editor/) +[![Open in Gitee gh-pages](https://img.shields.io/badge/Open%20In-Gitee%20gh--pages-blue?logo=web)](https://uiw.gitee.io/react-md-editor/) + +```jsx mdx:preview +import React from "react"; +import MDEditor from '@uiw/react-md-editor'; + +export default function App() { + const [value, setValue] = React.useState("**Hello world!!!**"); + return ( +
+ + +
+ ); +} +``` + +### Special Markdown syntax + +**Supports for CSS Style** + +Use HTML comments `` to let Markdown support style customization. + +```markdown +## Title + + +Markdown Supports **Style** +``` + +**Ignore content display via HTML comments** + +Shown in GitHub readme, excluded in HTML. + +```markdown +# Hello World + +Hello World + +Good! +``` + +Output: + +```html +

Hello World

+ +

Good!

+``` + +### Security + +Please note markdown needs to be sanitized if you do not **completely trust** your authors. +Otherwise, your app is vulnerable to XSS. This can be achieved by adding [rehype-sanitize](https://github.com/rehypejs/rehype-sanitize) as a plugin. + +```jsx mdx:preview +import React from "react"; +import MDEditor from '@uiw/react-md-editor'; +import rehypeSanitize from "rehype-sanitize"; + +export default function App() { + const [value, setValue] = React.useState(`**Hello world!!!** `); + return ( +
+ +
+ ); +} +``` + +### Custom Toolbars + +[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/react-md-editor-custom-toolbars-m2n10?fontsize=14&hidenavigation=1&theme=dark) + +```jsx mdx:preview +import React, { useState } from "react"; +import MDEditor, { commands } from '@uiw/react-md-editor'; + +const title3 = { + name: 'title3', + keyCommand: 'title3', + buttonProps: { 'aria-label': 'Insert title3' }, + icon: ( + + + + ), + execute: (state, api) => { + let modifyText = `### ${state.selectedText}\n`; + if (!state.selectedText) { + modifyText = `### `; + } + api.replaceSelection(modifyText); + }, +}; + +const title2 = { + name: 'title2', + keyCommand: 'title2', + render: (command, disabled, executeCommand) => { + return ( + + ) + }, + execute: (state, api) => { + let modifyText = `## ${state.selectedText}\n`; + if (!state.selectedText) { + modifyText = `## `; + } + api.replaceSelection(modifyText); + }, +} + +function SubChildren({ close, execute, getState, textApi, dispatch }) { + const [value, setValue] = useState('') + const insert = () => { + console.log('value:::', value) + textApi.replaceSelection(value) + } + return ( +
+
My Custom Toolbar
+ setValue(e.target.value)} /> + + + + +
+ ); +} + +const subChild = { + name: 'update', + groupName: 'update', + icon: ( + + + + ), + children: (props) => , + execute: (state, api) => { + console.log('>>>>>>update>>>>>', state) + }, + buttonProps: { 'aria-label': 'Insert title'} +} + +export default function App() { + const [value, setValue] = React.useState("Hello Markdown! `Tab` key uses default behavior"); + return ( +
+ +
+ ); +} +``` + +Customize the toolbar with `commands` and `extraCommands` props. + +```jsx mdx:preview +import React from "react"; +import MDEditor, { commands } from '@uiw/react-md-editor'; + +export default function App() { + const [value, setValue] = React.useState("Hello Markdown! `Tab` key uses default behavior"); + return ( +
+ + + + ), + children: ({ close, execute, getState, textApi }) => { + return ( +
+
My Custom Toolbar
+ + + +
+ ); + }, + execute: (state, api) => { + console.log('>>>>>>update>>>>>', state) + }, + buttonProps: { 'aria-label': 'Insert title'} + }), + commands.divider, commands.fullscreen + ]} + /> +
+ ); +} +``` + +re-render `toolbar` element. + +```jsx mdx:preview +import React from "react"; +import MDEditor, { commands } from '@uiw/react-md-editor'; + +export default function App() { + const [value, setValue] = React.useState("Hello Markdown! `Tab` key uses default behavior"); + return ( +
+ { + if (command.keyCommand === 'code') { + return ( + + ) + } + } + }} + /> +
+ ); +} +``` + +Custom Preview Command Tool + +[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/react-md-editor-custom-toolbars-https-github-com-uiwjs-react-md-editor-issues-433-9mwuob?fontsize=14&hidenavigation=1&theme=dark) + +```jsx mdx:preview +import React, { useContext } from "react"; +import MDEditor, { commands, EditorContext } from "@uiw/react-md-editor"; + +const Button = () => { + const { preview, dispatch } = useContext(EditorContext); + const click = () => { + dispatch({ + preview: preview === "edit" ? "preview" : "edit" + }); + }; + if (preview === "edit") { + return ( + + + + + ); + } + return ( + + + + + ); +}; + +const codePreview = { + name: "preview", + keyCommand: "preview", + value: "preview", + icon: