update for TipTap V3

[AnnMarieW]

Closes #617

• Updated for TipTap 3 as recommended in Mantine 8.3.0. Followed Migration Guide

• Added new features available in TIpTap 3 text style extension: BackgroundColor, FontFamily, FontSize, LineHeight

• Will add example to the docs for custom FontSize buttons:

import dash_mantine_components as dmc
from dash import Dash
from dash_iconify import DashIconify

app = Dash()

component = dmc.RichTextEditor(
    html="<p>Change font size with the controls!</p>",
    toolbar={
        "controlsGroups": [
            ["H1", "H2", "H3", "H4"],
            [
                {
                    "CustomControl": {
                        "aria-label": "Increase font size",
                        "title": "Increase font size",
                        "children": DashIconify(icon="mdi:format-font-size-increase", width=16),
                        "onClick": {"function": "increaseFontSize"},
                    },
                },
                {
                    "CustomControl": {
                        "aria-label": "Decrease font size",
                        "title": "Decrease font size",
                        "children": DashIconify(icon="mdi:format-font-size-decrease", width=16),
                        "onClick": {"function": "decreaseFontSize"},
                    },
                },
            ],
         ],
    },
)


app.layout = dmc.MantineProvider(
    component
)

if __name__ == "__main__":
    app.run(debug=True)

var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

function changeFontSize(editor, delta) {
  if (!editor) return;
  const { from, to } = editor.state.selection;
  let size = 16; // default

  editor.state.doc.nodesBetween(from, to, (node) => {
    if (node.isText) {
      const mark = node.marks.find(m => m.type.name === "textStyle");
      if (mark?.attrs.fontSize) {
        size = parseInt(mark.attrs.fontSize, 10);
      }
    }
  });

  const newSize = Math.min(Math.max(size + delta, 8), 72) + "px";
  editor.chain().focus().setFontSize(newSize).run();
}

dmcfuncs.increaseFontSize = ({ editor }) => changeFontSize(editor, 2);
dmcfuncs.decreaseFontSize = ({ editor }) => changeFontSize(editor, -2);

[alexcjohnson]

💃 Nice! I presume TipTap v3 has no breaking changes in the html or json data formats it exposes? Those would be the only breaking changes that matter as far as Dash users are concerned.

[AnnMarieW]

Well, there are breaking changes in Tiptap V3: https://tiptap.dev/docs/resources/whats-new

Most of the changes are handled in the RichTextEditor component (ie renamed extensions and utilities)

In their changelog, it's noted that some defaults have changed in the TextStyle API. I noticed that with TextAlign. In v2 it defaulted to "left" and in V3 it defaults to "null" if it's undefined. That seems more like a bug fix than a breaking change. There may be others.

If people made their own custom controls, there could be breaking changes. (No changes were needed for the examples in the docs)

In the upstream Mantine, it's recommended (but not required) to upgrade to Tiptap 3, so it makes sense that this isn't considered a breaking change. However in DMC, it's not optional. Do you think this feature should wait for next major release?

[alexcjohnson]

Unless you expect the next major soon, I think it's fine to include here. This will be generally helpful, and the potential breaking changes are quite deep in custom functionality, with the exception of those small styling changes which I agree seem more like bug fixes. Just make sure to call out in the changelog and docs where these changes might be needed and where to read about them.

[AnnMarieW]

OK since there are no known breaking changes in our documented features, it should be OK to include this now. No plans for a major release any time soon. I'll update the migration guide and changelog.

Thanks for your guidance on this!