Commit Graph

10 Commits

Author SHA1 Message Date
Henrik Giesel
cf78a555c6
Add some component comment (#1779)
* Add a component comment for NoteEditor

* Move comments above component template

* EditorField -> EditingArea
2022-04-19 17:20:26 +10:00
Henrik Giesel
1ec3741934
Fix outstanding tag editor issues (#1717)
* Start using WithFloating for SelectedTagBadge

* Adjust arrow on WithFloating for all directions

* Move TagOptionsBadge to its own sub directory

* Show autocomplete menu via WithFloating

* Have WithFloating return asReference instead of initializing its own reference element

* Add html: overflow: hidden for editor

* Replace ButtonToolbar with generic div

* Move scroll logic into autocomplete item + restrict Popover width to 95vw

* Fix autocomplete menu after pressing enter after selecting

- should not trigger an autocomplete choose

* Overlap TagInput perfectly with Tag

* Satisfy formatter

* Fix autocompletion item scrolling too much

* Remove unused Tag.svelte focusable prop

* Remove console.log

* Fix floating arrow is a diamond in dark mode

* Set autocompletion menu to 80vw
2022-03-11 15:48:49 +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
8b84368e3a
Move all buttons to our custom inline surrounding (#1682)
* Clarify some comments

* Don't destructure insertion trigger

* Make superscript and subscript use domlib/surround

* Create new {Text,Highlight}ColorButton

* Use domlib/surround for textcolor

- However there's still a crucial bug, when you're breaking existing
  colored span when unsurrounding, their color is not restored

* Add underline format to removeFormats

* Simplify type of ElementMatcher and ElementClearer for end users

* Add some comments for normalize-insertion-ranges

* Split normalize-insertion-ranges into remove-adjacent and remove-within

* Factor out find-remove from unsurround.ts

* Rename merge-mach, simplify remove-within

* Clarify some comments

* Refactor first reduce

* Refactor reduceRight

* Flatten functions in merge-ranges

* Move some functionality to merge-ranges and do not export

* Refactor merge-ranges

* Remove createInitialMergeMatch

* Finish refactoring of merge-ranges

* Refactor merge-ranges to minimal-ranges and add some unit testing

* Move more logic into text-node

* Remove most most of the logic from remove-adjacent

- remove-adjacent is still part of the "merging" logic, as it increases
  the scope of the child node ranges

* Add some tests for edge cases

* Merge remove-adjacent logic into minimal-ranges

* Refactor unnecessary list destructuring

* Add some TODOs

* Put removing nodes and adding new nodes into sequence

* Refactor MatchResult to MatchType and return clear from matcher

* Inline surround/helpers

* Shorten name of param

* Add another edge case test

* Add an example where commonAncestorContainer != normalization level

* Fix bug in find-adjacent when find more than one nested nodes

* Allow comments for Along type

* Simplify find-adjacent by removing intermediate and/or curried functions

* Remove extend-adjacent

* Add more tests when find-adjacent finds by descension

* Fix find-adjacent descending into block-level elements

* Add clarifying comment to refusing to descend into block-level elements

* Move shifting logic into find-adjacent

* Rename file matcher to match-type

* Give a first implemention of TreeVertex

* Remove MatchType.ALONG

- findAdjacent now directly modifies the range

* Rename MatchType.MATCH into MatchType.REMOVE

* Implement a version of find-within that utilizies match-tree

* Turn child node range into a class

* Fix bug in new find-adjacent function

* Make all find-adjacent tests test for ranges

* Surrounding within farthestMatchingAncestor when available

* Fix an issue with negligable elements

- also rename "along" elements to "negligable"

* Add two TODOs to SurroundFormat interface

* Have a messy first implementation of the new tree-node algorithm

* Maintain whether formatting nodes are covered or within user selection

* Move covered and insideRange into TreeNode superclass

* Reimplement findAdjacent logic

* Add extension logic

* Add an evaluate method to nodes

* Introduce BlockNode

* Add a first evaluate implementation

* Add left shift and inner shift logic

* Implement SurroundFormatUser

* Allow pass in formatter, ascender and merger from outside

* Fix insideRange and covered switch-up

* Fix MatchNode.prototype.isAscendable

* Fix another switch-up of covered and insideRange...

* Remove a lot of old code

* Have surround functions only return the range

- I still cannot think of a good reason why we should return addedNodes
  and removedNodes, except for testing.

* Create formatting-tree directory

* Create build-tree directory + Move find-above up to /domlib

* Remove range-anchors

* Move unsurround logic into no-splitting

* Fix extend-merge

* Fix inner shift being eroneusly returned as left shift

* Fix oversight in SplitRange

* Redefine how ranges are recreated

* Rename covered to insideMatch and put as fourth parameter instead of third

* Keep track of match holes and match leaves

* Rename ChildNodeRange to FlatRange

* Change signature of matcher

* Fix bug in extend-merge

* Improve Match class

* Utilize cache in TextColorButton

* Implement getBaseSurrounder for TextColorButton

* Add matchAncestors field to FormattingNode

* Introduce matchAncestors and getCache

* Do clearing during parsing already

- This way, you know whether elements will be removed before getting to
  Formatting nodes

* Make HighlightColorButton use our surround mechanism

* Fix a bug with calling .removeAttribute and .hasAttribute

* Add side button to RemoveFormat button

* Add disabled to remove format side button

* Expose remove formats on RemoveFormat button

* Reinvent editor/surround as Surrounder class

* Fix split-text when working with insert trigger

* Try counteracting the contenteditable's auto surrounding

* Remove matching elements before normalizing

* Rewrite match-type

* Move setting match leaves into build

* Change editing strings

- So that color strings match bold/italic strings better

* Fix border radius of List options menu

* Implement extensions functionality

* Remove some unnecessary code

* Fix split range endOffset

* Type MatchType

* Reformat MatchType + add docs

* Fix domlib/surround/apply

* Satisfy last tests

* Register Surrounder as package

* Clarify some comments

* Correctly implement reformat

* Reformat with inactive eraser formats

* Clear empty spans with RemoveFormatButton

* Fix Super/Subscript button

* Use ftl string for hardcoded tooltip

* Adjust wording
2022-02-22 22:17:22 +10:00
Henrik Giesel
0c81bbce04
Fix field not restored if active (#1639)
* 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.
2022-02-05 15:58:31 +10:00
Henrik Giesel
c5280cd056
Fix CodeMirror retaining history of unrelated notes (#1640) 2022-02-04 18:40:50 +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
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