Commit Graph

58 Commits

Author SHA1 Message Date
Henrik Giesel
3beea5e1e4
Split/Merge editor.py for its three use cases (#1581)
* Forbid inserting object and iframe tags via PlainTextInput

* Add optional browserMode parameter to Editor

* Create new ts modules for three editor instances

- note-creator for AddCards
- browser-editor for the editor in the Browser
- reviewer-editor for the EditCurrent

* Revert "Forbid inserting object and iframe tags via PlainTextInput"

This reverts commit ab90ae8194494d883a1863126496e2d8f332509e.

* Refactor browserMode to editorMode

* Move new editor variants inside /ts/editor directory

* Fix typo
2022-01-12 14:51:43 +10:00
Damien Elmes
8d90b6b061 run buildifier/buildozer to tidy up BUILD files 2021-12-14 09:18:24 +10:00
Henrik Giesel
64d46ca638
Reverse-engineer surrounding with execCommand (#1377)
* Add utility functions for saving and restoring the caret location

Implement surroundNoSplitting

Clarify surroundNoSplitting comments

Start implementing surroundSplitting and triggerIfSimpleInput

Fix after rebase

Implement findBefore / findAfter in lib/surround

* to merge adjacent nodes into the surrounding nodes

Use new prettier settings with lib/{location,surround}

Fix imports that I missed to rename

Add some tests for find-adjacent

Split find-within from find-adjacent

Normalize nodes after insertion in surroundNoSplitting

Do not deep clone surroundNode

-> no intention of supporting deep nodes, as normalization would be impossible

Add some tests concerning nested surrounding nested nodes

Select surroundedRange after surrounding

Fix ascendWhileSingleInline

A flawed first surround/trigger implementation

Move trigger out of lib/surround

Implement Input Manager as a way to handle bold on empty selection

Switch bold button away from execCommand

Pass in Matcher instead of selector to find-adjacent and surroundNoSplitting

* Also adds a failing test for no-splitting

Refactor find-adjacent

* add failing test when findBefore's nodes have different amounts of
  child nodes

Change type signature of find-adjacent methods to more single-concern

Add test for surrounding where adjacent block becomes three Text elements

Make nodes found within surrounded range extend the ranges endOffset

Add base parameter to surroundNoSplitting to stop ascending beyond container

Stop surrounding from bubbling beyond base in merge-match

Make all tests pass

Add some failing tests to point to future development

Add empty elements as constant

Implement a broken version of unsurround

Even split text if it creates zero-length texts

-> they are still valid, despite what Chromium says

Rename {start,end} to {start,end}Container

Add more unit tests with surround after a nested element

Set endOffset after split-off possibly zero length text nodes

Deal with empty elements when surrounding

Only include split off end text if zero length

Use range anchors instead off calcluating surroundedRange from offsets

* this approach allows for removal of base elements when unsurrounding

Comment out test which fail because of jsdom bugs

We'll be able to enable them again after Jest 28

Make the first unsurround tests pass

Add new failing test for unsurround text within tag

Fix unsurround

Test is deactivated until Jest 28

Rewrite input-manager and trigger callback after insertion

Avoid creating zero length text nodes by using insertBefore when appropriate

Implement matches vs keepMatches

Make shadow root and editable element available on component tree

Make WithState work with asynchronous updater functions

Add new Bold/Italic/UnderlineButton using our logic

Add failing test for unsurrounding

* Move surround/ to domlib

* Add jest dependency

* Make find-within return a sum type array rather than two arrays

* Use FoundMatch sum-type for find-above (and find-within)

* Fix issue where elements could be cleared twice

* if they are IN the range.endContainer

* Pass remaining test

* Add another failing test

* Fix empty text nodes being considered for surrounding

* Satisfy svelte check

* Make on more type correct

* Satisfy remaining tests

* Add missing copyright header
2021-11-18 19:18:39 +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
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
Henrik Giesel
c64bac57a6
Put sass into repo directory (#1409)
Fix Sass build
2021-10-09 10:25:03 +10:00
Damien Elmes
046c6c55d3 use extra rootDir in tsconfig instead of symlinks
The nice thing about the symlink approach is that it allowed tsc -b
to function without any changes to the tsconfig.json file, but it meant
there were extra links we had to maintain. So instead, we just add an
extra rootDirs entry, and add two commented-out lines that can be
uncommented when wanting to build with tsc directly.
2021-10-01 18:36:52 +10:00
Damien Elmes
a3d9f90af5 update to latest rules_nodejs & switch to ts_project
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.
2021-10-01 12:52:53 +10:00
Henrik Giesel
e71aed7146 Correctly import CodeMirror 2021-09-15 13:45:19 +02:00
Henrik Giesel
a3fef552bd Include codemirror libs for svelte 2021-09-15 13:45:19 +02:00
Henrik Giesel
c88223e069 Show math icon if Mathjax is empty 2021-09-15 13:33:22 +02:00
Henrik Giesel
0f92664d4a First implementation of MathjaxHandleEditor
+ use manual focus highlighting on editing-area
2021-09-15 13:33:17 +02:00
Henrik Giesel
ed4621de9e Add InlineBlock buttons to mathjax components 2021-09-15 13:33:12 +02:00
Henrik Giesel
5129aca66f Implement MathjaxBlock 2021-09-15 13:32:30 +02:00
Henrik Giesel
9b2378c3d2 Introduce editable module 2021-09-15 13:32:30 +02:00
Henrik Giesel
874a315f83 Add SelectedTagBadge to offer context items for selected tags 2021-09-09 15:37:53 +02:00
Henrik Giesel
9418b1491b Create AddTagBadge component 2021-09-09 15:37:33 +02:00
Henrik Giesel
bfbe5057fa Make Tag icon an add tag icon 2021-09-09 15:37:33 +02:00
Henrik Giesel
1026d26793 Display a tag-outline icon in the bottom left 2021-09-09 15:37:33 +02:00
Henrik Giesel
0e858d87d4 Add Tag.svelte 2021-09-09 15:37:33 +02:00
Henrik Giesel
a1df49b11e Implement Maximum image size mechanism 2021-09-06 21:15:36 +10:00
Henrik Giesel
8429d00081 Add functionality to set float of image 2021-09-06 21:15:36 +10:00
Henrik Giesel
ddf3adfc8e Remove protobuf important from reiewer (no longer necessary (?)) 2021-07-16 16:56:56 +02:00
Henrik Giesel
af12756980 Move reviewer to ts/reviewer 2021-07-16 16:56:55 +02:00
Damien Elmes
1d4b58419e add workaround for protobufjs requiring uppercase package names
I mourn the time lost trying to track this down :-(

https://github.com/protobufjs/protobuf.js/issues/1014

We can't patch the minified file in dist without essentially duplicating
it, so this change also switches from the external file to including
the src file as part of the bundle.
2021-07-10 15:24:01 +10:00
Henrik Giesel
982afca625 Use better cloze button icon 2021-07-01 11:46:39 +02:00
Henrik Giesel
3320aecdda Satisfy svelte_check 2021-06-18 03:12:02 +02:00
Henrik Giesel
526e87aaef Remove components from editor BUILD.bazel again 2021-06-18 02:59:45 +02:00
Henrik Giesel
767af9e478 Satisfy linter 2021-06-18 02:44:15 +02:00
Henrik Giesel
8b15c81d34 Display CodeMirror in editingArea 2021-06-17 14:44:03 +02:00
Henrik Giesel
8e81a79fbf Implement new ColorPicker 2021-05-30 22:58:40 +02:00
Henrik Giesel
09af4d5ecd Add new color icons 2021-05-30 20:09:09 +02:00
Damien Elmes
a564399414 disable svelte-check on Windows for now 2021-05-19 11:45:02 +10:00
Henrik Giesel
a8b1291f84 Use StickyBar in deckoptions 2021-05-18 14:13:11 +02:00
Damien Elmes
220e14bf0f disable broken svelte_check test on Windows for now
Likely caused by a lack of sandboxing on Windows, causing the generated
.d.ts files to be visible to svelte_check, and being picked up in
preference over the .svelte file.
2021-05-08 12:15:49 +10:00
Henrik Giesel
81cf2c9bd4 Turn on editor:eslint 2021-05-07 02:04:44 +02:00
Henrik Giesel
2112b419f9 Fix ButtonDropdown 2021-05-07 02:04:44 +02:00
Henrik Giesel
982c85ded6 Export module functions from EditorToolbar 2021-05-07 02:03:55 +02:00
Henrik Giesel
0baf14dc8b Refactor {CommandIcon,Icon,Square}Button into IconButton and WithState 2021-05-07 02:03:55 +02:00
Henrik Giesel
8aa3f5f2fa Translate ts files in ts/editor to svelte files 2021-05-07 02:03:55 +02:00
Henrik Giesel
47b1cfe804 Rename editor-toolbar to components 2021-05-07 02:03:55 +02:00
Henrik Giesel
1f97f5208e Remove paragraph button 2021-04-21 14:36:24 +02:00
Henrik Giesel
72b33bf361 Gather editor-toolbar svelte components into filegroup 2021-04-21 13:18:31 +02:00
Henrik Giesel
9803bb19ca Move button implementations from editor-toolbar to editor 2021-04-20 13:44:44 +02:00
Henrik Giesel
b1de095162 Include editor-toolbar as a library in editor 2021-04-20 13:44:44 +02:00
Damien Elmes
7f738c11a2 deck config prototype work in progress
Still in the early stages, and not hooked up yet.
2021-04-14 22:33:10 +10:00
Henrik Giesel
cfb9ed267f Create explicit dependencies for the congrats,editor,graphs scss files 2021-04-13 19:47:03 +02:00
Damien Elmes
4975f47ea3 update to latest esbuild 2021-04-07 14:54:40 +10:00
Damien Elmes
f1780e6e24 move loader arg into esbuild() invocation
upstream.bzl should be kept as close to upstream as possible, so that
it's easier to send changes upstream and pull in future changes
2021-03-29 17:59:06 +10:00
Henrik Giesel
922ee56ce8 Add copy_bootstrap_icons macro 2021-03-28 18:50:37 +02:00