langfingaz/anki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
2a510fe230
anki/ts/editor/icons.ts

14 lines
733 B
TypeScript
Raw Normal View History

Add copyright header
2021-05-06 23:22:02 +02:00
// Copyright: Ankitects Pty Ltd and contributors
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
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-09-30 14:16:29 +02:00
/// <reference types="../lib/image-import" />
Implement cloze buttons in Mathjax editor (#1860) * Introduce RichTextClozeButtons * Implement cloze buttons in Mathjax editor
2022-05-13 05:04:20 +02:00
export { default as incrementClozeIcon } from "../icons/contain-plus.svg";
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 14:01:15 +02:00
export { default as alertIcon } from "@mdi/svg/svg/alert.svg";
Field redesign (#2002) * 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>
2022-08-19 02:02:28 +02:00
export { default as chevronDown } from "@mdi/svg/svg/chevron-down.svg";
export { default as chevronUp } from "@mdi/svg/svg/chevron-up.svg";
export { default as plainTextIcon } from "@mdi/svg/svg/code-tags.svg";
Implement cloze buttons in Mathjax editor (#1860) * Introduce RichTextClozeButtons * Implement cloze buttons in Mathjax editor
2022-05-13 05:04:20 +02:00
export { default as clozeIcon } from "@mdi/svg/svg/contain.svg";
Field redesign (#2002) * 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>
2022-08-19 02:02:28 +02:00
export { default as richTextIcon } from "@mdi/svg/svg/format-font.svg";
export { default as stickyIcon } from "@mdi/svg/svg/pin-outline.svg";
Reference in New Issue Copy Permalink