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%;
height: 24px;
color: var(--message-box-markdown-color);
justify-content: center;
&-item {
display: flex;
width: 16px;
min-width: 16px;
margin: 0 4px;
transition: color 0.1s;
color: var(--message-box-markdown-color);
justify-content: center;
&:hover,
@ -34,6 +35,12 @@
}
}
&-link {
color: currentColor;
font-size: 0.75rem;
}
&-icon {
fill: currentColor;
stroke: currentColor;
@ -50,7 +57,7 @@
stroke: none;
}
&--inline_code {
&--inline-code {
width: 16px;
height: 12px;
}
@ -61,7 +68,7 @@
stroke: none;
}
&--multi_line {
&--multi-line {
width: 13px;
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-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-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-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-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-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>
</div>
<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">
<svg class="rc-input__icon-svg rc-input__icon-svg--smile">
<use xlink:href="#icon-send"></use>
@ -75,18 +75,23 @@
{{/if}}
</label>
<div class="rc-message-box__toolbar-markdown">
<!--{{#if katexSyntax}}
<span><a href="https://github.com/Khan/KaTeX/wiki/Function-Support-in-KaTeX" target="_blank">{{katexSyntax}}</a></span>
{{/if}}-->
{{#each mdButtons}}
<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--{{label}}">
<use xlink:href="#icon-md-{{label}}"></use>
</svg>
</button>
{{/each}}
</div>
{{#if showFormattingTips}}
<div class="rc-message-box__toolbar-markdown">
{{#each mdButtons}}
<button class="rc-message-box__toolbar-markdown-item rc-tooltip js-md" aria-label={{_ label}} data-link="{{link}}">
{{#if icon}}
<svg class="rc-message-box__toolbar-markdown-icon rc-message-box__toolbar-markdown-icon--{{icon}}">
<use xlink:href="#icon-md-{{icon}}"></use>
</svg>
{{else}}
{{#if link}}
<a href="{{link}}" target="_blank" class="rc-message-box__toolbar-markdown-link">{{label}}</a>
{{/if}}
{{/if}}
</button>
{{/each}}
</div>
{{/if}}
{{else}}
<div class="stream-info">
{{#if isBlockedOrBlocker}}

@ -1,12 +1,7 @@
/* globals fileUpload KonchatNotification chatMessages */
import toastr from 'toastr';
import mime from 'mime-type/with-db';
import moment from 'moment';
//import {VRecDialog} from 'meteor/rocketchat:ui-vrecord';
function katexSyntax() {
if (RocketChat.katex.katex_enabled()) {
if (RocketChat.katex.dollar_syntax_enabled()) {
@ -20,6 +15,10 @@ function katexSyntax() {
}
function applyMd(e, t) {
if (e.currentTarget.dataset.link) {
return false;
}
e.preventDefault();
const box = t.find('.js-input-message');
const {selectionEnd = box.value.length, selectionStart = 0} = box;
@ -83,37 +82,44 @@ function applyMd(e, t) {
const markdownButtons = [
{
label: 'bold',
icon: 'bold',
pattern: '*{{text}}*',
group: 'showMarkdown',
command: 'b'
command: 'b',
condition: () => RocketChat.Markdown
},
{
label: 'italic',
icon: 'italic',
pattern: '_{{text}}_',
group: 'showMarkdown',
command: 'i'
command: 'i',
condition: () => RocketChat.Markdown
},
{
label: 'strike',
icon: 'strike',
pattern: '~{{text}}~',
group: 'showMarkdown'
condition: () => RocketChat.Markdown
},
{
label: 'inline_code',
icon: 'inline-code',
pattern: '`{{text}}`',
group: 'showMarkdownCode'
condition: () => RocketChat.Markdown
},
{
label: 'multi_line',
icon: 'multi-line',
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({
toString(obj) {
return JSON.stringify(obj);
},
columns() {
const groups = RocketChat.messageBox.actions.get();
const sorted = Object.keys(groups).sort((a, b) => groups[b].length - groups[a].length);
@ -138,7 +144,7 @@ Template.messageBox.helpers({
return columns;
},
mdButtons() {
return markdownButtons;
return markdownButtons.filter(button => !button.condition || button.condition());
},
roomName() {
const roomData = Session.get(`roomData${ this._id }`);
@ -158,20 +164,8 @@ Template.messageBox.helpers({
return roomData.name;
}
},
showMarkdown() {
return RocketChat.Markdown;
},
showMarkdownCode() {
return RocketChat.MarkdownCode;
},
showKatex() {
return RocketChat.katex;
},
katexSyntax() {
return katexSyntax();
},
showFormattingTips() {
return RocketChat.settings.get('Message_ShowFormattingTips') && (RocketChat.Markdown || RocketChat.MarkdownCode || katexSyntax());
return RocketChat.settings.get('Message_ShowFormattingTips');
},
canJoin() {
return Meteor.userId() && RocketChat.roomTypes.verifyShowJoinLink(this._id);
@ -261,46 +255,9 @@ Template.messageBox.helpers({
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() {
return RocketChat.roomTypes.getNotSubscribedTpl(this._id);
},
showSandstorm() {
return Meteor.settings['public'].sandstorm && !Meteor.isCordova;
},
anonymousRead() {
return (Meteor.userId() == null) && RocketChat.settings.get('Accounts_AllowAnonymousRead') === true;
},
@ -462,54 +419,6 @@ Template.messageBox.events({
'click .editing-commands-save > button'() {
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) {
applyMd.apply(this, [e, t]);
}
@ -527,27 +436,7 @@ Template.messageBox.onRendered(function() {
Template.messageBox.onCreated(function() {
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);
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() {

Loading…
Cancel
Save