diff --git a/packages/text-editor/src/components/CollaboratorEditor.svelte b/packages/text-editor/src/components/CollaboratorEditor.svelte
index 544bdea154..48cb02e443 100644
--- a/packages/text-editor/src/components/CollaboratorEditor.svelte
+++ b/packages/text-editor/src/components/CollaboratorEditor.svelte
@@ -54,6 +54,13 @@
import Quote from './icons/Quote.svelte'
import Strikethrough from './icons/Strikethrough.svelte'
import LinkPopup from './LinkPopup.svelte'
+ import AddRowBefore from './icons/table/AddRowBefore.svelte'
+ import AddRowAfter from './icons/table/AddRowAfter.svelte'
+ import AddColBefore from './icons/table/AddColBefore.svelte'
+ import AddColAfter from './icons/table/AddColAfter.svelte'
+ import DeleteRow from './icons/table/DeleteRow.svelte'
+ import DeleteCol from './icons/table/DeleteCol.svelte'
+ import DeleteTable from './icons/table/DeleteTable.svelte'
export let documentId: string
export let readonly = false
@@ -408,6 +415,7 @@
const ops = [
{
id: '#addColumnBefore',
+ icon: AddColBefore,
label: textEditorPlugin.string.AddColumnBefore,
action: () => editor.commands.addColumnBefore(),
category: {
@@ -416,6 +424,7 @@
},
{
id: '#addColumnAfter',
+ icon: AddColAfter,
label: textEditorPlugin.string.AddColumnAfter,
action: () => editor.commands.addColumnAfter(),
category: {
@@ -425,6 +434,7 @@
{
id: '#deleteColumn',
+ icon: DeleteCol,
label: textEditorPlugin.string.DeleteColumn,
action: () => editor.commands.deleteColumn(),
category: {
@@ -433,6 +443,7 @@
},
{
id: '#addRowBefore',
+ icon: AddRowBefore,
label: textEditorPlugin.string.AddRowBefore,
action: () => editor.commands.addRowBefore(),
category: {
@@ -441,6 +452,7 @@
},
{
id: '#addRowAfter',
+ icon: AddRowAfter,
label: textEditorPlugin.string.AddRowAfter,
action: () => editor.commands.addRowAfter(),
category: {
@@ -449,6 +461,7 @@
},
{
id: '#deleteRow',
+ icon: DeleteRow,
label: textEditorPlugin.string.DeleteRow,
action: () => editor.commands.deleteRow(),
category: {
@@ -457,6 +470,7 @@
},
{
id: '#deleteTable',
+ icon: DeleteTable,
label: textEditorPlugin.string.DeleteTable,
action: () => editor.commands.deleteTable(),
category: {
@@ -589,7 +603,7 @@
{#if activeModes.has('table')}
<StyleButton
icon={IconTable}
- iconProps={{ style: 'grid' }}
+ iconProps={{ style: 'tableProps' }}
size={buttonSize}
on:click={tableOptions}
showTooltip={{ label: textEditorPlugin.string.TableOptions }}
diff --git a/packages/text-editor/src/components/StyleButton.svelte b/packages/text-editor/src/components/StyleButton.svelte
index d30bcb7866..7dfc3c42b9 100644
--- a/packages/text-editor/src/components/StyleButton.svelte
+++ b/packages/text-editor/src/components/StyleButton.svelte
@@ -32,53 +32,43 @@
tabindex="0"
on:click|preventDefault|stopPropagation
>
- <div class="icon {size} flex">
- <Icon {icon} {size} {iconProps} />
- </div>
+ <Icon {icon} {size} {iconProps} />
</button>
<style lang="scss">
.button {
- color: inherit;
- border-radius: 0.125rem;
- cursor: pointer;
+ display: flex;
+ justify-content: center;
+ align-items: center;
padding: 0.75rem;
+ color: var(--dark-color);
+ border-radius: 0.25rem;
+ cursor: pointer;
- .icon {
- color: var(--dark-color);
- }
- &:hover .icon {
+ &:hover {
color: var(--accent-color);
- opacity: 1;
}
&:focus {
+ color: var(--theme-caption-color);
border: 1px solid var(--primary-button-focused-border);
box-shadow: 0 0 0 3px var(--primary-button-outline);
- .icon {
- color: var(--theme-caption-color);
- opacity: 1;
- }
}
&.selected {
- background-color: var(--button-bg-hover);
- border-color: var(--button-border-hover);
- color: var(--caption-color);
-
- .btn-icon {
- color: var(--accent-color);
- }
+ background-color: var(--button-bg-color);
+ border-color: var(--button-border-color);
+ color: var(--accent-color);
+ }
+ &.small {
+ width: 1.143em;
+ height: 1.143em;
+ }
+ &.medium {
+ width: 1.429em;
+ height: 1.429em;
+ }
+ &.large {
+ width: 1.715em;
+ height: 1.715em;
}
}
- .small {
- width: 1.143em;
- height: 1.143em;
- }
- .medium {
- width: 1.429em;
- height: 1.429em;
- }
- .large {
- width: 1.715em;
- height: 1.715em;
- }
</style>
diff --git a/packages/text-editor/src/components/StyledTextArea.svelte b/packages/text-editor/src/components/StyledTextArea.svelte
index 185699d84e..d166a68e0a 100644
--- a/packages/text-editor/src/components/StyledTextArea.svelte
+++ b/packages/text-editor/src/components/StyledTextArea.svelte
@@ -12,6 +12,8 @@
export let showButtons = true
export let buttonSize: IconSize = 'small'
export let focus = false
+ export let isScrollable: boolean = false
+ export let maxHeight: 'max' | 'card' | 'limited' | string | undefined = undefined
let rawValue: string
let oldContent = ''
@@ -38,7 +40,7 @@
</script>
<div
- class="antiComponent styled-box"
+ class="antiComponent styled-box clear-mins"
on:click={() => {
if (focused) {
textEditor?.focus()
@@ -52,7 +54,8 @@
{placeholder}
{showButtons}
{buttonSize}
- isScrollable={false}
+ {maxHeight}
+ {isScrollable}
bind:content={rawValue}
bind:this={textEditor}
on:focus={() => {
@@ -65,6 +68,7 @@
}}
on:value={(evt) => {
rawValue = evt.detail
+ dispatch('changeContent')
}}
/>
</div>
diff --git a/packages/text-editor/src/components/StyledTextBox.svelte b/packages/text-editor/src/components/StyledTextBox.svelte
index b3145f329c..0bae0af7ed 100644
--- a/packages/text-editor/src/components/StyledTextBox.svelte
+++ b/packages/text-editor/src/components/StyledTextBox.svelte
@@ -15,7 +15,7 @@
export let showButtons: boolean = true
export let buttonSize: IconSize = 'small'
export let hideExtraButtons: boolean = false
- export let maxHeight: 'max' | 'card' | string = 'max'
+ export let maxHeight: 'max' | 'card' | 'limited' | string = 'max'
export let previewLimit: number = 240
export let previewUnlimit: boolean = false
export let focusable: boolean = false
@@ -70,7 +70,7 @@
</script>
<div
- class="antiComponent styled-box"
+ class="antiComponent styled-box clear-mins"
class:emphasized
class:emphasized-focus={(mode === Mode.Edit || alwaysEdit) && focused}
on:click={() => {
@@ -103,6 +103,7 @@
}}
on:value={(evt) => {
rawValue = evt.detail
+ dispatch('changeContent')
}}
>
{#if !alwaysEdit && !hideExtraButtons}
diff --git a/packages/text-editor/src/components/StyledTextEditor.svelte b/packages/text-editor/src/components/StyledTextEditor.svelte
index a780bb27df..bd2ca7338c 100644
--- a/packages/text-editor/src/components/StyledTextEditor.svelte
+++ b/packages/text-editor/src/components/StyledTextEditor.svelte
@@ -46,7 +46,7 @@
export let buttonSize: IconSize = 'large'
export let isScrollable: boolean = true
export let focusable: boolean = false
- export let maxHeight: 'max' | 'card' | string = 'max'
+ export let maxHeight: 'max' | 'card' | 'limited' | string | undefined = undefined
export let withoutTopBorder = false
let textEditor: TextEditor
@@ -58,7 +58,14 @@
textEditor.focus()
}
- $: varsStyle = maxHeight === 'card' ? 'calc(70vh - 12.5rem)' : maxHeight === 'max' ? 'max-content' : maxHeight
+ $: varsStyle =
+ maxHeight === 'card'
+ ? 'calc(70vh - 12.5rem)'
+ : maxHeight === 'limited'
+ ? '12.5rem'
+ : maxHeight === 'max'
+ ? 'max-content'
+ : maxHeight
let isFormatting = false
let activeModes = new Set<FormatMode>()
@@ -140,7 +147,7 @@
}
</script>
-<div class="ref-container">
+<div class="ref-container clear-mins">
{#if isFormatting}
<div class="formatPanel buttons-group xsmall-gap mb-4" class:withoutTopBorder>
<StyleButton
@@ -281,12 +288,13 @@
.inputMsg {
align-self: stretch;
width: 100%;
+ min-height: 0;
color: var(--content-color);
background-color: transparent;
:global(.ProseMirror) {
min-height: 0;
- max-height: 100%;
+ // max-height: 100%;
height: 100%;
}
diff --git a/packages/text-editor/src/components/extensions.ts b/packages/text-editor/src/components/extensions.ts
index c568dea124..2e3172da47 100644
--- a/packages/text-editor/src/components/extensions.ts
+++ b/packages/text-editor/src/components/extensions.ts
@@ -19,14 +19,10 @@ export const tableExtensions = [
Table.configure({
resizable: false,
HTMLAttributes: {
- class: 'antiTable editable '
- }
- }),
- TableRow.configure({
- HTMLAttributes: {
- class: 'antiTable-body__row'
+ class: 'proseTable'
}
}),
+ TableRow.configure({}),
TableHeader.configure({}),
TableCell.configure({})
]
diff --git a/packages/text-editor/src/components/icons/IconTable.svelte b/packages/text-editor/src/components/icons/IconTable.svelte
index 03d83b6ce0..c1465d2353 100644
--- a/packages/text-editor/src/components/icons/IconTable.svelte
+++ b/packages/text-editor/src/components/icons/IconTable.svelte
@@ -1,25 +1,36 @@
<script lang="ts">
export let size: 'small' | 'medium' | 'large'
- export let style: 'table' | 'grid' = 'table'
+ export let style: 'table' | 'grid' | 'tableProps' = 'table'
const fill: string = 'currentColor'
</script>
{#if style === 'table'}
<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
+ d="M19.5,2.2h-15c-1.2,0-2.2,1-2.2,2.2v2v3v10c0,1.2,1,2.2,2.2,2.2h10h3h2c1.2,0,2.2-1,2.2-2.2V10V7V4.5C21.8,3.3,20.7,2.2,19.5,2.2z M3.8,4.5c0-0.4,0.3-0.8,0.8-0.8h15c0.4,0,0.8,0.3,0.8,0.8V7v0.2H3.8V6.5V4.5z M9.5,20.2V8.8h5v11.5H9.5z M3.8,19.5v-10V8.8H8v11.5H4.5C4.1,20.2,3.8,19.9,3.8,19.5z M20.2,19.5c0,0.4-0.3,0.8-0.8,0.8h-2H16V8.8h4.2V10V19.5z"
fill-rule="evenodd"
clip-rule="evenodd"
- d="M2 8C2 6.34315 3.34315 5 5 5H19C20.6569 5 22 6.34315 22 8V16C22 17.6569 20.6569 19 19 19H5C3.34315 19 2 17.6569 2 16V8ZM5 7H19C19.5523 7 20 7.44771 20 8V11H4V8C4 7.44772 4.44772 7 5 7ZM4 13V16C4 16.5523 4.44772 17 5 17H8V13H4ZM10 17H19C19.5523 17 20 16.5523 20 16V13H10V17Z"
- fill="currentColor"
/>
</svg>
{:else if style === 'grid'}
- <svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
- ><path
+ <svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M20.5,1.8h-17c-1,0-1.8,0.8-1.8,1.8v17c0,1,0.8,1.8,1.8,1.8h17c1,0,1.8-0.8,1.8-1.8v-17C22.2,2.5,21.5,1.8,20.5,1.8z M9.2,14.2V9.8h5v4.5H9.2z M14.2,15.8v5h-5v-5H14.2z M3.2,9.8h4.5v4.5H3.2V9.8z M9.2,8.2v-5h5v5H9.2zM15.8,9.8h5v4.5h-5V9.8z M20.8,3.5v4.8h-5v-5h4.8C20.6,3.2,20.8,3.4,20.8,3.5z M3.5,3.2h4.2v5H3.2V3.5C3.2,3.4,3.4,3.2,3.5,3.2zM3.2,20.5v-4.8h4.5v5H3.5C3.4,20.8,3.2,20.6,3.2,20.5z M20.5,20.8h-4.8v-5h5v4.8C20.8,20.6,20.6,20.8,20.5,20.8z"
fill-rule="evenodd"
clip-rule="evenodd"
- d="M5 5C3.34315 5 2 6.34315 2 8V16C2 17.6569 3.34315 19 5 19H19C20.6569 19 22 17.6569 22 16V8C22 6.34315 20.6569 5 19 5H5ZM8 7H5C4.44772 7 4 7.44772 4 8V9H8V7ZM10 7V9H14V7H10ZM16 7V9H20V8C20 7.44771 19.5523 7 19 7H16ZM14 11H10V13H14V11ZM16 13V11H20V13H16ZM14 15H10V17H14V15ZM16 17V15H20V16C20 16.5523 19.5523 17 19 17H16ZM8 17V15H4V16C4 16.5523 4.44772 17 5 17H8ZM8 13V11H4V13H8Z"
- fill="currentColor"
- /></svg
- >
+ />
+ </svg>
+{:else if style === 'tableProps'}
+ <svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M19.2,11.2C19,11,18.8,11,18.6,11c-0.2,0-0.4,0.1-0.5,0.3l-5.2,7.2c-0.1,0.1-0.1,0.3-0.1,0.4v2c0,0.4,0.3,0.8,0.8,0.8h2c0.2,0,0.5-0.1,0.6-0.3l5.5-7.5c0.2-0.3,0.2-0.8-0.1-1L19.2,11.2z M15.1,20.2h-0.9v-1l4.7-6.4l1.1,0.8L15.1,20.2z"
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ />
+ <path
+ d="M19.5,2.2h-15c-1.2,0-2.2,1-2.2,2.2v2v3v10c0,1.2,1,2.2,2.2,2.2h7c0.4,0,0.8-0.3,0.8-0.8s-0.3-0.8-0.8-0.8h-2V8.8h5v4.1c0,0.4,0.3,0.8,0.8,0.8s0.8-0.3,0.8-0.8V8.8h4.2V10v0.9c0,0.4,0.3,0.8,0.8,0.8s0.8-0.3,0.8-0.8V10V7V4.5C21.8,3.3,20.7,2.2,19.5,2.2z M8,20.2H4.5c-0.4,0-0.8-0.3-0.8-0.8v-10V8.8H8V20.2z M3.8,7.2V6.5v-2c0-0.4,0.3-0.8,0.8-0.8h15c0.4,0,0.8,0.3,0.8,0.8V7v0.2H3.8z"
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ />
+ </svg>
{/if}
diff --git a/packages/text-editor/src/components/icons/table/AddColAfter.svelte b/packages/text-editor/src/components/icons/table/AddColAfter.svelte
new file mode 100644
index 0000000000..9772cb8daf
--- /dev/null
+++ b/packages/text-editor/src/components/icons/table/AddColAfter.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+ export let size: 'small' | 'medium' | 'large'
+ const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M9.3,20.5v-17c0-1-0.8-1.8-1.7-1.8H3.5c-1,0-1.8,0.8-1.8,1.8v17c0,1,0.8,1.8,1.8,1.8h4.1C8.5,22.2,9.3,21.4,9.3,20.5zM7.8,14.1H3.2v-5h4.6V14.1z M3.7,3.2h3.6c0.3,0,0.5,0.2,0.5,0.5v4H3.2v-4C3.2,3.4,3.4,3.2,3.7,3.2z M3.7,20.7c-0.3,0-0.5-0.2-0.5-0.5v-4.6h4.6v4.6c0,0.3-0.2,0.5-0.5,0.5H3.7z"
+ />
+ <path
+ d="M21.7,17.9h-2.2v-2.2c0-0.4-0.3-0.8-0.8-0.8s-0.8,0.3-0.8,0.8V18h-2.2c-0.4,0-0.8,0.3-0.8,0.8s0.3,0.8,0.8,0.8h2.2v2.1c0,0.4,0.3,0.8,0.8,0.8s0.8-0.3,0.8-0.8v-2.3h2.2c0.4,0,0.8-0.3,0.8-0.8S22.1,17.9,21.7,17.9z"
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ />
+ <path
+ d="M18.3,3.7l4,4c0.3,0.3,0.3,0.8,0,1.1l-4,4c-0.3,0.3-0.8,0.3-1.1,0c-0.3-0.3-0.3-0.8,0-1.1L19.9,9h-6.2C13.3,9,13,8.7,13,8.2c0-0.4,0.3-0.8,0.8-0.8h6.2l-2.7-2.7c-0.3-0.3-0.3-0.8,0-1.1S18,3.4,18.3,3.7z"
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ />
+</svg>
diff --git a/packages/text-editor/src/components/icons/table/AddColBefore.svelte b/packages/text-editor/src/components/icons/table/AddColBefore.svelte
new file mode 100644
index 0000000000..d91f8a1569
--- /dev/null
+++ b/packages/text-editor/src/components/icons/table/AddColBefore.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+ export let size: 'small' | 'medium' | 'large'
+ const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M9.3,20.5v-17c0-1-0.8-1.8-1.7-1.8H3.5c-1,0-1.8,0.8-1.8,1.8v17c0,1,0.8,1.8,1.8,1.8h4.1C8.5,22.2,9.3,21.4,9.3,20.5zM7.8,14.1H3.2v-5h4.6V14.1z M3.7,3.2h3.6c0.3,0,0.5,0.2,0.5,0.5v4H3.2v-4C3.2,3.4,3.4,3.2,3.7,3.2z M3.7,20.7c-0.3,0-0.5-0.2-0.5-0.5v-4.6h4.6v4.6c0,0.3-0.2,0.5-0.5,0.5H3.7z"
+ />
+ <path
+ d="M21.7,17.9h-2.2v-2.2c0-0.4-0.3-0.8-0.8-0.8s-0.8,0.3-0.8,0.8V18h-2.2c-0.4,0-0.8,0.3-0.8,0.8s0.3,0.8,0.8,0.8h2.2v2.1c0,0.4,0.3,0.8,0.8,0.8s0.8-0.3,0.8-0.8v-2.3h2.2c0.4,0,0.8-0.3,0.8-0.8S22.1,17.9,21.7,17.9z"
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ />
+ <path
+ d="M17.2,3.7l-4,4c-0.3,0.3-0.3,0.8,0,1.1l4,4c0.3,0.3,0.8,0.3,1.1,0c0.3-0.3,0.3-0.8,0-1.1L15.6,9h6.2c0.4,0,0.8-0.3,0.8-0.8c0-0.4-0.3-0.8-0.8-0.8h-6.2l2.7-2.7c0.3-0.3,0.3-0.8,0-1.1S17.5,3.4,17.2,3.7z"
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ />
+</svg>
diff --git a/packages/text-editor/src/components/icons/table/AddRowAfter.svelte b/packages/text-editor/src/components/icons/table/AddRowAfter.svelte
new file mode 100644
index 0000000000..6e49cc2bd2
--- /dev/null
+++ b/packages/text-editor/src/components/icons/table/AddRowAfter.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+ export let size: 'small' | 'medium' | 'large'
+ const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M22.3,7.5v-4c0-1-0.8-1.8-1.8-1.8h-17c-1,0-1.8,0.8-1.8,1.8v4.1c0,1,0.8,1.8,1.8,1.8h17.1C21.5,9.3,22.3,8.5,22.3,7.5z M9.2,7.8V3.2h5v4.6H9.2z M3.7,3.2h4v4.6h-4c-0.3,0-0.5-0.2-0.5-0.5V3.7C3.2,3.4,3.4,3.2,3.7,3.2zM20.8,7.3c0,0.3-0.2,0.5-0.5,0.5h-4.6V3.2h4.6c0.3,0,0.5,0.2,0.5,0.5V7.3z"
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ />
+ <path
+ d="M21.7,17.9h-2.2v-2.2c0-0.4-0.3-0.8-0.8-0.8s-0.8,0.3-0.8,0.8V18h-2.2c-0.4,0-0.8,0.3-0.8,0.8s0.3,0.8,0.8,0.8h2.2v2.1c0,0.4,0.3,0.8,0.8,0.8s0.8-0.3,0.8-0.8v-2.3h2.2c0.4,0,0.8-0.3,0.8-0.8S22.1,17.9,21.7,17.9z"
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ />
+ <path
+ d="M13,18.3l-4,4c-0.3,0.3-0.8,0.3-1.1,0l-4-4c-0.3-0.3-0.3-0.8,0-1.1c0.3-0.3,0.8-0.3,1.1,0l2.7,2.7v-6.2C7.7,13.3,8,13,8.4,13c0.4,0,0.8,0.3,0.8,0.8v6.2l2.7-2.7c0.3-0.3,0.8-0.3,1.1,0S13.3,18,13,18.3z"
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ />
+</svg>
diff --git a/packages/text-editor/src/components/icons/table/AddRowBefore.svelte b/packages/text-editor/src/components/icons/table/AddRowBefore.svelte
new file mode 100644
index 0000000000..06f6cf5b19
--- /dev/null
+++ b/packages/text-editor/src/components/icons/table/AddRowBefore.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+ export let size: 'small' | 'medium' | 'large'
+ const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M22.3,7.5v-4c0-1-0.8-1.8-1.8-1.8h-17c-1,0-1.8,0.8-1.8,1.8v4.1c0,1,0.8,1.8,1.8,1.8h17.1C21.5,9.3,22.3,8.5,22.3,7.5z M9.2,7.8V3.2h5v4.6H9.2z M3.7,3.2h4v4.6h-4c-0.3,0-0.5-0.2-0.5-0.5V3.7C3.2,3.4,3.4,3.2,3.7,3.2zM20.8,7.3c0,0.3-0.2,0.5-0.5,0.5h-4.6V3.2h4.6c0.3,0,0.5,0.2,0.5,0.5V7.3z"
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ />
+ <path
+ d="M21.7,17.9h-2.2v-2.2c0-0.4-0.3-0.8-0.8-0.8s-0.8,0.3-0.8,0.8V18h-2.2c-0.4,0-0.8,0.3-0.8,0.8s0.3,0.8,0.8,0.8h2.2v2.1c0,0.4,0.3,0.8,0.8,0.8s0.8-0.3,0.8-0.8v-2.3h2.2c0.4,0,0.8-0.3,0.8-0.8S22.1,17.9,21.7,17.9z"
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ />
+ <path
+ d="M13,17.2l-4-4c-0.3-0.3-0.8-0.3-1.1,0l-4,4c-0.3,0.3-0.3,0.8,0,1.1c0.3,0.3,0.8,0.3,1.1,0l2.7-2.7v6.2c0,0.4,0.3,0.8,0.8,0.8c0.4,0,0.8-0.3,0.8-0.8v-6.2l2.7,2.7c0.3,0.3,0.8,0.3,1.1,0S13.3,17.5,13,17.2z"
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ />
+</svg>
diff --git a/packages/text-editor/src/components/icons/table/DeleteCol.svelte b/packages/text-editor/src/components/icons/table/DeleteCol.svelte
new file mode 100644
index 0000000000..bbbce688c6
--- /dev/null
+++ b/packages/text-editor/src/components/icons/table/DeleteCol.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+ export let size: 'small' | 'medium' | 'large'
+ const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M9.3,20.5v-17c0-1-0.8-1.8-1.7-1.8H3.5c-1,0-1.8,0.8-1.8,1.8v17c0,1,0.8,1.8,1.8,1.8h4.1C8.5,22.2,9.3,21.4,9.3,20.5zM7.8,14.1H3.2v-5h4.6V14.1z M3.7,3.2h3.6c0.3,0,0.5,0.2,0.5,0.5v4H3.2v-4C3.2,3.4,3.4,3.2,3.7,3.2z M3.7,20.7c-0.3,0-0.5-0.2-0.5-0.5v-4.6h4.6v4.6c0,0.3-0.2,0.5-0.5,0.5H3.7z"
+ />
+ <path
+ d="M21.8,20.7l-2-2l1.9-1.9c0.3-0.3,0.3-0.8,0-1.1c-0.3-0.3-0.7-0.3-1.1,0l-1.9,1.9l-1.9-1.9c-0.3-0.3-0.8-0.3-1.1,0c-0.3,0.3-0.3,0.8,0,1.1l1.9,1.9l-2,2c-0.3,0.3-0.3,0.8,0,1.1s0.8,0.3,1.1,0l2-2l2,2c0.3,0.3,0.8,0.3,1.1,0S22.1,21,21.8,20.7z"
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ />
+</svg>
diff --git a/packages/text-editor/src/components/icons/table/DeleteRow.svelte b/packages/text-editor/src/components/icons/table/DeleteRow.svelte
new file mode 100644
index 0000000000..e70b99b485
--- /dev/null
+++ b/packages/text-editor/src/components/icons/table/DeleteRow.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+ export let size: 'small' | 'medium' | 'large'
+ const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M22.3,7.5v-4c0-1-0.8-1.8-1.8-1.8h-17c-1,0-1.8,0.8-1.8,1.8v4.1c0,1,0.8,1.8,1.8,1.8h17.1C21.5,9.3,22.3,8.5,22.3,7.5z M9.2,7.8V3.2h5v4.6H9.2z M3.7,3.2h4v4.6h-4c-0.3,0-0.5-0.2-0.5-0.5V3.7C3.2,3.4,3.4,3.2,3.7,3.2zM20.8,7.3c0,0.3-0.2,0.5-0.5,0.5h-4.6V3.2h4.6c0.3,0,0.5,0.2,0.5,0.5V7.3z"
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ />
+ <path
+ d="M21.8,20.7l-2-2l1.9-1.9c0.3-0.3,0.3-0.8,0-1.1c-0.3-0.3-0.7-0.3-1.1,0l-1.9,1.9l-1.9-1.9c-0.3-0.3-0.8-0.3-1.1,0c-0.3,0.3-0.3,0.8,0,1.1l1.9,1.9l-2,2c-0.3,0.3-0.3,0.8,0,1.1s0.8,0.3,1.1,0l2-2l2,2c0.3,0.3,0.8,0.3,1.1,0S22.1,21,21.8,20.7z"
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ />
+</svg>
diff --git a/packages/text-editor/src/components/icons/table/DeleteTable.svelte b/packages/text-editor/src/components/icons/table/DeleteTable.svelte
new file mode 100644
index 0000000000..ea5ce39aff
--- /dev/null
+++ b/packages/text-editor/src/components/icons/table/DeleteTable.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+ export let size: 'small' | 'medium' | 'large'
+ const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M21.8,20.7l-2-2l1.9-1.9c0.3-0.3,0.3-0.8,0-1.1c-0.3-0.3-0.7-0.3-1.1,0l-1.9,1.9l-1.9-1.9c-0.3-0.3-0.8-0.3-1.1,0c-0.3,0.3-0.3,0.8,0,1.1l1.9,1.9l-2,2c-0.3,0.3-0.3,0.8,0,1.1c0.3,0.3,0.8,0.3,1.1,0l2-2l2,2c0.3,0.3,0.8,0.3,1.1,0S22.1,21,21.8,20.7z"
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ />
+ <path
+ d="M16,13.3V8.8h4.2V10v3.3c0,0.4,0.3,0.8,0.8,0.8s0.8-0.3,0.8-0.8V10V7V4.5c0.1-1.2-1-2.3-2.2-2.3h-15c-1.2,0-2.2,1-2.2,2.2v2v3v10c0,1.2,1,2.2,2.2,2.2H13c0.4,0,0.7-0.3,0.7-0.6c0-0.4-0.3-0.7-0.7-0.7H9.5v-0.1V8.8h5v4.5c0,0.4,0.3,0.8,0.8,0.8S16,13.7,16,13.3z M8,20.3H4.5c-0.4-0.1-0.7-0.4-0.7-0.8v-10V8.8H8V20.3z M3.8,7.2V6.5v-2c0-0.4,0.3-0.8,0.8-0.8h15c0.4,0,0.8,0.3,0.8,0.8V7v0.2H3.8z"
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ />
+</svg>
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index ef5b07f057..89ae064916 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -512,16 +512,18 @@ input.search {
.min-w-80 { min-width: 20rem; }
.min-w-min { min-width: min-content; }
.min-h-0 { min-height: 0; }
+.min-h-2 { min-height: .5rem; }
.min-h-7 { min-height: 1.75rem; }
.min-h-60 { min-height: 15rem; }
-.max-h-125 { max-height: 31.25rem; }
-.max-h-30 { max-height: 7.5rem; }
-.max-h-50 { max-height: 12.5rem; }
-.max-h-60 { max-height: 15rem; }
.max-w-30 { max-width: 7.5rem; }
.max-w-60 { max-width: 15rem; }
.max-w-80 { max-width: 20rem; }
.max-w-240 { max-width: 60rem; }
+.max-h-2 { max-height: .5rem; }
+.max-h-30 { max-height: 7.5rem; }
+.max-h-50 { max-height: 12.5rem; }
+.max-h-60 { max-height: 15rem; }
+.max-h-125 { max-height: 31.25rem; }
.clear-mins {
min-width: 0;
min-height: 0;
diff --git a/packages/theme/styles/dialogs.scss b/packages/theme/styles/dialogs.scss
index 9ee4532408..aef7c8dec5 100644
--- a/packages/theme/styles/dialogs.scss
+++ b/packages/theme/styles/dialogs.scss
@@ -28,6 +28,7 @@
.antiCard {
display: flex;
flex-direction: column;
+ min-height: 0;
background: var(--popup-bg-color);
border-radius: .5rem;
box-shadow: var(--card-shadow);
@@ -68,10 +69,10 @@
.antiCard-content {
display: flex;
flex-direction: column;
- flex-shrink: 0;
flex-grow: 1;
margin: 0 1rem;
height: fit-content;
+ min-height: 0;
& > *:not(:last-child) { margin-bottom: 1rem; }
}
diff --git a/packages/theme/styles/global.scss b/packages/theme/styles/global.scss
index a5cfcbc7c7..1b1e6b3a98 100644
--- a/packages/theme/styles/global.scss
+++ b/packages/theme/styles/global.scss
@@ -21,6 +21,7 @@
@import "./popups.scss";
@import "./mixins.scss";
@import "./panel.scss";
+@import "./prose.scss";
@font-face {
font-family: 'IBM Plex Sans';
diff --git a/packages/theme/styles/prose.scss b/packages/theme/styles/prose.scss
new file mode 100644
index 0000000000..8a29758812
--- /dev/null
+++ b/packages/theme/styles/prose.scss
@@ -0,0 +1,46 @@
+//
+// Copyright © 2022 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+/* Table */
+table.proseTable {
+ border-collapse: collapse;
+ table-layout: fixed;
+ width: 100%;
+ margin: 0;
+ overflow: hidden;
+
+ td,
+ th {
+ min-width: 1rem;
+ border: 1px solid var(--button-border-hover);
+ padding: .25rem .5rem;
+ vertical-align: top;
+ box-sizing: border-box;
+ position: relative;
+
+ > * {
+ margin-bottom: 0;
+ }
+ }
+
+ th {
+ text-align: left;
+ background-color: var(--button-bg-color);
+ }
+
+ p {
+ margin: 0;
+ }
+}
diff --git a/packages/ui/src/components/ExpandCollapse.svelte b/packages/ui/src/components/ExpandCollapse.svelte
index 250f054579..79fb57f788 100644
--- a/packages/ui/src/components/ExpandCollapse.svelte
+++ b/packages/ui/src/components/ExpandCollapse.svelte
@@ -13,6 +13,7 @@
// limitations under the License.
-->
<script lang="ts">
+ import { createEventDispatcher, afterUpdate } from 'svelte'
import { quintOut } from 'svelte/easing'
import { tweened } from 'svelte/motion'
@@ -20,6 +21,9 @@
export let duration = 200
export let easing: (t: number) => number = quintOut
+ const dispatch = createEventDispatcher()
+ afterUpdate(() => dispatch('changeContent'))
+
const tweenedHeight = tweened(0, { duration, easing })
let height = 0
@@ -28,7 +32,7 @@
</script>
<div class="root" style="height: {$tweenedHeight}px">
- <div bind:offsetHeight={height}>
+ <div bind:offsetHeight={height} class="clear-mins">
<slot />
</div>
</div>
@@ -36,5 +40,6 @@
<style lang="scss">
.root {
overflow: hidden;
+ min-height: 0;
}
</style>
diff --git a/packages/ui/src/components/SelectPopup.svelte b/packages/ui/src/components/SelectPopup.svelte
index 2cbeafab6a..caac89d82b 100644
--- a/packages/ui/src/components/SelectPopup.svelte
+++ b/packages/ui/src/components/SelectPopup.svelte
@@ -124,7 +124,7 @@
<svelte:fragment slot="item" let:item={itemId}>
{@const item = filteredObjects[itemId]}
<button
- class="menu-item w-full"
+ class="menu-item w-full"
on:click={() => dispatch('close', item.id)}
on:focus={() => dispatch('update', item)}
on:mouseover={() => dispatch('update', item)}
@@ -141,7 +141,7 @@
<svelte:component this={item.component} {...item.props} />
{:else}
{#if item.icon}
- <div class="mr-2">
+ <div class="icon mr-2">
<Icon icon={item.icon} fill={item.iconColor} {size} />
</div>
{/if}
diff --git a/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte b/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte
index 4320bdc5b8..6c64e435a2 100644
--- a/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte
@@ -32,7 +32,7 @@
export let alwaysEdit = false
export let showButtons = false
export let buttonSize: IconSize = 'small'
- export let maxHeight: 'max' | 'card' | string = 'max'
+ export let maxHeight: 'max' | 'card' | 'limited' | string = 'max'
export function attach (): void {
inputFile.click()
@@ -188,12 +188,21 @@
/>
<div
- class="flex-col"
+ class="flex-col clear-mins"
on:dragover|preventDefault={() => {}}
on:dragleave={() => {}}
on:drop|preventDefault|stopPropagation={fileDrop}
>
- <StyledTextBox bind:this={refInput} bind:content {placeholder} {alwaysEdit} {showButtons} {buttonSize} {maxHeight} />
+ <StyledTextBox
+ bind:this={refInput}
+ bind:content
+ {placeholder}
+ {alwaysEdit}
+ {showButtons}
+ {buttonSize}
+ {maxHeight}
+ on:changeContent
+ />
{#if attachments.size}
<div class="flex-row-center list scroll-divider-color mt-1">
{#each Array.from(attachments.values()) as attachment}
diff --git a/plugins/tracker-resources/src/components/CreateIssue.svelte b/plugins/tracker-resources/src/components/CreateIssue.svelte
index cee5d5db16..d6467121e6 100644
--- a/plugins/tracker-resources/src/components/CreateIssue.svelte
+++ b/plugins/tracker-resources/src/components/CreateIssue.svelte
@@ -62,7 +62,7 @@
} from '@hcengineering/ui'
import view from '@hcengineering/view'
import { ObjectBox } from '@hcengineering/view-resources'
- import { createEventDispatcher } from 'svelte'
+ import { createEventDispatcher, afterUpdate } from 'svelte'
import { activeProject, activeSprint, updateIssueRelation } from '../issues'
import tracker from '../plugin'
import AssigneeEditor from './issues/AssigneeEditor.svelte'
@@ -638,6 +638,8 @@
)
}
}
+
+ afterUpdate(() => dispatch('changeContent'))
</script>
<Card
@@ -702,12 +704,20 @@
space={_space}
alwaysEdit
showButtons={false}
- maxHeight={'card'}
+ maxHeight={'20vh'}
bind:content={object.description}
placeholder={tracker.string.IssueDescriptionPlaceholder}
+ on:changeContent
/>
{/key}
- <IssueTemplateChilds bind:children={subIssues} sprint={object.sprint} project={object.project} />
+ <IssueTemplateChilds
+ bind:children={subIssues}
+ sprint={object.sprint}
+ project={object.project}
+ isScrollable
+ maxHeight={'20vh'}
+ on:changeContent
+ />
<svelte:fragment slot="pool">
<div class="flex flex-wrap" style:gap={'0.2vw'}>
{#if issueStatuses}
diff --git a/plugins/tracker-resources/src/components/templates/IssueTemplateChildEditor.svelte b/plugins/tracker-resources/src/components/templates/IssueTemplateChildEditor.svelte
index 7d44b6f080..f15f91fb16 100644
--- a/plugins/tracker-resources/src/components/templates/IssueTemplateChildEditor.svelte
+++ b/plugins/tracker-resources/src/components/templates/IssueTemplateChildEditor.svelte
@@ -29,6 +29,8 @@
export let project: Ref<Project> | null = null
export let childIssue: IssueTemplateChild | undefined = undefined
export let showBorder = false
+ export let isScrollable: boolean = false
+ export let maxHeight: 'max' | 'card' | 'limited' | string | undefined = undefined
const dispatch = createEventDispatcher()
const client = getClient()
@@ -105,8 +107,8 @@
$: labelRefs = labels.map((it) => ({ ...(it as unknown as TagReference), _id: generateId(), tag: it._id }))
</script>
-<div bind:this={thisRef} class="flex-col root" class:antiPopup={showBorder}>
- <div class="flex-row-top">
+<div bind:this={thisRef} class="flex-col root clear-mins" class:antiPopup={showBorder}>
+ <div class="flex-row-top clear-mins">
<div class="w-full flex-col content">
<EditBox
bind:value={newIssue.title}
@@ -115,12 +117,15 @@
placeholder={tracker.string.IssueTitlePlaceholder}
focus
/>
- <div class="mt-4">
+ <div class="mt-4 clear-mins">
{#key newIssue.description}
<StyledTextArea
bind:content={newIssue.description}
placeholder={tracker.string.IssueDescriptionPlaceholder}
showButtons={false}
+ {isScrollable}
+ {maxHeight}
+ on:changeContent
/>
{/key}
</div>
diff --git a/plugins/tracker-resources/src/components/templates/IssueTemplateChilds.svelte b/plugins/tracker-resources/src/components/templates/IssueTemplateChilds.svelte
index fb70ba4ec2..7a1d8b5ec1 100644
--- a/plugins/tracker-resources/src/components/templates/IssueTemplateChilds.svelte
+++ b/plugins/tracker-resources/src/components/templates/IssueTemplateChilds.svelte
@@ -16,6 +16,7 @@
import { Ref } from '@hcengineering/core'
import { IssueTemplateChild, Project, Sprint } from '@hcengineering/tracker'
import { Button, closeTooltip, ExpandCollapse, IconAdd } from '@hcengineering/ui'
+ import { afterUpdate } from 'svelte'
import { createEventDispatcher } from 'svelte'
import tracker from '../../plugin'
import Collapsed from '../icons/Collapsed.svelte'
@@ -27,6 +28,8 @@
export let teamId: string = 'TSK'
export let sprint: Ref<Sprint> | null = null
export let project: Ref<Project> | null = null
+ export let isScrollable: boolean = false
+ export let maxHeight: 'max' | 'card' | 'limited' | string | undefined = undefined
const dispatch = createEventDispatcher()
@@ -44,10 +47,12 @@
}
}
+ afterUpdate(() => dispatch('changeContent'))
+
$: hasSubIssues = children.length > 0
</script>
-<div class="flex-between">
+<div class="flex-between clear-mins">
{#if hasSubIssues}
<Button
width="min-content"
@@ -79,42 +84,41 @@
}}
/>
</div>
-<div class="mt-1">
- <ExpandCollapse isExpanded={!isCollapsed} duration={400}>
- {#if hasSubIssues}
- <div class="list" class:collapsed={isCollapsed}>
- <IssueTemplateChildList
- {project}
- {sprint}
- bind:issues={children}
- {teamId}
- on:move={handleIssueSwap}
- on:update-issue
- />
- </div>
- {/if}
+{#if hasSubIssues}
+ <ExpandCollapse isExpanded={!isCollapsed} duration={400} on:changeContent>
+ <div class="list" class:collapsed={isCollapsed}>
+ <IssueTemplateChildList
+ {project}
+ {sprint}
+ bind:issues={children}
+ {teamId}
+ on:move={handleIssueSwap}
+ on:update-issue
+ />
+ </div>
</ExpandCollapse>
- <ExpandCollapse isExpanded={!isCollapsed} duration={400}>
- {#if isCreating}
- <div class="pt-4">
- <IssueTemplateChildEditor
- {project}
- {sprint}
- on:close={() => {
- isCreating = false
- }}
- on:create={(evt) => {
- if (children === undefined) {
- children = []
- }
- children = [...children, evt.detail]
- dispatch('create-issue', evt.detail)
- }}
- />
- </div>
- {/if}
+{/if}
+{#if isCreating}
+ <ExpandCollapse isExpanded={!isCollapsed} duration={400} on:changeContent>
+ <IssueTemplateChildEditor
+ {project}
+ {sprint}
+ {isScrollable}
+ {maxHeight}
+ on:close={() => {
+ isCreating = false
+ }}
+ on:create={(evt) => {
+ if (children === undefined) {
+ children = []
+ }
+ children = [...children, evt.detail]
+ dispatch('create-issue', evt.detail)
+ }}
+ on:changeContent
+ />
</ExpandCollapse>
-</div>
+{/if}
<style lang="scss">
.list {