yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tiptap extension: Table

Browse Source
This commit is contained in:
leekelleher
2024-09-26 10:23:29 +01:00
committed by Jacob Overgaard
parent 72d7093fbf
commit a7e93e82bb
9 changed files with 176 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/Umbraco.Web.UI.Client/package-lock.json generated
View File

@@ -32,6 +32,10 @@
"@tiptap/extension-ordered-list": "^2.7.0",
"@tiptap/extension-paragraph": "^2.7.0",
"@tiptap/extension-strike": "^2.7.0",
"@tiptap/extension-table": "^2.7.3",
"@tiptap/extension-table-cell": "^2.7.3",
"@tiptap/extension-table-header": "^2.7.3",
"@tiptap/extension-table-row": "^2.7.3",
"@tiptap/extension-text": "^2.7.0",
"@tiptap/extension-text-align": "^2.6.6",
"@tiptap/extension-underline": "^2.6.6",
@@ -6731,6 +6735,55 @@
"@tiptap/core": "^2.7.0-pre.0"
}
},
"node_modules/@tiptap/extension-table": {
"version": "2.7.3",
"resolved": "https://registry.npmjs.org/@tiptap/extension-table/-/extension-table-2.7.3.tgz",
"integrity": "sha512-zv1SGgVywTY3vs+9EIMdYS7jZMovlfsraZ3Qdz1YkqN3dNZBUukXrfpZaJqzVwUvRehCVvjA+HG7zH12RU/XYQ==",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/core": "^2.7.0",
"@tiptap/pm": "^2.7.0"
}
},
"node_modules/@tiptap/extension-table-cell": {
"version": "2.7.3",
"resolved": "https://registry.npmjs.org/@tiptap/extension-table-cell/-/extension-table-cell-2.7.3.tgz",
"integrity": "sha512-C6f2dAcatk/XROZ2Q1owv4DBrTyfVzfsK1Jh7rk3mkpEa8oh/lPKR8thYjmaLC/BlPYjtVuIbMIqp9lz6U/Ufw==",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/core": "^2.7.0"
}
},
"node_modules/@tiptap/extension-table-header": {
"version": "2.7.3",
"resolved": "https://registry.npmjs.org/@tiptap/extension-table-header/-/extension-table-header-2.7.3.tgz",
"integrity": "sha512-eL1FVn+GBf0dRYmsE88QeJa3azwVKhyYDAFTmoGIwilHsjbNzb4ptUGi+ko2XpxLHvY+XfGLe3+UEZbQ3FDOIA==",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/core": "^2.7.0"
}
},
"node_modules/@tiptap/extension-table-row": {
"version": "2.7.3",
"resolved": "https://registry.npmjs.org/@tiptap/extension-table-row/-/extension-table-row-2.7.3.tgz",
"integrity": "sha512-gB6gXYVCGWn6IDb/oV3ds1LI0yLLIwymcvcu1MWnT9p8qClZPaId/J6/+mQbSGCEc8G1SzYYUhnu2dsaVIsFsw==",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/core": "^2.7.0"
}
},
"node_modules/@tiptap/extension-text": {
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/@tiptap/extension-text/-/extension-text-2.7.0.tgz",

4
src/Umbraco.Web.UI.Client/package.json
View File

@@ -212,6 +212,10 @@
"@tiptap/extension-ordered-list": "^2.7.0",
"@tiptap/extension-paragraph": "^2.7.0",
"@tiptap/extension-strike": "^2.7.0",
"@tiptap/extension-table": "^2.7.3",
"@tiptap/extension-table-cell": "^2.7.3",
"@tiptap/extension-table-header": "^2.7.3",
"@tiptap/extension-table-row": "^2.7.3",
"@tiptap/extension-text": "^2.7.0",
"@tiptap/extension-text-align": "^2.6.6",
"@tiptap/extension-underline": "^2.6.6",

12
src/Umbraco.Web.UI.Client/src/external/tiptap/index.ts vendored
View File

@@ -1,4 +1,4 @@
// REQUIRED EXTENSIONS START
// REQUIRED EXTENSIONS
export * from '@tiptap/core';
export { Document } from '@tiptap/extension-document';
export { Dropcursor } from '@tiptap/extension-dropcursor';
@@ -7,7 +7,8 @@ export { HardBreak } from '@tiptap/extension-hard-break';
export { History } from '@tiptap/extension-history';
export { Paragraph } from '@tiptap/extension-paragraph';
export { Text } from '@tiptap/extension-text';
// REQUIRED EXTENSIONS END
// OPTIONAL EXTENSIONS
export { Blockquote } from '@tiptap/extension-blockquote';
export { Bold } from '@tiptap/extension-bold';
export { BulletList } from '@tiptap/extension-bullet-list';
@@ -15,14 +16,19 @@ export { Code } from '@tiptap/extension-code';
export { CodeBlock } from '@tiptap/extension-code-block';
export { Heading } from '@tiptap/extension-heading';
export { HorizontalRule } from '@tiptap/extension-horizontal-rule';
export { Image } from '@tiptap/extension-image';
export { Italic } from '@tiptap/extension-italic';
export { Link } from '@tiptap/extension-link';
export { ListItem } from '@tiptap/extension-list-item';
export { OrderedList } from '@tiptap/extension-ordered-list';
export { Strike } from '@tiptap/extension-strike';
export { Table } from '@tiptap/extension-table';
export { TableCell } from '@tiptap/extension-table-cell';
export { TableHeader } from '@tiptap/extension-table-header';
export { TableRow } from '@tiptap/extension-table-row';
export { TextAlign } from '@tiptap/extension-text-align';
export { Underline } from '@tiptap/extension-underline';
export { Image } from '@tiptap/extension-image';
// CUSTOM EXTENSIONS
export * from './extensions/tiptap-figcaption.extension.js';
export * from './extensions/tiptap-figure.extension.js';

4
src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-dictionary.json
View File

@@ -1982,6 +1982,10 @@
"name": "icon-tab-key",
"file": "arrow-right-to-line.svg"
},
{
"name": "icon-table",
"file": "table.svg"
},
{
"name": "icon-tag",
"file": "tag.svg"

4
src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons.ts
View File

@@ -1867,6 +1867,10 @@ name: "icon-tab-key",
path: () => import("./icons/icon-tab-key.js"),
},{
name: "icon-table",
path: () => import("./icons/icon-table.js"),
},{
name: "icon-tag",
path: () => import("./icons/icon-tag.js"),

17
src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-table.ts Normal file
View File

@@ -0,0 +1,17 @@
export default `<!-- @license lucide-static v0.446.0 - ISC -->
<svg
class="lucide lucide-table"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M12 3v18" />
<rect width="18" height="18" x="3" y="3" rx="2" />
<path d="M3 9h18" />
<path d="M3 15h18" />
</svg>
`;

61
src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/input-tiptap/input-tiptap.element.ts
View File

@@ -180,6 +180,67 @@ export class UmbInputTiptapElement extends UmbFormControlMixin<string, typeof Um
margin-top: 0;
margin-bottom: 0.5em;
}
/* Table-specific styling */
.tableWrapper {
margin: 1.5rem 0;
overflow-x: auto;
table {
border-collapse: collapse;
margin: 0;
overflow: hidden;
table-layout: fixed;
width: 100%;
td,
th {
border: 1px solid var(--uui-color-border);
box-sizing: border-box;
min-width: 1em;
padding: 6px 8px;
position: relative;
vertical-align: top;
> * {
margin-bottom: 0;
}
}
th {
background-color: var(--uui-color-background);
font-weight: bold;
text-align: left;
}
.selectedCell:after {
background: var(--uui-color-surface-emphasis);
content: '';
left: 0;
right: 0;
top: 0;
bottom: 0;
pointer-events: none;
position: absolute;
z-index: 2;
}
.column-resize-handle {
background-color: var(--uui-color-default);
bottom: -2px;
pointer-events: none;
position: absolute;
right: -2px;
top: 0;
width: 3px;
}
}
}
.resize-cursor {
cursor: ew-resize;
cursor: col-resize;
}
}
`,
];

13
src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/manifests.ts
View File

@@ -165,6 +165,19 @@ export const manifests: Array<ManifestTiptapExtension | ManifestTiptapExtensionB
label: 'Strike',
},
},
{
type: 'tiptapExtension',
kind: 'button',
alias: 'Umb.Tiptap.Table',
name: 'Table Tiptap Extension',
api: () => import('./table.extension.js'),
weight: 909,
meta: {
alias: 'table',
icon: 'icon-table',
label: 'Table',
},
},
{
type: 'tiptapExtension',
kind: 'button',

11
src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/core/table.extension.ts Normal file
View File

@@ -0,0 +1,11 @@
import { UmbTiptapToolbarElementApiBase } from '../types.js';
import { Table, TableHeader, TableRow, TableCell } from '@umbraco-cms/backoffice/external/tiptap';
import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
export default class UmbTiptapTableExtensionApi extends UmbTiptapToolbarElementApiBase {
getTiptapExtensions = () => [Table.configure({ resizable: true }), TableHeader, TableRow, TableCell];
override execute(editor?: Editor) {
editor?.commands.insertTable({ rows: 3, cols: 3, withHeaderRow: true });
}
}