fix katex link

pull/7748/head
Karl Prieb 8 years ago
parent a47886b7a3
commit a327f39133
  1. 15
      packages/rocketchat-theme/client/imports/components/message-box.css
  2. 4
      packages/rocketchat-ui-master/public/icons.svg
  3. 31
      packages/rocketchat-ui-message/client/messageBox.html
  4. 157
      packages/rocketchat-ui-message/client/messageBox.js

@ -15,16 +15,17 @@
width: 100%; width: 100%;
height: 24px; height: 24px;
color: var(--message-box-markdown-color);
justify-content: center; justify-content: center;
&-item { &-item {
display: flex; display: flex;
width: 16px; min-width: 16px;
margin: 0 4px; margin: 0 4px;
transition: color 0.1s; transition: color 0.1s;
color: var(--message-box-markdown-color);
justify-content: center; justify-content: center;
&:hover, &:hover,
@ -34,6 +35,12 @@
} }
} }
&-link {
color: currentColor;
font-size: 0.75rem;
}
&-icon { &-icon {
fill: currentColor; fill: currentColor;
stroke: currentColor; stroke: currentColor;
@ -50,7 +57,7 @@
stroke: none; stroke: none;
} }
&--inline_code { &--inline-code {
width: 16px; width: 16px;
height: 12px; height: 12px;
} }
@ -61,7 +68,7 @@
stroke: none; stroke: none;
} }
&--multi_line { &--multi-line {
width: 13px; width: 13px;
height: 11px; height: 11px;
} }

