Add toolbarButtonClassPrefix option

Fixes #493
2 years ago · d26b4e399b
parent 84aafddd92
commit d26b4e399b
9 changed files with 117 additions and 4 deletions
--- 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
--- 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",
 });
 ```

--- 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);
+    });
+});
--- 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>
--- 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>
--- 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>

--- 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;

--- 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: '*',
--- 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;