From d26b4e399b42c8b209531018393454cc1bdd5f6c Mon Sep 17 00:00:00 2001 From: Jeroen akkerman Date: Sat, 17 Sep 2022 23:07:24 +0200 Subject: [PATCH] Add toolbarButtonClassPrefix option Fixes #493 --- CHANGELOG.md | 5 +- README.md | 4 +- cypress/e2e/3-class-prefix/class-prefix.cy.js | 17 +++++++ .../e2e/3-class-prefix/index-no-prefix.html | 21 +++++++++ cypress/e2e/3-class-prefix/index.html | 22 +++++++++ example/index.html | 47 ++++++++++++++++++- src/js/easymde.js | 3 +- types/easymde-test.ts | 1 + types/easymde.d.ts | 1 + 9 files changed, 117 insertions(+), 4 deletions(-) create mode 100644 cypress/e2e/3-class-prefix/class-prefix.cy.js create mode 100644 cypress/e2e/3-class-prefix/index-no-prefix.html create mode 100644 cypress/e2e/3-class-prefix/index.html diff --git a/CHANGELOG.md b/CHANGELOG.md index 6146af5..bab52f6 100644 --- 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 +[#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 index 5a5d496..437d278 100644 --- 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 new file mode 100644 index 0000000..5853ecc --- /dev/null +++ b/cypress/e2e/3-class-prefix/class-prefix.cy.js @@ -0,0 +1,17 @@ +/// + +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 new file mode 100644 index 0000000..34f421c --- /dev/null +++ b/cypress/e2e/3-class-prefix/index-no-prefix.html @@ -0,0 +1,21 @@ + + + + + + Default + + + + + + + + + + + diff --git a/cypress/e2e/3-class-prefix/index.html b/cypress/e2e/3-class-prefix/index.html new file mode 100644 index 0000000..8563281 --- /dev/null +++ b/cypress/e2e/3-class-prefix/index.html @@ -0,0 +1,22 @@ + + + + + + Default + + + + + + + + + + + diff --git a/example/index.html b/example/index.html index ce03794..9a04fde 100644 --- a/example/index.html +++ b/example/index.html @@ -13,7 +13,52 @@ diff --git a/src/js/easymde.js b/src/js/easymde.js index 5216963..93b3cde 100644 --- 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 index b7d9fb9..1564674 100644 --- 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 index decd4ca..c8ca578 100644 --- 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;