From 79b5523670550ebe6aac5a0b43c7d22e1a527ff7 Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Sun, 17 Nov 2024 14:09:50 +0000
Subject: [PATCH] somewhat working set highlight

---
 .../Editor/Extensions/CustomHighlight.tsx     | 25 +++++++++++++++++++
 src/contexts/FileContext.tsx                  |  2 ++
 src/styles/global.css                         | 13 +++++++++-
 3 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Editor/Extensions/CustomHighlight.tsx

diff --git a/src/components/Editor/Extensions/CustomHighlight.tsx b/src/components/Editor/Extensions/CustomHighlight.tsx
new file mode 100644
index 00000000..b0ec991c
--- /dev/null
+++ b/src/components/Editor/Extensions/CustomHighlight.tsx
@@ -0,0 +1,25 @@
+// ... existing imports ...
+import { Extension } from '@tiptap/core'
+
+// Add this custom extension configuration before the EditorManager component
+const CustomHighlight = Extension.create({
+  name: 'customHighlight',
+  addGlobalAttributes() {
+    return [
+      {
+        types: ['highlight'],
+        attributes: {
+          class: {
+            default: 'selection-highlight',
+            parseHTML: () => 'selection-highlight',
+            renderHTML: () => ({
+              class: 'selection-highlight',
+            }),
+          },
+        },
+      },
+    ]
+  },
+})
+
+export default CustomHighlight
diff --git a/src/contexts/FileContext.tsx b/src/contexts/FileContext.tsx
index e14dd16c..037beb09 100644
--- a/src/contexts/FileContext.tsx
+++ b/src/contexts/FileContext.tsx
@@ -37,6 +37,7 @@ import getMarkdown from '@/components/Editor/utils'
 import useOrderedSet from '../lib/hooks/use-ordered-set'
 import welcomeNote from '@/lib/welcome-note'
 import ClearFormattingExtension from '@/components/Editor/Extensions/FormattingExtension'
+import CustomHighlight from '@/components/Editor/Extensions/CustomHighlight'
 
 type FileContextType = {
   vaultFilesTree: FileInfoTree
@@ -169,6 +170,7 @@ export const FileProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
       TableHeader,
       TableCell,
       TextStyle,
+      CustomHighlight,
       SearchAndReplace.configure({
         searchResultClass: 'bg-yellow-400',
         disableRegex: false,
diff --git a/src/styles/global.css b/src/styles/global.css
index a32f9334..67525d3e 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -190,7 +190,18 @@ button {
   /* Adjust day cell size */
 }
 
-/* AI Edit highlight styles */
+/* Add this before the @layer base section */
+.tiptap mark.selection-highlight {
+  background: rgba(66, 135, 245, 0.4) !important;
+  color: inherit !important;
+  border-radius: 0 !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  -webkit-user-select: none !important;
+  user-select: none !important;
+}
+
+/* You can remove or comment out the existing AI edit highlight styles */
 /* .tiptap .ai-edit-highlight {
   background-color: pink; 
   border-radius: 2px;