Comments (2)
ryangurn
commented on July 19, 2024
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.
- Allow for overriding base tool classes or overall tags
- Allow for defining compound Style's that allow for arrays of classes all meant to be applied to the given element.
- 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)
- Add some methodology for handing responsive classes that generally are just mutations of other classes.
- 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.
from contenttools.
john3parker
commented on July 19, 2024
+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.
from contenttools.
Related Issues (20)
- Save issue - saves fine, but won't allow a second "save" HOT 5
- Making CT compatible with CSP style-src set to 'self'
- Can't edit files that were included or read by php HOT 17
- Edit multiple paragraphs at once. HOT 2
- Missing translation in /src/scripts/ui/dialogs/table.coffee
- Problem update image classes HOT 5
- Build files to use dynamic import in pure javascript HOT 1
- How to use assign ? HOT 2
- Hot to keep style attributes on save.
- Support for Sass >= 1.33 HOT 11
- npm install failed HOT 2
- Feature: Support drag & drop of images
- The image uploader HOT 2
- Inspector bar doesn't show embedded HTML elements when wrapped with paragraph HOT 1
- Line breaks not saving
- Add class to a link
- Lazy loading of images
- Source code edit? Insert <script> tag HOT 3
- The part in italics is not the right one HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from contenttools.