Add markdown backend.

square-messages
Black Hat 2018-07-09 22:00:27 +08:00
parent 3437b49677
commit 32cad0d651
5 changed files with 289 additions and 55 deletions

127
js/md.js Normal file
View File

@ -0,0 +1,127 @@
/* jshint browser: true, devel: true */
/**
* preg_replace (from PHP) in JavaScript!
*
* This is basically a pattern replace. You can use a regex pattern to search and
* another for the replace. For more information see the PHP docs on the original
* function (http://php.net/manual/en/function.preg-replace.php), and for more on
* JavaScript flavour regex visit http://www.regular-expressions.info/javascript.html
*
* NOTE: Unlike the PHP version, this function only deals with string inputs. No arrays.
*
* @author William Duyck <fuzzyfox0@gmail.com>
* @license http://www.mozilla.org/MPL/2.0/ Mozilla Public License 2.0
*
* @param {String} pattern The pattern to search for.
* @param {String} replace The string to replace.
* @param {String} subject The string to search and replace.
* @param {Integer} limit The maximum possible replacements.
* @return {String} If matches are found, the new subject will be returned.
*/
var preg_replace=function(a,b,c,d){void 0===d&&(d=-1);var e=a.substr(a.lastIndexOf(a[0])+1),f=a.substr(1,a.lastIndexOf(a[0])-1),g=RegExp(f,e),i=[],j=0,k=0,l=c,m=[];if(-1===d){do m=g.exec(c),null!==m&&i.push(m);while(null!==m&&-1!==e.indexOf("g"))}else i.push(g.exec(c));for(j=i.length-1;j>-1;j--){for(m=b,k=i[j].length;k>-1;k--)m=m.replace("${"+k+"}",i[j][k]).replace("$"+k,i[j][k]).replace("\\"+k,i[j][k]);l=l.replace(i[j][0],m)}return l};
/**
* Basic Markdown Parser
*
* This function parses a small subset of the Markdown language as defined by
* [John Gruber](http://daringfireball.net/projects/markdown). It's very basic
* and needs to be refactored a little, and there are plans to add more support
* for the rest of the language in the near future.
*
* This implimentation is based loosely on
* [slimdown.php](https://gist.github.com/jbroadway/2836900) by Johnny Broadway.
*
* @version 0.1
* @author William Duyck <fuzzyfox0@gmail.com>
* @license http://www.mozilla.org/MPL/2.0/ Mozilla Public License 2.0
*
* @param {String} str A Markdown string to be converted to HTML.
* @return {String} The HTML for the given Markdown.
*/
var markdown_parser = function(str){
var rules = [
// headers
['/(#+)(.*)/g', function(chars, header){
var level = chars.length;
return '<h'+level+'>'+header.trim()+'</h'+level+'>';
}],
// images
['/\\!\\[([^\\[]+)\\]\\(([^\\(]+)\\)/g', '<img src=\"\\2\" alt=\"\\1\" />'],
// link
['/\\[([^\\[]+)\\]\\(([^\\(]+)\\)/g', '<a href=\"\\2\">\\1</a>'],
// bold
['/(\\*\\*|__)(.*?)\\1/g', '<strong>\\2</strong>'],
// emphasis
['/(\\*|_)(.*?)\\1/g', '<em>\\2</em>'],
// strike
['/(\\~\\~)(.*?)\\1/g', '<del>\\2</del>'],
// quote
['/\\:\\"(.*?)\\"\\:/g', '<q>\\1</q>'],
// unordered list
['/\\n\\*(.*)/g', function(item){
return '<ul>\n<li>'+item.trim()+'</li>\n</ul>';
}],
// ordered list
['/\\n[0-9]+\\.(.*)/g', function(item){
return '<ol>\n<li>'+item.trim()+'</li>\n</ol>';
}],
// blockquote
['/\\n\\>(.*)/g', function(str){
return '<blockquote>'+str.trim()+'</blockquote>';
}],
// paragraphs
['/\\n[^\\n]+\\n/g', function(line){
line = line.trim();
if(line[0] === '<'){
return line;
}
return '\n<p>'+line+'</p>\n';
}]
], fixes = [
['/<\\/ul>\n<ul>/g', '\n'],
['/<\\/ol>\n<ol>/g', '\n'],
['/<\\/blockquote>\n<blockquote>/g', "\n"]
];
var parse_line = function(str){
str = "\n" + str.trim() + "\n";
for(var i = 0, j = rules.length; i < j; i++){
if(typeof rules[i][1] == 'function') {
var _flag = rules[i][0].substr(rules[i][0].lastIndexOf(rules[i][0][0])+1),
_pattern = rules[i][0].substr(1, rules[i][0].lastIndexOf(rules[i][0][0])-1),
reg = new RegExp(_pattern, _flag);
var matches = reg.exec(str);
if(matches !== null){
if(matches.length > 1){
str = preg_replace(rules[i][0], rules[i][1](matches[1], matches[2]), str);
}
else
{
str = preg_replace(rules[i][0], rules[i][1](matches[0]), str);
}
}
}
else {
str = preg_replace(rules[i][0], rules[i][1], str);
}
}
return str.trim();
};
str = str.split('\n');
var rtn = [];
for(var i = 0, j = str.length; i < j; i++){
rtn.push(parse_line(str[i]));
}
rtn = rtn.join('\n');
for(i = 0, j = fixes.length; i < j; i++){
rtn = preg_replace(fixes[i][0], fixes[i][1], rtn);
}
return rtn;
};

