@exmg/exm-markdown-editor 1.1.11 → 1.1.12

package/dist/exm-markdown-editor-base.d.ts

@@ -48,9 +48,9 @@ export declare class MarkdownEditorElementBase extends MarkdownBaseClass {
     toolbarIcons?: ToolbarIcons;
     markedExtension?: TokenizerAndRendererExtension[];
     required: boolean;
+    supportingText: string;
     editorElement?: HTMLDivElement;
     previewElement?: Element | null;
-    height: number;
     preview: boolean;
     editorConfiguration: EditorConfiguration;
     editorActions: MarkdownActions;

package/dist/exm-markdown-editor-base.js

@@ -1,6 +1,5 @@
 import { __decorate } from "tslib";
 import { html, nothing } from 'lit';
-import { styleMap } from 'lit/directives/style-map.js';
 import { query, property, state } from 'lit/decorators.js';
 import { defaultConfiguration } from './utils/configurations.js';
 import { ExmgElement, observer } from '@exmg/lit-base';
@@ -12,6 +11,7 @@ import { toolbarIcons } from './icons.js';
 import { MardownEditorValidator } from './validator/exm-markdown-editor-validator.js';
 import { createValidator, getValidityAnchor, mixinConstraintValidation, } from '@material/web/labs/behaviors/constraint-validation.js';
 import './exm-markdown-editor-toolbar.js';
+import { classMap } from 'lit/directives/class-map.js';
 const MarkdownBaseClass = mixinConstraintValidation(mixinFormAssociated(mixinElementInternals(ExmgElement)));
 /**
  * Markdown editor element.
@@ -53,7 +53,7 @@ export class MarkdownEditorElementBase extends MarkdownBaseClass {
         this.toolbarActions = toolbarActions;
         this.toolbarIcons = toolbarIcons;
         this.required = false;
-        this.height = 400;
+        this.supportingText = '';
         this.preview = true;
         this.editorConfiguration = defaultConfiguration;
         this.editorActions = markdownActions;
@@ -94,10 +94,7 @@ export class MarkdownEditorElementBase extends MarkdownBaseClass {
         /* Height */
         if (this.previewElement.hasAttribute('slot')) {
             (_a = this.shadowRoot.querySelector('#preview')) === null || _a === void 0 ? void 0 : _a.remove();
-            this.previewElement.setAttribute('style', `height: ${this.height}px;`);
         }
-        this.heightStyleMap = styleMap({ height: `${this.height}px` });
-        this.codeMirrorEditor.getWrapperElement().style.height = `${this.height}px`;
         /** Blur global handling */
         this.blurHandlerBinding = this.handleBlur.bind(this);
         this.addEventListener('blur', this.handleBlur);
@@ -180,29 +177,25 @@ export class MarkdownEditorElementBase extends MarkdownBaseClass {
         this.preview = false;
     }
     render() {
+        const containerClasses = { 'has-label': !!this.label, 'preview-mode': this.preview };
+        const labelClasses = { 'not-empty': !!this.value, 'preview-mode': this.preview };
         return html `
-      <div
-        id="markdowdEditorContainer"
-        class="container"
-        @click=${this.disablePreview}
-        style=${this.heightStyleMap}
-        ?label=${this.label}
-        ?preview=${this.preview}
-      >
+      <div id="markdownEditorContainer" class="container ${classMap(containerClasses)}" @click=${this.disablePreview}>
+        <div class="background"></div>
+        <div class="state-layer"></div>
         ${this.label
-            ? html `<label ?preview=${this.preview} for="markdowdEditorContainer">${this.label}</label>`
+            ? html `<label class="${classMap(labelClasses)}" for="markdownEditorContainer">${this.label}</label>`
             : nothing}
         <exm-markdown-editor-toolbar
-          ?label=${this.label}
-          ?preview=${this.preview}
           ?upload=${this.upload}
           @action=${this.handleAction}
           .actions=${this.toolbarActions || []}
           .icons=${this.toolbarIcons || []}
         ></exm-markdown-editor-toolbar>
-        <div id="editor" ?preview=${this.preview} style=${this.heightStyleMap}></div>
-        <div id="preview" ?preview=${this.preview} style=${this.heightStyleMap}></div>
-        <slot name="preview" ?preview=${this.preview}></slot>
+        <div id="editor" class="editor"></div>
+        <div id="preview"></div>
+        <slot name="preview"></slot>
+        ${this.supportingText ? html `<div class="supporting-text">${this.supportingText}</div>` : nothing}
       </div>
     `;
     }
@@ -231,15 +224,15 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], MarkdownEditorElementBase.prototype, "required", void 0);
+__decorate([
+    property({ type: String, attribute: 'supporting-text' })
+], MarkdownEditorElementBase.prototype, "supportingText", void 0);
 __decorate([
     query('#editor')
 ], MarkdownEditorElementBase.prototype, "editorElement", void 0);
 __decorate([
     state()
 ], MarkdownEditorElementBase.prototype, "previewElement", void 0);
