Prevent LSEP character from rendering on Windows using Chrome

Hi,

On Windows using the Chrome Browser, the LSEP character renders. The typeface for the solution is set in Inter.

I was just curious how would I go about removing this character? Should I remove it using javascript or do a find/replace on the data in the CMS. If I have to do a find/replace what’s the best way to go about it?

Warmest, Carl.

Hello @solutions

Can you provide a screenshot from where the character is rendering and you wish to overwrite it?

Hi m.finamor

Attached herein are the screenshots. It might have something to do with multi-text. The field is multitext. Basically have that character (LSEP) removed or formatted accordingly.

Warmest, Carl.

lsep-characters

The LSEP Characters

Warmest, Carl.

Thank you for the clarification!
It seems like the input on that field has a LSEP character inserted (probably unintentionally pasted from somewhere else)
The way to go here should be, as you said, to replace it.
Using a simple regex replace like .replace(/
/g," ") should solve it

If you are setting that field through the CMA, sanitising the input before with that method should avoid it to be inputed into the CMS itself

Hi m.finamor

The regex seems to make sense.

Is it possible for the DatoCMS admin to go about applying that regex filter [Like a plugin or a setting of some sort]? Or is it just meant to only done on the front-end?

I also noticed that this happens on multi-line text (so perhaps converting it into single-line text or structured field would be the way to go about it).

Warmest, Carl.

Hello Carl,

Unfortunately we can’t do this on a global level for the entire website, as some people would want the behaviour of rendering that character, but as you mentioned, the creation of a custom plugin that filters out that character from the field value could be created using our SDK: Plugin SDK - Field extensions - DatoCMS Docs

Hi m.finamor

This seems to be the right direction with going about things. I’ve had a tinker with it,

function LsepFilter({ ctx }:PropTypes) {
  const currentValue:any = get(ctx.formValues, ctx.fieldPath);

  const handleChange = (newValue: any) => {
    // Remove the LSEP Character
    ctx.setFieldValue(ctx.fieldPath, newValue.replace(/\u2028/g, ''));
  };

  return (
      <Canvas ctx={ctx}>
        <TextInput id={ctx.field.id}
                   value={currentValue}
                   onChange={handleChange}
        />
      </Canvas>
  );
}

This is what I have so far (a component for ALL single-line text fields), but there seems to be a lot more to it (in terms of handling validations and regexes).

Is there a reference in the docs where I can see how <TextInput> is implemented with handing the regex and validation cases?

Alternatively, I was curious if there is a hook for the “Submit” button where I can just grab all the fields and manipulate it from there.

Warmest, Carl.

Hello @solutions

We have a couple of ctx attributes and methods that could assist your plugin creation:

To check if somone is attempting to save a record:

To trigger a record save programatically:

To get all values from fields inside the current record:

To change the value of a field: