@privyid/persona 1.1.2 → 1.2.1-rc.0

package/dist/components/richtext/control/RichtextControlHighlight.vue

@@ -1,135 +0,0 @@
-<template>
-  <p-dropdown
-    v-model="isShow"
-    icon
-    no-caret
-    variant="ghost"
-    size="sm"
-    menu-size="auto"
-    title="Highlight">
-    <template #button-content>
-      <IconHighlight />
-      <IconCaret />
-    </template>
-
-    <div class="richtext__highlight-container">
-      <template
-        v-for="(color, i) in colors"
-        :key="i">
-        <p-button
-          icon
-          variant="ghost"
-          size="sm"
-          :title="color.text"
-          :active="isActive(color.value as string)"
-          @click="setHightlight(color.value as string)">
-          <span
-            class="richtext__highlight-pallete"
-            :class="color.class" />
-        </p-button>
-      </template>
-      <p-button
-        icon
-        variant="ghost"
-        size="sm"
-        title="Remove highlight"
-        @click="unsetHightlight()">
-        <IconDelete class="richtext__highlight-pallete richtext__highlight-delete" />
-      </p-button>
-    </div>
-  </p-dropdown>
-</template>
-
-<script lang="ts" setup>
-import pButton from '../../button/Button.vue'
-import pDropdown from '../../dropdown/Dropdown.vue'
-import IconCaret from '@privyid/persona-icon/vue/caret-down/16.vue'
-import IconHighlight from '@privyid/persona-icon/vue/highlight/20.vue'
-import IconDelete from '@privyid/persona-icon/vue/close/16.vue'
-import { useRichtextEditor } from '..'
-import type { SelectItem } from '../../select'
-import { ref } from 'vue-demi'
-
-const editor = useRichtextEditor()
-const isShow = ref(false)
-
-const colors: SelectItem[] = [
-  {
-    text : 'Yellow',
-    value: '#F6E789',
-    class: 'bg-yellow-20',
-  },
-  {
-    text : 'Orange',
-    value: '#F9CD84',
-    class: 'bg-orange-20',
-  },
-  {
-    text : 'Red',
-    value: '#F08A89',
-    class: 'bg-red-20',
-  },
-  {
-    text : 'Lime',
-    value: '#B7EB61',
-    class: 'bg-lime-30',
-  },
-  {
-    text : 'Green',
-    value: '#84D495',
-    class: 'bg-green-20',
-  },
-  {
-    text : 'Blue',
-    value: '#3887DB',
-    class: 'bg-blue-20',
-  },
-  {
-    text : 'Lightblue',
-    value: '#71D2DF',
-    class: 'bg-lightblue-20',
-  },
-  {
-    text : 'Purple',
-    value: '#C8A8EF',
-    class: 'bg-purple-20',
-  },
-]
-
-function isActive (color: string) {
-  return editor.value.isActive('highlight', { color })
-}
-
-function setHightlight (color?: string) {
-  editor.value.chain().focus().setHighlight({ color }).run()
-
-  isShow.value = false
-}
-
-function unsetHightlight () {
-  editor.value.chain().focus().unsetHighlight().run()
-
-  isShow.value = false
-}
-</script>
-
-<style lang="postcss">
-.richtext__highlight {
-  &-container {
-    @apply grid grid-cols-[repeat(3,_2rem)] grid-rows-[repeat(3,_2rem)] gap-1 p-1;
-
-    > .btn {
-      @apply w-full h-full;
-    }
-  }
-
-  &-pallete {
-    @apply w-full h-full rounded-xs;
-  }
-
-  &-delete {
-    @apply border text-danger;
-    @apply dark:border-dark-default dark:text-dark-danger;
-  }
-}
-</style>

package/dist/components/richtext/control/RichtextControlHistory.vue

