From 86d8a71eb4ba96a92e031d36cd598f446c66ede1 Mon Sep 17 00:00:00 2001 From: Praveen Murali Date: Thu, 7 Nov 2024 23:51:03 +0530 Subject: [PATCH] Support editor sizing (#1265) * Small size variant - base styles * code and blockquote styles * list bullet color fix * large size base styles --- src/components/Editor/index.jsx | 6 +- src/components/EditorContent/index.jsx | 2 +- src/styles/editor/editor-content.scss | 144 ++++++++++++++++++------- 3 files changed, 108 insertions(+), 44 deletions(-) diff --git a/src/components/Editor/index.jsx b/src/components/Editor/index.jsx index 72b97de1..92e8bf03 100644 --- a/src/components/Editor/index.jsx +++ b/src/components/Editor/index.jsx @@ -131,9 +131,9 @@ const Editor = ( "bubble-menu-active": isBubbleMenuActive, "placeholder-active": isPlaceholderActive, "attachments-active": isAttachmentsActive, - "neeto-editor--size-large": size === EDITOR_SIZES.LARGE, - "neeto-editor--size-medium": size === EDITOR_SIZES.MEDIUM, - "neeto-editor--size-small": size === EDITOR_SIZES.SMALL, + "neeto-editor-size--large": size === EDITOR_SIZES.LARGE, + "neeto-editor-size--medium": size === EDITOR_SIZES.MEDIUM, + "neeto-editor-size--small": size === EDITOR_SIZES.SMALL, [contentClassName]: contentClassName, }); diff --git a/src/components/EditorContent/index.jsx b/src/components/EditorContent/index.jsx index 2ce02d37..cfd9ee1f 100644 --- a/src/components/EditorContent/index.jsx +++ b/src/components/EditorContent/index.jsx @@ -92,7 +92,7 @@ const EditorContent = ({ ref={editorContentRef} className={classnames(EDITOR_CONTENT_CLASS_NAME, { [className]: className, - [`${EDITOR_CONTENT_CLASS_NAME}--size-${size}`]: true, + [`neeto-editor-size--${size}`]: true, })} dangerouslySetInnerHTML={{ __html: sanitize(htmlContent, SANITIZE_OPTIONS), diff --git a/src/styles/editor/editor-content.scss b/src/styles/editor/editor-content.scss index d97222b4..8460f43e 100644 --- a/src/styles/editor/editor-content.scss +++ b/src/styles/editor/editor-content.scss @@ -61,32 +61,31 @@ --neeto-editor-font-bold: 700; --neeto-editor-font-extrabold: 800; --neeto-editor-font-black: 900; - --neeto-editor-content-h1-font-size: 2rem; - --neeto-editor-content-h2-font-size: 1.5rem; - --neeto-editor-content-h3-font-size: 1.25rem; - --neeto-editor-content-h4-font-size: 1rem; - --neeto-editor-content-h5-font-size: 0.875rem; - --neeto-editor-content-h6-font-size: 0.75rem; - --neeto-editor-content-h1-margin: 2rem 0 0.25rem; + --neeto-editor-content-h1-margin: 1.5rem 0 0.25rem; --neeto-editor-content-h2-margin: 1.5rem 0 0.25rem; - --neeto-editor-content-h3-margin: 1rem 0 0.25rem; - --neeto-editor-content-h4-margin: 0.75rem 0 0.25rem; - --neeto-editor-content-h5-margin: 0.75rem 0 0.25rem; - --neeto-editor-content-h6-margin: 0.75rem 0 0.25rem; + --neeto-editor-content-h3-margin: 1.5rem 0 0.25rem; + --neeto-editor-content-h4-margin: 1.5rem 0 0.25rem; + --neeto-editor-content-h5-margin: 1.5rem 0 0.25rem; + --neeto-editor-content-h6-margin: 1.5rem 0 0.25rem; --neeto-editor-content-heading-font-weight: 600; --neeto-editor-content-heading-font-weight-bold: bold; - --neeto-editor-content-heading-color: 54, 55, 55, 1; - --neeto-editor-content-paragraph-font-size: 1rem; - --neeto-editor-content-paragraph-font-weight: 400; + --neeto-editor-content-heading-color: 12, 17, 29, 1; --neeto-editor-content-paragraph-color: 54, 55, 55, 1; + --neeto-editor-content-paragraph-font-weight: 400; --neeto-editor-content-paragraph-line-height: 1.6; - - @media only screen and (max-width: 720px) { - --neeto-editor-content-h1-font-size: 1.375rem; - --neeto-editor-content-h2-font-size: 1.25rem; - --neeto-editor-content-h3-font-size: 1.125rem; - --neeto-editor-content-h4-font-size: 1rem; - } + --neeto-editor-content-list-left-padding: 2rem; + --neeto-editor-content-list-margin-bottom: 1rem; + --neeto-editor-content-list-item-margin-bottom: 0.5rem; + --neeto-editor-content-list-item-margin-top: 0.5rem; + --neeto-editor-content-code-font-size: 85%; + --neeto-editor-content-code-background-color: 246, 248, 250, 1; + --neeto-editor-content-code-color: 31, 35, 40, 1; + --neeto-editor-content-code-padding: 0.2em 0.4em; + --neeto-editor-content-blockquote-color: 89, 99, 110, 1; + --neeto-editor-content-blockquote-border-color: 209, 217, 224, 1; + --neeto-editor-content-blockquote-border-left-width: 4px; + --neeto-editor-content-blockquote-margin-bottom: 1rem; + --neeto-editor-content-blockquote-padding-left: 12px; } .neeto-editor-content { @@ -100,8 +99,56 @@ } // Sizing - &--size-large { + &.neeto-editor-size--small { + --neeto-editor-content-heading-color: 31, 35, 40, 1; + --neeto-editor-content-paragraph-color: 31, 35, 40, 1; + --neeto-editor-content-h1-font-size: 1.75rem; + --neeto-editor-content-h2-font-size: 1.3125rem; + --neeto-editor-content-h3-font-size: 1.09375rem; + --neeto-editor-content-h4-font-size: 0.875rem; + --neeto-editor-content-h5-font-size: 0.765625rem; + --neeto-editor-content-h6-font-size: 0.74375rem; + --neeto-editor-content-paragraph-font-size: 0.875rem; + --neeto-editor-content-paragraph-line-height: 1.5; + --neeto-editor-content-list-left-padding: 1.5rem; + --neeto-editor-content-list-item-margin-bottom: 0.25rem; + --neeto-editor-content-list-item-margin-top: 0.25rem; + } + + &.neeto-editor-size--medium { + --neeto-editor-content-h1-font-size: 2rem; + --neeto-editor-content-h2-font-size: 1.5rem; + --neeto-editor-content-h3-font-size: 1.25rem; + --neeto-editor-content-h4-font-size: 1rem; + --neeto-editor-content-h5-font-size: 0.875rem; + --neeto-editor-content-h6-font-size: 0.75rem; + --neeto-editor-content-paragraph-font-size: 1rem; + + @media only screen and (max-width: 767px) { + --neeto-editor-content-h1-font-size: 1.375rem; + --neeto-editor-content-h2-font-size: 1.25rem; + --neeto-editor-content-h3-font-size: 1.125rem; + } + } + + &.neeto-editor-size--large { + --neeto-editor-content-h1-font-size: 2.375rem; + --neeto-editor-content-h2-font-size: 1.93rem; + --neeto-editor-content-h3-font-size: 1.633rem; + --neeto-editor-content-h4-font-size: 1.336rem; + --neeto-editor-content-h5-font-size: 0.986rem; + --neeto-editor-content-h6-font-size: 0.796rem; --neeto-editor-content-paragraph-font-size: 1.125rem; + + @media only screen and (max-width: 767px) { + --neeto-editor-content-h1-font-size: 2.125rem; + --neeto-editor-content-h2-font-size: 1.7266rem; + --neeto-editor-content-h3-font-size: 1.4609rem; + --neeto-editor-content-h4-font-size: 1.1953rem; + --neeto-editor-content-h5-font-size: 0.875rem; + --neeto-editor-content-h6-font-size: 0.75rem; + --neeto-editor-content-paragraph-font-size: 1rem; + } } // Headers @@ -231,10 +278,12 @@ // Code code { - padding: 0.2em 0.4em; - font-size: 0.875rem; + padding: var(--neeto-editor-content-code-padding); + font-size: var(--neeto-editor-content-code-font-size); border-radius: var(--neeto-editor-rounded-sm); - background-color: rgb(var(--neeto-editor-gray-100)); + color: rgba(var(--neeto-editor-content-code-color)); + background-color: rgba(var(--neeto-editor-content-code-background-color)); + border-color: rgba(var(--neeto-editor-content-code-background-color)); font-family: "SFMono-Regular", Menlo, Consolas, "PT Mono", "Liberation Mono", Courier, monospace; @@ -250,20 +299,26 @@ h5 code, h6 code, p code { - font-size: inherit; + font-size: var(--neeto-editor-content-code-font-size); } pre { position: relative; - background-color: #f7f6f3; + color: rgba(var(--neeto-editor-content-code-color)); + background-color: rgba(var(--neeto-editor-content-code-background-color)); + border-color: rgba(var(--neeto-editor-content-code-background-color)); overflow-x: auto; - font-size: 0.875rem; + font-size: var(--neeto-editor-content-code-font-size); line-height: 1.5; margin-top: 1rem; margin-bottom: 1rem; border-radius: var(--neeto-editor-rounded-sm); padding: 12px; + div { + color: rgba(var(--neeto-editor-content-code-color)); + } + .neeto-editor-codeblock-options { display: flex; position: absolute; @@ -322,12 +377,17 @@ // Blockquote blockquote { font-weight: var(--neeto-editor-font-medium); - color: rgb(var(--neeto-editor-black)); - border-left-width: 4px; - border-left-color: #e5e7eb; + color: rgba(var(--neeto-editor-content-blockquote-color)); + border-left-width: var(--neeto-editor-content-blockquote-border-left-width); + border-left-color: rgba(var(--neeto-editor-content-blockquote-border-color)); quotes: "\201C" "\201D" "\2018" "\2019"; - margin: 8px 0; - padding-left: 12px; + margin-bottom: var(--neeto-editor-content-blockquote-margin-bottom); + padding-left: var(--neeto-editor-content-blockquote-padding-left); + + div, + p { + color: inherit; + } &>p::before { content: "" !important; @@ -341,23 +401,27 @@ ul, ol { list-style: revert; - padding-left: 28px; - margin-bottom: 1rem; + padding-left: var(--neeto-editor-content-list-left-padding); + margin-bottom: var(--neeto-editor-content-list-margin-bottom); li { - margin-top: 0.5rem; - margin-bottom: 0.5rem; + margin-top: var(--neeto-editor-content-list-item-margin-top); + margin-bottom: var(--neeto-editor-content-list-item-margin-bottom); + font-size: var(--neeto-editor-content-paragraph-font-size); + font-weight: var(--neeto-editor-content-paragraph-font-weight); + line-height: var(--neeto-editor-content-paragraph-line-height); + color: rgba(var(--neeto-editor-content-paragraph-color)); } li::before { - background-color: rgb(var(--neeto-editor-black)); + background-color: rgba(var(--neeto-editor-content-paragraph-color)); } } // Link a[href] { color: rgb(var(--neeto-editor-accent-800)); - font-weight: 500; + font-weight: inherit; } // Embed @@ -589,4 +653,4 @@ background-color: rgb(var(--neeto-editor-gray-300)); } } -} \ No newline at end of file +}