Commit graph

128 commits

Author SHA1 Message Date
Matthias Metelka
1592fd0295 Editor Field Descriptions (#1476)
* Add description input to fields dialog

QLineEdit seems like the best option, as it saves space and motivates users to keep their descriptions concise.

* Add setDescriptions to note initialization script

Went for the extra function instead of including it in setFields to prevent potential add-on breakages.

* Add tooltip next to field name if description is set

* Refactor code according to suggestions

Set default tooltip placement to right instead of bottom

Use .get() for fld["description"]

Fix tab order in fields dialog

Swap out abbreviation "desc" for full length name to keep consistency

* Update Protobuf and Rust for description

Add description to notetypes.proto and schema11

Co-authored-by: RumovZ <RumovZ@users.noreply.github.com>

* Fix tooltips not updating with description

Remove redundant variable tooltipOptions

Update previousTooltip within reactive function

* Move LabelDescription out of LabelName

Co-authored-by: Henrik Giesel <hgiesel@users.noreply.github.com>

* Decrease icon size and fix alignment

Co-Authored-By: Henrik Giesel <hengiesel@gmail.com>

* the new key needs to be cleared from fields, not the notetype itself

Co-authored-by: RumovZ <RumovZ@users.noreply.github.com>
Co-authored-by: Henrik Giesel <hengiesel@gmail.com>
Co-authored-by: Damien Elmes <gpg@ankiweb.net>
2021-11-06 09:42:48 +10:00
Henrik Giesel
b97dc23b96 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
Henrik Giesel
d74c38abe5 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
Henrik Giesel
915b638dcc 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
Damien Elmes
eee17476e3 fix deprecation warning in latest svelte-preprocess 2021-10-26 08:43:02 +10:00
Henrik Giesel
1d77c10b3d Use trailingComma: all setting in .prettierrc (#1435) 2021-10-19 09:06:00 +10:00
Henrik Giesel
96b8f2c32d 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
5be9ae5229 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
3a795aae22 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
ac92155a8e Put sass into repo directory (#1409)
Fix Sass build
2021-10-09 10:25:03 +10:00
Damien Elmes
af88b480f9 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
a5c7134d43 yarn upgrade --latest
bootstrap still held back
2021-10-01 12:52:53 +10:00
Damien Elmes
5d7eb8c425 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
899d0556e8 handle changed aria-expanded typing 2021-09-29 12:20:27 +10:00
Henrik Giesel
4b0e35a357 Rename StickyBar and StickyBottom to StickyHeader and StickyFooter 2021-09-15 23:15:55 +02:00
Henrik Giesel
84eda7c547 Make the ImageHandle and MathjaxHandle dropdowns perfectly touch the HandleSelection 2021-09-15 22:26:32 +02:00
Henrik Giesel
dbaba6233a Prevent hiding handles by clicking on handles 2021-09-15 17:56:56 +02:00
Henrik Giesel
b7d8ae8f22 Correctly pass down dropdownObject... 2021-09-15 16:16:42 +02:00
Henrik Giesel
ca4430d922 Make StickyBottom actually stick and make editor fullsize + flexbox 2021-09-15 15:21:37 +02:00
Henrik Giesel
05cf123959 Apply specific CSS to Mathjax CodeMirror 2021-09-15 13:46:04 +02:00
Henrik Giesel
0a003c7856 Use CodeMirror for Mathjax Editor 2021-09-15 13:33:18 +02:00
Henrik Giesel
4f6468a925 Prevent tooltip expanding body tag in editor 2021-09-15 02:24:09 +02:00
Henrik Giesel
80898d1954 Align suggestions with start of tag 2021-09-09 19:03:06 +02:00
Henrik Giesel
7150e1f149 Do not use overflow-x on ButtonToolbar
* Fixes deck-options dropdown not showing.
  It seems like it's no longer necessary
2021-09-09 17:50:02 +02:00
Henrik Giesel
8bbc001273 Fix bug where sometimes Autocomplete menu would not show even though suggestions exist 2021-09-09 15:38:11 +02:00
Henrik Giesel
9755b25fb1 Set disabled class on TagInput from WithAutocomplete 2021-09-09 15:38:10 +02:00
Henrik Giesel
e805c45403 Explicitly not support dropleft/dropright
We'll deal with it when we have a use case
2021-09-09 15:38:09 +02:00
Henrik Giesel
f34112ee28 Correctly place dropdown and only update if there's activeInput 2021-09-09 15:38:09 +02:00
Henrik Giesel
b70124a1e6 Update to use shortened SCSS paths for some components 2021-09-09 15:38:05 +02:00
Henrik Giesel
3873c29022 Refer to ./ instead of components/ from within components 2021-09-09 15:38:04 +02:00
Henrik Giesel
e3fe65fc23 Fix ts/components:svelte_check 2021-09-09 15:38:03 +02:00
Henrik Giesel
5dc8224a1b Add scrollbar_lib to components 2021-09-09 15:38:03 +02:00
Henrik Giesel
93ba4a2cd8 Implement nowrap mode 2021-09-09 15:38:01 +02:00
Henrik Giesel
bf6e587161 Implement TagWithTooltip 2021-09-09 15:38:00 +02:00
Henrik Giesel
9e91307c5d Move WithTooltip to components 2021-09-09 15:38:00 +02:00
Henrik Giesel
a49fd5ab2a Space out Sticky Bottom with Spacer component 2021-09-09 15:37:58 +02:00
Henrik Giesel
09f00a92aa Position stickyBottom fixed 2021-09-09 15:37:56 +02:00
Henrik Giesel
37d30284fc Improve positioning of tag editor badges 2021-09-09 15:37:56 +02:00
Henrik Giesel
5a41409f54 Do not open autocomplete on clicking input 2021-09-09 15:37:55 +02:00
Henrik Giesel
b91db34aec Allow clicking on suggestion items 2021-09-09 15:37:54 +02:00
Henrik Giesel
e3be5972b8 Switch WithAutocomplete to WithDropdown and fix SelectedTagBadge 2021-09-09 15:37:53 +02:00
Henrik Giesel
a576228c08 Add SelectedTagBadge to offer context items for selected tags 2021-09-09 15:37:53 +02:00
Henrik Giesel
b178b86afd Make automatic deselect when leaving tag editor 2021-09-09 15:37:52 +02:00
Henrik Giesel
8d8dd4fca0 Disable toggle on clicking element (toggle) for WithAutocomplete 2021-09-09 15:37:51 +02:00
Henrik Giesel
b6ffc4d071 Introduce AutocompleteItem
* needs too much custom styling / behavior to be done with DropdownItem
2021-09-09 15:37:50 +02:00
Henrik Giesel
d5eff3b75c Don't allow Enter/Tab/Arrows for Autocomplete, if not active
Don't show Autocomplete, if there are no items available
2021-09-09 15:37:49 +02:00
Henrik Giesel
12a3d83d0a Add some visual for TagAutocomplete 2021-09-09 15:37:39 +02:00
Henrik Giesel
a0c44f55db Fix some WithDropdownMenu logic 2021-09-09 15:37:37 +02:00
Henrik Giesel
0d394814e7 Decouple TagInput from TagAutocomplete completely 2021-09-09 15:37:37 +02:00
Henrik Giesel
7b6f49577a Add tabbable option to DropdownItem 2021-09-09 15:37:37 +02:00