binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-2450] dev: custom image extension (#5585)

Browse source 
* fix: svg not supported in image uploads

* fix: svg image file error message fixed

* feat: add custom image node for uploads

* fix: combine two extensions

* fix: added new image extension to backend

* fix: type errors

* style: image drop node

* style: image resize handler

* fix: removed unused stuff

* fix: types of updateAttributes

* fix: image insertion at pos and loading effect added

* fix: resize image real time sync

* fix: drag drop menu

* feat: custom image component editor

* fix: reverted back styles

* fix: reverted back document info changes

* fix: css image css

* style: image selected and hover states

* refactor: custom image extension folder structure

* style: read-only image

* chore: remove file handler

* fix: fixed multi time file opener

* fix: editor readonly content set properly

* fix: old images not rendered as new ones

* fix: drop upload fixed

* chore: remove console logs

* fix: src of image node as dependency

* fix: helper library build fix

* fix: improved reflow/layout and fixed resizing

---------

Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
This commit is contained in:
M. Palanikannan 2024-09-16 19:36:20 +05:30 • committed by GitHub
parent edf0ab8175
commit 8533eba07d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
41 changed files with 947 additions and 257 deletions
Download patch file Download diff file Expand all files Collapse all files

14
packages/editor/src/styles/drag-drop.css
View file

@ -39,7 +39,7 @@
}
/* end ai handle */
.ProseMirror:not(.dragging) .ProseMirror-selectednode {
.ProseMirror:not(.dragging) .ProseMirror-selectednode:not(.node-imageComponent):not(.node-image) {
position: relative;
cursor: grab;
outline: none !important;
@ -63,6 +63,15 @@
border-radius: 4px;
pointer-events: none;
}
&.node-imageComponent,
&.node-image {
--horizontal-offset: 0px;
&::after {
background-color: rgba(var(--color-background-100), 0.2);
}
}
}
/* for targeting the task list items */
@ -96,7 +105,8 @@ ol > li:nth-child(n + 100).ProseMirror-selectednode:not(.dragging)::after {
margin-left: -35px;
}
.ProseMirror img {
.ProseMirror node-image,
.ProseMirror node-imageComponent {
transition: filter 0.1s ease-in-out;
cursor: pointer;

41
packages/editor/src/styles/editor.css
View file

@ -122,18 +122,21 @@
/* Custom image styles */
.ProseMirror img {
transition: filter 0.1s ease-in-out;
margin-top: 8px;
margin-top: 0 !important;
margin-bottom: 0;
&:hover {
cursor: pointer;
filter: brightness(90%);
}
&:not(.read-only-image) {
transition: filter 0.1s ease-in-out;
&.ProseMirror-selectednode {
outline: 3px solid rgba(var(--color-primary-100));
filter: brightness(90%);
&:hover {
cursor: pointer;
filter: brightness(90%);
}
&.ProseMirror-selectednode {
outline: 3px solid rgba(var(--color-primary-100));
filter: brightness(90%);
}
}
}
@ -261,26 +264,6 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
transition: opacity 0.2s ease-out;
}
.img-placeholder {
position: relative;
width: 35%;
margin-top: 0 !important;
margin-bottom: 0 !important;
&::before {
content: "";
box-sizing: border-box;
position: absolute;
top: 50%;
left: 45%;
width: 20px;
height: 20px;
border-radius: 50%;
border: 3px solid rgba(var(--color-text-200));
border-top-color: rgba(var(--color-text-800));
animation: spinning 0.6s linear infinite;
}
}
@keyframes spinning {
to {