Add all format inline buttons

This commit is contained in:
Henrik Giesel 2021-04-28 14:01:55 +02:00
parent 982c85ded6
commit baff3df381
2 changed files with 41 additions and 20 deletions

View file

@ -19,7 +19,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import { updateAllState, resetAllState } from "components/WithState.svelte"; import { updateAllState, resetAllState } from "components/WithState.svelte";
export function updateActiveButtons(event: Event) { export function updateActiveButtons(event: Event) {
updateAllState(event) updateAllState(event);
} }
export function clearActiveButtons() { export function clearActiveButtons() {

View file

@ -80,31 +80,52 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</WithState> </WithState>
</WithShortcut> </WithShortcut>
<!--<WithShortcut shortcut="Control+KeyU"> <WithShortcut shortcut="Control+Shift+Equal" let:createShortcut let:shortcutLabel>
<CommandIconButton tooltip={tr.editingUnderlineText()} command="underline"> <WithState
{@html underlineIcon} key="superscript"
</CommandIconButton> update={() => document.queryCommandState('superscript')}
</WithShortcut> let:state={active}
let:updateState>
<WithShortcut shortcut="Control+Shift+Equal"> <IconButton
<CommandIconButton tooltip={tr.editingSuperscript()} command="superscript"> tooltip={tr.editingSuperscript()}
{active}
on:click={(event) => {
document.execCommand('superscript');
updateState(event);
}}
on:mount={createShortcut}>
{@html superscriptIcon} {@html superscriptIcon}
</CommandIconButton> </IconButton>
</WithState>
</WithShortcut> </WithShortcut>
<WithShortcut shortcut="Control+Equal"> <WithShortcut shortcut="Control+Equal" let:createShortcut let:shortcutLabel>
<CommandIconButton tooltip={tr.editingSubscript()} command="subscript"> <WithState
{@html subscriptIcon} key="subscript"
</CommandIconButton> update={() => document.queryCommandState('subscript')}
</WithShortcut> let:state={active}
let:updateState>
<WithShortcut shortcut="Control+KeyR">
<IconButton <IconButton
tooltip={tr.editingSubscript()} tooltip={tr.editingSubscript()}
on:click={() => { {active}
on:click={(event) => {
document.execCommand('subscript');
updateState(event);
}}
on:mount={createShortcut}>
{@html subscriptIcon}
</IconButton>
</WithState>
</WithShortcut>
<WithShortcut shortcut="Control+KeyR" let:createShortcut let:shortcutLabel>
<IconButton
tooltip={tr.editingRemoveFormatting()}
on:click={(event) => {
document.execCommand('removeFormat'); document.execCommand('removeFormat');
}}> }}
on:mount={createShortcut}>
{@html eraserIcon} {@html eraserIcon}
</IconButton> </IconButton>
</WithShortcut> --> </WithShortcut>
</ButtonGroup> </ButtonGroup>