Docs doesn't make it clear how to use TextStyle

[zoltanszogyenyi]

Hey guys,

Awesome library!

I can't get to understand how to apply a simple font-size style to the <span> tag from the TextStyle docs.

My code is:

// Loop through all elements with the data-text-size attribute
  document.querySelectorAll('[data-text-size]').forEach((button) => {
          button.addEventListener('click', () => {
              const fontSize = button.getAttribute('data-text-size');

              console.log({ style: 'font-size: ' + fontSize + ';' })

              // Apply the selected font size via Tailwind classes using the TipTap editor chain
              editor.chain().focus().setMark('textStyle', { style: 'font-size: ' + fontSize + ';' }).run();

              // Hide the dropdown after selection
              textSizeDropdown.hide();
          });
      });
  }

TextStyle is being imported correctly, the <span> tag is being added but for the love of God the style attribute just doesn't appear. And the docs doesn't have a clear example on how to use it in this case.

I'm using this to create a WYSIWYG wrapper for the Flowbite Library.

Help would be appreciated!

[kart-c]

Hope I am not too late, but can you share your code in a reproducible sandbox? As mentioned here, the extension in itself will not apply any styles, but it is being used by other extensions.

Currently I am not sure if tiptap has a fontSize extension, so in your case, you would have to create a custom extension for it.