From d9c97fdb737b3e02536179f3a8a591b8428e6482 Mon Sep 17 00:00:00 2001
From: VladaHarbour <dataart.vladyslava@harbourcollaborators.com>
Date: Tue, 13 May 2025 17:07:22 +0300
Subject: [PATCH] HAR-9619 Search and highlight matches

---
 package-lock.json                             | 13 ++-
 packages/super-editor/package.json            |  1 +
 .../assets/styles/elements/prosemirror.css    |  7 ++
 .../src/components/toolbar/SearchInput.vue    | 82 +++++++++++++++++++
 .../src/components/toolbar/Toolbar.vue        | 18 +++-
 .../src/components/toolbar/defaultItems.js    | 54 ++++++++----
 .../src/components/toolbar/super-toolbar.js   |  4 +
 .../src/components/toolbar/toolbarIcons.js    |  2 +
 .../components/toolbar/use-toolbar-item.js    |  5 +-
 packages/super-editor/src/core/Editor.js      | 38 ++++++++-
 shared/common/icons/magnifying-glass.svg      |  1 +
 11 files changed, 202 insertions(+), 23 deletions(-)
 create mode 100644 packages/super-editor/src/components/toolbar/SearchInput.vue
 create mode 100644 shared/common/icons/magnifying-glass.svg

diff --git a/package-lock.json b/package-lock.json
index 7cebf71a09..92bbb03624 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7790,6 +7790,16 @@
         "prosemirror-transform": "^1.7.3"
       }
     },
+    "node_modules/prosemirror-search": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-search/-/prosemirror-search-1.1.0.tgz",
+      "integrity": "sha512-hnGINlrRs+St6scaF4hoGiR8b7V0ffddzvO/zy+ON8RwvVinfLk4rVsuSztLNthgvfE2LAOU4blsPr7yoeoLOQ==",
+      "dependencies": {
+        "prosemirror-model": "^1.21.0",
+        "prosemirror-state": "^1.4.3",
+        "prosemirror-view": "^1.33.6"
+      }
+    },
     "node_modules/prosemirror-state": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.4.3.tgz",
@@ -10809,6 +10819,7 @@
         "prosemirror-model": "^1.21.0",
         "prosemirror-schema-basic": "^1.2.2",
         "prosemirror-schema-list": "^1.3.0",
+        "prosemirror-search": "^1.1.0",
         "prosemirror-state": "^1.4.3",
         "prosemirror-tables": "^1.4.0",
         "prosemirror-transform": "^1.9.0",
