Add toolbarButtonClassPrefix option

Fixes #493
Ionaru · Sep 17, 2022 · d26b4e3 · d26b4e3
1 parent 84aafdd
commit d26b4e3
Show file tree

Hide file tree

Showing 9 changed files with 117 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,7 +4,9 @@ All notable changes to EasyMDE will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-[//]: # (## [Unreleased])
+## [Unreleased]
+### Added
+- `toolbarButtonClassPrefix` option to resolve conflicts with Bootstrap classes ([#493]).
 
 ## [2.17.0] - 2022-08-20
 ### Added
@@ -254,6 +256,7 @@ Project forked from [SimpleMDE](https://github.com/sparksuite/simplemde-markdown
 - Cursor not always showing in "text" mode over the edit field
 
 <!-- Linked issues -->
+[#493]: https://github.com/Ionaru/easy-markdown-editor/issues/493
 [#478]: https://github.com/Ionaru/easy-markdown-editor/issues/478
 [#399]: https://github.com/Ionaru/easy-markdown-editor/issues/399
 [#252]: https://github.com/Ionaru/easy-markdown-editor/issues/252

diff --git a/README.md b/README.md
@@ -206,6 +206,7 @@ easyMDE.value('New input for **EasyMDE**');
 - **theme**: Override the theme. Defaults to `easymde`.
 - **toolbar**: If set to `false`, hide the toolbar. Defaults to the [array of icons](#toolbar-icons).
 - **toolbarTips**: If set to `false`, disable toolbar button tips. Defaults to `true`.
+- **toolbarButtonClassPrefix**: Adds a prefix to the toolbar button classes when set. For example, a value of `"mde"` results in `"mde-bold"` for the Bold button.
 - **direction**: `rtl` or `ltr`. Changes text direction to support right-to-left languages. Defaults to `ltr`.
 
 
@@ -267,7 +268,7 @@ const editor = new EasyMDE({
             preview.innerHTML = customMarkdownParser(plainText);
         }, 250);
 
-        // If you return null, the innerHTML of the preview will not 
+        // If you return null, the innerHTML of the preview will not
         // be overwritten. Useful if you control the preview node's content via
         // vdom diffing.
         // return null;
@@ -311,6 +312,7 @@ const editor = new EasyMDE({
     tabSize: 4,
     toolbar: false,
     toolbarTips: false,
+    toolbarButtonClassPrefix: "mde",
 });
 ```
 

diff --git a/cypress/e2e/3-class-prefix/class-prefix.cy.js b/cypress/e2e/3-class-prefix/class-prefix.cy.js
@@ -0,0 +1,17 @@
+/// <reference types="cypress" />
+
+describe('Default editor', () => {
+    it('table', () => {
+        cy.visit(__dirname + '/index-no-prefix.html');
+
+        cy.get('button.table').should('be.visible');
+        cy.get('button.table').invoke('outerWidth').should('not.equal', 30);
+    });
+
+    it('loads the editor with default settings', () => {
+        cy.visit(__dirname + '/index.html');
+
+        cy.get('button.mde-table').should('be.visible');
+        cy.get('button.mde-table').invoke('outerWidth').should('equal', 30);
+    });
+});
diff --git a/cypress/e2e/3-class-prefix/index-no-prefix.html b/cypress/e2e/3-class-prefix/index-no-prefix.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Default</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+    <link rel="stylesheet" href="../../../dist/easymde.min.css">
+    <script src="../../../dist/easymde.min.js"></script>
+</head>
+
+<body>
+    <textarea id="textarea"></textarea>
+    <script>
+        const easyMDE = new EasyMDE({
+            showIcons: ["table"],
+        });
+    </script>
+</body>
+
+</html>
diff --git a/cypress/e2e/3-class-prefix/index.html b/cypress/e2e/3-class-prefix/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Default</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+    <link rel="stylesheet" href="../../../dist/easymde.min.css">
+    <script src="../../../dist/easymde.min.js"></script>
+</head>
+
+<body>
+    <textarea id="textarea"></textarea>
+    <script>
+        const easyMDE = new EasyMDE({
+            toolbarButtonClassPrefix: 'mde',
+            showIcons: ["table"],
+        });
+    </script>
+</body>
+
+</html>
diff --git a/example/index.html b/example/index.html
@@ -13,7 +13,52 @@
 <body>
     <textarea></textarea>
     <script>
-        const easyMDE = new EasyMDE();
+        const easyMDE = new EasyMDE({
+            showIcons: ["code", "table"],
+            toolbar: [
+                {
+                    name: "bold",
+                    action: EasyMDE.toggleBold,
+                    className: "fa fa-bold",
+                    title: "Bold",
+                },
+                'table',
+                {
+                    name: "italic",
+                    action: EasyMDE.toggleItalic,
+                    className: "fa fa-italic",
+                    title: "Italic",
+                },
+                {
+                    name: "strikethrough",
+                    action: EasyMDE.toggleStrikethrough,
+                    className: "fa fa-strikethrough",
+                    title: "Strikethrough",
+                    children: [
+                {
+                    name: 'link',
+                    action: 'https://github.com/Ionaru/easy-markdown-editor',
+                    className: 'fa fab fa-github',
+                    title: 'A Custom Link',
+                    noDisable: true,
+                    noMobile: true,
+                },
+                'preview',
+                {
+                    name: 'bold',
+                    action: EasyMDE.toggleBold,
+                    className: 'fa fas fa-bold',
+                    title: 'Bold',
+                    attributes: {
+                        'data-custom': 'some value',
+                        'data-custom-2': 'another value',
+                    }
+                },
+            ],
+                },
+            ],
+            toolbarButtonClassPrefix: 'mde'
+        });
     </script>
 </body>
 

diff --git a/src/js/easymde.js b/src/js/easymde.js
@@ -194,7 +194,8 @@ function createToolbarButton(options, enableActions, enableTooltips, shortcuts,
         }
     }
 
-    el.className = options.name;
+    var classNamePrefix = parent.options.toolbarButtonClassPrefix ? parent.options.toolbarButtonClassPrefix + '-' : '';
+    el.className = classNamePrefix + options.name;
     el.setAttribute('type', markup);
     enableTooltips = (enableTooltips == undefined) ? true : enableTooltips;
 

diff --git a/types/easymde-test.ts b/types/easymde-test.ts
@@ -177,6 +177,7 @@ const editorImagesCustom = new EasyMDE({
 });
 
 new EasyMDE({
+    toolbarButtonClassPrefix: 'mde',
     sideBySideFullscreen: true,
     lineNumbers: false,
     unorderedListStyle: '*',

diff --git a/types/easymde.d.ts b/types/easymde.d.ts
@@ -210,6 +210,7 @@ declare namespace EasyMDE {
         tabSize?: number;
         toolbar?: boolean | ReadonlyArray<'|' | ToolbarButton | ToolbarIcon | ToolbarDropdownIcon>;
         toolbarTips?: boolean;
+        toolbarButtonClassPrefix?: string;
         onToggleFullScreen?: (goingIntoFullScreen: boolean) => void;
         theme?: string;
         scrollbarStyle?: string;