Is there a way to change the default tag output for normal html tags

[ryangurn]

Within ContentTools there are wonderful heading button, an ordered list button, and unordered lists buttons. In order to make this work with my styling, I need to be able to apply styles to the tags otherwise there is no styling. This leads to my question, is there a way to either add a class to the output tag from editing or just adjust the output itself and provide my own function for appending and prepending.

I have attempted to use the style system and it appears to add the classes as a comma separated list which does not work for many browsers. Is there a more proper way to handle this?

   ContentTools.StylePalette.add([
        new ContentTools.Style('Heading', ['text-lg', 'leading-6', 'font-medium', 'text-gray-900'], ['h1', 'h2'])
    ]);

The prior style palette is what I have added, and the code below is what was generated however the commas are preventing the class from properly engaging with the styles I have.

<h1 class="text-lg,leading-6,font-medium,text-gray-900">
    AHHH
</h1>

[ryangurn]

I now figured out that I just need to do one style for each of the classes rather than attempt to do arrays. It would be nice if the following features could be added to the roadmap.

1. Allow for overriding base tool classes or overall tags
2. Allow for defining compound Style's that allow for arrays of classes all meant to be applied to the given element.
3. Setup some structure for allowing complex overriding of tags for handling CSS frameworks (with, in my opinion too many classes to define using the current syntax)
4. Add some methodology for handing responsive classes that generally are just mutations of other classes.
5. Add a simple search feature to properties modal to handle the plethora of classes to go through.

I have used bootstrap, foundation, and most currently tailwind and find that there are many styles that I would want just for text manipulation and that creates the following over redundant code. Some simple ability to load a json file would be wonderful and probably help with the effective file sizes for the editor.js file.

NOTE: this is not even all of the text manipulation styles that I ended up adding

    ContentTools.StylePalette.add([
        new ContentTools.Style('Text Extra Small', 'text-xs', ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'span']),
        new ContentTools.Style('Text Small', 'text-sm', ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'span']),
        new ContentTools.Style('Text Normal', 'text-base', ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'span']),
        new ContentTools.Style('Text Large', 'text-lg', ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'span']),
        new ContentTools.Style('Text Extra Large', 'text-xl', ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'span']),
        new ContentTools.Style('Text 2x', 'text-2xl', ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'span']),
        new ContentTools.Style('Text 3x', 'text-3xl', ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'span']),
        new ContentTools.Style('Text 4x', 'text-4xl', ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'span']),
        new ContentTools.Style('Text 5x', 'text-5xl', ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'span']),
        new ContentTools.Style('Text 6x', 'text-6xl', ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'span']),
        new ContentTools.Style('Text Antialiased', 'antialiased', ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'span']),
        new ContentTools.Style('Text Pixel Antialiased', 'subpixel-antialiased', ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'span']),
        new ContentTools.Style('Text Italic', 'italic', ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'span']),
        new ContentTools.Style('Text Not Italic', 'not-italic', ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'span']),
        new ContentTools.Style('Font Hairline', 'font-hairline', ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'span']),
        new ContentTools.Style('Font Thin', 'font-thin', ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'span']),
        new ContentTools.Style('Font Light', 'font-light', ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'span']),
        new ContentTools.Style('Font Normal', 'font-normal', ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'span']),
        new ContentTools.Style('Font Medium', 'font-medium', ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'span']),
        new ContentTools.Style('Font Semibold', 'font-semibold', ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'span']),
        new ContentTools.Style('Font Bold', 'font-bold', ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'span']),
        new ContentTools.Style('Font Extra Bold', 'font-extrabold', ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'span']),
        new ContentTools.Style('Font Very Bold', 'font-black', ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'span']),

    ]);

Unfortunately attempting to minify the javascript we really don't get it that small (only about 18% compression)

new ContentTools.Style("Text Extra Small","text-xs",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Text Small","text-sm",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Text Normal","text-base",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Text Large","text-lg",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Text Extra Large","text-xl",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Text 2x","text-2xl",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Text 3x","text-3xl",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Text 4x","text-4xl",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Text 5x","text-5xl",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Text 6x","text-6xl",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Text Antialiased","antialiased",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Text Pixel Antialiased","subpixel-antialiased",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Text Italic","italic",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Text Not Italic","not-italic",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Font Hairline","font-hairline",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Font Thin","font-thin",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Font Light","font-light",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Font Normal","font-normal",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Font Medium","font-medium",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Font Semibold","font-semibold",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Font Bold","font-bold",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Font Extra Bold","font-extrabold",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Font Very Bold","font-black",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Normal Numbers","normal-nums",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Ordinal","ordinal",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Slashed Zero","slashed-zero",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Lining figures","lining-nums",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Oldstyle figures","oldstyle-nums",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Proportional figures","proportional-nums",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Tabular figures","tabular-nums",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Diagonal fractions","diagonal-fractions",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Stacked fractions","stacked-fractions",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Tracking Tighter","tracking-tighter",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Tracking Tight","tracking-tight",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Tracking Normal","tracking-normal",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Tracking Wide","tracking-wide",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Tracking Wider","tracking-wider",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Tracking Widest","tracking-widest",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Line Height 3","leading-3",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Line Height 4","leading-4",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Line Height 5","leading-5",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Line Height 6","leading-6",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Line Height 7","leading-7",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Line Height 8","leading-8",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Line Height 9","leading-9",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Line Height 10","leading-10",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Line Height None","leading-none",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Line Height Tight","leading-tight",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Line Height Snug","leading-snug",["p","h1","h2","h3","h4","h5","span"]),new ContentTools.Style("Line Height Normal","leading-normal",["p","h1","h2","h3","h4","h5","span"]);

I wish I could help implement many of these features but at this point, I don't have enough experience with this project to properly contribute quality code. I hope this helps.

[john3parker]

+1 on a feature to add multiple classes to an element. I'm using Bootstrap with ContentTools and many require multiple classes to be effective. For example, to make an anchor tag look like a button with primary color you need to add both "btn" and "btn-primary" classes.