@@ -11145,7 +11156,7 @@
     },
     "packages/superdoc": {
       "name": "@harbour-enterprises/superdoc",
-      "version": "0.9.1",
+      "version": "0.10.64",
       "license": "AGPL-3.0",
       "dependencies": {
         "buffer-crc32": "^1.0.0",
diff --git a/packages/super-editor/package.json b/packages/super-editor/package.json
index 2d4bc38dd8..efd232a221 100644
--- a/packages/super-editor/package.json
+++ b/packages/super-editor/package.json
@@ -58,6 +58,7 @@
     "prosemirror-model": "^1.21.0",
     "prosemirror-schema-basic": "^1.2.2",
     "prosemirror-schema-list": "^1.3.0",
+    "prosemirror-search": "^1.1.0",
     "prosemirror-state": "^1.4.3",
     "prosemirror-tables": "^1.4.0",
     "prosemirror-transform": "^1.9.0",
diff --git a/packages/super-editor/src/assets/styles/elements/prosemirror.css b/packages/super-editor/src/assets/styles/elements/prosemirror.css
index eb7f7287b0..4c53773874 100644
--- a/packages/super-editor/src/assets/styles/elements/prosemirror.css
+++ b/packages/super-editor/src/assets/styles/elements/prosemirror.css
@@ -317,3 +317,10 @@ https://github.com/ProseMirror/prosemirror-tables/blob/master/demo/index.html
   align-items: baseline;
   margin-top: -5px;
 }
+
+.ProseMirror-search-match {
+  background-color: #ffff0054;
+}
+.ProseMirror-active-search-match {
+  background-color: #ff6a0054;
+}
diff --git a/packages/super-editor/src/components/toolbar/SearchInput.vue b/packages/super-editor/src/components/toolbar/SearchInput.vue
new file mode 100644
index 0000000000..27fa7227d3
--- /dev/null
+++ b/packages/super-editor/src/components/toolbar/SearchInput.vue
@@ -0,0 +1,82 @@
+<script setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+  searchRef: {
+    type: Object,
+  }
+})
+
+const searchValue = ref('');
+const emit = defineEmits(['submit']);
+
+const handleSubmit = () => {
+  emit('submit', { value: searchValue.value });
+};
+</script>
+
+<template>
+  <div class="search-input-ctn">
+    <div class="row">
+      <input
+        :ref="searchRef"
+        v-model="searchValue"
+        class="search-input"
+        type="text"
+        name="search"
+        placeholder="Type search string"
+        @keydown.enter.stop.prevent="handleSubmit"
+      />
+    </div>
+    <div class="row submit">
+      <button class="submit-btn" @click="handleSubmit">
+        Apply
+      </button>
+    </div>
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.search-input-ctn {
+  padding: 10px;
+  border-radius: 5px;
+  .search-input {
+    min-width: 200px;
+    font-size: 13px;
+    flex-grow: 1;
+    padding: 10px;
+    border-radius: 8px;
+    color: #666;
+    border: 1px solid #ddd;
+    box-sizing: border-box;
+    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .15);
+    &:active, &:focus {
+      outline: none;
+      border: 1px solid #1355ff;
+    }
+  }
+  .row {
+    display: flex;
+    &.submit {
+      margin-top: 10px;
+      flex-direction: row-reverse;
+    }
+  }
+  .submit-btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 10px 16px;
+    border-radius: 8px;
+    outline: none;
+    border: none;
+    background-color: #1355ff;
+    color: white;
+    font-weight: 400;
+    font-size: 13px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    box-sizing: border-box;
+  }
+}
+</style>
diff --git a/packages/super-editor/src/components/toolbar/Toolbar.vue b/packages/super-editor/src/components/toolbar/Toolbar.vue
index 3d7bd7b9dd..034738e0a1 100644
--- a/packages/super-editor/src/components/toolbar/Toolbar.vue
+++ b/packages/super-editor/src/components/toolbar/Toolbar.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, getCurrentInstance, onMounted, onDeactivated } from 'vue';
+import { ref, getCurrentInstance, onMounted, onDeactivated, nextTick } from 'vue';
 import { throttle } from './helpers.js';
 import ButtonGroup from './ButtonGroup.vue';
 
