From a2c98963f3f6948d0b9cb479e40d196ec6d8a580 Mon Sep 17 00:00:00 2001
From: Petyo Ivanov <underlog@gmail.com>
Date: Thu, 21 Dec 2023 08:50:58 +0200
Subject: [PATCH] fix: improve thematic break selection

Fixes #252
---
 src/importMarkdownToLexical.ts      |  4 ++--
 src/styles/globals.css              |  6 ++++++
 src/styles/lexical-theme.module.css | 33 +++++++++++++++++------------
 3 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/src/importMarkdownToLexical.ts b/src/importMarkdownToLexical.ts
index a4eb1400..b2ff26e4 100644
--- a/src/importMarkdownToLexical.ts
+++ b/src/importMarkdownToLexical.ts
@@ -1,13 +1,13 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import { ElementNode, LexicalNode, RootNode as LexicalRootNode } from 'lexical'
 import * as Mdast from 'mdast'
-import { fromMarkdown } from 'mdast-util-from-markdown'
+import { fromMarkdown, type Options } from 'mdast-util-from-markdown'
 import { toMarkdown } from 'mdast-util-to-markdown'
 import { ParseOptions } from 'micromark-util-types'
 import { IS_BOLD, IS_CODE, IS_ITALIC, IS_UNDERLINE } from './FormatConstants'
 
 /** @internal */
-export type MdastExtensions = NonNullable<Parameters<typeof fromMarkdown>[1]>['mdastExtensions']
+export type MdastExtensions = Options['mdastExtensions']
 /**
  * A set of actions that can be used to modify the lexical tree while visiting the mdast tree.
  */
diff --git a/src/styles/globals.css b/src/styles/globals.css
index a5bbc9c4..ce7e3180 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -8,6 +8,7 @@
 @import url('@radix-ui/colors/red.css');
 
 .mdxeditor {
+
   /** Code mirror */
   & .cm-editor {
     --sp-font-mono: var(--font-mono);
@@ -64,4 +65,9 @@
   & .cm-activeLine {
     background: transparent;
   }
+
+
+  hr[data-lexical-decorator=true].selected {
+    outline: 2px solid highlight;
+  }
 }
diff --git a/src/styles/lexical-theme.module.css b/src/styles/lexical-theme.module.css
index db6fed53..af7499d2 100644
--- a/src/styles/lexical-theme.module.css
+++ b/src/styles/lexical-theme.module.css
@@ -20,40 +20,40 @@
 }
 
 .bold {
-    font-weight: 700
+  font-weight: 700;
 }
 
 .italic {
-    font-style: italic
+  font-style: italic;
 }
 
 .underline {
-    text-decoration: underline
+  text-decoration: underline
 }
 
 .strikethrough {
-    text-decoration: line-through
+  text-decoration: line-through
 }
 
 .underlineStrikethrough {
-    text-decoration: underline line-through
+  text-decoration: underline line-through
 }
 
 .subscript {
-    font-size: .8em;
-    vertical-align: sub!important
+  font-size: .8em;
+  vertical-align: sub !important
 }
 
 .superscript {
-    font-size: .8em;
-    vertical-align: super
+  font-size: .8em;
+  vertical-align: super
 }
 
 .code {
-    background-color: var(--baseBg);
-    padding: 1px .25rem;
-    font-family: var(--font-mono);
-    font-size: 94%
+  background-color: var(--baseBg);
+  padding: 1px .25rem;
+  font-family: var(--font-mono);
+  font-size: 94%
 }
 
 .nestedListItem {
@@ -148,7 +148,11 @@
   display: none;
 }
 
-.admonitionDanger, .admonitionInfo, .admonitionNote, .admonitionTip, .admonitionCaution {
+.admonitionDanger,
+.admonitionInfo,
+.admonitionNote,
+.admonitionTip,
+.admonitionCaution {
   padding: var(--spacing-2);
   margin-top: var(--spacing-2);
   margin-bottom: var(--spacing-2);
@@ -160,6 +164,7 @@
   --admonitionBorder: var(--admonitionInfoBorder);
   --admonitionBg: var(--admonitionInfoBg);
 }
+
 .admonitionTip {
   --admonitionBorder: var(--admonitionTipBorder);
   --admonitionBg: var(--admonitionTipBg);