Commit Graph

1438 Commits

Author SHA1 Message Date
Henrik Giesel
c9bd39c6a2
Several editor fixes (#1478)
* Declare toolbar api via modifiable property

* Fix addon buttons

* Assign editing areas in a synchronous way

* Restore the Tab shortcut that moves the caret to end

- moveCaretToEnd is called twice now: The moveCaretToEnd calls in
  *TextInput causes the caret to be moved to the end when switching back
  from the window and back.
- To fix this, I will need the code for saving and restoring locations
  from #1377

* Restore selections in the PlainTextInput

* Improve type safety of destroyable

- clearable-array was renamed to destroyable
2021-11-05 11:29:02 +10:00
Damien Elmes
84021976d5 speed up Svelte compile
Approx 27s -> 16s when rebuilding editor after making a change to
lib. Still slower than I'd like.
2021-11-04 15:18:28 +10:00
Damien Elmes
8d5cddb05c add a missing references line in ts/graphs 2021-11-04 14:56:50 +10:00
Henrik Giesel
c87ba7d426
Set "no-non-null-assertion: off" by default (#1475) 2021-11-04 11:42:51 +10:00
Damien Elmes
fd013f68d2 ensure revlog headers match alignment of columns
+ right-align interval; it looks bad centered
2021-11-02 16:32:09 +10:00
Damien Elmes
5e15ab0ebb use absolute package paths in eslint.bzl 2021-11-02 13:49:19 +10:00
Damien Elmes
c988116da5 add lint checks for unsupported browser API calls 2021-11-02 13:44:41 +10:00
Damien Elmes
52ea7c2a05 avoid Object.fromEntries() and some instances of globalThis
Not supported on early iOS 12. This can be reverted after iOS 12
support is dropped, which should be soon.
2021-11-02 12:54:06 +10:00
Damien Elmes
0cd4c9431a include subfolders in eslint/prettier checks 2021-11-02 12:50:27 +10:00
Damien Elmes
2c248e6a3d revert congrats h3 style change from #1470
Presumably bootstrap is overriding the styling of headers; this is a
quick fix to make the header be bold again, like the graphs screen.
2021-11-01 12:55:31 +10:00
Damien Elmes
9151fd93d4 allow passing npm repo name in compile_svelte() 2021-10-31 18:10:11 +10:00
Damien Elmes
69c04baf5a use absolute path for sql_format 2021-10-31 11:13:38 +10:00
Henrik Giesel
09c29219b4
Several CSS fixes - Editor Cleanup (#1470)
* Refactor editor css, fix editor button highlight

- Avoid using webview.css
- Move more buttons css into button_mixins

* Fix DropdownItem appearance

* Fix the visuals of tags

* Make dropdown font slightly smaller

* Give SelectOption a background color

* Move some css from deck-options-base to CardStateCustomizer

* Avoid using core.scss for CardStats

* Avoid using sass/core in congrats package

* Inline core.scss into webview.scss

* Include fusion-vars for base.scss

* need to keep core.scss around for now (dae)
2021-10-31 08:29:22 +10:00
Matthias Metelka
9f8be1af93
Highlight field badges when toggled to non-default state (#1466) 2021-10-31 07:48:37 +10:00
Henrik Giesel
afc56a8398
Fix DeckOptions toolbar having wrong margins and no flex-grow (#1464)
ButtonToolbar.svelte now has to assume that the button elements
are two levels below it. This can be simplified once we can use
flex-gap.
2021-10-28 19:37:52 +10:00
Abdo
20d9a26a8c
Strip isolation chars from deck options warnings to fix RTL display (#1457)
Co-authored-by: Damien Elmes <dae@users.noreply.github.com>
2021-10-26 20:11:25 +10:00
Damien Elmes
6af8a47d57 fix deprecation warning in latest svelte-preprocess 2021-10-26 08:43:02 +10:00
Damien Elmes
3f24f9820d update js deps 2021-10-26 08:30:13 +10:00
Damien Elmes
a80a267cff //ts:format now runs on current working directory, instead of entire repo 2021-10-23 15:48:33 +10:00
Damien Elmes
3b8b71b815 minor tweak to new-platforms.md, and run prettier on docs 2021-10-23 15:40:45 +10:00
Henrik Giesel
02409d083b
Fix RTL text display being off + Update PlainTextInput RTL on save (#1448) 2021-10-23 11:06:15 +10:00
RumovZ
1c9b5a2e83
Card info cleanup (#1446)
* Cast proto interface to type ...

... instead of using non-null assertions in Revlog.svelte.

* Remove OptionalInt32 and OptionalUInt32
2021-10-23 11:00:43 +10:00
Damien Elmes
048a9a2b60 vendor stringcase
It's a tiny library that has not been updated in years, and it was
leading to a warning on startup:

 DeprecationWarning: invalid escape sequence \W
  return re.sub("\W+", "", string)
2021-10-22 08:56:44 +10:00
Henrik Giesel
4678b12570
Fix Preview button not showing and cloze button not hiding (#1437) 2021-10-20 07:09:12 +10:00
Henrik Giesel
0dff5ea3a3
Use trailingComma: all setting in .prettierrc (#1435) 2021-10-19 09:06:00 +10:00
Henrik Giesel
bf3adbc812
Svelte Editor hotfixes (#1436)
* Fix white on white text in light mode

* Reflect rename to FieldsEditor in class name

* Fix adjusting fields ending in an endless loop
2021-10-19 08:38:06 +10:00
Henrik Giesel
c2768e2188
Translate Editor entirely to Svelte (#1403)
* Translate editor to Svelte

Make editor fields grid rather than flexbox

Refactor ButtonToolbar margins

Remove remaining svelte.d.ts symlinks

Implement saveNow

Fix text surrounding

Remove HTML editor button

Clean up some empty files

Add visual for new field state badges

* Adds new IconConstrain.svelte to generalize the icon handling for
IconButton and Badge

Implement sticky functionality again

Enable Editable and Codable field state badges

Add shortcuts to FieldState badges

Add Shift+F9 shortcut back

Add inline padding back to editor fields, tag editor and toolbar

Make Editable and Codable only "visually hidden"

This way they are still updated in the background
Otherwise reshowing them will always start them up empty

Make empty editing area focusable

Start with moving fieldsKey and currentFieldKey to context.ts

Fix Codable being wrong size when opening for first time

Add back drag'n'drop

Make ButtonItem display: contents again

* This will break the gap between ButtonGroup items, however once we
  have a newer Chromium version we should use CSS gap property anyway

Fix most of typing issues

Use --label-color background color LabelContainer

Add back red color for dupes

Generalize the editor toolbar in the multiroot editor to widgets

Implement Notification.svelte for showing cloze hints

Add colorful icon to notification

Hook up Editable to EditingArea

Move EditingArea into EditorField

Include editorField in editor/context

Fix rebasing issues

Uniformly use SvelteComponentTyped

Take LabelContainer out of EditingArea

Use mirror-dom and node-store to export editable content

Fix editable update mechanism

Prepare passing the editing inputs as slots

Pass in editing inputs as slots

Use codable options again in codemirror

Delete editor/lib.ts

Remove CodableAdapter, Use more generic CodeMirror component

Fix clicking LabelContainer to focus

Use prettier

Rename Editable to ContentEditable

Fix writing Mathjax from Codable to Editable

Correctly adjust output HTML from editable

Refactor EditableStyles out of EditableContainer

Pass Image and Mathjax Handle via slots to Editable

Make Editable add its editingInputApi

Make Editable hideable

Fix font size not being set correctly

Refactor both fieldFocused and focusInCodable to focusInEditable

Fix focusIfField

Bring back $activeInput

Fix ClozeButton

Remove signifyCustomInput

Refactor MathjaxHandle

Refactor out some logic into store-subscribe

Fix Mathjax editor

Use focusTrap instead of focusing div

Delegate focus back to editingInput when refocusing focusTrap

Elegantly move focus between editing inputs when closing/opening

Make Codable tabbable

Automatically move caret to end on editable and codable

+ remove from editingInput api

Fix ButtonDropdown having two rows and missing button margins

Make svelte_check and eslint pass

Satisfy editor svelte_check

Save field updates to db again

Await editable styles before mounting content editable

Remove unused import from OldEditorAdapter

Add copyright header to OldEditorAdapter

Update button active state from contenteditable

* Use activateStickyShortcuts after waiting for noteEditorPromise

* Set fields via stores, make tags correctly set

* Add explaining comment to setFields

* Fix ClozeButton

* Send focus and blur events again

* Fix Codable not correctly updating on blur with invalid HTML

* Remove old code for special Enter behavior in tags

* Do not use logical properties for ButtonToolbar margins

* Remove getCurrentField

Instead use noteEditor->currentField or noteEditor->activeInput

* Remove Extensible type

* Use context-property for NoteEditor, EditorField and EditingArea

* Rename parameter in mirror-dom.allowResubscription

* Fix cutOrCopy

* Refactor context.ts into the individual components

* Move focusing of editingArea up to editorField

* Rename promiseResolve -> promiseWithResolver

* Rename Editable->RichTextInput and Codable->PlainTextInput

* Remove now unnecessary type assertion for `getNoteEditor` and `getEditingArea`

* Refocus field after adding, so subscription to editing area is refreshed
2021-10-18 22:01:15 +10:00
Damien Elmes
cbc358ff0b add aliases to run vendored python and node from command line
You can then do './scripts/python -m venv /path/to/venv' to create
a virtual env based on the bundled Python, which can be handy if
you don't happen to have the appropriate version of Python installed
separately.
2021-10-18 19:50:41 +10:00
Damien Elmes
3d416b4a68 convert sql_format to ts_project; move into separate folder 2021-10-18 19:39:45 +10:00
RumovZ
9b1d53e359 Use null for missing stats 2021-10-18 09:36:31 +02:00
RumovZ
0b3b3a5f33 sentCardId -> requestedCardId 2021-10-18 09:12:10 +02:00
RumovZ
8eed005db6 Use null for unset cardId 2021-10-18 09:11:00 +02:00
RumovZ
dc4f5adc44 Default to includeRevlog = true 2021-10-18 09:04:49 +02:00
RumovZ
2a93868922 Center placeholder 2021-10-18 09:01:25 +02:00
RumovZ
bbba21126f Improve clarity in card info code a tiny little bit 2021-10-18 09:01:25 +02:00
RumovZ
3c5e149176 Move update logic into CardInfo.svelte
Also use a simpler and faster way to avoid race conditions.
2021-10-18 09:01:24 +02:00
RumovZ
5062024974 Move update logic into CardInfo.svelte 2021-10-18 09:01:24 +02:00
RumovZ
4b5ea6c110 Make CardStats a separate component 2021-10-18 09:01:23 +02:00
RumovZ
a47453d5f3 Implement reactively updating Card Info 2021-10-18 09:01:22 +02:00
Damien Elmes
fed5c3da0e drop ts_library() requirement in ts/svelte 2021-10-18 13:00:55 +10:00
Damien Elmes
bb5053990b pass ts deps into most Svelte packages; remove redundant deps
Henrik, I've left editable/editor alone to avoid causing a conflict;
please add them in your PR instead when you get a chance.
2021-10-18 12:44:31 +10:00
Damien Elmes
1f876cfe39 Svelte build improvements
1. All Svelte files in a package are compiled in one step now, which
ensures that properties that use types from a different Svelte file in the
same package are typed correctly. The single-file svelte() has been removed,
and compile_svelte() may be renamed to svelte() in the future.

2. The .ts files in the same package are included as part of the Svelte
compilation, so that types imported imported from .ts files in the
same package work.

3. Dependencies passed into the rule are now loaded into the TypeScript
compiler, so that properties referencing types from different packages
work. We'll need to update our compile_svelte() lines to list the
dependencies. For example, before this change:

% cat bazel-bin/ts/congrats/CongratsPage.svelte.d.ts
import { SvelteComponentTyped } from "svelte";
declare const __propDef: {
    props: {
        info: any;
    };
...

After adding //ts/lib to the deps of compile_svelte() in ts/congrats:

% cat bazel-bin/ts/congrats/CongratsPage.svelte.d.ts
import { SvelteComponentTyped } from "svelte";
import type { Scheduler } from "../lib/proto";
declare const __propDef: {
    props: {
        info: Scheduler.CongratsInfoResponse;
    };
...
2021-10-18 12:44:29 +10:00
Damien Elmes
e8c5802a96 pass sole arg to cardStats as a dictionary
Easier to extend in the future, or (de)serialize in a strongly-typed
language.
2021-10-14 19:28:51 +10:00
Damien Elmes
abad6c3844 layout tweaks to card info
- negative margins result in truncated text when the window size
is reduced, so avoid them
- having a 100% table inside a flexbox is not responsive - the table
does not adjust its size as the width is increased or decreased
- in order to look decent on narrow screens (eg phones), we allow
margin collapsing
- in order to look decent on wide screens, we limit the maximum
width to something that is readable
- hide some columns in portrait mode on narrow screens

I tried preserving the centering with margin-left/right: auto, but
could not get it looking right, so have had to move things back to
left alignment.
2021-10-14 19:28:33 +10:00
Damien Elmes
53ce7d2759 support #test in card-info.html
allows us to use scripts/ts-run and ts-watch to test the page
in Chrome by surfing to http://127.0.0.1:40000/_anki/pages/card-info.html#testXXX
2021-10-14 19:23:33 +10:00
RumovZ
3672b0fe73
Switch CardInfoDialog to ts page (#1414)
* Only collect card stats on the backend ...

... instead of rendering an HTML string using askama.

* Add ts page Card Info

* Update test for new `col.card_stats()`

* Remove obsolete CardStats code

* Use new ts page in `CardInfoDialog`

* Align start and end instead of left and right

Curiously, `text-align: start` does not work for `th` tags if assigned
via classes.

* Adopt ts refactorings after rebase

#1405 and #1409

* Clean up `ts/card-info/BUILD.bazel`

* Port card info logic from Rust to TS

* Move repeated field to the top

https://github.com/ankitects/anki/pull/1414#discussion_r725402730

* Convert pseudo classes to interfaces

* CardInfoPage -> CardInfo

* Make revlog in card info optional

* Add legacy support for old card stats

* Check for undefined instead of falsy

* Make Revlog separate component

* drop askama dependency (dae)

* Fix nightmode for legacy card stats
2021-10-14 19:22:47 +10:00
Damien Elmes
7128de895f declare bootstrap prereq in Svelte compile
Mistakenly stripped this out when removing the typescript dependencies
2021-10-13 11:48:22 +10:00
Henrik Giesel
c64bac57a6
Put sass into repo directory (#1409)
Fix Sass build
2021-10-09 10:25:03 +10:00
Henrik Giesel
c63e0abd68
Fix prettier after moving node_modules to repo dir (#1413) 2021-10-09 10:13:14 +10:00
Henrik Giesel
dec0fbe845
Refactor i18n (#1405)
Merging note: the typing changes were fixed in a separate PR.

* Put rootDirs into subprojects

- typings do not work for any ts or svelte files
- if we set the 'rootDirs' in ts/tsconfig.json to '../bazel-bin/ts' and then inherit
  them from e.g. editor, the root will be changed to '../../bazel-bin/ts',
  however editor needs look in '../../bazel-bin/ts/editor' instead.

* Rename i18n and i18n_helpers to i18n-generated and i18n

- This way, we can restrict the awkwardness of importing files outside
  the ts directory within lib

* Fix missing typing of i18n and backend_proto by adding back symlinks

* Split up i18n-generated into i18n-{translate,modules}

* Change i18n from singleton to functions

* Revert "Put rootDirs into subprojects"

This partially reverts commit e1d4292ce3979e7b7ee21bf3951b8a462d45c29c.

It seems like this might not be necessary after all.
However some other change made on this branch seems to have fixed
the .svelte.d.ts imports

* Introduce i18n-bundles to remove circular import

There was a circular import i18n.ts <-> i18n-translate.ts

* Create own directory for i18n

* Move lib/i18n/translate to lib/translate

* This restores tree shaking

* Update tsconfig libs and module

* es2018-2020 have wide support on all modern browsers including

* Switch bundles and langs inside i18n to variables again

* Add missing copyright header

* Rename translate.ts to ftl.ts

* Remove the symlinks again

I added them to fix to have completion for tr, however this would have
also have meant to abandon the tree shaking.
As we want to have tree shaking, it's also not necessary to have the
symlinks anymore

* Revert "Update tsconfig libs and module"

This reverts commit 0a96776a475e9901c1f9f3407c726d1d002fb9ef.

* move withCollapsedWhitespace back to i18n/utils

* Add back /ts as in rootDirs
2021-10-07 23:31:49 +10:00