diff --git a/src/field/richtext/RichTextToolbar.tsx b/src/field/richtext/RichTextToolbar.tsx
index 2d195ff4..c698c1c1 100644
--- a/src/field/richtext/RichTextToolbar.tsx
+++ b/src/field/richtext/RichTextToolbar.tsx
@@ -23,6 +23,15 @@ import {FieldToolbar} from 'alinea/dashboard/view/entry/FieldToolbar'
import {IconButton} from 'alinea/dashboard/view/IconButton'
import {IcRoundSubscript} from 'alinea/ui/icons/IcRoundSubscript'
import {IcRoundSuperscript} from 'alinea/ui/icons/IcRoundSuperscript'
+import {TableDelete} from 'alinea/ui/icons/TableDelete'
+import {TableDeleteColumn} from 'alinea/ui/icons/TableDeleteColumn'
+import {TableDeleteRow} from 'alinea/ui/icons/TableDeleteRow'
+import {TableHeaderRow} from 'alinea/ui/icons/TableHeaderRow'
+import {TableInsert} from 'alinea/ui/icons/TableInsert'
+import {TableInsertColumnAfter} from 'alinea/ui/icons/TableInsertColumnAfter'
+import {TableInsertColumnBefore} from 'alinea/ui/icons/TableInsertColumnBefore'
+import {TableInsertRowAfter} from 'alinea/ui/icons/TableInsertRowAfter'
+import {TableInsertRowBefore} from 'alinea/ui/icons/TableInsertRowBefore'
import {forwardRef, Ref} from 'react'
import {PickTextLinkFunc} from './PickTextLink.js'
import {attributesToReference, referenceToAttributes} from './ReferenceLink.js'
@@ -39,6 +48,16 @@ enum Styles {
h5 = 'Heading 5'
}
+const HrDivider = () => (
+
+)
+
export type RichTextToolbarProps = {
editor: Editor
focusToggle: (target: EventTarget | null) => void
@@ -182,42 +201,68 @@ export const RichTextToolbar = forwardRef(function RichTextToolbar(
{selectedTable ? (
<>
exec().addColumnBefore().run()}
+ onClick={() => exec().addRowBefore().run()}
>
- Insert column before
+
+
+ Insert row before
+
exec().addColumnAfter().run()}
+ onClick={() => exec().addRowAfter().run()}
>
- Insert column after
+
+
+ Insert row after
+
+
+ exec().deleteRow().run()}>
+
+
+ Delete row
+
exec().deleteColumn().run()}
+ onClick={() => exec().toggleHeaderRow().run()}
>
- Delete column
+
+
+ Toggle header row
+
+
exec().addRowBefore().run()}
+ onClick={() => exec().addColumnBefore().run()}
>
- Insert row before
+
+
+ Insert column before
+
exec().addRowAfter().run()}
+ onClick={() => exec().addColumnAfter().run()}
>
- Insert row after
-
- exec().deleteRow().run()}>
- Delete row
+
+
+ Insert column after
+
exec().deleteTable().run()}
+ onClick={() => exec().deleteColumn().run()}
>
- Delete table
+
+
+ Delete column
+
+
exec().toggleHeaderRow().run()}
+ onClick={() => exec().deleteTable().run()}
>
- Toggle header row
+
+
+ Delete table
+
) : (
@@ -228,7 +273,10 @@ export const RichTextToolbar = forwardRef(function RichTextToolbar(
.run()
}
>
- Insert table
+
+
+ Insert table
+
)}
diff --git a/src/ui/icons/TableDelete.tsx b/src/ui/icons/TableDelete.tsx
new file mode 100644
index 00000000..d5fa0c32
--- /dev/null
+++ b/src/ui/icons/TableDelete.tsx
@@ -0,0 +1,16 @@
+import {SVGProps} from 'react'
+
+export function TableDelete(props: SVGProps) {
+ return (
+
+ )
+}
diff --git a/src/ui/icons/TableDeleteColumn.tsx b/src/ui/icons/TableDeleteColumn.tsx
new file mode 100644
index 00000000..de766d92
--- /dev/null
+++ b/src/ui/icons/TableDeleteColumn.tsx
@@ -0,0 +1,12 @@
+import {SVGProps} from 'react'
+
+export function TableDeleteColumn(props: SVGProps) {
+ return (
+
+ )
+}
diff --git a/src/ui/icons/TableDeleteRow.tsx b/src/ui/icons/TableDeleteRow.tsx
new file mode 100644
index 00000000..00dd93e2
--- /dev/null
+++ b/src/ui/icons/TableDeleteRow.tsx
@@ -0,0 +1,12 @@
+import {SVGProps} from 'react'
+
+export function TableDeleteRow(props: SVGProps) {
+ return (
+
+ )
+}
diff --git a/src/ui/icons/TableHeaderRow.tsx b/src/ui/icons/TableHeaderRow.tsx
new file mode 100644
index 00000000..8c5b111f
--- /dev/null
+++ b/src/ui/icons/TableHeaderRow.tsx
@@ -0,0 +1,12 @@
+import {SVGProps} from 'react'
+
+export function TableHeaderRow(props: SVGProps) {
+ return (
+
+ )
+}
diff --git a/src/ui/icons/TableInsert.tsx b/src/ui/icons/TableInsert.tsx
new file mode 100644
index 00000000..3371fc2d
--- /dev/null
+++ b/src/ui/icons/TableInsert.tsx
@@ -0,0 +1,12 @@
+import {SVGProps} from 'react'
+
+export function TableInsert(props: SVGProps) {
+ return (
+
+ )
+}
diff --git a/src/ui/icons/TableInsertColumnAfter.tsx b/src/ui/icons/TableInsertColumnAfter.tsx
new file mode 100644
index 00000000..6d4b0f5b
--- /dev/null
+++ b/src/ui/icons/TableInsertColumnAfter.tsx
@@ -0,0 +1,12 @@
+import {SVGProps} from 'react'
+
+export function TableInsertColumnAfter(props: SVGProps) {
+ return (
+
+ )
+}
diff --git a/src/ui/icons/TableInsertColumnBefore.tsx b/src/ui/icons/TableInsertColumnBefore.tsx
new file mode 100644
index 00000000..59977f34
--- /dev/null
+++ b/src/ui/icons/TableInsertColumnBefore.tsx
@@ -0,0 +1,12 @@
+import {SVGProps} from 'react'
+
+export function TableInsertColumnBefore(props: SVGProps) {
+ return (
+
+ )
+}
diff --git a/src/ui/icons/TableInsertRowAfter.tsx b/src/ui/icons/TableInsertRowAfter.tsx
new file mode 100644
index 00000000..fb71897e
--- /dev/null
+++ b/src/ui/icons/TableInsertRowAfter.tsx
@@ -0,0 +1,12 @@
+import {SVGProps} from 'react'
+
+export function TableInsertRowAfter(props: SVGProps) {
+ return (
+
+ )
+}
diff --git a/src/ui/icons/TableInsertRowBefore.tsx b/src/ui/icons/TableInsertRowBefore.tsx
new file mode 100644
index 00000000..1423da1a
--- /dev/null
+++ b/src/ui/icons/TableInsertRowBefore.tsx
@@ -0,0 +1,12 @@
+import {SVGProps} from 'react'
+
+export function TableInsertRowBefore(props: SVGProps) {
+ return (
+
+ )
+}