react-text-forge 1.2.4 → 1.2.6
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/README.md +23 -0
- package/dist/components/ReactTextForge.d.ts +5 -3
- package/dist/react-text-forge.css +1 -1
- package/dist/react-text-forge.js +1056 -1039
- package/dist/react-text-forge.js.map +1 -1
- package/dist/react-text-forge.umd.cjs +22 -22
- package/dist/react-text-forge.umd.cjs.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -43,6 +43,29 @@ export default function App() {
|
|
|
43
43
|
}
|
|
44
44
|
```
|
|
45
45
|
|
|
46
|
+
Vous pouvez si vous le désirez ajouter vos propres raccourcis claviers comme ceci:
|
|
47
|
+
|
|
48
|
+
```jsx
|
|
49
|
+
import React, { useState } from "react";
|
|
50
|
+
import ReactTextForge from "./components/ReactTextForge";
|
|
51
|
+
|
|
52
|
+
export default function App() {
|
|
53
|
+
const [value, setValue] = useState({});
|
|
54
|
+
|
|
55
|
+
/**
|
|
56
|
+
* Indiquer en clé le raccourci définit et en valeur la fonction appliqué
|
|
57
|
+
*/
|
|
58
|
+
const raccourcis = {
|
|
59
|
+
'Ctrl+Shift+A': () => alert('Vous avez pressé Ctrl+Shift+A !'),
|
|
60
|
+
'Alt+S': () => alert('Vous avez pressé Alt+S !')
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
return (
|
|
64
|
+
<ReactTextForge value={value} setValue={setValue} raccourcis={raccourcis} />
|
|
65
|
+
);
|
|
66
|
+
}
|
|
67
|
+
```
|
|
68
|
+
|
|
46
69
|
## Licence
|
|
47
70
|
Ce projet est sous licence MIT.
|
|
48
71
|
|
|
@@ -4,17 +4,19 @@ export default ReactTextForge;
|
|
|
4
4
|
*
|
|
5
5
|
* @param {object} props
|
|
6
6
|
* @param {object} props.value - contenu textuel
|
|
7
|
+
* @param {function} props.setValue - change l'état du contenu
|
|
7
8
|
* @param {string} props.borderColor - couleur de bordure des éléments
|
|
8
9
|
* @param {string} props.backgroundColor - couleur d'arrière-plan
|
|
9
10
|
* @param {string} props.imageColor - couleur des images
|
|
10
|
-
* @param {
|
|
11
|
+
* @param {object} props.raccourcis - liste des raccourcis ajoutées
|
|
11
12
|
*
|
|
12
13
|
* @returns {JSX.Element }
|
|
13
14
|
*/
|
|
14
|
-
declare function ReactTextForge({ value, setValue, borderColor, backgroundColor, imageColor }: {
|
|
15
|
+
declare function ReactTextForge({ value, setValue, borderColor, backgroundColor, imageColor, raccourcis }: {
|
|
15
16
|
value: object;
|
|
17
|
+
setValue: Function;
|
|
16
18
|
borderColor: string;
|
|
17
19
|
backgroundColor: string;
|
|
18
20
|
imageColor: string;
|
|
19
|
-
|
|
21
|
+
raccourcis: object;
|
|
20
22
|
}): JSX.Element;
|
|
@@ -5,4 +5,4 @@ pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5p
|
|
|
5
5
|
Author: (c) Henri Vandersleyen <hvandersleyen@gmail.com>
|
|
6
6
|
License: see project LICENSE
|
|
7
7
|
Touched: 2022
|
|
8
|
-
*/.hljs-meta,.hljs-comment{color:#565f89}.hljs-tag,.hljs-doctag,.hljs-selector-id,.hljs-selector-class,.hljs-regexp,.hljs-template-tag,.hljs-selector-pseudo,.hljs-selector-attr,.hljs-variable.language_,.hljs-deletion{color:#f7768e}.hljs-variable,.hljs-template-variable,.hljs-number,.hljs-literal,.hljs-type,.hljs-params,.hljs-link{color:#ff9e64}.hljs-built_in,.hljs-attribute{color:#e0af68}.hljs-selector-tag{color:#2ac3de}.hljs-keyword,.hljs-title.function_,.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-subst,.hljs-property{color:#7dcfff}.hljs-selector-tag{color:#73daca}.hljs-quote,.hljs-string,.hljs-symbol,.hljs-bullet,.hljs-addition{color:#9ece6a}.hljs-code,.hljs-formula,.hljs-section{color:#7aa2f7}.hljs-name,.hljs-keyword,.hljs-operator,.hljs-char.escape_,.hljs-attr{color:#bb9af7}.hljs-punctuation{color:#c0caf5}.hljs{background:#1a1b26;color:#9aa5ce}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.toolbar{display:flex;gap:5px;margin-bottom:10px;flex-wrap:wrap}.toolbar>div{display:flex}.toolbar>select,.toolbar>select:focus{outline:none;border:none;background:none}.toolbar>select option,.toolbar>select:focus option{border:none;outline:none;background:none;padding:0}.tool{padding:5px;display:flex;justify-content:center;align-items:center;border:none;border-radius:3px;background:none;cursor:pointer;outline:none}.tool--arrow{background:none;border:none;cursor:pointer;font-size:12px;margin-left:4px;position:relative;bottom:4px;height:18px;padding:0}.tool img,.tool svg{cursor:pointer;width:15px;height:15px}.react-text-forge{width:80%;margin:0 auto;border:1px solid;padding:10px;border-radius:5px;position:relative}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.react-text-forge .editor{min-height:200px;border:1px solid #ddd;padding:10px;border-radius:5px;outline:none}.react-text-forge .editor a{pointer-events:auto;cursor:pointer}.react-text-forge .editor img{max-height:200px}.react-text-forge .editor table{width:100%;table-layout:fixed;border-collapse:collapse}.react-text-forge .editor table tr{display:flex;width:100%}.react-text-forge .editor table th,.react-text-forge .editor table td{display:block;flex-grow:1;height:40px;max-height:40px;border:1px solid;border-color:inherit;padding:8px;overflow-y:scroll}.react-text-forge .color-picker-popup{position:absolute}.react-text-forge .color-picker-popup .sketch-picker{position:relative;z-index:2}.react-text-forge .bullet-type-selector{display:inline-block;margin-left:8px}.react-text-forge .bullet-type-option{background:#f0f0f0;border:1px solid #ccc;border-radius:4px;padding:4px 8px;margin:2px;cursor:pointer}.react-text-forge .bullet-type-option:hover{background:#e0e0e0}.react-text-forge .dropdown{position:relative;display:flex}.react-text-forge .dropdown-toggle{background:none;border:none;cursor:pointer;padding:0}.react-text-forge .dropdown-menu{position:absolute;top:100%;background:#fff;border:1px solid #ccc;box-shadow:0 2px 8px #0000001a;list-style:none;height:100px;overflow-y:scroll;padding:10px 0;margin:5px 0;z-index:1000}.react-text-forge .dropdown-menu li{min-width:200px;width:max-content;height:20px;padding:5px 10px;line-height:20px;cursor:pointer}.react-text-forge .dropdown-menu li:hover{background:#f0f0f0}.react-text-forge pre{background-color:#6e6565;border:1px solid #ddd;border-radius:4px;padding:10px;overflow-x:auto;font-family:Consolas,Monaco,Courier New,monospace;font-size:14px;line-height:1.4;margin:1em 0}.react-text-forge .link-form{position:absolute;top:40px;left:0;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 10px #0000001a;padding:16px;z-index:10}.react-text-forge .link-form input[type=text]{width:calc(100% - 22px);padding:8px;margin-bottom:10px;border:1px solid #ccc;border-radius:4px}.react-text-forge .link-form label{display:flex;align-items:center;margin-bottom:10px}.react-text-forge .link-form label input[type=checkbox]{margin-right:8px}.react-text-forge .link-form-actions{display:flex;justify-content:flex-end;padding:10px;gap:8px}.react-text-forge .link-form-actions button{padding:8px 16px;border:none;border-radius:4px;cursor:pointer}.react-text-forge .image-upload-container{position:relative}.react-text-forge .hidden-file-input{display:none}.react-text-forge .table-grid-form{display:flex;flex-direction:column;align-items:center;height:fit-content;width:fit-content;overflow:visible;padding:0;border:0}.react-text-forge .table-grid-form .grid-container{display:grid;grid-template-columns:repeat(5,20px);grid-template-rows:repeat(5,20px);gap:2px}.react-text-forge .table-grid-form .grid-cell{width:20px;height:20px;background-color:#ddd;border:1px solid #ccc}.react-text-forge .table-grid-form .grid-cell.hovered{background-color:#007bff}.react-text-forge .table-grid-form .table-size-indicator{margin-top:10px;font-size:14px}.react-text-forge ::selection{background:#0078d74d;color:#000}.react-text-forge ::-moz-selection{background:#0078d74d;color:#000}.react-text-forge a{font-weight:500;color:#646cff;text-decoration:inherit}.react-text-forge a:hover{color:#535bf2}
|
|
8
|
+
*/.hljs-meta,.hljs-comment{color:#565f89}.hljs-tag,.hljs-doctag,.hljs-selector-id,.hljs-selector-class,.hljs-regexp,.hljs-template-tag,.hljs-selector-pseudo,.hljs-selector-attr,.hljs-variable.language_,.hljs-deletion{color:#f7768e}.hljs-variable,.hljs-template-variable,.hljs-number,.hljs-literal,.hljs-type,.hljs-params,.hljs-link{color:#ff9e64}.hljs-built_in,.hljs-attribute{color:#e0af68}.hljs-selector-tag{color:#2ac3de}.hljs-keyword,.hljs-title.function_,.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-subst,.hljs-property{color:#7dcfff}.hljs-selector-tag{color:#73daca}.hljs-quote,.hljs-string,.hljs-symbol,.hljs-bullet,.hljs-addition{color:#9ece6a}.hljs-code,.hljs-formula,.hljs-section{color:#7aa2f7}.hljs-name,.hljs-keyword,.hljs-operator,.hljs-char.escape_,.hljs-attr{color:#bb9af7}.hljs-punctuation{color:#c0caf5}.hljs{background:#1a1b26;color:#9aa5ce}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.toolbar{display:flex;gap:5px;margin-bottom:10px;flex-wrap:wrap}.toolbar>div{display:flex}.toolbar>select,.toolbar>select:focus{outline:none;border:none;background:none}.toolbar>select option,.toolbar>select:focus option{border:none;outline:none;background:none;padding:0}.tool{padding:5px;display:flex;justify-content:center;align-items:center;border:none;border-radius:3px;background:none;cursor:pointer;outline:none}.tool--arrow{background:none;border:none;cursor:pointer;font-size:12px;margin-left:4px;position:relative;bottom:4px;height:18px;padding:0}.tool img,.tool svg{cursor:pointer;width:15px;height:15px}.react-text-forge{width:80%;margin:0 auto;border:1px solid;padding:10px;border-radius:5px;position:relative}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.react-text-forge .editor{min-height:200px;border:1px solid #ddd;padding:10px;border-radius:5px;outline:none}.react-text-forge .editor a{pointer-events:auto;cursor:pointer}.react-text-forge .editor img{max-height:200px}.react-text-forge .editor table{width:100%;table-layout:fixed;border-collapse:collapse}.react-text-forge .editor table tr{display:flex;width:100%}.react-text-forge .editor table th,.react-text-forge .editor table td{display:block;flex-grow:1;height:40px;max-height:40px;border:1px solid;border-color:inherit;padding:8px;overflow-y:scroll}.react-text-forge .color-picker-popup{position:absolute;top:100%}.react-text-forge .color-picker-popup .sketch-picker{position:relative;z-index:2}.react-text-forge .bullet-type-selector{display:inline-block;margin-left:8px}.react-text-forge .bullet-type-option{background:#f0f0f0;border:1px solid #ccc;border-radius:4px;padding:4px 8px;margin:2px;cursor:pointer}.react-text-forge .bullet-type-option:hover{background:#e0e0e0}.react-text-forge .dropdown{position:relative;display:flex}.react-text-forge .dropdown-toggle{background:none;border:none;cursor:pointer;padding:0}.react-text-forge .dropdown-menu{position:absolute;top:100%;background:#fff;border:1px solid #ccc;box-shadow:0 2px 8px #0000001a;list-style:none;height:100px;overflow-y:scroll;padding:10px 0;margin:5px 0;z-index:1000}.react-text-forge .dropdown-menu li{min-width:200px;width:max-content;height:20px;padding:5px 10px;line-height:20px;cursor:pointer}.react-text-forge .dropdown-menu li:hover{background:#f0f0f0}.react-text-forge pre{background-color:#6e6565;border:1px solid #ddd;border-radius:4px;padding:10px;overflow-x:auto;font-family:Consolas,Monaco,Courier New,monospace;font-size:14px;line-height:1.4;margin:1em 0}.react-text-forge .link-form{position:absolute;top:40px;left:0;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 10px #0000001a;padding:16px;z-index:10}.react-text-forge .link-form input[type=text]{width:calc(100% - 22px);padding:8px;margin-bottom:10px;border:1px solid #ccc;border-radius:4px}.react-text-forge .link-form label{display:flex;align-items:center;margin-bottom:10px}.react-text-forge .link-form label input[type=checkbox]{margin-right:8px}.react-text-forge .link-form-actions{display:flex;justify-content:flex-end;padding:10px;gap:8px}.react-text-forge .link-form-actions button{padding:8px 16px;border:none;border-radius:4px;cursor:pointer}.react-text-forge .image-upload-container{position:relative}.react-text-forge .hidden-file-input{display:none}.react-text-forge .table-grid-form{display:flex;flex-direction:column;align-items:center;height:fit-content;width:fit-content;overflow:visible;padding:0;border:0}.react-text-forge .table-grid-form .grid-container{display:grid;grid-template-columns:repeat(5,20px);grid-template-rows:repeat(5,20px);gap:2px}.react-text-forge .table-grid-form .grid-cell{width:20px;height:20px;background-color:#ddd;border:1px solid #ccc}.react-text-forge .table-grid-form .grid-cell.hovered{background-color:#007bff}.react-text-forge .table-grid-form .table-size-indicator{margin-top:10px;font-size:14px}.react-text-forge ::selection{background:#0078d74d;color:#000}.react-text-forge ::-moz-selection{background:#0078d74d;color:#000}.react-text-forge a{font-weight:500;color:#646cff;text-decoration:inherit}.react-text-forge a:hover{color:#535bf2}
|