@@ -18,12 +18,28 @@ const getFilteredItems = (position) => {
 
 onMounted(() => {
   window.addEventListener('resize', onResizeThrottled);
+  window.addEventListener('keydown', onKeyDown);
 });
 
 onDeactivated(() => {
   window.removeEventListener('resize', onResizeThrottled);
+  window.removeEventListener('keydown', onKeyDown);
 });
 
+const onKeyDown = async (e) => {
+  if (e.metaKey && e.key === 'f') {
+    e.preventDefault();
+    const searchItem = proxy.$toolbar.getToolbarItemByName('search');
+    if (searchItem) {
+      searchItem.expand.value = true;
+      await nextTick();
+      if (searchItem.inputRef.value) {
+        searchItem.inputRef.value.focus();
+      }
+    }
+  }
+}
+
 const onWindowResized = async () => {
   await proxy.$toolbar.onToolbarResize();
   toolbarKey.value += 1;
diff --git a/packages/super-editor/src/components/toolbar/defaultItems.js b/packages/super-editor/src/components/toolbar/defaultItems.js
index 24994226a1..c8c7dd8c06 100644
--- a/packages/super-editor/src/components/toolbar/defaultItems.js
+++ b/packages/super-editor/src/components/toolbar/defaultItems.js
@@ -1,5 +1,5 @@
 import { undoDepth, redoDepth } from 'prosemirror-history';
-import { h } from 'vue';
+import { h, ref } from 'vue';
 
 import { scrollToElement } from './scroll-helpers';
 import { sanitizeNumber } from './helpers';
@@ -14,6 +14,7 @@ import TableGrid from './TableGrid.vue';
 import TableActions from './TableActions.vue';
 
 import checkIconSvg from '@harbour-enterprises/common/icons/check.svg?raw';
+import SearchInput from './SearchInput.vue';
 
 const closeDropdown = (dropdown) => {
   dropdown.expand.value = false;
@@ -257,6 +258,39 @@ export const makeDefaultItems = (superToolbar, isDev = false, windowWidth, role,
     },
     onDeactivate: () => (colorButton.iconColor.value = '#000'),
   });
+  
+  // search
+  const searchRef = ref(null);
+  const search = useToolbarItem({
+    type: 'dropdown',
+    name: 'search',
+    active: false,
+    icon: toolbarIcons.search,
+    tooltip: 'Search',
+    group: 'right',
+    inputRef: searchRef,
+    options: [
+      {
+        type: 'render',
+        key: 'searchDropdown',
+        render: () => renderSearchDropdown(),
+      },
+    ],
+  });
+  
+  const renderSearchDropdown = () => {
+    
+    const handleSubmit = ({ value }) => {
+      superToolbar.activeEditor.doSearch(value);
+    };
+    
+    return h('div', {}, [
+      h(SearchInput, {
+        onSubmit: handleSubmit,
+        searchRef,
+      }),
+    ]);
+  };
 
   // link
   const link = useToolbarItem({
@@ -669,18 +703,6 @@ export const makeDefaultItems = (superToolbar, isDev = false, windowWidth, role,
     icon: toolbarIcons.trackChangesFinal,
     group: 'left',
   });
-  //
-
-  // search
-  // const search = useToolbarItem({
-  //   type: "button",
-  //   allowWithoutEditor: true,
-  //   name: "search",
-  //   tooltip: "Search",
-  //   disabled: true,
-  //   icon: "fas fa-magnifying-glass", // change to svg
-  //   group: "right",
-  // });
 
   const clearFormatting = useToolbarItem({
     type: 'button',
@@ -696,7 +718,7 @@ export const makeDefaultItems = (superToolbar, isDev = false, windowWidth, role,
     underline,
     indentRight,
     indentLeft,
-    // search,
+    search,
     overflow,
   ].map((item) => item.name);
 
@@ -942,7 +964,7 @@ export const makeDefaultItems = (superToolbar, isDev = false, windowWidth, role,
     aiButton,
     overflow,
     documentMode,
-    // search,
+    search,
   ];
 
   if (!superToolbar.config?.superdoc?.config?.modules?.ai) {
@@ -978,7 +1000,7 @@ export const makeDefaultItems = (superToolbar, isDev = false, windowWidth, role,
   }
 
   // always visible items
-  const toolbarItemsSticky = [undo, overflow, documentMode].map((item) => item.name);
+  const toolbarItemsSticky = [search, undo, overflow, documentMode].map((item) => item.name);
   const isStickyItem = (item) => toolbarItemsSticky.includes(item.name);
 
   const overflowItems = [];
diff --git a/packages/super-editor/src/components/toolbar/super-toolbar.js b/packages/super-editor/src/components/toolbar/super-toolbar.js
index 42b466cc39..369e1ab272 100644
--- a/packages/super-editor/src/components/toolbar/super-toolbar.js
+++ b/packages/super-editor/src/components/toolbar/super-toolbar.js
@@ -271,6 +271,10 @@ export class SuperToolbar extends EventEmitter {
   getToolbarItemByGroup(groupName) {
     return this.toolbarItems.filter((item) => item.group.value === groupName);
   }
+  
+  getToolbarItemByName(name) {
+    return this.toolbarItems.find((item) => item.name.value === name);
+  }
 
   #makeToolbarItems(superToolbar, icons, isDev = false) {
     const documentWidth = document.documentElement.clientWidth; // take into account the scrollbar
diff --git a/packages/super-editor/src/components/toolbar/toolbarIcons.js b/packages/super-editor/src/components/toolbar/toolbarIcons.js
index 45fb7c2acb..723bb9c3e4 100644
--- a/packages/super-editor/src/components/toolbar/toolbarIcons.js
+++ b/packages/super-editor/src/components/toolbar/toolbarIcons.js
@@ -44,6 +44,7 @@ import trashIconSvg from '@harbour-enterprises/common/icons/trash-can-solid.svg?
 import wrenchIconSvg from '@harbour-enterprises/common/icons/wrench-solid.svg?raw';
 import borderNoneIconSvg from '@harbour-enterprises/common/icons/border-none-solid.svg?raw';
 import upDownIconSvg from '@harbour-enterprises/common/icons/up-down.svg?raw';
+import magnifyingGlassSvg from '@harbour-enterprises/common/icons/magnifying-glass.svg?raw';
 
 export const toolbarIcons = {
   undo: rotateLeftIconSvg,
@@ -100,4 +101,5 @@ export const toolbarIcons = {
   deleteBorders: borderNoneIconSvg,
   fixTables: wrenchIconSvg,
   lineHeight: upDownIconSvg,
+  search: magnifyingGlassSvg,
 }
diff --git a/packages/super-editor/src/components/toolbar/use-toolbar-item.js b/packages/super-editor/src/components/toolbar/use-toolbar-item.js
index d3c66bd304..a7faa8b118 100644
--- a/packages/super-editor/src/components/toolbar/use-toolbar-item.js
+++ b/packages/super-editor/src/components/toolbar/use-toolbar-item.js
@@ -66,6 +66,8 @@ export const useToolbarItem = (options) => {
   // Dropdown item
   const selectedValue = ref(options.selectedValue);
   const dropdownValueKey = ref(options.dropdownValueKey);
+  
+  const inputRef = ref(options.inputRef || null);
 
   const nestedOptions = ref([]);
   if (options.options) {
@@ -145,7 +147,8 @@ export const useToolbarItem = (options) => {
 
     allowWithoutEditor,
     dropdownValueKey,
-    selectedValue
+    selectedValue,
+    inputRef
   };
 
   return {
diff --git a/packages/super-editor/src/core/Editor.js b/packages/super-editor/src/core/Editor.js
index 40a385ec49..1472be4c31 100644
--- a/packages/super-editor/src/core/Editor.js
+++ b/packages/super-editor/src/core/Editor.js
@@ -1,6 +1,7 @@
 import { EditorState } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
 import { DOMParser, DOMSerializer } from 'prosemirror-model';
+import { search, SearchQuery, setSearchState, getMatchHighlights } from 'prosemirror-search';
 import { yXmlFragmentToProseMirrorRootNode } from 'y-prosemirror';
 import { EventEmitter } from './EventEmitter.js';
 import { ExtensionService } from './ExtensionService.js';
@@ -183,7 +184,7 @@ export class Editor extends EventEmitter {
     if (!this.options.ydoc) {
       this.#initPagination();
       this.#initComments();
-    };
+    }
 
     window.setTimeout(() => {
       if (this.isDestroyed) return;
@@ -194,7 +195,7 @@ export class Editor extends EventEmitter {
   #initRichText(options) {
     if (!options.extensions || !options.extensions.length) {
       this.options.extensions = getRichTextExtensions();
-    };
+    }
 
     this.#createExtensionService();
     this.#createCommandService();
@@ -228,6 +229,30 @@ export class Editor extends EventEmitter {
     this.options.onFocus({ editor, event });
   }
 
+  goToFirstMatch() {
+    const highlights = getMatchHighlights(this.view.state);
+    if (!highlights || !highlights.children?.length) return;
+    
+    const match = highlights.children.find(item => item.local);
+    const firstSearchItemPosition = highlights.children[0] + match.local[0].from + 1;
+    this.view.domAtPos(firstSearchItemPosition)?.node?.scrollIntoView(true);
+  }
+  
+  doSearch(text) {
+    const query = new SearchQuery({
+      search: text,
+      caseSensitive: false,
+      regexp: false,
+      wholeWord: false 
+    });
+    const tr = this.view.state.tr;
+    setSearchState(tr, query);
+    this.view.dispatch(tr);
+
+    this.goToFirstMatch();
+    return getMatchHighlights(this.view.state);
+  }
+
   setToolbar(toolbar) {
     this.toolbar = toolbar;
   }
@@ -641,9 +666,14 @@ export class Editor extends EventEmitter {
       dispatchTransaction: this.#dispatchTransaction.bind(this),
       state: EditorState.create(state),
     });
-
+    
+    const searchPlugin = search();
+    
     const newState = this.state.reconfigure({
-      plugins: this.extensionService.plugins,
+      plugins: [
+        ...this.extensionService.plugins,
+        searchPlugin,
+      ],
     });
 
     this.view.updateState(newState);
diff --git a/shared/common/icons/magnifying-glass.svg b/shared/common/icons/magnifying-glass.svg
new file mode 100644
index 0000000000..7ddd33251a
--- /dev/null
+++ b/shared/common/icons/magnifying-glass.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>