mirror of
https://github.com/owncast/owncast.git
synced 2024-10-10 19:16:02 +00:00
borrow react-ContentEditable component
This commit is contained in:
Ginger Wong
parent
979651a925
commit
70f3d7e165
@ -4,14 +4,16 @@ const html = htm.bind(h);
|
||||
|
||||
import { EmojiButton } from 'https://cdn.skypack.dev/@joeattardi/emoji-button';
|
||||
|
||||
import { URL_CUSTOM_EMOJIS, getLocalStorage } from '../utils.js';
|
||||
import { URL_CUSTOM_EMOJIS, getLocalStorage, setLocalStorage } from '../utils.js';
|
||||
import {
|
||||
KEY_CHAT_FIRST_MESSAGE_SENT,
|
||||
generatePlaceholderText,
|
||||
getCaretPosition,
|
||||
setCaretPosition,
|
||||
} from '../utils/chat.js';
|
||||
|
||||
import ContentEditable from './content-editable.js';
|
||||
|
||||
|
||||
export default class ChatInput extends Component {
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
@ -26,7 +28,7 @@ export default class ChatInput extends Component {
|
||||
this.prepNewLine = false;
|
||||
|
||||
this.state = {
|
||||
inputValue: '',
|
||||
inputHTML: '',
|
||||
inputWarning: '',
|
||||
hasSentFirstChatMessage: getLocalStorage(KEY_CHAT_FIRST_MESSAGE_SENT),
|
||||
};
|
||||
@ -38,9 +40,10 @@ export default class ChatInput extends Component {
|
||||
this.handleMessageInputKeydown = this.handleMessageInputKeydown.bind(this);
|
||||
this.handleMessageInputKeyup = this.handleMessageInputKeyup.bind(this);
|
||||
this.handleMessageInputBlur = this.handleMessageInputBlur.bind(this);
|
||||
this.handleMessageInput = this.handleMessageInput.bind(this);
|
||||
this.handleSubmitChatButton = this.handleSubmitChatButton.bind(this);
|
||||
this.handlePaste = this.handlePaste.bind(this);
|
||||
|
||||
this.handleContentEditableChange = this.handleContentEditableChange.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
@ -83,6 +86,7 @@ export default class ChatInput extends Component {
|
||||
}
|
||||
|
||||
handleEmojiSelected(emoji) {
|
||||
const { inputHTML } = this.state;
|
||||
let content = '';
|
||||
if (emoji.url) {
|
||||
const url = location.protocol + "//" + location.host + "/" + emoji.url;
|
||||
@ -92,21 +96,22 @@ export default class ChatInput extends Component {
|
||||
content = emoji.emoji;
|
||||
}
|
||||
|
||||
this.formMessageInput.current.innerHTML += content;
|
||||
this.setState({
|
||||
inputHTML: inputHTML + content,
|
||||
});
|
||||
}
|
||||
|
||||
// autocomplete user names
|
||||
autoCompleteNames() {
|
||||
const { chatUserNames } = this.props;
|
||||
const rawValue = this.formMessageInput.current.innerHTML;
|
||||
const position = getCaretPosition(this.formMessageInput);
|
||||
const at = rawValue.lastIndexOf('@', position - 1);
|
||||
|
||||
const { inputHTML } = this.state;
|
||||
const position = getCaretPosition(this.formMessageInput.current);
|
||||
const at = inputHTML.lastIndexOf('@', position - 1);
|
||||
if (at === -1) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const partial = rawValue.substring(at + 1, position).trim();
|
||||
const partial = inputHTML.substring(at + 1, position).trim();
|
||||
|
||||
if (partial === this.suggestion) {
|
||||
partial = this.partial;
|
||||
@ -125,9 +130,9 @@ export default class ChatInput extends Component {
|
||||
if (possibilities.length > 0) {
|
||||
this.suggestion = possibilities[this.completionIndex];
|
||||
|
||||
// TODO: Fix the space not working. I'm guessing because the DOM ignores spaces and it requires a nbsp or something?
|
||||
this.formMessageInput.current.innerHTML = rawValue.substring(0, at + 1) + this.suggestion + ' ' + rawValue.substring(position);
|
||||
setCaretPosition(this.formMessageInput.current, at + this.suggestion.length + 2);
|
||||
this.setState({
|
||||
inputHTML: inputHTML.substring(0, at + 1) + this.suggestion + ' ' + inputHTML.substring(position),
|
||||
})
|
||||
}
|
||||
|
||||
return true;
|
||||
@ -136,9 +141,10 @@ export default class ChatInput extends Component {
|
||||
handleMessageInputKeydown(event) {
|
||||
const okCodes = [37,38,39,40,16,91,18,46,8];
|
||||
const formField = this.formMessageInput.current;
|
||||
const htmlValue = formField.innerHTML.trim();
|
||||
let textValue = formField.innerText.trim();
|
||||
let numCharsLeft = this.maxMessageLength - textValue.length;
|
||||
|
||||
let textValue = formField.innerText.trim(); // get this only to count chars
|
||||
|
||||
let numCharsLeft = this.maxMessageLength - textValue.length;
|
||||
if (event.keyCode === 13) { // enter
|
||||
if (!this.prepNewLine) {
|
||||
this.sendMessage();
|
||||
@ -154,7 +160,7 @@ export default class ChatInput extends Component {
|
||||
if (this.autoCompleteNames()) {
|
||||
event.preventDefault();
|
||||
|
||||
// value could have been changed, update variables
|
||||
// value could have been changed, update char count
|
||||
textValue = formField.innerText.trim();
|
||||
numCharsLeft = this.maxMessageLength - textValue.length;
|
||||
}
|
||||
@ -186,10 +192,6 @@ export default class ChatInput extends Component {
|
||||
this.prepNewLine = false;
|
||||
}
|
||||
|
||||
handleMessageInput(event) {
|
||||
console.log("========on input",event.target, this.formMessageInput.current.innerHTML, this.formMessageInput.current.innerText);
|
||||
}
|
||||
|
||||
handlePaste(event) {
|
||||
event.preventDefault();
|
||||
document.execCommand('inserttext', false, event.clipboardData.getData('text/plain'));
|
||||
@ -202,10 +204,11 @@ export default class ChatInput extends Component {
|
||||
|
||||
sendMessage() {
|
||||
const { handleSendMessage } = this.props;
|
||||
const { hasSentFirstChatMessage } = this.state;
|
||||
const message = this.formMessageInput.current.innerHTML.trim();
|
||||
const { hasSentFirstChatMessage, inputHTML } = this.state;
|
||||
const message = inputHTML.trim();
|
||||
const newStates = {
|
||||
inputWarning: '',
|
||||
inputHTML: '',
|
||||
};
|
||||
|
||||
handleSendMessage(message);
|
||||
@ -217,11 +220,14 @@ export default class ChatInput extends Component {
|
||||
|
||||
// clear things out.
|
||||
this.setState(newStates);
|
||||
this.formMessageInput.current.innerHTML = '';
|
||||
}
|
||||
|
||||
handleContentEditableChange(event) {
|
||||
this.setState({ inputHTML: event.target.value });
|
||||
}
|
||||
|
||||
render(props, state) {
|
||||
const { hasSentFirstChatMessage, inputWarning } = state;
|
||||
const { hasSentFirstChatMessage, inputWarning, inputHTML } = state;
|
||||
const { inputEnabled } = props;
|
||||
const emojiButtonStyle = {
|
||||
display: this.emojiPicker ? 'block' : 'none',
|
||||
@ -231,17 +237,22 @@ export default class ChatInput extends Component {
|
||||
return (
|
||||
html`
|
||||
<div id="message-input-container" class="shadow-md bg-gray-900 border-t border-gray-700 border-solid">
|
||||
<div
|
||||
|
||||
<${ContentEditable}
|
||||
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-2 px-2 my-2 focus:bg-white"
|
||||
onkeydown=${this.handleMessageInputKeydown}
|
||||
onkeyup=${this.handleMessageInputKeyup}
|
||||
onblur=${this.handleMessageInputBlur}
|
||||
oninput=${this.handleMessageInput}
|
||||
onpaste=${this.handlePaste}
|
||||
contenteditable=${inputEnabled}
|
||||
placeholder=${placeholderText}
|
||||
ref=${this.formMessageInput}
|
||||
></div>
|
||||
placeholderText=${placeholderText}
|
||||
|
||||
innerRef=${this.formMessageInput}
|
||||
html=${inputHTML}
|
||||
disabled=${!inputEnabled}
|
||||
onChange=${this.handleContentEditableChange}
|
||||
onKeyDown=${this.handleMessageInputKeydown}
|
||||
onKeyUp=${this.handleMessageInputKeyup}
|
||||
onBlur=${this.handleMessageInputBlur}
|
||||
|
||||
onPaste=${this.handlePaste}
|
||||
/>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
style=${emojiButtonStyle}
|
||||
|
||||
@ -128,17 +128,17 @@ export default class Chat extends Component {
|
||||
this.disableChat()
|
||||
}
|
||||
|
||||
handleSubmitChatButton(event) {
|
||||
const { inputValue } = this.state;
|
||||
var value = inputValue.trim();
|
||||
if (value) {
|
||||
this.submitChat(value);
|
||||
event.preventDefault();
|
||||
return false;
|
||||
}
|
||||
event.preventDefault();
|
||||
return false;
|
||||
}
|
||||
// handleSubmitChatButton(event) {
|
||||
// const { inputValue } = this.state;
|
||||
// var value = inputValue.trim();
|
||||
// if (value) {
|
||||
// this.submitChat(value);
|
||||
// event.preventDefault();
|
||||
// return false;
|
||||
// }
|
||||
// event.preventDefault();
|
||||
// return false;
|
||||
// }
|
||||
|
||||
submitChat(content) {
|
||||
if (!content) {
|
||||
|
||||
@ -21,13 +21,12 @@ export function formatMessageText(message, username) {
|
||||
}).makeHtml(message);
|
||||
|
||||
formattedText = linkify(formattedText, message);
|
||||
formattedText = highlightUsername(formattedText, username);
|
||||
// formattedText = highlightUsername(formattedText, username);
|
||||
|
||||
return addNewlines(formattedText);
|
||||
}
|
||||
|
||||
function highlightUsername(message, username) {
|
||||
// const username = document.getElementById('self-message-author').value;
|
||||
const pattern = new RegExp('@?' + username.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), 'gi');
|
||||
return message.replace(pattern, '<span class="highlighted">$&</span>');
|
||||
}
|
||||
@ -126,7 +125,7 @@ function getInstagramEmbedFromURL(url) {
|
||||
}
|
||||
|
||||
function isImage(url) {
|
||||
const re = /\.(jpe?g|png|gif)$/;
|
||||
const re = /\.(jpe?g|png|gif)$/i;
|
||||
const isImage = re.test(url);
|
||||
return isImage;
|
||||
}
|
||||
@ -135,7 +134,6 @@ function getImageForURL(url) {
|
||||
return `<a target="_blank" href="${url}"><img class="embedded-image" src="${url}" width="100%" height="150px"/></a>`;
|
||||
}
|
||||
|
||||
|
||||
// Taken from https://stackoverflow.com/questions/3972014/get-contenteditable-caret-index-position
|
||||
export function getCaretPosition(editableDiv) {
|
||||
var caretPos = 0,
|
||||
@ -162,6 +160,7 @@ export function getCaretPosition(editableDiv) {
|
||||
return caretPos;
|
||||
}
|
||||
|
||||
// Might not need this anymore
|
||||
// Pieced together from parts of https://stackoverflow.com/questions/6249095/how-to-set-caretcursor-position-in-contenteditable-element-div
|
||||
export function setCaretPosition(editableDiv, position) {
|
||||
var range = document.createRange();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user