Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[lexical-playground][lexical-react][lexical] Feature: Theme class added to horizontal rule node #6090

Merged
merged 3 commits into from
May 16, 2024
Merged

[lexical-playground][lexical-react][lexical] Feature: Theme class added to horizontal rule node #6090

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e318f94
Apply theme class to HR node
daltnd May 12, 2024
0947e73
Use theme class for HR styles
daltnd May 12, 2024
5800ecb
Add theme class to HR test references
daltnd May 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 20 additions & 5 deletions packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/HTMLCopyAndPaste.spec.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,8 +208,14 @@ test.describe('HTML CopyAndPaste', () => {
await assertHTML(
page,
html`
<hr class="" contenteditable="false" data-lexical-decorator="true" />
<hr class="" contenteditable="false" data-lexical-decorator="true" />
<hr
class="PlaygroundEditorTheme__hr"
contenteditable="false"
data-lexical-decorator="true" />
<hr
class="PlaygroundEditorTheme__hr"
contenteditable="false"
data-lexical-decorator="true" />
<div
class="PlaygroundEditorTheme__blockCursor"
contenteditable="false"
Expand All @@ -228,13 +234,19 @@ test.describe('HTML CopyAndPaste', () => {
await assertHTML(
page,
html`
<hr class="" contenteditable="false" data-lexical-decorator="true" />
<hr
class="PlaygroundEditorTheme__hr"
contenteditable="false"
data-lexical-decorator="true" />
<p
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
dir="ltr">
<span data-lexical-text="true">Text between HRs</span>
</p>
<hr class="" contenteditable="false" data-lexical-decorator="true" />
<hr
class="PlaygroundEditorTheme__hr"
contenteditable="false"
data-lexical-decorator="true" />
`,
);
await assertSelection(page, {
Expand Down Expand Up @@ -266,7 +278,10 @@ test.describe('HTML CopyAndPaste', () => {
dir="ltr">
<span data-lexical-text="true">Hello</span>
</p>
<hr class="" contenteditable="false" data-lexical-decorator="true" />
<hr
class="PlaygroundEditorTheme__hr"
contenteditable="false"
data-lexical-decorator="true" />
<p
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
dir="ltr">
Expand Down
5 changes: 4 additions & 1 deletion packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/ListsHTMLCopyAndPaste.spec.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -391,7 +391,10 @@ test.describe('HTML Lists CopyAndPaste', () => {
<span data-lexical-text="true">one</span>
</li>
</ul>
<hr class="" contenteditable="false" data-lexical-decorator="true" />
<hr
class="PlaygroundEditorTheme__hr"
contenteditable="false"
data-lexical-decorator="true" />
<ul class="PlaygroundEditorTheme__ul">
<li
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
Expand Down
51 changes: 39 additions & 12 deletions packages/lexical-playground/__tests__/e2e/HorizontalRule.spec.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,10 @@ test.describe('HorizontalRule', () => {
page,
html`
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
<hr class="" contenteditable="false" data-lexical-decorator="true" />
<hr
class="PlaygroundEditorTheme__hr"
contenteditable="false"
data-lexical-decorator="true" />
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
`,
);
Expand Down Expand Up @@ -107,7 +110,10 @@ test.describe('HorizontalRule', () => {
dir="ltr">
<span data-lexical-text="true">Some text</span>
</p>
<hr class="" contenteditable="false" data-lexical-decorator="true" />
<hr
class="PlaygroundEditorTheme__hr"
contenteditable="false"
data-lexical-decorator="true" />
<p
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
dir="ltr">
Expand Down Expand Up @@ -135,7 +141,7 @@ test.describe('HorizontalRule', () => {
if (!isCollab) {
await assertHTML(
page,
'<div class="PlaygroundEditorTheme__blockCursor" contenteditable="false" data-lexical-cursor="true"></div><hr class="" data-lexical-decorator="true" contenteditable="false"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Some more text</span></p>',
'<div class="PlaygroundEditorTheme__blockCursor" contenteditable="false" data-lexical-cursor="true"></div><hr class="PlaygroundEditorTheme__hr" data-lexical-decorator="true" contenteditable="false"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Some more text</span></p>',
);
}

Expand Down Expand Up @@ -187,7 +193,10 @@ test.describe('HorizontalRule', () => {
dir="ltr">
<span data-lexical-text="true">Test</span>
</p>
<hr class="" contenteditable="false" data-lexical-decorator="true" />
<hr
class="PlaygroundEditorTheme__hr"
contenteditable="false"
data-lexical-decorator="true" />
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
`,
);
Expand Down Expand Up @@ -248,7 +257,10 @@ test.describe('HorizontalRule', () => {
dir="ltr">
<span data-lexical-text="true">Te</span>
</p>
<hr class="" contenteditable="false" data-lexical-decorator="true" />
<hr
class="PlaygroundEditorTheme__hr"
contenteditable="false"
data-lexical-decorator="true" />
<p
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
dir="ltr">
Expand Down Expand Up @@ -278,7 +290,10 @@ test.describe('HorizontalRule', () => {
page,
html`
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
<hr class="" contenteditable="false" data-lexical-decorator="true" />
<hr
class="PlaygroundEditorTheme__hr"
contenteditable="false"
data-lexical-decorator="true" />
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
`,
);
Expand All @@ -305,7 +320,10 @@ test.describe('HorizontalRule', () => {
page,
html`
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
<hr class="" contenteditable="false" data-lexical-decorator="true" />
<hr
class="PlaygroundEditorTheme__hr"
contenteditable="false"
data-lexical-decorator="true" />
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
`,
);
Expand All @@ -326,9 +344,15 @@ test.describe('HorizontalRule', () => {
page,
html`
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
<hr class="" contenteditable="false" data-lexical-decorator="true" />
<hr
class="PlaygroundEditorTheme__hr"
contenteditable="false"
data-lexical-decorator="true" />
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
<hr class="" contenteditable="false" data-lexical-decorator="true" />
<hr
class="PlaygroundEditorTheme__hr"
contenteditable="false"
data-lexical-decorator="true" />
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
`,
);
Expand Down Expand Up @@ -359,7 +383,10 @@ test.describe('HorizontalRule', () => {
page,
html`
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
<hr class="" contenteditable="false" data-lexical-decorator="true" />
<hr
class="PlaygroundEditorTheme__hr"
contenteditable="false"
data-lexical-decorator="true" />
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
`,
);
Expand All @@ -380,7 +407,7 @@ test.describe('HorizontalRule', () => {
html`
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
<hr
class="selected"
class="PlaygroundEditorTheme__hr selected"
contenteditable="false"
data-lexical-decorator="true" />
`,
Expand Down Expand Up @@ -409,7 +436,7 @@ test.describe('HorizontalRule', () => {
page,
html`
<hr
class="selected"
class="PlaygroundEditorTheme__hr selected"
contenteditable="false"
data-lexical-decorator="true" />
`,
Expand Down
24 changes: 18 additions & 6 deletions packages/lexical-playground/__tests__/e2e/Markdown.spec.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ test.describe('Markdown', () => {
},
{
expectation:
'<hr class="" data-lexical-decorator="true" contenteditable="false" /><p class="PlaygroundEditorTheme__paragraph"><br></p>',
'<hr class="PlaygroundEditorTheme__hr" data-lexical-decorator="true" contenteditable="false" /><p class="PlaygroundEditorTheme__paragraph"><br></p>',
importExpectation: '',
isBlockTest: true,
markdownImport: '',
Expand All @@ -159,7 +159,7 @@ test.describe('Markdown', () => {
},
{
expectation:
'<hr class="" data-lexical-decorator="true" contenteditable="false" /><p class="PlaygroundEditorTheme__paragraph"><br></p>',
'<hr class="PlaygroundEditorTheme__hr" data-lexical-decorator="true" contenteditable="false" /><p class="PlaygroundEditorTheme__paragraph"><br></p>',
importExpectation: '',
isBlockTest: true,
markdownImport: '',
Expand Down Expand Up @@ -493,14 +493,20 @@ test.describe('Markdown', () => {
},
{
html: html`
<hr class="" contenteditable="false" data-lexical-decorator="true" />
<hr
class="PlaygroundEditorTheme__hr"
contenteditable="false"
data-lexical-decorator="true" />
<p><br /></p>
`,
text: '--- ',
},
{
html: html`
<hr class="" contenteditable="false" data-lexical-decorator="true" />
<hr
class="PlaygroundEditorTheme__hr"
contenteditable="false"
data-lexical-decorator="true" />
<p><br /></p>
`,
text: '*** ',
Expand Down Expand Up @@ -1171,7 +1177,10 @@ const TYPED_MARKDOWN_HTML = html`
dir="ltr">
<span data-lexical-text="true">Quote</span>
</blockquote>
<hr class="" contenteditable="false" data-lexical-decorator="true" />
<hr
class="PlaygroundEditorTheme__hr"
contenteditable="false"
data-lexical-decorator="true" />
<ul class="PlaygroundEditorTheme__ul">
<li
value="1"
Expand Down Expand Up @@ -1385,7 +1394,10 @@ const IMPORTED_MARKDOWN_HTML = html`
<h3 class="PlaygroundEditorTheme__h3 PlaygroundEditorTheme__ltr" dir="ltr">
<span data-lexical-text="true">Horizontal Rules</span>
</h3>
<hr class="" contenteditable="false" data-lexical-decorator="true" />
<hr
class="PlaygroundEditorTheme__hr"
contenteditable="false"
data-lexical-decorator="true" />
<h3 class="PlaygroundEditorTheme__h3 PlaygroundEditorTheme__ltr" dir="ltr">
<span data-lexical-text="true">Blockquotes</span>
</h3>
Expand Down
2 changes: 1 addition & 1 deletion packages/lexical-playground/__tests__/e2e/Selection.spec.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -550,7 +550,7 @@ test.describe('Selection', () => {
<span data-lexical-text="true">Some text</span>
</h1>
<hr
class="selected"
class="PlaygroundEditorTheme__hr selected"
contenteditable="false"
data-lexical-decorator="true" />
<h1
Expand Down
20 changes: 0 additions & 20 deletions packages/lexical-playground/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1726,26 +1726,6 @@ button.item.dropdown-item-active i {
opacity: 1;
}

hr {
padding: 2px 2px;
border: none;
margin: 1em 0;
cursor: pointer;
}

hr:after {
content: '';
display: block;
height: 2px;
background-color: #ccc;
line-height: 2px;
}

hr.selected {
outline: 2px solid rgb(60, 132, 244);
user-select: none;
}

.TableNode__contentEditable {
min-height: 20px;
border: 0px;
Expand Down
17 changes: 17 additions & 0 deletions packages/lexical-playground/src/themes/PlaygroundEditorTheme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -442,3 +442,20 @@
.PlaygroundEditorTheme__autocomplete {
color: #ccc;
}
.PlaygroundEditorTheme__hr {
padding: 2px 2px;
border: none;
margin: 1em 0;
cursor: pointer;
}
.PlaygroundEditorTheme__hr:after {
content: '';
display: block;
height: 2px;
background-color: #ccc;
line-height: 2px;
}
.PlaygroundEditorTheme__hr.selected {
outline: 2px solid rgb(60, 132, 244);
user-select: none;
}
1 change: 1 addition & 0 deletions packages/lexical-playground/src/themes/PlaygroundEditorTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ const theme: EditorThemeClasses = {
h5: 'PlaygroundEditorTheme__h5',
h6: 'PlaygroundEditorTheme__h6',
},
hr: 'PlaygroundEditorTheme__hr',
image: 'editor-image',
indent: 'PlaygroundEditorTheme__indent',
inlineImage: 'inline-editor-image',
Expand Down
21 changes: 17 additions & 4 deletions packages/lexical-react/src/LexicalHorizontalRuleNode.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import type {
DOMConversionMap,
DOMConversionOutput,
DOMExportOutput,
EditorConfig,
LexicalCommand,
LexicalNode,
NodeKey,
Expand All @@ -18,7 +19,11 @@ import type {

import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
import {useLexicalNodeSelection} from '@lexical/react/useLexicalNodeSelection';
import {mergeRegister} from '@lexical/utils';
import {
addClassNamesToElement,
mergeRegister,
removeClassNamesFromElement,
} from '@lexical/utils';
import {
$applyNodeReplacement,
$getNodeByKey,
Expand Down Expand Up @@ -93,8 +98,14 @@ function HorizontalRuleComponent({nodeKey}: {nodeKey: NodeKey}) {

useEffect(() => {
const hrElem = editor.getElementByKey(nodeKey);
const isSelectedClassName = 'selected';

if (hrElem !== null) {
hrElem.className = isSelected ? 'selected' : '';
if (isSelected) {
addClassNamesToElement(hrElem, isSelectedClassName);
} else {
removeClassNamesFromElement(hrElem, isSelectedClassName);
}
}
}, [editor, isSelected, nodeKey]);

Expand Down Expand Up @@ -136,8 +147,10 @@ export class HorizontalRuleNode extends DecoratorNode<JSX.Element> {
return {element: document.createElement('hr')};
}

createDOM(): HTMLElement {
return document.createElement('hr');
createDOM(config: EditorConfig): HTMLElement {
const element = document.createElement('hr');
addClassNamesToElement(element, config.theme.hr);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: I think it's better to use getCachedClassNameArray(config.theme, 'hr') here as it runs normalizeClassNames fn against classes

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Happy to do that. It looks like getCachedClassNameArray is only in the lexicalUtils file, though, so the import would dig into lexical/src:

import {getCachedClassNameArray} from 'packages/lexical/src/LexicalUtils';

Would it be better to move that function to the @lexical/utils package or is that import ok?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you can't move it to @lexical/utils as lexical can't depend on @lexical/utils...
Mmm, I think we can keep it as is :)

return element;
}

getTextContent(): string {
Expand Down
1 change: 1 addition & 0 deletions packages/lexical/src/LexicalEditor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@ export type EditorThemeClasses = {
h5?: EditorThemeClassName;
h6?: EditorThemeClassName;
};
hr?: EditorThemeClassName;
image?: EditorThemeClassName;
link?: EditorThemeClassName;
list?: {
Expand Down
Loading