@exmg/exm-markdown-editor 1.1.36 → 1.2.0

package/.rollup.cache/root/repo/packages/exm-markdown-editor/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/.rollup.cache/root/repo/packages/exm-markdown-editor/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;
+    }
+}

package/.rollup.cache/root/repo/packages/exm-markdown-editor/dist/exm-markdown-editor-toolbar.js

@@ -0,0 +1,12 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { MarkdownEditorToolbarBase } from './exm-markdown-editor-toolbar-base.js';
+import { style as toolbarStyles } from './styles/exm-markdown-editor-toolbar-css.js';
+let MarkdownEditorToolbar = class MarkdownEditorToolbar extends MarkdownEditorToolbarBase {
+};
+MarkdownEditorToolbar.styles = [toolbarStyles];
+MarkdownEditorToolbar = __decorate([
+    customElement('exm-markdown-editor-toolbar')
+], MarkdownEditorToolbar);
+export { MarkdownEditorToolbar };
+//# sourceMappingURL=exm-markdown-editor-toolbar.js.map

package/.rollup.cache/root/repo/packages/exm-markdown-editor/dist/exm-markdown-editor.d.ts

@@ -0,0 +1,76 @@
+import { MarkdownEditorElementBase } from './exm-markdown-editor-base.js';
+/**
+ * Markdown WYSIWYG editor element.
+ * This editor element is a wrapper element for the markdown-element which will enable editing
+ * the markdown data. See [marked-element](https://www.webcomponents.org/element/PolymerElements/marked-element/)
+ * for more details on how to use this element.
+ *
+ * ```
+ * <exm-markdown-editor markdown="# Header 1"></exm-markdown-editor>
+ * ```
+ *
+ * ## Custom Toolbar
+ * Add attribute toolbar-buttons to adjust the toolbar buttons. The array values should match
+ * the _toolbarButtons item name values.
+ *
+ * ```html
+ * <exm-markdown-editor toolbar-buttons='["strong","italic","strikethrough","|","quote","hr","table"]'></exm-markdown-editor>
+ * ```
+ *
+ * ### Styling
+ *
+ * The preview panel markdown output can be styled from outside th element. See the demo/styling.html example
+ * on how to do this. In this demo the github-markdown-css project is used for styling the html output.
+ *
+ * The HTML output will we inserted into the element slot and will have a container div arround it
+ * with the class preview-html:
+ *
+ * ```
+ * <exm-markdown-editor markdown="# Header 1">
+ *  <div class="preview-body"><h1>Header 1</h1></div>
+ * </exm-markdown-editor>
+ * ```
+ *
+ * `<exm-markdown-editor>` provides the following custom properties and mixins
+ *  for styling:
+ *
+ *  Custom property | Description | Default
+ *  ----------------|-------------|----------
+ *  `--exm-markdown-editor-border` | Border Color | `#ddd`
+ *  `--exm-markdown-editor-background-color` | Editor Background Color | `white`
+ *  `--exm-markdown-editor-fullscreen-top-offset` | Top offset in fullscreen mode | `0px`
+ *  `--exm-markdown-editor-toolbar-background` | Toolbar background color | `#fafafa`
+ *  `--exm-markdown-editor-toolbar-label-background` | Toolbar label background color | `#fafafa`
+ *  `--exm-markdown-editor-label-color` | Toolbar text color | `54% black`
+ *  `--exm-markdown-editor-toolbar-color` | Toolbar text color | `87% black`
+ *  `--exm-markdown-editor-toolbar-color-disabled` | Toolbar text color disabled | `54% black`
+ *  `--exm-markdown-editor-preview-background` | Preview background color | `white`
+ *  `--exm-markdown-editor-toolbar-button-background-hover` | Toolbar icon border color | `#fafafa`
+ *  `--exm-markdown-editor-toolbar-seperator-color` | Toolbar seperator color | `#ddd`
+ *  `--exm-markdown-editor-code-hover` | Editor code part hover background color | `white`
+ *  `--exm-markdown-editor-code-color` | Editor code color | `black`
+ *  `--exm-markdown-editor-code-background` | Editor code background | `white`
+ *
+ *  # Events:
+ *  - value-change - where detail is current markdown value
+ *  - exm-markdown-editor-fullscreen where detail is boolean with current fullscreen state
+ *  - exm-markdown-editor-paste-table thrown when app should display a dialog to paste Excel Table
+ *  - exm-markdown-editor-image-open when image-ext button is clicked. Can be used to insert external images
+ *
+ * @customElement
+ * @group Exmg Core Elements
+ * @element exm-markdown-editor
+ * @demo demo/index.html
+ * @memberof Exmg
+ * @extends ExmgElement
+ * @summary Markdown editor element
+ */
+export declare class MarkdownEditorElement extends MarkdownEditorElementBase {
+    static styles: import("lit").CSSResult[];
+    getPreviewElement(): Element | null;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-markdown-editor': MarkdownEditorElement;
+    }
+}

package/.rollup.cache/root/repo/packages/exm-markdown-editor/dist/exm-markdown-editor.js