@@ -1,27 +0,0 @@
-<template>
-  <p-button
-    variant="ghost"
-    size="sm"
-    icon
-    :disabled="!editor.can().chain().focus().undo().run()"
-    @click="editor.chain().focus().undo().run()">
-    <IconUndo />
-  </p-button>
-  <p-button
-    variant="ghost"
-    size="sm"
-    icon
-    :disabled="!editor.can().chain().focus().redo().run()"
-    @click="editor.chain().focus().redo().run()">
-    <IconRedo />
-  </p-button>
-</template>
-
-<script lang="ts" setup>
-import pButton from '../../button/Button.vue'
-import IconUndo from '@privyid/persona-icon/vue/undo/20.vue'
-import IconRedo from '@privyid/persona-icon/vue/redo/20.vue'
-import { useRichtextEditor } from '..'
-
-const editor = useRichtextEditor()
-</script>

package/dist/components/richtext/control/RichtextControlImage.vue

@@ -1,34 +0,0 @@
-<template>
-  <p-dropzone
-    v-slot="{ browse }"
-    accept="image/*"
-    @change="handleFiles($event)">
-    <p-button
-      variant="ghost"
-      size="sm"
-      icon
-      title="Insert image"
-      @click="browse">
-      <IconImage />
-    </p-button>
-  </p-dropzone>
-</template>
-
-<script lang="ts" setup>
-import pButton from '../../button/Button.vue'
-import pDropzone from '../../dropzone/Dropzone.vue'
-import IconImage from '@privyid/persona-icon/vue/image/20.vue'
-import { useRichtextEditor } from '..'
-import { toBase64 } from '../../utils/base64'
-
-const editor = useRichtextEditor()
-
-async function handleFiles (image: unknown) {
-  if (image instanceof File) {
-    editor.value.chain().focus().setImage({
-      src  : await toBase64(image),
-      title: image.name,
-    }).run()
-  }
-}
-</script>

package/dist/components/richtext/control/RichtextControlLink.vue

@@ -1,53 +0,0 @@
-<template>
-  <p-dropdown
-    v-model="isShow"
-    icon
-    no-caret
-    variant="ghost"
-    size="sm"
-    menu-size="auto"
-    title="Add hyperlink">
-    <template #button-content>
-      <IconLink />
-    </template>
-
-    <div class="flex p-1 space-x-1">
-      <LinkEdit
-        v-if="isShow"
-        v-model="url"
-        @submit="setLink()"
-        @cancel="close()" />
-    </div>
-  </p-dropdown>
-</template>
-
-<script lang="ts" setup>
-import pDropdown from '../../dropdown/Dropdown.vue'
-import IconLink from '@privyid/persona-icon/vue/link/20.vue'
-import { useRichtextEditor } from '..'
-import { ref } from 'vue-demi'
-import LinkEdit from '../popup/RichtextPopupLinkEdit.vue'
-import { withHttps } from 'ufo'
-
-const editor = useRichtextEditor()
-const url    = ref('')
-const isShow = ref(false)
-
-function setLink () {
-  if (!url.value)
-    return
-
-  editor.value.chain()
-    .focus()
-    .extendMarkRange('link')
-    .setLink({ href: withHttps(url.value) })
-    .run()
-
-  close()
-}
-
-function close () {
-  isShow.value = false
-  url.value    = ''
-}
-</script>

package/dist/components/richtext/control/RichtextControlList.vue

@@ -1,45 +0,0 @@
-<template>
-  <p-dropdown
-    icon
-    no-caret
-    variant="ghost"
-    size="sm"
-    menu-size="auto"
-    title="Text alignment">
-    <template #button-content>
-      <IconOrderedList v-if="editor.isActive('orderedList')" />
-      <IconBulletList v-else />
-      <IconCaret />
-    </template>
-    <p-dropdown-item
-      title="Bullet List"
-      :active="editor.isActive('bulletList')"
-      @click="toggleList('bullet')">
-      <IconBulletList />
-    </p-dropdown-item>
-    <p-dropdown-item
-      title="Ordered list"
-      :active="editor.isActive('orderedList')"
-      @click="toggleList('ordered')">
-      <IconOrderedList />
-    </p-dropdown-item>
-  </p-dropdown>
-</template>
-
-<script lang="ts" setup>
-import pDropdown from '../../dropdown/Dropdown.vue'
-import pDropdownItem from '../../dropdown/DropdownItem.vue'
-import IconCaret from '@privyid/persona-icon/vue/caret-down/16.vue'
-import IconBulletList from '@privyid/persona-icon/vue/list-bullets/20.vue'
-import IconOrderedList from '@privyid/persona-icon/vue/list-numbers/20.vue'
-import { useRichtextEditor } from '..'
-
-const editor = useRichtextEditor()
-
-function toggleList (type: 'bullet' | 'ordered') {
-  if (type === 'bullet')
-    editor.value.chain().focus().toggleBulletList().run()
-  else
-    editor.value.chain().focus().toggleOrderedList().run()
-}
-</script>

