@limetech/lime-elements 37.64.3 → 37.65.0

package/dist/types/components/markdown/markdown-parser.d.ts

@@ -1,4 +1,4 @@
-import { CustomElement } from '../../global/shared-types/custom-element.types';
+import { CustomElementDefinition } from '../../global/shared-types/custom-element.types';
 /**
  * Takes a string as input and returns a new string
  * where the text has been converted to HTML.
@@ -22,6 +22,6 @@ export interface markdownToHTMLOptions {
    * Set to `true` to convert all soft line breaks to hard line breaks.
    */
   forceHardLineBreaks?: boolean;
-  whitelist?: CustomElement[];
+  whitelist?: CustomElementDefinition[];
 }
 //# sourceMappingURL=markdown-parser.d.ts.map

package/dist/types/components/markdown/markdown.d.ts

@@ -1,4 +1,4 @@
-import { CustomElement } from '../../global/shared-types/custom-element.types';
+import { CustomElementDefinition } from '../../global/shared-types/custom-element.types';
 /**
  * The Markdown component receives markdown syntax
  * and renders it as HTML.
@@ -30,7 +30,7 @@ export declare class Markdown {
    * Any custom element added here will not be sanitized and thus rendered.
    * @alpha
    */
-  whitelist?: CustomElement[];
+  whitelist?: CustomElementDefinition[];
   textChanged(): Promise<void>;
   componentDidLoad(): Promise<void>;
   private rootElement;

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

@@ -0,0 +1,4 @@
+import { Plugin } from 'prosemirror-state';
+import { TriggerCharacter } from 'src/components/text-editor/text-editor.types';
+export declare const createTriggerPlugin: (triggerCharacters: TriggerCharacter[]) => Plugin<{}>;
+//# sourceMappingURL=factory.d.ts.map

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

@@ -0,0 +1,4 @@
+import { EditorView } from 'prosemirror-view';
+import { TextEditor } from 'src/components/text-editor/text-editor.types';
+export declare const inserterFactory: (view: EditorView) => TextEditor;
+//# sourceMappingURL=inserter.d.ts.map

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

@@ -1,5 +1,6 @@
 import { Languages } from '../../date-picker/date.types';
-import { CustomElement } from '../../../global/shared-types/custom-element.types';
+import { CustomElementDefinition } from '../../../global/shared-types/custom-element.types';
+import { TriggerCharacter } from '../text-editor.types';
 /**
  * The ProseMirror adapter offers a rich text editing experience with markdown support.
  * [Read more...](https://prosemirror.net/)
@@ -30,7 +31,14 @@ export declare class ProsemirrorAdapter {
    * @private
    * @alpha
    */
-  plugins: CustomElement[];
+  customElements: CustomElementDefinition[];
+  /**
+   * set to private to avoid usage while under development
+   *
+   * @private
+   * @alpha
+   */
+  triggerCharacters: TriggerCharacter[];
   private host;
   private portalId;
   private view;

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

@@ -1,7 +1,8 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { FormComponent } from '../form/form.types';
 import { Languages } from '../date-picker/date.types';
