Custom colors

[Hesesses]

Hello,

Thank you for creating this! I was wondering how I can add custom colors?

[ncla]

Good timing, I ran into this problem well. Currently this addon uses Tailwind default theme colors with no ability to add your own.

What you can do instead and what I did is add this addon to your project locally and make changes to it how you want.

https://statamic.dev/extending/control-panel#adding-css-and-js-assets
https://statamic.dev/extending/bard#prosemirror-rendering

Just copy the source files, register the service provider in config/app.php by adding service provider class in providers array.

ServiceProvider.php (original will work as well I think)

class ServiceProvider extends AddonServiceProvider
{
    public function boot() {
        parent::boot();
        Augmentor::addMark(TextColor::class);
        Statamic::script('textcolor', 'textcolor.js');
    }
}

For JS part, copy the files but to add your own colors, modify TextColorMenu.vue

I swapped out default Tailwind theme to parse my own Tailwind theme with my own colors. Tailwind can help reference your theme easily. https://tailwindcss.com/docs/configuration#referencing-in-java-script

So I have something basic like this:

import resolveConfig from 'tailwindcss/resolveConfig'
import tailwindConfig from '../../../tailwind.config.js'

const resolvedConfig = resolveConfig(tailwindConfig)
const colors = resolvedConfig.theme.colors

export default {
  mixins: [ BardToolbarButton ],
  data() {
    return {
      showColorMenu: false,
      availableColors: colors,
      getMarkAttrs: this.editor.getMarkAttrs.bind(this.editor),
    };
  },
  methods: {
    setColor(color) {
      this.editor.commands.textColor({ color: color })
      this.showColorMenu = false
    },
  },
  mounted: function() {
    // this probably can be done better but I just wanted to add single color
    this.availableColors = Object.assign({highlight: '#C50B67'}, this.availableColors);
  }
};

Most problematic was sorting out compiling the JS / Vue part. I am using Laravel Mix 6. Make sure you have these things installed to have it compile.

"vue-loader": "^15.9.5",
"vue-template-compiler": "2.6.14"
"vue": "^2.6.14"

and in webpack.mix.js

.vue() // this is important
.js('resources/js/textcolor/bard.js', 'public/vendor/textcolor/js/textcolor.js')

and you may have to change how you import the files, depending how is your project configured.

import TextColor from "./TextColor.js"; // with file extension
import TextColorMenu from "./TextColorMenu.vue";

[Bogdan Mihai]

Hello!
I'll be looking into adding custom colors into the official package.
Thank you for the suggestion.

[Bogdan Mihai]

Okay so I've released a v2 of the package thinking it was okay, only to realise it was only working fine for my project.
I can't figure how to load the tailwind.config.js file dynamically from the project that it's installed on, or attach it to webpack to at least build it when you build your project and have it import your tailwind.config.js when building the assets (run dev/watch/prod).
Got any ideas?
I've tried pretty much everything and I'm out :(
If you know how to fix it please tell me, and I'll fix it myself, or gladly add you as a contributor, so you can officially be part of the plugin's development effort.

[ncla]

@xndbogdan

Personally I would be okay if I could just pass my own colors through PHP config file. For my use case that would be fine as I only realistically need just one color to have a design specific color highlighting. This package does not have to limit itself to just Tailwind colors.

The current solution should work but yeah you need to figure out the dynamic import part. Maybe passing the Tailwind config from PHP side to Vue component prop could work.

Could maybe ask around on Statamic Discord server, people there are helpful and nice.

[Bogdan Mihai]

I released a new version that should support custom colors via config file.
Please confirm that it works well for you.
Future upgrades to automatically pull colors will be available in the future.

[ncla]

Hey,

I just tested this and it seems to be reading the color correctly from config file. I see that you were able to get help in #extending channel on Discord. Pretty simple solution.

Thanks!

[Bogdan Mihai]

I'm glad it's working good for you.