Preserve font styles after creating a new paragraph

1

Hi,

I’m trying to save the font-family attribute after the user presses Enter. For now, I use chainCommands: chainCommands( newlineInCode, createParagraphNear, liftEmptyBlock, splitBlock )

createParagraphNear does not save the font-family. I’m trying to go in two different ways. The first one was to replace createParagraphNode with the custom function, but it creates other problems (for example, pressing Enter two times does not lead to the exit of pull quotes mode). Here is the function: const createParagraphAndPreserveFontFamily = () => { const { $to } = state.selection; const { tr } = state;

const anchorNodeFontFamily =
  state.selection.$anchor.parent.attrs.fontFamily;

const paragraphNode = schema.nodes.paragraph.create({
  fontFamily: anchorNodeFontFamily,
});

const transaction = tr
  .insert($to.pos, paragraphNode)
  .setSelection(
    new TextSelection(tr.doc.resolve(tr.curSelection.$cursor.pos + 2))
  );
dispatch(transaction);

return true;

};

The second way is to trying to pass the attributes to createParagraphNode command (seems not to work): chainCommands( newlineInCode, createParagraphNear, (state, dispatch) => {

      const paragraphNode = schema.nodes.paragraph.create({
        fontFamily: "fontVerdana",
      });
     
      dispatch(state.tr.replaceSelectionWith(paragraphNode).scrollIntoView());
      return true;
    },
    liftEmptyBlock,
    splitBlock
  );

Will be thankful for any help )

2

This is a feature in tiptap 2. demo: https://www.tiptap.dev/api/extensions/font-family#usage

We had to create a custom splitBlock and splitListItem command for it: tiptap/splitBlock.ts at main · ueberdosis/tiptap · GitHub

We found it useful to decide per attribute if it is “splittable” so we added an option called keepOnSplit for node attributes. This defaults to true but sometimes you won’t that behavior (imagine a checked attribute for task items).

3

thanks ) but on the project, we use only Prose Mirror. Is it possible to achieve this with Prose Mirror only?

4

That’s why I linked you to the code.

1 Like