Disable FormatBlock buttons for Codable
This commit is contained in:
Henrik Giesel
parent
eeb954535f
commit
28679968f7
@ -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 { getContext } from "svelte";
|
||||
|
||||
type T = unknown;
|
||||
type T = boolean;
|
||||
|
||||
export let key: Symbol | string;
|
||||
|
||||
|
||||
79
ts/editor/CommandIconButton.svelte
Normal file
79
ts/editor/CommandIconButton.svelte
Normal 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>
|
||||
@ -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 ButtonDropdown from "components/ButtonDropdown.svelte";
|
||||
import ButtonToolbarItem from "components/ButtonToolbarItem.svelte";
|
||||
import WithState from "components/WithState.svelte";
|
||||
import WithDropdownMenu from "components/WithDropdownMenu.svelte";
|
||||
import OnlyEditable from "./OnlyEditable.svelte";
|
||||
import CommandIconButton from "./CommandIconButton.svelte";
|
||||
|
||||
import { getListItem } from "./helpers";
|
||||
import {
|
||||
@ -46,134 +47,66 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
|
||||
<ButtonGroup {api}>
|
||||
<ButtonGroupItem>
|
||||
<WithState
|
||||
<CommandIconButton
|
||||
key="insertUnorderedList"
|
||||
update={() => document.queryCommandState("insertUnorderedList")}
|
||||
let:state={active}
|
||||
let:updateState
|
||||
tooltip={tr.editingUnorderedList()}
|
||||
withoutShortcut>{@html ulIcon}</CommandIconButton
|
||||
>
|
||||
<IconButton
|
||||
tooltip={tr.editingUnorderedList()}
|
||||
{active}
|
||||
on:click={(event) => {
|
||||
document.execCommand("insertUnorderedList");
|
||||
updateState(event);
|
||||
}}
|
||||
>
|
||||
{@html ulIcon}
|
||||
</IconButton>
|
||||
</WithState>
|
||||
</ButtonGroupItem>
|
||||
|
||||
<ButtonGroupItem>
|
||||
<WithState
|
||||
<CommandIconButton
|
||||
key="insertOrderedList"
|
||||
update={() => document.queryCommandState("insertOrderedList")}
|
||||
let:state={active}
|
||||
let:updateState
|
||||
tooltip={tr.editingOrderedList()}
|
||||
withoutShortcut>{@html olIcon}</CommandIconButton
|
||||
>
|
||||
<IconButton
|
||||
tooltip={tr.editingOrderedList()}
|
||||
{active}
|
||||
on:click={(event) => {
|
||||
document.execCommand("insertOrderedList");
|
||||
updateState(event);
|
||||
}}
|
||||
>
|
||||
{@html olIcon}
|
||||
</IconButton>
|
||||
</WithState>
|
||||
</ButtonGroupItem>
|
||||
|
||||
<ButtonGroupItem>
|
||||
<WithDropdownMenu let:createDropdown let:menuId>
|
||||
<IconButton on:mount={createDropdown}>
|
||||
{@html listOptionsIcon}
|
||||
</IconButton>
|
||||
<OnlyEditable let:disabled>
|
||||
<IconButton {disabled} on:mount={createDropdown}>
|
||||
{@html listOptionsIcon}
|
||||
</IconButton>
|
||||
</OnlyEditable>
|
||||
|
||||
<ButtonDropdown id={menuId}>
|
||||
<ButtonToolbarItem id="justify">
|
||||
<ButtonGroup>
|
||||
<ButtonGroupItem>
|
||||
<WithState
|
||||
<CommandIconButton
|
||||
key="justifyLeft"
|
||||
update={() => document.queryCommandState("justifyLeft")}
|
||||
let:state={active}
|
||||
let:updateState
|
||||
tooltip={tr.editingAlignLeft()}
|
||||
withoutShortcut
|
||||
>{@html justifyLeftIcon}</CommandIconButton
|
||||
>
|
||||
<IconButton
|
||||
tooltip={tr.editingAlignLeft()}
|
||||
{active}
|
||||
on:click={(event) => {
|
||||
document.execCommand("justifyLeft");
|
||||
updateState(event);
|
||||
}}
|
||||
>
|
||||
{@html justifyLeftIcon}
|
||||
</IconButton>
|
||||
</WithState>
|
||||
</ButtonGroupItem>
|
||||
|
||||
<ButtonGroupItem>
|
||||
<WithState
|
||||
<CommandIconButton
|
||||
key="justifyCenter"
|
||||
update={() =>
|
||||
document.queryCommandState("justifyCenter")}
|
||||
let:state={active}
|
||||
let:updateState
|
||||
tooltip={tr.editingCenter()}
|
||||
withoutShortcut
|
||||
>{@html justifyCenterIcon}</CommandIconButton
|
||||
>
|
||||
<IconButton
|
||||
tooltip={tr.editingCenter()}
|
||||
{active}
|
||||
on:click={(event) => {
|
||||
document.execCommand("justifyCenter");
|
||||
updateState(event);
|
||||
}}
|
||||
>
|
||||
{@html justifyCenterIcon}
|
||||
</IconButton>
|
||||
</WithState>
|
||||
</ButtonGroupItem>
|
||||
|
||||
<ButtonGroupItem>
|
||||
<WithState
|
||||
<CommandIconButton
|
||||
key="justifyRight"
|
||||
update={() =>
|
||||
document.queryCommandState("justifyRight")}
|
||||
let:state={active}
|
||||
let:updateState
|
||||
tooltip={tr.editingAlignRight()}
|
||||
withoutShortcut
|
||||
>{@html justifyRightIcon}</CommandIconButton
|
||||
>
|
||||
<IconButton
|
||||
tooltip={tr.editingAlignRight()}
|
||||
{active}
|
||||
on:click={(event) => {
|
||||
document.execCommand("justifyRight");
|
||||
updateState(event);
|
||||
}}
|
||||
>
|
||||
{@html justifyRightIcon}
|
||||
</IconButton>
|
||||
</WithState>
|
||||
</ButtonGroupItem>
|
||||
|
||||
<ButtonGroupItem>
|
||||
<WithState
|
||||
<CommandIconButton
|
||||
key="justifyFull"
|
||||
update={() => document.queryCommandState("justifyFull")}
|
||||
let:state={active}
|
||||
let:updateState
|
||||
tooltip={tr.editingJustify()}
|
||||
withoutShortcut
|
||||
>{@html justifyFullIcon}</CommandIconButton
|
||||
>
|
||||
<IconButton
|
||||
tooltip={tr.editingJustify()}
|
||||
{active}
|
||||
on:click={(event) => {
|
||||
document.execCommand("justifyFull");
|
||||
updateState(event);
|
||||
}}
|
||||
>
|
||||
{@html justifyFullIcon}
|
||||
</IconButton>
|
||||
</WithState>
|
||||
</ButtonGroupItem>
|
||||
</ButtonGroup>
|
||||
</ButtonToolbarItem>
|
||||
@ -181,21 +114,27 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
<ButtonToolbarItem id="indentation">
|
||||
<ButtonGroup>
|
||||
<ButtonGroupItem>
|
||||
<IconButton
|
||||
on:click={outdentListItem}
|
||||
tooltip={tr.editingOutdent()}
|
||||
>
|
||||
{@html outdentIcon}
|
||||
</IconButton>
|
||||
<OnlyEditable let:disabled>
|
||||
<IconButton
|
||||
on:click={outdentListItem}
|
||||
tooltip={tr.editingOutdent()}
|
||||
{disabled}
|
||||
>
|
||||
{@html outdentIcon}
|
||||
</IconButton>
|
||||
</OnlyEditable>
|
||||
</ButtonGroupItem>
|
||||
|
||||
<ButtonGroupItem>
|
||||
<IconButton
|
||||
on:click={indentListItem}
|
||||
tooltip={tr.editingIndent()}
|
||||
>
|
||||
{@html indentIcon}
|
||||
</IconButton>
|
||||
<OnlyEditable let:disabled>
|
||||
<IconButton
|
||||
on:click={indentListItem}
|
||||
tooltip={tr.editingIndent()}
|
||||
{disabled}
|
||||
>
|
||||
{@html indentIcon}
|
||||
</IconButton>
|
||||
</OnlyEditable>
|
||||
</ButtonGroupItem>
|
||||
</ButtonGroup>
|
||||
</ButtonToolbarItem>
|
||||
|
||||
@ -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 ButtonGroupItem from "components/ButtonGroupItem.svelte";
|
||||
import IconButton from "components/IconButton.svelte";
|
||||
import WithShortcut from "components/WithShortcut.svelte";
|
||||
import WithContext from "components/WithContext.svelte";
|
||||
import WithState from "components/WithState.svelte";
|
||||
import CommandIconButton from "./CommandIconButton.svelte";
|
||||
|
||||
import {
|
||||
boldIcon,
|
||||
@ -20,157 +17,57 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
subscriptIcon,
|
||||
eraserIcon,
|
||||
} from "./icons";
|
||||
import { appendInParentheses } from "./helpers";
|
||||
import { disabledKey } from "components/contextKeys";
|
||||
import { inCodableKey } from "./contextKeys";
|
||||
|
||||
export let api = {};
|
||||
</script>
|
||||
|
||||
<ButtonGroup {api}>
|
||||
<ButtonGroupItem>
|
||||
<WithShortcut shortcut={"Control+B"} let:createShortcut let:shortcutLabel>
|
||||
<WithContext key={disabledKey} let:context={disabled}>
|
||||
<WithContext key={inCodableKey} let:context={inCodable}>
|
||||
<WithState
|
||||
key="bold"
|
||||
update={() => document.queryCommandState("bold")}
|
||||
let:state={active}
|
||||
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>
|
||||
<CommandIconButton
|
||||
key="bold"
|
||||
shortcut={"Control+B"}
|
||||
tooltip={tr.editingBoldText()}>{@html boldIcon}</CommandIconButton
|
||||
>
|
||||
</ButtonGroupItem>
|
||||
|
||||
<ButtonGroupItem>
|
||||
<WithShortcut shortcut={"Control+I"} let:createShortcut let:shortcutLabel>
|
||||
<WithState
|
||||
key="italic"
|
||||
update={() => document.queryCommandState("italic")}
|
||||
let:state={active}
|
||||
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>
|
||||
<CommandIconButton
|
||||
key="italic"
|
||||
shortcut={"Control+I"}
|
||||
tooltip={tr.editingItalicText()}>{@html italicIcon}</CommandIconButton
|
||||
>
|
||||
</ButtonGroupItem>
|
||||
|
||||
<ButtonGroupItem>
|
||||
<WithShortcut shortcut={"Control+U"} let:createShortcut let:shortcutLabel>
|
||||
<WithState
|
||||
key="underline"
|
||||
update={() => document.queryCommandState("underline")}
|
||||
let:state={active}
|
||||
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>
|
||||
<CommandIconButton
|
||||
key="underline"
|
||||
shortcut={"Control+U"}
|
||||
tooltip={tr.editingUnderlineText()}>{@html underlineIcon}</CommandIconButton
|
||||
>
|
||||
</ButtonGroupItem>
|
||||
|
||||
<ButtonGroupItem>
|
||||
<WithShortcut shortcut={"Control+="} let:createShortcut let:shortcutLabel>
|
||||
<WithState
|
||||
key="superscript"
|
||||
update={() => document.queryCommandState("superscript")}
|
||||
let:state={active}
|
||||
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>
|
||||
<CommandIconButton
|
||||
key="superscript"
|
||||
shortcut={"Control+="}
|
||||
tooltip={tr.editingSuperscript()}>{@html superscriptIcon}</CommandIconButton
|
||||
>
|
||||
</ButtonGroupItem>
|
||||
|
||||
<ButtonGroupItem>
|
||||
<WithShortcut shortcut={"Control+Shift+="} let:createShortcut let:shortcutLabel>
|
||||
<WithState
|
||||
key="subscript"
|
||||
update={() => document.queryCommandState("subscript")}
|
||||
let:state={active}
|
||||
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>
|
||||
<CommandIconButton
|
||||
key="subscript"
|
||||
shortcut={"Control+Shift+="}
|
||||
tooltip={tr.editingSubscript()}>{@html subscriptIcon}</CommandIconButton
|
||||
>
|
||||
</ButtonGroupItem>
|
||||
|
||||
<ButtonGroupItem>
|
||||
<WithShortcut shortcut={"Control+R"} let:createShortcut let:shortcutLabel>
|
||||
<IconButton
|
||||
tooltip={appendInParentheses(
|
||||
tr.editingRemoveFormatting(),
|
||||
shortcutLabel
|
||||
)}
|
||||
on:click={() => {
|
||||
document.execCommand("removeFormat");
|
||||
}}
|
||||
on:mount={createShortcut}
|
||||
>
|
||||
{@html eraserIcon}
|
||||
</IconButton>
|
||||
</WithShortcut>
|
||||
<CommandIconButton
|
||||
key="removeFormat"
|
||||
shortcut={"Control+R"}
|
||||
tooltip={tr.editingRemoveFormatting()}
|
||||
withoutState>{@html eraserIcon}</CommandIconButton
|
||||
>
|
||||
</ButtonGroupItem>
|
||||
</ButtonGroup>
|
||||
|
||||
15
ts/editor/OnlyEditable.svelte
Normal file
15
ts/editor/OnlyEditable.svelte
Normal 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>
|
||||
Loading…
Reference in New Issue
Block a user