@exmg/exm-markdown-editor 0.0.2-alpha.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Ex Machina
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,25 @@
+
+  # Markdown editor element.
+  ### An out of the box customizable Markdown Editor for Exmachina
+ 
+  ```
+  <exm-markdown-editor markdown="# Header 1"></exm-markdown-editor>
+  ```
+  ## Styling
+ 
+   Custom property | Description | Default
+   ----------------|-------------|----------
+  `--exm-markdown-editor-code-color` | Editor's text color | --md-sys-color-on-surface
+  `--exm-markdown-editor-code-cursor-color` | Editor's cursor color | --md-sys-color-on-surface
+  `--exm-markdown-editor-code-header-color` | H1 color in editor | #4a8fc0;
+  `--exm-markdown-editor-code-inline-code-color` | Inline code color | #ea881f
+  `--exm-markdown-editor-code-list-color` | Lists color | rgb(25, 165, 28)
+  `--exm-markdown-editor-selected-code-color` | Selected text color | rgb(140, 140, 140)
+  `--exm-markdown-editor-border-color` | Editor's border color | --md-sys-color-primary
+  `--exm-markdown-editor-background-color` | Toolbar and default preview background | --md-sys-color-surface-container-high
+  `--exm-markdown-editor-code-background-color` | Editor's background color when focused | --md-sys-color-surface-container-high
+ 
+   ## Events:
+   - change - where detail is current markdown value
+   - insert-image - if the Editor is set to upload, it will trigger this event when the insert-image is clicked
+ 

package/dist/actions.d.ts

@@ -0,0 +1,6 @@
+import { MarkdownActions } from './types.js';
+export declare const toolbarActions: {
+    name: string;
+    icon: string;
+}[];
+export declare const markdownActions: MarkdownActions;

package/dist/actions.js

