react-headless-mde 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintrc.js +24 -0
- package/.github/workflows/npm-publish-next.yml +2 -5
- package/.husky/pre-commit +4 -0
- package/.husky/pre-push +4 -0
- package/README.md +42 -33
- package/dist/cjs/index.js +409 -397
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.js +392 -380
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.ts +51 -107
- package/jest.config.js +2 -2
- package/lint-staged.config.js +4 -0
- package/package.json +17 -4
- package/rollup.config.js +17 -21
- package/vite.config.js +7 -0
- package/LICENSE +0 -21
- package/index.html +0 -12
package/.eslintrc.js
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
module.exports = {
|
|
2
|
+
parser: '@typescript-eslint/parser',
|
|
3
|
+
parserOptions: {
|
|
4
|
+
ecmaVersion: 'latest',
|
|
5
|
+
sourceType: 'module',
|
|
6
|
+
project: ['./tsconfig.json'], // Specify it only for TypeScript files
|
|
7
|
+
},
|
|
8
|
+
settings: {
|
|
9
|
+
react: {
|
|
10
|
+
version: 'detect',
|
|
11
|
+
},
|
|
12
|
+
},
|
|
13
|
+
env: {
|
|
14
|
+
browser: true,
|
|
15
|
+
es2021: true,
|
|
16
|
+
},
|
|
17
|
+
extends: ['plugin:react/recommended', 'standard-with-typescript', 'plugin:prettier/recommended'],
|
|
18
|
+
overrides: [],
|
|
19
|
+
plugins: ['react', 'import', 'simple-import-sort'],
|
|
20
|
+
rules: {
|
|
21
|
+
'@typescript-eslint/strict-boolean-expressions': 0,
|
|
22
|
+
'@typescript-eslint/explicit-function-return-type': 0,
|
|
23
|
+
},
|
|
24
|
+
};
|
package/.husky/pre-push
ADDED
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
Introduction
|
|
2
|
-
|
|
3
|
-
A simple yet powerful and extensible **React Markdown Editor** that aims to have feature parity with the Github Markdown editor.
|
|
1
|
+
# Introduction
|
|
2
|
+
|
|
3
|
+
A simple yet powerful and extensible **React Markdown Editor** that aims to have feature parity with the Github Markdown editor.
|
|
4
4
|
React-mde-headless has no 3rd party dependencies.
|
|
5
5
|
|
|
6
6
|
## [Demo](https://codesandbox.io/s/competent-jepsen-qyz51q?file=/src/index.tsx)
|
|
@@ -12,55 +12,65 @@ React-mde-headless has no 3rd party dependencies.
|
|
|
12
12
|
## Using
|
|
13
13
|
|
|
14
14
|
```jsx
|
|
15
|
-
import {
|
|
16
|
-
boldCommand,
|
|
17
|
-
italicCommand,
|
|
18
|
-
linkCommand,
|
|
19
|
-
useTextAreaMarkdownEditor,
|
|
20
|
-
} from 'react-mde-headless';
|
|
15
|
+
import { bold, italic, link, useTextAreaMarkdownEditor } from 'react-mde-headless';
|
|
21
16
|
|
|
22
17
|
export const MarkdownEditor = () => {
|
|
23
|
-
const { ref
|
|
24
|
-
|
|
25
|
-
bold: boldCommand,
|
|
26
|
-
italic: italicCommand,
|
|
27
|
-
link: linkCommand,
|
|
28
|
-
},
|
|
29
|
-
});
|
|
30
|
-
|
|
18
|
+
const { ref } = useTextAreaMarkdownEditor();
|
|
19
|
+
|
|
31
20
|
return (
|
|
32
21
|
<div className={'mb-4'}>
|
|
33
22
|
<div className={'mb-3 gap-1 flex flex-wrap'}>
|
|
34
|
-
<button
|
|
35
|
-
onClick={() => {
|
|
36
|
-
commandController.executeCommand('bold')
|
|
37
|
-
}}
|
|
38
|
-
>B</button>
|
|
23
|
+
<button onClick={bold}>B</button>
|
|
39
24
|
</div>
|
|
40
25
|
|
|
41
26
|
<textarea ref={ref} />
|
|
42
|
-
|
|
27
|
+
</div>
|
|
43
28
|
);
|
|
44
29
|
};
|
|
45
30
|
```
|
|
31
|
+
|
|
32
|
+
## Supported commands
|
|
33
|
+
|
|
34
|
+
- bold
|
|
35
|
+
- italic
|
|
36
|
+
- strikethrough
|
|
37
|
+
- headingLevel1
|
|
38
|
+
- headingLevel2
|
|
39
|
+
- headingLevel3
|
|
40
|
+
- headingLevel4
|
|
41
|
+
- headingLevel5
|
|
42
|
+
- headingLevel6
|
|
43
|
+
- link
|
|
44
|
+
- quote
|
|
45
|
+
- code
|
|
46
|
+
- codeBlock
|
|
47
|
+
- checkedList
|
|
48
|
+
- orderedList
|
|
49
|
+
- unorderedList
|
|
50
|
+
- image
|
|
51
|
+
- attachment
|
|
52
|
+
|
|
46
53
|
## Todo
|
|
47
54
|
|
|
48
|
-
|
|
49
|
-
https://github.com/jxom/awesome-react-headless-components
|
|
55
|
+
- Check execution on SSR (For example, Next.js) and, if necessary, regenerate eslint config, taking into account execution on node.js
|
|
56
|
+
- Add to awesome-react-headless-components on stable version https://github.com/jxom/awesome-react-headless-components
|
|
57
|
+
- peerDependencies React?
|
|
58
|
+
- heading undo
|
|
50
59
|
|
|
51
60
|
### Third party
|
|
61
|
+
|
|
52
62
|
- https://github.com/grassator/insert-text-at-cursor by https://twitter.com/d_kubyshkin
|
|
53
63
|
|
|
54
64
|
### XSS concerns
|
|
55
65
|
|
|
56
66
|
React-mde-headless does not automatically sanitize the HTML preview. If your using Showdown,
|
|
57
|
-
this has been taken from [their documentation](https://github.com/showdownjs/showdown/wiki/Markdown's-XSS-Vulnerability-(and-how-to-mitigate-it)):
|
|
67
|
+
this has been taken from [their documentation](<https://github.com/showdownjs/showdown/wiki/Markdown's-XSS-Vulnerability-(and-how-to-mitigate-it)>):
|
|
58
68
|
|
|
59
69
|
> Cross-side scripting is a well known technique to gain access to private information of the users
|
|
60
|
-
of a website. The attacker injects spurious HTML content (a script) on the web page which will read
|
|
61
|
-
the user’s cookies and do something bad with it (like steal credentials). As a countermeasure,
|
|
62
|
-
you should filter any suspicious content coming from user input. Showdown doesn’t include an
|
|
63
|
-
XSS filter, so you must provide your own. But be careful in how you do it…
|
|
70
|
+
> of a website. The attacker injects spurious HTML content (a script) on the web page which will read
|
|
71
|
+
> the user’s cookies and do something bad with it (like steal credentials). As a countermeasure,
|
|
72
|
+
> you should filter any suspicious content coming from user input. Showdown doesn’t include an
|
|
73
|
+
> XSS filter, so you must provide your own. But be careful in how you do it…
|
|
64
74
|
|
|
65
75
|
You might want to take a look at [showdown-xss-filter](https://github.com/VisionistInc/showdown-xss-filter).
|
|
66
76
|
|
|
@@ -68,7 +78,6 @@ You might want to take a look at [showdown-xss-filter](https://github.com/Vision
|
|
|
68
78
|
|
|
69
79
|
React-mde-headless is [MIT licensed](https://github.com/andrerpena/react-mde/blob/master/LICENSE).
|
|
70
80
|
|
|
71
|
-
## About the
|
|
72
|
-
|
|
73
|
-
Made with :heart: by André Pena and [other awesome contributors](https://github.com/andrerpena).
|
|
81
|
+
## About the authors
|
|
74
82
|
|
|
83
|
+
Created by [André Pena](https://github.com/andrerpena). Maintained and developed by https://github.com/webbrother.
|