Commit Graph

538 Commits

Author SHA1 Message Date
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
Henrik Giesel
c64bac57a6
Put sass into repo directory (#1409)
Fix Sass build
2021-10-09 10:25:03 +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
Damien Elmes
1aaf8fce1e fix invalid arg to ButtonGroup revealed by typing fix 2021-10-07 21:33:15 +10:00
Damien Elmes
046c6c55d3 use extra rootDir in tsconfig instead of symlinks
The nice thing about the symlink approach is that it allowed tsc -b
to function without any changes to the tsconfig.json file, but it meant
there were extra links we had to maintain. So instead, we just add an
extra rootDirs entry, and add two commented-out lines that can be
uncommented when wanting to build with tsc directly.
2021-10-01 18:36:52 +10:00
Damien Elmes
e9d71bfbe4 yarn upgrade --latest
bootstrap still held back
2021-10-01 12:52:53 +10:00
Damien Elmes
a3d9f90af5 update to latest rules_nodejs & switch to ts_project
ts_library() is deprecated and will presumably be dropped from a
future rules_nodejs, and it wasn't working with the jest tests
after updating, so we switch over to ts_project().

There are some downsides:

- It's a bit slower, as the worker mode doesn't appear to function
at the moment.
- Getting it working with a mix of source files and generated files
was quite tricky, especially as things behave differently on Windows,
and differently when editing with VS Code. Solved with a small patch
to the rules, and a wrapper script that copies everything into the
bin folder first. To keep VS Code working correctly as well, the built
files are symlinked into the source folder.
- TS libraries are not implicitly linked to node_modules, so they
can't be imported with an absolute name like "lib/proto" - we need
to use relative paths like "../lib/proto" instead. Adjusting "paths"
in tsconfig.json makes it work for TS compilation, but then it fails
at the esbuild stage. We could resolve it by wrapping the TS
libraries in a subsequent js_library() call, but that has the downside
of losing the transient dependencies, meaning they need to be listed
again.  Alternatively we might be able to solve it in the future by
adjusting esbuild, but for now the paths have been made relative to
keep things simple.

Upsides:

- Along with updates to the Svelte tooling, Svelte typing has improved.
All exports made in a Svelte file are now visible to other files that
import them, and we no longer rebuild the Svelte files when TS files
are updated, as the Svelte files do no type checking themselves, and
are just a simple transpilation. Svelte-check now works on Windows again,
and there should be no errors when editing in VS Code after you've
built the project. The only downside seems to be that cmd+clicking
on a Svelte imports jumps to the .d.ts file instead of the original now;
presumably they'll fix that in a future plugin update.
- Each subfolder now has its own tsconfig.json, and tsc can be called
directly for testing purposes (but beware it will place build products
in the source tree): ts/node_modules/.bin/tsc -b ts
- We can drop the custom esbuild_toolchain, as it's included in the
latest rules_nodejs.

Other changes:

- "image_module_support" is moved into lib/, and imported with
<reference types=...>
- Images are now imported directly from their npm package; the
extra copy step has been removed.

Windows users may need to use "bazel clean" before building this,
due to old files lying around in the build folder.
2021-10-01 12:52:53 +10:00
Damien Elmes
04ba24cb54 silence execCommand deprecation warnings for now 2021-09-29 11:36:37 +10:00
Henrik Giesel
51c0cedaf5 Make HandleSelection perfectly size when first activating 2021-09-17 21:23:04 +02:00
Henrik Giesel
06d1ec6af4 Fix missizing of HandleSelection when first moving from empty to Mathjax 2021-09-17 20:54:37 +02:00
Henrik Giesel
c30ba6a3f6 Add ChangeTimer.prototype.fireImmediately
so Mathjax is saved when exiting editor prematurely
2021-09-16 14:47:05 +02:00
Henrik Giesel
60690e0557 Rename StickyBar and StickyBottom to StickyHeader and StickyFooter 2021-09-15 23:15:55 +02:00
Henrik Giesel
896b40c873 Remove now unused import in TagEditor 2021-09-15 22:59:47 +02:00
Henrik Giesel
9f56d51811 Fix suggestions not showing when typing space in a TagInput 2021-09-15 22:54:53 +02:00
Henrik Giesel
b502ceedca Make the ImageHandle and MathjaxHandle dropdowns perfectly touch the HandleSelection 2021-09-15 22:26:32 +02:00
Henrik Giesel
1f09402066 Stop propagation for paste in MathjaxHandle editor 2021-09-15 22:14:38 +02:00
Henrik Giesel
97647e7b24 Prevent hiding handles by clicking on handles 2021-09-15 17:56:56 +02:00
Henrik Giesel
9001b597da Remove style attribute after remove float property if not styling left 2021-09-15 17:36:48 +02:00
Henrik Giesel
9b7ea75399 Always correctly update MathjaxHandle position 2021-09-15 17:05:43 +02:00
Henrik Giesel
ce9674f824 Correctly pass down dropdownObject... 2021-09-15 16:16:42 +02:00
Henrik Giesel
7c6f6533c1 Using dropdownApi is much less faulty than using dropdownObject
- Update MathjaxSelection and Dropdown more reliably
2021-09-15 15:52:56 +02:00
Henrik Giesel
c227c7dc39 Make StickyBottom actually stick and make editor fullsize + flexbox 2021-09-15 15:21:37 +02:00
Henrik Giesel
c46f39c88e Import saveField from editor/saving.ts 2021-09-15 14:09:25 +02:00
Henrik Giesel
71bdeeba39 Apply specific CSS to Mathjax CodeMirror 2021-09-15 13:46:04 +02:00
Henrik Giesel
ec9b43d3ab Use editorfield instead of editor-field 2021-09-15 13:45:20 +02:00
Henrik Giesel
c8c9c64ea5 Vertically center inline Mathjax 2021-09-15 13:45:20 +02:00
Henrik Giesel
c02973a85d Generalize accesing anki-mathjax from image in MathjaxHandle 2021-09-15 13:45:20 +02:00
Henrik Giesel
b6bea18b22 Add copyright header to saving.ts 2021-09-15 13:45:20 +02:00
Henrik Giesel
09819d4e7d Satisfy eslint 2021-09-15 13:45:19 +02:00
Henrik Giesel
e269fe73da Define CodeMirror in external codeMirror.ts 2021-09-15 13:45:19 +02:00
Henrik Giesel
e71aed7146 Correctly import CodeMirror 2021-09-15 13:45:19 +02:00
Henrik Giesel
a3fef552bd Include codemirror libs for svelte 2021-09-15 13:45:19 +02:00
Henrik Giesel
e06ff2ae3c Focus on mount when using Mathjax shortcuts 2021-09-15 13:45:17 +02:00
Henrik Giesel
af556c391d Fix alignment of empty icon 2021-09-15 13:43:37 +02:00
Henrik Giesel
de056fbd89 Change Wrap commands / shortcuts to use anki-mathjax 2021-09-15 13:42:36 +02:00
Henrik Giesel
6856850a0f Wrap Mathjax buttons into toolbar 2021-09-15 13:33:24 +02:00
Henrik Giesel
f76cf24e9d Move wrap to lib to allow editable to use it 2021-09-15 13:33:24 +02:00
Henrik Giesel
b6dfbcbc20 Move setting inCodable to false into codable 2021-09-15 13:33:23 +02:00
Henrik Giesel
1e94f7f16f Display Mathjax error as title (tooltip) 2021-09-15 13:33:23 +02:00
Henrik Giesel
c88223e069 Show math icon if Mathjax is empty 2021-09-15 13:33:22 +02:00
Henrik Giesel
7ba85a2fbe Disallow draggin of mathjax + only ever have one handle active 2021-09-15 13:33:21 +02:00
Henrik Giesel
b361bcc69f Display Mathjax editor and buttons at the same time 2021-09-15 13:33:20 +02:00
Henrik Giesel
b06b5e9151 Generalize ChangeTimer and use it in Mathjax editor 2021-09-15 13:33:20 +02:00
Henrik Giesel
cb762b880e Add ResizeObserver for MathjaxHandle 2021-09-15 13:33:20 +02:00
Henrik Giesel
7168cbf99a Update editor when editing Mathjax 2021-09-15 13:33:19 +02:00
Henrik Giesel
701f260c3f Wait for stylesheets to load before setting field content 2021-09-15 13:33:19 +02:00
Henrik Giesel
8ddb0bc6ed Fix some cases where Mathjax whitespace formatting is destroyed 2021-09-15 13:33:19 +02:00