@limetech/lime-elements
Version:
85 lines (81 loc) • 7.83 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host } from './index-2714248e.js';
import { c as createRandomString } from './random-string-355331d3.js';
const textEditorCss = "@charset \"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(\n 0.19,\n 0.23,\n 0.26,\n 0.89\n );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", 7);
this.imagePasted = createEvent(this, "imagePasted", 7);
this.imageRemoved = createEvent(this, "imageRemoved", 7);
this.metadataChange = createEvent(this, "metadataChange", 7);
this.triggerStart = createEvent(this, "triggerStart", 7);
this.triggerStop = createEvent(this, "triggerStop", 7);
this.triggerChange = createEvent(this, "triggerChange", 7);
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.contentType = 'markdown';
this.language = 'en';
this.disabled = false;
this.readonly = false;
this.helperText = undefined;
this.placeholder = undefined;
this.label = undefined;
this.invalid = false;
this.value = undefined;
this.customElements = [];
this.triggers = [];
this.required = false;
this.allowResize = true;
this.ui = 'standard';
this.helperTextId = createRandomString();
this.editorId = createRandomString();
}
render() {
return (h(Host, null, h("limel-notched-outline", { 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 };
//# sourceMappingURL=limel-text-editor.entry.js.map