Try (and fail) at highlighting

README.md

@@ -7,14 +7,15 @@
 - [ ] Anglish spelling (and Norse and French) iframes in the sidebar
 - [ ] Option menu to hide specific stuff in the searches
 - [ ] Ability to put in Thorn and Wynn, lowercase and uppercase, via buttons
+- [ ] Runes Translator
 
 ### Editor TODO
 
-* Function that takes the list of lemmas, gets their etymology and, if the
+- [ ] Function that takes the list of lemmas, gets their etymology and, if the
  etymology origin and sub-origin isn't present, add them to a list
-* When a chip is pressed, emit that word up and send it back to the dictionary
-* Colour chips depending on their etymology
-* Filter chips, depending on what origin(s) are selected
+- [x] When a chip is pressed, emit that word up and send it back to the dictionary
+- [ ] Colour chips depending on their etymology
+- [ ] Filter chips, depending on what origin(s) are selected
 
 ## TODO
 

package.json

@@ -9,13 +9,15 @@
  "lint": "eslint . --fix --ignore-path .gitignore"
  },
  "dependencies": {
+ "@leyton-techlab/vue-input-highlighter": "^0.0.6",
  "@mdi/font": "7.0.96",
  "core-js": "^3.29.0",
  "fuse.js": "^7.0.0",
  "pinia": "^2.0.0",
  "roboto-fontface": "*",
  "vue": "^3.2.0",
  "vue-router": "^4.0.0",
+ "vue3-highlight-input": "^1.0.11",
  "vuetify": "^3.0.0",
  "wink-lemmatizer": "^3.0.4"
  },

src/components/SearchResult.vue

@@ -397,6 +397,28 @@
  <div id="not-found">
  <p>We're sorry, but '{{ searchedWord }}' could not be found.</p>
 
+ <div v-if="getLemmatizedQuery()
+ && (getLemmatizedQuery()?.noun != searchedWord
+ || getLemmatizedQuery()?.verb != searchedWord
+ || getLemmatizedQuery()?.adjective != searchedWord)">
+ <p>Try this/these:</p>
+
+ <p v-if="getLemmatizedQuery()?.noun != searchedWord">
+ <b>Noun: </b>
+ {{ getLemmatizedQuery()?.noun }}
+ </p>
+
+ <p v-if="getLemmatizedQuery()?.verb != searchedWord">
+ <b>Verb: </b>
+ {{ getLemmatizedQuery()?.verb }}
+ </p>
+
+ <p v-if="getLemmatizedQuery()?.adjective != searchedWord">
+ <b>Adjective: </b>
+ {{ getLemmatizedQuery()?.adjective }}
+ </p>
+ </div>
+
  <p>Try to search using only a lemma/the dictionary form of words.</p>
 
  <p>
@@ -408,36 +430,6 @@
  "car" instead of "a car".
  </p>
 
- <div v-if="getLemmatizedQuery()
- && (getLemmatizedQuery()?.noun != searchedWord
- || getLemmatizedQuery()?.verb != searchedWord
- || getLemmatizedQuery()?.adjective != searchedWord)">
- <p>Try these lemmas:</p>
- <ul>
- <li v-if="getLemmatizedQuery()?.noun != searchedWord">
- <b>Noun: </b>
- <v-chip @click="router.push({
- path: '/search',
- query: { word: getLemmatizedQuery()?.noun
- } })">
- {{ getLemmatizedQuery()?.noun }}
- </v-chip>
- </li>
-
- <li v-if="getLemmatizedQuery()?.verb != searchedWord">
- <b>Verb: </b>
- <v-chip @click="searchedWord = getLemmatizedQuery()?.verb ?? ''">
- {{ getLemmatizedQuery()?.verb }}
- </v-chip>
- </li>
-
- <li v-if="getLemmatizedQuery()?.adjective != searchedWord">
- <b>Adjective: </b>
- {{ getLemmatizedQuery()?.adjective }}
- </li>
- </ul>
- </div>
-
  <p>
  Keep in mind regional spelling differences:
  <br/><br/>
