Dynamic Toolbar Styling

[jolanglinais]

Is your feature request related to a problem? Please describe.
The Toolbar should accept props to render certain buttons. It should therefore also render well no matter which buttons are toggled on.

Describe the solution you'd like
This could possibly have a minimum cap, such as Styles, bold, italic, and underline. Input would be helpful (@Michael-Grover)

Describe alternatives you've considered
css-grid may not actually be the best solution here, feel free to explore other options

Additional context
This relates to Issue accordproject/markdown-editor#35

[jolanglinais]

Hacktoberfest:

This issue can provide for multiple pull requests.

[nitinsultania]

hey how about

/*
Deluxe Menu Data File
Created by Deluxe Tuner v3.2
http://deluxe-menu.com
*/

// -- Deluxe Tuner Style Names
var itemStylesNames=["Style 1","Style 2","Style 3","Style 4",];
var menuStylesNames=[];
// -- End of Deluxe Tuner Style Names

//--- Common
var isHorizontal=1;
var smColumns=1;
var smOrientation=0;
var dmRTL=0;
var pressedItem=-1;
var itemCursor="default";
var itemTarget="_blank";
var statusString="link";
var blankImage="data-samples/images/blank.gif";
var pathPrefix_img="data-samples/images/";
var pathPrefix_link="data-samples/";

//--- Dimensions
var menuWidth="400px";
var menuHeight="";
var smWidth="";
var smHeight="";

//--- Positioning
var absolutePos=0;
var posX="0px";
var posY="0px";
var topDX=0;
var topDY=1;
var DX=1;
var DY=0;
var subMenuAlign="left";
var subMenuVAlign="top";

//--- Font
var fontStyle=["normal 11px Tahoma, Arial","normal 11px Tahoma, Arial"];
var fontColor=["#000000","#000000"];
var fontDecoration=["none","none"];
var fontColorDisabled="#AAAAAA";

//--- Appearance
var menuBackColor="#C2DDE4";
var menuBackImage="";
var menuBackRepeat="repeat";
var menuBorderColor="#4996A9";
var menuBorderWidth=1;
var menuBorderStyle="solid";

//--- Item Appearance
var itemBackColor=["#C2DDE4","#FFFFFF"];
var itemBackImage=["",""];
var beforeItemImage=["",""];
var afterItemImage=["",""];
var beforeItemImageW="";
var afterItemImageW="";
var beforeItemImageH="";
var afterItemImageH="";
var itemBorderWidth=1;
var itemBorderColor=["#C2DDE4","#2B5762"];
var itemBorderStyle=["solid","solid"];
var itemSpacing=2;
var itemPadding="3px 7px 3px 7px ";
var itemAlignTop="left";
var itemAlign="left";

//--- Icons
var iconTopWidth=24;
var iconTopHeight=24;
var iconWidth=16;
var iconHeight=16;
var arrowWidth=11;
var arrowHeight=11;
var arrowImageMain=["arrow_main1.gif","arrow_main1.gif"];
var arrowWidthSub=0;
var arrowHeightSub=0;
var arrowImageSub=["arrow_sub1.gif","arrow_sub1.gif"];

//--- Separators
var separatorImage="";
var separatorWidth="100%";
var separatorHeight="3px";
var separatorAlignment="left";
var separatorVImage="";
var separatorVWidth="3px";
var separatorVHeight="100%";
var separatorPadding="0px";

//--- Floatable Menu
var floatable=0;
var floatIterations=6;
var floatableX=1;
var floatableY=1;
var floatableDX=15;
var floatableDY=15;

//--- Movable Menu
var movable=0;
var moveWidth=12;
var moveHeight=20;
var moveColor="#AA0000";
var moveImage="";
var moveCursor="default";
var smMovable=0;
var closeBtnW=15;
var closeBtnH=15;
var closeBtn="";

//--- Transitional Effects & Filters
var transparency="90";
var transition=33;
var transOptions="";
var transDuration=300;
var transDuration2=200;
var shadowLen=3;
var shadowColor="#BBBBBB";
var shadowTop=1;

//--- CSS Support (CSS-based Menu)
var cssStyle=0;
var cssSubmenu="";
var cssItem=["",""];
var cssItemText=["",""];

//--- Advanced
var dmObjectsCheck=0;
var saveNavigationPath=1;
var showByClick=0;
var noWrap=1;
var smShowPause=200;
var smHidePause=1000;
var smSmartScroll=1;
var topSmartScroll=0;
var smHideOnClick=1;
var dm_writeAll=0;
var useIFRAME=0;
var dmSearch=0;