@@ -0,0 +1,227 @@
+export const toolbarActions = [
+    {
+        name: 'undo',
+        icon: 'undo',
+    },
+    {
+        name: 'redo',
+        icon: 'redo',
+    },
+    {
+        name: 'header_one',
+        icon: 'headerone',
+    },
+    {
+        name: 'header_two',
+        icon: 'headertwo',
+    },
+    {
+        name: 'header_three',
+        icon: 'headerthree',
+    },
+    {
+        name: 'unordered_list',
+        icon: 'format_list_bulleted',
+    },
+    {
+        name: 'ordered_list',
+        icon: 'format_list_numbered',
+    },
+    {
+        name: 'bold',
+        icon: 'format_bold',
+    },
+    {
+        name: 'italic',
+        icon: 'format_italic',
+    },
+    {
+        name: 'strikethrough',
+        icon: 'format_strikethrough',
+    },
+    {
+        name: 'quote',
+        icon: 'format_quote',
+    },
+    {
+        name: 'code',
+        icon: 'data_object',
+    },
+    {
+        name: 'link',
+        icon: 'insert_link',
+    },
+    {
+        name: 'image',
+        icon: 'insert_photo',
+    },
+    {
+        name: 'hr',
+        icon: 'hr',
+    },
+    {
+        name: 'table',
+        icon: 'table_chart',
+    },
+];
+export const markdownActions = {
+    undo: (editor) => {
+        editor.getDoc().undo();
+        editor.focus();
+    },
+    redo: (editor) => {
+        editor.getDoc().redo();
+        editor.focus();
+    },
+    header_one: (editor) => header(editor, '#'),
+    header_two: (editor) => header(editor, '##'),
+    header_three: (editor) => header(editor, '###'),
+    bold: (editor) => emphasis(editor, ['**', '__']),
+    italic: (editor) => emphasis(editor, ['*', '_']),
+    strikethrough: (editor) => emphasis(editor, ['~~']),
+    quote: (editor) => emphasis(editor, ['`']),
+    link: (editor) => insertLink(editor),
+    image: (editor, url) => insertImage(editor, url),
+    code: (editor) => insertCode(editor),
+    hr: (editor) => insertHr(editor),
+    table: (editor) => insertTable(editor),
+    ordered_list: (editor) => insertList(editor, '#'),
+    unordered_list: (editor) => insertList(editor, '*'),
+};
+const header = (editor, symbol) => {
+    const selection = editor.getDoc().getSelection().trim();
+    let text = selection;
+    const regex = new RegExp(`(?<sa>[#]{1,3})(?<text>.*)`, 'g');
+    text = processText(text, regex, symbol);
+    if (text === selection) {
+        text = `${symbol} ${text.length > 0 ? text : 'header'}`;
+        editor.getDoc().replaceSelection(text);
+    }
+    else {
+        editor.getDoc().replaceSelection(text);
+        text.startsWith(symbol) &&
+            editor.getDoc().setCursor({
+                line: editor.getDoc().getCursor().line + 1,
+                ch: editor.getDoc().getCursor().ch,
+            });
+    }
+};
+const emphasis = (editor, symbols) => {
+    const selection = editor.getDoc().getSelection();
+    let text = selection;
+    symbols.forEach((symbol) => {
+        const regex = new RegExp(`(?<sa>[\\${symbol.slice(0, 1)}]{${symbol.length}})(?<text>.*?)(?<sb>[\\${symbol.slice(0, 1)}]{1,${symbol.length}})`, 'g');
+        text = processText(text, regex, symbol);
+    });
+    if (text === selection) {
+        text = `${symbols[0]}${text.length > 0 ? text : symbols[0] === '`' ? 'quote' : 'emphasis'}${symbols[0]}`;
+    }
+    editor.getDoc().replaceSelection(text);
+};
+const insertLink = (editor) => {
+    const selection = editor.getSelection();
+    let text = selection;
+    if (text) {
+        text = `[${text}]()`;
+    }
+    else {
+        text = `[Markdown Live Preview](Your link here)`;
+    }
+    editor.getDoc().replaceSelection(text);
+    const cursor = editor.getDoc().getCursor();
+    if (text.split('')[text.length - 2] === 'e') {
+        editor.setSelection({
+            line: cursor.line,
+            ch: cursor.ch - 15,
+        }, { ...cursor, ch: cursor.ch - 1 });
+    }
+    else {
+        editor.setCursor({ ...cursor, ch: cursor.ch - 1 });
+    }
+};
+const insertImage = (editor, url) => {
+    const selection = editor.getSelection();
+    let text = selection;
+    if (text) {
+        text = `![Alternative ${text}](${url ? url : 'Your link here'} "${text}")`;
+    }
+    else {
+        text = `![This is an alt text.](${url ? url : 'http://placekitten.com/g/200/300'} "This is a sample image.")`;
+    }
+    editor.getDoc().replaceSelection(text);
+    const cursor = editor.getDoc().getCursor();
+    if (text.startsWith('![A')) {
+        editor.setSelection({
+            line: cursor.line,
+            ch: cursor.ch - 4 - text.length,
+        }, {
+            line: cursor.line,
+            ch: cursor.ch - 18 - text.length,
+        });
+    }
+    else {
+        editor.setSelection({
+            line: cursor.line,
+            ch: cursor.ch - 25,
+        }, {
+            line: cursor.line,
+            ch: cursor.ch - 2,
+        });
+    }
+};
+const insertCode = (editor) => {
+    const selection = editor.getSelection();
+    let text = selection;
+    if (text.trim().startsWith('```')) {
+        const textArray = text.split('```');
+        textArray.pop();
+        textArray.reverse().pop();
+        text = textArray.reverse().join('');
+    }
+    else {
+        text = `\`\`\`${text}\n\`\`\``;
+    }
+    editor.replaceSelection(text);
+};
+const insertHr = (editor) => {
+    const selection = editor.getSelection();
+    editor.replaceSelection(`${selection}\n___\n`);
+};
+const insertTable = (editor) => {
+    const selection = editor.getSelection();
+    editor.replaceSelection(`${selection}
+| Left columns  | Center columns | Right columns |
+| ------------- |:-------------: |--------------:|
+| left foo      | right foo      | right foo     |
+| left bar      | right bar      | right foo     |
+| left baz      | right baz      | right foo     |
+\n`);
+};
+const insertList = (editor, symbol) => {
+    const selection = editor.getSelection();
+    let text = '';
+    for (let i = 0; i < 3; i++) {
+        const bullet = `${symbol === '*' ? symbol : `${i + 1}.`}`;
+        const item = i === 0 && selection.length > 0 ? selection : `Item ${i + 1}`;
+        text += `${bullet} ${item}\n`;
+    }
+    editor.replaceSelection(`${text}\n`);
+    editor.setSelection({
+        ch: symbol === '*' ? 2 : 3,
+        line: editor.getCursor().line - 4,
+    }, {
+        ch: selection.length > 0 ? (selection.length + symbol === '*' ? 2 : 3) : 8,
+        line: editor.getCursor().line - 4,
+    });
+};
+const processText = (text, regex, symbol) => {
+    const matchList = regex.exec(text);
+    if (matchList) {
+        text = text
+            .split(regex)
+            .filter((v) => v !== symbol)
+            .join('');
+    }
+    return text.trim();
+};
+//# sourceMappingURL=actions.js.map

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

