Comments (10)
yes I've tried that, but exportDOM is private in ParagraphNode. That is the blocker
from lexical.
yes I've tried that, but exportDOM is private in ParagraphNode. That is the blocker
Now I get what your first question is.
from lexical.
Thank you, that was helpful.
from lexical.
You can override HTML with HTMLConfig
from the editor config:
html: {
export: new Map([[TextNode, () => ({ element: document.createElement('figure') })]]),
import: { 'figure': () => ({ conversion: () => ({ node: $createTextNode('yolo') }), priority: 4 }) }
},
This is my workaround to maintain consistency in indent style:
export const htmlConfig: HTMLConfig = {
export: new Map([
[
ParagraphNode,
(editor, node) => {
const targetNode = node as ParagraphNode;
const element = document.createElement('p');
if (element && isHTMLElement(element)) {
if (targetNode.isEmpty()) {
element.append(document.createElement('br'));
}
const formatType = targetNode.getFormatType();
element.style.textAlign = formatType;
const direction = targetNode.getDirection();
if (direction) {
element.dir = direction;
}
const indent = targetNode.getIndent();
setElementIndent(element, indent, editor._config.theme.indent);
}
return {
element,
};
},
],
]),
};
const DEFAULT_INDENT_VALUE = '40px';
function setElementIndent(dom: HTMLElement, indent: number, indentClassName?: string): void {
if (indent < 1) {
return;
}
if (typeof indentClassName === 'string') {
dom.classList.add(indentClassName);
}
const indentationBaseValue =
window.getComputedStyle(dom).getPropertyValue('--lexical-indent-base-value') ||
DEFAULT_INDENT_VALUE;
dom.style.setProperty(
// padding-inline-start is not widely supported in email HTML, but
// Lexical Reconciler uses padding-inline-start. Using text-indent instead.
'text-indent',
`${indent * parseInt(indentationBaseValue, 10)}px`
);
}
from lexical.
@2wheeh will this approach override the entire ParagraphNode? I want to avoid this in order to maintain consistency with the Lexical's ParagraphNode and just add missing inline styles.
from lexical.
I would like to do something like this
export class CustomParagraphNode extends ParagraphNode {
exportDOM(editor) {
const el = super.exportDOM(editor);
el.element.style.margin = '0px'
return { element: el.element };
}
}
const editorConfig = {
namespace: 'rte',
onError(error: Error) {
throw error;
},
theme: Theme,
nodes: [
CustomParagraphNode,
{
replace: ParagraphNode,
with: (node: ParagraphNode) => {
return new CustomParagraphNode();
}
}
],
};
from lexical.
this approach override the entire ParagraphNode?
This override exportDOM method of entire ParagraphNode. So use ParagraphNode.exportDOM
implementation with your style manipulation.
or you can override the whole Node like this:
const editorConfig = {
...
nodes=[
// Don't forget to register your custom node separately!
CustomParagraphNode,
{
replace: ParagraphNode,
with: (node: ParagraphNode) => {
return new CustomParagraphNode();
}
}
]
}
with this approach, you can call super()
to leverage default paragraphNode's behavior somehow if you prefer this to copy and paste.
from lexical.
Ah yes you got it
from lexical.
Is it private method? It doesn't seem so. But you need to implement other methods too for full functionality, which is why i prefer HTMLConfig
.
from lexical.
const htmlConfig: HTMLConfig = {
export: new Map([
[
ParagraphNode,
(editor, node) => {
const {element} = node.exportDOM(editor);
if (element && isHTMLElement(element)) {
element.style.margin = '0px';
}
return {
element,
};
},
],
]),
};
In this way, you can leverage default ParagraphNode.exportDOM
instead of call super
with customNode.
from lexical.
Related Issues (20)
- Feature: updating from Markdown without setting focus HOT 3
- Bug: wrong display position after creating a code block from selected text.
- Bug: $convertFromMarkdownString followed by $convertToMarkdownString yields different markdown. HOT 5
- Bug: Lexical node with constructor XXXNode attempted to re-use key from node in active editor state with constructor _TextNode. HOT 4
- Feature: support set list style type by insertList function HOT 2
- Bug: $convertToMarkdownString() returning null if node is not root HOT 1
- Bug: MaxLengthPlugin does not highlight extra characters properly in rich text editor with multiple paragraphs HOT 1
- In Next js 14 , Bug: Unhandled Runtime Error Error: Unable to find an active editor. This method can only be used synchronously during the callback of editor.update(). HOT 7
- Bug: EditorUpdateOptions not exported from lexical package
- Bug: The code blocks in the editor do not wrap automatically.
- Bug: Pressing backspace (delete) in an empty list item, should remove the list formatting, before removing the entire line
- Bug: backticks inside link title prevent Markdown rendering HOT 1
- Feature: "CMD + delete" deletes not only the text but also the block
- Bug: Lexical Collaboration Plugin is not working properly with Next.js 14 app router HOT 3
- Bug: collapsible container is not being exported faithfully to markdown/html
- Feature: Provide a variant of EditorState.read that sets activeEditor HOT 3
- Bug: Unable to find "concepts/history" on the lexical website HOT 1
- Bug: The extended TableNode does not work correctly. HOT 5
- Feature: placement of the cursor after inserting text at a specific position HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from lexical.