View File

@ -47,7 +47,8 @@ DISTFILES += \
RoomListForm.qml \
RoomDetailForm.qml \
Room.qml \
Setting.qml
Setting.qml \
qml/js/md.js
HEADERS += \
matrix/controller.h \

View File

@ -0,0 +1,130 @@
import QtQuick 2.11
import QtQuick.Controls 2.4
import QtQuick.Controls.Material 2.4
Item {
readonly property bool sentByMe: author === currentRoom.localUser
anchors.right: messageRow.visible && sentByMe ? parent.right : undefined
anchors.horizontalCenter: stateText.visible ? parent.horizontalCenter : undefined
width: {
if (messageRow.visible) return messageRow.width
if (stateText.visible) return stateText.width
}
height: {
if (messageRow.visible) return messageRow.height
if (stateText.visible) return stateText.height
}
MouseArea {
anchors.fill: parent
ToolTip.visible: pressed
ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
ToolTip.text: time
}
Row {
id: messageRow
visible: eventType === "message" || eventType === "image" || eventType === "notice"
spacing: 6
ImageStatus {
id: avatar
width: height
height: 40
round: false
visible: !sentByMe
source: author.avatarUrl != "" ? "image://mxc/" + author.avatarUrl : null
displayText: author.displayName
MouseArea {
id: mouseArea
anchors.fill: parent
ToolTip.visible: pressed
ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
ToolTip.text: author.displayName
}
}
Rectangle {
id: messageRect
width: {
if (eventType === "image") return messageImage.width + 24
if (eventType === "message")
return Math.min(messageText.implicitWidth + 24, messageListView.width - (!sentByMe ? avatar.width + messageRow.spacing : 0))
if (eventType === "notice")
return Math.min(noticeText.implicitWidth + 24, messageListView.width - (!sentByMe ? avatar.width + messageRow.spacing : 0))
}
height: {
if (eventType === "image") return messageImage.height + 24
if (eventType === "message") return messageText.implicitHeight + 24
if (eventType === "notice") return noticeText.implicitHeight + 24
}
color: noticeText.visible ? "transparent" : sentByMe ? "lightgrey" : Material.accent
border.color: Material.accent
border.width: noticeText.visible ? 2 : 0
Label {
id: messageText
visible: eventType === "message"
text: display
color: sentByMe ? "black" : "white"
anchors.fill: parent
anchors.margins: 12
wrapMode: Label.Wrap
textFormat: Text.RichText
}
Label {
id: noticeText
visible: eventType === "notice"
text: display
color: "black"
anchors.fill: parent
anchors.margins: 12
wrapMode: Label.Wrap
textFormat: Text.RichText
}
Image {
id: messageImage
anchors.centerIn: parent
visible: eventType === "image"
source: visible? "image://mxc/" + content.url : ""
MouseArea {
anchors.fill: parent
ToolTip.visible: pressed
ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
ToolTip.text: visible ? content.body : ""
}
}
}
}
Label {
id: stateText
visible: eventType === "state" || eventType === "emote"
width: Math.min(implicitWidth, messageListView.width)
height: implicitHeight
padding: 12
text: author.displayName + " " + display
color: eventType === "state" ? "black" : "white"
wrapMode: Label.Wrap
textFormat: Text.StyledText
background: Rectangle {
anchors.fill: parent
color: eventType === "state" ? "lightgrey" : Material.accent
}
}
}