@@ -475,6 +467,10 @@ const {
  etymologies,
 } = storeToRefs(store);
 
+const route = useRoute();
+// const router = useRouter();
+const instance = getCurrentInstance();
+
 // The default of these, if not passed down, will be false. This is intended
 // behaviour.
 const props = defineProps({
@@ -676,10 +672,6 @@ onMounted(async () => {
  // };
 });
 
-const route = useRoute();
-const router = useRouter();
-const instance = getCurrentInstance();
-
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 watch(route, (_to, _from) => {
  refreshSearch();

src/declarations.d.ts

@@ -1 +1,3 @@
 declare module 'wink-lemmatizer';
+declare module '@leyton-techlab/vue-input-highlighter';
+declare module 'vue3-highlight-input';

src/layouts/Editor.vue

@@ -10,6 +10,15 @@
  location="right"
  width="450"
  >
+ <v-text-field
+ label="Dictionary search"
+ style="overflow: hidden;"
+ v-model="dictionarySearch"
+ append-inner-icon="mdi-search"
+ @keydown.enter="lookupWord = dictionarySearch"
+ >
+ </v-text-field>
+
  <!-- Emit the value from the Editor view and then send it back down here as a prop? -->
  <search-result
  is-embedded
@@ -122,6 +131,7 @@ const {
  lookupWord,
  autoSort,
  autoAnalyse,
+ dictionarySearch,
 } = storeToRefs(store);
 
 </script>

src/main.ts

@@ -7,13 +7,21 @@
 // Plugins
 import { registerPlugins } from '@/plugins'
 
+import InputHighlighter from '@leyton-techlab/vue-input-highlighter';
+import '@leyton-techlab/vue-input-highlighter/style.css';
+
+import highlightInput from 'vue3-highlight-input';
+import 'vue3-highlight-input/style.css';
+
 // Components
 import App from './App.vue'
 
 // Composables
 import { createApp } from 'vue'
 
 const app = createApp(App)
+app.component("InputHighlighter", InputHighlighter);
+app.use(highlightInput);
 
 registerPlugins(app)
 

src/store/editor.ts

@@ -6,10 +6,12 @@ export const useEditorStore = defineStore("editor", () => {
 
  const autoSort = ref(false);
  const autoAnalyse = ref(false);
+ const dictionarySearch = ref("");
 
  return {
  lookupWord,
  autoSort,
  autoAnalyse,
+ dictionarySearch,
  }
 });

src/views/Editor.vue

@@ -2,12 +2,30 @@
  <v-container>
  <v-row justify="center">
  <v-col cols="12">
- <v-textarea
+ <!-- <v-textarea
  variant="outlined"
  counter
  v-model="rawText"
  >
- </v-textarea>
+ </v-textarea> -->
+
+ <!-- <input-highlighter
+ style="min-width: 700px; min-height: 300px;"
+ v-model="rawText"
+ :rules="rules"
+ placeholder=""
+ >
+ </input-highlighter> -->
+ <div>
+
+ <highlightInput
+ v-model="rawText"
+ :keywords="[lookupWord]"
+ color="#F56C6C"
+ class="editor-input"
+ >
+ </highlightInput>
+ </div>
  </v-col>
  </v-row>
 
@@ -85,6 +103,16 @@ const splitRawText = computed(() => {
  return [...new Set(words)];
 });
 
+// const rules = computed(() => {
+// return [
+// {
+// regex: new RegExp(`/${lookupWord.value}/`, "gim"),
+// class: "highlight",
+// tag: "span",
+// }
+// ];
+// });
+
 const store = useEditorStore();
 const {
  autoAnalyse,
@@ -103,3 +131,12 @@ function analyse() {
  console.log(`Split text: ${splitRawText.value}`);
 }
 </script>
+
+<style scoped>
+.editor-input {
+ min-height: 200px;
+ overflow-wrap: normal;
+ display: flex;
+ flex-grow: 1;
+}
+</style>