Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor into using a map for icon classes #454

Merged
merged 5 commits into from
Jun 16, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -159,6 +159,7 @@ easyMDE.value('New input for **EasyMDE**');
- **promptTexts**: Customize the text used to prompt for URLs.
- **image**: The text to use when prompting for an image's URL. Defaults to `URL of the image:`.
- **link**: The text to use when prompting for a link's URL. Defaults to `URL for the link:`.
- **iconClassMap**: Used to specify the icon class names for the various toolbar buttons.
- **uploadImage**: If set to `true`, enables the image upload functionality, which can be triggered by drag and drop, copy-paste and through the browse-file window (opened when the user click on the *upload-image* icon). Defaults to `false`.
- **imageMaxSize**: Maximum image size in bytes, checked before upload (note: never trust client, always check the image size at server-side). Defaults to `1024 * 1024 * 2` (2 MB).
- **imageAccept**: A comma-separated list of mime-types used to check image type before upload (note: never trust client, always check file types at server-side). Defaults to `image/png, image/jpeg`.
Expand Down
79 changes: 54 additions & 25 deletions src/js/easymde.js
Original file line number Diff line number Diff line change
Expand Up @@ -1439,62 +1439,90 @@ function wordCount(data) {
return count;
}

var iconClassMap = {
'bold': 'fa fa-bold',
'italic': 'fa fa-italic',
'strikethrough': 'fa fa-strikethrough',
'heading': 'fa fa-header fa-heading',
'heading-smaller': 'fa fa-header fa-heading header-smaller',
'heading-bigger': 'fa fa-header fa-heading header-bigger',
'heading-1': 'fa fa-header fa-heading header-1',
'heading-2': 'fa fa-header fa-heading header-2',
'heading-3': 'fa fa-header fa-heading header-3',
'code': 'fa fa-code',
'quote': 'fa fa-quote-left',
'ordered-list': 'fa fa-list-ol',
'unordered-list': 'fa fa-list-ul',
'clean-block': 'fa fa-eraser',
'link': 'fa fa-link',
'image': 'fa fa-image',
'upload-image': 'fa fa-image',
'table': 'fa fa-table',
'horizontal-rule': 'fa fa-minus',
'preview': 'fa fa-eye',
'side-by-side': 'fa fa-columns',
'fullscreen': 'fa fa-arrows-alt',
'guide': 'fa fa-question-circle',
'undo': 'fa fa-undo',
'redo': 'fa fa-repeat fa-redo',
};

