diff --git a/package-lock.json b/package-lock.json index 8203950..2a6d4bc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,38 +9,39 @@ "version": "1.2.5", "license": "GPL-3.0", "dependencies": { - "@tiptap/core": "^2.2.2", - "@tiptap/extension-blockquote": "^2.2.2", - "@tiptap/extension-bold": "^2.2.2", - "@tiptap/extension-bullet-list": "^2.2.2", - "@tiptap/extension-code": "^2.2.2", - "@tiptap/extension-code-block": "^2.2.2", - "@tiptap/extension-document": "^2.2.2", - "@tiptap/extension-dropcursor": "^2.2.2", - "@tiptap/extension-gapcursor": "^2.2.2", - "@tiptap/extension-hard-break": "^2.2.2", - "@tiptap/extension-heading": "^2.2.2", - "@tiptap/extension-history": "^2.2.2", - "@tiptap/extension-horizontal-rule": "^2.2.2", - "@tiptap/extension-italic": "^2.2.2", - "@tiptap/extension-link": "^2.2.2", - "@tiptap/extension-list-item": "^2.2.2", - "@tiptap/extension-ordered-list": "^2.2.2", - "@tiptap/extension-paragraph": "^2.2.2", - "@tiptap/extension-placeholder": "^2.2.2", - "@tiptap/extension-strike": "^2.2.2", - "@tiptap/extension-table": "^2.2.2", - "@tiptap/extension-table-cell": "^2.2.2", - "@tiptap/extension-table-header": "^2.2.2", - "@tiptap/extension-table-row": "^2.2.2", - "@tiptap/extension-text": "^2.2.2", + "@tiptap/core": "^2.2.4", + "@tiptap/extension-blockquote": "^2.2.4", + "@tiptap/extension-bold": "^2.2.4", + "@tiptap/extension-bullet-list": "^2.2.4", + "@tiptap/extension-code": "^2.2.4", + "@tiptap/extension-code-block": "^2.2.4", + "@tiptap/extension-document": "^2.2.4", + "@tiptap/extension-dropcursor": "^2.2.4", + "@tiptap/extension-gapcursor": "^2.2.4", + "@tiptap/extension-hard-break": "^2.2.4", + "@tiptap/extension-heading": "^2.2.4", + "@tiptap/extension-history": "^2.2.4", + "@tiptap/extension-horizontal-rule": "^2.2.4", + "@tiptap/extension-italic": "^2.2.4", + "@tiptap/extension-link": "^2.2.4", + "@tiptap/extension-list-item": "^2.2.4", + "@tiptap/extension-ordered-list": "^2.2.4", + "@tiptap/extension-paragraph": "^2.2.4", + "@tiptap/extension-placeholder": "^2.2.4", + "@tiptap/extension-strike": "^2.2.4", + "@tiptap/extension-table": "^2.2.4", + "@tiptap/extension-table-cell": "^2.2.4", + "@tiptap/extension-table-header": "^2.2.4", + "@tiptap/extension-table-row": "^2.2.4", + "@tiptap/extension-text": "^2.2.4", + "@tiptap/extension-text-align": "^2.2.4", "tiptap-render-view": "^1.0.2" }, "devDependencies": { "@directus/extensions-sdk": "11.0.1", "@directus/utils": "^11.0.4", - "@tiptap/pm": "^2.2.2", - "@tiptap/vue-3": "^2.2.2", + "@tiptap/pm": "^2.2.4", + "@tiptap/vue-3": "^2.2.4", "@types/lodash": "^4.14.195", "@types/node": "^20.11.17", "@types/uuid": "^9.0.2", @@ -1382,6 +1383,18 @@ "@tiptap/core": "^2.0.0" } }, + "node_modules/@tiptap/extension-text-align": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/@tiptap/extension-text-align/-/extension-text-align-2.2.4.tgz", + "integrity": "sha512-iojhpsv3n/r4g/4wMFl1d85RloWrAV3TRUJluurPQZJdrJ7ynJ2fiPqmigAXyaYAJ3+a1ryu9JPlktT9RdYO/A==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.0.0" + } + }, "node_modules/@tiptap/pm": { "version": "2.2.4", "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-2.2.4.tgz", diff --git a/package.json b/package.json index 5182b72..06b2aa8 100644 --- a/package.json +++ b/package.json @@ -67,8 +67,8 @@ "devDependencies": { "@directus/extensions-sdk": "11.0.1", "@directus/utils": "^11.0.4", - "@tiptap/pm": "^2.2.2", - "@tiptap/vue-3": "^2.2.2", + "@tiptap/pm": "^2.2.4", + "@tiptap/vue-3": "^2.2.4", "@types/lodash": "^4.14.195", "@types/node": "^20.11.17", "@types/uuid": "^9.0.2", @@ -80,31 +80,32 @@ "vue-i18n": "^9.4.0" }, "dependencies": { - "@tiptap/core": "^2.2.2", - "@tiptap/extension-blockquote": "^2.2.2", - "@tiptap/extension-bold": "^2.2.2", - "@tiptap/extension-bullet-list": "^2.2.2", - "@tiptap/extension-code": "^2.2.2", - "@tiptap/extension-code-block": "^2.2.2", - "@tiptap/extension-document": "^2.2.2", - "@tiptap/extension-dropcursor": "^2.2.2", - "@tiptap/extension-gapcursor": "^2.2.2", - "@tiptap/extension-hard-break": "^2.2.2", - "@tiptap/extension-heading": "^2.2.2", - "@tiptap/extension-history": "^2.2.2", - "@tiptap/extension-horizontal-rule": "^2.2.2", - "@tiptap/extension-italic": "^2.2.2", - "@tiptap/extension-link": "^2.2.2", - "@tiptap/extension-list-item": "^2.2.2", - "@tiptap/extension-ordered-list": "^2.2.2", - "@tiptap/extension-paragraph": "^2.2.2", - "@tiptap/extension-placeholder": "^2.2.2", - "@tiptap/extension-strike": "^2.2.2", - "@tiptap/extension-table": "^2.2.2", - "@tiptap/extension-table-cell": "^2.2.2", - "@tiptap/extension-table-header": "^2.2.2", - "@tiptap/extension-table-row": "^2.2.2", - "@tiptap/extension-text": "^2.2.2", + "@tiptap/core": "^2.2.4", + "@tiptap/extension-blockquote": "^2.2.4", + "@tiptap/extension-bold": "^2.2.4", + "@tiptap/extension-bullet-list": "^2.2.4", + "@tiptap/extension-code": "^2.2.4", + "@tiptap/extension-code-block": "^2.2.4", + "@tiptap/extension-document": "^2.2.4", + "@tiptap/extension-dropcursor": "^2.2.4", + "@tiptap/extension-gapcursor": "^2.2.4", + "@tiptap/extension-hard-break": "^2.2.4", + "@tiptap/extension-heading": "^2.2.4", + "@tiptap/extension-history": "^2.2.4", + "@tiptap/extension-horizontal-rule": "^2.2.4", + "@tiptap/extension-italic": "^2.2.4", + "@tiptap/extension-link": "^2.2.4", + "@tiptap/extension-list-item": "^2.2.4", + "@tiptap/extension-ordered-list": "^2.2.4", + "@tiptap/extension-paragraph": "^2.2.4", + "@tiptap/extension-placeholder": "^2.2.4", + "@tiptap/extension-strike": "^2.2.4", + "@tiptap/extension-table": "^2.2.4", + "@tiptap/extension-table-cell": "^2.2.4", + "@tiptap/extension-table-header": "^2.2.4", + "@tiptap/extension-table-row": "^2.2.4", + "@tiptap/extension-text": "^2.2.4", + "@tiptap/extension-text-align": "^2.2.4", "tiptap-render-view": "^1.0.2" } } diff --git a/shared/extensions.ts b/shared/extensions.ts index 88f5afa..d12b96a 100644 --- a/shared/extensions.ts +++ b/shared/extensions.ts @@ -21,6 +21,7 @@ import { Table } from "@tiptap/extension-table"; import { TableHeader } from "@tiptap/extension-table-header"; import { TableRow } from "@tiptap/extension-table-row"; import { TableCell } from "@tiptap/extension-table-cell"; +import TextAlign from "@tiptap/extension-text-align"; export default [ Document, @@ -43,4 +44,7 @@ export default [ TableHeader, TableRow, TableCell, + TextAlign.configure({ + types: ['paragraph', 'heading'], + }), ]; diff --git a/src/interface/i18n/custom-messages.ts b/src/interface/i18n/custom-messages.ts index c7b90bb..44c1f38 100644 --- a/src/interface/i18n/custom-messages.ts +++ b/src/interface/i18n/custom-messages.ts @@ -23,6 +23,10 @@ export default { }, tools: { relation_block: "Blocks", + align_left: "Align Left", + align_center: "Align Center", + align_right: "Align Right", + align_justify: "Justify", paragraph: "Paragraph", code_block: "Code Block", h1: "$t:wysiwyg_options.h1", diff --git a/src/interface/interface.vue b/src/interface/interface.vue index 592335a..1aa26ac 100644 --- a/src/interface/interface.vue +++ b/src/interface/interface.vue @@ -44,6 +44,7 @@ import Placeholder from '@tiptap/extension-placeholder' import Dropcursor from '@tiptap/extension-dropcursor' import Gapcursor from '@tiptap/extension-gapcursor' + import TextAlign from '@tiptap/extension-text-align' import RelationBlock from "./nodes/relation-block"; import { toolsExtensions, interfaceOptionsDefault, selectedTools } from './tools' import { useSyncRelationNodes } from "./composables/use-sync-relation-nodes" @@ -111,6 +112,9 @@ Placeholder.configure({ placeholder: props.placeholder }), Dropcursor, Gapcursor, + TextAlign.configure({ + types: ['paragraph', 'heading'], + }), RelationBlock, ...toolsExtensions(props.tools) ], @@ -427,6 +431,20 @@ .flexible-editor :deep(.ProseMirror .ProseMirror-gapcursor:last-child:after) { bottom: 0; } + + .flexible-editor .ProseMirror [textAlign="left"] { + text-align: left; + } + .flexible-editor .ProseMirror [textAlign="center"] { + text-align: center; + } + .flexible-editor .ProseMirror [textAlign="right"] { + text-align: right; + } + .flexible-editor .ProseMirror [textAlign="justify"] { + text-align: justify; + } + diff --git a/src/interface/tools/index.ts b/src/interface/tools/index.ts index 409479b..e6740fe 100644 --- a/src/interface/tools/index.ts +++ b/src/interface/tools/index.ts @@ -1,5 +1,6 @@ // NOTE: [guide] Add a `Tool` by creating a new file in this directory, importing it and adding it to the `tools: Tool[]` array below! If you import a tiptap extension that also renders content, make sure to add it to /shared/extensions.ts as well! +import { textAlignTools } from "./textAlign"; import heading from "./heading"; import history from "./history"; import relationBlock from "./relation-block"; @@ -20,6 +21,7 @@ import type { AnyExtension } from "@tiptap/core"; import type { Tool, ToolSelection, InterfaceOption } from "../types"; const tools: Tool[] = [ + ...textAlignTools, relationBlock, paragraph, codeBlock, diff --git a/src/interface/tools/textAlign.ts b/src/interface/tools/textAlign.ts new file mode 100644 index 0000000..071652c --- /dev/null +++ b/src/interface/tools/textAlign.ts @@ -0,0 +1,18 @@ +// https://tiptap.dev/api/extensions/text-align +import TextAlign from "@tiptap/extension-text-align"; +import customMessages from "../i18n/custom-messages"; +import type { Editor } from "@tiptap/core"; +import type { Tool } from "../types"; + +const textAlignOptions = ['left', 'center', 'right', 'justify']; + +export const textAlignTools = textAlignOptions.map((alignment) => ({ + key: `align_${alignment}`, + name: (customMessages.tools as any)[`align_${alignment}`], + icon: `format_align_${alignment}`, + extension: [TextAlign], + action: (editor: Editor) => editor.chain().focus().setTextAlign(alignment).run(), + disabled: (editor: Editor) => !editor.can().chain().focus().setTextAlign(alignment).run(), + active: (editor: Editor) => editor.isActive('textStyle', { textAlign: alignment }), +})) as Tool[]; +