editor: add support for nn-search-result node

packages/editor/src/extensions/search-result/search-result.ts

@@ -0,0 +1,36 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import { Mark, mergeAttributes } from "@tiptap/core";
+
+export const SearchResult = Mark.create({
+  name: "search-result",
+
+  parseHTML() {
+    return [{ tag: "nn-search-result" }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "nn-search-result",
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+      0
+    ];
+  }
+});

packages/editor/src/index.ts

@@ -86,6 +86,7 @@ import { getChangedNodes } from "./utils/prosemirror.js";
 import { strings } from "@notesnook/intl";
 import { InlineCode } from "./extensions/inline-code/inline-code.js";
 import { FontLigature } from "./extensions/font-ligature/font-ligature.js";
+import { SearchResult } from "./extensions/search-result/search-result.js";
 
 interface TiptapStorage {
   dateFormat?: DateTimeOptions["dateFormat"];
@@ -362,7 +363,8 @@ const useTiptap = (
             }
           ]
         }),
-        FontLigature.configure({ enabled: enableFontLigatures })
+        FontLigature.configure({ enabled: enableFontLigatures }),
+        SearchResult.configure()
       ],
       onBeforeCreate: ({ editor }) => {
         editor.storage.dateFormat = dateFormat;

packages/editor/styles/styles.css

@@ -299,7 +299,8 @@ img.ProseMirror-separator {
 }
 
 .search-result.selected,
-.search-result.selected::selection {
+.search-result.selected::selection,
+nn-search-result {
   background-color: var(--accent-secondary) !important;
   color: var(--accentForeground-secondary) !important;
 }