package/dist/components/richtext/control/RichtextControlTable.vue

@@ -1,106 +0,0 @@
-<template>
-  <p-dropdown
-    v-model="isShow"
-    icon
-    no-caret
-    variant="ghost"
-    size="sm"
-    menu-size="auto"
-    title="Insert table">
-    <template #button-content>
-      <IconTable />
-      <IconCaret />
-    </template>
-
-    <div class="richtext__table-grid">
-      <template
-        v-for="i in (MAX_ROWS * MAX_COLS)"
-        :key="i">
-        <button
-          class="richtext__table-size-item"
-          :active="isHovered(i)"
-          @mouseenter="setHover(i)"
-          @click="insertTable(i)" />
-      </template>
-    </div>
-    <div class="py-1 text-center">
-      {{ hoverLabel }}
-    </div>
-  </p-dropdown>
-</template>
-
-<script lang="ts" setup>
-import pDropdown from '../../dropdown/Dropdown.vue'
-import IconCaret from '@privyid/persona-icon/vue/caret-down/16.vue'
-import IconTable from '@privyid/persona-icon/vue/table/20.vue'
-import { computed, ref } from 'vue-demi'
-import { useRichtextEditor } from '..'
-
-const MAX_ROWS = 10
-const MAX_COLS = 10
-
-const editor = useRichtextEditor()
-const hover  = ref(0)
-const isShow = ref(false)
-
-const hoverLabel = computed(() => {
-  const { x, y } = getXY(hover.value)
-
-  return `${x}x${y}`
-})
-
-function getXY (index: number) {
-  const x = index % MAX_ROWS
-  const y = Math.ceil(index / MAX_COLS)
-
-  return {
-    x: x === 0 ? MAX_ROWS : x,
-    y: y,
-  }
-}
-
-function isHovered (index: number) {
-  const cursor  = getXY(hover.value)
-  const current = getXY(index)
-
-  return current.x <= cursor.x
-    && current.y <= cursor.y
-}
-
-function insertTable (index: number) {
-  const { x: cols, y: rows } = getXY(index)
-
-  editor.value?.chain()
-    .focus()
-    .insertTable({
-      rows,
-      cols,
-      withHeaderRow: false,
-    })
-    .run()
-
-  hover.value  = 0
-  isShow.value = false
-}
-
-function setHover (index: number) {
-  hover.value = index
-}
-</script>
-
-<style lang="postcss">
-.richtext__table {
-  &-size-item {
-    @apply w-full h-full border border-default border-solid rounded-[2px];
-    @apply dark:border-dark-default;
-
-    &[active="true"] {
-      @apply bg-brand-accent/15;
-    }
-  }
-
-  &-grid {
-    @apply grid grid-cols-[repeat(10,_1rem)] grid-rows-[repeat(10,_1rem)] gap-0.5 p-2 pb-0;
-  }
-}
-</style>

package/dist/components/richtext/control/RichtextControlTextAlign.vue

