Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Wire up text editor formatting buttons #7415

Merged
merged 1 commit into from
Feb 26, 2025
Merged

Wire up text editor formatting buttons #7415

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions apps/desktop/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,11 @@
"@gitbutler/shared": "workspace:*",
"@gitbutler/ui": "workspace:*",
"@lexical/markdown": "0.17.0",
"@lexical/utils": "0.17.0",
"@lexical/selection": "0.17.0",
"@lexical/rich-text": "0.17.0",
"@lexical/link": "0.17.0",
"@lexical/list": "0.17.0",
"@octokit/rest": "^20.1.1",
"@reduxjs/toolkit": "catalog:redux",
"@sentry/sveltekit": "catalog:svelte",
Expand Down
17 changes: 10 additions & 7 deletions apps/desktop/src/components/v3/editor/CommitMessageEditor.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,10 @@
CodeHighlightPlugin,
CodeActionMenuPlugin,
MarkdownShortcutPlugin,
ALL_TRANSFORMERS
ALL_TRANSFORMERS,
Toolbar,
StateStoreRichTextUpdator,
LinkPlugin
} from 'svelte-lexical';

type Props = {
Expand Down Expand Up @@ -102,13 +105,12 @@
}
</script>

<FormattingPopup
onClick={(option) => {
console.log(option);
}}
/>

<Composer {initialConfig} bind:this={composer}>
<Toolbar>
<StateStoreRichTextUpdator />
<FormattingPopup />
</Toolbar>

<div class="editor-container" bind:this={editorDiv}>
<div class="editor-scroller">
<div class="editor">
Expand All @@ -126,6 +128,7 @@
<FloatingLinkEditorPlugin anchorElem={editorDiv} />
<HashtagPlugin />
<ListPlugin />
<LinkPlugin />
<MarkdownShortcutPlugin transformers={ALL_TRANSFORMERS} />
<RichTextPlugin />
<SharedHistoryPlugin />
Expand Down
178 changes: 143 additions & 35 deletions apps/desktop/src/components/v3/editor/FormattingPopup.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,61 +1,169 @@
<script lang="ts">
import Button from '@gitbutler/ui/Button.svelte';

type FormattingOptionType =
| 'bold'
| 'italic'
| 'underline'
| 'strikethrough'
| 'code'
| 'link'
| 'quote'
| 'normal-text'
| 'h1'
| 'h2'
| 'h3'
| 'bullet-list'
| 'number-list'
| 'checkbox-list';
interface Props {
onClick: (action: FormattingOptionType) => void;
}

let { onClick }: Props = $props();
import { TOGGLE_LINK_COMMAND } from '@lexical/link';
import {
INSERT_CHECK_LIST_COMMAND,
INSERT_ORDERED_LIST_COMMAND,
INSERT_UNORDERED_LIST_COMMAND
} from '@lexical/list';
import {
$createQuoteNode as createQuoteNode,
$createHeadingNode as createHeadingNode
} from '@lexical/rich-text';
import { $setBlocksType as setBlocksType } from '@lexical/selection';
import { FORMAT_TEXT_COMMAND } from 'lexical';
import {
$getSelection as getSelection,
$createParagraphNode as createParagraphNode
} from 'lexical';
import { getContext } from 'svelte';
import { getEditor } from 'svelte-lexical';
import type { Writable } from 'svelte/store';

let optionsRefWidth = $state(0);
let isScrollToSecondGroup = $state(false);

const editor = getEditor();
const isBold: Writable<boolean> = getContext('isBold');
const isItalic: Writable<boolean> = getContext('isItalic');
const isUnderline: Writable<boolean> = getContext('isUnderline');
const isStrikethrough: Writable<boolean> = getContext('isStrikethrough');
const isCode: Writable<boolean> = getContext('isCode');
const isLink: Writable<boolean> = getContext('isLink');

const blockMap = {
h1: () => createHeadingNode('h1'),
h2: () => createHeadingNode('h2'),
h3: () => createHeadingNode('h3'),
paragraph: createParagraphNode,
quote: createQuoteNode
};

function formatBlock(type: keyof typeof blockMap) {
editor.update(() => {
const selection = getSelection();
setBlocksType(selection, () => blockMap[type]());
});
}

