@limetech/lime-elements
Version:
151 lines (147 loc) • 10.9 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host } from './index-DBTJNfo7.js';
import { c as createRandomString } from './random-string-JbKhhoXs.js';
const textEditorCss = () => ` "UTF-8";*{box-sizing:border-box}:host(limel-text-editor){--limel-notched-outline-z-index:2;--limel-prosemirror-adapter-toolbar-opacity:0.6;--limel-text-editor-padding:0.25rem 1rem 0.75rem 1rem;--limel-prosemirror-adapter-toolbar-grid-template-rows:1fr;--limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration:0.3s;--limel-prosemirror-adapter-toolbar-transition-timing-function:cubic-bezier( 0.19, 0.23, 0.26, 0.89 );position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;min-width:5rem;min-height:5rem;height:100%;max-height:var(--text-editor-max-height, calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)) - 4rem));padding:1px}:host(limel-text-editor) limel-notched-outline{height:100%}:host(limel-text-editor:focus-within),:host(limel-text-editor:not([ui=minimal]):hover){--limel-prosemirror-adapter-toolbar-opacity:1}:host(limel-text-editor[ui=minimal]:not(:focus-within)){--limel-prosemirror-adapter-toolbar-grid-template-rows:0fr;--limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration:0.46s;--limel-prosemirror-adapter-action-bar-padding-top-bottom:0;--limel-prosemirror-adapter-toolbar-opacity:0}:host(limel-text-editor[ui=minimal]:not(:focus-within)),:host(limel-text-editor[ui=no-toolbar]){--limel-text-editor-padding:0.75rem 1rem 0.75rem 1rem;--limel-text-editor-placeholder-top:0;min-height:2.5rem}:host(limel-text-editor[ui=minimal]:not(:focus-within)) limel-prosemirror-adapter,:host(limel-text-editor[ui=no-toolbar]) limel-prosemirror-adapter{min-height:2.5rem}:host(limel-text-editor:focus-within) .placeholder,:host(limel-text-editor:focus) .placeholder{opacity:0}:host(limel-text-editor[disabled]:not([disabled=false])) limel-prosemirror-adapter{cursor:not-allowed;opacity:0.4;pointer-events:none}:host(limel-text-editor[readonly]:not([readonly=false])){--limel-text-editor-padding:0.75rem 1rem 0.75rem 1rem;--limel-text-editor-placeholder-top:0}:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown{display:block;padding:var(--limel-text-editor-padding);overflow-y:auto;-webkit-overflow-scrolling:touch;height:100%}:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown:before,:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown:after{z-index:1;pointer-events:none;content:"";display:block;position:absolute;width:100%}:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown:after{height:1.75rem;top:0;background:linear-gradient(var(--text-editor-fade-out-background-color, rgb(var(--contrast-100))), transparent)}:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown:before{height:2rem;bottom:-0.25rem;background:linear-gradient(transparent, var(--text-editor-fade-out-background-color, rgb(var(--contrast-100))))}.placeholder{transition-property:top;transition-duration:var(--limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration);transition-timing-function:var(--limel-prosemirror-adapter-toolbar-transition-timing-function);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;position:absolute;top:var(--limel-text-editor-placeholder-top, 2.25rem);left:0;right:0;padding:var(--limel-text-editor-padding);font-style:italic;font-size:var(--limel-theme-default-font-size);color:rgb(var(--contrast-900))}limel-prosemirror-adapter{flex-grow:1;min-width:0;min-height:5rem;height:100%;max-height:100%;overflow:hidden auto;-webkit-overflow-scrolling:touch}:host(limel-text-editor:focus),:host(limel-text-editor:focus-visible),:host(limel-text-editor:focus-within){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-text-editor){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-text-editor:focus) limel-helper-line,:host(limel-text-editor:focus-visible) limel-helper-line,:host(limel-text-editor:focus-within) limel-helper-line,:host(limel-text-editor:hover) limel-helper-line{will-change:grid-template-rows}:host(limel-text-editor[allow-resize]) limel-prosemirror-adapter{resize:vertical}`;
const TextEditor = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.change = createEvent(this, "change");
this.imagePasted = createEvent(this, "imagePasted");
this.imageRemoved = createEvent(this, "imageRemoved");
this.metadataChange = createEvent(this, "metadataChange");
this.triggerStart = createEvent(this, "triggerStart");
this.triggerStop = createEvent(this, "triggerStop");
this.triggerChange = createEvent(this, "triggerChange");
/**
* 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
*/
this.contentType = 'markdown';
/**
* Defines the language for translations.
*/
this.language = 'en';
/**
* 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.
*/
this.disabled = false;
/**
* 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.
* :::
*/
this.readonly = false;
/**
* Set to `true` to indicate that the current value of the editor is
* invalid.
*/
this.invalid = false;
/**
* A list of custom elements
*
* Any `CustomElement` that should be used inside the text editor needs
* to be defined here.
*
* @private
* @alpha
*/
this.customElements = [];
/**
* 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
*/
this.triggers = [];
/**
* 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.
* :::
*/
this.required = false;
/**
* Set to `true` to allow the user to vertically resize the editor.
* Set to `false` to disable the resize functionality.
*/
this.allowResize = true;
/**
* 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.
* - `no-toolbar`: A basic textarea appearance without any text styling toolbar.
* This mode is suitable for scenarios where you want to provide a simple
* text input without any visible formatting options; but still provide
* support for markdown syntax and rich text, using hotkeys or when pasting.
*/
this.ui = 'standard';
this.renderHelperLine = () => {
if (!this.helperText) {
return;
}
return (h("limel-helper-line", { helperText: this.helperText, helperTextId: this.helperTextId, invalid: this.isInvalid() }));
};
this.isInvalid = () => {
if (this.readonly) {
// A readonly field can never be invalid.
return false;
}
if (this.invalid) {
return true;
}
};
this.handleChange = (event) => {
event.stopPropagation();
this.change.emit(event.detail);
};
this.handleImagePasted = (event) => {
event.stopPropagation();
this.imagePasted.emit(event.detail);
};
this.handleMetadataChange = (event) => {
event.stopPropagation();
this.metadataChange.emit(event.detail);
};
this.handleImageRemoved = (event) => {
event.stopPropagation();
this.imageRemoved.emit(event.detail);
};
this.helperTextId = createRandomString();
this.editorId = createRandomString();
}
render() {
return (h(Host, { key: '31661aea27e0dea61827560c031587bd208f8bed' }, h("limel-notched-outline", { key: '81571a171ba0b629117d8b153e091e6d34c98c70', labelId: this.editorId, label: this.label, required: this.required, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasFloatingLabel: true }, this.renderEditor(), this.renderPlaceholder()), this.renderHelperLine()));
}
renderEditor() {
if (this.readonly) {
return (h("limel-markdown", { slot: "content", value: this.value, "aria-controls": this.helperText ? this.helperTextId : undefined, id: this.editorId }));
}
return (h("limel-prosemirror-adapter", { slot: "content", "aria-placeholder": this.placeholder, contentType: this.contentType, onChange: this.handleChange, onImagePasted: this.handleImagePasted, onImageRemoved: this.handleImageRemoved, onMetadataChange: this.handleMetadataChange, customElements: this.customElements, value: this.value, "aria-controls": this.helperText ? this.helperTextId : undefined, id: this.editorId, "aria-disabled": this.disabled, "aria-invalid": this.invalid, "aria-required": this.required, language: this.language, triggerCharacters: this.triggers, disabled: this.disabled, ui: this.ui }));
}
renderPlaceholder() {
if (!this.placeholder || this.value) {
return;
}
return (h("span", { class: "placeholder", "aria-hidden": "true", slot: "content" }, this.placeholder));
}
static get delegatesFocus() { return true; }
};
TextEditor.style = textEditorCss();
export { TextEditor as limel_text_editor };