View File

@ -5,6 +5,7 @@ import QtQuick.Controls.Material 2.4
import QtGraphicalEffects 1.0
import Matrique 0.1
import "qrc:/qml/component"
import "qrc:/js/md.js" as Markdown
Item {
id: item
@ -97,50 +98,8 @@ Item {
onRoomChanged: if (room.timelineSize === 0) room.getPreviousContent(50)
}
delegate: Row {
readonly property bool sentByMe: author === currentRoom.localUser
delegate: MessageDelegate {
id: messageRow
anchors.right: sentByMe ? parent.right : undefined
spacing: 6
ImageStatus {
id: avatar
width: height
height: 40
round: false
visible: !sentByMe
source: author.avatarUrl != "" ? "image://mxc/" + author.avatarUrl : null
displayText: author.displayName
MouseArea {
id: mouseArea
anchors.fill: parent
ToolTip.visible: pressed
ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
ToolTip.text: author.displayName
}
}
Rectangle {
width: Math.min(messageText.implicitWidth + 24,
messageListView.width - (!sentByMe ? avatar.width + messageRow.spacing : 0))
height: messageText.implicitHeight + 24
color: sentByMe ? "lightgrey" : Material.accent
Label {
id: messageText
text: display
color: sentByMe ? "black" : "white"
linkColor: sentByMe ? Material.accent : "white"
anchors.fill: parent
anchors.margins: 12
wrapMode: Label.Wrap
textFormat: Text.RichText
}
}
}
onAtYBeginningChanged: if (atYBeginning && currentRoom) currentRoom.getPreviousContent(50)
@ -154,12 +113,11 @@ Item {
RoundButton {
id: goTopFab
width: height
height: !parent.atYEnd ? 64 : 0
height: 64
visible: !parent.atYEnd
anchors.verticalCenter: parent.bottom
anchors.verticalCenterOffset: -48
anchors.horizontalCenter: parent.right
anchors.horizontalCenterOffset: -48
anchors.right: parent.right
anchors.bottom: parent.bottom
contentItem: MaterialIcon {
anchors.fill: parent
@ -167,16 +125,13 @@ Item {
color: "white"
}
opacity: hovered ? 1 : 0.5
opacity: hovered ? 0.7 : 0.4
Material.background: Qt.lighter(Material.accent)
onClicked: parent.positionViewAtBeginning()
Behavior on height {
PropertyAnimation { easing.type: Easing.InOutCubic; duration: 200 }
}
Behavior on opacity {
PropertyAnimation { easing.type: Easing.InOutCubic; duration: 200 }
PropertyAnimation { easing.type: Easing.Linear; duration: 200 }
}
}
}
@ -214,9 +169,28 @@ Item {
}
Keys.onReturnPressed: {
currentRoom.postMessage("text", inputField.text)
postMessage(inputField.text)
inputField.text = ""
}
function postMessage(text) {
if (text.trim().length === 0) {
return
}
if(!currentRoom) {
return
}
var type = "m.text"
var PREFIX_ME = '/me '
if (text.indexOf(PREFIX_ME) === 0) {
text = text.substr(PREFIX_ME.length)
type = "m.emote"
}
// var parsedText = Markdown.markdown_parser(text)
currentRoom.postMessage(type, text)
}
}
ItemDelegate {

View File

@ -16,5 +16,7 @@
<file>qml/component/SideNavButton.qml</file>
<file>qml/component/MaterialIcon.qml</file>
<file>asset/img/icon.png</file>
<file>js/md.js</file>
<file>qml/component/MessageDelegate.qml</file>
</qresource>
</RCC>