@limetech/lime-elements 37.21.0 → 37.23.0

package/dist/lime-elements/p-caf959fe.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as i,h as t}from"./p-443111b3.js";const d=":host(limel-text-editor){--limel-text-editor-padding:0.5rem 1rem}limel-markdown{display:block;padding:var(--limel-text-editor-padding)}";const r=class{constructor(t){e(this,t);this.change=i(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 this.renderEditor()}renderEditor(){if(this.readonly){return t("limel-markdown",{value:this.value})}return t("limel-prosemirror-adapter",{onChange:this.handleChange,value:this.value})}};r.style=d;export{r as limel_text_editor};
+//# sourceMappingURL=p-caf959fe.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["textEditorCss","TextEditor","this","handleChange","event","stopPropagation","change","emit","detail","render","renderEditor","readonly","h","value","onChange"],"sources":["./src/components/text-editor/text-editor.scss?tag=limel-text-editor&encapsulation=shadow","./src/components/text-editor/text-editor.tsx"],"sourcesContent":[":host(limel-text-editor) {\n    --limel-text-editor-padding: 0.5rem 1rem;\n}\n\nlimel-markdown {\n    display: block;\n    padding: var(--limel-text-editor-padding);\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 * @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 this.renderEditor();\n    }\n\n    private renderEditor() {\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 handleChange = () => (event: CustomEvent<string>) => {\n        event.stopPropagation();\n        this.change.emit(event.detail);\n    };\n}\n"],"mappings":"kDAAA,MAAMA,EAAgB,0I,MCsBTC,EAAU,M,wDA6EXC,KAAAC,aAAe,IAAOC,IAC1BA,EAAMC,kBACNH,KAAKI,OAAOC,KAAKH,EAAMI,OAAO,E,sKAnB3BC,SACH,OAAOP,KAAKQ,c,CAGRA,eACJ,GAAIR,KAAKS,SAAU,CACf,OAAOC,EAAA,kBAAgBC,MAAOX,KAAKW,O,CAGvC,OACID,EAAA,6BACIE,SAAUZ,KAAKC,aACfU,MAAOX,KAAKW,O"}

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

@@ -0,0 +1,26 @@
+/**
+ * The ProseMirror adapter offers a rich text editing experience with markdown support.
+ * [Read more...](https://prosemirror.net/)
+ *
+ * @exampleComponent limel-example-prosemirror-adapter-basic
+ * @exampleComponent limel-example-prosemirror-adapter-with-custom-menu
+ * @beta
+ * @private
+ */
+export declare class ProsemirrorAdapter {
+  /**
+   * The value of the editor, expected to be serialised HTML
+   */
+  value: string;
+  private host;
+  private view;
+  /**
+   * Dispatched when a change is made to the editor
+   */
+  private change;
+  componentWillLoad(): void;
+  render(): any;
+  componentDidLoad(): void;
+  private getHTML;
+}
+//# sourceMappingURL=prosemirror-adapter.d.ts.map

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

@@ -1,16 +1,21 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { FormComponent } from '../form/form.types';
 /**
- * A rich text editor that allows the user to input and format text
- * The `limel-text-editor` can be used as a form field
+ * A rich text editor that offers a rich text editing experience with markdown support,
+ * in the sense that you can easily type markdown syntax and see the rendered
+ * result as rich text in real-time. For instance, you can type `# Hello, world!`
+ * and see it directly turning to a heading 1 (an `<h1>` HTML element).
+ *
+ * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>
+ * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.
  *
  * @exampleComponent limel-example-text-editor-basic
+ * @exampleComponent limel-example-text-editor-as-form-component
+ * @exampleComponent limel-example-text-editor-composite
  * @beta
  * @private
  */
-export declare class TextEditor implements FormComponent<{
-  html: string;
-}> {
+export declare class TextEditor implements FormComponent<string> {
   /**
    * Set to `true` to disable the field.
    * Use `disabled` to indicate that the field can normally be interacted
@@ -47,18 +52,15 @@ export declare class TextEditor implements FormComponent<{
    */
   invalid?: boolean;
   /**
-   * Description of the text inside the editor
+   * Description of the text inside the editor as serialised HTML
    */
-  value: {
-    html: string;
-  };
+  value: string;
   /**
    * Dispatched when a change is made to the editor
    */
-  change: EventEmitter<{
-    html: string;
-  }>;
+  change: EventEmitter<string>;
   render(): any;
+  private renderEditor;
   private handleChange;
 }
 //# sourceMappingURL=text-editor.d.ts.map

package/dist/types/components.d.ts

@@ -2054,21 +2054,18 @@ export namespace Components {
         "readonly": boolean;
     }
     /**
-     * The ProseMirror adapter offers a rich text editing experience with markdown support,
-     * in the sense that you can easily type markdown syntax and see the rendered
-     * result as rich text in real-time. For instance, you can type `# Hello, world!`
-     * and see it directly turning to a heading 1 (an `<h1>` HTML element).
-     * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>
-     * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.
+     * The ProseMirror adapter offers a rich text editing experience with markdown support.
+     * [Read more...](https://prosemirror.net/)
      * @exampleComponent limel-example-prosemirror-adapter-basic
+     * @exampleComponent limel-example-prosemirror-adapter-with-custom-menu
      * @beta 
      * @private 
      */
     interface LimelProsemirrorAdapter {
         /**
-          * The value of the editor
+          * The value of the editor, expected to be serialised HTML
          */
-        "value": { html: string };
+        "value": string;
     }
     /**
      * @exampleComponent limel-example-select
@@ -2475,9 +2472,15 @@ export namespace Components {
         "totalRows": number;
     }
     /**
-     * A rich text editor that allows the user to input and format text
-     * The `limel-text-editor` can be used as a form field
+     * A rich text editor that offers a rich text editing experience with markdown support,
+     * in the sense that you can easily type markdown syntax and see the rendered
+     * result as rich text in real-time. For instance, you can type `# Hello, world!`
+     * and see it directly turning to a heading 1 (an `<h1>` HTML element).
+     * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>
+     * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.
      * @exampleComponent limel-example-text-editor-basic
+     * @exampleComponent limel-example-text-editor-as-form-component
+     * @exampleComponent limel-example-text-editor-composite
      * @beta 
      * @private 
      */
@@ -2507,9 +2510,9 @@ export namespace Components {
          */
         "readonly"?: boolean;
         /**
-          * Description of the text inside the editor
+          * Description of the text inside the editor as serialised HTML
          */
-        "value": { html: string };
+        "value": string;
     }
     /**
      * A tooltip can be used to display a descriptive text for any element.
@@ -3803,13 +3806,10 @@ declare global {
         new (): HTMLLimelProgressFlowItemElement;
     };
     /**
-     * The ProseMirror adapter offers a rich text editing experience with markdown support,
-     * in the sense that you can easily type markdown syntax and see the rendered
-     * result as rich text in real-time. For instance, you can type `# Hello, world!`
-     * and see it directly turning to a heading 1 (an `<h1>` HTML element).
-     * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>
-     * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.
+     * The ProseMirror adapter offers a rich text editing experience with markdown support.
+     * [Read more...](https://prosemirror.net/)
      * @exampleComponent limel-example-prosemirror-adapter-basic
+     * @exampleComponent limel-example-prosemirror-adapter-with-custom-menu
      * @beta 
      * @private 
      */
@@ -4015,9 +4015,15 @@ declare global {
         new (): HTMLLimelTableElement;
     };
     /**
-     * A rich text editor that allows the user to input and format text
-     * The `limel-text-editor` can be used as a form field
+     * A rich text editor that offers a rich text editing experience with markdown support,
+     * in the sense that you can easily type markdown syntax and see the rendered
+     * result as rich text in real-time. For instance, you can type `# Hello, world!`
+     * and see it directly turning to a heading 1 (an `<h1>` HTML element).
+     * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>
+     * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.
      * @exampleComponent limel-example-text-editor-basic
+     * @exampleComponent limel-example-text-editor-as-form-component
+     * @exampleComponent limel-example-text-editor-composite
      * @beta 
      * @private 
      */
@@ -6309,13 +6315,10 @@ declare namespace LocalJSX {
         "readonly"?: boolean;
     }
     /**
-     * The ProseMirror adapter offers a rich text editing experience with markdown support,
-     * in the sense that you can easily type markdown syntax and see the rendered
-     * result as rich text in real-time. For instance, you can type `# Hello, world!`
-     * and see it directly turning to a heading 1 (an `<h1>` HTML element).
-     * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>
-     * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.
+     * The ProseMirror adapter offers a rich text editing experience with markdown support.
+     * [Read more...](https://prosemirror.net/)
      * @exampleComponent limel-example-prosemirror-adapter-basic
+     * @exampleComponent limel-example-prosemirror-adapter-with-custom-menu
      * @beta 
      * @private 
      */
@@ -6323,11 +6326,11 @@ declare namespace LocalJSX {
         /**
           * Dispatched when a change is made to the editor
          */
-        "onChange"?: (event: LimelProsemirrorAdapterCustomEvent<{ html: string }>) => void;
+        "onChange"?: (event: LimelProsemirrorAdapterCustomEvent<string>) => void;
         /**
-          * The value of the editor
+          * The value of the editor, expected to be serialised HTML
          */
-        "value"?: { html: string };
+        "value"?: string;
     }
     /**
      * @exampleComponent limel-example-select
@@ -6790,9 +6793,15 @@ declare namespace LocalJSX {
         "totalRows"?: number;
     }
     /**
-     * A rich text editor that allows the user to input and format text
-     * The `limel-text-editor` can be used as a form field
+     * A rich text editor that offers a rich text editing experience with markdown support,
+     * in the sense that you can easily type markdown syntax and see the rendered
+     * result as rich text in real-time. For instance, you can type `# Hello, world!`
+     * and see it directly turning to a heading 1 (an `<h1>` HTML element).
+     * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>
+     * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.
      * @exampleComponent limel-example-text-editor-basic
+     * @exampleComponent limel-example-text-editor-as-form-component
+     * @exampleComponent limel-example-text-editor-composite
      * @beta 
      * @private 
      */
@@ -6816,7 +6825,7 @@ declare namespace LocalJSX {
         /**
           * Dispatched when a change is made to the editor
          */
-        "onChange"?: (event: LimelTextEditorCustomEvent<{ html: string }>) => void;
+        "onChange"?: (event: LimelTextEditorCustomEvent<string>) => void;
         /**
           * The placeholder text shown inside the input field, when the field is empty.
          */
@@ -6826,9 +6835,9 @@ declare namespace LocalJSX {
          */
         "readonly"?: boolean;
         /**
-          * Description of the text inside the editor
+          * Description of the text inside the editor as serialised HTML
          */
-        "value"?: { html: string };
+        "value"?: string;
     }
     /**
      * A tooltip can be used to display a descriptive text for any element.
@@ -7773,13 +7782,10 @@ declare module "@stencil/core" {
              */
             "limel-progress-flow-item": LocalJSX.LimelProgressFlowItem & JSXBase.HTMLAttributes<HTMLLimelProgressFlowItemElement>;
             /**
-             * The ProseMirror adapter offers a rich text editing experience with markdown support,
-             * in the sense that you can easily type markdown syntax and see the rendered
-             * result as rich text in real-time. For instance, you can type `# Hello, world!`
-             * and see it directly turning to a heading 1 (an `<h1>` HTML element).
-             * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>
-             * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.
+             * The ProseMirror adapter offers a rich text editing experience with markdown support.
+             * [Read more...](https://prosemirror.net/)
              * @exampleComponent limel-example-prosemirror-adapter-basic
+             * @exampleComponent limel-example-prosemirror-adapter-with-custom-menu
              * @beta 
              * @private 
              */
@@ -7930,9 +7936,15 @@ declare module "@stencil/core" {
              */
             "limel-table": LocalJSX.LimelTable & JSXBase.HTMLAttributes<HTMLLimelTableElement>;
             /**
-             * A rich text editor that allows the user to input and format text
-             * The `limel-text-editor` can be used as a form field
+             * A rich text editor that offers a rich text editing experience with markdown support,
+             * in the sense that you can easily type markdown syntax and see the rendered
+             * result as rich text in real-time. For instance, you can type `# Hello, world!`
+             * and see it directly turning to a heading 1 (an `<h1>` HTML element).
+             * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>
+             * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.
              * @exampleComponent limel-example-text-editor-basic
+             * @exampleComponent limel-example-text-editor-as-form-component
+             * @exampleComponent limel-example-text-editor-composite
              * @beta 
              * @private 
              */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "37.21.0",
+  "version": "37.23.0",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",

package/dist/collection/components/text-editor/menu/full-menu.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"full-menu.js","sourceRoot":"","sources":["../../../../src/components/text-editor/menu/full-menu.ts"],"names":[],"mappings":"AACA,OAAO,EAAe,QAAQ,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,MAAc,EAAmB,EAAE;EAC7D,MAAM,SAAS,GAAG,cAAc,CAAC,MAAM,CAQtC,CAAC;EACF,MAAM,EAAE,UAAU,EAAE,oBAAoB,EAAE,GAAG,SAAS,CAAC;EACvD,MAAM,QAAQ,GAAG,UAAU,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;EAChD,MAAM,iBAAiB,GAAG,IAAI,QAAQ,iCAC/B,oBAAoB,CAAC,IAAI,KAC5B,KAAK,EAAE,IAAI,EACX,KAAK,EAAE,IAAI,IACb,CAAC;EACH,MAAM,cAAc,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;EAC7C,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;EAEpD,OAAO;IACH,UAAU,CAAC,CAAC,CAAC;IACb,CAAC,iBAAiB,CAAC;IACnB,GAAG,QAAQ;IACX,cAAc;IACd,SAAS;GACZ,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,CACf,QAA+C,EAChC,EAAE;EACjB,MAAM,eAAe,GAAa,IAAI,QAAQ,CACzC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAyC,CAAC,OAAO,EACpE;IACI,KAAK,EAAE,GAAG;GACb,CACJ,CAAC;EAEF,OAAO,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;AAC3E,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,SAA0B,EAAiB,EAAE;EAC/D,4CAA4C;EAC5C,OAAO,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AACzC,CAAC,CAAC","sourcesContent":["import { Schema } from 'prosemirror-model';\nimport { MenuElement, Dropdown, MenuItem } from 'prosemirror-menu';\nimport { buildMenuItems } from 'prosemirror-example-setup';\n\n/**\n * Creates the full menu for the text editor\n * based on the default menu already in prosemirror-example-setup\n * @param schema - the schema to use for the menu\n *\n * @returns the default menu for the text editor\n */\nexport const buildFullMenu = (schema: Schema): MenuElement[][] => {\n    const menuItems = buildMenuItems(schema) as unknown as {\n        blockMenu: MenuElement[][];\n        fullMenu: MenuElement[][];\n        inlineMenu: MenuElement[][];\n        insertHorizontalRule: MenuItem;\n        typeMenu: Dropdown & {\n            content: MenuElement[];\n        };\n    };\n    const { inlineMenu, insertHorizontalRule } = menuItems;\n    const typeMenu = getNewMenu(menuItems.typeMenu);\n    const newHorizontalRule = new MenuItem({\n        ...insertHorizontalRule.spec,\n        title: 'hr',\n        label: 'hr',\n    });\n    const historyButtons = menuItems.fullMenu[2];\n    const blockMenu = getBlockMenu(menuItems.blockMenu);\n\n    return [\n        inlineMenu[0],\n        [newHorizontalRule],\n        ...typeMenu,\n        historyButtons,\n        blockMenu,\n    ];\n};\n\nconst getNewMenu = (\n    typeMenu: Dropdown & { content: MenuElement[] },\n): MenuElement[][] => {\n    const headingDropdown: Dropdown = new Dropdown(\n        (typeMenu.content[2] as Partial<{ content: MenuElement[] }>).content,\n        {\n            label: 'H',\n        },\n    );\n\n    return [[typeMenu.content[0], typeMenu.content[1]], [headingDropdown]];\n};\n\nconst getBlockMenu = (blockMenu: MenuElement[][]): MenuElement[] => {\n    // eslint-disable-next-line no-magic-numbers\n    return [...blockMenu[0].slice(0, 5)];\n};\n"]}

package/dist/collection/components/text-editor/menu/menu-filter.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"menu-filter.js","sourceRoot":"","sources":["../../../../src/components/text-editor/menu/menu-filter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAyB,MAAM,kBAAkB,CAAC;AAGnE;;;;;GAKG;AACH,MAAM,QAAQ,GAAiC;EAC3C,MAAM,EAAE,qBAAqB;EAC7B,QAAQ,EAAE,iBAAiB;EAC3B,IAAI,EAAE,kBAAkB;EACxB,IAAI,EAAE,oBAAoB;EAC1B,iBAAiB,EAAE,IAAI;EACvB,SAAS,EAAE,qBAAqB;EAChC,YAAY,EAAE,sBAAsB;EACpC,WAAW,EAAE,qBAAqB;EAClC,WAAW,EAAE,qBAAqB;EAClC,WAAW,EAAE,qBAAqB;EAClC,WAAW,EAAE,qBAAqB;EAClC,WAAW,EAAE,qBAAqB;EAClC,WAAW,EAAE,qBAAqB;EAClC,IAAI,EAAE,kBAAkB;EACxB,IAAI,EAAE,yBAAyB;EAC/B,aAAa,EAAE,qBAAqB;EACpC,cAAc,EAAE,sBAAsB;EACtC,aAAa,EAAE,qBAAqB;EACpC,YAAY,EAAE,uBAAuB;EACrC,UAAU,EAAE,6BAA6B;CAC5C,CAAC;AAEF,MAAM,YAAY,GAAmB;EACjC,QAAQ;EACR,UAAU;EACV,MAAM;EACN,WAAW;EACX,WAAW;EACX,WAAW;EACX,WAAW;EACX,WAAW;EACX,WAAW;EACX,aAAa;EACb,aAAa;EACb,cAAc;CACjB,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAC3B,IAAmB,EACnB,KAAuC,EAC1B,EAAE;EACf,IAAI,SAAS,GAAa,YAAY,CAAC,GAAG,CACtC,CAAC,IAAkB,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,CACzC,CAAC;EAEF,IAAI,KAAK,KAAK,SAAS,EAAE;IACrB,SAAS,GAAG,SAAS,CAAC,MAAM,CACxB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAkB,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CACpD,CAAC;GACL;EAED,OAAO,IAAI;KACN,MAAM,CAAC,CAAC,IAAiB,EAAE,EAAE;IAC1B,IAAI,UAAU,CAAC,IAAI,CAAC,EAAE;MAClB,OAAO,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,QAAQ,CACpC,IAAI,CAAC,IAAI,CAAC,KAAe,CAC5B,CAAC;KACL;SAAM,IAAI,UAAU,CAAC,IAAI,CAAC,EAAE;MACzB,OAAO,IAAI,CAAC;KACf;IAED,OAAO,KAAK,CAAC;EACjB,CAAC,CAAC;KACD,MAAM,CAAC,OAAO,CAAC;KACf,GAAG,CAAC,sBAAsB,CAAC,KAAK,CAAC,CAAC,CAAC;AAC5C,CAAC,CAAC;AAEF,MAAM,sBAAsB,GACxB,CAAC,KAA2B,EAAE,EAAE,CAAC,CAAC,IAAiB,EAAE,EAAE;EACnD,IAAI,UAAU,CAAC,IAAI,CAAC,EAAE;IAClB,OAAO,IAAI,QAAQ,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,EAAE;MACtD,KAAK,EAAE,IAAI,CAAC,KAAK;KACpB,CAAC,CAAC;GACN;EAED,OAAO,IAAI,CAAC;AAChB,CAAC,CAAC;AAEN,MAAM,UAAU,GAAG,CAAC,IAAS,EAAoB,EAAE;EAC/C,OAAO,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC;AACnC,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,CACf,IAAS,EACgD,EAAE;EAC3D,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC;AACtC,CAAC,CAAC","sourcesContent":["import { Dropdown, MenuElement, MenuItem } from 'prosemirror-menu';\nimport { EditorButton, EditorPluginButton } from './types';\n\n/**\n * The available items for the editor toolbar\n * The values must match the titles of the menuItem\n *\n * {@link MenuItem.spec}\n */\nconst allItems: Record<EditorButton, string> = {\n    strong: 'Toggle strong style',\n    emphasis: 'Toggle emphasis',\n    code: 'Toggle code font',\n    link: 'Add or remove link',\n    'horizontal rule': 'hr',\n    paragraph: 'Change to paragraph',\n    'code block': 'Change to code block',\n    'heading 1': 'Change to heading 1',\n    'heading 2': 'Change to heading 2',\n    'heading 3': 'Change to heading 3',\n    'heading 4': 'Change to heading 4',\n    'heading 5': 'Change to heading 5',\n    'heading 6': 'Change to heading 6',\n    undo: 'Undo last change',\n    redo: 'Redo last undone change',\n    'bullet list': 'Wrap in bullet list',\n    'ordered list': 'Wrap in ordered list',\n    'block quote': 'Wrap in block quote',\n    'join above': 'Join with above block',\n    'lift out': 'Lift out of enclosing block',\n};\n\nconst defaultItems: EditorButton[] = [\n    'strong',\n    'emphasis',\n    'link',\n    'heading 1',\n    'heading 2',\n    'heading 3',\n    'heading 4',\n    'heading 5',\n    'heading 6',\n    'block quote',\n    'bullet list',\n    'ordered list',\n];\n\n/**\n * Filters the full menu recursively based on the items provided\n *\n * @param menu - The menu to filter\n * @param items - The menu items to display. If undefined, all items will be displayed\n * @returns The filtered menu\n */\nexport const getFilteredMenu = (\n    menu: MenuElement[],\n    items: EditorPluginButton[] | undefined,\n): MenuElement[] => {\n    let menuItems: string[] = defaultItems.map(\n        (item: EditorButton) => allItems[item],\n    );\n\n    if (items !== undefined) {\n        menuItems = menuItems.concat(\n            items.map((item: EditorButton) => allItems[item]),\n        );\n    }\n\n    return menu\n        .filter((item: MenuElement) => {\n            if (isMenuItem(item)) {\n                return Object.values(menuItems).includes(\n                    item.spec.title as string,\n                );\n            } else if (isDropdown(item)) {\n                return true;\n            }\n\n            return false;\n        })\n        .filter(Boolean)\n        .map(createFilteredDropdown(items));\n};\n\nconst createFilteredDropdown =\n    (items: EditorPluginButton[]) => (item: MenuElement) => {\n        if (isDropdown(item)) {\n            return new Dropdown(getFilteredMenu(item.content, items), {\n                label: item.label,\n            });\n        }\n\n        return item;\n    };\n\nconst isMenuItem = (item: any): item is MenuItem => {\n    return item.spec !== undefined;\n};\n\nconst isDropdown = (\n    item: any,\n): item is Dropdown & { content: MenuItem[]; label: string } => {\n    return item.content !== undefined;\n};\n"]}

package/dist/collection/components/text-editor/menu/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/text-editor/menu/types.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * The `EditorButton` type is used to specify the type of buttons that can be used in the editor toolbar.\n * Each string represents a different button that can be added to the toolbar.\n *\n * The following buttons are available:\n * 'strong' - Button for making text bold.\n * 'emphasis' - Button for italicizing text.\n * 'link' - Button for adding a hyperlink.\n * 'heading 1 - Button for creating a level 1 heading.\n * 'heading 2 - Button for creating a level 2 heading.\n * 'heading 3 - Button for creating a level 3 heading.\n * 'heading 4 - Button for creating a level 4 heading.\n * 'heading 5 - Button for creating a level 5 heading.\n * 'heading 6 - Button for creating a level 6 heading.\n * 'block quote' - Button for creating a block quote.\n *\n * @beta\n */\nexport type EditorButton =\n    | 'strong'\n    | 'emphasis'\n    | 'link'\n    | 'heading 1'\n    | 'heading 2'\n    | 'heading 3'\n    | 'heading 4'\n    | 'heading 5'\n    | 'heading 6'\n    | 'block quote'\n    | 'bullet list'\n    | 'ordered list'\n    | EditorPluginButton;\n\n/**\n * The `EditorPluginButton` type is used to specify the type of buttons that can be added to the editor toolbar.\n *\n * 'code' - Button for marking inline code.\n * 'horizontal rule' - Button for inserting a horizontal rule.\n * 'code block' - Button for creating a block of code.\n * 'paragraph'- Button for creating a new paragraph.\n * 'join above' - Button for joining the current block with the one above it.\n * 'lift out' - Button for lifting the current block out of its parent block.\n * 'undo' - Button for undoing the last action.\n * 'redo' - Button for redoing the last undone action.\n *\n * @beta\n */\nexport type EditorPluginButton =\n    | 'code'\n    | 'horizontal rule'\n    | 'code block'\n    | 'paragraph'\n    | 'join above'\n    | 'lift out'\n    | 'undo'\n    | 'redo';\n"]}

package/dist/collection/components/text-editor/prosemirror-adapter.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"prosemirror-adapter.js","sourceRoot":"","sources":["../../../src/components/text-editor/prosemirror-adapter.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,OAAO,EACP,KAAK,EAEL,IAAI,EACJ,KAAK,EACL,CAAC,GACJ,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEzD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD;;;;;;;;;;;;GAYG;AAMH,MAAM,OAAO,kBAAkB;;IA6DnB,YAAO,GAAG,GAAW,EAAE;MAC3B,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,WAAW,KAAK,EAAE,EAAE;QAClC,OAAO,EAAE,CAAC;OACb;WAAM;QACH,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC;OAClC;IACL,CAAC,CAAC;;;;EAhDK,iBAAiB,KAAI,CAAC;EAEtB,MAAM;IACT,OAAO,WAAK,EAAE,EAAC,QAAQ,GAAG,CAAC;EAC/B,CAAC;EAEM,gBAAgB;IACnB,MAAM,QAAQ,GAAG,IAAI,MAAM,CAAC;MACxB,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,kBAAkB,EAAE,OAAO,CAAC;MACnE,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK;KAC3B,CAAC,CAAC;IAEH,MAAM,IAAI,GAAoB,aAAa,CAAC,QAAQ,CAAC;OAChD,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,eAAe,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;OACjD,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAErC,IAAI,CAAC,IAAI,GAAG,IAAI,UAAU,CACtB,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,CAAC,EAC7C;MACI,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC;QACtB,GAAG,EAAE,SAAS,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,KAAK,CACrC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,CAAC,CAChD;QACD,OAAO,EAAE,YAAY,CAAC;UAClB,MAAM,EAAE,QAAQ;UAChB,WAAW,EAAE,IAAoB;SACpC,CAAC;OACL,CAAC;MACF,mBAAmB,EAAE,CAAC,WAAW,EAAE,EAAE;QACjC,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QACpD,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QAEhC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;MAC/C,CAAC;KACJ,CACJ,CAAC;IAEF,IAAI,IAAI,CAAC,KAAK,EAAE;MACZ,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;KAC7C;EACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CASJ","sourcesContent":["import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    Prop,\n    State,\n    h,\n} from '@stencil/core';\nimport { EditorState } from 'prosemirror-state';\nimport { EditorView } from 'prosemirror-view';\nimport { Schema, DOMParser } from 'prosemirror-model';\nimport { schema } from 'prosemirror-schema-basic';\nimport { addListNodes } from 'prosemirror-schema-list';\nimport { exampleSetup } from 'prosemirror-example-setup';\nimport { MenuElement, MenuItem } from 'prosemirror-menu';\nimport { buildFullMenu } from './menu/full-menu';\nimport { getFilteredMenu } from './menu/menu-filter';\n\n/**\n * The ProseMirror adapter 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-prosemirror-adapter-basic\n * @beta\n * @private\n */\n@Component({\n    tag: 'limel-prosemirror-adapter',\n    shadow: true,\n    styleUrl: 'prosemirror-adapter.scss',\n})\nexport class ProsemirrorAdapter {\n    /**\n     * The value of the editor\n     */\n    @Prop()\n    public value: { html: string };\n\n    @Element()\n    private host: HTMLLimelTextEditorElement;\n\n    @State()\n    private view: EditorView;\n\n    /**\n     * Dispatched when a change is made to the editor\n     */\n    @Event()\n    private change: EventEmitter<{ html: string }>;\n\n    public componentWillLoad() {}\n\n    public render() {\n        return <div id=\"editor\" />;\n    }\n\n    public componentDidLoad() {\n        const mySchema = new Schema({\n            nodes: addListNodes(schema.spec.nodes, 'paragraph block*', 'block'),\n            marks: schema.spec.marks,\n        });\n\n        const menu: MenuElement[][] = buildFullMenu(mySchema)\n            .map((items) => getFilteredMenu(items, undefined))\n            .filter((items) => items.length);\n\n        this.view = new EditorView(\n            this.host.shadowRoot.querySelector('#editor'),\n            {\n                state: EditorState.create({\n                    doc: DOMParser.fromSchema(mySchema).parse(\n                        this.host.shadowRoot.querySelector('#editor'),\n                    ),\n                    plugins: exampleSetup({\n                        schema: mySchema,\n                        menuContent: menu as MenuItem[][],\n                    }),\n                }),\n                dispatchTransaction: (transaction) => {\n                    const newState = this.view.state.apply(transaction);\n                    this.view.updateState(newState);\n\n                    this.change.emit({ html: this.getHTML() });\n                },\n            },\n        );\n\n        if (this.value) {\n            this.view.dom.innerHTML = this.value.html;\n        }\n    }\n\n    private getHTML = (): string => {\n        if (this.view.dom.textContent === '') {\n            return '';\n        } else {\n            return this.view.dom.innerHTML;\n        }\n    };\n}\n"]}