react-text-forge 1.3.1 → 1.3.3
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/dist/react-text-forge.css +1 -1
- package/dist/react-text-forge.js +229 -183
- package/dist/react-text-forge.umd.cjs +9 -9
- package/dist/src/components/utils/form/ListSelector/ListPreview.d.ts +5 -0
- package/dist/src/components/utils/form/{NumeredTypeSelector.d.ts → ListSelector/TypeSelector.d.ts} +2 -2
- package/package.json +1 -1
- package/dist/src/components/utils/form/BulletTypeSelector.d.ts +0 -16
|
@@ -1 +1 @@
|
|
|
1
|
-
.tooltip-container{position:relative;display:inline-block}.tooltip{position:absolute;padding:10px 8px;border-radius:5px;font-size:14px;border:1px solid;white-space:nowrap;z-index:100;opacity:0;transition:opacity .2s;pointer-events:none;box-shadow:0 2px 4px #0000001a}.tooltip--visible{opacity:1}.tooltip--bottom{top:100%;left:50%;transform:translate(-50%);margin-top:8px}.rtf.toolbar-container{position:relative;width:100%}.rtf.toolbar{display:flex;gap:5px;margin-bottom:10px;white-space:nowrap}.rtf.toolbar>div.rtf{display:flex}.rtf.toolbar select.rtf,.rtf.toolbar select:focus.rtf{outline:none;border:none;background:none}.rtf.toolbar select.rtf option.rtf,.rtf.toolbar select:focus.rtf option.rtf{border:none;outline:none;background:none;padding:0}@media (max-width: 768px){.rtf.toolbar select.rtf,.rtf.toolbar select:focus.rtf{font-size:20px}}.rtf.toolbar-more-button{background:none;border:none;cursor:pointer;padding:0 8px;font-size:16px}.rtf.toolbar-modal{position:absolute;top:100%;right:0;z-index:1000;max-width:500px;border-radius:4px;padding:8px;box-shadow:0 2px 8px #0000001a;display:flex;flex-wrap:wrap;gap:4px}.rtf.toolbar-modal .color-picker-popup{left:0%}.rtf.toolbar-modal-item{margin:4px}.rtf.tool{padding:5px;display:flex;justify-content:center;align-items:center;border:none;border-radius:3px;background:none;cursor:pointer;outline:none}.rtf.tool--arrow{background:none;border:none;cursor:pointer;
|
|
1
|
+
.tooltip-container{position:relative;display:inline-block}.tooltip{position:absolute;padding:10px 8px;border-radius:5px;font-size:14px;border:1px solid;white-space:nowrap;z-index:100;opacity:0;transition:opacity .2s;pointer-events:none;box-shadow:0 2px 4px #0000001a}.tooltip--visible{opacity:1}.tooltip--bottom{top:100%;left:50%;transform:translate(-50%);margin-top:8px}.rtf.toolbar-container{position:relative;width:100%}.rtf.toolbar{display:flex;gap:5px;margin-bottom:10px;white-space:nowrap}.rtf.toolbar>div.rtf{display:flex}.rtf.toolbar select.rtf,.rtf.toolbar select:focus.rtf{outline:none;border:none;background:none}.rtf.toolbar select.rtf option.rtf,.rtf.toolbar select:focus.rtf option.rtf{border:none;outline:none;background:none;padding:0}@media (max-width: 768px){.rtf.toolbar select.rtf,.rtf.toolbar select:focus.rtf{font-size:20px}}.rtf.toolbar-more-button{background:none;border:none;cursor:pointer;padding:0 8px;font-size:16px}.rtf.toolbar-modal{position:absolute;top:100%;right:0;z-index:1000;max-width:500px;border-radius:4px;padding:8px;box-shadow:0 2px 8px #0000001a;display:flex;flex-wrap:wrap;gap:4px}.rtf.toolbar-modal .color-picker-popup{left:0%}.rtf.toolbar-modal-item{margin:4px}.rtf.tool{padding:5px;display:flex;justify-content:center;align-items:center;border:none;border-radius:3px;background:none;cursor:pointer;outline:none}.rtf.tool--arrow{background:none;border:none;cursor:pointer;margin-left:4px;position:relative;padding:0;width:15px}.rtf.tool--arrow svg.rtf{position:absolute;width:20px!important;height:20px!important}@media (max-width: 768px){.rtf.tool--arrow{width:20px}.rtf.tool--arrow svg.rtf{width:30px!important;height:30px!important}}.rtf.tool img.rtf,.rtf.tool svg.rtf{cursor:pointer;width:15px;height:15px}@media (max-width: 768px){.rtf.tool img.rtf,.rtf.tool svg.rtf{width:20px;height:20px}}.rtf.toggle-switch{position:absolute;bottom:15px;display:inline-block;width:70px;height:34px}.rtf.toggle-switch input.rtf{opacity:0;width:0;height:0}.rtf.toggle-switch .rtf.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:none;transition:.4s;border-radius:34px;border:1px solid}.rtf.toggle-switch .rtf.icon{position:absolute;display:flex;justify-content:center;align-items:center;border-radius:50%;width:25px;height:25px;top:50%;left:17px;transform:translate(-50%,-50%);font-size:16px;color:#ff9800;transition:.4s}.rtf.toggle-switch input:checked.rtf+.rtf.slider{background-color:none}.rtf.toggle-switch input:checked.rtf+.rtf.slider .rtf.icon{color:#fff;left:calc(100% - 17px)}.rtf.toggle-switch .rtf.slider.round{border-radius:34px}.rtf.fullscreen-wrapper{transition:all .3s ease;width:100%;height:auto}.rtf.fullscreen-wrapper--active{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;background-color:var(--background-color);z-index:1000;padding:20px;box-sizing:border-box;overflow-y:auto}.rtf.fullscreen-wrapper--active .rtf.toolbar{position:sticky;top:0;background-color:var(--toolbar-background);z-index:1001;padding:10px;border-radius:0 0 8px 8px;box-shadow:0 2px 4px #0000001a}.rtf.fullscreen-wrapper--active .rtf.react-text-forge{min-height:calc(100vh - 100px);margin:20px auto;width:100%}.rtf.fullscreen-wrapper--active .rtf.rtf__editor{flex-grow:1}.rtf.fullscreen-button{position:absolute;bottom:10px;right:20px}.rtf.fullscreen-button .rtf.tool{width:30px;height:30px}.rtf.fullscreen-button .rtf.tool svg.rtf{width:30px;height:30px}code[class*=language-],pre[class*=language-]{color:#ccc;background:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.block-comment,.token.prolog,.token.doctype,.token.cdata{color:#999}.token.punctuation{color:#ccc}.token.tag,.token.attr-name,.token.namespace,.token.deleted{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.number,.token.function{color:#f08d49}.token.property,.token.class-name,.token.constant,.token.symbol{color:#f8c555}.token.selector,.token.important,.token.atrule,.token.keyword,.token.builtin{color:#cc99cd}.token.string,.token.char,.token.attr-value,.token.regex,.token.variable{color:#7ec699}.token.operator,.token.entity,.token.url{color:#67cdcc}.token.important,.token.bold{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}.rtf.react-text-forge{position:relative;display:flex;flex-direction:column;max-width:80%;margin:0 auto;border:1px solid;padding:10px;border-radius:5px}@media (max-width: 768px){.rtf.react-text-forge{max-width:70%}}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.rtf.react-text-forge .rtf.rtf__editor{min-height:50px;border:1px solid #ddd;padding:10px;border-radius:5px;outline:none;overflow:scroll}.rtf.react-text-forge .rtf.rtf__editor a{pointer-events:auto;cursor:pointer}.rtf.react-text-forge .rtf.rtf__editor img.rtf{max-height:200px}.rtf.react-text-forge .rtf.rtf__editor table.rtf{width:100%;table-layout:fixed;border-collapse:collapse}.rtf.react-text-forge .rtf.rtf__editor table.rtf tr.rtf{display:flex;width:100%}.rtf.react-text-forge .rtf.rtf__editor table.rtf th.rtf,.rtf.react-text-forge .rtf.rtf__editor table.rtf td.rtf{display:block;width:100%;height:40px;max-height:40px;border:1px solid;border-color:inherit;padding:8px;overflow-y:scroll}.rtf.react-text-forge .rtf.color-picker-popup{position:absolute;top:100%;width:fit-content}@media (max-width: 768px){.rtf.react-text-forge .rtf.color-picker-popup{right:0}}.rtf.react-text-forge .rtf.color-picker-popup .sketch-picker{position:relative;z-index:2}.rtf.react-text-forge .rtf.dropdown{position:relative;display:flex}.rtf.react-text-forge .rtf.dropdown-toggle{background:none;border:none;cursor:pointer;padding:0}.rtf.react-text-forge .rtf.dropdown-toggle--list{border-bottom-left-radius:0;border-bottom-right-radius:0}.rtf.react-text-forge .rtf.dropdown-menu{width:200px;position:absolute;display:flex;flex-wrap:wrap;gap:10px;top:100%;border:1px solid #ccc;box-shadow:0 2px 8px #0000001a;list-style:none;padding:0;margin-bottom:5px;margin-top:0;z-index:1000}@media (max-width: 768px){.rtf.react-text-forge .rtf.dropdown-menu{right:0}}.rtf.react-text-forge .rtf.dropdown-menu li{flex:0 0 calc(25% - 30px);box-sizing:border-box;padding:5px;cursor:pointer}.rtf.react-text-forge .rtf.dropdown-menu li:hover{background:#f0f0f0}.rtf.react-text-forge pre.rtf{background-color:#1a1a1a;border:1px solid #3b3737;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}.rtf.react-text-forge pre.rtf .code-language{color:#fff;border:1px solid;width:fit-content;margin-left:auto;border-bottom-left-radius:5px;padding:3px;position:relative;top:-11px;right:-11px}.rtf.react-text-forge .rtf.link-form{position:absolute;top:40px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 10px #0000001a;padding:16px;z-index:10}@media (max-width: 768px){.rtf.react-text-forge .rtf.link-form{right:0}}.rtf.react-text-forge .rtf.link-form input[type=text].rtf{width:calc(100% - 22px);padding:8px;margin-bottom:10px;border:1px solid #ccc;border-radius:4px}.rtf.react-text-forge .rtf.link-form label.rtf{display:flex;align-items:center;margin-bottom:10px}.rtf.react-text-forge .rtf.link-form label.rtf input[type=checkbox].rtf{margin-right:8px}.rtf.react-text-forge .rtf.link-form-actions{display:flex;justify-content:flex-end;padding:10px;gap:8px}.rtf.react-text-forge .rtf.link-form-actions button.rtf{padding:8px 16px;border:none;border-radius:4px;cursor:pointer}.rtf.react-text-forge .rtf.image-upload-container{position:relative}.rtf.react-text-forge .rtf.hidden-file-input{display:none}.rtf.react-text-forge .rtf.table-grid-form{display:flex;flex-direction:column;align-items:center;height:fit-content;width:fit-content;overflow:visible;padding:0;border:0}.rtf.react-text-forge .rtf.table-grid-form .rtf.grid-container{display:grid;grid-template-columns:repeat(5,20px);grid-template-rows:repeat(5,20px);gap:2px}.rtf.react-text-forge .rtf.table-grid-form .rtf.grid-cell{width:20px;height:20px;background-color:#ddd;border:1px solid #ccc}.rtf.react-text-forge .rtf.table-grid-form .rtf.grid-cell.hovered{background-color:#007bff}.rtf.react-text-forge .rtf.table-grid-form .rtf.table-size-indicator{margin-top:10px;font-size:14px}.rtf.react-text-forge ::selection{background:#0078d74d;color:#000}.rtf.react-text-forge ::-moz-selection{background:#0078d74d;color:#000}.rtf.react-text-forge a{font-weight:500;color:#646cff;text-decoration:inherit}.rtf.react-text-forge a:hover{color:#535bf2}
|
package/dist/react-text-forge.js
CHANGED
|
@@ -977,38 +977,48 @@ const CustomEditor = {
|
|
|
977
977
|
if (isHeading) {
|
|
978
978
|
Editor.removeMark(editor, "fontSize");
|
|
979
979
|
}
|
|
980
|
-
if (isList
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
980
|
+
if (isList) {
|
|
981
|
+
if (CustomEditor.isSelectionInList(editor)) {
|
|
982
|
+
if (this.getCurrentBlock(editor, editor.selection) === blockType) {
|
|
983
|
+
console.log(this.getCurrentBlock(editor, editor.selection), blockType, bulletType);
|
|
984
|
+
if (bulletType) {
|
|
985
|
+
Transforms.setNodes(editor, { listStyleType: bulletType });
|
|
986
|
+
return;
|
|
987
|
+
} else {
|
|
988
|
+
Transforms.unwrapNodes(editor, {
|
|
989
|
+
match: (n) => !Editor.isEditor(n) && Element$1.isElement(n) && (n.type === "bullet-list" || n.type === "numbered-list"),
|
|
990
|
+
split: true
|
|
991
|
+
});
|
|
992
|
+
Transforms.setNodes(editor, { type: "paragraph" });
|
|
993
|
+
}
|
|
994
|
+
} else {
|
|
995
|
+
Transforms.unwrapNodes(editor, {
|
|
996
|
+
match: (n) => !Editor.isEditor(n) && Element$1.isElement(n) && (n.type === "bullet-list" || n.type === "numbered-list"),
|
|
997
|
+
split: true
|
|
998
|
+
});
|
|
999
|
+
Transforms.setNodes(editor, { type: "paragraph" });
|
|
1000
|
+
Transforms.setNodes(editor, { type: "list-item" });
|
|
1001
|
+
const block = { type: blockType, children: [] };
|
|
1002
|
+
Transforms.wrapNodes(editor, block);
|
|
1003
|
+
if (bulletType) {
|
|
1004
|
+
Transforms.setNodes(editor, { listStyleType: bulletType });
|
|
1005
|
+
}
|
|
1006
|
+
}
|
|
1007
|
+
return;
|
|
1008
|
+
} else {
|
|
1009
|
+
Transforms.setNodes(editor, { type: "list-item" });
|
|
998
1010
|
const block = { type: blockType, children: [] };
|
|
999
1011
|
Transforms.wrapNodes(editor, block);
|
|
1012
|
+
if (bulletType) {
|
|
1013
|
+
Transforms.setNodes(editor, { listStyleType: bulletType });
|
|
1014
|
+
}
|
|
1015
|
+
return;
|
|
1000
1016
|
}
|
|
1001
|
-
} else {
|
|
1002
|
-
Transforms.setNodes(editor, { listStyleType: bulletType });
|
|
1003
|
-
const path = Editor.range(editor, editor.selection).anchor.path;
|
|
1004
|
-
let newPath = path;
|
|
1005
|
-
if (path.length === 3) {
|
|
1006
|
-
newPath = newPath.slice(0, 1);
|
|
1007
|
-
} else if (path.length === 4) {
|
|
1008
|
-
newPath = newPath.slice(0, 2);
|
|
1009
|
-
}
|
|
1010
|
-
Transforms.setNodes(editor, { type: blockType }, { at: newPath });
|
|
1011
1017
|
}
|
|
1018
|
+
const newProperties = {
|
|
1019
|
+
type: isActive ? "paragraph" : blockType
|
|
1020
|
+
};
|
|
1021
|
+
Transforms.setNodes(editor, newProperties);
|
|
1012
1022
|
},
|
|
1013
1023
|
/**
|
|
1014
1024
|
* Permet de définir si le bloc défini possède un alignement
|
|
@@ -1757,7 +1767,7 @@ const ListElement = ({ attributes, children, element }) => {
|
|
|
1757
1767
|
textAlign: element.align || "left",
|
|
1758
1768
|
listStyleType: element.listStyleType || "disc"
|
|
1759
1769
|
};
|
|
1760
|
-
console.log(element
|
|
1770
|
+
console.log(element);
|
|
1761
1771
|
switch (element.type) {
|
|
1762
1772
|
case "bullet-list":
|
|
1763
1773
|
return /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "rtf", style, ...attributes, children });
|
|
@@ -1792,144 +1802,6 @@ const ListElement = ({ attributes, children, element }) => {
|
|
|
1792
1802
|
const BlockquoteElement = ({ attributes, children }) => {
|
|
1793
1803
|
return /* @__PURE__ */ jsxRuntimeExports.jsx("blockquote", { className: "rtf", ...attributes, style: { borderLeft: "4px solid #ccc", paddingLeft: "10px", color: "#666", margin: "20px 0" }, children });
|
|
1794
1804
|
};
|
|
1795
|
-
/**
|
|
1796
|
-
* @license
|
|
1797
|
-
* Copyright (c) 2025 Jahylis
|
|
1798
|
-
*
|
|
1799
|
-
* This file is part of ReactTextForge.
|
|
1800
|
-
*
|
|
1801
|
-
* ReactTextForge is free software: you can redistribute it and/or modify
|
|
1802
|
-
* it under the terms of the MIT License as published by
|
|
1803
|
-
* the Open Source Initiative.
|
|
1804
|
-
*
|
|
1805
|
-
* ReactTextForge is distributed in the hope that it will be useful,
|
|
1806
|
-
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
1807
|
-
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
1808
|
-
* MIT License for more details.
|
|
1809
|
-
*
|
|
1810
|
-
* You should have received a copy of the MIT License
|
|
1811
|
-
* along with ReactTextForge. If not, see <https://opensource.org/licenses/MIT>.
|
|
1812
|
-
*
|
|
1813
|
-
* For any questions or suggestions, please contact: administrateur@nhumeria.fr
|
|
1814
|
-
*/
|
|
1815
|
-
function isDarkColor(color) {
|
|
1816
|
-
let r, g, b;
|
|
1817
|
-
if (color.startsWith("#")) {
|
|
1818
|
-
color = color.replace(/^#/, "");
|
|
1819
|
-
r = parseInt(color.substring(0, 2), 16) / 255;
|
|
1820
|
-
g = parseInt(color.substring(2, 4), 16) / 255;
|
|
1821
|
-
b = parseInt(color.substring(4, 6), 16) / 255;
|
|
1822
|
-
} else if (color.startsWith("rgb")) {
|
|
1823
|
-
const values = color.match(/\d+/g).map(Number);
|
|
1824
|
-
r = values[0] / 255;
|
|
1825
|
-
g = values[1] / 255;
|
|
1826
|
-
b = values[2] / 255;
|
|
1827
|
-
} else {
|
|
1828
|
-
throw new Error("Format de couleur non pris en charge");
|
|
1829
|
-
}
|
|
1830
|
-
const rLinear = r <= 0.04045 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4);
|
|
1831
|
-
const gLinear = g <= 0.04045 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4);
|
|
1832
|
-
const bLinear = b <= 0.04045 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4);
|
|
1833
|
-
const luminance = 0.2126 * rLinear + 0.7152 * gLinear + 0.0722 * bLinear;
|
|
1834
|
-
return luminance < 0.5;
|
|
1835
|
-
}
|
|
1836
|
-
const ThemeContext = createContext({
|
|
1837
|
-
theme: "light",
|
|
1838
|
-
toggleTheme: () => {
|
|
1839
|
-
},
|
|
1840
|
-
isDarkTheme: false
|
|
1841
|
-
});
|
|
1842
|
-
const ThemeProvider = ({ showTheme, backgroundDarkColor, borderDarkColor, imageDarkColor, children }) => {
|
|
1843
|
-
const [theme, setTheme] = useState("light");
|
|
1844
|
-
useEffect(() => {
|
|
1845
|
-
if (showTheme) {
|
|
1846
|
-
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
1847
|
-
setTheme(mediaQuery.matches ? "dark" : "light");
|
|
1848
|
-
const handleSystemThemeChange = (e) => {
|
|
1849
|
-
setTheme(e.matches ? "dark" : "light");
|
|
1850
|
-
};
|
|
1851
|
-
mediaQuery.addEventListener("change", handleSystemThemeChange);
|
|
1852
|
-
return () => {
|
|
1853
|
-
mediaQuery.removeEventListener("change", handleSystemThemeChange);
|
|
1854
|
-
};
|
|
1855
|
-
}
|
|
1856
|
-
}, []);
|
|
1857
|
-
useEffect(() => {
|
|
1858
|
-
document.documentElement.setAttribute("data-theme", theme);
|
|
1859
|
-
}, [theme]);
|
|
1860
|
-
const toggleTheme = () => {
|
|
1861
|
-
setTheme((prev) => prev === "light" ? "dark" : "light");
|
|
1862
|
-
};
|
|
1863
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeContext.Provider, { value: { theme, toggleTheme, showTheme, isDarkTheme: theme === "dark", backgroundDarkColor, borderDarkColor, imageDarkColor }, children });
|
|
1864
|
-
};
|
|
1865
|
-
const useTheme = () => useContext(ThemeContext);
|
|
1866
|
-
const ReactTextForgeContext = createContext();
|
|
1867
|
-
const ReactTextForgeProvider = ({ backgroundColor, borderColor, imageColor, editor, children }) => {
|
|
1868
|
-
const [dropdownActive, setDropdownActive] = useState(null);
|
|
1869
|
-
const { showTheme, isDarkTheme, backgroundDarkColor, borderDarkColor, imageDarkColor } = useTheme();
|
|
1870
|
-
const resolvedBackgroundColor = showTheme && isDarkTheme ? backgroundDarkColor : backgroundColor;
|
|
1871
|
-
const resolvedBorderColor = showTheme && isDarkTheme ? borderDarkColor : borderColor;
|
|
1872
|
-
const resolvedImageColor = showTheme && isDarkTheme ? imageDarkColor : imageColor;
|
|
1873
|
-
useEffect(() => {
|
|
1874
|
-
document.documentElement.style.setProperty("--background-color", resolvedBackgroundColor);
|
|
1875
|
-
document.documentElement.style.setProperty("--border-color", resolvedBorderColor);
|
|
1876
|
-
document.documentElement.style.setProperty("--image-color", resolvedImageColor);
|
|
1877
|
-
}, [resolvedBackgroundColor, resolvedBorderColor, resolvedImageColor]);
|
|
1878
|
-
const value = {
|
|
1879
|
-
backgroundColor: resolvedBackgroundColor,
|
|
1880
|
-
borderColor: resolvedBorderColor,
|
|
1881
|
-
editor,
|
|
1882
|
-
imageColor: resolvedImageColor,
|
|
1883
|
-
dropdownActive,
|
|
1884
|
-
setDropdownActive
|
|
1885
|
-
};
|
|
1886
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsx(ReactTextForgeContext.Provider, { value, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rtf react-text-forge", style: { backgroundColor: resolvedBackgroundColor, borderColor: resolvedBorderColor }, children }) });
|
|
1887
|
-
};
|
|
1888
|
-
const useReactTextForgeContext = () => {
|
|
1889
|
-
return useContext(ReactTextForgeContext);
|
|
1890
|
-
};
|
|
1891
|
-
const BulletTypeSelector = ({ onChange, selectStyle, onClose }) => {
|
|
1892
|
-
const bulletTypes = [
|
|
1893
|
-
{ value: "disc", label: "Disque" },
|
|
1894
|
-
{ value: "circle", label: "Cercle" },
|
|
1895
|
-
{ value: "square", label: "Carré" },
|
|
1896
|
-
{ value: "'✔'", label: "Check" },
|
|
1897
|
-
{ value: "'✘'", label: "Croix" },
|
|
1898
|
-
{ value: "'➢'", label: "Petite flèche" },
|
|
1899
|
-
{ value: "'➔'", label: "Flèche épaisse" }
|
|
1900
|
-
];
|
|
1901
|
-
const { editor } = useReactTextForgeContext();
|
|
1902
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { onMouseLeave: onClose, style: selectStyle, className: "rtf dropdown-menu", children: bulletTypes.map((type) => /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1903
|
-
"li",
|
|
1904
|
-
{
|
|
1905
|
-
value: type.value,
|
|
1906
|
-
onClick: () => onChange(type.value),
|
|
1907
|
-
style: { backgroundColor: `${type.value === CustomEditor.getListStyleType(editor) ? `color-mix(in srgb, ${selectStyle.backgroundColor} 80%, ${isDarkColor(selectStyle.backgroundColor) ? "white" : "black"})` : selectStyle.backgroundColor}` },
|
|
1908
|
-
children: type.label
|
|
1909
|
-
},
|
|
1910
|
-
type.value
|
|
1911
|
-
)) });
|
|
1912
|
-
};
|
|
1913
|
-
const NumeredTypeSelector = ({ onChange, selectStyle, onClose }) => {
|
|
1914
|
-
const numeredTypes = [
|
|
1915
|
-
{ value: "decimal", label: "Décimal" },
|
|
1916
|
-
{ value: "upper-roman", label: "Lettres Romaines majuscules" },
|
|
1917
|
-
{ value: "lower-roman", label: "Lettres Romaines minuscules" },
|
|
1918
|
-
{ value: "upper-greek", label: "Lettres Grecques majuscules" },
|
|
1919
|
-
{ value: "lower-greek", label: "Lettres Grecques minuscules" }
|
|
1920
|
-
];
|
|
1921
|
-
const { editor } = useReactTextForgeContext();
|
|
1922
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { onMouseLeave: onClose, style: selectStyle, className: "rtf dropdown-menu", children: numeredTypes.map((type) => /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1923
|
-
"li",
|
|
1924
|
-
{
|
|
1925
|
-
value: type.value,
|
|
1926
|
-
onClick: () => onChange(type.value),
|
|
1927
|
-
style: { backgroundColor: `${type.value === CustomEditor.getListStyleType(editor) ? `color-mix(in srgb, ${selectStyle.backgroundColor} 80%, ${isDarkColor(selectStyle.backgroundColor) ? "white" : "black"})` : selectStyle.backgroundColor}` },
|
|
1928
|
-
children: type.label
|
|
1929
|
-
},
|
|
1930
|
-
type.value
|
|
1931
|
-
)) });
|
|
1932
|
-
};
|
|
1933
1805
|
/**
|
|
1934
1806
|
* @license
|
|
1935
1807
|
* Copyright (c) 2025 Jahylis
|
|
@@ -1957,6 +1829,8 @@ function Images({ format, imageColor }) {
|
|
|
1957
1829
|
return /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: "rtf", width: "800px", height: "800px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx("g", { id: "Edit / Add_Column", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { id: "Vector", d: "M5 17H8M8 17H11M8 17V14M8 17V20M14 21H15C16.1046 21 17 20.1046 17 19V5C17 3.89543 16.1046 3 15 3H13C11.8954 3 11 3.89543 11 5V11", stroke: imageColor, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) });
|
|
1958
1830
|
case "addRow":
|
|
1959
1831
|
return /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: "rtf", width: "800px", height: "800px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx("g", { id: "Edit / Add_Row", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { id: "Vector", d: "M3 14V15C3 16.1046 3.89543 17 5 17L19 17C20.1046 17 21 16.1046 21 15L21 13C21 11.8954 20.1046 11 19 11H13M10 8H7M7 8H4M7 8V5M7 8V11", stroke: imageColor, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) });
|
|
1832
|
+
case "arrow":
|
|
1833
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: "rtf", fill: imageColor, viewBox: "0 0 1920 1920", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M994.034 1226.26c-18.796 27.296-49.269 27.3-68.067 0L574.893 716.424C556.096 689.128 567.713 667 600.852 667h718.297c33.133 0 44.757 22.125 25.959 49.424L994.034 1226.26Z", fillRule: "evenodd" }) });
|
|
1960
1834
|
case "bgColor":
|
|
1961
1835
|
return /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: "rtf", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { fill: imageColor, d: "M86.6 9.4C74.1-3.1 53.9-3.1 41.4 9.4s-12.5 32.8 0 45.3L122.7 136 30.6 228.1c-37.5 37.5-37.5 98.3 0 135.8L148.1 481.4c37.5 37.5 98.3 37.5 135.8 0L474.3 290.9c28.1-28.1 28.1-73.7 0-101.8L322.9 37.7c-28.1-28.1-73.7-28.1-101.8 0L168 90.7 86.6 9.4zM168 181.3l49.4 49.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L213.3 136l53.1-53.1c3.1-3.1 8.2-3.1 11.3 0L429.1 234.3c3.1 3.1 3.1 8.2 0 11.3L386.7 288 67.5 288c1.4-5.4 4.2-10.4 8.4-14.6L168 181.3z" }) });
|
|
1962
1836
|
case "blockCode":
|
|
@@ -2035,6 +1909,148 @@ function Images({ format, imageColor }) {
|
|
|
2035
1909
|
};
|
|
2036
1910
|
return returnImage();
|
|
2037
1911
|
}
|
|
1912
|
+
const ThemeContext = createContext({
|
|
1913
|
+
theme: "light",
|
|
1914
|
+
toggleTheme: () => {
|
|
1915
|
+
},
|
|
1916
|
+
isDarkTheme: false
|
|
1917
|
+
});
|
|
1918
|
+
const ThemeProvider = ({ showTheme, backgroundDarkColor, borderDarkColor, imageDarkColor, children }) => {
|
|
1919
|
+
const [theme, setTheme] = useState("light");
|
|
1920
|
+
useEffect(() => {
|
|
1921
|
+
if (showTheme) {
|
|
1922
|
+
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
1923
|
+
setTheme(mediaQuery.matches ? "dark" : "light");
|
|
1924
|
+
const handleSystemThemeChange = (e) => {
|
|
1925
|
+
setTheme(e.matches ? "dark" : "light");
|
|
1926
|
+
};
|
|
1927
|
+
mediaQuery.addEventListener("change", handleSystemThemeChange);
|
|
1928
|
+
return () => {
|
|
1929
|
+
mediaQuery.removeEventListener("change", handleSystemThemeChange);
|
|
1930
|
+
};
|
|
1931
|
+
}
|
|
1932
|
+
}, []);
|
|
1933
|
+
useEffect(() => {
|
|
1934
|
+
document.documentElement.setAttribute("data-theme", theme);
|
|
1935
|
+
}, [theme]);
|
|
1936
|
+
const toggleTheme = () => {
|
|
1937
|
+
setTheme((prev) => prev === "light" ? "dark" : "light");
|
|
1938
|
+
};
|
|
1939
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeContext.Provider, { value: { theme, toggleTheme, showTheme, isDarkTheme: theme === "dark", backgroundDarkColor, borderDarkColor, imageDarkColor }, children });
|
|
1940
|
+
};
|
|
1941
|
+
const useTheme = () => useContext(ThemeContext);
|
|
1942
|
+
const ReactTextForgeContext = createContext();
|
|
1943
|
+
const ReactTextForgeProvider = ({ backgroundColor, borderColor, imageColor, editor, children }) => {
|
|
1944
|
+
const [dropdownActive, setDropdownActive] = useState(null);
|
|
1945
|
+
const { showTheme, isDarkTheme, backgroundDarkColor, borderDarkColor, imageDarkColor } = useTheme();
|
|
1946
|
+
const resolvedBackgroundColor = showTheme && isDarkTheme ? backgroundDarkColor : backgroundColor;
|
|
1947
|
+
const resolvedBorderColor = showTheme && isDarkTheme ? borderDarkColor : borderColor;
|
|
1948
|
+
const resolvedImageColor = showTheme && isDarkTheme ? imageDarkColor : imageColor;
|
|
1949
|
+
useEffect(() => {
|
|
1950
|
+
document.documentElement.style.setProperty("--background-color", resolvedBackgroundColor);
|
|
1951
|
+
document.documentElement.style.setProperty("--border-color", resolvedBorderColor);
|
|
1952
|
+
document.documentElement.style.setProperty("--image-color", resolvedImageColor);
|
|
1953
|
+
}, [resolvedBackgroundColor, resolvedBorderColor, resolvedImageColor]);
|
|
1954
|
+
const value = {
|
|
1955
|
+
backgroundColor: resolvedBackgroundColor,
|
|
1956
|
+
borderColor: resolvedBorderColor,
|
|
1957
|
+
editor,
|
|
1958
|
+
imageColor: resolvedImageColor,
|
|
1959
|
+
dropdownActive,
|
|
1960
|
+
setDropdownActive
|
|
1961
|
+
};
|
|
1962
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(ReactTextForgeContext.Provider, { value, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rtf react-text-forge", style: { backgroundColor: resolvedBackgroundColor, borderColor: resolvedBorderColor }, children }) });
|
|
1963
|
+
};
|
|
1964
|
+
const useReactTextForgeContext = () => {
|
|
1965
|
+
return useContext(ReactTextForgeContext);
|
|
1966
|
+
};
|
|
1967
|
+
/**
|
|
1968
|
+
* @license
|
|
1969
|
+
* Copyright (c) 2025 Jahylis
|
|
1970
|
+
*
|
|
1971
|
+
* This file is part of ReactTextForge.
|
|
1972
|
+
*
|
|
1973
|
+
* ReactTextForge is free software: you can redistribute it and/or modify
|
|
1974
|
+
* it under the terms of the MIT License as published by
|
|
1975
|
+
* the Open Source Initiative.
|
|
1976
|
+
*
|
|
1977
|
+
* ReactTextForge is distributed in the hope that it will be useful,
|
|
1978
|
+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
1979
|
+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
1980
|
+
* MIT License for more details.
|
|
1981
|
+
*
|
|
1982
|
+
* You should have received a copy of the MIT License
|
|
1983
|
+
* along with ReactTextForge. If not, see <https://opensource.org/licenses/MIT>.
|
|
1984
|
+
*
|
|
1985
|
+
* For any questions or suggestions, please contact: administrateur@nhumeria.fr
|
|
1986
|
+
*/
|
|
1987
|
+
function isDarkColor(color) {
|
|
1988
|
+
let r, g, b;
|
|
1989
|
+
if (color.startsWith("#")) {
|
|
1990
|
+
color = color.replace(/^#/, "");
|
|
1991
|
+
r = parseInt(color.substring(0, 2), 16) / 255;
|
|
1992
|
+
g = parseInt(color.substring(2, 4), 16) / 255;
|
|
1993
|
+
b = parseInt(color.substring(4, 6), 16) / 255;
|
|
1994
|
+
} else if (color.startsWith("rgb")) {
|
|
1995
|
+
const values = color.match(/\d+/g).map(Number);
|
|
1996
|
+
r = values[0] / 255;
|
|
1997
|
+
g = values[1] / 255;
|
|
1998
|
+
b = values[2] / 255;
|
|
1999
|
+
} else {
|
|
2000
|
+
throw new Error("Format de couleur non pris en charge");
|
|
2001
|
+
}
|
|
2002
|
+
const rLinear = r <= 0.04045 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4);
|
|
2003
|
+
const gLinear = g <= 0.04045 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4);
|
|
2004
|
+
const bLinear = b <= 0.04045 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4);
|
|
2005
|
+
const luminance = 0.2126 * rLinear + 0.7152 * gLinear + 0.0722 * bLinear;
|
|
2006
|
+
return luminance < 0.5;
|
|
2007
|
+
}
|
|
2008
|
+
const ListPreview = ({ type, selectStyle }) => {
|
|
2009
|
+
const textColor = isDarkColor(selectStyle.color) ? "white" : "black";
|
|
2010
|
+
const listStyle = {
|
|
2011
|
+
pointerEvents: "none",
|
|
2012
|
+
listStyleType: type,
|
|
2013
|
+
margin: 0,
|
|
2014
|
+
paddingLeft: "20px",
|
|
2015
|
+
paddingTop: "2px",
|
|
2016
|
+
paddingBottom: "2px"
|
|
2017
|
+
};
|
|
2018
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
2019
|
+
"div",
|
|
2020
|
+
{
|
|
2021
|
+
style: {
|
|
2022
|
+
display: "flex",
|
|
2023
|
+
alignItems: "center",
|
|
2024
|
+
padding: "4px 0",
|
|
2025
|
+
fontSize: "12px",
|
|
2026
|
+
color: textColor
|
|
2027
|
+
},
|
|
2028
|
+
children: /* @__PURE__ */ jsxRuntimeExports.jsxs("ul", { style: listStyle, children: [
|
|
2029
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("li", { style: { marginBottom: "2px" }, children: "------------" }),
|
|
2030
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: "------------" })
|
|
2031
|
+
] })
|
|
2032
|
+
}
|
|
2033
|
+
);
|
|
2034
|
+
};
|
|
2035
|
+
const TypeSelector = ({ types, onChange, selectStyle, onClose }) => {
|
|
2036
|
+
const { editor } = useReactTextForgeContext();
|
|
2037
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { onMouseLeave: onClose, className: "rtf dropdown-menu", style: { backgroundColor: `color-mix(in srgb, ${selectStyle.backgroundColor} 50%, ${isDarkColor(selectStyle.backgroundColor) ? "white" : "black"})`, color: selectStyle.imageColor }, children: types.map((type) => /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
2038
|
+
"li",
|
|
2039
|
+
{
|
|
2040
|
+
value: type.value,
|
|
2041
|
+
onClick: () => onChange(type.value),
|
|
2042
|
+
style: { backgroundColor: `color-mix(in srgb, ${selectStyle.backgroundColor} ${type.value === CustomEditor.getListStyleType(editor) ? "30%" : "50%"}, ${isDarkColor(selectStyle.backgroundColor) ? "white" : "black"})` },
|
|
2043
|
+
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
2044
|
+
ListPreview,
|
|
2045
|
+
{
|
|
2046
|
+
type: type.value,
|
|
2047
|
+
selectStyle
|
|
2048
|
+
}
|
|
2049
|
+
)
|
|
2050
|
+
},
|
|
2051
|
+
type.value
|
|
2052
|
+
)) });
|
|
2053
|
+
};
|
|
2038
2054
|
const BlockListDropdown = ({ format, isActive, onMouseDown }) => {
|
|
2039
2055
|
const { backgroundColor, editor, imageColor, dropdownActive, setDropdownActive } = useReactTextForgeContext();
|
|
2040
2056
|
const selectStyle = {
|
|
@@ -2056,7 +2072,8 @@ const BlockListDropdown = ({ format, isActive, onMouseDown }) => {
|
|
|
2056
2072
|
/* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
2057
2073
|
"button",
|
|
2058
2074
|
{
|
|
2059
|
-
className: "rtf tool",
|
|
2075
|
+
className: "rtf tool dropdown-toggle--list",
|
|
2076
|
+
style: { backgroundColor: dropdownActive === format ? `color-mix(in srgb, ${imageColor} 40%, ${isDarkColor(imageColor) ? "white" : "black"})` : "transparent" },
|
|
2060
2077
|
children: [
|
|
2061
2078
|
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { onMouseDown: (event) => {
|
|
2062
2079
|
event.preventDefault();
|
|
@@ -2068,26 +2085,33 @@ const BlockListDropdown = ({ format, isActive, onMouseDown }) => {
|
|
|
2068
2085
|
className: "rtf tool tool--arrow",
|
|
2069
2086
|
style: { color: selectStyle.color },
|
|
2070
2087
|
onClick: toggleDropDown,
|
|
2071
|
-
children:
|
|
2088
|
+
children: /* @__PURE__ */ jsxRuntimeExports.jsx(Images, { format: "arrow", imageColor })
|
|
2072
2089
|
}
|
|
2073
2090
|
)
|
|
2074
2091
|
]
|
|
2075
2092
|
}
|
|
2076
2093
|
),
|
|
2077
|
-
dropdownActive ===
|
|
2078
|
-
|
|
2079
|
-
{
|
|
2080
|
-
selectStyle,
|
|
2081
|
-
onChange: handleBulletTypeChange,
|
|
2082
|
-
onClose: () => setDropdownActive(null)
|
|
2083
|
-
}
|
|
2084
|
-
),
|
|
2085
|
-
dropdownActive === "numberedList" && format === "numberedList" && /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
2086
|
-
NumeredTypeSelector,
|
|
2094
|
+
dropdownActive === format && /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
2095
|
+
TypeSelector,
|
|
2087
2096
|
{
|
|
2088
2097
|
selectStyle,
|
|
2089
2098
|
onChange: handleBulletTypeChange,
|
|
2090
|
-
onClose: () => setDropdownActive(null)
|
|
2099
|
+
onClose: () => setDropdownActive(null),
|
|
2100
|
+
types: format === "numberedList" ? [
|
|
2101
|
+
{ value: "decimal", label: "Décimal" },
|
|
2102
|
+
{ value: "upper-roman", label: "Lettres Romaines majuscules" },
|
|
2103
|
+
{ value: "lower-roman", label: "Lettres Romaines minuscules" },
|
|
2104
|
+
{ value: "upper-greek", label: "Lettres Grecques majuscules" },
|
|
2105
|
+
{ value: "lower-greek", label: "Lettres Grecques minuscules" }
|
|
2106
|
+
] : [
|
|
2107
|
+
{ value: "disc", label: "Disque" },
|
|
2108
|
+
{ value: "circle", label: "Cercle" },
|
|
2109
|
+
{ value: "square", label: "Carré" },
|
|
2110
|
+
{ value: "'✔'", label: "Check" },
|
|
2111
|
+
{ value: "'✘'", label: "Croix" },
|
|
2112
|
+
{ value: "'➢'", label: "Petite flèche" },
|
|
2113
|
+
{ value: "'➔'", label: "Flèche épaisse" }
|
|
2114
|
+
]
|
|
2091
2115
|
}
|
|
2092
2116
|
)
|
|
2093
2117
|
] });
|
|
@@ -2468,7 +2492,7 @@ const FormatButton = ({ activeMarks, format, isActive, tooltip }) => {
|
|
|
2468
2492
|
format === "indent" ? CustomEditor.handleIndent(editor) : CustomEditor.handleOutdent(editor);
|
|
2469
2493
|
},
|
|
2470
2494
|
disabled: !isActive,
|
|
2471
|
-
children: /* @__PURE__ */ jsxRuntimeExports.jsx(Images, { format, imageColor: isActive ? imageColor : `color-mix(in srgb, ${imageColor} 40%, black)` })
|
|
2495
|
+
children: /* @__PURE__ */ jsxRuntimeExports.jsx(Images, { format, imageColor: isActive ? imageColor : `color-mix(in srgb, ${imageColor} 40%, ${isDarkColor(imageColor) ? "white" : "black"})` })
|
|
2472
2496
|
}
|
|
2473
2497
|
) }) : format === "fontSize" ? /* @__PURE__ */ jsxRuntimeExports.jsx(FontSizeDropdown, { disabled: isHeading, onSelectSize: handleFontSizeChange, sizeSelected: isActive }) : format === "fontFamily" ? /* @__PURE__ */ jsxRuntimeExports.jsx(FontFamilyDropdown, { fontFamilySelected: selectedFontFamily, onSelectFontFamily: handleFontFamilyChange }) : format === "bulletList" || format === "numberedList" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rtf dropdown", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
2474
2498
|
BlockListDropdown,
|
|
@@ -2476,8 +2500,8 @@ const FormatButton = ({ activeMarks, format, isActive, tooltip }) => {
|
|
|
2476
2500
|
format,
|
|
2477
2501
|
isActive,
|
|
2478
2502
|
onMouseDown: () => {
|
|
2479
|
-
|
|
2480
|
-
CustomEditor.toggleBlock(editor, format);
|
|
2503
|
+
const newFormat = format === "bulletList" ? "bullet-list" : "numbered-list";
|
|
2504
|
+
CustomEditor.toggleBlock(editor, newFormat, isActive ? null : format === "bulletList" ? "disc" : "decimal");
|
|
2481
2505
|
}
|
|
2482
2506
|
}
|
|
2483
2507
|
) }) : format === "href" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rtf dropdown", children: [
|
|
@@ -2936,6 +2960,28 @@ const Toolbar = ({ activeMarks }) => {
|
|
|
2936
2960
|
format
|
|
2937
2961
|
) : null;
|
|
2938
2962
|
}
|
|
2963
|
+
if (format === "undo" || format === "redo") {
|
|
2964
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rtf dropdown tool", style: { display: "flex", padding: 0 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { text: allButtons.find((button) => button.format === format).tooltip, position: "bottom", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
2965
|
+
"button",
|
|
2966
|
+
{
|
|
2967
|
+
ref: (el) => buttonsRef.current[format] = el,
|
|
2968
|
+
className: `rtf tool`,
|
|
2969
|
+
style: { display: "inline-block" },
|
|
2970
|
+
onMouseDown: (event) => {
|
|
2971
|
+
event.preventDefault();
|
|
2972
|
+
if (format === "undo") {
|
|
2973
|
+
editor.undo();
|
|
2974
|
+
} else if (format === "redo") {
|
|
2975
|
+
editor.redo();
|
|
2976
|
+
} else {
|
|
2977
|
+
console.error("Type d'action inconnu !");
|
|
2978
|
+
}
|
|
2979
|
+
},
|
|
2980
|
+
children: /* @__PURE__ */ jsxRuntimeExports.jsx(Images, { format, imageColor: editor.history[format + "s"].length === 0 ? `color-mix(in srgb, ${imageColor} 40%, ${isDarkColor(imageColor) ? "white" : "black"})` : imageColor })
|
|
2981
|
+
},
|
|
2982
|
+
format
|
|
2983
|
+
) }) }, format);
|
|
2984
|
+
}
|
|
2939
2985
|
return /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
2940
2986
|
FormatButton,
|
|
2941
2987
|
{
|