Commit Graph

62 Commits

Author SHA1 Message Date
N-Shar-ma 38587b79b9 compose: Always preserve cursor position post replacement in a textarea.
Refactored (moved) the code for preserving the cursor's initial logical
position from `quote_and_reply()` in `compose_actions.js` which calls
`replace_syntax()` directly into `replace_syntax()` in `compose_ui.js`.
This ensures that anytime text in a textarea is replaced, the original
cursor position is always restored.

Earlier, this was needed to be done separately, and missing that would
lead to bugs with the cursor unexpectedly jumping on replacement.

Fixes: #23863.
2022-12-14 12:40:51 -08:00
Aman Agrawal a1aaf4a52d compose: Fix file link text being selected after upload.
https://github.com/fregante/text-field-edit/pull/18 adds the option
for `replace` function to not select the replaced text. We use it
to fix the issue of file link being selected after user uploads
a file via `drag-drop`.
2022-11-27 13:32:02 -08:00
Aman Agrawal 77c7fe4699 Revert "compose_ui: Revert changes for replace_syntax done in 1ca4566eb2."
This reverts commit 5c833f0423.
2022-11-27 13:32:02 -08:00
Sahil Batra 5c833f0423 compose_ui: Revert changes for replace_syntax done in 1ca4566eb2.
This commit reverts the changes for replace_syntax in 1ca4566eb2
and we again use JS replace instead of replace from text-field-edit.

We do this change because replace from text-field-edit leaves the
replaced text selected, which we don't want. This change is
temporary and we can probably use replace method from
text-field-edit once this issue is fixed in upstream.
2022-11-17 08:29:11 -08:00
Tim Abbott 1ca4566eb2 compose: Use text-area-edit for syntax replacements.
Fixes #23284
The basic approach used by `text-area-edit` is same as we were
using, so there is no real change. There are some nice checks
in `text-area-edit` which we don't do that helps us avoid
common bugs.
2022-11-10 16:15:33 -08:00
Riken Shah 3ba89e7779 message_scroll: Use CSS transition for scroll to bottom button.
We are abandoning jQuery animation because it build up queue
when there is continous switch in animation state.
i.e When user goes ↑↓↑↓↑↓… at the bottom.

Also added `aria-hidden` to `#scroll-to-bottom-button-container` so
that this widget doesn't interfere with screen readers.
2022-07-13 13:50:55 -07:00
Anders Kaseorg f84a2c08d5 js: Prefix jQuery object variable names with $.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-03-16 12:52:07 -07:00
Aman Agrawal 0eafa6039b message_scroll: Show scroll to bottom button.
Show/hide scroll to bottom button when the last message is
not visible in the current scroll position.

We adjust the bottom offset of the button based on compose box
height.

Fixes #19862
2022-02-18 13:29:57 -08:00
Anders Kaseorg b0ce4f1bce docs: Fix many spelling mistakes.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-02-07 18:51:06 -08:00
Aman Agrawal ec48f29daf compose: Check if compose control btn popover has the clicked element.
This is necessary to avoid a poptention bug where the popover
is open but the button is clicked somewhere else.
2021-12-04 06:52:18 -08:00
Aman Agrawal d749438551 compose_ui: Use white spinner on both dark and light theme.
Fixed alignment slightly.
2021-12-04 06:52:18 -08:00
Aman Agrawal b4c2c97ffd compose: Extract method to get compose click target. 2021-12-03 14:29:26 -08:00
Aman Agrawal a64f6edc2a compose: Use loading spinner as loading indicator. 2021-12-02 15:11:15 -08:00
Aman Agrawal c750d0e404 compose: Trim selected text before formatting.
We remove new line and space characters around the selected
text and then apply the requested formatting.
2021-10-01 16:45:51 -07:00
Aman Agrawal 58172fe21a compose: Allow user to undo formatting.
For text that already has the formatting that the user is
trying to apply, we undo the formatting. This gives a nice
experience of applying and removing the formatting from text
on the same button press.
2021-10-01 16:45:50 -07:00
Anders Kaseorg 3845ac2b56 compose_ui: Fix ESLint no-case-declaration error.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-09-07 15:43:38 -07:00
Aman Agrawal 1347ee98ee compose: Extract function to format text in compose_ui.
Along with the extraction, we do some simplifications of inserting
text in compose too. This same function can now be used in
compose formatting popover too.

We use "text-field-edit", which has good cross-browser `undo` /
`redo` support, to do the text replace for us instead of writing
that logic ourselves.
2021-09-07 14:57:17 -07:00
Priyam Seth 3ec55e7976 compose: Move keydown and keyup from compose.js to compose_ui.js.
This commit moves the handle_keydown and handle_keydown functions
of compose.js to compose_ui.js.

Part of splitting compose.js.
2021-07-28 14:01:40 -07:00
Priyansh Garg c541699b9b compose: Fix expanded compose un-collapsible in presence of navbar_alerts.
The distance of compose-box from the top is hardcoded in the existing
code as `50px`, which only considers the height of the `.header`, plus the
padding-bottom of the header. This results in a bug where the top bar of
compose-box gets hidden behind the header if navbar_alerts is also present
in the view.

