@lexical/react 0.8.1 → 0.9.0

package/LexicalAutoEmbedPlugin.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *

package/LexicalAutoEmbedPlugin.dev.js

@@ -28,6 +28,7 @@ class AutoEmbedOption extends LexicalTypeaheadMenuPlugin.TypeaheadOption {
     this.title = title;
     this.onSelect = options.onSelect.bind(this);
   }
+
 }
 function LexicalAutoEmbedPlugin({
   embedConfigs,
@@ -45,10 +46,12 @@ function LexicalAutoEmbedPlugin({
   const checkIfLinkNodeIsEmbeddable = React.useCallback(key => {
     editor.getEditorState().read(async () => {
       const linkNode = lexical.$getNodeByKey(key);
+
       if (link.$isLinkNode(linkNode)) {
         for (let i = 0; i < embedConfigs.length; i++) {
           const embedConfig = embedConfigs[i];
           const urlMatch = await Promise.resolve(embedConfig.parseUrl(linkNode.__url));
+
           if (urlMatch != null) {
             setActiveEmbedConfig(embedConfig);
             setNodeKey(linkNode.getKey());
@@ -70,6 +73,7 @@ function LexicalAutoEmbedPlugin({
         }
       }
     };
+
     return utils.mergeRegister(...[link.LinkNode, link.AutoLinkNode].map(Klass => editor.registerMutationListener(Klass, (...args) => listener(...args))));
   }, [checkIfLinkNodeIsEmbeddable, editor, embedConfigs, nodeKey, reset]);
   React.useEffect(() => {
@@ -77,10 +81,12 @@ function LexicalAutoEmbedPlugin({
       const embedConfig = embedConfigs.find(({
         type
       }) => type === embedConfigType);
+
       if (embedConfig) {
         onOpenEmbedModalForConfig(embedConfig);
         return true;
       }
+
       return false;
     }, lexical.COMMAND_PRIORITY_EDITOR);
   }, [editor, embedConfigs, onOpenEmbedModalForConfig]);
@@ -88,16 +94,21 @@ function LexicalAutoEmbedPlugin({
     if (activeEmbedConfig != null && nodeKey != null) {
       const linkNode = editor.getEditorState().read(() => {
         const node = lexical.$getNodeByKey(nodeKey);
+
         if (link.$isLinkNode(node)) {
           return node;
         }
+
         return null;
       });
+
       if (link.$isLinkNode(linkNode)) {
         const result = await Promise.resolve(activeEmbedConfig.parseUrl(linkNode.__url));
+
         if (result != null) {
           editor.update(() => {
             activeEmbedConfig.insertNode(editor, result);
+
             if (linkNode.isAttached()) {
               linkNode.remove();
             }

package/LexicalAutoFocusPlugin.dev.js

@@ -28,6 +28,7 @@ function AutoFocusPlugin({
       // of this plugin, which should preserve focus too.
       const activeElement = document.activeElement;
       const rootElement = editor.getRootElement();
+
       if (rootElement !== null && (activeElement === null || !rootElement.contains(activeElement))) {
         // Note: preventScroll won't work in Webkit.
         rootElement.focus({

package/LexicalAutoLinkPlugin.d.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
+/// <reference types="react" />
 import type { LinkAttributes } from '@lexical/link';
 declare type ChangeHandler = (url: string | null, prevUrl: string | null) => void;
 declare type LinkMatcherResult = {

package/LexicalAutoLinkPlugin.dev.js

@@ -19,65 +19,86 @@ var react = require('react');
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 function findFirstMatch(text, matchers) {
   for (let i = 0; i < matchers.length; i++) {
     const match = matchers[i](text);
+
     if (match) {
       return match;
     }
   }
+
   return null;
 }
+
 const PUNCTUATION_OR_SPACE = /[.,;\s]/;
+
 function isSeparator(char) {
   return PUNCTUATION_OR_SPACE.test(char);
 }
+
 function endsWithSeparator(textContent) {
   return isSeparator(textContent[textContent.length - 1]);
 }
+
 function startsWithSeparator(textContent) {
   return isSeparator(textContent[0]);
 }
+
 function isPreviousNodeValid(node) {
   let previousNode = node.getPreviousSibling();
+
   if (lexical.$isElementNode(previousNode)) {
     previousNode = previousNode.getLastDescendant();
   }
+
   return previousNode === null || lexical.$isLineBreakNode(previousNode) || lexical.$isTextNode(previousNode) && endsWithSeparator(previousNode.getTextContent());
 }
+
 function isNextNodeValid(node) {
   let nextNode = node.getNextSibling();
+
   if (lexical.$isElementNode(nextNode)) {
     nextNode = nextNode.getFirstDescendant();
   }
+
   return nextNode === null || lexical.$isLineBreakNode(nextNode) || lexical.$isTextNode(nextNode) && startsWithSeparator(nextNode.getTextContent());
 }
+
 function isContentAroundIsValid(matchStart, matchEnd, text, node) {
   const contentBeforeIsValid = matchStart > 0 ? isSeparator(text[matchStart - 1]) : isPreviousNodeValid(node);
+
   if (!contentBeforeIsValid) {
     return false;
   }
+
   const contentAfterIsValid = matchEnd < text.length ? isSeparator(text[matchEnd]) : isNextNodeValid(node);
   return contentAfterIsValid;
 }
+
 function handleLinkCreation(node, matchers, onChange) {
   const nodeText = node.getTextContent();
   let text = nodeText;
   let invalidMatchEnd = 0;
   let remainingTextNode = node;
   let match;
+
   while ((match = findFirstMatch(text, matchers)) && match !== null) {
     const matchStart = match.index;
     const matchLength = match.length;
     const matchEnd = matchStart + matchLength;
     const isValid = isContentAroundIsValid(invalidMatchEnd + matchStart, invalidMatchEnd + matchEnd, nodeText, node);
+
     if (isValid) {
       let linkTextNode;
+
       if (invalidMatchEnd + matchStart === 0) {
         [linkTextNode, remainingTextNode] = remainingTextNode.splitText(invalidMatchEnd + matchLength);
       } else {
         [, linkTextNode, remainingTextNode] = remainingTextNode.splitText(invalidMatchEnd + matchStart, invalidMatchEnd + matchStart + matchLength);
       }
+
       const linkNode = link.$createAutoLinkNode(match.url, match.attributes);
       const textNode = lexical.$createTextNode(match.text);
       textNode.setFormat(linkTextNode.getFormat());
@@ -89,82 +110,99 @@ function handleLinkCreation(node, matchers, onChange) {
     } else {
       invalidMatchEnd += matchEnd;
     }
+
     text = text.substring(matchEnd);
   }
 }
+
 function handleLinkEdit(linkNode, matchers, onChange) {
   // Check children are simple text
   const children = linkNode.getChildren();
   const childrenLength = children.length;
+
   for (let i = 0; i < childrenLength; i++) {
     const child = children[i];
+
     if (!lexical.$isTextNode(child) || !child.isSimpleText()) {
       replaceWithChildren(linkNode);
       onChange(null, linkNode.getURL());
       return;
     }
-  }
+  } // Check text content fully matches
+
 
-  // Check text content fully matches
   const text = linkNode.getTextContent();
   const match = findFirstMatch(text, matchers);
+
   if (match === null || match.text !== text) {
     replaceWithChildren(linkNode);
     onChange(null, linkNode.getURL());
     return;
-  }
+  } // Check neighbors
+
 
-  // Check neighbors
   if (!isPreviousNodeValid(linkNode) || !isNextNodeValid(linkNode)) {
     replaceWithChildren(linkNode);
     onChange(null, linkNode.getURL());
     return;
   }
+
   const url = linkNode.getURL();
+
   if (url !== match.url) {
     linkNode.setURL(match.url);
     onChange(match.url, url);
   }
+
   if (match.attributes) {
     const rel = linkNode.getRel();
+
     if (rel !== match.attributes.rel) {
       linkNode.setRel(match.attributes.rel || null);
       onChange(match.attributes.rel || null, rel);
     }
+
     const target = linkNode.getTarget();
+
     if (target !== match.attributes.target) {
       linkNode.setTarget(match.attributes.target || null);
       onChange(match.attributes.target || null, target);
     }
   }
-}
-
-// Bad neighbours are edits in neighbor nodes that make AutoLinks incompatible.
+} // Bad neighbours are edits in neighbor nodes that make AutoLinks incompatible.
 // Given the creation preconditions, these can only be simple text nodes.
+
+
 function handleBadNeighbors(textNode, matchers, onChange) {
   const previousSibling = textNode.getPreviousSibling();
   const nextSibling = textNode.getNextSibling();
   const text = textNode.getTextContent();
+
   if (link.$isAutoLinkNode(previousSibling) && !startsWithSeparator(text)) {
     previousSibling.append(textNode);
     handleLinkEdit(previousSibling, matchers, onChange);
     onChange(null, previousSibling.getURL());
   }
+
   if (link.$isAutoLinkNode(nextSibling) && !endsWithSeparator(text)) {
     replaceWithChildren(nextSibling);
     handleLinkEdit(nextSibling, matchers, onChange);
     onChange(null, nextSibling.getURL());
   }
 }
+
 function replaceWithChildren(node) {
   const children = node.getChildren();
   const childrenLength = children.length;
+
   for (let j = childrenLength - 1; j >= 0; j--) {
     node.insertAfter(children[j]);
   }
+
   node.remove();
   return children.map(child => child.getLatest());
 }
+
 function useAutoLink(editor, matchers, onChange) {
   react.useEffect(() => {
     if (!editor.hasNodes([link.AutoLinkNode])) {
@@ -172,25 +210,30 @@ function useAutoLink(editor, matchers, onChange) {
         throw Error(`LexicalAutoLinkPlugin: AutoLinkNode not registered on editor`);
       }
     }
+
     const onChangeWrapped = (url, prevUrl) => {
       if (onChange) {
         onChange(url, prevUrl);
       }
     };
+
     return utils.mergeRegister(editor.registerNodeTransform(lexical.TextNode, textNode => {
       const parent = textNode.getParentOrThrow();
       const previous = textNode.getPreviousSibling();
+
       if (link.$isAutoLinkNode(parent)) {
         handleLinkEdit(parent, matchers, onChangeWrapped);
       } else if (!link.$isLinkNode(parent)) {
         if (textNode.isSimpleText() && (startsWithSeparator(textNode.getTextContent()) || !link.$isAutoLinkNode(previous))) {
           handleLinkCreation(textNode, matchers, onChangeWrapped);
         }
+
         handleBadNeighbors(textNode, matchers, onChangeWrapped);
       }
     }));
   }, [editor, matchers, onChange]);
 }
+
 function AutoLinkPlugin({
   matchers,
   onChange

package/LexicalBlockWithAlignableContents.dev.js

@@ -34,25 +34,31 @@ function BlockWithAlignableContents({
       event.preventDefault();
       editor.update(() => {
         const node = lexical.$getNodeByKey(nodeKey);
+        if (node === null) return;
+        lexical.$setSelection(node.selectPrevious());
+
         if (lexical.$isDecoratorNode(node)) {
           node.remove();
         }
-        setSelected(false);
       });
     }
+
     return false;
-  }, [editor, isSelected, nodeKey, setSelected]);
+  }, [editor, isSelected, nodeKey]);
   React.useEffect(() => {
     return utils.mergeRegister(editor.registerCommand(lexical.FORMAT_ELEMENT_COMMAND, formatType => {
       if (isSelected) {
         const selection = lexical.$getSelection();
+
         if (lexical.$isNodeSelection(selection)) {
           const node = lexical.$getNodeByKey(nodeKey);
+
           if (LexicalDecoratorBlockNode.$isDecoratorBlockNode(node)) {
             node.setFormat(formatType);
           }
         } else if (lexical.$isRangeSelection(selection)) {
           const nodes = selection.getNodes();
+
           for (const node of nodes) {
             if (LexicalDecoratorBlockNode.$isDecoratorBlockNode(node)) {
               node.setFormat(formatType);
@@ -62,18 +68,23 @@ function BlockWithAlignableContents({
             }
           }
         }
+
         return true;
       }
+
       return false;
     }, lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.CLICK_COMMAND, event => {
       if (event.target === ref.current) {
         event.preventDefault();
+
         if (!event.shiftKey) {
           clearSelection();
         }
+
         setSelected(!isSelected);
         return true;
       }
+
       return false;
     }, lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.KEY_DELETE_COMMAND, onDelete, lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.KEY_BACKSPACE_COMMAND, onDelete, lexical.COMMAND_PRIORITY_LOW));
   }, [clearSelection, editor, isSelected, nodeKey, onDelete, setSelected]);

package/LexicalBlockWithAlignableContents.prod.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-'use strict';var a=require("@lexical/react/LexicalComposerContext"),h=require("@lexical/react/LexicalDecoratorBlockNode"),m=require("@lexical/react/useLexicalNodeSelection"),n=require("@lexical/utils"),u=require("lexical"),v=require("react");
-exports.BlockWithAlignableContents=function({children:w,format:p,nodeKey:g,className:q}){let [d]=a.useLexicalComposerContext(),[e,k,r]=m.useLexicalNodeSelection(g),t=v.useRef(null),l=v.useCallback(b=>{e&&u.$isNodeSelection(u.$getSelection())&&(b.preventDefault(),d.update(()=>{const c=u.$getNodeByKey(g);u.$isDecoratorNode(c)&&c.remove();k(!1)}));return!1},[d,e,g,k]);v.useEffect(()=>n.mergeRegister(d.registerCommand(u.FORMAT_ELEMENT_COMMAND,b=>{if(e){var c=u.$getSelection();if(u.$isNodeSelection(c)){var f=
-u.$getNodeByKey(g);h.$isDecoratorBlockNode(f)&&f.setFormat(b)}else if(u.$isRangeSelection(c)){c=c.getNodes();for(f of c)h.$isDecoratorBlockNode(f)?f.setFormat(b):n.$getNearestBlockElementAncestorOrThrow(f).setFormat(b)}return!0}return!1},u.COMMAND_PRIORITY_LOW),d.registerCommand(u.CLICK_COMMAND,b=>b.target===t.current?(b.preventDefault(),b.shiftKey||r(),k(!e),!0):!1,u.COMMAND_PRIORITY_LOW),d.registerCommand(u.KEY_DELETE_COMMAND,l,u.COMMAND_PRIORITY_LOW),d.registerCommand(u.KEY_BACKSPACE_COMMAND,l,
-u.COMMAND_PRIORITY_LOW)),[r,d,e,g,l,k]);return v.createElement("div",{className:[q.base,e?q.focus:null].filter(Boolean).join(" "),ref:t,style:{textAlign:p?p:void 0}},w)}
+'use strict';var a=require("@lexical/react/LexicalComposerContext"),h=require("@lexical/react/LexicalDecoratorBlockNode"),l=require("@lexical/react/useLexicalNodeSelection"),m=require("@lexical/utils"),u=require("lexical"),v=require("react");
+exports.BlockWithAlignableContents=function({children:w,format:n,nodeKey:g,className:p}){let [d]=a.useLexicalComposerContext(),[e,q,r]=l.useLexicalNodeSelection(g),t=v.useRef(null),k=v.useCallback(c=>{e&&u.$isNodeSelection(u.$getSelection())&&(c.preventDefault(),d.update(()=>{const b=u.$getNodeByKey(g);null!==b&&(u.$setSelection(b.selectPrevious()),u.$isDecoratorNode(b)&&b.remove())}));return!1},[d,e,g]);v.useEffect(()=>m.mergeRegister(d.registerCommand(u.FORMAT_ELEMENT_COMMAND,c=>{if(e){var b=u.$getSelection();
+if(u.$isNodeSelection(b)){var f=u.$getNodeByKey(g);h.$isDecoratorBlockNode(f)&&f.setFormat(c)}else if(u.$isRangeSelection(b)){b=b.getNodes();for(f of b)h.$isDecoratorBlockNode(f)?f.setFormat(c):m.$getNearestBlockElementAncestorOrThrow(f).setFormat(c)}return!0}return!1},u.COMMAND_PRIORITY_LOW),d.registerCommand(u.CLICK_COMMAND,c=>c.target===t.current?(c.preventDefault(),c.shiftKey||r(),q(!e),!0):!1,u.COMMAND_PRIORITY_LOW),d.registerCommand(u.KEY_DELETE_COMMAND,k,u.COMMAND_PRIORITY_LOW),d.registerCommand(u.KEY_BACKSPACE_COMMAND,
+k,u.COMMAND_PRIORITY_LOW)),[r,d,e,g,k,q]);return v.createElement("div",{className:[p.base,e?p.focus:null].filter(Boolean).join(" "),ref:t,style:{textAlign:n?n:void 0}},w)}

package/LexicalCharacterLimitPlugin.d.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
+/// <reference types="react" />
 export declare function CharacterLimitPlugin({ charset, maxLength, }: {
     charset: 'UTF-8' | 'UTF-16';
     maxLength: number;

package/LexicalCharacterLimitPlugin.dev.js

@@ -45,13 +45,16 @@ function useCharacterLimit(editor, maxCharacters, optional = Object.freeze({}))
     }) => {
       const isComposing = editor.isComposing();
       const hasDirtyLeaves = dirtyLeaves.size > 0;
+
       if (isComposing || !hasDirtyLeaves) {
         return;
       }
+
       const textLength = strlen(text$1);
       const textLengthAboveThreshold = textLength > maxCharacters || lastComputedTextLength !== null && lastComputedTextLength > maxCharacters;
       const diff = maxCharacters - textLength;
       remainingCharacters(diff);
+
       if (lastComputedTextLength === null || textLengthAboveThreshold) {
         const offset = findOffset(text$1, maxCharacters, strlen);
         editor.update(() => {
@@ -60,62 +63,75 @@ function useCharacterLimit(editor, maxCharacters, optional = Object.freeze({}))
           tag: 'history-merge'
         });
       }
+
       lastComputedTextLength = textLength;
     }));
   }, [editor, maxCharacters, remainingCharacters, strlen]);
 }
+
 function findOffset(text, maxCharacters, strlen) {
   // @ts-ignore This is due to be added in a later version of TS
   const Segmenter = Intl.Segmenter;
   let offsetUtf16 = 0;
   let offset = 0;
+
   if (typeof Segmenter === 'function') {
     const segmenter = new Segmenter();
     const graphemes = segmenter.segment(text);
+
     for (const {
       segment: grapheme
     } of graphemes) {
       const nextOffset = offset + strlen(grapheme);
+
       if (nextOffset > maxCharacters) {
         break;
       }
+
       offset = nextOffset;
       offsetUtf16 += grapheme.length;
     }
   } else {
     const codepoints = Array.from(text);
     const codepointsLength = codepoints.length;
+
     for (let i = 0; i < codepointsLength; i++) {
       const codepoint = codepoints[i];
       const nextOffset = offset + strlen(codepoint);
+
       if (nextOffset > maxCharacters) {
         break;
       }
+
       offset = nextOffset;
       offsetUtf16 += codepoint.length;
     }
   }
+
   return offsetUtf16;
 }
+
 function $wrapOverflowedNodes(offset) {
   const dfsNodes = utils.$dfs();
   const dfsNodesLength = dfsNodes.length;
   let accumulatedLength = 0;
+
   for (let i = 0; i < dfsNodesLength; i += 1) {
     const {
       node
     } = dfsNodes[i];
+
     if (overflow.$isOverflowNode(node)) {
       const previousLength = accumulatedLength;
       const nextLength = accumulatedLength + node.getTextContentSize();
+
       if (nextLength <= offset) {
         const parent = node.getParent();
         const previousSibling = node.getPreviousSibling();
         const nextSibling = node.getNextSibling();
         $unwrapNode(node);
-        const selection = lexical.$getSelection();
+        const selection = lexical.$getSelection(); // Restore selection when the overflow children are removed
 
-        // Restore selection when the overflow children are removed
         if (lexical.$isRangeSelection(selection) && (!selection.anchor.getNode().isAttached() || !selection.focus.getNode().isAttached())) {
           if (lexical.$isTextNode(previousSibling)) {
             previousSibling.select();
@@ -128,11 +144,12 @@ function $wrapOverflowedNodes(offset) {
       } else if (previousLength < offset) {
         const descendant = node.getFirstDescendant();
         const descendantLength = descendant !== null ? descendant.getTextContentSize() : 0;
-        const previousPlusDescendantLength = previousLength + descendantLength;
-        // For simple text we can redimension the overflow into a smaller and more accurate
+        const previousPlusDescendantLength = previousLength + descendantLength; // For simple text we can redimension the overflow into a smaller and more accurate
         // container
+
         const firstDescendantIsSimpleText = lexical.$isTextNode(descendant) && descendant.isSimpleText();
         const firstDescendantDoesNotOverflow = previousPlusDescendantLength <= offset;
+
         if (firstDescendantIsSimpleText || firstDescendantDoesNotOverflow) {
           $unwrapNode(node);
         }
@@ -140,49 +157,59 @@ function $wrapOverflowedNodes(offset) {
     } else if (lexical.$isLeafNode(node)) {
       const previousAccumulatedLength = accumulatedLength;
       accumulatedLength += node.getTextContentSize();
+
       if (accumulatedLength > offset && !overflow.$isOverflowNode(node.getParent())) {
         const previousSelection = lexical.$getSelection();
-        let overflowNode;
-
-        // For simple text we can improve the limit accuracy by splitting the TextNode
+        let overflowNode; // For simple text we can improve the limit accuracy by splitting the TextNode
         // on the split point
+
         if (previousAccumulatedLength < offset && lexical.$isTextNode(node) && node.isSimpleText()) {
           const [, overflowedText] = node.splitText(offset - previousAccumulatedLength);
           overflowNode = $wrapNode(overflowedText);
         } else {
           overflowNode = $wrapNode(node);
         }
+
         if (previousSelection !== null) {
           lexical.$setSelection(previousSelection);
         }
+
         mergePrevious(overflowNode);
       }
     }
   }
 }
+
 function $wrapNode(node) {
   const overflowNode = overflow.$createOverflowNode();
   node.insertBefore(overflowNode);
   overflowNode.append(node);
   return overflowNode;
 }
+
 function $unwrapNode(node) {
   const children = node.getChildren();
   const childrenLength = children.length;
+
   for (let i = 0; i < childrenLength; i++) {
     node.insertBefore(children[i]);
   }
+
   node.remove();
   return childrenLength > 0 ? children[childrenLength - 1] : null;
 }
+
 function mergePrevious(overflowNode) {
   const previousNode = overflowNode.getPreviousSibling();
+
   if (!overflow.$isOverflowNode(previousNode)) {
     return;
   }
+
   const firstChild = overflowNode.getFirstChild();
   const previousNodeChildren = previousNode.getChildren();
   const previousNodeChildrenLength = previousNodeChildren.length;
+
   if (firstChild === null) {
     overflowNode.append(...previousNodeChildren);
   } else {
@@ -190,23 +217,28 @@ function mergePrevious(overflowNode) {
       firstChild.insertBefore(previousNodeChildren[i]);
     }
   }
+
   const selection = lexical.$getSelection();
+
   if (lexical.$isRangeSelection(selection)) {
     const anchor = selection.anchor;
     const anchorNode = anchor.getNode();
     const focus = selection.focus;
     const focusNode = anchor.getNode();
+
     if (anchorNode.is(previousNode)) {
       anchor.set(overflowNode.getKey(), anchor.offset, 'element');
     } else if (anchorNode.is(overflowNode)) {
       anchor.set(overflowNode.getKey(), previousNodeChildrenLength + anchor.offset, 'element');
     }
+
     if (focusNode.is(previousNode)) {
       focus.set(overflowNode.getKey(), focus.offset, 'element');
     } else if (focusNode.is(overflowNode)) {
       focus.set(overflowNode.getKey(), previousNodeChildrenLength + focus.offset, 'element');
     }
   }
+
   previousNode.remove();
 }
 
@@ -219,24 +251,31 @@ function mergePrevious(overflowNode) {
  */
 const CHARACTER_LIMIT = 5;
 let textEncoderInstance = null;
+
 function textEncoder() {
   if (window.TextEncoder === undefined) {
     return null;
   }
+
   if (textEncoderInstance === null) {
     textEncoderInstance = new window.TextEncoder();
   }
+
   return textEncoderInstance;
 }
+
 function utf8Length(text) {
   const currentTextEncoder = textEncoder();
+
   if (currentTextEncoder === null) {
     // http://stackoverflow.com/a/5515960/210370
     const m = encodeURIComponent(text).match(/%[89ABab]/g);
     return text.length + (m ? m.length : 0);
   }
+
   return currentTextEncoder.encode(text).length;
 }
+
 function CharacterLimitPlugin({
   charset = 'UTF-16',
   maxLength = CHARACTER_LIMIT