Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(elements|ino-markdown-editor): allow custom font-sizes via CSS variables #1182

Merged
merged 3 commits into from
Jan 30, 2024
Merged

feat(elements|ino-markdown-editor): allow custom font-sizes via CSS variables #1182

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
89164b5
refactor: add CSS-Variables to adjust font-sizes
TobiasHeimGalindo Jan 18, 2024
f31fd3a
refactor: add dynamic font scaling for base-font-size
TobiasHeimGalindo Jan 26, 2024
db2690e
docs: add font scaling docu
TobiasHeimGalindo Jan 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
40 changes: 40 additions & 0 deletions packages/elements/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -998,6 +998,16 @@ export namespace Components {
* * Support of strikethrough syntax (`~~TextToStrike~~`)
* * Support of task list syntax (`- [x] MyToDoTask`)
* * No support of image syntax. __Images are not allowed!__
* ### Font Size Scaling
* The font sizes within the Markdown Editor are scaled based on the CSS variable `--ino-markdown-editor-font-size`. This variable sets the base font size, and other font sizes are scaled accordingly.
* #### Base Font Size Variable
* `--ino-markdown-editor-font-size`: Sets the base font size for all text elements. Default is `16px`.
* #### Scaling Factors
* | Element | Scaling Factor | Calculated Size (Example) |
* |---------|----------------|---------------------------|
* | Base Font Size | 1x | Base size (e.g., 16px) |
* | Header 1 (h1) | 2x | Double the base size (e.g., 32px) |
* | Header 2 (h2) | 1.75x | 1.75 times the base size (e.g., 28px) |
*/
interface InoMarkdownEditor {
/**
Expand Down Expand Up @@ -2095,6 +2105,16 @@ declare global {
* * Support of strikethrough syntax (`~~TextToStrike~~`)
* * Support of task list syntax (`- [x] MyToDoTask`)
* * No support of image syntax. __Images are not allowed!__
* ### Font Size Scaling
* The font sizes within the Markdown Editor are scaled based on the CSS variable `--ino-markdown-editor-font-size`. This variable sets the base font size, and other font sizes are scaled accordingly.
* #### Base Font Size Variable
* `--ino-markdown-editor-font-size`: Sets the base font size for all text elements. Default is `16px`.
* #### Scaling Factors
* | Element | Scaling Factor | Calculated Size (Example) |
* |---------|----------------|---------------------------|
* | Base Font Size | 1x | Base size (e.g., 16px) |
* | Header 1 (h1) | 2x | Double the base size (e.g., 32px) |
* | Header 2 (h2) | 1.75x | 1.75 times the base size (e.g., 28px) |
*/
interface HTMLInoMarkdownEditorElement extends Components.InoMarkdownEditor, HTMLStencilElement {
}
Expand Down Expand Up @@ -3405,6 +3425,16 @@ declare namespace LocalJSX {
* * Support of strikethrough syntax (`~~TextToStrike~~`)
* * Support of task list syntax (`- [x] MyToDoTask`)
* * No support of image syntax. __Images are not allowed!__
* ### Font Size Scaling
* The font sizes within the Markdown Editor are scaled based on the CSS variable `--ino-markdown-editor-font-size`. This variable sets the base font size, and other font sizes are scaled accordingly.
* #### Base Font Size Variable
* `--ino-markdown-editor-font-size`: Sets the base font size for all text elements. Default is `16px`.
* #### Scaling Factors
* | Element | Scaling Factor | Calculated Size (Example) |
* |---------|----------------|---------------------------|
* | Base Font Size | 1x | Base size (e.g., 16px) |
* | Header 1 (h1) | 2x | Double the base size (e.g., 32px) |
* | Header 2 (h2) | 1.75x | 1.75 times the base size (e.g., 28px) |
*/
interface InoMarkdownEditor {
/**
Expand Down Expand Up @@ -4368,6 +4398,16 @@ declare module "@stencil/core" {
* * Support of strikethrough syntax (`~~TextToStrike~~`)
* * Support of task list syntax (`- [x] MyToDoTask`)
* * No support of image syntax. __Images are not allowed!__
* ### Font Size Scaling
* The font sizes within the Markdown Editor are scaled based on the CSS variable `--ino-markdown-editor-font-size`. This variable sets the base font size, and other font sizes are scaled accordingly.
* #### Base Font Size Variable
* `--ino-markdown-editor-font-size`: Sets the base font size for all text elements. Default is `16px`.
* #### Scaling Factors
* | Element | Scaling Factor | Calculated Size (Example) |
* |---------|----------------|---------------------------|
* | Base Font Size | 1x | Base size (e.g., 16px) |
* | Header 1 (h1) | 2x | Double the base size (e.g., 32px) |
* | Header 2 (h2) | 1.75x | 1.75 times the base size (e.g., 28px) |
*/
"ino-markdown-editor": LocalJSX.InoMarkdownEditor & JSXBase.HTMLAttributes<HTMLInoMarkdownEditorElement>;
/**
Expand Down
12 changes: 12 additions & 0 deletions packages/elements/src/components/ino-markdown-editor/ino-markdown-editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
/**
@prop --ino-markdown-editor-min-height: min-height of text editor. Default value is `100px`.
@prop --ino-markdown-editor-max-height: max-height of text editor Default value is `none`.
@prop --ino-markdown-editor-font-size: Base font size for all text elements, which scales other font sizes accordingly. Default value is `16px`.

*/

// specific styles for the markdown editor dialog window that opens when having text selected and clicking the "create link" button
Expand Down Expand Up @@ -144,11 +146,21 @@ ino-markdown-editor {
}

.ProseMirror {
--base-font-size: var(--ino-markdown-editor-font-size, 16px);
min-height: var(--ino-markdown-editor-min-height, 100px);
padding: 15px;
border-radius: 4px;
border: 1px solid theme.$n-2;
color: rgba(0, 0, 0, 0.87);
font-size: var(--base-font-size);

h1 {
font-size: calc(var(--base-font-size) * 2);
}

h2 {
font-size: calc(var(--base-font-size) * 1.75);
}

&:hover:not(&-focused) {
border-color: theme.$n-4;
Expand Down
15 changes: 15 additions & 0 deletions packages/elements/src/components/ino-markdown-editor/ino-markdown-editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,21 @@ import markdownSerializer from './markdown-serializer';
* * Support of strikethrough syntax (`~~TextToStrike~~`)
* * Support of task list syntax (`- [x] MyToDoTask`)
* * No support of image syntax. __Images are not allowed!__
*
* ### Font Size Scaling
*
* The font sizes within the Markdown Editor are scaled based on the CSS variable `--ino-markdown-editor-font-size`. This variable sets the base font size, and other font sizes are scaled accordingly.
*
* #### Base Font Size Variable
* `--ino-markdown-editor-font-size`: Sets the base font size for all text elements. Default is `16px`.
*
* #### Scaling Factors
*
* | Element | Scaling Factor | Calculated Size (Example) |
* |---------|----------------|---------------------------|
* | Base Font Size | 1x | Base size (e.g., 16px) |
* | Header 1 (h1) | 2x | Double the base size (e.g., 32px) |
* | Header 2 (h2) | 1.75x | 1.75 times the base size (e.g., 28px) |
*/
@Component({
tag: 'ino-markdown-editor',
Expand Down
24 changes: 20 additions & 4 deletions packages/elements/src/components/ino-markdown-editor/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,21 @@ The **Markdown Mode** supports all syntax of [CommonMark](https://commonmark.org
* Support of task list syntax (`- [x] MyToDoTask`)
* No support of image syntax. __Images are not allowed!__

### Font Size Scaling

The font sizes within the Markdown Editor are scaled based on the CSS variable `--ino-markdown-editor-font-size`. This variable sets the base font size, and other font sizes are scaled accordingly.

#### Base Font Size Variable
`--ino-markdown-editor-font-size`: Sets the base font size for all text elements. Default is `16px`.

#### Scaling Factors

| Element | Scaling Factor | Calculated Size (Example) |
|---------|----------------|---------------------------|
| Base Font Size | 1x | Base size (e.g., 16px) |
| Header 1 (h1) | 2x | Double the base size (e.g., 32px) |
| Header 2 (h2) | 1.75x | 1.75 times the base size (e.g., 28px) |

## Properties

| Property | Attribute | Description | Type | Default |
Expand All @@ -44,10 +59,11 @@ The **Markdown Mode** supports all syntax of [CommonMark](https://commonmark.org

## CSS Custom Properties

| Name | Description |
| ---------------------------------- | ---------------------------------------------------- |
| `--ino-markdown-editor-max-height` | max-height of text editor Default value is `none`. |
| `--ino-markdown-editor-min-height` | min-height of text editor. Default value is `100px`. |
| Name | Description |
| ---------------------------------- | --------------------------------------------------------------------------------------------------------- |
| `--ino-markdown-editor-font-size` | Base font size for all text elements, which scales other font sizes accordingly. Default value is `16px`. |
| `--ino-markdown-editor-max-height` | max-height of text editor Default value is `none`. |
| `--ino-markdown-editor-min-height` | min-height of text editor. Default value is `100px`. |


## Dependencies
Expand Down
9 changes: 7 additions & 2 deletions packages/storybook/elements-stencil-docs.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6248,9 +6248,9 @@
"fileName": "ino-markdown-editor.tsx",
"tag": "ino-markdown-editor",
"readme": "# ino-markdown-editor\n\n\n",
"overview": "The **Preview Mode** supports following actions:\n\n| Actions ||||\n|---|\n| Link | Blockquotes | Unordered list / Bullet list | Headline 1 |\n| Italic | Strikethrough | Ordered list / Numbered list | Headline 2 |\n| Bold | Inline code | Task list |\n\nAdditionally, there are a lot of predefined\n[keyboard shortcuts](https://tiptap.dev/api/keyboard-shortcuts#predefined-keyboard-shortcuts)\nprovided by the underlying [tiptap](https://tiptap.dev/) editor.\n\nThe **Markdown Mode** supports all syntax of [CommonMark](https://commonmark.org/help/) with two exceptions:\n\n * Support of strikethrough syntax (`~~TextToStrike~~`)\n * Support of task list syntax (`- [x] MyToDoTask`)\n * No support of image syntax. __Images are not allowed!__",
"overview": "The **Preview Mode** supports following actions:\n\n| Actions ||||\n|---|\n| Link | Blockquotes | Unordered list / Bullet list | Headline 1 |\n| Italic | Strikethrough | Ordered list / Numbered list | Headline 2 |\n| Bold | Inline code | Task list |\n\nAdditionally, there are a lot of predefined\n[keyboard shortcuts](https://tiptap.dev/api/keyboard-shortcuts#predefined-keyboard-shortcuts)\nprovided by the underlying [tiptap](https://tiptap.dev/) editor.\n\nThe **Markdown Mode** supports all syntax of [CommonMark](https://commonmark.org/help/) with two exceptions:\n\n * Support of strikethrough syntax (`~~TextToStrike~~`)\n * Support of task list syntax (`- [x] MyToDoTask`)\n * No support of image syntax. __Images are not allowed!__\n\n### Font Size Scaling\n\nThe font sizes within the Markdown Editor are scaled based on the CSS variable `--ino-markdown-editor-font-size`. This variable sets the base font size, and other font sizes are scaled accordingly.\n\n#### Base Font Size Variable\n`--ino-markdown-editor-font-size`: Sets the base font size for all text elements. Default is `16px`.\n\n#### Scaling Factors\n\n| Element | Scaling Factor | Calculated Size (Example) |\n|---------|----------------|---------------------------|\n| Base Font Size | 1x | Base size (e.g., 16px) |\n| Header 1 (h1) | 2x | Double the base size (e.g., 32px) |\n| Header 2 (h2) | 1.75x | 1.75 times the base size (e.g., 28px) |",
"usage": {},
"docs": "The **Preview Mode** supports following actions:\n\n| Actions ||||\n|---|\n| Link | Blockquotes | Unordered list / Bullet list | Headline 1 |\n| Italic | Strikethrough | Ordered list / Numbered list | Headline 2 |\n| Bold | Inline code | Task list |\n\nAdditionally, there are a lot of predefined\n[keyboard shortcuts](https://tiptap.dev/api/keyboard-shortcuts#predefined-keyboard-shortcuts)\nprovided by the underlying [tiptap](https://tiptap.dev/) editor.\n\nThe **Markdown Mode** supports all syntax of [CommonMark](https://commonmark.org/help/) with two exceptions:\n\n * Support of strikethrough syntax (`~~TextToStrike~~`)\n * Support of task list syntax (`- [x] MyToDoTask`)\n * No support of image syntax. __Images are not allowed!__",
"docs": "The **Preview Mode** supports following actions:\n\n| Actions ||||\n|---|\n| Link | Blockquotes | Unordered list / Bullet list | Headline 1 |\n| Italic | Strikethrough | Ordered list / Numbered list | Headline 2 |\n| Bold | Inline code | Task list |\n\nAdditionally, there are a lot of predefined\n[keyboard shortcuts](https://tiptap.dev/api/keyboard-shortcuts#predefined-keyboard-shortcuts)\nprovided by the underlying [tiptap](https://tiptap.dev/) editor.\n\nThe **Markdown Mode** supports all syntax of [CommonMark](https://commonmark.org/help/) with two exceptions:\n\n * Support of strikethrough syntax (`~~TextToStrike~~`)\n * Support of task list syntax (`- [x] MyToDoTask`)\n * No support of image syntax. __Images are not allowed!__\n\n### Font Size Scaling\n\nThe font sizes within the Markdown Editor are scaled based on the CSS variable `--ino-markdown-editor-font-size`. This variable sets the base font size, and other font sizes are scaled accordingly.\n\n#### Base Font Size Variable\n`--ino-markdown-editor-font-size`: Sets the base font size for all text elements. Default is `16px`.\n\n#### Scaling Factors\n\n| Element | Scaling Factor | Calculated Size (Example) |\n|---------|----------------|---------------------------|\n| Base Font Size | 1x | Base size (e.g., 16px) |\n| Header 1 (h1) | 2x | Double the base size (e.g., 32px) |\n| Header 2 (h2) | 1.75x | 1.75 times the base size (e.g., 28px) |",
"docsTags": [],
"encapsulation": "none",
"dependents": [],
Expand Down Expand Up @@ -6401,6 +6401,11 @@
}
],
"styles": [
{
"name": "--ino-markdown-editor-font-size",
"annotation": "prop",
"docs": "Base font size for all text elements, which scales other font sizes accordingly. Default value is `16px`."
},
{
"name": "--ino-markdown-editor-max-height",
"annotation": "prop",
Expand Down