From b76bf1a433edf0adc80246828949ef192fb19b46 Mon Sep 17 00:00:00 2001 From: Enzo Ferey Date: Thu, 22 Nov 2018 23:02:41 +0100 Subject: [PATCH] Updated docs and examples. --- README.md | 19 ++++++++++++++++--- examples/emojis-example/src/Slate.js | 9 +++++---- .../multiple-transforms-example/src/Slate.js | 15 ++++++++------- examples/urls-example/src/Slate.js | 12 ++++++------ lib/commands.js | 2 +- lib/index.js | 6 +++--- package.json | 8 +++++--- 7 files changed, 44 insertions(+), 27 deletions(-) diff --git a/README.md b/README.md index a7f40ff..efd5c71 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ [![Build Status](https://travis-ci.org/enzoferey/slate-instant-replace.svg?branch=master)](https://travis-ci.org/enzoferey/slate-instant-replace) -A Slate plugin to automatically replace text automatically when the user types certain strings. +A Slate plugin that gives you full power on the last word your user typed. #### Why ? @@ -10,7 +10,7 @@ I was looking at some plugin to automatically replace some text at the very same #### How ? -This plugin applies your transformations everytime you write a new letter and has no opinion on the changes you make to the SlateJS's `change` object. It gives you the change object and the last word and the rest is up to you ! +This plugin applies your transformations every time you write a new letter and has no opinion on the changes you make to the SlateJS's `editor` instance. Your transformation functions will receive as arguments the editor instance and the last word write and the rest is up to you ! ## Install @@ -24,7 +24,7 @@ npm install --save slate-instant-replace import InstantReplace from "slate-instant-replace"; import { Editor } from "slate-react"; -const YourFunction = (change, lastWord) => { +const YourFunction = (editor, lastWord) => { ... } @@ -52,6 +52,19 @@ const plugins = [InstantReplace([YourFunction1, YourFunction2, YourFunction3])]; | --------------- | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **`transform`** | `Function` `ArrayOf(Function)` | The transforms to apply to the `change` object each time a letter is pressed. If an array is passed, the functions will be applied from the first element of the array to the last. | +## Commands and queries + +Additionally this plugins exposes the follow [commands and queries](https://docs.slatejs.org/guides/commands-and-queries) if you want to reuse them for your other plugins: + +| Name | Type | Description | +| ----------------------- | --------- | --------------------------------------------------------------------------------- | +| getSelection | `query` | Returns the current selection. | +| getCurrentWordOffset | `query` | Returns the offset of the current word in the node. | +| getLastWord | `query` | Returns the last word using as a reference the current anchor position. | +| getPreviousNode | `query` | Returns the previous node to the one currently focused. | +| isFirstCharOfNode | `query` | Returns true if the anchor is at position 0 of the current node. | +| focusPreviousInlineNode | `command` | Focuses the previous [`Inline`](https://docs.slatejs.org/slate-core/inline) node. | + ## Examples - Emoji auto replacement ([check source code](https://github.com/enzoferey/slate-instant-replace/blob/master/examples/emojis-example/src/Slate.js)) diff --git a/examples/emojis-example/src/Slate.js b/examples/emojis-example/src/Slate.js index ad470a7..e693f17 100644 --- a/examples/emojis-example/src/Slate.js +++ b/examples/emojis-example/src/Slate.js @@ -2,10 +2,11 @@ import React from "react"; import { Editor } from "slate-react"; import Plain from "slate-plain-serializer"; -import InstantReplace from "./lib"; +import InstantReplace from "slate-instant-replace"; import { toArray } from "react-emoji-render"; +// Check out react-emoji-render, pretty cool library ! const parseEmojis = value => { const emojisArray = toArray(value); const newValue = emojisArray.reduce((previous, current) => { @@ -16,9 +17,9 @@ const parseEmojis = value => { }; // Transformation function -const AddEmojis = (change, lastWord) => { - change.extend(-lastWord.length); // select last word - change.insertText(parseEmojis(lastWord)); // replace it +const AddEmojis = (editor, lastWord) => { + editor.moveFocusBackward(lastWord.length); // select last word + editor.insertText(parseEmojis(lastWord)); // replace it }; // Initialise the plugin diff --git a/examples/multiple-transforms-example/src/Slate.js b/examples/multiple-transforms-example/src/Slate.js index d54b60b..b52e08d 100644 --- a/examples/multiple-transforms-example/src/Slate.js +++ b/examples/multiple-transforms-example/src/Slate.js @@ -2,10 +2,11 @@ import React from "react"; import { Editor } from "slate-react"; import Plain from "slate-plain-serializer"; -import InstantReplace from "./lib"; +import InstantReplace from "slate-instant-replace"; import { toArray } from "react-emoji-render"; +// Check out react-emoji-render, pretty cool library ! const parseEmojis = value => { const emojisArray = toArray(value); const newValue = emojisArray.reduce((previous, current) => { @@ -16,16 +17,16 @@ const parseEmojis = value => { }; // Transformation function -const AddEmojis = (change, lastWord) => { - change.extend(-lastWord.length); // select last word - change.insertText(parseEmojis(lastWord)); // replace it +const AddEmojis = (editor, lastWord) => { + editor.moveFocusBackward(lastWord.length); // select last word + editor.insertText(parseEmojis(lastWord)); // replace it }; // Transformation function 2 -const CustomTransform = (change, lastWord) => { +const CustomTransform = (editor, lastWord) => { if (lastWord === "hello") { - change.extend(-lastWord.length); // select last word - change.insertText("hi"); // replace it + editor.moveFocusBackward(lastWord.length); // select last word + editor.insertText("hi"); // replace it } }; diff --git a/examples/urls-example/src/Slate.js b/examples/urls-example/src/Slate.js index f148498..c7fe4ab 100644 --- a/examples/urls-example/src/Slate.js +++ b/examples/urls-example/src/Slate.js @@ -2,18 +2,18 @@ import React from "react"; import { Editor } from "slate-react"; import Plain from "slate-plain-serializer"; -import InstantReplace from "./lib"; +import InstantReplace from "slate-instant-replace"; import isUrl from "is-url"; // Transformation function -const AddURL = (change, lastWord) => { +const AddURL = (editor, lastWord) => { if (isUrl(lastWord)) { - change.extend(-lastWord.length); // select last word - change.unwrapInline("link"); // remove existing urls + editor.moveFocusBackward(lastWord.length); // select last word + editor.unwrapInline("link"); // remove existing urls const href = lastWord.startsWith("http") ? lastWord : `https://${lastWord}`; - change.wrapInline({ type: "link", data: { href } }); // set URL inline - change.extend(lastWord.length); // deselect it + editor.wrapInline({ type: "link", data: { href } }); // set URL inline + editor.moveFocusForward(lastWord.length); // deselect it } }; diff --git a/lib/commands.js b/lib/commands.js index 816b39f..203e6cb 100644 --- a/lib/commands.js +++ b/lib/commands.js @@ -2,7 +2,7 @@ import { Inline } from "slate"; import { getPreviousNode, isFirstCharOfNode } from "./queries"; -export const focusPreviousNode = editor => { +export const focusPreviousInlineNode = editor => { if (isFirstCharOfNode(editor)) { const previousNode = getPreviousNode(editor); if (previousNode && Inline.isInline(previousNode)) { diff --git a/lib/index.js b/lib/index.js index 665ecce..1a10426 100644 --- a/lib/index.js +++ b/lib/index.js @@ -5,7 +5,7 @@ import { getPreviousNode, isFirstCharOfNode, } from "./queries"; -import { focusPreviousNode } from "./commands"; +import { focusPreviousInlineNode } from "./commands"; import { isPrintableChar, isCtrlOrCmd, isSpace } from "./keyHelpers"; const InstantReplace = transforms => ({ @@ -17,7 +17,7 @@ const InstantReplace = transforms => ({ isFirstCharOfNode, }, commands: { - focusPreviousNode, + focusPreviousInlineNode, }, onKeyDown(event, editor, next) { if (!isPrintableChar(event)) return next(); @@ -25,7 +25,7 @@ const InstantReplace = transforms => ({ // Needed to handle space & control + key actions by default if (!isCtrlOrCmd(event)) { // Focus previous node to make sure to write inside the previous Inline - if (!isSpace(event)) focusPreviousNode(editor); + if (!isSpace(event)) focusPreviousInlineNode(editor); // Insert the text manually editor.insertText(event.key); diff --git a/package.json b/package.json index 2468b7a..e844b56 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "slate-instant-replace", - "version": "0.1.8", - "description": "A Slate plugin to automatically replace text automatically when the user types certain strings.", + "version": "0.1.9", + "description": "A Slate plugin that gives you full power on the last word your user typed.", "repository": "git://github.com/enzoferey/slate-instant-replace.git", "main": "./dist/index.js", "files": [ @@ -35,7 +35,9 @@ "slate", "autocomplete", "replace", - "editor" + "editor", + "last", + "word" ], "dependencies": {} }