{agreeDimensionReactionButtons}
{likeDimensionReactionButtons}
{replyButton}
+ {editButton}
{
+ switch (n.nodeType) {
+ case Node.TEXT_NODE:
+ return new PlainPart(n.nodeValue);
+ case Node.ELEMENT_NODE:
+ switch (n.nodeName) {
+ case "MX-REPLY":
+ return null;
+ case "A": {
+ const {href} = n;
+ const pillMatch = REGEX_MATRIXTO.exec(href) || [];
+ const resourceId = pillMatch[1]; // The room/user ID
+ const prefix = pillMatch[2]; // The first character of prefix
+ switch (prefix) {
+ case "@": return new UserPillPart(resourceId, n.textContent);
+ case "#": return new RoomPillPart(resourceId, n.textContent);
+ default: return new PlainPart(n.textContent);
+ }
+ }
+ case "BR":
+ return new NewlinePart("\n");
+ default:
+ return new PlainPart(n.textContent);
+ }
+ default:
+ return null;
+ }
+ }).filter(p => !!p);
+ return parts;
+}
+
+export function parseEvent(event) {
+ const content = event.getContent();
+ if (content.format === "org.matrix.custom.html") {
+ return parseHtmlMessage(content.formatted_body);
+ } else {
+ const lines = content.body.split("\n");
+ const parts = lines.reduce((parts, line, i) => {
+ const isLast = i === lines.length - 1;
+ const text = new PlainPart(line);
+ const newLine = !isLast && new NewlinePart("\n");
+ if (newLine) {
+ return parts.concat(text, newLine);
+ } else {
+ return parts.concat(text);
+ }
+ }, []);
+ return parts;
+ }
+}
diff --git a/src/editor/diff.js b/src/editor/diff.js
new file mode 100644
index 0000000000..6dc8b746e4
--- /dev/null
+++ b/src/editor/diff.js
@@ -0,0 +1,78 @@
+/*
+Copyright 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+function firstDiff(a, b) {
+ const compareLen = Math.min(a.length, b.length);
+ for (let i = 0; i < compareLen; ++i) {
+ if (a[i] !== b[i]) {
+ return i;
+ }
+ }
+ return compareLen;
+}
+
+function lastDiff(a, b) {
+ const compareLen = Math.min(a.length, b.length);
+ for (let i = 0; i < compareLen; ++i) {
+ if (a[a.length - i] !== b[b.length - i]) {
+ return i;
+ }
+ }
+ return compareLen;
+}
+
+function diffStringsAtEnd(oldStr, newStr) {
+ const len = Math.min(oldStr.length, newStr.length);
+ const startInCommon = oldStr.substr(0, len) === newStr.substr(0, len);
+ if (startInCommon && oldStr.length > newStr.length) {
+ return {removed: oldStr.substr(len), at: len};
+ } else if (startInCommon && oldStr.length < newStr.length) {
+ return {added: newStr.substr(len), at: len};
+ } else {
+ const commonStartLen = firstDiff(oldStr, newStr);
+ return {
+ removed: oldStr.substr(commonStartLen),
+ added: newStr.substr(commonStartLen),
+ at: commonStartLen,
+ };
+ }
+}
+
+export function diffDeletion(oldStr, newStr) {
+ if (oldStr === newStr) {
+ return {};
+ }
+ const firstDiffIdx = firstDiff(oldStr, newStr);
+ const lastDiffIdx = oldStr.length - lastDiff(oldStr, newStr) + 1;
+ return {at: firstDiffIdx, removed: oldStr.substring(firstDiffIdx, lastDiffIdx)};
+}
+
+export function diffInsertion(oldStr, newStr) {
+ const diff = diffDeletion(newStr, oldStr);
+ if (diff.removed) {
+ return {at: diff.at, added: diff.removed};
+ } else {
+ return diff;
+ }
+}
+
+export function diffAtCaret(oldValue, newValue, caretPosition) {
+ const diffLen = newValue.length - oldValue.length;
+ const caretPositionBeforeInput = caretPosition - diffLen;
+ const oldValueBeforeCaret = oldValue.substr(0, caretPositionBeforeInput);
+ const newValueBeforeCaret = newValue.substr(0, caretPosition);
+ return diffStringsAtEnd(oldValueBeforeCaret, newValueBeforeCaret);
+}
diff --git a/src/editor/dom.js b/src/editor/dom.js
new file mode 100644
index 0000000000..0899fd25b3
--- /dev/null
+++ b/src/editor/dom.js
@@ -0,0 +1,84 @@
+/*
+Copyright 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+function walkDOMDepthFirst(editor, enterNodeCallback, leaveNodeCallback) {
+ let node = editor.firstChild;
+ while (node && node !== editor) {
+ enterNodeCallback(node);
+ if (node.firstChild) {
+ node = node.firstChild;
+ } else if (node.nextSibling) {
+ node = node.nextSibling;
+ } else {
+ while (!node.nextSibling && node !== editor) {
+ node = node.parentElement;
+ if (node !== editor) {
+ leaveNodeCallback(node);
+ }
+ }
+ if (node !== editor) {
+ node = node.nextSibling;
+ }
+ }
+ }
+}
+
+export function getCaretOffsetAndText(editor, sel) {
+ let {focusNode} = sel;
+ const {focusOffset} = sel;
+ let caretOffset = focusOffset;
+ let foundCaret = false;
+ let text = "";
+
+ if (focusNode.nodeType === Node.ELEMENT_NODE && focusOffset !== 0) {
+ focusNode = focusNode.childNodes[focusOffset - 1];
+ caretOffset = focusNode.textContent.length;
+ }
+
+ function enterNodeCallback(node) {
+ const nodeText = node.nodeType === Node.TEXT_NODE && node.nodeValue;
+ if (!foundCaret) {
+ if (node === focusNode) {
+ foundCaret = true;
+ }
+ }
+ if (nodeText) {
+ if (!foundCaret) {
+ caretOffset += nodeText.length;
+ }
+ text += nodeText;
+ }
+ }
+
+ function leaveNodeCallback(node) {
+ // if this is not the last DIV (which are only used as line containers atm)
+ // we don't just check if there is a nextSibling because sometimes the caret ends up
+ // after the last DIV and it creates a newline if you type then,
+ // whereas you just want it to be appended to the current line
+ if (node.tagName === "DIV" && node.nextSibling && node.nextSibling.tagName === "DIV") {
+ text += "\n";
+ if (!foundCaret) {
+ caretOffset += 1;
+ }
+ }
+ }
+
+ walkDOMDepthFirst(editor, enterNodeCallback, leaveNodeCallback);
+
+ const atNodeEnd = sel.focusOffset === sel.focusNode.textContent.length;
+ const caret = {atNodeEnd, offset: caretOffset};
+ return {caret, text};
+}
diff --git a/src/editor/model.js b/src/editor/model.js
new file mode 100644
index 0000000000..85dd425b0e
--- /dev/null
+++ b/src/editor/model.js
@@ -0,0 +1,264 @@
+/*
+Copyright 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import {diffAtCaret, diffDeletion} from "./diff";
+
+export default class EditorModel {
+ constructor(parts, partCreator, updateCallback) {
+ this._parts = parts;
+ this._partCreator = partCreator;
+ this._activePartIdx = null;
+ this._autoComplete = null;
+ this._autoCompletePartIdx = null;
+ this._updateCallback = updateCallback;
+ }
+
+ _insertPart(index, part) {
+ this._parts.splice(index, 0, part);
+ if (this._activePartIdx >= index) {
+ ++this._activePartIdx;
+ }
+ if (this._autoCompletePartIdx >= index) {
+ ++this._autoCompletePartIdx;
+ }
+ }
+
+ _removePart(index) {
+ this._parts.splice(index, 1);
+ if (this._activePartIdx >= index) {
+ --this._activePartIdx;
+ }
+ if (this._autoCompletePartIdx >= index) {
+ --this._autoCompletePartIdx;
+ }
+ }
+
+ _replacePart(index, part) {
+ this._parts.splice(index, 1, part);
+ }
+
+ get parts() {
+ return this._parts;
+ }
+
+ get autoComplete() {
+ if (this._activePartIdx === this._autoCompletePartIdx) {
+ return this._autoComplete;
+ }
+ return null;
+ }
+
+ serializeParts() {
+ return this._parts.map(({type, text}) => {return {type, text};});
+ }
+
+ _diff(newValue, inputType, caret) {
+ const previousValue = this.parts.reduce((text, p) => text + p.text, "");
+ // can't use caret position with drag and drop
+ if (inputType === "deleteByDrag") {
+ return diffDeletion(previousValue, newValue);
+ } else {
+ return diffAtCaret(previousValue, newValue, caret.offset);
+ }
+ }
+
+ update(newValue, inputType, caret) {
+ const diff = this._diff(newValue, inputType, caret);
+ const position = this._positionForOffset(diff.at, caret.atNodeEnd);
+ let removedOffsetDecrease = 0;
+ if (diff.removed) {
+ removedOffsetDecrease = this._removeText(position, diff.removed.length);
+ }
+ let addedLen = 0;
+ if (diff.added) {
+ addedLen = this._addText(position, diff.added);
+ }
+ this._mergeAdjacentParts();
+ const caretOffset = diff.at - removedOffsetDecrease + addedLen;
+ const newPosition = this._positionForOffset(caretOffset, true);
+ this._setActivePart(newPosition);
+ this._updateCallback(newPosition);
+ }
+
+ _setActivePart(pos) {
+ const {index} = pos;
+ const part = this._parts[index];
+ if (part) {
+ if (index !== this._activePartIdx) {
+ this._activePartIdx = index;
+ if (this._activePartIdx !== this._autoCompletePartIdx) {
+ // else try to create one
+ const ac = part.createAutoComplete(this._onAutoComplete);
+ if (ac) {
+ // make sure that react picks up the difference between both acs
+ this._autoComplete = ac;
+ this._autoCompletePartIdx = index;
+ }
+ }
+ }
+ // not _autoComplete, only there if active part is autocomplete part
+ if (this.autoComplete) {
+ this.autoComplete.onPartUpdate(part, pos.offset);
+ }
+ } else {
+ this._activePartIdx = null;
+ this._autoComplete = null;
+ this._autoCompletePartIdx = null;
+ }
+ }
+
+ _onAutoComplete = ({replacePart, caretOffset, close}) => {
+ let pos;
+ if (replacePart) {
+ this._replacePart(this._autoCompletePartIdx, replacePart);
+ let index = this._autoCompletePartIdx;
+ if (caretOffset === undefined) {
+ caretOffset = 0;
+ index += 1;
+ }
+ pos = new DocumentPosition(index, caretOffset);
+ }
+ if (close) {
+ this._autoComplete = null;
+ this._autoCompletePartIdx = null;
+ }
+ // rerender even if editor contents didn't change
+ // to make sure the MessageEditor checks
+ // model.autoComplete being empty and closes it
+ this._updateCallback(pos);
+ }
+
+ _mergeAdjacentParts(docPos) {
+ let prevPart = this._parts[0];
+ for (let i = 1; i < this._parts.length; ++i) {
+ let part = this._parts[i];
+ const isEmpty = !part.text.length;
+ const isMerged = !isEmpty && prevPart.merge(part);
+ if (isEmpty || isMerged) {
+ // remove empty or merged part
+ part = prevPart;
+ this._removePart(i);
+ //repeat this index, as it's removed now
+ --i;
+ }
+ prevPart = part;
+ }
+ }
+
+ /**
+ * removes `len` amount of characters at `pos`.
+ * @param {Object} pos
+ * @param {Number} len
+ * @return {Number} how many characters before pos were also removed,
+ * usually because of non-editable parts that can only be removed in their entirety.
+ */
+ _removeText(pos, len) {
+ let {index, offset} = pos;
+ let removedOffsetDecrease = 0;
+ while (len > 0) {
+ // part might be undefined here
+ let part = this._parts[index];
+ const amount = Math.min(len, part.text.length - offset);
+ if (part.canEdit) {
+ const replaceWith = part.remove(offset, amount);
+ if (typeof replaceWith === "string") {
+ this._replacePart(index, this._partCreator.createDefaultPart(replaceWith));
+ }
+ part = this._parts[index];
+ // remove empty part
+ if (!part.text.length) {
+ this._removePart(index);
+ } else {
+ index += 1;
+ }
+ } else {
+ removedOffsetDecrease += offset;
+ this._removePart(index);
+ }
+ len -= amount;
+ offset = 0;
+ }
+ return removedOffsetDecrease;
+ }
+
+ /**
+ * inserts `str` into the model at `pos`.
+ * @param {Object} pos
+ * @param {string} str
+ * @return {Number} how far from position (in characters) the insertion ended.
+ * This can be more than the length of `str` when crossing non-editable parts, which are skipped.
+ */
+ _addText(pos, str) {
+ let {index} = pos;
+ const {offset} = pos;
+ let addLen = str.length;
+ const part = this._parts[index];
+ if (part) {
+ if (part.canEdit) {
+ if (part.insertAll(offset, str)) {
+ str = null;
+ } else {
+ const splitPart = part.split(offset);
+ index += 1;
+ this._insertPart(index, splitPart);
+ }
+ } else {
+ // not-editable, insert str after this part
+ addLen += part.text.length - offset;
+ index += 1;
+ }
+ }
+ while (str) {
+ const newPart = this._partCreator.createPartForInput(str);
+ str = newPart.appendUntilRejected(str);
+ this._insertPart(index, newPart);
+ index += 1;
+ }
+ return addLen;
+ }
+
+ _positionForOffset(totalOffset, atPartEnd) {
+ let currentOffset = 0;
+ const index = this._parts.findIndex(part => {
+ const partLen = part.text.length;
+ if (
+ (atPartEnd && (currentOffset + partLen) >= totalOffset) ||
+ (!atPartEnd && (currentOffset + partLen) > totalOffset)
+ ) {
+ return true;
+ }
+ currentOffset += partLen;
+ return false;
+ });
+
+ return new DocumentPosition(index, totalOffset - currentOffset);
+ }
+}
+
+class DocumentPosition {
+ constructor(index, offset) {
+ this._index = index;
+ this._offset = offset;
+ }
+
+ get index() {
+ return this._index;
+ }
+
+ get offset() {
+ return this._offset;
+ }
+}
diff --git a/src/editor/parts.js b/src/editor/parts.js
new file mode 100644
index 0000000000..a20b857fee
--- /dev/null
+++ b/src/editor/parts.js
@@ -0,0 +1,274 @@
+/*
+Copyright 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import AutocompleteWrapperModel from "./autocomplete";
+
+class BasePart {
+ constructor(text = "") {
+ this._text = text;
+ }
+
+ acceptsInsertion(chr) {
+ return true;
+ }
+
+ acceptsRemoval(position, chr) {
+ return true;
+ }
+
+ merge(part) {
+ return false;
+ }
+
+ split(offset) {
+ const splitText = this.text.substr(offset);
+ this._text = this.text.substr(0, offset);
+ return new PlainPart(splitText);
+ }
+
+ // removes len chars, or returns the plain text this part should be replaced with
+ // if the part would become invalid if it removed everything.
+ remove(offset, len) {
+ // validate
+ const strWithRemoval = this.text.substr(0, offset) + this.text.substr(offset + len);
+ for (let i = offset; i < (len + offset); ++i) {
+ const chr = this.text.charAt(i);
+ if (!this.acceptsRemoval(i, chr)) {
+ return strWithRemoval;
+ }
+ }
+ this._text = strWithRemoval;
+ }
+
+ // append str, returns the remaining string if a character was rejected.
+ appendUntilRejected(str) {
+ for (let i = 0; i < str.length; ++i) {
+ const chr = str.charAt(i);
+ if (!this.acceptsInsertion(chr)) {
+ this._text = this._text + str.substr(0, i);
+ return str.substr(i);
+ }
+ }
+ this._text = this._text + str;
+ }
+
+ // inserts str at offset if all the characters in str were accepted, otherwise don't do anything
+ // return whether the str was accepted or not.
+ insertAll(offset, str) {
+ for (let i = 0; i < str.length; ++i) {
+ const chr = str.charAt(i);
+ if (!this.acceptsInsertion(chr)) {
+ return false;
+ }
+ }
+ const beforeInsert = this._text.substr(0, offset);
+ const afterInsert = this._text.substr(offset);
+ this._text = beforeInsert + str + afterInsert;
+ return true;
+ }
+
+ createAutoComplete() {}
+
+ trim(len) {
+ const remaining = this._text.substr(len);
+ this._text = this._text.substr(0, len);
+ return remaining;
+ }
+
+ get text() {
+ return this._text;
+ }
+
+ get canEdit() {
+ return true;
+ }
+
+ toString() {
+ return `${this.type}(${this.text})`;
+ }
+}
+
+export class PlainPart extends BasePart {
+ acceptsInsertion(chr) {
+ return chr !== "@" && chr !== "#" && chr !== ":" && chr !== "\n";
+ }
+
+ toDOMNode() {
+ return document.createTextNode(this.text);
+ }
+
+ merge(part) {
+ if (part.type === this.type) {
+ this._text = this.text + part.text;
+ return true;
+ }
+ return false;
+ }
+
+ get type() {
+ return "plain";
+ }
+
+ updateDOMNode(node) {
+ if (node.textContent !== this.text) {
+ // console.log("changing plain text from", node.textContent, "to", this.text);
+ node.textContent = this.text;
+ }
+ }
+
+ canUpdateDOMNode(node) {
+ return node.nodeType === Node.TEXT_NODE;
+ }
+}
+
+class PillPart extends BasePart {
+ constructor(resourceId, label) {
+ super(label);
+ this.resourceId = resourceId;
+ }
+
+ acceptsInsertion(chr) {
+ return chr !== " ";
+ }
+
+ acceptsRemoval(position, chr) {
+ return position !== 0; //if you remove initial # or @, pill should become plain
+ }
+
+ toDOMNode() {
+ const container = document.createElement("span");
+ container.className = this.type;
+ container.appendChild(document.createTextNode(this.text));
+ return container;
+ }
+
+ updateDOMNode(node) {
+ const textNode = node.childNodes[0];
+ if (textNode.textContent !== this.text) {
+ // console.log("changing pill text from", textNode.textContent, "to", this.text);
+ textNode.textContent = this.text;
+ }
+ if (node.className !== this.type) {
+ // console.log("turning", node.className, "into", this.type);
+ node.className = this.type;
+ }
+ }
+
+ canUpdateDOMNode(node) {
+ return node.nodeType === Node.ELEMENT_NODE &&
+ node.nodeName === "SPAN" &&
+ node.childNodes.length === 1 &&
+ node.childNodes[0].nodeType === Node.TEXT_NODE;
+ }
+
+ get canEdit() {
+ return false;
+ }
+}
+
+export class NewlinePart extends BasePart {
+ acceptsInsertion(chr) {
+ return this.text.length === 0 && chr === "\n";
+ }
+
+ acceptsRemoval(position, chr) {
+ return true;
+ }
+
+ toDOMNode() {
+ return document.createElement("br");
+ }
+
+ merge() {
+ return false;
+ }
+
+ updateDOMNode() {}
+
+ canUpdateDOMNode(node) {
+ return node.tagName === "BR";
+ }
+
+ get type() {
+ return "newline";
+ }
+}
+
+export class RoomPillPart extends PillPart {
+ constructor(displayAlias) {
+ super(displayAlias, displayAlias);
+ }
+
+ get type() {
+ return "room-pill";
+ }
+}
+
+export class UserPillPart extends PillPart {
+ get type() {
+ return "user-pill";
+ }
+}
+
+
+export class PillCandidatePart extends PlainPart {
+ constructor(text, autoCompleteCreator) {
+ super(text);
+ this._autoCompleteCreator = autoCompleteCreator;
+ }
+
+ createAutoComplete(updateCallback) {
+ return this._autoCompleteCreator(updateCallback);
+ }
+
+ acceptsInsertion(chr) {
+ return true;
+ }
+
+ acceptsRemoval(position, chr) {
+ return true;
+ }
+
+ get type() {
+ return "pill-candidate";
+ }
+}
+
+export class PartCreator {
+ constructor(getAutocompleterComponent, updateQuery) {
+ this._autoCompleteCreator = (updateCallback) => {
+ return new AutocompleteWrapperModel(updateCallback, getAutocompleterComponent, updateQuery);
+ };
+ }
+
+ createPartForInput(input) {
+ switch (input[0]) {
+ case "#":
+ case "@":
+ case ":":
+ return new PillCandidatePart("", this._autoCompleteCreator);
+ case "\n":
+ return new NewlinePart();
+ default:
+ return new PlainPart();
+ }
+ }
+
+ createDefaultPart(text) {
+ return new PlainPart(text);
+ }
+}
+
diff --git a/src/editor/render.js b/src/editor/render.js
new file mode 100644
index 0000000000..abc5d42fa1
--- /dev/null
+++ b/src/editor/render.js
@@ -0,0 +1,81 @@
+/*
+Copyright 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+export function renderModel(editor, model) {
+ const lines = model.parts.reduce((lines, part) => {
+ if (part.type === "newline") {
+ lines.push([]);
+ } else {
+ const lastLine = lines[lines.length - 1];
+ lastLine.push(part);
+ }
+ return lines;
+ }, [[]]);
+ // TODO: refactor this code, DRY it
+ lines.forEach((parts, i) => {
+ let lineContainer = editor.childNodes[i];
+ while (lineContainer && (lineContainer.tagName !== "DIV" || !!lineContainer.className)) {
+ editor.removeChild(lineContainer);
+ lineContainer = editor.childNodes[i];
+ }
+ if (!lineContainer) {
+ lineContainer = document.createElement("div");
+ editor.appendChild(lineContainer);
+ }
+
+ if (parts.length) {
+ parts.forEach((part, j) => {
+ let partNode = lineContainer.childNodes[j];
+ while (partNode && !part.canUpdateDOMNode(partNode)) {
+ lineContainer.removeChild(partNode);
+ partNode = lineContainer.childNodes[j];
+ }
+ if (partNode && part) {
+ part.updateDOMNode(partNode);
+ } else if (part) {
+ lineContainer.appendChild(part.toDOMNode());
+ }
+ });
+
+ let surplusElementCount = Math.max(0, lineContainer.childNodes.length - parts.length);
+ while (surplusElementCount) {
+ lineContainer.removeChild(lineContainer.lastChild);
+ --surplusElementCount;
+ }
+ } else {
+ // empty div needs to have a BR in it to give it height
+ let foundBR = false;
+ let partNode = lineContainer.firstChild;
+ while (partNode) {
+ if (!foundBR && partNode.tagName === "BR") {
+ foundBR = true;
+ } else {
+ lineContainer.removeChild(partNode);
+ }
+ partNode = partNode.nextSibling;
+ }
+ if (!foundBR) {
+ lineContainer.appendChild(document.createElement("br"));
+ }
+ }
+
+ let surplusElementCount = Math.max(0, editor.childNodes.length - lines.length);
+ while (surplusElementCount) {
+ editor.removeChild(editor.lastChild);
+ --surplusElementCount;
+ }
+ });
+}
diff --git a/src/editor/serialize.js b/src/editor/serialize.js
new file mode 100644
index 0000000000..57cc79b375
--- /dev/null
+++ b/src/editor/serialize.js
@@ -0,0 +1,43 @@
+export function htmlSerialize(model) {
+ return model.parts.reduce((html, part) => {
+ switch (part.type) {
+ case "newline":
+ return html + "
";
+ case "plain":
+ case "pill-candidate":
+ return html + part.text;
+ case "room-pill":
+ case "user-pill":
+ return html + `${part.text}`;
+ }
+ }, "");
+}
+
+export function textSerialize(model) {
+ return model.parts.reduce((text, part) => {
+ switch (part.type) {
+ case "newline":
+ return text + "\n";
+ case "plain":
+ case "pill-candidate":
+ return text + part.text;
+ case "room-pill":
+ case "user-pill":
+ return text + `${part.resourceId}`;
+ }
+ }, "");
+}
+
+export function requiresHtml(model) {
+ return model.parts.some(part => {
+ switch (part.type) {
+ case "newline":
+ case "plain":
+ case "pill-candidate":
+ return false;
+ case "room-pill":
+ case "user-pill":
+ return true;
+ }
+ });
+}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index e407d92630..393184a6c4 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -300,6 +300,7 @@
"Show recent room avatars above the room list": "Show recent room avatars above the room list",
"Group & filter rooms by custom tags (refresh to apply changes)": "Group & filter rooms by custom tags (refresh to apply changes)",
"Render simple counters in room header": "Render simple counters in room header",
+ "Edit messages after they have been sent (refresh to apply changes)": "Edit messages after they have been sent (refresh to apply changes)",
"React to messages with emoji (refresh to apply changes)": "React to messages with emoji (refresh to apply changes)",
"Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing",
"Use compact timeline layout": "Use compact timeline layout",
@@ -897,6 +898,7 @@
"Agree or Disagree": "Agree or Disagree",
"Like or Dislike": "Like or Dislike",
"Reply": "Reply",
+ "Edit": "Edit",
"Options": "Options",
"Attachment": "Attachment",
"Error decrypting attachment": "Error decrypting attachment",
@@ -973,7 +975,6 @@
"Reload widget": "Reload widget",
"Popout widget": "Popout widget",
"Picture": "Picture",
- "Edit": "Edit",
"Revoke widget access": "Revoke widget access",
"Create new room": "Create new room",
"Unblacklist": "Unblacklist",
diff --git a/src/settings/Settings.js b/src/settings/Settings.js
index 1c3ca4fd0f..429030d862 100644
--- a/src/settings/Settings.js
+++ b/src/settings/Settings.js
@@ -118,6 +118,12 @@ export const SETTINGS = {
supportedLevels: LEVELS_FEATURE,
default: false,
},
+ "feature_message_editing": {
+ isFeature: true,
+ displayName: _td("Edit messages after they have been sent (refresh to apply changes)"),
+ supportedLevels: LEVELS_FEATURE,
+ default: false,
+ },
"feature_reactions": {
isFeature: true,
displayName: _td("React to messages with emoji (refresh to apply changes)"),