Skip to content

Commit

Permalink
fix(richtext-lexical): use copy of @lexical/markdown that does not in…
Browse files Browse the repository at this point in the history
…stall @lexical/code (#9382)

Fixes #9378

We’ve found out that @lexical/markdown imports cannot be reliably
dynamically imported by Node.js for an unknown reason. Frequently,
Node.js simply exits before the dynamic import is done.

We’re suspecting the reason for this to be its dependency on
@lexical/code that installs prism.

This will not only (hopefully) fix the import issue, but also reduce the
bundle size & compilation speed of richtext-lexical.
  • Loading branch information
AlessioGr authored Nov 20, 2024
1 parent 07a9125 commit 5db7e1e
Show file tree
Hide file tree
Showing 32 changed files with 2,222 additions and 43 deletions.
2 changes: 0 additions & 2 deletions packages/richtext-lexical/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -340,7 +340,6 @@
"@lexical/link": "0.20.0",
"@lexical/list": "0.20.0",
"@lexical/mark": "0.20.0",
"@lexical/markdown": "0.20.0",
"@lexical/react": "0.20.0",
"@lexical/rich-text": "0.20.0",
"@lexical/selection": "0.20.0",
Expand Down Expand Up @@ -388,7 +387,6 @@
"@lexical/link": "0.20.0",
"@lexical/list": "0.20.0",
"@lexical/mark": "0.20.0",
"@lexical/markdown": "0.20.0",
"@lexical/react": "0.20.0",
"@lexical/rich-text": "0.20.0",
"@lexical/selection": "0.20.0",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import type { ElementTransformer } from '@lexical/markdown'

import { $createQuoteNode, $isQuoteNode, QuoteNode } from '@lexical/rich-text'
import { $createLineBreakNode } from 'lexical'

import type { ElementTransformer } from '../../packages/@lexical/markdown/index.js'

export const MarkdownTransformer: ElementTransformer = {
type: 'element',
dependencies: [QuoteNode],
Expand Down
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
import type { MultilineElementTransformer, Transformer } from '@lexical/markdown'
import type { Klass, LexicalNode, LexicalNodeReplacement, SerializedEditorState } from 'lexical'
import type { ClientBlock } from 'payload'

import { createHeadlessEditor } from '@lexical/headless'
import { $convertFromMarkdownString, $convertToMarkdownString } from '@lexical/markdown'

import type { Transformer } from '../../../packages/@lexical/markdown/index.js'
import type { MultilineElementTransformer } from '../../../packages/@lexical/markdown/MarkdownTransformers.js'

import { $convertToMarkdownString } from '../../../packages/@lexical/markdown/index.js'
import { extractPropsFromJSXPropsString } from '../../../utilities/jsx/extractPropsFromJSXPropsString.js'
import { propsToJSXString } from '../../../utilities/jsx/jsx.js'
import { $convertFromMarkdownString } from '../../../utilities/jsx/lexicalMarkdownCopy.js'
import { $createBlockNode, $isBlockNode, BlockNode } from './nodes/BlocksNode.js'

function createTagRegexes(tagName: string) {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
import type {
MultilineElementTransformer,
TextMatchTransformer,
Transformer,
} from '@lexical/markdown'
import type { ElementNode, SerializedEditorState, SerializedLexicalNode } from 'lexical'
import type { Block } from 'payload'

import { createHeadlessEditor } from '@lexical/headless'
import { $convertToMarkdownString } from '@lexical/markdown'
import { $parseSerializedNode } from 'lexical'

import type { NodeWithHooks } from '../../typesServer.js'

import { getEnabledNodesFromServerNodes } from '../../../lexical/nodes/index.js'
import {
$convertToMarkdownString,
type MultilineElementTransformer,
type TextMatchTransformer,
type Transformer,
} from '../../../packages/@lexical/markdown/index.js'
import { extractPropsFromJSXPropsString } from '../../../utilities/jsx/extractPropsFromJSXPropsString.js'
import { propsToJSXString } from '../../../utilities/jsx/jsx.js'
import { $convertFromMarkdownString } from '../../../utilities/jsx/lexicalMarkdownCopy.js'
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import type { ElementTransformer, Transformer } from '@lexical/markdown'
import type { LexicalNode } from 'lexical'

import { $convertFromMarkdownString, $convertToMarkdownString } from '@lexical/markdown'
import {
$createTableCellNode,
$createTableNode,
Expand All @@ -16,6 +14,13 @@ import {
} from '@lexical/table'
import { $isParagraphNode, $isTextNode } from 'lexical'

import {
$convertToMarkdownString,
type ElementTransformer,
type Transformer,
} from '../../packages/@lexical/markdown/index.js'
import { $convertFromMarkdownString } from '../../utilities/jsx/lexicalMarkdownCopy.js'

// Very primitive table setup
const TABLE_ROW_REG_EXP = /^\|(.+)\|\s?$/
// eslint-disable-next-line regexp/no-unused-capturing-group
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { TextFormatTransformer } from '@lexical/markdown'
import type { TextFormatTransformer } from '../../../packages/@lexical/markdown/MarkdownTransformers.js'

export const BOLD_ITALIC_STAR: TextFormatTransformer = {
type: 'text-format',
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { TextFormatTransformer } from '@lexical/markdown'
import type { TextFormatTransformer } from '../../../packages/@lexical/markdown/MarkdownTransformers.js'

export const INLINE_CODE: TextFormatTransformer = {
type: 'text-format',
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { TextFormatTransformer } from '@lexical/markdown'
import type { TextFormatTransformer } from '../../../packages/@lexical/markdown/MarkdownTransformers.js'

export const ITALIC_STAR: TextFormatTransformer = {
type: 'text-format',
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { TextFormatTransformer } from '@lexical/markdown'
import type { TextFormatTransformer } from '../../../packages/@lexical/markdown/MarkdownTransformers.js'

export const STRIKETHROUGH: TextFormatTransformer = {
type: 'text-format',
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import type { ElementTransformer } from '@lexical/markdown'
import type { HeadingTagType } from '@lexical/rich-text'

import { $createHeadingNode, $isHeadingNode, HeadingNode } from '@lexical/rich-text'

import type { ElementTransformer } from '../../packages/@lexical/markdown/MarkdownTransformers.js'

import { createBlockNode } from '../../lexical/utils/markdown/createBlockNode.js'

export const MarkdownTransformer: (enabledHeadingSizes: HeadingTagType[]) => ElementTransformer = (
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { ElementTransformer } from '@lexical/markdown'
import type { ElementTransformer } from '../../../packages/@lexical/markdown/MarkdownTransformers.js'

import {
$createHorizontalRuleNode,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { ElementTransformer } from '@lexical/markdown'
import type { ElementTransformer } from '../../../packages/@lexical/markdown/MarkdownTransformers.js'

import {
$createHorizontalRuleServerNode,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@
//
// - code should go first as it prevents any transformations inside

import type { TextMatchTransformer } from '@lexical/markdown'

import { $createTextNode, $isTextNode } from 'lexical'

import type { TextMatchTransformer } from '../../packages/@lexical/markdown/MarkdownTransformers.js'

import { $createLinkNode, $isLinkNode, LinkNode } from './nodes/LinkNode.js'

// - then longer tags match (e.g. ** or __ should go before * or _)
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type { ElementTransformer } from '@lexical/markdown'

import { $isListNode, ListItemNode, ListNode } from '@lexical/list'

import type { ElementTransformer } from '../../../packages/@lexical/markdown/MarkdownTransformers.js'

import { listExport, listReplace } from '../shared/markdown.js'

export const CHECK_LIST: ElementTransformer = {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type { ElementTransformer } from '@lexical/markdown'

import { $isListNode, ListItemNode, ListNode } from '@lexical/list'

import type { ElementTransformer } from '../../../packages/@lexical/markdown/MarkdownTransformers.js'

import { listExport, listReplace } from '../shared/markdown.js'

export const ORDERED_LIST: ElementTransformer = {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
// Copied from https://github.com/facebook/lexical/blob/176b8cf16ecb332ee5efe2c75219e223b7b019f2/packages/lexical-markdown/src/MarkdownTransformers.ts#L97C1-L172C1

import type { ListNode, ListType } from '@lexical/list'
import type { ElementTransformer } from '@lexical/markdown'
import type { ElementNode } from 'lexical'

import { $createListItemNode, $createListNode, $isListItemNode, $isListNode } from '@lexical/list'

import type { ElementTransformer } from '../../../packages/@lexical/markdown/MarkdownTransformers.js'

// Amount of spaces that define indentation level
const LIST_INDENT_SIZE = 4

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type { ElementTransformer } from '@lexical/markdown'

import { $isListNode, ListItemNode, ListNode } from '@lexical/list'

import type { ElementTransformer } from '../../../packages/@lexical/markdown/MarkdownTransformers.js'

import { listExport, listReplace } from '../shared/markdown.js'

export const UNORDERED_LIST: ElementTransformer = {
Expand Down
2 changes: 1 addition & 1 deletion packages/richtext-lexical/src/features/typesClient.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import type { Transformer } from '@lexical/markdown'
import type { Klass, LexicalEditor, LexicalNode, LexicalNodeReplacement } from 'lexical'
import type { RichTextFieldClient } from 'payload'
import type React from 'react'

import type { ClientEditorConfig } from '../lexical/config/types.js'
import type { SlashMenuGroup } from '../lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/types.js'
import type { Transformer } from '../packages/@lexical/markdown/index.js'
import type { FeatureClientSchemaMap } from '../types.js'
import type { ToolbarGroup } from './toolbars/types.js'

Expand Down
2 changes: 1 addition & 1 deletion packages/richtext-lexical/src/features/typesServer.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import type { Transformer } from '@lexical/markdown'
import type { GenericLanguages, I18nClient } from '@payloadcms/translations'
import type { JSONSchema4 } from 'json-schema'
import type {
Expand Down Expand Up @@ -27,6 +26,7 @@ import type {
} from 'payload'

import type { ServerEditorConfig } from '../lexical/config/types.js'
import type { Transformer } from '../packages/@lexical/markdown/index.js'
import type { AdapterProps } from '../types.js'
import type { HTMLConverter } from './converters/html/converter/types.js'
import type { BaseClientFeatureProps } from './typesClient.js'
Expand Down
1 change: 0 additions & 1 deletion packages/richtext-lexical/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,6 @@ export function lexicalEditor(props?: LexicalEditorProps): LexicalRichTextAdapte
'@lexical/link',
'@lexical/list',
'@lexical/mark',
'@lexical/markdown',
'@lexical/react',
'@lexical/rich-text',
'@lexical/selection',
Expand Down
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export * from '@lexical/markdown'
export * from '../packages/@lexical/markdown/index.js'
Original file line number Diff line number Diff line change
@@ -1,12 +1,18 @@
'use client'

import { MarkdownShortcutPlugin as LexicalMarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPlugin.js'
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
import * as React from 'react'

import { registerMarkdownShortcuts } from '../../../packages/@lexical/markdown/MarkdownShortcuts.js'
import { useEditorConfigContext } from '../../config/client/EditorConfigProvider.js'

export const MarkdownShortcutPlugin: React.FC = () => {
const { editorConfig } = useEditorConfigContext()
const [editor] = useLexicalComposerContext()

return <LexicalMarkdownShortcutPlugin transformers={editorConfig.features.markdownTransformers} />
React.useEffect(() => {
return registerMarkdownShortcuts(editor, editorConfig.features.markdownTransformers ?? [])
}, [editor, editorConfig.features.markdownTransformers])

return null
}
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import type { ElementTransformer } from '@lexical/markdown'
import type { ElementNode } from 'lexical'

import type { ElementTransformer } from '../../../packages/@lexical/markdown/MarkdownTransformers.js'

export const createBlockNode = (
createNode: (match: Array<string>) => ElementNode,
): ElementTransformer['replace'] => {
Expand Down
21 changes: 21 additions & 0 deletions packages/richtext-lexical/src/packages/@lexical/markdown/LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
MIT License

Copyright (c) Meta Platforms, Inc. and affiliates.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
Loading

0 comments on commit 5db7e1e

Please sign in to comment.