Feature/JS-4830: Inline latex

src/scss/block/text.scss

@@ -27,6 +27,8 @@
  }
  markuplink.disabled, markupobject.disabled { border-width: 0px; }
 
+ markuplatex { user-select: all !important; }
+
  markupmention { display: inline; user-select: all !important; position: relative; cursor: default; white-space: nowrap; }
  markupmention * { user-select: text !important; }
  markupmention {

src/scss/widget/view/calendar.scss

@@ -37,12 +37,10 @@
  }
  }
 
- .day { @include text-common; }
+ .day, .day .inner { display: flex; flex-direction: row; align-items: center; justify-content: center; }
  .day.today { color: var(--color-system-accent-125); font-weight: 500; }
  .day.other { color: var(--color-text-secondary); }
 
- .day, .day .inner { display: flex; flex-direction: row; align-items: center; justify-content: center; }
-
  .day {
  .inner { width: 100%; max-width: 28px; height: 28px; border-radius: 4px; transition: $transitionAllCommon; position: relative; }
  .bullet { width: 3px; height: 3px; border-radius: 50%; position: absolute; bottom: 2px; left: 50%; margin-left: -1.5px; background: var(--color-control-active); }

src/ts/component/block/text.tsx

@@ -24,6 +24,9 @@ for (const lang of langs) {
  require(`prismjs/components/prism-${lang}.js`);
 };
 
+const katex = require('katex');
+require('katex/dist/contrib/mhchem');
+
 const BlockText = observer(class BlockText extends React.Component<Props> {
 
  public static defaultProps = {
@@ -220,6 +223,7 @@ const BlockText = observer(class BlockText extends React.Component<Props> {
 
  this.marks = U.Common.objectCopy(marks || []);
  this.setValue(text);
+ this.renderLatex();
  };
 
  componentDidUpdate () {
@@ -237,6 +241,8 @@ const BlockText = observer(class BlockText extends React.Component<Props> {
 
  if (focused == block.id) {
  focus.apply();
+ } else {
+ this.renderLatex();
  };
 
  if (onUpdate) {
@@ -589,6 +595,42 @@ const BlockText = observer(class BlockText extends React.Component<Props> {
  });
  };
 
+ renderLatex () {
+ if (!this._isMounted) {
+ return;
+ };
+
+ const value = this.refEditable.getHtmlValue();
+ const reg = /\$((?:[^$\\]|\\.)*?)\$/g;
+
+ if (!reg.test(value)) {
+ return;
+ };
+
+ const tag = Mark.getTag(I.MarkType.Latex);
+ const html = value.replace(reg, (s: string, p: string, o: number) => {
+ let ret = '';
+ try {
+ ret = katex.renderToString(U.Common.stripTags(p), { 
+ displayMode: false, 
+ throwOnError: false,
+ output: 'html',
+ trust: ctx => [ '\\url', '\\href', '\\includegraphics' ].includes(ctx.command),
+ });
+
+ ret = ret ? `<${tag}>${ret}</${tag}>` : s;
+ } catch (e) {
+ ret = s;
+ };
+
+ return ret;
+ });
+
+ if (this.refEditable && (html !== value)) {
+ this.refEditable.setValue(html);
+ };
+ };
+
  emojiParam (style: I.TextStyle) {
  let size = 24;
  switch (style) {
@@ -699,17 +741,6 @@ const BlockText = observer(class BlockText extends React.Component<Props> {
  { key: `ctrl+shift+l` },
  { key: `ctrl+shift+/` },
  ];
-
- if (isInsideTable) {
- if (!range.to) {
- saveKeys.push({ key: `arrowleft, arrowup` });
- };
-
- if (range.to == value.length) {
- saveKeys.push({ key: `arrowright, arrowdown` });
- };
- };
-
  const twinePairs = {
  '[': ']',
  '{': '}',
@@ -722,8 +753,19 @@ const BlockText = observer(class BlockText extends React.Component<Props> {
  '（': '）',
  '“': '”',
  '‘': '’',
+ '$': '$',
  };
 
+ if (isInsideTable) {
+ if (!range.to) {
+ saveKeys.push({ key: `arrowleft, arrowup` });
+ };
+
+ if (range.to == value.length) {
+ saveKeys.push({ key: `arrowright, arrowdown` });
+ };
+ };
+
  for (let i = 0; i < 9; ++i) {
  saveKeys.push({ key: `${cmd}+${i}` });
  };
@@ -1241,11 +1283,13 @@ const BlockText = observer(class BlockText extends React.Component<Props> {
  };
 
  onFocus (e: any) {
- const { onFocus } = this.props;
+ const { onFocus, block } = this.props;
 
  e.persist();
 
  this.placeholderCheck();
+ this.setValue(block.getText());
+
  keyboard.setFocus(true);
 
  if (onFocus) {
@@ -1283,6 +1327,8 @@ const BlockText = observer(class BlockText extends React.Component<Props> {
  if (key) {
  analytics.event(key);
  };
+
+ this.renderLatex();
  };
 
  onPaste (e: any) {

src/ts/component/util/iconObject.tsx

@@ -557,6 +557,7 @@ const IconObject = observer(class IconObject extends React.Component<Props> {
  let name = String(object.name || translate('defaultNamePage'));
  name = U.Smile.strip(name);
  name = name.trim().substring(0, 1).toUpperCase();
+ name = U.Common.htmlSpecialChars(name);
 
  return name;
  };

src/ts/interface/block/text.ts

@@ -29,6 +29,7 @@ export enum MarkType {
  Mention = 8,
  Emoji = 9,
  Object = 10,
+ Latex = 11,
 
  Change = 100,
  Highlight = 101,

src/ts/lib/mark.ts

@@ -1,6 +1,13 @@
 import $ from 'jquery';
 import { I, U, J, analytics } from 'Lib';
 
+const Tags = {};
+for (const i in I.MarkType) {
+ if (!isNaN(Number(i))) {
+ Tags[i] = `markup${I.MarkType[i].toLowerCase()}`;
+ };
+};
+
 const Patterns = {
  '-→': '⟶',
  '—>': '⟶',
@@ -23,8 +30,7 @@ const Patterns = {
  '...': '…',
 };
 
-const Order: any = {};
-[
+const Order = [
  I.MarkType.Change,
  I.MarkType.Object,
  I.MarkType.Emoji,
@@ -37,7 +43,7 @@ const Order: any = {};
  I.MarkType.Color,
  I.MarkType.BgColor,
  I.MarkType.Code,
-].forEach((type, i) => Order[type] = i);
+];
 
 class Mark {
 
@@ -139,8 +145,8 @@ class Mark {
  };
 
  sort (c1: I.Mark, c2: I.Mark) {
- const o1 = Order[c1.type];
- const o2 = Order[c2.type];
+ const o1 = Order.indexOf(c1.type);
+ const o2 = Order.indexOf(c2.type);
  if (o1 > o2) return 1;
  if (o1 < o2) return -1;
  if (c1.range.from > c2.range.from) return 1;
@@ -543,6 +549,8 @@ class Mark {
  return s;
  });
 
+ marks = this.checkRanges(text, marks);
+
  // Links
  html.replace(/\[([^\[\]]+)\]\(([^\(\)]+)\)(\s|$)/g, (s: string, p1: string, p2: string, p3: string) => {
  p1 = String(p1 || '');
@@ -629,22 +637,27 @@ class Mark {
  };
 
  switch (type) {
- case I.MarkType.Link:
+ case I.MarkType.Link: {
  attr = `href="${param}"`;
  break;
+ };
 
  case I.MarkType.Mention:
- case I.MarkType.Emoji:
+ case I.MarkType.Emoji: {
  attr = 'contenteditable="false"';
  break;
+ };
 
- case I.MarkType.Color:
+ case I.MarkType.Color: {
  attr = `class="textColor textColor-${param}"`;
  break;
+ };
 
- case I.MarkType.BgColor:
+ case I.MarkType.BgColor: {
  attr = `class="bgColor bgColor-${param}"`;
  break;
+ };
+
  };
  return attr;
  };