diff --git a/resources/js/wysiwyg/lexical/core/LexicalCommands.ts b/resources/js/wysiwyg/lexical/core/LexicalCommands.ts index 0f1c0a5d3..f995237a0 100644 --- a/resources/js/wysiwyg/lexical/core/LexicalCommands.ts +++ b/resources/js/wysiwyg/lexical/core/LexicalCommands.ts @@ -8,7 +8,6 @@ import type { BaseSelection, - ElementFormatType, LexicalCommand, LexicalNode, TextFormatType, @@ -91,8 +90,6 @@ export const OUTDENT_CONTENT_COMMAND: LexicalCommand = createCommand( ); export const DROP_COMMAND: LexicalCommand = createCommand('DROP_COMMAND'); -export const FORMAT_ELEMENT_COMMAND: LexicalCommand = - createCommand('FORMAT_ELEMENT_COMMAND'); export const DRAGSTART_COMMAND: LexicalCommand = createCommand('DRAGSTART_COMMAND'); export const DRAGOVER_COMMAND: LexicalCommand = diff --git a/resources/js/wysiwyg/lexical/core/LexicalConstants.ts b/resources/js/wysiwyg/lexical/core/LexicalConstants.ts index 82461e74d..55668f1e4 100644 --- a/resources/js/wysiwyg/lexical/core/LexicalConstants.ts +++ b/resources/js/wysiwyg/lexical/core/LexicalConstants.ts @@ -6,7 +6,6 @@ * */ -import type {ElementFormatType} from './nodes/LexicalElementNode'; import type { TextDetailType, TextFormatType, @@ -111,27 +110,6 @@ export const DETAIL_TYPE_TO_DETAIL: Record = { unmergeable: IS_UNMERGEABLE, }; -export const ELEMENT_TYPE_TO_FORMAT: Record< - Exclude, - number -> = { - center: IS_ALIGN_CENTER, - end: IS_ALIGN_END, - justify: IS_ALIGN_JUSTIFY, - left: IS_ALIGN_LEFT, - right: IS_ALIGN_RIGHT, - start: IS_ALIGN_START, -}; - -export const ELEMENT_FORMAT_TO_TYPE: Record = { - [IS_ALIGN_CENTER]: 'center', - [IS_ALIGN_END]: 'end', - [IS_ALIGN_JUSTIFY]: 'justify', - [IS_ALIGN_LEFT]: 'left', - [IS_ALIGN_RIGHT]: 'right', - [IS_ALIGN_START]: 'start', -}; - export const TEXT_MODE_TO_TYPE: Record = { normal: IS_NORMAL, segmented: IS_SEGMENTED, diff --git a/resources/js/wysiwyg/lexical/core/LexicalNode.ts b/resources/js/wysiwyg/lexical/core/LexicalNode.ts index 163bb8c31..7306e6bca 100644 --- a/resources/js/wysiwyg/lexical/core/LexicalNode.ts +++ b/resources/js/wysiwyg/lexical/core/LexicalNode.ts @@ -146,6 +146,12 @@ type NodeName = string; * Output for a DOM conversion. * Node can be set to 'ignore' to ignore the conversion and handling of the DOMNode * including all its children. + * + * You can specify a function to run for each converted child (forChild) or on all + * the child nodes after the conversion is complete (after). + * The key difference here is that forChild runs for every deeply nested child node + * of the current node, whereas after will run only once after the + * transformation of the node and all its children is complete. */ export type DOMConversionOutput = { after?: (childLexicalNodes: Array) => Array; diff --git a/resources/js/wysiwyg/lexical/core/index.ts b/resources/js/wysiwyg/lexical/core/index.ts index 5ef926b5a..92cb4a1ca 100644 --- a/resources/js/wysiwyg/lexical/core/index.ts +++ b/resources/js/wysiwyg/lexical/core/index.ts @@ -49,15 +49,12 @@ export type { } from './LexicalNode'; export type { BaseSelection, - ElementPointType as ElementPoint, NodeSelection, Point, PointType, RangeSelection, - TextPointType as TextPoint, } from './LexicalSelection'; export type { - ElementFormatType, SerializedElementNode, } from './nodes/LexicalElementNode'; export type {SerializedRootNode} from './nodes/LexicalRootNode'; @@ -87,7 +84,6 @@ export { DRAGSTART_COMMAND, DROP_COMMAND, FOCUS_COMMAND, - FORMAT_ELEMENT_COMMAND, FORMAT_TEXT_COMMAND, INDENT_CONTENT_COMMAND, INSERT_LINE_BREAK_COMMAND, diff --git a/resources/js/wysiwyg/lexical/core/nodes/LexicalElementNode.ts b/resources/js/wysiwyg/lexical/core/nodes/LexicalElementNode.ts index 9624af67e..9ad508411 100644 --- a/resources/js/wysiwyg/lexical/core/nodes/LexicalElementNode.ts +++ b/resources/js/wysiwyg/lexical/core/nodes/LexicalElementNode.ts @@ -46,15 +46,6 @@ export type SerializedElementNode< SerializedLexicalNode >; -export type ElementFormatType = - | 'left' - | 'start' - | 'center' - | 'right' - | 'end' - | 'justify' - | ''; - // eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging export interface ElementNode { getTopLevelElement(): ElementNode | null; diff --git a/resources/js/wysiwyg/lexical/core/nodes/LexicalTextNode.ts b/resources/js/wysiwyg/lexical/core/nodes/LexicalTextNode.ts index 4a3a48950..7f1b4f305 100644 --- a/resources/js/wysiwyg/lexical/core/nodes/LexicalTextNode.ts +++ b/resources/js/wysiwyg/lexical/core/nodes/LexicalTextNode.ts @@ -1314,6 +1314,11 @@ const nodeNameToTextFormat: Record = { function convertTextFormatElement(domNode: HTMLElement): DOMConversionOutput { const format = nodeNameToTextFormat[domNode.nodeName.toLowerCase()]; + + if (format === 'code' && domNode.closest('pre')) { + return {node: null}; + } + if (format === undefined) { return {node: null}; } diff --git a/resources/js/wysiwyg/lexical/core/shared/invariant.ts b/resources/js/wysiwyg/lexical/core/shared/invariant.ts index 0e73848ba..8e008c11c 100644 --- a/resources/js/wysiwyg/lexical/core/shared/invariant.ts +++ b/resources/js/wysiwyg/lexical/core/shared/invariant.ts @@ -18,9 +18,9 @@ export default function invariant( return; } - throw new Error( - 'Internal Lexical error: invariant() is meant to be replaced at compile ' + - 'time. There is no runtime version. Error: ' + - message, - ); + for (const arg of args) { + message = (message || '').replace('%s', arg); + } + + throw new Error(message); } diff --git a/resources/js/wysiwyg/lexical/html/index.ts b/resources/js/wysiwyg/lexical/html/index.ts index 5c3cb6cce..5018e10b4 100644 --- a/resources/js/wysiwyg/lexical/html/index.ts +++ b/resources/js/wysiwyg/lexical/html/index.ts @@ -11,7 +11,6 @@ import type { DOMChildConversion, DOMConversion, DOMConversionFn, - ElementFormatType, LexicalEditor, LexicalNode, } from 'lexical'; @@ -58,6 +57,7 @@ export function $generateNodesFromDOM( } } } + $unwrapArtificalNodes(allArtificialNodes); return lexicalNodes; @@ -324,8 +324,6 @@ function wrapContinuousInlines( nodes: Array, createWrapperFn: () => ElementNode, ): Array { - const textAlign = (domNode as HTMLElement).style - .textAlign as ElementFormatType; const out: Array = []; let continuousInlines: Array = []; // wrap contiguous inline child nodes in para diff --git a/resources/js/wysiwyg/lexical/rich-text/LexicalCodeBlockNode.ts b/resources/js/wysiwyg/lexical/rich-text/LexicalCodeBlockNode.ts index cbe691848..49ba7754c 100644 --- a/resources/js/wysiwyg/lexical/rich-text/LexicalCodeBlockNode.ts +++ b/resources/js/wysiwyg/lexical/rich-text/LexicalCodeBlockNode.ts @@ -145,7 +145,14 @@ export class CodeBlockNode extends DecoratorNode { node.setId(element.id); } - return { node }; + return { + node, + after(childNodes): LexicalNode[] { + // Remove any child nodes that may get parsed since we're manually + // controlling the code contents. + return []; + }, + }; }, priority: 3, }; diff --git a/resources/js/wysiwyg/lexical/rich-text/index.ts b/resources/js/wysiwyg/lexical/rich-text/index.ts index c585c028a..477fdd781 100644 --- a/resources/js/wysiwyg/lexical/rich-text/index.ts +++ b/resources/js/wysiwyg/lexical/rich-text/index.ts @@ -8,7 +8,6 @@ import type { CommandPayloadType, - ElementFormatType, LexicalCommand, LexicalEditor, PasteCommandType, @@ -44,7 +43,6 @@ import { DRAGSTART_COMMAND, DROP_COMMAND, ElementNode, - FORMAT_ELEMENT_COMMAND, FORMAT_TEXT_COMMAND, INSERT_LINE_BREAK_COMMAND, INSERT_PARAGRAPH_COMMAND, @@ -285,25 +283,6 @@ export function registerRichText(editor: LexicalEditor): () => void { }, COMMAND_PRIORITY_EDITOR, ), - editor.registerCommand( - FORMAT_ELEMENT_COMMAND, - (format) => { - const selection = $getSelection(); - if (!$isRangeSelection(selection) && !$isNodeSelection(selection)) { - return false; - } - const nodes = selection.getNodes(); - for (const node of nodes) { - const element = $findMatchingParent( - node, - (parentNode): parentNode is ElementNode => - $isElementNode(parentNode) && !parentNode.isInline(), - ); - } - return true; - }, - COMMAND_PRIORITY_EDITOR, - ), editor.registerCommand( INSERT_LINE_BREAK_COMMAND, (selectStart) => {