feat(elements|ino-markdown-editor): allow custom font-sizes via CSS v…

…ariables (#1182) * refactor: add CSS-Variables to adjust font-sizes * refactor: add dynamic font scaling for base-font-size * docs: add font scaling docu
inovex · Jan 30, 2024 · 30c8b2e · 30c8b2e
1 parent f2661e7
commit 30c8b2e
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 6 deletions.
diff --git a/packages/elements/src/components.d.ts b/packages/elements/src/components.d.ts
@@ -1002,6 +1002,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 {
         /**
@@ -2099,6 +2109,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 {
     }
@@ -3413,6 +3433,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 {
         /**
@@ -4376,6 +4406,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>;
             /**

diff --git a/packages/elements/src/components/ino-markdown-editor/ino-markdown-editor.scss b/packages/elements/src/components/ino-markdown-editor/ino-markdown-editor.scss
@@ -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
@@ -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;

diff --git a/packages/elements/src/components/ino-markdown-editor/ino-markdown-editor.tsx b/packages/elements/src/components/ino-markdown-editor/ino-markdown-editor.tsx
@@ -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',

diff --git a/packages/elements/src/components/ino-markdown-editor/readme.md b/packages/elements/src/components/ino-markdown-editor/readme.md
@@ -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     |
@@ -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

diff --git a/packages/storybook/elements-stencil-docs.json b/packages/storybook/elements-stencil-docs.json
@@ -6279,9 +6279,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": [],
@@ -6433,6 +6433,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",