Missing text align justify and list checkbox

[100tomtomas100]

Thank you for this package!

I want to align-text-justify and it is not set by default. As well i can not only change funtionality for just justify, i need to do styling for all other align possibilities.

paragraph: (props) => {
            //@ts-ignore
            if (props.format === "justify") {
              return (
                <p className={styles.paragraphJustify}>{props.children}</p>
              );
            } 
          }

If paragraph is not align-text-justify it returns empty and nothing is rendered. If i want to make other options work i have to style it one by one even though the other options are already styled by default.

I have similar issue with lists and checkbox

list: (props) => {
            //@ts-ignore
            if (props.listType === "check") {     
                return (
                  <CheckBox >{props.children}</CheckBox>
                );
              }
            } else if (props.listType === "bullet") {
              return <ul>{props.children}</ul>;
            } else if (props.listType === "number") {
              return <ol>{props.children}</ol>;
            }
          },

My question is if i can add text-align-justify without the need to style other options (as they are already styled by default) as well as add checkbox without the need to do styling for ol and ul?

Thank you !

[schaschjan]

Hey @100tomtomas100, if you want to change styles only for lists of the type check, then you could try this:

import { defaultElementRenderers } from "@atelier-disko/payload-lexical-react-renderer";
...
list: (element) => {
    if (props.listType === "check") {
        return (
            <CheckBox>{props.children} < /CheckBox>
        );
    }

    return defaultElementRenderers.list(element)
}

[schaschjan]

@100tomtomas100 i just published version 1.0.4 including the missing type options. Thanks for the report!

[100tomtomas100]

Thank you! It works perfectly

I have another request with the check lists At the moment I have to check if the box is checked before sending it to the component of checkBox

list: (props) => {         
            if (props.listType === "check") {
              //workaround to mark checkbox checked
              if (checkedBoxes) {
                const isChecked = checkedBoxes[0];
                checkedBoxes.shift();

                return (
                  <CheckBox checked={isChecked}>{props.children}</CheckBox>
                );
              }
            }
            return defaultElementRenderers.list(props);
            }

I feel it is unecessary dificult and it does not work on livePreview. Would it be possible to add checked or not to the props which we are sending to the custom component. It is possible to see if its checked before PayloadLexicalReactRenderer but inside it is not visible anymore. I basicaly maped through all the nodes and checked which are checked boxes and which are not and then send one by one to the checkbox component.