const blockType: Writable<keyof typeof blockMap> = getContext('blockType');
</script>

<div class="formatting-popup">
<div class="formatting__options" style:width="{optionsRefWidth}px">
<div class="formatting__options-wrap" class:scrolled={isScrollToSecondGroup}>
<div class="formatting__group" bind:clientWidth={optionsRefWidth}>
<Button kind="solid" size="tag" icon="text-bold" onclick={() => onClick('bold')} />
<Button kind="solid" size="tag" icon="text-italic" onclick={() => onClick('italic')} />
<Button
kind="solid"
size="tag"
icon="text-bold"
activated={$isBold}
onclick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')}
tooltip={'Bold'}
/>
<Button
kind="solid"
size="tag"
icon="text-italic"
activated={$isItalic}
onclick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic')}
tooltip={'Italic'}
/>
<Button
kind="solid"
size="tag"
icon="text-underline"
onclick={() => onClick('underline')}
activated={$isUnderline}
onclick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline')}
tooltip={'Underline'}
/>
<Button
kind="solid"
size="tag"
icon="text-strikethrough"
onclick={() => onClick('strikethrough')}
activated={$isStrikethrough}
onclick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough')}
tooltip={'Strikethrough'}
/>
<Button
kind="solid"
size="tag"
icon="text-code"
activated={$isCode}
onclick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code')}
tooltip={'Code'}
/>
<Button
kind="solid"
size="tag"
icon="text-quote"
activated={$blockType === 'quote'}
onclick={() => formatBlock('quote')}
tooltip={'Quote'}
/>
<Button
kind="solid"
size="tag"
icon="text-link"
activated={$isLink}
onclick={() => editor.dispatchCommand(TOGGLE_LINK_COMMAND, '')}
tooltip={'Link'}
/>
<Button kind="solid" size="tag" icon="text-code" onclick={() => onClick('code')} />
<Button kind="solid" size="tag" icon="text-quote" onclick={() => onClick('quote')} />
<Button kind="solid" size="tag" icon="text-link" onclick={() => onClick('link')} />
</div>
<div class="formatting__group">
<Button kind="solid" size="tag" icon="text" onclick={() => onClick('normal-text')} />
<Button kind="solid" size="tag" icon="text-h1" onclick={() => onClick('h1')} />
<Button kind="solid" size="tag" icon="text-h2" onclick={() => onClick('h2')} />
<Button kind="solid" size="tag" icon="text-h3" onclick={() => onClick('h3')} />
<Button kind="solid" size="tag" icon="bullet-list" onclick={() => onClick('bullet-list')} />
<Button kind="solid" size="tag" icon="number-list" onclick={() => onClick('number-list')} />
<Button kind="solid" size="tag" icon="checklist" onclick={() => onClick('checkbox-list')} />
<Button
kind="solid"
size="tag"
icon="text"
activated={$blockType === 'paragraph'}
onclick={() => formatBlock('paragraph')}
tooltip={'Normal text'}
/>
<Button
kind="solid"
size="tag"
icon="text-h1"
activated={$blockType === 'h1'}
onclick={() => formatBlock('h1')}
tooltip={'Heading 1'}
/>
<Button
kind="solid"
size="tag"
icon="text-h2"
activated={$blockType === 'h2'}
onclick={() => formatBlock('h2')}
tooltip={'Heading 2'}
/>
<Button
kind="solid"
size="tag"
icon="text-h3"
activated={$blockType === 'h3'}
onclick={() => formatBlock('h3')}
tooltip={'Heading 3'}
/>
<Button
kind="solid"
size="tag"
icon="bullet-list"
onclick={() => editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined)}
tooltip={'Unordered list'}
/>
<Button
kind="solid"
size="tag"
icon="number-list"
onclick={() => editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined)}
tooltip={'Ordered list'}
/>
<Button
kind="solid"
size="tag"
icon="checklist"
onclick={() => editor.dispatchCommand(INSERT_CHECK_LIST_COMMAND, undefined)}
tooltip={'Check list'}
/>
</div>
</div>
</div>
Expand Down
37 changes: 30 additions & 7 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading