mirror of https://github.com/logseq/logseq
WYSIWYG headers + CSS cleanup (#2393)
* Run formatter on CSS file * Add content-aware classes to editor textarea * Update yarn.lock * Handle styles when editing multiline blockspull/2422/head
Devon Zuegel
GitHub
parent
397bb9bba5
commit
92ae2e5928
File diff suppressed because it is too large
Load Diff
|
|
@ -1,6 +1,3 @@
|
|||
.blocks-container {
|
||||
}
|
||||
|
||||
.block-content-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -34,7 +31,7 @@
|
|||
.asset-container {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin-top: .5rem;
|
||||
margin-top: 0.5rem;
|
||||
|
||||
.ctl {
|
||||
position: absolute;
|
||||
|
|
@ -47,7 +44,7 @@
|
|||
> a {
|
||||
padding: 3px;
|
||||
border-radius: 4px;
|
||||
opacity: .4;
|
||||
opacity: 0.4;
|
||||
user-select: none;
|
||||
background: var(--ls-primary-background-color);
|
||||
|
||||
|
|
@ -55,7 +52,7 @@
|
|||
svg {
|
||||
color: var(--ls-primary-text-color);
|
||||
|
||||
opacity: .5;
|
||||
opacity: 0.5;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
|
@ -105,12 +102,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
.block-body ul, .block-body ol, .block-body dl {
|
||||
margin-bottom: 2em;
|
||||
.block-body ul,
|
||||
.block-body ol,
|
||||
.block-body dl {
|
||||
margin-bottom: 2em;
|
||||
|
||||
> li {
|
||||
margin: 0;
|
||||
}
|
||||
> li {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.block-body ol {
|
||||
|
|
@ -118,7 +117,8 @@
|
|||
margin-left: 0;
|
||||
|
||||
> li {
|
||||
&::marker, > p {
|
||||
&::marker,
|
||||
> p {
|
||||
display: initial;
|
||||
}
|
||||
}
|
||||
|
|
@ -159,7 +159,7 @@
|
|||
cursor: alias;
|
||||
|
||||
&:hover {
|
||||
color: var(--ls-link-text-hover-color)
|
||||
color: var(--ls-link-text-hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -190,7 +190,7 @@
|
|||
}
|
||||
|
||||
.page-properties {
|
||||
background-color: var(--ls-page-properties-background-color);
|
||||
background-color: var(--ls-page-properties-background-color);
|
||||
}
|
||||
|
||||
.block-marker {
|
||||
|
|
@ -232,57 +232,76 @@
|
|||
margin-left: auto;
|
||||
}
|
||||
|
||||
.ls-block h1, .editor-inner .h1 {
|
||||
font-size: 2em;
|
||||
.ls-block h1,
|
||||
.editor-inner .h1 {
|
||||
font-size: 2em;
|
||||
min-height: 1.5em;
|
||||
}
|
||||
|
||||
.ls-block h2, .editor-inner .h2 {
|
||||
font-size: 1.5em;
|
||||
.ls-block h2,
|
||||
.editor-inner .h2 {
|
||||
font-size: 1.5em;
|
||||
min-height: 1.5em;
|
||||
}
|
||||
|
||||
.ls-block h3, .editor-inner .h3 {
|
||||
font-size: 1.17em;
|
||||
.ls-block h3,
|
||||
.editor-inner .h3 {
|
||||
font-size: 1.17em;
|
||||
min-height: 1.17em;
|
||||
}
|
||||
|
||||
.ls-block h4, .editor-inner .h4 {
|
||||
font-size: 1.12em;
|
||||
.ls-block h4,
|
||||
.editor-inner .h4 {
|
||||
font-size: 1.12em;
|
||||
min-height: 1.12em;
|
||||
}
|
||||
|
||||
.ls-block h5, .editor-inner .h5 {
|
||||
.ls-block h5,
|
||||
.editor-inner .h5 {
|
||||
font-size: 0.83em;
|
||||
min-height: 0.83em;
|
||||
}
|
||||
|
||||
.ls-block h6, .editor-inner .h6 {
|
||||
.ls-block h6,
|
||||
.editor-inner .h6 {
|
||||
font-size: 0.75em;
|
||||
min-height: 0.75em;
|
||||
}
|
||||
|
||||
.ls-block :is(h1,h2,h3,h4,h5,h6), .editor-inner .h1, .editor-inner .h2, .editor-inner .h3,
|
||||
.editor-inner .h4, .editor-inner .h5, .editor-inner .h6 {
|
||||
font-weight: 600
|
||||
.ls-block :is(h1, h2, h3, h4, h5, h6),
|
||||
.editor-inner :is(.h1, .h2, .h3, .h4, .h5, .h6) {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.ls-block :is(h1, h2), .editor-inner .h1, .editor-inner .h2 {
|
||||
border-bottom: 1px solid var(--ls-quaternary-background-color);
|
||||
margin: 0.4em 0 0;
|
||||
.ls-block :is(h1, h2),
|
||||
.editor-inner :is(.h1, .h2) {
|
||||
border-bottom: 1px solid var(--ls-quaternary-background-color);
|
||||
margin: 0.4em 0 0;
|
||||
}
|
||||
|
||||
.document-mode .ls-block h1, .document-mode .editor-inner .h1 {
|
||||
margin: 0.67em 0;
|
||||
.document-mode .ls-block h1,
|
||||
.document-mode .editor-inner .h1 {
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
.document-mode .ls-block h2, .document-mode .editor-inner .h2 {
|
||||
margin: 0.75em 0;
|
||||
.document-mode .ls-block h2,
|
||||
.document-mode .editor-inner .h2 {
|
||||
margin: 0.75em 0;
|
||||
}
|
||||
.document-mode .ls-block h3, .document-mode .editor-inner .h3 {
|
||||
margin: 0.83em 0;
|
||||
.document-mode .ls-block h3,
|
||||
.document-mode .editor-inner .h3 {
|
||||
margin: 0.83em 0;
|
||||
}
|
||||
.document-mode .ls-block h4, .document-mode .editor-inner .h4 {
|
||||
margin: 1.12em 0;
|
||||
.document-mode .ls-block h4,
|
||||
.document-mode .editor-inner .h4 {
|
||||
margin: 1.12em 0;
|
||||
}
|
||||
.document-mode .ls-block h5, .document-mode .editor-inner .h5 {
|
||||
margin: 1.5em 0;
|
||||
.document-mode .ls-block h5,
|
||||
.document-mode .editor-inner .h5 {
|
||||
margin: 1.5em 0;
|
||||
}
|
||||
.document-mode .ls-block h6, .document-mode .editor-inner .h6 {
|
||||
margin: 1.67em 0;
|
||||
.document-mode .ls-block h6,
|
||||
.document-mode .editor-inner .h6 {
|
||||
margin: 1.67em 0;
|
||||
}
|
||||
|
||||
.document-mode .ls-block {
|
||||
|
|
@ -350,7 +369,7 @@
|
|||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: var(--ls-block-bullet-color, #394b59);
|
||||
transition: transform .2s;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
&.bullet-closed {
|
||||
|
|
@ -406,5 +425,5 @@ a:hover > .bullet-container .bullet {
|
|||
}
|
||||
|
||||
a.filter svg {
|
||||
transform: scale(0.9);
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -383,12 +383,21 @@
|
|||
(set-up-key-down! repo state format)
|
||||
(set-up-key-up! state input input-id search-timeout)))
|
||||
|
||||
(defn- get-editor-heading-class
|
||||
[content heading-level]
|
||||
(if (string/includes? content "\n")
|
||||
nil
|
||||
(if heading-level (str "h" heading-level))))
|
||||
(def starts-with? clojure.string/starts-with?)
|
||||
|
||||
(defn get-editor-heading-class [content]
|
||||
(cond
|
||||
(string/includes? content "\n") "multiline-block"
|
||||
(starts-with? content "# ") "h1"
|
||||
(starts-with? content "## ") "h2"
|
||||
(starts-with? content "### ") "h3"
|
||||
(starts-with? content "#### ") "h4"
|
||||
(starts-with? content "##### ") "h5"
|
||||
(starts-with? content "###### ") "h6"
|
||||
(starts-with? content "TODO ") "todo-block"
|
||||
(starts-with? content "DOING ") "doing-block"
|
||||
(starts-with? content "DONE ") "done-block"
|
||||
:else "normal-block"))
|
||||
|
||||
(rum/defc mock-textarea
|
||||
< rum/reactive
|
||||
|
|
@ -432,7 +441,10 @@
|
|||
:as option} id config]
|
||||
(let [content (state/get-edit-content)
|
||||
heading-level (get state ::heading-level)]
|
||||
[:div.editor-inner {:class (if block "block-editor" "non-block-editor")}
|
||||
[:div.editor-inner {:class (str
|
||||
(if block "block-editor" "non-block-editor")
|
||||
" "
|
||||
(get-editor-heading-class content))}
|
||||
(when config/mobile? (mobile-bar state id))
|
||||
(ui/ls-textarea
|
||||
{:id id
|
||||
|
|
@ -443,7 +455,7 @@
|
|||
:on-change (editor-handler/editor-on-change! block id search-timeout)
|
||||
:on-paste (editor-handler/editor-on-paste! id)
|
||||
:auto-focus false
|
||||
:class (get-editor-heading-class content heading-level)})
|
||||
:class (get-editor-heading-class content)})
|
||||
|
||||
(mock-textarea)
|
||||
|
||||
|
|
|
|||
|
|
@ -7486,6 +7486,8 @@ react-icons@^2.2.7:
|
|||
version "2.2.7"
|
||||
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-2.2.7.tgz#d7860826b258557510dac10680abea5ca23cf650"
|
||||
integrity sha512-0n4lcGqzJFcIQLoQytLdJCE0DKSA9dkwEZRYoGrIDJZFvIT6Hbajx5mv9geqhqFiNjUgtxg8kPyDfjlhymbGFg==
|
||||
dependencies:
|
||||
react-icon-base "2.1.0"
|
||||
|
||||
react-is@^16.3.1, react-is@^16.8.1:
|
||||
version "16.13.1"
|
||||
|
|
|
|||
Loading…
Reference in New Issue