font-size for tiptap 2

font-size.ts

import { Extension } from "@tiptap/core";
import "@tiptap/extension-text-style";

export type FontSizeOptions = {
  types: string[];
};

declare module "@tiptap/core" {
  interface Commands<ReturnType> {
    fontSize: {
      /**
       * Set the font size
       */
      setFontSize: (fontSize: string) => ReturnType;
      /**
       * Unset the font size
       */
      unsetFontSize: () => ReturnType;
    };
  }
}

export const FontSize = Extension.create<FontSizeOptions>({
  name: "fontSize",

  addOptions() {
    return {
      types: ["textStyle"],
    };
  },

  addGlobalAttributes() {
    return [
      {
        types: this.options.types,
        attributes: {
          fontSize: {
            default: null,
            parseHTML: (element) =>
              element.style.fontSize.replace(/['"]+/g, ""),
            renderHTML: (attributes) => {
              if (!attributes.fontSize) {
                return {};
              }

              return {
                style: `font-size: ${attributes.fontSize}`,
              };
            },
          },
        },
      },
    ];
  },

  addCommands() {
    return {
      setFontSize:
        (fontSize) =>
        ({ chain }) => {
          return chain().setMark("textStyle", { fontSize }).run();
        },
      unsetFontSize:
        () =>
        ({ chain }) => {
          return chain()
            .setMark("textStyle", { fontSize: null })
            .removeEmptyTextStyle()
            .run();
        },
    };
  },
});

This is an extension for setting the font size in a tiptap 2 editor.
The original code for this was taken from tiptap's fontFamily
The docs for using the extension are exactly the same as the font family docs, just change "fontFamily" to "fontSize" everywhere (match the case of the original).

I am hoping that once the authors of tiptap get to a point where they have less to do on tiptap, that they create their own version of font-size.

Thanks for sharing this!

Thanks for this

is there any example of this ?

is there any example of this ?

Here is how I use it in my editor. I am still using Vuetify 2.x, but it should show you how it is used.

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { Editor } from "@tiptap/vue-2";
import EditorMenuButton from "./EditorMenuButton.vue";

export const sizes = [
  "8",
  "10",
  "12",
  "14",
  "16",
  "18",
  "20",
  "24",
  "30",
  "36",
  "48",
  "60",
  "72",
];

export default defineComponent({
  name: "FontTypeDropdown",
  components: { EditorMenuButton },
  props: {
    editor: {
      type: Object as PropType<Editor>,
      required: true,
    },
  },
  setup() {
    return { sizes };
  },
});
</script>

<template>
  <v-menu bottom close-on-content-click offset-y>
    <template #activator="{ on, attrs }">
      <EditorMenuButton
        icon="$fontSize"
        tooltip="Font Size"
        v-bind="attrs"
        v-on="on"
      />
    </template>
    <v-list dense>
      <v-list-item @click="editor.chain().focus().unsetFontSize().run()">
        default
      </v-list-item>
      <v-list-item
        v-for="size in sizes"
        :key="size"
        :class="{
          active: editor.isActive('textStyle', { fontSize: `${size}px` }),
        }"
        @click="editor.chain().focus().setFontSize(`${size}px`).run()"
      >
        <v-list-item-content>{{ size }}</v-list-item-content>
      </v-list-item>
    </v-list>
  </v-menu>
</template>

<style lang="scss" scoped>
.active {
  background-color: rgba(0, 0, 0, 0.1);
}
</style>

Thank you for your response. Here is how I implemented to my code in my Nextjs project with Shadcn.

const fontSizes = Array.from({ length: 31 }, (_, i) => ${i + 6}px);

const Toolbar = ({ content, editor }: Props) => {
if (!editor) return null;
return (

{/* Font Size Button */}
<Select
onValueChange={(value) => {
editor.commands.setFontSize(value);
}}
>





{fontSizes.map((size, index) => (

{size}

))}

);
};
......rest of the code