GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-24 16:56:36 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Improve behavior of paragraph command and add tooltip

Browse source
This commit is contained in:
Henrik Giesel 2021-04-20 03:55:59 +02:00
parent 893028b2df
commit dcb6a11053
4 changed files with 22 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
ftl/core/editing.ftl
View file

@ -29,6 +29,7 @@ editing-mathjax-inline = MathJax inline
editing-media = Media
editing-ordered-list = Ordered list
editing-outdent = Decrease indent
editing-paragraph = Paragraph
editing-paste = Paste
editing-record-audio-f5 = Record audio (F5)
editing-remove-formatting-ctrlandr = Remove formatting (Ctrl+R)

18
ts/editor/formatBlock.ts
View file

@ -63,6 +63,18 @@ const indentListItem = () => {
}
};
const toggleParagraph = (): void => {
const currentField = document.activeElement as EditingArea;
const paragraph = getParagraph(currentField.shadowRoot!);
if (!paragraph) {
document.execCommand("formatBlock", false, "p");
} else {
paragraph.insertAdjacentElement("beforeend", document.createElement("br"));
paragraph.replaceWith(...paragraph.childNodes);
}
};
const checkForParagraph = (): boolean => {
const currentField = document.activeElement as EditingArea;
return Boolean(getParagraph(currentField.shadowRoot!));
@ -134,11 +146,9 @@ export function getFormatBlockGroup(): DynamicSvelteComponent<typeof ButtonGroup
const paragraphButton = commandIconButton({
icon: paragraphIcon,
command: "formatBlock",
onClick: () => {
document.execCommand("formatBlock", false, "p");
},
onClick: toggleParagraph,
onUpdate: checkForParagraph,
tooltip: tr.editingUnorderedList(),
tooltip: tr.editingParagraph(),
});
const ulButton = commandIconButton({

5
ts/editor/helpers.ts
View file

@ -102,6 +102,11 @@ const isListItem = (element: Element): element is HTMLLIElement =>
window.getComputedStyle(element).display === "list-item";
const isParagraph = (element: Element): element is HTMLParamElement =>
element.tagName === "P";
const isBlockElement = (
element: Element
): element is HTMLLIElement & HTMLParamElement =>
isListItem(element) || isBlockElement(element);
export const getListItem = getAnchorParent(isListItem);
export const getParagraph = getAnchorParent(isParagraph);
export const getBlockElement = getAnchorParent(isBlockElement);

5
ts/editor/inputHandlers.ts
View file

@ -3,7 +3,7 @@
import { updateActiveButtons } from "editor-toolbar";
import { EditingArea } from "./editingArea";
import { caretToEnd, nodeIsElement, getListItem, getParagraph } from "./helpers";
import { caretToEnd, nodeIsElement, getBlockElement } from "./helpers";
import { triggerChangeTimer } from "./changeTimer";
export function onInput(event: Event): void {
@ -24,8 +24,7 @@ export function onKey(evt: KeyboardEvent): void {
// prefer <br> instead of <div></div>
if (
evt.code === "Enter" &&
!getListItem(currentField.shadowRoot!) &&
!getParagraph(currentField.shadowRoot!)
!getBlockElement(currentField.shadowRoot!) !== evt.shiftKey
) {
evt.preventDefault();
document.execCommand("insertLineBreak");