@limetech/lime-elements 37.27.0 → 37.28.1

package/dist/lime-elements/{p-48d4564a.entry.js → p-e9d2525d.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as r,h as t}from"./p-443111b3.js";const o='@charset "UTF-8";:host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}.lime-empty-value-for-readonly{z-index:1;position:absolute;top:0.875rem;left:1rem}.lime-looks-like-input-value{line-height:1.75rem;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:rgba(var(--contrast-1400), 1);font-size:0.875rem;font-weight:400;letter-spacing:0.009375em}.mdc-text-field--disabled .lime-looks-like-input-value{cursor:not-allowed;opacity:0.4}*{box-sizing:border-box}:host(limel-text-editor){--limel-text-editor-padding:0.75rem;position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;min-width:5rem;min-height:4rem;height:100%;max-height:100%}:host(limel-text-editor:not([readonly])){--limel-text-editor-outline-color:rgba(var(--contrast-700), 0.65);--limel-text-editor-background-color:rgba(var(--contrast-200), 0.5);--limel-text-editor-label-color:rgba(var(--contrast-1200), 1)}:host(limel-text-editor[readonly]){--limel-text-editor-outline-color:transparent;min-height:2.5rem}:host(limel-text-editor[readonly]) limel-markdown{display:block;padding:var(--limel-text-editor-padding)}.notched-outline{position:absolute;inset:0;display:flex;background-color:var(--limel-text-editor-background-color)}.leading-outline,.notch,.trailing-outline{border-width:1px;border-style:solid;border-color:var(--limel-text-editor-outline-color)}.leading-outline{flex-shrink:0;width:0.75rem;border-right-width:0;border-top-left-radius:0.25rem;border-bottom-left-radius:0.25rem}.notch{flex-shrink:0;position:relative;z-index:2;border-top-width:0;border-right-width:0;border-left-width:0;max-width:calc(100% - 1.5rem)}.trailing-outline{flex-grow:1;border-left-width:0;border-top-right-radius:0.25rem;border-bottom-right-radius:0.25rem}label{transform:translateY(-50%);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;padding:0 0.25rem;color:var(--limel-text-editor-label-color);font-size:0.65rem;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, 0.009375em)}limel-prosemirror-adapter{flex-grow:1;min-width:0;min-height:0;height:100%;overflow:hidden auto}';const i=class{constructor(t){e(this,t);this.change=r(this,"change",7);this.handleChange=()=>e=>{e.stopPropagation();this.change.emit(e.detail)};this.disabled=undefined;this.readonly=undefined;this.helperText=undefined;this.placeholder=undefined;this.label=undefined;this.invalid=undefined;this.value=undefined}render(){return[t("span",{class:"notched-outline"},t("span",{class:"leading-outline"}),this.renderLabel(),t("span",{class:"trailing-outline"})),this.renderEditor()]}renderEditor(){if(this.readonly&&!this.value){return t("span",{class:"lime-empty-value-for-readonly lime-looks-like-input-value"},"–")}if(this.readonly){return t("limel-markdown",{value:this.value})}return t("limel-prosemirror-adapter",{onChange:this.handleChange,value:this.value})}renderLabel(){if(!this.label){return}return t("span",{class:"notch"},t("label",null,this.label))}};i.style=o;export{i as limel_text_editor};
-//# sourceMappingURL=p-48d4564a.entry.js.map
+import{r as e,c as r,h as t}from"./p-443111b3.js";const o='@charset "UTF-8";:host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}.lime-empty-value-for-readonly{z-index:1;position:absolute;top:0.875rem;left:1rem}.lime-looks-like-input-value{line-height:1.75rem;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:rgba(var(--contrast-1400), 1);font-size:0.875rem;font-weight:400;letter-spacing:0.009375em}.mdc-text-field--disabled .lime-looks-like-input-value{cursor:not-allowed;opacity:0.4}*{box-sizing:border-box}:host(limel-text-editor){--limel-text-editor-padding:0.75rem;position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;min-width:5rem;min-height:4rem;height:100%;max-height:100%}:host(limel-text-editor:not([readonly])){--limel-text-editor-outline-color:rgba(var(--contrast-700), 0.65);--limel-text-editor-background-color:rgba(var(--contrast-200), 0.5);--limel-text-editor-label-color:rgba(var(--contrast-1200), 1)}:host(limel-text-editor[readonly]){--limel-text-editor-outline-color:transparent;min-height:2.5rem}:host(limel-text-editor[readonly]) limel-markdown{display:block;padding:var(--limel-text-editor-padding)}.notched-outline{position:absolute;inset:0;display:flex;background-color:var(--limel-text-editor-background-color)}.leading-outline,.notch,.trailing-outline{border-width:1px;border-style:solid;border-color:var(--limel-text-editor-outline-color)}.leading-outline{flex-shrink:0;width:0.75rem;border-right-width:0;border-top-left-radius:0.25rem;border-bottom-left-radius:0.25rem}.notch{flex-shrink:0;position:relative;z-index:2;border-top-width:0;border-right-width:0;border-left-width:0;max-width:calc(100% - 1.5rem)}.trailing-outline{flex-grow:1;border-left-width:0;border-top-right-radius:0.25rem;border-bottom-right-radius:0.25rem}label{transform:translateY(-50%);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;padding:0 0.25rem;color:var(--limel-text-editor-label-color);font-size:0.65rem;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, 0.009375em)}limel-prosemirror-adapter{flex-grow:1;min-width:0;min-height:0;height:100%;overflow:hidden auto}';const i=class{constructor(t){e(this,t);this.change=r(this,"change",7);this.handleChange=()=>e=>{e.stopPropagation();this.change.emit(e.detail)};this.contentType="markdown";this.disabled=undefined;this.readonly=undefined;this.helperText=undefined;this.placeholder=undefined;this.label=undefined;this.invalid=undefined;this.value=undefined}render(){return[t("span",{class:"notched-outline"},t("span",{class:"leading-outline"}),this.renderLabel(),t("span",{class:"trailing-outline"})),this.renderEditor()]}renderEditor(){if(this.readonly&&!this.value){return t("span",{class:"lime-empty-value-for-readonly lime-looks-like-input-value"},"–")}if(this.readonly){return t("limel-markdown",{value:this.value})}return t("limel-prosemirror-adapter",{contentType:this.contentType,onChange:this.handleChange,value:this.value})}renderLabel(){if(!this.label){return}return t("span",{class:"notch"},t("label",null,this.label))}};i.style=o;export{i as limel_text_editor};
+//# sourceMappingURL=p-e9d2525d.entry.js.map

