@youcan/celeste 0.6.29 → 0.6.31

package/src/components/rich-editor/config.ts

@@ -0,0 +1,150 @@
+import type { Editor } from '@tiptap/vue-3';
+import type { ToolbarChildOption, ToolbarItem } from './types';
+import { ref } from 'vue';
+// @unocss-include
+
+export const fullToolbar = ref<ToolbarItem[]>([
+  {
+    slug: 'heading',
+    name: 'Text styles',
+    children: [
+      { option: 'p', name: 'Normal text', active: 'paragraph' },
+      { option: '1', name: 'Heading 1', active: { level: 1 } },
+      { option: '2', name: 'Heading 2', active: { level: 2 } },
+      { option: '3', name: 'Heading 3', active: { level: 3 } },
+      { option: '4', name: 'Heading 4', active: { level: 4 } },
+      { option: '5', name: 'Heading 5', active: { level: 5 } },
+      { option: '6', name: 'Heading 6', active: { level: 6 } },
+    ],
+  },
+  { type: 'divider' },
+  {
+    slug: 'fontSize',
+    name: 'Font size',
+    children: [
+      { option: '8px', name: '8', active: { fontSize: '8px' } },
+      { option: '10px', name: '10', active: { fontSize: '10px' } },
+      { option: '12px', name: '12', active: { fontSize: '12px' } },
+      { option: '14px', name: '14', active: { fontSize: '14px' } },
+      { option: '16px', name: '16', active: { fontSize: '16px' } },
+      { option: '18px', name: '18', active: { fontSize: '18px' } },
+      { option: '24px', name: '24', active: { fontSize: '24px' } },
+      { option: '30px', name: '30', active: { fontSize: '30px' } },
+      { option: '36px', name: '36', active: { fontSize: '36px' } },
+      { option: '48px', name: '48', active: { fontSize: '48px' } },
+      { option: '60px', name: '60', active: { fontSize: '60px' } },
+      { option: '72px', name: '72', active: { fontSize: '72px' } },
+      { option: '96px', name: '96', active: { fontSize: '96px' } },
+    ],
+  },
+  { type: 'divider' },
+  {
+    slug: 'color',
+    name: 'Text color',
+    children: [
+      { option: '#000000', name: 'Black', icon: 'i-celeste-circle-fill', active: { color: '#000000' } },
+      { option: '#7B7B7B', name: 'Gray', icon: 'i-celeste-circle-fill', active: { color: '#7B7B7B' } },
+      { option: '#335CFF', name: 'Blue', icon: 'i-celeste-circle-fill', active: { color: '#335CFF' } },
+      { option: '#FA7319', name: 'Orange', icon: 'i-celeste-circle-fill', active: { color: '#FA7319' } },
+      { option: '#7D52F4', name: 'Purple', icon: 'i-celeste-circle-fill', active: { color: '#7D52F4' } },
+      { option: '#47C2FF', name: 'Sky', icon: 'i-celeste-circle-fill', active: { color: '#47C2FF' } },
+    ],
+  },
+  { type: 'divider' },
+  { slug: 'bold', name: 'Bold', icon: 'i-celeste-bold', active: 'bold' },
+  { slug: 'italic', name: 'Italic', icon: 'i-celeste-italic', active: 'italic' },
+  { slug: 'underline', name: 'Underline', icon: 'i-celeste-underline', active: 'underline' },
+  { slug: 'strike', name: 'Strike', icon: 'i-celeste-strikethrough', active: 'strike' },
+  { type: 'divider' },
+  { slug: 'bulletList', name: 'Bulleted list', icon: 'i-celeste-list-unordered', active: 'bulletList' },
+  { slug: 'orderedList', name: 'Numbered list', icon: 'i-celeste-list-ordered', active: 'orderedList' },
+  { type: 'divider' },
+  {
+    slug: 'align',
+    name: 'Text alignment',
+    children: [
+      { option: 'left', name: 'Left align', icon: 'i-celeste-align-left', active: { textAlign: 'left' } },
+      { option: 'center', name: 'Center align', icon: 'i-celeste-align-center', active: { textAlign: 'center' } },
+      { option: 'right', name: 'Right align', icon: 'i-celeste-align-right', active: { textAlign: 'right' } },
+      { option: 'justify', name: 'Justify', icon: 'i-celeste-align-justify', active: { textAlign: 'justify' } },
+    ],
+  },
+  { type: 'divider' },
+  { slug: 'link', name: 'Insert Link', icon: 'i-celeste-link', active: 'link' },
+  { type: 'divider' },
+  { slug: 'undo', name: 'Undo', icon: 'i-celeste-arrow-go-back-line', active: 'undo' },
+  { slug: 'redo', name: 'Redo', icon: 'i-celeste-arrow-go-forward-line', active: 'redo' },
+  { slug: 'clear', name: 'Clear style', icon: 'i-celeste-format-clear', active: 'clear' },
+]);
+
+export function onActionClick(
+  editor: Editor,
+  slug: string,
+  option: string | null = null,
+  showLinkBubble?: () => void,
+): void {
+  const chain = editor.chain().focus();
+
+  if (!chain) {
+    return;
+  }
+
+  const actionTriggers: Record<string, () => void> = {
+    heading: () => {
+      if (!option) {
+        return;
+      }
+
+      if (option === 'p') {
+        chain.setParagraph().run();
+      }
+      else {
+        const headingLevel = Number(option);
+        chain.toggleHeading({ level: headingLevel as 1 | 2 | 3 | 4 | 5 | 6 }).run();
+      }
+    },
+    fontSize: () => {
+      editor.chain().focus().setFontSize(option ?? '16px').run();
+    },
+    color: () => {
+      editor.chain().focus().setColor(option ?? '#000000').run();
+    },
+    bold: () => chain.toggleBold().run(),
+    italic: () => chain.toggleItalic().run(),
+    underline: () => chain.toggleUnderline().run(),
+    strike: () => chain.toggleStrike().run(),
+    bulletList: () => chain.toggleBulletList().run(),
+    orderedList: () => chain.toggleOrderedList().run(),
+    align: () => chain.setTextAlign(option ?? 'left').run(),
+    link: () => {
+      if (showLinkBubble) {
+        showLinkBubble();
+      }
+    },
+    undo: () => chain.undo().run(),
+    redo: () => chain.redo().run(),
+    clear: () => chain.clearNodes().unsetAllMarks().run(),
+  };
+
+  actionTriggers[slug]?.();
+}
+
+export function selectedOption(editor: Editor, children: ToolbarChildOption[]): string {
+  if (!Array.isArray(children)) {
+    return '';
+  }
+
+  for (const child of children) {
+    if (Object.prototype.hasOwnProperty.call(child.active, 'fontSize')) {
+      const currentFontSize = editor.getAttributes('textStyle').fontSize || '16px';
+
+      return currentFontSize;
+    }
+
+    if (editor.isActive(child.active)) {
+      return child.option;
+    }
+  }
+
+  return children[0].option;
+}

