contexted link highlight + adjust prettier

2023-04-30 16:57:50 +02:00
parent 2ff849219b
commit 8db4583b0b
11 changed files with 53 additions and 74 deletions
--- a/.prettierrc
+++ b/.prettierrc
@@ -3,6 +3,8 @@
  "useTabs": false,
  "semi": false,
  "singleQuote": true,
+  "printWidth": 88,
+  "htmlWhitespaceSensitivity": "ignore",
  "plugins": [
    "prettier-plugin-tailwindcss"
  ]
--- a/2
+++ b/2
@@ -0,0 +1,2 @@
+pretty:
+	npx prettier --write "./src/**/*.(ts|vue)"
--- a/src/ckeditor/CKEditor.ts
+++ b/src/ckeditor/CKEditor.ts
@@ -56,15 +56,7 @@ export default defineComponent({
    },
  },

-  emits: [
-    'ready',
-    'destroy',
-    'blur',
-    'focus',
-    'input',
-    'update:modelValue',
-    'click',
-  ],
+  emits: ['ready', 'destroy', 'blur', 'focus', 'input', 'update:modelValue', 'click'],

  data(): CKEditorComponentData {
    return {
--- a/src/ckeditor/ContextedPlugin.ts
+++ b/src/ckeditor/ContextedPlugin.ts
@@ -1,9 +1,16 @@
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin'
+import { TwoStepCaretMovement, inlineHighlight } from 'ckeditor5/src/typing'
+
+const HIGHLIGHT_CLASS = 'ck-link_selected'

 export default class ContextedLinkEditing extends Plugin {
  init() {
    this._defineSchema() // ADDED
    this._defineConverters() // ADDED
+    const twoStepCaretMovementPlugin = this.editor.plugins.get(TwoStepCaretMovement)
+    twoStepCaretMovementPlugin.registerAttribute('contextedLink')
+
+    inlineHighlight(this.editor, 'contextedLink', 'a', HIGHLIGHT_CLASS)
  }
  _defineSchema() {
    // ADDED
--- a/src/components/Note.vue
+++ b/src/components/Note.vue
@@ -32,12 +32,14 @@ const references = computed<Note[]>(() => {
 </script>
 <template>
  <div class="flex flex-col">
-    <h1 class="mb-2 flex items-center rounded-md font-semibold text-3xl hover:bg-gray-200">
+    <h1
+      class="mb-2 flex items-center rounded-md text-3xl font-semibold hover:bg-gray-200"
+    >
      <i
        class="fas fa-fw fa-home mr-2 text-base text-secondary opacity-40"
        v-if="props.note.isRoot"
-      ></i
-      ><input
+      ></i>
+      <input
        type="text"
        class="flex-1 bg-transparent py-1 outline-none"
        v-model="noteTitle"
@@ -52,25 +54,23 @@ const references = computed<Note[]>(() => {
      <div class="card-body px-3 py-3">
        <ul class="menu rounded-md">
          <li class="menu-title !opacity-100">
-            <span class="card-title text-secondary"
-              >References
+            <span class="card-title text-secondary">
+              References
              <div class="badge-outline badge">{{ references.length }}</div>
            </span>
          </li>
          <li v-for="reference in references">
-            <a class="rounded-md" @click="activeNote = reference"
-              ><i class="far fa-file-alt fa-fw" />{{ reference.title }}</a
-            >
+            <a class="rounded-md" @click="activeNote = reference">
+              <i class="far fa-file-alt fa-fw" />
+              {{ reference.title }}
+            </a>
          </li>
        </ul>
      </div>
    </div>
    <hr class="my-3" />
    <div class="flex text-sm text-secondary">
-      <span
-        >{{ note.wordCount }}
-        {{ note.wordCount === 1 ? 'word' : 'words' }}</span
-      >
+      <span>{{ note.wordCount }} {{ note.wordCount === 1 ? 'word' : 'words' }}</span>
      <span class="ml-auto">Last modified {{ formatDate(note.modified) }}</span>
    </div>
  </div>
--- a/src/components/SearchBar.vue
+++ b/src/components/SearchBar.vue
@@ -28,9 +28,7 @@ const activeResult = ref<Note>()
 const handleKeydown = (event: KeyboardEvent) => {
  const code = event.code
  if (['ArrowUp', 'ArrowDown', 'Tab'].includes(code)) {
-    let index = results.value.findIndex(
-      (note) => note.id === activeResult.value?.id
-    )
+    let index = results.value.findIndex((note) => note.id === activeResult.value?.id)
    if (['ArrowDown', 'Tab'].includes(code)) {
      index++
    } else if (['ArrowUp'].includes(code)) {
@@ -59,19 +57,12 @@ const handleKeydown = (event: KeyboardEvent) => {
      ref="queryElem"
      @keydown="handleKeydown"
    />
-    <div
-      class="z-1000 dropdown absolute left-0 right-0 top-[100%]"
-      v-if="active"
-    >
+    <div class="z-1000 dropdown absolute left-0 right-0 top-[100%]" v-if="active">
      <ul
        tabindex="0"
        class="menu mt-1 w-full rounded-md bg-base-100 p-2 text-black shadow"
      >
-        <li
-          v-for="result in results"
-          v-if="results.length > 0"
-          class="flex flex-row"
-        >
+        <li v-for="result in results" v-if="results.length > 0" class="flex flex-row">
          <a
            class="flex-1 items-center px-2 py-1"
            @click.stop.prevent="() => goToNote(result)"
@@ -84,11 +75,12 @@ const handleKeydown = (event: KeyboardEvent) => {
            <span
              class="badge-ghost badge badge-sm mr-0.5"
              v-if="activeNote?.id === result.id"
-              >current</span
            >
-            <span class="flex-1">{{ result.title }} </span>
-            <span>{{ formatDate(result.modified) }}</span></a
-          >
+              current
+            </span>
+            <span class="flex-1">{{ result.title }}</span>
+            <span>{{ formatDate(result.modified) }}</span>
+          </a>
        </li>
        <li v-else><a>No notes found</a></li>
      </ul>
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -20,11 +20,9 @@ const emit = defineEmits<{
    <SideBarMenu>
      <template #header>Root note</template>
      <template #items>
-        <SideBarMenuItem
-          icon="fas fa-fw fa-home"
-          @click="activeNote = rootNote"
-          >{{ rootNote?.title }}</SideBarMenuItem
-        >
+        <SideBarMenuItem icon="fas fa-fw fa-home" @click="activeNote = rootNote">
+          {{ rootNote?.title }}
+        </SideBarMenuItem>
      </template>
    </SideBarMenu>
    <SideBarMenu>
@@ -35,21 +33,24 @@ const emit = defineEmits<{
          :icon="viewMode.icon"
          :active="viewMode.name === activeViewMode.name"
          @click="emit('setViewMode', viewMode)"
-          >{{ viewMode.name }}</SideBarMenuItem
        >
+          {{ viewMode.name }}
+        </SideBarMenuItem>
      </template>
    </SideBarMenu>
    <SideBarMenu>
-      <template #header
-        ><i class="far fa-clock fa-fw mr-2" />Recent notes</template
-      >
+      <template #header>
+        <i class="far fa-clock fa-fw mr-2" />
+        Recent notes
+      </template>
      <template #items>
        <SideBarMenuItem
          v-for="note in notes"
          icon="far fa-file-alt fa-fw"
          @click="activeNote = note"
-          >{{ note.title }}</SideBarMenuItem
        >
+          {{ note.title }}
+        </SideBarMenuItem>
      </template>
    </SideBarMenu>
  </div>
--- a/src/components/SideBar/SideBarMenuItem.vue
+++ b/src/components/SideBar/SideBarMenuItem.vue
@@ -9,6 +9,7 @@ const props = defineProps<{
    class="mt-1 block w-full cursor-pointer rounded hover:bg-gray-200 active:bg-primary active:text-primary-content"
    :class="props.active ? 'font-bold text-primary' : 'text-secondary'"
  >
-    <i :class="props.icon" class="mr-2" v-if="props.icon"></i><slot></slot>
+    <i :class="props.icon" class="mr-2" v-if="props.icon"></i>
+    <slot></slot>
  </a>
 </template>
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -13,13 +13,8 @@ const emit = defineEmits<{
 </script>
 <template>
  <div class="absolute left-0 right-0 top-0 z-[500] flex h-[50px] bg-primary">
-    <div
-      class="w-in mx-auto flex w-full max-w-app items-center py-2.5 text-white"
-    >
-      <div
-        class="flex pl-3"
-        :class="sideBarCollapsed ? 'w-fit' : 'w-sidebar pr-3'"
-      >
+    <div class="w-in mx-auto flex w-full max-w-app items-center py-2.5 text-white">
+      <div class="flex pl-3" :class="sideBarCollapsed ? 'w-fit' : 'w-sidebar pr-3'">
        <Hamburger
          :side-bar-collapsed="props.sideBarCollapsed"
          @toggle-side-bar="emit('toggleSideBar')"
@@ -38,9 +33,7 @@ const emit = defineEmits<{
        >
          <i class="fas fa-plus-circle text-[1.1rem]" />
        </button>
-        <button class="btn-outline btn-sm btn h-full text-white">
-          Sign in
-        </button>
+        <button class="btn-outline btn-sm btn h-full text-white">Sign in</button>
      </div>
    </div>
  </div>
--- a/src/composables/useNotes.ts
+++ b/src/composables/useNotes.ts
@@ -15,8 +15,7 @@ export const notes = computed<Note[]>(() => {
    .sort((a, b) => b.modified - a.modified) as Note[]
 })
 watch(notes, () => {
-  if (notes.value.length > 0 && !activeNote.value)
-    activeNote.value = rootNote.value
+  if (notes.value.length > 0 && !activeNote.value) activeNote.value = rootNote.value
 })

 export const activeNote = ref<Note>()
@@ -66,11 +65,7 @@ export const updateNote = (noteId: string, note: Note) => {
  baseNotes[noteId] = updatedNote
 }

-export const addNote = (
-  title: string,
-  content: string,
-  goToNote: boolean = false
-) => {
+export const addNote = (title: string, content: string, goToNote: boolean = false) => {
  const id = shortid.generate()
  const newNote: BaseNote = {
    id,
@@ -80,8 +75,7 @@ export const addNote = (
    modified: new Date().getTime(),
  }
  baseNotes[id] = newNote
-  if (goToNote)
-    activeNote.value = notes.value.find((note) => note.id === newNote.id)
+  if (goToNote) activeNote.value = notes.value.find((note) => note.id === newNote.id)
 }

 const getNoteLinksByNoteId = (noteId: string): string[] => {
--- a/src/utils/helpers.ts
+++ b/src/utils/helpers.ts
@@ -6,15 +6,10 @@ export const formatDate = (date: Date | number): string => {
    : date
  const dateDistanceInWords = formatDistance(dateToFormat, new Date()) + ' ago'

-  return isToday(date)
-    ? dateDistanceInWords
-    : format(date, 'D MMMM [at] HH:mm ')
+  return isToday(date) ? dateDistanceInWords : format(date, 'D MMMM [at] HH:mm ')
 }

-export const getAllMatches = (
-  regex: RegExp,
-  input: string
-): RegExpExecArray[] => {
+export const getAllMatches = (regex: RegExp, input: string): RegExpExecArray[] => {
  const matches = []
  let m
  do {