easy-markdown-editor icon indicating copy to clipboard operation
easy-markdown-editor copied to clipboard

Override icon class names

Open vanillajonathan opened this issue 2 years ago • 5 comments

Is your feature request related to a problem? Please describe. I already use a icon set, and don't want to also use Font Awesome.

Describe the solution you'd like A iconClassNames option which provides a dictionary/map to define the icon class names.

Additional context See Bootstrap Icons.

  • Bold - https://icons.getbootstrap.com/icons/type-bold/
  • Italic - https://icons.getbootstrap.com/icons/type-italic/
  • Strike through - https://icons.getbootstrap.com/icons/type-strikethrough/
  • Header 1 - https://icons.getbootstrap.com/icons/type-h1/
  • Header 2 - https://icons.getbootstrap.com/icons/type-h2/
  • Header 3 - https://icons.getbootstrap.com/icons/type-h3/
  • Code - https://icons.getbootstrap.com/icons/code/
  • Quote - https://icons.getbootstrap.com/icons/quote/
  • Ordered list - https://icons.getbootstrap.com/icons/list-ol/
  • Unordered list - https://icons.getbootstrap.com/icons/list-ul/
  • Clean block - https://icons.getbootstrap.com/icons/eraser/
  • Link - https://icons.getbootstrap.com/icons/link/
  • Image - https://icons.getbootstrap.com/icons/image/
  • Table - https://icons.getbootstrap.com/icons/table/
  • Horizontal rule - https://icons.getbootstrap.com/icons/hr/
  • Preview - https://icons.getbootstrap.com/icons/eye/
  • Side-by-side - https://icons.getbootstrap.com/icons/layout-split/
  • Fullscreen - https://icons.getbootstrap.com/icons/fullscreen/
  • Guide - https://icons.getbootstrap.com/icons/question-circle/
  • Undo - https://icons.getbootstrap.com/icons/arrow-counterclockwise/
  • Redo - https://icons.getbootstrap.com/icons/arrow-clockwise/

Would be:

iconClassNames: {
    toggleBold: 'bi bi-type-bold',
    toggleItalic: 'bi bi-type-italic',
    toggleStrikethrough: 'bi bi-type-strikethrough',
    toggleHeading1: 'bi bi-type-h1',
    toggleHeading2: 'bi bi-type-h2',
    toggleHeading3: 'bi bi-type-h3',
    toggleCodeBlock: 'bi bi-code',
    toggleBlockquote: 'bi bi-quote',
    toggleOrderedList: 'bi bi-list-ol',
    toggleUnorderedList: 'bi bi-list-ul',
    cleanBlock: 'bi bi-eraser',
    drawLink: 'bi bi-link',
    drawImage: 'bi bi-image',
    drawTable: 'bi bi-table',
    drawHorizontalRule: 'bi bi-hr',
    togglePreview: 'bi bi-eye',
    toggleSideBySide: 'bi bi-layout-split',
    toggleFullScreen: 'bi bi-fullscreen',
    guide: 'bi bi-question-circle',
    undo: 'bi bi-arrow-counterclockwise',
    redo: 'bi bi-arrow-clockwise'
}

vanillajonathan avatar May 17 '22 21:05 vanillajonathan

Starting out by refactoring into a map #454

vanillajonathan avatar May 18 '22 17:05 vanillajonathan

You can use autoDownloadFontAwesome: false and provide the toolbar configuration option with buttons that use other icons with the className attribute.

Ionaru avatar May 19 '22 13:05 Ionaru

Yes, but then integrator would have to manually recreate their own custom buttons for every button.

This commit separates concerns so it relies on a map which we can later override to make it easier for integrators to use their own icons.

vanillajonathan avatar May 19 '22 13:05 vanillajonathan

While I appreciate the work you're doing to make the editor as user-friendly as possible, I fear that all this work will go to waste when #447 happens, especially for extra configuration options to handle things that are already possible using other methods.

Ionaru avatar May 19 '22 14:05 Ionaru

Yeah, maybe, but then there is always the option for integrators to stay with the latest EasyMDE 2 version.

I would hope to see this merged.

vanillajonathan avatar May 19 '22 17:05 vanillajonathan