115 lines
3.2 KiB
JavaScript
115 lines
3.2 KiB
JavaScript
/**
|
|
@license
|
|
Copyright (c) 2025 trading_peter
|
|
This program is available under Apache License Version 2.0
|
|
*/
|
|
|
|
import '../../tp-rich-text-box.js';
|
|
import '../../tp-rtb-bold.js';
|
|
import '../../tp-rtb-italic.js';
|
|
import '../../tp-rtb-strike.js';
|
|
import '../../tp-rtb-underline.js';
|
|
import '../../tp-rtb-code.js';
|
|
import '../../tp-rtb-clear-format.js';
|
|
import '../../tp-rtb-link.js';
|
|
import '../../tp-rtb-undo.js';
|
|
import '../../tp-rtb-redo.js';
|
|
import '../../tp-rtb-emoji-suggestion.js';
|
|
import '../../tp-rtb-user-mention.js';
|
|
|
|
import { LitElement, html, css } from 'lit';
|
|
|
|
class TheApp extends LitElement {
|
|
static get styles() {
|
|
return [
|
|
css`
|
|
:host {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: absolute;
|
|
inset: 0;
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
[slot="editor-content"] {
|
|
padding: 8px;
|
|
flex-grow: 1;
|
|
border: 1px solid #ccc;
|
|
min-height: 100px;
|
|
}
|
|
`
|
|
];
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<tp-rich-text-box>
|
|
<div slot="content" id="editor-content-element"></div>
|
|
<!-- Selection Menu Controls -->
|
|
<tp-rtb-bold></tp-rtb-bold>
|
|
<tp-rtb-italic></tp-rtb-italic>
|
|
<tp-rtb-strike></tp-rtb-strike>
|
|
<tp-rtb-underline></tp-rtb-underline>
|
|
<tp-rtb-code></tp-rtb-code>
|
|
<tp-rtb-clear-format></tp-rtb-clear-format>
|
|
<tp-rtb-link></tp-rtb-link>
|
|
<tp-rtb-undo></tp-rtb-undo>
|
|
<tp-rtb-redo></tp-rtb-redo>
|
|
<!-- Suggestion Menu Content -->
|
|
<tp-rtb-emoji-suggestion slot="suggestion-content"></tp-rtb-emoji-suggestion>
|
|
<tp-rtb-user-mention slot="suggestion-content"></tp-rtb-user-mention>
|
|
</tp-rich-text-box>
|
|
<div style="margin-top: 20px;">
|
|
<button @click="${this._saveContent}">Save JSON</button>
|
|
<button @click="${this._loadContent}">Load JSON</button>
|
|
</div>
|
|
<div style="margin-top: 10px; font-size: 14px; color: #666;">
|
|
<p><strong>Instructions:</strong></p>
|
|
<ul>
|
|
<li>Select text to see formatting controls</li>
|
|
<li>Type ":" for emoji suggestions (e.g., ":grinning")</li>
|
|
<li>Type "@" for user mentions (e.g., "@john")</li>
|
|
</ul>
|
|
</div>
|
|
<textarea id="jsonContent" style="width: 100%; height: 200px; margin-top: 10px;"></textarea>
|
|
`;
|
|
}
|
|
|
|
static get properties() {
|
|
return {
|
|
_editor: { type: Object },
|
|
};
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
this._editor = null;
|
|
}
|
|
|
|
firstUpdated() {
|
|
this._editor = this.shadowRoot.querySelector('tp-rich-text-box');
|
|
}
|
|
|
|
_saveContent() {
|
|
if (this._editor) {
|
|
const jsonContent = this._editor.value;
|
|
this.shadowRoot.querySelector('#jsonContent').value = JSON.stringify(jsonContent, null, 2);
|
|
console.log('Content saved:', jsonContent);
|
|
}
|
|
}
|
|
|
|
_loadContent() {
|
|
if (this._editor) {
|
|
try {
|
|
const jsonContent = JSON.parse(this.shadowRoot.querySelector('#jsonContent').value);
|
|
this._editor.value = jsonContent;
|
|
console.log('Content loaded:', jsonContent);
|
|
} catch (e) {
|
|
console.error('Invalid JSON:', e);
|
|
alert('Invalid JSON content. Please check the textarea.');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
window.customElements.define('the-app', TheApp); |