mirror of https://github.com/nocodb/nocodb
github-actions[bot]
4 months ago
committed by
GitHub
209 changed files with 7948 additions and 2694 deletions
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
@ -0,0 +1,150 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
import dayjs from 'dayjs' |
||||||
|
|
||||||
|
interface Props { |
||||||
|
size?: 'medium' |
||||||
|
selectedDate?: dayjs.Dayjs | null |
||||||
|
pageDate?: dayjs.Dayjs |
||||||
|
isCellInputField?: boolean |
||||||
|
type: 'date' | 'time' | 'year' | 'month' |
||||||
|
isOpen: boolean |
||||||
|
} |
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), { |
||||||
|
size: 'medium', |
||||||
|
selectedDate: null, |
||||||
|
pageDate: () => dayjs(), |
||||||
|
isCellInputField: false, |
||||||
|
type: 'date', |
||||||
|
isOpen: false, |
||||||
|
}) |
||||||
|
const emit = defineEmits(['update:selectedDate', 'update:pageDate', 'update:selectedWeek']) |
||||||
|
// Page date is the date we use to manage which month/date that is currently being displayed |
||||||
|
const pageDate = useVModel(props, 'pageDate', emit) |
||||||
|
|
||||||
|
const selectedDate = useVModel(props, 'selectedDate', emit) |
||||||
|
|
||||||
|
const { type, isOpen } = toRefs(props) |
||||||
|
|
||||||
|
const localPageDate = ref() |
||||||
|
|
||||||
|
const localSelectedDate = ref() |
||||||
|
|
||||||
|
const pickerType = ref<Props['type'] | undefined>() |
||||||
|
|
||||||
|
const pickerStack = ref<Props['type'][]>([]) |
||||||
|
|
||||||
|
const tempPickerType = computed(() => pickerType.value || type.value) |
||||||
|
|
||||||
|
const handleUpdatePickerType = (value?: Props['type']) => { |
||||||
|
if (value) { |
||||||
|
pickerType.value = value |
||||||
|
pickerStack.value.push(value) |
||||||
|
} else { |
||||||
|
if (pickerStack.value.length > 1) { |
||||||
|
pickerStack.value.pop() |
||||||
|
const lastPicker = pickerStack.value.pop() |
||||||
|
pickerType.value = lastPicker |
||||||
|
} else { |
||||||
|
pickerStack.value = [] |
||||||
|
pickerType.value = type.value |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const localStatePageDate = computed({ |
||||||
|
get: () => { |
||||||
|
if (localPageDate.value) { |
||||||
|
return localPageDate.value |
||||||
|
} |
||||||
|
return pageDate.value |
||||||
|
}, |
||||||
|
set: (value) => { |
||||||
|
pageDate.value = value |
||||||
|
localPageDate.value = value |
||||||
|
emit('update:pageDate', value) |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
const localStateSelectedDate = computed({ |
||||||
|
get: () => { |
||||||
|
if (localSelectedDate.value) { |
||||||
|
return localSelectedDate.value |
||||||
|
} |
||||||
|
return pageDate.value |
||||||
|
}, |
||||||
|
set: (value: dayjs.Dayjs) => { |
||||||
|
if (!value.isValid()) return |
||||||
|
|
||||||
|
if (pickerType.value === type.value) { |
||||||
|
localPageDate.value = value |
||||||
|
emit('update:selectedDate', value) |
||||||
|
localSelectedDate.value = undefined |
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
if (['date', 'month'].includes(type.value)) { |
||||||
|
if (pickerType.value === 'year') { |
||||||
|
localSelectedDate.value = dayjs(localPageDate.value ?? localSelectedDate.value ?? selectedDate.value ?? dayjs()).year( |
||||||
|
+value.format('YYYY'), |
||||||
|
) |
||||||
|
} |
||||||
|
if (type.value !== 'month' && pickerType.value === 'month') { |
||||||
|
localSelectedDate.value = dayjs(localPageDate.value ?? localSelectedDate.value ?? selectedDate.value ?? dayjs()).month( |
||||||
|
+value.format('MM') - 1, |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
localPageDate.value = localSelectedDate.value |
||||||
|
|
||||||
|
handleUpdatePickerType() |
||||||
|
} |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
watch(isOpen, (next) => { |
||||||
|
if (!next) { |
||||||
|
pickerType.value = type.value |
||||||
|
localPageDate.value = undefined |
||||||
|
localSelectedDate.value = undefined |
||||||
|
pickerStack.value = [] |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
onUnmounted(() => { |
||||||
|
pickerType.value = type.value |
||||||
|
localPageDate.value = undefined |
||||||
|
localSelectedDate.value = undefined |
||||||
|
pickerStack.value = [] |
||||||
|
}) |
||||||
|
onMounted(() => { |
||||||
|
localPageDate.value = undefined |
||||||
|
localSelectedDate.value = undefined |
||||||
|
pickerStack.value = [] |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<NcDateWeekSelector |
||||||
|
v-if="tempPickerType === 'date'" |
||||||
|
v-model:page-date="localStatePageDate" |
||||||
|
v-model:selected-date="localStateSelectedDate" |
||||||
|
:picker-type="pickerType" |
||||||
|
:is-monday-first="false" |
||||||
|
is-cell-input-field |
||||||
|
size="medium" |
||||||
|
@update:picker-type="handleUpdatePickerType" |
||||||
|
/> |
||||||
|
<NcMonthYearSelector |
||||||
|
v-if="['month', 'year'].includes(tempPickerType)" |
||||||
|
v-model:page-date="localStatePageDate" |
||||||
|
v-model:selected-date="localStateSelectedDate" |
||||||
|
:picker-type="pickerType" |
||||||
|
:is-year-picker="tempPickerType === 'year'" |
||||||
|
is-cell-input-field |
||||||
|
size="medium" |
||||||
|
@update:picker-type="handleUpdatePickerType" |
||||||
|
/> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style lang="scss" scoped></style> |
||||||
@ -0,0 +1,104 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
import dayjs from 'dayjs' |
||||||
|
|
||||||
|
interface Props { |
||||||
|
selectedDate: dayjs.Dayjs | null |
||||||
|
is12hrFormat?: boolean |
||||||
|
isMinGranularityPicker?: boolean |
||||||
|
minGranularity?: number |
||||||
|
isOpen?: boolean |
||||||
|
} |
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), { |
||||||
|
selectedDate: null, |
||||||
|
is12hrFormat: false, |
||||||
|
isMinGranularityPicker: false, |
||||||
|
minGranularity: 30, |
||||||
|
isOpen: false, |
||||||
|
}) |
||||||
|
const emit = defineEmits(['update:selectedDate']) |
||||||
|
|
||||||
|
const pageDate = ref<dayjs.Dayjs>(dayjs()) |
||||||
|
|
||||||
|
const selectedDate = useVModel(props, 'selectedDate', emit) |
||||||
|
|
||||||
|
const { is12hrFormat, isMinGranularityPicker, minGranularity, isOpen } = toRefs(props) |
||||||
|
|
||||||
|
const timeOptionsWrapperRef = ref<HTMLDivElement>() |
||||||
|
|
||||||
|
const compareTime = (date1: dayjs.Dayjs, date2: dayjs.Dayjs) => { |
||||||
|
if (!date1 || !date2) return false |
||||||
|
|
||||||
|
return date1.format('HH:mm') === date2.format('HH:mm') |
||||||
|
} |
||||||
|
|
||||||
|
const handleSelectTime = (time: dayjs.Dayjs) => { |
||||||
|
pageDate.value = dayjs().set('hour', time.get('hour')).set('minute', time.get('minute')) |
||||||
|
|
||||||
|
selectedDate.value = pageDate.value |
||||||
|
|
||||||
|
// emit('update:selectedDate', pageDate.value) |
||||||
|
} |
||||||
|
|
||||||
|
// TODO: 12hr time format & regular time picker |
||||||
|
const timeOptions = computed(() => { |
||||||
|
return Array.from({ length: is12hrFormat.value ? 12 : 24 }).flatMap((_, h) => { |
||||||
|
return (isMinGranularityPicker.value ? [0, minGranularity.value] : Array.from({ length: 60 })).map((_m, m) => { |
||||||
|
const time = dayjs() |
||||||
|
.set('hour', h) |
||||||
|
.set('minute', isMinGranularityPicker.value ? (_m as number) : m) |
||||||
|
|
||||||
|
return time |
||||||
|
}) |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
const handleAutoScroll = (behavior: ScrollBehavior = 'instant') => { |
||||||
|
if (!timeOptionsWrapperRef.value || !selectedDate.value) return |
||||||
|
|
||||||
|
setTimeout(() => { |
||||||
|
const timeEl = timeOptionsWrapperRef.value?.querySelector( |
||||||
|
`[data-testid="time-option-${selectedDate.value?.format('HH:mm')}"]`, |
||||||
|
) |
||||||
|
|
||||||
|
timeEl?.scrollIntoView({ behavior, block: 'center' }) |
||||||
|
}, 50) |
||||||
|
} |
||||||
|
|
||||||
|
watch([selectedDate, isOpen], () => { |
||||||
|
if (timeOptionsWrapperRef.value && isOpen.value && selectedDate.value) { |
||||||
|
handleAutoScroll() |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
handleAutoScroll() |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div class="flex flex-col max-w-[350px]"> |
||||||
|
<div v-if="isMinGranularityPicker" ref="timeOptionsWrapperRef" class="h-[180px] overflow-y-auto nc-scrollbar-thin"> |
||||||
|
<div |
||||||
|
v-for="time of timeOptions" |
||||||
|
:key="time.format('HH:mm')" |
||||||
|
class="hover:bg-gray-100 py-1 px-3 text-sm text-gray-600 font-weight-500 text-center cursor-pointer" |
||||||
|
:class="{ |
||||||
|
'nc-selected bg-gray-100': selectedDate && compareTime(time, selectedDate), |
||||||
|
}" |
||||||
|
:data-testid="`time-option-${time.format('HH:mm')}`" |
||||||
|
@click="handleSelectTime(time)" |
||||||
|
> |
||||||
|
{{ time.format('HH:mm') }} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div v-else></div> |
||||||
|
<div class="px-2 py-1 box-border flex items-center justify-center"> |
||||||
|
<NcButton :tabindex="-1" class="!h-7" size="small" type="secondary" @click="handleSelectTime(dayjs())"> |
||||||
|
<span class="text-small"> {{ $t('general.now') }} </span> |
||||||
|
</NcButton> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style lang="scss" scoped></style> |
||||||
@ -0,0 +1,380 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
import StarterKit from '@tiptap/starter-kit' |
||||||
|
import { EditorContent, useEditor } from '@tiptap/vue-3' |
||||||
|
import TurndownService from 'turndown' |
||||||
|
import { marked } from 'marked' |
||||||
|
import { generateJSON } from '@tiptap/html' |
||||||
|
import Underline from '@tiptap/extension-underline' |
||||||
|
import Placeholder from '@tiptap/extension-placeholder' |
||||||
|
import { Link } from '~/helpers/dbTiptapExtensions/links' |
||||||
|
|
||||||
|
const props = withDefaults( |
||||||
|
defineProps<{ |
||||||
|
hideOptions?: boolean |
||||||
|
value?: string | null |
||||||
|
readOnly?: boolean |
||||||
|
syncValueChange?: boolean |
||||||
|
autofocus?: boolean |
||||||
|
placeholder?: string |
||||||
|
renderAsText?: boolean |
||||||
|
}>(), |
||||||
|
{ |
||||||
|
hideOptions: true, |
||||||
|
}, |
||||||
|
) |
||||||
|
|
||||||
|
const emits = defineEmits(['update:value', 'focus', 'blur', 'save']) |
||||||
|
|
||||||
|
const isGrid = inject(IsGridInj, ref(false)) |
||||||
|
|
||||||
|
const isFocused = ref(false) |
||||||
|
|
||||||
|
const keys = useMagicKeys() |
||||||
|
|
||||||
|
const turndownService = new TurndownService({}) |
||||||
|
|
||||||
|
turndownService.addRule('lineBreak', { |
||||||
|
filter: (node) => { |
||||||
|
return node.nodeName === 'BR' |
||||||
|
}, |
||||||
|
replacement: () => { |
||||||
|
return '<br />' |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
turndownService.addRule('strikethrough', { |
||||||
|
filter: ['s'], |
||||||
|
replacement: (content) => { |
||||||
|
return `~${content}~` |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
turndownService.keep(['u', 'del']) |
||||||
|
|
||||||
|
const editorDom = ref<HTMLElement | null>(null) |
||||||
|
|
||||||
|
const richTextLinkOptionRef = ref<HTMLElement | null>(null) |
||||||
|
|
||||||
|
const vModel = useVModel(props, 'value', emits, { defaultValue: '' }) |
||||||
|
|
||||||
|
const tiptapExtensions = [ |
||||||
|
StarterKit.configure({ |
||||||
|
heading: false, |
||||||
|
}), |
||||||
|
Underline, |
||||||
|
Link, |
||||||
|
Placeholder.configure({ |
||||||
|
emptyEditorClass: 'is-editor-empty', |
||||||
|
placeholder: props.placeholder, |
||||||
|
}), |
||||||
|
] |
||||||
|
|
||||||
|
const editor = useEditor({ |
||||||
|
extensions: tiptapExtensions, |
||||||
|
onUpdate: ({ editor }) => { |
||||||
|
const markdown = turndownService |
||||||
|
.turndown(editor.getHTML().replaceAll(/<p><\/p>/g, '<br />')) |
||||||
|
.replaceAll(/\n\n<br \/>\n\n/g, '<br>\n\n') |
||||||
|
vModel.value = markdown === '<br />' ? '' : markdown |
||||||
|
}, |
||||||
|
editable: !props.readOnly, |
||||||
|
autofocus: props.autofocus, |
||||||
|
onFocus: () => { |
||||||
|
isFocused.value = true |
||||||
|
emits('focus') |
||||||
|
}, |
||||||
|
onBlur: (e) => { |
||||||
|
if ( |
||||||
|
!(e?.event?.relatedTarget as HTMLElement)?.closest('.comment-bubble-menu, .nc-comment-rich-editor, .nc-rich-text-comment') |
||||||
|
) { |
||||||
|
isFocused.value = false |
||||||
|
emits('blur') |
||||||
|
} |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
const setEditorContent = (contentMd: any, focusEndOfDoc?: boolean) => { |
||||||
|
if (!editor.value) return |
||||||
|
|
||||||
|
const selection = editor.value.view.state.selection |
||||||
|
|
||||||
|
const contentHtml = contentMd ? marked.parse(contentMd) : '<p></p>' |
||||||
|
|
||||||
|
const content = generateJSON(contentHtml, tiptapExtensions) |
||||||
|
|
||||||
|
editor.value.chain().setContent(content).setTextSelection(selection.to).run() |
||||||
|
|
||||||
|
setTimeout(() => { |
||||||
|
if (focusEndOfDoc) { |
||||||
|
const docSize = editor.value!.state.doc.nodeSize |
||||||
|
|
||||||
|
editor.value |
||||||
|
?.chain() |
||||||
|
.setTextSelection(docSize - 1) |
||||||
|
.run() |
||||||
|
} |
||||||
|
|
||||||
|
;(editor.value!.state as any).history$.prevRanges = null |
||||||
|
;(editor.value!.state as any).history$.done.eventCount = 0 |
||||||
|
}, 100) |
||||||
|
} |
||||||
|
|
||||||
|
const onFocusWrapper = () => { |
||||||
|
if (!props.readOnly && !keys.shift.value) { |
||||||
|
editor.value?.chain().focus().run() |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
if (props.syncValueChange) { |
||||||
|
watch([vModel, editor], () => { |
||||||
|
setEditorContent(vModel.value) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
useEventListener( |
||||||
|
editorDom, |
||||||
|
'focusout', |
||||||
|
(e: FocusEvent) => { |
||||||
|
const targetEl = e?.relatedTarget as HTMLElement |
||||||
|
if ( |
||||||
|
targetEl?.classList?.contains('tiptap') || |
||||||
|
!targetEl?.closest('.comment-bubble-menu, .tippy-content, .nc-comment-rich-editor') |
||||||
|
) { |
||||||
|
isFocused.value = false |
||||||
|
emits('blur') |
||||||
|
} |
||||||
|
}, |
||||||
|
true, |
||||||
|
) |
||||||
|
useEventListener( |
||||||
|
richTextLinkOptionRef, |
||||||
|
'focusout', |
||||||
|
(e: FocusEvent) => { |
||||||
|
const targetEl = e?.relatedTarget as HTMLElement |
||||||
|
if (!targetEl && (e.target as HTMLElement)?.closest('.comment-bubble-menu, .tippy-content, .nc-comment-rich-editor')) return |
||||||
|
|
||||||
|
if (!targetEl?.closest('.comment-bubble-menu, .tippy-content, .nc-comment-rich-editor')) { |
||||||
|
isFocused.value = false |
||||||
|
emits('blur') |
||||||
|
} |
||||||
|
}, |
||||||
|
true, |
||||||
|
) |
||||||
|
onClickOutside(editorDom, (e) => { |
||||||
|
if (!isFocused.value) return |
||||||
|
|
||||||
|
const targetEl = e?.target as HTMLElement |
||||||
|
|
||||||
|
if (!targetEl?.closest('.tippy-content, .comment-bubble-menu, .nc-comment-rich-editor')) { |
||||||
|
isFocused.value = false |
||||||
|
emits('blur') |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
const triggerSaveFromList = ref(false) |
||||||
|
|
||||||
|
const emitSave = (event: KeyboardEvent) => { |
||||||
|
if (editor.value) { |
||||||
|
if (triggerSaveFromList.value) { |
||||||
|
// If Enter was pressed in the list, do not emit save |
||||||
|
triggerSaveFromList.value = false |
||||||
|
} else { |
||||||
|
if (editor.value.isActive('bulletList') || editor.value.isActive('orderedList')) { |
||||||
|
event.stopPropagation() |
||||||
|
} else { |
||||||
|
emits('save') |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const handleEnterDown = (event: KeyboardEvent) => { |
||||||
|
const isListsActive = editor.value?.isActive('bulletList') || editor.value?.isActive('orderedList') |
||||||
|
if (isListsActive) { |
||||||
|
triggerSaveFromList.value = true |
||||||
|
setTimeout(() => { |
||||||
|
triggerSaveFromList.value = false |
||||||
|
}, 1000) |
||||||
|
} else { |
||||||
|
emitSave(event) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const handleKeyPress = (event: KeyboardEvent) => { |
||||||
|
if (event.altKey && event.key === 'Enter') { |
||||||
|
event.stopPropagation() |
||||||
|
} else if (event.shiftKey && event.key === 'Enter') { |
||||||
|
event.stopPropagation() |
||||||
|
} else if (event.key === 'Enter') { |
||||||
|
handleEnterDown(event) |
||||||
|
} else if (event.key === 'Escape') { |
||||||
|
isFocused.value = false |
||||||
|
emits('blur') |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
defineExpose({ |
||||||
|
setEditorContent, |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div |
||||||
|
:class="{ |
||||||
|
'readonly': readOnly, |
||||||
|
'nc-rich-text-grid': isGrid, |
||||||
|
}" |
||||||
|
:tabindex="1" |
||||||
|
class="nc-rich-text-comment flex flex-col w-full h-full" |
||||||
|
@focus="onFocusWrapper" |
||||||
|
> |
||||||
|
<div v-if="renderAsText" class="truncate"> |
||||||
|
<span v-if="editor"> {{ editor?.getText() ?? '' }}</span> |
||||||
|
</div> |
||||||
|
<template v-else> |
||||||
|
<CellRichTextLinkOptions |
||||||
|
v-if="editor" |
||||||
|
ref="richTextLinkOptionRef" |
||||||
|
:editor="editor" |
||||||
|
:is-form-field="true" |
||||||
|
@blur="isFocused = false" |
||||||
|
/> |
||||||
|
|
||||||
|
<EditorContent |
||||||
|
ref="editorDom" |
||||||
|
:editor="editor" |
||||||
|
class="flex flex-col nc-comment-rich-editor px-1.5 w-full scrollbar-thin scrollbar-thumb-gray-200 nc-truncate scrollbar-track-transparent" |
||||||
|
@keydown.stop="handleKeyPress" |
||||||
|
/> |
||||||
|
|
||||||
|
<div v-if="!hideOptions" class="flex justify-between px-2 py-2 items-center"> |
||||||
|
<LazySmartsheetExpandedFormRichTextOptions :editor="editor" class="!bg-transparent" /> |
||||||
|
<NcButton |
||||||
|
v-e="['a:row-expand:comment:save']" |
||||||
|
:disabled="!vModel?.length" |
||||||
|
class="!disabled:bg-gray-100 !h-7 !w-7 !shadow-none" |
||||||
|
size="xsmall" |
||||||
|
@click="emits('save')" |
||||||
|
> |
||||||
|
<GeneralIcon icon="send" /> |
||||||
|
</NcButton> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
.nc-rich-text-comment { |
||||||
|
.readonly { |
||||||
|
.nc-comment-rich-editor { |
||||||
|
.ProseMirror { |
||||||
|
resize: none; |
||||||
|
white-space: pre-line; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.nc-comment-rich-editor { |
||||||
|
&.nc-truncate { |
||||||
|
.tiptap.ProseMirror { |
||||||
|
display: -webkit-box; |
||||||
|
max-width: 100%; |
||||||
|
outline: none; |
||||||
|
-webkit-box-orient: vertical; |
||||||
|
word-break: break-word; |
||||||
|
} |
||||||
|
&.nc-line-clamp-1 .tiptap.ProseMirror { |
||||||
|
-webkit-line-clamp: 1; |
||||||
|
} |
||||||
|
&.nc-line-clamp-2 .tiptap.ProseMirror { |
||||||
|
-webkit-line-clamp: 2; |
||||||
|
} |
||||||
|
&.nc-line-clamp-3 .tiptap.ProseMirror { |
||||||
|
-webkit-line-clamp: 3; |
||||||
|
} |
||||||
|
&.nc-line-clamp-4 .tiptap.ProseMirror { |
||||||
|
-webkit-line-clamp: 4; |
||||||
|
} |
||||||
|
} |
||||||
|
.tiptap p.is-editor-empty:first-child::before { |
||||||
|
color: #9aa2af; |
||||||
|
content: attr(data-placeholder); |
||||||
|
float: left; |
||||||
|
height: 0; |
||||||
|
pointer-events: none; |
||||||
|
} |
||||||
|
|
||||||
|
.ProseMirror { |
||||||
|
@apply flex-grow !border-0 rounded-lg; |
||||||
|
caret-color: #3366ff; |
||||||
|
} |
||||||
|
|
||||||
|
p { |
||||||
|
@apply !m-0; |
||||||
|
} |
||||||
|
|
||||||
|
.ProseMirror-focused { |
||||||
|
// remove all border |
||||||
|
outline: none; |
||||||
|
} |
||||||
|
|
||||||
|
ul { |
||||||
|
li { |
||||||
|
@apply ml-4; |
||||||
|
list-style-type: disc; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
ol { |
||||||
|
@apply !pl-4; |
||||||
|
li { |
||||||
|
list-style-type: decimal; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
ul, |
||||||
|
ol { |
||||||
|
@apply !my-0; |
||||||
|
} |
||||||
|
|
||||||
|
// Pre tag is the parent wrapper for Code block |
||||||
|
pre { |
||||||
|
border-color: #d0d5dd; |
||||||
|
border: 1px; |
||||||
|
color: black; |
||||||
|
font-family: 'JetBrainsMono', monospace; |
||||||
|
padding: 1rem; |
||||||
|
border-radius: 0.5rem; |
||||||
|
@apply overflow-auto mt-3 bg-gray-100; |
||||||
|
|
||||||
|
code { |
||||||
|
@apply !px-0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
code { |
||||||
|
@apply rounded-md px-2 py-1 bg-gray-100; |
||||||
|
color: inherit; |
||||||
|
font-size: 0.8rem; |
||||||
|
} |
||||||
|
|
||||||
|
blockquote { |
||||||
|
border-left: 3px solid #d0d5dd; |
||||||
|
padding: 0 1em; |
||||||
|
color: #666; |
||||||
|
margin: 1em 0; |
||||||
|
font-style: italic; |
||||||
|
} |
||||||
|
|
||||||
|
hr { |
||||||
|
@apply !border-gray-300; |
||||||
|
border: 0; |
||||||
|
border-top: 1px solid #ccc; |
||||||
|
margin: 1.5em 0; |
||||||
|
} |
||||||
|
|
||||||
|
pre { |
||||||
|
height: fit-content; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,215 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
import type { Editor } from '@tiptap/vue-3' |
||||||
|
import MdiFormatStrikeThrough from '~icons/mdi/format-strikethrough' |
||||||
|
|
||||||
|
interface Props { |
||||||
|
editor: Editor | undefined |
||||||
|
} |
||||||
|
const props = withDefaults(defineProps<Props>(), {}) |
||||||
|
|
||||||
|
const { appInfo } = useGlobal() |
||||||
|
|
||||||
|
const { editor } = toRefs(props) |
||||||
|
|
||||||
|
const cmdOrCtrlKey = computed(() => { |
||||||
|
return isMac() ? '⌘' : 'CTRL' |
||||||
|
}) |
||||||
|
|
||||||
|
const shiftKey = computed(() => { |
||||||
|
return isMac() ? '⇧' : 'Shift' |
||||||
|
}) |
||||||
|
|
||||||
|
const tabIndex = computed(() => { |
||||||
|
return -1 |
||||||
|
}) |
||||||
|
|
||||||
|
const onToggleLink = () => { |
||||||
|
if (!editor.value) return |
||||||
|
|
||||||
|
const activeNode = editor.value?.state?.selection?.$from?.nodeBefore || editor.value?.state?.selection?.$from?.nodeAfter |
||||||
|
|
||||||
|
const isLinkMarkedStoredInEditor = editor.value?.state?.storedMarks?.some((mark: any) => mark.type.name === 'link') |
||||||
|
|
||||||
|
const isActiveNodeMarkActive = activeNode?.marks?.some((mark: any) => mark.type.name === 'link') || isLinkMarkedStoredInEditor |
||||||
|
|
||||||
|
if (isActiveNodeMarkActive) { |
||||||
|
editor.value.chain().focus().unsetLink().run() |
||||||
|
} else { |
||||||
|
if (editor.value?.state.selection.empty) { |
||||||
|
editor |
||||||
|
.value!.chain() |
||||||
|
.focus() |
||||||
|
.insertContent(' ') |
||||||
|
.setTextSelection({ from: editor.value?.state.selection.$from.pos, to: editor.value.state.selection.$from.pos + 1 }) |
||||||
|
.toggleLink({ |
||||||
|
href: '', |
||||||
|
}) |
||||||
|
.setTextSelection({ from: editor.value?.state.selection.$from.pos, to: editor.value.state.selection.$from.pos + 1 }) |
||||||
|
.deleteSelection() |
||||||
|
.run() |
||||||
|
} else { |
||||||
|
editor |
||||||
|
.value!.chain() |
||||||
|
.focus() |
||||||
|
.setLink({ |
||||||
|
href: '', |
||||||
|
}) |
||||||
|
.selectTextblockEnd() |
||||||
|
.run() |
||||||
|
} |
||||||
|
|
||||||
|
setTimeout(() => { |
||||||
|
const linkInput = document.querySelector('.nc-text-area-rich-link-option-input') |
||||||
|
if (linkInput) { |
||||||
|
;(linkInput as any).focus() |
||||||
|
} |
||||||
|
}, 100) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const newMentionNode = () => { |
||||||
|
editor.value?.commands.insertContent('@') |
||||||
|
editor.value?.chain().focus().run() |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div class="comment-bubble-menu bg-transparent flex-row rounded-lg flex"> |
||||||
|
<NcTooltip> |
||||||
|
<template #title> |
||||||
|
<div class="flex flex-col items-center"> |
||||||
|
<div> |
||||||
|
{{ $t('labels.bold') }} |
||||||
|
</div> |
||||||
|
<div class="text-xs">{{ cmdOrCtrlKey }} B</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<NcButton |
||||||
|
:class="{ 'is-active': editor?.isActive('bold') }" |
||||||
|
:tabindex="tabIndex" |
||||||
|
class="!h-7 !w-7 !hover:bg-gray-200" |
||||||
|
size="xsmall" |
||||||
|
type="text" |
||||||
|
@click="editor?.chain().focus().toggleBold().run()" |
||||||
|
> |
||||||
|
<GeneralIcon icon="bold" /> |
||||||
|
</NcButton> |
||||||
|
</NcTooltip> |
||||||
|
|
||||||
|
<NcTooltip :disabled="editor?.isActive('italic')"> |
||||||
|
<template #title> |
||||||
|
<div class="flex flex-col items-center"> |
||||||
|
<div> |
||||||
|
{{ $t('labels.italic') }} |
||||||
|
</div> |
||||||
|
<div>{{ cmdOrCtrlKey }} I</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<NcButton |
||||||
|
:class="{ 'is-active': editor?.isActive('italic') }" |
||||||
|
:tabindex="tabIndex" |
||||||
|
class="!h-7 !w-7 !hover:bg-gray-200" |
||||||
|
size="xsmall" |
||||||
|
type="text" |
||||||
|
@click=";(editor?.chain().focus() as any).toggleItalic().run()" |
||||||
|
> |
||||||
|
<GeneralIcon icon="italic" /> |
||||||
|
</NcButton> |
||||||
|
</NcTooltip> |
||||||
|
<NcTooltip> |
||||||
|
<template #title> |
||||||
|
<div class="flex flex-col items-center"> |
||||||
|
<div> |
||||||
|
{{ $t('labels.underline') }} |
||||||
|
</div> |
||||||
|
<div>{{ cmdOrCtrlKey }} U</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<NcButton |
||||||
|
:class="{ 'is-active': editor?.isActive('underline') }" |
||||||
|
:tabindex="tabIndex" |
||||||
|
class="!h-7 !w-7 !hover:bg-gray-200" |
||||||
|
size="xsmall" |
||||||
|
type="text" |
||||||
|
@click="editor?.chain().focus().toggleUnderline().run()" |
||||||
|
> |
||||||
|
<GeneralIcon icon="underline" /> |
||||||
|
</NcButton> |
||||||
|
</NcTooltip> |
||||||
|
<NcTooltip> |
||||||
|
<template #title> |
||||||
|
<div class="flex flex-col items-center"> |
||||||
|
<div> |
||||||
|
{{ $t('labels.strike') }} |
||||||
|
</div> |
||||||
|
<div>{{ shiftKey }} {{ cmdOrCtrlKey }} S</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<NcButton |
||||||
|
:class="{ 'is-active': editor?.isActive('strike') }" |
||||||
|
:tabindex="tabIndex" |
||||||
|
class="!h-7 !w-7 !hover:bg-gray-200" |
||||||
|
size="xsmall" |
||||||
|
type="text" |
||||||
|
@click="editor?.chain().focus().toggleStrike().run()" |
||||||
|
> |
||||||
|
<GeneralIcon icon="strike" /> |
||||||
|
</NcButton> |
||||||
|
</NcTooltip> |
||||||
|
|
||||||
|
<NcTooltip> |
||||||
|
<template #title> {{ $t('general.link') }}</template> |
||||||
|
<NcButton |
||||||
|
:class="{ 'is-active': editor?.isActive('link') }" |
||||||
|
:tabindex="tabIndex" |
||||||
|
class="!h-7 !w-7 !hover:bg-gray-200" |
||||||
|
size="xsmall" |
||||||
|
type="text" |
||||||
|
@click="onToggleLink" |
||||||
|
> |
||||||
|
<GeneralIcon icon="link2"></GeneralIcon> |
||||||
|
</NcButton> |
||||||
|
</NcTooltip> |
||||||
|
<NcTooltip v-if="appInfo.ee"> |
||||||
|
<template #title> |
||||||
|
<div class="flex flex-col items-center"> |
||||||
|
<div> |
||||||
|
{{ $t('labels.mention') }} |
||||||
|
</div> |
||||||
|
<div>@</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<NcButton |
||||||
|
:class="{ 'is-active': editor?.isActive('suggestions') }" |
||||||
|
:tabindex="tabIndex" |
||||||
|
class="!h-7 !w-7 !hover:bg-gray-200" |
||||||
|
size="xsmall" |
||||||
|
type="text" |
||||||
|
@click="newMentionNode" |
||||||
|
> |
||||||
|
<GeneralIcon icon="atSign" /> |
||||||
|
</NcButton> |
||||||
|
</NcTooltip> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.comment-bubble-menu { |
||||||
|
@apply !border-none; |
||||||
|
|
||||||
|
.nc-button.is-active { |
||||||
|
@apply text-brand-500; |
||||||
|
outline: 1px; |
||||||
|
} |
||||||
|
.ant-select-selector { |
||||||
|
@apply !rounded-md; |
||||||
|
} |
||||||
|
.ant-select-selector .ant-select-selection-item { |
||||||
|
@apply !text-xs; |
||||||
|
} |
||||||
|
.ant-btn-loading-icon { |
||||||
|
@apply pb-0.5; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
|
After Width: | Height: | Size: 267 KiB |
|
After Width: | Height: | Size: 160 KiB |
|
After Width: | Height: | Size: 145 KiB |
|
After Width: | Height: | Size: 180 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue