Commit Graph

28 Commits

Author SHA1 Message Date
Sankalp 437332ff5d
css: Fix horizontal scrolling of markdown table when overflow.
Previously Zulip's markdown tables didn't properly configure the overflow CSS rules
to allow proper scrolling.

Fixes #16205.
2020-08-31 18:44:14 -07:00
Aman Agrawal a6940926cc rendered_markdown: Move 27217fd and 5d0960a to rendered_markdown.
Changes to bootstrap.css made by us after these are not relevant:
d7f9a21 - Reducing z-index of overlay doesn't make sense.
9b740df - some changes were added.
1143ed7 - changes in above commit were moved to a different file.
2020-08-31 14:01:11 -07:00
Sumanth V Rao d9c4181243 css: Display copy_codeblock button during hover only. 2020-08-26 23:20:03 -07:00
Sumanth V Rao 3eddb0dd82 css: Avoid displaying copy_codeblock button in previews.
Having this option in preview feels rather odd. The code here
would either be pasted from elsewhere (in which case it would
be in the clipboard already) or it could be copied from the
writebox just as easily.
2020-08-26 23:20:00 -07:00
Sumanth V Rao 9e5f794133 css: Add styling for copy_codeblock button. 2020-08-26 23:18:05 -07:00
Anders Kaseorg 768f9f93cd docs: Capitalize Markdown consistently.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-11 10:23:06 -07:00
Anders Kaseorg 483445e3d3 styles: Remove unit from 0 lengths.
Generated by stylelint --fix.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-06 11:34:44 -07:00
Anders Kaseorg 3572dcc67c styles: Remove shorthand property overrides.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-06 11:34:44 -07:00
Anders Kaseorg c6ed5c81de styles: Format CSS with Prettier.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-04 16:34:19 -07:00
Rohitt Vashishtha 912e372c4e markdown: Remove !avatar() and !gravatar() syntax.
This particular commit has been a long time coming. For reference,
!avatar(email) was an undocumented syntax that simply rendered an
inline 50px avatar for a user in a message, essentially allowing
you to create a user pill like:

`!avatar(alice@example.com) Alice: hey!`

---

Reimplementation

If we decide to reimplement this or a similar feature in the future,
we could use something like `<avatar:userid>` syntax which is more
in line with creating links in markdown. Even then, it would not be
a good idea to add this instead of supporting inline images directly.

Since any usecases of such a syntax are in automation, we do not need
to make it userfriendly and something like the following is a better
implementation that doesn't need a custom syntax:

`![avatar for Alice](/avatar/1234?s=50) Alice: hey!`

---

History

We initially added this syntax back in 2012 and it was 'deprecated'
from the get go. Here's what the original commit had to say about
the new syntax:

> We'll use this internally for the commit bot.  We might eventually
> disable it for external users.

We eventually did start using this for our github integrations in 2013
but since then, those integrations have been neglected in favor of
our GitHub webhooks which do not use this syntax.

When we copied `!gravatar` to add the `!avatar` syntax, we also noted
that we want to deprecate the `!gravatar` syntax entirely - in 2013!

Since then, we haven't advertised either of these syntaxes anywhere
in our docs, and the only two places where this syntax remains is
our game bots that could easily do without these, and the git commit
integration that we have deprecated anyway.

We do not have any evidence of someone asking about this syntax on
chat.zulip.org when developing an integration and rightfully so- only
the people who work on Zulip (and specifically, markdown) are likely
to stumble upon it and try it out.

This is also the only peice of code due to which we had to look up
emails -> userid mapping in our backend markdown. By removing this,
we entirely remove the backend markdown's dependency on user emails
to render messages.

---

Relevant commits:

- Oct 2012, Initial commit        c31462c278
- Nov 2013, Update commit bot     968c393826
- Nov 2013, Add avatar syntax     761c0a0266
- Sep 2017, Avoid email use       c3032a7fe8
- Apr 2019, Remove from webhook   674fcfcce1
2020-07-07 10:39:44 -07:00
Rohitt Vashishtha 6ea3816fa6 markdown: Use html5 <time> tag for timestamps.
Previously, we had implemented:
    <span class="timestamp" data-timestamp="unix time">Original text</span>
The new syntax is:
    <time timestamp="ISO 8601 string">Original text</time>
    <span class="timestamp-error">Invalid time format: Original text</span>

Since python and JS interpretations of the ISO format are very
slightly different, we force both of them to drop milliseconds
and use 'Z' instead of '+00:00' to represent that the string is
in UTC. The resultant strings look like: 2011-04-11T10:20:30Z.

Fixes #15431.
2020-06-18 14:11:33 -07:00
Sara Gulotta 1cb040647b markdown: Add support for spoilers.
This adds support for a "spoiler" syntax in Zulip's markdown, which
can be used to hide content that one doesn't want to be immediately
visible without a click.

We use our own spoiler block syntax inspired by Zulip's existing quote
and math block markdown extensions, rather than requiring a token on
every line, as is present in some other markdown spoiler
implementations.

Fixes #5802.

Co-authored-by: Dylan Nugent <dylnuge@gmail.com>
2020-06-16 16:14:10 -07:00
Sharif Naas 78691b13ad css: Extract message_edit_history.scss.
Note that the .rendered_markdown selector is incorrect, and will be
fixed in a following commit.
2020-06-07 13:57:28 -07:00
Rohitt Vashishtha 648307ef33 rendered_markdown: Add rendering functions for timestamps.
This code generates the timestamp string to be shown to the user
from the given timestamp in unix format using moment.js.

We also render the timestamp in a pill.
2020-05-21 12:37:37 -07:00
Anders Kaseorg c00f626f8e styles: Fix code block white-space for Python-Markdown upgrade.
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2020-04-22 15:03:24 -07:00
Siddharth Varshney 2d11d58c9a ui: Fix deleted msg color in Message edit history modal.
New colors are introduced in msg edit history modal for better readability
These color will have better constrat with their background colors

Fixes #13622
2020-04-20 15:42:24 -07:00
Anders Kaseorg 43ac901ad9 styles: Fix code block styling for Python-Markdown upgrade.
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2020-04-18 20:39:21 -07:00
Tim Abbott f644f5fc2c css: Change emoji size within text to 20x20px.
We've often gotten the complaint that Zulip's emoji are a bit too big;
this should address the worst consequences of that (line-wrapping
being off with large emoji present) while still making it possible to
easily see what a given emoji is.

The right place to change this is in rendered_markdown.scss, not the
main emoji definition in zulip.scss, as the latter is also used in
places like the emoji picker where a larger size is valuable.

Closes #12731, an older PR that did this with slightly different
parameters (and without a comment).
2020-03-22 15:09:49 -07:00
Anders Kaseorg 6bab61a0d6 styles: Remove overrides for KaTeX line-height and white-space.
Commit ba66dfe977 incorrectly inflated
the specificity level of these rules by moving them inside
.rendered_markdown “entirely for readability”.  KaTeX has its own
rules that work better, so just delete ours.

Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-09-10 16:03:20 -07:00
Thomas Ip 574c35c0b8 markdown: Render ordered lists using <ol> markup.
This brings us in line, and also allows us to style these more like
unordered lists, which is visually more appealing.

On the backend, we now use the default list blockprocessor + sane list
extension of python-markdown to get proper list markup; on the
frontend, we mostly return to upstream's code as they have followed
CommonMark on this issue.

Using <ol> here necessarily removes the behaviour of not renumbering
on lists written like 3, 4, 7; hopefully users will be OK with the
change.

Fixes #12822.
2019-09-08 16:42:20 -07:00
Anders Kaseorg abbd8a7f45 styles: Remove most vendor-prefixed CSS attributes.
Many of them are now automatically generated by autoprefixer, while
others are unnecessary based on .browserslistrc, and some were just
wrong (the linear-gradient based checkerboard pattern in lightbox has
been broken in Firefox for a while).

Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-08-30 14:51:52 -07:00
Rohitt Vashishtha a7f2bedb15 markdown: Enable hashheadings syntax.
Our implementation requires at least 1 space after the
'#' not not break existing linkifiers like '#123', etc.
that generally follow the convention we show in linkifier
examples.

- [valid]  : # Hello
- [valid]  : #  Hello
- [invalid]: #Hello

For the frontend, we have taken the code from v0.7.0 of
upstream marked and made minor changes to avoid having
to refactor a significant part of our marked code.

For the backend, we merely have to change the regex to
force require spaces after #, and add hashheader to our
list of blockparsers.

Fixes #11418.
2019-08-02 15:15:34 -07:00
Tim Abbott 38ffde37e5 css: Move edit history highlighting CSS into rendered_markdown. 2019-07-31 12:08:17 -07:00
Tim Abbott 28fc159d24 css: Move more embed CSS into rendered_markdown. 2019-07-31 12:08:17 -07:00
Tim Abbott 4fbc74bb0b css: Delete custom CSS for message-edit-history.
This logic effectively badly duplicated the existing rendered_markdown
CSS.
2019-07-31 12:08:17 -07:00
Tim Abbott ba66dfe977 css: Scope KaTeX CSS inside rendered_markdown.
This is entirely for readability.
2019-07-31 12:08:17 -07:00
Tim Abbott 5b732437c1 css: Scope mentions and alert words in rendered_markdown. 2019-07-31 12:08:17 -07:00
Tim Abbott 97b256d1f0 css: Extract rendered_markdown.scss.
This moves our main CSS for rendered Zulip message content into an
external file, which may be reusable but in any case should make it
easier to find this content.
2019-07-31 12:08:17 -07:00