-__decorate([
-    property({ type: Number })
-], MarkdownEditorElementBase.prototype, "height", void 0);
 __decorate([
     state(),
     observer(function (preview) {

package/dist/styles/exm-markdown-editor-css.js

@@ -5,18 +5,18 @@ export const style = css `
     overflow: hidden;
     --editor-border-color: var(--exm-markdown-editor-border-color, var(--md-sys-color-on-surface-variant));
     --editor-border-color-focus: var(--exm-markdown-editor-border-color-focus, var(--md-sys-color-primary));
-    --editor-background-color: var(--exm-markdown-editor-background-color, var(--md-sys-color-surface-container-high));
+    --editor-background-color: var(
+      --exm-markdown-editor-background-color,
+      var(--md-sys-color-surface-container-highest)
+    );
     --editor-code-background-color: var(
       --exm-markdown-editor-code-background-color,
-      var(--md-sys-color-surface-container-high)
-    );
-    --editor-background-focus-color: var(
-      --exm-markdown-editor-background-focus-color,
-      var(--md-sys-color-surface-container-high)
+      var(--md-sys-color-surface-container-highest)
     );
+    --editor-background-focus-color: var(--exm-markdown-editor-background-focus-color, var(--md-sys-color-on-surface));
     --editor-code-background-focus-color: var(
       --exm-markdown-editor-code-background-focus-color,
-      var(--md-sys-color-surface-container-highest)
+      var(--md-sys-color-on-surface)
     );
     --editor-label-focus-color: var(--exm-markdown-editor-label-focus-color, var(--md-sys-color-primary));
     --editor-label-color: var(--exm-markdown-editor-label-color, var(--md-sys-color-on-surface));
@@ -26,52 +26,60 @@ export const style = css `
     display: grid;
     position: relative;
     grid-template-columns: 100%;
-    grid-template-rows: 0px 56px 1fr;
+    grid-template-rows: 0px 56px 1fr auto;
     transition: grid-template-rows 0.2s ease;
     border-top-right-radius: 4px;
-    background-color: var(--editor-code-background-color, var(--md-sys-color-surface-container-high));
     border-top-left-radius: 4px;
+    overflow: hidden;
+    height: 100%;
   }
 
-  .container[label] {
+  .container.has-label {
     grid-template-rows: 2rem 56px 1fr;
   }
 
-  .container:hover {
-    background-color: var(--editor-code-background-focus-color, var(--md-sys-color-surface-container-highest));
+  .background,
+  .state-layer {
+    grid-area: 1/1/4/2;
+  }
+
+  .background {
+    background-color: var(--editor-code-background-color, var(--md-sys-color-surface-container-highest));
+    border-bottom: 1px solid var(--editor-border-color-focus, var(--md-sys-color-primary));
   }
 
-  .container::after {
+  .container:hover .state-layer {
+    background-color: var(--editor-code-background-focus-color, var(--md-sys-color-on-surface-variant));
+    opacity: 0.08;
+  }
+
+  .background::after {
     content: ' ';
     display: block;
     position: absolute;
     bottom: 0;
     width: 100%;
     height: 3px;
-    background: var(--editor-border-color-focus, var(--md-sys-color-primary));
   }
 
-  .container[preview] {
-    background-color: var(--editor-background-color, var(--md-sys-color-surface-container-high));
-    grid-template-rows: 0px 0.3rem 1fr;
+  .container.preview-mode {
+    grid-template-rows: 0px 0.3rem 1fr auto;
   }
 
-  .container[preview][label] {
-    grid-template-rows: 2rem 0.3rem 1fr;
+  .container.preview-mode.has-label {
+    grid-template-rows: 2rem 0.3rem 1fr auto;
   }
 
-  .container[preview]:hover {
-    background-color: var(--editor-code-background-focus-color, var(--md-sys-color-surface-container-highest));
+  .container.preview-mode:hover .state-layer {
     cursor: text;
   }
 
-  .container[preview]::after {
-    height: 1px;
-    background: var(--editor-border-color, var(--md-sys-color-on-surface-variant));
+  label {
+    grid-area: 1/1/2/2;
   }
 
-  label[for='markdowdEditorContainer'] {
-    grid-row-start: 1;
+  label[for='markdownEditorContainer'],
+  label[for='markdownEditorContainer'].not-empty.preview-mode {
     padding: 0.5rem 0 0 1rem;
     font-size: 0.7rem;
     color: var(--editor-label-focus-color, var(--md-sys-color-primary));
@@ -79,7 +87,11 @@ export const style = css `
     transform: scale(1) translateY(0px);
   }
 
-  label[for='markdowdEditorContainer'][preview] {
+  label[for='markdownEditorContainer'].not-empty.preview-mode {
+    color: var(--editor-label-color, var(--md-sys-color-on-surface));
+  }
+
+  label[for='markdownEditorContainer'].preview-mode {
     color: var(--editor-label-color, var(--md-sys-color-on-surface));
     padding-bottom: 1rem;
     transform: translateY(8px);
@@ -87,7 +99,7 @@ export const style = css `
   }
 
   exm-markdown-editor-toolbar {
-    grid-row-start: 1;
+    grid-area: 2/1/3/2;
     visibility: visible;
     transition:
       visibility 0s,
@@ -95,40 +107,73 @@ export const style = css `
     opacity: 1;
   }
 
-  exm-markdown-editor-toolbar[preview] {
+  .container.preview-mode exm-markdown-editor-toolbar {
     visibility: hidden;
     opacity: 0;
   }
 
-  exm-markdown-editor-toolbar[label] {
-    grid-row-start: 2;
+  .supporting-text {
+    grid-area: 4/1/5/2;
+
+    color: var(--md-filled-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));
+    display: flex;
+    font-family: var(
+      --md-filled-field-supporting-text-font,
+      var(--md-sys-typescale-body-small-font, var(--md-ref-typeface-plain, Roboto))
+    );
+    font-size: var(--md-filled-field-supporting-text-size, var(--md-sys-typescale-body-small-size, 0.75rem));
+    line-height: var(
+      --md-filled-field-supporting-text-line-height,
+      var(--md-sys-typescale-body-small-line-height, 1rem)
+    );
+    font-weight: var(
+      --md-filled-field-supporting-text-weight,
+      var(--md-sys-typescale-body-small-weight, var(--md-ref-typeface-weight-regular, 400))
+    );
+    gap: 16px;
+    justify-content: space-between;
+    padding-inline-start: var(--md-filled-field-supporting-text-leading-space, 16px);
+    padding-inline-end: var(--md-filled-field-supporting-text-trailing-space, 16px);
+    padding-top: var(--md-filled-field-supporting-text-top-space, 4px);
   }
 
   #preview {
+    grid-area: 3/1/4/2;
     display: none;
-    grid-row-start: 3;
+    position: relative;
     overflow: scroll;
   }
 
-  #preview[preview] {
-    display: block;
+  .preview-content {
+    height: 100%;
+    overflow: scroll;
   }
 
-  #editor {
+  .container.preview-mode #preview {
     display: block;
-    grid-row-start: 3;
   }
 
-  #editor[preview] {
+  .editor {
+    grid-area: 3/1/4/2;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .container.preview-mode .editor {
     display: none;
   }
 
+  .CodeMirror {
+    height: 100%;
+    overflow: scroll;
+  }
+
   slot[name='preview'] {
     display: none;
     grid-row-start: 3;
   }
 
-  slot[name='preview'][preview] {
+  .container.preview-mode slot[name='preview'] {
     display: block;
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exmg/exm-markdown-editor",
-  "version": "1.1.11",
+  "version": "1.1.12",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -52,5 +52,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5a615cfa5fb07dd11e3dff848b429b9c3a0a4313"
+  "gitHead": "1478e41cdcc8b109995cf78f8ccfadd7699c22aa"
 }