@exmg/exm-markdown-editor 1.1.8 → 1.1.10-alpha.35

package/dist/actions.js

@@ -9,15 +9,15 @@ export const toolbarActions = [
     },
     {
         name: 'header_one',
-        icon: 'headerone',
+        icon: 'format_h1',
     },
     {
         name: 'header_two',
-        icon: 'headertwo',
+        icon: 'format_h2',
     },
     {
         name: 'header_three',
-        icon: 'headerthree',
+        icon: 'format_h3',
     },
     {
         name: 'unordered_list',
@@ -57,7 +57,7 @@ export const toolbarActions = [
     },
     {
         name: 'hr',
-        icon: 'hr',
+        icon: 'horizontal_rule',
     },
     {
         name: 'table',

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

@@ -48,9 +48,14 @@ export declare class MarkdownEditorElementBase extends MarkdownBaseClass {
     toolbarIcons?: ToolbarIcons;
     markedExtension?: TokenizerAndRendererExtension[];
     required: boolean;
+    disabled: boolean;
+    supportingText: string;
+    splitView: boolean;
+    fullScreen: boolean;
     editorElement?: HTMLDivElement;
+    editorContainerElement?: HTMLDivElement;
     previewElement?: Element | null;
-    height: number;
+    isFullScreen?: boolean;
     preview: boolean;
     editorConfiguration: EditorConfiguration;
     editorActions: MarkdownActions;
@@ -69,13 +74,16 @@ export declare class MarkdownEditorElementBase extends MarkdownBaseClass {
     protected firstUpdated(): void;
     protected disconectedCallback(): void;
     protected getPreviewElement(): Element | null;
+    private handleEditorScroll;
+    private toggleFullscreen;
+    private handleExitFullScreen;
     codeMirrorSetup(): void;
     handleFocus(): void;
     handleBlur(): void;
     handleAction(e: CustomEvent): void;
     handleInsertImage(url: string): void;
     updateValue(newValue?: string): void;
-    disablePreview(): void;
+    private handleContainerClick;
     protected render(): import("lit-html").TemplateResult<1>;
 }
 export {};

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,11 @@ export class MarkdownEditorElementBase extends MarkdownBaseClass {
         this.toolbarActions = toolbarActions;
         this.toolbarIcons = toolbarIcons;
         this.required = false;
-        this.height = 400;
+        this.disabled = false;
+        this.supportingText = '';
+        this.splitView = false;
+        this.fullScreen = false;
+        this.isFullScreen = false;
         this.preview = true;
         this.editorConfiguration = defaultConfiguration;
         this.editorActions = markdownActions;
@@ -89,15 +93,14 @@ export class MarkdownEditorElementBase extends MarkdownBaseClass {
     }
     firstUpdated() {
         var _a;
-        this.codeMirrorSetup();
+        if (!this.disabled) {
+            this.codeMirrorSetup();
+        }
         this.previewElement = this.getPreviewElement();
         /* 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);
@@ -116,6 +119,49 @@ export class MarkdownEditorElementBase extends MarkdownBaseClass {
     getPreviewElement() {
         return this.shadowRoot.querySelector('#preview');
     }
+    // CodeMirror types is not handling the scroll event type correct
+    handleEditorScroll(event) {
+        const previewContainer = this.renderRoot.querySelector('.preview');
+        const previewArea = this.renderRoot.querySelector('.preview-content');
+        if (!previewArea || !previewContainer || (!this.splitView && !this.isFullScreen)) {
+            return;
+        }
+        // DOMRectList of CodeMirrors scroll area
+        const scroller = event.display.scroller.getClientRects()[0];
+        // DOMRectList of CodeMirrors editor/content area
+        const sizer = event.display.sizer.getClientRects()[0];
+        // DOMRectList of previewArea
+        const preview = previewArea.getClientRects()[0];
+        // Get the total distance scroller in the editor
+        const scrolledDistance = scroller.y - sizer.y;
+        // Get the maximal scroll distance for the editor
+        const maxEditorScrollDistance = sizer.height - scroller.height;
+        // Get the maximal scroll distance for the preview
+        const maxPreviewScrollDistance = preview.height - scroller.height;
+        // Calculate the scroll progress bases on the above values
+        const scrollProgress = Math.min(scrolledDistance / maxEditorScrollDistance, 1);
+        previewContainer.scrollTo({
+            top: maxPreviewScrollDistance * scrollProgress,
+        });
+    }
+    toggleFullscreen() {
+        if (!this.editorContainerElement) {
+            return;
+        }
+        this.isFullScreen = !this.isFullScreen;
+        if (!document.fullscreenElement) {
+            this.editorContainerElement.requestFullscreen();
+            document.addEventListener('fullscreenchange', this.handleExitFullScreen.bind(this));
+        }
+        else {
+            document.exitFullscreen();
+        }
+    }
+    handleExitFullScreen() {
+        if (!document.fullscreenElement) {
+            this.isFullScreen = false;
+        }
+    }
     codeMirrorSetup() {
         if (!this.editorElement) {
             console.log('Error');
@@ -129,12 +175,13 @@ export class MarkdownEditorElementBase extends MarkdownBaseClass {
             ...this.editorConfiguration,
             value: this.value || '',
         });
-        this.codeMirrorEditor.on('focus', (_editor) => {
+        this.codeMirrorEditor.on('focus', (_) => {
             this.handleFocus();
         });
         this.codeMirrorEditor.on('change', (editor) => {
             this.updateValue(editor.getValue());
         });
+        this.codeMirrorEditor.on('scroll', this.handleEditorScroll.bind(this));
         this.internalTextarea = this.codeMirrorEditor.getInputField();
     }
     handleFocus() {
@@ -176,33 +223,53 @@ export class MarkdownEditorElementBase extends MarkdownBaseClass {
         this.value = newValue || '';
         this.fire('change', this.value);
     }
-    disablePreview() {
-        this.preview = false;
+    handleContainerClick() {
+        if (!this.disabled) {
+            this.preview = false;
+        }
     }
     render() {
+        const containerClasses = {
+            'has-label': !!this.label,
+            'preview-mode': this.preview,
+            'split-view': (this.splitView || !!this.isFullScreen) && !this.disabled,
+            'full-screen': this.fullScreen,
+        };
+        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}
+        id="markdownEditorContainer"
+        class="container ${classMap(containerClasses)}"
+        @click=${this.handleContainerClick}
       >
+        <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>
+        <section class="label-bar">
+          <span>Editor</span>
+          <span>Preview</span>
+        </section>
+        <div class="editor" id="editor" @scroll=${(evt) => console.log(evt)}></div>
+        <div id="preview" class="preview"></div>
+        ${this.fullScreen
+            ? html `
+              <section class="full-screen-button">
+                <md-icon-button @click=${this.toggleFullscreen} title="Toggle for a full screen editor mode"
+                  ><md-icon>${this.isFullScreen ? 'fullscreen_exit' : 'fullscreen'}</md-icon></md-icon-button
+                >
+              </section>
+            `
+            : nothing}
+        <slot name="preview"></slot>
+        ${this.supportingText ? html `<div class="supporting-text">${this.supportingText}</div>` : nothing}
       </div>
     `;
     }
@@ -231,15 +298,30 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], MarkdownEditorElementBase.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MarkdownEditorElementBase.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String, attribute: 'supporting-text' })
+], MarkdownEditorElementBase.prototype, "supportingText", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'split-view' })
+], MarkdownEditorElementBase.prototype, "splitView", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'full-screen' })
+], MarkdownEditorElementBase.prototype, "fullScreen", void 0);
 __decorate([
     query('#editor')
 ], MarkdownEditorElementBase.prototype, "editorElement", void 0);
+__decorate([
+    query('#markdownEditorContainer')
+], MarkdownEditorElementBase.prototype, "editorContainerElement", void 0);
 __decorate([
     state()
 ], MarkdownEditorElementBase.prototype, "previewElement", void 0);
 __decorate([
-    property({ type: Number })
-], MarkdownEditorElementBase.prototype, "height", void 0);
+    state()
+], MarkdownEditorElementBase.prototype, "isFullScreen", void 0);
 __decorate([
     state(),
     observer(function (preview) {

package/dist/icons.d.ts

@@ -1,6 +1,3 @@
 export declare const toolbarIcons: {
-    headerone: import("lit-html").TemplateResult<1>;
-    headertwo: import("lit-html").TemplateResult<1>;
-    headerthree: import("lit-html").TemplateResult<1>;
-    hr: import("lit-html").TemplateResult<1>;
+    example_icon: import("lit-html").TemplateResult<1>;
 };

package/dist/icons.js

@@ -1,28 +1,5 @@
 import { html } from 'lit';
 export const toolbarIcons = {
-    headerone: html `<svg>
-    <g id="header-one">
-      <path
-        d="M11.5 13H5v5a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 3 0v5h6.5V5a1.5 1.5 0 0 1 3 0v13a1.5 1.5 0 0 1-3 0v-5zm8.5 6h-1.2v-6.535l-1.8.627v-1.046L19.82 11H20v8z"
-      />
-    </g>
-  </svg>`,
-    headertwo: html `<svg>
-    <g id="header-two">
-      <path
-        d="M11.5 13H5v5a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 3 0v5h6.5V5a1.5 1.5 0 0 1 3 0v13a1.5 1.5 0 0 1-3 0v-5zm7.142 4.948H22V19h-4.87v-.917l2.353-2.8c.203-.234.367-.45.497-.634a3.77 3.77 0 0 0 .316-.51c.079-.154.13-.296.163-.431a1.762 1.762 0 0 0-.028-.898 1.244 1.244 0 0 0-.209-.4.967.967 0 0 0-.333-.265 1.057 1.057 0 0 0-.457-.093c-.203 0-.39.037-.541.111a1.074 1.074 0 0 0-.384.302c-.096.129-.175.283-.226.461a2.298 2.298 0 0 0-.073.536H17c.006-.327.056-.634.158-.924.107-.307.265-.572.474-.8a2.14 2.14 0 0 1 .768-.541A2.66 2.66 0 0 1 19.444 11c.36 0 .682.05.97.148.277.104.52.246.711.437.192.184.339.412.44.683.102.27.153.572.153.898 0 .24-.034.486-.107.726-.074.24-.175.48-.305.72s-.282.48-.463.72c-.18.24-.372.486-.587.726l-1.614 1.89z"
-      />
-    </g>
-  </svg>`,
-    headerthree: html `<svg>
-    <g id="header-three">
-      <path
-        d="M11.5 13H5v5a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 3 0v5h6.5V5a1.5 1.5 0 0 1 3 0v13a1.5 1.5 0 0 1-3 0v-5zm9.815 2.217c.165.125.292.269.393.427.102.164.171.335.222.499.045.184.07.374.07.565 0 .361-.063.69-.19.972a1.997 1.997 0 0 1-.533.722 2.185 2.185 0 0 1-.8.447c-.31.098-.64.151-1.002.151-.33 0-.641-.046-.94-.138a2.334 2.334 0 0 1-.786-.414 1.982 1.982 0 0 1-.546-.69 2.158 2.158 0 0 1-.203-.952h1.263c0 .171.031.329.089.473.057.145.14.263.247.368.108.105.235.184.387.236a1.4 1.4 0 0 0 .508.086c.387 0 .698-.105.92-.322.222-.217.336-.525.336-.933a1.55 1.55 0 0 0-.102-.571 1 1 0 0 0-.279-.4 1.174 1.174 0 0 0-.438-.23 2.212 2.212 0 0 0-.577-.073h-.749V14.41h.743c.215 0 .406-.026.564-.086.16-.059.292-.137.4-.243a.966.966 0 0 0 .241-.374c.051-.144.076-.309.076-.486 0-.374-.088-.663-.279-.867-.19-.204-.476-.309-.863-.309-.171 0-.323.027-.463.08-.14.052-.26.124-.368.216a.998.998 0 0 0-.241.341 1.127 1.127 0 0 0-.089.454H17.07c0-.302.057-.591.184-.848.114-.262.285-.486.495-.676.21-.19.463-.342.761-.453.292-.105.616-.158.965-.158.355 0 .685.046.97.131.299.092.552.237.762.42.216.191.38.421.495.697.12.276.177.598.177.959 0 .158-.019.322-.07.48-.044.164-.12.315-.215.466a2.005 2.005 0 0 1-.87.748c.235.086.432.191.59.316z"
-      />
-    </g>
-  </svg>`,
-    hr: html `<svg>
-    <g id="trending-flat"><path d="M22 14h18v-2H3v2z"></path></g>
-  </svg>`,
+    example_icon: html `Some svg here`,
 };
 //# sourceMappingURL=icons.js.map

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

@@ -5,139 +5,206 @@ 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));
   }
 
   .container {
+    --label-height: 0px;
+
     display: grid;
     position: relative;
-    grid-template-columns: 100%;
-    grid-template-rows: 0px 56px 1fr;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: var(--label-height) auto auto 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] {
-    grid-template-rows: 2rem 56px 1fr;
+  .container.has-label {
+    --label-height: 2rem;
   }
 
-  .container: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::after {
-    content: ' ';
+  .container.split-view .preview,
+  .container.preview-mode .preview {
     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:not(.split-view) .editor {
+    display: none;
   }
 
-  .container[preview][label] {
-    grid-template-rows: 2rem 0.3rem 1fr;
+  .container.preview-mode:not(.split-view) exm-markdown-editor-toolbar {
+    display: none;
   }
 
-  .container[preview]:hover {
-    background-color: var(--editor-code-background-focus-color, var(--md-sys-color-surface-container-highest));
-    cursor: text;
+  .container.split-view .preview {
+    grid-area: 4/2/5/3;
+    border-left: 1px solid var(--md-sys-color-surface-variant);
+    background-color: var(--editor-code-background-color, var(--md-sys-color-surface-container-highest));
   }
 
-  .container[preview]::after {
-    height: 1px;
-    background: var(--editor-border-color, var(--md-sys-color-on-surface-variant));
+  .container.split-view .editor {
+    grid-area: 4/1/5/2;
   }
 
-  label[for='markdowdEditorContainer'] {
-    grid-row-start: 1;
-    padding: 0.5rem 0 0 1rem;
-    font-size: 0.7rem;
-    color: var(--editor-label-focus-color, var(--md-sys-color-primary));
-    transition: all 200ms ease;
-    transform: scale(1) translateY(0px);
+  .container.split-view .label-bar {
+    display: grid;
   }
 
-  label[for='markdowdEditorContainer'][preview] {
-    color: var(--editor-label-color, var(--md-sys-color-on-surface));
-    padding-bottom: 1rem;
-    transform: translateY(8px);
-    font-size: 1rem;
+  .preview {
+    grid-area: 2/1/5/3;
+    display: none;
+    position: relative;
+    overflow: scroll;
+  }
+
+  .editor {
+    grid-area: 3/1/5/3;
+    position: relative;
+    overflow: hidden;
+  }
+
+  #editor {
+    overflow: hidden;
   }
 
   exm-markdown-editor-toolbar {
-    grid-row-start: 1;
-    visibility: visible;
-    transition:
-      visibility 0s,
-      opacity 0.5s linear;
-    opacity: 1;
+    grid-area: 2/1/3/3;
   }
 
-  exm-markdown-editor-toolbar[preview] {
-    visibility: hidden;
-    opacity: 0;
+  .container.split-view exm-markdown-editor-toolbar {
+    padding-right: 4rem;
   }
 
-  exm-markdown-editor-toolbar[label] {
-    grid-row-start: 2;
+  .full-screen-button {
+    position: absolute;
+    top: calc(var(--label-height) + 0.5rem);
+    right: 1rem;
   }
 
-  #preview {
+  .container.preview-mode:not(.split-view) .full-screen-button {
     display: none;
-    grid-row-start: 3;
-    overflow: scroll;
   }
 
-  #preview[preview] {
-    display: block;
+  .label-bar {
+    display: none;
+    grid-template-columns: repeat(2, 1fr);
+    grid-area: 3/1/4/3;
+    border-bottom: 1px solid var(--md-sys-color-surface-variant);
+    background-color: var(--md-sys-color-surface-container);
   }
 
-  #editor {
-    display: block;
-    grid-row-start: 3;
+  .label-bar span {
+    padding: 0.5rem 1rem;
   }
 
-  #editor[preview] {
-    display: none;
+  .label-bar span + span {
+    border-left: 1px solid var(--md-sys-color-surface-variant);
   }
 
-  slot[name='preview'] {
-    display: none;
-    grid-row-start: 3;
+  /* Background and state-layer stuff */
+  .background,
+  .state-layer {
+    grid-area: 1/1/5/3;
+  }
+
+  .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:hover .state-layer {
+    background-color: var(--editor-code-background-focus-color, var(--md-sys-color-on-surface-variant));
+    opacity: 0.08;
   }
 
-  slot[name='preview'][preview] {
+  .background::after {
+    content: ' ';
     display: block;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 3px;
+  }
+
+  /* The form label style */
+  label {
+    grid-area: 1/1/2/3;
+  }
+
+  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));
+    transition: all 200ms ease;
+    transform: scale(1) translateY(0px);
+  }
+
+  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);
+    font-size: 1rem;
+  }
+
+  /* Supporting text, also know as Description */
+  .supporting-text {
+    grid-area: 5/1/6/3;
+
+    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);
   }
 
-  ::slotted([slot='preview']) {
+  .CodeMirror {
+    height: 100%;
     overflow: scroll;
   }
 
   .preview-content {
-    padding: 0 1rem;
+    padding: 1rem;
   }
 `;
 //# sourceMappingURL=exm-markdown-editor-css.js.map

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

@@ -2,11 +2,13 @@ import { css } from 'lit';
 export const style = css `
   :host {
     display: block;
+    border-bottom: 1px solid var(--md-sys-color-surface-variant);
   }
 
   .toolbar-container {
     padding: 0.5rem 1rem;
     display: flex;
+    flex-wrap: wrap;
   }
 
   md-icon-button:not(:first) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exmg/exm-markdown-editor",
-  "version": "1.1.8",
+  "version": "1.1.10-alpha.35+671db4b",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -35,15 +35,16 @@
     "**/*.d.ts"
   ],
   "dependencies": {
-    "@exmg/lit-base": "^3.0.0",
+    "codemirror": "^5.54.0",
+    "marked": "^9.0.0"
+  },
+  "peerDependencies": {
+    "@exmg/lit-base": "^3.0.3",
     "@material/web": "^2.2.0",
-    "codemirror": "5.49.2",
-    "lit": "^3.0.0",
-    "marked": "^9.0.0",
+    "lit": "^3.2.1",
     "tslib": "^2.6.2"
   },
   "devDependencies": {
-    "@exmg/lit-cli": "^1.1.13",
     "@types/codemirror": "^0.0.79",
     "@types/marked": "^1.2.2"
   },
@@ -51,5 +52,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e9c6e6e7b81658423344b640be549700e95be7c0"
+  "gitHead": "671db4b2e04ae387cc0eba60fc4419b02036b70b"
 }