This commit calculates the top distance of the compose-box dynamically,
whenever the compose-box is opened and set the `top` property of the
compose-box accordingly.

Tested on my Ubuntu development environment.

Fixes: #19249.
2021-07-22 14:25:48 -07:00
Signior-X 6cf33c4275 compose: Add support for full size compose box.
This commit makes a working toggler in compose_actions that adds the
compose-fullscreen class to the compose that removes the max-height
from the compose textarea and adds flex elements above so that the
height automatically adjust with the device height. This results in
making the compose box full screen sized.

The compose_height.js maintains the state of the height of the compose
box. Also, when the compose box is closed, the compose box is reset to
it's default behaviour and original height. So, everytime user need
not toggle off the compose full size and only for specific message
it is used.

It also adds destroy autosize on compose_height state change.
It destroys the autosize of textarea when the full
screen sized compose box is toggled on. And everytime when it is
turned off, it reinitialises the autosize. This also adds a
condition in autosize_textarea to only autosize when composebox
is not in full height state.

Fixes #17660
2021-07-07 16:47:30 -07:00
Signior-X 3bdc7432b9 refactor: Move wrap_text_with_markdown into compose_ui.js.
This commit makes it possible to use wrap_text_with_markdown_outside
compose.js.

Part of #18692
2021-07-06 17:55:58 -07:00
Anders Kaseorg 2004a85fb1 i18n: Automatically convert remaining JavaScript messages to FormatJS.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-04-13 17:41:10 -07:00
Signior-X 66d7e711b2 refractor: Replace manual autosize of textarea with compose_ui autosize.
This commit make compose_ui.autosize_textarea handle most of the autosize
logic of the textarea. It audits for any logic that is trying to do
autosize manually and replace it with compose_ui.autosize_textarea.
This allows to have better check for when the textarea is autosized.

Mainly done this so that we can have a check on #compose-textarea when
to autosize and when not to, thus helping to have all the logic in only
one function.
2021-03-31 07:49:47 -07:00
Anders Kaseorg bb1b2048bd js: Convert static/js/i18n.js to ES6 module.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-03-26 10:17:56 -07:00
Anders Kaseorg 7656d44abc js: Simplify code using default parameters and destructuring.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-03-26 09:21:46 -07:00
Anders Kaseorg ea9ca6b7d0 js: Use jQuery as a module.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-03-12 10:08:25 -08:00
Anders Kaseorg dc95f06b62 js: Convert static/js/compose_ui.js to ES6 module.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-02-28 14:23:00 -08:00
Anders Kaseorg 583febeffd js: Convert static/js/user_status.js to ES6 module.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-02-10 10:27:14 -08:00
Anders Kaseorg 2f80415756 eslint: Fix unicorn/no-lonely-if.
https://github.com/sindresorhus/eslint-plugin-unicorn/blob/v24.0.0/docs/rules/no-lonely-if.md

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-12-22 16:14:28 -08:00
Anders Kaseorg 72d6ff3c3b docs: Fix more capitalization issues.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-10-23 11:46:55 -07:00
Priyansh Garg 6684247147 compose: Refactor autosize_textarea to work while editing messages.
Previously, compose_ui.autosize_textarea didn't work while editing
messages in many cases (uploading files, typeaheads, keydown handling,
etc.).

Refactored the autosize_textarea function in compose_ui to work
while editing messages too and added appropriate argument for the
introduced function parameter at all occurences of the function
use.

Also, updated the corresponding test cases.
2020-09-21 15:43:17 -07:00
Priyank Patel b7998d3160 js: Purge people module from window. 2020-09-01 19:55:58 -07:00
Anders Kaseorg 6ec808b8df js: Add "use strict" directive to CommonJS files.
ES and TypeScript modules are strict by default and don’t need this
directive.  ESLint will remind us to add it to new CommonJS files and
remove it from ES and TypeScript modules.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-07-31 22:09:46 -07:00
Anders Kaseorg 96dcc0ce6e js: Use ES6 object literal shorthand syntax.
Generated by ESLint.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-07-21 12:42:22 -07:00
Anders Kaseorg a9ca5f603b js: Replace deprecated jQuery event trigger shorthand.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-07-21 12:01:26 -07:00
Anders Kaseorg b65d2e063d js: Reformat with Prettier.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-07-17 14:31:25 -07:00
Anders Kaseorg f3726db89a js: Normalize strings to double quotes.
Prettier would do this anyway, but it’s separated out for a more
reviewable diff.  Generated by ESLint.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-07-17 14:31:24 -07:00
Anders Kaseorg e014ea966a eslint: Enable comma-dangle for functions.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-07-03 16:55:51 -07:00
Anders Kaseorg a79322bc94 eslint: Enable prefer-arrow-callback.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-07-03 16:55:50 -07:00
Anders Kaseorg b0253c5a2e eslint: Enable arrow-parens.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-07-03 16:53:39 -07:00
Anders Kaseorg ac7b09d57e js: Convert _.map(a, …) to a.map(…).
And convert the corresponding function expressions to arrow style
while we’re here.

