tiptapify 0.0.35 → 0.0.36

package/src/extensions/charmap/typography.ts

@@ -0,0 +1,499 @@
+export default [
+  {
+    "name": "Vertical bar / Pipe",
+    "char": "|",
+    "codes": [
+      "|"
+    ]
+  },
+  {
+    "name": "Broken bar",
+    "char": "¦",
+    "codes": [
+      "¦"
+    ]
+  },
+  {
+    "name": "Section sign",
+    "char": "§",
+    "codes": [
+      "§"
+    ]
+  },
+  {
+    "name": "Copyright sign",
+    "char": "©",
+    "codes": [
+      "©"
+    ]
+  },
+  {
+    "name": "Feminine ordinal indicator",
+    "char": "ª",
+    "codes": [
+      "ª"
+    ]
+  },
+  {
+    "name": "Degree",
+    "char": "°",
+    "codes": [
+      "°"
+    ]
+  },
+  {
+    "name": "Paragraph",
+    "char": "¶",
+    "codes": [
+      "¶"
+    ]
+  },
+  {
+    "name": "Middle dot",
+    "char": "·",
+    "codes": [
+      "·"
+    ]
+  },
+  {
+    "name": "En dash",
+    "char": "–",
+    "codes": [
+      "–"
+    ]
+  },
+  {
+    "name": "Em dash",
+    "char": "—",
+    "codes": [
+      "—"
+    ]
+  },
+  {
+    "name": "Horizontal bar",
+    "char": "―",
+    "codes": [
+      "―"
+    ]
+  },
+  {
+    "name": "Double vertical line",
+    "char": "‖",
+    "codes": [
+      "‖"
+    ]
+  },
+  {
+    "name": "Left single quotation mark",
+    "char": "‘",
+    "codes": [
+      "‘"
+    ]
+  },
+  {
+    "name": "Right single quotation mark",
+    "char": "’",
+    "codes": [
+      "’"
+    ]
+  },
+  {
+    "name": "Single low-9 quotation mark",
+    "char": "‚",
+    "codes": [
+      "‚"
+    ]
+  },
+  {
+    "name": "Left double quotation mark",
+    "char": "“",
+    "codes": [
+      "“"
+    ]
+  },
+  {
+    "name": "Right double quotation mark",
+    "char": "”",
+    "codes": [
+      "”"
+    ]
+  },
+  {
+    "name": "Double low-9 quotation mark",
+    "char": "„",
+    "codes": [
+      "„ „"
+    ]
+  },
+  {
+    "name": "Dagger",
+    "char": "†",
+    "codes": [
+      "†"
+    ]
+  },
+  {
+    "name": "Double dagger",
+    "char": "‡",
+    "codes": [
+      "‡"
+    ]
+  },
+  {
+    "name": "Bullet",
+    "char": "•",
+    "codes": [
+      "•"
+    ]
+  },
+  {
+    "name": "Two dot leader",
+    "char": "‥",
+    "codes": [
+      "‥"
+    ]
+  },
+  {
+    "name": "Horizontal ellipsis",
+    "char": "…",
+    "codes": [
+      "…"
+    ]
+  },
+  {
+    "name": "Prime",
+    "char": "′",
+    "codes": [
+      "′"
+    ]
+  },
+  {
+    "name": "Double prime / Ditto mark",
+    "char": "″",
+    "codes": [
+      "″"
+    ]
+  },
+  {
+    "name": "Triple prime",
+    "char": "‴",
+    "codes": [
+      "‴"
+    ]
+  },
+  {
+    "name": "Reversed prime",
+    "char": "‵",
+    "codes": [
+      "‵"
+    ]
+  },
+  {
+    "name": "Single left-pointing quotation mark",
+    "char": "‹",
+    "codes": [
+      "‹"
+    ]
+  },
+  {
+    "name": "Single right-pointing quotation mark",
+    "char": "›",
+    "codes": [
+      "›"
+    ]
+  },
+  {
+    "name": "Overline",
+    "char": "‾",
+    "codes": [
+      "‾"
+    ]
+  },
+  {
+    "name": "Caret",
+    "char": "⁁",
+    "codes": [
+      "⁁"
+    ]
+  },
+  {
+    "name": "Hyphen bullet",
+    "char": "⁃",
+    "codes": [
+      "⁃"
+    ]
+  },
+  {
+    "name": "Reversed semicolon",
+    "char": "⁏",
+    "codes": [
+      "⁏"
+    ]
+  },
+  {
+    "name": "Care of",
+    "char": "℅",
+    "codes": [
+      "℅"
+    ]
+  },
+  {
+    "name": "G script",
+    "char": "ℊ",
+    "codes": [
+      "ℊ"
+    ]
+  },
+  {
+    "name": "H script",
+    "char": "ℋ",
+    "codes": [
+      "ℋ"
+    ]
+  },
+  {
+    "name": "Black-letter H",
+    "char": "ℌ",
+    "codes": [
+      "ℌ"
+    ]
+  },
+  {
+    "name": "I script",
+    "char": "ℐ",
+    "codes": [
+      "ℐ"
+    ]
+  },
+  {
+    "name": "I script / Image",
+    "char": "ℑ",
+    "codes": [
+      "ℑ"
+    ]
+  },
+  {
+    "name": "L script / Laplace",
+    "char": "ℒ",
+    "codes": [
+      "ℒ"
+    ]
+  },
+  {
+    "name": "L script",
+    "char": "ℓ",
+    "codes": [
+      "ℓ"
+    ]
+  },
+  {
+    "name": "Numero",
+    "char": "№",
+    "codes": [
+      "№"
+    ]
+  },
+  {
+    "name": "Sound recording copyright",
+    "char": "℗",
+    "codes": [
+      "℗"
+    ]
+  },
+  {
+    "name": "P script",
+    "char": "℘",
+    "codes": [
+      "℘"
+    ]
+  },
+  {
+    "name": "R Script",
+    "char": "ℛ",
+    "codes": [
+      "ℛ"
+    ]
+  },
+  {
+    "name": "Prescription take",
+    "char": "℞",
+    "codes": [
+      "℞"
+    ]
+  },
+  {
+    "name": "Trade mark sign",
+    "char": "™",
+    "codes": [
+      "™"
+    ]
+  },
+  {
+    "name": "Black-letter z",
+    "char": "ℨ",
+    "codes": [
+      "ℨ"
+    ]
+  },
+  {
+    "name": "B script",
+    "char": "ℬ",
+    "codes": [
+      "ℬ"
+    ]
+  },
+  {
+    "name": "Black-letter C",
+    "char": "ℭ",
+    "codes": [
+      "ℭ"
+    ]
+  },
+  {
+    "name": "Elementary charge / E script",
+    "char": "ℯ",
+    "codes": [
+      "ℯ"
+    ]
+  },
+  {
+    "name": "E script",
+    "char": "ℰ",
+    "codes": [
+      "ℰ"
+    ]
+  },
+  {
+    "name": "F script",
+    "char": "ℱ",
+    "codes": [
+      "ℱ "
+    ]
+  },
+  {
+    "name": "M script",
+    "char": "ℳ",
+    "codes": [
+      "ℳ"
+    ]
+  },
+  {
+    "name": "o script",
+    "char": "ℴ",
+    "codes": [
+      "ℴ"
+    ]
+  },
+  {
+    "name": "Vertical ellipsis",
+    "char": "⋮",
+    "codes": [
+      "⋮"
+    ]
+  },
+  {
+    "name": "Mid line horizontal ellipsis",
+    "char": "⋯",
+    "codes": [
+      "⋯"
+    ]
+  },
+  {
+    "name": "Up right diagonal ellipsis",
+    "char": "⋰",
+    "codes": [
+      "⋰"
+    ]
+  },
+  {
+    "name": "Down right diagonal ellipsis",
+    "char": "⋱",
+    "codes": [
+      "⋱"
+    ]
+  },
+  {
+    "name": "Bottom right crop mark",
+    "char": "⌌",
+    "codes": [
+      "⌌"
+    ]
+  },
+  {
+    "name": "Bottom left crop mark",
+    "char": "⌍",
+    "codes": [
+      "⌍"
+    ]
+  },
+  {
+    "name": "Top right crop mark",
+    "char": "⌎",
+    "codes": [
+      "⌎"
+    ]
+  },
+  {
+    "name": "Top left crop mark",
+    "char": "⌏",
+    "codes": [
+      "⌏"
+    ]
+  },
+  {
+    "name": "Top left corner",
+    "char": "⌜",
+    "codes": [
+      "⌜"
+    ]
+  },
+  {
+    "name": "Top right corner",
+    "char": "⌝",
+    "codes": [
+      "⌝"
+    ]
+  },
+  {
+    "name": "Bottom left corner",
+    "char": "⌞",
+    "codes": [
+      "⌞"
+    ]
+  },
+  {
+    "name": "Bottom right corner",
+    "char": "⌟",
+    "codes": [
+      "⌟"
+    ]
+  },
+  {
+    "name": "Frown",
+    "char": "⌢",
+    "codes": [
+      "⌢"
+    ]
+  },
+  {
+    "name": "Smile",
+    "char": "⌣",
+    "codes": [
+      "⌣"
+    ]
+  },
+  {
+    "name": "Circled S",
+    "char": "Ⓢ",
+    "codes": [
+      "Ⓢ"
+    ]
+  },
+  {
+    "name": "Vertical separator",
+    "char": "❘",
+    "codes": [
+      "❘"
+    ]
+  }
+]

