mirror of
https://github.com/ueberdosis/tiptap.git
synced 2024-12-14 18:49:02 +08:00
add text search
This commit is contained in:
Chrissi2812
parent
c8fa0c69b3
commit
fc617a4d32
256
examples/Components/Routes/Search/index.vue
Normal file
256
examples/Components/Routes/Search/index.vue
Normal file
@ -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>
|
||||
@ -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>
|
||||
|
||||
@ -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'),
|
||||
|
||||
109
packages/tiptap-extensions/src/extensions/Search.js
Normal file
109
packages/tiptap-extensions/src/extensions/Search.js
Normal file
@ -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) },
|
||||
},
|
||||
}),
|
||||
]
|
||||
}
|
||||
|
||||
}
|
||||
@ -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'
|
||||
|
||||
Loading…
Reference in New Issue
Block a user