@ -11,8 +11,8 @@
<symbol id="icon-map-pin" viewBox="0 0 12 16"><g transform="translate(1 1)" stroke-width="1.5" fill="none" fill-rule="evenodd"><path d="M5 14s5-4.15 5-9.027C10 2.226 7.761 0 5 0S0 2.226 0 4.973C0 9.85 5 14 5 14z"/><circle cx="5" cy="5" r="2"/></g></symbol> <symbol id="icon-map-pin" viewBox="0 0 12 16"><g transform="translate(1 1)" stroke-width="1.5" fill="none" fill-rule="evenodd"><path d="M5 14s5-4.15 5-9.027C10 2.226 7.761 0 5 0S0 2.226 0 4.973C0 9.85 5 14 5 14z"/><circle cx="5" cy="5" r="2"/></g></symbol>
<symbol id="icon-md-bold" viewBox="0 0 8 10"><path d="M4.501 10H.928V.84h3.504c.842 0 1.504.206 1.986.616.483.41.724.967.724 1.67 0 .473-.153.9-.46 1.282-.307.38-.68.611-1.12.692V5.2c.626.08 1.123.32 1.491.72.368.4.552.903.552 1.508 0 .804-.274 1.434-.822 1.889-.548.455-1.308.682-2.282.682zm-2.43-8.15v2.939h1.827c.694 0 1.216-.123 1.565-.369.35-.245.524-.611.524-1.098 0-.465-.158-.827-.473-1.085-.315-.258-.757-.387-1.324-.387H2.07zm0 7.14h2.26c.689 0 1.211-.137 1.567-.412.355-.275.533-.677.533-1.206 0-.529-.185-.928-.555-1.196-.37-.27-.922-.404-1.654-.404H2.07v3.219z" fill-rule="evenodd"/></symbol> <symbol id="icon-md-bold" viewBox="0 0 8 10"><path d="M4.501 10H.928V.84h3.504c.842 0 1.504.206 1.986.616.483.41.724.967.724 1.67 0 .473-.153.9-.46 1.282-.307.38-.68.611-1.12.692V5.2c.626.08 1.123.32 1.491.72.368.4.552.903.552 1.508 0 .804-.274 1.434-.822 1.889-.548.455-1.308.682-2.282.682zm-2.43-8.15v2.939h1.827c.694 0 1.216-.123 1.565-.369.35-.245.524-.611.524-1.098 0-.465-.158-.827-.473-1.085-.315-.258-.757-.387-1.324-.387H2.07zm0 7.14h2.26c.689 0 1.211-.137 1.567-.412.355-.275.533-.677.533-1.206 0-.529-.185-.928-.555-1.196-.37-.27-.922-.404-1.654-.404H2.07v3.219z" fill-rule="evenodd"/></symbol>
<symbol id="icon-md-italic" viewBox="0 0 2 10"><path d="M.486 10h1.092V3.157H.486V10zm.546-8.233a.73.73 0 0 0 .54-.225.738.738 0 0 0 .221-.537.735.735 0 0 0-.222-.54.735.735 0 0 0-.54-.221.738.738 0 0 0-.536.222.73.73 0 0 0-.225.54c0 .207.075.386.225.536.15.15.33.225.537.225z" fill-rule="evenodd"/></symbol> <symbol id="icon-md-italic" viewBox="0 0 2 10"><path d="M.486 10h1.092V3.157H.486V10zm.546-8.233a.73.73 0 0 0 .54-.225.738.738 0 0 0 .221-.537.735.735 0 0 0-.222-.54.735.735 0 0 0-.54-.221.738.738 0 0 0-.536.222.73.73 0 0 0-.225.54c0 .207.075.386.225.536.15.15.33.225.537.225z" fill-rule="evenodd"/></symbol>
<symbol id="icon-md-inline_code" viewBox="0 0 16 12"><g stroke-width="1.5" fill="none" fill-rule="evenodd"><path d="M4.667 9.105L1.562 6l3.105-3.105"/><path d="M9.329 1.04L6.633 11.1 9.33 1.04z" stroke-linecap="square"/><path d="M11.333 2.895L14.438 6l-3.105 3.105"/></g></symbol> <symbol id="icon-md-inline-code" viewBox="0 0 16 12"><g stroke-width="1.5" fill="none" fill-rule="evenodd"><path d="M4.667 9.105L1.562 6l3.105-3.105"/><path d="M9.329 1.04L6.633 11.1 9.33 1.04z" stroke-linecap="square"/><path d="M11.333 2.895L14.438 6l-3.105 3.105"/></g></symbol>
<symbol id="icon-md-multi_line" viewBox="0 0 13 11"><g stroke-width="1.5" fill="none" fill-rule="evenodd"><path d="M8 1h4v5H2"/><path d="M4.536 9.571L1 6.036 4.536 2.5"/></g></symbol> <symbol id="icon-md-multi-line" viewBox="0 0 13 11"><g stroke-width="1.5" fill="none" fill-rule="evenodd"><path d="M8 1h4v5H2"/><path d="M4.536 9.571L1 6.036 4.536 2.5"/></g></symbol>
<symbol id="icon-md-strike" viewBox="0 0 12 11"><g fill-rule="evenodd"><path d="M2.62 7.607c.06.791.399 1.424 1.019 1.898.62.474 1.414.71 2.383.71 1.05 0 1.882-.248 2.498-.745.616-.497.924-1.167.924-2.01 0-.672-.207-1.207-.62-1.605-.412-.398-1.092-.715-2.04-.952l-.959-.254c-.63-.16-1.082-.353-1.355-.578a1.08 1.08 0 0 1-.41-.876c0-.465.186-.838.556-1.117.37-.28.86-.419 1.47-.419.571 0 1.04.132 1.406.397.366.264.589.631.67 1.101H9.31c-.046-.74-.368-1.348-.965-1.822C7.75.861 7.008.625 6.124.625c-.97 0-1.751.24-2.346.72-.594.48-.892 1.11-.892 1.888 0 .652.189 1.174.565 1.565.377.392.98.693 1.81.905l1.174.304c.63.157 1.094.364 1.39.622.296.259.444.582.444.972 0 .452-.202.828-.606 1.126-.404.299-.915.448-1.533.448-.652 0-1.189-.142-1.612-.425-.423-.284-.67-.665-.743-1.143H2.62z"/><path d="M.8 4.3h10.5v1.5H.8z"/></g></symbol> <symbol id="icon-md-strike" viewBox="0 0 12 11"><g fill-rule="evenodd"><path d="M2.62 7.607c.06.791.399 1.424 1.019 1.898.62.474 1.414.71 2.383.71 1.05 0 1.882-.248 2.498-.745.616-.497.924-1.167.924-2.01 0-.672-.207-1.207-.62-1.605-.412-.398-1.092-.715-2.04-.952l-.959-.254c-.63-.16-1.082-.353-1.355-.578a1.08 1.08 0 0 1-.41-.876c0-.465.186-.838.556-1.117.37-.28.86-.419 1.47-.419.571 0 1.04.132 1.406.397.366.264.589.631.67 1.101H9.31c-.046-.74-.368-1.348-.965-1.822C7.75.861 7.008.625 6.124.625c-.97 0-1.751.24-2.346.72-.594.48-.892 1.11-.892 1.888 0 .652.189 1.174.565 1.565.377.392.98.693 1.81.905l1.174.304c.63.157 1.094.364 1.39.622.296.259.444.582.444.972 0 .452-.202.828-.606 1.126-.404.299-.915.448-1.533.448-.652 0-1.189-.142-1.612-.425-.423-.284-.67-.665-.743-1.143H2.62z"/><path d="M.8 4.3h10.5v1.5H.8z"/></g></symbol>
<symbol id="icon-plus" viewBox="0 0 14 14"><g stroke-width="1.5" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M7 1v12M13 7H1"/></g></symbol> <symbol id="icon-plus" viewBox="0 0 14 14"><g stroke-width="1.5" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M7 1v12M13 7H1"/></g></symbol>
<symbol id="icon-sign-out" viewBox="0 0 512 512"><path d="M48 64h132c6.6 0 12 5.4 12 12v8c0 6.6-5.4 12-12 12H48c-8.8 0-16 7.2-16 16v288c0 8.8 7.2 16 16 16h132c6.6 0 12 5.4 12 12v8c0 6.6-5.4 12-12 12H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48zm279 19.5l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l132 131.4H172c-6.6 0-12 5.4-12 12v10c0 6.6 5.4 12 12 12h279.9L320 404.4c-4.7 4.7-4.7 12.3 0 17l7.1 7.1c4.7 4.7 12.3 4.7 17 0l164.5-164c4.7-4.7 4.7-12.3 0-17L344 83.5c-4.7-4.7-12.3-4.7-17 0z"/></symbol> <symbol id="icon-sign-out" viewBox="0 0 512 512"><path d="M48 64h132c6.6 0 12 5.4 12 12v8c0 6.6-5.4 12-12 12H48c-8.8 0-16 7.2-16 16v288c0 8.8 7.2 16 16 16h132c6.6 0 12 5.4 12 12v8c0 6.6-5.4 12-12 12H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48zm279 19.5l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l132 131.4H172c-6.6 0-12 5.4-12 12v10c0 6.6 5.4 12 12 12h279.9L320 404.4c-4.7 4.7-4.7 12.3 0 17l7.1 7.1c4.7 4.7 12.3 4.7 17 0l164.5-164c4.7-4.7 4.7-12.3 0-17L344 83.5c-4.7-4.7-12.3-4.7-17 0z"/></symbol>

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

