[feature] Set text method

[sgtrusty]

Description

I am working on a portfolio site, with a contact form that used typed.ts.

typed-ts-features.mp4

As you can see, there are 5 chained promises: full name writing, e-mail writing, message writing, message deleting and e-mail deleting. Then the full name is just set to empty without typed.

Feature Request

Set Text

I would like to simplify my "deleting" promise part of the code from something like this:

const backspaceString = async (data: string, cb : FunctionStringCallback) : Typed => {
  let messageComplete = false;
  const typed = new Typed({ callback: (text: string) => {
    if (!messageComplete) {
      messageComplete = text == data;
      return;
    }
    cb(text);
  }});
  typed.fastForward();
  typed.type(data, {perLetterDelay: 0});
  typed.backspace(data.length, {eraseDelay: { min: 40, max: 80 }});
  await typed.run();
}

To this:

const backspaceString = async (data: string, cb : FunctionStringCallback) : Typed => {
  const typed = new Typed({ initialText: data, callback: (text: string) => {
    cb(text);
  }});
  // or alternatively, a method like this:
  // typed.setText(data);
  typed.backspace(data.length, {eraseDelay: { min: 40, max: 80 }});
  await typed.run();
}

This should update the _resultItems prop, run an updateText and set the index to the last _resultItems position from the new string, resulting in typed.ts also providing a paragraph eraser function, not just writing. The trick is that, it should be immediate, no delay rendering or any errors. Just set the text to that value statically.

Let me know if that is something you would be interested in, I believe I can accomplish a PR with this functionality.

[LoaderB0T]

Hi there, first of all thank you for using my package and for giving feedback. Very valuable! :)

From what I understand the problem is that handling multiple instances of typed.ts together is not easy.
Or rather having multiple separated texts that type and erase after each other is not that easy.

Probably the most elegant solution would be if typed offered a way to have different texts simultaneously in one typed instance like this:

const name = 'Test Name';
const mail = '[email protected]';
const msg = 'foo bar';

const typed = new Typed({...});

typed.named('name').type(name);
typed.named('mail').type(mail );
typed.named('msg').type(msg);

typed.named('msg').backspace(msg.length);
typed.named('mail').backspace(mail.length);
typed.named('name').backspace(name.length);

await typed.run();

And the callback would then look like this:

callback: (data: {name:string; mail: string; msg: string}) => {
    cb(data);
  }}

This would make working with multiple pieces of texts that are shown in different places, but should still behave consistently together, much simpler I guess.

I will work on a solution similar to this idea soon :)

Please let me know if this proposed solution would solve your issue!

PS: adding an initialText option would also be no problem additionally :)

[LoaderB0T]

Hey again,

I just published a beta version of the package that is still WIP: 3.1.0-beta.0

I added the option "namedParts" in the constructor of Typed or in the factory. It is a string literal array.

You can now provide a named part when calling type, backspace, or wait (it doesn't affect wait, so this might change). And the callback or (in the case of the factory) update function types will adjust accordingly. I will continue to clean up the logic, the types & the docs in the next few days, but please let me know if this update solves your problem.

You can find a working example in the repo on the WIP branch here: https://github.com/LoaderB0T/typed.ts/blob/named-parts/src/test.ts

[sgtrusty]

Great job! I will test it during the week and come back with any feedback. Thanks :)

[LoaderB0T]

@sgtrusty Hi there, did you have a chance to check the beta version out? :)

[sgtrusty]

@sgtrusty Hi there, did you have a chance to check the beta version out? :)

Not yet, sorry 😄 . I am okay with closing this, as I will test it at the next opportunity. Thank you very much.