base_ui/components/forms/TextareaDdOption.vue
2025-02-01 13:04:55 +03:30

1466 lines
53 KiB
Vue

<template>
<div
style="
display: flex;
flex-direction: column;
width: 265px;
min-width: 180px;
max-width: calc(100vw - 24px);
height: 100%;
max-height: 70vh;
"
>
<div style="flex-shrink: 0">
<div style="padding-top: 6px; padding-bottom: 6px; margin-top: 8px">
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
margin-left: 12px;
margin-right: 12px;
min-width: 0px;
flex: 1 1 auto;
"
>
<div style="display: flex">
<div
class="notion-focusable-within"
style="
display: flex;
align-items: center;
width: 100%;
font-size: 14px;
line-height: 20px;
padding: 3px 6px;
position: relative;
border-radius: 4px;
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px inset;
background: rgba(242, 241, 238, 0.6);
cursor: text;
height: 28px;
"
>
<input
placeholder="Search actions…"
type="text"
style="
font-size: inherit;
line-height: inherit;
border: none;
background: none;
width: 100%;
display: block;
resize: none;
padding: 0px;
"
/>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="notion-scroller vertical"
style="
z-index: 1;
flex-grow: 1;
min-height: 0px;
transform: translateZ(0px);
overflow: hidden auto;
margin-right: 0px;
margin-bottom: 0px;
"
>
<div id=":rlk:" tabindex="0" role="menu" aria-activedescendant=":rlt:">
<div style="padding-top: 6px; padding-bottom: 6px">
<div
role="menuitem"
tabindex="-1"
id=":rll:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
margin-right: 4px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
"
>
<svg
role="graphics-symbol"
viewBox="0 0 16 16"
class="sparkles"
style="
width: 16px;
height: 16px;
display: block;
fill: rgba(55, 53, 47, 0.85);
flex-shrink: 0;
"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M7.2757 4.82358C7.57934 4.71847 7.57934 4.53161 7.2757 4.41483L5.62905 3.78419C5.33709 3.67908 4.99842 3.3404 4.88164 3.03676L4.25101 1.39009C4.1459 1.08644 3.95905 1.08644 3.84226 1.39009L3.21163 3.03676C3.10653 3.32872 2.76786 3.6674 2.46422 3.78419L0.817572 4.41483C0.513934 4.51994 0.513934 4.70679 0.817572 4.82358L2.46422 5.45422C2.75618 5.55933 3.09485 5.898 3.21163 6.20165L3.84226 7.84832C3.94737 8.15196 4.13422 8.15196 4.25101 7.84832L4.88164 6.20165C4.98674 5.90968 5.32541 5.571 5.62905 5.45422L7.2757 4.82358ZM15.2991 10.5929C16.2334 10.3593 16.2334 9.9739 15.2991 9.74032L13.2321 9.22647C12.2978 8.9929 11.3402 8.03526 11.1066 7.10097L10.5928 5.03387C10.3592 4.09959 9.97382 4.09959 9.74025 5.03387L9.2264 7.10097C8.99283 8.03526 8.03521 8.9929 7.10094 9.22647L5.03387 9.74032C4.09961 9.9739 4.09961 10.3593 5.03387 10.5929L7.10094 11.1067C8.03521 11.3403 8.99283 12.2979 9.2264 13.2322L9.74025 15.2993C9.97382 16.2336 10.3592 16.2336 10.5928 15.2993L11.1066 13.2322C11.3402 12.2979 12.2978 11.3403 13.2321 11.1067L15.2991 10.5929Z"
></path>
</svg>
</div>
</div>
<div
style="
margin-left: 6px;
margin-right: 6px;
min-width: 0px;
flex: 1 1 auto;
"
>
<div
style="
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
"
>
Ask AI
</div>
</div>
<div
style="
margin-left: auto;
margin-right: 12px;
min-width: 0px;
flex-shrink: 0;
"
>
<span
style="
color: rgba(55, 53, 47, 0.5);
font-size: 12px;
white-space: nowrap;
"
>Ctrl+J</span
>
</div>
</div>
</div>
<div
role="menuitem"
tabindex="-1"
id=":rlm:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
margin-right: 4px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
"
>
<svg
role="graphics-symbol"
viewBox="0 0 16 16"
class="trash"
style="
width: 16px;
height: 16px;
display: block;
fill: rgba(55, 53, 47, 0.85);
flex-shrink: 0;
"
>
<path
d="M4.8623 15.4287H11.1445C12.1904 15.4287 12.8672 14.793 12.915 13.7402L13.3799 3.88965H14.1318C14.4736 3.88965 14.7402 3.62988 14.7402 3.28809C14.7402 2.95312 14.4736 2.69336 14.1318 2.69336H11.0898V1.66797C11.0898 0.62207 10.4268 0 9.29199 0H6.69434C5.56641 0 4.89648 0.62207 4.89648 1.66797V2.69336H1.86133C1.5332 2.69336 1.25977 2.95312 1.25977 3.28809C1.25977 3.62988 1.5332 3.88965 1.86133 3.88965H2.62012L3.08496 13.7471C3.13281 14.7998 3.80273 15.4287 4.8623 15.4287ZM6.1543 1.72949C6.1543 1.37402 6.40039 1.14844 6.7832 1.14844H9.20312C9.58594 1.14844 9.83203 1.37402 9.83203 1.72949V2.69336H6.1543V1.72949ZM4.99219 14.2188C4.61621 14.2188 4.34277 13.9453 4.32227 13.542L3.86426 3.88965H12.1152L11.6709 13.542C11.6572 13.9453 11.3838 14.2188 10.9941 14.2188H4.99219ZM5.9834 13.1182C6.27051 13.1182 6.45508 12.9336 6.44824 12.667L6.24316 5.50293C6.23633 5.22949 6.04492 5.05176 5.77148 5.05176C5.48438 5.05176 5.2998 5.23633 5.30664 5.50293L5.51172 12.667C5.51855 12.9404 5.70996 13.1182 5.9834 13.1182ZM8 13.1182C8.28711 13.1182 8.47852 12.9336 8.47852 12.667V5.50293C8.47852 5.23633 8.28711 5.05176 8 5.05176C7.71289 5.05176 7.52148 5.23633 7.52148 5.50293V12.667C7.52148 12.9336 7.71289 13.1182 8 13.1182ZM10.0166 13.1182C10.29 13.1182 10.4746 12.9404 10.4814 12.667L10.6934 5.50293C10.7002 5.23633 10.5088 5.05176 10.2285 5.05176C9.95508 5.05176 9.76367 5.22949 9.75684 5.50293L9.54492 12.667C9.53809 12.9336 9.72949 13.1182 10.0166 13.1182Z"
></path>
</svg>
</div>
</div>
<div
style="
margin-left: 6px;
margin-right: 6px;
min-width: 0px;
flex: 1 1 auto;
"
>
<div
style="
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
"
>
Delete
</div>
</div>
<div
style="
margin-left: auto;
margin-right: 12px;
min-width: 0px;
flex-shrink: 0;
"
>
<span
style="
color: rgba(55, 53, 47, 0.5);
font-size: 12px;
white-space: nowrap;
"
>Del</span
>
</div>
</div>
</div>
<div
role="menuitem"
tabindex="-1"
id=":rln:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
margin-right: 4px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
"
>
<svg
role="graphics-symbol"
viewBox="0 0 16 16"
class="duplicate"
style="
width: 16px;
height: 16px;
display: block;
fill: rgba(55, 53, 47, 0.85);
flex-shrink: 0;
"
>
<path
d="M2.83887 12.1523H4.00098V13.1846C4.00098 14.6406 4.75977 15.3994 6.24316 15.3994H13.1611C14.6377 15.3994 15.4033 14.6406 15.4033 13.1846V6.21191C15.4033 4.75586 14.6377 3.99707 13.1611 3.99707H11.999V2.96484C11.999 1.50879 11.2334 0.75 9.75684 0.75H2.83887C1.3623 0.75 0.59668 1.50195 0.59668 2.96484V9.93066C0.59668 11.3936 1.3623 12.1523 2.83887 12.1523ZM2.9209 10.8125C2.28516 10.8125 1.93652 10.4844 1.93652 9.82129V3.08105C1.93652 2.41797 2.28516 2.08301 2.9209 2.08301H9.68164C10.3105 2.08301 10.666 2.41797 10.666 3.08105V3.99707H6.24316C4.75977 3.99707 4.00098 4.75586 4.00098 6.21191V10.8125H2.9209ZM6.31836 14.0596C5.68262 14.0596 5.34082 13.7314 5.34082 13.0684V6.32812C5.34082 5.66504 5.68262 5.33691 6.31836 5.33691H13.0791C13.708 5.33691 14.0635 5.66504 14.0635 6.32812V13.0684C14.0635 13.7314 13.708 14.0596 13.0791 14.0596H6.31836Z"
></path>
</svg>
</div>
</div>
<div
style="
margin-left: 6px;
margin-right: 6px;
min-width: 0px;
flex: 1 1 auto;
"
>
<div
style="
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
"
>
Duplicate
</div>
</div>
<div
style="
margin-left: auto;
margin-right: 12px;
min-width: 0px;
flex-shrink: 0;
"
>
<span
style="
color: rgba(55, 53, 47, 0.5);
font-size: 12px;
white-space: nowrap;
"
>Ctrl+D</span
>
</div>
</div>
</div>
<div
role="menuitem"
tabindex="-1"
id=":rlo:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
margin-right: 4px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
"
>
<svg
role="graphics-symbol"
viewBox="0 0 16 16"
class="loop"
style="
width: 16px;
height: 16px;
display: block;
fill: rgba(55, 53, 47, 0.85);
flex-shrink: 0;
"
>
<path
d="M5.80371 3.12305C5.81006 3.50391 6.05762 3.74512 6.47656 3.74512H11.3643C11.9546 3.74512 12.2783 4.0498 12.2783 4.66553V11.2925L11.377 10.3149L10.8628 9.80078C10.5962 9.54688 10.2344 9.52783 9.96777 9.78809C9.71387 10.0483 9.72021 10.4229 9.98047 10.6831L12.145 12.8413C12.6211 13.311 13.167 13.311 13.6431 12.8413L15.8076 10.6831C16.0679 10.4229 16.0742 10.0483 15.8203 9.78809C15.5537 9.52783 15.1919 9.54688 14.9253 9.80078L14.4111 10.3149L13.5161 11.2861V4.56396C13.5161 3.20557 12.8052 2.50098 11.4341 2.50098H6.47656C6.05762 2.50098 5.79736 2.74219 5.80371 3.12305ZM0.186035 7.05859C0.446289 7.3252 0.808105 7.30615 1.07471 7.0459L1.59521 6.53809L2.48389 5.56689V12.2891C2.48389 13.6475 3.19482 14.3521 4.56592 14.3521H9.52344C9.94238 14.3521 10.2026 14.1108 10.1963 13.73C10.1899 13.3428 9.94238 13.1079 9.52344 13.1079H4.64209C4.05176 13.1079 3.72803 12.7969 3.72803 12.1812V5.5542L4.62305 6.53809L5.14355 7.0459C5.40381 7.30615 5.77197 7.3252 6.03223 7.05859C6.29248 6.79834 6.28613 6.43018 6.01953 6.16992L3.85498 4.01172C3.37891 3.53564 2.83936 3.53564 2.36328 4.01172L0.19873 6.16992C-0.0678711 6.43018 -0.0742188 6.79834 0.186035 7.05859Z"
></path>
</svg>
</div>
</div>
<div
style="
margin-left: 6px;
margin-right: 12px;
min-width: 0px;
flex: 1 1 auto;
"
>
<div
style="
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
"
>
Turn into
</div>
</div>
<div
style="
width: 12px;
transform: rotate(90deg);
fill: rgba(55, 53, 47, 0.35);
margin-right: 10px;
flex-shrink: 0;
"
>
<svg
role="graphics-symbol"
viewBox="0 0 16 16"
class="chevronRight"
style="
width: 100%;
height: 100%;
display: block;
fill: rgba(55, 53, 47, 0.45);
flex-shrink: 0;
transform: rotate(-90deg);
"
>
<path
d="M12.375 8.06445C12.375 7.83203 12.2861 7.63379 12.1084 7.45605L6.77637 2.24023C6.62598 2.08984 6.44141 2.01465 6.22266 2.01465C5.77832 2.01465 5.42285 2.35645 5.42285 2.80078C5.42285 3.01953 5.51172 3.21777 5.66211 3.375L10.4746 8.06445L5.66211 12.7539C5.51855 12.9043 5.42285 13.1025 5.42285 13.3213C5.42285 13.7725 5.77832 14.1143 6.22266 14.1143C6.44141 14.1143 6.62598 14.0391 6.77637 13.8887L12.1084 8.67285C12.293 8.49512 12.375 8.29688 12.375 8.06445Z"
></path>
</svg>
</div>
</div>
</div>
<div
role="menuitem"
tabindex="-1"
id=":rlp:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
margin-right: 4px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
"
>
<svg
role="graphics-symbol"
viewBox="0 0 16 16"
class="pageEmpty"
style="
width: 16px;
height: 16px;
display: block;
fill: rgba(55, 53, 47, 0.85);
flex-shrink: 0;
"
>
<path
d="M4.35645 15.4678H11.6367C13.0996 15.4678 13.8584 14.6953 13.8584 13.2256V7.02539C13.8584 6.0752 13.7354 5.6377 13.1406 5.03613L9.55176 1.38574C8.97754 0.804688 8.50586 0.667969 7.65137 0.667969H4.35645C2.89355 0.667969 2.13477 1.44043 2.13477 2.91016V13.2256C2.13477 14.7021 2.89355 15.4678 4.35645 15.4678ZM4.46582 14.1279C3.80273 14.1279 3.47461 13.7793 3.47461 13.1436V2.99219C3.47461 2.36328 3.80273 2.00781 4.46582 2.00781H7.37793V5.75391C7.37793 6.73145 7.86328 7.20312 8.83398 7.20312H12.5186V13.1436C12.5186 13.7793 12.1836 14.1279 11.5205 14.1279H4.46582ZM8.95703 6.02734C8.67676 6.02734 8.56055 5.9043 8.56055 5.62402V2.19238L12.334 6.02734H8.95703Z"
></path>
</svg>
</div>
</div>
<div
style="
margin-left: 6px;
margin-right: 12px;
min-width: 0px;
flex: 1 1 auto;
"
>
<div
style="
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
"
>
Turn into page in
</div>
</div>
<div
style="
width: 12px;
transform: rotate(90deg);
fill: rgba(55, 53, 47, 0.35);
margin-right: 10px;
flex-shrink: 0;
"
>
<svg
role="graphics-symbol"
viewBox="0 0 16 16"
class="chevronRight"
style="
width: 100%;
height: 100%;
display: block;
fill: rgba(55, 53, 47, 0.45);
flex-shrink: 0;
transform: rotate(-90deg);
"
>
<path
d="M12.375 8.06445C12.375 7.83203 12.2861 7.63379 12.1084 7.45605L6.77637 2.24023C6.62598 2.08984 6.44141 2.01465 6.22266 2.01465C5.77832 2.01465 5.42285 2.35645 5.42285 2.80078C5.42285 3.01953 5.51172 3.21777 5.66211 3.375L10.4746 8.06445L5.66211 12.7539C5.51855 12.9043 5.42285 13.1025 5.42285 13.3213C5.42285 13.7725 5.77832 14.1143 6.22266 14.1143C6.44141 14.1143 6.62598 14.0391 6.77637 13.8887L12.1084 8.67285C12.293 8.49512 12.375 8.29688 12.375 8.06445Z"
></path>
</svg>
</div>
</div>
</div>
</div>
<div
style="
padding-top: 6px;
padding-bottom: 6px;
box-shadow: rgba(55, 53, 47, 0.09) 0px -1px 0px;
margin-top: 1px;
"
>
<div
role="menuitem"
tabindex="-1"
id=":rlq:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
margin-right: 4px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
"
>
<svg
role="graphics-symbol"
viewBox="0 0 16 16"
class="link"
style="
width: 16px;
height: 16px;
display: block;
fill: rgba(55, 53, 47, 0.85);
flex-shrink: 0;
"
>
<path
d="M7.69922 10.8945L8.73828 9.84863C7.91797 9.77344 7.34375 9.51367 6.91992 9.08984C5.76465 7.93457 5.76465 6.29395 6.91309 5.14551L9.18262 2.87598C10.3379 1.7207 11.9717 1.7207 13.127 2.87598C14.2891 4.04492 14.2822 5.67188 13.1338 6.82031L11.958 7.99609C12.1768 8.49512 12.2451 9.10352 12.1289 9.62988L14.0908 7.6748C15.7725 6 15.7793 3.62109 14.084 1.92578C12.3887 0.223633 10.0098 0.237305 8.33496 1.91211L5.95605 4.29785C4.28125 5.97266 4.26758 8.35156 5.96289 10.0469C6.36621 10.4434 6.90625 10.7441 7.69922 10.8945ZM8.30078 5.13184L7.26855 6.17773C8.08203 6.25293 8.66309 6.51953 9.08008 6.93652C10.2422 8.09863 10.2422 9.73242 9.08691 10.8809L6.81738 13.1504C5.66211 14.3057 4.03516 14.3057 2.87305 13.1504C1.71094 11.9883 1.71777 10.3545 2.87305 9.20605L4.04199 8.03027C3.83008 7.53125 3.75488 6.92969 3.87109 6.39648L1.91602 8.35156C0.234375 10.0264 0.227539 12.4121 1.92285 14.1074C3.61816 15.8027 5.99707 15.7891 7.67188 14.1143L10.0439 11.7354C11.7256 10.0537 11.7324 7.6748 10.0371 5.98633C9.64062 5.58301 9.10059 5.28223 8.30078 5.13184Z"
></path>
</svg>
</div>
</div>
<div
style="
margin-left: 6px;
margin-right: 6px;
min-width: 0px;
flex: 1 1 auto;
"
>
<div
style="
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
"
>
Copy link to block
</div>
</div>
<div
style="
margin-left: auto;
margin-right: 12px;
min-width: 0px;
flex-shrink: 0;
"
>
<span
style="
color: rgba(55, 53, 47, 0.5);
font-size: 12px;
white-space: nowrap;
"
>Alt+Shift+L</span
>
</div>
</div>
</div>
</div>
<div
style="
padding-top: 6px;
padding-bottom: 6px;
box-shadow: rgba(55, 53, 47, 0.09) 0px -1px 0px;
margin-top: 1px;
"
>
<div
role="menuitem"
tabindex="-1"
id=":rlr:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
margin-right: 4px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
"
>
<svg
role="graphics-symbol"
viewBox="0 0 16 16"
class="properties"
style="
width: 16px;
height: 16px;
display: block;
fill: rgba(55, 53, 47, 0.85);
flex-shrink: 0;
"
>
<path
d="M1.91602 4.83789C2.44238 4.83789 2.87305 4.40723 2.87305 3.87402C2.87305 3.34766 2.44238 2.91699 1.91602 2.91699C1.38281 2.91699 0.952148 3.34766 0.952148 3.87402C0.952148 4.40723 1.38281 4.83789 1.91602 4.83789ZM5.1084 4.52344H14.3984C14.7607 4.52344 15.0479 4.23633 15.0479 3.87402C15.0479 3.51172 14.7607 3.22461 14.3984 3.22461H5.1084C4.74609 3.22461 4.45898 3.51172 4.45898 3.87402C4.45898 4.23633 4.74609 4.52344 5.1084 4.52344ZM1.91602 9.03516C2.44238 9.03516 2.87305 8.60449 2.87305 8.07129C2.87305 7.54492 2.44238 7.11426 1.91602 7.11426C1.38281 7.11426 0.952148 7.54492 0.952148 8.07129C0.952148 8.60449 1.38281 9.03516 1.91602 9.03516ZM5.1084 8.7207H14.3984C14.7607 8.7207 15.0479 8.43359 15.0479 8.07129C15.0479 7.70898 14.7607 7.42188 14.3984 7.42188H5.1084C4.74609 7.42188 4.45898 7.70898 4.45898 8.07129C4.45898 8.43359 4.74609 8.7207 5.1084 8.7207ZM1.91602 13.2324C2.44238 13.2324 2.87305 12.8018 2.87305 12.2686C2.87305 11.7422 2.44238 11.3115 1.91602 11.3115C1.38281 11.3115 0.952148 11.7422 0.952148 12.2686C0.952148 12.8018 1.38281 13.2324 1.91602 13.2324ZM5.1084 12.918H14.3984C14.7607 12.918 15.0479 12.6309 15.0479 12.2686C15.0479 11.9062 14.7607 11.6191 14.3984 11.6191H5.1084C4.74609 11.6191 4.45898 11.9062 4.45898 12.2686C4.45898 12.6309 4.74609 12.918 5.1084 12.918Z"
></path>
</svg>
</div>
</div>
<div
style="
margin-left: 6px;
margin-right: 12px;
min-width: 0px;
flex: 1 1 auto;
"
>
<div
style="
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
"
>
Edit property
</div>
</div>
<div
style="
width: 12px;
transform: rotate(90deg);
fill: rgba(55, 53, 47, 0.35);
margin-right: 10px;
flex-shrink: 0;
"
>
<svg
role="graphics-symbol"
viewBox="0 0 16 16"
class="chevronRight"
style="
width: 100%;
height: 100%;
display: block;
fill: rgba(55, 53, 47, 0.45);
flex-shrink: 0;
transform: rotate(-90deg);
"
>
<path
d="M12.375 8.06445C12.375 7.83203 12.2861 7.63379 12.1084 7.45605L6.77637 2.24023C6.62598 2.08984 6.44141 2.01465 6.22266 2.01465C5.77832 2.01465 5.42285 2.35645 5.42285 2.80078C5.42285 3.01953 5.51172 3.21777 5.66211 3.375L10.4746 8.06445L5.66211 12.7539C5.51855 12.9043 5.42285 13.1025 5.42285 13.3213C5.42285 13.7725 5.77832 14.1143 6.22266 14.1143C6.44141 14.1143 6.62598 14.0391 6.77637 13.8887L12.1084 8.67285C12.293 8.49512 12.375 8.29688 12.375 8.06445Z"
></path>
</svg>
</div>
</div>
</div>
<div
role="menuitem"
tabindex="-1"
id=":rls:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
margin-right: 4px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
"
>
<svg
role="graphics-symbol"
viewBox="0 0 16 16"
class="moveTo"
style="
width: 16px;
height: 16px;
display: block;
fill: rgba(55, 53, 47, 0.85);
flex-shrink: 0;
"
>
<path
d="M2.34668 13.5469C2.78418 13.5469 3.07812 13.2393 3.07812 12.8018C3.07812 12.542 3.05762 12.2754 3.05762 11.8994C3.05762 9.60254 3.86426 8.67285 6.14062 8.67285H10.5771L12.2109 8.57031L10.1738 10.4297L8.64941 11.9678C8.5127 12.1045 8.43066 12.2891 8.43066 12.501C8.43066 12.9111 8.73828 13.2188 9.16895 13.2188C9.35352 13.2188 9.53809 13.1436 9.70215 12.9863L14.207 8.48145C14.3711 8.33105 14.4531 8.12598 14.4531 7.9209C14.4531 7.71582 14.3711 7.51758 14.207 7.36035L9.71582 2.86914C9.53809 2.70508 9.35352 2.62305 9.16895 2.62305C8.73828 2.62305 8.43066 2.93066 8.43066 3.34082C8.43066 3.55273 8.5127 3.7373 8.64941 3.87402L10.1738 5.41895L12.2041 7.27148L10.5771 7.17578H6.04492C2.87988 7.17578 1.54688 8.63184 1.54688 11.8516C1.54688 12.2549 1.56055 12.6035 1.61523 12.877C1.67676 13.2051 1.88184 13.5469 2.34668 13.5469Z"
></path>
</svg>
</div>
</div>
<div
style="
margin-left: 6px;
margin-right: 6px;
min-width: 0px;
flex: 1 1 auto;
"
>
<div
style="
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
"
>
Move to
</div>
</div>
<div
style="
margin-left: auto;
margin-right: 12px;
min-width: 0px;
flex-shrink: 0;
"
>
<span
style="
color: rgba(55, 53, 47, 0.5);
font-size: 12px;
white-space: nowrap;
"
>Ctrl+Shift+P</span
>
</div>
</div>
</div>
</div>
<div
style="
padding-top: 6px;
padding-bottom: 6px;
box-shadow: rgba(55, 53, 47, 0.09) 0px -1px 0px;
margin-top: 1px;
"
>
<div
role="menuitem"
tabindex="-1"
id=":rlt:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
background: rgba(55, 53, 47, 0.08);
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
margin-right: 4px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
"
>
<svg
role="graphics-symbol"
viewBox="0 0 16 16"
class="speechBubbleThin"
style="
width: 16px;
height: 16px;
display: block;
fill: rgba(55, 53, 47, 0.85);
flex-shrink: 0;
"
>
<path
d="M4.73926 15.6797C5.12207 15.6797 5.40918 15.4951 5.87402 15.085L8.21875 13.0068H12.3545C14.4121 13.0068 15.5674 11.8311 15.5674 9.80078V4.49609C15.5674 2.46582 14.4121 1.29004 12.3545 1.29004H3.63867C1.58105 1.29004 0.425781 2.46582 0.425781 4.49609V9.80078C0.425781 11.8311 1.6084 13.0068 3.59082 13.0068H3.87109V14.6953C3.87109 15.3037 4.19238 15.6797 4.73926 15.6797ZM5.07422 14.1758V12.2275C5.07422 11.8242 4.90332 11.667 4.51367 11.667H3.67285C2.38086 11.667 1.76562 11.0176 1.76562 9.75977V4.53711C1.76562 3.2793 2.38086 2.62988 3.67285 2.62988H12.3135C13.6055 2.62988 14.2275 3.2793 14.2275 4.53711V9.75977C14.2275 11.0176 13.6055 11.667 12.3135 11.667H8.14355C7.7334 11.667 7.52832 11.7354 7.24121 12.0361L5.07422 14.1758ZM4.51367 5.35059H11.4043C11.6367 5.35059 11.8281 5.15918 11.8281 4.91992C11.8281 4.69434 11.6367 4.50293 11.4043 4.50293H4.51367C4.28125 4.50293 4.09668 4.69434 4.09668 4.91992C4.09668 5.15918 4.28125 5.35059 4.51367 5.35059ZM4.51367 7.53125H11.4043C11.6367 7.53125 11.8281 7.33301 11.8281 7.10059C11.8281 6.86816 11.6367 6.67676 11.4043 6.67676H4.51367C4.28125 6.67676 4.09668 6.86816 4.09668 7.10059C4.09668 7.33301 4.28125 7.53125 4.51367 7.53125ZM4.51367 9.70508H9.00488C9.2373 9.70508 9.42188 9.51367 9.42188 9.28125C9.42188 9.04199 9.2373 8.85742 9.00488 8.85742H4.51367C4.28125 8.85742 4.09668 9.04199 4.09668 9.28125C4.09668 9.51367 4.28125 9.70508 4.51367 9.70508Z"
></path>
</svg>
</div>
</div>
<div
style="
margin-left: 6px;
margin-right: 6px;
min-width: 0px;
flex: 1 1 auto;
"
>
<div
style="
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
"
>
Comment
</div>
</div>
<div
style="
margin-left: auto;
margin-right: 12px;
min-width: 0px;
flex-shrink: 0;
"
>
<span
style="
color: rgba(55, 53, 47, 0.5);
font-size: 12px;
white-space: nowrap;
"
>Ctrl+Shift+M</span
>
</div>
</div>
</div>
<div
role="menuitem"
tabindex="-1"
id=":rlu:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
margin-right: 4px;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: center;
"
>
<svg
role="graphics-symbol"
viewBox="0 0 16 16"
class="caption"
style="
width: 16px;
height: 16px;
display: block;
fill: rgba(55, 53, 47, 0.85);
flex-shrink: 0;
"
>
<path
d="M2.87 8.975h6.74c1.119 0 1.775-.65 1.775-1.904V2.444c0-1.254-.656-1.904-1.922-1.904H2.871C1.605.54.949 1.19.949 2.444V7.07c0 1.254.656 1.904 1.922 1.904zm.07-1.148c-.544 0-.843-.282-.843-.85v-4.44c0-.568.299-.849.844-.849h6.451c.54 0 .844.281.844.85v4.44c0 .567-.305.849-.697.849H2.94zm-1.39 4.386h12.893a.604.604 0 00.608-.601.604.604 0 00-.608-.602H1.55a.598.598 0 00-.601.602c0 .335.266.601.601.601zm8.49 3.247H1.55a.598.598 0 01-.601-.601c0-.335.266-.602.601-.602h8.49c.336 0 .609.267.609.602a.604.604 0 01-.608.601z"
></path>
</svg>
</div>
</div>
<div
style="
margin-left: 6px;
margin-right: 6px;
min-width: 0px;
flex: 1 1 auto;
"
>
<div
style="
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
"
>
Caption
</div>
</div>
<div
style="
margin-left: auto;
margin-right: 12px;
min-width: 0px;
flex-shrink: 0;
"
>
<span
style="
color: rgba(55, 53, 47, 0.5);
font-size: 12px;
white-space: nowrap;
"
>Ctrl+Alt+M</span
>
</div>
</div>
</div>
</div>
<div
style="
padding-top: 6px;
padding-bottom: 6px;
box-shadow: rgba(55, 53, 47, 0.09) 0px -1px 0px;
margin-top: 1px;
"
>
<div
role="menuitem"
tabindex="-1"
id=":rlv:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
margin-left: 12px;
margin-right: 6px;
min-width: 0px;
flex: 1 1 auto;
"
>
<div
style="
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
"
>
Wrap code
</div>
</div>
<div
style="
margin-left: auto;
margin-right: 12px;
min-width: 0px;
flex: 0 0 auto;
"
>
<div
class="pseudoHover pseudoActive"
style="
position: relative;
border-radius: 44px;
--pseudoHover--background: rgba(55, 53, 47, 0.08);
--pseudoActive--background: rgba(55, 53, 47, 0.16);
"
>
<div
style="
display: flex;
flex-shrink: 0;
height: 14px;
width: 26px;
border-radius: 44px;
padding: 2px;
box-sizing: content-box;
background: rgba(135, 131, 120, 0.3);
transition: background 200ms ease 0s,
box-shadow 200ms ease 0s;
"
>
<div
style="
width: 14px;
height: 14px;
border-radius: 44px;
background: white;
transition: transform 200ms ease-out 0s,
background 200ms ease-out 0s;
transform: translateX(0px) translateY(0px);
"
></div>
</div>
<input
type="checkbox"
role="switch"
tabindex="-1"
style="
position: absolute;
opacity: 0;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
cursor: pointer;
"
/>
</div>
</div>
</div>
</div>
<div
role="menuitem"
tabindex="-1"
id=":rm0:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
margin-left: 12px;
margin-right: 12px;
min-width: 0px;
flex: 1 1 auto;
"
>
<div
style="
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
"
>
Set language
</div>
</div>
<div
style="
width: 12px;
transform: rotate(90deg);
fill: rgba(55, 53, 47, 0.35);
margin-right: 10px;
flex-shrink: 0;
"
>
<svg
role="graphics-symbol"
viewBox="0 0 16 16"
class="chevronRight"
style="
width: 100%;
height: 100%;
display: block;
fill: rgba(55, 53, 47, 0.45);
flex-shrink: 0;
transform: rotate(-90deg);
"
>
<path
d="M12.375 8.06445C12.375 7.83203 12.2861 7.63379 12.1084 7.45605L6.77637 2.24023C6.62598 2.08984 6.44141 2.01465 6.22266 2.01465C5.77832 2.01465 5.42285 2.35645 5.42285 2.80078C5.42285 3.01953 5.51172 3.21777 5.66211 3.375L10.4746 8.06445L5.66211 12.7539C5.51855 12.9043 5.42285 13.1025 5.42285 13.3213C5.42285 13.7725 5.77832 14.1143 6.22266 14.1143C6.44141 14.1143 6.62598 14.0391 6.77637 13.8887L12.1084 8.67285C12.293 8.49512 12.375 8.29688 12.375 8.06445Z"
></path>
</svg>
</div>
</div>
</div>
<div
role="menuitem"
tabindex="-1"
id=":rm1:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
margin-left: 12px;
margin-right: 12px;
min-width: 0px;
flex: 1 1 auto;
"
>
<div
style="
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
"
>
Format code
</div>
</div>
</div>
</div>
<div
role="menuitem"
tabindex="-1"
id=":rm2:"
style="
user-select: none;
transition: background 20ms ease-in 0s;
cursor: pointer;
width: calc(100% - 8px);
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
margin-left: 12px;
margin-right: 12px;
min-width: 0px;
flex: 1 1 auto;
"
>
<div
style="
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
"
>
Work at Notion
</div>
</div>
</div>
</div>
</div>
</div>
<div
style="
padding-top: 8px;
padding-bottom: 8px;
box-shadow: rgba(55, 53, 47, 0.09) 0px -1px 0px;
margin-top: 1px;
"
>
<div
style="
display: flex;
align-items: center;
line-height: 120%;
width: 100%;
user-select: none;
min-height: 28px;
font-size: 14px;
"
>
<div
style="
margin-left: 12px;
margin-right: 12px;
min-width: 0px;
flex: 1 1 auto;
"
>
<div>
<div>
<div
style="
font-size: 12px;
line-height: 16px;
color: rgba(55, 53, 47, 0.5);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 4px;
"
>
Code
</div>
<div
style="
font-size: 12px;
line-height: 16px;
color: rgba(55, 53, 47, 0.5);
margin-bottom: 4px;
"
>
Last edited by Borhan
</div>
<div
style="
font-size: 12px;
line-height: 16px;
color: rgba(55, 53, 47, 0.5);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
"
>
Aug 21, 2023, 4:19 PM
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer style="flex-shrink: 0"></footer>
</div>
</template>
<script>
export default {
};
</script>
<style scoped></style>