diff --git a/package.json b/package.json index 8650110cf5..c2a002477b 100644 --- a/package.json +++ b/package.json @@ -77,7 +77,7 @@ "jest": "29.7.0", "jest-environment-jsdom": "29.7.0", "jwt-decode": "3.1.2", - "lexical": "0.12.5", + "lexical": "0.13.1", "lint-staged": "^14.0.1", "minimist": "1.2.8", "mongodb-memory-server": "^9", diff --git a/packages/richtext-lexical/package.json b/packages/richtext-lexical/package.json index 1d16c8e6d4..908c885675 100644 --- a/packages/richtext-lexical/package.json +++ b/packages/richtext-lexical/package.json @@ -19,31 +19,31 @@ }, "dependencies": { "@faceless-ui/modal": "2.0.1", - "@lexical/headless": "0.12.6", - "@lexical/link": "0.12.6", - "@lexical/list": "0.12.6", - "@lexical/mark": "0.12.6", - "@lexical/markdown": "0.12.6", - "@lexical/react": "0.12.6", - "@lexical/rich-text": "0.12.6", - "@lexical/selection": "0.12.6", - "@lexical/utils": "0.12.6", + "@lexical/headless": "0.13.1", + "@lexical/link": "0.13.1", + "@lexical/list": "0.13.1", + "@lexical/mark": "0.13.1", + "@lexical/markdown": "0.13.1", + "@lexical/react": "0.13.1", + "@lexical/rich-text": "0.13.1", + "@lexical/selection": "0.13.1", + "@lexical/utils": "0.13.1", "bson-objectid": "2.0.4", "classnames": "^2.3.2", "deep-equal": "2.2.3", "i18next": "22.5.1", "json-schema": "^0.4.0", - "lexical": "0.12.6", + "lexical": "0.13.1", "lodash": "4.17.21", "react": "18.2.0", "react-dom": "18.2.0", - "react-error-boundary": "^4.0.11", + "react-error-boundary": "4.0.12", "react-i18next": "11.18.6", "ts-essentials": "7.0.3" }, "devDependencies": { "@payloadcms/eslint-config": "workspace:*", - "@types/json-schema": "7.0.12", + "@types/json-schema": "7.0.15", "@types/node": "20.6.2", "@types/react": "18.2.15", "payload": "workspace:*" diff --git a/packages/richtext-lexical/src/field/features/BlockQuote/index.ts b/packages/richtext-lexical/src/field/features/BlockQuote/index.ts index 1e84011cfa..06f36aff2f 100644 --- a/packages/richtext-lexical/src/field/features/BlockQuote/index.ts +++ b/packages/richtext-lexical/src/field/features/BlockQuote/index.ts @@ -2,7 +2,7 @@ import type { SerializedQuoteNode } from '@lexical/rich-text' import { $createQuoteNode, QuoteNode } from '@lexical/rich-text' import { $setBlocksType } from '@lexical/selection' -import { $INTERNAL_isPointSelection, $getSelection } from 'lexical' +import { $getSelection } from 'lexical' import type { HTMLConverter } from '../converters/html/converter/types' import type { FeatureProvider } from '../types' @@ -31,9 +31,7 @@ export const BlockQuoteFeature = (): FeatureProvider => { onClick: ({ editor }) => { editor.update(() => { const selection = $getSelection() - if ($INTERNAL_isPointSelection(selection)) { - $setBlocksType(selection, () => $createQuoteNode()) - } + $setBlocksType(selection, () => $createQuoteNode()) }) }, order: 20, @@ -44,6 +42,7 @@ export const BlockQuoteFeature = (): FeatureProvider => { markdownTransformers: [MarkdownTransformer], nodes: [ { + type: QuoteNode.getType(), converters: { html: { converter: async ({ converters, node, parent }) => { @@ -62,7 +61,6 @@ export const BlockQuoteFeature = (): FeatureProvider => { } as HTMLConverter, }, node: QuoteNode, - type: QuoteNode.getType(), }, ], props: null, @@ -82,9 +80,7 @@ export const BlockQuoteFeature = (): FeatureProvider => { keywords: ['quote', 'blockquote'], onSelect: () => { const selection = $getSelection() - if ($INTERNAL_isPointSelection(selection)) { - $setBlocksType(selection, () => $createQuoteNode()) - } + $setBlocksType(selection, () => $createQuoteNode()) }, }), ], diff --git a/packages/richtext-lexical/src/field/features/Heading/index.ts b/packages/richtext-lexical/src/field/features/Heading/index.ts index 839521a724..09f99c00d5 100644 --- a/packages/richtext-lexical/src/field/features/Heading/index.ts +++ b/packages/richtext-lexical/src/field/features/Heading/index.ts @@ -2,7 +2,7 @@ import type { HeadingTagType, SerializedHeadingNode } from '@lexical/rich-text' import { $createHeadingNode, HeadingNode } from '@lexical/rich-text' import { $setBlocksType } from '@lexical/selection' -import { $INTERNAL_isPointSelection, $getSelection } from 'lexical' +import { $getSelection } from 'lexical' import type { HTMLConverter } from '../converters/html/converter/types' import type { FeatureProvider } from '../types' @@ -14,9 +14,7 @@ import { MarkdownTransformer } from './markdownTransformer' const setHeading = (headingSize: HeadingTagType) => { const selection = $getSelection() - if ($INTERNAL_isPointSelection(selection)) { - $setBlocksType(selection, () => $createHeadingNode(headingSize)) - } + $setBlocksType(selection, () => $createHeadingNode(headingSize)) } type Props = { @@ -67,6 +65,7 @@ export const HeadingFeature = (props: Props): FeatureProvider => { markdownTransformers: [MarkdownTransformer(enabledHeadingSizes)], nodes: [ { + type: HeadingNode.getType(), converters: { html: { converter: async ({ converters, node, parent }) => { @@ -85,7 +84,6 @@ export const HeadingFeature = (props: Props): FeatureProvider => { } as HTMLConverter, }, node: HeadingNode, - type: HeadingNode.getType(), }, ], props, diff --git a/packages/richtext-lexical/src/field/features/Link/nodes/LinkNode.ts b/packages/richtext-lexical/src/field/features/Link/nodes/LinkNode.ts index 06af9a7e84..5cad3ebcea 100644 --- a/packages/richtext-lexical/src/field/features/Link/nodes/LinkNode.ts +++ b/packages/richtext-lexical/src/field/features/Link/nodes/LinkNode.ts @@ -22,6 +22,8 @@ import { import type { LinkPayload } from '../plugins/floatingLinkEditor/types' +import { $isAutoLinkNode } from './AutoLinkNode' + export type LinkFields = { // unknown, custom fields: [key: string]: unknown @@ -140,8 +142,8 @@ export class LinkNode extends ElementNode { exportJSON(): SerializedLinkNode { return { ...super.exportJSON(), - fields: this.getFields(), type: this.getType(), + fields: this.getFields(), version: 2, } } diff --git a/packages/richtext-lexical/src/field/features/Link/plugins/autoLink/index.tsx b/packages/richtext-lexical/src/field/features/Link/plugins/autoLink/index.tsx index a165d0a6f4..88da11bc52 100644 --- a/packages/richtext-lexical/src/field/features/Link/plugins/autoLink/index.tsx +++ b/packages/richtext-lexical/src/field/features/Link/plugins/autoLink/index.tsx @@ -235,7 +235,8 @@ function handleLinkCreation( onChange: ChangeHandler, ): void { let currentNodes = [...nodes] - let text = currentNodes.map((node) => node.getTextContent()).join('') + const initialText = currentNodes.map((node) => node.getTextContent()).join('') + let text = initialText let match let invalidMatchEnd = 0 @@ -247,7 +248,7 @@ function handleLinkCreation( const isValid = isContentAroundIsValid( invalidMatchEnd + matchStart, invalidMatchEnd + matchEnd, - text, + initialText, currentNodes, ) diff --git a/packages/richtext-lexical/src/field/features/Link/plugins/floatingLinkEditor/LinkEditor/index.tsx b/packages/richtext-lexical/src/field/features/Link/plugins/floatingLinkEditor/LinkEditor/index.tsx index bf0eb8a509..b5e3dedf87 100644 --- a/packages/richtext-lexical/src/field/features/Link/plugins/floatingLinkEditor/LinkEditor/index.tsx +++ b/packages/richtext-lexical/src/field/features/Link/plugins/floatingLinkEditor/LinkEditor/index.tsx @@ -34,6 +34,8 @@ import { useEditorConfigContext } from '../../../../../lexical/config/EditorConf import { getSelectedNode } from '../../../../../lexical/utils/getSelectedNode' import { setFloatingElemPositionForLinkEditor } from '../../../../../lexical/utils/setFloatingElemPositionForLinkEditor' import { LinkDrawer } from '../../../drawer' +import { $isAutoLinkNode } from '../../../nodes/AutoLinkNode' +import { $createLinkNode } from '../../../nodes/LinkNode' import { $isLinkNode, TOGGLE_LINK_COMMAND } from '../../../nodes/LinkNode' import { transformExtraFields } from '../utilities' import { TOGGLE_LINK_WITH_MODAL_COMMAND } from './commands' @@ -73,7 +75,7 @@ export function LinkEditor({ // Sanitize custom fields here const validRelationships = config.collections.map((c) => c.slug) || [] const fields = sanitizeFields({ - config: config, + config, fields: fieldsUnsanitized, validRelationships, }) @@ -84,10 +86,11 @@ export function LinkEditor({ const { closeModal, toggleModal } = useModal() const editDepth = useEditDepth() const [isLink, setIsLink] = useState(false) + const [isAutoLink, setIsAutoLink] = useState(false) const drawerSlug = formatDrawerSlug({ - depth: editDepth, slug: `lexical-rich-text-link-` + uuid, + depth: editDepth, }) const updateLinkEditor = useCallback(async () => { @@ -98,9 +101,10 @@ export function LinkEditor({ if ($isRangeSelection(selection)) { const node = getSelectedNode(selection) selectedNodeDomRect = editor.getElementByKey(node.getKey())?.getBoundingClientRect() - const linkParent: LinkNode = $findMatchingParent(node, $isLinkNode) as LinkNode + const linkParent: LinkNode = $findMatchingParent(node, $isLinkNode) if (linkParent == null) { setIsLink(false) + setIsAutoLink(false) setLinkUrl('') setLinkLabel('') return @@ -152,6 +156,11 @@ export function LinkEditor({ }) setInitialState(state) setIsLink(true) + if ($isAutoLinkNode(linkParent)) { + setIsAutoLink(true) + } else { + setIsAutoLink(false) + } } const editorElem = editorRef.current @@ -265,6 +274,7 @@ export function LinkEditor({ () => { if (isLink) { setIsLink(false) + setIsAutoLink(false) return true } return false @@ -301,18 +311,20 @@ export function LinkEditor({ tabIndex={0} type="button" /> -