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<void> = createCommand(
);
export const DROP_COMMAND: LexicalCommand<DragEvent> =
createCommand('DROP_COMMAND');
-export const FORMAT_ELEMENT_COMMAND: LexicalCommand<ElementFormatType> =
- createCommand('FORMAT_ELEMENT_COMMAND');
export const DRAGSTART_COMMAND: LexicalCommand<DragEvent> =
createCommand('DRAGSTART_COMMAND');
export const DRAGOVER_COMMAND: LexicalCommand<DragEvent> =
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<TextDetailType | string, number> = {
unmergeable: IS_UNMERGEABLE,
};
-export const ELEMENT_TYPE_TO_FORMAT: Record<
- Exclude<ElementFormatType, ''>,
- 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<number, ElementFormatType> = {
- [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<TextModeType, 0 | 1 | 2> = {
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<LexicalNode>) => Array<LexicalNode>;
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<string, TextFormatType> = {
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<LexicalNode>,
createWrapperFn: () => ElementNode,
): Array<LexicalNode> {
- const textAlign = (domNode as HTMLElement).style
- .textAlign as ElementFormatType;
const out: Array<LexicalNode> = [];
let continuousInlines: Array<LexicalNode> = [];
// 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<EditorDecoratorAdapter> {
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<ElementFormatType>(
- 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<boolean>(
INSERT_LINE_BREAK_COMMAND,
(selectStart) => {