@ -28,7 +28,7 @@
</svg> </svg>
</div> </div>
<textarea autofocus dir="auto" name="msg" maxlength="{{maxMessageLength}}" placeholder="{{_ 'Message'}}" rows="1" class="rc-message-box__textarea js-input-message autogrow-short"></textarea> <textarea autofocus dir="auto" name="msg" maxlength="{{maxMessageLength}}" placeholder="{{_ 'Message'}}" rows="1" class="rc-message-box__textarea js-input-message autogrow-short"></textarea>
{{# if sendIcon}} {{#if sendIcon}}
<div class="rc-message-box__icon js-send"> <div class="rc-message-box__icon js-send">
<svg class="rc-input__icon-svg rc-input__icon-svg--smile"> <svg class="rc-input__icon-svg rc-input__icon-svg--smile">
<use xlink:href="#icon-send"></use> <use xlink:href="#icon-send"></use>
@ -75,18 +75,23 @@
{{/if}} {{/if}}
</label> </label>
<div class="rc-message-box__toolbar-markdown"> {{#if showFormattingTips}}
<!--{{#if katexSyntax}} <div class="rc-message-box__toolbar-markdown">
<span><a href="https://github.com/Khan/KaTeX/wiki/Function-Support-in-KaTeX" target="_blank">{{katexSyntax}}</a></span> {{#each mdButtons}}
{{/if}}--> <button class="rc-message-box__toolbar-markdown-item rc-tooltip js-md" aria-label={{_ label}} data-link="{{link}}">
{{#each mdButtons}} {{#if icon}}
<button class="rc-message-box__toolbar-markdown-item rc-tooltip js-md" aria-label={{_ label}}> <svg class="rc-message-box__toolbar-markdown-icon rc-message-box__toolbar-markdown-icon--{{icon}}">
<svg class="rc-message-box__toolbar-markdown-icon rc-message-box__toolbar-markdown-icon--{{label}}"> <use xlink:href="#icon-md-{{icon}}"></use>
<use xlink:href="#icon-md-{{label}}"></use> </svg>
</svg> {{else}}
</button> {{#if link}}
{{/each}} <a href="{{link}}" target="_blank" class="rc-message-box__toolbar-markdown-link">{{label}}</a>
</div> {{/if}}
{{/if}}
</button>
{{/each}}
</div>
{{/if}}
{{else}} {{else}}
<div class="stream-info"> <div class="stream-info">
{{#if isBlockedOrBlocker}} {{#if isBlockedOrBlocker}}

@ -1,12 +1,7 @@
/* globals fileUpload KonchatNotification chatMessages */ /* globals fileUpload KonchatNotification chatMessages */
import toastr from 'toastr'; import toastr from 'toastr';
import mime from 'mime-type/with-db';
import moment from 'moment'; import moment from 'moment';
//import {VRecDialog} from 'meteor/rocketchat:ui-vrecord';
function katexSyntax() { function katexSyntax() {
if (RocketChat.katex.katex_enabled()) { if (RocketChat.katex.katex_enabled()) {
if (RocketChat.katex.dollar_syntax_enabled()) { if (RocketChat.katex.dollar_syntax_enabled()) {
@ -20,6 +15,10 @@ function katexSyntax() {
} }
function applyMd(e, t) { function applyMd(e, t) {
if (e.currentTarget.dataset.link) {
return false;
}
e.preventDefault(); e.preventDefault();
const box = t.find('.js-input-message'); const box = t.find('.js-input-message');
const {selectionEnd = box.value.length, selectionStart = 0} = box; const {selectionEnd = box.value.length, selectionStart = 0} = box;
@ -83,37 +82,44 @@ function applyMd(e, t) {
const markdownButtons = [ const markdownButtons = [
{ {
label: 'bold', label: 'bold',
icon: 'bold',
pattern: '*{{text}}*', pattern: '*{{text}}*',
group: 'showMarkdown', command: 'b',
command: 'b' condition: () => RocketChat.Markdown
}, },
{ {
label: 'italic', label: 'italic',
icon: 'italic',
pattern: '_{{text}}_', pattern: '_{{text}}_',
group: 'showMarkdown', command: 'i',
command: 'i' condition: () => RocketChat.Markdown
}, },
{ {
label: 'strike', label: 'strike',
icon: 'strike',
pattern: '~{{text}}~', pattern: '~{{text}}~',
group: 'showMarkdown' condition: () => RocketChat.Markdown
}, },
{ {
label: 'inline_code', label: 'inline_code',
icon: 'inline-code',
pattern: '`{{text}}`', pattern: '`{{text}}`',
group: 'showMarkdownCode' condition: () => RocketChat.Markdown
}, },
{ {
label: 'multi_line', label: 'multi_line',
icon: 'multi-line',
pattern: '```\n{{text}}\n``` ', pattern: '```\n{{text}}\n``` ',
group: 'showMarkdownCode' condition: () => RocketChat.MarkdownCode
},
{
label: katexSyntax,
link: 'https://github.com/Khan/KaTeX/wiki/Function-Support-in-KaTeX',
condition: () => RocketChat.katex
} }
]; ];
Template.messageBox.helpers({ Template.messageBox.helpers({
toString(obj) {
return JSON.stringify(obj);
},
columns() { columns() {
const groups = RocketChat.messageBox.actions.get(); const groups = RocketChat.messageBox.actions.get();
const sorted = Object.keys(groups).sort((a, b) => groups[b].length - groups[a].length); const sorted = Object.keys(groups).sort((a, b) => groups[b].length - groups[a].length);
@ -138,7 +144,7 @@ Template.messageBox.helpers({
return columns; return columns;
}, },
mdButtons() { mdButtons() {
return markdownButtons; return markdownButtons.filter(button => !button.condition || button.condition());
}, },
roomName() { roomName() {
const roomData = Session.get(`roomData${ this._id }`); const roomData = Session.get(`roomData${ this._id }`);
@ -158,20 +164,8 @@ Template.messageBox.helpers({
return roomData.name; return roomData.name;
} }
}, },
showMarkdown() {
return RocketChat.Markdown;
},
showMarkdownCode() {
return RocketChat.MarkdownCode;
},
showKatex() {
return RocketChat.katex;
},
katexSyntax() {
return katexSyntax();
},
showFormattingTips() { showFormattingTips() {
return RocketChat.settings.get('Message_ShowFormattingTips') && (RocketChat.Markdown || RocketChat.MarkdownCode || katexSyntax()); return RocketChat.settings.get('Message_ShowFormattingTips');
}, },
canJoin() { canJoin() {
return Meteor.userId() && RocketChat.roomTypes.verifyShowJoinLink(this._id); return Meteor.userId() && RocketChat.roomTypes.verifyShowJoinLink(this._id);
@ -261,46 +255,9 @@ Template.messageBox.helpers({
return 'hidden'; return 'hidden';
} }
}, },
fileUploadEnabled() {
return RocketChat.settings.get('FileUpload_Enabled');
},
fileUploadAllowedMediaTypes() {
return RocketChat.settings.get('FileUpload_MediaTypeWhiteList');
},
showFileUpload() {
let roomData;
if (RocketChat.settings.get('FileUpload_Enabled')) {
roomData = Session.get(`roomData${ this._id }`);
if (roomData && roomData.t === 'd') {
return RocketChat.settings.get('FileUpload_Enabled_Direct');
} else {
return true;
}
} else {
return RocketChat.settings.get('FileUpload_Enabled');
}
},
showMic() {
return Template.instance().showMicButton.get();
},
showVRec() {
return Template.instance().showVideoRec.get();
},
showSend() {
if (!Template.instance().isMessageFieldEmpty.get()) {
return 'show-send';
}
},
showLocation() {
return RocketChat.Geolocation.get() !== false;
},
notSubscribedTpl() { notSubscribedTpl() {
return RocketChat.roomTypes.getNotSubscribedTpl(this._id); return RocketChat.roomTypes.getNotSubscribedTpl(this._id);
}, },
showSandstorm() {
return Meteor.settings['public'].sandstorm && !Meteor.isCordova;
},
anonymousRead() { anonymousRead() {
return (Meteor.userId() == null) && RocketChat.settings.get('Accounts_AllowAnonymousRead') === true; return (Meteor.userId() == null) && RocketChat.settings.get('Accounts_AllowAnonymousRead') === true;
}, },
@ -462,54 +419,6 @@ Template.messageBox.events({
'click .editing-commands-save > button'() { 'click .editing-commands-save > button'() {
return chatMessages[this._id].send(this._id, chatMessages[this._id].input); return chatMessages[this._id].send(this._id, chatMessages[this._id].input);
}, },
'change .message-form input[type=file]'(event) {
const e = event.originalEvent || event;
let files = e.target.files;
if (!files || files.length === 0) {
files = (e.dataTransfer && e.dataTransfer.files) || [];
}
const filesToUpload = [...files].map(file => {
// `file.type = mime.lookup(file.name)` does not work.
Object.defineProperty(file, 'type', {
value: mime.lookup(file.name)
});
return {
file,
name: file.name
};
});
return fileUpload(filesToUpload);
},
'click .message-buttons.share'(e, t) {
t.$('.share-items').toggleClass('hidden');
return t.$('.message-buttons.share').toggleClass('active');
},
'click .sandstorm-offer'() {
const roomId = this._id;
return RocketChat.Sandstorm.request('uiView', (err, data) => {
if (err || !data.token) {
console.error(err);
return;
}
return Meteor.call('sandstormClaimRequest', data.token, data.descriptor, function(err, viewInfo) {
if (err) {
console.error(err);
return;
}
Meteor.call('sendMessage', {
_id: Random.id(),
rid: roomId,
msg: '',
urls: [
{
url: 'grain://sandstorm',
sandstormViewInfo: viewInfo
}
]
});
});
});
},
'click .js-md'(e, t) { 'click .js-md'(e, t) {
applyMd.apply(this, [e, t]); applyMd.apply(this, [e, t]);
} }
@ -527,27 +436,7 @@ Template.messageBox.onRendered(function() {
Template.messageBox.onCreated(function() { Template.messageBox.onCreated(function() {
this.isMessageFieldEmpty = new ReactiveVar(true); this.isMessageFieldEmpty = new ReactiveVar(true);
this.showMicButton = new ReactiveVar(false);
this.showVideoRec = new ReactiveVar(false);
this.showVideoRec = new ReactiveVar(false);
this.sendIcon = new ReactiveVar(false); this.sendIcon = new ReactiveVar(false);
return this.autorun(() => {
const videoRegex = /video\/webm|video\/\*/i;
const videoEnabled = !RocketChat.settings.get('FileUpload_MediaTypeWhiteList') || RocketChat.settings.get('FileUpload_MediaTypeWhiteList').match(videoRegex);
if (RocketChat.settings.get('Message_VideoRecorderEnabled') && ((navigator.getUserMedia != null) || (navigator.webkitGetUserMedia != null)) && videoEnabled && RocketChat.settings.get('FileUpload_Enabled')) {
this.showVideoRec.set(true);
} else {
this.showVideoRec.set(false);
}
const wavRegex = /audio\/wav|audio\/\*/i;
const wavEnabled = !RocketChat.settings.get('FileUpload_MediaTypeWhiteList') || RocketChat.settings.get('FileUpload_MediaTypeWhiteList').match(wavRegex);
if (RocketChat.settings.get('Message_AudioRecorderEnabled') && ((navigator.getUserMedia != null) || (navigator.webkitGetUserMedia != null)) && wavEnabled && RocketChat.settings.get('FileUpload_Enabled')) {
return this.showMicButton.set(true);
} else {
return this.showMicButton.set(false);
}
});
}); });
Meteor.startup(function() { Meteor.startup(function() {

Loading…
Cancel
Save