var toolbarBuiltInButtons = {
'bold': {
name: 'bold',
action: toggleBold,
className: 'fa fa-bold',
className: iconClassMap['bold'],
title: 'Bold',
default: true,
},
'italic': {
name: 'italic',
action: toggleItalic,
className: 'fa fa-italic',
className: iconClassMap['italic'],
title: 'Italic',
default: true,
},
'strikethrough': {
name: 'strikethrough',
action: toggleStrikethrough,
className: 'fa fa-strikethrough',
className: iconClassMap['strikethrough'],
title: 'Strikethrough',
},
'heading': {
name: 'heading',
action: toggleHeadingSmaller,
className: 'fa fa-header fa-heading',
className: iconClassMap['heading'],
title: 'Heading',
default: true,
},
'heading-smaller': {
name: 'heading-smaller',
action: toggleHeadingSmaller,
className: 'fa fa-header fa-heading header-smaller',
className: iconClassMap['heading-smaller'],
title: 'Smaller Heading',
},
'heading-bigger': {
name: 'heading-bigger',
action: toggleHeadingBigger,
className: 'fa fa-header fa-heading header-bigger',
className: iconClassMap['heading-bigger'],
title: 'Bigger Heading',
},
'heading-1': {
name: 'heading-1',
action: toggleHeading1,
className: 'fa fa-header fa-heading header-1',
className: iconClassMap['heading-1'],
title: 'Big Heading',
},
'heading-2': {
name: 'heading-2',
action: toggleHeading2,
className: 'fa fa-header fa-heading header-2',
className: iconClassMap['heading-2'],
title: 'Medium Heading',
},
'heading-3': {
name: 'heading-3',
action: toggleHeading3,
className: 'fa fa-header fa-heading header-3',
className: iconClassMap['heading-3'],
title: 'Small Heading',
},
'separator-1': {
Expand All @@ -1503,34 +1531,34 @@ var toolbarBuiltInButtons = {
'code': {
name: 'code',
action: toggleCodeBlock,
className: 'fa fa-code',
className: iconClassMap['code'],
title: 'Code',
},
'quote': {
name: 'quote',
action: toggleBlockquote,
className: 'fa fa-quote-left',
className: iconClassMap['quote'],
title: 'Quote',
default: true,
},
'unordered-list': {
name: 'unordered-list',
action: toggleUnorderedList,
className: 'fa fa-list-ul',
className: iconClassMap['ordered-list'],
title: 'Generic List',
default: true,
},
'ordered-list': {
name: 'ordered-list',
action: toggleOrderedList,
className: 'fa fa-list-ol',
className: iconClassMap['unordered-list'],
title: 'Numbered List',
default: true,
},
'clean-block': {
name: 'clean-block',
action: cleanBlock,
className: 'fa fa-eraser',
className: iconClassMap['clean-block'],
title: 'Clean block',
},
'separator-2': {
Expand All @@ -1539,33 +1567,33 @@ var toolbarBuiltInButtons = {
'link': {
name: 'link',
action: drawLink,
className: 'fa fa-link',
className: iconClassMap['link'],
title: 'Create Link',
default: true,
},
'image': {
name: 'image',
action: drawImage,
className: 'fa fa-image',
className: iconClassMap['image'],
title: 'Insert Image',
default: true,
},
'upload-image': {
name: 'upload-image',
action: drawUploadedImage,
className: 'fa fa-image',
className: iconClassMap['upload-image'],
title: 'Import an image',
},
'table': {
name: 'table',
action: drawTable,
className: 'fa fa-table',
className: iconClassMap['table'],
title: 'Insert Table',
},
'horizontal-rule': {
name: 'horizontal-rule',
action: drawHorizontalRule,
className: 'fa fa-minus',
className: iconClassMap['horizontal-rule'],
title: 'Insert Horizontal Line',
},
'separator-3': {
Expand All @@ -1574,15 +1602,15 @@ var toolbarBuiltInButtons = {
'preview': {
name: 'preview',
action: togglePreview,
className: 'fa fa-eye',
className: iconClassMap['preview'],
noDisable: true,
title: 'Toggle Preview',
default: true,
},
'side-by-side': {
name: 'side-by-side',
action: toggleSideBySide,
className: 'fa fa-columns',
className: iconClassMap['side-by-side'],
noDisable: true,
noMobile: true,
title: 'Toggle Side by Side',
Expand All @@ -1591,7 +1619,7 @@ var toolbarBuiltInButtons = {
'fullscreen': {
name: 'fullscreen',
action: toggleFullScreen,
className: 'fa fa-arrows-alt',
className: iconClassMap['fullscreen'],
noDisable: true,
noMobile: true,
title: 'Toggle Fullscreen',
Expand All @@ -1603,7 +1631,7 @@ var toolbarBuiltInButtons = {
'guide': {
name: 'guide',
action: 'https://www.markdownguide.org/basic-syntax/',
className: 'fa fa-question-circle',
className: iconClassMap['guide'],
noDisable: true,
title: 'Markdown Guide',
default: true,
Expand All @@ -1614,14 +1642,14 @@ var toolbarBuiltInButtons = {
'undo': {
name: 'undo',
action: undo,
className: 'fa fa-undo',
className: iconClassMap['undo'],
noDisable: true,
title: 'Undo',
},
'redo': {
name: 'redo',
action: redo,
className: 'fa fa-repeat fa-redo',
className: iconClassMap['redo'],
noDisable: true,
title: 'Redo',
},
Expand Down Expand Up @@ -1794,6 +1822,7 @@ function EasyMDE(options) {
options.autosave.timeFormat = extend({}, timeFormat, options.autosave.timeFormat || {});
}

options.iconClassMap = extend({}, iconClassMap, options.iconClassMap || {});

// Merging the shortcuts, with the given options
options.shortcuts = extend({}, shortcuts, options.shortcuts || {});
Expand Down