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

Disable FormatBlock buttons for Codable

Browse source
This commit is contained in:
Henrik Giesel 2021-06-18 01:17:43 +02:00
parent eeb954535f
commit 28679968f7
5 changed files with 174 additions and 244 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ts/components/WithContext.svelte
View file

@ -6,7 +6,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import type { Readable } from "svelte/store"; import type { Readable } from "svelte/store";
import { getContext } from "svelte"; import { getContext } from "svelte";
type T = unknown; type T = boolean;
export let key: Symbol | string; export let key: Symbol | string;

79
ts/editor/CommandIconButton.svelte Normal file
View file

@ -0,0 +1,79 @@
<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="typescript">
import IconButton from "components/IconButton.svelte";
import WithShortcut from "components/WithShortcut.svelte";
import WithState from "components/WithState.svelte";
import OnlyEditable from "./OnlyEditable.svelte";
import { appendInParentheses } from "./helpers";
export let key: string;
export let tooltip: string;
export let shortcut: string = "";
export let withoutShortcut = false;
export let withoutState = false;
</script>
<OnlyEditable let:disabled>
{#if withoutShortcut && withoutState}
<IconButton {tooltip} {disabled} on:click={() => document.execCommand(key)}>
<slot />
</IconButton>
{:else if withoutShortcut}
<WithState
{key}
update={() => document.queryCommandState(key)}
let:state={active}
let:updateState
>
<IconButton
{tooltip}
{active}
{disabled}
on:click={(event) => {
document.execCommand(key);
updateState(event);
}}
>
<slot />
</IconButton>
</WithState>
{:else if withoutState}
<WithShortcut {shortcut} let:createShortcut let:shortcutLabel>
<IconButton
tooltip={appendInParentheses(tooltip, shortcutLabel)}
{disabled}
on:click={() => document.execCommand(key)}
on:mount={createShortcut}
>
<slot />
</IconButton>
</WithShortcut>
{:else}
<WithShortcut {shortcut} let:createShortcut let:shortcutLabel>
<WithState
{key}
update={() => document.queryCommandState(key)}
let:state={active}
let:updateState
>
<IconButton
tooltip={appendInParentheses(tooltip, shortcutLabel)}
{active}
{disabled}
on:click={(event) => {
document.execCommand(key);
updateState(event);
}}
on:mount={createShortcut}
>
<slot />
</IconButton>
</WithState>
</WithShortcut>
{/if}
</OnlyEditable>

115
ts/editor/FormatBlockButtons.svelte
View file

@ -11,8 +11,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import IconButton from "components/IconButton.svelte"; import IconButton from "components/IconButton.svelte";
import ButtonDropdown from "components/ButtonDropdown.svelte"; import ButtonDropdown from "components/ButtonDropdown.svelte";
import ButtonToolbarItem from "components/ButtonToolbarItem.svelte"; import ButtonToolbarItem from "components/ButtonToolbarItem.svelte";
import WithState from "components/WithState.svelte";
import WithDropdownMenu from "components/WithDropdownMenu.svelte"; import WithDropdownMenu from "components/WithDropdownMenu.svelte";
import OnlyEditable from "./OnlyEditable.svelte";
import CommandIconButton from "./CommandIconButton.svelte";
import { getListItem } from "./helpers"; import { getListItem } from "./helpers";
import { import {
@ -46,134 +47,66 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<ButtonGroup {api}> <ButtonGroup {api}>
<ButtonGroupItem> <ButtonGroupItem>
<WithState <CommandIconButton
key="insertUnorderedList" key="insertUnorderedList"
update={() => document.queryCommandState("insertUnorderedList")}
let:state={active}
let:updateState
>
<IconButton
tooltip={tr.editingUnorderedList()} tooltip={tr.editingUnorderedList()}
{active} withoutShortcut>{@html ulIcon}</CommandIconButton
on:click={(event) => {
document.execCommand("insertUnorderedList");
updateState(event);
}}
> >
{@html ulIcon}
</IconButton>
</WithState>
</ButtonGroupItem> </ButtonGroupItem>
<ButtonGroupItem> <ButtonGroupItem>
<WithState <CommandIconButton
key="insertOrderedList" key="insertOrderedList"
update={() => document.queryCommandState("insertOrderedList")}
let:state={active}
let:updateState
>
<IconButton
tooltip={tr.editingOrderedList()} tooltip={tr.editingOrderedList()}
{active} withoutShortcut>{@html olIcon}</CommandIconButton
on:click={(event) => {
document.execCommand("insertOrderedList");
updateState(event);
}}
> >
{@html olIcon}
</IconButton>
</WithState>
</ButtonGroupItem> </ButtonGroupItem>
<ButtonGroupItem> <ButtonGroupItem>
<WithDropdownMenu let:createDropdown let:menuId> <WithDropdownMenu let:createDropdown let:menuId>
<IconButton on:mount={createDropdown}> <OnlyEditable let:disabled>
<IconButton {disabled} on:mount={createDropdown}>
{@html listOptionsIcon} {@html listOptionsIcon}
</IconButton> </IconButton>
</OnlyEditable>
<ButtonDropdown id={menuId}> <ButtonDropdown id={menuId}>
<ButtonToolbarItem id="justify"> <ButtonToolbarItem id="justify">
<ButtonGroup> <ButtonGroup>
<ButtonGroupItem> <ButtonGroupItem>
<WithState <CommandIconButton
key="justifyLeft" key="justifyLeft"
update={() => document.queryCommandState("justifyLeft")}
let:state={active}
let:updateState
>
<IconButton
tooltip={tr.editingAlignLeft()} tooltip={tr.editingAlignLeft()}
{active} withoutShortcut
on:click={(event) => { >{@html justifyLeftIcon}</CommandIconButton
document.execCommand("justifyLeft");
updateState(event);
}}
> >
{@html justifyLeftIcon}
</IconButton>
</WithState>
</ButtonGroupItem> </ButtonGroupItem>
<ButtonGroupItem> <ButtonGroupItem>
<WithState <CommandIconButton
key="justifyCenter" key="justifyCenter"
update={() =>
document.queryCommandState("justifyCenter")}
let:state={active}
let:updateState
>
<IconButton
tooltip={tr.editingCenter()} tooltip={tr.editingCenter()}
{active} withoutShortcut
on:click={(event) => { >{@html justifyCenterIcon}</CommandIconButton
document.execCommand("justifyCenter");
updateState(event);
}}
> >
{@html justifyCenterIcon}
</IconButton>
</WithState>
</ButtonGroupItem> </ButtonGroupItem>
<ButtonGroupItem> <ButtonGroupItem>
<WithState <CommandIconButton
key="justifyRight" key="justifyRight"
update={() =>
document.queryCommandState("justifyRight")}
let:state={active}
let:updateState
>
<IconButton
tooltip={tr.editingAlignRight()} tooltip={tr.editingAlignRight()}
{active} withoutShortcut
on:click={(event) => { >{@html justifyRightIcon}</CommandIconButton
document.execCommand("justifyRight");
updateState(event);
}}
> >
{@html justifyRightIcon}
</IconButton>
</WithState>
</ButtonGroupItem> </ButtonGroupItem>
<ButtonGroupItem> <ButtonGroupItem>
<WithState <CommandIconButton
key="justifyFull" key="justifyFull"
update={() => document.queryCommandState("justifyFull")}
let:state={active}
let:updateState
>
<IconButton
tooltip={tr.editingJustify()} tooltip={tr.editingJustify()}
{active} withoutShortcut
on:click={(event) => { >{@html justifyFullIcon}</CommandIconButton
document.execCommand("justifyFull");
updateState(event);
}}
> >
{@html justifyFullIcon}
</IconButton>
</WithState>
</ButtonGroupItem> </ButtonGroupItem>
</ButtonGroup> </ButtonGroup>
</ButtonToolbarItem> </ButtonToolbarItem>
@ -181,21 +114,27 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<ButtonToolbarItem id="indentation"> <ButtonToolbarItem id="indentation">
<ButtonGroup> <ButtonGroup>
<ButtonGroupItem> <ButtonGroupItem>
<OnlyEditable let:disabled>
<IconButton <IconButton
on:click={outdentListItem} on:click={outdentListItem}
tooltip={tr.editingOutdent()} tooltip={tr.editingOutdent()}
{disabled}
> >
{@html outdentIcon} {@html outdentIcon}
</IconButton> </IconButton>
</OnlyEditable>
</ButtonGroupItem> </ButtonGroupItem>
<ButtonGroupItem> <ButtonGroupItem>
<OnlyEditable let:disabled>
<IconButton <IconButton
on:click={indentListItem} on:click={indentListItem}
tooltip={tr.editingIndent()} tooltip={tr.editingIndent()}
{disabled}
> >
{@html indentIcon} {@html indentIcon}
</IconButton> </IconButton>
</OnlyEditable>
</ButtonGroupItem> </ButtonGroupItem>
</ButtonGroup> </ButtonGroup>
</ButtonToolbarItem> </ButtonToolbarItem>

145
ts/editor/FormatInlineButtons.svelte
View file

@ -7,10 +7,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import ButtonGroup from "components/ButtonGroup.svelte"; import ButtonGroup from "components/ButtonGroup.svelte";
import ButtonGroupItem from "components/ButtonGroupItem.svelte"; import ButtonGroupItem from "components/ButtonGroupItem.svelte";
import IconButton from "components/IconButton.svelte"; import CommandIconButton from "./CommandIconButton.svelte";
import WithShortcut from "components/WithShortcut.svelte";
import WithContext from "components/WithContext.svelte";
import WithState from "components/WithState.svelte";
import { import {
boldIcon, boldIcon,
@ -20,157 +17,57 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
subscriptIcon, subscriptIcon,
eraserIcon, eraserIcon,
} from "./icons"; } from "./icons";
import { appendInParentheses } from "./helpers";
import { disabledKey } from "components/contextKeys";
import { inCodableKey } from "./contextKeys";
export let api = {}; export let api = {};
</script> </script>
<ButtonGroup {api}> <ButtonGroup {api}>
<ButtonGroupItem> <ButtonGroupItem>
<WithShortcut shortcut={"Control+B"} let:createShortcut let:shortcutLabel> <CommandIconButton
<WithContext key={disabledKey} let:context={disabled}>
<WithContext key={inCodableKey} let:context={inCodable}>
<WithState
key="bold" key="bold"
update={() => document.queryCommandState("bold")} shortcut={"Control+B"}
let:state={active} tooltip={tr.editingBoldText()}>{@html boldIcon}</CommandIconButton
let:updateState
> >
<IconButton
tooltip={appendInParentheses(
tr.editingBoldText(),
shortcutLabel
)}
{active}
disabled={disabled || inCodable}
on:click={(event) => {
document.execCommand("bold");
updateState(event);
}}
on:mount={createShortcut}
>
{@html boldIcon}
</IconButton>
</WithState>
</WithContext>
</WithContext>
</WithShortcut>
</ButtonGroupItem> </ButtonGroupItem>
<ButtonGroupItem> <ButtonGroupItem>
<WithShortcut shortcut={"Control+I"} let:createShortcut let:shortcutLabel> <CommandIconButton
<WithState
key="italic" key="italic"
update={() => document.queryCommandState("italic")} shortcut={"Control+I"}
let:state={active} tooltip={tr.editingItalicText()}>{@html italicIcon}</CommandIconButton
let:updateState
> >
<IconButton
tooltip={appendInParentheses(tr.editingItalicText(), shortcutLabel)}
{active}
on:click={(event) => {
document.execCommand("italic");
updateState(event);
}}
on:mount={createShortcut}
>
{@html italicIcon}
</IconButton>
</WithState>
</WithShortcut>
</ButtonGroupItem> </ButtonGroupItem>
<ButtonGroupItem> <ButtonGroupItem>
<WithShortcut shortcut={"Control+U"} let:createShortcut let:shortcutLabel> <CommandIconButton
<WithState
key="underline" key="underline"
update={() => document.queryCommandState("underline")} shortcut={"Control+U"}
let:state={active} tooltip={tr.editingUnderlineText()}>{@html underlineIcon}</CommandIconButton
let:updateState
> >
<IconButton
tooltip={appendInParentheses(
tr.editingUnderlineText(),
shortcutLabel
)}
{active}
on:click={(event) => {
document.execCommand("underline");
updateState(event);
}}
on:mount={createShortcut}
>
{@html underlineIcon}
</IconButton>
</WithState>
</WithShortcut>
</ButtonGroupItem> </ButtonGroupItem>
<ButtonGroupItem> <ButtonGroupItem>
<WithShortcut shortcut={"Control+="} let:createShortcut let:shortcutLabel> <CommandIconButton
<WithState
key="superscript" key="superscript"
update={() => document.queryCommandState("superscript")} shortcut={"Control+="}
let:state={active} tooltip={tr.editingSuperscript()}>{@html superscriptIcon}</CommandIconButton
let:updateState
> >
<IconButton
tooltip={appendInParentheses(
tr.editingSuperscript(),
shortcutLabel
)}
{active}
on:click={(event) => {
document.execCommand("superscript");
updateState(event);
}}
on:mount={createShortcut}
>
{@html superscriptIcon}
</IconButton>
</WithState>
</WithShortcut>
</ButtonGroupItem> </ButtonGroupItem>
<ButtonGroupItem> <ButtonGroupItem>
<WithShortcut shortcut={"Control+Shift+="} let:createShortcut let:shortcutLabel> <CommandIconButton
<WithState
key="subscript" key="subscript"
update={() => document.queryCommandState("subscript")} shortcut={"Control+Shift+="}
let:state={active} tooltip={tr.editingSubscript()}>{@html subscriptIcon}</CommandIconButton
let:updateState
> >
<IconButton
tooltip={appendInParentheses(tr.editingSubscript(), shortcutLabel)}
{active}
on:click={(event) => {
document.execCommand("subscript");
updateState(event);
}}
on:mount={createShortcut}
>
{@html subscriptIcon}
</IconButton>
</WithState>
</WithShortcut>
</ButtonGroupItem> </ButtonGroupItem>
<ButtonGroupItem> <ButtonGroupItem>
<WithShortcut shortcut={"Control+R"} let:createShortcut let:shortcutLabel> <CommandIconButton
<IconButton key="removeFormat"
tooltip={appendInParentheses( shortcut={"Control+R"}
tr.editingRemoveFormatting(), tooltip={tr.editingRemoveFormatting()}
shortcutLabel withoutState>{@html eraserIcon}</CommandIconButton
)}
on:click={() => {
document.execCommand("removeFormat");
}}
on:mount={createShortcut}
> >
{@html eraserIcon}
</IconButton>
</WithShortcut>
</ButtonGroupItem> </ButtonGroupItem>
</ButtonGroup> </ButtonGroup>

15
ts/editor/OnlyEditable.svelte Normal file
View file

@ -0,0 +1,15 @@
<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="typescript">
import WithContext from "components/WithContext.svelte";
import { disabledKey } from "components/contextKeys";
import { inCodableKey } from "./contextKeys";
</script>
<WithContext key={disabledKey} let:context={disabled}>
<WithContext key={inCodableKey} let:context={inCodable}>
<slot disabled={disabled || inCodable} />
</WithContext>
</WithContext>