somewhat working set highlight

Author: samlhuillier

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

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,

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;