yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Improvements to image positioning (#3061)

Browse Source 
* fix: Empty paragraph below images that confuses block insertion

* Remove spacing for caption when unused
This commit is contained in:
Tom Moor
2022-02-05 10:14:10 -08:00
committed by GitHub
parent ae0644177b
commit c7df74fcc4
5 changed files with 26 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/editor/components/ComponentView.tsx
View File

@@ -55,6 +55,8 @@ export default class ComponentView {
? document.createElement("span")
: document.createElement("div");
this.dom.classList.add(`component-${node.type.name}`);
this.renderElement();
}

14
app/editor/components/Styles.ts
View File

@@ -120,6 +120,7 @@ const EditorStyles = styled.div<{
}
.image {
line-height: 0;
text-align: center;
max-width: 100%;
clear: both;
@@ -200,6 +201,19 @@ const EditorStyles = styled.div<{
pointer-events: none;
}
img.ProseMirror-separator {
display: inline;
border: none !important;
margin: 0 !important;
}
// Removes forced paragraph spaces below images, this is needed to images
// being inline nodes that are displayed like blocks
.component-image + img.ProseMirror-separator,
.component-image + img.ProseMirror-separator + br.ProseMirror-trailingBreak {
display: none;
}
.ProseMirror[contenteditable="false"] {
.caption {
pointer-events: none;

2
package.json
View File

@@ -144,7 +144,7 @@
"prosemirror-tables": "^1.1.1",
"prosemirror-transform": "1.2.5",
"prosemirror-utils": "^0.9.6",
"prosemirror-view": "1.22.0",
"prosemirror-view": "1.23.6",
"query-string": "^7.0.1",
"quoted-printable": "^1.0.1",
"randomstring": "1.1.5",

6
shared/editor/nodes/Image.tsx
View File

@@ -545,7 +545,7 @@ const Caption = styled.p`
font-style: italic;
font-weight: normal;
color: ${(props) => props.theme.textSecondary};
padding: 2px 0;
padding: 8px 0 4px;
line-height: 16px;
text-align: center;
min-height: 1em;
@@ -557,7 +557,7 @@ const Caption = styled.p`
cursor: text;
&:empty:not(:focus) {
visibility: hidden;
display: none;
}
&:empty:before {
@@ -579,6 +579,6 @@ const ImageWrapper = styled.span`
}
&.ProseMirror-selectednode + ${Caption} {
visibility: visible;
display: block;
}
`;

12
yarn.lock
View File

@@ -11823,7 +11823,7 @@ prosemirror-markdown@^1.5.2:
markdown-it "^12.0.0"
prosemirror-model "^1.0.0"
prosemirror-model@1.16.1, prosemirror-model@^1.0.0, prosemirror-model@^1.1.0, prosemirror-model@^1.14.3, prosemirror-model@^1.8.1:
prosemirror-model@1.16.1, prosemirror-model@^1.0.0, prosemirror-model@^1.14.3, prosemirror-model@^1.16.0, prosemirror-model@^1.8.1:
version "1.16.1"
resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.16.1.tgz#fb388270bc9609b66298d6a7e15d0cc1d6c61253"
integrity sha512-r1/w0HDU40TtkXp0DyKBnFPYwd8FSlUSJmGCGFv4DeynfeSlyQF2FD0RQbVEMOe6P3PpUSXM6LZBV7W/YNZ4mA==
@@ -11869,12 +11869,12 @@ prosemirror-utils@^0.9.6:
resolved "https://registry.yarnpkg.com/prosemirror-utils/-/prosemirror-utils-0.9.6.tgz#3d97bd85897e3b535555867dc95a51399116a973"
integrity sha512-UC+j9hQQ1POYfMc5p7UFxBTptRiGPR7Kkmbl3jVvU8VgQbkI89tR/GK+3QYC8n+VvBZrtAoCrJItNhWSxX3slA==
prosemirror-view@1.22.0, prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.13.3:
version "1.22.0"
resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.22.0.tgz#235dca38ed62ae028d627be5684d45b36550d310"
integrity sha512-kCZoHp0Sa2AHhwV64aNFi69QlqBocZ8G8gbvZRFDdEj57whOCdPjdVLYBVyM9+S5oHDSrzjkoMm+JvvHFhMRJw==
prosemirror-view@1.23.6, prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.13.3:
version "1.23.6"
resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.23.6.tgz#f514b3166942cb70aac4ac24d0a28c21c3897608"
integrity sha512-B4DAzriNpI/AVoW0Lu6SVfX00jZZQxOVwdBQEjWlRbCdT9V0pvk4GQJ3JTFaib+b6BcPdRZ3MjWXz2xvV1rblA==
dependencies:
prosemirror-model "^1.14.3"
prosemirror-model "^1.16.0"
prosemirror-state "^1.0.0"
prosemirror-transform "^1.1.0"