@lexical/code 0.3.9 → 0.4.0

package/LexicalCode.dev.js

@@ -20,7 +20,6 @@ require('prismjs/components/prism-rust');
 require('prismjs/components/prism-swift');
 var utils = require('@lexical/utils');
 var lexical = require('lexical');
-var code = require('@lexical/code');
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -29,55 +28,132 @@ var code = require('@lexical/code');
  * LICENSE file in the root directory of this source tree.
  *
  */
+const DEFAULT_CODE_LANGUAGE = 'javascript';
+const CODE_LANGUAGE_FRIENDLY_NAME_MAP = {
+  c: 'C',
+  clike: 'C-like',
+  css: 'CSS',
+  html: 'HTML',
+  js: 'JavaScript',
+  markdown: 'Markdown',
+  objc: 'Objective-C',
+  plain: 'Plain Text',
+  py: 'Python',
+  rust: 'Rust',
+  sql: 'SQL',
+  swift: 'Swift',
+  xml: 'XML'
+};
+const CODE_LANGUAGE_MAP = {
+  javascript: 'js',
+  md: 'markdown',
+  plaintext: 'plain',
+  python: 'py',
+  text: 'plain'
+};
+function normalizeCodeLang(lang) {
+  return CODE_LANGUAGE_MAP[lang] || lang;
+}
+function getLanguageFriendlyName(lang) {
+  const _lang = normalizeCodeLang(lang);
 
-function isSpaceOrTabChar(char) {
-  return char === ' ' || char === '\t';
+  return CODE_LANGUAGE_FRIENDLY_NAME_MAP[_lang] || _lang;
 }
+const getDefaultCodeLanguage = () => DEFAULT_CODE_LANGUAGE;
+const getCodeLanguages = () => Object.keys(Prism.languages).filter( // Prism has several language helpers mixed into languages object
+// so filtering them out here to get langs list
+language => typeof Prism.languages[language] !== 'function').sort();
+/** @noInheritDoc */
 
-function findFirstNotSpaceOrTabCharAtText(text, isForward) {
-  const length = text.length;
-  let offset = -1;
+class CodeHighlightNode extends lexical.TextNode {
+  /** @internal */
+  constructor(text, highlightType, key) {
+    super(text, key);
+    this.__highlightType = highlightType;
+  }
 
-  if (isForward) {
-    for (let i = 0; i < length; i++) {
-      const char = text[i];
+  static getType() {
+    return 'code-highlight';
+  }
 
-      if (!isSpaceOrTabChar(char)) {
-        offset = i;
-        break;
+  static clone(node) {
+    return new CodeHighlightNode(node.__text, node.__highlightType || undefined, node.__key);
+  }
+
+  getHighlightType() {
+    const self = this.getLatest();
+    return self.__highlightType;
+  }
+
+  createDOM(config) {
+    const element = super.createDOM(config);
+    const className = getHighlightThemeClass(config.theme, this.__highlightType);
+    utils.addClassNamesToElement(element, className);
+    return element;
+  }
+
+  updateDOM(prevNode, dom, config) {
+    const update = super.updateDOM(prevNode, dom, config);
+    const prevClassName = getHighlightThemeClass(config.theme, prevNode.__highlightType);
+    const nextClassName = getHighlightThemeClass(config.theme, this.__highlightType);
+
+    if (prevClassName !== nextClassName) {
+      if (prevClassName) {
+        utils.removeClassNamesFromElement(dom, prevClassName);
       }
-    }
-  } else {
-    for (let i = length - 1; i > -1; i--) {
-      const char = text[i];
 
-      if (!isSpaceOrTabChar(char)) {
-        offset = i;
-        break;
+      if (nextClassName) {
+        utils.addClassNamesToElement(dom, nextClassName);
       }
     }
+
+    return update;
+  }
+
+  static importJSON(serializedNode) {
+    const node = $createCodeHighlightNode(serializedNode.text, serializedNode.highlightType);
+    node.setFormat(serializedNode.format);
+    node.setDetail(serializedNode.detail);
+    node.setMode(serializedNode.mode);
+    node.setStyle(serializedNode.style);
+    return node;
+  }
+
+  exportJSON() {
+    return { ...super.exportJSON(),
+      highlightType: this.getHighlightType(),
+      type: 'code-highlight',
+      version: 1
+    };
+  } // Prevent formatting (bold, underline, etc)
+
+
+  setFormat(format) {
+    return this;
   }
 
-  return offset;
 }
 
-function getStartOfCodeInLine(anchor) {
+function getHighlightThemeClass(theme, highlightType) {
+  return highlightType && theme && theme.codeHighlight && theme.codeHighlight[highlightType];
+}
+
+function $createCodeHighlightNode(text, highlightType) {
+  return new CodeHighlightNode(text, highlightType);
+}
+function $isCodeHighlightNode(node) {
+  return node instanceof CodeHighlightNode;
+}
+function getFirstCodeHighlightNodeOfLine(anchor) {
   let currentNode = null;
-  let currentNodeOffset = -1;
   const previousSiblings = anchor.getPreviousSiblings();
   previousSiblings.push(anchor);
 
   while (previousSiblings.length > 0) {
     const node = previousSiblings.pop();
 
-    if (code.$isCodeHighlightNode(node)) {
-      const text = node.getTextContent();
-      const offset = findFirstNotSpaceOrTabCharAtText(text, true);
-
-      if (offset !== -1) {
-        currentNode = node;
-        currentNodeOffset = offset;
-      }
+    if ($isCodeHighlightNode(node)) {
+      currentNode = node;
     }
 
     if (lexical.$isLineBreakNode(node)) {
@@ -85,51 +161,18 @@ function getStartOfCodeInLine(anchor) {
     }
   }
 
-  if (currentNode === null) {
-    const nextSiblings = anchor.getNextSiblings();
-
-    while (nextSiblings.length > 0) {
-      const node = nextSiblings.shift();
-
-      if (code.$isCodeHighlightNode(node)) {
-        const text = node.getTextContent();
-        const offset = findFirstNotSpaceOrTabCharAtText(text, true);
-
-        if (offset !== -1) {
-          currentNode = node;
-          currentNodeOffset = offset;
-          break;
-        }
-      }
-
-      if (lexical.$isLineBreakNode(node)) {
-        break;
-      }
-    }
-  }
-
-  return {
-    node: currentNode,
-    offset: currentNodeOffset
-  };
+  return currentNode;
 }
-function getEndOfCodeInLine(anchor) {
+function getLastCodeHighlightNodeOfLine(anchor) {
   let currentNode = null;
-  let currentNodeOffset = -1;
   const nextSiblings = anchor.getNextSiblings();
   nextSiblings.unshift(anchor);
 
   while (nextSiblings.length > 0) {
     const node = nextSiblings.shift();
 
-    if (code.$isCodeHighlightNode(node)) {
-      const text = node.getTextContent();
-      const offset = findFirstNotSpaceOrTabCharAtText(text, false);
-
-      if (offset !== -1) {
-        currentNode = node;
-        currentNodeOffset = offset + 1;
-      }
+    if ($isCodeHighlightNode(node)) {
+      currentNode = node;
     }
 
     if (lexical.$isLineBreakNode(node)) {
@@ -137,944 +180,908 @@ function getEndOfCodeInLine(anchor) {
     }
   }
 
-  if (currentNode === null) {
-    const previousSiblings = anchor.getPreviousSiblings();
-
-    while (previousSiblings.length > 0) {
-      const node = previousSiblings.pop();
-
-      if (code.$isCodeHighlightNode(node)) {
-        const text = node.getTextContent();
-        const offset = findFirstNotSpaceOrTabCharAtText(text, false);
-
-        if (offset !== -1) {
-          currentNode = node;
-          currentNodeOffset = offset + 1;
-          break;
-        }
-      }
-
-      if (lexical.$isLineBreakNode(node)) {
-        break;
-      }
-    }
-  }
-
-  return {
-    node: currentNode,
-    offset: currentNodeOffset
-  };
+  return currentNode;
 }
 
-function textNodeTransform(node, editor) {
-  // Since CodeNode has flat children structure we only need to check
-  // if node's parent is a code node and run highlighting if so
-  const parentNode = node.getParent();
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
 
-  if (code.$isCodeNode(parentNode)) {
-    codeNodeTransform(parentNode, editor);
-  } else if (code.$isCodeHighlightNode(node)) {
-    // When code block converted into paragraph or other element
-    // code highlight nodes converted back to normal text
-    node.replace(lexical.$createTextNode(node.__text));
-  }
-}
+const mapToPrismLanguage = language => {
+  // eslint-disable-next-line no-prototype-builtins
+  return language != null && Prism.languages.hasOwnProperty(language) ? language : undefined;
+};
 
-function updateCodeGutter(node, editor) {
-  const codeElement = editor.getElementByKey(node.getKey());
+const LANGUAGE_DATA_ATTRIBUTE = 'data-highlight-language';
+/** @noInheritDoc */
 
-  if (codeElement === null) {
-    return;
+class CodeNode extends lexical.ElementNode {
+  /** @internal */
+  static getType() {
+    return 'code';
   }
 
-  const children = node.getChildren();
-  const childrenLength = children.length; // @ts-ignore: internal field
+  static clone(node) {
+    return new CodeNode(node.__language, node.__key);
+  }
 
-  if (childrenLength === codeElement.__cachedChildrenLength) {
-    // Avoid updating the attribute if the children length hasn't changed.
-    return;
-  } // @ts-ignore:: internal field
+  constructor(language, key) {
+    super(key);
+    this.__language = mapToPrismLanguage(language);
+  } // View
 
 
-  codeElement.__cachedChildrenLength = childrenLength;
-  let gutter = '1';
-  let count = 1;
+  createDOM(config) {
+    const element = document.createElement('code');
+    utils.addClassNamesToElement(element, config.theme.code);
+    element.setAttribute('spellcheck', 'false');
+    const language = this.getLanguage();
 
-  for (let i = 0; i < childrenLength; i++) {
-    if (lexical.$isLineBreakNode(children[i])) {
-      gutter += '\n' + ++count;
+    if (language) {
+      element.setAttribute(LANGUAGE_DATA_ATTRIBUTE, language);
     }
+
+    return element;
   }
 
-  codeElement.setAttribute('data-gutter', gutter);
-} // Using `skipTransforms` to prevent extra transforms since reformatting the code
-// will not affect code block content itself.
-//
-// Using extra flag (`isHighlighting`) since both CodeNode and CodeHighlightNode
-// transforms might be called at the same time (e.g. new CodeHighlight node inserted) and
-// in both cases we'll rerun whole reformatting over CodeNode, which is redundant.
-// Especially when pasting code into CodeBlock.
-
+  updateDOM(prevNode, dom) {
+    const language = this.__language;
+    const prevLanguage = prevNode.__language;
 
-let isHighlighting = false;
+    if (language) {
+      if (language !== prevLanguage) {
+        dom.setAttribute(LANGUAGE_DATA_ATTRIBUTE, language);
+      }
+    } else if (prevLanguage) {
+      dom.removeAttribute(LANGUAGE_DATA_ATTRIBUTE);
+    }
 
-function codeNodeTransform(node, editor) {
-  if (isHighlighting) {
-    return;
+    return false;
   }
 
-  isHighlighting = true; // When new code block inserted it might not have language selected
-
-  if (node.getLanguage() === undefined) {
-    node.setLanguage(code.DEFAULT_CODE_LANGUAGE);
-  } // Using nested update call to pass `skipTransforms` since we don't want
-  // each individual codehighlight node to be transformed again as it's already
-  // in its final state
-
-
-  editor.update(() => {
-    updateAndRetainSelection(node, () => {
-      const code$1 = node.getTextContent();
-      const tokens = Prism.tokenize(code$1, Prism.languages[node.getLanguage() || ''] || Prism.languages[code.DEFAULT_CODE_LANGUAGE]);
-      const highlightNodes = getHighlightNodes(tokens);
-      const diffRange = getDiffRange(node.getChildren(), highlightNodes);
-      const {
-        from,
-        to,
-        nodesForReplacement
-      } = diffRange;
-
-      if (from !== to || nodesForReplacement.length) {
-        node.splice(from, to - from, nodesForReplacement);
-        return true;
-      }
-
-      return false;
-    });
-  }, {
-    onUpdate: () => {
-      isHighlighting = false;
-    },
-    skipTransforms: true
-  });
-}
+  static importDOM() {
+    return {
+      // Typically <pre> is used for code blocks, and <code> for inline code styles
+      // but if it's a multi line <code> we'll create a block. Pass through to
+      // inline format handled by TextNode otherwise
+      code: node => {
+        const isMultiLine = node.textContent != null && /\r?\n/.test(node.textContent);
+        return isMultiLine ? {
+          conversion: convertPreElement,
+          priority: 1
+        } : null;
+      },
+      div: node => ({
+        conversion: convertDivElement,
+        priority: 1
+      }),
+      pre: node => ({
+        conversion: convertPreElement,
+        priority: 0
+      }),
+      table: node => {
+        const table = node; // domNode is a <table> since we matched it by nodeName
 
-function getHighlightNodes(tokens) {
-  const nodes = [];
-  tokens.forEach(token => {
-    if (typeof token === 'string') {
-      const partials = token.split('\n');
+        if (isGitHubCodeTable(table)) {
+          return {
+            conversion: convertTableElement,
+            priority: 4
+          };
+        }
 
-      for (let i = 0; i < partials.length; i++) {
-        const text = partials[i];
+        return null;
+      },
+      td: node => {
+        // element is a <td> since we matched it by nodeName
+        const td = node;
+        const table = td.closest('table');
 
-        if (text.length) {
-          nodes.push(code.$createCodeHighlightNode(text));
+        if (isGitHubCodeCell(td)) {
+          return {
+            conversion: convertTableCellElement,
+            priority: 4
+          };
         }
 
-        if (i < partials.length - 1) {
-          nodes.push(lexical.$createLineBreakNode());
+        if (table && isGitHubCodeTable(table)) {
+          // Return a no-op if it's a table cell in a code table, but not a code line.
+          // Otherwise it'll fall back to the T
+          return {
+            conversion: convertCodeNoop,
+            priority: 4
+          };
         }
-      }
-    } else {
-      const {
-        content
-      } = token;
-
-      if (typeof content === 'string') {
-        nodes.push(code.$createCodeHighlightNode(content, token.type));
-      } else if (Array.isArray(content) && content.length === 1 && typeof content[0] === 'string') {
-        nodes.push(code.$createCodeHighlightNode(content[0], token.type));
-      } else if (Array.isArray(content)) {
-        nodes.push(...getHighlightNodes(content));
-      }
-    }
-  });
-  return nodes;
-} // Wrapping update function into selection retainer, that tries to keep cursor at the same
-// position as before.
 
+        return null;
+      },
+      tr: node => {
+        // element is a <tr> since we matched it by nodeName
+        const tr = node;
+        const table = tr.closest('table');
 
-function updateAndRetainSelection(node, updateFn) {
-  const selection = lexical.$getSelection();
+        if (table && isGitHubCodeTable(table)) {
+          return {
+            conversion: convertCodeNoop,
+            priority: 4
+          };
+        }
 
-  if (!lexical.$isRangeSelection(selection) || !selection.anchor) {
-    return;
+        return null;
+      }
+    };
   }
 
-  const anchor = selection.anchor;
-  const anchorOffset = anchor.offset;
-  const isNewLineAnchor = anchor.type === 'element' && lexical.$isLineBreakNode(node.getChildAtIndex(anchor.offset - 1));
-  let textOffset = 0; // Calculating previous text offset (all text node prior to anchor + anchor own text offset)
-
-  if (!isNewLineAnchor) {
-    const anchorNode = anchor.getNode();
-    textOffset = anchorOffset + anchorNode.getPreviousSiblings().reduce((offset, _node) => {
-      return offset + (lexical.$isLineBreakNode(_node) ? 0 : _node.getTextContentSize());
-    }, 0);
+  static importJSON(serializedNode) {
+    const node = $createCodeNode(serializedNode.language);
+    node.setFormat(serializedNode.format);
+    node.setIndent(serializedNode.indent);
+    node.setDirection(serializedNode.direction);
+    return node;
   }
 
-  const hasChanges = updateFn();
+  exportJSON() {
+    return { ...super.exportJSON(),
+      language: this.getLanguage(),
+      type: 'code',
+      version: 1
+    };
+  } // Mutation
 
-  if (!hasChanges) {
-    return;
-  } // Non-text anchors only happen for line breaks, otherwise
-  // selection will be within text node (code highlight node)
 
+  insertNewAfter(selection) {
+    const children = this.getChildren();
+    const childrenLength = children.length;
 
-  if (isNewLineAnchor) {
-    anchor.getNode().select(anchorOffset, anchorOffset);
-    return;
-  } // If it was non-element anchor then we walk through child nodes
-  // and looking for a position of original text offset
+    if (childrenLength >= 2 && children[childrenLength - 1].getTextContent() === '\n' && children[childrenLength - 2].getTextContent() === '\n' && selection.isCollapsed() && selection.anchor.key === this.__key && selection.anchor.offset === childrenLength) {
+      children[childrenLength - 1].remove();
+      children[childrenLength - 2].remove();
+      const newElement = lexical.$createParagraphNode();
+      this.insertAfter(newElement);
+      return newElement;
+    } // If the selection is within the codeblock, find all leading tabs and
+    // spaces of the current line. Create a new line that has all those
+    // tabs and spaces, such that leading indentation is preserved.
 
 
-  node.getChildren().some(_node => {
-    if (lexical.$isTextNode(_node)) {
-      const textContentSize = _node.getTextContentSize();
+    const anchor = selection.anchor.getNode();
+    const firstNode = getFirstCodeHighlightNodeOfLine(anchor);
 
-      if (textContentSize >= textOffset) {
-        _node.select(textOffset, textOffset);
+    if (firstNode != null) {
+      let leadingWhitespace = 0;
+      const firstNodeText = firstNode.getTextContent();
 
-        return true;
+      while (leadingWhitespace < firstNodeText.length && /[\t ]/.test(firstNodeText[leadingWhitespace])) {
+        leadingWhitespace += 1;
       }
 
-      textOffset -= textContentSize;
+      if (leadingWhitespace > 0) {
+        const whitespace = firstNodeText.substring(0, leadingWhitespace);
+        const indentedChild = $createCodeHighlightNode(whitespace);
+        anchor.insertAfter(indentedChild);
+        selection.insertNodes([lexical.$createLineBreakNode()]);
+        indentedChild.select();
+        return indentedChild;
+      }
     }
 
-    return false;
-  });
-} // Finds minimal diff range between two nodes lists. It returns from/to range boundaries of prevNodes
-// that needs to be replaced with `nodes` (subset of nextNodes) to make prevNodes equal to nextNodes.
-
+    return null;
+  }
 
-function getDiffRange(prevNodes, nextNodes) {
-  let leadingMatch = 0;
+  canInsertTab() {
+    const selection = lexical.$getSelection();
 
-  while (leadingMatch < prevNodes.length) {
-    if (!isEqual(prevNodes[leadingMatch], nextNodes[leadingMatch])) {
-      break;
+    if (!lexical.$isRangeSelection(selection) || !selection.isCollapsed()) {
+      return false;
     }
 
-    leadingMatch++;
+    return true;
   }
 
-  const prevNodesLength = prevNodes.length;
-  const nextNodesLength = nextNodes.length;
-  const maxTrailingMatch = Math.min(prevNodesLength, nextNodesLength) - leadingMatch;
-  let trailingMatch = 0;
+  canIndent() {
+    return false;
+  }
 
-  while (trailingMatch < maxTrailingMatch) {
-    trailingMatch++;
+  collapseAtStart() {
+    const paragraph = lexical.$createParagraphNode();
+    const children = this.getChildren();
+    children.forEach(child => paragraph.append(child));
+    this.replace(paragraph);
+    return true;
+  }
 
-    if (!isEqual(prevNodes[prevNodesLength - trailingMatch], nextNodes[nextNodesLength - trailingMatch])) {
-      trailingMatch--;
-      break;
-    }
+  setLanguage(language) {
+    const writable = this.getWritable();
+    writable.__language = mapToPrismLanguage(language);
   }
 
-  const from = leadingMatch;
-  const to = prevNodesLength - trailingMatch;
-  const nodesForReplacement = nextNodes.slice(leadingMatch, nextNodesLength - trailingMatch);
-  return {
-    from,
-    nodesForReplacement,
-    to
-  };
-}
-
-function isEqual(nodeA, nodeB) {
-  // Only checking for code higlight nodes and linebreaks. If it's regular text node
-  // returning false so that it's transformed into code highlight node
-  if (code.$isCodeHighlightNode(nodeA) && code.$isCodeHighlightNode(nodeB)) {
-    return nodeA.__text === nodeB.__text && nodeA.__highlightType === nodeB.__highlightType;
+  getLanguage() {
+    return this.getLatest().__language;
   }
 
-  if (lexical.$isLineBreakNode(nodeA) && lexical.$isLineBreakNode(nodeB)) {
-    return true;
-  }
+}
+function $createCodeNode(language) {
+  return new CodeNode(language);
+}
+function $isCodeNode(node) {
+  return node instanceof CodeNode;
+}
 
-  return false;
+function convertPreElement(domNode) {
+  return {
+    node: $createCodeNode()
+  };
 }
 
-function handleMultilineIndent(type) {
-  const selection = lexical.$getSelection();
+function convertDivElement(domNode) {
+  // domNode is a <div> since we matched it by nodeName
+  const div = domNode;
+  return {
+    after: childLexicalNodes => {
+      const domParent = domNode.parentNode;
 
-  if (!lexical.$isRangeSelection(selection) || selection.isCollapsed()) {
-    return false;
-  } // Only run multiline indent logic on selections exclusively composed of code highlights and linebreaks
+      if (domParent != null && domNode !== domParent.lastChild) {
+        childLexicalNodes.push(lexical.$createLineBreakNode());
+      }
 
+      return childLexicalNodes;
+    },
+    node: isCodeElement(div) ? $createCodeNode() : null
+  };
+}
 
-  const nodes = selection.getNodes();
+function convertTableElement() {
+  return {
+    node: $createCodeNode()
+  };
+}
 
-  for (let i = 0; i < nodes.length; i++) {
-    const node = nodes[i];
+function convertCodeNoop() {
+  return {
+    node: null
+  };
+}
 
-    if (!code.$isCodeHighlightNode(node) && !lexical.$isLineBreakNode(node)) {
-      return false;
-    }
-  }
+function convertTableCellElement(domNode) {
+  // domNode is a <td> since we matched it by nodeName
+  const cell = domNode;
+  return {
+    after: childLexicalNodes => {
+      if (cell.parentNode && cell.parentNode.nextSibling) {
+        // Append newline between code lines
+        childLexicalNodes.push(lexical.$createLineBreakNode());
+      }
 
-  const startOfLine = code.getFirstCodeHighlightNodeOfLine(nodes[0]);
+      return childLexicalNodes;
+    },
+    node: null
+  };
+}
 
-  if (startOfLine != null) {
-    doIndent(startOfLine, type);
-  }
+function isCodeElement(div) {
+  return div.style.fontFamily.match('monospace') !== null;
+}
 
-  for (let i = 1; i < nodes.length; i++) {
-    const node = nodes[i];
+function isGitHubCodeCell(cell) {
+  return cell.classList.contains('js-file-line');
+}
 
-    if (lexical.$isLineBreakNode(nodes[i - 1]) && code.$isCodeHighlightNode(node)) {
-      doIndent(node, type);
-    }
-  }
+function isGitHubCodeTable(table) {
+  return table.classList.contains('js-file-line-container');
+}
 
-  return true;
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+function isSpaceOrTabChar(char) {
+  return char === ' ' || char === '\t';
 }
 
-function doIndent(node, type) {
-  const text = node.getTextContent();
+function findFirstNotSpaceOrTabCharAtText(text, isForward) {
+  const length = text.length;
+  let offset = -1;
 
-  if (type === lexical.INDENT_CONTENT_COMMAND) {
-    // If the codeblock node doesn't start with whitespace, we don't want to
-    // naively prepend a '\t'; Prism will then mangle all of our nodes when
-    // it separates the whitespace from the first non-whitespace node. This
-    // will lead to selection bugs when indenting lines that previously
-    // didn't start with a whitespace character
-    if (text.length > 0 && /\s/.test(text[0])) {
-      node.setTextContent('\t' + text);
-    } else {
-      const indentNode = code.$createCodeHighlightNode('\t');
-      node.insertBefore(indentNode);
+  if (isForward) {
+    for (let i = 0; i < length; i++) {
+      const char = text[i];
+
+      if (!isSpaceOrTabChar(char)) {
+        offset = i;
+        break;
+      }
     }
   } else {
-    if (text.indexOf('\t') === 0) {
-      // Same as above - if we leave empty text nodes lying around, the resulting
-      // selection will be mangled
-      if (text.length === 1) {
-        node.remove();
-      } else {
-        node.setTextContent(text.substring(1));
+    for (let i = length - 1; i > -1; i--) {
+      const char = text[i];
+
+      if (!isSpaceOrTabChar(char)) {
+        offset = i;
+        break;
       }
     }
   }
+
+  return offset;
 }
 
-function handleShiftLines(type, event) {
-  // We only care about the alt+arrow keys
-  const selection = lexical.$getSelection();
+function getStartOfCodeInLine(anchor) {
+  let currentNode = null;
+  let currentNodeOffset = -1;
+  const previousSiblings = anchor.getPreviousSiblings();
+  previousSiblings.push(anchor);
 
-  if (!lexical.$isRangeSelection(selection)) {
-    return false;
-  } // I'm not quite sure why, but it seems like calling anchor.getNode() collapses the selection here
-  // So first, get the anchor and the focus, then get their nodes
+  while (previousSiblings.length > 0) {
+    const node = previousSiblings.pop();
 
+    if ($isCodeHighlightNode(node)) {
+      const text = node.getTextContent();
+      const offset = findFirstNotSpaceOrTabCharAtText(text, true);
 
-  const {
-    anchor,
-    focus
-  } = selection;
-  const anchorOffset = anchor.offset;
-  const focusOffset = focus.offset;
-  const anchorNode = anchor.getNode();
-  const focusNode = focus.getNode();
-  const arrowIsUp = type === lexical.KEY_ARROW_UP_COMMAND; // Ensure the selection is within the codeblock
+      if (offset !== -1) {
+        currentNode = node;
+        currentNodeOffset = offset;
+      }
+    }
 
-  if (!code.$isCodeHighlightNode(anchorNode) || !code.$isCodeHighlightNode(focusNode)) {
-    return false;
+    if (lexical.$isLineBreakNode(node)) {
+      break;
+    }
   }
 
-  if (!event.altKey) {
-    // Handle moving selection out of the code block, given there are no
-    // sibling thats can natively take the selection.
-    if (selection.isCollapsed()) {
-      const codeNode = anchorNode.getParentOrThrow();
+  if (currentNode === null) {
+    const nextSiblings = anchor.getNextSiblings();
 
-      if (arrowIsUp && anchorOffset === 0 && anchorNode.getPreviousSibling() === null) {
-        const codeNodeSibling = codeNode.getPreviousSibling();
+    while (nextSiblings.length > 0) {
+      const node = nextSiblings.shift();
 
-        if (codeNodeSibling === null) {
-          codeNode.selectPrevious();
-          event.preventDefault();
-          return true;
-        }
-      } else if (!arrowIsUp && anchorOffset === anchorNode.getTextContentSize() && anchorNode.getNextSibling() === null) {
-        const codeNodeSibling = codeNode.getNextSibling();
+      if ($isCodeHighlightNode(node)) {
+        const text = node.getTextContent();
+        const offset = findFirstNotSpaceOrTabCharAtText(text, true);
 
-        if (codeNodeSibling === null) {
-          codeNode.selectNext();
-          event.preventDefault();
-          return true;
+        if (offset !== -1) {
+          currentNode = node;
+          currentNodeOffset = offset;
+          break;
         }
       }
-    }
 
-    return false;
+      if (lexical.$isLineBreakNode(node)) {
+        break;
+      }
+    }
   }
 
-  const start = code.getFirstCodeHighlightNodeOfLine(anchorNode);
-  const end = code.getLastCodeHighlightNodeOfLine(focusNode);
-
-  if (start == null || end == null) {
-    return false;
-  }
+  return {
+    node: currentNode,
+    offset: currentNodeOffset
+  };
+}
+function getEndOfCodeInLine(anchor) {
+  let currentNode = null;
+  let currentNodeOffset = -1;
+  const nextSiblings = anchor.getNextSiblings();
+  nextSiblings.unshift(anchor);
 
-  const range = start.getNodesBetween(end);
+  while (nextSiblings.length > 0) {
+    const node = nextSiblings.shift();
 
-  for (let i = 0; i < range.length; i++) {
-    const node = range[i];
+    if ($isCodeHighlightNode(node)) {
+      const text = node.getTextContent();
+      const offset = findFirstNotSpaceOrTabCharAtText(text, false);
 
-    if (!code.$isCodeHighlightNode(node) && !lexical.$isLineBreakNode(node)) {
-      return false;
+      if (offset !== -1) {
+        currentNode = node;
+        currentNodeOffset = offset + 1;
+      }
     }
-  } // After this point, we know the selection is within the codeblock. We may not be able to
-  // actually move the lines around, but we want to return true either way to prevent
-  // the event's default behavior
 
+    if (lexical.$isLineBreakNode(node)) {
+      break;
+    }
+  }
 
-  event.preventDefault();
-  event.stopPropagation(); // required to stop cursor movement under Firefox
+  if (currentNode === null) {
+    const previousSiblings = anchor.getPreviousSiblings();
 
-  const linebreak = arrowIsUp ? start.getPreviousSibling() : end.getNextSibling();
+    while (previousSiblings.length > 0) {
+      const node = previousSiblings.pop();
 
-  if (!lexical.$isLineBreakNode(linebreak)) {
-    return true;
-  }
+      if ($isCodeHighlightNode(node)) {
+        const text = node.getTextContent();
+        const offset = findFirstNotSpaceOrTabCharAtText(text, false);
 
-  const sibling = arrowIsUp ? linebreak.getPreviousSibling() : linebreak.getNextSibling();
+        if (offset !== -1) {
+          currentNode = node;
+          currentNodeOffset = offset + 1;
+          break;
+        }
+      }
 
-  if (sibling == null) {
-    return true;
+      if (lexical.$isLineBreakNode(node)) {
+        break;
+      }
+    }
   }
 
-  const maybeInsertionPoint = arrowIsUp ? code.getFirstCodeHighlightNodeOfLine(sibling) : code.getLastCodeHighlightNodeOfLine(sibling);
-  let insertionPoint = maybeInsertionPoint != null ? maybeInsertionPoint : sibling;
-  linebreak.remove();
-  range.forEach(node => node.remove());
+  return {
+    node: currentNode,
+    offset: currentNodeOffset
+  };
+}
 
-  if (type === lexical.KEY_ARROW_UP_COMMAND) {
-    range.forEach(node => insertionPoint.insertBefore(node));
-    insertionPoint.insertBefore(linebreak);
-  } else {
-    insertionPoint.insertAfter(linebreak);
-    insertionPoint = linebreak;
-    range.forEach(node => {
-      insertionPoint.insertAfter(node);
-      insertionPoint = node;
-    });
-  }
+function textNodeTransform(node, editor) {
+  // Since CodeNode has flat children structure we only need to check
+  // if node's parent is a code node and run highlighting if so
+  const parentNode = node.getParent();
 
-  selection.setTextNodeRange(anchorNode, anchorOffset, focusNode, focusOffset);
-  return true;
+  if ($isCodeNode(parentNode)) {
+    codeNodeTransform(parentNode, editor);
+  } else if ($isCodeHighlightNode(node)) {
+    // When code block converted into paragraph or other element
+    // code highlight nodes converted back to normal text
+    node.replace(lexical.$createTextNode(node.__text));
+  }
 }
 
-function handleMoveTo(type, event) {
-  const selection = lexical.$getSelection();
+function updateCodeGutter(node, editor) {
+  const codeElement = editor.getElementByKey(node.getKey());
 
-  if (!lexical.$isRangeSelection(selection)) {
-    return false;
+  if (codeElement === null) {
+    return;
   }
 
-  const {
-    anchor,
-    focus
-  } = selection;
-  const anchorNode = anchor.getNode();
-  const focusNode = focus.getNode();
-  const isMoveToStart = type === lexical.MOVE_TO_START;
+  const children = node.getChildren();
+  const childrenLength = children.length; // @ts-ignore: internal field
 
-  if (!code.$isCodeHighlightNode(anchorNode) || !code.$isCodeHighlightNode(focusNode)) {
-    return false;
-  }
+  if (childrenLength === codeElement.__cachedChildrenLength) {
+    // Avoid updating the attribute if the children length hasn't changed.
+    return;
+  } // @ts-ignore:: internal field
 
-  let node;
-  let offset;
 
-  if (isMoveToStart) {
-    ({
-      node,
-      offset
-    } = getStartOfCodeInLine(focusNode));
-  } else {
-    ({
-      node,
-      offset
-    } = getEndOfCodeInLine(focusNode));
-  }
+  codeElement.__cachedChildrenLength = childrenLength;
+  let gutter = '1';
+  let count = 1;
 
-  if (node !== null && offset !== -1) {
-    selection.setTextNodeRange(node, offset, node, offset);
+  for (let i = 0; i < childrenLength; i++) {
+    if (lexical.$isLineBreakNode(children[i])) {
+      gutter += '\n' + ++count;
+    }
   }
 
-  event.preventDefault();
-  event.stopPropagation();
-  return true;
-}
+  codeElement.setAttribute('data-gutter', gutter);
+} // Using `skipTransforms` to prevent extra transforms since reformatting the code
+// will not affect code block content itself.
+//
+// Using extra flag (`isHighlighting`) since both CodeNode and CodeHighlightNode
+// transforms might be called at the same time (e.g. new CodeHighlight node inserted) and
+// in both cases we'll rerun whole reformatting over CodeNode, which is redundant.
+// Especially when pasting code into CodeBlock.
 
-function registerCodeHighlighting(editor) {
-  if (!editor.hasNodes([code.CodeNode, code.CodeHighlightNode])) {
-    throw new Error('CodeHighlightPlugin: CodeNode or CodeHighlightNode not registered on editor');
+
+let isHighlighting = false;
+
+function codeNodeTransform(node, editor) {
+  if (isHighlighting) {
+    return;
   }
 
-  return utils.mergeRegister(editor.registerMutationListener(code.CodeNode, mutations => {
-    editor.update(() => {
-      for (const [key, type] of mutations) {
-        if (type !== 'destroyed') {
-          const node = lexical.$getNodeByKey(key);
+  isHighlighting = true; // When new code block inserted it might not have language selected
 
-          if (node !== null) {
-            updateCodeGutter(node, editor);
-          }
-        }
-      }
-    });
-  }), editor.registerNodeTransform(code.CodeNode, node => codeNodeTransform(node, editor)), editor.registerNodeTransform(lexical.TextNode, node => textNodeTransform(node, editor)), editor.registerNodeTransform(code.CodeHighlightNode, node => textNodeTransform(node, editor)), editor.registerCommand(lexical.INDENT_CONTENT_COMMAND, payload => handleMultilineIndent(lexical.INDENT_CONTENT_COMMAND), lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.OUTDENT_CONTENT_COMMAND, payload => handleMultilineIndent(lexical.OUTDENT_CONTENT_COMMAND), lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.KEY_ARROW_UP_COMMAND, payload => handleShiftLines(lexical.KEY_ARROW_UP_COMMAND, payload), lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.KEY_ARROW_DOWN_COMMAND, payload => handleShiftLines(lexical.KEY_ARROW_DOWN_COMMAND, payload), lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.MOVE_TO_END, payload => handleMoveTo(lexical.MOVE_TO_END, payload), lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.MOVE_TO_START, payload => handleMoveTo(lexical.MOVE_TO_START, payload), lexical.COMMAND_PRIORITY_LOW));
-}
+  if (node.getLanguage() === undefined) {
+    node.setLanguage(DEFAULT_CODE_LANGUAGE);
+  } // Using nested update call to pass `skipTransforms` since we don't want
+  // each individual codehighlight node to be transformed again as it's already
+  // in its final state
 
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-const DEFAULT_CODE_LANGUAGE = 'javascript';
-const CODE_LANGUAGE_FRIENDLY_NAME_MAP = {
-  c: 'C',
-  clike: 'C-like',
-  css: 'CSS',
-  html: 'HTML',
-  js: 'JavaScript',
-  markdown: 'Markdown',
-  objc: 'Objective-C',
-  plain: 'Plain Text',
-  py: 'Python',
-  rust: 'Rust',
-  sql: 'SQL',
-  swift: 'Swift',
-  xml: 'XML'
-};
-const CODE_LANGUAGE_MAP = {
-  javascript: 'js',
-  md: 'markdown',
-  plaintext: 'plain',
-  python: 'py',
-  text: 'plain'
-};
-function normalizeCodeLang(lang) {
-  return CODE_LANGUAGE_MAP[lang] || lang;
-}
-function getLanguageFriendlyName(lang) {
-  const _lang = normalizeCodeLang(lang);
 
-  return CODE_LANGUAGE_FRIENDLY_NAME_MAP[_lang] || _lang;
-}
-const getDefaultCodeLanguage = () => DEFAULT_CODE_LANGUAGE;
-const getCodeLanguages = () => Object.keys(Prism.languages).filter( // Prism has several language helpers mixed into languages object
-// so filtering them out here to get langs list
-language => typeof Prism.languages[language] !== 'function').sort();
-class CodeHighlightNode extends lexical.TextNode {
-  constructor(text, highlightType, key) {
-    super(text, key);
-    this.__highlightType = highlightType;
-  }
+  editor.update(() => {
+    updateAndRetainSelection(node, () => {
+      const code = node.getTextContent();
+      const tokens = Prism.tokenize(code, Prism.languages[node.getLanguage() || ''] || Prism.languages[DEFAULT_CODE_LANGUAGE]);
+      const highlightNodes = getHighlightNodes(tokens);
+      const diffRange = getDiffRange(node.getChildren(), highlightNodes);
+      const {
+        from,
+        to,
+        nodesForReplacement
+      } = diffRange;
 
-  static getType() {
-    return 'code-highlight';
-  }
+      if (from !== to || nodesForReplacement.length) {
+        node.splice(from, to - from, nodesForReplacement);
+        return true;
+      }
 
-  static clone(node) {
-    return new CodeHighlightNode(node.__text, node.__highlightType || undefined, node.__key);
-  }
+      return false;
+    });
+  }, {
+    onUpdate: () => {
+      isHighlighting = false;
+    },
+    skipTransforms: true
+  });
+}
 
-  getHighlightType() {
-    const self = this.getLatest();
-    return self.__highlightType;
-  }
+function getHighlightNodes(tokens) {
+  const nodes = [];
+  tokens.forEach(token => {
+    if (typeof token === 'string') {
+      const partials = token.split('\n');
 
-  createDOM(config) {
-    const element = super.createDOM(config);
-    const className = getHighlightThemeClass(config.theme, this.__highlightType);
-    utils.addClassNamesToElement(element, className);
-    return element;
-  }
+      for (let i = 0; i < partials.length; i++) {
+        const text = partials[i];
 
-  updateDOM(prevNode, dom, config) {
-    const update = super.updateDOM(prevNode, dom, config);
-    const prevClassName = getHighlightThemeClass(config.theme, prevNode.__highlightType);
-    const nextClassName = getHighlightThemeClass(config.theme, this.__highlightType);
+        if (text.length) {
+          nodes.push($createCodeHighlightNode(text));
+        }
 
-    if (prevClassName !== nextClassName) {
-      if (prevClassName) {
-        utils.removeClassNamesFromElement(dom, prevClassName);
+        if (i < partials.length - 1) {
+          nodes.push(lexical.$createLineBreakNode());
+        }
       }
+    } else {
+      const {
+        content
+      } = token;
 
-      if (nextClassName) {
-        utils.addClassNamesToElement(dom, nextClassName);
+      if (typeof content === 'string') {
+        nodes.push($createCodeHighlightNode(content, token.type));
+      } else if (Array.isArray(content) && content.length === 1 && typeof content[0] === 'string') {
+        nodes.push($createCodeHighlightNode(content[0], token.type));
+      } else if (Array.isArray(content)) {
+        nodes.push(...getHighlightNodes(content));
       }
     }
+  });
+  return nodes;
+} // Wrapping update function into selection retainer, that tries to keep cursor at the same
+// position as before.
 
-    return update;
+
+function updateAndRetainSelection(node, updateFn) {
+  const selection = lexical.$getSelection(); // If it's not range selection (or null selection) there's no need to change it,
+  // but we can still run highlighting logic
+
+  if (!lexical.$isRangeSelection(selection)) {
+    updateFn();
+    return;
   }
 
-  static importJSON(serializedNode) {
-    const node = $createCodeHighlightNode(serializedNode.text, serializedNode.highlightType);
-    node.setFormat(serializedNode.format);
-    node.setDetail(serializedNode.detail);
-    node.setMode(serializedNode.mode);
-    node.setStyle(serializedNode.style);
-    return node;
+  const anchor = selection.anchor;
+  const anchorOffset = anchor.offset;
+  const isNewLineAnchor = anchor.type === 'element' && lexical.$isLineBreakNode(node.getChildAtIndex(anchor.offset - 1));
+  let textOffset = 0; // Calculating previous text offset (all text node prior to anchor + anchor own text offset)
+
+  if (!isNewLineAnchor) {
+    const anchorNode = anchor.getNode();
+    textOffset = anchorOffset + anchorNode.getPreviousSiblings().reduce((offset, _node) => {
+      return offset + (lexical.$isLineBreakNode(_node) ? 0 : _node.getTextContentSize());
+    }, 0);
   }
 
-  exportJSON() {
-    return { ...super.exportJSON(),
-      highlightType: this.getHighlightType(),
-      type: 'code-highlight',
-      version: 1
-    };
-  } // Prevent formatting (bold, underline, etc)
+  const hasChanges = updateFn();
 
+  if (!hasChanges) {
+    return;
+  } // Non-text anchors only happen for line breaks, otherwise
+  // selection will be within text node (code highlight node)
 
-  setFormat(format) {
-    return this;
-  }
 
-}
+  if (isNewLineAnchor) {
+    anchor.getNode().select(anchorOffset, anchorOffset);
+    return;
+  } // If it was non-element anchor then we walk through child nodes
+  // and looking for a position of original text offset
 
-function getHighlightThemeClass(theme, highlightType) {
-  return highlightType && theme && theme.codeHighlight && theme.codeHighlight[highlightType];
-}
 
-function $createCodeHighlightNode(text, highlightType) {
-  return new CodeHighlightNode(text, highlightType);
-}
-function $isCodeHighlightNode(node) {
-  return node instanceof CodeHighlightNode;
-}
-function getFirstCodeHighlightNodeOfLine(anchor) {
-  let currentNode = null;
-  const previousSiblings = anchor.getPreviousSiblings();
-  previousSiblings.push(anchor);
+  node.getChildren().some(_node => {
+    if (lexical.$isTextNode(_node)) {
+      const textContentSize = _node.getTextContentSize();
 
-  while (previousSiblings.length > 0) {
-    const node = previousSiblings.pop();
+      if (textContentSize >= textOffset) {
+        _node.select(textOffset, textOffset);
 
-    if ($isCodeHighlightNode(node)) {
-      currentNode = node;
+        return true;
+      }
+
+      textOffset -= textContentSize;
     }
 
-    if (lexical.$isLineBreakNode(node)) {
+    return false;
+  });
+} // Finds minimal diff range between two nodes lists. It returns from/to range boundaries of prevNodes
+// that needs to be replaced with `nodes` (subset of nextNodes) to make prevNodes equal to nextNodes.
+
+
+function getDiffRange(prevNodes, nextNodes) {
+  let leadingMatch = 0;
+
+  while (leadingMatch < prevNodes.length) {
+    if (!isEqual(prevNodes[leadingMatch], nextNodes[leadingMatch])) {
       break;
     }
-  }
 
-  return currentNode;
-}
-function getLastCodeHighlightNodeOfLine(anchor) {
-  let currentNode = null;
-  const nextSiblings = anchor.getNextSiblings();
-  nextSiblings.unshift(anchor);
+    leadingMatch++;
+  }
 
-  while (nextSiblings.length > 0) {
-    const node = nextSiblings.shift();
+  const prevNodesLength = prevNodes.length;
+  const nextNodesLength = nextNodes.length;
+  const maxTrailingMatch = Math.min(prevNodesLength, nextNodesLength) - leadingMatch;
+  let trailingMatch = 0;
 
-    if ($isCodeHighlightNode(node)) {
-      currentNode = node;
-    }
+  while (trailingMatch < maxTrailingMatch) {
+    trailingMatch++;
 
-    if (lexical.$isLineBreakNode(node)) {
+    if (!isEqual(prevNodes[prevNodesLength - trailingMatch], nextNodes[nextNodesLength - trailingMatch])) {
+      trailingMatch--;
       break;
     }
   }
 
-  return currentNode;
+  const from = leadingMatch;
+  const to = prevNodesLength - trailingMatch;
+  const nodesForReplacement = nextNodes.slice(leadingMatch, nextNodesLength - trailingMatch);
+  return {
+    from,
+    nodesForReplacement,
+    to
+  };
 }
 
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-const mapToPrismLanguage = language => {
-  // eslint-disable-next-line no-prototype-builtins
-  return language != null && Prism.languages.hasOwnProperty(language) ? language : undefined;
-};
-
-const LANGUAGE_DATA_ATTRIBUTE = 'data-highlight-language';
-class CodeNode extends lexical.ElementNode {
-  static getType() {
-    return 'code';
+function isEqual(nodeA, nodeB) {
+  // Only checking for code higlight nodes and linebreaks. If it's regular text node
+  // returning false so that it's transformed into code highlight node
+  if ($isCodeHighlightNode(nodeA) && $isCodeHighlightNode(nodeB)) {
+    return nodeA.__text === nodeB.__text && nodeA.__highlightType === nodeB.__highlightType;
   }
 
-  static clone(node) {
-    return new CodeNode(node.__language, node.__key);
+  if (lexical.$isLineBreakNode(nodeA) && lexical.$isLineBreakNode(nodeB)) {
+    return true;
   }
 
-  constructor(language, key) {
-    super(key);
-    this.__language = mapToPrismLanguage(language);
-  } // View
+  return false;
+}
 
+function handleMultilineIndent(type) {
+  const selection = lexical.$getSelection();
 
-  createDOM(config) {
-    const element = document.createElement('code');
-    utils.addClassNamesToElement(element, config.theme.code);
-    element.setAttribute('spellcheck', 'false');
-    const language = this.getLanguage();
+  if (!lexical.$isRangeSelection(selection) || selection.isCollapsed()) {
+    return false;
+  } // Only run multiline indent logic on selections exclusively composed of code highlights and linebreaks
 
-    if (language) {
-      element.setAttribute(LANGUAGE_DATA_ATTRIBUTE, language);
-    }
 
-    return element;
-  }
+  const nodes = selection.getNodes();
 
-  updateDOM(prevNode, dom) {
-    const language = this.__language;
-    const prevLanguage = prevNode.__language;
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
 
-    if (language) {
-      if (language !== prevLanguage) {
-        dom.setAttribute(LANGUAGE_DATA_ATTRIBUTE, language);
-      }
-    } else if (prevLanguage) {
-      dom.removeAttribute(LANGUAGE_DATA_ATTRIBUTE);
+    if (!$isCodeHighlightNode(node) && !lexical.$isLineBreakNode(node)) {
+      return false;
     }
-
-    return false;
   }
 
-  static importDOM() {
-    return {
-      // Typically <pre> is used for code blocks, and <code> for inline code styles
-      // but if it's a multi line <code> we'll create a block. Pass through to
-      // inline format handled by TextNode otherwise
-      code: node => {
-        const isMultiLine = node.textContent != null && /\r?\n/.test(node.textContent);
-        return isMultiLine ? {
-          conversion: convertPreElement,
-          priority: 1
-        } : null;
-      },
-      div: node => ({
-        conversion: convertDivElement,
-        priority: 1
-      }),
-      pre: node => ({
-        conversion: convertPreElement,
-        priority: 0
-      }),
-      table: node => {
-        const table = node; // domNode is a <table> since we matched it by nodeName
-
-        if (isGitHubCodeTable(table)) {
-          return {
-            conversion: convertTableElement,
-            priority: 4
-          };
-        }
-
-        return null;
-      },
-      td: node => {
-        // element is a <td> since we matched it by nodeName
-        const td = node;
-        const table = td.closest('table');
+  const startOfLine = getFirstCodeHighlightNodeOfLine(nodes[0]);
 
-        if (isGitHubCodeCell(td)) {
-          return {
-            conversion: convertTableCellElement,
-            priority: 4
-          };
-        }
+  if (startOfLine != null) {
+    doIndent(startOfLine, type);
+  }
 
-        if (table && isGitHubCodeTable(table)) {
-          // Return a no-op if it's a table cell in a code table, but not a code line.
-          // Otherwise it'll fall back to the T
-          return {
-            conversion: convertCodeNoop,
-            priority: 4
-          };
-        }
+  for (let i = 1; i < nodes.length; i++) {
+    const node = nodes[i];
 
-        return null;
-      },
-      tr: node => {
-        // element is a <tr> since we matched it by nodeName
-        const tr = node;
-        const table = tr.closest('table');
+    if (lexical.$isLineBreakNode(nodes[i - 1]) && $isCodeHighlightNode(node)) {
+      doIndent(node, type);
+    }
+  }
 
-        if (table && isGitHubCodeTable(table)) {
-          return {
-            conversion: convertCodeNoop,
-            priority: 4
-          };
-        }
+  return true;
+}
 
-        return null;
-      }
-    };
-  }
+function doIndent(node, type) {
+  const text = node.getTextContent();
 
-  static importJSON(serializedNode) {
-    const node = $createCodeNode(serializedNode.language);
-    node.setFormat(serializedNode.format);
-    node.setIndent(serializedNode.indent);
-    node.setDirection(serializedNode.direction);
-    return node;
+  if (type === lexical.INDENT_CONTENT_COMMAND) {
+    // If the codeblock node doesn't start with whitespace, we don't want to
+    // naively prepend a '\t'; Prism will then mangle all of our nodes when
+    // it separates the whitespace from the first non-whitespace node. This
+    // will lead to selection bugs when indenting lines that previously
+    // didn't start with a whitespace character
+    if (text.length > 0 && /\s/.test(text[0])) {
+      node.setTextContent('\t' + text);
+    } else {
+      const indentNode = $createCodeHighlightNode('\t');
+      node.insertBefore(indentNode);
+    }
+  } else {
+    if (text.indexOf('\t') === 0) {
+      // Same as above - if we leave empty text nodes lying around, the resulting
+      // selection will be mangled
+      if (text.length === 1) {
+        node.remove();
+      } else {
+        node.setTextContent(text.substring(1));
+      }
+    }
   }
+}
 
-  exportJSON() {
-    return { ...super.exportJSON(),
-      language: this.getLanguage(),
-      type: 'code',
-      version: 1
-    };
-  } // Mutation
+function handleShiftLines(type, event) {
+  // We only care about the alt+arrow keys
+  const selection = lexical.$getSelection();
 
+  if (!lexical.$isRangeSelection(selection)) {
+    return false;
+  } // I'm not quite sure why, but it seems like calling anchor.getNode() collapses the selection here
+  // So first, get the anchor and the focus, then get their nodes
 
-  insertNewAfter(selection) {
-    const children = this.getChildren();
-    const childrenLength = children.length;
 
-    if (childrenLength >= 2 && children[childrenLength - 1].getTextContent() === '\n' && children[childrenLength - 2].getTextContent() === '\n' && selection.isCollapsed() && selection.anchor.key === this.__key && selection.anchor.offset === childrenLength) {
-      children[childrenLength - 1].remove();
-      children[childrenLength - 2].remove();
-      const newElement = lexical.$createParagraphNode();
-      this.insertAfter(newElement);
-      return newElement;
-    } // If the selection is within the codeblock, find all leading tabs and
-    // spaces of the current line. Create a new line that has all those
-    // tabs and spaces, such that leading indentation is preserved.
+  const {
+    anchor,
+    focus
+  } = selection;
+  const anchorOffset = anchor.offset;
+  const focusOffset = focus.offset;
+  const anchorNode = anchor.getNode();
+  const focusNode = focus.getNode();
+  const arrowIsUp = type === lexical.KEY_ARROW_UP_COMMAND; // Ensure the selection is within the codeblock
 
+  if (!$isCodeHighlightNode(anchorNode) || !$isCodeHighlightNode(focusNode)) {
+    return false;
+  }
 
-    const anchor = selection.anchor.getNode();
-    const firstNode = code.getFirstCodeHighlightNodeOfLine(anchor);
+  if (!event.altKey) {
+    // Handle moving selection out of the code block, given there are no
+    // sibling thats can natively take the selection.
+    if (selection.isCollapsed()) {
+      const codeNode = anchorNode.getParentOrThrow();
 
-    if (firstNode != null) {
-      let leadingWhitespace = 0;
-      const firstNodeText = firstNode.getTextContent();
+      if (arrowIsUp && anchorOffset === 0 && anchorNode.getPreviousSibling() === null) {
+        const codeNodeSibling = codeNode.getPreviousSibling();
 
-      while (leadingWhitespace < firstNodeText.length && /[\t ]/.test(firstNodeText[leadingWhitespace])) {
-        leadingWhitespace += 1;
-      }
+        if (codeNodeSibling === null) {
+          codeNode.selectPrevious();
+          event.preventDefault();
+          return true;
+        }
+      } else if (!arrowIsUp && anchorOffset === anchorNode.getTextContentSize() && anchorNode.getNextSibling() === null) {
+        const codeNodeSibling = codeNode.getNextSibling();
 
-      if (leadingWhitespace > 0) {
-        const whitespace = firstNodeText.substring(0, leadingWhitespace);
-        const indentedChild = code.$createCodeHighlightNode(whitespace);
-        anchor.insertAfter(indentedChild);
-        selection.insertNodes([lexical.$createLineBreakNode()]);
-        indentedChild.select();
-        return indentedChild;
+        if (codeNodeSibling === null) {
+          codeNode.selectNext();
+          event.preventDefault();
+          return true;
+        }
       }
     }
 
-    return null;
+    return false;
   }
 
-  canInsertTab() {
-    const selection = lexical.$getSelection();
+  const start = getFirstCodeHighlightNodeOfLine(anchorNode);
+  const end = getLastCodeHighlightNodeOfLine(focusNode);
 
-    if (!lexical.$isRangeSelection(selection) || !selection.isCollapsed()) {
+  if (start == null || end == null) {
+    return false;
+  }
+
+  const range = start.getNodesBetween(end);
+
+  for (let i = 0; i < range.length; i++) {
+    const node = range[i];
+
+    if (!$isCodeHighlightNode(node) && !lexical.$isLineBreakNode(node)) {
       return false;
     }
+  } // After this point, we know the selection is within the codeblock. We may not be able to
+  // actually move the lines around, but we want to return true either way to prevent
+  // the event's default behavior
+
+
+  event.preventDefault();
+  event.stopPropagation(); // required to stop cursor movement under Firefox
 
+  const linebreak = arrowIsUp ? start.getPreviousSibling() : end.getNextSibling();
+
+  if (!lexical.$isLineBreakNode(linebreak)) {
     return true;
   }
 
-  canIndent() {
-    return false;
-  }
+  const sibling = arrowIsUp ? linebreak.getPreviousSibling() : linebreak.getNextSibling();
 
-  collapseAtStart() {
-    const paragraph = lexical.$createParagraphNode();
-    const children = this.getChildren();
-    children.forEach(child => paragraph.append(child));
-    this.replace(paragraph);
+  if (sibling == null) {
     return true;
   }
 
-  setLanguage(language) {
-    const writable = this.getWritable();
-    writable.__language = mapToPrismLanguage(language);
-  }
+  const maybeInsertionPoint = arrowIsUp ? getFirstCodeHighlightNodeOfLine(sibling) : getLastCodeHighlightNodeOfLine(sibling);
+  let insertionPoint = maybeInsertionPoint != null ? maybeInsertionPoint : sibling;
+  linebreak.remove();
+  range.forEach(node => node.remove());
 
-  getLanguage() {
-    return this.getLatest().__language;
+  if (type === lexical.KEY_ARROW_UP_COMMAND) {
+    range.forEach(node => insertionPoint.insertBefore(node));
+    insertionPoint.insertBefore(linebreak);
+  } else {
+    insertionPoint.insertAfter(linebreak);
+    insertionPoint = linebreak;
+    range.forEach(node => {
+      insertionPoint.insertAfter(node);
+      insertionPoint = node;
+    });
   }
 
-}
-function $createCodeNode(language) {
-  return new CodeNode(language);
-}
-function $isCodeNode(node) {
-  return node instanceof CodeNode;
+  selection.setTextNodeRange(anchorNode, anchorOffset, focusNode, focusOffset);
+  return true;
 }
 
-function convertPreElement(domNode) {
-  return {
-    node: $createCodeNode()
-  };
-}
+function handleMoveTo(type, event) {
+  const selection = lexical.$getSelection();
 
-function convertDivElement(domNode) {
-  // domNode is a <div> since we matched it by nodeName
-  const div = domNode;
-  return {
-    after: childLexicalNodes => {
-      const domParent = domNode.parentNode;
+  if (!lexical.$isRangeSelection(selection)) {
+    return false;
+  }
 
-      if (domParent != null && domNode !== domParent.lastChild) {
-        childLexicalNodes.push(lexical.$createLineBreakNode());
-      }
+  const {
+    anchor,
+    focus
+  } = selection;
+  const anchorNode = anchor.getNode();
+  const focusNode = focus.getNode();
+  const isMoveToStart = type === lexical.MOVE_TO_START;
 
-      return childLexicalNodes;
-    },
-    node: isCodeElement(div) ? $createCodeNode() : null
-  };
-}
+  if (!$isCodeHighlightNode(anchorNode) || !$isCodeHighlightNode(focusNode)) {
+    return false;
+  }
 
-function convertTableElement() {
-  return {
-    node: $createCodeNode()
-  };
-}
+  let node;
+  let offset;
 
-function convertCodeNoop() {
-  return {
-    node: null
-  };
-}
+  if (isMoveToStart) {
+    ({
+      node,
+      offset
+    } = getStartOfCodeInLine(focusNode));
+  } else {
+    ({
+      node,
+      offset
+    } = getEndOfCodeInLine(focusNode));
+  }
 
-function convertTableCellElement(domNode) {
-  // domNode is a <td> since we matched it by nodeName
-  const cell = domNode;
-  return {
-    after: childLexicalNodes => {
-      if (cell.parentNode && cell.parentNode.nextSibling) {
-        // Append newline between code lines
-        childLexicalNodes.push(lexical.$createLineBreakNode());
-      }
+  if (node !== null && offset !== -1) {
+    selection.setTextNodeRange(node, offset, node, offset);
+  }
 
-      return childLexicalNodes;
-    },
-    node: null
-  };
+  event.preventDefault();
+  event.stopPropagation();
+  return true;
 }
 
-function isCodeElement(div) {
-  return div.style.fontFamily.match('monospace') !== null;
-}
+function registerCodeHighlighting(editor) {
+  if (!editor.hasNodes([CodeNode, CodeHighlightNode])) {
+    throw new Error('CodeHighlightPlugin: CodeNode or CodeHighlightNode not registered on editor');
+  }
 
-function isGitHubCodeCell(cell) {
-  return cell.classList.contains('js-file-line');
-}
+  return utils.mergeRegister(editor.registerMutationListener(CodeNode, mutations => {
+    editor.update(() => {
+      for (const [key, type] of mutations) {
+        if (type !== 'destroyed') {
+          const node = lexical.$getNodeByKey(key);
 
-function isGitHubCodeTable(table) {
-  return table.classList.contains('js-file-line-container');
+          if (node !== null) {
+            updateCodeGutter(node, editor);
+          }
+        }
+      }
+    });
+  }), editor.registerNodeTransform(CodeNode, node => codeNodeTransform(node, editor)), editor.registerNodeTransform(lexical.TextNode, node => textNodeTransform(node, editor)), editor.registerNodeTransform(CodeHighlightNode, node => textNodeTransform(node, editor)), editor.registerCommand(lexical.INDENT_CONTENT_COMMAND, payload => handleMultilineIndent(lexical.INDENT_CONTENT_COMMAND), lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.OUTDENT_CONTENT_COMMAND, payload => handleMultilineIndent(lexical.OUTDENT_CONTENT_COMMAND), lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.KEY_ARROW_UP_COMMAND, payload => handleShiftLines(lexical.KEY_ARROW_UP_COMMAND, payload), lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.KEY_ARROW_DOWN_COMMAND, payload => handleShiftLines(lexical.KEY_ARROW_DOWN_COMMAND, payload), lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.MOVE_TO_END, payload => handleMoveTo(lexical.MOVE_TO_END, payload), lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.MOVE_TO_START, payload => handleMoveTo(lexical.MOVE_TO_START, payload), lexical.COMMAND_PRIORITY_LOW));
 }
 
 exports.$createCodeHighlightNode = $createCodeHighlightNode;