@@ -1,90 +0,0 @@
-<template>
-  <p-dropdown
-    icon
-    no-caret
-    variant="ghost"
-    size="sm"
-    menu-size="auto"
-    title="Text alignment">
-    <template #button-content>
-      <component :is="currentIcon" />
-      <IconCaret />
-    </template>
-    <p-dropdown-item
-      title="Left"
-      :active="editor.isActive({ textAlign: 'left' })"
-      @click="setAlign('left')">
-      <IconAlignLeft />
-    </p-dropdown-item>
-    <p-dropdown-item
-      title="Center"
-      :active="editor.isActive({ textAlign: 'center' })"
-      @click="setAlign('center')">
-      <IconAlignCenter />
-    </p-dropdown-item>
-    <p-dropdown-item
-      title="Right"
-      :active="editor.isActive({ textAlign: 'right' })"
-      @click="setAlign('right')">
-      <IconAlignRight />
-    </p-dropdown-item>
-    <p-dropdown-item
-      title="Justify"
-      :active="editor.isActive({ textAlign: 'justify' })"
-      @click="setAlign('justify')">
-      <IconAlignJustify />
-    </p-dropdown-item>
-  </p-dropdown>
-</template>
-
-<script lang="ts" setup>
-import pDropdown from '../../dropdown/Dropdown.vue'
-import pDropdownItem from '../../dropdown/DropdownItem.vue'
-import IconCaret from '@privyid/persona-icon/vue/caret-down/16.vue'
-import IconAlignLeft from '@privyid/persona-icon/vue/align-left/20.vue'
-import IconAlignCenter from '@privyid/persona-icon/vue/align-center/20.vue'
-import IconAlignRight from '@privyid/persona-icon/vue/align-right/20.vue'
-import IconAlignJustify from '@privyid/persona-icon/vue/align-justify/20.vue'
-import { useRichtextEditor } from '..'
-import type { Component } from 'vue-demi'
-import { computed } from 'vue-demi'
-
-const alignment = [
-  'left',
-  'center',
-  'right',
-  'justify',
-] as const
-
-type Alignment = typeof alignment[number]
-
-const ICONS: Record<Alignment, Component> = {
-  left   : IconAlignLeft,
-  center : IconAlignCenter,
-  right  : IconAlignRight,
-  justify: IconAlignJustify,
-}
-
-const editor = useRichtextEditor()
-
-const current = computed(() => {
-  if (editor.value?.isActive({ textAlign: 'center' }))
-    return 'center'
-
-  if (editor.value?.isActive({ textAlign: 'right' }))
-    return 'right'
-
-  if (editor.value?.isActive({ textAlign: 'justify' }))
-    return 'justify'
-
-  return 'left'
-})
-
-const currentIcon = computed(() => {
-  return ICONS[current.value]
-})
-
-function setAlign (align: Alignment) {
-  editor.value?.chain().focus().setTextAlign(align).run()
-}
-</script>

package/dist/components/richtext/control/RichtextControlTextFormat.vue

@@ -1,49 +0,0 @@
-<template>
-  <p-button
-    variant="ghost"
-    size="sm"
-    icon
-    title="Bold"
-    :active="editor.isActive('bold')"
-    @click="editor.chain().focus().toggleBold().run()">
-    <IconBold />
-  </p-button>
-  <p-button
-    variant="ghost"
-    size="sm"
-    icon
-    title="Italic"
-    :active="editor.isActive('italic')"
-    @click="editor.chain().focus().toggleItalic().run()">
-    <IconItalic />
-  </p-button>
-  <p-button
-    variant="ghost"
-    size="sm"
-    icon
-    title="Underline"
-    :active="editor.isActive('underline')"
-    @click="editor.chain().focus().toggleUnderline().run()">
-    <IconUnderline />
-  </p-button>
-  <p-button
-    variant="ghost"
-    size="sm"
-    icon
-    title="Strikethrough"
-    :active="editor.isActive('strikethrough')"
-    @click="editor.chain().focus().toggleStrike().run()">
-    <IconStrikethrough />
-  </p-button>
-</template>
-
-<script lang="ts" setup>
-import pButton from '../../button/Button.vue'
-import IconBold from '@privyid/persona-icon/vue/bold/20.vue'
-import IconItalic from '@privyid/persona-icon/vue/italic/20.vue'
-import IconUnderline from '@privyid/persona-icon/vue/underlined/20.vue'
-import IconStrikethrough from '@privyid/persona-icon/vue/strikethrough/20.vue'
-import { useRichtextEditor } from '..'
-
-const editor = useRichtextEditor()
-</script>