package/src/components/rich-editor/extra-settings.vue

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import type { Editor } from '@tiptap/vue-3';
+import CompactButton from '@/components/button/compact-button.vue';
+import SelectContent from '@/components/select/select-content.vue';
+import SelectIcon from '@/components/select/select-icon.vue';
+import SelectItem from '@/components/select/select-item.vue';
+import SelectTrigger from '@/components/select/select-trigger.vue';
+import Select from '@/components/select/select.vue';
+import Tooltip from '@/components/tooltip/tooltip.vue';
+import { ref } from 'vue';
+
+const props = defineProps<{
+  editor: Editor;
+}>();
+
+const defaultValue = ref('');
+const extraSettings = [
+  {
+    name: 'Copy',
+    icon: 'i-celeste-file-copy-line',
+  },
+  {
+    name: 'Cut',
+    icon: 'i-celeste-scissors-line',
+  },
+  {
+    name: 'Delete',
+    icon: 'i-celeste-delete-bin-4-line',
+  },
+  {
+    name: 'Duplicate',
+    icon: 'i-celeste-add-circle-line',
+  },
+];
+
+function selectedText(editor: Editor) {
+  const { from, to } = editor.state.selection;
+  const text = editor.state.doc.textBetween(from, to, '\n');
+
+  return text || null;
+}
+
+async function copySelectionToClipboard(editor: Editor) {
+  const text = selectedText(editor);
+
+  if (!text) {
+    return;
+  }
+
+  try {
+    if (!window.isSecureContext) {
+      throw new Error('Clipboard API is not available in insecure contexts');
+    }
+
+    const copyText = await navigator.clipboard.writeText(text);
+
+    return copyText;
+  }
+  catch (error) {
+    console.error(error);
+  }
+}
+
+async function cutSelection(editor: Editor) {
+  await copySelectionToClipboard(editor);
+  deleteSelection(editor);
+}
+
+function deleteSelection(editor: Editor) {
+  return editor.commands.deleteSelection();
+}
+
+function duplicateSelection(editor: Editor) {
+  const { to } = editor.state.selection;
+  const text = selectedText(editor);
+
+  if (!text) {
+    return;
+  }
+
+  return editor.commands.insertContentAt(to, text);
+}
+
+function clearSelectedValue() {
+  defaultValue.value = '';
+}
+
+function onActionClick(name: string, editor: Editor) {
+  switch (name) {
+    case 'Copy':
+      copySelectionToClipboard(editor);
+      break;
+    case 'Cut':
+      cutSelection(editor);
+      break;
+    case 'Delete':
+      deleteSelection(editor);
+      break;
+    case 'Duplicate':
+      duplicateSelection(editor);
+      break;
+    default:
+      break;
+  }
+}
+</script>
+
+<template>
+  <div class="show-more-wrapper">
+    <Select
+      v-model="defaultValue"
+      @update:model-value="onActionClick($event, props.editor)"
+      @update:open="clearSelectedValue"
+    >
+      <SelectTrigger variant="inline">
+        <Tooltip title="Extra settings" variant="dark">
+          <CompactButton
+            icon="i-celeste-more-2-line"
+            variant="ghost"
+          />
+        </Tooltip>
+      </SelectTrigger>
+      <SelectContent align="end" width="fit">
+        <SelectItem
+          v-for="(item, index) in extraSettings"
+          :key="index"
+          :value="item.name"
+        >
+          <SelectIcon>
+            <i :class="item.icon" />
+          </SelectIcon>
+          <span>{{ item.name }}</span>
+        </SelectItem>
+      </SelectContent>
+    </Select>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.show-more-wrapper {
+  :deep(.i-celeste-arrow-down-s-line) {
+    display: none;
+  }
+}
+
+.celeste-select-item[data-state='checked'] {
+  &:deep(.i-celeste-check-line) {
+    display: none;
+  }
+}
+</style>

