Juergen Kunz
987ae70e7a
- Implemented DeesInputFileupload component with file upload functionality, including drag-and-drop support, file previews, and clear all option. - Developed DeesInputRichtext component featuring a rich text editor with a formatting toolbar, link management, and word count display. - Created demo for DeesInputRichtext showcasing various use cases including basic editing, placeholder text, different heights, and disabled state. - Added styles for both components to ensure a consistent and user-friendly interface. - Introduced types for toolbar buttons in the rich text editor for better type safety and maintainability.
34 lines
1.6 KiB
TypeScript
34 lines
1.6 KiB
TypeScript
import { html, type TemplateResult } from '@design.estate/dees-element';
|
|
import type { DeesInputRichtext } from './component.js';
|
|
|
|
export const renderRichtext = (component: DeesInputRichtext): TemplateResult => {
|
|
return html`
|
|
<div class="input-wrapper">
|
|
${component.label ? html`<label class="label">${component.label}</label>` : ''}
|
|
<div class="editor-container ${component.editor?.isFocused ? 'focused' : ''}" style="--min-height: ${component.minHeight}px">
|
|
<div class="editor-toolbar">
|
|
${component.renderToolbar()}
|
|
<div class="link-input ${component.showLinkInput ? 'show' : ''}">
|
|
<input type="url" placeholder="Enter URL..." @keydown=${component.handleLinkInputKeydown} />
|
|
<div class="link-input-buttons">
|
|
<button class="primary" @click=${component.saveLink}>Save</button>
|
|
<button @click=${component.removeLink}>Remove</button>
|
|
<button @click=${component.hideLinkInput}>Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="editor-content"></div>
|
|
${component.showWordCount
|
|
? html`
|
|
<div class="editor-footer">
|
|
<span class="word-count">${component.wordCount} word${component.wordCount !== 1 ? 's' : ''}</span>
|
|
</div>
|
|
`
|
|
: ''}
|
|
</div>
|
|
${component.description ? html`<div class="description">${component.description}</div>` : ''}
|
|
</div>
|
|
`;
|
|
|
|
};
|