package/dist/lime-elements/p-e9d2525d.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["textEditorCss","TextEditor","this","handleChange","event","stopPropagation","change","emit","detail","render","h","class","renderLabel","renderEditor","readonly","value","contentType","onChange","label"],"sources":["./src/components/text-editor/text-editor.scss?tag=limel-text-editor&encapsulation=shadow","./src/components/text-editor/text-editor.tsx"],"sourcesContent":["@use '../../style/internal/shared_input-select-picker';\n@use '../../../src/style/mixins.scss';\n\n@include shared_input-select-picker.lime-empty-value-for-readonly;\n@include shared_input-select-picker.lime-looks-like-input-value;\n\n* {\n    box-sizing: border-box;\n}\n\n:host(limel-text-editor) {\n    --limel-text-editor-padding: 0.75rem;\n    position: relative;\n    isolation: isolate;\n    display: flex;\n    flex-direction: column;\n\n    width: 100%;\n    min-width: 5rem;\n    min-height: 4rem;\n    height: 100%;\n    max-height: 100%;\n}\n\n:host(limel-text-editor:not([readonly])) {\n    --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color};\n    --limel-text-editor-background-color: #{shared_input-select-picker.$background-color-normal};\n    --limel-text-editor-label-color: #{shared_input-select-picker.$label-color};\n}\n\n:host(limel-text-editor[readonly]) {\n    --limel-text-editor-outline-color: transparent;\n    min-height: shared_input-select-picker.$height-of-mdc-text-field;\n\n    limel-markdown {\n        display: block;\n        padding: var(--limel-text-editor-padding);\n    }\n}\n\n.notched-outline {\n    position: absolute;\n    inset: 0;\n\n    display: flex;\n    background-color: var(--limel-text-editor-background-color);\n}\n\n.leading-outline,\n.notch,\n.trailing-outline {\n    border-width: 1px;\n    border-style: solid;\n    border-color: var(--limel-text-editor-outline-color);\n}\n\n.leading-outline {\n    flex-shrink: 0;\n    width: 0.75rem;\n    border-right-width: 0;\n    border-top-left-radius: 0.25rem;\n    border-bottom-left-radius: 0.25rem;\n}\n\n.notch {\n    flex-shrink: 0;\n\n    position: relative;\n    z-index: 2;\n\n    border-top-width: 0;\n    border-right-width: 0;\n    border-left-width: 0;\n\n    max-width: calc(100% - 1.5rem);\n}\n\n.trailing-outline {\n    flex-grow: 1;\n    border-left-width: 0;\n    border-top-right-radius: 0.25rem;\n    border-bottom-right-radius: 0.25rem;\n}\n\nlabel {\n    transform: translateY(-50%);\n\n    @include mixins.truncate-text;\n    display: block;\n    padding: 0 0.25rem;\n\n    color: var(--limel-text-editor-label-color);\n    font-size: 0.65rem; // `10.4px` similar to MDC's floating label\n    letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);\n}\n\nlimel-prosemirror-adapter {\n    flex-grow: 1;\n\n    min-width: 0;\n    min-height: 0;\n    height: 100%;\n    overflow: hidden auto;\n}\n","import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\n/**\n * A rich text editor that offers a rich text editing experience with markdown support,\n * in the sense that you can easily type markdown syntax and see the rendered\n * result as rich text in real-time. For instance, you can type `# Hello, world!`\n * and see it directly turning to a heading 1 (an `<h1>` HTML element).\n *\n * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>\n * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.\n *\n * @exampleComponent limel-example-text-editor-basic\n * @exampleComponent limel-example-text-editor-as-form-component\n * @exampleComponent limel-example-text-editor-composite\n * @exampleComponent limel-example-text-editor-with-markdown\n * @exampleComponent limel-example-text-editor-with-html\n * @exampleComponent limel-example-text-editor-height\n * @beta\n * @private\n */\n@Component({\n    tag: 'limel-text-editor',\n    shadow: true,\n    styleUrl: 'text-editor.scss',\n})\nexport class TextEditor implements FormComponent<string> {\n    /** The type of content that the editor should handle and emit, defaults to `markdown`\n     *\n     * Assumed to be set only once, so not reactive to changes\n     */\n    @Prop()\n    public contentType: 'markdown' | 'html' = 'markdown';\n\n    /**\n     * Set to `true` to disable the field.\n     * Use `disabled` to indicate that the field can normally be interacted\n     * with, but is currently disabled. This tells the user that if certain\n     * requirements are met, the field may become enabled again.\n     */\n    @Prop({ reflect: true })\n    public disabled?: boolean;\n\n    /**\n     * Set to `true` to make the component read-only.\n     * Use `readonly` when the field is only there to present the data it holds,\n     * and will not become possible for the current user to edit.\n     * :::note\n     * Consider that it might be better to use `limel-markdown`\n     * instead of `limel-text-editor` when the goal is visualizing data.\n     * :::\n     */\n    @Prop({ reflect: true })\n    public readonly?: boolean;\n\n    /**\n     * Optional helper text to display below the input field when it has focus\n     */\n    @Prop({ reflect: true })\n    public helperText?: string;\n\n    /**\n     * The placeholder text shown inside the input field,\n     * when the field is empty.\n     */\n    @Prop({ reflect: true })\n    public placeholder?: string;\n\n    /**\n     * The label of the editor\n     */\n    @Prop({ reflect: true })\n    public label?: string;\n\n    /**\n     * Set to `true` to indicate that the current value of the editor is\n     * invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid?: boolean;\n\n    /**\n     * Description of the text inside the editor as markdown\n     */\n    @Prop({ reflect: true })\n    public value: string;\n\n    /**\n     * Dispatched when a change is made to the editor\n     */\n    @Event()\n    public change: EventEmitter<string>;\n\n    public render() {\n        return [\n            <span class=\"notched-outline\">\n                <span class=\"leading-outline\" />\n                {this.renderLabel()}\n                <span class=\"trailing-outline\" />\n            </span>,\n            this.renderEditor(),\n        ];\n    }\n\n    private renderEditor() {\n        if (this.readonly && !this.value) {\n            return (\n                <span class=\"lime-empty-value-for-readonly lime-looks-like-input-value\">\n                    –\n                </span>\n            );\n        }\n\n        if (this.readonly) {\n            return <limel-markdown value={this.value} />;\n        }\n\n        return (\n            <limel-prosemirror-adapter\n                contentType={this.contentType}\n                onChange={this.handleChange}\n                value={this.value}\n            />\n        );\n    }\n\n    private renderLabel() {\n        if (!this.label) {\n            return;\n        }\n\n        return (\n            <span class=\"notch\">\n                <label>{this.label}</label>\n            </span>\n        );\n    }\n\n    private handleChange = () => (event: CustomEvent<string>) => {\n        event.stopPropagation();\n        this.change.emit(event.detail);\n    };\n}\n"],"mappings":"kDAAA,MAAMA,EAAgB,upG,MCyBTC,EAAU,M,wDAgHXC,KAAAC,aAAe,IAAOC,IAC1BA,EAAMC,kBACNH,KAAKI,OAAOC,KAAKH,EAAMI,OAAO,E,iBA5GQ,W,sKA6DnCC,SACH,MAAO,CACHC,EAAA,QAAMC,MAAM,mBACRD,EAAA,QAAMC,MAAM,oBACXT,KAAKU,cACNF,EAAA,QAAMC,MAAM,sBAEhBT,KAAKW,e,CAILA,eACJ,GAAIX,KAAKY,WAAaZ,KAAKa,MAAO,CAC9B,OACIL,EAAA,QAAMC,MAAM,6DAA2D,I,CAM/E,GAAIT,KAAKY,SAAU,CACf,OAAOJ,EAAA,kBAAgBK,MAAOb,KAAKa,O,CAGvC,OACIL,EAAA,6BACIM,YAAad,KAAKc,YAClBC,SAAUf,KAAKC,aACfY,MAAOb,KAAKa,O,CAKhBH,cACJ,IAAKV,KAAKgB,MAAO,CACb,M,CAGJ,OACIR,EAAA,QAAMC,MAAM,SACRD,EAAA,aAAQR,KAAKgB,O"}