package/src/extensions/components/media/charmap/Button.vue

@@ -0,0 +1,165 @@
+<script lang="ts" setup>
+import { Editor } from '@tiptap/vue-3'
+import tiptapifyCharMap from "@tiptapify/extensions/charmap"
+import { computed, inject, Ref, ref, watch } from 'vue'
+import * as mdi from '@mdi/js'
+
+defineProps({
+  variantBtn: { type: String, default: 'flat' },
+})
+
+const editor = inject('tiptapifyEditor') as Ref<Editor>
+const { t } = inject('tiptapifyI18n') as any
+
+const filter = ref(null)
+const tab = ref('punctuation')
+const sorted = tiptapifyCharMap.sort((previous, current) => {
+  if (previous.order < current.order) {
+    return -1
+  }
+  if (previous.order > current.order) {
+    return 1
+  }
+
+  return 0
+})
+
+if (!tab.value && sorted.length > 0) {
+  tab.value = sorted[0].name
+}
+const chars = computed(() => sorted.map(item => { return { group: item.name, emojis: item.items } }))
+const charMapRef = ref(JSON.parse(JSON.stringify(chars.value)))
+
+const handleCharacterClick = (charItem: any) => {
+  editor.value.chain().focus().insertContent(charItem.char).run()
+}
+
+const filterChars = (filterValue: string) => {
+  resetFilter()
+  if (!filterValue) {
+    return
+  }
+
+  const filtered: any[] = []
+
+  const groupItems = charMapRef.value.find((item: any) => item.group === tab.value)
+  if (groupItems?.emojis) {
+    groupItems.emojis.forEach((item: any) => {
+      if (item.name.toLowerCase().match(filterValue)) {
+        filtered.push(item)
+      }
+    })
+
+    groupItems.emojis = filtered
+  }
+}
+
+const resetFilter = () => {
+  charMapRef.value = JSON.parse(JSON.stringify(chars.value))
+}
+
+watch(() => tab.value, () => {
+  resetFilter()
+  filter.value = null
+})
+
+</script>
+
+<template>
+  <VBtn :id="`tiptapify-charmap-button-${editor.instanceId}`" :variant="variantBtn" size="32" @click="console.log('click charmap')">
+    <VTooltip activator="parent">
+      {{ t('media.charmap.title') }}
+    </VTooltip>
+    <VIcon :icon="`mdiSvg:${mdi.mdiAppleKeyboardCommand}`" tag="svg" size="small" />
+  </VBtn>
+
+  <VMenu :activator="`#tiptapify-charmap-button-${editor.instanceId}`" :close-on-content-click="false">
+    <VSheet class="pa-2" max-width="580">
+      <div class="d-flex flex-row">
+        <VTabs v-model="tab" mandatory direction="vertical" color="primary" density="compact">
+          <VTab
+              v-for="item of charMapRef"
+              :text="item.group"
+              :value="item.group"
+              :key="item.group"
+              density="compact"
+              rounded
+              size="small"
+          >
+            {{ t(`media.charmap.categories.${item.group}`) }}
+          </VTab>
+        </VTabs>
+
+        <div class="d-flex flex-column">
+          <VTextField
+              v-model="filter"
+              :label="t('media.charmap.search')"
+              density="compact"
+              variant="solo"
+              :prepend-inner-icon="`mdiSvg:${mdi.mdiMagnify}`"
+              class="mb-2 tiptapify-charmap-search"
+              hide-details
+              clearable
+              @update:model-value="filterChars($event)"
+              @click:clear="resetFilter"
+          />
+          <div class="tiptapify-charmap-container">
+            <VWindow v-model="tab" direction="vertical">
+              <VWindowItem v-for="item of charMapRef" :value="item.group" :transition="false" :reverse-transition="false">
+                <div
+                    v-for="charItem in item.emojis"
+                    class="tiptapify-charmap-container-item"
+                    @click="handleCharacterClick(charItem)"
+                    :title="charItem.name"
+                >
+                  <div class="tiptapify-charmap-container-item__overlay">
+                    <span>
+                      {{ charItem.char }}
+                    </span>
+                  </div>
+                </div>
+              </VWindowItem>
+            </VWindow>
+          </div>
+        </div>
+      </div>
+    </VSheet>
+  </VMenu>
+</template>
+
+<style scoped lang="scss">
+.tiptapify-charmap-container {
+  width: 360px;
+  height: 550px;
+  overflow-y: auto;
+
+  border: 1px solid rgba(var(--v-theme-on-background), calc(var(--v-border-opacity)));
+  border-radius: 8px;
+  box-shadow: 0 0 5px rgba(var(--v-theme-on-background), calc(var(--v-border-opacity))) inset;
+}
+
+.tiptapify-charmap-container-item__overlay {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 5px;
+  z-index: 1;
+}
+
+.tiptapify-charmap-container-item {
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  width: 32px;
+  height: 32px;
+  transition: background-color 0.2s ease-in-out;
+}
+
+.tiptapify-charmap-container-item:hover .tiptapify-emoji-container-item__overlay {
+  background-color: rgba(var(--v-theme-on-background), calc(var(--v-hover-opacity) * var(--v-theme-overlay-multiplier)));
+}
+</style>

