mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
e1ae0d3b56
* remirror instances commented out to avoid prosemirror conflicts * styles migrated for remirror to tiptap transition * added bubblemenu support with extensions * fixed css for task lists and code with syntax highlighting * added support for slash command * fixed bubble menu to match styles and added better seperation in UI * saving with debounce logic added and it's stored in backend * added migration support by updating to html * Image uploads done * improved file structure and delete image function implemented * Integrated tiptap with Issue Modal * added additional props and Tiptap Integration with Comments * added tiptap integration with user activity feeds * added ref control support and bubble menu support for readonly editor * added tiptap support for plane pages * added tiptap support to gpt assistant modal (yet to be tested) * removed remirror instances and cleaned up code * improved code structure for extracting props in Tiptap * fixing ts errors for next build * fixing node ts error for Horizontal Rule * added ts fix for node types * temp fix * temp fix * added min height for issue description in modal * added resolutions to prosemirror-model version * trying pnpm overrides * explicitly added prosemirror deps * bugfixes * removed extra gap at the top and moved saved indicator to the bottom * fix: slash command scroll position * chore: update custom css variables * matched theme colours * fixed gpt-assistant modal * updated yarn lock * added debounced updates for the title and removed saved state after timeout * added css animations for saved state * build fixes and remove remirror instances * minor commenting fixes --------- Co-authored-by: Palanikannan1437 <73993394+Palanikannan1437@users.noreply.github.com> Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
129 lines
2.6 KiB
CSS
129 lines
2.6 KiB
CSS
.ProseMirror p.is-editor-empty:first-child::before {
|
||
content: attr(data-placeholder);
|
||
float: left;
|
||
color: rgb(var(--color-text-400));
|
||
pointer-events: none;
|
||
height: 0;
|
||
}
|
||
|
||
.ProseMirror .is-empty::before {
|
||
content: attr(data-placeholder);
|
||
float: left;
|
||
color: rgb(var(--color-text-400));
|
||
pointer-events: none;
|
||
height: 0;
|
||
}
|
||
|
||
/* Custom image styles */
|
||
|
||
.ProseMirror img {
|
||
transition: filter 0.1s ease-in-out;
|
||
|
||
&:hover {
|
||
cursor: pointer;
|
||
filter: brightness(90%);
|
||
}
|
||
|
||
&.ProseMirror-selectednode {
|
||
outline: 3px solid #5abbf7;
|
||
filter: brightness(90%);
|
||
}
|
||
}
|
||
|
||
/* Custom TODO list checkboxes – shoutout to this awesome tutorial: https://moderncss.dev/pure-css-custom-checkbox-style/ */
|
||
|
||
ul[data-type="taskList"] li > label {
|
||
margin-right: 0.2rem;
|
||
user-select: none;
|
||
}
|
||
|
||
@media screen and (max-width: 768px) {
|
||
ul[data-type="taskList"] li > label {
|
||
margin-right: 0.5rem;
|
||
}
|
||
}
|
||
|
||
ul[data-type="taskList"] li > label input[type="checkbox"] {
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
background-color: rgb(var(--color-background-100));
|
||
margin: 0;
|
||
cursor: pointer;
|
||
width: 1.2rem;
|
||
height: 1.2rem;
|
||
position: relative;
|
||
border: 2px solid rgb(var(--color-text-100));
|
||
margin-right: 0.3rem;
|
||
display: grid;
|
||
place-content: center;
|
||
|
||
&:hover {
|
||
background-color: rgb(var(--color-background-80));
|
||
}
|
||
|
||
&:active {
|
||
background-color: rgb(var(--color-background-90));
|
||
}
|
||
|
||
&::before {
|
||
content: "";
|
||
width: 0.65em;
|
||
height: 0.65em;
|
||
transform: scale(0);
|
||
transition: 120ms transform ease-in-out;
|
||
box-shadow: inset 1em 1em;
|
||
transform-origin: center;
|
||
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
|
||
}
|
||
|
||
&:checked::before {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
|
||
ul[data-type="taskList"] li[data-checked="true"] > div > p {
|
||
color: rgb(var(--color-text-200));
|
||
text-decoration: line-through;
|
||
text-decoration-thickness: 2px;
|
||
}
|
||
|
||
/* Overwrite tippy-box original max-width */
|
||
|
||
.tippy-box {
|
||
max-width: 400px !important;
|
||
}
|
||
|
||
.ProseMirror {
|
||
position: relative;
|
||
word-wrap: break-word;
|
||
white-space: pre-wrap;
|
||
-moz-tab-size: 4;
|
||
tab-size: 4;
|
||
-webkit-user-select: text;
|
||
-moz-user-select: text;
|
||
-ms-user-select: text;
|
||
user-select: text;
|
||
outline: none;
|
||
cursor: text;
|
||
line-height: 1.2;
|
||
font-family: inherit;
|
||
font-size: 14px;
|
||
color: inherit;
|
||
-moz-box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
appearance: textfield;
|
||
-webkit-appearance: textfield;
|
||
-moz-appearance: textfield;
|
||
}
|
||
|
||
.fadeIn {
|
||
opacity: 1;
|
||
transition: opacity 0.3s ease-in;
|
||
}
|
||
|
||
.fadeOut {
|
||
opacity: 0;
|
||
transition: opacity 0.2s ease-out;
|
||
}
|
||
|