* Adjust size of legacy buttons
* Revert "Adjust size of legacy buttons"
This reverts commit fb888fe1db9050c34b1a7b0820e6da5ac91ccee6.
* Remove unused function from #1476
* Use outline version for tag icon
* Add chevron icons
* Remove code icons, keep one pin icon version
* Add code-bg color
* Redesign fields
* Remove unused import
* Fix imports
* Move PlainTextBadge between editing inputs
where it belongs :)
* Make whole separator line clickable
* Fix transition
and format
* Don't show toggle when field is collapsed
* Show toggle only on hover
for mobile I'd like to implement a swipe mechanism.
* Use tweened SVG for triangle instead of CSS hack
* Implement more obvious HTML toggle on bottom right
* Reduce field height by a few pixels
* Reduce field height by two pixels
* Show HTML toggle when PlainTextInput is active, regardless of hover/focus
* Remove RichTextBadge.svelte
* Create separate collapsed field state
this means users can collapse fields with the HTML editor open and it will stay open when the field is expanded again.
* Add slide out animation to EditingArea, RichTextInput and PlainTextInput
only for collapsing, because it is choppy on expansion (common issue with Svelte transitions).
* Fix aliasing issue on focused field corners
* Make StickyBadge feel more responsive
* Move StickyBadge closer to field border
* Adjust field gutter/margins
* Make LabelContainer sticky
to make field operations accessible on fields with a lot of content.
* Add back html icons, remove visual editor icons
* Revert "Add code-bg color"
This reverts commit 4200f354193710b3acd9bcf84b67958e200ddcdb.
* Add rich text icon, remove strikethrough code icon
* Revert PlainTextBadge to original position
* Adjust margins in FieldState
* Rename PlainTextBadge to SecondaryInputBadge
in preparation for #1987
* Run eslint and prettier
* Make whole LabelContainer clickable area for collapse/expand
* Revert "Add slide out animation to EditingArea, RichTextInput and PlainTextInput"
This reverts commit 9a2b3410d0ead37ae1da408d68e14507a058a613.
* Fix error on collapse/expansion
this was caused by the {#if} blocks, which resulted in the deletion of original EditingAreas.
* Refocus when toggling chevron and secondary input badge
* Revert "Revert "Add code-bg color""
This reverts commit 1cfd3bda65354ab90c1ab4cbbef47596a1be8754.
* Use single rotating chevron icon and make it RTL-compatible
* Remove redundant CSS transition rule
* Introduce animated Collapsible component and fix refocus on toggle
* Do not try to force repaint, as it is not required
* Remove RTL store from LabelContainer
the direction is already applied globally.
* Collapse secondary input with field
* Add focusedField to NoteEditorAPI
* Replace :global CSS selector with class .visible
thus removing the assumption that the component is used inside an EditorField.
https://github.com/ankitects/anki/pull/2002#discussion_r944876448
* Use named function syntax instead of function expressions
* Add explanation comment
* Remove unnecessary :bind directive
* Create CollapseBadge component
* Move :global selector into .plain-text-input
* Add comment explaining box-shadow pseudo-element
* Move Collapsible from EditingArea, PlainTextInput and RichTextInput into user components
* Rename SecondaryInputBadge to PlainTextBadge and remove generalization logic
I kept the rich text icon inside icons.ts for future use.
* Sort imports
* Fix background-color for duplicates not showing
with yet another pseudo-element :)
The pseudo-element that covers up field borders on scroll caused this issue. Fighting fire with fire here.
* Increase size of plain text toggle to original value again
This makes the clickable area a bit bigger and looks slightly more consistent with StickyBadge.
* Scrap pseudo-element mess in LabelContainer and tackle the actual issue
* Add class .visible to StickyBadge too
This introduces a peculiar bug: The active prop of StickyBadge resets to false when the mouse leaves the field - regardless of the actual back-end value.
* Fix sticky badge resetting on mouseleave/blur
* Apply overflow: hidden only during transition
fixes MathJax handle getting cut off by fields
* Remove unused variable
* Fix visual bug caused by overflow:hidden not applying in time
I tried several asynchronous approaches, but they all caused issues: either they prevented the CSS transition or they made field inputs lose focus.
In the end I resorted to direct, synchronous DOM-manipulation and added an explanatory comment.
* Decrease Collapsible load time by blocking first transition
I noticed the sliding animation has a hefty performance impact when a large number of fields is loaded simultaneously.
Blocking the first transition (which isn't even visible) results in a big boost in load time.
* Replace usages of gap with margins for children
* Revert unnecessary removal of grid-gap definition
* Correct comments about flex-gap property
mistook that for grid-gap.
* Resolve style issues
* Add minimum targets to gap comment
Co-authored-by: Henrik Giesel <hengiesel@gmail.com>
* Move field description into EditingArea as placeholder
* Prevent insertion of breaks into empty fields
to allow :empty CSS selector to also work on fields other than the first one.
* Remove redundant setContext from EditingArea
* Fix import order
* Revert "Prevent insertion of breaks into empty fields"
This reverts commit 1615fd5cf441b1047dae6a34265acb9c5cae50b2.
* Use class:empty instead of :empty CSS pseudo-class
* Restrict description to single line, ellipse overflow
* Make description in field dialog a bit clearer
* Make eslint sort our imports
* fix missing deps in eslint rule (dae)
Caught on Linux due to the stricter sandboxing
* Remove exports-last eslint rule (for now?)
* Adjust browserslist settings
- We use ResizeObserver which is not supported in browsers like KaiOS,
Baidu or Android UC
* Raise minimum iOS version 13.4
- It's the first version that supports ResizeObserver
* Apply new eslint rules to sort imports
* Put PlainTextInput into its own directory
* Create a directory for RichTextInput
* Create editor-toolbar directory
* Move PreviewButton into editor-toolbar
* The time to refactor this is not quite yet here
* Create tag-editor directory
* Remove some of the uses of WithShortcut
* Remove all uses of WithShortcut from editor package
* Remove last uses of WithShortcut
* Fix typo
* 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>
* 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
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.
