Tiptap: Font Size and Family

[saloustrosm]

Hello, great plugin with great extensibility.
I would like to ask, is there a way (hint) how to implement an extension for making buttons for font size and family, font colors would be great too.
I could not find a solution from prosemirror and i suppose this project inherits this issue too?

[beyersito]

Is anyone on this? I could give it a try, any ideas on implementation?

[saloustrosm]

I probably have a solution for this, i certainly am not the hardcore Vue developer nor a prosemirror expert but i think it works quite well. I will upload tomorrow (in about 12 hours) the plugins (fontColor, fontFamily, fontFillColor and fontSize) and my editor.vue wrapper component hoping it will help someone.

[philippkuehn]

Hey @saloustrosm! Do you want to share you solution? 🙌

[saloustrosm]

Hey sorry guys, the few hours became few days, it is a crazy period.

So i am attaching the plugins that i made for the editor, also because i am a novice in vue, sounds reasonable to upload my editor.vue file where it binds everything together and i can simply then create an editor by calling it as component ()

Please keep in mind that i am using bubble skin, Quasar framework which made easy buttons and dropdowns, a swatch component that i made and keeps all colors (yours if ask), all font-sizes are in 'em' (easily changeable).

I will gladly provide more info. Hope it helps someone...

tiptapPlugins.zip
editor.zip

[philippkuehn]

Hey, I decided to not support styling nodes in this core packages anymore.

[jeremybphillips]

@saloustrosm could you please make available your swatch component?

Thanks!

[saloustrosm]

Hey @jeremybphillips, ofcourse no problem, swatch component is attached inside .zip

Ofcourse a dropdown or popup will be needed to give it some good taste
I attach the way i call it bellow, it will be usefull if you use my plugins in the previous comments
<swatch :value="('fontTextColor' in marks.fontTextColor.attrs) ? marks.fontTextColor.attrs.fontTextColor : '#000000'" @input="marks.fontTextColor.command({ fontTextColor: $event })" />

Have fun, i wll gladly help if you need something else

swatchColors.zip

[vedmant]

Is there some good example for font size / color / font family selectors? That attached example is from older version and is not working.

[pkkid]

I was able to modify the fontsize javascript above with the following which works in the current version of Tiptap.

tiptap: 1.25.0
tiptap-extensions: 1.27.0

extensions.js (new file extends tiptap Mark)

import {Mark} from 'tiptap';
import {markInputRule, updateMark, removeMark} from 'tiptap-commands';

/**
 * FontSize - Extends the built in Mark from tiptap allowing
 * the editor to <drumroll> set the font-size.
 */
export class FontSize extends Mark {
  get name() {
    return 'fontSize';
  }

  get schema() {
    return {
      attrs: {fontSize: {default: '1em'}},
      parseDOM: [{
        style: 'font-size',
        getAttrs: value => value.indexOf('em') !== -1 ? {fontSize:value} : '',
      }],
      toDOM: mark => ['span', {style:`font-size: ${mark.attrs.fontSize}`}, 0],
    };
  }

  commands({type}) {
    return attrs => {
      if ((attrs.fontSize) && (attrs.fontSize != '1em')) {
        return updateMark(type, attrs);
      }
      return removeMark(type);
    };
  }

  inputRules({type}) {
    return [markInputRule(/(?:\*\*|__)([^*_]+)(?:\*\*|__)$/, type)];
  }
}

editor.vue (relevant template portion)

<editor-menu-bar :editor='editor' v-slot='{commands, getMarkAttrs, isActive}' v-if='editing'>
  <button :class='{"active":getMarkAttrs("fontSize").fontSize === "12px"}' @click='commands.fontSize({fontSize:"12px"})'>12px</button>
  <button :class='{"active":getMarkAttrs("fontSize").fontSize === "15px"}' @click='commands.fontSize({fontSize:"15px"})'>15px</button>
  <button :class='{"active":!("fontSize" in getMarkAttrs("fontSize"))}' @click='commands.fontSize({fontSize:null})'>18px</button>
  <button :class='{"active":getMarkAttrs("fontSize").fontSize === "22px"}' @click='commands.fontSize({fontSize:"22px"})'>22px</button>
  <button :class='{"active":getMarkAttrs("fontSize").fontSize === "26px"}' @click='commands.fontSize({fontSize:"26px"})'>26px</button>
</editor-menu-bar>

[xlcrr]

Hey @pkkid I am getting

"TypeError: Cannot read property 'fontSize' of undefined"

any idea why ?

[pkkid]

Did you initialize it as an extension when creating the TipTap editor object?

[xlcrr]

@pkkid no I did not, good tip :-)

That fixed it, thanks!

[xlcrr]

The following works when you highlight text and change the value

<select @change="commands.fontSize({fontSize:$event.target.value})">
      <option v-for="size in fontSizes">{{ size }}</option>
</select>

But how can we set the default fontSize when the user is typing?

[amiceli]

@pkkid Thanks ! You saved my day !