Auto capitalize first letter of every paragraph

1

Hey all,

I’m having trouble making it so for every paragraph, if the first letter is lowercase, it’s replaced by uppercase letter.

Any help would be appreciated.

Thanks

2

I think the robust way to do that would be an appendTransaction hook that checks the document for non-capitalized textblocks, and replaces their first letter if it finds any.

3

Do you have somewhere an example which how to use it?

4

Here are the docs for appendTransaction

It’d probably be a good idea to spend some quality time with the guide and examples.

5

I see with docs but i don’t understand how use it in tiptop editor

6

Looks like they’ve wrapped them up in something called extensions. Here are some plugins they bundle. I’m personally just using Prosemirror directly (though had my company not leaned heavily into React I’d have been pretty happy to give it a shot) so I’m not going to be much help. Might be worth adding a prefix like tiptap: to your subject line (assuming Marijn is alright with that) and see if someone with tiptap experience jumps in.

7

Here is a plugin which auto capitalizes your first letter of each line

    Extension.create({
        addProseMirrorPlugins() {
          return [
            new Plugin({
              key: new PluginKey("eventHandler"),
              appendTransaction: (transactions, oldState, newState) => {
                const selection = newState.selection;
                const node = selection.$anchor.parent;
                const nodeSize = node.content.size;
                const nodePos = selection.$head.parentOffset;
                const activeElement = node.attrs.class;
                let transaction = newState.tr;

                if (nodeSize === 1) {
                  // console.log("BRUH", selection.$anchor.pos);
                  transaction = newState.tr.insertText(
                    node.textContent.at(0)?.toUpperCase(),
                    selection.$anchor.pos - 1,
                    selection.$anchor.pos
                  );
                }

                // Changes made to the new state
                return transaction;
              },
            }),
          ];
        },
      }),