package/dist/types/components/text-editor/prosemirror-adapter/prosemirror-adapter.d.ts

@@ -9,7 +9,13 @@
  */
 export declare class ProsemirrorAdapter {
   /**
-   * The value of the editor, expected to be serialised HTML
+   * The type of content that the editor should handle and emit, defaults to `markdown`
+   *
+   * Assumed to be set only once, so not reactive to changes
+   */
+  contentType: 'markdown' | 'html';
+  /**
+   * The value of the editor, expected to be markdown
    */
   value: string;
   private host;
@@ -20,10 +26,11 @@ export declare class ProsemirrorAdapter {
    * Dispatched when a change is made to the editor
    */
   private change;
+  private contentConverter;
+  componentWillLoad(): void;
   componentDidLoad(): void;
   render(): any[];
-  private initializeEditor;
-  private getHTML;
+  private initializeTextEditor;
   private handleActionBarItem;
   private executeCommand;
 }

package/dist/types/components/text-editor/text-editor.d.ts

@@ -12,11 +12,18 @@ import { FormComponent } from '../form/form.types';
  * @exampleComponent limel-example-text-editor-basic
  * @exampleComponent limel-example-text-editor-as-form-component
  * @exampleComponent limel-example-text-editor-composite
+ * @exampleComponent limel-example-text-editor-with-markdown
+ * @exampleComponent limel-example-text-editor-with-html
  * @exampleComponent limel-example-text-editor-height
  * @beta
  * @private
  */
 export declare class TextEditor implements FormComponent<string> {
+  /** The type of content that the editor should handle and emit, defaults to `markdown`
+   *
+   * Assumed to be set only once, so not reactive to changes
+   */
+  contentType: 'markdown' | 'html';
   /**
    * Set to `true` to disable the field.
    * Use `disabled` to indicate that the field can normally be interacted
@@ -53,7 +60,7 @@ export declare class TextEditor implements FormComponent<string> {
    */
   invalid?: boolean;
   /**
-   * Description of the text inside the editor as serialised HTML
+   * Description of the text inside the editor as markdown
    */
   value: string;
   /**

package/dist/types/components/text-editor/utils/content-type-converter.d.ts

@@ -0,0 +1,15 @@
+import { EditorView } from 'prosemirror-view';
+import { Schema } from 'prosemirror-model';
+/**
+ * Abstract class implementing a generic parser/serialiser
+ * for different editor content types
+ *
+ * Acts as a parser/serialiser between document encodings (e.g., markdown, HTML) and the ProseMirror document
+ *
+ * @private
+ */
+export interface ContentTypeConverter {
+  parseAsHTML: (text: string, schema: Schema) => Promise<string>;
+  serialize: (view: EditorView, schema: Schema) => string;
+}
+//# sourceMappingURL=content-type-converter.d.ts.map

package/dist/types/components/text-editor/utils/html-converter.d.ts

@@ -0,0 +1,10 @@
+import { ContentTypeConverter } from './content-type-converter';
+import { EditorView } from 'prosemirror-view';
+/**
+ * @private
+ */
+export declare class HTMLConverter implements ContentTypeConverter {
+  parseAsHTML: (text: string) => Promise<string>;
+  serialize: (view: EditorView) => string;
+}
+//# sourceMappingURL=html-converter.d.ts.map

package/dist/types/components/text-editor/utils/markdown-converter.d.ts

@@ -0,0 +1,10 @@
+import { ContentTypeConverter } from './content-type-converter';
+import { EditorView } from 'prosemirror-view';
+/**
+ * @private
+ */
+export declare class markdownConverter implements ContentTypeConverter {
+  parseAsHTML: (text: string) => Promise<string>;
+  serialize: (view: EditorView) => string;
+}
+//# sourceMappingURL=markdown-converter.d.ts.map

package/dist/types/components.d.ts

@@ -2063,7 +2063,11 @@ export namespace Components {
      */
     interface LimelProsemirrorAdapter {
         /**
-          * The value of the editor, expected to be serialised HTML
+          * The type of content that the editor should handle and emit, defaults to `markdown`  Assumed to be set only once, so not reactive to changes
+         */
+        "contentType": 'markdown' | 'html';
+        /**
+          * The value of the editor, expected to be markdown
          */
         "value": string;
     }
@@ -2482,11 +2486,17 @@ export namespace Components {
      * @exampleComponent limel-example-text-editor-basic
      * @exampleComponent limel-example-text-editor-as-form-component
      * @exampleComponent limel-example-text-editor-composite
+     * @exampleComponent limel-example-text-editor-with-markdown
+     * @exampleComponent limel-example-text-editor-with-html
      * @exampleComponent limel-example-text-editor-height
      * @beta 
      * @private 
      */
     interface LimelTextEditor {
+        /**
+          * The type of content that the editor should handle and emit, defaults to `markdown`  Assumed to be set only once, so not reactive to changes
+         */
+        "contentType": 'markdown' | 'html';
         /**
           * Set to `true` to disable the field. Use `disabled` to indicate that the field can normally be interacted with, but is currently disabled. This tells the user that if certain requirements are met, the field may become enabled again.
          */
@@ -2512,7 +2522,7 @@ export namespace Components {
          */
         "readonly"?: boolean;
         /**
-          * Description of the text inside the editor as serialised HTML
+          * Description of the text inside the editor as markdown
          */
         "value": string;
     }
@@ -4027,6 +4037,8 @@ declare global {
      * @exampleComponent limel-example-text-editor-basic
      * @exampleComponent limel-example-text-editor-as-form-component
      * @exampleComponent limel-example-text-editor-composite
+     * @exampleComponent limel-example-text-editor-with-markdown
+     * @exampleComponent limel-example-text-editor-with-html
      * @exampleComponent limel-example-text-editor-height
      * @beta 
      * @private 
@@ -6327,12 +6339,16 @@ declare namespace LocalJSX {
      * @private 
      */
     interface LimelProsemirrorAdapter {
+        /**
+          * The type of content that the editor should handle and emit, defaults to `markdown`  Assumed to be set only once, so not reactive to changes
+         */
+        "contentType"?: 'markdown' | 'html';
         /**
           * Dispatched when a change is made to the editor
          */
         "onChange"?: (event: LimelProsemirrorAdapterCustomEvent<string>) => void;
         /**
-          * The value of the editor, expected to be serialised HTML
+          * The value of the editor, expected to be markdown
          */
         "value"?: string;
     }
@@ -6807,11 +6823,17 @@ declare namespace LocalJSX {
      * @exampleComponent limel-example-text-editor-basic
      * @exampleComponent limel-example-text-editor-as-form-component
      * @exampleComponent limel-example-text-editor-composite
+     * @exampleComponent limel-example-text-editor-with-markdown
+     * @exampleComponent limel-example-text-editor-with-html
      * @exampleComponent limel-example-text-editor-height
      * @beta 
      * @private 
      */
     interface LimelTextEditor {
+        /**
+          * The type of content that the editor should handle and emit, defaults to `markdown`  Assumed to be set only once, so not reactive to changes
+         */
+        "contentType"?: 'markdown' | 'html';
         /**
           * Set to `true` to disable the field. Use `disabled` to indicate that the field can normally be interacted with, but is currently disabled. This tells the user that if certain requirements are met, the field may become enabled again.
          */
@@ -6841,7 +6863,7 @@ declare namespace LocalJSX {
          */
         "readonly"?: boolean;
         /**
-          * Description of the text inside the editor as serialised HTML
+          * Description of the text inside the editor as markdown
          */
         "value"?: string;
     }
@@ -7952,6 +7974,8 @@ declare module "@stencil/core" {
              * @exampleComponent limel-example-text-editor-basic
              * @exampleComponent limel-example-text-editor-as-form-component
              * @exampleComponent limel-example-text-editor-composite
+             * @exampleComponent limel-example-text-editor-with-markdown
+             * @exampleComponent limel-example-text-editor-with-html
              * @exampleComponent limel-example-text-editor-height
              * @beta 
              * @private 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "37.27.0",
+  "version": "37.28.1",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -84,6 +84,7 @@
     "parse-css-color": "^0.2.1",
     "prettier": "^3.2.5",
     "prosemirror-example-setup": "^1.2.2",
+    "prosemirror-markdown": "^1.12.0",
     "prosemirror-schema-basic": "^1.2.2",
     "puppeteer": "^19.11.1",
     "react": "^18.2.0",

package/dist/lime-elements/p-48d4564a.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["textEditorCss","TextEditor","this","handleChange","event","stopPropagation","change","emit","detail","render","h","class","renderLabel","renderEditor","readonly","value","onChange","label"],"sources":["./src/components/text-editor/text-editor.scss?tag=limel-text-editor&encapsulation=shadow","./src/components/text-editor/text-editor.tsx"],"sourcesContent":["@use '../../style/internal/shared_input-select-picker';\n@use '../../../src/style/mixins.scss';\n\n@include shared_input-select-picker.lime-empty-value-for-readonly;\n@include shared_input-select-picker.lime-looks-like-input-value;\n\n* {\n    box-sizing: border-box;\n}\n\n:host(limel-text-editor) {\n    --limel-text-editor-padding: 0.75rem;\n    position: relative;\n    isolation: isolate;\n    display: flex;\n    flex-direction: column;\n\n    width: 100%;\n    min-width: 5rem;\n    min-height: 4rem;\n    height: 100%;\n    max-height: 100%;\n}\n\n:host(limel-text-editor:not([readonly])) {\n    --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color};\n    --limel-text-editor-background-color: #{shared_input-select-picker.$background-color-normal};\n    --limel-text-editor-label-color: #{shared_input-select-picker.$label-color};\n}\n\n:host(limel-text-editor[readonly]) {\n    --limel-text-editor-outline-color: transparent;\n    min-height: shared_input-select-picker.$height-of-mdc-text-field;\n\n    limel-markdown {\n        display: block;\n        padding: var(--limel-text-editor-padding);\n    }\n}\n\n.notched-outline {\n    position: absolute;\n    inset: 0;\n\n    display: flex;\n    background-color: var(--limel-text-editor-background-color);\n}\n\n.leading-outline,\n.notch,\n.trailing-outline {\n    border-width: 1px;\n    border-style: solid;\n    border-color: var(--limel-text-editor-outline-color);\n}\n\n.leading-outline {\n    flex-shrink: 0;\n    width: 0.75rem;\n    border-right-width: 0;\n    border-top-left-radius: 0.25rem;\n    border-bottom-left-radius: 0.25rem;\n}\n\n.notch {\n    flex-shrink: 0;\n\n    position: relative;\n    z-index: 2;\n\n    border-top-width: 0;\n    border-right-width: 0;\n    border-left-width: 0;\n\n    max-width: calc(100% - 1.5rem);\n}\n\n.trailing-outline {\n    flex-grow: 1;\n    border-left-width: 0;\n    border-top-right-radius: 0.25rem;\n    border-bottom-right-radius: 0.25rem;\n}\n\nlabel {\n    transform: translateY(-50%);\n\n    @include mixins.truncate-text;\n    display: block;\n    padding: 0 0.25rem;\n\n    color: var(--limel-text-editor-label-color);\n    font-size: 0.65rem; // `10.4px` similar to MDC's floating label\n    letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);\n}\n\nlimel-prosemirror-adapter {\n    flex-grow: 1;\n\n    min-width: 0;\n    min-height: 0;\n    height: 100%;\n    overflow: hidden auto;\n}\n","import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\n/**\n * A rich text editor that offers a rich text editing experience with markdown support,\n * in the sense that you can easily type markdown syntax and see the rendered\n * result as rich text in real-time. For instance, you can type `# Hello, world!`\n * and see it directly turning to a heading 1 (an `<h1>` HTML element).\n *\n * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>\n * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.\n *\n * @exampleComponent limel-example-text-editor-basic\n * @exampleComponent limel-example-text-editor-as-form-component\n * @exampleComponent limel-example-text-editor-composite\n * @exampleComponent limel-example-text-editor-height\n * @beta\n * @private\n */\n@Component({\n    tag: 'limel-text-editor',\n    shadow: true,\n    styleUrl: 'text-editor.scss',\n})\nexport class TextEditor implements FormComponent<string> {\n    /**\n     * Set to `true` to disable the field.\n     * Use `disabled` to indicate that the field can normally be interacted\n     * with, but is currently disabled. This tells the user that if certain\n     * requirements are met, the field may become enabled again.\n     */\n    @Prop({ reflect: true })\n    public disabled?: boolean;\n\n    /**\n     * Set to `true` to make the component read-only.\n     * Use `readonly` when the field is only there to present the data it holds,\n     * and will not become possible for the current user to edit.\n     * :::note\n     * Consider that it might be better to use `limel-markdown`\n     * instead of `limel-text-editor` when the goal is visualizing data.\n     * :::\n     */\n    @Prop({ reflect: true })\n    public readonly?: boolean;\n\n    /**\n     * Optional helper text to display below the input field when it has focus\n     */\n    @Prop({ reflect: true })\n    public helperText?: string;\n\n    /**\n     * The placeholder text shown inside the input field,\n     * when the field is empty.\n     */\n    @Prop({ reflect: true })\n    public placeholder?: string;\n\n    /**\n     * The label of the editor\n     */\n    @Prop({ reflect: true })\n    public label?: string;\n\n    /**\n     * Set to `true` to indicate that the current value of the editor is\n     * invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid?: boolean;\n\n    /**\n     * Description of the text inside the editor as serialised HTML\n     */\n    @Prop({ reflect: true })\n    public value: string;\n\n    /**\n     * Dispatched when a change is made to the editor\n     */\n    @Event()\n    public change: EventEmitter<string>;\n\n    public render() {\n        return [\n            <span class=\"notched-outline\">\n                <span class=\"leading-outline\" />\n                {this.renderLabel()}\n                <span class=\"trailing-outline\" />\n            </span>,\n            this.renderEditor(),\n        ];\n    }\n\n    private renderEditor() {\n        if (this.readonly && !this.value) {\n            return (\n                <span class=\"lime-empty-value-for-readonly lime-looks-like-input-value\">\n                    –\n                </span>\n            );\n        }\n\n        if (this.readonly) {\n            return <limel-markdown value={this.value} />;\n        }\n\n        return (\n            <limel-prosemirror-adapter\n                onChange={this.handleChange}\n                value={this.value}\n            />\n        );\n    }\n\n    private renderLabel() {\n        if (!this.label) {\n            return;\n        }\n\n        return (\n            <span class=\"notch\">\n                <label>{this.label}</label>\n            </span>\n        );\n    }\n\n    private handleChange = () => (event: CustomEvent<string>) => {\n        event.stopPropagation();\n        this.change.emit(event.detail);\n    };\n}\n"],"mappings":"kDAAA,MAAMA,EAAgB,upG,MCuBTC,EAAU,M,wDAwGXC,KAAAC,aAAe,IAAOC,IAC1BA,EAAMC,kBACNH,KAAKI,OAAOC,KAAKH,EAAMI,OAAO,E,sKA9C3BC,SACH,MAAO,CACHC,EAAA,QAAMC,MAAM,mBACRD,EAAA,QAAMC,MAAM,oBACXT,KAAKU,cACNF,EAAA,QAAMC,MAAM,sBAEhBT,KAAKW,e,CAILA,eACJ,GAAIX,KAAKY,WAAaZ,KAAKa,MAAO,CAC9B,OACIL,EAAA,QAAMC,MAAM,6DAA2D,I,CAM/E,GAAIT,KAAKY,SAAU,CACf,OAAOJ,EAAA,kBAAgBK,MAAOb,KAAKa,O,CAGvC,OACIL,EAAA,6BACIM,SAAUd,KAAKC,aACfY,MAAOb,KAAKa,O,CAKhBH,cACJ,IAAKV,KAAKe,MAAO,CACb,M,CAGJ,OACIP,EAAA,QAAMC,MAAM,SACRD,EAAA,aAAQR,KAAKe,O"}