mobile: fix collapsible heading

This commit is contained in:
Ammar Ahmed
2025-10-20 12:09:22 +05:00
parent 2eb38d236e
commit e2556d3228
2 changed files with 91 additions and 2 deletions

View File

@@ -45,6 +45,88 @@
#statusbar p {
font-family: "Inter";
}
.ProseMirror h1,
.ProseMirror h2,
.ProseMirror h3,
.ProseMirror h4,
.ProseMirror h5,
.ProseMirror h6 {
padding-right: 35px;
}
.ProseMirror h1::before,
.ProseMirror h2::before {
width: 25px !important;
height: 25px !important;
background-size: 25 !important;
}
.ProseMirror h3::before,
.ProseMirror h4::before {
width: 22px !important;
height: 22px !important;
background-size: 22 !important;
}
.ProseMirror h5::before,
.ProseMirror h6::before {
width: 20px !important;
height: 20px !important;
background-size: 20 !important;
}
.ProseMirror h1::before,
.ProseMirror h2::before,
.ProseMirror h3::before,
.ProseMirror h4::before,
.ProseMirror h5::before,
.ProseMirror h6::before {
right: 10px !important;
left: unset !important;
opacity: 1 !important;
}
.ProseMirror h1[dir="rtl"]::after,
.ProseMirror h2[dir="rtl"]::after,
.ProseMirror h3[dir="rtl"]::after,
.ProseMirror h4[dir="rtl"]::after,
.ProseMirror h5[dir="rtl"]::after,
.ProseMirror h6[dir="rtl"]::after {
left: 10px !important;
right: unset !important;
opacity: 1 !important;
}
.ProseMirror h1[dir="rtl"],
.ProseMirror h2[dir="rtl"],
.ProseMirror h3[dir="rtl"],
.ProseMirror h4[dir="rtl"],
.ProseMirror h5[dir="rtl"],
.ProseMirror h6[dir="rtl"] {
padding-right: 0px;
padding-left: 35px;
}
.ProseMirror h1[data-collapsed="true"]::before,
.ProseMirror h2[data-collapsed="true"]::before,
.ProseMirror h3[data-collapsed="true"]::before,
.ProseMirror h4[data-collapsed="true"]::before,
.ProseMirror h5[data-collapsed="true"]::before,
.ProseMirror h6[data-collapsed="true"]::before {
transform: rotate(90deg) !important;
opacity: 1;
}
.ProseMirror h1[data-collapsed="true"]::after,
.ProseMirror h2[data-collapsed="true"]::after,
.ProseMirror h3[data-collapsed="true"]::after,
.ProseMirror h4[data-collapsed="true"]::after,
.ProseMirror h5[data-collapsed="true"]::after,
.ProseMirror h6[data-collapsed="true"]::after {
transform: rotate(-90deg) !important;
opacity: 1;
}
</style>
<meta name="description" content="Notesnook editor for mobile" />
<!--

View File

@@ -23,9 +23,10 @@ import {
textblockTypeInputRule
} from "@tiptap/core";
import { Heading as TiptapHeading } from "@tiptap/extension-heading";
import { isClickWithinBounds } from "../../utils/prosemirror";
import { isClickWithinBounds } from "../../utils/prosemirror.js";
import { Selection, Transaction } from "@tiptap/pm/state";
import { Node } from "@tiptap/pm/model";
import { useToolbarStore } from "../../toolbar/stores/toolbar-store.js";
const COLLAPSIBLE_BLOCK_TYPES = [
"paragraph",
@@ -184,7 +185,13 @@ export const Heading = TiptapHeading.extend({
);
if (calloutAncestor) return;
if (isClickWithinBounds(e, resolvedPos, "left")) {
if (
isClickWithinBounds(
e,
resolvedPos,
useToolbarStore.getState().isMobile ? "right" : "left"
)
) {
e.preventDefault();
e.stopImmediatePropagation();