package/src/components/rich-editor/index.ts

@@ -0,0 +1,2 @@
+export * from './rich-editor.vue';
+export { default as RichEditor } from './rich-editor.vue';

package/src/components/rich-editor/link-bubble.vue

@@ -0,0 +1,288 @@
+<script setup lang="ts">
+import type { Editor } from '@tiptap/vue-3';
+import Button from '@/components/button/button.vue';
+import CompactButton from '@/components/button/compact-button.vue';
+import LinkButton from '@/components/button/link-button.vue';
+import Label from '@/components/label/label.vue';
+import Switch from '@/components/switch/switch.vue';
+import TextInputAffix from '@/components/text-input/text-input-affix.vue';
+import TextInput from '@/components/text-input/text-input.vue';
+import { computed, defineAsyncComponent, onMounted, onUnmounted, ref } from 'vue';
+
+const props = defineProps<{
+  editor: Editor;
+  showSetLinkFromToolbar: boolean;
+}>();
+
+const emit = defineEmits(['set-link-closed']);
+
+const BubbleMenu = defineAsyncComponent(() =>
+  import('@tiptap/vue-3/menus').then(m => m.BubbleMenu),
+);
+
+const href = ref('');
+const openInNewTab = ref(false);
+const editing = ref(false);
+const isTextSelected = () => props.editor.state.selection.from !== props.editor.state.selection.to;
+
+const showBubble = computed(() => {
+  return editing.value
+    || props.editor.isActive('link')
+    || (props.showSetLinkFromToolbar && isTextSelected());
+});
+
+function startEdit() {
+  editing.value = true;
+
+  const attrs = props.editor.getAttributes('link');
+  href.value = attrs.href || '';
+  openInNewTab.value = attrs.target === '_blank';
+}
+
+function removeLink() {
+  props.editor.chain().focus().unsetLink().run();
+  reset();
+}
+
+function reset() {
+  editing.value = false;
+  href.value = '';
+  openInNewTab.value = false;
+  emit('set-link-closed');
+}
+
+function truncateMiddleUrl(str: string) {
+  const maxLength = 40;
+
+  if (str.length <= maxLength) {
+    return str;
+  }
+
+  const startChars = Math.ceil((maxLength - 3) / 2);
+  const endChars = Math.floor((maxLength - 3) / 2);
+
+  return `${str.slice(0, startChars)}...${str.slice(-endChars)}`;
+}
+
+function isAllowedUri(): boolean {
+  const url = href.value.trim();
+
+  if (!url || url.includes(' ')) {
+    return false;
+  }
+
+  if (url.startsWith('/')) {
+    return true;
+  }
+
+  if (url.startsWith('./') || url.startsWith('../')) {
+    return false;
+  }
+
+  const allowedProtocols = /^(?:https?:|mailto:)/i;
+  const disallowedProtocols = /^(?:javascript:|data:)/i;
+
+  if (disallowedProtocols.test(url)) {
+    return false;
+  }
+
+  if (allowedProtocols.test(url)) {
+    return true;
+  }
+
+  return false;
+}
+
+const isValidUrl = computed(() => isAllowedUri());
+
+function applyLink() {
+  if (!href.value || !isValidUrl.value) {
+    return;
+  }
+
+  props.editor
+    .chain()
+    .focus()
+    .extendMarkRange('link')
+    .setLink({
+      href: href.value,
+      target: openInNewTab.value ? '_blank' : null,
+    })
+    .run();
+
+  reset();
+}
+
+const bubbleRef = ref<HTMLElement | null>(null);
+
+function handleClickOutside(event: Event): void {
+  const target = event.target as Element;
+
+  if (!bubbleRef.value) {
+    return;
+  }
+
+  if (bubbleRef.value && bubbleRef.value.contains(target)) {
+    return;
+  }
+
+  if (target.closest('.i-celeste-link')) {
+    return;
+  }
+
+  emit('set-link-closed');
+}
+
+onMounted(() => {
+  props.editor.on('selectionUpdate', () => {
+    if (props.editor.isActive('link') || props.showSetLinkFromToolbar) {
+      const attrs = props.editor.getAttributes('link');
+      href.value = attrs.href || '';
+      openInNewTab.value = attrs.target === '_blank';
+    }
+    else {
+      reset();
+    }
+  });
+
+  document.addEventListener('click', handleClickOutside);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside);
+});
+</script>
+
+<template>
+  <BubbleMenu
+    :should-show="() => true"
+    :editor="editor"
+    :options="{
+      placement: 'bottom',
+      offset: {
+        mainAxis: 0,
+        crossAxis: 12,
+      },
+    }"
+  >
+    <div
+      v-if="showBubble"
+      ref="bubbleRef"
+      class="link-bubble"
+    >
+      <template v-if="editing || (props.showSetLinkFromToolbar && isTextSelected())">
+        <div class="set-mode">
+          <div class="set-link">
+            <TextInput
+              v-model="href"
+              type="url"
+              size="xs"
+              placeholder="Paste or type a link"
+              class="link-input"
+              @keydown.enter="applyLink"
+              @keydown.esc="reset"
+            >
+              <template #leadingNode>
+                <TextInputAffix>
+                  <i class="i-celeste-link" />
+                </TextInputAffix>
+              </template>
+            </TextInput>
+            <Button
+              intent="neutral"
+              size="xs"
+              variant="stroke"
+              :disabled="!isValidUrl"
+              @click="applyLink"
+            >
+              Set link
+            </Button>
+          </div>
+          <div class="switch-button-box">
+            <Label for="open-in-new-tab">
+              Open in new tab
+            </Label>
+            <Switch id="open-in-new-tab" v-model:checked="openInNewTab" />
+          </div>
+        </div>
+      </template>
+
+      <template v-else-if="props.editor.isActive('link')">
+        <div class="edit-mode">
+          <LinkButton
+            :href="editor.getAttributes('link').href"
+            :target="editor.getAttributes('link').target"
+          >
+            {{ truncateMiddleUrl(editor.getAttributes('link').href) }}
+          </LinkButton>
+          <div class="divider" />
+          <CompactButton
+            icon="i-celeste-edit-line"
+            size="lg"
+            variant="ghost"
+            @click="startEdit"
+          />
+          <CompactButton
+            icon="i-celeste-delete-bin-line"
+            size="lg"
+            variant="ghost"
+            @click="removeLink"
+          />
+        </div>
+      </template>
+    </div>
+  </BubbleMenu>
+</template>
+
+<style scoped lang="scss">
+.link-bubble {
+  position: fixed;
+  z-index: 1000;
+  padding: var(--spacing-12);
+  border: 1px solid var(--color-stroke-soft-200);
+  border-radius: var(--radius-12);
+  background-color: var(--color-bg-white-0);
+  box-shadow: var(--shadow-regular-xs);
+
+  .set-mode {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-12);
+
+    .set-link {
+      display: flex;
+      gap: var(--spacing-8);
+    }
+
+    :deep(.celeste-switch[aria-checked='true']) {
+      background-color: var(--color-neutral-700);
+    }
+
+    .switch-button-box {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-8);
+    }
+  }
+
+  .edit-mode {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-8);
+
+    .divider {
+      width: 1px;
+      height: 16px;
+      margin: 0 3px;
+      background: var(--color-stroke-soft-200);
+    }
+
+    & :deep(.celeste-link-button) {
+      display: flex;
+      border-radius: var(--radius-8);
+      color: var(--color-neutral-700);
+      gap: var(--spacing-8);
+    }
+  }
+}
+</style>