-import { CustomElement } from '../../global/shared-types/custom-element.types';
+import { CustomElementDefinition } from '../../global/shared-types/custom-element.types';
+import { TriggerCharacter, TriggerEventDetail } from './text-editor.types';
 /**
  * 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
@@ -20,6 +21,7 @@ import { CustomElement } from '../../global/shared-types/custom-element.types';
  * @exampleComponent limel-example-text-editor-ui
  * @exampleComponent limel-example-text-editor-composite
  * @exampleComponent limel-example-text-editor-custom-element
+ * @exampleComponent limel-example-text-editor-triggers
  * @beta
  */
 export declare class TextEditor implements FormComponent<string> {
@@ -72,12 +74,25 @@ export declare class TextEditor implements FormComponent<string> {
    */
   value: string;
   /**
-   * set to private to avoid usage while under development
+   * A list of custom elements
+   *
+   * Any `CustomElement` that should be used inside the text editor needs
+   * to be defined here.
    *
    * @private
    * @alpha
    */
-  plugins: CustomElement[];
+  customElements: CustomElementDefinition[];
+  /**
+   * A set of trigger characters
+   *
+   * Defining a character here will enable trigger events to be sent if the
+   * character is detected in the editor.
+   *
+   * @private
+   * @alpha
+   */
+  triggers: TriggerCharacter[];
   /**
    * Set to `true` to indicate that the field is required.
    *
@@ -107,6 +122,29 @@ export declare class TextEditor implements FormComponent<string> {
    * Dispatched when a change is made to the editor
    */
   change: EventEmitter<string>;
+  /**
+   * Dispatched if a trigger character is detected.
+   *
+   * @private
+   * @alpha
+   */
+  triggerStart: EventEmitter<TriggerEventDetail>;
+  /**
+   * Dispatched if a trigger session is ended. That is if the selection
+   * goes outside the trigger input or if something is inserted using the
+   * supplied `TextEditor` insert function.
+   *
+   * @private
+   * @alpha
+   */
+  triggerStop: EventEmitter<TriggerEventDetail>;
+  /**
+   * Dispatched if a input is changed during an active trigger.
+   *
+   * @private
+   * @alpha
+   */
+  triggerChange: EventEmitter<TriggerEventDetail>;
   private helperTextId;
   private editorId;
   constructor();

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

@@ -0,0 +1,47 @@
+import { CustomElement } from '../../global/shared-types/custom-element.types';
+/**
+ * @alpha
+ */
+export type TriggerCharacter = '@' | '#' | '$' | '!' | '?' | '&' | '*' | '%' | '+' | '-' | '=' | '/' | '\\' | '^' | '~' | '`' | ':' | ';' | '|' | '.' | ',' | '<' | '>' | '[' | ']' | '{' | '}' | '(' | ')' | "'";
+/**
+ * @alpha
+ */
+export type TextEditorNode = {
+  /**
+   * The top node
+   */
+  node: CustomElement | string;
+  /**
+   * One more more children under the top node
+   */
+  children?: Array<TextEditorNode | string>;
+};
+/**
+ * @alpha
+ */
+export interface TextEditor {
+  /**
+   * Method to insert either text or a node at the cursor position
+   *
+   */
+  insert: (input: TextEditorNode | string) => void;
+}
+/**
+ * @alpha
+ */
+export interface TriggerEventDetail {
+  /**
+   * The trigger that triggered this event
+   *
+   */
+  trigger: TriggerCharacter;
+  /**
+   * The text editor
+   */
+  textEditor: TextEditor;
+  /**
+   * Current value of the trigger
+   */
+  value: string;
+}
+//# sourceMappingURL=text-editor.types.d.ts.map

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

@@ -1,9 +1,9 @@
-import { CustomElement } from '../../global/shared-types/custom-element.types';
+import { CustomElementDefinition } from '../../global/shared-types/custom-element.types';
 /**
  * @private
  * set to private to avoid usage while under development
  */
 export type TextEditorPlugin = {
-  node: CustomElement[];
+  node: CustomElementDefinition[];
 };
 //# sourceMappingURL=types.d.ts.map

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

@@ -1,13 +1,13 @@
 import { ContentTypeConverter } from './content-type-converter';
 import { EditorView } from 'prosemirror-view';
-import { CustomElement } from '../../../global/shared-types/custom-element.types';
+import { CustomElementDefinition } from '../../../global/shared-types/custom-element.types';
 /**
  * @private
  */
 export declare class MarkdownConverter implements ContentTypeConverter {
   private markdownSerializer;
   private customNodes;
-  constructor(plugins: CustomElement[]);
+  constructor(plugins: CustomElementDefinition[]);
   parseAsHTML: (text: string) => Promise<string>;
   serialize: (view: EditorView) => string;
 }

package/dist/types/components/text-editor/utils/plugin-factory.d.ts

@@ -1,6 +1,6 @@
 import { NodeSpec } from 'prosemirror-model';
-import { CustomElement } from '../../../global/shared-types/custom-element.types';
-type NodeSpecFactory = (config: CustomElement) => NodeSpec;
+import { CustomElementDefinition } from '../../../global/shared-types/custom-element.types';
+type NodeSpecFactory = (config: CustomElementDefinition) => NodeSpec;
 export declare const createNodeSpec: NodeSpecFactory;
 export {};
 //# sourceMappingURL=plugin-factory.d.ts.map

package/dist/types/components.d.ts

@@ -32,12 +32,13 @@ import { IconSize } from "./components/icon/icon.types";
 import { InfoTileProgress } from "./components/info-tile/info-tile.types";
 import { InputType } from "./components/input-field/input-field.types";
 import { ListType } from "./components/list/list.types";
-import { CustomElement } from "./global/shared-types/custom-element.types";
+import { CustomElementDefinition } from "./global/shared-types/custom-element.types";
 import { MenuListType } from "./components/menu-list/menu-list.types";
 import { PickerValue } from "./components/picker/value.types";
 import { Searcher } from "./components/picker/searcher.types";
 import { ActionPosition, ActionScrollBehavior } from "./components/picker/actions.types";
 import { FlowItem } from "./components/progress-flow/progress-flow.types";
+import { TriggerCharacter, TriggerEventDetail } from "./components/text-editor/text-editor.types";
 import { Option } from "./components/select/option.types";
 import { SpinnerSize } from "./components/spinner/spinner.types";
 import { Tab } from "./components/tab-bar/tab.types";
@@ -71,12 +72,13 @@ export { IconSize } from "./components/icon/icon.types";
 export { InfoTileProgress } from "./components/info-tile/info-tile.types";
 export { InputType } from "./components/input-field/input-field.types";
 export { ListType } from "./components/list/list.types";
-export { CustomElement } from "./global/shared-types/custom-element.types";
+export { CustomElementDefinition } from "./global/shared-types/custom-element.types";
 export { MenuListType } from "./components/menu-list/menu-list.types";
 export { PickerValue } from "./components/picker/value.types";
 export { Searcher } from "./components/picker/searcher.types";
 export { ActionPosition, ActionScrollBehavior } from "./components/picker/actions.types";
 export { FlowItem } from "./components/progress-flow/progress-flow.types";
+export { TriggerCharacter, TriggerEventDetail } from "./components/text-editor/text-editor.types";
 export { Option } from "./components/select/option.types";
 export { SpinnerSize } from "./components/spinner/spinner.types";
 export { Tab } from "./components/tab-bar/tab.types";
@@ -1754,7 +1756,7 @@ export namespace Components {
           * Whitelisted html elements.  Any custom element added here will not be sanitized and thus rendered.
           * @alpha
          */
-        "whitelist"?: CustomElement[];
+        "whitelist"?: CustomElementDefinition[];
     }
     /**
      * @exampleComponent limel-example-menu-basic
@@ -2119,6 +2121,12 @@ export namespace Components {
           * 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 private to avoid usage while under development
+          * @private 
+          * @alpha
+         */
+        "customElements": CustomElementDefinition[];
         /**
           * Defines the language for translations.
          */
@@ -2128,7 +2136,7 @@ export namespace Components {
           * @private 
           * @alpha
          */
-        "plugins": CustomElement[];
+        "triggerCharacters": TriggerCharacter[];
         /**
           * The value of the editor, expected to be markdown
          */
@@ -2571,6 +2579,7 @@ export namespace Components {
      * @exampleComponent limel-example-text-editor-ui
      * @exampleComponent limel-example-text-editor-composite
      * @exampleComponent limel-example-text-editor-custom-element
+     * @exampleComponent limel-example-text-editor-triggers
      * @beta 
      */
     interface LimelTextEditor {
@@ -2582,6 +2591,12 @@ export namespace Components {
           * 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';
+        /**
+          * A list of custom elements  Any `CustomElement` that should be used inside the text editor needs to be defined here.
+          * @private 
+          * @alpha
+         */
+        "customElements": CustomElementDefinition[];
         /**
           * 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.
          */
@@ -2606,12 +2621,6 @@ export namespace Components {
           * The placeholder text shown inside the input field, when the field is empty.
          */
         "placeholder"?: string;
-        /**
-          * set to private to avoid usage while under development
-          * @private 
-          * @alpha
-         */
-        "plugins": CustomElement[];
         /**
           * Set to `true` to make the component read-only. Use `readonly` when the field is only there to present the data it holds, and will not become possible for the current user to edit. :::note Consider that it might be better to use `limel-markdown` instead of `limel-text-editor` when the goal is visualizing data. :::
          */
@@ -2620,6 +2629,12 @@ export namespace Components {
           * Set to `true` to indicate that the field is required.  :::important An empty but required field is not automatically considered invalid. You must make sure to check the validity of the field on your own, and properly handle the `invalid` state. :::
          */
         "required"?: boolean;
+        /**
+          * A set of trigger characters  Defining a character here will enable trigger events to be sent if the character is detected in the editor.
+          * @private 
+          * @alpha
+         */
+        "triggers": TriggerCharacter[];
         /**
           * Specifies the visual appearance of the editor.  - `standard`: The default editor appearance with a full toolbar and    standard layout. - `minimal`: A compact editor appearance, ideal for limited space    scenarios such as mobile devices. In this mode, the toolbar is hidden    until the editor is focused.
          */
@@ -4188,6 +4203,7 @@ declare global {
      * @exampleComponent limel-example-text-editor-ui
      * @exampleComponent limel-example-text-editor-composite
      * @exampleComponent limel-example-text-editor-custom-element
+     * @exampleComponent limel-example-text-editor-triggers
      * @beta 
      */
     interface HTMLLimelTextEditorElement extends Components.LimelTextEditor, HTMLStencilElement {
@@ -6151,7 +6167,7 @@ declare namespace LocalJSX {
           * Whitelisted html elements.  Any custom element added here will not be sanitized and thus rendered.
           * @alpha
          */
-        "whitelist"?: CustomElement[];
+        "whitelist"?: CustomElementDefinition[];
     }
     /**
      * @exampleComponent limel-example-menu-basic
@@ -6552,6 +6568,12 @@ declare namespace LocalJSX {
           * 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 private to avoid usage while under development
+          * @private 
+          * @alpha
+         */
+        "customElements"?: CustomElementDefinition[];
         /**
           * Defines the language for translations.
          */
@@ -6565,7 +6587,7 @@ declare namespace LocalJSX {
           * @private 
           * @alpha
          */
-        "plugins"?: CustomElement[];
+        "triggerCharacters"?: TriggerCharacter[];
         /**
           * The value of the editor, expected to be markdown
          */
@@ -7063,6 +7085,7 @@ declare namespace LocalJSX {
      * @exampleComponent limel-example-text-editor-ui
      * @exampleComponent limel-example-text-editor-composite
      * @exampleComponent limel-example-text-editor-custom-element
+     * @exampleComponent limel-example-text-editor-triggers
      * @beta 
      */
     interface LimelTextEditor {
@@ -7074,6 +7097,12 @@ declare namespace LocalJSX {
           * 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';
+        /**
+          * A list of custom elements  Any `CustomElement` that should be used inside the text editor needs to be defined here.
+          * @private 
+          * @alpha
+         */
+        "customElements"?: CustomElementDefinition[];
         /**
           * 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.
          */
@@ -7099,15 +7128,27 @@ declare namespace LocalJSX {
          */
         "onChange"?: (event: LimelTextEditorCustomEvent<string>) => void;
         /**
-          * The placeholder text shown inside the input field, when the field is empty.
+          * Dispatched if a input is changed during an active trigger.
+          * @private 
+          * @alpha
          */
-        "placeholder"?: string;
+        "onTriggerChange"?: (event: LimelTextEditorCustomEvent<TriggerEventDetail>) => void;
         /**
-          * set to private to avoid usage while under development
+          * Dispatched if a trigger character is detected.
+          * @private 
+          * @alpha
+         */
+        "onTriggerStart"?: (event: LimelTextEditorCustomEvent<TriggerEventDetail>) => void;
+        /**
+          * Dispatched if a trigger session is ended. That is if the selection goes outside the trigger input or if something is inserted using the supplied `TextEditor` insert function.
           * @private 
           * @alpha
          */
-        "plugins"?: CustomElement[];
+        "onTriggerStop"?: (event: LimelTextEditorCustomEvent<TriggerEventDetail>) => void;
+        /**
+          * The placeholder text shown inside the input field, when the field is empty.
+         */
+        "placeholder"?: string;
         /**
           * Set to `true` to make the component read-only. Use `readonly` when the field is only there to present the data it holds, and will not become possible for the current user to edit. :::note Consider that it might be better to use `limel-markdown` instead of `limel-text-editor` when the goal is visualizing data. :::
          */
@@ -7116,6 +7157,12 @@ declare namespace LocalJSX {
           * Set to `true` to indicate that the field is required.  :::important An empty but required field is not automatically considered invalid. You must make sure to check the validity of the field on your own, and properly handle the `invalid` state. :::
          */
         "required"?: boolean;
+        /**
+          * A set of trigger characters  Defining a character here will enable trigger events to be sent if the character is detected in the editor.
+          * @private 
+          * @alpha
+         */
+        "triggers"?: TriggerCharacter[];
         /**
           * Specifies the visual appearance of the editor.  - `standard`: The default editor appearance with a full toolbar and    standard layout. - `minimal`: A compact editor appearance, ideal for limited space    scenarios such as mobile devices. In this mode, the toolbar is hidden    until the editor is focused.
          */
@@ -8289,6 +8336,7 @@ declare module "@stencil/core" {
              * @exampleComponent limel-example-text-editor-ui
              * @exampleComponent limel-example-text-editor-composite
              * @exampleComponent limel-example-text-editor-custom-element
+             * @exampleComponent limel-example-text-editor-triggers
              * @beta 
              */
             "limel-text-editor": LocalJSX.LimelTextEditor & JSXBase.HTMLAttributes<HTMLLimelTextEditorElement>;

package/dist/types/global/shared-types/custom-element.types.d.ts

@@ -1,10 +1,23 @@
 /**
- * Custom Element
+ * Custom Element definition
+ *
+ * Used to define a Custom Element
  *
  * @alpha
  */
-export interface CustomElement {
+export interface CustomElementDefinition {
   tagName: string;
   attributes: string[];
 }
+/**
+ * Custom Element
+ *
+ * @alpha
+ */
+export type CustomElement = Omit<CustomElementDefinition, 'attributes'> & {
+  /**
+   * Record of attributes and values to apply to the node
+   */
+  attributes: Record<string, any>;
+};
 //# sourceMappingURL=custom-element.types.d.ts.map

package/dist/types/interface.d.ts

@@ -32,4 +32,5 @@ export * from './components/table/table.types';
 export * from './global/shared-types/separator.types';
 export * from './global/shared-types/icon.types';
 export * from './global/shared-types/image.types';
+export * from './components/text-editor/text-editor.types';
 //# sourceMappingURL=interface.d.ts.map

package/package.json

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