@exmg/exm-markdown-editor 1.0.0

package/src/styles/exm-markdown-codemirror.scss

@@ -0,0 +1,443 @@
+/* BASICS */
+.CodeMirror {
+  /* Variables to use internaly */
+  --editor-code-color: var(--exm-markdown-editor-code-color, var(--md-sys-color-on-surface));
+  --editor-code-cursor-color: var(--exm-markdown-editor-code-cursor-color, var(--md-sys-color-on-surface));
+  --editor-code-header-color: var(--exm-markdown-editor-code-header-color, #4a8fc0);
+  --editor-code-inline-code-color: var(--exm-markdown-editor-code-inline-code-color, #ea881f);
+  // --editor-code-background-color: var(--exm-markdown-editor-code-background-color, var(--md-sys-color-surface));
+  --editor-code-list-color: var(--exm-markdown-editor-code-list-color, rgb(25, 165, 28));
+  --editor-selected-code-color: var(--exm-markdown-editor-selected-code-color, rgb(140, 140, 140));
+  /* Set height, width, borders, and global font properties here */
+  color: var(--editor-code-color, var(--md-sys-color-on-surface, black));
+  direction: ltr;
+}
+/* PADDING */
+.CodeMirror-lines {
+  padding: 0; /* Vertical padding around content */
+}
+.CodeMirror pre {
+  padding: 0 1rem; /* Horizontal padding of content */
+}
+.CodeMirror-scrollbar-filler,
+.CodeMirror-gutter-filler {
+  background-color: white; /* The little square between H and V scrollbars */
+}
+/* GUTTER */
+.CodeMirror-gutters {
+  border-right: 1px solid #ddd;
+  background-color: #f7f7f7;
+  white-space: nowrap;
+}
+.CodeMirror-linenumber {
+  padding: 0 3px 0 5px;
+  min-width: 20px;
+  text-align: right;
+  color: #999;
+  white-space: nowrap;
+}
+.CodeMirror-guttermarker {
+  color: black;
+}
+.CodeMirror-guttermarker-subtle {
+  color: #999;
+}
+/* CURSOR */
+.CodeMirror-cursor {
+  border-left: 1px solid var(--editor-code-cursor-color, var(--md-sys-color-on-surface, black));
+}
+/* Shown when moving in bi-directional text */
+.CodeMirror div.CodeMirror-secondarycursor {
+  border-left: 1px solid silver;
+}
+.cm-fat-cursor .CodeMirror-cursor {
+  width: auto;
+  border: 0 !important;
+  background: #7e7;
+}
+.cm-fat-cursor div.CodeMirror-cursors {
+  z-index: 1;
+}
+.cm-fat-cursor-mark {
+  background-color: rgba(20, 255, 20, 0.5);
+  -webkit-animation: blink 1.06s steps(1) infinite;
+  -moz-animation: blink 1.06s steps(1) infinite;
+  animation: blink 1.06s steps(1) infinite;
+}
+.cm-animate-fat-cursor {
+  width: auto;
+  border: 0;
+  -webkit-animation: blink 1.06s steps(1) infinite;
+  -moz-animation: blink 1.06s steps(1) infinite;
+  animation: blink 1.06s steps(1) infinite;
+  background-color: #7e7;
+}
+@-moz-keyframes blink {
+  0% {
+  }
+  50% {
+    background-color: transparent;
+  }
+  100% {
+  }
+}
+@-webkit-keyframes blink {
+  0% {
+  }
+  50% {
+    background-color: transparent;
+  }
+  100% {
+  }
+}
+@keyframes blink {
+  0% {
+  }
+  50% {
+    background-color: transparent;
+  }
+  100% {
+  }
+}
+/* Can style cursor different in overwrite (non-insert) mode */
+.CodeMirror-overwrite .CodeMirror-cursor {
+}
+.cm-tab {
+  display: inline-block;
+  text-decoration: inherit;
+}
+.CodeMirror-rulers {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: -50px;
+  bottom: -20px;
+  overflow: hidden;
+}
+.CodeMirror-ruler {
+  border-left: 1px solid #ccc;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+}
+/* DEFAULT THEME */
+.cm-s-default .cm-header {
+  color: var(--editor-code-header-color);
+}
+.cm-s-default .cm-quote {
+  color: var(--editor-code-quote-color);
+}
+.cm-negative {
+  color: #d44;
+}
+.cm-positive {
+  color: #292;
+}
+.cm-header,
+.cm-strong {
+  font-weight: bold;
+}
+.cm-em {
+  font-style: italic;
+}
+.cm-link {
+  text-decoration: underline;
+}
+.cm-strikethrough {
+  text-decoration: line-through;
+}
+.cm-s-default .cm-keyword {
+  color: #708;
+}
+.cm-s-default .cm-atom {
+  color: #219;
+}
+.cm-s-default .cm-number {
+  color: var(--editor-code-list-color);
+}
+.cm-s-default .cm-def {
+  color: #00f;
+}
+.cm-s-default .cm-variable,
+.cm-s-default .cm-punctuation,
+.cm-s-default .cm-property,
+.cm-s-default .cm-operator {
+}
+.cm-s-default .cm-variable-2 {
+  color: var(--editor-code-list-color);
+}
+.cm-s-default .cm-variable-3,
+.cm-s-default .cm-type {
+  color: var(--editor-code-list-color);
+}
+.cm-s-default .cm-comment {
+  color: #a50;
+}
+.cm-s-default .cm-string {
+  color: #a11;
+}
+.cm-s-default .cm-string-2 {
+  color: var(--editor-code-inline-code-color, #f50);
+}
+.cm-s-default .cm-meta {
+  color: #555;
+}
+.cm-s-default .cm-qualifier {
+  color: #555;
+}
+.cm-s-default .cm-builtin {
+  color: #30a;
+}
+.cm-s-default .cm-bracket {
+  color: #997;
+}
+.cm-s-default .cm-tag {
+  color: #170;
+}
+.cm-s-default .cm-attribute {
+  color: #00c;
+}
+.cm-s-default .cm-hr {
+  color: #999;
+}
+.cm-s-default .cm-link {
+  color: #00c;
+}
+.cm-s-default .cm-error {
+  color: #f00;
+}
+.cm-invalidchar {
+  color: #f00;
+}
+.CodeMirror-composing {
+  border-bottom: 2px solid;
+}
+/* Default styles for common addons */
+div.CodeMirror span.CodeMirror-matchingbracket {
+  color: #0b0;
+}
+div.CodeMirror span.CodeMirror-nonmatchingbracket {
+  color: #a22;
+}
+.CodeMirror-matchingtag {
+  background: rgba(255, 150, 0, 0.3);
+}
+.CodeMirror-activeline-background {
+  background: #e8f2ff;
+}
+/* STOP */
+/* The rest of this file contains styles related to the mechanics of
+    the editor. You probably shouldn't touch them. */
+.CodeMirror {
+  position: relative;
+  overflow: hidden;
+}
+.CodeMirror-scroll {
+  overflow: scroll !important; /* Things will break if this is overridden */
+  /* 30px is the magic margin used to hide the element's real scrollbars */
+  /* See overflow: hidden in .CodeMirror */
+  margin-bottom: -30px;
+  margin-right: -30px;
+  padding-bottom: 30px;
+  height: 100%;
+  outline: none; /* Prevent dragging from highlighting the element */
+  position: relative;
+  box-sizing: border-box;
+}
+.CodeMirror-sizer {
+  position: relative;
+  border-right: 30px solid transparent;
+}
+/* The fake, visible scrollbars. Used to force redraw during scrolling
+    before actual scrolling happens, thus preventing shaking and
+    flickering artifacts. */
+.CodeMirror-vscrollbar,
+.CodeMirror-hscrollbar,
+.CodeMirror-scrollbar-filler,
+.CodeMirror-gutter-filler {
+  position: absolute;
+  z-index: 6;
+  display: none;
+}
+.CodeMirror-vscrollbar {
+  right: 0;
+  top: 0;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+.CodeMirror-hscrollbar {
+  bottom: 0;
+  left: 0;
+  overflow-y: hidden;
+  overflow-x: scroll;
+}
+.CodeMirror-scrollbar-filler {
+  right: 0;
+  bottom: 0;
+}
+.CodeMirror-gutter-filler {
+  left: 0;
+  bottom: 0;
+}
+.CodeMirror-gutters {
+  position: absolute;
+  left: 0;
+  top: 0;
+  min-height: 100%;
+  z-index: 3;
+}
+.CodeMirror-gutter {
+  white-space: normal;
+  height: 100%;
+  display: inline-block;
+  vertical-align: top;
+  margin-bottom: -30px;
+}
+.CodeMirror-gutter-wrapper {
+  position: absolute;
+  z-index: 4;
+  background: none !important;
+  border: none !important;
+}
+.CodeMirror-gutter-background {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 4;
+}
+.CodeMirror-gutter-elt {
+  position: absolute;
+  cursor: default;
+  z-index: 4;
+}
+.CodeMirror-gutter-wrapper ::selection {
+  background-color: transparent;
+}
+.CodeMirror-gutter-wrapper ::-moz-selection {
+  background-color: transparent;
+}
+.CodeMirror-lines {
+  cursor: text;
+  min-height: 1px; /* prevents collapsing before first draw */
+}
+.CodeMirror pre {
+  /* Reset some styles that the rest of the page might have set */
+  -moz-border-radius: 0;
+  -webkit-border-radius: 0;
+  border-radius: 0;
+  border-width: 0;
+  background: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  margin: 0;
+  white-space: pre;
+  word-wrap: normal;
+  line-height: inherit;
+  color: inherit;
+  z-index: 2;
+  position: relative;
+  overflow: visible;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-font-variant-ligatures: contextual;
+  font-variant-ligatures: contextual;
+}
+.CodeMirror-wrap pre {
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  word-break: normal;
+}
+.CodeMirror-linebackground {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 0;
+}
+.CodeMirror-linewidget {
+  position: relative;
+  z-index: 2;
+  padding: 0.1px; /* Force widget margins to stay inside of the container */
+}
+.CodeMirror-rtl pre {
+  direction: rtl;
+}
+.CodeMirror-code {
+  outline: none;
+}
+/* Force content-box sizing for the elements where we expect it */
+/* .CodeMirror-scroll, */
+.CodeMirror-sizer,
+.CodeMirror-gutter,
+.CodeMirror-gutters,
+.CodeMirror-linenumber {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+.CodeMirror-measure {
+  position: absolute;
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+}
+.CodeMirror-cursor {
+  position: absolute;
+  pointer-events: none;
+}
+.CodeMirror-measure pre {
+  position: static;
+}
+div.CodeMirror-cursors {
+  visibility: hidden;
+  position: relative;
+  z-index: 3;
+}
+div.CodeMirror-dragcursors {
+  visibility: visible;
+}
+.CodeMirror-focused div.CodeMirror-cursors {
+  visibility: visible;
+}
+.CodeMirror-selected {
+  background: #d9d9d9;
+}
+.CodeMirror-focused .CodeMirror-selected {
+  background: var(--editor-selected-code-color);
+}
+.CodeMirror-crosshair {
+  cursor: crosshair;
+}
+.CodeMirror-line::selection,
+.CodeMirror-line > span::selection,
+.CodeMirror-line > span > span::selection {
+  background: #d7d4f0;
+}
+.CodeMirror-line::-moz-selection,
+.CodeMirror-line > span::-moz-selection,
+.CodeMirror-line > span > span::-moz-selection {
+  background: #d7d4f0;
+}
+.cm-searching {
+  background-color: #ffa;
+  background-color: rgba(255, 255, 0, 0.4);
+}
+/* Used to force a border model for a node */
+.cm-force-border {
+  padding-right: 0.1px;
+}
+@media print {
+  /* Hide the cursor when printing */
+  .CodeMirror div.CodeMirror-cursors {
+    visibility: hidden;
+  }
+}
+/* See issue #2901 */
+.cm-tab-wrap-hack:after {
+  content: '';
+}
+/* Help users use markselection to safely style text background */
+span.CodeMirror-selectedtext {
+  background: none;
+}
+

package/src/styles/exm-markdown-editor-css.d.ts

@@ -0,0 +1,2 @@
+export declare const style: import("lit").CSSResult;
+export default style;

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

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+export const style = css `:host{display:block;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-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));--editor-code-background-focus-color: var(--exm-markdown-editor-code-background-focus-color, var(--md-sys-color-surface-container-highest));--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{display:grid;position:relative;grid-template-columns:100%;grid-template-rows:0px 56px 1fr;transition:grid-template-rows .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}.container[label]{grid-template-rows:2rem 56px 1fr}.container:hover{background-color:var(--editor-code-background-focus-color, var(--md-sys-color-surface-container-highest))}.container::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 .3rem 1fr}.container[preview][label]{grid-template-rows:2rem .3rem 1fr}.container[preview]:hover{background-color:var(--editor-code-background-focus-color, var(--md-sys-color-surface-container-highest));cursor:text}.container[preview]::after{height:1px;background:var(--editor-border-color, var(--md-sys-color-on-surface-variant))}label[for=markdowdEditorContainer]{grid-row-start:1;padding:.5rem 0 0 1rem;font-size:.7rem;color:var(--editor-label-focus-color, var(--md-sys-color-primary));transition:all 200ms ease;transform:scale(1) translateY(0px)}label[for=markdowdEditorContainer][preview]{color:var(--editor-label-color, var(--md-sys-color-on-surface));padding-bottom:1rem;transform:translateY(8px);font-size:1rem}exm-markdown-editor-toolbar{grid-row-start:1;visibility:visible;transition:visibility 0s,opacity .5s linear;opacity:1}exm-markdown-editor-toolbar[preview]{visibility:hidden;opacity:0}exm-markdown-editor-toolbar[label]{grid-row-start:2}#preview{display:none;grid-row-start:3;overflow:scroll}#preview[preview]{display:block}#editor{display:block;grid-row-start:3}#editor[preview]{display:none}slot[name=preview]{display:none;grid-row-start:3}slot[name=preview][preview]{display:block}::slotted([slot=preview]){overflow:scroll}.preview-content{padding:0 1rem}`;
+export default style;
+//# sourceMappingURL=exm-markdown-editor-css.js.map

package/src/styles/exm-markdown-editor-toolbar-css.d.ts

@@ -0,0 +1,2 @@
+export declare const style: import("lit").CSSResult;
+export default style;

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

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+export const style = css `:host{display:block}.toolbar-container{padding:.5rem 1rem;display:flex}md-icon-button:not(:first){margin:0 .3rem}md-icon-button:first{margin:0 0}`;
+export default style;
+//# sourceMappingURL=exm-markdown-editor-toolbar-css.js.map

package/src/styles/exm-markdown-editor-toolbar.scss

@@ -0,0 +1,17 @@
+:host {
+  display: block;
+}
+
+
+
+.toolbar-container {
+  padding: 0.5rem 1rem;
+  display: flex;
+}
+
+md-icon-button:not(:first) {
+  margin: 0 .3rem;
+}
+md-icon-button:first {
+  margin: 0 0;
+}

package/src/styles/exm-markdown-editor.scss

@@ -0,0 +1,122 @@
+/* NEW STYLES */ 
+/** Editor **/
+
+:host {
+  display: block;
+  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-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));
+  --editor-code-background-focus-color: var(--exm-markdown-editor-code-background-focus-color, var(--md-sys-color-surface-container-highest));
+  --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 {
+  display: grid;
+  position: relative;
+  grid-template-columns: 100%;
+  grid-template-rows: 0px 56px 1fr;
+  transition: grid-template-rows .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;
+
+  &[label] {
+    grid-template-rows: 2rem 56px 1fr;
+  }
+  &:hover {
+    background-color: var(--editor-code-background-focus-color, var(--md-sys-color-surface-container-highest));
+  }
+  &::after {
+    content: ' ';
+    display: block;
+    position: absolute;
+    bottom:0;
+    width: 100%;
+    height: 3px;
+    background: var(--editor-border-color-focus, var(--md-sys-color-primary));
+  }
+  &[preview] {
+    background-color: var(--editor-background-color, var(--md-sys-color-surface-container-high));
+    grid-template-rows: 0px .3rem 1fr;
+    &[label] {
+      grid-template-rows: 2rem .3rem 1fr;
+    }
+    &:hover {
+      background-color: var(--editor-code-background-focus-color, var(--md-sys-color-surface-container-highest));
+      cursor: text;
+    }
+    &::after {
+      height: 1px;
+      background: var(--editor-border-color, var(--md-sys-color-on-surface-variant));
+    }
+  }
+}
+
+label[for='markdowdEditorContainer'] {
+  grid-row-start: 1;
+  padding: 0.5rem 0 0 1rem;
+  font-size: .7rem;
+  color: var(--editor-label-focus-color, var(--md-sys-color-primary));
+  transition: all 200ms ease;
+  transform: scale(1) translateY(0px);
+  &[preview] {
+    color:  var(--editor-label-color, var(--md-sys-color-on-surface));
+    padding-bottom: 1rem;
+    transform:translateY(8px);
+    font-size: 1rem;
+  }
+}
+
+exm-markdown-editor-toolbar {
+  grid-row-start: 1;
+  visibility: visible;
+  transition: visibility 0s, opacity 0.5s linear;
+  opacity: 1;
+  &[preview] {
+    visibility: hidden;
+    opacity: 0;
+  } 
+  &[label] {
+    grid-row-start:2;
+  }
+}
+
+#preview {
+  display: none;
+  grid-row-start: 3;
+  overflow: scroll;
+  &[preview] {
+    display: block;
+  }
+}
+
+#editor {
+  display: block;
+  grid-row-start: 3;
+  &[preview] {
+    display: none;
+  }
+}
+
+slot[name='preview'] {
+  display: none;
+  grid-row-start: 3;
+  &[preview] {
+    display: block;
+  }
+}
+
+::slotted([slot='preview']) {
+  overflow: scroll;
+}
+
+/* Html rendering CSS */
+
+.preview-content {
+  padding: 0 1rem;
+}

package/src/types.d.ts

@@ -0,0 +1,13 @@
+import { HTMLTemplateResult } from 'lit';
+/** Toolbar Types */
+export type ToolbarItem = {
+    name: string;
+    icon: string;
+};
+export type ToolbarIcons = {
+    [k: string]: HTMLTemplateResult;
+};
+/** Editor Types */
+export type MarkdownActions = {
+    [key: string]: Function;
+};

package/src/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/src/utils/configurations.d.ts

@@ -0,0 +1,4 @@
+import { EditorConfiguration } from 'codemirror';
+import { MarkedOptions } from 'marked';
+export declare const defaultConfiguration: EditorConfiguration;
+export declare const markedConfiguration: MarkedOptions;

package/src/utils/configurations.js

@@ -0,0 +1,14 @@
+export const defaultConfiguration = {
+    mode: 'markdown',
+    tabSize: 2,
+    indentUnit: 2,
+    indentWithTabs: true,
+    lineNumbers: false,
+    autofocus: false,
+    lineWrapping: true,
+};
+export const markedConfiguration = {
+    breaks: false,
+    pedantic: false,
+};
+//# sourceMappingURL=configurations.js.map

package/src/validator/exm-markdown-editor-validator.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Validator } from '@material/web/labs/behaviors/validators/validator.js';
+export interface MarkdownEditorState {
+    /**
+     * Whether the checkbox is required.
+     */
+    readonly required: boolean;
+    readonly value: string;
+    readonly internalElement?: HTMLInputElement;
+}
+export declare class MardownEditorValidator extends Validator<MarkdownEditorState> {
+    private inputElement?;
+    protected computeValidity(state: MarkdownEditorState): {
+        validity: ValidityState;
+        validationMessage: string;
+    };
+    protected equals(prevState: MarkdownEditorState, state: MarkdownEditorState): boolean;
+    protected copy(state: MarkdownEditorState): MarkdownEditorState;
+}

package/src/validator/exm-markdown-editor-validator.js

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Validator } from '@material/web/labs/behaviors/validators/validator.js';
+export class MardownEditorValidator extends Validator {
+    computeValidity(state) {
+        var _a;
+        if (!this.inputElement) {
+            this.inputElement = state.internalElement;
+        }
+        if (!this.inputElement) {
+            // Lazily create the input element if not existing
+            this.inputElement = document.createElement('input');
+            this.inputElement.type = 'text';
+        }
+        // Set values to the input element
+        this.inputElement.value = (_a = state.value) !== null && _a !== void 0 ? _a : '';
+        this.inputElement.required = state.required;
+        return {
+            validity: this.inputElement.validity,
+            validationMessage: this.inputElement.validationMessage,
+        };
+    }
+    equals(prevState, state) {
+        return prevState.value === state.value && prevState.required === state.required;
+    }
+    copy(state) {
+        return {
+            ...state,
+        };
+    }
+}
+//# sourceMappingURL=exm-markdown-editor-validator.js.map