package/src/extensions/components/media/emoji/Button.vue

@@ -67,12 +67,7 @@ watch(() => tab.value, () => {
 </script>
 
 <template>
-  <VBtn
-      :id="`tiptapify-emoji-button-${editor.instanceId}`"
-      :color="editor.isActive('image') ? 'primary' : ''"
-      :variant="variantBtn"
-      size="32"
-  >
+  <VBtn :id="`tiptapify-emoji-button-${editor.instanceId}`" color="" :variant="variantBtn" size="32">
     <VTooltip activator="parent">
       {{ t('media.emoji.title') }}
     </VTooltip>
@@ -92,14 +87,14 @@ watch(() => tab.value, () => {
               rounded
               size="small"
           >
-            {{ t(`media.emoji.${item.group}`) }}
+            {{ t(`media.emoji.categories.${item.group}`) }}
           </VTab>
         </VTabs>
 
         <div>
           <VTextField
               v-model="filter"
-              label="Filter emoji"
+              :label="t('media.emoji.search')"
               density="compact"
               variant="solo"
               :prepend-inner-icon="`mdiSvg:${mdi.mdiMagnify}`"
@@ -119,9 +114,9 @@ watch(() => tab.value, () => {
                     :title="emojiItem.name"
                 >
                   <div class="tiptapify-emoji-container-item__overlay">
-                  <span>
-                    {{ emojiItem.char }}
-                  </span>
+                    <span>
+                      {{ emojiItem.char }}
+                    </span>
                   </div>
                 </div>
               </VWindowItem>