* Animate Collapsible in both directions
* Fix field margin issues
* Fix code style issues
* Make duration prop optional
* Implement reduced motion mode for Collapsible
* Refactor Collapsible and add comments
* Fix LabelContainer badges disappearing when field is still hovered
* Remove reducedMotion store and use body class instead
* Export optional animated boolean
* Do not export duration
* Add 5px top padding to Fields.svelte
to make it look like it used to.
* Revert "Add 5px top padding to Fields.svelte"
This reverts commit f30026149a89f3d3b289c5030cd1ca34f728b036.
* Add top margin of 5px to Fields.svelte
* Add back overflow:hidden to field descriptions
* Add explaining comment
* Put back overflow:hidden in FieldsEditor
* Move inline padding from Fields component but EditorField+LabelContainer
* Simplify editor design by making editor toolbar not sticky
* Make tag editor in note editor non-sticky as well
* Fix merge mess
* The floating elements were portaled because I passed in undefined and they have a default argument
- Fix unrelated to PR
* Allow passing in reference into WithFloating as prop
* Fix WithAutocomplete
* Fix WithFloating for MathjaxOverlay
* Add resize-store
* Allow passing debug=True to jest_test for debugger support (#2013)
* Disable auto-closing of HTML tags
https://forums.ankiweb.net/t/set-html-editor-as-a-default-editor-instead-of-visual-editor/20988/3Closes#1963
* Add slight margin to MathjaxEditor
* Enable passing offset and shift to WithFloating
* Hide overflow of mathjax editor
* Add automatic hide functionality to sveltelib/position
* Last polishes for Surrounder class (#2017)
* Make private properties in Surrounder truly private
* Fix remove logic of Surrounder
* No reason for toggleTriggerRemove to be async
* Allow using alt-shift to set all remove formats but this one
* modifyFormat => updateFormat
* Fix formatting
* Fix field descriptions blocking cursor from being set (#2018)
- happens when focus is in HTML editor
* Remove hiding functionality again until it's really useful
* Add support for autoPlacement
* Implement new WithFloating that supports manually calling position()
* Implement hide mechanisms
* Add option in math dropdown to toggle MathJax rendering (#2014)
* Add option in math dropdown to toggle MathJax rendering
Closes#1942
* Hackily redraw the page when toggling MathJax
* Add Fluent string
* Default input setting in fields dialog (#1987) (kleinerpirat)
* Introduce field setting to use plain text editor by default (kleinerpirat)
* Remove leftover function from #1476
* Use boolean instead of string
* Simplify clear_other_field_duplicates
* Convert plain text key to camelCase
* Move HTML item below the existing checkbox, instead of to the right (dae)
Showing it on the right is more space efficient, but feels a bit
cluttered IMHO.
* Fix not being able to scroll when mouse hovers PlainTextInput (#2019)
* Remove overscroll-behavior: none for * (all elements)
* Revert "Remove overscroll-behavior: none for * (all elements)"
This reverts commit 189358908cecd03027e19d8fe47822735319ec17.
* Use body instead of *, but keep CSS rule
* Unify two CSS rules
* Remove console.logs
* Reposition mathjax menu on switching between inline/block
* Implement WithOverlay
* Implement FloatingArrow
* Display overlay with padding and brighter background
* Rename to MathjaxOverlay
* Simplify MathjaxOverlay component overall
* Rename ImageHandle to image overlay
* Generally fix ImageOverlay again
* Increase z-index of StickyContainer
* Fix setting block or inline on mathjax
* Add reasons in closing-{click,keyup}
* Have both WithFloating and WithOverlay use a simple show flag instead of a store
* Remove subscribe-trigger
* Fix clicking from one mathjax element to another
* Check before executing cleanup
* Do not wait for elements to mount before slotting in With{Floating,Overlay}
* Allow using reference slot for WithFloating and WithOveray
* Add inline argument to options
* Add support for inline slot in WithOvelay
* Use WithFloating for RemoveFormatButton
* Remove last uses of DropdownMenu and WithDropdown
* Remove all of the bootstrap dropdown components
* Fix closing behavior of several buttons and ImageOverlay
* Increase popover padding to 6px
* Find a different way to create some padding at the bottom of the fields
...before the tag editor
@kleinerpirat I think is what this css what trying to achieve?
* Satisfy tests
* Use removeStyleProperties in ImageOverlay
* Use notify function in WithOverlay and WithFloating
* Do not use portal for WithFloating and WithOverlay
Allows for scrolling
* Set hidden to default false in Rich/Plain TextInput
* Reset handle when changing mathjax elements via click
* Restrict size of empty mathjax image
* Prevent sticky labels from obscuring menus
* Remove several overflow-hidden
* Fix empty string being falsy bug when editing mathjax
* Do not import portal anymore
* Use { reason, originalEvent } instead of symbol as update to modified event store
* Fix closing behavior of image overlay (do not close after resize)
* Simplify Collapsible
* Use removeStyleProperties in Collapsible
* Satisfy eslint
* Fix latex shortcuts being mounted
* Fix mathjax overlay not focusable in first field
* Neither hide image overlay on escaped
* Fix Block ButtonDropdown wrapping
* Bring back portal to fix tag editor
* Introduce setting to collapse field by default
* Fix schema order
* Change wording from adjective to imperative
sounds a bit less clunky
* Update rslib/src/notetype/schema11.rs (dae)
* Keep settings in single column
* Add back Toggle Visual Editor string
* Add RichTextBadge component and show it conditionally
* Reverse input order depending on default setting
* Make PlainTextInput border-radius responsive to toggle states
* Prevent first Collapsible transition differently
* Focus inputs after Collapsible transition
The double tick calls are just a temporary solution until I find the exact moment an input is focusable again.
* Use requestAnimationFrame to await focusable state
Note: Svelte tick doesn't seem to work in this scenario.
* 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>
* Introduce field setting to use plain text editor by default
* Remove leftover function from #1476
* Use boolean instead of string
* Simplify clear_other_field_duplicates
* Convert plain text key to camelCase
* Move HTML item below the existing checkbox, instead of to the right (dae)
Showing it on the right is more space efficient, but feels a bit
cluttered IMHO.
* Export surrounder directly from RichTextInput
* Change wording in editor/surround
* Remove empty line
* Change wording
* Fix interfaces
* Add field description directly in NoteEditor
* Strip description logic from ContentEditable
* Make RichTextInput position: relative
* Make attachToShadow an async function
* Apply field styling to field description
* Show FieldDescription only if content empty
* Remove descriptionStore and descriptionKey
* Revert "Make attachToShadow an async function"
This reverts commit b62705eadf7335c7ee0c6c8797047e1f1ccdbf44.
SvelteActionReturnType does not accept Promise<void>
* Fix mess after merge commit
* Require registering surround formats
- This is useful when you want to set up hooks, etc. on the EditorField
component
- Because when you can only use the NoteEditor export, you cannot notice
when fields are mounted or destroyed
* 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
* Fix field not being restored after Undo, if field also has focus
* Execute moveCaretToEnd after undoing a change
- Otherwise the caret might be placed in seemingly random positions
* Fix wording of comments
* Remove autofocus functionality of EditingArea
- instead await a tick in focusField
- We used the autofocus prop for the initial focus setting when opening the
editor. However it seems that awaiting tick in focusField also does the trick.
* 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
* Add componentHook functionality
* Register package NoteEditor
* Rename OldEditorAdapter to NoteEditor
* Expose instances in component-hook as well
* Rename NoteTypeButtons to NotetypeButtons
* Move PreviewButton initialization to BrowserEditor.svelte
* Remove focusInRichText
- Same thing can be done by inspecting activeInput
* Satisfy formatter
* Fix remaining rebase issues
* Add .bazel to .prettierignore
* Rename currentField and activeInput to focused{Field,Input}
* Move identifier to lib and registration to sveltelib
* Fix Dynamic component insertion
* Simplify editingInputIsRichText
* Give extra warning in svelte/svelte.ts
- This was caused by doing a rename of a files, that only differed in
case: NoteTypeButtons.svelte to NotetypeButtons.svelte
- It was quite tough to figure out, and this console.log might make it
easier if it ever happens again
* Change signature of contextProperty
* Add ts/typings for add-on definition files
* Add Anki types in typings/common/index.d.ts
* Export without .svelte suffix
It conflicts with how Svelte types its packages
* Fix left over .svelte import from editor.py
* Rename NoteTypeButtons to unrelated to ensure case-only rename
* Rename back to NotetypeButtons.svelte
* Remove unused component-hook.ts, Fix typing in lifecycle-hooks
* Merge runtime-require and register-package into one file
+ Give some preliminary types to require
* Rename uiDidLoad to loaded
* Fix eslint / svelte-check
* Rename context imports to noteEditorContext
* Fix import name mismatch
- I wonder why these issues are not caught by svelte-check?
* Rename two missed usages of uiDidLoad
* Fix ButtonDropdown from having wrong border-radius
* Uniformly rename libraries to packages
- I don't have a strong opinion on whether to name them libraries or
packages, I just think we should have a uniform name.
- JS/TS only uses the terms "module" and "namespace", however `package`
is a reserved keyword for future use, whereas `library` is not.
* Refactor registration.ts into dynamic-slotting
- This is part of an effort to refactor the dynamic slotting (extending
buttons) functionality out of components like ButtonGroup.
* Remove dynamically-slottable logic from ButtonToolbar
* Use DynamicallySlottable in editor-toolbar
* Fix no border radius on indentation button dropdown
* Fix AddonButtons
* Remove Item/ButtonGroupItem in deck-options, where it's not necessary
* Remove unnecessary uses of Item and ButtonGroupItem
* Fix remaining tests
* Fix relative imports
* Revert change return value of remapBinToSrcDir to ./bazel/out...
* Remove typings directory
* Adjust comments for dynamic-slottings
* 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>
* 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
* 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
