Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Editor#onTextInput hook, deprecate Editor#registerTextExpansion #368

Merged
merged 1 commit into from
Apr 26, 2016

Conversation

bantic
Copy link
Collaborator

@bantic bantic commented Apr 21, 2016

Adds Editor#onTextInput, which accepts an object with the following properties:

  • text — string; required if match is not present
  • match — regex; required if text is not present
  • run — callback

After a user types a character, the text preceding the cursor is compared to the input handlers. A handler is a match if the text prop is present and the preceding text ends with text, or if match is present and the preceding text matches match. The results of match.exec(userEnteredText) is passed to the handler's run.

This PR also deprecates Editor#registerTextExpansion because onTextInput covers the same use cases as text expansions and has a simpler API.

To add an @-mention handler one could do:

editor.onTextInput({
  text: '@',
  run(editor /*, matches=['@'] */) {
    let { range } = editor;
    let userName = window.prompt('Mention whom?');

    editor.selectRange(range.extend(-1)); // select the '@' character before the cursor
    editor.insertAtom('mention-atom', userName); // replaces the selected range with the atom
  }
});

cc @rlivsey

fixes #367

@bantic bantic force-pushed the update-text-expansions branch 2 times, most recently from 74c5dd3 to f518d91 Compare April 21, 2016 19:57
@bantic bantic changed the title Make text expansion trigger optional, add atStart prop Add Editor#onTextInput hook, deprecate Editor#registerTextExpansion Apr 21, 2016
@bantic bantic force-pushed the update-text-expansions branch 3 times, most recently from d23352c to 4cb7838 Compare April 26, 2016 16:32
@bantic
Copy link
Collaborator Author

bantic commented Apr 26, 2016

This can also be used to auto-format text. For example, this makes text with "*" on either side of it bold, like markdown, and auto-linkifies URLs:

editor.onTextInput({
  match: /(https?:\/\/[^ ]+) $/,
  run(editor, matches) {
    let url = matches[1];
    let range = editor.range;
    editor.selectRange(range.move(-1).extend(-1 * url.length)); // select the URL
    editor.run(postEditor => {
      let link = postEditor.builder.createMarkup('a', {href: url});
      postEditor.toggleMarkup(link);
    });

    editor.selectRange(range); // restore original cursor position
  }
});

editor.onTextInput({
  match: /\*([\w\s]+)\* $/,
  run(editor, matches) {
    let fullText = matches[0];
    let text = matches[1];
    let range = editor.range;

    editor.run(postEditor => {
      let strong = postEditor.builder.createMarkup('strong');
      let position = postEditor.deleteRange(range);

      position = postEditor.insertTextWithMarkup(position, text, [strong]);
      postEditor.insertTextWithMarkup(position, ' ', []); // restore non-bold space after the text
    });
  }
});

demo

Deprecate `Editor#registerTextExpansion` in favor of `onTextInput`

Fixes #367
@bantic bantic merged commit 087fb00 into master Apr 26, 2016
@bantic bantic deleted the update-text-expansions branch April 26, 2016 18:02
@bantic
Copy link
Collaborator Author

bantic commented Apr 26, 2016

released in v0.9.5

@lessless
Copy link

👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

add editor hook to listen for entered text
2 participants