Tab support

jest.config.js

@@ -67,6 +67,8 @@ module.exports = {
           '<rootDir>/packages/lexical-react/src/LexicalListPlugin.ts',
         '^@lexical/react/LexicalPlainTextPlugin$':
           '<rootDir>/packages/lexical-react/src/LexicalPlainTextPlugin.ts',
+        '^@lexical/react/LexicalTabIndentationPlugin$':
+          '<rootDir>/packages/lexical-react/src/LexicalTabIndentationPlugin.tsx',
         '^@lexical/react/LexicalTablePlugin$':
           '<rootDir>/packages/lexical-react/src/LexicalTablePlugin.ts',
         '^@lexical/react/useLexicalCanShowPlaceholder$':

packages/lexical-clipboard/src/clipboard.ts

@@ -15,6 +15,7 @@ import {
 import {$findMatchingParent} from '@lexical/utils';
 import {
   $createParagraphNode,
+  $createTabNode,
   $getRoot,
   $getSelection,
   $isDecoratorNode,
@@ -130,13 +131,16 @@ export function $insertDataTransferForRichText(
   const text = dataTransfer.getData('text/plain');
   if (text != null) {
     if ($isRangeSelection(selection)) {
-      const lines = text.split(/\r?\n/);
-      const linesLength = lines.length;
-
-      for (let i = 0; i < linesLength; i++) {
-        selection.insertText(lines[i]);
-        if (i < linesLength - 1) {
+      const parts = text.split(/(\r?\n|\t)/);
+      const partsLength = parts.length;
+      for (let i = 0; i < partsLength; i++) {
+        const part = parts[i];
+        if (part === '\n' || part === '\r\n') {
           selection.insertParagraph();
+        } else if (part === '\t') {
+          selection.insertNodes([$createTabNode()]);
+        } else {
+          selection.insertText(part);
         }
       }
     } else {

packages/lexical-code/flow/LexicalCode.js.flow

@@ -15,11 +15,110 @@ import type {
   RangeSelection,
   EditorThemeClasses,
   LexicalEditor,
+  LineBreakNode,
+  SerializedElementNode,
+  SerializedTabNode,
 } from 'lexical';
 
-import {ElementNode, TextNode} from 'lexical';
+import {ElementNode, TextNode, TabNode} from 'lexical';
+
+/**
+ *  CodeHighlighter
+ */
+declare export function getEndOfCodeInLine(
+  anchor: CodeHighlightNode | CodeTabNode,
+): CodeHighlightNode | CodeTabNode;
+
+declare export function getStartOfCodeInLine(
+  anchor: CodeHighlightNode | CodeTabNode,
+  offset: number,
+): null | {
+  node: CodeHighlightNode | CodeTabNode | LineBreakNode,
+  offset: number,
+};
+
+type TokenContent = string | Token | (string | Token)[];
+export interface Token {
+  type: string;
+  content: TokenContent;
+}
+export interface Tokenizer {
+  defaultLanguage: string;
+  tokenize(code: string, language?: string): (string | Token)[];
+}
+declare export var PrismTokenizer: Tokenizer;
+
+declare export function registerCodeHighlighting(
+  editor: LexicalEditor,
+  tokenizer?: Tokenizer,
+): () => void;
+
+/**
+ * CodeHighlightNode
+ */
+
+declare export function $createCodeHighlightNode(
+  text: string,
+  highlightType?: string,
+): CodeHighlightNode;
+
+declare export function $isCodeHighlightNode(
+  node: ?LexicalNode,
+): boolean %checks(node instanceof CodeHighlightNode);
+
+declare export var CODE_LANGUAGE_FRIENDLY_NAME_MAP: {[string]: string};
+declare export var CODE_LANGUAGE_MAP: {[string]: string};
+
+declare export class CodeHighlightNode extends TextNode {
+  __highlightType: ?string;
+  constructor(text: string, highlightType?: string, key?: NodeKey): void;
+  static getType(): string;
+  // $FlowFixMe
+  static clone(node: CodeHighlightNode): CodeHighlightNode;
+  createDOM(config: EditorConfig): HTMLElement;
+  updateDOM(
+    // $FlowFixMe
+    prevNode: CodeHighlightNode,
+    dom: HTMLElement,
+    config: EditorConfig,
+  ): boolean;
+  setFormat(format: number): this;
+}
+
+declare export var DEFAULT_CODE_LANGUAGE: string;
+
+declare export var getCodeLanguages: () => Array<string>;
+declare export var getDefaultCodeLanguage: () => string;
+
+declare export function getFirstCodeNodeOfLine(
+  anchor: CodeHighlightNode | CodeTabNode | LineBreakNode,
+): null | CodeHighlightNode | CodeTabNode | LineBreakNode;
+
+declare export function getLanguageFriendlyName(lang: string): string;
+
+declare export function getLastCodeNodeOfLine(
+  anchor: CodeHighlightNode | CodeTabNode | LineBreakNode,
+): CodeHighlightNode | CodeTabNode | LineBreakNode;
+
+declare export function normalizeCodeLang(lang: string): string;
+
+/**
+ * CodeNode
+ */
+
+export type SerializedCodeNode = {
+  ...SerializedElementNode,
+  language: string | null | void,
+};
+
+declare export function $createCodeNode(language: ?string): CodeNode;
+
+declare export function $isCodeNode(
+  node: ?LexicalNode,
+): boolean %checks(node instanceof CodeNode);
 
 declare export class CodeNode extends ElementNode {
+  __language: string | null | void;
   static getType(): string;
   static clone(node: CodeNode): CodeNode;
   constructor(language: ?string, key?: NodeKey): void;
@@ -28,67 +127,34 @@ declare export class CodeNode extends ElementNode {
   insertNewAfter(
     selection: RangeSelection,
     restoreSelection?: boolean,
-  ): null | ParagraphNode | CodeHighlightNode;
-  canInsertTab(): boolean;
+  ): null | ParagraphNode | CodeHighlightNode | CodeTabNode;
   collapseAtStart(): true;
   setLanguage(language: string): void;
   getLanguage(): string | void;
 }
-declare export function $createCodeNode(language: ?string): CodeNode;
-declare export function $isCodeNode(
-  node: ?LexicalNode,
-): boolean %checks(node instanceof CodeNode);
 
-declare export function getFirstCodeHighlightNodeOfLine(
-  anchor: LexicalNode,
-): ?CodeHighlightNode;
+/**
+ * CodeTabNode
+ */
+
+export type SerializedCodeTabNode = SerializedTabNode;
 
-declare export function getLastCodeHighlightNodeOfLine(
-  anchor: LexicalNode,
-): ?CodeHighlightNode;
+declare export function $createCodeTabNode(): CodeTabNode;
 
-declare export function getDefaultCodeLanguage(): string;
-declare export function getCodeLanguages(): Array<string>;
+declare export function $isCodeTabNode(
+  node: LexicalNode | null | void,
+): boolean %checks(node instanceof CodeTabNode);
 
-declare export class CodeHighlightNode extends TextNode {
-  __highlightType: ?string;
-  constructor(text: string, highlightType?: string, key?: NodeKey): void;
+declare export class CodeTabNode extends TabNode {
   static getType(): string;
   // $FlowFixMe
-  static clone(node: CodeHighlightNode): CodeHighlightNode;
+  static clone(node: CodeTabNode): CodeTabNode;
+  static importJSON(_serializedTabNode: SerializedCodeTabNode): CodeTabNode;
+  exportJSON(): SerializedTabNode;
   createDOM(config: EditorConfig): HTMLElement;
   updateDOM(
-    // $FlowFixMe
-    prevNode: CodeHighlightNode,
+    prevNode: TextNode,
     dom: HTMLElement,
     config: EditorConfig,
   ): boolean;
-  setFormat(format: number): this;
 }
-
-type TokenContent = string | Token | (string | Token)[];
-export interface Token {
-  type: string;
-  content: TokenContent;
-}
-export interface Tokenizer {
-  defaultLanguage: string;
-  tokenize(code: string, language?: string): (string | Token)[];
-}
-
-declare function getHighlightThemeClass(
-  theme: EditorThemeClasses,
-  highlightType: ?string,
-): ?string;
-declare export function $createCodeHighlightNode(
-  text: string,
-  highlightType?: string,
-): CodeHighlightNode;
-declare export function $isCodeHighlightNode(
-  node: ?LexicalNode,
-): boolean %checks(node instanceof CodeHighlightNode);
-
-declare export function registerCodeHighlighting(
-  editor: LexicalEditor,
-  tokenizer?: Tokenizer,
-): () => void;

packages/lexical-code/src/CodeHighlightNode.ts

@@ -10,6 +10,7 @@ import type {
   EditorConfig,
   EditorThemeClasses,
   LexicalNode,
+  LineBreakNode,
   NodeKey,
   SerializedTextNode,
   Spread,
@@ -34,15 +35,11 @@ import {
   addClassNamesToElement,
   removeClassNamesFromElement,
 } from '@lexical/utils';
-import {
-  $applyNodeReplacement,
-  $isLineBreakNode,
-  ElementNode,
-  TextNode,
-} from 'lexical';
+import {$applyNodeReplacement, ElementNode, TextNode} from 'lexical';
 import * as Prism from 'prismjs';
 
 import {$createCodeNode} from './CodeNode';
+import {$isCodeTabNode, CodeTabNode} from './CodeTabNode';
 
 export const DEFAULT_CODE_LANGUAGE = 'javascript';
 
@@ -231,40 +228,26 @@ export function $isCodeHighlightNode(
   return node instanceof CodeHighlightNode;
 }
 
-export function getFirstCodeHighlightNodeOfLine(
-  anchor: LexicalNode,
-): CodeHighlightNode | null | undefined {
-  let currentNode = null;
-  const previousSiblings = anchor.getPreviousSiblings();
-  previousSiblings.push(anchor);
-  while (previousSiblings.length > 0) {
-    const node = previousSiblings.pop();
-    if ($isCodeHighlightNode(node)) {
-      currentNode = node;
-    }
-    if ($isLineBreakNode(node)) {
-      break;
-    }
+export function getFirstCodeNodeOfLine(
+  anchor: CodeHighlightNode | CodeTabNode | LineBreakNode,
+): null | CodeHighlightNode | CodeTabNode | LineBreakNode {
+  let previousNode = anchor;
+  let node: null | LexicalNode = anchor;
+  while ($isCodeHighlightNode(node) || $isCodeTabNode(node)) {
+    previousNode = node;
+    node = node.getPreviousSibling();
   }
-
-  return currentNode;
+  return previousNode;
 }
 
-export function getLastCodeHighlightNodeOfLine(
-  anchor: LexicalNode,
-): CodeHighlightNode | null | undefined {
-  let currentNode = null;
-  const nextSiblings = anchor.getNextSiblings();
-  nextSiblings.unshift(anchor);
-  while (nextSiblings.length > 0) {
-    const node = nextSiblings.shift();
-    if ($isCodeHighlightNode(node)) {
-      currentNode = node;
-    }
-    if ($isLineBreakNode(node)) {
-      break;
-    }
+export function getLastCodeNodeOfLine(
+  anchor: CodeHighlightNode | CodeTabNode | LineBreakNode,
+): CodeHighlightNode | CodeTabNode | LineBreakNode {
+  let nextNode = anchor;
+  let node: null | LexicalNode = anchor;
+  while ($isCodeHighlightNode(node) || $isCodeTabNode(node)) {
+    nextNode = node;
+    node = node.getNextSibling();
   }
-
-  return currentNode;
+  return nextNode;
 }