Move code logic into @lexical/code (facebook#1554)

* Move code logic into @lexical/code

* Fix tests

.flowconfig

@@ -20,10 +20,8 @@ module.name_mapper='^lexical$' -> '<PROJECT_ROOT>/packages/lexical/flow/Lexical.
 
 module.name_mapper='^lexical/HeadingNode' -> '<PROJECT_ROOT>/packages/lexical/flow/LexicalHeadingNode.js.flow'
 module.name_mapper='^lexical/QuoteNode' -> '<PROJECT_ROOT>/packages/lexical/flow/LexicalQuoteNode.js.flow'
-module.name_mapper='^lexical/CodeNode' -> '<PROJECT_ROOT>/packages/lexical/flow/LexicalCodeNode.js.flow'
 module.name_mapper='^lexical/LinkNode' -> '<PROJECT_ROOT>/packages/lexical/flow/LexicalLinkNode.js.flow'
 module.name_mapper='^lexical/AutoLinkNode' -> '<PROJECT_ROOT>/packages/lexical/flow/LexicalAutoLinkNode.js.flow'
-module.name_mapper='^lexical/CodeHighlightNode' -> '<PROJECT_ROOT>/packages/lexical/flow/LexicalCodeHighlightNode.js.flow'
 module.name_mapper='^lexical/OverflowNode' -> '<PROJECT_ROOT>/packages/lexical/flow/LexicalOverflowNode.js.flow'
 module.name_mapper='^lexical/ExtendedNodes' -> '<PROJECT_ROOT>/packages/lexical/flow/LexicalExtendedNodes.js.flow'
 
@@ -35,6 +33,7 @@ module.name_mapper='^@lexical/selection' -> '<PROJECT_ROOT>/packages/lexical-sel
 module.name_mapper='^@lexical/text' -> '<PROJECT_ROOT>/packages/lexical-text/src/index.js'
 module.name_mapper='^@lexical/offset' -> '<PROJECT_ROOT>/packages/lexical-offset/src/index.js'
 module.name_mapper='^@lexical/utils' -> '<PROJECT_ROOT>/packages/lexical-utils/src/index.js'
+module.name_mapper='^@lexical/code' -> '<PROJECT_ROOT>/packages/lexical-code/src/index.js'
 
 module.name_mapper='^@lexical/react/DEPRECATED_useLexicalEditor' -> '<PROJECT_ROOT>/packages/lexical-react/src/DEPRECATED_useLexicalEditor.js'
 module.name_mapper='^@lexical/react/DEPRECATED_useLexicalRichText' -> '<PROJECT_ROOT>/packages/lexical-react/src/DEPRECATED_useLexicalRichText.js'

jest.config.js

@@ -23,6 +23,7 @@ module.exports = {
         '^./dist/(.+)': './src/$1',
         '^@lexical/clipboard$':
           '<rootDir>/packages/lexical-clipboard/src/index.js',
+        '^@lexical/code$': '<rootDir>/packages/lexical-code/src/index.js',
         '^@lexical/file$': '<rootDir>/packages/lexical-file/src/index.js',
         '^@lexical/hashtag$': '<rootDir>/packages/lexical-hashtag/src/index.js',
         '^@lexical/list$': '<rootDir>/packages/lexical-list/src/index.js',
@@ -66,8 +67,6 @@ module.exports = {
           '<rootDir>/packages/lexical/src/nodes/extended/LexicalAutoLinkNode.js',
         '^lexical/CodeHighlightNode$':
           '<rootDir>/packages/lexical/src/nodes/extended/LexicalCodeHighlightNode.js',
-        '^lexical/CodeNode$':
-          '<rootDir>/packages/lexical/src/nodes/extended/LexicalCodeNode.js',
         '^lexical/ExtendedNodes$':
           '<rootDir>/packages/lexical/src/nodes/extended/LexicalExtendedNodes.js',
         '^lexical/HeadingNode$':

packages/lexical-code/LexicalCode.js

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ *
+ */
+
+'use strict';
+
+module.exports = require('./dist/LexicalCode.js');

packages/lexical-code/README.md

@@ -0,0 +1,3 @@
+# `@lexical/code`
+
+This package contains the functionality for the code blocks and code highlighting for Lexical.

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

@@ -13,8 +13,8 @@ import type {
   NodeKey,
   ParagraphNode,
   RangeSelection,
+  EditorThemeClasses,
 } from 'lexical';
-import type {CodeHighlightNode} from 'lexical/CodeHighlightNode';
 
 import {ElementNode} from 'lexical';
 
@@ -44,3 +44,31 @@ declare export function getFirstCodeHighlightNodeOfLine(
 declare export function getLastCodeHighlightNodeOfLine(
   anchor: LexicalNode,
 ): ?CodeHighlightNode;
+
+import {TextNode} from 'lexical';
+
+declare export class CodeHighlightNode extends TextNode {
+  __highlightType: ?string;
+  constructor(text: string, highlightType?: string, key?: NodeKey): void;
+  static getType(): string;
+  static clone(node: CodeHighlightNode): CodeHighlightNode;
+  createDOM<EditorContext>(config: EditorConfig<EditorContext>): HTMLElement;
+  updateDOM<EditorContext>(
+    // $FlowFixMe
+    prevNode: CodeHighlightNode,
+    dom: HTMLElement,
+    config: EditorConfig<EditorContext>,
+  ): boolean;
+  setFormat(format: number): this;
+}
+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);

packages/lexical-code/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@lexical/code",
+  "author": {
+    "name": "Dominic Gannaway",
+    "email": "dg@domgan.com"
+  },
+  "description": "This package contains the functionality for the code blocks and code highlighting for Lexical.",
+  "keywords": [
+    "lexical",
+    "editor",
+    "rich-text",
+    "code"
+  ],
+  "license": "MIT",
+  "version": "0.1.16",
+  "main": "LexicalCode.js",
+  "peerDependencies": {
+    "lexical": "0.1.16"
+  },
+  "dependencies": {
+    "@lexical/utils": "0.1.16",
+    "prismjs": "^1.25.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/facebook/lexical",
+    "directory": "packages/lexical-cod"
+  }
+}