import * as babelParser from "recast/parsers/babel";
import * as recast from "recast";
import * as tsParser from "recast/parsers/typescript";
import { builders as b, namedTypes as n } from "ast-types";
import K from "ast-types/gen/kinds";
import fs from "fs";
import path from "path";
import process from "process";

const checkExpression = (node: n.Node): node is K.ExpressionKind =>
  n.Expression.check(node);

for (const file of process.argv.slice(2)) {
  console.log("Parsing", file);
  const ast = recast.parse(fs.readFileSync(file, { encoding: "utf8" }), {
    parser: path.extname(file) === ".ts" ? tsParser : babelParser,
  });
  let changed = false;

  recast.visit(ast, {
    visitCallExpression(path) {
      const { callee, arguments: args } = path.node;
      if (
        n.MemberExpression.check(callee) &&
        !callee.computed &&
        n.Identifier.check(callee.object) &&
        callee.object.name === "_" &&
        n.Identifier.check(callee.property) &&
        callee.property.name === "map" &&
        args.length === 2 &&
        checkExpression(args[0]) &&
        checkExpression(args[1])
      ) {
        const [arr, fn] = args;
        path.replace(
          b.callExpression(b.memberExpression(arr, b.identifier("map")), [
            n.FunctionExpression.check(fn) ||
            n.ArrowFunctionExpression.check(fn)
              ? b.arrowFunctionExpression(
                  fn.params,
                  n.BlockStatement.check(fn.body) &&
                    fn.body.body.length === 1 &&
                    n.ReturnStatement.check(fn.body.body[0])
                    ? fn.body.body[0].argument || b.identifier("undefined")
                    : fn.body
                )
              : fn,
          ])
        );
        changed = true;
      }
      this.traverse(path);
    },
  });

  if (changed) {
    console.log("Writing", file);
    fs.writeFileSync(file, recast.print(ast).code, { encoding: "utf8" });
  }
}

Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2020-02-10 14:08:12 -08:00
Anders Kaseorg 28f3dfa284 js: Automatically convert var to let and const in most files.
This commit was originally automatically generated using `tools/lint
--only=eslint --fix`.  It was then modified by tabbott to contain only
changes to a set of files that are unlikely to result in significant
merge conflicts with any open pull request, excluding about 20 files.
His plan is to merge the remaining changes with more precise care,
potentially involving merging parts of conflicting pull requests
before running the `eslint --fix` operation.

Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-11-03 12:42:39 -08:00
Anders Kaseorg d17b577d0c js: Purge useless IIFEs.
With webpack, variables declared in each file are already file-local
(Global variables need to be explicitly exported), so these IIFEs are
no longer needed.

Signed-off-by: Anders Kaseorg <andersk@mit.edu>
2019-10-25 13:51:21 -07:00
Tim Abbott e807041bda compose_ui: Fix double escaping of compose placeholder text.
This fixes an issue where we were accidentally double-escaping the
compose placeholder text if it contained HTML entities; once in
`i18n.t` and again when inserting it into the `placeholder` DOM via
`.attr`.
2019-08-01 12:59:07 -07:00
Vinit Singh 03180752db compose: Update placeholder text depending on the narrow.
Change the `compose-textarea` placeholder text depending on the
stream/topic or PM recipients that the message will be sent to.

Resolves #12834.
2019-07-29 15:51:50 -07:00
Vinit Singh 86073588be dependencies: Upgrade jquery-autosize 1.17.7 to autosize 4.0.2.
The API for the autosize library changed upstream, so several changes
had to be made to relevant js files for a successful upgrade.

Resolves #12695.
2019-07-18 14:33:16 -07:00
Tim Abbott cef784b101 compose: Fix buggy escaping of LaTeX in quote-and-reply.
Apparently, our use of JavaScript string `.replace()` here was buggy,
because replace() has several special escape sequences starting with
`$` if they appear in the replacement content string.  We can work
around this through something of a hack, which is to pass a function
as the second argument to replace, which seems cleaner than replacing
all $s with $$s.

Thanks to Shreya for the report.
2019-04-13 10:52:44 -07:00
Tim Abbott f40cbdbd19 compose: Fix extra space being added by quote-and-reply.
The correct behavior here is that we want to ensure there is
whitespace in between the syntax being added and the content on either
side.  Our smart_insert logic handled this for the cases that were
common with inserting emoji (etc.), but didn't handle the more complex
cases with "quote and reply".

Fixes #11702.
2019-02-27 13:22:25 -08:00
Marco Burstein fa22cf18f6 compose_ui: Create the `compose_ui.replace_syntax` function.
`replace_syntax` will replace text inside of a compose textbox. Also,
add tests to the `compose_ui` Node tests for this function.
2018-08-26 23:33:24 -07:00
Armaan Ahluwalia 6d255efe4c app: Prepare JS files for consumption by webpack.
This commit prepares the frontend code to be consumed by webpack.

It is a hack: In theory, modules should be declaring and importing the
modules they depend on and the globals they expose directly.

However, that requires significant per-module work, which we don't
really want to block moving our toolchain to webpack on.

So we expose the modules by setting window.varName = varName; as
needed in the js files.
2018-07-05 10:53:36 +02:00