@exmg/exm-markdown-editor 1.1.12 → 1.1.13

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;
+    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

@@ -53,7 +53,11 @@ export class MarkdownEditorElementBase extends MarkdownBaseClass {
         this.toolbarActions = toolbarActions;
         this.toolbarIcons = toolbarIcons;
         this.required = false;
+        this.disabled = false;
         this.supportingText = '';
+        this.splitView = false;
+        this.fullScreen = false;
+        this.isFullScreen = false;
         this.preview = true;
         this.editorConfiguration = defaultConfiguration;
         this.editorActions = markdownActions;
@@ -89,7 +93,9 @@ 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')) {
@@ -113,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');
@@ -126,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() {
@@ -173,14 +223,25 @@ 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 };
+        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="markdownEditorContainer" class="container ${classMap(containerClasses)}" @click=${this.disablePreview}>
+      <div
+        id="markdownEditorContainer"
+        class="container ${classMap(containerClasses)}"
+        @click=${this.handleContainerClick}
+      >
         <div class="background"></div>
         <div class="state-layer"></div>
         ${this.label
@@ -192,8 +253,21 @@ export class MarkdownEditorElementBase extends MarkdownBaseClass {
           .actions=${this.toolbarActions || []}
           .icons=${this.toolbarIcons || []}
         ></exm-markdown-editor-toolbar>
-        <div id="editor" class="editor"></div>
-        <div id="preview"></div>
+        <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>
@@ -224,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([
+    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

@@ -23,10 +23,12 @@ export const style = css `
   }
 
   .container {
+    --label-height: 0px;
+
     display: grid;
     position: relative;
-    grid-template-columns: 100%;
-    grid-template-rows: 0px 56px 1fr auto;
+    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;
     border-top-left-radius: 4px;
@@ -35,12 +37,95 @@ export const style = css `
   }
 
   .container.has-label {
-    grid-template-rows: 2rem 56px 1fr;
+    --label-height: 2rem;
+  }
+
+  .container.preview-mode:hover .state-layer {
+    cursor: text;
+  }
+
+  .container.split-view .preview,
+  .container.preview-mode .preview {
+    display: block;
+  }
+
+  .container.preview-mode:not(.split-view) .editor {
+    display: none;
+  }
+
+  .container.preview-mode:not(.split-view) exm-markdown-editor-toolbar {
+    display: none;
+  }
+
+  .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.split-view .editor {
+    grid-area: 4/1/5/2;
+  }
+
+  .container.split-view .label-bar {
+    display: grid;
+  }
+
+  .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-area: 2/1/3/3;
+  }
+
+  .container.split-view exm-markdown-editor-toolbar {
+    padding-right: 4rem;
+  }
+
+  .full-screen-button {
+    position: absolute;
+    top: calc(var(--label-height) + 0.5rem);
+    right: 1rem;
+  }
+
+  .container.preview-mode:not(.split-view) .full-screen-button {
+    display: none;
+  }
+
+  .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);
+  }
+
+  .label-bar span {
+    padding: 0.5rem 1rem;
   }
 
+  .label-bar span + span {
+    border-left: 1px solid var(--md-sys-color-surface-variant);
+  }
+
+  /* Background and state-layer stuff */
   .background,
   .state-layer {
-    grid-area: 1/1/4/2;
+    grid-area: 1/1/5/3;
   }
 
   .background {
@@ -62,20 +147,9 @@ export const style = css `
     height: 3px;
   }
 
-  .container.preview-mode {
-    grid-template-rows: 0px 0.3rem 1fr auto;
-  }
-
-  .container.preview-mode.has-label {
-    grid-template-rows: 2rem 0.3rem 1fr auto;
-  }
-
-  .container.preview-mode:hover .state-layer {
-    cursor: text;
-  }
-
+  /* The form label style */
   label {
-    grid-area: 1/1/2/2;
+    grid-area: 1/1/2/3;
   }
 
   label[for='markdownEditorContainer'],
@@ -98,22 +172,9 @@ export const style = css `
     font-size: 1rem;
   }
 
-  exm-markdown-editor-toolbar {
-    grid-area: 2/1/3/2;
-    visibility: visible;
-    transition:
-      visibility 0s,
-      opacity 0.5s linear;
-    opacity: 1;
-  }
-
-  .container.preview-mode exm-markdown-editor-toolbar {
-    visibility: hidden;
-    opacity: 0;
-  }
-
+  /* Supporting text, also know as Description */
   .supporting-text {
-    grid-area: 4/1/5/2;
+    grid-area: 5/1/6/3;
 
     color: var(--md-filled-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));
     display: flex;
@@ -137,52 +198,13 @@ export const style = css `
     padding-top: var(--md-filled-field-supporting-text-top-space, 4px);
   }
 
-  #preview {
-    grid-area: 3/1/4/2;
-    display: none;
-    position: relative;
-    overflow: scroll;
-  }
-
-  .preview-content {
-    height: 100%;
-    overflow: scroll;
-  }
-
-  .container.preview-mode #preview {
-    display: block;
-  }
-
-  .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;
-  }
-
-  .container.preview-mode slot[name='preview'] {
-    display: block;
-  }
-
-  ::slotted([slot='preview']) {
-    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.12",
+  "version": "1.1.13",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -52,5 +52,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1478e41cdcc8b109995cf78f8ccfadd7699c22aa"
+  "gitHead": "f482775e785f3e1fe8dde56cf7614428ff9a7e80"
 }