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();
        },
    };
  },
});

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

Hey, would it be possible to get a license added to this gist?