@@ -0,0 +1,83 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { MarkdownEditorElementBase } from './exm-markdown-editor-base.js';
+import { style as codeMirrorStyles } from './styles/exm-markdown-codemirror-css.js';
+import { style as markdownEditorStyles } from './styles/exm-markdown-editor-css.js';
+/**
+ * Markdown WYSIWYG editor element.
+ * This editor element is a wrapper element for the markdown-element which will enable editing
+ * the markdown data. See [marked-element](https://www.webcomponents.org/element/PolymerElements/marked-element/)
+ * for more details on how to use this element.
+ *
+ * ```
+ * <exm-markdown-editor markdown="# Header 1"></exm-markdown-editor>
+ * ```
+ *
+ * ## Custom Toolbar
+ * Add attribute toolbar-buttons to adjust the toolbar buttons. The array values should match
+ * the _toolbarButtons item name values.
+ *
+ * ```html
+ * <exm-markdown-editor toolbar-buttons='["strong","italic","strikethrough","|","quote","hr","table"]'></exm-markdown-editor>
+ * ```
+ *
+ * ### Styling
+ *
+ * The preview panel markdown output can be styled from outside th element. See the demo/styling.html example
+ * on how to do this. In this demo the github-markdown-css project is used for styling the html output.
+ *
+ * The HTML output will we inserted into the element slot and will have a container div arround it
+ * with the class preview-html:
+ *
+ * ```
+ * <exm-markdown-editor markdown="# Header 1">
+ *  <div class="preview-body"><h1>Header 1</h1></div>
+ * </exm-markdown-editor>
+ * ```
+ *
+ * `<exm-markdown-editor>` provides the following custom properties and mixins
+ *  for styling:
+ *
+ *  Custom property | Description | Default
+ *  ----------------|-------------|----------
+ *  `--exm-markdown-editor-border` | Border Color | `#ddd`
+ *  `--exm-markdown-editor-background-color` | Editor Background Color | `white`
+ *  `--exm-markdown-editor-fullscreen-top-offset` | Top offset in fullscreen mode | `0px`
+ *  `--exm-markdown-editor-toolbar-background` | Toolbar background color | `#fafafa`
+ *  `--exm-markdown-editor-toolbar-label-background` | Toolbar label background color | `#fafafa`
+ *  `--exm-markdown-editor-label-color` | Toolbar text color | `54% black`
+ *  `--exm-markdown-editor-toolbar-color` | Toolbar text color | `87% black`
+ *  `--exm-markdown-editor-toolbar-color-disabled` | Toolbar text color disabled | `54% black`
+ *  `--exm-markdown-editor-preview-background` | Preview background color | `white`
+ *  `--exm-markdown-editor-toolbar-button-background-hover` | Toolbar icon border color | `#fafafa`
+ *  `--exm-markdown-editor-toolbar-seperator-color` | Toolbar seperator color | `#ddd`
+ *  `--exm-markdown-editor-code-hover` | Editor code part hover background color | `white`
+ *  `--exm-markdown-editor-code-color` | Editor code color | `black`
+ *  `--exm-markdown-editor-code-background` | Editor code background | `white`
+ *
+ *  # Events:
+ *  - value-change - where detail is current markdown value
+ *  - exm-markdown-editor-fullscreen where detail is boolean with current fullscreen state
+ *  - exm-markdown-editor-paste-table thrown when app should display a dialog to paste Excel Table
+ *  - exm-markdown-editor-image-open when image-ext button is clicked. Can be used to insert external images
+ *
+ * @customElement
+ * @group Exmg Core Elements
+ * @element exm-markdown-editor
+ * @demo demo/index.html
+ * @memberof Exmg
+ * @extends ExmgElement
+ * @summary Markdown editor element
+ */
+let MarkdownEditorElement = class MarkdownEditorElement extends MarkdownEditorElementBase {
+    getPreviewElement() {
+        const slot = this.querySelector('*[slot=preview]');
+        return slot ? slot : this.shadowRoot.querySelector('#preview');
+    }
+};
+MarkdownEditorElement.styles = [markdownEditorStyles, codeMirrorStyles];
+MarkdownEditorElement = __decorate([
+    customElement('exm-markdown-editor')
+], MarkdownEditorElement);
+export { MarkdownEditorElement };
+//# sourceMappingURL=exm-markdown-editor.js.map

package/.rollup.cache/root/repo/packages/exm-markdown-editor/dist/icons.d.ts

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

package/.rollup.cache/root/repo/packages/exm-markdown-editor/dist/icons.js

@@ -0,0 +1,5 @@
+import { html } from 'lit';
+export const toolbarIcons = {
+    example_icon: html `Some svg here`,
+};
+//# sourceMappingURL=icons.js.map

package/.rollup.cache/root/repo/packages/exm-markdown-editor/dist/index.d.ts

@@ -0,0 +1,6 @@
+import { MarkdownEditorElement } from './exm-markdown-editor.js';
+import { MarkdownEditorToolbar } from './exm-markdown-editor-toolbar.js';
+import { ToolbarItem, ToolbarIcons, MarkdownActions } from './types.js';
+export { MarkdownEditorElement, MarkdownEditorToolbar, ToolbarItem, ToolbarIcons, MarkdownActions };
+export { markedConfiguration } from './utils/configurations.js';
+export { markdownActions, toolbarActions } from './actions.js';

package/.rollup.cache/root/repo/packages/exm-markdown-editor/dist/index.js

@@ -0,0 +1,6 @@
+import { MarkdownEditorElement } from './exm-markdown-editor.js';
+import { MarkdownEditorToolbar } from './exm-markdown-editor-toolbar.js';
+export { MarkdownEditorElement, MarkdownEditorToolbar };
+export { markedConfiguration } from './utils/configurations.js';
+export { markdownActions, toolbarActions } from './actions.js';
+//# sourceMappingURL=index.js.map

package/.rollup.cache/root/repo/packages/exm-markdown-editor/dist/styles/exm-markdown-codemirror-css.d.ts

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