|
|
|
@ -14,6 +14,7 @@ import MsFormatQuote from '~icons/material-symbols/format-quote'
|
|
|
|
|
interface Props { |
|
|
|
|
editor: Editor |
|
|
|
|
embedMode?: boolean |
|
|
|
|
isFormField?: boolean |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const props = defineProps<Props>() |
|
|
|
@ -83,9 +84,10 @@ const onToggleLink = () => {
|
|
|
|
|
:class="{ |
|
|
|
|
'embed-mode': embedMode, |
|
|
|
|
'full-mode': !embedMode, |
|
|
|
|
'form-field-mode': isFormField, |
|
|
|
|
}" |
|
|
|
|
> |
|
|
|
|
<NcTooltip :disabled="editor.isActive('codeBlock')"> |
|
|
|
|
<NcTooltip :placement="isFormField ? 'bottom' : undefined" :disabled="editor.isActive('codeBlock')"> |
|
|
|
|
<template #title> |
|
|
|
|
<div class="flex flex-col items-center"> |
|
|
|
|
<div> |
|
|
|
@ -105,7 +107,7 @@ const onToggleLink = () => {
|
|
|
|
|
</NcButton> |
|
|
|
|
</NcTooltip> |
|
|
|
|
|
|
|
|
|
<NcTooltip :disabled="editor.isActive('codeBlock')"> |
|
|
|
|
<NcTooltip :placement="isFormField ? 'bottom' : undefined" :disabled="editor.isActive('codeBlock')"> |
|
|
|
|
<template #title> |
|
|
|
|
<div class="flex flex-col items-center"> |
|
|
|
|
<div> |
|
|
|
@ -124,7 +126,7 @@ const onToggleLink = () => {
|
|
|
|
|
<MdiFormatItalic /> |
|
|
|
|
</NcButton> |
|
|
|
|
</NcTooltip> |
|
|
|
|
<NcTooltip :disabled="editor.isActive('codeBlock')"> |
|
|
|
|
<NcTooltip :placement="isFormField ? 'bottom' : undefined" :disabled="editor.isActive('codeBlock')"> |
|
|
|
|
<template #title> |
|
|
|
|
<div class="flex flex-col items-center"> |
|
|
|
|
<div> |
|
|
|
@ -144,7 +146,7 @@ const onToggleLink = () => {
|
|
|
|
|
<MdiFormatUnderline /> |
|
|
|
|
</NcButton> |
|
|
|
|
</NcTooltip> |
|
|
|
|
<NcTooltip :disabled="editor.isActive('codeBlock')"> |
|
|
|
|
<NcTooltip :placement="isFormField ? 'bottom' : undefined" :disabled="editor.isActive('codeBlock')"> |
|
|
|
|
<template #title> |
|
|
|
|
<div class="flex flex-col items-center"> |
|
|
|
|
<div> |
|
|
|
@ -163,6 +165,7 @@ const onToggleLink = () => {
|
|
|
|
|
<MdiFormatStrikeThrough /> |
|
|
|
|
</NcButton> |
|
|
|
|
</NcTooltip> |
|
|
|
|
<template v-if="!isFormField"> |
|
|
|
|
<NcTooltip v-if="embedMode"> |
|
|
|
|
<template #title> {{ $t('general.code') }}</template> |
|
|
|
|
<NcButton |
|
|
|
@ -296,8 +299,9 @@ const onToggleLink = () => {
|
|
|
|
|
</NcTooltip> |
|
|
|
|
|
|
|
|
|
<div class="divider"></div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<NcTooltip :disabled="editor.isActive('codeBlock')"> |
|
|
|
|
<NcTooltip :placement="isFormField ? 'bottom' : undefined" :disabled="editor.isActive('codeBlock')"> |
|
|
|
|
<template #title> {{ $t('general.link') }}</template> |
|
|
|
|
<NcButton |
|
|
|
|
size="small" |
|
|
|
@ -306,7 +310,8 @@ const onToggleLink = () => {
|
|
|
|
|
:disabled="editor.isActive('codeBlock')" |
|
|
|
|
@click="onToggleLink" |
|
|
|
|
> |
|
|
|
|
<div class="flex flex-row items-center px-0.5"> |
|
|
|
|
<GeneralIcon v-if="isFormField" icon="link2"></GeneralIcon> |
|
|
|
|
<div v-else class="flex flex-row items-center px-0.5"> |
|
|
|
|
<MdiLink /> |
|
|
|
|
<div class="!text-xs !ml-1">{{ $t('general.link') }}</div> |
|
|
|
|
</div> |
|
|
|
@ -343,6 +348,9 @@ const onToggleLink = () => {
|
|
|
|
|
.bubble-menu.embed-mode { |
|
|
|
|
@apply border-transparent !shadow-none; |
|
|
|
|
} |
|
|
|
|
.bubble-menu.form-field-mode { |
|
|
|
|
@apply bg-transparent px-0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.embed-mode.bubble-menu { |
|
|
|
|
@apply !py-0 !my-0 !border-0; |
|
|
|
|