add text search

examples/Components/Routes/Search/index.vue

@@ -0,0 +1,256 @@
+<template>
+  <div class="editor">
+    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
+      <div class="menubar">
+
+        <button
+          class="menubar__button"
+          :class="{ 'is-active': isActive.bold() }"
+          @click="commands.bold"
+        >
+          <icon name="bold" />
+        </button>
+
+        <button
+          class="menubar__button"
+          :class="{ 'is-active': isActive.italic() }"
+          @click="commands.italic"
+        >
+          <icon name="italic" />
+        </button>
+
+        <button
+          class="menubar__button"
+          :class="{ 'is-active': isActive.strike() }"
+          @click="commands.strike"
+        >
+          <icon name="strike" />
+        </button>
+
+        <button
+          class="menubar__button"
+          :class="{ 'is-active': isActive.underline() }"
+          @click="commands.underline"
+        >
+          <icon name="underline" />
+        </button>
+
+        <button
+          class="menubar__button"
+          :class="{ 'is-active': isActive.code() }"
+          @click="commands.code"
+        >
+          <icon name="code" />
+        </button>
+
+        <button
+          class="menubar__button"
+          :class="{ 'is-active': isActive.paragraph() }"
+          @click="commands.paragraph"
+        >
+          <icon name="paragraph" />
+        </button>
+
+        <button
+          class="menubar__button"
+          :class="{ 'is-active': isActive.heading({ level: 1 }) }"
+          @click="commands.heading({ level: 1 })"
+        >
+          H1
+        </button>
+
+        <button
+          class="menubar__button"
+          :class="{ 'is-active': isActive.bullet_list() }"
+          @click="commands.bullet_list"
+        >
+          <icon name="ul" />
+        </button>
+
+        <button
+          class="menubar__button"
+          :class="{ 'is-active': isActive.ordered_list() }"
+          @click="commands.ordered_list"
+        >
+          <icon name="ol" />
+        </button>
+
+        <button
+          class="menubar__button"
+          :class="{ 'is-active': isActive.blockquote() }"
+          @click="commands.blockquote"
+        >
+          <icon name="quote" />
+        </button>
+
+        <button
+          class="menubar__button"
+          :class="{ 'is-active': isActive.code_block() }"
+          @click="commands.code_block"
+        >
+          <icon name="code" />
+        </button>
+
+        <button
+          class="menubar__button"
+          @click="commands.undo"
+        >
+          <icon name="undo" />
+        </button>
+
+        <button
+          class="menubar__button"
+          @click="commands.redo"
+        >
+          <icon name="redo" />
+        </button>
+
+        <button
+            class="menubar__button"
+            @click="toggleSearch"
+        >
+          Search
+          <div
+              class="search-modal"
+              @click.stop
+              v-if="editor.extensions.options.search.searching"
+          >
+            <input
+                ref="search"
+                @keydown.enter.prevent="editor.commands.find(searchTerm)"
+                placeholder="Search..."
+                type="text"
+                v-model="searchTerm"
+            >
+            <button @click="editor.commands.find(searchTerm)">Find</button>
+          </div>
+        </button>
+
+      </div>
+    </editor-menu-bar>
+
+    <editor-content class="editor__content" :editor="editor" />
+  </div>
+</template>
+
+<script>
+import Icon from 'Components/Icon'
+import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
+import {
+  Blockquote,
+  CodeBlock,
+  HardBreak,
+  Heading,
+  HorizontalRule,
+  OrderedList,
+  BulletList,
+  ListItem,
+  TodoItem,
+  TodoList,
+  Bold,
+  Code,
+  Italic,
+  Link,
+  Strike,
+  Underline,
+  History,
+  Search,
+} from 'tiptap-extensions'
+
+export default {
+  components: {
+    EditorContent,
+    EditorMenuBar,
+    Icon,
+  },
+  methods: {
+    toggleSearch() {
+      this.editor.commands.toggleSearch()
+      this.$nextTick(() => {
+        if (this.$refs.search) {
+          this.$refs.search.focus()
+        }
+      })
+    },
+  },
+  data() {
+    return {
+      searching: false,
+      searchTerm: null,
+      editor: new Editor({
+        extensions: [
+          new Blockquote(),
+          new BulletList(),
+          new CodeBlock(),
+          new HardBreak(),
+          new Heading({ levels: [1, 2, 3] }),
+          new HorizontalRule(),
+          new Search(),
+          new ListItem(),
+          new OrderedList(),
+          new TodoItem(),
+          new TodoList(),
+          new Link(),
+          new Bold(),
+          new Code(),
+          new Italic(),
+          new Strike(),
+          new Underline(),
+          new History(),
+        ],
+        onUpdate: ({ getJSON }) => {
+          this.json = getJSON()
+        },
+        content: `
+          <h2>
+            Hi there,
+          </h2>
+          <p>
+            this is a very <em>basic</em> example of tiptap.
+          </p>
+          <pre><code>body { display: none; }</code></pre>
+          <ul>
+            <li>
+              A regular list
+            </li>
+            <li>
+              With regular items
+            </li>
+          </ul>
+          <blockquote>
+            It's amazing 👏
+            <br />
+            – mom
+          </blockquote>
+        `,
+      }),
+    }
+  },
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style>
+  .menubar__button {
+    position: relative;
+  }
+
+  .search-modal {
+    position: absolute;
+    top: 100%;
+    display: flex;
+    background: #fff;
+    padding: .5em;
+    box-shadow: 0 2px 4px #0003;
+    border-radius: 2px;
+    left: 0;
+    margin-top: 0.25em;
+    border: solid 2px;
+  }
+
+  .find {
+    background: rgba(255, 213, 0, 0.5);
+  }
+</style>

examples/Components/Subnavigation/index.vue

@@ -24,6 +24,9 @@
     <router-link class="subnavigation__link" to="/tables">
       Tables
     </router-link>
+    <router-link class="subnavigation__link" to="/search">
+      Search
+    </router-link>
     <router-link class="subnavigation__link" to="/suggestions">
       Suggestions
     </router-link>

examples/main.js

@@ -68,6 +68,13 @@ const routes = [
       githubUrl: 'https://github.com/scrumpy/tiptap/tree/master/examples/Components/Routes/TodoList',
     },
   },
+  {
+    path: '/search',
+    component: () => import('Components/Routes/Search'),
+    meta: {
+      githubUrl: 'https://github.com/scrumpy/tiptap/tree/master/examples/Components/Routes/Search',
+    },
+  },
   {
     path: '/suggestions',
     component: () => import('Components/Routes/Suggestions'),

packages/tiptap-extensions/src/extensions/Search.js

@@ -0,0 +1,109 @@
+import { Extension, Plugin } from 'tiptap'
+import { Decoration, DecorationSet } from 'prosemirror-view'
+
+export default class Search extends Extension {
+
+  constructor(options = {}) {
+    super(options)
+
+    this.results = []
+    this.searchTerm = null
+  }
+
+  get name() {
+    return 'search'
+  }
+
+  get defaultOptions() {
+    return {
+      autoSelectNext: true,
+      findClass: 'find',
+      searching: false,
+      caseSensitive: false,
+    }
+  }
+
+  toggleSearch() {
+    return () => {
+      this.options.searching = !this.options.searching
+      return true
+    }
+  }
+
+  keys() {
+    return {
+      'Mod-f': this.toggleSearch(),
+    }
+  }
+
+  commands() {
+    return {
+      find: attrs => this.find(attrs),
+      toggleSearch: () => this.toggleSearch(),
+    }
+  }
+
+  get findRegExp() {
+    return RegExp(this.searchTerm, !this.options.caseSensitive ? 'gi' : 'g')
+  }
+
+  get decorations() {
+    return this.results.map(deco => (
+        Decoration.inline(deco.from, deco.to, { class: this.options.findClass })
+    ))
+  }
+
+  _search(doc) {
+    this.results = []
+
+    if (!this.searchTerm) {
+      return
+    }
+
+    const search = this.findRegExp
+
+    doc.descendants((node, pos) => {
+      if (node.isText) {
+        let m
+        while (m = search.exec(node.text)) {
+          this.results.push({
+            from: pos + m.index,
+            to: pos + m.index + m[0].length,
+          })
+        }
+      }
+    })
+  }
+
+  find(searchTerm) {
+    return ({ doc, tr }, dispatch) => {
+      this.options.searching = true
+      this.searchTerm = searchTerm
+
+      this._search(doc)
+
+      dispatch(tr)
+    }
+  }
+
+  createDeco(doc) {
+    return this.decorations ? DecorationSet.create(doc, this.decorations) : []
+  }
+
+  get plugins() {
+    return [
+      new Plugin({
+        state: {
+          init: (_, { doc }) => this.createDeco(doc),
+          apply: (tr, old) => (
+            (tr.docChanged || this.options.searching) ? this.createDeco(tr.doc) : old
+          ),
+        },
+        props: {
+          decorations(state) { return this.getState(state) },
+        },
+      }),
+    ]
+  }
+
+}

packages/tiptap-extensions/src/index.js

@@ -26,6 +26,7 @@ export { default as Underline } from './marks/Underline'
 export { default as Collaboration } from './extensions/Collaboration'
 export { default as History } from './extensions/History'
 export { default as Placeholder } from './extensions/Placeholder'
+export { default as Search } from './extensions/Search'
 
 export { default as Suggestions } from './plugins/Suggestions'
 export { default as Highlight } from './plugins/Highlight'