You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: readme.md
+9-9Lines changed: 9 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -19,7 +19,7 @@ A simple yet powerful and extensible **React Markdown Editor** that aims to have
19
19
## Installing
20
20
21
21
npm i react-mde
22
-
22
+
23
23
## Using
24
24
25
25
React-mde is a completely controlled component.
@@ -87,7 +87,7 @@ The types are described below
87
87
-**onChange: (value: string)**: Event handler for the `onChange` event.
88
88
-**selectedTab: "write" | "preview"**: The currently selected tab.
89
89
-**onTabChange: (tab) => void**: Function called when the selected tab changes.
90
-
-**classes?: [Object](https://github.com/andrerpena/react-mde/blob/master/src/classes.ts)**: An object containing the following optional properties: *reactMde*, *toolbar*, *preview*, *textArea* and *suggestionsDropdown*.
90
+
-**classes?: [Object](https://github.com/andrerpena/react-mde/blob/master/src/classes.ts)**: An object containing the following optional properties: *reactMde*, *toolbar*, *preview*, *textArea* and *suggestionsDropdown*.
91
91
This allows for passing class names to each of the inner components of React-mde. Classes defined in the *classes* prop
92
92
follow the specification of [Jed Watson's classNames project](https://github.com/JedWatson/classnames).
93
93
-**commands?: Record<string, Command>**: An object with string properties representing keys, and a Command object as value for each key. These are custom commands. Commands are explained in more details below.
@@ -98,7 +98,7 @@ options. It is recommended to [inspect the layouts source code](https://github.c
98
98
while the documentation is not complete.
99
99
-**loadingPreview**: What to display in the preview while it is loading. Value can be string, React Element or anything React can render.
100
100
-**readOnly?: boolean**: Flag to render the editor in read-only mode.
101
-
-**l18n?**: A localization option. It contains the strings `write`, `preview`and `uploadingImage`.
101
+
-[**l18n?**](src/types/L18n.ts): A localization option. It contains the strings `write`, `preview`, `uploadingImage`and `pasteDropSelect`.
102
102
-**minEditorHeight?: number**: The minimum height of the editor.
103
103
-**maxEditorHeight?: number**: The max height of the editor (after that, it will scroll).
104
104
-**minPreviewHeight?: number**: The minimum height of the preview.
@@ -116,22 +116,22 @@ The following styles from React-mde should be added: (Both .scss and .css files
If you want to have a more granular control over the styles, you can [import each individual file](https://github.com/andrerpena/react-mde/tree/master/src/styles).
121
-
121
+
122
122
If you're using SASS, you can override these variables: https://github.com/andrerpena/react-mde/blob/master/src/styles/variables.scss
123
123
124
124
## XSS concerns
125
125
126
126
React-mde does not automatically sanitize the HTML preview. If your using Showdown,
127
127
this has been taken from [their documentation](https://github.com/showdownjs/showdown/wiki/Markdown's-XSS-Vulnerability-(and-how-to-mitigate-it)):
128
-
128
+
129
129
> Cross-side scripting is a well known technique to gain access to private information of the users
130
-
of a website. The attacker injects spurious HTML content (a script) on the web page which will read
130
+
of a website. The attacker injects spurious HTML content (a script) on the web page which will read
131
131
the user’s cookies and do something bad with it (like steal credentials). As a countermeasure,
132
-
you should filter any suspicious content coming from user input. Showdown doesn’t include an
132
+
you should filter any suspicious content coming from user input. Showdown doesn’t include an
133
133
XSS filter, so you must provide your own. But be careful in how you do it…
134
-
134
+
135
135
You might want to take a look at [showdown-xss-filter](https://github.com/VisionistInc/showdown-xss-filter).
136
136
137
137
It is also possible to return a Promise to a React Element from `generateMarkdownPreview`, which makes
0 commit comments