mirror of
https://github.com/open-webui/open-webui.git
synced 2025-12-12 12:25:20 +00:00
feat: formatting buttons
This commit is contained in:
Timothy Jaeryang Baek
parent
9a3a0070d6
commit
c2ac797650
17 changed files with 468 additions and 1 deletions
50
package-lock.json
generated
50
package-lock.json
generated
|
|
@ -19,7 +19,9 @@
|
|||
"@sveltejs/adapter-node": "^2.0.0",
|
||||
"@sveltejs/svelte-virtual-list": "^3.0.1",
|
||||
"@tiptap/core": "^2.11.9",
|
||||
"@tiptap/extension-bubble-menu": "^2.25.0",
|
||||
"@tiptap/extension-code-block-lowlight": "^2.11.9",
|
||||
"@tiptap/extension-floating-menu": "^2.25.0",
|
||||
"@tiptap/extension-highlight": "^2.10.0",
|
||||
"@tiptap/extension-placeholder": "^2.10.0",
|
||||
"@tiptap/extension-table": "^2.12.0",
|
||||
|
|
@ -29,6 +31,7 @@
|
|||
"@tiptap/extension-task-item": "^2.25.0",
|
||||
"@tiptap/extension-task-list": "^2.25.0",
|
||||
"@tiptap/extension-typography": "^2.10.0",
|
||||
"@tiptap/extension-underline": "^2.25.0",
|
||||
"@tiptap/pm": "^2.11.7",
|
||||
"@tiptap/starter-kit": "^2.10.0",
|
||||
"@xyflow/svelte": "^0.1.19",
|
||||
|
|
@ -2952,6 +2955,23 @@
|
|||
"@tiptap/core": "^2.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@tiptap/extension-bubble-menu": {
|
||||
"version": "2.25.0",
|
||||
"resolved": "https://registry.npmjs.org/@tiptap/extension-bubble-menu/-/extension-bubble-menu-2.25.0.tgz",
|
||||
"integrity": "sha512-BnbfQWRXJDDy9/x/0Atu2Nka5ZAMyXLDFqzSLMAXqXSQcG6CZRTSNRgOCnjpda6Hq2yCtq7l/YEoXkbHT1ZZdQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"tippy.js": "^6.3.7"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/ueberdosis"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tiptap/core": "^2.7.0",
|
||||
"@tiptap/pm": "^2.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@tiptap/extension-bullet-list": {
|
||||
"version": "2.10.0",
|
||||
"resolved": "https://registry.npmjs.org/@tiptap/extension-bullet-list/-/extension-bullet-list-2.10.0.tgz",
|
||||
|
|
@ -3036,6 +3056,23 @@
|
|||
"@tiptap/pm": "^2.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@tiptap/extension-floating-menu": {
|
||||
"version": "2.25.0",
|
||||
"resolved": "https://registry.npmjs.org/@tiptap/extension-floating-menu/-/extension-floating-menu-2.25.0.tgz",
|
||||
"integrity": "sha512-hPZ5SNpI14smTz4GpWQXTnxmeICINYiABSgXcsU5V66tik9OtxKwoCSR/gpU35esaAFUVRdjW7+sGkACLZD5AQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"tippy.js": "^6.3.7"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/ueberdosis"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tiptap/core": "^2.7.0",
|
||||
"@tiptap/pm": "^2.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@tiptap/extension-gapcursor": {
|
||||
"version": "2.10.0",
|
||||
"resolved": "https://registry.npmjs.org/@tiptap/extension-gapcursor/-/extension-gapcursor-2.10.0.tgz",
|
||||
|
|
@ -3315,6 +3352,19 @@
|
|||
"@tiptap/core": "^2.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@tiptap/extension-underline": {
|
||||
"version": "2.25.0",
|
||||
"resolved": "https://registry.npmjs.org/@tiptap/extension-underline/-/extension-underline-2.25.0.tgz",
|
||||
"integrity": "sha512-RqXkWSMJyllfsDukugDzWEZfWRUOgcqzuMWC40BnuDUs4KgdRA0nhVUWJbLfUEmXI0UVqN5OwYTTAdhaiF7kjQ==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/ueberdosis"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tiptap/core": "^2.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@tiptap/pm": {
|
||||
"version": "2.11.7",
|
||||
"resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-2.11.7.tgz",
|
||||
|
|
|
|||
|
|
@ -63,7 +63,9 @@
|
|||
"@sveltejs/adapter-node": "^2.0.0",
|
||||
"@sveltejs/svelte-virtual-list": "^3.0.1",
|
||||
"@tiptap/core": "^2.11.9",
|
||||
"@tiptap/extension-bubble-menu": "^2.25.0",
|
||||
"@tiptap/extension-code-block-lowlight": "^2.11.9",
|
||||
"@tiptap/extension-floating-menu": "^2.25.0",
|
||||
"@tiptap/extension-highlight": "^2.10.0",
|
||||
"@tiptap/extension-placeholder": "^2.10.0",
|
||||
"@tiptap/extension-table": "^2.12.0",
|
||||
|
|
@ -73,6 +75,7 @@
|
|||
"@tiptap/extension-task-item": "^2.25.0",
|
||||
"@tiptap/extension-task-list": "^2.25.0",
|
||||
"@tiptap/extension-typography": "^2.10.0",
|
||||
"@tiptap/extension-underline": "^2.25.0",
|
||||
"@tiptap/pm": "^2.11.7",
|
||||
"@tiptap/starter-kit": "^2.10.0",
|
||||
"@xyflow/svelte": "^0.1.19",
|
||||
|
|
|
|||
|
|
@ -488,3 +488,7 @@ input[type='number'] {
|
|||
.tiptap tr {
|
||||
@apply bg-white dark:bg-gray-900 dark:border-gray-850 text-xs;
|
||||
}
|
||||
|
||||
.tippy-box[data-theme~='transparent'] {
|
||||
@apply bg-transparent p-0 m-0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1058,6 +1058,7 @@
|
|||
}}
|
||||
json={true}
|
||||
messageInput={true}
|
||||
showFormattingButtons={false}
|
||||
insertPromptAsRichText={$settings?.insertPromptAsRichText ?? false}
|
||||
shiftEnter={!($settings?.ctrlEnterToSend ?? false) &&
|
||||
(!$mobile ||
|
||||
|
|
|
|||
|
|
@ -23,9 +23,10 @@
|
|||
}
|
||||
});
|
||||
|
||||
import { onMount, onDestroy, tick } from 'svelte';
|
||||
import { onMount, onDestroy, tick, getContext } from 'svelte';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
const eventDispatch = createEventDispatcher();
|
||||
|
||||
import { Fragment, DOMParser } from 'prosemirror-model';
|
||||
|
|
@ -39,6 +40,7 @@
|
|||
import TableHeader from '@tiptap/extension-table-header';
|
||||
import TableCell from '@tiptap/extension-table-cell';
|
||||
|
||||
import Underline from '@tiptap/extension-underline';
|
||||
import TaskItem from '@tiptap/extension-task-item';
|
||||
import TaskList from '@tiptap/extension-task-list';
|
||||
|
||||
|
|
@ -47,10 +49,16 @@
|
|||
import StarterKit from '@tiptap/starter-kit';
|
||||
import Highlight from '@tiptap/extension-highlight';
|
||||
import Typography from '@tiptap/extension-typography';
|
||||
|
||||
import BubbleMenu from '@tiptap/extension-bubble-menu';
|
||||
import FloatingMenu from '@tiptap/extension-floating-menu';
|
||||
|
||||
import { all, createLowlight } from 'lowlight';
|
||||
|
||||
import { PASTED_TEXT_CHARACTER_LIMIT } from '$lib/constants';
|
||||
|
||||
import FormattingButtons from './RichTextInput/FormattingButtons.svelte';
|
||||
|
||||
export let oncompositionstart = (e) => {};
|
||||
export let oncompositionend = (e) => {};
|
||||
export let onChange = (e) => {};
|
||||
|
|
@ -69,6 +77,8 @@
|
|||
export let raw = false;
|
||||
export let editable = true;
|
||||
|
||||
export let showFormattingButtons = true;
|
||||
|
||||
export let preserveBreaks = false;
|
||||
export let generateAutoCompletion: Function = async () => null;
|
||||
export let autocomplete = false;
|
||||
|
|
@ -77,6 +87,8 @@
|
|||
export let largeTextAsFile = false;
|
||||
export let insertPromptAsRichText = false;
|
||||
|
||||
let floatingMenuElement = null;
|
||||
let bubbleMenuElement = null;
|
||||
let element;
|
||||
let editor;
|
||||
|
||||
|
|
@ -447,6 +459,7 @@
|
|||
}),
|
||||
Highlight,
|
||||
Typography,
|
||||
Underline,
|
||||
Placeholder.configure({ placeholder }),
|
||||
Table.configure({ resizable: true }),
|
||||
TableRow,
|
||||
|
|
@ -473,6 +486,31 @@
|
|||
}
|
||||
})
|
||||
]
|
||||
: []),
|
||||
|
||||
...(showFormattingButtons
|
||||
? [
|
||||
BubbleMenu.configure({
|
||||
element: bubbleMenuElement,
|
||||
tippyOptions: {
|
||||
duration: 100,
|
||||
arrow: false,
|
||||
placement: 'top',
|
||||
theme: 'transparent',
|
||||
offset: [0, 2]
|
||||
}
|
||||
}),
|
||||
FloatingMenu.configure({
|
||||
element: floatingMenuElement,
|
||||
tippyOptions: {
|
||||
duration: 100,
|
||||
arrow: false,
|
||||
placement: 'top-start',
|
||||
theme: 'transparent',
|
||||
offset: [-10, 2]
|
||||
}
|
||||
})
|
||||
]
|
||||
: [])
|
||||
],
|
||||
content: content,
|
||||
|
|
@ -738,4 +776,14 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
{#if showFormattingButtons}
|
||||
<div bind:this={bubbleMenuElement} class="p-0">
|
||||
<FormattingButtons {editor} />
|
||||
</div>
|
||||
|
||||
<div bind:this={floatingMenuElement} class="p-0">
|
||||
<FormattingButtons {editor} />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div bind:this={element} class="relative w-full min-w-full h-full min-h-fit {className}" />
|
||||
|
|
|
|||
153
src/lib/components/common/RichTextInput/FormattingButtons.svelte
Normal file
153
src/lib/components/common/RichTextInput/FormattingButtons.svelte
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
<script>
|
||||
import { getContext } from 'svelte';
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
export let editor = null;
|
||||
|
||||
import Bold from '$lib/components/icons/Bold.svelte';
|
||||
import CodeBracket from '$lib/components/icons/CodeBracket.svelte';
|
||||
import H1 from '$lib/components/icons/H1.svelte';
|
||||
import H2 from '$lib/components/icons/H2.svelte';
|
||||
import H3 from '$lib/components/icons/H3.svelte';
|
||||
import Italic from '$lib/components/icons/Italic.svelte';
|
||||
import ListBullet from '$lib/components/icons/ListBullet.svelte';
|
||||
import NumberedList from '$lib/components/icons/NumberedList.svelte';
|
||||
import QueueList from '$lib/components/icons/QueueList.svelte';
|
||||
import Strikethrough from '$lib/components/icons/Strikethrough.svelte';
|
||||
import Underline from '$lib/components/icons/Underline.svelte';
|
||||
import Tooltip from '../Tooltip.svelte';
|
||||
</script>
|
||||
|
||||
<div class="flex gap-0.5 p-0.5 rounded-lg shadow-lg dark:bg-gray-800 min-w-fit">
|
||||
<Tooltip placement="top" content={$i18n.t('H1')}>
|
||||
<button
|
||||
on:click={() => editor?.chain().focus().toggleHeading({ level: 1 }).run()}
|
||||
class="{editor?.isActive('heading', { level: 1 })
|
||||
? 'bg-gray-50 dark:bg-gray-700'
|
||||
: ''} hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg p-1.5 transition-all"
|
||||
type="button"
|
||||
>
|
||||
<H1 />
|
||||
</button>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip placement="top" content={$i18n.t('H2')}>
|
||||
<button
|
||||
on:click={() => editor?.chain().focus().toggleHeading({ level: 2 }).run()}
|
||||
class="{editor?.isActive('heading', { level: 2 })
|
||||
? 'bg-gray-50 dark:bg-gray-700'
|
||||
: ''} hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg p-1.5 transition-all"
|
||||
type="button"
|
||||
>
|
||||
<H2 />
|
||||
</button>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip placement="top" content={$i18n.t('H3')}>
|
||||
<button
|
||||
on:click={() => editor?.chain().focus().toggleHeading({ level: 3 }).run()}
|
||||
class="{editor?.isActive('heading', { level: 3 })
|
||||
? 'bg-gray-50 dark:bg-gray-700'
|
||||
: ''} hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg p-1.5 transition-all"
|
||||
type="button"
|
||||
>
|
||||
<H3 />
|
||||
</button>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip placement="top" content={$i18n.t('Bullet List')}>
|
||||
<button
|
||||
on:click={() => editor?.chain().focus().toggleBulletList().run()}
|
||||
class="{editor?.isActive('bulletList')
|
||||
? 'bg-gray-50 dark:bg-gray-700'
|
||||
: ''} hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg p-1.5 transition-all"
|
||||
type="button"
|
||||
>
|
||||
<ListBullet />
|
||||
</button>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip placement="top" content={$i18n.t('Ordered List')}>
|
||||
<button
|
||||
on:click={() => editor?.chain().focus().toggleOrderedList().run()}
|
||||
class="{editor?.isActive('orderedList')
|
||||
? 'bg-gray-50 dark:bg-gray-700'
|
||||
: ''} hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg p-1.5 transition-all"
|
||||
type="button"
|
||||
>
|
||||
<NumberedList />
|
||||
</button>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip placement="top" content={$i18n.t('Task List')}>
|
||||
<button
|
||||
on:click={() => editor?.chain().focus().toggleTaskList().run()}
|
||||
class="{editor?.isActive('taskList')
|
||||
? 'bg-gray-50 dark:bg-gray-700'
|
||||
: ''} hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg p-1.5 transition-all"
|
||||
type="button"
|
||||
>
|
||||
<QueueList />
|
||||
</button>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip placement="top" content={$i18n.t('Bold')}>
|
||||
<button
|
||||
on:click={() => editor?.chain().focus().toggleBold().run()}
|
||||
class="{editor?.isActive('bold')
|
||||
? 'bg-gray-50 dark:bg-gray-700'
|
||||
: ''} hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg p-1.5 transition-all"
|
||||
type="button"
|
||||
>
|
||||
<Bold />
|
||||
</button>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip placement="top" content={$i18n.t('Italic')}>
|
||||
<button
|
||||
on:click={() => editor?.chain().focus().toggleItalic().run()}
|
||||
class="{editor?.isActive('italic')
|
||||
? 'bg-gray-50 dark:bg-gray-700'
|
||||
: ''} hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg p-1.5 transition-all"
|
||||
type="button"
|
||||
>
|
||||
<Italic />
|
||||
</button>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip placement="top" content={$i18n.t('Underline')}>
|
||||
<button
|
||||
on:click={() => editor?.chain().focus().toggleUnderline().run()}
|
||||
class="{editor?.isActive('underline')
|
||||
? 'bg-gray-50 dark:bg-gray-700'
|
||||
: ''} hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg p-1.5 transition-all"
|
||||
type="button"
|
||||
>
|
||||
<Underline />
|
||||
</button>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip placement="top" content={$i18n.t('Strikethrough')}>
|
||||
<button
|
||||
on:click={() => editor?.chain().focus().toggleStrike().run()}
|
||||
class="{editor?.isActive('strike')
|
||||
? 'bg-gray-50 dark:bg-gray-700'
|
||||
: ''} hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg p-1.5 transition-all"
|
||||
type="button"
|
||||
>
|
||||
<Strikethrough />
|
||||
</button>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip placement="top" content={$i18n.t('Code Block')}>
|
||||
<button
|
||||
on:click={() => editor?.chain().focus().toggleCodeBlock().run()}
|
||||
class="{editor?.isActive('codeBlock')
|
||||
? 'bg-gray-50 dark:bg-gray-700'
|
||||
: ''} hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg p-1.5 transition-all"
|
||||
type="button"
|
||||
>
|
||||
<CodeBracket />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
18
src/lib/components/icons/Bold.svelte
Normal file
18
src/lib/components/icons/Bold.svelte
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<script lang="ts">
|
||||
export let className = 'size-4';
|
||||
export let strokeWidth = '1.5';
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width={strokeWidth}
|
||||
stroke="currentColor"
|
||||
class={className}
|
||||
>
|
||||
<path
|
||||
stroke-linejoin="round"
|
||||
d="M6.75 3.744h-.753v8.25h7.125a4.125 4.125 0 0 0 0-8.25H6.75Zm0 0v.38m0 16.122h6.747a4.5 4.5 0 0 0 0-9.001h-7.5v9h.753Zm0 0v-.37m0-15.751h6a3.75 3.75 0 1 1 0 7.5h-6m0-7.5v7.5m0 0v8.25m0-8.25h6.375a4.125 4.125 0 0 1 0 8.25H6.75m.747-15.38h4.875a3.375 3.375 0 0 1 0 6.75H7.497v-6.75Zm0 7.5h5.25a3.75 3.75 0 0 1 0 7.5h-5.25v-7.5Z"
|
||||
/>
|
||||
</svg>
|
||||
19
src/lib/components/icons/CodeBracket.svelte
Normal file
19
src/lib/components/icons/CodeBracket.svelte
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<script lang="ts">
|
||||
export let className = 'size-4';
|
||||
export let strokeWidth = '1.5';
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width={strokeWidth}
|
||||
stroke="currentColor"
|
||||
class={className}
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5"
|
||||
/>
|
||||
</svg>
|
||||
19
src/lib/components/icons/H1.svelte
Normal file
19
src/lib/components/icons/H1.svelte
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<script lang="ts">
|
||||
export let className = 'size-4';
|
||||
export let strokeWidth = '1.5';
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width={strokeWidth}
|
||||
stroke="currentColor"
|
||||
class={className}
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M2.243 4.493v7.5m0 0v7.502m0-7.501h10.5m0-7.5v7.5m0 0v7.501m4.501-8.627 2.25-1.5v10.126m0 0h-2.25m2.25 0h2.25"
|
||||
/>
|
||||
</svg>
|
||||
19
src/lib/components/icons/H2.svelte
Normal file
19
src/lib/components/icons/H2.svelte
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<script lang="ts">
|
||||
export let className = 'size-4';
|
||||
export let strokeWidth = '1.5';
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width={strokeWidth}
|
||||
stroke="currentColor"
|
||||
class={className}
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M21.75 19.5H16.5v-1.609a2.25 2.25 0 0 1 1.244-2.012l2.89-1.445c.651-.326 1.116-.955 1.116-1.683 0-.498-.04-.987-.118-1.463-.135-.825-.835-1.422-1.668-1.489a15.202 15.202 0 0 0-3.464.12M2.243 4.492v7.5m0 0v7.502m0-7.501h10.5m0-7.5v7.5m0 0v7.501"
|
||||
/>
|
||||
</svg>
|
||||
19
src/lib/components/icons/H3.svelte
Normal file
19
src/lib/components/icons/H3.svelte
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<script lang="ts">
|
||||
export let className = 'size-4';
|
||||
export let strokeWidth = '1.5';
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width={strokeWidth}
|
||||
stroke="currentColor"
|
||||
class={className}
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M20.905 14.626a4.52 4.52 0 0 1 .738 3.603c-.154.695-.794 1.143-1.504 1.208a15.194 15.194 0 0 1-3.639-.104m4.405-4.707a4.52 4.52 0 0 0 .738-3.603c-.154-.696-.794-1.144-1.504-1.209a15.19 15.19 0 0 0-3.639.104m4.405 4.708H18M2.243 4.493v7.5m0 0v7.502m0-7.501h10.5m0-7.5v7.5m0 0v7.501"
|
||||
/>
|
||||
</svg>
|
||||
19
src/lib/components/icons/Italic.svelte
Normal file
19
src/lib/components/icons/Italic.svelte
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<script lang="ts">
|
||||
export let className = 'size-4';
|
||||
export let strokeWidth = '1.5';
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width={strokeWidth}
|
||||
stroke="currentColor"
|
||||
class={className}
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M5.248 20.246H9.05m0 0h3.696m-3.696 0 5.893-16.502m0 0h-3.697m3.697 0h3.803"
|
||||
/>
|
||||
</svg>
|
||||
19
src/lib/components/icons/ListBullet.svelte
Normal file
19
src/lib/components/icons/ListBullet.svelte
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<script lang="ts">
|
||||
export let className = 'size-4';
|
||||
export let strokeWidth = '1.5';
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width={strokeWidth}
|
||||
stroke="currentColor"
|
||||
class={className}
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
|
||||
/>
|
||||
</svg>
|
||||
19
src/lib/components/icons/NumberedList.svelte
Normal file
19
src/lib/components/icons/NumberedList.svelte
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<script lang="ts">
|
||||
export let className = 'size-4';
|
||||
export let strokeWidth = '1.5';
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width={strokeWidth}
|
||||
stroke="currentColor"
|
||||
class={className}
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M8.242 5.992h12m-12 6.003H20.24m-12 5.999h12M4.117 7.495v-3.75H2.99m1.125 3.75H2.99m1.125 0H5.24m-1.92 2.577a1.125 1.125 0 1 1 1.591 1.59l-1.83 1.83h2.16M2.99 15.745h1.125a1.125 1.125 0 0 1 0 2.25H3.74m0-.002h.375a1.125 1.125 0 0 1 0 2.25H2.99"
|
||||
/>
|
||||
</svg>
|
||||
19
src/lib/components/icons/QueueList.svelte
Normal file
19
src/lib/components/icons/QueueList.svelte
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<script lang="ts">
|
||||
export let className = 'size-4';
|
||||
export let strokeWidth = '1.5';
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width={strokeWidth}
|
||||
stroke="currentColor"
|
||||
class={className}
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 0 1 0 3.75H5.625a1.875 1.875 0 0 1 0-3.75Z"
|
||||
/>
|
||||
</svg>
|
||||
19
src/lib/components/icons/Strikethrough.svelte
Normal file
19
src/lib/components/icons/Strikethrough.svelte
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<script lang="ts">
|
||||
export let className = 'size-4';
|
||||
export let strokeWidth = '1.5';
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width={strokeWidth}
|
||||
stroke="currentColor"
|
||||
class={className}
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M12 12a8.912 8.912 0 0 1-.318-.079c-1.585-.424-2.904-1.247-3.76-2.236-.873-1.009-1.265-2.19-.968-3.301.59-2.2 3.663-3.29 6.863-2.432A8.186 8.186 0 0 1 16.5 5.21M6.42 17.81c.857.99 2.176 1.812 3.761 2.237 3.2.858 6.274-.23 6.863-2.431.233-.868.044-1.779-.465-2.617M3.75 12h16.5"
|
||||
/>
|
||||
</svg>
|
||||
19
src/lib/components/icons/Underline.svelte
Normal file
19
src/lib/components/icons/Underline.svelte
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<script lang="ts">
|
||||
export let className = 'size-4';
|
||||
export let strokeWidth = '1.5';
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width={strokeWidth}
|
||||
stroke="currentColor"
|
||||
class={className}
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M17.995 3.744v7.5a6 6 0 1 1-12 0v-7.5m-2.25 16.502h16.5"
|
||||
/>
|
||||
</svg>
|
||||
Loading…
Reference in a new issue