//--- AJAX-like Technology
var dmAJAX=0;
var dmAJAXCount=0;
var ajaxReload=0;

//--- Dynamic Menu
var dynamic=1;

//--- Keystrokes Support
var keystrokes=1;
var dm_focus=1;
var dm_actKey=113;

//--- Sound
var onOverSnd="";
var onClickSnd="";

var itemStyles = [
["fontStyle=bold 11px Tahoma","fontColor=#1A5B00,#1A5B00","itemBorderWidth=1","itemBorderStyle=solid,solid","itemBackColor=#ACF88B,#ACF88B","itemBorderColor=#329309,#329309"],
["itemBackColor=#FFFFFF,#FFFFFF","itemBorderWidth=1","itemBorderStyle=solid,solid","itemBorderColor=#1B92E9,#1B92E9","fontStyle='normal 10px Trebushet MS, Tahoma','normal 10px Trebushet MS, Tahoma'","fontColor=#000000,#000000"],
["fontStyle=bold 11px Tahoma","fontColor=#FFFFFF,#FFFFFF","itemBorderWidth=1","itemBorderStyle=solid,solid","itemBackColor=#FF9684,#FF9684","itemBorderColor=#EC7575,#EC7575"],
["fontStyle=bold 11px Tahoma","fontColor=#00646C,#00646C","itemBorderWidth=1","itemBorderStyle=solid,solid","itemBackColor=#84F9FF,#84F9FF","itemBorderColor=#00B8C1,#00B8C1"],
];
var menuStyles = [
];

var menuItems = [

["Home","testlink.htm", "", "", "", "", "", "", "", "", "", ],
["Product Info","", "", "", "", "", "", "", "", "", "", ],
    ["|Features","testlink.htm", "", "", "", "", "", "", "", "", "", ],
    ["|Installation","", "", "", "", "", "", "", "", "", "", ],
        ["||Description of Files","testlink.htm", "", "", "", "", "", "", "", "", "", ],
        ["||How To Setup","testlink.htm", "", "", "", "", "", "", "", "", "", ],
    ["|Parameters Info","testlink.htm", "", "", "", "", "", "", "", "", "", ],
    ["|Dynamic Functions","testlink.htm", "", "", "", "", "", "", "", "", "", ],
    ["|Supported Browsers","", "", "", "", "", "", "", "", "", "", ],
        ["||Windows OS","", "", "", "", "", "", "", "", "", "", ],
            ["|||Internet Explorer","", "", "", "", "", "", "", "", "", "", ],
            ["|||Firefox","", "", "", "", "", "", "", "", "", "", ],
            ["|||Mozilla","", "", "", "", "", "", "", "", "", "", ],
            ["|||Opera","", "", "", "", "", "", "", "", "", "", ],
            ["|||Netscape Navigator","", "", "", "", "", "", "", "", "", "", ],
        ["||MAC OS","", "", "", "", "", "", "", "", "", "", ],
            ["|||Firefox","", "", "", "", "", "", "", "", "", "", ],
            ["|||Safari","", "", "", "", "", "", "", "", "", "", ],
            ["|||Internet Explorer","", "", "", "", "", "", "", "", "", "", ],
        ["||Unix/Linux OS","", "", "", "", "", "", "", "", "", "", ],
            ["|||Firefox","", "", "", "", "", "", "", "", "", "", ],
            ["|||Konqueror","", "", "", "", "", "", "", "", "", "", ],
["Samples","", "", "", "", "", "", "", "", "", "", ],
    ["|Sample 1","testlink.htm", "", "", "", "", "", "", "", "", "", ],
    ["|Sample 2","testlink.htm", "", "", "", "", "", "", "", "", "", ],
    ["|Sample 3","testlink.htm", "", "", "", "", "", "", "", "", "", ],
    ["|Sample 4","testlink.htm", "", "", "", "", "", "", "", "", "", ],
    ["|Sample 5","testlink.htm", "", "", "", "", "", "", "", "", "", ],
    ["|Sample 6","testlink.htm", "", "", "", "", "", "", "", "", "", ],
["Purchase","testlink.htm", "", "", "", "", "", "", "", "", "", ],
["Contact Us","testlink.htm", "", "", "", "", "", "", "", "", "", ],

];

dm_init();

[jolanglinais]

@nitinsultania I'm not sure most of that would be useful in this circumstance.

[imrishabh18]

@irmerk Can i work on this issue ?

[jolanglinais]

@imrishabh18 we should review this issue after accordproject/markdown-editor#297 is complete.

[jolanglinais]

@imrishabh18:

accordproject/markdown-editor#297 has been finished, so there is no longer a blocker on this issue. The migration may have solved this issue, so look into that first.