From e318f94c8824e48fb2b8721837ee1a9e7b1f11d5 Mon Sep 17 00:00:00 2001 From: Dalton Downing Date: Sat, 11 May 2024 20:50:37 -1000 Subject: [PATCH 1/3] Apply theme class to HR node --- .../src/LexicalHorizontalRuleNode.tsx | 21 +++++++++++++++---- packages/lexical/src/LexicalEditor.ts | 1 + 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/packages/lexical-react/src/LexicalHorizontalRuleNode.tsx b/packages/lexical-react/src/LexicalHorizontalRuleNode.tsx index 17951877637..b13b4ba02be 100644 --- a/packages/lexical-react/src/LexicalHorizontalRuleNode.tsx +++ b/packages/lexical-react/src/LexicalHorizontalRuleNode.tsx @@ -10,6 +10,7 @@ import type { DOMConversionMap, DOMConversionOutput, DOMExportOutput, + EditorConfig, LexicalCommand, LexicalNode, NodeKey, @@ -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, @@ -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]); @@ -136,8 +147,10 @@ export class HorizontalRuleNode extends DecoratorNode { 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); + return element; } getTextContent(): string { diff --git a/packages/lexical/src/LexicalEditor.ts b/packages/lexical/src/LexicalEditor.ts index 7c03d00c790..92f59807206 100644 --- a/packages/lexical/src/LexicalEditor.ts +++ b/packages/lexical/src/LexicalEditor.ts @@ -104,6 +104,7 @@ export type EditorThemeClasses = { h5?: EditorThemeClassName; h6?: EditorThemeClassName; }; + hr?: EditorThemeClassName; image?: EditorThemeClassName; link?: EditorThemeClassName; list?: { From 0947e73e27136bf2c1b86e9cf4cc841d46e2b1f0 Mon Sep 17 00:00:00 2001 From: Dalton Downing Date: Sat, 11 May 2024 20:50:46 -1000 Subject: [PATCH 2/3] Use theme class for HR styles --- packages/lexical-playground/src/index.css | 20 ------------------- .../src/themes/PlaygroundEditorTheme.css | 17 ++++++++++++++++ .../src/themes/PlaygroundEditorTheme.ts | 1 + 3 files changed, 18 insertions(+), 20 deletions(-) diff --git a/packages/lexical-playground/src/index.css b/packages/lexical-playground/src/index.css index 9e9477e85e2..a6c9d65c267 100644 --- a/packages/lexical-playground/src/index.css +++ b/packages/lexical-playground/src/index.css @@ -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; diff --git a/packages/lexical-playground/src/themes/PlaygroundEditorTheme.css b/packages/lexical-playground/src/themes/PlaygroundEditorTheme.css index cc55916d342..4e5b551e45f 100644 --- a/packages/lexical-playground/src/themes/PlaygroundEditorTheme.css +++ b/packages/lexical-playground/src/themes/PlaygroundEditorTheme.css @@ -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; +} diff --git a/packages/lexical-playground/src/themes/PlaygroundEditorTheme.ts b/packages/lexical-playground/src/themes/PlaygroundEditorTheme.ts index 1b38fc16bd4..f13b2460498 100644 --- a/packages/lexical-playground/src/themes/PlaygroundEditorTheme.ts +++ b/packages/lexical-playground/src/themes/PlaygroundEditorTheme.ts @@ -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', From 5800ecbf0c392e0269bff27615c42cd5bae8f42b Mon Sep 17 00:00:00 2001 From: Dalton Downing Date: Sat, 11 May 2024 20:53:51 -1000 Subject: [PATCH 3/3] Add theme class to HR test references --- .../html/HTMLCopyAndPaste.spec.mjs | 25 +++++++-- .../html/ListsHTMLCopyAndPaste.spec.mjs | 5 +- .../__tests__/e2e/HorizontalRule.spec.mjs | 51 ++++++++++++++----- .../__tests__/e2e/Markdown.spec.mjs | 24 ++++++--- .../__tests__/e2e/Selection.spec.mjs | 2 +- 5 files changed, 82 insertions(+), 25 deletions(-) diff --git a/packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/HTMLCopyAndPaste.spec.mjs b/packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/HTMLCopyAndPaste.spec.mjs index cb0a9bed93a..e2543ec0e1e 100644 --- a/packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/HTMLCopyAndPaste.spec.mjs +++ b/packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/HTMLCopyAndPaste.spec.mjs @@ -208,8 +208,14 @@ test.describe('HTML CopyAndPaste', () => { await assertHTML( page, html` -
-
+
+
{ await assertHTML( page, html` -
+

Text between HRs

-
+
`, ); await assertSelection(page, { @@ -266,7 +278,10 @@ test.describe('HTML CopyAndPaste', () => { dir="ltr"> Hello

-
+

diff --git a/packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/ListsHTMLCopyAndPaste.spec.mjs b/packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/ListsHTMLCopyAndPaste.spec.mjs index dbb58e82d3c..34cf35623ab 100644 --- a/packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/ListsHTMLCopyAndPaste.spec.mjs +++ b/packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/ListsHTMLCopyAndPaste.spec.mjs @@ -391,7 +391,10 @@ test.describe('HTML Lists CopyAndPaste', () => { one -

+
  • { page, html`


    -
    +


    `, ); @@ -107,7 +110,10 @@ test.describe('HorizontalRule', () => { dir="ltr"> Some text

    -
    +

    @@ -135,7 +141,7 @@ test.describe('HorizontalRule', () => { if (!isCollab) { await assertHTML( page, - '

    Some more text

    ', + '

    Some more text

    ', ); } @@ -187,7 +193,10 @@ test.describe('HorizontalRule', () => { dir="ltr"> Test

    -
    +


    `, ); @@ -248,7 +257,10 @@ test.describe('HorizontalRule', () => { dir="ltr"> Te

    -
    +

    @@ -278,7 +290,10 @@ test.describe('HorizontalRule', () => { page, html`


    -
    +


    `, ); @@ -305,7 +320,10 @@ test.describe('HorizontalRule', () => { page, html`


    -
    +


    `, ); @@ -326,9 +344,15 @@ test.describe('HorizontalRule', () => { page, html`


    -
    +


    -
    +


    `, ); @@ -359,7 +383,10 @@ test.describe('HorizontalRule', () => { page, html`


    -
    +


    `, ); @@ -380,7 +407,7 @@ test.describe('HorizontalRule', () => { html`


    `, @@ -409,7 +436,7 @@ test.describe('HorizontalRule', () => { page, html`
    `, diff --git a/packages/lexical-playground/__tests__/e2e/Markdown.spec.mjs b/packages/lexical-playground/__tests__/e2e/Markdown.spec.mjs index 61922e9cd8f..962e8933af1 100644 --- a/packages/lexical-playground/__tests__/e2e/Markdown.spec.mjs +++ b/packages/lexical-playground/__tests__/e2e/Markdown.spec.mjs @@ -150,7 +150,7 @@ test.describe('Markdown', () => { }, { expectation: - '


    ', + '


    ', importExpectation: '', isBlockTest: true, markdownImport: '', @@ -159,7 +159,7 @@ test.describe('Markdown', () => { }, { expectation: - '


    ', + '


    ', importExpectation: '', isBlockTest: true, markdownImport: '', @@ -493,14 +493,20 @@ test.describe('Markdown', () => { }, { html: html` -
    +


    `, text: '--- ', }, { html: html` -
    +


    `, text: '*** ', @@ -1171,7 +1177,10 @@ const TYPED_MARKDOWN_HTML = html` dir="ltr"> Quote -
    +
    • Horizontal Rules -
      +

      Blockquotes

      diff --git a/packages/lexical-playground/__tests__/e2e/Selection.spec.mjs b/packages/lexical-playground/__tests__/e2e/Selection.spec.mjs index 3956e85420a..22a15388f5e 100644 --- a/packages/lexical-playground/__tests__/e2e/Selection.spec.mjs +++ b/packages/lexical-playground/__tests__/e2e/Selection.spec.mjs @@ -550,7 +550,7 @@ test.describe('Selection', () => { Some text