Commit Graph

17 Commits

Author SHA1 Message Date
Henrik Giesel
2be1f4c56d
Instead of transforming to {\lt}, transform to < (#1818)
* Instead of transforming to {\lt}, transform to <

- In Mathjax editor
- This way you can also use Mathjax convenience shortcuts like <=> in
  chemistry mode: \ce{<=>}

* Remove unused translateEntitiesToMathjax() (dae)

https://github.com/ankitects/anki/pull/1818#discussion_r857238310
2022-04-25 13:42:54 +10:00
Henrik Giesel
67c1f7368e
Set caret inside chemical expression in Mathjax (#1763) 2022-03-31 23:39:49 +10:00
Henrik Giesel
7f737b60c6
Fix infinite update loop in editor with invalid input HTML (#1761)
* Use async function in PlainTextInput

* Clean up PlainTextInput

* Refactor logic from {Rich,Plain}TextInput into own files

* Remove prohibited tags on content.subscribe which also parses the html
2022-03-31 11:17:13 +10:00
Henrik Giesel
29d17a84fc
Fix newline shortcut in MathjaxMenu (#1705) 2022-03-03 18:55:07 +10:00
Henrik Giesel
50e36bc312
Fix plain text (#1689)
* Move remove-prohibited-tags logic from PlainTextInput

* Make CodeMirror export a promise

* Offer lifecycle hooks for PlainTextInput for easily accessing code mirror instance

* Fix </> breaking Mathjax

* remove debug statement (dae)
2022-02-25 11:14:26 +10:00
Henrik Giesel
0d83581ab0
Fix insert media always insert at the start (on Windows) (#1684)
* Move Trigger into its own file

* Try implement HandlerList

* Implement new input handler and handler-list

* Use new refocus HandlerList in TextColorButton

* Fix TextColorButton on windows

* Move ColorPicker to editor-toolbar

* Change trigger behavior of overwriteSurround

* Fix mathjax-overlay flushCaret

* Insert image via bridgeCommand return value

* Fix invoking color picker with F8

* Have remove format work even when collapsed

* Satisfy formatter

* Insert media via callback resolved from python

* Replace print with web.eval

* Fix python formatting

* remove unused function (dae)
2022-02-25 10:59:06 +10:00
Henrik Giesel
30bbbaf00b
Use eslint for sorting our imports (#1637)
* 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
2022-02-04 18:36:34 +10:00
Henrik Giesel
a981e56008
Improved add-on extension API (#1626)
* 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
2022-02-03 14:52:11 +10:00
Henrik Giesel
f534dbb8e5
Separate input components into their own directories / Remove WithShortcut (#1613)
* 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
2022-01-24 11:43:09 +10:00
Henrik Giesel
f90895995f
Fix the caret flushing behavior when moving out of a Mathjax element (#1605)
* Fix the caret flushing behavior when moving out of a Mathjax element

* Fix typing issue and add docs for ContentEditableAPI
2022-01-19 10:17:53 +10:00
Henrik Giesel
489eadb352
Fix IME input after tab (#1584)
* Avoid initial call of mirror-dom

* Disable updateFocus from OldEditorAdapter

* fixes IME input duplication bug

* Fix saving of latestLocation for ContentEditable

* Fix IME after calling placeCaretAfterContent

* Export other libraries from domlib/index.ts

* Remove dead code

+ Uncomment code which was mistakenly left commmented
2022-01-12 08:39:41 +10:00
Henrik Giesel
4360fd16fb
Use default colors for CodeMirror in light theme Anki (#1578)
Refactor PlainTextInput

Put CodeMirror themes into variables
2022-01-10 12:51:50 +10:00
Henrik Giesel
739e286b0b
Fix some Mathjax issues (#1547)
* Move move-nodes logic into domlib

Refactor input-manager

Refactor out FocusTrap from EditingArea

Remove unnecessary selecting of node from surround

Add onInput interface to input-manager

Create MathjaxElement.svelte

- This should contain all the setup necessary for displaying
  <anki-mathjax> elements in the rich text input
- Does not contain setup necessary for Mathjax Overlay

Deal with backwards deletion, when caret inside anki-mathjax

Set mathjax elements contenteditable=false

Do not undecorate mathjaxx element on disconnect

- Fixes issues, where Mathjax might undecorate when it is moved into a
  different div

Add framed element custom element

Introduce iterateActions to allow global hooks for RichTextInput

Remove some old code

Deal with deletion of frame handles

Make Anki frame and frame handles restore each other

Make FrameElement restore its structure upon modification

Frame and strip off framing from MathjaxElement automatically

Move FrameHandle to separate FrameStart/FrameEnd

Refactor FrameHandle

Set data-frames on FrameElement

Fix logic error connected to FrameElement

Communicate frameHandle move{in,out} to anki-mathjax

Clear selection when blurring ContentEditable

Make sure frame is destroyed when undecorating Mathjax

Use Hairline space instead of zeroWidth

- it has better behavior in the contenteditable when placing the caret
  via clicking

Allow detection of block elements with `block` attribute

- This way, anki-mathjax block="true" will make field a
field be recognized to have block content

Make block frame element operater without handles

- Clicking on the left/right side of a block mathjax will insert a br
  element to that side

When deleting, remove mathajax-element not just image

Update MathjaxButtons to correctly show block state

SelectAll when moving into inline anki mathjax

Remove CodeMirror autofocus functionality

Move it to Mathjaxeditor directly

Fix getRangeAt throwing error

Update older code to use cross-browser

Fix issue with FrameHandles not being properyly removed

Satisfy formatting

Use === instead of node.isSameNode()

Fix issue of focusTrap not initialized

* Fix after rebasing

* Fix focus not being moved to first field

* Add documentation for input-manager and iterate-actions

* Export logic of ContentEditable to content-editable

* Fix issue with inserting newline right next to inline Mathjax

* Fix reframing issue of Mathjax Svelte component

* Allow for deletion of Inline Mathjax again

* Rename iterate-actions to action-list

* Add copyright header

* Split off frame-handle from frame-element

* Add some comments for framing process

* Add mising return types
2022-01-08 11:46:01 +10:00
Henrik Giesel
2778b9220c
Mathjax editor improvements (#1502)
* Remove unnecessary stopPropagation of mathjax-overlay events

* Use CodeMirror component for MathjaxHandle

* Refactor ResizeObserver code in MathjaxHandle

* Wrap setRange in CodeMirror in try/catch

* Add Mathjax Editor bottom margin

* Add custom Enter and Shift+Enter shortcuts for the MathjaxHandle

* Format

* Move placeCaretAfter to domlib

* Move focus back to field after editing Mathjax

* Put Cursor after Mathjax after accepting

* Add delete button for Mathjax

* Change border color of mathjax menu

* Refactor into MathjaxMenu

* Put caretKeyword in variable

* Use one ResizeObserver for all Mathjax images

* Add minmimum width for Mathjax editor

* is still smaller than minimal window width

* Add bazel directories to .prettierignore and format from root

* exclude ftl/usage (dae)

the json files that live there are output from our tooling, and
formatting them means an extra step each time we want to update them

also exclude .mypy_cache, which is output by scripts/mypy*

* minor ftl tweak: newline -> new line  (dae)
2021-11-23 10:27:32 +10:00
Henrik Giesel
09c29219b4
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
Damien Elmes
6af8a47d57 fix deprecation warning in latest svelte-preprocess 2021-10-26 08:43:02 +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