Commit graph

92 commits

Author SHA1 Message Date
Arthur Milchior
efaaae8ce4
Cloze button get disabled outside of cloze field (#3879)
* NF: replace `disabled` by `enabled`

This allows to remove the negations and, in my opinion, make the code
easier to understand and edit.

* Cloze button get disabled outside of cloze field

More specifically, if the user focus in a field that is not a cloze
field, the button are still there but appear as disabled. The shortcut
instead of adding the cloze context shows an alert explaining why this
can't be done.

While this message is already displayed when the user tries to add a
note with cloze in non-cloze field, I suspect it will save time to
stop the user as soon as possible from making mistake. This should
make very clear what is authorized and what is not.

It'll also be a reminder of whether the current field is a cloze or
not.

In order to do this, I added a back-end method (that I expect we may
reuse in ankidroid) to get the index of the fields used in cloze. This
set is sent to the note editor, which propagates it where needed.

In mathjax, the cloze symbol is removed when the selected field is not
a cloze field.
2025-04-24 18:37:41 +10:00
Damien Elmes
ddb8573e8d
Use CSP to block inline JS content in editor (#3939)
* Revert "Sanitize field content in editor"

This reverts commit 1c156905f8.

* Use CSP to block inline JS content in editor

This blocks inline scripts, scripts in the media folder, and
handlers like onclick in the editor. This is nicer than the previous
solution - it doesn't make any permanent changes, and leaves other
content like SVGs alone. Thanks to Nil Admirari for the suggestion.
2025-04-23 16:21:48 +10:00
Damien Elmes
1a68c9f5d5
Harden access to internal API (#3925)
* Sanitize field content in editor

The editor already strips script tags from fields, but was allowing
through Javascript in things like onclick handlers. We block this now,
as the editor context has access to internal APIs that we don't want to
expose to untrusted third-party code.

* Require an auth token for API access

We were previously inspecting the referrer, but that is spoofable,
and doesn't guard against other processes on the machine.

To accomplish this, we use a request interceptor to automatically
add an auth token to webviews with the right context. Some related
changes were required:

- We avoid storing _page, which was leading to leaks & warning on exit
- At webview creation (or set_kind() invocation), we assign either
an authenticated or unauthenticated web profile.
- Some of our screens initialize the AnkiWebView when calling, e.g.,
aqt.forms.stats.Ui_Dialog(). They then immediately call .set_kind().
This reveals a race condition in our DOM handling code: the webview
initialization creates an empty page with the injected script, which
causes a domDone signal to be sent back. This signal arrives after
we've created another page with .set_kind(), causing our code to think
the DOM is ready when it's not. Then when we try to inject the dynamic
styling, we get an error, as the DOM is not ready yet. In the absence
of better solutions, I've added a hack to set_kind() to deal with this
for now.

* Provide AnkiWebPage init defaults for existing add-on callers

* Inject bridge script when profile set-up skipped

Some add-ons fully override AnkiWebPage.__init__ and thus depend on _setupBridge injecting the JS bridge script.

With this change we account for these cases, while giving add-ons the opportunity to look for solutions that do not require overriding AnkiWebPage.__init__ completely.

* Add some missed pages/endpoints (thanks to iamllama)

* Avoid sending API key for remote resources

Thanks to Abdo for the report

---------

Co-authored-by: Aristotelis P <201596065+aps-amboss@users.noreply.github.com>
2025-04-17 11:15:10 +10:00
llama
9d167feb8f
Remove use of createClassComponent in mathjax-element.ts (#3919)
* replace use of deprecated createClassComponent with mount

* bump esbuild-svelte from 0.8.1 to 0.9.2

* mathjax-element.ts -> mathjax-element.svelte.ts

* move caret after tick
2025-04-13 16:21:22 +10:00
llama
d9c71a54cf
Allow drag-dropping into plaintext editor (#3902)
* expose field index as data attr on container

* allow drag/dropping into fields' plaintext editors
2025-04-11 19:34:47 +10:00
llama
8ec139f62a
Debounce mathjax rendering to avoid stalling (#3827)
* move change-timer to editable

* debounce mathjax rendering
2025-02-21 16:39:11 +07:00
GithubAnon0000
1beb0cfa8c
Update NoteEditor.svelte to swap pin and html view. (#3821) 2025-02-16 16:23:22 +07:00
llama
da8c0f0e9b
clear io image field when resetting in add mode (#3794) 2025-02-06 22:58:49 +07:00
llama
df808727c8
fix changes to tags not being reflected when editing in io mode (#3768) 2025-01-25 10:36:21 +03:00
llama
9c0911891d
Fix "Create copy" for IO notes (#3730)
* expose get_image_occlusion_fields

* fix create copy for io

* revert current impl

* passthru original note id when creating copy

* add IOCloningMode

* fix create copy for io
2025-01-17 16:03:00 +11:00
wackbyte
b6afddd181
Reduce use of type casting (#3723) 2025-01-12 20:05:05 +11:00
llama
b6d7bb190d
Fix IO editor always starting in "hide all, guess one" mode (#3709)
* update backend

* set hideAllGuessOne in mask editor instead
2025-01-09 23:14:02 +11:00
llama
f0e67c4cd3
Fix image field not being saved if a mask is created too quickly (#3706)
* commit image field immediately in setupMaskEditor

* use saveFieldNow instead
2025-01-09 22:29:34 +11:00
Taylor Obyen
d6aa95950d
Fix occlusion drift again (#3443)
* Fix occlusion drift

* Fix image editor occasionally not loading fully

* Fix occlusion disassociation when browsing

* Address oversights

* Fix translucent modifier applies to newly created shapes incorrectly

* Fix i-text turns yellow upon immediate note change

* Fix image occlusion hot keys not disabled when typing

* Improve text label creation experience

* Remove redundant functions

* Fix error when adding occlusion (dae)
2024-10-02 17:19:52 +10:00
Abdo
bf46a5f08c
Update to Svelte 5 (#3292)
* Update to Svelte 5

* Fix `<tr> is invalid inside <table>`

* Update sveltekit-svg to match svelte version

Fixes deck options failing to load, and a bunch of warnings with
./yarn dev

* Fix graph tooltips

* Fix editor loading

* Fix MathJax editor not loading

* Formatting

* Fix new formatting errors

* Merge remote-tracking branch 'origin/main' into svelte5

* Remove slot inside EditorToolbar

I think this is just stray code left over from a refactor, but I'm
not 100% sure.

Fixes
Error: Object literal may only specify known properties, and 'children' does not exist in type '{ size: number; wrap: boolean; api?: Partial<EditorToolbarAPI> | undefined; }'. (ts)
<div class="note-editor">
    <EditorToolbar {size} {wrap} api={toolbar}>
        <slot slot="notetypeButtons" name="notetypeButtons" />

* Fix component typing error

* Comment out svelte/internal exports, so editor loads

* Fix image occlusions in editor

* Revert "Remove slot inside EditorToolbar"

This reverts commit b3095e07ac,
which prevented the Preview button from showing in the browser.

This will break our tests again.

* Update vite

* Disable routes/tmp for now

* Fix references issue in routes/tmp
2024-09-25 18:49:07 +10:00
Abdo
4ab0db3127
Another try at fixing IO events issue (#3210) 2024-05-28 10:29:21 +01:00
Mani
c2d565ee4f
do not recreate page when toggle button used (#3208) 2024-05-24 10:47:18 +01:00
Damien Elmes
f639c3660a Revert "Revert "Revert "Preserve HTML formatting inside clozes (#3038)"""
This reverts commit 9c733848b8.
2024-05-17 11:51:09 +07:00
Abdo
998b91c1fe
Fix IO event handlers being run on normal notes (#3195) 2024-05-15 12:48:58 +01:00
RumovZ
790c52f012
Svg icon (#3135)
* Add sveltekit-svg plugin to fix svg icon styling

Closes #3127.

* Unify svg icon usage

Moves all icons into ts/lib/components/icons.ts and uses a single component to render
them both with eslint and svelte-kit.

* Fix spinning revert icon not being centered

* Use svg earth icon for global label

* Add tooltip to global label icon

* Remove eslint-plugin-simple-import-sort

Imports are already sorted by dprint with conflicting rules.
2024-04-24 02:37:31 +01:00
Damien Elmes
9c733848b8 Revert "Revert "Preserve HTML formatting inside clozes (#3038)""
This reverts commit e911b4b69a.

Trying again now that 24.04 is out.
2024-03-31 15:55:30 +07:00
Damien Elmes
9f55cf26fc
Switch to SvelteKit (#3077)
* Update to latest Node LTS

* Add sveltekit

* Split tslib into separate @generated and @tslib components

SvelteKit's path aliases don't support multiple locations, so our old
approach of using @tslib to refer to both ts/lib and out/ts/lib will no
longer work. Instead, all generated sources and their includes are
placed in a separate out/ts/generated folder, and imported via @generated
instead. This also allows us to generate .ts files, instead of needing
to output separate .d.ts and .js files.

* Switch package.json to module type

* Avoid usage of baseUrl

Incompatible with SvelteKit

* Move sass into ts; use relative links

SvelteKit's default sass support doesn't allow overriding loadPaths

* jest->vitest, graphs example working with yarn dev

* most pages working in dev mode

* Some fixes after rebasing

* Fix/silence some svelte-check errors

* Get image-occlusion working with Fabric types

* Post-rebase lock changes

* Editor is now checked

* SvelteKit build integrated into ninja

* Use the new SvelteKit entrypoint for pages like congrats/deck options/etc

* Run eslint once for ts/**; fix some tests

* Fix a bunch of issues introduced when rebasing over latest main

* Run eslint fix

* Fix remaining eslint+pylint issues; tests now all pass

* Fix some issues with a clean build

* Latest bufbuild no longer requires @__PURE__ hack

* Add a few missed dependencies

* Add yarn.bat to fix Windows build

* Fix pages failing to show when ANKI_API_PORT not defined

* Fix svelte-check and vitest on Windows

* Set node path in ./yarn

* Move svelte-kit output to ts/.svelte-kit

Sadly, I couldn't figure out a way to store it in out/ if out/ is
a symlink, as it breaks module resolution when SvelteKit is run.

* Allow HMR inside Anki

* Skip SvelteKit build when HMR is defined

* Fix some post-rebase issues

I should have done a normal merge instead.
2024-03-31 09:16:31 +01:00
Damien Elmes
e911b4b69a Revert "Preserve HTML formatting inside clozes (#3038)"
This reverts commit 58b2475f42.

Rolling this back for now, as it may cause regressions. We can give it
another try at the start of the next beta-testing period.
2024-03-25 16:47:54 +07:00
Abdo
58b2475f42
Preserve HTML formatting inside clozes (#3038)
* Preserve HTML formatting inside clozes

* Place caret after/inside cloze

To match the old behavior

* Fix clozing in mathjax

* Formatting

* Avoid .extractContents() and handle partially covered tags

* Exclude range end if endOffset == 0

* Remove unnecessary branches

* Use nodeIsElement

* Let extractContents() handle partially selected nodes
2024-03-18 13:44:19 +00:00
Abdo
0291847712
Fix Image field not hidden until user selects an image (#2960) 2024-01-23 14:24:12 +10:00
Mani
be1f889211
fixes: remove unfinished shapes, remove selectable and make shapes remain inside canvas (#2809)
* remove unfinished polygon and remove selectable for shapes in polygon mode

* make group and polygon position remain inside canvas area

* click through transparent area in grouped object

* add some shortcuts for basic usages

* tools button icon in center & switch mode border

* fix load svg image

* basic rtl support, panzoom have issues in rtl mode

* better zoom option both in ltr and rtl

* handle zoom event in mask editor

* add h button to handle toggle mask

* add more mime type

* use capital M (shift+m) for toggle mask

* allow io shortcuts in mask editor only

* make other shapes also remain in canvas bound area

* better zoom implementation, zoom from center
add zoom to resize event listener

* add a border to corner to handle blend of control

* add refresh button to go to  selection menu

* add tooltip to shortcuts and also add shortcut for other tools

* make opacity remain in same state when toggled on

* opacity for group/ungroup objects

* update shortcuts implementation
2023-11-24 14:06:40 +10:00
Hikaru Y
01d5a9a3d2
Fix HTML editor not displaying properly when expanding field (#2792) 2023-11-01 07:48:13 +10:00
Hikaru Y
a53806e24a
Indicate current occlusion type in pop-up menu (#2760)
* Simplify handling of occlusion types in editor code

- Unify updateIONoteInEditMode(), setOcclusionFieldInner() and
setOcclusionField() into updateOcclusionsField()
- Don't use `includeInactive` property of Shape class in editor code
- Drop `isEditMode`

+
Update the occlusions field every time a mask or text is updated, not
only in editing mode but also in adding mode, so that IO cards can be
previewed correctly in the card layout screen

* Indicate current occlusion type in pop-up menu

https://forums.ankiweb.net/t/anki-23-10-beta-5-6/35677/46

* Fix a11y warnings in Toolbar.svelte

* Drop `occludeInactive` parameter from `MaskEditorAPI.getShapes()`
2023-10-23 09:12:56 +10:00
Aristotelis
56f7d54900
Add APIs for IO mask editing (#2758)
* Add simple mask editor add-on API

* Signal completed mask editor image loading to Python

* Add API methods for querying mask editor state, fix formatting

* Use event forwarding to propagate image loaded event

Should fix mobile support by moving all bridgeCommand calls to `NoteEditor.svelte`

* Add shape classes to mask editor API

---------

Co-authored-by: Glutanimate <glutanimate@users.noreply.github.com>
2023-10-22 10:40:40 +10:00
Aristotelis
7ce1c4439a
Propagate editor UI state transitions to add-ons (#2711)
* Propagate editor UI state transitions to add-ons

* Also set initial Python state to EditorState.INITIAL

---------

Co-authored-by: Glutanimate <glutanimate@users.noreply.github.com>
2023-10-13 08:47:50 +10:00
Aristotelis
4cd12ccd28
Refactor IO image pickers into separate component (#2710)
* Refactor IO image pickers into separate component

* Adjust import path

* Move styles to component and tweak class names

* Remove unused import

---------

Co-authored-by: Glutanimate <glutanimate@users.noreply.github.com>
2023-10-10 13:26:20 +10:00
Abdo
074f452762
Allow creating an image occlusion from the clipboard (#2689)
* Allow creating an image occlusion from the clipboard

* Refactor pasted image name construction into methods

* Reduce button's top padding

* Fix capitalization

* Fix quality parameter of pasted image

* Fix lint errors

* setup_mask_editor_for_file -> setup_mask_editor

* Select -> Paste

* Extract image reading logic

* Fix inlinedImageToFilename
2023-09-29 15:51:44 +10:00
Damien Elmes
a7b4c90146 Use field tags instead of hard-coding occlusion fields
+ Don't protect the comments field

It's not required by our current code. We can remove the protection
from Header and Back Extra in the future too, once we no longer depend
on them.

Closes #2621
2023-09-18 10:10:11 +10:00
Damien Elmes
c0b4b3d0e7 Fix mask editor disappearing when saveNow() called
Closes #2619
2023-09-17 11:51:48 +10:00
Mani
87e2cf7976
fix: reset image button in io note editor (#2602) 2023-08-16 07:47:46 +10:00
Mani
b9da61f993
follow-up pr for io button in note editor (#2600)
* follow-up pr for io button in note editor

* Expose change event in Svelte instead of relying on timeout (dae)
2023-07-31 14:24:26 +10:00
Damien Elmes
1d7559819c Quick fix for I/O disappearing after first add
Closes #2596
2023-07-27 23:35:20 +10:00
Mani
135de7f9ed
image occlusion button in note editor (#2485)
* setup mask editor in note editor
- add image on mask button click (only one time)
- show hide add button for io on notetype change
- hide field in io notetype
- icon for toggle
and replace image

* add update io notes

* Tidy up i/o notetype check and fix error

- Make it a method on editor
- Use .get(), because the setting doesn't exist on older notetypes
- Pass the bool value into the ts code, instead of the enum

* reset io page after adding

* remove adjust function & add target for mask editor

* handle browse mode & merged sidetoolbar and toptoolbar to toolbar

* fix: shape, button click in browse, dropdown menu

* add arrow to add button

* store for handling visiblity of maskeditor
- remove update  button in edit mode, implement autoupdate

* update var name

* simplify store
2023-07-27 22:45:49 +10:00
Damien Elmes
c8458fce16
Update to Svelte 4, and update most other JS deps (#2565)
* eslint-plugin-svelte3 -> eslint-plugin-svelte

The former is deprecated, and blocks an update to Svelte 4.

Also drop unused svelte2tsx and types package.

* Drop unused symbols code for now

It may be added back in the future, but for now dropping it will save
200k from our editor bundle.

* Remove sass and caniuse-lite pins

The latter no longer seems to be required. The former was added to
suppress deprecation warnings when compiling the old bootstrap version
we have pinned. Those are hidden by the build tool now (though we really
need to address them at one point: https://github.com/ankitects/anki/issues/1385)

Also removed unused files section.

* Prevent proto compile from looking in node_modules/@types/sass

When deps are updated, tsc aborts because @types/sass is a dummy package
without an index.d.ts file.

* Filter Svelte warnings out of ./run

* Update to latest Bootstrap

This fixes the deprecation warnings we were getting during build:
bootstrap doesn't accept runtime CSS variables being set in Sass, as
it wants to apply transforms to the colors.

Closes #1385

* Start port to Svelte 4

- svelte-check tests have a bunch of failures; ./run works
- Svelte no longer exposes internals, so we can't use create_in_transition
- Also update esbuild and related components like esbuild-svelte

* Fix test failures

Had to add some more a11y warning ignores - have added
https://github.com/ankitects/anki/issues/2564 to address that in the
future.

* Remove some dependency pins

+ Remove sass, we don't need it directly

* Bump remaining JS deps that have a current semver

* Upgrade dprint/license-checker/marked

The new helper method avoids marked printing deprecation warnings to
the console.

Also remove unused lodash/long types, and move lodahs-es to devdeps

* Upgrade eslint and fluent packages

* Update @floating-ui/dom

The only dependencies remaining are currently blocked:

- Jest 29 gives some error about require vs import; may not be worth
investigating if we switch to Deno for the tests
- CodeMirror 6 is a big API change and will need work.

* Roll dprint back to an earlier version

GitHub dropped support for Ubuntu 18 runners, causing dprint's artifacts
to require a glibc version greater than what Anki CI currently has.
2023-07-01 16:21:53 +10:00
Hikaru Y
1aabff9248
Fix two issues with MathJax editor (#2550)
* Fix MathJax editor not closing when changing notes via shortcut

Another commit will remove the on:blur handler set for <MathjaxEditor>,
in which case the function will also be called when changing notes with
a mouse click.

* Don't close MathJax editor on blur event

Closing MathJax editor on a blur event caused it to close even when
it should not.
e.g.
- when switching to another application
- when right-clicking to bring up the context menu
- when clicking on the empty space around CodeMirror
2023-06-19 13:55:40 +10:00
Hikaru Y
7164723a7a
Fix two issues that can cause editor fields to behave incorrectly (#2540)
* Fix shortcut not being unregistered when Plain/RichTextBadge is detroyed

This fixes an issue where, if the "Show HTML by default" option of
fields located at the same position in two notetypes have different
values, switching between those notetypes during an editor session
would cause the keyboard shortcut (Ctrl+Shift+X) to no longer function
correctly thereafter.

* Don't restore fields' state if notetype has been modified

This fixes an issue where editor fields behave incorrectly after
opening the 'Fields' dialog and customizing the notetype. An example
of incorrect behavior is that after adding a new field and closing
the dialog, the added field would display both richtext input and
plaintext input, regardless of the options.

* Rename type, variable and function

- Apply suggestions from code review
- Also use optional chaining instead of non-null assertion
2023-06-14 09:38:06 +10:00
Abdo
3a32e4b1bd
Disable add-on buttons when no field is focused by default (#2532) 2023-06-05 12:44:28 +10:00
Damien Elmes
e63b4b9927 Experiment with disabling prettier whitespace sensitivity
Prettier by default tries to preserve whitespace around inline tags,
which can prevent problems such as a space before the period in
'<a>text</a>.':

https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting

Unfortunately only standard HTML block elements are excluded from this
behaviour, so all of our Svelte components are treated the same way, even
if they are block-based, or used in a way where the extra whitespace
doesn't matter. This makes the code somewhat harder to read.

Changing this option does carry the risk that rogue spaces will creep
into our UI in the future as code is formatted, but as there don't appear
to be any such issues with this initial reformat, I think the improved
readability may justify the relatively small risk.
2023-06-01 11:11:26 +10:00
Hikaru Y
9123821131
Refactor plain/rich text input toggling code; fix focus loss (#2479)
* Refactor plain/rich text input toggling code; fix focus loss

Fix:
- Issue where field loses focus when plain/rich text input is closed

Refactoring:
- Call refocus() inside the reactive statement in
  Plain/RichTextInput.svelte to eliminate the need for polling
  with requestAnimationFrame
- Introduce 'Flag' class
- Move 'on:toggle' handlers from inline to functions defined in
  the <script> section for better readability

* Improve code clarity based on feedback from code review

- Rename method and add comment to it
- Add 'private' access modifier to property
2023-04-22 16:08:25 +10:00
Hikaru Y
0e0436f850
Allow Shift+Tab to move focus from tag area to last field (#2458) 2023-03-28 14:13:21 +10:00
Hikaru Y
146bed12d9
Fix current tag text not committed when changing note via shortcut key (#2441) 2023-03-16 16:48:29 +10:00
Fabricio Duarte
fd688b5fc0
Improved fix for open editors getting carried to different notetypes (#2422)
* Revert "Fix open editors getting carried over to different notetypes (#2393)"

This reverts commit bf5bcd3f52.

* Improved fix for open editors getting carried over to different notetypes

* Run ninja format
2023-03-08 19:22:02 +10:00
Fabricio Duarte
bf5bcd3f52
Fix open editors getting carried over to different notetypes (#2393)
* Fix open editors getting carried over to different notetypes

* Fix first field not getting automatically focused

* Fix collapsibles not transitioning in reduced motion mode

* Fix editor taking a longer time to start when reduced motion is enabled

If we don't transition, the editor actually takes considerably longer to create all the fields.

* Fix fields not collapsing when notetype is loaded
2023-02-27 16:49:48 +10:00
Matthias Metelka
b12476de9a
Simplify NoteEditor by replacing Pane components with Collapsible (#2395)
* Remove Pane components and use Collapsible for TagEditor

* Update translations

* Give TagEditor border and focus outline

* Use ScrollArea from #2248 for fields

* Refactor ScrollArea

* Fix error caused by calling bridgeCommand when it's not available

* Make sure tag editor fills whole width of container

which is important for the CSV import page.

* Update NoteEditor.svelte

* Add back removed ftl strings

* Fix tests (dae)
2023-02-27 16:23:19 +10:00
Fabricio Duarte
39ab53d22a
Fix HTML editor hiding when selected as default (#2377) 2023-02-20 18:15:21 +10:00