@@ -0,0 +1,81 @@
+import { PropertyValueMap } from 'lit';
+import { Editor, EditorConfiguration } from 'codemirror';
+import { ExmgElement } from '@exmg/lit-base';
+import { MarkdownActions, ToolbarIcons, ToolbarItem } from './types.js';
+import { TokenizerAndRendererExtension } from 'marked';
+import { getFormValue } from '@material/web/labs/behaviors/form-associated.js';
+import { MardownEditorValidator } from './validator/exm-markdown-editor-validator.js';
+import { createValidator, getValidityAnchor } from '@material/web/labs/behaviors/constraint-validation.js';
+import './exm-markdown-editor-toolbar.js';
+declare const MarkdownBaseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<(abstract new (...args: any[]) => import("@material/web/labs/behaviors/element-internals.js").WithElementInternals) & typeof ExmgElement & import("@material/web/labs/behaviors/form-associated.js").FormAssociatedConstructor, import("@material/web/labs/behaviors/form-associated.js").FormAssociated>, import("@material/web/labs/behaviors/constraint-validation.js").ConstraintValidation>;
+/**
+ * Markdown editor element.
+ * An out of the box customizable Markdown Editor for Exmachina
+ *
+ * ```
+ * <exm-markdown-editor markdown="# Header 1"></exm-markdown-editor>
+ * ```
+ * ### Styling
+ *
+ *  Custom property | Description | Default
+ *  ----------------|-------------|----------
+ * `--exm-markdown-editor-code-color` | Editor's text color | --md-sys-color-on-surface
+ * `--exm-markdown-editor-code-cursor-color` | Editor's cursor color | --md-sys-color-on-surface
+ * `--exm-markdown-editor-code-header-color` | H1 color in editor | #4a8fc0;
+ * `--exm-markdown-editor-code-inline-code-color` | Inline code color | #ea881f
+ * `--exm-markdown-editor-code-list-color` | Lists color | rgb(25, 165, 28)
+ * `--exm-markdown-editor-selected-code-color` | Selected text color | rgb(140, 140, 140)
+ * `--exm-markdown-editor-border-color` | Editor's border color | --md-sys-color-primary
+ * `--exm-markdown-editor-background-color` | Toolbar and default preview background | --md-sys-color-surface-container-high
+ * `--exm-markdown-editor-code-background-color` | Editor's background color when focused | --md-sys-color-surface-container-high
+ *
+ *  # Events:
+ *  - change - where detail is current markdown value
+ *  - insert-image - if the Editor is set to upload, it will trigger this event when the insert-image is clicked
+ *
+ * @customElement
+ * @element exm-markdown-editor
+ * @memberof Exmg
+ * @extends ExmgElement
+ * @summary Markdown editor element
+ */
+export declare class MarkdownEditorElementBase extends MarkdownBaseClass {
+    value: string;
+    html?: string;
+    label: string;
+    upload: boolean;
+    toolbarActions?: ToolbarItem[];
+    toolbarIcons?: ToolbarIcons;
+    markedExtension?: TokenizerAndRendererExtension[];
+    required: boolean;
+    editorElement?: HTMLDivElement;
+    previewElement?: Element | null;
+    height: number;
+    preview: boolean;
+    editorConfiguration: EditorConfiguration;
+    editorActions: MarkdownActions;
+    codeMirrorEditor?: Editor;
+    internalTextarea?: HTMLTextAreaElement;
+    blurHandlerBinding: any;
+    heightStyleMap?: any;
+    reset(): void;
+    protected updated(changedProps: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    [getFormValue](): string;
+    [createValidator](): MardownEditorValidator;
+    [getValidityAnchor](): HTMLTextAreaElement;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    focus(): void;
+    protected firstUpdated(): void;
+    protected disconectedCallback(): void;
+    protected getPreviewElement(): Element | null;
+    codeMirrorSetup(): void;
+    handleFocus(): void;
+    handleBlur(): void;
+    handleAction(e: CustomEvent): void;
+    handleInsertImage(url: string): void;
+    updateValue(newValue?: string): void;
+    disablePreview(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+export {};

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

@@ -0,0 +1,252 @@
+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';
+import { markdownActions, toolbarActions } from './actions.js';
+import { marked } from 'marked';
+import { mixinElementInternals } from '@material/web/labs/behaviors/element-internals.js';
+import { getFormValue, mixinFormAssociated } from '@material/web/labs/behaviors/form-associated.js';
+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';
+const MarkdownBaseClass = mixinConstraintValidation(mixinFormAssociated(mixinElementInternals(ExmgElement)));
+/**
+ * Markdown editor element.
+ * An out of the box customizable Markdown Editor for Exmachina
+ *
+ * ```
+ * <exm-markdown-editor markdown="# Header 1"></exm-markdown-editor>
+ * ```
+ * ### Styling
+ *
+ *  Custom property | Description | Default
+ *  ----------------|-------------|----------
+ * `--exm-markdown-editor-code-color` | Editor's text color | --md-sys-color-on-surface
+ * `--exm-markdown-editor-code-cursor-color` | Editor's cursor color | --md-sys-color-on-surface
+ * `--exm-markdown-editor-code-header-color` | H1 color in editor | #4a8fc0;
+ * `--exm-markdown-editor-code-inline-code-color` | Inline code color | #ea881f
+ * `--exm-markdown-editor-code-list-color` | Lists color | rgb(25, 165, 28)
+ * `--exm-markdown-editor-selected-code-color` | Selected text color | rgb(140, 140, 140)
+ * `--exm-markdown-editor-border-color` | Editor's border color | --md-sys-color-primary
+ * `--exm-markdown-editor-background-color` | Toolbar and default preview background | --md-sys-color-surface-container-high
+ * `--exm-markdown-editor-code-background-color` | Editor's background color when focused | --md-sys-color-surface-container-high
+ *
+ *  # Events:
+ *  - change - where detail is current markdown value
+ *  - insert-image - if the Editor is set to upload, it will trigger this event when the insert-image is clicked
+ *
+ * @customElement
+ * @element exm-markdown-editor
+ * @memberof Exmg
+ * @extends ExmgElement
+ * @summary Markdown editor element
+ */
+export class MarkdownEditorElementBase extends MarkdownBaseClass {
+    constructor() {
+        super(...arguments);
+        this.value = '';
+        this.label = '';
+        this.upload = false;
+        this.toolbarActions = toolbarActions;
+        this.toolbarIcons = toolbarIcons;
+        this.required = false;
+        this.height = 400;
+        this.preview = true;
+        this.editorConfiguration = defaultConfiguration;
+        this.editorActions = markdownActions;
+    }
+    reset() {
+        var _a;
+        this.value = (_a = this.getAttribute('value')) !== null && _a !== void 0 ? _a : '';
+    }
+    updated(changedProps) {
+        var _a, _b;
+        if (changedProps.has('value') && ((_a = this.codeMirrorEditor) === null || _a === void 0 ? void 0 : _a.getValue()) !== this.value) {
+            (_b = this.codeMirrorEditor) === null || _b === void 0 ? void 0 : _b.setValue(this.value);
+        }
+    }
+    [getFormValue]() {
+        return this.value;
+    }
+    [createValidator]() {
+        return new MardownEditorValidator(() => this);
+    }
+    [getValidityAnchor]() {
+        return this.internalTextarea;
+    }
+    formResetCallback() {
+        this.reset();
+    }
+    formStateRestoreCallback(state) {
+        this.value = state;
+    }
+    focus() {
+        var _a;
+        (_a = this.codeMirrorEditor) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    firstUpdated() {
+        var _a;
+        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);
+        if (this.value) {
+            this.updateValue(this.value);
+            this.codeMirrorEditor.refresh();
+        }
+        if (this.label && this.required) {
+            this.setAttribute('aria-required', 'true');
+            this.label += ' *';
+        }
+    }
+    disconectedCallback() {
+        this.removeEventListener('blur', this.handleBlur);
+    }
+    getPreviewElement() {
+        return this.shadowRoot.querySelector('#preview');
+    }
+    codeMirrorSetup() {
+        if (!this.editorElement) {
+            console.log('Error');
+            return;
+        }
+        if (this.markedExtension) {
+            marked.use({ extensions: this.markedExtension });
+        }
+        // eslint-disable-next-line
+        this.codeMirrorEditor = window.CodeMirror(this.editorElement, {
+            ...this.editorConfiguration,
+            value: this.value || '',
+        });
+        this.codeMirrorEditor.on('focus', (_editor) => {
+            this.handleFocus();
+        });
+        this.codeMirrorEditor.on('change', (editor) => {
+            this.updateValue(editor.getValue());
+        });
+        this.internalTextarea = this.codeMirrorEditor.getInputField();
+    }
+    handleFocus() {
+        this.codeMirrorEditor.refresh();
+    }
+    handleBlur() {
+        this.previewElement.innerHTML = `
+      <main class="preview-content">
+        ${this.html}
+      </main>
+    `;
+        this.preview = true;
+    }
+    handleAction(e) {
+        var _a;
+        const actionName = e.detail;
+        if (!this.editorActions[actionName]) {
+            return;
+        }
+        this.editorActions[actionName](this.codeMirrorEditor);
+        this.preview = false;
+        (_a = this.codeMirrorEditor) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    handleInsertImage(url) {
+        this.editorActions['image'](this.codeMirrorEditor, url);
+    }
+    updateValue(newValue) {
+        this.html = marked.parse(newValue !== null && newValue !== void 0 ? newValue : '');
+        if (this.previewElement) {
+            this.previewElement.innerHTML = `
+      <main class="preview-content">
+        ${this.html}
+      </main>
+    `;
+        }
+        if (newValue === this.value) {
+            return;
+        }
+        this.value = newValue || '';
+        this.fire('change', this.value);
+    }
+    disablePreview() {
+        this.preview = false;
+    }
+    render() {
+        return html `
+      <div
+        id="markdowdEditorContainer"
+        class="container"
+        @click=${this.disablePreview}
+        style=${this.heightStyleMap}
+        ?label=${this.label}
+        ?preview=${this.preview}
+      >
+        ${this.label
+            ? html `<label ?preview=${this.preview} for="markdowdEditorContainer">${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>
+    `;
+    }
+}
+__decorate([
+    property({ type: String })
+], MarkdownEditorElementBase.prototype, "value", void 0);
+__decorate([
+    property()
+], MarkdownEditorElementBase.prototype, "html", void 0);
+__decorate([
+    property({ type: String, attribute: 'label' })
+], MarkdownEditorElementBase.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], MarkdownEditorElementBase.prototype, "upload", void 0);
+__decorate([
+    property({ type: Array })
+], MarkdownEditorElementBase.prototype, "toolbarActions", void 0);
+__decorate([
+    property({ type: Object })
+], MarkdownEditorElementBase.prototype, "toolbarIcons", void 0);
+__decorate([
+    property({ type: Array })
+], MarkdownEditorElementBase.prototype, "markedExtension", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MarkdownEditorElementBase.prototype, "required", 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) {
+        var _a;
+        if (preview === false) {
+            (_a = this.codeMirrorEditor) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    })
+], MarkdownEditorElementBase.prototype, "preview", void 0);
+//# sourceMappingURL=exm-markdown-editor-base.js.map

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

@@ -0,0 +1,12 @@
+import { ToolbarIcons, ToolbarItem } from './types.js';
+import { ExmgElement } from '@exmg/lit-base/index.js';
+import '@material/web/iconbutton/icon-button.js';
+import '@material/web/icon/icon.js';
+export declare class MarkdownEditorToolbarBase extends ExmgElement {
+    upload: boolean;
+    actions: ToolbarItem[];
+    icons: ToolbarIcons;
+    renderActionButtons(): import("lit-html").TemplateResult<1>[];
+    action(action: string): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,52 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { toolbarActions } from './actions.js';
+import { toolbarIcons } from './icons.js';
+import { ExmgElement } from '@exmg/lit-base/index.js';
+import { property } from 'lit/decorators.js';
+import '@material/web/iconbutton/icon-button.js';
+import '@material/web/icon/icon.js';
+export class MarkdownEditorToolbarBase extends ExmgElement {
+    constructor() {
+        super(...arguments);
+        this.upload = false;
+        this.actions = toolbarActions;
+        this.icons = toolbarIcons;
+    }
+    renderActionButtons() {
+        const buttons = this.actions.map((button) => {
+            const displayedName = button.name.replace('_', '').toLocaleUpperCase();
+            return html ` <md-icon-button
+        aria-label=${displayedName}
+        title=${displayedName}
+        @click=${(e) => {
+                e.preventDefault();
+                this.action(button.name);
+            }}
+      >
+        <md-icon> ${this.icons[button.icon] ? this.icons[button.icon] : button.icon} </md-icon>
+      </md-icon-button>`;
+        });
+        return buttons;
+    }
+    action(action) {
+        if (action === 'image' && this.upload) {
+            this.fire('insert-image', undefined, true);
+            return;
+        }
+        this.fire('action', action, true);
+    }
+    render() {
+        return html ` <div class="toolbar-container">${this.renderActionButtons()}</div> `;
+    }
+}
+__decorate([
+    property({ type: Boolean })
+], MarkdownEditorToolbarBase.prototype, "upload", void 0);
+__decorate([
+    property({ type: Array })
+], MarkdownEditorToolbarBase.prototype, "actions", void 0);
+__decorate([
+    property({ type: Object })
+], MarkdownEditorToolbarBase.prototype, "icons", void 0);
+//# sourceMappingURL=exm-markdown-editor-toolbar-base.js.map

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

@@ -0,0 +1,9 @@
+import { MarkdownEditorToolbarBase } from './exm-markdown-editor-toolbar-base.js';
+export declare class MarkdownEditorToolbar extends MarkdownEditorToolbarBase {
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-markdown-editor-toolbar': MarkdownEditorToolbar;
+    }
+}