react-text-forge 1.2.5 → 1.2.7

package/README.md

@@ -2,6 +2,26 @@
 
 ReactTextForge est un éditeur de texte basé sur React et Slate.js.
 
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![TypeScript](https://img.shields.io/badge/TypeScript-4.9+-blue.svg)](https://www.typescriptlang.org/)
+[![Slate.js](https://img.shields.io/badge/Slate.js-0.94+-brightgreen.svg)](https://docs.slatejs.org/)
+
+---
+
+## **📌 Pourquoi ReactTextForge ?**
+ReactTextForge est conçu pour offrir une expérience d'édition de texte riche, **légère**, **modulaire** et **facile à intégrer** dans des applications React/TypeScript. Contrairement à CKEditor, il est optimisé pour :
+- Une **intégration transparente** avec les projets modernes (React 18+, TypeScript).
+- Une **personnalisation poussée** (toolbar, styles, raccourcis clavier).
+- Une **architecture extensible** pour ajouter des fonctionnalités spécifiques.
+
+---
+
+## **⚙️ Prérequis**
+- Node.js **v25+**
+- React **v19+**
+- TypeScript **v4.9+**
+- Slate.js **v0.112+**
+
 ## Installation
 
 Pour installer ReactTextForge, utilisez la commande suivante :
@@ -43,6 +63,29 @@ export default function App() {
 }
 ```
 
+Vous pouvez si vous le désirez ajouter vos propres raccourcis claviers comme ceci:
+
+```jsx
+import React, { useState } from "react";
+import ReactTextForge from "./components/ReactTextForge";
+
+export default function App() {
+    const [value, setValue] = useState({});
+
+    /**
+     * Indiquer en clé le raccourci définit et en valeur la fonction appliqué
+     */
+    const raccourcis = {
+        'Ctrl+Shift+A': () => alert('Vous avez pressé Ctrl+Shift+A !'),
+        'Alt+S': () => alert('Vous avez pressé Alt+S !')
+    };
+
+    return (
+        <ReactTextForge value={value} setValue={setValue} raccourcis={raccourcis} />
+    );
+}
+```
+
 ## Licence
 Ce projet est sous licence MIT.
 

package/dist/components/FormatButton.d.ts

@@ -3,13 +3,10 @@ export default FormatButton;
  * Ce composant permet d'afficher la liste des boutons de fonctionnalité
  *
  * @param {object} props
- * @param {string} props.activeMarks - Liste des marques appliquées
- * @param {string} props.format - format de texte sélectionné
- * @param {bool} props.isActive - état du format (actif ou non)
+ * @property {string} props.activeMarks - Liste des marques appliquées
+ * @property {string} props.format - format de texte sélectionné
+ * @property {bool} props.isActive - état du format (actif ou non)
+ * @property {bool} props.tooltip - Infobulle
  * @returns {JSX.Element}
  */
-declare function FormatButton({ activeMarks, format, isActive }: {
-    activeMarks: string;
-    format: string;
-    isActive: bool;
-}): JSX.Element;
+declare function FormatButton({ activeMarks, format, isActive, tooltip }: object): JSX.Element;

package/dist/components/ReactTextForge.d.ts

@@ -4,17 +4,29 @@ export default ReactTextForge;
  *
  * @param {object} props
  * @param {object} props.value - contenu textuel
+ * @param {function} props.setValue - change l'état du contenu
+ * @param {object} props.fullScreen - Gestion du plein écran
+ * @param {object} props.showTheme - Gestion du thème
  * @param {string} props.borderColor - couleur de bordure des éléments
  * @param {string} props.backgroundColor - couleur d'arrière-plan
  * @param {string} props.imageColor - couleur des images
- * @param {function} props.setValue - change l'état du contenu
+ * @param {string} props.borderDarkColor - couleur de bordure des éléments pour le thème sombre
+ * @param {string} props.backgroundDarkColor - couleur d'arrière-plan pour le thème sombre
+ * @param {string} props.imageDarkColor - couleur des images pour le thème sombre
+ * @param {object} props.raccourcis - liste des raccourcis ajoutées
  *
  * @returns {JSX.Element }
  */
-declare function ReactTextForge({ value, setValue, borderColor, backgroundColor, imageColor }: {
+declare function ReactTextForge({ value, setValue, fullScreen, showTheme, borderColor, backgroundColor, imageColor, borderDarkColor, backgroundDarkColor, imageDarkColor, toggleColor, raccourcis }: {
     value: object;
+    setValue: Function;
+    fullScreen: object;
+    showTheme: object;
     borderColor: string;
     backgroundColor: string;
     imageColor: string;
-    setValue: Function;
+    borderDarkColor: string;
+    backgroundDarkColor: string;
+    imageDarkColor: string;
+    raccourcis: object;
 }): JSX.Element;

package/dist/components/ThemeToggleButton.d.ts

@@ -0,0 +1,5 @@
+export default ThemeToggleButton;
+declare function ThemeToggleButton({ toggleColor, fullScreen }: {
+    toggleColor: any;
+    fullScreen: any;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/contexts/FullscreenContext.d.ts

@@ -0,0 +1,7 @@
+export function FullscreenProvider({ children }: {
+    children: any;
+}): import("react/jsx-runtime").JSX.Element;
+export function useFullscreen(): {
+    isFullscreen: boolean;
+    toggleFullscreen: () => void;
+};

package/dist/components/contexts/ThemeContext.d.ts

@@ -0,0 +1,6 @@
+export function ThemeProvider({ showTheme, backgroundDarkColor, borderDarkColor, imageDarkColor, children }: object): import("react/jsx-runtime").JSX.Element;
+export function useTheme(): {
+    theme: string;
+    toggleTheme: () => void;
+    isDarkTheme: boolean;
+};

package/dist/components/decorators/withHightlight.d.ts

@@ -0,0 +1 @@
+export function withHighlight(editor: any): any;

package/dist/components/utils/CustomEditor.d.ts

@@ -1,3 +1,5 @@
+import { ReactEditor } from 'slate-react';
+import { Path } from 'slate';
 export default CustomEditor;
 declare namespace CustomEditor {
     /**
@@ -122,6 +124,20 @@ declare namespace CustomEditor {
      * @returns {void}
      */
     function applyFontFamily(editor: object, fontFamily: string): void;
+    /**
+     * Permet de vérifier si la sélection se situe dans un code
+     *
+     * @param {object} editor - éditeur de texte
+     * @returns {boolean}
+     */
+    function isSelectionInCode(editor: object): boolean;
+    /**
+     * Permet de récupérer le langage actuel
+     *
+     * @param {object} editor - éditeur de texte
+     * @returns {boolean}
+     */
+    function getCurrentCodeLanguage(editor: object): boolean;
     /**
      * Gère l'ajout, l'édition et la suppression d'un bloc de code
      * @param {object} editor - éditeur de texte
@@ -129,6 +145,28 @@ declare namespace CustomEditor {
      * @returns {void}
      */
     function handleCode(editor: object, language: string): void;
+    /**
+     * Affiche un bloc de citation
+     *
+     * @param {ReactEditor} editor
+     * @returns {void}
+     */
+    function toggleBlockquote(editor: ReactEditor): void;
+    /**
+     * Vérifie si la sélection est un bloc de citation
+     *
+     * @param {ReactEditor} editor
+     * @returns {boolean}
+     */
+    function isBlockquoteActive(editor: ReactEditor): boolean;
+    /**
+     * Insère un bloc de code
+     *
+     * @param {object} editor
+     * @param {string} text
+     * @return {void}
+     */
+    function insertCodeBlock(editor: object, text: string): void;
     /**
      * Permet de gérer les images
      * @param {object} editor - éditeur de texte
@@ -193,4 +231,11 @@ declare namespace CustomEditor {
      * @returns {void}
      */
     function deleteTable(editor: object): void;
+    function findNearestTable(editor: any): (import("slate").BaseElement | import("slate").BaseText | Path)[];
+    /**
+     * Insère un paragraphe avant le tableau sélectionné.
+     * @param {ReactEditor} editor L'éditeur Slate.
+     */
+    function insertParagraphBeforeTable(editor: ReactEditor): void;
+    function insertParagraphAfterTable(editor: any): void;
 }

package/dist/components/utils/FullscreenButton.d.ts

@@ -0,0 +1,2 @@
+export default FullscreenButton;
+declare function FullscreenButton(): import("react/jsx-runtime").JSX.Element;

package/dist/components/utils/FullscreenWrapper.d.ts

@@ -0,0 +1,3 @@
+export function FullscreenWrapper({ children }: {
+    children: any;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/utils/Tooltip.d.ts

@@ -0,0 +1,5 @@
+export function Tooltip({ text, children, position }: {
+    text: any;
+    children: any;
+    position?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/utils/dropdown/BlockTypeDropdown.d.ts

@@ -2,7 +2,9 @@ export default BlockTypeDropdown;
 /**
  * Ce composant affiche le formulaire de changement de type de bloc (paragraphe, titre ou sous-titre)
  *
+ * @param {object} props
+ * @param {object} props.tooltip - Infobulle
  *
- * @returns {JSX.Element}
+ * @returns {JSX.Element }
  */
-declare function BlockTypeDropdown(): JSX.Element;
+declare const BlockTypeDropdown: import('react').ForwardRefExoticComponent<import('react').RefAttributes<any>>;

package/dist/components/utils/dropdown/BlockquoteButton.d.ts

@@ -0,0 +1,7 @@
+export default BlockquoteButton;
+/**
+ * Permet d'afficher le bouton de génération de citation
+ *
+ * @returns {JSX.ReactElement}
+ */
+declare function BlockquoteButton(): JSX.ReactElement;

package/dist/components/utils/dropdown/LanguageDropdown.d.ts

@@ -4,4 +4,4 @@ export default LanguageDropdown;
  *
  * @returns {JSX.Element}
  */
-declare function LanguageDropdown(): JSX.Element;
+declare const LanguageDropdown: import('react').ForwardRefExoticComponent<import('react').RefAttributes<any>>;

package/dist/components/utils/dropdown/TableDropdown.d.ts

@@ -2,6 +2,9 @@ export default TableDropdown;
 /**
  * Ce composant permet de gérer l'affichage du formulaire de création de tableau
  *
+ * @param {object} props
+ * @property {object} allButtons - Tous les boutons
+ * @property {object} hiddenButtons - Boutons non visibles
  * @returns {JSX.Element}
  */
-declare function TableDropdown(): JSX.Element;
+declare const TableDropdown: import('react').ForwardRefExoticComponent<import('react').RefAttributes<any>>;

package/dist/components/utils/elements/TableElement.d.ts

@@ -0,0 +1,3 @@
+export default function TableElement({ children }: {
+    children: any;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/utils/form/ImageForm.d.ts

@@ -4,4 +4,4 @@ export default ImageForm;
  *
  * @returns {JSX.Element}
  */
-declare function ImageForm(): JSX.Element;
+declare const ImageForm: import('react').ForwardRefExoticComponent<import('react').RefAttributes<any>>;

package/dist/index.d.ts

@@ -1,6 +1,5 @@
 import { default as ReactTextForge } from './components/ReactTextForge';
 import { default as serialize } from './components/functions/serialize';
 import { default as deserialize } from './components/functions/deserialize';
-import { default as HtmlDisplay } from './components/HtmlDisplay';
 export default ReactTextForge;
-export { serialize, deserialize, HtmlDisplay };
+export { serialize, deserialize };

package/dist/react-text-forge.css

@@ -1,8 +1 @@
-pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
-  Theme: Tokyo-night-Dark
-  origin: https://github.com/enkia/tokyo-night-vscode-theme
-  Description: Original highlight.js style
-  Author: (c) Henri Vandersleyen <hvandersleyen@gmail.com>
-  License: see project LICENSE
-  Touched: 2022
-*/.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}
+.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}.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;font-size:12px;margin-left:4px;position:relative;bottom:4px;height:18px;padding:0}.rtf.tool img.rtf,.rtf.tool svg.rtf{cursor:pointer;width:15px;height:15px}.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%}@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-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}.rtf.react-text-forge .rtf.dropdown-menu li{min-width:200px;width:max-content;height:20px;padding:5px 10px;line-height:20px;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;left:0;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 10px #0000001a;padding:16px;z-index:10}.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}