HAR-9619 Search and highlight matches

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",

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;
+}

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>

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;

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 = [];

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

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,
 }

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 {

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);