package/dist/components/richtext/control/RichtextControlTextHeading.vue

@@ -1,101 +0,0 @@
-<template>
-  <p-dropdown
-    variant="ghost"
-    size="sm"
-    icon
-    no-caret>
-    <template #button-content>
-      {{ current }}
-      <IconCaret />
-    </template>
-    <p-dropdown-item
-      :active="editor.isActive('paragraph')"
-      @click="setParagraph()">
-      Paragraph
-    </p-dropdown-item>
-    <p-dropdown-item
-      :active="editor.isActive('heading', { level: 1 })"
-      @click="setHeading(1)">
-      <span class="text-4xl font-bold">
-        Heading 1
-      </span>
-    </p-dropdown-item>
-    <p-dropdown-item
-      :active="editor.isActive('heading', { level: 2 })"
-      @click="setHeading(2)">
-      <span class="text-3xl font-bold">
-        Heading 2
-      </span>
-    </p-dropdown-item>
-    <p-dropdown-item
-      :active="editor.isActive('heading', { level: 3 })"
-      @click="setHeading(3)">
-      <span class="text-2xl font-bold">
-        Heading 3
-      </span>
-    </p-dropdown-item>
-    <p-dropdown-item
-      :active="editor.isActive('heading', { level: 4 })"
-      @click="setHeading(4)">
-      <span class="text-xl font-bold">
-        Heading 4
-      </span>
-    </p-dropdown-item>
-    <p-dropdown-item
-      :active="editor.isActive('heading', { level: 5 })"
-      @click="setHeading(5)">
-      <span class="text-lg font-bold">
-        Heading 5
-      </span>
-    </p-dropdown-item>
-    <p-dropdown-item
-      :active="editor.isActive('heading', { level: 5 })"
-      @click="setHeading(6)">
-      <span class="text-base font-bold">
-        Heading 6
-      </span>
-    </p-dropdown-item>
-    <p-dropdown-item
-      :active="editor.isActive('codeBlock')"
-      @click="setCodeBlock()">
-      <span class="font-mono text-base">
-        Code Block
-      </span>
-    </p-dropdown-item>
-  </p-dropdown>
-</template>
-
-<script lang="ts" setup>
-import pDropdown from '../../dropdown/Dropdown.vue'
-import pDropdownItem from '../../dropdown/DropdownItem.vue'
-import IconCaret from '@privyid/persona-icon/vue/caret-down/16.vue'
-import type { Level } from '@tiptap/extension-heading'
-import { useRichtextEditor } from '..'
-import { computed } from 'vue-demi'
-
-const editor = useRichtextEditor()
-
-const current = computed(() => {
-  for (let i = 1; i <= 6; i++) {
-    if (editor.value.isActive('heading', { level: i }))
-      return `Heading ${i}`
-  }
-
-  if (editor.value.isActive('codeBlock'))
-    return 'Code Block'
-
-  return 'Paragraph'
-})
-
-function setParagraph () {
-  editor.value.chain().focus().setParagraph().run()
-}
-
-function setHeading (level: Level) {
-  editor.value.chain().focus().setHeading({ level }).run()
-}
-
-function setCodeBlock () {
-  editor.value.chain().focus().setCodeBlock().run()
-}
-</script>

package/dist/components/richtext/index.d.ts

@@ -1,7 +0,0 @@
-import type { Editor } from '@tiptap/vue-3';
-import { type InjectionKey, type ShallowRef } from 'vue-demi';
-export declare const RICHTEXT_CONTEXT: InjectionKey<{
-    editor: ShallowRef<Editor>;
-}>;
-export type ControlVariant = 'simple' | 'advanced';
-export declare function useRichtextEditor(): ShallowRef<Editor>;

package/dist/components/richtext/index.mjs

@@ -1,7 +0,0 @@
-import {
-  inject
-} from "vue-demi";
-export const RICHTEXT_CONTEXT = Symbol("Richtext");
-export function useRichtextEditor() {
-  return inject(RICHTEXT_CONTEXT).editor;
-}